@import url(https://fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,400,700);
@import url(https://fonts.googleapis.com/css?family=Ubuntu:500);

@charset "utf-8";
/* CSS Document */

body {padding: 0px; margin: 0px;}
html, body {height: 100%; padding: 0px; margin: 0px;
  background: #dbe5e9;  
}

td, div {font-family: Arial, Helvetica, sans-serif; font-size: 13px; line-height: 1.5em; color: #061E57;}

/*-- CSS Inhalt zentrieren --*/

.bkgr_header {width: 100%; height: 400px; z-index: 1;}

.landscape_wrapper {width: 100%; height:  400px; z-index: 5;}
.landscape {
width: 100%; height: 400px;
background: #06407a; /* Old browsers */
background: -moz-linear-gradient(-45deg, #06407a 0%, #3f72a4 37%, #3f72a4 60%, #06407a 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(-45deg, #06407a 0%,#3f72a4 37%,#3f72a4 60%,#06407a 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(135deg, #06407a 0%,#3f72a4 37%,#3f72a4 60%,#06407a 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#06407a', endColorstr='#06407a',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}
.landscape {
  -moz-box-shadow:    0px 3px 4px 0px #444;
  -webkit-box-shadow: 0px 3px 4px 0px #444;
  box-shadow:         0px 3px 4px 0px #444;
}

.container {width: 960px; position: absolute; top: 0; left: 50%; margin-left: -480px; z-index: 10;}


/*---- Layout Detail ----*/

.streifen {
    background: url(img.templ/bkgr_streifen2.png);
    width: 100%;
    height: 12px;
    top: 104px;
    position: absolute;
}
.topmen {width: 960px; height: 30px;}
.header {width: 960px; height: 200px;}
.header .logo {
    width: 315px;
    height: 160px;
    float: left;
    background: url(img.templ/hochlitten_logo3.png);
    background-size: 100%;
    position: absolute;
    top: 30px;
}

.header .willkommen {
    width: 480px;
    height: 70;
    float: right;
    background: url(img.templ/herzl_willkommen2.png);
    top: 120px;
    left: 480;
    position: absolute;
}

.content {/*width: 960px;*/ background: #FFFFFF; padding: 10px;}
.content {
  -moz-box-shadow:    0px 3px 4px 0px #444;
  -webkit-box-shadow: 0px 3px 4px 0px #444;
  box-shadow:         0px 3px 4px 0px #444;
}


.inhalt {width: 940px;}

.inhalt #text {float: left; padding: 15px 20px 0 20px; background: #c3d4dd;}
.inhalt #trenner {width: 10px; background: #FFFFFF; float: left;}
.inhalt #rechts {float: right; padding-left: 10px; height: 100%;}

.container #menue {width: 100%; height: 35px; margin-bottom: 10px;}

.inhalt #text #textwrapper {width: 630px; margin-bottom: 20px;}
.inhalt #rechts .aktuelles, .inhalt #rechts .livecam, .inhalt #rechts .infos, .inhalt #rechts .b-zeiten {background: #c3d4dd; padding: 15px;}
.inhalt #rechts .aktuelles, .inhalt #rechts .livecam, .inhalt #rechts .b-zeiten {margin-bottom: 10px;}
.inhalt #rechts .livecam .csc-textpic {margin-bottom: 0;}
.inhalt #rechts #textwrapper {width: 230px;}
.inhalt #rechts #trenner {height: 10px; width: 260px;}

.inhalt #clearer {clear: both;}

.csc-textpic {margin-bottom: 40px;}
p.csc-header-date {margin-bottom: 0 !important;}
.csc-header h1 {margin-bottom: 0 !important; margin-top: 0.2em;}

/*---- Textformatierungen ----*/

#rechts td, #rechts div {color: #061E57;}
.csc-textpic-caption {font-style: italic;}


h1 {font-family: 'Ubuntu'; font-size: 24px; color: #B72321; line-height: 40px; top: 0px; margin-top: 15px;}
h2 {font-family: 'Ubuntu'; font-size: 20px; color: #B72321; line-height: 36px;}
h3 {font-family: 'Ubuntu'; font-size: 18px; color: #B72321; line-height: 24px; margin-bottom: 3px;}
h4 {font-family: 'Ubuntu'; font-size: 16px; color: #B72321; margin-bottom: 3px;}
h5 {font-family: 'Ubuntu'; font-size: 13px; color: #B72321; margin-bottom: 3px;}
h6 {font-family: 'Ubuntu'; font-size: 12px; color: #B72321; margin-bottom: 3px;}

#text .csc-firstheader {font-family: 'Ubuntu'; font-size: 24px; color: #B72321; line-height: 34px; top: 0px; margin-top: 0px;}
#rechts .csc-firstheader {font-family: 'Ubuntu'; font-size: 20px; color: #B72321; line-height: 22px; top: 0px; margin-top: 0px;}

#rechts h1 {font-family: 'Ubuntu'; font-size: 18px; color: #B72321; line-height: 22px; top: 0px; margin-top: 0px;}
#rechts h2 {font-family: 'Ubuntu'; font-size: 14px; color: #B72321; line-height: 18px;}


.csc-subheader {font-size: 20px; color: #000000; margin-bottom: 3px; normal; text-transform: uppercase; font-weight: bold;}

.csc-header-date {font-size: 0.9em; font-style: italic;}

.header #adresse {font-family: 'InsigniaRoman'; font-size: 14px; color: #FFFFFF;}

a {color: #B72321;}
a:link {color: #B72321; text-decoration: underline;}
a:visited {color: #B72321; text-decoration: underline;}
a:hover {color: #FFFFFF; background-color: #B72321; text-decoration: none;}

.header #adresse a {color: #06523D;}
.header #adresse a:link {color: #06523D; text-decoration: none;}
.header #adresse a:visited {color: #06523D; text-decoration: none;}
.header #adresse a:hover {color: #0F9040; background: none; text-decoration: none;}

.header #logo a:hover {color: #0F9040; background: none; text-decoration: none;}

#rechts .aktuelles h5 {height: 27px; width: 200px; background: url(img.templ/pfeil_aktuelles.jpg) top left no-repeat; padding-top: 4px; padding-left: 10px; margin-top: 0px; margin-bottom: 15px;}
#rechts .aktuelles h5 a {color: #FFFFFF; font-weight: bold; font-size: 13px; text-transform: none;}
#rechts .aktuelles h5 a:link {color: #FFFFFF; text-decoration: none;}
#rechts .aktuelles h5 a:visited {color: #FFFFFF; text-decoration: none;}
#rechts .aktuelles h5 a:hover {color: #000000; text-decoration: none; background: none;}
#rechts .infos .contenttable a:hover {text-decoration: none; background: none;}

.content #menue .inhalt {text-align: right;}
.content #menue .inhalt, .content #rechts .inhalt {color: #5D4D2C; text-shadow: 1px 1px 0px #FFFFFF;}
.content #rechts .inhalt .slogan {color: #D6572A; font-size: 16px; font-weight: bold; font-style: italic; text-shadow: 1px 1px 0px #FFFFFF; margin-bottom: 30px;}

.csc-textpic .csc-textpic-imagewrap a:hover {background: none;}
.csc-textpic .csc-textpic-imagewrap a:link img {border-bottom: 3px solid #E3E5EA;}
.csc-textpic .csc-textpic-imagewrap a:hover img {border-bottom: 3px solid #B72321;}

.csc-textpic-caption {font-size: 13px; font-style: italic; color: #061E57;}

.logo a img {border: none;}
.logo a:hover {background: none;}

/*--- Menue ---*/

.container #menue ul {padding-top: 8px; margin-top: 0px; text-align: center; list-style:none; margin-left: 0px; padding-left: 0px; position: absolute;}

.container #menue ul li {float: left; padding-left: 25px; padding-right: 25px; background-position: left; background-repeat: no-repeat; margin-top: 0px;}
.container #menue ul li:first-child {float: left; padding-left: 0px; padding-right: 24px; background-image: none;}
.container #menue ul li:last-child {padding-right: 0;}

.topmen ul {padding-top: 0px; padding-left: 0px; margin-top: 8px; text-align: center; list-style:none; margin-left: 0px; float: right;}

.topmen ul li {float: left; padding-left: 25px; padding-right: 0px; margin-top: 0px;}
.topmen ul li:first-child {float: left; padding-left: 0px; padding-right: 12px; background-image: none;}

.container #menue ul li a {font-family: 'Ubuntu'; color: #fff; font-size: 17px;}
.container #menue ul li a {font-size: 17px\9}
.container #menue ul li a:link {color: #fff; text-decoration: none;}
.container #menue ul li a:visited {color: #fff; text-decoration: none;}
.container #menue ul li a:hover {color: #B72321; background: none; text-decoration: none;}

.container #menue ul .act a {color: #B72321; font-size: 17px;}
.container #menue ul .act a {font-size: 17px\9}
.container #menue ul .act a:link {color: #B72321; text-decoration: none;}
.container #menue ul .act a:visited {color: #B72321; text-decoration: none;}
.container #menue ul .act a:hover {color: #061E57; background: none; text-decoration: none;}

.topmen ul li a {font-family: 'Ubuntu'; color: #FFFFFF; font-size: 13px;}
.topmen ul li a {font-size: 12px\9}
.topmen ul li a:link {color: #FFFFFF; text-decoration: none;}
.topmen ul li a:visited {color: #FFFFFF; text-decoration: none;}
.topmen ul li a:hover {color: #B72321; background: none; text-decoration: none;}

/*--- Preislisten ---*/
.preisliste {margin-bottom: 20px;}
.preisliste td {background-color: #dadce1; text-align: left; padding: 3px;}
.preisliste th {background-color: #6cabf5; color: #FFFFFF; font-size: 13px; font-weight: 700; text-align: left; padding: 3px;}

.preisliste .tr-0 .td-1 {text-align: center;}
.preisliste .td-0 {width: 300px;}
.preisliste .td-1 {text-align: right; padding-left: 15px; padding-right: 15px;}
.preisliste tfoot td {background: none; font-style: italic;}
.sp1 {vertical-align: top; font-weight: bold;}
.bank td {background: none;}
.bank {padding: 0px;}

/*--- IE-Meldung ----*/

.inhalt #ie-warnung {visibility: hidden;}

/*--- Google Map ---*/
.cbQuickGoogleMap {margin-bottom: 20px;}
.inner_cbQuickGoogleMap {border: 1px solid #CBCBCB;}

/*-- Formular --*/
.eingabe {padding-bottom: 10px;}



/*-----------------------------------------------------------------*/
/*--------- handgestricktes Responsive Design ---------------------*/

@media (max-device-width : 768px) {
  #text td, #text div {font-size: 18px; line-height: 1.5;}
  #rechts td, #rechts div {font-size: 18px; line-height: 1.5;}

  .landscape_wrapper {width: 100%; height:  400px; z-index: 5;}
  .landscape {
      width: 100%; height: 400px; 
  }

  .container {width: 100%; position: absolute; top: 0; margin-left: 0; left: 0;} 
  .content {background: #FFFFFF; padding: 10px;}

.inhalt {width: 100%;}
.inhalt #text {float: left; padding: 15px 20px 0 20px; background: #D0DFE7;}
.inhalt #trenner {display; none;}
.inhalt #rechts {float: left; padding-left: 0; height: 100%; width: 100%; margin-top: 10px;}
  
.inhalt #text #textwrapper {width: 100%; margin-bottom: 20px;}
.inhalt #rechts .aktuelles, .inhalt #rechts .livecam, .inhalt #rechts .infos, .inhalt #rechts .b-zeiten {background: #D0DFE7; padding: 15px;}
.inhalt #rechts .aktuelles, .inhalt #rechts .livecam, .inhalt #rechts .b-zeiten {margin-bottom: 10px;}
.inhalt #rechts .livecam .csc-textpic {margin-bottom: 0;}
.inhalt #rechts #textwrapper {width: 100%;}
  
  h1 { font-size: 32px; line-height: 1.5;}
h2 { font-size: 28px; line-height: 1.4;}
h3 { font-size: 24px; line-height: 1.4; }
h4 { font-size: 22px;}
  #text .csc-firstheader {font-size: 32px; line-height: 1.2; margin-top: 20px; margin-bottom: 30px !important;}
#rechts .csc-firstheader {line-height: 1.2; font-size: 32px;}
  
  /* -- spezifische Elemente aus-/einblenden --*/
  #c40, #c58, #c35 {display: none;} /* c40=Bildgallerie Startseite, c35=Anfahrt Maps, c58=Gallerie Testseite */
  
  .header .willkommen {
    display: none;
}
  .csc-textpic-image img {max-width: 100% !important; height: auto !important;}

  .csc-textpic-intext-left-nowrap .csc-textpic-text {
    margin-left: 0;}
  DIV.csc-textpic-intext-left-nowrap .csc-textpic-imagewrap {
    float: none;
}
  
}