label.mobile_menu span {
margin-left: 10px;
color:#FFF;
font-size:1em;
display: none;
font-family: 'Open Sans', sans-serif;
}
.navigation{
float:right;
margin-top: -1.4em;
}
.nav {
/* General Font */
font-family: 'Open Sans', sans-serif;
/* General Shape */
position: relative;
margin: 0;
}
ul.nav{
padding:0;
list-style:none;
}
/* Main element of the naviagtion */
.nav > li {
display: inline-block;
float:left;
background: url(/web/images/menu-divider.png) no-repeat right;
}
.nav > li:nth-child(5){
background:none;
}
/* Link Style */
.nav > li > a {
padding:51px 20px 55px 20px;
display: block;
color:#000;
font-size:.85em;
text-transform:uppercase;
border-width:5px 0 0 0;
border-style:solid;
border-color:rgba(255, 255, 255, 0);
background: no-repeat 51% 66%;
}
.nav > li:nth-child(1) > a,.nav > li:nth-child(5) > a,.nav > li:nth-child(3) > a {
background:none;
}
.nav > li:nth-child(1) > a:hover, .nav > li:nth-child(5) > a:hover, .nav > li:nth-child(3) > a:hover{
/*background:#dcbc86;*/
background:#205064;
}
.nav > li:hover > a{
color: #fff;
border-color:#32b2ac;
background: no-repeat 51% 66% #205064;
}
.nav li > ul li a:hover{
text-decoration:none;
}
/* Simple multilevel dropdown */
.nav > li > ul {
opacity: 0;
visibility: hidden;
position: absolute;
list-style: none;
top:128px;
width: 200px;
text-align: left;
margin-top:30px;
padding: 0px;
z-index: 99;
}
/* First level appear */
.nav > li:hover > ul {
opacity: 1;
visibility: visible;
margin-top: 0px;
}
/* Style for dropdown links */
.nav li > ul li{
position: relative;
}
.nav li > ul li a{
color:#888;
background-color:#FFF;
font-size:0.8em;
display: block;
padding:10px 10px;
text-transform:uppercase;
position:relative;
border-bottom:1px solid #DDD;
-moz-transition: all 0.2s linear;
-webkit-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
-ms-transition: all 0.2s linear;
}
.nav li > ul li a span.arrow{
width:15px;
height:10px;
position:absolute;
right:5px;
top:15px;
background:url(/web/images/arrow-before.png) no-repeat center;
}
.nav > li > ul li:hover a span.arrow{
background:url(/web/images/nav-arrow.png) no-repeat center
}
.nav > li > ul li:hover {
color:#FFF;
background:#205064;
-moz-transition: all 0.5s linear;
-webkit-transition: all 0.5s linear;
-o-transition: all 0.5s linear;
-ms-transition: all 0.5s linear;
}
.nav ul.dropdown2 {
color: #FFF;
}
.nav ul li:hover > a {
color:#FFF;
background:#205064;
}
/* Second and third dropdown level */
.nav > li > ul li ul {
opacity: 0;
visibility: hidden;
position: absolute;
list-style: none;
top:0px;
left: 200px;
width: 200px;
text-align: left;
padding: 0px;
margin-left: 30px;
}
.nav > li > ul li ul li:hover {
background-color:#FFF;
}
input#mobile_menu { display: none; }
.nav > li > ul li ul li ul {
background-color:#FFF;
}
.nav > li > ul li ul li ul li:hover {
color:#0572B8;
}
/* Second and third level appears */
.nav > li ul li:hover > ul {
opacity: 1;
visibility: visible;
margin-left: 0px;
}
/* Full width dropdown */
.nav > li > .fulldrop {
opacity: 0;
visibility: hidden;
position: absolute;
list-style: none;
top:118px;
left: 0px;
background-color: #0078b3;
width: 100%;
min-height: 100px;
text-align: left;
margin-top:30px;
padding: 0;
z-index: 99;
overflow: hidden;
}
/* Full dropdown appears */
.nav > li:hover .fulldrop {
opacity: 1;
visibility: visible;
margin-top: 0px;
}
.nav ul li:hover:after {
color: white;
}
/* coldrop based dropdown */
.nav .coldrop {
opacity: 0;
visibility: hidden;
position: absolute;
list-style: none;
top:118px;
background-color: #0078b3;
min-height: 100px;
text-align: left;
margin-top:30px;
padding: 0;
padding: 0 10px;
z-index: 99;
}
.nav > li:hover .coldrop {
opacity: 1;
visibility: visible;
margin-top: 0px;
}
.nav .coldrop .column {width: 130px;margin:0 9px;}
/* coldrop for full width dropdown */
.nav .column {
width: 14.1%;
float: left;
color:white;
margin: 0 0 0 2.2%;
}
.nav .column ul {
padding: 0;
margin: 0;
}
.nav .column ul li {
padding: 0;
list-style: none;
font-size: 11px;
}
.nav .column h3 {
font-size: 14px;
padding: 14px 0;
font-weight: 400;
margin: 5px 0 5px 0;
}
.nav .column ul li a {
display: block;
padding: 0 0 15px 0;
}
.nav > li > ul li ul, .nav li >ul li, .nav > li > .fulldrop, .nav > li > .coldrop, .nav > li > ul, .nav > li {
transition: all 0.1s ease-in-out;
-moz-transition: all 0.1s ease-in-out; /* Firefox 4 */
-webkit-transition: all 0.1s ease-in-out; /* Safari and Chrome */
-o-transition: all 0.1s ease-in-outs; /* Opera */
}
@media all and (max-width:1024px) {
.nav > li > ul {
width: 180px;
}
}
@media all and (max-width: 800px) {
.navigation {
float:none;
margin-bottom:10px;
}
@media only screen and (max-width: 959px) {
.nav > li > a{
padding:10px 12px;
}
@media only screen and (max-width:800px) {
.nav {
display: none;
}
label.mobile_menu span {
display: inline;
}
label.mobile_menu {
position: relative;
display: block;
width: 100%;
background-color:#205064;
padding: 10px 0;
border-bottom: 1px solid white;
}
.nav {
padding: 0;
}
.nav > li > a {
border-width:0;
}
.nav li {
width: 100%;
text-align: left;
margin-left: 0;
}
.nav > li {
border-right: none;
padding:5px 0px;
position: relative;
}
.nav > li > a {
display:block;
font-size:0.85em;
}
.nav li > ul li a span.arrow {
right:20px;
background: url(/web/images/nav-arrow2.png) no-repeat center;
}
.nav li ul, .nav li .fulldrop, .nav li .coldrop {
top:45px;
}
.nav > li {
background:none;
}
.nav li ul {
padding: 0;
}
.nav > li:hover > a {
background-color:#CACACA;
}
.nav > li > a {
background: no-repeat 97% 48%;
}
.nav > li:hover > a{
background: no-repeat 97% 48% #205064;
}
.nav .fulldrop, .nav .coldrop {
width:95%;
padding: 0 2.5%;
}
.nav li > ul li {
padding: 18px 0px;
}
.nav .column, .nav .coldrop .column {
width: 94%;
padding: 0 3%;
}
.nav > li > ul {
width: 100%;
}
.nav > li > ul li ul {
width: 100%;
top:36px;
left: 0;
margin-top: 30px;
z-index: 2;
}
.nav > li > ul > li:hover ul {
margin-top: 0;
}
#mobile_menu:checked+.nav {
display: block
}
label.mobile_menu:after {
position: absolute;
top:-2px;
right: 10px;
content: "\2261";
font-size: 30px;
color: white;
}
.nav > li > ul li ul li ul {
width: 100%;
top:43px;
left: 0px;
margin-left: 0;
margin-top: 30px;
}
.nav > li > ul > li ul li:hover ul{
margin-top: 0;
}
.nav > li > ul li{
padding:0px 0 0px 0%;
width:100%;
}
.nav > li > ul li ul {
margin-left:0;
}
.nav > li > ul li ul li{
padding: 5px 0 5px 0%;
width:100%;
}
.nav > li > ul li ul li ul li{
padding: 15px 0 15px 0%;
width:100%;
}
.nav ul li.dropdown:after {
left: 90%;
}
/* Disable animation on mobile device */
.nav > li > ul li ul, .nav li >ul li, .nav > li > .fulldrop, .nav > li > .coldrop, .nav > li > ul, .nav > li {
transition: none;
-moz-transition: none;
-webkit-transition: none;
-o-transition: none;
}
}
