/* HTML5 Template Styles for HTML5Template page */
/* Help older browsers with HTML5 layout elements */
header, nav, aside, article, footer, section, figure, figcaption {
display: block;
}
/* Get rid of white border around browser window */
body {
margin: 0;
padding: 0;
}

/* Changes for top Banner */
/* .topheader h1 */
h1.topheader
{
font-family: Arial, Helvetica, Sans-Serif; 
padding: 1%;
color: Blue; 
display: block; 
}

/* Get rid of large margins on headings */
h1, h2, h3, h4, h5, h6 {
margin: 0;
}
#wrapper {
/* Set your own widths, % for fluid, px for fixed */
width: 100%;
min-width: 780px;
max-width: 2560px; /* Vertical margins, and auto to center */
margin: 0 auto;
}
/* Sample styles for 3-column layout */
/* Section containing multiple columns */
.columns {
display: table;
border-collapse: collapse;
width: 100%; /* border is optional, style to taste */
border: solid 1px silver;
}
/* Aside columns in columns div */
.columns aside {
display: table-cell; /* Use any width and padding you like */
width: 18%;
padding: 1%;
}
/* Main article in the columns */
.columns article {
text-align: center;
padding: 1%;
}
/*Optional, style to taste */
.columns .left {
background-color: #ddd;
border-right: solid 1px gray;
}
.columns .right {
background-color: #ddd;
border-left: solid 1px gray;
}
/* Style rules for formal, captioned figures */
figure {
width: 80%;
max-width: 600px;
clear: both;
margin: 1em auto;
border: solid 1px gray;
border-radius: 4px;
box-shadow: 3px 3px 3px 3px silver;
}
figure img {
width: 100%;
display: block;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
}
figcaption {
font: 10pt/10pt Verdana, Tahoma, Sans-serif;
padding: 2px 4px;
}
/* Left-floating pictures */
figure.floatleft {
float: left;
width: 33%;
max-width: 400px;
margin: 0 10px 0 0;
}
/* Right-floating pictures */
figure.floatright {
float: right;
width: 33%;
max-width: 400px;
margin: 0 0 0 10px;
}
/* Pictures with no caption */
figure.nocaption figcaption {
display: none;
}
/* Pictures in the side columns */
.columns aside img {
display: block;
width: 90%;
margin: 0.5em auto;
border: solid 1px gray;
border-radius: 4px;
box-shadow: 3px 3px 3px 3px silver;
}








/* Side menu bar */ 
nav ul 
{
list-style-type: none; 
margin: 0;
padding: 0;
font-family: Arial, Helvetica, Sans-Serif; 
font-size: 12pt;
color: Black; 
width: 100px;
}

/* Each list item inside vertical menu bar */ 
nav ul li 
{
position: relative;
</body>
</html>
z-index: 10;
}

/* Text and links down main navbar */ 
nav span, nav a 
{
/* Preload two background images */
background: url(navback2.png) repeat-x, url(navhover2.png) repeat-x; 
text-decoration: none;
outline: none; 
display: block; 
height: 40px;
line-height: 40px; 
width: 100%;
text-align: center;
}

/* Span and unvisited/visited links in vertical bar */ 
nav a:link, nav a:visited, nav a:active, nav a.currentpage, 
 nav ul li:hover a.currentpage
{
background: url(navback2.png) repeat-x; 
color: Black;
}

/* Hovering over list item in vertical bar */ 
nav ul li:hover a, nav ul li:hover span
{
background: url(navhover2.png) repeat-x; 
color: red;
}



/* For Inactive Hovering over list item in vertical bar */ 
nav ul li:hover a.inactive, nav ul li:hover span.inactive 
/* #inactive */
{
background: url(navback2.png) repeat-x; 
color: Black;
}


/* For Acitve Hovering over list item in vertical bar */ 
.active nav ul li:hover a, nav ul li:hover span  
{ 
background: url(navhover2.png) repeat-x;  
color: red; 
} 




/* Flyout menu for each item in menu bar */ 
nav ul li ul 
{
background: #40A2EE;
box-shadow: 0 40px 40px -20px black inset; 
position: absolute;
top: 0; left: 99px; 
z-index: 11;
width: 100%; 
visibility: hidden;
}

/* Make flyout visible when hovering on main bar item */ 
nav ul li:hover ul 
{
visibility: visible;
}

/* Individual list items in flyout menus */ 
nav ul li ul li 
{
width: 100%; 
float: none; 
height: 34px;
line-height: 34px;
}

/* Links in flyout menus */
nav ul li ul li a, nav ul li ul li a:link, nav ul li ul li a:visited 
{ 
background: none;
display: block; 
text-align: left; 
text-indent: 10%;
width: 100%;
height: 100%; 
color: White;
text-decoration: none; 
outline: none;
}

/* Hover and active states in flyout menu */
nav ul li ul li a:hover, nav ul li ul li a:active 
{ 
background: #15619B;
color: yellow;
}