/*
 *  Stadtjugendring Ingolstadt
 *  Ferienpass
 *
 *  Stylesheet
 *
 *  Last changes: Jun 19, 2013
 */


/* -----------------------------------------------------------------------------
    0. Reset
    1. General
    2. Wrapper
    3. Header - see menu.css
    4. Content
    5. Homepage
    6. Colors
    7. Issues
/* -----------------------------------------------------------------------------



/* ----------------------------------------------------------------------------- */
/*  0. Reset
/* ----------------------------------------------------------------------------- */

html, body,
div, span,
h1, h2, h3, h4, h5, h6, p, blockquote,
a, img, b,
ul, li, table,
input, textarea, select {
    background: transparent;
    border: 0;
    font-size: 100%;
    outline: 0;
    vertical-align: baseline;
    empty-cells: show
}

body {
    line-height: 1.3
}

hr {
    background: transparent;
    border: 0;
    clear: both;
    color: transparent;
    height: 1px;
    margin: 0;
    padding: 0
}

input,
select {
    vertical-align: middle
}

.clear {
    clear: both;
    display: block;
    height: 0;
    overflow: hidden;
    visibility: hidden;
    width: 0
}

.clearfix:after {
    clear: both;
    content: ' ';
    display: block;
    font-size: 0;
    height: 0;
    line-height: 0;
    visibility: hidden;
    width: 0
}


/* ----------------------------------------------------------------------------- */
/*  1. General
/* ----------------------------------------------------------------------------- */

body {
    min-width: 1000px;
    font: 16px/24px 'Fira Sans', 'Helvetica', 'Arial', sans-serif;
    -webkit-font-smoothing: antialiased;
    color: #010000;
    text-shadow: 0 0 1px rgba(0, 0, 0, 0.04);
    font-size: 90%;
    background-color: #DDD;
}

h1, h2, h3, .title-font {
    font: 28px/34px 'Dosis', 'Helvetica', 'Arial', sans-serif;
    text-transform: uppercase;
}

h1, h2, h3 {
    margin-top: 1.5em;
}


html, body {
    margin: 0;
    padding: 0;
    height: 100%
}

img.title {
    margin-left: 120px;
    margin-top: 1.8em;
    margin-bottom: 1.8em
}

.mini {
    width: 20px
}

h1 {
    font-size: 150%;
    font-weight: 100
}

h2,
thead {
    font-size: 130%;
    margin-top: 0.8em;
    font-weight: 500
}


h1 {
    font-size: 28px;
    line-height: 34px
}

h2 {
    font-size: 18px;
    line-height: 22px
}

h3 {
    font-size: 14px;
    line-height: 17px;
    font-weight: bold;
}

h1:first-child, h2:first-child, h3:first-child {
    margin-top: 0;
}


a.box {
    color: #444
}

a:link,
a:visited,
a:active {
    color: #106b10;
    -webkit-transition: all .2s ease-out;
    -moz-transition: all .2s ease-out;
    -o-transition: all .2s ease-out;
    transition: all .2s ease-out;
    text-decoration: none;
    font-weight: bold
}


a:hover,
a.warning:hover {
    text-decoration: none;
    color: #FF8000;
    font-weight: bold
}

h2 a {
    font-weight: 300 !important;
    line-height: normal;
    display: inline
}


/*  Tables  ---------------------------------- */

thead tr th {
    color: #AAA;
    padding-bottom: 10px
}

th {
    font-size: 75%;
    font-weight: bold;
    text-transform: uppercase;
}

td, .cell {
    font-size: 90%;
    padding: 2px
}

th.descr,
td.descr,
.cell.descr {
    padding: 6px 0 1em 10px;
    font-size: 16px;
    font-weight: normal
}

td.descr, .cell.descr {
    text-align: center;
    padding-top: 20px;
    color: black
}

td input, .cell input {
    font-weight: 500
}

td.hover, .cell.hover {
    color: transparent;
    width: 200px;
    font-weight: 200
}

table tr {
    cursor: pointer;
}

table tr:last-child td, table tr.last td {
    border-bottom-width: 1px;
}

table tr td, .table .row .cell {
    border-top: 1px solid #DDD;
    border-bottom: 0px solid #DDD;
    margin-top: 10px;
    padding: 0.5em 2em;
    vertical-align: middle;
    color: black
}

table tr.no-dec,
table tr.no-dec td,
table tr.no-dec th,
.table .row.no-dev .cell {
    border: 0 !important;
    background: transparent !important;
    color: #AAA;
    padding: 0 2em;
}

table tr td.left {
    border-left: 1px solid #DDD
}

table tr td.right {
    border-right: 1px solid #DDD
}

table th {
    text-align: left;
    cursor: default;
    padding-left: 20px
}

table tr:hover td {
    background: rgba(0, 0, 0, 0.2);
    color: black
}

table tr:hover input.btn.mo,
table tr:hover input.descr.mo {
    visibility: visible
}

table.kursdetails tr:hover td {
    background: transparent;
    color: black;
    cursor: auto
}

.heading {
    width: 75px;
    float: left
}


/* ----------------------------------------------------------------------------- */
/*  2. Wrapper
/* ----------------------------------------------------------------------------- */

#body-wrapper {
    width: 960px;
    height: auto !important;
    position: relative;
    left: 50%;
    margin-bottom: 20px;
    margin-left: -500px;
    padding: 20px;
    background: #FBFBFB;
    -webkit-box-shadow: 0 4px 7px 1px #BBB;
    -moz-box-shadow: 0 4px 7px 1px #BBB;
    box-shadow: 0 4px 7px 1px #BBB;
    -webkit-border-radius: 0 0 3px 3px;
    -moz-border-radius: 0 0 3px 3px;
    border-radius: 0 0 3px 3px
    overflow: visible;
}

#body-wrapper.home {
    background: none;
    box-shadow: none;
    margin-bottom: 0;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
}


/* ----------------------------------------------------------------------------- */
/*  3. Header - see also menu.css
/* ----------------------------------------------------------------------------- */

#header {
    width: 1000px;
    position: relative;
    left: 50%;
    margin-left: -500px;
    z-index: 997
}


/* ----------------------------------------------------------------------------- */
/*  4. Content
/* ----------------------------------------------------------------------------- */

.hoverless tr {
    height: 40px
}

.hoverless td {
    border: none !important;
    cursor: default
}

.hoverless tr:hover td {
    background: transparent !important
}


#infos div.text a {
    font-size: 100%;
    margin-left: 0
}


/*  Inputs  ---------------------------------- */

input.error {
    border: 1px solid red;
}

input,
.btn,
select {
    height: 35px;
    background: transparent;
    border: 1px solid #DDD;
    outline: none;
    -webkit-transition: all .2s ease-out;
    -moz-transition: all .2s ease-out;
    -o-transition: all .2s ease-out;
    transition: all .2s ease-out;
    font-size: 15px;
    padding-left: 10px;
    padding-right: 10px;
    color: #888;
    display: table-cell;
    vertical-align: middle;
    font-weight: normal
}

select {
    padding: 5px;
    line-height: 1;
    font-family: 'Arial', 'Lucida Sans Unicode', 'Lucida Grande', sans-serif bold;
    font-weight: normal;
    border: 1px solid #ccc;
    background: #FBFBFB
}

input:focus,
.btn:focus,
select:focus {
    background: #DDD !important;
    color: black;
    border: 1px solid #999
}

input:hover,
.btn:hover,
select:hover {
    background: #F2F2F2;
    color: black;
    border: 1px solid #aaa
}

input:active,
.btn:active,
select:active {
    -webkit-box-shadow: 0 0 5px #888 inset;
    -moz-box-shadow: 0 0 5px #888 inset;
    box-shadow: 0 0 5px #888 inset
}

input[disabled], input[readonly], input[readonly]:focus {
    border-color: transparent;
    background: transparent;
    box-shadow: none;
}

#popup {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    z-index: 10000;
    display: none;
    position: absolute;
    left: 50%;
    top: 0;
    min-height: 400px;
    width: 760px;
    margin-left: -350px;
    padding: 20px;
    background-color: white;
    border: 1px solid #888;
    -webkit-box-shadow: 0px 0px 5px grey;
    -moz-box-shadow: 0px 0px 5px grey;
    box-shadow: 0px 0px 5px grey
}


/*  Accordion  ---------------------------------- */

.accordionSlider h2 {
    padding: .5em .7em;
    margin: 0em;
    text-align: center;
    cursor: pointer !important
}

.accordionSlider h2:hover {
    color: #444
}

.accordionSliderBody {
    overflow: hidden;
    margin-left: -22px;
    width: 1002px;
    text-align: justify;
}

.accordionSlider:hover .accordionSliderHead h3 {
    background: #ffffff
}

.accordionSlider {
    margin-bottom: -1px;
    border: 1px solid transparent;
    margin-top: 20px;
    text-align: center
}

.accordionSliderInBody {
    padding: 20px 100px 20px 100px;
    border-top: 1px solid #AAA;
    border-bottom: 1px solid #AAA;
    border: 1px solid rgba(0, 0, 0, 0);
    background: rgb(200, 200, 200);
    background: linear-gradient(0deg, rgb(220, 220, 220) 0%, rgb(238, 238, 238) 3%, rgb(238, 238, 238) 97%, rgb(220, 220, 220));
    background: -webkit-linear-gradient(top, rgb(220, 220, 220) 0%, rgb(238, 238, 238) 3%, rgb(238, 238, 238) 97%, rgb(220, 220, 220));
}

.accordionSliderOutBody {
    padding: 1px;
    border: 0
}

.accordionSliderInBody div {
    padding: .3em .7em .5em .7em
}

.accordionSliderInBody pre {
    margin: 0em;
    padding: .3em
}

.accordionCloser {
    border-top: 1px solid #bbbbbb;
    margin-bottom: 1.7em
}


/* ----------------------------------------------------------------------------- */
/*  5. Homepage
/* ----------------------------------------------------------------------------- */

#home {
    width: 740px;
    padding-top: 10px;
    float: left;
}

#home div {
    display: table-cell;
    vertical-align: middle;
    position: relative;
    height: inherit
}

#home a {
    height: 200px;
    padding: 20px;
    margin: 0;
    background: white;
    list-style-type: none;
    font-weight: normal;
    border: 1px solid transparent;
    color: black;
    box-shadow: 1px 1px 5px #AAA;
    -webkit-box-shadow: 1px 1px 5px #AAA;
    -moz-box-shadow: 1px 1px 5px #AAA;

    border-radius: 10px;
}

#home a h2 {
    margin-top: 0;
}

#home #slideshow {
    transition: transform 200ms ease-in-out;
}

#home #slideshow:hover {
    transform: scale(1.05);
}

#home a.box:hover {
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.4);
    color: black;
    transform: scale(1.1);
}

#home a strong {
    font-size: 23px;
    font-weight: 100
}

#home a.big {
    width: 100%;
    box-sizing: border-box;
    display: block;
}

span.uhr_min {
    position: relative;
    top: -0.3em;
    font-size: 0.7em;
    margin-left: 0.1em;
    text-decoration: none;
}


#sparten {
    float: left;
    width: 660px;
    padding-right: 10px;
}

#sidebar {
    float: right;
    width: 290px;
}


tr.ausgebucht {
    background-color: #ED9B4F;
}

tr.ausgebucht:hover td {
    background-color: red !important
}

tr.ausgebucht a:link,
tr.ausgebucht a:visited,
tr.ausgebucht a:active {
    color: #000000;
}

.spacer {
    border: none;
    height: 20px
}

.spacer:hover {
    background: transparent;
    cursor: default
}

.new-badge {
    background-color: darkorange;
    border-radius: 4px;
    color: white;
    font-weight: bold;
    padding: 0.1em 0.5em;
    text-shadow: none;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}

.sparte.centered {
    left: 50%;
    margin-left: -22%;
    height: auto
}

.sparte.dynheight {
    height: auto
}

.sparte.nopadding {
    padding: 0
}

.sparte.homespecial {
    border: 5px solid white;
    border-radius: 10px
}

.sparte.activated, .sparte.activated .sparte_aktivitaet {
    height: 200px !important
}

.sparte.activated a.showcase {
    height: 200px !important
}

.sparte_aktivitaet:hover, .sparte a.showcase:hover {
    height: 200px !important
}

.sparte {
    position: relative;
    width: 44%;
    float: left;
    height: 400px;
    padding: 10px;
    margin-bottom: 10px;
    margin-right: 10px;
    -webkit-transition: all .2s ease-out;
    -moz-transition: all .2s ease-out;
    -o-transition: all .2s ease-out;
    transition: all .2s ease-out;
    background: white;
    -webkit-box-shadow: 1px 1px 5px #AAA;
    box-shadow: 1px 1px 5px #AAA;
    overflow: hidden
}

.sparte.noshadow {
    -webkit-box-shadow: 0;
    box-shadow: 0;
    background-color: transparent
}

.sparte a.showcase {
    text-decoration: none;
    display: block;
    position: relative;
    height: 86px;
    min-width: 240px;
    margin: 0px auto;
    background-position-y: 30%;
    background-color: white
}

.sparte_subtext {
    padding-bottom: 20px
}

.sparte_aktivitaet {
    height: 86px;
    background: transparent;
    background-repeat: no-repeat;
    background-color: rgba(0, 0, 0, 0.3);
    background-position: right top;
    /* border-right: 20px solid red; */
    -webkit-transition: all .2s ease-out;
    -moz-transition: all .2s ease-out;
    -o-transition: all .2s ease-out;
    transition: all .2s ease-out;
}

.sparte_aktivitaet:hover {
    background-image: none;
    background-color: transparent;
    height: 150px
}

.sparte a.showcase:hover {
    height: 150px;
}

.sparte_aktivitaet:hover .sparte_aktivitaet_titel,
.sparte_aktivitaet:hover .sparte_aktivitaet_utitel {
    color: white;
    text-shadow: -1px -1px 6px #000,
    1px -1px 6px #000,
    -1px 1px 6px #000,
    1px 1px 6px #000;
    background-color: #146400;
}

.sparte_descr {
    padding: 20px;
    position: relative;
}

.sparte_aktivitaet_titel {
    text-align: right;
    font-size: 16px;
    font-weight: 500;
    color: #fff;
    text-shadow: -1px -1px 3px #000,
    1px -1px 3px #000,
    -1px 1px 3px #000,
    1px 1px 3px #000;
    padding-bottom: 1px;
    -webkit-transition: all .2s ease-out;
    -moz-transition: all .2s ease-out;
    -o-transition: all .2s ease-out;
    transition: all .2s ease-out;
    background-color: #0f4800;
    background-color: rgba(0, 0, 0, 0) !important;
    border-left: 1px solid white;
    border-right: 1px solid white;
    border-top: 1px solid white;
    border: 1px solid rgba(0, 0, 0, 0) !important;
    padding: 5px 5px 0px 5px
}

.sparte_aktivitaet_utitel {
    font-size: 12px;
    text-align: right;
    color: #fff;
    text-shadow: -1px -1px 3px #000,
    1px -1px 3px #000,
    -1px 1px 3px #000,
    1px 1px 3px #000;
    font-weight: 100;
    white-space: pre-line;
    -webkit-transition: all .2s ease-out;
    -moz-transition: all .2s ease-out;
    -o-transition: all .2s ease-out;
    transition: all .2s ease-out;
    border-left: 1px solid white;
    border-right: 1px solid white;
    border-bottom: 1px solid white;
    border: 1px solid rgba(0, 0, 0, 0) !important;
    background-color: #0f4800;
    background-color: rgba(0, 0, 0, 0) !important;

    padding: 0px 5px 5px 5px
}

.failure, .error {
    font-weight: 700;
    color: red
}

.warning, a.warning {
    font-weight: 700;
    color: darkorange
}

.success, .no-dec.success {
    font-weight: 700;
    color: green !important
}

.thin {
    font-weight: 500 !important
}


.sjr-login-button {
    display: inline-block;
    padding: 5px 8px;
    background: #006e00;
    color: white !important;
    font-weight: bold;
    border-radius: 4px;
    cursor: pointer;
}

.sjr-login-button:hover {
    background: #0f4800;
    color: white;
}