/*Seiten-Layout*/
#container
{
width: 100%;
height: 100%;
}

#topcontainer
{
width: 100%;
background-color: #81A395;
height: 6.25em;
display: block;
position: relative;
}

#top
{
width: 75em;
margin: 0 auto;
display: block;
position: relative;
}


#containermitte
{
position: relative;	
background-color: #F7F4E4;
width: 75em;
min-height: calc(100% - 6em);
overflow:auto;
margin: 0 auto;


}

#leftnav
{
float: left;
width: 15em;
}

#content
{
width: 48em;
float: left;	
}

#rightnav
{
float: right;
width: 12em;
}

#footer
{
margin-top: 3em;
border-top: solid thin #555;	
clear: both;	
width: 100%;

}

/*media queries  */
@media screen and (max-width: 75em) {

#top
{
width: 100%;
}
#containermitte
{
width: 100%;
}

#content {
 width: calc(100% - 15em);
}

#rightnav
{
display: none;	
}

}  

@media screen and (max-width: 980px) {
	
#leftnav
{
width: 100%;	
}

#content
{
margin-top: -1em;	
clear: both;	
width: 100%
}
}

/*****************************
fonts*************************/

@font-face {
	font-family: 'Ubuntu';
	src: url('fonts/Ubuntu-R.ttf');
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: 'Ubuntu';
	src: url('fonts/Ubuntu-RI.ttf');
	font-weight: normal;
	font-style: italic;
}
@font-face {
	font-family: 'Ubuntu';
	src: url('fonts/Ubuntu-B.ttf');
	font-weight: bold;
	font-style: normal;
}
@font-face {
	font-family: 'Ubuntu';
	src: url('fonts/Ubuntu-BI.ttf');
	font-weight: bold;
	font-style: italic;
}

@font-face {
  font-family: 'fontello';
  src: url('fonts/fontello.eot?21351273');
  src: url('fonts/fontello.eot?21351273#iefix') format('embedded-opentype'),
       url('fonts/fontello.woff?21351273') format('woff'),
       url('fonts/fontello.ttf?21351273') format('truetype'),
       url('fonts/fontello.svg?21351273#fontello') format('svg');
  font-weight: normal;
  font-style: normal;
    }

 [class^="icon-"]:before, [class*=" icon-"]:before {
  font-family: "fontello";
  font-style: normal;
  font-weight: normal;
  speak: none;
 
  display: inline-block;
  text-decoration: inherit;
  width: 1em;
  margin-right: .2em;
  text-align: center;
  /* opacity: .8; */
 
  /* For safety - reset parent styles, that can break glyph codes*/
  font-variant: normal;
  text-transform: none;
 
  /* fix buttons height, for twitter bootstrap */
  line-height: 1em;
 
  /* Animation center compensation - margins should be symmetric */
  /* remove if not needed */
  margin-left: .2em;
}

.icon-bookmark:before { content: '\e800'; } /* 'î €' */
.icon-bookmark-empty:before { content: '\e801'; } /* '' */
.icon-star:before { content: '\e802'; } /* 'î ‚' */
.icon-star-empty:before { content: '\e803'; } /* 'î ƒ' */
.icon-link-ext:before { content: '\e804'; } /* 'î „' */
.icon-angle-double-right:before { content: '\e805'; } /* 'î …' */
.icon-angle-double-left:before { content: '\e806'; } /* 'î †' */
.icon-angle-double-up:before { content: '\e807'; } /* 'î ‡' */
.icon-angle-double-down:before { content: '\e808'; } /* 'î ˆ' */
.icon-down:before { content: '\e809'; } /* 'î ‰' */
.icon-left:before { content: '\e80a'; } /* 'î Š' */
.icon-right:before { content: '\e80b'; } /* 'î ‹' */
.icon-up:before { content: '\e80c'; } /* '' */
.icon-down-open:before { content: '\e80d'; } /* '' */
.icon-left-open:before { content: '\e80e'; } /* 'î Ž' */
.icon-right-open:before { content: '\e80f'; } /* '' */
.icon-up-open:before { content: '\e810'; } /* '' */
.icon-right-dir:before { content: '\e811'; } /* 'î ‘' */
.icon-left-dir:before { content: '\e812'; } /* 'î ’' */
.icon-up-dir:before { content: '\e813'; } /* 'î “' */
.icon-down-dir:before { content: '\e814'; } /* 'î ”' */
.icon-cancel:before { content: '\e815'; } /* 'î •' */
.icon-cancel-circled:before { content: '\e816'; } /* 'î –' */
.icon-plus-squared:before { content: '\e817'; } /* 'î —' */
.icon-plus-squared-alt:before { content: '\e818'; } /* 'î ˜' */
.icon-pencil:before { content: '\e819'; } /* 'î ™' */
.icon-print:before { content: '\e81a'; } /* 'î š' */
.icon-doc-landscape:before { content: '\e81b'; } /* 'î ›' */
.icon-login:before { content: '\e81c'; } /* '' */
.icon-logout:before { content: '\e81d'; } /* '' */
.icon-login-1:before { content: '\e81e'; } /* 'î ž' */
.icon-logout-1:before { content: '\e81f'; } /* 'î Ÿ' */
.icon-chat:before { content: '\e820'; } /* 'î  ' */
.icon-trash:before { content: '\e821'; } /* 'î ¡' */
.icon-trash-empty:before { content: '\e822'; } /* 'î ¢' */
.icon-doc:before { content: '\e823'; } /* 'î £' */
.icon-cog-alt:before { content: '\e824'; } /* 'î ¤' /*/


html, body {
   margin: 0;
   padding: 0;
   width: 100%;
   height: 100%;
   font-family: Ubuntu, arial, sans-serif;
   font-size: 100%;
   line-height: 140%;	
   background-color: #fff;
   color: #333;
}

.print {
display: none;
}

a {
color: #ED4A05;
text-decoration: none;
}


a[href^="http"]:after {
font-family: 'fontello';
content: "\e804"; 
padding-left: 0.2em;
display: inline-block;
}

a.nachoben {
display: block;	
text-align: center;
}

h2 {
text-align: center;
margin-top: 1.5em;
}

h3, h4 {
text-align: left;
}

h3.center {
text-align: center;
}

h2, h3, h4 {
color: #333;
}

blockquote {
 border-left: 2px solid #a93000;
 margin: 2em 0em 2.5em 2.5em;
 padding: 0 10px;
 font-size: 90%;
}

.hinweis {
  color: #32506d;  
  font-weight: bold;
  font-size: 80% ;
}

.form div {
  padding: 0.2em;
}

.shadow { 
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.4);
}

img.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
} 

div.zentriert {
 text-align: center;
}
div.zentriert > div {
display: inline-block;
text-align: left;
}

input[type=text], 
input[type=password],
input[type=date],
textarea
 {
padding: 0.1em 0.1em;
border:1px solid #ccc;
font-size:1em; 
color: #333;
box-shadow:inset 0 1px 3px #ddd;
transition:.2s linear border;
box-sizing:border-box;
}

input[type=text]:focus, 
input[type=password]:focus,
input[type=date]:focus, 
textarea:focus {
 outline:0;
 outline:thin dotted \9;
 border-color:#848484
 }
    
input[type=submit], button.button {
  cursor : pointer;
  padding: 0.4em 0.4em;
  background: #81A395;
  border-style: none;
  color: #fff;
  font-size: 0.8em; 
  font-weight: bold;
  letter-spacing: 1.5px;
 } 
 
input[type=submit]:hover, button.button:hover {
 background: #8FAA9F
 } 
 
input[type=text].standard, input[type=password].standard {
 width: 12em;
 height: 2em;
} 

input[type=text].kurz {
 width: 2.5em;
 height: 1.5em;
}

select {
  -webkit-appearance:none;
  -moz-appearance: none;
  appearance: none;
  border:none;
  border-radius: 0;
  font-size: 0.9em;
} 

select {
  height: 2.0em;	
  border: 1px solid #bbb;
  padding: 0.1em 0.1em 0.1em 0.1em;
  background-color: #fff;
  color: #333;
  background-image:url(./bilder/selectboxarrow.png);
  background-position: right;
  background-repeat: no-repeat;
}

img.nachoben {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 3em;    
}


/* Checkboxdesign *******************/

 /* <label> (container) */
.chckbox_container {
  display: block;
  position: relative;
  padding-left: 27px;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Default Checkbox verstecken */
.chckbox_container input {
  position: absolute;
  opacity: 0;
}

/* Neue checkbox */
.chckbox_neu {
  position: absolute;
  top: 0;
  left: 0;
  height: 21px;
  width: 21px;
  background-color: #fff;
  border:1px solid #ccc;
}

/* On mouse-over -> grauer Hintergrund */
.chckbox_container:hover input ~ .chckbox_neu {
  background-color: #ccc;
}

/* Wenn Checkbox checked -> orangner Hintergrund */
.chckbox_container input:checked ~ .chckbox_neu {
  background-color: #81A395;
  border:1px solid #81A395;
  
}

/* Wenn die Checkbox disabled, dann grauer Hintergrund */
.chckbox_container input:disabled ~ .chckbox_neu {
  background-color: #ccc;
  border:1px solid #ccc;

}

/* Häckchen (.chckbox_neu) (nicht sichtbar wenn nicht checked) */
.chckbox_neu:after {
  content: "";
  position: absolute;
  display: none;
}

/* Zeige Häckchen (.chckbox_neu) wenn checked */
.chckbox_container input:checked ~ .chckbox_neu:after {
  display: block;
}

/* Style Häckchen (.chckbox_neu) */
.chckbox_container .chckbox_neu:after {
  left: 7px;
  top: 3px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}