* {
   box-sizing: border-box;
}
[class*="col-"] {
   float: left;
   padding: 10px;
}

/* These styles create the dropdown menus. */
.navbar, .minibar {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13.5px;
	color: #000;
	background-color: #fff;
	text-align: center;
	border-top: #900 solid 0px;
	border-left: #900 solid 0px;
	border-bottom: #CCC solid 0px;
	border-right: #CCC solid 0px;
	margin-left:122px;
}
/* remove all the bullets, borders and padding from the default list styling */
.navbar ul, .minibar ul {margin:0;padding:0;list-style-type:none;}
.navbar ul ul, .minibar ul ul {width:100%;}
/* float the list to make it horizontal and a relative position so that you can control the dropdown menu positon */
.navbar li, .minibar li {float:left;width:100%;position:relative;}
/* style the links for the top level */
.navbar a, .navbar a:visited, .minibar a, .minibar a:visited, .minibar span {display:block;font-size:13.5px;text-decoration:none; color:#fff; width:100%; height:auto; border:1px solid #585752; border-width:0px 0px 1px 0px; background:#030; padding: 5px; padding-left:0; line-height:15px; font-weight:bold; text-align:center;}

/* style the second level background */
.navbar ul ul a.drop, .navbar ul ul a.drop:visited, .minibar ul ul a.drop, .minibar ul ul a.drop:visited {background:#9c6 100% center;}
/* style the second level hover */
.navbar ul ul a.drop:hover, .minibar ul ul a.drop:hover {background:#ccc 100% center;}
.navbar ul ul :hover > a.drop, .minibar ul ul :hover > a.drop {background:#ccc 100% center;}
/* style the third level background */
.navbar ul ul ul a.drop, .navbar ul ul a.drop:visited, .minibar ul ul ul a.drop, .minibar ul ul a.drop:visited {background:#9c6 100% center;}
/* style the third level hover */
.navbar ul ul ul a.drop:hover, .minibar ul ul ul a.drop:hover {background:#ccc 100% center;}

/* position the third level flyout menu */
.navbar ul ul ul, .minibar ul ul ul {left:148px; top:0px; width:100%;}
/* position the third level flyout menu for a left flyout */
.navbar ul ul ul.left, .minibar ul ul ul.left {left:-148px;}	

/* style the table so that it takes no part in the layout - required for IE to work */
.navbar table, .minibar table {position:absolute; top:0; left:0; border-collapse:collapse;}

/* style the top level hover */
/*.navbar a:hover, .navbar ul ul a:hover{color:#000; background:#9c6;}*/
.navbar ul ul a:hover, .minibar ul ul a:hover {color:#000; background:#9c6;}
.navbar a:hover, .minibar a:hover {color:#000; background:#9c6;}
.navbar :hover > a, .navbar ul ul :hover > a, .minibar :hover > a, .minibar ul ul :hover > a {color:#000; background:#9c6;}

/* make the second level visible when hover on first level list OR link */
.navbar ul li:hover ul, .navbar ul a:hover ul, .minibar ul li:hover ul, .minibar ul a:hover ul {visibility:visible;}
/* keep the third level hidden when you hover on first level list OR link */
.navbar ul :hover ul ul, .minibar ul :hover ul ul {visibility:hidden;}
/* make the third level visible when you hover over second level list OR link */
.navbar ul :hover ul :hover ul, .minibar ul :hover ul :hover ul { visibility:visible;}

@media only screen and (max-width:0px) {
/*@media only screen and (max-width:839px) {*/
	.col-t-wide {width:100%;}
	.navbar {display:none;}
	.minibar ul a {padding-left:20px;padding-right:20px;width:148px;}
	/* hide the sub levels and give them a position absolute so that they take up no room */
	.minibar ul ul {visibility:hidden; position:absolute;height:auto;line-height:15px; top:25px; margin-top:0px; left:0; width:148px;border-top:1px solid #900;}
	/* style the second level links */
	.minibar ul ul a, .minibar ul ul a:visited {background:#ce9; color:#030; height:auto; line-height:15px; padding:5px; width:148px;border-width:0px 1px 1px 1px;}
	.menu {display:none;}
	.sidemenu {display:block;}
	.sidemenuhead {display:block;cursor:pointer;}
	.sidemenulinks {display:none;}
	.minimenu {display:block;}
	.minimenuhead {display:block;}
	.minimenulinks {display:block;}
}

*@media only screen and (min-width: 1px) {
/*@media only screen and (min-width: 840px) {*/
	/* For desktops: */
	.col-d-menu {width: 125px;}
	.col-d-side {width: 15%;}
	.col-d-main {width: 85%;}
	.col-d-wide {width: 100%;}
	.minibar {display:none;}
	.menu {display:block;}
	.sidemenu {display:block;}
	.sidemenuhead {display:block;}
	.sidemenulinks {display:block;}
	.minimenu {display:none;}
	.minimenuhead {display:none;}
	.minimenulinks {display:none;}
	.navbar ul a {padding-left:0px;padding-right:0px;}
	/* hide the sub levels and give them a position absolute so that they take up no room */
	.navbar ul ul {visibility:hidden; position:absolute;height:auto;line-height:15px; top:26px; margin-top:0px; left:0; width:100%;border-top:1px solid #900;}
	/* style the second level links */
	.navbar ul ul a, .navbar ul ul a:visited {background:#ce9; color:#030; height:auto; line-height:15px; padding:5px; width:100%;border-width:0px 1px 1px 1px;}
}
.menu {
	margin-top: -2px;
	margin-left: 10px;
	margin-right: 10px;
	margin-bottom: 20px;
/*	border: 0.5px solid #999;*/
   width: 105px;
   float: left;
   font-family: Arial, Helvetica, sans-serif;
	font-size: 13.5px;
	font-weight: bold;
	background-color: #fff;
	position: relative;
   display: block;
}
.menu ul {
   list-style-type: none;
   margin: 0;
   padding: 0;
}
.menu li {
	height: 25px;
   background-color: #003300;
   margin-bottom: 1px;
   box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
.menu li:hover {
   background-color: #0099cc;
}
.menu li a {
	display: inline-block;
	width: 100%;
	text-decoration: none;
	color: #ffffff;
	padding-top: 4px;
	vertical-align: middle;
	text-align: center;
}
.menu a:hover {background-color: #f1f1f1}
.menuhead {
	padding: 6px 5px 1px 0px;
	background-color:#8b4;
	height: 30px; 
	white-space: nowrap;
	border: none;
   cursor: pointer;
}
.menuhead img {
	margin:0px 0px 0px 5px;}
.menuhead:hover, .menuhead:focus {
   background-color: #9c6;
}
.menulinks {
   position: absolute;
   width:100%;
   background-color: #fff;
   overflow: auto;
   margin-bottom: 1px;
   box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
.menulinks a {
	height: 25px;
	width: 100%;
	margin-bottom: 1px;
	color: #fff;
	background-color: #003300;
	padding-top: 4px;
	vertical-align: middle;
	text-align: center;
   text-decoration: none;
   display: block;
}
.menulinks a:hover {
   background-color: #9c6;
   color: #030;
}
.show {display:block;}	

.sidemenu {
	margin-top: -2px;
	margin-left: 10px;
	margin-right: 10px;
	margin-bottom: 20px;
   width: 105px;
   height: 100%;
   float: left;
   font-family: Lucida Sans, sans-serif;
	font-size: 13.5px;;
	background-color: #fff;
	position: relative;
}
.sidemenu a:hover {background-color: #f1f1f1}
.sidemenuhead {
	padding: 6px 5px 1px 0px;
	background-color:#8b4;
	height: 30px; 
	white-space: nowrap;
	border: none;
   text-align:left;
   font-style: oblique;
   box-shadow: 4px 4px 3px rgba(0,0,0,0.35);
}
.sidemenuhead img {
	margin:0px 0px 0px 5px;}
.sidemenuhead:hover, .sidemenuhead:focus {
   background-color: #9c6;
}
.sidemenulinks {
   position: absolute;
   width:100%;
   background-color: #fff;
   margin-bottom: 1px;
   cursor: pointer;
   box-shadow: 4px 4px 3px rgba(0,0,0,0.35);
}
.sidemenulinks a {
	height: 25px;
	width: 100%;
	margin-bottom: 1px;
	color: #fff;
	background-color: #003300;
	padding-top: 4px;
	vertical-align: middle;
	text-align: center;
   text-decoration: none;
   display: block;
}
.sidemenulinks a:hover {
   background-color: #9c6;
   color: #030;
}

.minimenubtn {
    height: 40px;
    width: 0;
    position: absolute; /* Stay in place */
    z-index: 2; /* Sit on top */
    left: 0px;
    top: 95px;
    overflow-x: hidden; /* Disable horizontal scroll */
    transition: 0.5s; /* 0.5 second transition effect to slide in or slide down the overlay (height or width, depending on reveal) */
}
.minimenu {
/*    height: 100%; */
    width: 0;
    position: absolute; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0px;
    top: 100px;
/*
    border:1px solid rgb(0,51,0);
*/    
    overflow-x: hidden; /* Disable horizontal scroll */
    transition: 0.5s; /* 0.5 second transition effect to slide in or slide down the overlay (height or width, depending on reveal) */
    box-shadow: 6px 6px 4px rgba(0,0,0,0.4);
}
.minimenu a:hover {background-color: #f1f1f1}

/* Position the close button (top right corner) */
.closebtn {
	 position: absolute;
    top: 0px;
    right: 0px;
    font-size: 20px;
}

.minimenuhead {
	padding: 6px 5px 1px 0px;
	background-color:rgba(136,187,68,0.95);
	height: 30px; 
	white-space: nowrap;
	border: none;
   text-align:center;
   font-style: oblique;
}
.minimenuhead img {
	margin:0px 0px 0px 5px;}
.minimenulinks {
   width:100%;
   background-color: #fff;
   overflow: hidden;
   margin-bottom: 1px;
   box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
   overflow-x: hidden; /* Disable horizontal scroll */
   white-space: nowrap;
   cursor: pointer;
}
.minimenulinks a {
	height: 25px;
	width: 100%;
	margin-bottom: 1px;
	color: #fff;
	background-color:rgba(0,51,0,0.95);
	padding-top: 4px;
	vertical-align: middle;
	text-align: center;
   text-decoration: none;
   display: block;
}
.minimenulinks a:hover {
   background-color: #9c6;
   color: #030;
}	
	
.row::before {
   content: "";
   clear: both;
   display: table;
}
.row::after {
   content: "";
   clear: both;
   display: table;
}