body { font-size: 1em; font-family: Helvetica, Geneva, Arial, SunSans-Regular, sans-serif; margin:0px; color:#666666;  background-color:#7c4d26;}


a:link { color: #907050; text-decoration: none; outline:none; }
a:visited {text-decoration:none ;color: #907050; outline:none;}
a:hover { text-decoration:none; outline:none;}
a:focus { text-decoration:none; color:#907050; outline:none;}

strong { text-decoration:none; color:#907050;}


h1{ font-size:24px; font-weight:300; color:#7c4d26; padding:0px 0px 0px 0px; margin:0px 0px 15px 0px; font-family:"Palatino Linotype", "Book Antiqua", Palatino, serif; 
	border-bottom:1px dotted #7c4d26;}
h2 {font-size:22px; font-weight:400; color:#7c4d26; padding:0px 0px 2px 0px; margin:0px 0px 15px 0px; font-family:"Palatino Linotype", "Book Antiqua", Palatino, serif;border-bottom:1px dotted #7c4d26;}
h3 { font-size:20px; font-weight:400; color:#7c4d26; padding:0px; margin:0px 0px 10px 0px;font-family:"Palatino Linotype", "Book Antiqua", Palatino, serif;}

hr {height: 1px;border: 0 none; border-top: 1px dotted #ccc; margin-top:10px;}

p {line-height: 1.4em; margin:0px; padding:5px 0px 10px 0px;} 

img { border: none; max-width: 100%;} 


/*************************** Layout *******************************************************************************/

.header { margin:auto; width:1220px; height:560px; background:#fff; margin-top:10px; position: relative;}

.servicemenue { height:60px;}
	
.servicemenue ul { list-style:none; padding:0px; font-size:0.9em;  margin:15px 0px 0px 0px; float:right;}
.servicemenue li { margin:0px; padding:0px; display:inline;}
.servicemenue li a {color:#907050; text-decoration:none; text-align:left; padding:0px 10px 0px 10px;}

.servicemenue li a:link { color: #907050; text-decoration: none; outline:none; }
.servicemenue li a:visited {text-decoration:none ;color: #907050; outline:none;}
.servicemenue li a:hover { text-decoration:none; outline:none;}
.servicemenue li a:focus { text-decoration:none; color:#907050; outline:none;}


.wrapper { width:1220px; margin:auto; background:#fff; height:100%; margin-bottom:20px; padding-bottom:50px;}

.menue { padding:0px; height:45px; position: relative; margin-top: -35px;
	-moz-box-shadow: 0px 5px 10px #ccc; -webkit-box-shadow: 0px 5px 10px #ccc; box-shadow: 0px 5px 10px #ccc; -khtml-box-shadow: 0px 5px 10px #ccc; 
}
.menue ul { list-style:none; padding:10px 0px 0px 0px; margin:0px 0px 0px 20px; font-size:1.2em;}
.menue li { margin:0px; padding:0px 0px 0px 0px; display:inline;}
.menue li a {color:#7c4d26; text-decoration:none; text-align:left; padding:0px 15px 0px 15px;}
.menue li a.active { text-decoration:none; color:#fff; background:#97bf0d;}


.logo { width:500px; height:67px; background: transparent url(../images/logo-hotelfreeplanner.png) left center no-repeat; z-index:1; top:-450px; left:-30px; position:relative;}

.number {
    width: 180px;
    height: 180px;
    background: transparent url(../images/number.png) left center no-repeat;
    position: relative;
    top: -210px;
    left: 1000px;
	z-index:1;
}


 #slideshow {
    width: 1218px;
    height: 450px;	
	margin:auto;
	border:1px solid #fff;
	-moz-box-shadow: 0px 5px 10px #ccc; 
	-webkit-box-shadow: 0px 5px 10px #ccc; 
	box-shadow:0px 5px 10px #ccc; 
	-khtml-box-shadow: 0px 5px 10px #ccc; 
  }

.mainarea { width:96%; margin:0px 0px 0px 20px; float:left; margin-top:50px;} 
.mainarea-start { width:70%; margin:0px 0px 0px 20px; float:left; margin-top:50px;} 
.mainarea-box-left { float:left; width:50%;}
.mainarea-box-right { float:right; width:50%;}
.mainarea-box-one_third { float:left; width:30%;}

.sidebar { width:25%; margin:0px 10px 0px 0px; float:right; margin-top:50px; font-size:0.9em;} 

.article { margin:0px 10px 10px 10px; padding:10px; float: left; }

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

.article ul li {
margin:0px 0px 8px 0px;
background: transparent url(../images/bullet.png) 0px 7px no-repeat;
padding-left: 15px;
text-align: left;
line-height:1.5em;
}


table,td {border: 1px solid #DBC395; border-collapse: collapse;}
tbody tr td{padding: 7px 5px;color: #666; vertical-align:top;}
thead th {background-color:#fafaf8;}


/*************************** Klassen *******************************************************************************/

.margin-top { margin-top: 20px;}

.download {
background: transparent url(../images/pdf.png) left top no-repeat;
padding:1px 0px 3px 20px;
font-size:1em;
    background-size: 18px;
}

.extern {
background: transparent url(../images/forward.png) left center no-repeat;
padding:1px 0px 3px 25px;
font-size:1em;
}

.abstand-80 { float:left; width:80px;}

.img-left { float:left; margin-right:10px; margin-bottom:10px;}
.img-right { float:right; margin-left:10px; margin-bottom:10px;}



/*************************** toggle ************************************/

.listitem {
margin-top:0;   
position:relative;
top:4pt;
width:100%;
}
.listitem a {
border:0 none;
display:block;
font-size:0.9em; color:#907050; padding:3px; margin:0px 0px 10px 0px; 
}

.listitem a.bericht-anzeigen {border-top:2px dotted #DBC395; background: #fafaf8 url(../images/open.png) 150px center no-repeat; }
.listitem a.bericht-schliessen {border-top:2px dotted #DBC395; border-bottom:2px dotted #DBC395; background: #fafaf8 url(../images/close.png) 130px center no-repeat; display:block;}


.listitemcontent {
line-height:16pt;
margin:0;
padding-left:0px;
padding-top:5pt;
}
.listitemcontent a {
display:inline;
height:auto;
}

.listitemcontent img {

 }

/* cookiebar */
.cc_container .cc_btn, .cc_container .cc_btn:visited {
    color: #fff!important;
    background-color: #907050!important;
    transition: background 200ms ease-in-out,color 200ms ease-in-out,box-shadow 200ms ease-in-out;
    -webkit-transition: background 200ms ease-in-out,color 200ms ease-in-out,box-shadow 200ms ease-in-out;
    border-radius: 5px;
    -webkit-border-radius: 5px;
}

/*------------------------------------------ MOBILE NAV --------------------------------------*/
.mobile-nav {
	background: none repeat scroll 0 0 #fff;
    padding: 0;
    position: relative;
	z-index:1;
	display:none;
	font-size:1.4em;
}

.mobile-nav ul.hidden:hover {
  display: block;
  visibility: visible;
}
.mobile-nav ul {
	list-style-type:none;
	margin:0;
	padding:0;
	position: absolute;
}

.mobile-nav ul li {
	float: left;
	margin: 0;
	padding:0;
	background:none #f4f4f4;
}

.mobile-nav ul li a {
	display:block;
	min-width:140px;
	text-align: center;
	color: #907050;
	text-decoration: none;
	padding:5px 0;
	text-shadow:1px 1px 0 #fff;
}

.mobile-nav ul li a:hover, .mobile-nav ul li a.active {
	background:#907050;
	color:#fff;
	text-shadow:none;
}

.mobile-nav ul li:hover ul a {
	background: #e7e7e7;
	color: #333;
	line-height: 40px;
	text-shadow:none;
}

.mobile-nav ul li:hover ul a:hover, .mobile-nav ul li ul li a.active {
	background: rgba(76,113,137,0.5);
	color: #fff;
}

.mobile-nav ul li ul {
	display: none;
}

.mobile-nav ul li ul li {
	display: block;
	float: none;
}

.mobile-nav ul li ul li a {
	width: auto;
	min-width: 100px;
	padding: 0 20px;
}

.mobile-nav ul li a:hover + .hidden, .hidden:hover {
	display: block;
}

.show-menu {
	text-decoration: none;
	color: #907050;
	background: #fff;
	text-align: center;
	line-height:42px;
	height:42px;
	padding:0;
	display: none;
	border-bottom:1px solid #333;
}

label.show-menu {
	cursor:pointer;
}

label.show-menu:hover {
	background:#f4f4f4;
	color:#907050;
}

/*Hide checkbox*/
input[type=checkbox]{
    display: none;
}

input[type=checkbox]:checked ~ #menu{
    display: block;
}

/*------------------------ ENDE MOBILE NAV -------------------------*/

/*------------------------ responsive -------------------------*/


@media (max-width: 1024px) {
	
	.header {  width: 950px; height:450px;}
	#slideshow {width: 940px; height: 345px;}
	.wrapper { width: 950px;}
	.logo { width: 400px;  height: 58px;  background: transparent url(../images/logo-hotelfreeplanner-400.png) left center no-repeat; top: -76%; left: -3%;}
	.number {  width: 100px; height: 100px; background: transparent url(../images/number-80.png) left center no-repeat; top: -25%; left: 88%;}
    
}

@media (max-width: 896px) {
	
	.menue { display:none;}
	
	.mobile-nav {width:98%;margin:0 auto 20px auto; display:block;}

	.mobile-nav ul {position: static;display: none;	}
	.mobile-nav li {margin-bottom: 1px;	}
	.mobile-nav ul li, li a {width: 100%;}
	.show-menu { display:block;	}
	
	.header { margin:auto; width:98%; height:330px; background:#fff; margin-top:10px; }
	
	#slideshow {width:98%; height:300px;}

	.servicemenue { width:98%; height:50px;}
	.wrapper { width:98%; margin:auto; margin-top:0px;}
	
	.logo { width: 300px;  height: 50px;  background: transparent url(../images/logo-hotelfreeplanner-300.png) left center no-repeat; top: -90%; left: -1%; }
	.number {  width: 100px; height: 100px; background: transparent url(../images/number-80.png) left center no-repeat; top: -50%; left: 86%;  }
	
	.mainarea { width:98%; margin:0px 0px 0px 0px; float:left; margin-top:0px;} 
	.mainarea-box-left { float:left; width:98%;}
	.mainarea-box-right { float:right; width:98%;}

	.sidebar { width:98%; float:left;} 

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

@media (max-width:660px) {
	
	.menue { display:none; }
	
	.mobile-nav {width:98%;margin:0 auto 20px auto;display:block;}

	.mobile-nav ul {position: static;display: none;	}
	.mobile-nav li {margin-bottom: 1px;	}
	.mobile-nav ul li, li a {width: 100%;}
	.show-menu { display:block;	}
	
	.header { margin:auto; width:98%; height:190px; background:#fff; margin-top:10px; }	
	.servicemenue li a {padding: 0px 4px 0px 4px;}	
	.logo { width: 250px;  height: 50px;  background: transparent url(../images/logo-hotelfreeplanner-250.png) left center no-repeat; top: -25%; left: -1%; }
	.number { display: none;}
	#slideshow {width:98%; height:127px;}
	.wrapper { width:98%; margin:auto; margin-top:0px;}
	.mainarea { width:98%; margin:0px 0px 0px 0px; float:left; margin-top:0px;} 
	.mainarea-box-left { float:left; width:98%;}
	.mainarea-box-right { float:right; width:98%;}

	.sidebar { width:98%; float:left;} 

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