/*! HTML5 Boilerplate v5.2.0 | MIT License | https://html5boilerplate.com/ */


/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}

/* 
 * Interestingly inherit is interpreded as "if mother 
 * is straight then child could not be italic when 'em'". 
 */
em {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}




/* ------------------------------------
 * Base styles
 * ------------------------------------
 */
body {
  background-color: rgb(240, 240, 232);
  color: rgb(0, 0, 0);
  font-family: Verdana, Helvetica, Arial, sans-serif; 
}

/*
 * Remove text-shadow in selection highlight:
 * https://twitter.com/miketaylr/status/12228805301
 *
 * These selection rule sets have to be separate.
 * Customize the background color to match your design.
 */
::-moz-selection {
    background: #b3d4fc;
    text-shadow: none;
}

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

/*
 * Remove the gap between audio, canvas, iframes,
 * images, videos and the bottom of their containers:
 * https://github.com/h5bp/html5-boilerplate/issues/440
 */
audio,
canvas,
iframe,
img,
svg,
video {
    vertical-align: middle;
}

/*
 * Remove default fieldset styles.
 */
fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

/*
 * Allow only vertical resizing of textareas.
 */
textarea {
    resize: vertical;
}


a:link, a:visited {
  color: rgb(31, 75, 120);
  text-decoration: none;  
}

a:hover, a:focus, a:active {
  text-decoration: underline;
}


input[type=button],
input[type=submit],
.button {
  background-color: rgb(178, 193, 209);
  color: rgb(0, 0, 0) !important;
  border: none;
  font-size: .9em;
  padding: .16em 1em .16em 1em;
  text-decoration: none;
}

input[type=button]:hover,
input[type=button]:active,
input[type=button]:focus,
input[type=submit]:hover,
input[type=submit]:active,
input[type=submit]:focus,
.button:hover,
.button:active,
.button:focus {
  background-color: rgb(204, 215, 226); 
  text-decoration: underline;
}

select {
  background-color: rgb(255, 255, 255);
  border: 1px solid rgb(178, 193, 209);
  padding: .08em 0em .08em 0em;
  font-size: .9em;
  /* Content of DropDowns is sometimes really long, we crop it to avoid overlapping */
  width: 100%;
}

input[type=text] {
  padding: .1em .2em;
  border: 1px solid rgb(178, 193, 209);
}

form p {
  margin: 1em 0;
  line-height: 1.2em;
  font-size: .9em;
}

a.HUNaviMitBild {
  padding-left: 1em;
  background: url('../images/externLink.svg') no-repeat left center;
}

/* ------------------------------------
 * Page
 * ------------------------------------
 */
#wrapper {
  background-color: rgb(255, 255, 255);
  border: 1px solid rgb(204, 204, 153);
  border-top: 0;
  max-width: 1100px;
  margin: 0 auto;
}

.contentWrapper {
  padding: 10px 20px;  
}

.menu_divider {
  border-right: 1px solid rgb(255, 255, 255);
  color: transparent;
  font-size: 75%;
  position: relative;
  top: 0.6em;
}

.menu_divider:after {
  content: "|";
}


/* ------------------------------------
 * Header
 * ------------------------------------
 */
#header .pageTitle {
  font-weight: bold;
  font-size: 1.4em;
  top: 30px;
  position: relative;
}  
  
#header .logo {
  float: right;
  height: 80px;  
}

#header .menu {
  color: rgb(31, 75, 120);
  background-color: rgb(204, 214, 224);
  padding: 0 20px;
}

#header .menu li {
  float: left;
  padding-right: 10px;
  line-height: 1.6em;
  font-size: .9em;
}

#header .menu li a {
  padding-right: 5px;
}

#header .breadcrumbs {
  padding: 10px 20px;
  font-size: .8em;
}

#header .breadcrumbs li {
  float: left;
  margin-right: 5px;
}

#header .breadcrumbs li:after {
  padding-left: 5px;
  color: rgb(31, 75, 120);
  content: '>';  
}

#header .breadcrumbs li:last-child:after {
  padding-left: 0;
  content: '';  
}


/* ------------------------------------
 * Content
 * ------------------------------------
 */
#content {
  margin: 10px 0;
}

#page h1 {
  color: rgb(0,51,102);
  font-size: 1.3em;
}

.pageText {
  font-size: .9em;
  line-height: 1.2em;
}

.pageText p {
  margin: .5em 0;  
}

#form h1,
#form h2,
#information h2 {
  background-color: rgb(178,193,209);
  color: rgb(0, 51, 102);
  font-size: 1em;
  padding: .3em .6em;
}

#form h2 {
  margin-top: 30px;  
}

.errorBox {
	padding: 10px;
	border:1px solid rgba(255, 0, 0, .5);
	background-color: rgb(254, 238, 238);
	color: rgb(255, 0, 0);
	font-weight: bold;
	font-size: .9em;
	margin: 10px 0;
}

.errorBox ul {
  margin: 5px 5px 0 5px;  
}

.errorBox ul li:before {
  content: '-\00a0';  
}

.errors {
  color: rgb(168, 0, 0);  
}

.inlineError {
  color: rgb(255, 0, 0);  
}


#selectionMenu .breadcrumbs {
  margin-bottom: 20px;
  font-size: 1.1em;
  font-weight: bold;
  border: 1px solid rgb(178, 193, 209);
  padding: 5px 10px; 
}

#selectionMenu .breadcrumbs li {
  float: left;
  margin-right: 5px;
}

#selectionMenu .breadcrumbs li:after {
  padding-left: 5px;
  color: rgb(31, 75, 120);
  content: '>';  
}

#selectionMenu .breadcrumbs li:last-child:after {
  padding-left: 0;
  content: '';  
}

#conversionmodeMenu h2 {
  background-color: rgb(228, 218, 164);
  border: 1px solid rgb(210, 192, 103);
  padding: 5px 10px;
  color: rgb(0,51,102);
  font-size: 1.0em;
  font-weight: normal;
  margin-bottom: 10px;
}

#conversionmodeMenu h2 a,
#conversionmodeMenu h2 span {
  float: right;
  font-weight: normal;
  font-size: .8em;
  line-height: 1.2em;
  vertical-align: middle;
}

#conversionmodeMenu > div {
  padding: 6px 10px;
  margin-bottom: 30px;
  color: rgb(0,51,102);
  font-size: 0.9em;
  font-weight: normal;
  border: 1px solid rgb(210, 192, 103);
}

#conversionmodeMenu > div p:first-child {
  color: rgb(168,0,0);
  margin-bottom: 5px;
  font-style: italic;
}


#form {
  width: 39%;
  float: left;
}

#form p {
  line-height: 1.2em;  
}

#information {
  width: 59%;
  float: right;  
}

.noInformationBox {
  background-color: rgb(229, 234, 240);
  color: rgb(0, 51, 102);
  font-size: .9em;
  margin-top: 10px;
  padding: .3em .6em;
}

.informationBox {
  margin-top: 10px;
  border: 1px solid rgb(229, 234, 240);
}

.informationBoxVisible {
  background-image: url('../images/arrowUp.svg');
  background-repeat: no-repeat;
  background-position: right;
}

.informationBoxHidden {
  background-image: url('../images/arrowDown.svg');
  background-repeat: no-repeat;
  background-position: right;
}

.informationBox h3 {
  background-color: rgb(229, 234, 240);
  color: rgb(0, 51, 102);
  font-size: .9em;
  padding: .3em .6em;
}

.informationBox h3 a {
  display: block;  
}

.informationBox > div {
  font-size: .9em;
  line-height: 1.2em;
  padding: .3em .6em;
}

.informationBox > div strong,
.informationBox > div b {
  font-weight: bold;  
}

.informationBox > div i {
  font-style: italic;
}

.informationBox > div u {
  text-decoration: underline;
}

.informationBox > div p {
  margin: .5em 0;
  line-height: 1.2em;
}

.informationBox > div ul {
  list-style: square outside;
}

.informationBox > div ol {
  list-style: decimal outside;
}

.informationBox > div ol ol,
.informationBox > div ul ul {
}

.informationBox > div li {
  margin: .1em 1.2em;
}


#umrechnungsergebnisResetButton {
  font-size: .9em;
  margin-top: 15px;  
}



/* ------------------------------------
 * Footer
 * ------------------------------------
 */
#footer {
  border-top: 1px solid rgb(0, 51, 102);
  font-size: .7em;
  text-align: center;
  position: relative;
}

#footer .links {
  position: absolute;
  right: 20px;
}

#footer .rechts {
  position: absolute;
  left: 20px;
}



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

/*
 * Hide visually and from screen readers:
 */
/* Wird für JS benötigt */
.hidden {
    display: none;
}

/*
 * Hide only visually, but have it available for screen readers:
 * http://snook.ca/archives/html_and_css/hiding-content-for-accessibility
 */
.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

/*
 * Extends the .visuallyhidden class to allow the element
 * to be focusable when navigated to via the keyboard:
 * https://www.drupal.org/node/897638
 */
.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
}

/*
 * Hide visually and from screen readers, but maintain layout
 */
.invisible {
    visibility: hidden;
}

/*
 * Clearfix: contain floats
 *
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    `contenteditable` attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that receive the `clearfix` class.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */
.clearfix:before,
.clearfix:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.clearfix:after {
    clear: both;
}


/* ------------------------------------
 * Media queries
 * ------------------------------------
 */
@media screen and (max-width: 1099px) {
  #wrapper {
    border-right: 0;
    border-left: 0;
  }
}
 
 
@media screen and (max-width: 750px) {
  #footer .links {
    position: relative;  
  }
}
  
@media screen and (max-width: 600px) {
  #header .logo {
    display: none;  
  }
  
  #header .pageTitle {
    top: 0;  
  }
  
  #form,
  #information {
    width: 100%;
    float: none;
  }
}