/*--------------------------------------------------------------------------

Persimmon - Basic Style Sheet

Version:	1.0
Author:		Aaron
Email:		aaron@idaho.uk.net
Website:	http://futurehomes.dev

*** Last Modify Date: 12/03/2007 ( Aaron ) ***

--------------------------------------------------------------------------*/

/* Structure 

	=Global
	=Typography
	=Headings
	=Links
	=Access Keys / Jumps
	=Forms
	=LayoutStructure
		- header
		- navigation
		- p-content	
		- s-content
		- footer
	=Shared Styles
	=header
	=p-content ( insides )
	=s-content ( insides )
	=footer ( insides )

--------------------------------------------------------------------------*/


/* =Global 
--------------------------------------------------------------------------*/

*
{
	margin: 0;
	padding: 0;
}

body { background-color: #023401; }

.clearme { clear: both; }
.hideme { display: none; } /* visibility: hidden; could be used here instead depends what you need */
.left { float: left; }
.right { float: right; }
.noborder { border: 0 !important; }

acronym { speak: normal; }
abbr { speak: spell-out; }


/* =Typography
 *
 * Use this section for general type styles
--------------------------------------------------------------------------*/

body 
{
	font-family: Arial, Tahoma, Sans-Serif;
	font-size: 100%;
	color: #FFF;
}

#p-content { font-size: 0.75em; }
#s-content { }

/* Freeform - normally we have freeform wrapped inside a container of some sort */

.freeform, .freeformFullWidth { margin-bottom: 10px; padding: 1px 8px; background-color: #E6EBE5; color: #3A3A3A; }
.freeform p { margin: 7px 0; }
.freeform ul, #moreInformation ul { margin: 7px 25px; }
.freeform ol, #moreInformation ol { margin: 7px 30px; } /* needs slightly bigger left margin than ul */
.freeform a { font-weight: bold; color: #048e02; text-decoration: none; }
.freeform a:hover { text-decoration: underline; color: #3A3A3A; }


.withrelations { float: left; width: 334px; }

.freeform img { margin: 7px; }
/* CSS3 selectors, for the good browsers */
.freeform img[align=left] { margin-left: 0; }
.freeform img[align=right] { margin-right: 0; }

.freeformPod
{
	margin: 12px 0 0 8px;
	float: right;
	width: 185px;
}

.freeformPod h3
{
	border-bottom: 1px solid #678567;
	font-family: "Trebuchet MS", Arial, Sans-Serif; color: #F4F123; font-size: 1.08em; 
}

.freeformPod ul { margin: 5px 0 0 0; list-style: none; }

.freeformPod a { color: #FFF; text-decoration: none; }
.freeformPod a:hover { text-decoration: underline; }

.freeform h3, .freeform h4 { margin-bottom: -5px; }


/* =Headings
--------------------------------------------------------------------------*/

h1, h5, h6 {}

h2 
{
	margin: 0 0 7px 0;
	padding: 0 8px 4px 8px;
	position: relative;
	border-bottom: 1px solid #678567;
	font-family: "Trebuchet MS", Arial, Sans-Serif; font-size: 1.33em; color: #E4E421;
	text-transform: uppercase;
}

h2 strong { }
h2 em { text-transform: lowercase; font-style: normal; }

h2.innovationTitle img, h2.productTitle img { position: absolute; right: 0; top: -2px; }

h3
{	
	font-family: Arial, Sans-Serif; font-weight: bold; color: #137612; font-size: 1.08em;
	text-transform: uppercase;
}

h3.indent { padding-left: 8px; }

h4
{
	font-family: Arial, Sans-Serif; font-weight: bold; color: #137612; font-size: 1em;	
}


/* =Links
 * 
 * LVHA ( :link / :visited / :hover / :active ) - important due to the way CSS handles cascade / ordering.
--------------------------------------------------------------------------*/

a { }
a:link { }
a:visited { }
a:hover, a:active, a:focus { }

a img { border: 0; }


/* =Access Keys / Jumps
--------------------------------------------------------------------------*/


/* =Forms
--------------------------------------------------------------------------*/

fieldset { border: 0; position: relative; }
legend { display: none; }
label { }

.errorList { margin: 12px 0 0 0; }
.errorList ul
{
	margin: 5px 0 5px 25px;
}

#contactus { margin: 12px 0; }

.name, .email 
{
	display: block;
	float: left;
	clear: left;
	width: 200px;
}

#contactus .name input, #contactus .email input { margin: 5px 0; padding: 2px; display: block; width: 200px; border: 1px solid #BDE3BA; }	

label.comment
{
	display: block;
	position: absolute;
	top: 6px;
	right: 0;
	width: 320px;	
}

label.comment textarea
{
	margin-top: 5px; padding: 2px;
	display: block;
	width: 315px;
	height: 66px;
	border: 1px solid #BDE3BA;
	font-family: Arial, Verdana, Sans-Serif;
	font-size: 100%;
}

.submit { margin: 10px 0 0 0; float: right; clear: both; }


/* =LayoutStructure
--------------------------------------------------------------------------*/

#sitecontainer 
{ 
	margin: 0 auto;
	width: 760px;
}

#header 
{ 
	height: 165px;
	overflow: hidden;
}

#contentcontainer
{	
}

#p-content 
{ 
	margin-bottom: 20px;
	float: right;
	width: 557px;		
}

#s-content 
{ 
	margin-bottom: 20px;
	width: 185px;	
}

#footer { margin: 0 0 10px 204px; padding: 4px 0 0 0; clear: both; border-top: 1px solid #87A485; font-size: 0.63em; color: #87A485; }


/* =Shared Styles
 *
 * If you find your re-using the same styles on certain elements 
 * put them here
--------------------------------------------------------------------------*/

h2 span, #innovationContainer ul li div h3 span, .house h3 span, #randomHouse h3 span, #galleryProductsContainer h3 span
{	
	color: #FFF;
}

p { margin: 7px 0; }

#breadcrumbs
{	
	margin: 2px 8px;
	font-family: Arial, Verdana, Sans-Serif; font-size: 0.92em;
	text-transform: uppercase;
}

#breadcrumbs a { color: #FFF; text-decoration: none; }
#breadcrumbs a:hover { text-decoration: underline; }


/* =header
--------------------------------------------------------------------------*/

#logo
{
	margin: 12px 20px 0 22px;
	float: left;
	position: relative;
}

.persimmon
{
	position: absolute;
	top: 20px; right: 0;	
}


/* =p-content
--------------------------------------------------------------------------*/

/* Homepage */

.randomhouse 
{
	margin: 12px 0; padding: 7px 7px 7px 0;
	height: 136px;
	background: url(/img/houses_corner.gif) no-repeat bottom right;
}

.randomhouse-thumb
{
	margin: -7px 9px 0 0;
	position: relative;
	float: left;	
}

.randomhouse-thumb img { width: 218px; height: 150px; }

.randomhouse h3 { margin: 0 0 5px 0; font-size: 1.08em; text-transform: uppercase; }
.randomhouse h3 a { text-decoration: none; color: #FFF; }

.moreinfo { margin: 7px 0; padding: 0 20px 0 0; display: block; float: left; background: url(/img/featured_arrows/arrow.gif) no-repeat 100% 50%; color: #FFF; font-weight: bold; text-decoration: none; }
.moreinfo:hover, .moreinfo:focus { text-decoration: underline; }

div.modular, li.modular { background-color: #B28D7F; }
div.energy, li.energy { background-color: #BA394E; }
div.eco, li.eco { background-color: #5E7703; }
div.techno, li.techno { background-color: #A59687; }
div.lifetime, li.lifetime { background-color: #78A095; }

a.modular { background-image: url(/img/featured_arrows/modular.gif); }
a.energy { background-image: url(/img/featured_arrows/energy.gif); }
a.eco { background-image: url(/img/featured_arrows/eco.gif); }
a.lifetime { background-image: url(/img/featured_arrows/lifetime.gif); }
a.techno { background-image: url(/img/featured_arrows/techno.gif); }

#remaininghouses, .remaininghouses { margin: 0 0 10px 0; clear: both; float: left; width: 557px; list-style: none; }

.remaininghouses li { margin: 0 16px 0 0; float: left; }
.remaininghouses li a { padding: 100px 0 1px 0; display: block; width: 127px; background-position: top left; background-repeat: no-repeat; font-family: "Trebuchet MS", Arial, Sans-Serif; color: #FFF; font-weight: bold; text-indent: 6px; text-transform: uppercase; text-decoration: none; }
.remaininghouses li a.modular-house { background-image: url(/img/houses/thumbnails_cut/modular.jpg); background-color: #B28D7F; }
.remaininghouses li a.energy-house { background-image: url(/img/houses/thumbnails_cut/energy.jpg); background-color: #BA394E; }
.remaininghouses li a.eco-house { background-image: url(/img/houses/thumbnails_cut/eco.jpg); background-color: #5E7703; }
.remaininghouses li a.lifetime-house { background-image: url(/img/houses/thumbnails_cut/lifetime.jpg); background-color: #78A095; }
.remaininghouses li a.techno-house { background-image: url(/img/houses/thumbnails_cut/techno.jpg); background-color: #A59687; }

.house 
{
	margin: 0 16px 0 0;
	float: left;
	width: 127px;	
}

.house img { display: block; }

.house h4 { margin: 0; padding: 0; clear: left; font-size: 1em; }

.house a 
{ 
	margin: 0;
	padding: 2px 5px; 
	display: block; 
	background: none; 
	font-family: "Trebuchet MS", Arial, Sans-Serif;
	color: #FFF;
	text-transform: uppercase; text-decoration: none;  
}
.house a.modular { background-color: #B28D7F; }
.house a.energy { background-color: #BA394E; }
.house a.eco { background-color: #5E7703; }
.house a.techno { background-color: #A59687; }
.house a.lifetime { background-color: #78A095; }

.last { margin-right: 0 !important; }

#innovatingin { float: left; clear: left; width: 350px; }
#innovatingin h3, #homepageDidYouKnow h3
{ 
	border-bottom: 1px solid #678567;
	font-family: "Trebuchet MS", Arial, Sans-Serif; color: #F4F123; font-size: 1.08em; 
}

#innovatingin ul { margin: 10px 0; list-style: none; }
#innovatingin li { margin-bottom: 18px; width: 170px; }
#innovatingin li.left { clear: left; }
#innovatingin li.right { clear: right; } 
#innovatingin li img { margin-right: 10px; float: left; }
#innovatingin li a { margin-top: 7px; display: block; color: #FFF; text-decoration: none; }
#innovatingin li a:hover { text-decoration: underline; } 

#homepageDidYouKnow
{
	float: right;
	width: 185px;	
	text-align: right;
}

#homepageDidYouKnow h3 { text-align: left; }

.didYouKnow
{
	margin: 7px 0 0 0;
	padding: 0 0 110px 0;
	display: block; 
	float: right; /* seemed to make firefox play correctly, as i interpret things */	
	width: 185px;	
	/*font-size: 90%;*/
	background-position: bottom left;
	background-repeat: no-repeat;
}

.jcb { background-image: url(/img/didyouknow/jcb.jpg); }
.junk { background-image: url(/img/didyouknow/junk.jpg); }
.ocean { background-image: url(/img/didyouknow/ocean.jpg); }
.roof { background-image: url(/img/didyouknow/roof.jpg); }
.thermostat { background-image: url(/img/didyouknow/thermostat.jpg); }
.toilet { background-image: url(/img/didyouknow/toilet.jpg); }
.trees { background-image: url(/img/didyouknow/trees.jpg); }
.wood { background-image: url(/img/didyouknow/wood.jpg); }

.didYouKnow p
{
	margin: 5px 8px 0 8px;
	font-weight: bold;	
}

/* The Houses */

#housescontainer
{
	margin: 12px 0;
	list-style: none;
}

#housescontainer li { margin-bottom: 12px; clear: left; min-height: 97px; background: url(/img/houses_corner.gif) no-repeat bottom right; }

#housescontainer li.modular { background-color: #B28D7F; }
#housescontainer li.energy { background-color: #BA394E; }
#housescontainer li.eco { background-color: #5E7703; }
#housescontainer li.techno { background-color: #A59687; }
#housescontainer li.lifetime { background-color: #78A095; }


#housescontainer h3 { margin: 0 0 -5px 0; padding: 4px 0 0 0; font-family: "Trebuchet MS"; font-size: 1.08em; }
#housescontainer h3 a { color: #FFF; text-transform: uppercase; text-decoration: none; }

.innovation { margin: 0 7px 7px 0; float: left; }

/* The Innovations */

#innovationlist
{
	margin: 12px 0;
	list-style: none;
}

#innovationlist li { margin-bottom: 12px; padding: 0 0 5px 0; min-height: 50px; clear: left; border-bottom: 1px solid #678567; }
#innovationlist h3 { margin: 0 0 -5px 0; padding-top: 3px; font-family: "Trebuchet MS"; font-size: 1.08em; }
#innovationlist h3 a { color: #F4F123; text-transform: uppercase; text-decoration: none; }

#innovationlist .icon { margin: 2px 7px 7px 0; float: left; }

#productTable { margin: 22px 0 20px 0; border-collapse: collapse; }
#productTable th { padding: 0 4px 4px 4px; border: 1px solid #678567; border-bottom: 0; border-top: 0; text-transform: uppercase; }
#productTable th a { color: #FFFC03; text-decoration: none; }
.product { padding: 11px; width: 202px; border: 1px solid #678567; border-left: 0; border-right: 0; }
.product a { color: #B0EDB0; text-decoration: none; font-weight: bold; }

.tick { border: 1px solid #678567; text-align: center; }

/* House Detail */

#interactiveModelContainer { margin-right: 6px; float: right; width: 158px; }

#houseOptions 
{	
	float: right;
	width: 268px;	
}

#houseOptions h3, #inthishouse h3, #inTheGallery h3 
{ 
	border-bottom: 1px solid #678567;
	font-family: "Trebuchet MS", Arial, Sans-Serif; color: #F4F123; font-size: 1.08em; 
}

#houseOptions ul { margin-top: 7px; list-style: none; }
#houseOptions li { margin-bottom: 10px; }
#houseOptions li a { color: #FFF; text-decoration: none; }
#houseOptions li a img { margin-right: 5px; vertical-align: middle; }

#inthishouse
{
	margin: 10px 0 0 0;
	width: 268px;
}

#inthishouse a { text-decoration: none; color: #FFF; }
#inthishouse a:hover, #houseOptions a:hover span, .product a:hover, .movie h4 a:hover { text-decoration: underline; }

#inthishouse ul { margin: 7px 0; list-style: none; }
#inthishouse ul ul { margin: 5px 0; }

#inthishouse li { margin: 0 0 10px 0; padding: 0 0 0 40px; position: relative; }
#inthishouse li a.title { color: #B0EDB0; font-weight: bold; }
#inthishouse li li { margin: 0 0 5px 0; padding: 0; }
#inthishouse li .icon { position: absolute; top: 0; left: 0; }

/* Media Gallery */

#inTheGallery
{
	margin: 10px 0 0 0;
	clear: right;
	float: right;
	width: 268px;
}

#inTheGallery img { margin: 10px 10px 10px 0; float: left; }
#inTheGallery strong a { color: #B0EDB0; }
#inTheGallery p.from a { color: #FFF; font-weight: normal; }
#inTheGallery a:hover { text-decoration: none; }

#houselist, #theinnovations
{	
	width: 268px;
}

#houselist { float: left; }
#theinnovations { float: right; }

#theinnovations li { margin-bottom: 12px; height: 46px; }
#theinnovations li img { margin-right: 5px; vertical-align: middle; }

.movie
{
	margin: 10px 0 15px 8px;
	padding-left: 112px;
	min-height: 78px; /* TODO: IE stylesheet height this */	
}

.moviepic { margin: 0 12px 0 -112px; float: left; }

.movie h4 { font-size: 1em; }
.movie h4 a { color: #B0EDB0; text-decoration: none; }

#houselist ul { margin-top: 10px !important; }
#houselist li { margin-bottom: 15px; clear: left; height: 44px; background-image: url(/img/houses_corner.gif); background-repeat: no-repeat; background-position: bottom right; line-height: 3.5em !important; }
#houselist .left { margin-right: 10px; }
#houselist a { font-family: "Trebuchet MS", Arial, Sans-Serif; font-size: 1.08em; font-weight: bold; }

.thepictures ul { margin: 12px 0 12px 8px; list-style: none; }
.thepictures li { margin: 0 45px 32px 0; float: left; }
.thepictures li.last { margin-right: 0; }

#pictureNav { height: 20px; }
.next { padding: 0 20px 0 0; position: absolute; right: 0; background: url(/img/gallery/next.gif) no-repeat 100% 50%; color: #FFF; text-decoration: none; }
.previous { padding: 0 0 0 20px; position: absolute; left: 0; background: url(/img/gallery/previous.gif) no-repeat 0 50%; color: #FFF; text-decoration: none; }

#pictureContainer { float: left; position: relative; width: 337px; }
#pictureContainer #description { margin: 10px 0; }

#featuredIn { float: right; width: 196px; }
#featuredIn li { margin-bottom: 5px; }
#featuredIn a { font-family: "Trebuchet MS"; font-weight: bold; }

#galleryProductsContainer { margin: 10px 0; }
.galleryProduct { margin-left: 8px; margin-top: 10px; }
.galleryProduct h3 { font-size: 1em; }
.galleryProduct h3 a { color: #E4E421; }
.galleryProduct a { color: #E4E421; text-transform: uppercase; font-weight: bold; text-decoration: none; }
.galleryProduct a:hover { text-decoration: underline; }

/* Product Page */

#mediaLinks, #usedin, #moreInformation
{
	margin: 10px 0 0 8px;
	float: right;
	width: 185px;		
}

#moreInformation h3, #mediaLinks h3, #usedin h3, #houselist h3, #theinnovations h3, .themovies h3, .thepictures h3, #featuredIn h3
{
	border-bottom: 1px solid #678567;
	font-family: "Trebuchet MS", Arial, Sans-Serif; color: #F4F123; font-size: 1.08em; 
}

#mediaLinks ul, #usedin ul, #houselist ul, #theinnovations ul, #featuredIn ul { margin: 5px 0 5px 0; list-style: none; }
#mediaLinks li, #usedin li, #houselist li, #theinnovations li #featuredIn li { line-height: 1.5; }
#mediaLinks a, #usedin a, #houselist a, #theinnovations a, #featuredIn a { color: #FFF; text-decoration: none; }
#mediaLinks a:hover, #usedin a:hover, #houselist a:hover, #theinnovations a:hover, #featuredIn a:hover { text-decoration: underline; }

#moreInformation a { color: #FFF; }
#moreInformation a:hover { text-decoration: none; }

#usedin { font-family: "Trebuchet MS"; font-weight: bold; }


/* =s-content
--------------------------------------------------------------------------*/

#navigation
{
	list-style: none;
	font-family: "Trebuchet MS", Arial, Sans-Serif; font-weight: bold;
	text-align: right; text-transform: uppercase;
}

#navigation li { margin-bottom: 1px; line-height: 1em; }

#navigation a 
{
	padding: 0 20px 0 0;
	background: url(/img/nav_icon_off.gif) no-repeat 100% 50%; 
	font-size: 0.88em; color: #FFF; 
	text-decoration: none; 
}

#navigation a:hover, #navigation a:focus 
{ 
	background-image: url(/img/nav_icon_over.gif);
	color: #fffea4;
}

#navigation a.active
{
	background-image: url(/img/nav_icon_on.gif);
	color: #FFFC03;
}

.sectionLead { margin-top: 8px; }

#templateDidYouKnow
{
	margin: 30px 0 0 0;
	float: right;
	width: 185px;	
	text-align: right;
	font-size: 0.75em;
}

#templateDidYouKnow h3 { padding: 0 5px 0 0; font-size: 100%; color: #FFF; }



/* =footer
--------------------------------------------------------------------------*/

#copyright, #idaho { width: 50%; }
#idahoLogo { margin-top: -3px; vertical-align: middle; }