/* Base font size for body, in percent 
   Base line height for body, in ems */
body {
 //font-size: 16px;	
 font-size: 90%;	
 line-height: 1.5em;
 font-family: Trebuchet MS, Verdana, Helvetica sans-serif;
 color: #333333;
 background-color: #FFFFFF; 
 margin: 0px;
 padding 0px;
}

/* General font colors and sizes */

.redtext {
 color: #FF0000;
}

.orangetext {
 color: #f4a137; 
}

.largetitle {
 font-size: 1.3em;
}

.largeblock {
 font-size: 110%;
}

/* General link and hover */

a {
 text-decoration: none;
 color: #41a9ab; 
}

a:hover { 
 text-decoration: underline;
 color: #41a9ab;  
}

/* General text and form elements */ 

blockquote {
 color: #555;
 margin: 20px 0px 20px 0px;
 padding: 5px 15px 5px 15px;
 color: #666666;
 background-color: #FFFFFF;
 border: 1px dashed #41a9ab;
	}

.contactform {
 width: 100%;
 color: #41a9ab;
 font-size: 110%;
 padding: 5px;
}

@media only screen and (min-width: 750px) {
 .contactform {
  width: 100%;
  }
}

.purchaseform {
 width: 100%;
 color: #41a9ab;
 font-size: 110%;
 padding: 5px;
}

.contactformtitle {
 padding-top: 20px;
}

.contactnameheader {
  color: #41a9ab;
  font-size: 120%;
}

.contactname {
 color: #41a9ab;
 font-size: 80%;
 padding: 3px;
}
.contactsubmit {
 border: none;
 font-size: 90%;
 background-color: #41a9ab;
 padding: 4px;
 color: #ffffff;
}

/* page navigation elements */
.pagenav {
 font-size: 120%;
}

.pagenav .alignleft {
 padding: 4px;
 margin: 0 7px 2px 0;
 display: inline;
}

.pagenav .alignright { 
 padding: 0px;
 margin: 0 0 2px 7px;
 float: right; 
 display: inline;
}

/* product paging navigation elements */

.productnavhead {
 margin: 15px;
 border-top: 1px dashed #ccc;
}

.productpaging {
 padding-right: 60px;
 text-align:right;
 font-size: 1.2em;
}

.productpaging a, .productpaging span {
 text-decoration: none;
 border: 0px solid #BFBFBF;
 padding: 3px 5px;
 margin: 2px;
}

.productpaging a:hover  {
 background-color: #f4a137;
}

.productpaging a.current {
 background-color: #f4a137;
 border-color: #FFF;
}

/* main front page */
 .frontpage {
  font-family: Trebuchet MS;
  font-weight: normal;
  font-size: 150%;
  color: #a9a9a9;
  text-align: center;
 }
 .frontlogo {}
 .frontimage {
  text-align: center;
  margin-bottom: 30px;
}
 .frontimage img {
}

 #frontnav {
  text-align: center;
  margin-top: 20px;
  margin-bottom: 60px;
 }
 .frontpage ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
 }
 .frontpage li {
   display: inline;
   padding-right:15px;
   padding-left: 15px;
   background: #FFFFFF;
 }
 .frontpage li a {text-decoration: none; color: #41a9ab; }
 .frontpage li a:hover { color: #f4a137; }



/* Set box-sizing for all elements, to make sure padding/border included in our grid columns */
 * { box-sizing: border-box; }

/* Setup 12 column class grids for page, breakpoints for diff device sizes */

/* For mobiles, small tablet */
 [class*="col-"] {
  width: 100%;
}

/* For desktop */
 @media only screen and (min-width: 750px) {
    body {
        background-color: #FFFFFF;
    }
 .col-1 {width: 8.33%;}
 .col-2 {width: 16.66%;}
 .col-3 {width: 25%;}
 .col-4 {width: 33.33%;}
 .col-5 {width: 41.66%;}
 .col-6 {width: 50%;}
 .col-7 {width: 58.33%;}
 .col-8 {width: 66.66%;}
 .col-9 {width: 75%;}
 .col-10 {width: 83.33%;}
 .col-11 {width: 91.66%;}
 .col-12 {width: 100%;}
}
 

/* Float them left. Use wildcard class*= to select all col at once
   Can give padding to each column in pixels 
   Use border=1px to turn on boundaries for debugging the divs */

[class*="col-"] {
 float: left;
 padding: 15px;
 border: 0px solid #a9a9a9;
}

/* Info Pages - reset the padding for the info pages */
 .infobody {
  padding-top: 0px;
}

/* Trick to clear the flow of page after row */
 .row:after {
   content: "";
   clear: both;
   display: block;
}

/* Try scale images, but don't go more than orig */ 
img {
    max-width: 100%;
    height: auto;
}

/* Set up defaults for the top menu */

 .topmenu {
  margin-bottom: 15px;
 }
 
 .topmenuitem {
  font-family: Trebuchet MS;
  font-weight: normal;
  font-size: 150%;
  color: #a9a9a9;
  /* text-align: right; */
  text-align: center; 
 }
 .topmenuitem ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
 }
 
/* For phone:
   Center the logo if small screen 
   Solid background color for bars, set colors for links */

 .logo { text-align: center; }
 .topmenuitem li {
   margin-bottom: 2px;
   padding-top: 10px;
   padding-bottom: 10px;
   text-align: center;
   /* background: #4fb4b6; Temporarily no background */
   text-align:center;
   /* Added these lines temporarily to make in-line */
   display: inline;   
   padding-left: 15px;
   padding-right: 15px;  

 }
 .topmenuitem a {text-decoration: none; color: #41a9ab; // FAFAFA 
 }
 .topmenuitem a:hover { color: #f4a137; }

/* For desktop screen: 
   Do not center the logo, align the menu to the right
   Use a min-width on the logo column so that logo image never resizes 
   Can also use a max-width to control space between it and nav
   Display the topmenu inline */

 @media only screen and (min-width: 750px) {
 .logo {
    text-align: left; 
    min-width: 363px;
    max-width: 363px;
  }
 .topmenuitem {
    text-align: right;
    padding-top: 60px; // hack to vertically center the menu text on the logo 
    max-width: 250px;   
    float: right; // needed to float the menu to right manually
  }
 .topmenuitem li { 
   display: inline;
   padding-right:0px;
   padding-left: 30px;
   background: #FFFFFF;
 }
 .topmenuitem a {text-decoration: none; color: #41a9ab; //a9a9a9
  }
 .topmenuitem a:hover { color: #f4a137; }
}

/* For extra wide window:
   Halt the resizing of main content so it doesn't look weird 
   Doing this on "row" will affect every part of css that uses it */

 @media only screen and (min-width: 1200px) {
  .row {
    max-width: 1200px;
  }
 }

/* Main content title */
 .contenttitle {
   font-family: Trebuchet MS;
   font-weight: normal; 
   font-size: 150%;
   color: #a6a6a6;
   margin-top: 20px;
   margin-bottom: 20px;
 }

/* Blog post content wrapper */

 .postwrap {
  padding-right: 50px;
  padding-top: 0px;
  }

/* Blog post title */
 .posttitle {
   font-family: Trebuchet MS;
   font-weight: normal;
   font-size: 150%;
   line-height: 1.5em;
   color: #a6a6a6;
   margin-top: 0px;
   margin-bottom: 0px; 
 }

/* Blog post date */
 .postdate {
  font-size: 90%;
  font-weight: normal;
  color: #a6a6a6;
  margin-bottom: 10px;
 }

/* Blog post content */
 .postcontent { 
  margin-bottom: 10px;
 }
 .postcontent img {
   max-width: 100%;
 }
 .postcontent .postseparator {
   margin-top: 40px;
   margin-bottom: 40px;
   // background-color: #f0f0f0;
 }
 .postcontent .postseparator hr {
border-top: 1px dashed #ccc; 
border-bottom: 0px dashed #ccc; 
}

/* Blog post comments */

.postcommentstart {
 margin-top: 50px;
 margin-bottom: 30px;
 font-weight: bold;
 font-size: 120%;
 padding-bottom: 10px;
 //border-bottom: 1px dashed #CCCCCC;
}

.postcomments ol {
    list-style-type: none;
    margin: 0;
    padding: 0;
    margin-left: 15px;
}
.postcomments .alt {
 background-color: #F3F3F3;
 border-top: 1px solid #CCCCCC;
 border-bottom: 1px solid #CCCCCC;

}
.postcomments ol li {
    padding: 10px;
}

/* Blog sidenav bar */
 .postsidebar {
  font-size: 80%;
 }

 .postsidebar ul {
    list-style-type: none;
    margin: 0;
    padding: 0;

 }
 .postsidebar ul li {
 }

/* For phone, tablet:
   Hide the sidebar nav completely */

 .postsidebar {
  display: none;
}
 
/* For desktop screen: 
   Show the sidebar nav */
 @media only screen and (min-width: 750px) {
 .postsidebar {
  //background-color: #f3f3f3;
  min-height: 1000px;
  max-width: 220px;
  display: block; 
  }
}

/* Main Content - Body */

/* Large image for info pages */

/* For phone, tablet:
   Center the image */

.infoimg {
   text-align: center;
 }
@media only screen and (min-width: 750px) {
 .infoimg { 
   text-align: left; 
 }
}

/* Products Sub Nav Bar */

 .subnavcol {
 margin: 0px;
}

/* Set up color,rollover and font for sub nav */
 .subnav a {text-decoration: none; color: #a9a9a9; }

 .subnav { 
  font-size: 150%; 
  line-height: 1.5em;
 } 
@media only screen and (min-width: 750px) {
 .subnav { 
  font-size: 120%;
  line-height: 1.3em;
 }
}

.subnav {
 margin: 0px;
 margin-bottom: 15px;
 padding: 0px;
 font-family: Trebuchet MS;
 font-weight: normal;
 color: #a6a6a6;
 background-color: #e9e9e9;
}
 .subnav ul {
  list-style: none;
  position: relative;
  display: inline-table;
  padding:0px;
 }
 .subnav ul:after {
  content: ""; clear: both; display: block;
 }
 .subnav ul ul {
  display: none;
  position:absolute;
  top: 100%;
  padding:0;
 }
 .subnav ul li:hover > ul {
  display:block;
 }
 .subnav ul li:hover > ul a {
 color: #A6a6a6;
}
 .subnav ul li {
 float: left;
 padding-right: 25px;
}
 .subnav ul li:hover {
  
 }
 .subnav ul li:hover a {
  color: #f4a137; 
 }
 .subnav ul li a {
 display: block;
 padding-top: 0px;
 padding-left: 10px;
 text-decoration:none;
 }

 .subnav ul ul {
  position: absolute;
  top: 100%;
  background: #dedede;
  margin-left: 10px;
  padding-bottom: 10px;
//  opacity: 0.7;
//  filter: alpha(opacity=70);
//  border: 1px solid #fefefe;
 }
 .subnav ul ul li {
  float: none; 
  position: relative;
  padding-right: 0px;
}
 .subnav ul ul li a {
  width: 150px;
 /* Spacing between drop-down items is padding-top here */
  padding-top: 10px;
}
 .subnav ul ul li a:hover {
  background: #c7c7c7;
  color: #f4a137;
}

/* Products Listing Pages */

.productsrow {
 margin-top: 0px;
 margin-left: 0px;
 margin-right: 0px;
 margin-bottom: 0px;
}

.productswrap {
// background-color: #dafaff;
// border: 1px dashed #41a9ab;
 margin-right: 0px;
 padding-left:15px;
 padding-top: 15px;
 padding-bottom: 35px;
 padding-right: 15px;
 height: 200px;
}

.productswrap img {
 padding-right: 15px;
 float: left;
// width: 150px;
}

/* For phone, make product listing images full width
   Otherwise set a max width for images */

.productsimage {
 text-align: top;
}

@media only screen and (min-width: 750px) {
 .productsimage {
 max-width: 200px;
 }
}

.productstitle {
 font-size: 140%;
 font-weight: bold;

}
.productstext {
 padding-right: 100px;
}
.productsprice {
 float: right;
 margin-top: 0px;
 margin-right: 10px;
 font-size: 120%;
 font-weight: bold;
}

/* For category product listing page */
.categorytitle {
 font-size: 1.5em;
 color: #f4a137;
}

/* For individual product pages */

@media only screen and (min-width: 750px) {
 .productsidebar {
 }
 .productsidebar img {
  margin-right: 15px; 
  margin-left: 15px;
  width: 180px; 
 }
 .productcontent img {
 }
}

 .productpurchase {
  font-weight: bold;
  font-size: 1.5em;
  //float: right;
  margin-top: 30px; 
  margin-bottom: 50px;
 }

 .productpurchasebutton {
  vertical-align: middle;
  padding-left: 15px;
}

 .productpunctuate {
  vertical-align:middle;
  padding-right: 10px;
}

/* Footer */

 .footer {
  margin-top: 50px;
  text-align: center;
  font-size: 75%;
 }
 .footer a {
 text-decoration: underline;
 }