/*
         ============================================
         ibesucher.com CSS
         Gestalung & Umsetzung: Bannerexpress.de
         ============================================
         Grundfarben: #fae45c (Gelb), #6db784 (Grün), #99d4d2 (Mint), #052a57 (Blau dunkel), #1b4d8a (Blau hell)
*/

/* Links */
a:link, a:visited {
         text-align: left;
         font-size: 1.0em;
         color: #202279;
         font-weight: normal;
         text-decoration:underline;
}

a:hover {
         font-weight: normal;
         color: #4e2795;
         text-decoration:none;
}

a.button:link, a.button:visited {
         display: inline-block;

         background-color: #6db781;
         background-image: url(../images/icons_button_2.png), url(../images/button_bg.png);
         background-position: left center;
         background-repeat: no-repeat, repeat-x;
         background-size: 50px, auto;

         line-height: 40px;
         text-align: left;
         font-size: 1.2em;
         font-weight: bold;
         text-shadow: 1px 1px 0px rgba(0,0,0,0.2);

         color: #FFFFFF;

         padding: 5px 25px 5px 45px;
         margin: 5px 0px 5px 0px;
         text-decoration:none;

         -webkit-border-radius: 50px;
         -moz-border-radius: 50px;
         border-radius: 50px;

         transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
}
a.button:hover {
         background-color: #173d7a;
         background-image: url(../images/icons_button_3.png), url(../images/button_bg.png);

         text-shadow: 1px 1px 0px rgba(0,0,0,0.2);
         font-weight: bold;
         color: #FFFFFF !important;
}


/* Überschriften */
h1 {
         font-family: 'Roboto';
         font-size: 2.2em;
         font-weight: bold;
         text-align: left;
         color: #052a57;
         margin: 0px 0px 5px 0px;
         padding: 0px 0px 0px 0px;
         vertical-align:top;
}

h2 {
         font-family: 'Roboto';
         font-size: 1.6em;
         font-weight: bold;
         text-align:left;
         color:#052a57;
         margin: 0px 0px 5px 0px;
         padding: 0px 0px 0px 0px;
         vertical-align:top;
         text-decoration:none;

}

h3 {
         display: block;
         font-family: 'Roboto';
         font-size: 1.4em;
         font-weight: bold;
         text-align:left;
         color:#1b4d8a;

         margin: 5px 0px 5px 0px;
         padding: 0px 0px 0px 0px;
         vertical-align:top;
}

h3 a {
         display: inline-block;
         float: right;
         padding: 2px 5px 2px 5px;

         font-size: 0.8em !important;
         font-weight: normal !important;
         color: #FFFFFF !important;
         text-decoration: none !important;

        background: #282c34;
        background: -moz-linear-gradient(top,  #282c34 0%, #4c5467 100%);
        background: -webkit-linear-gradient(top,  #282c34 0%,#4c5467 100%);
        background: linear-gradient(to bottom,  #282c34 0%,#4c5467 100%);
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#282c34', endColorstr='#4c5467',GradientType=0 );

         -webkit-border-radius: 3px;
        -moz-border-radius: 3px;
        border-radius: 3px;
}

h3 a:hover {
        -webkit-box-shadow: inset 0px 0px 10px 0px rgba(255,255,255,0.25);
        -moz-box-shadow: inset 0px 0px 10px 0px rgba(255,255,255,0.25);
        box-shadow: inset 0px 0px 10px 0px rgba(255,255,255,0.25);
}

h4 {
         font-family: 'Roboto';
         font-size: 1.3em;
         font-weight: bold;
         text-align:left;
         vertical-align:top;
         color:#6db784;

         margin: 0px 0px 0px 0px;
         padding: 5px 10px 5px 10px;

         background: #efefef;
         text-shadow: 1px 1px 0px rgba(255,255,255,0.2);
         border-top: 2px #b50000 solid;
}

* {
         -webkit-text-size-adjust: none;
         -moz-text-size-adjust: none;
         -webkit-text-size-adjust: none;
         -ms-text-size-adjust: none;
         font-size-adjust: none;
         size-adjust: 100%;
}


/* Standarts */
body {
         font-size: 1.0em;
         font-size: 15px;
         vertical-align:top;
         text-align:left;
         width: 100%;
         height: 100%;
         margin: 0;
         padding: 0;
         min-width: 800px;
}

body, tr, td, div {
         font-family: 'Roboto';
         color: #052a57;
         vertical-align:top;
         text-align:left;
}

img              { border: 0px; }
.clear           { clear:both; line-height:0.0em; height: 0px; display: block; background-color: #FFDF00; }
.block           { display: block !important; }
.upper           { text-transform: uppercase; }
.pad             { padding: 10px; }
.pad_l           { padding-left: 10px; }
.pad_top         { padding: 20px 0px; }
.pad_r           { padding-right: 10px; }
.pad_big         { padding: 20px; }
.no_pad          { padding: 0px !important; }
.round           { -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; }
.a_left          { text-align: left; }
.a_center        { text-align: center !important; }
.a_right         { text-align: right; }

.f_l             { float:left; }
.f_r             { float:right; }

.w66             { float: left; width: 66%; }
.w50             { float: left; width: 50%; }
.w40             { float: left; width: 40%; }
.w33             { float: left; width: calc(100% / 3); }
.w25             { float: left; width: 25%; }

.bg0 { background-color: #FFFFFF; }
.bg1 { background-color: #d9e6e6; }
.bg2 { background-color: #6db784; }
.bg3 { background-color: #99d4d2; }
.bg3d { background-color: #6db7af; }
.bg4 { background-color: #6d95b7; }
.bg5 { background-color: #1b4d8a; }
.bg5d { background-color: #173d7a; }

.bg_verlauf_1 {
         background: #1b4d8a;
         background: -moz-linear-gradient(top,  #1b4d8a 0%, #99d4d2 100%);
         background: -webkit-linear-gradient(top,  #1b4d8a 0%,#99d4d2 100%);
         background: linear-gradient(to bottom,  #1b4d8a 0%,#99d4d2 100%);
         filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1b4d8a', endColorstr='#99d4d2',GradientType=0 );
}

.bg_verlauf_2 {
         background: #6db7af;
         background: -moz-linear-gradient(top,  #6db7af 0%, #6db784 100%);
         background: -webkit-linear-gradient(top,  #6db7af 0%,#6db784 100%);
         background: linear-gradient(to bottom,  #6db7af 0%,#6db784 100%);
         filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6db7af', endColorstr='#6db784',GradientType=0 );
}


/* Seite */
#wrapper {
         background-color: #d5ecec;
         width: 100%;
         margin: 0px;
         padding: 0px;
}

#wrapper.startseite {
         background: #FFFFFF url(../images/bg_header_start.png) center -50px no-repeat;
         background-size: 2560px;
}

.in {
         width: calc(100% - 40px);
         max-width: 1200px;
         min-width: 760px;
         margin: 0px auto;
}

#design_header {
         width: calc(100% - 0px);
         height: 100px;
         margin: 0px auto;
         padding: 25px 0px 10px 0px;
}

#design_header .in {
         width: calc(100% - 0px) !important;
         max-width: calc(1200px - 20px);

         height: 100px;
         background:transparent url(../images/header_bg_w.png) left center repeat-x;
         padding: 0px 10px;
         -webkit-border-radius: 10px;
         -moz-border-radius: 10px;
         border-radius: 10px;
         border: px #000 solid;

         -webkit-box-shadow: 0px 0px 30px 0px rgba(71,124,122,0.7);
         -moz-box-shadow: 0px 0px 30px 0px rgba(71,124,122,0.7);
         box-shadow: 0px 0px 30px 0px rgba(71,124,122,0.7);
}

#design_header .design_logo {
         float:left;
         width: 380px;
         height: 100px;
         margin: 0px 0px 0px 0px;
         padding: 0px 0px 0px 0px;
         text-align: left;
}
#design_header .design_logo img.a {
         display: inline-block;
         width: auto;
         padding: 0;
         height: 100%;
}
#design_header .design_logo img.b {
         display: none;
         width: auto;
         padding: 0;
         height: 75px;
}

#design_header .design_header_end {
         float: left;
         width: 15px;
         height: 100px;
         background:transparent url(../images/header_end.png) left center no-repeat;
}

#design_header .design_menu {
         float: left;
         width: calc(100% - 380px - 15px - 65px);
         height: 100px;
         background:transparent url(../images/header_bg_b.png) left center repeat-x;

         margin: 0px 0px 0px 0px;
         padding: 0px 0px 0px 0px;
         text-align: center;
}

#design_header .design_menu a {
         display: inline-block;

         background-color: #ffffff;
         background-image: url(../images/icons_button_1.png), url(../images/button_bg.png);
         background-position: left center;
         background-repeat: no-repeat, repeat-x;
         background-size: 50px, auto;

         line-height: 40px;

         margin: 30px 4px 0px 4px;
         padding: 0px 20px 0px 40px;

         font-size: 1.2em;
         font-weight: 500;
         color: #6db784;
         text-decoration: none;

         -webkit-border-radius: 25px;
         -moz-border-radius: 25px;
         border-radius: 25px;

         -webkit-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.3);
         -moz-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.3);
         box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.3);

         transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
}

#design_header .design_menu a.active, #design_header .design_menu a:hover {
         background-color: rgb(250,228,92);
         color: #1b4d8a;
}

#design_header .design_menu a.active:hover {
         background-color: #ffffff;
         color: #6db784;
}

#design_header .design_login {
         float: left;
         width: 60px;
         height: 100px;

         margin: 0px 0px 0px 0px;
         padding: 0px 0px 0px 5px;
         text-align: center;
}

#design_header .design_login a {
         display: inline-block;
         background: #6db784 url(../images/icons_user.png) center center no-repeat;
         background-size: 40px;
         width: 32px;
         height: 32px;

         margin: 24px 0px 24px 0px;
         padding: 10px;

         -webkit-border-radius: 50%;
         -moz-border-radius: 50%;
         border-radius: 50%;

         transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out;
}
#design_header .design_login a:hover { background-color: #477c7a; }

#design_header .design_lang {
         display: inline-block;
         float: right;
         width: auto;

         background:#FFFFFF url(../images/button_bg.png) center top repeat-x;
         padding: 5px 6px 0px 6px;
         margin: 0px;

         -webkit-border-bottom-right-radius: 10px;
         -webkit-border-bottom-left-radius: 10px;
         -moz-border-radius-bottomright: 10px;
         -moz-border-radius-bottomleft: 10px;
         border-bottom-right-radius: 10px;
         border-bottom-left-radius: 10px;

         -webkit-box-shadow: 0px 10px 10px -10px rgba(0,0,0,0.3);
         -moz-box-shadow: 0px 10px 10px -10px rgba(0,0,0,0.3);
         box-shadow: 0px 10px 10px -10px rgba(0,0,0,0.3);

         opacity: 0.5;
         transition: opacity 0.3s ease-in-out;
}
#design_header .design_lang:hover { opacity: 1.0 !important; }

#design_header .design_lang img {
         width: 30px;
         padding: 0;
         margin: 0px 2px;
         height: auto;
         /*filter: grayscale(1.0);  */
         opacity: 0.75;
         transition: opacity 0.3s ease-in-out;
}
#design_header .design_lang img:hover { /*filter: grayscale(0.0);*/ opacity: 1.0; }


/* SPLASH */
#splash_hero { margin-bottom: 50px; }
#splash_hero .in { display: table; width: 100%; border: 0px #000000 solid; }
#splash_hero .splash_hero_text { display: table-cell; width: 500px; border: 0px #000000 solid; vertical-align: middle; font-size: 1.2em; color: #FFFFFF;  }
#splash_hero .splash_hero_spacer { display: table-cell; width: 100px; }
#splash_hero .splash_hero_text a.button { font-size: 1.3em; background-color: #fae45c; color: #1b4d8a; padding: 5px 25px 5px 45px; -webkit-box-shadow: 0px 10px 10px -10px rgba(0,0,0,0.5); -moz-box-shadow: 0px 10px 10px -10px rgba(0,0,0,0.5); box-shadow: 0px 10px 10px -10px rgba(0,0,0,0.5); text-shadow: 1px 1px 0px rgba(255,255,255,0.5); }
#splash_hero .splash_hero_text a.button:hover { background-color: #1b4d8a; color: #FFFFFF; text-shadow: 1px 1px 0px rgba(0,0,0,0.5); }
#splash_hero .splash_hero_text h1 { background-color: #6db784; display: inline; color: #FFFFFF; font-weight: 900; margin-bottom: 10px; }

#splash_hero .splash_hero_image { display: table-cell; width: calc(100% - 100px - 500px); vertical-align: middle; text-align: right; }
#splash_hero .splash_hero_image img { display: inline-block; width: 100%; max-width: 600px; height: auto; }



/* Seite */
#design_site {
         margin: 0px auto 20px auto;
         padding: 20px 0px;
         min-height: 250px;
         font-size: 1.0em;
}

#design_site .no_pad { padding: 0px 0px !important; width: calc(100% - 0px) !important; }

#design_site .design_sidebar_left, #design_site .design_sidebar_right {
         float: left;
         width: 200px;
}

#design_site .design_content {
         float: left;
         width: calc(100% - 200px - 200px - 40px);
         margin: 0px 20px;
}


/* Footer */
#design_footer {
         width: calc(100% - 0px);
         padding: 20px 0px 20px 0px;
         margin-top: 0px;
         background: #fbe35c;

         text-align:left;
         vertical-align:top;

         color: #FFFFFF;
         font-size: 1.0em;
         font-weight: normal;

         -webkit-box-shadow: inset 0px 6px 10px -10px rgba(0,0,0,0.5);
         -moz-box-shadow: inset 0px 6px 10px -10px rgba(0,0,0,0.5);
         box-shadow: inset 0px 6px 10px -10px rgba(0,0,0,0.5);
}

#design_footer b {
         display: inline-block;
         padding: 5px 10px;
         background-color: #1b4d8a;

         color: #FFFFFF;
         font-size: 0.8em;
         font-weight: normal;

         -webkit-box-shadow: inset 0px 0px 10px 0px rgba(0,0,0,0.25);
         -moz-box-shadow: inset 0px 0px 10px 0px rgba(0,0,0,0.25);
         box-shadow: inset 0px 0px 10px 0px rgba(0,0,0,0.25);

         -webkit-border-radius: 20px;
         -moz-border-radius: 20px;
         border-radius: 20px;
}

#design_footer .in a, #design_footer .in a:link, #design_footer .in a:visited {
         padding: 0px 5px;
         color: #1b4d8a;
         font-size: 1.0em;
         font-weight: normal;

         text-decoration: none;
         overflow: hidden;
}

#design_footer .in a:hover { color: #000000 }


/* Boxen */
.box {
         display: block;
         width: calc(100% - 20px);
         background: #FFFFFF;
         padding: 10px;
         margin-bottom: 15px;

         -webkit-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.15), inset 0px 0px 10px 0px rgba(0,0,0,0.15);
         -moz-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.15), inset 0px 0px 10px 0px rgba(0,0,0,0.15);
         box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.15), inset 0px 0px 10px 0px rgba(0,0,0,0.15);

         -webkit-border-radius: 10px;
         -moz-border-radius: 10px;
         border-radius: 10px;
         text-shadow: rgba(0,0,0,0.1) 1px 1px 0px;
}
.box.no_pad { padding: 0px !important; width: calc(100% - 0px); }
.box.green {
         background-color: #6db784;
         color: #FFFFFF;
         -webkit-box-shadow: 0px 15px 10px -10px rgba(0,0,0,0.25), inset 0px 0px 10px 0px rgba(0,0,0,0.25);
         -moz-box-shadow: 0px 15px 10px -10px rgba(0,0,0,0.25), inset 0px 0px 10px 0px rgba(0,0,0,0.25);
         box-shadow: 0px 15px 10px -10px rgba(0,0,0,0.25), inset 0px 0px 10px 0px rgba(0,0,0,0.25);
}

.box_head {
         display: block;
         width: calc(100% + 0px);

         font-family: 'Roboto';
         font-size: 1.0em;
         font-weight: 500;
         text-align:left;
         vertical-align:top;
         color:#FFFFFF;
         text-shadow: rgba(0,0,0,0.3) 1px 1px 1px;

         margin: -10px 0px 10px -10px;
         padding: 7px 10px 5px 10px;

         background-color: #1b4d8a;
         background-image: url(../images/button_bg.png);
         background-position: bottom center;
         background-repeat:  repeat-x;

         -webkit-border-top-left-radius: 10px;
         -webkit-border-top-right-radius: 10px;
         -moz-border-radius-topleft: 10px;
         -moz-border-radius-topright: 10px;
         border-top-left-radius: 10px;
         border-top-right-radius: 10px;
}

.box.green .box_head { background-color: #5baf75; }
.box .box_head.green { background-color: #5baf75; }

div[class^="design_sidebar"] .box a {
         display: block;
         width: calc(100% - 10px);
         padding: 3px 4px 3px 6px;
         margin: 1px 0px;

         line-height: 1.1em;
         text-transform: none;
         text-decoration: none;
         color: #1b4d8a;

         background: #EFEFEF;
         border-left: 2px #1b4d8a solid;

         -webkit-box-shadow: inset 0px 25px 10px -10px rgba(255,255,255,0.1);
         -moz-box-shadow: inset 0px 25px 10px -10px rgba(255,255,255,0.1);
         box-shadow: inset 0px 25px 10px -10px rgba(255,255,255,0.1);

         transition: background-color 0.3s ease-in-out;
}
div[class^="design_sidebar"] .box a:hover { background: #fbe35c; color: #000000; }

div[class^="design_sidebar"] .box.green a { background: rgba(255,255,255,0.1); border-left: 2px #ffffff solid; color: #FFFFFF; }
div[class^="design_sidebar"] .box.green a:hover { background: #fbe35c; color: #000000; }


#login_box {
         position: absolute;
         z-index: 1000;
         left: calc(50% - 220px);
         top: calc(30% - 100px);

         display: none;
         width: 400px;
         padding: 20px;
         margin: 0px auto;

         -webkit-box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.5);
         -moz-box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.5);
         box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.5);
}

#login_box b {
         color: #FFFFFF;
         font-size: 2.0em;
         font-weight: 900;
         display: block;
         text-align: center;
}

#login_box form { max-width: 300px; margin: 10px auto; }
#login_box form, #login_box fieldset { border: 0px; }
#login_box input { width: calc(100% - 12px); }
#login_box input[type="submit"] { width: calc(100% - 0px); padding: 3px 0px !important; }


/* startseite */
#design_startseite {}
#design_startseite h2 { font-size: 1.6em; }

#design_startseite .box4er .item {
         float: left;
         display: block;
         width: calc((100% / 4) - 60px);

         padding: 20px;
         margin: 20px 10px;

         color: #FFFFFF;
         font-size: 1.0em;
         text-align: center;
}
#design_startseite .box4er .item .wave {
         position: relative;
         display: block;
         width: calc(100% + 40px);
         top: -20px;
         left: -20px;
         background: transparent url(../images/wave.png) bottom center no-repeat;
         background-size: 100%;
         -webkit-border-top-left-radius: 10px;
         -webkit-border-top-right-radius: 10px;
         -moz-border-radius-topleft: 10px;
         -moz-border-radius-topright: 10px;
         border-top-left-radius: 10px;
         border-top-right-radius: 10px;
         text-align: center;
         padding-top: 10px;
}
#design_startseite .box4er .item b { font-size: 1.6em; line-height: 1.0em; display: block; text-align: center; margin-bottom: 20px; }

#design_startseite .w50.f_r { padding-top: 50px; }

#design_startseite .padtotop {
         margin-top: -130px;
         padding-top: 150px;
         padding-bottom: 50px;
}
#design_startseite .box.green { width: calc(100% - 40px); padding: 20px; }

#design_startseite .features {
         display: block;
         margin: 0px;
         padding: 25px 0px 35px 0px;
         background-color: #99d4d2;
}
#design_startseite .features .w50.f_r { padding-top: 0px; }
#design_startseite .features h3 {
         display: inline-block;
         font-size: 2.2em;
         color: #FFFFFF;
         text-align: center;

         margin-top: -60px;
         padding: 10px 20px;
         line-height: 30px;
         background-color: #6db784;
}

#design_startseite .features li {
         list-style: none;
         background: transparent url(../images/icons_dot.png) left center no-repeat;
         background-size: 30px;
         padding: 15px 10px 15px 50px;
         margin: 5px 10px;

         border-bottom: 4px #FFFFFF dotted;

         color: #1b4d8a;
         font-size: 1.2em;
         text-align: left;
         font-weight: bold;
}
#design_startseite .features li:last-child { border-bottom: 0px #FFFFFF dotted; }



/* Formulare Sumbit + Button */
input[type="text"], input[type="password"] {
         display: inline-block;

         font-family: 'Roboto';
         text-align: left;
         font-size: 1.0em;
         font-weight: normal;
         text-shadow: rgba(0,0,0,0.2) 1px 1px 1px;
         color: #000000;

         padding: 3px 6px 3px 6px;
         margin: 2px 0px;

         text-decoration:none;
         text-transform: uppercase;

         background: #FFFFFF;

         border: 1px #052a57 solid;
         -webkit-border-radius: 3px;
         -moz-border-radius: 3px;
         border-radius: 3px;
}

input[type="submit"], button[type="submit"] {
         display: inline-block;
         cursor: pointer;

         font-family: 'Roboto';
         text-align: center;
         font-size: 1.1em;
         font-weight: normal;
         text-shadow: rgba(0,0,0,0.2) 1px 1px 1px;
         color: #ffffff;

         padding: 5px 20px 5px 20px;
         margin: 2px 0px;

         text-decoration:none;
         text-transform: uppercase;

         background: #1b4d8a;

         border: 0px transparent solid;
         -webkit-border-radius: 30px;
         -moz-border-radius: 30px;
         border-radius: 30px;
}
input[type="submit"]:hover, button[type="submit"]:hover {
         background: #fae45c;
         color: #000000;
}

/* Schatten */
#shadow {
         display: none;
         position: fixed;
         top: 0px;
         left: 0px;
         right: 0px;
         bottom: 0px;

         z-index: 999;
         background-color: rgba(0,0,0, 0.5);
         width: 100%;
         height: 100%;
         cursor: pointer;
}

#w {
        position: absolute; z-index: 20000; display: none; bottom: 0px; left: 0px; background: #000000; color: #FFFFFF; padding: 10px;
}