@charset "UTF-8";
* {
  margin: 0;
  padding: 0; }

html, body {
  height: 100%; }

body {
  font-family: 'Merriweather', 'verdana', 'geneva', 'serif';
  font-weight: 400; }

a:link {
  text-decoration: none;
  color: #328200; }

a:hover, a:focus {
  text-decoration: underline; }

a:visited {
  color: #78a000; }

/* Tunnbrödswrap
 * All contents except the footer is placed inside this div.
 * Makes the footer appear at the bottom of window
 * OR after contents if contents go further than bottom */
#wrapper {
  height: 100%;
  margin: 0 auto -96px; }

/* "Datorföreningen Update" title */
#title {
  font-family: 'Open Sans', 'verdana', 'sans-serif';
  font-weight: 800;
  color: #fdfdfd; }

/* Main menu (Wiki, Bli medlem, etc.) */
#main-nav {
  padding: 10px 0px 20px 0px; }

/* Main menu buttons with grey backgrounds */
#main-nav div {
  font-family: "Droid Sans";
  font-size: 1em;
  font-weight: bold;
  display: inline-block;
  border-radius: 3px;
  padding: 0.35em 0.7em 0.35em 0.7em;
  margin: 0 0.6em 0em 0.3em;
  background: #555; }

/* Hovered main menu button (with link) is green */
#main-nav div:hover {
  background: #6e8d07; }

/* Main menu button link text is white */
#main-nav a div {
  color: #eee; }

/* Main menu button link visited text is also white */
#main-nav a:visited div {
  color: #eee; }

/* The div "currentpage" is the one menu button
 * to the current page, which has no link in it */
#main-nav div#currentpage {
  background: #555;
  color: #d1d15d; }

#langlink a {
  color: #a0c832; }

#langlink a:visited {
  color: #a0c832; }

#content p {
  padding-top: 1em;
  line-height: 1.4; }

#content ol {
  padding-left: 1em; }

#content ol li {
  padding-top: 1em;
  line-height: 1.4; }

#content ul {
  list-style: none; }

#content ul li {
  padding-top: 1em;
  line-height: 1.4;
  padding-left: 1em; }

#content ul li:before {
  vertical-align: 0.1em;
  content: "\25AA \A0 \A0";
  /* That's a square and two nbsp in hex format */
  color: green; }

#stadgar h3 {
  margin-top: 2em; }

#fejan {
  float: left;
  width: 350px;
  margin-top: 3em;
  margin-left: 3em; }

#footer-background {
  background-color: #ddd; }

div.list div {
  margin-top: 2.5em; }

div.list p {
  margin-left: 1.5em; }

div.happeningbox {
  width: 100%;
  heigh: auto;
  margin-top: 10px;
  margin-bottom: 10px;
  display: inline-block; }

img.happening {
  width: 30%;
  height: auto;
  float: left; }

p#happening {
  width: 65%;
  float: left;
  padding-left: 5%;
  padding-top: 0px; }

/* COMMON DESKTOP MODE */
@media only screen and (min-width: 801px) {
  /* Here, body has a green background on the left, which forms a 
     * lower extension of #elsa */
  body {
    background: -webkit-linear-gradient(90deg, #425901 74px, black 79px, black 364px, white 364px);
    background: -o-linear-gradient(90deg, #425901 74px, black 79px, black 364px, white 364px);
    background: -moz-linear-gradient(90deg, #425901 74px, black 79px, black 364px, white 364px);
    background: linear-gradient(90deg, #425901 74px, black 79px, black 364px, white 364px); }
  /* Header with the Update lines to the right 
     * 12.5% of viewport height, but no less than 125px
     * the lines are 15% of body width
     */
  #header-background {
    background-color: black;
    background-image: url("Update-linjer_end_01_right_12stycken.png");
    background-repeat: no-repeat;
    background-position: right;
    -webkit-background-size: 15% 100%;
    /* For older browsers */
    -moz-background-size: 15% 100%;
    -o-background-size: 15% 100%;
    background-size: 15% 100%;
    height: 12.5%;
    height: 12.5vh;
    min-height: 125px; }
  /* Inner header container. 
	 * Margin makes it line up with right edge of elsa */
  #header-inner {
    margin-left: 364px; }
  /* "Datorföreningen Update" title */
  #title {
    font-size: 3.6em; }
  #main-nav {
    float: left; }
  div#langlink {
    float: right;
    margin-right: 21%;
    margin-top: 1.4em;
    font-family: "Droid Sans";
    font-size: 0.9em;
    font-weight: bold; }
  /* Div containing Elsa picture.
	 * Height is 85% of viewport height
	 * (is supposed to be 100% together with the 12.7% header ...)
	 */
  #elsa {
    float: left;
    position: absolute;
    z-index: -1;
    min-width: 364px;
    /* min-height: 700px; */
    height: 85%;
    height: 85vh;
    margin: 0;
    background-image: url("Elsa_croppad_400x1178.jpg");
    background-repeat: no-repeat;
    background-position: -20px -8px; }
  /* Actual website contents.
	 * Left margin puts it to right of Elsa
	 */
  #content {
    float: left;
    margin: 3em 0 2em 410px;
    max-width: 750px;
    width: 35%; }
  /* Footer divs.
	 * The footer is supposed to follow along with contents, but
	 * stay at bottom if contents don't reach bottom!
	 */
  #footer-background {
    clear: both;
    /* <- just a safety measure */
    min-height: 96px;
    margin-top: -96px;
    text-align: center;
    /* Doesn't appear to appear a scrollbar anymore? */
    /* width: 99.2vw; /* Set to more than that and there'll be a h-scrollbar! >:( */ }
  #footer-container {
    display: inline-block; }
  .footer-column {
    display: inline-block;
    font-size: 0.8em;
    font-family: 'Open Sans', 'verdana', 'sans-serif';
    font-weight: 400;
    text-align: left;
    padding: 1em; }
  .footer-column p {
    padding-top: 0.0em;
    line-height: 1.7; } }

@media only screen and (max-width: 1450px) {
  #title {
    font-size: 3.0em; }
  div#langlink {
    margin-right: 25%; } }

/* At 1200px and less width, the header will be left-aligned
 * and content text slightly smaller. This includes phone mode below. */
@media only screen and (max-width: 1200px) {
  #header-inner {
    margin-left: 1em; }
  #content p {
    font-size: 0.9em; } }

/* At 930px the footer becomes higher; adjust accordingly */
@media only screen and (max-width: 930px) {
  #wrapper {
    margin-bottom: -150px; }
  #footer-background {
    margin-top: -150px; }
  #footer-column {
    padding: 0.5em; } }

/* PHONE MODE */
/* In this mode, none of DESKTOP MODE's defs have been made */
@media only screen and (max-width: 800px) {
  #wrapper {
    min-height: auto;
    height: auto;
    margin: 0;
    border: 0px purple solid; }
  /* No Elsa in this mode! */
  /* Header with no Update-lines */
  #header-background {
    background-color: black;
    padding-top: 1em; }
  /* "Datorföreningen Update" title, smaller */
  #title {
    font-size: 2.1em; }
  /* Navigation area is smaller and buttons are expected to
	 * stack on each other */
  #main-nav div {
    font-size: 0.9em;
    margin: 1em 1em 0 0; }
  div#langlink {
    padding-bottom: 1em;
    font-family: "Droid Sans";
    font-size: 1em;
    font-weight: bold; }
  /* Elsa is not there :( */
  #elsa {
    display: none; }
  /* #content is not floating in phone mode */
  #content {
    float: clear;
    margin: 2em 1em 3em 1em; }
  /* Footer don't stack at bottom, it only follows content area */
  #footer-background {
    width: 100%;
    margin: 0;
    background-color: white;
    border-top: 3px dotted #bbb; }
  .footer-column {
    font-size: 0.8em;
    font-family: 'Open Sans', 'verdana', 'sans-serif';
    font-weight: 400;
    text-align: left;
    padding: 1em; }
  .footer-column p {
    padding-top: 0.0em;
    line-height: 1.7; } }