/** Standard Section
  * Allgemeine Standard Tags
**/

/*
   Simple Base Stylesheet - http://fvsch.com/code/base-stylesheet/
   Helps makes browser default styles more consistent. Updated: 2011-10-02.
*/
body {
	height: 100%;
    margin: 0;
    padding: 0;
    font-size: 11pt;
    line-height: 1.2em;
    font-family: Arial;
}

article, aside, figcaption, figure, footer, header, nav, section { display: block; }

/*h1, h2, h3, h4 { margin: 1em 0 .5em; line-height: 1.25; }*/
h1 { font-size: 2em; }
h2 { font-size: 1.5em; }
h3 {
	font-size: 1.2em;
	margin-bottom: 0;
}
h4 {
	font-size: 1em;
	margin-bottom: 0;
}

ul, ol {
    margin: .5em 0;
    padding-left: 15px;
}

ul.disc {
    list-style-type: disc;
    margin: 0 auto;
    padding-left: 20px;
}

a {
    text-decoration: none;
    color: #0000ff; /* blau */
}

a:hover {
    text-decoration: none;
    color: #ff0000; /* rot */
}

a img {
    border: 0px;
}

img { border: none; }

sup, sub { line-height: 0; }

/* General IDs */
#table_no_frame {
    border: none;
    margin: 0 0;
    font-family: Arial;
    font-size: 11pt;
}

#table1_no_frame {
    border: none;
    font-family: Arial;
    font-size: 11pt;
}

#table_w_frame {
    border: medium solid black;
    border-collapse: collapse;
    font-family: Arial; 
    /* background-color: white; */
    font-size: 11pt;
}

#table1_w_frame {
    border:4px solid #000000;
    border-collapse:collapse;
    font-family:Arial; 
    background-color:white;
    font-size:11pt;
}

#table_w_frame_lmarg {
    border: medium solid black;
    border-collapse: collapse;
    font-family: Arial; 
    background-color: white;
    font-size: 12pt;
    margin-left:25px;
}
/* End General IDs */

/* General Classes */
/* LH blau: Hex: #0099cc = RGB: 0, 153, 204 = hsl(195, 100%, 40%) */
.LHblau { 
    color: #0099cc;
    background-color: #0099cc;
    border: none;
}

/* LHblau hr-line */
.LHblauline {
    width; 100%;
    left: 0px;
    border :none;
    background-color: #0099cc;
    height: 2px;
    margin: 3px 0px 4px 0px;
}

/* LHblau thick hr-line */
.LHblauthickline {
    width; 100%;
    left: 0px;
    border :none;
    background-color: #0099cc;
    height: 5px;
    margin: 3px 0px 4px 0px;
}

/* LHblau light hr-line */
.LHblaulightline {
    width; 100%;
    left: 0px;
    border :none;
    background-color: #33ccff;
    height: 2px;
    margin: 3px 0px 4px 0px;
}

/* Spamschutz */ 
.terms { display: none; }

/* CSS for the close buttons */
.closebutton-black {
    position: relative;
    top: -15px;
    left: 15px;
    width: 30px;
    height: 30px;
    cursor: pointer;
    background: url(/highslide/graphics/close.png);
    /* NOTE! For IE6, you also need to update the highslide-ie6.css file. */
}

.closebutton-red {
    position: relative;
    top: -15px;
    left: 15px;
    width: 30px;
    height: 30px;
    cursor: pointer;
    background: url(/highslide/graphics/close_red.png);
    /* NOTE! For IE6, you also need to update the highslide-ie6.css file. */
}

/* Alle Elemente, die nebeneinander angeordnet werden sollen, mit einem Element umschließen und dieses mit 
   der Klasse clearfix versehen.
*/
.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}

.clearfix:after {
    clear: both;
}

.clearfix {
    *zoom: 1;
}

/* Die zu floatenden Elemente mit float:left oder float:right ausrichten und mit einer Breitenangabe versehen. */
.left {
    float: left;
    width: 33%;
}

/* Nächsten 2 classes sind für "Login" im Top Balken */
a.login {
    text-decoration: none;
    opacity: 0.0;
}

a:hover.login {
    text-decoration: none;
    color: magenta;
    opacity: 1;
}

/* Div, die im Mobile Modus wegfallen */
div.desktop {
    display: none;
}

/* Div für Mobile Modus */
div.mobile {
    display: block;
}

/* Abstand zu footer für manchen Mobile Modus */
div.pad_bot {
    padding-bottom: 200px;
}
/* End General Classes */

/** Main Section
  * Festlegung der Hauptbereiche: Gesamtseite, Header, Footer, Navigation, Main
**/

/* Breite der gesamten Seite */
#wrapper {
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    margin: 0 auto;
    position: relative; /* Ensure absolute positioned child elements are relative to this */
}

/* Top Box */
header {
    box-sizing: border-box;
    max-width: 100%;
    position: fixed;
    top: 0;
    margin: 0 auto;
    height: 90px;
    /*background-color: #7E3588;*/
    /*background-image: url(/LH_images/LH_top_Balken_hellblau.png);*/
    z-index: 10;
}

/* Bottom Box */
footer {
    box-sizing: border-box;
    width: 100%;
    position: fixed;
    bottom: 0px;
    margin: 0 auto;
    height: 65px;
    background-color: #7E3588;
    z-index: 15;
}

/* Inhalt Hauptseite */
#main_box {
    box-sizing: border-box;
    width: 100%;
    height: 1500px;
    position: absolute;
    /* top: 150px; */
    margin: 0;
    padding: 0px 0px 70px 0px;
    /*background-color: green;*/
    background-image: url(/LH_images/LH_Background_Picture_hellblau.png);
    /*z-index: -1;*/
}

/* Inhalt Hauptseite - kein fixer linker Teil */
#main_box2 {
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    position: absolute;
    margin: 0;
    padding: 100px 10px 0px; /* kein Nav links, kein Balken unten */
    z-index: -2;
}

/* Positionierung Überschrift im Textbereich */
#Headline {
    position: absolute;
    width: 100%;
    z-index: 1;
    left: 10px;
    top: 90px;
    font-weight: bold;
    font-size: 12pt;
}

/* Positionierung Überschrift - nach Map */
#Headline2 {
    position: absolute;
    width: 500px;
    z-index: 1;
    left: 75px;
    top: 250px;
    font-weight: bold;
    font-size: 9pt;
}

/* Positionierung Textbereich Rezensionen */
#Textbereich_Rez {
    position: absolute;
    width: 97%;
    z-index: 1;
    left: 10px;
    top: 100px;
}

/* Positionierung Textbereich 1 - oben links */
#Textbereich_1 {
    position: absolute;
    width: 97%;
    z-index: 1;
    left: 10px;
    top: 100px;
}

/* Positionierung Textbereich 2 - Mitte links */
#Textbereich_2 {
    position: absolute;
    width: 650px;
    z-index: 1;
    left: 230px;
    top: 350px;
}

/* Positionierung Textbereich 3 - unten links */
#Textbereich_3 {
    position: absolute;
    width: 650px;
    z-index: 1;
    left: 230px;
    top: 550px;
}

/* Positionierung Textbereich 4 - rechts neben 1 */
#Textbereich_4 {
    position: absolute;
    width: 650px;
    z-index: 1;
    left: 600px;
    top: 350px;
}

/* Positionierung Textbereich Vorhandene Referenzen */
#Textbereich_5 {
    position: absolute;
    width: 650px;
    z-index: 1;
    left: 230px;
    top: 650px;
}

/* Positionierung Gesamtbereich - über ganze Breite */
#Gesamtbereich {
    position: absolute;
    width: 100%;
    /*height: 115px;*/
    z-index: 1;
    left: 10px;
    top: 210px;
}

/* Positionierung interne Buttons */
#Pos_Buttons {
    position: absolute;
    width: 600px;
    /*height: 115px;*/
    z-index: 1;
    left: 200px;
    top: 600px;
}

/* Begin Pure Dropdown Menu */
/* hide the sub menus by targeting any UL’s within a UL */
nav ul ul {
    display: none;
}

/* to the make the menus reappear they need to be converted back to block elements on hover of the LI. 
   The > child selector makes sure only the child UL of the LI being hovered is targeted, rather 
   than all sub menus appearing at once. */
nav ul li:hover > ul {
    display: block;
}

/* style up the main navigation menu */
nav ul {
    background: #0099cc;
    /* gradient from color greenyellow -> lightgreen */
    /*
    background: linear-gradient(top, #adff2f 0%, #90ee90 100%);
    background: -moz-linear-gradient(top, #adff2f 0%, #90ee90 100%);
    background: -webkit-linear-gradient(top, #adff2f 0%,#90ee90 100%);
    */
    box-shadow: 0px 0px 9px rgba(0,0,0,0.15);
    padding: 0 20px;
    border-radius: 5px;
    border-style: solid;
    border-color: #008000;
    border-width: 1px;
    list-style: none;
    /* position: relative; */
    display: inline-table;
    line-height: 10px;
}

nav ul:after {
    content: "";
    clear: both;
    display: block;
}

nav ul li {
    float: left;
}

nav ul li:hover {
    background: #33ccff;
    /*background: #0099cc;*/
    /* gradient from color seagreen -> mediumseagreen */
    /*
    background: linear-gradient(top, #2ebb57 0%, #3cb371 40%);
    background: -moz-linear-gradient(top, #2ebb57 0%, #3cb371 40%);
    background: -webkit-linear-gradient(top, #2ebb57 0%,#3cb371 40%);
    */
}

nav ul li:hover a {
    color: #ffffff;
}

nav ul li a {
    display: block;
    /* padding: 25px 40px; */
    padding: 10px 10px;
    color: #ffffff;
    text-decoration: none;
}

nav ul ul {
    background: #5f6975;
    border-radius: 0px;
    padding: 0;
    position: absolute; 
    top: 100%;
}

nav ul ul li {
    float: none;
    border-top: 1px solid #6b727c;
    border-bottom: 1px solid #575f6a;
    position: relative;
}

nav ul ul li a {
    padding: 15px 40px;
    color: #ffffff;
}

nav ul ul li a:hover {
    background: #4b545f;
}

nav ul ul ul {
    position: absolute;
    left: 100%;
    top:0;
}
/* End Pure Dropdown Menu */

/* Responsive Mobile Navigation Menu */
/* Firstly the .toggle-nav button is hidden. */
/*----- Toggle Button -----*/
.toggle-nav {
    display: none;
}

/* The menu has styling applied but by using a media query of min-width we can specify that the styling 
   will only apply until the window is equal to or more than 860px. */
/*----- Menu -----*/
@media screen and (min-width: 860px) {
    .menu {
	width: 100%;
	padding: 5px 10px;
	box-shadow: 0px 1px 1px rgba(0,0,0,0.15);
	border-radius: 3px;
	background: #303030;
    }
}
 
.menu ul {
    display: inline-block;
}
 
.menu li {
    margin: 0px 10px 0px 0px;
    float: left;
    list-style: none;
    font-size: 12pt;
}

/* The :last-child selector is used to specify that the last list item will have no margin applied to it, 
   otherwise as the window gets smaller the search form would go onto the next line before it’s supposed to. */
.menu li:last-child {
    margin-right: 0px;
}

/* rgba(0,0,0,0.5) is used on a few items in the CSS. RGBA stands for Red, Green, Blue and Alpha. 
   Alpha means the transparency/opacity. For example, an alpha of 0.6 would be 60% opacity but an alpha of 0.06 would be 6% opacity.
   The transitions in the menu, for example the fading of colors from grey to green, use the standard transition. */
.menu a {
    text-shadow: 0px 1px 0px rgba(0,0,0,0.5);
    color: #0099cc;
    transition: color linear 0.15s;
}
 
.menu a:hover, .menu .current-item a {
    text-decoration: none;
    color: #8B008B;
}
 
/*----- Search -----*/
.search-form {
    float: right;
    display: inline-block;
}
 
.search-form input {
    width: 200px;
    height: 30px;
    padding: 0px 8px;
    float: left;
    border-radius: 2px 0px 0px 2px;
    font-size: 13px;
}
 
.search-form button {
    height: 30px;
    padding: 0px 7px;
    float: right;
    border-radius: 0px 2px 2px 0px;
    background: #8B008B;
    font-size: 13px;
    font-weight: 600;
    text-shadow: 0px 1px 0px rgba(0,0,0,0.3);
    color: #fff;
}
 
/*----- Responsive -----*/
/* A little like before with .menu when min-width was used we’ll now be using max-width which does the opposite. 
   The styles with in a max-width media query will only take effect once the window gets to a certain size. 
   This is the most common type of media query. */
@media screen and (max-width: 1150px) {
    .wrap {
	width: 90%;
    }
}

/* The first breakpoint is set at 970px and shortens the input in the .search-form. This is a useful technique 
   when you don’t want to start hiding the menu but need to make some changes so the styles don’t break. */
@media screen and (max-width: 970px) {
    .search-form input {
	width: 120px;
    }
}
 
/* The second breakpoint is set at 860px and houses the majority of the responsive styling. The .menu is given 
   a position of relative so the ul can be positioned absolutely inside of it. */
@media screen and (max-width: 860px) {
    .menu {
	position: relative;
	display: inline-block;
    }
    /* To hide the menu and help the jQuery the .menu ul.active class is hidden. This comes into play 
       when you toggle the .active class with jQuery. */
    .menu ul.active {
	display: none;
    }
    .menu ul {
	width: 90px; /* Breite Hintergrundbox*/
	position: absolute;
	top: 80%;
	right: 5px; /* Abstand Hintergrundbox rechter Rand */
	padding: 0px 30px 0px 0px;*/
	box-shadow: 0px 1px 1px rgba(0,0,0,0.15);
	border-radius: 3px;
	border: solid 1px #2A798B;
	/*background: #303030;*/
	background-color: #33ccff;
    }
    /* Adding the arrow to the top of the ul is achieved using the :after pseudo element. Don’t forget 
       to always add content:''; to any pseudo element or else it won’t show up.
       Positioning of the arrow is achieved using absolute positioning and CSS transforms, more specifically 
       translate. The values of 0% and -100% state 0% from the left and -100% from the top. */
    .menu ul:after {
	width: 0px;
	height: 0px;
	position: absolute;
	top: 0%;
	right: 10px;
	content: '';
	transform: translate(0%, -100%);
	border-left: 7px solid transparent;
	border-right: 7px solid transparent;
	border-bottom: 7px solid #303030;
    }
    .menu li {
	height: 35px;
	margin: 0px 5px 5px 0px;
	float: none;
	display: block;
    }
    .menu a {
	display: block;
    }
    .toggle-nav {
	padding: 5px;
	float: left;
	display: inline-block;
	box-shadow: 0px 1px 1px rgba(0,0,0,0.15);
	border-radius: 1px;
	/*background: #303030;*/
	text-shadow: 0px 1px 0px rgba(0,0,0,0.5);
	color: #8B008B;
	font-size: 11pt;
	transition: color linear 0.15s;
    }
    .toggle-nav:hover, .toggle-nav.active {
	text-decoration: none;
	color: #8B008B;
    }
    .search-form {
	margin: 12px 0px 0px 20px;
	float: left;
    }
    .search-form input {
	box-shadow: -1px 1px 2px rgba(0,0,0,0.1);
    }
}
/* End of Responsive Mobile Navigation Menu 

/* ----- 3D button ----- */
.button {
    /* text */
    text-decoration: none;
    /*font: 24px/1em 'Droid Sans', sans-serif;*/
    font: 'Arial';
    font-size: 11pt;
    font-weight: normal;
    text-align: center;
    text-shadow: rgba(255,255,255,.5) 0 1px 0;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;

    /* layout */
    width: 90px;
    height: 10px;
    /*padding: .2em .6em .2em .2em;*/
    padding: 5px 5px;
    /*margin: .5em;*/
    display: inline-block;
    /*position: relative;*/
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 15px;

    /* effects */
    /*border-top: 1px solid rgba(255,255,255,0.8);
    border-bottom: 1px solid rgba(0,0,0,0.1);*/
    border: 2px solid #000000;
    /*
    background-image: -webkit-gradient(radial, 50% 0, 100, 50% 0, 0, from( rgba(255,255,255,0) ), to( rgba(255,255,255,0.7) )), url(http://iwantaneff.in/t/http://iwantaneff.in/t/noise.png);
    background-image: -moz-radial-gradient(top, ellipse cover, rgba(255,255,255,0.7) 0%, rgba(255,255,255,0) 100%), url(http://iwantaneff.in/t/http://iwantaneff.in/t/noise.png);
    background-image: gradient(radial, 50% 0, 100, 50% 0, 0, from( rgba(255,255,255,0) ), to( rgba(255,255,255,0.7) )), url(http://iwantaneff.in/t/http://iwantaneff.in/t/noise.png);
    -webkit-transition: background .2s ease-in-out;
    -moz-transition: background .2s ease-in-out;
    transition: background .2s ease-in-out;
    */
    /* color */
    color: hsl(0, 0%, 40%) !important;
    background-color: hsl(0, 0%, 75%);
    -webkit-box-shadow: inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */ 
			hsl(0, 0%, 60%) 0 .1em 3px, hsl(0, 0%, 45%) 0 .3em 1px, /* color border */
			rgba(0,0,0,0.2) 0 .5em 5px; /* drop shadow */
    -moz-box-shadow: 	inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */ 
			hsl(0, 0%, 60%) 0 .1em 3px, hsl(0, 0%, 45%) 0 .3em 1px, /* color border */
			rgba(0,0,0,0.2) 0 .5em 5px; /* drop shadow */
    box-shadow:	inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */ 
		hsl(0, 0%, 60%) 0 .1em 3px, hsl(0, 0%, 45%) 0 .3em 1px, /* color border */
		rgba(0,0,0,0.2) 0 .5em 5px; /* drop shadow */
}

/* -------------- colours -------------- */
.button.LHblau {
    color: hsl(0, 0%, 100%) !important;
    background-color: hsl(195, 100%, 40%);
    -webkit-box-shadow:	inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */
			hsl(240, 100%, 20%) 0 .1em 3px, hsl(240, 100%, 10%) 0 .3em 1px, /* color border */
			rgba(0,0,0,0.2) 0 .5em 5px; /* drop shadow */
    -moz-box-shadow: 	inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */ 
			hsl(240, 100%, 20%) 0 .1em 3px, hsl(240, 100%, 10%) 0 .3em 1px, /* color border */
			rgba(0,0,0,0.2) 0 .5em 5px; /* drop shadow */
    box-shadow:	inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */ 
		hsl(240, 100%, 20%) 0 .1em 3px, hsl(240, 100%, 10%) 0 .3em 1px, /* color border */
		rgba(0,0,0,0.2) 0 .5em 5px; /* drop shadow */

}

.button.LHblau:hover {
    background-color: hsl(195, 100%, 50%);
}

.button.SGDlila {
    color: hsl(0, 0%, 100%) !important;
    background-color: hsl(300, 100%, 27%);
    -webkit-box-shadow:	inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */
			hsl(0, 100%, 40%) 0 .1em 3px, hsl(0, 100%, 30%) 0 .3em 1px, /* color border */
			rgba(0,0,0,0.2) 0 .5em 5px; /* drop shadow */
    -moz-box-shadow: 	inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */ 
			hsl(0, 100%, 40%) 0 .1em 3px, hsl(0, 100%, 30%) 0 .3em 1px, /* color border */
			rgba(0,0,0,0.2) 0 .5em 5px; /* drop shadow */
    box-shadow:	inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */ 
		hsl(0, 100%, 30%) 0 .1em 3px, hsl(0, 100%, 30%) 0 .3em 1px, /* color border */
		rgba(0,0,0,0.2) 0 .5em 5px; /* drop shadow */

}

.button.SGDlila:hover {
    background-color: hsl(300, 100%, 37%);
}

.button.SGDgrey {
    color: hsl(0, 0%, 0%) !important;
    background-color: hsl(0, 0%, 46%);
    -webkit-box-shadow: inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */
            hsl(0, 0%, 0%) 0 .1em 3px, hsl(0, 0%, 10%) 0 .3em 1px, /* color border */
            rgba(0,0,0,0.2) 0 .5em 5px; /* drop shadow */
    -moz-box-shadow:    inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */ 
            hsl(0, 0%, 0%) 0 .1em 3px, hsl(0, 0%, 10%) 0 .3em 1px, /* color border */
            rgba(0,0,0,0.2) 0 .5em 5px; /* drop shadow */
    box-shadow: inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */ 
        hsl(0, 0%, 0%) 0 .1em 3px, hsl(0, 0%, 10%) 0 .3em 1px, /* color border */
        rgba(0,0,0,0.2) 0 .5em 5px; /* drop shadow */

}

.button.SGDgrey:hover {
    background-color: hsl(0, 0%, 76%);
}

.button.transparent {
	color: 	rgba(0,0,0,0.5) !important;
}

.button.transparent, .button.transparent:hover, .button.transparent:active {
	background-color: transparent;
	background-image: none;
}

.button.transparent:hover {
	opacity: .9;
}