/* OCBC MSA123 Page Styling
Convertium Pte Ltd. September 16, 2009 */

/* Core Styling - All the styles are for the the generic containers for the whole site
=======================================================================================*/

/** Default page reset **/
body {
	background: #fff;
	margin: 0;
	padding: 0;}

img {
	border: 0;
}

.clear {
	clear: both;
}

.float-left {
float: left;
margin: 15px 15px 15px 0;}

.float-right {
float: right;
margin: 15px 0 15px 15px;}

/** This will hold all the layout classes in place **/
#main-container {
margin: 0 auto;
padding: 0;
width: 960px;
}

/** Section holders **/
#redbar {
background: #ed1c24;
clear: both;
height: 8px;
margin: 0;
padding: 0;
width: 960px;}

#header {
clear: both;
margin: 32px 0 0 0;
padding: 0;
width: 960px;
}

.sublink {
clear: both;
margin: 0 31px 20px 31px;
padding: 0;
text-align: right;
width: 898px;
}

#navigation-container {
background: url(../images/navi_bg.jpg) repeat-x top left;
clear: both;
margin: 0;
padding: 0;
height: 43px;
width: 960px;
}

/** This will be the container for the index page **/
#body-container1 {
background: #fff url(../images/index_content_bg.jpg) repeat-x top left;
clear: both;
margin: 0;
padding: 0;
width: 960px;
}

/** This will be the container for al the inside pages **/
#body-container2 {
clear: both;
background: #00adef;
margin: 0;
padding: 0;
width: 960px;
}

#bottom_image {
background: url(../images/image_bottom.jpg) no-repeat top left;
clear: both;
height: 146px;
margin: 0;
padding: 0;
width: 960px;
}

#bottom_image_winners {
background: url(../images/image_bottom_winners.jpg) no-repeat top left;
clear: both;
height: 146px;
margin: 0;
padding: 0;
width: 960px;
*margin-top:0px;
_margin-top:-3px;
}

#footer {
clear: both;
margin: 15px 0 0 0;
padding: 0;
width: 960px;
}

/* Content Holders - all the divs that will  hold the contents in their place
=======================================================================================*/

#navi-holder {
clear: both;
margin: 0 auto 0 auto;
padding: 0;
/*width: 856px;*/
width: 923px;
}

#logo1 {
display: inline;
float: left;
margin: 0 0 0 31px;
padding: 0;
text-align: left;
width: 300px;
}

#logo2 {
display: inline;
float: right;
margin: 0 31px 0 0;
padding: 0;
text-align: right;
width: 369px;
}

#sub-navi-holder {
background: url(../images/sub_navi_bg.jpg) no-repeat bottom left;
clear: both;
height: 28px;
margin: 10px 31px 0 31px;
padding: 0;
width: 898px;
}

#sub-navi-holder2 {
background: url(../images/sub_navi_bg.jpg) no-repeat bottom left;
clear: both;
height: 28px;
margin: 10px 31px 10px 25px;
padding: 0;
width: 898px;
}


/*** To be used on the main page only ***/
#content-holder1 {
background: url(../images/temp/main_page.jpg) no-repeat top left;
clear: both;
height: 511px;
margin: 12px 0 0 0;
padding: 0;
width: 960px;
}

/*** To be used on all inside pages ***/
#content-holder2 {
clear: both;
margin: 12px 31px 0 31px;
padding: 0;
width: 898px;
}

#content-holder3 {
clear: both;
margin: 12px 31px 0 31px;
padding: 0;
text-align: center;
width: 898px;
}

/** Holder for the 3 column left section **/
#content-holder4 {
clear: both;
margin: 0 0 10px 0;
padding: 0;
width: 194px;}

/** Holder for the 3 column right section **/
#content-holder5 {
clear: both;
margin: 0 0 10px 0;
padding: 0;
width: 193px;}

/** Holder for left section Contest **/
#content-holder6 {
clear: both;
margin: 0 0 10px 0;
padding: 0;
width: 100%;}

#content-holder7 {
clear: both;
margin: 0 0 10px 0;
padding: 0;
width: 487px;}

#content-holder8 {
clear: both;
margin: 0;
padding: 0;
width: 100%;}

#footer-holder {
clear: both;
margin: 0 31px 10px 31px;
padding: 0;
text-align: center;
width: 898px;
}

/* Column Layouts - this will be the containers for the inaside pages
=======================================================================================*/

/** 2 Column Layout **/

.col1-left {
display: inline;
float: left;
margin: 0;
padding: 0;
width: 294px;
overflow: hidden;}

.col1-right {
display: inline;
float: left;
margin: 0 0 0 24px;
padding: 0;
width: 580px;
overflow: hidden;}
	#dream-planner{width: 380px;}
/** 3 Column Layout **/
.col2-left {
display: inline;
float: left;
margin: 0;
padding: 0;
width: 218px;}

.col2-mid {
display: inline;
float: left;
margin: 0 0 0 20px;
padding: 0;
width: 423px;}

.col2-right {
display: inline;
float: left;
margin: 0 0 0 20px;
padding: 0;
width: 217px;}

* html .col2-right {
overflow: hidden;
}

/** variable width 2 column - for use in promo, signup and contest pages **/
.varcol1-left {
display: inline;
float: left;
margin: 0;
padding: 0;
width: 387px;}

* html .varcol1-left {
width: 375px;
overflow: hidden;
}

.varcol1-right {
display: inline;
float: left;
margin: 0 0 0 20px;
padding: 0;
width: 491px;}

.varcol2-left {
display: inline;
float: left;
margin: 0;
padding: 0;
width: 400px;
overflow: hidden;
}

.varcol2-right {
display: inline;
float: left;
margin: 0 0 0 20px;
padding: 0;
width: 458px;}

.winnercol2-left {
float: left;
margin: 0;
padding: 0;
width: 310px;
min-height:716px;
_height:730px;
background:url(../images/temp/winners-bottom.jpg) no-repeat bottom;
}

.winnercol2-left-love {
float: left;
margin: 0;
padding: 0;
width: 310px;
min-height:716px;
_height:730px;
background:url(../images/temp/love-winners-bottom.jpg) no-repeat bottom;
}

.winnercol2-left-travel {
float: left;
margin: 0;
padding: 0;
width: 310px;
min-height:716px;
_height:730px;
background:url(../images/temp/travel-winners-bottom.jpg) no-repeat bottom;
}

.winnercol2-left-home {
float: left;
margin: 0;
padding: 0;
width: 310px;
min-height:716px;
_height:730px;
background:url(../images/temp/home-winners-bottom.jpg) no-repeat bottom;
}

.winnercol2-right {
display: inline;
float: left;
margin: 0;
padding: 0;
*padding-bottom:10px;
width: 630px;}

/* Content Layout Styling
=======================================================================================*/
/** Sub Naigation Holders **/
.sub-navi-container1 {
clear: both;
margin: 0 0 0 180px;
padding: 0;
width: 450px;
}

.sub-navi-container2 {
clear: both;
margin: 0 0 0 0px;
padding: 0;
width: 800px;
}

.sub-navi-container3 {
	clear: both;
	margin: 0 0 0 590px;
	padding: 0;
/*	width: 210px;*/
}

.sub-navi-container4 { /*3 button navi*/
	clear: both;
	margin: 0 0 0 336px;
	padding: 0;
/*	width: 210px;*/
}

/** Inside Pages **/
.col1-contentholder {
clear: both;
margin: 0 0 15px 0;
padding: 0;
width: 294px;
}

.col1-contentholder-right {
clear: both;
margin: 0 0 15px 0;
padding: 0;
vertical-align: top;
width: 584px;
}

.col2-contentholder-left {
clear: both;
margin: 0 0 15px 0;
padding: 0;
width: 218px;}

.col2-contentholder-right {
clear: both;
margin: 0 0 15px 0;
padding: 0;
width: 217px;}

/** Article Holders **/
.article-holder {
clear: both;
margin: 0 0 15px 0;
padding: 0;
width: 423px;}

.article-holder-main {
clear: both;
margin: 0 0 15px 0;
padding: 0;
text-align: justify;
width: 423px;}

.article-collaterals {
clear: both;
margin: 10px 0 0 0;
padding: 0;
width: 423px;}

/* Collapsible Content Styling
=======================================================================================*/
.trigger-holder{
clear: both;
display: block;
margin: 0 0 10px 0;
padding: 0;
width: 584px;}

.collapsible-holder {
clear: both;
margin: 0 0 10px 0;
padding: 0;
width: 584px;}

.collapsible-seperator {
background:url(../images/seperator.jpg) no-repeat top left;
clear: both;
height: 11px;
margin: 0;
padding: 0;
width: 584px;
}

/* Navigation Styling
=======================================================================================*/

#seperators {
background: url(../images/navi_seperator.jpg) no-repeat top left;
display: inline;
float: left;
height: 43px;
margin: 0;
padding: 0;
width: 37px;
}

#home a {
background: url(../images/navi01_off.jpg) top left no-repeat;
display: block;
float: left;
height: 43px;
margin: 0;
padding: 0;
width: 111px;}

#home a:hover {background: url(../images/navi01_on.jpg) top left no-repeat;}

#home-active {
background: url(../images/navi01_on.jpg) top left no-repeat;
display: block;
float: left;
height: 43px;
margin: 0;
padding: 0;
width: 111px;}

#product a {
background: url(../images/navi02_off.jpg) top left no-repeat;
display: block;
float: left;
height: 43px;
margin: 0;
padding: 0;
width: 181px;}

#product a:hover {background: url(../images/navi02_on.jpg) top left no-repeat;}

#product-active {
background: url(../images/navi02_on.jpg) top left no-repeat;
display: block;
float: left;
height: 43px;
margin: 0;
padding: 0;
width: 181px;}

#exclusive a {
background: url(../images/navi03_off.jpg) top left no-repeat;
display: block;
float: left;
height: 43px;
margin: 0;
padding: 0;
width: 180px;}

#exclusive a:hover{background: url(../images/navi03_on.jpg) top left no-repeat;}

#exclusive-active {
background: url(../images/navi03_on.jpg) top left no-repeat;
display: block;
float: left;
height: 43px;
margin: 0;
padding: 0;
width: 180px;}

#contest a{
background: url(../images/navi04a_off.jpg) top left no-repeat;
display: block;
float: left;
height: 43px;
margin: 0;
padding: 0;
width: 176px;
/*width: 109px;*/}

/*
#contest a:hover {background: url(../images/navi04_on.jpg) top left no-repeat;}

#contest-active{
background: url(../images/navi04_on.jpg) top left no-repeat;
display: block;
float: left;
height: 43px;
margin: 0;
padding: 0;
width: 109px;}
*/

#contest a:hover {background: url(../images/navi04a_on.jpg) top left no-repeat;}

#contest-active{
background: url(../images/navi04a_on.jpg) top left no-repeat;
display: block;
float: left;
height: 43px;
margin: 0;
padding: 0;
width: 176px;}

#contactus a {
background: url(../images/navi05_off.jpg) top left no-repeat;
display: block;
float: left;
height: 43px;
margin: 0;
padding: 0;
width: 127px;}

#contactus a:hover {background: url(../images/navi05_on.jpg) top left no-repeat;}

#contactus-active {
background: url(../images/navi05_on.jpg) top left no-repeat;
display: block;
float: left;
height: 43px;
margin: 0;
padding: 0;
width: 127px;}

/* Curved Boxes
=======================================================================================*/
/** White Curve Box **/

/** Curve box left column **/
.white-curve1-container {
background: #fff;
clear: both;
margin: 0 0 15px 0;
padding: 0;
width: 218px;}

.white-curve1-top {
background: url(../images/curve1_top.jpg) no-repeat top left;
clear: both;
height: 7px;
margin: 0;
padding: 0;
width: 218px;}

.white-curve1-mid {
background: #fff;
clear: both;
margin: 0;
padding: 0 12px 0 12px;
width: 194px;}

.white-curve1-btm {
background: url(../images/curve1_btm.jpg) no-repeat top left;
clear: both;
height: 7px;
margin: 0;
padding: 0;
width: 218px;}

* html .white-curve1-btm {
background-color: #00ADEF;
}

* html .white-curve2-btm {
background-color: #00ADEF;
}

/** Curve box right column **/
.white-curve2-container {
background: #fff;
clear: both;
margin: 0 0 15px 0;
padding: 0;
width: 217px;}

.white-curve2-top {
background: url(../images/curve2_top.jpg) no-repeat top left;
clear: both;
height: 7px;
margin: 0;
padding: 0;
width: 217px;}

.white-curve2-mid {
background: #fff;
clear: both;
margin: 0;
padding: 0 12px 0 12px;
width: 193px;}

.white-curve2-btm {
background: url(../images/curve2_btm.jpg) no-repeat top left;
clear: both;
height: 7px;
margin: 0;
padding: 0;
width: 217px;}

/** Curve for the promo page **/
.white-curve3-container{
background: #fff;
clear: both;
margin: 0;
padding: 0;
width: 491px;}

.white-curve3-top {
background: url(../images/curve3_top.jpg) no-repeat top left;
clear: both;
height: 7px;
margin: 0;
padding: 0;
width: 491px;}

.white-curve3-mid {
background: #fff;
clear: both;
margin: 0;
padding: 0 12px 0 12px;
width: 467px;}

.white-curve3-btm {
background: url(../images/curve3_btm.jpg) no-repeat top left;
clear: both;
height: 7px;
margin: 0;
padding: 0;
width: 491px;}

/** Curve for contest page **/
.white-curve4-container {
background: #fff;
clear: both;
margin: 0;
padding: 0;
width:294px;}

.white-curve4-top {
background: url(../images/curve4_top.jpg) no-repeat top left;
clear: both;
height: 7px;
margin: 0;
padding: 0;
width: 294px;}

.white-curve4-mid {
clear: both;
margin: 0;
padding: 0 12px 0 12px;
width: 270px;}

.white-curve4-btm {
background: url(../images/curve4_btm.jpg) no-repeat top left;
clear: both;
height: 7px;
margin: 0;
padding: 0;
width: 294px;}

.white-curve5-container {
clear: both;
margin: 0;
padding: 0;
width: 606px;}

.white-curve5-top {
background: url(../images/curve5-top.jpg) no-repeat top left;
clear: both;
height: 7px;
margin: 0;
padding: 0;
width: 606px;}

.white-curve5-mid {
background: url(../images/curve5-mid.jpg) repeat-y top left;
clear: both;
margin: 0;
padding: 10px;
width: 586px;}

.white-curve5-btm {
background: url(../images/curve5-btm.jpg) no-repeat top left;
clear: both;
height: 7px;
margin: 0;
padding: 0;
width: 606px;}

/** Other boxes **/
.other-curve6-container {
clear: both;
margin: 0;
padding: 0;
width: 584px;}

.other-curve6-top {
background: url(../images/curve6-top.jpg) no-repeat top left;
clear: both;
height: 7px;
margin: 0;
padding: 0;
width: 584px;}

.other-curve6-mid {
background: #1ca4d8;
clear: both;
margin: 0;
padding: 10px;
width: 564px;}

.other-curve6-btm {
background: url(../images/curve6-btm.jpg) no-repeat top left;
clear: both;
height: 7px;
margin: 0;
padding: 0;
width: 584px;}

/*.form-labels {
display: inline;
float: left;
margin: 0 15px 0 0;
padding: 0;}*/

.form-label {
float: left;
width: 120px;
}

.form-div{
float: left;
margin: 0;
padding: 0;
width: 340px;
text-align: right;
padding-bottom: 8px;
}

/* Show only to IE6 */
* html .form-div {
padding-bottom: 0px;
}

/* Table
=======================================================================================*/
.border1 {
border-right: solid 1px #ccc;
border-bottom: solid 1px #ccc;}

.border2 {
border-right: solid 1px #ccc;}

.border3 {
border-bottom: solid 1px #ccc;}

/* Other Collaterals
======================================================================================================================= */
/** Collaterals **/
.collateral-holder-right {
display: inline;
float: right;
margin: 0 0 0 10px;
padding: 0;
text-align: right;
}

.collateral-holder-left {
display: inline;
float: left;
margin: 0 10px 0 0;
padding: 0;
text-align: left;
}

/* Temporary Main Page
======================================================================================================================= */
#temp-main {
display: inline;
float: left;
margin: 0 0 0 31px;
padding: 0;
width: 287px;}

#temp-filler {
clear: both;
height: 200px;
margin: 0 0 20px 0;
padding: 0;
width: 287px;}

#temp-container {
clear: both;
margin: 0 0 15px 0;
padding: 0;
width: 287px;}

#temp-main-right {
display: inline;
float: left;
margin: 0;
padding: 0;
width: 612px;}

#temp-right-filler {
clear: both;
height: 50px;
margin: 0;
padding: 0;
width: 612px;}

#temp-right-container {
clear: both;
margin: 0;
padding: 0;
text-align: right;
width: 612px;}

/** Fine Print Div **/
#fineprint-left {
display: inline;
float: left;
margin: 0;
padding: 0;
width: 4px}

#fineprint-right {
clear: right;
display: inline;
float: left;
margin: 0 0 0 5px;
padding: 0;
width: 575px;}

/* Contest Winners
======================================================================================================================= */
#topwinner-box{
background:url(../images/temp/top_winner_bg.jpg) no-repeat top left;
width:580px;
height:73px;
padding: 75px 25px 20px 25px;
margin-bottom:20px;
line-height:15px;
font-weight:normal;
*margin-bottom:15px;
_margin-bottom:20px;
}

#topwinner-love-box{
background:transparent;
width:629px;
height:235px;
padding: 0px;
margin-bottom:20px;
line-height:15px;
font-weight:normal;
*margin-bottom:15px;
_margin-bottom:20px;
}

#topwinner-desc{
float:right;
width:460px;
}

#topwinner-love-desc{
float:right;
width:460px;
padding-top:30px;
}

.topwinner-thumbnail-img{
float:left;
margin-right:15px;
}

.consolation-title-img{
float:left;
margin:20px 0 15px 25px;
*margin:15px 0 5px 25px;
_margin: 10px 0 10px 25px;
}

.consolation-box{
clear:both;
background:url(../images/temp/consolation_bullet.gif) no-repeat 0% 50%;
height:20px;
width:550px;
padding-left:20px;
margin:15px 0 15px 45px;
_margin: 13px 0 13px 45px;
}

.consolation-love-box{
clear:both;
height:auto;
width:585px;
padding-left:0px;
margin:15px 0 15px 35px;
_margin: 13px 0 13px 35px;
}

.consolation-love-box span {
	padding-left:100px;
	color:#fff200;
	background:url(../images/temp/consolation_bullet.gif) no-repeat 16% 50%;
	display:block;
	
}

.winners-img{
margin:20px 0 20px 0;
}

/* Contest Styling */
#contest-intro {
border-bottom: 1px solid #59caf5;
border-top: 1px solid #59caf5;
clear: both;
margin: 12px 31px 0 31px;
padding: 5px 0 5px 0;
text-align: center;
width: 898px;
}

#contest-steps-container {
clear: both;
margin: 0 0 10px 5px;
/*width: 580px;*/}

#contest-steps {
display: inline;
float: left;
margin: 0 20px 0 0;
padding: 0;
width: 53px}

.contest-text {
clear: right;
color: #fff;
display: inline;
float: left;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
margin: 0;
padding: 5px 0 0 0;
width: 511px;


}

.theme-container {
/*background: url(../images/theme.png) top left no-repeat;*/
clear: both;
height: 188px;
/*margin: 0 0 10px 0;*/
padding: 0 5px;
width: 521px;}

.theme-left {
	color: #9d0a0e;
	display: inline;
	float: left;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13px;
	margin: 0;
	padding: 0;
	text-align: center;
	width: 175px;}
	
.theme-left p span {
	color:#fff;
}

.theme_img {
	width:148px;
	height:151px;
	padding:10px 0 0 10px;}
	
.theme-right {
	color: #000;
	display: inline;
	float: left;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13px;
	font-weight: normal;
	margin: 0;
	/*padding: 0 0 0 15px;
	width: 379px;*/}
	
.theme-right p{
	color: #000;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: normal;
	margin: 0;
	line-height:14px;
	padding-left:5px;
	padding-bottom:12px;
	}
	
.theme-right p span{
	color: #df191f;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13px;
	margin: 0;}
	
.theme-right a:link { color: #df191f; text-decoration: none; }
.theme-right a:visited { color: #df191f; text-decoration: underline; }
.theme-right a:active { color: #df191f; text-decoration: none; }
.theme-right a:hover { color: #df191f; text-decoration: underline;}

.contest-left-container {
display: inline;
float: left;
margin: 0 0 10px 0;
padding: 0;
/*width: 294px;*/
width: 390px;
overflow: hidden;}

/* Featured Board Framework
----------------------------------------------------------------------------------------*/
/** Content Holder **/
#featured-board {
	clear: both;
	margin: 20px 0 10px 0;
	padding: 0;
	width: 584px;}

#featured-wrapper {
	clear: both;
	margin: 10px 0 0 0;
	padding: 0;
	width: 584px;}

#featured-header {
	clear: both;
	margin: 0 0 13px 0;
	padding: 0;
	width: 584px;}

#featured-main-container {
	clear: both;
	margin: 0;
	padding: 0;
	width: 584px;}

/* Main Content Framework
----------------------------------------------------------------------------------------*/
#featured-arrow-left {
	display: inline;
	float: left;
	margin: 0 10px 0 0;
	padding: 0;
	width: 49px;}

#featured-arrow-right {
	clear: right;
	display: inline;
	float: left;
	margin: 0 0 0 10px;
	padding: 0;
	width: 49px;}

#featured-content-mid {
	display: inline;
	float: left;
	margin: 0;
	padding: 0;
	width: 584px;}

/* Thumbnail Framework
----------------------------------------------------------------------------------------*/
#featured-thumbnail-wrapper {
	display: inline;
	float: left;
	margin: 0 3px 0 3px;
	padding: 0;
	width: 140px;}

#featured-thumbnail-container {
	clear: both;
	margin: 0 0 10px 0;
	padding: 0;
	width: auto;}

#featured-thumbnail-content {
	clear: both;
	margin: 0;
	padding: 0;
	width: auto;}

.featured-date {
	color: #fff;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-weight: normal;
	line-height: 14px;}