body{
-webkit-appearance:none; /* No Android highlight */
font-family: 'Nunito', sans-serif; font-size:14px;
-webkit-touch-callout: none !important;
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
}

@-webkit-keyframes pulsate {
    0% {
		background-color: #F8F8F8;
    }
    50% {
		background-color: #C0C0C0;
    }
    100% {
		background-color: #F8F8F8;
    }
}
@-moz-keyframes pulsate {
    0% {
		background-color: #F8F8F8;
    }
    50% {
		background-color: #C0C0C0;
    }
    100% {
		background-color: #F8F8F8;
    }
}
@-o-keyframes pulsate {
	0% {
		background-color: #F8F8F8;
    }
    50% {
		background-color: #C0C0C0;
    }
    100% {
		background-color: #F8F8F8;
    }
}
@keyframes pulsate {
	0% {
		background-color: #F8F8F8;
    }
    50% {
		background-color: #C0C0C0;
    }
    100% {
		background-color: #F8F8F8;
    }
}

div.imgbox{
	overflow:hidden;
}

a.nostyle:hover{ text-decoration: none;}
a.nostyle:link{
    text-decoration: inherit;
    color: inherit;
	cursor: pointer;
}
a.nostyle:visited{color: inherit;}

div.button{background-color:#E8E8E8; margin-left:50px; padding:15px; cursor:pointer; float:left;}
div.button:hover{background-color:#F0F0F0;}

h1{
	color:white;
	margin-bottom:0px;
	margin-top:10px;
	padding-left:2%;
	
	font-family: 'Nunito', sans-serif; font-size:46px;
	/*
	font-family: 'Slabo 27px', serif; font-size:50px; // sådär, men ser odesignat ut 
	font-family: "Montserrat", sans-serif; font-size:50px; //Snyggast/luftigast
	font-family: 'Raleway', sans-serif; font-size:50px; // bra! Smalare än Montserrat, snea siffror :-/
	font-family: 'Oxygen', sans-serif; font-size:50px;  //ganska nygg, väldigt kompakt
	font-family: 'Nunito', sans-serif; font-size:50px; //helt ok, ganska kompakt men luftig. Infleo logo style

	font-family: 'Merriweather', serif;  font-size:14px; //nja, för spretig
	font-family: 'Open Sans Condensed', sans-serif; font-size:14px;  //nej för tajt
	*/
	text-rendering: optimizeLegibility; 
	-webkit-font-smoothing: antialiased;
	}

span#domain{font-size:18px;}

div#slogan{color:white;font-size:16px;padding-left:2.6%; margin-top:-3px; padding-bottom:15px;float:left;} 

header{
	overflow: hidden;
	float:left;
	background-color:gray;
	background-image:url('img/newspapers_gray4.jpg'); 
	background-size:100% auto; 
	background-repeat: no-repeat;
	width:100%;
	margin-bottom:5px;
}

footer{
	float:left;
	background:linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.8)), url('img/newspapers_gray4.jpg'); 
	background-color: #262626;  /*Fallback: have color separate if cant handle linear-gradient above (old Safari)*/
	background-size:cover; 
	background-repeat: no-repeat;
	width:97%;
	margin-top:70px;
	padding-left:3%;
	padding-top:20px;
	padding-bottom:15px;
	color:white;
}

img#foto{float:left; padding-right:10px;}

div#footertext{clear:both; margin-top:20px; margin-bottom:20px; max-width:600px;}

table#footer{text-align: left; border-spacing:0px; color:inherit; font-size:inherit;}

h2{margin-top:10px; margin-left:2%; clear:both;}
div.col, div.col_small{margin-bottom:30px; float:left; padding-left:3%; padding-bottom:30px; position:relative; /*overflow:hidden;*/ width:400px; min-height:100px;}  /*This effects tooltip width also*/
div.col_small{height:auto; min-height:auto;}
div.periods{float:left;clear:both;line-height:170%; width:100%; background-image: url('img/loading4.gif'); background-repeat:no-repeat; background-position:10px 10px; background-size:30px auto; min-height:40px; display:none;}
h3{font-size:18px; clear:right; margin-top:0px; margin-bottom:3px;font-weight:normal;display:inline;}
a{text-decoration:none; color:black;-webkit-user-select: none !important;}
a:hover{text-decoration:underline;}
a.article:hover{text-decoration:none;} /* FIX if want to use hover for desktop */
a:visited{color:#cc3399;}
a.more{width:100%;}
a.readmore{color:white; padding-left:16%; padding-right:16%; padding-top:13px; padding-bottom:20px;}
p.readmore{text-align: center; clear:both;}
.gray{color:lightgray;}
.pink{color:#ecdde2;}

p.more{
	position: absolute; 
    bottom: -1.3em;
    width:100%;
	padding-left:30%;
	font-size:18px;
	color:black;
	cursor:pointer;
	}
	
p{margin-bottom:5px;}

img.end{padding-left:30%;}
img.more{padding-left:30%; padding-right:15px;}
img.less, img.more{cursor:pointer; padding-top:15px; padding-bottom:15px;}
img.less{margin-left: 20px; padding-left: 30%;}

.fadeout {
    position: absolute; 
    bottom: 0em;
    width:100%;
    height: 2.0em; /*2.6*/
	/*background-color:yellow;
	border:solid 1px black;*/
    background: -webkit-linear-gradient(
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 1) 93%
    ); 
    background-image: -moz-linear-gradient(
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 1) 93%
    );
    background-image: -o-linear-gradient(
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 1) 93%
    );
    background-image: linear-gradient(
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 1) 93%
    );
    background-image: -ms-linear-gradient(
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 1) 93%
    ); 
}

.nofade{}

p.time{font-size:14px;margin-bottom:8px;padding-top:8px;clear:both;color:#A8A8A8;}
p.first{padding-top:0px;margin-top:0px;}
p.today{color:limegreen;}

img.arrow{
	margin-left:10px;
	vertical-align:middle;
	}

img.arrowturn{
  -webkit-transform: rotate(180deg);     /* Chrome and other webkit browsers */
  -moz-transform: rotate(180deg);        /* FF */
  -o-transform: rotate(180deg);          /* Opera */
  -ms-transform: rotate(180deg);         /* IE9 */
  transform: rotate(180deg);             /* W3C compliant browsers */

  /* IE8 and below */
  filter: progid:DXImageTransform.Microsoft.Matrix(M11=-1, M12=0, M21=0, M22=-1, DX=0, DY=0, SizingMethod="auto expand");
}

img.rotateleft20{
	margin-top:20px;
	vertical-align:middle;
  -webkit-transform: rotate(-20deg);     /* Chrome and other webkit browsers */
  -moz-transform: rotate(-20deg);        /* FF */
  -o-transform: rotate(-20deg);          /* Opera */
  -ms-transform: rotate(-20deg);         /* IE9 */
  transform: rotate(-20deg);             /* W3C compliant browsers */

  /* IE8 and below */
/*  filter: progid:DXImageTransform.Microsoft.Matrix(M11=-1, M12=0, M21=0, M22=-1, DX=0, DY=0, SizingMethod="auto expand");*/
}

/*
div#intro{
	-moz-border-radius: 7px;
    -webkit-border-radius: 7px;
    -khtml-border-radius: 7px;
    border-radius: 7px;
	float:left; 
	margin-left:4px;
	background-color:#ecdde2; /*#f5ebeb , ecdde2*/
/*	width:70%;
	max-width:750px;
	padding:7px;
	font-size: 14px;
}
*/

div#intro2{
	float:left; 
	background-color:#ecdde2; /* #E0E0E0  */
	padding:10px 150px 10px 35px;
	font-size: 14px;
	margin-bottom:20px;
}

img#me{
	-moz-border-radius: 7px;
    -webkit-border-radius: 7px;
    -khtml-border-radius: 7px;
    border-radius: 7px;
	}
	
div.dot{
	   -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    -khtml-border-radius: 5px;
    border-radius: 5px;
	height:10px;
	width:10px;
	float:left;
	color:#E0E0E0;
	/*background-color:#E0E0E0;*/
	background-color:#ecdde2;
	margin-left:4px;
}

body{margin:0;}

div.closed{display:none;}

.bgcolor {
    position: fixed;
    top: 0px;
    left: 0px;
    width: 90%;
    height: 100%;
    background-color: white;
    z-index: 1;
}

div.article{
	padding-bottom:4px; 
	float:left;
	clear:left;
	width:100%;
	white-space: nowrap;
	/*background-color: green;*/
	}

div.articleshorten{
	width: 85%;
	float:left;
    overflow: hidden;
    text-overflow: ellipsis;
	/*background-color: red;*/
}

.keywords{
	color:#ecdde2;
	line-height: 190%;
	}

a.keywords{padding: 2px 7px 2px 7px; background-color: #b77e91; margin-bottom: 3px;color: white;}
a.keywords:hover{background-color:#cd9eae; text-decoration: none;}

a.keywords:visited {color: white;}

img.keywords{margin-bottom:-7px;}

a.mobile{display:none;}

div.articleimg{
	float:left; 
	line-height:100%;
	margin-left:3px;
	margin-bottom:2px;
	/*overflow:hidden;*/   /* Hides the tooltip!! */
	height: 14vh;
}

div.articleimg, img.imgtooltip{
	-webkit-animation:pulsate 2s infinite;
	-moz-animation:pulsate 2s infinite;
	-o-animation:pulsate 2s infinite;
	animation:pulsate 2s infinite;
}

img.aimg, img.imgtooltip{
overflow:hidden; 
/*background-image: url("img/loading8.gif");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: 10% 10%; */
}

/* carefully optimzed to fill whole img container even if img has different proportions.
This created nicly aligned img rectangles: */
img.aimg{
	height:100px; /*Fallback: must be before line with height in vh units. Ca 0.7 * vh*/
	height:14vh;
	}

img.imgtooltip{float:left; margin-right:10px; margin-bottom:2px; margin-top:5px; width:60%; max-width: 600px; height:auto; min-height:50px;}
img.rightfade{float:right; width:20px; height:100%; margin-left:-20px;}

/* Tooltip */
.wrapper {
  position: relative;
}

div.tooltipbody p:first-child { /* doest work cause image is comming as first element */
  /*color: lime; */
 /* margin-top:0px; */
}

div.tooltipbody p{margin: 0px 0px 12px 0px;}

div.articleimg .tooltip{margin-bottom:-5px;}

h4{margin-top:0px; margin-bottom:6px;}

td.pad{padding-right:10px;}

.wrapper .tooltip {
  z-index:1;
  white-space:normal;
  line-height:140%;
  font-size:14px;
  background: #A1A1A1;
  bottom: 100%;
  color: white;
  display: none;
  left: -3px;
  right: -4px;
  padding: 10px;
  margin-bottom:6px;
  /*pointer-events: none; This makes pointer mouse show for links under current toolip, not wanted!*/
  position: absolute;
	
	/* Optional Shadow */
  -moz-box-shadow:    4px 7px 5px 0px rgba(0, 0, 0, 0.1);
  -webkit-box-shadow: 4px 7px 5px 0px rgba(0, 0, 0, 0.1);
  box-shadow:         4px 7px 5px 0px rgba(0, 0, 0, 0.1);
  max-width: 1100px;
}

/* This bridges the gap so you can mouse into the tooltip without it disappearing */
/*
.wrapper .tooltip:before {
  bottom: -20px;
  content: " ";
  display: block;
  height: 20px;
  left: 0;
  position: absolute;
  width: 100%;
}  
*/

/* CSS Triangles - see Trevor's post */
.wrapper .tooltip:after {
  border-left: solid transparent 10px;
  border-right: solid transparent 10px;
  border-top: solid #A1A1A1 10px;
  bottom: -9px;
  content: " ";
  height: 0;
  right: 70%;
  margin-left: -13px;
  position: absolute;
  width: 0;
}

.mobile{display:none;}
img.tapicon{position:absolute; right:0px; top:35px; display:none;}


.noselect {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
	-webkit-tap-highlight-color: transparent;
}

.left{float:left;}
.right{float:right;}
div.date{float:right; color:whitesmoke; font-size:smaller;}
div.tag{width:90%;}
.togglebox{padding-left:8px; cursor:pointer; font-size:18px;}
.closecol .togglebox:hover{color:#cd9eae;}
span.nof{padding-left:8px; font-size:18px;}
div.closecol{
	background-image: none !important;
	min-height: auto;
	margin-bottom:3px;
	padding-bottom:3px;
	color:lightgray;
	width:220px;
	clear:left;
}


form.search{
	padding-left:2%;
	padding-bottom:10px;
}

form.search input[type=text] {
	padding: 10px;
	font-size: 16px;
	border: none;
	float: left;
	width: 70%;
	max-width:250px;
	background: #f1f1f1;
	clear: both;
  }
  
  form.search button {
	float: left;
	width: 18%;
	max-width:80px;
	padding: 10px;
	background: #c6c6c6;
	color: white;
	font-size: 16px;
	border: none;
	cursor: pointer;
  }
  
  form.search button:hover {
	background: #bcbcbc;
  }
  
  form.search::after {
	content: "";
	clear: both;
	display: table;
  }


/*Iphone X:  375px X 812px
Iphone 8+:  : 414px X 736px 
*/
/* Captures all phones (with extra margin) in portrait mode: */
/*@media only screen and (max-width: 600px) {*/
/*must capture the 2*400px(col width)=800px scenario. Captures most phones in potrait+lanscape mode:*/
@media only screen and (max-width: 810px) {
	div.col, div.col_small{width:96%; padding-left:2%;}
	div.dot{margin-left:2px;}
	div#intro{margin-left:2px;width:65%;}
	div#intro2{padding:3%;}
	.desktop{display:none;}
	.mobile{display:inline;}
	/*img.aimg{height:18vh;}
	div.articleimg{width:24%; height:18vh;}
	*/
	/*	
	.wrapper:hover .tooltip {
		opacity: 0;
		transform: none;
	}
	.wrapper .tooltip {transform: none; opacity: 0.2;}
	*/

	img.tapicon{right:1px;} /* Dont change value, used in code */
	/* Not used: a.mobile{display:inline; color:white; text-decoration:underline;}  */
	/*body{background-color:lightblue;}*/
}

/* Rules for smaller phones: */
@media only screen and (max-width: 500px) {
	/*body{background-color:lightblue;}*/
	img.aimg{
			height:140px; /*Fallback: must be before line with height in vh units*/
			height:20vh;
			}
	div.articleimg{
		width:49%;
		height:140px; /*Fallback: must be before line with height in vh units*/
		height:20vh;
		}
}

/* Captures everything in landscape mode (applies to laptop as well!!): */
@media only screen and (orientation: landscape) {
	/*body{background-color:lightyellow;}*/
	img.aimg{
			height:170px; /*Fallback: must be before line with height in vh units*/
			height:24vh;
			}
	div.articleimg{
		width:19%;
		height:170px; /*Fallback: must be before line with height in vh units*/
		height:24vh;
		}
}

/* Bigger landscape screen = modern laptops: */
@media only screen and (orientation: landscape) and (min-width: 1000px) {
	/*body{background-color:lightpink;}*/
	img.aimg{
		height:125px; /*Fallback: must be before line with height in vh units*/
		height:18vh;
		}
	div.articleimg{
		width:10.9%;
		height:125px; /*Fallback: must be before line with height in vh units*/
		height:18vh;
		}
	/* To make tooltip little wider than col */
	.wrapper .tooltip {
	margin-left:-25px;
	margin-right:-15px;
	}
	div.articleimg .tooltip {
	margin-left:-5px;
	margin-right:-20px;
	}
}

@media only screen and (orientation: landscape) and (max-width: 900px){
	div.col, div.col_small{width:96%; padding-left:2%;}
}