/*
   screen.css
   dove caravans
   
   Created by Cale Woodley on 2008-03-17.
   Copyright 2008 Webfirm. All rights reserved.
*/
 
@import url("reset.css");
@import url("vertical.css");

body {
	background: #c4d9f6 url('../images/core/body-background.jpg') top left repeat-x;
	font: 62.5% Verdana, Helvetica, Arial, sans-serif;
}

#background {
	width: 100%;
	height: 371px;
	background: url('../images/core/page-background.jpg') top center no-repeat;
}

#container {
	margin: 0 auto;
	width: 930px;
	background: #fff url('../images/core/container-background.gif');
	position: relative;
	padding: 0 5px;
}

#container a {color: #02439c; text-decoration: underline;}
#container a:hover {text-decoration: none;}

#container-left {
	background: url('../images/core/container-left.gif');
	height: 492px;
	width: 5px;
	position: absolute;
	top: 0;
	left: 0;
}

#container-right {
	background: url('../images/core/container-right.gif');
	height: 492px;
	width: 5px;
	position: absolute;
	top: 0;
	right: 0;
}

#flash {
	position: absolute;
	top: 0;
	left: 0;
	width: 940px;
	display: block;
}


/* ======= */
/* = NAV = */
/* ======= */
#nav, #nav ul {
	list-style: none; /* hide bullet points */
	width : 190px; /* set for base nav width */
	background: #fff;
	position: absolute;
	top: 336px;
	z-index: 99;
}

#nav li a {
	border: none;	
	padding: 0;
	height: 33px;
	width: 190px;
	margin: 2px 0;
	font-size: 1.2em;
}

#nav a#nav-home {background: url('../images/nav/nav-home.gif') no-repeat; text-indent: -999em;}
#nav a#nav-profile {background: url('../images/nav/nav-profile.gif') no-repeat; text-indent: -999em;}
#nav a#nav-products, #nav a#nav-products:hover {background: url('../images/nav/nav-products.gif') no-repeat; text-indent: -999em; cursor: default;}
#nav a#nav-gallery {background: url('../images/nav/nav-gallery.gif') no-repeat; text-indent: -999em;}
#nav a#nav-contact {background: url('../images/nav/nav-contact.gif') no-repeat; text-indent: -999em;}

#nav li ul {
	margin: 2px 0 0 191px;
}

#nav li ul a {
	background: url('../images/nav/nav-subnav-background.gif');
	color: #fff;
	font-weight: bold;
	line-height: 33px;
	margin: 0 0 2px 0;
	padding: 0 4px;
}


/* =========== */
/* = CONTENT = */
/* =========== */
#content {
	float: right;
	display: inline;
	position: relative;
	width: 630px;
	margin: 390px 55px 0 0;
	padding: 0 0 100px 0;
	z-index: 2;
	background: url('../images/core/content-background.gif') bottom right no-repeat;
	min-height: 300px;
}

#content h1 {
	font-size: 2em;
	font-weight: bold;
	margin: 0 0 25px 0;
}

#content h2 {
	font-size: 1.6em;
	font-weight: bold;
	margin: 0 0 25px 0;	
	color: #d1181f;
}

#content p {
	font-size: 1.2em;
	line-height: 1.8em;
	margin: 12px 0;
}

#content img.float-right {
	float: right;
	margin: 5px 0 5px 10px;
	border: 2px solid #6D97E1;
}

#content img.float-left {
	float: left;
	margin: 5px 10px 5px 0;
	border: 2px solid #6D97E1;
}

#content hr {
	height: 0;
	margin: 0 0 10px 0;
	border: none;
	border-top: 1px solid #ccc;
	clear: both;
}

#content ul {
	font-size: 1.2em;
	line-height: 1.8em;
	list-style: disc;
	margin-left: 25px;
}

.gallery-row {
	min-height:155px;
	display:block; 
	clear:both;
}
.image-container {
	width: 210px;
	height: 155px;
	float:left;
}
.gallery-nav{
	display:block;
	clear:both;
}



/* ============ */
/* = PRODUCTS = */
/* ============ */
ul#product-list {
	text-align: center;
}

ul#product-list li {
	float: left;
	width: 195px;
	height:220px;
	display: inline;
	margin: 0 15px 15px 0;
	padding: 0 0 5px 0;
	background: #E5E9FE;
}

ul#product-list h3 {
	font-size: 1.6em;
}

ul#product-list p {
	margin: 0;
	padding: 0;
	line-height: 1.2em;
}

ul#product-list div.product-thumb {
	width: 195px;
	height: 146px;
}

/* product details */
#product-gallery {
	width: 195px;
	float: right;
	margin: 10px 10px 10px 20px;
}

#product-gallery img {
	border: 2px solid #6D97E1;
}

#product-gallery p {
	margin: 0 0 10px 0;
	text-align: center;
	font-size: 1.1em;
}

#content p.product-model,
#content p.product-price {
	margin: 0;
	font-size: 1.4em;
}

/* =============== */
/* = CONTACTINFO = */
/* =============== */
#contactinfo {
	position: absolute;
	top: 536px;
	width: 190px;
}

#contactinfo p {
	font-size: 1.2em;
	width: 172px;
	margin: 25px auto;
}

#contactinfo span.phone {
	background: url('../images/core/icon-t.gif') no-repeat;
	line-height: 1.4em;
	padding-left: 17px;
}

#contactinfo span.fax {
	background: url('../images/core/icon-f.gif') no-repeat;
	line-height: 1.4em;
	padding-left: 17px;
}

#contactinfo span.email {
	background: url('../images/core/icon-e.gif') no-repeat;
	line-height: 1.4em;
	padding-left: 17px;
}


/* ========== */
/* = FOOTER = */
/* ========== */
#footer {
	margin: 0 auto;
	width: 940px;
	height: 86px;
	background: url('../images/core/footer-background.gif') bottom center no-repeat;
	font-size: 1.2em;
	text-align: center;
}

#footer img.logos {
	margin: 15px 0 0 25px;
	float: left;
	display: inline;
}

#footer img#webfirm {
	float: right;
	display: inline;
	margin: 20px 25px 0 0;
}

#footer p {
	float: left;
	display: inline;
	margin: 20px 0 0 100px;
}

#footer a {color: #02439c; text-decoration: none;}
#footer a:hover {text-decoration: underline;}


/* ============== */
/* = MISC STUFF = */
/* ============== */

/* BUTTONS */
/* http://particletree.com/features/rediscovering-the-button-element/ */
.buttons a, .buttons button{
   display:block;
   float:left;
   margin:0 7px 0 0;
   background-color:#f5f5f5;
   border:1px solid #dedede;
   border-top:1px solid #eee;
   border-left:1px solid #eee;
   font-family:"Lucida Grande", Tahoma, Arial, Verdana, sans-serif;
   font-size:100%;
   line-height:130%;
   text-decoration:none !important;
   font-weight:bold;
   color:#565656 !important;
   cursor:pointer;
   padding:5px 10px 6px 7px; /* Links */
}
.buttons button{
   width:auto;
   overflow:visible;
   padding:4px 10px 3px 7px; /* IE6 */
}
.buttons button[type]{
   padding:5px 10px 5px 7px; /* Firefox */
   line-height:17px; /* Safari */
}
*:first-child+html button[type]{
   padding:4px 10px 3px 7px; /* IE7 */
}
.buttons button img, .buttons a img{
   margin:0 3px -3px 0 !important;
   padding:0;
   border:none;
   width:16px;
   height:16px;
}

button:hover, .buttons a:hover{
   background-color:#C4D9F6;
   border:1px solid #336699;
   color:#336699 !important;
}