/*! HTML5 Boilerplate v5.0 | MIT License | http://h5bp.com/ */
html

{
	box-sizing: border-box;
	color: #222;
	font-size: 1em;
	line-height: 1.4;
}


*, *:before, *:after {
  box-sizing: inherit;
}

::-moz-selection
{
	background: #b3d4fc;
	text-shadow: none;
}

::selection
{
	background: #b3d4fc;
	text-shadow: none;
}

hr
{
	display: block;
	height: 1px;
	border: 0;
	border-top: 1px solid #ccc;
	margin: 1em 0;
	padding: 0;
}

audio,
canvas,
iframe,
img,
svg,
video { vertical-align: middle; }

fieldset
{
	border: 0;
	margin: 0;
	padding: 0;
}

textarea { resize: vertical; }

/* ==========================================================================
   Author's custom styles
   ========================================================================== */
   
/* Colors
------------------------------------------------------------------------------------------------- 

Orange: #ff9900


/* Allgemeines
------------------------------------------------------------------------------------------------- */

.nowrap { white-space: nowrap; }

img
{
	max-width: 100%;
	height: auto;
}

/* Links
------------------------------------------------------------------------------------------------- */
a,
a:visited
{
	color: #e00;
	text-decoration: none;
}

a:hover,
a:focus,
a:active
{
	color: #777;
	text-decoration: none;
}

/* Layout
------------------------------------------------------------------------------------------------- */

body
{
	font-family: Verdana, Geneva, Helvetica, Arial, sans-serif;
	font-size: 20px;
	line-height: 1.7;
}

iframe
{
	border: none;
	width: 100%;
	height: 200px;
}

.clear { clear: both; }
.clearr { clear: right; }
.clearl { clear: left; }

.quelle,
.anmerkung
{
	color: #666;
	font-size: small;
}

/* Grid12
--------------------------------------------------------------------------- */

.grid-container
{
	width: 100%;
}

.row:before, 
.row:after
{
	content: "";
	display: table;
	clear: both;
}

[class*='col-']
{
	float: left;
	min-height: 1px;
	width: 16.66%;
	padding: 5px;
}

.col-1 { width: 8.33333333333%; }
.col-2 { width: 16.6666666667%; }
.col-3 { width: 25%; }
.col-4 { width: 33.3333333333%; }
.col-5 { width: 41.6666666667%; }
.col-6 { width: 50%; }
.col-7 { width: 58.3333333333%; }
.col-8 { width: 66.6666666667%; }
.col-9 { width: 75%; }
.col-10 { width: 83.3333333333%; }
.col-11 { width: 91.6666666667%; }
.col-12 { width: 100%; }

[class*='col-'] > p,
[class*='col-'] > li
{
	padding: 0;
	margin: 5px;
}

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

.gap
{
	margin-right: 10px;
}

.grid-container h2,
.grid-container h3,
.grid-container p
{
	margin-left: 10px;
	margin-right: 10px;
}


/* Layout
------------------------------------------------------------------------------------------------- */

#main, #footer .inner, #wdauth
{
	margin: 0 auto;
	max-width: 1200px;
}


#main
{
	padding-top: 2em;
}

#footer .inner
{
	padding-left: 10px;
	padding-right: 10px;
}

.topofpage,
#nav2,
#nav3,
#nav-more
{
	margin-left: 10px;
	margin-right: 10px;
}



/* Header
--------------------------------------------------------------------------- */
#header
{
	padding: 20px 5px 10px 5px;
	text-align: center; 

}
#header img
{ 
	max-width: 70%;
	height: auto;

}

/* Navigation
--------------------------------------------------------------------------- */

#nav
{
	color: #888;
	background-color: white;
	line-height: 2.5em;
	text-align: center;
	border-top: 1px solid #888;
	border-bottom: 1px solid #888;
}

#nav ul
{
	list-style-type: none;
	margin: 0;
	padding: 0;
}

#nav ul li { display: inline; }

#nav ul a
{
	color: #000;
	padding: 10px;
}

#nav ul a:hover { color: #888; }
#nav ul a:active, #nav ul a:focus { color: #888; }
#nav li.impressum { display: none; }

#nav ul.subnav
{
	border-top: 1px solid #888;
}

/* Main
--------------------------------------------------------------------------- */

#main
{
-moz-hyphens: auto;
	-o-hyphens: auto;
	-webkit-hyphens: auto;
	-ms-hyphens: auto;
	hyphens: auto;
}

#main h1
{
	font-size: 1.3em;
	font-weight: normal;
	margin-left: 10px;
	padding-bottom: 0.5em;
}

#main h2
{
	font-size: 1.2em;
	font-weight: normal;
	margin-top: 1em;
	margin-bottom: 0.5em;
}

#main section h2
{
	margin-top: 0;
}


#main h3
{
	font-size: 1em;
	font-weight: normal;
	margin-top: 0.75em;
}

#main h4
{
	font-size: 1em;
	font-weight: normal;
}

section
{
	clear: both;
	margin: 20px 0;
}

section:before,
section:after
{
	content: " ";
	display: table;
}

section:after { clear: both; }


section.historisch
{
	background-color: #FFD8A8;
	padding: 5px 0 5px 0;
}

section.historisch figure
{
	border: 1px solid #B99D7A;
	background-color: #eee;
}


section.historisch cite::before { content: '„'; }
section.historisch cite::after { content: '“'; }

#uebersicht a.historisch figure
{
	position: relative;
}

#uebersicht a.historisch figure:before 
   { 
    width: 0;
    content: ''; 
   	position: absolute; 
    top: 5px; 
    right: 5px; 
    border-top: 20px solid #ffffff; 
    border-left: 20px solid #FFD8A8; 
   }
   
div.historisch
{
	position: relative;
	margin-left: 10px;
}
   
div.historisch p:before 
{ 
    width: 0;
    content: ''; 
   	position: absolute; 
    top: 0px; 
    left: 0px; 
    border-top: 10px solid #FFD8A8; 
    border-right: 10px solid transparent; 
}



/* Bilder
--------------------------------------------------------------------------- */

figure
{
	border: 1px solid #ccc;
	padding: 5px;
	margin: 5px;
}

figure img
{
	max-width: 100%;
	height: auto;
}

figcaption
{
	font-size: 12px;
	padding-top: 5px;
	min-height: 4em;
}

#uebersicht figcaption
{ 
	min-height: 4em;
}

a figure,
a:visited figure { color: #222; }

a:hover figure, a:active figure, a:focus figure
{
	color: #e00;
	text-decoration: none;
}

#cboxTitle, #cboxCurrent
{
	font-size: 16px;
}

/* Übersicht aktuell
-------------------------------------------------- */

#uebersicht a.aktuell:focus {outline: 0;}

#uebersicht a.aktuell figure
{
	background-color: #CBEAFF;
}

/* Inhaltsverzeichnis und Kategorien
--------------------------------------------------------------------------- */

#inhalt #main ul li,
.kategorie #main ul li
{
	list-style-type: none;
}

/* Map Alsterbrücken
--------------------------------------------------------------------------- */

#map_canvas
{
	width: 100%;
	min-height: 1000px;
}

#map_canvas strong a { color: #000; }

/* Kleine Maps	
--------------------------------------------------------------------------- */

.mapcontainer
{
	clear: both;
	padding: 20px 10px 10px 10px;
}

#map
{
	border: 1px solid #ccc;
	height: 250px !important;
	padding: 10px;
}



/* 
--------------------------------------------------------------------------- */

#main #nav2,
#main #nav3
{
	clear: both;
	padding-bottom: 0.25em;
}

#main #nav2 ul,
#main #nav3 ul
{
	list-style-type: none;
	margin: 0;
	padding: 0;
}

#main #nav2 ul li,
#main #nav3 ul li
{
	font-size: 12px;
	display: inline;
}

.topofpage
{
	font-size: 12px;
	margin-top: 25px;
	clear: both;
}

.topofpage a { color: #666; }
.topofpage a:hover, .topofpage a:active, .topofpage a:focus { color: #000; }

#nav-more, 
#nav-service
{
	font-size: 12px;
	text-align: left;
	padding-right: 10px;
	clear: both;
}

#nav-more ul,
#nav-service ul
{
	margin: 0;
	padding: 0;
	list-style-type: none;
}

#nav-more li,
#nav-service li { display: inline; }

#nav-more a,
#nav-service a
{
	padding-right: 2px;
	padding-left: 2px;
}

#nav-more a:hover,
#nav-more a:focus, #nav-more a:active,
#nav-service a:hover,
#nav-service a:focus, #nav-service a:active { color: #666; }

/* Mainfooter
--------------------------------------------------------------------------- */

.up { clear: both; }
.scroll { display: none; }

/* footer
--------------------------------------------------------------------------- */

#footer
{
	clear: both;
	border-top: 1px solid #888;
	border-bottom: 1px solid #888;
	margin-top: 25px;
}

#footer .inner { font-size: 12px; }

#footer a strong
{
	font-weight: normal;
	color: #000000;
	background-color: #FFFFFF;
}


#footer a:hover
{
	color: black;
	background-color: white;
}

#footer a:active, #footer a:focus
{
	color: black;
	background-color: white;
}

#disclaimer { color: #888; }

/* Webdesign
-------------------------------------------------- */

#wdauth
{
	font-size: 10px;
	margin-bottom: 100px;
	padding-right: 5px;
	text-align: right;
}

#wdauth a,
#wdauth a:visited
{
	color: #bbb;
	text-decoration: none;
}

#wdauth a:hover,
#wdauth a:focus,
#wdauth a:active { color: #999; }

/* Cookie-Hinweis
-------------------------------------------------- */
.cc_container
{
	font-size: 14px !important;
}

.cc_btn
{
	box-sizing: content-box;
}

/* ==========================================================================
   Helper classes
   ========================================================================== */

.hidden
{
	display: none !important;
	visibility: hidden;
}

.visuallyhidden
{
	border: 0;
	clip: rect(0 0 0 0);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
}

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus
{
	clip: auto;
	height: auto;
	margin: 0;
	overflow: visible;
	position: static;
	width: auto;
}

.invisible { visibility: hidden; }

.clearfix:before,
.clearfix:after
{
	content: " ";
	display: table;
}

.clearfix:after { clear: both; }

/* ==========================================================================
   Print styles
   ========================================================================== */

@media print
{
	*,
			    *:before,
			    *:after,
			    *:first-letter,
			    *:first-line
	{
		background: transparent !important;
		color: #000 !important;
		box-shadow: none !important;
		text-shadow: none !important;
	}
	
	a,
			    a:visited { text-decoration: underline; }
	a[href]:after { content: " (" attr(href) ")"; }
	abbr[title]:after { content: " (" attr(title) ")"; }
	a[href^="#"]:after,
			    a[href^="javascript:"]:after { content: ""; }
	
	pre,
			    blockquote
	{
		border: 1px solid #999;
		page-break-inside: avoid;
	}
	
	thead { display: table-header-group; }
	tr,
			    img { page-break-inside: avoid; }
	img { max-width: 100% !important; }
	
	p,
			    h2,
			    h3
	{
		orphans: 3;
		widows: 3;
	}
	
	h2,
			    h3 { page-break-after: avoid; }
}