/* ----------------------------------------------
      Bellingham Cooperative School Website
      
       			TABLE OF CONTENTS
------------------------------------------------- 

1) Main Structure of Website

2) Navigation: Main Menu

3) Navigation: Other Links

4) Images and Photos

5) Text Specifications

6) Tables

7) Summer Page

8) Internet Explorer Workarounds   */


/* ---------------------------------------
	1) Main Sturcture of Website
------------------------------------------ */

body {						/* gives background on which the page sits */
	margin: 0;
	padding: 0;	
	background: url(BCSimages/bckgrnd1.jpg) left top repeat; /* sides */
	text-align: center;  /* fixes bug for IE 5 */
}

#container { 				/* the page */
	width: 800px;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
	background: url(BCSimages/contentBG.png) top right repeat-y; 
			/* creates bg color plus green line on right */
	text-align: left;  	 /* fixes bug for IE 5 */
}

#wrapper {					/* to make sidebar longer */
	background: url(BCSimages/greenSidebarBg.png) left top repeat-y;
	}

#banner {
	width: 800px;
	height: 150px;
	background: url(BCSimages/BCSbanner14.png) left top no-repeat;
}
	
#mainNav {
	width: 160px;
	margin-top: 0px;
	margin-bottom: 0px;
	float: left;
	background: #3c6;
}

#mainNav2 {				/* encloses nav menu to float-r */
	float: right;
	margin-top: 40px; /* distance down from banner */
}

#content {
	margin-left: 160px;
	margin-right: 0px;
}

/* FOOTER Specifications */

#footer {  /* do not set margin; prevents graphic from reading all the way across page */
	clear: both;
}

#footer p {
/* must have margin-top 0px to avoid break between footer and content (breaks graphic line on right) */
/* must have left margin; footer has no margin set so graphic will load without break on left */
/* margin-bottom: 0px avoids gap at bottom of page */	
	margin-top: 0px;
	margin-bottom: 0px;
	margin-left: 160px;
	font-size: 13px;
	font-weight: 100;
	font-family: "Times Roman", "Times New Roman", serif;
	color: #003300;
	text-align: center;
} 

#summerfooter p {   /* special footer for summer page, so it falls inside yellow border */
	font-size: 13px;
	font-weight: 100;
	font-family: "Times Roman", "Times New Roman", serif;
	color: #003300;
	text-align: center;
	margin-bottom: 0px;
} 

/* Horizontal Rules (hr.png): Always put inside #hr (for margin) 
---- or ---- on summer page, put inside .summerhr ------------------- */

#hr {
	margin: 20px 0px 20px 160px;
}

.summerhr {
	margin: 20px 0px 20px 0px;
}

.clear { 		/* A generic class for things that need to clear floated objects */
	clear: both;
}
 


/* ---------------------------------------------
	2) Navigation: Main Menu 
------------------------------------------------*/

ul.nav {
	list-style-type: none;
	padding: 0;
	margin: 0;
	width: 140px;
}

ul.nav a {
	display: block;  /* makes the <a> elements a uniform size */
	text-align: right;	
	width: 120px;		/* width of 'buttons' on menu */
	padding: 6px;
	margin-top: 1px;	/* space between 'buttons' */
}

#mainNav a:link {
	font-size: 13px;
	font-weight: bold;
	color:#0000CC;
	text-decoration: none;
	font-family : Arial, Helvetica, sans-serif;
}
 		
#mainNav a:active {
	font-size: 13px;
	font-weight: bold;
	color: #f06;
	text-decoration: none;
	font-family : Arial, Helvetica, sans-serif;
}
 		
#mainNav a:visited {
	font-size: 13px;
	font-weight: bold;
	color:#0000CC;
	text-decoration: none;
	font-family : Arial, Helvetica, sans-serif;
}
 		
#mainNav a:hover {
	font-size: 13px;
	font-weight: bold;
	color:#FFFF66;
	text-decoration: none;
	font-family : Arial, Helvetica, sans-serif;
}

/* ---------------------------------------
		For the "You Are Here" feature on the nav menu  */

body#home a#homeLink,
body#aboutus a#aboutusLink,
body#core a#coreLink,
body#classrooms a#classroomsLink,
body#other a#otherLink,
body#summer a#summerLink,
body#staff a#staffLink,
body#testimonials a#testimonialsLink,
body#admissions a#admissionsLink,
body#parent a#parentLink,
body#news a#newsLink,
body#contact a#contactLink  {
	background: #2db75b;
}


/* ---------------------------------------------
	3) Navigation: Other Links
------------------------------------------------*/


/* BOLD BLUE LINKS - turn purple when visited - UNDERLINED */
a:link { font-size: 13.5px; font-weight: bold; color:#0000CC; text-decoration: underline; font-family: Arial, Helvetica, sans-serif;
}
a:active { font-size: 13.5px; font-weight: bold; color:#FF0066; text-decoration: underline; font-family: Arial, Helvetica, sans-serif;
}
a:visited { font-size: 13.5px; font-weight: bold; color: #909; text-decoration: underline; font-family: Arial, Helvetica, sans-serif;
}
a:hover { font-size: 13.5px; font-weight: bold; color:#FF9900; text-decoration: underline; font-family: Arial, Helvetica, sans-serif;
}

/* BOLD BLUE LINKS - NO CHANGE when visited - UNDERLINED */
a.blue:link { font-size: 13.5px; font-weight: bold; color:#0000CC; text-decoration: underline; font-family: Arial, Helvetica, sans-serif;
}
a.blue:active { font-size: 13.5px; font-weight: bold; color:#FF0066; text-decoration: underline; font-family: Arial, Helvetica, sans-serif;
}
a.blue:visited { font-size: 13.5px; font-weight: bold; color: #0000CC; text-decoration: underline; font-family: Arial, Helvetica, sans-serif;
}
a.blue:hover { font-size: 13.5px; font-weight: bold; color:#FF9900; text-decoration: underline; font-family: Arial, Helvetica, sans-serif;
}

/* BOLD BLUE LINKS - CHANGE when visited - NO UNDERLINE  */
a.noline:link { font-size: 13.5px; font-weight: bold; color:#0000CC; text-decoration: none; font-family: Arial, Helvetica, sans-serif;
}
a.noline:active { font-size: 13.5px; font-weight: bold; color:#FF0066; text-decoration: none; font-family: Arial, Helvetica, sans-serif;
}
a.noline:visited { font-size: 13.5px; font-weight: bold; color: #0000CC; text-decoration: none; font-family: Arial, Helvetica, sans-serif;
}
a.noline:hover { font-size: 13.5px; font-weight: bold; color:#FF9900; text-decoration: none; font-family: Arial, Helvetica, sans-serif;
}

/* BOLD BLUE LINKS - NO CHANGE when visited - NO UNDERLINE  */
a.nolinechange:link { font-size: 13.5px; font-weight: bold; color:#0000CC; text-decoration: none; font-family: Arial, Helvetica, sans-serif;
}
a.nolinechange:active { font-size: 13.5px; font-weight: bold; color:#FF0066; text-decoration: none; font-family: Arial, Helvetica, sans-serif;
}
a.nolinechange:visited { font-size: 13.5px; font-weight: bold; color: #909; text-decoration: none; font-family: Arial, Helvetica, sans-serif;
}
a.nolinechange:hover { font-size: 13.5px; font-weight: bold; color:#FF9900; text-decoration: none; font-family: Arial, Helvetica, sans-serif;
}


/* Basic Blue Link - not bold - turns purple when visited - underlined */
a.basic:link { font-size: 13.5px; font-weight: normal; color:#0000CC; text-decoration: underline; font-family: Arial, Helvetica, sans-serif;
}
a.basic:active { font-size: 13.5px; font-weight: normal; color:#FF0066; text-decoration: underline; font-family: Arial, Helvetica, sans-serif;
}
a.basic:visited { font-size: 13.5px; font-weight: normal; color: purple; text-decoration: underline; font-family: Arial, Helvetica, sans-serif;
}
a.basic:hover { font-size: 13.5px; font-weight: normal; color:#FF9900; text-decoration: underline; font-family: Arial, Helvetica, sans-serif;
}

/* BOLD RED - Link to summer page at top of home page - no change when visited */
a.highlight:link { font-size: 13.5px; font-weight: bold; color:#FF0066; text-decoration: underline; font-family: Arial, Helvetica, sans-serif;
}
a.highlight:active { font-size: 13.5px; font-weight: bold; color:red; text-decoration: underline; font-family: Arial, Helvetica, sans-serif;
} 
a.highlight:visited { font-size: 13.5px; font-weight: bold; color:#FF0066; text-decoration: underline; font-family: Arial, Helvetica, sans-serif;
}
a.highlight:hover { font-size: 13.5px; font-weight: bold; color:#FF9900; text-decoration: underline; font-family: Arial, Helvetica, sans-serif;
}

/* P.NOTE Link - small size italic - not bold - no change when visited */
a.note:link { font-size: 12px; font-weight: normal; font-style: italic; color:#0000CC; text-decoration: underline; font-family: Arial, Helvetica, sans-serif;
}
a.note:active { font-size: 12px; font-weight: normal; font-style: italic; color:#FF0066; text-decoration: underline; font-family: Arial, Helvetica, sans-serif;
}
a.note:visited { font-size: 12px; font-weight: normal; font-style: italic; color: #0000CC; text-decoration: underline; font-family: Arial, Helvetica, sans-serif;
}
a.note:hover { font-size: 12px; font-weight: normal; font-style: italic; color:#FF9900; text-decoration: underline; font-family: Arial, Helvetica, sans-serif;
}

/* Links on SUMMER page */
.summer a:link { font-size: 13.5px; font-weight: bold; color: blue; text-decoration: underline; font-family: Arial, Helvetica, sans-serif;
}
.summer a:active { font-size: 13.5px; font-weight: bold; color:red; text-decoration: underline; font-family: Arial, Helvetica, sans-serif;
}
.summer a:visited { font-size: 13.5px; font-weight: bold; color: purple; text-decoration: underline; font-family: Arial, Helvetica, sans-serif;
}
.summer a:hover { font-size: 13.5px; font-weight: bold; color:#FF9900; text-decoration: underline; font-family: Arial, Helvetica, sans-serif;
}

/* GREEN Article Links on Parent Resources Page */
a.article:link { font-size: 16px; font-style: italic; font-weight: bold; color: #063; margin: 5px 20px 5px 20px; text-decoration: underline; font-family: Arial, Helvetica, sans-serif;
}
a.article:active { font-size: 16px; font-style: italic; font-weight: bold; color:#063; margin: 5px 20px 5px 20px; text-decoration: underline; font-family: Arial, Helvetica, sans-serif;
}
a.article:visited { font-size: 16px; font-style: italic; font-weight: bold; color: #063; margin: 5px 20px 5px 20px; text-decoration: underline; font-family: Arial, Helvetica, sans-serif;
}
a.article:hover { font-size: 16px; font-style: italic; font-weight: bold; color:#FF9900; margin: 5px 20px 5px 20px; text-decoration: underline; font-family: Arial, Helvetica, sans-serif;
}

/* PULLQUOTE CITATIONS - Basic Blue Link - smaller, not bold - no change when visited - underlined */
a.cite:link { font-size: 15px; font-weight: normal; color:#0000CC; text-decoration: underline; font-family: "Times Roman", "Times New Roman", serif;;
}
a.cite:active { font-size: 15px; font-weight: normal; color:#FF0066; text-decoration: underline; font-family: "Times Roman", "Times New Roman", serif;;
}
a.cite:visited { font-size: 15px; font-weight: normal; color: #00C; text-decoration: underline; font-family: "Times Roman", "Times New Roman", serif;;
}
a.cite:hover { font-size: 15px; font-weight: normal; color:#FF9900; text-decoration: underline; font-family: "Times Roman", "Times New Roman", serif;;
}

/* SMALL BLUE LINK - turn purple when visited - UNDERLINED - used in BCS Buzz table */
a.small:link { font-size: 12px; font-weight: normal; color:#0000CC; text-decoration: underline; font-family: Arial, Helvetica, sans-serif;
}
a.small:active { font-size: 12px; font-weight: normal; color:#FF0066; text-decoration: underline; font-family: Arial, Helvetica, sans-serif;
}
a.small:visited { font-size: 12px; font-weight: normal; color: #909; text-decoration: underline; font-family: Arial, Helvetica, sans-serif;
}
a.small:hover { font-size: 12px; font-weight: normal; color:#FF9900; text-decoration: underline; font-family: Arial, Helvetica, sans-serif;
}

/* 'Back to top' link */
p.backtotop {
	font-size: 13.5px;
	text-align: right;
}

/* ---------------------------------------------
	4) Images and Photos
------------------------------------------------*/


.imgR {
	float: right;
	margin: 0 20px 0 20px;
}

.imgRan {			/* imageR that is also an anchor tag */
	float: right;
	margin: 0 20px 0 20px;
	border: none;
	cursor: pointer;
}

.imgL {
	float: left;
	margin: 0 20px 0 20px;
}

.photoR {
	float: right;
	border: 1px solid black;
	vertical-align: text-top;
	margin: 0 20px 0 20px;
}

a.img {
	border: none;
}

.photoL {
	float: left;
	border: 1px solid black;
	vertical-align: text-top;
	margin: 0 20px 0 20px;
}

.photoLclear {
	float: left;
	border: 1px solid black;
	vertical-align: text-top;
	margin: 0 20px 40px 20px;
}
.photo {
	border: 1px solid black;
	margin: 0;
}


/* ---------------------------------------------
	5) Text Specifications
------------------------------------------------*/

/* Header notes: h2=large header, h3=usual header, h4=staff names */
	
	h1,h2,h3,h4,h5,h6 { font-family: Arial, Helvetica, sans-serif; }
	h1,h2 { color: #FF0066; margin: 20px; }  /* red */
	h3,h4 { color: #0000CC; margin: 30px 20px 15px 20px; } /* blue */
	h1 { font-size: 24.5px; }
	h2 { font-size: 22px; }
	h3 { font-size: 19px; }
	h4 { font-size: 16px; }
	h5 { font-size: 16px; color: #033; margin: 10px 20px 5px 20px; } /* green */
	h6 { font-size: 13.5px; font-style: italic; color: #063; margin: 0px 20px 5px 20px; }
	
	h1, h2, h3.top {margin: 10px 20px 15px 20px; }
	
/* are these .subhead's necessary? */
	h1.subhead { margin-bottom: 5px; }
	h2.subhead { margin-bottom: 5px; }
	h3.subhead { margin: 5px; color: #FF0066; }
	h3.subheadblue { margin: 5px; color: #0000CC; }
	
	h4.staff {margin: 0px; color: #0000CC; }
	h4.whatwillbe { color: #f06; margin: 20px; }
	h4.news { color: #c09; margin-bottom: 0px; }
	h5.booknote {font-size: 16px; font-style: italic; color: #f06; margin: 10px 20px 5px 20px; }

h3.red {			/* RED */
	color: #f06;
	margin: 20px 20px 10px 20px;
}

h3.resources {
	font-size: 19px;
	background-color: #3c6;
	color: #ffc;
	line-height: 28px;
	margin-top: 40px
}

h5.booknote {
	font-size: 16px;
	font-style: italic;
	color: #063;
	margin: 10px 20px 5px 20px;
}

h5#title {
	font-size: 20px;
}

h3#urgentnews {
	font-size: 16px;	
	font-style: oblique;
	color: #FF0066;
	margin-top: 0px;
}

/* Paragraph */
p { 							/* general paragraph specs */
	font-family: Arial, Helvetica, sans-serif;
	font-size: 15px;
	margin: 20px 20px 20px 20px;
	padding: 0;
}

p.center {
	text-align: center;
}

p.small {
	font-size: 12px;
}	

p.top {
	margin-top: 8px;
}
	
#parent #content p {
	margin: 5px 20px 30px 20px;
}

#parent #content p.top {
	margin: 5px 20px 20px 20px;
}

p.note {							/* for footnotes; SEE ALSO a.note for links within notes */
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-style: italic;
	margin: 20px;
	padding: 0;
}
		
ul { 							/* bulletted list specs */
	font-family: Arial, Helvetica, sans-serif;
	font-size: 15px;
	list-style-type: square;
}
	
ul.large { 							/* 'Levels of Giving' list on Capital Campaign page */
	font-family: Arial, Helvetica, sans-serif;
	font-size: 17px;
	margin: 10px 10px 20px 0px;
	list-style-type: square;
	list-style-type: none;
	line-height: 25px;
}	

p.quote { 					/* blockquote text */
	font-size: 13.5px;
}
p.quotename { 				/* blockquote author name */
	font-size: 13.5px;
	font-weight: bold;
	text-indent: 25px;
	text-align: right;
}

p.nondiscrim {			/* Non-discrimination statement */
	font-size: 12px;
	font-style: italic;
}
	
p.activities {
	font-size: 15px;
	font-weight: bold;
	color: purple;
}
	
ul.space li {
	margin-bottom: 3px;
}	

li.nobullet {
	list-style-type: none;
}	


/* ---------------------------------------------
	6) Tables
------------------------------------------------*/



table.clear {
	clear: both;
	margin: 30px 20px 20px 20px;
}

table.pullquote { 			/* for red borders above and below quotations */
	border-top: 10px #FF0066 solid;
	border-bottom: 10px #FF0066 solid;
	width: 50%;
	float: right;
	margin-right: 10px;
	margin-left: 20px;
	margin-top: 20px;
	margin-bottom: 20px;
}

table.pullquoteL { 			/* for red borders above and below quotations */
	border-top: 10px #FF0066 solid;
	border-bottom: 10px #FF0066 solid;
	width: 45%;
	float: left;
	margin-right: 20px;
	margin-left: 20px;
	margin-top: 0px;
	margin-bottom: 10px;
}

table.pullquoteR { 			/* for red borders above and below quotations */
	border-top: 10px #FF0066 solid;
	border-bottom: 10px #FF0066 solid;
	width: 45%;
	float: right;
	margin-right: 10px;
	margin-left: 20px;
	margin-top: 10px;
	margin-bottom: 10px;
}

table.campinfo {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 17px;
}

table#stafftable {
	margin-left: 8px;
	margin-right: 7px;
}

table.news {
	margin: 20px;
	width: 75%;
}

table.pressrelease {
	margin: 20px;
	background-color: white;
	font-family:  Arial, Helvetica, sans-serif;
	font-size: 16px;
	border: solid gray 2px;
	
}

th.buzz {			/* RED */
	font-size: 19px;	
	color: #f06;
	padding: 5px;
	}

td.bcsbuzz	{
	padding: 10px;
	font-size: 13px;
	font-family: Arial, Helvatica, sans serif;
	}

td.center {
	text-align: center;
	}
	
td.empty {
	text-align: center;
	font-size: 8px;
	}

.news td {
	text-align: center;
	}

td.quotetext { 			/* pullquotes */
	font-size: 15px;	
	font-family: "Times Roman", "Times New Roman", serif;
	}	

h3.keystats {
	margin-top: 0px;
	}
td.keystats {
	font-size: 11px;
	font-family: Arial, Helvetica, sans-serif;
	color: #006;
	padding: 5px 0 5px 20px;
	}

td.staffroles { 					/* what staffperson's role is */
	font-size: 16px; 	
	color: #000099; 
	font-style: italic;
	}

td.staffbio { 					/* bio info for staff */
	font-size: 13.5px;	
	font-family: Arial, Helvetica, sans-serif;
	}

td.staffbio p{ 					/* bio info for staff */
	font-size: 13.5px;	
	font-family: Arial, Helvetica, sans-serif;
	margin: 0px 0px 10px 0px;
	}
	
td.staffbio img.photoL { 	
	margin: 0px 20px 5px 0px;
}

table.parent td {
	padding: 3px;
	background-color: #fc9;
	text-align: center;
	width: 25%;
	border-top: solid 5px #ffe5cc;
	border-right: solid 5px #ffd8b2;
	border-bottom: solid 5px #ffb266;
	border-left: solid 5px #ffbf7f;
}

table.parent td.empty {
	background-color: #ffc;
	border-color: #ffc;
	}

/*----- Summer Calendar Table -----*/
		
table.calendar  {
	border: yellow solid 8px;
	font-size: 14pt;
	}	
		
td.red  {
	font-size: 14pt;
	color: #FF0066;
	}
td.pink  {
	font-size: 14pt;
	color: #FF0099;
}
	
td.green  {
	font-size: 14pt;
	color: #009933;
}
td.blue  {
	font-size: 14pt;
	color: #0033FF;
}
td.orange  {
	font-size: 14pt;
	color: #ff6633;
}
	
td.calendarheader {
	font-size: 18pt;
	color: #0033FF;
	text-align: center;
}



/* ---------------------------------------------
	7) Summer Page
------------------------------------------------*/

/* CHECK WHETHER ALL THESE STYLES ARE NEEDED !! */
	
#summer #content {	/* yellow border around Summer page */
	border: 10px solid yellow;
	padding-right: 2px;
	margin-right: 2px;
}

#summer .summerpage p {  /* so paragraphs are close to headers */
	margin: 5px 20px 30px 20px;
}
	
/*----- RED -----*/

.summerpage h1.plus { 
	font-size: 29px;
	color: #FF0066;
	font-family: "Comic Sans", Arial, Helvetica, sans-serif;
	text-align: center;
	margin-top: 0;
}
		
.summerpage h1 {
	font-size: 26px;
	color: #FF0066;
	font-family: "Comic Sans", Arial, Helvetica, sans-serif;
}

.summerpage h2 { 
	font-size: 22px;
	color: #FF0066;
	margin-bottom: 0px;
}
		
/*----- BLUE -----*/

.summerpage h2.blue {
	font-size: 22px;
	color: #0033FF;
	margin-bottom: 0px;
}
		
.summerpage h3 {
	font-size: 19px;
	text-align: center;
	color: #0033FF;
	margin-top: 5px;
	margin-bottom: 5px;
}

.summerpage h4.blue {
	font-size: 16px;
	color: #0033FF;
	margin-bottom: 0px;
	margin-top: 0px;
	text-align: center;
}
/*----- PURPLE -----*/

.summerpage h4 {
	font-size: 16px;
	color: purple;
	margin-bottom: 0px;
	margin-top: 0px;
}
		
/*----- PINK -----*/

.summerpage h2.pink {
	font-size: 22px;
	color: #FF0099;
	margin-bottom: 0px;
}

.summerpage h4.pink {
 	font-size: 16px;
	color: #FF0099;
	margin-bottom: 0px;
	margin-top: 0px;

}

.summerpage h4.red {
	font-size: 16px;
	color: #FF0066;
	margin-bottom: 0px;
	margin-top: 0px;

}
		
/*----- GREEN -----*/

.summerpage h2.green {
	font-size: 22px;
	color: #009933;
	margin-bottom: 0px;
}

.summerpage h4.green {
	font-size: 16px;
	color: #009933;
	margin-bottom: 0px;
	margin-top: 0px;
}

		
/*----- ORANGE -----*/

.summerpage h2.orange {
	font-size: 22px;
	color: #FF6633;
	margin-bottom: 0px;
}

.summerpage h4.orange {
	font-size: 16px;
	color: #FF6633;
	margin-bottom: 0px;
	margin-top: 0px;
}


/* ---------------------------------------------
	8) DIVs
------------------------------------------------*/

div.fundraiser {     /* use this order, it's important for some reason! */
	background: white;
	border: 3px solid pink;
	width: 215px;
	float: right;
	margin: 20px;
	}
	
div.fundraiser p {
	font-size: 12px;
	font-family: Arial, sans-serif;
	margin: 10px;
	color: navy;
	}
	
div.topimage {
	margin: 10px 0px 5px 0px;
	}
	
div.bottomimage  {
	margin: 5px 0px 10px 0px;
	}

div#buzz { 
	background: #90ee90;
	border: 3px solid #33cc33;
	width: 200px;
	float: right;
	margin: 20px
		}