
/* the first half of this style sheet is general page formatting styles */

/*__________Clean slate__________*/

body, h1, h2, h3, h4, li, p, ul { font-size: 1em; margin: 0; padding: 0; }

/*__________Basics__________*/
a, a:link,  a:hover, a:active { color: #369; } 
a:visited {color: #999999;}
a:hover { text-decoration: none; }
html {
		font-size: 100%;
		}

body {
	color: #0f330d; 
	font-family: Tahoma;
	font-size: 100%;
	padding-bottom: 20px;
}

/* #bodyList ul { list-style-image: url(../Images/edgbul3.gif); padding: 0 10px 10px 10px; }*/
#bodyList ul { list-style: none; padding: 0 10px 10px 10px; }
#bodyList li { background: url(../Images/edgbul3.gif) no-repeat 0 8px; 
padding: 3px 10px 0 15px; 
font-size: 0.85em;   }

#numList ul { list-style: none; padding: 0 10px 10px 10px; }
#numList li { padding: 3px 10px 30px 15px; 
font-size: 0.85em;   }

/*	Headings
 	Font size is based on its container. 
 	Substantial top margins are set for headings to provide nice
	separation of sections. */
	
h1 {/* main heading */
		font-size: 1em;
		line-height: 1.0em;
		font-weight: normal;
		margin-bottom: 5px;
		letter-spacing: 0.05em;
		}
		
		h1, h3 { color: #336699; /* dk. blue */
	font-family: Georgia, "Times New Roman", Times, serif;
 	font-size: 1.3em;
	font-weight: normal; 
	margin: 48px 0 5px 0;
	}
	
			.title { color: #993366; /* dk. red*/
	font-family: Georgia, "Times New Roman", Times, serif;
 	font-size: 1.2em;
	font-weight:bold;
	}
 
h2 { color: #666666;
	font-family: Georgia, "Times New Roman", Times, serif;
	text-transform:uppercase;
	font-size: 1.3em;
	font-weight: normal; 
	margin: 24px 0 8px 0; /* shorthand T-R-B-L */
	}

h2.committee { margin-bottom: 0;}
h3 { color: #336699; /* dk. blue */
	font-family: Georgia, "Times New Roman", Times, serif;
	font-style: italic; 
	font-size: 1.3em;
	font-weight: normal; 
	margin: 24px 0 5px 0;
	}

h4 { color:#993366;
	font-style: italic; 
	font-size: 0.8em; 
	font-weight: normal; 
	margin: 12px 0 0 0;
	}

#container {
	position:relative;
	margin-top: 17px; 
	margin-left: 218px; 
	z-index: 99;
	padding-bottom: 20px;
 }
 #photoContainer {
	position:relative;
	margin-top: -8px; 
	margin-left: 208px; 
	/* height: 800px;	firefox treats height as an absolute size, so we can't use it here */
	z-index: 99;
	padding-bottom: 20px;
 }


p { line-height: 1.5em; margin-bottom: 1em; }

/*___these two do the centering ____*/
#centerPageOuter { text-align: center;
 position: absolute; 
 background:#fff url(../Images/bg.gif) top left repeat-x;
 top: 0px; 
 left: 0px;
 width: 100% }
   
#centerPageInner { position: relative; 
margin: 0 auto; 
text-align: left; 
width: 780px; 
background: url(../Images/blueLeftBar.gif) repeat-y;
}
.holiday{ position: relative; 
margin: 0 auto; 
text-align: left; 
width: 350px; 
background: url(../Images/pointsettia.gif) top left repeat-x ;}
.dropcap {
color: #F00;
float: left;
font-family: Times, Georgia,serif;
font-size: 300%;
line-height: 0.85em;
margin-right: 0.03em;
margin-bottom:-0.25em;
}
.announce { color:#f00;
	font-style: italic; 
	font-size: 0.8em; 
	font-weight: normal; 
	margin: 12px 0 0 0;
	text-align:left;	}
.announceNoSize { color:#f00;
	margin: 12px 40px 0 40px;
	text-align:left;	}
}



.pointsettias{ position: relative; 
margin: 0 auto; 
text-align: left; 
width: 350px; 
height: 50px;
background: url(../Images/pointsettia.gif) repeat-x ;
}
/*__________Quick summary__________*/
.quickSummary { 
			margin-right: 0em;
			margin-left: 0em;
			margin-bottom: 1em;
			font-size: 0.75em;
			font:Georgia, "Times New Roman", Times, serif;
 }
.quickSummary .p2 { text-align: right; font-style:normal; margin-top: 1em; 
}
.introQuote{ 
			margin-right: 5em;
			margin-left: 5em;
			margin-bottom: 1em;
			font-size: 0.75em;
			font:Georgia, "Times New Roman", Times, serif;
 }
.introQuote .p2 { text-align: right; font-style:normal; margin-top: 1em; 
}

.timeStamp {
		font-size: 0.5em;
		float: right;
		color: #cccccc;
		letter-spacing: 0;
		}

.error {
	color: #CC3300;
	font-family: "Times New Roman", Times, serif;
	font-style: italic;

}
.timeStamp2 {
		font-size: 1em;
		float: right;
		color:#999999;
		letter-spacing: 0;
		}
.resolution {
	text-transform:uppercase;
	margin: 0 0 0 0;
	color:#993366;
		}


/*__________Preamble, etc. For now, these are all the same__________*/
.preamble, .supportingText{
	margin-top: 10px;
	font-size: medium;
	background: url(../Images/gold.jpg) repeat-x bottom;
	/* border-bottom: 1px solid #cc9933;  for some reason this way of doing the border doesn't work in ie*/
	margin-left: 50px; 
	margin-right: 50px;
	margin-bottom: 1em;
	padding-bottom: 10px;
}
.article{
	margin-top: 10px;
	font-size: 1em;
	background: url(../Images/gold.jpg) repeat-x bottom;
	/* border-bottom: 1px solid #cc9933;  for some reason this way of doing the border doesn't work in ie*/
	margin-left: 50px; 
	margin-right: 50px;
	margin-bottom: 1em;
	padding-bottom: 10px;
}

.inBack{
position:absolute;
margin-left: 40;
margin-top: 10;
z-index:-1;}
.form{
	margin-top: 10px;
	font-size: 1em;
	background: url(../Images/gold.jpg) repeat-x bottom;
	/* border-bottom: 1px solid #cc9933;  for some reason this way of doing the border doesn't work in ie*/
	margin-left: 10px; 
	margin-right: 10px;
	margin-bottom: 1em;
	padding-bottom: 10px;
}
.articleNoLine{
	margin-top: 10px;
	font-size: 1em;
	margin-left: 50px; 
	margin-right: 50px;
	margin-bottom: 1em;
	padding-bottom: 10px;
}
.homePage {
	margin-top: 30px;
	font-size: 1em;
	margin-left: 50px; 
	margin-right: 50px;
	margin-bottom: 1em;
	padding-bottom: 10px;
}



.quotation {
		margin: 1.6em 0 1em 1em;
		float: right;
		width: 150px;
		text-align: right;
		}
		p.quoteBody {
		margin: 0;
		font-style:oblique;
		float:right;
		width: 150px;
		text-align: right;
		color: #9d0a0e;
		font-size: 1em;
		}
		p.standardQuote {
		float:none;
		text-align:left;
		margin-left: -20px;

		}
		
p.quoteCite {
		color:#999999;
		text-align: right;
		font-size:0.85em;
		}
.insetTable{
	margin-top: 10px;
	font-size: 1.5em;
	margin-left: 50px; 
	margin-right: 50px;
	margin-bottom: 1em;
	padding-bottom: 27px;
}
 .boxout {
		float: right;
		width: 180px;
		margin: 0 0 20px 20px;
		padding: 1em 0 0 10px;
	background: url(../Images/teenyPointsettia.gif) repeat-y );
		}
 .hotBoxout {
		float: right;
		width: 180px;
		margin: 0 0 20px 20px;
		padding: 1em 0 0 10px;
		border-left: 1px solid #cccccc;
		font: italic;
		color: #FF0000;
		}
		.boxout h1 {
		color: #9d0a0e;
		font-size: 1.2em;
		line-height: 1.0em;
		margin-bottom: 0;
		}

/*__________hotLink: use this to get attention!___*/
.hotLink a:hover, a.hotLink a:active, a.hotLink a:focus {color: #FF0066;}
.hotLink a:visited {color: #336699;}

#byLine {margin-top: 0px; font-size: 0.8em;}
.byLine {margin-top: 0px; font-size: 0.6em; font-style:italic;
		text-transform: uppercase;
		color:#999999;
		margin-left:20px;
		}
.chairLine {margin-top: 0; margin-left: 0; font-style:italic;
		}
/* Button */
a.button{
	background: url(../SideMenuButton.gif);
	color:#FFFFFF; /*White*/
	height: 20px;
	text-align: center;
	padding: 5px;
	position:absolute;
	margin-top: -33px; 
	margin-left: 20px;
	text-decoration: none; 

}
a.button, a.button:link, a.button:visited, a.button:hover, a.button:active { color: white; } 
 a.button:hover { font-weight:bold;}
 
 /* Volunteer Button */
a.button2{
	background: url(../SideMenuButton.gif);
	color:#FFFFFF; /*White*/
	height: 20px;
	text-align: center;
	padding: 5px;
	position:absolute;
	margin-top: -33px; 
	margin-left: 120px;
	text-decoration: none; 
}
a.button2, a.button2:link, a.button2:visited, a.button2:hover, a.button2:active { color: white; } 
 a.button2:hover { font-weight:bold;}
 
  
 /*__________Side__________*/
#sideBar{ position: absolute; 	
	top: 146px; 
	left: 0px; 
	z-index: 99; 	
	width: 218px;
 }
 
#linkList {
	color: #fff; 
	font-family: Tahoma, Arial, sans-serif;
	font-size: 1em;
	font-weight: normal;
	left: 0;
	overflow: hidden;
	top: 0px;
}

#linkList h3, #linklist h2 { font-family: Georgia, "Times New Roman", Times, serif; }
#linkList a { 
	color: #ccc180; /*linen*/
	font-size: 1.1em; 
	font: Tahoma; 
	font-weight: bold; 
	text-decoration: none; 
	}
#linkList a:hover { text-decoration: underline; }

#linkList h2 {
	color: whitesmoke;
	font-size: 1.4em;
	font-style: normal;
	padding-top: 0.5em;
	text-align: center;
	text-transform: uppercase;
}
#linkList h3 {
	color: #fffbe2;
	font-style: italic;
	font-size:0.8em;
	padding-top: 0.5em;
	text-transform: uppercase;
}

#linkList li { 0.3em; padding-left: 15px; }
#linkList ul { list-style: none; 
padding: 0 10px 10px 10px; }

.lSideBarItem { background: #26330;  border-bottom: 3px double #ada364; } /*dk linen*/
.lSideBarItem a { display: block; } /* firefox and ie handle the block attribute differently so for consistency we may wish to omit it */
/*_____Styles for member links_____*/

.memberLink a:link, .memberLink a{
	text-decoration: underline;
	font-size: 0.85em;}

.memberLink a:hover, .memberLink a:active, .memberLink a:focus {
	background-color: #333333;
	color:#FFFFFF; }
	
	.memberLink a:visited {
	color: #999999;}	


/* customize the way different kinds of calendar events are displayed */
/* some possible colors: bright green = #33ff33, bright blue = #000033, yellow = #ffff33, orange = #ff9900 */
.EVTCATcaucus h3 {
	color: #336699; /*pale blue*/
	}
.EVTCATgeneral h3 {
	color: #336699; /*pale blue*/
	}
.EVTCATexecboard h3 {
	color: #336699; /*pale blue*/
	}
.EVTCATnondemocratic h3 {
	color: #ff9900; /*orange*/
	}


/*__________Footer__________*/
#footer {
	font-size: 0.75em;
	font-style: italic; 
	text-align: center; 	
	margin-left: 218px;
	margin-top: 10px;
	margin-bottom: 1200px; /* force the page borders to extend down past the actual content */
	width 100%;
	}
/* 	Link styles for Footer Content only
	Active and Focus trigger the color change when tabbing through the links with keyboard. */
#footer a:link {color: #cc9933; text-decoration: none;} /*dk. gold*/
#footer a:visited {color: #cc9933;} /*dk. gold*/
#footer a:hover, #footer a:active, #footer a:focus {color: #000000;}



/*_____Table styles _____*/
	  #tableStyle1 {
line-height: 1.4em; 
margin-top:0px;
width: 60%;
margin-left: 15px;
padding: 20px 0px 20px 0px;
vertical-align:top;
}

	  .caucus {
line-height: 1.4em; 
margin-top:0px;
width: auto;
background-color: whitesmoke;
background: url(../Images/bg.gif) top left repeat-x;
border-style: inset;
margin-left: 15px;
padding: 20px 0px 20px 0px;
vertical-align:top;
}

 #tableStyleWide {
line-height: 1.4em; 
margin-top:0px;
margin-left: -20px;
padding: 20px 0px 20px 0px;
vertical-align:top;
}
/*__________Extras__________*/
/* Extra div used for picture the entire image is not clipped when text is resized */
#extraDiv1 {
	background: transparent url(picturewhenIgetone.jpg) no-repeat left top;
	height: 351px;
	left: 220px;
	position: absolute;
	top: 126px;
	width: 110px;
	font-style:italic;
	font-size:0.8em;
	text-align:center;
}


/* From here down these styles are for the menu and banner */

	/* banner */
#banner {
	position: relative;
	top: 0;
	left: 0;
	width: 100%;
}

/* Heading Rules */

/*	The H1 is used to wrap the banner, representing
	the top of your page's hierarchy */
#banner h1 {margin: 0;}

/* 	Use a combined selector to assign all properties common to each
	of the trigger DIVs */
#topMenuItem1, #topMenuItem2, #topMenuItem3, #topMenuItem4, #topMenuItem5, #topMenuItem6 {
	position: absolute;
	top: 120px;
	border: 0;
	font-size: 16px;
	text-align:center;
	z-index: 100;
	width: 123px;
}
/* 	Now use individual selectors for each trigger Layer to assign their unique properties.
	The first button is wider than the rest, so only its width is unique and declared here. */
#topMenuItem1 {left: 0px; width: 135px;}
#topMenuItem2 {left: 135px;}
#topMenuItem3 {left: 258px;}
#topMenuItem4 {left: 381px;}
#topMenuItem5 {left: 504px;}
#topMenuItem6 {left: 627px; width: 153px;}

/* 	Link styles for the top menu
Set to block to make link fill up entire layer with background color */
.topMenu a{
	display: block;
	background-color: whitesmoke; 
	}
	

.topMenu a:link, .topMenu a:visited{border-top: 1px solid #999999; 
border-left: 1px solid #999999; 
border-bottom: 1px solid #CCCCCC;	
border-right: 1px solid #CCCCCC;	/* gray */
background-color: #EEEEEE;	/*white */
font-weight: bold;	
font-family:Tahoma;
padding: 2px 5px 2px 5px;	
text-decoration: none;} 

.topMenu a:hover{	
font-weight: bold;	
text-decoration: none;}  


	/* Active and Focus trigger the color change in IE-PC and other
	modern browsers when tabbing through the links with keyboard. */
.topMenu a:hover, .topMenu a:active, .topMenu a:focus {
	background-color: silver;
	color: whitesmoke; }


/* 	The Submenu Layers
 	Use a combined selector to assign all properties common to each
	of the Submenu Layers. */
#subMenu1, #subMenu2, #subMenu3, #subMenu4, #subMenu5, #subMenu6 {
	position: absolute;
	width: 160px;
	top: 144px;
	font-size: small;
	z-index: 200;
	visibility: hidden;
	background-color: #EEEEEE;
}
/* 	Now use individual selectors for each trigger Layer to assign
	their unique properties, in this case the left property */
#subMenu1 {left: 14px;}
#subMenu2 {left: 137px;}
#subMenu3 {left: 260px;}
#subMenu4 {left: 382px;}
#subMenu5 {left: 506px;}
#subMenu6 {left: 629px; width:151px;}

/* 	The submenu links are in paragraphs, so we set the margin to zero
	so there is no gap between links */
.subMenus p {margin: 0;}


/* 	Submenu Link Styles
 	Use a combined selector for a and a:visited. Set padding in shorthand
	to 1px on top and bottom, 8px right and 12px left.
	
	Set display to block so entire link box, including padding is clickable.
	Set border to 1px solid.
	
	Set border colors in shorthand to Light Gray on top and left - and
	Charcoal Gray on right and bottom. This combination of colors creates
	a raised button-type effect.
	
	Set background color to dark gray, text to medium gray and turn off underlines. */
.subMenus a, .subMenus a:visited {
	display: block;
	padding: 1px 8px 1px 12px;
	font-family:Tahoma;
	border-top-style: ridge;
	border-color:#f0f0f0;
	background-color: #EEEEEE; /* gray */
	text-decoration: none;
}

/* 	Change background and text colors when links are hovered over.
	Use a combined selector for hover, active, and focus.
	
	Active and Focus trigger the color change in IE-PC and other
	modern browsers when tabbing through the links with keyboard. */ 
.subMenus a:hover, .subMenus a:active, .subMenus a:focus {
	background-color: silver;
	color: whitesmoke; }
	.formClass {
	font-size: 0.75em;
}


