/** * Eric Meyer's Reset CSS v2.0 (http://meyerweb.com/eric/tools/css/reset/) * http://cssreset.com */
html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary,time, mark, audio, video {	
	margin: 0;	
	padding: 0;	
	border: 0;	
	font-size: 100%;	
	font: inherit;	
	vertical-align: baseline;
	}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {	
display: block;}

body {	
	line-height: 1.5;
	font-family: Helvetica;
	background-color: gray;
	color: black; 
	}

ul {	
	list-style: none;
	}

blockquote, q {	
	quotes: none;
	}

blockquote:before, blockquote:after,q:before, q:after {	
	content: '';	
	content: none;
	}

table {	
	border-collapse: collapse;	border-spacing: 0;
	}	
	
/* end reset*/
	








/* default styles*/

/* color scheme
Base Color: #009AD9
Base Dark: #004059
Base medium light: #0076A6

 */


body {
		margin:0;
		padding:0;
		color:#000;
		background:#F4F4F4;
		font-family: Helvetica;
	}


/* The styles for the wrapper id create a 755 pixel box that is centered in the browser window with auto left/right margins. Top and bottom margins set to 20 pixels, but you can change this and not effect the centering. 
I have also put different color 1pixel borders around each div so that you see what is happening. 
Adding these borders forced me to change the original wrapper size from 750 pixels to 754 pixels in order to accomodate the increased size of the two columns (4 sides increased by 1 pixel= 4 pixels). */


#wrapper {
		width:80%;
		height:1000px;
		margin:5% auto;
		border: 0px solid #99c;
		background: #F4F4F4;
	}

/* The "header" is a box where the default is 100% width. So it goes to meet the edge of its parent, the wrapper id. 5px top and bottom, 10px left and right padding. Text is centered.   */

header {
		text-align: left;
		border: 1px solid #000;
		background-color: #373737;
		padding: 2%;
		height: 108px;
	}

header p {
	color: #C0B283;
	padding: 3px;
} 

header img {
	float: left;
	width: 25%;
	margin-right: 1%;
	clear: both;
	max-height: 85px;
	}
	
#h1{
    display: block;
    font-size: 1.5em;
    margin-block-start: 0.83em;
    margin-block-end: 0.83em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    font-weight: bold;
    }


/* The styles for the "nav" centers the box with left and right margins set to auto.    */


nav {
		padding:3px;
		text-align: right;
	}


/* The padding and margin styles for the ul (unordered list) inside the Nav id, reduces extra space around the nav bar. The Nav id (above) is already padded.   */

nav ul {
		margin:0;
		padding:0;
		list-style:none;
	}


/* The styles for li element (how the listed text appears) of the the unordered list, sets the display to inline, overriding the default block-level. This turns a list into a horizontal nav bar!  */

nav li {
		margin:0;
		padding:0;
		display: inline;
	}


/* The styles for li elements in their various link states. The first a element styles set up the basic look, then the a:link, a:visited receive same styels, as do a:hover and a:focus.  */	


nav li a {
		display: inline-block;
		text-align: center;
		padding: .5%;
		text-decoration: none;
		width: 5em;
		font-size: 1em;
		margin: .5%;
	}
	


nav li a:link, nav li a:visited  {
		color: #373737;
		background: #C0B283;
		border: 1px solid #373737;
	}



nav li a:hover, nav li a:focus {
		color: #373737;
		background: #d3d3d3;
		border: 1px solid #373737;
	}
	
 
#banner ul  {
 	background: #F4F4F4;
 	display: block;
 	width: 100%;
 	text-align: center;
 	
 	}  
   
#banner li  {
   width: 25%;
   margin: 3%;
   border: 1px solid black;
   display: inline-block;
   height: 400px;
   position: center;
}
   
#banner li a:hover, #banner li a:focus {
		color: #000;
		background: #d3d3d3;
		border: 1px solid #000;
		text-decoration: none;
		display: block;
	}

	
#banner li a:link, #banner li a:visited  {
		color: #373737;
		background: #C0B283;
		border: 1px solid #000;
		text-decoration: none;
		display: block;
	}	
	
#video {
	background: black url(img/vid.jpeg) no-repeat;
	background-size: 100% 100%;
	}	

#web {
	background: url(img/web.JPG) no-repeat;
	background-size: 100% 100%;
	}	


#images {
	background: url(img/img2.jpeg) no-repeat;
	background-size: 100% 100%;
	}	


.images {
	}	

.images img {
	float: left;
	width: 25%;
	margin-right: 1%;
	}
	
.images p {
	margin-top: 1%;
	 }
	
.clear  {
	clear: both;
	}


.video {
	}	

.video img {
	float: left;
	width: 25%;
	margin-right: 1%;
	}
	
.video p {
	margin-top: 1%;
	}
	
.clear video {
	clear: both;
	}


.web {
	}	

.web img {
	float: left;
	width: 25%;
	margin-right: 1%;
	}
	
.web p {
	margin-top: 1%;
	}
	
.clear web {
	clear: both;
	}



footer {
clear: both;
width: 100%;
padding: 2% 0;
text-align: right;
color: #009ad9;
background-color: #373737;
}



#wrapper banner {
	height:90%;
	}

h1 {
	color: #C0B283;
	font-size: 1.5em;
	margin 0 auto;
	float: left;
	text-decoration: none;	
		}
		
h1 a:link, h1 a:visited  {
		color:#C0B283;
		background: #004059;
	}



h1 a:hover, h1 a:focus {
		color: #000;
		background: #d3d3d3;
		border: 1px solid #000;
	}
		
h2 {
	color: #004059;
}

address a {
	color: #C0B283;
	text-decoration: none;
	padding: 2%;
	}


img  {
	width: 100%;
	}
	
	
a:link, a:visited {
	text-decoration: none;
}

a:hover, a:focus  {
	text-decoration: none;


}


#me p {
	padding: 20px 10px 20px 10px;
    margin-right: 20px;
	margin-left: 20px;
	margin-bottom: 10px;   
	 }


#program p {
	padding: 20px 10px 20px 10px;
    margin-right: 20px;
	margin-left: 20px;
	margin-bottom: 10px;  
	 }

#program h2 {
	padding: 20px 10px 5px 10px;
    margin-right: 20px;
	margin-left: 20px;
	  
	 }


#me h2 {
	padding: 20px 10px 5px 10px;
    margin-right: 20px;
	margin-left: 20px;
	  
	 }



}



/* tablet styles*/
@media only screen and (min-width:500px) and (max-width:700px) {


	
} /* ends tablet styles*/
	
	
/* desktop styles*/
@media only screen and (min-width:701px) {


	}

   
}  /* ends desktop styles*/