/*

	BENTHALL BROTHERS, INC. by JFSCHUM DESIGN
	VERSION 1.0
	
	CONTENTS ----------
	
	   1.BODY
	   2.DEFAULT STYLING
	   3.HEADINGS
	   4.LINKS
	   5.IMAGES
	   6.BRANDING/MASTHEAD
	   7.NAVIGATION
	   8.LAYOUT
	   9.SLIDESHOW
	   10.SITEINFO/FOOTER
	   
    -------------------
	
*/



/* 1.BODY
---------------------------------------------------------------------- */

body {
	background: #ededed url(../images/bg.jpg) top center repeat-x;
	color: #000;
	font-family: Tahoma, Geneva, Verdana, sans-serif;
	font-size: 62.5%;
	text-align: center;
	margin: 0; padding: 0;
	}
	
body#home {
	background: #ededed url(../images/bgHome.jpg) top center repeat-x;
	}

#wrapper {
	margin: 0 auto;	
	text-align: left;
	width: 940px;
	}
	
.group:after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}

.floatLeft { float: left; }

.floatRight { float: right; }

.clear { clear: both; }



/* 2.DEFAULT STYLING
---------------------------------------------------------------------- */

p { font-size: 1.4em; line-height: 1.4em; margin: 10px 0; }

p.intro { 
	width: 500px; 
	height: 160px;
	font-size: 1.6em; 
	font-weight: bold; 
	margin: 10px 0;
	overflow: hidden; 
}

p.mainText { width: 500px; }

p.emphasis { font-size: 1.6em; font-weight: bold; }

p.highlight { font-weight: bold; color: #003a68; }

p.caption { font-size: 1.0em; text-transform: uppercase; }



/* 3.HEADINGS
---------------------------------------------------------------------- */

h1 { font-size: 2em; font-weight: bold; line-height: 1.4em; }
h2 { font-size: 1.8em; font-weight: bold; line-height: 1.4em; }
h3 { font-size: 1.6em; font-weight: bold; line-height: 1.4em; }
h4 { font-size: 1.4em; font-weight: bold; line-height: 1.4em; }

.pageTitle {
	font: bold 2.8em/1.4em Georgia, "Times New Roman", Times, serif; 
	color: #003a68; 
	margin-top: 10px;
	}

.pageSubtitle {
	font: bold 1.8em/1.4em Georgia, "Times New Roman", Times, serif; 
	color: #003a68;
	}
	
.inlineTitle {
	dipslay: inline;
}

.subtitle { 
	font-weight: normal; 
	margin: 0; 
	padding: 0; 
	text-indent: .2em; 
	text-transform: uppercase;
	}
 
.productsSubtitle { 
	color: #003a68; 
	font-weight: bold;
	padding-bottom: 5px;
	margin-bottom: 10px;
	text-indent: 5px;
	border-bottom: solid 2px #003a68;
	}
	
.listTitle {
	font-size: 1.4em;
	font-weight: bold;
	color: #fff;
	text-align: center;
	text-decoration: none;
	margin: 0; padding: 5px;
}



/* 4.LINKS
---------------------------------------------------------------------- */

:focus { outline:none; }

a:link, a:visited { 
	text-decoration: none;
	color: #003a68;
	font-weight: bold;
	}

a:hover, a:focus { 
	text-decoration: underline;
	color: #003a68;
	}



/* 5.IMAGES
---------------------------------------------------------------------- */

img { border:none; }

.imageBorder { 
	padding: 5px;
	border: 1px solid #d9e0e6;
	border-bottom-color: #c8cdd2;
	border-right-color: #c8cdd2;
	background: #fff;
}

.imageBigBorder { 
	padding: 8px;
	border: 1px solid #d9e0e6;
	border-bottom-color: #c8cdd2;
	border-right-color: #c8cdd2;
	background: #fff;
	margin-bottom: 15px;
}




/* 6.BRANDING/MASTHEAD
---------------------------------------------------------------------- */

#header {
	width: 920px;
	height: 62px;
	margin: 0 10px;
	padding: 0;
	/*background: url(../images/headerBackground.jpg) top right repeat-y;*/
	}
	
#logo { 
	background-image: url(../images/logo.png);
	text-indent: -9999px;
	width: 375px;
	height: 51px;
	margin-top: 20px;
	float: left;
	}
	
#tagline { 
	text-indent: -9999px;
	float: left;
	display: none;
	}



/* 7.NAVIGATION
---------------------------------------------------------------------- */

#nav {
	float: right;
	width: auto;
	margin: 0;
	padding: 30px 0 0 0;
	list-style: none;
	}

#nav li {
	float: left;
	margin: 0;
	padding: 0;
	font: bold 16px/32px Georgia, "Times New Roman", Times, serif;
	}
	
#nav a:link, #nav a:active, #nav a:visited {
	float: left;
	display: block;
	margin: 0;
	padding: 0 10px;
	color: #fff;
	text-decoration: none;
	border-right: 1px dotted #003a68;
	}
	
#nav a:hover {
	color: #003a68;
	}

body#home #navHome a, body#about #navAbout a, body#products #navProducts a, body#locations #navLocations a, body#contact #navContact a {
	color: #003A68;
	}



/* 8.LAYOUT
---------------------------------------------------------------------- */

#content {
	width: 920px;
	padding: 8px 10px 0 10px;
	}
	
	#leftColumn {
		float: left;
		width: 500px;
		margin-right: 20px;
	}
	
	#rightColumn {
		float: right;
		width: 400px;
	}

/* -- HOME PAGE -- */

body#home #content {
	padding: 8px 10px 0 10px;
	width: 100%;
	background: url(../images/shadow.png) no-repeat scroll center top transparent;
	}
	
	#ourProducts {
		float: left;
		width: 575px;
		padding: 10px 0;
		}
		
		#ourProducts dl {
			float: left;
			width: 260px;
			margin: 10px 20px;
			padding: 0;
			display: inline;
			}
			
		#ourProducts dt {
			float: right;
			width: 162px;
			margin: 0;
			padding: 0;
			font-size: 1.4em;
			letter-spacing: 1px;
			}
		
		#ourProducts dd {
			margin: 0;
			padding: 0;
			fontsize: 1.2em;
			}
		
		#ourProducts dd.img img {
			float: left;
			margin: 0 8px 0 0;
			padding: 4px;
			border: 1px solid #d9e0e6;
			border-bottom-color: #c8cdd2;
			border-right-color: #c8cdd2;
			background: #fff;
			}
		
	#homeTop {
		padding: 8px 10px 0 10px;
		height: 455px;
		margin-bottom: 1px;
		background: url(../images/contentHomeBackground.jpg) bottom right no-repeat;
		}
	
	.homeBottom {
		width: 290px;
		padding: 0 8px;
		float: left;
	}
		
		.homeBottom img {
			float: right;
			margin: 7px 0 7px 7px;
		}

#homeBottomMiddle {
	padding: 10px;
	width: 255px;
	float: left;
}

#homeBottomRight {
	padding: 10px;
	width: 310px;
	float: left;
}


/* -- ABOUT US PAGE -- */
	
/* jQuery LightBox Plugin by Leandro Vieira Pinho - http://leandrovieira.com/projects/jquery/lightbox/ */

#gallery {
	width: 480px;
	height: auto;
	padding: 10px 10px 30px 10px;
}

	#gallery ul { list-style: none; }
	 
	#gallery li { float: left; width: 160px; text-align: center; }
		
	#gallery img {
		padding: 5px;
		background: #f1f1f1;
		border: 1px solid #d9e0e6;
		border-bottom-color: #c8cdd2;
		border-right-color: #c8cdd2;
	}
	
	#gallery a:hover {
		text-decoration: none;
	}
	
	#gallery a:hover img {
		padding: 5px;
		background: #ffffff;
		border: 1px solid #d9e0e6;
		border-bottom-color: #c8cdd2;
		border-right-color: #c8cdd2;
		text-decoration: none;
	}
	
	#gallery span { 
		display: inline-block;
		margin: 10px 0 11px 0;
		text-transform: uppercase;
	}

	#gallery a:hover span { 
		margin: 10px 0 10px 0;
		border-bottom: 1px dotted #003A68;
	}

/* -- PRODUCTS PAGE -- */

/* Tabs */

ul#productsTabs {
	list-style-type: none;
	width: 910px;
	margin: 0; padding: 0;
}

ul#productsTabs li {
	float: left;
	width: auto;
	margin: 10px 5px 0 5px; padding: 0;
	background: transparent;
}

ul#productsTabs li a {
	display: block;
	font-size: 1.4em;
	font-weight: bold;
	color: #fff;
	text-align: center;
	text-decoration: none;
	margin: 0; padding: 5px;
	background: transparent;
	margin-bottom: 1px;
}

ul#productsTabs li a.selected {
	color: #003A68;
	border-bottom: 1px dotted #003A68;
	margin-bottom: 0;
}

ul#productsTabs li a:hover {
	color: #003A68;
	border-bottom: 1px dotted #003A68;
	text-decoration: none;
	margin-bottom: 0;
	}

/* Content */

div#productsContentFlipper {
	width: 910px;
	text-align: center;
	margin: 0; padding: 10px 0;
	background: transparent;
}

div.contentHolder {
	width: 100%;
	text-align: left;
	margin: 0 auto; padding: 0;
	background: transparent;
}
	
.contentHolder {
	display:none;
}

@media print {
.contentHolder {
	display:block !important;
}
}

div.microContent {
	float: right;
	width: 100%;
	margin: 0; padding: 0;
}

div.row {
	float: left;
	width: 100%;
	height: auto;
	margin: 0; padding: 0;
}

div.microContent ul {
	display: block;
	width: 170px;
	height: auto;
	margin: 0 6px 15px 6px;
	padding: 0;
	float: left;
	list-style: none;
}

	div.microContent img {
		padding: 4px;
		border: 1px solid #dddddd;
		border-bottom-color: #c8cdd2;
		border-right-color: #c8cdd2;
		background: #f1f1f1;
		margin-bottom: 10px;
	}
	
/* -- LOCATIONS PAGE -- */

.locationsRow {
	margin-bottom: 25px;
	float: left;
}

.locationListContainer {
	width: 250px;
	float: left;
	display: block;
}

.locationListContainer ul {
	font-size: 1.4em;
	list-style: none;
	float: left;
	display: block;
}

	.locationListContainer ul li {
		padding-left: 5px;
	}

	.locationListContainer ul li.title {
		font-size: 1.4em;
		font-weight: bold;
		letter-spacing: 0.1em;
		line-height: 25px;
		padding-left: 28px;
		background: transparent url(../images/locationStar.png) no-repeat top left;
		color: #7d100b;
	}
	
	.locationListContainer ul li.subtitle {
		font-size: 1.0em;
		letter-spacing: 0.1em;
		text-transform: uppercase;
		color: #7d100b;
	}
	
	.locationListContainer ul li.manager {
		font-size: 1.0em;
		font-weight: bold;
	}


/* -- CONTACTS PAGE -- */

#contact-wrapper {
	width:490px;
	margin-bottom: 25px;
}
#contact-wrapper div {
	clear:both;
	margin:1em 0;
}
#contact-wrapper label {
	display:block;
	float:none;
	font-size:1.4em;
	width:auto;
}
form#contactform input {
	border-color:#B7B7B7 #E8E8E8 #E8E8E8 #B7B7B7;
	border-style:solid;
	border-width:1px;
	padding:5px;
	font-size:1.4em;
	width: 480px;
	height: 1.5em;
}
form#contactform textarea {
	font-size:1.4em;
	padding:5px;
	border-color:#B7B7B7 #E8E8E8 #E8E8E8 #B7B7B7;
	border-style:solid;
	border-width:1px;
	width: 480px;
	height: 100px;
	overflow: auto;
}

button.submit {
	font-size:1.4em;
	cursor: pointer;
	height: 3em;
	width: 150px;
	text-align: center;
}

/* 9.SLIDESHOW
---------------------------------------------------------------------- 
Slick Slideshow by Jacob Gube - http://sixrevisions.com/tutorials/javascript_tutorial/create-a-slick-and-accessible-slideshow-using-jquery/
*/

#slideshow {
	margin: 15px 0 0;
	width:620px;
	height:200px;
	position:relative;
}
#slideshow #slidesContainer {
  margin: 0 auto;
  width:540px;
  height:190px;
  padding-top: 10px;
  overflow:auto; /* allow scrollbar */
  position:relative;
}
#slideshow #slidesContainer .slide {
  margin:0 auto;
  width:520px; /* reduce by 20 pixels of #slidesContainer to avoid horizontal scroll */
  height:200px;
  background: transparent url(../images/slideshowTextBackground.png) no-repeat 185px 8px;
}

/* -- SLIDESHOW CONTROLS -- */

.control {
  display:block;
  width:39px;
  height:200px;
  text-indent:-10000px;
  position:absolute;
  cursor: pointer;
}
#leftControl {
  top:0;
  left:0;
  background: transparent url(../images/slideshowControlLeft.png) no-repeat 0 0;
}
#rightControl {
  top:0;
  right:0;
  background: transparent url(../images/slideshowControlRight.png) no-repeat 0 0;
}

/* -- SLIDES -- */

.slide h3 {
	margin: 20px 15px 15px 15px;
 	font: bold 1.8em Helvetica, Arial, sans-serif;
  	color:#7d100b;
  	letter-spacing:1px;
}
.slide p {
	margin: 15px;
}
.slide img {
  float:left;
  margin: 0 20px 0 10px;
  padding: 8px;
  background: #fff;
  
}
	
	

/* 10.SITEINFO/FOOTER
---------------------------------------------------------------------- */

#footerContent {
	color: #999;
	margin: 0 auto;	
	padding: 10px 10px 0 10px;
	text-align: left;
	width: 940px;
}

.footerLogo {
	float: left;
	margin: 15px 12px 15px 0;
}

#footer p {
	font: 1.2em/1.4em Georgia, "Times New Roman", Times, serif; 
}

#footer p.address {
	font: 1.2em/1.4em Georgia, "Times New Roman", Times, serif; 
}

#footerRight {
	float: right;
	text-align: right;
	width: 30%;
}

#footer a:link, #footer a:visited {
	font-weight: normal;
	text-decoration: underline;
	color: #999;
}

#footer a:hover, #footer a:focus { 
	text-decoration: underline;
	color:#6699cc; 
}

/* -- Sticky Footer by Steve Hatcher - http://www.cssstickyfooter.com -- */

* { margin:0; padding:0; } 

/* must declare 0 margins on everything, also for main layout components use padding, not 
vertical margins (top and bottom) to add spacing, else those margins get added to total height 
and your footer gets pushed down a bit more, creating vertical scroll bars in the browser */

html, body, #wrapper {
	height: 100%;
}

body > #wrapper { 
	height: auto; 
	min-height: 100%;
}

#main {
	overflow-y: auto;
	width: 940px;
	padding-bottom: 100px; /* must be same height as the footer */
}

#footer {
	width: 100%;
	position: relative;
	margin-top: -100px; /* negative value of footer height */
	height: 100px;
	clear: both;
	text-align: center;
	background: #333 url(../images/footerBackground.jpg) repeat-x center;
} 

/* -- Opera Fix -- */
body:before {/* thanks to Maleika (Kohoutec)*/
	content:"";
	height:100%;
	float:left;
	width:0;
	margin-top:-32767px;/* thank you Erik J - negate effect of float*/
}