@charset "utf-8";
/* ********************** COLORS********************** 
	TEAL: 	#00B5AD
DK TEAL: 	#009286

GREEN/TEAL: #08DA8F

	GREEN: 	#70BF54
DK GREEN: 	#408A46

	YELLOW: #FFF684
LT YELLOW: 	#FFFFCC

	ORANGE: #DD5827
/* ------------------------- Reset Styles  -------------------------*/
/*ol, ul, li,*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	font-family: inherit;
	vertical-align: baseline;
}
ol, ul, li {
	margin: 0;
	padding: 0;
}
/* remember to define focus styles! */
:focus {
	outline: 0;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: separate;
	border-spacing: 0;
}
caption, th, td {
	text-align: left;
	font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: "";
}
blockquote, q {
	quotes: "" "";
}
/* ------------------------- General styles ------------------------- */
body {
	width:100%;
	min-width:600px;		/* Minimum width of layout - remove line if not required */
					/* The min-width property does not work in old versions of Internet Explorer */
	font-size:90%;
	color: black;
	background: #ffffcc url(../images/pg-bg.jpg) repeat-x;
	font: normal 100%  "Trebuchet MS", Arial, Helvetica, sans-serif;
}
h1 {
	font-size: 150%;
	font-weight: bold;
	border-bottom: none;
}
h2 {
	font-size: 140%;
	font-weight: bold;
	border-bottom: none;
	margin: .3em;
}
h3 {
	font-size: 130%;
	font-weight: bold;
	border-bottom: none;
	margin: .3em 1em;
}
h4 {
	font-size: 120%;
	font-weight: bold;
	margin: .3em 1.5em;
}
h5 {
	font-size: 110%;
	font-weight: bold;
	margin: .3em 2em;
}
h6 {
	font-size: 110%;
	font-weight: normal;
	margin: .3em 2.5em;
}
h3 + p  {
	margin-left: 1.5em;	
}
h4 + p {
	margin-left: 2em;
}
p {
	margin:.4em .2em .8em .3em;
	padding:0;
}
strong {
	font-weight:bold;	
}
dt {
	font-weight: bold;	
	float: left;
	padding-right: .4em;
}
dd {
	padding-bottom: .5em;	
}

a:link {
	/*color:blue;*/
	color: #008a46;
	text-decoration:underline;
}
a:visited {
	/*color:purple;*/
	color: #666;
	text-decoration:underline;
}
a:hover {
	/*color:red;*/
	color: #DD5827;
	text-decoration: underline;
}
a:active,a:focus {
	outline: none;
}

/* ------------------------- ID selectors styles ------------------------- */
#skip {						/* Hide accessibility links from view at top of all pages*/
	position: absolute;	
	left: -100000px;
	top: auto;	
	height: .1em;
	width: .1em;
}
#logo {
	margin-top:.1em;
	left: 1.3em;
	position: absolute;
	top: 0;
	z-index: 1;
/*	background: url(../images/logo_03.jpg) no-repeat;*/
	background: url(../images/ccc-png24.png) no-repeat;
/*	border: .1em solid black;
	background:#408a46;*/
	height: 90px;
	width: 187px;
}
#content {			/* content container */
	border-top: 7px solid #08da8f;
	position: relative;
	clear:both;
	background:#fff;
}
#content img.content {
	border: solid .1em #009286;
	margin: 5px 10px;	
}
#member img { 		/* Home page - Member spotlight */
	border: none;	
}
#member p {			/* Home page - Member spotlight */
	border-left: none;
	font-weight: normal;
}
#photos-inline {			/* Beyond the Blackboard styles for small photos... used ID in order to override .col1 ul{ margin-left: 2em;}... */
	text-align: center;	
	white-space: nowrap;
	margin: .3em;
}
#photos-inline li {
	display: inline;
	list-style: none;
}
#grant-winners {
/*	margin: 0 auto;	*/
	text-align: center;
	padding: 0 3em;
}
#grant-winners img {
/*	float: left;*/
	border: 1px solid #000;
/*	margin-left: 1em;*/
}
#grant-winners p {
	border: 1px solid #000;
	padding: .5em;
/*	margin: 0 1em;*/
	width: 200px;
	float: left;
}
/*#grant-winners br {
	clear: both;	
}*/
/* ---------------------------------- Header & Menu styles ---------------------------------- */
#header {
/*	clear:both;
	float:left;*/
	width:100%;
	border-bottom: 3px solid #fff684;
}
#header p {
	font-size: 90%;
	text-align: right;
	color: #408a46;
	margin: .1em 1em .1em 0;
}
#header ul {
/*	clear:left;
	float:left;*/
	width:100%;
/*	list-style: none;*/
	margin: 0;
	padding:0;
}
#header ul li {
	display:inline;
	list-style:none;
	margin:0;
	padding: 0 2%;
}
#header ul li a {
	margin: 0 0 0 .1em;
	padding: .2em .5em;
	position: relative;
	left: 13em;
	-moz-border-radius: 1ex;
	-webkit-border-radius: 1ex;	
	background: #00B5AD;
	border: .1em solid #00B5AD;
	line-height: 1.3em;	
	text-align: center;	
	color: #fff684;
	font-weight: bold;
	text-decoration: none;
}

#header ul li a:hover {
	-moz-border-radius:1ex;
	-webkit-border-radius:1ex;	
	background: #00B5AD;
	border: .1em solid #fff684;
	text-decoration: none;
}
#header ul li a.active,
#header ul li a.active:hover {
	background: #fff684;
	color: #408a46;
	-moz-border-radius:1ex;
	-webkit-border-radius:1ex;	
	border: .1em solid #fff684;
}
#header p a {
	color: #408a46;
	font-weight: bold;
}
#header p a:link {
	text-decoration: none;
}	
#header p a:visited {
	text-decoration: none;
}	
#header p a:hover {
	text-decoration: underline;
	background: none;
}
#menu-container {
	background: #00b5ad;
	padding: .8em;
/*	position: relative;*/
}
/* ---------------------------------- Footer Sytles ------------------------------- */
#footer {	
	clear:both;
	float:left;
	width:100%;
	border-top: 7px solid #08da8f;
	background: #00b5ad;
	color: #fff684;
	font-size: 80%;
	line-height: 160%;
	text-align: center;
	vertical-align: middle
	padding: .1em;
	/*width: 100%;  - don't use, causes right/left scrollbar   */
}
#footer ul {
	border-top: 3px solid #fff684;	
}
#footer p {
/*	padding:10px;*/
	margin:0;
	color: #000;
}
#footer a {
	background: none;
	text-decoration: none;
	color: #fff684;
}
/*#footer a:link,a:visited {	
	
		
}*/
#footer a:hover {
	text-decoration: underline;
	color: #ffffcc;
}
#footer li {
	display: inline;
	padding: .3em;
	margin: 0;
	list-style: none;
}

/* ---------------------------------- Page Columns --------------------------------- */
.colmask {				
	position:relative;		/* This fixes the IE7 overflow hidden bug */
	clear:both;
	float:left;
	width:100%;				/* width of whole page */
	overflow:hidden;		/* This chops off any overhanging divs */
	background: #fff url(../images/content-bg.jpg) repeat-x;/* right column background color */
}
/* common column settings */
.colright,
.colmid,
.colleft {
	float:left;
	width:100%;
	position:relative;
}
.col1,
.col2,
.col3 {
	float:left;
	position:relative;
	padding:0 0 1em 0;
	overflow:hidden;
}
/* Full page settings */
.fullpage {
	position: relative;
	overflow:hidden;
}
.fullpage .col1 {
	width:96%;			/* page width minus left and right padding */
	left:2%;			/* page left padding */
}
/* --- Page Column Sytles --- */
.col1 ul {
	margin-left: 2em;
}
.col1 h1,h2,h3,h4,h5 {
	color: #009286;	
	border-bottom: none;
}
.col1 h6 {
	color: #000;	
}
.sidecol {				/* Page side column styles  */
	font-size: 88%;	
}
.sidecol ul {			/* sidecol unorder lists  */
	list-style: square outside;
	margin-left: .8em;
}
.sidecol ul ul {			/* sidecol unorder lists  */
	list-style: circle outside;
	margin-left: .8em;
}
.sidecol h2 {			/* sidecol heaers  */
	color:#dd5827;
	border-bottom: solid 1px #dd5827;
	margin-top: 1.3em;
	line-height: 115%;
}
.sidecol ol {			/* ordered lists in side column: officers (about.htm) & events (index.htm) */
	list-style: none;
}
.sidecol ol li {		/* officers & events list items  */
	margin: 0;
	padding:0;
	width: 100%;
	border-bottom: dotted .1em #eeab8d;
}
.sidecol span {			/* makes font smaller in side column, used on home page (events & education grant link)  */ 
	font-size: 80%;	
	font-weight: normal;
}
.sidecol li {			/* all side column list items */
	margin-left: 1em;
	padding: .2em 0;
}
.sidecol img {			/* side column page images */
	border: solid .1em #009286;
	margin:10px 0 5px;
}
.sidecol a:link {
	color: #dd5827;
/*	text-decoration:underline;*/
}
.sidecol a:visited {
	color: #666;	
/*	text-decoration:underline;*/
}
.sidecol a:hover {
	color: #dd5827;	
/*	text-decoration:none;*/
}
	
.colmask {				/* column container */
	position:relative;		/* This fixes the IE7 overflow hidden bug */
	clear:both;
	float:left;
	left: 1%;
	width:98%;				/* width of whole page */
	overflow:hidden;		/* This chops off any overhanging divs */
	border-left: .1em solid #999;
	border-right: .1em solid #999;
}
.colright,				/* common column settings */
.colmid,
.colleft {
	float:left;
	width:100%;				/* width of page */
	position:relative;
}
.col1,
.col2,
.col3 {
	float:left;
	position:relative;
	padding:2em 0 1em 0;	/* no left and right padding on columns, we just make them narrower instead 
							only padding top and bottom is included here, make it whatever value you need */
	overflow:hidden;
}
/* 3 Column settings */
.threecol .colmid {
	right:18%;			/* width of the right column */		
}
.threecol .colleft {
	right:62%;			/* width of the middle column */
}
.threecol .col1 {
	width:58%;			/* width of center column content (column width minus padding on either side) */
	left:100%;			/* 100% plus left padding of center column */
}
.threecol .col2 {
	width:16%;			/* Width of left column content (column width minus padding on either side) */
	left:24%;			/* width of (right column) plus (center column left and right padding) plus (left column left padding) */
}
.threecol .col3 {
	width:19%;			/* Width of right column content (column width minus padding on either side) */
	left:86%;			/* Please make note of the brackets here: */
							/*(100% - left column width) */
							/* plus (center column left and right padding) */
							/* plus (left column left and right padding) */
							/* plus (right column left padding) */
	}
/* ------------------------------ On This Page -  Page Table of Contents ------------------------------ */
.pgtoc {
	border-top: solid .1em #009286;
	border-bottom: solid .1em #009286;
	font-size: 90%;
	margin: .5em 0;
	color: #009286;
}
.pgtoc ul {
	margin:.6em;
}
.pgtoc ul li {
	display: inline;
	list-style: none;
}
.onthispg {
	color: black;
	font-weight: bold;
	font-size: 85%;
	margin: .5em 1em 0 0;
	float: left;
	width: 8%;
	text-align: right;
	line-height: 95%;
}
.top {				/* ---------- top of page styles ---------- */
	font-size: 80%;	
	margin: 1em 0 2em 0;
}
.top a {
	border: .1em solid #dd5827;
	-moz-border-radius:1ex;
	-webkit-border-radius:1ex;	
	padding:.2em .5em .2em 1.2em;
	text-decoration:none;
}
.top a:link {
	color:#dd5827;
	background: #ffffcc url(../images/organge-up-arrow.png) no-repeat 3% 50%;
}
.top a:visited {
	color:#dd5827;
	background: #ffffcc url(../images/organge-up-arrow.png) no-repeat 3% 50%;
}
.top a:hover {
	color:#009286;
	background: #ffffcc url(../images/teal-up-arrow.png) no-repeat 3% 50%;
	border-color: #009286;
}

/* ------------------ Home page Styles ------------------ */
.photos {
	text-align: center;	
	margin: 1em 0 .5em 0;
	padding: 2em 0 .5em 0;
/*	margin-bottom: 0;
	padding-bottom: 0;*/
/*min-width: 800px;*/
	white-space: nowrap;
}
.photos img {
	padding: 0;
	maring:  0 .1em 0 0;
	border: 1px solid white;
	height: 155px;
	width: 199px;
}

.grant {			/* ---------- education grants on home page ---------- */
	background: url(../images/grant-icon.png) no-repeat 8em 50%;	
	padding: .4em 0 ;
}
.grantbtn {				
	line-height: 100%;
	margin: .5em 0 .5em 1em;
	list-style: none;
	border-bottom: .1em dotted #dd5827;
}
.grantbtn a {
	font-size: 120%;	
	line-height: 115%;
	text-decoration:none;
	font-weight: bold;
	padding-left:1.7em;
	padding-bottom: .5em;
	display: block;
}
.grantbtn a:link {
	color:#666;
	background: #fff url(../images/view-bullet.png) no-repeat 0% 50%;
}
.grantbtn a:visited {
	color:#666;
	background: #fff url(../images/view-bullet.png) no-repeat 0% 50%;;
}
.grantbtn a:hover {
	color:#dd5827;
	background: #fff url(../images/view-o-bullet.png) no-repeat 0% 50%;
	text-decoration: none;
}
.spotlighbtn {			/* ---------- member spotlight on home page ---------- */			
	line-height: 100%;
	margin: .5em 0 .5em 1em;
	list-style: none;
	border-top: .1em dotted #dd5827;
}
.spotlighbtn a {
	font-size: 96%;	
/*	line-height:95%;*/
	text-decoration:none;
	font-weight: bold;
	padding-left:1.8em;
	padding-top: .5em;
	display: block;
}
.spotlighbtn a:link {
	color:#666;
	background: #fff url(../images/view-bullet.png) no-repeat 0% 50%;
}
.spotlighbtn a:visited {
	color:#666;
	background: #fff url(../images/view-bullet.png) no-repeat 0% 50%;;
}
.spotlighbtn a:hover {
	color:#dd5827;
	background: #fff url(../images/view-o-bullet.png) no-repeat 0% 50%;
	text-decoration: none;
}
.cal {					/* home page calendar header */
	background: url(../images/cal-icon.png) no-repeat 110px 0;	
	padding: .4em 0 ;
}
.arrow {				/* ---------- arrow image---------- */
	font-size: 100%;	
	line-height: 140%;
	/*margin: .5em 0 .7em .2em;*/
	list-style: none;
	margin: 0px;
	padding:0px;
	border-bottom: .1em dotted #dd5827;
}
.arrow a {
/*	padding:.2em .5em .5em 2em;*/
	text-decoration:underline;
	font-weight: bold;
	padding-left:1.6em;
	display: block;
}
.arrow a:link {
	color:#666;
	background: #fff url(../images/view-bullet.png) no-repeat 0% 50%;
}
.arrow a:visited {
	color:#666;
	background: #fff url(../images/view-bullet.png) no-repeat 0% 50%;;
}
.arrow a:hover {
	color:#dd5827;
	background: #fff url(../images/view-o-bullet.png) no-repeat 0% 50%;
	text-decoration: none;
}
.addto {				/* ---------- add to calendar image  ---------- */
	font-size: 100%;	
	line-height: 140%;
	/*margin: 1em 0 .5em .2em;*/
	border-bottom: .1em dotted #dd5827;
}
.addto a {
	/*padding:.2em .5em .5em 2em;*/
	text-decoration:underline;
	font-weight: bold;
	padding-left:1.6em;
	display: block;
}
.addto a:link {
/*	background: #ffffcc;*/
	/*color:#dd5827;*/
	color:#666;
	background: #fff url(../images/add-bullet.png) no-repeat 0% 50%;
}
.addto a:visited {
/*	background: #ffffcc;*/
	color:#666;
	background: #fff url(../images/add-bullet.png) no-repeat 0% 50%;;
}
.addto a:hover {
/*	background: #dd5827;*/
	color:#dd5827;
	background: #fff url(../images/add-o-bullet.png) no-repeat 0% 50%;
	text-decoration: none;
}
.bigbold-smaltext p {		/* Events on home page, Members on about page, contacts on projects > after school  */
	border-left: solid .8em #dd5827;	
	padding: .1em .5em;
	font-weight: bold;
/*	line-height: 105%;*/
	margin: .5em 0;
}
.nobul li {		/* home page lists in sidecol */
	list-style: none;	
	margin: 0px;
	padding:0px;
}
.center {
	text-align: center;	
}
.right {
	text-align: right;
	display:inline;
	/*width: 50%;*/
	padding-left: 25%;
}
.left {
	text-align: left;
	display:inline;
	/*width: 50%;*/
	padding-right: 25%;
}
.quicklinks {
	color:#dd5827;
	font-weight:bold;
}
.quicklinks a:hover {
	text-decoration: none;	
}
a:link.nounderline,
a:visited.nounderline {
	text-decoration: none;	
	margin: 0px;
	padding: 0px;
}
.nomargin {
	margin: 0px;	
}
.enlarge {			/* Link for under photo to enlarge */
	display: block;
	margin: 0px;
	padding: 0px;
}
.filex {				/* file extension and size */
	font-size: 75%;
	color: #666;
}
.member {					/* members list (roster) */
	clear: both;
	border-top: .1em dotted #666;
	width: 90%;
	padding-left: 2em;		
}
.member h2 {
	margin-bottom: 0;
}
.member p {
	margin-top: 0;	
	margin-left: 1em;
}
/*.subhead {
	background: #efefef;	
}*/
.xlink {			/* external link ---image & padding/margin? */
		
}
.img {
	margin: .3em;
	border:0.1em solid #009286;
}
.box {
	border: .1em solid #999;
	padding: .5em 1em .5em .1em;
	margin: .5em 1em .5em .1em;
}
/*---------------------------------------------- Forms ---------------------------------------------- */
fieldset {
	border: .1em solid #999;
	-moz-border-radius:1ex;
	-webkit-border-radius:1ex;	
	padding: .5em;
}
/*input, textarea, select {
	padding: .1em;
	font-size: 1em;
	color: #666666;
	background: #F5F5F5;
	border: 1px solid #ccc;
	float: left;
	display: block;
	margin: .2em 0 .5em 0;
}*/
legend {
	padding: 0 .5em;
/*	maring: 1em;*/
	font-weight:bold;
	font-size: 110%;
	color: #666;
}
.frmcontent {
	padding: .1em;
	font-size: 1em;
	color: #666666;
	background: #F5F5F5;
	border: 1px solid #ccc;
	float: left;
	display: block;
	margin: .2em 0 .5em 0;
}
.frmcontentradio {
	padding: .1em;
	font-size: 1em;
/*	color: #666666;
	background: #F5F5F5;
	border: 1px solid #ccc;*/
	float: left;
	display: block;
	margin: .2em 0 .5em 0;
}
.frmlabel {
	display: block;
	float: left;
	clear: left;
	margin: .2em .3em .5em 0;
	width: 40%;
	line-height: 120%;
	text-align: right;
}

.required {
	font-weight: bold;
/*	color: #cc0000;*/
}

input:focus, textarea:focus, select:focus {
	border: 1px solid #999;
	background-color: #FFFFFF;
}
/*input.button {
	cursor: pointer;
	border: none;
	font-weight: bold;
	background: url(images/submit.jpg) no-repeat left top;
	width: 90px;
	height: 28px;
}*/

span.required{
	font-size: 90% !important;
	color: red !important;
}
.errormsg {
	display: block;
	width: 90%;
	height: 22px;
	line-height: 22px;
	color: #FFFFFF;
	font-weight: bold;
	background: #FF9D9D url(images/stop.gif) no-repeat 10px center;
	padding: 3px 10px 3px 40px;
	margin: 10px 0;
	border-top: 2px solid #FF0000;
	border-bottom: 2px solid #FF0000;
}
.clear {
  	clear: both;
  	width: 100%;
  	height: 0;
  	line-height: 0;
  	font-size: 0;
  	padding: 0;
  	margin: 0;
  	border: 0;
}
.regbtn {				/* ---------- register button styles ---------- */
	font-size: 120%;	
	white-space: nowrap;
	/*margin: 2em 1em;*/
	padding: .6em 0;
}
.btnleft {
	float: left;	
	width: 45%;
}
.btnright {
	float: right;
	width: 45%;
}
.regbtn a {
	border: .2em solid #dd5827;
	-moz-border-radius:1ex;
	-webkit-border-radius:1ex;	
	padding:.4em 1em .4em 1em;
	text-decoration:none;
}
.regbtn a:link {
	color:#dd5827;
	background: #ffffcc /*url(../images/organge-up-arrow.png) no-repeat 3% 50%*/;
}
.regbtn a:visited {
	color:#dd5827;
	background: #ffffcc /*url(../images/organge-up-arrow.png) no-repeat 3% 50%*/;
}
.regbtn a:hover {
	color:#009286;
	background: #ffffcc /*url(../images/teal-up-arrow.png) no-repeat 3% 50%*/;
	border-color: #009286;
}
.italics {
	font-style: italic;	
}
.errormsg {
	display: block;
	width: 90%;
/*	height: 10%;*/
	line-height: 140%;
	color: #FFFFFF;
	font-weight: bold;
	background: #FF9D9D url(images/stop.gif) no-repeat 10px center;
	padding: .1em 1em;
	margin: .5em 0;
	border-top: .2em solid #FF0000;
	border-bottom:.2em solid #FF0000;
}
.errors {
	color: #FF0000;
	font-weight: bold;
/*	border-left: .2em solid #FF0000;*/
	width: 90%;
	padding: .1em 1em;
	margin: .5em 0;
}
.tbl {
	border: .1em solid 	#08DA8F;
}
.tbl th {
	background: #08DA8F;
	text-align:center;
	vertical-align: middle;
	font-weight: bold;
	font-size: 100%;
	padding: .3em;
	color:#fff;
}
.tbl th a {
	color: #fff;	
}
.tbl th.selected a {
	color: #FFF684;
}
.tbl td {
	padding: .2em;	
	border-bottom:.1em solid #08DA8F;
}
.tbl-normal {
	background:#fff;	
}
.tbl-highlight {
	background:#e0e0e0;	
}
.selected {
	color: #FFF;	
}
.smalltext {
	font-size: small;	
}

