@charset "UTF-8";
/* 
================================================== */
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, ins, kbd, q, s, samp, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form,label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
display: block; }
body {line-height: 1;}
ol, ul {list-style: none;}
blockquote, q {quotes: none;}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;}
table {border-collapse: collapse; border-spacing: 0;}
/* #Basic Styles
================================================== */
body {font: 14px/21px 'LatoRegular', Tahoma, Arial, sans-serif; color: #222; background-image: url(../assets/bg960.4.jpg);
-webkit-font-smoothing: antialiased; /* Fix for webkit rendering */ -webkit-text-size-adjust: 100%;}	
/* #Typography I
================================================== */
h1 {color: #FFCC00; font-family: "Comic Sans MS", cursive; font-weight: normal;	font-size: 46px; line-height: 50px; margin-bottom: 14px;}
h1 a {font-weight: inherit;}
h2 {color: #181818; text-shadow: 0px 2px 3px #ccc; font-family: "Georgia", "Times New Roman", Helvetica, Arial, sans-serif;
font-weight: normal; font-size: 35px; line-height: 40px; margin-bottom: 10px;}
h2 a {font-weight: inherit;}
h3 {color: #181818;	text-shadow: 0px 2px 3px #ccc; font-family: "Georgia", "Times New Roman", Helvetica, Arial, sans-serif;
font-weight: normal; font-size: 28px; line-height: 34px; margin-bottom: 8px;}
h3 a {font-weight: inherit;}
h4 {color: #181818; text-shadow: 0px 2px 3px #ccc; font-family: "Georgia", "Times New Roman", Helvetica, Arial, sans-serif;
font-weight: normal; font-size: 21px; line-height: 30px; margin-bottom: 4px;}
h4 a {font-weight: inherit;}
h5 {color: #FFCC00; font-family: "Georgia", "Times New Roman", Helvetica, Arial, sans-serif; font-weight: normal;
font-size: 17px; line-height: 24px;}
h5 a {font-weight: inherit;}
h6 {color: #804000; text-shadow: 0px 2px 3px #ccc; font-family: "Georgia", "Times New Roman", Helvetica, Arial, sans-serif; font-weight: normal; font-size: 14px; line-height: 21px; margin-bottom: 6px;}
h6 a {font-weight: inherit;}
h7 {color: #181818; text-shadow: 0px 2px 3px #ccc; font-family: "Georgia", "Times New Roman", Helvetica, Arial, sans-serif;
font-weight: normal; font-size: 12px; line-height: 19px; margin-bottom: 10px;}
h7 a {font-weight: inherit;}
/* #Typography II
================================================== */	
.subheader {color: #777;}
p {margin: 2px 0 20px 0;}
p img {margin: 0;}
p.lead {font-size: 21px; line-height: 27px; color: #777;}
em {font-style: italic;}
strong {font-weight: bold; color: #333;}
/*	Blockquotes  */
blockquote, blockquote p {font-size: 17px; line-height: 24px; color: #444; font-style: italic;}
blockquote {margin: 0 0 20px; padding: 9px 20px 0 19px; border-left: 1px solid #ddd;}
blockquote cite {display: block; font-size: 12px; color: #555;}
blockquote cite:before {content: "\2014 \0020";}
blockquote cite a, blockquote cite a:visited, blockquote cite a:visited {color: #555;}
hr {border: dashed #999; border-width: 1px 0 0; clear: both; margin: 10px 0 10px;}
/* #Links
================================================== */
a, a:visited {color: #50724B; text-decoration: none; outline: 0;}
a:hover, a:focus {color: #804000;}
p a, p a:visited {line-height: inherit;}
.underline { text-decoration:underline;}
/* #Lists
================================================== */
ul, ol {margin-bottom: 20px;}
ul {list-style: none outside;}
ol {list-style: decimal;}
ol, ul.square, ul.circle, ul.disc {margin-left: 30px;}
ul.square {list-style: square outside;}
ul.circle {list-style: circle outside;}
ul.disc {list-style: disc outside;}
ul ul, ul ol, ol ol, ol ul {margin: 4px 0 5px 30px; font-size: 90%;}
ul ul li, ul ol li, ol ol li, ol ul li {margin-bottom: 6px;}
li {line-height: 18px; margin-bottom: 12px;}
ul.large li {line-height: 21px;}
li p {line-height: 21px;}
/* #Images
================================================== */
img, img.scale-with-grid { outline: 0; max-width: 100%; height: auto; }
.image {margin: 2px 0 10px 0;}
img {background: rgba(255,255,255,0.3);}
img:hover {background: rgba(255,255,255,1.0);}
.border, .hide {display: block; padding: 2px; background: rgba(255,255,255,0.3); -moz-box-shadow: 0 1px 5px #666; 		-webkit-box-shadow: 0 1px 5px #666; box-shadow: 0 1px 5px #666;	transition:all 0.2s ease-in; -webkit-transition:all 0.2s ease-in; 
-moz-transition:all 0.2s ease-in; -o-transition:all 0.2s ease-in;}
.border:hover {-webkit-border-radius: 4px; -moz-border-radius: 4px; background: #FFF; -moz-box-shadow: 0 1px 7px #333; -webkit-box-shadow: 0 1px 7px #333; box-shadow: 0 1px 7px #333;}
.flag {display:inline; padding:0; margin-bottom:0;}
.loading {background:url(../assets/loader.gif) no-repeat center;}
/* #swf
================================================== */
.media {padding: 2px; border: 1px solid #666666; height: 480px; width: 617px; margin-right: auto; margin-left: auto;}
.t_center { text-align: center; }
/* #Slides
================================================== */
.rslides, .pano {position: relative; list-style: none; overflow: hidden; width: 100%; padding: 0; margin: 0;}
.rslides li {position: absolute; display: none; width: 100%; left: 0; top: 0;}
.rslides li:first-child {position: relative; display: block; float: left;}
.rslides img {display: block; height: auto; float: left; width: 100%; border: 0;}
.callbacks_container {margin-bottom: 4px; position: relative; float: left; width: 100%;}
.callbacks {position: relative; list-style: none; overflow: hidden; width: 100%; padding: 0; margin: 0;}
.callbacks li {position: absolute; width: 100%; left: 0; top: 0;}
.callbacks img {display: block; position: relative; z-index: 1; height: auto; width: 100%; border: 0;}
.callbacks .caption {display: block; position: absolute; z-index: 2; font-size: 14px; text-shadow: none; color: #fff; 		background: #000; background: rgba(0,0,0, .6); left: 0; right: 0; bottom: 0; padding: 10px 20px; margin: 0; max-width: none;}																							
/* #Misc
================================================== */
.remove-bottom {margin-bottom: 0 !important;}
.half-bottom {margin-bottom: 10px !important;}
.add-bottom {margin-bottom: 20px !important;}
.remove-h3 {padding-top: 42px !important;}
.remove-h4 {padding-top: 33px !important;}

#footer .colTop { padding-top: 20px !important;}
#footer b { font-weight:bold; }

/* #Header
================================================== */
#pondok-header {width: 100%; margin-bottom: 20px; background:url(../assets/logo2.png) no-repeat; background-position: 29% 38%;}
.half-width {width: 47%;}
.half-width1 {width:53%;}
.left {float: left;}
.right {float: right; font-family: "Comic Sans MS", cursive; font-size: 80%;}
.clearfix {clear: both;}
.header-links a, .header-links a:visited {color: #000; text-decoration: none; outline: 0;}
.header-links a:hover, .header-links a:focus {color: #fff;}
.header-links a {background: url('../assets/pattern.png') repeat 0 0 #FFCC00; display: inline-block; margin: 1px; 
padding: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px;}
.header-links a {text-decoration: none; display: inline-block; margin-top:10%;
/*TRANSISTIONS*/
-webkit-transition: background 0.5s ease; -moz-transition: background 0.5s ease; -o-transition: background 0.5s ease;
-ms-transition: background 0.5s ease; -moz-transition: background 0.5s ease;}
.header-links a:hover {background: url('../assets/pattern.png') repeat 0 0 #FFCC00;}
/* #About
================================================== */
#about {margin-bottom: 10px; padding-top: 10px; background: url('../assets/pattern.png') repeat 0 0 #D3CF96; -moz-border-radius: 4px; -webkit-border-radius: 4px;}
#about img{padding:0;}	
/* #Class
================================================== */
#class {width: 100%; margin-bottom: 10px; padding-top: 10px; background: url('../assets/pattern.png') repeat 0 0 #C1C0A4; -moz-border-radius: 4px; -webkit-border-radius: 4px;}	
#class img {height: 60%; margin-top: 10px; overflow: hidden;}
#class2 {width: 100%; margin-bottom: 10px; padding-top: 10px; background: url('../assets/pattern.png') repeat 0 0 #D3CF96; -moz-border-radius: 4px; -webkit-border-radius: 4px;}
#class2 img {height: 60%; margin-bottom: 10px; overflow: hidden;}
/* #Facility
================================================== */
#facility {width: 100%; margin-bottom: 10px; padding-top: 10px; background: url('../assets/pattern.png') repeat 0 0 #CCD7A8; -moz-border-radius: 4px; -webkit-border-radius: 4px;} 
#facility img {height: 60%; margin-bottom: 10px; overflow: hidden;}
/* #Restaurant
================================================== */
#restaurant {width: 100%; margin-bottom: 10px; padding: 10px 0; background: url('../assets/pattern.png') repeat 0 0 #C8D3A0; -moz-border-radius: 4px; -webkit-border-radius: 4px;}	
#restaurant img {height: 60%; overflow: hidden;}
/* #Spa
================================================== */
#spa {width: 100%; margin-bottom: 10px; padding: 10px 0; background: url('../assets/pattern.png') repeat 0 0 #C8D3A0;
-moz-border-radius: 4px; -webkit-border-radius: 4px;}
#spa img {height: 60%; overflow: hidden;}
/* #Werner
================================================== */
#werner {width: 100%; margin-bottom: 10px; padding: 10px 0; background: url('../assets/pattern.png') repeat 0 0 #C8DAF0; -moz-border-radius: 4px; -webkit-border-radius: 4px;}
#werner img {height:60%; overflow: hidden;}
#wernerlogo {background: url(../assets/wernermini.png) no-repeat; background-position: 70% 1%;}
/* #Dive
================================================== */
#dive {width: 100%;	margin-bottom: 10px; padding: 10px 0; background: url('../assets/pattern.png') repeat 0 0 #C8DAF0;
-moz-border-radius: 4px; -webkit-border-radius: 4px;}
#dive img {height:60%; overflow: hidden;}
#divelogo {background: url(../assets/wernermini.png) no-repeat; background-position: 73% 1%;}
/* #Blau
================================================== */
#blau {width: 100%; margin-bottom: 10px; padding: 10px 0; background: url('../assets/pattern.png') repeat 0 0 #C8DAF0;
-moz-border-radius: 4px; -webkit-border-radius: 4px;}
#blau img {height:70%; margin-bottom: 10px; overflow: hidden;}
#blaulogo {background: url(../assets/wernermini.png) no-repeat; background-position: 37% 5%;}
/* #Media
================================================== */
#media {width: 100%; margin-bottom: 10px; padding-top: 10px; background: url('../assets/pattern.png') repeat 0 0 #E4DE8F; -moz-border-radius: 4px; -webkit-border-radius: 4px;}
#media img {height:60%; margin-bottom: 20px; overflow: hidden;}
/* #Gallery
================================================== */
#gallery {width: 100%; margin-bottom: 10px; padding: 10px 0; background: url('../assets/pattern.png') repeat 0 0 #E4DE8F; -moz-border-radius: 4px; -webkit-border-radius: 4px;} 	
#gallery img {height: 100%; margin-top: 10px; overflow: hidden;}
#gallery a, #gallery a:visited {color: #000; display: block; text-decoration: none; text-align: center;}
#gallery a:hover {color: #50724B;}
#gallery1 {width: 100%; margin-bottom: 10px; padding-top: 10px; padding-left: 20px; background: url('../assets/pattern.png') repeat 0 0 #DCD36E; -moz-border-radius: 4px; -webkit-border-radius: 4px;}
/*Container style
================================================== */
.container2 {width: 100%;}
/*Gallery styles
================================================== */
.galleryItem {float: left; color: black; font: 10px/1.5 Verdana, Helvetica, sans-serif; margin: 1% 1% 10px 1%;}
.galleryItem img {max-width: 100%; height: 76px;}
/* #Gb
================================================== */
#gb {width: 100%; margin-bottom: 10px; padding: 10px 0; background: url('../assets/pattern.png') repeat 0 0 #C9CFA5;
-moz-border-radius: 4px; -webkit-border-radius: 4px;}
#gb img {height: 100%; margin-top: 10px; overflow: hidden;}
#gb a, #gb a:visited {color: #000; display: block; text-decoration: none; text-align: center;}
#gb a:hover {color: #50724B;}
#gb1 {width: 100%; margin-bottom: 10px; padding-top: 10px; padding-left: 20px; background: url('../assets/pattern.png') repeat 0 0 #C9CFA5; -moz-border-radius: 4px; -webkit-border-radius: 4px;}
/* #Panorama
================================================== */
#panorama {width: 100%; margin-bottom: 10px; padding: 10px 0; background: url('../assets/pattern.png') repeat 0 0 #C9CFA5; -moz-border-radius: 4px; -webkit-border-radius: 4px;}
#panorama img {padding: 0; margin: 0;}
/* #Videos
================================================== */
#videos {width: 100%; margin-bottom: 10px; padding: 10px 0; background: url('../assets/pattern.png') repeat 0 0 #E4DE8F; -moz-border-radius: 4px; -webkit-border-radius: 4px;}
#videos img {height: 100%; margin-top: 10px; overflow: hidden;}
.embed-container {position: relative; padding-bottom: 56.25%; padding-top: 30px; height: 0; overflow: hidden;}
.embed-container iframe, .embed-container object, .embed-container embed {position: absolute; top: 0; left: 0; width: 100%; 		height: 100%;}
/* Booking
================================================== */
#light {width: 100%; margin-bottom: 10px; padding-top: 10px; background: url('../assets/pattern.png') repeat 0 0 #FAFA80; -moz-border-radius: 4px; -webkit-border-radius: 4px;}
#light a, #light a:visited {color: #000; display: block; text-decoration: none; text-align: center;}
#light a:hover {color: #804000;}
/* #Rates
================================================== */
#rates {}
.rates {width: 100%; margin-bottom: 10px; padding-top: 10px; text-align: center; background: url('../assets/pattern.png') repeat 0 0 #FAFA80; -moz-border-radius: 4px; -webkit-border-radius: 4px;}
/* #Others
================================================== */
#others {width: 100%; margin-bottom: 10px; padding-top: 10px; background: url('../assets/pattern.png') repeat 0 0 #D9E9D6; -moz-border-radius: 4px; -webkit-border-radius: 4px;}
#others img {height: 60%; margin-bottom: 10px; overflow: hidden;}
/* #Bali Info
================================================== */
#balinfo {width: 100%; margin-bottom: 10px; padding: 10px 0; background: url('../assets/pattern.png') repeat 0 0 #D9E9D6; -moz-border-radius: 4px; -webkit-border-radius: 4px;}
#balinfo2 {width: 100%; margin-bottom: 10px; padding: 10px 0; background: url('../assets/pattern.png') repeat 0 0 #D9E9D6; -moz-border-radius: 4px; -webkit-border-radius: 4px;}
#balinfo img, #balinfo2 img {height: 60%; overflow: hidden;}
/* #Pemuteran
================================================== */
#pemuteran {width: 100%; margin-bottom: 10px; padding: 10px 0; background: url('../assets/pattern.png') repeat 0 0 #D9E9D6; -moz-border-radius: 4px; -webkit-border-radius: 4px;}
#pemuteran1 {width: 100%; margin-bottom: 10px; padding: 10px 0; background: url('../assets/pattern.png') repeat 0 0 #D9E9D6; -moz-border-radius: 4px; -webkit-border-radius: 4px;}
#pemuteran img, #pemuteran1 img {height: 60%; overflow: hidden;} 
/* #Touren
================================================== */
#touren, #tours {width: 100%; margin-bottom: 10px; padding-top: 10px; background: url('../assets/pattern.png') repeat 0 0 #D9E9D6; -moz-border-radius: 4px; -webkit-border-radius: 4px;}
#touren img, #tours img {height: 60%; overflow: hidden;}
/* #Info
================================================== */
#info {padding-top: 10px; /*background: rgba(255,255,255,1.0); -moz-border-radius: 4px; -webkit-border-radius: 4px; 
border: 1px solid #999;*/}
#info span.big {display: block; color: #FFF; font-size: 28px; font-family: "Comic Sans MS", cursive;
line-height: 100%; margin-bottom: 10px;}
#info a, #info a:visited {color: #FFF; display: block; text-decoration: none; text-align: center;}
#info a:hover {color: #50724B;}
#info h3 {color: #FFCC00; text-shadow:none; text-align: center; font-family: "Georgia", "Times New Roman", Helvetica, Arial, sans-serif; font-weight: normal; font-size: 26px; line-height: 34px; margin-bottom: 2px;}
#info p {color: #FFCC00; text-align: center;}
/* #Footer
================================================== */
#bottombar {width:100%; height:10px; color:#fff; background: #FFCC00;}
#footer {margin: 0 auto; padding: 0;}
#footer p {color:#FFCC00;}
#footer span.big {display: block; color: #FFF; font-size: 28px; font-family: "Comic Sans MS", cursive;
line-height: 100%; margin-bottom: 10px;}
#footer li {text-align: left;}
#footer a {color:#FFF;} 	
#footer a:hover {color:#FFCC00;}
.footer {width:100%; background: url('../assets/pattern.png') repeat 0 0;}
.white {color:#FFF;}
/* #Scroll to top
================================================== */
div.scrollToTop{position: fixed; right: 20px; bottom: 20px; display: none; width: 50px; padding: 10px; z-index:1;
-moz-border-radius: 4px; -webkit-border-radius: 4px;}
div.scrollToTop a{font: 12px "Lucida Grande"; text-decoration: none;}
div.scrollToTop:hover {}

/************************************************************************************
PAGE NAVIGATION
*************************************************************************************/
.pagenav {clear: both; padding-bottom: 20px; text-align: center; padding: 30px 0 20px;}
.pagenav a, .pagenav span {min-width: 28px; min-height: 22px; line-height: 100%; text-decoration: none; text-align: center;
margin: 0 3px; padding: 6px 0 0; vertical-align: middle; display: inline-block; zoom:1; *display:inline;
-webkit-border-radius: 10em; -moz-border-radius: 10em; border-radius: 10em;}
.pagenav a {color: #ccc; text-decoration: none; background: #222; border: solid 1px #111; background: -moz-linear-gradient(top, #333333 0%, #000000 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#333333), color-stop(100%,#000000)); background: -webkit-linear-gradient(top, #333333 0%,#000000 100%);
background: -o-linear-gradient(top, #333333 0%,#000000 100%); background: -ms-linear-gradient(top, #333333 0%,#000000 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#333333', endColorstr='#000000',GradientType=0 );
background: linear-gradient(top, #333333 0%,#000000 100%);
-webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.15), 0 1px 2px rgba(0,0,0,.7);
-moz-box-shadow: inset 0 1px 0 rgba(255,255,255,.15), 0 1px 2px rgba(0,0,0,.7);
box-shadow: inset 0 1px 0 rgba(255,255,255,.15), 0 1px 2px rgba(0,0,0,.7);}
.pagenav a:hover {background: #000; text-decoration: none;}
.pagenav .current {color: #666; background: #222; text-decoration: none; 
-webkit-box-shadow: inset 0 1px 0 rgba(0,0,0,.8), inset 0 -1px 0 rgba(255,255,255,.3);
-moz-box-shadow: inset 0 1px 0 rgba(0,0,0,.8), inset 0 -1px 0 rgba(255,255,255,.3);
box-shadow: inset 0 1px 0 rgba(0,0,0,.8), inset 0 -1px 0 rgba(255,255,255,.3);}
/*
ColorBox Core Style:
The following CSS is consistent between example themes and should not be altered.
*/
#colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden;}
#cboxOverlay{position:fixed; width:100%; height:100%;}
#cboxMiddleLeft, #cboxBottomLeft{clear:left;}
#cboxContent{position:relative;}
#cboxLoadedContent{overflow:auto;}
#cboxTitle{margin:0;}
#cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%; height:100%;}
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;}
.cboxPhoto{float:left; margin:auto; border:0; display:block; max-width: none;}
.cboxIframe{width:100%; height:100%; display:block; border:0;}
#colorbox, #cboxContent, #cboxLoadedContent{box-sizing:content-box;}
/* 
User Style:
Change the following styles to modify the appearance of ColorBox.  They are
ordered & tabbed in a way that represents the nesting of the generated HTML.
*/
#cboxOverlay{background:url(images/overlay.png) repeat 0 0;}
#colorbox{}
#cboxContent{margin-top:20px;}
.cboxIframe{background:#fff;}
#cboxError{padding:50px; border:1px solid #ccc;}
#cboxLoadedContent{border:5px solid #000; background:#111;}
#cboxTitle{position:absolute; top:-20px; left:0; color:#ccc;}
#cboxCurrent{position:absolute; top:-20px; right:0px; color:#ccc;}
#cboxSlideshow{position:absolute; top:-20px; right:90px; color:#fff;}
#cboxPrevious{position:absolute; top:50%; left:5px; margin-top:-32px; background:url(images/controls.png) no-repeat top left; width:28px; height:65px; text-indent:-9999px;}
#cboxPrevious:hover{background-position:bottom left;}
#cboxNext{position:absolute; top:50%; right:5px; margin-top:-32px; background:url(images/controls.png) no-repeat top right; width:28px; height:65px; text-indent:-9999px;}
#cboxNext:hover{background-position:bottom right;}
#cboxLoadingOverlay{background:#000;}
#cboxLoadingGraphic{background:url(images/loading.gif) no-repeat center center;}
#cboxClose{position:absolute; top:5px; right:5px; display:block; background:url(images/controls.png) no-repeat top center; width:38px; height:19px; text-indent:-9999px;}
#cboxClose:hover{background-position:bottom center;}