﻿/*

Main colors

blue:   #1FA3C9
green: 	#6ECD00
grey:	#444444

blue-logo: #00B7E3;
*/

.profile_chart_2_title{color:#1FA3C9; padding:0 60px 10px 60px;font-weight:bold}
.profile_chart_1_title{color:#6ECD00; padding:0 60px 10px 60px;font-weight:bold}
.jsvalidation {color:Red}

body
{
	
	margin:0;
	color:#444444;
	padding-top: 0px;
	padding-right: 0;
	padding-bottom: 0;
	padding-left: 0;
	background-attachment: scroll;
	background-image: url(../images/base/gradient.gif);
	background-repeat: repeat-x;
	background-position: top;
	background-color:#F3F4F4 ;
}

a				{color:#1FA3C9;text-decoration:none;}
a:link			{color:#1FA3C9;text-decoration:none;}
a:hover			{color:#000;text-decoration:none;}
a:active		{color:#000;text-decoration:none;}

h1				{font-size:14px;color:#1FA3C9;font-weight:bold;}
h2				{font-size:14px;color:#444444;padding:0;margin:0}
h3				{font-size:14px;color:#1FA3C9;font-weight:bold;padding:0;margin:0}
h4				{font-size:14px;color:#5DC23F;font-weight:bold;padding:0;margin:0}
h5				{font-size:18px;color:#444;font-weight:bold;padding:0 0 0 10px;margin:0;font-family:Calibri}
h6				{font-size:14px;color:#444444;padding:0;margin:0;font-weight:bold;}

ol{padding:5px;}
#SPAN_USERNAME
{
	margin-top:-7px;
	background:transparent url(../images/headers/bg_login.gif) no-repeat;
	height:25px;
	text-align:center;
	padding:5px;
	color:#fff;
	width:260px;
}
#container-top
{
	margin-top:7px;
	height:80px;
}

#top .logo
{
	width:200px;
}
.top-menu {
	margin: 0px;
	text-align:right;
}
.top-menu .first {
	text-decoration: none;
	padding-right:10px;
	padding-top: 5px;
	text-align:center;
	border-left:none;

}

.top-menu .item {
	padding-left:10px;
	padding-right:10px;
	padding-top: 5px;
	border-left:1px #444 dotted;
	text-align:center;

}
.top-menu .item:hover {
	color: #000;
}
.top-menu .last {

	text-decoration: none;
	padding-left:10px;
	padding-top: 5px;
	border-left:1px #444 dotted;
	text-align:center;
}

 
     .top-menu2
     {
        width:950px;
        height:40px;
		background:#000 url(/images/menu/menu.png) top left no-repeat;
     }
        .top-menu2 ul
        {
            list-style:none;
            padding:0;
            margin:0;
        }
         .top-menu2 li
         {
           padding:0 18px 0 19px;
            text-align:center;
            float:left;
            line-height:40px;
            color:#fff;
            border-right:1px #444 solid;
            font-weight:bold;
            cursor:pointer;
         }
         
         .top-menu2 li:hover
         {
              color:#1FA3C9;
         }
         
         .top-menu2 li a
         {
            color:#fff;
         }
          .top-menu2 li a:hover
         {
            color:#1FA3C9;
            
         }
         
         .top-menu2 li.selected a
         {
            color:#1FA3C9;
         }
          .top-menu2 li.selected a:hover
         {
            color:#1FA3C9;
            
         }
         .top-menu2 li.noline
         {
         border-right:none;
         }
        
        #LINK ul
        {
            list-style:none;
            padding:0;
            margin:0;
            position:absolute;
        }
        #LINK li
        {
            position:absolute;
            width:150px;
            text-align:center;
            clear:both;
        }
        #LINK li.l0
        {
            left:0px;
            text-align:left;
        }
        #LINK li.l1
        {
            left:110px;
        }
         #LINK li.l2
        {
            left:290px;
        }
        #LINK li.l3
        {
            left:490px;
        }
        #LINK li.l4
        {
            left:680px;
        }
        
         #LINK li.l6
        {
            left:800px;
            text-align:right;
        }
       .player_buttons
       {
		float:left;
       }
       .player_buttons img
       {
        cursor:pointer;
       }
      .rating_buttons
      {
		float:left;
		position:relative;
		top:-250px;
		left:720px;
      }

       

        .s1
        {
               height:280px;
        width:950px;
         background:transparent url(/images/headers/timeline_header_s1.gif) center left no-repeat;
        }
         .s2
        {
               height:280px;
        width:950px;
         background:transparent url(/images/headers/timeline_header_s2.gif) center left no-repeat;
        }
        .s3
        {
               height:280px;
        width:950px;
         background:transparent url(/images/headers/timeline_header_s3.gif) center left no-repeat;
        }
        .s4
        {
               height:280px;
        width:950px;
         background:transparent url(/images/headers/timeline_header_s4.gif) center left no-repeat;
        }
        .s5
        {
               height:280px;
        width:950px;
         background:transparent url(/images/headers/timeline_header_s5.gif) center left no-repeat;
        }
        .s6
        {
               height:280px;
        width:950px;
         background:transparent url(/images/headers/timeline_header_s6.gif) center left no-repeat;
        }
  
       
       .header_timeline .leftbox
       {
        margin-top:40px;
        float:left;
        width:650px;
       }
       .header_timeline .rightbox
       {
        float:left;
        margin-left:10px;
        width:290px;
        height:211px;
        
       }
       
       .header_timeline .textholder
       {
            color:#fff;
            font-size:14px;
            float:left;
            margin-top:65px;
            margin-left:240px;
       }
       
     
       
        .button_holder
       {
        position:relative;
        top:200px;
        right:238px;
       }
        
        #TEST_FEATURES ul
{
list-style:none;
margin:0;
padding:0;
}

#TEST_FEATURES li
{
    line-height:14px;
    padding-left:25px;
    margin-bottom:7px;
    background:transparent url(/images/buttons/tick.png) top left no-repeat;
}


.header-1{
	margin-top:10px;
	height:300px;
	padding:0;
}



.header-2{
	margin-top:10px;
	height:180px;
	font-size:14px;
}

.content-header
{
	margin-top:10px;
	border-bottom:5px #efefef solid;
}

#content
{
	margin-top:10px;
}


#content .inner-content
{
	background:#fff;

}





#PackageList ul
{
	margin:0;
	padding:0;
	list-style:none;
}

#PackageList ul li
{
	padding: 0 0 0 20px;
	background:transparent url(../images/icons/tick.png) no-repeat top left;

}

.bx_one_column
{
	padding: 10px;
	background:#fff;
	border:1px #efefef solid;
}


.bx_left
{
	width:618px;
	float:left;
	background:#fff;
	margin-right:10px;
	padding:10px;
	border:1px #efefef solid;
}



.bx_right
{
	width:300px;
	float:left;
}
.bx_right .shade
{
	background :#fff;
	padding:10px;
	margin-bottom:10px;
	border:1px #efefef solid;
	
}

.bx_right .panel{

	background :#fff;
	padding:10px;
	margin-bottom:10px;
	border:1px #efefef solid;
}





.formControls .spacer
{
	clear:both;
	height:10px;
}


.formControls label{
	display:block;
	text-align:left;
	width:80px;
	float:left;
	color:#444;
	text-align:left;
	padding-left:10px;
	font-weight:normal;
}

.formControls .register label
{
	width:200px;
	text-align:right;
	margin-right:5px;
	font-weight:normal;
}

.formControls input{
	padding:1px;
	border:1px #ccc solid;
	width:193px;
	height:18px;
	margin-bottom:5px;
}

.formControls .register input
{
	width:200px;
}

.formControls p
{
	float:left;
	margin-left:215px;
	margin-right:20px;
}
.formControls .check{
	float:left;
	border:1px #ccc solid;
	width:20px;
	margin:2px 0 10px 0px;
	background:#efefef;
}


.formControls .inputReadOnly{
	float:left;
	padding:1px;
	border:none;
	width:206px;
	color:#000;
	background:#efefef;
	margin:2px 0 5px 0px;
}

.formControls .inputWidthButton{
	float:left;
	padding:1px;
	border:1px #ccc solid;
	width:185px;
	margin:2px 0 10px 0px;
	background:#efefef;
}

.formControls .textareaSideBar{

	border:1px #ccc solid;
	background:#efefef;
	width:285px;
}

.formControls textarea{

	border:1px #ccc solid;
	background:#efefef;
	width:308px;
	margin:2px 0 10px 0px;
}

.formControls .textareaLarge{

	border:1px #ccc solid;
	background:#efefef;
	width:510px;
	height:100px;
	margin:2px 0 10px 0px;
}


.formControls .textareaReadOnly{

	border:none;
	background:#fff;
	width:300px;
	margin:2px 0 5px 0px;
}

.formControls select{
	float:left;
	padding:1px;
	border:1px #ccc solid;
	width:210px;
	margin:2px 0 10px 0px;
	background:#efefef;
}

.formControls .icon
{
	margin-left:5px;
	margin-top:3px;
}

.formControls .butonContainer
{
	cursor:pointer;
}

.formControls .butonContainer .register
{
	background:#fff;
	background-image: url('../images/buttons/register.gif');
	background-repeat: no-repeat;
	border:none;
	width:113px;
	height:43px;
	cursor:pointer;
	
}

.formControls .button {
	color: #fff;
	background-image: url(../images/m2.jpg);
	height: 22px;
	width: 80px;
	background-repeat: no-repeat;
	background-position: center center;
	border: none;
	cursor:pointer;
	padding-bottom:5px;
	font-size:11px;
}

.formControls .register .butonContainer
{
	text-align:left;
	margin-left:213px;
}

.formControls .register .button
{
	width: 100px;
}

.formControls .strength_meter_container {
	height:15px;
	width:100px;
	border:1px solid #ccc;
	float:left;	
	background-color:#efefef;
	margin-top:4px;
}

.formControls .strength_meter {
	background-image:url('../images/strength.jpg');
	height:15px;
	width:0px;
}

.formControls .jsvalidation
{
	float:left;
	margin-left:213px;
	margin-right:20px;
	padding:2px;
	margin-bottom:5px;
	width:300px;
}


.paging
{
	margin-bottom:5px;
}


.report_data h1
{
	font-size:14px;
	font-weight:bold;
}

.report_data .img_chart{
	text-align:center;
	margin-top:-20px;
}




.formControlsView fieldset
{
	padding:0;
	margin:0;
	border:none;
	margin-bottom:20px;
}
.formControlsView legend
{
	margin-bottom:5px;
}
.formControlsView div
{
	width:500px;
}
.formControlsView label
{
	
	margin-left:20px;
	width:100px;
	float:left;
}

.formControls .register .check
{
	
	width:20px;
}

.formControlsView span
{

}

#footer
{
	margin-top:40px;
	background:#F7F7F7;
	border-top:4px #CCCCCC solid;
	height:50px;
}

.footer_content
{
	padding: 5px 5px 5px 5px;
	font-size:10px;
	color:#444;
	text-align:center;
}




.table_1		{}
.table_1 thead th	{background:#1FA3C9;color:#fff;padding:2px}
.table_1 tbody td	{border-bottom:1px #ccc dashed;padding:5px}

#example
{
	background:#efefef;
	padding:10px 10px 5px 10px;
	margin-bottom:15px;
}

#example_2
{
	background:#efefef;
	padding:5px;
	margin-bottom:15px;
	width:320px;
	text-align:left;
}

#example_3
{
	background:#efefef;
	padding:5px;
	margin-bottom:15px;
	width:420px;
	text-align:left;
}

#example h6
{
	font-size:12px;
	margin-bottom:5px;
}
em
{
	color:#444;
}


.percentile_graph
{
	margin-left:20px;
	width:500px;
	height:180px;
	padding:10px 20px 10px 5px;
	background-image: url('/xmlweb/reporttext/engb/images/percentile_graph.gif');
	background-repeat: no-repeat;
	background-position:top left;
}

.percentile_graph .arrow
{
	width:16px;
	height:10px;
	padding-top:140px;
	background-color:Transparent;
	background-image: url('/xmlweb/reporttext/engb/images/arrow.png');
	background-repeat: no-repeat;
	background-position:top center;
	line-height:15px;
}




#prices a img {border:0;vertical-align:text-bottom;}
#prices table {border-collapse:collapse;}
#prices th.side {
	background: transparent url(/images/package/bg_th_side.gif) no-repeat bottom left;
}
#prices td.side {
	text-align:right;
	background: transparent url(/images/package/bg_td_side.gif) no-repeat bottom left;
	width:180px;
	font:bold 12px/15px verdana;
	color:#478103;
	padding-right:8px;
}

#prices th {
	height:64px;
	border-right:1px solid #fff;
	vertical-align:bottom;
	color:#478103;
	font:bold 20px Calibri;
	letter-spacing:2px;
	background:transparent url(/images/package/bg_th.gif) no-repeat bottom left;
	}

	
#prices td {
	text-align:center;
	background:transparent url(/images/package/bg_td.gif) no-repeat bottom left;
	border-right:1px solid #fff;
	color:#fff;
	width:140px;
	height:35px;
	font:bold 12px/18px verdana;
}
#prices td.on {background:transparent url(/images/package/bg_td_on.gif) no-repeat bottom left;}
#prices th.on {
	background:transparent url(/images/package/bg_th_on.gif) no-repeat bottom left;
	padding-bottom:9px;
	width:148px;
	color:#fff;
}

#prices tfoot td {
	background:transparent url(/images/package/bg_foot_td.gif) no-repeat top left;
	height:64px;
	vertical-align:top;
	padding-top:8px;
}
#prices tfoot td.on {
	background:transparent url(/images/package/bg_foot_td_on.gif) no-repeat top left;
	padding-top:16px;
	
}
#prices tfoot td.side {background: transparent url(/images/package/bg_foot_td_side.gif) no-repeat top left;}

#prices #formcontainer {
	width:443px;
	height:239px;
	background:transparent url(/images/package/bg_form.gif) no-repeat top left;
	float:right;
	margin-right:10px;
	margin-top:50px;
	padding:10px;
}
#prices #formcontainer form {
	padding:8px 10px;
	margin:0;
}
#prices #formcontainer h2 {
	margin:0;
	padding:0 0 14px 0;
	font:bold 21px/27px arial;
	color:#fff;
}
#prices #formcontainer fieldset {
	border:none;
	padding:0;
}
#prices #formcontainer label {
	display:block;
	float:left;
	font:bold 12px/18px verdana;
	color:#000;
	padding-bottom:12px;
}
#prices #formcontainer label.select_test {
	width:350px;
}
#prices #formcontainer label.email input {
	width:340px;
}
#prices #formcontainer label.password {
	clear:left;
	padding-right:40px;
}
#prices #formcontainer label.password input,
#prices #formcontainer label.retype input {
	width:150px;
}
#prices #formcontainer fieldset.buttons {
	padding-top:10px;
	clear:left;
}
#prices #prices {
	position:relative;
}

.testslist
{
	float:left;
	margin-bottom:10px;
	width:420px;
	
}
.testslist ul
{
	list-style :none;
	padding:0;
	margin:0;
}
.testslist ul li
{
	float:left;
	width:50px;
	height:50px;
	margin-right:10px;
	cursor:pointer;
}


.header_1
{
	background-color:#CC0000;
	color:#fff;
	font-weight:bold;
	font-size:18px;
	text-align:center;
	padding:5px;
	border-right:10px #fff solid;
	
}

.header_2
{
	background-color:#6ECD00;
	color:#fff;
	font-size:18px;
	font-weight:bold;
	text-align:center;
	padding:5px;
	
}

.header_3
{
	background-color:#1FA3C9;
	color:#fff;
	font-weight:bold;
	font-size:18px;
	text-align:center;
	padding:5px;
	margin-bottom:20px;
	
}





#CHART_1_DIV{background:transparent url('/images/chart_bg.png') no-repeat top left;width:600px;height:350px;}
#CHART_2_DIV{background:transparent url('/images/chart_bg.png') no-repeat top left;width:600px;height:350px;}
#CHART_3_DIV{background:transparent url('/images/chart_bg.png') no-repeat top left;width:600px;height:350px;}
#ERROR_PANEL{text-align:center;color:red}

/* star rating code - use lists because its more semantic */
/* No javascript required */
/* all the stars are contained in one matrix to solve rollover problems with delay */
/* the background position is just shifted to reveal the correct image. */
/* the images are 16px by 16px and the background position will be shifted in negative 16px increments */
/*  key:  B=Blank : O=Orange : G = Green * /
/*..... The Matrix ....... */
/* colours ....Background position */
/* B B B B B - (0 0)*/
/* G B B B B - (0 -16px)*/
/* G G B B B - (0 -32px)*/
/* G G G B B - (0 -48px)*/
/* G G G G B - (0 -64px)*/
/* G G G G G - (0 -80px)*/
/* O B B B B - (0 -96px)*/
/* O O B B B - (0 -112px)*/
/* O O O B B - (0 -128px)*/
/* O O O O B - (0 -144px)*/
/* O O O O O - (0 -160px)*/


/* the default rating is placed as a background image in the ul */
/* use the background position according to the table above to display the required images*/


.rating_container td
{
	padding:0;
}
.rating{
	width:80px;
	height:16px;
	margin:5px 0 0px 0;
	padding:0;
	list-style:none;
	position:relative;
	background: url(/images/stars/star-matrix.gif) no-repeat 0 0;
}
/* add these classes to the ul to effect the change to the correct number of stars */
.nostar {background-position:0 0}
.onestar {background-position:0 -16px}
.twostar {background-position:0 -32px}
.threestar {background-position:0 -48px}
.fourstar {background-position:0 -64px}
.fivestar {background-position:0 -80px}
ul.rating li {
	cursor: pointer;
 /*ie5 mac doesn't like it if the list is floated\*/
	float:left;
	/* end hide*/
	
}
ul.rating li a {
	position:absolute;
	left:0;
	top:0;
	width:16px;
	height:16px;
	text-decoration:none;
	z-index: 200;
}
ul.rating li.one a {left:0}
ul.rating li.two a {left:16px;}
ul.rating li.three a {left:32px;}
ul.rating li.four a {left:48px;}
ul.rating li.five a {left:64px;}
ul.rating li a:hover {
	z-index:2;
	width:80px;
	height:16px;
	overflow:hidden;
	left:0;	
	background: url(/images/stars/star-matrix.gif) no-repeat 0 0
}
ul.rating li.one a:hover {background-position:0 -96px;}
ul.rating li.two a:hover {background-position:0 -112px;}
ul.rating li.three a:hover {background-position:0 -128px}
ul.rating li.four a:hover {background-position:0 -144px}
ul.rating li.five a:hover {background-position:0 -160px}

/* end rating code */

.r_h{border-bottom:4px #efefef solid;color:#1FA3C9;margin-bottom:10px;font-weight:bold;font-size:14px;}





 .top-menu3
{

	height:20px;
	margin-bottom:10px;
	width:638px;
}
.top-menu3 ul
{
    list-style:none;
    padding:0;
    margin:0;
}
 .top-menu3 li
 {
	padding:0 10px 0 10px;
    text-align:center;
    float:left;
    line-height:20px;
    color:#ccc;
    border-right:1px #ccc dashed;
    font-weight:bold;
    cursor:pointer;
 }
 
 .top-menu3 li:hover
 {
	color:#1FA3C9;
 }
 
 .top-menu3 li a
 {
	color:#737373;
 }
  .top-menu3 li a:hover
 {
    color:#ccc;
    
 }
 
 .top-menu3 li.selected a
 {
    color:#1FA3C9;
 }
  .top-menu3 li.selected a:hover
 {
    color:#1FA3C9;
    
 }
 .top-menu3 li.noline
 {
	border-right:none;
 }