/*
Title:      	Screen Media Styles
Author:     	Dmitri Galakhov
Updated:    	May 09
*/


/* Basic Structure
================================================== */

html, body
{
	margin:0;
	padding:0;
	overflow:hidden;
}

body
{
	font: 62.5% Arial, sans-serif;
    background: #27a22d url('') repeat 50% top;
    width:100%;
	height:100%;
	position: absolute;
}

.clear
{
	clear: both;
	height: 0px;
}

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

h1
{
	height: 35px;
	width: 174px;
	margin: 0px auto;
	padding: 0px;
	text-indent: 50px;
	color: #fff;
	font-size: 2.2em;
	font-weight: normal;
	line-height: 3em;
	text-indent: 0px;
}

h1 a:hover
{
	border: 0px;
}

h1 img
{
	padding-top: 20px;
}

h2
{
	font-size: 1.3em;
	font-weight: bold;
	padding: 10px;
}

h3
{

}

h4
{
	
}

a
{
	color: #292929;
}

/* Header, Logo, Slogan
================================================== */

#layout
{
	position: relative;
	width: 100%;
	height: 100%;
	overflow: auto;
}

#wrapper
{
	position: relative;
	/*width: 980px;*/
	width: 782px;
	left: 50%;
	margin-left:-489px;
	float: left;
	height: 100%;
	background-color: #fff;
}

.fixed
{
	position: absolute;
	bottom: 0px;
	left: 50%;
	z-index: 1;
}

#header
{
	position: relative;
	height: 227px;
	width: 782px;
	padding-top:40px;
	background: #27A22D url(../img/bg_top.jpg) no-repeat scroll 0 40px;
}

#logo
{
	position: absolute;
	top: 23px;
	left: 23px;
	width: 194px;
	height: 71px;
	background: transparent url('../img/firma_bg.gif') left top no-repeat;
	margin-top:40px;
}

#slogan
{
	position: absolute;
	top: 120px;
	left: 23px;
	width: 192px;
	height: 82px;
	background: transparent url('../img/slogan_bg.gif') left top no-repeat;
	margin-top:40px;
}

#switch_block
{
	position: absolute;
	top: 0px;
	right: 70px;
	width: 248px;
	height: 40px;
	background: transparent url('../img/vorher_bg.gif') left top no-repeat;
	margin-top:40px;
}

#main
{
	float: left;
	width: 782px;
	position: relative;
}

#menu
{
	height: 40px;
	width: 782px;
	position: relative;
}

#menu ul
{
	display: block;
	height: 40px;
	width: 782px;
	cursor: pointer;
}

#menu ul li
{
	float: left;
	height: 40px;
}

#menu ul li#index
{
	width: 52px;
	background: transparent url('../img/menu01.gif') left top no-repeat;
}

#menu ul li#index.act
{
	width: 52px;
	background: transparent url('../img/menu01_act.gif') left top no-repeat;
}

#menu ul li#entgrauer
{
	width: 90px;
	background: transparent url('../img/menu02.gif') left top no-repeat;
}

#menu ul li#entgrauer.act
{
	width: 90px;
	background: transparent url('../img/menu02_act.gif') left top no-repeat;
}

#menu ul li#kraftreiniger
{
	width: 105px;
	background: transparent url('../img/menu03.gif') left top no-repeat;
}

#menu ul li#kraftreiniger.act
{
	width: 105px;
	background: transparent url('../img/menu03_act.gif') left top no-repeat;
}

#menu ul li#pflege_emulsion
{
	width: 126px;
	background: transparent url('../img/menu04.gif') left top no-repeat;
}

#menu ul li#pflege_emulsion.act
{
	width: 126px;
	background: transparent url('../img/menu04_act.gif') left top no-repeat;
}

#menu ul li#mehrzwecktuecher
{
	width: 135px;
	background: transparent url('../img/menu05.gif') left top no-repeat;
}

#menu ul li#mehrzwecktuecher.act
{
	width: 135px;
	background: transparent url('../img/menu05_act.gif') left top no-repeat;
}

#menu ul li#haendler
{
	width: 80px;
	background: transparent url('../img/menu06.gif') left top no-repeat;
}

#menu ul li#haendler.act
{
	width: 80px;
	background: transparent url('../img/menu06_act.gif') left top no-repeat;
}

#menu ul li#presse
{
	width: 72px;
	background: transparent url('../img/menu07.gif') left top no-repeat;
}

#menu ul li#presse.act
{
	width: 72px;
	background: transparent url('../img/menu07_act.gif') left top no-repeat;
}

#menu ul li#faq
{
	width: 57px;
	background: transparent url('../img/menu08.gif') left top no-repeat;
}

#menu ul li#faq.act
{
	width: 57px;
	background: transparent url('../img/menu08_act.gif') left top no-repeat;
}

#menu ul li#kontakt
{
	width: 65px;
	background: transparent url('../img/menu09.gif') left top no-repeat;
}

#menu ul li#kontakt.act
{
	width: 65px;
	background: transparent url('../img/menu09_act.gif') left top no-repeat;
}

#content
{
	width: 682px;
	background-color: #fff;
	padding: 25px 50px;
	float: left;
}

#sidebar
{
	position:absolute;
	right:-200px;
	top:0px;
	width:180px;
	background: transparent url('../img/sidebar_tmp.jpg') 22px 109px no-repeat;
	height: 650px;
}

#sidebar ul
{
	float: right;
	margin-right:44px;
	margin-top:80px;
}

#sidebar ul li
{
	height: 80px;
	width: 114px;
	position: relative;
	margin-top:14px;
	cursor: pointer;
}

#sidebar ul li img
{
	border: 0px;
	width: 114px;
	height: 66px;
}

#footer
{
	padding-bottom: 25px;
	margin-top: 23px;
	width: 790px;
	height: 24px;
	background: #27A22D url(../img/footer.gif) no-repeat scroll left top;
	margin-left: -497px;
}

#impressum
{
	float: right;
	width: 80px;
	height: 24px;
	cursor: pointer;
}

/*  Modules
================================================== */

/* Copyright and Technical Information
================================================== */

/* Navigation
================================================== */

/* Typography
================================================== */

p
{
	margin: 0px;
	font-size: 14px;
	padding: 10px 10px 5px 10px;
}

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

small, sub, sup { font-size: 0.8em }
sub             { vertical-align: sub; }
sup             { vertical-align: super; }

strong 	{ font-weight: bold; }
em 		{ font-style: italic; }

.steps
{
	padding: 20px 0px 50px 10px;
	float: left;
}

.steps p
{
	font-size:12px;
	color:#27A22D;
	float: left;
	width: 146px;
	padding-top: 155px;
	padding-left: 0px;
}

.steps div
{
	width: 146px;
	height: 230px;
	float: left;
	padding-right: 22px;
}


/* Links
================================================== */

a
{
	text-decoration: none;
	font-weight: normal;
	color: #999;
}

a:hover
{
	/*border-bottom: 1px dotted #9cae9f;*/
}

/* Tables
================================================== */

table { margin-right: 2px; }

table, td, th
{
	border: 0px;
	border-collapse: collapse;
}

td
{
	padding: 5px 5px 5px 6px;
	font-size: 12px;
}

td p, th p
{
	font-size: 12px;
	padding: 7px 5px 5px;
}

th p
{
	padding: 10px 5px 9px 5px;
}

th
{
	text-transform: uppercase;
	background-color: #F9F9F9;
	color: #000;
}