/*
title:		BRUCHE Full Site
created:	04.04.2011
modified:	
*/

/*================ [ general styles ] ================ */

/* base reset */ html, body, div, h1, h2, h3, h4, h5, h6, dl, dt, dd, ul, li, ol, p, blockquote, pre, form, fieldset, 
table, th, td    { margin: 0; padding: 0; }

div#container {
	width: 1020px;
	height: auto;
	margin-left:auto;
	margin-right:auto;
	border-collapse:collapse; 
	border: 0px;

	}
	
div#innercontainer {
	width: 1020px;
	height: auto;
	float:left;
	border-collapse:collapse; 
	border: 0px;
	background-image:url(images/innerbground.png);
	background-repeat:repeat-y;
	}
	
div#containerbody {
	width: 984px;
	height: auto;
	float:left;
	border-collapse:collapse; 
	border: 0px;
	margin-left:18px;

	}
	
	

body {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 62.5%;
	background-color:#c2c2c2;
	background-image: url(images/bgroundgrad.jpg);
	background-repeat:repeat-x;
	background-position:top;
}

p {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 1.2em; 
	color:#333; 
	line-height: 1.4em;
	padding-bottom:10px;
}



/*h1 {
	font-family: Verdana, Geneva, sans-serif;
	font-size: 1.2em;
	color:#005488;
	text-decoration: none;
	} */
	
h2 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 1.5em;
	color:#666;
	text-decoration: none;
	line-height: 1.4em;
	font-weight:lighter;
	} 
	
h3 {
	font-family:Georgia, "Times New Roman", Times, serif;
	font-size: 1.3em;
	color:#333;
	text-decoration: none;
	padding-top: 10px;

	} 
	
a {
	color:#909;
	text-decoration: none;

	} 
	
.blue {
	color:#2879b1;


	} 
	
	
/*================ [ topnav ] ================ */


div#greybar {
	width: 984px;
	height: 15px;
	float:left;
	background-color:#999;
	}
	
div#topnav {
	width: 984px;
	height: 100px;
	float:left;
	}
	
	
div#logo {
	width: 300px;
	height: 100px;
	float:left;
	background-image: url(images/bruchelogo.png);
	background-repeat:no-repeat;
	background-position: 0px 10px;
	text-indent:-9999px;
	margin-left:20px;
	}
	
div#topnavright {
	width: 664px;
	height: 80px;
	float:left;
	}
	
div#topnavrighttop {
	width: 624px;
	height: 30px;
	float:left;
	margin-top:40px;
	margin-left:20PX;
	}
	

	
div#topnavrighttop ul li a.select{
	background-color:#2879b1;
	color:#FFF;
	}
	
div#topnavrighttop ul li a:hover{
	background-color:#2879b1;
	color:#FFF;
	}
	

	
div#topnavrightbtm {
	width: 720px;
	height: 30px;
	float:left;
	margin-top:10px;
	}
	
div#topnavrightbtm ul{
	width: 500px;
	height: 30px;
	float:left;
	margin-left:210px;
	}
	
div#topnavrightbtm ul li{
	display:inline;
	list-style-type:none;
	border-right:1px solid #9d9d9d;
	padding-right:10px;
	padding-left:10px;
	    font-family: 'DINRegular';
			float:left;

	}
	
div#topnavrightbtm ul li.news{
	border-right:none;
	}
	
div#topnavrightbtm ul li.last{
	width:90px;
	height:20px;
	float:left;
	border-right:none;
	background-image:url(image/contact.jpg);
	background-repeat:no-repeat;
	color:#FFF;
	}
	
div#topnavrightbtm ul li a{
	font-size:1.4em;
				color:#9d9d9d;

	}
	
div#topnavrightbtm ul li a.white{
				color:#fff;

	}
	
div#topnavrightbtm ul li a:hover{
	color:#FFF;
	}
	
.blueline{
	width:1000px;
	height:20px;
	float:left;
	background-image: url(image/blueline.jpg);
	background-repeat:no-repeat;
	background-position:-10px 0px;
	}
	
/*================ [ banner ] ================ */


div#bannerholder {
width:926px;
	height: 272px;
	float:left;
	border:1px solid #CCC;
	margin-left:20px;
	margin-top:20px;
	padding-left:7px;
	padding-top:7px;
	}
	
div#bannerholderabout {
width:926px;
	height: 250px;
	float:left;
	border:1px solid #CCC;
	margin-left:20px;
	margin-top:20px;
	padding-left:7px;
	padding-top:7px;
	background-color:#FFF;
	}
	
div#bannerholderaboutinner {
width:908px;
	height: 233px;
	float:left;
	border:1px solid #CCC;
	padding-left:7px;
	padding-top:7px;
	background-color:#FFF;
	background-image: url(images/aboutus.jpg);
	background-repeat:no-repeat;
	}
	
div#bannerholderaboutinner_mainten {
width:908px;
	height: 233px;
	float:left;
	border:1px solid #CCC;
	padding-left:7px;
	padding-top:7px;
	background-color:#FFF;
	background-image: url(images/maintenance.jpg);
	background-repeat:no-repeat;
	}
	
div#bannerholderaboutinner_carp {
width:908px;
	height: 233px;
	float:left;
	border:1px solid #CCC;
	padding-left:7px;
	padding-top:7px;
	background-color:#FFF;
	background-image: url(images/carpentry.jpg);
	background-repeat:no-repeat;
	}
	
	div#bannerholderaboutinner_dry {
width:908px;
	height: 233px;
	float:left;
	border:1px solid #CCC;
	padding-left:7px;
	padding-top:7px;
	background-color:#FFF;
	background-image: url(images/dry.jpg);
	background-repeat:no-repeat;
	}
	
div#bannerholderaboutinner_gen {
width:908px;
	height: 233px;
	float:left;
	border:1px solid #CCC;
	padding-left:7px;
	padding-top:7px;
	background-color:#FFF;
	background-image: url(images/general.jpg);
	background-repeat:no-repeat;
	}
	
	div#bannerholderaboutinner_sus {
width:908px;
	height: 233px;
	float:left;
	border:1px solid #CCC;
	padding-left:7px;
	padding-top:7px;
	background-color:#FFF;
	background-image: url(images/suspended.jpg);
	background-repeat:no-repeat;
	}
	
		div#bannerholderaboutinner_spec {
width:908px;
	height: 233px;
	float:left;
	border:1px solid #CCC;
	padding-left:7px;
	padding-top:7px;
	background-color:#FFF;
	background-image: url(images/spec.jpg);
	background-repeat:no-repeat;
	}
	
	
/*================ [ jquery ] ================ */

	#fssPlayPause {
position:absolute;
top:235px;
right:20px;
background:url(white.png) repeat;
padding:4px 0 5px 0;
-moz-border-radius:5px;
border-radius:
5px;
width:60px;
text-align:center;
display:block;
color:#333;
text-decoration:none;}

#slideshowWrapper {
position:relative;
width:914px;
height:263px;
float:left;

}


ul#slideshow
{list-style:none;
margin:0;
margin-top:0%;
width:914px;
height:263px;
overflow:hidden; 
float:left;}

ul#slideshow li 
{list-style:none;
margin:0;
margin-top:0%;
width:914px;
height:263px;
overflow:hidden;
float:left;}

ul#slideshow li.one
{
	width:914px;
height:263px;
float:left;
background-image:url(images/homebanner3.jpg);
	background-repeat:no-repeat;
	}
	
	ul#slideshow li.two
{
	width:914px;
height:263px;
float:left;
background-image:url(images/homebanner2.jpg);
	background-repeat:no-repeat;
		background-position:0px -40px;
}
	
	ul#slideshow li.three 
{
	width:914px;
height:263px;
float:left;
background-image: url(images/homebanner1.jpg);
	background-repeat:no-repeat;
	background-position:0px -40px;
	}


ul#slideshow li ul 
{width: 904px;
height:263px;
list-style:none;
}

ul#slideshow li ul li{
width: 904px;
height:263px;
list-style:none;
border:none;
display:inline;

}

ul#slideshow li ul li.left{
	
width: 750px;
height:263px;
float:left;
border:none;


}

ul#slideshow li ul li.right{
	
width: 154px;
height:263px;
float:left;
list-style:none;
border:none;
display:inline;
padding:15px;
margin-left:10px;


}


ul#slideshow li ul li.right p{
width: 154px;
height:263px;
float:left;	
font-family: Arial, Helvetica, sans-serif;
	font-size: 1.9em;
	color:#fff; 
	text-decoration: none;
	line-height: 1.3em;
	font-weight:bold;
	padding:0px;
}



#fssList
{list-style:none;
width:100px;
margin:auto;
padding:5px 0 0 0%;
position:absolute;
top:10px; left:10px;}

#fssList li {

display:inline;
margin-right:10px;
font-family:Arial, Helvetica, sans-serif;
font-size:.9em;

}

#fssList li a {
width:14px;
height:15px;
float:left;
display:inline;
text-decoration:none;
background-image: url(images/circle_notselect.jpg);
background-repeat:no-repeat;
}

#fssList li.fssActive a{	

display:inline;

color:#FFF;
background-image:url(images/circle_select.jpg);
background-repeat:no-repeat;
background-position:0px 0px;
}

/*================ [ indexbody ] ================ */


div#indexbody {
	width: 942px;
	height: auto;
	float:left;
	margin-left:20px;
	margin-top:30px;
	}
	
div#indexbodyleft {
	width: 700px;
	height: auto;
	float:left;
	}
	
div#indexbodylefttext {
	width: 680px;
	height: auto;
	float:left;
	margin-left:20px;
	}
	
div#indexbodylefttext ul{
	width: 680px;
	height: auto;
	float:left;
	}
	
div#indexbodylefttext ul li{
	list-style:inside;
			color:#666;
		font-size:1.4em;
		font-family:Arial, Helvetica, sans-serif;
	}
	

	
div#indexbodylefttext h2 {
		color:#2879b1;
		font-size:1.8em;
		font-family:Arial, Helvetica, sans-serif;
		margin-bottom:10px;
	}
	
div#indexbodylefttext h2 a {
		color:#FFF;
		background-color:#999;
		font-size:.8em;
		font-family:Arial, Helvetica, sans-serif;
		padding-top:3px;
		padding-bottom:3px;
		padding-left:8px;
		padding-right:8px;
	}
	
div#indexbodylefttext h2 a:hover {
		color:#FFF;
		background-color:#666;	
		}
		
div#indexbodylefttext p {
		color:#666;
		font-size:1.4em;
		font-family:Arial, Helvetica, sans-serif;
	}

	
	
div#indexbodyright {
	width: 200px;
	height: auto;
	float:left;
	padding:7px;
	background-color: #FFF;
	border:1px solid #CCC;
	margin-left:20px;
	}
	
	div#cta {
	width: 184px;
	height: auto;
	float:left;
	background-image: url(images/ctagrad.jpg);
	background-repeat:repeat-x;
	background-color:#8dbfef;
	padding:8px;
	padding-bottom:20px;
	}
	
div#cta h2{
	font-size:2em;
	font-family:Arial, Helvetica, sans-serif;
	color:#ccc;
	margin-bottom:8px;
	margin-left:5px;
	line-height:1.2em;
	}
	
div#cta p{
	font-size:1.4em;
	font-family:Arial, Helvetica, sans-serif;
	color:#b3dfe0;
	margin-left:5px;
	margin-bottom:0px;
	padding-bottom:0px;

	}
	
div#cta p.tel{
	margin-top:0px;
	padding-top:0px;
	font-size:2.5em;
	font-family:Arial, Helvetica, sans-serif;
	color:#FFF;
	margin-bottom:8px;

	}
	
div#cta p a{
	color:#FFF;
	font-size:.9em;


	}
	
div#cta p a:hover{
	text-decoration: underline;


	}

div#quote {
	width: 184px;
	height: auto;
	float:left;
	margin-top:20px;
	margin-left:30px;
	}
	
div#quote p{
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size:1.6em;
	color:#999;
	font-style:italic;
		margin-bottom:0px;
	padding-bottom:0px;
	}
	
div#quote p.source{
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size:1.2em;
	color:#2879b1;
		margin-top:0px;
	padding-top:0px;
	font-family:Arial, Helvetica, sans-serif;
	font-weight:bold;
	font-style:normal;
	}
	
div#indexbodyabout {
	width: 620px;
	height: auto;
	float:left;
	margin-left:40px;
	}
	
div#indexbodyabout ul{
	width: 620px;
	height: auto;
	float:left;
	}
	
div#indexbodyabout ul li{
	list-style:outside;
			color:#666;
		font-size:1.4em;
		font-family:Arial, Helvetica, sans-serif;
		margin-left:20px;
		margin-bottom:4px;
		line-height:1.4em;
	}
	

	
div#indexbodyabout h2 {
		color:#2879b1;
		font-size:1.8em;
		font-family:Arial, Helvetica, sans-serif;
		margin-bottom:10px;
	}
	
div#indexbodyabout h2 a {
		color:#FFF;
		background-color:#999;
		font-size:.8em;
		font-family:Arial, Helvetica, sans-serif;
		padding-top:3px;
		padding-bottom:3px;
		padding-left:8px;
		padding-right:8px;
	}
	
div#indexbodyabout h2 a:hover {
		color:#FFF;
		background-color:#666;	
		}
		
div#indexbodyabout p {
		color:#666;
		font-size:1.4em;
		font-family:Arial, Helvetica, sans-serif;
	}

/*================ [ Services] ================ */

	
div#servicesleft {
	width: 250px;
	height: auto;
	float:left;
	margin-left:20PX;
	}
	
div#servicesleft ul{
	width: 250px;
	height: auto;
	float:left;
	}
	
div#servicesleft ul li{
	width: 250px;
	height: 45px;
	float:left;
	list-style:none;
	}
	
div#servicesleft ul li a{
	width: 250px;
	height: 32px;
	float:left;
	background-image:url(images/services.jpg);
	background-repeat:no-repeat;
	font-size:1.4em;
	color:#2879b1;
	padding-top:13px;
	padding-left:10px;
	}
	
div#servicesleft ul li a.blueselect{
	width: 250px;
	height: 32px;
	float:left;
	background-image: url(images/services_select.jpg);
	background-repeat:no-repeat;
	color:#FFF;

	}
	
div#servicesleft ul li a:hover{
	background-image:url(images/services_select.jpg);
	background-repeat:no-repeat;
	color:#FFF;
	}
	
div#servicesmiddle {
	width: 430px;
	height: auto;
	float:left;
	}
	
div#servicesmiddle ul{
	width: 430px;
	height: auto;
	float:left;
	margin-bottom:10px;
	}
	
div#servicesmiddle ul li{
			color:#666;
		font-size:1.4em;
		font-family:Arial, Helvetica, sans-serif;
		margin-bottom:3px;
		margin-left:15px;
	}
	

	
div#servicesmiddle h2 {
		color:#2879b1;
		font-size:1.8em;
		font-family:Arial, Helvetica, sans-serif;
		margin-bottom:10px;
	}
	
div#servicesmiddle h2 a {
		color:#FFF;
		background-color:#999;
		font-size:.8em;
		font-family:Arial, Helvetica, sans-serif;
		padding-top:3px;
		padding-bottom:3px;
		padding-left:8px;
		padding-right:8px;
	}
	
div#servicesmiddle h2 a:hover {
		color:#FFF;
		background-color:#666;	
		}
		
div#servicesmiddle p {
		color:#666;
		font-size:1.4em;
		font-family:Arial, Helvetica, sans-serif;
	}
	
/*================ [ Services] ================ */

	
div#contactleft {
	width: 180px;
	height: auto;
	float:left;
	margin-left:40PX;
	margin-right:20px;
	}
	
div#contactleft p{
		color:#666;
		font-size:1.2em;
		font-family:Arial, Helvetica, sans-serif;
	}
	
div#contactleft p.bluebold{
	font-size:1.4em;
	color:#2879b1;
	font-weight:bold;

	}
	
div#contactleft ul{
	width: 180px;
	height: auto;
	float:left;
	margin-bottom:10px;
	}
	
div#contactleft ul li{
	list-style:none;
			color:#666;
		font-size:1.2em;
		font-family:Arial, Helvetica, sans-serif;
	}
	
div#contactleft ul li.blue{
	color:#2879b1;
	font-weight:bold;

	}
	
div#contactleft ul li a{
		color:#666;
		color:#666;
		font-size:1em;
		font-family:Arial, Helvetica, sans-serif;
	}
	
div#contactleft ul li a:hover{
	color:#2879b1;
	}
	
div#contactmiddle {
	width: 460px;
	height: auto;
	float:left;
	}
	
/*================ [ indexbody ] ================ */
	
div#carousel_container {
	width: 680px;
	height: auto;
	float:left;
	margin-top:10px;
	}
	
#carousel_inner {
float:left; /* important for inline positioning */
width:630px; /* important (this width = width of list item(including margin) * items shown */ 
overflow: hidden;  /* important (hide the items outside the div) */
/* non-important styling bellow */
}

#carousel_ul {
position:relative;
left:-210px; /* important (this should be negative number of list items width(including margin) */
list-style-type: none; /* removing the default styling for unordered list items */
margin: 0px;
padding: 0px;
width:9999px; /* important */
/* non-important styling bellow */
padding-bottom:10px;
}

#carousel_ul li{
float: left; /* important for inline positioning of the list items */                                    
width:198px;  /* fixed width, important */
/* just styling bellow*/
padding:0px;
height:231px;
background: #FFF;
margin-top:10px;
margin-bottom:10px; 
margin-left:5px; 
margin-right:5px;
background-image: url(images/servicesgrad.jpg);
background-repeat:repeat-x;
background-position:0px 0px;
border: 1px solid #CCC;

}

#carousel_ul li.ceilings{
	background-color:#cbba48;

}

.scrollinnerdiv a{
float: left; /* important for inline positioning of the list items */                                    
width:188px;  /* fixed width, important */
/* just styling bellow*/
height:221px;
padding:5px;
}

.scrollinnerdiv a:hover{
	float: left; /* important for inline positioning of the list items */                                    
width:188px;  /* fixed width, important */
/* just styling bellow*/
height:217px;
background-color:#FFF;
}

.scrollinnerdiv h2{
	font-size:1.6em;
	font-family:Arial, Helvetica, sans-serif;
	color:#999;
	margin-bottom:8px;
	margin-left:5px;
}

.scrollinnerdiv p{
	font-size:1.2em;
	font-family:Arial, Helvetica, sans-serif;
	color:#2879b1;
	margin-left:5px;
	margin-right:5px;
	width:auto;
	height:50px
}

.scrollpic{
	width:187px;
	height:126px;
	float:left;
}

#carousel_ul li.partition{
	background-color:#1369a0;

}

#carousel_ul li.drypartition{
	background-color:#a01369;

}

#carousel_ul li.maintenance{
	background-color:#40aa35;

}

#carousel_ul li.building{
	background-color:#2fc9d3;

}
#carousel_ul li.joinery{
	background-color:#d32f46;

}




#carousel_ul li img {
.margin-bottom:-4px; /* IE is making a 4px gap bellow an image inside of an anchor (<a href...>) so this is to fix that*/
/* styling */
cursor:pointer;
cursor: hand; 
border:0px; 
}
#left_scroll, #right_scroll{
float:left; 
height:131px;
width:25px;
padding-top:100px;
}
#left_scroll img, #right_scroll img{
/*styling*/
cursor: pointer;
cursor: hand;
}


/*================ [ footer ] ================ */
	
div#footer {
	width: 925px;
	height: auto;
	float:left;
		border-top: 1px solid #CCC;
		margin-left:50px;
		margin-top:30px;
		padding-top:10px;
		margin-bottom:40PX;

	}
	
div#footerleft {
	width: 500px;
	height: auto;
	float:left;
	
	}
	
div#footerleft p{
	font-size:1.2em;
	font-family:Arial, Helvetica, sans-serif;
	color: #999;
	margin-top:10px;
	}
	
div#footerright{
	width: 425px;
	height: 60px;
	float:left;
	background-image:url(images/newfooter.jpg);
	background-repeat:no-repeat;
	background-position: right;
	}
	
div#footerrightnew {
	width: 425px;
	height: 40px;
	float:left;
	background-image:url(images/troax.jpg);
	background-repeat:no-repeat;
	background-position: right;
	}
	
div#footerrightnew p{
	font-size:1.2em;
	font-family:Arial, Helvetica, sans-serif;
	color: #999;
	margin-top:12px;
	text-align:right;
	margin-right:110px;
	}
	
	
/*================ [ footer ] ================ */
	
.polaroid {
	width: 135px;
	height: 110px;
	float:left;
	background-image: url(images/polaroid.jpg);
	background-repeat:no-repeat;
	background-position:-16px -10px;
	padding-top:12px;
	padding-left:8px;

	}
	
div#servicesmiddle p.galleryintro {
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size:1.4em;
	font-style:italic;
	color:#2879b1;
	margin-top:20px;
	padding-top:20px;

	}
	
div#servicesmiddle p.galleryintro .grey {
	font-family: Georgia, "Times New Roman", Times, serif;
	font-style:italic;
	color:#666;

	}