Title Text
Serenity

/* Position the "Serenity" iamge in the upper right of the large image. It's also important to take it out of the document stream, hence the absolute. */
.pagetitle {
position: absolute;
top: 20px;
width: 650px;
text-align: right;
}

/* Position and modify the main links */
.ldiv {
display: inline; /* To allow div elements to be displayed side by side */
margin: 5px;
padding-top: 7px;
padding-bottom: 7px;
padding-left: 24px;
padding-right: 24px;
background-color: #152270;
border: 2px solid #152270; /* So they won't change size when hovering */
}

/* Change the background and border of the links when hovering */
.ldiv:hover {
background-color: #4855A0;
border: 2px solid #002244
}

/* Add a border to the top and bottom of the main image, adds effect */
.mainPic {
border-top: 3px solid #000055;
border-bottom: 3px solid #000055;
}

/* Outer Container */
/* This is an easy way to adjust everything at once, as well as set the limits of the content size */
div#container {
width: 750px;
padding-top: 25px;
background-color: #336699;
margin-left: auto; /* Margin left and right auto dynamically centers the page in the browser window */
margin-right: auto;
}

/* Inner Containers */
/* The container for the main image, nothing special here */
div#title {
margin-left: 25px;
width: 700px;
}

/* Position the links at the bottom of the main image and center them on the page. It's also important to take them out of the document stream, hence the absolute */
div#links {
position: absolute;
top: 366px;
margin-left: 6px;
text-align: center;
}

/* The main content for each page. Margins, padding, and font added for readability. Overflow auto tells the browser to add a scroll bar if the content exceeds the size of the element */
div#content {
margin-top: 20px;
padding: 5px 14px;
height: 415px;
overflow: auto;
color: #CCCCFF;
font-family: Comic Sans MS;
}

/* Simply center the image */
div#movInfo {
text-align: center;
}

/* Make the copyright and other information a bit less noticable, this way it doesn't distract from the content. */
div#footer {
text-align: center;
color: #000033;
font-size: 10pt;
font-family: palatino linotype;
padding: 0px 5px 10px 5px;
}

/* Hyperlink behavior definitions for movie links */
/* Nothing special here, just making the links look nice. */
a.links:link {
text-decoration: none;
color: #CCCCFF;
font-family: palatino linotype;
font-weight: bold;
font-size: 80%;
}

a.links:visited {
text-decoration: none;
color: #CCCCFF;
font-family: palatino linotype;
font-weight: bold;
font-size: 80%;
}

a.links:hover {
text-decoration: none;
}

/* Hyperlink behavior definitions for validator links */
/* Nothing special here, just making the links stand out a bit better. */
a.vlink:link {
text-decoration: none;
color: #000000;
font-weight: bold;
}

a.vlink:visited {
text-decoration: none;
color: #000000;
}

a.vlink:hover {
text-decoration: none;
color: #550000;
}


Movie Info