@charset "UTF-8";
/* CSS Document */

/* Re-write this to be mobile first! */

/* resets */
*,
*:before,
*:after {
  box-sizing: border-box;
}
.clearfix:after {
  content: "";
  display: table;
  clear: both;
}

/* global */
.head_wrapper {
  margin: 0 auto;
  max-width: 100%;
}

/* grid */
.head_row {
  margin: 0;
  margin-bottom: 0px;
}
.head_row:last-child {
  margin-bottom: 0;
}
[class*="col-"] {
  /*padding: 10px;*/
}

ul.head {
	list-style: none;
	font-size: 0px;
	margin-left: -2.5%; /* Should match li left margin. */
	margin-bottom: -4%; /* This raises the search bar a little. */
}
ul.head li {
	display: inline-block;
	padding: 10px;
	margin: 0 0 2.5% 2.5%;
	background: none;
	border: 0;
	font-size: 16px;
	font-size: 1rem;
	vertical-align: bottom;
	box-shadow: 0;
}
/* class for 2 columns in header */
ul.head.columns-2 li {
	width: 47.5%; /* this value + 2.5 should = 50% */
	vertical-align: middle;
	text-align: center;
}
/* class for 3 columns in header */
ul.head.columns-3 li {
	width: 30.8%; /* this value + 2.5 should = 33.3% */
	vertical-align: middle;
	text-align: center;
}

/* Used in responsive headers */
/*#ssnav { background: #666; color: white; padding: .5em}
#ssnav a { color: white; }*/

#searchbar { background: #666; color: black; padding: 0; margin: .5em 0 .5em 0; border: none; }
#searchbar a { color: black; }
#searchform { padding: 8px; }
/* -------------- */

@media all and ( min-width: 600px ) {
 /* Larger Screens */
  .col-1-1 {
    float: left;
    width: 100%;
  }
  .col-2-3 {
    float: left;
    width: 66.66%;
  }
  .col-1-2 {
    float: left;
    width: 50%;
  }
  .col-1-3 {
    float: left;
    width: 33.33%;
  }
  .col-1-4 {
    float: left;
    width: 25%;
  }
  .col-1-8 {
    float: left;
    width: 12.5%;
  }

  /* Mine */
  #search_box {
	  background-color: rgb(102, 153, 102);
	  float: left;
	  margin-left: 0; /* 4px */
	  padding: 5px 3px 3px;
	  -webkit-border-radius: 5px;
	  -webkit-border-top-left-radius: 0;
	  -moz-border-radius: 5px;
	  -moz-border-radius-topleft: 0;
	  border-radius: 5px;
	  border-top-left-radius: 0;
	  }
  #main_menu {
	  background-color: rgb(102, 102, 255);
	  -webkit-border-radius: 5px;
	  -webkit-border-top-left-radius: 5px;
	  -moz-border-radius: 5px;
	  -moz-border-radius-topleft: 5px;
	  -moz-border-radius-topright: 0;
	  -moz-border-radius-bottomright: 0;
	  border-radius: 5px;
	  border-top-left-radius: 5px;
	  border-top-right-radius: 0;
	  border-bottom-right-radius: 0;
	  }
}

@media only screen and (max-width: 640px) {
    #cart_link {
        display: none;
    }
}

@media only screen and (max-width: 500px) {
    #main_menu {
        display: none;
    }
}