/*
 ::: MAIN CLUB NAUTIC STYLESHEET :::
*/

/* Imports */
@import url(http://fonts.googleapis.com/css?family=Oleo+Script:400,700|Monda:400,700);

/* Tools */
.clear {clear: both;}

/* Main styles */
html, body {overflow-x: hidden;}
body {background: #ededed;}
#page {margin: 4em auto 0 auto; max-width: 935px;}
.site-main {margin: 0.5em auto 0 auto; max-width: 935px;}
.contentArea {background: #fff; margin-top: 0.4em; padding-bottom: 1em;}
.mainContentArea {margin: 0;}
#page > footer {height: 3em; display: block; background: #dae3e6; max-width: 935px; margin: 0 auto 1em auto;}

@media all and (min-width: 800px) {
    #page {margin: -1em auto 0 auto;}
}

@media  all and (min-width: 860px) {
    .contentArea {padding: 1% 2% 3% 2%;}
    .mainContentArea {margin: 0;}
    body {background: url('../img/kompas.png') no-repeat 95% 57% fixed;}
}


/* Main Sidebar options */
.mainBar p {margin: 0;}
.mainBar ul {margin: 0;}
.mainBar li, .mainBar p a {list-style: none; color: #00374e;}
.mainBar li {margin-bottom: 1em; font-size: 0.713em; }
.mainBar li h3 {font-weight: bold; color: #00374e; font-family: 'Monda',tahoma, arial, sans-serif; line-height: 120%; font-size: 1em;}
.mainBar li .textwidget p {color: #00374e;}

.mainBar li input[type=submit] {padding: 0.5em; margin-top: 0.5em; font-size: 1em}
.mainBar li input[type=text] {font-size: 1em;}
.frontStories .mainBar li p {font-size: 1em; }

/* Header options */
.menuBar {display: block; position: fixed; top: 0; height: 3.1em; width: 100%; background: #0d374f; z-index: 100; box-shadow: -1px 1px 10px #000; left: 0;}
.TopBar li {list-style: none;}
.TopBar div > span, .mobileMenu div > span {display: none;}
.logo img {display: block; margin: 2em auto 0 auto; }

/* Header logo */
.menuBar h1 {display: block; margin: 0.5em auto 0 auto; color: #fff; width: 35%; text-align: center; font-size: 1.2em;}
.menuBar span {display: block !important; width: 1.7em; height: 1.6em; float: left; position: absolute; top: 0.7em; left: 1em; background: url('../img/icons/menu_icon.png') no-repeat; background-size: contain;}
.menuBar span {-webkit-transition: opacity 250ms ease-in-out; -moz-transition: opacity 250ms ease-in-out; -o-transition: opacity 250ms ease-in-out; -ms-transition: opacity 250ms ease-in-out; transition: opacity 250ms ease-in-out;}
#menuButton.pressed {opacity: 0.7;}
.menuBar span:hover {cursor: pointer;}

/* Top menus */
.topBarLeft a, .topBarRight a {font-size: 0.8em; color: #778390;}
.topBarRight li {display: block; float: left; width: 30%; margin-right: 5%;}
.topBarLeft:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0;}

#menu-eksternelinks a {display: block; color: transparent; background-repeat: no-repeat; background-size: contain; width: 50px; height: 40px;}
.ringIcon a {background: url('../img/icons/ring.png');}
.whetherIcon a {background: url('../img/icons/whether.png');}
.facebookIcon a {background: url('../img/icons/facebook.png'); }

/* Lang menu */
#lang_sel_list li, #lang_sel_list a, #lang_sel_list ul {
    background: transparent !important;
    border: none !important;
    color: #6f6f6e !important;
    font-family: 'Monda', tahoma, arial, sans-serif !important;
    line-height: normal !important;
}

/* Mobile menu options */
.mobileMenu { position: fixed; top: 4em; width: 100%; z-index: 99; left: 0;}

.mobileMenu {-webkit-transform: translate3d(0,-100%,0); -webkit-transition: all 250ms ease-in-out; opacity: 0.5; box-shadow: 1px 1px 10px #000;}
.mobileMenu {-moz-transform: translate3d(0,-100%,0); -moz-transition: all 250ms ease-in-out; -moz-box-shadow: 1px 1px 10px #000;}
.mobileMenu {-o-transform: translate3d(0,-100%,0); -o-transition: all 250ms ease-in-out;}
.mobileMenu {-ms-transform: translate3d(0,-100%,0); -ms-transition: all 250ms ease-in-out;}
.mobileMenu {transform: translate3d(0,-100%,0); transition: all 250ms ease-in-out; }

.mobileMenu {background: #fff; padding-top: 1em; margin-top: -1em;}
.mobileMenu .rightContainer {float: right; width: 45%; border-left: #ededed 1px solid;}
.mobileMenu .menu {padding-top: 0.2em; margin: 0 0 1.5em 2%; }
.mobileMenu .topBarRight {border-top: 1px solid #ededed; padding-top: 1em;}
.mobileMenu .leftContainer {float: left;  width: 45%; }

.mobileMenu.show {-webkit-transform: translate3d(0,0,0); -moz-transform: translate3d(0,0,0); -ms-transform: translate3d(0,0,0); -o-transform: translate3d(0,0,0); transform: translate3d(0,0,0); display: block; opacity: 1;}

@media all and (min-width: 800px) {
    .menuBar {display: none;}
    .logo {width: 100%;}

    .TopBar {height: 13em; margin-top: -10em;}
    .mobileMenu {position: relative; top: auto; width: auto; z-index: auto; left: auto; background: none; padding: 0; margin: 0 auto 0 auto; height: 100%;}
    .mobileMenu .menu {padding-top: 0.2em; margin: 0; }

    .mobileMenu {-webkit-transform: none; box-shadow: none; -webkit-transition: none; opacity: 1;}
    .mobileMenu {-moz-transform: none; -moz-transition: none; -moz-box-shadow: none;}
    .mobileMenu {-o-transform: none; -o-transition: none;}
    .mobileMenu {-ms-transform: none; -ms-transition: none; }
    .mobileMenu {transform: none; transition: none;}

    .mobileMenu ul {margin: 0 !important;}
    .mobileMenu .rightContainer {float: none; position: absolute; top: 0; width: 100%; font-size: 7.5pt; border-left: none;}
    .mobileMenu .topBarRight {float: right; padding: 0; border: none; margin-right: 1px;}
    .mobileMenu .topBarLeft {float: left; padding: 0; border: none;}
    .mobileMenu .topBarRight li, .mobileMenu .topBarLeft li, .informationMenu li {display: block; float: left; margin: 0 1.5em 0 0 !important;}
    .mobileMenu .topBarRight li {margin: 0 0 0.8em 0 !important;}
    .informationMenu li a {margin: 0;}
    .informationMenu {position: absolute; bottom: 0; width: 100% !important;}

    .topBarRight li {width: auto;}
    .topBarLeft a {border-right: 1px solid #778390; padding-right: 1em;}

    /* Lang menu */
    #lang_sel_list li { width: auto;}
    #lang_sel_list, #lang_sel_list ul { width: 100%; }
    #lang_sel_list a {font-size: 0.8em !important; border-right: 1px solid #778390 !important;}
    #lang_sel_list ul li:first-child a {padding-left: 0 !important;}
    #lang_sel_list li a:hover {text-decoration: underline !important;}

}

/* ::: FONTS ::: */
.contentArea p, .contentArea li, .contentArea a, .contentArea span {font-family: 'Monda',tahoma, arial, sans-serif; line-height: 120%; color: #575656;}
.contentArea h1, .contentArea h2 {font-family: 'Oleo Script', sans-serif; font-size: 2em; color: #949494; letter-spacing: 0.06em; line-height: 1em;}
.contentArea h3 {font-family: 'Oleo Script', sans-serif; font-size: 1.3em; color: #dae3e6; letter-spacing: 0.08em; line-height: 1em; margin-top: 0.5em;}
blockquote {font-style: italic;}

/* ::: MENUS :::: */

/* Lang menu and external links menu */
.mobileMenu .rightContainer .menu li {margin: 0 0 0.3em 0;}

/* Information menu */
.menu a {color: #6f6f6e; text-decoration: none; font-family: 'Monda', tahoma, arial, sans-serif;}
.informationMenu ul {margin: 1em 0 0 1em;}
.informationMenu a {font-size: 0.8em; margin: 0 0 0.8em 0; display: block; text-transform: uppercase;}
.informationMenu li.current-menu-item a, .informationMenu a:hover {text-decoration: underline;}

/* Main menu */
.mainMenu {margin: 0 0 1em 0;}
.mainMenu ul {margin: 0;}
.mainMenu li {list-style: none; display: block; padding: 1em 0 1em 0; border-bottom: 0.5em solid #e9eee7; background-repeat: no-repeat;}
.mainMenu li a {color: #0d374f; font-size: 1.4em; letter-spacing: 0.06em; display: block; padding-left: 5.5em; background: url('../img/icons/arrow.png') no-repeat 90% 50%; margin-top: 1.5%; font-family: 'Oleo Script', cursive;}
.mainMenu li {-webkit-transition: opacity 250ms ease-in-out; -moz-transition: opacity 250ms ease-in-out; -o-transition: opacity 250ms ease-in-out; -ms-transition: opacity 250ms ease-in-out; transition: opacity 250ms ease-in-out;}
.mainMenu li.current-menu-item, .mainMenu li:hover {opacity: 0.5;}

/* Icons */
.boatIcon {background-image: url('../img/icons/boat.png'); background-position: 16px 30%;}
.cummunityIcon {background-image: url('../img/icons/cummunity.png'); background-position: 35px center;}
.recommnetIcon {background-image: url('../img/icons/recomment.png'); background-position: 33px center;}
.bookingIcon {background-image: url('../img/icons/booking.png'); background-position: 45px center;}

@media all and (min-width: 600px) {
    .mainMenu li {width: 49%; float: left;}
    .mainMenu li a {font-size: 1.3em; background-position: 90% center;}
    .cummunityIcon { background-position: 0px center; float: right !important;}
    .recommnetIcon {background-position: 28px center;}
    .bookingIcon { background-position: 9px center; float: right !important;}

    .cummunityIcon a, .bookingIcon a { padding-left: 4.5em !important;}
}

@media all and (min-width: 860px) {
    .mainMenu li {width: 22.7%; margin-right: 3%; float: left !important; background-position: 0 center; max-width: 204px; border-bottom: 0.5em solid #e9eee7;}
    .mainMenu li a {background-position: 100% 50%;}
    .mainMenu.single {border-bottom: 0.5em solid #e9eee7;}
    .mainMenu.single li {border-bottom: none;}

    .boatIcon {background-position: 0 20% !important;}
    .boatIcon a {padding-left: 5em !important;}
    .cummunityIcon a { padding-left: 3em !important;}
    .recommnetIcon a { padding-left: 3.2em !important;}
    .bookingIcon a { padding-left: 2.5em !important; }
    .bookingIcon {margin-right: 0 !important;}
}

/* FRONTPAGE */

/* Frontpage Slideshow */
.flexslider img, .flexslider .slides {width: 100% !important;}
.flexslider img {height: auto !important;}
.flexslider {margin: 0; background: none; border: none; overflow: hidden;}

/* Frontpage articles */
.frontStories > div, .frontStories .mainBar ul {margin: 0 2em 0 2em;}
.frontStories div img {display: block; width: 100%; margin-bottom: 1.5em; height: auto;}

@media all and (min-width: 550px) {
    .frontStories > div {width: 43%; float: left; max-width: 417px; margin: 0 1em;}
    .frontStories > div.clear {float: none; width: auto;}
}

@media all and (min-width: 550px) and (max-width: 860px) {
    .frontStories > div:nth-child(even) {float: right;}
    .frontStories > div:nth-child(3n) {clear: both;}
}

@media all and (min-width: 860px) {
    .frontStories > div {width: 22.7%; float: left; margin: 0 3% 0 0; max-width: 204px;}
    .frontStories .mainBar ul {margin: 0;}
    .frontStories .mainBar {margin: 0 !important;}
    .frontStories > div.clear {float: none; width: auto;}
    .frontStories div p {font-size: 0.8em;}
}

/* CONTENT PAGES */
.featuredArticleImg img {width: 100%; height: auto;}
.contentLeft, .contentRight {padding: 0 2em 0.5em 2em;}
.contentLeft h3 {margin-bottom: 0.4em;}
.contentArea > article img, .contentLeft article img {margin-bottom: 1em;}
.featuredArticleImg img {margin-bottom: 0  !important;}
.contentRight p {margin: 0;}

@media all and (max-width: 400px) {
    .contentArea > article img, .contentLeft article img {max-width: 100%;}
}

@media all and (min-width: 860px) {
    .contentLeft, article.page {padding: 0;}
    .contentLeft {float: left; width: 74%; margin: 0 3% 0 0;}
    .contentRight {float: left; width: 22.8%; max-width: 204px; padding: 0;}
    .contentLeft p, .contentLeft li {font-size: 0.8em;}
}

/* Content blocks */
.contentRight .contentBlock, .contentArea > article.page {margin: 0 0 1em 0;}
.contentRight .contentBlock li {font-family: 'Monda', tahoma, sans-serif; color: #575656;}
.contentRight .contentBlock ul {margin: 0 0 1em 1.2em;}
.contentRight .contentBlock h3 {font-size: 1.6em; }
.contentRight .contentBlock.video h3 {font-weight: bold; color: #00374e; font-family: 'Monda',tahoma, arial, sans-serif; line-height: 120%; font-size: 1em; letter-spacing: normal;}
.contentBlock figure, .contentBlock img {width: 100%; height: auto;}

@media all and (min-width: 600px) and (max-width: 860px) {
    .contentRight > div {float: left; width: 45%;}
    .contentRight > div:nth-child(odd) {margin-right: 5%;}
}

@media all and (min-width: 860px) {
    .contentRight .contentBlock, .contentArea > article.page {font-size: 0.8em;}
}

/* Boats */
.featuredArticleImg {position: relative; margin: 1% 0;}
.featuredArticleImg.boats img {display: block; width: 100%; margin: 0 auto 0 auto;}
.featuredArticleImg.boats a {display: block; position: absolute; width: 5%; height: 1.5em; top: 48%; color: transparent; float: left; text-align: center; cursor: pointer; background-size: contain; background-position: center; background-repeat: no-repeat;}
.featuredArticleImg.boats .leftArrow {background-image: url('../img/icons/arrow1.png'); left: 0;}
.featuredArticleImg.boats .rightArrow {background-image: url('../img/icons/arrow2.png'); right: 0;}

/* Gallery options */
.ngg-gallery-thumbnail img, .ngg-gallery-thumbnail a:hover {border: none !important; background-color: transparent !important;}
.ngg-gallery-thumbnail img {height: auto; width: 100%; max-width: 204px; display: block; margin: 0 auto 0 auto !important;}
.ngg-gallery-thumbnail-box {width: 100%; float: none;}
.ngg-gallery-thumbnail {width: 100% ;}

@media all and (min-width: 600px) {
    .ngg-gallery-thumbnail-box {width: 47%; margin-bottom: 1%; margin-right: 1%; float: left;}
    .ngg-gallery-thumbnail-box:nth-child(even) {margin-right: 0;}
}

@media all and (min-width: 860px) {
    .ngg-gallery-thumbnail-box:nth-child(even) {margin-right: 1%;}
    .ngg-gallery-thumbnail-box:nth-child(3n+3) {margin-right: 0;}
    .ngg-gallery-thumbnail-box {width: 32.5%;}
}

/* :: BLOG :: */
.blog .contentLeft article {border: 1px solid rgb(221, 221, 221); padding: 0.5em; margin: 0 0 1.875em;}

/* Header */
.blog .contentArea article .titleArea {margin: 0 0 0.5em 0;}
.blog .contentArea article h1 a {font-family: 'Oleo Script', sans-serif; text-decoration: none;}
.blog .contentArea article h1 a:hover {text-decoration: underline;}
.blog .contentArea article .featuredArticleImg  {margin-top: 1em; border: 1px solid #eee; padding: 5px 5px 0 5px;}
.contentArea article .entry-meta, .commentlist li footer .commentmetadata {font-size: 0.6em;}

@media all and (min-width: 37.5em) { /* 600 px*/
    .blog .contentArea article .featuredArticleImg {float: right; width: 45%; margin-top: 0;}
    .blog .contentArea article div.titleArea.responsive {float: left; width: 45%;}
    .blog .contentArea article .featuredArticleImg {margin: 0.5em;}
}

/* Content */
.blog .contentArea div.entry-content {margin: 0;}

/* Img */
.blog .contentLeft article div.entry-content img, .blog .contentLeft article div.entry-content figure {display: block; margin: 0.5em; max-width: 100%;}

/* Navigation */
.blog .contentArea .paginateNav a, .blog .contentArea .paginateNav span { display: block; float: left; padding: 0.3em; text-align: center; margin: 0 1% 0 1%; border: 1px solid rgb(221, 221, 221); color: #000; line-height: 2em; text-decoration: none;}
.blog .contentArea .paginateNav span.current, .blog .contentArea .paginateNav a:hover {background: rgb(221, 221, 221);}

/* Comments */
.comments-title{font-size: 1.5em !important;  margin-bottom: 0.5em;}

.commentlist {margin: 0; list-style: none;}
.commentlist li {border: 1px solid rgb(221, 221, 221); padding: 0.5em; margin: 0 0 1.875em;}
.commentlist li footer {margin-bottom: 0.5em;}
.commentlist li footer:after {content: ''; display: block; clear: both; width: 100%;}
.commentlist li footer img {float: left; margin: 0 0.5em 0 0;}
.commentlist li footer cite a {font-weight: bold; text-decoration: none;}