body {font-family: "Arial", "Sans Serif";}
			
h1 {text-align: center;}
			
table.nav {border: maroon solid thin; border-bottom: none;}
			
table.main {border: maroon solid thin;}
			
table.nav tr td {background-color: maroon; text-align: center; font-family: "Verdana"; 
						width: 14.286%;}

.doc {background-color: #37454f; color: #fff; width: 40%; border-radius: 5px 0px 0px 5px;}

#gt_1, #gt_2, #gt_3, #gt_4, #gt_5, #gt_6 {padding-left: 3%; color: #fff; width: 40%;}

#doc_1, #doc_2, #doc_3, #doc_4, #doc_5, #doc_6 {padding-left: 3%; color: #fff; width: 20%; border-radius: 0px 5px 5px 0px;}

table.main tr th {padding-left: 1.5%; padding-top: 1.3%;}
			
p {padding-left: 1%; padding-right: 1%;}

.documents {display: none;}
			
a {text-decoration: none; color: #fff;}
			
a:hover {text-decoration: underline;}
			
#footer {font-size: 70%;}
			
/* uses the media query to add breakpoint at 800px */
@media screen and (max-width:800px) {
		body, h1, .nav, .main, .documents, a, p, #footer {width: 98%;
		}
}
/* the width is 100% when the viewport is 800px or smaller */