/* CSS Document */

/*Webfonts*/
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,400italic,600,700);

/*Basis-Layout*/	
* { font-family: "Open Sans", sans-serif; }
body { margin: 0px; font-family: "FagoWebPro", sans-serif; font-size: 1em; line-height: 1.3em; color: #505050; background-color: #F1F1F1; }

	body.help { background-color: transparent; min-width: 10px; }
	body.popupDialog { background-color: transparent; min-width: 10px; margin: 5px; }
		body.popupDialog :first-child { margin-top: 0px; }

#barTop { position: fixed; top: 0; left: 0; z-index: 1000; width: 100%; padding: 0; background-color: #FFF; -webkit-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.4); -moz-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.4); box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.4); }

	#barTopContent { padding: 0.5em 1.5em; min-width: 1000px; }
	#barTopContent .navItem { display: inline-block; margin-top: 0.3em; margin-right: 1em; }
	#barTopContent .navItem i.fa { margin-right: 0em; }
	#barTopContent .navItem a { }
	#barTopContent a.button { float: right; margin: 0; margin-bottom: 0.7em; }

div#containerPage { min-width: 1040px; max-width: 1400px; margin-top: 3.3em; }

	#containerLeft { position: relative; display: inline-block; vertical-align: top; width: 25.5%; z-index: 100; }
		#logo {width: 85%; height: auto; margin-top: 30px; margin-left: 7%; }

	#panelNavi { padding: 0 1.5em; margin-top: 3em; }
		#panelNavi a { display: block; font-size: 1em; padding: 0.6em 0; font-weight: 700; text-decoration: none; color: #505050; border-top: 1px solid #CCC; }
		#panelNavi a:hover { text-decoration: underline; } 
		#panelNavi a.sub { font-size: 0.9em; line-height: 1.2em; border-top: 0px none; padding: 0.3em 0 0.3em 0; font-weight: 400; margin-top: -0.5em; margin-bottom: 0.5em; }
			
	#panelLogin { padding: 0.5em 1em; border: 1px solid #CCC; background-color: #EFEFEF; margin: 5em 0 0 1.5em; }
		#panelLogin h2 { padding: 0.5em 0; margin-top: 0; }
		#panelLogin input[type=text], #panelLogin input[type=password] { background-color: #FFF; width: 90%;}
		#panelLogin .button { margin-top: 1em; }

	#containerContent { display: inline-block; width: 70%; vertical-align: top; margin-right: 2em; margin-top: 3em; float: right; }

#statusMessageBar { position: fixed; display: none; z-index: 1000; padding: 0.75em 0; text-align: center; top: 3.1em; text-align: center; background-color: rgba(255,255,255,0.6); width: 100%; color: #FFF; font-weight: 700; }
	#statusMessageBar i.fa { color: #FFF; font-size: 1.2em; margin-right: 0.5em; }
	#statusMessageBar.error {  background-color: rgba(156,46,43,0.7);}
	#statusMessageBar.ok { background-color: rgba(37,162,89,0.7); }

/*Allg. Typo und Styles*/
h1, h2, h3, h4, h5, h6 { margin: 0; line-height: 1.4em; font-weight: 600; color: #23b9ce; text-transform: uppercase; }

h1 { font-size: 1.4em; font-weight: normal; }
h2 { font-size: 1.2em; font-weight: normal; }
h3, h4, h5 { font-size: 1.1em; font-weight: normal; }

hr { border: 0px none; height: 1px; border-top: 1px dotted #23b9ce; margin: 1.5em 0; }

strong { font-weight: 700; }

a { cursor: pointer; color: #505050; }
a:hover { text-decoration:none; }

i.fa { color: #23b9ce; margin-right: 0.2em; margin-top: 0.3em; }

.errorMsg { color:#BB2C2E; display: none; }
.errorMsg.login { display:block;}

a.iconHelper { display: inline-block; text-decoration: none; float: right; }
	a.iconHelper.left { float: none; margin-left: 1em; }
	a.iconHelper:before { font-family: FontAwesome; content: '\f059'; color: #f07d00; font-size: 1.4em; }

.clearFloat { clear: both;}

.textSmall { font-size: 0.9em !important; line-height: 1.3em !important; }
.textLarge { font-size: 1.1em !important; line-height: 1.3em !important; }

ul { list-style: square; padding: 0; }
ul li { margin-bottom: 0.75em; margin-left: 1.25em;}

ul.checkList {}
	ul.checkList li { display: block; position: relative; padding-left: 1em; }
	ul.checkList li:before { position: absolute; left: 0; font-family: FontAwesome; left: -1em; content: '\f00c'; color: #23b9ce; }

img { border: 0px none; }

/*Fancybox*/
body.fancybox { padding: 0.5em; padding-bottom: 0; }
body.fancybox :first-child { margin-top: 0; }
.fancybox-skin { -webkit-border-radius: 0px !important; -moz-border-radius: 0px !important; border-radius: 0px !important; background-color: #FFF !important; }


/*Content-Elemente*/
.formPanel { background-color: #FFF; padding: 1.5em 2em; margin-bottom: 2em;}

.contentPanel { background-color: #FFF;padding: 1.5em 2em; margin-bottom: 2em; position: relative; }
	.contentPanel .panelIcon { font-size: 4em; float: right; margin: 0 0 2em 2em; position: absolute; right: 0.5em; top: 0.5em; }

/*Formulare*/
table.formTable { margin-top: 1em; max-width: 80%; }
	table.formTable tr > td { padding: 0.6em 2em 0.6em 0; border-top: 1px solid #F1F1F1; vertical-align:top; }
	table.formTable tr > td:nth-child(2) { padding-right: 0; }
	table.formTable tr > td p { margin-top: 0px;}
	table.formTable tr > th { padding: 0.1em 2em 0.1em 0; border-top: 0px none; vertical-align: bottom; text-align:left; }
	table.formTable tr.groupHeader > td { border-top: 0px none; padding-top: 0.5em; font-weight: 700; }

table.classification tr td  { border: 0px none; padding: 0px 30px 0px 0px; text-align:center; }

input[type=text], input[type=password], textarea { border: 1px solid #E3E3E3; padding: 0.3em 1%; font-size: 1em; width: 98%; background-color: #F1F1F1; color: #505050; }
select { -webkit-appearance: none; -moz-appearance: none; appearance: none; width: 100%; padding: 0.3em 20% 0.3em 1%; color: #505050; border: 1px solid #E3E3E3; background-color: #F1F1F1; font-size: 1em; border-radius: 0;
		background-image: url(/assets/images/icon_chevron-down.png); background-position: top 3px right 6px; background-repeat: no-repeat; }

	input[type=text].inputError, input[type=password].inputError, textarea.inputError, select.inputError { border: 1px solid #BB2C2E; }

input[type=checkbox] { margin-right: 5px;  }
input[type=radio] { margin-right: 5px; }

.button { color: #FFF !important; background-color: #f07d00; border: 1px solid #f07d00; padding: 0.4em 1em 0.3em 0.5em; margin: 0.5em 0; font-weight: 700; font-size: 0.9em; text-decoration: none !important; cursor: pointer; margin-right: 0.75em; display: inline-block; }
.button.noicon { padding: 0.5em 1em 0.4em 1em; }
.button.icononly { padding: 0.4em 0.3em 0.3em 0.4em }
.button.light { background-color: #23b9ce; }
.button i.fa { color: #FFF; font-size: 1.2em; margin-right: 0.25em; margin-left: 0.2em; margin-top: 0; }

div.attributeCol { display: block; }
	div.attributeCol input { margin-top:0px;}

/*Startseite Öffentlich*/
div.startPublic {}
	div.startPublicLeft { display: inline-block; width: 57%; vertical-align: top; position: relative; }
	div.startPublicRight { display: inline-block; width: 35%; vertical-align: top; float: right; position: relative; }

	.priceButton { position: absolute; color: #FFF; background-color: #23b9ce; width: 110px; height: 50px; margin-top: -60px; right: 0; padding: 35px 0 25px 0; border-radius: 100%; text-align: center; font-size: 1.2em;
					-webkit-box-shadow: 0px 0px 4px 2px rgba(0,0,0,0.2);
					-moz-box-shadow: 0px 0px 4px 2px rgba(0,0,0,0.2);
					box-shadow: 0px 0px 4px 2px rgba(0,0,0,0.2); }

/*Startseite Dashboard*/
#dashboardTeaser { display: -webkit-flex; -webkit-flex-direction: row; display: flex; flex-direction: row; justify-content: space-between; flex-wrap: wrap; }
	#dashboardTeaser .teaserItem { background-color: #FFFFFF; width: 25%; padding: 1.5em 3%; text-align: center; text-decoration: none; margin-bottom: 2em; }
	#dashboardTeaser .teaserItem i.fa { font-size: 2em; clear: both; display: block; margin: auto; margin-bottom: 0.5em; }
	#dashboardTeaser .teaserItem .count { font-size: 1.6em; font-weight: 700; display: block; clear: both; margin-bottom: 0.5em;  }
	#dashboardTeaser .teaserItem:hover { color: #FFF; background-color: #23b9ce; -webkit-transition: background-color 1s; transition: background-color 1s; }
	#dashboardTeaser .teaserItem:hover i.fa { color: #FFF; }

div.newsItem { position: relative; padding-top: 3em; }
	div.newsItem .newsDate { position: absolute; right: 0; top: 0; padding: 0.5em 1em; background-color: #23b9ce; font-weight: 700; color: #FFF; }

/*Kundendaten*/
#formPanelCustomer {}
	#formPanelCustomer #firstname { width: 47.2%; }
	#formPanelCustomer #lastname { width: 47.2%; float: right; }
	#formPanelCustomer #street { width: 71%; }
	#formPanelCustomer #number { width: 10%; }
	#formPanelCustomer #number_add { width: 10%; float: right; }
	#formPanelCustomer #zip { width: 25.4%; }
	#formPanelCustomer #city { width: 69%; float: right; }

	#billing_firstname { width: 47.2%; }
	#billing_lastname { width: 47.2%; float: right; }
	#billing_zip { width: 25.4%; }
	#billing_city { width: 69%; float: right; }

/*Tabs*/
#accommodationTabs { margin-top: 1em; border-top: 1px solid #E3E3E3; background-color: #EFEFEF; }
	#accommodationTabs a { display: inline-block; float: left; padding: 0.5em 1em; border-right: 1px solid #E3E3E3;text-decoration: none; }
	#accommodationTabs a:hover { text-decoration: underline; }
	#accommodationTabs a.active { background-color: #FFF; color: #23b9ce; font-weight: 700; }

.btnPublish { float: right; margin-left: 2em; margin-top: 0px; margin-right: 0; font-weight: bold; }

/*Beschreibung*/
.attributeSelector { margin-bottom: 0.3em; position: relative; }
.attributeSelector input[type=checkbox] { position: relative; top: -0.2em; }

/*Preistabelle Unterkünfte*/
.formTableAccommodationPrices { max-width: 100% !important; width: 100%; }
	.formTableAccommodationPrices td { vertical-align: top !important; }

table.accommodationPrices tr td { padding: 0.4em 1em 0.4em 0.5em; border-top: 1px solid #F1F1F1; }
table.accommodationPrices tr th { padding: 0.4em 1em 0.4em 0.5em; text-align: left; vertical-align: bottom; font-size: 0.9em; }
table.accommodationPrices tr.priceAddRow td { background-color:#F1F1F1; padding-top: 0.5em; }

	table.accommodationPrices input, table.accommodationPrices select { background-color: #FFF; font-size:  0.9em;}
	table.accommodationPrices select { background-position: top 5px right 3px; background-size: 20px auto; }

	table.accommodationPrices .selectDay { width: 35% !important; }
	table.accommodationPrices .selectMonth { width: 60% !important; }

/*Belegungsplan*/
div.occupationCalendar { display: -webkit-flex; -webkit-flex-direction: row; display: flex; flex-direction: row; justify-content: space-between; flex-wrap: wrap; }
	div.occupationCalendar div.month { width: 32%; margin-bottom: 1em; display: inline-block; display: -webkit-flex; -webkit-flex-direction: row; display: flex; flex-direction: row; justify-content: flex-start; flex-wrap: wrap; }
		div.monthName { margin-bottom: 4px; padding-top: 3px; text-align: center; width: 100%; font-size: 0.9em; font-weight: 700; }
	div.occupationCalendar div.day { padding: 0.3em 0px 0.2em 0; cursor:default; width: 13.8%; font-size: 0.9em; display: inline-block; background-color:#F1F1F1; text-align: center; border-right: 1px solid #FFF; border-bottom: 1px solid #FFF; }
	div.occupationCalendar div.day.weekday { background-color:#CCC; color: #FFF; }
	div.occupationCalendar div.day.ANAB { background-image:url(/assets/images/bg_anabreise.png); background-repeat: no-repeat; background-position: center; color: #FFF;  }
	div.occupationCalendar div.day.B { background-color: rgba(156,46,43,0.8); color: #FFF; }
	div.occupationCalendar div.day.F { background-color: rgba(37,162,89,0.8); color: #FFF; }

div.selectOcc { margin-bottom: 15px; }
	a.selectOccMarker { display: inline-block; width: 30px; height: 30px; border: 2px solid #FFF; vertical-align: middle; margin-right: 4px; cursor:pointer; }
		a.selectOccMarker.selected { border: 2px solid #000; }
		a.selectOccMarker.F { background-color: #338A42; }
		a.selectOccMarker.B { background-color: #C1051F; }
		a.selectOccMarker.ANAB { background-image:url(/assets/images/bg_anabreise.png); background-repeat: no-repeat; background-position: center; color: #FFF; }
		a.selectOccMarker.AA { background-color:#E9E9E9; }
		
div.selectOccYear a { font-size: 1em; display: inline-block; padding: 0.4em 1em 0.3em 1em; margin: 1em 0.5em 1em 0; color: #FFF; text-decoration: none; cursor: pointer; background-color: #23b9ce;  }
div.selectOccYear a.active { background-color: #f07d00; }
div.selectOccYear a:hover { border: 1px solid #777777; }


/*Unterkünfte Übersicht*/
div.acommodationOverview { padding-top: 1em; margin-top: 1em; }
	div.acommodationOverview div.colLeft { display: inline-block; vertical-align: top; width: 20%; margin-right: 4%; }
	div.acommodationOverview div.colCenter { display: inline-block; vertical-align: top; width: 50%; margin-left: 4%; }
	div.acommodationOverview div.colRight { display: inline-block; vertical-align: top; width: 20%; }

	div.acommodationOverview h3 { margin-top: 0.5em; }
	div.acommodationOverview img { float: left; width: 100%; height: auto; margin-top: 0; }
	div.acommodationOverview .imageSpacer { border: 1px solid #E1E1E1; padding: 2em 2em 2.5em 2em; text-align: center; margin-top: 0.75em; }
		div.acommodationOverview .imageSpacer i.fa { font-size: 3em; color: #E1E1E1; }
	div.acommodationOverview .countValue { font-size: 1.8em; text-align: center; margin: 0.3em 0; }
	div.acommodationOverview div.accommodationCoreStats { display: inline-block; margin-bottom: 1em; float: right; padding: 0.5em 1.5em; font-size: 0.9em; text-align: center; background-color: #F1F1F1; }
		div.acommodationOverview div.accommodationCoreStats i.fa { font-size: 1.8em; }

	#labelStatus.online { color: #206E3F; }
	#labelStatus.parked { color: #992224; }

/*Unterkunft Ort*/
#formPanelLocation {}
	#formPanelLocation #street { width: 71%; }
	#formPanelLocation #number { width: 10%; }
	#formPanelLocation #number_add { width: 10%; float: right; }
	#formPanelLocation #zip { width: 25.4%; }
	#formPanelLocation #city { width: 69%; float: right; }
	#formPanelLocation #distance_sea { width: 20%; }

.panelGMaps { margin-bottom: 2em; }

/*Bilder*/
div.panelUploadImage { background-color: #F1F1F1; padding: 1em; margin-bottom: 2em;}
	#loaderImage { display: none; padding: 1em 2em; }
	div.panelUploadImage input[type=file] { background-color: #FFF; font-size: 0.9em; padding: 0.4em 0.5em 0.35em 0.5em; border: 1px solid #CCC; border: 1px solid #E3E3E3; }

/*Statistik*/
div.statsSelector { padding: 2em; margin-bottom: 2em; background-color: #FFF;}
	div.multiSelect { border: 1px solid #CCC; margin-top: 0px; height: 10em; min-width: 200px; display: block; vertical-align:top; float:left; margin: 0; }
	div.multiSelect div.label { background-color: #EFEFEF; padding: 0.2em 0.5em; position: relative; margin-top: 0px; width: auto;}
	div.multiSelect div.scrollContent { height: 150px; overflow: scroll; }
			
	div.multiSelect table { width: 100%; }
		div.multiSelect table tr td { vertical-align:top; padding: 0.4em; border-bottom: 1px solid #EDEAE8; }
		div.multiSelect table tr td:first-child { width: 1em; }

	div.multiSelect.year { width: 30%; margin-right: 3%; }
	div.multiSelect.accommodation { width: 60%;}

	#btnShowStats { margin-top: 1.5em; }

div.statsData { overflow: scroll;}
	div.statsData table { margin-top: 2em; }
	div.statsData table tr th { text-align: right; border-right: 1px solid #EDEAE8; padding: 0.25em 1em; font-weight: normal; font-size: 0.9em; vertical-align: bottom;}
	div.statsData table tr th:first-child { text-align: left; }
	div.statsData table tr td { padding: 0.25em 1em; border-right: 1px solid #EFEFEF; text-align:right; }
	div.statsData table tr:nth-child(2n) > td { background-color: #F1F1F1; }
	div.statsData table tr > td:first-child { text-align:left;}
	div.statsData table tr.statsSum td { font-weight:bold; color: #23b9ce; }
		
/*Lage der Unterkunft*/		
div.panelGMaps { padding:25px; background-color: #FFF; margin-top: 20px;}
		
/*Registrierung*/
.formTable.signup tr:first-child td { border-top: 0px none; }
	.formTable.signup input[type=text] { width: 350px;}
	.formTable.signup input[type=password] { width: 350px;}
	
/*Preise und AGB*/
table.prices tr td { vertical-align: top; border-top: 1px solid #EDEAE8; padding: 5px 25px 5px 0px;}
table.prices tr.noborder td { border-top: 0px none;}
table.prices tr td:nth-child(2) { width: 140px;}

/*Nachrichten und Buchungsanfragen*/
div.inquiry {}
	div.inquiry div.labelNew { color: #FFF; position: absolute; right: 0; top: 0; background-color: #f07d00; padding: 0.3em 1em; font-weight: 700; }
	div.inquiry .colLeft { display: inline-block; width: 65%; }
	div.inquiry .colRight { display: inline-block; width: 30%; float: right; }