/*  =========================================================
Stylesheet zur Formatierung am Bildschirm
Datei:  layout.css
Datum:  28. September 2010
Autor:  Stefan Brockhaus
Aufbau  1. SEITENAUFBAU
        2. TYPOGRAFIE
        3. KONTAKTFORMULAR
        4. NAVIGATION
        5. SLIDER
        6. SONSTIGES
========================================================== */
/*behavior: url(css/iepngfix.htc)*/
/* ======================================
   1. SEITENAUFBAU
   ====================================== */

/* Bildlaufleiste im Firefox immer zeigen */
html { /*height: 101%;*/ 
 text-align:center;
  background-image:url(../uploads/bg.jpg);
  background-position:bottom center;
  background-repeat:no-repeat;
  min-height: 1200px;
}

body{ 
 margin:0; 
 padding:0; 
 text-align:center;
 /*background-image:url(../uploads/bg-shadow.png);
 background-position:center 0px;
 background-repeat:repeat-y;*/
}

#wrapper {
margin: 50px 0px 111px 0px;
width:100%;
height:100%;
}
 
#pagewidth{
  margin: 0 auto 50px; 
  font-family: Arial;
  width:990px; 
  text-align:left; 
  height:100%;
  -moz-box-shadow: 0 0 9px  #888;
  -webkit-box-shadow: 0 0 9px  #888;
  box-shadow: 0 0 9px  #888;
}

#phone{
font: bold 15px Arial,"Lucida Sans Unicode","Bitstream Vera Sans","Trebuchet Unicode MS","Lucida Grande",Verdana,Helvetica,sans-serif;
text-align:right;
color:#ffffff;
 position:relative; 
 height:27px;
 padding-top: 8px;
 padding-right:25px; 
 background-color:#52b557; 
 width:965px;
 display:block;
 overflow:auto;
}  
 
#header{
 position:relative; 
 height:155px; 
 background-color:#FFFFFF;
 width:990px;
 display:block;
/* overflow:auto;*/
}

.logo {
width:350px;
height:122px;
  background-image:url(../uploads/logo-querbeet.png);
  background-position:bottom center;
  background-repeat:no-repeat;
margin-top:10px;
margin-bottom:20px;
float:left;
    margin-left: 12px;
}

.logo:hover {

  background-image:url(../uploads/logo-querbeet2.png);

}

#navigation {/*width:485px;*/ float:right; text-transform:uppercase;}

#slider{

 position:relative; 
/* height:195px;*/ 
/* background-color:#A3D69F; */
 width:990px;
 display:block;
 overflow:auto;
 }

#content {background-color:#FFFFFF;padding: 50px 25px 25px 25px;color:#707173; border-top: solid 4px #52B557;}  
 
#leftcol{
 width:460px; 
 float:left; 
 position:relative; 
/* background-color:#909CA6;*/ 
 }
 
 #rightcol{
 position: relative; 
 width:440px;
 float:right; 
 }
 
#aktion{
 background-color: #52b557;  
 position: relative; 
 width:440px;
 float:right; 
 color:#fff;
 padding:10px;
 font-size:28px;
    margin-top: 38px;
 text-transform:uppercase;
 }
 
#rinn{
  background-color: #fff; 
  position: relative;  
  width:440px;
  float:right; 
  color:#52b557;
  padding:10px;
  font-size:16px;
  margin-top:40px;
  text-transform:uppercase;
}

#partner-box{
  background-color: #fff; 
  position: relative;  
  width:440px;
  float:left; 
  color:#52b557;
  padding:10px;
  font-size:16px;
  margin-top:40px;
    height: 220px;
}
 
#aktion small{
font-size: 15px;
margin-top: 12px;
float:right;
}

#aktion a {
text-decoration:none !important;
color:#ffffff !important;}

#aktion a:hover {color:#DFDFDF !important;}

#leistungen {
margin: 50px 0px 15px 0px;
width: 100%;
float:left;}

.leistung {
float:left;
margin-bottom: 25px;
}

img {border:0px;}

#galerien p.caption img {width:216px;height:216px;}

li.leistung {
float:left;
margin-bottom: 25px;
border-bottom:1px dashed #52b557;
padding-bottom:25px;
}

li.leistung:last-child {
margin-bottom: 0px;
border-bottom:none;
padding-bottom:0px;
}

.bild {
float:left;
margin-right: 17px;
height:216px;
width:216px;
padding:2px;
 border: 1px solid #BBBBBB;
}

.bild1 {
float:left;
height:216px;
width:216px;
padding:2px;
 border: 1px solid #BBBBBB;
}

.bildleistungen {
padding:2px;
 border: 1px solid #BBBBBB;
float:left;
margin-right: 30px;
height:216px;
width:216px;
}

.text {line-height:22px; margin-right: 20px; margin-top: 8px;margin-left:252px;}

.text p {margin-bottom:15px;}

.ltext {
font-weight:bolder;
margin-top: 5px;
}

#aktuelles {
  width: 100%;
  /*margin-top: 50px;*/
/*border-top: 1px dashed #52b557;*/
/*padding-top: 25px;*/
float: left;


}

.spalten {
widows: 1;
orphans: 1;

-moz-column-count: 3;
-webkit-column-count: 3;
column-count: 3;

  -webkit-column-gap: 25px;
     -moz-column-gap: 25px;
          column-gap: 25px;

-moz-column-width: 200px;
-webkit-column-width: 200px;
column-width: 200px;
/*
  -webkit-column-rule: 1px dotted #ddd;
     -moz-column-rule: 1px dotted #ddd;
          column-rule: 1px dotted #ddd;*/

  -moz-column-fill: balance;
       column-fill: balance;
       
page-break-inside: avoid;                 /* Firefox */
column-break-inside: avoid;               /* Chrome, Opera, Safari */
-webkit-column-break-inside: avoid;
page-break-inside: avoid;
break-inside: avoid;
}

.spalten p:first-child {
  margin-top: 0 !important;
  width: 100%;
}

#aktuelles div.spalten p {
  margin: 12px 0 12px 0;
  overflow-wrap: break-word
  word-wrap: break-word;
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
  -moz-hyphens: auto;
  hyphens: auto;
}

/*

#leftcol{
 width:495px; 
 float:left; 
 position:relative; 
 background-color:#909CA6; 
 }
 
#maincol{
 background-color: #CCD6D6;  
 position: relative; 
 width:495px;
 float:right; 
 }
 */
#footer{
font: bold 13px Arial,"Lucida Sans Unicode","Bitstream Vera Sans","Trebuchet Unicode MS","Lucida Grande",Verdana,Helvetica,sans-serif;
text-align:right;
color:#ffffff;
 position:relative; 
 height:27px;
 padding-top: 8px;
 padding-right:25px; 
 background-color:#52b557; 
 width:965px;
 display:block;
 overflow:auto;
  text-transform:uppercase;
} 

#footer a {text-decoration:none;color:#ffffff;}
#footer a:hover {color:#DFDFDF;}
 
/* ======================================
   1. Typografie
   ====================================== */
   
#content a {text-decoration:none;color:#707173;}
#content a:hover {color:#4E4F50;}
 
h1 { font-size: 24px;
    font-weight: normal;
    margin-bottom:15px;
    }
    
h2 {font-size: 17px;margin-bottom:15px;}

h3 {font-size: 15px;margin-bottom:13px;}


.breadcrumb {
float: left;
margin-bottom: 25px;
width: 940px;
}
 
#content p {line-height: 14pt;}

span.invisible {color:white;
}

#kontakt #rightcol p {font-size: 12px;line-height: 12pt;} 
#kontakt h2 {font-size:12px; margin: 10px 0px 5px 0px;}


/* ======================================
   1. galerie
   ====================================== */
   
.th {
padding:2px;
 border: 1px solid #BBBBBB;
float:left;
margin:0px 9px 9px 0px;
height:120px;
width:120px;
}

.thlast {
padding:2px;
 border: 1px solid #BBBBBB;
float:left;height:120px;
width:120px;

}     

div.clear {
	clear: both;
}

p.caption {
padding:2px;
 border: 1px solid #BBBBBB;
	display: block !important;
	position: relative !important;
    float: left;
    margin-right: 17px;
    margin-bottom: 17px;
    width:216px;
    height:216px;
}

p.caption2 {
	display: block !important;
	position: relative !important;
    float: left;
}

p.caption img{
	position: absolute !important
}
p.caption span {
	background: #52B557;
	background: rgba(82,181,87,0.8);
	color: white !important;
	display: none;
	padding: 25px 10px !important;
	text-align: center;
	position: absolute !important;
	bottom: 2 !important;
	left: 2 !important;	font-weight: bold;
}
p.caption span big {
	font-weight: bold;
  }
  
  /*p.last {margin-right: 0px;}*/
html.cufon-active.cufon-ready body#referenzen div#wrapper div#pagewidth div#content.clearfix ul li:nth-child(4n) a p.caption
  {
    margin-right: 0px;
  }
 
 
/* ******************************************************************** */ 
/* Clearfix: http://csscreator.com/attributes/containedfloat.php        */
/* ******************************************************************** */
.clearfix:after {
 content: "."; 
 display: block; 
height: 0; 
 clear: both; 
 visibility: hidden;
 }
 
.clearfix{display: inline-block;}

/* Hides from IE-mac \*/
* html .clearfix{height: 1%;}
.clearfix{display: block;}
/* End hide from IE-mac */  


 
 
/* ******************************************************************** */ 
/*                      printer styles                                  */ 
/* ******************************************************************** */ 
     
 @media print{ 
/*hide the left column when printing*/ 
#leftcol{display:none;} 
#twocols, #maincol{width:100%; float:none;}
}