@import "./mixins/variables";
@import "./mixins/mixins";


//.mdlayout-out {
//  height: 100%;
//  width: 100%;
//  background-color: #f2f2f2;
//  background-image: -moz-linear-gradient(top,#dff2f3 0,#dcecf0 50%,#dde4eb 100%);
//  background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0%,#dff2f3),color-stop(50%,#dcecf0),color-stop(100%,#dde4eb));
//  background-image: -webkit-linear-gradient(top,#dff2f3 0,#dcecf0 50%,#dde4eb 100%);
//  background-image: -ms-linear-gradient(top,#dff2f3 0,#dcecf0 50%,#dde4eb 100%);
//  background-image: linear-gradient(to bottom,#dff2f3 0,#dcecf0 50%,#dde4eb 100%);
//  background-image: -moz-linear-gradient(top,#2da9b1 0,#178299 50%,#1a4c7d 100%);
//  background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0%,#2da9b1),color-stop(50%,#178299),color-stop(100%,#1a4c7d));
//  background-image: -webkit-linear-gradient(top,#2da9b1 0,#178299 50%,#1a4c7d 100%);
//  background-image: -ms-linear-gradient(top,#2da9b1 0,#178299 50%,#1a4c7d 100%);
//  background-image: linear-gradient(to bottom,#2da9b1 0,#178299 50%,#1a4c7d 100%);
//}

.u-mdlayout {
  position:relative;
  //max-width: 1280px;
  height: 100%;
  width:100%;
  overflow:hidden;
  margin: 0 auto;
  box-shadow: 0 0 24px rgba(0,0,0,0.15);
  background-color: rgba(255,255,255,1);

}


.u-mdlayout-master {
  float: left;
  height:100%;
  width: 200px;
  border-right: 1px solid #dddddd;
  background: none repeat scroll 0 0 #f7f7f7;
  box-shadow: 1px 0 10px rgba(0,0,0,0.15);
  -webkit-box-shadow: 1px 0 10px rgba(0,0,0,0.15);
  -moz-box-shadow: 1px 0 10px rgba(0,0,0,0.15);
  border-right: 1px solid rgba(0,0,0,0.15);
  background-clip: padding-box;
  -webkit-background-clip: padding-box;
  -ms-background-clip: padding-box;
  -moz-background-clip: padding-box;
  z-index: 5;
  transition:all 300ms;
  box-sizing:border-box;
  &.u-mdlayout-page{
    background-color: #F2F2F2;
  }
}

.u-mdlayout-master .u-mdlayout-page-section {
  width: 199px;
}

.u-mdlayout-detail {
  height: 100%;
  background: #F2F9FA;
  overflow: hidden;
  position: relative;
  z-index: 1;
  box-sizing:border-box;
}

.u-mdlayout-page {
  position:absolute;
  background-color: #F2F9FA;
  height: 100%;
  width:100%;
  transition:all 300ms;
  &.let-ie9{
    display: none;
  }

  &.current{
    z-index: 0;
  }
  &.current.let-ie9{
    display:block;
  }
  z-index: -1;
}


.u-mdlayout-page-header {
  height: 3rem;
  height: 48px \9;
  border-bottom: 1px solid #cccccc;
  background: #fff;
  position: relative;
  box-sizing:border-box;
}

.u-mdlayout-page-header label {
  line-height: 3rem;
  line-height: 48px \9;
  width: 100%;
  text-align: center;
  display: inline-block;
}

.u-mdlayout-page-section {
  background: #fff;
  padding: 0px;
  top: 3rem;
  top: 48px \9;
  position: absolute;
  left: 0;
  bottom: 3rem;
  bottom: 48px \9;
  overflow: auto;
  height: auto;
  width:100%
}

.u-mdlayout-page-footer {
  z-index: 2;
  position: absolute;
  left: 0;
  bottom: 0;
  height: 3rem;
  height: 48px \9;
  width: 100%;
  border-top: 1px solid #cccccc;
  background-color: #fff;
}


.u-mdlayout-page-section table {
  background: #fff;
}

.u-mdlayout-header-func {
  position: absolute;
  left: 0.25rem;
  top: 0.25rem;
  font-size: 1rem;

}

.u-mdlayout-header-func span:hover {
  cursor: pointer;
  background-color: #EAEAEA;
}

.u-mdlayout-header-func span {
  padding: 0.25rem 0.5rem;
  display: none;
  position: absolute;
}