/********************************************************************/
/*
 * green: #bed91d
 * red:   #b02400
 * beige: #fdfdf3
 * grey:  #50504d
 * red-brown: #380616
 * navy:  #1B2040
 */
/********************************************************************/

@font-face {
  font-family: 'Underwood Champion';
  src: url('fonts/underwood_champion.eot');
}

@font-face {
  font-family: 'Underwood Champion';
  src: local('Underwood Champion Regular'),
  local('UnderwoodChampion-Regular'),
  url('fonts/underwood_champion.ttf') format('truetype');
}

html {
  margin: 0;
  padding: 0;
  background-color:  white;
}

body {
  margin: 0;
  padding: 0;
  color: #f0f0f0;
  font-family: "american typewriter", "palatino linotype", Courier, serif;
  font-size: 11pt;
  background: white;
}

h1, h2, h3, h4 {
  font-weight: normal;
}
h2 {
    font-size: 14pt;
}
h3 {
    font-size: 12pt;
}
#outerbox {
  color: #222222;
  margin: 0 auto;
  padding: 0;
  max-width: 588px;
  position: relative;
  z-index: 20;
  text-align: center;
}

.mainarea {
  margin: 0;
  padding: 0;
  line-height: 1.7em;
  text-align: justify;
}

.maincontainer {
}
.mainbox {
}

.green {
  font-family: "american typewriter", "palatino linotype", Courier, serif;
  color: #365E18;
}

/**
 * Mobile Safari (3.2 till 4.2 at least) renders some elements (our .background)
 * with css rules for the anchor <a> element. Weird bug.
 */
a {
  color: #f0f0f0;
  border: none;
  text-decoration: none;
}

a {
  color: #222223;
  text-decoration: none;
  border: 1px solid transparent;
  border-bottom: 1px dotted #625D20;
}
a:hover {
  text-shadow: 2px 2px 5px #666667;
  position: relative;
  top: -1px;
  left: -1px;
}
a:active {
  text-shadow: 1px 1px 3px #666667;
  position: relative;
  top: 0;
  left: 0;
}

.clearing {
  clear: both;
  margin: 0;
  padding: 0;
  font-size: 1px;
  line-height: 1px;
}

ul {
  padding-left: 16px!important;
  list-style-image: url("images/green-bullet.png");
}
/********************************************************************/
/* HEADER                                                           */
/********************************************************************/

.header {
  margin: 0 0 0 -50px;
  padding: 0;
  min-height: 222px;
  text-align: left;
  display: inline-block;
}

.logo {
  margin: 0;
  padding: 0;
  overflow: visible;
}

.logo .word {
  white-space: nowrap;
  color: white;
}
.logo sup {
  display: none;
  padding-left: 5px;
  font-family: "Underwood Champion", "american typewriter", "palatino linotype", Courier, serif;
  font-size: 12pt;
  font-weight: normal;
  color: white;
}

.logo a {
  padding: 0;
  color: white;
  font-weight: normal;
  border: none;
  font-family: "Underwood Champion", "american typewriter", "palatino linotype", Courier, serif;
  font-size: 66pt;
  display: inline-block;
}
.logo .green {
  color: #bed91d;
}
.logo a:hover {
	text-shadow: none;
	position: static;
}

#outerbox .logo>a {
  border: 3px solid transparent;
}
#outerbox .logo a:visited {
  color: white;
}

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

.logo a span {
  margin: 0;
  padding: 0;
}

.jargonbox {
  font-size: 10pt;
  line-height: 1.5em;
  margin-top: 40px;
}
/********************************************************************/
/* BACKGROUND                                                       */
/********************************************************************/
.backlogo {
	z-index: 1;
	margin: -10px auto -1000px auto;
	padding: 0;
	width: 100%;
	min-width: 720px;
	height: 1000px;
	/*background: transparent url("https://dl.dropboxusercontent.com/s/ckc1jbp7y1bxk0e/sensaverde-top4.jpg") bottom center repeat-x;*/
	background: transparent url("images/sensaverde-top4.png") bottom center repeat-x;
	background-position: center -0px;
	filter: blur(12px);
	-webkit-filter: blur(12px);
	-moz-filter: blur(12px);
}

.animated .backlogo {
	animation-duration: 2.5s;
	animation-name: blur;
	animation-timing-function: ease-out;
	-webkit-animation-duration: 2.5s;
	-webkit-animation-name: blur;
	-webkit-animation-timing-function: ease-out;
	-moz-animation-duration: 2.5s;
	-moz-animation-name: blur;
	-moz-animation-timing-function: ease-out;
}
.animated .logo {
	animation-duration: 1.5s;
	animation-name: blur;
	animation-direction: reverse;
	animation-timing-function: ease-in;
	-webkit-animation-duration: 1.5s;
	-webkit-animation-name: blur;
	-webkit-animation-direction: reverse;
	-webkit-animation-timing-function: ease-in;
	-moz-animation-duration: 1.5s;
	-moz-animation-name: blur;
	-moz-animation-direction: reverse;
	-moz-animation-timing-function: ease-in;
}

@keyframes blur {
	from {
		filter: blur(0);
	}
	to {
		filter: blur(12px);
	}
}
@-webkit-keyframes blur {
	from {
		-webkit-filter: blur(0);
	}
	to {
		-webkit-filter: blur(12px);
	}
}
@-moz-keyframes blur {
	from {
		-moz-filter: blur(0);
	}
	to {
		-moz-filter: blur(12px);
	}
}

.backlogo * {
	display: none;
}
/********************************************************************/
/* MENU                                                             */
/********************************************************************/

.sidebox {
  margin: 0 0 20px 0;
  padding: 0 0 80px 0;
  text-align: justify;
  display: inline-block;
}
.sidebox div {
  margin: 0 5px 5px 0;
  padding: 0;
  display: block;
  background-color:  #bed91d;
  opacity: .8;
  filter: alpha(opacity=80);
  float: left;
}
.sidebox div h2 {
  margin: 0;
  padding: 0;
}
.sidebox div a {
  margin: 0;
  padding: 29px 0;
  display: block;
  text-align: center;
  vertical-align: middle;
  width: 79px;
  height: 21px;
  border: none!important;
  font-weight: thin;
  overflow: hidden;
  color: #365E18;
  font-size: 10.5pt;
}
.sidebox div:hover {
/*  box-shadow: 2px 2px 5px #365E18;
  position: relative;
  top: -1px;
  left: -1px;*/
  opacity: 1;
  filter: alpha(opacity=100);
}
.sidebox div a:hover {
  text-shadow: none !important;
  top: 0!important;
  left: 0!important;
}

#menu-datenschutz {
    padding-top: 20px;
    padding-bottom: 38px;
}
/********************************************************************/
/* FOOTER                                                           */
/********************************************************************/

.footer {
  margin-top: 50px;
  padding: 0;
  font-size: 8pt;
  text-align: justify;
}
.footer .adr:after {
  content: "";
  display: inline-block;
  width: 100%;
  font-size: 1px;
}
.footer .qgreen {
  display: inline-block;
  margin-bottom: -2px;
  width: 10px;
  height: 10px;
  background-color: #bed91d;
  opacity: .8;
  filter: alpha(opacity=80);
}
/********************************************************************/
/* MISC                                                             */
/********************************************************************/

/********************************************************************/
/* error page                                                       */
/********************************************************************/
.error-message {
    margin-top: -50px;
}
.error-message .httpstatus {
    position: fixed;
    top: 0;
    left: 50px;
    font-size: 64pt;
    color: #fefefe;
}
.error-message .n1 {
    font-size: 48pt;
}
.error-message .n2 {
    font-size: 24pt; 
}
.error-message .n3 {
    font-size: 14pt;
}
.error-message div {
    font-size: 12pt;
    line-height: 1.2em;
    margin-bottom: 40px;
}

/********************************************************************/
/* mobile navigation                                                */
/********************************************************************/
.mobile-hint {
  display: none;
}
@media only screen and (max-device-width: 640px),
	only screen and (max-device-width: 667px),
	only screen and (max-width: 480px) {
    body {
        background-color:  #bed91d;
        background-image: linear-gradient(to bottom, white 0%, white 100%); /* for the body */
    }

    #outerbox {
        color: #222222;
        max-width: 100%;
		padding: 20px;
    }

    .header {
        min-height: 0;
        margin-bottom: 20px;
		display: block;
    }
    .logo {
        margin-top: -40px;
        text-align: center;
    }
    .logo .word,
    .logo a,
    #outerbox .logo a:visited,
    .logo sup {
/*        color: #222222;*/
        font-size: 80pt;
    }

    .clearing {
        min-height: 40px;
    }

    .sidebox {
    }
    .sidebox div a {
        padding: 40px 0;
        width: 120px;
        height: 42px;
        font-size: 17pt;
        font-weight: normal;
    }

    .mainarea {
        font-size: 21pt;
        text-align: left;
    }

    ul {
        list-style: none;
    }
    li {
        margin-left: -20pt;
        padding-left: 20pt;
    }
    li:before {
        content: "■ ";
        color: #bed91d;
        font-size: 40pt;
        margin-left: -20pt;
    }

    .advert {
        padding: 10% 15%;
        font-size: 24pt;
        line-height: 140%;
    }

    .jargonbox {
        font-size: 18pt;
    }

    .footer {
        font-size: 10pt;
        text-align: left;
    }
    .footer .qgreen {
        width: 20px;
        height: 20px;
    }
}

/********************************************************************/
/* reports                                                          */
/********************************************************************/

table.report-speed {
    margin-left: -20%;
    width: 120%;
    border-collapse: separate;
    border-spacing: .5em 0;
}
table.report-speed td {
    white-space: nowrap;
}
table.report-speed td img {
    height: 130px;
}