@charset "utf-8";
/*
 * RAUCH
 * Global stylesheet (all)
 * Ralf Heumann, JANUS DIE WERBEMANUFAKTUR
 * April. 2011
 */

/* Reset browser styles */
@import url("reset.css");

/***************************/
/*  General Elements       */
/***************************/

html { min-height:100%; }
body { padding-bottom: 40px; font-family: Arial, Helvetica, sans-serif; color: #333; background: white url(../images/bg_grass.jpg) fixed no-repeat center bottom; }

.invisible { display: none; }
.clearer { clear: both; }
.hr { height: 1px; margin: 12px 0; background: #ccc; clear:both; }
.hr hr { display: none; }
strong { font-weight: bold; }
fieldset { border: 0; }
fieldset legend { display: none; }

/* Links */
#content p a, #breadcrumbs a, #news p a,
#content ul a, #content h4 a, #content h3 a,
#content h2 a, #content td a, #sidebar p a, .accordion p.more a { color: #e3001c; text-decoration: none; }
#content p a:hover, #sidebar p a:hover, #breadcrumbs a:hover,
#news p a:hover, #content ul a:hover, #content h4 a:hover,
#content h3 a:hover, #content h2 a:hover, #content td a:hover { color: #e3001c; text-decoration: underline; }

/***************************/
/*  Sprites                */
/***************************/
ul.imageteasers li span.arrow, p.slide a.more, ul.sidenavi li, .accordion .arrow { background: url(../images/arrows.gif) no-repeat; }

/***************************/
/*  Structure              */
/***************************/

#container {
    width: 912px;
    margin: 0 auto;
    padding: 143px 24px 0;
    background: white;
    position: relative;
}
#container a { text-decoration: none; }
#container a:hover { text-decoration: underline; }

/* HEADER ******/
#header {
    width: 912px;
    margin: 0 25px;
    height: 143px;
    background: #e3001c;
    position: absolute;
    top: 0;
    left: 0;
}
#header p { margin-right: 10px; height: 28px; line-height: 28px; font-size: 11px; text-align: right; }
#header p a { color: white; }
#header #sitesearch { padding-top: 15px; text-align: right; }
#header #sitesearch input { width: 175px; padding: 4px; margin-right: 3px; font-size: 11px; border: 1px solid #cc2b2b; border-radius: 2px; -moz-border-radius: 2px; -webkit-border-radius: 2px; }

#metatools { min-width: 400px; padding: 14px 13px 0 0; float: right; }
#metatools form { clear: both; }
#metatools a.ico { margin-left: 8px; }
#metatools fieldset { clear: both; }
#breadcrumbs { padding: 14px 0 10px 10px; font-size: 11px; color: #333; overflow: hidden;}
#breadcrumbs span.label { color: #333; }
#breadcrumbs span.current { color: #999; }

#site { min-height: 400px; }
#site.start { }
#site.vpl { margin-bottom: 16px; background: #f1f1f1; }

#promowrap { position: relative;  }
#promowrap h2.vpllabel, h3.vpllabel { padding: 6px 10px; font-size: 30px; font-weight: normal; color: white; background: #e3001c; position: absolute; right: 0; bottom: 30px; z-index: 100; }
#promobox { height: 275px; margin: 0 0 25px 0; padding: 0; background: none; border-bottom: 4px solid #e3001c; overflow: hidden; }
#site.start #promobox { margin-bottom: 16px; }
#promobox img { display: block; }
#promobox .slidetext {
    max-width: 600px;    
    position: absolute;
    left: 20px;
    top: 20px;
    text-decoration: none;
}
#promobox .slidetext.top { left: 20px; top: 20px; }
#promobox .slidetext.bottom { left: 20px; bottom: 20px; top:initial; }
.slidetext:hover, .slidetext:focus { text-decoration: none; }
.slidetext span { text-decoration: none; }
.slidetext h2 {
    width: auto;
    height: auto;
    display: block;
    position: static;
    vertical-align: top;
    font-weight: normal;
}
.slidetext h2 span {
    font-size: 30px;
    line-height: normal;
    padding: 0 10px; 
    color: white;
    /*background: url(../images/white_70.png);    
    background: rgba(255,255,255,.9);*/
    display: inline-block;
}
.slidetext h2.Cgray span { color: #c1c1c1; } /* Sorry für das "C" am Anfang, aber es gab schon eine Klasse "gray", da wollt ich nicht dran rumfuhrwerken ;) */
.slidetext h2.Cwhite span { color: #fff; }
.slidetext h2.Cblack span { color: #000; }
.slidetext h3 {
    color: white;
    display: block;    
    vertical-align: top;
    font-weight: normal;    
}
.slidetext h3 span {
    font-size: 18px;
    line-height: normal;
    color: white;
    /*background: #e3001c;*/
    padding: 0 10px; 
    display: inline-block;    
}
.slidetext h3.Cgray span { color: #c1c1c1; }
.slidetext h3.Cwhite span { color: #fff; }
.slidetext h3.Cblack span { color: #000; }

#vplimg { width: 640px; height: 436px; padding: 40px 0 0 40px; float: left; background: url(../images/vplimg.jpg) no-repeat; border-right: 16px solid white; position: relative; }
#vplimg h2 { width: 430px; margin-bottom: 10px; font-size: 24px; font-weight: normal; }
#vplimg p { width: 430px; font-size: 12px; line-height: 18px; }

#news {
    width: 422px;
    margin-right: 16px;
    margin-bottom: 11px;
    padding: 10px 13px 0;
    background: #f0f0f0;
    float: left;
}
#news .article { margin-bottom: 8px; padding-bottom: 6px; border-bottom: 1px solid #ccc; font-size: 11px; }
#news .article h3 { margin-bottom: 4px; font-weight: bold; }
#news .article p { overflow: hidden; }
#news .article p.more, .accordion p.more { text-align: right; font-weight: bold; }
#news .article img { float: left; margin-right: 18px; }
p.slide { margin: -11px -13px 0; padding: 3px 13px 6px; background: #f0f0f0 url(../images/furtherback.gif) left top repeat-x; overflow: hidden; position: relative; z-index: 100; }
p.slide a.more { font-size: 11px; font-weight: bold;  padding-left: 18px; background-position: -3px 5px; }
p.slide a.more.up { padding-left: 18px; background-position: left -20px; }
p a.back { padding-left: 18px; background: url(../images/arrows.gif) left -78px no-repeat; font-weight: bold; }

#sizeofinput{margin-top:10px; margin-bottom:10px;  margin-left:145px; background-color:#f0f0f0; width:260px;}

#sidebar { width: 216px; margin-bottom: 11px; float: right; }
#sidebar.textshift { padding-top: 43px; }
.start #sidebar { width: 448px; margin-bottom: 0; }
.entry #sidebar { width: auto; float: none; clear: both; }
#sidebar p.slide { margin: 10px -11px -5px; padding-top: 6px; padding-bottom: 0; font-size: 11px; }
#sidebar p, #sidebar h4 { margin-left: 10px; margin-right: 13px; }

ul.imageteasers { width: 464px; margin-right: -16px; overflow: hidden; }
.entry ul.imageteasers { width: auto; }

ul.imageteasers li { width: 216px; margin-right: 16px; margin-bottom: 16px; font-size: 14px; float: left; position: relative; }
ul.imageteasers li img { display: block; }
ul.imageteasers li a { float: left; color: #333; }
ul.imageteasers li a:hover { color: #e3001c; text-decoration: none !important; }
ul.imageteasers li span.white-label { width: 196px; padding: 10px; font-weight: bold; display: block; background: url(../images/white_70.png); position: absolute; bottom: 0; }
ul.imageteasers li span.arrow { width: 7px; height: 9px; margin-right: 5px; display: inline-block; background-position: -5px -45px; }

#quicklinks {
    width: 448px;
    margin-bottom: 16px;
    float: right;
    background: #f0f0f0;
}
.accordion dt {
    background: #f0f0f0;  
    border-bottom: 1px solid #fff;
}
.accordion span.arrow {
    margin-right: 5px;
    width: 12px;
    height: 9px;
    display: inline-block;
    background-position: -4px -44px;
}
.accordion .active span.arrow {
    background-position: -4px 2px;    
}
.accordion dd {
    padding: 13px;
    background: white;
}
.accordion h2 {
    padding: 10px 13px;
    font-size: 14px;
    font-weight: bold;  
    border-bottom: 1px solid #c9c9c9;
}
.accordion h3 {
    margin-bottom: 4px;
    font-weight: bold;
}
/* .accordion h2 {
    width: auto;
    height: auto;
    position: static;
} */
.accordion .image {
    margin-right: 18px;
    float: left;
    display: block;
    /*width: 40%;*/ /* goes nuts on every browser :( */
}
.accordion .image img {
    max-width: 100%;
}
.accordion .info {
    font-size: 12px;
    overflow: hidden;
    display: block;
}
.accordion .info p {
    margin-bottom: 4px;
}

/* CONTENT ******/
#content { width: 660px; padding: 0 10px 30px; float: left; }
#site.start #content { width: 428px; }
#content.full { width: auto; }
#content.topline { padding-top: 20px; }
#content div#contentimg { margin-left: -10px; margin-right: -10px; }
div#contentimg, .entryinfo img { margin-bottom: 25px; border-bottom: 4px solid #e3001c; display: block; }
#content p, .entryinfo p, #sidebar p { margin-bottom: 15px; font-size: 12px; line-height: 18px; }
#content p+h3 { margin-top: 30px; }

#content ul { margin-bottom: 15px; }
#content ul li { font-size: 12px; margin-bottom: 3px; padding-left: 16px; background: url(../images/arrows.gif) no-repeat -236px 4px; }
#content ul.bulletlist { margin-top: 10px; }
#content ul.bulletlist li { padding-left: 13px; background: url(../images/bullet.gif) no-repeat left 6px; }
#content ul.prospekte li { padding-left: 0; background: none; }
#content ul.newsletteroptions {  }
#content ul.newsletteroptions li { padding-left: 0; background: none; }
#content ul.newsletteroptions li label { width: auto; }

div#contentimg { margin-bottom: 25px !important; position: relative; z-index: 10; }
div#contentimg { width: 912px; height: 275px; }
div#contentimg.small { width: 680px; height: 252px; }
div#contentimg ul.slides { overflow: hidden; }
div#contentimg ul.slides li { margin: 0; padding: 0; background: none; position: absolute; left: 0; top: 0; z-index: 10; }
div#contentimg ul li img { display: block; }

ul#tbpager { margin: 0; position: absolute; left: 13px; bottom: 13px; z-index: 100; }
ul#tbpager li {
    margin-right: 5px;
    margin-bottom: 0;
    padding: 0;
    float: left;
    background: black;
}

ul#tbpager li img {
    opacity: 0.7;
    -moz-opacity: 0.7;
    -webkit-opacity: 0.7;
    filter:alpha(opacity=70);
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
    border: 1px solid white;
}
ul#tbpager li:hover img, ul#tbpager li:focus img {
    border: 1px solid white;
    opacity: .9;
    -moz-opacity: .9;
    -webkit-opacity: .9;
    filter:alpha(opacity=90);
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
}
ul#tbpager li.activeSlide img {
    margin-top: -1px;
    border: 2px solid white;
    opacity: 1;
    -moz-opacity: 1;
    -webkit-opacity: 1;
    filter:alpha(opacity=100);
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}

/* columns */
.three-col { width: 680px; }
.half-col { width: 448px; }

/* Team */

#content ul.team { width: 100%; margin-left: 0; margin-bottom: 20px; padding-top: 10px; }
#content ul.team li { width: 420px; margin-right: 20px; margin-bottom: 10px; padding: 0; float: left; background: none; }
#content ul.team li.clear { clear: both; }
#content ul.team li img { float: left; margin-right: 20px; margin-top: 5px; border: 1px solid #ccc; }
#content ul.team li div { overflow: hidden; text-align: left; }
#content ul.team li h3 { margin-bottom: 0; margin-top: 0; padding-bottom: 0; font-size: 12px; line-height: 18px; font-weight: bold; color: #000; border-bottom: 0; }
#content ul.team li p { font-size: 12px; line-height: 18px; color: #000; }

.gray { margin-bottom: 10px; padding: 11px; background: #f0f0f0; }
.grayinput{background: #f0f0f0; }
/* Pagination */

#content ul { overflow: hidden; }

#content ul.pagination li {
    border:0;
    margin:0;
    padding:0;
    font-size:12px;
    list-style:none;
    display: inline-block;
}
#content ul.pagination .prev-off,
#content ul.pagination .next-off {
    color:#666;
    font-weight:bold;
    padding:3px 4px;
}
#content ul.pagination .next a,
#content ul.pagination .prev a { font-weight:bold; }
#content ul.pagination .active {
    background:#e2001c;
    color:#fff;
    font-weight:bold;
    padding:4px 6px;
}



#content ul.pagination a {
    color:#666;
    display: block;
    padding:3px 6px;
    text-decoration:none;
    border:solid 1px #dbdbdb;
    background: #e9e9e9;
}
#content ul.pagination a:hover { border:solid 1px #ababab; }

/* Downloads */

#content table { margin-bottom: 30px; border-collapse: collapse; width: 100%; }
#content table td, #content table th { font-size: 11px; text-align: left; }
#content table td { padding: 6px 10px 5px 0; vertical-align: middle; }
#content table td img { margin-top: -4px; margin-right: 2px; vertical-align: middle; }

#content td.title { width:35%; padding-left: 14px; background: transparent url(../images/arrow_red.gif) no-repeat 1px 9px; }
#content td.img { width:17%; height: 50px; }
#content td.img img { margin-top: -1px; }
#content td.magnify { width: 8%; }
#content td.magnify a {
    width: 30px;
    height: 27px;
    display: block;
    font-size: 0;
    line-height: 0;
    text-indent: -1000px;
    background: #f1f1f1 url(../images/button_magnifier.png) no-repeat left top;
    vertical-align: middle;
    position: relative;
}
#content td.magnify a:hover, #content td.magnify a:focus { background-position: left bottom; }
#content td.desc { /*width: 39%;*/ }
#content td.format { width: 11%; }
#content td.size { width: 11%; text-align: right;}
#content td.download { width: 11%; text-align: right; }
#content td.summe{ font-size: 12px; font-weight: bold; text-align: right; }

#content table.downloads th { padding: 8px; color: white; font-size: 12px; font-weight: bold; }
#content table.downloads tr:hover { background-color: #f1f1f1; }
#content table.downloads td { border-bottom: 1px solid #d0d0d0; }

#content table.daten { margin-top: 5px; margin-bottom: 25px; }
#content table.daten tr:nth-child(2n+1) { background: #f0f0f0; }
#content table.daten tr.odd { background: #f0f0f0; }
#content table.daten th { padding: 5px; background: #bbb; color: white; font-weight: bold; }
#content table.daten td, #content table.daten th  { padding: 5px; border: 1px solid #ccc; }


table tr.jsactive td { cursor: pointer; }

/* Teaser */

#content .teaser { margin-bottom: 12px; padding-bottom: 12px; border-bottom: 1px solid #ccc; overflow: hidden; }
#content .teaser.two-col { width: 330px; margin-bottom: 0; padding-bottom: 12px; border-bottom: 0; float: left; }
#content .teaser img { margin-right: 15px; float: left; }
#content .teaser p { margin-bottom: 0; }
#content .teaser p.more { text-align: right; }
#content .teaser p.more a { font-weight: bold; }
#content .teaser p.date { font-size: 11px; color: #999; }
#content .teaser h4 { margin-top: 0; }
#content .teaser a.videothumb { position: relative; display: block; float: left; margin-right: 15px; }
#content .teaser a.videothumb img { float: none; margin: 0; }
#content .teaser a.videothumb img.play { position: absolute; top: 15px; left: 61px; }

/* Video Detail */
#content div.vidPlayerLarge { position:relative; }
#content div.vidPlayerLarge img.playicon { position: absolute; top: 50%; left: 50%; margin-left:-41px; margin-top:-41px; }

/* Entry pages */
#entrywrapper { margin-bottom: 16px; background: url(../images/entryinfoback.gif) left top repeat-y; }
#overview { width: 216px; float: left; line-height: 18px; }
#overview ul li { margin-bottom: 5px; padding: 0 13px 16px; background: url(../images/overviewgradient.gif) left bottom repeat-x; }
#overview ul li.last-li { background: none; }
#overview ul li ul, #overview.nosub ul { margin: 0 -13px; }
#overview.nosub ul { margin: 0 -13px 0 0; }
#overview ul li li, #overview.nosub ul li { margin-bottom: 2px; padding: 0; background: none; }
#overview ul li li a, #overview.nosub ul li a { background: url(../images/arrow_red.gif) 14px center no-repeat; padding-left: 26px; display: block; }
#overview ul li li a:hover, #overview ul li li a.active,
#overview.nosub ul li a:hover, #overview.nosub ul li a.active { background-color: #e5e5e5; }

#entryinfocontainer { width: 696px; min-height: 434px; overflow: hidden; }
.entryinfo { height: 434px; overflow: hidden; }
.entryinfo div.text { width: 200px; padding: 16px 16px 0; float: left; }
.entryinfo div.text p a { color: #e3001c; font-weight: bold; text-decoration: none !important; text-align: right; display: block; }
.entryinfo div.text p a:hover { text-decoration: none !important; color: #000; }
.entryinfo img { margin-bottom: 0; float: right; }
.entryinfo ul li { background: url(../images/arrow_red.gif) left 8px no-repeat; padding-left: 8px; }
.entryinfo ul li a { font-size: 12px; color: #000; }
.entryinfo ul li a:hover { color: #e3001c; text-decoration: none !important; }
.entryinfo div.text { margin-left: 0 !important; }
.text{margin-left: 145px;}

/* Kontakt */
.error { border: 1px dotted #e3100c !important; background-color: #fdd; padding: 5px 10px !important; }
.error strong { color: #e3100c; }

.confirm { border: 1px dotted #1c1 !important; background-color: #dfd; padding: 5px 10px !important; }
.confirm strong { color: #0a0; }

form#kontakt { float: left; margin-right: 0px; }
form#kontakt fieldset { border:medium none; margin-bottom:20px; }
form#kontakt label { cursor:default; float:left; margin-top:4px; width:145px; }
form#kontakt input, form#kontakt select, form#kontakt textarea{ font-family: Arial; font-size: 12px; padding:5px; border:1px solid #ccc; }
form#kontakt .input, form#kontakt textarea, #dealersearch input { padding:6px; width:246px; }
form#kontakt .failed{ border:2px solid #b22 !important; }
form#kontakt.input{ border:1px solid #999999; }
form#kontakt .input.small-int { width:52px; }
form#kontakt .input.medium-text { width:185px; }
form#kontakt .input.medium-int { width:110px; }
form#kontakt .input.smaller-text { width:120px; }
#content input { border: 1px solid #ccc; }
#content input.doppelpixel{ border: 2px solid #ccc; }
form#kontakt fieldset p { margin-bottom:5px !important; }
form#kontakt fieldset legend{ display:none;}
form#kontakt select, #dealersearch select { width: 260px;}
form#kontakt select.small { width: 100px;}
span.stern { color: #e3100c;}
p.stern { margin-top:15px;}


form#sidelogin h3 { margin-bottom: 15px; }
form#sidelogin label { margin-bottom: 2px; font-size: 12px; font-weight: bold; float: none; display: block; cursor: pointer; }
form#sidelogin input { width: 183px; margin-bottom: 10px; padding: 3px; font-size: 12px; display: block; }
form#sidelogin small { margin-top: 8px; font-size: 11px; float: left; display: block; }
form#sidelogin small a { color: #e3001c; }
form#sidelogin small a:hover, form#sidelogin small a:focus { text-decoration: underline; }

#kundendaten{margin-left:400px; margin-top:-192px;}

div#kontaktbox {  margin-left:40px; width: 210px; float:right; }
p.tel{margin-top:-15px; margin-left:70px;}
p.warnung{margin-top:40px; }
p.garantieantrag{margin-top:5px; margin-right:90px; }
#garantieNummer{margin-top:5px; float:left}
#divNummer{border:1px solid #ccc; width: 60px; height: 30px; margin-left:400px; margin-top:-40px;padding-top: 6px;padding-left: 6px;
    -webkit-border-radius: 2px;
    -khtml-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;}
form#kontakt table.tableGarantie{border:1px;}
#absatz{margin-left: 125px;}
#textfieldArbeit{margin-left:400px;  margin-top:-200px}
#tabellerahmen{border-collapse: collapse; border: 0px solid silver;}

.textpadding{padding:10px;}
.tabledata{padding-top:5px;padding-left:5px;}

/* Dealer Search */

#dealersearch {
    margin-bottom: 25px;
    padding: 10px;
    background: #f0f0f0;
    border-radius: 3px;
    border: 1px solid #dbdbdb;
}
#dealersearch label, #dealersearch input, #dealersearch select { font-size: 12px; }
#dealersearch label {  display: inline-block; min-width: 140px; }
#dealersearch .labelzip .input { width: 50px; }
#dealersearch .labelambit select { padding: 2px; width: 50px; border: 1px solid #ccc; }
#dealersearch .labelcountry select { padding: 2px; width: 200px; border: 1px solid #ccc; }
#dealersearch p { margin: 0; }
.dealer { width: 410px; float: left; }

#dealersearch .nl_email .input { width: 200px; }
#dealersearch label.check { min-width: auto; }
#dealersearch label.check input { margin-right: 5px; width: auto; vertical-align: middle; }
#dealersearch.newsletter p { margin: 0 0 5px 0; }

.listheader { padding-bottom: 5px; margin-bottom: 15px; overflow: hidden; border-bottom: 2px solid #ccc; }
.listheader span { font-size: 12px; font-weight: bold; }
.listheader span.col-dealer { width: 410px; float: left; }
.listheader span.col-services { float: right; }
.listheader span.col-distance { float: right; }
span.distance { float: right; font-size: 12px; }

ul.services {
    margin: 5px -3px 0 0;
    float: right;
}
ul.services li { margin: 0 3px 0 0; padding: 0 !important; background: none !important; float: left; }
ul.services span { width: 25px; height: 25px; text-indent: -5000em; background: url(../images/rauch_icons.png) no-repeat; display: block; }

/* Icons */
ul.services span.winterdienst { background: none; }
ul.services span.winterdienst.active { background: url(../images/rauch_icons.png) no-repeat; background-position: left top; }
ul.services span.duengerstreuer { background: none; }
ul.services span.duengerstreuer.active { background: url(../images/rauch_icons.png) no-repeat; background-position: -25px top; }

div.gray.legende { margin-top: 66px; border-radius: 3px; border: 1px solid #dbdbdb; }
ul.legende-haendlersuche li { padding-left: 35px; line-height: 25px; color: #000; font-size: 12px; margin-bottom: 8px; }
ul.legende-haendlersuche li:last-child { margin-bottom: 0; }
ul.legende-haendlersuche li.winterdienst { background: url(../images/icon-winterdienst.png) center left no-repeat; }
ul.legende-haendlersuche li.duengerstreuer { background: url(../images/icon-duengerstreuer.png) center left no-repeat; }

/* FOOTER ******/
#footer { padding: 10px; font-size: 12px; background: #e3001c; color: white; overflow: hidden; }
#footer p { float: left; }
#footer ul { float: right; }
#footer ul li { margin-right: 10px; padding-right: 10px; float: left; border-right: 1px solid white; }
#footer ul li a { color: white; }

#leftshadow, #rightshadow { width: 23px; height: 612px; position: absolute; top: 0; }
#leftshadow { background: url(../images/leftshadow.png) no-repeat; left: -23px; }
#rightshadow { background: url(../images/rightshadow.png) no-repeat; right: -23px; }

/***************************/
/*  Text styles            */
/***************************/

/* Headlines */
h2.logo { width: 184px; height: 46px; overflow: hidden; position: absolute; top: 32px; left: 53px; z-index: 10; }
h2 span {font-size: 0; line-height: 0;}
#news h1 { margin-bottom: 8px; font-size: 16px; font-weight: bold; }
#content h1, #sidebar h2 { margin-bottom: 15px; letter-spacing: -1px; font-size: 24px; font-weight: normal; }
#sidebar h3 { margin-bottom: 5px; font-size: 16px; font-weight: bold; }
#content h3 { margin-top: 10px; padding-bottom: 6px; font-size: 15px; font-weight: bold; border-bottom: 2px solid #999; }
#content h3.clean { margin-bottom: 20px; padding-bottom: 0; font-weight: bold; border: 0; }
#content h4, #sidebar h4 { font-size: 12px; line-height: 18px; font-weight: bold; }
#content h4 { margin-top: 15px; }
#overview h1 { margin-bottom: 5px; padding: 4px 13px 11px; color: #666; font-size: 12px; font-weight: bold; background: url(../images/overviewgradient.gif) left bottom repeat-x; }

/***************************/
/*  Navigations etc.       */
/***************************/

/*
ul#navi { width: 100%; height: 38px; clear: both; border-top: 4px solid white; background: url(../images/navback.png) left top repeat-x; position: absolute; bottom: 0; }
ul#navi li { float: left; position: relative; border-right: 1px solid #c0c0c0; }
ul#navi li.first { border-left: 0; }
ul#navi li a { padding: 10px 25px; float: left; font-size: 15px; font-weight: bold; color: white; background: url(../images/navback.png) left top repeat-x; text-decoration: none; border-right: 1px solid #4a4b4b; }
ul#navi li a:focus, ul#navi li a:hover, ul#navi li a.active { background-position: left bottom; text-decoration: none; }

ul#navi li.active a { background: white; }


ul#navi li ul {
    margin-top: 38px;
    margin-left: 0;
    padding: 6px 1px 0 0;
    background: url(../images/gray_80.png);
    position: absolute;
    left: -9999px;
    z-index: 998;
    /*box-shadow:  0px 1px 1px rgba(0,0,0,.5);
}

ul#navi li ul.ul-flyleft {
    margin-left: -89px !important;
}

ul#navi li li {
    width: 154px;
    height: auto;
    padding: 0;
    float: none;
    border: 0;
}

ul#navi li li a {
    height: auto;
    padding: 5px 25px;
    color: white;
    font-size: 12px;
    font-weight: normal;
    line-height: normal;
    background: none;
    float: none;
    display: block;
    border-bottom: 1px solid #c1c1c1;
    border-right: 0;
}


ul#navi li li ul { margin-top: 0; margin-left: 154px; padding: 0 0 6px 0; top:0; z-index: 999; }
ul#navi li li ul.flyleft { margin-top: 1px; margin-left: -161px; top:0; z-index: 999; }


ul#navi li:hover li a, ul#navi li li:hover li a { background: none; color: white; }
ul#navi li:hover ul ul { left: -9999px; }
ul#navi li:hover ul, ul#navi li li:hover ul { left: auto; }
ul#navi li:hover a { }


ul#navi li li:hover a,
ul#navi li li li:hover a { background: #c1c1c1; color: #333; }
ul#navi li a.fly { background-image: url(../images/arrows.gif) !important; background-repeat: no-repeat !important; background-position: right -36px !important; }
ul#navi li li:hover a.fly { background-position: right 9px !important; }

*/
#nav {
    background: url(../images/navback.png) left top repeat-x; position: absolute; bottom: 0;
    float: left;
    width: 100%;
    z-index: 10;
}
#nav ul {
    font-size: 12px;
    list-style: none;
    margin: 0;
    padding-left: 0;
    background: url(../images/gray_80.png);
    background: rgba(120,120,120,.9);
}
#nav li {
    float: left;
    position: relative;
    z-index: 999;
}
#nav a {
    padding: 10px 23px;
    font-size: 15px;
    font-weight: bold;
    color: white;
    float: left;
    line-height: normal;
    text-decoration: none;
}
#nav ul ul {
    box-shadow: 0 3px 3px rgba(0,0,0,0.2);
    display: none;
    float: left;
    margin: 0;
    position: absolute;
    top: 37px;
    left: 0;
    width: 188px;
    z-index: 998;
}
#nav ul ul ul {
    left: 100%;
    top: 0;
    z-index: 999;
}
#nav ul li.dropleft ul ul {
    left: -100%;
}
.tapped { border: 1px solid yellow; }

#nav ul ul a {
    border-bottom: 1px solid #c1c1c1;
    color: white;
    font-size: 12px;
    font-weight: normal;
    height: auto;
    line-height: normal;
    padding: 10px 10px;
    width: 168px;
}
#nav li:hover > a {
    background: url(../images/navback.png) left bottom repeat-x;
    text-decoration: none;
    color: white;
}
#nav ul ul :hover > a,
#nav a:focus {
    background: #c1c1c1;
    color: #333;
    text-decoration: none;
}
#nav li:hover > a,
#nav a:focus {
    color: white;
}
#nav ul li:hover > ul {
    display: block;
}
ul#navi li a.fly {
    background-image: url(../images/arrows.gif);
    background-repeat: no-repeat;
    background-position: right -31px;
}
ul#navi li li:hover a.fly {
    background-position: right 14px;
}

/* Language Dropdown */
ul#languages {
    max-width: 300px;
    margin-left: 10px;
    position: relative;
    z-index: 20;
    float: right;
}
ul#languages li {
    height: 28px;
    padding-left: 10px;
    background: url(../images/button_v2.png) left top no-repeat;
}
ul#languages li:hover{ background-position: 0 -28px; }
ul#languages li.active { position: relative; }
ul#languages li a {
    height: 20px;
    padding: 7px 30px 0 28px;
    font-size: 11px;
    color: white;
    text-decoration: none;
    display: block;
    background-repeat: no-repeat;
    background-position: 5px 8px;
}
ul#languages li a:hover { text-decoration: none; }
ul#languages li a.de { background-image: url(../images/de.gif); }
ul#languages li a.en { background-image: url(../images/en.gif); }
ul#languages li a.es { background-image: url(../images/es.gif); }

ul#languages li span {
    height: 28px;
    background: url(../images/button.png) right top no-repeat;
    display: block;
}
ul#languages li:hover span { background-position: right -28px; }
ul#languages li.active:hover span { background-position: right -56px; }

ul#languages li.active span {
    background-position: right bottom;
}
ul#languages ul {
    clear: both;
    margin: 0 5px 0 -5px;
    background: white;
    border: 1px solid #e9e9e9;
    box-shadow:  0px 0px 3px rgba(0,0,0,.5);
    -moz-box-shadow:  0px 0px 3px rgba(0,0,0,.5);
    -webkit-box-shadow:  0px 0px 3px rgba(0,0,0,.5);
}
ul#languages li li { height: auto; padding: 0; background: none; }
ul#languages li li a { color: #333; height: auto; padding: 5px 10px 5px 32px; background-position: 9px 6px; }
ul#languages li li a:hover { color: #e3001c; }

/* Sidenavigation */
ul.sidenavi { }
ul.sidenavi li { margin-bottom: 2px; padding-left: 15px; font-size: 12px; background-position: -3px -41px; }
ul.sidenavi li a { color: #333; }
ul.sidenavi li a:hover, ul.sidenavi li a:focus { color: #e3001c; text-decoration: none !important; }
ul.sidenavi li.active a { font-weight: bold; }



ul.buttonlist { margin-bottom: 15px; }
ul.buttonlist li { margin-bottom: 8px; font-size: 12px; }
ul.buttonlist li a {
    padding: 2px 11px;
    font-size: 11px;
    border: 1px solid #dbdbdb;
    font-weight: bold;
    display: block;
    color: #666;
    background: #f1f1f1;
    border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
}
ul.buttonlist li a:hover { text-decoration: none !important; color: #e3001c; }

/***************************/
/*  Special styles / fixes */
/***************************/

.vidPlayer { display:block; width: 500px; height: 300px; display: block; margin-bottom: 20px; text-align: center; border: 1px solid #e9e9e9; position: relative; cursor: pointer; }
.vidPlayer img.playicon { position: absolute; left: 209px; top: 110px; }

/* small buttons */
button.button {
    height: 28px;
    margin: 0;
    padding: 0 10px 0 0;
    background: url(../images/button.png) right top no-repeat;
    border: 0;
    display: inline-block;
    cursor: pointer;
}
button.button.white { background: url(../images/button-white.png) right top no-repeat; }
button.button.gray { background: url(../images/button-gray.png) right top no-repeat; }
button.button:hover{ background-position: 0 -28px; }
button.button span {
    height: 28px;
    padding: 0 2px 0 12px;
    line-height: 26px;
    font-size: 11px;
    color: white;
    display: block;
    background: url(../images/button.png) left top no-repeat;
}
button.button.white span  { background: url(../images/button-white.png) left top no-repeat; line-height: 27px; }
button.button.gray span  { background: url(../images/button-gray.png) left top no-repeat; line-height: 27px; }
button.button:hover { background-position: right -28px; }
button.button:hover span { background-position: left -28px; }

/* bigger buttons */
button.bigbtn {
    font-family: Arial, Helvetica, sans-serif;
    height: 37px;
    margin: 0;
    padding: 0 10px 0 0;
    background: url(../images/content-button.png) right top no-repeat;
    border: 0;
    display: inline-block;
    cursor: pointer;
}
button.bigbtn.white { background: url(../images/content-button-white.png) right top no-repeat; }
button.bigbtn.gray { background: url(../images/content-button-gray.png) right top no-repeat; }
button.bigbtn:hover{ background-position: 0 -37px; }
button.bigbtn span {
    height: 37px;
    padding: 0 5px 0 15px;
    line-height: 35px;
    font-size: 12px;
    color: white;
    display: block;
    background: url(../images/content-button.png) left top no-repeat;
}
button.bigbtn.white span  { background: url(../images/content-button-white.png) left top no-repeat; }
button.bigbtn.gray span  { background: url(../images/content-button-gray.png) left top no-repeat; }
button.bigbtn:hover { background-position: right -37px; }
button.bigbtn:hover span { background-position: left -37px; }

button.bigbtn.right { margin-right: -2px; }
#buttonsenden{ margin-left: -130px;}

/* Teaser Button */
span.teaserbtn {
    font-family: Arial, Helvetica, sans-serif;
    height: 37px;
    margin: 13px 0 0 8px;
    padding: 0 10px 0 8px;
    background: url(../images/content-teaser-button-left.png) left top no-repeat;
    border: 0;
    display: inline-block;
    cursor: pointer;
}
span.teaserbtn span {
    height: 37px;
    padding: 0 12px 0 4px;
    line-height: 35px;
    font-size: 12px;
    color: white;
    display: block;
    background: url(../images/content-teaser-button-right.png) right top no-repeat;
}
span.teaserbtn:hover { background-position: left -37px; }
span.teaserbtn:hover span { background-position: right -37px; }

/* Button with mail icon */
a.btn.mail {
    width: 143px;
    height: 29px;
    margin: 0 0 0 -3px;
    padding: 8px 5px 0 42px;
    color: white !important;
    display: inline-block;
    cursor: pointer;
    text-decoration: none;
    background: url(../images/button-mail.png) left top no-repeat;
}
a.btn.mail:hover { text-decoration: none !important; background-position: left bottom; }

/* Icons */
a.ico { padding-left: 18px; background: url(../images/icons.gif) no-repeat; white-space: nowrap; }
a.ico.login { background-position: left -1px; }
a.ico.print { padding-left: 21px; background-position: left -17px; }

/* Multicolumns */
#columns { margin-right: -13px; }
.column div {
    float: left;
    width: 333px !important;
    padding: 0; /* You may use a padding... but thanks to IE you can only use pixels! */
    position: relative;
    margin-right: 13px;         /* Don't use a margin! */
}

/* Optional 'read on'-message */
.column div .readOn {
    position: absolute;
    right: 1em;
    bottom: -0.5em;
    color: #999999;
}

.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

.last {
    border: 0 !important;
    margin-right: 0 !important;
    padding-right: 0 !important;
}

.left { float: left; margin-right: 10px; }
.right { float: right;}