/* Based on Skeleton V2.0.1
*  Copyright 2014, Dave Gamache
*  www.getskeleton.com
*  Free to use under the MIT license.
*  http://www.opensource.org/licenses/mit-license.php
*  12/11/2014
*/

/* Table of contents
* –––––––––––––––––––––––––––––––––––––––––––––––––– 
*  - Grid
*  - Utilities
*  - Clearing
*  - Forms
*  - Buttons
*/

/* Grid
–––––––––––––––––––––––––––––––––––––––––––––––––– */
/* Desktop First - For width greater than 549px */

/* .row { margin-bottom: 1.5rem; } */

.container .column,
.container .columns {
  margin-left: .8%;
}
   
/* Containers are 100% of the viewport width, with a max-width of 1000px */
.container {
  position: relative; 
  width: 98%;
  max-width: 1000px; 
  margin: 0 auto;
  padding: 0;
}

/* Targets tags with a class of "column" or "columns" that are the first child
   of an element with class "row". */
.row .column:first-child,        
.row .columns:first-child { 
  margin-left: 0;
}

/* Targets tags with a class of "column" or "columns" that are descendents
   of an element with class "container". */
.container .column,        
.container .columns { 
  float: left;
  box-sizing: border-box;
  /* add vendor prefixes for box-sizing */
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}
   
/* Targets tags with both the "one" and "column" classes, or both the "one" and "columns"
   classes, that are descendents of an element with class "container".
   Columns are 34 pixels wide. Gutters are 8 pixels wide. */
.container .one.column,
.container .one.columns          { width: 3.4%; }    /* (34 / 1000) x 100 */
.container .two.columns          { width: 7.6%; }    /* ((34 x 2) + (8 x 1)) / 1000) x 100 */
.container .three.columns        { width: 11.8%;}    /* ((34 x 3) + (8 x 2)) / 1000) x 100 */
.container .four.columns         { width: 16%; }     /* ((34 x 4) + (8 x 3)) / 1000) x 100 */
.container .five.columns         { width: 20.2%; }   /* ((34 x 5) + (8 x 4)) / 1000) x 100 */
.container .six.columns          { width: 24.4%; }     /* ((34 x 6) + (8 x 5)) / 1000) x 100 */
.container .seven.columns        { width: 28.6%; }   /* ((34 x 7) + (8 x 6)) / 1000) x 100 */
.container .eight.columns        { width: 32.8%; }    /* ((34 x 8) + (8 x 7)) / 1000) x 100 */
.container .nine.columns         { width: 37%; }  /* ((34 x 9) + (8 x 8)) / 1000) x 100 */
.container .ten.columns          { width: 41.2%; }    /* ((34 x 10) + (8 x 9)) / 1000) x 100 */
.container .eleven.columns       { width: 45.4%; }   /* ((34 x 11) + (8 x 10)) / 1000) x 100 */
.container .twelve.columns       { width: 49.6%; }   /* ((34 x 12) + (8 x 11)) / 1000) x 100 */
.container .thirteen.columns     { width: 53.8%; }   /* ((34 x 13) + (8 x 12)) / 1000) x 100 */
.container .fourteen.columns     { width: 58%; }   /* ((34 x 14) + (8 x 13)) / 1000) x 100 */
.container .fifteen.columns      { width: 62.2%; }   /* ((34 x 15) + (8 x 14)) / 1000) x 100 */
.container .sixteen.columns      { width: 66.4%; }   /* ((34 x 16) + (8 x 15)) / 1000) x 100 */
.container .seventeen.columns    { width: 70.6%; }   /* ((34 x 17) + (8 x 16)) / 1000) x 100 */
.container .eighteen.columns     { width: 74.8%; }   /* ((34 x 18) + (8 x 17)) / 1000) x 100 */
.container .nineteen.columns     { width: 79%; }   /* ((34 x 19) + (8 x 18)) / 1000) x 100 */
.container .twenty.columns       { width: 83.2%; }   /* ((34 x 20) + (8 x 19)) / 1000) x 100 */
.container .twentyone.columns    { width: 87.4%; }   /* ((34 x 21) + (8 x 20)) / 1000) x 100 */
.container .twentytwo.columns    { width: 91.6%; }   /* ((34 x 22) + (8 x 21)) / 1000) x 100 */
.container .twentythree.columns  { width: 95.8%; }   /* ((34 x 23) + (8 x 22)) / 1000) x 100 */
.container .twentyfour.columns   { width: 100%; margin-left: 0; }

.container .one-third.column     { width: 32.8%; }
.container .two-thirds.column    { width: 66.4%; }
.container .one-half.column      { width: 49.6%; }

/* Offsets */
/* Targets tags with one of the "offset-by-" classes, that are descendents of an element with
   a class "row", which in turn are descendents of an element with class "container". */
.container .row .offset-by-one        { margin-left: 4.2%; }
.container .row .offset-by-two        { margin-left: 8.4%; }
.container .row .offset-by-three      { margin-left: 12.6%; }
.container .row .offset-by-four       { margin-left: 16.8%; }
.container .row .offset-by-five       { margin-left: 21%; }
.container .row .offset-by-six        { margin-left: 25.2%; }
.container .row .offset-by-seven      { margin-left: 29.4%; }
.container .row .offset-by-eight      { margin-left: 33.6%; }
.container .row .offset-by-nine       { margin-left: 37.8%; }
.container .row .offset-by-ten        { margin-left: 42%; }
.container .row .offset-by-eleven     { margin-left: 46.2%; }
.container .row .offset-by-twelve     { margin-left: 50.4%; }
.container .row .offset-by-thirteen     { margin-left: 54.6%; }
.container .row .offset-by-fourteen     { margin-left: 58.8%; }
.container .row .offset-by-fifteen     { margin-left: 63%; }
.container .row .offset-by-sixteen     { margin-left: 67.2%; }
.container .row .offset-by-seventeen     { margin-left: 71.4%; }
.container .row .offset-by-eighteen     { margin-left: 75.6%; }
.container .row .offset-by-nineteen     { margin-left: 79.8%; }
.container .row .offset-by-twenty     { margin-left: 84%; }
.container .row .offset-by-twentyone     { margin-left: 88.2%; }
.container .row .offset-by-twentytwo     { margin-left: 92.4%; }
.container .row .offset-by-twentythree     { margin-left: 96.6%; }

.container .row .offset-by-one-third  { margin-left: 33.6%; }
.container .row .offset-by-two-thirds { margin-left: 67.2%; }
.container .row .offset-by-one-half   { margin-left: 50.4%; }

.row .offset-by-one:first-child       { margin-left: 3.4%; }
.row .offset-by-two:first-child       { margin-left: 7.6%; }
.row .offset-by-three:first-child     { margin-left: 11.8%; }
.row .offset-by-four:first-child      { margin-left: 16%; }
.row .offset-by-five:first-child      { margin-left: 20.2%; }
.row .offset-by-six:first-child       { margin-left: 24.4%; }
.row .offset-by-seven:first-child     { margin-left: 28.9%; }
.row .offset-by-eight:first-child     { margin-left: 32.8%; }
.row .offset-by-nine:first-child      { margin-left: 37%; }
.row .offset-by-ten:first-child       { margin-left: 41.2%; }
.row .offset-by-eleven:first-child    { margin-left: 45.4%; }
row .offset-by-twelve:first-child    { margin-left: 49.6%; }
row .offset-by-thirteen:first-child    { margin-left: 50.3%; }
row .offset-by-fourteen:first-child    { margin-left: 58%; }
row .offset-by-fifteen:first-child    { margin-left: 62.2%; }
row .offset-by-sixteen:first-child    { margin-left: 66.4%; }
row .offset-by-seventeen:first-child    { margin-left: 70.6%; }
row .offset-by-eighteen:first-child    { margin-left: 74.8%; }
row .offset-by-nineteen:first-child    { margin-left: 79%; }
row .offset-by-twenty:first-child    { margin-left: 83.2%; }
row .offset-by-twentyone:first-child    { margin-left: 87.4%; }
row .offset-by-twentytwo:first-child    { margin-left: 91.6%; }
row .offset-by-twentythree:first-child    { margin-left: 95.8%; }

.row .offset-by-one-third:first-child  { margin-left: 32.8%; }
.row .offset-by-two-thirds:first-child { margin-left: 66.4%; }
.row .offset-by-half:first-child       { margin-left: 49.6%; }

/* Special outer structure for pages with a wide left content area and 160px wide right banners.
These two columns are meant to be used together. At full width of 1000px, the content column is
800 pixels, the ad column is 185 pixels, and the gutter is 15 pixels. */

.container .wide-content.column   { width:80%; }
.container .ads-160.column        { width:18.5%; margin-left: 1.5%; }

/* For devices larger than 550px */
@media (max-width: 550px) {
  /* Containers are 96% of the viewport width, with a max-width of 1000px */
  .container {width:96%;}
  .container .row .column,
  .container .row .columns {
    float: none;
    width: 100%;
    margin-left: 0;
  }
  
  .container .row .offset-by-one,
  .container .row .offset-by-two,
  .container .row .offset-by-three,
  .container .row .offset-by-four,
  .container .row .offset-by-five,
  .container .row .offset-by-six,
  .container .row .offset-by-seven,
  .container .row .offset-by-eight,
  .container .row .offset-by-nine,
  .container .row .offset-by-ten,
  .container .row .offset-by-eleven,
  .container .row .offset-by-one-third,
  .container .row .offset-by-two-thirds,
  .container .row .offset-by-one-half {margin-left: 0;}
}

/* Utilities
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.u-full-width {
  width: 100%;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}
.u-max-full-width {
  max-width: 100%;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}
.u-pull-right {
  float: right; }
.u-pull-left {
  float: left; }

/* Clearing
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.container:after,
.row:after,
.u-cf { 
  content: "";
  display: table;
  clear: both; }

/* –––––––––––––––––––––––––––––––––––––––––––––––––– */
/* Forms */
/* –––––––––––––––––––––––––––––––––––––––––––––––––– */

.flex-form {
  background-color: #f7f5f5;
  border: 1px solid #e5e5e5;
  margin-top: 24px;
  overflow: auto;
  padding: 15px;
}

.flex-form fieldset {
  border: none;
  margin-bottom:10px;
}

.flex-form legend {
  display: block;
  font-weight: 600;
}

.flex-form label {
  font-size: .92em;
  padding: 8px 0 4px 0;
  display: block;  
}

.flex-form input {
  padding: 5px;  
  width: 100%;
  min-height: 25px;  
}

.flex-form input:focus,
.flex-form textarea:focus {
  box-shadow: 0 0 5px rgba(0, 84, 165, .35);
  transition: all 0.3s;
}

.flex-form textarea {
  padding: 5px;  
  width: 100%;
  min-height: 70px;
  resize: vertical;
  border: 1px solid #D1D1D1;    
}

.flex-form h4 {
  margin-top: 0;
  margin-bottom: 8px;
}

.flex-form button {cursor: pointer;}

/* Input type attributes
–––––––––––––––––––––––––––––––––––––––––––––––––– */

.flex-form input[type="color"],
.flex-form input[type="file"],
.flex-form input[type="image"],
.flex-form input[type="range"] {
  width: auto;
  border: none;
  display: inline;
}

.flex-form input[type="date"],
.flex-form input[type="datetime"],
.flex-form input[type="datetime-local"],
.flex-form input[type="email"],
.flex-form input[type="month"],
.flex-form input[type="number"],
.flex-form input[type="password"],
.flex-form input[type="search"],
.flex-form input[type="tel"], 
.flex-form input[type="text"], 
.flex-form input[type="time"],
.flex-form input[type="url"], 
.flex-form input[type="week"] {
    border: 1px solid #D1D1D1;
}

.flex-form input[type="color"],
.flex-form input[type="image"],
.flex-form input[type="range"] {
  padding: 0;
}

.flex-form input[type="submit"], 
.flex-form input[type="reset"],
.flex-form input[type="button"] {
  width: auto;
  margin-top: 10px;
  cursor: pointer;
}

.flex-form input[type="color"] {width: 27px;}

/* float radio button labels next to the field */

.flex-form input[type="radio"],
.flex-form label.radio,
.flex-form input[type="checkbox"],
.flex-form label.checkbox {
   display: inline-block;
   width: auto;
   vertical-align: middle;
}

.flex-form input[type="radio"],
.flex-form input[type="checkbox"] {
   margin: 0 3px 0 0;
}

/* Removes awkward default styles on some inputs for iOS */
input[type="email"],
input[type="number"],
input[type="search"],
input[type="text"],
input[type="tel"],
input[type="url"],
input[type="password"],
textarea {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none; }

/* –––––––––––––––––––––––––––––––––––––––––––––––––– */
/* BUTTONS */
/* –––––––––––––––––––––––––––––––––––––––––––––––––– */

/* BASIC BUTTON AND HOVER */

.button{
	display: inline-block;
	zoom:1;
    vertical-align:bottom;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    text-align: center;
    margin: 2px;
    padding: 6px;
    border-width: 1px;
    border-style: solid;
    font-weight: 600;
    color: #000;
    cursor: pointer;
}

a.button {text-decoration:none;}
.button:hover{background: #ddd;}

a.button:link { color: #000; text-decoration: none;}
a.button:visited { color: #000;}
a.button:hover { color: #000; text-decoration: none;}
a.button:active { color: #000;}

/* ------------ */
/* BUTTON COLORS */

.btn-green,
a.btn-green,
button.btn-green,
input[type="submit"].btn-green,
input[type="reset"].btn-green,
input[type="button"].btn-green{
	background: #43A459;
	text-shadow: 1px 1px 0px #358347;
	border-color: #358347;
	color: #fff;
}
.btn-green.button:hover,
a.btn-green.button:hover,
input[type="submit"].btn-green:hover,
input[type="reset"].btn-green:hover,
input[type="button"].btn-green:hover {
   background: #358347;
}

a.btn-green:link { color: #fff; text-decoration: none;}
a.btn-green:visited { color: #fff;}
a.btn-green:hover { color: #fff; text-decoration: none;}
a.btn-green:active { color: #fff;}

.btn-blue, 
a.btn-blue,
button.btn-blue,
input[type="submit"].btn-blue,
input[type="reset"].btn-blue,
input[type="button"].btn-blue{
	background: #0e5ea9;
	text-shadow: 1px 1px 0px #105391;
	border-color: #105391;
	color: #fff;
}
a.btn-blue.button:hover, 
.btn-blue.button:hover,
input[type="submit"].btn-blue:hover,
input[type="reset"].btn-blue:hover,
input[type="button"].btn-blue:hover {
   background: #105391;
}

a.btn-blue:link { color: #fff; text-decoration: none;}
a.btn-blue:visited { color: #fff;}
a.btn-blue:hover { color: #fff; text-decoration: none;}
a.btn-blue:active { color: #fff;}

.btn-orange,
a.btn-orange,
button.btn-orange,
input[type="submit"].btn-orange,
input[type="reset"].btn-orange,
input[type="button"].btn-orange {
	background: #ed6f1f;
	text-shadow: 1px 1px 0px #d85409;
	border-color: #d85409;
	color: #fff;
}
a.btn-orange.button:hover, 
.btn-orange.button:hover,
input[type="submit"].btn-orange:hover,
input[type="reset"].btn-orange:hover,
input[type="button"].btn-orange:hover {
   background: #d85409;
}

a.btn-orange:link { color: #fff; text-decoration: none;}
a.btn-orange:visited { color: #fff;}
a.btn-orange:hover { color: #fff; text-decoration: none;}
a.btn-orange:active { color: #fff;}

.btn-gold, 
a.btn-gold,
button.btn-gold,
input[type="submit"].btn-gold,
input[type="reset"].btn-gold,
input[type="button"].btn-gold {
	background: #fcc036;
	border-color: #ffa91e;
	color: #000;
}
a.btn-gold.button:hover, 
.btn-gold.button:hover,
input[type="submit"].btn-gold:hover,
input[type="reset"].btn-gold:hover,
input[type="button"].btn-gold:hover {
   background: #ffa91e;
}

a.btn-gold:link { color: #000; text-decoration: none;}
a.btn-gold:visited { color: #000;}
a.btn-gold:hover { color: #000; text-decoration: none;}
a.btn-gold:active { color: #000;}

a.btn-gray,
.btn-gray,
button.btn-gray,
input[type="submit"].btn-gray,
input[type="reset"].btn-gray,
input[type="reset"].btn-gray {
   background: #ccc;
   border-color: #aaa;
   color: #000;
}
a.btn-gray.button:hover,
.btn-gray.button:hover,
input[type="submit"].btn-gray:hover,
input[type="reset"].btn-gray:hover,
input[type="button"].btn-gray:hover {
   background: #aaa;
}

a.btn-gray:link { color: #000; text-decoration: none;}
a.btn-gray:visited { color: #000;}
a.btn-gray:hover { color: #000; text-decoration: none;}
a.btn-gray:active { color: #000;}

/* ----------------- */
/* BUTTON TEXT SIZES */

.btn-xsmall, a.btn-xsmall, input[type="submit"].btn-xsmall, input[type="reset"].btn-xsmall, input[type="button"].btn-xsmall {font-size: .95rem; padding:5px 6px; line-height:12px;}

.btn-small, a.btn-small, input[type="submit"].btn-small, input[type="reset"].btn-small, input[type="button"].btn-small {font-size: 1.15rem; padding: 6px 8px; line-height:16px;}

.btn-medium, a.btn-medium, input[type="submit"].btn-small, input[type="reset"].btn-small, input[type="button"].btn-small {font-size: 1.5rem; padding: 8px 8px; line-height:18px;}

.btn-large, a.btn-large, input[type="submit"].btn-large, input[type="reset"].btn-large, input[type="button"].btn-large {font-size: 1.8rem; padding: 10px 10px; line-height:22px;}

.btn-xlarge, a.btn-xlarge, input[type="submit"].btn-xlarge, input[type="reset"].btn-xlarge, input[type="button"].btn-xlarge {font-size: 2.1rem; padding: 10px 12px; line-height:24px;}