/*
+++++++++++++++++++++++++++++++++++++++++++++
+                                           +
+  Stylesheets erstellt von David Bellmann  +
+                                           +
+++++++++++++++++++++++++++++++++++++++++++++
*/

html, body
{
    width: 100%;
    height: 100%;
}

/*
------------------------------------------------
 Html Tags
------------------------------------------------
*/

body { min-width: 40em; /* Mindestbreite verhindert Umbruch und Anzeigefehler in modernen Browsern */
font-size: 100.1%; font: 1.0em Verdana, sans-serif; color: #666; background: #fff url('../grafik/layout/hg.gif'); background-repeat: repeat-y; background-position: center; margin: 0; padding: 0; text-align: center;}

img { border: 0px;}
.imgBorder { float: left; border:1px solid #ddd; padding: 5px; margin: 0 15px 15px 0; background-color: #fff;}
.imgBorderLeft { float: left; border:1px solid #d4d4d4; padding: 5px; margin: 0 0 10px 0; background-color: #fff;}
.imgBorderLeft100 { float: left; border:1px solid #d4d4d4; padding: 5px; margin: 0 5px 10px 5px; background-color: #fff; width: 100px; }
.imgBorderRight { float: right; border:1px solid #d4d4d4; padding: 5px; margin-bottom: 10px; background-color: #fff;}
.imgGallery, .imgGalleryLast { float: left; border:1px solid #ddd; padding: 5px; margin: 5px 5px 0 0; background-color: #fff;}
.imgGalleryLast { margin-right: 0;}

h2 { clear: both; font-size: 130%; font-weight: bold;}
h3 { clear: both; font-size: 115%; margin: 5px 0 5px 0; padding: 0px; font-weight: bold;}
h3.formular { text-indent: 220px;}
h4 { clear: both; font-size: 90%;}

iframe { border: 1px solid #DDD;}
p { padding: 0; margin: 10px 0 10px 0;}
hr { border: 0px; /* Für Firefox und Opera */ border-top: 1px dotted #fff; border-bottom: transparent; height:1px; }

form { float: left; display: inline; margin: 0; padding: 0; width: 674px;}
fieldset { float: left; margin: 0 0 10px 0; width: 100%; padding: 5px; background-color: #FFF; border: 1px solid #dadada;}
legend { display: none;}
label { float: left; width: 30%; display: block;}
.formularzeile, .formularzeile_err { float: left; padding: 1%; width: 98%; display: block; margin-bottom: 2px;}
.formularzeile_err { background-color:#FDE4E4;}
fieldset input[type=text], .input_norm { width: 300px;}

button { padding: 5px; background-color: #eee; color: #666; /*border: 1px solid #d4d4d4;*/
background-color: #b4cfb0; border: 1px solid #93b98e;}
button:hover { cursor: hand; color: #FFF; border: 1px solid #93b98e; background-color: #93b98e;}

/*
------------------------------------------------
 Links Grundeinstellungen
------------------------------------------------
*/

a, a:link, a:visited {color: #e2001a; text-decoration: none;}
a:hover {text-decoration: underline;}
a.button, a.button:link, a.button:visited { float: left; width: 100%; height: 25px; display: block; text-indent: 5px; background-color: #e4e4e4;/*background-image: url('/grafik/layout/hg_button.gif');*/ line-height: 25px; font-weight: bold; font-size: 90%; text-decoration: none; margin-bottom: 1px;}
a.button:hover { /*background-image: url('/grafik/layout/hg_button_on.gif');*/}
a.back { position: relative; top: -5px; left: -5px; width: 100px; height: 20px; line-height: 20px; display: block; text-align: center; border: 1px solid #FFF; border-width: 0 2px 2px 0; background-color: #851b28; color: #FFF; text-decoration: none; font-weight: bold;}
a.more { float: right; margin-top: 5px; text-decoration: none; font-size: 90%;}

/*
------------------------------------------------
 Seite - Layout
------------------------------------------------
*/

#main { position: relative; padding: 10px; text-align: left; margin: 0 auto 0 auto; height: auto; width: 960px; font-size: 70%; font-family: Verdana, sans-serif;}

/*
------------------------------------------------
 First Navigation platzieren
------------------------------------------------
*/

#firstNavi { position: absolute; top: 220px; left: 10px; border: 1px solid #e3e3e3/*f8f7f5*/;}
#firstNavi a { float: left; display: block; padding: 10px 0 10px 0; width: 120px; color: #666; background-color: #FFF; text-decoration: none; text-align: center; border-right: 1px solid #f8f7f5; font-size:100%;}
#firstNavi a:hover, #firstNavi a.activ { color: #e2001a; background-color: #f8f7f5;}

#basketNavi { position: absolute; width: 233px; top: 220px; left: 735px; border: 1px solid #93b98e; background-color: #93b98e;}
#basketNavi a { float: left; display: block; padding: 10px 0 10px 0; width: 100%; color: #FFF; text-decoration: none; text-align: center; font-size:100%;}
#basketStatus { position: absolute; width: 333px; top: 254px; left: 615px; display: none; height: auto; padding: 10px; background-color: #b4cfb0; border: 1px solid #93b98e; z-index: 10000;}
#basketNavi a:hover > #basketStatus { display: block;}

/*
------------------------------------------------
 Second Navigation platzieren
------------------------------------------------
*/

#secondNavi { float: left; width: 221px; margin-top: 253px; padding: 10px; height: auto; border: 1px solid #e3e3e3; background-color: #f8f7f5;}
#secondNavi a { display: block; padding: 5px 0 5px 0; color: #666; text-decoration: none; background-image: url('../grafik/layout/menue_off.gif'); background-repeat: no-repeat; background-position: 0 10px; text-indent: 10px;}
#secondNavi a:hover, #secondNavi a.activ { border-color: #c1332b; color: #e2001a; background-image: url('../grafik/layout/menue_on.gif');}

/*
------------------------------------------------
 Impressum Navigation platzieren
------------------------------------------------
*/

#impressumNavi { position: absolute; width: auto; top: 10px; right: 10px;}
#impressumNavi a { padding:  0 0 0 10px; color: #666; text-decoration: none; text-align: right; font-size:90%;}
#impressumNavi a:hover, #firstNavi a.activ { color: #e2001a;}

/*
------------------------------------------------
 Banner platzieren
------------------------------------------------
*/

#banner { position: absolute; width: auto; top: 30px; left: 10px; width: 960px; height: 180px; /*background-image: url('../grafik/layout/banner.jpg');*/ }

/*
------------------------------------------------
 Content platzieren
------------------------------------------------
*/

#leftContent { float: left; display: inline; width: 230px; height: auto;}
#content { float: right; display: inline; width: 686px; margin:  254px 0 0 0; padding: 10px; height: auto; border: 1px solid #e3e3e3; background-color: #f8f7f5;}
#whereiam { float: left; width: 686px; height: 20px; color: #dadada; }
#footer { float: right; text-align: center; display: inline; width: 686px; margin: 10px 0 0 0; padding: 10px; height: auto; border: 1px solid #e3e3e3; background-color: #ebe7e0;}
#footer a {padding: 0 5px 0 5px;}
#footer h3 { font-size: 100%;}
/*
------------------------------------------------
 Linker Rand Inhalte platzieren
------------------------------------------------
*/

#lexi, .facebook { float: left; margin-top: 10px; width: 221px; padding: 10px; height: auto; border: 1px solid #e3e3e3; background-color: #f8f7f5;}

#aktuelles { float: left; margin-top: 10px; width: 221px; padding: 10px; height: auto; border: 1px solid #e3e3e3; background-color: #f8f7f5;}

.facebook a { color: #365498 !important; float: left; color: #fff !important; background-color: #365498; padding: 3px 5px 3px 5px; margin-bottom: 10px;}

/*
------------------------------------------------
 Tabelle Produkte
------------------------------------------------
*/

table.product { float: left; width: 100%; padding: 0; border-collapse:collapse;}
table.seperate { border: 1px solid #f8f7f5; border-collapse:seperate;}
table.product td { width: 33%; height: 100%; top: 0; left; 0; padding: 5px; background-color: #FFF; margin-right: 5px; border: 1px solid #e3e3e3/*f8f7f5*/;}
table.product td.blank { background-color: #f8f7f5; border: 1px solid #f8f7f5;}
table.product td.noPadding { padding: 0px;}
table.product td.noBorder { border: 0px;}
table.product td .articleTxt {float: left; width: 100%; height: 50px;}
table.product td .articleImage {float: left; width: 100%; height: 200px; text-align: center;}
/*
table.product td .price { float: right; width: 86px; height: 46px; background: #FFF url('../grafik/layout/price_green.gif') no-repeat; display: block; text-align: right;}
table.product td .price span { display: block; padding: 16px 10px 0 0; font-size: 125%; color: #FFF; font-weight: bold;}
table.product td .priceGreat { float: right; width: 120px; height: 63px; background: #FFF url('../grafik/layout/price_green_great.gif') no-repeat; display: block; margin: 10px 0 10px 0; text-align: right;}
table.product td .priceGreat span { display: block; padding: 25px 12px 0 0; font-size: 140%; color: #FFF; font-weight: bold;}
*/

table.product td .price { float: right; width: 100%; padding: 10px 0 10px 0; font-size: 150%; color: #93b98e; text-align: center;}
table.product td .priceGreat { float: right; width: 100%; padding: 20px 0 20px 0; font-size: 200%; color: #93b98e; text-align: center; font-weight: bold;}

#table.product td .detail { float: left; width: 123px; height: 35px; display: block;}
table.product td .articlePos { position: relative; z-index: 1; width: 100%; height: 100%; top: 0; left: 0;}
table.product td .articleZoom { position: absolute; display: none; left: -10px; top: -10px; background-color: #FFF; width: 235px; height: 355px; border: 1px solid #e2001a; text-align: center; }
table.product td .articleZoom img { padding-top: 20px; }

table.product td .detail { position: absolute; display: none; left: 0px; top: 250px; background-color: #93b98e; width: 100%; padding: 5% 0 5% 0; text-align: center; font-size: 100%; color: #FFF;}

table.product td .inBasket { float: left; width: 100%; background-color: #b4cfb0; border: 1px solid #93b98e; border-width: 1px 0 1px 0; padding: 0 0 10px 0;}
table.product td .inBasket label { float: left; padding: 5px 0 0 0; width: 30%; }
table.product td .inBasket select { width: 150px; }
table.product td .inBasket h3 { color: #FFF; padding: 5px 0 5px 0;}

/*
table.product td span.button { float: left; width: 100%;background-color: #93b98e; text-align: right;}
table.product td span.button button { float: right; width: 200px; background-color: #93b98e; padding: 5px 0 5px 0; font-weight: bold; font-size: 100%; color: #FFF; text-align: right; border: none;}
table.product td span.button button:hover { color: #dadada; cursor:hand; }
*/

table.product td span.button { float: left; width: 100%; text-align: center;}
table.product td span.button button {width: 211px; height: 36px; background-image: url('../grafik/layout/inbasket.gif'); border: none;}

table.product form { float: left; width: 100%; padding: 0;}

/*
------------------------------------------------
 Warenkorb - Ansicht
------------------------------------------------
*/

table.wk { float: left; width: 100%; margin: 10px 0 20px 0; padding: 0; border-collapse: collapse;}
table.wk th { height: 20px; padding: 5px; vertical-align: middle; background-color: #ddd; border: 1px solid #f8f7f5; border-width: 1px 0 1px 0;}
table.wk tbody tr { border-bottom: 1px solid #f8f7f5;}
table.wk td { padding: 5px; vertical-align: top;}
table.wk tr.foots { background-color: #eeeeee; vertical-align: middle;}
table.wk tr.footlinie_unten td { color: #252525 !important; background-color: #eeeeee; vertical-align: middle; border-bottom: 1px solid #f8f7f5;}
table.wk tr.footlinie_oben  td { color: #252525 !important; background-color: #eeeeee; vertical-align: middle; border-top: 1px solid #f8f7f5;}
table.wk tr.footlinie_beide  td { color: #252525 !important; background-color: #dadada; vertical-align: middle; height: 30px; border: 1px solid #f8f7f5; border-width: 1px 0 1px 0;}
table.wk tr.footlinie_unten .inhaltRight, tr.footlinie_oben .inhaltRight, tr.foot .inhaltRight { background-color: #eeeeee;}
table.wk .borderTop { border: 1px solid #f8f7f5; border-width: 1px 0 0 0;}


/*
------------------------------------------------
 Inhalte platzieren
------------------------------------------------
*/

.inhaltCenter    { text-align: center !important;}
.inhaltLeft      { text-align: left !important; }
.inhaltRight     { text-align: right !important;}

.comment { font-size: 80%;}
.noPadding { padding: 0px;}
.padding { padding: 5px;}

.clear { clear: left;}

/*
------------------------------------------------
 Schriftegroessen
------------------------------------------------
*/

.fontSize90 { font-size: 90%;}
.red, .inhalt_red { color: #e2001a;}
.priceColor { color: #000;}

.textForm1 { font-size: 100%; }
.textForm2 { font-size: 105%;}
.textForm3 { font-size: 110%;}
.textForm4 { font-size: 115%;}

a.lexikon, a.lexikon:link, a.lexikon:visited { color: #666; padding: 0 5px 0 5px;}
a.lexikon:hover { color: #e2001a;}

/*
------------------------------------------------
 Farbige Divs 
------------------------------------------------
*/

.grey, .white, .info, .err { float: left; width: 98%; padding:1%; margin: 2px 0 10px 0; display: inline;}
.grey { background-color:#F2F2F2; color:#464548; border: 1px solid #464548;}
.white { background-color:#FFF; border: 1px solid #ddd;}
.err {  border: 1px solid #C40000; border-width: 1px 0 1px 0; color: #C40000;}
.hidden { display: none; }

/*
------------------------------------------------
 Referenzen auf der linke Seite
------------------------------------------------
*/

.referenzen { float: left; width: 100%; height: auto; margin-bottom: 5px;}

/*
------------------------------------------------
 Referenzen auslesen
------------------------------------------------
*/

.referenz { float: left; width: 100%; padding: 5px 0 5px 0; margin-bottom: 5px; border-top: 1px dotted #c5c5c5;}
.referenzName { float: left; width: 90%;}
.referenzLink { float: right; text-align: right; width: 10%;}

/*
------------------------------------------------
 Aktuelles/News auf der linke Seite
------------------------------------------------
*/

.news { float: left; width: 100%; height: auto; margin-bottom: 1px; border-bottom: 1px solid #e3e3e3; padding: 5px 0 5px 0;}

.newsDatum{ float: left; width: 100%; font-size: 80%; color: #666;}
.newsHead { float: left; width: 100%; font-size: 90%; color: #c1332b;}
.newsText { float: left; width: 100%; font-size: 90%; margin-top: 5px;}

/*
------------------------------------------------
 Aktuelles/News auf der rechten Seite
------------------------------------------------
*/

.newsBig { float: left; width: 100%; height: auto; margin-bottom: 1px; padding: 5px 0 5px 0; border-bottom: 1px dotted #fff;}
.newsBig .innen { float: left; width: 205px; margin: 5px;}
.newsBigOhne { float: left; width: 100%; height: auto; margin-bottom: 1px; padding: 0px 0 10px 0;}
.newsBigDatum{ float: left; width: 100%; font-size: 90%; color: #666;}
.newsBigHead { float: left; width: 100%; font-weight: bold;}
.newsBigText { float: left; width: 100%; margin-top: 10px;}

/*
------------------------------------------------
 Upload-Bereich
------------------------------------------------
*/

.contentLeft { float: left; width: 98%; display: inline; text-align: left;}

/*
------------------------------------------
 Zurückbutton
------------------------------------------
*/
.backNew { float: left; padding: 5px 0 10px 0; }

/*
------------------------------------------
 Formatierungen der Blätterfunktionen
------------------------------------------
*/

ul.navIndex { float: right; display: block;}
ul.navIndex li { float: left; padding: 0 1px 0 1px; list-style: none;}
ul.navIndex span.pageDisabled { color: #d4d4d4; }
ul.navIndex span.pageNormal { color: #666; }
ul.navIndex li a, ul.navIndex span { display: block; padding: 3px; }
ul.navIndex li a.activPage { text-decoration: underline; color: #666; }
ul.navIndex li a:hover { border: 1px solid #688722; background-color: #fff; padding: 2px;}

/*
------------------------------
 Galerie
------------------------------
*/

.gallery { float: left; padding-top: 15px; width: 100%;}
.gallery .text { clear: both; position: relative; width: 90%; padding: 0 2% 2% 0; font-size: 120%; color: #c1332b; text-transform: uppercase; font-weight: bold;}
.gallery .navi { clear: both; position: relative; width: 90%; padding: 2% 2% 2% 0; color: #000; font-size: 90%; text-transform: none; font-weight: normal;}

a.gal, a.gal:link, a.gal:visited {color: #666; text-decoration: none; font-weight: normal;}
a.gal:hover, a.galon { color: #c1332b; font-weight: normal;}

.gallery .pic { float: left; padding: 3px; border: 1px solid #999; }

.gallery .viewList { float: left; width: 99%; padding: 3px; margin-bottom: 10px; border: 1px solid #999; }
.gallery .viewList .pic { padding: 0px; border: none; }
.gallery .viewBlock { float: left; /*height: 200px;*/ margin: 0 10px 10px 0; }

.gallery .textList { float: left; padding: 2px 2px 2px 10px;}
.gallery .info { clear: both; position: relative; padding: 2% 2% 2% 0; font-size: 90%;}

/*
------------------------------
 Fancy-Box
------------------------------
*/

.openBox { font-size: 75%; text-align: left;}
.openBox form { width: auto;}

/*
------------------------------
 Suche
------------------------------
*/

#search { position: absolute; top: 3px; left: 10px; font-size: 75%; text-align: left;}
#search form { width: auto;}


#bilderstapel {}
#bilderstapel img {position: absolute; z-index:1;}
#bilderstapel img.obersteebene {z-index:3;}
#bilderstapel img.mittlereebene { z-index:2;}

/* Social */
div#social { width: 100% ; text-align: center; }
div#social a, div#social a:hover { padding: 0 2px 0 2px; }