/*

	Projekt: Huber Transformatoren AG
	Datei: style.css
	Author: Peter Kröner

	============
	== FARBEN ==
	============

	Hintergrund:		#F2F5F5
	Hintergrund hell:	#FAFAFA
	Text:				#222222
	Header-BG:			#101013
	Navigrau:			#9FA2A6
	Navi aktiv:			#FFFFFF
	Footer-BG:			#E4E5E6
	Footer-Text:		#747575
	Border:				#E3E5E6
	Akzentrot:			#F21111

  Update: 30.03.2011 sascha.scholz@actra.ch
*/

/* Default */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td { margin:0; padding:0; border:0; outline:0; font-weight:inherit; font-style:inherit; font-size:100%; font-family:inherit; vertical-align:baseline; background-image:none; }

ol, ul { list-style:none; }

table { border-collapse:collapse; border-spacing:0; }

caption, th, td { text-align:left; font-weight:normal; }

blockquote:before, blockquote:after, q:before, q:after { content:""; }
blockquote, q { quotes:"" ""; }

textarea {overflow: auto;}
img {display: block; margin: 0; padding: 0;}

/* Basics */
body { background:#E4E5E6; color:#222; font-size:12px; font-family:Arial, sans-serif; }
#wrapper {width: 100%; background:#F7FAFA url(/images/body.png) 0 92px repeat-x; }
a { text-decoration:none; border-bottom:1px solid; }
	a:link { color:#F21111; border-color:#F21111; }
	a:visited { color:#E32020; border-color:#E32020; }
	a:hover { color:#000; border-color:transparent; }
	a:active { color:#000; border-color:#000; }
	a:focus { color:#000; border-color:transparent; outline:1px dotted #666; }
q { font-style:italic; }
	q:before { content:"\00BB"; margin-right:1px; }
	q:after { content:"\00AB"; margin-left:1px; }
		q q:before { content:"\203A"; }
		q q:after { content:"\2039"; }
strong { font-weight:bold; }
em { font-style:italic; }
img { border: 1px solid black; }


/* Layout */
#header { width: 100%; background:#101013 url(/images/header.png) bottom left repeat-x; height: 92px; margin-bottom:32px;}
	#header div.w960 { position:relative; height:92px; }
	#header h1 a { background:url(/images/logo.png); border:none; float:left; display:block; height:92px; width:192px; margin: 0; position: relative; left: -22px; }
		#header h1 a span { display:block; height:0; width:0; overflow:auto; }
#content { line-height:1.5; line-height: 18px; width: 928px; padding: 0 16px 24px; }


/* Navi */
#navi { float:right; padding:0; margin: 0; }
#navi li { background:none; float:left; width:90px; display:block; text-align:left; padding:0; margin:4px 8px 0 0; }
#navi a { font-weight:bold; border-bottom:none; display:block; width:82px; margin:16px 0 0 0; padding:8px 0 0 0; }
	#navi a:link { color:#EEE; border-top:5px solid #9FA2A6; }
	#navi a:visited { color:#EEE; border-top:5px solid #9FA2A6; }
	#navi a:active { color:#FFF; border-top:5px solid #FFF; }
	#navi a:hover { color:#FFF; border-top:5px solid #FFF; }
	#navi a:focus { outline:1px dotted #666; }
#navi a.nav_current {  }
	#navi a.nav_current:link { color:#EEE; border-top:5px solid #F21111; }
	#navi a.nav_current:visited { color:#EEE; border-top:5px solid #F21111; }
	#navi a.nav_current:active { color:#FFF; border-top:5px solid #FFF; }
	#navi a.nav_current:hover { color:#FFF; border-top:5px solid #FFF; }
	#navi a.nav_current:focus { outline:1px dotted #666; }


/* Textgestaltung */
h2 { color:#F21111; font-size:18px; font-family:"Trebuchet MS", Arial, sans-serif; margin:8px 16px; clear:both; }
h3 { color:#000; font-size:15px; font-family:"Trebuchet MS", Arial, sans-serif; font-weight:bold; margin:16px 16px 12px 16px; clear:both; }
	h3 em { font-weight:normal; }
h4 { font-weight:bold; margin:8px 16px; clear:both; }
h5 { color:#666; font-weight:bold; margin:8px 16px; clear:both; }
h6 { margin:8px 16px; clear:both; }
p, ul, ol, dl, table { margin:8px 16px; }
.sub { color:#F21111; font-size:15px;  margin:0px 16px; }
ul {  }
	ul li { background:url(/images/bullet.png) 4px 7px no-repeat; padding-left:16px; }
ol { list-style-type:decimal; list-style-position:inside; padding-left:4px; }
dl dt, dl dd { margin:4px 0; }
dl dt { font-weight:bold; }
table { border-collapse:collapse; }
	table td, table th { border:1px solid #E3E5E6; padding:3px 8px; }
	table th { background:#101013; color:#FFF; /*font-weight:bold;*/ }
	table td { background:#FAFAFA; }
		table tr:hover td { background:#FFF; color:#000; }


p, h2, h3, h4, h5, h6, .sub, ul, ol, dl, table {margin: 0 0 16px;}
dl dt, dl dd {margin: 0;}

/* Formulare */
input, textarea, select, button { background:#FAFAFA; border:1px solid #101013; font-family:Verdana, Arial, sans-serif; font-size:12px; padding-top:4px; padding-bottom:4px; }
	input:hover, textarea:hover, select:hover, button:hover { background:#FFF; border:1px solid #000; }
	input:focus, textarea:focus, select:focus, button:focus { background:#FFF; border:1px solid #F21111; outline:none; }
input.small { display:inline; width:auto; padding:2px; }
.buttonlabel input, .buttonlabel button { background:#101013; border:1px solid #101013; color:#FAFAFA; font-weight:bold; cursor:pointer; padding:6px; }
	.buttonlabel input:hover, .buttonlabel button:hover { background:#000; border:1px solid #000; color:#FFF; }
	.buttonlabel input:focus, .buttonlabel button:focus { background:#000; border:1px solid #000; color:#FFF; outline:none; }
label, .label, .buttonlabel { font-size:11px; display:block; clear:both; margin: 0 0 1em; }
	label input, label button, label select, label textarea, .label input, .label button, .label select, .label textarea { width:100%; display:block; }
	.buttonlabel input, .buttonlabel button { width:49%; float:left; margin:0 1% 0 0; }
	label.small { display:inline; margin:0; padding:0; }
input.narrow { width:30%; }
input.medium { width:65%; }

/* Formfehler */
#formfehler { background:#FAF8DE; border:1px solid #E3DFB1; position:relative; margin:16px; padding:8px; }
	#formfehler strong { color:#CC0000; }
	#formfehler .boxshadow { background:url(/images/snshadow.png) top left no-repeat; height:184px; width:184px; position:absolute; top:-8px; left:-8px; z-index:-1; }
	#formfehler .boxshadow2 { background:url(/images/snshadow2.png) bottom right no-repeat; height:184px; width:184px; position:absolute; bottom:-8px; right:-8px; z-index:-1; }


/* Footer */
#footer { color:#747575; background:#E4E5E6 url(/images/footer.jpg) top left repeat-x; font-size:12px; text-align:left; line-height:1.5; margin:8px 0 0; min-height: 125px; width: 100%; clear: both;}
#footer .w960 {width: 928px; padding: 16px;}
	#footer a:link { color:#4B4C4D; border-color:#4B4C4D; }
	#footer a:visited { color:#4B4C4D; border-color:#4B4C4D; }
	#footer a:active { color:#F21111; border-color:#F21111; }
	#footer a:hover { background:none; color:#000; border-color:transparent; }
	#footer a:focus { background:none; outline:1px dotted #666; }
	#footernavi li { float:right; width:50%; margin:0; padding:0; }
		#footernavi li a { margin-left:16px; }
#footer p a {border: none;}

/* Dicker Starttext  */
div.teaser { font-size:12px; font-weight:bold; }
#body_start div.teaser {}
	div.teaser h2 { font-size:25px; line-height:1.2; font-weight:bold; margin-bottom: .5em; }

.teaser.prod {position: relative; height: 5.3em;}
.teaser.prod .sub {position: absolute; top: 2em; left: 0;}

div.product {margin-bottom: 32px; position: relative; margin-bottom: 48px;}
.postop {position: absolute; top: 1px; right: 0;}
p.descr {width: 320px;}
div.anfrage p {margin: 0;}


div.products {margin-bottom: 16px; margin-bottom: 24px;}
div.products div.product {margin-bottom: 16px; margin-bottom: 24px;}

.product .minicol.fl {width: 260px;}

/* Startseite */
#start-main {
  /*margin: 0 auto;
  width: 928px;*/
}

#start-main .teaser {
  width: 600px;
  width: 660px;
  float: left;
  padding: 0;
}

#start-main .teaser p {text-align: justify;
  font-size: 125%;
  line-height: 1.4em;
}

#main {margin: 32px 0 8px; display: block;}

/* slideshow */
#slideshow { position:relative; width:205px; height:154px; float: right;}
#slideshow img { position:absolute; left:0; top:0; }

#aside {width: 224px;}


/* Subnavi Mk. 3 */
#submenu { font-size:13px; font-weight:bold; margin: 48px 0 16px; width: 224px; margin-top: 37px; }
	#submenu li { margin:0 0; padding: 0; background: none; }
	#submenu a { border: none; display: block; padding: 5px 0 5px 26px; background:url(/images/bullet.png) 0 10px no-repeat; padding-left:12px; }
#submenu ul {margin: 0 0 0 16px;}
	#submenu a.nav_current { color:#000; }

/* Produkte (Bilder, Links etc) */
a.product-link { border:none; display:block; margin:16px; }
img.product-list { border:1px solid #E3E5E6; display:block; padding:4px; }
img.product-list-small { border:1px solid #000; display:block; margin:-32px 0 8px 0; }
img.produktbild { border:1px solid #000;}
.product img.produktbild { margin-top: 3px; border:1px solid #000;}



/* Mitarbeiter-Foto im Kontaktformular */
img.person-small { border:1px solid #000; }

/* Google-Karte */
#mapbox { margin-top:8px; }
#map { width:100%; height:400px; }


/* Über-Uns-Mailbox */
#uu-mailbox { margin-top:24px; }


/* Lagerlisten */
table.lagerliste {  }
	table.lagerliste td { white-space:nowrap; }
	table.lagerliste a { vertical-align:middle; }
	table.lagerliste tr.light td { background:#FFF2D4; }
	table.lagerliste tr.light:hover td { background:#FFF5DE; }
	table.lagerliste tr.dark td { background:#FAE6B9; }
	table.lagerliste tr.dark:hover td { background:#FFEBBF; }
	table.lagerliste tr.special td { background:#D4EAFF; }
	table.lagerliste tr.special:hover td { background:#DEEFFF; }


/* Boxen und Spalten */
.fullcol { width:960px; clear:both; width: 928px;}
	.fullcol .fifty { width:448px; }
.hugecol { width:720px; width: 704px; width: 688px;}
	.hugecol .fifty { width:328px; width: 296px; }
.bigcol { width:640px; width: 622px;;}
.mediumcol { width:560px; width: 544px; }
.halfcol { width:480px; width: 448px; }
.smallcol { width:320px; width: 304px; }
.minicol { width:240px;} /* müsste auch verkürzt werden... */
.nanocol { width:160px; width: 120px;}
.fullcol, .hugecol, .bigcol, .mediumcol, .halfcol, .smallcol, .minicol, .nanocol { margin:12px 0; margin: 0; }
blockquote { background:#F5F5F5 url(/images/quote.png) top left no-repeat; border:1px solid #E3E5E6; margin:12px 14px; }
	blockquote p { font-style:italic; }
		blockquote p:before { content:"\00BB"; margin-right:1px; }
		blockquote p:after { content:"\00AB"; margin-left:1px; }

.liste { background:none; margin:12px -20px; width:480px;}
.liste td { background:none; width:240px; border:none;}
.liste tr:hover td { background:none; border:none; }

.nanocol p {margin: 0;}

.teammember {width: 208px;}
p.stockinfo {margin: 0;}

.stock p {font-weight: bold;}
.anfrage p {font-style: italic;}

#body_team .fifty {margin: 0 32px 16px 0;}

#featprod div {margin: 0 32px 24px 0;}

table.prodtable {margin: 0 0 12px; padding: 0; width: 100%; }

table.prodtable th,
table.prodtable td {padding: 0 0 4px; background: none; border: none; color: #222; vertical-align: top; text-align: left;}
table.prodtable th {font-weight: bold;}
table.prodtable td ul {margin: 0;}

table.prodtable tr:hover td {background: none;}

img.second {display: block; margin-top: 20px;}

table.prodtable th {font-weight: bold; width: 300px;
padding-right: 10px;
}
table.prodtable td ul {margin: 0; float: none;}

/* Allgemeine Klassen */
.w960 { display:block; width:960px; margin:0 auto; }
.clear { display:block; clear:both; }
.fl { float:left; }
.fr { float:right; }
.nofloat { float:none; }
.left { text-align:left; }
.right { text-align:right; }
.small { font-size:11px; }
.bigtext { font-size:1.25em; }
.mtop {margin-top: 16px;}
.nomargin {margin: 0;}

/* =selfclearing */
.group:after {
  content: ".";
  display: block;
  clear: both;
  height: 0;
  visibility: hidden;
}

.catalogue-download {
  margin: 0 0 10px 20px;
  padding: 8px 10px 8px 30px;
  background: #ddd url(/images/icon-pdf.png) 10px 50% no-repeat;
  width: 200px;
  float: right;
  border-bottom: 1px solid #d5d5d5;
}

.form-download input {
  margin: 0;
  padding: 0;
  vertical-align: middle;
  border: none;
  background: none;
}

.form-download table {
  margin-bottom: 10px;
  width: 100%;
}

.form-download th,
.form-download td {
  padding: 3px 0 3px 5px;
  border: none;
  border-bottom: 1px solid #e5e5e5;
  background: #FBFCFD;
  background: rgba(255,255,255,.6);
}

.form-download th {
  border-color: #ddd;
  color: #333;
  background: #E7E8EA;
}

/*
.form-download th.input {width: 1px;}
.form-download th.name {width: auto;}
.form-download th.kbnr {width: 20pxx;}
.form-download th.file {width: 200px;}
*/

.form-download th.input {width: 1px;}
.form-download th.name {width: 380px;}
.form-download th.kbnr {width: 20pxx;}
.form-download th.file {width: 200px;}

.form-download th input {padding-bottom: 3px;}

.form-download tr.heading th {
  border: none;
  border-top: 1px solid #F5F6F7;
  font-weight: bold;
  font-size: 13px;
  color: #eee;
  background: #3F3E41;
}

.form-download tr:hover {background: #fff;}

.form-download label {
  margin: 0;
  padding: 0;
  cursor: pointer;
  font-size: 12px;
  vertical-align: middle;
  color: #111;
}

.form-download label em {
  font-style: normal;
  color: #aaa;
  font-family: arial, sans-erifg;
}


.form-download button {
  background-image: url(/images/icon-tick.gif);
  padding-left: 30px;
  padding-right: 7px;
  background-position: 7px 50%;
  background-repeat: no-repeat;  
  width: auto; overflow: visible; 
  outline: none;
  border: 1px solid #111;
  cursor: pointer;
  color: #fff;
  background-color: #3F3E41;
}

.form-download input.submit.disabled,
.form-download button.disabled {
  background-image: url(/images/icon-tick-muted.gif);
  cursor: default;
  background-color: #fff;
  color: #aaa;
  border-color: #bbb;
}
.hide {display: none;}

#submenu .n-downloads {margin-top: 2em;}
#submenu .n-downloads a {
border: 1px solid #ccc;
border-color: #eee #ddd #ddd #eee;
background: url(/images/icon-download.gif) 5px .4em no-repeat;
padding-left: 26px;
background-color: rgba(255,255,255,.8);
}