canvas {-ms-touch-action: double-tap-zoom; }
    html, body, div, span, applet, object, iframe,
    h1, h2, h3, h4, h5, h6, p, blockquote, pre,
    a, abbr, acronym, address, big, cite, code,
    del, dfn, em, img, ins, kbd, q, s, samp,
    small, strike, strong, sub, sup, tt, var,
    b, u, i, center,
    dl, dt, dd, ol, ul, li,
    fieldset, form, label, legend,
    table, caption, tbody, tfoot, thead, tr, th, td,
    article, aside, canvas, details, embed,
    figure, figcaption, footer, header, hgroup,
    menu, nav, output, ruby, section, summary,
    time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
    }
    /* HTML5 display-role reset for older browsers */
    article, aside, details, figcaption, figure,
    footer, header, hgroup, menu, nav, section {
    display: block;
    }
    body {
    line-height: 1;
    }
    ol, ul {
    list-style: none;
    }
    blockquote, q {
    quotes: none;
    }
    blockquote:before, blockquote:after,
    q:before, q:after {
    content: '';
    content: none;
    }
    table {
    border-collapse: collapse;
    border-spacing: 0;
    }
  
  
html,body {
  margin:0; padding:0;
  height:100.1%; /* needed for container min-height */
  /*background:white url(http://motorboot-segelschule-zuerichsee.ch/fileadmin/template/friedesail/img/background7.jpg); background-repeat:repeat-x;*/
  background:#DDDDDD;
  font-family:arial,sans-serif;
  font-size:small;
  color:#000000;
}
div#wrapper {
  position:relative; /* needed for footer positioning*/
  margin:0px auto 0px auto; /* center, not in IE5 */
  width:980px;
  height:auto !important; /* real browsers */
  height:100%; /* IE6: treaded as min-height*/
  min-height:100%; /* real browsers */
  background:#F0F0F0; /*Fallback falls Browser kein RGBA unterstütz*/
  background: rgba(200, 200, 200, 0.0);
}
h1 { 
  font:1.5em georgia,serif; 
  padding:15px 0px 5px 0px; margin:0px 0px 0px 0px;
  color:#000066;
}
h2 {
  font:1.25em SaricompMedium,sans-serif; georgia,serif;
  font-weight:bold;
  padding:15px 0px 5px 0px; margin:0px 0px 0px 0px;
  color:#000066;
}
h3 {
  font:1.1em arial,serif;
  font-weight:bold;
  padding:10px 8px 10px 8px; margin:0px 0px 0px 0px;
  color:#006688;
}
h4 {
  font:1.0em arial,serif;
  font-weight:bold;
  padding:0px 0px 5px 0px; margin:0px 8px 0px 8px;
  color:#006688;
  border-bottom:2px dotted silver;
}
p {
  line-height:1.2;
  color:#000066;
  text-align:left;
  margin:0; padding:0;
}

/*****Login*****/
form {
  border:2px outset #000034;
  box-shadow: 5px 5px 5px #000034;
  margin: 10px;
  width:293px;
}
fieldset {
  border:1px solid #000034;
  padding:10px;
  margin:10px;
  width:250px;
}
fieldset  legend{
  display:none;
}
div.tx-felogin-pi1 div {
  margin-left:10px;
}
div.tx-felogin-pi1 form fieldset div:nth-child(3) { /*Password-DIV*/
  margin-top:10px;
}
div.tx-felogin-pi1 form fieldset div:nth-child(4) { /*Submit-DIV*/
  margin-top:10px;
}
/*****End Login*****/

/*****über mich*****/
p.biographie {
  float:left;
  width:20%;
}
p.biographie2 {
  float:left;
  width:60%;
}
/*****End über mich*****/

/*****Downloads*****/
div.csc-textpic-imagewrap {
  padding-left:8px;
}
caption.csc-textpic-caption {
  margin-top:3px;
}
/*****End Downloads*****/

strong, b {
    font-weight: bold;
}
section a:link, section a:visited {
  color:#000066;
  text-decoration:underline;
  }
section a:hover, section a:focus {
  color:gray;
  text-decoration:underline;
}
section a:active{
  color:#000000;
  text-decoration:underline;
}
header a:link, header a:visited {
  color:black;
  text-decoration:none;
  }
header a:hover, header a:focus {
  color:black;
  text-decoration:underline;
}
header a:active{
  color: #000000;
  text-decoration: underline;
}
header {
  padding:0px;
  height: 100px;
}
header a{
  margin:0px 0px 0px 0px; padding:14px 0px 0px 0px;
  color:#000000;
}
header #logo {
  float:left;
  width:580px; height:80px;
  margin:12px 0px 0px 0px; padding:0px 0px 0px 0px;
  background:#000034 url(../img/logo_big.jpg);
  box-shadow: 5px 5px 5px #000034;
}
header #logo a {
  width:580px; height:80px;
  padding:0;
  border:0px solid black;
  display:block; 
  text-indent:-9999px;
}
div#member {
  float:right;
  padding:14px 12px 0px 0px;
}
div#member a {
  float:right;
  padding-top:10px;
}
div#member:hover a {
  text-decoration:underline;
}
div#member a.header-nav-login {
  float:right;
  margin:10px 0px 0px 0px;
}
.header-nav {
  float:right;
  margin:0px 0px 0px 0px;
}
.header-nav img{
  box-shadow:none;
  margin:0px 0px 0px 0px; padding:0px;
}
.header-lang {
  float:right;
  margin:8px 25px 0px 30px;
}
header #home {
  float:right;
  width:28px;height:28px;
  margin:14px 0px 0px 0px; padding:0px 0px 0px 0px;
  background:url(../img/home.png);
  background-repeat:no-repeat;
}
header #home a {
  width:28px; height:28px;
  padding:0;
  border:0px solid black;
  display:block;
  text-indent:-9999px;
}
/*Sprachumschaltung*/
.my-language-change {
  float:right;
  padding:23px 20px;
}
.my-language-change ul li {
  list-style-type:none;
  margin:0px 3px; padding:0;
  float:left;
}
.my-language-change ul li  a{
  margin:0; padding:0;
}
/*******************************************************************************************/
/******************************* Navigation formatieren ************************************/
/*******************************************************************************************/
nav {
  background:#000034;
  background: -moz-linear-gradient(top,  #bad8f2 0%, #000034 30%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#bad8f2), color-stop(30%,#000034));
  background: -webkit-linear-gradient(top,  #bad8f2 0%,#000034 30%);
  background: -o-linear-gradient(top,  #bad8f2 0%,#000034 30%);
  background: -ms-linear-gradient(top,  #bad8f2 0%,#000034 30%);
  height: 46px;
  margin:0px 0px 10px 0px;
}
nav ul {
  padding:0px; margin:0px;
}
nav ul li { /*Hauptmenüs formatieren*/
  list-style-type:none;
  width:139px; height:46px; border-right:1px dotted grey;
  float:left; z-index:100;
  position:relative;
  padding: 0px 0px 0px 0px; margin: 0px 0px 0px 0px;
  color:#BAD8F2; font-weight:bold; font-size:13px;
  text-decoration:none; text-align:center;
  background:#000034;
  background: -moz-linear-gradient(top,  #bad8f2 0%, #000034 30%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#bad8f2), color-stop(30%,#000034));
  background: -webkit-linear-gradient(top,  #bad8f2 0%,#000034 30%);
  background: -o-linear-gradient(top,  #bad8f2 0%,#000034 30%);
  background: -ms-linear-gradient(top,  #bad8f2 0%,#000034 30%);
}
nav ul li:last-child {
  width:140px; border:none;
}
nav a {
  text-decoration:none;
  color:#BAD8F2; font-weight:bold; font-size:13px;
  height:46px;
  float:left; width:140px;
  line-height:46px;
  padding:0px 0px 0px 0px;
}
/*Textfarben im Hover formatieren. Die beiden folgenden Klassen müssen in dieser Reihenfolge stehen.*/
nav ul li:hover ul li a {
  color:#BAD8F2;
}
nav ul li:hover a, nav ul li ul li:hover a {
  color:#FFFFFF;
}

nav ul li ul{
  display: none; /*Untermenüs ausblenden*/

}
/*Hover auf Hauptebene*/
nav ul li:hover { /*Farben der Hauptmenüs im hover formatieren*/
  background: #bad8f2;
  background: -moz-linear-gradient(top,  #bad8f2 0%, #000034 80%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#bad8f2), color-stop(80%,#000034));
  background: -webkit-linear-gradient(top,  #bad8f2 0%,#000034 80%);
  background: -o-linear-gradient(top,  #bad8f2 0%,#000034 80%);
  background: -ms-linear-gradient(top,  #bad8f2 0%,#000034 80%);
  color:#FFFFFF; text-decoration:none;
}
nav > ul > li.is-sub > ul { /*Untermanü langsam einblenden*/
  display:block;
  /*visibility:visible;*/
  opacity:1; /*Transparenz*/
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha"(Opacity=100);
  -webkit-transition: opacity 0.4s linear;
  -moz-transition: opacity 0.4s linear;
    -ms-transition: opacity 0.4s linear;
    -o-transition: opacity 0.4s linear;
  transition: opacity 0.4s linear;  
}
nav > ul > li.has-sub > ul { /*Untermenü ausblenden (die Classe wird mittels jQuery entfernt)*/
  visibility:hidden; /*muss aktiv sein, sonst sind die Untermenüs zwar unsichtbar aber aktiv über der Slideshow. -> transition funktioniert leider nicht*/
  opacity:0;
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha"(Opacity=0);
  -webkit-transition: opacity 0.2s linear;
  -moz-transition: opacity 0.2s linear;
    -ms-transition: opacity 0.2s linear;
    -o-transition: opacity 0.2s linear;
  transition: opacity 0.2s linear;  
}
nav ul li:hover ul li { /*gibt den Untermenüs die Grundfarben und noch nicht die hover-Farben (ohne diese Formatierung würden die Farben vom hover vererbt werden)*/
  background:#000034;
  background: -moz-linear-gradient(top,  #bad8f2 0%, #000034 30%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#bad8f2), color-stop(30%,#000034));
  background: -webkit-linear-gradient(top,  #bad8f2 0%,#000034 30%);
  background: -o-linear-gradient(top,  #bad8f2 0%,#000034 30%);
  background: -ms-linear-gradient(top,  #bad8f2 0%,#000034 30%);
  color:#BAD8F2;
}
/*Hover auf Unterebene*/
nav ul li ul li:hover { /*Ändert bei den Untermenüs auf die hover-Farbe wenn mit der Maus gehvoert wird*/
  background: #bad8f2;
  background: -moz-linear-gradient(top,  #bad8f2 0%, #000034 80%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#bad8f2), color-stop(80%,#000034));
  background: -webkit-linear-gradient(top,  #bad8f2 0%,#000034 80%);
  background: -o-linear-gradient(top,  #bad8f2 0%,#000034 80%);
  background: -ms-linear-gradient(top,  #bad8f2 0%,#000034 80%);
  color:#FFFFFF;
}

/*Pfeil nach unten formatieren (wenn Untermenü vorhanden)*/
nav > ul > li.is-sub > a:after {
  content: '';
  position: absolute;
  right:7px; /* Position vom Pfeil */
  top: 20px; /* Position vom Pfeil */
  border: 5px solid transparent; /* Background vom Pfeil nach unten */
  border-top: 5px solid #BAD8F2; /* Pfeil nach unten */
}
nav > ul > li.is-sub:hover > a:after {
  border-top: 5px solid #FFFFFF;  /* Pfeil im hover weiss (wie der Text) */
  border-left: 5px solid transparent;  /* Pfeil nach rechts ausblenden */
}
/*Pfeil nach rechts formatieren (wenn Untermenü vorhanden)*/
/*Diese Class muss nach der Class is-sub stehen, damit sie dominant ist. Mit der Toggle-Funktion wird sie dann deaktiviert und die Class is-sub wird aktiv.*/
nav > ul > li.has-sub > a:after {
  content: '';
  position: absolute;
  top: 18px; /* Position vom Pfeil */
  right: 5px; /* Position vom Pfeil */
  border: 5px solid transparent; /* Background vom Pfeil nach rechts */
  border-left: 5px solid #BAD8F2;  /* Pfeil nach rechts */
}
nav > ul > li.has-sub:hover > a:after {
  border-left: 5px solid #FFFFFF;  /* Pfeil im hover weiss (wie der Text) */
  border-top: 5px solid transparent;  /* Pfeil nach unten ausblenden */
}
.gradient {
  cursor:pointer;
}
/*================================================================================*/  
/*========================= Inhalt formatieren ===================================*/
/*================================================================================*/  
section {
  padding:0px 0px 25px 0px; /* bottom padding for footer */
}
section p {
  padding:8px 8px;
}
div#background {
    background-color:#000034;
    height:376px;
    margin:0;
    opacity:0.15;
    padding:0;
    position:absolute;
    top:665px;
    width:100%;
    z-index:0;
}
div#background-header {
    background-color:#000034;
    height:126px;
    margin:0;
    opacity:0.15;
    padding:0;
    position:absolute;
    top:0px;
    width:100%;
    z-index:0;
}
article#pagecontent-index div div#background-thumb {
  border:none; box-shadow:none;
  background:#000034;
    height:100px;
    margin:0;
    opacity:0.9;
    padding:0;
    /*position:absolute;
    top:51px; left:-15px;*/
  position:relative;
    width:750px;
    z-index:-1;
}
article#pagecontent-index div div#background-thumb:hover {
  border:none;
  box-shadow:none;
}
article {
  padding:0px; margin:0px;
}
article span { /*Titel in den Startpage-Bilder*/
  font-weight:bold;
}
article p.firstparagraph {
  text-align:justify;
  padding:15px 0px 0px 10px; margin:0px;
  font-size:16px;
  line-height:20px;
  font-weight:bold;
}
article p.titleparagraph {
  text-align:justify;
  padding:0px 0px 0px 10px; margin:0px;
  font-size:12px;
  font-weight:bold;
}
article p.titleparagraph span {
  padding:0px;
  font-weight:normal;
}
article p.standardparagraph {
  text-align:justify;
  padding:0px 0px 5px 20px; margin:0px;
  font-size:16px;
  line-height:20px;
}
article#sidebar {
  padding:10px 15px 10px 15px;
  margin:30px 0px 0px 0px;
  width:180px;
  float:left;
  min-height:420px;
  background:#ddd;
  box-shadow: 5px 5px 15px #777777;
}
.newsheader {
  font-weight:bold;
  padding-bottom:0;
}
article#slideshow {
  padding:0px 0px 5px 0px; margin:0px;
  box-shadow: 5px 5px 15px #000000;
  background-color:white;
}

article#pagecontent {
  padding:10px 15px 18px 15px;
  margin:30px 0px 0px 20px;
  width:720px;
  min-height:412px;
  float: left;
  background:#ddd;
  box-shadow: 5px 5px 15px #777777;
}
article#pagecontent-index { /*für die Startseite wird ein eigenes div mit einspaltigen Layout verwendet*/
  padding:10px 15px 10px 15px;
  margin:30px 0px 0px 20px;
  width:720px;
  min-height:420px;
  float: left;
  background:#ddd;
  box-shadow: 5px 5px 15px #777777;
}
article#pagecontent_big { /*für Seiten mit einspaltigen Layout wird das div pagecontent_big eingesetzt*/
  padding:10px 45px 20px 45px;
  margin:30px 0px 0px 0px;
  width:91%;
  min-height:410px;
  float: left;
  background:#ddd;
  box-shadow: 5px 5px 15px #777777;
}
article#pagecontent-index div div#content-wrapper-big { /*content-wrapper-big umfasst die vier Tumbs auf der Startseite*/
    border:medium none;
    box-shadow:none;
    float:none;
    height:auto;
    margin:0;
    padding:0;
    /*position:absolute;*/
    width:720px;
  z-index:10;
}
article#pagecontent-index div div, article#pagecontent-index div div.first { /*Formatiert die Tumbs auf der Startseite*/
  padding:0px; margin:17px 5px 15px 14px;
  float:left;
  width:154px; height:240px;
  border:3px solid #000066;
  box-shadow: 0px 5px 10px #000000;
}
article#pagecontent-index div div.first { /*Spezialformat für das erste Tumb auf der Startseite*/
  padding:0px; margin:17px 5px 15px 9px;
}
article#pagecontent-index div div:hover {
  border:3px solid black;
  box-shadow: 0px 5px 10px #FFFFFF;
}

#mapcontainer { /*Div für SchulungsStandort-Maps formatieren*/
  margin-left:8px;
  width:670px; height:400px;
}
#webcam {
  margin-left:8px;
  width:auto; height:auto;
}

#pagecontent_big img.wetter_img {
  width:60%;
  height:auto;
}
#pagecontent_big div.wetter_aussichten {
  float:left;
  margin-right:10px;
}
#pagecontent_big div.wetter_aussichten:last-child {
  float:left;
  margin-right:0px;
}


/*******************************************************************************************/
/********************************* Footer-Formatierung *************************************/
/*******************************************************************************************/
#footer { /*Schmaler Footer innerhalb Wrapper*/
  background:#000034;
  background: -moz-linear-gradient(top,  #bad8f2 0%, #000034 30%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#bad8f2), color-stop(30%,#000034));
  background: -webkit-linear-gradient(top,  #bad8f2 0%,#000034 30%);
  background: -o-linear-gradient(top,  #bad8f2 0%,#000034 30%);
  background: -ms-linear-gradient(top,  #bad8f2 0%,#000034 30%);
  line-height:20px;
  display:none;
}
#footery { /*Breiter Footer ganzes Browserfenster*/
  background:#000034;
  background: -moz-linear-gradient(top,  #bad8f2 0%, #000034 30%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#bad8f2), color-stop(30%,#000034));
  background: -webkit-linear-gradient(top,  #bad8f2 0%,#000034 30%);
  background: -o-linear-gradient(top,  #bad8f2 0%,#000034 30%);
  background: -ms-linear-gradient(top,  #bad8f2 0%,#000034 30%);
  line-height:20px;
}
footer address{
  padding:16px 0px 14px 0px; margin:0;
  text-align:center;
  color:#BAD8F2;
}
.clear {clear:both;}


/*===================================================
1. Media Queries Anpassung (Browserfenster < 998px)
====================================================*/

@media only screen and (max-width: 998px) {
div#background {
  display:none;
}
div#background-header {
    height:156px;
}
article#pagecontent-index div div#background-thumb {
  width:762px;
}
article#pagecontent-index {
  width:732px;
}
div#wrapper {
  width:805px;
  /*background:#F0F0F0;*/
}
section#content {
  background:#F0F0F0; /*ohne Transparenz*/
}
article#sidebar {
  margin:30px 10px 0px 20px;
  width:732px;
  min-height:320px;
}
article#pagecontent {
  margin:30px 10px 0px 20px;
  width:732px;
  min-height:320px;
}

article#pagecontent_big {
  width:675px;
  margin:30px 0px 0px 20px;
  min-height:380px;
}
article#pagecontent-index div div#content-wrapper-big { /*content-wrapper-big umfasst die vier Tumbs auf der Startseite*/
    width:95%;
}
article#pagecontent-index div div { /*Formatiert die Tumbs auf der Startseite*/
  padding:0px; margin:17px 9px 15px 15px;
}
article#pagecontent-index div div.first { /*Spezialformat für das erste Tumb auf der Startseite*/
  padding:0px; margin:17px 9px 15px 10px;
}
article#slideshow  img{
  width:805px;
}
article#slideshow {
  padding:0px;
  box-shadow:none;
}
nav ul li, nav a { /*Menüs und Untermenüs formatieren*/
  width:114px;
}
nav ul li:last-child {
  width:115px; border:none;
}
.twoline { /*Menüs mit 2 zeiligem Text*/
  line-height:15px;
  height:39px;
  width: 92px;
  margin:0; padding:7px 11px 0px 11px;
}
#pagecontent_big img.wetter_img {
  width:73%;
}
p.biographie2 {
  width:74%;
}
#footer {
  display:block;
}
#footery {
  display:none;
}

}


/*===================================================
2. Media Queries Anpassung (Browserfenster < 822px)
====================================================*/

@media only screen and (max-width: 822px) {
div#background-thumb {
  display:none;
}
div#wrapper {
  width:595px;
}
div#background-header {
    height:150px;
}
header {
  padding:0px;
  height: 100px;
}
header #logo {
  float:left;
  width:390px; height:80px;
  margin:12px 0px 0px 0px; padding:0px 0px 0px 0px;
  background:#000034 url(../img/logo.jpg);
  box-shadow: 5px 5px 5px #000034;
}
header #logo a {
  width:390px; height:80px;
}
.header-lang{
  margin:8px 15px 0px 20px;
}
.my-language-change {
  padding:23px 10px;
}
article#slideshow  img{
  width:595px;
}
.nivo-caption {
  display:none !important;
}
nav { /*Menüs und Untermenüs formatieren*/
  height:40px;
}
nav ul li, nav a { /*Menüs und Untermenüs formatieren*/
  width: 85px; border:none;
  font-size:12px;
  height:40px;
  line-height:40px;
}
nav ul li:last-child {
  width:85px;
}
nav ul li ul li a {
  font-weight:normal;
}
.twoline { /*Menüs mit 2 zeiligem Text*/
  line-height:15px;
  width:78px; /*Damit der Text auf 2 Zeilen bricht*/
  margin:0; padding:4px 2px 0px 2px;
}
nav > ul > li.is-sub > a:after {
  right:2px; /* Position vom Pfeil nach unten */
  top: 17px; /* Position vom Pfeil */
}
nav > ul > li.has-sub > a:after {
  right:-2px; /* Position vom Pfeil nach rechts */
  top: 15px; /* Position vom Pfeil */
}

article#sidebar {
  margin:20px 10px 0px 20px;
  width:88%;
}
article#pagecontent-index div#content-wrapper-big {
  margin:0 auto;
}
article#pagecontent {
  margin:20px 10px 0px 20px;
  width:88%;
}
#mapcontainer {
  width:490px;
}
#webcam {
  width:490px;
}
article#pagecontent-index {
  width:88%;
  min-height:660px;
}
article#pagecontent_big {
  margin:20px 0px 0px 20px;
  padding:10px 25px 20px 25px;
  width:505px;
}
article#pagecontent-index {
  min-height:710px;
}
article p.firstparagraph {
  padding:0px 15px 0px 15px; margin:30px 0px 0px 0px;
}
article p.titleparagraph {
  padding:0px 15px 0px 15px; margin:0px;
}
article p.standardparagraph {
  padding:0px 25px 0px 25px; margin:0px;
}
article#pagecontent-index div div, article#pagecontent-index div div.first {
  margin:30px 0px 0px 70px;
}
a #clear {
  clear:both;
}
#send{
  margin: 20px 0px 0px 15px;
}
#pagecontent_big img.wetter_img {
  width:100%;
}
p.biographie {
  width:16%;
}
p.biographie2 {
  width:70%;
}

}


/*===================================================
3. Media Queries Anpassung (Browserfenster < 568px)
====================================================*/

@media only screen and (max-width: 568px) {
html,body {
  background:none;
}
div#wrapper {
  width:100%;
}
header {
  height:60px;
}
header p{
  margin:0px 0px 0px 0px; padding:8px 20px 0px 0px;
}
.my-language-change {
  padding:23px 20px 23px 20px;
}
#logo{
  display:none;
}
div#member {
  float:right;
}
/*Menüs und Untermenüs formatieren*/
nav {
  width: 100%;
  height:auto !important; /* real browsers */
  height:100%; /* IE6: treaded as min-height*/
  min-height:270px; /* 7x40px (Navi) + 4x1px (Border) = 179px */
}
nav ul li, nav a {
  /*float:none;*/ /*macht das a-Element klein, nur noch genau Textgrösse. Warum das drin ist weich ich nicht mehr?*/
}
nav ul li a {
  font-size:16px;
}
nav ul li, nav ul li:last-child, nav ul li a, nav ul li ul li, nav ul li ul li a { /*Menüs und Untermenüs formatieren*/
  width: 100%;
  height:auto;
  line-height:40px;
}
nav ul li ul li a {
  font-size:12px; color:#FFFFFF;
  background:#000000;
}
nav ul li:hover ul li a { /*gibt den Untermenüs die Grundfarben und noch nicht die hover-Farben (ohne diese Formatierung würden die Farben vom hover vererbt werden)*/
  color:#FFFFFF;
}
nav ul li ul li a:hover {
  background: #000043; color:#BAD8F2;
}
#wrapper nav ul li ul li {
  border-top:1px dotted #bad8f2;
}
nav > ul > li:last-child {
  border:none;
  border-bottom:15px solid #dadbdd; /* Linie letztes Haupmenü */
}
nav > ul > li.has-sub > ul { /*Untermenü langsam ausblenden*/
  position:absolute; /*Bei Anordnung vertiakl muss das Untermenü verschwinden (hidden reserviert den Platz und schiebt dabei die nachfolgenden Menüs)*/
  top:-999px;
  visibility:hidden;
  opacity:0;
  transition:opacity 0.3s linear;
}
nav > ul > li.is-sub > a:after {
  right:7px; /* Position vom Pfeil nach unten */
  top: 17px; /* Position vom Pfeil */
}
nav > ul > li.has-sub > a:after {
  right:5px; /* Position vom Pfeil nach rechts */
  top: 15px; /* Position vom Pfeil */
}
.twoline { /*Menüs mit 2 zeiligem Text*/
  line-height:40px;
  width:100%;
  margin:0; padding:0px 0px 0px 0px;
}

section {
  padding:0px 0px 15px 0px; /* bottom padding for footer */
}

article#slideshow {
  margin:10px 0px 0px 0px;
}
article#slideshow  img{
  width:100%;
  padding-top:30px;
}
article#sidebar {
  padding:0px 0px 20px 0px;
  margin:0px 10px;
  min-height:150px;
  width:93%;
  box-shadow:none; background:none;
  border-bottom:1px solid gray;
  clear:both;
}
article#pagecontent {
  padding:20px 0px 18px 0px;
  margin:0px 10px;
  width:93%;
  box-shadow:none; background:none;
  clear:both;
  min-height:300px;
}
#mapcontainer {
  width:100%;
  margin:0; padding:0;
}
#webcam {
  width:100%;
  margin:0; padding:0;
}
article#pagecontent_big, article#pagecontent-index {
    background:none repeat scroll 0 0 rgba(0, 0, 0, 0);
    box-shadow:none;
    margin:0 10px;
    padding:10px 0px 10px 0px;
    width:95%;
}
article#pagecontent-index div div#content-wrapper-big a div {
  margin:30px 0px 0px 35px;
  width:154px; 
}
article#pagecontent-index div div#content-wrapper-big {
    width:90%;
  position:relative;
  margin:0 auto;
}
article#pagecontent-index div div, article#pagecontent-index div div.first {
  margin:30px 0px 0px 70px;
}
article#slideshow  img{
  padding:0px;
}
.nivoSlider {
  float:left;
}
article p.firstparagraph {
  padding:0px 10px 0px 15px; margin:30px 0px 0px 0px;
  font-size:14px;
}
article p.titleparagraph {
  padding:0px 10px 0px 15px; margin:0px;
  font-size:14px;
}
article p.standardparagraph {
  padding:0px 15px 0px 25px; margin:0px;
  font-size:14px;
}
#aussichten {
  margin-left:20px;
}
footer {
  width:100%; height:80px;
  margin-bottom: 47px; /*für SocialMedia Balken*/
}
footer address{
  padding:14px 10px 0px 10px;
}

}


/*===================================================
4. Media Queries Anpassung (Browserfenster < 520px)
====================================================*/

@media only screen and (max-width: 520px) {
article#pagecontent-index div div, article#pagecontent-index div div.first {
  margin:30px 0px 0px 50px;
}

}


/*===================================================
5. Media Queries Anpassung (Browserfenster < 480px)
====================================================*/

@media only screen and (max-width: 480px) {
article#pagecontent-index div div, article#pagecontent-index div div.first {
  margin:30px 0px 0px 35px;
}
article#pagecontent-index div div#content-wrapper-big {
    width:100%;
}
#aussichten {
  display:block;
  margin-left:0px;
  margin-top:20px;
}

}


/*===================================================
6. Media Queries Anpassung (Browserfenster < 440px)
====================================================*/

@media only screen and (max-width: 440px) {
article#pagecontent-index div div, article#pagecontent-index div div.first {
  margin:30px 0px 0px 20px;
}
article#pagecontent_big, article#pagecontent-index {
  width:94%;
}
article#pagecontent-index div div#content-wrapper-big a div {
  margin:30px 0px 0px 20px;
}
#pagecontent_big div.wetter_aussichten {
  float:left;
  margin-right:5px;
}
#pagecontent_big div.wetter_aussichten:last-child {
  float:left;
  margin-right:0px;
}

}


/*===================================================
7. Media Queries Anpassung (Browserfenster < 400px)
====================================================*/

@media only screen and (max-width: 400px) {
article#pagecontent-index div div, article#pagecontent-index div div.first {
  float:none;
  margin:30px auto 0px auto;
}
article#pagecontent-index div div#content-wrapper-big a div {
  float:none;
  margin:30px auto 0px auto;
}
/*****Login*****/
form {
  width:263px;
}
fieldset {
  width:220px;
}
/*****End Login*****/
p.biographie {
  width:18%;
}
p.biographie2 {
  width:70%;
}


}


/*===================================================
8. Media Queries Anpassung (Browserfenster < 325px)
====================================================*/

@media only screen and (max-width: 325px) {
article#pagecontent-index div div#content-wrapper-big {
    width:50%;
}
footer {
  height:100px;
}

}