/* CSS Grid Grundeinstellungen */

@charset "UTF-8";

html { height:100%; overflow-y:scroll; }
body { margin: 0; padding: 0 0 0 0; font-family: Tahoma, Geneva, sans-serif; font-size: 12px; line-height: 1.4em; color: #000; }
body { -webkit-text-size-adjust:none; }

/*body {background: #fff url(../_img/bg_body.jpg) bottom right no-repeat; background-size: cover; }*/
body {background:#fff url(../_img/bg_body_swim_2016.jpg) center bottom no-repeat fixed; background-size: cover; }

h1 { margin: 0; padding: 0 0 15px 0; color: #000; font-size: 14px; line-height: 22px; text-transform: uppercase; }
h2 { margin: 0 0 72px 0; padding: 0; color: #878787;  font-size: 22px; line-height: 34px; font-weight: 300; }
h3 { margin: 0 0 10px 0; color: #878787; font-size: 16px; line-height: 24px; font-weight: 700; text-transform: uppercase; }

p { margin: 0 0 1.4em 0; }
a { text-decoration: underline; color: #000; }
a:hover { text-decoration: none; }

ul { margin: 0 0 1.4em 20px; padding: 0 0 0 0; }
ol { margin: 0 0 0 0; padding: 0 0 0 0; }

form { background: #f2f2f2; margin: 0 0 1.4em 0; border-radius: 5px; padding: 10px; }
form.kategorie label { width: 130px; }
label { float:left; margin: 3px 0 3px 0; padding: 6px 0 6px; width: 140px; }

.sponsor { box-shadow: 10px 10px 20px rgba(32, 32, 32, 0.5); border-radius: 5px; height: 107px; background:#FFF; margin: 0 0 20px 0; padding: 15px 15px; position:relative; }
.sponsor.hide { visibility: hidden; }

input { margin: 3px 0 3px 0; width: 170px; padding: 6px 2% 6px; background: #fff; color: #000; border: none; border-radius: 4px; box-shadow: inset 0 1px 2px #aaa; }
input.plz { width: 40px; margin: 3px 5px 3px 0; }
input.ort { width: 105px; }
input.tag, input.monat { width: 20px; }
input.jahr { width: 40px; }

input:read-only, .input_readonly { background-color:#CCC;}

input.radio, input.checkbox { width: 20px; float:left; box-shadow: none; margin: 10px 0 0px 0; }
label.radio { width: auto; margin: 3px 10px 3px 0; }
label.checkbox { width: 300px; }

form.kategorie input.button { margin: 10px 0 3px 130px; }
input.button {  border: none; cursor: pointer; box-shadow: none; width: auto; padding: 6px 5% 6px; margin: 10px 0 3px 140px; box-shadow: 0 1px 1px #aaa;}
input.button.left { margin: 10px 0 3px 0;  background: #f2f2f2; }
a.button { border: none; cursor: pointer; box-shadow: none; width: auto; padding: 6px 5% 6px; margin: 10px 20px 3px 140px; box-shadow: 0 1px 1px #aaa; background:#FFF; border-radius: 4px; text-decoration: none; float:left; }
a.button.left { margin: 10px 20px 3px 0; background: #f2f2f2; }

textarea { margin: 3px 0 3px 0; min-height: 120px; padding: 11px 2% 14px; border: none; width: 47%; display: block; resize:none; font-family: 'Open Sans', sans-serif; font-size: 16px; line-height: 24px; font-weight: 300; background: #fff; color: #000; }
select {  margin: 3px 0 3px 0; padding: 6px 2% 6px; /*width: 187px;*/ width: 182px;  border: none; border-radius: 4px; box-shadow: inset 0 1px 2px #aaa; }

p.nichtbearbeitbar { float: left; width: 200px; margin: 3px 0 3px 0; padding: 6px 0 6px; }
p.info { float: right; width: 180px; margin: 3px 0 3px 0; padding: 6px 0 6px;}

.block { float: left; margin: 3px 0 3px 0; padding: 6px 0 6px; }
.block input.radio { width: 20px; float:left; box-shadow: none; margin: 0;  padding: 0; }
.block label.radio { width: auto; margin: 0; padding: 0; }

div { position: relative; }
*+html div { position: static; }
img { border: 0; height: auto; }
hr { margin: 0.7em 0 0.7em 0; border: 0 none; background-color: #b7b7b7; height: 1px; }

.clear { height: 0; clear: both; }
.error { color: #C00; }
input.error { background: #fbe2e3; color:#000; } 
.errormeldung { color: #C00; border-solid: 1px ; border: 1px dashed #C00; border-radius: 4px; padding: 10px; margin: 0 0 0 140px; }
.errormeldung.left { margin: 0; }
.infomeldung { color: #C90; border-solid: 1px ; border: 1px dashed #C90; border-radius: 4px; padding: 10px; margin: 0 0 0 0; }


table { background: #f2f2f2; margin: 0 0 1.4em 0; border-radius: 5px; padding: 10px; width: 500px; }
tr {}
td { min-width: 100px; vertical-align: top; padding: 2px 0; }
tr.linie td { border-bottom: solid 1px #CCC; }

table.bg_weiss { background: #fff; padding: 0px; }

#TeamBuilder { }
#TeamBuilder td { min-width: auto; padding: 2px 5px; vertical-align: middle; }
#TeamBuilder tr { }
#TeamBuilder tr.captain { background: rgba(0,0,0,0.1); padding: 5px; }
#TeamBuilder tr.captain td { padding: 5px; }
#TeamBuilder tr.mitglied { background: rgba(0,0,0,0.05); }

#TeamBuilder td.icons {}
#TeamBuilder td img.inaktiv { opacity: 0.6; }

.hinweis { background: #ffdddd; padding: 20px 15px 15px; border-radius: 0 0 5px 5px; margin: 10px -17px -14px; display: none; }
.hinweis .button { margin: 10px 0 3px 0; text-align: center; }
.hinweis .button.gruen { background: #1B7725; color: #fff; }

/* ------------------------------------------------------------------------ Content ---------------------------------------------------------------------------------- */

/* ------------------------------------------------------------------------------------------------------------------------------------------------------------------- */

.center { width: 880px; margin: 0 auto; /*background:#999;*/ }
#header { }
.header_bg { width: 100%; height: 50px; position: absolute; top: 0; background: #FFF; }
#main { z-index: 1; padding: 37px 0; }

.links { float: left; width: 150px; margin-right: 20px; min-height: 10px; }
.mitte { float: left; width: 540px; margin-right: 20px; }
.rechts { float: left; width: 150px; }
#logo { padding: 5px 20px 4px; background:#FFF; border-radius: 5px; box-shadow: 10px 10px 20px rgba(32, 32, 32, 0.5); }
#content { padding: 17px 20px; margin: 20px 0 0 0; background:#FFF; border-radius: 5px; box-shadow: 10px 10px 20px rgba(32, 32, 32, 0.5); }

ul.sprache { margin: 24px 0 0 170px; float:left; }
ul.sprache li { list-style: none; float: left; }
ul.sprache li a { list-style: none; text-decoration: none; margin: 0 10px 0 0; }
ul.sprache li a:hover { font-weight: bold; }
ul.sprache li.aktiv a { font-weight: bold; }

ul.social { padding: 10px 0 0 0; margin: 0; float:right; }
ul.social li { list-style: none; float: right; }
ul.social li a { list-style: none; margin: 0 0 0 12px; }
ul.social li a:hover { font-weight: bold; }
ul.social li.aktiv a { font-weight: bold; }

#mainnavi { text-align: center; }
#mainnavi ul { margin: 0 0 0 0; }
#mainnavi ul li { list-style: none; margin: 0 0 20px 0; }
#mainnavi ul li a { opacity: 0.75; text-decoration: none; display: block; color: #FFF; padding: 37px 10px; border-radius: 5px; box-shadow: 10px 10px 20px rgba(32, 32, 32, 0.5); text-transform: uppercase; font-size: 14px; font-weight: bold; }
#mainnavi ul li a:hover { opacity: 1.0; }
#mainnavi ul li.aktiv a { opacity: 1.0; }

#mainnavi ul li a.rot { background: #E2001A; }
#mainnavi ul li a.orange { background: #EC7404; }
#mainnavi ul li a.gelb { background: #F9B200; }
#mainnavi ul li a.gruen { background: #009036; }
#mainnavi ul li a.blau { background: #007BBE; }
#mainnavi ul li a.weiss { background: #fff; color: #000;  }
#mainnavi ul li a.schwarz { background: #000; }

#subnavi { background: #FFF; margin: 155px 0 0 0; border-radius: 5px; padding: 20px 15px; box-shadow: 10px 10px 20px rgba(32, 32, 32, 0.5); }
#subnavi ul { margin: 0 0 0 0;  }
#subnavi ul li { list-style: none; margin-bottom: 10px; }
#subnavi ul li a { display: block; padding: 0; text-decoration: none }
#subnavi ul li a:hover { text-decoration: underline; }
#subnavi ul li.aktiv a { text-decoration: underline;  }
#subnavi ul li.inaktiv a { color: #ccc; }
#subnavi ul li.inaktiv a:hover { text-decoration: none; }

#subnavi ul li.home { padding: 0 0 0 20px; background:url(../_img/icon_home.png) no-repeat left 1px; background-size: 15px; } 
#subnavi ul li.logout { padding: 0 0 15px 20px; margin-bottom: 15px; border-bottom: solid 1px #CCC; background:url(../_img/icon_logout.png) no-repeat left 1px; background-size: 15px; } 

#footer { background: #FFF; width: 100%; position: fixed; bottom: 0; padding: 20px 0; }

.iconbox { float:right; width: 60px; padding: 5px 0 0 0; }
.infobox { float:left; width: 25px; }
.button_klein { /* box-shadow: 0 1px 1px #aaa; background: #FFF;*/ border-radius: 4px; float:right; margin: 0 0 0 0; }
.button_klein a { display:block; }

.button_gross { box-shadow: 0 1px 1px #aaa; font-size: 11px; background: #FFF; border-radius: 4px; float:left; margin: 3px 20px 0 0; text-align: center; padding: 5px; cursor: pointer; width: 109px; }
.button_gross:hover { background: #fafafa; }

.button_gross.inaktiv { opacity: 0.2; cursor: default; }

table .iconbox { position: absolute; right: 30px; padding: 0 0 0 0; }
table .button_klein { box-shadow: 0 1px 1px #aaa; background: #FFF; padding: 2px; }
table input.button {  margin: 10px 10px 3px 0; float:left;}

.kategorieicon { width: 140px; float:left; text-align:center; }
.kategorieicon img { margin: 10px 15px 1.4em 0; }

.memberanzahl { font-size: 20px; color: #b7b7b7; }
.inaktiv { color: #bbb; }
.abgelehnt { color: #C00; text-decoration: line-through; }

.rot { color: #E2001A; }
.orange { color: #EC7404; }
.gelb { color: #F9B200; }
.gruen { color: #009036; }
.blau { color: #007BBE; }
.weiss { color: #fff;  }
.schwarz { color: #000; }

.bg_rot { background: #E2001A; }
.bg_orange { background: #EC7404; }
.bg_gelb { background: #F9B200; }
.bg_gruen { background: #009036; }
.bg_blau { background: #007BBE; }
.bg_schwarz { background: #007BBE; }
.bg_weiss { background: #fff; color:#000;}
.bg_weiss a { color:#000;}
.bg_schwarz { background: #000; }


@media print { 
body { width: 100%; }
.links, .rechts, ul.sprache, ul.social, .button { display: none; }
.mitte { width: 70%; }
#logo, #content { box-shadow: none; }
}