@font-face {
  font-family: MC;
  src: url("./minecraft.woff");
}
@keyframes fadeIn {
  from {
    opacity: 0.0;
    margin-top: -2em
  }
  to {
    opacity: 1.0;
    margin-top: 0px;
  }
}
@keyframes fadeOut {
  from {
    opacity: 1.0;
    margin-top: 0px;
  }
  to {
    opacity: 0.0;
    margin-top: -2em;
  }
}
body {
  margin: 0px;
  background: url("../img/background.png") repeat;
  font-family: MC;
}
nav {
  width: 100%;
  overflow: hidden;
  background-color: rgba(0, 0, 0, 0.6);
}
nav ul {
  list-style-type: none;
  margin: 0px;
  padding: 0px;
}
nav ul li a {
  float: left;
  font-size: 2em;
  height: 1.5em;
  margin: 1%;
  line-height: 1.5em;
  text-align: center;
  color: #E0E0E0;
  text-shadow: 2px 2px #383838;
  border: 12px solid transparent;
  border-image-source: url("../img/barOuter1.png");
  border-image-slice: 12;
  border-image-width: 12px;
  border-image-outset: 0px;
  border-image-repeat: repeat;
  background: url("../img/barInner1.png") repeat;
  text-decoration: none;
}
nav ul li a:hover {
  background-image: url("../img/barInner2.png");
  border-image-source: url("../img/barOuter2.png");
  color: #FFFFA0;
  text-shadow: 2px 2px #3F3F28;
}
nav ul li a.disabled {
  background-image: url("../img/barInner3.png");
  border-image-source: url("../img/barOuter3.png");
  color: #A0A0A0;
  text-shadow: 2px 2px #282828;
}
nav ul li a.disabled:hover {
  background-image: url("../img/barInner3.png");
  border-image-source: url("../img/barOuter3.png");
}

footer {
  position: absolute;
  bottom: 0px;
  width: 100%;
}
footer ul {
  list-style-type: none;
  margin: 0px;
  padding: 0px;
}
footer ul a {
  float: left;
  font-size: 1em;
  width: calc(((100% - (2% * 4)) / 4) - (2 * 4px) - 1px);
  height: 1.5em;
  margin: 1%;
  line-height: 1.5em;
  text-align: center;
  color: #685E4A;
  border: 4px solid transparent;
  border-image-source: url("../img/barOuter4.png");
  border-image-slice: 4;
  border-image-width: 4px;
  border-image-outset: 0px;
  border-image-repeat: repeat;
  background: url("../img/barInner4.png") repeat;
  text-decoration: none;
}
footer ul a:hover {
  background-image: url("../img/barInner5.png");
  border-image-source: url("../img/barOuter5.png");
  color: #FFFF80;
}
 footer ul a.disabled {
  background-image: url("../img/barInner6.png");
  border-image-source: url("../img/barOuter6.png");
  color: #342F25;
}
 footer ul a.disabled:hover {
  background-image: url("../img/barInner6.png");
  border-image-source: url("../img/barOuter6.png");
}


/* 

Hamburger Menu 

Aufgaben:
	-	Anpassen an MC Style

START		*/

label.menuIcon
{ 
	z-index: 100;
	background: transparent; 
	width: 75px; 
	height: 50px; 
    position: fixed;
	top: 50px;
    right: 50px;
	margin-left: auto; 
	margin-right: auto;
	border-radius: 4px; 
}

input#menuIcon 
{
	display:none
}

.menuIconLine 
{ 
   position: absolute; 
   left:10px;
   height: 4px; 
   width: 55px; 
   background: #9E9E9E; 
   border-radius: 2px;
   display: block; 
   transition: 0.5s; 
   transform-origin: center; 
}

.menuIconLine:nth-child(1) { top: 12px; }
.menuIconLine:nth-child(2) { top: 24px; }
.menuIconLine:nth-child(3) { top: 36px; }

#menuIcon:checked + .menuIcon .menuIconLine:nth-child(1)
{
   transform: translateY(12px) rotate(-45deg);
}

#menuIcon:checked + .menuIcon .menuIconLine:nth-child(2)
{
   opacity:0;
}

#menuIcon:checked + .menuIcon .menuIconLine:nth-child(3)
{
   transform: translateY(-12px) rotate(45deg);
}

.menuIconBox
{
	z-index: 100;
	position: fixed;
    top: 35px;
    right: 35px;
}

/* Hamburger Icon
END		*/

/* Desktop Ansicht */
@media only screen and (min-width: 1182px)
{

    .menuIcon
	{
        display: none;
    }
	
	nav ul li a {
		width: calc(((100% - (2% * 6)) / 6) - (2 * 12px) - 1px);
	}

	nav subnav ul li a {
		width: calc(((100% - (2% * 5)) / 5) - (2 * 12px) - 1px);
		margin: 0px 1% 0.5% 1%;
	}

}


/* Mobile Ansicht */
@media only screen and (max-width: 1181px)
{
	
	nav
	{
		display: none;
	}
	
	nav.open
	{
		display: block;
	}
	
	nav.open ul li a 
	{
		position: sticky;
		top: 0px;
		height: auto;
		width: calc(((100% - (2% * 1)) / 1) - (2 * 12px) - 1px);
	}
	
	nav subnav ul li a {
		width: calc(((100% - (2% * 1)) / 1) - (2 * 12px) - 1px);
		margin: 0px 1% 0.5% 1%;
	}
	
	
	
	.menuIcon
	{
        display: block;
    }
	
	
}