/* GLOBAL STRUCTURE -
Stylesheet for structure & layout used across the site

 index ->
	reset
	global
*/

/* =reset */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	font-family: inherit;
	vertical-align: baseline;
}
/* remember to define focus styles! */
:focus {
	outline: 0;
}
body {
	line-height: 1;
	color: black;
	background: white;
}
ol, ul {
	list-style: none;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: separate;
	border-spacing: 0;
}
caption, th, td {
	text-align: left;
	font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: "";
}
blockquote, q {
	quotes: "" "";
}

/* =global */

a {color: #f02b33}
a:link {text-decoration: underline}
a:visited {color: #f02b33} 
a:hover, a:active, a:focus {text-decoration: none}

p, blockquote, pre, address, code,
dl, dt, dd, ol, ul, li,
fieldset,
table {margin: 1em 0}

ol {margin-left: 15px}
	ol li {margin-left: 17px; list-style: decimal; list-style-position: outside}

ul {margin-left: 15px; list-style: none}
	ul li {padding-left: 17px; background: transparent none 2px 6px no-repeat} 

strong {font-weight: bold}

/* =layout */

body {font: 100.01%/1.4 arial, verdana, tahoma, sans-serif; background: #502d17 none; color: #fff}
#site {font-size: 75%; width: 100%}

.logo {font-size: 1em; float: left; width: 140px; margin: 0 0 0 -15px}
	.logo a {display: block; text-indent: -9999em; width: 140px; height: 119px; background: transparent url(../images/logo-rambutan.png) 0 0 no-repeat}
		.logo a span {display: none}

.header {position: fixed; width: 100%; height: 44px; background: transparent url(../images/header-bg.png) 0 0 repeat-x; left: 0; z-index: 10}

.nav {margin: 0 auto; width: 966px; text-align: right; font-family: "century gothic", arial, sans-serif}
	.nav ol {float: right; margin: 9px -10px 0 0; padding: 0}
	.nav li {float: left; display: inline; font-size: 1em; margin: 0; padding: 0; text-transform: uppercase; margin-left: 6px; list-style: none}
		.nav li a {float: left; position: relative; color: #fff; text-decoration: none; width: 165px; height: 20px}
		.nav li a:focus,
		.nav li a:hover,
		.nav li a:active {color: #f02b33}
			.nav li span {position: absolute; width: 165px; height: 20px; top: 0; left: 0; cursor: pointer; background: transparent url(../images/nav.gif) 0 0 no-repeat}
			.nav .nav-restaurant a {width: 112px}
				.nav .nav-restaurant span {width: 112px; background-position: 0 0}
				.nav .nav-restaurant a:focus span, 
				.nav .nav-restaurant a:hover span,
				.nav .nav-restaurant a:active span,
				.nav .nav-restaurant a.active span {background-position: -165px 0}
			.nav .nav-menu a {width: 45px} 
				.nav .nav-menu span {width: 45px; background-position: 0 -20px}
				.nav .nav-menu a:focus span, 
				.nav .nav-menu a:hover span,
				.nav .nav-menu a:active span,
				.nav .nav-menu a.active span {background-position: -165px -20px}
			.nav .nav-kitchen a {width: 132px}
				.nav .nav-kitchen span {width: 132px; background-position: 0 -40px}
				.nav .nav-kitchen a:focus span, 
				.nav .nav-kitchen a:hover span,
				.nav .nav-kitchen a:active span,
				.nav .nav-kitchen a.active span {background-position: -165px -40px}
			.nav .nav-bookings a {width: 165px}
				.nav .nav-bookings span {width: 165px; background-position: 0 -60px}
				.nav .nav-bookings a:focus span, 
				.nav .nav-bookings a:hover span,
				.nav .nav-bookings a:active span,
				.nav .nav-bookings a.active span {background-position: -165px -60px}
			.nav .nav-contact a {width: 72px}
				.nav .nav-contact span {width: 72px; background-position: 0 -80px}
				.nav .nav-contact a:focus span, 
				.nav .nav-contact a:hover span,
				.nav .nav-contact a:active span,
				.nav .nav-contact a.active span {background-position: -165px -80px}
			.nav .nav-cocktailbar a {width: 102px}
				.nav .nav-cocktailbar span {width: 102px; background-position: 0 -100px}
				.nav .nav-cocktailbar a:focus span, 
				.nav .nav-cocktailbar a:hover span,
				.nav .nav-cocktailbar a:active span,
				.nav .nav-cocktailbar a.active span {background-position: -165px -100px}
			.nav .nav-tastingmenu a {width: 100px}
				.nav .nav-tastingmenu span {width: 100px; background-position: 0 -120px}
				.nav .nav-tastingmenu a:focus span, 
				.nav .nav-tastingmenu a:hover span,
				.nav .nav-tastingmenu a:active span,
				.nav .nav-tastingmenu a.active span {background-position: -165px -120px}
			.nav .nav-events a {width: 53px}
				.nav .nav-events span {width: 53px; background-position: 0 -140px}
				.nav .nav-events a:focus span, 
				.nav .nav-events a:hover span,
				.nav .nav-events a:active span,
				.nav .nav-events a.active span {background-position: -165px -140px}

.content {width: 966px; margin: 0 auto}
.content-1 {float: left; width: 534px; height: 600px; background: transparent url(../images/content-bg.png) 0 0 no-repeat}
.content-2 {float: right; width: 400px; height: 600px; background: transparent url(../images/content-bg.png) 0 0 no-repeat}

.footer {position: fixed; margin: 0 auto; width: 100%; height: 16px; bottom: 0; z-index: 1}
	.footer-inner {width: 966px; margin: 0 auto}
	.footer p {margin: 0}
	.footer a {display: block; text-indent: -9999em; width: 46px; height: 16px; margin: 0 0 0 auto; background: transparent url(../images/logo-funke.png) 0 0 no-repeat}

.page {height: 900px; padding-top: 67px}

/* =heading */

.heading {font-family: "century gothic", arial, sans-serif; text-transform: uppercase; margin: .5em 0}
.heading a {text-decoration: none}
  .heading a:focus,
  .heading a:hover {text-decoration: underline}
h2.heading {color: #f02b33; font-size: 2.5em}
h3.heading {color: #f02b33; font-size: 1.5em}
h4.heading {color: #f02b33; font-size: 1.5em}

/* =panel */

.panel-header .heading {height: 40px; text-align: right; font-size: 1.167em; margin: 0}

.content-1 .panel {padding: 10px 10px 10px 17px}
.content-2 .panel {width: 400px; height: 600px}

/* =home */

body.home {}

body.home #content {z-index: 5}
body.home #content-inner {position: absolute; width: 100%; height: 629px}
body.home .home {position: relative; width: 932px; margin: 0 auto; padding: 0; height: 629px}
body.home #logo-flash {position: absolute; left: 50%; top: 50%; margin-left: -166px; margin-top: -150px}
body.home .site-logo {display: none}
body.home p {margin: 0}
body.home .link-site {position: absolute; display: block; width: 246px; height: 47px; background: transparent url(../images/upstairs-downstairs.gif) 0 0 no-repeat; text-indent: -9999em}
body.home .link-restaurant {top: 7px; right: 0; background-position: 0 -47px; width: 219px}
body.home .link-tiki {bottom: 14px; left: 0}

/* =restaurant */

body.restaurant {background: #271906 url(../images/restaurant-bg.gif) fixed 50% 0 repeat}

body.restaurant .link-tiki {position: relative}
body.restaurant .link-tiki a {position: absolute; top: -9px; right: 12px; display: block; text-indent: -9999em; width: 225px; height: 41px; background: transparent url(../images/upstairs-downstairs.gif) 0 -94px no-repeat; text-indent: 9999px}
body.restaurant .link-tiki a span {display: none}

/* =cocktail */

body.cocktail {background: #271906 url(../images/tiki-bg.jpg) fixed 50% 0 repeat}

body.cocktail .link-restaurant {position: relative}
body.cocktail .link-restaurant a {position: absolute; top: -9px; right: 12px; display: block; text-indent: -9999em; width: 199px; height: 41px; background: transparent url(../images/upstairs-downstairs.gif) 0 -135px no-repeat; text-indent: 9999px}
body.cocktail .link-restaurant a span {display: none}

/* =scroller */

.scroller {padding: 10px}
	.scroller .module-content {padding: 0; margin-bottom: 2px; width: 380px; height: 579px; overflow: hidden; position: relative}
		.scroller .module-content img {display: block}
		.scroller .module-content ul {position: absolute; top: 0; left: 0; margin: 0}
			.scroller .module-content ul li {margin: 0; padding: 0; width: 380px; height: 579px; list-style: none; float: left}
	.scroller .module-footer {height: 48px}

.scroller .module-footer {position: relative}
	.scroller .module-footer a {position: absolute; top: -360px; display: block; width: 36px; height: 73px; background: transparent url(../images/button-scroller.png) 0 0 no-repeat; text-indent:-99999em; cursor: pointer; z-index: 3}
	
.scroller a#prevControl {left: 0; background-position: 0 -73px; z-index: 5}
	/*.scroller a#prevControl:focus, 
	.scroller a#prevControl:hover, 
	.scroller a#prevControl:active {background-position: 0 -13px}*/
.scroller a#nextControl {right: 0; background-position: 0 0; z-index: 5}
	/*.scroller a#nextControl:focus, 
	.scroller a#nextControl:hover, 
	.scroller a#nextControl:active {background-position: -39px -13px}*/
	
.site {position: static!important}