/*

  Project:   segelschule-hering.de
  Author:  Philip Link
  Company:  Link IT development
  Web:    http://www.link-development.de
  Released:  11/2010
  Updated:

  Copyright (c) 2010 Link IT development
  All rights reserved



*/



html *
{

  border: 0;
  padding: 0;
   margin: 0;
  
}

body
{
  color:       #01315F;
  font-size:     12px;
  font-family:     arial, sans-serif;
  line-height:    18px;
  background-color:  #ffffff;
}


/*
  ######
  Header
  ######
*/
div.header
{

  width:     998px;
  border-top:  2px solid #01315F;
  border-bottom:  2px solid #01315F;
  margin:    40px auto 1px auto;
}
div.mobileheader
{
  width:     100%;
/*   border-top:  2px solid #01315F; */
   border-bottom:  2px solid #01315F;
/*   margin:    40px auto 1px auto; */
  display: none;
}

div.header-menu
{

  width:     998px;
  border-bottom:  2px solid #01315F;
  margin:    0 auto 0 auto;
  font-size:  18px;
  font-weight:  bold;
  padding:  4px 0 5px 0;
  height:    22px;
}


/* Mobile Navigation */
nav.menu-opener, div.mobilelogin, nav.menu {
  display: none;
}

.menu-opener {
  display: none;
    cursor: pointer;
    width: 100%;
    background: #00315f;
    text-align: right;
}

.menu, .menu * {
   display: none;
}
.menu.active, .menu.active * {
     display: block; 
}





#selectmenu {
  float: right;
}




.mobilefooter {
  display: none;
    width: 100%;
    background: #00315f;
  border-top: 20px solid white;
  clear: left;
  padding: 10px;
}

#mobilephone a, #mobilemail a, #mobiletop a {
  color: #ffffff;
  font-weight: bold;
  display: block;
}

#mobilephone a:hover, #mobilemail a:hover, #mobiletop a:hover {
  color: #888;
}

#mobilephone, #mobilemail {
  display: inline-block;
  width: 32%;
  text-align: center;
  vertical-align:  middle;
}

#mobiletop {
  display: inline-block;
  width: 32%;
  text-align: right;
  font-weight: bold;
  vertical-align:  middle;
}

#mobiletop svg path {
  fill: #fff;
  stroke: #fff;
}

#mobiletop svg path:hover {
  fill: #888;
  stroke: #888;
}
/*

  ##############
  Seitenstruktur
  ##############

*/







div.outer
{
  margin-left:    auto;
  margin-right:    auto;
  margin-top:    20px;
  border-right:    260px solid transparent;
  width:       738px;
  background:     url(/fileadmin/images/struktur/page_bg.gif) no-repeat 240px 0px;
}


.zweispaltig div.outer
{
   border-right:    0px; 
   width:      998px;
}


div.inner
{
  margin:     0;
  width:      100%;
   
}








div.left
{
  width:     220px;
  overflow:   hidden;
  float:    left;
  position:  relative;
}


div.content
{

  float:    left;
  width:     460px;
  position:  relative;
  padding:  0 28px 0 30px;


}

.zweispaltig div.content
{
   width:    748px; 
   padding:  0 0 0 30px;
}

div.topofright
{
  
  width:     256px;
  margin-right:   -260px;
  float:    left;
  position:  relative;
  z-index:   500;
  overflow:  visible;
  background-color:  #FFFFFF;
}




div.right
{
  
  width:     256px;
/*   margin-right:   -260px; */
  top:    0px;
  float:    left;
  clear:    none;
  position:  relative;
  z-index:   5;
  overflow:  visible;
  border:    2px solid #01315F;
  margin:    0 -260px 0px 0;
}

.zweispaltig div.topofright, .zweispaltig div.right
{
  visibility:  collapse;
}


div.footer

{
   width:     998px; 
  position:  relative;
/*   border-top:  2px solid #01315F; */
  margin:    20px auto 0 auto;
  padding:  10px 0 0 0;
  vertical-align:  bottom;
   height:    80px;
}

#foot1, #foot2, #foot3, #foot4
{
  font-style:   italic;
  color:     #888;
    margin:    0 20px 0 0;
    vertical-align: bottom;
     display:   block;
     float:     left;
}

#foot4
{
    margin:    0 0 0 0;
  position:   relative;
  top:    0px;
  float:    right;
}

#foot1 img, #foot2 img, #foot3 img
{
  padding:   0 5px 0 0;
  float:     left;
}

#foot4 img {
  padding: 0 0 0 5px;
}

#foot1 p, #foot2 p, #foot3 p, #foot4 p
{
     float:     left;
}

div.clear

{

  clear:     both;

}


.csc-frame-invisible {
  display: none;
}

/*
  NAVIGATION
  ==========
*/

.header-menu ul {
  display:   inline;
  padding: 0px;
}

.header-menu ul li a,
.header-menu ul li a:active,
.header-menu ul li a:visited {
  color:     #01315F;
  padding:  0 0 0 15px;
  vertical-align:  -2px;  
}

.header-menu ul li a:hover {
  color:     #931C52;
  text-decoration: none;
}

.header-menu ul li.hg a,
.header-menu ul li.hg a:active,
.header-menu ul li.hg a:visited,
.header-menu ul li.hg a:hover {
  color:     #931C52;
}




.header-menu ul li {
/*     display:   inline; */
  list-style-type: none;
   padding:   0 0 0 20px;
   vertical-align: top;
   float: left;
}

.subnavi,
.mainnavi {
  font-weight:  bold;
}

.subnavi ul li,
.mainnavi ul li {
  display: block;
  padding: 0 0 5px 18px;
}

.subnavi .subhead {
  font-size:  18px;
  font-style:   italic;
  color:    #888;
}

.subnavi ul.lay2,
.mainnavi ul.lay2 {
  padding: 0 0 0 15px;
}

/* Segelreviere/ Intro */
.seegebiete .mainnavi {
  padding-left: 18px !important;
}

.subnavi ul.lay2 li,
.mainnavi ul.lay2 li {
  font-size:  13px;
  font-weight:  normal;
  padding: 0;
}

.subnavi ul.lay3,
.mainnavi ul.lay3 {

  padding: 0 0 0 15px;
}

.subnavi ul.lay3 li,
.mainnavi ul.lay3 li {
  font-size:  11px;
  font-weight:  normal;
}

.subnavi ul li a,
.subnavi ul li a:active,
.subnavi ul li a:visited,
.mainnavi ul li a,
.mainnavi ul li a:active,
.mainnavi ul li a:visited {
  color:     #01315F;
  padding:  0 0 0 10px;
}

.subnavi ul li a:hover,
.mainnavi ul li a:hover {
  color:     #931C52;
  text-decoration: none;
}

.subnavi ul li.hg a,
.subnavi ul li.hg a:active,
.subnavi ul li.hg a:visited,
.subnavi ul li.hg a:hover,
.mainnavi ul li.hg a,
.mainnavi ul li.hg a:active,
.mainnavi ul li.hg a:visited,
.mainnavi ul li.hg a:hover {
  color:     #931C52;
}




.subnavi ul li ul,
.mainnavi ul li ul {
   padding: 0 0 0 5px;
}

















table

{
  border-collapse: collapse;
}

td

{
  vertical-align: top;
}



/*

  #################

  Inhalte

  #################

*/






h1 {
  font-size:  20px;
  font-weight:  bold;
  line-height:  24px;
  padding:  0 0 10px 0;
  
}

.left h1,
.right h1 {
  display:  block;
  background-color:  #01315F;
  color:    #FFF;
  padding:  3px 5px;
  text-align:  center;
}


h2 {
  font-size:  18px;
  font-weight:  bold;
  line-height:  22px;
  margin:    0 0 5px 0;
  padding:  0px 0 5px 0;
  color:    #888;
}

.right h2 {
  padding:  0;
}

h3 {
  font-size:  16px;
  font-weight:  bold;
  line-height:  20px;

  padding:  2px 5px;
  background-color:  #CCC;
  margin:    0 0 5px 0;
}

h4 {
  font-size:  14px;
  font-weight:  bold;
  line-height:  18px;
  border-bottom:  1px solid #888;
  padding:  5px 0 1px 0;
  margin:    0 0 5px 0;
  font-style:   italic;
  color:    #888;
}

h5 {
  font-size:  12px;
  font-weight:  bold;
  line-height:  16px;
  margin:    0 0 5px 0;
}

img {
  max-width: 100%;
  height: auto;
}

span.price
{
  display: block;
/*    width: 70px; */
   text-align: right;
  vertical-align: top;
  float: right;
  font-weight: bold;
  font-style: italic;
  font-size: 14px;
  color: #999;
}

span.info
{
  background-color: #fff1f1;
  padding: 2px 5px;
  display: block;
  border: 1px solid #ffc1c1;
  margin: 10px 0;
  width: 100%;
/*   color:  #FF0000; */
  font-weight: bold;
}

p
{
  line-height:  18px;
  margin:    0 0 10px 0;
}


.left p,
.right p {
  padding:  5px;
  margin:    0;
}



.content ul {
  padding:  0 0 10px 10px;
}

.content ul li {

  list-style-position:outside;
  padding: 0 0 0 5px;
  margin: 0 0 0 15px;
}

.left .csc-default {
  margin:    20px 0 0 0;
}

.content .csc-default {
  margin:    0 0 0px 0;
}

.csc-textpic-intext-right .csc-textpic-text {
  width:    300px;
}



.csc-textpic-caption {
  font-style:  italic;
  font-size:  10px;
  color:    #888;
}

.content .csc-textpic-imagerow {
  margin: 0 0 20px 0;
}

/* Accordion */

.hover {

  cursor: pointer;
}

.ka-panel {
  clear:  both;
}

.ka-content {
  float: left;
  clear: none;
  width: 100%;
}

.left .ka-content {
   padding: 3px 5px;
  border-left:  2px solid #01315F;
  border-right:  2px solid #01315F;
  border-bottom:  2px solid #01315F;
  width:   206px;
  background-color: #FFFFFF;
}


.open h4:after,
.close h4:after {
  float: right;
  font-style: normal;
  color: #931C52;
  font-size: 12px;
}

.open h4:hover:after,
.close h4:hover:after {
  color: #01315F;
}

.close h4:after {
  content:"mehr ▼";
}

.open h4:after {
  content:"weniger ▲";
}
/* ########
   News und RSS
   ########
*/

.news-latest-container, .tx_pitsrssnews {
  padding: 10px 17px;
}

.news-latest-item, .rss_newsitems {
  padding: 0 0 2px 0;
  border-bottom: 1px solid #888;
}

.news-latest-item h2, .rss_title b {
  font-size:  12px;
   margin:  5px 0 0 0;
  line-height: 20px;
}

.news-latest-item p,
.news-latest-item a,
.rss_desc,
.rss_desc p,
.rss_desc p a {
   padding:  0;
   color:     #01315F;
}

.news-single-img {

  float: left;
  margin: 0 20px 0 0;
}

.rss_date {
  display: none;
}

.rss_title b a {
  color:  #931C52;
}

/* ########
   Kalender
   ########
*/

.left div.tx-cal-controller {
  border-left:    2px solid #01315F;
  border-right:    2px solid #01315F;
  border-bottom:    2px solid #01315F;

  padding-top: 1px;
  padding-bottom: 10px;

}

.left div.tx-cal-controller-browsebox {
  margin: 10px 20px;
  text-align: center;
}

/* Fehlermeldungen ausblenden */
div.tx-cal-controller .error,
div.tx-cal-controller .message,
div.tx-cal-controller .note {
/*   display: none; */
}

table.calendar {
/*   width: 100%; */
   line-height: 14px;
   margin: 10px 20px;
}

table.calendar tr.last {
  border-bottom: 1px solid #888;
}

table.calendar td {
  padding: 4px 0;
}

table.calendar td.datetime {
/*   width: 150px; */
}

table.calendar td.category {
   padding: 7px 0 0 0;
}

table.calendar td.title {
/*    text-align: right; */
}

span.date {
  font-weight: bold;
}

span.time,
span.typ {
  font-size: 9px;
}

span.cat {

   font-weight: bold;
}


table.calendar-kurse {
  width:   100%;
  margin:  0 0 10px 0;
}

table.calendar-kurse th {
  text-align:     left;
  border-bottom:     1px solid #888;
}

table.calendar-kurse td {
  border-bottom:     1px solid #888;
}

.odd td {
  background-color:  #F4F4F4;
}

div.kursdetails {
  background-color: #fff1f1;
  border: 1px solid #ffc1c1;
  margin:      0 0 10px 0;
  padding:    0 10px;
}

.tx-cal-controller h1 {
  text-align: left;
}

.kursdetails h4 {
     color: #01315F;
}

.kursdetails span.date,
.kursdetails span.cat {
  font-size: 14px;
}

.kursdetails table.calendar {

   line-height: 14px;
   margin: 0px 10px 10px 10px;
}

.toerndetails label
{
  float:   left;
  width:  120px;
  font-weight: bold;
  padding: 3px;
}

.toerndetails span
{
  float: left;
  padding: 3px;
  width: 615px;
}

.toerndetails .row
{
  clear: both;
  border-bottom: 1px solid #888;
}

.toerndetails .calimage {
  border-bottom: none;
}

.toerndetails span.book {

  margin:  10px 0;
  width: 180px;
  padding: 10px;
  text-align:center;
  background-color: #E0DFDF;
  border: 1px solid #888888;
  /*color: #000000;*/
  font-weight: bold;
}

.toerndetails div.csc-textpic {
  padding: 0 0 10px 0;
}

.toerndetails div.csc-textpic-center div.csc-textpic-imagewrap {
  margin: 0;
}

.toerndetails div.csc-textpic-imagewrap {
  padding: 0 0 0 115px;

}

div.csc-textpic-intext-right .csc-textpic-imagewrap {
    float: none;
}

#calendar-organizer .csc-textpic {
  padding: 0 0 0 130px;

}

/* Mit BU */
.toerndetails dl{
   padding: 0 10px 0 0; 
}

.toerndetails div.csc-textpic-imagewrap dl li, #calendar-organizer .csc-textpic li{
  float: left;
  clear: none;
  margin:  5px 0 5px 5px;
  list-style-type: none;
  width: 150px;
}

/* ohne BU */
.toerndetails>li ,.toerndetails div.csc-textpic div.csc-textpic-imagewrap ul li{
   padding: 0 10px 10px 0; 
}

#calendar-event-backlink {
  clear: both;
}

#calendar-location .tx-wecmap-map {
  clear: both;
  margin: 15px 0 10px 130px;
}

#calendar-location .csc-textpic, #calendar-organizer .csc-textpic  {
  clear: both;
/*   float: left; */
  margin:  15px 0 10px 0px;

}


/* ########
   Galerie
   ########
*/

/************************
 * CATEGORY view 
 ************************/  

.category_row {
  margin: 0 0 10px 0;
}

.category_row_1,
.category_row_3,
.category_row_5,
.category_row_7,
.category_row_9,
.category_row_11,
.category_row_13,
.category_row_15,
.category_row_17,
.category_row_19 { background:#E7EDF1; }

.category_row_2,
.category_row_4,
.category_row_6,
.category_row_8,
.category_row_10,
.category_row_12,
.category_row_14,
.category_row_16,
.category_row_18,
.category_row_20 { background:#f4f4f4; }

.wtgallery_category_pic {
  float:  left;
  margin:  0 10px 0 0;
}

.wtgallery_title {
  float: left;
  font-size: 14px;
  font-weight: bold;
}

.list_row {

  margin: 0 0 20px 0;
}

.wtgallery_list_firstofrow {
  margin: 0 20px 0 0;
}

/* Pagebrowser */
.wtgallery_list_pagebrowser_area {
  border-top:1px solid #dde1e4;
  border-bottom:1px solid #dde1e4;
  padding:3px 0;  
  margin:2px 0;
}

.wtgallery_list_pagebrowser_area .clr { clear:both; }

.wtgallery_pagebrowser_list {
  list-style: none;
  margin: 0 0 30px 0;
  padding: 0;
}

.wtgallery_pagebrowser_list li {
  float: left;
  margin: 0 30px 0 0;
}


/* #########
   Facebook
   #########
*/   

#footerline {
  position:  fixed;
/*   bottom:    0px; */
  top:    0px;
  height:    40px;
/*   border-top:  2px solid #01315F; */
  border-bottom:  2px solid #01315F;
  background-image:url("/fileadmin/images/struktur/transparent_bg_darkwhite.png");
  width:     100%;
  z-index:  100;
  padding:  0;
}

#footerlinecontent
{

  width:     998px;
  margin:    0px auto 0px auto;
}

.tx-facebooksocialplugins-pi1 {
  padding: 10px 3px 3px 5px;
     float:left;   
}


div.qype {
  padding: 10px 3px 3px 25px;
     float:left;   
}

div.gplus {
  padding: 10px 3px 3px 25px;
     float:left;   
}

div.gplusprofil {
  padding: 10px 3px 3px 25px;
     float:left;   
}

/* ########
   Formulare
   ########
*/


form

{
  display:   inline;
}


input,
textarea,
select
{
  border: 1px solid #888;
  padding:  2px;
  font-size:     12px;
  font-family:     arial, sans-serif;
}

textarea
{
  width:    250px;
  height:    100px;
}

input.submit
{
  padding: 3px 30px;
}



input:hover,
input:focus,
input:active,
textarea:hover,
textarea:focus,
textarea:active,
select:hover,
select:focus,
select:active
{
  border: 1px solid #333;
}



.loginform {
/*   width:     215px; */
  /*border-left:    2px solid #01315F;
  border-right:    2px solid #01315F;
  border-bottom:    2px solid #01315F;*/
}

.loginform h1 {
  display:  block;
  background-color:  #01315F;
  color:    #FFF;
  padding:  3px 5px;
  text-align:  center;
}
.loginform form {
  display:  block;
  padding:  10px;
  
}

.loginform label
{

  display:   inline-block;
  width:     90px;
}



.loginform #user,
.loginform #pass
{
  width: 85px;
  display: inline;
  margin: 0 0 5px 0;
}

.loginform #submit
{
  margin:   0 0 5px 0;
  padding:  0 5px;
}


.newsletterform #Vorname,
.newsletterform #Name,
.newsletterform #EMail
{
  width: 190px;
}

.newsletterform #SubmitBtn
{
  margin:   0 0 5px 0;
  padding:  0 5px;
}
.newsletterform label
{
  display: inline-block;
  padding: 2px 0 0 5px;
   vertical-align: top;
}


/*
  ################
  Buchungsformular
  ################
*/

.formhandler_booking_form div.row,
.formhandler_booking_form div.row-sel,
.formhandler_booking_form div.row-sel-opt
{
  padding: 0 5px 5px 5px;
  width: 100%;
}

.formhandler_booking_form .firststep div.row-sel
{
  display: none;  
}

.formhandler_booking_form div.row-sel-opt
{
  padding: 0 5px 5px 30px;
  width: 435px;
  
}

.formhandler_booking_form div.row-sel-half
{
  padding: 0 5px 5px 5px;
  width: 220px;
  float: left;
}

.formhandler_booking_form div.row-last {
  padding: 5px;
}

div.row-sel:hover,
div.row-sel-opt:hover,
div.row-sel-half:hover {
  background-color: #DDD;
  cursor: pointer;
}

div.row-sel:hover *,
div.row-sel-opt:hover *,
div.row-sel-half:hover * {
  cursor: pointer;
}
.formhandler_booking_form label
{
  display: inline-block;
  width: 100px;
/*   text-align: right; */
  padding: 2px 5px 0 0;
  vertical-align: top;
}

.formhandler_booking_form label.right
{
  display: inline-block;
  width: 355px;
  padding: 2px 0 0 5px;
   vertical-align: top;
}

.formhandler_booking_form .row-sel-opt label.right,
.formhandler_booking_form .row-sel-half label.right
{
  width:  150px;
}

.formhandler_booking_form label.price
{
  display: inline-block;
   width: 70px;
   text-align: right;
  vertical-align: top;
  float: right;
  font-weight: bold;
  font-style: italic;
  font-size: 14px;
  color: #999;
}

.formhandler_booking_form label.step {
  color:    #999;
  font-style:  italic;
  padding:  0 0 0 20px;

}

.rad,
.rad:hover,
.rad:active,
.check,
.check:hover,
.check:active
{
   border: none;
  margin: 4px 0 0 0;
}

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

.formhandler_booking_form  li
{
  background-color: #fff1f1;
  padding: 2px 5px;
   display: block; 
  border: 1px solid #ffc1c1;
   margin: 10px 0; 
  width: 420px;
  color:  #FF0000;
  font-weight: bold;
     list-style-type: none;   
}


/* normale Liste innerhalb Buchungsformular */
.formhandler_booking_form ul.normal
{
   margin: 5px 0px; 
  list-style: square outside none;
}

.formhandler_booking_form .normal li
{
  background-color: transparent;
  padding: 0px 5px;
   display:list-item; 
  border: none;
  margin: 2px 20px;
  width:  100%;
  color:  #01315F;
  font-weight: normal;
  list-style-type:square;
  
}




.formhandler_booking_form span.req {
   font-weight: bold; 
    font-size:24px;
    vertical-align:text-bottom;
  color:    #FF0000;
  padding:  0 10px 0 10px;
  line-height:  16px;
}







/*

  ############

  Links

  ############

*/



a.pdf {
  background: url(/fileadmin/images/struktur/acrobat_icon.gif) no-repeat;
  padding: 2px 0 0 23px;
}

a.hilfe {
  background: url(/fileadmin/images/struktur/hilfe.png) no-repeat;
  padding: 2px 0 0 23px;
}

a.earth {
  background: url(/fileadmin/images/struktur/gearth_ico_low.gif) no-repeat;
  padding: 2px 0 0 23px;
}

a { text-decoration: none;}

a:link { color: #931C52; text-decoration: none;}

a:visited { color: #931C52; text-decoration: none;}

a:hover { color: #01315F; text-decoration: none;}

a:active { color: #931C52; text-decoration: none;}




.right h1 a,
.right h1 a:link,
.right h1 a:visited,
.right h1 a:hover
{
  color: white;
}





@media print {

  html * {
    color: #000;
    font-size: 14pt;
    line-height: 1.5em;
  }
  
  body {
    width: 100%;
  }
  
  div.header,
  div.header-menu,
  div.left,
  div.right,
  div.topofright,
  div.footer {
    display: none;
  }
  
  div.content,
  div.csc-default {
     width: 100%; 
     margin: 0; float: none;
  }
  
  h1 { font-size: 1.6em; }
  h2 { font-size: 1.4em; }
  h3 { font-size: 1.2em; }
  

}