/* ,,, /'^'\ ( o o ) -------------------------------------------------------oOOO--(_)--OOOo------ Main Style Sheet for La Kaza de Pranburi Author: Joost Kiens Author website: www.impendulo.net Author email: joost(at)impendulo(dot)net Graphic design by Joost Kiens ___Content___ 1. Reset 2. Typography 3. Form elements 4. Tables 5. General Elements & Layout 6. Branding & Main-nav 7. Page specific 8. Site Info 9. Overrides ___Colors___ ------------------------------------------------------------------------ OTHER STYLESHEETS - print.css - lteie7.css - ie7.css ------------------------------------------------------------------------ TESTED ON - FF3 (Linux, Windows) - FF2 (Linux, Windows) - Opera 9.6 (Linux, Windows) - Konqueror (Linux) - Lynx (Linux) - Safari ?? (Windows) - Chrome ?? (Windows) - MSIE 8 (Windows) - MSIE 7 (Windows) - MSIE 6 (Windows) .oooO ( ) Oooo. ---------------------------------------------------------\ (----( )------- \_) ) / (_/ */ /******************************************************************* RESET ******************************************************************** /*Reset browser CSS based on http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/ and the Yahoo fonts reset css*/ body {line-height: 1.6em;} 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-family: inherit; vertical-align: baseline;} body{font:13px/1.231 tahoma, verdana, arial, helvetica, sans;color: #666;background: #fefefe; letter-spacing: 0.005em; *font-size:small;*font:x-small;} p, li {line-height: 1.65em;} /* remember to define focus styles! */ :focus {outline: 0;} 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; color: #fefefe;} blockquote:before, blockquote:after, q:before, q:after {content: "";} blockquote, q {quotes: "" "";} a {text-decoration: none;} select,input,button,textarea{font:99% arial,helvetica,clean,sans-serif;}table{font-size:inherit;font:100%;}pre,code,kbd,samp,tt{font-family:monospace;*font-size:108%;line-height:100%;} h3{font-weight: normal;} /*********************************************************************** TYPOGRAPHY ***********************************************************************/ /*Make sure you don't overwrite the Reset css, change the reset css instead*/ #content {color: #fefefe; background: #160404;} h2 {font: italic 2em georgia, times, serif;} h2 span, .prices {color: #fa8b00;} a{text-decoration: none;} a:link, a:visited {color: #fa8b00;} /*a:visited {color: #ccc;} activate later*/ a:active {color: #fefefe; text-decoration: underline;} a:hover {color: #ccc; text-decoration: underline;} #language-switcher a, h2 a{color: #fefefe;} h2 a:link{color: #fefefe; text-decoration: none;} h2 a:visited{color: #fefefe; text-decoration: none;} h2 a:hover{color: #fefefe; text-decoration: none;} h2 a:active{color: #fefefe; text-decoration: none;} #site-info p {font: 0.85em;} div.hr { height: 32px; background: #160404 url(../images/hr.gif) no-repeat scroll center;} div.hr hr {display: none;} address{font-style: normal;} .errors {color: #fa8b00;} /*********************************************************************** FORM ELEMENTS ***********************************************************************/ fieldset {clear: both;} legend {padding: 0 0 1.286em; font-size: 1.167em; font-weight: 700;} fieldset fieldset legend {padding: 0 0 1.5em; font-size: 1em;} * html legend {margin-left: -7px;} /* ie6 */ *+html legend {margin-left: -7px;} /* ie7 */ form .field, form .buttons {clear: both; margin: 0 0 1.5em;} form .field label {display: block;} form ul.fields {margin: 0 0 1.5em; padding: 0;} form ul.fields li {list-style-type: none; margin: 0;} form ul.inline li, form ul.inline label {display: inline;} form ul.inline li {padding: 0 .75em 0 0;} input.radio, input.checkbox {margin: 3px; vertical-align: bottom; cursor: pointer} label, button, input.submit, input.image, button {cursor: pointer;} * html input.radio, * html input.checkbox {margin: 0; vertical-align: middle;} /* ie6 */ *+html input.radio, *+html input.checkbox {margin: 0; vertical-align: middle;} /* ie7 */ textarea {overflow: auto;} input.input-box, input.password, textarea, select {margin: 0 0 6px 0; font: 1em/1.3 Helvetica, Arial, "Liberation Sans", "Bitstream Vera Sans", sans-serif; vertical-align: bottom;} input.input-box, input.password, textarea {border: 1px solid #444; padding: 2px;} /* horizontal layout */ form.horizontal .field {padding-left: 150px;} form.horizontal .field label {display: inline; float: left; width: 140px; margin-left: -150px;} input.input-box, button, textarea.input-box {border: 1px solid #777; background: #333; color: #fefefe;} button {padding: 0px 4px; margin: 3px 0; height: 24px; line-height: 24px; background: url(../images/main-nav-hover-bg.gif); -moz-border-radius:3px; -webkit-border-radius:3px; behavior:url(border-radius.htc);} /*********************************************************************** TABLES ***********************************************************************/ /*********************************************************************** GENERAL ELEMENTS AND LAYOUT ***********************************************************************/ body {background: #fefefe url(../images/body-bg.png) repeat-x; text-align: center;} .clear-both{clear: both;} #search-bar {width: 960px; height: 32px; text-align: left; margin: 0 auto; overflow: auto; background: #160404;} #search-form{margin: 4px 0 0 32px; float: left;} #search-form input.input-box, #search-form button{margin: 0;} #login-link {float: right;margin: 6px 32px 0 0px;} #login-link a {color: #666;} #language-switcher {margin: 6px 32px 0 0px; float: right; visibility: hidden; /*Take this out when the translation is done. */} #login-form-slide {display:none; color: #fefefe; z-index: 10; width: 350px; float: right; border: 1px solid #333; border-width: 0 1px 1px 1px; position: absolute;background: #160404; margin-left: 600px; top: 32px;} #login-form-slide a#close-login-form-slide{position: relative; top: 26px; left: 250px;} #wrapper {width: 960px; text-align: left; margin: 0 auto;} #home-gallery img {border: 1px solid #160404; border-width: 0 1px;} #main-content {background: #160404; overflow: auto; height: 100%; padding: 16px; min-height:150px; } #site-info {text-align: center; background: #160404;} #site-info address{padding: 8px 0 0 0;} #content {margin-bottom: 64px;padding-bottom: 32px;background-image: url(../images/content-bottom.gif);background-repeat:no-repeat;background-position:bottom;} form.login-form {margin: 16px;} form.login-form fieldset.field {margin-top: 16px;} /*********************************************************************** BRANDING & MAIN NAV ***********************************************************************/ #branding {margin-left: 32px;} #main-nav {background: url(../images/content-top.gif) no-repeat; height: 32px; clear:both; float:left; width:100%; overflow:hidden;} #main-nav ul{padding:0; margin:0 auto; float:left; position:relative; left:50%;} #main-nav ul li {float:left; position:relative; right:50%;} #main-nav ul li a {font-size: 1.4em; width:auto; display:block; padding:4px 32px;} #main-nav ul li a.active {color: #fefefe;} #main-nav ul li a:hover {color: #fefefe; text-decoration: none; background: url(../images/main-nav-hover-bg.gif) repeat-x 0 1px} /*********************************************************************** PAGE SPECIFIC ***********************************************************************/ /*Home page*/ #main-content .home-sub-category {float: left; width: 200px; margin: 0 16px;} #main-content .home-sub-category img {margin: 8px 4px; padding: 12px 16px; border: 1px solid #333;} /*Contact Page*/ .email-form {margin: 0 16px; float: left; width: 432px;} .map {margin: 0 16px; float: left; width: 432px;} .map h2 {margin-bottom: 16px;} /*Activity page*/ div.activities {margin: 0 16px;} table.list-activities {} table.list-activities td {padding: 16px 32px 16px 0; vertical-align: top;} table.list-activities td.title {width: 200px;} table.list-activities tr {border-bottom: 1px solid #fefefe;} /*Rooms page*/ #main-content .rooms-sub-category {float: left; width: 276px; margin: 0px 16px 32px 16px;} #main-content .rooms-sub-category .thumbscontainer {width: 100%; height: 115px; margin-left: -6px;} #main-content .rooms-sub-category .thumbscontainer ul.thumbs li{margin-right: 0px} table.show-prices {margin: 32px 16px; clear:both} table.show-prices th, table.show-prices td {padding: 8px 16px;} table.show-prices td { background: #333; border: 1px solid #121212; border-width: 0 1px 1px 0;} table.show-prices th.room-type { background: #fa8b00; border: 1px solid #121212; border-width: 0 1px 1px 0; color: #121212; font-weight: bold;} table.show-prices th.time-type h3 {font: italic 1.6em georgia, times, serif;} .rates-currency {margin-left: 32px;} /*From MaxiGallery Default.css -- For pics on rooms page and gallery page*/ ul.thumbs li {list-style: none; float: left; display: block; list-style-image: none !important; margin: 8px 8px 0 8px;} ul.thumbs {list-style: none; margin: 0; padding: 0; clear: both;} ul.thumbs li img {border: none; margin: 0 auto !important;} ul.thumbs li a {background: none !important; text-decoration: none; border: 0;} ul.thumbs li p {overflow: hidden;} .thumbs .clearboth {clear: both;} /*Gallery page*/ #gallery-adv {width: 500px; float: right; overflow: hidden; margin: 16px;} #thumbs-adv {float: right; width: 360px;margin: 11px 16px 16px 0px;} #thumbs-adv li {margin: auto;} #thumbs-adv a.thumb { display: block;width: 110px; height: 100px; overflow: hidden;} #thumbs-adv a.thumb img {position: relative; right: 15px;} .play {margin-left: 200px;} .nav-controls{overflow: hidden; height: 1%; margin-top: -1.2em;} .nav-controls .next{float: right;} .nav-controls .prev{float: left;} /*About page*/ .textbox{margin: 0 16px 16px 16px;} .textbox p {margin: 8px 0;} .textbox ul{list-style-type: disc; margin-left: 32px;} .textbox img {float: right; margin: 16px 0 16px 16px;} /*********************************************************************** OVERRIDES ***********************************************************************/ /*********************************************************************** PLUGINS ***********************************************************************/ /** * jQuery lightBox plugin * This jQuery plugin was inspired and based on Lightbox 2 by Lokesh Dhakar (http://www.huddletogether.com/projects/lightbox2/) * and adapted to me for use like a plugin from jQuery. * @name jquery-lightbox-0.5.css * @author Leandro Vieira Pinho - http://leandrovieira.com * @version 0.5 * @date April 11, 2008 * @category jQuery plugin * @copyright (c) 2008 Leandro Vieira Pinho (leandrovieira.com) * @license CC Attribution-No Derivative Works 2.5 Brazil - http://creativecommons.org/licenses/by-nd/2.5/br/deed.en_US * @example Visit http://leandrovieira.com/projects/jquery/lightbox/ for more informations about this jQuery plugin */ #jquery-overlay {position: absolute;top: 0; left: 0;z-index: 90;width: 100%;height: 500px;} #jquery-lightbox {position: absolute; top: 0; left: 0; width: 100%; z-index: 100; text-align: center; line-height: 0;} #jquery-lightbox a img {border: none;} #lightbox-container-image-box {position: relative; background-color: #fff;width: 250px;height: 250px;margin: 0 auto;} #lightbox-container-image {padding: 10px;} #lightbox-loading {position: absolute; top: 40%; left: 0%; height: 25%; width: 100%; text-align: center; line-height: 0;} #lightbox-nav {position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10;} #lightbox-container-image-box > #lightbox-nav {left: 0;} #lightbox-nav a {outline: none;} #lightbox-nav-btnPrev, #lightbox-nav-btnNext {width: 49%; height: 100%; zoom: 1; display: block;} #lightbox-nav-btnPrev {left: 0; float: left;} #lightbox-nav-btnNext {right: 0; float: right;} #lightbox-container-image-data-box {font: 10px Verdana, Helvetica, sans-serif; background-color: #fff; margin: 0 auto; line-height: 1.4em; overflow: auto; width: 100%; padding: 0 10px 0;} #lightbox-container-image-data {padding: 0 10px; color: #666;} #lightbox-container-image-data #lightbox-image-details {width: 70%; float: left; text-align: left;} #lightbox-image-details-caption {font-weight: bold;} #lightbox-image-details-currentNumber {display: block; clear: left; padding-bottom: 1.0em;} #lightbox-secNav-btnClose {width: 66px; float: right; padding-bottom: 0.7em;} /*********************************THE END******************************/