/*
  ======================================================

	MAINCSS FILE FOR www.mitsche.at

	Developed by IQ² - Smarter Websolutions, September 2011
	Copyright by IQ² - Smarter Websolutions, September 2011
		
	www.mitsche.at is a webproject maintained and developed by IQ². 
    Graphic-design evolved by sternenklar.at.
    Concept by sternenklar.at & IQ²
	
	Projectfacts: 
	
	Main-Release: January, 2012
	
	Have fun!
  ======================================================
*/


/*
  ======================================================
	LAYOUT SPECIFIC STYLESHEET DEFINITIONS
  ======================================================
*/
html, body { /*Scroll fix for Opera & Firefox */
	height: 101%; 
	margin-bottom: 1px;
}

body {
	margin: 0;
	padding: 0;
    border: 0;
    color: #575757; 
    background-color: #f2e7e1;
}
 
.inside { /* Content padding */
	margin: 0;
	padding: 0 35px 0 35px;
	border: 0;
	float: left;
}

/**
  ======================================================
    COMMON STYLES FOR LINKS
  ======================================================
*/ 
a { outline-width: 0; display: inline; color: #6b9718; } 

/**
  ======================================================
    CONTAINER
  ======================================================
*/ 
.container { 
    background: url(../img/b/assets/bg-body.png) repeat-x left top;
    position: relative;
    border: 1px solid #c6bdb8;
    -webkit-box-shadow: #b7b1ad 0px 6px 6px;
    -moz-box-shadow: #b7b1ad 0px 6px 6px;
    box-shadow: #b7b1ad 0px 6px 6px;
    behavior: url("tl_files/mitsche/js/PIE.htc");  
} 

/**
  ======================================================
    HEADER & LOGO SECTION
  ======================================================
*/
#header {
    margin: 0;
    padding: 0;
    border: 0;
    width: 950px;
    height: 263px;
    z-index: 10;
    position: relative;
}

#header img#logo { position: absolute; top: 20px; left: 40px; }

/**
  ======================================================
    CONTENTAREA
  ======================================================
*/ 
#contentarea { 
    width: 950px;
    background: #eaeaea url(../img/b/assets/bg-contentarea.png) repeat-y left top; 
    margin: 0;
    padding: 0 0 30px 0;
    float: left;
    position: relative;
} 

#cleft { position: relative; top: -120px; margin: 0 0 -120px 0; }
#cleft .inside { margin: 0; padding: 0 0 0 30px; float: left; }
#cright { position: relative; top: -120px;  float: left; z-index: 100; }
#cright .inside { padding: 0 0 0 25px; float: left; }
#cright .ce_image { margin: 0; z-index: 100; }
#cright .ce_image .image_container { z-index: 100; }
#cright #link { margin: -28px 0 15px -15px; }

#cleft .ce_text.new-product {
    margin: 20px 0 15px 0;
    padding: 10px;
    width: 542px;
    position: relative;
    border: 10px solid #FFF;
    background-color: #f8f3f0 ;
    float: left;
}

.mn01 #cleft .new-product img { margin: 0 15px 0 0; padding: 0; float: left; }
.mn01 #cleft .new { top: -15px; left: -10px; position: absolute; z-index: 10; }
.mn01 #cleft .new-product h2 { margin-top: 10px; font-size: 24px; color: #840628;}
.mn01 #cleft .new-product p { margin: 0; }

.pic { padding: 10px ; border: 10px solid #FFF; margin-bottom: 15px; margin-left: 15px; }
#cleft h2 { font-size: 26px; }
#cleft .ce_text {
    width: 542px;
    margin: 0 0 15px 0;
    padding: 10px;
    border: 10px solid #FFF;
    position: relative;
    background-color: #f8f3f0 ;
    float: left;
}

#cleft .box-shadow {
    margin: 0 0 10px 0;
    padding: 0 0 6px 0;
    position: relative;
    background: url(../img/b/assets/bg-shadow-text.png) no-repeat left bottom;    
    float: left;
}

#cleft .box-shadow.no { background: none; }
#cleft #welcome { background: none; position: relative; left: -20px; }

#cleft .ce_image {
    position: relative;
    padding: 10px;
    margin: 0 0 15px 0;
    border: 1px solid #DDD;
    background-color: #FFF;
    float: left;
}

/**
  ======================================================
    FOOTER
  ======================================================
*/ 
#footer {
    width: 950px;
    height: 140px;
    margin: 0;
    background:  url(../img/b/assets/bg-footer.png) no-repeat top left;
    float: left;
    position: relative;
    color: #FFF;
    font-size: 10px;
}

#footer a { color: #FFF; float: left; width: 100%; }
#fbox01 { width: 165px; position: absolute; left: 465px; top: 25px; }
#fbox02 { width: 150px; position: absolute; left: 673px; top: 25px; }
#fbox03 { width: 111px; position: absolute; left: 849px; top: 25px; }

/**
  ======================================================
   MAIN NAVIGATION
  ======================================================
*/ 
#navigation {
    margin: 0;
    padding: 0;
    border: 0;
    width: 703px;
    height: 53px;
    float: right;
    clear: both;
    position: relative;
    top: 30px;
}

.mod_navigation {
	margin: 0;
	padding: 0;
	border: 0;
	width: 703px;
    height: 53px;
    clear: both;
}

#navigation .mod_navigation ul {
    margin: 0;
    padding: 0;
    border: 0;
    position: relative;
    float: right;
    width: 703px;
    height: 53px;   
}

#navigation .mod_navigation ul li { float: left; display: inline; }
li.mn01, li.mn02, li.mn03, li.mn04, li.mn05 {
    margin: 0;
    padding: 0;
    width: 160px;
    height: 53px;
    display: block;
    background: url('../img/b/assets/nav.png') no-repeat 0px;
}

li.mn01 { width: 139px; }
li.mn02 { width: 82px; }
li.mn03 { width: 144px; }
li.mn04 { width: 150px; }
li.mn05 { width: 188px; }

li.mn01 { background: url('../img/b/assets/nav.png') 0 0; }
li.mn02 { background: url('../img/b/assets/nav.png') -139px 0; }
li.mn03 { background: url('../img/b/assets/nav.png') -221px 0; }
li.mn04 { background: url('../img/b/assets/nav.png') -365px 0; }
li.mn05 { background: url('../img/b/assets/nav.png') -515px 0; }

#navigation .mod_navigation ul li.mn01 > .trail, #navigation .mod_navigation ul .mn01.active { background: url('../img/b/assets/nav.png') 0 53px; }
#navigation .mod_navigation ul li.mn02 > .trail, #navigation .mod_navigation ul .mn02.active { background: url('../img/b/assets/nav.png') -139px 53px; }
#navigation .mod_navigation ul li.mn03 > .trail, #navigation .mod_navigation ul .mn03.active { background: url('../img/b/assets/nav.png') -221px 53px; }
#navigation .mod_navigation ul li.mn04 > .trail, #navigation .mod_navigation ul .mn04.active { background: url('../img/b/assets/nav.png') -365px 53px; }
#navigation .mod_navigation ul li.mn05 > .trail, #navigation .mod_navigation ul .mn05.active { background: url('../img/b/assets/nav.png') -515px 53px; }

li.mn01 > a:hover { background: url('../img/b/assets/nav.png') 0 53px; }
li.mn02 > a:hover { background: url('../img/b/assets/nav.png') -139px 53px; }
li.mn03 > a:hover { background: url('../img/b/assets/nav.png') -221px 53px; }
li.mn04 > a:hover { background: url('../img/b/assets/nav.png') -365px 53px; }
li.mn05 > a:hover { background: url('../img/b/assets/nav.png') -515px 53px; }
  
li.mn01 > a { width: 139px; height: 53px; display: block; }
li.mn02 > a { width: 82px; height: 53px; display: block; }
li.mn03 > a { width: 144px; height: 53px; display: block; }
li.mn04 > a { width: 150px; height: 53px; display: block; }
li.mn05 > a { width: 188px; height: 53px; display: block; }

#navigation .mod_navigation ul li.mn01 > a, #navigation .mod_navigation ul .active .mn01,
#navigation .mod_navigation ul li.mn02 > a, #navigation .mod_navigation ul .active .mn02,
#navigation .mod_navigation ul li.mn03 > a, #navigation .mod_navigation ul .active .mn03,
#navigation .mod_navigation ul li.mn04 > a, #navigation .mod_navigation ul .active .mn04,
#navigation .mod_navigation ul li.mn05 > a, #navigation .mod_navigation ul .active .mn05 {
    margin: 0;
    padding: 0;
    border: 0;
    text-indent: -9999em;
    display: block;
    float: right;
}

#navigation .mod_navigation ul.level_1 > li.active.last span { display: none; }
.invisible { display: none; }

/**
 * Second level
 */
#navigation .mod_navigation ul ul.level_2 {
    margin: 0;
    padding: 0;
    border: 0;
    position: absolute;
    top: 100%;
    left: 52px;
    height: 21px;  
    width: 650px; 
    background-color: #A62244; 
}

#navigation .mod_navigation ul ul li {
    margin: 0;
    padding: 2px 10px 3px 10px;
    color: #FFF;
    background-color: #A62244;
    line-height: 16px;        
}

#navigation .mod_navigation ul li li a {
    color: #f7d8a4;
    text-decoration: none;
    line-height: 16px;
} 

#navigation .mod_navigation ul ul li a:hover, #navigation .mod_navigation ul ul li.trail > a { color: #FFF; }
#navigation .mod_navigation ul ul li.trail{ background-color:#A62244; color: #FFF; }
#navigation .mod_navigation ul ul li.submenu.trail{ background-color:#BB264D; color: #FFF; }

#navigation .mod_navigation ul ul li.active  {
    margin: 0;
    padding: 2px 10px 3px 10px;
    color: #FFF;
    background-color: #bb264d; 
    line-height: 16px;        
} 

/**
 * Third level
 */
#navigation .mod_navigation ul ul ul {
    margin: 2px 0 0 0;
    padding: 0;
    border: 0;  
    position: absolute;
    top: 100%;   
    left: 0;
    height: 20px;   
    width: 650px;
}

#navigation .mod_navigation ul ul ul li {
    margin: 0;
    padding: 2px 10px 3px 10px;
    color: #FFF;
    background-color: #911E3B; 
    line-height: 16px;        
}

#navigation .mod_navigation ul li li li a {
    display: block;
    color: #f7d8a4;
    text-decoration: none;
    line-height: 16px;
} 

#navigation .mod_navigation ul ul ul li:hover a, #navigation .mod_navigation ul ul ul li.trail > a { color: #FFF; }
#navigation .mod_navigation ul ul ul li.active  {
    margin: 0;
    padding: 2px 10px 3px 10px;
    text-decoration: none;
    color: #FFF;
    background-color: #A62244; 
    line-height: 16px;        
} 

/**
 * Metanav
 */
#metanav {
    width: 360px;
    height: 20px;
    margin: 0;
    padding: 5px 0 5px 0;
    border: 0;
    float: left;
    position: absolute;
    top: 0;
    right: 40px;
}

#metanav.mod_navigation { float: left; height: 20px; clear: none; }
#metanav ul { margin: 0; padding: 0; list-style-type: none; float: right; }
#metanav li { height: 20px; margin: 0; padding: 0 15px 0 0; border: 0; display: block; float: left;}
#metanav ul li a,
#metanav ul li.active span {
    margin: 0;
    padding: 0;
    display: block;
    color: #f7d8a4;
    text-decoration: none;
    font-size: 12px;
    float: left;
} 
#metanav ul li.active span,
#metanav ul li.trail a,
#metanav ul li a:hover { color: #FFF; }
#metanav ul li.last { padding: 0; }


/**
  ======================================================
    MOD_ARTICLENAV
  ======================================================
*/
p.back { display: none; }
.mod_articlenav {
    margin: 10px 0 0 0;
    padding: 0 0 0 15px;
    width: 547px;
    float: left;
    position: relative;
    z-index: 100;
}

.mod_articlenav ul {
    position: absolute;
    top: -28px;
    left: 15px;
    margin: 0;
    padding: 0;
    border: 0;
    width: 550px; 
    list-style-type: none;
}

.mod_articlenav ul li {
    margin: 0 8px 0 0;
    padding: 2px;
    border: 0;
    height: 14px;
    width: 14px;
    line-height: 14px;  
    text-align: center;
    float: left;      
    color: #FFF;
    background-color: #A62244;
}

.mod_articlenav ul li a { color: #f7d8a4; text-decoration: none; display: block; width: 14px; } 
.mod_articlenav ul li.current { background-color: #FFF; color: #A62244; }

/**
  ======================================================
    CONTENT HEADINGS (USING PHARK METHOD)
  ======================================================
*/
h1 {
    margin: 0 0 10px 0;
    font-size: 40px;
    color: #6B0520;
    color: #FFF;
    font-family: obliqua, Arial, sans-serif;
    font-weight: bold;    
}

h2 {
    font-size: 14px;
    color: #840628;
    font-family: obliqua, Arial, sans-serif;
    font-weight: bold;
}

h2.address {
    background: url('../img/b/assets/headings/address.png') no-repeat;
    width: 48px;
    height: 12px;
    text-indent: -999em;
    margin: 0 0 15px 0;
    padding: 0;
    border: 0;
}

h2.opening-hours {
    background: url('../img/b/assets/headings/opening-hours.png') no-repeat;
    width: 94px;
    height: 12px;
    text-indent: -999em;
    margin: 0 0 15px 0;
    padding: 0;
    border: 0;
}

h2.imprint {
    background: url('../img/b/assets/headings/imprint.png') no-repeat;
    width: 61px;
    height: 12px;
    text-indent: -999em;
    margin: 0 0 15px 0;
    padding: 0;
    border: 0;
}

.layout_latest h2 { line-height: 26px; }
h2 span {
    font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
    font-size: 12px; 
    font-weight: normal;
    line-height: 20px;
    color: #575757; 
}

/**
  ======================================================
    PAGINATION
  ======================================================
*/                                                                                                   
.pagination { width: 100%; margin: 15px 0 15px; padding: 5px 0 5px 0;  border: 0; border-top: 1px solid #c6bdb8; float: left; line-height: 20px; color: #26272a; }
.pagination li { list-style-type: none; }
.pagination p { width: 30%; float: left; margin: 0; }
.pagination ul { list-style-type: none; width: 70%; text-align: right; float: right; margin: 0; padding: 0; }
.pagination li { list-style-type: none; display: inline; padding: 0 3px 0 3px; background: none; margin: 0; }
.pagination .current { font-weight: bold; }

.box-shadow p.back { display: block; }

/*
  ======================================================
    BLUEPRINT FORM OVERRIDE
  ======================================================
*/  
fieldset {padding: 0;margin:0;border:0;}
legend {font-weight:bold;font-size:1.2em;}
input[type=text], input[type=password], input.text, input.title, textarea, select {background-color: #FFF;border: none; border:1px solid #D2D2D2;}
input[type=text]:focus, input[type=password]:focus, input.text:focus, input.title:focus, textarea:focus, select:focus {border-color:#333; background-color: #FAFAFA;}
input[type=text], input[type=password], input.text, input.title, textarea, select {margin: 2px 0 0 0;}
input.text, input.title {width:300px; padding:5px; margin: 5px 0 5px 0; background-color: #FFF;}
input.title {font-size:1.5em;}
textarea {width:510px;height:150px;padding:5px; overflow: hidden; background-color: #FFF;}
input[type=checkbox], input[type=radio], input.checkbox, input.radio {position:relative;top:.25em;}
form.inline {line-height:3;}
form.inline p {margin-bottom:0;}
.error, .notice, .success {padding:0; margin-bottom:0;border:0;}
.error {background: none;}
.notice {background: none;}
.success {background:none;}

/*
  ======================================================
    COMMON STYLES FOR FORMS
  ======================================================
*/  
form {
    width: 562px;
    border: 0;
    margin: 0 0 15px 0;
    padding: 10px;
    display: inline;
    float: left;
    background-color: #FFF;  
}

.formbody {
    width: 542px;
    margin: 0;
    padding: 10px;
    border: 0;
    float: left;
    border: 1px solid #F5F5F5;
    background-color: #f2e7e1;
}

.formbody .headline {
    font-size: 16px;
    line-height: 18px;
    font-weight: bold;
    margin: 10px 10px 10px 0;
    padding: 10px 0 10px 10px;
    background-color: #FFF;
    color: #840628;
    float: left;
    width: 510px;
}

.formbody .headline p { margin: 0; float: left; }
.formbody .explanation { float: left; width: 100%; }
fieldset.formleft { margin: 10px 0 10px 0; padding: 0 10px 0 0; float: left; width: 80px;}
fieldset.formleft label, fieldset.formleft input.text { width: 50px;  padding:5px;  margin: 5px 0 5px 0; }   
fieldset.formleft input.text, fieldset.formright input.text { background-color: #FFF; }
fieldset.formright { margin: 10px 0 10px 0; padding: 0 10px 0 0; float: left; width: 430px; }
fieldset.formright label, fieldset.formright input.text { width: 410px; padding:5px;  margin: 5px 0 5px 0; }   
fieldset.form50 { margin: 0 0 10px 0; padding: 0 10px 0 0; float: left; width: 260px; }
fieldset.form50 label, fieldset.form50 input.text { width: 235px;  padding:5px; margin: 5px 5px 5px 0; float: left; }   

label.error { color: #840628; }
p.error {
    color: #840628;
    border: 0;
    margin: 3px 0 0 0;
    padding: 0;
    width: 100%;
    float: left;
}

.mandatory { color: #333; font-weight: normal; }
label.mandatory { color: #333; font-weight: bold; }
input.error { border: 1px solid #840628; }
input.captcha { width: 80px; }
textarea.error { padding: 5px; background-color: #fff; border: 1px solid #F0251B; }

/**
 * CSS Hack to fix IE7 & IE8 fieldset problems
 * Description: Background-color is visible above
 * the fieldset border
 */
form legend { margin-top /*\**/: -1em; left: .5em; } 
label {
    margin: 3px 0 0 0;
    padding: 0;
    border: 0;
    display: block;
    float: left;
    width: 510px;
    font-weight: normal;
    color: #333;
}

label span.capt_lab { float: right; }
input.submit {
    margin: 0;
    padding: 5px 10px 5px 10px;
    border: 0;
    line-height: 24px;
    color: #FFF;
    background-color: #840628;       
    color: #FFF;
}

.submit_container { width: 410px; float: left; display: block; margin: 0; padding: 10px 0 5px 0; }
.radio_container { border: 0; float: left; width: auto; margin: 2px 0 2px 0; }
.radio_container input.radio { width: 15px; margin: 0; padding: 0; border: none; float: left; }
.radio_container.newline  { width: 500px; margin: 0; padding: 0; border: 0; display: block; float: left; }
.radio_container.newline span { float: left; }
.radio_container.newline span label { margin: 0; padding: 0 10px 0 10px; width: 460px; }

.check_container { border: 0; float: left; width: auto;   margin: 2px 0 2px 0; }
.checkbox_container input.checkbox { width: 15px; margin: 0; padding: 0; border: none; float: left; }
.checkbox_container.w100 { width: 100px; margin: 0; padding: 0; border: 0; display: block; float: left; }
.checkbox_container.w100 span { float: left; }
.checkbox_container.w100 span label { margin: 0; padding: 0 10px 0 10px; width: 60px; }

/**
  ======================================================
    TABLE DEFINITIONS
  ======================================================
*/    
table.contenttable {
    border-top: 1px solid #DDD;
    border-left: 1px solid #DDD;
    border-collapse: collapse;
    margin: 15px 0 15px 0;
    width: 540px;
    float: left;
}

.contenttable th, 
.contenttable td {
    padding: 2px 10px 2px 10px;
    border-right: 1px solid #DDD;
    border-bottom: 1px solid #DDD; 
    text-align: left;
    font-size: 11px;
}

.contenttable td {
    vertical-align: top;
    background-color: #FFF;
    color: #575757;
    padding: 10px;
    font-size: 12px;
}

.contenttable th {
    font-weight: bold;
    vertical-align: middle;
    background: #fdfeff url('../img/b/assets/bg-table.png') left bottom repeat-x;      
    color: #3f3f3f;
    padding: 10px;
    text-align: left;
}

/**
  ======================================================
    ACCORDION
  ======================================================
*/
.accordion h2 a {
    font-family: Arial;
    font-size: 16px;
    line-height: 24px;
    padding: 0 0 5px 25px;
    margin: 3px 0 3px 0;
    color: #333;
    width: 515px;
    display: block;
    float: left;
    text-decoration: none;
    border-bottom: 1px dotted #CDCAC0;
    outline: none;
    background: url(../img/b/assets/icon-accordion-inactive.png) no-repeat 0 4px ;       
}

.accordion h2.ui-state-active a { 
    color: #ED1C24;
    line-height: 24px; 
    padding: 0 0 5px 25px;   
    background: url(../img/b/assets/icon-accordion-active.png) no-repeat center left;           
}

.accordion div { width: 505px; float: left; padding: 0; outline: 0; }

/**
  ======================================================
    JQUERY ACCORDION STYLES
  ======================================================
*/    
.ui-accordion .ui-accordion-header { cursor: pointer; position: relative; }
.ui-accordion .ui-accordion-li-fix { display: inline; }
.ui-accordion .ui-accordion-header-active { border-bottom: 0 !important; color: #FF0000; }
.ui-accordion .ui-accordion-header .ui-icon { display: none; position: absolute; left: .5em; top: 50%; margin-top: -8px; }
.ui-accordion .ui-accordion-content { padding: 5px 10px 10px 0; }
.ui-accordion .ui-accordion-content-active { display: block; border-bottom: 1px dotted #CDCAC0; margin: 0 0 4px 0; }
.ui-helper-reset { margin: 0; padding: 0; border: 0; outline: 0; }

/**
  ======================================================
   WRAPPER-TEASER + SLIDES
  ======================================================
*/ 
#wrapper-teaser {
    width: 582px;
    margin: 0 0 10px 0;
    padding: 0 0 6px 0;
    border: 0;
    position: relative;
    float: left;
    background: url(../img/b/assets/bg-shadow-text.png) no-repeat left bottom;    
}

#teaser-slides {
    width: 582px;
    height: 395px;    
    margin: 0;
    padding: 0;
    border: 0; 
    
}

#teaser-slides .slide {
    width: 562px;
    height: 375px;
    margin: 0;
    padding: 10px;
    border: 0;
    cursor: pointer; 
    float: left;
    background-color: #FFF;    
}