﻿/*------------------------------------------------------------------

[ STYLE.CSS ] Main Stylesheet

--------------------------------------------------------------------



[Table of contents]



1.	RESET



2.	MAIN STYLES

2.a  Tags defaults

2.b  Base layout

2.c  Navigations

2.d  Elements, ID's & Classes



3.	FORMS

3.a  General form styles

3.b  Individual forms



4.	PLUGINS



5. PRINT





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



1.	RESET

	Global reset for all HTML elements



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



@media handheld, projection, screen, print {



* { font-family: inherit; font-size: 100%; font-style: inherit; font-weight: inherit; margin: 0; outline: 0; padding: 0; vertical-align: baseline }

html { height: 100% }

body { background: #fff; color: #000; font-size: 100.01%; min-height: 101%; text-align: left }

img, fieldset, abbr, acronym { border: 0 }

ul, ol { list-style: none; list-style-position: outside }

table { border-collapse: collapse; border-spacing: 0; width: 100% }

address, caption, cite, code, dfn, em, strong, th, var { font-style: normal; font-weight: normal }

caption, th { text-align: left }

q:before, q:after, blockquote:before, blockquote:after { content: '' }

input, select, textarea, button { font-size: 1em; line-height: normal; width: auto; vertical-align: middle }

textarea { height: auto; overflow: auto }

option { padding-left: 0.6em }

button { background: none; border: 0; text-align: center }

h1, h2, h3, h4, h5, h6 { font-weight: normal; line-height: normal }





} @media handheld, projection, screen {





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



2.	MAIN STYLES

	General definitions



--------------------------------------------------------------------



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

2.a Tags defaults

---------------------------------

[?] Tags only. No classes or ID's here.

*/

	

body {

	background: #e3e0cf url(../img/bg.png) repeat-x;

	color: #312823;

	font-family: Arial, Helvetica, sans-serif;

	font-size: 13px;

	line-height: 20px;

	text-align: center;

}

body#home { background-image: url(../img/bg_home.png) }



p, ul, ol, table, dl, dd, pre { margin: 0 0 20px }



strong { font-weight: bold }

em { font-style: italic }

code, pre { font-family: "Courier New", Courier, monospace }

dt { font-weight: bold }

cite { font-style: italic }

q { font-style: italic }

blockquote { font-style: italic; padding: 0 2.67em }



abbr, acronym { border-bottom: 1px dotted; cursor: help }





/* Headlines

-------------------------------

[?] Always define: font-size - line-height - margin

*/



h1 {

	font-size: 40px;

	font-weight: bold;

	margin: 0 0 35px;

}

h2 {

	font-size: 34px;

	font-weight: bold;

	margin: 0;

}

h3 {

	font-size: 20px;

	font-weight: bold;

	margin: 0 0 16px;

}

h4 {

	font-size: 16px;

	font-weight: bold;

	margin: 10px 0 6px;

}





/* Anchors

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



a, a:link, a:visited {

	color: #dc5b39;

	cursor: pointer;

	text-decoration: none;

}

a:hover, a:active, a:focus { text-decoration: underline }





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

2.b Base layout

---------------------------------

[?] Mostly ID's. Classes & tags allowed.

*/



#background { 

	background: url(../img/bg_banner.jpg) no-repeat center 110px;

	overflow: hidden;

}

#home #background { background-image: url(../img/bg_banner-big.jpg) }



#wrap {

	margin: 0 auto;

	text-align: left;

	width: 960px;

	position: relative;

}

	#header, #banner, #content, #footer {

		float: left; display: inline;

		clear: both;

		width: 100%;

		position: relative;

	}

	#header {

		height: 110px;

		z-index: 4;

	}

		#logo { margin: 0 }



			#logo a {

				background: url(../img/logo.jpg) no-repeat;

				display: block;

				text-indent: -9999px;

				height: 31px; width: 199px;

				position: absolute;

				top: 32px; left: 10px;

			}

			#tagline {

				color: #514c4d;

				font-size: 14px;

				margin: 0;

				position: absolute;

				top: 64px; left: 10px;

			}



	#banner { 

		color: #fff;

		height: 100px;

		padding: 39px 0 0 10px;

		width: 515px;

	}

	#home #banner { height: 250px }



	#content { padding: 20px 0 40px }



		#postList {

			margin: 30px 0 60px -18px;

			overflow: hidden;

			padding: 0 0 0 10px;

		}

		#main {

			float: left;

			padding: 0 0 0 10px;

			width: 590px;

		}

		#sidebar {

			float: right;

			margin: 0 5px 0 0;

			width: 305px;

		}



#footer { background: #f2f1e9 url(../img/bg_footer.jpg) repeat-x }



	#footer div.foot-align {

		height: 237px;

		margin: 0 auto;

		position: relative;

		width: 960px;

	}





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

2.c Navigations

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



ul.nav { margin: 0 }





/* Main navigation

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



#nav {

	height: 48px;

	position: absolute;

	bottom: 0; right: 10px;

} 

	#nav > li,

	#nav > li > a { background: url(../img/nav.png) no-repeat center -96px }



	#nav > li {

		float: left;

		line-height: 48px;

		position: relative;

	}

	#nav > li:first-child { background-position: 0 -96px }

	#nav > li.last-child { background-position: right -96px }



		#nav > li > a {

			background-position: 0 -9999px;

			color: #fff;

			float: left;

			font-weight: bold;

			display: block;

			padding: 0 12px;

			text-decoration: none;

			text-shadow: #3f3b3c 0 1px;

		}

		#nav > li > a:hover { color: #f4e990 }



		#nav > li.drop-down:hover > ul { background: #514c4d; top: 46px }



	#nav > li.active, #nav > li.current { 

		background-position: 0 0  !important; 

		margin: 0 0 0 -10px;

		padding: 0 10px;

		position: relative;

		z-index: 2;

	}

		#nav > li.active > a, #nav > li.current > a  {

			background-position: right -48px !important;

			color: #fff;

			margin: 0 -20px 0 0;

			padding-right: 20px;

			text-shadow: #486460 0 1px;

		}



html.cufon-active #nav li a cufon { margin: 20px 0 18px }



/* Sub Navigation */



#nav > li > ul {

	background: #638b85;

	padding-top: 5px;

	position: absolute;

	top: -9999px; left: 1px;

	width: 185px;

	box-shadow: 0 2px 2px rgba(0,0,0,.3);

	-moz-box-shadow: 0 2px 2px rgba(0,0,0,.3); 

	-khtml-box-shadow: 0 2px 2px rgba(0,0,0,.3);

	-webkit-box-shadow: 0 2px 2px rgba(0,0,0,.3);

}

#nav > li.active:hover > ul, #nav > li.current:hover > ul {

	background: #638b85;

	padding: 0;

	top: 48px; left: 10px;

}

/*#nav > li.active + li.drop-down:hover > ul { left: 1px }*/



#nav > li:hover > ul { top: 44px }



	#nav > li > ul > li { line-height: 32px }



		#nav > li > ul > li:first-child > a { background: none }



		#nav > li > ul > li > a {

			background: url(../img/dotted-line-nav.gif) repeat-x;

			color: #fff;

			display: block;

			padding: 0 13px;

			text-decoration: none;

			text-shadow: #3d6660 0 1px;

		}

		#nav > li > ul > li > a:hover { color: #f9e861 }





/* Footer Navigation */



#footerNav {	

	color: #e1dbc5;

	font-size: 11px;

	padding: 0 10px 0 0;

	position: absolute;

	bottom: 6px; right: 0;

}

	#footerNav li {

		float: left;

		border-color: #a42828;

		display: block;

	}

	#footerNav li:first-child { padding: 0 0 0 10px }



	#footerNav li:before { 

		content: "|";

		padding: 0 4px;

	}

	#footerNav li:first-child:before { 

		content: "";

		padding: 0 4px 0 0;

	}

		#footerNav li a {

			color: #a6a396;

			font-size: 11px;

			text-decoration: none;

			padding: 0 4px;

		}

		#footerNav li a:hover { text-decoration: underline }







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

2.d Elements, ID's & Classes

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



/* General elements

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



a.read-more {

	background: #fff;

	color: #312823;

	display: block;

	font-size: 12px;

	font-weight: bold;

	line-height: 22px;

	height: 22px;

	margin: 20px 0 0;

	text-align: center;

	text-decoration: none;

	width: 100px;

	-moz-border-radius: 3px; -khtml-border-radius: 3px; 

	-webkit-border-radius: 3px; border-radius: 3px;

}

a.read-more:hover { background: #dc5b39; color: #fff }

a.read-more:active { background: #544f50; color: #fff }





/* Header */



p#contactData {

	position: absolute;

	top: 22px; right: 2px

}

	p#contactData a,

	p#contactData span { 

		font-weight: bold; 

		margin: 0 8px 0 0 

	}

	p#contactData a { 

		color: #dc5b39;

		text-decoration: none

	}

	



/* Banner */



#banner h2 span { color: #f4e990 }



#banner p { margin: 0 }



#banner p.sub { 

	color: #f6f6f6; 

	font-size: 16px; 

	margin: 0 0 30px;

	text-shadow: #305051 0 1px;

}



#banner p.links { overflow: hidden }



	#banner p.links a {

		background: url(../img/dotted-line.png) repeat-x 1px 37px;

		color: #f4e990;

	}

	#banner p.links a,

	#banner p.links span { 

		display: block; 

		float: left;

		font-size: 14px;

		line-height: 52px;

		margin: 0 5px 0 0;

		text-shadow: #356559 0 1px;

		text-decoration: none;

	}

	#banner p.links a#contactButton {

		background: url(../img/bt_banner-contact-us.png) no-repeat;

		color: #fff;

		font-size: 16px;

		font-weight: bold;

		line-height: 52px;

		margin: 0 11px 0 0;

		padding: 0;

		text-align: center;

		text-decoration: none;

		text-shadow: #ab5f43 0 -1px;

		text-transform: uppercase;

		width: 221px; height: 52px;

	}

	#banner p.links a#contactButton:hover { background-position: 0 -80px }

	#banner p.links a#contactButton:active { background-position: 0 -149px }



html.cufon-active #banner h2 cufon { padding-bottom: 6px }





/* Post List */



#postList div.post {

	float: left;

	margin: 0 0 0 18px;

	width: 302px;

}

	#postList div.post h3 a { color: #312823; text-decoration: none }

	#postList div.post h3 a:hover { color: #dc5b39 }



	#postList div.post img {

		background: #fff url(../img/bg_img.gif) repeat-x 0 bottom;

		border-left: #c7c4b5 1px solid;

		border-right: #c7c4b5 1px solid;

		margin: 0 0 17px;

		padding: 3px 3px 5px;

		width: 294px;

	}

	#postList div.post p { margin: 0 }





/* Main */



/* [Headings] */

		

#home #main h2, 

#home #main h3 { margin: 0 0 25px }



#main h1, 

#main div.help-box h3,

ul.truck-choices li h4 { color: #638b85 }



#main h2, 

#main h3 { 

	color: #312823; 

	margin: 40px 0 15px;

}





/* [Other] */



#main p { font-size: 15px; line-height: 22px }



#main p.introduction {	margin: 0 0 80px }



div.help-box {

	background: #fff url(../img/bg_div-featuredServices.png) repeat-x 0 bottom;

	border: 1px solid #fff;

	margin: 25px 0;

	padding: 25px;

	box-shadow: 0 2px 2px rgba(0,0,0,.3);

	-moz-box-shadow: 0 2px 2px rgba(0,0,0,.3); 

	-khtml-box-shadow: 0 2px 2px rgba(0,0,0,.3);

	-webkit-box-shadow: 0 2px 2px rgba(0,0,0,.3);

}

	#main div.help-box h3 {

		background: url(../img/ico_small-telephone.png) no-repeat;

		margin: 0 0 16px;

		padding: 5px 0 0 40px;

	}

	div.help-box p {

		font-size: 15px;

		line-height: 22px;

		margin: 0;

	}

		div.help-box p a {

			background: url(../img/arrow.png) no-repeat right 8px;

			display: block;

			margin: 15px 0 0;

			width: 138px;

		}





div.dt-container { 

	margin: 30px 0 30px -21px; 

	overflow: hidden

}

	div.dt-container dl.info { 

		float: left; 

		margin: 0 0 0 21px;

		width: 182px

	}

		div.dt-container dl.info dt {

			color: #548c84;

			font-size: 13px;

			margin: 0 0 5px;

		}

		div.dt-container dl.info dd.name {

			background: url(../img/dot-kontakt.png) repeat-x 0 bottom;

			color: #312823;

			font-size: 15px;

			font-weight: bold;

			margin: 0 0 6px;

			padding: 0 0 8px;

		}

		div.dt-container dl.info dd.phone {

			color: #312823;

			font-size: 13px;

			margin: 0;

		}





/* [Lists] */



ul.photos-list {

	margin: 0 0 7px -18px;

	overflow: hidden

}

	ul.photos-list li {

		float: left;

		margin: 0 0 18px 18px;

	}

		ul.photos-list li a { display: block }



		ul.photos-list li a img {

			background: #fff url(../img/bg_img.gif) repeat-x 0 bottom;

			border-left: #c7c4b5 1px solid;

			border-right: #c7c4b5 1px solid;

			padding: 3px 3px 5px;

		}



div.sub-container { overflow: hidden }



p.sub-photolist { 

	float: left; 

	margin: 0

}

	

	p.sub-photolist a,

	p.sub-photolist a span { 

		background: url(../img/bg_facebook-link.png) no-repeat;

		display: block;

		float: left;

	}

	p.sub-photolist a {

		color: #fff;

		font-size: 12px;

		line-height: 20px;

		height: 22px;

		text-align: left;

		text-decoration: none;

		position: relative;

	}

		p.sub-photolist a span {

			background-position: right bottom;

			height: 22px;

			margin-right: -66px;

			padding: 0 70px 0 12px;

		}



p.logos { 

	float: right; 

	margin: 0 10px 0 0; 

	overflow: hidden

}

	p.logos img { margin: 0 0 0 15px }



#main ul.features-list {

	margin: -30px 0 0;

	overflow: hidden;

}

	#main ul.features-list li {

		float: left;

		margin: 0 0 30px;

		padding: 38px 0 0 318px;

		position: relative;

	}	

		#main ul.features-list li h3 {

			margin: 0;

			position: absolute;

			top: 0; left: 0;

		}	

		#main ul.features-list li img {

			background: #fff url(../img/bg_img.gif) repeat-x 0 bottom;

			border-left: #c7c4b5 1px solid;

			border-right: #c7c4b5 1px solid;

			margin: 0 0 17px;

			padding: 3px 3px 5px;

			position: absolute;

			top: 40px; left: 0;

			width: 294px;

		}

		#main ul.features-list li p {

			font-size: 13px;

			line-height: 20px;

			min-height: 140px;

		}





ul.item-list {

	color: #365954;

	font-size: 15px;

	line-height: 22px;

	margin: 0 0 25px 15px;

}

	ul.item-list li:first-child { margin: 0 }



	ul.item-list li {

		background: url(../img/bullet.png) no-repeat 0 4px;

		margin: 10px 0 0;

		padding: 0 0 0 24px;

	}





ul.truck-choices {

	margin: 25px 0 0 -20px;

	overflow: hidden;

}

	ul.truck-choices li {

		float: left;

		margin: 0 0 20px 20px;

		width: 280px;

	}

		ul.truck-choices li p {

			height: 66px;

			margin: 0;

		}

		ul.truck-choices li img {

			background: #fff url(../img/bg_img.gif) repeat-x 0 bottom;

			border-left: #c7c4b5 1px solid;

			border-right: #c7c4b5 1px solid;

			padding: 3px 3px 5px;

			width: 273px;

		}







/* Sidebar */



#sidebar div.container {

	background: #544f50;

	margin: 0 0 28px;

	padding: 20px 20px 28px;

	width: 260px;

	box-shadow: 0 2px 2px rgba(0,0,0,.3);

	-moz-box-shadow: 0 2px 2px rgba(0,0,0,.3); 

	-khtml-box-shadow: 0 2px 2px rgba(0,0,0,.3);

	-webkit-box-shadow: 0 2px 2px rgba(0,0,0,.3);

}



#sidebar #contactForm { padding-bottom: 25px }



	#sidebar #contactForm h3 {

		background: url(../img/ico_sidebar.png) no-repeat;

		color: #fff;

		padding: 7px 0 3px 42px;

		text-shadow: #3b3738 0 1px;

	}



#sidebar #featuredServices { 

	background: #fff url(../img/bg_div-featuredServices.png) repeat-x 0 bottom; 

	border: 1px solid #fff;

}



	#sidebar #featuredServices h3 {

		background: url(../img/ico_sidebar.png) no-repeat 0 bottom;

		color: #312823;

		padding: 12px 0 8px 52px;

	}

		#sidebar #featuredServices ul {

			background: url(../img/dotted-line-sidebar.gif) no-repeat;

			margin: 0;

			padding: 15px 0 0;

		}

			#sidebar #featuredServices ul li:first-child { margin: 0 }



			#sidebar #featuredServices ul li {

				background: url(../img/bullet.png) no-repeat 0 1px;

				margin: 10px 0 0;

				padding: 0 0 0 21px;

			}



#sidebar div.locationMap-container {

	box-shadow: 0 2px 2px rgba(0,0,0,.3);

	-moz-box-shadow: 0 2px 2px rgba(0,0,0,.3); 

	-khtml-box-shadow: 0 2px 2px rgba(0,0,0,.3);

	-webkit-box-shadow: 0 2px 2px rgba(0,0,0,.3);

}



#sidebar #locationMap {

	background: #544f50;

	margin: 0 0 28px;

	padding: 20px 20px 28px;

	box-shadow: inset 0 0 20px rgba(0,0,0,.3);

	-moz-box-shadow: inset 0 0 20px rgba(0,0,0,.3); 

	-khtml-box-shadow: inset 0 0 20px rgba(0,0,0,.3);

	-webkit-box-shadow: inset 0 0 20px rgba(0,0,0,.3);

}

	#sidebar #locationMap h3 {

		background: url(../img/bg_location-h3.png) no-repeat right 3px;

		color: #e3e0cf;

		margin: 0 0 19px;

	}

	#sidebar #locationMap p {

		color: #e3e0cf;

		font-family: Georgia, "Times New Roman", Times, serif;

		font-size: 12px;

		margin: 17px 0 0;

	}

		#sidebar #locationMap p a {

			color: #dc5b39;

			display: block;

		}





/* Footer */	



div.foot-align p#footLogo {

	background: url(../img/logo-footer.jpg) no-repeat;

	height: 36px; width: 170px;

	margin: 0;

	position: absolute;

	text-indent: -9999px;

	top: 128px; left: 10px;

}



div.foot-align p#copy {

	color: #a6a396;

	font-size: 11px;

	margin: 0;

	position: absolute;

	bottom: 6px; left: 10px;

}



div.foot-align p#ftMail {

	background: url(../img/ico_telephone.png) no-repeat;

	height: 41px;

	padding: 0 0 0 118px;

	position: absolute;

	top: 128px; right: 33px;

}

	div.foot-align p#ftMail a { font-weight: bold }

	

html.cufon-active div.foot-align p#ftMail { right: 68px }



div.foot-align p#ftContactData {

	position: absolute;

	top: 148px; right: 2px;

}	

	div.foot-align p#ftContactData span {

		font-weight: bold;

		margin: 0 8px 0 0

	}







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



3.	FORMS

	Styles for forms only



--------------------------------------------------------------------



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

3.a General form styles

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



/* Form elements

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



input.text, 

select.select,

textarea.textarea {

	background: #fff none;

	border: 0 none;

	color: #999;

	font-family: Arial, Helvetica, sans-serif;

	font-size: 14px;

	height: 17px;

	padding: 9px;

	box-shadow: inset 0 1px 2px rgba(0,0,0,.6);

	-moz-box-shadow: inset 0 1px 2px rgba(0,0,0,.6); 

	-khtml-box-shadow: inset 0 1px 2px rgba(0,0,0,.6);

	-webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,.6);

	-moz-border-radius: 5px; -khtml-border-radius: 5px; 

	-webkit-border-radius: 5px; border-radius: 5px;

}

input.text { width: 242px }

select.select { width: 200px }

textarea.textarea { height: 77px; width: 242px }



input.submit {

	color: #000;

	cursor: pointer;

	padding: 5px 10px;

}





/* General forms

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



form.form ol.fieldset {	/*-*/ }



	form.form ol.fieldset li.field {

		margin: 0 0 1em;

		position: relative;

	}

		form.form ol.fieldset li.field label {

			display: block;

			font-weight: bold;

			margin-bottom: 5px;

		}



form.form p.submit { /*-*/ }





/* Search Forms

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



form.search { margin-bottom: 1.33em }



	form.search p.fields { margin: 0 }



		form.search p.fields input, form.search p.fields button {

			display: inline;

			vertical-align: middle;

		}





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

3.b Individual forms

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



form#quickContact p.submit,

form#contact p.submit { margin: 0 }



	form#quickContact p.submit input.submit,

	form#contact p.submit input.submit { 

		background: url(../img/bt_submit.png) no-repeat;

		border: 0 none;

		color: #fff;

		cursor: pointer;

		font-size: 14px;

		font-weight: bold;

		margin: 0;

		padding: 8px 0 13px;

		text-shadow: 0 1px 0 #9c4731;

		text-transform: uppercase;

		width: 122px;

	}

	form#quickContact p.submit input.submit:hover,

	form#contact p.submit input.submit:hover { background-position: 0 -60px }



	form#quickContact p.submit input.submit:active,

	form#contact p.submit input.submit:active { background-position: 0 -113px }

	



form#contact { 

	background: url(../img/dot-kontakt.png) repeat-x 0 bottom;

	margin: 0 0 50px;

	padding: 0 0 50px

}

	form#contact ol.fieldset { margin: 40px 0 0 }



		form#contact ol.fieldset li { overflow: hidden }



			form#contact ol.fieldset li label {

				color: #347269;

				font-weight: normal;

				float: left;

				margin: 0 10px 0 0;

				overflow: hidden;

				padding: 9px 0 0;

				text-align: right;

				text-shadow: #fff 0 1px;

				width: 135px

			}

				form#contact ol.fieldset li label span { 

					color: #d93817;

					display: block;

					float: right;

					font-size: 28px; 

					font-weight: bold;

					line-height: 30px;

					margin-left: 6px;

					text-shadow: #fff 0 1px;

				}

			form#contact ol.fieldset li input.text { width: 259px }

			form#contact ol.fieldset li textarea.textarea { width: 350px }



		form#contact p.info { 

			color: #99947a;

			font-size: 12px;

			margin: -10px 0 15px 145px;

			overflow: hidden;

			text-shadow: #fff 0 1px;

		}

			form#contact p.info span {

				display: block; 

				float: left; 

			}

			form#contact p.info span + span { 

				color: #d93817;

				font-size: 28px; 

				font-weight: bold;

				margin: 6px 0 0 6px;

				text-shadow: #fff 0 1px;

			}

		form#contact p.submit input.submit { margin-left: 145px } 







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



4.	PLUGINS

	Predefined utilities



--------------------------------------------------------------------



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

	Utility classes

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



.skip { position: absolute; top: 0; left: -9999px }







} @media print {



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



5.	PRINT

	Styles for print



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



body { background: none; color: #000; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 10pt }

code, pre { font-family: "Courier New", Courier, mono }

img { float: left; clear: left; page-break-inside: avoid; page-break-after: avoid }



a, a:link, a:visited { color: blue; text-decoration: underline }



blockquote, table, pre { page-break-inside: avoid }

ul, ol, dl { page-break-before: avoid }

h1, h2, h3, h4, h5, h6 { display: block; font-weight: bold; page-break-after: avoid }



#footer, .ad, #nav, .nav, form, .skip { display: none }



h1 { font-size: 3em; margin: .67em 0; }

h2 { font-size: 2em; margin: .83em 0; }

h3 { font-size: 1.5em; margin: 1em 0; }

h4 { font-size: 1em; margin: 1.33em 0; }

h5 { font-size: 0.92em; margin: 1.67em 0; }

h6 { font-size: 0.83em; margin: 2.33em 0; }





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

	END CSS

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



}/* end @media */
