/*****LESS*****/
.rounded(@radius:5px){
  -webkit-border-radius:@radius;
  -moz-border-radius:@radius;
  border-radius:@radius;
}
.boxShadow(@args){
  -webkit-box-shadow:~"@{args}";
  -moz-box-shadow:~"@{args}";
  box-shadow:~"@{args}";
}
.gradient(@start:#fff,@end:#000) {
  background-color: @start;
	background:-webkit-gradient(linear, left top, left bottom, from(@start), to(@end));
	background:-webkit-linear-gradient(top, @start, @end);
	background:-moz-linear-gradient(top, @start, @end);
	background:-ms-linear-gradient(top, @start, @end);
	background:-o-linear-gradient(top, @start, @end);
	background:linear-gradient(top, @start, @end);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorStr="@{start}", EndColorStr="@{end}");
}
.textShadow(@args){
  -webkit-text-shadow:~"@{args}";
  -moz-text-shadow:~"@{args}";
  text-shadow:~"@{args}";
}
/**************/
html,body{
  background:#333;
}
.content{
  background:#fff;
  .rounded(1em);
  .boxShadow("0 20px 10px -15px rgba(0,0,0,.8)");
  margin:0 auto;
  padding:5px;
  width:70%;
  h1{
    font:bold 21px/1.5em sans-serif;
    margin:.5em 0;
    padding:0;
    text-align:center;
    .textShadow("0 1px 1px rgba(0,0,0,.5)");
    text-transform:uppercase;
  }
}
#menu{
  .gradient(#ddd,#999);
  .rounded;
  .boxShadow("0 10px 6px -6px rgba(0,0,0,.7)");
  display:inline-block;
  margin:10px 0 0;
  padding:0;
  position:relative;
  width:100%;
  z-index:900;
  ul{
    float:right;
    list-style:none;
    margin:0;
    padding:0;
    position:relative;
    right:50%;
    li{
      float:left;
      left:50%;
      margin:0;
      padding:0;
      position:relative;
      a{
        background:transparent;
        border-left:1px solid #888;
        border-right:1px solid #eee;
        color:#333;
        display:block;
        font:12px/1.5em "Verdana",sans-serif;
        margin:0;
        padding:5px 20px;
        text-decoration:none;
        .textShadow("0 1px 0 rgba(255,255,255,.7)");
        &.dropdown:after{
          content:"\25BC";
          padding-left:5px;
        }
        &.dropright:after{
          content:"\25BA";
          padding-left:5px;
        }
      }
      &:first-child{
        border-left:1px solid #eee;
      }
      &:last-child{
        border-right:1px solid #888;
      }
      &.active{
        a{
          .gradient(#fa6,#fe0);
          color:#000;
          .textShadow("0 1px 0 rgba(255,255,255,.5)");
        }
      }
      &:hover{
        &>a{
          .gradient(#111,#555);
          color:#fff;
          .textShadow("0 1px 0 rgba(0,0,0,.7)");
        }
        &>ul{
          display:block;
        }
      }
    }
    ul{
      .boxShadow("0 0 10px rgba(0,0,0,.70)");
      display:none;
      left:0;
      position:absolute;
      right:auto;
      text-align:left;
      width:140px;
      li{
        border:0 !important;
        left:0;
        width:100%;
        a{
          .gradient(#ddd,#999);
          border:0 !important;
          margin:0;
          padding:5px;
        }
        &:hover{
          &>ul{
            display:block;
          }
        }
      }
      ul{
        display:none;
        position:absolute;
        left:140px;
        top:0;
      }
    }
  }
}