@charset "UTF-8";
/* CSS reset */
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, ol, ul, li,
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;
}
:focus {outline:0;}
body {line-height:1; color:black; background:none;}
ol, ul {list-style:none;}
/* 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: "" "";}
/* END CSS reset */

html {}
body {text-align:center; height:100%; background:url(images/bg-pixels.png) top center no-repeat #069;}
#container {width:960px; margin:0 auto; clear:both; text-align:left;}
#header {
	width:960px; 
	height:80px; 
	background:url(images/bg-header.png) repeat-x; 
	margin-bottom:18px; 
	border-bottom:1px solid #FFF;
	border-left:1px solid #BBB;
	border-right:1px solid #BBB;
}
ul#nav {width:310px; height:155px; margin:5px; margin-right:0; background:url(images/bg-nav.png) repeat-x; float:left; text-align:center;}
ul#nav li, ul#nav li a {
	width:275px; 
	display:block; 
	height:50px; 
	margin:0 auto;
	font:bold 21px/50px Arial, Helvetica, sans-serif; 
	color:#003; 
	text-decoration:none;
	text-shadow:#FFFFFF 0px 1px 1px;
	filter: Shadow(Color=#FFFFFF, Direction=90, Strength=1);
}
ul#nav li a:hover {color:#09C;}
ul#nav li.first {border-bottom:1px solid #FFF;}
ul#nav li.second {border-bottom:1px solid #FFF; border-top:1px solid #999;}
ul#nav li.third {border-top:1px solid #999;}
#mainContent {position:relative;}
/* General Styles */
/* Need to define anchors and headings hierarchy...er...at some point */
a, a:link {color:#000; text-decoration:underline;}
a:hover {color:#FFF;}

/* Scrollable styles */
/* Root element for the scrollable. when scrolling occurs this element stays still. */
.scrollable {
	position:relative;
	overflow:hidden;
	width: 960px;
	height:460px;
	border-top:1px solid #fff;
	border-bottom:1px solid #9ACED8;
	background:url(images/bg-scrollable.png) repeat-x;
	float:left;
}
/* Root element for scrollable items. Must be absolutely positioned and be extremely wide to accomodate all items.*/
.scrollable .items {width:20000em; position:absolute; clear:both;}
.scrollable div.panel {width:960px; height:450px; float:left; display:block;}
.scrollable .active {border:2px solid #000; z-index:9999; position:relative;}
a.browse {background:url(images/arrows.png); display:block; width:90px; height:140px; float:left; cursor:pointer;}
a.right {background-position:bottom right; position:absolute; top:325px; left:980px;}
a.right:hover {background-position:bottom left;}
a.right:active {background-position:bottom center;}
a.left {background-position:top left; position:absolute; top:325px; right:980px;}
a.left:hover {background-position:top right;}
a.left:active {background-position:top center;}

.panel a {color:#afafaf; font:normal 14px/16px Helvetica, Arial, sans-serif; text-decoration:none;}
/* Boxgrid Styles */
.boxgrid h3, h3 {margin:5px; color:#FFF; font:bold 24px Arial, Helvetica, sans-serif;}			
.boxgrid { 
	width:290px; 
	height:200px; 
	margin:5px; 
	background:#222; 
	position:relative;
	float:left;
	border:10px solid #000;
	overflow:hidden;
}
.boxgrid img {position:absolute; top:0; left:0; width:290px; height:200px; border:none;}
.boxgrid p, a .boxgrid p { 
	padding:0 10px;
	margin:0;
	color:#afafaf; 
	font:normal 14px/16px Helvetica, Arial, sans-serif; 
}
.boxgrid p.viewlarger, .boxgrid p.viewlarger {color:#09F; line-height:18px; font-weight:bold;}
.boxcaption { 
	float:left; 
	position:absolute; 
	background:#000; 
	height:100px; 
	width:100%; 
	opacity:.8; 
	/* For IE 5-7 */
	filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
	/* For IE 8 */
	-MS-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
}
.boxgrid .boxcaption {position:absolute; top:180; left:0;}

/* Navigator Styles */
.navi {margin-left:420px; width:200px; height:20px;}
/* Items inside navigator */
.navi a {width:20px; height:20px; float:left; margin:10px 5px; background:#69C; display:block;}
.navi a:hover {background:#399; cursor:pointer;}
.navi a.active {background:#EEE;} /* current page state */

/***** OVERLAY STYLES ******/ 
/* Progress indicator (animated gif). should be initially hidden */ 
.progress {position:absolute; top:45%; left:50%; display:none;} 
#thumbs a.active img {outline:none; z-index:0; position:relative;}
/* Overlayed element */
.simple_overlay {
	display:none; /* initially hidden */
	z-index:10000;
	background-color:#333;
	width:675px;	
	min-height:200px;
	border:10px solid #222;	
	/* CSS3 styling for the cool kids */
	-moz-box-shadow:0 0 90px 5px #000;
	-webkit-box-shadow:0 0 90px #000;	
}
.simple_overlay .close {background:url(images/close.jpg) center no-repeat; position:absolute; right:-30px; top:-30px; cursor:pointer; height:50px; width:50px;}
.progress {position:absolute; top:45%; left:50%; display:none;}
/* Footer styles */
#sticky-footer {width:1050px; margin:0 auto; background:url(images/bg-footer.png) bottom no-repeat;}
#footer {
	width:958px; 
	margin:0 auto; 
	background:url(images/bg-scrollable.png) repeat-x; 
	text-align:left;
	border:1px solid #CCC;
	border-top:1px solid #FFF;
	border-bottom:0;
	height:350px;
}
#footer-content {margin:20px;}
#footer-content p {font:normal 14px/18px Arial, Helvetica, sans-serif; color:#036; margin:15px 0;}
#footer-content .footer-info {
	width:285px; 
	float:left; 
	border-right:1px solid #ddd; 
	padding:10px; 
	height:38px;
	font:normal 12px/16px Arial, Helvetica, sans-serif;
	color:#036
}
#footer-content .footer-info.last {border-right:none;}
/* Sticky Footer Styles */
html, body, #container {height:100%;}
body > #container {height:auto; min-height:100%;}
#mainContent {padding-bottom:350px;}  /* Must be same height as the footer */
#sticky-footer {
	position:relative;
	margin-top:-350px; /* Negative value of footer height */
	height:350px;
	clear:both;
}
.clearfix:after {content:"."; display:block; height:0; clear:both; visibility:hidden;}
.clearfix {display:inline-block;}
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */
/* End Sticky Footer Styles */

/* Because IE6 smells bad */
#ie6 {
	display:none;
	width:400px;
	padding:20px;
	border:10px solid #666;
	text-align:left;
	color:#333;
	background:#FFF;
}
#ie6 h3 {font:bold 21px/36px Arial, Helvetica, sans-serif;}
#ie6 p {font:normal 14px/18px Arial, Helvetica, sans-serif; margin:10px 0;}
#ie6 a, #ie6 a:link, #ie6 a:visited {color:#09C;}
#ie6 a:hover {color:#036;}

.boxgrid h3, h3 {margin:5px; color:#FFF; font:bold 24px Arial, Helvetica, sans-serif;}