/* 
	Common-Styles for
	www.gas-wasser-waermetechnik.de
	Author: Markus Bosch
	Version: 0.0.1
*/

 /* ------------------------------------------------------------------------------------------- */
/* global reset ------------------------------------------------------------------------------- */

* {
    margin: 0px;
    padding: 0px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    font-style: normal;
    color: #333333;
    list-style-type: none;
}

 /* ------------------------------------------------------------------------------------------- */
/* tags --------------------------------------------------------------------------------------- */


body {
	background-image: url(../images/background.jpg);
	background-position: top-left;
	background-repeat: repeat-x;
}

body,
html {
    width: 100%;
    height: 100%;
}

h1 {
    font-size: 21px;
    color: #002A80;
    font-weight: normal; 
	padding: 7px 0 8px 0;
}

h2 {
	font-size: 14px;
    color: #002A80;
    font-weight: bold; 
	margin: 4px 0 7px 0;
}

h3 {
    font-size: 14px;
    color: #002A80;
    font-weight: bold; 
	padding: 0 0 8px 0;
}


h4.start {
	background-image: url(../images/icon_route_start.gif);
	background-position: top left;
	background-repeat: no-repeat;
	padding-left: 25px;
	padding-top: 8px;
	height: 25px;
	margin-top: 4px;
}

h4.ziel {
	background-image: url(../images/icon_route_ziel.gif);
	background-position: top left;
	background-repeat: no-repeat;
	padding-left: 25px;
	padding-top: 8px;
	height: 25px;
	margin-top: 0px;
}

p {
	line-height: 150%;
	margin-bottom: 15px;
}

#logo img,
#icons img {
	border: 0px;
}
	

 /* ------------------------------------------------------------------------------------------- */
/* page element ------------------------------------------------------------------------------- */

#page {
    width: 100%;
    width: 815px;
    left: 50%;
    margin-left: -407px;
    min-height: 100%; /* moderne Browser */
    height: auto !important; /* moderne Browser */
    height: 100%; /* IE < 7 */
    position: relative;
	background: #FFFFFF;
}


 /* ------------------------------------------------------------------------------------------- */
/* header element ----------------------------------------------------------------------------- */

#header {
    background-image: url(../images/header_default.jpg);
    background-position: top left;
    background-repeat: no-repeat;
    width: 815px;
    height: 119px;
	padding-top: 25px;
}

#header.gaswasser {
    background-image: url(../images/header_gas-wasser.jpg);
    background-position: top left;
    background-repeat: no-repeat;
    width: 815px;
    height: 119px;
	padding-top: 25px;
}

#header.waerme {
    background-image: url(../images/header_waerme.jpg);
    background-position: top left;
    background-repeat: no-repeat;
    width: 815px;
    height: 119px;
	padding-top: 25px;
}

#header.wasser {
    background-image: url(../images/header_wasser.jpg);
    background-position: top left;
    background-repeat: no-repeat;
    width: 815px;
    height: 119px;
	padding-top: 25px;
}

#header.technik {
    background-image: url(../images/header_technik.jpg);
    background-position: top left;
    background-repeat: no-repeat;
    width: 815px;
    height: 119px;
	padding-top: 25px;
}

#header #logo {
	margin: 0 0 0 25px;
	width: 310px;
	height: 68px;
}

#header #icons {
	position: absolute;
	margin: -68px 0 0 569px;
}

#header #icons li {
	display: inline;
	width: 50px;
	height: 50px;
	margin-right: 4px;

}

 /* ------------------------------------------------------------------------------------------- */
/* content element ---------------------------------------------------------------------------- */

#mainContent {
	margin-top: 18px;
	min-height: 418px;
	background-image: none;
}

#mainContent a {
	background-image: url(../images/list-type-icon.gif);
	background-position: left -8px;
	background-repeat: no-repeat;
	padding-left: 10px;
}

#mainContent a:link,
#mainContent a:visited {
	color: #002A80;
	font-weight: normal;
	text-decoration: underline;
}	

#mainContent a:hover,
#mainContent a:active {
	color: #002A80;
	font-weight: normal;
	text-decoration: none;
}	

#mainContent a:link.active,
#mainContent a:visited.active,
#mainContent a:hover.active,
#mainContent a:active.active {
	color: #002A80;
	font-weight: normal;
	text-decoration: none;
}	

#mainContent #top {
	float: right;
}

#mainContent #top a {
	background-image: url(../images/icon_top.gif);
	background-position: left -3px;
	background-repeat: no-repeat;
	padding-left: 15px;
}

#content img {
	border: 1px solid #C3C3C3;
}

#mainContent a.image:link,
#mainContent a.image:visited,
#mainContent a.image:hover,
#mainContent a.image:active {
	padding: 0px;
	background: none;
}

#mainContent #content {
	background: #FFFFFF;
	width: 385px;
	margin: 0 0 0 224px;
	padding-bottom: 30px;
}

#mainContent #content ul {
	padding-left: 0px;
	line-height: 150%;
	margin: -5px 0 20px 10px;
}

#mainContent #content ul li {
	background-image: url(../images/list-type-icon.gif);
	background-position: left -7px;
	background-repeat: no-repeat;
	padding-left: 13px;
}


#mainContent.default {
	background-image: url(../images/bg_default.gif);
	background-position: bottom left;
	background-repeat: no-repeat;
	padding-bottom: 30px;
}
/*
#mainContent.gaswasser {
	background-image: url(../images/bg_default.gif) !important;
	background-position: bottom left;
	background-repeat: no-repeat;
	/*padding-bottom: 30px;
}*/

#mainContent.wasser {
	background-image: url(images/bg_wasser.gif);
	background-position: bottom left;
	background-repeat: no-repeat;
	padding-bottom: 30px;
}
/*
#mainContent.waerme {
	background-image: url(../images/bg_waerme.gif) !important;
	background-position: bottom left;
	background-repeat: no-repeat;
	padding-bottom: 30px;
}
*/
#mainContent.technik {
	background-image: url(../images/bg_technik.gif);
	background-position: bottom left;
	background-repeat: no-repeat;
	padding-bottom: 30px;
}

 /* ------------------------------------------------------------------------------------------- */
/* navigation element ---------------------------------------------------------------------------- */

#navigation {
	width: 149px;
	float: left;
}

/* --- Navigation first Level --- */

#navi ul {
	margin-left: 1px;
}

#navi ul li {
	width: 149px;
	height: 40px;
}

#navi a {
	display: block;
	width: 149px;
	height: 40px;
	font-size: 14px;
}

#navi ul li a:link,
#navi ul li a:visited {
	display: block;
	width: 149px;
	height: 30px;
	background-image: url(../images/navi_inactive.gif);
	background-repeat: no-repeat;
	background-position: top left;
	padding: 10px 0 0 25px;
	text-decoration: none;
	font-weight: normal;
	color: #666666;
}

#navi ul li a:hover,
#navi ul li a:active {
	display: block;
	width: 149px;
	height: 30px;
	background-image: url(../images/navi_active.jpg);
	background-repeat: no-repeat;
	background-position: top left;
	padding: 10px 0 0 25px;
	text-decoration: none;
	color: #003399;
	font-weight: bold;
}

#navi ul li a.active:link,
#navi ul li a.active:visited,
#navi ul li a.active:hover,
#navi ul li a.active:active {
	display: block;
	width: 149px;
	height: 30px;
	background-image: url(../images/navi_active.jpg);
	background-repeat: no-repeat;
	background-position: top left;
	padding: 10px 0 0 25px;
	text-decoration: none;
	color: #003399;
	font-weight: bold;
}

#navi ul li a.subactive:link,
#navi ul li a.subactive:visited,
#navi ul li a.subactive:hover,
#navi ul li a.subactive:active {
	display: block;
	width: 149px;
	height: 30px;
	background-image: url(../images/navi_subactive.jpg);
	background-repeat: no-repeat;
	background-position: top left;
	padding: 10px 0 0 25px;
	text-decoration: none;
	color: #333333;
	font-weight: bold;
}


/* --- Navigation secound Level --- */

#navi ul li.gaswasser,
#navi ul li.waerme,
#navi ul li.technik {
	width: 105px;
	height: 31px;
}

#navi ul li.gaswasser a,
#navi ul li.waerme a,
#navi ul li.technik a {
	display: block;
	width: 147px;
	height: 31px;
	font-size: 14px;
	margin-left: 46px;
}

#navi ul li.gaswasser a:link,
#navi ul li.gaswasser a:visited {
	display: block;
	/*width: 105px;*/
	height: 25px;
	padding-top: 6px;
	/*padding: 6px 0 0 46px;*/
	text-decoration: none;
	font-weight: normal;
	color: #666666;
	margin-left: 25px;
}

#navi ul li.waerme a:link,
#navi ul li.waerme a:visited,
#navi ul li.technik a:link,
#navi ul li.technik a:visited {
	display: block;
	width: 105px;
	height: 25px;
	padding: 6px 0 0 46px;
	text-decoration: none;
	font-weight: normal;
	color: #666666;
	margin-left: 25px;
}

#navi ul li.gaswasser a:link,
#navi ul li.gaswasser a:visited {
	background-image: url(../images/subnavi_gas-wasser_inactive.gif);
	background-repeat: no-repeat;
	background-position: top left;
}

#navi ul li.waerme a:link,
#navi ul li.waerme a:visited {
	background-image: url(../images/subnavi_waerme_inactive.gif);
	background-repeat: no-repeat;
	background-position: top left;
}

#navi ul li.technik a:link,
#navi ul li.technik a:visited {
	background-image: url(../images/subnavi_technik_inactive.gif);
	background-repeat: no-repeat;
	background-position: top left;
}

#navi ul li.gaswasser a:hover,
#navi ul li.gaswasser a:active,
#navi ul li.gaswasser a.active:link,
#navi ul li.gaswasser a.active:visited,
#navi ul li.gaswasser a.active:hover,
#navi ul li.gaswasser a.active:active {
	display: block;
	width: 133px;
	height: 25px;
	padding: 6px 0 0 21px;
	text-decoration: none;
	font-weight: bold;
	color: #ffffff;
	margin-left: 25px;
	background-image: url(../images/subnavi_gas-wasser_active.jpg);
	background-repeat: no-repeat;
	background-position: top left;
}

#navi ul li.waerme a:hover,
#navi ul li.waerme a:active,
#navi ul li.waerme a.active:link,
#navi ul li.waerme a.active:visited,
#navi ul li.waerme a.active:hover,
#navi ul li.waerme a.active:active {
	display: block;
	width: 105px;
	height: 25px;
	padding: 6px 0 0 46px;
	text-decoration: none;
	font-weight: bold;
	color: #ffffff;
	margin-left: 25px;
	background-image: url(../images/subnavi_waerme_active.jpg);
	background-repeat: no-repeat;
	background-position: top left;
}

#navi ul li.technik a:hover,
#navi ul li.technik a:active,
#navi ul li.technik a.active:link,
#navi ul li.technik a.active:visited,
#navi ul li.technik a.active:hover,
#navi ul li.technik a.active:active {
	display: block;
	width: 105px;
	height: 25px;
	padding: 6px 0 0 46px;
	text-decoration: none;
	font-weight: bold;
	color: #ffffff;
	margin-left: 25px;
	background-image: url(../images/subnavi_technik_active.jpg);
	background-repeat: no-repeat;
	background-position: top left;
}


/* --- sidebar --- */

#sidebar {
	position: absolute;
	display: block;
	width: 180px;
	height: 99px;
	margin: 66px 0 0 635px;
}

#duschkopfbrause {
	padding: 0;
	width: 169px;
	height: 232px;
	margin: 0 0 15px 11px;
	background: #999 url(../images/bg_duschkopfbrause.jpg) top left no-repeat;
}

#duschkopfbrause h3 {
	padding: 0px;
	margin: 0 0 2px 10px;
	padding-top: 4px;
	color: #ffffff;
	line-height: 110%;
}

#duschkopfbrause p {
	color: #ffffff;
	margin-left: 10px;
}

#duschkopfbrause p a:link,
#duschkopfbrause p a:visited {
	display: block;
	width: 90px !important;
	height: 38px !important;
	margin: 148px 0 0 0;
	background: url(../images/teaser-link-icon.gif) left 3px no-repeat;
	padding-left: 10px;
	color: #ffffff;
	font-weight: normal;
	text-decoration: none;
	line-height: 130%;
}

#duschkopfbrause p a:hover,
#duschkopfbrause p a:active {
	display: block;
	background: url(../images/teaser-link-icon_hover.gif) left 3px no-repeat;
	padding-left: 10px;
	color: #ffffff;
	text-decoration: underline;
}	

#preisanfrage {
	padding: 17px 0 0 28px;
	width: 163px;
	height: 71px;
	/*margin-top: 140px;*/
}

#sidebar a {
	display: block;
	width: 180px;
	height: 99px;
	text-decoration: none;
	cursor: pointer;
}

#sidebar a:link,
#sidebar a:visited {
	display: block;
	width: 180px;
	height: 99px;
	background-image: url(../images/preisanfrage_inactive.gif);
	background-repeat: no-repeat;
	background-position: top left;
}

#sidebar a:hover,
#sidebar a:active {
	display: block;
	width: 180px;
	height: 99px;
	background-image: url(../images/preisanfrage_active.jpg);
	background-repeat: no-repeat;
	background-position: top left;
}

#sidebar a.active:link,
#sidebar a.active:visited,
#sidebar a.active:hover,
#sidebar a.active:active {
	display: block;
	width: 180px;
	height: 99px;
	background-image: url(../images/preisanfrage_active.jpg);
	background-repeat: no-repeat;
	background-position: top left;
}

#oeffnungszeiten {
	background-image: url(../images/oeffnungszeiten.jpg);
	background-repeat: no-repeat;
	background-position: top left;
	width: 180px;
	height: 99px;
	padding: 14px 0 0 0px;
	margin-top: 10px;
}

#oeffnungszeiten h3 {
	margin-left: 27px;
	padding-bottom: 6px;
	}

#oeffnungszeiten p {
	text-align: right;
	width: 150px;
	line-height: 135%;
	font-weight: bold;
	color: #333333;
	/*margin-bottom: 4px !important;*/
	}

#oeffnungszeiten .time1 {
	margin-left: 8px;
	font-weight: normal;
	color: #000000;
}

#oeffnungszeiten .time2 {
	margin-left: 8px;
	margin-top: 5px;
	font-weight: normal;
	color: #000000;
}

#oeffnungszeiten span sup {
	padding: 0 0 0 2px;
	font-size: 0.9em;
}

#routenplaner {
	width: 180px;
	height: 268px;
	background-image: url(../images/bg_routenplaner.jpg);
	background-position: top right;
	background-repeat: no-repeat;
	margin-top: -6px;
}

#routenplaner input {
	margin-bottom: 2px;
}

#routenplaner #start {
	margin: 0 0 0 24px;
	padding-top: 9px;
}

#routenplaner #fromstreet {
	width: 139px;
	margin-top: -5px;
}

#routenplaner #fromcity {
	width: 94px;
}

#routenplaner #fromcountry {
	width: 143px;
}

#routenplaner #ziel {
	margin: 0 0 0 24px;
	padding-top: 9px;
}

#routenplaner #ziel p {
	margin: -6px 0 0 0;
	line-height: 130%;
}

#routeSubmit {
	display: block;
	width: 147px;
	height: 27px;
	background-image: url(../images/button_route_inactive.gif);
	background-position: top left;
	background-repeat: no-repeat;
	border: 0px;
	padding-bottom: 3px;
	margin: 5px 0; 
	font-size: 12px !important;
	cursor: pointer;
}

#space {
	width: 60px;
}


/* Formular ----------------------- */

.formInput,
.formTextarea {
	margin-bottom: 3px;
	border: 1px solid #002A80;
}

.formInput {
	height: 19px;
	padding-top: 2px;
}

.formTextarea {
	
}

.formAnfrage {
	padding-top: 10px;
}

.kontaktSubmit {
	display: block;
	width: 111px;
	height: 31px;
	background-image: url(../images/button_kontakt-absenden.gif);
	background-position: top left;
	background-repeat: no-repeat;
	border: 0px;
	padding: 0 0 3px 0;
	font-size: 12px !important;
	cursor: pointer;
	float: left;
	margin: 5px 20px 0 0;
}

.kontaktReset {
	display: block;
	width: 111px;
	height: 31px;
	background-image: url(../images/button_kontakt-absenden.gif);
	background-position: top left;
	background-repeat: no-repeat;
	border: 0px;
	padding: 0 0 3px 0;
	font-size: 12px !important;
	cursor: pointer;
	margin-top: 5px;
}

.gasText {
	margin-right: 31px;
	float: left;
	color: #ffffff;
	font-weight: bold;
	font-size: 14px;
}


#navi ul li.gaswasser a:link .gasText,
#navi ul li.gaswasser a:visited .gasText {
	font-weight: bold;
	color: ffffff;
}

#navi ul li.gaswasser a:hover .gasText, 
#navi ul li.gaswasser a:active .gasText {
	text-decoration: none;
	font-weight: bold;
	color: #ffffff;
}

#navi ul li.gaswasser a.actvie:link .gasText,
#navi ul li.gaswasser a.actvie:visited .gasText,
#navi ul li.gaswasser a.actvie:hover .gasText, 
#navi ul li.gaswasser a.actvie:active .gasText {
	text-decoration: none;
	font-weight: bold;
	color: #ffffff;
}

#mainContent #content ul#linklist {
	padding-left: 0px;
	line-height: 150%;
	margin: -5px 0 20px 10px;
}

#mainContent #content ul#linklist li {
	background: none;
	padding-left: 13px;
}