// BODY
// ---------
*{
  -webkit-box-sizing: border-box;
   -khtml-box-sizing: border-box;
     -moz-box-sizing: border-box;
      -ms-box-sizing: border-box;
          box-sizing: border-box;
}
html, body {
  height: 100%;
}

body {
  background: #fff;
  margin: 0;
  font-family: 'Helvetica Neue', Helvetica, 'Arial CE', Arial, sans-serif;
  font-size: 14px;
  color:#333;
  margin:0 auto 0;
  padding: 20px 0 0 0;
  width:1300px;
}
.c{
  *zoom: 1;
  &:before,
  &:after {
    display: table;
    content: "";
  }
  &:after {
    clear: both;
  }
}


h2{
  margin:35px 0 50px 0;
  font-size:21px;
  font-weight:bold;
}
.list{
  margin:0 auto 0;
  padding:0 0 30px 0;
  width:1300px;
  font-size:0px;

  &> div{
    display:inline-block;
    margin:0 0 20px 0;
    padding:6px;
    width:130px;
    font-size:11px;
    line-height:12px;
    vertical-align:top;
    text-align:center;
    text-decoration:none;
  }
  .coord-top{
    position:relative;

    &:before{
      content: attr(data-coord-before);
      position:absolute;
      left:0;
      top:-30px;
      width:100%;
      font-size:11px;
      line-height:12px;
      font-weight:normal;
      color:#b9b7b9;
      text-align:center;
    }
  }
  .coord-left{
    position:relative;

    &:after{
      content: attr(data-coord-after);
      position:absolute;
      left:-30px;
      top:50%;
      margin:-6px 0 0 0;
      font-size:11px;
      line-height:12px;
      font-weight:normal;
      color:#b9b7b9;
      text-align:center;
    }
  }
  strong{
    display:block;
    margin:4px 0 4px 0;
    line-height:1.4em;
    font-weight:normal;
  }
}
.list-fonts-size{
  &> div{
    width:auto;
  }
}



.glyphicons{
  font-size:24px;
  color:#1e1e1e;
}