/* Here is a simple way of doing 3 column layout that works in IE without
the box model hack.

Need to test this on Firefox, Netscape, Safari and Opera!!


The XHTML needs to be structured in the following way
<div id="container">
	<div id="top" />
	<div id="left" />
	<div id="right" />
	<div id="middle" />
	<div id="bottom" />
</div>

Note the middle column has to appear in the XHTML *after* the right column
*/

/* Thanks to Birkbeck student jlusk for these style tips
   This stylesheet is based on http://www.bbk.ac.uk/~jlusk01/intma/style.css
   which is itself loosely based on http://css.maxdesign.com.au/floatutorial/tutorial0916.htm	
*/
/* Created by Phil Gooch 5 February 2005 */
			


/* structure styles */

body {
	background-color: #ffffff;
	color: #000000;
	margin: 5px;
	padding: 2px;
	border: 0;
	font-family: "Lucida Grande", Verdana, "Lucida Sans Unicode", "Lucida Console", LucidaGrande, Lucida, "Trebuchet MS", Trebuchet, Helvetica, Arial, sans-serif ;
	line-height: 15px;
	font-size: 11px;
}

 #container {
	position: absolute;
	top: 20px;
	left:  5%;
	width: 90%; 
	padding: 1px;
	background-color: #ccdddd;
}


#header {
	color: #ffffff;
	background: 0 0 #006699;
	margin: 5px 5px 5px 5px;
	padding: 5px;
}

/* navigation and content divs */
#primary_nav {
	clear: both;
	background-color: #88bbbb;
	margin: 5px 5px 0 5px;
	padding: 4px;
	margin: 4px 4px 10px 4px;
	border: solid 1px #000000 ;
}


#secondary_nav {
	margin-left: 5px;
	padding: 6px;
	width: 150px;		/* OK to use fixed width, it resizes anyway */
	height: 60% ;
	float: left;		/* float the left column to the left */
	background-color : #88bbbb;
	padding: 10px;
	border : 1px solid #c0c0c0 ; /*  temporary border */;
}

#main_content {
	margin-left: 170px;	/* OK to use fixed margins, it resizes anyway */
	padding: 15px 20px;
	margin-right: 50px;
	border-top : 1px solid #c0c0c0 ;
}


#right_blurb {
	float: right;		/* float the right column to the right */
	padding: 6px;
	width: 180px;		/* OK to use fixed width, it resizes anyway */
	height: 60% ;
	padding: 10px 10px 10px 10px;
	margin: 0 5px 0px 5px;
	background-color: #ccdddd;
	border: 1px solid #c0c0c0;
	line-height: 14px;
	font-size: 9px ;
}

#footer {
	padding: 6px;
	margin:  5px 5px 5px 5px;
	border : 1px solid #c0c0c0 ; /*  temporary border */
	text-align: right;
	clear: both;
	color: #ffffff;
	background-color: #88bbbb;
	font-size: 10px ;
	font-weight: bold;
}

/* headings */
h1, h2, h3, h4, h5 {
	margin: 20px 0px 0px 0px;
	font-family: "American Typewriter", "Lucida Console",
     "Trebuchet MS", Trebuchet, Lucida, "Lucida Grande", "Lucida Sans Unicode", sans-serif;
	font-weight: normal;
	line-height: 1.3em;
}

h1 {
	font-size: 24px;
	letter-spacing: 2px;
}

h2 {
	font-size: 17px;
	letter-spacing: 1px;
}

/* header divs and content */ 


#header h1 {
	text-transform: lowercase;
	font-size: 40px;
	line-height: 42px;
	letter-spacing: 4px;
	word-spacing: 7px;
	margin: 0px 5px 0px 0px;
	padding: 0px 0px 90px 250px;
	text-align: center;
	background-image: url(../images/photo1.jpg) ; 
 	background-repeat : no-repeat; 
 	background-position : left top; /* image at top left */ 
}

#header img {
	display: block;
	text-transform: lowercase;
	text-align: right;
	padding: 0px 0px 42px 300px;
	background-image: url(../images/photo1.jpg) ; 
 	background-repeat : no-repeat ; 
 	background-position : top left ; /* image at top left */ 
 }

#header h2 {
	position:  absolute;
	top:  90px;
	left:  300px;
	margin: 0px 5px 0px 0px;
	padding: 15px 0px 0px 0px;
	text-align: right;
	text-transform: lowercase;
	text-align: center;
	font-size: 16px;
	letter-spacing: 2px;
	word-spacing: 3px;
	line-height: 18px;
}




.sidehead {
	background-color: #006699;
	color: #ffffff;
	font-weight: bold;
	margin: 15px 0 5px 0 ;
	padding: 5px;
	font-family: "American Typewriter", "Lucida Console",
     "Trebuchet MS", Trebuchet, Lucida, "Lucida Grande", "Lucida Sans Unicode", sans-serif;
	font-size: 14px; 
}

.sidenavlink {
	font-size: 10px  ;
}


/* links */
.navnolink {
	font-size: 11px  ; 
	font-weight: 700 ;
}

a:link, a:visited, a:hover, a:active 	{
	text-decoration: underline ;
}

.sidenavnolink {
	display: block; 
	padding: 8px; 
	margin:  4px;
	color: #000000; 
	font-size: 10px  ;
	font-weight: 700;
	text-decoration: none; 
}

.sidenavnolink a {
	text-decoration: none; 
}

#primary_nav a {
	font-size: 11px;
}	

#primary_nav a:link {
     font-weight: bold;
     text-decoration: none;
     color: #0000ff;
     background: transparent;
 }
 
 #primary_nav a:visited {
     font-weight: bold;
     text-decoration: none;
     color: #0000ff;
     background: transparent;
 }
 
 #primary_nav a:hover {
     font-weight: bold;
     text-decoration: none;
     color: #ffffff;
     background: transparent;
 }
 
 #primary_nav a:active {
     font-weight: bold;
     text-decoration: underline;
     color: #5c5c5c;
     background: transparent;
 }
 
 .sidenavlink a {
	display: block; 
	text-decoration: none; 
	padding: 8px; 
	margin: 4px;
	color: #0000ff;
	border: 1px solid #7c7c7c; 
	background-color: #ccdddd;
	font-size: 10px;
}
 
.sidenavlink a:link {
     font-weight: bold;
     text-decoration: none;
     color: #0000ff;
 }

.sidenavlink a:visited {
     font-weight: bold;
     text-decoration: none;
     color: #0000ff;
}

 .sidenavlink a:hover {
	color: #ffffff;
	background-color: #006699;
	text-decoration: underline;
}

.sidelink a:active {
     font-weight: bold;
     text-decoration: none;
     color: #5c5c5c;
}


/* other styles */
.large {
	color: #0000ff;
	font-family: "American Typewriter", "Lucida Console", "Courier New", Courier, mono, serif;
	text-align: center;
	letter-spacing: 2px;
	font-size: 15px;
}

.italic {
	font-style: italic;
	font-weight: 600;
	font-size: 15px;
}