/* self clearing floats */
.group:after,.lastUnit:after {clear:both;display:block;visibility:hidden;overflow:hidden;height:0 !important;line-height:0;font-size:xx-large;content:" x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x ";}
.group{*zoom:1;}

/*
============================================
    THE GOODS
============================================
*/

.navheader {
 
}
.slide-trigger {
  
  display: none; /* need this */
  border: 1px solid #CCC;
  cursor: pointer;
  padding:13px 10px;
  font-weight:lighter;
  font-size:16px;

}

.slide-trigger span {
  background-image: url("dropdown-arrows.png");
  background-position: 0 -14px;
  display: block;
  float: right;
  margin-top: 2px;
  height: 14px;
  width: 32px;
}

.navigation {
  max-width: none;
 
  padding: 0;
}
.navigation li {
	border-bottom:1px dotted #ccc;
  
}
.navigation li a {
 display:block; font-size:14px;line-height:20px; color:#4a4a4a; padding:13px 10px; background:url(right-arrow1.png) no-repeat right center; 
  
}

.navigation li a.current{color:#000;background:url(right-arrow2.png) no-repeat right center;  }
.navigation li a:hover { color:#000;  background:url(right-arrow2.png) no-repeat right center; }


/*
============================================
    RESPONSIVENESS
============================================
*/
@media only screen and (max-width: 980px) { 
.navigation li a { font-size:12px;} 

}


@media only screen and (max-width: 568px) {
	
	.navigation li a { font-size:14px;}
  .slide-trigger { display: block;}
    .no-js .slide-trigger { display: none; }
  .navigation { display: none; }
    .no-js .navigation { display: block; }
  .navigation { }
  .navigation li { float: none; }
  .navigation li a { border:none;  margin-bottom:0;}
  .navigation li a.current{ border:none; }

}