/* COLORS ************************************************************************************************/
/*
 	violet: 		#8050A0 
	green: 			#87A51B
	brown:			#DBA145
	dark-brown:		#A87638
	gray:			#AEAEAE
	dark-gray:		#666666
	turqois:		#30B7B6
*/

* {
  padding: 0;
  margin: 0;
}

body {
  margin: 0;
  padding: 0;
  background-color: #fff;
  font-size: 0.9em;
  color: #000;  
  text-align: center;
  /* font-family: Georgia, "Times New Roman", Times, serif; */
  font-family: Arial, Helvetica, Verdana, sans-serif; 
}


/* STRUCTURE ********************************************************************************************/

div#container {
  width: 778px;
  margin: 0 auto;
  padding: 0;
  text-align: left;
}
div#header {
  height: 67px;
}
div#header_splash {
  height: 67px;
  background-color: #fff;
  background: transparent url(../img/splash/header_splash.gif) center top no-repeat;
}
div#adresse_splash {
  margin: 33px auto auto 80px;
  background-color: #fff;
}

div#logo {
  background: transparent url(../img/header.gif) center top no-repeat;
  width: 242px;
  height: 24px;
  float: left;
  margin: 15px auto auto 43px;
}

#header h1 {
  float: right;
  margin: 15px 50px auto auto;
  background-color: #fff;
  font-size: 1.0em;
  color: #8050A0;
  font-weight: normal;
}
#header h2 {
  float: right;
  margin: 30px auto auto auto;
  background-color: #fff;
  font-size: 1.0em;
  color: #87A51B;
  font-weight: normal;
}

div#url {
  float: right;
  background-color: #fff;
  margin: 15px 60px auto auto;
}
#url a {  
  color: #666;
}
#url a:hover {
  color: #fff;
}
div#topper {
  height: 41px;
  background: transparent url(../img/frame_top.jpg) center top no-repeat;
}
div#primnav {
  position: absolute;
  width: 755px;
}
div#content {
  margin: 0;
  background: transparent url(../img/frame_middle.jpg) center top repeat-y;
}
div#content_splash {
  margin: 0;
  background-color: #fff;
}
div#secnav {
  /* height: 17px; */
}
div#bottomer {
  height: 70px;
  background: transparent url(../img/frame_bottom.jpg) center top no-repeat;
}

/* ITEMS */
div#items {
  margin: 0 55px 0 43px;
  background-color: #fff;
}
div.topic {
  margin-top: 40px;
  padding-bottom: 40px;
  width: 680px;
  border-bottom: 1px solid #eee;
}
div.topic_last {
  margin-top: 40px;
  width: 680px;
}
div.topic_splash {
  width: 680px;
}
div.text {
  width: 480px;
  background-color: #fff;
}
div.textfeld {
  width: 300px;
}
div.textfeld_breit {
  width: 480px;
}
div.context {
  margin: 0px;
  width: 180px;
  float: right;
  background-color: #fff;
  border-left: 1px solid #ddd;
}
.impressum {
  margin: 20px;
  text-align: left;
}

.clear { clear: both; } /* hält alle 3 Spalten (text, thumbnails, context) in gleicher height, muss in jedes div#topic */    

/* EXTERNALS */
div#map {
  /* margin: 5px 5px 5px 235px; */
  width: 680px; 
  height: 350px;
  /* border: 5px solid #87A51B; */
  /* float: right; */
}
div#navigator {	
  /* margin: 10px 0 0 10px;
  width: 220px;
  height: 520px; */
  background-color: #fff;
  text-align:left;
  /* float: left;
  position: absolute; */
}
div#navigator p {
  margin: 7px;
  font-size:0.8em;
}

div#yahooContainer {
  width: 360px;
  background-color: #fff;
  border: 1px solid;
}

/* PRELOAD ***********************************************************************************************/

#preloadImagePrimnav_01, #preloadImagePrimnav_02, #preloadImagePrimnav_03, #preloadImagePrimnav_04, #preloadImagePrimnav_05,
#preloadImageSecnav_01, #preloadImageSecnav_02, #preloadImageSecnav_03, #preloadImageSecnav_04, #preloadImageSecnav_05,
#preloadEnter, #preloadToTop, #preloadKarte, #preloadBuchung, #preloadPreise {
	width: 0px; height: 0px; display: inline;
}

#preloadToTop           { background-image: url(../img/to_top_over.gif); }
#preloadKarte           { background-image: url(../img/buttons/button_karte_over.gif); }
#preloadBuchung         { background-image: url(../img/buttons/button_buchung_over.gif); }

/*
#preloadEnter           { background-image: url(../img/buttons/button_enter_over.gif); }
#preloadPreise          { background-image: url(../img/buttons/button_preise_over.gif); }

#preloadImagePrimnav_01 { background-image: url(../img/nav/primnav_01_over.gif); }
#preloadImagePrimnav_02 { background-image: url(../img/nav/primnav_02_over.gif); }
#preloadImagePrimnav_03 { background-image: url(../img/nav/primnav_03_over.gif); }
#preloadImagePrimnav_04 { background-image: url(../img/nav/primnav_04_over.gif); }
#preloadImagePrimnav_05 { background-image: url(../img/nav/primnav_05_over.gif); }

#preloadImageSecnav_01  { background-image: url(../img/nav/secnav_01_over.gif); }
#preloadImageSecnav_02  { background-image: url(../img/nav/secnav_02_over.gif); }
#preloadImageSecnav_03  { background-image: url(../img/nav/secnav_03_over.gif); }
#preloadImageSecnav_04  { background-image: url(../img/nav/secnav_04_over.gif); }
#preloadImageSecnav_05  { background-image: url(../img/nav/secnav_05_over.gif); }
*/



/* NAVIGATION ********************************************************************************************/

/* PRIMNAV */
#primnav ul { 
	list-style: none; 
	margin: 4px 0 0 60px; 
	padding: 0; 
}
#primnav ul li {  /* margin-right stellt hier Abstand zwischen den Navigationspunkten ein*/
	float: left; 
	margin-right: 35px; 
	padding: 0; 
}
#primnav ul li a { 
	display: block; 
	height: 31px; 
	padding: 12px 0 0 0; 
	color: #87A51B; 
	font-size: 1.1em; 
	text-align: center; 
}
#primnav ul li.here {  
	color: #f0ab00; 
	/* margin-top: -8px; */
	font-size: 1.1em; 
}

/* SECNAV */
#secnav ul { 
	list-style: none; 
	margin: 8px 0 0 412px; 
	padding: 0; 
}
#secnav ul li { /* margin-right stellt hier Abstand zwischen den Navigationspunkten ein*/
	float: left; 
	margin-right: 12px; 
	padding: 0; 
} 
#secnav ul li a { 
	display: block; 
	height: 27px; 
	padding-top: 10px;
	color: #8050A0;
}
#secnav ul li.here {  
	color: #f0ab00; 
	/* margin-top: -3px; */	 
	font-size: 1.0em; 
}





/* MOOD **************************************************************************************************/

#mood_splash, 
#mood_prim_01, #mood_prim_02, #mood_prim_03, #mood_prim_04, #mood_prim_05, 
#mood_sec_01, #mood_sec_02, #mood_sec_03, #mood_sec_04, #mood_sec_05 {
	height: 329px;
}

/* S P L A S H ***************************************/
div#mood_splash {
  background: transparent url(../img/splash/mood_splash.jpg) center top no-repeat;
}
/* PRIMARY ***************************************/
div#mood_prim_01 {
  background: transparent url(../img/ferienwohnung/mood_ferienwohnung.jpg) center top no-repeat;
}
div#mood_prim_02 {
  background: transparent url(../img/haus-garten/mood_haus-garten.jpg) center top no-repeat;
}
div#mood_prim_03 {
  background: transparent url(../img/umgebung/mood_umgebung.jpg) center top no-repeat;
}
div#mood_prim_04 {
  background: transparent url(../img/ausfluege/mood_ausfluege.jpg) center top no-repeat;
}
div#mood_prim_05 {
  background: transparent url(../img/kultur-aktiv/mood_kultur-aktiv.jpg) center top no-repeat;
}

/* SECONDARY ************************************/
div#mood_sec_01 {
  background: transparent url(../img/preise/mood_preise.jpg) center top no-repeat;
}
div#mood_sec_02 {
  background: transparent url(../img/buchung/mood_buchung.jpg) center top no-repeat;
}
div#mood_sec_03 {
  background: transparent url(../img/anreise/mood_anreise.jpg) center top no-repeat;
}
div#mood_sec_04 {
  background: transparent url(../img/produkte/mood_produkte.jpg) center top no-repeat;
}
div#mood_sec_05 {
  background: transparent url(../img/kontakt/mood_kontakt.jpg) center top no-repeat;
}


/* HEADLINES *********************************************************************************************/

.headline,
#headline_prim_01, #headline_prim_02, #headline_prim_03, #headline_prim_04, #headline_prim_05, 
#headline_sec_01, #headline_sec_02, #headline_sec_03, #headline_sec_04, #headline_sec_05 {
  /* width: 365px; */
  height: 32px;
  margin: 12px auto 20px 43px;
}

.prim .headline h2 {
  color: #87A51B;
}

.sec .headline h2 {
  color: #8050A0;
}

.headline h2 {
  font-weight: normal;
  color: #8050A0;
  font-size: 1.7em;
  margin-top: 20px;
}

h3 { 
  margin-bottom: 1.0em; 
  font-size: 1.2em; 
  color: #87A51B; 
  background-color: #fff;
  display: block;
}

.sec h3 {
  color: #8050A0;		
}


/* PRIMARY ***************************************
div#headline_prim_01 {
  background: transparent url(../img/ferienwohnung/headline_ferienwohnung.gif) center top no-repeat;
}
div#headline_prim_02 {
  background: transparent url(../img/haus-garten/headline_haus-garten.gif) center top no-repeat;
}
div#headline_prim_03 {
  background: transparent url(../img/umgebung/headline_umgebung.gif) center top no-repeat;
}
div#headline_prim_04 {
  background: transparent url(../img/ausfluege/headline_ausfluege.gif) center top no-repeat;
}
div#headline_prim_05 {
  background: transparent url(../img/kultur-aktiv/headline_kultur-aktiv.gif) center top no-repeat;
}
/* SECONDARY ************************************
div#headline_sec_01 {
  background: transparent url(../img/preise/headline_preise.gif) center top no-repeat;
}
div#headline_sec_02 {
  background: transparent url(../img/buchung/headline_buchung.gif) center top no-repeat;
}
div#headline_sec_03 {
  background: transparent url(../img/anreise/headline_anreise.gif) center top no-repeat;
}
div#headline_sec_04 {
  background: transparent url(../img/produkte/headline_produkte.gif) center top no-repeat;
}
div#headline_sec_05 {
  background: transparent url(../img/kontakt/headline_kontakt.gif) center top no-repeat;
}

*/

/* TYPO & FORMAT **************************************************************************************************/

p { 
  margin-top: 0.8em; /* Abstand zwischen einzelnen Abschnitten*/
  line-height: 1.3em; 
}
b {
  font-weight: normal;
}

.fett {
  color: #333;
  font-weight: bold;
}

.light{
  color: #555;
}

.violett {
  color: #8050A0;
}

small {
  font-size:0.8em;
}
#disclaimer small {
  margin-top: 0.7em;
  font-size:0.7em;
  display: block;
  text-align:left;
}
.context p { 
  margin: 0 10px 0.8em 18px; 
}
.context ul {
  list-style-image: url(../img/list_item.gif);
  list-style-position: outside;	
  line-height: 1.0em;
}
.context li {
  margin: 0 0 0.8em 30px;
}

.site_kultur-aktiv .context {
	width: 345px;
	border-left: none;
}
.site_kultur-aktiv .context p { 
  margin: 0 0 0 -15px; 
}
.site_kultur-aktiv .context ul {
  list-style-image: url(../img/list_item.gif);
  list-style-position: outside;	
  line-height: 1.3em;
}
.site_kultur-aktiv .context li {
  margin: 0;
}



.karte ul {
  /*list-style-image: url(../img/list_item.gif);*/
  list-style-type: decimal;
  list-style-position: outside;	
  line-height: 1.0em;
  font-size: 0.8em;   
}
.karte li {
  margin: 0 0 0.4em 25px;
  position: relative;
}
div#map p {
  margin: 170px 60px 0 60px;
  display: block;
  border-top: 1px solid #ff0000;
  border-bottom: 1px solid #ff0000;
}

div.text table {
  margin: 0 0 10px 30px;
  width: 138px;
  height: 138px;
  float: right;
}

div.text table.pricetable {
  margin: 0;
  width: 480px; 
  border: 0;
  float: left;
}

div.text ul {
  margin: 0 0 0.8em 20px;
  list-style-image: url(../img/list_item.gif); 
  list-style-position: outside;	
  line-height: 1.3em; 
}
div.text li {
}

/* LINKS */
#primnav a:hover {
	background: transparent;	
}
#secnav a:link {
	background: transparent;
	color: #8050A0;	
}
#secnav a:hover {
	background: transparent;
	color: #8050A0;	
}
#secnav a:active {
	background: transparent;
	color: #8050A0;	
}




a:link {
	font-weight: normal;
	text-decoration: none;
	color: #3C71C6;
	background: transparent;
}
a:visited {
	font-weight: normal;
	text-decoration: none;
	color: #3C71C6;
	background: transparent;
}
a:hover {
	font-weight: normal;
	text-decoration: none;
	color: #fff;
	background: #3C71C6;
}
a:active {
	font-weight: normal;
	text-decoration: none;
	color: #3C71C6;
	background: transparent;
}
:link img { border: none; text-decoration: none; }
:visited img { border: none; text-decoration: none; }
:link:active img, :visited:active img { border: none; text-decoration: none;}

/* LIGHTBOX JS v2.0 by Lokesh Dhakar *********************************************************************/

#lightbox{
	position: absolute;
	top: 40px;
	left: 0;
	width: 100%;
	z-index: 100;
	text-align: center;
	line-height: 0;
}

#lightbox a img{ border: none; }

#outerImageContainer{
	position: relative;
	background-color: #fff;
	width: 250px;
	height: 250px;
	margin: 0 auto;
}

#imageContainer{
	padding: 10px;
}

#loading{
	position: absolute;
	top: 40%;
	left: 0%;
	height: 25%;
	width: 100%;
	text-align: center;
	line-height: 0;
}
#hoverNav{
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	z-index: 10;
}
#imageContainer>#hoverNav{ left: 0;}
#hoverNav a{ outline: none;}

#prevLink, #nextLink{
	width: 49%;
	height: 100%;
	background: transparent url(../img/lightbox/blank.gif) no-repeat; /* Trick IE into showing hover */
	display: block;
}
#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}
#prevLink:hover, #prevLink:visited:hover { background: url(../img/lightbox/prev.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(../img/lightbox/next.gif) right 15% no-repeat; }

#imageDataContainer{
	font-size: 10px;
	background-color: #fff;
	margin: 0 auto;
	line-height: 1.4em;
}
#imageData{
	padding:0 10px;
}
#imageData #imageDetails{ width: 70%; float: left; text-align: left; }	
#imageData #caption{ font-size: 1.2em; font-weight: bold; padding-bottom: 0.7em; display: block; }
#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em;	}			
#imageData #bottomNavClose{ width: 66px; height: 22px; float: right; background: url(../img/lightbox/closelabel.gif) top right no-repeat; }	

		
#overlay{
	position: absolute;
	top: 0;
	left: 0;
	z-index: 90;
	width: 100%;
	height: 500px;
	background-color: #000;
	filter:alpha(opacity=60);
	-moz-opacity: 0.6;
	opacity: 0.6;
}
	
	
/* CLEARFIX *****************************************************************************/

.clearfix:after {
	content: "."; 
	display: block; 
	height: 0; 
	clear: both; 
	visibility: hidden;
}

* html>body .clearfix,
#secnav ul {
	display: inline-block; 
	width: 100%;
}

* html .clearfix {
	/* Hides from IE-mac \*/
	height: 1%;
	/* End hide from IE-mac */
}

/* BUTTONS *****************************************************************************/

#enter_button, #karte_button, #buchung_button {
	width: 142px; 
	height: 40px; 
	display: block;
	background-color: #fff;
}


/* Enter */
#enter_button {
	background: url(../img/buttons/button_enter.gif) no-repeat 100% 100%; 
  	position: absolute;
  	margin: 361px 0 0 553px;
  	float: right;
}
#enterDiv { position: relative; }
#enterDiv a:hover { background: url(../img/buttons/button_enter_over.gif); }

/* Karte */
#karte_button { background: url(../img/buttons/button_karte.gif) no-repeat 100% 100%; }
#karteDiv { position: relative; }
#karteDiv a:hover { background: url(../img/buttons/button_karte_over.gif); }

/* Buchung */

#buchung_button { background: url(../img/buttons/button_buchung.gif) no-repeat 100% 100%; }
#buchungDiv { position: relative; }
#buchungDiv a:hover { background: url(../img/buttons/button_buchung_over.gif); }

/* ToTop */
#toTop { 
	position: fixed; 
	bottom: 0; 
	right: 0; 
	width: 50px; 
	height: 17px; 
	border: 0; 
	text-decoration: none; 
	text-indent: -9999px; 
	display: block; 
	overflow: hidden; 
	background: url(../img/to_top.gif) no-repeat 100% 100%; 
}
#toTopDiv { position: absolute; left: -9999px; }
#toTopDiv a:hover {	background: url(../img/to_top_over.gif); }

/* COLORBOX *********************************************************************/	
/*
    ColorBox Core Style
    The following rules are the styles that are consistant between themes.
    Avoid changing this area to maintain compatability with future versions of ColorBox.
*/
#colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden;}
#cboxOverlay{position:fixed; width:100%; height:100%;}
#cboxMiddleLeft, #cboxBottomLeft{clear:left;}
#cboxContent{position:relative; overflow:hidden;}
#cboxLoadedContent{overflow:auto;}
#cboxLoadedContent iframe{display:block; width:100%; height:100%; border:0;}
#cboxTitle{margin:0;}
#cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%;}
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;}

/* 
    ColorBox example user style
    The following rules are ordered and tabbed in a way that represents the
    order/nesting of the generated HTML, so that the structure easier to understand.
*/
#cboxOverlay{background:#fff;}

#colorBox{}
    #cboxTopLeft{width:25px; height:25px; background:url(images/border1.png) 0 0 no-repeat;}
    #cboxTopCenter{height:25px; background:url(images/border1.png) 0 -50px repeat-x;}
    #cboxTopRight{width:25px; height:25px; background:url(images/border1.png) -25px 0 no-repeat;}
    #cboxBottomLeft{width:25px; height:25px; background:url(images/border1.png) 0 -25px no-repeat;}
    #cboxBottomCenter{height:25px; background:url(images/border1.png) 0 -75px repeat-x;}
    #cboxBottomRight{width:25px; height:25px; background:url(images/border1.png) -25px -25px no-repeat;}
    #cboxMiddleLeft{width:25px; background:url(images/border2.png) 0 0 repeat-y;}
    #cboxMiddleRight{width:25px; background:url(images/border2.png) -25px 0 repeat-y;}
    #cboxContent{background:#fff;}
        #cboxLoadedContent{margin-bottom:20px;}
        #cboxTitle{position:absolute; bottom:0px; left:0; text-align:center; width:100%; color:#999;}
        #cboxCurrent{position:absolute; bottom:0px; left:100px; color:#999;}
        #cboxSlideshow{position:absolute; bottom:0px; right:42px; color:#444;}
        #cboxPrevious{position:absolute; bottom:0px; left:0; color:#444;}
        #cboxNext{position:absolute; bottom:0px; left:63px; color:#444;}
        #cboxLoadingOverlay{background:url(images/loading.gif) 5px 5px no-repeat #fff;}
        #cboxClose{position:absolute; bottom:0; right:0; display:block; color:#444;}

/*
    The following fixes png-transparency for IE6.  
    It is also necessary for png-transparency in IE7 & IE8 to avoid 'black halos' with the fade transition
    
    Since this method does not support CSS background-positioning, it is incompatible with CSS sprites.
    Colorbox preloads navigation hover classes to account for this.
    
    !! Important Note: AlphaImageLoader src paths are relative to the HTML document,
    while regular CSS background images are relative to the CSS document.
*/
.cboxIE #cboxTopLeft{background:transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=images/internet_explorer/borderTopLeft.png, sizingMethod='scale');}
.cboxIE #cboxTopCenter{background:transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=images/internet_explorer/borderTopCenter.png, sizingMethod='scale');}
.cboxIE #cboxTopRight{background:transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=images/internet_explorer/borderTopRight.png, sizingMethod='scale');}
.cboxIE #cboxBottomLeft{background:transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=images/internet_explorer/borderBottomLeft.png, sizingMethod='scale');}
.cboxIE #cboxBottomCenter{background:transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=images/internet_explorer/borderBottomCenter.png, sizingMethod='scale');}
.cboxIE #cboxBottomRight{background:transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=images/internet_explorer/borderBottomRight.png, sizingMethod='scale');}
.cboxIE #cboxMiddleLeft{background:transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=images/internet_explorer/borderMiddleLeft.png, sizingMethod='scale');}
.cboxIE #cboxMiddleRight{background:transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=images/internet_explorer/borderMiddleRight.png, sizingMethod='scale');}