/* ============================== */
/* ! Layout for desktop version   */
/* ============================== */
html{ overflow:-moz-scrollbars-vertical}
	body {
font-family: Arial, Verdana, Lucida, Geneva, Helvetica, sans-serif;
         font-size: 0.8em;
         color:#666;
		
	}

img {border:0 !important;}

.red {color:red;}

th {
    background: none repeat scroll 0 0 #E0DEDE !important;
    text-align: left;
    border: 1px solid #fff;
}
td {
    border: 1px solid #fff;
}

.highlight {background-color:#F7F38F !important}

.redBackground{background-color:#ff7e54 !important}

input[type="search"]{
width:200px !important;
border:1px solid #ccc;
height:30px;
}

.flagSize {padding:0px;border:0;height:20px;}
.headerHight {height:150px;}

.downloadLink {
 background-color: #003466;
    -moz-user-select: none;
    border: 1px solid transparent;
    border-radius: 4px;
    cursor: pointer;
    display: inline-block;
    font-size: 14px;
    font-weight: normal;
    line-height: 1.42857;
    margin-bottom: 0;
    padding: 6px 6px;
    text-align: center;
    vertical-align: middle;
    white-space: nowrap;
    color: #FFF !important;

}

.code {padding:22px 0 0 202px;}

#imaginary_container{
    margin-top:20%; /* Don't copy this */
}


    .left-inner-addon {
    position: relative;
}
.left-inner-addon input {
    padding-left: 30px;    
}
.left-inner-addon i {
    position: absolute;
    padding: 10px 12px;
    pointer-events: none;
}

.right-inner-addon {
    position: relative;
}
.right-inner-addon input {
    padding-right: 30px;    
}
.right-inner-addon i {
    position: absolute;
    right: 0px;
    padding: 10px 12px;
    pointer-events: none;
}

.form-control {
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 0 !important;
    height: 30px !important;
}


#wrapper {max-width: 1139px;margin:auto;padding:auto;z-index:1000;background: #fff666;background: #fff url(../images/oberrheingraben.jpg) no-repeat 110% 0;}

td {padding:2px;}
#headLogo {float:left;margin:12px 0 0 0;}
/* .row {margin:auto;padding:auto;z-index:1000;background: #fff url(../images/oberrheingraben.jpg) no-repeat 110% 0;}*/
.client { width:34em;float:right;padding:1px 15px 0 0;text-align:right; }
.headtitle { text-align:right;height:30px;font-size:26px;font-weight:bold;padding:10px 0 0 0;margin:0 0 0 0;color:#01326A; }
.headsubtitle { text-align:right;height:10px;font-size:10px;font-weight:bold;padding:0 0 5px 0;margin:0 0 0 0;color:#01326A; }
.headtext { height:18px;font-size:18px;font-weight:bold;padding:5px 0 0 0;margin:0 0 0 0;color:#01326A; }


h1 {
    color: #003466;
    font-size: 1.3em !important;
    padding: 0;
}

#flags { height:48px;float:left;font-size: 11px;padding:10px 0 0 0;margin:0 0 0 3em;}
#flags a{ text-decoration: none; margin:0;}

#search { float:left;padding:15px 1px 1px 13px;margin:0 0 0 0; }


#current1 {background-color: #003466 !important;text-decoration: underline !important;}
#current2 {background-color: transparent;font-weight:bold !important;color:#FFFFFF;}
#current3 {background-color: #003466 !important;margin:0 0 0 0;padding: 8px 1em !important;border:0;}


A { COLOR: #003466; FONT-WEIGHT: normal; TEXT-DECORATION: underline; }
A:link    { COLOR: #003466; }
A:active  { COLOR: #003466; }
A:visited { COLOR: #003466; }
A:hover   { COLOR: #003466; FONT-WEIGHT: normal;TEXT-DECORATION: none;}



.nav3distance { border-top: 1px solid #dedbd1; padding:2px 0 12px 0;}

A.nav3         {  font-size:0.9em;COLOR: #404040; TEXT-DECORATION: none;}
A.nav3:link    { COLOR: #000; WIDTH: auto; }
A.nav3:active  { COLOR: #000; }
A.nav3:visited { COLOR: #000; }
A.nav3:hover   { COLOR: #003466; FONT-WEIGHT: bold; TEXT-DECORATION: none;}

A.nav3Active         { COLOR: #404040; FONT-WEIGHT: bold; TEXT-DECORATION: none; }
A.nav3Active:link    { COLOR: #404040; }
A.nav3Active:active  { COLOR: #404040; }
A.nav3Active:visited { COLOR: #404040; }
A.nav3Active:hover   { COLOR: #003466; FONT-WEIGHT: bold;}


.no_disp{
           display:none;
}

#toTop {
	width:32px;
        border:1px solid #ccc;
        background:#f7f7f7;
        text-align:center;
        padding:5px;
        position:fixed; /* this is the magic */
        bottom:10px; /* together with this to put the div at the bottom*/
        right:-1px;
        cursor:pointer;
        display:none;
        color:#333;

        font-size:11px;
        z-index:10000;
}

hr {
           background-color:#8C9094; /* Mozilla 1.4 */
           color:#8C9094; /* IE 6 */
           border: #8C9094; /* Opera 7.11 */
           height: 1px; /* in Opera  */
}

.chapter {color:#4B4C4C;padding:0 35px 0 0;}

form {display:inline}
#preview form {position:relative;
top:15px;
width: 150px;
left:1px;}

b,strong {color:#003466;}
.newsTextStart{color:#003466;border-bottom:1px solid #30679B;padding:0 0 10px 0;}
.newsText{color:#003466;border-bottom:1px solid #30679B;padding:5px 0 10px 0;}



/* ---------- gallery styles start here ----------------------- */

.photo .trans { background: #E2E9CF;width:20px;height:20px;

	width: 22px;
	height: 22px;
	display: block;
	position: absolute;
	bottom: 0px;
	left: 0;


        /* Theoretically for IE 8 & 9 (more valid) */
        /* ...but not required as filter works too */
        /* should come BEFORE filter */
        -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";

        /* This works in IE 8 & 9 too */
        /* ... but also 5, 6, 7 */
        filter: alpha(opacity=80);

        /* Older than Firefox 0.9 */
        -moz-opacity:0.8;

        /* Safari 1.x (pre WebKit!) */
        -khtml-opacity: 0.8;

        /* Modern!
        /* Firefox 0.9+, Safari 2?, Chrome any?
        /* Opera 9+, IE 9+ */
        opacity: 0.8;




}



.photo {
	position: relative;
        padding:0 0 0 0;


}
.photo img {
	background: transparent;
	border: 0;
	padding: 0;

}
.photo span {
	width: 20px;
	height: 18px;
	display: block;
	position: absolute;
	bottom: 0;
	left: 0;
	background: url(../images/magnifier.png) no-repeat;

}
.photo a {
	text-decoration: none;
}
/* ---------- gallery styles start here ----------------------- */





/* input[type='text'] {border:1px solid #666}*/





   #nav {
      text-transform: uppercase;
      width: 100%;
      float: left;
      margin: 20px 0 0 0;
      padding: .4em 0 .4em 0;
      list-style: none;
      background-color: #003466;
      border-bottom: 1px solid #fff; 
      border-top: 1px solid #fff; }
   #nav li {
      float: left;       border-right: 1px solid #fff; }
   #nav li a {
      font-size: 0.9em;
      display: block;
      padding: 1px 15px;
      text-decoration: none;
      font-weight: bold;
      color: #fff;
      /* border-right: 1px solid #ccc; */ }
   #nav li a:hover {
      color: #FFF;
      background-color: #003466; 
      text-decoration: underline !important;}
   /* End navigation bar styling. */

#menuLeft {
 display:none;
}
.show767 {
 display:none;
}


#menuRight {
width: auto;
padding: 0 0 0 0;
margin-bottom: 1em;
font-size: 11px;

background-color: transparent;
color: #333;
}

#menuRight a.firstLevel {
display: block;
padding: 0px 0px 0px 0.1em;
border-left: 0;
border-right: 0;
font-weight: normal !important;
border-bottom: 1px solid #CCC;
background-color: transparent;
color: #404040;
text-decoration: none;
margin-top: 0.8em;
width: auto;
font-size:1.1em !important;
}
#menuRight a.firstLevel:hover {
border-left: 0;
border-right: 0;
border-bottom: 1px solid #CCC;
background-color: transparent;
font-weight:bold  !important;
color: #003466;
}

#menuRight a.secondLevel {
display: block;
padding: 3px 0px 3px 1.5em;
border-left: 0;
border-right: 0;
background-color: #FFF;
color: #003466;
text-decoration: none;
margin-top: 0.1em;
width: auto;
}
#menuRight a.secondLevel:hover {
border-left: 0;
border-right: 0;
background-color: #E1E1E1;
color: #fff;
}


#content {padding: 0.5em 0 0.3em 1.0em;color:#003466;line-height: 1.6em;}
#content h1 {font-size: 1.3em;padding: 0 0 0.9em 0;color:#003466;}
#content h2 {font-size: 1.1em;padding: 0 0 0.5em 0;color:#003466;}
#content p{padding: 0 0 0.5em 0;color:#4B4C4C;}
#content a {text-decoration: underline !important;}
#content a:hover {text-decoration: none !important;}
@media handheld, only screen and (max-width: 900px) {
#menuRight1019 {display:none;}
#news {padding:0 0 0 15px; }
#headLogo {padding:0 0 0 10px; }
#current2 {background-color: #003466 !important;font-weight:bold !important;color:FFFFFF !important;text-decoration: underline !important;}
#current2 a {text-decoration: underline !important;}
.headerHight {height:150px; border-bottom:0}

	}


@media handheld, only screen and (max-width: 900px) {

	body {
		
	}

#nav {display:none;}
/* #nav li a { padding: 1em 5% !important;} */
.client { width:300px;float:right;padding:1px 15px 15px 0;text-align:right;margin:0 0 16px 0; }
.headtitle { text-align:right;height:30px;font-size:20px;font-weight:bold;padding:10px 0 0 0;margin:0 0 0 0;color:#01326A; }
.headsubtitle { text-align:right;height:10px;font-size:10px;font-weight:bold;padding:0 0 5px 0;margin:0 0 0 0;color:#01326A; }
.headtext { height:18px;font-size:12px;font-weight:bold;padding:5px 0 0 0;margin:0 0 0 0;color:#01326A; }






#menuLeft {
 display:none;
}
.show767 {
 display:none;
}


#menuRight {
width: auto;
padding: 0 0 0 0;
margin-bottom: 1em;
font-size: 11px;
font-weight: normal;

background-color: transparent;
color: #FFF;
}

#menuRight a.firstLevel {
display: block;
padding: 0px 0px 0px 0.1em;
border-left: 0;
border-right: 0;
background-color: #003466;
color: #FFF;
text-decoration: none;
margin-top: 0.8em;
width: auto;
}
#menuRight a.firstLevel:hover {
border-left: 0;
border-right: 0;
background-color: #30679B;
color: #fff;
}


#menuRight a.secondLevel {
display: block;
padding: 3px 0px 3px 0.5em;
border-left: 0;
border-right: 0;
background-color: #FFF;
color: #003466;
text-decoration: none;
margin-top: 0.1em;
width: auto;
}
#menuRight a.secondLevel:hover {
border-left: 0;
border-right: 0;
background-color: #E1E1E1;
color: #fff;
}



}	


@media handheld, only screen and (max-width: 800px) {
#search {
    position: absolute;
    top:155px;
    margin: 0;
    padding: 15px 1px 1px 13px;
    width:99%;
}
}




/* ============================= */
/* ! Layout for mobile version   */
/* ============================= */

@media handheld, only screen and (max-width: 767px) {

	body {
		
	}
.clear {clear:both;}

#preview {display:none;}




.client { float:right;padding:1px 15px 0 0;text-align:right; width:200px;}
.headtitle { text-align:right;height:30px;font-size:18px;font-weight:bold;padding:10px 0 0 0;margin:0 0 0 0;color:#01326A; }
.headsubtitle { text-align:right;height:10px;font-size:12px;font-weight:bold;padding:0 0 5px 0;margin:0 0 0 0;color:#01326A; }
.headtext { height:18px;font-size:11px;font-weight:bold;padding:5px 0 0 0;margin:0 0 0 0;color:#01326A; }

/* .............. */
.headtitle { text-align:right;height:30px;font-size:15px;font-weight:bold;padding:10px 0 0 0;margin:0 0 0 0;color:#01326A; }
.headsubtitle { text-align:right;height:10px;font-size:9px;font-weight:bold;padding:0 0 5px 0;margin:0 0 0 0;color:#01326A; }
.headtext { height:18px;font-size:12px;font-weight:bold;padding:5px 0 0 0;margin:0 0 0 0;color:#01326A; }








#menuRight {
 display:none;
}

.show767 {
 display:block ;
}

#menuLeft{
 display:block ;
}

#menuLeft {
width: 100% !important;
float:left;
padding: 0 0 0 0;
margin: 0 0 0.5em 0;
font-size: 11px;
font-weight: normal;
      background-color: #DDDDDD;
color: #333;
border-top:1px solid #fff;
}

#menuLeft a.firstLevel {
display: inline;
float:left;
padding: 8px 1em 8px 1em;
border-left: 0;
border-right: 1px solid #fff;
background-color: #DDDDDD;
color: #000;
text-decoration: none;
margin: 0 0 0 0;
width: auto;
}

#menuLeft a.firstLevel:hover {
border-left: 0;
border-right: 1px solid #fff;
background-color: #BFBDBD;
color: #000;
}



#secLev  {
position:absolute;
top:223px;
left:0px;
background-color: #E1E1E1;
z-index:10;}

#current1 {background-color: #003466 !important;text-decoration: underline;}
#current2 {background-color: #003466 !important;font-weight:bold !important;color:FFFFFF !important;}
#current3 {background-color: #003466 !important;margin:0 0 0 0;padding: 8px 1em !important;border:0;}

#secLev a.secondLevel {
display: inline;
float:left;
padding: 7px 5px 7px 5px;
border-right: 1px solid #fff;
border-left: 0;

background-color: #E1E1E1;
color: #000;
text-decoration: none;
margin-top: 0 !important;
margin-bottom: 0 !important;
width: auto;
}
#secLev a.secondLevel:hover {
border-left: 0;
border-right: 1px solid #fff;
background-color: #DDDDDD;
color: #000;
}





#content {padding: 3.8em 0 0.5em 0.8em;color:#003466;}
#content h1 {font-size: 1.2em;padding: 0 0 0.3em 0;color:#003466;}




}


/* ========================================== */
/* ! Provide higher res assets for iPhone 4   */
/* ========================================== */

@media only screen and (max-width: 515px) {


.form-control {width:90% !important;}
.code {padding:22px 0 0 20px;}

#wrapper {max-width: 1139px;margin:auto;padding:auto;z-index:1000;background: #fff666;background: #fff;}
#headLogo {float:left;margin:12px 0 0 2px;width:90px;}
.clear {clear:both;}


#flags { height:48px;float:left;font-size: 11px;padding:15px 0 0 0;margin:0 0 0 0.6em;}
#flags a{ text-decoration: none; margin:0;}

#menuRight {
 display:none;
}


#content {padding: 3.8em 0 0.5em 0.8em;color:#003466;}
#content h1 {font-size: 1.2em;padding: 0 0 0.3em 0;color:#003466;}

.star{ font-size:1.0em;  color:#f00 !important;  vertical-align:top;}

.client { width:9em;float:right;padding:1px 15px 0 0;text-align:right; }
.headtitle { text-align:right;font-size:12px;font-weight:bold;padding:10px 0 0 0;margin:0 0 0 0;color:#01326A;line-height: 1.5em; }
.headsubtitle { text-align:right;height:10px;font-size:9px;font-weight:bold;padding:0 0 5px 0;margin:0 0 0 0;color:#01326A; }
.headtext { height:18px;font-size:10px;font-weight:bold;padding:17px 0 0 0;margin:0 0 0 0;color:#01326A;line-height: 1.5em; }

.flagSize {padding:0px;height:20px;width:25px;}
.lang {display:none;}


}