/* Style the body */

h1 {text-align: center}

body {
    font-family: Arial;
    margin: 0;
}

A {text-decoration: none;}

.maintext {padding: 15px}

/* Header/logo Title */
.header {
    padding: 1px;
    text-align: center;
    background-color: #900;
    color: white;
}

/* Style the top navigation bar */
.navbar {
    display: flex;
    background-color: #333;
}

/* Style the navigation bar links */
.navbar a {
    color: white;
    padding: 14px 20px;
    text-decoration: none;
    text-align: center;
}

.ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
}
.li {
    float: left;
}
.li a, .dropbtn {
    display: inline-block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}
.li a:hover, .dropdown:hover .dropbtn {
    background-color: red;
}

li.dropdown {
    display: inline-block;
}
.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}
.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
}
.dropdown-content a:hover {background-color: #f1f1f1}

.dropdown:hover .dropdown-content {display: block;}
* { box-sizing: border-box;}

/* CSS for Taxon Pages dropdown*/
.li a:hover, .dropdown-TaxonPages:hover .dropbtn {background-color: red;}
li.dropdown-TaxonPages {display: inline-block;}
.w3-show{display:block!important}
/* */

/* taxon search bar*/
.search {
  padding: 6px;
  border: none;
  font-size: 17px;
}


.form_elements {margin:5px}
.form_all {padding: 10px}


/* Column container */
.row {  
    display: flex;
    flex-wrap: wrap;
	flex-direction:row-reverse;
}

/* Create two unequal columns that sit next to each other */

/* Main column */
.main {
    flex: 70%;
    background-color: white;
    padding: 20px;
}

/* Sidebar/right column */
.side {
    flex: 30%;
    background-color: #f1f1f1;
    padding: 20px;
}

/*homepage columns */
.homemainrow {  
    display: flex;
    flex-wrap: wrap;
	flex-direction:column-reverse;
}

.homebottomrow {  
    display: flex;
    flex-wrap: wrap;
}

/* top row */
.hometop {
    flex: 40%;
    background-color: white;
    padding: 20px;
}

/* bottom row */
.homebottom {
    flex: 60%;
    padding: 20px;
}

/* bottom columns */
.homecolumn {
    flex: 50%;
    background-color: #f1f1f1;
    padding: 20px;
    border: solid;
}

/* Update */
.update {
border-bottom-style:solid;
border-bottom-color: gray;
border-bottom-width: 2px;
padding: 5px;
}

/* Footer */
.footer {
    padding: 5px;
    text-align: center;
    background: #ddd;
}

* {
  box-sizing: border-box;
}

.catalogdropdown {
  cursor: pointer;
}

.catalogsearchbutton {
  cursor: pointer;
  width: 4em;
  font-size: 20px;
}

.mainbackground {
background-color: rgb(249, 249, 249);
}

.mainbody {
padding-top: 15px;
padding-bottom: 20px;
padding-left: 50px;
padding-right: 50px;
margin: 50px;
background-color: white;
border: 3px solid black;
}

.minorbody {
padding-left: 30px;
}

/* Column container */
.matrixcolumn {  
    display: flex;
    flex-wrap: wrap;
	flex-direction:column;
}



.matrixrow {  
    display: flex;
    flex-wrap: wrap;
	flex-direction:row;
}

/* Create two unequal columns that sit next to each other */

/* Main column */
.matrixmain {
    flex: 60%;
    background-color: white;
    padding: 20px;
}

/* Sidebar/right column */
.matrixside {
    flex: 40%;
    background-color: #f1f1f1;
    padding: 20px;
}


/* Responsive layout - when the screen is less than 700px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 700px) {
    .row, .navbar {   
        flex-direction: column-reverse;
    }
}