/* Proportions and Centering Of The Page*/


/* Sets the background colour of the body and other basiics */
body {
	
	font-family:Arial, Helvetica, sans-serif;
	background-color:#170829;
	min-width: 965px;
	text-align:center;
}

/*Controls the width of the editable area, sets the text to the left and the colour of the background */

#wrapper {
	position: relative;
	width: 965px;
	margin: 0 auto;
	text-align:left;
 	background: #fff;
	overflow:hidden;


}
/* Removal of Browser Defaults */

dl,dt,dd,ol,pre,form,li,fieldset,p,blockquote,th,td {  
	margin:0; 
	padding:0;
	font-size:small; 
} 

/* Controls unordered list positioning*/
#content ul {margin-left:10px;}

				   
h1 {font-size:1.5em;
    line-height:1.5em;
	margin-bottom:1em;
	margin-left:10px;
	margin-right:10px;
}

h2 {font-size:1.3em;
    line-height:1em;
	margin-left:10px;
	margin-right:10px;
}
					   
h3 {font-size:1.1em;
    line-height:1em;
	margin-bottom:1em;
	margin-left:10px;
	margin-right:10px;}
	
h4 {font-size:0.9em;
    line-height:1em;
	margin-bottom:1em;
	margin-left:10px;
	margin-right:10px;
}	
h5 {font-size:0.9em;
    line-height:1em;
	margin-bottom:1em;
	margin-left:10px;
	margin-right:10px;
}					   


/* 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;}


/* The Masthead */
#image {
    background:url(http://www.ja.net/images/homepage/masthead-wide-branding.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 {

	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;
	  	width: 100%;

	

}


.nav ul {
  	width: 100%;
	border-top: 1px solid #464a52;
	background: #6a6b6f;
	background:-moz-linear-gradient(top, #96979a, #4e4e51);
	background:-webkit-gradient(linear, left top,left bottom, from(#96979a), to(#4e4e51));
		
  	position:absolute;
  	top: 87px;
		margin-left:0px;
		font-size: 75%;
		padding-left:30px;
	
}

.nav ul li {
		      display:inline;			 
}


.nav ul li a {
width: 19.5%;
  	line-height: 1.8em;
  	text-decoration: none;
 text-align:left;
  	float: left;
	color: #ffffff;




}

/*.nav ul li a .cookies{
width: 30%;
  	line-height: 1.8em;
  	text-decoration: none;
 text-align:left;
  	float: left;
	color: #e7e3d9;
	margin-left:25px;


}*/

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

.trademark {vertical-align:super;}

/* centre content container  */

.centre-content {
position:relative;
               top:20px;
              width:770px;
			  border:#FF0000;
			  float:left;
			  padding-left:10px;
			  font-size:small;
			  padding-top:15px;
			  height:100%;
}

.centre-content-new {
position:relative;
               top:20px;
              width:950px;
			  border:#FF0000;
			  float:left;
			  padding-left:10px;
			  font-size:small;
			  padding-top:15px;
			  height:100%;
}


.centre {position:relative;
               top:20px;
              width:770px;
			  border:#FF0000;
			  float:left;
			  padding-left:10px;
			  font-size:small;
			  padding-top:15px;
			  			  height:100%;}
.centre-content-search {
	font: small Arial, Helvetica, sans-serif;
	margin-left:200px;
	padding : 0;
}
/*.centre-content p {
	margin-right: 20px;
	line-height: 2em;
}
*/

.trademark {vertical-align:super;}

/* The page is divided into three columns - this first column contains the left hand navigation menu (subNav) */
		
#leftColumn{
              position:relative;
              top:20px;
              width:185px;
			  border:#FF0000;
			  float:left;
			  margin-left:3px;
}

#top-left-box {width:180px;
              background-image:url(http://www.ja.net/images/new/box-middle.png);
			  background-repeat:repeat-y;
			  position:relative;
			  margin-bottom:40px;
	
}
#subNav{ width:150px;
position:relative;
font-size:small;
text-decoration:none;
margin-left:-15px;

  }
  
 #subNav ul {width:150px;

 list-style:none;
 text-decoration:none;}
 
  #subNav ul li{text-decoration:none;
                                  padding-bottom:8px;
								  font-size:small;
}


                               
  #subNav ul li.subNav-headings {color:#000000;
font-size:small;
text-decoration:underline;

padding-bottom:8px;
padding-top:8px;}
 
#subNav ul li a{text-decoration:none;
                                  padding-bottom:5px;
								  font-size:small;
}
  
#subNav ul li a:hover{font-size:small;}

/* The page is usually divided into three columns - this second column contains the central area of the page where content is added. This code allows content to fill the whole of the rest of the page width reducing the page to two columns*/
	  
#content{
position:relative;
               top:20px;
              width:530px;
			  border:#FF0000;
			  float:left;
			  padding-left:10px;
			  font-size:small;
			  padding-top:10px;
			  margin-bottom:20px;

}

/* 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;
font-size:small;
margin-left:10px;
}


#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;}
	  
#footer {
	font-family: Arial, Helvetica, sans-serif;
	position:relative;
	font-size: 8px;
	letter-spacing: 1.2px;
	line-height:14px;
	font-weight:bold;
	width: 550px;
	margin-left: 210px;
	text-align:center;
	margin-top:30px;
	margin-bottom: 40px;
	color:#999999;
	clear:both;
		}

#footer a {
		color:#999999;
	text-align:center;
	text-decoration:none;
	
} 

#footer a:hover {
color:#CCCCCC;

}
#footer-new {
	font-family: Arial, Helvetica, sans-serif;
	position:relative;
	font-size: 8px;
	letter-spacing: 1.2px;
	line-height:14px;
	font-weight:bold;
	width: 550px;
	margin-left: 210px;
	text-align:center;
	margin-top:30px;
	margin-bottom: 40px;
	color:#999999;
	clear:both;
		}

#footer-new a {
		color:#999999;
	text-align:center;
	text-decoration:none;
	
} 

#footer a:hover {
color:#CCCCCC;

}

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

#footer-new-homepage {
	font-family: Arial, Helvetica, sans-serif;
	position:relative;
	font-size: 8px;
	letter-spacing: 1.2px;
	line-height:14px;
	font-weight:bold;
	width: 550px;
	margin-left: 210px;
	text-align:center;
	margin-top:70px;
	margin-bottom: 40px;
	color:#999999;
	clear:both;

		}

#footer-new-homepage a {
		color:#999999;
	text-align:center;
	text-decoration:none;
	
} 

#footer-new-homepage a:hover {
color:#CCCCCC;

}


#service-desk a{position:absolute;
              top:65px;
			  left:775px;
			  	font-family: Arial, Helvetica, sans-serif;
				text-decoration:none;
				color:#333333;
	font-size: small;
}


/* This controls the placement of the footer on the page*/

.footer-content {
		font-family: Arial, Helvetica, sans-serif;
	font-size: 8px;
	font-weight:bold;
	letter-spacing: 1.2px;
		text-align:center;
		margin-bottom:60px;
		margin: 0 auto;
	 	width: 400px;
}

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

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


.centre-content-new{width:925px;}
/*

<!-- The code below controls the position of the pop-up box for janet-roaming pages. It will overlay and blank out anything it opens over. -->
		
.pop-up 
{
	position: absolute;
	left: 170px;
	top: 300px;
	z-index: 20;
	visibility: hidden;
	background-color:#ffffff;
}
.content table
{
	margin-left:10px;
	width:auto;
	margin-right: 30px;
}
.popup-font1 
{
	font-size: 15px;
	font-weight: bold;
	color: #004080;
}
.popup-font2 
{
font-size: 11px
}

<!-- The above controls the position of the pop-up box for this pages. It will overlay and blank out anything it opens over. -->

<!-- more Janet roaming 
/* 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;
}

/* 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;
}

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

/* Java Script Menu
================================== */
/*.menu {
	clear:right;
	float:none;
	width: 550px;
	font: small Arial, Helvetica, sans-serif;
	margin-top: 16px;
	background-image:none;
	background-repeat:no-repeat;
	height: 730px;
	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 desription (left hand list) font-weight before/after rollover. Colour setting has NO effect */
/*.position0 
{
	position:absolute;
	left: 12px;
	top: 35px;
	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: 145px;
	z-index: 10;
	font-weight: bold;
	color: #999;
	width: 120px;
	}

/* The positioning of .position3 below has been individually set to account for the larger 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;
}

*/
.panel0
{
	position:absolute;
	left:220px;
	top:35px;
	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 service numbers box) menu-options display panel (named panel1) with solid surround and occupying whole page width */
.panel1
{
	position:absolute;
	left:12px;
	top:375px;
	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;}


#content p{font-size:1em;
            line-height:1.4em;
			margin-bottom:1em;
			margin-left:10px;}
			
.footer-content {
		font-family: Arial, Helvetica, sans-serif;
	font-size: 8px;
	font-weight:bold;
	letter-spacing: 1.2px;
		text-align:center;
		margin-bottom:60px;
		margin: 0 auto;
	 	width: 400px;
}

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

.footer-content a:hover {
	color: #999;
}			
#subNav2{ width:150px;
position:relative;
font-size:x-small;
text-decoration:none;
 list-style:none;
margin-left:-20px;

  }
  
 #subNav2 ul {width:150px;
margin-left:-20px;
 list-style:none;
 text-decoration:none;}
 
  #subNav2 ul li{text-decoration:none;
   list-style:none;
        margin-left:-20px;                          padding-bottom:8px;
								  font-size:x-small;
}


                               
  #subNav2 ul li.subNav-headings {color:#000000;
font-size:x-small;
text-decoration:underline;
 list-style:none;
padding-bottom:8px;
padding-top:8px;
margin-left:-20px;}
 
#subNav2 ul li a{text-decoration:none;
 list-style:none;
                                  padding-bottom:5px;
								  font-size:x-small;
}
  
#subNav2 ul li a:hover{font-size:x-small;
 list-style:none;
 text-decoration:none;}
			

					
/*end of home pages css*/


/* POP-UP box - I put the 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 itselt so remed out now */

/* .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;
	
	}

<!-- more Janet roaming end -->
*/

/*
.links {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 84%;
    position: absolute;
    text-align: right;
    width: auto;
    top: 5px;
    right: 10px;
    z-index: 100;
    background: #FF9000;
    padding: 5px;
    color: white;
}

.links a {
    color: #fff;
}*/