@charset "UTF-8";

/* Based on the tutorial provided here:
   http://medialoot.com/blog/how-to-code-a-clean-website-template-in-html5-css3/
*/

/* CSS Reset */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,p,blockquote,th,td{margin:0;padding:0;}
table{border-collapse:collapse;border-spacing:0;}
fieldset,img{border:0;}
ul{ list-style:none; list-style-position:outside;}
a {  outline: none;}
* {margin: 0; padding; 0px }
/* Tell old browsers how to handle HTML5 elements */
header, footer, aside, nav, article {display: block;}


body {
    font-family: 'Alice', 'Georgia', serif;
    font-size: 12px;
    background: #F9FCFC;
    color: 666666;
}

p{
    line-height:150%;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Montserrat', Helvetica, sans-serif;
}

a:link, a:visited {
    color: #168FAD;
    text-decoration: none;
}

.wrapper {
    width: 960px;
    margin: 0px;
}

/* Header */
header {
	height: 110px;
}

header {
	/* Fallback Color */
	background: #F4F8F9;
	/* Firefox 3.6+ */
	background-image: -moz-linear-gradient(#FFFFFF, #E9F2F3);
	/* Safari 4+, Chrome 1+ */
	background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#FFFFFF), to(#E9F2F3));
	/* Safari 5.1+, Chrome 10+ */
	background-image: -webkit-linear-gradient(#FFFFFF, #E9F2F3); 
	/* IE */
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFF', endColorstr='#E9F2F3');
}

/* Logo */

h1.logo a {
	display: block;
	width: 221px;
	height: 65px;
	background: url('img/Logo221x65.png') no-repeat;
	float: left;
	margin: 20px 0 0 10px;
	text-indent: -5000px;
}

/* Main Navigation */

header ul {
	float: right;
	margin: 35px 0;
}

header li {
	float: left;
	display: inline-block;
	width: 90px;
	height: 36px;
	margin: 0 10px 0 0;
}

header li a {
	color: #2C6069;
	display: block;
	width: 90px;
	height: 36px;
	text-align: center;
	font-weight: bold;
	line-height: 36px;
	border: 1px solid #CDE0E4;
	-moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px;
	-moz-box-shadow: 0 1px 0 #FFFFFF; -webkit-box-shadow: 0 1px 0 #FFFFFF; box-shadow: 0 1px 0 #FFFFFF;
}

header li a {
	/* Fallback Color */
	background: #E8F4F6;
	/* Firefox 3.6+ */
	background-image: -moz-linear-gradient(#FFFFFF, #DFF0F3);
	/* Safari 4+, Chrome 1+ */
	background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#FFFFFF), to(#DFF0F3));
	/* Safari 5.1+, Chrome 10+ */
	background-image: -webkit-linear-gradient(#FFFFFF, #DFF0F3); 
	/* IE */
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFF', endColorstr='#DFF0F3');
}

header li a:hover {
	/* Fallback Color */
	background: #FFFFFF;
	/* Firefox 3.6+ */
	background-image: -moz-linear-gradient(#FFFFFF, #E8F4F6);
	/* Safari 4+, Chrome 1+ */
	background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#FFFFFF), to(#E8F4F6));
	/* Safari 5.1+, Chrome 10+ */
	background-image: -webkit-linear-gradient(#FFFFFF, #E8F4F6); 
	/* IE */
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFF', endColorstr='#E8F4F6');
}

header li.active a {
	color: #5E8D94;
	-moz-box-shadow: inset 0 2px 3px #436E7D; -webkit-box-shadow:inset 0 2px 3px #436E7D; box-shadow: inset 0 2px 3px #436E7D;
}

header li.active a {
	/* Fallback Color */
	background: #DFF0F3;
	/* Firefox 3.6+ */
	background-image: -moz-linear-gradient(#DFF0F3, #FFFFFF);
	/* Safari 4+, Chrome 1+ */
	background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#DFF0F3), to(#FFFFFF));
	/* Safari 5.1+, Chrome 10+ */
	background-image: -webkit-linear-gradient(#DFF0F3, #FFFFFF); 
	/* IE */
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#DFF0F3', endColorstr='#FFFFFF');
}


/* Main Feature */

section.home_feature {
	height: 480px;
	background: #CDE0E4 url('img/hatch_pattern.png') repeat;
	-moz-box-shadow: inset 0 5px 9px #66888E; -webkit-box-shadow: inset 0 5px 9px #66888E; box-shadow: inset 0 5px 9px #66888E;
}


article.main_display {
	display: block;
	float: left;
	position: relative;
	width: 450px;
	height: 397px;
	margin: 70px 0 0 10px;
	background: url('img/feature_display.png') no-repeat;
}


article.main_display img {
	position: absolute;
	top: 23px;
	left: 19px;
	height: 256px;
	width: 410px;
	border: 0px 2px 2px 0px, solid, #666699;
}



/* For a banner in upper right corner across the main picture - not used
article.banner_new {
	position: absolute;
	left: -6px;
	top: -6px;
	background: url('img/feature_banner.png') no-repeat;
	width: 103px;
	height: 103px;
}
*/

article.banner_new p {
	text-indent: -5000px;
}

/* Not used - this is the overlay image for the main picture - not used
article.main_display .display_gloss {
	position: absolute;
	top: 2px;
	right: 2px;
	width: 269px;
	height: 283px;
	background: url('img/display_gloss.png') no-repeat;
}
*/

article.feature_text {
	float: right;
	width: 450px;
	margin: 60px 10px 0 0;
}

article.feature_text h2 {
	font-size: 44px;
	color: #2C5F66;
	line-height: 120%;
	margin: 0 0 20px 0;
	text-shadow: 0 1px 0 #F1F7F8;
}

article.feature_text p {
	color: #5E8C92;
	text-shadow: 0 1px 0 #F1F7F8;
}

article.feature_text a {
	display: block;
	width: 310px;
	height: 47px;
	color: #FFFFFF;
	background: url('img/btn_main_feature.png') no-repeat;
	margin: 15px 0 0 0;
	text-align: center;
	line-height: 40px;
	font-family: 'Montserrat', Helvetica, sans-serif;
	font-weight: lighter; /*counteract strong browser anti-aliasing*/
	font-size: 22px;
	text-shadow: 0 -1px 0 #38474A;
}

article.feature_text a:hover {
	background-position: 0 -46px; /* clever way to shift down on a single image*/ 
	line-height: 41px;
	
}

article.feature_text a:active {
	color: #EFEFEF;
	background-position: 0 -92px;
	line-height: 42px;
}