@import url(http://fonts.googleapis.com/css?family=Ubuntu:400,700,400italic);

/*-------------------------------------------------*/
/**********************************************************************************
	** Genereller Browserreset (aus YAML)
	**********************************************************************************/

	  /* Globales Zurücksetzen der Innen- und Außenabstände für alle HTML-Elemente */
	  *
{ margin:0; padding: 0 }

/*-------------------------------------------------*/
/* Korrektur: Das Zurücksetzen der Abstände verursacht zu kleine Selectboxen. */
	  option
{ padding-left: 0.4em }

/*-------------------------------------------------*/
/**
	  * Globale Korrektur des Italics Bugs des IE 5.x und IE 6
	  *
	  * @bugfix
	  * @affected   IE 5.x/Win, IE6
	  * @css-for    IE 5.x/Win, IE6
	  * @valid      yes
	  */
	  * html body *
{ overflow:visible; }

/*-------------------------------------------------*/
* html iframe, * html frame
{ overflow:auto }

/*-------------------------------------------------*/
* html frameset
{ overflow:hidden }

/*-------------------------------------------------*/
/* Erzwingen vertikaler Scrollbalken in Netscape, Firefox und Safari Browsern */
	  html
{ height: 100%; overflow-x: hidden; }

/*-------------------------------------------------*/
body
{
	    min-height: 101%;
	    /* Beseitigung von Rundungsfehler beim Skalieren von Schriftgrößen in älteren Opera Versionen */
	    font-size: 100.01%;
	    /* Vorgabe der Standardfarben und Textausrichtung */
	    color: #000;
	    text-align: left;
background-image: url('../backgrounds/koegl_mainbg.jpg');
	  }

/*-------------------------------------------------*/
/* Rahmen für <fieldset> und <img> Elemente löschen */
	  fieldset, img
{ border: 0 solid}

/*-------------------------------------------------*/
/*  Neue Standardwerte für Listen & Zitate */
	  ul, ol, dl
{ margin: 0 0 1em 1em }

/*-------------------------------------------------*/
li
{ margin-left: 1.5em; line-height: 1.5em; }

/*-------------------------------------------------*/
dt
{ font-weight: bold; }

/*-------------------------------------------------*/
dd
{ margin: 0 0 1em 2em; }

/*-------------------------------------------------*/
blockquote, cite
{ margin: 0 0 1em 1.5em; font-size: 0.93em; width: auto;}

/*-------------------------------------------------*/
/*------------------------------------------------------------------------------------------------------*/

	/***************************************************************************************
	**   Grundformatierungen
	***************************************************************************************/
body, html
{
background-image: url('../backgrounds/koegl_mainbg.jpg');
font-family: 'Ubuntu', sans-serif;
/*font-family: verdana, arial;*/
font-size: 100%;

}

/*-------------------------------------------------*/
h1
{
line-height: 150%;
font-weight: normal;
padding: 0px;
margin: 0px;
}

/*-------------------------------------------------*/
h2
{
font-size: 1.214em; font-weight: normal; 
color: #fff;
line-height: 1.7;
padding-left: 5px;
margin: 0px;
}

/*-------------------------------------------------*/
h3
{
font-size: 80%;
line-height: 1.5;
font-weight: bold;
padding: 0px;
margin: 0 0 10px 0;
}

/*-------------------------------------------------*/
.content_text
{
font-size: 80%;
line-height: 1.5;
}

/*-------------------------------------------------*/
.bild_text
{
font-size: 60%;
}

/*-------------------------------------------------*/
a.button
{
  border: solid 1px #6699ff;
  background-image: url('../../images/th.jpg');
  padding: 3px;  
  color: black;
  font-family: arial;
  text-decoration: none;
  white-space: nowrap;
}

/*-------------------------------------------------*/
a.button:link
{
  border: outset 1px #6699ff;
  background-image: url('../../images/th.jpg');
  padding: 1px;  
  color: black;
  font-family: arial;
  text-decoration: none;
  white-space: nowrap;
}

/*-------------------------------------------------*/
a.button:visited
{
  border: outset 1px #6699ff;
  color: black;
  text-decoration: none;
}

/*-------------------------------------------------*/
a.button:hover
{
    border: solid 1px #aaaaaa;
    text-decoration: none; 
}

/*-------------------------------------------------*/
a.button:active
{
    color: #C31624;
    border: inset 1px #6699ff;  
  padding: 3px;  
    text-decoration: none; 
}

/*-------------------------------------------------*/
a.button_inaktiv
{
  border: inset 1px #C31624;
  background-image: url('../../images/th.jpg');
  padding: 3px;  
  color: #C31624;
  font-family: arial;
  text-decoration: none;
  white-space: nowrap;
}

/*-------------------------------------------------*/
a.button_inaktiv:link
{
  border: inset 1px #C31624;
  background-image: url('../../images/th.jpg');
  padding: 3px;  
  color: #C31624;
  font-family: arial;
  text-decoration: none;
  white-space: nowrap;
}

/*-------------------------------------------------*/
a.button_inaktiv:visited
{
  border: outset 1px #C31624;
  color: #C31624;
  text-decoration: none;
}

/*-------------------------------------------------*/
a.button_inaktiv:hover
{
    text-decoration: none; 
}

/*-------------------------------------------------*/
a.button_inaktiv:active
{
    color: #C31624;
    text-decoration: none; 
}

/*-------------------------------------------------*/
table
{
margin: 0px;
padding: 0px;
border-spacing: 0px;
width: 100%;
}

/*-------------------------------------------------*/
td
{
vertical-align: top;
font-size: 90%;
}

/*-------------------------------------------------*/
th
{
background-image: url('../backgrounds/applications/table.gif');
background-repeat: repeat-x;
padding-right: 5px;
text-align: left;
font-size: 90%;
}

/*-------------------------------------------------*/
tr
{
margin: 0px;
padding: 0px;
width: 100%;
}

/*-------------------------------------------------*/
td.hell
{
background-color: #fff;
padding-left: 2px;
}

/*-------------------------------------------------*/
td.dunkel
{
background-color: #f8f8f8;
padding: 2px;
}


/* Produkte */
#produkte {overflow: hidden; }
#produkte h2 {position: relative;  z-index: 2; font-size: 1.214em; font-weight: normal; color: #fff; height: 40px; line-height: 40px;; margin: 0; padding: 0 0 0 15px;; background: url("/cmx/ordner/backgrounds/holzbalken.jpg") no-repeat;}
#produkte .item {position: relative; width: 410px; height: 230px; float: left; border: 1px solid #ccc; overflow: hidden; margin-bottom: 40px;}
#produkte .item img {position: relative; width: 410px; /*margin-top: -40px;*/ z-index: 1;}
#produkte .weiter {position: absolute; bottom: 20px; right: 0px; z-index: 3; /*background-color: #818284;*/ width: 150px; color: #fff;}
#produkte .weiter a.link {font-size: 0.929em; color: #fff; display: block; padding: 5px 5px 5px 20px; background: url("/cmx/ordner/backgrounds/weiter_pfeil.jpg") no-repeat; background-position: center left; background-color: #818284;}



/* Neumaschinen */
#neumaschinen {overflow: hidden; }
#neumaschinen h1 {font-size: 120%; margin-bottom: 20px;}
#neumaschinen h2 {color: #fff; height: 40px; line-height: 1; margin: 0; padding: 8px 5px 5px 5px; background: url("/cmx/ordner/backgrounds/holzbalken.jpg") no-repeat;}

#neumaschinen .item h2 {position: relative;  z-index: 2; font-size: 1.214em; font-weight: normal; color: #fff; height: 40px; line-height: 40px;; margin: 0; padding: 0 0 0 15px;; background: url("/cmx/ordner/backgrounds/holzbalken.jpg") repeat-x;}
#neumaschinen .item {position: relative; width: 865px; height: 230px; border: 1px solid #ccc; overflow: hidden;}
#neumaschinen .item > img {position: relative; width: 865px; /*margin-top: -40px;*/ z-index: 1;}
#neumaschinen .weiter {background-color: /*#818284*/ #757577; width: 690px; margin: 15px 0 0 165px; color: #fff;}
#neumaschinen .weiter a {font-size: 0.929em; color: #fff; display: block; padding: 5px 5px 5px 20px; background: url("/cmx/ordner/backgrounds/weiter_pfeil2.jpg") no-repeat; background-position: center left;}

.maschinenarten {width: 210px; height: 250px; margin: 0 5px 5px 0; float: left; overflow: hidden; border: 1px solid #E7E7E7; }


/* Hersteller */
#hersteller {overflow: hidden;}
#hersteller  h1 {font-size: 120%; margin-bottom: 20px;}
#hersteller h2 {color: #fff; height: 16px; line-height: 1; margin: 0; padding: 7px; background: url("/cmx/ordner/backgrounds/holzbalken.jpg") no-repeat;}

#hersteller .item {float: left; width: 122px; text-align: center; margin: 0 5px 5px 0;}
#hersteller .item .logo {width: 120px; height: 120px; text-align: center; }
#hersteller .item a {text-decoration: none; border: 1px solid #E7E7E7;}
#hersteller .item a:hover {text-decoration: none; border: 1px solid #000;}


/* Aktionen - Neuheiten - Hersteller Downloads */
#HerstellerDownloads {overflow: auto;}
#HerstellerDownloads h2 {font-size: 110%; color: #fff; width: 615px; line-height: 1; margin: 10px 0 20px 0; padding: 10px; background: url("/cmx/ordner/backgrounds/holzbalken.jpg") no-repeat;}
.herstellerdownloads_panel {max-width: 100%; overflow: auto;}
.herstellerdownloads_item2 {position: relative; float: left; max-width: 48%; margin: 0 10px 10px 0; z-index: 1;}
.herstellerdownloads_item2 img {max-width: 100%;}
.herstellerdownloads_item3 {position: relative; float: left; max-width: 31%; margin: 0 10px 10px 0; z-index: 1;}
.herstellerdownloads_item3 img {max-width: 100%;}
.herstellerdownloads_item4 {position: relative; float: left; max-width: 23%; margin: 0 10px 10px 0; z-index: 1;}
.herstellerdownloads_item4 img {max-width: 100%;}
.herstellerdownloads_item_text_transp {position: absolute; bottom: 0; background-color: #fff; opacity:0.4; filter:alpha(opacity=40); z-index: 2; width: 100%; height: 25%;}
.herstellerdownloads_item_text {position: absolute; bottom: 0; z-index: 2;}
.herstellerdownloads_item_text h3 {}
.herstellerdownloads_item_text p {color: #fff; padding: 10px;}
.herstellerdownloads_panel_nav {margin-bottom: 20px;}


.bild_schatten {
-moz-box-shadow: 3px 3px 6px 0px #000;
-webkit-box-shadow:  3px 3px 6px 0px #000;
box-shadow: 3px 3px 6px 0px #000;
}

.bild {width: 130px; height: 130px; background-color: #fff; overflow: hidden; float: left; margin: 25px 20px 0 0;}

.brotkrumen {margin-bottom: 20px;}
.brotkrumen a:link, a:visited, a:active {font-size: 100%; text-decoration: underline;}
.brotkrumen a:hover {text-decoration: none;}





/* .........................flexForm ...............................*/

.flexForm {display: flex; flex-wrap: wrap;}
.flexForm > div:nth-child(1n) {width: 25%;}
.flexForm > div:nth-child(2n) {width: 66.66%;}
.flexForm > div {margin: 0 0 15px 0;}
.flexForm input[type=text]
, .flexForm input[type=submit]
, .flexForm input[type=password]
, .flexForm textarea
, .flexForm select {width: 100%; border: 1px solid #DDE2E8; padding: 5px; transition: border 1s ease; border-radius: 3px;}

.flexForm input[type=submit] {background: #757577; color: #fff; font-weight: bold;}

.flexForm input[type=text]:hover
, .flexForm input[type=password]:hover
, .flexForm textarea:hover
, .flexForm select:hover
, .flexForm input[type=text]:focus
, .flexForm input[type=password]:focus
, .flexForm textarea:focus
, .flexForm select:focus{border: 1px solid #121D2A; transition: border 1s ease;}
.flexForm img {max-width: 100%;}
.flexForm .trenner {background: #DDE2E8; padding: 10px;}

@media only screen and (max-width: 415px) {
.flexForm > div:nth-child(1n) {width: 100% !important; margin: 0;}
.flexForm > div:nth-child(2n) {width: 100% !important; margin: 0 0 15px 0;}
}


/* ...... CookieBanner ...... */
.CookieBanner {font-size: 12px; color: #666666; position: fixed; bottom: 0; left: 0; width: 100%; padding: 10px; border: 1px solid #fff; background: rgba(232,232,232,0.95); z-index: 1;}
.CookieBanner a {display: inline-block; padding: 10px; background-color: #A3A3A3; color: #fff; border: 1px solid #fff;}