@charset "UTF-8";

/* =============================================================================
   General
   ========================================================================== */
::selection {
    background: #77be70;

    /* Safari */
}

::-moz-selection {
    background: #77be70;

    /* Firefox */
}

html {
    background: #ee3c2b;
    -webkit-font-smoothing: antialiased;
}

body {
    font: 1em/1.5 "proxima-nova", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: 400;
    color: #311d09;
}

img {
    width: 100%;
    border: 0;
    -ms-interpolation-mode: bicubic;
}

.spacer {
    display: block;
    height: 10px;
}

@media screen and (max-width: 960px) {
    body {
        min-width: 100%;
        font-size: 1em;
        line-height: 1.5;
        -webkit-text-size-adjust: none;
    }

    img {
        max-width: 100%;
        height: auto;
        margin: auto;
    }
}

@media screen and (max-width: 760px) {
    body {
        min-width: 100%;
        font-size: 0.900em;
    }
}

@media screen and (max-width: 550px) {
    body {
        min-width: 100%;
        font-size: 0.800em;
    }

    img {
        max-width: 100%;
    }
}

/* =============================================================================
   Fonts
   ========================================================================== */
h1,
h2,
h3,
h4,
h5 {
    line-height: 1em;
    font-weight: 400;
    color: #000;
    text-align: center;
    text-transform: uppercase;
}

h1 {
    font-size: 1.850em;
    font-family: SinzanoDisplaySans-Ligatures, "Helvetica Neue", Helvetica, Arial, sans-serif;
}

#open-page h1 {
    font-size: 2.750em;
    font-family: SinzanoDisplaySans-Ligatures, "Helvetica Neue", Helvetica, Arial, sans-serif;
    text-shadow: 1px 2px 0 #ee3c2b, 3px 5px 0 #d73527;
}

h2 {
    font-size: 1.5em;
    font-family: SinzanoDisplaySans-Ligatures , "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.diary-content h3 {
    font-size: 2.250em;
    font-family: Sinzano-Regular, "Helvetica Neue", Helvetica, Arial, sans-serif;
    margin-bottom: 14px;
    text-align: left;
}

.diary-content h4 {
    font-size: 1.250em;
    font-family: SinzanoDisplaySansRegular, "Helvetica Neue", Helvetica, Arial, sans-serif;
    margin: 9px 0 0 0;
    text-align: left;
}

h4.diary-right {
    margin-left: 14px;
}

p {
    margin-top: 20px;

    /* font-size: 1.250em; */
    text-align: center;
}

.diary-content p {
    text-align: left;
    font-size: 0.900em;
    margin-top: 12px;
}

p a {
    font-weight: 600;
    color: #ee3c2b;
    text-decoration: none;
    border-bottom: 1px dotted #d42066;

    /* Transition */
    transition: color .3s ease-in-out;
    -o-transition: color .3s ease-in-out;
    -ms-transition: color .3s ease-in-out;
    -moz-transition: color .3s ease-in-out;
    -webkit-transition: color .3s ease-in-out;
}

p a:focus,
p a:hover {
    color: #000000;
    border-bottom: 1px dotted #000000;
    cursor: pointer;
}

#scene-footer a {
    color: #ee3c2b;
    cursor: pointer;
    text-decoration: none;

    /* Transition */
    -webkit-transition: 0.3s color;
    -moz-transition: 0.3s color;
    -ms-transition: 0.3s color;
    -o-transition: 0.3s color;
    transition: 0.3s color;
}

#scene-footer a:focus,
#scene-footer a:hover {
    color: #000000;
}

@media screen and (max-width: 550px) {
    .diary-content h4 {
        font-size: 1.500em;
    }

    .details-left h4 {
        margin-top: 10px;
    }

    .details-right h4 {
        margin-top: 12px;
    }

    h4.diary-right {
        margin-left: 0;
    }

    .diary-content p {
        font-size: 1em;
    }
}

/* =============================================================================
   Buttons
   ========================================================================== */
a.btn {
    font: 1.250em SinzanoDisplaySans-Ligatures, "Helvetica Neue", Helvetica, Arial, sans-serif;
    text-align: center;
    font-weight: 400;
    color: #fff5da;
    text-transform: uppercase;
    text-decoration: none;
    padding: 8px 20px 9px 20px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    display: inline-block;
    border-radius: 8px;

    /* Transition */
    -webkit-transition: All 0.3s ease;
    -moz-transition: All 0.3s ease;
    -ms-transition: All 0.3s ease;
    -o-transition: All 0.3s ease;
    transition: All 0.3s ease;
}

/* Generic Button */
a.btn {
    background-color: #fbf3dc;
}

a.btn:hover {
    background-color: #ffdd3f;
}

a.btn:active {
    background-color: #f7e8be;
}

/* Button - Facebook */
.facebook-button {
    margin: 30px auto 15px;
    text-align: center;
}

a.btn.facebook {
    background-color: #395d95;
}

a.btn.facebook:hover {
    background-color: #284168;
}

a.btn.facebook:active {
    background-color: #4c3928;
}

/* Button - Diary */
.diary-buttons {
    margin: 30px auto 25px;
    text-align: center;
    clear: both;
}

a.btn-diary {
    font: 1.250em SinzanoDisplaySans-Ligatures, "Helvetica Neue", Helvetica, Arial, sans-serif;
    text-align: center;
    font-weight: 400;
    color: #fff5da;
    text-transform: uppercase;
    text-decoration: none;
    padding: 8px 20px 9px 20px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    display: inline-block;

    /* Transition */
    -webkit-transition: All 0.3s ease;
    -moz-transition: All 0.3s ease;
    -ms-transition: All 0.3s ease;
    -o-transition: All 0.3s ease;
    transition: All 0.3s ease;
}

a.btn-diary.regular {
    background-color: #ed3c2c;
    border-radius: 8px 0 0 8px;
    -moz-border-radius: 8px 0 0 8px;
    -webkit-border-radius: 8px 0 0 8px;
}

a.btn-diary.regular:hover {
    background-color: #c1120d;
}

a.btn-diary.regular:active {
    background-color: #4c3928;
}

a.btn-diary.special {
    background-color: #72a82e;
    border-radius: 0 8px 8px 0;
    -moz-border-radius: 0 8px 8px 0;
    -webkit-border-radius: 0 8px 8px 0;
}

a.btn-diary.special:hover {
    background-color: #318321;
}

a.btn-diary.special:active {
    background-color: #4c3928;
}

@media screen and (max-width: 980px) {
    a.btn {
        font-size: 0.850em;
    }
}

@media screen and (max-width: 550px) {
    a.btn {
        font-size: 1em;
        font-weight: 700;
        padding: 16px 40px 15px 40px;
        width: 100%;
    }

    a.btn-diary {
        padding: 8px 16px 9px 16px;
    }
}

/* =============================================================================
   Spritely Code
   ========================================================================== */
#scene-container {
    /* min-width:900px; */
    /* padding-top:359px; */
    position: relative;
    width: 100%;
    padding-top: 40px;
}

#scene-background {
    position: relative;
    width: 100%;
    height: 620px;
    z-index: 1000;
}

.scene-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;

    /* min-width: 900px; */
    height: 100%;
    overflow: hidden;
}

#clouds-01 {
    background: transparent url("../img/universal/bg-scene-clouds-01.png") 300px 0 repeat-x;
}

#clouds-02 {
    background: transparent url("../img/universal/bg-scene-clouds-02.png") 300px 0 repeat-x;
}

#clouds {
    background: transparent url("../img/universal/bg-scene-cloud.png") 0 214px repeat-x;
}

#water {
    background: url("../img/universal/bg-scene-water.gif") 0 280px repeat-x;
}

#sand {
    background: url("../img/universal/bg-scene-sand.png") center 340px repeat-x;
}

@media screen and (max-width: 768px) {
    #scene-background {
        position: relative;
        width: 100%;

        /* height: 850px; HOME PAGE */
        height: 400px;
        z-index: 1000;
    }
}

/* =============================================================================
   New Scene Code
   ========================================================================== */
#scene-midground {
    position: absolute;
    top: 50px;
    z-index: 2000;
    width: 100%;
    height: auto;

    /* background: #000; */
    overflow: hidden;
}

#scene-midground-island {
    position: absolute;
    top: 248px;
    z-index: 2500;
    width: 100%;
    height: 350px;
    background: transparent url('../img/universal/bg-scene-island.png') center top no-repeat;
    background-size: 1550px 101px;
}

#scene-newsletter {
    position: absolute;
    top: 0;
    z-index: 3000;
    width: 100%;
    height: auto;
    text-align: center;
}

#scene-newsletter-inner {
    margin: 20px auto 6px;
    width: 260px;
    height: 200px;

    /* background: #aaa; */
}

#scene-newsletter-divider {
    margin: 0 auto;
    width: 100%;
    height: 68px;
}

@media screen and (max-width: 768px) {
    #scene-newsletter-inner {
        width: 90%;
    }
}

#scene-foreground {
    position: absolute;
    top: 50px;
    z-index: 3000;
    width: 100%;
    height: auto;

    /* background: #000; */
    overflow: hidden;
}

#scene-parchment-footer {
    position: absolute;
    top: 0;
    z-index: 3000;
    width: 100%;
    height: 420px;

    /* background: transparent url('https://www.hulabulabar.com/assets/img/universal/parchment-bottom.png') center top no-repeat; */
}

.scene-foreground {
    margin: 40px auto 0;
    max-width: 960px;
}

/* ---------- TIKI GUY / GIRL ---------- */
#tiki-girl {
    float: left;
    background: transparent url('../img/universal/bg-scene-tiki-girl.png') 0 0 no-repeat;
    width: 316px;
    height: 380px;
}

#tiki-guy {
    margin-right: 40px;
    float: right;
    background: transparent url('../img/universal/bg-scene-tiki-guy.png') 0 0 no-repeat;
    width: 182px;
    height: 388px;
}

/* ---------- SHADOW ---------- */
#scene-foreground-shadow {
    position: absolute;
    top: 50px;
    z-index: 2000;
    width: 100%;
    height: auto;
    overflow: hidden;
}

.scene-foreground-shadow {
    margin: 400px auto 0;
    max-width: 960px;
}

#tiki-girl-shadow {
    float: left;
    margin-left: 50px;
    background: url("../img/universal/bg-scene-shadow-01.png") 0 0 no-repeat;
    width: 214px;
    height: 34px;
}

#tiki-guy-shadow {
    float: right;
    background: url("../img/universal/bg-scene-shadow-02.png") 0 0 no-repeat;
    width: 200px;
    height: 34px;
}

/* ---------- FLAMES ---------- */
#widthincrease-flame-outer {
    min-width: 960px;

    /* overflow-x: hidden; */
    overflow: hidden;
}

#widthincrease-flame-container {
    /* background: gray; ACTIVATE COLOUR FOR TESTING */
    width: 960px;
    margin: 0px auto;
    height: 470px;
}

.widthincrease-flame-row {
    /* background: blue; ACTIVATE COLOUR FOR TESTING */
    width: 1240px;
    margin-left: -140px;
}

.widthincrease-flame-inner {
    position: relative;

    /* background: yellow; ACTIVATE COLOUR FOR TESTING */
    margin-left: 140px;
    width: 960px;
    height: 100px;
}

.scene-flame {
    position: absolute;
    top: 0;
    overflow: hidden;
}

#flame-l {
    background: transparent url('../img/universal/bg-scene-flame-l.png') no-repeat;
    top: 23px;
    left: -69px;
    width: 66px;
    height: 152px;

    /* z-index: 2000; */
    float: left;
}

#torch-l {
    background: transparent url('../img/universal/bg-scene-torch-l-shadow.png') 0 0 no-repeat;
    background-size: 115px 303px;
    top: 160px;
    left: -60px;
    width: 115px;
    height: 303px;

    /* z-index: 2000; */
    float: left;
}

#flame-r {
    background: transparent url('../img/universal/bg-scene-flame-l.png') 0 0 no-repeat;
    top: 23px;
    right: -78px;
    width: 66px;
    height: 152px;

    /* z-index: 2000; */
    float: right;
}

#torch-r {
    background: transparent url('../img/universal/bg-scene-torch-r-shadow.png') 0 0 no-repeat;
    background-size: 100px 303px;
    top: 160px;
    right: -120px;
    width: 100px;
    height: 303px;

    /* z-index: 2000; */
    float: right;
}

/* ---------- FOOTER ---------- */
#scene-footer {
    position: absolute;
    top: 510px;
    z-index: 4000;
    width: 100%;
    height: auto;
}

#footer {
    margin: 10px auto;
    max-width: 900px;
    width: 100%;
    min-height: 84px;
    background: transparent url('../img/universal/footer-icon.png') top center no-repeat;
    background-size: 84px 84px;
}

#footer-level-01 {
    padding-top: 8px;
    height: 28px;

    /* background: #eee; */
}

#footer-level-02 {
    height: 14px;

    /* background: #ddd; */
}

#footer-level-03 {
    height: 28px;

    /* background: #ccc; */
}

.footer-facebook {
    float: right;
    margin: 4px 0 0 5px;
    max-width: 16px;
}

/* ---------- FOOTER - COLUMNS ---------- */
#footer .column-left {
    height: 10px;
    float: left;
    width: 44%;
    text-align: right;
}

#footer #footer-level-02 .column-left {
    background: url('../img/universal/footer-pattern-l.png') repeat-x right 5px;
    background-size: 8px 4px;
}

#footer .column-centre {
    height: 10px;
    float: left;
    width: 12%;
    text-align: center;
}

#footer .column-right {
    height: 10px;
    float: left;
    width: 44%;
    text-align: left;
}

#footer #footer-level-02 .column-right {
    background: url('../img/universal/footer-pattern-r.png') repeat-x left 6px;
    background-size: 8px 4px;
}

/* ---------- FOOTER - LARGE TEXT ---------- */
#footer .lge-text ul li {
    display: inline;
    padding: 0 2px 0 14px;
    border-left: 0;
    list-style: none;
    font-size: 1.100em;
    font-family: SinzanoDisplaySansRegular, "Helvetica Neue", Helvetica, Arial, sans-serif;
    color: #451512;
}

#footer .lge-text li {
    background: url('../img/universal/footer-star.png') no-repeat 0 5px;
    background-size: 8px 8px;
}

#footer .lge-text li:first-child {
    background: none;
}

#footer .column-right .lge-text li:first-child {
    padding-left: 0;
}

#footer .column-left .lge-text li:last-child {
    padding-right: 0;
}

/* ---------- FOOTER - SMALL TEXT ---------- */
#footer .sml-text ul li {
    display: inline;
    padding: 0 6px 0 10px;
    border-left: 1px solid #937214;
    list-style: none;
    font-size: 0.700em;
    color: #451512;
}

#footer .sml-text ul li:first-child {
    border-left: 0;
}

#footer .column-right .sml-text ul li:first-child {
    border-left: 0;
    padding-left: 0;
}

#footer .column-left .sml-text ul li:last-child {
    padding-right: 0;
}

/* ---------- FOOTER - NOTICE ---------- */
#notice {
    clear: both;
    margin: 0 auto;
    padding: 10px 0;
    max-width: 768px;
    text-align: center;
}

#notice ul li {
    display: inline;
    padding: 0 8px;
    list-style: none;
}

#notice p,
#notice li {
    margin: 0;
    font-size: 0.700em;
    line-height: 1.650em;
    color: #937214;
}

@media screen and (max-width: 960px) {
    /* #scene-midground {
		display: none;
	} */
    #torch-l {
        display: none;
    }

    .scene-foreground,
    	.scene-foreground-shadow {
        width: 95%;
    }

    #footer {
        width: 90%;
    }

    #footer .column-left {
        width: 43%;
    }

    #footer .column-centre {
        width: 14%;
    }

    #footer .column-right {
        width: 43%;
    }

    #footer .column-left .lge-text ul li:last-child {
        display: none;
    }

    #footer .column-right .lge-text ul li:last-child {
        display: none;
    }

    #footer .column-left .sml-text ul li:last-child {
        display: none;
    }

    #footer .column-right .sml-text ul li:first-child {
        display: none;
    }

    #footer .sml-text ul li {
        padding: 0;
        border: none;
        line-height: 5px;
    }
}

#scene-background,
	#scene-midground,
	#scene-foreground,
	#scene-foreground-shadow,
	#scene-midground-island,
	#scene-footer {
    /* padding-top:50px; HOME PAGE */
    padding-top: 40px;
}

@media screen and (max-width: 768px) {
    #scene-container {
        /* padding-top:50px; HOME PAGE */
        padding-top: 340px;
    }

    /* #clouds-01,
	#clouds-02 {
		display: none;
	} */
    #scene-background,
    	#scene-midground,
    	#scene-foreground,
    	#scene-foreground-shadow,
    	#scene-midground-island,
    	#scene-footer {
        /* padding-top:50px; HOME PAGE */
        padding-top: 280px;
    }

    /* a.btn {
		width: 90%;
	} */
    #footer .column-left,
    	#footer .column-centre,
    	#footer .column-right {
        width: 100%;
        text-align: center;
    }

    #footer-level-01 {
        padding: 100px 0 35px;
    }

    #footer-level-02 {
        display: none;
    }

    #footer-level-03 {
        margin: 0;
    }

    #footer .column-right .sml-text {
        display: none;
    }

    #footer .lge-text ul li {
        font-size: 1.100em;
    }

    #footer .lge-text li {
        background-position: 0 5px;
    }

    #notice {
        padding: 0;
        width: 90%;
        height: auto;
    }

    #notice ul li {
        display: block;
    }
}

@media screen and (max-width: 550px) {
    #footer .lge-text ul li {
        font-size: 1.500em;
    }

    #footer .lge-text li {
        background-position: 0 5px;
    }
}

/* ---------- ODD SIZE TO REMOVE TIKI GUY (AS HE HAS EXTRA WIDTH) ---------- */
@media screen and (max-width: 600px) {
    #tiki-girl {
        float: none;
        margin: 0 auto;
    }

    #tiki-girl-shadow {
        float: none;
        margin: 0 auto;
    }

    #tiki-guy,
    	#tiki-guy-shadow {
        display: none;
    }
}

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    #flame-l {
        background-image: url('../img/universal/bg-scene-flame-l@2x.png');
        background-size: 1584px 152px;
    }

    #flame-r {
        background-image: url('../img/universal/bg-scene-flame-r@2x.png');
        background-size: 1584px 152px;
    }

    #tiki-girl {
        background-image: url('../img/universal/bg-scene-tiki-girl@2x.png');
        background-size: 12640px 380px;
    }

    #tiki-guy {
        background-image: url('../img/universal/bg-scene-tiki-guy@2x.png');
        background-size: 10920px 388px;
    }

    #clouds {
        background-image: url('../img/universal/bg-scene-cloud@2x.png');
        background-size: 570px 66px;
    }

    #clouds-01 {
        background-image: url('../img/universal/bg-scene-clouds-01@2x.png');
        background-size: 1440px 170px;
    }

    #clouds-02 {
        background-image: url('../img/universal/bg-scene-clouds-02@2x.png');
        background-size: 1440px 170px;
    }

    #tiki-girl-shadow {
        background: url("../img/universal/bg-scene-shadow-01@2x.png") 0 0 no-repeat;
        background-size: 214px 34px;
    }

    #tiki-guy-shadow {
        background: url("../img/universal/bg-scene-shadow-02@2x.png") 0 0 no-repeat;
        background-size: 200px 34px;
    }

    #footer .lge-text li {
        background: url('../img/universal/footer-star@2x.png') no-repeat 0 5px;
        background-size: 8px 8px;
    }
}

/* =============================================================================
   Form
   ========================================================================== */
/* Form Fields */
form input,
form textarea {
    font: 1.100em/1 SinzanoDisplaySansRegular, "Helvetica Neue", Helvetica, Arial, sans-serif;
    text-align: center;
    width: 90%;
    color: #fff5da;
    background: #4c3928;
    border: 3px solid #4c3928;
    border-radius: 4px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding: 6px 8px;
    margin-bottom: 4px;
    -webkit-transition: all 0.25s ease-in-out;
    -moz-transition: all 0.25s ease-in-out;
    -o-transition: all 0.25s ease-in-out;
    transition: all 0.25s ease-in-out;
    -webkit-appearance: none;
}

form input:focus,
form textarea:focus {
    border-color: #4c3928;
    outline: none;
}

/* Button */
form input.btn {
    border: none;
    cursor: pointer;
    padding: 8px 20px 8px 20px;
    width: 50%;
    text-align: center;
    font: 1.250em SinzanoDisplaySansRegular, "Helvetica Neue", Helvetica, Arial, sans-serif;
    color: #fff5da;
    text-transform: uppercase;
    text-decoration: none;
    background: #ed3c2c;
}

form input.btn:hover {
    background: #b22d21;
}

/* General Form Markup */
input,
textarea,
select {
    font-size: 1.250em;
    border: 1px solid;
    padding: 6px 5px;
    border-radius: 2px;
    -moz-border-radius: 2px;
    -webkit-border-radius: 3px;
    -webkit-appearance: none;
    vertical-align: middle;
}

select {
    padding: 3px;
}

label,
input[type="button"],
input[type="submit"],
input[type="image"],
button {
    cursor: pointer;
}

@media screen and (max-width: 760px) {
    form input,
    	form textarea {
        width: 80%;
        font-size: 1.250em;
    }

    form input.btn {
        width: 40%;
        margin-top: 3px;
    }
}

/* =============================================================================
   DIVIDER
   ========================================================================== */
.divider {
    width: 100%;
    background: url('../img/universal/divider-bg.png') repeat-x center;
}

.divider-img {
    margin: 0 auto;
    max-width: 225px;
    height: 68px;
    padding-top: 14px;
    text-align: center;
    background: url('../img/universal/divider-img01.png') no-repeat 0 12px;
}

.divider-title {
    margin: 0 auto;
    height: 68px;
    width: 450px;
}

.divider-title-left {
    float: left;
    width: 111px;
    height: 68px;
    background: url('../img/universal/divider-img02-left.png') no-repeat 0 9px;
}

.divider-title-centre {
    text-align: center;
    float: left;
    width: 228px;
    height: 50px;
    background: #fff5da;
}

.divider-title-centre h2 {
    font-size: 1.800em;
    font-family: SinzanoDisplaySans-Ligatures, "Helvetica Neue", Helvetica, Arial, sans-serif;
    margin-top: 18px;
}

.divider-title-right {
    float: left;
    width: 111px;
    height: 68px;
    background: url('../img/universal/divider-img02-right.png') no-repeat 0 9px;
}

@media screen and (max-width: 550px) {
    .divider-title {
        width: 300px;
    }

    .divider-title-left {
        width: 71px;
        background: url('../img/universal/divider-img02-left-sml.png') no-repeat 0 9px;
    }

    .divider-title-centre {
        width: 158px;
    }

    .divider-title-centre h2 {
        font-size: 2.250em;
        margin-top: 6px;
    }

    .divider-title-right {
        width: 71px;
        background: url('../img/universal/divider-img02-right-sml.png') no-repeat 0 9px;
    }
}

@media screen and (max-width: 400px) {
    .divider-title {
        width: 230px;
    }

    .divider-title-left {
        width: 50px;
        background: url('../img/universal/divider-img02-left-smlr.png') no-repeat 0 9px;
    }

    .divider-title-centre {
        width: 130px;
    }

    .divider-title-centre h2 {
        font-size: 2.250em;
        margin-top: 6px;
    }

    .divider-title-right {
        width: 50px;
        background: url('../img/universal/divider-img02-right-smlr.png') no-repeat 0 9px;
    }
}

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .divider {
        background: url('../img/universal/divider-bg@2x.png') repeat-x center;
        background-size: 63px 20px;
    }

    .divider-img {
        background: url('../img/universal/divider-img01@2x.png') no-repeat 0 12px;
        background-size: 225px 68px;
    }

    .divider-title-left {
        background: url('../img/universal/divider-img02-left@2x.png') no-repeat 0 9px;
        background-size: 111px 50px;
    }

    .divider-title-right {
        background: url('../img/universal/divider-img02-right@2x.png') no-repeat 0 9px;
        background-size: 111px 50px;
    }
}

@media screen and (max-width: 550px) and (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .divider-title-left {
        background: url('../img/universal/divider-img02-left-sml@2x.png') no-repeat 0 9px;
        background-size: 71px 50px;
    }

    .divider-title-right {
        background: url('../img/universal/divider-img02-right-sml@2x.png') no-repeat 0 9px;
        background-size: 71px 50px;
    }
}

@media screen and (max-width: 400px) and (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .divider-title-left {
        background: url('../img/universal/divider-img02-left-smlr@2x.png') no-repeat 0 9px;
        background-size: 50px 50px;
    }

    .divider-title-right {
        background: url('../img/universal/divider-img02-right-smlr@2x.png') no-repeat 0 9px;
        background-size: 50px 50px;
    }
}

/* =============================================================================
   Content Area
   ========================================================================== */
.content-container {
    margin: 0 auto;
    max-width: 960px;
    height: auto !important;

    /* background: #fff; */
}

.content-container-inner {
    position: relative;
    margin: 0 auto;

    /* padding: 0 57px; */
    height: auto;
    max-width: 914px;

    /* 800px */
    border-left: 3px solid #000;
    border-right: 3px solid #000;
    background: #fff5da;
}

.content-content-area {
    margin: 0 auto;
    max-width: 800px;

    /* background: #7b22c5; */
}

.content-cnr-left {
    position: absolute;
    top: 0;
    left: -23px;
    width: 55px;
    height: 300px;
    background: url('../img/header/header-content-left.png') no-repeat;
}

.content-cnr-right {
    position: absolute;
    top: 0;
    right: -23px;
    width: 55px;
    height: 300px;
    background: url('../img/header/header-content-right.png') no-repeat;
}

@media screen and (max-width: 960px) {
    .content-container {
        max-width: none;
        width: 100%;
    }

    .content-container-inner {
        max-width: none;
        width: 100%;
        border-left: none;
        border-right: none;
    }

    .content-content-area {
        width: 90%;

        /* max-width: none; */
    }

    .content-cnr-left,
    	.content-cnr-right {
        display: none;
    }

    /* .content-constrain {
		margin: 0 auto;
		width: 90%;
	} */
}

@media screen and (max-width: 760px) {
    .content-content-area {
        width: 100%;
    }

    .content-constrain {
        margin: 0 auto;
        width: 90%;
    }

    .content-constrain-diary {
        margin: 0 auto;
        width: 90%;
    }
}

@media screen and (max-width: 550px) {
    .content-container-inner {
        width: 100%;
    }

    .content-constrain-diary {
        width: 100%;
    }
}

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .content-cnr-left {
        background: url('../img/header/header-content-left@2x.png') no-repeat;
        background-size: 55px 320px;
    }

    .content-cnr-right {
        background: url('../img/header/header-content-right@2x.png') no-repeat;
        background-size: 55px 320px;
    }
}

/* =============================================================================
   Borders
   ========================================================================== */
.border-yellow-t {
    background: url('../img/frame/yellow-t.png') repeat-x;
    position: absolute;
    top: -12px;
    left: 0;
    width: 100%;
    height: 12px;
}

.border-yellow-b {
    background: url('../img/frame/yellow-b.png') repeat-x;
    position: absolute;
    bottom: -12px;
    left: 0;
    width: 100%;
    height: 12px;
}

.border-yellow-l {
    background: url('../img/frame/yellow-l.png') repeat-y;
    position: absolute;
    top: 0;
    left: -12px;
    width: 12px;
    height: 100%;
}

.border-yellow-r {
    background: url('../img/frame/yellow-r.png') repeat-y;
    position: absolute;
    top: 0;
    right: -12px;
    width: 12px;
    height: 100%;
}

.border-yellow-br {
    background: url('../img/frame/yellow-br.png');
    position: absolute;
    bottom: -20px;
    right: -20px;
    width: 20px;
    height: 20px;
}

.border-yellow-bl {
    background: url('../img/frame/yellow-bl.png');
    position: absolute;
    bottom: -20px;
    left: -20px;
    width: 20px;
    height: 20px;
}

.border-yellow-tr {
    background: url('../img/frame/yellow-tr.png');
    position: absolute;
    top: -20px;
    right: -20px;
    width: 20px;
    height: 20px;
}

.border-yellow-tl {
    background: url('../img/frame/yellow-tl.png');
    position: absolute;
    top: -20px;
    left: -20px;
    width: 20px;
    height: 20px;
}

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .border-yellow-t {
        background: url('../img/frame/yellow-t@2x.png') repeat-x;
        background-size: 120px 12px;
    }

    .border-yellow-b {
        background: url('../img/frame/yellow-b@2x.png') repeat-x;
        background-size: 120px 12px;
    }

    .border-yellow-l {
        background: url('../img/frame/yellow-l@2x.png') repeat-y;
        background-size: 12px 60px;
    }

    .border-yellow-r {
        background: url('../img/frame/yellow-r@2x.png') repeat-y;
        background-size: 12px 60px;
    }

    .border-yellow-br {
        background: url('../img/frame/yellow-br@2x.png');
        background-size: 20px 20px;
    }

    .border-yellow-bl {
        background: url('../img/frame/yellow-bl@2x.png');
        background-size: 20px 20px;
    }

    .border-yellow-tr {
        background: url('../img/frame/yellow-tr@2x.png');
        background-size: 20px 20px;
    }

    .border-yellow-tl {
        background: url('../img/frame/yellow-tl@2x.png');
        background-size: 20px 20px;
    }
}

/* =============================================================================
   Contact
   ========================================================================== */
#map-canvas-container {
    position: relative;
    margin: 40px auto;
    padding: 0;
    width: 100%;
    height: 300px;
    background: #eae6dd;
}

#map-canvas {
    width: 100%;
    height: 300px;
}

@media screen and (max-width: 550px) {
    #map-canvas-container {
        width: 90%;
        background: none;

        /* width: 160px; */
    }
}

/* =============================================================================
   Responsive Grid
   ========================================================================== */
article {
    clear: both;
    display: block;
    zoom: 1;
}

article:after {
    content: "";
    clear: both;
    display: block;
}

.col-contact-55 {
    float: left;
    width: 50%;
    margin-right: 2.5%;
}

.col-contact-45 {
    position: relative;
    float: right;
    width: 47.5%;
}

/* Menu Page Columns */
.col-menu-image-left {
    float: left;
    width: 30%;
    text-align: center;
}

.col-menu-content-left {
    float: left;
    width: 66%;
    margin-right: 4%;
}

.col-menu-image-right {
    float: right;
    width: 30%;
    text-align: center;
}

.col-menu-content-right {
    float: right;
    width: 66%;
    margin-left: 4%;
}

.generic {
    padding: 20px 0 30px;
    height: auto;
}

article p {
    text-align: left;
}

article h2 {
    text-align: left;
    font-size: 1.750em;
}

article ul {
    margin-top: 20px;
}

article ul span {
    position: absolute;
    left: 0;
    padding-left: 36%;
}

@media only screen and (max-width: 550px) {
    article ul span {
        padding-left: 50%;
    }
}

@media screen and (max-width: 768px) {
    .col-contact-55 {
        width: 100%;
        margin-right: 0;
        padding-bottom: 30px;
        text-align: left;
    }

    .col-contact-45 {
        width: 100%;
    }

    .col-menu-image-left,
    	.col-menu-image-right {
        width: 100%;
    }

    .col-menu-content-left,
    	.col-menu-content-right {
        width: 100%;
        margin-left: 0;
        margin-right: 0;
    }

    article p,
    	article h2 {
        text-align: center;
    }
}

/* =============================================================================
   Menu
   ========================================================================== */
/* OPTION #1 CODE FROM http://css-tricks.com/fade-image-within-sprite/ */
.download-menu-container {
    margin: 20px auto;
    width: 240px;
}

.download-menu {
    display: inline-block;
    position: relative;

    /* text-indent: -9999px; */
    width: 240px;
    height: 205px;
    background: url('../img/menu/button.png') no-repeat top;
    text-decoration: none;
}

.download-menu span {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: url('../img/menu/button.png') no-repeat;
    background-position: 0 -205px;
    opacity: 0;
    -webkit-transition: opacity 0.3s;
    -moz-transition: opacity 0.3s;
    -o-transition: opacity 0.3s;
}

.download-menu:hover span {
    opacity: 1;
}

.download-menu h2 {
    font-size: 28px;
    text-align: center;
    margin-top: 128px;
    text-decoration: none;
    border: none;
}

/* Images */
img.menu-cocktails {
    max-width: 225px;
    max-height: 202px;
}

img.menu-rhum {
    max-width: 220px;
    max-height: 182px;
    margin: 30px auto 0;
}

img.menu-beer {
    max-width: 225px;
    max-height: 202px;
}

img.menu-functions {
    max-width: 220px;
    max-height: 150px;
}

@media screen and (max-width: 768px) {
    /* Images */
    img.menu-cocktails,
    	img.menu-rhum,
    	img.menu-beer,
    	img.menu-functions {
        margin-top: 0;
        padding-bottom: 20px;
    }
}

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .download-menu {
        background: url('../img/menu/button@2x.png') no-repeat top;
        background-size: 240px 410px;
    }

    .download-menu span {
        background: url('../img/menu/button@2x.png') no-repeat;
        background-size: 240px 410px;
        background-position: 0 -410px;
    }
}

/* =============================================================================
   FAQ
   ========================================================================== */
#faq {
    overflow: hidden;
    margin: 10px 0 0 0;
}

#faq p {
    text-align: left;
    margin: 0 0 20px 0;
}

#faq #question {
    margin: 0 0 0 0;
}

#faq-left,
#faq-right {
    margin-top: 8px;
}

#faq #question #faq-left,
#faq #answer #faq-left {
    width: 40px;
    font-family: SinzanoDisplaySansRegular, "Helvetica Neue", Helvetica, Arial, sans-serif;
    color: #000;
    font-size: 1.900em;
    line-height: 1em;
}

#faq #answer #faq-left {
    color: #311d09;
}

#faq #question #faq-right {
    float: left;
    font-family: SinzanoDisplaySansRegular, "Helvetica Neue", Helvetica, Arial, sans-serif;
    color: #000;
    font-size: 1.900em;
    line-height: 1em;
    width: 92%;
    padding: 0 0 0 1.5%;
}

#faq #answer #faq-right {
    float: left;
    width: 92%;
    padding: 0 0 0 1.5%;
}

.clear {
    clear: both;
}

#faq-left {
    float: left;
}

#faq-right {
    float: right;
}

@media screen and (max-width: 650px) {
    #faq #question #faq-left,
    #faq #answer #faq-left {
        display: none;
    }

    #faq {
        text-align: center;
    }

    #faq p {
        text-align: center;
    }

    #faq #question #faq-right {
        width: 100%;
        padding: 0;
    }

    #faq #answer #faq-right {
        width: 100%;
        padding: 0;
    }
}

/* =============================================================================
   Header - New
   ========================================================================== */
.parchment-header-container {
    position: relative;
    margin: 0 auto;
    max-width: 960px;
    height: 80px;
}

.parchment-header-inner {
    margin: 0 auto;
    padding-top: 40px;
    height: 40px;
    max-width: 914px;
    border-left: 3px solid #000;
    border-right: 3px solid #000;
}

.parchment-header-inner-bg {
    width: 100%;
    height: 40px;
    background: #fff5da;
}

.parchment-header-overlay {
    position: absolute;
    top: 0;
    Left: 0;
    width: 100%;
}

.parchmennt-header-left {
    float: left;
    height: 80px;
    width: 142px;
    background: url('../img/universal/parchment-top-left.png') no-repeat;
}

.parchmennt-header-center {
    float: left;
    height: 80px;
    width: 676px;
    background: url('../img/universal/parchment-top-repeat.png') repeat center;
}

.parchmennt-header-right {
    float: right;
    height: 80px;
    width: 142px;
    background: url('../img/universal/parchment-top-right.png') no-repeat;
}

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .parchmennt-header-left {
        background: url('../img/universal/parchment-top-left@2x.png') no-repeat;
        background-size: 142px 80px;
    }

    .parchmennt-header-center {
        background: url('../img/universal/parchment-top-repeat@2x.png') repeat center;
        background-size: 676px 80px;
    }

    .parchmennt-header-right {
        background: url('../img/universal/parchment-top-right@2x.png') no-repeat;
        background-size: 142px 80px;
    }
}

/* =============================================================================
   Footer - New
   ========================================================================== */
.parchment-footer-container {
    position: relative;
    margin: 0 auto;
    max-width: 960px;
    height: 440px;
}

.parchment-footer-inner {
    margin: 0 auto;

    /* padding: 0 57px; */
    height: 380px;
    max-width: 914px;

    /* 800px */
    border-left: 3px solid #000;
    border-right: 3px solid #000;
}

.parchment-footer-inner-bg {
    width: 100%;
    height: 380px;
    background: #fff5da;
}

.parchment-footer-overlay {
    position: absolute;
    top: 0;
    Left: 0;
    width: 100%;
}

.parchmennt-footer-left {
    float: left;
    height: 440px;
    width: 142px;
    background: url('../img/universal/parchment-bottom-left.png') no-repeat;
}

.parchmennt-footer-center {
    float: left;
    height: 440px;
    width: 676px;
    background: url('../img/universal/parchment-bottom-repeat.png') repeat center;
}

.parchmennt-footer-right {
    float: right;
    height: 440px;
    width: 142px;
    background: url('../img/universal/parchment-bottom-right.png') no-repeat;
}

/* =============================================================================
   Newsletter
   ========================================================================== */
#newsletter-border-top {
    position: relative;
    height: 60px;
    background: url('../img/newsletter/bamboo-top.png') repeat-x center;
}

#newsletter-border-top .bamboo-l,
#newsletter-border-bottom .bamboo-l {
    position: absolute;
    left: 0;
    width: 10px;
    height: inherit;
    background: url('../img/newsletter/bamboo-left.png') no-repeat center;
}

#newsletter-border-top .bamboo-r,
#newsletter-border-bottom .bamboo-r {
    position: absolute;
    right: 0;
    width: 10px;
    height: inherit;
    background: url('../img/newsletter/bamboo-right.png') no-repeat center;
}

#newsletter-border-top #bamboo-header {
    position: relative;
    margin: 0 auto;
    height: 60px;
    width: 240px;
}

#newsletter-border-top #bamboo-header .hibiscus-l {
    position: absolute;
    left: 0;
    width: 52px;
    height: inherit;
    background: url('../img/newsletter/hibiscus-left.png') no-repeat center top;
}

#newsletter-border-top #bamboo-header .hibiscus-r {
    position: absolute;
    right: 0;
    width: 52px;
    height: 60px;
    background: url('../img/newsletter/hibiscus-right.png') no-repeat center top;
}

#newsletter-border-top .bamboo-leaf {
    position: relative;
    margin: 0 auto;
    height: 60px;
    width: 100px;
    background: url('../img/newsletter/leaf.png') no-repeat center;
}

#newsletter-title {
    height: 40px;
    background: url('../img/newsletter/newsletter.png') no-repeat center top;
}

#newsletter-border-bottom {
    position: relative;
    margin-top: 6px;
    height: 40px;
    background: url('../img/newsletter/bamboo-bottom.png') repeat-x center;
}

#newsletter-border-top h2 {
    font-size: 1.100em;
    color: #fff5da;
    padding-top: 20px;
}

#newsletter-title h2 {
    text-indent: -9000px;
}

@media screen and (max-width: 960px) {
    .parchment-header-inner {
        max-width: none;
        width: 100%;
        height: 40px;
        border-left: none;
        border-right: none;
        background: url('../img/universal/parchment-top-repeat.png') repeat-x center;
    }

    .parchment-header-inner-bg {
        width: 100%;
        height: 40px;
        background: none;
    }

    .parchment-footer-inner {
        max-width: none;
        width: 100%;
        height: 440px;
        border-left: none;
        border-right: none;
        background: url('../img/universal/parchment-bottom-repeat.png') repeat-x center;
    }

    .parchment-header-overlay,
    	.parchment-footer-overlay {
        display: none;
    }
}

@media screen and (max-width: 550px) {
    #newsletter-border-top h2 {
        font-size: 1.500em;
    }
}

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    #newsletter-border-top {
        background: url('../img/newsletter/bamboo-top@2x.png') repeat-x center;
        background-size: 240px 14px;
    }

    #newsletter-border-top .bamboo-l,
    	#newsletter-border-bottom .bamboo-l {
        background: url('../img/newsletter/bamboo-left@2x.png') no-repeat center;
        background-size: 10px 14px;
    }

    #newsletter-border-top .bamboo-r,
    	#newsletter-border-bottom .bamboo-r {
        background: url('../img/newsletter/bamboo-right@2x.png') no-repeat center;
        background-size: 10px 14px;
    }

    #newsletter-border-top #bamboo-header .hibiscus-l {
        background: url('../img/newsletter/hibiscus-left@2x.png') no-repeat center top;
        background-size: 52px 48px;
    }

    #newsletter-border-top #bamboo-header .hibiscus-r {
        background: url('../img/newsletter/hibiscus-right@2x.png') no-repeat center top;
        background-size: 52px 48px;
    }

    #newsletter-border-top .bamboo-leaf {
        background: url('../img/newsletter/leaf@2x.png') no-repeat center;
        background-size: 100px 37px;
    }

    #newsletter-title {
        background: url('../img/newsletter/newsletter@2x.png') no-repeat center top;
        background-size: 239px 27px;
    }

    #newsletter-border-bottom {
        background: url('../img/newsletter/bamboo-bottom@2x.png') repeat-x center;
        background-size: 280px 14px;
    }

    .parchment-header-inner {
        background: url('../img/universal/parchment-top-repeat@2x.png') repeat-x center;
        background-size: 676px 80px;
    }

    .parchmennt-footer-left {
        background: url('../img/universal/parchment-bottom-left@2x.png') no-repeat;
        background-size: 142px 440px;
    }

    .parchmennt-footer-center {
        background: url('../img/universal/parchment-bottom-repeat@2x.png') repeat center;
        background-size: 676px 440px;
    }

    .parchmennt-footer-right {
        background: url('../img/universal/parchment-bottom-right@2x.png') no-repeat;
        background-size: 142px 440px;
    }

    .parchment-footer-inner {
        background: url('../img/universal/parchment-bottom-repeat@2x.png') repeat-x center;
        background-size: 676px 440px;
    }
}

/* =============================================================================
   Home: Diary Promotion
   ========================================================================== */
.diary-promo-wrapper-01 {
    width: 73.8%;
    min-height: 368px;
}

.diary-promo-wrapper-02 {
    position: absolute;
    top: 0;
    right: 0;
    width: 200px;
    height: 370px;
    background: url('../img/diary/wood.png');
    border-left: 10px #fecc4a solid;
    min-height: 368px;
}

.diary-promo-title {
    background: url('../img/home/arrow.png');
    width: 200px;
    height: 98px;
}

.diary-promo-title h2 {
    font-size: 2em;
    font-family: SinzanoDisplaySans-Ligatures , "Helvetica Neue", Helvetica, Arial, sans-serif;
    color: #fff;
    text-align: center;
    padding-top: 20px;
}

@media screen and (max-width: 960px) {
    .diary-promo-wrapper-01 {
        position: relative;
        width: 100%;
        min-height: 0;
    }

    .diary-promo-wrapper-02 {
        display: none;
        min-height: 0;
    }
}

/* =============================================================================
   Home: Three Promo Tabs
   ========================================================================== */
.col-three {
    float: left;
    width: 30.3%;
    margin: 0 1.51666667%;
    padding: 30px 0;
}

.col-three p {
    font-size: 0.900em;
}

.home-promo {
    padding-top: 20px;
}

.home-promo-title {
    position: relative;
    height: 60px;
    width: 100%;
    border: 1 solid #fff5da;
    border-radius: 6px;
    -moz-border-radius: 6px;
    -khtml-border-radius: 6px;
    -webkit-border-radius: 6px;
}

.home-promo-title.uno {
    background: #ee3c2b url('../img/home/tab01-bg.gif') repeat;
}

.home-promo-title.dos {
    background: #bbd9bd url('../img/home/tab02-bg.gif') repeat;
}

.home-promo-title.tre {
    background: #fbbd11 url('../img/home/tab03-bg.gif') repeat;
}

.home-promo-title h2 {
    font-size: 1.750em;
    text-align: left;
    padding: 14px 0 0 20px;
}

.home-promo-title.uno h2 {
    color: #fff;
}

.home-promo-title.dos h2 {
    color: #6e4848;
}

.home-promo-title.tre h2 {
    color: #c64b20;
}

.home-promo-img {
    position: absolute;
    right: 0;
    top: -20px;
    width: 120px;
    height: 80px;
}

.home-promo-img.uno {
    background: url('../img/home/tab01-icon.png') no-repeat center top;
}

.home-promo-img.dos {
    background: url('../img/home/tab02-icon.png') no-repeat center top;
}

.home-promo-img.tre {
    background: url('../img/home/tab03-icon.png') no-repeat center top;
}

@media screen and (max-width: 760px) {
    .col-three {
        width: 46%;
        margin: 0 2%;
    }

    .col-three.last {
        display: none;
    }

    .home-promo-title h2 {
        font-size: 2em;
    }
}

@media screen and (max-width: 550px) {
    .col-three {
        width: 100%;
        margin: 0 0;
        padding: 15px 0;
    }

    .col-three.last {
        width: 100%;
        margin: 0 0;
        display: inline;
    }

    .home-promo-title h2 {
        font-size: 2em;
    }

    .col-three p {
        font-size: 1em;
    }
}

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .home-promo-title.uno {
        background: url('../img/home/tab01-bg@2x.gif') repeat;
        background-size: 240px 60px;
    }

    .home-promo-title.dos {
        background: url('../img/home/tab02-bg@2x.gif') repeat;
        background-size: 240px 60px;
    }

    .home-promo-title.tre {
        background: url('../img/home/tab03-bg@2x.gif') repeat;
        background-size: 240px 60px;
    }

    .home-promo-img.uno {
        background: url('../img/home/tab01-icon@2x.png') no-repeat center top;
        background-size: 120px 100px;
    }

    .home-promo-img.dos {
        background: url('../img/home/tab02-icon@2x.png') no-repeat center top;
        background-size: 120px 100px;
    }

    .home-promo-img.tre {
        background: url('../img/home/tab03-icon@2x.png') no-repeat center top;
        background-size: 120px 100px;
    }
}

/* =============================================================================
   Newsletter Archive
   ========================================================================== */
#newsletter-archive-link {
    margin: 0 auto;
}

#newsletter-archive-link p {
    font-size: 0.900em;
}