/* 

Rachel J. Lee

*/

/* GENERAL */
body {
	font-family: helvetica;
	background: brown;
}

/* PARTS OF BODY (WILL OVERRIDE BODY SPECS) */
p {  
	font-family: helvetica;
	color: white;
}

h1 { 
	color: mistyrose;
	font-size: 300%;
	font-family: helvetica;
	font-style: italic;
 }

 h2 {
 	color: mistyrose;
 	font-size: 150%;
 	font-family: helvetica;
 	font-style: italic;
 	text-align: left;
 	text-decoration: underline;
 }

 h3 {
 	color: mistyrose;
 	font-size: 100%;
 	font-family: helvetica;
 	font-style: italic;
 	text-align: right;
 }

 hr {
 	color: white;
 	border-style: dotted;
 }

/* LINKS */
a:link { 
	color: white;
	font-size: 200%;
	font-family: helvetica;
	font-style: italic;
	text-decoration: none;
}

a:visited {
	color: white;
	font-size: 200%;
	font-family: helvetica;
	font-style: italic;
	text-decoration: none;
}

a:hover {
	text-shadow: 6px 6px 7px pink;

}

a:active {
	color: mistyrose;

}

/* you can style your elements however you'd like. I'm adding a border so we can see them */
iframe {
	border: solid mistyrose 4px;
	width: 100%;
	height: 500px;
}

pre {
	border: solid mistyrose 1px;
}

/* max-width: 100%; will prevent an element from extending beyond the page boundaries */
img {
	max-width: 100%;
}

/* width: 100%; will force an element to adopt the width of the page boundaries */
img.full-width {
	width: 100%;
}


/* CLASSES
---------- */

/* to apply different styles to different pages, you can add a class name to the body. when doing this, think about what you're changing and why. the overall structure and typogrphy around your site should feel consistent. any changes or deviations should be meaningful */
.home { 
	background: url(../images/dark-seas.gif);
}

.hover-title:hover {
	text-shadow: 6px 6px 7px brown;
	cursor: default;

}

.box {
	border: solid mistyrose 1px;
	box-shadow: -8px 8px 0px 1px mistyrose;
	padding: 0.5%;
}

/*DIV*/
/*________*/

div.gallery {
    margin: 5px;
    border: none;
    float: left;
    width: 180px;
}

div.gallery:hover {
    box-shadow: -4px 4px 3px 10px mistyrose;
}

div.gallery img {
    width: 100%;
    height: auto;
}

div.desc {
    padding: 15px;
    text-align: center;
}



/* CONTAINERS
---------- */
/* why we use wrappers, here: http://stackoverflow.com/a/5275428 */
.wrapper {
	margin: 30px auto;
	max-width: 90%;
}

.header {
	padding-bottom: 20px;
	padding-top: 20px;
}

.footer {
	padding-top: 20px;
}