@charset "utf-8";
/* CSS stylesheet that styles the header of all pages. */

header { /* Settings that applies to everything in the header element. */
	width: 100%; /* Make sure header takes up 100% width regardless of window size */
	height: auto; /* Autosize height on header to fit objects inside */
	margin: 0; /* Set margin */
	padding: 0; /* Set padding */
	background-image: url('../img/header_01.jpg'); /* Background image to be used in header and in navigation(menu) */
	background-position: center center; /* Make sure background image is centered both vertical and horizontal */
	background-size: cover; /* Make sure background image covers whole header area */
	background-attachment: local; /* The background scrolls along with the element's contents */
	color: white; /* Set font color of header text. */
	text-align: center; /* Always center text */
	position: fixed; /* Position is set to fixed, to make the header static on the page, regardless of page content. */
	top: 0; /* Top position of header */
	left: 0; /* Left position of header */
	z-index: 100; /* Make sure header is always in front of all other objects. This makes content scroll under header. */
	opacity: 0.95; /* Set some transparency to the header. This makes the page content slightly visible through the header. Nice effect. */
	box-shadow: 0 0 16px rgba(140, 0, 20, 1.0), 0 0 36px rgba(180, 0, 20, 1.0); /* Make a nice effect on the header */
	border-color: rgba(0,0,255,1.0); /* Set border color of header */
}

header h1 { /* Settings that applies to everything in header h1 headline. */
	margin: 25px auto 0 auto; /* Set margin */
	font-size: 1.5em; /* Set fontsize of h1 in proportion to the default font-size */
	color: white; /* Set font color of header text. */
	padding: 0; /* Set 0 padding */
	text-align: center; /* Always center text */
	white-space: nowrap; /* Prevent line-breaking when windows size is too small */
	overflow: hidden; /* If the headline content isn't viewable due to window resize, make sure it's hidden instead of scrollbars or page width that is wider then header. */
}

a { /* Setting for all links in header section */
	color: white; /* Make sure menu links is set to this color */
}

nav { /* Settings that applies to navigation element on all pages. */
	margin: 25px 0 0 0; /* Set margin */
	padding: 0; /* Set padding */
	width: 100%; /* Set navigation width to 100% of the page */
	z-index: 100; /* Make sure navigation is always in front of all other objects. This makes content scroll under the navigation field. */
	white-space: nowrap; /* Prevent line-breaking when windows size is too small */
	text-align: center; /* Center text */
	font-size: 1em; /* Set fontsize to 1em = 100% */
	color: white; /* Set font color of header text. */
	border: 0; /* Make sure no border is applied */
	/* Prevent users from selecting text in menus */
	-webkit-user-select: none; /* Chrome all / Safari all */
	-moz-user-select: none; /* Firefox all */
	-ms-user-select: none; /* IE 10+ */
	-o-user-select: none; /* Opera */
	user-select: none; /* Default all browsers */
}

.MainMenuList { /* Settings for menu list */
	color: white; /* Set font color */
	margin: 0; /* Set margin */
	padding: 0; /* Set padding */
	border: 0; /* Make sure there is no border as default */
}

.MainMenuList img { /* Settings for images in menu list */
	vertical-align: middle; /* Vertical alignment of images */
	text-align: center; /* Center text */
	padding: 0; /* Set padding */
	margin: 0 10px 0 0; /* Set margin */
	width: 20px; /* Set width */
	height: 20px; /* Set height */
}

.MainMenu, .MobileMenu { /* Setting to apply custom cursor on menus */
	cursor: pointer; /* Change cursor look when hovering over menus */
}

.MainMenu { /* Setting for all li-items with class .Mainmenu */
	display: inline-block; /* The links in navigation will be displayed inline */
	margin: 0; /* Set margin */
	padding: 0; /* Set padding */
	position: relative; /* Set relative positioning */
	border: 1px solid transparent; /* Set a transparent border to make sure there is no content moving when hovering. */
}

.MainMenu a { /* Setting for all links in menus */
	text-decoration: none; /* No text decoration, text will be defined as normal */
	text-align: center; /* Center text */
	color: white; /* Set font color */
	margin: 0; /* Set margin */
	padding: 10px 20px 10px 10px; /* Set padding surrounding links in the menu */
	display: block; /* Make sure link in menu is viewed as a block, to make the whole li-item clickable */
}

.MainMenu span { /* Setting for all span elements in menus */
	text-decoration: none; /* No text decoration, text will be defined as normal */
	text-align: center; /* Center text */
	color: white; /* Set font color */
	margin: 0; /* Set margin */
	padding: 10px 20px 10px 10px; /* Set padding surrounding spans in the menu. Span is used for menu objects that isn't direct links aka dead links. */
	display: block; /* Make sure span in menu is viewed as a block, to make the whole li-item clickable */
}

.MainMenu:hover, .MainMenu:active, .MainMenu:focus { /* Settings when hovering menus or when they are active/in focus. The last two is mainly used on tablets. */
	background: transparent url(../img/overlay.png) repeat bottom left; /* Adds a transparent image on top of the object to add a nice effect */
	background-size: cover; /* Make sure the background image covers the object */
	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. */
	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 */
	border: 1px solid black; /* Make border around menu objects on hover or active/in focus. */
}

.MenuList { /* Settings applied to dropdown menu (ul-list) only */
	text-shadow: none; /* Reset text shadow */
	color: white; /* Set font color */
	text-align: center;  /* Center text */
	margin: 0; /* Set margin */
	padding: 0; /* Set padding */
	overflow: hidden; /* If content overflow, you wont be able to see it */
	position: absolute; /* Set absolute positioning */
	left: 0px; /* Left start position */
	width: 100%; /* Set width */
	display: none; /* Make the list not viewable until hovering */
	border: 0; /* Make sure no border is applied */
	background-color: black; /* Set background color of dropdown menu */
}

#MainMenuDropdown:hover .MenuList { /* Make the dropdown menu visible on hover */
	color: rgba(140, 0, 20, 1.0); /* Default: red; */
	position: absolute; /* Set absolute positioning */
	display: block; /* Set display to block. This makes the dropdown menu visible to user. */
	pointer-events: auto; /* Fix for the menu to work with tablets. */
}

#MainMenuDropdown:focus { /* Setting when dropdown is in focus. */
	pointer-events: none; /* Fix for the menu to work with tablets. */
}

.DropdownMenu { /* Settings applied to dropdown menu (li-items) only */
	text-shadow: none; /* Reset text shadow */
	padding: 0; /* Set padding */
	margin: 0; /* Set margin */
	cursor: pointer; /* Change cursor look when hovering over menus */
	display: block; /* Make sure li-items are blocks */
	z-index: 100; /* Set z-index to make menu in front of other objects (content). */
	border: 1px solid transparent; /* Set a transparent border to make sure there is no content moving when hovering. */
}

.DropdownMenu:hover, .DropdownMenu:active, .DropdownMenu:focus {
	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. */
	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 */
	border: 1px solid black; /* Make border around menu objects on hover or active/in focus. */
	background: transparent url(../img/overlay.png) repeat bottom left; /* Adds a transparent image on top of the object to add a nice effect */
	background-size: cover; /* Make sure the background image covers the object */
}

.MobileMenu { /* Settings for the mobile menu */
	display: none; /* Make sure mobile menu is hidden when not in mobile view */
}


@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. */

header { /* Settings that applies to everything in the header element when in mobile view. */
	width: 100%; /* Make sure header takes up 100% width regardless of window size */
	height: auto; /* Autosize height on header to fit objects inside */
	margin: 0 auto; /* No top/bottom margin and autoadjust left/right margin */
	padding: 10px 0 0 0; /* Top padding set to position inside objects at least 10px from top of page */
	z-index: 100; /* Make sure header is always in front of all other objects. This makes content scroll under header. */
	position: relative; /* Relative positioning of the header as it will stay on top when in mobile view. */
	top: 0; /* Top position of header */
	left: 0; /* Left position of header */
	opacity: 0.95; /* Make the header somewhat transparent. It's a nice effect. */
}

header h1 { /* Settings that applies to everything in header h1 headline. */
	font-size: 1.25em; /* Set fontsize of h1 in proportion to the default font-size */
	white-space: nowrap; /* Prevent line-breaking when windows size is too small */
	margin: 0; /* Set 0 margin */
}

nav { /* Settings that applies to navigation element on all pages. */
	margin: 0; /* Set margin */
	padding: 0; /* Set padding */
	width: 100%; /* Set navigation width to 100% of the page */
	z-index: 100; /* Make sure navigation is always in front of all other objects. This makes content scroll under the navigation field. */
	white-space: nowrap; /* Prevent line-breaking when windows size is too small */
	text-align: center; /* Center text */
}

.MainMenu { /* Disable standard menu items when using mobile device */
	display: none;
}

.MobileMenu { /* Settings that applies to mobile menu li-item. */
	font-weight: bold; /* Set bold font */
	text-align: left; /* Align text to the left */
	padding: 0px; /* Set padding */
	display: block; /* Set display to block */
	border: 0; /* Make sure no border is applied */
	z-index: 100; /* Make sure navigation is always in front of all other objects. This makes content scroll under the navigation field. */
	position: relative; /* Relative positioning to make the menu follow the normal flow of the page (header). */
}

.MobileMenu a { /* Settings that applies to links in mobile menu. */
	text-decoration: none; /* Make sure there is no text decoration */
	text-align: left; /* Align text to the left */
	letter-spacing: 0.3px; /* Set letter spacing. Makes text look better. */
	color: white; /* White text color */
	margin: 0; /* Set margin */
	padding: 10px; /* Set padding */
	display: block; /* Set display to block */
	border: 1px solid transparent; /* Set a transparent border to make sure there is no content moving when hovering. */
}

.MobileMenu span { /* Settings for the "Menu" item */
	text-decoration: none; /* Make sure there is no text decoration */
	text-align: left; /* Align text to the left */
	letter-spacing: 0.3px; /* Set letter spacing. Makes text look better. */
	color: white; /* Set font color */
	margin: 0; /* Set margin */
	padding: 10px; /* Set padding */
	display: block; /* Set display to block */
	border: 1px solid transparent; /* Set a transparent border to make sure there is no content moving when hovering. */
}

.MobileMenu span:hover, .MobileMenu span:active, .MobileMenu span:focus { /* Settings for the span (menu trigger) on active/focus or hover. */
	color: white; /* Set font color white for mobile devices; */
	background: transparent url(../img/overlay.png) repeat bottom left; /* Adds a transparent image on top of the object to add a nice effect */
	background-size: 100% 100%; /* Make sure the background image covers the object */
	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. */
	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 */
	border: 1px solid black; /* Make border around menu objects on hover or active/in focus. */
}

.MobileMenuList { /* DropdownMenu */
	display: none; /* Hide the dropdown menu when not activated */
	font-weight: bold; /* Set bold font */
	overflow: hidden; /* If content overflow, you wont be able to see it */
	text-align: left; /* The text in navigation will be centered */  
	padding: 0; /* Set padding */
	margin: 0; /* Set margin */
	position: relative; /* Relative positioning to make the menu follow the normal flow of the page. */
}

.MobileMenuDropdown { /* Settings for the dropdown menu list. */
	padding: 0; /* Set padding */
	cursor: pointer; /* Change cursor look when hovering over menus */
}

.MobileMenuDropdown a:hover, .MobileMenuDropdown a:active, .MobileMenuDropdown a:focus { /* Settings for the dropdown menu list on active/focus or hover. */
	color: white; /* Set font color white for mobile devices; */
	background: transparent url(../img/overlay.png) repeat bottom left; /* Adds a transparent image on top of the object to add a nice effect */
	background-size: 100% 100%; /* Make sure the background image covers the object */
	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. */
	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 */
	border: 1px solid black; /* Make border around menu objects on hover or active/in focus. */
}


}