#navigation {
   display: block;
   width: 100%;
   height: 40px;
   background-color: #0181C0;
}

#navigation .campaigns,
#navigation .register,
#navigation .settings,
#navigation .login,
#navigation .logout,
#navigation .traffic,
#navigation .campaigns-business {
   display: none;
}

#navigation .register {
   background-color: #f26825;
}

#navigation .login {
   background-color: #005F8C;
}


.al0 #navigation .register,
.al0 #navigation .login,
.al0 #navigation .payment {
   display: block;
}

.al0 #navigation .traffic,
.al0 #navigation .keywords,
.al1 #navigation .traffic,
.al1 #navigation .campaigns,
.al1 #navigation .keywords,
.al2 #navigation .campaigns {
   color: #CCCCCC;
}

.al1 #navigation,
.al2 #navigation,
.al3 #navigation,
.al4 #navigation,
.al100 #navigation {
   display: block;
}

.al1 #navigation .logout,
.al2 #navigation .logout,
.al3 #navigation .logout,
.al4 #navigation .logout,
.al100 #navigation .logout,
.al1 #navigation .settings,
.al2 #navigation .settings,
.al3 #navigation .settings,
.al4 #navigation .settings,
.al100 #navigation .settings,
.al4 #navigation .campaigns,
.al3 #navigation .campaigns-business,
.al100 #navigation .campaigns,
.al1 #navigation .payment,
.al2 #navigation .payment,
.al3 #navigation .payment,
.al4 #navigation .payment,
.al4 #navigation .traffic,
.al100 #navigation .payment {
   display: block;
}

.al5 #navigation .keywords,
.al5 #navigation .traffic,
.al5 #navigation .history-caption,
.al5 #navigation .history-item {
   display: none;
}

.al0 #navigation .register,
.al5 #navigation .login,
.al5 #navigation .register {
   display: block;
}


#navigation ul {
   margin: 0;
   padding: 0;
}

#navigation ul li {
   display: block;
   float: left;
   padding: 9px;
   background-color: #0181C0;
   color: #FFFFFF;
   cursor: pointer;
}

#navigation ul li.disabled {
   color: #999999;
}

#navigation ul li ul {
   display: none;
   position: absolute;
   box-shadow: 0px 3px 5px #808080;
   -moz-box-shadow: 0px 3px 5px #808080;
   z-index: 20;
}

#navigation ul.vertical li.title {
   cursor: default;
   color: #BCF5FF;
   padding: 5px;
   text-align: left;
   border-bottom: 1px solid #FFFFFF;
}

#navigation ul.vertical li.title:hover {
   background-color: #0095DD;
}

#navigation ul.vertical li {
   float: none;
   clear: both;
   background-color: #0095DD;
}

#navigation ul.vertical li:hover {
   background-color: #00ADFF;
}

#navigation .help,
#navigation .print,
#navigation .login,
#navigation .register,
#navigation .logout,
#navigation .settings,
#navigation .payment {
   float: right;
}


#navigation .narrow-view .print,
#navigation .narrow-view .login,
#navigation .narrow-view .register,
#navigation .narrow-view .logout,
#navigation .narrow-view .settings,
#navigation .narrow-view .payment {
   float: inherit;
}

body .broad-view,
body .narrow-view {
   display: none;
}

#navigation .narrow-view {
  display: none;
}

#navigation .broad-view {
   display: block;
}

@media (max-width: 500px){
  #navigation .broad-view {
    display: none;
  }

  #navigation .narrow-view {
    display: block;
  }
}