/************************
 *
 * Overall styles
 *
 ************************/


body {  font-family: Verdana, Arial, Helvetica, sans-serif; 
	font-size: 10pt; /* see http://www.w3schools.com/css/css_font.asp */ 
	color: black;
	margin:0;
	background:#cccccc;
	text-align:center;  /* for Internet Explorer - centres div#page */
}

/* main body element that sets the page width */
div#page {
	width:960px;
	background: white;
	border: 1px solid black;
	/* To centre the element: (note Explorer ignores this) */
	margin:0 auto;
	text-align: center; /* for Internet Explorer - centres div#content */
}



div#content{
	margin: 0 30px 0 30px;
	text-align: left; /* to override the alignment of #body */
	min-height: 450px; /* short pages get a decent height */
}


div.display-block{
	
}

div.display-block-editor{
	border: 1px solid #800000;
	margin: 10px 0 10px 0;
}


/* popup pages are slightly different -- width and height are not defined here */
div#page-popup {
/*	width:960px;  */
	background: white;
	border: 1px solid black;
	/* To centre the element: (note Explorer ignores this) */
	margin:0 auto;
	text-align: center; /* for Internet Explorer - centres div#content */
}
div#content-popup{
	margin: 0 10px 0 10px;
	text-align: left; /* to override the alignment of #body */
/*	min-height: 450px; *//* short pages get a decent height */
}


/* standard paragraph */
p {   
	font-size: 10pt;
      color: black;
      text-align: justify
}



/* the main headings of the website */
h1 {  font-size: 16pt; 
      font-weight: bold; 
      color: #000000;
      text-align: center;
      margin: .5em 0px .5em 0px;
}

/* for top level headings that aren't at the top of the page */
h1.continue{margin: 1.5em 0 .5em 0; text-align:left;}


h2 {  text-align:left;
      margin: 1.5em 0px .5em 0px;
      font-size: 12pt; 
      color: #800000;
}

/* for top level headings that aren't at the top of the page */
h2.continue{margin: 2.5em 0 .5em 0}

h2.fancy { 	
	margin: 2.5em 0 .5em 0;
	padding: 10px 0 10px 0;
	border-top: 2px solid #990000;
}
/* see also h2.resultdate below */

/* resultdivision is used on the results page (see below) */
h3, .resultdivision {  
	font-size: 11pt; 
    font-weight: bold; 
    color: #000000;
    margin: 1.5em 0px .5em 0px;
}

h3 { text-align: left; 
}

h4 { text-align: left; 
      color: #800000;
}



ul,ol {  
	text-align: left;
	margin-top: .75em;
	margin-bottom: .75em;
	list-style-image: url(/img/bullet.gif);
}

/* was twitter */
ul.whats_hot_list {
	list-style: none;
	margin-left: 0;
	padding-left: 0;
	width:186px; 
}

/* was twitter */
ul.whats_hot_list li {
	list-style: none;
	padding-left: 0;
	margin: .5em 0px .5em 0px;
}

span.whats_hot_text {
	font-size: 8pt;
}
span.whats_hot_date {
	font-size: 7pt;
	color: gray;
}




/* used to format text that isn't full paragraphs */
p.shortpara {
	text-align: left;
}

/* used to format text that isn't full paragraphs */
.centrepara {
	text-align: center;
}

/* used to format hyperlinks that represent different viewing options (etc) */
.options {
	text-align: center;
	font-size: 8pt;
}
p.options a:link, p.options a:hover, p.options a:visited, p.options a:active {font-size: 8pt;} /* hyperlinks within an options class have the same size as the options class (for some reason, doesn't inherit */

/* used to provide short piece of information (not as 'serious' as 'warning') */
.notice { 
	text-align: center; 
	margin: 20px 0 20px 0;
}



/* warning used if article isn't published or doesn't exist, or
   viewer doesn't have credentials to perform an action */
.warning {
	margin: 20px 0 20px 0;
	font-style: italic;
	text-align: center; 
}


/* for serious errors! */
.error {
	margin: 20px 0 20px 0;
	font-weight: bold;
	text-align: center; 
      color: #800000;
}


/* navigator text for the bottom of long pages */
.navigator {
	text-align: center;
	margin: 20px 0 20px 0;
	font-size: 8pt;
}

.quote {
	margin: 0 30px 0 30px;
}

/************************
 *
 * Front page styles
 *
 ************************/


/* used as the main body element (after the menu) for the front page  */
div#front{
/*	no longer used!
	width:1020px;
	margin-left:auto;
	margin-right:auto;
	buffer:0; */
}


div#front-main {
	float:left;
	width: 750px; 
	overflow:hidden;
	margin: 0;
	padding: 0;
	text-align:left;
	border-right: 4px dotted #990000;
}




div#front-sidebar {
	float:left;overflow:hidden; 
	margin: 0px;
	padding: 0 10px 0 10px;
	width: 186px; /* total width 960 less #front-main width of 750 less right margin 4px less 2*10px padding */
	text-align:center;
}


div#front-footer {
	clear: left;
}


h2.sidebar-title { /* same as default h2 but with less top margin */
	margin: 0.5em 0px 0.5em;
}

div.sidebar-block {
	text-align:center;
	margin: 0;
	padding: 10px 0 10px 0;
	border-top: 2px solid #990000;
	width: 100%;
}

/* common styles for sidebar text */
p.sidebar-text, p.sidebar-text-left, ul#twitter_update_list li {
	font-size: 8pt;
}

/* additional styles: */
p.sidebar-text {
	text-align: center;
}

/* additional styles: */
p.sidebar-text-left {
	text-align:left;
}

p.footer-text {
	text-align: center;
	font-size: 8pt;
}


ul#whats_hot { 
list-style: none outside none;
margin-left: 0px;
padding-left: 0px;
width: 186px;
}


/************************
 *
 * Image classes
 *
 ************************/

img {border:0;}
/* images inline with text - on RHS of text. Use with <IMG> or <DIV>. */
.floatRight {
	float:right;
	margin: .5em 0em .5em 1.5em;
}



.floatLeft {
	float:left;
	margin: .5em 1.5em .5em 0em;
}

.centre {
	display: block;   
	margin-left: auto;   
	margin-right: auto;
	text-align:center; 
}

.caption {
	font-size: 80%;
	font-style: italic;
	text-align:center;
}

/* 16*16 icons - e.g. PDF icon used for downloads (IMG class)*/
img.icon16x16, img.pdf-icon {
/*	float:left; */
	margin-top:0px;
	margin-right:3px;
	position:relative; top:4px /* this position is a function of text size and image size (i.e. if you change neighbouring text size you will probably need to change this position) */
}



/************************
 *
 * Main website styles
 *
 ************************/



/************************
 *
 * link styles
 *
 ************************/

/* the following classes are used to format the top (main) menu */
/*
a.topmenu:link {  font-size: 11pt; 
      font-weight: bold; 
	font-family:verdana;
      color: white; 
      text-decoration: none
}
a.topmenu:visited { font-size: 11pt; 
      font-weight: bold; 
      color: white; 
      text-decoration: none 
}
a.topmenu:hover {  font-size: 11pt; 
      font-weight: bold; 
      color: #CCCCCC; 
      text-decoration: underline
}
a.topmenu:active { font-size: 11pt; 
      font-weight: bold; 
      color: white; 
      text-decoration: underline 
}

*/

td {  font-family: Verdana, Arial, Helvetica, sans-serif; 
      font-size: 10pt
}
a.path:active {  color: red}
a.path:hover { color: red}
a.path:link { color: black}
a.path:visited { color: black}

a:link {
	font-family: verdana, arial, helevatica, sans-serif;
	color: #124F88;
	text-decoration: none;
}
/* These styles are no longer used (hopefully) */
/*
a:hover {
	font-family: verdana, arial, helevatica, sans-serif;
	color: #1C79D0;
	text-decoration: underline;
}
a:visited {
	font-family: verdana, arial, helevatica, sans-serif;
	color: #124F88;
	text-decoration: none;
}
a:visited:hover {
	font-family: verdana, arial, helevatica, sans-serif;
	color: #1C79D0;
	text-decoration: underline;
}
*/

a.tinytext:link {
	font-family: verdana, arial, helevatica, sans-serif;
	font-size: 7pt;
	color: #124F88;
	text-decoration: none;
}
a.tinytext:hover {
	font-family: verdana, arial, helevatica, sans-serif;
	font-size: 7pt;
	color: #1C79D0;
	text-decoration: underline;
}
a.tinytext:visited {
	font-family: verdana, arial, helevatica, sans-serif;
	font-size: 7pt;
	color: #124F88;
	text-decoration: none;
}
a.tinytext:visited:hover {
	font-family: verdana, arial, helevatica, sans-serif;
	font-size: 7pt;
	color: #1C79D0;
	text-decoration: underline;
}



/************************
 *
 * misc styles
 *
 ************************/


.newsheading {  font-size: 11pt; 
      font-weight: bold; 
      color: #880000
}




/* define a horizontal red line */
hr.red {
      color: #800000;
      background-color: #800000;
      height: 1px;
}

.em {color: #800000; font-weight: bold;} /* emphasised text */
.de_em {color: #888888;} /* de-emphasised text */
.date {font-size: 7pt; font-style: italic}
.updated {font-size: 8pt; font-style: italic; color: #800000}
.syllabus {color: red}
.non-syllabus {color: black}
.table-header {color: #800000; font-weight: bold }
.horiz-line {background-color: #800000 }
.table-header-bright {color: red; font-weight: bold }
.close {margin-top: 6px; margin-bottom: 6px}

.tinytext {font-size: 7pt}
.tinytextcentred {font-size: 7pt; text-align:center; }
.tinyital {font-size: 8pt; font-style: italic}
.red {color: red}
.white {color: white}
.dkred {color: #800000}
.indent { padding-left: 25pt }


/* style used to format text that indicates a result is off-site */
.offsite {
	font-style: italic;
}

.note {font-style: italic;}

/* Image styles: */
img.top {vertical-align:text-top}
img.bottom {vertical-align:text-bottom}

.eventtype{ /* used with the event/result type icons on the results page */
	text-align:center;
	margin-top:0px;
	margin-bottom:12px;
}



/******************************************
 *
 * Tables
 *
 ******************************************/

/* The following classes are for tables presenting
   data (i.e lists, results, etc) */
table.data { /* sets width and centres */
	width:100%;
	border-collapse: collapse;

	/* to centre the table in case the 100% width is overridden */
	/* Explorer doesn't render auto-margins as centred but the tables seem to be centred anyway */
	margin-left:auto;  
	margin-right:auto; 
}
	

table.data tr.relayheader 
	{text-align:left;
	color: #800000;
	font-weight:bold;
	font-size: 11pt;
	height:30pt;
	vertical-align:bottom;
}
table.data tr.odd /* black on white */
	{background-color: white;
	text-align:left;
	color:black;
	border: thin solid #d8d8d8;
}
table.data tr.odd td
	{ /* for explorer which doesn't render tr borders */
	border-bottom: thin solid #d8d8d8;
}
table.data tr.even /* black on grey */
	{background-color: #d8d8d8;
	text-align:left;
	color:black;
	border: thin solid #d8d8d8; /* Explorer doesn't render this */
}
table.data tr.header  /* white on dk red */
	{background-color: #800000;
	font-weight:bold;
	text-align:left;
	color:white;
	border: thin solid #800000; /* Explorer doesn't render this */ 
}

table.data td {
	padding: 4px 2px 4px 2px;
}

table.data .unpublished  { /* black on grey */
	color:gray;
}



/* for representatives page */
div.one-rep{
	background-color: #dfdfdf;
	margin-left: 140px; 
	width: 640px; /* 140*2+640 is size of page container */
	border: 1px solid white;
	clear:both;
}

div.rep-photo {
	background-color: transparent;
	min-height: 155px; 
	width:116px; /* photo must be narrower than this */
	float:left;
	text-align:right;
	padding-right: 4px;
}
div.reps-text {
	background-color: #efefef;
	width:520px;
	float:left;
}

div.reps-text-title {
	background-color: #800000;
	font-weight:bold;
	text-align:left;
	color:white;
	height: 16px;
}
div.reps-text-body {
	min-height: 122px;
	text-align:left;
	color:black;
}



/* the following definitions are for links in table headers */
a.tableheader:link {
	color: white;
	text-decoration: none;
}
a.tableheader:hover {
	color: white;
	text-decoration: underline;
}
a.tableheader:visited {
	color: white;
	text-decoration: none;
}
a.tableheader:visited:hover {
	color: white;
	text-decoration: underline;
}


        
        
/******************************************
 *
 * Results page classes
 *
 ******************************************/

/* resultdate: used to format the date on the results page */
h2.resultdate { /* same as H2 but centred */
      margin: 0.5em 0px 1.5em 0px;
      text-align: center;}
      
.resultdivision { /* same as H3 but centred */
      text-align: center;
      }
      

/* resultstext - text that accompanies results; resultset - table
   that shows results sets   */
div.resultstext {
	background-color: #f4f4f4;}
	
div.resultstext { /* text that accompanies results */
	padding: 10px 3px 10px 3px;
	text-align:left;
	color:black}


 /***********************
  * 
  * Page header and logo
  *
  ***********************/
  
  
  
 /* The entire black portion at the top of the page */
div#menu-logo-banner {
	width: 960px;
	height: 123px;
	background-color: black;
}


div#menu-logo-left {
	width: 201px;  /* Width of the logo plus spacing (118+83) */
	height: 97px;  /* Slightly bigger than the logo */
	float:left;
	text-align: left;
}

img#logo-left{
	position:relative; 
	left: 83px; 
	top: 8px;
}




div#menu-logo-right {
	width: 296px; /* Width of the logo plus spacing (213+83) */
	height: 97px;  /* Slightly bigger than the logo */
	float:left;
	text-align: right;
}

img#logo-right{
	position:relative; 
	right: 83px; 
	top: 8px;
}


div#menu-logo-centre {
	width: 463px; /* total width less the width of the left and right divs (960-201-296) */
	height: 97px;
	float:left;
}

img#logo-centre{
	position:relative; 
	left: 0px; 
	top: 20px;
}

/* position the menu */
div#menu-navigation-box{
/*	position: relative; */
	clear:both;
	left: 0px; 
	width: 960px;
	height: 26px;
	background-color:black;
	text-align:left; /* this is for the sake of IE, which will otherwise centre the nested divs and screw up the positioning. */
}  

div#menu-navigation {
	width: 880px; 
	position: relative;
	left: 25px; /* half of (960 less the width) less a few more to make it look right*/
}

/* the red bar */
div#menu-footer {
	width: 960px; /* total width of page */
	height: 21px; 
	background-color:#a11818; 
}

/* the white bar */
div#menu-spacer {
	width: 960px; /* total width of page */
	height: 10px; 
	background-color:white; 
}



/* and the navigation menu itself...*/

ul#topMenu {
	margin: 0;
	padding: 0;
	list-style: none;
}
	
ul#topMenu li {
	position: relative;
	display:inline;
	float:left;
	width: 110px; /* space available/8 */
	height: 20px;
	text-align:center;
	font-size:10pt;
	}
	
ul#topMenu li ul {
	position: absolute;
	left: -70px; /* -35 less half the difference in size between sub menu and main menu (100 - 70 = 25px). Submenu width defined below. -40-(160/100)/2 = -70 */
	top: 16px; /* how portable is this position? */
	display: none; /* don't display (by default) */
	}
	

/* formatting for main menu (hyperlinks) */
ul#topMenu li a {
	display: block; /* this is the important bit here */
	color: #fff;
	background: black;
	font-weight: bold; /* useful for white on black */
	padding: 5px;
	overflow: hidden;
}

/* make the submenus appear when we hover over the main menu */
ul#topMenu li:hover ul { 
	display: block;  
}


	
	
/* opacity doesn't work here -- because of the place of the opacity above */
ul#topMenu li  li a:hover { 
/*	background: #a11818;  */
/*	filter:alpha(opacity=100);
	-moz-opacity:1;
	-khtml-opacity: 1;
	opacity: 1; */
	}

	
/* formatting for submenu items */
ul#topMenu li ul li {
	text-align:center;
	width: 160px; /* 50px bigger than parent menu.  */
	}

div#breadcrumbs {
	font-size: 8pt;
	text-align: left;
	margin-left: 30px;
}


	
/* Fix IE. Hide from IE Mac */
* html ul li { float: left; }
* html ul li a { height: 1%; }

/******************************************
 *
 * Rounded boxes (CSS3)
 *
 ******************************************/

.shadow-box-top{ /* used for headings */

	margin-left:auto;
	margin-right:auto;
	margin-top:30px;
	margin-bottom:0px;
	padding-left:10px;
	padding-right:10px;
	padding-top:10px;
	padding-bottom:10px;


	background: #800000;
	color: white;
	text-align:left;
    font-size: 12pt; 
    color: #ffffff;	
	font-weight:bold;

	/* Pre-CSS3 support for Mozilla Firefox */
	-moz-border-radius-topleft: 10px;
	-moz-border-radius-topright:10px;
	-moz-border-radius-bottomleft:0px;
	-moz-border-radius-bottomright:0px;
    -moz-box-shadow: 5px 5px 10px 0px black;
	
	/* Pre-CSS3 support for Webkit (Safari/Chrome) */
	-webkit-border-top-left-radius:10px;
	-webkit-border-top-right-radius:10px;
	-webkit-border-bottom-left-radius:0px;
	-webkit-border-bottom-right-radius:0px;
	-webkit-box-shadow: 5px 5px 10px 0px black;
	
	/* CSS3 (any modern browser) */
	border-top-left-radius:10px;
	border-top-right-radius:10px;
	border-bottom-left-radius:0px;
	border-bottom-right-radius:0px;
	box-shadow: 5px 5px 10px 0px black;

	/* border:solid 1px #000000; */
	/* border:solid 1px #000000; */
}
.shadow-box-main{
	width: 90%;
	margin-left:auto;
	margin-right:auto;
	margin-top:0px;
	margin-bottom:30px;
	padding-left:10px;
	padding-right:10px;
	padding-top:10px;
	padding-bottom:10px;
	background: #d8d8d8;

	/* Pre-CSS3 support for Mozilla Firefox */
	-moz-border-radius-topleft: 0px;
	-moz-border-radius-topright:0px;
	-moz-border-radius-bottomleft:10px;
	-moz-border-radius-bottomright:10px;
    -moz-box-shadow: 5px 5px 10px 0px black;
	
	/* Pre-CSS3 support for Webkit (Safari/Chrome) */
	-webkit-border-top-left-radius10px;
	-webkit-border-top-right-radius10px;
	-webkit-border-bottom-left-radius:10px;
	-webkit-border-bottom-right-radius:10px;
	-webkit-box-shadow: 5px 5px 10px 0px black;
	
	/* CSS3 (any modern browser) */
	border-top-left-radius:0px;
	border-top-right-radius:0px;
	border-bottom-left-radius:10px;
	border-bottom-right-radius:10px;
	box-shadow: 5px 5px 10px 0px black;

	/* border:solid 1px #000000; */
	/* border:solid 1px #000000; */
}

/* width over-riders: */
.shadow-box-width-90pc { /* used for full-width (nearly) tables */
/* this width is actually the default width so is redundant! */
	width:95%; 
}

.shadow-box-width-wide { /* used for 'wide' forms (below) (50px overhand each side) */
	width:700px;
}

.shadow-box-width-narrow { /* used for 'narrow' forms (default below) */
	width:400px;
}


/******************************************
 *
 * Forms
 *
 ******************************************/


.inputArea
{
	font-size: 80%;
	font-weight: bold;
    padding: 10px;
}

.inputArea input, .inputArea textarea
{
    font-family: Arial, Sans-Serif;
    margin-bottom: 5px;
    display: block;
    padding: 4px;
    width: 300px; 
}

.inputArea input[type="checkbox"]
{
	display:inline;
	width: auto;
}


.inputArea input[type="text"], .inputArea textarea
 {
     background-image: none;
     background-color: #ffffff;
     border: solid 1px #ffffff;
 }

.inputArea input[type="text"]:focus, .inputArea textarea:focus
 {
     background-image: none;
     background-color: #ffffff;
     border: solid 1px #33677F;
 }
 
 /* Use with 'shadow-box-width-wide' */
.inputArea-wide input, .inputArea-wide textarea
 {
    width: 650px;
} 

/* Use with 'shadow-box-width-narrow' */
.inputArea-narrow input, .inputArea-narrow textarea
 {
    width: 350px;
} 


.compulsory 
{
	color: red;
}


span.nav-link
{
	background: #d07070;
padding: 15px;
padding-top: 5px !important;
padding-bottom: 5px;


}

 /* these are for the jquery update (for IE??) 
.activeField
 {
	background-image: none;
	background-color: #ffffff;
	border: solid 1px #33677F;
}

.idle
{
	border: solid 1px #85b1de;
	background-image: url( 'blue_bg.png' );
	background-repeat: repeat-x;
	background-position: top;
} */



/* Button styles - source: http://papermashup.com/pretty-css3-buttons/ */
.button, .button:visited {
	background: #222 url(../images/overlay.png) repeat-x;
	display: inline-block;
	padding: 5px 10px 6px;
	color: #fff;
	text-decoration: none;
	-moz-border-radius: 6px;
	-webkit-border-radius: 6px;
	-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.6);
	-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.6);
	text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
	border-bottom: 1px solid rgba(0,0,0,0.25);
	position: relative;
	cursor: pointer
}



/* Button styles - source: http://papermashup.com/pretty-css3-buttons/ */
/* Define different sizes: */
.small.button, .small.button:visited { font-size: 11px}
.button, .button:visited, .medium.button, .medium.button:visited { 
	font-size: 13px;
	font-weight: bold;
	line-height: 1;
	text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
}

.large.button, .large.button:visited { 
	font-size: 14px;
	padding: 8px 14px 9px; 
}

.super.button, .super.button:visited { 
	font-size: 34px;
	padding: 8px 14px 9px; 
}

/* Button styles - source: http://papermashup.com/pretty-css3-buttons/ */
/* Define different colours: */
.pink.button, .magenta.button:visited	{ background-color: #e22092; }
.pink.button:hover					{ background-color: #c81e82; }
.green.button, .green.button:visited	{ background-color: #91bd09; }
.green.button:hover				        { background-color: #749a02; }
.red.button, .red.button:visited		{ background-color: #e62727; }
.red.button:hover					{ background-color: #cf2525; }
.orange.button, .orange.button:visited	{ background-color: #ff5c00; }
.orange.button:hover				{ background-color: #d45500; }
.blue.button, .blue.button:visited   	        { background-color: #2981e4; }
.blue.button:hover					{ background-color: #2575cf; }
.yellow.button, .yellow.button:visited	{ background-color: #ffb515; }
.yellow.button:hover				{ background-color: #fc9200; }
.dkred.button, .dkred.button:visited	{ color: white; background-color: #800000; }
.dkred.button:hover				{ background-color: #600000; }