@import url(reset.css);
@import url(thickbox.css);

/* ---	


		**********************************************************************************

		GUIDELINE USING EMS FOR RELATIVE SIZE
		
		**********************************************************************************

		browser default font size (in most browsers) should be set to 16px
		Change only percent in body font-size should result in following differences:

		62.5%		(10px)
		----------------------------
		h1 = 2.2em = 22px
		h2 = 1.5em = 15px
		h3 = 1.3em = 13px
		h4 = 1.2em = 12px
		h5 = 1.2em = 12px
		h6 = 1.2em = 12px
		
		div, p, table etc... = 1em = 10px

		padding & margins: 0.25em = 2.5px
		padding & margins: 0.5em = 5px
		padding & margins: 1em = 10px

		ex. h1 padding: 0.25em = 5.5px (22px x 0.25 = 5.5px = 6px)



		68.75%		(11px)
		----------------------------
		h1 = 2.2em = 24.2px = 24px
		h2 = 1.5em = 16.5px = 17px
		h3 = 1.3em = 14.3px	= 14px
		h4 = 1.2em = 13.2px = 13px
		h5 = 1.2em = 13.2px	= 13px
		h6 = 1.2em = 13.2px = 13px
		
		div, p, table etc... = 1em = 11px

		padding & margins: 0.25em = 2.75px
		padding & margins: 0.5em = 5.5px
		padding & margins: 1em = 11px

		ex. h1 padding: 0.25em = 6.05px (24.2px x 0.25 = 6.05px = 6px)



		75%			(12px)
		----------------------------
		h1 = 2.2em = 26.4px
		h2 = 1.5em = 18px
		h3 = 1.3em = 15.6px
		h4 = 1.2em = 14.4px
		h5 = 1.2em = 14.4px
		h6 = 1.2em = 14.4px
		
		div, p, table etc... = 1em = 12px

		padding & margins: 0.25em = 3px
		padding & margins: 0.5em = 6px
		padding & margins: 1em = 12px

		ex. h1 padding: 0.25em = 6.6px (26.4px x 0.25 = 6.6px = 7px)



		100%		(16px)
		----------------------------
		h1 = 2.2em = 35.2px
		h2 = 1.5em = 24px
		h3 = 1.3em = 20.8px
		h4 = 1.2em = 19.2px
		h5 = 1.2em = 19.2px
		h6 = 1.2em = 19.2px
		
		div, p, table etc... = 1em = 16px
		
		padding & margins: 0.25em = 4px
		padding & margins: 0.5em = 8px
		padding & margins: 1em = 16px

		ex. h1 padding: 0.25em = 8.8px (35.2px x 0.25 = 8.8px = 9px)


--- */


body
{
	background: #637d4d url('../../images/backgrounds/bg.gif') repeat-x top left;
	font-family: "Trebuchet MS", Arial, Helvetica, Geneva;
	font-size: 68.75%;
	color: #222;
	text-align: center;
}

div, span, p, a, ul, li, li li, li a, li p, label, legend, fieldset, input, select, textarea
{
	font-size: 1em;
	line-height: 1.5em;
}

h1, h2, h3, h4
{
	font-weight: normal;
	letter-spacing: 0.08em;
	margin: 0 0 0.5em 0;
}

h1 { font-size: 2em; padding: 0.2em 0 0.2em 0; line-height: 1.4em; }
h3 { font-size: 1.6em; padding: 0.2em 0 0.2em 0; line-height: 1.2em; }

p { margin: 0.5em 0 1em 0; }

img { border: 0; }

a:link, a:visited
{
	color: #637d4d;
	text-decoration: none;
}

a:hover
{
	color: #92a383;
	text-decoration: none;
}

a[href$='.pdf'] {
display:inline-block;
padding-left:20px;
line-height:18px;
background:transparent url('../../images/icons/pdf.gif') center left no-repeat;
}


#wrapper
{
	width: 980px;
	margin: 20px auto 0 auto;
	padding: 0;
	background: url('../../images/backgrounds/bgshadow.png') repeat-y top left;
}

#topshadow
{
	width: 980px;
	height: 10px;
	margin: 0 auto 0 auto;
	padding: 0;
	background: url('../../images/backgrounds/topshadow.gif') no-repeat top left;
}

#footershadow
{
	width: 980px;
	height: 10px;
	margin: 0 auto 30px auto;
	padding: 0;
	background: url('../../images/backgrounds/bottomshadow.png') no-repeat top left;
}

#inner
{
	width: 960px;
	margin: 0 auto 0 auto;
	padding: 0;
	background: #fff;
}

#logotype
{
	background: #fff url('../../images/backgrounds/topbg.gif') no-repeat top left;
	width: 940px;
	height: 150px;
	margin: 0 auto 0 auto;
	padding: 0;
}

#ImageGallery
{
	width: 940px;
	height: 350px;
	margin: 0 auto 0 auto;
	padding: 0;
}

#ImageGallery #LargeImageContainer
{
	width: 580px;
	height: 350px;
	float: left;
}

#ImageGallery #ThumbsContainer
{
	width: 359px;
	height: 350px;
	float: right;
}

#ImageGallery #ThumbsContainer ul
{
	list-style: none;
	margin: 0 0 0 0.6em;
	padding: 0;
	width: 359px;
}

#ImageGallery #ThumbsContainer li
{
	list-style: none;
	margin: 0;
	padding: 0;
	float: left;
}

#ImageGallery #ThumbsContainer li img
{
	list-style: none;
	margin: 0;
	padding: 0;
	display: block;
}

#ImageGallery #ThumbsContainer li.spacer
{
	list-style: none;
	margin: 0 0 0 0.6em;
	padding: 0;
	float: left;
}

#ImageGallery #ThumbsContainer ul.spacer2
{
	list-style: none;
	margin: 0.5em 0 0 0.6em;
	padding: 0;
	float: left;
}

h2
{
	font: bold 190%/100% Arial, Helvetica, sans-serif;
	margin: 0 0 .2em;
}

h2 em
{
	font: normal 80%/100% Arial, Helvetica, sans-serif;
	color: #999;
}

/*
TOP NAVIGATION
==================================================== */

#TopNav
{
	width: 940px;
	height: 30px;
	margin: 1em auto 1em auto;
	padding: 0;
	background: #24400e url(../../images/navigation/topnavbg.gif) repeat-x top left;
	text-align: left;
	border-right: 1px solid #25410e;
	border-bottom: 1px solid #25410e;
	border-right: 1px solid #25410e;
}

#TopNav ul
{
	list-style: none;
	margin: 0;
	padding: 0;
}

#TopNav li
{
	float: left;
	margin: 0;
	padding: 0.7em 0.9em 0.8em 0.9em;
	border-right: 1px solid #fff;
}

#TopNav li a:link, #TopNav li a:visited
{
	color: #fff;
	text-decoration: none;
	margin: 0;
	padding: 0;
}

#SubNavigation
{
	width: 200px;
	margin: 0;
	padding: 0;
	text-align: left;
	float: left;
}

#SubNavigation #Top {
	padding: 0;
	margin: 0;
	border-bottom: 2px solid #ccc;
	}

#SubNavigation #Top h1 {
	padding: 0.5em 0.5em;
	margin: 0;
	font-size: 1em;
	line-height: 1em;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	}


#SubNavigation ul
{
	list-style: none;
	margin: 0;
	padding: 0;
	border-bottom: 1px dotted #ddd;
}

#SubNavigation li
{
	display: block;
	margin: 0;
	padding: 0.2em 0 0.2em 0;
	border-top: 1px dotted #ddd;
}

#SubNavigation li a:link, #SubNavigation li a:visited
{
	display: block;
	margin: 0;
	padding: 0.2em 0 0.2em 0.5em;
	text-decoration: none;
	color: #333;
}

#SubNavigation li a:hover
{
	display: block;
	margin: 0;
	padding: 0.2em 0 0.2em 0.5em;
	background: #ced4c9;
	text-decoration: none;
	color: #333;
}

#MainContent
{
	float: right;
	margin: 0 0 0 1em;
	padding: 0;
	width: 710px;
	text-align: left;
}

#IamgeFader #Images
{
	list-style:none;
	margin:0;
	padding:0;
}

#ImageFader #Images li img
{
	margin:0;
	padding:0;
}


/*
CONTENT AREA - STARTPAGE
==================================================== */
#ContentContainer
{
	width: 940px;
	margin: 0 auto 1em auto;
	padding: 0;
}

#ContentContainer #LeftColumn
{
	width: 540px;
	margin: 0;
	float: left;
	text-align: left;
}

#ContentContainer #RightColumn
{
	width: 375px;
	margin: 0 0 0 0.5em;
	padding-left: 1.5em;
	float: right;
	text-align: left;
	border-left: 1px solid #eee;
}

#ContentContainer #RightColumn h3
{
	border-bottom: 2px solid #637d4d;
	padding-bottom: 0.1em;
	width: 360px;
}

/*
PROJECT BLOCKS - STARTPAGE
==================================================== */
.projectBlockContainer
{
	background: #a9b4a1 url(../../images/backgrounds/project_block.jpg) repeat-y top left;
	width: 363px;
	padding: 0.5em;
	margin: 0 0 1em 0;
	display: block;
	text-decoration: none;
	color: #476332;
}

.projectBlockContainer .image-container
{
	margin: 0;
	padding: 0;
	float: left;
	width: 120px;
	float: left;
}

.projectBlockContainer .text-container
{
	width: 238px;
	margin: 0;
	padding: 0;
	float: right;
	color: #333;
}

/*.projectBlockContainer
{
	margin: 0 0 0 0.3em;
	padding: 0;
	float: right;
	width: 235px;
	height: 80px;
}*/

.projectBlockContainer a.readMore
{
	color: #476332;
	font-weight: bold;
}


.blockContainer
{
	margin: 0 0 2.5em 0;
	padding: 0;
	width: 700px;
}

.blockContainer .blockImage
{
	width: 208px;
	float: left;
}

.blockContainer .blockImage img
{
	border: 1px solid #ddd;
	padding: 0.3em;
}

.blockContainer .blockText
{
	width: 480px;
	float: right;
}

#Footer
{
	width: 940px;
	margin: 0.5em auto 1em auto;
	padding: 0;
}

.clearfix:after
{
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}

#ContactUs
{
	margin: 0;
	padding: 0;
}

#ContactUs fieldset
{
	border: 1px solid #ddd;
	padding: 1em;
	margin: 0;
	width: 500px;
}

#ContactUs legend
{
	margin: 0 0.5em 0 0.5em;
	letter-spacing: 0.1em;
}

#ContactUs p
{
	width: 600px;
}

#ContactUs label
{
	float: left;
	margin: 0 1em 0 1em;
	width: 150px;
}

#ContactUs input, #ContactUs select
{
	/*float: left;*/
	border: 1px solid #ddd;
	width: 200px;
}

#ContactUs textarea
{
	/*float: left;*/
	border: 1px solid #ddd;
	font-family: "Trebuchet MS", Arial, Helvetica, Geneva;
}

#ContactUs .send
{
	/*float: left;*/
	border: 1px solid #ddd;
	width: 60px;
}

table.DeliveryDeclaration
{
	width: 700px;
	padding: 0;
	border: 0;
}

.DeliveryDeclaration th
{
	width: 175px;
	padding: 0;
	margin: 0;
	font-weight: bold;
	font-size: 1.2em;
	border-bottom: 2px solid #ccc;
	padding: 0.2em 0 0.2em 0.4em;
	background: #eee;
}

.DeliveryDeclaration td
{
	width: 175px;
	padding: 0.2em 0 0.2em 0.4em;
	margin: 0;
	border-bottom: 1px solid #eee;
}

.ProjectGallery
{
	list-style: none;
	margin: 0;
	padding: 0;
}

.ProjectGallery li
{
	float: left;
	margin: 0.5em 0.5em;
	padding: 0;
}

.ProjectGallery li img
{
	float: left;
	margin: 0;
	padding: 0.3em;
	border: 1px solid #eee;
}

form#calc
{
	margin: 0;
	padding: 0;
}

table#MaterialCalculator
{
	margin: 0;
	padding: 0;
	border: 0;
	width: 500px;
}

#MaterialCalculator th
{
	padding: 0;
	margin: 0;
	font-weight: bold;
	font-size: 1.2em;
	border-bottom: 2px solid #ccc;
	padding: 0.2em 0 0.2em 0.4em;
	background: #eee;
}

#MaterialCalculator td
{
	padding: 0.2em 0 0.2em 0.4em;
	margin: 0;
	border-bottom: 1px solid #eee;
}

#MaterialCalculator th.rightAlign, #MaterialCalculator td.rightAlign
{
	text-align: right;
	padding-right: 0.5em;
}

#MaterialCalculator td sup
{
	font-size: 0.7em;
	vertical-align: text-top;
}

#MaterialCalculator td input
{
	border: 1px solid #ccc;
}