/************ MOBILE FIRST LAYOUT **********/

/****************** GENERAL ****************/

html {
   height: 100%;
}

body {
   background-color: #f2f2f2;
   color: #777;
   font-family: 'Lato', 'Helvetica Neue', sans-serif;
}

footer {
   background-color: #666;
   color: #aaa;
   margin-top: 3em;
   padding: 0 10px;
}

footer p {
   padding: 2em 1.5em;
}

.pure-g {
   font-family: 'Lato', 'Helvetica Neue', sans-serif;
   margin-bottom: 1.6em;
}
   .pure-g > div {
      box-sizing: border-box;
   }

.pure-img-responsive {
   max-width: 100%;
   height: auto;
}

#main {
   margin: 0 -1em;
}

#layout {
   position: relative;
   padding-left: 0;
}
   #layout:after {
      content: "";
      display: block;
   }
   #layout.active #menu {
      left: 8em;
      width: 8em;
   }
   #layout.active .menu-link {
      left: 16em;
   }
   #layout.active {
      position: relative;
      left: 8em;
}

#layout, #menu, .menu-link {
   -webkit-transition: all 0.2s ease-out;
   -moz-transition: all 0.2s ease-out;
   transition: all 0.2s ease-out;
}

/******** TYPOGRAPHY ********/

h1, h2, h3, h4, h5 {
   font-family: 'Lato', 'Helvetica Neue', sans-serif;
   font-weight: 300;
}

h1 {
   font-size: 1.4em;
}
h2 {
   font-size: 1.3em;
}
h3 {
   font-size: 1.2em;
}
h4 {
   font-size: 1.1em;
}
h5 {
   font-size: 1em;
}

h2, h4 {
   color: #00CCD6;
   margin: .5em 0 0;
}

p, label {
   font-size: .9em;
   font-weight: 300;
}

p {
   line-height: 1.5;
}

.heading {
   color: #222;
   font-size: 1em;
   font-weight: 300;
   line-height: .4;
}

ul {
   list-style-image: url('../img/bullet.png');
   margin: .9em 0 -.5em;
}

ul > li {
   font-weight: 300;
   font-size: .95em;
}

a {
   color: #008CBA;
   font-size: .9em;
   font-weight: 300;
   text-decoration: none;
}

button {
   font-size: .9em;
   font-weight: 300;
}

.primary {
   color: #00CCD6;
}
.secondary {
   color: #33CC9D;
}
.options {
   color: #EFB82B;
}
.caution {
   color: #FF9223;
}
.warning {
   color: #D33A3B;
}

.500 {
   font-weight: 500;
}


/******** SHOW/HIDE ********/
.hide-tiny-only, 
.show-small-up, 
.show-small-only,
.show-medium-up,
.show-medium-only,
.show-large-up,
.show-large-only,
.show-x-large-only {
   display: none !important;
}


/******** HEADER ********/
#header {
   background-color: #424242;
   min-height: 2.5em;
   padding: .75em;
}

.logo {
   width: 2em;
   margin: .3em 0 0 -.5em;
}

.logo-text {
   position: absolute;
   font-size: 1.3em;
   font-family: 'Abel';
   top: 18px;
   left: 50px;
   text-transform: lowercase;
}

#search-box {
   display: none;
}

.search-text {
   display: none;
}

.header-links {
   color: #ccc;
   font-family: 'Lato', 'Helvetica Neue', sans-serif;
   font-size: .9em;
   font-weight: 300;
   float: right;
   margin: .5em .5em 0 0;
}

.header-icon {
   color: #fff;
   margin: 0 .3em 0 1em;
}

/******** SUBMENU ********/ 

.submenu {
   background-color: #D9D9D9;
   color: #222;
   margin: -26px 0 36px 12px;
   padding: 1px;
}

.tabs {
      margin-left: 1em !important;
   }
   .tabs dd > a {
      font-size: .9em !important;
   }

.hover-color:hover {
   background-color: #fff !important;
}


/******** SIDE MENU ********/ 

#menu {
   margin-left: -8em; 
   width: 8em;
   position: fixed;
   top: 0;
   left: 0;
   bottom: 0;
   z-index: 1000; 
   background: #333;
   overflow-y: auto;
   -webkit-overflow-scrolling: touch;
}
   /* Style anchors inside menu */
   #menu a {
      color: #999;
      border: none;
      font-weight: 300;
      padding: 0.6em 0 0.6em 0.6em;
   }
   /* No need to style .pure-menu */
   #menu .pure-menu, #menu .pure-menu ul {
      border: none;
      background: transparent;
   }
   /* Add border to separate items into groups */
   #menu .pure-menu ul,
   #menu .pure-menu .menu-item-divided {
      border-top: 1px solid #333;
   }
      /* Hover color */
      #menu .pure-menu li a:hover,
      #menu .pure-menu li a:focus {
         background: #EFB82B;
         color: #FFF;
      }
   /* Styles selected menu item */
   #menu .pure-menu-selected,
   #menu .pure-menu-heading {
      background: #00CCD6;
   }
      /* Styles links in selected item */
      #menu .pure-menu-selected a {
         color: #FFF;
      }
   /* Styles menu heading */
   #menu .pure-menu-heading {
      font-size: 110%;
      color: #fff;
      margin: 0;
      min-height: 2.6em;
   }

/***** Responsive Menu Button *****/

.menu-link {
   background-color: rgba(66, 66, 66, .4);
   position: fixed;
   display: block; 
   top: 0;
   left: 0; 
   font-size: 10px; 
   z-index: 10;
   width: 2em;
   height: auto;
   padding: 3.1em 2em;
}
   .menu-link:hover {
      background: #666;
   }
   .menu-link span {
      position: relative;
      display: block;
   }
   .menu-link span, .menu-link span:before, .menu-link span:after {
      background-color: #fff;
      width: 100%;
      height: 0.2em;
   }
      .menu-link span:before, .menu-link span:after {
         position: absolute;
         margin-top: -0.6em;
         content: " ";
      }
      .menu-link span:after {
         margin-top: 0.6em;
      }


/***** CONTENT *****/
.content {
   margin: 0 auto;
   padding: 0 2em;
   margin-bottom: 50px;
   line-height: 1.6em;
}

.welcome p {
   display: none;
}

.page-title {
   margin: 0;
   color: #333;
   text-align: left;
   padding: 0em 2em .5em;
}
   .page-title h1 {
      margin: 0;
   }

.content-subhead {
   margin: 1.8em 0 .8em 0;
   font-weight: 300;
   color: #888;
}

table {
   display: inline-table;
}
   /*doesn't work yet*/
   table.tiny-table {
      display: block;
      height: 150px;
      overflow-y: scroll;
      text-align: left;
   }

table > tr, th, td {
   font-size: .9em !important;
   font-weight: 300;
   line-height: 1.1;
   text-align: center;
}

table > th {
   background-color: #d9d9d9 !important;
}

table tbody {
   background-color: #fff;
}

td:first-child {
   text-align: left;
}

tr:nth-child(even) {
   background-color: #e8e8e8;
}

.panel {
   border-radius: 4px;
   border: 1px solid #d9d9d9;
   border-top: 0px;
   margin-top: 1.8em;
   width: 100%;
}

.panel-heading {
   padding: .1px 16px;
   background: #d9d9d9;
   border-top-left-radius: 4px;
   border-top-right-radius: 4px;
   line-height: .5em;
}

.panel-body {
   background: #fff;
   padding: 15px;
}

.panel-content {
   background: fff;
   padding: 15px;
   height:300px;
}

.dropdown {
    display: inline-block;
    position: relative;
    left: calc(50% - 72px);
    margin-top: 1%;
}
   .dropdown .dropdown-menu {
       display: none;
       list-style: none; 
       margin: 0;
       padding: 0;
       position: absolute;
       top: 100%;
       width: 100%; 
   }

   .dropdown:hover .dropdown-menu {
       display: block;
   }

   /** Dropdown Button Styles **/
   .dropdown button {
       background: #EFB82B;
       border: none;
       font-size: 1em;
       font-weight: 300;
       color: #fff;
       margin: 0;
       padding: 0.4em 0.8em;
   }

   .dropdown a {
       display: block;
       padding: 0.2em 0.8em;
       text-decoration: none;
       background: #ccc;
       color: #333333;
   }

   .dropdown a:hover {
       background: #bbb;
   }


/***** BUTTONS *****/

.button-primary, .button-secondary, .button-options {
   border-radius: 4px;
   color: white;
   font-weight: 300;
   text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
}
   .button-primary {
      background: #00CCD6; 
   }
      .button-primary:hover {
         background: #00A8B0;
      }
   .button-secondary {
      background: #33CC9D; 
   }
      .button-secondary:hover {
         background: #20AD82;
      }
   .button-options {
      background: #EFB82B; 
   }
      .button-options:hover {
         background: #E8A600;
      }
   .button-caution {
      background: #FF9223; 
      color: #FFF;
   }
      .button-caution:hover {
         background: #EE7E15;
      }
   .button-warning {
      background: #D33A3B;
      color: #FFF;
   }
      .button-warning:hover {
         background: #B0272A;
      }

.button-space {
   margin: .8em 0 1.6em;
}


/***** RANGE SLIDER *****/
input[type=range] {
   -webkit-appearance: none;
   background-color: #fff;
   border: 1px solid #777;
   border-radius: 5px;
   height: 1.2em;
   margin: .5em 0 .25em;
   width: 13.9em;
}

input[type=range]::-webkit-slider-thumb {
   -webkit-appearance: none;
   background-color: #666;
   border: 1px solid #222;
   border-radius: 2px;
   height: 2em !important;
   width: 1em;
   margin-top: -.1em;
}


/***** SPACING & PLACEMENT *****/

.space-fa {
   margin: 0 10px 0 5px !important;
}

.space-top {
   margin-top: 2em;
}
.space-top-2 {
   margin-top: -.5em;
}
.space-btm {
   margin-bottom: .6em;
}
.space-rt {
   margin-right: 1.5em;
}
.space-lt {
   margin-left: 10px;
   margin-right: -2px;
}
.space-sm {
   margin-left: 5px;
}
.space-range {
   margin: 0 16px 0 5px;
   font-weight: 300;
   font-size: .9em;
}
.right {
   float: right;
   text-align: right;
}
.right-2 {
   float: right;
   margin: 1em 2.6em;
}

.center {
   text-align: center;
}

.icon {
   display: block;
   height: auto;
   margin: -.7em auto 0;
   width: 3em;
}

.icon-text {
   width: 6em;
   margin: .5em auto 0;
   display: block;
   line-height: 1.4;
}


/*************** SMALL SCREENS (≥ 568px) ***************/

@media all and (min-width: 35.5em) {

   /******** SHOW/HIDE SMALL ********/
   .show-small-up, 
   .show-small-only {
      display: inherit !important;
   }
   .show-tiny-only,
   .hide-small-up,
   .hide-small-only,
   .show-medium-up,
   .show-medium-only,
   .show-large-up,
   .show-large-only,
   .show-x-large-only {
      display: none !important;
   }

}

/*************** MEDIUM SCREENS (≥ 768px) ***************/

@media all and (min-width: 48em) {

   #main {
      margin: 0;
   }

   .pure-g {
      margin-bottom: -0.2em;
   }

   h1 {
      font-size: 1.5em;
   }

   /******** SHOW/HIDE MEDIUM ********/
   .show-medium-up,
   .show-medium-only {
      display: inherit !important;
   }
   .show-tiny-only,
   .show-small-only,
   .hide-medium-up,
   .hide-medium-only,
   .show-large-up,
   .show-large-only,
   .show-x-large-only {
      display: none !important;
   }

   #search-box {
      display: block;
      float: left;
      margin: .2em .5em;
      height: 2em;
      width: 16em;
   }

   .search-text {
      border-radius: 20px;
      background: #222;
      border: 1px solid #222;
      color: #fff;
      font-family: 'Lato', 'Helvetica Neue', sans-serif;
      font-size: .9em;
      font-weight: 300;
      padding-left: 1em;
      text-align: left;
   }

   .header-links {
      font-size: 1em;
      margin: .5em 1.8em 0 0
   }

   .header-icon {
      margin: 0 .3em 0 1.5em;
   }

   #layout {
      padding-left: 8em; /* column width */
      left: 0;
   }
   
   #menu {
      left: 8em;
   }

   #layout.active .menu-link {
      left: 8em;
   }

   .menu-link {
      position: fixed;
      left: 8em;
      display: none;
   }
   
   .submenu {
      margin: 3px 0 10px 0;
      padding: 1px;
   }

   .heading {
      font-size: 1.1em;
   }

   .page-title {
      padding: 2em 2em .5em;
   }

   .page-title, .content {
      padding-left: 1.2em;
      padding-right: 1em;
   }

   .welcome p {
      color: #00CCD6;
      display: block;
      float: right;
      font-size: .9em;
      font-weight: 300;
      margin: .25em 1.1em;
   }

   input[type=range] {
      width: 12.8em;
   }

   .space-range {
      margin: 0 13px 0 5px;
   }
   .space-btm {
      margin-bottom: 0.7em;
   }
   .space-top {
      margin-top: .5em;
   }
}


/*************** LARGE SCREENS (≥ 1024px) ***************/

@media screen and (min-width: 64em) {

   /******** SHOW/HIDE LARGE ********/
   .show-large-up,
   .show-large-only {
      display: inherit !important;
   }
   .show-tiny-only,
   .show-small-only,
   .show-medium-only, 
   .hide-large-up,
   .hide-large-only,
   .show-x-large-only {
      display: none !important;
   }

   /***** RANGE SLIDER *****/
   input[type=range] {
      width: 16em;
   }

   .space-range {
      margin: 0 22.5px 0 5px;
   }
   .space-margin {
      margin-left: 2em;
   }
   
   table > tr, th, td {
      font-size: .9em !important;
      line-height: 1.3;
   }

}


/**************** X-LARGE SCREENS (≥ 1280px) **************/

@media screen and (min-width: 80em) {

   /******** SHOW/HIDE LARGE ********/
   .show-x-large-only {
      display: inherit !important;
   }
   .show-tiny-only,
   .show-small-only,
   .show-medium-only,
   .show-large-only,
   .hide-x-large-only {
      display: none !important;
   }

}