/*
	M3Web-Design: Basis-Seiten-Struktur 
	(Anordnung, Größe, Hintergrund und Verhalten der einzelnen Bereiche)

	- wird nach bootstrap.css geladen
*/

/* ==== Basis-Definitionen ==== */

.dont-display,
.print-only
{
	display: none;
}

.highlightCell,
.highlight
{
	background-color: #fdfc8b;
}

.hidden-text,
.hidden-text *,
.hidden-text a
{
	color: transparent !important;
	text-decoration: none !important;
	background: none !important;
	cursor: default !important;
	text-shadow: none;
	border: 0;
}

.hidden-text:hover,
.hidden-text a:hover
{
	color: rgba(0, 0, 0, 0.2) !important;
}

.fixed-header #header,
.fixed-top
{
	top: 0;
	z-index: 1031;
}

.fixed-bottom
{
	bottom: 0;
	z-index: 1030;
}



@media (min-width: 768px) and (min-height: 480px)
{
	.fixed-header #header,
	.fixed-bottom,
	.fixed-top
	{
		margin-bottom: 0;
		position: fixed;
		right: 0;
		left: 0;
	}
}


.central-content
{
	max-width: 980px;
	margin-left: auto;
	margin-right: auto;
}

body.not-responsive #wrap,
body.not-responsive #footer
{
	min-width: 1024px;
}

@media (min-width: 1024px)
{
	body.not-responsive .hidden-desktop
	{
		display: none;
	}
}

body.not-responsive .visible-desktop + .hidden-desktop
{
	display: none;
}

@media (min-width: 768px) and (min-height: 480px)
{
	.central-content
	{
		margin-top: 75px;
		margin-bottom: 40px;
	}
}

@media (max-width: 979px)
{
	.row-fluid.desktop-only > [class*=span]
	{
		float: none;
		margin: 0;
		margin-bottom: 20px;
		width: 100%;
	}
}


.scrollable-x,
.scrollable-x-tablet,
.scrollable-x-desktop,
.scrollable-x-phone
{
	/* für .inner muss min-width festgelegt werden, ab dem scrollbalken erscheint */
	overflow-x: auto;
}

.scrollable-x > .inner,
.scrollable-x-tablet > .inner
{
	min-width: 890px; /* 980-rand (rand = 2x20padding + 2x20margin + 2x5border = 90) */
}

.scrollable-x-desktop > .inner
{
	min-width: 1110px; /* 1200-rand */
}

.scrollable-x-phone > .inner
{
	min-width: 678px; /* 768-rand */
}

.scrollable-y
{
	overflow-y: auto;
	max-height: 400px;
}

.scrollable-y > .inner
{
	min-height: 400px;
}

@media (max-width: 767px)
{
	.scrollable-y-phone
	{
		overflow-y: auto;
		max-height: 400px;
	}

	.scrollable-y-phone > .inner
	{
		min-height: 400px;
	}
}

.document
{
	padding: 0px;
	/*box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 20px 0px;*/
	/* box-shadow: rgba(26, 26, 26, 0.3) 0px 0px 10px 0px;
	border: 1px solid rgba(140, 140, 140, 0.5);
	background-color: #fff;
	*/
}

#map-container
{
	border-left: 5px solid #0468B1;
}


#header,
#footer
{
	box-shadow: rgba(26, 26, 26, 0.4) 0px 0px 10px 0px;
}


.document-inline
{
	padding: 20px;
}

hr
{
	clear: both;
}

.sticked
{
	z-index: 10000;
}

.strong
{
	font-weight: bold;
}

html
{
	/*height: 100%;*/
	overflow-y: scroll; /* Scrollbalken immer einschalten, damit layout nicht beim erscheinen/verschwinden verrutscht */
	background: #ffffff;
	height: 100%;
}


/* ==== Bootstrap-Anpassungen/Erweiterungen ==== */

button,
a,
h1,
h2,
h3,
h4,
h5
{
	text-shadow: none !important;
}

.well
{
	background-color: #fcfcfc;
}

.nav-header
{
	color: #7F7F7F;
	text-transform: none;
}

textarea:focus,
input[type="text"]:focus,
input[type="password"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="time"]:focus,
input[type="week"]:focus,
input[type="number"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="color"]:focus,
.uneditable-input:focus
{
	border-color: rgba(4, 104, 177, 0.8);
	box-shadow: none;
}

.pull-right a.btn
{
	margin-left: 5px;
}

.pull-left a.btn
{
	margin-right: 5px;
}

.dropdown-menu > .active > a,
.dropdown-menu > .active > a:hover,
.dropdown-menu > .active > a:focus,
.btn,
.btn:hover,
.btn:focus
{
	background-image: none;
	box-shadow: none;
}

.btn.disabled,
.btn[disabled]
{
	opacity: 0.3;
}


.btn-group.open .dropdown-toggle,
.nav > li > a:hover,
.nav > li > a:focus,
.nav-tabs > li > a:hover,
.nav-tabs > li > a:focus
{
	box-shadow: none;
	background-color: #D9E8F3;
}

.btn.active,
.btn:active
{
	box-shadow: none;
}

.btn,
.btn:hover,
.btn:focus
{
	border-color: #D9E8F3;
	background-color: #fff;
	color: #0468B1;
}

.btn > span.caret
{
	border-top-color: #0468B1;
}

.btn-primary > span.caret
{
	border-top-color: #fff;
}

.dropup .btn > span.caret
{
	border-bottom-color: #0468B1;
}

.dropup .btn-primary > span.caret
{
	border-bottom-color: #fff;
}

.btn:hover,
.btn:focus
{
	background-color: #D9E8F3;
}

.btn-primary,
.btn-primary:hover,
.btn-primary:focus
{
	border-color: #D9E8F3;
	background-color: #0468B1;
	color: #fff;
}

.btn-primary:hover,
.btn-primary:focus
{
	background-color: #1FA0FE;
}

.btn-danger,
.btn-danger:hover,
.btn-danger:focus
{
	border-color: #E31418;
}

.btn-danger:hover,
.btn-danger:focus
{
	background-color: #FF3034;
}

.dropdown-menu,
.popover
{
	border-radius: 0;
	border: 1px solid #0468B1;
}

.modal,
.modal.fade.in
{
	position: absolute;
	top: 120px;
	margin-bottom: 60px;
	z-index: 999;
}

.modal-backdrop,
.modal-backdrop.fade.in
{
	z-index: 998;
	opacity: 0.3;
}

@media (min-width: 768px)
{
	.no-space > [class*="span"],
	.no-space > .row-fluid > [class*="span"],
	.fixed-space10 > [class*="span"]:first-child,
	.fixed-space10 > .row-fluid > [class*="span"]:first-child
	{
		margin-left: 0;
	}

	.fixed-space10 > [class*="span"],
	.fixed-space10 > .row-fluid > [class*="span"]
	{
		margin-left: 10px;
	}
}

legend + .control-group
{
	margin-top: 0;
}

.form-horizontal .control-group.input-append
{
	display: block;
}

	/* ==== Leaflet-Anpassungen ==== */

	/* TODO: Anpassungen nach leaflet-css laden und !important-Anweisungen wieder weg) */

.leaflet-top,
.leaflet-bottom
{
	z-index: 900 !important;
}

.leaflet-popup-content-wrapper
{
	-webkit-border-radius: 2px !important;
	border-radius: 2px !important;
}

.leaflet-popup-content
{
	margin: 10px 30px 10px 10px !important;
}

/* ==== Seiten-Struktur ==== */


.container-fluid
{
	width: auto;
}

body
{
	padding: 0;
}

.container,
.container-fluid
{
	/* bei kleiner Auflösung kleinerer Rand */
	padding-left: 20px;
	padding-right: 20px;
}



@media (min-width: 1200px)
{
	body.responsive .container,
	body.responsive .container-fluid
	{
		padding-left: 80px;
		padding-right: 80px;
	}
}

#page-content
{
	padding-bottom: 20px;
	padding-top: 20px;
	min-height: 300px;
	min-width: 260px; /* passt genau für form-inputs */
}

@media (max-width: 767px)
{
	#page-left,
	#page-bottom,
	#page-middle,
	#page-top
	{
		min-height: 0px;
	}
}

.collapsed-table-row
{
	float: left;
}

@media (max-width: 979px)
{
	body.responsive .collapsed-table
	{
		display: table;
		vertical-align: middle;
		width: 100%;
	}

	body.responsive .collapsed-table-row
	{
		float: none;
		display: table-row;
	}
	
	/*.collapsed-table-row > div 	{ display: table-cell; }*/
}


	/* ==== Definitionen für Sticky Footer ==== */

body.sticky-footer
{
	height: 100%;
}

body.sticky-footer #wrap
{
	min-height: 100%;
	height: auto !important;
	height: 100%;
    
	margin: 0 auto -55px; /* Negative indent footer by it's height */
}

@media (min-width: 768px) and (min-height: 480px)
{
	.fixed-footer #push,
	#footer
	{
		height: 55px;
	}
}




@media (max-width: 979px)
{
	body.sticky-footer #footer /* Lastly, apply responsive CSS fixes as necessary */
	{
		margin-left: -20px;
		margin-right: -20px;
		padding-left: 20px;
		padding-right: 20px;
	}
}

	/* ==== Definitionen für Fixed Footer */

@media (min-width: 768px) and (min-height: 480px)
{
	body.fixed-footer #footer
	{
		margin-bottom: 0;
		position: fixed;
		bottom: 0;
		right: 0;
		left: 0;
	}
}

#header
{
	z-index: 1010;
}

#footer
{
	z-index: 1000;
}



/* Benachrichtigung bis Tablet über ganze breite anzeigen */

#notifications
{
	margin: 20px 20px;
	position: fixed;
	top: 0;
	right: 0;
	z-index: 8020;
	box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 10px 0px;
	border-radius: 5px;
}

.alert button.close
{
	display: none;
}

#notifications .alert button.close
{
	display: block;
}

@media (min-width: 980px)
{
	#notifications
	{
		top: 20px;
		right: 40px; /* links neben I-MenuIcon */
		position: fixed;
	}

	.index-page #notifications
	{
		top: 40px;
	}
}

@media (min-width: 1200px)
{
	#notifications
	{
		right: 100px; /* links neben I-MenuIcon */
	}
}


#header-right
{
	padding-top: 15px;
}



#logo,
#logo.brand
{
	float: left;
	padding-top: 15px;
	padding-left: 0;
	padding-right: 0;
	margin-left: -5px; /* Ausgleich transparenter Bereich des Logos */
}

@media (max-width: 979px)
{
	#logo,
	#logo.brand
	{
		overflow: hidden;
		height: 45px;
	}

	body.responsive #header-menu.collapse
	{
		margin-top: -20px;
	}

	body.responsive #header-menu.collapse.in
	{
		margin-top: 0px;
	}

	#collapse-button
	{
		padding-top: 27px;
	}

	#collapse-button button
	{
		position: absolute;
		right: 20px;
	}

	#collapse-button button.btn-navbar
	{
		margin: 0;
		background: none;
	}

	#collapse-button button.btn-navbar.collapsed
	{
		background-color: rgba(4, 104, 177, 0.8);
	}

	#collapse-button button.btn-navbar,
	#collapse-button button.btn-navbar:hover
	{
		background-color: rgba(4, 104, 177, 1.0);
	}
}



	/* ==== Hintergrund-Grafiken und Größe von Header und Footer ==== */

#page
{
	margin-top: 0;
}

body.page-document #page
{
	margin-top: 20px;
	margin-bottom: 20px;
	padding-left: 20px;
	padding-right: 20px;
}

@media (min-width: 768px) and (min-height: 480px)
{
	body.fixed-header.scrolled #header
	{
		box-shadow: rgba(26, 26, 26, 0.8) 0px 0px 15px 0px;
	}

	body.fixed-header #page /* !body.index-page */
	{
		margin-top: 80px;
	}

	body.fixed-header.page-document #page
	{
		margin-top: 100px;
	}

	body.fixed-header.index-page #page
	{
		margin-top: 95px;
	}

	body.fixed-header.index-page.page-document #page
	{
		margin-top: 115px;
	}
}

#header,
#header-content
{
	min-height: 80px;
}



body.index-page #header-menu
{
	margin-left: 0;
}


body.index-page #menu-page
{
	display: none;
}

body.index-page .index-clearfix
{
	clear: both;
}

body.index-page #logo
{
	clear: both;
}


#header-menu
{
	margin-top: 40px;
	margin-left: 65px;
}


body.index-page #header-menu
{
	margin-top: 0;
}

#header-menu ul.nav-tabs:after
{
	clear: none;
}


#header-submenu
{
	float: right;
}


#header
{
	background-color: #0567b0;
	background-image: url('images/HG-Header-Startseite-Kachel.png');
	background-position: top;
	background-repeat: repeat-x;
}


#logo h1
{
	margin: 0;
	margin-bottom: -20px;
}


#logo h1 span
{
	vertical-align: middle;
	font-style: italic;
	text-shadow: none;
	font-size: 32px;
}

#logo a:hover
{
	text-decoration: none;
}

#header-content
{
	background: url('images/HG-Header-Startseite.png');
	background-position: top left;
	background-repeat: no-repeat;
}

#footer,
#footer-content
{
	min-height: 55px;
	/*height: 55px;*/
}

#footer
{
	background-color: #0567b0;
	background-image: url('images/HG-Footer-Kachel.png');
	background-position: bottom left;
	background-repeat: repeat-x;
}


#footer-left,
#footer-right,
#footer-middle
{
	padding-top: 5px;
	text-align: left;
}

@media (min-width: 768px)
{
	#footer-left,
	#footer-right,
	#footer-middle
	{
		padding-top: 15px;
	}

	#footer-left
	{
		text-align: left;
	}

	#footer-right
	{
		text-align: right;
	}

	#footer-middle
	{
		text-align: center;
	}
}


@media (max-width: 767px)
{
	#footer-right
	{
		margin-bottom: 10px;
	}
}

@media (min-width: 980px)
{
	#footer,
	#footer-content
	{
		height: 55px;
	}
}


@media (min-width: 768px)
{
	#footer-content
	{
		background-image: url('images/HG-Footer.png');
		background-position: bottom left;
		background-repeat: no-repeat;
	}
}

	/* ==== AJAX-Panel */


.ajax-panel
{
	/*position: relative;*/
}

.ajax-panel-loader
{
	width: 100%;
	height: 100%;
	min-height: 300px;
	position: absolute;
	top: 0;
	left: 0;
}

.ajax-panel-loader
{
	text-align: center;
	z-index: 10;
	
	background-color: rgb(26, 26, 26);
	background-image: url(/Public/Images/ActionIcons/ajax-loader-squares.gif);
	background-position: 50% 150px;
	background-repeat: no-repeat;
	opacity: 0.5;
}

.ajax-panel-loader h4
{
	margin-top: 10px;
	color: #fff;
	text-align: center;
}

/* ==== Layouts ===== */


.layout-document
{
	/* max-width: 940px; *//* tablet(980px) - 20px margin */
	margin: auto;
}


	/* ==== Grids ==== */

.grid-container
{
	width: 100%;
	overflow-x: auto;
}

.grid
{
	min-width: 1200px;
}