/**
* Style Name: peick Kommunikationsdesign
* Author: Kerstin Peick
* Author URI: http://www.peick-kd.de
* Version: 1.0
*/


label	{ 
	font: 1em arial, helvetica, sans-serif;
	line-height:1;
	padding-top:15px;
	}
	
a.nav:hover 
	{
	color: #DA9422;
	text-decoration: none;
	border: 0;
	outline: none;
	}
	

/* Navigation
-------------------------------------------------------------- */

/*big screens*/
@media only screen and (min-width: 750px) {
 
#main-nav
	{
	font: 1em arial, helvetica, sans-serif;
	padding-top: 15px;
	padding-left: 30px; 
	}
}



nav{
  margin: auto;
}

ul.nav{
  margin: 0;
  padding-top: 5px;
  
    /*this option by default dispose the elements in a row (flex-direction: row)*/
	display: flexbox;
	display: box;
	display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
	display: -moz-box; /* OLD - Firefox 19- (Buggy, funktioniert aber hauptsächlich) */
	display: -ms-flexbox; /* TWEENER - IE 10 */
	display: -webkit-flex; /* NEW - Chrome */
	display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+*/
	flex-direction: row;
}

li.nav{
  list-style-type: none;
   /*when I specify 2 values to margin, the first one is for the top and bottom side, the second for the left and right side*/
  margin: 0 10px;
}

/* Hide Hamburger */
#main-nav label, #hamburger {
  display: none;
}



/*change the layout for small screens*/
@media only screen and (max-width: 749px) {
  /*shows elements in a column*/
#main-nav
	{
	font: 1em arial, helvetica, sans-serif;
	width: auto;
	position:absolute;
	top: 0;
	left: 0;
  }
  
ul.nav{
	display: flexbox;
	display: box;
	display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
	display: -moz-box; /* OLD - Firefox 19- (Buggy, funktioniert aber hauptsächlich) */
	display: -ms-flexbox; /* TWEENER - IE 10 */
	display: -webkit-flex; /* NEW - Chrome */
	display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+*/
	flex-direction: column;
	background-color: #ffffff;
	border: solid;
	border-color: #ffffff;
	border-width: 2px;
	border-radius:  0 5px 5px 5px;
	margin-left: 15px;
	/* box-shadow */	
	-moz-box-shadow: 8px 8px 8px -5px #999 ;
	-webkit-box-shadow: 8px 8px 8px -5px #999 ;
	box-shadow: 8px 8px 8px -5px #999 ;
  }
  
  /* deletes margin on top or bottom of the a tag*/
li.nav{
    margin: auto;
  }
 /* makes sure that the a tag will take the entire screen*/
a.nav{
    display: block;
  }
  
  
  /* Show Hamburger */
#main-nav label {
    display: inline-block;
    color: #fff;
    background: #DA9422;
    font-style: normal;
    font-size: 1.2em;
	border: solid;
	border-color: #DA9422;
	border-width: 2px;
	border-radius: 0 5px 5px 5px;
    padding: 8px;
  }

  /* Break down menu items into vertical */
  #main-nav ul li {
    display: block;
	padding: 0;
    margin: 0 10px 10px 10px;
	border: 0;
  }

  /* Toggle show/hide menu on checkbox click */
  #main-nav ul {
    display: none;
  }
  #main-nav input:checked ~ ul {
    display: block;
  }
 
}