﻿html {
  border: 0 red dashed;    
  margin: 0;
  padding: 1em;
  height: 100%;
  background-color: rgb(85, 126, 185); /* For browsers that don't understand linear gradients. */
  background-image: -webkit-linear-gradient(115deg, rgb(104, 24, 136) 0%,  rgb(85, 126, 185) 50%); 
  background-image: linear-gradient(115deg, rgb(104, 24, 136) 0%,  rgb(85, 126, 185) 50%);   
}

body {
  border: 1px rgb(7, 43, 96) solid;
  padding: 0 1em 1em 1em;
  max-width: 1024px;
  margin: 0 auto;
  background-color: #EEE;   
  border-radius: 5px;
  box-shadow: 6px 6px 14px 0px hsla(0, 0%, 0%, 0.15);         
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}

article, aside, footer {
  display: block; /* For browsers that don't understand the semantic elements. */
}

a {
  text-decoration: none;
  color: rgb(15, 161, 184);
}

a:hover {
  text-decoration: underline;
}

/***************************************************************************************************************************************************/

ul#navWrapper { /* Nav items container. */
  border: 0 green dashed;
	float: left; /* Required for all nav item children that are floated to float relative to this container.  */
  margin-left: -39px; /* Account for missing bullet space. */
  font-weight: bold;
}   

ul#navWrapper a {
  border: 0 purple dashed;        
  display: block; /* Anchor tags are normally inline tags. */
	white-space: nowrap; /* Stop text wrapping. */      
	color: #EEE;
	text-decoration: none;
  padding: 0.25em;	
}

ul#navWrapper ul {
  display: none; /* Hide the dropdown menu items (the top nav items remain visible). */
  position: absolute; /* Position the dropdown menu items absolutely so that when the dropdown drops, it does not push any content below it downward. */
  background-color: rgba(255, 255, 255, 0); /* Draw a transparent background behind the dropdown <li> elements to fix an IE bug. */  
}

ul#navWrapper li { 
  float: left; /* Make the top level nav items horizontally adjacent. */  
  list-style: none; /* Remove bullets from all nav items. */  
  margin-right: 0.5em; /* Place some space between the adjacent top nav items. */
  border: 1px rgb(7, 43, 96) solid;
  border-radius: 5px;
  box-shadow: 6px 6px 14px 0px hsla(0, 0%, 0%, 0.15);      
  background-color: rgb(85, 126, 185);
}

ul#navWrapper li li {
  float: none; /* Undo the above "ul#navWrapper li" float. */
  margin-left: -42px; /* Account for missing bullet space. */
  margin-top: 3px; /* Place some space between the vertical dropdown menu items. */    
}

ul#navWrapper li li:first-child { 
  margin-top: 4px; /* Add a touch more space between a top nav item and its associated dropdown menu. */
}

ul#navWrapper li:hover ul {
  display: block; /* Unhide the dropdown menu items. */
}

ul#navWrapper li:hover,  ul#navWrapper li:hover li {
  background-color: rgb(235, 124, 0);
}

ul#navWrapper ul li:hover {
  background-color: rgb(85, 126, 185);
}

/***************************************************************************************************************************************************/    

#banner   {
  clear: both; /* Clear all prior floats. */
  border: 1px rgb(7, 43, 96) solid;
  border-radius: 5px;
  box-shadow: 6px 6px 14px 0px hsla(0, 0%, 0%, 0.15);      
  background-color: rgb(85, 126, 185); /* For browsers that don't understand linear gradients. */
  background-image: -webkit-linear-gradient(115deg, rgb(104, 24, 136) 0%,  rgb(85, 126, 185) 50%); 
  background-image: linear-gradient(115deg, rgb(104, 24, 136) 0%,  rgb(85, 126, 185) 50%);   
  padding: 0.5em 1em 0.9em 1em;
}    

#banner a {
  border: 0 bisque dashed;
  font-size: 2.5em;  
  text-decoration: none;
  color: rgb(225, 194, 17);  
  color: #EEE;
  text-shadow: rgb(104, 24, 136) 0.1em 0.1em 0.2em;
} 

/***************************************************************************************************************************************************/

aside {
  border: 1px rgb(7, 43, 96) solid;
  float: right;
  border-radius: 5px;
  box-shadow: 6px 6px 14px 0px hsla(0, 0%, 0%, 0.15);      
  padding: 0.5em;  
  font-family:"Courier New", Courier, monospace;
  font-size: 0.75em;   
  margin-left: 0.5em;
  background-color: rgb(230, 230, 230);
} 

aside button {
  float: right;
}   

aside div {
  border: 0 black dashed;
  width: 15em; /* The width of the aside box. */
} 

aside ul {
  margin-top: 0;
}   
 
aside ul li {
  border: 0 aquamarine dashed;
  margin-left: -1.25em;
  padding-top: 1em; /* Place some vertical space between the bulleted items in the aside. */
}    

/***************************************************************************************************************************************************/

#tagCloud {
  clear: both;
  float: right;
  border: 1px rgb(7, 43, 96) solid;
  border-radius: 5px;
  box-shadow: 6px 6px 14px 0px hsla(0, 0%, 0%, 0.15);      
  padding-right: 1em;  
  font-size: 0.75em;   
  margin-left: 0.5em;
  margin-top: 1em;
  background-color: rgb(230, 230, 230);
}  
 
#tagCloud ul li {
  border: 0 purple dashed;
  margin-left: -1.25em;
}    

/***************************************************************************************************************************************************/

footer {
  border: 0 tomato dashed;
  clear: both; /* This doesn't hurt - a safety first thing. */
  border-top: 1px rgb(7, 43, 96) solid;
  font-size: 60%;
  padding: 1.5em 0 1em 0;
}  

footer #imageDisclaimer {
  float: left;
} 

footer #copyright {
  float: right;
}       

/***************************************************************************************************************************************************/

.note {
  font-weight: bold;
  margin-right: 0.25em;
}
