/*Syntax
	htmlSelector		{property:value; property:value;}
	#idSelector		{}	for a single unique element, id must not start with a number
	.classSelector	{}	used for several elements, class name must not start with a number
	p.class			{}	only the paragraph element is affected by the statements in this class
	.class p		{}	create a separate style for p elements in this class
	#a #b p			{}	create a separate style for p elements in element b which is in element a (i.e. nesting)
	h1,h2,p			{}	apply style to a group of elements

	Specificity is more significant than the order of the style sheets
		#			scores 100
		.			scores 10
		p			scores 1 (and likewise other HTML tags)
*/

/*Reset the tags we use*/
html
	{color:#000;background:#FFF;}
html,body,div,p,a,img
	{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent;}
table
	{border-collapse:collapse;border-spacing:0;font-size:inherit;font:100%;}
th,td
	{margin:0;padding:0;text-align:left;font-style:normal;font-weight:normal;}

/*Define our styles*/
body{
	background-color:#ffffff;
	text-align:center;}	/* Doesn't centre #page, but in for good measure */
#page{
	width:950px;
	min-width:950px;
	margin:10px auto;	/* This is what centres #page horizontally */
	text-align:left;}
#banner{
	width:900px;	/* The width property does not include padding, borders or margins */
	height:95px;	/* The height property does not include padding, borders or margins */
	margin:0;		/* Is this necessary to make sure margin:0 auto doesn't inherit from #page? */
	padding-top:25px;
	padding-bottom:0px;
	padding-right:25px;
	padding-left:25px;
	background-color:#414042;
	text-align:left;}
#logo{
	float:left;}
#logosuffix{
	float:left;
	padding-top:34px;
	padding-bottom:0px;
	padding-right:0px;
	padding-left:10px;
	font-family:Times,serif;
	font-size:40px;
	font-style:normal;
	font-weight:normal;
	line-height:40px;
	color:#ffffff;}
#navbar{
	float:right;
	padding-top:50px;
	padding-bottom:0px;
	padding-right:0px;
	padding-left:0px;
	font-family:Arial,sans-serif;
	font-size:16px;
	font-style:normal;
	font-weight:normal;
	line-height:16px;
	color:#ff0000;}	/* Any text errenously not in an anchor or the .me class will show up in red */
#navbar .me{
	color:#a5dff9;}
#navbar a:link{
	color:#ffffff;
	text-decoration:none;}
#navbar a:visited{
	color:#ffffff;
	text-decoration:none;}
#navbar a:active{
	color:#ffffff;
	text-decoration:none;}
#navbar a:hover{
	color:#ffffff;
	text-decoration:underline;}
#main{
	width:950px;
	height:345px;
	margin:0;		/* Is this necessary to make sure margin:0 auto doesn't inherit from #page? */
	background-repeat:no-repeat;}
#textpanel{
	width:335px;
	height:320px;
	float:right;
	padding-top:25px;
	padding-bottom:0px;
	padding-right:25px;
	padding-left:25px;
	background-color:#CCDDE7;
	/* There is a variety of advice on how to set Opacity. Older articles, e.g. one from 11/4/2007 suggest:
	filter:alpha(opacity=90);	This one you need for IE
	-moz-opacity:0.9;			You need this one to support way old school versions of the Mozilla browsers like Netscape Navigator
	-khtml-opacity: 0.9;		This is for way old versions of Safari and Konqueror
	opacity: 0.9;				This is the “most important” one because it is the current standard in CSS. This will work in most versions of Firefox, Safari, and Opera. */
	/* Considering newer articles at www.impressivewebs.com/css-opacity-reference/
	and www.quirksmode.org/css/opacity.html the following seems sensible: */
	opacity: 0.9;														/* Everything except IE */
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";	/* IE8 specific and must come before next statment to make IE8-as-IE7 work */
	filter: alpha(opacity=90);											/* IE 6-8, but in IE6 and IE7 the element must "have layout" such as width or position */
	font-family:Arial,sans-serif;
	font-size:13px;
	font-style:normal;
	font-weight:normal;
	line-height:19px;	/* In IE8 at least, the text seems to be centred vertically within the line height */
	color:#414042;
	text-align:justify;}
#textpanel .bold{
	font-weight:bold;}
#textpanel p{
	margin-bottom:1em;}
#textpanel p.hdng{
	text-align:center;
	font-weight:bold;
	margin-bottom:0em;}
#textpanel p.indent{
	margin-left:25px;}
#textpanel p.narrow{
	margin-left:90px;
	margin-right:90px;}
#textpanel table{
	width:100%;
	border-collapse:collapse;}
#textpanel th,td{
	border:1px solid #414042;
	background-color:#ffffff;
	padding:3px;
	text-align:left;
	vertical-align:top;}
#textpanel a:link{
	color:#414042;
	text-decoration:underline;}
#textpanel a:visited{
	color:#414042;
	text-decoration:underline;}
#textpanel a:active{
	color:#414042;
	text-decoration:underline;}
#textpanel a:hover{
	color:#414042;
	text-decoration:underline;}
#footer{
	width:900px;
	height:95px;
	margin:0;		/* Is this necessary to make sure margin:0 auto doesn't inherit from #page? */
	padding-top:25px;
	padding-bottom:0px;
	padding-right:25px;
	padding-left:25px;
	background-color:#414042;
	text-align:left;}
#strapanel{
	float:left;
	font-family:Arial,sans-serif;
	font-size:18px;
	font-style:normal;
	font-weight:normal;
	line-height:30px;
	color:#ffffff;}
#strapanel .emph1{
	font-size:26px;
	font-weight:bold;
	color:#a5dff9;}
#strapanel .emph2{
	font-size:22px;
	font-weight:bold;}
#addrpanel{
	float:right;
	padding-top:8px;
	padding-bottom:0px;
	padding-right:0px;
	padding-left:0px;
	font-family:Arial,sans-serif;
	font-size:12px;
	font-style:normal;
	font-weight:normal;
	line-height:19px;
	color:#ffffff;
	text-align:right;}
#addrpanel a:link{
	color:#ffffff;
	text-decoration:none;}
#addrpanel a:visited{
	color:#ffffff;
	text-decoration:none;}
#addrpanel a:active{
	color:#ffffff;
	text-decoration:none;}
#addrpanel a:hover{
	color:#ffffff;
	text-decoration:underline;}