/* Publicador */
@import "mc.mixins.less";
@import "mc.configuration.less";
@import "mc.reset.less";

@xs: 480px;
@sm: 768px; 
@md: 992px;
@lg: 1200px;


.publisher{
   h5{
      color: @color01;      text-transform: uppercase;  
      font: 14px @baseFontFamily;
      font-weight: bold; 
   }
   .panel-title{
      position: relative;
      cursor: pointer;    
      a{
         background: @color02;
         width: 100%;
         height: 100%;
         display: block;
         color: @color02_type;
         padding:7px;
         line-height:30px;
         text-transform: uppercase;  
         font: 12px @baseFontFamily;
         font-weight: bold;
         border-bottom: 1px solid @color02_type;
         &:hover{
            text-decoration: none;
         }
      }
      span{
         color: @color02_type;
         font: 25px @baseFontFamily;
         font-weight: bold;
         position: absolute;
         right: 10px;
         top: 2px;
         height: 26px;
         line-height: 30px;
         width: 20px;
         text-align: center;             
      }
      &:hover{
         a, span{
            background-color: @color02_h;
            color: @color02_h_type;
         }
         span{
            text-shadow: 0px 0px 5px rgba(255, 255, 255, 0.7);
         }
      }
   }
   .panel-body{
      .panel-title{
         a{
            background: lighten(@color02, 50%);
            color: @color02_type;
            border-bottom: 1px solid @color02_type;            
         }
         &:hover{
            a, span{
               background: lighten(@color02, 60%);
               color: lighten(@color02_type, 5%);
            }
         }
      }
   }
   .contentPublisher{
      padding: 20px;
      display: none;
      position: relative;
      .section{
         border: 1px solid lighten(@bg_type, 80%);
         padding: 10px;
         margin: 20px 0;
         color: @bg_type;
         text-transform: uppercase;  
         font: 12px @baseFontFamily;
         font-weight: bold;
         min-height: 30px;
         label{
            width: 25%;
         }
         .option{
            height: 35px;
            line-height: 35px;
            span{
               line-height: 20px;
               height: 20px;
               float: left;
               margin-left: 10px;
            }
            &.otpLineup, &.optTeamComparison, &.optCoordinates, &.optHeatMap, &.optLeaders{
               display: none;
            }
         }
      }
      input{
         border: 1px solid lighten(@bg_type, 80%); 
         height: 25px;
         line-height: 25px;
         margin: 0 10px;           
      }
      .loadPreview{
         text-align: center;
         iframe{
            margin: 0 auto;
         }
      }

      .roundedOne {
         background: -moz-linear-gradient(center top , #FCFFF4 0%, #DFE5D7 40%, #B3BEAD 100%) repeat scroll 0 0 rgba(0, 0, 0, 0);
         border-radius: 50px;
         box-shadow: 0 1px 1px #FFFFFF inset, 0 1px 3px rgba(0, 0, 0, 0.5);
         height: 20px;
         position: relative;
         width: 20px;
         float: left;
      }
      .roundedOne .roundedIn:hover:after {
         .opacity(30);
      }
      .roundedOne .roundedIn:after {
         #gradient .vertical-three-colors(darken(@color01,10%), @color01, 28%,@color01 );
         border-radius: 50px;
         box-shadow: 0 1px 1px #FFFFFF inset, 0 1px 3px rgba(0, 0, 0, 0.5);
         content: "";
         height: 9px;
         left: 2px;
         .opacity(0);
         position: absolute;
         top: 2px;
         width: 9px;
      }
      .roundedOne .roundedIn {
         background: -moz-linear-gradient(center top , #222222 0%, #45484D 100%) repeat scroll 0 0 rgba(0, 0, 0, 0);
         border-radius: 50px;
         box-shadow: 0 1px 1px rgba(0, 0, 0, 0.5) inset, 0 1px 0 #FFFFFF;
         cursor: pointer;
         height: 13px;
         left: 4px;
         position: absolute;
         top: 4px;
         width: 13px;
      }
      .roundedOne .roundedIn.selected:after {
         .opacity(100);
      }
   }
   .volver{
      background: @color01;
      border-bottom: 2px solid darken(@color01, 10%);
      float: right;
      padding: 5px 20px;
      position: absolute;
      top: 10px;
      right: 20px;
      color: @color01_type;
      cursor: pointer;
      font-weight: bold;
      &:before{
         content: "";
         border-top: 16px solid transparent;
         border-bottom: 16px solid transparent;
         border-right:16px solid @color01;  
         position: absolute;
         left: -16px;  
         top: 0px;            
      }
   }
}
/* Fin Publicador */