<style>
*/* Style the body */
        body {
                font-family: Arial, Helvetica, sans-serif;
                margin: 0;
        	float: right;
	}

table.redTable {
  border: 2px solid #A40808;
  background-color: #EEE7DB;
  width: 80%;
  text-align: center;
  border-collapse: collapse;
}
table.redTable td, table.redTable th {
  border: 3px solid #AAAAAA;
  padding: 3px 2px;
}
table.redTable tbody td {
  font-size: 13px;
}
table.redTable tr:nth-child(even) {
  background: #F5C8BF;
}
table.redTable thead {
  background: #A40808;
}
table.redTable thead th {
  font-size: 19px;
  font-weight: bold;
  color: #FFFFFF;
  text-align: center;
  border-left: 2px solid #A40808;
}
table.redTable thead th:first-child {
  border-left: none;
}

table.redTable tfoot {
  font-size: 13px;
  font-weight: bold;
  color: #FFFFFF;
  background: #A40808;
}
table.redTable tfoot td {
  font-size: 13px;
}
table.redTable tfoot .links {
  text-align: right;
}
table.redTable tfoot .links a{
  display: inline-block;
  background: #FFFFFF;
  color: #A40808;
  padding: 2px 8px;
  border solid: 5px;
}

/* Header/logo Title */
        .header {
                padding: 10px 40px;
                text-align: center;
                background: maroon;
	}
/* Increase the font size of the heading */
        .header h1 {
                font-size: 40px;
        }
	.container {
        width: 70%;
        background: red;  
    }


/* Style the navigation bar links */
        .nav, .section {
                float: left;
                display: block;
                color: red;
                text-align: center;
                padding: 10px 20px;
                min-height: 179px;
		box-sizing: border-box;
        }
	.nav ul {
		list-style: none; 
    	    line-height: 24px;
        	padding: 0px; 
    	}
	.nav ul li a {
        color: #333;
    }    
	section {
		width:80%;
	}
/* Change color on hover */
	.navbar a:hover {
  		background-color: #ddd;
  		color: black;
	}

/* Column container */
	.clearfix:after {
        content: ".";
        display: block;
        height: 0;
        clear: both;
        visibility: hidden;
    }
	.row {
  		display: -ms-flexbox; /* IE10 */
  		display: flex;
  		-ms-flex-wrap: wrap; /* IE10 */
  		flex-wrap: wrap;
	}

/* Create two unequal columns that sits next to each other */
/* Sidebar/left column */
.side {
  -ms-flex: 15%; /* IE10 */
  flex: 15%;
  background-color: red;
  padding: 10px;
}

/* Main column */
.main {
  -ms-flex: 80%; /* IE10 */
  flex: 70%;
CTYPE html>
  
  padding: 20px;
}

/* Footer */
.footer {
  padding: 20px;
  text-align: center;
  background: yellow;
  width: 100%;
}

/* 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 {
    flex-direction: column;
  }
}

/* Responsive layout - when the screen is less than 400px wide, make the navigation links stack on top of each other instead of next to each other */
@media screen and (max-width: 400px) {
  .navbar a {
    float: none;
    width: 100%;
  }
}
</style>

