demo-mobile.css in Joyride JQuery for Drupal Site Tours 7

/* --------------------------------------------------
	:: Typography
	-------------------------------------------------- */

@media handheld, only screen and (max-width: 767px) {
  h1 {
    font-size   : 32px;
    font-size   : 3.2rem;
    line-height : 1.3;
  }

  h2 {
    font-size   : 28px;
    font-size   : 2.8rem;
    line-height : 1.3;
  }

  h3 {
    font-size   : 21px;
    font-size   : 2.1rem;
    line-height : 1.3;
  }

  h4 {
    font-size   : 18px;
    font-size   : 1.8rem;
    line-height : 1.2;
  }

  h5 {
    font-size   : 16px;
    font-size   : 1.6rem;
    line-height : 1.2;
  }

  h6 {
    font-size   : 15px;
    font-size   : 1.5rem;
    line-height : 1.2;
  }

  body, p {
    font-size   : 15px;
    font-size   : 1.5rem;
    line-height : 1.4;
  }
}

/* --------------------------------------------------
	:: Grid
	-------------------------------------------------- */

/* Mobile */
@media only screen and (max-width: 767px) {
  body {
    -webkit-text-size-adjust : none;
    -ms-text-size-adjust     : none;
    width                    : 100%;
    min-width                : 0;
    margin-left              : 0;
    margin-right             : 0;
    padding-left             : 0;
    padding-right            : 0;
  }

  .container {
    min-width    : 0;
    margin-left  : 0;
    margin-right : 0;
  }

  .row {
    width        : 100%;
    min-width    : 0;
    margin-left  : 0;
    margin-right : 0;
  }

  .row .row .column, .row .row .columns {
    padding : 0;
  }

  .column, .columns {
    width        : auto !important;
    float        : none;
    margin-left  : 0;
    margin-right : 0;
  }

  .column:last-child, .columns:last-child {
    margin-right : 0;
    float        : none;
  }

  [class*="column"] + [class*="column"]:last-child {
    float : none;
  }

  [class*="column"]:before, [class*="column"]:after {
    content : "";
    display : table;
  }

  [class*="column"]:after {
    clear : both;
  }

  .offset-by-one, .offset-by-two, .offset-by-three, .offset-by-four, .offset-by-five, .offset-by-six, .offset-by-seven, .offset-by-eight, .offset-by-nine, .offset-by-ten, .offset-by-eleven, .centered {
    margin-left : 0 !important;
  }

  .push-two, .push-three, .push-four, .push-five, .push-six, .push-seven, .push-eight, .push-nine, .push-ten {
    left : auto;
  }

  .pull-two, .pull-three, .pull-four, .pull-five, .pull-six, .pull-seven, .pull-eight, .pull-nine, .pull-ten {
    right : auto;
  }

  /* Mobile 4-column Grid */
  .row .phone-one:first-child, .row .phone-two:first-child, .row .phone-three:first-child, .row .phone-four:first-child {
    margin-left : 0;
  }

  .row .phone-one:last-child, .row .phone-two:last-child, .row .phone-three:last-child, .row .phone-four:last-child {
    float : right;
  }

  .row .phone-one, .row .phone-two, .row .phone-three, .row .phone-four {
    margin-left : 4.4%;
    float       : left;
    min-height  : 1px;
    position    : relative;
    padding     : 0;
  }

  .row .phone-one {
    width : 21.68% !important;
  }

  .row .phone-two {
    width : 47.8% !important;
  }

  .row .phone-three {
    width : 73.9% !important;
  }

  .row .phone-four {
    width : 100% !important;
  }

  .row .push-one-phone {
    left : 26.08%;
  }

  .row .push-two-phone {
    left : 52.2%
  }

  .row .push-three-phone {
    left : 78.3%
  }

  .row .pull-one-phone {
    right : 26.08%
  }

  .row .pull-two-phone {
    right : 52.2%
  }

  .row .pull-three-phone {
    right : 78.3%;
  }

}

/* --------------------------------------------------
	:: Block Grids
	-------------------------------------------------- */

@media only screen and (max-width: 767px) {
  .block-grid.mobile {
    margin-left : 0;
  }

  .block-grid.mobile > li {
    float       : none;
    width       : 100%;
    margin-left : 0;
  }
}

/* --------------------------------------------------
	:: Mobile Visibility Affordances
---------------------------------------------------*/

.show-on-phones {
  display : none !important;
}

.show-on-tablets {
  display : none !important;
}

.show-on-desktops {
  display : block !important;
}

.hide-on-phones {
  display : block !important;
}

.hide-on-tablets {
  display : block !important;
}

.hide-on-desktops {
  display : none !important;
}

/* Modernizr-enabled tablet targeting */
@media only screen and (max-width: 1280px) and (min-width: 768px) {
  .touch .hide-on-phones {
    display : block !important;
  }

  .touch .hide-on-tablets {
    display : none !important;
  }

  .touch .hide-on-desktops {
    display : block !important;
  }

  .touch .show-on-phones {
    display : none !important;
  }

  .touch .show-on-tablets {
    display : block !important;
  }

  .touch .show-on-desktops {
    display : none !important;
  }
}

@media only screen and (max-width: 767px) {
  .hide-on-phones {
    display : none !important;
  }

  .hide-on-tablets {
    display : block !important;
  }

  .hide-on-desktops {
    display : block !important;
  }

  .show-on-phones {
    display : block !important;
  }

  .show-on-tablets {
    display : none !important;
  }

  .show-on-desktops {
    display : none !important;
  }
}

/* Specific overrides for elements that require something other than display: block */

table.show-on-desktops {
  display : table !important;
}

table.hide-on-phones {
  display : table !important;
}

table.hide-on-tablets {
  display : table !important;
}

@media only screen and (max-width: 1280px) and (min-width: 768px) {
  .touch table.hide-on-phones {
    display : table !important;
  }

  .touch table.hide-on-desktops {
    display : table !important;
  }

  .touch table.show-on-tablets {
    display : table !important;
  }
}

@media only screen and (max-width: 767px) {
  table.hide-on-tablets {
    display : table !important;
  }

  table.hide-on-desktops {
    display : table !important;
  }

  table.show-on-phones {
    display : table !important;
  }
}

/* --------------------------------------------------
	:: Forms
---------------------------------------------------*/

@media only screen and (max-width: 767px) {
  div.form-field input, div.form-field input.small, div.form-field input.medium, div.form-field input.large, div.form-field input.oversize, input.input-text, input.input-text.oversize, textarea,
  form.nice div.form-field input, form.nice div.form-field input.oversize, form.nice input.input-text, form.nice input.input-text.oversize, form.nice textarea {
    display   : block;
    width     : 100%;
    padding   : 6px 2% 4px;
    font-size : 18px;
  }

  form.nice div.form-field input, form.nice div.form-field input.oversize, form.nice input.input-text, form.nice input.input-text.oversize, form.nice textarea {
    -webkit-border-radius : 2px;
    -moz-border-radius    : 2px;
    border-radius         : 2px;
  }

  form.nice div.form-field.error small, form.nice small.error {
    padding : 6px 2%;
    display : block;
  }

  form.nice div.form-field.error .small + small, form.nice .small + .error {
    width : auto;
  }

  form.nice div.form-field.error .medium + small, form.nice .medium + .error {
    width : auto;
  }

  form.nice div.form-field.error .large + small, form.nice .large + .error {
    width : auto;
  }

  form.nice div.form-field.error .expand + small, form.nice .expand + .error {
    width : auto;
  }
}

/* --------------------------------------------------
	:: UI
---------------------------------------------------*/

/* Buttons */
@media only screen and (max-width: 767px) {
  .button {
    display : block;
  }

  button.button, input[type="submit"].button {
    width         : 100%;
    padding-left  : 0;
    padding-right : 0;
    margin-bottom : 5px;
  }
}

/* Tabs */

@media only screen and (max-width: 767px) {
  dl.tabs.mobile, dl.nice.tabs.mobile {
    width  : auto;
    margin : 20px -20px 40px;
    height : auto;
  }

  dl.tabs.mobile dt, dl.tabs.mobile dd, dl.nice.tabs.mobile dt, dl.nice.tabs.mobile dd {
    float  : none;
    height : auto;
  }

  dl.tabs.mobile dd a {
    display      : block;
    width        : auto;
    height       : auto;
    padding      : 18px 20px;
    line-height  : 1;
    border       : solid 0 #ccc;
    border-width : 1px 0 0;
    margin       : 0;
    color        : #555;
    background   : #eee;
    font-size    : 15px;
    font-size    : 1.5rem;
  }

  dl.tabs.mobile dd a.active {
    height       : auto;
    margin       : 0;
    border-width : 1px 0 0;
  }

  .nice.tabs.mobile {
    border-bottom : solid 1px #ccc;
    height        : auto;
  }

  .nice.tabs.mobile dd a {
    padding      : 18px 20px;
    border       : none;
    border-left  : none;
    border-right : none;
    border-top   : 1px solid #ccc;
    background   : #fff;
  }

  .nice.tabs.mobile dd a.active {
    border     : none;
    background : #00a6fc;
    color      : #fff;
    margin     : 0;
    position   : static;
    top        : 0;
    height     : auto;
  }

  .nice.tabs.mobile dd:first-child a.active {
    margin : 0;
  }

  dl.contained.mobile, dl.nice.contained.mobile {
    margin-bottom : 0;
  }

  dl.contained.tabs.mobile dd a {
    padding : 18px 20px;
  }

  dl.nice.contained.tabs.mobile dd a {
    padding : 18px 20px;
  }

  dl.tabs.mobile + ul.contained {
    margin-left  : -20px;
    margin-right : -20px;
    border-width : 0 0 1px 0;
  }
}

/* Nav Bar */

@media only screen and (max-width: 767px) {
  .nav-bar {
    height : auto;
  }

  .nav-bar>li {
    float        : none;
    display      : block;
    border-right : none;
  }

  .nav-bar>li>a.main {
    text-align   : left;
    border-top   : 1px solid #ddd;
    border-right : none;
  }

  .nav-bar>li:first-child>a.main {
    border-top : none;
  }

  .nav-bar>li.has-flyout>a.flyout-toggle {
    position    : absolute;
    right       : 0;
    top         : 0;
    padding     : 22px;
    z-index     : 2;
    border-left : 1px dashed #eee;
    display     : block;
  }

  .nav-bar>li.has-flyout>a.flyout-toggle span {
    content      : "";
    width        : 0;
    height       : 0;
    border-left  : 4px solid transparent;
    border-right : 4px solid transparent;
    border-top   : 4px solid #2a85e8;
    display      : block;
  }

  .nav-bar>li.has-flyout>a.flyout-toggle:hover span {
    border-top-color : #141414;
  }

  .flyout {
    position     : relative;
    width        : auto;
    top          : auto;
    margin-right : -2px;
    border-width : 1px 1px 0 1px;
  }

  .flyout.right {
    float : none;
    right : auto;
    left  : -1px;
  }

  .flyout.small, .flyout.large {
    width : auto;
  }

  .flyout p:last-child {
    margin-bottom : 18px;
  }
}

/* Tooltips */
@media only screen and (max-width: 767px) {
  .tooltip {
    font-size   : 14px;
    font-size   : 1.4rem;
    line-height : 1.4;
    padding     : 7px 10px 9px 10px;
  }

  .tooltip > .nub, .tooltip.top > .nub, .tooltip.left > .nub, .tooltip.right > .nub {
    border-color : transparent transparent rgb(0, 0, 0) transparent;
    border-color : transparent transparent rgba(0, 0, 0, 0.85) transparent;
    top          : -12px;
    left         : 10px;
  }
}

/* Video */

@media only screen and (max-device-width: 800px), only screen and (device-width: 1024px) and (device-height: 600px), only screen and (width: 1280px) and (orientation: landscape), only screen and (device-width: 800px), only screen and (max-width: 767px) {
  .flex-video {
    padding-top : 0;
  }
}