body { font-size: 100%; height: 100%; background-color: #ffffff; color: #333333; text-decoration: none; text-align: center; }
#outer {height: 100%; overflow: visible;}
img { border-style: none; }
a img {border: none; }
img{ margin: auto; display:block; }

h1 { font-family: "Times New Roman", Times, Georgia, serif; font-size: 24px; font-weight: normal; font-style: italic; text-align: center; line-height: 12px; }
h2 { font-family: "Trebuchet MS", Arial, Helvetica, SunSans-Regular, sans-serif; font-size: 20px; line-height: 20px; font-weight: bold; font-style: normal; text-align: center; color: #ffffff; }
p { font-family: "Times New Roman", Times, Georgia, serif; font-size: 14px; font-weight: normal; font-style: normal; line-height: 17px; text-align: left; }

.sans-serif-bold { font-family: Arial Narrow, Arial, Helvetica, Verdana, Geneva, sans-serif; font-weight: bold; }
.bold { font-weight: bold; }
.italic { font-style: italic; }
.center { text-align: center; }
.calendar-1-font { font-family: Arial Narrow, Arial, Helvetica, Verdana, Geneva, sans-serif; font-weight: bold; font-size: 12px; line-height: 14px; text-align: center; }
.calendar-2-font { font-family: Arial Narrow, Arial, Helvetica, Verdana, Geneva, sans-serif; font-weight: bold; font-size: 18px; line-height: 18px; text-align: center; letter-spacing: -0.05em; }
.sub-head-text { font-size: 14px; font-weight: normal; }
.blue { color: #00a0f0; }
.red { color: #ed1b25; }
.copyright { margin: auto; width: 500px; padding-top: 20px; padding-bottom: 20px; font-family: Arial, Helvetica, Verdana, Geneva, sans-serif; font-size: 10px; text-align: center;}

.clear-both { clear: both; }

/* .clearfix extends containers to enclose a float box. Use preceding a another div class. */
.clearfix:after { content: "."; display: block; height: 0; visibility: hidden; clear: both; }

/* for mac IE */
.clearfix {display: inline-block;} 

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */

.header { position: relative; margin: 20px auto auto; width: 800px; border-top: 12px solid #c6c8ca; padding-top: 10px;  }

.header-image {  float: left; width: 138px; height: 180px; }

.header-content { float: left; width: 650px; padding-left: 12px; }

.header-content-top { position: relative; width: 650px; }
.header-content-top-logo { position: absolute; left: 0px; width: 200px; text-align: left; }
.header-content-top-text { position: absolute; left: 210px; width: 425px; padding-top: 44px }

.header-linkbox { position: absolute; top: 100px; left: 150px; width: 650px; background-image: url(../images-homepage/divider-links-header.gif); background-repeat: no-repeat; padding-left: 2px; }

.header-linkspacer { float: left;  width: 2px; } /* use with divider-link-spacer.gif */
.header-links { float: left; width: 92px; font-family: "Arial Narrow", Arial, Helvetica, Verdana, Geneva, sans-serif; font-size: 12px; line-height: 14px; text-align: center; letter-spacing: -0.01em; padding-top: 12px; }

.header-content-bottom { position: absolute; top: 140px; left: 150px; width: 650px; }
.subscribe-text { position: absolute; bottom: -10px; left: 120px; width: 540px; text-align: center; }

/* main page containers */
.container-main { position: relative; margin: 10px auto auto; width: 772px; padding: 10px 10px 125px; border: solid 4px #c6c8ca; z-index: 0; }
.container-inline { position: relative; width: 772px; margin: auto; z-index: 0; }

/* page divider - use with divider-page.gif */
.divider-page { margin: auto; width: 772px; text-align: center; padding-top: 4px; padding-bottom: 10px; }

/* container for this month image and text */
.container-float-left-600 { position: relative; float: left; width: 600px; z-index: 0; padding-right: 10px; }

.caption { font-family: Arial Narrow, Arial, Helvetica, Verdana, Geneva, sans-serif; font-size: 44px; line-height: 44px; font-weight: bold; text-align: center; letter-spacing: -0.01em; }

.divider-vertical-502 { float: left; width: 1px;   }

/* containers to the right - for books */
#container-books-160 { position: relative; float: left; width: 160px; padding-left: 0px; }
.book-top { position: absolute; top: 0px;  left: 0px; width: 160px; }
.book-bottom { position: absolute; top: 320px; left: 0px; width: 160px; }

/* Three containers sections below - two small, one large for Bell Rock pic */
/* Calendar */
.container-float-left-150-1 { float: left; width: 152px; max-height: 215px; z-index: 0; }
.container-float-left-150-1-1 { position: absolute; top: 75px; left: 0px; width: 152px; }

.divider-vertical-196 { position: absolute; left: 152px; width: 2px; top: 0px; }

/* Film PIN  */
.container-float-left-150-2 { position: absolute; left: 154px; top: 0; width: 152px; max-height: 217px; }
.container-float-left-150-2-2 { position: absolute; left: 0px; top: 42px; width: 150px; }
.container-float-left-150-2-3 { position: absolute; left: 0px; top: 198px; width: 150px; }

a.movies:link { display: block; background-image: url(../images-homepage/movies-off.gif); text-decoration: none; }
a.movies:visited { display: block; background-image: url(../images-homepage/movies-off.gif); text-decoration: none; }
a.movies:hover { display: block; background-image: url(../images-homepage/movies-on.gif); text-decoration: none; }
a.movies:active { display: block; background-image: url(../images-homepage/movies-on.gif); text-decoration: none; }

a.melinda:link { display: block; background-image: url(../images-homepage/melinda-off.gif); text-decoration: none; }
a.melinda:visited { display: block; background-image: url(../images-homepage/melinda-off.gif); text-decoration: none; }
a.melinda:hover { display: block; background-image: url(../images-homepage/melinda-on.gif); text-decoration: none; }
a.melinda:active { display: block; background-image: url(../images-homepage/melinda-on.gif); text-decoration: none; }

.divider-vertical-215 { position: absolute; left: 306px; width: 1px; top: 0px; }

/* Bell Rock pic */
.container-float-left-450 { position: absolute; top: 0px; left: 310px; width: 450px; padding-left: 12px; z-index: 0; }

/* The float on top of the image; i.e., red link text box in upper left */
.thismonth-layer { position: absolute; top: 0; left: 0; z-index: 15; }
.thismonth { float: left; color: #ffffff; background-color: #ed1b25; padding-left: 10px; padding-right: 10px; padding-top: 4px; padding-bottom: 4px; font-family: "Arial Narrow", Arial, Helvetica, Verdana, Geneva, sans-serif; font-size: 24px; line-height: 24px; text-align: center; letter-spacing: -0.01em; font-weight: bold; }

/* The two floats on top of the image - red text box in upper left; and the Send US Photos link with no box */
/* Note: "z-index: 0" must be used in all positioned parent containers to address Internet Explorer z-index bug */
.snapshots-layer { position: absolute; top: 0; left: 12px; z-index: 15; }
.snapshots { float: left; color: #ffffff; background-color: #ed1b25; padding-left: 10px; padding-right: 10px; padding-top: 4px; padding-bottom: 4px; font-family: "Arial Narrow", Arial, Helvetica, Verdana, Geneva, sans-serif; font-size: 20px; line-height: 20px; text-align: center; letter-spacing: -0.01em; font-weight: bold; }
.send-us { float: left; color: #ffffff; background-color: transparent; padding-left: 20px; padding-right: 10px; padding-top: 4px; font-family: "Times New Roman", Times, Georgia, serif; font-size: 20px; line-height: 18px; text-align: center; font-weight: bold; }

/* Conditional style sheet for IE-windows is used to change "top" to address IE adding parent containter dimensions to child, thus adding extra vertical offfset */
.feature-archive { float: left; position: relative; top: 112px; width: 766px; background-image: url(../images-homepage/feature-archive-back.gif); background-repeat: no-repeat; padding-left: 6px; padding-bottom: 10px; z-index: -10; }

.feature-archive-title { float: left; position: relative; width: 766px; padding-left: 6px; padding-top : 6px; padding-bottom: 12px;font-family: "Times New Roman", Times, Georgia, serif; font-size: 22px; line-height: 28px; text-align: left; }
.feature { float: left; width: 148px; padding-left: 2px; padding-right: 2px; z-index: -10; }

/* Conditional style sheet for IE-windows is used to change "top" to address IE adding parent containter dimensions to child, thus adding extra vertical offfset */
.footer { float: left; position: relative; top: 120px; width: 770px; }
.footer-linkbox {  margin: auto; width: 468px; background-image: url(../images-homepage/divider-links-footer.gif); background-repeat: no-repeat; padding-left: 2px; }

a:link {
	color: #333333;
	text-decoration: none;
}
a:visited {
	color: #333333;
	text-decoration: none;
}
a:hover {
	color: #ed1b25;
	text-decoration: none;
}
a:active {
	color: #ed1b25;
	text-decoration: none;
}

.subscribe-text a:link {
	color: #ffffff;
	text-decoration: none;
}
.subscribe-text a:visited {
	color: #ffffff;
	text-decoration: none;
}
.subscribe-text a:hover {
	color: #f1e5cc;
	text-decoration: none;
}
.subscribe-text a:active {
	color: #f1e5cc;
	text-decoration: none;
}


.send-us a:link {
	color: #ffffff;
	text-decoration: none;
}
.send-us a:visited {
	color: #ffffff;
	text-decoration: none;
}
.send-us a:hover {
	color: #ed1b25;
	text-decoration: none;
}
.send-us a:active {
	color: #ed1b25;
	text-decoration: none;
}

a.redbox:link {
	color: #ffffff;
	text-decoration: none;
}
a.redbox:visited {
	color: #ffffff;
	text-decoration: none;
}
a.redbox:hover {
	color: #00a0f0;
	text-decoration: none;
}
a.redbox:active {
	color: #00a0f0;
	text-decoration: none;
}

a.blue-red:link {
	color: #00a0f0;
	text-decoration: none;
}
a.blue-red:visited {
	color: #00a0f0;
	text-decoration: none;
}
a.blue-red:hover {
	color: #ed1b25;
	text-decoration: none;
}
a.blue-red:active {
	color: #ed1b25;
	text-decoration: none;
}

a.red-blue:link {
	color: #ed1b25;
	text-decoration: none;
}
a.red-blue:visited {
	color: #ed1b25;
	text-decoration: none;
}
a.red-blue:hover {
	color: #00a0f0;
	text-decoration: none;
}
a.red-blue:active {
	color: #00a0f0;
	text-decoration: none;
}