body
{
    background: url(/hb/img/bodybg.png) repeat-x fixed;
	margin: 0px;
	padding: 0px;
	font-family: Verdana, Arial, Helvetica, Sans-serif;
	font-size: 9pt;
}


#main
{
	position: absolute;
	left: -390px;
	margin-left: 50%;
	width: 780px;	
}

#logo
{
	font-size: 17pt;
	font-weight: bold;
	position: absolute;
	left: -390px;
	top: 4px;
	margin-left: 50%;
	text-decoration: none;
	color: white;
	
	width: 270px;
	height: 50px;

	/* nur fuer MSIE6 */
	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/hb/img/homestay.png');
}

#logo[id] /* Ausschluss von MSIE6 */
{
	background: url(/hb/img/homestay.png);
}

#logo-stage
{
	font-size: 17pt;
	font-weight: bold;
	position: absolute;
	left: -390px;
	top: 4px;
	margin-left: 50%;
	text-decoration: none;
	color: white;
	
	width: 270px;
	height: 50px;

	background: url(/hb/img/test_logo.jpg);
}

	
#flags 
{
	position: absolute;
	left: 370px;
	top: 23px;		
	width: 290px;
}


#flags img
{
    margin-left: 4px;
    border: 1px solid LIGHTSTEELBLUE;
}

#login
{
	text-align: right;
	position: absolute;
	left: 660px;
	top: 22px;
	font-size: 11pt;
	color: white;
	width: 118px;
}

#login a
{
	text-decoration: none;
	color: white;
}


#nav
{
	font-family: Verdana, Arial, Helvetica, Sans-serif;
	width: 780px;
	/* hier Höhe entfernt (30px) */
	border: 0px;
	
	position: absolute;
	left: -390px;
	top: 65px; /* !!! 65 !!! */
	margin-left: 50%;
}

div#nav ul
{
	list-style: none;
	width: 100%;
	display: inline;
	margin-left: 0px;
	padding-left: 0px;	
}

div#nav ul li
{
	list-style: none;
	display: block;
	float: left;
	text-align: center;
	height: 35px; /* diese Höhe darf höher sein als sichtbar (es ist die Höhe der Tab-Bilder). Ist es aber ZU hoch, dann schauen sie unter dem top-filler wieder raus :-( */
	font-size: 9pt;
	font-weight: bold;
	color: white; 
	padding-top: 1px;
}

div#nav ul li span
{
	font-size: 8pt;
	font-weight: normal;
}

a.topnav
{
	color: white;
	text-decoration: none;
}

a.topnav-hi
{
	color: #1e1e62;
	text-decoration: none;
}

/* für den Home-Tab braten wir ne Extrawurst */

.topnav-home li
{
	width: 130px;
    background:url(/hb/img/nav130.gif) top no-repeat;
	list-style: none;
	display: block;
	float: left;
	text-align: center;
	height: 30px;
	font-size: 9pt;
	font-weight: bold;
	color: white; 
	padding-top: 10px;		
}


.topnav-home li a
{
	color: white;
	text-decoration: none;
}


#nav-home
{
	width: 130px;
    background:url(/hb/img/nav130.gif) top no-repeat;
}
#nav-home-hi
{
	color: white;
	width: 130px;
    background:url(/hb/img/nav130hi.gif) top no-repeat;
}

#nav-family
{
	width: 130px;
    background:url(/hb/img/nav130.gif) top no-repeat;
}
#nav-family-hi
{
	width: 130px;
    background:url(/hb/img/nav130hi.gif) top no-repeat;
}

#nav-guest
{
    width: 130px;
    background:url(/hb/img/nav130.gif) top no-repeat;
}
#nav-guest-hi
{
    width: 130px;
    background:url(/hb/img/nav130hi.gif) top no-repeat;
}

#nav-shortstay
{
    width:195px;
    background:url(/hb/img/nav195.gif) top no-repeat;
}
#nav-shortstay-hi
{
    width:195px;
    background:url(/hb/img/nav195hi.gif) top no-repeat;
}

#nav-lang
{
    width:195px;
	border: 0px;	
    background: url(/hb/img/nav195.gif) top no-repeat;
}    
#nav-lang-hi
{
    width:195px;
	border: 0px;	
    background: url(/hb/img/nav195hi.gif) top no-repeat;
}

/* wenn top-search nicht verwendet wird : da steht jetzt der Howto-Link (nochmal im CSS top-help) drin*/
#top-filler 
{
	background-color: #c8c8f8; /* leicht anderes Blau, sonst klappt es nicht mit den GIFs */ 
	height: 16px; 
	position: absolute;
	left: -390px;
	margin-left: 50%;
	width: 778px;
	top: 95px;
	padding-top: 4px;
	padding-bottom: 6px;
	border-left: 1px solid #1e1e62;
	border-right: 1px solid #1e1e62;
}

#top-filler a
{
	font-weight: bold;
	color: #1e1e62;
	text-decoration: none;
}

#top-help
{
	font-size: 8pt;
	color: #1e1e62;  
	text-align: center;
	font-weight: normal;
}

#top-search
{
	background-color: #1e1e62;
	color: white;
	height: 25px;
	position: absolute;
	left: -390px;
	margin-left: 50%;
	width: 770px;
	top: 95px;
	padding-left: 10px;
	padding-top: 1px;
	
	/*
	background-color: #1e1e62;
	color: white;
	margin: 0px;
	*/
}    



#content-container
{
    /*background: url(/hb/img/bg1.png) top no-repeat;
    background-color: white;*/
	position: absolute;
	left: -390px;
	margin-left: 50%;
	top: 114px; /* !! 105px;*/
	background-color: white;
	border-left: 1px solid white;
	border-right: 1px solid white;
	padding-left: 10px;
	padding-right: 10px;
	width: 758px;
}

#content-container h1
{
	font-family: Verdana, Arial, Helvetica, Sans-serif;
	font-style: bold;
	font-size: 11pt;
	margin-top: 7px;
	margin-bottom: 7px;
	padding: 0px;	
}

#content-container h2
{
	font-size: 9pt;
	padding: 0px;	
	margin-top: 9px;
	margin-bottom: 2px;
	font-style: bold;
}

#content-container h3
{
	font-size: 8pt;
	padding: 0px;	
	margin-top: 9px;
	margin-bottom: 1em;
	font-style: bold;
}

#content-container p
{
	font-size: 9pt;
	padding: 0px;
	margin-top: 2px;
	margin-bottom: 7px;
	line-height: 1.4em;
}

#content-container ol
{
	list-style-position: inside; /* Bug mit floating, wtf? : http://www.bestviewed.de/css/bsp/float/#ul */
	font-size: 9pt;
	padding: 0px;
	margin-top: 2px;
	margin-bottom: 7px;
	line-height: 1.4em;
}


#content-container td
{
	font-size: 9pt;		
}

#left-content
{
    padding: 10px; 
    width: 359px;
    float: left;
}

#left-content-wide
{
    padding: 10px; 
	width: 540px;	
    float: left;
}


#right-content
{
    padding: 10px;
    width: 358px;
    float: right;
}

#right-content-narrow
{
    padding: 10px; 
	width: 177px;	
	float: right;
}	

#wide-content
{
	padding: 10px;
	width: 718;
	float: left;
}	


#footer
{
	font-family: Verdana, Arial, Helvetica, Sans-serif;
    background-color: white;
	border-left: 1px solid white;
	border-right: 1px solid white;
    text-align: center;
    font-size: 8pt;
    clear: both;
}

div#footer a
{
	color: black;
	text-decoration: none;
}

div#footer a:hover
{
	color: blue;
	text-decoration: underline;
}

.img-text
{
	font-size: 8pt;
}


/* Forms */
.small-form-text
{
	margin-top: 8px;
	margin-bottom: 2px;
	font-size: 8pt;
}

.small-form-input
{
	font-size: 8pt;
	width: 125px;
	border: 1px solid grey;
	background-color: #f3f3f3;
}

.small-form-button
{
	border: 1px solid grey;
	background-color: #e11100;
	color: white;
	width: 125px;
	font-size: 9pt;
	font-weight: bold;
}

.search-result
{
	background-color: #ccccff;
	margin-top: 7px;
	margin-bottom: 7px;
}

.red-button
{
	border: 1px solid grey;
	background-color: #e11100;
	color: white;
	font-size: 9pt;
	font-weight: bold;		
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
}


.red-button300
{
	border: 1px solid grey;
	background-color: #e11100;
	color: white;
	font-size: 9pt;
	font-weight: bold;		
	width: 300px;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
}

/* dieser ist für links */
.red-button-noform
{
	display: block;
	border: 1px solid grey;
	background-color: #e11100;
	color: white;
	font-size: 8pt;
	font-weight: bold;
	text-align: center;		
	text-decoration: none;
	padding: 2px;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
}

.small-red-button-noform
{
	display: block;
	border: 1px solid grey;
	background-color: #e11100;
	color: white;
	font-size: 8pt;
	font-weight: normal;
	text-align: center;		
	text-decoration: none;
	padding: 2px;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
}

.small-blue-button-noform
{
	display: block;
	border: 1px solid grey;
	background-color: #1e1e62;
	color: white;
	font-size: 8pt;
	font-weight: normal;
	text-align: center;		
	text-decoration: none;
	padding: 2px;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
}

.large-red-button-noform
{
	display: block;
	border: 1px solid grey;
	background-color: #e11100;
	color: white;
	font-size: 8pt;
	font-weight: bold;
	text-align: center;		
	text-decoration: none;
	padding: 4px;
	margin: 4px;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
}


.blue-button-noform
{
	display: block;
	border: 1px solid grey;
	background-color: #1e1e62;
	color: white;
	font-size: 8pt;
	font-weight: bold;
	text-align: center;		
	text-decoration: none;
	padding: 2px;
	-moz-border-radius:8px;
	-webkit-border-radius:8px;
}

.small-red-button
{
	border: 1px solid grey;
	background-color: #e11100;
	color: white;
	font-size: 8pt;
	font-weight: normal;		
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
}


.explanation
{
	font-size: 7pt;
}

.explanation-content
{
	border-style:solid;
	border-width:1px;
	padding:7px;
	position:absolute;
	left:0px;
	top:0px;
	z-index:1;
	background-color: yellow;
	layer-background-color: yellow;
	visibility:hidden;
}

.date-input-small
{
	font-size: 8pt;
	width: 80px;
	border: 1px solid grey;
	background-color: #f3f3f3;		
}

/* Bilder ********************************************************************************/

.img-right {
	margin-top: 10px;	
	margin-right: 0pt;	
	margin-bottom: 5px;	
	margin-left: 10px;	
	float: right;
}

.img-left {
	margin-top: 10px;	
	margin-right: 10pt;	
	margin-bottom: 5px;	
	margin-left: 0px;	
	float: left;
}


/* Elemente Eingabe / Registrierung ******************************************************/

.hb-input
{
	font-size: 8pt;
	border: 1px solid grey;
	background-color: #f3f3f3;
	width: 150px;
}

.hb-input338
{
	font-size: 8pt;
	border: 1px solid grey;
	background-color: #f3f3f3;
	width: 338px;
}

.hb-input300
{
	font-size: 8pt;
	border: 1px solid grey;
	background-color: #f3f3f3;
	width: 300px;
}

.hb-input200
{
	font-size: 8pt;
	border: 1px solid grey;
	background-color: #f3f3f3;
	width: 210px;
}


.hb-input75
{
	font-size: 8pt;
	border: 1px solid grey;
	background-color: #f3f3f3;
	width: 75px;
}

.hb-input100
{
	font-size: 8pt;
	border: 1px solid grey;
	background-color: #f3f3f3;
	width: 100px;
}

.hb-table tr th
{
	vertical-align: top;
	font-weight: normal;
}

.hb-table tr td
{
	vertical-align: top;
}


/* Boxen ***************************************************************/

.red-bull
{
	/* diese Klasse ersetzt die alten roten Kästen */
	margin-top: 10px;
	margin-bottom: 20px;
}

.red-bull span
{
	color: #e11100;
	font-size: 9pt;
	font-weight: normal;	
}

.red-box-355
{
	width: 355px;
	/*height: 170px;*/
    background: url(/hb/img/redbox355.png) left bottom no-repeat;
	padding: 0px;
	margin-top: 0px;
}


.red-box-355 span/** DEPRICATED **/
{
	color: #e11100;
	font-size: 9pt;
	font-weight: normal;	
}

.red-box-headline /** DEPRICATED **/
{
	margin-top: 0px;
	padding: 10px;
	font-size: 9pt;
	font-weight: bold;	
	background: url(/hb/img/redbox355.png) top no-repeat;
}


.red-box-355 a/** DEPRICATED **/
{
	font-size: 8pt;
	padding-right: 5px;
}

.red-box-table tr td /** DEPRICATED **/
{
	vertical-align: top;
}	

.blue-box
{
	font-weight: bold;	
	background-color: #000080;
	color: white;
	margin-top: 7px;
	margin-bottom: 7px;
	padding: 8px;
}

.blue-box-right
{
	background-color: #000080;
	color: white;
	margin-top: 7px;
	margin-bottom: 7px;
	padding: 6px;	
}



.required
{
	color: red;
}

/* Message stuff *************/

#msg-text-display
{
	width: 700px;
	border: 1px solid grey;
	background-color: #f3f3f3;
	margin-top: 5px;
	margin-bottom: 15px;
	padding: 5px;
}

#msg-admin-comment
{
	width: 700px;
	border: 1px solid red;
	color: red;
	background-color: #fff3f3;
	margin-top: 5px;
	margin-bottom: 5px;
	padding: 5px;
}


#msg-subject
{
	/*width: 400px;*/
	width: 100%;
	font-size: 8pt;
	font-weight: bold;
	border: 1px solid grey;
	background-color: #f3f3f3;
}

#msg-text
{
	width: 100%;
	border-top: 0px;
	border: 1px solid grey;
	background-color: #f3f3f3;		
}

#msg-admin-text
{
	width: 100%;
	border: 1px solid grey;
	color: red;
	background-color: #f3f3f3;		
}

#msg-admin-reason
{
	width: 100%;
	border: 1px solid grey;
}


.msg-quote
{
    border-left: 3px solid blue;
    margin-top: 5px;
    padding-left: 0.4em;
}

.msg-quote-not-approved
{
    border-left: 3px solid red;
    margin-top: 5px;
    padding-left: 0.4em;
}


/* Admin **************************************************/

#admin-content
{
	width: 900px;
	margin-left: auto;
	margin-right: auto;
	background-color: white;
	border: solid black 1px;
}

/* Für Olaf Handy (war 320 statt 480 ) */
@media all and (max-device-width: 480px) {
	#admin-content
	{
		width: 480px;
		margin-left: auto;
		margin-right: auto;
		background-color: white;
		border: solid blue 1px;
	}
} 

.calendar tr td
{
	font-size: 8pt;		
}


/* Ajax Suchbox */
.searchbox
{
	width: 340px;
	padding-left: 6px;
	padding-right: 6px;
	padding-top: 3px;
	padding-bottom: 6px;
	background-color: #ccccff;
	border: 1px solid silver; 
	text-align: justify;
	-moz-border-radius:10px;
	-webkit-border-radius:10px;
}

/* Tag clouds ********************************************/

.tag1
{
	color: #1e1e62;
   	font-family: Verdana, Arial, Helvetica, Sans-serif;
	font-size: 12pt;
	font-weight: bold;
	text-decoration: none;	
	padding-right: 0.4em;
	white-space: nowrap;
}     
.tag2
{
	color: #1e1e62;
   	font-family: Verdana, Arial, Helvetica, Sans-serif;
	font-size: 12pt;
	padding-right: 0.4em;
	text-decoration: none;	
	white-space: nowrap;
}       
.tag3
{
	color: #1e1e62;
   	font-family: Verdana, Arial, Helvetica, Sans-serif;
	font-size: 10pt;
	padding-right: 0.4em;
	text-decoration: none;	
	white-space: nowrap;
}       
.tag4
{
	color: #1e1e62;
   	font-family: Verdana, Arial, Helvetica, Sans-serif;
	font-size: 8pt;
	padding-right: 0.4em;
	text-decoration: none;	
	white-space: nowrap;
}       


/* Boxen in der User-Administration ****************************/

.hbox-top
{
    border-left: 2px solid #ccccff;
    border-right: 2px solid #ccccff;
    border-top: 2px solid #ccccff;
    padding: 7px;
    -webkit-border-top-left-radius: 10px;
    -webkit-border-top-right-radius: 10px;
    -moz-border-radius-topleft: 10px;
    -moz-border-radius-topright: 10px;
	background-color: #c8c8f8;
	color: #1e1e62;
}    


/** .hbox ist browserspezifisch definiert --> siehe ie.css und no_ie.css */

/* Zertifizierung */

.cert
{
	margin-bottom: 4px;
	padding: 4px;
	font-size: 10pt;
	font-weight: bold;
	background-color: #ccccff;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
}


/* Live validation - nur invalid */
    
.LV_invalid_field, 
input.LV_invalid_field:hover, 
input.LV_invalid_field:active,
textarea.LV_invalid_field:hover, 
textarea.LV_invalid_field:active {
    border: 1px solid #CC0000;
}


/* Navigation im User-Bereich (up = user pages) */
#up-navcontainer
{
	border: 1px solid white; /* fucking MSIE */
}

#up-navlist
{
padding: 3px 0;
margin-left: 0;
border-bottom: 1px solid #778;
font: bold 12px Verdana, sans-serif;
}

#up-navlist li
{
list-style: none;
margin: 0;
display: inline;
}

#up-navlist li a
{
	padding: 3px 0.7em;
	margin-left: 5px;
	border: 1px solid #778;
	border-bottom: none;
	background: #DDE;
	text-decoration: none;
	
	-webkit-border-top-left-radius: 8px;
    -webkit-border-top-right-radius: 8px;
    -moz-border-radius-topleft: 8px;
    -moz-border-radius-topright: 8px;
}

#up-navlist li a:link { color: black; }


#up-navlist li a#current
{
background: white;
border-bottom: 1px solid white;
}

.user-profile-link
{
	display: block;
	padding-top: 0.3em;
}

/* FAQ */

#content-container h2.faq
{
	font-variant: small-caps;
	font-size: 15pt;
}

a.faq
{
	text-decoration: none;
	font-size: 9pt;
	/*font-weight: bold;*/
	color: black;
}

.faq-question
{
	margin-top: 10px;
}

.faq-answer
{
	margin-top: 10px; 
	margin-bottom: 25px; 
	background-color:#E5E5F5; 
	padding: 5px;
	border-radius: 3px; 
}