/* ******************************************************* */
/*                                                         */
/*             This file should not be changed.            */
/*    If changes are required - override in styles.css     */
/*                                                         */
/* ******************************************************* */


/* MOBILE SMALL - Non-Retina - (0-321px) */

/* --------------- System Tabs  --------------- */
.tabs ul.primary {
  padding:0;
  margin-top: 20px;
  margin-top: 2rem;
  margin-bottom: 20px;
  margin-bottom: 2rem;
}
.tabs ul.primary li {
  padding: 0;
  margin:0 0 2px 0; /* gap between tabs */
  margin:0 0 0.2rem 0; /* gap between tabs */
  display:block;
}
.tabs ul.primary li a,
.tabs ul.primary li a:hover,
.tabs ul.primary li a:focus {
  padding:1px 15px 3px 15px; /* padding left and right on each tab */
  padding:0.1rem 1.5rem 0.2rem 1.5rem; /* padding left and right on each tab */
  display:block;
  margin:0;
}
.tabs ul.primary li a:hover,
.tabs ul.primary li a:focus {
  text-decoration: none;
}
.tabs ul.secondary {
  padding:6px 0;
  padding:0.6rem 0;
}
.tabs ul.secondary li {
  display:block;
}
.tabs ul.secondary li:last-child {
  border-right:none;
}
.tabs ul.secondary li:first-child {
  padding-left:0;
}
.tabs ul.secondary li a {
  padding:3px 6px;
  padding:0.3rem 0.6rem;
}
.tabs ul.secondary li a.active {
  border-bottom:none;
}


/* ------------------------------------- RESPONSIVE ADJUSTMENTS ------------------------------------- */

@media all and (min-width: 321px) {
  /* MOBILE - Non-Retina - (321px–580px) */
  
}

@media
only screen and (-webkit-min-device-pixel-ratio: 2) and (min-width: 321px),
only screen and (min--moz-device-pixel-ratio: 2) and (min-width: 321px),
only screen and (-o-min-device-pixel-ratio: 2/1) and (min-width: 321px),
only screen and (min-device-pixel-ratio: 2) and (min-width: 321px),
only screen and (min-resolution: 192dpi) and (min-width: 321px),
only screen and (min-resolution: 2dppx) and (min-width: 321px) { 
  /* MOBILE - Retina - (321px–580px) */
  
}


@media all and (min-width: 581px) {
  /* MOBILE LARGE - Non-Retina - (581px–767px) */
  
}

@media
only screen and (-webkit-min-device-pixel-ratio: 2) and (min-width: 581px),
only screen and (min--moz-device-pixel-ratio: 2) and (min-width: 581px),
only screen and (-o-min-device-pixel-ratio: 2/1) and (min-width: 581px),
only screen and (min-device-pixel-ratio: 2) and (min-width: 581px),
only screen and (min-resolution: 192dpi) and (min-width: 581px),
only screen and (min-resolution: 2dppx) and (min-width: 581px) { 
  /* MOBILE LARGE - Retina - (581px–767px landscape only) */
  
}

@media all and (min-width: 768px) {
  /* TABLET - Non-Retina - (768px–1024px) */
  
  /* --------------- System Tabs  --------------- */
  .tabs ul.primary {
    border-bottom:2px solid #ccc; /* border colour below tabs - same as below */
    padding-left: 10px;
    padding-left: 1rem;
  }
  .tabs ul.primary li {
    margin:0 10px 0 0; /* gap between tabs */
    margin:0 1rem 0 0; /* gap between tabs */
    float:left;
    position: relative;
  }
  .tabs ul.primary li a,
  .tabs ul.primary li a:hover,
  .tabs ul.primary li a:focus {
    padding:5px 20px; /* padding left and right on each tab */
    padding:0.5rem 2rem; /* padding left and right on each tab */
    border-width: 1px;
    border-style: solid;
    border-bottom:none;
    line-height:25px;
    line-height:2.5rem;
    float:left;
    margin:0;
    -khtml-border-radius-topleft:4px;
    -moz-border-radius-topleft:4px;
    -webkit-border-top-left-radius:4px;
    border-top-left-radius:4px;
    -khtml-border-radius-topright:4px;
    -moz-border-radius-topright:4px;
    -webkit-border-top-right-radius:4px;
    border-top-right-radius:4px;
  }
  .tabs ul.primary li a:hover,
  .tabs ul.primary li a:focus {
    border-bottom:none;
  }
  .tabs ul.primary li.is-active a,
  .tabs ul.primary li.is-active a:hover,
  .tabs ul.primary li.is-active a:focus {
    border-bottom: 2px solid #c0c900;
  }
  .tabs ul.secondary {
    height:10px;
    height:1rem;
    border-bottom:none;
  }
  .tabs ul.secondary li {
    float:left;
    position: relative;
  }
  .tabs ul.secondary li:last-child {
    border-right:none;
  }
  .tabs ul.secondary li:first-child {
    padding-left:0;
  }
  .tabs ul.secondary li a {
    padding:7px 10px;
    padding:0.7rem 1rem;
  }
  .tabs ul.secondary li a.is-active {
    border-bottom:none;
    -moz-border-radius:4px;
    -webkit-border-radius:4px;
    -khtml-border-radius:4px;
    border-radius:4px;
  }

}


@media
only screen and (-webkit-min-device-pixel-ratio: 2) and (min-width: 768px),
only screen and (min--moz-device-pixel-ratio: 2) and (min-width: 768px),
only screen and (-o-min-device-pixel-ratio: 2/1) and (min-width: 768px),
only screen and (min-device-pixel-ratio: 2) and (min-width: 768px),
only screen and (min-resolution: 192dpi) and (min-width: 768px),
only screen and (min-resolution: 2dppx) and (min-width: 768px) { 
  /* TABLET - Retina - (768px–1024px) */
  
}

@media all and (min-width: 1025px) {
  /* DESKTOP SMALL - Non-Retina - (1025px–1280px) */
  
}

@media
only screen and (-webkit-min-device-pixel-ratio: 2) and (min-width: 1025px),
only screen and (min--moz-device-pixel-ratio: 2) and (min-width: 1025px),
only screen and (-o-min-device-pixel-ratio: 2/1) and (min-width: 1025px),
only screen and (min-device-pixel-ratio: 2) and (min-width: 1025px),
only screen and (min-resolution: 192dpi) and (min-width: 1025px),
only screen and (min-resolution: 2dppx) and (min-width: 1025px) { 
  /* DESKTOP SMALL - Retina - (1025px–1280px) */
  
}


@media all and (min-width: 1281px) {
  /* DESKTOP - Non-Retina - (1281px–1920px) */
  
}

@media
only screen and (-webkit-min-device-pixel-ratio: 2) and (min-width: 1281px),
only screen and (min--moz-device-pixel-ratio: 2) and (min-width: 1281px),
only screen and (-o-min-device-pixel-ratio: 2/1) and (min-width: 1281px),
only screen and (min-device-pixel-ratio: 2) and (min-width: 1281px),
only screen and (min-resolution: 192dpi) and (min-width: 1281px),
only screen and (min-resolution: 2dppx) and (min-width: 1281px) { 
  /* DESKTOP - Retina - (1281px–1920px) */
  
}


@media all and (min-width: 1921px) {
  /* DESKTOP LARGE - Non-Retina - (1921px and larger) */
}

@media
only screen and (-webkit-min-device-pixel-ratio: 2) and (min-width: 1921px),
only screen and (min--moz-device-pixel-ratio: 2) and (min-width: 1921px),
only screen and (-o-min-device-pixel-ratio: 2/1) and (min-width: 1921px),
only screen and (min-device-pixel-ratio: 2) and (min-width: 1921px),
only screen and (min-resolution: 192dpi) and (min-width: 1921px),
only screen and (min-resolution: 2dppx) and (min-width: 1921px) { 
  /* DESKTOP LARGE - Retina - (1921px and larger) */
  
}
