@charset "UTF-8";
/* --------------------------------------------------
        Allgemeine Grundeinstellungen                              
 ----------------------------------------------------*/
html {
  box-sizing: border-box;
}
*, *::before, *::after {
  box-sizing: inherit; 
}

body {
   color: #0c02c6;            
   background-color: #efefef;
   font-family: Arial; 
}


p.gross {
	font-size: 150%;
	color: #4A4A4A;
	line-height: 125%;
}

p.grossItalic {
	font-size: 110%;
	
	line-height: 125%;
}

p {
	font-size: 100%;
	line-height: 125%;
}


p.klein {
	font-size: 80%;
	
	line-height: 100%;
}

p.mittel {
	font-size: 90%;
	line-height: 125%;
	color: #0c02c6;	
	line-height: 100%;
	
	padding-top: 0em;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
}


/* Silbentrennung*/
.trennung {
  -ms-hyphens: auto;
  -webkit-hyphens: auto;
  hyphens: auto;
}

.nav-ul {
   background-color: #ffd100 ;
   margin:0;
	width::150%;
}

.nav-li {
   list-style: none;
   margin-left: 0;
	font-size:100%;
   border-bottom: 1px solid #efefef;
	
}

.nav-li-a {
    padding: 0.6em 2rem;
	 font-size:100%;
	 vertical-align:central;
	 alignment-adjust:central;
    display: block; 
	 
}

.nav-ul a:link {
    text-decoration: none; 
}

.nav-ul a:link, .nav-ul a:visited {
	color: #0C02C6; 
}

.nav-ul a:hover, .nav-ul a:focus, .nav-ul a:active {
   background-color: #0C02C6;
   color: #efefef;
}

.nav-active {
   color: #ffd100;
   background-color: #0C02C6;
}

.abstand li span	{
	position:relative;
	left:30px;
}

h1 {
	
	font-size: 125%;
	font-weight: bold;
	line-height: 125%;
	text-align:left;
	color: #0C02C6;
	padding: 0, 10px, 10px, 10px;
	line-height: 125%;
}

h2 {
	font-size: 110%;
	font-weight: bolder;
	line-height: 125%;
	text-align:left;
	color: #0C02C6;
	padding: 0, 10px, 10px, 10px;
	line-height: 90%;
}

h3 {
	font-size: 100%;
	font-weight: bold;
	line-height: 125%;
	text-align:left;
	color: #0C02C6;
	padding-bottom:0em;
	/*height: 30px;*/
}

h4 {
	font-size: 90%;
	ont-weight: bold;
	line-height: 125%;
	color: #0c02c6;
	/*padding: 3px;*/
	line-height: 125%;
}

h5 {
	font-size: 80%;
	line-height: 125%;
	color: #0c02c6;
	padding: 3px;
	line-height: 90%;
}

h6 {
	font-size: 70%;
	line-height: 125%;
	color: #0c02c6;
	padding: 3px;
	line-height: 100%;
	background-color: #FFFFFF;
}

ul {
  padding: 10;
  
}

/* ul als Auflistung */
.auflistung	{
	text-indent:hanging;
  	list-style: circle;
	color: #0c02c6;
}


.wrapper {
	background-color: #FFD100;
}

#breadcrumb {
	font-size: 70%;
	border-top-style: outset;
	border-right-style: outset;
	border-bottom-style: outset;
	border-left-style: outset;
	border-top-color: #0c02c6;
	border-right-color: #0c02c6;
	border-bottom-color: #0c02c6;
	border-left-color: #0c02c6;
	/*width: 90%;*/

}

#breadcrumb_aktuell {
	font-style:normal;
	background-color: #ffD014;
	color: #0C02C6;
}

#kranbild	{
	background-image:url(../img/symbole/Kran-Parameter-320.png);
	background-repeat:no-repeat;
	width:100%;
}

#gewicht	{
	padding: 0px;
        position: relative;
        top: 3.1em;
		  right: 1em;
		  bottom: 1em;
		  left: 3.6em;

        width: 18em;
}

#weite	{
	padding: 0px;
        position: relative;
        top: 8.7em;
		  bottom: 1em;
		  left: 7em;
        ;
        width: 12em;
}

#hoehe	{
	padding: 0px;
        position: relative;
        top: 4.0em;
		  right: 0em;
		  bottom: 1em;
		  left: 2em;
        ;
        width: 12em;
}

.img-art	{
	float: left;
	margin: 0 1em 0.2em 0;
	max-width:40%;
	height:auto;
}

.img-head	{
	float: right;
	margin: 0 0em 0.2em 1em;
	max-width:60%;
	height:auto;
}

.img-side	{
	float:left;
	margin: 0.1em 1em 0.2em 0.2em;
	max-width:40%;
	height:auto;
}

A:link, A:visited, A:active {
	text-decoration: underline;
	font-size: 100%;
	color: #0c02c6;
}


/* 3D-Effekt für Buttons */


.menueButton {
	width:100%;
	font-size: 80%;
	background: #ffd100;
	border: none;
	font-style: normal;
	line-height: 0em;
	font-weight: bold;
	color: #0C02C6;
	height:1.2em;
	margin-top: 1em;
	padding-top: 1em;
	padding-right: 1em;
	padding-bottom: 1.2em;
	padding-left: 1em;
	/*border-radius: 10px;*/
}

.formButton {
	width:100%;
	font-size: 100%;
	background: #efefef;
	border: 1px outset #0C02C6;
	font-style: normal;
	line-height: 0em;
	font-weight: bold;
	color: #0C02C6;
	height:auto;
	margin-top: 1em;
	padding-top: 1em;
	padding-right: 1em;
	padding-bottom: 1.2em;
	padding-left: 1em;
	border-radius: 1em;
}


.inputboxText {
	font-size: 100%;
	background: #fff;
	width: 100%;
	padding: 3px;
	color: #0C2C6;
	border: 2px solid #0C02C6;
	position: relative;
	margin-top: 1em;
	padding-top: 1em;
	padding-right: 1em;
	padding-bottom: 1.2em;
	padding-left: 1em;
}

.inputboxParam {
	font-size: 150%;
	height:50%;
	width: 30%;
	padding: 3px;
	
	border: 1px solid #0C02C6;

}

.inputboxZahl {
	font-size: 150%;
	background: #fff;
	width: 6em;
	padding: 3px;
	color: #0c02c6;
	border: 2px solid #0C02C6;
	position: relative;
	margin: 10px;
}

.dunkel_auf_hell {
	color: #0C02C6;
	background-color: #FFD100;
}

.hell_auf_dunkel {
	color: #FFD100;
	background-color: #0C02C6;	
}

th {

	font-size: 90%;
	ont-weight: bold;
	line-height: 125%;
	color: #0c02c6;
	padding: 3px;
	line-height: 125%;
}

td {
	font-size: 80%;
	line-height: 125%;
	color: #0c02c6;
	padding: 0.1em;
	line-height: 120%;
}

td.klein {
	
	font-size: 80%;
	line-height: 100%;
	color: #0c02c6;
	padding: 0.5em;
	background-color: #FFFFFF;
}

li.klein {
	
	font-size: 70%;
	line-height: 125%;
	color: #0c02c6;
	padding: 0.5em;
	line-height: 100%;
	background-color: #FFFFFF;
}

.highlight	{
	/*color:red;*/
	color: #0C02C6;
	background-color: #FFD100;
}

#logo	{
		width:50%;
		font-size:100%;
	}

/* ---------------------------------------------------------------
     CSS-Eigenschaften für  mobile Geräte (<640 px)            
       + Alles in einer Spalte untereinander anordnen                                              
----------------------------------------------------------------- */
.header {
   text-align: left;
   padding: 0em;
   background-color: #ffffff; 
   color: #efefef;              
   border-bottom: 1px solid #efefef;
		
}

.aside {
  border-top: 1px solid #a9a9a9;
  padding-top: 0.5em;
}

.footer {
   background-color: #a9a9a9;
   color: #efefef;           
   padding: 1em;
   text-align: center; 
   border-top: 1px solid #efefef;
	text-decoration:none;
}

.container {
   background-color: #fff; 
   padding: 2em 2rem;
}

h1.klein {
	
	font-size: 60%;
	font-weight: bold;
	line-height: 60%;
	color: #0c02c6;
	padding: 10px;
	line-height: 100%;
}

.img-logo	{
		max-width:40%;
		height:auto;
		display:block;
}

#logo	{
		font-size:150%;
		/*width:100%;*/
	}

/*--------------------------------------------------   
     Tabletversion >= 640 Pixel                          
       640px / 16px/em = 40em  
       + 2 Spalten
         - Header und Navigation oben untereinander
		 - Hautpinhalt und Seitenleiste nebeneinander
		 - Fußleiste unten
---------------------------------------------------*/
@media screen and (min-width: 40em) {
  .header {
    padding: 1.5em;
    text-align: left; 
  }
  
  .container {
    padding: 3rem 0;
    display: block;
    overflow: auto; 
  }
 
  .content {
    display: block;
    float: left;
    width: 65%;
    padding: 0 1rem 0 2rem; 
  }
  
  .aside {
    display: block;
    margin: 0 0 0 65%;
    width: 35%;
    padding: 0 2rem 0 2rem;
    border-top: none; 
  }
  
  .nav-ul {
    padding: 0 2rem;
    overflow: hidden;	
  }
  
  .nav-li {
      float: left;
      display: inline-block;
      border: none;
      width: auto; 
   }
   
	.nav-li-a {
     padding: 0.7em 1.2rem;
     display: inline-block;
    }
	 
	 .img-logo	{
		max-width:100%;
		height:auto;
		display:block;
	}
	
	h1.klein {
	
	font-size: 125%;
	font-weight: bold;
	line-height: 125%;
	color: #0c02c6;
	padding: 10px;
	line-height: 125%;
	}
	
	#logo	{
		font-size:100%;
		/*width:100%;*/
	}
} 

/*---------------------------------------------------------------
    Bildschirme >= 1024 Pixel                         
      1024px / 16px/em = 64em
      + 3 Spalten
        - Header oben
        - Navigation, Hauptinhalt und Seitenleisten nebeneinander
        - Fußleiste unten		
 ---------------------------------------------------------------- */
@media screen and (min-width: 64em) {
  .container {
    width: 85%;
    padding: 0;
    margin-left: 15%;
  }

  .content {
    width: 70%;
    padding: 1em 1.5em;
  }

  .aside {
    width: 30%;
    padding: 1em 1.5em;
    margin: 0 0 0 70%;
  }

  .nav-ul {
    width: 15%;
    float: left;
    box-shadow: none;
    margin: 1em 0;
    padding:0;
  }

  .nav-li {
    width: 100%;
    float: none;
    text-align: center;
  }

  .nav-li-a {
    padding: 0.5em 3rem;
    display: block;
  }
  
   .img-logo	{
		max-width:100%;
		height:auto;
		display:block;
	}
	
	.header {
   text-align: left;
   padding: 1em;
   background-color: #ffffff; 
   color: #efefef;             
   border-bottom: 1px solid #efefef;
}
		#logo	{
		font-size:100%;
		/*width:100%;*/
	}
}
/*---------------------------------------------------------------- 
    Große Bildschirme (>1280 Pixel) 
      1280px / 16px/em = 80em
	    + 3 Spalten
          - Header oben
          - Navigation, Hauptinhalt und Seitenleisten nebeneinander
			* Zwei Artikel im Hauptinhalt nebeneinander
          - Fußleiste unten	
  ----------------------------------------------------------------- */
@media screen and (min-width: 80em) {
	.wrapper {
		margin: 0 auto;
		max-width: 80em;
	}

	.article {
	  display: block;
      width: 50%;
      float:left;
      padding: 0 1rem 0 1rem;
	}

    .row { clear: both; }

		#logo	{
		font-size:200%;
		/*width:100%;*/
	}
	
	.img-logo	{
		max-width:240%;
		height:auto;
		display:block;

}



/* CSS Autokranvermietungen Stand 14.02.2016 */
/*
@viewport {
   width: device-width;
   zoom:1;
}

body {
	font-family: "Lucida Console", Century, "Century Gothic", Verdana, "Trebuchet MS", Arial, Helvetica, sans-serif;
	color: #000000;
	padding:1.5em;
	height: 100px;
	max-width:480px;
	width: 41em;
		
}

@media screen and (min-width: 481px) and (max-width: 960px)	{
	body	{
		background-color:#F06;
	}
}

@media screen and (max-width: 480px)	{
	body	{
		background-color:#00FF00;
	}
}
*/

/*

#head {
	position: relative;
	font-style: italic;
	font-size: 1.2em;
	font-weight: bold;
	line-height: 125%;
	color: #0c02c6;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 10px;
	width: 99%;
}
*/

/*
table	{
	border-spacing:50px;
	border:dotted;
	font-size: 1.0em;	
}

ul{
	text-indent:hanging;
	list-style: circle;
}

li{
	font-size: 100%;	
	color:#0c02c6;
}


#copyright {
	position: relative;
	clear:left;
	margin-top:0.8em;
	background:#efefef;
	text-align:center;
	padding: 0.8em;
	font-size: 10px;
	vertical-align: middle;
	font-size:90%;
	color:#0C02C6;
	width: 75%;	
}


#container	{
	width:800px;
	
}

A:link, A:visited, A:active {
	text-decoration: none;
	font-size: 100%;
	color: #0c02c6;
}

A:hover {
	text-decoration: underline;
	color: #0C02C6;
	background: #ffd100;
	border-left: 10px solid #efefef;
	border-top-style: solid;
	border-right-style: solid;
	border-bottom-style: solid;
	border-top-color: #efefef;
	border-right-color: #efefef;
	border-bottom-color: #efefef;
	font-weight: bolder;
	line-height: normal;
}
/*
#wrapper	{
	font-style: italic;
	font-weight: bold;
	line-height: 100%;
	color: #0c02c6;
	width: 40em;
	float: left;
	/*background-color:#FFCC33*/;
	/*padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 50px;
}
*/
/*
#navigation {
	position: relative;
	width: 99%;
	height: 10px;
	margin-bottom: 100px;
}

#spezifiziert {
	font-size: 70%;
	border: 5px outset #efefef;
	font-style: normal;
	line-height: 0em;
	font-weight: bolder;
	color: #0C02C6;
	height:1.5em;
	margin-top: 1em;
	padding-top: 0.5em;
	padding-right: 1em;
	padding-bottom: 0.5em;
	padding-left: 1em;
	border-radius: 20px;
	background-color: #efefef;
}

* {
 margin:0;
 padding:0;
 text-decoration:none;
 list-style:none;
}



nav {
	width:99%;
	background:#eee;
}

nav li {
  position:relative;
}

nav ul {
 display:flex;
}
nav ul ul {
 flex-direction:column;
 position:absolute;
 left:-99999em;
 top:-99999em;
 width:800;
 background:#eee
}
nav li:active ul,
nav a:focus ~ ul  {
 left:0;
 top:auto;
}
nav a {
	display:block;
	padding:5px;
}


#beschreibung {
	font-size: larger;
}

#meldung {
	background-color: #CCCCCC;
	font-size: xx-small;
}
.tabllenbreite {
	width: 40em;
}

.imgzentriert {
	display: block; 
	text-align: center;
	}