/******************************************************************************

Description:	Style Definitions for COGM Site

Created:		April 10, 2010

Author: 		Ryan R. Marzan

*******************************************************************************/

/******************************************************************************
APPLICATION INTERFACE FRAMEWORK DEFINITIONS

This block defines the basic framework of the the entire web application.

	body -  		basic css structure definitions 
	maincontainer - a div to contain the header, body and footer divs
					that has a fixed px width and centered in the browser.
				  - 978px is the optimal size for a 1024x798 screen resolution.
				  - 978px is also optimal size to equally divide into 3 columns.	
			     
*******************************************************************************/
body
{
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #CCCCCC;
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	background:#120E29 url(../images/background_cogm3_span.jpg) 0 0;
	background-position:center top;
	/*background-repeat:no-repeat;*/
	background-repeat:repeat-x;
	/*background-attachment: fixed;*/
}

#maincontainer 
{
	background-color:#000000;
	background:#120E29 url(../images/background_cogm3.jpg) 0 0;	
	background-repeat:repeat-x;	
	width: 1024px;
	margin: 0 auto; /*This is the parameter that centers the container on the web page*/		
}
                    
/******************************************************************************
APPLICATION HEADER SECTION DEFINITIONS
*******************************************************************************/
#header
{
    /*background: #CCC url(../images/header_v2.gif) 0 0;*/		
    height: 105px;
	width: 978px;
	margin: 0 auto; /*This is the parameter that centers the container on the web page*/	
}

/******************************************************************************
APPLICATION NAVIGATION DEFINITIONS

*******************************************************************************/

ul#nav li a.active { /* Works with the Javascript to indicate active page on navigation */
	background: url(../images/navigation_over.gif) repeat-y left center !important;
	/*font-size:24px;*/
	color:#FFCC00;
}

/***************************************************************
Vertical Navigation Menu
***************************************************************/
.slidedoormenu{
list-style-type: none;
margin: 0;
padding: 0;
width: 200px; /* width of menu (don't forget to add border with below!) */
/*border-left: 8px solid #ffa1a3; /* thick left border of menu */
}

.slidedoormenu li{
border-bottom: 1px solid #4C387A; /* Gray border beneath each menu item */
text-align:left;
margin-right: 10px;

}

.slidedoormenu li a{
/*background: url(../images/navigation_over.gif) repeat-y left center; /* Background image positioned to the left(v) top(h) corner initially */
font: bold 12px "Lucida Grande", "Trebuchet MS", Verdana;
display: block;
color: #FFFFFF;
width: auto;
border-bottom: 1px solid #120E29; /* White border beneath each menu item link, to add depth */
padding: 7px 0; /* Vertical (top/bottom) padding for each menu link */
/*text-indent: 8px;*/
text-decoration: none;
text-align:right;
padding: 10px;
padding-right: 20px;
height: 35px;
}

.slidedoormenu li a:visited, .slidedoormenu li a:active{
color: #FFFFFF;

}

.slidedoormenu li a:hover{
background: url(../images/navigation_over.gif) repeat-y left center;
/*background-position: -387px 0;  Shift background image horizontally 387px, or the start of the 2nd background image */
color:#FFCC00;
}

.slidedoormenu li.lastitem, .slidedoormenu li.lastitem a{
border-bottom-width: 0; /* For last menu item within menu, remove bottom border */
}

.slidedoormenu li.lastitem a{
padding: 8px 0; /* increase vertical border of last menu link by 2px (default is padding: 7px 0) to account for removed border width */
}

<!--[if IE]>
.slidedoormenu li a{ /* Menu link width value for IE */
width: 100%;
}

/******************************************************************************
APPLICATION COLUMN SECTION DEFINITIONS
*******************************************************************************/
#contentContainer
{
	/*background: #FFFFFF url(../images/background_wt.jpg) repeat-y 50% 0;*/					
	min-height:450px;	
	height:auto;					/*This parameter is needed for container divs to adjust its height*/
	overflow:auto;
	overflow-x: hidden;
	overflow-y: hidden;	
	text-align: left;
	padding: 0px;
	border:0;
	width: 978px;			
	margin: 0 auto; /*This is the parameter that centers the container on the web page*/			
	/*background-color:#352C4E;*/
	padding:10px;	
}

/************************
Main Interface Framework 
************************/

#frame_sidenav
{
	float: left;
	width: 200px;
	/*background-color: #cccccc;*/
}

#frame_maincontent
{ 
	float: left;
	width: 530px;
	/*background-color: #999999;*/
	padding-left: 5px;	
}

#frame_subcontent
{
	float: right;
	width: 210px;	
	/*margin-right: 5px;*/
	clear:right;
	/*background-color: #000000;*/	
	padding-left: 10px;
}

/******************************************************************************
TEXT, PARAGRAPH, TEXT HEADINGS, AND LINK DEFINITIONS
*******************************************************************************/
p
{
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 12px;
    color: #CCCCCC;
    /*padding-left: 15px;*/
	padding-right: 15px;
	padding-top: 5px;
	padding-bottom: 5px;
    margin: 0px;
}

.justify
{
text-align:justify;
}

h1
{
    /*font-family: Helvetica, sans-serif;*/
	font-family:Georgia, "Times New Roman", Times, serif;
    font-size: 20px;
	font-weight:normal;
	color:#FFCC00;
	display: block;
	text-align:center;
	border-top: 1px solid #1B152F;
	border-bottom: 1px solid #9188AE;
	border-left: 1px solid #281F46;
	border-right: 1px solid #6C6093;
	margin: 0 auto; /*This is the parameter that centers the container on the web page*/	
	margin-bottom: 10px;
	text-transform:uppercase;
	padding: 10px;
	margin-top: 10px;
	
}

h2
{
	font-family:Georgia, "Times New Roman", Times, serif;
    font-size: 24px;
	font-weight:normal;
	color:#9999CC;
    /*padding: 5px;*/
	/*margin-left: 10px;*/
	margin-top: 5px;
	margin-bottom: 5px;
	display: block;
	padding-bottom: 5px;
	border-bottom: 1px solid #4C387A; /* border beneath each menu item link, to add depth */
}

h3
{
	font-family:Georgia, "Times New Roman", Times, serif;
    font-size: 16px;
	font-weight:normal;
	color:#9999CC;
    /*padding: 5px;*/
	/*margin-left: 10px;*/
	margin-top: 5px;
	margin-bottom: 5px;
	display: block;
	text-transform:uppercase;
}

h4
{
	font-family:tahoma, Helvetica, sans-serif;
	font-size:11px;
	text-transform:uppercase;
	text-spacing: 2em;
	margin-bottom: 0px;
	margin-left: 16px;
	margin-top: 5px;
	margin-right: 10px;
	color: #FFFFFF;
	display:block;
	border-bottom: 1px solid #CCCCCC;
	padding-bottom: 5px;
}

a 
{
	color: #FFCC00;
	text-decoration:none;
}

a:hover 
{
	color: #FFCC00;
	text-decoration:underline;
}

/******************************************************************************
HOMEPAGE STYLE DEFINITIONS
*******************************************************************************/

/************************
3 column layout 
************************/
#home_1of3
{
	float: left;
	width: 289px;
}

#home_2of3
{ 
	float: left;
	width: 400px;	
}

#home_3of3
{
	float: right;
	width: 289px;
}

.homeimage
{
float: left;
margin-right: 10px;
margin-bottom: 8px;
margin-top: 5px;
}


.homeimage2
{
border: 3px solid #49348C;
}

#mainimage /*Rotating image styles*/ 
{
margin-top: 10px;
margin-bottom: 10px;
background-color:transparent;
border: 3px solid #49348C;
}





/******************************************************************************
APPLICATION FOOTER SECTION DEFINITIONS
*******************************************************************************/
#footer
{
	background-image: url(../images/footer_v2.jpg);
	background-repeat:no-repeat;
	background-position:top center;
	clear: both;
	height: 100px;
	bottom: 0px;
	width: 978px;					
    margin: 0 auto;			/*This is the parameter that centers the container on the web page*/
	padding-top: 30px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 11px; 
	/*border-top: 30px solid #FFFFFF;*/
	display: none;
}


/************************
Copyright information 
************************/

#copyright 
{
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:10px;
	color: #fff;
	text-align:center;
	background-image: url(../images/background_footer.jpg);
	background-repeat:repeat-x;
	background-position:top center;	
	height: 75px;
	/*margin-top: 20px;*/
	padding-top: 25px;
}

/******************************************************************************
APPLICATION CONTACT FORM DEFINITIONS
*******************************************************************************/
.cssform 
{
	/*margin: 10px;*/
	background-color:#332C59;
	padding: 20px;
	margin: 17px;
}

.cssform p
{
	width: 300px;
	clear: left;
	margin: 0;
	padding: 5px 0 8px 0;
	padding-left: 155px; /*width of left column containing the label elements*/
	border-top: 1px dashed gray;
	height: 1%;
}

.cssform label
{
	font-weight: bold;
	float: left;
	margin-left: -155px; /*width of left column*/
	width: 150px; /*width of labels. Should be smaller than left column (155px) to create some right margin*/
}

.cssform input[type="text"] /*width of text boxes. IE6 does not understand this attribute*/
{ 
	width: 180px;
}

.cssform textarea
{
	width: 250px;
	height: 150px;
}

/*.threepxfix class below:
Targets IE6- ONLY. Adds 3 pixel indent for multi-line form contents.
*/

* html .threepxfix
{
	margin-left: 3px;
}

/******************************************************************************
CONF GRAND MASTERS DEFINITIONS
*******************************************************************************/

/************************
2 column layout 
************************/
#confgm_1of2
{
	float: left;
	width: 289px;
}

#confgm_2of2
{ 
	margin: 0;
	float: right;
	width: 689px;
}

.navigation_main ul li{
	display: inline;
}

/*table that contains executive officers table*/
#committee, #officers
{
border: 1px solid #564093;
/*margin: 20px;*/
padding: 10px;
font-size:11px;
}

#committee th
{
border-bottom: 1px solid #564093;
font-size:14px;
text-transform:uppercase
}

.alt{
background-color:#332C59;
}

#officerpic {
border: 5px solid #49348C;
margin: 5px;
}





/******************************************************************************
CALENDAR PAGE STYLES
*******************************************************************************/

.datebox 
{
	width: 60px;
	height: 60px;
	background-color:#ccc;
	margin-left: 15px;
	margin-bottom: 0px;
	margin-right: 10px;
	margin-top: 10px;
	float: left;
	text-align: center;
	padding-top: 3px;
	padding-bottom: -3px;
	border: 3px solid #333333;
	border-top: 15px solid #333333;
	font-size:9px;
	font-family:Arial, Helvetica, sans-serif;
	font-weight:normal;
	text-transform:uppercase;
}

.datebox span
{
	font-size:36px;
	font-family:Arial, Helvetica, sans-serif;
	font-weight:bold;
	margin-top: -50px;
	padding-top: -10px;
}

.yearbox 
{
	width: 60px;
	height: 60px;
	background-color:#ccc;
	margin-left: 15px;
	margin-bottom: 0px;
	margin-right: 10px;
	margin-top: 10px;
	float: left;
	text-align: center;
	padding-top: 3px;
	padding-bottom: -3px;
	border: 3px solid #333333;
	border-top: 15px solid #333333;
	font-size:9px;
	font-family:Arial, Helvetica, sans-serif;
	font-weight:normal;
	text-transform:uppercase;
}

.yearbox span
{
	font-size:36px;
	font-family:Arial, Helvetica, sans-serif;
	font-weight:bold;
	margin-top: -50px;
	padding-top: -10px;
}


#calendarList ul
{
	margin: 0;
	/*padding: 12px 18px 5px;*/
	list-style: none;
}

#calendarList li
{
	margin: 0;
	padding: 5px;
	list-style-type:none;
	display: block;
	margin-left: -40px;	
}

#calendarList a
{
	color: #336699;
	margin: 0;
	/*padding: 5px 12px;*/
	/*background: url(../images/btn_pdf.png) no-repeat 15px 17px;*/ 	
	text-decoration: none;
	height: 50px;			/*important parameter to define so on hover over, the entire row height gets highlighted*/
	display: block;			/*parameter that makes sure that when you hover over,the entire row width gets highlighted*/
	/*padding-left: 100px;*/		
	/*border: 1px solid #120E29;*/
}

#calendarList a:hover
{
	color: #336699;
	/*background: url(../images/btn_pdf.png) no-repeat 15px 17px;*/	
	text-decoration: none;
	height: 50px;			/*important parameter to define so on hover over, the entire row height gets highlighted*/
	display: block;			/*parameter that makes sure that when you hover over ,the entire row width gets highlighted*/
	/*border: 1px solid #564093;*/		
}

.calendarListTitle 
{
	color: #FFFFFF !important;
	font-family:Arial, Helvetica, sans-serif;
	font-size: 24px !important;
	font-weight:bold !important;
	/*margin-left: 60px;	*/
	margin-bottom: -5px;
	/*text-decoration:underline;*/
	float: left;
	border-right: 1px solid #FFFFFF;
	padding: 3px;
	margin-top: px;
	margin-right: 5px;
	padding-right: 5px;
}

.month 
{
color: #FF6600;
text-transform:uppercase;
font-size:10px;
clear:right;
float: left;
margin-top:-7px;
margin
}

.calendarListDesc 
{
	color: #CCCCCC !important;	
	font-weight:normal;
	font-size: 12px !important;
	/*margin-left: 60px;*/	
	margin-left: 15px;
	padding-left: 15px;	
	margin-top: -5px;
}

.calendarListPOC 
{
	color:#666699;	
	font-weight:normal;
	font-size: 11px !important;
	/*margin-left: 60px;*/	
	margin-top: -7px;
}

/******************************************************************************
LISTING PAGE STYLES
*******************************************************************************/

#webList ul
{
	margin: 0;
	/*padding: 12px 18px 5px;*/
	list-style: none;
}

#webList li
{
	margin: 0;
	padding: 5px;
	list-style-type:none;
	display: block;
	margin-left: -40px;	
}

#webList a
{
	color: #336699;
	margin: 0;
	padding: 5px 12px;
	background: url(../images/btn_pdf.png) no-repeat 15px 17px; 	
	text-decoration: none;
	height: 85px;			/*important parameter to define so on hover over, the entire row height gets highlighted*/
	display: block;			/*parameter that makes sure that when you hover over,the entire row width gets highlighted*/
	/*padding-left: 100px;*/		
	border: 1px solid #564093;
}

#webList a:hover
{
	color: #336699;
	background: url(../images/btn_pdf.png) no-repeat 15px 17px;	
	text-decoration: none;
	height: 85px;			/*important parameter to define so on hover over, the entire row height gets highlighted*/
	display: block;			/*parameter that makes sure that when you hover over ,the entire row width gets highlighted*/
	border: 1px solid #CCCCCC;		
}

.webListTitle 
{
	color: #FFFFFF !important;
	font-family:Arial, Helvetica, sans-serif;
	font-size: 16px !important;
	font-weight:bold !important;
	margin-left: 60px;	
	margin-bottom: -13px;
	/*text-decoration:underline;*/
}

.webListDesc 
{
	color: #CCCCCC !important;	
	font-weight:normal;
	font-size: 12px !important;
	margin-left: 60px;	
}

.webListPOC 
{
	color:#666699;	
	font-weight:normal;
	font-size: 11px !important;
	margin-left: 60px;	
	margin-top: -7px;
}



/******************************************************************************
OTHER MASONIC LINKS PAGE STYLES
*******************************************************************************/
#statetable 
{
	width: 100%;
	/*border: 1px solid #564093;*/
	padding: 2px;
	margin: 0 auto; /*This is the parameter that centers the container on the web page*/
		
	
}

#statetable li
{
	list-style-type:none;
	margin-left: -45px;
	padding: 2px;
	margin-top: -4px;	
	font-size:11px;
		
	
}

#statetable a
{
	color: #FFCC33;
	font-weight: normal;
	text-decoration:none;
	font-size:11px;
}

#statetable a:hover
{
text-decoration:underline;
color: #FFCC33;
}


.linksTable { /*main table defintions*/
	border: 1px solid #4C387A;
	/*border-bottom: 20px solid #B8D0DE;*/
	/*border-top: 5px solid #B8D0DE;*/	
	width: 100%;
	padding: 10px;
	font-family: Verdana, Tahoma, Arial;
	font-size: 11px;	
	color: #ffffff;
}


.linksTable td { 
	border-bottom: 1px solid #4C387A;
	padding: 10px;
}


	.mouseon { /*Row highlight color on mouseover*/
	background-color: #4C387A;
	cursor:pointer;
	cursor:hand;
	font-size: 11px;		
	border: 1px solid #B8D0DE;
	}
	.mouseoff { /*Row highlight color on normal state*/
	background-color: inherit;
	font-size: 11px;		
	border: 1px solid #4C387A;
	}


/*table that contains executive officers table*/
#gjlinks
{
border: 1px solid #564093;
/*margin: 20px;*/
padding: 10px;
font-size:11px;
width:95%;
}

#gjlinks th
{
border-bottom: 1px solid #564093;
font-size:14px;
text-transform:uppercase;
}

#gjlinks tr
{
border-bottom: 1px solid #564093;
/*background-color:#000000;*/
padding: 10px;
}

/******************************************************************************
Additional Popup window feature for the map pages
*******************************************************************************/

.thumbnail{
position: relative;
z-index: 0;
font-size:11px;
}

.thumbnail:hover{
background-color: transparent;
z-index: 50;
}

.thumbnail a:hover{ 
text-decoration:none;
}

.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
background-color: #CCCCCC;
padding: 5px;
left: -1000px;
border: 1px solid #333333;
visibility: hidden;
color: black;
text-decoration: none;
width: 150px;
}

.thumbnail span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 2px;
}

.thumbnail:hover span{ /*CSS for enlarged image on hover*/
visibility: visible;
top: 0;
left: 75px; /*position where enlarged image should offset horizontally */
top: -100px;

}