*{
	margin: 0 auto;
	padding: 0;
	font-family: Arial;
	font-size: 12px;
	color: #555555;
	outline: none;
	border: none;
	border-style: none;
	outline-style: none;}

body{
	width: 100%;
	text-align: center;
	background: #6EB5FC url(../images/bg-1x461.gif) repeat-x 0 0;
	outline: none;
	z-index: 0;}

/*black bar*/
#ciee-blackBar{
	position: fixed;			/*fixed is independent of any containing element - doesn't matter where you put this div*/
	top: 0;
	left: 0;
	width: 137px;
	height: 32px;
	z-index: 100;	
	border: 0;}
	
#ciee-blackBar img{
	outline: none;		
	border: 0;}

#blackBar{
	width: 100%;
	height: 39px;
	top: 0;
	left: 0;
	position: fixed;	/*indedpendent of any containing element*/
	z-index: 99;
	background: url(../images/repeatX.png) repeat-x 0 -82px;
	text-align: center;
	margin: 0;
	padding: 0;
	outline: none;
	overflow: hidden;}
	
@-moz-document url-prefix()
{
	#blackBar{
	overflow: auto;/*eliminates flickering in Firefox on scroll - should be fixed in ver4.0*/}
}

#blackBar ul{
	/*border: solid 1px white;*/
	height: 32px;
	line-height: 31px;
	font-size: 10px;
	text-transform: uppercase;
	font-weight: bold;
	margin: 0;
	padding: 0;
	display: inline;}

#blackBar li{		
	display: inline;
	color: #FFFFFF;
	font-family: Arial;
	font-weight: bold;
	padding-left: 25px;}

#blackBar li span.doubleChevron{
	font-size: 12px;
	color:  #FFFFFF;}

#blackBar li a{
	color: #FFF;
	text-decoration: none;
	font-family: Arial;
	padding-left: 4px;
	outline: none;
	font-size:10px;}

#blackBar li a:link{
	color: #FFF;
	text-decoration: none;}

#blackBar li a:visited{
	color: #FFF;
	text-decoration: none;}

#blackBar li a:hover, #blackBar li a.selected:hover{
	color: #9ECEEB;
	text-decoration: none;}

#blackBar li a.selected{
	color: #FF9929;}

/*end of black bar*/

/*wrapper*/

#wrapper{
	position: relative;
	width: 999px;
	min-height: 500px;
	height: 100%;
	text-align: left;
	overflow: hidden;
	/*border: solid 1px black;*/}
	
#logo{
	position: absolute;
	top: 49px;
	left: 42px;
	/*border: solid 2px white;*/}

#logo img, #logo a
	{border: none;}
	

/*homepage navBar*/

#navBar, #navBarLeft, #navBarRight, #navBarUL
{
	position: absolute;
	top: 50px;
	height: 82px;
	z-index: 1;	/*navBarUL set to 2 below*/
}

#navBar{
	right: 60px;	
	width: 580px;	/*navBarLeft right placement (640) - navBarRight width(60) */
	background: url(../images/repeatX.png) repeat-x 0 0;
	/*border: solid 1px white;*/}
	
#navBarLeft{
	right: 640px;
	width: 84px;	
	background: url(../images/navBarLeft84x82.png) no-repeat 0 0;}

#navBarRight{
	right: 0;
	width: 60px;	
	background: url(../images/navBarRight60x82.png) no-repeat 0 0;}

#navBarUL{	
	right: 0;	
	width: 670px;	/*This sits on top of navBar,navBarRight,& navBarLeft-stretch this to fit contents, mind the selected tab*/
	list-style: none;
	z-index: 2;
	/*border: solid 1px white;*/}

#navBarUL li{
	float: left;	/*floating allows us to set width & height in IE*/
	line-height: 130px;
	text-align: center;
	display: inline-block;
	width: 79px;	/*same width as selected bg image*/
	height: 82px;	
	/*border: solid 1px yellow;*/}
	
#navBarUL li.selected{
	line-height: 120px;	/*bump the text up a bit*/
	background: url(../images/navBarOrangeTab79x58.png) no-repeat 0 24px;}	/*position based on ul height - bg image height*/
	
#navBarUL li a, #navBarUL li a:link, #navBarUL li a:visited, #navBarUL li a:hover{
	color: #FFFFFF;
	text-decoration: none;
	font-weight: normal;
	font-size: 14px;	
	/*border: solid 1px red;*/}

#navBarUL li a:hover{
	color: #FF9929;}
	
#navBarUL li.selected a:hover{
	color: #FFFFFF;}

/*end of homepage navBar*/

#spacer{/*simply an empty div to push #mainBarker down to begin right below the navBar
			this enables us to avoid absolutely positioning content from here down*/
	height: 128px;}/*navBarUL height + top - 4px dropshadow*/


/*mainBarker*/
#mainBarkerTop{
	position: relative; /*enables z-index in relation to navBar*/
	z-index: 4;	/*sits on top of navBarUL*/
	height: 13px;
	background: url(../images/barkerTopsAndBottoms.png) no-repeat 0 0;}
	
#mainBarkerContent{
	overflow: auto;
	position: relative;
	height: 308px;	/*content should be 298px in height - this gives us 5px top & bottom*/
	background: url(../images/repeatY.png) repeat-y 0 0;}
	

/*home tab*/
#homeBarkerLeft{
	position: absolute;
	top: 5px;
	left: 15px;
	height: 298px;
	width: 473px;
	/*border: solid 1px black;*/}
	
#homeBarkerRight{
	position: absolute;
	right: 15px;
	top: 6px;
	width: 487px;
	height: 302px;
	background: url(../images/homeRight487x302.jpg) no-repeat 0 0;
	/*background-color: Blue;*/}

#homeBarkerRight #p1, #homeBarkerRight #p2{
	display: block;
	position: absolute;
	left: 30px;
	/*border: solid 1px black;*/}

#homeBarkerRight #p1{
	width: 425px;
	height: 65px;
	top: 75px;}

#homeBarkerRight #p2{
	width: 300px;
	height: 125px;
	top: 150px;}
	
	
#homeBarkerLeftTextOverlay{
	position: absolute;
	overflow: hidden;
	bottom: 5px;	/*top margin of div is 5px, leaving 5px at the bottom*/
	left: 15px;
	width: 473px;
	height: 60px;	
	line-height: 60px;
	text-indent: 10px;
	font-size: 14px;
	color: #FFFFFF;
	background: url(../images/repeatX.png) repeat-x 0 -164px;}
	
#homeBarkerLeftTextOverlay a, #homeBarkerLeftTextOverlay a:link, #homeBarkerLeftTextOverlay a:visited, #homeBarkerLeftTextOverlay a:hover{
		text-decoration: none;
		color: #FF9929;
		font-size: 14px;}
		
#homeBarkerLeftTextOverlay a:hover{
		color: #6EB5FC;}

/*end of home tab*/

/*homeBarker one and two up */
div.oneAndTwoUpBarker {
	position: absolute;
	top: 5px;
	left: 12px;
	width: 967px;
	height: 300px;
	/*background-color: Blue;*/}

/*homeBarker three and four up*/
div.threeUpBarkerLeft, div.fourUpBarkerLeft{
	position: absolute;
	top: 5px;
	left: 16px;
	width: 481px;
	height: 300px;
	/*background-color: Blue;*/}

div.threeUpBarkerRight, div.fourUpBarkerRight{
	position: absolute;
	top: 5px;
	right: 25px;
	width: 463px;
	height: 300px;
	/*background-color: Red;*/}
	
div p.imageCopy{
    position: absolute;
    top:100px;
    left:30px;
    display:block;
    width:225px;
    height:150px;
    color:#FFF;
    font-family:Arial, Helvetica;}
    
div p.imageCopyRight{
    position: absolute;
    top:100px;
    left:515px;
    display:block;
    width:225px;
    height:150px;
    color:#FFF;
    font-family:Arial, Helvetica;}    
    
div p.teachContent{
    position: absolute;
    top:20px;
    left:525px;
    display:block;
    width:420px;
    height:150px;
    color:#FFF;
    font-family:Arial, Helvetica;}    
    
div.button{
    position:absolute;
    top:248px;
    left:316px;
    width:132px;
    height:31px;}
    
div.button a{
    position:absolute;
    display:block;
    width:132px;
    height:31px;
    background:URL(../images/transparentPixel-1x1.gif)}
    
div.button a:hover{
    position:absolute;
    display:block;
    width:132px;
    height:31px;
    background:url(../images/mainHover.jpg) no-repeat top left;}
    
div.HSbuttonLeft{
    position:absolute;
    top:201px;
    left:56px;
    width:132px;
    height:31px;}

div.HSbuttonRight{
    position:absolute;
    top:225px;
    left:304px;
    width:132px;
    height:31px;}
    
div.HSbuttonLeft a, div.HSbuttonRight a{
    position:absolute;
    display:block;
    width:132px;
    height:31px;
    background:URL(../images/transparentPixel-1x1.gif)}
    
div.HSbuttonLeft a:hover, div.HSbuttonRight a:hover{
    position:absolute;
    display:block;
    width:132px;
    height:31px;
    background:url(../images/mainHover.jpg) no-repeat top left;}
    

ul.threeUp{
	list-style: none;
	background: url(../images/repeatX.png) repeat-x 0 -611px;}
	
ul.fourUp{
	list-style: none;
	background: url(../images/repeatX.png) repeat-x 0 -311px;}
	
ul.threeUp li, ul.fourUp li{
	overflow: hidden;
	cursor: default;}

ul.threeUp li{
	height: 100px;	/*barkerRight height / 3*/}	

ul.fourUp li{
	height: 75px;	/*barkerRight height / 4*/}
	
ul.threeUp li img{
	margin: 7px 8px 0 4px;}
	
ul.fourUp li img{
	margin: 5px 8px 0 4px;}
	


ul.threeUp li a.liHeader,ul.fourUp li a.liHeader, ul.threeUp li span.liHeader,ul.fourUp li span.liHeader{
	display: block;
	color: #225d8f;
	font-size: 16px;
	font-weight: bold;
	padding-top: 8px;
	text-decoration: none;}
	
ul.threeUp li a.liHeader:hover,ul.fourUp li a.liHeader:hover{text-decoration: underline;}
	
ul.threeUp li.showing{
	background: url(../images/li3and4UpBG.png) no-repeat 0 -75px;}

ul.fourUp li.showing{
	background: url(../images/li3and4UpBG.png) no-repeat 0 0;}	
	
ul.threeUp li.showing .liHeader, ul.fourUp li.showing .liHeader{
	color: #005e20;}	
	
/*end of homeBarker threeUp and fourUp*/
	
#mainBarkerBottom{
	height: 14px;
	margin-bottom: 5px;
	clear: both;
	background: url(../images/barkerTopsAndBottoms.png) no-repeat 0 -13px;}
/*end of mainBarker*/


/*bodyBarker*/
#bodyBarkerTop, #bodyBarkerContent, #bodyBarkerBottom{
	float: left;	
	width: 713px;
	position: relative;	/*z-index only works if elements are 'positioned'*/
	z-index: 2;	/*so they sit on top of the footer*/}

#bodyBarkerTop{
	height: 14px;
	background: url(../images/barkerTopsAndBottoms.png) no-repeat 0 -27px;
	/*border: solid 1px black;*/}
	
#bodyBarkerContent{
	height: 884px;
	background: url(../images/repeatY.png) repeat-y -999px 0;
	/*border: solid 1px black;*/}
	
.bodyBarkerSingle, .bodyBarkerDoubleVert, .bodyBarkerDoubleHoriz{
	position: absolute;
	background-image: url(../images/bodyBarkerBarkers.png);}

.bodyBarkerSingle{	
	width: 337px;
	height: 197px;
	background-position: 0 -253px;}
	
.bodyBarkerSingle p{
	padding: 10px 15px 0 25px;}
	
.bodyBarkerSingle p a{
	color: #ff6309;
	text-decoration:none;}
	
.bodyBarkerSingle p :hover{
	color: #1C6198;}
		
.bodyBarkerDoubleVert{
	width: 337px;
	height: 410px;
	background-position: -337px -253px;}
	
.bodyBarkerDoubleHoriz{
	width: 679px;
	height: 253px;
	background-position: 0 0;}
	
#bodyBarkerContent h1{
	font-size: 18px;
	font-weight: normal;
	color: #225D8F;
	margin: 20px 0 0 23px;}

#bodyBarkerContent h2{
	font-size: 18px;
	line-height: 29px;
	font-weight: normal;
	color: #FFFFFF;	
	margin: 0 0 0 21px;
	padding: 0 0 0 3px;}
	
#bodyBarkerContent h2.orange{
	background: url(../images/repeatX.png) repeat-x 0 -282px;}
	
#bodyBarkerContent h2.green{
	background: url(../images/repeatX.png) repeat-x 0 -224px;}

#bodyBarkerContent h2.blue{
	background: url(../images/repeatX.png) repeat-x 0 -253px;}

/*news articles*/
#previousAndNextButtons{
	position: absolute; top: 42px; left: 20px; width: 316px; height: 28px; background: url(../images/repeatX.png) repeat-x 0 -224px;}

#newsPrevious{	
	float: left;
	margin-left: 10px;
	text-indent: 14px;
	background: url(../images/leftAndRightChevrons.png) no-repeat 0 11px;}
	
#newsPrevious:hover{
	background: url(../images/leftAndRightChevrons.png) no-repeat 0 -32px;}

#newsNext{	
	float: right;
	margin-right: 10px;
	width: 50px;
	background: url(../images/leftAndRightChevrons.png) no-repeat -355px 11px;}
	
#newsNext:hover{
	background: url(../images/leftAndRightChevrons.png) no-repeat -355px -32px;}

#newsBarker .newsPrevNext{
	display: block;
	font-size: 12px;
	line-height: 28px;
	color: #FFFFFF;
	cursor: pointer;}

#newsBarker .newsPrevNext:hover{
	color: #225D8F;}

#newsBarker div.newsArticle{
	position: absolute;
	top: 78px;
	left: 25px;
	width: 295px;
	height: 310px;
	display: none;}
	
#newsBarker h1.newsHeadline{
	margin: 5px 0 0 0;}
	
#newsBarker .articleImage{
	width: 155px;
	height: 115px;
	margin: 0 7px 0 0;
	border: solid 3px #cbbfb4;}	
	
#newsBarker p.newsText{
	 margin-top: 8px;}
	 
#newsBarker a, #newsBarker a:link, #newsBarker a:visited, #newsBarker a:hover{
	color: #ff6309;
	text-decoration:none;}
	
#newsBarker a:hover{
	color: #1C6198;}

/*end of news articles*/

/*Program news and alerts*/
#pna a, #pna a:link, #pna a:visited, #pna a:hover{
	color: #1C6198;
	text-decoration: none;
	line-height: 18px;}
	
#pna a:hover{
	color: #ff6309;}



/*end of program news and alerts*/



/*blog barker*/

#blogBarker .blogDiv{
	position: relative;
	float: left;
	margin: 20px 0 0 25px;
	width: 310px;
	height: 150px;}
	
#blogBarker .photoCaption{
	color: #225d8f;
	position: absolute;
	width: 102px;
	height: 45px;
	text-align: right;
	top: 100px;
	left: 0;}
	
#blogBarker .photoCaption em{
	color: #225d8f;}
	
#blogBarker .blogPhoto{
	 margin-right: 20px;
	 float: left;
	 width: 102px;
	 height: 93px;}

#blogBarker .blogTitle{
	font-size: 16px;
	margin: 0 0 8px 0;
	color: #ff6309;}
	
#blogBarker .blogText{
	color: #225d8f;
	display: block;
	height: 120px;
	overflow: hidden;}
	
#blogBarker .blogText a, #blogBarker .blogText a:link, #blogBarker .blogText a:visited, #blogBarker .blogText a:hover{
	text-decoration: none;
	color: #ff6309;}
	
#blogBarker .blogText a:hover{
	color: #225d8f;}
	
#blogBarker .rssIcon{
	position: absolute;
	width: 24px;
	height:24px;
	bottom: 15px;
	right: 5px;}

#blogBarker .blogShadow{
	float: left;
	margin-top: 0;
	width: 20px;
	height: 150px;
	background: url(../images/blogSection/blogShadow10x149.png) no-repeat 0 0;}

/*end of blog barker*/
		
		
#bodyBarkerBottom{
	height: 14px;
	background: url(../images/barkerTopsAndBottoms.png) no-repeat 0 -41px;
	/*border: solid 1px black;*/}
/*end of bodyBarker*/

/*sideBarkers*/
#sideBarkerDiv{
	float: right;
	position: relative;
	width: 286px;/*container width - shadowFrame width*/}

.sideBarker{
	position: relative;
	width: 286px; 
	height: 238px;
	background: url(../images/sideBarkerShadow286x238.png) no-repeat 0 0;
	/*border: solid 1px black;*/}
	
.sideBarker img{
	border: none;
	margin: 5px 0 0 12px;/*designed for 269x229 images w/o shadows - background independent*/}

/*end of sideBarkers*/

/*footer*/
#footerDiv{
	float: left;
	position: relative;	/*kicks in z-index*/
	width: 713px;
	height: 43px;
	top: -14px;
	padding-bottom: 10px;
	z-index: 1;	/*so it sits under the bodyBarker*/}

#footerLeft{
	float: left;
	width: 16px;
	height: 43px;
	background: url(../images/footerLeftAndRight.png) no-repeat 0 0;}

#footerRight{
	float: left;
	width: 16px;
	height: 43px;
	background: url(../images/footerLeftAndRight.png) no-repeat -16px 0;}

#footerContent{
	float: left;	
	width: 681px;	/*713 - (16 + 16)*/
	height: 43px;
	position: relative;
	background: url(../images/repeatX.png) repeat-x 0 -121px;}
	
#footerContent ul{
	position: absolute;
	top: 18px;
	list-style: none;}
	
#footerContent li{
	display: inline;
	border-left: solid 1px #FFFFFF;
	padding: 0 10px 0 13px;}
	
#footerContent li.first{
	border-left: none;
	padding-left: 7px;}
	
#footerContent li a, #footerContent li a:link, #footerContent li a:visited{
	color: #FFFFFF;
	font-size: 11px;
	text-decoration: none;}
	
#footerContent li a:hover, #footerContent li a.selected:hover
{
	color: #9ECEEB;}

#footerContent li a.selected
{
	color: #FF9929;}

#footerContent #shareButton{
	position: absolute;
	top: 18px;
	right: 10px;
	width: 125px;
	height: 16px;}
	
#footerContent #copyright{
	position: absolute;
	top: 48px;
	right: 0;	
	width: 65px;
	height: 15px;
	font-size: 10px;
	color: #FFFFFF;
	/*border: solid 1px black;*/}
/*end of footer*/

/*end of wrapper*/


/*non-home pages - see how much CSS this generates and make a judgement call on wether to split out the home page into it's own.*/

#shellTop{
	position: relative; /*enables z-index in relation to navBar*/
	z-index: 4;	/*sits on top of navBarUL*/
	height: 11px;
	background: url(../images/nonHomeShells.png) no-repeat 0 0;}

#shellBody{
	overflow: auto;
	position: relative;	
	background: url(../images/repeatY.png) repeat-y -1712px 0;
	z-index: 2;	/*sits on top of footer*/}

#shellBottom{
	position: relative;
	height: 11px;	
	background: url(../images/nonHomeShells.png) no-repeat 0 -11px;
	z-index: 2; /*sits on top of footer*/}
	
#shellBody #headerImage{
	clear: both;
	padding:3px 0 10px 15px;}
	
#shellNavigationContainer{
	position: relative;
	float: left;
	width: 251px;
	margin-left: 12px;
	margin-right: 8px;}
	
#leftShadow{
	float: left;
	width: 10px;
	height: 600px;	/*make it long enough to pass navBottom*/
	background: url(../images/nonHomeShellShadows.png) no-repeat -10px 0;}

#navTop{
	float: left;
	width: 241px;
	height: 24px;
	background: url(../images/nonHomeShells.png) no-repeat 0 -65px;}

#navContent{
	float: left;
	width: 241px;
	min-height: 236px;	/*leftShadow height*/
	background: url(../images/repeatY.png) repeat-y -2621px 0;}
	
#navContent ul{
	list-style: none;
	/*border: solid 1px black;*/}

#navContent li{	
	line-height: 29px;
	background: url(../images/libackground.jpg) no-repeat 0 0;}
	
#navContent li.first{background: none;}	
	
#navContent li a.subNav{
	color: #0C5E5A;
	padding-left: 10px;}
	
#navContent li.selected{
	background: url(../images/shellNavLiSelected.png) no-repeat 0 0;}

#navContent li a, #navContent li a:link, #navContent li a:visited, #navContent li a:hover{
	color: #707070;
	font-size: 12px;
	text-decoration: none;
	margin-left: 36px;
	display:block;}	
	
#navContent li a:hover{
	color: #a3620a;}
	
#navContent li.selected a{
	color: #FFFFFF;}

#navBottom{float: left;
	width: 241px;
	height: 21px;
	background: url(../images/nonHomeShells.png) no-repeat 0 -89px;}

#shellContentContainer, #shellContentContainer-noNav{
	float: left;
	position: relative;
	width: 623px;}
	
#shellContentContainer-noNav{
	margin-left: 12px;
	width: 882px;}

#shellContentLeftShadow{
	float: left;
	width: 10px;
	height: 650px;	/*drives the min-height for the entire page*/
	background: url(../images/nonHomeShellShadows.png) no-repeat 0 0;}
	
#shellContentTop{
	float: right;
	width: 613px;
	height: 22px;
	background: url(../images/nonHomeShells.png) no-repeat 0 -22px;}
	
#shellContentContainer-noNav #shellContentTop{
	float: right;
	width: 872px;
	height: 22px;
	background: url(../images/nonHomeShells.png) no-repeat 0 -110px;}
	
#shellContent{
	float: right;
	width: 613px;
	min-height: 451px;	/*leftShadow height*/
	background: url(../images/repeatY.png) repeat-y -2862px 0;}
	
#shellContentContainer-noNav #shellContent{
	float: right;
	width: 872px;
	min-height: 451px;	/*leftShadow height*/
	background: url(../images/repeatY.png) repeat-y -3475px 0;}

#shellContent h1{
	color: #a3620a;
	font-size: 30px;
	font-weight: normal;
	margin-left: 20px;
	padding-bottom: 16px;}

#shellContent h2{    
	color: #464646;
	margin-left: 20px;
	margin-bottom:10px;
	font-size: 15px;}

#shellContent p{
	color: black;
	padding: 0 20px 10px 20px;}

#shellContent p strong{
    color:#464646;}
    
 #shellContent p em, #shellContent p em u{
    color:#000000;}

#shellContent a, #shellContent a:link, #shellContent a:visited, #shellContent a:hover, #shellContent a em{
	color: #a3620a;
	text-decoration: none;}
	

#shellContent a:hover{
	text-decoration: underline;
	color: #464646;}
	
#shellContent ul{
	list-style: none;	margin: 0 30px 10px 30px;}
	
#shellContent li{
	background: url(../images/bullet.gif) no-repeat 0 2px;
	color:#000000;
	padding: 0 0 8px 20px;}

#shellContent li em{
    color:#000000;}
    
#shellContentBottom{
	float: right;
	width: 613px;
	height: 21px;
	background: url(../images/nonHomeShells.png) no-repeat 0 -44px;}
	
#shellContentContainer-noNav #shellContentBottom{
	float: right;
	width: 872px;
	height: 21px;
	background: url(../images/nonHomeShells.png) no-repeat 0 -132px;}