// 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;
}

/*------ template stylization ------*/
body {
	min-width: 767px;
	color: #666666;
}
h1, h2, h3, h4, h5, h6 {
  margin:0;
  line-height: 1em;
  color: @headingsColor;
  text-rendering: optimizelegibility; 
  small {
    font-weight: normal;
    line-height: 1;
    color: @grayLight;
  }
}

h1 {
	font-size:36px;
	line-height:1.1em;
	color:@grayDark;  
}
	
h2 {
  color: @black;
  font-size: 27px;
  font-weight: normal;
  padding: 39px 0 19px;
  small{
    font-size: 14px;
  }
	}

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


h4{	
  font-size: 16px;
  line-height: 18px;
	color:@black;	
	font-weight:normal;	
	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;
}
ol{
  list-style-position: inside;
}
// 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 67px;
    a{
      color: #3a3a3a;
    }
  }	  
	.brand{text-indent:-1000px;
	background:url(../img/logo-monster.jpg) no-repeat 0 0;.size(48px,274px);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}	
}

/*------ 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: @gray;
  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: inherit;
      }
    }
  }
}

.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:#3a3a3a;
  }

  li{
    dt{
      overflow: hidden;
      position: relative;
      &:hover{
        background:#f5f5f5;
      }
      a{
        font-family: @sansFontFamily;
        display: block;
        width: inherit;
        &:before{
          font-family: 'FontAwesome';
        }
      }
      i{
        float: right;
        margin-right: 12px;
        font-size: 10px;
        font-weight: normal;
        color: #999999;
        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:10px 0 10px 43px;
    display:block;
    font-weight:bold;
    margin:0;
	  position:relative;
	  font-size:13px;	
	  color:#3a3a3a;
	  &:before{
      position: absolute;
      left: 14px;
      font-size: 20px;
      -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);
  }

  // li.item1 dt a:before {background:url(../img/nav-icon1.png) no-repeat 0 0;.size(21px, 30px)}
  // li.item2 a:before {background:url(../img/nav-icon2.png) no-repeat 0 0;.size(21px, 25px)}
  // li.item3 a:before {background:url(../img/nav-icon3.png) no-repeat 0 0;.size(21px, 25px)} 
  // li.item4 a:before {background:url(../img/nav-icon4.png) no-repeat 0 0;.size(21px, 28px)} 
  // li.item5 a:before {background:url(../img/nav-icon5.png) no-repeat 0 0;.size(18px, 28px)} 
  // li.item6 a:before {background:url(../img/nav-icon6.png) no-repeat 0 0;.size(17px, 30px)} 
  // li.item7 a:before {background:url(../img/nav-icon7.png) no-repeat 0 0;.size(21px, 25px)} 
  // li.item8 a:before {background:url(../img/nav-icon8.png) no-repeat 0 0;.size(24px, 25px)} 
  // li.item9 a:before {background:url(../img/nav-icon9.png) no-repeat 0 0;.size(22px, 25px)} 
  // li.item10 a:before {background:url(../img/nav-icon10.png) no-repeat 0 0;.size(18px, 25px)} 


  .list{
    margin:0;
    padding:8px 0 6px 20px ;
	  li{
      padding: 0 20px 10px 7px;
      a{
        i{
          margin-right: 8px;
          &:before {
            content: "\f0da";
            font-size: 12px;
            color: #999999;
          }
        }
      }      
    }
	  li.current {
      a, i:before{
        color:@themeBlue;
        background:none;
        &:hover{
          color:#000;
        }    
      }      
    }	   
    	a{
        color:@grayDark;
    	  &:hover{
          color:#000;
          i:before{
            color:#000;
          }
        }
    	} 
	}   
}
#content .bs-docs-sidenav li a{text-align: left;}
#content .bs-docs-sidenav li dt i.icon-sample{position: absolute; top: 8px; 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:18px;padding-bottom:6px;}
	   strong{color:#010101;}
	}
.box-info,
.box-error,
.box-notification,
.box-success{position:relative;
margin-bottom:18px;
padding:15px 30px 15px 74px;
.box-sizing(border-box); 
min-height:74px;
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:""}

}

.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;
}


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

.flexslider{
  margin-top: 30px !important;
}
/*======================= 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;
  }
}