/*************************************************
SHLDirect Style Sheet
Author: David Hattingh
Date: 26/06/07
David.Hattingh[at]shlgroup.com
*************************************************/

body {
	color: #666666;
	font-family: verdana, arial, helvetica, sans-serif;
	font-size: 76%;/* font sizing in ems. if you want to change anything, just change this.*/
	/*strange thing happens at 75% and lower. opera goes to a nice small size, but moz and ie pc change almost not at all. seems 76% is as small as you can go and stay the same across browsers.*/
	text-align: right; /*rtl*/
	min-width: 761px;
}

html {
   overflow: -moz-scrollbars-vertical; /**Browser filter to force a inactive vertical scrollbar in Mozilla browsers**/
}

html>body #centercontent { /**Browser filter to ensure content is always centered within the browser window**/
	width: 30%;
	height: 150px;
	margin-bottom: 15px;
}

#logo {
	height: 100px;
	padding: 0;
	width: 761px;
	clear:both;
}
#go
{
	width:35px;
	height:23px;
	margin-left:3px;
 
}	
	


#bannerAd {
	width: 468px;
	height: 40px;
	float: left; /* rtl */
	/* background: url(../../images/SHL_Direct_banner.gif) no-repeat right center; */
	padding-top: 31px;
	display:inline;
	cursor:pointer;
	cursor:hand;
	
	
}

#bannerAd a {
	border:none;
	
}

#navigator { 

	float:left; /*rtl*/
	margin-right:7px;
	width: 170px; /*rtl: a narrow dropdown box causes misplacemet */
	text-align: left; /*rtl: added to fix index.html*/
	
}

#navigatorPages { 
	float: left;  /*rtl*/
	margin: -28px 0 12px 0;
	
}		

#mainNav {
	width: 761px;
	/*margin-bottom: 10px;*/
	background-image: url(../../images/nav.jpg);
	height: 30px;
	background-repeat: no-repeat;
	margin-bottom: 7px;
	margin-top:10px;
	padding-top:7px; /*rtl*/
	
}

#mainNav li {
	list-style-type: none;
	float: left;
	padding: 6px 15px 0 0; 
	display:inline
}

#mainNav li a {
	text-decoration:none;
	color: #666666;
	font-size: 1em
}

#mainNav li a:hover{
	color: #666666;
}

#mainNav #active {
	float: right;
	display: inline;
}

h1 {
	background: url(../../images/icon_h1_bluearrow_50x50_ar.gif) no-repeat top right;
	padding: 0px 0px 20px 0px;
	font-weight: normal;
	color: #CC0066;
	font-family: Verdana,Arial,Helvetica,sans-serif;	
	font-size: 2em;
	text-align: right; /*rtl*/
	margin: 10px 0px -20px 0px; /*rtl*/
}

h2 {
	font-weight: normal;
	color: #330066;
	font-size: 1.7em;
	text-align: right /*rtl*/
}	

h2 img {
	border:none;
	padding-right:.5em;
}

h3 {
	font-weight: normal;
	color: #330066;
	font-size: 1.4em;
	text-align: right /*rtl*/
}

h3 img {
	border:none;
	padding-right:.5em;
}

h4 {
	font-weight: normal;
	color: #330066;
	font-size: 1.25em;
	text-align: left
}

h4 img {
	border:none;
	padding-right:.5em;
}

img a: {
	text-decoration:none
}

h5 {
	font-weight: normal;
	color: #330066;
	font-size: 1.0em;
	text-align: right; /*rtl*/
}

h5 img {
	border:none;
	padding-right:.5em;
}

h5 .link {
	color: #330066;
}

h6 {
	font-weight: normal;
	color: #330066;
	font-size: 0.8em;
	text-align: left
}

p {
	font: Verdana, Arial, Helvetica, sans-serif 1em normal;
	padding: 0 0 7px 0;
}

#footer {
	background-image: url(../../images/footer.jpg);
	background-repeat:no-repeat;
	height: 33px;
	list-style-type: none;
	width: 761px;
	clear:both;
	padding-top:5px; /*rtl*/
	
}


#footer li {
	list-style-type: none;
	float: left;
	padding: 6px 15px 0 0;
	display:inline;
	font: Verdana, Arial, Helvetica, sans-serif;
}

#footer li a {
	text-decoration:none;
	color: #666666;
	/*display: block;*/
	font-size: 1.0em
}

#footer #active {
	float: right;
	/*margin-right: 10px;*/
	color: #666666;
	font: Verdana, Arial, Helvetica, sans-serif;
	font-size: 1em;
	display:inline
}



/************************
	Hyperlink styles
************************/

a:link, a:visited, a:active, a:hover {
	font-size: 1.0em;
	color: #666666;
	text-decoration: none;
	cursor: hand
}

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

/***********************
	Code for tool-tips
***********************/

a.info {
    position:relative; /*this is the key*/
    z-index:24; 
    text-decoration:none
}

a.info:hover {z-index:25; background-color:#ffccff}

a.info span{display: none}

a.info:hover span { /*the span will display just on :hover state*/
    display:block;
    position:absolute;
    top:2em;
	left:2em;
	width:60em;
    border:1px solid #000;
    background-color:#ffffd5; 
	color:#000;
    text-align: left;
	padding: 0.5em
}

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



#assessmentAdviceTxt {
	float: left;
	width: 28%;
	margin-bottom: 0px;
	text-align: center;
	display:inline
}



.backtoTop {
	background: url(../../images/back_to_top.gif) no-repeat right center;
	padding: 0px 15px 0px 0px; /*rtl. Was 0 0 0 15*/
	font-weight: normal;
	text-align:right; /*rtl*/
	/*letter-spacing:.1em;
	color: #CC0066;
	font-family: Verdana,Arial,Helvetica,sans-serif;	
	font-size: 1em;
	text-align:left*/
}

#bp {
	font:Arial, Helvetica, sans-serif 5em bold;
	color: #FFFFFF;
	padding: 15px 320px 0px 15px;
	margin: 0;
}

#boxWrapper {
	height: 75px;
	width: 761px;
 	padding-bottom: 15px;
}

#boxWrapper1 {
	width: 761px;
	margin: 0 auto;
	bottom: 0px;
	
	
}

#boxWrapper2 {
	width: 761px;
	margin-bottom: 15px;
}

#centercontent {
	float: left;
	width: 30%;
	/*background-image:url(../images/practice_tests_icon.gif);*/
	background-position: top center;
	background-repeat: no-repeat;
	cursor: pointer;
	display:inline
	
}

#content {
	overflow: hidden;
	width: 761px;
	clear:both
}

#copyright {
	text-align:right;	
	font-size: 1.0em;
	color: #666666
}

.expanded {
cursor:pointer;
border: none
}

.expanded:hover {
	cursor:pointer;
	border: none
}

#header img{
	padding: 0;
	margin: 0;
	position: absolute;
	left: 0px;
	top: 0px;
	right: 0px;
	bottom: 0px;	
	display:none;/*border: medium solid #FF0000;	*/
}

.hide {
	position:absolute;
	left:-999em;
	height:1px;
	width:100px;
	overflow:hidden;
	background:url(../../images/icon_magenta_arrow_11x15.gif) no-repeat left center;
}



.iconHeader {
	font-size:1.7em;
	color: #666666;
}

#leftcontent {
	float:right; /*rtl*/
	width:30%;
	height: 150px;
	cursor: pointer;
	text-align:right; /*rtl*/
	padding-left: 75px;
	padding-bottom: 15px;
	display: inline
}

#leftcontentPages {
	font:Verdana, Arial, Helvetica, sans-serif 1em;
	color: #666666;
	float:right; /*rtl*/
	width:70%;
	margin-bottom: 5px;
	text-align: right; /*rtl*/
	display:inline;
	
	
}

#pf.leftcontentPages {
	font:Verdana, Arial, Helvetica, sans-serif 1em;
	color: #666666;
	float:left;
	width:70%;
	margin-bottom: 5px;
	text-align: left;
	display:inline
}

#leftcontentPagesEg {
	font:Verdana, Arial, Helvetica, sans-serif 1em;
	color: #666666;
	float:right; /*rtl*/
	width:70%;
	margin-bottom: 5px;
	text-align: right; /*rtl*/
	display:inline
}

#pf.leftcontentPagesEg {
	font:Verdana, Arial, Helvetica, sans-serif 1em;
	color: #666666;
	float:left;
	width:70%;
	margin-bottom: 5px;
	text-align: left;
	display:inline
}

#iconsWrap {
	margin-top: 5px;
	clear: left;
	/*margin: 0px 11px 20px 11px; This is the same as the welcome box margins - uneven slice width*/

}

.iconBox {
	float:left;
	width: 33%;
}

.iconBox h3,.iconBox a {
	color:#666666;
}

.iconBox h3 {
	width: 200px;
	margin: 0 0 10px 15px;
}

.iconBox a {
	padding: 9px 10px 0px 145px;
	display: block;
	height: 125px;
	text-decoration:none;
}

a#workedEg {
	background: url(../../images/workedEgStat.gif) no-repeat left top;
}

a#workedEg:hover {
	background: url(../../images/workedEg.gif) no-repeat left top;
	text-decoration:underline;
}

a#practiceTest {
	background: url(../../images/testStat.gif) no-repeat left top ;
}

a#practiceTest:hover {
	background: url(../../images/test.gif) no-repeat left top;
	text-decoration:underline;
}

a#assAdvice {
	background: url(../../images/AdviceStat.gif) no-repeat left top;
}

a#assAdvice:hover {
	background: url(../../images/Advice.gif) no-repeat left top;
	text-decoration:underline;
}

#welcomeBox {
	color:#ffffff;
	background: url(../../images/look_sharp.jpg) no-repeat right top;
	height: 161px;
	width: 761px;
	text-align: right; /*rtl*/
 
}

#welcomeBox p {
	color:#FFFFFF;
	padding: 12px 12px 30px 320px; /*rtl*/
	margin: 0;
	/*font-weight:bold;*/
	line-height: 1.3em
}

#welcomeBoxheader{
	color:#FFFFFF;
	padding: 8px 12px 0px 320px; /*rtl*/
	margin: 0;
	font-size: 2em;
	/*font-weight:bold;*/
	line-height: 2em;
	background-image:none
}

#pgItro {
	height: 180px;
	width: 761px;
	text-align: left;
	margin-top: 25px;
}

.privacy li a {
	list-style:none
}

* html #welcomeBoxTxt {
	color:#FFFFFF;
	width: 65%;
	padding-left: 2%;
	height: 100%;
	padding-top: 5%;
}



#rightcontentPages1 {
	background: url(../../images/spiral.jpg);
	float: left; /*rtl*/
	width: 25%;
	height: 280px;
	background-position: left top;
	background-repeat:no-repeat;
	margin: 10px 0 10px 0;
	text-align:right;
	/*display: inline*/
}

#rightcontentPages2 {
	background: url(../../images/peas_in_pod.jpg);
	float: left; /*rtl*/
	width: 25%;
	height: 280px;
	background-position: left top; /*rtl*/
	background-repeat:no-repeat;
	margin: 10px 0 10px 0;
	text-align:left;
	/*display:inline;*/
	color:#666666
}

#rightcontentPages3 {
	background: url(../../images/ladder.jpg);
	float: left; /*rtl*/
	width: 25%;
	height: 280px;
	background-position: left top; /*rtl*/
	background-repeat:no-repeat;
	margin: 10px 0 10px 0;
	text-align:left;
	/*display:inline;*/
	color:#666666
}

#rightcontentPages4 {
	background: url(../../images/lighthouse.jpg);
	float: left; /*rtl*/
	width: 25%;
	height: 280px;
	background-position: left top; /*rtl*/
	background-repeat:no-repeat;
	margin: 10px 0 10px 0;
	text-align:left;
	/*display:inline;*/
	color:#666666
}

#rightcontentPages5 {
	background: url(../../images/ants.jpg);
	float: right;
	width: 25%;
	height: 280px;
	background-position: right top;
	background-repeat:no-repeat;
	margin: 10px 0 10px 0;
	text-align:left;
	/*display:inline;*/
	color:#666666
}

#rightcontentPages6 {
	background: url(../../images/hundred_percent.gif);
	float: left; /*rtl*/
	width: 25%;
	height: 280px;
	background-position: left top; /*rtl*/
	background-repeat:no-repeat;
	margin: 10px 0 10px 0;
	text-align:left;
	/*display:inline;*/
	color:#666666;
	
}

#rightcontentPages7 {
	background: url(../../images/bubbles.jpg);
	float: left; /*rtl*/
	width: 25%;
	height: 280px;
	background-position: left top; /*rtl*/
	background-repeat:no-repeat;
	margin: 10px 0 10px 0;
	text-align:left;
	/*display:inline;*/
	color:#666666
}

#rightcontentPages8 {
	background: url(../../images/pencils.jpg);
	float: left; /*rtl*/
	width: 25%;
	height: 280px;
	background-position: left top; /*rtl*/
	background-repeat:no-repeat;
	margin: 10px 0 10px 0;
	text-align:left;
	/*display:inline;*/
	color:#666666
}

.sectionTitle {
	overflow: hidden;
	visibility: visible;
	text-align:left;
	padding-top: 10px;
	padding-right: 0;
	padding-bottom: 10px;
	padding-left: 0px;
}

.sectionContent{
	text-align:left;
	color: #666666;
	font-size: 1em
}

.show {
     position:static;
     /*display: table;*/
}

.steps {
	font-size: 1em;
	color: #330066;
	/*font-weight:bold*/
}

#topofPage {
	display: block;
}

.trigger{
	cursor:pointer;
	border: none;
	
}
		
.trigger:hover{
	cursor:pointer;
	border: none
}	

#workExamplesTxt {
	float: left;
	width: 33%;
	margin-bottom: 0px;
	text-align: center;
	display: inline
}

#boxWrapper1 #leftcontentPages li {
	list-style-type: none;
}

#modalContainer {
	background-color:transparent;
	position:absolute;
	width:100%;
	height:100%;
	top:0px;
	left:0px;
	z-index:10000;
	background-image:url(../tp.png);
	}

#alertBox {
	position:relative;
	width:500px;
	min-height:100px;
	margin-top:50px;
	background-color:transparent;
	background-image:url(../../images/alertbox/bottom.gif);
	background-repeat:no-repeat;
	background-position:left bottom;
}

#modalContainer > #alertBox {
	position: fixed
}

#alertBox h4 {
	margin: 0px;
	font: bold 0.9em;
	background-color:transparent;
	color:#000000;
	padding:5px 0 5px 25px;
	background-image: url(../../images/alertbox/top.gif);
	background-position: left top;
	background-repeat: no-repeat;
}

#alertBox p {
	color: #666666;
	height: auto;
	padding:5px;
	margin:0px;
	background-color: #FFFFFF;
	padding:20px 25px 40px 25px;
	width: 450px;
; font-size: 0.9em; background-image: url(../../images/alertbox/side.gif); background-repeat: repeat-y; background-position: left top
}

#alertBox #closeBtn {
	display:block;
	position:relative;
	margin:5px auto;
	padding:3px;
	border:2px #000 none;
	width:70px;
	font:1em verdana, arial;
	text-transform:uppercase;
	text-align:center;
	color:#000000;
	text-decoration:none;
}

#pagecontent {
	list-style: none;
	margin-left: 0;
	padding-left: 1em;
	text-indent: -0.7em;
	line-height: 1.7em
}

#pageLinks a {
	font-weight:bold;
	text-decoration:underline;
	font-size: 1em;
	color: #330066
}

.ir-img-border {
	background-color: #FFFFFF;
	border: 1px solid #5A63AD;
	padding: 4px;
	display: block;
	/*margin: -5px -5px -5px -5px;*/
	position: relative;
}