/*** ESSENTIAL STYLES ***/
.menubutton {
	display:none;
}
.sf-menu {
    background:url(../images/nav_bg.jpg)repeat-x 0px 0px;
	margin:0;
	padding:0;
	list-style:none;
}

/*.sf-menu {
	width: 100%;
}*/

.nw {
	text-wrap:none;
	white-space: nowrap;
}
.sf-menu li {
    width:100px;
    float:left;
    list-style:none;
    display: block;
    margin: 0;
    padding:0;
    position: relative;
    text-align:center;
    border-right: 1px solid #8C8C8C;

}
.sf-menu li a {
	cursor: pointer;
	text-decoration:none;
	text-transform:uppercase;
	outline:none;
    color:#2e2a22;
    font-family: "Source Sans Pro", Helvetica, sans-serif;
	font-size: 1em;
}

.sf-menu li:hover, .sf-menu li.active {
    background:url(../images/nav_bg_act.jpg)repeat-x 0px 0px;
}
.sf-menu li a:hover, .sf-menu li.active a {
    color:#F49900;
    background: transparent;
}


@media only screen and (min-width: 480px) {
}
@media only screen and (max-width: 900px) {
.sf-menu {
    background:none;
	width: 100px;
    position:absolute;
    top:15px;
    left:65%;
}
.sf-menu li, sf-menu li a {
    background:none;
    border: 0;
    text-align: left; 
}
.sf-menu li:hover, .sf-menu li.active {
    background:none;
}
.menubutton {
	display:block;
	width: 65px;
	height:56px;
	background:url(../images/menu-button.png) no-repeat;
    position:absolute;
    top:10px;
    left:85%;
    outline:none;
}
.menubutton:hover {
	background:url(../images/menu-button-o.png) no-repeat;
	outline:none;
}
.menubutton a, .menubutton a:active {
	outline:none;
}
.upbutton {
	display:block;
	width: 50px;
	height:36px;
	background:url(../images/up-button.png) no-repeat;
	margin:auto;
	outline:none;
}
.upbutton:hover {
	background:url(../images/up-button-o.png) no-repeat;
	outline:none;
}
.upbutton a, .upbutton a:active {
	outline:none;
}
.sf-menu {
	display:none; /* wichtig um den Anfangsstatus auf display none zu setzen */
}

}
@media only screen and (min-width: 900px) {
.menubutton {
	display:none;
}
.sf-menu {
	width: 100%;
	float:left;
	margin: 0;
    padding: 0;
}

}