@charset "utf-8";
/* CSS Document */
 @import url('http://fonts.googleapis.com/css?family=Source+Code+Pro');


nav {
  width : 240px;
  float : left;
  -webkit-transition : 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) all;
  -moz-transition : 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) all;

 }



label {
  display     : inline-block;
  margin-left : auto;
  width       : 50px;
  padding     : 0px 0px 0px 0px;
  background-color: rgba(100,100,100,.3);
  font-size : 20px;
  color : #fff;
  text-align : center;
  cursor : pointer;
  background:#0F0;
}

li {
  list-style-type : none;
  border-top    : 1px solid #FFF;
  border-bottom : 1px solid #ddd;
  background-color: #f4f5f6;
  background-size : 200% 100%;
  background-position : 90% 0px;
  -webkit-transition : 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) all;
  -moz-transition : 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) all;
  margin-left:-40px !important; border:2px solid #000;
   

}

a {
  display    : block;
  padding    : 15px 4px 6px 18px;
  color      : #000;
  text-align : center;
  font-family: Swis721 Cn BT;
  text-decoration: none;
  -webkit-transition : color .1s;
  -moz-transition : color .1s;
  height:21px;
}

a:hover {
  color : #fff;
  -webkit-transition : color .1s;
  -moz-transition : color .1s;
  font-weight:bold;
}

li:nth-child(1) {
  border-top : none;
    background-image : -webkit-linear-gradient(left, #000 0%, #327f9d 50%, #f1f2f3 0%);
  background-image : -moz-linear-gradient(left, #000 0%, #ccc 50%, #f1f2f3 0%);
}

li:nth-child(2) {
  background-image : -webkit-linear-gradient(left, #000 0%, #327f9d 50%, #f1f2f3 0%);
  background-image : -moz-linear-gradient(left, #000 0%, #ccc 50%, #f1f2f3 0%);
}

li:nth-child(3) {
   background-image : -webkit-linear-gradient(left, #000 0%, #327f9d 50%, #f1f2f3 0%);
  background-image : -moz-linear-gradient(left, #000 0%, #ccc 50%, #f1f2f3 0%);
}

li:nth-child(4) {
  background-image : -webkit-linear-gradient(left, #000 0%, #327f9d 50%, #f1f2f3 0%);
  background-image : -moz-linear-gradient(left, #000 0%, #ccc 50%, #f1f2f3 0%);
}

li:nth-child(5) {
  background-image : -webkit-linear-gradient(left, #000 0%, #327f9d 50%, #f1f2f3 0%);
  background-image : -moz-linear-gradient(left, #000 0%, #ccc 50%, #f1f2f3 0%);
}

li:nth-child(6) {
  background-image : -webkit-linear-gradient(left, #000 0%, #327f9d 50%, #f1f2f3 0%);
  background-image : -moz-linear-gradient(left, #000 0%, #ccc 50%, #f1f2f3 0%);
  border-bottom : none;
}


li:hover {
  -webkit-transition : 0.3s cubic-bezier(0.175, 0.285, 0.32,1.0) all;
  -moz-transition : 0.3s cubic-bezier(0.175, 0.285, 0.32,1.0) all;
  background-position : 0% 0%;
}

#toggle:checked ~ nav {
  margin-left:  -240px;
  -webkit-transition : 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) all;
  -moz-transition : 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) all;
}