body {font-family: Georgian, "Times Roman" ,serif;
	
      background-color: #2424AC;
	  background-image: linear-gradient(to bottom, #FFFFFF, #2424AC);
		background-repeat: no-repeat;
}
#wrapper {  background-color: #FFFFFF; 
	        width: 90%;
			margin: auto;
            color: #888888;
} 



h2 {color: #0CA865; }
h3 { color: #568E89; }
h4 { color: #000066; }

header { background-image: url(HoustonDowntownSky1172xblue.png);
         background-repeat: no-repeat;
		background-size: cover;
}
h1 { text-align: center;
	color: #000066;
	font-weight: bold;
     font-size: 300%;
	 padding: 5% 0;
     text-shadow: 3px 3px 4px #FFFFFF;	
	 }
img.floatLeft		{
	float: left;
	margin-right: 12px
}
img.floatRight {
		float: right;
		margin-left: 12px
}
img { max-width: 100%;
		height: auto;}
nav { float: left;
      width: 20%;
	  font-size: 120%; 
}
nav a {text-decoration: none; 
transition: 4s ease-in-out;	  }

nav ul { list-style-type: none; }
nav a { text-decoration: none;}
nav a:link { color: #0CA865; }
nav a:visited { color: #2424AC; }
nav a:hover { color: #15629E; }
aside { float: right; 
        width: 25%;
		padding: 0 2.5%;
		
}
main { width: 50%;
           padding-right: 2%;
           margin-left: 20%;
}

footer { text-align: center;
         font-size: 80%;
		 font-style: italic;
		 color: #2424AC;
		 padding: 2.5%;
	     clear: both; 
}
table { margin: auto; 
        border: 5px solid #000066;  
		border-spacing: 0;
}
td, th { padding: 5px; 
         font-family: Arial, sans-serif;
         border-style: none; 
}
caption { font-family: Arial, sans-serif; 
          font-weight: bold;
		  font-size: 1.2em; 
		  padding-bottom: 5px; 
}
tr:nth-of-type(even) { background-color:#eaeaea; }
tr:first-of-type { background-color: #000066;
                   color: #eaeaea; }


#gallery { position: relative; 
			height: 200px; 
			}
#gallery ul {list-style-type: none;
    width: 300px; 
}
#gallery li { display: inline; 
     float: left;
	 padding: 10px; 
}
#gallery img { border-style: none;
}
#gallery a { text-decoration: none;
             font-style: italic;  
             color: #3399CC; 
}
#gallery span { position: absolute;
             left: -1000px;
               opacity: 0;
              transition:  opacity 3s ease-in-out; 
}
#gallery a:hover span {     
			position: absolute;
			top: 16px;
			left: 320px; 
			text-align: left; 
            opacity: 1; 
}
figure {    position: absolute;
			left: 280px; 
			text-align: left; 
            opacity: .25;
			color: #3399CC; 
}

header, main, nav, footer, figure, figcaption { display: block; }
video, embed { float: left; padding-right: 20px;
				padding-top: 5px; 
				padding-bottom: 5px;
				width: 80%; height: auto; max-width: 320; }

#mobile {	display: none; }
#desktop {	display: inline; }	

@media only screen and (max-width: 768px) {
          nav { float: none;
                width: auto;
                margin-top: 0;	
                text-align: center;	  }
          main { width: 60%;
                     margin-left: 5%; }
           aside { width: 30%;  
            }
           nav ul { padding-left: 0;
                }
         nav li { display: inline;
         margin: 0 2%; 
		 }

}
@media only screen and (max-width: 480px) {
            #wrapper { width: auto; }
		    h1 { margin-bottom: 0; }
			main { margin: 0 5%;      
                       width: auto;	}
		    nav { width: auto;	  }
			nav ul { padding-left: 0; 
			         text-align: center;}
			nav li {display: inline-block;
			        width: 5em;
			        font-size: 120%;
					text-align: center;
					box-shadow: 2px 2px 2px #568E89;
					background-color: #f6f9f9; 
					margin: 1%;
					padding: 2.5%; }
			#mobile { display: inline; }
			#desktop { display: none; }
			aside { display: none; }
			
			
				
}