body {
/*	background: #96c9e9 url(/img/cwyc-background2.gif) no-repeat bottom right;  */
/*	color: #6699cc;	*/
	background-color: #96cbeb;
	color: #333366;
	font-family: arial, sans-serif;
	font-size: 62.5%; /*Makes the base font size of the page 10 px, but uses a percentage along with em value with the text styles (see below), allowing more flexibility*/
	margin: 0;
	padding: 0;	
}


/*layout styles*/


#outer-wrap {	
	padding-top: 1px;
	background-image: url(/img/cwyc-background2.gif);
	background-size: 100%;
	-moz-background-size: 100%;
	-webkit-background-size: 100%;
	-o-background-size: 100%;
	background-repeat: no-repeat;
	background-position: bottom left;
	background-color: #fff;
	/*background-color: #96c9e9;*/
}


#container {
/*background image for #wrap differs for each page, see HTML files*/
/*	border: 2px solid #7C888F;  */
	width: 953px; /*if we later use a cutout of the image and a purely CSS background color, we can change this to 95.7 ems, and the whole page will upsize with text when the user upsizes the text*/
	height: auto;
	_height: 929px; /*Targets ie6*/
	min-height: 929px;
	position: relative;
	margin: 2.5em auto 1em auto;
	border: 3px solid #6699cc;
}


/*skip to content*/

#skiptocontent {
	position:absolute; 
	left:0; 
	top:-500px; 
	width:1px; 
	height:1px; 
	overflow:hidden;
}


/*header and nav styles*/

#header {
	margin: 0;
	padding-top: 3em;
}

#nav {
	margin: 0 0 25px 2px;
	padding: 0;
	float: left;
	width: auto;
	/*begin backround gradient, left to right*/
	background: #333366; /*old browsers*/
	background: -moz-linear-gradient(left, #333366 0%, #434471 50%, #51527c 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, right top, color-stop(0%,#333366), color-stop(50%,#434471), color-stop(100%,#51527c)); /* 	Chrome,Safari4+ */
	background: -webkit-linear-gradient(left, #333366 0%,#434471 50%,#51527c 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(left, #333366 0%,#434471 50%,#51527c 100%); /* Opera11.10+ */
	background: -ms-linear-gradient(left, #333366 0%,#434471 50%,#51527c 100%); /* IE10+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#333366', endColorstr='#51527c',GradientType=1 ); /* IE6-9 */
	background: linear-gradient(left, #333366 0%,#434471 50%,#51527c 100%); /* W3C */
	/*begin drop shadow*/
	box-shadow: 3px 3px 7px #333;
	-moz-box-shadow: 3px 3px 7px #333;
	-webkit-box-shadow: 3px 3px 7px #333;
}	

#nav ul {
	float: left;
	padding: 0;
	margin: 0;
}

#nav li {
	float: left;
	margin: 0;
	text-align: center;
	list-style-type: none;
	display: block;
	font-size: 1.4em;
}

#nav a:link {
	color: #ffffff;
	padding: .75em 1em .75em 1em;
	text-decoration: none;
	font-weight: bold;
	display: block;
}

#nav a:visited {
	color: #ffffff;
	padding: .75em 1em .75em 1em;
	text-decoration: none;
	font-weight: bold;
	display: block;
}

#nav a:hover, .hover_on {
	color: #ffffff;
	display: block;
	text-decoration: none;
	/*begin backround gradient, left to right*/
	background: #7291ca; /* Old browsers */
	background: -moz-linear-gradient(top, #7291ca 0%, #8ab5e1 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7291ca), color-stop(100%,#8ab5e1)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, #7291ca 0%,#8ab5e1 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, #7291ca 0%,#8ab5e1 100%); /* Opera11.10+ */
	background: -ms-linear-gradient(top, #7291ca 0%,#8ab5e1 100%); /* IE10+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7291ca', endColorstr='#8ab5e1',GradientType=0 ); /* IE6-9 */
	background: linear-gradient(top, #7291ca 0%,#8ab5e1 100%); /* W3C */	
} /*the .hover_on class identifies which main page the user is currently on */


a:active {
	color: #ffffff;
	text-decoration: none;
}


/*end header and nav styles*/


.breadcrumbs {
	font-size: 13px;
	font-style: italic;
}





#content {
	margin: 0;
	width: 48%;
	padding: 0 2.5em 0 2.5em;
	clear: both;
	
	/*border: 1px solid #cccccc;
	background-color: #2c3137;
	z-index: 100;
	border-radius: 10px;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	box-shadow: 3px 3px 7px #333;
	-moz-box-shadow: 3px 3px 7px #333;
	-webkit-box-shadow: 3px 3px 7px #333;
	*/
}

#content ul li {
	margin-bottom: 1.2em;
	/*	color: #6699cc;	*/
	color: #333366;
	line-height: 155%;
	list-style-type: square;
}

/*footer*/

#footer {
	width: 953px;
	text-align: right;
	margin-left: auto;
	margin-right: auto;
}

#footer p {
	font-size: 1.1em;
}

#footer hr {
	width: 55%;
}

#footer div#file_ext {
	text-align: center;
	width: 50%;
	margin-left: auto;
	margin-right: auto;
	display: block;
}



/*text styles*/


h1 {
	color: #6699cc;
	margin-bottom: .6em;
	padding-left: 1em;
	font-size: 2.8em;
	font-family: georgia, serif;
	letter-spacing: .7px;
}

/*marker felt font used on old site*/


h2 {
	color: #6699cc;
	font-size: 1.9em;
	line-height: 1em;
	margin-bottom: 0.5em;
	font-family: georgia, serif;
	line-height: 150%;
	letter-spacing: .5px;
}

h3 {
	color: #6699cc;
	font-size: 1.6em;
	line-height: 1em;
	margin: 0 0 0.5em 0.5em;
	letter-spacing: .3px;
}

p {
	font-size: 1.5em;
	line-height: 155%;
}

li {
	font-size: 1.5em;
}

li li {
	font-size: 100%;
} /*fixes sizing issues for nested lists.  Since we're using relative font sizing (ems) the inheritance doesn't quite work right--without this rule it basically inherits the size rule twice, making text larger*/



/*myriad pro used on old site*/


/*pseudo styles (links)*/

a:link {
	/*	color: #6699cc;	*/
	color: #333366;
	text-decoration: underline;
}

a:visited {
	/*	color: #6699cc;	*/
	color: #333366;
	text-decoration: underline;
}

a:hover {
	/*	color: #6699cc;	*/
	color: #333366;
	text-decoration: underline;
}

a:active {
	/*	color: #6699cc;	*/
	color: #333366;
	text-decoration: underline;
}