@font-face {
font-family: Jaapokki;
font-display: auto;
src: url('jaapokki.eot');
src: url('jaapokki.eot?#iefix') format('embedded-opentype'),
url('jaapokki.woff') format('woff'),
url('jaapokki.ttf') format('truetype');
}

html, body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td {
margin: 0;
padding: 0;
}

html, body {
width: 100%;
height: 100%;
}

body {
font: normal 13px Jaapokki, Verdana;
color: #ffffff;
background-color: #ffffff;
}





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

a:hover {
color: #ffffff;
text-decoration: underline
}

h1 {
font-size: 50px;
padding: 0;
}

h2 {
font-size: 29px;
padding: 0;
}

.clr {
clear: both;
}





#preloader {
width: 64px;
height: 64px;
top: 50%;
left: 50%;
margin: -8px 0 0 -8px;
position: absolute;
z-index:999;
}

#background {
display: none; /* Only use this if you fade it in again after the images load */
position: fixed !important;
}





#sidebar {
width: 250px;
min-height: calc(100% - 40px);
min-height: -webkit-calc(100% - 40px);
min-height: -moz-calc(100% - 40px);
padding: 20px;
position: relative;
border-right: solid 1px #545454;
background: transparent url('../img/bg-menu.png');
display: none;
}

#header, #logo, #menu, #nav {
width: 250px;
margin: 0;
}

#header h2 {
line-height: 35px;
}

#menu {
margin-top: 15px;
}

#menu a {
width: 250px;
height: 50px;
padding: 5px 0;
line-height: 2;
display: inline-block;
}

#menu a {
text-decoration-color: #ef3e36;
text-decoration-thickness: 2px
}

#menu img.menu {
float: left;
margin-right: 10px;
}

#menu a:hover img {
outline: solid 3px #ef3e36;
outline-offset: -1.75px;
}

#menu a:active img {
outline: solid 3px #ef3e36;
}


#nav {
margin-top: 100px;
padding: 0;
}

#nav a {
height: 50px;
width: 50px;
padding: 0;
}

#nav_left {
float: left;
margin-left: 70px;
}

#nav_right {
float: right;
margin-right: 70px;
}