/*** NB: 
 *
 *	Le modifiche a tutte le regole che insistono sulla singola istanza di 
 *	navobile vanno riportate anche nelle regole corrispettive in:
 *	 
 *	- jqmobile_script_catalogo_js.tpl
 *	- jqmobile_script_pagine.tpl 
 *
***/

.navobile-mobile-only {
    display: none;
}

#navobile-device-pixel,
#navobile2-device-pixel,
#navobile3-device-pixel,
#navobile4-device-pixel {
  width: 0;
}

@media screen and (min-width: 0px) and (max-width: 2800px) {
    html,
    .navobile-bound,
    .navobile2-bound,
    .navobile3-bound,
    .navobile4-bound  {
      overflow-x: hidden;
      overflow-y: scroll;
      height: auto;
      width: 100%;
    }

    /*
    .overflowscrolling {
      -webkit-overflow-scrolling: touch;
    }   */
    
    #navobile-device-pixel,
    #navobile2-device-pixel,
    #navobile3-device-pixel,
    #navobile4-device-pixel {
      width: 1px;
    }

    .navobile-desktop-only {
      display: none;
    }
    .navobile-mobile-only {
      display: block;
    }

    .navobile-navigation,
    .navobile2-navigation,
    .navobile3-navigation,
    .navobile4-navigation {
      height: 100%;
      left: -100%;
      overflow: auto;
      position: absolute;
      top: -100%;
      width: 100%;
      z-index: -1;
      display: none;
      -webkit-transform: translateX(0);
      -moz-transform: translateX(0);
      -ms-transform: translateX(0);
      -o-transform: translateX(0);
      transform: translateX(0);
    }

	.navobile-navigation-visible {
		display: block !important;
	}
	
    .navobile-bound .navobile-navigation,
    .navobile2-bound .navobile2-navigation,
    .navobile3-bound .navobile3-navigation,
    .navobile4-bound .navobile4-navigation {
        left: 0;
        position: fixed;
        top: 0;
        z-index: 1;
    }

    .navobile-navigation > ul,
    .navobile2-navigation > ul,
    .navobile3-navigation > ul,
    .navobile4-navigation > ul {
      overflow: hidden;
       display: block !important;
    }

    .navobile-navigation li,
    .navobile2-navigation li,
    .navobile3-navigation li,
    .navobile4-navigation li {
      float: none;
      overflow: hidden;
    }

    .navobile-content,
    .navobile2-content,
    .navobile3-content,
    .navobile4-content {  
      position: relative;
      z-index: 3;
      min-height: 100%;      
      -webkit-transition: -webkit-transform 0.2s linear;
      -moz-transition: -moz-transform 0.2s linear;
      -o-transition: -ms-transform 0.2s linear;
      -ms-transition: -o-transform 0.2s linear;
      transition: transform 0.2s linear;
    }

    .csstransforms #tours-content.navobile-content-hidden,
    .csstransforms #content.navobile-content-hidden,
    .csstransforms #filters-content.navobile-content-hidden,
    .csstransforms #google-map-content.navobile-content-hidden,
    .csstransforms #viaggio-share-content.navobile-content-hidden,
    .csstransforms .viaggio-page-content.navobile-content-hidden,
	.csstransforms .paragrafo-content.navobile-content-hidden {
      -webkit-transform: translateX(100%);
      -moz-transform: translateX(100%);
      -ms-transform: translateX(100%);
      -o-transform: translateX(100%);
      transform: translateX(100%);
    }

    .csstransforms #tours-content.navobile-content-hidden,
    .csstransforms #content.navobile-content-hidden,
    .csstransforms #filters-content.navobile-content-hidden,
    .csstransforms #google-map-content.navobile-content-hidden,
    .csstransforms #viaggio-share-content.navobile-content-hidden,
    .csstransforms .viaggio-page-content.navobile-content-hidden,
	.csstransforms .paragrafo-content.navobile-content-hidden   {
      -webkit-transform: translate3d(100%,0,0);
      -moz-transform: translate3d(100%,0,0);
      -ms-transform: translate3d(100%,0,0);
      -o-transform: translate3d(100%,0,0);
      transform: translate3d(100%,0,0);
    }
}

@media screen and (min-width: 0px) and (max-width: 2800px) {
  .mobile-only {
    display: block;
  }

  .mobile-header-bar {
    -moz-box-sizing: border-box;
    background: url("/img/jqmmenu-bg.png") repeat-x scroll 0 0 rgba(0, 0, 0, 0);
    padding: 0 8px;
    /*margin-bottom: 20px;   */
    color: #FFFFFF; 
    height: 50px;
    line-height: 50px;  
    text-align: center;  
  }
  
  .mobile-header-bar .icon {
      color: #FFFFFF;
      cursor: pointer;
      font-size: 14px;
      padding: 7px 0px;
      position: absolute;
      left: 36px;
      text-align: center;
      text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
      top: 4px;
  }
  .mobile-header-bar .icon .icon-bar {
        background-color: #fff;
        display: block;
        height: 2px;
        margin: 5px 0;
        width: 19px;
}

  nav {
    background: url(../images/mobile-nav.png);
  }

  nav ul {
    margin: 0;
  }

  nav li {
    border-bottom: 1px solid #c3c3c2;
    margin: 0;
  }

  nav li li {
    border-top: 1px solid #c3c3c2;
    border-bottom: 0;
  }
  
  nav li:first-of-type {
    border-top: 0;
  }

  nav a {
    color: #ddd;
    display: block;
    padding: 14px 15px;
  }

  nav a:hover,
  nav a:active {
    background: rgba(0,0,0,0.1);
  }

  #navobile-navigation a:before,
  #navobile2-filters-navigation a:before,
  #navobile3-google-map-navigation a:before,
  #navobile4-share-navigation a:before {
    text-shadow: 0 -1px rgb(34, 34, 34);
    color: #ddd;
    margin-right: 10px;
  }


  .license {
    height: 300px;
  }
}

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

  #content,
  body {
    background: url(../images/bg/bg@2x.png);
    background-size: 400px 400px;
  }

  nav {
    background: url(../images/bg/mobile-nav@2x.png);
    background-size: 200px 200px;
  }

}