/* 	CSS Document
	Project: wayahead careers
	Authors: Alison Smith
	Start date: 25/06/07
*/

/* ######################################################

					SYSTEM Stylesheet		

   ###################################################### */



body		{text-align:center; font-size:90%; color:#660066;background-color:#ffffff; margin:0px;}
DIV	 {font-family: Arial, Helvetica, sans-serif; margin:0.00pt;}
p, normal			{font-family: Arial, Helvetica, sans-serif; padding:5px 0px 0px 5px; margin: 0px 0px 0px 0px; }
p, li, normal, td {font-size:90%;}
form		{MARGIN:0; padding:0;}
h1			{font-size:110%; padding:0px 0px 0px 5px; font-weight:bolder; }
h2			{font-size:105%;padding:0px 0px 0px 5px;font-weight:bolder;}
h3			{font-size:100%;padding:0px 0px 0px 5px;font-weight:bolder;}
hr			{color:#cccccc;}
ul		{list-style-image:  url(../../../../images/listarrow.gif);font-family: Arial, Helvetica, sans-serif;}
a			{font-weight:bold; text-decoration:none;color:#660066;}
a:link		{font-weight:bold; text-decoration:none;color:#660066;}
a:hover		{font-weight:bold; text-decoration:none; color:#660066; background-color:#cccccc;}
a:visited	{font-weight:bold; text-decoration:none; color:#660066;}
img			{border:0;}
td			{padding:2px;}

/****** MAIN CONTAINER *******/
#wrapper
{
	width:760px;	
	margin:0 auto;
	border-left:1px solid #660066;
	border-right:1px solid #660066;
	position:relative;
	text-align:left;
	z-index:1px;
}

/****** HEADER - title images and top nav bar *******/

#header
{
	width:760px;
	height:87px;
	padding:0px 0px 0px 0px;
	background:#660066;
}

#selectarea
{
clear:both;
padding:10px 0px 5px 0px;
text-align:center;
}
#selectarea ul
{
padding:0;
margin:0;
list-style-type:none;
}

#selectarea li 
{
display:inline;
letter-spacing:1px;
font-size: 85%;
font-weight: 800;
}

#selectarea a
{
/*float:left;*/
/*width:6em;*/
text-decoration:none;
color:#660066;
background:#cc99cc;
padding:3px;
border:1px solid #660066;
}

#selectarea a:hover {background-color:#ffffff;}
#selectarea a:visited {color:#660066;}


	/* Top Drop Down Menu Styles */
	/* These styles are used globally by the top drop down menu. Colour specifc styles are defined else where.

		/* style for the containing div for the menu */
		/* note, the font size of 83% gives a very similar font-size in IE and Mozilla. feel free to change it, but appreciate the impact cross-browser */
		div#topdropmenu 
		{	
			font-family:Verdana, Arial, Helvetica, sans-serif;
			z-index:199;
			width:760px;
			float:left;
			position:relative;
			background-color:#ff9900;
			clear:both;
			padding-top:5px;
		}
		
		/* default ul tag style for this menu - you probably won't need to change this */
		div#topdropmenu ul 
		{line-height:1em;
			list-style:none;
			margin:0px;
			padding:0px;
		}
		
		/* style for the actual menu links. display and height are important to the operation of the menu. change the others if you like (note:colour changes should probably go in the colour style sheets */
		div#topdropmenu a {
			margin:0px;
		/*	height:100%;*/
			text-decoration:none;
			color:#660066;
			background-color:#ff9900;
			padding: 5px 5px 2px 5px;
			border-right:1px solid #660066;
		}

		/* default li tag style for this menu - you probably won't need to change this */
		/* the postion:relative and float:left are critical to the correct operation of the menu */
		div#topdropmenu ul li	{position:relative; float:left; margin:0px; text-align:left;}
		
		/* this style is essential to the correct operation of the menu. it ensures correct positioning of the "leaves". */
		div#topdropmenu ul ul {
			position:absolute;
		}

		/* The following 2 groups of styles handle making the menu leaves appear and disappear on mouseover*/
		/* if want extra levels of drop downs, you need to add extra styles here for each level*/
		/* There are sufficient styles here for a 3 level menu. for a 4th level add a new css selector with an additional*/
		/* ul tag before the li:hover. eg div#topdropmenu ul ul ul ul li:hover ul ul/*
		/* please read the ImmSample documentation for more details */
		div#topdropmenu ul ul, 
		div#topdropmenu ul li:hover ul ul,
		div#topdropmenu ul ul li:hover ul ul,			
		div#topdropmenu ul ul ul li:hover ul ul
		{
			display:none;
		}
		
		div#topdropmenu ul li:hover ul,
		div#topdropmenu ul ul li:hover ul,
		div#topdropmenu ul ul ul li:hover ul,
		div#topdropmenu ul ul ul ul li:hover ul
		{
			display:block;
		}
	
	/* This next block of styles controls the appearance of the top menu bar and also contains styles to override the level 0 styles for lowers levels where necessary */
	/* it is this section which really differentiates the top drop down menu from a side flyout menu */

	/* We have found that using px units (rather than say em units) is more reliable across different browsers implementations of the CSS2 box model.*/
	/* CSS2 is seriouly flawed in how it handles dimensions of content elements, but we're stuck with it until CSS3 is widely adopted */
		
	/* This section defines the width of the menu items at different levels */
	div#topdropmenu ul.L0		{width:760px; } /* defines the total width of the top menu */
	div#topdropmenu ul.L1		{width:126px;} /* width of level 1 leaves */
	div#topdropmenu ul.L2		{width:126px;} /* width of level 2 leaves */
	div#topdropmenu ul.L3		{width:126px;} /* width of level 3 leaves */
	div#topdropmenu ul.L4		{width:126px;} /* width of level 4 leaves */
	div#topdropmenu ul.L5		{width:126px;} /* width of level 5 leaves */
	
	/* defines position of drop down leaves */
	div#topdropmenu ul.L0 ul	{top:19px; left:0;} /* position of first leaf */
	div#topdropmenu ul.L1 ul	{top:-1px; left:100%;} /* position of second leaf */
	div#topdropmenu ul.L2 ul	{top:-1px; left:100%;} /* position of third leaf - if there is one*/
	div#topdropmenu ul.L3 ul	{top:-1px; left:100%;} /* position of fourth leaf */
	div#topdropmenu ul.L4 ul	{top:-1px; left:100%;} /* position of fifth leaf - if there is one*/
	div#topdropmenu ul.L5 ul	{top:-1px; left:100%;} /* position of sixth leaf - if there is one*/

	/* defines width of menu items */
	div#topdropmenu ul.L0 li	{height:19px;} /* level 0 items */
	div#topdropmenu ul.L1 li	{width:126px; height:auto;} /* level 1 items */
	div#topdropmenu ul.L2 li	{width:126px; height:auto;} /* level 2 items */
	div#topdropmenu ul.L3 li	{width:126px; height:auto;} /* level 3 items */
	div#topdropmenu ul.L4 li	{width:126px; height:auto;} /* level 4 items */
	div#topdropmenu ul.L5 li	{width:126px; height:auto;} /* level 5 items */
	
	/* defines height and width of a tags within the above li tags*/
	/* note that padding-left, padding-right and width must add up to the values above. mozilla seems to have a bit of problem in the sample site here in the for the top level only, we had to add 4 more pixels in order to get the borders to show properly on the menu */
	/* padding-top and padding bottom styles are useful for netscape which doesn't seem to handle "filling" the LI tag to 100% height */
	/* change the padding styles, but exercise some caution with different browsers*/
	div#topdropmenu ul.L0 li a	{height:20px; font-size:100%; padding-top:5px; padding-left:3px; padding-right:7px; }
	div#topdropmenu ul.L1 li a	{width:106px; height:auto; font-size:110%; font-weight:normal; padding-left:5px; padding-right:15px; padding-top:.20em; padding-bottom:.25em;display:block; }
	div#topdropmenu ul.L2 li a	{width:106px; height:auto; font-size:120%; font-weight:normal; padding-left:5px; padding-right:15px; padding-top:.23em; padding-bottom:.33em;}
	div#topdropmenu ul.L3 li a	{width:106px; height:auto; font-size:130%; font-weight:normal; padding-left:5px; padding-right:15px; padding-top:.23em; padding-bottom:.33em; }
	div#topdropmenu ul.L4 li a	{width:106px; height:auto; font-size:140%; font-weight:normal; padding-left:5px; padding-right:15px; padding-top:.23em; padding-bottom:.33em;}
	div#topdropmenu ul.L5 li a	{width:106px; height:auto; font-size:150%; font-weight:normal; padding-left:5px; padding-right:15px; padding-top:.23em; padding-bottom:.33em;}

/*Top Drop Down Menu Color Selection Styles */

	/* All Level Styles*/
	#topdropmenu			{}	
	#topdropmenu a			{}
	#topdropmenu a:hover	{}

	/* Level 0 Styles */
	#topdropmenu UL UL.L0			{}	/* level 0 "leaf" properties - not really a leaf since its the top level */
	#topdropmenu a.L0hc				{color:#660066; background:#ff9900;}  /* level 0 item with children properties. defines background color and bullet image */
	#topdropmenu a.L0nc				{color:#660066; background:#ff9900;} /* level 0 item with no children properties. defines background color*/
	
	#topdropmenu a.L0hc:hover		{color:#660066;}	/* hover effect for level 0 with children */
	#topdropmenu a.L0nc:hover		{color:#660066; } /* hover effect for level 0 with no children */

	
	/* Level 1 Styles */
	#topdropmenu UL UL.L1			{border:1px solid #660066;}
	#topdropmenu a.L1hc				{color:#660066; background:#ff9900;}
	#topdropmenu a.L1nc				{color:#660066; background:#Ff9900;}
	
	#topdropmenu a.L1hc:hover		{color:#ff9900; background:#660066; font-weight:bold;}	
	#topdropmenu a.L1nc:hover		{color:#ff9900; background:#660066; font-weight:bold;}

	/* Level 2 Styles */
	#topdropmenu UL UL.L2			{border:1px solid #660066;}
	#topdropmenu a.L2hc				{color:#660066; background:#ff9900;}
	#topdropmenu a.L2nc				{color:#660066; background:#ff9900;}
	
	#topdropmenu a.L2hc:hover		{color:#ff9900; background:#660066; font-weight:bold;}	
	#topdropmenu a.L2nc:hover		{color:#ff9900; background:#660066; font-weight:bold;}	

	/* Level 3 Styles */
	#topdropmenu UL UL.L3			{border:1px solid #ff9900;}
	#topdropmenu a.L3hc				{color:#660066; background:#ff9900;}
	#topdropmenu a.L3nc				{color:#660066; background:#ff9900;}
	
	#topdropmenu a.L3hc:hover		{color:#ff9900; background:#660066; font-weight:bold;}	
	#topdropmenu a.L3nc:hover		{color:#ff9900; background:#660066; font-weight:bold;}
	/* end top menu bar*/
	
/******* SEARCH BOX  *******/
#search {clear:both; background-color:#ffffff; width:760px; height:24px; padding-top:5px;}		
#searchBox {float:right; margin-right:10px; color:#000000; font-size:95%;}

#searchBox input
{
	margin:0px 2px 0px 0px;
	color:#000000;
	background-color:#FFFFFF;
	border:1px solid #660066;
	width:75px;
}
#searchBox a
{
width:16px;
vertical-align: middle;
}	
/****** CONTENT AREA *******/
#container
{	width:760px;
	padding:0px 0px 0px 0px;
	background:#ffffff;
	text-align:left;
	position:relative;
	z-index:1;
}

#pgtitle
{	padding:5px 0px 0px 0px;
	text-align:center;
}
#leftcolumn
{	width:420px;
	float:left;
	padding:10px;
}

#rightcolumn

{	width:290px;
	float:right;
	padding:10px;
}
/****** shaded areas *******/
.leftbox {
	width:420px;
	padding:0px;
	margin-bottom:10px;
	position:relative;

	}
.rightbox {
	width:290px;
	padding:0px;
	margin-bottom:10px;
	position:relative;
	}
/**pink background **/

.pink{background-color:#FFCCFF;
}
.pinkcontent{
		background-color:#FFCCFF;
		border-left:1px solid #CC99CC;
		border-right:1px solid #CC99CC;
		padding:2px 5px 0px 5px;
		font-size:90%;}
/** lavendar bg, purple oultine and text **/	
.lavenderheader 
{
	background-color:#cc99cc;
	padding:0px 0px 0px 5px;
	border-left:1px solid #660066;
	border-right:1px solid #660066;
	color:#660066;
	font-size:105%;
	font-weight:800;
}
/** purple bg, white text, orange text **/
.purple {background-color:#660066;
	color:#ffffff;}
.purpleheader 
{
	background-color:#660066;
	padding:0px 0px 0px 5px;
	color:#ff9900;
	font-size:105%;
	font-weight:800;
}
.purple a			{font-weight:bold; text-decoration:none;color:#ffffff;}
.purple a:link		{font-weight:bold; text-decoration:none;color:#ffffff;}
.purple a:hover		{font-weight:bold; text-decoration:none; color:#660066; background-color:#ff9900;}
.purple a:visited	{font-weight:bold; text-decoration:none; color:#ffffff;}
.whiteheader 
{
	background-color:#660066;
	padding:0px 0px 0px 5px;
	color:#ffffff;
	font-size:105%;
	font-weight:800;
}
/** orange bg, purple text header**/
.orange{background-color:#FF9900;}
.orangeheader 
{
	background-color:#ff9900;
	padding:0px 0px 0px 5px;
	border-left:1px solid #660066;
	border-right:1px solid #660066;
	color:#660066;
	font-size:105%;
	font-weight:800;
}
/** purple on grey bg**/
.greyheader 
{
	background-color:#cccccc;
	padding:0px 0px 0px 5px;
	border-left:1px solid #660066;
	border-right:1px solid #660066;
	color:#660066;
	font-size:105%;
	font-weight:800;
}
/** purple on grey bg with grey border**/
.allgreyheader 
{
	background-color:#cccccc;
	padding:0px 0px 0px 5px;
	border-left:1px solid #cccccc;
	border-right:1px solid #cccccc;
	color:#660066;
	font-size:105%;
	font-weight:800;
}
/*grey bg*/
.grey{background-color:#CCCCCC;}
/* clear bg, grey outline */	
.clear{ background-color:#ffffff;}
.clearcontent
{ 	border-left:1px solid #CCCCCC;
	border-right: 1px solid #CCCCCC;
	padding:2px 5px 0px 5px;
	font-size:90%;
	z-index:100;}
/* purple border and text on white bg */	
.purplecontent
{	border-left:1px solid #660066;
	border-right: 1px solid #660066;
	padding:0px 5px 0px 5px;
	margin:0px;
	font-size:90%;}

.top {clear:both;
position:relative;
}
	
.bottom
{
clear:both;
position:relative;
padding:0px;
margin:0px;
}
/****** FOOTER AREA *******/
#footer
{
	clear:both;
	width:760px;
	background-color: #660066;
	color:#ffffff;
	font-size:80%;
	text-align:center;
}

#footer p 
{
	margin: 0px 0px 0px 0px;
	text-align:center;
	color: #ffffff;
}

#footer a:link
{
	color:#ffffff; 
	text-decoration:none;
}

#footer a:hover
{
	color: #ffffff;
	text-decoration:underline;
	background-color: #660066;
}

#footer a:visited
{
	color:#ffffff;
	text-decoration:none;
}
.spaceImg
{
	float:right;
	margin-top:10px;
	margin-right:10px;
}
.buttonBG
{
	border: 1px solid #ff9933;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #ff6600;
	background-color:#fff;
}