@charset 'utf-8';
@import url(front_reset.css);
/* Screen-Stylesheet by Thomas Lempa
www.thomaslempa.de
*/

/* ----------------------------------------------------- COLORS
 leben dark blue: #00303a
 leben light blue: #00c5e9
 sparen dark lila: #250027
 sparen light lila: #ffcaff
 feature light green: #81b71a
*/

/* ----------------------------------------------------- GENERIC */
body {
 font: 0.88em/120% "Segoe UI", Calibri, "Myriad Pro", Myriad, "Trebuchet MS", Helvetica, Arial, sans-serif;;
 color: #000;
 overflow-x: hidden;
}
a {
 color: #000;
}
a:link {
 color: #000;
}
a:visited {
 color: #000;
}
a:hover {
 color: #000;
 text-decoration:none;
}
a:active {
 color: #000;
}
h1 {
 font-size: 1.33em;
 font-weight: bold;
 text-shadow: 1px 1px 1px #fff;
}
h2 {
 font-size: 1em;
 font-weight: bold;
 padding: 5px;
}
h3 {
 font-size: 0.88em;
 font-style: italic;
 padding: 2px 5px;
 line-height: 1.13em;
}
h3 small {
 font-size: 0.88em;
}
h4 {
 font-size: 0.75em;
 font-style: italic;
 padding: 2px 5px;
}
p {
 padding: 10px 5px;
}
.right {
 float: right;
}
.left {
 float: left;
}
small {
 font-size: 0.6em;
}
/* ----------------------------------------------------- HEADER */
#header-wrapper {
 position: absolute;
 top: 0;
 width: 100%;
 height: 80px;
 z-index: 1;
 text-align: center;
}
#leben #header-wrapper {
 background: #224a52;
 background: rgba(0, 48, 58, 0.85);
 box-shadow: 1px 5px 10px rgba(0, 0, 0, 0.75);
 -webkit-box-shadow: 1px 5px 10px rgba(0, 0, 0, 0.75);
 -moz-box-shadow: 1px 5px 10px rgba(0, 0, 0, 0.75);
}
#sparen #header-wrapper {
 background: #224a52;
 background: rgba(37, 0, 39, 0.85);
 box-shadow: 1px 5px 10px rgba(0, 0, 0, 0.75);
 -webkit-box-shadow: 1px 5px 10px rgba(0, 0, 0, 0.75);
 -moz-box-shadow: 1px 5px 10px rgba(0, 0, 0, 0.75);
}
#beta {
 position: absolute;
 top: 0;
 right: 0;
 width: 80px;
 height: 80px;
 z-index: 2;
}
#beta a{
 width: 100%;
 height: 100%;
 display: block;
 text-indent: -9999px;
 background: transparent url(../images/beta.png) no-repeat 0 0;
}
#header {
 width: 100%;
 min-width: 940px;
 margin: auto;
 text-align: left;
 position: relative;
}
#logo {
 position: relative;
 top: 5px;
 left: 20px;
 float: left;
 width: 145px;
 height: 105px;
 z-index: 2;
}
#logo a{
 width: 100%;
 height: 100%;
 display: block;
 text-indent: -9999px;
 background: transparent url(../images/logo.png) no-repeat 0 0;
}
#navigation {
 position: relative;
 top: 30px;
 right: 80px;
 float: right;
 list-style: none;
 color: #fff;
 font-size: 2em;
 line-height: 0.88em;
}
#navigation li {
 display: inline;
 text-transform: uppercase;
 margin-right: 10px;
}
#navigation li a, #navigation li a:link, #navigation li a:visited {
 color: #fff;
 text-decoration: none;
 padding: 5px 5px 0 5px;
}
#navigation li#leben a:hover, #navigation li#leben a.active {
 color: #00c5e9;
}
#navigation li#sparen a:hover, #navigation li#sparen a.active {
 color: #e74b20;
}
#navigation li#leben a.active {
 background: #224a52;
 background: rgba(0, 48, 58, 0.85);
}
#navigation li#sparen a.active {
 background: #224a52;
 background: rgba(37, 0, 39, 0.85);
}
#navigation li#sparen a, #navigation li#leben a {
 background: #e5e5e5;
 background: rgba(0, 0, 0, 0.1);
}

/* ----------------------------------------------------- SIDEBAR */
#sidebar-wrapper {
 width: 220px;
 height: 440px;
 background: #fff;
 position: absolute;
 right: 20px;
 top: 73px;
 background: transparent;
 z-index: 1;
}
#sidebar-wrapper h2{
 position: relative;
 top: 27px;
}
#leben #sidebar-wrapper h2{
 color: #00c5e9;
 background: #224a52;
 background: rgba(0, 48, 58, 0.85);
 width: 192px;
}
#sparen #sidebar-wrapper h2{
 color: #e74b20;
 background: #224a52;
 background: rgba(37, 0, 39, 0.85);
 width: 192px;
}
#sidebar {
 width: 220px;
 height: 440px;
 overflow: auto;
}
#sidebar h2 {
 padding: 2px;
}
#sidebar h3 {
 font-style: normal;
 padding: 2px;
}
#sidebar p {
 padding: 2px 5px;
}
#sidebar ul {
 width: 200px;
 list-style: none;
 margin-top: 27px;
 border: 1px solid #e3e5e6;
}
#sidebar ul li{
 padding: 5px;
}
#sidebar ul li.even{
 background: #f3f3f3;
 background: -webkit-gradient(linear,left top,left bottom,color-stop(0, rgba(243, 243, 243, 0.95)),color-stop(1, rgba(228, 228, 228, 0.95)));
 background: -moz-linear-gradient(top, rgba(243, 243, 243, 0.95), rgba(228, 228, 228, 0.95));
}
#sidebar ul li.odd{
 background: #dbdbdb;
 background: -webkit-gradient(linear,left top,left bottom,color-stop(0, rgba(219, 219, 219, 0.95)),color-stop(1, rgba(204, 204, 204, 0.95)));
 background: -moz-linear-gradient(top, rgba(219, 219, 219, 0.95), rgba(204, 204, 204, 0.95));
}
/*
#sidebar ul#events_list li{
 background: #f3f3f3;
 background: -webkit-gradient(linear,left top,left bottom,color-stop(0, rgba(243, 243, 243, 0.95)),color-stop(1, rgba(228, 228, 228, 0.95)));
 background: -moz-linear-gradient(top, rgba(243, 243, 243, 0.95), rgba(228, 228, 228, 0.95));
}
#sidebar ul#offers_list li{
 padding: 5px;
 background: #f3f3f3;
 background: -webkit-gradient(linear,left top,left bottom,color-stop(0, rgba(243, 243, 243, 0.95)),color-stop(1, rgba(228, 228, 228, 0.95)));
 background: -moz-linear-gradient(top, rgba(243, 243, 243, 0.95), rgba(228, 228, 228, 0.95));
}
*/
/* ----------------------------------------------------- LEGEND */
#legend {
 width: 160px;
 position: absolute;
 left: 20px;
 top: 100px;
 z-index: 1;
 list-style: none;
}
#legend li{
 display: block;
 margin: 0 0 3px 0;
 padding: 2px 5px;
}
#leben #legend li{
 background: #f3f3f3;
 background: -webkit-gradient(linear,left top,left bottom,color-stop(0, rgba(243, 243, 243, 0.85)),color-stop(1, rgba(228, 228, 228, 0.85)));
 background: -moz-linear-gradient(top, rgba(243, 243, 243, 0.85), rgba(228, 228, 228, 0.85));
 border: 1px solid rgba(0, 48, 58, 0.85);
}
#sparen #legend li{
 background: #f3f3f3;
 background: -webkit-gradient(linear,left top,left bottom,color-stop(0, rgba(243, 243, 243, 0.85)),color-stop(1, rgba(228, 228, 228, 0.85)));
 background: -moz-linear-gradient(top, rgba(243, 243, 243, 0.85), rgba(228, 228, 228, 0.85));
 border: 1px solid rgba(37, 0, 39, 0.85);
}
#leben #legend li#leben_legend{
 background: #224a52;
 background: rgba(0, 48, 58, 0.85);
 border: 1px solid rgba(0, 48, 58, 0.85);
}
#sparen #legend li#sparen_legend{
 background: #224a52;
 background: rgba(37, 0, 39, 0.85);
 border: 1px solid rgba(37, 0, 39, 0.85);
}
#leben #legend li#leben_legend a{
 color: #00c5e9;
}
#sparen #legend li#sparen_legend a{
 color: #e74b20;
}
#legend li a{
 display: block;
 width: 100%;
 height: 100%;
 text-decoration: none;
 background: transparent url(../icons/cross.png) no-repeat right center;
}
#legend li a.active{
 background: transparent url(../icons/tick.png) no-repeat right center;
}
#legend li img{
 padding: 2px;
 vertical-align: middle;
}
#legend li {

}

/* ----------------------------------------------------- MAP */
#mainzmap {
 position: absolute;
 top: 0;
 left: 0;
 float: left;
 width: 100%;
 min-width: 940px;
 height: 560px;
}
#mainzmap .info {
 margin: 0 0 10px 0;
}
#mainzmap .info h3{
 font-size: 1em;
 font-weight: bold;
 font-style: normal;
 padding: 2px 5px;
}
#mainzmap .info p {
 padding: 2px 5px;
}
#mainzmap .tooltip {
 background: #f8f8f8;
 border: 1px solid #ccc;
 padding: 5px 15px 3px 0;
 white-space: nowrap;
 box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.4);
 -webkit-box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.4);
 -moz-box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.4);
}
#mainzmap .tooltip span{
 position: relative;
top: -5px;
 left: -8px;
display: block;
 float: left;
 width: 8px;
 height: 15px;
 background: transparent url(../images/arrow_left.png) no-repeat 0 0;
}
#mainzmap .info-box {
 background: #f8f8f8;
 border: 1px solid #ccc;
 padding: 10px;
  box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.4);
 -webkit-box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.4);
 -moz-box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.4);
 z-index: 100;
}
/* ----------------------------------------------------- ZOOM MAP CONTROL */
#zoom {
 list-style: none;
}
#zoom li {
 float: left;
 width: 20px;
 padding: 5px;
 margin-right: 3px;
 font-size: 2em;
 text-align: center;
 cursor: pointer;
}
#leben #zoom_in, #leben #zoom_out, #leben #zoom_center {
 color: #00c5e9;
 background: #224a52;
 background: rgba(0, 48, 58, 0.85);
}
#sparen #zoom_in, #sparen #zoom_out, #sparen #zoom_center {
 color: #e74b20;
 background: #224a52;
 background: rgba(37, 0, 39, 0.85);
}
/* ----------------------------------------------------- CONTENT */
#content-wrapper {
 position: absolute;
 top: 560px;
 left: 0;
 margin: 10px auto 0;
 width: 100%;
}
#special {
 width: 240px;
 float: left;
 margin-left: 20px;
}
#special .special_feature {
 width: 220px;
 margin: 5px;
 border: 1px solid #d1d1d1;
 background: #f3f3f3;
 background: -webkit-gradient(linear,left top,left bottom,color-stop(0, rgba(243, 243, 243, 0.95)),color-stop(1, rgba(228, 228, 228, 0.95)));
 background: -moz-linear-gradient(top, rgba(243, 243, 243, 0.95), rgba(228, 228, 228, 0.95));
}
#special .special_feature h2{
 color: #fff;
 background: #81b71a;
 background: rgba(129, 183, 26, 0.85);
}
#special .special_feature h2 a{
 color: #fff;
 text-decoration: none;
}
#special .special_feature img {
 padding: 10px 5px 5px 5px;
 float: left;
}
#content {
 min-height: 200px;
 min-width: 680px;
 margin: 0 20px 0 280px;
}
#content .feature {
 width: 210px;
 margin: 5px;
 float: left;
 border: 1px solid #d1d1d1;
 background: #f3f3f3;
 background: -webkit-gradient(linear,left top,left bottom,color-stop(0, rgba(243, 243, 243, 0.95)),color-stop(1, rgba(228, 228, 228, 0.95)));
 background: -moz-linear-gradient(top, rgba(243, 243, 243, 0.95), rgba(228, 228, 228, 0.95));
}
#content .feature img{
 padding: 5px;
 float: left;
}
#content .event_feature {
 width: 210px;
 margin: 5px;
 float: left;
 border: 1px solid #d1d1d1;
 background: #f3f3f3;
 background: -webkit-gradient(linear,left top,left bottom,color-stop(0, rgba(243, 243, 243, 0.95)),color-stop(1, rgba(228, 228, 228, 0.95)));
 background: -moz-linear-gradient(top, rgba(243, 243, 243, 0.95), rgba(228, 228, 228, 0.95));
}
#content .event_feature img{
 padding: 5px;
 float: left;
}
/* ----------------------------------------------------- FOOTER */
#text {
 margin: 140px auto 20px;
 *margin: 140px 0 20px 0;
 *padding:  140px 100px 0 100px;
 width: 960px;
 text-align: left;
}
/* ----------------------------------------------------- FOOTER */
#footer {
 padding: 10px 0;
 width: 100%;
 float: left;
 text-align: center;
 background: #f3f3f3;
}
#footer ul{
 margin: auto;
 list-style: none;
 text-align: left;
 display: inline;
}
#footer ul li{
 display: inline;
 padding: 0 5px;
 color: #999;
}
#footer ul li a{
 color: #999;
}

/* ----------------------------------------------------- MODAL */
#osx-modal-content, #osx-modal-data {display:none;}

/* Overlay */
#osx-overlay {background-color:#000; cursor:wait;}

/* Container */
#osx-container {background-color:#eee; color:#000; padding-bottom:4px; width:600px; overflow: auto; -moz-border-radius-bottomleft:6px; -webkit-border-bottom-left-radius:6px; -moz-border-radius-bottomright:6px; -webkit-border-bottom-right-radius:6px; border-radius:0 0 6px 6px; -moz-box-shadow:0 0 64px #000; -webkit-box-shadow:0 0 64px #000;}
#osx-container #osx-modal-title {
 color: #fff;
 background: #81b71a;
 background: rgba(129, 183, 26, 0.85);
 border-bottom:1px solid #ccc;
 font-weight:bold;
 padding:6px 8px;
}
#osx-container .close {display:none; position:absolute; right:0; top:0;}
#osx-container .close a {display:block; color:#777; font-weight:bold; padding:6px 12px 0; text-decoration:none; text-shadow:0 1px 0 #f4f4f4;}
#osx-container .close a:hover {color:#000;}
#osx-container #osx-modal-data {
 padding:6px 12px; 
 height: 500px;
 font-size: 1em;
}
#osx-container #osx-modal-data img{
 padding: 10px;
}
#osx-container #osx-modal-data ul{
 padding: 5px 5px 5px 20px;
 list-style: disc;
}
#osx-container h2 {margin:10px 0 6px;}
#osx-container span {color:#000;}

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

.clearfix {
display: inline-block;
}

/* Hides from IE-mac \*/ 
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* End hide from IE-mac */