/* body selector */
/* selectors define entire sections of your page. For instance the body selector defines how everything in the page will be viewed, the selectors for the headings, paragraph or even the table define how all of those elements will be viewed on the page everytime they are used */

body {
font-family: Futura, 'Gill Sans', Optima, sans-serif;
color: #00FFFF; /* lt blue */
background-color: #0000D6; /* dk blue */
margin-top: 10%;
margin-right: 5%;
margin-bottom: 10%;
margin-left: 15%;
}

/* block level selector */
p {
margin-right: 10em;
margin-bottom: 1em;
margin-left: 3em;
}

h1 {
color: #00FFFF; /* lt blue */
background-color: #6666FF; /* purple-blue */
text-align: center;
margin-bottom: .5em;
padding-top: .5em;
padding-right: .5em;
padding-bottom: .5em;
padding-left: .5em;
}

h2 {
text-align: left;
font-size: 200%;
margin-bottom: .5em;
}

/* text level selector */
table {
margin-top: 1em;
margin-right: 10em;
margin-bottom: 1em;
margin-left: 3em;
}

th, td {
color: #00FFFF; /* lt blue */
background-color: #3333FF; /* darker purple-blue */
text-align: center;
padding-top: 10px;
padding-right: 20px;
padding-bottom: 10px;
padding-left: 20px;
}

caption {
font-size: 200%;
font-weight: 700;
}

/* classes */
/* classes differ from selectors because you can use them multiple times in all different places. You can have 1 paragraph look different from all the other paragraphs, change every single letter in a word, or highlight a section of a table or anything. The same class can be used as many times as you want within a page. */

.photos { 
text-align: center;
margin-top: 1.5em;
margin-right: .75em;
margin-bottom: 1.5em;
padding-top: .5em;
padding-right: .5em;
padding-bottom: .5em;
}

.header { /* section title */
color: #00FFFF; /* lt blue */
background-color: #6666FF; /* purple-blue */
font-size: 120%;
font-weight: 700;
}

.large { /*enlarge first letter*/
font-size: 200%;
}

.center { /* center */
text-align: center;
}

/* psuedo classes */
a:link, a:visited {
color: #00FFFF; /* lt blue */
background-color: #0000D6; /* dk blue */
font-weight: 500;
text-decoration: underline;
}

a:hover, a:active {
color: #000000; /* black */
background-color: #FFFFFF; /* white */
text-decoration: underline; /* underscore */
}