@charset "UTF-8";
/* CSS Document */

/*
Project: Carlsberg Promo
Project URL: http://carlsbergpromo.sg
Author: Osmosis Interactive
Author URL: http://osmosis.sg/
*/



/* HTML */
* { margin: 0; padding: 0; font-size: 1em; line-height: 16px;}
body { font-family: Arial, Helvetica, sans-serif; font-size: 9pt; color: #464646; background: #FFF;}
html, body { height: 100%;}

a { text-decoration: none; color: #117c36;}

P { margin-bottom: 8px; padding-bottom: 8px;}
	p.nobottom { margin: 0; padding: 0;}
img { border: none;}

.clear { clear: both; float: none;}
.hide { display: none !important;}

.pointer { cursor: pointer;}
.bdrbottom { padding-bottom: 16px; margin-bottom: 16px; border-bottom: 1px dotted #CCC;}
.bdrtop { padding-top: 16px; border-top: 1px dotted #CCC;}

.inputbox { background: #FFF; border: 1px solid #c2c2c2; line-height: 14px; padding: 0 4px;}
.inputbutton { background: #117c36; border: none; color: #FFF; padding: 0 8px; -moz-border-radius: 4px; -webkit-border-radius: 4px; cursor: pointer;}
.textbox { height: 5em; background: #FFF; border: 1px solid #c2c2c2; font-family: Arial, Helvetica, sans-serif; line-height: 16px; padding: 0 4px;}

.note { font-size: 8pt; color: #999;}
	.notestar { color: #999;}



/* Age Checking */
.age { position: absolute; z-index: 999; width: 100%; height: 100%; background-color: #000; opacity: 0.9; filter: alpha(opacity:90);}
.age h2 { font-size: 20pt; line-height: 32px; font-weight: bold; color: #000; text-transform: uppercase;}
.agebox { display: block; width: 320px; margin: 80px auto; padding: 10px; background: #FFF; border: 5px solid #117c36;}


/* Layout */
.base { display: block; background: url(body_bg.png) repeat-x center top;}
.layout { display: block; background: url(body_theme.jpg) no-repeat center top;}
.siteHeader { position: relative; clear: both; display: block; width: 880px; height: 80px; margin: 0 auto; padding: 0 10px;}
.promoHeader { position: relative; clear: both; display: block; width: 880px; height: 544px; margin: 0 auto; padding: 0 10px;}
	.infoHeader { position: relative; clear: both; display: block; width: 880px; height: 512px; margin: 0 auto; padding: 0 10px;}
.pageHeader { position: relative; clear: both; display: block; width: 880px; height: 288px; margin: 0 auto; padding: 0 10px;}
.siteContent { position: relative; clear: both; display: block; width: 880px; margin: 0 auto; padding: 0 10px; background: url(center_bg.png);}
.siteFooter { display: block; clear: both; width: 880px; margin: 0 auto; padding: 0 10px; padding-top: 8px; background: url(footer_bg.png) no-repeat left top;}



/* Header */
.siteHeader h1 { position: absolute; top: 0; right: 0; display: block; width: 154px; height: 80px;}
	.siteHeader h1 span { display: none;}

.tabNavi { padding-top: 48px;}
	.tabNavi ul { list-style-type: none; height: 32px; padding-left: 16px; background: url(tab_open.gif) no-repeat left top;}
	.tabNavi li { display: inline;}
	.tabNavi li a { display: inline-block; float: left; background: url(tab_bg_of.gif) repeat-x; color: #666; text-transform: uppercase; font-weight: bold;}
		.tabNavi li a span { display: block; padding: 0 7px; line-height: 32px; border-left: 1px solid #dfdfdf; border-right: 1px solid #b2b2b2;}
	.tabNavi .close { display: block; float: left; width: 16px; height: 32px; background: url(tab_close.gif) no-repeat;}
	
	.tabNavi li a.on { background: url(tab_bg_on.gif) repeat-x; color: #FFF;}
		.tabNavi li a.on span { border-left: 1px solid #2fbb69; border-right: 1px solid #096323;}



/* Section Navi */
.modSec { display: block; width: 880px; height: 32px; margin: 0 auto; background: url(modsec_bg.gif) repeat-x;}
	.modSec ul { list-style-type: none; padding: 0 16px;}
	.modSec li { display: inline;}
	.modSec li a { display: inline-block; float: left; height: 32px; margin-right: 16px; line-height: 32px; color: #ccff00;}
	.modSec li a.on { background: url(session_arrow.gif) no-repeat left bottom; font-weight: bold; color: #FFF;}



/* Promotion Header */
.headerImage { position: relative; display: block; width: 880px; height: 495px; overflow: hidden; border-top: 1px solid #FFF;}
	.headerImage .flash { position: absolute; top: 0; left: 0; z-index: 2;}
	.promoHeader .headerImage { border-bottom: 1px solid #c6c6c6;}

.subNavi { display: block; height: 46px; background: url(subnavi_bg.png) repeat-x; border-top: 1px solid #FFF;}
	.subNavi .viewdetail { display: block; float: left; width: 144px; height: 38px; padding: 4px 8px; font-size: 8pt; font-weight: bold; line-height: 10pt; text-align: right; color: #757575;}
	.subNavi ul { width: 704px; float: left; list-style-type: none; border-left: 1px solid #FFF;}
	.subNavi li { display: block; width: 128px; float: left;}
	.subNavi li a { display: block; width: 119px; height: 38px; padding: 4px; background: url(subnavi_of.png) repeat-x; border-right: 1px solid #FFF; font-size: 8pt; font-weight: bold; line-height: 10pt; vertical-align: bottom; overflow: hidden;}
	.subNavi li a.on { background: url(subnavi_on.png) no-repeat left; color: #FFF;}
	.subNavi li a:hover { background: url(subnavi_over.png) repeat-x; color: #117c36;}



/* Content */
.contentCopy { display: block; padding: 16px;}
.contentCopy h2 { font-size: 12pt; color: #117C36; line-height: 20px;}
.contentCopy h3 { font-size: 10pt;}
.contentCopy a.button { background: #117c36; color: #FFF; padding: 0 8px; -moz-border-radius: 4px; -webkit-border-radius: 4px;}
.contentCopy small { color: #999; font-size: 8pt;}

.col1 { display: block; padding: 0 64px;}

.col2_left { display: block; width: 560px; float: left;}
.col2_right { display: block; width: 560px; float: right;}

.col3_left { display: block; width: 272px; margin-right: 16px; float: left;}
.col3_center { display: block; width: 272px; float: left;}
.col3_right { display: block; width: 272px; float: right;}

.col5_left { display: block; width: 416px; float: left;}
.col5_right { display: block; width: 416px; float: right;}

.contentCopy table { width: 100%; border-collapse: collapse;}
.contentCopy tr { vertical-align: top;}
.contentCopy th { text-align: left; padding: 4px 8px;}
.contentCopy td { padding: 4px 8px;}
.contentCopy ol { padding-left: 2em; margin-bottom: 16px;}
.contentCopy ul { margin-bottom: 16px;}

ul.list { padding-left: 16px;}


/* Footer */
.mailingList { display: block; height: 16px; padding: 8px 16px; font-size: 8pt; border-bottom: 1px solid #e2e2e2; color: #888;}
	.mailingList strong { padding-right: 8px;}
	.mailingList .inputbox { margin-right: 8px; font-size: 8pt; color: #888;}
	.mailingList .inputbutton { background: #888;}

.socialShare { display: block; width: 300px; float: right; text-align: right;}
	.socialShare a { display: inline-block; height: 16px; padding: 0 8px; background: #666; color: #FFF; font-weight: bold; -moz-border-radius: 4px; -webkit-border-radius: 4px;}
	.socialShare a.facebook { background: #6D84B4;}
	.socialShare a.twitter { background: #80B62A;}
	
	
.footInfo { display: block; padding: 8px 16px; padding-top: 6px; margin-bottom: 16px; border-top: 1px solid #FFF;}

.footLink { list-style-type: none; width: 50%; float: right;}
	.footLink li { display: inline;}
	.footLink li a { display: inline-block; float: right; font-size: 8pt; font-weight: bold; padding-left: 8px; margin-left: 8px; border-left: 1px solid #999; color: #888;}
	.footLink li a:hover { color: #85BE3B;}
	.footLink li.last a { border-left: none;}

.copyright { display: block; width: 50%; float: left; font-size: 8pt; color: #888;}



/* Extra */
.fb_link { display: block; color: #FFF; background: #617aac; border: 1px solid #0c2253; text-align: center;}
.fb_link span { display: block; padding-top: 15px; padding-bottom: 16px; border-top: 1px solid #8a9cc2;}
.fb_box { display: block; background: #E0E4EF;}

.entrybox { background: #f2f2f2; border: 1px solid #CCC; padding: 15px; margin-bottom: 16px;}
.entrybox p { padding-bottom: 0;}
.entrybox blockquote { padding: 16px; background: #FFF;}

table.voteresult td { border: 1px solid #e2e2e2;}

table.timetable th { border: 1px solid #e2e2e2; background: #f2f2f2;}
table.timetable td { border: 1px solid #e2e2e2;}

table.cnyform th { padding-left: 0; text-align: right; font-weight: normal;}
table.cnyform td {}
table.cnyform .inputbox { width: 176px;}
table.cnyform .textbox { width: 176px;}