/* pulldown background-color:color5  */
.pulldown {
  overflow: hidden;
  background-color: darkBlue;
  margin-top: 3px;
  margin-bottom: 3px;
  position: relative;
  border-radius: 10px;
}

/* pulldown background-color:color3  */
.pulldownHeader {
  font-size: 18px; 
  color: White; 
  background-color: DodgerBlue; 
  text-align: left;
  padding: 2px 35px 2px 10px; 
  margin-bottom: 0px;
  border-radius: 10px;
}  

.pulldown a.icon {
    float:    right;
    position: absolute;
	display:  block;
    right:    15px;
}

.pulldown a.top2  { top:  2px; }
.pulldown a.top10 { top:  10px; }
 
.pulldown .login { display: none; }
  
/* Menu bars and Up, down, left and right arrows*/

.pulldown1bar {
  width: 35px;
  height: 5px;
  background-color: white;
  margin-top: 5px;
  margin-bottom: 2px;
}

.arrow {
  border: solid white;
  border-width: 0 5px 5px 0;
  display: inline-block;
  padding: 5px;
}

.right {
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
}

.left {
  transform: rotate(135deg);
  -webkit-transform: rotate(135deg);
}

.up {
  transform: rotate(-135deg);
  -webkit-transform: rotate(-135deg);
}

.down {
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
}

.show-header     { 
    display:inline-block; 
	width:100%;
    padding: 2px 10px 2px 10px;	
}

.show-body     { 
    display:inline-block; 
	width:100%;
    padding: 10px 10px 10px 10px;	
}
.no-show-body  { display:none; }

/* Responsive code */
@media screen and (max-width: 10px) {
  .pulldown.isUp {
	  position: relative;
  }

  .pulldown.isUp a.login {
    display: block;
	padding: 10px 5px;
  }
  
  .pulldown.isUp a.icon {
    float: right;
    position: absolute;
	display: block;
    right: 20px;
    top: 10px;
  }
  
}