/* CSS 4 tischlermeister.com by werbungevent.at */

html, body{
background-color:#FEA;
height:100%;
padding:0;
margin:0;
}
body{
font-family: Tahoma, Arial, sans-serif;
color:#000;
background: url(../pix/hg-body.jpg) repeat-x;
min-width:760px;
line-height:1.1em;
}
.clear { 
clear: both; 
}
img{
border:0;
}
.skiplink{
position: absolute;
left: -1000px;
top: -1000px;
width: 0px;
height: 0px;
overflow: hidden;
display: inline;
font-size:0.7em;
}
a:focus{
outline:none;
}

#page{
min-height:100%;
}
* html #page{
height:100%;
}

#top{
background: url(../pix/tischlermeister-logo.jpg) 50% 0 no-repeat;
height:160px;
text-align:center;
font-size:0.8em;
position:relative;
}
#top h1{
position:absolute;
top:-500px;
left:-999px;
}
#navi{
list-style-type:none;
margin:0;
padding:0;
position:absolute;
top:140px;
left:0;
width:100%;
text-align:center;
font-weight:bold;
font-family: Arial, Tahoma, sans-serif;
}
#navi li{
display:inline;
text-transform:uppercase;
}
#navi li a{
padding:0 0.5em;
border-right:1px solid #960;
color:#960;
text-decoration:none;
letter-spacing:1px;
}
#navi li a:hover{
text-decoration:underline;
}
#navi li.lilinks a{
border-right:0 none;
}
#home .listartseite a, #referenz .lireferenzen a, #ueber .liueber a, #kontakt .likontakt a, #links .lilinks a{
color:#333;
cursor:default;
}
.outer{
padding-left:16%; /* Platz für linke Spalte */
padding-right:16%; /* Platz für rechte Spalte */
}
.inner{
width:100%;
margin:0 auto;
max-width:800px;
padding-bottom:2em;
}
.wrapper{
float:left;
width:100%;
margin-left:-20%; /* Abstand ganz links außen */
}
#content {
float:right;
margin-right:-20%; /* Abstand zwischen linker Spalte & Content */
width:100%;
position:relative; 
text-align:center;
}
#text{
width:100%;
margin:0 auto;
text-align:left;
max-width:700px;
background-color:#FEA;
}
#text h2{
font-size:1.2em;
line-height:1.4em;
font-weight:normal;
color:#960;
margin:0.2em 0;
}
#text h3{
margin:0.5em 0;
font-size:0.9em;
color:#333;
border-bottom:3px double #960;
}
#text p{
margin:0.5em 0;
font-size:0.8em;
}
#text li{
font-size:0.8em;
}
#text a{
color:#960;
}
#text a:visited{
color:#666;
}
#text a:hover{
text-decoration:none;
}
#text h3 a{
color:#333;
text-decoration:none;
}
#text h3 a:visited{
color:#666;
}
#text #auswahl, #text #aktrefs{
background-color:#FEA;
float:right;
list-style-type:none;
margin:0;
margin-left:10px;
padding:0;
width:340px;
}
#text #auswahl li{
margin:6px 5px;
float:left;
}
#text #auswahl li a{
background-repeat:no-repeat;
background-position:50% 50%;
display:block;
width:152px;
height:152px;
margin:1px;
border:3px double #960;
position:relative;
color:#000;
text-decoration:none;
}
#text #auswahl li a b{
text-align:center;
display:block;
margin:1px;
padding:0.3em;
}
#text #auswahl .stiegen a{ background-image:url(../pix/schrenk-stiegen-treppen.jpg); }
#text #auswahl .moebel a{ background-image:url(../pix/schrammel-moebelbau.jpg) }
#text #auswahl .tueren a{ background-image:url(../pix/schrenk-innentueren.jpg); }
#text #auswahl .aussen a{ background-image:url(../pix/holz-im-garten-anbauten.jpg); }

#text #auswahl .verkleidung a{ background-image:url(../pix/holzverkleidung-betonstiege.jpg); }
#text #auswahl .freitragend a{ background-image:url(../pix/freitragende-holz-stiege-treppe.jpg); }
#text #auswahl .rohbau a{ background-image:url(../pix/holzrohbaustiege.jpg); }
#text #auswahl .gelaender a{ background-image:url(../pix/handlauf-gelaender.jpg); }

#text #auswahl a span{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background: url(../pix/ref-overlay.png);
}
#text #auswahl a:hover b {
background-color:#960;
color:#FFF;
}
#text #auswahl a:hover span{
display:none;
}
#text .katnavi{
clear:both;
list-style-type:none;
margin:0.5em 0;
padding:0;
}
#text .katnavi li{
display:inline;
padding:0;
margin:0;
}
#text .katnavi li a{
margin:0 0.5em;
}
#text .foto{
float:left;
padding:1px;
margin-right:0.8em;
margin-bottom:0.8em;
border:3px double #960;
background-color:#FEA;
}
#text .meldung{
background-color:#ED9;
padding:0 5px;
margin-bottom:10px;
margin-right:340px;
border:3px double #960;
}
#text .textnormal{
background-color: #FEA;
border: 1px solid #960;
color: #666;
}
#text .textfocus{
background-color: #FFF;
border: 1px solid #333;
color: #000;
}
#text .button{
border: 3px double #960;
background-color: #FEA;
color: #960;
font-weight:bold;
}
#text table{
border:none;
padding:0;
margin:0;
}
#text #fototable {
width:100%;
}
#text #fototable th{ font-size:0.8em;
font-weight:normal;
text-align:left;
}
#text #fototable td.fotozelle{
padding:5px;
margin:5px;
text-align:center;
}
#text #fototable td.fotozelle img{
padding:1px;
border:3px double #960;
}
/* Fehlernachricht */
#text .errmsg{
border: 6px double #B00;
background-color: #FFF;
font-weight:bold;
color: #000;
text-align:left;
margin:0.5em;
padding:1em;
}
/* OK-Nachricht */
#text .okmsg{
border: 6px double #060;
font-weight:bold;
background-color: #FFF;
color: #000;
text-align:left;
margin:0.5em;
padding:1em;
}
#kontakt #text label b{
text-align:right;
display:block;
float:left;
width:4em;
margin-right:0.5em;
font-weight:normal;
}
#left {
text-align:center;
float:left;
width:20%;
position:relative;
overflow:hidden;
}
#right {
text-align:center;
float:right; 
width:20%;
margin-right:-20%; /* Abstand zwischen rechter Spalte & Content */
position:relative; 
overflow:hidden;
}
#left ul, #right ul, .refnavi{
list-style-type:none;
margin:0;
padding:0;
}
.refnavi li{
float:left;
margin:7px;
padding:1px;
}
#text #aktrefs li{
margin:5px;
float:left;
padding:1px;
}
#left li, #right li{
float:left;
margin:8px;
padding:1px;
width:100%;
}
#left li img, #right li img, .refnavi li img, #text #aktrefs li img{
padding:1px;
margin:1px;
border:3px double #960;
}
#left li a, #right li a, .refnavi li a , #text #aktrefs li a{
position:relative;
display:block;
width:100px;
}
.refnavi li a{
position:relative;
display:block;
}
#left li a span, #right li a span, .refnavi li a span, #text #aktrefs li a span{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background: url(../pix/ref-overlay.png) 50% 50% no-repeat;
z-index:99;
}
#left li a:hover span, #right li a:hover span, .refnavi li a:hover span, #text #aktrefs li a:hover span{
display:none;
}
#bottom {
height:2em; 
margin-top:-2em; 
text-align:center;
color:#FFF;
background-color:#960;
position:relative;
z-index:1;
}
#bottom ul{
list-style-type:none;
padding:0.4em 0;
margin:0;
}
#bottom li{
display:inline;
margin:0;
padding:0;
font-weight:bold;
font-size:0.8em;
}
#bottom a{
color:#FFF;
text-decoration:none;
}
#bottom a:hover{
text-decoration:underline;
}
#alexa{
width:0;
height:0;
overflow:hidden;
}