@import includes/settings
@import includes/mixins
@import includes/colors
/* Mobile Grid Fixes */

/* Tablet screens */
@media only screen and (device-width: 768px), (device-width: 800px)
  /* Currently unused */

@media only screen and (max-width: 767px)
  body
    -webkit-text-size-adjust: none
	
  .row, body, .container
    width: 100%
    min-width: 0
    margin-left: 0
    margin-right: 0
    padding-left: 0
    padding-right: 0
  .row .row .column, .row .row .columns
    padding: 0
  .column, .columns
    width: auto !important
    float: none
    margin-left: 0
    margin-right: 0
    padding-left: 20px
    padding-right: 20px
  .column:last-child, .columns:last-child
    margin-right: 0
  .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

/* Mobile 4-column Grid */
.row
  .phone-one.column:first-child, .phone-two.column:first-child, .phone-three.column:first-child, .phone-four.column:first-child, .phone-one.columns:first-child, .phone-two.columns:first-child, .phone-three.columns:first-child, .phone-four.columns:first-child
    margin-left: 0px
  .phone-one.column, .phone-two.column, .phone-three.column, .phone-four.column, .phone-one.columns, .phone-two.columns, .phone-three.columns, .phone-four.columns
    margin-left: 4.4%
    float: left
    min-height: 1px
    position: relative
    padding: 0
  .phone-one.columns
    width: 21.68% !important
  .phone-two.columns
    width: 47.8% !important
  .phone-three.columns
    width: 73.9% !important
  .phone-four.columns
    width: 100% !important
  
  

/* Block Grid */
@media only screen and (max-width: 767px)
  .block-grid.mobile
    margin-left: 0%
    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

.hide-on-phones
  display: block !important
.hide-on-tablets
  display: block !important
.hide-on-desktops
  display: none

@media only screen and (max-device-width: 800px), only screen and (device-width: 1024px) and (device-width: 600px), only screen and (width: 1280px) and (orientation: landscape), only screen and (device-width: 800px)
  .show-on-phones
    display: block !important
  .show-on-tablets
    display: none !important
  .show-on-desktops
    display: block !important
  
  .hide-on-phones
    display: none !important
  .hide-on-tablets
    display: block !important
  .hide-on-desktops
    display: none !important
    
@media only screen and (max-width: 767px)
  .show-on-phones
    display: none !important
  .show-on-tablets
    display: block !important
  .show-on-desktops
    display: block !important
  
  .hide-on-phones
    display: block !important
  .hide-on-tablets
    display: none !important
  .hide-on-desktops
    display: none !important 

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

table
  &.show-on-desktops
    display: table !important
  &.hide-on-phones
    display: table !important
  &.hide-on-tablets
    display: table !important
    
@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)
  table
    &.hide-on-phones
      display: block !important
    &.hide-on-desktops
      display: block !important
    &.show-on-tablets
      display: block !important

@media only screen and (max-width: 767px)
  table
    &.hide-on-tablets
      display: block !important
    &.hide-on-desktops
      display: block !important
    &.show-on-phones
      display: block !important

/* Forms */
@media only screen and (max-width: 767px)
  input.input-text, input.input-text.oversize, textarea, form.nice input.input-text, form.nice input.input-text.oversize, form.nice textarea
    display: block
    width: 96%
    padding: 6px 2% 4px
    +font-size(18)
  form.nice input.input-text, form.nice input.input-text.oversize, form.nice textarea
    +border-radius(2px)
  form.nice small.error
    padding: 6px 2%
    display: block
  form.nice .small+.error, form.nice .medium+.error, form.nice .large+.error
    width: auto

/* Buttons */
@media only screen and (max-width: 767px)
  .button
    display: block
  button.button
    width: 100%
    padding-left: 0px
    padding-right: 0px
    
/* 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 0px #ccc
    border-width: 1px 0px 0px
    margin: 0
    color: #555
    background: #eee
    +font-size(15)
  dl.tabs.mobile dd a.active
    height: auto
    margin: 0
    border-width: 1px 0px 0px
  
  .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: solid 1px #ccc
    background: #fff
    &.active
      border: none
      background: #00a6fc
      color: #fff
      margin: 0
      position: static
      top: 0px
      height: auto
  .nice.tabs.mobile dd:first-child a.active
    margin-bottom: 0px
  
  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