/*
 *  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 }
	
      ul {
        list-style : none }
	
      .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-family:            "Roboto", "Helvetica Neue", "Arial", Sans-Serif ;
        -webkit-font-smoothing: antialiased ;
        text-shadow: 0 0 1px rgba(0,0,0,0.04);
        font-size:              90% ;
        background-color:       #DDD; }
        
      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 }
        
      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:  normal }
        
      td {
        font-size: 90% ;
        padding:   2px }
        
      th.descr ,
      td.descr {
	padding:      6px 0 25px 10px ;
	font-size:    16px ;
	font-weight:  normal }
	
      td.descr {
	text-align:   center;
        padding-top:  20px;
        color:        black }
	
      td input {
        font-weight:  500 }        
        
      td.hover {
	color:        transparent;
	width:        200px;
	font-weight:  200 }
		
      table tr {
        cursor:   pointer;
        height:   80px }
        
      table tr td {
        border-top:     1px solid #DDD;
        border-bottom:  1px solid #DDD;
        margin-top:     10px;
        padding:        15px 20px 15px 20px;
        vertical-align: middle;
        color:          #AAA }
        
      table tr.no-dec ,
      table tr.no-dec td ,
      table tr.no-dec th {
        border:       0 !important;
        background:   transparent !important;
        color:        #AAA;
        padding:      5px 10px 5px 10px !important }
        
      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: white;
        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;
        min-height:             70%;
        height:                 auto !important;
	position:               relative; 
	left:                   50%;
	margin-bottom:          20px;
	margin-left:            -500px; 
	padding:                20px;
	overflow:               auto;
	background:             #FBFBFB;
	padding-bottom: 200px;
	-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 }
 
      #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 }
        
      #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 }
      
      .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 {
              float: left; 
              height: 170px; 
              width: 300px; 
              padding: 20px; 
              margin: 0px 10px 10px 0px; 
              background: white; 
              list-style-type: none; 
              font-weight: normal; 
              border: 1px solid transparent;
          color: #888;
                      box-shadow: 1px 1px 5px #AAA;
              -webkit-box-shadow: 1px 1px 5px #AAA;
                 -moz-box-shadow: 1px 1px 5px #AAA;

              border-radius: 3px 3px 3px 3px;
              -webkit-border-radius: 3px 3px 3px 3px }
      
      #home a:hover {
              box-shadow: 0 0 3px #444;
              -webkit-box-shadow: 0 0 3px #AAA;
                -moz-box-shadow: 0 0 3px #AAA;

          color: black;
          background: #C0E4B7 }
      
      #home a strong { 
              font-size: 23px; 
              font-weight: 100 }
      
      #home a.big { width: 652px }
      
      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: 3px }
.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}