/* 
Title: HollandIndustries.com 
Date: 11.08.07
Authors: Gunnar Bruun and Jonathan Wold / Sabramedia, LLC

Table of Contents:
	- Typography
	- Header Layout
	- Content Layouts
	- Footer Layouts

Abbreviations:
	hC = Hospitality Collection (used in page identifiers)
	
Common Colors:

Developer Notes:
	This document is organized for easy readability, using hybrid property organization
	For more details, visit CSSBestPractices.com
		

*/

@import url(reset.css); 

/* Typography Styles Begin Below
=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=*/
	
h1.title {
	margin: 0 0 10px 0; font-size: 1.1em; color: #333;	
	}	
	
	h1.centered { 
		margin: 0; text-align: center; font-size: 1.4em;
		}
		
h2.centered { 
	margin: 0; text-align: center; 
	}

div.content p {
	margin: 0 0 15px 0;
	}
	
div.content p.indent { 
	margin-left: 30px;
	}		
	
div#values div.box p {
	padding: 10px;
	}	
	
p.description {
	width: 350px; margin: 0 0 10px 0; font-size: 0.9em;	
	}	
	
p.descriptionBig { 
	width: 700px; margin: 0 0 10px 0; font-size: 0.9em; 
	}	
	

		
/* Header Styles Begin Below
=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=*/

.header {
	margin: 0 auto; width: 800px; height: 135px;
	}

.header a.logo {
	float: left; display: block; width: 130px; outline: none;
	}
	
.header a.logo img { 
	margin: 0 0 0 20px;	
	}
	
.headerRight { 
	float: left; width: 650px; margin: 15px 0 0 0; 
	}	
	
.headerRight img	{ 
	float: left; 
	}
	
.headerRight h2 {
	float: left; display: block; width: 350px;
	color: #bbb; font-weight: bold; text-align: right; 	
	}
	

/* Navigation Styles Begin Below (Based on Superfish)
=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=*/


.nav {
	clear: both; width: 650px; height: 42px; 
	background: url(../../images/header-menu.png) no-repeat; list-style: none;
	}
		
.nav a {
	display: block; padding: 8px 0; margin: 1px 0 0 0;
	text-decoration:none; color: #fff; text-indent: 2em; outline: none;	
	}
	
.nav li:hover, .nav li.sfHover,
.nav a:focus, .nav a:active {
	background: #373737;
	}

.nav a:hover {
	background: #454545;
	}	

.nav ul {
	position:absolute; top:-999em; clear: both;
	width:9.45em; list-style: none;
	}
	
.nav ul li, .nav a { 
	width: 100%; 
	}
		
		
.nav ul li ul.hospitality  {
	width: 10em;
	}
	
.nav ul li ul.hospitality li a {
	text-indent: 20px;
	}	
	
.nav li {
	float:left;	position:relative; z-index:99;	
	width: 150px;
	}

.nav li.top {
	margin: 0; width: 210px; border-right: 1px solid #555; 
	}
	
	.nav li.last { border: none; }
	
	li.top span { display: block; padding: 0 0 0 50px; text-indent: 50px;  }
	
.nav li li, .nav li li li  {
	background:#373737;
	}	
	
.nav li:hover ul,
ul.nav li.sfHover ul {
	top:2.6em;
	}
	
.nav li:hover li ul,
.nav li.sfHover li ul {
	top:-999em;
	}
	
.nav li li:hover ul,
ul.nav li li.sfHover ul {
	left:9.45em; top:5px;
	}
	
ul.superfish {
	padding: 0 0 0 8px; 
	}
		
.superfish li:hover ul,
.superfish li li:hover ul {
	top: -999em;
	}	

.nav li a.hasMenu {
	display: block;
	background: url(../../images/icon-white-arrow.png) no-repeat 128px 13px;
	}


/* Content Styles Begin Below
=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=*/

div.contentWrap {
	clear: both; width: 761px; padding: 10px 0 0 0; margin: 0 auto;
	background: url(../../images/bg-content-top.png) no-repeat top center;
	}
	
	div#homepage {
		height: 220px;
		}
		
div.withShadow {
	padding: 20px 17px 90px 18px;
	background: #fff url(../../images/bg-content-base.png) no-repeat bottom center;	
	}
	
div.noShadow {
	padding: 20px 17px 10px 18px;
	background: #fff url(../../images/bg-content-base-noShadow.png) no-repeat bottom center;	
	}

div.content ul {
	margin: 0 0 0 30px;
	}
	
div.leftColumn { 
	float: left; width: 500px; 
	}
		
div.rightColumn {
	float: left; width: 150px; margin: 0 10px 0 30px;	
	font-size: 0.9em;
	}	
	
div.columnWide {
	float: left; width: 450px;	
	}	
	
div.columnNarrow {
	float: right; width: 250px; border-left: 1px solid #ccc;	
	}
	
div.columnNarrow div.box {
	margin: 0 0 20px 20px;
	text-align: center;
	}	
	
	#application {
		padding: 10px; border: 1px solid #ccc;
		background: #ddd;		
		}
		
	#application em {
		font-size: 0.8em;
		}
			
div.columnNarrow div.box a span {
	display: block;
	color: #000; font-size: 0.9em; text-decoration: none;
	}	
		
div.columnNarrow img#heartland {
	margin: 0 0 20px 60px;
	}

/* Communal Tables Styles Begin Below
=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=*/

#communal-tables-images {
	margin-left: 2px;
	}
#communal-tables-images img {
	margin-right: 15px; margin-bottom: 12px;
	}
#communal-tables-images img.right {
	margin-right: 0; margin-bottom: 12px;
	}

/* Hospitality Collection Styles Begin Below
=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=*/

div.quote-panel { display: none }

div#dialog { display: none }

img.splash {
	float: right; margin: 0 0 30px 0;
	}
	
	div#hC-custom img.splash { border-right: 1px solid #ccc; border-bottom: 1px solid #ccc; }
	div#nyc img.splash { margin: 15px 0 0 10px; }
		
div.divider {
	clear: both; width: 720px; height: 25px; margin: 20px 0; border: 1px solid #888;
	background: #ccc;	
	}
	
div.divider a {
	color: #333; text-decoration: none;	font-weight: bold; font-size: 0.9em;
	}	
	
div.divider ul#select {
	display: block;	margin: 0 0 0 20px;
	list-style: none;
	}	
	
div.divider ul#select li {
	float: left; display: block; 
	margin: 0 10px 0 0; padding: 0 10px 0 0; border-right: 1px solid #bbb;
	}		
	
div.divider ul#select li.last {
	border: none; margin-right: 0; padding-right: 0;
	}

div.divider ul#select li.section {
	margin: 0 240px 0 0;
	}
	
	div#hC-custom div.divider ul#select li.section { margin: 0 500px 0 0; }	
	
div.divider ul#select a.pdf {
	width: 180px; margin: 0; padding: 0; display: block;
	background: url(../../images/icon-pdf.png) no-repeat 160px 5px;	
	}
	
div#instructions {
	border: 1px solid #000; background: #eee; font-size: 0.9em; padding: 5px; margin-bottom: 20px;
	}
	
div#instructions p { margin: 0; }
	
/* Collections Page Styles */
	
ul#collections {
	display: block; margin: 20px 0 50px 30px; list-style: none;	
	}
	
ul#collections li {
	float: left; display: block;
	width: 220px; height: 110px; margin: 0 8px 0 0; 	
	}
	
ul#collections li a img {
	border: 1px solid #000;
	}	

ul#collections li a span {	
	display: block;	color: #000; font-size: 0.9em; text-align: center;
	}		
	
div.photo-panel a {
	margin: 0 15px 0 20px; 
	outline: none;
	}
  	
	div#nv a { margin: 0 0 0 20px; }  
	div#hC-custom div.photo-panel a { margin: 0 0 0 20px; }
	div#hC-broadmoor div.photo-panel img { margin: 0 22px 0 10px; }
	div#nyc div.photo-panel a { margin: 0 10px; }
  
div.photo-panel img { margin: 0; }  	

	div#nv img { margin: 0 10px 0 0; }
	
div.line-art-panel {
	font-size: 0.8em;
	}
		
/* Homepage Styles Begin Below
=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=*/

#homepage {
	position: relative;
	}
	
#homepage h2 {
	float: left; display: block; 
	width: 419px; height: 60px; margin: 80px 0 0 0;
	text-indent: -13370px; background: url(../../images/homepage-slogan2.jpg) no-repeat;
	}
  
#homepage img {
	position: absolute; right: 20px;
	}
  
#values {
	width: 780px; margin: 10px auto 0 auto;	
	}

#values div {	
	float: left; position: relative; width: 260px; height: 259px;
	font-size: 13px; background: url(../../images/bg-box.jpg) no-repeat center;
	}
	
#values div img {
	padding: 60px 0 0 47px;
	}

h2#excellence {
	position: absolute; top: 55px; left: 15px;
	display: block; width: 218px; height: 54px;
	text-indent: -13370px; background: url(../../images/homepage-excellence.png) no-repeat; 
	}

h2#customer-service {  
	position: absolute; top: 65px;  left: 50px;
	display: block; width: 218px; height: 54px; 
	text-indent: -13370px; font-weight: bold; background: url(../../images/homepage-service.png) no-repeat; 
	}
  
/* Footer Styles Begin Below
=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=*/

div#footer {
	clear: both; position: relative;
	width: 760px; margin: 0 auto 0 auto;
	font-size: 0.8em; color: #fff; text-align: center;
	}
	
div#footer p {
	position: absolute;	bottom: 45px; right: 180px;
	}
div#footer a {
	color: #fff; text-decoration: none;
	}
	div#footer a:hover {
		text-decoration: underline;
		}
  	
/* Contact Form Styles Begin Below
=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=*/

form.floatLeft {
	float: left; width: 500px;
	}
	
form.contact fieldset {
	margin: 0 0 15px 0; padding: 10px; border: 1px solid #ccc;
	}
	
form.contact legend {
	clear: both; margin: 0 0 10px 0;
	}

form.contact label {
	float: left; clear: both;
	display: block;	width: 200px; margin: 0 0 10px 0;	
	}

form.contact input {
	float: left; display: block; width: 150px;
	}
	
form.contact select {
	float: left;
	}
	
form.contact textarea {
	float: left; width: 450px; height: 100px;
	}	
	
form.contact input.submit {
	clear: both; margin: 10px 0 0;	width: 120px;
	}		

div#salesMap {
	position: relative;
	}
	

/* Reps Map Styles Begin Below
=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=*/	
	
div#salesMap {
	padding: 0 0 0 20px;
	}
		
div.repDisplayBox {
	position: absolute; top: 50px; left: 50px;
	width: 600px; margin: auto; padding: 10px; border: 1px solid #000;
	background: #fff;
	}
		
div.repDisplayBox .rep {
	float: left; width: 300px;	margin: 0 0 20px 0;
	}	
	
div.repDisplayBox .rep h3 {
	margin: 10px 0 0 0; font-size: 0.9em;	
	}	
	
div.repDisplayBox a {
	display: block; clear: both; margin: 10px 0 0 0;
	background: #ccc; text-align: center; color: #000;	
	}	

/* Extra Styles Begin Below
=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=*/

.hidden { display: none; }