﻿/**
 * Theme Name: WEBSTUHL
 * Theme URI:      http://www.kk4you.de
 * Description:    Child theme of KK2014
 * Author:         Klaus Keuthen
 * Author URI:     http://www.kk4you.de
 * Template:       kk2014
 * Version:        1.3
*/

/**
VERSIONSBESCHREIBUNG
1.0		27.8.14		NEU
1.1		9.9.15		Bugfix Linkformatierung a 
1.2		7.3.16		NEU footer mit widget
1.2.1	11.1.17		Linkfarbe Sidebar geaendert
1.2.2	23.8.18		screen bis 200 bis 480  auf 95% geaendert
1.3   19.1.20   header in child aufgenommen
1.4   22.7.25   linke Sidebar fuer mobile entfernt
 
*
**/

@import url('../kk2014/style.css');


/*******************Theme customization starts here **********************************/

body {
    font-size: 80%; 				/* bei Verwendung 100% muss 100.01% wegen Bug in Safari und Opera verwendet werden*/
    /*color: #625546; */   
    font-family: Verdana,Tahoma,"Trebuchet MS",Arial,sans-serif;
    background: url('img/hintergrund1.jpg') repeat;
    }


/******************** Haupt Container für wrap und werbewrap *******************************************************/
#total { max-width: 1060px; }							

#wrap {                        /* Container fuer gesamte Webseite */
    overflow: hidden;           /* Container erhaelt die maximale Höhhe der darin befindlichen float Elemente  */
    max-width: 1060px;          /* Max-Wert fuer 17" 1280px -->1200 + 10 Rand    */
    min-width: 318px;         	/* Min Wert fuer 15" 980px, smartphone 320px */
    margin: 0.5em auto 0.5em auto;             /* Zentrierung  */
    /* min-height: 100%; 			volle Bildschirmhoehe 100% nutzen  */  
    height:auto !important; 	/* moderne Browser */   	
    height:100%; 				/* IE */
    position: relative;
    border:5px solid #c1914e;
    /*background: #c1914e; 		Start Schatten */
    padding: 0;
    -webkit-box-shadow: 3px 2px 10px 2px #eccc9b;
    -moz-box-shadow: 3px 2px 10px 2px #eccc9b;
    box-shadow: 3px 2px 10px 2px #eccc9b;
    -webkit-border-radius: 7px;
    -moz-border-radius: 7px;
    border-radius: 7px;
    }

/*************************** Container fuer Logo, Banner und Hauptnavigation  ***************************************/   
#header {                          
    /**background-color: #00FF00;   Test gruen**/
    background: url('img/hintergrund2.jpg') repeat; /* gleiches Bild wie body jedoch heller */
 
    }
#logo {                             /** Logo im Kopfbereich **/
	margin:0 auto;
     float: inherit;
     width:25%;                 
    }
#logo img  { 
    max-width: 100%;               
    background-color: transparent; 
    border: 0;
    display: block;
    margin-left: auto;
    margin-right: auto;
    }
    
/********************************** Container innerhalb des #wrap fuer Sidebars und Content *************/                         
#container { 
	background-color: #fffdee; 
	overflow: hidden; 
	clear:both;
	}
#content { 
	float:left; 
	width: 59.9%; 
	background: #fffdee; 				/* nur fuer IE6*/
	margin-top: 0.5em; }
#leftnav { 
	float: left; 
	width: 20%; 
	}
#rightnav { 	
	float: right; 
	width: 20%; 
	}

/*******************************Navigation*****************************************/
#mainnav {
    background-color: #c1914e; 			/*#666;  WICHTIG gleiche Farbe wie #wrap */
	/*padding: 0 10px; */					
	clear: both;
	/*font-size: 0.9em;*/
	color:#000;
	} 
.main-navigation { background-color: #666; color:#000; }
.main-navigation ul.nav-menu,
.main-navigation div.nav-menu > ul {
	display: inline-block !important;
	text-align: left;
	width: 100%;
	}
.main-navigation ul { margin: 0; text-indent: 0; }
.main-navigation li a,
.main-navigation li { display: inline-block; text-decoration: none; }
.main-navigation li a {  				/* Level 1 */
	background-color: #f0debf;			/*999*/
	border: 1px solid #999;
	color: #fff;
	line-height: 1.8; 
	text-transform: uppercase;
	white-space: nowrap;
	padding: 0 1.0em ; 
	}
.main-navigation li a:hover { color: #000; 	}
.main-navigation li {
	padding: 0.1em 0.5em 0.1em 0;
	position: relative;
	float: left; 
	}
.main-navigation li ul {
	display: none;
	margin: 0;
	padding: 0;
	position: absolute;
	top: 100%;
	z-index: 1;
	}
.main-navigation li ul ul { top: 0; left: 100%; }
.main-navigation ul li:hover > ul {
	border-left: 0;
	display: block;
	}
.main-navigation li ul li {  			/* Level 2 Formatierung */
	padding: 0;
	/*font-size: 1em; */
	}
.main-navigation li ul li a {  			
	background-color: #f0debf;			/*999*/
	border: 1px solid #999;
	display: block;
	width: 12em;
	white-space: normal;
	border-top: 1px #000 solid;
	}
.main-navigation li ul li a:hover { background: #c1914e; color: #444; }
.main-navigation .current-menu-item > a,
.main-navigation .current-menu-ancestor > a,
.main-navigation .current_page_item > a,
.main-navigation .current_page_ancestor > a {
	color: #000;						/*#636363; Schriftfarbe Level 1 nach Aktivierung */
	font-weight: bold;
	}




/*************************START Fussbereich **********************************/
#footwrap { background: #c1914e; }
#widget-footer { padding: 1.5em 1.5em 1.5em 1.5em; background : #fff; }
/************************ ENDE Fussbereich ************************************/




/******************************** rechte und linke Sidebar ******************************/
#sidebarleft, #sidebarright { 
	margin: 0.5em; 
	}

#sidebarleft h3, #sidebarright h3 {			/** **/
    background: none;
    border-bottom: thin #666666 dotted;
    padding: 0 0.5em; 
    }
#sidebarleft .widget, #sidebarright .widget {
    background: url('img/hintergrund2.jpg') repeat;
    /*background: #f0debf; */
    padding-bottom: 0.3em;
    -webkit-box-shadow: 3px 2px 5px #ccc;
    -moz-box-shadow: 3px 2px 5px #ccc;
    box-shadow: 3px 2px 5px #ccc;
    -webkit-border-radius: 7px;
    -moz-border-radius: 7px;
    border-radius: 7px;
	}
	
.ngg-widget-slideshow {
    margin: 0 auto !important;
}

#sidebarleft ul li, #sidebarright ul li {	/******* Level 1 in der Aufzaehlung ****/
    margin-left: 0.5em;
    background: url(img/aufzaehlung-level1.gif) no-repeat;
    }

#sidebarleft ul li ul li, 					/******* Level 2 un 3 in der Aufzaehlung ****/
#sidebarright ul li ul li {	
    background: url(img/aufzaehlung-level2.gif) no-repeat;
    }
/******* Linkformatierung ***********/
#sidebarleft a:link, 						
#sidebarright a:link, 
#sidebarleft a:visited, 
#sidebarright a:visited {
    color: #cc9900;  /*#5F584D*/
    text-decoration: none;
    font-weight: normal;
    /*margin-left: 1em;*/
    }
    
#sidebarleft a:hover, 
#sidebarright a:hover, 
#sidebarleft a:visited:hover, 
#sidebarright a:visited:hover {
    color: #cc9900;  /*#99A8BA;*/
    text-decoration: underline;
    }

#sidebarright .archives {
margin-left: 20px;
}

/**********************Widgets************************************************/
.widget a img { background-color: transparent; }
/*********************** Widget -Allgemein************************************/
#ngg-webslice h3 { 	display: none; } /*Widget NGG Slideshow*/

/***************** Widget -SUCHEN ********************************************/
#sidebarright .widget_search  h2,
#sidebarleft .widget_search  h2  {	
	display:none; 
	}
#searchform { 							/** Container fuer Suche, Eingabe und Buttom **/
	padding: 0.5em;
	text-align: center;
	}
#searchform  #s {  						/** Eingabefeld Suche**/
	width: 70%;
	padding: 0.15em;
    text-align: center;
	}
#searchsubmit {   						/*** Buttom Suchen "GO"**/
	color: #fff;
	background: #666;
	}


/********************************* .post und .excerpt und .entry *******************************/
.post, .excerpt {
    width: 95%;
    margin: 0 0.5em 0.5em 0.5em;
    }
.posttitle {							/**Ueberschrift des Berichtes post oder page**/
    background: none; 
    border-bottom: thin #666666 dotted;
    border: none;
    }
.excerpttitle {   						/**Ueberschrift der Kurzfassung excerpt**/
    line-height: 1.5;
    }
.posttitle a:hover,
.excerpttitle a:hover {
    color: #999999;
    text-decoration: underline;
    }
.excerpt p {     						/*Wichtig zur Darstellung des mehr Link in einer Zeile*/
    display: inline;
    }
.excerpt h3:before { 					/* Symbol vor dem Titel */
	content: url('img/pfeil1_16px.gif') ; 
	}	

.entry { margin: 0 0.5em; }


/**************Post Metadata veroeffentlicht am -Datum, in Kategorien, von xyz, Kommentare*************/
    
/************************SONSTIGE ************************************************************************/
.clearfix:after { 	
	visibility: hidden;
	display: block;
	font-size: 0;
	content: ".";
	clear: both;
	height: 0;
	}
* html .clearfix             { zoom: 1; } /* IE6 */
*:first-child+html .clearfix { zoom: 1; } /* IE7 */

/**********************Schatten************************************************/    
.schatten {
    background: url('img/hintergrund2.jpg') repeat;
    /*background: #fbedd4;*/ 
    padding: 0.5em;
    -webkit-box-shadow: 3px 2px 5px #ccc;
    -moz-box-shadow: 3px 2px 5px #ccc;
    box-shadow: 3px 2px 5px #ccc;
    -webkit-border-radius: 7px;
    -moz-border-radius: 7px;
    border-radius: 7px;
}

/******************Comments = Kommentarbereich ***************************************/

/*********************ENDE KOMMENTARE********************************************/

/*******************Eingabeformular Kommentare***********************************/

/**** Formular guestbook Anpassung *****/ 

/******************ENDE Eingabeformular*******************************/


/*********************PLUGINS *****************************************************/

/**************Formular Kontakt per Plugin Contact Form 7***************************/
.wpcf7 {
width: 90%;
margin: 0 auto 0 auto !important;
padding: 1em !important;
border: solid 1px #ccc; 
}



/********************************************* MEDIA QUERIES ***************************************/
/** ACHTUNG die Anweisung muss nach den Basis Anweisungen erfolgen 
Queries duerfen nicht per import eingebunden werden, dann funzt respond.js nicht
--> ans ENDE des style sheet 
Die Reihenfolge ist wichtig
***/

/** iPad landscape  Werbung rechts wird nicht angezeigt 
@media only screen 
and (min-device-width: 768px) 
and (max-device-width: 1024px) 
and (orientation: landscape) {
#werbewrap { display: none;	}			
}*/

/** iPad portrait**/
@media only screen 
and (min-device-width: 768px) 
and (max-device-width: 1024px) 
and (orientation: portrait) { 
#rightnav { display: none; }
#content { width: 72%; }
#leftnav { width: 25%; }	
}

/**********Anpassung an die verschiedenen Bildschirmgroessen von Desktop und Laptop ********************************/
/** Umschaltung Min-Max Navigation bei <600px **/
@media only screen 						/* screen bis 200 bis 480 */
and (min-width: 200px) 
and (max-width: 480px) {
#maxnav, #leftnav, #rightnav, #werbung-post { display:none; }
#content { width: 95%; }
.post, .excerpt { width: 95%; }				
}

@media only screen 
and (min-width: 481px) 
and (max-width:600px) { 				/* screen 481px bis 600px */
#minnav, #leftnav, #rightnav, #werbung-post { display:none; }
#content { width: 98%; }
.post, .excerpt { width: 98%; }
}

/**Breite <980 pixels entspricht 15" **/
@media only screen						/* screen 601px bis 980px */
and (min-width: 601px) 
and (max-width: 980px) { 
#minnav, #rightnav, #widget-footer { display: none; }
#content { width: 74%; }  
#leftnav { width: 25%; } /*25%*/
}

/**Breite <1280 pixels entspricht 17"**/
@media only screen
and (min-width: 981px) 
and (max-width: 1280px) { 
#minnav, #widget-footer, #widget-footer { display: none; }	/* Werbung rechts wird nicht angezeigt */
#total { max-width: 1060px; }    		/* Container fuer gesamte Webseite wird auf wrap reduziert */
}

@media only screen  					/* screen >1280px, Min-Navigation ausgeblendet */
and (min-width: 1281px) { 
#minnav, #widget-footer { display: none; }	
}


