/*
http://www.w3schools.com/html/html5_browsers.asp
"HTML5 defines eight new semantic HTML elements. All these are block-level
elements. To secure correct behavior in older browsers, you can set the CSS
display property to block:"
*/
header, section, footer, aside, nav, main, article, figure {
    display: block; 
}
html { height:100%;}
body { font-family: Verdana, sans-serif; font-size:0.8em; height:100%;}
.cntr { text-align: center; }

table.center {
    margin-left:auto; 
    margin-right:auto;
}
td a:link { color:black; text-decoration:none; }
td a:visited { color:black; text-decoration:none; }

/* The nav buttons are orange-gold and centered on a blue line. 
The current page's button is red-ish. */
nav { padding: 5px; text-align: center; background-color: darkblue;  
      v-align: center; }
nav td { padding:5px; background-color: gold;  border:1px solid black; }
nav td#current { padding:5px; background-color: orangered; 
      border:1px solid black; }

/* The header takes up 30% of the browser window height and 100% of the width. 
The image fits itself into the size with not much excess space in its td.
The title is left aligned and its td takes up all available room. */
header { height:30%; }
header table { border:2px; width:100%; }
header td { padding:5px; background-color: gold;  border:1px solid black; }
header td img { height: 30vh; }
header td#title { text-align: left; width: 100%;} 

footer { background-color: darkblue; text-align: center; }