/* kona surf condo stylesheet
-------------------------------*/

/* SIMPLE 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;
    font-family : georgia,serif;
}
img {
    border      : 0;
}

/* LAYOUT
-------------------------------*/
body {
    padding-top: 50px;
}
h1 {
    font-family    : 'Cinzel Decorative', georgia, serif;
    text-transform : uppercase;
    font-weight: 900;
}
h2,h3,h4,h5,h6 {
    font-family    : 'Cinzel', georgia, serif;
    margin         : 2em 0 .5em 0;
    font-weight    : 900;
}
h4>a {
    font-size      : .8em;
    color          : #666;
    margin-left    : .5em;
    /*font-style     : italic;*/
}
p {
    padding        : 1em;
    position       : relative;
    line-height    : 30px;
}
ul {
    margin-left    : 2em;
}
a, a:visited {
    color: #069;
}

/* HEADER
-------------------------------*/
header {
    display               : block;
    width                 : 100%;
    height                : 50px;
    z-index               : 100;
    position              : fixed;
    top                   : 0px;
}
#topnav {
    max-width             : 960px;
    margin                : 0 auto;
    height                : 50px;
    z-index               : 10;
    background            : #000;
}
#topnav h1 {
    float                 : left;
    line-height           : 50px;
    margin-left           : 10px;
    color                 : #fff;
    background            : #000;
    font-size             : 30px;
}
#topnav a {
    font-family           : 'Cinzel Decorative', georgia, serif;
    color                 : #fff;
    text-decoration       : none;
}
#topnav ul {
    display               : block;
    float                 : right;
    list-style            : none;
}
#topnav ul li {
    float                 : left;
}
#topnav ul li a {
    background            : #222;
    border                : 2px solid #555;
    display               : block;
    font-size             : 13px;
    font-weight           : 700;
    line-height           : 22px;
    margin                : 10px 5px;
    padding               : 0 10px;
    -webkit-border-radius : 2em;
    border-radius         : 2em;
    /* stop iOS from using text ligatures */
    text-rendering        : optimizeSpeed;
}
#topnav ul li a:active {
    background            : #555;
}
#topnav ul li a.on {
    background            : #069;
    border                : 2px solid #FFF;
}


/* FADER
-------------------------------*/
#fader {
    display      : block;
    clear        : both;
    max-width    : 960px;
    max-height   : 600px;
    zoom         : 1;
    margin       : 0 auto;
    padding      : 0;
    list-style   : none;
    overflow     : hidden;
}
#fader ul {
    margin-left: 0;
}
#fader li {
    position     : relative;
    width        : 100%;
    float        : left;
    margin-right : -100%;
}

#fader h2 {
    background   : #000;
    bottom       : 0px;
    color        : #FFF;
    font-family  : 'Cinzel', georgia, serif;
    font-size    : 1.2em;
    font-weight  : 400;
    margin       : 0;
    opacity      : .7;
    padding      : .3em;
    position     : absolute;
    right        : 0px;
    text-align   : right;
    width        : 100%;
}
#fader img {
    width        : 100%;
    max-width    : 100%;
    display      : block;
}


/* BOOKING
-------------------------------*/
#booking {
    background     : #000;
    color          : #aaa;
    max-width      : 960px;
    margin         : 0 auto;
    padding        : 2px 0;
    position       : relative;
    clear          : both;
}
#booking label {
    padding-left   : 1em;
    font-size      : .8em;
    text-transform : uppercase;
}
#booking input[type="submit"] {
    float          : right;
    margin-right   : 2em;
}
#booking p {
    padding        : 2px;
}


/* MAP
-------------------------------*/
#map {
    margin : 0 auto 1em auto;
    max-width  : 960px;
}


/* PAGE CONTENT
-------------------------------*/
#content {
    max-width  : 960px;
    margin     : 1em auto;
    position   : relative;
    clear      : both;
}
#content.narrow {
    padding    : 0 1em;
    max-width  : 720px;
}
#content h2 {
    text-align : center;
    font-size  : 2.2em;
    margin     : 1em auto 0;
}


/* PANELS
-------------------------------*/
#panels {
    position   : relative;
    max-width  : 960px;
    margin     : 0 auto;
    overflow   : auto;
}
#panels > div {
    width      : 300px;
    float      : left;
    margin     : 1em 10px;
    overflow   : hidden;
}
#panels h3 {
    margin-top : 1em;
}
#panels img {
    width        : 100%;
    max-width    : 100%;
    display      : block;
}
#panels p {
    padding    : .2em 0;
}
a.more {
    background            : #ADF;
    border                : 2px solid #047;
    color                 : #047;
    display               : inline-block;
    font-family           : 'Cinzel Decorative', georgia, serif;
    font-size             : 13px;
    font-weight           : 700;
    line-height           : 22px;
    margin                : 1em 0;
    padding               : 0 10px;
    text-decoration       : none;
    -webkit-border-radius : 15px;
    border-radius         : 15px;
    /* stop iOS from using ligatures */
    text-rendering        : optimizeSpeed;

}
a.more:active {
    background            : #CCC;
}

/* FOOTER
-------------------------------*/
footer {
    clear      : both;
    position   : relative;
    background : #000;
}
footer p {
    color      : #999;
    font-size  : .8em;
    padding    : 2em;
    border-top : 1px solid #ddd;
    text-align : center;
}


/* GALLERY
-------------------------------*/
.content-center {
    max-width  : 960px;
    margin     : 0 auto;
    clear      : both;
    position   : relative;
}
#gallery {
    list-style : none;
    max-width  : 930px;
    width      : 98%;
    margin     : 1% auto;
    padding    : 0;
}
#gallery > li  {
    display   : block;
    float     : left;
    padding   : 1%;
    position  : relative;
    max-width : 300px;
    width     : 31%;
}
#gallery > li > a {
    float      : left;
}
#gallery > li > a > img {
    display: block;
    margin     : 0;
    padding    : 0;
    width: 100%;
}
#gallery > li:hover a .zoom-icon {
    opacity    : 1;
}

/* ZOOM IMAGES
-------------------------------*/
.expandClick:hover .zoom-icon {
    opacity    : 1;
}
.expandPlay, .expandClick {
    position           : relative;
    display            : block;
}
.zoom-icon {
    position           : absolute;
    top                : 0;
    right              : 0;
    bottom             : 0;
    left               : 0;
    display            : block;
    background         : transparent; /* Fallback for web browsers that doesn't support RGBa */
    background         : rgba(0,0,0,0.25);
    opacity            : 0;
    cursor             : pointer;
    -webkit-transition : 0.25s;
    -moz-transition    : 0.25s;
    -o-transition      : 0.25s;
    transition         : 0.25s;
    /*margin             : 0 0 3px 0;*/
}
.zoom-icon:before {
    background         : url("../img/fancybox_zoom.png") no-repeat scroll 50% 50% transparent;
    content            : "";
    display            : block;
    height             : 46px;
    left               : 50%;
    margin             : -23px 0 0 -23px;
    position           : absolute;
    top                : 50%;
    width              : 46px;
}

/* ZOOM VIDEOS
-------------------------------*/
.play-icon {
    position           : absolute;
    top                : 0;
    right              : 0;
    bottom             : 0;
    left               : 0;
    display            : block;
    opacity            : 0.6;
    background         : transparent; /* Fallback for web browsers that doesn't support RGBa */
    background         : rgba(0,0,0,0);
    cursor             : pointer;
    -webkit-transition : 0.25s;
    -moz-transition    : 0.25s;
    -o-transition      : 0.25s;
    transition         : 0.25s;
}
.play-icon:before {
    background         : url("../img/fancybox_play.png") no-repeat scroll 50% 50% transparent;
    content            : "";
    display            : block;
    height             : 46px;
    left               : 50%;
    margin             : -23px 0 0 -23px;
    position           : absolute;
    top                : 50%;
    width              : 46px;
}
.play-icon:hover {
    opacity            : 1;
    background         : rgba(0,0,0,0.25);
}

/* MULTI COLUMN LISTS
-------------------------------*/
.col3 {
    -moz-column-count    : 3; /* Firefox */
    -webkit-column-count : 3; /* Safari and Chrome */
    column-count         : 3;
    -moz-column-gap      : 2em; /* Firefox */
    -webkit-column-gap   : 2em; /* Safari and Chrome */
    column-gap           : 2em;
    -moz-column-rule     : 1px solid #ccc; /* Firefox */
    -webkit-column-rule  : 1px solid #ccc; /* Safari and Chrome */
    column-rule          : 1px solid #ccc;
    padding              : 0;
    margin               : 0 0 0 1em;
    list-style-type      : none;
    overflow             : visible;
}
.col3 li {
    display              : block;
    padding              : 0 0 1em 0;
}



/* DEBUG NOTE
-------------------------------*/
.note {
    font-size     : .8em;
    font-family   : sans-serif;
    font-weight   : 700;
    padding       : 4px;
    line-height   : 10px;
    height        : 10px;
    overflow      : visible;
    color         : #A00;
    background    : #FDD;
    border-radius : 40px;
    border        : 1px solid #F00;
    display       : inline-block;
    white-space   : nowrap;
}
.note:before {
    content     : "!";
    line-height : 10px;
    margin      : 0 3px;
    display     : inline-block;
}

/* RESPONSIVE MOBILE
-----------------------------*/

/* TABLETS */
@media screen and (max-width: 960px) {
    body {
        padding-top : 90px;
    }
    /* header */
    header {
        height      : 90px;
    }
    #topnav {
        height      : 90px;
    }
    #topnav h1 {
        float       : none;
        text-align  : center;
        font-size   : 30px;
    }
    #topnav ul {
        margin      : 0;
        display     : block;
        float       : none;
        list-style  : none;
        text-align  : center;
        height      : 36px;
    }
    #topnav ul li {
        display     : inline-block;
        float       : none;
    }
    #topnav ul li a {
        margin: 0 .5em;
    }
    #content {
        max-width: 100%;
        margin: 1em auto;
    }
    /* panels */
    #panels {
        width       : 100%;
    }
    #panels > div {
        width       : 31%;
        margin      : 1em 1%;
    }
    .fancybox-nav span {
        /* fix for touch not having hover */
        opacity: 0.4;
    }
}

/* PHONES */
@media screen and (max-width: 767px) {
    /* panels */
    #panels {
        max-width   : 620px;
    }
    #panels > div {
        width       : 47%;
        margin      : 1em 1%;
    }
    .col3 {
        -moz-column-count    : 2; /* Firefox */
        -webkit-column-count : 2; /* Safari and Chrome */
        column-count         : 2;
    }

}

@media screen and (max-width: 600px) {
    body {
        padding-top: 0;
    }
    /* header */
    header, #topnav {
        position: relative;
        height      : 100%;
    }
    #topnav h1 {
        font-size   : 24px;
    }

    #topnav ul {
        max-width: 320px;
        margin: 0 auto;
        height      : 100%;
    }
    #topnav ul li a {
        font-weight           : 400;
        display               : block;
        margin                : 5px;
    }
    /* panels */
    #panels {
        max-width   : 320px;
    }
    #panels > div {
        width       : 300px;
        margin      : 1em 0;
    }

    /* gallery */
    #gallery > li  {
        padding   : 1%;
        max-width : 300px;
        width     : 48%;
    }
    .col3 {
        -moz-column-count    : auto; /* Firefox */
        -webkit-column-count : auto; /* Safari and Chrome */
        column-count         : auto;
    }

}

@media screen and (max-width: 480px) {
    /* gallery */
    #gallery {
        width      : 300px;
        margin     : 1em auto;
        padding    : 0;
    }

    #gallery > li  {
        padding   : 1em 0;
        width     : 100%;
    }
    #fader h2 {
        font-size: .9em;
    }
}
/* EOF */