@charset "utf-8";
/* CSS stylesheet that apply to all pages. */

* { /* Reset settings to make sure no object have any of these settings turned on aka browser default setting. */
	margin: 0; /* Reset margin */
	padding: 0; /* Reset padding */
	border: 0; /* Reset border */
	text-decoration: none; /* Reset text decoration */
	outline: none; /* Reset outlining. This is mainly a fix for Chrome. */
	box-sizing: border-box; /* Set all object to border-box. This is a "fix" to make sure all objects include padding and border instead of having them excluded from width and height settings. */
}

body { /* Settings that applies to everything in the body section (= all visible objects in practise). */
	margin: 0; /* Set default margin */
	padding: 0; /* Set default padding */
	border: 0; /* Set default border */
	font-family: Tahoma, Helvetica, Verdana, Arial, sans-serif, "Myriad Pro", "Trebuchet MS"; /* Set default font-familys */
	font-size: 100%; /* Set default font-size */
	color: white; /* Set default font color to white */
	width: 100%; /* Set default width */
	min-height: 100%; /* Set default minimum height */
	background: url('../img/bg.jpg'); /* Set default background image */
	text-shadow: 0px 2px 3px #555; /* Set default text shadow */
	z-index: 0;  /* Set default z-index. Make all objects default to "layer" 0 on a 3d axis. */
	letter-spacing: 0.3px; /* Set default letter spacing. Makes text look better. */
	box-sizing: border-box; /* Set all object to border-box. This is a "fix" to make sure all objects include padding and border instead of having them excluded from width and height settings. */
	display: block; /* Set default display to block of all objects. */
}

main { /* Settings that applies to everything in the main element. */
	display: block; /* Fix for IE browser. Without this, the <main>-tag doesn't work in IE. */
	position: relative; /* Set position to relative to other objects. */
	margin: 150px auto 50px auto; /* Set margin. Margin on top and bottom of the main element and the sides have auto adjust to content. */
	padding: 0; /* Set padding */
	width: 50%; /* Set width. This makes objects only take up 50% of window view. */
	color: white; /* Set font color of header text. */
	text-align: left; /* Set text align to left. Makes all text align to the left. */
	line-height: 150%; /* Set line height. Makes a gap between text rows. */
	font-family: Tahoma, Helvetica, Verdana, Arial, sans-serif, "Myriad Pro", "Trebuchet MS";  /* Set font-familys. Only here to make it changable. */
	box-sizing: border-box; /* Set all object to border-box. Only here to be changable. See description above. */
}

main h1 { /* Settings that applies to everything in h1 headlines. */
	margin: 0 auto 50px auto; /* Set margin. Sets bottom margin to create a space below all h1 headlines to other object/text. */
	padding: 0; /* Set padding */
	text-align: center; /* Set h1 headline text align to center. Makes h1 headline text center. */
	text-decoration: underline; /* Underline all h1 headline text */
	font-size: 1.75em; /* Set fontsize of h1 in proportion to the default font-size (100%) */
	color: white; /* Set font color of header text. */
}

main h2 { /* Settings that applies to everything in h2 headlines. */
	margin: 20px auto 20px auto; /* Set margin */
	padding: 0; /* Set padding */
	text-align: center; /* Center text */
	text-decoration: underline; /* Underline text */
	font-size: 1.25em; /* Set fontsize of h2 in proportion to the default font-size (100%) */
	color: white; /* Set font color of h2 text. */
}

main a { /* Settings that applies to all a (anchor) tags on the page. */
	text-decoration: none; /* No text decoration. Default decoration on links is underline. */
	word-wrap: break-word; /* Allow linebreaks in the middle of links. Sadly poor implementation in many browsers. */
	box-shadow: inset 0 0 16px rgba(66, 140, 240, 1.0),inset 0 0 36px rgba(0, 140, 255, 1.0); /* Fancy color effect on a tags */
	text-shadow: -1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000; /* Set text shadow on all a tags, makes text more visible. */
	padding: 0 3px 3px 3px; /* Set padding */
}

main a:hover { /* Settings that applies to all a (anchor) tags on the page when hovered. */
	text-decoration: underline; /* Underline text */
	box-shadow: inset 0 0 16px rgba(140, 0, 20, 1.0),inset 0 0 36px rgba(180, 0, 20, 1.0); /* Fancy color effect on a tags */
	text-shadow: -1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000; /* Set text shadow on all a tags, makes text more visible. */
}

main p { /* Settings that applies to all paragraphs on the page. */
	text-align: center; /* Center text */
	margin: 0 auto; /* Set margin */
	padding: 0 0 10px 0; /* Set padding */
	width: 100%; /* Set width */
}

main img { /* Settings that applies to all images on the page. */
	width: 50%; /* Set width */
	height: 50%; /* Set height */
	margin: 0 auto; /* Set margin */
	padding: 5px; /* Set padding */
	position: relative; /* Set position to relative to other objects. */
	display: block; /* Set display to block for all images */
}

main ul { /* Settings that applies to all unordered lists on the page. */
	text-align: left; /* Align text to the left */
	list-style-type: square; /* Set all lists to show a square in front of every li-item. */
	margin: 0 0 20px 0; /* Set margin */
	padding: 0; /* Set padding */
	width: 100%; /* Set width */
}

main ul li { /* Settings that applies to all li-items on the page. */
	padding: 0 0 10px 0; /* Set padding. Makes a small gap after every list item. */
}

footer { /* Settings that applies to the footer on all pages. */
	display: block; /* Display object as block. */
	position: fixed; /* Set the footer to positon fixed. Makes it stick to the bottom of the page. */
	bottom: 0; /* Bottom position */
	left: 0; /* Left position */
	margin: 0; /* Set margin */
	padding: 5px; /* Set padding */
	width: 100%; /* Set width */
	height: auto; /* Set auto height */
	text-align: center; /* Center text */
	white-space: nowrap; /* Make sure text isn't linebreaked in footer if window size is to small. */
	line-height: 100%; /* Set line height. Makes a gap between text rows. */
	color: white; /* Set font color of footer text. */
	box-sizing: border-box; /* Set footer to border-box. Only here to be changable. */
	background-color: black; /* Set background color of footer */
	z-index: 100; /* Set z-index to make footer in front of everything else on the page. Makes text and other objects scroll beneath. */
}

footer span { /* Settings that applies to the span in the footer on all pages. */
	margin: 0; /* Set margin */
	padding: 5px; /* Set padding */
	border: 0; /* Make sure there is no border applied */
	font-size: 0.75em; /* Set font size to .75em of default 100% to make text a bit smaller. */
	cursor: pointer; /* This makes the mouse pointer transform to "pointer" when hovering the span field */
	text-decoration: none; /* No decoration of text */
	box-shadow: inset 0 0 16px rgba(66, 140, 240, 1.0),inset 0 0 36px rgba(0, 140, 255, 1.0); /* Fancy color effect */
	text-shadow: -1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000; /* Set text shadow, makes text more visible. */
}

footer span:hover, footer span:active, footer span:focus  { /* Make the span behave like a link */
	background: transparent url(../img/overlay.png) repeat bottom left; /* Adds a transparent image on top of the span to add a nice effect */
	background-size: cover; /* Make sure the background image covers the span */
	text-decoration: underline; /* Underline text when hovered */
	box-shadow: inset 0 0 16px rgba(140, 0, 20, 1.0),inset 0 0 36px rgba(180, 0, 20, 1.0); /* Fancy color effect */
	text-shadow: -1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000; /* Set text shadow, makes text more visible. */
}

.underline { /* Custom class to be added to object in need of underline */
	text-decoration: underline;
}

.center { /* Custom class to be added to object in need of being centered */
	text-align: center; /* Always center text */
}

u { /* Make sure u-element is styled properly. Noticed browsers didn't style text with u-element as default... */
    text-decoration: underline;
}

b { /* Make sure b-element is styled properly. Noticed browsers didn't style text with b-element as default... */
	font-weight: bold;
}

.video { /* Custom class for video content. See html for more info. */
    max-width: 640px;
	margin: 0px auto;
}

.video > div { /* Apply this only to the div that is a child to the class .video (also a div). See html for more info. */
  position: relative; /* Set position to relative */
  padding-bottom: 56.25%; /* Add a custom bottom padding to make the video keep it's aspect ratio */
  height: 0px; /* Set height of dummy div to 0 */
}

.video iframe { /* Custom settings for iframe with video contents from youtube. See html for more info. */
	position: absolute; /* Position set to absolute */
	top: 0px; /* Positioning from the top */
	left: 0px; /* Positioning from the left */
	width: 100%; /* Set width */
	height: 100%; /* Set height */
	max-width: 640px; /* Set maximum width */
    max-height: 360px; /* Set maximum height */
    margin: 0; /* Set margin */
    padding: 0; /* Set padding */
    border: 0; /* Make sure no border applied */
}


@media screen and (max-width:1024px){ /* These setting only apply when window size is 1024px or less aka tablets and mobile devices */
/* All settings here override above settings when using a smaller screen. Mostly applied to mobile devices and tablets. */

body {
	background: url('../img/bg.png'); /* Set custom background for smaller screens. */
}

main {
	display: block; /* Fix for IE browser. Without this, the <main>-tag doesn't work in IE. */
	position: relative; /* Set position to relative */
	margin: 25px auto 50px auto; /* Set margin */
	padding: 0; /* Set padding */
	width: 80%; /* Set custom width only to smaller screens */
	color: white; /* Set default font color of text. */
	word-wrap: break-word; /* Allow words to be linebreaked if necessary in small screen view. */
	text-align: left; /* Align text to the left */
	line-height: 125%; /* Set custom line height */
	font-family: Tahoma, Helvetica, Verdana, Arial, sans-serif, "Myriad Pro", "Trebuchet MS"; /* Set default font-familys. Only here to be customisable. */
	box-sizing: border-box; /* Set all objects to border-box to include padding/border in widht and height sizes. */
}

main a {
	text-decoration: underline; /* Underline links */
	box-shadow: inset 0 0 16px rgba(140, 0, 20, 1.0),inset 0 0 36px rgba(180, 0, 20, 1.0); /* Fancy color effect on a tags */
	text-shadow: -1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000; /* Set text shadow on all a tags, makes text more visible. */
	word-wrap: break-word; /* Allow links to be breakable. */
}

main a:hover, main a:active, main a:focus { /* Applies to all links when hovered OR when in focus/active (used by touch devices were hovering is impossible). */
	text-decoration: underline; /* Make sure links is underlined. Only here to make it customisable. */
	box-shadow: inset 0 0 16px rgba(66, 140, 240, 1.0),inset 0 0 36px rgba(0, 140, 255, 1.0); /* Fancy color effect on a tags */
}

main p { /* Settings that applies to all paragraphs on the page. */
	text-align: center; /* Center text */
	margin: 0 auto; /* Set margin */
	padding: 0 0 5px 0; /* Set padding */
	width: 100%; /* Set width */
}

main img { /* Settings that applies to all images on the page. */
	width: 60%; /* Set width */
	height: 60%; /* Set height */
	margin: 0 auto; /* Set margin */
	padding: 5px; /* Set padding */
	position: relative; /* Set position to relative to other objects. */
	display: block; /* Set display to block for all images */
}

main ul { /* Settings that applies to all unordered lists on the page. */
	text-align: left; /* Align text to the left */
	list-style-type: square; /* Set all lists to show a square in front of every li-item. */
	margin: 0 auto; /* Set margin */
	padding: 0; /* Set padding */
	width: 100%; /* Set width */
}

footer { /* Settings that applies to the footer on all pages. */
	display: block; /* Display object as block. */
	position: fixed; /* Set the footer to positon fixed. Makes it stick to the bottom of the page. */
	bottom: 0; /* Bottom position */
	left: 0; /* Left position */
	margin: 0; /* Set margin */
	padding: 5px 0 5px 0; /* Set padding */
	width: 100%; /* Set width */
	height: auto; /* Set auto height */
	text-align: center; /* Center text */
	white-space: nowrap; /* Make sure text isn't linebreaked in footer if window size is to small. */
	line-height: 100%; /* Set line height. Makes a gap between text rows. */
	color: white; /* Set font color of footer text. */
	box-sizing: border-box; /* Set footer to border-box. Only here to be changable. */
	background-color: black; /* Set background color of footer */
	z-index: 100; /* Set z-index to make footer in front of everything else on the page. Makes text and other objects scroll beneath. */
}

footer span { /* Settings that applies to the span in the footer on all pages. */
	margin: 0; /* Set margin */
	padding: 5px; /* Set padding */
	border: 0; /* Make sure there is no border applied */
	font-size: 0.75em; /* Set font size to .75em of default 100% to make text a bit smaller. */
	cursor: pointer; /* This makes the mouse pointer transform to "pointer" when hovering the span field */
	text-decoration: underline; /* Underline text */
	box-shadow: inset 0 0 16px rgba(140, 0, 20, 1.0),inset 0 0 36px rgba(180, 0, 20, 1.0); /* Fancy color effect */
	text-shadow: -1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000; /* Set text shadow, makes text more visible. */
}

footer span:hover, footer span:active, footer span:focus  { /* Make the span behave like a link */
	background: transparent url(../img/overlay.png) repeat bottom left; /* Adds a transparent image on top of the span to add a nice effect */
	background-size: cover; /* Make sure the background image covers the span */
	text-decoration: underline; /* Underline text when hovered */
	box-shadow: inset 0 0 16px rgba(66, 140, 240, 1.0),inset 0 0 36px rgba(0, 140, 255, 1.0); /* Fancy color effect */
	text-shadow: -1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000; /* Set text shadow, makes text more visible. */
}


}