/* 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;
}

@media (min-width: 780px) 
{

#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: 5%;
}

/*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;
}

}
/* end of min width 780 */





@media (max-width: 779px) 
{
#wrapper 
{
/* Set your own widths, % for fluid, px for fixed */
width: 100%;
min-width: 320px;
max-width: 780px;
/* Vertical margins, and auto to center */
margin: 0 auto;
}

/* Sample styles for 3-column layout */
/* Section containing multiple columns */
.columns 
{
display: block;
width: 20%;
/* Border is optional, style to taste */
border: solid 1px silver;
}

/* Aside columns in columns div */
.columns aside 
{
display: block;
/* Use any width and padding you like */
width: 20%;
padding: 1%;
}

/* Main article in the columns */
.columns article 
{
padding: 1%;
width: 98%;
text-align: center;
}

/*Optional, style to taste */
.columns .left 
{
background-color: #ddd;
border-right: solid 1px gray;
}

.columns .right 
{
background-color: #ddd;
border-left: solid 1px gray;
}

/* Shrink and float the side column images */
.columns aside img 
{
width: 20%;
margin: 1%;
float: left;
}


/* Hide side column text */
.columns aside p 
{
display: none;
}

/* This ensures that the background for the
side column is as tall as the images */
.columns aside 
{
overflow: hidden;
}

}
/* end @media (max-width: 779px) */









/* 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(pix/navback2.png) repeat-x, url(pix/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(pix/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(pix/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(pix/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(pix/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: 44px;
line-height: 44px;
}

/* 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;
}



.footer-format
{
 opacity:1;
 color: white;
}


footer 
{
    padding-top:15%;
    padding-bottom:2%;
    background-color: #FFCF64;
    opacity:1;
    color: white;
    background: blue;
    background: -moz-linear-gradient(bottom, blue 0%, green 100%);
    background: -webkit-linear-gradient(bottom, blue 0%, green 100%);
    background: -o-linear-gradient(bottom, blue 0%, green 100%);
    background: -ms-linear-gradient(bottom, blue 0%, green 100%);
    background: linear-gradient(to top, blue 0%,green 100%);
}