/* New wide-page-style css. Body, wrapper and masthead sections affected. */

/* Proportions and Centering Of The Page*/

/* Old body, prior to Jan 13 2011 
body {
	
	font-family:Arial, Helvetica, sans-serif;
	background-color:#434E75;
	min-width: 770px;
	text-align:center;
}
*/
/* New wide body */
body {
	
	font-family:Arial, Helvetica, sans-serif;
	background-color:#434E75;
	min-width: 965px;
	text-align:center;
}
/* Old wrapper, prior to Jan 13 2011 
#wrapper {
	position: relative;
	width: 770px;
	margin: 0 auto;
	text-align:left;
 	background: #fff;
	overflow:visible;
}
*/
/* New wrapper. Nb 'overflow:hidden;' has NOT been imported from other new-style css. The previous visible setting has been retained. This is important because it allows oversize pop-up boxes to be displayed in full. */
#wrapper {
	position: relative;
	width: 965px;
	margin: 0 auto;
	text-align:left;
 	background: #fff;
	overflow:visible;  
}


/* Removal of Browser Defaults */

div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,p,blockquote,th,td {  
	margin:0; 
	padding:0; 
} 


/* Removal Of Borders From Link Tags */
img { 
border: 0px none;
max-width:575px;
 width: expression(this.width > 555 ? 555: true);
}

.img-float-left {float:left;
                  margin-right:10px;}


/* Old The Masthead, prior to Jan 13 2011  
#image {
    background:url(/images/homepage/masthead.png) no-repeat;
	margin: 0;
	height:103px;
}
*/
/* The New Masthead */
#image {
    background:url(http://www.ja.net/images/new/masthead-wide2.png) no-repeat;
	margin: 0; 
	height:103px;
}



div#image a#logo {
    display:block;
    float:left;
    width:100px;
    height:80px;
}

div#image a#logo img {
    display:none;
}

/* Search Box Formatting */

#search {

	font-family: Arial, Helvetica, sans-serif;
	font-size: small;
	position: absolute;
	text-align: right;
	width: auto;
	top: 35px;
	right: 10px;
	z-index: 100;
}

/* Horizontal Navigation Menu */

.nav {
	font-weight:bold;
	

}


.nav ul {
  	width: 100%;
	border-top: 1px solid #464a52;
	background: #5d75a3;	
  	position:absolute;
  	top: 90px;
		font-size: 75%;
		
		

}

.nav ul li {
		      display:inline;			 
}


.nav ul a {
width: 24.99%;
  	line-height: 1.8em;
  	text-decoration: none;
 text-align:center;
  	float: left;
	color: #e7e3d9;
  	background: url(/images/homepage/nav-bg.gif) no-repeat bottom right;
}

.nav li a:hover {
	color: #ff9900;
	}

/* Content Container - you can use this to over-ride content-page.css settings for JANET-Roaming pages, but to permit various table widths per page define setting on the page itself via style script */

.content table
{
margin-left:10px;
}


/* Centre Content container  */


.centre-content {
	font: small Arial, Helvetica, sans-serif;

	width: 770px;

	padding : 0;
} 

.centre-content-search {
	font: small Arial, Helvetica, sans-serif;

	width: 770px;

	margin-left:200px;
	padding : 0;
}

/* Following remd out to try to fix line spacing problem - yes it worked, keep this remd out!
.centre-content p {
	margin-right: 20px;
	line-height: 2em;
} */
.centre-content p {
	margin-right: 20px;
	
}
.trademark {vertical-align:super;}

/* To correct the left hand misalignment of the list defined in content-page.css */
.content ol {
margin-left: 50px;
	line-height: 1.4em;
	font-size:1em;
	margin-bottom: 1em;
	margin-right:10px;
}

/* Code imported from common-elements-new.css to support the right hand box, particularly fonts etc */

/* The page is divided into three columns - this third column contains right hand box(es)*/
#third-column{
position:relative;
top:20px;
float:right;          
width:185px;
border:#FF0000;
margin-bottom:20px;
			  }	
			  
#top-right-box, #bottom-right-box{width:180px;
              background-image:url(http://www.ja.net/images/new/box-middle.png);
			  background-repeat:repeat-y;
			  position:relative;}

#box-content2, #box-content3{width:160px;
position:relative;
margin-left:3px;
font-size:small;
}

#box-content2 p, #box-content3 p{width:140px;
position:relative;
font-size:small;
margin-left:10px;}

#box-content2 a:hover{font-size:small;}
#box-content3 a:hover{font-size:small;}
			  
#top-right-box{width:180px;}

#bottom-right-box{width:180px;}

.box-content-top{margin-top:5px;}

/* End of right hand box */


/* Javascript Area
================================== */

/* Java Script Menu
================================== */

/* The following applies to the whole 'menu' box */
.menu {
	clear:right;
	float:none;
	width: 570px;
	font: small Arial, Helvetica, sans-serif;
	margin-top: 16px;
	background-image:none;
	background-repeat:no-repeat;
	height: 750px;
	position: relative;
	left: 0px;
	top: 0px;
}

.menu-container
{
	position:relative;
	width: inherit;
}

.menutraining {
	clear:left;
	float:left;
	width: 400px;
	font: small Arial, Helvetica, sans-serif;
	margin-left: 10px;
	background-repeat:no-repeat;
	height: 300px;
}
/* The font weights below affect the menu-list description (left hand list) font-weight before/after rollover. Colour setting has NO effect */
.position0 
{
	position:absolute;
	left: 12px;
	top: 45px;
	z-index: 10;
	font-weight: bold;
	color: #0000FF;
	width: 120px;
	
}
.position1
{
	position:absolute;
	left: 12px;
	top: 90px;
	z-index: 10;
	color: #00FF00;
	font-weight: bold;
	width: 120px;
}

.position2 
{
	position:absolute;
	left: 12px;
	top: 150px;
	z-index: 10;
	font-weight: bold;
	color: #999;
	width: 120px;
	}

/* The positioning of .position3 below has been individually set to account for the greater than normal text in p2 "Info for Senior Management" */
.position3
{
	position:absolute;
	left: 12px;
	top: 215px;
	z-index: 10;
	font-weight: bold;
	width: 120px;
}

.position4
{
	position:absolute;
	left: 12px;
	top: 255px;
	z-index: 10;
	font-weight: bold;
	color: #999;
	width: 120px;
}

.position5
{
	position:absolute;
	left: 12px;
	top: 310px;
	z-index: 10;
	font-weight: bold;
	color: #999;
	width: 120px;
}

.position6
{
	position:absolute;
	left: 12px;
	top: 365px;
	z-index: 10;
	font-weight: bold;
	color: #999;
	width: 120px;
	}

.position7
{
	position:absolute;
	left: 12px;
	top: 420px;
	z-index: 10;
	font-weight: bold;
	color: #999;
	width: 120px;
}

.position8
{
	position:absolute;
	left: 12px;
	top: 475px;
	z-index: 10;
	font-weight: bold;
	color: #999;
	width: 120px;
}

.position9
{
	position:absolute;
	left: 12px;
	top: 530px;
	z-index: 10;
	font-weight: bold;
	color: #999;
	width: 120px;
}

/* The following does NOT appear to have any affect */
.position0 a:hover, .position1 a:hover, .position2 a:hover, .position3 a:hover, .position4 a:hover, .position5 a:hover, .position6 a:hover, .position7 a:hover, .position8 a:hover, .position9 a:hover
{
	color: #999;
}
/* The following affects the initial load screen appearance before any rollover has occurred (apart from the special case invoked by the showservices() command, thereafter a different colour applies */
.position0 a, .position1 a, .position2 a, .position3 a, .position4 a, .position5 a, .position6 a, .position7 a, .position8 a, .position9 a
{
	color: #999999;
	text-decoration: none;
}
/* Menu selection and menus content 'box' */
.panel0
{
	position:absolute;
	left:220px;
	top:45px;
	z-index: 10;
	background-color:#ffffff;
	color:#000000;
	font:small Arial, Helvetica, sans-serif;
	visibility:hidden;
	width: 310px;
}
/* The following is an alternative (now used for the supplementary information & tweeting box at bottom of page) menu-options display panel (named panel1) with solid surround and occupying whole page width */
.panel1
{
	position:absolute;
	left:12px;
	top:440px;
	z-index: 10;
	background-color:#ffffff;
	color:#000000;
	font:small Arial, Helvetica, sans-serif;
	visibility:visible;
	width: 540px;
	border:thin solid #5d75a3
}
.panel2
{
	position:absolute;
	left:12px;
	top:500px;
	z-index: 5;
	background-color:#ffffff;
	color:#000000;
	font:small Arial, Helvetica, sans-serif;
	visibility:visible;
	width: 540px;
	border:thin solid #5d75a3
}


/* The following does not appear to have any affect */
.panel ul	{
	position:relative;
	padding-left: 15px;
	color:#999; 
	padding-bottom:10px;
}

.panel li{margin-bottom:4px;}

/* The following affects the 'span' sub-text in the menu panel */
.panel li span{color:#666666;} 

/* The following affects the descriptions in the menu panel */
.panel li.desc a{font-weight:bold;color:#0000CC;text-decoration:none;}


/* POP-UP box - I put the following in here rather than on the JRS page itself because it looks like it belongs here! But I've now put it on the page itself so remmed out now .....probably allows pop-up to be used on other pages and parameters to be set for each page independently */

/* .pop-up {
	position: absolute;
	left: 170px;
	top: 400px;
	z-index: 2;
	visibility: hidden;
} */

/* Set table cells in pop-up box to have green border */

/* table {width:auto;} */

/*
td {
	font-size: x-small;
	color: #000000;
	background-color: #FFFFFF;
	border: thin solid #5b6b82 collapse;
	padding-left:5px;
}
*/

/* Set table header of pop-up box to green with white medium text */
/*
th {
	font-size: small;
	color: #FFFFFF;
	background-color: #5b6b82;
	border: thin solid #5b6b82 collapse;
	padding-left:5px;
	
	}
*/	
/* End of try pop-up box section. */


/* Footer Home Page
================================== */

.footer {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 8px;
	letter-spacing: 1.2px;
	font-weight:bold;
	 	width: 350px;
		margin-left: 210px;
		text-align:center;
		margin-top:50px;
}

.footer a {
	color:#666;
	text-align:center;
}

.footer a:hover {
	color: #999;
}