/*	This CSS document contains the layout information for the Pages from the Past website.
	It was created by Stewart Baker for USC DAC on 01-11-2008
	Contact digital1@gwm.sc.edu for further details
	http://www.scmanuscripts.org
	http://www.pagesfromthepast.org		*/
	
/* The tags below deal with HTML tag display (e.g. the links) */
body {
	background-image:url(images/GwaraBG.jpg);
	font-weight:bold;
}

.header {
/* Note: can be appended to anything, such as <a class='header'> or <div class='header'> to create a bigger bolder font size for header-type purposes.*/
	text-align:center;
	text-decoration:none;
	font-size:24px;
	font-weight:bold;
}

img {
	border:0;
}

a {
	text-decoration: none;
	color:#003399;
}

a:visited {
	color:#882628;
	text-decoration: none;
}

/* The following div tags define the overall layout, and need to be included on every page for the layout to properly display. */
div.wrap {
/* This div tag determines the overall width of the website and centers it if the screen size is bigger than 800px.  Note that all other div tags must be enclosed within it in the HTML in order for it to work. */
	position:relative;
	width:800px;
	margin:0 auto;
   	text-align:left;
}

div.headerimg {
/* This div tag determines the location of the image headers for each page (e.g. about, contact, etc.)  It should be the first thing in the "wrap" div tag on every page EXCEPT the front page, which has a different header image div defined in the area at the bottom of this CSS document dedicated to the front page layout. */
	position:relative;
	text-align:center;
	width:800px;
	height:100px;
	top:5px;
}

div.content {
/* This div tag determines the location, width, and height of the content area. It should be the second thing in the "wrap" div tag on every page.  If necessary, slight changes in height and distance from top can be made on the individual HTML pages. */
	position:relative;
	top:25px;
	width:800px;
	height:400px;
	overflow:auto;
}

div.navi {
/* This div tag handles placement of the navigation menu.  In order for it to show in the correct location, it must be placed after the last of the other div tags while still being inside of div.wrap. */
	position:relative;
	width:800px;
	height:80px;
	top:25px;
	background-image:url(images/naviborder.gif);
	background-repeat:no-repeat;
}

div.navisub {
/* This div tag places the "cells" of the navigation menu.  The menu requires 6 of them currently, but if the number of options changes so must the width value of these.  The formula for determining width is 800/X where X is the number of "cells". */
	position:relative;
	width:130px;
	text-align:center;
	line-height:26px;
	font-size:16px;
	float:left;
}

div.navisub_2line {
/* This should be placed around the content, NOT the entire navisub tag in navigation menu "cells" which have 2 lines of text as opposed to one.  It will fix their vertical alignment and center them with the one-lined cell text. */
	position:relative;
	float:left;
	top:20px;
	text-align:center;
	width:125px;
	line-height:normal;
}

div.cellborder {
/* This div tag places the "cell border" on the navigation menu.  One should be included as the first item in each "cell" EXCEPT for the last "cell". */
	float:right;
	width:3px;
	height:80px;
	background-image:url(images/subborder.gif)
}

/* The div tags below handle the layout of the main page, which has a slightly different layout than the rest of the site.*/
div.frontheaderimg {
/* This div tag defines the placement and size of the header image for the main page.  It should be the first item inside the "Wrap" div on the main page of the site, used instead of div.headerimg. */
	position:relative;
	text-align:center;
	width:800px;
	height:100px;
	top:5px;
	background-repeat:no-repeat;
}

div.mainwrap {
	position:relative;
	width:850px;
	margin:0 auto;
   	text-align:left;
}

div.maincontent {
/* This div tag defines the placement and size of the content for the main page. It should be the second item inside the "Wrap" div on the main page of the site, used instead of div.content. */
	position:relative;
	left:110px;
	width:800px;
	height:515px;
}

div.mainsplit {
/* Two of these div tags on the main page and inside the content div serve to split the main page content into two columns.  The left-hand column should contain the javascript slideshow, and the right-hand column should contain the text and searching options. */
	position:relative;
	width:400px;
	height:400px;
	float:left;
}

img.gwarachange {
/* This tag should be appended to the image for the javasecript slideshow image. */
	position:relative;
	top:25px;
	border-color:#000000;
	border-width:thick;
	border-style:outset;
	border-left-color:#666666;
	border-top-color:#666666;
}

div.changetext {
/* This tag goes beneath the gwarachange image and contains the javascript to activate the text-changing slideshow*/
	position:relative;
	top:30px;
	width:350px;
	height:45px;
	text-align:center;
}

div.links {
/*This tag goes beneath the text-changing slideshow and contains the links to the Medieval music file and Manuscript Guide on USC Library's web site*/
	position:relative;
	top:60px;
	width:75px;
	height:100px;
	text-align:left;
}