/*Relato*/
.commentary{
   background: darken(@bg,5%);
   .lines{
      background: url('../images/linea-punteada.png') 10.8% 0 repeat-y,
         url('../images/linea-punteada.png') 89% repeat-y;
      display:block;
      margin:0 auto;
   }
   .teams{
      width: 78.7%;
      position: relative;
      margin: 10px auto;
      img{
         padding: 4px 5px;
         vertical-align: top;
      }
      .local{
         float:left;
         background-repeat: no-repeat !important;
         background-position: center !important;
      }
      .away{
         float:right;
         background-repeat: no-repeat !important;
         background-position: center !important;
      }
      .circle{
         &.white{
            background: #FFFFFF;
         }
      }
   }
   .position-circle{
      width:36px;
      display:block;
      margin:0 auto;
      position:relative;
   }
   .icons .circle{
      margin:15px 0 0;
      &.teams{
         width:36px;
         height:36px;
      }
      .goal{
         .iconsheet(); 
         background-position: -146px -68px; 
         width:16px;
         height:16px;
         padding: 17px;
         &.own{
            .iconsheet(); 
            background-position: -120px -68px; 
            display:block;
            width:16px;
            height:16px;
            padding: 17px;
         }
      }
      .change{
         .iconsheet(); 
         background-position: -804px -14px; 
         display:block;
         width:23px;
         height:18px;
         padding: 17px;
      }
      .cornerKick{
         .iconsheet(); 
         background-position: -95px -120px; 
         display:block;
         width:24px;
         height:30px;
         padding: 17px;
      }
      .offside{
         .iconsheet(); 
         background-position: -126px -120px; 
         display:block;
         width:19px;
         height:23px;
         padding: 17px;
      }
      .yellowCard{
         .iconsheet(); 
         background-position: -503px -22px; 
         display:inline-block;
         width:15px;
         height:18px;
         padding: 0;
         margin-top: 8px;
      }
      .redCard{
         .iconsheet(); 
         background-position: -518px -22px; 
         display:inline-block;
         width:18px;
         height:20px;
         padding: 0;
         margin-top: 8px;
      }
      .redByDoubleYellowCard{
         .iconsheet(); 
         background-position: -548px -22px;
         display:inline-block;
         width:23px;
         height:18px;
         padding: 0;
         margin-top: 8px;
      }
      &.white{
         background: #FFFFFF;
      }
   }
   .time {
      position: relative;
      .data-small{
         width: 100%;
         min-height:45px;
         background:@bg;
         -webkit-border-radius: 3px;
         -moz-border-radius: 3px;
         border-radius: 3px;
         box-shadow: 0px 0px 3px darken(@bg, 60%);
         position: relative;
         margin-top: 10px;
         color: @bg_type;
         span{
            font-size: 22px;
            font-weight: bold;
            display:block;
            padding: 8px 10px 0px 20px;
            line-height: 16px;
            font-family: @type_Special;
            &:nth-child(2){
               padding: 2px 10px 0px 20px;
               font-size: 18px;
            }
         }
         .arrow-right {
            border-top: 8px solid transparent;
            border-bottom: 8px solid transparent;
            border-left: 14px solid darken(@bg, 60%);
            position: absolute;
            top: 14px;
            right: -14px;
            width: 13px;
            height: 14px;
            &:after{
               content:"";
               width:0;
               height:0;
               border-top: 8px solid transparent;
               border-bottom: 8px solid transparent;
               border-left: 14px solid @bg;
               position:absolute;
               top: -8px;
               right: 0px;
            }
         }
         .arrow-left {
            border-bottom: 8px solid transparent;
            border-right: 14px solid darken(@bg, 60%);
            border-top: 8px solid transparent;
            position: absolute;
            top: 14px;
            left: -14px;
            width: 13px;
            height: 14px;
            &:after{
               content:"";
               width:0;
               height:0;
               border-bottom: 8px solid transparent;
               border-right: 14px solid @bg;
               border-top: 8px solid transparent;
               position:absolute;
               top: -8px;
               left: 0px;
            }
         }
         &.left{
            position:absolute;
            right:0;
         }
         &.rigth{
            position:absolute;
            left:0;
         }
      }
   }
   .commentaryItem{
      .expand-left, .expand-right{
         .social {
            &.showSocial{
               border-top: 1px dotted @color02;
               position: relative;
               min-height: 45px;
               .facebookCommentsButton{
                  display: inline-block;
                  margin: 12px 12px 0 0;
                  vertical-align: top;
                  background: #4c69ba;
                  background: -webkit-gradient(linear, center top, center bottom, from(#4c69ba), to(#3b55a0));
                  background: -webkit-linear-gradient(#4c69ba, #3b55a0);
                  border: none;
                  -webkit-border-radius: 2px;
                  color: #fff;
                  cursor: pointer;
                  font-weight: bold;
                  height: 20px;
                  line-height: 20px;
                  padding: 0 6px;
                  text-shadow: 0 -1px 0 #354c8c;
                  white-space: nowrap;
                  font-size: 12px;
                  text-shadow: 0 -1px 0 #354c8c;
                  .fbIcon{
                     background-image: url("../images/fb_icons.png");
                     background-size: auto;
                     background-repeat: no-repeat;
                     background-position: 0 -42px;
                     display: inline-block;
                     height: 14px;
                     width: 14px;
                     margin: 3px 3px 0 0;
                     float: left;
                  }
                  .text{
                     -webkit-user-select: none;
                     -khtml-user-select: none;
                     -moz-user-select: none;
                     -o-user-select: none;
                     -ms-user-select: none;
                     user-select: none;
                  }
                  &:hover{
                     background:#5b7bd5;
                     background:-webkit-gradient(linear, center top, center bottom, from(#5b7bd5), to(#4864b1));
                     background:-webkit-linear-gradient(#5b7bd5, #4864b1);
                     border-color:#5874c3 #4961a8 #41599f;
                     -webkit-box-shadow:inset 0 0 1px #607fd6
                  }
               }
               .twitterButton {
                  display: inline-block;
                  padding: 12px 12px 0;
               }
            }
         }
      }
      .expand-left{
         .social{
            &.showSocial{
               text-align: right;
            }
         }
      }
      .social {
         .facebookLikeButton {
            display: none;
         }
         .facebookComments {
            display: none;
         }
         .twitterButton {
            display: none;
         }
         .facebookCommentsButton{
            display: none;
         }
      }
      .description .data .text span{
         font-weight:normal;
      }
      &.hasMinHeight {
         .description {
            .data {
               background:@color02;
               color:@color02_type;
            }
         }
      }
      &.outstanding {
         .description {
            margin: 0 auto;
            float: none;
            .data{
               background:@color01;
               margin:10px auto 0;
               box-shadow: 0px 0px 3px darken(@bg, 60%);
               .arrow-right {
                  border-left: 20px solid lighten(@color02, 70%);
                  &:after{
                     border-left: 20px solid  @bg_dest_type;
                  }
               }
               .arrow-left {
                  border-right: 20px solid lighten(@color02, 70%);
                  &:after{
                     border-right: 20px solid  @bg_dest_type;
                  }
               }
               .text{
                  span{
                     color:@color01_type;
                     a{
                        color:@color01_type;
                        text-decoration: underline;
                     }
                  }
               }
            }
         }
      }
   }
   .twitter{
      width: 63%;
      min-height:20px;
      background:@color01;
      margin:10px auto;
      -webkit-border-radius: 3px;
      -moz-border-radius: 3px;
      border-radius: 3px;
      margin:10px auto;
      box-shadow: 0px 0px 3px lighten(@color02, 70%);
      padding:20px;
      word-wrap: break-word;
      .picture{
         width:50px;
         height:50px;
         display:block;
         background:@bg;
         float:left;
      }
      .data{
         color:@color01_type;
         padding-left: 14px;
         line-height: 16px;
         span{
            display:block;
         }
      }
   }
   .circle.incTypeIcon{
      width:12px;
      height:12px;
      margin: 24px 0 0 12px;
   }
   &.maxSize-1199{
      .description .data{
         width:90%;
      }
      .time{
         .data-small{
            &.left{
               width: 90%;
               left: 0;
            }
            &.right{
               width: 90%;
               right: 0;
               position: absolute;
            }
            span{
               font-size: 16px;
               padding: 8px 0 0;
               text-align: center;
               &:nth-child(2) {
                  font-size: 14px;
                  padding: 2px 0 0;
               }
            }
         }
      }
   }
   &.maxSize-991 {
      .time{
         .data-small{
            &.left{
               width: 80%;
               left: 0;
            }
            &.right{
               width: 80%;
               right: 0;
               position: absolute;
            }
            span{
               font-size: 16px;
               padding: 8px 0 0;
               text-align: center;
               &:nth-child(2) {
                  font-size: 14px;
                  padding: 2px 0 0;
               }
            }
         }
      }
      .description{
         .data{
            .text{
               span{
                  &:nth-child(2){
                     padding:0 12px 10px 12px;
                  }
               }
            }
         }
      }
   }
   &.maxSize-767 {
      .lines{
         background-position: 19.5% 0,
            80.55% 0;
      }
      .teams{
         width: 61.85%;
      }
      .description .data{
         width:80%;
      }
      .time{
         .data-small{
            &.right{
               width: 70%;
               float: left;
            }
            &.right{
               width: 70%;
               float: right;
            }
         }
      }
   }
   &.maxSize-479 {
      position: relative;
      .lines{
         background-position: 0%  0,
            100% 0;
      }
      .teams{
         width: 100%;
         margin: 10px 0;
      }
      .time .data-small {
         margin:20px auto 0;
         min-height: 48px;
         width: 36px;
         float: right;
         .arrow-top{
            border-left: 8px solid transparent;
            border-right: 8px solid transparent;
            border-bottom: 14px solid darken(@bg, 60%);
            position: absolute;
            top: -14px;
            left: 0;
            width: 13px;
            height: 14px;
            margin: 0 auto;
            right: 0;
            &:after{
               content:"";
               width:0;
               height:0;
               border-left: 8px solid transparent;
               border-right: 8px solid transparent;
               border-bottom: 14px solid @bg;
               position:absolute;
               top: 1px;
               left: -8px;
            }
         }
         span {
            padding: 10px 0 0;
            &:nth-child(2){
               padding: 2px 0 0;
            }
         }
      }
      .description {
         .data{
            width: 90%;
            min-height: 100px;
            .text{
               span{
                  &:nth-child(2){
                     font-size: 12px;
                  }
               }
            }
         }
         &.expand-right{
            width:75%;
            float: right;
            .data{
               width: 85%;
               float: right;
               right: 38px;
            }
         }
         &.expand-left{
            width:75%;
            float: left;
            .data{
               width: 85%;
               float: left;
               left:5px;
            }
         }
      }
      .commentaryItem{
         .expand-left, .expand-right{
            .social {
               &.showSocial{
                  .facebookCommentsButton{
                     margin: 12px;
                  }
               }
            }
         }
      }
      .commentaryItem.hasMinHeight .description .data {
         width: 80%;
         min-height: 20px;
      }
      .commentaryItems:nth-child(odd) .description .data {
         width: 80%;
      }
      .position-circle{
         position: absolute;
      }
      .icons{
         .circle{
            .offside{

            }
         }
         &.right{
            position: absolute;
            right: 0;
            .position-circle{
               right: 0;
               .icons{
                  position: relative;
                  .incTypeIcon{
                  }
               }
            }
         }
      }
      .circle.incTypeIcon{
         margin: 17px 0 0 31%;
      }
      .twitter{
         width: 73%;
         margin: 18px;
      }
   }
}
/*Fin Relato*/