/* =============================================================================
   HTML5 element display
   ========================================================================== */

article, aside, details, figcaption, figure, footer, header, hgroup, nav, section {
    display: block;
}

audio[controls], canvas, video {
    display: inline-block;
    *display: inline;
    *zoom: 1;
}

html {
    font-size: 100%;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    -webkit-text-size-adjust: none;
    -ms-text-size-adjust: none;
}

body {
    margin: 0;
    font-size: 13px;
    line-height: 1.231;
}

body, button, input, select, textarea {
    font-family: sans-serif;
    color: #222;
}

::-moz-selection {
    background: #fe57a1;
    color: #fff;
    text-shadow: none;
}

::selection {
    background: #fe57a1;
    color: #fff;
    text-shadow: none;
}

a {
    text-decoration: none;
    color: #ffb400;
}

/*a:visited { color: #551a8b; }*/
a:focus {
    outline: thin dotted;
}

a:hover, a:active {
    outline: 0;
}

abbr[title] {
    border-bottom: 1px dotted;
}

b, strong {
    font-weight: bold;
}

blockquote {
    margin: 1em 40px;
}

dfn {
    font-style: italic;
}

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

ins {
    background: #ff9;
    color: #000;
    text-decoration: none;
}

mark {
    background: #ff0;
    color: #000;
    font-style: italic;
    font-weight: bold;
}

pre, code, kbd, samp {
    font-family: monospace, monospace;
    _font-family: 'courier new', monospace;
    font-size: 1em;
}

pre {
    white-space: pre;
    white-space: pre-wrap;
    word-wrap: break-word;
}

q {
    quotes: none;
}

q:before, q:after {
    content: "";
    content: none;
}

small {
    font-size: 85%;
}

sub, sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
}

sup {
    top: -0.5em;
}

sub {
    bottom: -0.25em;
}

ul, ol {
    margin: 1em 0;
    padding: 0 0 0 40px;
    display: inline-block;
}

dd {
    margin: 0 0 0 40px;
}

nav ul, nav ol {
    list-style: none;
    margin: 0;
    padding: 0;
}

img {
    border: 0;
    -ms-interpolation-mode: bicubic;
}

svg:not(:root) {
    overflow: hidden;
}

figure {
    margin: 0;
}

figure, figcaption {
    display: block;
}

form {
    margin: 0;
}

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

legend {
    border: 0;
    *margin-left: -7px;
    padding: 0;
}

label {
    cursor: pointer;
}

button, input, select, textarea {
    font-size: 100%;
    margin: 0;
    vertical-align: baseline;
    *vertical-align: middle;
}

button, input {
    line-height: normal;
    *overflow: visible;
}

button, input[type="button"], input[type="reset"], input[type="submit"] {
    cursor: pointer;
    -webkit-appearance: button;
}

input[type="checkbox"], input[type="radio"] {
    box-sizing: border-box;
}

input[type="search"] {
    -moz-box-sizing: content-box;
    -webkit-box-sizing: content-box;
    box-sizing: content-box;
}

button::-moz-focus-inner, input::-moz-focus-inner {
    border: 0;
    padding: 0;
}

textarea {
    overflow: auto;
    vertical-align: top;
}

input:valid, textarea:valid {
}

input:invalid, textarea:invalid {
    background-color: #f0dddd;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

div.layout-978 {
    width: 978px;
    margin: 0px auto;
}

.fullpage.layout-978 {
    padding: 12px;
    background: #fff;
    -webkit-box-shadow: 0 0 15px #000;
    -moz-box-shadow: 0 0 15px #000;
    box-shadow: 0 0 15px #000;
}

.galerie .fullpage.layout-978 {
    background: none;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
}

.galerie h2 {
    font-size: 26px;
    background: #000;
    color: orange;
    width: 120px;
    text-align: center;
    padding: 4px;
    margin: 40px 0 0 0;
}

div.row {
    height: 1%;
}

div.row-end {
    clear: both;
    font: 1px/1px sans-serif;
    height: 1px;
    overflow: hidden;
}

div.col1, div.col2, div.col3, div.col4, div.col5, div.col6, div.col7, div.col8, div.col9, div.col10, div.col11, div.col12 {
    float: left;
    margin-left: 30px;
}

div.col1:first-child, div.col2:first-child, div.col3:first-child, div.col4:first-child, div.col5:first-child, div.col6:first-child, div.col7:first-child, div.col8:first-child, div.col9:first-child, div.col10:first-child, div.col11:first-child, div.col12:first-child {
    margin-left: 0px;
}

div.col1 {
    width: 54px;
}

div.col2 {
    width: 138px;
}

div.col3 {
    width: 222px;
}

div.col4 {
    width: 306px;
}

div.col5 {
    width: 390px;
}

div.col6 {
    width: 474px;
}

div.col7 {
    width: 558px;
}

div.col8 {
    width: 642px;
}

div.col9 {
    width: 726px;
}

div.col10 {
    width: 810px;
}

div.col11 {
    width: 894px;
}

div.col12 {
    width: 978px;
}

/* =============================================================================
   Primary styles
   Author: SÜTTI it.design
   ========================================================================== */

body {
    background: transparent url(../img/wood-bg.jpg) repeat 0 0;
}

body.galerie {
    background-attachment: fixed;
}

/* ==================
   Top
   ================== */

/* Logo */

#logo {
    float: left;
    color: #bbb;
    padding-top: 14px;
    font-size: 16px;
}

/* 1. Ebene Topmenu */

#topmenu_wrapper {
    background: url(../img/top-bg.png) repeat-x 0 0;
    height: 50px;
    position: relative;
    z-index: 1002;
    top: 0px;
    left: 0px;
    width: 100%;
    -webkit-box-shadow: 5px 0 10px #000;
    -moz-box-shadow: 5px 0 10px #000;
    box-shadow: 5px 0 10px #000;
}

.galerie #topmenu_wrapper {
    position: fixed;
}

#topmenu_inner {
    position: relative;
    margin: 0 auto;
    height: 50px;
}

#topmenu a {
    text-decoration: none;
}

#topmenu ul {
    display: block;
}

#topmenu ul li ul {
    display: none;
}

nav#topmenu {
    position: absolute;
    right: 0px;
    width: 600px;
    float: right;
}

nav#topmenu > ul > li {
    width: 114px;
    height: 122px;
    margin-top: -20px;
    text-align: center;
    float: right;
    background: url(../img/topmenu_list_bg.png) 0px 0px no-repeat;
}

nav#topmenu > ul > li:hover {
    margin-top: -10px;
}

nav#topmenu > ul > li:hover a {
    color: white;
}

nav#topmenu > ul > li > a {
    height: 36px;
    line-height: 90px;
    font-size: 20px;
    font-family: 'Lobster', cursive, arial, serif;
    color: #ffb400;
    margin: 0 2px 0 -1px;
    padding: 14px 18px;
    font-weight: lighter;
    display: block;
}

/* 2.Ebene Topmenu */

nav#topmenu ul ul {
    background: url(../img/submenu_bg.png) bottom left no-repeat;
}

nav#topmenu ul li ul {
    display: none;
    position: absolute;
    margin: 20px 0 0 -63px;
    padding: 30px 20px 25px 25px;
    width: 218px;
    height: 269px;
    list-style: none;
    zoom: 1;
    z-index: 1003;
    text-align: left;
}

nav#topmenu ul li:hover ul {
    display: block;
}

nav#topmenu ul li ul li:hover {
    background: #31160d;
}

nav#topmenu ul li ul li {
    padding: 0 15px 0 10px;
}

nav#topmenu ul li ul li {
    height: 35px;
    width: 165px;
    line-height: 35px;
    float: none;
}

nav#topmenu ul li ul li a {
    color: #CCC;
    font-family: 'Oswald', arial, serif;
    text-transform: uppercase;
}

/* 3.Ebene Topmenu */

nav#topmenu ul li ul li ul {
    display: none !important;
    background: #000;
    margin: -41px 0 0 -180px;
    padding: 5px;
    height: auto;
    width: 160px;
    border: 1px solid #FFF;
}

nav#topmenu ul li ul li:hover ul {
    display: block !important;
    z-index: 0;
}

nav#topmenu ul li ul li ul li {
    width: 135px;
}

nav#topmenu ul li ul li ul li a {
    height: 100%;
    display: block;
}

/* ==================
   Login
   ================== */

input, textarea {
    padding: 9px;
    border: solid 1px #E5E5E5;
    outline: 0;
    font: normal 13px/100% Verdana, Tahoma, sans-serif;
    width: 200px;
    background: #FFFFFF url('bg_form.png') left top repeat-x;
    background: -webkit-gradient(linear, left top, left 25, from(#FFFFFF), color-stop(4%, #EEEEEE), to(#FFFFFF));
    background: -moz-linear-gradient(top, #FFFFFF, #EEEEEE 1px, #FFFFFF 25px);
    box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 8px;
    -moz-box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 8px;
    -webkit-box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 8px;
}

input:hover, textarea:hover,
input:focus, textarea:focus {
    border-color: #C9C9C9;
    -webkit-box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 8px;
}

p.error {
    position: absolute;
    max-width: 900px;
    z-index: 10;
    line-height: 1.0em;
    margin: -69px 0 0 30px;
    font-weight: bold;
    border: 1px solid #333;
    padding: 15px;
    color: black;
    background: #F3961C;
    background: -webkit-gradient(linear, 0 0, 0 100%, from(#F9D835), to(#F3961C));
    background: -moz-linear-gradient(#F9D835, #F3961C);
    background: -o-linear-gradient(#F9D835, #F3961C);
    background: linear-gradient(#F9D835, #F3961C);
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
}

p.error::after {
    content: "";
    position: absolute;
    bottom: -15px;
    left: 50px;
    border-width: 15px 15px 0;
    border-style: solid;
    border-color: #F3961C transparent;
    display: block;
    width: 0;
}

.updprof-error .error {
    color: red;
}

div.loginFP {
    padding: 20px;
    margin: 0 auto;
    width: 300px;
    background: #FFF;
}

.register label, div.loginFP label, .update-profile label {
    display: inline-block;
    width: 100px;
}

.register input {
    width: 92%;
}

div.register {
    background: #FFF;
}

div.register label {
    width: 200px;
}

#login_wrapper {
    margin: 20px 0 0 0px;
}

#login_wrapper input {
    width: 230px;
}

#login_wrapper input[type="submit"] {
    width: 100px;
    height: auto;
    line-height: 20px;
}

.loginLogin {
    margin-left: 30px;
}

.loginLogin form {
    margin-top: 35px;
}

.loginLogin .links {
    margin-top: 4px;
}

.loginLogin .links a {
    color: #888;
}

.loginLogin .links a:hover {
    color: #444;
}

.loginLogin .greeting {
    margin: 0;
    padding: 0;
    text-transform: capitalize;
    font-size: 22px;
}

.loginLogin .lastLogin {
    margin: 4px 0 0 0;
    font-size: 0.9em;
    color: #444;
    padding: 0;
}

.loginLogin a.btn {
    float: left;
    margin: 0px 6px 0 0;
    width: 50px;
}

/* ==================
   Galerie
   ================== */
.galpic {
    position: relative;
    width: 222px;
    margin: 30px 0 0 30px;
    height: 140px;
    float: left;
}

.galpic.first {
    margin-left: 0;
}

.picCounter {
    position: absolute;
    right: -10px;
    top: -10px;
    display: block;
    background: #222;
    border: 3px solid #FFF;
    color: #FFB400;
    padding: 2px;
    font-weight: bold;
    border-radius: 25px;
    line-height: 24px;
    text-align: center;
    width: 24px;
}

.galtitle {
    position: absolute;
    bottom: -5px;
    left: 5px;
    width: 208px;
    background: #000;
    background: rgba(0, 0, 0, 0.8);
    color: #FFB400;
    font-weight: normal;
    padding: 2px;
    display: block;
}

/* ==================
   Header
   ================== */

header {
    margin-top: 0px;
    height: 462px;
    background: url(../img/leather_bg.png) repeat-x 0 0;
}

header .inner {
    height: 462px;
    width: 978px;
    margin: 0 auto 0 auto;
    background: url(../img/header_highlight.png) no-repeat top center;
}

/* Image */

header .image_wrapper {
    height: 270px;
    margin-top: 75px;
    background: #FFF;
}

header .image_wrapper .inner {
    background: #ccc;
    position: relative;
    height: 260px;
    width: 464px;
    overflow: hidden;
    margin: 5px 0 0 5px;
    -webkit-box-shadow: inset 0 0 5px #000;
    -moz-box-shadow: inset 0 0 5px #000;
    box-shadow: inset 0 0 5px #000;
}

header .image_wrapper .introtext {
    position: absolute;
    bottom: 0px;
    width: 415px;
    height: 80px;
    padding: 4px 4px 4px 45px;
    background: #000;
    background: rgba(0, 0, 0, 0.7);
    color: #FFF;
}

header .image_wrapper .introtext h1 {
    margin: 0;
    font-size: 18px;
    text-shadow: 0 1px 1px #000;
    color: #ffb400;
}

header .image_wrapper .introtext h1 a {
    text-decoration: none;
    color: #ffb400;
}

header .image_wrapper .introtext p {
    margin: 5px 0 0 0;
    font-weight: lighter;
}

header .image_wrapper .introtext p a {
    color: #FFF;
}

header img.maincatpic {
    margin-top: -35px;
    z-index: 999;
    position: absolute;
}

header img.mainpic {
    -webkit-box-shadow: inset 0 0 5px #000;
    -moz-box-shadow: inset 0 0 5px #000;
    box-shadow: inset 0 0 5px #000;
}

/*Anmeldebadge*/
#anmeldung {
    position: absolute;
    z-index: 1000;
    top: 30px;
    left: 570px;
}

/* Info Slider */
#infolist {
    margin: 60px 0 0 0;
    list-style: none;
    padding: 0;
    color: #FFF;
}

#infolist li {
    width: 281px;
    height: 86px;
    padding: 14px 0 0 25px;
    background: url(../img/startpageinfo_list_bg.png) no-repeat 0px -4px;
    cursor: pointer;
}

#infolist li.active h1 {
    color: #ffb400;
}

#infolist h1 {
    font-size: 18px;
    font-weight: normal;
    height: 10px;
    text-shadow: 0px 2px 0px #000;
}

#infolist p {
    font-size: 12px;
    font-weight: lighter;
    color: #ddd;
}

/* ==================
	Sidebar
   ================== */
#sidebar h2 {
    margin: 0;
}

#sidebar h2 a {
    font-size: 16px;
    color: #333;
}

#sidebar .blogmainpic {
    border: 2px solid #FFF;
}

#sidebar h3 {
    width: 278px;
    background: #E0E0E0;
    padding: 4px 4px 4px 10px;
}

#alert {
    width: 291px;
}

#alert h4 {
    background: #000;
    color: orange;
    padding: 4px 4px 4px 10px;
    margin: 0;
}

#alert .text {
    background: #F0F0F0;
    padding: 4px 4px 4px 10px;
}

/* ==================
   Content
   ================== */

#container {
    margin-top: 60px;
    margin-bottom: 150px;
}

#content_top {
    height: 137px;
    background: url(../img/content-top-bg.png) no-repeat 0 0;
}

#container .content_wrapper {
    /*background: url(../img/middle_bg_top.png) no-repeat 0 0;*/
    margin-top: -1px;
}

#content {
    min-height: 800px;
}

p.cap:first-letter {
    font-size: 3.0em;
    font-weight: bold;
    padding-right: 2px;
    float: left;
}

.inner_wrapper {
    margin: 0 auto;
    background: url(../img/content_bg.png) repeat-y 0 0;
}

.content_bottom {
    margin: 0 auto;
    height: 100px;
    margin-bottom: 150px;
    background: url(../img/content-bottom-bg.png) no-repeat 0 0;
}

#content h1 {
    font-family: 'LatoBold', Arial, Helvetica, sans-serif;
    line-height: 1em;
    font-size: 2.2em;
    margin: 0 0 10px 0;
    padding-top: 13px;
    color: #888;
}

#content h1 a {
    color: #888;
}

figcaption {
    font-style: italic;
    color: #888;
    width: 95%;
    padding: 0 0 0 10px;
    margin-top: 5px;
}

figure.f-left figcaption {
    padding-left: 0;
}

.date-box {
    position: relative;
    float: left;
    background: url(../img/date_flag.png) no-repeat;
    width: 49px;
    height: 58px;
    overflow: hidden;
    margin: 0 0 0 -84px;
    padding: 0;
}

.date-box .post-date {
    position: absolute;
    left: 13px;
    top: -4px;
    width: 22px;
    height: 44px;
    text-align: center;
    font-family: 'LatoRegular', Arial, Helvetica, sans-serif;
    color: #ffb400;
    text-shadow: 0px 2px 0px #000;
    font-size: 11px;
    text-transform: uppercase;
}

.date-box .post-date strong {
    font-size: 17px;
    font-family: 'LatoBold', Arial, Helvetica, sans-serif;

}

.bloglist {
    color: #4c4c4c;
}

.bloglist + .bloglist {
    margin: 40px 0 0 0;
}

.bloglist h1 {
    color: #333;
}

img.blogmainpic {
    border: 5px solid #FFF;
    -webkit-box-shadow: 0 0 4px #4c4c4c;
    -moz-box-shadow: 0 0 4px #4c4c4c;
    box-shadow: 0 0 4px #4c4c4c;
}

#sidebar .blogsummary h2 {
    background: #000;
    padding: 2px;
    margin: 4px 0;
}

#sidebar .blogsummary h2 a {
    color: orange;
}

#sidebar .blogsummary .blogmainpic {
    margin-right: 10px;
}

/* Fullpage */
#fullpagecontent {
    background: #FFF;
}

.galerie #fullpagecontent {
    background: none;
}

.contentpic {
    background: #FFF;
    padding: 6px;
    border: 1px solid #CCC;
    margin: 0px 10px 0px 10px;
}

.contentpic:after {
    content: "hhhh";
    color: #000;
}

.contentpic.right {
    margin-right: 0px;
}

.contentpic.f-left {
    margin-left: 0px;
}

/* PAGINATION */
#pagination {
    position: absolute;
    width: 566px;
    height: 58px;
    background: url(../img/pagination-bg.png) no-repeat 0 0;
    left: 50%;
    margin: 57px 0 0 -283px;
}

#pagination .pageList {
    padding: 0;
    margin: 8px 0 0 35px;;
    list-style: none;
    width: 496px;
    text-align: center;
}

#pagination .pageList li {
    display: inline-block;
    background: url(../img/pagelist-bg.png) no-repeat 0 0;
    width: 30px;
    height: 30px;
    line-height: 30px;
    text-align: center;
}

#pagination .pageList li:hover {
    background-position: -30px 0px;
}

#pagination .pageList li a.active {
    color: #FFF;
}

#pagination .pageList li a {
    color: #ffb400;;
    font-size: 1.4em;
    font-weight: bold;
    line-height: 30px;
    padding: 0;
}

#pagination .pageList li.control.prev {
    margin-right: 5px;
}

#pagination .pageList li.control.next {
    margin-left: 5px;
}

/* ==================
   Breadcrumbs
   ================== */
#breadcrumbs ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: block;
}

#breadcrumbs ul li {
    display: inline-block;
}

/* ==================
   Footer
   ================== */

footer {
    margin-top: 200px;
    height: 380px;
    padding-top: 60px;
    background: url(../img/leather_bg.png) repeat-x top center;
    color: orange;
}

footer h4 {
    color: orange;
    font-size: 20px;
    margin: 40px 0 20px 0;
}

footer ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

footer ul li {
    font-size: 14px;
    text-shadow: 0 1px #000;
}

footer ul li a {

}

/* ==================
   Helferliste
   ================== */

a.delHelfer {
    padding-right: 6px;
}

.hfbtn + .hfbtn {
    margin-top: 4px;
}

.nameEintragen {
    font-weight: bold;
    text-align: center;
    background: #FFF;
    padding: 4px;
}

.nameEintragen button + button {
    margin-top: 2px;
}

/* ==================
   Halle
   ================== */
#halle {
    position: relative;
    width: 800px;
    height: 600px;
    background: #fff;
    margin: 40px auto 0 auto;
}

#halle header {
    background: #1e2778;
    color: #ffdd24;
    line-height: 40px;
    font-size: 16px;
    height: 40px;
    width: 100%;
    padding: 0 5px;
}

#halle header span {
    padding-left: 10px;
}

#halle a.cls {
    position: absolute;
    z-index: 2;
    top: -14px;
    right: -20px;
    background: #FFF;
    color: #333;
    width: 24px;
    height: 24px;
    font-size: 18px;
    text-align: center;
    line-height: 24px;
    border-radius: 100%;
    border: 2px solid #ddd;
}

#halle #svg {
    position: relative;
    width: 100%;
    border: 4px solid #fff;
    outline: 1px solid #cecece;
    background: #fafafa;
    height: 100%;
}

#halle button {
    display: block;
    width: 100%;
    padding: 6px 0;
    margin-top: 4px;
    background: #fcd336;
    border: none;
    outline: none;
}

#halle button:hover {
    background: orange;
}

#name {
    opacity: 0;
    z-index: 20;
    position: fixed;
    padding: 3px 6px;
    border: 1px solid #9f9f9f;
    box-shadow: 1px 1px 4px rgba(0, 0, 0, .4);
    font-size: 12px;
    line-height: 12px;
    color: #333;
    background: #FFCF16;
    margin-top: -30px;
    transition: opacity 50ms 10ms;
}

#name.aktiv {
    opacity: 1;
}

#gesamtSumme {
    position: absolute;
    width: 200px;
    z-index: 2;
    top: 50px;
    right: 10px;
    font-size: 16px;
}

#gesamtSumme .summe {
    font-weight: bold;
}

/* ==================
   Busanmeldung
   ================== */
#buseventsinput {
    margin-top: 20px;
}

#buseventsinput input, #buseventsinput textarea {
    width: 280px;
}

#buseventsinput input.btn {
    width: 300px;
}

#buseventsinput textarea {
    height: 30px;
}

#abfahrtszeiten {
    list-style: none;
    margin: 0;
    padding: 0;
    width: 200px;
}

#members {
    list-style-type: decimal;
    margin: 0 0 0 30px;
    padding: 0;
}

#members li {
    padding: 4px;
    font-size: 14px;
}

#members li .date {
    color: #aaa;
    display: inline-block;
    padding-left: 6px;
    font-size: 0.9em;
}

#members li .name {
    display: inline-block;
    width: 150px;
}

#members li:nth-child(2n+1) {
    background-color: #EFEFEF;
}

#rules_wrapper {
    position: relative;
}

#rules_wrapper h3 {
    background: none;
    width: auto;
}

#rules_wrapper ul {
    margin: 0 0 0 30px;
    padding: 0;
}

#rules {
    display: none;
    position: absolute;
    width: 630px;
    top: -370px;
    left: -672px;
    border: 1px solid #D0D0D0;
    background: #FFF;
    padding: 10px;
}

#rules::after {
    content: "";
    position: absolute;
    bottom: 220px;
    right: -15px;
    border-width: 15px 0 15px 15px;
    border-style: solid;
    border-color: transparent #D0D0D0;
    display: block;
    width: 0;
}

#rules_wrapper:hover #rules {
    display: block;
}

.nojs {
    display: none;
}

.no-js .nojs {
    display: block;
}

/* ==================
   Shortcuts
   ================== */
#startshortcuts {
    margin: 35px 0 0 0;
    padding: 0;
    list-style: none;
    width: 100%;
}

#startshortcuts li.sc {
    background: url(../img/shortcuts.png) no-repeat 0 0;
    width: 43px;
    height: 40px;
    float: left;
    position: relative;
}

#startshortcuts li a {
    display: block;
    width: 100%;
    height: 100%;
    text-indent: -3000px;
}

#startshortcuts li + li {
    margin-left: 5px;
}

#startshortcuts li.bus {
    background-position: 0 0;
}

#startshortcuts li.fb {
    background-position: -43px 0;
}

#startshortcuts li.rss {
    background-position: -86px 0;
}

#startshortcuts li.yt {
    background-position: -129px 0;
}

#startshortcuts li:hover {
    background-position-y: -40px;
}

#startshortcuts li .subwrapper {
    position: absolute;
    display: none;
    background: #000;
    background: rgba(0, 0, 0, 0.8);
    color: #FFF;
    padding: 5px;
    margin: -41px 0 0 -135px;
    width: 300px;
    z-index: 1004;
    bottom: 54px;
    -webkit-box-shadow: 0 0 10px #000;
    -moz-box-shadow: 0 0 10px #000;
    box-shadow: 0 0 10px #000;
}

#startshortcuts li .subwrapper .sub {
    border: 1px solid orange;
    padding: 5px;
    color: #FFF;
}

#startshortcuts li .subwrapper .sub h2 {
    margin: 2px 0 4px 0;
    font-size: 1.2em;
}

#startshortcuts li .subwrapper .sub ul {
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%;
}

#startshortcuts li .subwrapper .sub ul li {
    margin: 0;
    height: 40px;
    width: 100%;
    position: relative;
    border-top: 1px dashed orange;
}

#startshortcuts li .subwrapper .sub ul li a {
    text-indent: 0;
    color: #FFF;
}

#startshortcuts li .subwrapper .sub ul li:hover {
    background: #333;
}

#startshortcuts li .subwrapper .sub ul li + li {
}

#startshortcuts li .subwrapper .sub h4 {
    margin: 4px 0;
    padding: 0;
    line-height: 14px;
}

#startshortcuts li .subwrapper .sub .date {
    color: orange;
    font-size: 11px;
    line-height: 11px;
}

#startshortcuts li .subwrapper .sub .ic {
    width: 40px;
    height: 35px;
    padding-top: 5px;
}

#startshortcuts li .subwrapper .sub .text {
    width: 220px;
    overflow: hidden;
}

#startshortcuts li .subwrapper::after {
    content: "";
    position: absolute;
    bottom: -15px;
    left: 140px;
    border-width: 15px 15px 0;
    border-style: solid;
    border-color: #000;
    border-color: rgba(0, 0, 0, 0.8) transparent;
    display: block;
    width: 0;
}

#startshortcuts li:hover .subwrapper {
    display: block;
}

#startshortcuts li .subwrapper .sub ul li .members {
    font-size: 15px;
    font-weight: bold;
    color: orange;
    position: absolute;
    right: -6px;
    top: 5px;
    width: 28px;
    height: 28px;
    line-height: 28px;
    text-align: center;
    border: 1px solid orange;
    border-right-color: #000;
    background: #000;
    border-radius: 6px 0px 0px 6px;
}

#startshortcuts li .subwrapper .sub ul li .day {
    text-transform: uppercase;
    font-weight: bold;
    font-size: 14px;
    color: orange;
    width: 25px;
}

/* ==================
   Infoelemente
   ================== */

#infoevents {
    margin: 0;
    padding: 0;
    list-style: none;
    width: 100%;
}

#infoevents li {
    width: 100%;
    margin: 0 0 10px 0;
}

#infoevents .name {
    font-weight: bold;
}

#infoevents .date {
    width: 70px;
    font-size: 12px;
    display: inline-block;
    margin-right: 2px;
    padding: 1px 2px;
    background: #000;
    color: orange;
    text-align: right;
    border-radius: 5px;
}

#infoevents .datetime {
    display: block;
    margin: 0;
}

#infoevents .description {
    font-weight: normal;
    color: #888;
    font-size: 11px;
    font-style: italic;
}

#infoevents .bus {
    color: #FFF;
    font-size: 9px;
    text-align: right;
    padding-right: 2px;
}

#infoevents .busheading {
    margin-left: 6px;
    font-size: 9px;
    color: orange;
}

.buslegend {
    font-size: 9px;
    color: #666;
    margin-top: 4px;
}

#infovisitors {
    position: absolute;
    top: 43px;
    right: 20px;
    font-size: 22px;
    line-height: 12px;
    font-weight: bold;
    color: #c0c0c0;
    text-align: right;
}

#infogalpics a {
    position: relative;
    display: block;
    padding: 0;
    margin: 0;
    font-size: 11px;
}

#infogalpics .galtitle {
    position: absolute;
    width: 141px;
    bottom: -8px;
    left: 0;
}

#anmeldungenZuenfte {
    position: relative;
}

#anmeldungenZuenfte .liste {
    opacity: 0;
    display: none;

    position: absolute;
    font-size: 12px;
    background: #000;
    color: orange;
    padding: 5px;
    bottom: -100px;
    width: 590px;
    right: 315px;
    box-shadow: 0 4px 8px #333;
}

#anmeldungenZuenfte .liste::after {
    content: "";
    position: absolute;
    bottom: 200px;
    right: -15px;
    border-width: 15px 0 15px 15px;
    border-style: solid;
    border-color: transparent #000;
    display: block;
    width: 0;
}

#anmeldungenZuenfte .liste ul {
    list-style: none;
    margin: 0;
    min-height: 200px;
    width: 578px;
    padding: 5px;
    border: 1px solid orange;
}

#anmeldungenZuenfte .liste ul li {
    float: left;
    width: 270px;
    margin: 2px 4px;
}

#anmeldungenZuenfte:hover .liste {
    display: block;
    opacity: 1;
    -webkit-transition: opacity 0.5s ease-in-out;
    -moz-transition: opacity 0.5s ease-in-out;
    -o-transition: opacity 0.5s ease-in-out;
    -ms-transition: opacity 0.5s ease-in-out;
    transition: opacity 0.5s ease-in-out;
}

/* ==================
   Buttons
   ================== */

.btn {
    border: 1px solid #CCC;
    border-bottom: 1px solid #BBB;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    -ms-border-radius: 3px;
    -o-border-radius: 3px;
    border-radius: 3px;
    color: #333;
    font: bold 11px "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;
    line-height: 1;
    padding: 6px;
    text-align: center;
    text-shadow: 0 1px 0 #EEE;
    width: 150px;
}

.gray {
    background-color: #EEE;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#eeeeee), to(#cccccc));
    background-image: -webkit-linear-gradient(top, #eeeeee, #cccccc);
    background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);
    background-image: -ms-linear-gradient(top, #eeeeee, #cccccc);
    background-image: -o-linear-gradient(top, #eeeeee, #cccccc);
    background-image: linear-gradient(top, #eeeeee, #cccccc);
}

.orange {
    background-color: #ffb400;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#ffb400), to(#eda600));
    background-image: -webkit-linear-gradient(top, #ffb400, #eda600);
    background-image: -moz-linear-gradient(top, #ffb400, #eda600);
    background-image: -ms-linear-gradient(top, #ffb400, #eda600);
    background-image: -o-linear-gradient(top, #ffb400, #eda600);
    background-image: linear-gradient(top, #ffb400, #eda600);
    color: #111;
    text-shadow: 0 1px 0 #ccc;
}

/* ==================
   Helper
   ================== */
.f-right {
    float: right;
}

.f-left {
    float: left;
}

.a-right {
    text-align: right;
}

.a-left {
    text-align: left;
}

.a-justify {
    text-align: justify;
}

.relative {
    position: relative;
}

/* ==================
   Tooltip
   ================== */

a.tooltip:hover {
    position: relative;
    z-index: 100;
}

a.tooltip:before {
    background: #FFF url(../img/icons/alert.png) no-repeat 5px 3px;
    content: attr(data-tooltip);
    width: 200px;
    display: none;
    text-shadow: none;
    text-align: left;
    color: #333;
    font: 12px Helvetica, Arial, Georgia, sans-serif;
    padding: 5px 10px 5px 40px;
    position: absolute;
    bottom: 41px;
    right: 0;
    -moz-box-shadow: 0px 0px 5px #666;
    -webkit-box-shadow: 0px 0px 5px #666;
    box-shadow: 0px 0px 5px #666;
}

a.tooltip:after {
    border-width: 12px 12px 0;
    border-style: solid;
    border-color: #AAA transparent transparent transparent;
    content: ""; /* Forces this pseudo-element to appear on hover */
    display: none;
    position: absolute;
    top: -16px;
    right: 10px;
}

.ie8 a.tooltip:before {
    padding-left: 40px;
}

a.tooltip:hover:after, a.tooltip:hover:before {
    display: block;
}

/* =============================================================================
   Non-semantic helper classes
   Please define your styles before this section.
   ========================================================================== */

/* For image replacement */
.ir {
    display: block;
    text-indent: -999em;
    overflow: hidden;
    background-repeat: no-repeat;
    text-align: left;
    direction: ltr;
}

.ir br {
    display: none;
}

/* Hide for both screenreaders and browsers:
   css-discuss.incutio.com/wiki/Screenreader_Visibility */
.hidden {
    display: none;
    visibility: hidden;
}

/* Hide only visually, but have it available for screenreaders: by Jon Neal.
  www.webaim.org/techniques/css/invisiblecontent/  &  j.mp/visuallyhidden */
.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

/* Extends the .visuallyhidden class to allow the element to be focusable when navigated to via the keyboard: drupal.org/node/897638 */
.visuallyhidden.focusable:active, .visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
}

/* Hide visually and from screenreaders, but maintain layout */
.invisible {
    visibility: hidden;
}

/* Contain floats: nicolasgallagher.com/micro-clearfix-hack/ */
.clearfix:before, .clearfix:after {
    content: "";
    display: table;
}

.clearfix:after {
    clear: both;
}

.clearfix {
    zoom: 1;
}

/* =============================================================================
   PLACEHOLDER Media Queries for Responsive Design.
   These override the primary ('mobile first') styles
   Modify as content requires.
   ========================================================================== */

@media only screen and (min-width: 480px) {
    /* Style adjustments for viewports 480px and over go here */

}

@media only screen and (min-width: 768px) {
    /* Style adjustments for viewports 768px and over go here */

}

/* =============================================================================
   Print styles.
   Inlined to avoid required HTTP connection: www.phpied.com/delay-loading-your-print-css/
   ========================================================================== */

@media print {
    * {
        background: transparent !important;
        color: black !important;
        text-shadow: none !important;
        filter: none !important;
        -ms-filter: none !important;
    }

    /* Black prints faster: sanbeiji.com/archives/953 */
    a, a:visited {
        color: #444 !important;
        text-decoration: underline;
    }

    a[href]:after {
        content: " (" attr(href) ")";
    }

    abbr[title]:after {
        content: " (" attr(title) ")";
    }

    .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after {
        content: "";
    }

    /* Don't show links for images, or javascript/internal links */
    pre, blockquote {
        border: 1px solid #999;
        page-break-inside: avoid;
    }

    thead {
        display: table-header-group;
    }

    /* css-discuss.incutio.com/wiki/Printing_Tables */
    tr, img {
        page-break-inside: avoid;
    }

    img {
        max-width: 100% !important;
    }

    @page {
        margin: 0.5cm;
    }

    p, h2, h3 {
        orphans: 3;
        widows: 3;
    }

    h2, h3 {
        page-break-after: avoid;
    }
}

/* =============================================================================
   Box Slider
   ========================================================================== */
.bx-wrapper, .bx-window {
    height: 462px;
}

/* =============================================================================
   Uniform
   ========================================================================== */

div.selector,
div.selector span,
div.checker span,
div.radio span,
div.uploader,
div.uploader span.action,
div.button,
div.button span {
    background-image: url(../img/sprite.png);
    background-repeat: no-repeat;
    -webkit-font-smoothing: antialiased;
}

.selector,
.radio,
.checker,
.uploader,
.button,
.selector *,
.radio *,
.checker *,
.uploader *,
.button * {
    margin: 0;
    padding: 0;
}

/* INPUT & TEXTAREA */

input.text,
input.email,
input.password,
textarea.uniform {
    font-size: 12px;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: normal;
    padding: 3px;
    color: #777;
    background: url('images/bg-input-focus.png') repeat-x 0px 0px;
    background: url('images/bg-input.png') repeat-x 0px 0px;
    border-top: solid 1px #aaa;
    border-left: solid 1px #aaa;
    border-bottom: solid 1px #ccc;
    border-right: solid 1px #ccc;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    outline: 0;
}

input.text:focus,
input.email:focus,
input.password:focus,
textarea.uniform:focus {
    -webkit-box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.3);
    box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.3);
    border-color: #999;
    background: url('images/bg-input-focus.png') repeat-x 0px 0px;
}

/* SPRITES */

/* Select */

div.selector {
    background-position: -483px -130px;
    line-height: 26px;
    height: 26px;
}

div.selector span {
    background-position: right 0px;
    height: 26px;
    line-height: 26px;
}

div.selector select {
    /* change these to adjust positioning of select element */
    top: 0px;
    left: 0px;
}

div.selector:active,
div.selector.active {
    background-position: -483px -156px;
}

div.selector:active span,
div.selector.active span {
    background-position: right -26px;
}

div.selector.focus, div.selector.hover, div.selector:hover {
    background-position: -483px -182px;
}

div.selector.focus span, div.selector.hover span, div.selector:hover span {
    background-position: right -52px;
}

div.selector.focus:active,
div.selector.focus.active,
div.selector:hover:active,
div.selector.active:hover {
    background-position: -483px -208px;
}

div.selector.focus:active span,
div.selector:hover:active span,
div.selector.active:hover span,
div.selector.focus.active span {
    background-position: right -78px;
}

div.selector.disabled {
    background-position: -483px -234px;
}

div.selector.disabled span {
    background-position: right -104px;
}

/* Checkbox */

div.checker {
    width: 19px;
    height: 19px;
}

div.checker input {
    width: 19px;
    height: 19px;
}

div.checker span {
    background-position: 0px -260px;
    height: 19px;
    width: 19px;
}

div.checker:active span,
div.checker.active span {
    background-position: -19px -260px;
}

div.checker.focus span,
div.checker:hover span {
    background-position: -38px -260px;
}

div.checker.focus:active span,
div.checker:active:hover span,
div.checker.active:hover span,
div.checker.focus.active span {
    background-position: -57px -260px;
}

div.checker span.checked {
    background-position: -76px -260px;
}

div.checker:active span.checked,
div.checker.active span.checked {
    background-position: -95px -260px;
}

div.checker.focus span.checked,
div.checker:hover span.checked {
    background-position: -114px -260px;
}

div.checker.focus:active span.checked,
div.checker:hover:active span.checked,
div.checker.active:hover span.checked,
div.checker.active.focus span.checked {
    background-position: -133px -260px;
}

div.checker.disabled span,
div.checker.disabled:active span,
div.checker.disabled.active span {
    background-position: -152px -260px;
}

div.checker.disabled span.checked,
div.checker.disabled:active span.checked,
div.checker.disabled.active span.checked {
    background-position: -171px -260px;
}

/* Radio */

div.radio {
    width: 18px;
    height: 18px;
}

div.radio input {
    width: 18px;
    height: 18px;
}

div.radio span {
    height: 18px;
    width: 18px;
    background-position: 0px -279px;
}

div.radio:active span,
div.radio.active span {
    background-position: -18px -279px;
}

div.radio.focus span,
div.radio:hover span {
    background-position: -36px -279px;
}

div.radio.focus:active span,
div.radio:active:hover span,
div.radio.active:hover span,
div.radio.active.focus span {
    background-position: -54px -279px;
}

div.radio span.checked {
    background-position: -72px -279px;
}

div.radio:active span.checked,
div.radio.active span.checked {
    background-position: -90px -279px;
}

div.radio.focus span.checked, div.radio:hover span.checked {
    background-position: -108px -279px;
}

div.radio.focus:active span.checked,
div.radio:hover:active span.checked,
div.radio.focus.active span.checked,
div.radio.active:hover span.checked {
    background-position: -126px -279px;
}

div.radio.disabled span,
div.radio.disabled:active span,
div.radio.disabled.active span {
    background-position: -144px -279px;
}

div.radio.disabled span.checked,
div.radio.disabled:active span.checked,
div.radio.disabled.active span.checked {
    background-position: -162px -279px;
}

/* Uploader */

div.uploader {
    background-position: 0px -297px;
    height: 28px;
}

div.uploader span.action {
    background-position: right -409px;
    height: 24px;
    line-height: 24px;
}

div.uploader span.filename {
    height: 24px;
    /* change this line to adjust positioning of filename area */
    margin: 2px 0px 2px 2px;
    line-height: 24px;
}

div.uploader.focus,
div.uploader.hover,
div.uploader:hover {
    background-position: 0px -353px;
}

div.uploader.focus span.action,
div.uploader.hover span.action,
div.uploader:hover span.action {
    background-position: right -437px;
}

div.uploader.active span.action,
div.uploader:active span.action {
    background-position: right -465px;
}

div.uploader.focus.active span.action,
div.uploader:focus.active span.action,
div.uploader.focus:active span.action,
div.uploader:focus:active span.action {
    background-position: right -493px;
}

div.uploader.disabled {
    background-position: 0px -325px;
}

div.uploader.disabled span.action {
    background-position: right -381px;
}

div.button {
    background-position: 0px -523px;
}

div.button span {
    background-position: right -643px;
}

div.button.focus,
div.button:focus,
div.button:hover,
div.button.hover {
    background-position: 0px -553px;
}

div.button.focus span,
div.button:focus span,
div.button:hover span,
div.button.hover span {
    background-position: right -673px;
}

div.button.active,
div.button:active {
    background-position: 0px -583px;
}

div.button.active span,
div.button:active span {
    background-position: right -703px;
    color: #555;
}

div.button.disabled,
div.button:disabled {
    background-position: 0px -613px;
}

div.button.disabled span,
div.button:disabled span {
    background-position: right -733px;
    color: #bbb;
    cursor: default;
}

/* PRESENTATION */

/* Button */

div.button {
    height: 30px;
}

div.button span {
    margin-left: 13px;
    height: 22px;
    padding-top: 8px;
    font-weight: bold;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 12px;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding-left: 2px;
    padding-right: 15px;
}

/* Select */
div.selector {
    width: 190px;
    font-size: 12px;
}

div.selector select {
    min-width: 190px;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 12px;
    border: solid 1px #fff;
}

div.selector span {
    padding: 0px 25px 0px 2px;
    cursor: pointer;
}

div.selector span {
    color: #666;
    width: 158px;
    text-shadow: 0 1px 0 #fff;
}

div.selector.disabled span {
    color: #bbb;
}

/* Checker */
div.checker {
    margin-right: 5px;
}

/* Radio */
div.radio {
    margin-right: 3px;
}

/* Uploader */
div.uploader {
    width: 190px;
    cursor: pointer;
}

div.uploader span.action {
    width: 85px;
    text-align: center;
    text-shadow: #fff 0px 1px 0px;
    background-color: #fff;
    font-size: 11px;
    font-weight: bold;
}

div.uploader span.filename {
    color: #777;
    width: 82px;
    border-right: solid 1px #bbb;
    font-size: 11px;
}

div.uploader input {
    width: 190px;
}

div.uploader.disabled span.action {
    color: #aaa;
}

div.uploader.disabled span.filename {
    border-color: #ddd;
    color: #aaa;
}

/*

CORE FUNCTIONALITY 

Not advised to edit stuff below this line
-----------------------------------------------------
*/

.selector,
.checker,
.button,
.radio,
.uploader {
    display: -moz-inline-box;
    display: inline-block;
    vertical-align: middle;
    zoom: 1;
    *display: inline;
}

.selector select:focus, .radio input:focus, .checker input:focus, .uploader input:focus {
    outline: 0;
}

/* Button */

div.button a,
div.button button,
div.button input {
    position: absolute;
}

div.button {
    cursor: pointer;
    position: relative;
}

div.button span {
    display: -moz-inline-box;
    display: inline-block;
    line-height: 1;
    text-align: center;
}

/* Select */

div.selector {
    position: relative;
    padding-left: 10px;
    overflow: hidden;
}

div.selector span {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

div.selector select {
    position: absolute;
    opacity: 0;
    filter: alpha(opacity:0);
    height: 25px;
    border: none;
    background: none;
}

/* Checker */

div.checker {
    position: relative;
}

div.checker span {
    display: -moz-inline-box;
    display: inline-block;
    text-align: center;
}

div.checker input {
    opacity: 0;
    filter: alpha(opacity:0);
    display: inline-block;
    background: none;
}

/* Radio */

div.radio {
    position: relative;
}

div.radio span {
    display: -moz-inline-box;
    display: inline-block;
    text-align: center;
}

div.radio input {
    opacity: 0;
    filter: alpha(opacity:0);
    text-align: center;
    display: inline-block;
    background: none;
}

/* Uploader */

div.uploader {
    position: relative;
    overflow: hidden;
    cursor: default;
}

div.uploader span.action {
    float: left;
    display: inline;
    padding: 2px 0px;
    overflow: hidden;
    cursor: pointer;
}

div.uploader span.filename {
    padding: 0px 10px;
    float: left;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: default;
}

div.uploader input {
    opacity: 0;
    filter: alpha(opacity:0);
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    float: right;
    height: 25px;
    border: none;
    cursor: default;
}

/**********
HELFERLISTE
***********/

#helferliste {
    margin-top: 60px;
}

div.veranstaltungen {
    position: relative;
    width: 20%;
    float: left;
}

div.veranstaltungen ul {
    margin: 0;
    padding: 0;
    width: 100%;
}

div.veranstaltungen ul li {
    list-style: none;
    padding: 10px 0;
    width: 100%;
    background: #f0f0f0;
    border: 1px solid #ddd;
    cursor: pointer;
}

div.veranstaltungen ul li.aktiv {
    background: orange;
}

div.veranstaltungen ul li a {
    color: #333;
    display: block;
    height: 100%;
    padding: 0 10px;
    font-size: 16px;
}

div.veranstaltungen ul li + li {
    margin-top: 10px;
}

div.veranstaltung {
    width: 78%;
    float: left;
    margin-left: 2%;
}

div.veranstaltung b.helfer {
    display: block;
    cursor: pointer;
}

div.veranstaltung h2 {
    font-size: 18px;
    padding: 9px;
    margin: 0;
    background: #f0f0f0;
    border: 1px solid #ddd;
}

div.abteilung {
    background: #f0f0f0;
    border: 1px solid #ddd;
    padding: 5px;
    margin-top: 10px;
    cursor: pointer;
}

div.abteilung button {
    opacity: .3;
}

div.abteilung.hovered {
    box-shadow: 0 0 22px rgba(0, 0, 0, .4);
}

div.abteilung.hovered button {
    opacity: 1;
}

ul.tabs {
    display: none;
}

div.abteilung.blured {
    -webkit-filter: blur(1px);
    -moz-filter: blur(1px);
    -o-filter: blur(1px);
    -ms-filter: blur(1px);
    filter: blur(1px);
    opacity: .5;
}

div.abteilung h3 {
    text-align: center;
    margin-top: 5px;
    border-bottom: 1px solid #bbb;
    padding-bottom: 4px;
}

div.abteilung .helferliste {
    margin-bottom: 10px;
}

div.abteilung button {
    /*display: block;*/
    width: 100%;
    background: orange;
    border: none;
    line-height: 24px;
}

div.abteilung button.abmelden {
    opacity: 1;
    background: darkred;
    color: #FFF;
}

div.abteilung button:hover {
    background: orange;
}

div.abteilung .helferliste,
div.abteilung .hinweis {
    margin-bottom: 10px;
    background: #f5f5f5;
    padding: 3px;
    border: 1px solid #d0d0d0;
}

div.abteilung ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

div.abteilung .avatar {
    width: 40px;
    height: 40px;
    overflow: hidden;
    float: left;
    margin-right: 6px;
    border: 1px solid #e0e0e0;
}

div.abteilung .avatar img {
    max-width: 100%
}

ul.mitglieder {
    width: 100%;
    margin-top: 10px;
}

ul.mitglieder li {
    width: 210px;
    background: #FFF;
    border: 1px solid #ddd;
    padding: 5px;
}

ul.mitglieder li:hover {
    background: #f08e0d;
}

ul.mitglieder li + li {
    margin-top: 6px;
}

#midAbfrage {
    position: fixed;
    z-index: 1000;
    left: 0;
    bottom: -1px;
    width: 100%;
    height: 0;
    background: rgba(0, 0, 0, .8);
    border-top: 1px solid orange;
    transition: height 1s;
    box-shadow: 10px 0 20px rgba(0, 0, 0, .8);
}

#midAbfrage.aktiv {
    height: 220px;
}

#midAbfrage .container {
    width: 976px;
    margin: 10px auto;
    color: #FFF;
    font-size: 14px;
}

#midAbfrage .container .form-control {
    float: left;
}

#midAbfrage .container .form-control label {
    display: block;
}

#midAbfrage .container .form-control + .form-control {
    margin-left: 30px;
}

#midAbfrage .container button {
    margin: 19px 0 0 30px;
    border: none;
    background: orange;
    color: #333;
    line-height: 30px;
}

#midAbfrage .name {
    text-transform: capitalize;
}

#XmidAbfrage {
    cursor: pointer;
    position: absolute;
    top: 10px;
    right: 20px;
    color: #FFF;
    font-size: 20px;
    font-weight: bold;
}

.bricklayer {
    margin-left: -5px;
    margin-top: 10px;
    width: 772px;
}

@media screen and (min-width: 1200px) {
    .bricklayer-column-sizer {
        /* divide by 3. */
        width: 33.3%;
    }
}

@media screen and (min-width: 768px) {
    .bricklayer-column-sizer {
        /* divide by 2. */
        width: 33.3%;
    }
}

/*********************
    Busanmeldungen
********************/

#busAnmeldungen {
    float: left;
    width: 30%;
}

#mitglieder {
    float: left;
    width: 15%;
    margin-left: 1%;
}

#teilnehmerListe {
    float: left;
    width: 53%;
    margin-left: 1%;
}

ul.busanmeldungen {
    margin: 0;
    padding: 0;
}

ul.busanmeldungen > li {
    position: relative;
    list-style: none;
    cursor: pointer;
    width: 320px;
}

ul.busanmeldungen > li .anzahlAnmeldungen {
    position: absolute;
    top: -8px;
    left: 30px;
    width: 20px;
    height: 20px;
    text-align: center;
    line-height: 20px;
    font-size: 12px;
    background: #222;
    border: 1px solid #000;
    color: #FFF;
    font-weight: lighter;
    border-radius: 100%;
}

ul.busanmeldungen > li:before {
    content: ' ';
    position: absolute;
    top: 4px;
    left: 2px;
    width: 2px;
    min-height: 60px;
    background: #cf8100;
    margin: 42px 0 0 19px;
}

ul.busanmeldungen > li:last-child:before,
ul.busanmeldungen > li:last-child ul.haltestellen li:last-child:after {
    display: none;
}

ul.busanmeldungen ul.haltestellen {
    display: none;
    position: relative;
    left: -3px;
    margin: 10px 0 10px 0;
    list-style: none;
}

ul.busanmeldungen > li ul.haltestellen li {
    display: block;
    position: relative;
    font-size: 14px;
    text-align: left;
    margin-left: 20px;
}

ul.busanmeldungen > li ul.haltestellen li + li {
    margin-top: 1px;
}

ul.busanmeldungen > li.aktiv ul.haltestellen {
    display: block;
}

ul.busanmeldungen > li ul.haltestellen li:after {
    position: absolute;
    top: -8px;
    left: -36px;
    content: '';
    width: 2px;
    height: 35px;
    background: #333;
}

ul.busanmeldungen > li ul.haltestellen li:before {
    position: absolute;
    z-index: 2;
    left: -40px;
    content: '';
    top: 2px;
    width: 10px;
    height: 10px;
    border-radius: 100px;
    background: #cf8100;
}

ul.busanmeldungen li .datum {
    background: orange;
    float: left;
    border: 2px solid #cf8100;
    width: 40px;
    height: 31px;
    border-radius: 100%;
    text-align: center;
    line-height: 14px;
    padding: 7px 0 4px 0;
    margin: 0 15px 15px 0;
}

ul.busanmeldungen li:hover .datum {
    background: #ffba33;
}

ul.busanmeldungen li span.tag {
    display: block;
    font-weight: bold;
    font-size: 18px;
}

ul.busanmeldungen li span.monat {
    display: block;
    font-size: 12px;
    text-transform: uppercase;
}

ul.busanmeldungen li .ort {
    display: table;
    font-weight: bold;
    font-size: 16px;
    line-height: 16px;
    height: 44px;
}

ul.busanmeldungen li .ort > div {
    display: table-cell;
    vertical-align: middle;
}

ul.busanmeldungen li .ort div.was {
    font-weight: lighter;
    font-size: 14px;
    color: #777;
}

#mitglieder {
    position: relative;
}

#mitglieder input.suchen {
    background: none;
    width: 100px;
    margin-bottom: 10px;
    box-shadow: none;
}

#mitglieder ul.mitglieder {
    margin: 0;
    padding: 0;
    list-style: none;
    position: absolute;
    z-index: 2;
    left: 0;
    top: 30px;
    width: 200px;
    border: 1px solid #ccc;
    background: #FFF;
}

#mitglieder ul.mitglieder li {
    cursor: pointer;
}

#mitglieder ul.mitglieder li .avatar {
    float: left;
    display: block;
    width: 40px;
    margin-right: 5px;
}

ul.familie {
    list-style: none;
    width: 100%;
    margin: 10px 0 0 0;
    padding: 0;
}

ul.familie li {
    position: relative;
    padding: 4px 10px;
    background: #f0f0f0;
    border: 1px solid #dedede;
    font-size: 13px;
}

ul.familie li:hover {
    background: #cfcfcf;
}

ul.familie li a {
    cursor: pointer;
    color: #333;
}

ul.familie li img {
    position: absolute;
    width: 40px;
    height: 40px;
    border-radius: 100%;
    margin: -10px 0 0 -40px;
}

ul.familie li.angemeldet {
    background: orange;
}

ul.familie li.angemeldet:hover {
    background: darkorange;
}

ul.familie li + li {
    margin-top: 5px;
}

.gruppenkopf {
    font-weight: bold;
    background: #f0f0f0;
    margin-top: 10px;
    padding: 2px;
    text-align: center;
    border: 1px solid #bcbcbc;
}

#mitglieder .gast {
    margin-top: 15px;
}

#mitglieder .gast input {
    width: 126px;
}

table.teilnehmer {
    float: left;
    width: 49%;
}

table.teilnehmer th {
    text-align: left;
    padding: 4px 8px;
    background: #e8e8e8;
    border: 1px solid #d0d0d0;
}

table.teilnehmer + table.teilnehmer {
    margin: 0 .5% 10px .5%;
}

table.teilnehmer tr td {
    border: 1px solid #d0d0d0;
    padding: 5px 8px;
}

table.teilnehmer tr td:first-child {
    font-weight: bold;
    text-align: center;
    width: 20px;
}

table.teilnehmer tr:nth-child(even) td {
    background: #f0f0f0;
}

table.teilnehmer tr.ersterGast td {
    position: relative;
    border-top: 2px solid #333;
}

table.teilnehmer tr.ersterGast .pfeil {
    position: absolute;
    z-index: 2;
    background: orange;
    width: 100px;
    height: 20px;
    line-height: 20px;
    text-align: center;
    top: -10px;
    right: -145px;
}

table.teilnehmer tr.ersterGast .pfeil:after {
    right: 100%;
    top: 50%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border-color: rgba(136, 183, 213, 0);
    border-right-color: orange;
    border-width: 10px;
    margin-top: -10px;
}

table.teilnehmer tr td.abm a {
    display: none;
}

table.teilnehmer tr:hover .abm a {
    display: block;
    width: 100%;
    height: 100%;
    cursor: pointer;
}

table.teilnehmer tr:hover .abm span {
    /*display: none;*/
}

table.teilnehmer tr td {
    position: relative;
}

table.teilnehmer tr td.datum {
    width: 26px;
    text-align: right;
    color: #888;
    font-size: 11px;
    line-height: 10px;
}

table.teilnehmer tr:hover td.datum {
    color: #333;
}

table.teilnehmer tr:hover td {
    background: #cecece;
}

table.teilnehmer tr td .gemeldetvon {
    display: block;
    font-size: 10px;
}

#countdown {
    width: 64%;
    float: right;
    text-align: center;
    font-size: 22px;
    background: #f5f5f5;
    border: 1px solid #bfbfbf;
}

.keinerAngemeldet {
    text-align: center;
    font-size: 26px;
    color: #cfcfcf;
    margin-top: 120px;
}

#countdown .timer {
    display: block;
    height: 60px;
    font-size: 54px;
    color: orange;
    text-align: center;
    font-weight: bold;
    /*text-shadow: -1px 0 #666, 0 1px #666, 1px 0 #666, 0 -1px #666;*/
}

p.hinweis {
    border: 2px solid red;
    padding: 2px;
}

[ng-click] {
    cursor: pointer;
}

#infos {
    padding: 20px;
    background: #eee;
    border: 1px solid #d0d0d0;
    margin-bottom: 20px;
}

table.teilnehmer tr td.keinHelfer {
    border-left: 3px solid red;
}

table.teilnehmer tr td.u18 {
    border-right: 2px solid orange;
}

.zuOftAbgemeldet {
    position: relative;
}

span.abmeldungen {
    position: absolute;
    top: 0;
    right: 0;
    width: 15px;
    height: 15px;
    line-height: 15px;
    text-align: center;
    color: #FFF;
    background: darkred;
    font-size: 11px;
}