/* ------------------------------------
Title:
    Winterquartier Dechtow (CSS)
Author:
    Julius Ehrlich | www.ehrlich-bros.de
Copyright:
    Ehrlich Bros. | www.ehrlich-bros.de
--------------------------------------- */

/* RESET STYLES
--------------------------------------- */
article,aside,details,figcaption,figure,footer,header,hgroup,nav,section{display:block}audio,canvas,video{display:inline;zoom:1}html{font-size:100%;overflow-y:scroll;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}body{font-size:13px;line-height:1.231;margin:0}body,button,input,select,textarea{font-family:sans-serif;color:#222}a{color:#00e}a:visited{color:#551a8b}a:hover{color:#06e}a:focus{outline:thin dotted}a:hover,a:active{outline:0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:700}blockquote{margin:1em 40px}dfn{font-style:italic}hr{display:block;height:1px;border:0;border-top:1px solid #ccc;margin:1em 0;padding:0}ins{background:#ff9;color:#000;text-decoration:none}mark{background:#ff0;color:#000;font-style:italic;font-weight:700}pre,code,kbd,samp{font-family:monospace, monospace;_font-family:'courier new', monospace;font-size:1em}pre{white-space:pre-wrap;word-wrap:break-word}q{quotes:none}q:before,q:after{content:none}small{font-size:85%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}ul,ol{margin:1em 0;padding:0 0 0 40px}dd{margin:0 0 0 40px}nav ul,nav ol{list-style:none;list-style-image:none;margin:0;padding:0}img{border:0;-ms-interpolation-mode:bicubic;vertical-align:middle}svg:not(:root){overflow:hidden}fieldset{border:0;margin:0;padding:0}label{cursor:pointer}legend{border:0;margin-left:-7px;padding:0}button,input,select,textarea{font-size:100%;vertical-align:middle;margin:0}button,input{line-height:normal;overflow:visible}table button,table input{overflow:auto}button,input[type=button],input[type=reset],input[type=submit]{cursor:pointer;-webkit-appearance:button}input[type=checkbox],input[type=radio]{box-sizing:border-box}input[type=search]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}input[type=search]::-webkit-search-decoration{-webkit-appearance:none}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}textarea{overflow:auto;vertical-align:top;resize:vertical}input:invalid,textarea:invalid{background-color:#f0dddd}table{border-collapse:collapse;border-spacing:0}td{vertical-align:top}audio:not([controls]),[hidden]{display:none}figure,form{margin:0}

/* GENERAL STYLES
--------------------------------------- */
body {
    background: #fff;
    color: #333;
    font-family: 'Terminal Dosis', Helvetica, Arial, sans-serif;
    font-size: 16px;
    font-weight: 300;
    height: 100%;
    margin: 0;
    min-height: 100%;
    padding: 0 20px;
}

/* -- SELECTION COLORS -- */
::-moz-selection,
::selection {
    background: #fe57a1;
    color: #fff;
    text-shadow: none;
}

/* -- LINKS -- */
a:link,
a:visited {
    color: #333;
    text-decoration: none;
}

/* -- HEADLINES -- */
h1,
h2,
h3 { font-weight: 300 }
h2 { font-size: 24px }

/* -- TABLES -- */
tr td { padding: 20px 0 }
tr.padding-top td { padding: 10px 0 }
tr { border-bottom: 1px dotted #ccc }
tr:last-child { border-bottom: none }

th {
    font-weight: 500;
    padding: 0 0 10px;
    text-align: left;
    text-transform: uppercase;
}

/* -- IFRAME -- */
iframe {
    border: none;
    width: 100%;
}

/* PAGE STRUCTURE
--------------------------------------- */
#container {
    margin: 0 auto;
    min-width: 400px !important;
    position: relative;
    width: 1008px;
}

/* HEADER
--------------------------------------- */
header {
    position: relative;
    margin: 0 0 20px;
    font-size: 14px;
}

#logo {
    background: url(../img/winterquartier-dechtow-logo.jpg);
    height: 89px;
    display: block;
    text-indent: -10000px;
    width: 331px;
}

header nav ul {
    position: absolute;
    right: 0;
    top: 70px;
}

header nav ul.submenu {
    border-top: 1px dotted #333;
    left: 397px;
    padding-top: 17px;
    top: 105px;
}

header nav li {
    float: left;
    margin: 0 0 0 16px;
    text-transform: uppercase;
}

header nav .submenu li {
    margin: 0 42px 0 0;
}

header nav a.active { font-weight: 500 }

.submenu-padding {
    padding-top: 50px;
}

/* -- MOBILE HEADER -- */
.mobile-header { display: none }

/* -- MOOD SLIDER (CODA SLIDER) -- */
.coda-slider-wrapper { height: 450px }

.coda-slider-wrapper,
.coda-slider {
    overflow: hidden;
    position: relative;
    width: 1008px;
}

.coda-nav-left,
.coda-nav-right { display: none }

.coda-slider .panel {
    float: left;
    width: 1008px;
}

.coda-nav,
.coda-nav ul {
    bottom: 0;
    position: absolute;
    right: 0;
}

.coda-nav ul {
    background: #fff;
    bottom: -5px;
    list-style: none;
    margin: 0;
    padding: 15px 0 15px 10px;
    width: 60px !important;
    z-index: 1;
}

.coda-nav li { float: left }

.coda-nav a {
    background: #e6e6e6;
    display: block;
    height: 7px;
    margin: 0 0 0 3px;
    overflow: hidden;
    text-indent: -1000px;
    width: 7px;
}

.coda-nav a:active { outline: none }
.coda-nav .current { background: #c1c1c1 }

.coda-slider .panel-wrapper {
    position: relative;
    text-align: center;
}

.coda-slider h2 {
    background: #fff;
    padding: 0 60px;
    font-size: 14px;
    font-weight: 300;
    text-transform: uppercase;
    display: inline-block;
}

.coda-slider h2::after {
    content: "";
    height: 1px;
    background: #ccc;
    position: absolute;
    left: 0;
    bottom: 19px;
    width: 100%;
    z-index: -1;
}

.coda-slider-no-js .coda-slider-wrapper {
    overflow-y: scroll !important;
}

.coda-slider-no-js .coda-slider {
    height: 450px;
    overflow: auto !important;
}

/* ARTICLE
--------------------------------------- */
article {
    float: right;
    margin: 0 208px 0 0;
    width: 560px;
}

article h1 {
    background: url(../img/bgs/hr.gif) 0 100% repeat-x;
    font-size: 24px;
    font-weight: 300;
    margin: 0 0 28px;
    padding: 0 0 28px;
}

article p {
    line-height: 24px;
    margin: 0 0 30px;
}

/* ASIDE
--------------------------------------- */
aside {
    float: left;
    padding: 80px 0 0;
    width: 230px;
}

aside small {
    display: block;
    font-size: 10px;
    margin: 0 0 18px;
    text-transform: uppercase;
}

/* two-celling
--------------------------------------- */
.two-celling section {
    float: left;
    margin: 0 28px 0 0;
    width: 490px;
}

.two-celling section.large {
    float: none;
    margin: 0;
    width: 100%;
}

.two-celling section:last-child,
.two-celling section.last { margin: 0 }

.two-celling h2 {
    border-bottom: 1px dotted #333;
    margin: 42px 0 30px;
    padding: 0 0 10px;
}

.two-celling p { line-height: 24px }

.two-celling p a {
    background: url(../img/bgs/link_arrow.png) 100% 7px no-repeat;
    border-bottom: 1px solid #c1c1c1;
    font-weight: 500;
    padding: 0 14px 10px 0;
}

.two-celling .link-list p a {
    background-position: 0 5px;
    border-bottom: 0;
    padding: 0 14px 0 10px;
}

/* IMAGE CYCLING
--------------------------------------- */
.cycle {
    height: 343px;
    overflow: hidden;
    position: relative;
}

.cycle img {
    position: absolute;
    width: 100%;
    z-index: 1;
}

.cycle img.active { z-index: 3 }

/* IMAGES
--------------------------------------- */
dl {
    float: left;
    margin: 0 24px 24px 0;
} 

dd { margin: 16px 0 0 }

/* APPARTMENT DETAILS
--------------------------------------- */
.appartment-details div.mood { padding-top: 50px }
.appartment-details div.mood img { width: 100% }

.appartment-details h2 {
    border-bottom: 1px dotted #333;
    padding: 10px 0;
}

.appartment-details .description { margin: 0 0 62px }
.appartment-details p { line-height: 24px }

.appartment-details aside {
    border-top: 1px solid #c1c1c1;
    position: relative;
    width: 364px;
}

.appartment-details section aside span {
    background: #fff;
    display: block;
    font-size: 14px;
    font-weight: 200;
    left: 58px;
    padding: 0 30px;
    position: absolute;
    text-transform: uppercase;
    top: -10px;
    width: 88px;
}

.appartment-details section article {
    border-top: 1px solid #c1c1c1;
    float: right;
    margin: 0;
    padding: 26px 0;
    width: 618px;
}

/* FANCYBOX
--------------------------------------- */
article.fancybox img {
    height: 196px !important;
    width: 280px !important;
}

.fancybox-lock { margin-right: 0 !important; }
.fancybox-lock .fancybox-overlay { overflow: hidden !important; }

/* FOOTER
--------------------------------------- */
footer {
    background: url(../img/bgs/footer.gif) 100% 0 repeat-x;
    clear: both;
    font-size: 12px;
    margin: 56px 0;
    padding: 20px 0 0;
    text-align: right;
    text-transform: uppercase;
}

footer a { padding: 0 5px }
footer .last { padding-right: 0 }


/* HELPERS
----------------------------------------------- */
.ir { display: block; border: 0; text-indent: -999em; overflow: hidden; background-color: transparent; background-repeat: no-repeat; text-align: left; direction: ltr; }
.ir br { display: none; }
.hidden { display: none !important; visibility: hidden; }
.visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }
.visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; }
.invisible { visibility: hidden; }
.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { zoom: 1; }
.clear { clear: both; }


/* MEDIA QUERIES
----------------------------------------------- */
/* -- IPAD/TABLETS -- */
@media only screen and (max-width: 1024px) {
    #container { width: 90% }
    header nav ul {
        left: 0 !important;
        top: 110px;
    }

    header nav li {
        font-size: 14px;
        margin: 0 16px 0 0;
    }

    .coda-slider-wrapper {
        height: 250px;
        margin: 60px 0 0
    }

    .coda-slider-wrapper,
    .coda-slider { width: 100% }
    #mood { top: -200px }

    #mood .panel-wrapper {
        overflow: hidden;
        position: relative;
        width: 90%;
    }

    #mood .panel-wrapper img {
        position: relative;
        top: 200px;
    }

    #main { margin: 60px 0 0 }

    article {
        float: left;
        margin: 0 70px 0 0;
        width: 100%;
    }

    aside { float: right }
    #main { margin: 20px 0 0 }
    .cycle { margin-top: 40px !important }
}

/* -- iPHONE/IPOD/ANDROID -- */
@media only screen and (max-width: 630px) {
    body {
        margin: 0;
        overflow-x: hidden;
        padding: 0 10px;
    }

    #logo {
        background: url(../img/winterquartier-dechtow-logo_mobile.jpg) 0 0 no-repeat;
        height: 75px;
        width: 100%;
    }

    #container { width: 100% }

    header nav {
        border-bottom: 1px dotted #333;
        padding-bottom: 10px;
    }

    header nav ul { position: static !important }

    header nav li {
        float: none;
        font-size: 14px;
        margin: 0 0 10px;
    }

    header nav .submenu li { margin: 0 0 10px }

    .mobile-header {
        display: block;
        margin: 20px 0 0;
    }

    .coda-slider-wrapper { display: none }
    .coda-slider-wrapper img { width: 100% }
    .coda-nav { display: none }
    #main { margin: 20px 0 0 }
    article { width: 100% !important }
    aside { display: none }
    footer { text-align: center }
    section { width: 100% !important }
    section img { width: 100%; height: 100%; }
   dl { width: 100% }

    .appartments section { margin-bottom: 40px }
    .appartments img { width: 100% }

    .appartment-details div.mood { padding-top: 0 }
    .appartment-details aside {
        border-top: 0;
        display: block !important;
        padding: 0;
        width: 100%;
    }

    .appartment-details article.fancybox dl,
    .appartment-details article.fancybox img { width: 100% !important }
    .appartment-details article.fancybox img { height: 100% !important }
    .cycle { margin-top: 20px !important }
}



/* PRINT STYLES
----------------------------------------------- */
@media print {
    * { background: transparent !important; color: black !important; text-shadow: none !important; filter:none !important; -ms-filter: none !important; } 
    a, a:visited { text-decoration: underline; }
    a[href]:after { content: " (" attr(href) ")"; }
    abbr[title]:after { content: " (" attr(title) ")"; }
    .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; } 
    pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
    thead { display: table-header-group; }
    tr, img { page-break-inside: avoid; }
    img { max-width: 100% !important; }
    @page { margin: 0.5cm; }
    p, h2, h3 { orphans: 3; widows: 3; }
    h2, h3 { page-break-after: avoid; }
}