* {    box-sizing: border-box;}body {    max-width:1000px;    margin: auto;    line-height: 1.5em;    font-size: 18px;    font-family: Cambria,"Hoefler Text",Utopia,"Liberation Serif","Nimbus Roman No9 L",Times,"Times New Roman",serif;}a {    color: #000000;    text-decoration: none;}.center {    text-align: center;}.left {    text-align: left;}.right {    text-align: right;}.greenbar {    margin: auto;    width: 100%;    background-color: #abc4a2;    border: 0px solid green;    padding: 10px;    clear: both;}.clearbar {    margin: auto;    width: 100%;    border: 0px solid green;    padding: 10px;    clear: both;}/* Style the header */.header {    background-color: #ffffff;    padding: 30px;    text-align: center;    border: 0px solid darkred;    font-size: 1.7em;}.header-column {    float: left;    padding: 10px;}.header.left {    width: 25%;}.header.right {    width: 75%;}/* Clear floats after the columns */.headerrow:after {    content: "";    display: table;    clear: both;    border: 0px solid orange;}/* Create three unequal columns that floats next to each other */.column {    float: left;    padding: 0px;    border: 0px solid green;}/* Left and right column */.column.side {    width: 20%;    border: 0px solid green;    padding: 0px;}/* Middle column */.column.middle {    padding: 7px;    border: 0px solid green;    width: 60%;}/* Middle column */.column.middlerest {    width: 80%;}/* Clear floats after the columns */.row:after {    content: "";    display: table;    clear: both;}/* Style the footer */.footer {    background-color: #ffffff;    padding: 10px;    text-align: center;}.menu {    width: 20%;    float: left;    padding: 0px;    border: 0px solid red;}.main {    width: 60%;    float: left;    padding: 5px;    border: 0px solid red;}/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */@media (max-width: 600px) {    .column.side, .column.middle {        width: 100%;    }}.logo{    border:0 !important;    padding: 0 !important;    width: 250px;}img {    width: 100%;    height: auto;}input[type=text], select {    width: 60%;    padding: 10px 10px;    font-size:14px;    font-family: inherit;    margin: 8px 0;    display: inline-block;    border: 1px solid #ccc;    border-radius: 4px;    box-sizing: border-box;}input[type=submit] {    width: 30%;    background-color: #abc4a2;    color: black;    font-family: inherit;    font-size:14px;    padding: 14px 20px;    margin: 8px 0;    border: none;    border-radius: 4px;    cursor: pointer;}input[type=submit]:hover {    background-color: #45a049;}/* Tooltip container */.tooltip {    position: relative;    display: inline-block;    border-bottom: 1px dotted black; /* If you want dots under the hoverable text */}/* Tooltip text */.tooltip .tooltiptext {    visibility: hidden;    width: 120px;    background-color: black;    color: #fff;    text-align: center;    font-size: 16px;    padding: 5px 0;    border-radius: 6px;    /* Position the tooltip text - see examples below! */    position: absolute;    z-index: 1;}/* Show the tooltip text when you mouse over the tooltip container */.tooltip:hover .tooltiptext {    visibility: visible;}.tooltip .tooltiptext {    top: -5px;    right: 105%;}