/*
* Skeleton V1.2
* Copyright 2011, Dave Gamache
* www.getskeleton.com
* Free to use under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
* 6/20/2012
*/

@import url('menu.css');
@import url('menu_snap.css');
@import url('flex.css');

/* Table of Content
==================================================
	#Site Styles
	#Page Styles
	#Media Queries
	#Font-Face */

/* #Site Styles
================================================== */

.required:after { content: "**"; color: red; }
label.error { display: inline; color: red;}
label.box-label { height: 0; }

.no-video { display: initial; margin: 0 auto !important; float: left; width: 100%; height: auto;}
.video .no-video { display: none; }

/* hide other slides until flex slider loads */

ul.slides li { opacity: 0; }
ul.slides li:first { opacity: 1; }

@media only screen and (max-width: 767px) {

}

.page { min-height: 300px; }

.logged-out {
	height: 100%;
	width: 100%;
	position: absolute;
	top: 0;
	left: 0;
}
.logged-out div{
	margin-top: 200px;
	text-align: center;
	font-family: 'bebas_neueregular';
	font-size: 28px;
	line-height: 40px;
}

[data-login="note"] {
	position: absolute;
	width: 100%;
	z-index: 1;
}

#usa {
	clear: both;
	margin-top: -20px;        /* Size of fixed header */
	padding-bottom: 20px; 
	display: block; 
}

.disclaimer-bold { color: #990000 }


.ui-accordion .ui-accordion-content {
	padding: 1em 1em !important;
}

.ui-tabs-nav {
	border: 0 !important;
}

.ui-tabs-nav.ui-widget-header { background: none; }

.ui-tabs .ui-tabs-nav { padding: 0 !important; }

.tabs.ui-widget-content { 
	border: 0;
	padding-top: 10px;
	border-top: 4px solid #666;
	border-bottom: 4px solid #666;
}

.ui-tabs .ui-tabs-panel { padding: 1em 0 !important; }

.ui-tabs .ui-tabs-nav li {
	border: 1px solid #aaa !important;
	-webkit-border-radius: 5px !important;
	-moz-border-radius: 5px !important;
	border-radius: 5px !important;
}

.ui-tabs .ui-tabs-nav li.ui-tabs-active { 
	margin-bottom: 0 !important; 
	padding-bottom: 0 !important;
	background: #666;
	border-color: #666 !important;
}

.ui-tabs .ui-tabs-nav li.ui-tabs-active a { color: #fff; }

body { }

#top-link { 
	display: none;
	position: fixed; 
	bottom: 0; 
	right: 25%; 
	background: #333;
	background: rgba(0,0,0,0.6);
	-webkit-border-top-left-radius: 10px;
	-webkit-border-top-right-radius: 10px;
	-moz-border-radius-topleft: 10px;
	-moz-border-radius-topright: 10px;
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
}

#top-link a { 
	display: block;
	color: #fff; 
	padding: 5px 5px 10px; 
	font-size: 12px;
}

.float-right { float: right !important; }
.float-left { float: left !important; }

.float-right.padding { margin: 0 0 20px 20px; }
.float-left.padding { margin:  0 20px 20px 0; }

[data-login] { display: none; }
[data-login="message"] { display: block; } 

#message-box {
	position: fixed;
	top: 0;
	height: 20px;
	background: yellow;
	z-index: 9100;
	width: 100%;
	padding: 10px 0;
	display: none;
}

#message { text-align: center; padding: 0; }

.triangle-wrap {
	position: absolute;
	top: 0;
	right: 0;
	width: 50px;
	height: 50px;
	
}
.triangle {
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 0 50px 50px 0;
	border-color: transparent #00AEEF transparent transparent;
}

.triangle-wrap .text { 
	float: right;
	margin: 7px 7px 0 0;
	color: white;
	font-size: 20px;
}

.badge {
	background: #0099ff; 
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px;
	color: #fff;
	display: inline-block;
	font-size: 16px;
	font-weight: normal;
	text-decoration: none;
	/*cursor: pointer;*/
	margin-bottom: 20px;
	margin-right: 2px;
	line-height: normal;
	padding: 2px 4px;
	font-family: "bebas_neueregular", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif; 
}

.badge.energystar { background: #0099ff; }
.badge.pvcfree { background: #67A844; } 
.badge.nfrc { background: #F15522; } 
.badge.aama { background: #E3A824; } 


/* #Page Styles
================================================== */
#header { 
	background: #00AEEF;
	height: 70px;
	overflow: none;
	position: fixed;
	z-index: 9000;
	width: 100%;
}

#pageHeader {
	 position: fixed; 
	 width: 100%;
	 z-index: 10;
}

#header, #header .container, #header form,  #header input {
	margin-bottom: 0;
}

.button-home, .button-home a,
a.button-home,
.button-primary, .button-primary a,
a.button-primary  { background: #00AEEF; color: #fff; border-color: #fff; margin-bottom: 10px; }

.button-home, .button-home a,
a.button-home  {
	background: none;
	background: rgba(0,0,0,0.5)
}

.login-button {
	background: none !important;
	font-size: 11px !important; 
	padding:3px 5px !important;
	color: #efefef !important;
	border-color: #efefef !important;
}

.login-button:hover {
	background: #888 !important;
}

.page { padding-top: 70px; }
.page.padding { padding-top: 100px; }

#logo { overflow: none; }

.play-thumb { position: relative; }
.play-image { max-width: 100%;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
}

.play-thumb:hover .play-icon { background: url('images/play-icon.png') 50% 50% no-repeat; }

.play-thumb .play-icon {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: url('images/play-icon-30.png') 50% 50% no-repeat;
}


/* backgrounds */

.shadow-drop {
-webkit-box-shadow: 0px 5px 15px 0px #696868;
-moz-box-shadow: 0px 5px 15px 0px #696868;
box-shadow: 0px 5px 15px 0px #696868;
}

.shadow-inner {
	-moz-box-shadow:    	inset  0  15px 15px -15px #696868, 
									inset  0 -15px 15px -15px #696868;
    -webkit-box-shadow: 	inset  0  15px 15px -15px #696868, 
									inset  0 -15px 15px -15px #696868;
     box-shadow:       		inset  0  15px 15px -15px #696868, 
									inset  0 -15px 15px -15px #696868;
}

div { background: top center repeat; }

.bg-blue { background-color: #9BD7F7; }
.bg-yellow { background-color: #FFFACC; }

.bg-aluminum-dark { background-image: url(textures/brushed_alu_dark.png); }
.bg-bedge { /* background-image: url(textures/bedge_grunge.png); */ background: #DAD6CE; }
.bg-brick { background-image: url(textures/brickwall.png); } 
.bg-cloth { background-image: url(textures/roughcloth.png); }
.bg-fabric { background-image: url(textures/nasty_fabric.png); }
.bg-farmer { background-image: url(textures/farmer.png); }
.bg-green { background-image: url(textures/green_cup.png); }
.bg-grid { background-image: url(textures/wavegrid.png); }
.bg-grey-wash { background-image: url(textures/grey_wash_wall.png); }
.bg-honeycomb { background-image: url(textures/honey_im_subtle.png); }
.bg-husk { background-image: url(textures/husk.png); }
.bg-lines { background-image: url(textures/diagonal-noise.png); }
.bg-lines-light { background-image: url(textures/light_noise_diagonal.png); }
.bg-lines-straight { background-image: url(textures/shl.png); }
.bg-notebook  { background-image: url(textures/notebook.png); }
.bg-paper { background-image: url(textures/paper.png); }
.bg-paper-texture { background-image: url(textures/textured_paper.png); }
.bg-sos { background-image: url(textures/sos.png); }
.bg-wood { background-image: url(textures/retina_wood.png); }
.bg-wood-dark { background-image: url(textures/dark_wood.png); }

.bg-333 { background: #333;  }
.bg-666 { background: #666;  }
.bg-gray { background: #d9d9d9; }
.bg-tan { background: #ECEAE6; }
.bg-light-gray { background: #F5F5F5; }
.bg-green { background: #c5e6c5; }

.bg-dark { color: #cdcdcd; }
.bg-dark h1, .bg-dark h2, .bg-dark h3, .bg-dark h4, .bg-dark h5 { color: #eee; }
.bg-dark a { color: #fff; font-weight: bold; }
.bg-dark .button{ background: #66CCFF; border-color: #66CCFF}

.bg-dark .button:hover { color: #fff; background: #0099ff; border-color: #0099ff;}

.bg-blue a { color: #0267FF; }


/* icons */
.doc { background:url(images/word-small.gif) top left no-repeat; padding-left: 15px; font-size: 11px; }
.pdf { background:url(images/pdf-small.gif) top left no-repeat; padding-left: 15px; font-size: 11px; }
.dwg { background:url(images/dwg-small.gif) top left no-repeat; padding-left: 15px; font-size: 11px; }


/* leader lists */
ul.leaders li { clear: both; }

ul.leaders li span:first-child {
	float: left;
	padding: 0 .4em 0 0;
	margin: 0;
}
ul.leaders li span + span {
	float: right;
	padding: 0 0 0 .4em;
	margin: 0;
}

ul.leaders li:after {
	content: "";
	display: block;
	overflow: hidden;
	height: 1em;
	border-bottom: 1px dotted;
}

/* Railing Visualizer */
		table.rail-options tr,
		table.rail-options tr:hover {
			background: none;
		}

		table.rail-options tr td:first-child { 
			text-align: right;
			padding: 3px 5px;
		}
		table.rail-options tr td:last-child {
			text-align: left;
			padding: 3px 5px;
		}

		.config-photos {display: none;}

/* MASONRY */
.grid {}
.grid-item {}
.grid-pad .grid-item {margin-bottom: 30px;}

/* #Media Queries
================================================== */

	/* full desktop (devices and browsers) */
	@media only screen and (min-width: 960px) {}
	
	/* Smaller than standard 960 (devices and browsers) */
	@media only screen and (max-width: 959px) {}

	/* Tablet Portrait size to standard 960 (devices and browsers) */
	/* Note: Design for a width of 768px */
	@media only screen and (min-width: 768px) and (max-width: 959px) {}

	/* All Mobile Sizes (devices and browser) */
	/* Note: Design for a width of 320px */
	@media only screen and (max-width: 767px) {
		#header { 
			height: 105px;
			position: relative;
			width: 100%;
		}

		#pageHeader {
			position: relative;
			width: 100%;
		}
		
		.headerPad { display: none; }

		.page { padding-top: 0px; }
		
		.page .columns { margin-bottom: 50px; }

		.mobile-no { display: none !important; }
	}

	@media only screen and (min-width: 767px) { 
		.mobile-only { display: none !important; }
	}

	/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
	/* Note: Design for a width of 480px */
	@media only screen and (min-width: 480px) and (max-width: 767px) { }

	/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
	/* Note: Design for a width of 320px */
	@media only screen and (max-width: 479px) { }


/* #Font-Face
================================================== */
/* 	This is the proper syntax for an @font-face file
		Just create a "fonts" folder at the root,
		copy your FontName into code below and remove
		comment brackets */

/*	@font-face {
	    font-family: 'FontName';
	    src: url('../fonts/FontName.eot');
	    src: url('../fonts/FontName.eot?iefix') format('eot'),
	         url('../fonts/FontName.woff') format('woff'),
	         url('../fonts/FontName.ttf') format('truetype'),
	         url('../fonts/FontName.svg#webfontZam02nTh') format('svg');
	    font-weight: normal;
	    font-style: normal; }
*/