/*############################################################*/
/*                                                            */
/*           STANDARD STYLESHEET SCHREINEREIKOCH.COM          */
/*                                                            */
/*############################################################*/

/* sIFR Stylesheet einbinden */
@import "sifr.css";

/* Lightbox 2.0 Stylesheet einbinden */
@import "lightbox.css";

/*############################################################*/
/*#                  LAYOUT BLOCK ELEMENTE                   #*/
/*############################################################*/

/* Außen- und Innenabstände aller Elemente zurücksetzen */
* {
	margin: 0;
	padding: 0;
}

/* vertikalen Scrollbalken erzwingen, damit Inhalt im Fenster nicht springt */
html {
	min-height: 101%;
}

body {
	text-align: center;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 100.01%;
	color: #666;
	background: #907456 url(../assets/body_hintergrund.jpg) repeat;
}

div#seitenrand {
	margin: 0 auto;
	width: 812px;
	background: url(../assets/schatten_container.png) repeat-y;
	position: relative;
	z-index: 10;
}

div#container {
	margin: 0 6px;
	padding: 6px 0;
	width: 800px;
	background: #fff;
	text-align: left;
	font-size: 62.5%;
	line-height: 0;
}

div#container div#header {
	margin: 0 6px 6px 6px;
	height: 177px;
	line-height: 0;
}

div#container div#breadcrumb{
	margin-bottom: 6px;
	padding: 0 22px;
	background-color: #582c00;
	clear: both;
}

div#container div#inhaltcontainer {
	margin: 0 6px;
	background: url(../assets/inhalt_hintergrund.gif) repeat-y;
}

div#container div#navigation {
	float: left;
	padding-bottom: 25px;
	width: 249px;
	background: #582c00 url(../assets/navigation_rand.gif) right top repeat-y;
}

div#container div#hauptspalte {
    background-color: #E7E7E7;
    margin-left: 249px;
    padding: 25px;
    width: 489px;
}

div#schatten_unten {
	margin: 0 auto 1em auto;
	height: 6px;
	width: 812px;
	background: url(../assets/schatten_container_unten.png) no-repeat;
}


/*############################################################*/
/*#                   ALLGEMEINE DEFINITIONEN                #*/
/*############################################################*/

/* Klasse um Inhalte auszublenden. Diese bleiben für Screenreader aber sichtbar */
.unsichtbar {
	position: absolute;
	left: -1000px;
	top: -1000px;
	width: 0px;
	height: 0px;
	overflow: hidden;
	display: inline;
	background-image: none;
}

.nomargin {
	margin: 0 !important;
}

.standardmargin {
	margin-top: 1.6em !important;
}

/*########################## CLEARFIX ########################*/
.clearfix:after {
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
}

.clearfix {display: inline-block;}


/*####################### FLOAT KLASSEN ######################*/
.clearboth {
	clear: both;
}

.float_left {
	float: left;
	margin: 1.2em 1.5em 0.8em 0;
}

.float_right {
	float: right;
	margin: 1.2em 0 0.8em 1.5em;
}

/*########################## FLOATBOX ########################*/
/* Clearen per Overflow */
.floatbox { 
	overflow:hidden;
}

/* Erweiterung der floatbox für Auflistung mehrerer flotaboxen unterneinander */
.listing {
	margin: 2.6em 0 0 0;
}

.listing .float_left,
.listing .float_right {
	margin-top: 0;
}


/*########################## INFOBOX #########################*/
div#container div#hauptspalte div.infobox {
	margin-top: 1.6em;
	border-left: 1px solid #ddd;
	border-top: 1px solid #ddd;
	padding-right: 5px;
	background: url(../assets/schatten_box_rechts.gif) right top repeat-y;
}

div#container div#hauptspalte div.infobox div.infobox_inhalt {
	padding: 1.2em;
	border: 6px solid #fff;
	background: #e7e7e7 url(../assets/infobox_hintergrund.gif) repeat-x;
}

div#container div#hauptspalte div.infobox div.infobox_bild {
	padding: 0;
	line-height: 0;
	border: 6px solid #fff;
}

div#container div#hauptspalte div.infobox_schatten_unten {
	height: 5px;
	background: url(../assets/schatten_box_unten.gif) left bottom no-repeat;
	line-height: 0; /* nötig, damit Browser keinen Leerraum unter Bild anzeigen */
	font-size: 1px; /* nötig für IE damit kein Leerraum unter Bild angezeigt wird */
}


/*####################### BILDERRAHMEN #######################*/
div#container div#hauptspalte div.bilderrahmen {
	width: 167px;
	padding-bottom: 5px;
	border-top: 1px solid #ddd;
	border-left: 1px solid #ddd;
	background: url(../assets/schatten_bilderrahmen_unten.gif) left bottom no-repeat;
	line-height: 0; /* nötig, damit Browser keinen Leerraum unter Bild anzeigen */
	font-size: 1px; /* nötig für IE damit kein Leerraum unter Bild angezeigt wird */
}

div#container div#hauptspalte div.bilderrahmen img {
	padding: 6px 11px 6px 6px;
	background: #fff url(../assets/schatten_box_rechts.gif) right top repeat-y;
}


/*######################## THUMBNAIL ########################*/
div#container div#hauptspalte div.thumbnail {
	padding: 0 5px 5px 0;
	background: url(../assets/schatten_thumbnail.gif) left top no-repeat;
	line-height: 0; /* nötig, damit Browser keinen Leerraum unter Bild anzeigen */
	font-size: 1px; /* nötig für IE damit kein Leerraum unter Bild angezeigt wird */
}

div#container div#hauptspalte div.thumbnail img {
	padding: 6px;
	border-top: 1px solid #ddd;
	border-left: 1px solid #ddd;
	background: #fff;
}


/*############################################################*/
/*#                 TYPOGRAFISCHE DEFINITIONEN               #*/
/*############################################################*/

/* Standardschriftgröße für Fließtext setzen */
p, li {
	font-size: 1.2em;
	line-height: 1.7;
}

h2 {
	font-size: 2.5em;
	line-height: 1.4;
	font-weight: normal;
	letter-spacing: -0.07em;
	color: #582c00;	
}

h3 {
	margin-top: 1.6em;
	line-height: 1.4;
	font-size: 1.8em;
	font-weight: normal;
	letter-spacing: -0.03em;
	word-spacing: -0.03em;
	color: #582c00;
}

div#hauptspalte div.listing h3 {
	display: inline;
	margin: 0;
}

p {
	margin-top: 0.8em;
	color: #666;
}

ul {
	margin: 1.5em 0 0 6em;
	list-style-image: url(../assets/liste_haken_blau.gif);
	color: #666;
}

ul li {
	margin-bottom: 0.8em;
	padding-left: 0.3em;
	line-height: 1.5em;
}

/* Blockquote Zitate */
blockquote {
	margin: 1.6em 1em;
	background: url(../assets/zitat_links.gif) left bottom no-repeat;
}

blockquote p {
	padding: 1.5em 2.5em;
	background: url(../assets/zitat_rechts.gif) right top no-repeat;
}

blockquote p.zitat_quelle {
	position: relative;
	height: 0;
	margin-top: 0;
	padding: 0;
	right: 2em;
	bottom: 1.3em;
	text-align: right;
	font-style: italic;
	color: #775430;
	background: none;
}

div.infobox blockquote {
	margin: 0;
}

/* Absatz in Breadcrumb Zeile */
div#breadcrumb p {
	margin: 0;
	color: #fff;
	line-height: 24px;
}

/* Absatz in Infobox */
div.infobox p {
	margin-top: 0.6em;
}

/* Absatz in Infobox Bild */
div.infobox_bild p {
	margin-top: 0;
}

/* Bildunterschrift */
p.bildunterschrift {
	margin-top: 0.3em;
	padding: 0 8px;
	color: #775430;
	font-size: 1.1em;
	line-height: 1.4;
}

.float_left p.bildunterschrift,
.float_left p.bildunterschrift {
	width: 146px;
}

/* Unterschrift Referenzen Ortsangabe */
p.referenzen_ort {
	margin-top: 0;
	color: #a3a6aa;
}

/* Datum auf News-Seite */
p.datum {
	color: #9b8267;
}


/*############################################################*/
/*#                      FEHLERMELDUNGEN                     #*/
/*############################################################*/

div#container div#hauptspalte p.cms_message {
	margin: 1.5em 0;
}

div#container div#hauptspalte p.cms_message span {
	padding: 0.5em;
	line-height: 2.3em;
	color: #fff;
}


div#container div#hauptspalte p.cms_message span.fehler {
	background: #901f1f;
}

div#container div#hauptspalte p.cms_message span.erfolg {
	background: #135E09;
}


/*############################################################*/
/*#                        LINKS                             #*/
/*############################################################*/

a, 
a:link {
	padding-left: 13px;
	color: #582c00;
	text-decoration: none;
	border-bottom: 1px solid #775430;
	background: url(../assets/link_pfeil.gif) 0 0 no-repeat;
}

a:visited {
	border-bottom: 1px dashed #582c00;
}

a:hover,
a:active {
	color: #775430;
	border-bottom: 1px solid #582c00;
	background-position: 0 -15px;
}


/*##################### LINK ÜBERSCHRIFT #####################*/
h3 a, 
h3 a:link,
h3 a:visited,
h3 a:hover,
h3 a:active {
	padding-left: 0;
	border: none;
	background: none;
}

/*######################## LINK INTERN #######################*/
a.link_intern,
a.link_intern:link,
a.link_intern:visited,
a.link_intern:hover,
a.link_intern:active {
	margin-top: 1em;
	padding: 0.1em 1.5em 0.1em 0.5em;
	color: #fff;
	background: #582c00 url(../assets/link_intern.gif) right center no-repeat;
	border-bottom: none;
}

a.link_intern:hover,
a.link_intern:active {
	background: #775430 url(../assets/link_intern_hover.gif) right center no-repeat;
}


/*###################### LINK SEITEN NAVI ####################*/
p.seiten_navi_zurueck a,
p.seiten_navi_zurueck a:link,
p.seiten_navi_zurueck a:visited,
p.seiten_navi_zurueck a:hover,
p.seiten_navi_zurueck a:active {
	margin-top: 1em;
	padding: 0.1em 0.5em 0.1em 1.5em;
	color: #fff;
	background: #582c00 url(../assets/link_navi_zurueck.gif) left center no-repeat;
	border-bottom: none;
}

p.seiten_navi_zurueck a:hover,
p.seiten_navi_zurueck a:active {
	background: #775430 url(../assets/link_navi_zurueck_hover.gif) left center no-repeat;
}

p.seiten_navi_weiter a,
p.seiten_navi_weiter a:link,
p.seiten_navi_weiter a:visited,
p.seiten_navi_weiter a:hover,
p.seiten_navi_weiter a:active {
	margin-top: 1em;
	padding: 0.1em 1.5em 0.1em 0.5em;
	color: #fff;
	background: #582c00 url(../assets/link_navi.gif) right center no-repeat;
	border-bottom: none;
}

p.seiten_navi_weiter a:hover,
p.seiten_navi_weiter a:active {
	background: #775430 url(../assets/link_navi_hover.gif) right center no-repeat;
}


/*######################## LINK EXTERN #######################*/
a.link_extern,
a.link_extern:link,
a.link_extern:visited,
a.link_extern:hover,
a.link_extern:active {
	background: url(../assets/link_extern_pfeil.gif) 0 0 no-repeat;
}

a.link_extern:hover,
a.link_extern:active {
	background-position: 0 -15px;
}


/*##################### LINK THUMBNAIL ######################*/

/* weißen Rahmen der Bilder aufheben, weil dieser über a-Tag eingefügt wird */
div#container div#hauptspalte div.thumbnail a img {
	padding: 0;
	border: none;
	background: transparent;
}

div.thumbnail a,
div.thumbnail a:link,
div.thumbnail a:visited,
div.thumbnail a:hover,
div.thumbnail a:active {
	display: block;
	padding: 6px;
	border: none; /* zunächst alle Rahmen zurücksetzen */
	border-top: 1px solid #ddd;
	border-left: 1px solid #ddd;
	background: #fff;
}

div.thumbnail a:hover {
	background-color: #775430;
}

/*####################### LINK BREADCRUMB ######################*/
div#breadcrumb a,
div#breadcrumb a:link,
div#breadcrumb a:visited,
div#breadcrumb a:hover,
div#breadcrumb a:active {
	padding: 0;
	background: none;
	color: #c3b3a3;
	border: none;
}

div#breadcrumb a:hover {
	color: #775430;
}

/*############## LINK KONTAKT IN NAVIGATIONSSPALTE #############*/
.kontakt a.email {
	padding: 0;
	background: none;
	color: #dfdfdf;
	border-bottom-color: #775430;
}

.kontakt a.email:hover {
	color: #fff;
	border-bottom-color: #775430;
}


/*#################### LINK TÜRKONFIGURATOR ###################*/
a#link_tuerkonfigurator,
a#link_tuerkonfigurator:link,
a#link_tuerkonfigurator:visited,
a#link_tuerkonfigurator:hover,
a#link_tuerkonfigurator:active {
	display: block;
	width: 466px;
	height: 222px;
	margin: 0;
	padding: 0;
	background: transparent url(../assets/link_tuerkonfigurator.jpg) no-repeat;
	border-bottom: none;
}

a#link_tuerkonfigurator:hover,
a#link_tuerkonfigurator:active {
	background: transparent url(../assets/link_tuerkonfigurator.jpg) 0px -222px no-repeat;
}

a#link_tuerkonfigurator span {
	display: none;
}


/*############################################################*/
/*#                        HR-TRENNER                        #*/
/*############################################################*/

div.hr {
	margin: 2.5em 0;
	height: 6px;
	background: url(../assets/hr_trennstrich.gif) no-repeat;
}

div.hr hr {
	display: none;
}


/*############################################################*/
/*#                        HEADER                            #*/
/*############################################################*/

/* Link der Überschrift als Blockelement darstellen und dies über Schriftzug des Headers positionieren */
div#container div#header h1 a {
	display: block;
	float: left;
	padding: 0;
	width: 235px;
	height: 177px;
	background: url(../assets/koch_logo.gif);
	border-bottom: none;
}

/* Überschrift verstecken */
div#container div#header h1 a span {
	display: none;
}

/* Flash Animation oder entahltenes Bild neben Logo platzieren */
div#container div#header #flashanimation {
	float: left;
	width: 553px;
}

/* Header Hintergrund über Hintergrundbild legen */
#head_hintergrund {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 1;
}


/*############################################################*/
/*#                       NAVIGATION                         #*/
/*############################################################*/

div#navigation ul#navlist,
div#navigation ul#subnavlist {
	margin: 0;
	list-style: none;
	list-style-image: none;
}


/* HAUPTNAVIGATION */
div#navigation ul#navlist li {
	margin: 0;
	padding: 0;
}

div#navigation ul#navlist li#active {
	background: url(../assets/navi_pfeil_active.gif) right top no-repeat;
}

div#navigation ul#navlist li a {
	display: block;
	padding: 4px 16px;
	width: 203px;
	color: #fff;
	border: none;
	border-bottom: 1px solid #fff;
	background: #582c00;
}

div#navigation ul#navlist li a:hover {
	background: #775430;
}

div#navigation ul#navlist li#active a {
	font-weight: bold;
	background: #775430;
}


/* SUBNAVIGATION */
div#navigation ul#navlist li ul#subnavlist li {
	font-size: 100%;
}

div#navigation ul#navlist li ul#subnavlist li a {
	padding-left: 32px;
	width: 187px;
	font-weight: normal;
	color: #582c00;
	border-bottom: 1px solid #a8947e;
	background: #c9bbac;
}

div#navigation ul#navlist li ul#subnavlist li a:hover {
	color: #fff;
	background: #775430;
}

div#navigation ul#navlist li ul#subnavlist li#active a {
	font-weight: bold;
	color: #fff;
	background: #775430;
}


/*############################################################*/
/*#                        SEITEN NAVI                       #*/
/*############################################################*/

div.infobox p.seiten_navi {
	margin-top: 0;
	text-align: center;	
}

div.infobox p.seiten_navi_zurueck {
	margin-top: -1.6em;
	float: left;
}

div.infobox p.seiten_navi_weiter {
	margin-top: -1.6em;
	float: right;
}


/*############################################################*/
/*#                        FORMULARE                         #*/
/*############################################################*/

/* ALLGEMEINE SCHRIFTFORMATIERUNG DER FORMULARE */
fieldset {
	border: solid 0 #fff; /* Opera doesn't get border:none or border:0 on fieldsets */
}

fieldset legend {
	display: none;
}

form fieldset p {
	margin-top: 1.2em !important;
}

fieldset input.textfield,
fieldset textarea,
fieldset select {
	padding: 0.2em;
	border: solid 1px #666;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 1em;
	color: #333;
	background-color: #f7f7f7;
}

fieldset textarea {
	background: #e7e7e7 url(../assets/infobox_hintergrund.gif) repeat-x;
	line-height: 1.5;
}

fieldset input:focus.textfield,
fieldset textarea:focus {
	background: #fff;
	border-color: #194365;
}

fieldset textarea {
	font-size: 100%;
}

div#container div#hauptspalte form span.pflichtfeld {
	color: #901f1f;
}

div#container div#hauptspalte form#kontaktformular {
	margin: 1em 0 0 0;
}

div#container div#hauptspalte form fieldset input.textfield,
div#container div#hauptspalte form fieldset textarea {
	width: 437px;
}

div#container div#hauptspalte form fieldset select {
	width: 90px;
}


/* BUTTONS */
div#container div#hauptspalte form input#send_btn,
div#container div#hauptspalte form input#reset_btn,
div#container div#hauptspalte form input#send_btn2,
div#container div#hauptspalte form input#reset_btn2,
div#container div#hauptspalte input#okay_btn {
	margin: 0.5em 1.5em 0 0;
	padding: 0.3em 0.6em;
	color: #fff;
	background: #582c00;
	border: solid 4px #fff;
	cursor: pointer;
}


/*############################################################*/
/*#                      PROJEKTFOTOS                        #*/
/*############################################################*/

/* Klasse um Thumbnails der einzelnen Kategorien zu floaten */
.projektfotos {
	margin-right: 0.2em;
}


/*############################################################*/
/*#                         KONTAKT                          #*/
/*############################################################*/

/*################### KONTAKT IN NAVIGATION ##################*/
.kontakt {
	margin-left: 16px;
	margin-right: 16px;
	color: #fff;
	line-height: 1.4;
}

.kontakt p {
	color: #fff;
}

span.adr_float {
	float: left;
	width: 4.5em;
}


/*#################### KONTAKT IN INHALT ###################*/
.kontakt_inhalt {
	margin: 0;
	color: inherit;
	line-height: inherit;
}

/* FEHLERHAFTE EINGABEN IN KONTAKTFORMULAR */
p.input_fehler {
	color: #901f1f;
}

p.input_fehler input.textfield,
p.input_fehler textarea {
	border-color: #901f1f;
	background: #FFDFDF;
}

/* BESTÄTIGUNG DER DATEN DES KONTAKTFORMULARS */
div#container div#hauptspalte p span.bezeichnung {
	color: #775430;
	font-weight: bold;
}