/* PM, RH: IE mag Meta-Viewport nicht. Deshalb so definieren. Siehe http://menacingcloud.com/?c=cssViewportOrMetaTag*/ 

	@-ms-viewport { width: device-width; }
	@-o-viewport { width: device-width; }
	@viewport { width: device-width; }

/* Definitionen:

Open Sans weights: 400, 600, 700

$sc_primary : #fbba00 / rgba(251,186,0,1);
$sc_gold : $sc_primary;
$sc_primary_tint : #fbba00;

$sc_grey : #737373;
$sc_grey_tint : #939393;

$sc_grey_unobtrusive : #777; // borders, boxes

font: 

#333

#666 (bolder headings)

*/

/* Tags */


	html {
		overflow-y: scroll; 
		-webkit-font-smoothing: antialiased;
	}

	::-moz-selection { background: #fbba00; color: #000; }
	::selection { background: #fbba00; color: #000; }
	
	body {
		margin: 0px; 
		padding: 0px; 
		font-family: 'Open Sans', Arial, Helvetica Neue, Helvetica, sans-serif ; 
		color: #333333;
		line-height: 1.5;
	}
	
	body li {
		line-height: 1.5;
	}
	
	#component ul, #component ol {
		padding: 0;
		margin: 0 0 10px 5px;
		list-style-position: inside;
	}
	
	a,
	a span,	 
	a:link, 
	a:active {
		text-decoration: none; 
		font-weight: normal;
		color: #666666;
		overflow-wrap: break-word;
	}
	
	a:hover, 
	a:focus {
		font-weight: 700;
		text-decoration: underline;
		color: #333;
	}
	
	a img { border:none; vertical-align:top; }
	
	#content a {
	transition: all 300ms ease-in-out;
	}
	
	p {
		line-height: 1.5;
	}
	
	p a,
	p a:link, 
	p a:active {
	text-decoration: underline;
	color: #666666;
	transition: all 300ms ease-in-out;
	}

	/*BG und color geändert wg. Barrierefreiheit Kontrast PMMD 2020-07-01 https://trello.com/c/rolak3BM/20-schwabach-2020-06-support-barrierefreiheit#comment-5efb29ba5b3a794ed16de309 */
	#breadcrumb a:hover,
	#breadcrumb a:focus,
	p a:hover, 
	p a:focus {
		font-weight: 700;
		text-decoration: none;
		background-color: var(--bg-lightgrey);
		color: var(--font-color-default);
		text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.4);
	}
	
	cite,
	blockquote {
		border-left: 5px solid #fbba00;
		font-style: italic;
	}
	
	/* rem based for font-sizing */
	
	h1 {
		line-height: 1.4;
		font-size: 220%;
	}

	h2 {
		line-height: 1.4;
		font-size: 180%;
	}
	.moduletable h4.block_heading,
	h3 {

		font-size: 140%;
	}

	h3.blog_item_title,
	h4 {
		font-size: 120%;
	}

	h5 {

		font-size: 100%;
	}

	h6 {

		font-size: 90%;
	}
	
	
	h1{
		color: #666;
		margin: 0 0 1em 0;
	}
	
	h2{
		color: #666;
		margin: 1em 0 1em 0;
	}
	
	h3, 
	h4, 
	h5, 
	h6 {
		color: #666;
		margin: 0.5em 0 0.5em 0;
		line-height: 1.3; /* damit auf der Startseite das erste Modul genauso ist wie SUCHE rechts davon*/
	}
	
	/* RH: Headings nur im Content etwas verkleinert, siehe http://schwabach.de.w0128be5.kasserver.com/de/stadtverwaltung/referat-2-recht-soziales-und-umwelt/95-ordnungsamt/dienstleistungen/1019-aufenthaltserlaubnis.html */
	.articleBody h1 {
		font-size: 150%;
	}
	.articleBody h2 {
		font-size: 130%;
	}
	.articleBody h3 {
		font-size: 110%;
	}
	.is_frontpage .articleBody .moduletable  h3 {
		font-size: 140%;
	}
		
	p {
	margin-bottom: 1em;
	}

	dt,
	legend	{
		color: #666;
	}
	
	img {
		max-width: 100%; 
		height: auto; 
		-ms-interpolation-mode: bicubic;
	}
	
	sup {
		color: #888;
	}
	
	hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #A6A6A6;
    margin: 1em 0;
    padding: 0;
	}
	
	audio,
	canvas,
	img,
	video {
		vertical-align: middle;
	}
	
	fieldset {
    border: 0;
    margin: 0;
    padding: 0;
	}
	
	form {
	margin: 0 0 30px;
	}

	textarea {
		resize: vertical;
	}
	
	/* funktionale Klassen */
	
	.clear {
		clear: both; 
	}
	
	.group:before,
	.group:after {
		content:"";
		display:table;
	}
	.group:after {
		clear:both;
	}
	.group {
		*zoom:1;
	}
	
	.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; }
	
	.center { margin: 0px auto; }
	
	.vertical_center {
		display: table;
	}
	
	.vertical_center > div {
		display: table-cell;
		vertical-align: middle;
	}
	
	.vertical_align {
		position: relative;
		top: 50%;
		-webkit-transform: translateY(-50%);
		-ms-transform: translateY(-50%);
		transform: translateY(-50%);
	}
	
	/* Links */
	
	a:hover, a:active { outline: none; }
		
	a:focus {
	outline: thin solid #fbba00;
	outline: 5px auto #fbba00;
	outline-offset: -2px;
	box-shadow: 0 0 10px rgba(0,0,0,0.75);
	background-color: #FFF;
	color: #333;
	}

	a:focus span {
	color: #333;
	}

	a.accessibility_skip {
	padding: 0 30px;
	position: absolute;
	top: -170px;
	right: 30px;
	color: #333;
	background: #FFFFFF;
	-webkit-transition: top 300ms ease-in-out, background 300ms linear, color 300ms linear;
	transition: top 300ms ease-in-out, background 300ms linear, color 300ms linear;
	z-index: 100;
	font-size: 150%;
	line-height: 70px;
	box-shadow: 1px 1px 4px black;
	text-decoration: none;
	max-width: 75%;
	}

	a.accessibility_skip i {
	color: #fbba00;
	}

	a.accessibility_skip:focus {
	top: 30px;
	right: 30px;
	background: #FFFFFF;
	color: #333;
	outline: 0;
	z-index: 101;
	box-shadow: 2px 2px 8px black;
	}

	
	/* Links für Bilder, Effekt */

	.image_link {
		background-color: fbba00;
	}

	.image_link img {
		display: block;
		margin: 0;
		padding: 0;
		outline: none;
		border: none;
		opacity: 1;
		transition: all 300ms ease-in-out;
	}

	.image_link:hover img {
		opacity: 0.7;
	}

	
/* 
 * Bootstrap overrides
 */

.page-header {
padding-bottom: 0;
margin: 1em 0 1em;
border: none;
}
 
.nav {
margin-bottom: 30px;
}

input, button, select, textarea {
font-family: 'Open Sans', Arial, Helvetica Neue, Helvetica, sans-serif ; 
}

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: #767676;
outline: 0;
outline: thin dotted \9;
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075),0 0 8px rgba(118, 118, 118, 1);
-moz-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075),0 0 8px rgba(118, 118, 118, 1);
box-shadow: inset 0 1px 1px rgba(0,0,0,0.075),0 0 8px rgba(118, 118, 118, 1);
}

select:focus,
input[type="file"]:focus, 
input[type="radio"]:focus, 
input[type="checkbox"]:focus {
outline: thin dotted #fbba00;
outline: 5px auto #fbba00;
outline-offset: -2px;
}

textarea,
input[type="text"], 
input[type="password"], 
input[type="datetime"], input[type="datetime-local"], 
input[type="date"], input[type="month"], input[type="time"], 
input[type="week"], input[type="number"],
input[type="email"], 
input[type="url"], 
input[type="search"], 
input[type="tel"], 
input[type="color"], 
.uneditable-input {
background-color: #FFF;
border: 1px solid #A6A6A6;
-webkit-box-shadow:none;
-moz-box-shadow: none;
box-shadow: none;
-webkit-transition: border linear .2s,box-shadow linear .2s;
-moz-transition: border linear .2s,box-shadow linear .2s;
-o-transition: border linear .2s,box-shadow linear .2s;
transition: border linear .2s,box-shadow linear .2s;
}

select, 
textarea,
input[type="text"],
input[type="password"], 
input[type="datetime"], 
input[type="datetime-local"], 
input[type="date"], 
input[type="month"],
input[type="time"], 
input[type="week"],
input[type="number"], 
input[type="email"],
input[type="url"], 
input[type="search"],
input[type="tel"],
input[type="color"], 
.uneditable-input {
border-radius: 0;
}

select {
background-color: #fff;
border: 1px solid #A6A6A6;
}

.inputbox.search-query {
border-radius: 0;
margin: 0 15px 0 0;
max-width: 100%;
border-color: #A6A6A6;
line-height: 2;
height: auto;
box-sizing: border-box;
}

input[type="text"] {
}

input[type="button"],
input[type="submit"],
input[type="reset"],
input[type="file"]	{
display: inline-block;
margin-bottom: 0;
color: #333;
text-align: center;
text-shadow: 0 1px 1px rgba(255,255,255,0.75);
vertical-align: middle;
cursor: pointer;
background-color: #f5f5f5;
background-image: -moz-linear-gradient(top,#fff,#e6e6e6);
background-image: -webkit-gradient(linear,0 0,0 100%,from(#fff),to(#e6e6e6));
background-image: -webkit-linear-gradient(top,#fff,#e6e6e6);
background-image: -o-linear-gradient(top,#fff,#e6e6e6);
background-image: linear-gradient(to bottom,#fff,#e6e6e6);
background-repeat: repeat-x;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff',endColorstr='#ffe6e6e6',GradientType=0);
filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
-webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05);
-moz-box-shadow: inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05);
box-shadow: inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05);
height: auto;
line-height: 1;
transition: color 150ms linear, all 50ms ease-in-out;
border: 1px solid #A6A6A6;
font-size: 100%;
line-height: 1.5;
padding: 0.25em 1em;
font-weight: 400;
}


input[type="button"]:hover,
input[type="submit"]:hover,
input[type="reset"]:hover,
input[type="file"]:hover	{
background: none;
background-color: #fbba00;
color: #FFF;
border-color: #fbba00;
cursor: pointer;
}

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

dt, dd {
line-height: 1.5;
}

/* Bootstrap ergänzende Klassen */

.btn {
}

.btn.btn-sc {
	transition: color 150ms linear, all 50ms ease-in-out;
	border-color: #A6A6A6;
	font-size: 100%;
	line-height: 1.5;
	padding: 0.25em 1em;
	font-weight: 400;
}

.btn.btn-sc span {
	font-weight: 400;
}

/*BG und color geändert wg. Barrierefreiheit Kontrast PMMD 2020-07-01 https://trello.com/c/rolak3BM/20-schwabach-2020-06-support-barrierefreiheit#comment-5efb29ba5b3a794ed16de309 */
.btn.btn-sc:hover {
	background-image: none;
	color: var(--font-color-default);
	background-color: var(--bg-lightgrey);
}

.btn.btn-sc:hover span {
	color: var(--font-color-default);
}

.label-info, .badge-info {
	background-color: #666;
	color: #FFF;
}
	
.btn.toggle_custom {
	margin-bottom: 20px;
}
.mt_20{
	margin-top: 20px;
}
/*
 * Tabellen, Einsatz ohne Bootstrap-Klassen
 */
 
 table {
  width: 100%;
  max-width: 100%;
  margin-bottom: 20px;
  border: none;  
  font-size: 100%;
  }
 
 table td,
 table th {
    background-color: #fbeabb;
	border: 1px solid #FFF;
	padding: 8px;
	line-height: 20px;
	text-align: left;
	vertical-align: top;
	transition: background-color 150ms ease-in-out;
  }

table > thead > tr > th,
table > tbody > tr > th,
table > tfoot > tr > th,
table > thead > tr > td,
table > tbody > tr > td,
table > tfoot > tr > td {
  padding: 8px;
  line-height: 1.5;
  vertical-align: top;
  border: 3px solid #FFF;
  border-width: 0 3px 0 0;
}

table > thead > tr > th {
  vertical-align: bottom;
  border-bottom: 3px solid #FFF;
  background-color: #fbba00;
}

table > tbody > tr > th {
  background-color: #fbba00;
}

table > caption + thead > tr:first-child > th,
table > colgroup + thead > tr:first-child > th,
table > thead:first-child > tr:first-child > th,
table > caption + thead > tr:first-child > td,
table > colgroup + thead > tr:first-child > td,
table > thead:first-child > tr:first-child > td {
  border-top: 0;
}

table > tbody + tbody {
  border-top: 3px solid #FFF;
}
 
table > thead > tr > th,
table > thead > tr > td {
  border-bottom-width: 3px;
}

table > tbody > tr:nth-child(odd) > td {
  background-color: #fbda7d;
}

table > tbody > tr:hover > td,
table > tbody > tr:hover > th {
  background-color: #FFF;
}

table > thead > tr > td.active,
table > tbody > tr > td.active,
table > tfoot > tr > td.active,
table > thead > tr > th.active,
table > tbody > tr > th.active,
table > tfoot > tr > th.active,
table > thead > tr.active > td,
table > tbody > tr.active > td,
table > tfoot > tr.active > td,
table > thead > tr.active > th,
table > tbody > tr.active > th,
table > tfoot > tr.active > th {
  background-color: #f5f5f5;
}

table a, table a:link, table a:active {
text-decoration: underline;
}

table a:hover, table a:focus {
font-weight: 700;
text-decoration: none;
background-color: #fbba00;
color: #FFF;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.4);
}

/* dropcaps */

span.dropcap { 
float: left;
color: #fbba00;
font-size: 4em;
line-height: 1;
padding-top: 0px;
padding-right: 8px;
padding-left: 2px;
margin: -5px 0 0 -5px;
}

#footer a:focus {
	box-shadow: none;
}