@import url('reset.css');

/*
COLORS
Define main colors used in a site here for easy reference

Blue = 4b95d1

*/

html {
	height: 100%;
}

body {
	height: 100%;
	font: 62.5%/1.5em arial, helvetica, sans-serif;
	text-align: center;
	color: #333;
	background: #fff url(../images/design/bg_clouds.jpg) 0 0 no-repeat;
}

body.services .main {
}

/* ----------------
	DEFAULTS
    ------------- */
h1, h2, h3, h4, h5, h6 {
	color: #000;
	text-transform: uppercase;
	letter-spacing: 0.10em;
	font-weight: 700;
}  

body.products h1 {
	line-height: 0.85em;
	font-size: 1.5em;
	text-transform: none;
}

h1 a, h2 a, h3 a, h4 a, h5 a, h6 a, 
h1 a:link, h2 a:link, h3 a:link, h4 a:link, h5 a:link, h6 a:link,
h1 a:visited, h2 a:visited, h3 a:visited, h4 a:visited, h5 a:visited, h6 a:visited  {
    color: #000;
}
h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover, h6 a:hover {
    color: #999;
} 

h1 { font-size: 1.8em; }
h2 { font-size: 1.3em; color: #4b95d1; }
h3 { font-size: 1.2em; }
h4 { font-size: 1.1em; letter-spacing: 0; text-transform: none; }
h5 { font-size: 0.8em; letter-spacing: 0; margin-bottom: 0.8em; }
h6 { font-size: 1em; } 

.contact-us .main h4 {
	padding-top: 24px;
}
 
a,
a:link,
a:visited { 
	color: #000; 
	text-decoration: none;
	border-bottom: 1px solid #000;
}
a:hover,
a:active {
    color: #000;
}

strong, b { font-weight: bold; }
em, i { font-style: italic; }

p { 
	margin-bottom: 1em;
	line-height: 1.4em;
}

small,
.small { font-size: 0.8em; }

/* ----------------
	PAGE STRUCTURE
	Elements that make up the skeleton of the layout and holds things together
	
	html, body, page, wrapper, and footer rules are designed to fix footer's at the bottom of the page.
	Wrapping the site in the page div also allows for double background images.
    ------------- */
#page {
	position: relative;
	min-height: 100%;
	text-align: left;
	padding: 0;
	font-size: 1.2em;
	width: 836px;
	margin: 0 auto;	
}

.cloud { height: 100%; position: relative;}

/*.cloud.inner {
	background: url(../images/design/paralax_cloud_1.png) 125% 150px scroll repeat-x;
}

.cloud.outter {
	background: url(../images/design/paralax_cloud_2.png) 250% 450px scroll repeat-x;
}*/


#wrapper {
	position: relative;
	min-height: 100%;
	text-align: left;
	padding-bottom: 10px;
	background: transparent url(../images/design/bg_wrapper_fade.png) 50% 0 no-repeat;
	z-index: 1;
}

body.home #wrapper {
	background: transparent url(../images/design/bg_wrapper_fade_home.png) 50% 0 repeat-y;
}

#wrapper_inner {
	width: 800px;
	min-height: 200px;
	margin: 0 18px;
	padding-top: 40px;
	background: transparent url(../images/design/bg_wrapper_inner.jpg) 100% 41px no-repeat;
}

body.home #wrapper_inner {
	padding-top: 80px;
	background-position: 50% 26px;
}


#content {
	padding: 0 45px;
	min-height: 600px;
}

body.home #content {
	min-height: 100px;
}

#header {
	position: relative;
	height: 24px;
	background: transparent url(../images/design/bg_header.png) 50% 100% no-repeat;
	z-index: 99;
}

body.home #header { margin-top: 55px; }

.section .main {
	float: right;
	width: 725px;
}

body.home .section .main { 
	float: none;
	width: 100%;
}

body.home .section_content .main,
body.home .section_content .nav {
	border: none;
}

.section.section_header .main,
.section.section_content .main {
	float: right;
	width: 583px;
}

.section_content .nav {
	float: left;
	width: 102px;
}

.section_content .nav,
.section_content .main {
	padding-top: 24px;
	border: none;
}

body.news .section_content .main { padding: 0; }

.section_header + .section_content .main,
.section_header + .section_content .nav {
	border-top: 1px solid #ccc;
}

.section.section_content .main.full {
	position: relative;
	width: 710px;
	text-align:center;
	border: none;
	padding: 24px 0 0 0;
	margin:0; /* center it */
}

body.products .section.section_content .main.full img.full_image {
    margin-left: -45px;
}

.snippet.full {
	position: relative;
	width: 800px;
	border: none;
	padding: 0;
	margin: 0 -45px 0 -172px; /* center it */
}

.section.section_content .main.wide {
	width: auto;
	float: none;
	border: none;
	padding: 0;
}

.section_header {
	position: relative;
	height: 85px;
}

body.home .section_header { height: auto; }

.section_header h1 {
	position: absolute;
	bottom: 20px;
	line-height: 1em;
}

.section_header .breadcrumbs {
	position: absolute;
	top: 20px;
	font-size: 0.8em;
}


#footer {
	clear: both;
	position: relative;
	margin: 0 -15px;
}

body.home #footer {
	margin-bottom: -76px;
	background: transparent url(../images/design/bg_footer.png) 50% 10px no-repeat;
}

#footer_inner {
	text-align: center;
	padding: 35px 0 20px 0;
	font-size: 0.6em;
	color: #707070;
}

#footer a { border: none; }
img#footer_plane_logo {
	position:relative;
	left:0;
	top:3px;
}
#footer_inner p {
	margin: 0;
}

div#snip_custom_solution {
	margin-left: auto;
	margin-right: auto;
	display: block;
}

h3#snip_headline {
	text-align:left;
	color:#4b95d1;
}


/* ----------------
	PAGE STRUCTURE ELEMENTS
    ------------- */
#logo {
	width: 133px;
	height: 99px;
	display: block;
	background: url(../images/design/logo_small.png) 0 0 no-repeat;
	position: absolute;
	top: 34px;
	left: 35px;
	margin: 0;
	padding: 0;
	font-size: 12px;
	z-index: 999;
}
	#logo a {
		width: 133px;
		height: 99px;
		display: block;
		text-indent: -9999px;
		border: none;
	}
	
body.home #logo {
	top: -50px;
	left: 323px;
	width: 178px;
	height: 149px;
	background-image: url(../images/design/logo_large.png);
}
	body.home #logo a {
		width: 178px;
		height: 149px;
	}
	
	
ul.features {
}

ul.features li {
	position: relative;
	float: left;
	width: 172px;
	padding-left: 4px;
	background: url(../images/design/divider_grey_fade.gif) 0 50% no-repeat;
}
	
ul.features li:first-child {
	width: 176px; 
	padding-left: 0;
	background: 0; 
}

ul.features h2 {
	color: #999;
	font-size: 11px;
	font-weight: bold;
	text-transform: uppercase;
	text-align: center;
}

.summaries {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 99;
}

.summaries .summary { 
	position: absolute;
	display: none;
	top: 0;
	width: 540px;
	z-index: 99;
}

/*ul.feature li:hover .summary { display: block; }*/

ul.summaries li p {
	font-weight: bold;
	font-size: 1.25em;
	color: #000;
	margin: 30px;
}

ul.summaries li.summary1 { left: 190px; }
ul.summaries li.summary2 { left: 350px; width: 360px; }
ul.summaries li.summary3 { left: 0; width: 360px; }
ul.summaries li.summary4 { left: 0; width: 540px; }

ul.features .overlay {
	position: absolute;
	display: none;
	background: url(../images/design/overlay_white.png);
	width: 184px;
	height: 150px;
	z-index: 98;
	margin: 0 -4px;
}

ul.features li.show_overlay .overlay { display: block; }

ul.features a, ul.features a:link, ul.features a:visited{ border: 0px; }

.snippet {
	position: relative;
	padding: 30px 0;
	text-align: center;
}

body.home .snippet {
	padding: 20px;
	margin-top: 20px;
	background: url(../images/design/bg_product_selector.jpg) 50% 0 no-repeat;
}

.snippet a { border: none; }

.snippet .top,
.snippet .bottom {
	position: absolute;
	left: 0;
	width: 100%;
	height: 18px;
	background:  url(../images/design/product_selector_shadow_internal_top.png) 50% 0 no-repeat;
}

.snippet .top { top: 0; }
.snippet .bottom { bottom: 0; background-image: url(../images/design/product_selector_shadow_internal_bottom.png); }

body.home .snippet .top {
	background:  url(../images/design/product_selector_shadow_top.png) 50% 0 no-repeat;
}

body.home .snippet .bottom {
	bottom: 0;
	background-image: url(../images/design/product_selector_shadow_bottom.png);
}

.snippet.product_selector { text-align: left; }


.product_selector .button {
	float: right;
	margin: 5px 0 0 20px;
	width: 115px;
	height: 77px;
	text-indent: -9999px;
	border: none;
	background:  url(../images/design/btn_product_selector.gif) 0 0 no-repeat;
}

.product_selector .button:hover {
	background-position: 0 -77px;
}

.section_content .main .wide {
	margin-left: -130px;
}

.slideshow {
	margin: 0 -25px;
	width:760px;
	height:119px;
	overflow:hidden;
}

.selector_results { margin: 1em 0; }
.selector_results span { display: -moz-inline-block; display: inline-block; padding-right: 2em;}
.selector_results b { color: #4b95d1; }

a.product_box {
	position: relative;
	width: 175px;
	height: 195px;
	display: block;
	float: left;
	border: none;
	text-align: center;
	background: url(../images/design/bg_product_box.jpg) 50% 0 no-repeat;
}

a.product_box:hover {
	background-position: 50% -195px;
}

a.product_box .info {
	position: absolute;
	bottom: 15px;
	left: 0;
	width: 115px;
	height: 50px;
	margin: 0 20px;
	padding: 10px;
	border-top: 1px solid #000;
}

a.product_box .image {
	position: absolute;
	top: 15px;
	left: 0;
	width: 135px;
	height: 90px;
	margin: 0 20px;
	background-position: 50% 50%;
	background-repeat: no-repeat;
}


.product_view .image {
	float: left;
	width: 275px;
	text-align: center;
}

.product_view .info {
	float: right;
	width: 295px;
}

.product_related {
	margin: 2em 0;
}

.product_related h3 {
	padding: 0.5em 0;
	letter-spacing: 0;
	border-top: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
}

.section_content .main .product_view ul.product_details {
	list-style: none;
	margin: 0;
	padding: 0;
}

.section_content .main .product_view ul.product_details li {
	padding: 5px;
	margin: 0;
}

.product_view ul.product_details li.odd {
	background-color: #f1f1f1;
}

.section_content .main .product_view ul.product_details ul li { 
	margin: 0; 
	padding: 0;
}

.inquiry_list {
	padding-top: 24px;
}


.frame {
	display: inline-block;
    display: -moz-inline-block;
	position: relative;
	overflow: hidden;
}

.frame.hollow {
	width: 173px;
	height: 135px;
	background-position: 50% 70%;
	background-repeat: no-repeat;
}

.frame.hollow h3,
.frame.blue h3 {
	position: absolute;
	top: 20px;
	left: 0;
	width: 143px;
	padding: 0 15px;
	line-height: 1em;
	text-align: center;
	font-size: 0.8em;
	letter-spacing: 0;
	color: #000;
	z-index: 22;
}

.frame.blue h3 {
	top: 30px;
	left: 0;
	width: 135px;
	padding: 0 15px;
	font-size: 1.4em;
	color: #fff;
	text-transform: none;
	font-weight: normal;
}

.frame.blue p {
	color: #66ccff;
	text-transform: uppercase;
	position: absolute;
	bottom: 10px;
	left: 0;
	width: 135px;
	padding: 0 15px;
	text-align: center;
	z-index: 22;
	font-size: 0.8em;
}

.frame.hollow img.frame_image,
.frame.blue img.frame_image {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 21;
}

.frame.hollow img.background_image,
.frame.blue img.background_image {
	position: absolute;
	top: 38px;
	left: 15px;
	z-index: 20;
}

.frame.blue img.background_image {
	top: 10px;
	left: 0;
}

.frame.blue {
	width: 164px;
	height: 109px;
	background-position: 0 0;
	background-repeat: no-repeat;
}


a.logo_webster {
	display: -moz-inline-block;
	display: inline-block;
	width: 24px;
	height: 17px;
	border: none;
	text-indent: -9999px;
	line-height:16px;
	vertical-align: 14%;
	background: url(../images/design/logo_webster.gif) 0 0 no-repeat;
	position:relative;
	left:0px;
	top:2px;
}

a.logo_webster:hover {
	background-position: 0 -17px;
}


/* ----------------
	NAVIGATION
    ------------- */
#nav_main {
	position: absolute;
	left: 170px;
	top: 35px;
	width: 640px;
	height: 30px;
	background-image: url(../images/design/nav_main_internal.gif);
	z-index: 990;
}

body.home #nav_main {
	left: 18px;
	top: 20px;
	width: 800px;
	height: 30px;
	background-image: url(../images/design/nav_main.gif);
}

#nav_main li {
	position: absolute;
	left: 0;
	top: 0;
	overflow: visible;
}

#nav_main li a {
	display: block;
	height: 30px;
	text-indent: -9999px;
	background-image: url(../images/design/nav_main_internal.gif);
	border: none;
}

body.home #nav_main li a {
	background-image: url(../images/design/nav_main.gif);
}

#nav_main li.nav_1 { left: 0; width: 106px; }
#nav_main li.nav_2 { left: 106px; width: 117px; }
#nav_main li.nav_3 { left: 223px; width: 99px; }
#nav_main li.nav_4 { left: 322px; width: 110px; }
#nav_main li.nav_5 { left: 432px; width: 77px; }
#nav_main li.nav_6 { left: 509px; width: 100px; }

#nav_main li.nav_1 a { background-position: 0 0 }
#nav_main li.nav_2 a { background-position: -106px 0 }
#nav_main li.nav_3 a { background-position: -223px 0 }
#nav_main li.nav_4 a { background-position: -322px 0 }
#nav_main li.nav_5 a { background-position: -432px 0 }
#nav_main li.nav_6 a { background-position: -509px 0 }

#nav_main li.nav_1 a:hover { background-position: 0 -30px }
#nav_main li.nav_2 a:hover { background-position: -106px -30px }
#nav_main li.nav_3 a:hover { background-position: -223px -30px }
#nav_main li.nav_4 a:hover { background-position: -322px -30px }
#nav_main li.nav_5 a:hover { background-position: -432px -30px }
#nav_main li.nav_6 a:hover { background-position: -509px -30px }


body.home #nav_main li.nav_1 { left: 0; width: 118px; }
body.home #nav_main li.nav_2 { left: 118px; width: 114px; }
body.home #nav_main li.nav_3 { left: 232px; width: 98px; }
body.home #nav_main li.nav_4 { left: 478px; width: 112px; }
body.home #nav_main li.nav_5 { left: 590px; width: 82px; }
body.home #nav_main li.nav_6 { left: 672px; width: 128px; }

body.home #nav_main li.nav_1 a { background-position: 0 0 }
body.home #nav_main li.nav_2 a { background-position: -118px 0 }
body.home #nav_main li.nav_3 a { background-position: -232px 0 }
body.home #nav_main li.nav_4 a { background-position: -478px 0 }
body.home #nav_main li.nav_5 a { background-position: -590px 0 }
body.home #nav_main li.nav_6 a { background-position: -672px 0 }

body.home #nav_main li.nav_1 a:hover { background-position: 0 -30px }
body.home #nav_main li.nav_2 a:hover { background-position: -118px -30px }
body.home #nav_main li.nav_3 a:hover { background-position: -232px -30px }
body.home #nav_main li.nav_4 a:hover { background-position: -478px -30px }
body.home #nav_main li.nav_5 a:hover { background-position: -590px -30px }
body.home #nav_main li.nav_6 a:hover { background-position: -672px -30px }


#nav_main li .nav_main_sub {
	position: absolute;
	top: 30px;
	left: 0;
	width: 170px;
	display: none;
	background: url(../images/design/bg_overlay_nav_sub.png) 0 100% no-repeat;
}

#nav_main li ul {
	padding: 5px 0;
}

#nav_main li ul li {
	position: relative;
	height: auto;
}

#nav_main li ul li a,
body.home #nav_main li ul li a {
	text-indent: 0;
	background: 0;
	display: block;
	text-align: center;
	color: #fff;
	height: auto;
	padding: 3px 0;
	background: none;
}

#nav_main li ul li a:hover,
body.home #nav_main li ul li a:hover { color: #4b95d1; }

/*#nav_main li:hover ul { 
	display: block;
}*/


.section_content .nav ul li {
	font-size: 0.8em;
	line-height: 1.2em;
	margin-bottom: 0.5em;
}
.section_content .nav ul a {
	color: #4b95d1;
	border: none;
}
.section_content .nav ul a:hover {
	color: #000;
}

	


/* ----------------
	TYPEOGRAPHY
    ------------- */
.nav.contact h5 {
	margin-bottom: 0;
}

.breadcrumbs a { border: none; }

.summary, .summary a, .summary a:link, .summary a:visited {
	color: #4b95d1;
}

.summary p {
	font-size: 1.6em;
	line-height: 1.2em;
	margin-bottom:0px;
}

.section_content .main ul {
	list-style: disc;
	margin: 1em 2em;
}

.section_content .main ul li {
	line-height: 1.2em;
	margin-bottom: 0.5em;
}

.section_content .main ul.listing { 
	list-style: none; 
	margin: 0; 
}

.listing li {
	padding: 0;
	border-bottom: 1px solid #ccc;
    background: url(../images/design/arrow_blue_right.gif) 0 1.25em no-repeat;
}
body.news .listing li { background: none; }

.section_content .main ul.listing li { margin: 0; }
.listing li.active { background-image: url(../images/design/arrow_blue_down.gif); } 

.listing a.title {
	display: block;
	padding: 1em 0 1em 1em;
	border: none;
}

.listing a.title h4 {
	float: left;
	color: #4b95d1;
	font-size: 1em;
	text-transform: none;
	letter-spacing: 0;
}

.listing .date {
	float: left;
	width: 115px;
	color: #000;
	font-weight: bold;
	text-transform: uppercase;
	font-size: 0.8em;
	padding-left: 12px;
}

.listing .body {
	display: none;
}

.listing img.float_right { margin: 1.5em 0 1.5em 1.5em; }
.listing img.float_left { margin: 1.5em 1.5em 1.5em 0; }

#content .news li, #content .news li.active {
    background: none;
    padding: 0;
	border-bottom: 1px solid #ccc;
}   

.news a.title {    
    border: medium none;      
    display: block;
    padding: 1em 0;
}

.news .date {
    padding-left: 0px;
}

.news .body{
    display: block;
}
.section_content .main .nav_categories {
	list-style: none;
	margin: 0;
}

.nav_categories li {
	float: left;
	width: 255px;
	padding: 2px 0;
}

.snippet.product_selector .snippet_inner h2 {
	margin-bottom: 0.5em;
}

.nav_categories_buttons {
	float: right;
	width: 200px;
	text-align: center;
}

.nav_categories label {
	display: block;
/*	width: 80px;*/
	float: left;
}


.buttons {
	margin-top: 2em;
}

.buttons a {
	background-color: #F9F2DF;
	border: 1px solid #F1DFAF;
	padding: 3px 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	-moz-box-shadow: 1px 1px 1px #999;
	box-shadow: 1px 1px 1px #999;
}

.buttons a:hover {
	background-color: #F1DFAF;
}





	
		

/* ----------------
	MISC
    ------------- */
.float_left {float: left;}
.float_right {float: right;}
.align_left {text-align: left;}
.align_right {text-align: right;}
.align_center {text-align: center;}
.clear {clear: both;}


.w_05 { width: 5%; }
.w_10 { width: 10%; }
.w_20 { width: 20%; }
.w_25 { width: 25%; }
.w_33 { width: 33%; }
.w_40 { width: 40%; }
.w_50 { width: 50%; }
.w_60 { width: 60%; }
.w_66 { width: 66%; }
.w_80 { width: 80%; }
.w_100 { width: 100%; }


/* corner divs are added via JS */
.corners { position: relative; }
.corners .tl,
.corners .tr,
.corners .bl,
.corners .br { position: absolute; z-index: 99; width: 6px; height: 6px; background: url(../images/design/corners.png) 0 0 no-repeat; }

.corners .tl { top: 0; left: 0; }
.corners .tr { top: 0; right: 0; background-position: -6px 0; }
.corners .bl { bottom: 0; left: 0; background-position: 0 -6px; }
.corners .br { bottom: 0; right: 0; background-position: -6px -6px; }


a.ee_edit_icon {
	position: relative;
	float: left;
	margin-left: -25px;
	border: none;
	z-index: 999;
}

.news_listing a.ee_edit_icon { margin-top: 1em; }

/* ----------------
	CLEAR FLOATS WITHOUT EXTRA HTML MARKUP
	add this class to the element that needs to be cleared, or add the element's class or id to the declaration below
    ------------- */ 
.clear_fix:after,
.section:after,
#wrapper_inner:after { 
	content: "."; 
	display: block; 
	height: 0; 
	clear: both; 
	visibility: hidden; 
}



/* ----------------
	FORM ELEMENTS
	Label widths are set via jQuery autoWidth, unless you want to set them manually.
    ------------- */
fieldset {clear: both;}
legend {padding: 0 0 1.286em; font-size: 1.167em; font-weight: 700;}
fieldset fieldset legend {padding: 0 0 1.5em; font-size: 1em;}
* html legend {margin-left: -7px;}
*+html legend {margin-left: -7px;}

form .field, form .buttons, form ul.fields li {clear: both; margin: 0 0 1em;}
form .field label, form ul.fields label {display: block; margin-right: 1em;}
form ul.fields { margin: 0; padding: 0; }
form ul.fields li {list-style-type: none;}
form ul.inline li, form ul.inline label {display: inline;}
form ul.inline li {padding: 0 .75em 0 0;}

input.radio, input.checkbox {margin: 3px; vertical-align: bottom;}
label, button, input.submit, input.image {cursor: pointer;}
* html input.radio, * html input.checkbox {margin: 0; vertical-align: middle;}
*+html input.radio, *+html input.checkbox {margin: 0; vertical-align: middle;}

textarea {overflow: auto;}
/*input.text, input.password, textarea, select {margin: 0; font: 1em/1.3 Helvetica, Arial, sans-serif; vertical-align: bottom;}
input.text, input.password, textarea {border: 1px solid #444; border-bottom-color: #666; border-right-color: #666; padding: 2px;}*/

* html button {margin: 0 .34em 0 0;}
*+html button {margin: 0 .34em 0 0;}

form.horizontal .field, form.horizontal ul.fields li {  }
form.horizontal .field label, form.horizontal ul.fields label  { display: inline; float: left; }


.section_content .main ul.fields {
	margin: 0;
}

form ul.fields input.text_input {
	padding: 3px;
	width: 160px;
}

form ul.fields textarea.text_area {
	padding: 3px;
	width: 260px;
	height: 120px;
}

form ul.fields input.submit {
	margin-left: 85px;
}

form ul.fields label {
	text-align: right;
}

div#selector_line_links li {
	width:205px;
	text-align:center;
	float:left;
	padding-top:41px;
}

div#selector_line_links li#middle_link {
	padding-left:47px;
	padding-right:47px;
}

div#selector_line_links li a {
	border:none;
	text-decoration:none;
	text-transform:uppercase;
	font-size:14px;
}

div#selector_line_links li img {
	margin-bottom:5px;
}   

/*div#selector_line_links .slideshow {
    visibility: hidden;
}*/

div.body li {
	border:none;
	background-image:none;
}