@import url(//fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,400italic,700,700italic);

// Core variables and mixins
/*Core variables and mixins*/
@import "variables.less"; // Modify this for custom colors, font-sizes, etc
@import "mixins.less";
// template stylization
ul {list-style-type:none;}
*, a:focus {outline:none !important;}

#content{
  min-width: 980px;
}
.clearfix{
  overflow: hidden;
  ul{
    margin-left: 0;
  }
}
/*------ template stylization ------*/
body {
  min-width: 767px;
  color: #000;
  font-size: 13px;
  line-height: 19px;
  font-family: Tahoma, sans-serif;
  li {line-height: 19px;}
}
h1, h2, h3, h4, h5, h6 {
  margin:0;
  line-height: 1em;
  color: @headingsColor;
  text-rendering: optimizelegibility; 
  font-family: 'Open Sans', sans-serif;
  small {
    line-height: 1;
    color: @grayLight;
  }
}

h1 {
  font-size:26px;
  line-height:1.1em;
  color:@grayDark;  
  letter-spacing: -1px;
  font-weight: 300;
}
  
h2 {
  color: @black;
  font-size: 27px;
  padding: 39px 0 19px;
  letter-spacing: -1px;
  font-weight: 300;
  small{
    font-size: 14px;
  }
  }

h3 {
  color:@grayLight;
  font-size: 24px;
  font-weight:bold; 
  padding: 34px 0 29px;
}


h4{ 
  font-size: 16px;
  line-height: 18px;
  color:@black; 
  font-weight:bold; 
  padding:30px 0 18px;

  }

h6{font-weight:bold;color:#010101;font-size:13px;margin:0;padding:19px 0 2px}
h5{margin:0 0 10px;line-height:18px;font-size:13px }

code.prettyprint, pre.prettyprint {
    background:#f5f5f5 !important;
    border:1px solid #cecece !important;
    .border-radius(5px);
    padding: 10px !important;
    .box-shadow(0 1px 1px rgba(0,0,0,0.1))
}

.container-fluid{
  max-width: 1170px;
  margin: 0 auto;
}

// Buttons

.btn {
  background:#fafafa; 
  display:inline-block; 
  .border-radius(@radius);
  .box-shadow(@shadow);
  font-size:13px;
  line-height:1em;
  color:@grayDark;
  font-weight:bold;
  text-decoration: none;
  padding: 9px 16px 10px 16px;
  margin:0;
  .transition(none); }
 .top-indent {
  margin-top: 20px;
 }

  p{padding-bottom:9px;margin:0}

  .overfow{overflow:hidden}
  .img-indent{float:left;margin:13px 30px 27px 0}
  .img-indent1{margin:0;display:inline-block}
  .img-indent2{margin:30px 0 0 ;}

  figure.img-polaroid{
    text-align: center;
    display: block;
    margin-left: auto;
    margin-right: auto;
  }

  .img-container{
    display: block;
    text-align: center;
  }

  .link-1{text-decoration:underline;
  &:hover{text-decoration:none}

}
p strong{color:#010101;}


/*------ header ------- */
header{
  background:#fcfcfc;
  padding:14px 0 17px;
  h1{
    margin:2px 0 0 0px;
    a{
      color: #3a3a3a;
    }
  }   
  .brand{
    text-indent:-1000px;
    background:url(../img/logo-monster.jpg) no-repeat 0 0;
    .size(55px,375px);
    display:block;
  }
}

/*------ content ------- */
#content {
  background:url(../img/tail-content.gif);
  border-top:1px solid #e1e1e1;
  border-bottom:1px solid #d7d7d7;  
   padding-bottom:36px;
    .bg-content-top{background:url(../img/tail-content-top.gif) repeat-x 0 0 ;padding-top:44px}
  ul{list-style:none} 
  .square-list {
    list-style: disc;
  }
}
/*------ bs-docs-sidenav ------- */

#nav_container{
  background: @white;
  border-top: 1px solid #ccc;
  .border-radius(6px);
 .box-shadow(0 2px 1px 1px rgba(0,0,0,.1)); 
 padding-bottom: 18px;
}

#affect_all{
  padding: 2px 0 8px 0;
  float: none;
  text-align: center;
  color: @black;
  display: block;
  height: 12px;
  .border-radius(6px 6px 0 0);
  &:hover{
    color: @linkColor;
  }
  i{
    &:before{
      font-size: 18px;
    }
  }
  .close, .expand{
    position: relative;
    i{}
  }
  .close{
    display: none;
  }
  .close{
    [class*="-up"]{}
    [class*="-down"]{}
  }
  .expand{
    [class*="-up"]{}
    [class*="-down"]{}
  }
}

#nav_container{
  width: 270px;
}

.bs-docs-sidenav.affix, #nav_container.affix {
    top: 40px;
}

#content{
  .bs-docs-sidenav{
    li{
      a{
        width: 100%;
        color: #000000;
      }
    }
  }
}

.bs-docs-sidenav {
  // border-top:1px solid #ccc;
  width: 100%;
  margin:0;
  padding:0;
  background-color: @white;
 // .border-radius(6px);
 // .box-shadow(0 2px 1px 1px rgba(0,0,0,.1)); 
 >li{
  border-top:1px solid #dfdfdf;
  padding:0    
  }  
  li dt a:hover, li.current >a{    
    text-shadow:none;
    color:@black;
  }

  li{
    dt{
      overflow: hidden;
      position: relative;
      &:hover{
        background:#f5f5f5;
      }
      a{
        color: @black;
        display: block;
        width: inherit;

        &:before{
          font-family: 'FontAwesome';

        }
      }
      i{
        float: right;
        margin-right: 12px;
        font-size: 10px;
        font-weight: normal;
        color: @black;
        display: block;
        position: relative;
        z-index: 20;
        padding: 5px;
        top: 7px;
        cursor: pointer;
        &:before {          
          content: "\f067";
        }
      }
      a{
        float: left;
      }
    }
    &.act_item{
      dt{
        background:#f5f5f5;  
        a{
          &:before{
            /*color: @themeBlue;*/
          }
        }
      }
    }
    &.open_item{
      dt{      
        i{
          &:before {
            content: "\f068";
          }
        }
      }
    }
    &.current{
      .slide-down{
          dd{
            display: block;
          }
        } 
      }
    }

  .slide-down{
    dd{
      display: none;
    }
  }

  li.act_item.last{
    dl.slide-down{      
      // .border-radius(0 0 6px 6px);
    }
  }  
  li.act_item.first{
    dl.slide-down{
      // .border-radius(6px 6px 0 0);
    }
  }
 
  .slide-down{margin:0}
  .slide-down dd{margin:0}
 
  >li:first-child{border:none;}
  >li:hover{} 
  
  li dt a, >li> a{
    padding:9px 20px 11px 43px;
    display:block;
    .box-sizing(border-box); 
    margin:0;
    position:relative;
    font-size:13px; 
    color:#000;
    font-family: Tahoma, sans-serif;
    &:before{
      position: absolute;
      left: 14px;
      font-size: 16px;
      -webkit-font-smoothing: antialiased;
    } 
  }
  li.first dt{
    border-top:1px solid #dfdfdf;
    // .border-radius(6px 6px 0 0);
  }
  li.last dt{
    border-bottom:1px solid #dfdfdf;
    // .border-radius(0 0 6px 6px);
  }

  


  .list{
    margin:0;
    padding:8px 0 6px 20px ;
    li{
      padding: 0 20px 10px 20px;
       position: relative;
      a{
        
        i{
          position: absolute;
          left:0px; 
          top:0px;
          &:before {
            
            content: "\f0da";
            font-size: 12px;
            color: @black;
          }
        }
      }      
    }
    li.current, li:hover {
      a, i:before{
        color:@themeBlue !important;
        background:none;
        &:hover{
          color:@themeBlue;
        }    
      }      
    }    
      a{
        color:@grayDark;
        &:hover{
          color:@themeBlue;
          i:before{
            color:@themeBlue;
          }
        }
      } 
  }   
}

.select-menu_label {
display: inline-block;
padding-right: 6px;
position: relative;
top: 8px;
}

.select-menu_icon{
  border: 1px solid #dfdfdf;
  display: inline-block;
  background: #fff;
  padding: 6px 12px;
  cursor: pointer;
  position: relative;
  top: 8px;
  .box-shadow(0 1px 1px 1px rgba(0, 0, 0, 0.1));
  .border-radius(5px);
  b{
    display: inline-block;
    margin-right: 6px;
    font-weight: normal;
  }
  &:hover{
    background: #f5f5f5;
  }
}

.select-menu_list{
  display: none;
  position: absolute;
  top: 43px;
  right: 0;
  background: #f5f5f5;
  border: 1px solid #dfdfdf;
  .border-radius(5px);
  .box-shadow(0 1px 1px 1px rgba(0, 0, 0, 0.1));

}

.select-menu{
  position: relative;
  margin-left: 4px;

  ul{

    li{
      list-style: none;
      display: block;
      width: 90px;
      padding: 6px 12px;
      font-size: 12px;
      line-height: 20px;
      margin-bottom: 1px;
      
      &.active, &:hover{
        background: #fff;
        a{
          color: #df152b;
        }
      }
      a{
        display: block;
        overflow: hidden;
        clear: both;
      }
      span{
        display: block;
        float: left;
      }
      img{
        display: block;
        float: right;
        position: relative;
        top: 3px;
      }
      &:first-child {.border-radius(5px 5px 0 0);}
      &:last-child {.border-radius(0 0 5px 5px);}
    }
  }
}
li.item1 a:before,  h2.item1 i {color: #2f5c93;}
li.item2 a:before,  h2.item2 i  {color: #ef5829;}
li.item3 a:before,  h2.item3 i  {color: #31c7f3;} 
li.item4 a:before,  h2.item4 i  {color: #7fb945;} 
li.item5 a:before,  h2.item5 i  {color: #e18622;} 
li.item6 a:before,  h2.item6 i  {color: #b07da6;} 
li.item7 a:before,  h2.item7 i  {color: #1f76b8;} 
li.item8 a:before,  h2.item8 i  {color: #f3ca32;} 
li.item9 a:before,  h2.item9 i  {color: #b30801;} 
li.item10 a:before,  h2.item10 i  {color: #573d7d;} 
li.item11 a:before,  h2.item11 i  {color: #3fa8e2;} 



#content .bs-docs-sidenav li a{text-align: left;}
#content .bs-docs-sidenav li dt i.icon-sample{position: absolute; top: 6px; right: 0; }

/*------ box-conten ------- */
.box-content{
  border-top:1px solid #ccc;
  background-color: @white;
 .border-radius(6px);
 .box-shadow(0 2px 1px 1px rgba(0,0,0,.1)); 
    section{
      padding: 0 33px 25px;
      border-bottom:1px solid #ccc
    } 
  }

  #mod_table{
    .module{
      .box-sizing(border-box);
      padding: 10px;
    }
    .module:nth-child(even){
      background: #f5f5f5;
    }
  }

  .files_structure{
    li{
      i{
        color: #999999;
      }
    }
  }

#section-2{
 padding:7px 48px 71px 33px;

}

.img-paraloid{text-align:center;padding:5px;background:#f5f5f5;border:1px solid #cecece;.border-radius(5px);.box-shadow(0 1px 1px rgba(0,0,0,0.1)) }
span.img-paraloid{display:inline-block; margin: 10px 0;}
.pull-left.img-paraloid{ margin-top: 0; margin-right: 25px;}
.list-1{
  margin:10px 0 0 ;
  list-style:decimal;
     padding-left:20px;
     li{line-height:19px;padding-bottom:6px;}
     strong{color:#010101;}
  }
.box-info,
.box-error,
.box-notification,
.box-success{
  position:relative;
  margin: 10px 0 19px 0;
  padding:15px 30px 15px 74px;
  .box-sizing(border-box); 
  min-height:74px;
  .box-shadow(0px 0px 3px rgba(0, 0, 0, .4)); 
  .border-radius(5px);
  span{
    font-size:15px;
    line-height:20px;
    color:@white;
    vertical-align:middle;
    display:table-cell;
    height:40px
  }

  &:before{position:absolute;top:15px;left:15px;.size(44px, 43px);content:""}
  a{
    color: #fff;
    text-decoration: underline;
    &:hover{ text-decoration: none;}
  }
}

.box-info{#gradient >.vertical(#3383c8,#2b74b4);
&:before{background:url(../img/icon-1.png) no-repeat 0 0;}
}

.box-error{#gradient >.vertical(#c93737,#c93737);
padding:26px 30px 25px 74px;
&:before{background:url(../img/icon-2.png) no-repeat 0 0;top:25px}
}

.box-notification{
  #gradient >.vertical(#ffa800,#f8970f);
&:before{background:url(../img/icon-3.png) no-repeat 0 0;}
}

.box-success{
  #gradient >.vertical(#a8d149,#97ba0e);
&:before{
  content: "\f00c";
  color: #fff;
  font-size: 44px;
  font-family: FontAwesome;
  margin-top: 10px;
}
}

.btnDisabled{position:absolute;top:0;left:0;
width:100%;height:100%;
span{background:url(../img/btn-size.png) no-repeat 50% 50%;
.square(45px);
display:block;}

}

 .magnifier {
  opacity: 1;
  position: relative;
  background:url(../img/tail-lightbox-hover.png);
  height: auto;
  display:block;
  .transition(all 0.3s ease)
}
 .magnifier:hover {
  

}
 .magnifier:after {
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  opacity: 0;
  left: 0;
  top: 0;
  background:url(../img/btn-size.png) no-repeat 50% 50%;
.transition(all 0.3s ease)
}
 .magnifier:hover:after {
  opacity: 1;
}



.iframe {padding:13px 0 0 82px}

footer{text-align:center;font-size:13px;line-height:20px;background:@white;padding:30px 0 40px}

.list-2{
  margin-bottom: 15px;
  li {margin-top: 5px;
    &:first-child {margin-top: 0;}
  }
}


@media (max-width: 1200px) {
  #content{
    #nav_container{
      width: 220px;
    }
  }
}

.flexslider{
  margin-top: 30px !important;
  overflow: visible;
}

.flex-control-nav li{
  text-indent: -1000px;
}

.margbot{ margin-bottom: 30px;}

.pretty_image{
  position: relative;
  i{
    display: block;
    position: absolute;
    top: -100px;
    left: 50%;
    width: 30px;
    height: 30px;
    font-size: 30px;
    margin-left: -15px;
    opacity: 0;
    -webkit-transition:all 0.5s ease; -moz-transition:all 0.5s ease; -o-transition:all 0.5s ease; transition:all 0.5s ease;
    color: #0179c6;
  }
  &:hover i{
    top: 40%;
    opacity: 0.9;
  }
}

.indent_top{
  padding-top: 8px;
}
/*======================= SCROLL TO TOP =======================*/

#back-top {position: fixed;  bottom: 20px; right: 20px; z-index: 99}

#back-top a {
  width: 51px;
  display: block;
  /* transition */
  -webkit-transition: 0.1s;
  -moz-transition: 0.1s;
  transition: 0.1s;
  color:#666666;
  background: #fff;
  text-align: center;
  border: 1px solid #dfdfdf;
  height: 51px;
  &:hover{
    background: #f5f5f5;
    }
  i{
    line-height: 51px;
    font-size: 27px;
  }
}


/*======================= MODAL =======================*/

.modal_bg{
  position: fixed;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, .4);
  z-index: 997;
  left: 0;
  top: 0;
  display: none;
}

.modal{
  position: fixed;
  width: 320px;
  margin-left: -160px;
  left: 50%;
  top: 150px;
  background: #fff;
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, .4);
  border-radius:8px;
  padding: 20px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  z-index: 998;
  display: none;
  h3{
    padding-top: 0px;
    padding-bottom: 20px;
    color: #000;
  }  
}

.modal_remove{
  font-size: 19px;
  cursor: pointer;
  padding: 2px;
}

#modal_languages{
  li{
    a{
      padding-left: 10px;
      padding-right: 10px;
      &:hover{
        background: #f5f5f5;
      }
    }
    img{
      float: right;
      position: relative;
      top: 2px;
    }
  }
}
/************/
/*.li.act_item  a.special {
  color: #fb0000 !important ;
  font-weight: bold;
}*/
.quick-start-guide {
  .transition(0.1s); 
  padding: 0; 
  .box-shadow(0px 0px 2px rgba(0, 0, 0, .4)); 
}
.quick-start-guide img {
  .border-radius(5px);
}
.quick-start-guide:hover {
  .box-shadow(0px 0px 5px rgba(0, 0, 0, .4)); 
  .transition(0.1s);
}
ol li {margin-top: 5px;
  &:first-child {margin: 0;}
  figure.img-paraloid {margin-bottom: 30px;}
}

/*search*/
#search {
  text-align:left;
  margin:20px 0 5px 0;
}
  #search input[type=text] {
    outline:none;
    .box-shadow(inset 0px 0px 10px 0px rgba(0, 0, 0, 0.2));
    .box-sizing(border-box);
    float:left;
    .border-radius(4px);
    padding: 8px 10px 7px 10px;
    font-size:12px;
    line-height:15px;
    font-family:Arial;
    border:1px #ccc solid;
    width:300px;
    height:33px;
    background: #fff;
    color: #000;
  }
    #search a {
      display:inline-block;
      .box-shadow(0px 0px 5px 0px rgba(0, 0, 0, 0.2));
      .border-radius(4px);
      padding: 6px 15px;
      font-size:12px;
      font-family:Arial;
      border:1px #ccc solid;
      background: #f5f5f5;
      color: #000;
      margin-top:0px;
      margin-left:10px;
      cursor:pointer;
    }
    #search a:hover {background: #efefef;}
.search-engine .attention {background: url(../img/attention.png) no-repeat scroll 12px 50% #FDF7DF; border:1px solid #E3C555; padding:12px 24px 12px 60px; font-weight:bold; margin-bottom:20px;}

.search-engine .example {
    color: #CCCCCC;
    display: inline-block;
    font-size: 12px;
    font-style: italic;
    padding: 5px 0;
}

ul.square-list {
    list-style-position: outside;
    list-style-type: square;
    margin: 0 0 1.5em 1.5em;
}
ul.square-list li {list-style:square;}

/*newsletter form*/
#subscribe-form {
    width: 300px;
  position:relative;
}
#subscribe-form fieldset {border:none; margin:0; padding:0;
}
#subscribe-form label {
   position:relative; /*!*/
    display:block;
  min-height:43px;
}
#subscribe-form input, #subscribe-form textarea {
    outline:none;
    .box-shadow(inset 0px 0px 10px 0px rgba(0, 0, 0, 0.2));
  .box-sizing(border-box);
  float:left;
    .border-radius(4px);
    padding: 8px 10px 7px 10px;
    font-size:12px;
  line-height:15px;
    font-family:Arial;
    border:1px #ccc solid;
    width:300px;
  height:33px;
    background: #fff;
    color: #000;
}

#subscribe-form .error {
    height:0;
    overflow:hidden;
    font:10px/20px Arial;
    .transition(height .3s linear);
    position:absolute;
    right:3px;
    top:0;
}
#subscribe-form .success {
    line-height:48px;
    position:absolute;
    overflow:hidden;
    padding: 14px 0;
    left:0;
    top:0;    
    display: none;
  .box-sizing(border-box);
  .box-shadow(inset 0px 0px 10px 0px rgba(0, 0, 0, 0.2));
  .border-radius(4px);
    background:#fff;
  border:1px #ccc solid;
    z-index:10;
    width:100%;
  text-align:center;
}
#subscribe-form .btns a {
    display:inline-block;
  .box-shadow(0px 0px 5px 0px rgba(0, 0, 0, 0.2));
    .border-radius(4px);
    padding: 6px 15px;
    font-size:12px;
    font-family:Arial;
    border:1px #ccc solid;
    background: #f5f5f5;
    color: #000;
  margin-top:0px;
}
   #subscribe-form .btns a:hover {background: #efefef;}

#subscribe-form label.invalid .error {
    height: 19px;
}
/*underconstruction*/

.counter_pos {margin:70px auto; width:545px; border:1px solid #CCC; background:#EEE; padding:10px; border-radius:5px}
.counter_pos1 {margin:20px auto; width:525px; }
.cntSeparator {font-size: 50px;margin: 24px 0px;color: #000; font-family:Georgia, "Times New Roman", Times, serif;}
.counter_desc{ position:relative; overflow:hidden; font-size:16px; font-weight:bold; line-height:1.2em; padding:5px 0 0 15px;}
.counter_desc div{ width:104px; text-align:center; float:left;}
.counter_desc .days {margin-left:10px;}
.counter_desc .hours {margin-left:45px;}
.counter_desc .minutes {margin-left:23px;}
.counter_desc .seconds {margin-left:12px;}
/***/


/* Bootstrap code examples
-------------------------------------------------- */

/* Base class */
.bs-docs-example {
  position: relative;
  margin: 15px 0;
  padding: 39px 19px 14px;
  *padding-top: 19px;
  background-color: #fff;
  border: 1px solid #ddd;
  -webkit-border-radius: 4px;
     -moz-border-radius: 4px;
          border-radius: 4px;
}

/* Echo out a label for the example */
.bs-docs-example:after {
  content: "Example";
  position: absolute;
  top: -1px;
  left: -1px;
  padding: 3px 7px;
  font-size: 12px;
  font-weight: bold;
  background-color: #f5f5f5;
  border: 1px solid #ddd;
  color: #9da0a4;
  -webkit-border-radius: 4px 0 4px 0;
     -moz-border-radius: 4px 0 4px 0;
          border-radius: 4px 0 4px 0;
}

/* Remove spacing between an example and it's code */
.bs-docs-example + .prettyprint {
  margin-top: -20px;
  padding-top: 15px;
}

/*======================= MODAL =======================*/
.language-modal .modal_bg{
position: fixed;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, .4);
z-index: 997;
left: 0;
top: 0;
display: none;
}

.language-modal .modal{
position: fixed;
width: 320px;
margin-left: -160px;
left: 50%;
top: 150px;
background: #fff;
box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, .4);
border-radius:8px;
padding: 20px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
z-index: 998;
display: none;
h3{
padding-top: 0px;
padding-bottom: 20px;
color: #000;
}
}

.language-modal  .modal_remove{
font-size: 19px;
cursor: pointer;
padding: 2px;
}

#modal_languages{
li{
a{
padding-left: 10px;
padding-right: 10px;
&:hover{
background: #f5f5f5;
}
}
img{
float: right;
position: relative;
top: 2px;
}
}
}