/* A lot of these style settings are taken from a sample required page, and hence the limited
   documentation below */
   
html
{
    margin:0px; 
}

/* Configure the body element of the master page 
   (but not the body element of the inline frame */
   
body#bodyMain
{
	background: #f2f2f2; 
	font-family: arial;
	font-size: 0.8em;
	color: #333;
	margin: 0px;
	padding: 0px;
	text-align: center; 	
}

form
{
    /* Remove default margin. */
    margin:0em;
}

a 
{
	color: #066;
	text-decoration: none;
}

/**************************************************************************************************

Start: Marketing standard styles

***************************************************************************************************/
table tr td {
	font-family:Arial, Helvetica, sans-serif;
/*	font-size:0.8em; */
	margin:0px;
	padding-bottom:2px;
	vertical-align:top;
}

h1 {
	color:#066;
	font-size:1.5em;
	margin-top: 0px;
}

.H1main {
	color:#066;
	font-size:1em; 
}

h2 {
	color:#066;
	font-size:1em;
}

a:link {
	color:#006666;
	text-align:left;
	text-decoration:none;
	border:none;
}

a:visited {
	color:#006666;
	text-align:left;
	text-decoration:none;
}

a:hover {
	font-style:normal;
	font-weight:normal;
	color:#006666;
	text-decoration:underline;
}

a:active {
	font-style:normal;
	font-weight:normal;
	color:#006666;
	text-decoration:underline;
}
/**************************************************************************************************

End: Marketing standard styles

***************************************************************************************************/

/**************************************************************************************************

Start: Page Start Control
       This defines the overall page width.

***************************************************************************************************/

#content 
{
  /* Prevent scrollbars appearing in IE7 for this div when overflow was auto.
     Initially "visible" was used but strangely in Firefox this caused the inline footer 
     to appear outside of this div causing the footer to loose the page background. */    
	overflow: hidden;
}

/* Set the browser content to be 970 pixels.
   The body configuration above ensures the content is centred if the browser 
   window is larger */

.page	{
	background: #ffffff;
	border: 1px solid #99cccc;
	border-top: none;
	/* Auto will cause left and right margins to be equal when placed in a centred content wrapper div*/
	margin: 0px auto; 
	padding: 0px;
	text-align: left;
	width: 970px; 
}

/* This wrapper is used to center the page.
   Firefox did not center the div.
   Fix is to use div wrapper (pageWrapper) and add auto to margin in .page	
*/
.pageWrapper 
{
    text-align: center;
}

#divPageContent
{
  /* Area between page header and page content should have the 
     background color of the page so use margin rather than padding. */
  /* Note: Margin top inherits this background color instead of the page
     one - but margin left inherits the page background color. */
    margin-top: 0.3em;
  
}


/**************************************************************************************************

End: Page Start Control

***************************************************************************************************/


/**************************************************************************************************

Start: Page Header Control

***************************************************************************************************/

/* The top part of this control (divPageHeader) contains all the logos */
.banner
{
	height: 60px;
	margin: 0px;
	padding: 0px;
	width: 970px;
}

.bannergamlogo {
	float: left;
	height: 59px;
	width: 256px;
}

.bannerlogos {
	float: right;
	margin: 17px 18px 0px 0px;
}

.bannerlogos a {
	/* Firefox non parse: background: transparent url(../Images/sep_sub_logo.gif) no-repeat 4px right; */
	background: transparent url(../Images/sep_sub_logo.gif) no-repeat right center;
	padding: 10px;
}

.bannerlogos a.lastItem {
	background: none;
	padding-right: 0px;
}

/* The bottom part of this control (divPageHeaderSubMenu) contains
   the breadcrumbs, todays date and the language menu  */

.bar {
	background: url(../Images/bg_banner_menu.gif) repeat-x;
	margin: 0px 5px 0px 5px;
	padding: 5px 20px 5px 20px;

}

.bar a:hover {
	text-decoration: underline;
}

/* Breadcrumbs is the Left Naviagtion Menu displayed in the header */

.breadcrumbs {
	float: left;
}

.breadcrumbs a {
	background:transparent url(../Images/bullet_triangle_white.gif) no-repeat right;	
    color: #ffffff;
	font-weight: bold;
	margin-right: 3px;
	padding-right: 13px;
	text-decoration: none;
}

/* -- new style -- */
.breadcrumbs a:hover,
.breadcrumbs a:visited,
.breadcrumbs a:active {
    color: #ffffff;
	font-weight: bold;
}

/* -- new style -- */
.breadcrumbs a.currentpage,
.breadcrumbs a.currentpage:active,
.breadcrumbs a.currentpage:hover,
.breadcrumbs a.currentpage:visited {
	color: #ffffff;
	background: none;
	font-weight: normal;
	text-decoration: none;
}

/* Place todays date next to the languages menu, with a suitable right margin to separate the 2. */

#divPageHeaderMiddleSubMenu
{
    float: right;
	margin-right: 0px;
}

/* Make the displayed date white */
#divPageHeaderMiddleSubMenu span.date
{
    color: #ffffff;
}

/* Languages menu - EN and DE supported. */

.language ul {
	float: right;
	margin-right: 3px;
	/* Firefox applied a margin whereas IE did not */
	margin-top: 0px; 
}

.language ul li {
	float:left;
	list-style-type:none;
	margin:0px;
	padding-right: 6px;
	white-space:nowrap;
}

.language ul li a {
	background:transparent url(../Images/sep_white.gif) no-repeat;	
	color: #ffffff;
	padding-left: 8px;
}

/* -- new style -- */
.language ul li a:hover,
.language ul li a:visited,
.language ul li a:active {
    color: #ffffff;
}

.language ul li.firstItem a {
	background:none;	
}

/* -- new style -- */
.language ul li a.currentpage,
.language ul li a.currentpage:active,
.language ul li a.currentpage:hover,
.language ul li a.currentpage:visited {
	color: #ffffff;
	font-weight: bold;
	text-decoration: none;
}

/**************************************************************************************************

End: Page Header Control

***************************************************************************************************/



/**************************************************************************************************

Start: Left Navigation Menu Control

***************************************************************************************************/

.menu 
{
	margin-top: 10px;
}

.menu ul 
{
	padding: 0px;
	margin: 0px;
}
.menu ul li 
{
	list-style-type:none;
	padding: 0px;
}

.menu ul li a 
{
	float:left;
	margin: 0px;
	padding:4px 0px 4px 20px;
	text-decoration: none;
	width:180px;
}
.menu ul li.firstItem a
{
	border-top:1px solid #066;
}


.menu .level1 a 
{
	background:transparent url(../Images/bullet_triangle_teal.gif) no-repeat scroll 8px 8px;
	border-bottom:1px solid #066;
	color: #066;
}

.menu .level1-selected a {
	background: #67A3A3 url(../Images/bullet_triangle_white.gif) no-repeat scroll 8px 8px;
	color: #FFF;
	font-weight: bold;
}

.menu .level2 a {
	background: #B3D1D1 url(../Images/bullet_triangle_mint.gif) no-repeat scroll 8px 8px;
	border-bottom:1px solid #66A3A6;
	color: #066;
}

.menu .level2-selected a {
	background: #B3D1D1 url(../Images/bullet_triangle_teal.gif) no-repeat scroll 8px 8px;
	color: #066;
	font-weight: bold;
}

.menu .level3 a {
	background: transparent url(../Images/bullet_t_mint.gif) no-repeat scroll 8px 8px;
	border-bottom:1px solid #BDDED6;
	color: #66A3A6;
}

.menu .level3-selected a {
	background: transparent url(../Images/bullet_t_teal.gif) no-repeat scroll 8px 8px;
	color: #066;
}

/* Same as the level1 first item top border */
.menu ul li.level3lastItem a 
{
	border-bottom:1px solid #66A3A6;
}
/* link, visited, hover, active */
.menu ul li a:hover
{
    text-decoration:underline;
}

/**************************************************************************************************

End: Left Navigation Menu Control

***************************************************************************************************/



/**************************************************************************************************

Start: Page Body Control
This identifies the Left Navigation menu in the leftcolumn
and the page content in the middle column.

***************************************************************************************************/

/* Align with bar in header */
.bodycontent 
{
    margin: 10px 25px 0px 25px;
    padding: 0px;
}


/* Using Divs for left menu and body content  and fixed widths instead of a table */
.leftcolumn 
{
    float: left;
    margin-right: 10px;
    width: 200px;
}

/* Page content displayed in the middle column */
.middlecolumn 
{
	float: left;
	padding-top: 10px;
	width: 700px;
}

/* Sepatate the menu from the content */
#divPageMenu
{
    margin-right: 10px; /* Same as .leftcolumn */
}

/**************************************************************************************************

End: Page Body Control

***************************************************************************************************/


/**************************************************************************************************

Start: Page Footer Control
The footercontent styles are new. These relate to changes in the PageFooter.xsl. Additional styles
will be added to this section for the new footer menu - which is the banner menu, but in the footer.

***************************************************************************************************/

/* This is the main footer div.
   These styles apply if the footer is positioned on the bottom of the page 
   (i.e page content is less than the browser window height).
   or displayed inline
   (i.e page content is more than the browser window height).
*/
#footer	
{
	clear: left;
	float: left;
	width: 970px;
} 	

 /* Footer content larger than the window, so let it flow in its natural position. */
.footerInline
{
  
}

/* Footer content shorter than the window, so position footer at the bottom of the window */
.footer 
{
    bottom: 0px;
    position: absolute; 
}


/* Banner menu in the footer. 
   Banner menu is treated similar to the language menu
   i.e. the ul list is floated right.
*/
.footermenu ul
{
	float: right;
	/* firefox included a margin pushing the menu below the background image */
	margin: 0px; 
}

.footermenu ul li {
	background:transparent url(../Images/sep_mint.gif) no-repeat left;	
	float:left;
	list-style-type:none;
	margin:0;
	padding: 0 4px;
	padding-left: 8px;
	white-space:nowrap;
}

.footermenu ul li.firstItem {
	background: none;
}

.footermenu ul li a,
.footermenu ul li a:active,
.footermenu ul li a:visited {
	color: #9A9A9A;
	float:left;
	text-decoration: none;
}
.footermenu a.currentpage,
.footermenu a.currentpage:hover	{
	font-weight: bold;
	text-decoration: none;
}

/* link, visited, hover, active */
.footermenu ul li a:hover
{
    text-decoration:underline;
}

/* End Banner menu in the footer. */

/* Start footer content */
.footercontent {
	background: transparent url(../Images/sep_footer_3_lines.gif) repeat-x scroll top left;
	color: #9A9A9A;
	font-size: 0.85em;
	/* Align footer content margin with class bodycontent */
	margin: 10px 25px 0 25px;
	padding: 10px 0 0 0;
}
.footercontent .left {
	float: left;
	padding-top: 5px;
	width: 405px;
}
.footercontent .left .content {
	display: none;	
}
.footercontent .right {
	float: right;
	font-size: 1.2em;
	padding-top: 5px;
	text-align: right;
	width: 495px;
}
.footercontent .heading {
	color: #066;
	font-size: 1.3em;
	font-weight: bold;
}
.footercontent .logos {
	margin: 10px 0 10px 0;
}

.footercontent .logos a {
	padding: 0 5px 0 5px;
}

/* No left padding for the first logo */
.footercontent .logos a.firstItem {
	padding-right: 5px;
}
.footercontent .disclaimer {
	clear: both;
	padding: 5px 0 10px 0;
	margin: 0;
}

.footercontent .disclaimer p 
{
    margin-top:5px;
    margin-bottom:0;
}

/**************************************************************************************************

End: Page Footer Control

***************************************************************************************************/


/* Test values to determine how many pixels equals 1em 
#p16px{font-size: 13px;} 
#p1em{font-size: 1em;} 
#border{border: 0.0625em solid black;} 
*/

/* Page Content is displayed in an iframe */
#iframePageContent
{
    overflow:visible; 
    width:100%; 
    display:none;
}

/* General class for displaying error details to the user */
.error
{
    color:#F00; /* Red */
    font-size:1em;
    margin-bottom: 1em;
}
  
/* Class applied to a div, to force content into a div that floats all its internal divs i.e.
   has no other content of its own.
   The div using class bottomContent will be placed below all floated content, 
   allowing the height of the container
   to be determined taking into account all floated divs.
   Without this bottom content div Firefox would report a div height of 0
   for the body content (class=bodycontent)
   Give the div the minimum screen height to be as unobtrusive as possible.
   A div with class bottomContent has been used in the body (which floats 
   the left nav menu and page content), and
   also to the footer content (class=footercontent) which floats
   the left column and the right column.
   This is an attempt to get as many browser variants as possible to report the correct
   size of elements to allow correct placement of the footer.
*/  
.bottomContent
{
  /*background-color:Green;*/
    clear:both;
    height:1px;
    font-size: 0.1em;
}

/* Hide any container e.g. dynamic controls container */
.hidden
{
    display:none;
    background-color:Blue;
}