/* CSS crunched with Crunch - http://crunchapp.net/ */
/* sections */
body {
  margin: 0;
  padding: 0;
  background: #ffffff;
  color: #000000;
}
#wrapper {
  width: 100%;
  font-family: arial, sans-serif;
  font-size: 100%;
}
@media all and (min-width: 801px) {
  #wrapper {
    max-width: 1096px;
    margin: 0 auto 0 auto;
    font-size: 76%;
  }
}
header,
footer {
  position: relative;
  clear: both;
  float: left;
  width: 100%;
}
article {
  min-height: 350px;
  margin-left: 54px;
}
aside {
  clear: both;
}
/* header */
header {
  background: url('/ikoner/header.jpg') no-repeat;
  margin: 0;
  width: 100%;
  height: 110px;
}
#homePage {
  position: absolute;
  left: 0;
  top: 68px;
  width: 204px;
  height: 38px;
}
/* primary menu */
.primary_menu {
  position: fixed;
  top: 166px;
  width: 48px;
}
@media all and (max-height: 500px) {
  .primary_menu {
    top: 110px;
  }
}
.primary_menu ul {
  margin: 0;
  padding: 0;
}
.primary_menu ul li {
  list-style: none;
  display: block;
  width: 48px;
  height: 48px;
  margin: 8px 0 0 0;
  text-indent: -9000px;
}
.primary_menu ul li a {
  display: block;
  width: 100%;
  height: 100%;
  -webkit-border-top-left-radius: 0;
  -webkit-border-top-right-radius: 8px;
  -webkit-border-bottom-right-radius: 8px;
  -webkit-border-bottom-left-radius: 0;
  -moz-border-radius-topleft: 0;
  -moz-border-radius-topright: 8px;
  -moz-border-radius-bottomright: 8px;
  -moz-border-radius-bottomleft: 0;
  border-top-left-radius: 0;
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
  border-bottom-left-radius: 0;
  background-image: url('/ikoner/venstremenu.gif');
  background-size: 168px 823px;
}
.retina .primary_menu ul li a {
  background-image: url('/ikoner/venstremenu@2.gif');
}
.no {
  -webkit-border-top-left-radius: 0;
  -webkit-border-top-right-radius: 8px;
  -webkit-border-bottom-right-radius: 8px;
  -webkit-border-bottom-left-radius: 0;
  -moz-border-radius-topleft: 0;
  -moz-border-radius-topright: 8px;
  -moz-border-radius-bottomright: 8px;
  -moz-border-radius-bottomleft: 0;
  border-top-left-radius: 0;
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
  border-bottom-left-radius: 0;
  background-image: url('/ikoner/venstremenu.gif');
  background-size: 168px 823px;
}
.retina .no {
  background-image: url('/ikoner/venstremenu@2.gif');
}
.thumbs a {
  background-position: -2px 0px;
}
.hover .thumbs a:hover,
.thumbs a:focus {
  background-position: -57px 0px;
}
.thumbs a:active {
  background-position: -112px 0px;
}
.no.thumbs {
  background-position: -112px 0px;
}
.nextmini a {
  background-position: -2px -55px;
}
.hover .nextmini a:hover,
.nextmini a:focus {
  background-position: -57px -55px;
}
.nextmini a:active {
  background-position: -112px -55px;
}
.no.nextmini {
  background-position: -112px -55px;
}
.prevmini a {
  background-position: -2px -110px;
}
.hover .prevmini a:hover,
.prevmini a:focus {
  background-position: -57px -110px;
}
.prevmini a:active {
  background-position: -112px -110px;
}
.no.prevmini {
  background-position: -112px -110px;
}
.pict a {
  background-position: -2px -165px;
}
.hover .pict a:hover,
.pict a:focus {
  background-position: -57px -165px;
}
.pict a:active {
  background-position: -112px -165px;
}
.no.pict {
  background-position: -112px -165px;
}
.nextpict a {
  background-position: -2px -220px;
}
.hover .nextpict a:hover,
.nextpict a:focus {
  background-position: -57px -220px;
}
.nextpict a:active {
  background-position: -112px -220px;
}
.no.nextpict {
  background-position: -112px -220px;
}
.prevpict a {
  background-position: -2px -275px;
}
.hover .prevpict a:hover,
.prevpict a:focus {
  background-position: -57px -275px;
}
.prevpict a:active {
  background-position: -112px -275px;
}
.no.prevpict {
  background-position: -112px -275px;
}
.quest a {
  background-position: -2px -330px;
}
.hover .quest a:hover,
.quest a:focus {
  background-position: -57px -330px;
}
.quest a:active {
  background-position: -112px -330px;
}
.no.quest {
  background-position: -112px -330px;
}
.info a {
  background-position: -2px -385px;
}
.hover .info a:hover,
.info a:focus {
  background-position: -57px -385px;
}
.info a:active {
  background-position: -112px -385px;
}
.no.info {
  background-position: -112px -385px;
}
.home a {
  background-position: -2px -440px;
}
.hover .home a:hover,
.home a:focus {
  background-position: -57px -440px;
}
.home a:active {
  background-position: -112px -440px;
}
.no.home {
  background-position: -112px -440px;
}
.photograph a {
  background-position: -2px -495px;
}
.hover .photograph a:hover,
.photograph a:focus {
  background-position: -57px -495px;
}
.photograph a:active {
  background-position: -112px -495px;
}
.no.photograph {
  background-position: -112px -495px;
}
@media all and (min-height: 400px) {
  .touch .primary_menu {
    width: 100%;
  }
  .touch .primary_menu ul .prevpict,
  .touch .primary_menu ul .prevmini,
  .touch .primary_menu ul .nextpict,
  .touch .primary_menu ul .nextmini {
    position: fixed;
    bottom: 3em;
  }
  .touch .primary_menu ul .prevpict,
  .touch .primary_menu ul .prevmini {
    left: 0;
  }
  .touch .primary_menu ul .nextpict,
  .touch .primary_menu ul .nextmini {
    right: 0;
    z-index: 2;
  }
  .touch .primary_menu ul .nextpict a,
  .touch .primary_menu ul .nextmini a {
    -webkit-border-top-left-radius: 8px;
    -webkit-border-top-right-radius: 0;
    -webkit-border-bottom-right-radius: 0;
    -webkit-border-bottom-left-radius: 8px;
    -moz-border-radius-topleft: 8px;
    -moz-border-radius-topright: 0;
    -moz-border-radius-bottomright: 0;
    -moz-border-radius-bottomleft: 8px;
    border-top-left-radius: 8px;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 8px;
  }
  .touch .primary_menu ul .nextmini a {
    background-position: -2px -715px;
  }
  .hover .touch .primary_menu ul .nextmini a:hover,
  .touch .primary_menu ul .nextmini a:focus {
    background-position: -57px -715px;
  }
  .touch .primary_menu ul .nextmini a:active {
    background-position: -112px -715px;
  }
  .touch .primary_menu ul .no.nextmini {
    background-position: -112px -715px;
  }
  .touch .primary_menu ul .nextpict a {
    background-position: -2px -770px;
  }
  .hover .touch .primary_menu ul .nextpict a:hover,
  .touch .primary_menu ul .nextpict a:focus {
    background-position: -57px -770px;
  }
  .touch .primary_menu ul .nextpict a:active {
    background-position: -112px -770px;
  }
  .touch .primary_menu ul .no.nextpict {
    background-position: -112px -770px;
  }
  .touch #myAlbumComments,
  .touch #localComments,
  .touch #VisKommentar {
    padding-right: 54px;
  }
  article section {
    padding-right: 54px;
  }
}
/*
.about {
  clear: both;   
  width: 100%;
  display: block;
  @media all and (min-width: 801px) {
    display: flex;
  }
  section { 
    padding-right: @elementGap;
    p {
      padding-right: 0;
      &:first-child {
        margin-top: 0;
      }
    }
  }
}
*/
/* article */
/* thumbnails */
.thumbnails {
  list-style: none;
  margin: 0;
  padding: 0;
  line-height: 0;
  text-align: center;
}
.thumbnails li {
  display: inline-block;
}
.thumbnails li a {
  float: left;
  width: 156px;
  height: 156px;
  margin-right: 8px;
  margin-bottom: 8px;
  text-align: center;
  background: #e0e0e0;
  background: -moz-linear-gradient(-45deg, #e0e0e0 0%, #a0a0a0 100%);
  background: -webkit-gradient(linear, left top, right bottom, color-stop(0%, #e0e0e0), color-stop(100%, #a0a0a0));
  background: -webkit-linear-gradient(-45deg, #e0e0e0 0%, #a0a0a0 100%);
  background: -o-linear-gradient(-45deg, #e0e0e0 0%, #a0a0a0 100%);
  background: -ms-linear-gradient(-45deg, #e0e0e0 0%, #a0a0a0 100%);
  background: linear-gradient(-45deg, #e0e0e0 0%, #a0a0a0 100%);
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  border-radius: 8px;
}
.thumbnails li a img {
  border-style: none;
  margin: 15px auto 0 auto;
}
.hover .thumbnails li a:hover,
.thumbnails li a:focus {
  background: #fafafa;
  background: -moz-linear-gradient(-45deg, #fafafa 0%, #bababa 100%);
  background: -webkit-gradient(linear, left top, right bottom, color-stop(0%, #fafafa), color-stop(100%, #bababa));
  background: -webkit-linear-gradient(-45deg, #fafafa 0%, #bababa 100%);
  background: -o-linear-gradient(-45deg, #fafafa 0%, #bababa 100%);
  background: -ms-linear-gradient(-45deg, #fafafa 0%, #bababa 100%);
  background: linear-gradient(-45deg, #fafafa 0%, #bababa 100%);
}
.hover .thumbnails li a:hover img,
.thumbnails li a:focus img,
.thumbnails li a:visited,
.thumbnails li a:link,
.thumbnails li a:visited img,
.thumbnails li a:link img {
  text-decoration: none;
}
.picturecontainer {
  position: relative;
  float: left;
  margin: 0;
  padding: 0;
}
/* thumbnails */
/* Comment */
#singlePicture img {
  display: block;
  float: left;
  width: auto;
  max-width: 100%;
  padding: 0 0 1em 0;
}
@media all and (max-height: 700px) {
  #singlePicture img {
    max-height: 605px;
  }
}
@media all and (max-height: 650px) {
  #singlePicture img {
    max-height: 555px;
  }
}
@media all and (max-height: 600px) {
  #singlePicture img {
    max-height: 505px;
  }
}
@media all and (max-height: 550px) {
  #singlePicture img {
    max-height: 455px;
  }
}
@media all and (max-height: 500px) {
  #singlePicture img {
    max-height: 405px;
  }
}
@media all and (max-height: 450px) {
  #singlePicture img {
    max-height: 355px;
  }
}
@media all and (max-height: 400px) {
  #singlePicture img {
    max-height: 305px;
  }
}
#myAlbumComments,
#localComments {
  width: 95%;
  float: left;
}
@media all and (max-width: 801px) {
  #myAlbumComments,
  #localComments {
    width: 85%;
  }
}
@media all and (max-width: 480px) {
  #myAlbumComments,
  #localComments {
    width: 75%;
  }
}
@media all and (min-width: 801px) {
  #myAlbumComments,
  #localComments {
    display: inline-block;
    width: auto;
    min-width: 32em;
  }
  #singlePicture img {
    padding-right: 8px;
  }
}
nav.secondary_menu {
  clear: both;
  z-index: 3;
}
h2,
h3 {
  font-family: Georgia, Verdana, Arial;
  font-weight: bold;
  margin: 0;
  padding: 0;
}
h2 {
  position: relative;
  float: left;
  width: 100%;
  text-align: center;
  font-size: 1.5em;
  min-height: 64px;
}
@media all and (min-width: 801px) {
  h2 {
    font-size: 2em;
  }
}
h3 {
  font-size: 1.125em;
  text-align: left;
  padding: 0 2em 0 0;
}
@media all and (min-width: 801px) {
  h3 {
    font-size: 1.5em;
  }
}
a {
  color: #103838;
  font-weight: bold;
  text-decoration: none;
}
.hover a:hover {
  text-decoration: underline;
}
dl {
  width: 100%;
}
dt {
  margin: 0.25em 0 0.125em 0;
  font-weight: bold;
}
dd {
  margin-left: 2em;
}
p {
  padding-right: 2em;
}
aside p {
  clear: both;
}
q {
  display: block;
  width: 11em;
  float: right;
  border: solid 1px #103838;
  padding: 0.5em;
  margin: 0 0 0.5em 0.5em;
}
@media all and (max-width: 800px) {
  p,
  dd {
    overflow-wrap: break-word;
    word-wrap: break-word;
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
    -moz-hyphens: auto;
    hyphens: auto;
  }
}
/* form */
fieldset.comment,
fieldset.info,
fieldset.namemail,
fieldset.actions {
  clear: both;
  float: left;
  width: 85%;
  font-weight: bold;
  margin: 8px 0 0 0;
  padding: 8px;
  border: #103838 1px solid;
}
fieldset.comment textarea {
  font-size: 1.3em;
  width: 80%;
  height: 6em;
  margin: 8px 0 8px 8px;
}
fieldset.namemail input,
fieldset.info input {
  float: left;
  width: 75%;
  font-size: 1.1em;
  margin: 12px 0 0 0;
}
fieldset.actions {
  border-style: none;
}
fieldset.actions .button {
  width: 12%;
  min-width: 5em;
  font-size: 1.2em;
  margin: 0.5em 0.5em 0.5em 0;
  padding: 0.1em;
}
label {
  clear: both;
  float: left;
  width: 5.8em;
  font-size: 1em;
  text-align: right;
  margin: 0.75em 0.5em 0 0;
}
legend {
  padding: 0 0.5em 0 0.5em;
}
span.required {
  color: #ff0000;
  font-weight: bold;
}
/* default styles thar are later changed */
#VisKommentar,
#FMgem,
#FMhent,
#FMslet {
  display: none;
}
/* footer */
#footer {
  text-align: center;
  width: 70%;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  /* Firefox */
  padding: 0;
  margin: 8px 15% 8px 15%;
  background: #ffffff;
  background: -moz-linear-gradient(-45deg, #ffffff 0%, #e0e0e0 100%);
  background: -webkit-gradient(linear, left top, right bottom, color-stop(0%, #ffffff), color-stop(100%, #e0e0e0));
  background: -webkit-linear-gradient(-45deg, #ffffff 0%, #e0e0e0 100%);
  background: -o-linear-gradient(-45deg, #ffffff 0%, #e0e0e0 100%);
  background: -ms-linear-gradient(-45deg, #ffffff 0%, #e0e0e0 100%);
  background: linear-gradient(-45deg, #ffffff 0%, #e0e0e0 100%);
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  border-radius: 8px;
}
#footer ul {
  padding: 0;
  list-style: none;
  display: inline-block;
}
#footer ul li {
  display: block;
  float: left;
  width: 25%;
  padding-bottom: 0.5em;
  padding-top: 0.2em;
}
#footer ul li.cpy-mail {
  width: 100%;
  padding-top: 1em;
}
#footer ul li > span,
#footer ul li > a {
  display: block;
  clear: both;
}
#footer ul li a {
  color: #103838;
  font-weight: bold;
  font-size: 0.9em;
  text-decoration: none;
}
.hover #footer ul li a:hover {
  color: #217373;
  text-decoration: underline;
}
@media all and (max-width: 800px) {
  #footer ul li {
    width: 50%;
  }
}
@media all and (max-width: 480px) {
  article {
    /* margin-left: 1em; */
  }
  #footer ul li {
    width: 100%;
  }
}
@media print {
  #VisKommentar .actions,
  #VisKommentar p,
  nav.primary_menu,
  nav.secondary_menu {
    display: none;
  }
  #footer ul li {
    display: none;
  }
  #footer ul li.cpy-mail {
    display: block;
  }
  #footer ul li.cpy-mail a {
    display: none;
  }
  /* general styles */
  .displayNone {
    position: absolute;
    left: -999px;
    width: 1px;
    height: 1px;
    margin: 0;
    padding: 0;
    font-size: 0;
    line-height: 0;
    overflow: hidden;
  }
  .thumbnails li a {
    background: none;
    width: 200px;
    height: 200px;
    border: 2px solid #333333;
  }
}
@media screen {
  /* general styles */
  .displayNone,
  .onlyPrint {
    position: absolute;
    left: -999px;
    width: 1px;
    height: 1px;
    margin: 0;
    padding: 0;
    font-size: 0;
    line-height: 0;
    overflow: hidden;
  }
}
