html {
	font-size: 90%;
	font-family: Georgia, serif;
	line-height: 140%;
	color: #4d3609;
	background: #001b5e;
	margin: 0;
	padding: 0;
	}

body {
	max-width: 775px;
	margin: 5px auto;
	padding: 22vw 0 0 0;
	background: transparent url(../images/home/DSheader.png) no-repeat;
	background-size: contain; /*sizes bg to fit within element's dimensions*/
/*		-webkit-transition: padding .5s;
		transition: padding .5s;
*/	}
	html.lt-ie9 body { background: transparent url(../images/home/DSheadersm.png) 50% 0 no-repeat; }
	

#page {
	position:relative;
	margin:auto;
	text-align:left;
	background-color:#ffffff;
	height:100%;
	}

img.main {
	margin:0px 20px 10px 20px;
	border:1px solid #fff;
	float:right;
	}

nav ul {
	width: 100%;
	margin: 0; 
	padding: 0;
	font-size: 110%;
	}

nav li { 
	position: relative;
	float: left;
	width: 25%; 
	list-style: none; 
	margin: 0; 
	padding: 0; 
	}

nav li a {	
	display: block;
	line-height: 1.5em;
	font-size: 1.1em;
	font-weight: bold;
	text-align: center;
	text-decoration: none;
	background: transparent;
	border: 0; border-bottom: 1px solid #006e9f;
	padding: 5px;
	font-variant:small-caps;
	transition: all .3s;
		-webkit-transition: all .3s;
		-moz-transition: all .3s;
	}

 nav li ul { 
		display: none; 
}

 nav ul li a:hover { 
		background: #617F8A; 
}
 nav li:hover ul {
		display: block;
		position: absolute;
		height:30px;
}

 nav li:hover li {
		float: none;
		font-size: 11px;
 }
 nav li:hover a { 
		background: #cdd1dd; 

}
 nav li:hover li a:hover { 
		background: #95A9B1; 
}
 nav ul li ul li a {
				text-align:left; /* Top-level items are centered, but nested list items are left-aligned */
				width: 12em;
}

nav a:link, nav a:visited { 
	color: #555; 
	}


nav a:hover { 
	color: #ffff99; 
	background: #e4ceb2; 
	}

nav a:active,
body#home a#homelink,
body#contact a#contactlink,
body#rates a#rateslink,
body#about a#aboutlink { 
	color: #fff; 
	background: #006e9f; 
	}



/*You don't even need an extra attribute on the link. use what's there:*/				
/*			nav a:active,
			body#home a[href*="index"],
			body#contact a[href*="contact"],
			body#rates a[href*="rates"],
			body#about a[href*="about"]
			{ color: #f0e8d8; background: #557fc4; }
*/				
.content {
	padding: 0em 0px;
	}


	article {
		clear: both;
		padding: 4em 5px;
		margin: ;
		}
	
	table { 
		margin: 1em auto;
		width: 100%;
		border-spacing: 0;
		text-align: center;
		}
		
		td { padding: 10px; margin: 0; border: 0; }
		
		tr:nth-child(2n+1) { background: #557fc4;}
	
			td:first-child { font-weight: bold; }
			tr:nth-child(1) td:first-child { color: #900; }
			tr:nth-child(3) td:first-child { color: #00a; }
			tr:nth-child(4) td:first-child { color: #070; }

		thead tr:nth-child(n) td:nth-child(n) { font-weight: bold; background-color: #e4ceb2; color: #000; } 
		/*Just to have high specificity*/
		
		tr { 	transition: all .3s;
				-webkit-transition: all .3s;
				-moz-transition: all .3s; }
				
		tr:hover { color: #f0e8d8; background: #856429; }
		
		
img.big { 
	width: 80%; 
	margin: 0 0 0 0; 
		padding: 10px;
	}
	
.leftward {float: left; margin: 10px 10px 10px 0;}

	footer {
		clear: both;
		padding: 30px 0 0 0;
		margin: 10px 0 0 0;
		text-align: left;
		}

article, footer {
		-webkit-transition: margin .5s;
		transition: margin .5s;
	}

h1 { 
	font-family: georgia, serif;
	font-size: 130%;
	line-height: 110%;
	margin: 10px 0 10px 0;
	color: #237;
	}

h2 { 
	font-family: georgia, serif;
	font-size: 140%;
	font-weight: normal;
	font-style: italic;
	margin: 10px 0 5px 10px;
	}
	
p {
	margin: 0 10px 5px 0px;
	line-height: 1.5em;
	}

.smallcaps {
	text-transform: lowercase;
	font-variant: small-caps;
	}

a {
	color: #700;
	text-decoration: none;
	font-weight: bold;
	border-bottom: 1px dotted #700;
	}

.globalnote {
	display:none;
	}

/* 
     ====== RESPONSIVE DESIGN, and MOBILE FIRST =======
Style adjustments for viewports that are a bit bigger. Above are the styles for any viewport under 500px wide.	*/


@media only screen and (min-width: 500px) {   /* triggers when the display is more than 499px wide */
		
	img.big { 
		float: right; 
		width: auto; 
		margin: 0 0 0 5%; 
		}	
		
	table { width: 65%; }

.content {
	padding: 0em 0px;
	}

.globalnote {
	display:block;
	padding:10px 20px;
	margin:	-40px auto 5px;
	background-color:#001b5e;
	color:#fff;
	width:400px;
	border: 5px solid #9aa; 
	border-radius: 15px;

	}

.globalnote a {
	color:#ffff66;
	border-bottom: 1px dotted #ffff66;
	}
		}



@media only screen and (min-width: 768px) {   /* triggers when the display is more than 767px wide */
    
	body {	
		padding: 155px 0 0 0;
		}
		
	nav {
		float: left;
		width: 775px;
		}	
	nav li { 
		float: left; 
		width: 25%; 
		}	
	article {
		clear: none;
		padding: 0;
		margin: 20px 0 0 20px;
		}
	footer { margin: 10px 0 0 190px; }

.content {
	padding: 3em 0px;
	}

.globalnote {
	display:block;
	padding:6px 20px;
	margin:	0px auto 5px;
	background-color:#001b5e;
	color:#fff;
	width:590px;
	border: 5px solid #9aa; 
	border-radius: 15px;
	}

.globalnote a {
	color:#ffff66;
	border-bottom: 1px dotted #ffff66;
	}

}