@charset "UTF-8";
/* bed supperclub website v4 by id3 (http://www.id3.co.th) */
/* You may learn from and adapt elements of our CSS and markup in your own projects, but the unique combination of images, colors, sizes, typography, and positioning ("the design") is copyright 2004-2010 id3 (http://www.id3.co.th) and may not be reproduced.

QUICK REFERENCE:
text: #999;
font: "Myriad Pro", MyriadPro-Regular, Myriad, MPR, Tahoma, "Helvetica Neue", Helvetica, Geneva, Arial, sans-serif; (note: MPR is embedded via @font-face)
lines: #e2e2e2; (light, thin lines)
lines: #ccc; (stronger lines)

BSC Bangkok and BSC Paris have a specific stylesheet for their color scheme (bangkok.css and paris.css).
Internet Explorer exceptions (fixes and hacks) are in ie.css, do not add them to this file.

last updated: 05/05/10
*/

/* TAGS */
@font-face {
	font-family: 'MPR';
	src: url('../fonts/mpr.eot');
	src: local('../fonts/mpr'), local('../fonts/mpr'), url('../fonts/mpr.woff') format('woff'), url('../fonts/mpr.ttf') format('truetype'), url('../fonts/mpr.svg#MyriadPro-Regular') format('svg');
}
body {
	font: 0.8em/1.5em "Myriad Pro", MyriadPro-Regular, Myriad, MPR, Tahoma, "Helvetica Neue", Helvetica, Geneva, Arial, sans-serif;
	color: #999;
	margin: 0;
	padding: 15px;
}
a:link, a:visited {
	color: #f267a2;
	text-decoration: none;
}
a:active, :active {outline:none;} /* firefox (do not do it for "focus" as it affects accessibility for keyboard users) */
address {font-style: normal;}
address em {font-style: normal;font-weight: bold;}
h1 {
	background: url(p/sprite.png) no-repeat 0 -1443px; /* bed supperclub logo */
	text-indent: -9999px;
	display: block;
	height: 30px;
	width: 109px;
	margin: -5px 0 0;
	padding: 0;
	float: right;
	clear: right;
}
h1 a:link, h1 a:visited {
	height: 30px;
	width: 109px;
	display: block; /* make logo clickable */
}
h2 {
	font-size: 1.9em;
	font-weight: normal;
	padding: 0 0 5px;
	margin: 0 0 10px;
	border-bottom: 1px solid #e2e2e2;
}
h2 em {font-style: normal;}
h3 {
	font-size: 1.2em;
	margin: 0 0 10px;
	padding: 0;
}
h3 a:hover {color: #999;}
h4 { font-size: 1.2em; }
h5, h6 { }

/* GENERIC */
.col { /* 3 column layout */
	width: 295px; /* (940px of global - 20px margin col left - 20px margin col right)= 900px /3 columns = 300px - security margin for IE 3px bug */
	margin: 0;
	padding: 0;
	text-align: justify; /* text is justified in the columns (exceptions can be defined on a per page basis, ex: home) */
}
.left {float: left;}
.middle {float:left;margin-left:20px;}
.right {float: right;}
.wide { width: 340px; } /* if a sidebar (200px) is on the left instead of a column (295px), the columns middle and right must be wider (ex: explore) */
.col p a:link, .col p a:visited { color: #999; } /* links in columns on body text */
.col p a:hover { text-decoration: underline; }
.small { font-size: 0.9em; }
dl.small, .small dt {margin:0;padding:0;}
.small dd {margin:0 0 5px;padding: 0px;}
.ui-icon { display: inline-block; }
.neutral, .netural:link, .neutral:visited { color: #999 !important; }

#sidebar {
	margin: 0;
	padding: 0;
	float: left;
	width: 200px;
}
#main { /* used when a sidebar is on the left and a single column is required on the right (ex: agenda) */
	padding: 0;
	width: 710px;
	margin: 0 0 0 230px; /* 30px gutter */
}
.cleaner { /* one rule to clear them all */
	margin: 0;
	padding: 0;
	clear: both;
	float: none;
	display: block;
	border-style: none;
	visibility: hidden; /* required by IE */
}
/* CLEAR FIX*/
.clearfix:after {content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}
.clearfix {display: inline-block;}
.hidden, .forprint {display:none;}
.more {color: #999;}
.meta {font-size: 0.9em;color: #b3b3b3;}
a.more:link, a.more:visited {color: #999;text-decoration: underline;}
a.more:hover { text-decoration: none; }

/* TABS (jQueryUI) (schedule on home page, policy in sidebar, press page) */
.tabs .ui-widget-header { /* tab titles */
	backround-image: none;
	background: transparent;
	border-bottom: 1px solid #ccc; /* we just want a border bottom, not a box around tabs */
	border-top-style: none;
	border-right-style: none;
	border-left-style: none;
	border-radius: 0px;
	-moz-border-radius: 0px; /* required to avoid rounded edges on the bottom border */
	-khtml-border-radius: 0px;
	-webkit-border-radius: 0px; /* ditto */
}
.tabs .ui-state-active, .tabs .ui-state-active a:link, .tabs .ui-state-active a:visited {color: #fff;background: #999;}
.tabs .ui-state-hover, .tabs .ui-state-hover a:link, .tabs .ui-state-hover a:visited {color: #fff;background: #ccc;}
.tabs .ui-tabs-panel {margin: 0;padding: 10px 0 0; /* tab content */}
.tabs.ui-widget-content {border:none;background-image:none;}
.tabs .tabsnav li {list-style-type:none;}

/* previous and next buttons (ex: previous/next week) */
.previous, .next {
	text-indent: -9999px;
	height: 22px;
	width: 22px;
	overflow: hidden;
	display: inline-block;
	margin: 0;
	padding: 0;
}
.previous {background: url(../p/sprite.bak.png) no-repeat -584px -705px;}
.next {background: url(../p/sprite.bak.png) no-repeat -610px -705px;}
.previous:hover {background: url(../p/sprite.bak.png) no-repeat -584px -730px;}
.next:hover {background: url(../p/sprite.bak.png) no-repeat -610px -730px;}

/* CAROUSEL (bedsheets, gallery, downloads, ...) */
.carouselcontainer {
	position: relative; /* required to position previous and next buttons */
	width: 100%;
}
.carousel {
	overflow: hidden;
	margin-right: 40px; /* keep space for next button */
	margin-left: 40px; /* keep space for previous button */
}
.carouselitems li {
	margin-right: 10px;
	list-style: none;
}
#prevBtn a:link, #prevBtn a:visited, #nextBtn a:link, #nextBtn a:visited, .prevBtn a:link, .prevBtn a:visited, .nextBtn a:link, .nextBtn a:visited {
	width: 24px;
	height: 32px;
	text-indent: -9999px; /* hide "Previous" and "Next" */
	display: block;
	padding-top: 50px;
	padding-bottom: 50px;
}
#prevBtn a:link, #prevBtn a:visited, .prevBtn a:link, .prevBtn a:visited {
	background: transparent url(p/sprite.png) no-repeat -311px -348px;
	position: absolute;
	left: 0px;
	top: 0px;	
}
#prevBtn a:hover, .prevBtn a:hover {background: url(p/sprite.png) no-repeat -408px -348px;}
#prevBtn a:active, .prevBtn a:active {background: url(p/sprite.png) no-repeat -343px -348px;}
#nextBtn a:link, #nextBtn a:visited, .nextBtn a:link, .nextBtn a:visited {
	background: transparent url(p/sprite.png) no-repeat -548px -348px;
	position: absolute;
	right: 0px;
	top: 0px;
}
#nextBtn a:hover, .nextBtn a:hover {background: url(p/sprite.png) no-repeat -451px -348px;}
#nextBtn a:active, .nextBtn a:active {background: url(p/sprite.png) no-repeat -516px -348px;}
#prevBtn a:focus, #nextBtn a:focus, .prevBtn a:focus, .nextBtn a:focus {outline: none} /* required with Firefox */

/* breadcrumbs (inspired by http://veerle.duoh.com/blog/comments/simple_scalable_css_based_breadcrumbs/ bedankt Veerle!) */
#crumbs{
	height:2.3em;
	border:1px solid #ccc;
	padding: 0;
	margin: 15px 0;
}
#crumbs li{
	float:left;
	line-height:2.3em;
	padding-left:0.75em;
	list-style: decimal inside;
	background:url(../p/crumbs.gif) no-repeat right center;
	padding-right: 1em;
}

/* FORMS */
legend {font-weight: bold;margin-bottom: 10px;}
label {
	width: 8em;
	float: left;
	margin-top: 5px;
}
input, select, textarea {
	background-color: #fff;
	color: #666; /* needs to be darker than standard text for legibility */
	margin: 0 0 15px;
	padding: 2px;
	font-family:inherit;
	font-size:inherit;
	font-weight:inherit;
	border: 1px solid #ccc;
}
select {font-family: "Myriad Pro", MyriadPro-Regular, Myriad, Tahoma, "Helvetica Neue", Helvetica, Geneva, Arial, sans-serif;} /* Safari bug with selects that don't work with @font-face */
input[type='checkbox'], input[type='radio']{ /* sucky ie6 won't get this, others will */
	background: transparent;
	border: none;
	width: auto !important;
}
.required:after {
	content: '*';
	float: right;
	padding-right: 5px;
}
label.error {
	width: auto;
	float: none;
}
#MessageContainer  { /* for validation messages */
	width: 250px;
	height: auto;
	margin-bottom: 10px;
	display: none;
	z-index: 500;
	padding: 5px;
	-webkit-box-shadow: 0 1px 10px rgba(0,0,0,.1);
	-moz-box-shadow: 0 1px 10px rgba(0,0,0,.1);
	box-shadow: 0 1px 10px rgba(0,0,0,.1);
}
#MessageContainer label  {
    float:none;
    display:block;
}
.help {display: none;} /* help is hidden by default, appears on focus of corresponding field */

/* sidebar forms (guestbook, press login) */
.sidebarform {
	margin: 5px;
	padding: 0;
	position: relative;
}
.sidebarform fieldset {border: 1px solid #ccc;padding: 10px;}
.sidebarform p {margin: 0;padding: 0;}
.sidebarform label {
	display: block;
	width: auto;
	float: none;
}
.sidebarform input {width: 100%;margin: 0;padding: 0;}
.sidebarform #send { /* submit */
	margin-top: 15px;
	margin-bottom: 15px;
	text-align: center;
	width: 50%;
}
.sidebarform #sidebar blockquote {
	margin:15px 0 0;
	padding: 5px;
	color:#333;
}
/* buttons and links as buttons */
.button, #goog-wm-sb { /* goog-wm-sb is used on 404 error page by Google's search script */
	color: #fff;
	padding: 5px !important;
	background: #f267a2 url(p/ui-bg_highlight-hard_45_f267a2_1x100.png) repeat center center;
	font-weight: bold;
	border-style: none;
	border-radius: 4px;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	-khtml-border-radius: 4px;
}
.button:hover, #goog-wm-sb:hover {
	color: #fff;
	background: #f267a2 url(p/ui-bg_highlight-hard_45_f267a2_1x100.png) repeat center bottom;
	border-radius: 4px;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	-khtml-border-radius: 4px;
}
.button:active, #goog-wm-sb:active {
	position: relative;
	bottom: -1px; /* effect when button is pressed */
}
a.button:link, a.button:visited {color: #fff;}

/* secondary buttons and links as secondary buttons (we  override bg of regular button, !important required) */
.secondary {background: #ccc !important;background-image:none !important;}
.secondary:hover {background: #ccc;background-image:none !important;}

/* accessibility: link to skip nav and slideshow */
a.screenreader, a.screenreader:hover, a.screenreader:visited { 
	position:absolute;
	left:0px;
	top:-500px;
	width:1px;
	height:1px;
	overflow:hidden;
} 
a.screenreader:focus { 
	position:static; 
	width:auto; 
	height:auto; 
}

/* minigallery */
.minigallery {margin: 0;padding: 0;}
.minigallery li {
	display: inline;
	margin-right: 5px;
	list-style: none;
}

/* thumbnails (followus, agenda, gallery, ...)*/
.thumb {
	border: 1px solid #ccc;
	background: url(p/ajax-loader.gif) no-repeat center center; /* loader */
}
.thumb:hover {border: 1px solid #999;} /* hover effect (opacity) via jquery */
.shadow {
    -webkit-box-shadow: 0 1px 10px rgba(0,0,0,.1);
	-moz-box-shadow: 0 1px 10px rgba(0,0,0,.1);
	box-shadow: 0 1px 10px rgba(0,0,0,.1);
}
.thumbnofx { border: 1px solid #ccc; } /* for thumbnails that don't need opacity effect via jQuery (ex: Wallpapers on Downloads page) */
.border {
	background: #fff;
	padding: 5px;
	border-radius: 4px;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	-khtml-border-radius: 4px;
}
.flush { /* flush an item left (ex: picture at the beginning of paragraph on Bar page) */
	float: left;
	margin: 0 10px 5px 0;
}

/* photo credits */
.credits {
	font-size: 0.9em;
	text-decoration: none !important;
	color: #ccc;
	border-bottom: 1px dotted #e2e2e2;
}
a.credits:link, a.credits:visited {
	text-decoration: none !important;
	color: #ccc;
}
a.credits:hover {
	text-decoration: none !important;
	color: #ccc;
	border-style: none;
}

/* latest blog post */
.blogpreview {
	margin: 10px 0 0;
	padding: 10px;
	position: relative; /* required to position the quotes */
	border: 1px solid #ccc;
}
.blogpreview a:link, .blogpreview a:visited {text-decoration: none !important;}
.blogpreview a:hover {text-decoration: underline !important;}
.blogpreview h5 { margin-bottom: 5px; }
.blogger {
	padding: 5px;
	font-size: 0.9em;
	background-color: #fbe6ef;
	min-height: 60px;
	text-align: left;
}
.blogger h6 {color: #f267a2;}
.blogger a:link, .blogger a:visited {text-decoration: underline !important;}
.blogger a:hover {text-decoration: none !important;}
/* quotes */
#quotes {
	padding: 5px;
	margin-top: 10px;
	margin-bottom: 10px;
	border: 1px solid #ccc;
	min-height: 14em; /* increase size if restaurant quotes are too long */
	text-align:left;
}
#quotes dl {
	padding: 0;
	display: block;
	margin: 10px;
}
#quotes dt, #quotes dd {
	padding: 0;
	margin-top: 0;
	margin-right: 0;
	margin-bottom: 10px;
	margin-left: 0;
	display: block;
}
#quotes dt {
	font-size: 1.1em;
	font-style: italic;
}
#quotes dt:before {content: '"';}
#quotes dt:after {content: '"';}
#quotesnav {margin: 0;padding: 0 0 0 7px; /* align nav with announcements */}
#quotesnav a:link, #quotesnav a:visited {
	color: #fff;
	border: 1px solid #e2e2e2;
	margin-right: 5px;
	font-size: 1px; /* hide numbers as we want to have empty circles */
	padding: 3px;
	overflow: hidden;
	height: 7px;
	width: 7px;
	border-radius: 4px;
	-moz-border-radius: 4px; /* announcements nav as circles */
	-webkit-border-radius: 4px;
	-khtml-border-radius: 4px;
}
#quotesnav a:hover {
	color: #f3f3f3;
	border: 1px solid #999;
}
#quotesnav a.activeSlide {
	color: #e2e2e2;
	border: 1px solid #e2e2e2;
	background: #e2e2e2;
}
#quotesnav a:focus {outline: none;}

#main cite {font-style: italic;}

/* LAYOUT */
#global{
	margin: 0 auto 0;
	padding: 15px 10px;
	width: 940px; /* total width is 960px (940 + 10px margin left + 10px margin right) */
	background: #fff;
}
#header {
	padding-top: 15px;
	padding-bottom: 15px;
}

/* NAV */
#nav {
	margin: 0;
	padding: 0;
	font-size: 0.85em;
	letter-spacing: 1px;
	z-index: 99;
}
#nav li {
	display: inline;
	padding-right: 8px;
	padding-bottom: 5px;
	border-right: 1px solid #ccc;
	margin-right: 10px;
	position: relative;
	z-index: 100;
}
#nav li a:link, #nav li a:visited {
	text-transform: uppercase;
	color: #8d8d8d;
	text-decoration: none;
}
#nav li a:hover {
	border-bottom: 4px solid #999;
	padding-bottom: 5px;
}
#home #navhome a:link, #home #navhome a:visited, #explore #navexplore a:link, #explore #navexplore a:visited, #bar #navbar a:link, #bar #navbar a:visited, #restaurant #navrestaurant a:link, #restaurant #navrestaurant a:visited, #acts #navacts a:link, #acts #navacts a:visited, #agenda #navagenda a:link, #agenda #navagenda a:visited, #gallery #navgallery a:link, #gallery #navgallery a:visited, #media #navmedia a:link, #media #navmedia a:visited, #bedsheets #navmedia a:link, #bedsheets #navmedia a:visited, #podcasts #navmedia a:link, #podcasts #navmedia a:visited, #press #navmedia a:link, #press #navmedia a:visited, #presszone #navmedia a:link, #presszone #navmedia a:visited, #pressenquiries #navmedia a:link, #pressenquiries #navmedia a:visited, #shop #navshop a:link, #shop #navshop a:visited, #guestbook #navguestbook a:link, #guestbook #navguestbook a:visited, #links #navlinks a:link, #links #navlinks a:visited, #press #navpress a:link, #press #navpress a:visited {
	border-bottom: 4px solid #999;
	padding-bottom: 5px;
	font-weight: bold;
}
#nav .subnav {
	position: absolute; /* keeps subnav from affecting main nav */
	left: -10px;
	top: 20px;
	background: url(p/bg/fff_90.png) repeat; /* white overlay */
	margin: 0;
	padding: 0;
	width: 14em;
	border: 1px solid #ccc;
	z-index: 101;
}
#nav .subnav li {
	margin: 0;
	padding: 0;
	border: none;
	clear: both;
	width: 12em;
	text-indent: 10px;
	list-style: none;
	z-index: 102;
}
#nav .subnav li a:link, #nav .subnav li a:visited {
	display:block; /* make whole line clickable */
	border: none !important; /* override jqueryui css */
	padding: 0 !important;
	margin: 0;
}
#nav .subnav li a:hover { /* hover effect for subnav links */
	border: none !important;
	padding: 0 !important;
	margin: 0;
	color: #fff;
}
#bedsheets #navbedsheets a:link, #bedsheets #navbedsheets a:visited, #podcasts #navpodcasts a:link, #podcasts #navpodcasts a:visited, #downloads #navdownloads a:link, #downloads #navdownloads a:visited, #press #navpress a:link, #press #navpress a:visited, #presszone #navpresszone a:link, #presszone #navpresszone a:visited, #pressenquiries #navpressenquiries a:link, #pressenquiries #navpressenquiries a:visited { /* hover effect for subnav links and current subnav, background colour is set in bangkok or paris.css */ color: #fff;}
#bedsheets #navbedsheets a:hover, #podcasts #navpodcasts a:hover, #downloads #navdownloads a:hover, #press #navpress a:hover { /* hover effect for subnav links and current subnav, background colour is set in bangkok or paris.css */ color: #fff;}

/* language and venue switcher (world map) */
#world {
	height: 26px;
	width: 46px;
	text-indent: -9999px;
	display: inline-block;
	margin-right: 0;
	background-image: url(p/sprite.png);
	background-repeat: no-repeat;
	background-position: 0 -254px;
	position: relative;
}
#world:hover {
	background: url(p/sprite.png) no-repeat 0 -228px;
	border-style: none;
}
#navswitcher a:link, #navswitcher a:visited, #navswitcher a:hover {
	border-style: none !important; /* no underline for world map */
	padding-bottom: 0px !important;
}

/* SLIDESHOW */
#slideshow {
	margin: 10px 0;
	padding: 0;
	background: url(p/ajax-loader.gif) no-repeat center center;
	height: 357px;
	width: 940px;
	overflow: hidden;
}
#slideshow li {
	margin: 0;
	padding: 0;
	list-style: none;
}
#slideshow li img {
	border-radius: 4px;
	-moz-border-radius: 4px; /* rounded corners on images for real browsers */
	-webkit-border-radius: 4px; /* ie will ignore these */
	-khtml-border-radius: 4px;
}
#reservation {
	clear: right;
	float: right;
	font-size: 1.1em;
}
#sidebar #reservation { float: none; } /* if reservation button is in the sidebar, do not float right */

/* CONTENT */
#content {
	margin:0;
	padding:10px 0;
	min-height: 450px; /* should be at least height of special announcement which is floated left (because height of 3 cols varies) */
	display: block;
	clear: both;
	float: none;
}

/* FOOTER */
#footer {
	display: block;
	clear: both;
	float: none;
	border-top: 1px solid #e2e2e2;
	font-size: 0.9em;
	margin: 0;
	padding: 5px 0;
}
#footer a:link, #footer a:visited {
	text-decoration: underline;
	color: #999;
	padding: 1px 2px;
}
#footer a:hover {
	background: #666;
	color: #fff;
	text-decoration: none;
}
#contact #navcontact {
	text-decoration: none;
	background-color: #f267a2;
	color: #fff;
}

/* FOLLOW US */
#followus {
	margin: 0;
	padding: 0;
	position: absolute;
	height: 300px;
	width: 100%;
	z-index: 9999;
	left: 0px;
	top: -300px;
}
.overlay {
	background: url(p/bg/fff_95.png) repeat;
	height: 300px;
	border-bottom: 9px solid #f2769d;
}
.row {
	display: block;
	clear: both;
	float: none;
	margin: 0;
	padding: 0 0 0 10px;
	width: 950px; /* 960px - 10px padding left */
}
#followus .left, #followus .middle, #followus .right {min-height: 120px;}
#followus .left, #followus .middle {
	border-right: 1px solid #e2e2e2;
	padding-right: 10px;
}
#followus h4 {
	margin-top: 10px;
	margin-bottom: 5px;
	text-transform: lowercase;
}
#followus h4 a:link, #followus h4 a:visited { display: block; }
.rss { background: url(p/rss_followus.gif) no-repeat right top; }
#followus h5 a:link, #followus h5 a:visited {
	color: #999;
	text-transform: lowercase;
}
#followus h5 a:hover { text-decoration: underline; }

/* twitter */
#followus #avatar {
	float: left;
	border: 1px solid #e2e2e2;
}
#followus #avatar:hover { border: 1px solid #999; }
#followus blockquote {
	margin: 0 0 0 80px; /* latest tweet appears next to avatar (73px + margin) */
	padding: 0;
	clear: right;
}
#followus blockquote a:link, #followus blockquote a:visited { color: #999; }
#followus blockquote a:hover { text-decoration: underline; }

/* newsletter */
#followus input { font-size: 1.1em; }
#followus #ns_email { width: 14em; }
#followus .button {
	color: #fff;
	background: #ccc;
	background-image: none;
}
#followus .button:hover {
	color: #fff;
	background: #999;
	background-image: none;
}

/* mobile apps */
#followus #mobileapps {padding:0;margin:0}
#followus #mobileapps li {display: inline-block;text-indent:-99999px;}
#followus #iphoneapp {padding: 0 5px 0 0;margin:0 3px 0 0;border-right: 1px solid #ccc;}
#followus #iphoneapp a:link, #followus #iphoneapp a:visited {background:url(p/sprite.png) no-repeat -311px -1078px;height:16px;width:47px;display:block;}
#followus #iphoneapp a:hover {background:url(p/sprite.png) no-repeat -311px -1095px;}
#followus #androidapp a:link, #followus #androidapp a:visited {background:url(p/sprite.png) no-repeat -362px -1078px;height:16px;width:100px;display:block;}
#followus #androidapp a:hover {background:url(p/sprite.png) no-repeat -362px -1095px;}
/* flickr */
#followus #flickrsummary {margin:0;padding:0;}
#followus #flickrsummary li {
	list-style: none;
	display: inline;
	margin-right: 5px;
}
#trigger {
	background: url(p/tab_followus_bangkok.png) no-repeat left bottom;
	margin: 0;
	padding: 0;
	height: 32px;
	width: 960px;
	display: block;
	text-indent: -9999px;
	clear: both;
	float: none;
	position: absolute;
	cursor: pointer;
	outline:none;
}
#trigger.close {background: url(p/tab_followus_bangkok.png) no-repeat left top;}

/* SHARE THIS PAGE */
/* jQuery Bookmark styles v1.1.4 */
#share {
	display: block;
	clear: both;
	float: none;
	background: url(p/sprite.png) no-repeat 0 -701px;
	margin: 5px 0;
	padding: 0;
	height: 22px;
	width: 53px;
}
#share:hover {background: url(p/sprite.png) no-repeat 0 -723px;}
.bookmark_popup_text {text-indent: -9999px !important;} /* hide the "share" wording as it's already in the bg image */
#share a:link, #share a:visited { display: block; }
#share a:focus {outline:none; /* firefox fix */}
.bookmark_popup_text img {
	border: none;
	vertical-align: bottom;
}
.bookmark_popup {
	display: none;
	position: absolute;
	z-index: 100;
}
.bookmark_popup ul {
	float: left;
	width: 120px;
	border: 1px solid #ccc;
	border-radius: 4px;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	-khtml-border-radius: 4px;
}
.bookmark_list {
	display: inline-block;
	float: left;
	list-style-type: none;
	font-size: 0.9em;
	margin: 0;
	padding: 0;
}
.bookmark_list li {
	float: left;
	width: 23%;
	margin: 0px 1px;
	padding: 1px;
	list-style-type: none;
	background-color: #eee;
	border: 1px outset;
}
.bookmark_compact {
	background: url(p/bg/fff_95.png) repeat;
	border: 1px outset;
	border-radius: 4px;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	-khtml-border-radius: 4px;
}
.bookmark_popup_text, .bookmark_list a:link, .bookmark_list a:visited {
	background: transparent !important;
}
.button .bookmark_popup_text { color: #fff; }
.bookmark_compact li {
	width: 16px;
	height: 16px;
	margin: 0;
	padding: 2px;
	background-color: transparent;
	list-style-type: none;
	border: none;
}
.bookmark_list a {
	width: 100%;
	text-decoration: none;
	cursor: pointer;
}
.bookmark_list span {
	display: inline-block;
	width: 16px;
	height: 16px;
}
.bookmark_list img {border: none;}

/* SPLASH */
/* QueryLoader to load and cache all js, css, img (will make homepage feel faster) */
.QOverlay {z-index: 9999;background: #fff;}
.QLoader {height: 4px;background: #e7e8e9;}
#splash {
	padding: 50px;
	background: url(p/bg/bg_splash_footer.gif) repeat-x left 500px;
}
.switcher {
	padding: 50px;
	background-image: none !important;
}
#splash #global {
	background: transparent;
	width: 535px;
	padding: 10px;
}
#splash h1 {
	display: block;
	clear: both;
	float: none;
	position: fixe;
}
#splash #venues {
	margin: 50px 0 40px;
	padding: 0;
	background: url(p/bg/bg_splash.gif) no-repeat;
	height: 350px;
	width: 535px;
	position: relative;
}
#splash #venues dt {
	font-size: 20px; /* city name */
	background: url(../p/logo_e.png) no-repeat left center;
	text-indent: 37px;
}
#splash #venues dd {
	list-style: none; /* languages */
	padding: 0;
	display: inline;
	margin: 0 5px 0 0;
}
#splash #venues a:link, #splash #venues a:visited {
	color: #fff;
	white-space: nowrap;
}
#splash #venues a:hover { border-bottom: 2px solid #fff; }
#splash #bangkok, #splash #paris {
	padding: 10px;
	font-weight: bold;
	border-style: none;
	color: #fff;
	border-radius: 4px;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	-khtml-border-radius: 4px;
}

/* Paris */
#splash #paris {
	position: absolute;
	left: 230px;
	top: 135px;
}
#splash #paris {background: #2aabe4 url(p/ui-bg_highlight-hard_45_2aabe4_1x100.png) repeat center center;}
#splash #paris:hover {background: #2aabe4 url(p/ui-bg_highlight-hard_45_2aabe4_1x100.png) repeat center bottom;}

/* Bangkok */
#splash #bangkok {
	position: absolute;
	left: 370px;
	top: 185px;
}
#splash #bangkok {background: #f267a2 url(p/ui-bg_highlight-hard_45_f267a2_1x100.png) repeat center center;}
#splash #bangkok:hover {background: #f267a2 url(p/ui-bg_highlight-hard_45_f267a2_1x100.png) repeat center bottom;}

#splash h2 {
	border-style: none;
	text-align: center;
}
#splash h2 em { color: #f267a2; }
#splash #footer {
	margin: 0 auto;
	display: block;
	border-style: none;
	text-align: center;
}

/* HOME */

#home .col {text-align:left;} /* do not justify text on home page */

/* special announcements */
#announcements {
	margin: 0 0 10px;
	padding: 7px;
	width: 263px; /* width & height must be set to center loader gif in bg */
	height: 357px;
	background: url(p/ajax-loader.gif) no-repeat center center;
}
#announcements li {
	list-style: none;
	padding-left: 7px; /* center the announcements in the column: 295px (col) - 280px (announcement) = 15/2 = 7,5px left and right*/
}
#schedule .ui-tabs-nav {text-transform: uppercase;}
#announcements li img {
	border-radius: 4px;
	-moz-border-radius: 4px; /* rounded corners on announcements for real browsers */
	-webkit-border-radius: 4px;
	-khtml-border-radius: 4px;
}
#announcementsnav {
	margin: 0;
	padding: 0 0 0 7px; /* align nav with announcements */
}
#announcementsnav a:link, #announcementsnav a:visited {
	color: #fff;
	border: 1px solid #e2e2e2;
	margin-right: 5px;
	font-size: 1px; /* hide numbers as we want to have empty circles */
	padding: 3px;
	overflow: hidden;
	height: 7px;
	width: 7px;
	border-radius: 4px;
	-moz-border-radius: 4px; /* announcements nav as circles */
	-webkit-border-radius: 4px;
	-khtml-border-radius: 4px;
}
#announcementsnav a:hover {
	color: #f3f3f3;
	border: 1px solid #999;
}
#announcementsnav a.activeSlide {
	color: #e2e2e2;
	border: 1px solid #e2e2e2;
	background: #e2e2e2;
}
#announcementsnav a:focus {outline: none;}

/* What's on (weekly schedule) */

#schedule li {display: inline;font-size: 0.9em;}
#schedule .ui-tabs-nav li a {
	margin: 0;
	padding: 3px 5px;
	font-size: 0.9em;
}
#schedule .ui-state-active, #schedule .ui-state-active a:link, #schedule .ui-state-active a:visited {color: #fff;background: #999 !important;}
#schedule p {
	margin: 0 0 5px;
	padding: 0;
}
#schedule .details { /* date and time (ex: Saturday 03 October | 22:00-02:00 | White Room) */
	font-size: 0.9em;
	color: #ccc;
}

/* links in content */
#explore #main .col a:link, #explore #main .col a:visited, #bar #main .col a:link, #bar #main .col a:visited { text-decoration: underline; }
#explore #main .col a:hover, #bar #main .col a:hover { text-decoration: none; }

/* menu tabs (display individual and group menus) */
#menu .ui-widget-header {border-bottom:none;}
#menunav li { list-style: none; }
#menu .ui-widget-content {
    padding:10px;
    border:1px solid #ccc;
    border-radius: 4px;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	-khtml-border-radius: 4px;
}
#menu blockquote {
	background: #999;
	margin: 0 0 10px;
	padding: 10px;
	border: 1px solid #f267a2;
	color: #999;
	border-radius: 4px;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	-khtml-border-radius: 4px;
}
#menu blockquote h5 {color: #999;}
#menu .dishes li {
	text-align: left;
	padding-bottom: 10px;
	list-style: outside;
}

/* stop motion gallery of dishes */
#motiongallery {
	margin: 0;
	padding: 0;
	border: none;
}
#motiongallery caption {
	font-size: 1.2em;
	text-align: left;
	font-weight: bold;
}
#motiongallery td {
	border-style: none;
	vertical-align: top;
}

/* panorama listing (in sidebar) */
#panorama {
	width: 191px;
	background-image: url(p/sprite.png); /* bed360bg */
	background-repeat: no-repeat;
	background-position: 0 0px;
	height: 128px;
	margin: 0;
	padding: 10px 0 0 20px;
	float: right;
}
#panoramalist {margin: 0 0 15px;padding: 0;}
#panoramalist li {list-style: none;}
#panoramalist a:link, #panoramalist a:visited {
	font-weight: bold;
	text-transform: capitalize;
	color: #999;
	background: url(p/sprite.png) no-repeat 0 -1331px; /* icon_quicktime */
	text-indent: 15px;
	display: block;
}
#panoramalist a:hover {color: #f267a2;}
#panorama cite {font-size: 0.9em;}

/* panorama popup */
#panopopup {
	margin: 0;
	padding: 10px;
	width: 560px;
}
#panopopup h1 { margin-top: -10px; }
#panopopup h2 { font-size: 1.4em; }
#panopopup .left { background: url(p/ajax-loader.gif) no-repeat center center; }
#panopopup blockquote {
	font-size: 0.9em;
	margin: 0;
	padding: 0;
	float: right;
	width: 220px;
}

/* DJs AND ACTS */

#acts #sidebar {width: 240px;}
#acts #main {
    padding: 0;
	width: 670px;
	margin: 0 0 0 270px; /* 30px gutter */
}	
#acts #main h3 {
	border-bottom: 1px solid #ccc;
	margin-bottom: 30px;
}

/* DJ blurbs (carousel) */
#djblurbs {margin:0;padding:0;}
#djblurbs .carousel {margin-right: 45px;margin-left: 45px; /* keep space for previous/next buttons */}
#djblurbs li {list-style-type:none;}
#prevBtn a:link, #prevBtn a:visited, #nextBtn a:link, #nextBtn a:visited {
	margin-top: 180px;
	padding-top: 0;
	padding-bottom: 0;
}
.djblurb {
	width: 170px;
	margin: 0px 7px;
	padding: 0;
	float: left;
}
.djblurb dt img {
	border: 1px solid #ccc;
	background: url(p/ajax-loader.gif) no-repeat center center;
}
.djblurb .name { /* DJ name */
	font-weight: bold;
	font-size: 1.1em;
	color: #f267a2;
}
.djblurb dd { /* bio intro */
	margin: 0px 0px 5px;
	padding: 0;
	font-size: 0.9em;
}
.djblurb dd a:link, .djblurb dd a:visited {
	color: #999;
	text-decoration: none;
}
.djblurb dd a:hover { text-decoration: underline; }
.djblurb .status {
	font-size: 1em;
	font-weight: bold;
}

/* FILTER (for djs & acts, press clippings) */
/* filtering nav */
#filter {
	margin: 15px 0;
	padding: 0;
}
#filter li{ display: inline; }
#filter a:link,#filter a:visited {
	margin-right: 1em;
	font-weight: bold;
	text-decoration: none;
	padding-bottom: 0.3em;
	color:#999;
}
#filter a:hover, #filter a.current{ border-bottom: 3px solid #f267a2; }
#pastacts { position: relative; }
#actsearch {
	position: absolute;
	top: 45px;
	right: 20px;
}
#actsearch .button {
	font-size: 0.9em;
	margin-left: 5px;
}

/* items to filter (acts, press clippings) */
#itemstofilter {margin: 0;padding: 0;} /* avoid "jumps" when few acts filtered */
#itemstofilter dl { /* each project is in a definitions list */
	margin: 0px 15px 0px 0px; /* 15px to make total width same as columns */
	padding: 0;
	width: 96px; /* 94px thumbnail + 1px border left + 1px border right */
	height: 111px; /* 94px + 15px */
	display: block;
	float: left; /* make sure all acts and act names have the same size */
	position: relative; /* required to position .overview */
}
#itemstofilter dt img {
	display: block; /* required */
	border: 1px solid #ccc;
	background: #f2f2f2 url(p/ajax-loader.gif) no-repeat center center; /* loader appears in bg until thumbnail is loaded */
}
#itemstofilter .highlight {
	background: url(p/sprite.png) no-repeat -311px -857px; /* ribbon_events */
	height: 92px;
	width: 92px;
	position: absolute;
	top: -4px;
	text-indent: -9999px;
	margin: 1px;
	padding: 0;
	left: -4px;
}
#itemstofilter .actname {
	font-weight:normal;
	padding: 0;
	margin: 0;
	color: #333;
	font-size: 0.9em;
}
#itemstofilter .overview { /* overview only appears on hover, it has to be the same size as the thumbnail it will cover */
	width: 86px; /* 96px #itemstofilter dl - 5px padding left - 5px padding right. IE6 will not get this. */
	height: 86px; /* (94px thumbnail + 1px border top + 1px border bottom) - 5px padding top - 5px padding bottom */
	margin:0;
	padding: 5px;
	color: #fff;
	background: url(p/bg/000_80.png) repeat; /* overlay */
	position: absolute; /* from relatively positioned #itemstofilter ul */
	left: 0px;
	top: 0px;
	cursor: pointer;
	font-size: 0.9em;
	display: none; /* will be shown and hidden via jquery on hover */
}
#itemstofilter .overview .ui-icon { float: left; }
#itemstofilter .overview a:link, #itemstofilter .overview a:visited {
	color: #fff;
	display: block;
	height: 78px;
	width: 86px;
	cursor: pointer;
}
#itemstofilter .overview a:hover {}
#djchoice label, #interests label {
	float: none !important;
	width: auto !important;
	display:inline !important;
	margin: 0 !important;
	padding: 0 !important;
}
#djchoice fieldset {
	float: left;
	width: 23%;
	margin-right: 5px;
}
#djchoice fieldset legend {
	font-size: 1em;
}
#djchoice input, #interests input {
	float: none !important;
	width: auto !important;
	margin-left:0 !important;
	clear:none !important;
	margin-right: 5px;
}
#budget {
	width: 4em;
}
#budget_slider {
	margin-left: 150px;
	width: 24em;
}
#djbooking #form_confirm {
	margin-left: 150px;
}

/* AGENDA */

/* monthly view (jqueryui datepicker) */
#agenda .ui-datepicker {
	width: 100%; /* same value as #aside (below) */
	margin: 0;
	padding: 5px; /* same value as #aside (below) */
}
.ui-datepicker .ui-state-hover {background: transparent; /* hovered day */}
.ui-datepicker .ui-state-active {color: #fff;} /* active day */

/* datepicker header*/
.ui-datepicker .ui-widget-header {background-image: none;background: transparent;}
.ui-datepicker .ui-widget-header .ui-state-hover {background-image:none;}
.ui-datepicker .ui-datepicker-header {color: #999;}
.ui-datepicker .ui-widget-content {background-image: none;}

/* datepicker cells */
.ui-datepicker th { font-weight: normal; } /* weekdays */
.ui-datepicker .ui-state-highlight {} /* today */

/* ASIDE (Don't Miss, Policy) */
#aside {
	width: 100%;
	border: 1px solid #ccc;
	margin: 10px 0;
	padding: 5px;
	background: url(p/bg/bg_policy_bangkok.gif) no-repeat center top;
	padding-top: 135px;
	font-size: 0.9em;
}
/* aside tabs */
#aside #asidenav {margin: 0;padding: 0;}
#aside #asidenav li {
	margin: 0 5px 0 0;
	padding: 0;
	list-style: none;
}
#aside .ui-state-active, #aside .ui-state-active a:link, #aside .ui-state-active a:visited {
	color: #fff;
	background: #ccc !important;
}
/* don't miss */
#dontmiss, #dontmiss dt {
	margin: 0;
	padding: 0;
}
#dontmiss {
	margin-top: 15px;
}
#dontmiss dt a:link, #dontmiss dt a:visited { color: #999; }
#dontmiss dt a:hover {}
#dontmiss dd {
	color: #ccc;
	border-bottom: 1px dotted #ccc;
	margin: 0 0 5px;
	padding: 0;
}
/* policy */
#policy {
	margin: 0;
	padding: 0;
}
#policy li {
	height: 30px;
	padding-left: 35px; /* icon is 30px wide */
	vertical-align: middle;
	line-height: 15px; /* icon is 30px high, we have up to 2 lines of text */
	list-style: none;
	margin-bottom: 10px;
	margin-top: 10px;
}
#policy .open {background: url(p/sprite.png) no-repeat 0 -1077px;} /* icon_policy */
#policy .dress { background: url(p/sprite.png) no-repeat 0 -1120px; } /* -43px */
#policy .law { background: url(p/sprite.png) no-repeat 0 -1163px; } /* -43px */
#policy .passport {background: url(p/sprite.png) no-repeat 0 -1206px;} /* -43px */

/* link to FAQ */
#aside .faq {margin: 0;padding: 0;font-size: 1em;}
#aside .faq a:link, #aside .faq a:visited { padding: 3px; }
#aside .faq a:hover {color: #fff;}
#awdio {
	padding: 5px;
	margin-top: 15px;
	border: 1px solid #ccc;
	width: 200px;
}

#agenda #main { position: relative; } /* required to position .weekswitcher and can't be applied to #week because firefox ignores relative positioning on tables */

/* week switcher */
.weekswitcher li {list-style: none;}
.weekswitcher .prevBtn a:link, .weekswitcher .prevBtn a:visited, .weekswitcher .nextBtn a:link, .weekswitcher .nextBtn a:visited {padding-top: 0;padding-bottom: 0;}
#bottomswitcher {
	position: relative; /* required to position previous/next buttons */
	width: 100%;
	margin: 10px 0 0;
	padding: 0;
}

/* weekly table */
#week {
	border-top: none;
	border-right: 1px solid #e2e2e2;
	border-bottom: none;
	border-left: none;
	empty-cells: show;
}
#week caption {
	text-align: center;
	font-size: 1.5em;
	font-weight: normal;
	padding-top: 10px;
	padding-bottom: 10px;
}

/* weekly table headers */
#week .first { border-left: 9px solid #666; } /* first (empty) cell of headers has a border left to match border of days below */
#week .location th {
	background: #ccc;
	color: #fff;
	font-weight: bold;
	text-align: left;
}
#week thead .weekswitcher {
	position: absolute;
	top: -10px;
	right: 0px;
}
/* day headers */
#week th {
	font-weight: normal;
	text-align: center;
	margin: 0;
	padding: 5px;
	border-top: none;
	border-right: 1px solid #e2e2e2;	
	border-bottom: 1px solid #e2e2e2; /* separate each day */
	border-left: none;
	vertical-align: top;
	position: relative;
	font-size: 1.2em;
}
#week th em {
	font-size: 3em;
	font-style: normal;
	font-weight: normal;
	display: block;
	line-height: 1em;
}
#week th + td, #week th + td + td {width: 310px;} /* more would cause layout to break */
#week th + td { border-right: 1px solid #ccc; } /* vertical separator between bar and white room */

/* weekly table footer */
#week tfoot tr { border-left: 9px solid #ccc; /* last (empty) cell of headers has a border left to match border of days above */ } 
#week tfoot td {
	background: #ccc;
	border-top: 1px none #ccc;
	color: #fff;
	border-left: 9px solid #666;
	border-bottom: 1px none #ccc;
	border-right-style: none;
}
#week tfoot a:link, #week tfoot a:visited {
	color: #fff;
	text-decoration: underline;
}
#week tfoot a:hover { text-decoration: none; }

/* rows on hover */
#week tr:hover {background: #f2f2f2;}

/* weekly table days */
#week td {
	vertical-align: top;
	border-top: none;
	border-right: none;
	border-bottom: 1px solid #e2e2e2; /* separate each day */
	border-left: none;
	font-size: 0.9em;
}

/* highlight today */
#week .today td, #week .today th {}

/* Thai colours for the days of week */
#monday th {border-left: 9px solid #ffd117;}
#tuesday th {border-left: 9px solid #ef67a7;}
#wednesday th {border-left: 9px solid #8dc73f;}
#thursday th {border-left: 9px solid #f3a010;}
#friday th {border-left: 9px solid #2aabe4;}
#saturday th {border-left: 9px solid #93268f;}
#sunday th {border-left: 9px solid #c1262a;}
#week .event {
	display: block;
	position: relative; /* required to position .highlight ribbon absolutely */
	clear: both; /* required as there may be 2 events on the same day in the white room or bar */
	float: none; /* ditto */
}

/* event description */
#week .thumb {
	float: left;
	margin-bottom: 20px;
	clear: left;
	background: #fff;
	padding: 5px;
	border-radius: 4px;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	-khtml-border-radius: 4px;
}
#week .thumb:hover { border: 1px solid #999; }
#week h3 {
	margin: 0 0 0 115px;
	font-size: 1em;
	float: none;
}
#week .highlight {
	height: 122px;
	width: 92px;
	position: absolute;
	top: -4px;
	text-indent: -9999px;
	margin: 1px;
	padding: 0;
	left: -4px;
	background: url(p/sprite.png) no-repeat -311px -857px; /* ribbon_events */
}
#week blockquote {
	margin: 0 0 0 115px;
	padding: 0;
}
#week blockquote a:link, #week blockquote a:visited { color: #999; }
#week blockquote a:hover {text-decoration: none;background: transparent;}
#week .details {
	margin: 0 0 0 115px;
	font-weight: bold;
	clear: right;
}

/* GALLERY */
#gallery #content .left {
	width: 512px; /* #mainpicture (500px) + 1px border left and right */
	float: left;
	position: relative;
}
#gallery #content .right {width: 340px;}
#gallery #content h3 {font-size: 1.6em;}

/* gallery thumbnails */
#gallery .carousel {margin-right: 30px;margin-left: 30px; /* keep space for previous/next buttons */}
#gallery #prevBtn a, #gallery #nextBtn a {margin-top:30px;padding:0;}
#gallery .carouselitems li {margin-right: 7px;} /* distance between thumbnails */

/* gallery main picture */
#gallery #photoloader {
	display: none;
	position: absolute;
	width: 500px;
	height: 300px;
	background: transparent url(p/ajax-loader.gif) no-repeat center center;
}
#gallery #photo {
	margin-top: 10px;
	padding-top: 10px;
	border-top: 2px solid #f2f2f2;
	display: block;
	clear: both;
	float: none;
	text-align: center;
}
#gallery #mainpicture {
	border: 1px solid #ccc;
	padding: 5px;
	display: inline-block;
	background: transparent url(p/ajax-loader.gif) no-repeat center center;
}
#gallery #content cite {
	display: block;
	font-size: 0.85em;
	padding: 0;
	margin-top: 10px;
	margin-bottom: 10px;
	font-style: normal;
}
/* gallery albums */
#gallery #albums {
	margin: 45px 0 5px;
	padding: 0;
	font-size: 0.9em;
	border-style: none;
}
#gallery #albums thead {
	border-top: 1px solid #ccc;
	background: #f2f2f2;
}
#gallery #albums thead tr:hover {
	color: #fff;
	background: #ccc;
}
#gallery #albums tbody {
	border-top: 1px solid #ccc;
	font-size: 0.95em;
}
#gallery #albums td + td { text-align: right; } /* align album date right */
#gallery #albums,  #gallery #albums th, #gallery #albums td {border-style: none;vertical-align: top;}
#gallery #albums th {text-align: left;cursor: pointer;}
#gallery #albums a:link, #gallery #albums a:visited {color:#999;display: block;font-weight: bold;}
#gallery #albums a:hover {color:#999;}
#gallery #albums a:active, #gallery .active {color:#999;}
#gallery #albums .odd {background-color:#fcfcfc;}
#gallery #albums .active a:link, #gallery #albums .active a:visited {color: #999;}

/* table sorter */
#gallery .pager {
	padding: 5px 0;
	margin: 0;
	text-align: center;
	border-top: 1px solid #ccc;
	width: 350px;
	display:block;
}
#gallery .pager ul {padding: 0;margin: 0;}
#gallery .pager li {
	display: inline;
	list-style: none;
	margin: 0;
	padding: 0;
}
#gallery .pager .ui-icon { display: inline-block; } /* keep all on a single line */
#gallery .pagedisplay {
	width: 3em;
	text-align: center;
	font-size: 0.9em;
	color: #999;
	border-style: none;
}
/* tables */
#gallery #albums thead tr .header {
	background-image: url(p/pager_bg.gif);
	background-repeat: no-repeat;
	background-position: center right;
	cursor: pointer;
}
#gallery #albums thead tr .headerSortUp {background-image: url(p/pager_asc.gif);}
#gallery #albums thead tr .headerSortDown {background-image: url(p/pager_desc.gif);}
#gallery #albums thead tr .headerSortDown, #gallery #albums thead tr .headerSortUp {background-color: #999;color:#fff;}
/* gallery extras*/
#gallery #extras {
	margin: 0;
	padding: 0;
	font-size: 0.85em;
	display: block;
	clear: right;
}
#gallery #extras li {
	margin-right: 5px;
	list-style: none;
	display: inline-block;
}
#gallery #extras a:link {color: #999;}
#gallery #extras a:hover {color: #ccc;}

/* MEDIA: BED SHEETS */
#bedsheets #flashcontent { /* bed sheets magazine swf file (issuu.com embed) */
	float: left;
	height: 602px; /* define size to avoid jump once magazine is loaded. 600px height of banner right + 2 px border top and bottom */
	width: 778px; /* 940px total width - 160px for banner on the right = 780px for flash area - 2px border left and right of banner */
	margin-bottom: 15px;
}
#bedsheets #sponsor { /* banner */
	clear: right;
	float: right;
	height: 600px;
	width: 160px;
	background: #f2f2f2 url(p/ajax-loader.gif) no-repeat center center;
	border: 1px solid #ccc;
	margin-bottom: 15px;
}
#pastissues {
	margin: 0 5px;
	padding: 0;
	width: 592px;
	float: left;
}
#pastissues #prevBtn a, #pastissues #nextBtn a {margin-top:85px;padding:0;}
#pastissues li img {
	border: 1px solid #ccc;
	display: block; /* force a linebreak after the cover */
	background: url(p/ajax-loader.gif) no-repeat center center;
	text-align: center;
	margin-bottom: 5px;
}
#pastissues li em {
	display: block; /* force a linebreak after issue number */
	font-style: normal;
	font-weight: bold;
}
#pastissues li .button {font-size:0.85em;}
#bedsheets #content .right {
	padding: 5px;
	margin: 0;
	border: 1px solid #ccc;
}
#bedsheets #content .col.right h4 { margin-bottom: 15px; }
#bedsheets .col.right .button.secondary { color: #fff; }
#bedsheets #extra {
	clear: both;
	float: none;
}

/* issuu fixes (bed sheets magazine embed) */
#issuusb-container, #issuusb-wrapper, #issuusb-shadow {
	outline:none;
	outline-color:transparent !important;
	background-image: none !important;;
}
#issuusb-corner-tl, #issuusb-fill-t, #issuusb-fill-l, #issuusb-fill, #issuusb-fill-r, #issuusb-corner-bl, #issuusb-fill-b, #issuusb-corner-br {
	border: none;
	background-image: none !important;;
}
#issuusb-fill {background-color: transparent !important;}
#issuusb-corner-tr {
	border: none;
	outline:none;
	outline-color:transparent !important;
	background: no-repeat;
}

/* PODCASTS */
/* podcast player */
#podcasts #content #left {
	float: left;
	width: 480px;
}
#podcasts #player {
	margin: 0 0 5px;
	padding: 0;
}
#podcasts #videoplayer {
	padding: 5px;
	border: 1px solid #ccc;
	background: url(p/ajax-loader.gif) no-repeat center center;
	display: none;
	margin: 0;
}
#podcasts #audioplayer { margin: 0; }
#podcasts #content .left h3 {font-size: 1.6em;}
#podcasts #content .left blockquote, #playerstandalone blockquote {
	padding: 5px;
	margin: 0;
	background: #f6f6f6 url(p/ui-bg_highlight-soft_95_f2f2f2_1x100.png) repeat;
	border: 1px solid #ccc;
	width: 350px;
}
#podcasts #content .left .details { color: #999; }
#podcasts .details em {
	font-style: normal;
}
#podcasts .left .ui-icon {
	display: inline-block;
	background: url(p/ui-icons_999999_256x240.png) -48px -80px;
}

/* podcast archive on the right (jqueryui tabs) */
#podcasts #content #right {
	width: 445px;
	margin-bottom: 15px; /* to keep space from "share" underneath */
	margin-left: 495px; /* #player + 15px margin */
}
/* podcast tabs navigation */
#podcastsnav li { list-style: none; }
#podcasts #archive .ui-tabs-nav {
	border-top-style: none;
	border-right-style: none;
	border-left-style: none;
	font-size: 1.1em;
	border-radius: 0px;
	-moz-border-radius: 0px;
	-webkit-border-radius: 0px;
	-khtml-border-radius: 0px;
}
#podcasts #archive .ui-state-default a:link, #podcasts #archive .ui-state-default a:visited { color: #999; }
#podcasts #archive .ui-state-active a:link, #podcasts #archive .ui-state-active a:visited { color: #fff; }

/* podcast tabs content */
#podcasts .item {
	height: 500px;
	width: 425px;
}
#podcasts #archive .scrollpane { /* .scrollpane div is required inside .item to make jScrollPane work with jQueryUI Tabs */
	height: 490px;
	width: 425px;
	margin: 0;
	padding: 0;
	overflow: auto;
}
/* podcasts listing */
#podcasts #archive dl {margin: 0;padding: 0;}
#podcasts #archive dt {
	float: left; /* thumbnail */
	clear: left;
	margin: 5px 0 0;
	padding: 0;
}
#podcasts #archive dd {
	margin-left: 135px;
	margin-top: 5px;
	padding: 0;
}
#podcasts #archive dd a:link, #podcasts #archive dd a:visited { font-weight: bold; }
#podcasts #archive dd a:hover { color: #999; }
#podcasts .details  {font-size: 0.9em;color: #ccc;}
#podcasts #archive hr { /* clear between each podcast */
	clear: both;
	float: none;
	padding: 0 0 5px;
	margin: 0;
	border-bottom: 1px dotted #ccc;
	border-top-style: none;
	border-right-style: none;
	border-left-style: none;
}
/* more: podcast-related (itms, awdio, youtube) */
#podcasts #more dt {
	font-size: 0.9em;
	font-weight: normal;
	clear: both;
	float: none;
}
#podcasts #more dd {
	text-indent: -9999px;
	height: 92px;
	width: 150px;
	margin: 0 0 15px;
	padding: 0;
	display: block;
	clear: both;
	float: none;
}
#podcasts #more dd a:link, #podcasts #more dd a:visited {
	display: block;
	height: 92px;
	width: 150px;
}
#ituneslink { background: url(../p/podcasts_more.gif) no-repeat center -199px; }
#awdiolink {background: url(../p/podcasts_more.gif) no-repeat center top;}
#youtubelink { background: url(../p/podcasts_more.gif) no-repeat center -100px; }
#ubradiolink { background: url(../p/podcasts_more.gif) no-repeat center bottom; }

/* bed player in popup (standalone) */
#playerstandalone #global { width: 360px; }
#playerstandalone #header {border: none;height:35px;}
#playerstandalone #content { min-height: 120px;height: auto; }
#playerstandalone .details {font-size: 0.9em;}
#playerstandalone #share { display: inline-block; }
#playerstandalone #dropdownarchive {
	position: absolute;
	top:0px;
	left:0px;
	width: 350px;
	margin: 0px;
	padding: 5px;
}
#playerstandalone #dropdownarchive .sub_menu {width:360px;}
#playerstandalone #dropdownarchive .hint {background: url(p/pager_asc.gif) no-repeat 325px 5px;}
#playerstandalone #dropdownarchive li {width:356px;padding:2px;margin:0;height:22px;}
#playerstandalone #dropdownarchive li a:link, #playerstandalone #dropdownarchive li a:visited {padding:2px;margin:0;}

/* DOWNLOADS */
#downloads h3 { border-bottom: 1px solid #ccc; }
#downloads .carousel { margin-bottom: 15px; }
#downloads .carousel li a:link , #downloads .carousel li a:visited {
	font-size: 0.85em;
	color: #999;
	padding: 2px;
	border: 1px solid #ccc;
	text-align: center;
	width: 124px; /* width of wallpaper thumbnail (128px) - 2px padding left and right */
	display: inline-block;
	margin: 0px 0px 2px;
	text-decoration: none;
}
#downloads .carousel li a:hover {
	color: #fff;
	background: #999;
	text-decoration: none !important;
}
#downloads #prevBtn a:link, #downloads #prevBtn a:visited, #downloads #nextBtn a:link, #downloads #nextBtn a:visited {margin-top:100px !important;} /* previous/next buttons in vertical center of carousel */
#downloads .track {
	float: left;
	width: 45%;
	margin: 0px 15px 15px 0;
	padding: 0;
}
#downloads .track dt {
	float: left;
	font-size: 0.9em;
	font-weight: normal;
	color: #ccc;
}
#downloads .track dt img {display: block; /* linebreak after thumbnail */}
#downloads .track dd {
	margin-left: 135px;
	margin-bottom: 5px;
}
#downloads #content a:hover { text-decoration: underline; }
#downloads .button { text-decoration: none !important; }

/* PRESS */
#press #sidebar, #presszone #sidebar, #pressenquiries #sidebar {
	padding: 10px 10px 130px;
	background: url(p/bg/bg_reservation_bangkok.gif) no-repeat left bottom;
	border: 1px solid #ccc;
	position: absolute; /* required to avoid pushing #main below #sidebar */
}
#presszone #main {
	min-height: 450px;
}
#presszone #main h4 {
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #ccc;
	margin-bottom: 10px;
}

/* press zone */
#presslogin {
	width: 200px;
	margin: 0;
}
/* press enquiries */
#pressenquiry fieldset {
	border: 1px solid #ccc;
	padding: 5px;
}
#pressenquiry #country {width: 142px;}
#pressenquiry #captcha_accessibility, #pressenquiry #captcha_accessibility li {margin:0;padding:0;}
#pressenquiry #captcha {
	margin-top: 10px;
	margin-right: 0;
	margin-bottom: 10px;
	margin-left: 0;
}
/* GUESTBOOK */
#guestbook #sidebar {
	margin: 5px;
	padding: 0 0 120px;
	position: relative;
}
/* guestbook posts */
.post {
	width: auto;
	margin-bottom: 24px; /* leave space for bubble tip */
	display: block;
	clear: right;
	float: none;
}
.post blockquote {
	margin: 0;
	padding: 5px;
	border: 1px solid #ccc;
}
.even blockquote {}
#guestbook cite {
	position: relative;
	margin: 0;
	padding: 7px 0 0 15px;
	top: 2px;
	background: transparent url(p/sprite.png) no-repeat 15px -380px; /* bubble_tip (add 15px to x) */
	font-style: normal;
	color: #ccc;
	font-size: 0.9em;
}
#guestbook .even cite {background: transparent url(p/sprite.png) no-repeat 15px -594px;} /* bubble_tip_even (add 15px to x) */

/* guestbook form (shoutbox) */
#guestbook #sign fieldset {
	padding: 10px 10px 130px;
	background: url(p/bg/bg_guestbook.png) no-repeat center bottom;
}
#guestbook #charlimit {
	font-size: 0.9em;
	float: right;
	position: relative;
	right: 0px;
}
#formerror { color: #f267a2; }
.cancel {
	float: right;
	margin-top: 15px;
	font-size: 0.9em;
}
/* paging */
.paging {
	padding: 0;
	margin: 15px 0;
	font-size: 0.9em;
}
.paging li {margin: 0 5px 0 0; padding: 0; list-style: none; display: inline; line-height: 2em;}
.paging a:link, .paging a:visited {
	color: #999;
	background: #fff;
	padding: 3px 5px;
	border: 1px solid #ccc;
	border-radius: 4px;
	-moz-border-radius: 4px; /* rounded corners on images for real browsers */
	-webkit-border-radius: 4px; /* ie will ignore these */
	-khtml-border-radius: 4px;
}
.paging a:hover {background: #999;color: #fff;}
.paging .current a:link, .paging .current a:visited {color: #fff;}
.paging a.option:link, .paging a.option:visited {background: #fff;}
.paging a.option:hover { background: #999; }

/* POPUP */
.popup {background:#fff;background-image:none;}
.popup #global { width: 800px; } /* to avoid shadowboxes with horizontal scroll. total width is 820px (800 + 10px margin left + 10px margin right) */
.popup #content {min-height:200px;}
.popup #header {
	border-bottom: 1px solid #ccc;
	padding: 0;
	position: relative; /* required to absolutely position the archives dropdown (news and events) */
}
.popup #header h2 { border-style: none; }
.popup .sidebar {
	width: 200px;
	float: left;
	padding: 5px;
	margin: 0;
}
.popup .main {
	width: 575px;
	margin-left: 225px;
}
/* popup archive (previous/next event/news/dj) */
.popup #archive {
	margin: 0;
	padding: 5px 0;
	width: 100%;
	border-top: 1px solid #ccc;
	position: relative; /* required to absolutely position the next event/news button */
}
.popup #archive li {list-style: none;}
.rightfix {
	position: absolute; /* next event/news button */
	top: 5px;
	right: 0px;
}
/* event, news, dj details */
#itemdetails #sidebar, #menustandalone #sidebar { width: 280px; }
#itemdetails #main, #menustandalone #main {margin-left: 295px;width: 505px;}
#itemdetails h3 { font-size: 1.6em; }
#itemdetails h4 {
	font-size: 1em;
	color: #999;
	margin-bottom: 15px;
}
#itemdetails h5 {font-size: 1em;margin-bottom: 15px;} /* colour is in local css (bangkok, paris) */

/* overview box (blockquote) */
#itemdetails #overview {
	padding: 5px;
	margin: 0 0 15px;
	width: 495px;
	height: auto;
}
#itemdetails #overview li { list-style: none; }
#itemdetails #overview li a:hover { color: #999; }

/* archive dropdown (news details, agenda details, dj bio) */
#itemdetails #header #wrap { height: 35px; } /* required to give height to header */
#dropdownarchive {
	position: absolute;
	left: -25px;
	top: -10px;
	padding: 2px 3px;
	background: url(p/bg/fff_95.png) repeat;
	z-index: 999;
	border: 1px solid #ccc;
	height: 15px;
	width: 274px; /* 274px + 3px left and right = 280px */
}
#dropdownarchive:hover {color: #fff;} /* required to hide dropdown title which would appear under dropdown items when scrolling */
#dropdownarchive li a:link, #dropdownarchive li a:visited {color: #999;display: block;}
#dropdownarchive .hint {
	background: url(p/pager_asc.gif) no-repeat 255px 5px; /* arrow down icon in dropdown title */
	display: block; /* required to take whole width */
	font-weight: bold;
}
#dropdownarchive em {
	font-style: normal !important;
	font-weight: bold !important;
	font-size: 1.2em;
}
/* level 1 (archive title) */
ul.dropdown li {
	position: relative;
	list-style: none;
	width: 280px;
	display: block;
}
ul.dropdown li a:link, ul.dropdown li a:visited {
	display: block;
	position: relative;
	z-index: 2000;
	padding: 5px;
}
ul.dropdown li a:hover, ul.dropdown li a.hover {position: relative;}

/* level 2 (archive items) */
ul.dropdown ul {
	width: 282px; /* dropdown should be wider than 280px to avoid seeing border of flyer/picture below appearing on the edges */
	display: none;
	z-index: 1000;
	position: absolute;
	left: -30px;
	top: 5px;
	background: url(p/bg/fff_95.png) repeat;
	border: 1px solid #ccc;
}
ul.dropdown ul li {
	border-bottom: 1px solid #ccc;
	width: 280px;
}
ul.dropdown ul li a:hover {color: #fff !important;}
ul.dropdown ul li a:link, ul.dropdown ul li a:visited, ul.dropdown ul li a:hover {display: block;} 

.flyer { border: 1px solid #ccc; }

/* LINKS */
#links.popup .tabs li {margin-bottom: 5px;} /* increasing spacing between links in "Links" popup */
#links.popup .tabs .tabsnav li {margin-bottom: 0;} /* cancel rule above for tabs */

/* FAQ */
#faq #accordion h3 {
	text-indent: 25px; /* leave space for arrow icon in front of question */
	color: #666;
}
#faq #accordion .ui-accordion-header { padding: 5px; }
#faq #accordion .element {font-size: 1.1em;color: #666;}
#faq .element .details { color: #999; }
#faq .element li { margin-bottom: 10px; }
#faq .element dl {margin: 0;padding: 0;}
#faq .element dd {margin-bottom: 10px;margin-left: 0;}

/* minislideshow */
#minislideshow {margin:0;padding:0;}
#minislideshow li {
	list-style: none;
	margin: 0;
	padding: 0;
}
/* menu (standalone page) */
#menustandalone #minislideshow { display: block; }
#menustandalone #minislideshow img { border: 1px solid #ccc; }
#menustandalone .ui-widget-content {float:left;}

/* RESERVATION */
#reservationpage #sidebar, #contact #sidebar, #events #sidebar {
	background: url(p/bg/bg_reservation_bangkok.gif) no-repeat left bottom;
	margin: 0;
	padding: 5px 5px 150px;
	border: 1px solid #ccc;
}
#reservationpage .ui-datepicker {
	width: auto; /* required to override 100% width */
	font-size: 1.2em;
	z-index: 1000; /* required to appear on top of #number_guests slider (z-index 999) */
}

/* standard form (reservation and contact) */
#mainForm {
	margin: 0 0 10px;
	padding: 0;
	border-style: none;
}
#mainForm fieldset {
	border: 1px solid #ccc;
	padding: 5px;
	position: relative;
}
#mainForm legend, #presslogin legend, #pressenquiry legend {
	margin: 0;
	padding: 0;
	font-size: 1.2em;
	background: #fff;
}
#mainForm legend + p {margin-top: 15px;}
#mainForm label {
	width: 150px;
	float: left;
	clear: both;
	display: block;
	white-space: nowrap;
	padding:0;
	margin:3px 10px 3px 0;
}
#mainForm select {
	background: #fff;
	border: 1px solid #ccc;
}
#mainForm .checkbox {background: #e8769d;}
#mainForm .inline {
	display:inline;
	width:auto;
	float:none;
	margin: 0;
	padding: 0;
}
#mainForm label, #mainForm select {
	margin-top: 3px;
	margin-bottom: 3px;
}
#mainForm label > input, #mainForm label > select {margin-left: 180px;}
#mainForm blockquote {
	padding: 5px;
	margin-left: 160px;
	color: #666;
	background: #f5e5ea;
	border: 2px solid #e8769d;
}
#mainForm em {
	font-style: normal;
	font-weight: bold;
}
#mainForm blockquote label {color: #666;}
#mainForm #request {
	background: #fff;
	border-style: none;
	padding: 0;
	color: #000;
	font-family: "Courier New", Courier, monospace;
}
#mainForm .help {
	position: absolute;
	top: 10px;
	right: 10px;
	width: 250px;
}
#eventhelp {margin-top:10px;}
#mainForm pre { font-size: 1.4em; }
#mainForm li { list-style: url(../p/bullet_check.gif) inside; }
#mainForm input.error { border: 2px solid #f267a2; } /* highlight fields with errors */

/* captcha */
#captcha {
	border: 1px solid #ccc;
	margin: 0 0 10px 160px;
	padding: 0;
	float: left;
}
#captcha_accessibility {
	margin: 0;
	padding: 0 0 0 10px;
	clear: right;
}
#captcha_accessibility li {
	list-style: none;
	display: block;
	float: none;
}
#captcha_accessibility .ui-icon {display: block;}
#captcha_code {
	font-weight:bold;
	font-size: 1.6em;
	width: 174px;
	text-transform: uppercase;
	color: #f267a2;
}

/* reservation-specific */
#booking_date { font-size: 1.2em; }
#hotel_details { display: none;width:15em;margin-left:12.5em; }
/* reservation: slider for number of guests */
#number_guests_slider {
	width: 200px;
	display: inline-block;
	margin-left: 25px; /* required by Firefox to avoir overlap of slider on #number_guests*/
}
#number_guests {
	border-style: none;
	width: 2em;
	margin-left: 5px;
	float: left;
}

/* CONTACT */
#contact label.error {
	color:#f267a2;
	background: transparent;
	white-space: pre;
}
#mainForm #MessageContainer {
	position: absolute;
	top: 15px;
	width: 290px;
	height: auto;
	left: 400px;
	padding: 5px;
	border: 1px solid #f267a2;
}

/* NEWSLETTER popup (subscribe, unsubscribe, confirm) and birthday alert */
#newsletter #registerform {
	float: left;
	width: 450px;
}
#newsletter #registerform fieldset {
	border: 1px solid #ccc;
	padding: 5px;
}
#newsletter #subscriptions {
	clear: left;
	margin: 0;
	padding: 15px 0;
}
#newsletter #subscriptions dt { margin-bottom: 5px; }
#newsletter #subscriptions dd { margin-bottom: 15px; }
#newsletter #privacy {
	margin: 0px 0px 0px 465px;
	padding: 5px;
}
.promo {width:430px;}
.birthday {background: url(p/bg/bg_birthday.png) no-repeat right top;}

/* Announcing BSC Paris (based on newsletter popup) */
.announcing h4 {margin-bottom: 15px;}
.announcing #button {margin-left: 8em;}

/* 404 Error page */
.other-things {display: none;} /* Hide h3 appended by Google script */
#goog-wm ul{
	margin: 0;
	padding: 0;
}
#goog-wm li {
	margin: 0;
	padding: 0;
	list-style: none;
}
#goog-wm-qt { margin-right: 15px; }

/* jScrollPane */
.jScrollPaneContainer {
	position: relative;
	overflow: hidden;
	z-index: 1;
}
.jScrollPaneTrack {
	position: absolute;
	cursor: pointer;
	right: 0;
	top: 0;
	height: 100%;
	background: #e2e2e2;
}
.jScrollPaneDrag {
	position: absolute;
	background: #f267a2;
	cursor: pointer;
	overflow: hidden;
}
.jScrollPaneDragTop {
	position: absolute;
	top: 0;
	left: 0;
	overflow: hidden;
}
.jScrollPaneDragBottom {
	position: absolute;
	bottom: 0;
	left: 0;
	overflow: hidden;
}
a.jScrollArrowUp {
	display: block;
	position: absolute;
	z-index: 1;
	top: 0;
	right: 0;
	text-indent: -2000px;
	overflow: hidden;
	height: 9px;
}
a.jScrollArrowDown {
	display: block;
	position: absolute;
	z-index: 1;
	bottom: 0;
	right: 0;
	text-indent: -2000px;
	overflow: hidden;
	height: 9px;
}
/* FaceBook integration */
.fb_iframe_widget {border:none !important;}

@media print {
/* print stylesheet last updated: 12/01/10 */
html{color:#000;background:#fff;margin:0;padding:0;width:auto;height:auto;}
body{padding:0;margin:1.2cm;height:auto!important;font-size:11pt;color:#000;background:#fff;}
h1{float:none;background:url(../p/logo_bed_supperclub_print.png) no-repeat;}
h2,h3,h4,h5,h6,dt{color:#000!important;}
#header{border-bottom:1px solid #ccc;}
#nav,#slideshow,#reservation,#followus,#share,#sponsor,#flashcontent{display:none;}
.button{background-color:transparent!important;}
a:link,a:visited,#footer a:link,#footer a:visited{color:#000!important;text-decoration:none!important;}
#main p a:after{content:"("attr(href)") ";font-size:10pt;color:#999;}
a img{border:none;}
.small{font-size:.9em;}
.forprint{display:block;}
#reservationpage .forprint h5{font-size:16pt;}
h2, h3, h4 {page-break-after:avoid;}
}

/*------------------------------------*\
	iPhone
\*------------------------------------*/
@media screen and (max-device-width: 480px){
img{
  max-width:100% !important;
  height:auto;
}
#global {
	clear:both!important;
	display:block!important;
	width:100%!important;
	float:none!important;
	margin:0!important;
	padding:0!important;
}
#announcementsnav a:link, #announcementsnav a:visited {
	margin-right: 20px;
	padding: 5px;
	height: 24px;
	width: 24px;
}
}