/* 
Site design C2009 Stephen Rodier, use by permission only
Santa Rosa Junior College Website Development Team:
Jerry Adamson, Stephen Rodier, Gloria Batemon, and Mark Foote 
*/


/*sets background color and zeros margin & padding*/
body {
  text-align: center;
  background: #611923;
  margin:0;
  padding:0;
  font-family:Verdana, Arial, Helvetica, sans-serif;
  font-size:100.1%;
  
  color:#000;
}

/*page_wrapper: sets page width, centers page in browser, holds background image for left and right column*/
#page_wrapper {
  background: #fefaf4 url('images/page_bg.jpg') top left;
  margin-left: auto; 
  margin-right: auto;
  width: 850px;
  text-align: left;
 }
 
/* #page_header_1: use for pages in top horizontal navagation sets height of header and holds background image of header */
#page_header_1 {
  height: 209px;
  background: #333 url('images/header1.jpg') top left no-repeat;
} 
 
/* #page_header_1 h1 & h2 makes headings of background image visible to screen reader and search engines but hidden in browser */
#page_header_1 h1 {
  padding-left: 20px;
  font-family: verdana, helvetica, sans-serif;
  font-size:26px;
  font-weight:bold;  
  color: #000;
  visibility: hidden;
  margin:0px; 
}
#page_header_1 h2 {
  padding-left: 20px;
  font-family: verdana, helvetica, sans-serif;
  font-size: 14px;
  color: #000;
  visibility: hidden;
  margin:0px; 
}
/* #page_header_2: use for pages in left-side navagation sets height of header and holds background image of header */
#page_header_2 {
  height: 209px;
  background: #333 url('images/header2.jpg') top left no-repeat;
} 
/* #page_header_2 h1 & h2 makes headings of background image visible to screen reader and search engines but hidden in browser */
#page_header_2 h1 {
  padding-left: 20px;
  font-family: verdana, helvetica, sans-serif;
  font-size:26px;
  font-weight:bold;  
  color: #000;
  visibility: hidden;
  margin:0px; 
}
#page_header_2 h2 {
  padding-left: 20px;
  font-family: verdana, helvetica, sans-serif;
  font-size:14px;
  color: #000;
  visibility: hidden;
  margin:0px; 
}
/* holds background image for horizontal menu */
#menu_bar {
  height:32px;
  background: #d8c090 url('images/menu_bg.jpg') top left repeat;
}

/*  #navcontainer holds unordered list that is the horizontal menu */
#navcontainer ul {
	padding-left: 0;
	margin-left: 0;
	margin-top:0;
	background-color: transparent;
	float: left;
	width: 100%;
	font-family: verdana, helvetica, sans-serif;
	font-size:12px;
	font-weight:bold;
	}

/*makes the list display horizonlally*/
#navcontainer ul li { display: inline; }

#navcontainer ul li a {
	padding: 0.7em 2em;
	color: #982737;
	text-decoration: none;
	float: left;
	border-right: 1px solid #C1BD8E;
	}

#navcontainer ul li a:hover {
	background-image:url('images/menu_hov.jpg');
	color: #fff;
	}

/*this div holds the left side and right side divs and the background image that is the drop-shadow under the horozontal nav bar*/
#content_wrapper {
	background: transparent url('images/content_bg.jpg') top left no-repeat;
	}


/*holds all left side content*/	
#left_side {
	float:left;
	width:200px;
	background-color: transparent;
	margin:10px 0 0 0;
	}
/*This is the unordered list that is the left navigation*/
#left_side #menu ul {width:198px;
	list-style-type: none;
	margin:0;
	padding: 0;
	}
/*controls basic appearance of menu*/	
#left_side #menu li {
	width:180px;
	font-family: verdana, helvetica, sans-serif;
	font-size: 12px;
	line-height: 150%;
	font-weight: bold;
	background-image:url('images/menu_off.jpg'); background-repeat:repeat-x;
	height: 32px;
	}	
/*controls appearance of off and visited states*/	
#left_side #menu li a:link, #menu li a:visited {
	width:180px;
	color:#982737;
	font-weight: bold;
	display: block;
	padding: 8px 0 0 18px;
	height: 32px;
	text-align:left;
	text-decoration: none;
	}
/*controls appearance of hover state*/	
#left_side #menu li a:hover {
	width:180px;
	background-image:url('images/menu_hov-ls.jpg'); background-repeat:repeat-x;
	color: #fff;
	font-weight: bold;
	padding: 8px 0 0 18px;	
	height: 32px;
	text-align: left;
	}
	
#left_side a:link, a:visited {
	color:#982737;
	font-weight: bold;
	text-align:left;
	text-decoration: none;		
  }
  #left_side a:hover {
	color: #fff;
	font-weight: bold;
	text-align: left;
	}
  
#left_side p {
	margin:15px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	text-align:left;
	font-size:12px;
	line-height:140%;
	color:#982737;
	}
/*this is for the Norbay music award*/	
#award {width:180px;
	height:50px;
	margin:30px 5px 20px 10px;
	}
#award p {font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:10px;
	padding:0;
	margin:0;
	line-height:100%;
	color:#982737;
	}
#award img {float:left;
	margin:3px 5px;
	}			

/*holds all right side content*/
#right_side {
	float:right;
	width:645px;
	background-color:transparent ;
	}
/*Page heading or title*/	
#title {width: 600px;
	margin:10px 0 5px 30px;
	}
#title h1 {
	font-size:21px;  
	margin:0; 
	font-family: Georgia, "Times New Roman", Times, serif; letter-spacing:1px;
	font-style: normal; 
	color:#982737; 
	font-weight:bold;
	}  	

/*this div holds the mission statement and photo of Gabriel on home page only*/
#mission {width:585px;
	padding:0px;
	margin:15px 30px 30px 30px;
	}
	
#mission p {font-family:Verdana, Arial, Helvetica, sans-serif;
		font-size:15px;
		color:#000000;
		line-height:140%;
	    padding:0;
		margin:5px 0;}
		
#mission .red {font-family:Verdana, Arial, Helvetica, sans-serif;
		font-size:15px;
		font-weight:bold;
		color:#982737;
	    padding:0;}
		
#mission .redright {font-family:Verdana, Arial, Helvetica, sans-serif;
		font-size:15px;
		font-weight:bold;
		text-align:right;
		color:#982737;
	    padding:0;}		
		
#mission img { float:left;
		margin:0 15px 7px 0; 
		}
		
/*this div holds the program info for the upcoming concert which includes: title, date-time, discriptive paragraph, location and program details*/		
.program { width:590px;
		padding:0px;
		margin:30px 0 0 30px;
		}
.program h1 {font-size:26px;  
		margin:0;
		padding:5px 0; 
		font-family: Georgia, "Times New Roman", Times, serif; letter-spacing:1px;
		font-style:italic; 
		color:#982737; 
		font-weight:bold;
		}
.program h3 {font-size:13px;
		 font-family: Verdana, Arial, Helvetica, sans-serif; 
		 line-height:160%; 
		 margin-top:5px; 
		 }
.program h4 { font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:13px;
	font-weight:bold;
	color:#000000;
	line-height:145%;
	padding:0;
	margin:5px 0;
	} 		 		
.program p {font-family:Verdana, Arial, Helvetica, sans-serif;
		font-size:12px;
		color:#000000;
		line-height:135%;
	    padding:0;
		margin:0 0 5px 0;
		}
.program h5 { font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:12px;
	color:#000000;
	line-height:135%;
	padding:0;
	margin:10px 0 0 0;	
	}	
			
/*this div holds photo and bio of soloist or conductor may be used repeatedly*/
.bio { width:590px;
		padding:0px;
		margin:30px 0 0 30px;
		}
.bio h4 { font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:12px;
	font-weight:bold;
	color:#000000;
	line-height:150%;
	padding:0;
	margin:5px 0 0 0;
	} 
	
.bio p {font-family:Verdana, Arial, Helvetica, sans-serif;
		font-size:12px;
		line-height:150%;
	    padding:0;
		margin:0;
		}
	
.bio img { float:left;
		margin:0 15px 5px 0; 
		}	
		
.aboutleft	{font-family:Verdana, Arial, Helvetica, sans-serif;
		font-size:12px;
	    padding:0;
		margin:0;
		}
.aboutleft img { float:left;
		margin:0 15px 5px 0; 
		}	
					
.aboutright	{font-family:Verdana, Arial, Helvetica, sans-serif;
		font-size:12px;
	    padding:0;
		margin:0;
		}
.aboutright img { float:right;
		margin:0 0 5px 10px; 
		}						
/*Use this for pages of text */	
.widetext {width:590px;
		margin:20px 0 0 30px;
		clear:both;
		}	
.widetext h3{
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:13px;
	font-weight:bold;
	color:#982737;
	line-height:145%;
	padding:0;
	margin:10px 0 0 0;
	} 	
		
.widetext h4 {
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:12px;
	font-weight:bold;
	color:#982737;
	line-height:145%;
	padding:0;
	margin:10px 0 0 0;
	} 	
.widetext p {font-family:Verdana, Arial, Helvetica, sans-serif;
		font-size:12px;
		line-height:150%;
	    padding:5px 0 ;
		margin:0;
		}	

#plaudits_widetext	{font-size: 12px; }		/* had to reduce font-size on plaudits widetext to match AP original */
		
/*This div is for a narrow column of text with an image on the right side*/			
.narrowtext {width:400px; 
		float:left; 
		margin:30px 0 30px 30px;
		}
.narrowtext h2{font-size:15px ;  
		font-family: Verdana, Arial, Helvetica, sans-serif;
		margin:10px 0 ; 
		padding:0;
		color:#982737; 
		}	
	
.narrowtext p {font-family:Verdana, Arial, Helvetica, sans-serif;
		font-size:12px;
		line-height:150%;
		padding:5px 0;
		margin:0;
	  	}
		
/*This div holds the image on the right side of the narrowtext div*/		
#narrow_right {float:right;
		width:175px;
		margin:30px 20px 30px 0;
		}
#narrow_right p { text-align:right; margin:0; padding:0; font-family:Arial, Helvetica, sans-serif; font-size:9px; }		
		
/*This is for the programs on the season concerts page*/		
.program_concert { width:400px;
		padding:0px;
		margin:20px 0 0 30px;
		}
.program_concert h1 {font-size:25px;  
		margin:0;
		padding:5px 0; 
		font-family: Georgia, "Times New Roman", Times, serif; letter-spacing:1px;
		font-style:italic; 
		color:#982737; 
		font-weight:bold;
		}
.program_concert h3 {font-size: 13px;
		 font-family: Verdana, Arial, Helvetica, sans-serif; 
		 line-height:160%; 
		 margin-top:5px; 
		 }
.program_concert h4 { font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:12px;
	color:#000000;
	line-height:145%;
	padding:10px 0;
	margin:5px 0;
	} 
.program_concert h5 { font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:11px;
	color:#000000;
	line-height:145%;
	padding:0;
	margin:5px 0 0 0;	
	}		 				 		
.program_concert p {font-family:Verdana, Arial, Helvetica, sans-serif;
		font-size:12px;
		color:#000000;
		line-height:140%;
	    padding:5px 0 ;
		margin:5px 0;
		}		
					
/*This is a definition list that is used for the multi media photo-buttons and descriptions*/
dl.feature {
	margin: 0 30px;
	padding: 5px;
	border-bottom: 1px dotted #ccc;}
/*This uses the pseudo-class :after to make sure the photo is cleared*/
dl.feature:after {
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
	}
dl.feature dt {
	margin: 0 ;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 140%;
	color:#982737;
	}
dl.feature dt img {
	float: left;
	margin: 5px 25px 0 0;
	border:none;
	}
dl.feature dd { margin-top:10px;
	margin-left: 100px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	line-height: 130%;
	color: #000;
	}
/*These are for two columns of text or list */
/*left column*/	
#double_list_l {width:290px;
	float:left;
	margin:10px 0 0 30px;
	}	
#double_list_l p {
	margin:0 10px 0 0;
	padding:0 0 10px 0;
	font-family: verdana;
	font-size:12px;
	line-height:140%;
	color: #000;
	}
/*right column*/	
#double_list_r {width:290px;
	float:right;
	margin:10px 20px 0 0 ;
	}	
#double_list_r p {
	margin:0 10px 0 0;
	padding:0 0 10px 0;
	font-family: verdana;
	font-size:12px;
	line-height:140%;
	color: #000;
	}
#cutenews {
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:9px;
	color:#000000;
	line-height:140%;
	padding:0;
	margin:5px 0;
	margin:15px 0 10px 0;
	text-align:center;		/* styled the cutenews logo div with text-align center to match prior site */
		}		

		
#right_side a:link {
	color: #982737; text-decoration: none;
	}
#right_side a:visited {
	color: #982737; text-decoration: none;
	}
#right_side a:active {
	color: #982737; text-decoration: none;
	}
#right_side a:hover {
	COLOR: #000; text-decoration: underline;
	}

/*footer for all pages that get one*/
#right_footer {width:590px; float:left; height:175px; margin:20px 0 20px 30px; padding:0 ;  }	

#right_footer p { text-align:right; margin:0; padding:0; font-family:Arial, Helvetica, sans-serif; font-size:9px; }

/* style to bold mailing address */
#address_bold		{font-weight: bold;}

/* id for list with no style and font size 12px */
#ul_plain 	{list-style-type: none; font-size: 12px;}

 
/* simulation of tables on membership and how_to_volunteer pages- align text boxes or buttons */
.left_edge		{position: relative;}		/*make the start of a tag the positioning reference*/
.from_left_edge_160px	{position: absolute; left: 160px;}
.from_left_edge_280px	{position: absolute; left: 280px;}
.from_left_edge_370px	{position: absolute; left: 370px;}

/* classes for left and right columns on same page more than once */
.two_column_l {width:290px; float:left; }
.two_column_r {width:290px; float:right; }
.two_column_l p	{margin: -2% 0;}
.two_column_r p	{margin: -2% 0;}

/* first 5 styles to match list and paypal images layout of AP site, with red list items smallcap and other text black and normal- last style to tighten vertical margins on support form*/
#center_paypal 	{text-align: center;}   /*center paypal button*/
#support_widetext li   {font-variant: small-caps; color: #982737;}   /*font-variant and color to match AP site*/
#float_paypal_left		{float: left;}		/*float paypal logo left on the line with button*/
#black_text_14	{color: #000; font-size: 14px;} 	/*list is red color but "click here" is black*/
#font_variant_normal 	{color: #000; font-variant: normal;} 	/*pay-pal descriptor text is normal font and black*/



#credit_footer {
	background-color: #611923; 
	}  

#credit_footer p {
	text-align:center;
	padding-top:10px;
	font-family: verdana;
	font-size:9px;
	line-height:16px;
	color: #d9bd8e;
	} 
#credit_footer a:link, a:visited {
	text-decoration:underline;
	color: #d9bd8e;
	}
		
	
	
/*This spacer div is necessary for left and right side to clear*/	
.spacer {
  margin:0px;padding:0px;height:0;clear:both;
}
.right {text-align:right;}
.red {color: #982737; font-weight:bold; }




/*IE Hacks*/ 
dl.feature {display: inline-block; }

/* hides from IE-mac \*/
*html dl.feature {height: 1%; }
dl.feature {display: block; }
/* End hide from IE-mac */