/*
 * Restaurang Marina's: site styles.
 *
 * Ported from the Ruby app's compiled stylesheet (app/stylesheets/*.scss -> public/stylesheets/style.css,
 * identical to what the live site served in 2026). Rule order and selectors are kept as they were, because
 * the layout relies on them; only Internet Explorer and Chrome Frame hacks and unused helper classes were
 * removed. Edit this file directly; there is no build step.
 */
@media only screen and (min-width: 1140px) {
  header #carousel {
    display: block;
    float: right;
    position: relative;
    overflow: hidden;
    height: 285px;
    width: 576px; }
    header #carousel ul {
      width: 20000em;
      position: absolute;
      list-style: none;
      margin: 0;
      padding: 0; }
      header #carousel ul li {
        float: left; }

  body#page7 .wrapper.main.clearfix article {
    width: 256px; }
  body#page7 .wrapper.main.clearfix aside {
    width: 680px; }

  body#page9 .wrapper.main aside img:first-child {
    position: static;
    width: 66%; }
  body#page9 .wrapper.main aside img {
    position: relative;
    width: 50%;
    top: -550px;
    left: 50%;
    border: solid 4px white; } }
/* ==========================================================================
   HTML5 Boilerplate styles - h5bp.com (generated via initializr.com)
   ========================================================================== */
html,
button,
input,
select,
textarea {
  color: #222; }

body {
  font-size: 1em;
  line-height: 1.4; }

::-moz-selection {
  background: #b3d4fc;
  text-shadow: none; }

::selection {
  background: #b3d4fc;
  text-shadow: none; }

hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #ccc;
  margin: 1em 0;
  padding: 0; }

img {
  vertical-align: middle; }

fieldset {
  border: 0;
  margin: 0;
  padding: 0; }

textarea {
  resize: vertical; }

/* ===== Initializr Styles ==================================================
   Author: Jonathan Verrecchia - verekia.com/initializr/responsive-template
   ========================================================================== */
body {
  font: 14px Verdana, Geneva, sans-serif; }

.wrapper {
  width: 90%;
  margin: 0 5%; }

/* ===================
    ALL: Webben Theme
   =================== */
body {
  background: #ededed no-repeat top center url(/img/tapet-bg.jpg); }

img {
  width: 100%; }

header {
  background: no-repeat white; }
  header h1 {
    text-align: center;
    width: 450px;
    height: 285px; }
    header h1 a {
      display: block;
      width: 100%;
      height: 100%;
      text-indent: -9999em;
      overflow: hidden;
      background: url("/img/marinas-logo.png") no-repeat; }
    header h1 a {
      margin: 0;
      padding: 0;
      color: #542e19;
      text-decoration: none; }
    header h1 a:visited {
      color: #542e19; }

.title {
  color: white; }

/* ==============
    MOBILE: Menu
   ============== */
nav ul {
  margin: 0;
  padding: 0;
  background: white; }

nav a {
  -moz-transition: all 0.25s ease;
  -o-transition: all 0.25s ease;
  -webkit-transition: all 0.25s ease;
  transition: all 0.25s ease;
  display: block;
  margin-bottom: 10px;
  padding: 15px 0;
  text-align: center;
  text-decoration: none;
  font-weight: bold;
  color: white;
  background: #d64e0d; }

nav a:hover,
nav a.selected {
  color: black; }

/* ==============
    MOBILE: Main
   ============== */
.main {
  padding: 30px 0;
  background: white; }

.main article h1 {
  font-size: 2em; }

.main aside {
  padding: 0px 5% 10px; }

.footer-container footer {
  background: white;
  color: #542e19;
  padding: 20px 0; }

/* ==========================================================================
   Author's custom styles
   ========================================================================== */
/* ==========================================================================
   Media Queries
   ========================================================================== */
@media only screen and (min-width: 480px) {
  /* ====================
      INTERMEDIATE: Menu
     ==================== */
  nav {
    /* Quick fix for background */
    height: 2em;
    background: #d64e0d; }
    nav ul {
      background: #d64e0d; }

  nav a {
    float: left;
    margin: 0 0.85%;
    padding: 3px 1%;
    margin-bottom: 0;
    background: transparent; }

  nav li:first-child a {
    margin-left: 0; }

  nav li:last-child a {
    margin-right: 0; }

  nav ul li {
    display: inline; } }
@media only screen and (min-width: 768px) {
  /* ============
      WIDE: Main
     ============ */
  .main article {
    float: left;
    width: 57%; }

  .main aside {
    float: right;
    width: 28%; } }
@media only screen and (min-width: 1140px) {
  /* ===============
      Maximal Width
     =============== */
  .wrapper {
    width: 1026px;
    /* 1140px - 10% for margins */
    margin: 0 auto; } }
/* ==========================================================================
   Helper classes
   ========================================================================== */
.clearfix:before,
.clearfix:after {
  content: " ";
  display: table; }

.clearfix:after {
  clear: both; }

/* ==========================================================================
   Print styles
   ========================================================================== */
@media print {
  * {
    background: transparent !important;
    color: #000 !important;
    /* Black prints faster: h5bp.com/s */
    box-shadow: none !important;
    text-shadow: none !important; }

  a,
  a:visited {
    text-decoration: underline; }

  a[href]:after {
    content: " (" attr(href) ")"; }

  abbr[title]:after {
    content: " (" attr(title) ")"; }

  /*
   * Don't show links for images, or javascript/internal links
   */
  a[href^="javascript:"]:after,
  a[href^="#"]:after {
    content: ""; }

  pre,
  blockquote {
    border: 1px solid #999;
    page-break-inside: avoid; }

  thead {
    display: table-header-group;
    /* h5bp.com/t */ }

  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; } }
body {
  font-style: italic; }

.wrapper {
  border: 8px solid white; }

header h1 a {
  background-position: 0 45px; }

.wrapper.main {
  background-color: #e0dfdb;
  color: #1d1d1b;
  border-top: 0;
  padding-top: 0; }
  .wrapper.main article {
    padding-top: 30px; }

.header-container .wrapper {
  border-bottom: 0; }

/* Page-specific rules. The ids are pages.id in the database, so keep them when moving content:
   page1 Om Marina's, page3 À la carte, page4 Lunchmeny, page5 Hotellrum, page6 Kontakt,
   page7 Aktuellt (front page), page8 Pizza, page9 Bastu, page10 Bildgalleri, page11 Julmenyer (hidden). */
body#page1 .wrapper.main {
  background-color: white; }

body#page7 .wrapper.main {
  background-color: #f7e7c3;
  color: #491e00; }
  body#page7 .wrapper.main aside p {
    margin-top: 0; }

body#page3 .wrapper.main aside,
body#page4 .wrapper.main aside {
  padding-top: 30px; }
body#page3 .wrapper.main table tr td,
body#page4 .wrapper.main table tr td {
  border: 3px solid white;
  padding: 1em; }
body#page3 .wrapper.main table tr:nth-child(even) td:first-child,
body#page4 .wrapper.main table tr:nth-child(even) td:first-child {
  background-color: #491e00; }
body#page3 .wrapper.main table tr td:first-child,
body#page4 .wrapper.main table tr td:first-child {
  color: white;
  background-color: #d64e0d;
  vertical-align: top;
  font-weight: bold;
  font-style: normal; }

body#page3 .wrapper.main aside img {
  width: 100%; }
body#page3 .wrapper.main article > * {
  clear: both; }
body#page3 .wrapper.main article dl {
  width: 75%; }
  body#page3 .wrapper.main article dl dt {
    float: left;
    width: 65%; }
  body#page3 .wrapper.main article dl dd {
    float: right; }
body#page3 .wrapper.main article ul {
  width: 70%;
  padding: 1em 0 0 0;
  list-style-position: inside; }
body#page3 .wrapper.main article h2 {
  padding-top: 1em; }

body#page4 .wrapper.main aside {
  font-size: 102%; }

body#page8 .wrapper.main dl {
  width: 100%; }
  body#page8 .wrapper.main dl dt {
    font-weight: bold; }

body#page10 .wrapper.main {
  background-color: white; }
  body#page10 .wrapper.main img {
    width: 32.36%;
    margin: .48%;
    -moz-transition: all 1s ease;
    -o-transition: all 1s ease;
    -webkit-transition: all 1s ease;
    transition: all 1s ease; }
  body#page10 .wrapper.main img.portrait {
    width: 20.67%; }
  body#page10 .wrapper.main img.wideportrait {
    width: 22.4%; }
  body#page10 .wrapper.main img:hover, body#page10 .wrapper.main img:active {
    position: relative;
    -webkit-transform: scale(3);
    -moz-transform: scale(3);
    transform: scale(3);
    z-index: 1;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease; }

body#page5 .wrapper.main aside p img {
  width: auto;
  height: 350px; }
body#page5 .wrapper.main aside p:first-child {
  margin-bottom: 0.3em; }
  body#page5 .wrapper.main aside p:first-child img {
    height: 310px; }
body#page5 .wrapper.main aside p:last-child {
  margin-top: 0.3em; }

#carousel {
  display: none; }

aside {
  float: right; }

@media only screen and (max-width: 480px) {
  header h1 {
    width: 216px;
    height: 100px; }
    header h1 a {
      padding: 0;
      margin: 10px 20px;
      background-image: url("/img/marinas-logo-small.png");
      background-position: 30px 0; }

  body {
    margin: 10px 10px 10px -5px; } }
@media only screen and (min-width: 480px) {
  nav {
    clear: both;
    height: 45px; }
    nav ul {
      margin-left: 1em; }
    nav a {
      padding-top: 1em;
      background: #d64e0d;
      margin: 0; } }
@media only screen and (min-width: 768px) {
  body {
    margin: 130px auto; }

  p {
    line-height: 1.5em; }

  .main {
    padding-top: 45px; }
    .main article {
      margin: 0 0 0 5.36%;
      width: 33%; }
      .main article h1 {
        margin-top: 0;
        font-size: 1.8em; }
    .main aside {
      width: 56%;
      padding: 0; }

  header h1 {
    float: left;
    margin: 0; }
    header h1 a {
      background-position: 50px 45px; }

  .footer-container footer p {
    font-style: italic;
    margin-left: 5.36%; }

  body#page7 .wrapper.main article {
    float: right;
    margin: 0 4.386%;
    width: 22%; }
    body#page7 .wrapper.main article h2 {
      background-color: #491e00;
      color: white;
      padding: 0.4em 1.5em;
      letter-spacing: 5px; }
  body#page7 .wrapper.main aside {
    float: left;
    width: 64%; }

  [lang=fi] body#page7 .wrapper.main article h2 {
    letter-spacing: 3px; }

  body#page3 .wrapper.main aside {
    width: 33%; }
  body#page3 .wrapper.main article {
    width: 56%; } }

/* page11 Julmenyer (hidden Christmas menu page): these rules used to be a <style> block in the page content, which
   the Markdown editor does not keep (migration 006 removed it). Scoped so they win exactly where the block did;
   the heading colour only ever showed in the content, not on the logo heading in the header. */
body#page11 .main h1 {
  color: #F21313; }

body#page11 .wrapper.main {
  background: white url(/uploads/jul.jpg) center bottom no-repeat;
  padding-bottom: 25em;
  background-size: 100%; }

body#page11 section {
  text-align: center; }

body#page11 .main article {
  width: 95%; }

@media only screen and (min-width: 480px) {
  body#page11 section {
    width: 33%;
    float: left; } }