//@import "device/iphone";

.mobil {

    .container {
      width: auto;
    }

   .mobile-header-container {
      text-align: center;
      -webkit-box-orient: horizontal;
      -moz-box-orient: horizontal;
      box-sizing: border-box;
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      -webkit-box-align: center;
      -moz-box-align: center;
      z-index: 9;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;

      .mobile-header-link {
        display: block;
        background-color: white;
      }

      .mobile-header {
        height: 65px !important;
        background-repeat: no-repeat !important;
        padding: 0px !important;
        background-position-x: 75px !important;
        background-position-y: 10px !important;
        background-size: 55% !important;
        background-position: 75px 10px !important;
        .box-shadow(rgba(0,0,0,0.5) 0px 0px 2px);
        .mobile-portrait-and-below {
          background-size: 55% !important;
        }
        .tablet-only {
          height: 65px !important;
          background-size: 25% !important;
          background-position-x: 50% !important;
          background-position-y: 10px !important;
        }
        .tablet-portrait-only {
          background-size: 30% !important;
        }
      }
    }


    a {
        color: @gray_normal;
        text-decoration: none;
    }

    &:hover, &:focus {
        color: lighten(@gray_normal,10%);
    }

    &:active {
        color: darken(@gray_normal,10%);
    }

    .enme {
      &:extend( .title-enme );
      color: @black_hight;
      text-transform: capitalize;

    }       

     .mobile-footer {
        text-align: left;
        background-color: @black_medium;
        color : @white;
        padding: 6px;
        min-height: 30px;
        &:extend( .text-back-image );
     }

    .content {
      padding-top: 65px;
    }

     .mobile-footer .footer-menu {
        padding: 10px;
     }

     .mobile-footer .footer-menu > span {
        padding: 10px;
     }

    .mobile-footer .footer-menu span a{
        font-size: 12px;
        text-align: center;
        margin-top: 3px;
        color: white;
    }

    .mobile-footer .mobile-footer-version {
        font-size: 11px;
        text-align: right;
        margin-top: 3px;
        padding: 10px;
    }

    .mobile-footer .mobile-footer-version  a {
        color : white !important;
    }

    .mobile-footer .mobile-footer-version  a > span {
        color : white;
    }

    .mobile-main {
        min-height: 300px;
        background-color: white;
    }

      .mobile-main-vote {
        min-height: 0px;
      }

      .mobile-landscape-and-below {
        .mobile-main-vote {
          min-height: 350px;
        }
       }

      .portrait-only {
        .mobile-main-vote {
          min-height: 350px;
        }
      }

//    .mobile-detail .enme {
//        color: @white !important;
//    }


    .enme-mob-section {
        &:extend( .text-back-image );
    }

    .titleNext {
        color: @gray_lite;
        background-color: @gray_ultra_light;
        padding: 10px;
        text-align: center;     
    }
}

/* Smartphones (landscape)  */
@media only screen and (min-width : 321px) {

}

/* Smartphones (portrait)  */
@media only screen and (max-width : 320px) {

}

/** tablet's resolution **/
/* @media all and (device-width: 768px) and (device-height: 1024px) and (orientation:portrait) {
  .ipad-portrait { color: red; } your css rules for ipad portrait
}
@media all and (device-width: 768px) and (device-height: 1024px) and (orientation:landscape) {
  .ipad-landscape { color: blue; }
} */

/* iPads (portrait and landscape)  */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {

}

/* iPads (landscape)  */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {

}

/* iPads (portrait)  */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {

}


/* iPhone 4  */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5), only screen and (min-device-pixel-ratio : 1.5) {

}

@media
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (   min--moz-device-pixel-ratio: 2),
only screen and (     -o-min-device-pixel-ratio: 2/1) {

  /* Retina-specific stuff here */
}