/* 
----- ALLGEMEINE ELEMENTE UND KLASSEN -----
*/

html 
{
	text-align: center;
	margin: 0;
	padding: 0;
}

body 
{
	text-align: center;
	margin: 0;
	padding: 0;
	background: #ffffe5 url(../img/layout/verlauf.jpg) 0 0 repeat-x;
}

ul
{
	margin: 0;
	padding: 0;
}

img,
a img
{
	border: 0;
	outline: 0;
}

a div
{
    cursor: pointer;
}

.left {
	float:left;
}

img.left {
	margin:5px 15px 10px 0;
}

/* Startseite */

body#start
{
	background: #fff;
}

div#center
{
	text-align: left;
	width: 1099px;
	display: block;
	float: none;
	margin: 20px auto;
	background: url(../img/layout/header-back.jpg) 0 0 no-repeat;
}

div#home-center
{
	text-align: center;
	width: 1099px;
	display: block;
	float: none;
	margin: 150px auto;
}

/* Header */

div#header
{
	width: 1000px;
	height: 426px;
}

div#logo
{
	margin-top: 84px;
	margin-left: 38px;
	float: left;
}

div#title
{
	margin-top: 140px;
	margin-left: 40px;
	float: left;
}

/* Hauptinhalt */

div#container
{
	width: 1000px;
	overflow: auto;
	background: #fff url(../img/layout/tiles.gif) 475px bottom no-repeat;
	margin: 0;
	padding: 0;
	clear: left;
	border-left: 1px solid #ffdaab;
	border-right: 1px solid #ffdaab;
}

div#left
{
	float: left;
	width: 620px;
	padding: 0 0 200px 50px;
}

div#right
{
	float: right;
	margin-right: 20px;
	border-top: 35px solid #fff;
	width: 240px;
	padding: 0 0 120px 0;
}

/* Footer */

div#footer
{
	height: 32px;
	width: 1002px;
	background: url(../img/layout/footer.gif) 0 bottom no-repeat;
	clear: both;
	color: #fff;
	font-size: 11px;
}

div#footer div#copyright
{
	margin: 7px 0 0 12px;
	float: left;
}

div#footer div#impressum
{
    float:right;
    margin: 7px 12px 0 0;
}

div#footer div#impressum a
{
    text-decoration: none;
    color: #fff;
}

div#footer div#impressum a:hover,
div#footer div#impressum a:focus
{
    color: #6699ff;
}

div#border-bottom
{
	height:25px;
	width: 1000px;
}

div#breadcrumb
{	color: #999;
	margin: 20px 0 0 51px;
	float: left;
	font-size: 11px;
}

div#breadcrumb a
{
	color: #999;
	text-decoration: none;
}

div#breadcrumb a.last 
{	color: #e6601d;
}

div#breadcrumb span#divider
{
	color: #999;
	font-weight: bold;
}

/* Allgemeine Klassen */

.clear 
{
	clear: both;
}

.nodisplay 
{
	display: none;
}

.blue, 
div#container p.blue
{
	color: #6699ff;
	font-weight: bold;
}

div#left h1 span.grey
{
    color:#999;
    font-size:20px;
    line-height: 25px;
	display:block;
	margin-top:10px;
}

/* 
----- TEXT --------------------------------
*/

html, body
{
	font-family: Verdana, Helvetica, Arial, sans-serif;
}

/* 
----- LINKS -------------------------------
*/

html a
{
	color: #e6601d;
	outline: 0;
	text-decoration:none;
}

html p.more a
{
	text-decoration:underline;
}

div#right a
{
	text-decoration:underline;
}

html a:hover,
html a:focus
{
	color: #6699ff;
}

a.read-on
{
	background: url(../img/layout/read-on.gif) 0 4px no-repeat;
	padding: 0 0 0 15px;
	margin-top:5px;
	display:block;
}

a.read-on:hover,
a.read-on:focus
{
	background: url(../img/layout/read-on_hover.gif) 0 4px no-repeat;
}

/* 
----- LISTEN ------------------------------
*/

/* 
----- FORMULARE ---------------------------
*/

/* 
----- HAUPTNAVIGATION ---------------------
*/

div#hauptmenu
{
	float:left;
	font-size: 12px;
	z-index:111;
	width:1000px;
	padding: 3px 0 0;
	margin: 0;
}

* html div#hauptmenu
{	padding-top:0;
}

div#hauptmenu a
{
	text-decoration: none;
}

div#hauptmenu a:hover,
div#hauptmenu a:focus
{
	color: #6699ff;
}

div#hauptmenu ul
{
	margin-left: 12px;
}

div#hauptmenu ul li
{	list-style-type: none;
	background: url(../img/layout/menu_inactive.gif) 0 0 no-repeat;
	width: 240px;
	height: 40px;
	margin: 0 5px 0 0;
	padding-top: 12px;
	display: inline;
	float: left;
	position: relative;
	z-index: 112;
}

div#hauptmenu ul li:hover,
div#hauptmenu ul li.hover
{
	background-image: url(../img/layout/menu_active.gif);
}

div#hauptmenu ul li a
{
	clear: left;
	padding-left: 45px;
}

div#hauptmenu ul li ul
{
	display: none;
	margin: 0;
	padding: 0;
	margin-top: 0px;
	position: absolute;
	left:0;
	top:38px;
	z-index: 113;
}

div#hauptmenu ul li:hover ul,
div#hauptmenu ul li.hover ul 
{
	display: block;
	clear: left;
	float: left;
}

div#hauptmenu ul li ul li.first,
div#hauptmenu ul li:hover ul li.first,
div#hauptmenu ul li.hover ul li.first 
{
	background: url(../img/layout/menu-list-whole.gif) left top no-repeat;
}

div#hauptmenu ul li ul li,
div#hauptmenu ul li.hover ul li,
div#hauptmenu ul li:hover ul li
{
	background: url(../img/layout/menu-list-whole.gif) left center no-repeat;
	margin: 0;
	padding: 0;
	height: auto;
	clear: left;
}

div#hauptmenu ul li ul li.last,
div#hauptmenu ul li.hover ul li.last,
div#hauptmenu ul li:hover ul li.last
{
	background: url(../img/layout/menu-list-whole.gif) left bottom no-repeat;
}

div#hauptmenu ul li ul li a,
div#hauptmenu ul li.hover ul li a,
div#hauptmenu ul li:hover ul li a
{
	display: block;
	padding: 8px 32px 8px 45px;
}

div#hauptmenu ul li ul li.first a,
div#hauptmenu ul li.hover ul li.first a,
div#hauptmenu ul li:hover ul li.first a
{
	margin-top: 10px;
} 

div#hauptmenu ul li ul li.last a,
div#hauptmenu ul li ul li.last a
{
	padding-bottom: 7px;
	margin-bottom:10px;
}

div#hauptmenu ul li ul li.headline,
div#hauptmenu ul li ul li.headline:hover,
div#hauptmenu ul li.hover ul li.headline,
div#hauptmenu ul li:hover ul li.headline
{ height: auto;
}

div#hauptmenu ul li ul li.headline span
{	display: block;
	margin: 15px 20px 10px 20px;
	padding: 0 0 10px 25px;
	color: #999;
	font-family: Georgia, Times,serif;
	font-size: 12px;
	border-bottom: 1px solid #813910;	
}

/* Planung und Beratung */

div#hauptmenu ul ul li a.planung,
div#right ul li a.planung
{
	background: url(../img/layout/icons/planung.gif) 12px center no-repeat;
}

div#hauptmenu ul ul li a.planung:hover,
div#hauptmenu ul ul li a.planung:focus,
div#right ul li a.planung:hover,
div#right ul li a.planung:focus
{
	background-image: url(../img/layout/icons/planung_hover.gif);
}

/* Betonbau und Maurerarbeiten */

div#hauptmenu ul ul li a.betonbau,
div#right ul li a.betonbau
{
	background: url(../img/layout/icons/betonbau.gif) 12px center no-repeat;
}

div#hauptmenu ul ul li a.betonbau:hover,
div#hauptmenu ul ul li a.betonbau:focus,
div#right ul li a.betonbau:hover,
div#right ul li a.betonbau:focus
{
	background-image: url(../img/layout/icons/betonbau_hover.gif);
}

/* Zimmmmererarbeiten */
 
div#hauptmenu ul ul li a.zimmerer,
div#right ul li a.zimmerer
{
	background: url(../img/layout/icons/zimmerer.gif) 12px center no-repeat;
}

div#hauptmenu ul ul li a.zimmerer:hover,
div#hauptmenu ul ul li a.zimmerer:focus,
div#right ul li a.zimmerer:hover,
div#right ul li a.zimmerer:focus
{
	background-image: url(../img/layout/icons/zimmerer_hover.gif);
}

/* Fenster un Tueren */

div#hauptmenu ul ul li a.fenster,
div#right ul li a.fenster
{
	background: url(../img/layout/icons/fenster.gif) 12px center no-repeat;
}

div#hauptmenu ul ul li a.fenster:hover,
div#hauptmenu ul ul li a.fenster:focus,
div#right ul li a.fenster:hover,
div#right ul li a.fenster:focus
{
	background-image: url(../img/layout/icons/fenster_hover.gif);
}

/* Fliesenlegerarbeiten */

div#hauptmenu ul ul li a.fliesen,
div#right ul li a.fliesen
{
	background: url(../img/layout/icons/fliesen.gif) 12px center no-repeat;
}

div#hauptmenu ul ul li a.fliesen:hover,
div#hauptmenu ul ul li a.fliesen:focus,
div#right ul li a.fliesen:hover,
div#right ul li a.fliesen:focus
{
	background-image: url(../img/layout/icons/fliesen_hover.gif);
}

/* Natursteinarbeiten */

div#hauptmenu ul ul li a.naturstein,
div#right ul li a.naturstein
{
	background: url(../img/layout/icons/naturstein.gif) 12px center no-repeat;
}

div#hauptmenu ul ul li a.naturstein:hover,
div#hauptmenu ul ul li a.naturstein:focus,
div#right ul li a.naturstein:hover,
div#right ul li a.naturstein:focus
{
	background-image: url(../img/layout/icons/naturstein_hover.gif);
}

/* Malerarbeiten */

div#hauptmenu ul ul li a.maler,
div#right ul li a.maler
{
	background: url(../img/layout/icons/maler.gif) 12px center no-repeat;
}

div#hauptmenu ul ul li a.maler:hover,
div#hauptmenu ul ul li a.maler:focus,
div#right ul li a.maler:hover,
div#right ul li a.maler:focus
{
	background-image: url(../img/layout/icons/maler_hover.gif);
}

/* Garten- und Landschaftsgestaltung */

div#hauptmenu ul li ul li a.garten,
div#right ul li a.garten
{
	background: url(../img/layout/icons/garten.gif) 12px center no-repeat;
}

div#hauptmenu ul li ul li a.garten:hover,
div#hauptmenu ul li ul li a.garten:focus,
div#right ul li a.garten:hover,
div#right ul li a.garten:focus
{
	background-image: url(../img/layout/icons/garten_hover.gif);
}
 
/* Zaunanlagen */

div#hauptmenu ul ul li a.zaun,
div#right ul li a.zaun
{
	background: url(../img/layout/icons/zaun.gif) 12px center no-repeat;
}

div#hauptmenu ul ul li a.zaun:hover,
div#hauptmenu ul ul li a.zaun:focus,
div#right ul li a.zaun:hover,
div#right ul li a.zaun:focus
{
	background-image: url(../img/layout/icons/zaun_hover.gif);
}

/* Sanierung und Umbau */

div#hauptmenu ul ul li a.umbau,
div#right ul li a.umbau
{
	background: url(../img/layout/icons/umbau.gif) 12px center no-repeat;
}

div#hauptmenu ul ul li a.umbau:hover,
div#hauptmenu ul ul li a.umbau:focus,
div#right ul li a.umbau:hover,
div#right ul li a.umbau:focus
{
	background-image: url(../img/layout/icons/umbau_hover.gif);
}


div#hauptmenu ul ul li a.sanitaer,
div#right ul li a.sanitaer
{
	background: url(../img/layout/icons/sanitaer.gif) 12px center no-repeat;
}

div#hauptmenu ul ul li a.sanitaer:hover,
div#hauptmenu ul ul li a.sanitaer:focus,
div#right ul li a.sanitaer:hover,
div#right ul li a.sanitaer:focus
{
	background-image: url(../img/layout/icons/sanitaer_hover.gif);
}


div#hauptmenu ul ul ul,
div#hauptmenu ul:hover ul ul,
div#hauptmenu ul ul:hover ul,
div#hauptmenu ul ul ul:hover,
div#hauptmenu ul li.hover ul ul,
div#hauptmenu ul li.hover ul ul,
div#hauptmenu ul ul li.hover ul {
	display: none;
}

/* 
----- SERVICENAVIGATION -------------------
*/

div#service
{
	float: right;
	width:200px;
	height:25px;
	color: #fff;
	font-size: 12px;
	margin-top: 80px;
}

div#service ul li
{
	display: block;
	float: right;
	width:20px;
	height:20px;
	margin-right: 10px;
	margin-top:5px;
	overflow: hidden;
}

div#service ul li.text-link {
	width:auto;
}

div#service ul li a
{
	display:block;

	padding: 10px;
}

div#service ul li a span
{
	display: block;
	padding: 20px;
}

div#service ul li a.home
{
	background: url(../img/layout/icons/home.gif) 0 0 no-repeat;
}

div#service ul li a.home:hover,
div#service ul li a.home:focus
{
	background-image: url(../img/layout/icons/home_hover.gif);
}

div#service ul li a.sitemap
{
	background: url(../img/layout/icons/sitemap.gif) 0 3px no-repeat;
}

div#service ul li a.sitemap:hover,
div#service ul li a.sitemap:focus
{
	background-image: url(../img/layout/icons/sitemap_hover.gif);
}

div#service ul li a.imprint
{
	background: url(../img/layout/icons/imprint.gif) 5px 0 no-repeat;
}

div#service ul li a.imprint:hover,
div#service ul li a.imprint:focus
{
	background-image: url(../img/layout/icons/imprint_hover.gif);
}


div#service ul li a.contact
{
	background: url(../img/layout/icons/contact.gif) 0 2px no-repeat;
	padding:0 5px 0 25px;
	color:#fff;
	font-size:11px;
}

div#service ul li a.contact:hover,
div#service ul li a.contact:focus
{
	background-image: url(../img/layout/icons/contact_hover.gif);
	color:#6699ff;
}

/* 
----- CONTENT -----------------------------
*/

div.content
{
	clear: both;
	margin: 0;
	padding:0;
}



div#container h1, div#container h2, div#container h3, div#container h4
{
	font-weight: normal;
}

div#left h1
{
	font-size: 30px;
	font-family: Georgia, Times, serif;
	color: #e6601d;
	margin: 0 0 10px 0;
}

div#left h2
{
	font-size: 16px;
	font-family: Arial, Helvetica, Verdana, sans-serif;
	color: #999;
	margin: 25px 0 3px 0;
}

div#left h3
{
	font-size: 16px;
	font-family: Arial, Helvetica, Verdana, sans-serif;
	color: #e6601d;
	margin: 0;
}

div#left h4
{
	font-size: 14px;
	font-weight:bold;
	font-family: Arial, Helvetica, Verdana, sans-serif;
	color: #999;
	margin: 3px 0 3px 0;
}

div#right h4
{
	font-size: 16px;
	font-family: Georgia, Times, serif;
	color: #6699ff;
	margin: 30px 0 15px 22px;
	display: block;
}

div#container p
{
	font-size: 12px;
	color: #666;
	line-height: 18px;
	margin: 0 0 15px 0;
}

div#container table {
	font-size: 12px;
	color: #666;
	line-height: 18px;
	margin-top:20px;
}

div#container table td {
	height:60px;
	vertical-align:top;
}

/* Bilder */

div.image
{
    overflow:hidden;
}

div#left div.image-left
{	float: left;
	margin: 0 30px 15px 0;
}

div#left div.subteaser div.image-left
{
	margin-top:10px;
	margin-right:15px;
}

div#left div.subteaser div.teaser-text p
{
  margin-bottom:5px;
}

div#left div.thumbnails div.image-left 
{	margin-right: 9px;
	margin-left: 9px;
}

div#left div.image-right
{
	float: right;
	margin: 0 0 15px 30px;
}

div#right div.image
{
	margin: 15px 0 15px 20px;
}

div.image img
{
	position: absolute;
}

div.img-frame
{   position: absolute;
    overflow:hidden;
}

div.img-frame-left-top
{
	background: url(../img/layout/img_border.gif) left top no-repeat;
	width: 60%;
	height: 50%;
	float: left;
}

div.img-frame-right-top
{
	background: url(../img/layout/img_border.gif) right top no-repeat;
	width: 40%;
	height: 50%;
	float: right;
}

div.img-frame-left-bottom
{
	background: url(../img/layout/img_border.gif) left bottom no-repeat;
	width: 60%;
	height: 50%;
	clear: both;
	float: left;
}

div.img-frame-right-bottom
{
	background: url(../img/layout/img_border.gif) right bottom no-repeat;
	width: 40%;
	height: 50%;
	float: right;
}

div#container table img {
	margin-left:10px;
}

/* Safari Rules */
@media screen and (-webkit-min-device-pixel-ratio:0) {
	div.img-frame-left-top
	{
		height: 60.5%;
	}

	div.img-frame-right-top
	{
		height: 60.5%;
	}
	
	div.img-frame-left-bottom
	{
		height: 40%;
	}

	div.img-frame-right-bottom
	{
		height: 40%;
	}
}

/* Opera Rules */
@media all and (min-width: 0px){
	
	div.img-frame-left-bottom
	{
		border-bottom:1px solid #fff;
	}

	div.img-frame-right-bottom
	{
		border-bottom:1px solid #fff;
	}
}

/** Fadery **/

div.thumbnails div.img-frame
{   cursor: pointer;
}

div.active div.img-frame
{	background: url(../img/layout/play-small.png) no-repeat center;	}

div.active div.img-frame:hover,
div.active div.img-frame.hover
{	background: url(../img/layout/pause-small.png) no-repeat center;	}

div.paused-thumbs div.active div.img-frame,
div.playing-thumbs div.hover div.img-frame
{	background: url(../img/layout/pause-small.png) no-repeat center;	}

div.paused-thumbs div.active:hover div.img-frame,
div.paused-thumbs div.hover div.img-frame
{	background: url(../img/layout/play-small.png) no-repeat center;	}

div.fadery {
	display: none;
}

div.gallery div.img-frame
{	cursor: pointer;
}

div.playing:hover div.img-frame,
div.playing div.hover div.img-frame
{	background: url(../img/layout/pause.png) no-repeat center;
}

div.paused:hover div.img-frame,
div.paused div.hover div.img-frame
{	background: url(../img/layout/play.png) no-repeat center;
}


/* Listen */

div#left ul
{
	color: #666;
	font-size: 12px;
	line-height: 22px;
	margin: 0 0 15px 0;
	padding: 0;
}

div#left ul li
{
	list-style-type: none;
	background: url(../img/layout/list-point.gif) 15px 8px no-repeat;
	padding: 0 0 0 30px;
	
	
}

div.content-right-float
{
	float:right;
	width: 340px;
}

/* SiteMap */


div#left div.sitemap ul ul li
{	background-image: url(../img/layout/list-plus.gif);
}

/* Navigationsliste rechte Spalte */

div#right p,
div#right ul
{
	font-size: 12px;
}

div#right p
{
	margin: 0 0 0 22px;
}

div#right ul 
{
	margin: 0 0 0 10px;
	padding: 0;
}

div#right ul li
{
	list-style-type: none;
	margin: 0;
	padding: 0;
	display: block;
	border: 1px solid #fff;
}

div#right ul li a
{
	text-decoration: none;
	display: block;
	padding: 6px 0 6px 45px;
	border: 1px solid #fff;
}

/* Pagination */

div#container div#left div.pagination 
{	width:100%;
	margin-top: 30px;
	padding-top:10px;
	border-top: 1px dotted #999;
	float: left;
	clear: both;
	white-space: nowrap;
}

div#container div#left div.pagination a.previous
{
	background:url("../img/layout/icons/zurueck.gif") 0 2px no-repeat;
	padding-left:18px;
	font-size:11px;
	float:left;
        clear: left;
}

div#container div#left div.pagination a.previous:hover,
div#container div#left div.pagination a.previous:focus
{
	background:url("../img/layout/icons/zurueck_hover.gif") 0 2px no-repeat;
}

div#container div#left div.pagination a.next
{
	background:url("../img/layout/icons/weiter.gif") right 2px no-repeat;
	padding-right:18px;
	font-size:11px;
	float:right;
}

div#container div#left div.pagination a.next:hover,
div#container div#left div.pagination a.next:focus
{
	background:url("../img/layout/icons/weiter_hover.gif") right 2px no-repeat;
}

/* Teaserlisten */

div#container div#left div.subteaser-list
{
	border-top: 1px dotted #ccc;
	margin-top:20px;
	padding-top:15px;
}

div#container div#left div.subteaser-list div.subteaser h3 a.teaserhead
{
	text-decoration: none;
}

div#container div#left div.subteaser-list div.subteaser a.teaserlink
{
	background:url("../img/layout/icons/weiter.gif") 0 4px no-repeat;
	padding-left:18px;
	font-size:12px;
}

div#container div#left div.subteaser-list div.subteaser a.teaserlink:hover,
div#container div#left div.subteaser-list div.subteaser a.teaserlink:focus
{
	background:url("../img/layout/icons/weiter_hover.gif") 0 4px no-repeat;
}

div#container div#left div.subteaser-list div.subteaser
{	clear: both;
	margin: 0 0 30px 0;
	
}
div#container div#left div.subteaser-list div.subteaser div.teaser-text
{	float: left;
	width: 500px;
	margin-top:10px;
	margin-bottom:20px;
}


/* Kontaktformular */

form#contacts fieldset
{
    border: 1px solid #ccc;
    padding: 20px;
    -moz-border-radius: 5px;
}

form#contacts fieldset div.left
{
    float:left;
    width:50%;
}

form#contacts fieldset div.left label,
form#contacts fieldset div.right label
{
    float:left;
    clear:left;
    color: #e6601d;
    font-size: 14px;
    font-family:Times, serif;
    margin-left:5px;
}

form#contacts fieldset div.left input,
form#contacts fieldset div.left select
{
    float:left;
    clear:left;
    width:200px;
    margin-bottom:12px;
    border: 1px solid #ccc;
}

form#contacts fieldset div.left input#contacts_email_0
{
    margin-bottom: 0px;
}

form#contacts fieldset div.right
{
    float:right;
    width:50%;
}

form#contacts fieldset div.right textarea
{
    width:285px;
    height: 285px;
    border: 1px solid #ccc;
    float:left;
}

form#contacts fieldset div.left input,
form#contacts fieldset div.left select,
form#contacts fieldset div.right textarea
{
    padding: 2px;
    font-size: 11px;
    color: #666;
    font-family:Verdana, Arial, Helvetica, sans-serif;
    -moz-border-radius: 5px;
}

form#contacts fieldset div.left input:hover,
form#contacts fieldset div.left input:focus,
form#contacts fieldset div.left select:hover,
form#contacts fieldset div.left select:focus,
form#contacts fieldset div.right textarea:hover,
form#contacts fieldset div.right textarea:focus
{
    border:1px solid #6699ff;
}

form#contacts fieldset div.right button.submit
{
    background: url(../img/layout/button.gif) 0 5px no-repeat;
    border:0;
    color: #fff;
    float:right;
    font-size:12px;
    width:104px;
    height:39px;
    margin-top: 15px;
}

form#contacts fieldset div.right button.submit:hover,
form#contacts fieldset div.right button.submit:focus
{
    color: #6699ff;
}

form#contacts fieldset div.formerror
{
    float:left;
    width:270px;
    font-size: 12px;
    color: #6699ff;
}

div.sent
{
    font-size: 12px;
    color: #666;
    font-weight:bold;
    margin-top:30px;
}

div.linktext
{
	clear:both;
}

/* Winter Special */

div#right h4 span.special {
	color:#e6601d;
	text-transform:uppercase;
}

div#right div.special {
	position:relative;
}

div#right div.special img.snow-flakes {
	top:10px;
	left:10px;
}

div#right a.winterspecial {
    margin-top: 10px;
    margin-left: 10px;
    position: absolute;
    z-index: 1;
}