/************************************************************/
/*   Site: 	  www.wandtafel.ch								*/
/*   Autor:   Sam Mueller, Raphael Hitter					*/
/*   Datum:   März 2009										*/
/*----------------------------------------------------------*/
/*   Design:   		ALIGN-LEFT with LEFTNAV				  	*/
/*   File:     		screen.css								*/
/*   Definitions:	main-layout / text formats				*/
/************************************************************/

/***** COLORS	*********************************************/
/* 
>>place			>>name			>>HEX
------------------------------------------
background		 	grey 		#f1f0f0
logo 				orange		#f7a800
font dark			grey		#666666
font (light)		grey		#999999
------------------------------------------
*/


html, body { height: 100%; }

body { height: 100%; background:url(../grafics/bg_body.gif) repeat-x top left; font:100.1%/1.1em Tahoma, "Lucida Grande", Verdana, Helvetica, sans-serif; letter-spacing: 0.002em; color:#666666; }
#header { width: 980px; height: 104px; }
#logo { position:absolute; top: 0px; left:38px; width:142px; height:70px; }
address { position:absolute; top: 38px; left:222px; width:720px; height:33px; font-size:0.7em; color:#666; font-style:normal; }

#page { position: relative; min-height: 100%;}
* html #page{ height: 100%; }
#content { width:980px; padding-bottom:35px; }

#start_rgt { float:left; width: 750px; height:445px; margin: 35px 0px 0px 0px; background:url(../grafics/bg_gallery.gif) no-repeat top left; }
.screenlft { float:left; width:463px; height:394px; }
.screenrgt { float:left; width:271px; height:360px; padding:24px 10px 10px 10px; }
#prevnext { text-align:right; margin: 10px 5px 0px 0px; }

#detail_lft { float:left; margin:25px 0px 0px 10px; width:500px; }
#detail_lft_btm { width:500px; }
#detail_rgt { float:left; margin:45px 0px 0px 5px; width:450px; }
.detailtabelle { width:450px; border-collapse:collapse; border:none; clear:both; }
.detailtabelle td { border-top:1px dotted #f7a800; padding:4px 0px 4px 0px; font-size:0.8em; vertical-align:top;}
.detailtabelle td.last { border-bottom:1px dotted #f7a800; }
.detailtabelle .col1 { width:125px; }
.detailtabelle .col2 { width:325px; }
.detailtabelle-5spalten { width:325px; border:none; }
.detailtabelle-5spalten td { border:none; padding:0px; font-size:1em; }

#detailback { float:right; width:100px; height:12px; margin:0px 0px 0px 27px; }

#footer { position: relative; height:100px; margin:-110px 0px 0px 0px; padding: 6px 0px 0px 45px; background:url(../grafics/bg_footer.gif) repeat-x top left; font-size:0.7em; } 
#designloft { position:absolute; top:80px; left:40px;}
#nuun { position:absolute; top:80px; left:140px;}
#impressum { position:absolute; top:80px; right:20px; height:12px; font-size:1em; color:#666; }
#footer a:link, #footer a:visited { color:#999; }
#footer a:hover, #footer a:active { color:#666; }
#footer #derschreiner { margin:0px 0px 20px 0px; position:absolute; top:0px; left:40px;  }

a.designloftlink:link, a.designloftlink:visited { background:url(../grafics/footer_designloft.gif) no-repeat top left; display:block; width:63px; height:15px; }
a.designloftlink:hover, a.designloftlink:active { background:url(../grafics/footer_designloft_aktiv.gif) no-repeat top left; }
a.nuunlink:link, a.nuunlink:visited { background:url(../grafics/footer_nuun.gif) no-repeat top left; display:block; width:86px; height:15px; }
a.nuunlink:hover, a.nuunlink:active { background:url(../grafics/footer_nuun_aktiv.gif) no-repeat top left; }

#hn { width:142px; float:left; margin:60px 40px 0px 40px; }
#hn li { margin-bottom:4px; width:142px; }
#hn li a:link, #hn li a:visited { display:block; height:14px; color:#666; font-size:0.8em; padding: 0px 4px 4px 12px; }
#hn li a:hover, #hn li a:active, #hn li a.aktiv:link, #hn li a.aktiv:visited, #hn li a.aktiv:hover { display:block; color:#fff; background-color:#f7a800; }

#sn { width:132px; margin: 5px 0px 8px 10px; }
#sn li { margin-bottom:0px; width:132px; }
#sn li a:link, #sn li a:visited { display:block; height:14px; color:#999; font-size:0.7em; background:none; padding: 0px 4px 3px 12px; }
#sn li a:hover, #sn li a:active, #sn li a.aktiv:link, #sn li a.aktiv:visited, #sn li a.aktiv:hover { display:block; color:#666; background:none;  }

p { font-size:0.8em; color:#999; }
h1 {margin: 0px 0px 5px 0px; color:#666; font-size:1em; font-weight:bold; }
h1.tabellentitel { width:300px; float:left; display:inline; margin-bottom:18px;}
h3 { font-family:Tahoma, Arial, Verdana, Helevetica; font-size:0.8em; color:#666666; font-weight:bold;}
.orange { color:#f7a800; }
.dark { color:#666; }
.light { color:#999; }
span.light a:link {font-size:1em;}
.bold { font-weight:bold; }
.linklink { font-size:1.2em;}
a.inversorange:link, a.inversorange:visited  { background-color:#f7a800; color:#fff; font-size: 0.8em; padding: 1px 4px 3px 4px; }
a.inversorange:hover, a.inversorange:active  { color:#666; }
a:link, a:visited { color:#999999; font-size:0.8em; }
a:hover, a:active { color:#666666; }
a.printa4:link, a.printa4:visited { background:url(../grafics/printer_inaktiv.gif) top left no-repeat; padding-left:20px; float:right; }
a.printa4:hover, a.printa4:active { background:url(../grafics/printer_aktiv.gif) top left no-repeat; color:#f7a800; float:right; }
a.imgthb:link, a.imgthb:visited { display:block; padding:5px; border:1px solid #fff; background-color:#e1e1e1; margin:5px 5px 0px 0px; width:80px; height:80px; float:left; }
a.imgthb:hover, a.imgthb:active { border:1px solid #e1e1e1; background-color:#d0d0d0; }
.jahreszahl { font-family:Georgia, "Times New Roman", Times, serif; font-size:2.8em; color:#666666; font-style:oblique; font-weight:normal; margin: 13px 0px 20px 0px; }
.detailtabelle ul li {background:url(../grafics/bullet.gif) 0px 3px no-repeat; padding: 0px 0px 0px 15px; margin-top:0px; }
.bullet {background:url(../grafics/bullet.gif) 0px 3px no-repeat; padding: 0px 0px 0px 15px; margin-top:0px; font-size:12px; color:#666; }
.hilfswerk {float:left; width:200px; height:200px; font-size:0.8em; margin:0px 0px 0px 305px;}

/*  KATEGORIESLIDER											 */
/*************************************************************/
a.next, a.prev{ background-color:#f7a800; color:#fff; font-size: 0.8em; padding: 4px 10px 6px 10px; cursor:pointer; width:120px; height: 25px; }
#screen { width:754px; height:394px; position:absolute; padding-top:1px;}
#sections{ overflow:hidden; width:754px; height:395px; clear:left; margin-left:0px; }
#sections ul{ width:10000px;	}
#sections ul li{ float:left; padding:0px; }

/*  GALLERIA     											 */
/*************************************************************/
.galwrapper{background:none;width:463px;}
.gallery {list-style:none; margin: 20px 0px 0px 12px; width:335px; height:50px;}
.gallery li{display:block; width:50px; height:50px; overflow:hidden; float:left; margin: 0px 0px 0px 20px; background:none;}
.gallery li a{display:none;}
.gallery li div{position:absolute;display:none;top:60px;left:180px}
.gallery li div img{cursor:pointer}
.gallery li.active div img,.galleria li.active div{display:block}
.gallery li.active{border-color:#f00;}
.gallery li img.thumb{cursor:pointer;top:auto;left:auto;display:block;width:auto;height:auto;opacity:.3; }
.gallery li.active img.thumb, .gallery li:hover img.thumb{opacity:.99}
* html .gallery li div span{width:400px} /* MSIE bug */
#galleryimage { margin-top:5px;}

/*  FORMS  													 */
/*************************************************************/
label { width:150px; margin-bottom:5px; font-size:0.8em;}
input { width:200px; height:16px; padding:3px; color:#1a1a1a; font-size:0.8em; border:1px solid #e1e1e1; margin-bottom:5px;}
input.submitter { width:208px; height:25px; padding:1px; margin-top:20px; color:#fff; text-transform:uppercase; font-size:0.8em; background-color:#269d1b; border:1px solid #e1e1e1;}
textarea { width:200px; height:80px; padding:3px; color:#1a1a1a; font-size:0.8em; font-family:Arial, Helvetica, sans-serif; border:1px solid #e1e1e1;}

/*  FIXES  													 */
/*************************************************************/
.clearfix:after {content: "."; display: block; height: 0; clear: both; visibility: hidden;}
.clearfix {display:inline-block;}
/* 	Hide from IE Mac \*/ .clearfix {display:block;} /* 	End hide from IE Mac */ 
#clearer{clear:both;}