/* CSS Document dictating the general appearance of the GWPI web pages */

/* the following section specifies the positioning of page elements and the
   specific style attributes for said elements */

/* the body of the page will be centred using a sans-serif font family */
body { 
	font-family: Verdana, Arial, Helvetica, sans-serif;
	margin: auto;
	padding: 0;
	background-color: #FFFFFF;
	position: relative;
	width: 800px;
}

/* the banner graphic, or masthead, will be at the top of the page */
#banner {
	top: 0px;
	padding-top: 5px;
}
#banner img {
	padding: 0px;
	margin: 0px;
	border: 0;
}

/* the main navigation along the top of the page will be positioned below the
	banner graphic in such a manner that it will not move.
	There will be a red line along the top, dividing graphic and navigation, with
	complementary whitespace. */ 
#topnav {
	position: absolute;
	top: 180px;
	width: 800px;
	padding-top: 10px;
	padding-bottom: 10px;
	border-top: 1px solid #660000;
}

/* to align the navigation items */
#topnav table td {
	text-align: center;
	vertical-align: middle;
	padding: 0;
	margin: 0;
}

/* links in the topnav area will be plain black text. When the mouse is positioned
	over the words, the text will be red. */
#topnav a:link {
	color: #000000;
	text-decoration: none;
}

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

#topnav a:hover {
	color: #660000;
	text-decoration: none;
}

/* positioning the container for the page content and right-hand navigation, below
	the main navigation.
   It will have a fixed position for top and will be outlined in red. */
#contentbox {
	position:absolute;
	top: 225px;
	border: 1px solid #660000;
	margin: 0px;
	width: 800px;
}

/* positioning the right-side navigation area within the contentbox container.
	This area is not limited to navigation, although that is its primary purpose.
	The background color is blue; text size is diminished; heading 4 within this
	area has no margin above; links appear as plain black text and become red when
	the mouse is positioned above. Unordered lists in this area will have 
	no bullet and be indented 15 pixels.*/
#sidenav {
	float: right;
	width: 170px;
	margin: 5px;
	background-color: #A6B8CE;
	padding: 10px;
}

#sidenav a:link {
	color: #000000;
	text-decoration: none;
}

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

#sidenav a:hover {
	color: #660000;
	text-decoration: none;
}

#sidenav ul {
	list-style: none;
	margin: 0 0 0 15px;	
}

#sidenav hr {
	color: #496A85;
	width: 95%;
	height: 1px;
}

#sidenav p {
	font-size: 70%;
}

#sidenav h4 {
	margin-top: 0px;
	font-size: 90%;
	font-color: #660000;
	font-weight: normal;
}


/* this positions the page content in the left 2/3 of the contentbox.
	The font size will be diminished; appropriate whitespace is added to the top,
	bottom and left; the width that the page content may consume is limited in 
	pixels and the text will be justified. */
#content {
	font-size: 80%;
	padding-top: 5px;
	padding-left: 15px;
	padding-bottom: 15px;
	width: 550px;
}
/* the tags preceded by #content are specific attributes for the same tags within
	the page content. */
#content img {
	float: left;
	padding-right: 10px;
}

#content table {
	width: 100%;
}

#content table td {
	padding: 4px;
	text-align: left;
	vertical-align: top;
}

#content table th {
	padding: 4px;
	text-align: center;
	vertical-align: top;
}

#content table tr {
	
}

#content a:link {
	color: #0066CC;
	text-decoration: none;
}

#content a:visited {
	color: #0066CC;
	text-decoration: none;
}

#content a:hover {	
	color: #660000;
	text-decoration: none;
}

#content p {
	text-align: justify;
}

#profile {
	width: 100%;
	text-align: justify;
}

#profile img {
	padding-right: 15px;
	padding-bottom: 15px;
	float: left;
	border: none;
}

#profile h4 {
	color: #660000;
	font-weight: bold;
	font-size: small;
}

/* top is a style specification put in place for the content section of the research
index page, which is quite long, to get back to the top of the page */
#topstyle {
	padding-top: 10px;
	text-align: right;
}

/* #tail refers to the bottom section of the page, housing the contact information
	and the university logos for Guelph & Waterloo.
	Links will appear as bold black text turning red on mouse-over; overall font
	size is diminished to 70% of standard and text is aligned to the right-hand 
	side of the page. A red line appears at the top of this section.
	#tail is nested within #contentbox and thus has a border appearing to surround
	it whereas the style specified here has only a border on the top. */
	
#tail {
	font-size: 70%;
	text-align: right;
	padding: 5px;
	border-top: 1px solid #660000;
}

#tail a:link {
	color: #000000;
	text-decoration: none;
	font-weight: bold;
}

#tail a:visited {
	color: #000000;
	text-decoration: none;
	font-weight: bold;
}

#tail a:hover {
	color: #660000;
	text-decoration: none;
	font-weight: bold;
}
/* These sections were made for the logos within #tail for the sole purpose
	of aligning the university logos in a manner both pleasing and functional. */
#logos {
	float: left;
	margin: 5px;
}

#logos img {
	vertical-align: top;
	border: 0;

}

/* the following section controls parameters of basic content tag types 
   not specific to one section versus another */

h1 {
	margin-top: 0px;
	color: #660000;
}

h2 {
	color: #639A7A;
	font-size: 22px;
}

h3 {
}

h4 {
	color: #660000;
	font-weight: normal;
	font-size: small;
}

h5 {
}

h6 {
}

table {
	width: 100%;
}

.GuelphCourseCodes {
	font-weight: bold;
	color: #003399;
}

.disclaimer {
	font-size: 80%;
	font-weight: bold;
	color: #CC6600;
}

.bordertop td {
	border-top: solid 1px #660000;
}

#righthandside {
	float: right;
}