/* ###################################
Screen-Styles "Tigges Edelstahltechnik"
23.4.2009

1. gallery styles/stu nich!!!!vorne
2. Grundeinstellungen
3. allgemein
4. Layout
5. sonstige    
################################### */

/* ================================================================ 
Gallery Styles / >Seite Aufbaubeispiele

The original version of this stylesheet and the associated (x)html
is available at http://www.stunicholls/gallery/left_right_click.html
Copyright (c) 2005-2007 Stu Nicholls. All rights reserved.
=================================================================== */
#gallery { width:660px; position:relative; height:40px; padding-top:420px; margin:0 113px 90px 0px;}

#gallery img.left {width:50px; height:50px; background:#999; float:left;cursor:pointer;}
#gallery img.right {width:50px; height:50px; background:#999; float:left;cursor:pointer;}

#gallery ul {list-style:none; padding:0; margin:0; float:left; background:transparent; border:none;}
#gallery ul li {display:inline; width:60px; height:50px; float:left; margin:0 2px; border:1px solid #000; cursor:pointer;}

#gallery ul li.hide {display:none;}

/* using background images */
#gallery ul li.th1 {background:url(../fotos/regal_01_t.jpg);}
#gallery ul li.th2 {background:url(../fotos/regal_02_t.jpg);}
#gallery ul li.th3 {background:url(../fotos/regal_03_t.jpg);}
#gallery ul li.th4 {background:url(../fotos/regal_04_t.jpg);}
#gallery ul li.th5 {background:url(../fotos/regal_05_t.jpg);}
#gallery ul li.th6 {background:url(../fotos/regal_06_t.jpg);}
#gallery ul li.th7 {background:url(../fotos/regal_07_t.jpg);}
#gallery ul li.th8 {background:url(../fotos/regal_08_t.jpg);}
#gallery ul li.th9 {background:url(../fotos/regal_09_t.jpg);}
#gallery ul li.th10 {background:url(../fotos/regal_10_t.jpg);}
#gallery ul li.th11 {background:url(../fotos/regal_11_t.jpg) no-repeat;}
#gallery ul li.th12 {background:url(../fotos/regal_12_t.jpg);}
#gallery ul li.th13 {background:url(../fotos/regal_13_t.jpg);}
#gallery ul li.th14 {background:url(../fotos/regal_14_t.jpg);}
#gallery ul li.th15 {background:url(../fotos/regal_15_t.jpg);}
#gallery ul li.th16 {background:url(../fotos/regal_16_t.jpg);}
#gallery ul li.th17 {background:url(../fotos/regal_17_t.jpg);}
#gallery ul li.th18 {background:url(../fotos/regal_18_t.jpg);}
#gallery ul li.th19 {background:url(../fotos/regal_19_t.jpg);}
#gallery ul li.th20 {background:url(../fotos/regal_20_t.jpg);}
#gallery ul li.th21 {background:url(../fotos/regal_21_t.jpg);}
#gallery ul li.th22 {background:url(../fotos/regal_22_t.jpg);}
#gallery ul li.th23 {background:url(../fotos/regal_23_t.jpg);}
#gallery ul li.th24 {background:url(../fotos/regal_24_t.jpg);}
#gallery ul li.th25 {background:url(../fotos/regal_25_t.jpg);}
#gallery ul li.th26 {background:url(../fotos/regal_26_t.jpg);}
#gallery ul li.th27 {background:url(../fotos/regal_27_t.jpg);}
#gallery ul li.th28 {background:url(../fotos/regal_28_t.jpg);}

/* remove visibility:hidden; to use the original images as thumbnails */
#gallery ul li img {visibility:hidden; display:block; width:50px; height:50px;}

#gallery ul li span {display:none; position:absolute; left:630px; top:0px; width:300px; color:#666; font-size:90%; text-align:left;}
#gallery ul li b {color:#333;}

#gallery ul li.chosen {border-color:#e20020; cursor:default;}
#gallery ul li.chosen div {position:absolute; left:0; top:0; width:620px; height:402px; /*background: green;*/ border:none;}
#gallery ul li.chosen div i {width:620px /* 520??? wenn 620 dann Bild mittig!!!*/; height:402px; display:table-cell; vertical-align:middle; text-align:left;} 
#gallery ul li.chosen div i img {visibility:visible; width:auto; height:auto; border:1px solid #aaa; /*?? margin:0 auto;*/}
#gallery ul li.chosen span {display:block;}



/* ###################################
2. Grundeinstellungen   
################################### */
* { padding: 0; margin: 0; } /* tabularasa */
h2, p, ul, ol { margin-bottom: 1em; }
ul ol { margin-bottom: 0; } /* verschach */
li { margin-left: 2em; }


/* ###################################
3. allgemeine Styles
################################### */

html { height: 101% } /* FireFoxHoppel (immer srollb!) */

body { background: #666 url(../bilder/hg1600x1200.jpg) top left; color: white; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: small; background-attachment: fixed }

h2 { font-size: 120%; }
h1 { font-size: 120%; }
h3 { font-size: 13px;}

strong { color: #222; }

address { color: #333; text-align: center; font-size: 80%; font-style: normal; letter-spacing: 1px; line-height: 1.5; }


/* Hyperlinks ################### */

a { text-decoration: none; outline: none;}
a:link { color: #111 }
a:visited { color: #111 }
a:hover, a:focus { border-bottom: 1px dotted #e20020; color: #111 }
a:active { color: #111; } 

/* Klassen und IDs ############## */

.h2bg { background-color: #e20020 /* ROT aus Logo */; color: #fff;  } /* Seiten-Headlines (laut Menu) */

.h2bg_prod { background-color: #999; color: #fff; text-align: left; padding-right: 500px; } /* Produkte Headline1 */
.prod_h3 { font-weight: bold;  color: #777; padding-left: 10px;} /* Produkte Headline2 */
.prod_h4 { font-weight: normal;  color: #000; font-size: 80%; margin: 0px; padding: 12px; } /* Produkte Headline3 Höhe... mm... */
.prod_h5 { font-weight: normal;  color: #111; font-size: 80%; margin: 0px; padding: 12px; } /* Produkte 4 Massangaben */
.prod_h6 { font-weight: normal;  color: #666; font-size: 80%; margin: 0px; padding: 0px; } /* Preisangaben */


.skiplink { position: absolute; top: -5000px; left: -5000px; width: 0; height: 0; overflow: hidden; display: inline; } /* ab width, nur zur sicherheit... */

.clear{
	clear: both;
	line-height: 0px;
	height: 0px;
	overflow: hidden;
}

.first{
	margin-top: 0px;
}

.last{
	margin-bottom: 0px;
}

/* ###################################
4. Styles für Layoutbereiche      
################################### */

#wrapper { background-color: #fff; color: black;
  width: 980px; margin: 10px auto; /* zum Zentrieren oben/unten 0px, links+rechts gleich breiter Rand ! (ab ie6)  */ border: 10px solid #f4f4f4; }

#kopfbereich { height: 75px; background: #666 url(../bilder/hg980x90a.jpg) top left; color: black; padding: 10px 20px 0 20px; }

/* #kopfbereich span { color: #d90000;} */

#navibereich {text-align: left; background: #666 url(../bilder/hg980x30b.jpg) top left; padding: 5px 10px 4px 15px ; border-bottom: 1px dotted #f4f4f4; }

#navibereich ul { margin-bottom: 0;}

#navibereich li { display: inline; list-style-type: none; margin: 0 }

#navibereich a, #navibereich span { color: black; padding: 4px 8px 4px 8px ; border: 1px dotted #f4f4f4; } 

#navibereich a:hover, #navibereich a:focus { background-color: #fff; color: black; border-bottom-color: #fff; } 

#navi01 span, #navi02 span, #navi03 span, #navi04 span, #navi05 span, #navi06 span, #navi07 span, #navi08 span, #navi09 span { background-color: #fff; color: black; border-bottom-color: #fff; } /* aktive Seite markieren !!! keine body-IDs mehr!!!*/

#textbereich { padding: 20px 10px 20px 20px; border-right: 1px dotted #666; border-bottom: 1px dotted #666; border-left: 1px dotted #666; }

#textbereich a { border-bottom: 1px dotted #111; } /* Beispiel verschachtelte selektoren */

/* #textbereich ul li { list-style-type: square } verschachtelte selektoren / nur in ul werdem li zu Squares, oder sogar >> #textbereich ul li, also nur im textbereich... */
#textbereich a:hover, #textbereich a:focus { border-bottom: 1px dotted #e20020 } /* >>"Spezifität!!!" 2. Definition von a:hover setzt sich durch /"Punktgewinn" */

#txtbereich_links { width: 360px; padding: 0px 10px 20px 0px; background-color: transparent; text-align: justify; }  
#txtbereich_links_prod { width: 100%; padding: 0px 10px 20px 0px; background-color: transparent; text-align: left; }

#fussbereich { background-color: #f4f4f4; padding: 10px 20px 10px 20px; } 


/* ###################################
5. sonstige Styles       
################################### */


/* Kontaktformular ############### */

form { background-color: #fff; color: black; width: 700px; padding: 0px; border: 1px dotted #fff; } 

label { display: block; cursor: pointer; } 

input#name, #email, #subject, textarea { color: #666; width: 345px; border: 1px dotted #666; margin-bottom: 1em; } 

textarea { height: 280px; width: 660px; border: 1px dotted #666; margin-bottom: 1em;}
 
input#name:focus, #email:focus, #subject:focus, textarea:focus { background-color: #f4f4f4; color: black; }  /* Cursor im Formular, Hg-Farb-Wechsel... */

.submitbutton { 
color: #fff; font-size: 100%; font-weight: bold; background-color: #999; padding-left: 6px; padding-right: 6px;  border: solid 1px #999; outline: solid 1px #999; }

/* .checkbox {  }  kaum stylebar..brows.. */

/* ###################################
Ende Styles        
################################### */