body {
   margin: 0px;
   padding: 0px;
   background-color: #ffffff;
   /* The scrollbar stuff is just for IE, but it's kinda nifty. */
   scrollbar-3dlight-color: #cccccc;
   scrollbar-arrow-color: #2a68a4;
   scrollbar-base-color: #cccccc;
   scrollbar-darkshadow-color: #cccccc;
   scrollbar-face-color: #cccccc;
   scrollbar-highlight-color: #cccccc;
   scrollbar-shadow-color: #cccccc;
   scrollbar-track-color: #cccccc;
}

/* These are the content container layers, and they correspond to the divs on 
   the HTML page. */
div.header {
   width: 600px;
   height: 125px;
   position: absolute;
   margin-left: -300px;
   left: 50%;
   background-image: url("images/header.jpg"/*tpa=http://www.marinamariani.com/images/header.jpg*//*tpa=http://www.marinamariani.com/images/header.jpg*/);
}
div.nav {
   width: 275px;
   height: 375px;
   position: absolute;
   margin-left: -450px;
   left: 50%;
   top: 225px;
}
div.contentBox {
   width: 425px;
   height: 375px;
   position: absolute;
   margin-left: -125px;
   left: 50%;
   top: 125px;
}
div.content {
   width: 350px;
   height: 325px;
   position: relative;
   z-index: 100;
   left: 45px;
   top: 15px;
}

/* These are the actual content layers, and they too, correspond to the divs on 
   the HTML page. */
#about, #face, #hi, #bio, #interests, #class, #plans, #links {
   visibility: hidden;
   width: 525px;
   height: 415px;
   position: absolute;
   z-index: 1;
   padding-right: 30px;
   left: 10px;
   top: 225px;
   overflow: auto;
   text-align: justify;
   font-size: 14px;
   font-weight: 400;
}

/* I put all the stuff that was common to all the content layers in one common 
   rule above, and then broke them out individually to add the specifics that 
   apply only to that div. */
#face {
   position: absolute;
   margin-top: -150px;
   top: 50%;
}
#hi {
   position: absolute;
   margin-top: -100px;
   top: 50%;
   text-align: center;
}
#bio {
   background-image: url("images/bio_bg.jpg"/*tpa=http://www.marinamariani.com/images/bio_bg.jpg*//*tpa=http://www.marinamariani.com/images/bio_bg.jpg*/);
}
#interests {
   background-image: url("images/interests_bg.jpg"/*tpa=http://www.marinamariani.com/images/interests_bg.jpg*//*tpa=http://www.marinamariani.com/images/interests_bg.jpg*/);
}
#class {
   background-image: url("images/class_bg.jpg"/*tpa=http://www.marinamariani.com/images/class_bg.jpg*//*tpa=http://www.marinamariani.com/images/class_bg.jpg*/);
}
#plans {
   background-image: url("images/plans_bg.jpg"/*tpa=http://www.marinamariani.com/images/plans_bg.jpg*//*tpa=http://www.marinamariani.com/images/plans_bg.jpg*/);
}
#links {
   background-image: url("images/links_bg.jpg"/*tpa=http://www.marinamariani.com/images/links_bg.jpg*//*tpa=http://www.marinamariani.com/images/links_bg.jpg*/);
   text-align: left;
}

/* This is the evolution of link, alink and vlink in the body tag.  You can do 
   a lot more than specify colours in CSS!  Additionally, I've used classes to 
   further specify a different set of link, alink, vlink and hover properties 
   for each content div.  I like to colour coordinate these things. */ 
a:link.about {
   color: #8f7078;
   text-decoration: none;
}
a:visited.about {
   color: #000000;
   text-decoration: none;
}
a:hover.about {
   background-color: #ffffff;
   border: 2px #8f7078 dashed;
   text-decoration: none;
}
a:active.about {
   color: #ffffff;
   background-color: #000000;
   border: 2px #8f7078 dashed;
   text-decoration: none;
}
a:link.links {
   color: #ffffff;
   font-size: 15px;
   font-weight: 700;
   text-decoration: none;
}
a:visited.links {
   color: #3015f8;
   text-decoration: none;
}
a:hover.links {
   padding: 3px;
   color: #ffffff;
   background-color: #000000;
   border: 2px #3015f8 dashed;
   text-decoration: none;
}
a:active.links {
   padding: 3px;
   color: #3015f8;
   background-color: #ffffff;
   border: 2px #3015f8 dashed;
   text-decoration: none;
}

/* With CSS, you can modify the default properties of an HTML element; by 
   specifying a zero-pixel border for my images, I am saved the step of having 
   to add border=0 to every single image tag on my page(s). */
img {
   border: 0px;
}
h1 {
   text-align: center;
   font-size: 16px;
   font-weight: 600;
}
ul {
   margin-left: 10px;
   padding-left: 10px;
   list-style-image: url("images/bullet.jpg"/*tpa=http://www.marinamariani.com/images/bullet.jpg*//*tpa=http://www.marinamariani.com/images/bullet.jpg*/);
   list-style-type: circle;
}
li {
   display: list-item;
}

/* Unlike a div, which -- unless otherwise specified -- creates space before 
   and after itself, span is an inline element, so it's great for precisely 
   placing a single thing on your page, like an image. */
span.hi {
   position: absolute;
   left: 330px;
}
span.face {
   position: absolute;
   left: 50px;
}
span.baby {
   position: relative;
   left: 40px;
}
span.about {
   position: absolute;
   left: 180px;
   bottom: 110px;
}
span.bio {
   position: absolute;
   left: 270px;
   bottom: 50px;
}