/*
 * File: css/main.css
 * Description: css style definitions for main framwork.
 * Writen by: Zhongxing Guo
 * Writen on: 19/07/2012
 * Version: 1.0
*/

@CHARSET 'UTF-8';

* {
	margin:0;
	padding:0;
	font-family:Arial, Helvetica, sans-serif;
	font-size:9pt;
}
img {
	border:none;
}

body {
	background-color:#d7dfe2;
}
#header {
	width:900px;
	position:relative;
	margin:0 auto;
	height:144px;
}
#header #logo {
	position:absolute;
	left:28px;
	top:0px;
	z-index:1;
	width:218px;
	height:142px;
}
#header #header_top {
	position:relative;
	width:100%;
	height:104px;
	background-color:#FFFFFF;
	
}
/* contact */
#header #header_top #contact {
	text-align:right;
	padding-right:20px;
	padding-top:5px;
}
#header #header_top #contact a, #header #header_top #contact a:link, #header #header_top #contact a:visited {
	font-size:14px;
	color:#191919;
	text-decoration:none;
}
#header #header_top #contact a:hover {
	text-decoration:none;
	color:#5a931b;
}
#header #header_top #contact img {
	vertical-align:bottom;
}
#header #header_top #rewards_title {
	position:absolute;
	bottom:0;
	left:230px;
	font-size:18pt;
	color:#53545f;
}

/* menu and indicator */
#header #header_bot {
	position:relative;
	background-color:#416271;
	height:40px;
}
#header ul {
	margin-left:347px;
	list-style:none;
}
#header ul li{
	display:block;
	float:left;
	width:180px;
	padding-top:13px;
}
#header ul li a, #header ul li a:link, #header ul li a:visited {
	color:#FFF;
	text-decoration:none;
	font-size:14px;
}
#link_indicator {
	position:absolute;
	bottom:0;
	height:4px;
	background-color:#FFF;
}

/* contents */
#contents {
	position:relative;
	margin:0 auto;
	width:900px;
	background:#FFF;
	overflow:hidden;
}
#contents #switching_content {
	position:relative;
}
#contents #switching_content .switching_item {
	position:relative;
	top:0;
}
/* intro */
#contents #intro {
	width:100%;
	height:256px;
	background:#7FA9A0;
}
#contents #intro #get_cando_intro {
	position:relative;
	left:73px;
	top:2px;
	width:410px;
}
#contents #intro #get_cando_intro h1 {
	position:absolute;
	left:20px;
	font-size:24px;
	top:10px;
	color:#FFF;
}
#contents #intro #get_cando_intro p {
	color:#FFF;
	padding-top:5px;
}
#contents #intro #get_cando_intro p span{
	font-size:60px;
}
#contents #intro #get_cando_intro #get_it_button {
	position:absolute;
	left:340px;
	top:165px;
	width:80px;
	height:40px;
	cursor:pointer;
}
#contents #intro #card_sample {
	position:absolute;
	top:36px;
	right:32px;
}
/*
 * for rewards slider
 */
/* slide buttons */
.slide_button {
	width:58px;
	height:93px;
	position:relative;
	float:left;
	top:50px;
	background-color:#CCC;
	cursor:pointer;
}
.slide_button:hover {
	background-color:#5ab03f;
}
#btn_prev {
	left:5px;
}
#btn_next {
	right:5px;
}
/* slider */
#slider {
	position:relative;
	width:754px;	
	overflow:hidden;
	margin:0px 15px;
	float:left;
	padding-bottom:22px;
}
#slider #slides {
	width:764px;
	position:relative;
}
#slider #slides div.slide {
	position:relative;
	display:block;
	width:176px;
	height:220px;
	float:left;
	margin:0 5px;
	cursor:pointer;
}
#slider #slides div div.company_logo {
	width:100%;
	text-align:center;
	height:50px;
	
	padding:5px 0 13px 0;
}
#slider #slides div div.rewards_intro {
	border:1px solid #000000;
	background-color:#ebebeb;
	width:90%;
	margin:0 auto;
	height:120px;
}
#slider #slides div div.rewards_intro p {
	font-size:11px;
	line-height:22px;
	color:#191919;
	padding:5px;
}

/* posters */
#rewards_posters {
	position:relative;
	clear:left;
	width:754px;	
	overflow:hidden;
	margin:0 auto;
	padding-bottom:10px;
}
#rewards_posters #posters div.poster {
	position:relative;
	width:700px;
	margin:0px 27px;
	padding:10px 0;
	text-align:center;
	float:left;
	overflow:hidden;
}
#rewards_posters #posters div.poster div.btn_close{
	position:absolute;
	top:0;
	right:0;
	display:block;
	width:29px;
	height:29px;
	z-index:1;
	cursor:pointer;
}

/* for get cando card */
#get_cando_div {
	position:relative;
	width:100%;
}
#get_cando_process_div {
	position:relative;
	width:840px;
	margin:0 auto;
}
#get_cando_process_div div.step {
	width:150px;
	float:left;
	margin:0 3px;
}
#get_cando_process_div div.step div.img {
	padding:10px 0;
	text-align:center;
}
#get_cando_process_div div.step div.desc {
	font-size:9px;
	color:#191919;
	padding:10px 5px;
}
#get_cando_process_div div.or {
	float:left;
	color:#67aa1c;
	font-size:36px;
	padding-top:60px;
}

/* FAQ */
#FAQ div.box h1 {
	font-size:24px;
	text-align:center;
	color:#373737;
}
#FAQ div.faq_box {
	width:565px;
	padding:10px 15px;
	margin:20px auto;
}
#FAQ div.faq_box div.faq_box_content {
	background-color:#ebebeb;
	border:1px solid #cdcdcd;
	padding:15px 10px;
}
#FAQ div.faq_box div.faq_box_content p {
	padding:5px 0;
}
#FAQ div.faq_box div.faq_box_content ol, ul {
	margin-left:20px;
}
#FAQ div.faq_box div.faq_box_content ul {
	margin-left:20px;
	width:95% !important;
}
#FAQ div.faq_box div.faq_box_content ul li{
	float:none;
	display:list-item;
	list-style-position:inside !important;
	list-style-type:disc !important;
	width:95% !important;
	padding:2px !important;
}
/* footer */
#footer {
	position:relative;
	margin:0 auto;
	width:900px;
	background:#FFF;
}
#footer p{
	text-align:center;
	padding:5px 0;
}

/* global settings */
span.capital {
	font-size:24px;
}
.clearfix {
	zoom: 1;
}
.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
.box {
	background-color:#f9f9f9;
	border:1px solid #fdfdfd;
	-webkit-box-shadow:  0px 3px 3px 3px #dddddd;
    box-shadow:  0px 3px 3px 3px #dddddd;
	/* For IE 8 */
	-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=180, Color='#dddddd')";
	/* For IE 5.5 - 7 */
	filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=180, Color='#dddddd');
}
.active_box {
	background-color:#DDD !important;
}
.active_box:after {
	content: url(../images/pointer.png);
	height: 0;
	position: absolute;
	width: 0;
	/*
	border: 10px solid transparent;
	border-top-color: #DDD;
	*/
	top: 219px;
	left: 50%;
	margin-left: -10px;
	
	z-index:3;
}

a, a:link, a:visited, #FAQ ul li a, #FAQ ul li a:link, #FAQ ul li a:visited {
	color:#1869a8;
	text-decoration:none;
}
a:hover, #FAQ ul li a:hover {
	color:#00a4e8;
}