/* Mogas CSS v2.7 31/08/2010 */

/* Mogas - Main stylesheet */

/* Colours:

	#2E2B67 - Dk Blue
	#373C8F - Mogas Blue
	#BE002F - Mogas Red 
	#363636 - Text
	#A3A6AC - Silver
	#BEC1C8 - Lt Silver BG

*/

/* HTML tag styles */


/*
html - required for google chrome
http://stackoverflow.com/questions/425216/problem-with-background-color-and-google-chrome
*/
html 
{
	background-color: #BEC1C8;
}

body 
{
	background-color: #BEC1C8;
	/*background-image: url('images/Body-BG.gif');
	background-repeat: repeat-x;*/
	color: #363636;
	font: 75% Arial, Helvetica, sans-serif;
	margin : 0;
	margin-bottom: 32px;
	padding: 0;
	text-align: center;
}

a:link, a:visited 
{
	text-decoration: underline;
	color: #373C8F;
}

a:hover 
{
	text-decoration: none;
}

td, th, table, div, input, select 
{
	font-family: Arial, Helvetica, sans-serif;
}

/*
td 
{
	vertical-align:text-top;
}
*/

/* COMMENTED OUT BY ANDREW
td, th {
	padding: 1em 0.5em;
	border-bottom: 1px solid #E5E5E5;
	line-height: 1.5em;
	vertical-align: top;
	text-align: left;
}

th {
	border-top: 1px solid #E5E5E5;
}
*/




th 
{
	font-weight:bold;
	text-align:left;
}

.fieldLabel
{
	font-weight:bold;
}

.gridview
{
	 border: none;
	 margin-bottom:20px;
}

.gridview_header 
{
	border-bottom: 1px solid #E5E5E5;
	border-top: 0px solid #FFFFFF;
}

.gridview_row 
{
	border-bottom: 1px solid #E5E5E5;
	border-left: none;
	border-right:none;
	border-top: 0px solid #FFFFFF;
}

/*
USAGE:
<br />
<div class="separator"></div>
<br />
*/
.separator 
{
	border-bottom: 1px solid #E5E5E5;
}

.separator-spaced
{
	margin:10px 0px 10px 0px;
	border-bottom: 1px solid #E5E5E5;
}


.h2NoMargin 
{
	font-size: 1em;
	margin: 0 0 0 0;
	text-transform: uppercase;
	color: #BE002F;
    font-weight:bold;
}

td.tdtop 
{
	border-top: 1px solid #E5E5E5;
}

table 
{
	padding: 0;
	margin: 0;
	margin-top:0;
}

h1 {
	font-size: 1.4em;
	color: #A3A6AC;
	/* margin: 0; commented out by Andrew on 11-08-2010 */
	text-transform: uppercase;
	position: relative;
	top: 0px;
	left: 0px;
}

h2 
{
	font-size: 1em;
	/* margin: 0 0 1em 0; commented out by Andrew on 11-08-2010 */
	text-transform: uppercase;
	color: #BE002F;
}

h3 
{
	font-size: 1em;
	/* margin: 1.2em 0 0.8em 0; commented out by Andrew on 11-08-2010 */
	text-transform: uppercase;
	color: #2E2B67;
}

h4 

{
	font-size: 1em;
	/*  margin: 1.2em 0 0.8em 0; commented out by Andrew on 11-08-2010 */
	font-weight: bold;
}

h5 
{
	font-size: 1em;
	/*  margin: 0 0 0.8em 0; commented out by Andrew on 11-08-2010 */
	font-weight: normal;
	font-style: italic;
}


/* COMMENTED OUT BY ANDREW, otherwise there is no gap between paragraphs on pages that use the masterpage. Strange.
p {
	line-height: 1.3em;
	margin: 0 0 0.8em 0;
}
*/



hr 
{
	color : #E5E5E5;
	height : 0;
	margin: 0.5em 0 0.5em 0;
	border: 0;
	border-top: 1px solid #E5E5E5;
}


blockquote 
{
	line-height : 1.3em;
	margin: 1em 0 1em 0;
	font-style: italic;
}

img 
{
	border: 0;
	margin: 0;
	padding: 0;
}

/*
input[type=button], input[type=submit]
*/
.bigbutton
{
	padding:5px 20px 5px 20px;
}


/* ---- CUSTOM STYLES ---- */

/* Page layout */

#frame 
{
	width: 976px;
	margin-top: 0;
	padding: 0;
	text-align: left;
	position: relative;	
	background-image: url('../images/Frame-BG.gif');
	background-repeat: repeat-y;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: auto;
}

/*
#skip-menu 
{
	position: absolute;
	top: -300px; left: 0;
}
*/

.hide
{
	display:none;
}

#logo 
{
	width: 960px;
	height: 115px;
	margin-left: 7px;
	overflow: hidden;
}

#page 
{
	position:relative;
	width: 960px;
	margin-left: 7px;
	background-color: #FFF;
	text-align: left;
}

#pic 
{
	margin-left: 7px;
	width: 960px;
	height: 170px;
	clear: both;
}

#content, #content-with-sidemenu 
{
	float:left;
	padding-top:15px;
	padding-right:20px;
	padding-bottom:15px;	
}

#content
{
	width:870px;
	padding-left:70px;
}

#content-with-sidemenu
{
	/* sidemenu: 190 */
	width:730px;
	padding-left:20px;
}

#logout 
{
	position:absolute;
	right:0;
	top:0;
	
	/* 
	float:right;
	*/
	text-align:right;
	padding:5px 5px 5px 5px;
}

#quick-site-select 
{
	/*
	width:200px;
	float:right;
	
	*/	
	z-index:1; /* z-index by default is 0, make sure this control is on top of anything else */
	position:absolute;
	top:30px;
	right:0px;
	padding:5px 5px 5px 5px;
}

/*
#content 
{
	margin: 0px 0px 28px 40px;
	clear: both;
}

#content-no-margin 
{
	margin: 0px 0px 0px 0px;
	clear: both;
}

#content-body-no-sidemenu
{

	padding: 10px 5px 5px 10px;
	
	
}

#content-body-no-sidemenu-indented
{

	padding: 10px 5px 5px 50px;
	
}

#content-body-with-sidemenu
{

	padding: 10px 5px 5px 200px;
}
*/

.right-pic 
{
	 position: absolute; 
	 top: 344px; 
	 right: 9px !important;
	 right: 15px;
}

/***************************************** 
START Navigation Top
******************************************/

#navtop 
{
	/*
    width: 100%;
	*/
	width: 880px;
	margin-left: 7px;
	padding-left:40px;
	padding-right:40px;
	
    height: 29px;
    background: url('../images/Nav-BG.gif');
    background-repeat: repeat-x;
    background-position: 0px 0px;    
    float: left;
}
 
#navtop ul 
{
    list-style: none;
    margin: 0;
    padding: 0;
    width: 125px; /* width of header items */
    float: left;
    
}
 
 /*
#menu a, #menu h2 {
font: bold 11px/16px arial, helvetica, sans-serif;
display: block;
border-width: 1px;
border-style: solid;
border-color: #ccc #888 #555 #bbb;
margin: 0;
padding: 2px 3px;

}
 */
 
#navtop .header
{
	font: bold 13px/16px arial, helvetica, sans-serif;
}

#navtop .header:hover
{
    color: #FFFFFF;
    background: url('../images/Nav-BG-hover.gif');
    background-repeat: repeat-x;
    background-position: 0px 0px;
}

#navtop .menuitem 
{
	font: bold 11px/16px arial, helvetica, sans-serif;
    background: #2E2B67;
    border-bottom: solid 1px #28255A;
    overflow: visible;
    height: auto !important;
    height: auto;
    width: 145px; /* width menu items */
}
 
#navtop .menuitem:hover 
{
    color: #FFFFFF;
    background: url('../images/Nav-BG-hover.gif');
    background-repeat: repeat-x;
    background-position: 0px 0px;
}

#navtop .menuitem, 
#navtop .header 
{
	
    display: block;
    margin: 0;
    line-height: 28px;
    text-decoration: none;
    color: #9795B3;
    padding-left:10px;
    text-transform: uppercase;
}
 
 /*
#menu h2 
{
color: #fff;
background: #000;
text-transform: uppercase;
}
*/
 
#navtop li 
{
	position: relative;
	margin: 0 0 0 0;
	
}
 
#navtop ul ul 
{
    position: absolute;
    z-index: 500;
}
 
#navtop ul ul ul 
{
    position: absolute;
    top: 3px;
    left: 130px; /* add a little overlap to sub-menu items */
}
 
div#navtop ul ul,
div#navtop ul li:hover ul ul,
div#navtop ul ul li:hover ul ul
{
	display: none;
}
 
div#navtop ul li:hover ul,
div#navtop ul ul li:hover ul,
div#navtop ul ul ul li:hover ul
{
	display: block;
}



/***************************************** 
END Navigation Top
******************************************/


/* Forms */

.button 
{
	background-color: #373C8F;
	color: #FFF;
	border: 0;
	padding: 0.4em 4px 0.3em 4px;
	font-size: 0.8em;
	text-transform: uppercase;
	font-weight: bold;
}

/*
.input-col-1 
{
	width: 110px;
}

.input-col-1-full 
{
	width: 150px;
}

.input-col-2 
{
	width: 302px
}

.input-col-2-full 
{
	width: 342px;
}
*/

label 
{
	font-size: 0.8em;
	text-transform: uppercase;
	padding-bottom: 0.2em;
}

form p 
{
	margin-bottom: 0.2em;
	/*
	margin-left: 40px;
	*/
}



/* Boxes, text styles, etc */

ul.arrow-list 
{
	list-style-image: url('../images/Text-Arrow.gif');
	margin: 0 0 0.8em 0;	
}

ul.arrow-list ul 
{
	padding-top: 0.8em;
}

ul.doc-list 
{
	margin: 0 0 0.8em 0;
}

a.pdf, a.msword, a.msppt, a.msexcel, a.arrow 
{
	background-image: url('../images/IconPDF.gif');
	background-repeat: no-repeat;
	background-position: 0 2px;
	padding-left: 24px;
	display: block
}

a.msword  
{
	background-image: url('../images/IconMSWord.gif');
	background-position: 0 1px;
}

a.msppt 
{
	background-image: url('../images/IconMSPPT.gif');
	background-position: 0 1px;
}

a.msexcel 
{
	background-image: url('../images/IconMSExcel.gif');
	background-position: 0 1px;
}

a.arrow 
{
	background-image: url('../images/Text-Arrow.gif');
	background-position: 0 1px;
	padding-left: 18px;
}

/* COMMENTED OUT BY ANDREW ON 31/08/2010
#content ul 
{
	margin: 0 0 1em 0;
	list-style-type:disc;
}
*/

h1.img img 
{
	position: absolute;
	top: -8px; left: -40px;
}

h1.img 
{
	margin-left: 40px;
}

.grey-bg 
{
	background-color: #F5F5F5;
}


/***************************************** 
START Col
******************************************/

.col, .col-2, .col-3, .col-4
 {
	width: 182px;
	float: left;
	padding-right: 20px;
}

.col-2 
{
	width: 364px;
}

.col-3 
{
	width: 546px;
}

.col-4 
{
	width: 728px;
}

.col ol, .col-2 ol, .col-3 ol, .col-4 ol, td ol
{
	margin: 0 0 0.8em 0;	
	text-indent: 0;
	padding: 0;
}

.col ul, .col-2 ul, .col-3 ul, .col-4 ul, td ul
{
	margin: 0 0 0.8em 0;
	text-indent: 0;
	padding: 0;
}

.col li, .col-2 li, .col-3 li, .col-4 li, td li
{
	margin: 0 0 0.7em 16px;
}

/***************************************** 
END Col
******************************************/

/*
#footer2
{
	width: 976px;
	margin: 0;
	height:56px;
	text-align: left;
	position: relative;
	font-size: 0.9em;
	margin-right:100px;
	clear: both;
	background-image: url('../images/Footer-BG.jpg');
	background-repeat: no-repeat;
}
*/

#footer
{
	width: 974px;
	height:34px;
	background-image: url('../images/Footer-BG.jpg');
	background-repeat: no-repeat;
	clear: both;
}


/*
#footer p 
{
	padding: 8px 28px 28px 28px;
	margin: 0;
	text-align: right;
	color: #FFF;
}
*/

#footer .links
{
	font-size: 0.9em;
	float:left;
	color: #FFF;
	padding-top:8px;
	padding-left:20px;
}

#footer .copyright
{
	font-size: 0.9em;
	float:right;
	color: #FFF;
	padding-top:8px;
	padding-right:20px;
}

#footer a:link, #footer a:visited 
{
	text-decoration: none;
	color: #FFF;
}

#footer a:hover 
{
	text-decoration: underline;
}

.no-border, table.no-border td 
{
	border: 0;
}

.grey 
{
	color: #999;
}

span.contact-number 
{
	width: 6em;
	display: block;
	float: left;
}

.smalltext 
{
	font-size: 0.8em;
}

.spacer 
{
	clear: both;
	font-size: 1px;
	height: 1px;
}

.spacer-new-line 
{
	clear: both;
	line-height: 0; 
	display: block;
}

.spacer-line
{
	clear: both;
	font-size: 0.8em;
	height: 0.8em;
}

.spacer-half-line
{
	clear: both;
	font-size: 0.5px;
	height: 0.5px;
}


/* Andrews */

.comment
{
	color:#A3A6AC;
}







/***************************************** 
START Side Menu
******************************************/


/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */

.content-left-sidebar-menu
{
	width: 190px; /*width of menu*/
	float:left;
}

.content-left-sidebar-menu .headerbar
{
	font: bold 13px Verdana;
	color: white;
	/*background: #606060 url(media/arrowstop.gif) no-repeat 8px 6px; */   /*last 2 values are the x and y coordinates of bullet image*/
	background: #606060;
	margin-bottom: 0; /*bottom spacing between header and rest of content*/
	text-transform: uppercase;
	padding: 7px 7px 7px 7px; /*31px is left indentation of header text*/
	text-align:center;
}

.content-left-sidebar-menu ul
{
	margin: 0;
	padding: 0;
	margin-bottom: 0; /*bottom spacing between each UL and rest of content*/
}

.content-left-sidebar-menu ul li
{
	list-style-type: none;
	padding-bottom: 2px; /*bottom spacing between menu items*/
	margin: 0;
}

.content-left-sidebar-menu ul li a
{
	font: normal 12px Arial;
	color: black;
	background: #E9E9E9;
	display: block;
	padding: 5px 0;
	line-height: 17px;
	padding-left: 8px; /*link text is indented 8px*/
	text-decoration: none;
}

.content-left-sidebar-menu ul li a:visited
{
	color: black;
}

.content-left-sidebar-menu ul li a:hover
{ 
	/*hover state CSS*/
	color: white;
	background: black;
}

/***************************************** 
END Side Menu
******************************************/



/***************************************** 
START BoxMessages
******************************************/

.QuestionBlue, 
.WarningYellow, 
.CriticalRed, 
.InfoBlue, 
.TickGreen
{
	background-position: 10px 10px;
	background-repeat: no-repeat;
    margin:0px 0px 10px 0px;
	padding: 5px 0px 5px 84px;
	border-style: solid;
	border-width: 4px;
	border-left: none;
	border-right: none;
	min-height:84px;
}

.QuestionBlue 
{
	background-color: #E2E2FE;
	background-image: url('../images/help64.png');
	border-color: Blue;
}

.WarningYellow 
{
	background-color: #FFFFD4;
	background-image: url('../images/warning64.png');
	border-color: Yellow;
}

.CriticalRed 
{
	background-color: #FEE2E2;
	background-image: url('../images/error64.png');
	border-color: Red;
}

.InfoBlue 
{
	background-color: #E2E2FE;
	background-image: url('../images/info64.png');
	border-color: Blue;
}

.TickGreen
{
	background-color: #E2FEE2;
	background-image: url('../images/tick64.png');
	border-color: Green;
}

/***************************************** 
END BoxMessages
******************************************/



INPUT.edit
{
    BORDER-RIGHT: medium none;
    BORDER-TOP: medium none;
    /* FONT-SIZE: 8pt; */
    BORDER-LEFT: medium none;
    /* WIDTH: 100%; */
    COLOR: blue;
    BORDER-BOTTOM: medium none;
    /* FONT-FAMILY: Arial, 'MS Sans Serif'; */
    BACKGROUND-COLOR: transparent;
    /* TEXT-ALIGN: right */
}
INPUT.read
{
    BORDER-RIGHT: medium none;
    BORDER-TOP: medium none;
    /* FONT-SIZE: 8pt; */
    BORDER-LEFT: medium none;
    /* WIDTH: 100%; */
    COLOR: #363636; 
    BORDER-BOTTOM: medium none;
    /* FONT-FAMILY: Arial, 'MS Sans Serif'; */
    BACKGROUND-COLOR: transparent;
    /* TEXT-ALIGN: right */
}