﻿/**
 * Styles for Citibank
 * 
 */


/* TD CONTAINER */
	
	#td_container { width: 805px; }
	#td_container * { margin: 0; padding: 0; line-height: 16px; }
	#td_container img { border: none; }
	#td_container p { margin-bottom: 16px; }
	#td_container p.big { font-size: 14px; line-height: 18px; }



/* GENERAL */
	
	body { background: #fff; font-family: Arial, Verdana, sans-serif; font-size: 11px; color: #666; }
	.hdn { overflow: hidden; text-indent: -1000px; }



/* HEADER */
	
	#header-profile { min-height: 160px; height: auto !important; height: 160px; margin-bottom: 10px; }
	#header-profile p.big { width: 546px; }



/* THE TEST */
	
	#test { margin-bottom: 30px; }
	#test h3 { display: block; height: 38px; width: 805px; }
	
	#test h3 a { display: block; height: 28px; width: 795px; padding: 10px 0 0 10px; color: white; text-decoration: none; background: url(../img/header_bg.jpg) no-repeat top left; outline: none; }
	#test h3 a:hover { background-position: 0 -38px; }
	#test h3 a:active { background-position: 0 -76px; }
	
	#test h3.disabled a { background-position: 0 -114px; }
	#test h3.disabled a:hover { background-position: 0 -152px; }
	#test h3.disabled a:active { background-position: 0 -190px; }
	
	#test ol { width: 801px; margin-left: 1px; border-left: 1px solid #e1e1e1; border-right: 1px solid #e1e1e1; border-bottom: 1px solid #e1e1e1; list-style: none; }
	#test ol li.odd { background-color: #fff; }
	#test ol li.even { background-color: #f4f4f4; }
	
	#test ul { list-style: none; }
	#test ul li { margin-bottom: 10px; }
	
	#test .item { border-bottom: 1px dotted #999; }
	#test .number { width: 30px; height: 30px; float: left; margin: 15px 0 0 10px; background: url(../img/numbers.gif) no-repeat top left; }
	
	#test .question { width: 700px; float: left; margin: 20px 0 0 15px; padding-bottom: 20px; border-bottom: 1px dotted #ccc; }
	#test .question .complexity { float: right; }
	#test .question label .rad, #test .question label .cbx { float: left; margin: 2px 10px 0 0; }
	#test .question label span { width: 670px; float: left; }
	
	#submit { padding: 20px; border: 1px solid white; }
	#submit a#btn_submit { display: block; height: 28px; width: 111px; background: url(../img/btn_submit_en.gif) no-repeat top left; outline: none; float: left; }
	#submit a#btn_submit:hover { background-position: 0 -28px; }
	#submit a#btn_submit:active { background-position: 0 -56px; }
	
	#error { color: red; float: left; margin: 0 0 0 20px !important; line-height: 12px; }
	.error { border: 1px solid red !important; }



/* PROFILE */

	.profileNumber { float: left; width: 248px; height: 165px; background: url(../img/profiles.gif) no-repeat top left; }
	.profileNumber1 { background-position: 0 0; }
	.profileNumber2 { background-position: 0 -169px; }
	.profileNumber3 { background-position: 0 -338px; }
	.profileNumber4 { background-position: 0 -507px; }
	.profileNumber5 { background-position: 0 -676px; }
	.profileNumber6 { background-position: 0 -845px; }
	
	.profileContent { float: left; width: 430px; margin-left: 20px !important; }
	.profileContent h4 { font-size: 16px; color: #211f5f; font-weight: normal; margin-bottom: 10px !important; }
	.profileContent h4 em { font-weight: bold; font-style: normal; }
	
	.profileContent a.arrows { color: #1eabe2; text-decoration: none; font-weight: normal; }



/* FOOTER */
	
	#footer { padding-top: 80px; }



/* OVERLAYER */
	
	#overlayer { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 999; }
	#overlayer_bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #fff; z-index: 1; }
	#overlayer_window { position: absolute; top: 50%; left: 50%; width: 867px; height: 608px; margin: -304px 0 0 -433px; z-index: 3; }
	#overlayer_window_bg { position: absolute; top: 50%; left: 50%; width: 867px; height: 608px; margin: -304px 0 0 -433px; background: url(../img/overlayer_bg.png) no-repeat center center; z-index: 2; }
	#overlayer_close { position: absolute; top: 70px; right: 70px; width: 10px; height: 9px; overflow: hidden; background: url(../img/btn_close.gif) no-repeat top left; cursor: pointer; z-index: 4; }
	#overlayer_close:hover { background-position: 0 -9px; }
	#overlayer_close:active { background-position: 0 -18px; }
	#overlayer_content { position: relative; padding: 80px 0 0 80px; width: 700px; height: 445px; z-index: 3; }
	
	#overlayer a.btn_redo { display: block; height: 28px; width: 130px; background: url(../img/btn_redo_en.gif) no-repeat top left; outline: none; }
	#overlayer a.btn_redo:hover { background-position: 0 -28px; }
	#overlayer a.btn_redo:active { background-position: 0 -56px; }



/* CLEARFIX */
	
	.clearfix:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; }
	.clearfix { display: inline-block; }
	html[xmlns] .clearfix { display: block; }
	* html .clearfix { height: 1%; }


