/*
 * HTML5 Boilerplate
 *
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */

/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */

html,
button,
input,
select,
textarea {
    color: #222;
}


/*
 * Remove text-shadow in selection highlight: h5bp.com/i
 * These selection declarations have to be separate.
 * Customize the background color to match your design.
 */

::-moz-selection {
    background: #b3d4fc;
    text-shadow: none;
}

::selection {
    background: #b3d4fc;
    text-shadow: none;
}

/*
 * A better looking default horizontal rule
 */

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

/*
 * Remove the gap between images and the bottom of their containers: h5bp.com/i/440
 */

img {
    vertical-align: middle;
}

/*
 * Remove default fieldset styles.
 */

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

/*
 * Allow only vertical resizing of textareas.
 */

textarea {
    resize: vertical;
}

/* ==========================================================================
   Chrome Frame prompt
   ========================================================================== */

.chromeframe {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
}

/* ==========================================================================
   Author's custom styles
   ========================================================================== */

.container{width:998px;margin:auto;}
.clear{clear:both;line-height:0.0001em;font-size:0.0001em;}

body{ background:url(../img/background.png) center repeat-y #e3e3e3;font: 0.82em Tahoma, Geneva, sans-serif; color:#454545; line-height: 1.4; width:100%; height:100%;}
html{ width:100%; height:100%;}
header{width:998px; height:132px; background:url(../img/header.jpg) no-repeat;clear:both; margin-top:0px; position:relative;}
header #branding,
header #branding a{width:230px; height:56px; margin:0; padding: 37px 0 0 45px;float:left;}
header #branding a {padding:0; float:none; background:url(../img/logo.png) no-repeat; display:block;text-indent:-9999em;}
header #topNavigation{ width:auto; padding:2px 10px 10px 10px; float:right;}
header #topNavigation li{ display:inline; padding:0px 10px; font-size:10px;}
header #topNavigation li+li{border-left:1px solid #999;}
header #topNavigation li a{color:#999; text-decoration:none;}
header #topNavigation li a:hover{color:#333; text-decoration:underline;}
header h2{font: 13px Tahoma, Geneva, sans-serif; padding-top: 75px; color:#587263; font-weight:500;letter-spacing:0.2em; float:right;}
#maincontentstart{ position:relative;width:492px; height:339px; background:url(../img/mainpinselcontent.jpg); float:right;top:0px; bottom:0px; z-index:7; margin-bottom:0px;}
*+html #maincontentstart{ position:relative; top:10px;}
#maincontentstart h3{font:1.8em 'Lato', sans-serif; font-weight:300; color:#a3a3a3; margin:20px 0 10px 20px; line-height:80%;}
#maincontentstart p{padding-left:20px; padding-right:15px; line-height:1,4; color:#454545; margin-bottom:1em;}
#maincontentpics{position:relative; width:998px; height:240px;background:#FFFFFF; display:block;bottom:0px;top:0px; padding-bottom:13px;}
#maincontentpics img{position:relative; top:20px;}
#maincontentpics h4{ font: 1.1em Tahoma, Geneva, sans-serif;font-weight:100; color:#587263; letter-spacing:0.1em; margin-left:7px;}
#maincontentpics h4:before{content:url(../img/pfeilrechts.png);display:inline;color:#587263; margin-right:7px;}
#maincontentpics a{ text-decoration:none; color:#587263;}
#maincontentpics a:before{content:url(../img/pfeilmehr.png);display:inline;color:#587263; margin-right:5px; margin-left:5px;}
#maincontentpics a:hover{ text-decoration:underline;}
.bilderklein{float:left; width:240px; margin-left:12px;}
.bilderklein:first-child{margin-left:0px;}
.bilderklein p{ margin-left:7px; margin-top:7px;}
#impressum{background:#FFFFFF; position:relative; bottom:0px; margin-bottom:0px; width:998px;}
#impressum h5{font:1.8em 'Lato', sans-serif; font-weight:300; color:#a3a3a3; margin:15px 0 0px 25px; padding-top:10px; line-height:80%; float:left;}
#impressum p{padding-left:25px; padding-top:25px;}
#impressum a{text-decoration:none; color:#999;}
#impressum a:hover{color:#587263; text-decoration:underline;}
#impressum span{font-weight:bold;}
footer{ position:relative; padding-bottom:0px; top:0px;}
footer #footerleiste{width:998px;height:33px; background-color:#3b3b3b;position:relative;top:0px;}
footer #footerleiste ul{float:left;padding-top:6px; padding-left:300px;}
footer #footerleiste ul li{display:inline; font: 10px Tahoma, Geneva, sans-serif;}
footer #footerleiste ul li+li{border-left:1px solid #999;}
footer #footerleiste ul li a{color:#999;text-decoration:none; position:relative; padding-left:7px; padding-right:5px;}
footer #footerleiste ul li a:hover{text-decoration:underline;}
footer p{float:left;font: 10px Tahoma, Geneva, sans-serif;color:#999; padding-top:4px; padding-right:10px;}

/***STYLES unternehmen.html***/
#unternehmen{width:998px; height:339px; margin-bottom:0px;}
#unternehmen img{float:left; position:relative;left:0px;top:0px;border:3px solid #FFF;}
#leistungen{width:998px; height:321px; margin-bottom:0px; position:relative;}
#leistungen img{float:left; position:relative;left:0px;top:0px;border:3px solid #FFF;}
#leistungen ul{position:relative; left:-13px;}
#leistungen ul li{list-style:none; position:relative;}
#leistungen ul li span{margin-left:25px;}
#leistungen ul li::before{
	content:url(../img/haken.png);
	margin-right: 10px;}
#leistungen p{margin-left:31px; margin-top:15px;}
#leistungen_planung{ background:#FFFFFF; margin-bottom:0px; width: 499px; float:left; position:relative; top:0px;}
#leistungen_planung p{ margin-left:23px; margin-right:10px;padding-bottom:20px; width:459px;}
#leistungen_planung h3{font:1.8em 'Lato', sans-serif; font-weight:300; color:#a3a3a3; margin:0px 0 10px 20px; padding-top:20px; line-height:80%;}
#planung img{border:3px solid #FFF; float:right; position:relative;}
#kueche{width:998px; background-color:#FFF;}
#bilder{float:left;margin-right:10px;position:relative;top:0px;margin-bottom:0px;width:998px;display:block;background-color:#FFF;}
#bilder img{margin-top:5px; margin-right:5px; margin-left:5px; margin-bottom:5px;border:1px solid #999;float:left;display:block;}
#bilder img:hover{border:1px solid #063;}
#adresse{margin-top:0px;}
#adresse p{ border-bottom: 1px solid #999;}
#adresse span{color:#587263; font-weight:bold;}
#telefon{ margin-top:20px;}
#telefon a{text-decoration:none; color:#999;}
#telefon a:hover{color:#587263; text-decoration:underline;}
#telefon span{font-weight:700;}
#karte{ width:453px; height: 350px; float:left; position:relative; left:0px;}
*+html #karte{width:450px; float:left; display:inline;}
#karte a{float:right;}
#adresse_wrapper{background:#FFFFFF; margin-bottom:0px; width: 499px; height:355px; float:left; position:relative; top:0px;}
*+html #adresse_wrapper{width:499px; display:inline;}
#adresse_wrapper p{ margin-left:23px; margin-right:10px;padding-bottom:20px; width:459px;}
#adresse_wrapper h3{font:1.8em 'Lato', sans-serif; font-weight:300; color:#a3a3a3; margin:0px 0 10px 20px; padding-top:20px; line-height:80%;}

#mainNavigation{width:998px; height:33px;background-color:#3b3b3b;border-top:1px solid #CFDEFF; position:relative; z-index:999;}
#aktuell a:link,#aktuell a:visited{color:#587263;}


/*Kontaktformular*/

#kontaktformular{font:13px Lato,Arial, Helvetica, sans-serif; float:right; background:#FFF; width:998px; position:relative;}
#kontaktformular p{padding-top:10px; position:relative; left:30px;}
#kontaktformular img{ float:left; position:relative;}
#kontaktformular h3{font:1.8em 'Lato', sans-serif; font-weight:300; color:#a3a3a3; margin:15px 0 0px 30px; padding-top:10px; line-height:80%; float:left;}
form{width:400px;margin-top:30px;margin-right:0px;float:left; margin-left:30px;}
form fieldset{margin-bottom:12px;}
form label{width:90px;float:left;margin-bottom:20px;}
form input,form textarea {width:300px;float:right;margin-bottom:17px;border:1px solid #999;padding:2px;}
form input:focus,form textarea:focus{border:1px solid #000;}
form input.error{border:1px solid #000;}
form label.error{color:#FF0000;font-weight:300; font: 10px Tahoma, Geneva, sans-serif; position:relative; top:-20px;}
form br{clear:both;}
form .buttonform{margin-left:90px;width:306px;background:#CCCCCC;font-weight:bold;cursor:pointer;}
form .buttonform:hover{background:#333;color:#FFF;}
#textkontakt1 p{font:14px Lato,Arial, Helvetica, sans-serif;float:left;margin-top:-390px;margin-right:20px;line-height:130%;border-bottom:1px solid #CCC;padding-bottom:15px;width:370px;}
#textkontakt1 p span{color:#348759;}
#textkontakt2 p{font:14px Lato,Arial, Helvetica, sans-serif;float:left;margin-top:-300px;margin-right:20px;line-height:130%;padding-bottom:15px;width:370px;}
#textkontakt2 a{text-decoration:none;color:#555555;}
#textkontakt2 a:hover{text-decoration:underline;color:#06C;}

/*** ESSENTIAL STYLES Superfish***/
.sf-menu, .sf-menu * {
	margin:			0;
	padding:		0;
	list-style:		none;
	
}
.sf-menu {
	line-height:	1.0;
	
}
.sf-menu ul {
	position:		absolute;
	top:			-999em;
	width:			10em; /* left offset of submenus need to match (see below) */
}
.sf-menu ul li {
	width:			100%;
	
	
}
.sf-menu li:hover {
	visibility:		inherit; /* fixes IE7 'sticky bug' */

}
.sf-menu li {
	float:			left;
	position:		relative;
}
.sf-menu a {
	display:		block;
	position:		relative;
}
.sf-menu li:hover ul,
.sf-menu li.sfHover ul {
	left:			0;
	top:			2.5em; /* match top ul list item height */
	
}
ul.sf-menu li:hover li ul,
ul.sf-menu li.sfHover li ul {
	top:			-999em;
}
ul.sf-menu li li:hover ul,
ul.sf-menu li li.sfHover ul {
	left:			10em; /* match ul width */
	top:			0;
}
ul.sf-menu li li:hover li ul,
ul.sf-menu li li.sfHover li ul {
	top:			-999em;
}
ul.sf-menu li li li:hover ul,
ul.sf-menu li li li.sfHover ul {
	left:			10em; /* match ul width */
	top:			0;
}

/*** DEMO SKIN ***/
.sf-menu {
	float:			left;
	margin-bottom:	0em;
	margin-left:33px;
	position:relative;
}
.sf-menu a {
	padding: 		.75em 1em;
	text-decoration:none;
	font: 12px Tahoma, Geneva, sans-serif;color:#b2b2b2; line-height:1.2; letter-spacing:0.2em;}
	
}
.sf-menu a, .sf-menu a:visited  { /* visited pseudo selector so IE6 applies text colour*/
	color:			#b2b2b2;
}
.sf-menu li {
	
	
	
}
.sf-menu li li {
	background:		#3b3b3b;
	
	
}
.sf-menu li li li {
	background:		#9AAEDB;
}
.sf-menu li:hover, .sf-menu li.sfHover,
.sf-menu a:focus, .sf-menu a:hover, .sf-menu a:active {
	color:		#587263;
	-webkit-transition:color 800ms ease;
-moz-transition:color 800ms ease;
-o-transition:color 800ms ease;
transition:color 800ms ease;
	outline:		0;
	
}


/*** arrows **/
.sf-menu a.sf-with-ul {
	padding-right: 	2.25em;
	min-width:		1px; /* trigger IE7 hasLayout so spans position accurately */
}
.sf-sub-indicator {
	position:		absolute;
	display:		block;
	right:			.75em;
	top:			1.05em; /* IE6 only */
	width:			10px;
	height:			10px;
	text-indent: 	-999em;
	overflow:		hidden;
	background:url(../img/arrows-ffffff.png) no-repeat -10px -100px; /* 8-bit indexed alpha png. IE6 gets solid image only */
}
a > .sf-sub-indicator {  /* give all except IE6 the correct values */
	top:			.8em;
	background-position: 0 -100px; /* use translucent arrow for modern browsers*/
}
/* apply hovers to modern browsers */
a:focus > .sf-sub-indicator,
a:hover > .sf-sub-indicator,
a:active > .sf-sub-indicator,
li:hover > a > .sf-sub-indicator,
li.sfHover > a > .sf-sub-indicator {
	background-position: -10px -100px; /* arrow hovers for modern browsers*/
}

/* point right for anchors in subs */
.sf-menu ul .sf-sub-indicator { background-position:  -10px 0; }
.sf-menu ul a > .sf-sub-indicator { background-position:  0 0; }
/* apply hovers to modern browsers */
.sf-menu ul a:focus > .sf-sub-indicator,
.sf-menu ul a:hover > .sf-sub-indicator,
.sf-menu ul a:active > .sf-sub-indicator,
.sf-menu ul li:hover > a > .sf-sub-indicator,
.sf-menu ul li.sfHover > a > .sf-sub-indicator {
	background-position: -10px 0; /* arrow hovers for modern browsers*/
}

/*** shadows for all but IE6 ***/
.sf-shadow ul {
	background:	url('../images/shadow.png') no-repeat bottom right;
	padding: 0 8px 9px 0;
	-moz-border-radius-bottomleft: 17px;
	-moz-border-radius-topright: 17px;
	-webkit-border-top-right-radius: 17px;
	-webkit-border-bottom-left-radius: 17px;
}
.sf-shadow ul.sf-shadow-off {
	background: transparent;
}


/* The Nivo Slider styles */
#slider_wrapper{height:339px; position:relative; z-index:4; bottom:0px;}
#slider{position:relative;width:500px;height:333px;background:url(images/loading.gif) no-repeat 50% 50%;border:3px solid #FFF; float:left;top:0px; z-index:5; bottom:0px;}
*+html #slider{position:relative; top:10px;}
#slider img{position:absolute;top:0;left:0;display:none;}
#slider a{border:0;display:block;}
.nivoSlider {
	position:relative;
}
.nivoSlider img {
	position:absolute;
	top:0px;
	left:0px;
}
/* If an image is wrapped in a link */
.nivoSlider a.nivo-imageLink {
	position:absolute;
	top:0px;
	left:0px;
	width:100%;
	height:100%;
	border:0;
	padding:0;
	margin:0;
	z-index:6;
	display:none;
}
/* The slices and boxes in the Slider */
.nivo-slice {
	display:block;
	position:absolute;
	z-index:5;
	height:100%;
}
.nivo-box {
	display:block;
	position:absolute;
	z-index:5;
}
/* Caption styles */
.nivo-caption {
	position:absolute;
	left:0px;
	bottom:0px;
	background:#000;
	color:#fff;
	opacity:0.8; /* Overridden by captionOpacity setting */
	width:500px;
	z-index:8;
	font-family:"Lato",Arial, Helvetica, sans-serif;
	font-weight:300;
	
	
}
.nivo-caption p {
	padding-left:18px;
	padding-top:5px;
	padding-bottom:5px;
	margin:0;
}
.nivo-caption a {
	display:inline !important;
}
.nivo-html-caption {
    display:none;
}
/* Direction nav styles (e.g. Next & Prev) */
.nivo-directionNav a {
	position:absolute;
	top:42%;
	z-index:9;
	cursor:pointer;
	background:url(../img/arrows.png) no-repeat;
	text-indent:-99999px;
	width:30px;
	height:30px;
	display:block;
}
a.nivo-prevNav {
	left:15px;
}
a.nivo-nextNav {
	right:15px;
	background-position: -30px;
}
/* Control nav styles (e.g. 1,2,3...) */
.nivo-controlNav {
	margin-left:400px;
}
.nivo-controlNav a {
	position:relative;
	z-index:9;
	cursor:pointer;
	float:left;
	background:url(../images/bullets.png) no-repeat;
	width:22px;
	height:22px;
	text-indent:-9999px;
	margin-top:330px;
}
.nivo-controlNav a.active {
	font-weight:bold;
	background-position:0 -22px;
}

/* The Shadowbox styles */
#sb-title-inner,#sb-info-inner,#sb-loading-inner,div.sb-message{font-family:"HelveticaNeue-Light","Helvetica Neue",Helvetica,Arial,sans-serif;font-weight:200;color:#fff;}
#sb-container{position:fixed;margin:0;padding:0;top:0;left:0;z-index:999;text-align:left;visibility:hidden;display:none;}
#sb-overlay{position:relative;height:100%;width:100%;}
#sb-wrapper{position:absolute;visibility:hidden;width:100px;}
#sb-wrapper-inner{position:relative;border:1px solid #303030;overflow:hidden;height:100px;}
#sb-body{position:relative;height:100%;}
#sb-body-inner{position:absolute;height:100%;width:100%;}
#sb-player.html{height:100%;overflow:auto;}
#sb-body img{border:none;}
#sb-loading{position:relative;height:100%;}
#sb-loading-inner{position:absolute;font-size:14px;line-height:24px;height:24px;top:50%;margin-top:-12px;width:100%;text-align:center;}
#sb-loading-inner span{background:url(loading.gif) no-repeat;padding-left:34px;display:inline-block;}
#sb-body,#sb-loading{background-color:#060606;}
#sb-title,#sb-info{position:relative;margin:0;padding:0;overflow:hidden;}
#sb-title,#sb-title-inner{height:26px;line-height:26px;}
#sb-title-inner{font-size:16px;}
#sb-info,#sb-info-inner{height:20px;line-height:20px;}
#sb-info-inner{font-size:12px;}
#sb-nav{float:right;height:16px;padding:2px 0;width:45%;}
#sb-nav a{display:block;float:right;height:16px;width:16px;margin-left:3px;cursor:pointer;background-repeat:no-repeat;}
#sb-nav-close{background-image:url(../img/close.png);}
#sb-nav-next{background-image:url(../img/next.png);}
#sb-nav-previous{background-image:url(../img/previous.png);}
#sb-nav-play{background-image:url(../images/play.png);}
#sb-nav-pause{background-image:url(pause.png);}
#sb-counter{float:left;width:45%;}
#sb-counter a{padding:0 4px 0 0;text-decoration:none;cursor:pointer;color:#fff;}
#sb-counter a.sb-counter-current{text-decoration:underline;}
div.sb-message{font-size:12px;padding:10px;text-align:center;}
div.sb-message a:link,div.sb-message a:visited{color:#fff;text-decoration:underline;}



/* ==========================================================================
   Helper classes
   ========================================================================== */

/*
 * Image replacement
 */

.ir {
    background-color: transparent;
    border: 0;
    overflow: hidden;
    /* IE 6/7 fallback */
    *text-indent: -9999px;
}

.ir:before {
    content: "";
    display: block;
    width: 0;
    height: 100%;
}

/*
 * Hide from both screenreaders and browsers: h5bp.com/u
 */

.hidden {
    display: none !important;
    visibility: hidden;
}

/*
 * Hide only visually, but have it available for screenreaders: h5bp.com/v
 */

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

/*
 * Extends the .visuallyhidden class to allow the element to be focusable
 * when navigated to via the keyboard: h5bp.com/p
 */

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
}

/*
 * Hide visually and from screenreaders, but maintain layout
 */

.invisible {
    visibility: hidden;
}

/*
 * Clearfix: contain floats
 *
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    `contenteditable` attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that receive the `clearfix` class.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */

.clearfix:before,
.clearfix:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.clearfix:after {
    clear: both;
}

/*
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */

.clearfix {
    *zoom: 1;
}

/* ==========================================================================
   EXAMPLE Media Queries for Responsive Design.
   Theses examples override the primary ('mobile first') styles.
   Modify as content requires.
   ========================================================================== */

@media only screen and (min-width: 35em) {
    /* Style adjustments for viewports that meet the condition */
}

@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
       only screen and (min-resolution: 144dpi) {
    /* Style adjustments for high resolution devices */
}

/* ==========================================================================
   Print styles.
   Inlined to avoid required HTTP connection: h5bp.com/r
   ========================================================================== */

@media print {
    * {
        background: transparent !important;
        color: #000 !important; /* Black prints faster: h5bp.com/s */
        box-shadow: none !important;
        text-shadow: none !important;
    }

    a,
    a:visited {
        text-decoration: underline;
    }

    a[href]:after {
        content: " (" attr(href) ")";
    }

    abbr[title]:after {
        content: " (" attr(title) ")";
    }

    /*
     * Don't show links for images, or javascript/internal links
     */

    .ir a:after,
    a[href^="javascript:"]:after,
    a[href^="#"]:after {
        content: "";
    }

    pre,
    blockquote {
        border: 1px solid #999;
        page-break-inside: avoid;
    }

    thead {
        display: table-header-group; /* h5bp.com/t */
    }

    tr,
    img {
        page-break-inside: avoid;
    }

    img {
        max-width: 100% !important;
    }

    @page {
        margin: 0.5cm;
    }

    p,
    h2,
    h3 {
        orphans: 3;
        widows: 3;
    }

    h2,
    h3 {
        page-break-after: avoid;
    }
}