/* CSS Document for quarteredge.se */

/* Google standard fonts*/
@import url('https://fonts.googleapis.com/css?family=Titan+One');

* {
    box-sizing: border-box;
    margin: 0; 
    padding: 0;
}

html, body {
    width: 100%;
    height: 100%;
}

body.grad {
	font-family:Roboto,Arial,sans-serif;
	display: flex;
	flex-direction: column;
	align-items: stretch;		
	background: linear-gradient(-25deg, #FFFFFF, #A9A9A9,  #696969,  #000000, #000000);	/* Special for moving background */
	background-size: 400% 400%; /* Special for moving background */
	animation: gradient 30s ease infinite;	/* Special for moving background */
	height: 100vh;	/* Special for moving background */
}

body.norm {
	/*-webkit-user-select:none;*/
	/*-moz-user-select:none;*/
	/*-ms-user-select:none;*/
	font-family:Roboto,Arial,sans-serif;
	display: flex;
	flex-direction: column;
	align-items: stretch;
}

header, article, footer {
    flex-shrink: 0;
}


/***************************
HEADER
***************************/
header {
	position: -webkit-sticky;
   position: sticky;
	top: 0px;
	padding: 0px;
	border-bottom: 2px solid #000000;
}

.hd-main {
   background-color: white;
   display: flex;
	justify-content: center;
	flex-wrap: wrap;
}

.hd-main-logo {
/*background-color: #d03400;*/
   padding: 10px 40px 5px 15px;	
	min-width: 100px;
	text-align: left;
}

.hd-main-list {
/*	background-color: #FC0;*/
	padding: 0;
	min-width: 100px;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bold;
	text-align: center;
}
	
/***************************
COOKIE BOX
***************************/
#cookie_box { 
	position: fixed;
	display: none;
	bottom: 0px;
	font-size: 0.8em;
	z-index: 1000;
	background:#393939;
	padding:5px;
	text-align:center;
	width:100%;
	color:#ffffff;
	outline-color:#0FF;
}

#cookie_box a {
	color:#0FF;
}

#cookie_box a:hover { 
		color:#ffffff;
		text-decoration: underline;
}
	
/***************************
FOOTER
***************************/
footer {
	line-height: 1.5;
}

footer a {
    text-decoration: none;
    color: #eee;
}

.ft-legal {
	background-color: #000;
	color: #bbb;
	position: fixed;
	bottom: 0px;
	width:100%;
}

.ft-legal-list {
	width: 100%;
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	list-style: none;
}

/***************************
ARTICLE
***************************/
article {
	/*min-height: 100%;*/
	/*display: flex;*/
	/*flex-direction: column;*/
	/*align-items: stretch;*/
	/*background-color: white;*/
}

/***************************
CONTAINER
***************************/
.container { 
	flex-grow: 1;
}

/***************************
Text
***************************/

.PageHeadingW {
  text-align: center;
  position: absolute;
  top: 27%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  font-family: Verdana, sans-serif;
  font-size: 54px;
  text-shadow: 3px 3px 2px #000000;
  color: #95CEC2;
}

.PageSubHeadingW {
  text-align: center;
  position: absolute;
  top: 48%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  font-size:50px;
}

.PageTextW {
  text-align: center;
  position: absolute;
  top: 66%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  font-size:20px;
}

/***************************
Pictures
***************************/

/*Normal image*/
.imgC {
  display: block;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

/*General banner on pages.*/
.hero-banner {
  background-image: url("../_img/Horisont.JPG");
/*  background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("../_img/Horisont.JPG");*/
  background-position: center top;
  background-repeat: no-repeat;
  background-size: cover;
  height: 150px;
/*  width: 100%;*/
}

/* First text banner on pages. */
.first-text-banner {
   background-image: url("../_img/Sunrise.JPG");
   background-position: center;
   background-repeat: no-repeat;
   background-size: cover;
   height: 350px;

   font-family: "Gill Sans Extrabold", sans-serif;
   font-size: 54px;
   font-weight: bold;
   text-shadow: 3px 3px 2px #000000;
   color: white;

   text-align: center;
	padding-top: 250px; 
	
   /* Lägg gärna till lite marginaler runt */
   width: 100%;
   margin: 10px auto 0 auto;
}

/* Second text banner on pages. */
.second-text-banner {
   background-image: url("../_img/Waterfront.JPG");
   background-position: center bottom;
   background-repeat: no-repeat;
   background-size: cover;
   height: 350px;

   font-family: "Gill Sans Extrabold", sans-serif;
   font-size: 54px;
   font-weight: bold;
   text-shadow: 3px 3px 2px #000000;
   color: red;

   text-align: center;
   padding-top: 250px; 

   width: 100%;
   margin: 0 auto 20px auto;
}

/* Mellanrummet mellan bilderna (om du vill behålla .banner-space) */
.banner-space {
    height: 10px;  /* justera efter smak */
}

/* Lite städning av texten i banners om du vill */
.first-text-banner p,
.second-text-banner p {
    margin: 0;
}



/***************************
Moving page text
***************************/

@keyframes gradient {			
	0% {		
		background-position: 0% 15%;	
	}		
	20% {		
		background-position: 15% 50%;	
	}		
	40% {		
		background-position: 50% 100%;	
	}		
	60% {		
		background-position: 100% 50%;	
	}		
	80% {		
		background-position: 50% 15%;	
	}		
	100% {		
		background-position: 15% 0%;	
	}		
}			

div.MovingPageHeader {
	position: fixed;
	font-family: Verdana, sans-serif;
	font-size: 42px;
	text-align: center;
	display: table-cell;
	vertical-align: middle;
	color: black;
	font-weight: bold;
}

/*-- Undefined --*/
a:hover {
    text-decoration: underline;
}

ul.a {
    list-style: none;
    padding-left: 0;
}

ul.b {
    list-style-type: disc;
    padding-left: 20px;
}
@media only screen and (min-width: 29.8125rem /*477px*/) {
    .ft-main {
        justify-content: space-around;
    }
}
@media only screen and (min-width: 77.5rem /*1240px*/ ) {
    .ft-main {
        justify-content: space-evenly;
    }
}

/*-- Drop down list --*/
ul#Menu{
	margin-left: 30px;
	margin-top: 15px;
	/*background: #000000;*/
	/*box-shadow: 0px 0px 9px rgba(0,0,0,0.5);*/
	/*padding: 10 0px; [Ger fel ] */
	/*border-radius: 10px;*/
	list-style: none;
	position: relative;
	display: inline-table;
	min-width: 75px;
	height: 15px;
}

ul#Menu li{
	float: left;
}

/*Text in the menu heading*/
ul#Menu li a{
	display: block;
	padding: 0px 20px 5px;
	color: grey;/*#757575;*/
	text-decoration: none;
}

/*Hide the sub-menu or the drop down menu.*/
ul#Menu li ul{
	list-style: none;
	display: none;
}

/*When someone hovers on the respective main menu element, the sub menu will be displayed.*/
ul#Menu:after{
	content: "";
	clear: both;
	display: block;
}

/* Square for menu text and image*/
ul#Menu li:hover{
	background: #FFFFFF;
	color: black;
}

/*Text in menu list when hovering over heading part.*/
ul#Menu li:hover a{
	color: grey;
}

ul#Menu li:hover > ul{
	display:block;
}

/*Text in menu list when hovering over the detailed text part.*/
ul#Menu ul{
	background: #FFFFFF;
	border-radius: 0px; 
	padding: 0;
	position: absolute; 
	top: 100%;
	min-width: 175px;
}

/*Rows in the menu list*/
ul#Menu ul li{
	float: none;
	border-top: 1px solid black;/*#6b727c;*/
	border-bottom: 1px solid black;/*#575f6a;*/
	position: relative;
	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

/*The text in the menu list when not hovering over it.*/
ul#Menu ul li a{
	background: white; 
	padding: 5px 10px;
	color: grey;
}

/*Format when hovering over a menu item*/
ul#Menu ul li a:hover{
	background: white; 
	color: black;
}

/*--Table definitions--*/
table {
	padding: 2px;
	border-spacing: 1px;	
}

table.maintable {
	margin-left: auto; 
	margin-right: auto;
	/*	border-collapse: collapse;*/
}

table.coretable {
	margin-left: auto; 
	margin-right: auto;
	vertical-align: left;
/*	justify-content: center;
	border: 1px solid black;*/
	border-style: double;
}

table.coretable th {
	padding: 4px;
	border-spacing: 1px;
	text-align: left;
	border: 1px solid black;
}

table.coretable td {
	padding: 4px;
	border-spacing: 1px;
	text-align: left;
	border: 1px solid black;
}

.hlcell {
	font-family: "Gill Sans Extrabold", sans-serif;
	font-size: 54px;
	font-weight: bold;
	text-shadow: 3px 3px 2px #000000;
	color: #4F81BD;
	align: center;
	valign: middle;
	text-align: center;
/*	border: 1px solid black;*/
}

.fatbordercell {
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bold;
	font-size: 40px;
	color: black;
	align: center;
	valign: middle;
	text-align: center;
	border: 1px solid black;
}

.fatcell {
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bold;
	font-size: 40px;
	color: black;
	align: center;
	valign: middle;
	text-align: center;
}

.slogancell {
	font-family: Arial black;
	font-weight: normal;
	font-size: 18px;
	align: center;
	valign: top;
	text-align: center;
/*	border: 1px solid black;*/
	padding: 10px;
}

.txtcell {
	font-family: Arial, Helvetica, sans-serif;
	font-weight: normal;
	font-size: 14px;
	align: center;
	valign: top;
	text-align: left;
/*	border: 1px solid black;*/
	padding: 10px;
}

.txtcell ol {
/*  display: block;
  list-style-type: decimal;
  margin-top: 1em;
  margin-bottom: 1em;
  margin-left: 0;
  margin-right: 0;*/
  padding-left: 50px;
}

.errcell {
	align: center;
	text-align: center;
	color: red;
	visibility: hidden;
}

button{
	display:block;
	position:relative;
	width:100%;
	height:40px;
	box-sizing:border-box;
	border:3px solid white;
	border-bottom-color:#777;
	border-right-color:#777;
	outline:none;
	font-size:16px;
	cursor:pointer;
}

button:active{
	border-width:2px;
	font-size:14px;
	text-align: center;
}

dialog[open] {
  position: fixed;
  top: 40%;
  left: 50%;
  transform: translateX(-50%);
  margin: 0;

  border: none;
  border-radius: 8px;
  padding: 1.5rem;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

dialog::backdrop {
  background: rgba(0, 0, 0, 0.5);
}