nav {
position: absolute;
top: 0;
left: 0;
width: 115px;
height: 600px;
display: block;
}
nav a, nav a:link, nav a:visited, nav a:hover {
color: #173962;
text-decoration: none;
}
nav ul ul a, nav ul ul a:link, nav ul ul a:visited, nav ul ul a:hover {
color: #ffffff;
text-decoration: none;
}
nav ul {
position: relative;
background: #ffffff;
list-style: none;
list-style-type: none;
list-style-position: outside;
padding: 0;
margin: 0;
}
nav ul li {
width: 115px;
text-align: center;
padding: 0;
margin: 0;
}
nav > ul > li:last-child > a {
border-bottom: 1px solid #ffffff;
}
nav ul li a {
width: 94px;
height: 56px;
color: #173962;
font-size: 75%;
font-weight: bold;
text-align: center;
text-transform: uppercase;
padding: 10px 10px 8px 10px;
border-right: 1px solid #ededed;
border-bottom: 1px solid #ededed;
margin: 0px 0px 0px 0px;
display: block;
}
nav ul li a.current {
background: #eeeeee;
border-bottom: 1px solid #ededed;
}
nav ul li a:hover {
background: #eeeeee;
border-bottom: 1px solid #ededed;
}
nav ul li a img {
vertical-align: middle;
margin: 0 auto 2px auto;
display: block;
}
nav ul ul {
position: absolute;
top: 0;
left: -300px;
width: 300px;
height: 600px;
background: #22456d;
line-height: 20px;
overflow: auto;
overflow-x: hidden;
border-right: 1px solid #333333;
display: none;
}
nav ul ul li {
width: 300px;
}
nav ul ul li a {
width: auto;
height: auto;
color: #ffffff;
font-size: 87.5%;
font-weight: normal;
text-align: left;
text-transform: inherit;
padding: 20px 10px 20px 35px;
border-right: none;
border-bottom: 1px solid #8b9cb4;
}
nav ul ul li a.menuopen {
background-color: #6b7c94;
background-image: url('../img/arrow_open.png');
background-position: 10px 50%;
background-repeat: no-repeat;
}
nav ul ul li a.menuclose {
background-color: transparent;
background-image: url('../img/arrow_close.png');
background-position: 10px 50%;
background-repeat: no-repeat;
}
nav ul ul li a:hover {
background-color: #6b7c94;
border-bottom: 1px solid #8b9cb4;
}
nav ul ul ul {
position: relative;
top: 0;
left: 0;
width: 300px;
height: auto;
padding: 0px 0px 0px 0px;
border-bottom: 1px solid #8b9cb4;
margin: 0px 0px 0px 0px;
line-height: 20px;
overflow: auto;
}
nav ul ul ul li {
text-align: left;
}
nav ul ul ul li a {
color: #ffffff;
background: transparent;
font-size: 81.25%;
font-weight: normal;
text-transform: inherit;
padding: 8px 10px 8px 20px;
border-bottom: none;
}
nav ul ul ul li a.currentpage, nav ul ul ul li a:hover {
background-color: #6b7c94;
border-bottom: none;
}
nav ul li a.streaming {
background-image: url('../img/webcam_streaming.png');
background-position: 90% 50%;
background-repeat: no-repeat;
}

@media only screen and (max-width: 1023px) {

nav {
position: absolute;
position: fixed;
left: -81%;
top: 0px;
width: 80%;
height: 100%;
background: #ffffff;
padding: 50px 0px 0px 0px;
-webkit-box-shadow:  2px 0px 3px 2px rgba(0, 0, 0, 0.2);
box-shadow:  2px 0px 3px 2px rgba(0, 0, 0, 0.2);
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
overflow: auto;
}
nav ul li {
width: 100%;
}
nav ul li a {
text-align: left;
height: auto;
width: auto;
}
nav ul li a img {
width: 34px;
padding-right: 10px;
display: inline;
}
nav ul ul {
position: relative;
left: 0px;
width: 100%;
/*height: 0px;*/
height: auto;
margin-top: 0px;
}
nav ul ul li {
width: auto;
height: auto;
}
nav ul ul ul {
width: auto;
height: auto;
}

}


@media only screen and (min-width: 1024px) {

nav ul li.menu_members {
display: none;
}
nav > ul > li:nth-last-child(2) > a {
border-bottom: 1px solid #ffffff;
}
nav ul li a {
height: 28px;
padding: 8px 10px 10px 10px;
}
nav ul li a img {
width: 17px;
}
nav ul ul {
height: 375px;
}
nav > ul > li > ul {
-webkit-box-shadow:  2px 0px 3px 2px rgba(0, 0, 0, .2);
box-shadow:  2px 0px 3px 2px rgba(0, 0, 0, .2);
}
nav > ul > li > ul > li:last-child ul {
margin-bottom: 314px;
}

}


@media only screen and (min-width: 1152px) {

nav {
height: 480px;
}
nav ul li a {
height: 41px;
padding: 9px 10px 9px 10px;
}
nav ul li a img {
width: 27px;
}
nav ul ul {
height: 480px;
}
nav > ul > li > ul > li:last-child ul {
margin-bottom: 419px;
}

}


@media only screen and (min-width: 1360px) {

nav {
height: 600px;
}
nav ul li a {
height: 56px;
padding: 13px 10px 5px 10px;
}
nav ul li a img {
width: 34px;
}
nav ul ul {
height: 600px;
}
nav > ul > li > ul > li:last-child ul {
margin-bottom: 539px;
}

}