* {
    margin: 0;
    padding: 0;
}

html, body {
    height: 100%;
}

body {
    font-family: 'Merriweather', 'verdana', 'geneva', 'serif';
    font-weight: 400;
}
    
a:link {
	text-decoration: none;
	color: rgb(50, 130, 0);
}
a:hover, a:focus {
	text-decoration: underline;
}
a:visited {
	color: rgb(120, 160, 0);
}

/* 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: rgb(253, 253, 253);
}

/* 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: rgb(110, 141, 7);
}

/* 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: rgb(160, 200, 50);
}
#langlink a:visited {
    color: rgb(160, 200, 50);
}

#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;
	}   
}