html {
  font-size:18px;
    /*font-size:16px;*/
}
body {
    margin: 0;
    padding: 0 10px 10px;
    background: white;
    font-family: Arial, sans-serif; /*Times New Roman, Times, serif;*/
    color: #333; /*#575756;*/
}

#container, .container
{
    margin: 0 auto;
    text-align: left;
    width: 100%;
    max-width: 1080px;
    /*padding: 0 10px;
    box-sizing:border-box;*/
}

ul.searchterms {
    margin: 0; 
    padding: 0;
    list-style-type: none; 
    line-height: 25px;
    }
div.ogboxpic {
    float: left;
    width: 50px;
    height: 50px;
    margin: 0;
    padding: 0 10px 0 0;
}
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*
	Headings
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
h1, h2, h3 {
    font-weight: 400;
}
h1 {
    font-size: 2rem;
}
h2 {
    font-size: 1.75rem;
}
h3 {
    font-size: 1.5rem;
    margin-bottom: 10px;
}
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*
	Links 
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
a:link, a:visited  /* unvisited link */
{
    color: #575756;
    text-decoration: underline;    
}
a:hover, a:active
{
    color: Red;
    text-decoration: underline;
}
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*
	Home Page
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

#featureContainer, #relContainer {
    width: 100%;
    display: table;
    box-sizing: border-box;
}

.featurebox, .galbox {
    display: table-cell;
    width: 30%;
    max-width: 324px;
    text-align:center;
    vertical-align: top;
    padding: 0 1.5% 3rem;
}

.galbox {
    padding-bottom:2rem;
}

#featureContainer div.featseparator, #relContainer div.featseparator {
    	display: none;
    }
#featureContainer div.featseparator:nth-of-type(3n) {
    	display: table-row;
    }
    #relContainer div.featseparator:nth-of-type(8n) {
        display: table-row;
    }

.featureTitle {
    display: inline-block;
    text-align:center;
    font-size: 1.4rem;  /*1.55rem*/
    width: 100%;
    max-width: 324px;
    margin-bottom: 10px;
    }  

.featurephoto
{
    width: 100%;
    max-width: 324px;  /* 216px 160px*/
    height: auto;
    margin-bottom: 1rem;
}

a.featurephotolink {
    text-decoration: none;
    color: #575756;
}

/*.catdescription {
   	margin: 20px 0;
	width: 100%;
	}*/

.imgMain
{
    width: 100%;
    max-width: 1080px;
    height: auto;
    margin-top: 10px;
    display:block;
}

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*
	TOP INFORMATION
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
#top-information
{
    height: 60px;
    margin-bottom: 16px;
    width: 100%;
    padding: 0;
    display: flex;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    flex-flow: row wrap;
}
#logo
{
    /*width: 168px;*/ /* 50%*/
    /*float: left;*/
    /*height: 60px;*/
    order: 1;
    width: 25%;
    min-width: 195px;
    height: 60px;
    line-height: 60px;
    text-align:left;
}
#logo a {
    color: #003300;
    font-family: Verdana;
    text-decoration: none;
    font-size: 1.2rem;
}

/*#logo img {
    width: 100%;
    max-width: 194px;
    height: auto; 
}*/
#rhsbox
{
    /*float: left;
    width: 50%;*/
    order: 3;
    font-size: 17px;
    font-family: verdana;
    text-align: right;
    height: 60px; /* -webkit-transform-style: preserve-3d;     -moz-transform-style: preserve-3d;     transform-style: preserve-3d; */
    line-height: 60px;
    width: 25%;
}

#searchbox {
    /*background-color: olive;*/
    order: 2;
    width: 50%;
    height: 40px;
    text-align:left;
    display:flex;
}

#searchbox input[type=text], textarea {
    border: solid 1px #ccc;
    padding: 6px 12px;
    /*width: 85%;*/
    font-size: 16px;
    border-radius: 4px 0 0 4px; /*button to go along side*/
    height: 100%;
    box-sizing: border-box;
    display:inline-block;
    margin:0;
    flex-grow: 1;
}

.searchbtn{
    height: 100%;
    /*width: 15%;*/
    /*min-width: 35px;*/
    /*background-color: #999;*/
    background: #666;
    color: white;
    /*font-size: 17px;*/
    border: 1px solid grey;
    border-left: none; /* Prevent double borders */
    cursor: pointer;
    box-sizing: border-box;
    display:inline-block;
    vertical-align:top;
    margin:0;
    /*background: url(../../images/search.png) no-repeat;*/
    /*border-color: #666;*/
}

#imgmenu {
    width: 40px;
    height: 40px;
    margin-left: 15px;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
   display: none;
}

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*
	Menu / Navigation 
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
.toggle,
[id^=drop] {
	display: none;
}

nav { 
    margin: 0 auto;
	padding: 0;
    width:100%;
    max-width: 1080px;
    /*border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;*/
}

/* Since we'll have the "ul li" "float:left"
 * we need to add a clear after the container. */

nav:after {
	content:"";
	display:table;
	clear:both;
}

/* Removing padding, margin and "list-style" from the "ul",
 * and adding "position:reltive" */
nav ul {
	/*float: right;*/ /*logo is on left*/ 
	padding:0;
	margin:0;
	list-style: none;
	position: relative;
    height: 50px;
    max-width: 1080px;
    background-color: #003300;
	}

/* Positioning the navigation items inline */
nav ul li {
	/*margin: 0px;*/
	/*display:inline-block;*/
	/*background-color: #000;*/
	float: left;
    line-height: 50px;
    width: 14.2857%; 
    text-align: center; 
	}

/* links */
nav a:link, nav a:visited {
	/*display:block;*/
	/*padding:14px 20px;*/	
	color:#fff;
	font-size: 1.125rem;
	text-decoration:none;
    text-transform:uppercase;
    font-size:0.9rem;
    /*display:inline-block;
    box-sizing:border-box;
    width:100%;*/
}

nav a:hover { 
	/*background-color: #fff;*/
    color: #333;
    /*border-left: 1px solid #999;
    border-right: 1px solid #999;*/ 
}

nav li.toptab:hover {
    background-color: #999;
    border-left: 1px solid #ccc;
    border-right: 1px solid #ccc; 
    box-sizing: border-box;
}

/* Hide sub-menu by default and position absolute */
nav ul ul {
	display: none;
	position: absolute; 
    box-sizing: border-box;
    width: 100%;
    max-width: 1080px;
    left: 0;
    margin: 1px 0 0;
    padding: 0;
    /*line-height: 50px;*/
    background-color: #999;
	/* has to be the same number as the "line-height" of "nav a" */
	/*top: 50px;*/ 
    border: 1px solid #ccc;
    border-top: none;
    z-index: 99;
}

/* Display Dropdowns on Hover */
nav ul li:hover > ul {
    display:table;
}

/* First level dropdown */
nav ul ul li {
      display: table-cell;
      text-align:left;
	  width: 20%;
      max-width: 216px;
      height: 100%;
      padding: 0 10px 0 25px;
      box-sizing: border-box;
      font-size: 14px;
      border-left: 1px solid #ccc;
      /*background-color: #FFF;*/
      line-height: 50px;
      height: 50px;
}

nav ul ul li.separator {
    	display: none;
        border-left: none;
        width:unset;
        height:unset;
        padding:0;
        line-height:0;
    }

nav ul ul li.separator:nth-of-type(10n) {
    	display: table-row;
    }

nav ul ul li:nth-of-type(5n+1) {
	border-left: none;
}

nav ul ul li a:link, nav ul ul li a:visited  {
    color: #fff;
    font-size: 0.85rem;
    text-transform:unset;
    /*font-size: 0.875rem;*/
}
nav ul ul li a:hover {
    text-decoration:underline;
    color: #000;
}

li > a:after { 
    content:  ' +'; 
    display: none;
}

li > a:only-child:after { content: ''; }

.menu {
    display: block;
}

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*
	Page Crumbs 
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
#breadcrumbs
{
    width: 100%;
    margin: 10px 0;
    font-size: 13px;
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    Timeline
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
.timeline {
    border: none;
    }
.timeline th {
    text-align: left;
    padding-top: 15px;
    }
.timeline th.header {
    font-size: 1.5rem;
    text-align: center;
    }
.timeline td {
    vertical-align: top;
    }

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    Half
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
.lhs, .rhs {
    float:left;
    width: 49%;
    margin-bottom: 5px;
}
.lhs {
    margin-right: 2%;
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    Kit
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
.kitbox {
    float:left;
    width:250px;
    height: 250px;
    margin: 0 0 20px 20px;
}
.relkitbox {
    display: table-cell;
    width: 23%;
    max-width: 248px;
    text-align:center;
    vertical-align: top;
    padding: 0 1% 3rem;
}

.relkitphoto
{
    width: 100%;
    max-width: 248px;
    height: auto;
    /*margin-bottom: 1.25rem;*/
}

.gearphoto
{
    width: 100%;
    max-width: 250px;
    height: auto;
}


.relkittext {
    display: block;
    padding: 0 .75rem;
    max-width: 248px;
    box-sizing: border-box;
    width: 100%;
    font-size: 1rem;
    margin-top: 10px;
    } 

/*~~~~~~~~~~~~~~~~~~~
    Bio
 ~~~~~~~~~~~~~~~~~~~*/
.biobar {
    width: 380px; 
    float: right; 
    padding: 0 10px 10px; 
    margin-left: 20px; 
    background-color: #efefef;
}
.biophoto
{
    width: 100%;
    max-width: 350px;
    height: auto;
}

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*
	Contact
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
.contactbox {
    width: 100%;
    max-width: 370px;
}

.contactbox input[type=text], textarea {
    border: solid 1px black;
    padding: 3px;
    width: 100%;
    box-sizing:border-box;
}

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*
	Buttons
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

input.vgbutton
    {
    border: 1px solid #000; /*#07c;*/
    border-radius: 5px;
    -moz-border-radius: 5px;
    padding: 6px 0;
    color: #333;
    background: #fff /*linear-gradient(#42a1ec,#0070c9)*/;
    text-align: center;
    font: bold 15px 'Trebuchet MS' , Arial, Sans-serif;
    cursor:pointer;
    vertical-align: middle;
    -webkit-appearance: none; 
    width: 180px;
}

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*
	FOOTER
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
#foot
{
    clear: both;
    box-sizing: border-box;
    max-width: 1080px;
    padding: 0;
    color: #FFF;
    background-color: #777;
    list-style: none;
    margin: 20px auto 0;
}
#foot li
{
    line-height: 50px;
	position: relative;
	display: inline-block;
    margin: 0 10px;
	/*margin-right: 15px;*/
}
#foot a:link, #foot a:visited, #foot a:active
{
    color: #FFF;
    text-decoration: none;
}
#foot a:hover
{
    color: #000;
}

#footad {
    margin-top: 10px;
}

#cse-search-results iframe {
    width:100%;
    max-width: 1080px;
}

@media screen and (max-width: 1079px) {


}

@media screen and (max-width: 850px) {

    #imgmenu { 
        display: inline-block;
    }

    nav {
		border-top:none;
        border-bottom:none;
	}

	/* Hide the navigation menu by default */
	.toggle + a,
	.menu {
		display: none;
	}

	/*  toggle label */
	.toggle {
		display: block;
		color: #FFF;
		font-size: 1.125rem;
		text-decoration: none;
        /*text-transform:uppercase;*/
		/*border: none;*/
	}

	.toggle:hover {
        /*color: #999;*/
	}
    /* Display Dropdown when clicked on Parent Lable */
	[id^=drop]:checked + ul {
		display: block;
	}

	/* Change menu item width to 100% */
	nav ul li {
		display: block;
		width: 100%;
        border-bottom: 1px solid #fff;
        background-color: #003300;
		}

    nav a:hover,
 	nav ul ul ul a {
		color: #999;
	}

    /*options without sub menu*/
    nav a:link, nav a:visited {
        text-transform: unset;
        font-size: 1.125rem;
    }

    nav ul ul li a:hover {
    text-decoration:none;
    color: red;
}
 
    nav li.toptab:hover {
    background-color: #003300;
    border-left: none;
    border-right:none; 
} 
	nav ul li ul li .toggle,
	nav ul ul a,
    nav ul ul ul a{
		/*padding:14px 20px;*/	
		color:#FFF;
		font-size:17px; 
	}
  
    nav ul ul {
		float: none;
		position:static;
		color: #ffffff;
		/* has to be the same number as the "line-height" of "nav a" */
	}
		
	/* Hide menus on hover */
	nav ul ul li:hover > ul,
	nav ul li:hover > ul {
		display: none;
	}
		
	/* First Level Dropdown */
	nav ul ul li {
		display: block;
		width: 100%;
        max-width: unset;
        text-align:center;
        padding: 0;
        border-left: none;
        border-bottom: 1px solid #fff;
        background-color: #999;
	}

    nav ul ul li.separator, nav ul ul li.separator:nth-of-type(10n) {
    	display: none;
    }
	nav ul ul ul li {
		position: static;
		/* has to be the same number as the "width" of "nav ul ul li" */ 
	}

    #top-information {
        height:auto;
    }

    #logo {
        order: 1;
        width: 50%;
        text-align:left;
    }
    #rhsbox {
        order: 2;
        width: 50%;
    }
    #searchbox {
        order: 3;
        width: 100%;
        margin-top: 15px;
    }
    /*.postsnip {
        width: 46%;
        margin-bottom: 20px;
    }*/


}

@media screen and (max-width: 630px) {
    .lhs, .rhs {
        float: none;
        width: 100%; 
    }
    .lhs {
        margin-right: 0; /* 20 / 960 */
        margin-bottom: 20px;
    }
    .relkitbox {
          width: 48%;
    }
    #relContainer div.featseparator:nth-of-type(4n) {
        display: table-row;
    }
}

@media screen and (max-width: 480px) {

    #logo {
        width: 70%;
    }
    #rhsbox {
        width: 30%;
    }
    .featurebox, .featureTitle, .galbox {
    width: 100%;
    max-width: unset;
    }
     #featureContainer div.featseparator {
    	display: table-row;
    }
    .kitbox {
    float:none;
    margin-left: 0;
    width: 100%;
    text-align:center;
    }
    .biobar {
        float:none;
        width: 100%;
        margin: 0 0 20px; 
        box-sizing:border-box;
        padding-top:1px;
    }
}