/* COPYRIGHT © 2010 BRIAN K MEDIA & DESIGN ALL RIGHTS RESERVED.  
* Filename: shade-styles.css
* Description: Main CSS styles
*/


/* _reset
----------------------------------------------------------------------- */
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, code, del, dfn, em, img, q, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, dialog, figure, footer, header, hgroup, nav, section {margin:0;padding:0;border:0;font-weight:inherit;font-style:inherit;font-size:100%;font-family:inherit;vertical-align:baseline;}
article, aside, dialog, figure, footer, header, hgroup, nav, section {display:block;}
body {line-height:1.5;}
table {border-collapse:separate;border-spacing:0;}
caption, th, td {text-align:left;font-weight:normal;}
table, td, th {vertical-align:middle;}
blockquote:before, blockquote:after, q:before, q:after {content:"";}
blockquote, q {quotes:"" "";}
a img {border:none;}


/* _typography
----------------------------------------------------------------------- */
html {width:100%;height:100%;font-size:100.01%;font-family:Myriad Web, Arial, Helvetica, sans-serif;}
body {height:100%;font-size:14px;line-height:15px;color:#000;background:#144389;}

h1, h2, h3, h4, h5, h6 {
margin: inherit;
font-size: inherit;
line-height: inherit;
font-weight: inherit;
}

h1 {
font-size: 2em;
color: #fff;
position: relative;
top: -450px;
left: 30px;
font-style: italic;
font-weight: bold;
}

p .b{
font-weight: bold;
}

.h1 {
padding-left:12px;
margin:0 0 19px 0;
font-size: 34px;
line-height: 50px;
color: #00f;
font-weight:bold;
text-transform:uppercase;
}

.h2 {
font-size: 21px;
}

.h3 {
padding: 0 0 0 13px;
margin:0 0 6px 0;
font-size: 16px;
line-height: 22px;
text-transform: uppercase;
color: #fff;
display: block;
cursor:default;
background:url('../img/h3.png') repeat-x 0 0;
}

.h4 {
font-size: 1.2em;
line-height: 1.25;
}

.h5 {
font-size: 1em;
font-weight: bold;
margin: 0;
}

h6 {
font-size: .9em;
font-weight: bold;
margin: 0;
position: relative;
bottom: 0px;
left: 345px;
color: #fff;
}

p {margin:0 0 15px;}
a:link {color: #66f;}
a:visited {color: #66f;}
a:active {color: #66f;}
a:hover {color: #f00;text-decoration: underline;}


blockquote {margin:25px;color:#666;font-style:italic;}
strong {font-weight:bold;}
em, dfn {font-style:italic;}
dfn {font-weight:bold;}
sup, sub {line-height:0;}
abbr, acronym {border-bottom:1px dotted #666;cursor:help;}
address {margin:0 0 1.5em;font-style:italic;}
del {color:#666;}
pre {margin:1.5em 0;white-space:pre;}
pre, code, tt {font:1em 'andale mono', 'lucida console', monospace;line-height:1.5;}

li ul, li ol {margin:0;}
ul, ol {margin:0 0 15px 0;padding-left:3.333em;}
ul {list-style-type:disc;}
ol {list-style-type:decimal;}
dl {margin:0 0 15px 0;}
dl dt {font-weight:bold;}
dd {margin-left:25px;}
hr {background:#ddd;color:#ddd;clear:both;float:none;width:100%;height:0.214em;margin:0 0 1.285em;border:none;}

table {margin-bottom:1.4em;width:100%;}
th {font-weight:bold;}
thead th {background:#c3d9ff;}
th, td, caption {padding:4px 10px 4px 5px;}
tr.even td {background:#e5ecf9;}
tfoot {font-style:italic;}
caption {background:#eee;}


/* _forms
----------------------------------------------------------------------- */
fieldset {padding:1.4em;margin:0 0 1.5em 0;border:1px solid #ccc;}
legend {font-weight:bold;font-size:1.2em;}
input.text, input.title, input.submit, select {font-family:Arial, Helvetica, sans-serif;font-size:100%;}
input.submit {cursor:pointer;}
input.text, input.title {width:302px;padding:4px;color:#777;}
input.title {font-size:1.5em;}
textarea {width:392px;height:252px;padding:4px;}
input.checkbox, input.radio {width:14px;height:14px;padding:0;margin:0 0.3em 0 0;position:relative;top:0.12em;}
form.inline {line-height:3;}
form.inline p {margin-bottom:0;}
.error, .notice, .success {padding:.8em;margin-bottom:1em;border:2px solid #ddd;}
.error {background:#FBE3E4;color:#8a1f11;border-color:#FBC2C4;}
.notice {background:#FFF6BF;color:#514721;border-color:#FFD324;}
.success {background:#E6EFC2;color:#264409;border-color:#C6D880;}
.error a {color:#8a1f11;}
.notice a {color:#514721;}
.success a {color:#264409;}


/* _clear
 ----------------------------------------------------------------------- */
.clear, .clearfix:after, .container:after {
content: "\0020";
display: block;
height: 0;
clear: both;
visibility: hidden;
overflow: hidden;
}

/* _layout
 ----------------------------------------------------------------------- */
.container {
width: 960px;
min-height: 100%;
margin: 0 auto;
position: relative;
z-index:2;
background:#7da6c6 url('../img/container.png') repeat-y 0 0;
}
.clear, .clearfix:after, .container:after {
content: "\0020";
display: block;
height: 0;
clear: both;
visibility: hidden;
overflow: hidden;
}
.spacer {
width:100%;
height:37px;
overflow:hidden;
clear:both;
position:relative;
z-index:0;
}


/* _footer
 ----------------------------------------------------------------------- */
.footer {
width:960px;
height:32px;
border-top:5px solid #f00;
overflow:hidden;
position:absolute;
left:0;
bottom:0;
z-index:2;
color:#fff;
font-size:12px;
line-height:32px;
font-weight:bold;
letter-spacing:1px;
background:#3131c8 url('../img/footer.png') repeat-x 0 0;
}
.footer a {
color:#fff;
text-decoration:none;
}
.footer a:hover {
text-decoration:underline;
}
.footer .copyright {
margin:0;
display:block;
position:absolute;
top:0;
left:5px;
font-weight:bold;
cursor:default;
}
.footer .author {
margin:0;
display:block;
position:absolute;
top:0;
right:5px;
font-weight:bold;
cursor:default;
}


/* _header
 ----------------------------------------------------------------------- */
.header {
width:960px;
height:185px;
border-bottom:5px solid #f00;
position:relative;
top:0;
left:0;
color:#fff;
background:#33c url('../img/header.png') repeat-x 0 100%;
}

.header .pics {
width:100%;
padding:0;
margin:0;
border-bottom:5px solid #f00;
list-style:none;
overflow:hidden;
position:absolute;
top:0;left:0;
}
.header .pics li {
padding:0 2px;
float:left;
}
.header .pics img {
height:87px;
display:block;
}

.header .logo {
position:absolute;
top:92px;left:25px;
}
.header .phone {
position:absolute;
top:92px;left:536px;
}
.header .logo img {
display:block;
}

.header .mainmenu {
margin:0;
padding:0;
list-style:none;
overflow:hidden;
position:absolute;
right:0;bottom:0;
}
.header .mainmenu li {
width:140px;
height:40px;
padding:0;
float:left;
font-size:15px;
line-height:20px;
text-transform:uppercase;
text-align:center;
}
.header .mainmenu a {
width:140px;
height:20px;
padding-top:20px;
display:block;
text-decoration:none;
color:#000;
background:url('../img/mainmenu.png') no-repeat 0 0;
}
.header .mainmenu a:hover,
.header .mainmenu li.active a {
background-position:0 -40px;
}


/* _content
 ----------------------------------------------------------------------- */
.content {
width:100%;
min-height:667px;
position:relative;
background:url('../img/content.jpg') no-repeat 100% 0;
}
.content:after,
.left:after,
.right:after,
.space:after,
.space .in:after,
.left-col:after,
.right-col:after,
.gallery:after,
.products .product .bg:after {
content: "\0020";
display: block;
height: 0;
clear: both;
visibility: hidden;
overflow: hidden;
}
.left {
width:153px;
border-right:5px solid #f00;
float:left;
position:relative;
z-index:3;
color:#fff;
background:#03036b url('../img/left.png') no-repeat 0 100%;
min-height: 700px;
}
/* _lists ------------------------------------------------------ */

ul {
font-family:Myriad Web, Arial, Helvetica, sans-serif;
color: #00f;
line-height: 1.4em;
font-style: normal;
font-weight: bold;
font-size: 1.2em;
}

/* _contact-content ------------------------------------------------------ */
 
 .contact-left-col {
width:480px;
float:left;
}
.contact-content {
width:100%;
min-height:700px;
position:relative;
background:url('../img/content.jpg') no-repeat 100% 0; /* -- BG Image -- */
}
.contact-content:after,
.left:after,
.right:after,
.space:after,
.space .in:after,
.left-col:after,
.right-col:after,
.gallery:after,
.products .product .bg:after {
contact-content: "\0020";
display: block;
height: 0;
clear: both;
visibility: hidden;
overflow: hidden;
}
.contact-left {
width:153px;
border-right:0px solid #f00;
float:left;
position:relative;
z-index:3;
color:#fff;
background:#3333cc url('../img/left.png') no-repeat 0 100%; /* -- Left Column BG Image -- */
min-height: 700px;
}
.contact-container {
position: relative;
top: -150px;
}

/* end_contact-content -- */

.menu {
width:100%;
margin:0 0 15px 0;
padding:0;
list-style:none;
line-height:21px;
letter-spacing:1px;
}
.menu li {
padding:0;
}
.menu a {
padding:0 16px;
display:block;
color:#fff !important;
text-decoration:none;
}
.menu a:hover,
.menu li.active a {
color:#fff !important;
text-decoration:none;
background:red;
}

.shade,.versatube {
margin:0 0 30px 0;
}
.shade img,.versatube img {
margin:0 auto;
display:block;
}
.shade a,.versatube a {
outline:none;
}
.shade img {
width:150px;
height:123px;
}
.versatube img {
width:103px;
height:66px;
}

.video {
padding:4px 0 0 0;
margin:0 0 30px 0;
font-size:16px;
line-height:21px;
text-align:center;
cursor:default;
display:block;
}
.video .play {
width:62px;
height:62px;
display:block;
margin:7px auto;
background:url('../img/play.png') no-repeat 0 0;
}
.video .play:hover {
background-position:0 -62px;
}



.right {
width:730px;
padding:6px 30px 20px 40px;
float:left;
position:relative;
z-index:3;
}
.space {
width:730px;
position:relative;
z-index:5;
}
.space .top {
width:730px;
height:35px;
position:relative;
overflow:hidden;
background:url('../img/space-top.png') no-repeat 0 0;
}
.space .bottom {
width:730px;
height:40px;
position:relative;
overflow:hidden;
background:url('../img/space-bottom.png') no-repeat 0 0;
}
.space .in {
width:680px;
padding:72px 28px 0 22px;
background:url('../img/space-in.png') repeat-y 0 0;
}

.h1 img {
display:block;
}


.DIY {
padding:0 84px 3px 0;
margin:0 0 -6px 0;
overflow:hidden;
position:relative;
z-index:1;
}
.DIY img {
width:225px;
height:160px;
display:block;
float:right;
}

.bigpic {
position:absolute;
top:-104px;left:29px;
}
.bigpic img {
border:1px solid #2059aa;
display:block;
position:relative;
z-index:2;
-moz-box-shadow: -5px 5px 5px #333; /* Firefox */
-webkit-box-shadow: -5px 5px 5px #333; /* Safari, Chrome */
box-shadow: -5px 5px 5px #333; /* CSS3 */
}


.left-col {
width:480px;
float:left;
}
.right-col {
width:160px;
padding:0 0 0 13px;
border-left:4px solid #2d2dc1;
margin-top:120px;
float:right;
}

.gallery {
width:160px;
padding:15px 0 0 0;
margin:0;
list-style:none;
}
.gallery li {
width:160px;
margin:0 0 15px 0;
position:relative;
}
.gallery img {
width:160px;
height:100px;
display:block;
-moz-box-shadow: -3px 3px 3px #444; /* Firefox */
-webkit-box-shadow: -3px 3px 3px #444; /* Safari, Chrome */
box-shadow: -3px 3px 3px #444; /* CSS3 */
position:relative;
z-index:2;
}

.installers {
width:320px;
margin:0;
display:block;
font-size:16px;
line-height:17px;
font-weight:bold;
text-align:center;
color:blue;
cursor:default;
position:absolute;
top:16px;right:32px;
}
.installers img {
width:285px;
height:140px;
display:block;
position:relative;
top:18px;
left:34px;
}



.products-patio .bigpic {
top:-139px;
left:44px;
}
.products-patio .space .in {
padding-top:104px;
}



.products-carports {
padding-top:163px;
}
.products-carports .DIY {
position:absolute;
top:152px;right:-44px;
z-index:10;
}
.products-carports .DIY img {
width:170px;
height:121px;
}
.products-carports .bigpic {
top:-142px;
left:22px;
}
.products-carports .space .in {
padding-top:2px;
}
.products-carports .h1 {
width:520px;
padding-left:0;
margin-right:-50px;
position:relative;
}
.products-carports .installers {
width:190px;
position:absolute;
top:-138px;right:6px;
color:#fff;
}
.products-carports .installers img {
width:250px;
height:125px;
position:absolute;
top:31px;left:-213px;
}
.products-carports .right-col {
margin-top:92px;
}


.solution {
margin:0 0 44px 0;
font-size:17px;
line-height:19px;
font-style:italic;
letter-spacing:-1px;
}
.solution strong {
margin:0 0 3px 0;
display:block;
}
.solution ul {
padding:0 0 0 16px;
}

.sizes .title {
margin:0 0 5px 0;
text-align:center;
text-transform:uppercase;
cursor:default;
font-size:16px;
color:#66f;
}
.sizes table {
width:100%;
border-collapse:collapse;
color:#fff;
font-size:12px;
line-height:14px;
background:blue;
}
.sizes table th {
padding:12px 8px;
border:2px solid #fff;
vertical-align:top;
}
.sizes table td {
padding:12px 8px;
border:2px solid #fff;
vertical-align:top;
}



.products {
padding:40px 0;
}
.products .product {
min-height:106px;
padding:25px 0 15px 178px;
position:relative;
}
.products .product .pic {
margin:0;
display:block;
position:absolute;
top:23px;
left:0;
}
.products .product .pic img {
border:3px solid #000;
display:block;
}

.products .product .bg {
width:500px;
padding:12px 28px 0 15px;
background:url('../img/product-bg.png') no-repeat 0 0;
}
.products .product .bottom {
width:543px;
height:30px;
overflow:hidden;
position:relative;
z-index:1;
background:url('../img/product-bg-bottom.png') no-repeat 0 0;
}
.products .product p {
margin:0;
}
.products .product .details {
margin:0;
display:block;
position:absolute;
bottom:42px;right:35px;
z-index:5;
font-size:12px;
}
.products .product .details a {
color:#66f;
text-decoration:none;
}
.products .product .details a:hover {
color: #f00;
text-decoration:none;
}

.products .product .h2 {
margin:0 0 6px 0;
}

.products hr {
width:700px;
height:4px;
padding:0;
border:none;
margin:0 auto;
display:block;
overflow:hidden;
color:#1a1a99;
background:#1a1a99;
}
#contact {
	position: relative;
	top: 20px;
	left: 58px;
	width: 500px;
	min-height: 300px;
	padding: 10px 30px 10px 30px;
	border-top: 3px solid #ff1e00;
	border-right: 3px solid #ff1e00;
	border-bottom: 3px solid #ff1e00;
	border-left: 3px solid #ff1e00;
	background: #3300cc;
	z-index: 1000;
	margin-bottom: 30px;
}
#address {
	position: relative;
	padding: 0px 20px 10px 50px;
	font-size: 1.5em;
	color: #fff;
	line-height: 1.2em;
}
.wordset-garage {
	position: relative;
	top: -325px;
	left: 200px;
	font-size: .5em;
	color: #fff;
}
.wordset-carports {
	.wordset-garage;
	position: relative;
	top: -95px;
	left: -120px;
	font-size: .1em;
	color: #fff;
	z-index: -10;
}