@charset "utf-8";
/*
---------------------------------------------
| 											|
| 	1. External Includes					|
| 	2. General Style Rules					|
| 		2.1 Headings						|
| 		2.2 Lists							|
| 		2.3 Links							|
| 		2.4 Images                          |
| 		2.5 Tables	                        |
|		2.6 iframe   						|		
| 											|
| 	3. General Layout Rules					|
| 											|
| 	4. MastHead								|
| 		4.1 Logo							|
| 		4.2 Primary Navigation				|
| 		4.3	Banner							|
| 											|
| 	5. Page Content							|
| 		5.1 Primary Content					|
| 		5.2 Secondary Content				|
|			5.2.1	Secondary Navigation	|
| 											|
| 	6. Page Footer							|
| 											|
| 	7. Misc Rules							|
| 		7.8 Clearing						|
| 											|
---------------------------------------------
*/

/* 1. External Includes 
============================================================ */
/* Tripoli Typography Stylesheet and CSS Reset */
@import url('tripoli.simple.css');
@import url('lightbox.css');
/* font import */
/* Generated by Font Squirrel (http://www.fontsquirrel.com) */
@font-face {
	font-family: 'QlassikMediumRegular';
	src: url('../font/Qlassik_TB-webfont.eot');
	src: local('☺'), url('../font/Qlassik_TB-webfont.woff') format('woff'), url('../font/Qlassik_TB-webfont.ttf') format('truetype'), url('../font/Qlassik_TB-webfont.svg#webfontkkbjEnfA') format('svg');
	font-weight: normal;
	font-style: normal;
}

/* 2. General Style Rules	
============================================================ */

h1, h2, h3 { color:#A80F11; font-family:'QlassikMediumRegular'; font-size:3em; font-weight:normal; }
h4, h5, h6 { color:#ffffff; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:1.5em; margin:0 0 10px; }
#image-holder .promobox h3, #sidebar-holder .promobox h3 { margin:7px 0 10px; text-align:center; }
p { font-size:1.2em; font-family:Verdana, Arial, Helvetica, sans-serif; padding-bottom:10px; color:#FFFFFF; line-height:1.4em; }
#image-holder .promobox p, #sidebar-holder .promobox p { text-align:left; padding:0 5px; margin:0 0 10px; } 
#image-holder .promobox a.readmore, #sidebar-holder .promobox a.readmore { width:100px; height:30px; background: #a05853; /* Old browsers */
background: -moz-linear-gradient(top,  #a05853 0%, #a80f11 41%, #a80f11 56%, #a80f11 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a05853), color-stop(41%,#a80f11), color-stop(56%,#a80f11), color-stop(100%,#a80f11)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #a05853 0%,#a80f11 41%,#a80f11 56%,#a80f11 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #a05853 0%,#a80f11 41%,#a80f11 56%,#a80f11 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #a05853 0%,#a80f11 41%,#a80f11 56%,#a80f11 100%); /* IE10+ */
background: linear-gradient(top,  #a05853 0%,#a80f11 41%,#a80f11 56%,#a80f11 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a05853', endColorstr='#a80f11',GradientType=0 ); /* IE6-9 */
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;

 line-height:30px; margin:20px 0 0 180px; color:#ffffff; font-size:1.2em; display:block; text-decoration:none; }
#image-holder .promobox a.readmore:hover, #sidebar-holder .promobox a.readmore:hover { color:#000000; } 
hr { color:#FFFFFF; width:50%; height:0px; margin:10px 0 20px; border:1px solid #ffffff; outline:none; position:relative; left:0px; }
#content ul { margin:0 0 10px; }
#content li { font-size:1.2em; font-family:Verdana, Arial, Helvetica, sans-serif; color:#FFFFFF; line-height:1.4em; padding:0 0 0 30px; background:url(../images/Bullet.png) no-repeat 13px 3px; }
#intro ul li { margin-bottom: 0; }
form#contactForm { }
form#contactForm dl { }
form#contactForm dt { font-size:1.2em; font-family:Verdana, Arial, Helvetica, sans-serif; width:150px; float:left; margin:0 10px 0 0; line-height:30px; color: #fff; }
form#contactForm dd {  width:400px; float:left; margin:0 0 10px; }
form#contactForm dd input { font-size:1.2em; font-family:Verdana, Arial, Helvetica, sans-serif; height:30px; width:200px; outline:none; }
form#contactForm dd input#submit { margin:0 0 0 160px; width:100px; height:30px; background: #a05853; /* Old browsers */
background: -moz-linear-gradient(top,  #a05853 0%, #a80f11 41%, #a80f11 56%, #a80f11 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a05853), color-stop(41%,#a80f11), color-stop(56%,#a80f11), color-stop(100%,#a80f11)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #a05853 0%,#a80f11 41%,#a80f11 56%,#a80f11 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #a05853 0%,#a80f11 41%,#a80f11 56%,#a80f11 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #a05853 0%,#a80f11 41%,#a80f11 56%,#a80f11 100%); /* IE10+ */
background: linear-gradient(top,  #a05853 0%,#a80f11 41%,#a80f11 56%,#a80f11 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a05853', endColorstr='#a80f11',GradientType=0 ); /* IE6-9 */ 
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
line-height:30px; color:#ffffff; font-size:1.2em; display:block; border:none; }
form#contactForm dd input#submit:hover { color:#000000; }
form#contactForm dd textarea { font-size:1.2em; font-family:Verdana, Arial, Helvetica, sans-serif; height:90px; width:300px; outline:none;}
form#contactForm dt.error { color:#A80F11; }

/* 3. General Layout Rules
============================================================ */
html { background:#0E0E10; }
body { background:#0E0E10; color:#fff; }
#masthead-outer { background: url("../images/topshadow.jpg") repeat-x scroll 0 0 #ebebeb; }
#masthead { /* width:990px; */ margin:0 auto; height:180px; /* background:url(../images/brunwinlogo.jpg) no-repeat 0 0; */ position:relative; }
#nav-container { position:absolute; bottom:5px; right:0px; }
#content { /* width:935px;  */margin:0 auto; margin-top:20px; }
#left-col { /* width:600px; float:left; */ }
#right-col { /* width:300px; float:right; */}
.margin-right-col { float:right; }
#banner { /* width:915px; height:300px; */ margin:0 auto; background:#F9FAF5; padding:10px; }
#banner .slideshow { /* width:915px; height:300px; */ overflow:hidden; }
#footer { background:#FFFFFF; /* height:40px; */ width:100%; }

/* 4. MastHead
============================================================ */
#masthead .phone { color:#A80F11 !important; font-size:3em; letter-spacing:-3px; float:right; text-align:right; line-height:0.8em; padding-top:20px; }
#masthead .email { color:#333333 !important; font-size:0.6em; float:right; font-weight:bold; letter-spacing:0px; line-height:1.4em; }

/* 5. Navigation		
============================================================ */
#menu-wrap ul { font-size:1.4em; float:right; }
#menu-wrap li { display:inline; margin:0; }
#menu-wrap li a { text-decoration:none; color:#0E0E10; font-weight:bold; padding:7px 10px; -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; }
#nav li a:hover, #nav li a.active { color:#ffffff; background:#0E0E10; }
#menu-wrap {
    margin-left: 112.4px;
    margin-top: 41px;
	}

#menu-wrap ul {
	list-style-type:none;
	margin:0;
	padding:0;
	position: absolute;
	width: 620px;
}

/*Create a horizontal list with spacing*/
#menu-wrap li {
	display:inline-block;
	float: left;
	margin-right: 1px;
}

/*Style for menu links*/
#menu-wrap li a {
    background: none repeat scroll 0 0 #2f3036;
    color: #fff;
    display: block;
    text-decoration: none;
}

/*Hover state for top level links*/
#menu-wrap li:hover a {
	background:  #a80f11;
}

/*Style for dropdown links*/
#menu-wrap li:hover ul a {
	background: #f3f3f3;
	color: #2f3036;
	height: 40px;
	line-height: 40px;
}

/*Hover state for dropdown links*/
#menu-wrap li:hover ul a:hover {
	background: #19c589;
	color: #fff;
}

/*Hide dropdown links until they are needed*/
#menu-wrap li ul {
	display: none;
}

/*Make dropdown links vertical*/
#menu-wrap li ul li {
	display: block;
	float: none;
}

/*Prevent text wrapping*/
#menu-wrap li ul li a {
	width: auto;
	min-width: 100px;
	padding: 0 20px;
}

/*Display the dropdown on hover*/
#menu-wrap ul li a:hover + .hidden, #menu .hidden:hover {
	display: block;
}

/*Style 'show menu' label button and hide it by 

default*/
#menu-wrap .show-menu {
	font-family: "Helvetica Neue", Helvetica, 
	cursor: pointer;

Arial, sans-serif;
	text-decoration: none;
	color: #fff;
	background: #2f3036;
	text-align: center;
	padding: 10px 0;
	display: none;
}

/*Hide checkbox*/
#menu-wrap input[type=checkbox]{
    display: none;
}

/*Show menu when invisible checkbox is checked*/
#menu-wrap input[type=checkbox]:checked ~ #menu{
    display: block;
}




/* 6. Content		
============================================================ */
#intro { margin-top:30px; margin-bottom:20px; }
#intro .text-image { border:#FFFFFF 1px solid; float:left; margin-bottom:10px; margin-right:10px; }
#intro img.right { margin:50px 0 0; }
#image-holder { /* width:940px; */ margin:0 auto 20px; /* height:200px; */ text-align:center; }
#image-holder .promobox { /* float: left; height: 190px; width:290px; */ background:#F9FAF5; /* margin: 0 9px; */ overflow: hidden; position: relative; padding:5px; margin: 10px 0; }
#image-holder #promo1 { /* margin:0 8px 0 0; */ }
#image-holder #promo3 { /* margin:0 0 0 8px; */ }
#sidebar-holder { width:300px; margin:0 auto 20px; height:200px; text-align:center; }
#sidebar-holder .promobox { float: left; height: 190px; width:290px; background:#F9FAF5; margin: 0 0 20px; overflow: hidden; position: relative; padding:5px; }
a#promo1Img { background:url(../images/pitchedroofs.jpg) no-repeat; display:block; width:auto; height:190px; }
a#promo2Img { background:url(../images/flatroofs.jpg) no-repeat; display:block; width:auto; height:190px; }
a#promo3Img { background:url(../images/gallery.jpg) no-repeat; display:block; width:auto; height:190px; }
#image-holder #promo1 .caption, #image-holder #promo2 .caption, #image-holder #promo3 .caption { height:45px; /* width:290px; */ background:url(../images/blacktrans.png) repeat; bottom:5px; position:absolute;  -moz-transition: all 0.2s ease 0s; -webkit-transition: all 0.2s ease 0s; /* left:5px; */ max-width: 285px; }
#sidebar-holder #promo1 .caption, #sidebar-holder #promo2 .caption, #sidebar-holder #promo3 .caption { height:45px; width:290px; background:url(../images/blacktrans.png) repeat; bottom:5px; position:absolute;  -moz-transition: all 0.2s ease 0s; -webkit-transition: all 0.2s ease 0s; left:5px; }
#image-holder #promo1:hover .caption, #image-holder #promo2:hover .caption, #image-holder #promo3:hover .caption { height:190px;  -moz-transition: all 0.2s ease 0s; -webkit-transition: all 0.2s ease 0s;  }
#sidebar-holder #promo1:hover .caption, #sidebar-holder #promo2:hover .caption, #sidebar-holder #promo3:hover .caption { height:190px;  -moz-transition: all 0.2s ease 0s; -webkit-transition: all 0.2s ease 0s;  }

body#galleryPage #left-col #gallery a { margin:15px; background:#e9e9e9; float:left; display:block; -webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px; }
body#galleryPage #left-col #gallery a:hover { background:#A80F11; }
body#galleryPage #left-col #gallery a img { margin:5px; -webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px; }

/* 7. Page Footer		
============================================================ */
#footer-content p { color:#333333 !important; font-size:1em; }
#footer-content { /* width:940px; */ margin:0 auto; padding-top:10px; }

/* 8. Misc Rules		
============================================================ */
.clear-left {clear:left;} .clear-right{clear:right;} .clear-both{clear:both;} 
.left {float:left;} .right{float:right;} .both{float:both;} 
.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
.slideshow img { 
	width: 100% !important;
	height: 100% !important;
}
.slideshow  {height: 350px; }