/* Define the basic size of the header and footer */

#header, #footer {
	position: relative;
	width: 750px;
	height: 50px;
	overflow: hidden;
	background-color: #FF1200;
}

/* Hide all the internal text, we'll be replacing them with images */

#header span, #footer span {
	display: none;
}

/* Negate the list aspects of the navigation list */

ul.navigation {
	margin: 0;
	padding: 0;
}
ul.navigation li {
	list-style: none;
	display: inline;
	margin: 0;
	padding: 0;
}
ul.navigation a {
	position: absolute;
	display: block;
	overflow: hidden;
}

/* Styles for active header elements */

#header ul.navigation span.contents {
	position: absolute;
	display: block;
	overflow: hidden;
	background-position: 0 -10px;
}
#header ul.navigation span.masthead {
	position: absolute;
	display: block;
	overflow: hidden;
	background-position: 0 -10px;
}
#header ul.navigation span.archives {
	position: absolute;
	display: block;
	overflow: hidden;
	background-position: 0 -10px;
}

/* Define the sizes and images of the navigation elements */

ul.navigation .contents {
	width: 77px;
	height: 10px;
	background-image: url(../images/navigation_contents.gif);
}
ul.navigation .masthead {
	width: 79px;
	height: 10px;
	background-image: url(../images/navigation_masthead.gif);
}
ul.navigation .archives {
	width: 71px;
	height: 10px;
	background-image: url(../images/navigation_archives.gif);
}
ul.navigation a.top-of-page {
	width: 98px;
	height: 10px;
	background-image: url(../images/navigation_topofpage.gif);
}
div.filigree div.separator {
	position: absolute;
	overflow: hidden;
	height: 10px;
	width: 20px;
	background-image: url(../images/navigation_separator.gif);
	background-repeat: no-repeat;
	background-position: center top;
}

/* For rollovers, shift the background image up to reveal second state image */

ul.navigation a:hover {
	background-position: 0px -10px;
}


/* Position the header elements */

#header div.site-title, #header span.site-title {
	display: block;
	position: absolute;
	width: 225px;
	height: 50px;
	overflow: hidden;
	margin: 0;
	padding: 0;
	top: 0px;
	left: 375px;
}
#header span.site-title {
	background-color: white;
	background-image: url(../images/keepgoing.gif);
}
#header div.issue-info, #header span.issue-info {
	display: block;
	position: absolute;
	width: 150px;
	height: 50px;
	overflow: hidden;
	top: 0px;
	left: 600px;
	background-color: black;
	background-image: url(../images/issue_20.gif);
}

/*	These positions use the 'Masthead' button */
#header .contents {
	top: 20px;
	left: 54px;
}
#header div.separator.one {
	top: 20px;
	left: 131px;
}
#header .masthead {
	top: 20px;
	left: 151px;
}
#header div.separator.two {
	top: 20px;
	left: 230px;
}
#header .archives {
	top: 20px;
	left: 250px;
}


/* Position the footer elements */

#footer div.black {
	position: absolute;
	width: 150px;
	height: 50px;
	top: 0px;
	background-color: black;
	left: 225px;
}
body.contents #footer div.black {
}
body.article #footer div.black {
	left: 0px;
}
#footer div.white {
	position: absolute;
	width: 225px;
	height: 50px;
	top: 0px;
	background-color: white;
	left: 0px;
}
body.contents #footer div.white {
}
body.article #footer div.white {
	left: 150px;
}
#footer a.top-of-page {
	top: 20px;
	left: 465px;
}
#footer div.separator.one {
	top: 20px;
	left: 563px;
}
#footer a.contents {
	top: 20px;
	left: 583px;
}
body.contents #footer .masthead {
	top: 20px;
	left: 477px;
}
body.contents #footer .archives {
	top: 20px;
	left: 576px;
}
body.contents #footer div.separator.one {
	top: 20px;
	left: 556px;
}