/* === GLOBAL === */
body{
	margin:			0;
	padding:		0;
	background:		#fff;	
	font:			10px/15px Verdana, Arial, Helvetica, sans-serif;
	color:			#000;
	text-align:		center;
}

/* link underlines tend to make hypertext less readable, 
   because underlines obscure the shapes of the lower halves of words */
:link,:visited{ 
	text-decoration:none;
}

/* whoever thought blue linked image borders were a good idea? */
img, a img,:link img,:visited img{ 
	border:			none;
}

/* hidden field used on forms to trap robots and spiders */
.frmBotTrap{display:none;}

.textlarge{
	font:			12px/20px Verdana, Arial, Helvetica, sans-serif;
	color:			#000;
}

textarea {
	font:			10px/15px Verdana, Arial, Helvetica, sans-serif;
}

.error{
	color: red;
	background-color: white;
}

.instructions{
	color: green;
	background-color: white;	
}
.toggle0{
	background-color: #fff;
}
.toggle1{
	background-color: #D6D6D6;
}

h1{
	margin:			0 0 5px 0;
	font:			bold 13px Verdana, Arial, Helvetica, sans-serif;
	text-align:		left;
}
h2{
	margin:			0 0 5px 0;
	font:			bold 11px Verdana, Arial, Helvetica, sans-serif;
	text-align:		left;
}

h4{
	margin:			5px 0 5px 0;
	font:			bold 11px Verdana, Arial, Helvetica, sans-serif;
	color:			red;	
	text-align:		left;
}
h5{
	margin:			5px 0 5px 0;
	font:			bold 9px Verdana, Arial, Helvetica, sans-serif;
	color:			red;
	text-align:		left;
}

p{
	margin:			0 0 8px 0;
}

.clear{
	clear: both;
}
	
.button{ /* Input buttons */
	padding:		1px 8px;
}
#BackgroundM{
	background: url(/images/backgrounds/page_bg.png) repeat-x top left;
}
#BackgroundQ{
	background: url(/images/backgrounds/page_bgQ.png) repeat-x top left;	
}

#Content{
	width:			990px;
	margin:			0 auto;
	padding:		0px 0px 0px 0px;
	text-align:		left;
}

/* === HEADER === */
#header{
    height: 92px !important;
    background: url(/images/backgrounds/header_bg.png) no-repeat top;	
	margin: 		0px 0px 0px 0px;
	padding:		0px 0px 0px 0px;

}
.logo{
    float: left;
    margin-top: 13px;
    margin-left: 12px;
}
#top_links {
    float: right;
    list-style: none;
    margin-top: 35px;
    margin-right: 22px;
    padding: 0px;
    font-size: 9px;
    font-weight: bold;
    color: #ffffff;
    
}

#top_links li {
    float: left;
    padding: 0px 5px 0px 5px;
	color: #fff;
	border-right: 1px solid #fff;
}

#top_links li a{
	font-weight:	bold;
	color:			#fff;
}
#top_links li a:hover{
	color:			#ff6600;
}
	/* dont show the options */
#top_links ul{
	display:none;
}


#categorynonegradient {
	clear: both;
	height: 76px;
}

/* === SUB NAVIGATION BAR === */
/* this is on a ul */
#subnav {
    height: 37px;
    list-style: none;
    margin: 0px;
    padding: 0px;
    font-size: 10px;
    font-weight: normal;
	border-bottom: 1px solid #E0E0E0;
}

#subnav li {
    float: left;
	padding: 0px 12px 0px 12px;
}

#subnav li a {
	color: 			#000;
	text-decoration:none;
}
#subnav li a:hover {
	color: 			red;
	text-decoration:none;
}

/* === Category Image Section for Marketing === */
#categorygradient {
	clear: both;
    margin-bottom:	101px;
}

#category {
    position: relative;
    height: 213px;		/* only seems to be needed for the mac!*/
}
#category img.picture{
	margin-left: 15px; 
	margin-top: 10px;
	display: inline-block;

}
#category .words{
    width: 440px;
    height: 215px;
    margin: 0px;
    padding-left: 20px;
    color: #ffffff;	
    display: table-cell;
    vertical-align: middle;
    text-align: justify;
	position: absolute;
    top: 10px;
    left: 50px;

}
#category .wordshome{
	width: 215px; 
    height: 215px;	
	margin: 47px 0px 0px 11px;
	color: #ffffff;
    display: table-cell;
    vertical-align: middle;
    text-align: justify;
    position: absolute;
    top: 35px;
    left: 0px;
}
#categorygradienthome {
/* used to put a background onto the home category image */
    margin-bottom:	101px;
}

#home_img_1 {
    position: absolute;
    top: 94px;
    left: 256px;
}

#home_img_2 {
    position: absolute;
    top: 117px;
    left: 488px;
}

#home_img_3 {
    position: absolute;
    top: 94px;
    left: 716px;
}

/* div to hold the View demo button on home page */
.demobutton {
	background: url(/images/backgrounds/btn_middle_red.gif) repeat-x left top;
	float: right;
}
.demobutton p{
	background: url(/images/backgrounds/btn_left_red.gif) no-repeat left top;
}

.demobutton a {
	display:block;
	color: white;
	padding:7px 10px 39px 10px;
	background: url(/images/backgrounds/btn_right_red.gif) no-repeat right top;
}

/* used to put in the grey line */
.homedivbottom{
	border-top: #c4c4c5 1px solid; 
	margin: 0px;
}
#clienthomeimage {
	margin: 10px 0;
	padding: 0px 0px 0px 0px;
}
#clienthomeimage img {
	display:block;
	margin: 0;
}

.homedivbottom #whirly_image {
	margin: -10px 15px 50px 0px !important; 
	float: left !important; 
}

#unique_image {
	margin-top: 10px; 
	border: none;
}

#contentHome h2 {
	margin-top: 6px;
	font:		18px/30px Verdana, Arial, Helvetica, sans-serif;	
	font-weight:	bold;
	color: 		#BD0608;
	
}

/* === Footer === */
#footer {
    border-top: 1px #C4C4C5 solid;
	color: #114370; 
	padding-left: 10px;	
	text-align: left;
}

#footer ul {
    float: right;
    list-style: none;
    margin: 4px 50px 4px 0px;
    padding: 0px;
    font-size: 10px;
}

#footer ul li {
    float: left;
    padding: 0px 5px 0px 5px;
    color: #114370;
	border-right: 1px #114370 solid;
}
#footer ul li .noborder{
    float: left;
    padding: 0px 5px 0px 5px;
    color: #114370;
}

#footer li a{
	font-weight: normal;
    color: #114370;
}
#footer li a:hover{
	color:			#ff6600;
}

/* === Maketing content block === */
#mcontent {
}

/* === news === */
/*NOTE: The left hand sides for questions and marketing pages are different widths!!*/
#left_pane {
    float: left;
    width: 193px;
    border-right: 1px #C4C4C5 solid;
}
#left_pane .news_img {
	padding: 2px 0px 10px 11px;
}

#qleft .news_item {
    border-bottom: 	1px #C4C4C5 solid;
    margin: 		0px;
    padding: 		5px 0px 5px 8px;
    color: 			#011A6F;
}
#left_pane .news_item {
    border-bottom: 	1px #C4C4C5 solid;
    margin: 		0px;
    padding: 		5px 0px 5px 8px;
    color: 			#011A6F;
}

.news_item a {
    color: #011A6F;
    text-decoration: underline;
}

.news_item:first-line {
    font-weight: bold;
}
/* ===  For News View - one item of news per page === */
#page_newsview .box_middle img
{
	float:right;
	margin-left: 10px;
	margin-bottom: 10px;
}

/* ===  For normal marketing pages, put the image to the right === */
#page_marketingview .box_middle img
{
	float:right;
	margin-left: 10px;
	margin-bottom: 10px;
}

/* ===   === */
.blurb {
	padding: 0px 0px 0px 0px;
	margin: 0px 0px 0px 0px;	
    background-color: #E4E4E4;
	border-bottom: 1px #C4C4C5 solid;
}

/* === Rounded box for marketing content === */
#right_pane {
    float: left;
    padding: 0px 0px 0px 0px;
	/*width of left pane + right pane = mcontent = Content = 990*/
	/* so width = 990 - (193 + 1) - (0 for border)*/
	width: 796px;
}


#content4 {
    position: relative;
    margin: 5px 15px 0px 40px;
    border-left: 1px #D1D1D1 solid;
    border-right: 1px #D1D1D1 solid;
	/* this gives a width of 796 - 40 - 15 = 741 */
	/* However, the images of the curved top and bottom have a fixed width of 730px,
	   with the 2 borders at 1px each, leaves a width of 730 - 2*/
	width: 728px;
}

.box_top, .box_bottom {
    position: absolute;
    height: 4px;
	/* These are the curved top and bottom lines for the box as content4 */
	/* so they must be slightly larger thean content4 */
	/* 741 + 4 */
    width: 730px;
}
.box_top {
    top: 0px;
    left: -1px;
    background: url(/images/backgrounds/box_top.gif) no-repeat top left;
}
.box_bottom {
    bottom: -1px;
    left: -1px;
    background: url(/images/backgrounds/box_bottom.gif) no-repeat bottom left;
}

.box_middle {
    padding: 15px 10px 10px 40px;
}

.box_middle h3 {
    padding-top: 15px;
	color: red;
	
}
.box_middle ul {
	list-style-type: disc;
	padding-left: 15px;
}

.box_middle ol {
	list-style-type: decimal;
	padding-left: 15px;
}


/* === Alternative Marketing area for HOME ==== */
#contentHome {
	margin: 0px; 
	padding-left: 60px;
	width: 700px;		 
}

/* === Various styles for Marketing === */

/* for a ul */
.redlist {
	margin: 10px 0px 0px 17px; 
	padding-left: 60px; 
	list-style-image: url(/images/icons/red_bul.gif); 
	color: #BD0709; 
	line-height: 1.5em;
}
/* for a ul */
.speechlist {
	margin: 10px 0px 0px 0px; 
	list-style-image: url(/images/icons/s_bub.gif); 
	line-height: 1.5em;
}

/* for an a */
.boldlink {
	color: #22367B; 
	font-weight: bold; 
	text-decoration: underline;
}

/* for a p */
.bullet {
	color: #BD0709; 
	font-weight: bold;
}

/* === Login table === */


#loginBox {
}
  /* the paragraph containing the link on the login page */
.loginLinkPara{
	font-weight: bold; 
	color: red;
	font-size: 1.5em;
	padding-top:10px;
	padding-bottom:10px;
}

/* === Registration table === */
#RegnBox th{
	vertical-align: top;
}

/* === Main table === */
#maintab{
	width:			100%;
	padding:		0 3px;
	border:			none;
	border-top:		none;
}
/* this is a td */
#qleft {
	width:			150px;		/*linked width of questnav  */ 
								/*also image "in the news" is 149px*/
	font:			normal 9px Verdana, Arial, Helvetica, sans-serif;	
	border-right:	1px #C4C4C5 solid;
	color: 			#114370; 
	vertical-align:	top;
}

#qleft .lefttext{
	font:			normal 9px Verdana, Arial, Helvetica, sans-serif;	
	border-top:	 	1px #C4C4C5 solid;
	padding: 		10px 0px 10px 0px;
	color: 			#114370; 
	vertical-align:	top;
}

#qleft p.highlighted{
	font-weight:	bold;
}
/* this is a td */
#qmid {
	width:			60%;
	vertical-align: top;
	padding:		0px 10px 10px 10px;
}

#qmid h1 {
	color: red;
	font-weight: bold;
	padding: 0px 0px 10px 0px;	
}

#qmid h2 {
	padding: 20px 0px 5px 0px;
	font-weight: normal;
	color: red;
}
/*in the R1 Summary, another red heading gets lost!*/
#qmid h2.r1sumry{
	color: #114370;
	font-weight: bold;
}

/* this is a table */
#qmid .itemadd {
	margin: 0 auto;
}
/* this is a table */
#qmid #ItemList, #RoleList, #cbList{
	margin: 0 auto;
	width: 100%;
	margin-top:20px;
}

#qmid #ItemList th, #RoleList th, #cbList th{
	font-weight: bold;
	border-bottom: 1px solid black;
	text-align: left;	
}

#qmid .Addressinput, .staffinput, .planinput, .businessinput {
	margin: 0 auto;
}

#qmid .assembly th{
	vertical-align: top;
}

#qmid .divbuttons{
	clear:both;
	width: 100%;
	padding-top:30px;
	text-align: center;
}
#qmid .divbuttons input, #qmid .divbuttons a.pseudobutton, #RegnBox .button {
	font:		1.1em Verdana, sans-serif;
	border-top:	2px outset #fff;
	border-left:2px outset #fff;
	border-right:2px outset #000;
	border-bottom:2px outset #000;
	color:		#000;
	background:	#DBEBFB; /*#D4D0C8;*/
}
#qmid .divbuttons #save, #RegnBox #display.button  {
	background:	#FFA6A6;	/* green=#B9FFB9;*/
}
#qmid .divbuttons input {
	padding:	2px 4px 2px 4px;
}
/* this is the 'a' tag for Example */
#qmid .divbuttons a.pseudobutton {
	display:	inline-block;
	position:	relative;
	top:		0px;
	padding:	4px 10px 3px 10px;
}

/* the lengths of input text boxes */

#qmid .TextLong{
	width:300px;
}
#qmid .inputUpload{
	width:300px;
	/* to fix a strange bug in firefox, whereby the click area of the browse button is set*/
	/* to just the top edge */
	position: relative;
}

#qmid .TextShort{
	width:150px;
}
#qmid .TextMini{
	width:80px;
}
#qmid select {
	width:300px;
}

#qmid textarea{
	width: 300px;
	height: 50px;
}

#qmid ul {
	list-style-type: disc;
	padding-left: 15px;
}
#qmid ol {
	list-style-type: decimal;
	padding-left: 15px;
}

#qhv ul {
	list-style-type: disc;
	padding-left: 15px;
}

/* ===  For question pages, put the image to the right === */
#qmid img
{
	float:right;
	margin-left: 10px;
	margin-bottom: 10px;
}
#qmid table img 
{
	float:left;
	margin: 0;
}



/* the question navigation bar is in qleft */

/*--------------------*/

/* === Help text ===  */
#qright {
	border-left:	 1px #C4C4C5 solid;
	vertical-align:	top;	
	font:			normal 9px Verdana, Arial, Helvetica, sans-serif;		
	color:			#011A6F;
	padding:		0px 5px 0px 5px;
}

#qright h1 {
	color:			red;
	font-weight:	bold;
}
#qright h2 {
	color:			red;
	font-weight:	normal;
}
#qright #qhm ul {
	clear: both;
	list-style-type: disc;
}
#qright #qhm ul li {
	padding: 5px 0px 5px 0px;
	margin-left: 20px;
	
}
#qright #qhm ul li ul {
	list-style-type: circle;
}
#qright #qhm ul li ul li {
	padding: 5px 0px 5px 0px;
	margin-left: 20px;
	
}

/* === Handler R1 === */
.tabr1 {
	width: 600px;
}
.tabr1 th{
	font:			normal 9px Verdana, Arial, Helvetica, sans-serif;	
}
.tabr1 td{
	font:			normal 10px Verdana, Arial, Helvetica, sans-serif;	
}
.tabr1 td.text{
	width:			70%;
}
.tabr1 .dot{
	text-align:center !important;
}

/* leave the variable help text unseen until they hover over it */
/* it is a div */
#qhv {

}

/* table for the scores */

.R1Score {
	width:			100%;	
	border-collapse: collapse;
}
.R1Score thead th {
	color: red;
	padding-top:10px;
}

.R1Score th.R1Current {
	width:			10%;
}
.R1Score td {
	width:				30%;
	padding:			5px 0 2px 0;
	border-right:		1px solid #fff;
}
.R1Score td.low{
	background:			url(/images/backgrounds/R1ScoreTable.gif) repeat-y 0 0 #1EBB2E;
}
.R1Score td.med{	
	background:			url(/images/backgrounds/R1ScoreTable.gif) repeat-y -170px 0 #1EBB2E;
}
.R1Score td.hi{	
	background:			url(/images/backgrounds/R1ScoreTable.gif) repeat-y -340px 0 #1EBB2E;
}
.R1Score td img {
	text-align:	left;
	vertical-align: 	middle;		
	height: 10px;
}
.R1Score tr.rPrev td{
	padding:			2px 0 5px 0;
}
.R1Score tr.rCurr th,
.R1Score tr.rPrev th{
	border-right:		1px solid #FF1600;
}

/* === Handler R4 === */
.tabr4 {
	width: 600px;
}
.tabr4 th{
	font:			normal 9px Verdana, Arial, Helvetica, sans-serif;	
}
.tabr4 td{
	font:			normal 10px Verdana, Arial, Helvetica, sans-serif;	
}
.tabr4 td.text{
	width:			70%;
}

.tabr4 td.ACorrect{
	background-color: #7AEF74;
}

/* === Handle R4 Summary === */
.R4Score {
	width:			100%;	
	border-collapse: collapse;
}
.R4Score thead th {
	color: red;
	padding-top:10px;
}

.R4Score th.R1Current {
	width:			10%;
}
.R4Score td {
	width:				30%;
	padding:			5px 0 2px 0;
	border-right:		1px solid #fff;
}
.R4Score td.low{
	background:			url(/images/backgrounds/R1ScoreTable.gif) repeat-y 0 0 #1EBB2E;
}
.R4Score td.med{	
	background:			url(/images/backgrounds/R1ScoreTable.gif) repeat-y -170px 0 #1EBB2E;
}
.R4Score td.hi{	
	background:			url(/images/backgrounds/R1ScoreTable.gif) repeat-y -340px 0 #1EBB2E;
}
.R4Score td img {
	text-align:	left;
	vertical-align: middle;	
	height: 10px;
}
.R4Score tr.rPrev td{
	padding:			2px 0 5px 0;
}
.R4Score tr.rCurr th,
.R4Score tr.rPrev th{
	border-right:		1px solid #FF1600;
}

/* === Handle Team / Staff  === */
#RoleList {
	width:			100%;
}
#RoleList thead tr{
	border-bottom: solid 1px black;
}
#RoleList tfoot tr {
	border-top: solid 1px black;
}


/* ==== Styles for the Team Home page  ==== */
#map {
    font-size:1em;
    background: url(/images/backgrounds/teambg.gif) top center no-repeat;
	background-position: 111px 75px;
}

#map .row {
	clear:both;
    text-align: center;
    margin-bottom: 30px;
}
#map .one{
	padding-left:170px;
}
#map .two{
	padding-left:2px;
}
#map .three{
	padding-top:10px;
	padding-left:100px;
}

#map .teamon{
	float:left;
    background: url(/images/backgrounds/button_black.jpg) top center no-repeat;
	width: 179px; /* image width is 179px*/
	height: 95px; /* image height is 75px*/
	display: block;
	border: 0;
	color: white;
	margin:0 8px 0 0;
	padding: 10px 0px 2px 0px;
}
#map .teamon:hover{
	background: url(/images/backgrounds/button_red.jpg) top center no-repeat;
	color: white;
}

/* === Display News  === */
#newslist {
	width:			100%;
	text-align: 	left;
}
	/* divs for the numberings on news */
.topcount, .bottomcount {
	
}
.header{
}
.date{
}
.ReadMore{
}

/* === Display Document  === */
#Documentlist {
	width:			100%;
	text-align: 	left;
}
#Documentlist thead tr{
	border-bottom: solid 1px black;
}
#Documentlist .Toggle {
	background-color: #E0E0E0;
}
	/* divs for the numberings on documentlist */
.topcount, .bottomcount {
	
}

/* ===  For emails === */
#qmid .emlbody {
	width: 600px;
	height: 300px;
}
/* ===  For Regrstration pages === */
/* note that the buttons are styled above*/
#RegnBox .TextLong{
	width:300px;
	padding-left:2px;
}
#RegnBox .TextShort{
	width:150px;
}
#RegnBox .TextMini{
	width:80px;
}
#RegnBox .SelectLong {
	width:304px;
}


/* This field is used to trick robots and spiders into completing it
   so needs to be invisible to users */
.TextLost {
 	display: none;
}

#RegnBox select {
	width:300px;
}
#RegnBox textarea{
	width: 300px;
	height: 50px;
}