* html body {font-size:70%;/* all IE */}
/* hide from mac ie5.x \*/
* html body {font-size:69%;}
/* end hide from mac ie5 */
body {
	font-size:70%;/* all other browsers */
	margin:0;
	padding:0;
	color:#000;
	background-color:#fff;
	font-family: Verdana, Helvetica, sans-serif;
}


/** 
 * Site-wide link colours
 */
a:link {color: #b1062b;}
a:visited {color: #b1062b;}
a:hover {color: #f00;}

/* END: Site-wide link colours */


/* ---------------------------------
GLOBAL ELEMENTS
----------------------------------*/

/** 
 * XHTML Elements
 *
 * The following overwrites some default browser behaviours for rendering
 * particular XHTML elements
 */

abbr:hover,
acronym:hover
{
    cursor: help;
}
/* END: XHTML Elements */

#content .norm {
	font-size:80%;
	font-weight: normal !important;}

/* global hr styles */
hr {display:none}

div.hr {
	margin:0;
	padding:4px 0 4px 0;
	background:url(/images/dots.gif) center center repeat-x;
}

/* following class is to hide elements that give extra information for users of assistive technology such as screenreaders - for more info see: http://www.webaim.org/techniques/articles/hiddentext */
.hidden {
	position:absolute;
 	left:0px;
 	top:-500px;
 	width:1px;
 	height:1px;
 	overflow:hidden;
}

/* following declarations clears elements without a clearing element such as <br clear> being needed. For more info see: http://www.positioniseverything.net/easyclearing.html */
.clearfix:after {
    content:url(/images/clear.gif);
    display:block;
    height:0;
    clear:both;
    visibility:hidden;
}

/* a div with this class is sometimes required for correct display in Mac IE5.x */
div.cleardiv {
	clear:both;
	padding:0 !important;
}

span.cleardiv {
	display:block !important;
	clear:both !important;
	padding:0 !important;
	margin:0 !important;
}
/* end clearing declarations */


.clear {clear:both;}
.clearleft {clear:left;}
#content span.free {
	color:#c03;
	text-decoration:none;
}


/* generic bold/italic style - use *only* in content where it would be nonsensical to use a specific class, such as class="nav-header" or something */
.b {font-weight:bold;}
.i {font-style:italic;}
.latin {font-style:italic;}


/* end global hr styles */

/* ---------------------------------
END GLOBAL ELEMENTS
----------------------------------*/



/* ---------------------------------
PAGE LAYOUT
----------------------------------*/
#constrain {
	clear:both;
	text-align:center;
	padding:0 1%;
}

#constrain #header,
#constrain #footer
 {
	max-width:780px;
	margin-left:auto;
	margin-right:auto;
	text-align:left;
	background-color: #fff;
}



#constrain .constrain {
	max-width:780px;
	margin-left:auto;
	margin-right:auto;
	text-align:left;
	background: #fff url(/images/background.gif) repeat-x top left;
}


#constrain .constrain:after,
#constrain #header:after,
#constrain #footer:after {
    content:url(/images/clear.gif);
    display:block;
    height:0;
    clear:both;
    visibility:hidden;
}


.row {
	list-style:none;
	margin:0;
	padding:0;
	width:100%;
	clear:both;
}
	
.row li:after {
	content:url(/images/clear.gif);
    display:block;
    height:0;
    clear:both;
    visibility:hidden;
}

.left {
	float:left;
	width:42%;
	margin:0;
	padding:0 0 0 2%;
}
	
.right {
	width:52%;
	margin:0;
	padding:0 2% 0 0;
	float: right;
}

	
.row .left dl {
	padding:10px 10px 7em 10px;
	margin:0 0 0 55px;
	background: #b1062e;
	color:#fff;
}

.left div.container {
	padding:10px;
	margin:0 0 0 55px;
	background: #b1062e;
	color:#fff;
}

.row .right dl,
.right div.container {
	padding:10px 55px 10px 0px;
	margin:	0;
}
		
.row dt {
	font-weight:bold;
	margin:0;
	padding:0;
	font-size:150%;
}
	
.row dd {
	margin:0;
	padding:0;
}




/* ---------------------------------
PAGE CONTENT	
----------------------------------*/

h3 {
	margin-bottom:5px;
}




/* contact details xoxo list */

ul.contact-details,
ul.contact-details li,
ul.contact-details li ul,
ul.contact-details li ul li {
		list-style:none;
		margin:0;
		padding:0;
	}

ul.contact-details li.vcard {margin-bottom:30px;}


ul.links {
	list-style:none;
	margin:0;
	padding:0;
}

ul.links li.arrow-link {
	background:url(/images/arrow.gif) no-repeat 0 50%;
	margin:0;
	padding:0 0 0 15px;
}


/* header section and logo images */

#footer {background-color:#fff;}


#header {
	background:#fff url(/images/grey_arrow.gif) no-repeat right bottom;
}


#header .left a {
	height: 54px;
	width: 252px;
}

#header .container {
	padding-top:0; 
	padding-bottom:0;
}

#header .left .container {
	background: #b1062e url(/images/logo.gif) no-repeat 10px 40px;
	min-height: 54px;
	padding-top:40px;
}

#header .right {
	padding:0;
	float:left;
}

#header .right .logo-status {
	background: url(/images/logo-status.gif) no-repeat 0 40px;
	min-height: 54px;
	padding-top:40px;
	margin-left:16px;
	
}



/* calendar image */

.left div.calendar {
	background: #b1062e url(/images/calendar.jpg) no-repeat 50% 0;
	padding:10px 0 11em 0;
	margin:0 0 0 55px;
}

.left img.calendar {
	height:200px;
	margin:0;
	padding:0;
}

/* icons */

#current-status li.right dl {background: url(/images/about.gif) no-repeat 100% 15px;}	
#current-status li.left {background: url(/images/status.gif) no-repeat 5% 15px;}

#maintainance li.right div.container {background: url(/images/contact.gif) no-repeat 100% 25px;}	
#maintainance li.left {background: url(/images/events.gif) no-repeat 5% 25px;}

#resources {background: url(/images/resources.gif) no-repeat right top;}	

/* end contact details xoxo list */

