*{margin:0; padding:0;}
/* this clears away any preliminary settings so I can control my own margin and padding */
body{
font-family:arial,helvetica,sans-serif;
font-size:0.8em;
color:#000066;
background-color:aqua;
line-height:1.5;
background-image:url(../images/tentacles.gif);
background-repeat:repeat;
}
div{border:1px;}

h2{
text-align:center;
text-transform:uppercase;
margin-bottom:20px;
}
h4{text-align:left;}

ul{list-style-type:circle;}

dl{padding:20px;}
dt{
text-transform:uppercase;
font-weight:bold;
}
a{text-decoration:none;}
/* this removes underline from my links */

a:link{color:white;}
a:visited{color:yellow;}
a:hover{color:blue;}
a:active{color:orange;}

.underline{text-decoration:underline;}

.links{
color:yellow;
background-color:#6699cc;
text-decoration:underline;
padding:0.1em 0.5em;
}
/* this is for the links in my citations. I actually wanted to keep those underlined */

.link{
display:inline;
border:2px solid #000066;
background-color:#6699cc;
margin-right:0.6em;
padding: 0.1em 0.5em;
}
/* this is for my navigational links */

#main{background-color:#000066; }
#examples{background-color:#000066; }
#resources{background-color:#000066; }
#homepage{border:2px solid yellow;}
/* I'm using these to specifically target and mark the link of the current page,
and to make my home page link stand out from the navigation for My Favorite Novels */

#wrapper{
margin: 0 auto;
min-width: 400px;
max-width: 1170px;
}
#header{
color:#ffff99;
background-color:#000066;
font-size:2em;
text-transform:uppercase;
text-align:right;
line-height: 0.7;
padding-right:2em;
}
#nav{
font-size:0.9em;
text-transform:uppercase;
background-color:#3333cc;
padding: 0.2em 0 0.2em 2em;
}
#intro{
background-color:#ffff99;
border:1px solid white;
padding:19px;
width:350px;
height:250px;
float:left;
}
#fantasy{
background-color:white;
border:1px solid #ffff99;
padding:19px;
width:350px;
height:250px;
float:left;
}
#alternatehistory{
background-color:#ffff99;
border:1px solid white;
padding:19px;
width:350px;
height:250px;
float:left;
}
#timetravel{
background-color:white;
border:1px solid #ffff99;
padding:19px;
width:350px;
height:250px;
float:left;
}
#otherdimensional{
background-color:#ffff99;
border:1px solid white;
padding:19px;
width:350px;
height:250px;
float:left;
}
#metaphysical{
background-color:white;
border:1px solid #ffff99;
padding:19px;
width:350px;
height:250px;
float:left;
}
#modernfantasy{
background-color:#ffff99;
border:1px solid white;
padding:19px;
width:350px;
height:250px;
float:left;
}
#horror{
background-color:white;
border:1px solid #ffff99;
padding:19px;
width:350px;
height:250px;
float:left;
}
#scifi{
background-color:#ffff99;
border:1px solid white;
padding:19px;
width:350px;
height:250px;
float:left;
}
#postapocalyptic{
background-color:white;
border:1px solid #ffff99;
padding:19px;
width:350px;
height:250px;
float:left;
}
#spaceopera{
background-color:#ffff99;
border:1px solid white;
padding:19px;
width:350px;
height:250px;
float:left;
}
#humorousfantasy{
background-color:#ffff99;
width:480px;
height:200px;
padding:10px 20px;
float:left;
}
#modernfantasy2{
background-color:white;
width:480px;
height:200px;
padding:10px 20px;
float:left;
}
#alternateworlds{
background-color:#ffff99;
width:480px;
height:200px;
padding:10px 20px;
float:left;
}
#bugwars{
background-color:white;
width:480px;
height:200px;
padding:10px 20px;
float:left;
}

#reference{
background-color:#ffff99;
width:500px;
float:left;
}

#reference2{
background-color:white;
width:500px;
float:right;
}

#footer{
background-color:#000066;
padding:1em;
clear:both;
}