body {
color: #344e4e;
font-family: Arial, Verdana, Helvetica, sans-serif;
font-size: 1em;
margin-top:1em;
}
/*CSS for columns*/
* {
  box-sizing: border-box;
}

.row::after {
  content: "";
  clear: both;
  display: table;
}

[class*="col-"] {
  float: left;
  padding: 15px;
}

.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%;}


.header {
font:inherit;
}


/*This positions the NT logo*/
.mainimg { position: relative; top: 0; left: 0; } 
.overlay { position: absolute; top: 25px; left: 30px; max-width: 100%; height:auto; }
.main-container {margin: 1em; }

/*Responsive image code */
img {
    max-width: 100%;
    height: auto;
}

#content {
	width:100%;
	padding-left:25px;
	padding-right:25px;
}

#midbox {
	padding-left:10px;
	padding-right:10px;
}

/*This is the code for the VIP menu*/

/* this controls the top menu */

@media screen and (min-width: 1400px) {
.topnav {
	display:none;
}
}

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

ul.topnav {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #063;
    font-size:10px
}

ul.topnav li {float: left;}

ul.topnav li a {
    display: block;
    color: white;
    text-align: center;
    padding: 10px 16px;
    text-decoration: none;
}

ul.topnav li a:hover:not(.active) {background-color: #111;}

ul.topnav li a.active {background-color: #4CAF50;}

ul.topnav li.right {float: right;}

@media screen and (max-width: 300px){
    ul.topnav li.right, 
    ul.topnav li {float: none;}
}
}

@media screen and (max-width: 1400px) {
.pcright {
	display:none;
}
}

@media screen and (min-width: 1400px) {
  
ul.tomenu li {
	list-style-type: none;
	font-size: 1.4em;
	font-family: 'Kavivanar', cursive;
	padding-top:7px;
	}
	
ul.tomenu li a {
	text-decoration:none;
	color: #39F;
}
}

@media only screen and (max-width: 768px) {
  /* For mobile phones: */
  [class*="col-"] {
    width: 100%;
  }
}
/*End VIP menu code*/
/* Footer code */  
p.footer {font-family: Arial, Verdana, Helvetica, sans-serif;
width: 100%;
border-top: 1px green solid;
text-align: center;
font-size: .8em;
position: relative;
padding-top: 15px;
}

/*CSS for Top button*/
#myBtn {
  display: none;
  position: fixed;
  bottom: 20px;
  right: 30px;
  z-index: 99;
  font-size: 18px;
  border: none;
  outline: none;
  background-color: red;
  color: white;
  cursor: pointer;
  padding: 15px;
  border-radius: 4px;
}

#myBtn:hover {
  background-color: #555;
}

/*Plant Index boxes and plant index css*/

.miniboxindex {
font-size: 1.3em;
font-weight: bold;
width: 65px;
float: left;
text-align: center;
padding-top: 3px;
padding-bottom: 3px;
color: #373737;
border: 2px white groove;
border-radius: 25px;
box-shadow: 10px 10px 5px #888888;
margin:2px;
background-color: #bbe17e;}

.indexbuttons {
  column-count: 2;
  column-gap: 40px;
  }

ul.plantindex {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
 }

ul.plantindex li a {
    display: flex;
    color: #0C3;
    text-align: left;
    padding: 1px 16px;
    text-decoration: none;
    white-space:normal;
 } 
/*Code for plants by month page*/ 
 #subbox {
width: 100%;
padding-left: 5px;
padding-top: 5px;
color: white;
font-weight: bold;
background-color: #06751e;
height: 35px;
text-align: center;
margin-left: 2em;}

.plantpage {
width: 95%;
padding: 50px;
min-height:650px;
height:auto;	
}

.plantcont {
margin-left: 2em;}

.plantbox {
width: 225px;
position: relative;
float: left;
background-color: #beafb2;
margin-top: 5px;
margin-left: 10px;
height: 90px;}

.plantcol1 {
width: 50px;
position: relative;
float: left;
padding-top: 5px;
padding-left:5px;
}

.plantcol2 {
width: 130px;
position: relative;
float: right;
padding-top: 5px;}

.plantcol2 a {
text-decoration: none;
color: #01470d;}

.plantcont a {
font-size: 1em;}

/* This puts the Oak  Leaf on thr Plant descrips pages */
#oaklogo {
width: 30px;
position: relative;
float: left;
height: 50px;
background-image: url(../images/oak_leaf.gif);
background-repeat: no-repeat;
padding-left: 2.5em;
margin-left: 2.5em;
padding-right:10px;
}
.img {
max-height:600px;
}
		
	
}