/* CCS for FindTheWord.info and Kryssakuten.se */

html
{
	font-family: 'Roboto', Arial, sans-serif;
	font-size: 16px;
	line-height: 1.5;
	/* Enable a font's kerning: http://stackoverflow.com/questions/15160897/font-feature-settings-what-is-the-correct-syntax */
	font-feature-settings: "kern";
	-moz-font-feature-settings: "kern";
	-webkit-font-feature-settings: "kern";

	color: #000;
	margin: 0;
	padding: 0;
	height: 100%;
}

body
{
}

div
{
	/*box-sizing: border-box;*/
}

form
{
	margin: 0px;
	padding: 0px;
}

input
{
	outline-color: #b8c6df;
}

/*  Texter och rubriker */
p
{
	/*font-size: 12px;*/
	font-weight: normal;
	color: #000;
	/*word-spacing: 2px;
	line-height: 120%;*/
	margin: 6px 0px 6px 0px;
	padding: 0px;
}

h1  /* Rubrik */
{
	font-size: 1.33rem;font-weight: bold;color: #000;
	margin: 0px;
	padding:0px 0px 10px 0px;
}

h2 /* Underrubrik*/
{
	font-size: 1.16rem;font-weight: bold;color: #000;
	margin:0px 0px 8px 0px;
	padding: 0px;
	clear:both;
}

h3 /* Underrubrik */
{
	font-size: 1.00rem;font-weight: bold; font-style:italic; color:#000;
	margin: 12px 0px 0px 6px;
	padding: 0px;
}

h4 /* Underrubrik */
{
	font-size: 1.00rem;font-weight: bold;color: #000;
	margin: 0px;
	padding: 0px;
}

h5 /* Underrubrik*/
{
	font-size: 1.00rem;font-weight: bold;color: #BE1E2D;
	margin: 0px;
	padding:0;
}

/*  Länkar  */
a
{
	color:#000;
	text-decoration:none;
}

a:visited
{
	color:#000;
	text-decoration:none;
}

a:active
{
	color:#039;
	text-decoration:none;
}

/* 
Includes:
Hover search links 
*/
a:hover
{
	color:#039;
	/*
	background-color: rgba(255, 255, 255, .3);
	border-radius: 3px;
	*/
	text-decoration:none;
}

.bigtext{
    font-size: 1.2rem;
}

/*  Meny  */

ul
{
	margin: 0px;
	padding: 0px;
}
		
li 
{ 
	margin: 0px;
	padding: 0px;
	list-style-type: none;
}

/* Huvudmeny */

ul#navigation
{
	padding: 0px;
	margin: 0px 0px 0px 5px;
	list-style-type:none;
}
		
ul#navigation li 
{ 
	float:left;
	padding: 0px;
	margin: 0px 0px 0px 20px;
	/*font-size:.92rem;*/
	font-weight:bold;
}
		
ul#navigation li a
{
	float:left;
	display:block;
	/*height:10px;*/
	margin: 0px;
	/*padding:12px 0px 0px 0px;*/
	padding: 6px;
	color:#000;
	font-size:1.16rem;
	text-decoration:none;
}

ul#navigation li a.present, a.present
{
	color:#039;
}

ul#navigation li a:hover
{
	color:#039;
}

/* Slut huvudmeny */

/* Main containers */
#topcontainer
{
	position:relative;
	margin:10px auto 0px auto;
	padding: 0px;
	width:1440px;
	min-height:800px;
}

#leftcontainer
{
	position:relative;
	float: left;
	/*margin:0px auto 0px auto*/
	padding:0px;
	width: 750px;
	/*min-height: 1024px;*/
}

/* Reklam*/
#topbanner
{
	position:relative;
	margin:0px 0 5px 0;
	padding:0px 0px 0px 14px;
	width:750px;
	/*height:93px;*/
	display: flex;
	justify-content: center;
}

#bottombanner
{
	display: flex;
	align-items: center;
	width: 100%;
	flex-direction: column;
}

#leftcommercial
{
	/* Will hopefully adjust width depending on what we add in it... */
	float: left;
	margin: 0px 15px 10px 0px;
	padding: 0px;
	/*width: 300px;*/
	min-height: 800px;
}

#rightcommercial
{
	float: left;
	margin: 0px 0px 10px 15px;
	padding:0px;
	width:300px;
	min-height:800px;
}

.adspacer
{
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 0px 10px 10px 0px;
	/*min-height: 2px;*/
}

.adsbygoogle
{
	width: 100%;
}


/* Sidhuvud med logga */
#top
{
	position: relative;
	margin: 0px;
	padding: 0px;
	width: 756px;
	height: 120px;
	background-image:url(//cdn.findtheword.info/grfx/top_logo.png); 
	background-repeat:no-repeat;
	background-size: contain;
}


/* Sökningsbox mellan meny och textbox */
#searchbox
{
	position:relative;
	float:left;
	margin: 0px;
	padding: 0px;
	width:762px;
	height:103px;
}

#searchbox h1
{
	margin: 0px;
	padding: 0px 0px 5px 0px;
}

#searchboxleft
{
	position:relative;
	float:left;
	margin: 0px;
	padding: 10px 0px 0px 20px;
	width:480px;
	min-height:84px;

	margin: 4px;

	/* Border start */
	border: solid 2px #4D5E73;

	-moz-border-radius: 12px 3px 3px 12px;
	border-radius: 12px 3px 3px 12px;
	/* Border end */	
}

#searchboxright
{
	position:relative;
	float:left;
	margin: 0px;
	padding:14px 12px 0 20px;
	width: 190px;
	min-height: 80px;

	margin: 4px;

	/* Border start */
	border: solid 2px #4D5E73;

	-moz-border-radius: 3px 12px 12px 3px;
	border-radius: 3px 12px 12px 3px;
	/* Border end */
}

/* Slut sökningsbox */

#menu
{
	position:relative;
	margin: 0px;
	/*padding: 0px;*/
	width: 740px;
	min-height: 40px;

	padding: 8px;
	margin: 4px;
		
	box-sizing: border-box;

	/* Border start */
	border: solid 2px #4D5E73;

	-moz-border-radius: 12px;
	border-radius: 12px;
	/* Border end */
}

#main
{
	position:relative;
	float:left;
	margin: 0px;
	padding: 0px;
	min-height:420px;
	width:760px;
}

#textboxstart
{
	position:relative;
	float:left;
	padding:20px 20px 0 20px;
	margin: 0px;
	width: 460px;
	min-height:360px;

	margin: 4px;
	
	/* Border start */
	border: solid 2px #4D5E73;

	-moz-border-radius: 12px 3px 3px 12px;
	border-radius: 12px 3px 3px 12px;
	/* Border end */
}

#textbox
{
	position:relative;
	float:left;
	padding: 0px;
	margin: 0px;
	width:730px;
	min-height:450px;

	padding: 8px;
	margin: 4px;

	/* Border start */
	border: solid 2px #4D5E73;

	-moz-border-radius: 12px;
	border-radius: 12px;
	/* Border end */
}

/* boxar högersida */
#right
{
	position:relative;
	float: left;
	padding: 0px;
	margin: 0px;
	width:238px;
	min-height:100%;
	display: flex;
	flex-direction:column;
}

#righttop
{
	position:relative;
	float: left;
	padding:20px 10px 0 20px;
	margin: 0px;
	width:194px;
	height:100px;

	margin: 4px;
	
	/* Border start */
	border: solid 2px #4D5E73;

	-moz-border-radius: 3px 12px 3px 3px;
	border-radius: 3px 12px 3px 3px;
	/* Border end */

	flex: 1;
}

#righttop p
{
	/*font-size:.83rem;*/
}

#rightmiddle
{
	position:relative;
	float: left;
	padding:20px 10px 0 20px;
	margin: 0px;
	width:194px;
	height:96px;
	
	margin: 4px;
	
	/* Border start */
	border: solid 2px #4D5E73;

	-moz-border-radius: 3px;
	border-radius: 3px;
	/* Border end */

	flex: 1;
}

#rightmiddle p
{
	/*font-size:.83rem;*/
}

#rightbottom
{
	position:relative;
	float: left;
	padding: 20px 10px 0 20px;
	margin: 0px;
	width:194px;
	min-height:100px;

	margin: 4px;
	
	/* Border start */
	border: solid 2px #4D5E73;

	-moz-border-radius: 3px 3px 12px 3px;
	border-radius: 3px 3px 12px 3px;
	/* Border end */

	flex: 1;
}

#rightbottom p
{
	/*font-size:.83rem;*/
}

/* slut */

#bottomfooter
{
	box-sizing: border-box;
	float: left;
	width: 740px;
	min-height:29px;
	/*font-size: .83rem;*/
	padding: 8px;
	margin: 4px;
	
	/* Border start */
	border: solid 2px #4D5E73;

	-moz-border-radius: 12px;
	border-radius: 12px;
	/* Border end */
}

/*  Klasser  */

/* Full size divs */
.fullwidth
{
	width: 100%;
}

.flags
{
	float:right;
	margin:10px 10px 0px 0px;
	padding: 0px;
	border:none;
}

.flexcenter
{
	display: flex;
	justify-content: center;
	align-items: center;
}

.flags a img
{
	border:none;
}

/* Länkar sökningar  */

.searchlink
{
	float: left;
	margin: 2px 15px 10px 0px;
	padding: 0px 0px 0px 12px;
	color: #000;
	text-decoration: none;
	background-image: url(//cdn.findtheword.info/grfx/arrow.png); background-repeat: no-repeat; 
	line-height: 1;
}

/* 
 * Test of no-image searchlink
 *
div.searchlink 
{
	float:left;
	margin: 0px 15px 0px 0px;
	padding: 0px 0px 0px 12px;
	color:#000;
	text-decoration:none;
}

ul.searchlink
{
    padding: 0px;
    list-style: none;
}

li.searchlink:before
{ 
    content: "";
    border-color: transparent #f8f8f8;
    border-style: solid;
    border-width: 0.35em 0 0.35em 0.75em;
    display: block;
    height: 0;
    width: 0;
    left: -1em;
    top: 0.9em;
    position: relative;
}
*/
/* Slut länkar sökningar */

/*  Googlesök top-höger  */
.searchbutton
{
	float:left;
	margin:0px 0px 0px 5px;
/*	padding:8px 0 8px 0;
	width:60px;*/	
	min-height:41px;
	text-align:center;
	background-color:transparent;

	font-size: 1rem;
	font-weight: bold;

	/* Border start */
	border: solid 2px #4D5E73;

	-moz-border-radius: 8px;
	border-radius: 8px;
	/* Border end */

	/* Background start */
	background: rgb(235,235,235); /* Old browsers */
	/* IE9 SVG, needs conditional override of 'filter' to 'none' */
	background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ViZWJlYiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNjOGM4YzgiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
	background: -moz-linear-gradient(top,  rgba(235,235,235,1) 0%, rgba(200,200,200,1) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(235,235,235,1)), color-stop(100%,rgba(200,200,200,1))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  rgba(235,235,235,1) 0%,rgba(200,200,200,1) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  rgba(235,235,235,1) 0%,rgba(200,200,200,1) 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  rgba(235,235,235,1) 0%,rgba(200,200,200,1) 100%); /* IE10+ */
	background: linear-gradient(to bottom,  rgba(235,235,235,1) 0%,rgba(200,200,200,1) 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ebebeb', endColorstr='#c8c8c8',GradientType=0 ); /* IE6-8 */
	/* Background end */
}

.searchbutton:hover
{
	border-width: 3px;
}
/*  slut  */


/*  Sökbox i textbox  */
.searchtextbox
{
	position:relative;
	float:left;
	clear:both;
	margin:4px 0px 5px 0px;
}

.searchboxlong, .biginput, .crossword, .crosswordinput, .crosswordinputlong
{
	font-family: 'comic_reliefregular', 'Comic Sans MS', Arial, sans-serif;
}

.searchboxlong
{
	font-size: 1.33rem;
	text-transform: uppercase;
	float:left;
	padding:5px 0 5px 5px;
	width:252px;
	border:#4D5E73 solid 2px;
	margin: 0px;
	background-color:#fff;
	line-height:100%;
}

.biginput
{
	margin: 6px;
	padding: 3px;
	font-size: 1.16rem;
	text-transform: uppercase;
	border:#4D5E73 solid 3px;
	border-radius: 4px;
}

.biginput[type=checkbox]
{
	width: 1.16rem;
	height: 1.16rem;
}

/* Gamla sökboxar */
.crossword
{
	text-transform: uppercase;
	color: #000000;
	background-color: #FFFFFF;
	font-size: 1.33rem;
	padding: 0px;
	width: 32px;
	height: 30px;
	border: none;
}

.crosswordinput 
{
	text-transform: uppercase;
	color: #000000;
	background-color: #FFFFFF;
	font-size: 1.33rem;
	text-align: center;
	vertical-align: middle;
	margin: 3px 3px 3px 0px;
	width: 32px;
	height: 30px;
	border: 0px solid;
	outline: none;
}

input::-webkit-input-placeholder
{
	color: #D8D8D8;
}

input:-moz-placeholder 
{
	color: #D8D8D8;
}

input:-ms-input-placeholder
{
	color: #D8D8D8;
}

.outercrosswordinput
{
	background-color: #4D5E73;
	border-radius: 4px;
	padding: 0px 0px 0px 3px
}

.crosswordinputlong 
{
	color: #000000;
	background-color: #FFFFFF;
	font-size: 1.33rem;
	text-align: left;
	text-transform: uppercase;
	vertical-align: middle;
	/*height: 22px;*/
	border: 3px solid;
	border-color: #4D5E73;
	border-radius: 4px;
	padding: 3px;
	max-width: 75%;
}

/*  slut  */

/* Links (to details and external) on serach page are now more button-like */
.detailslink
{
	float: left;
	background-color: #eeeeee;
	font-size: 1.083rem;
	padding: 4px;
	margin: 4px 0px;
	border: solid 1px #4D5E73;
	-moz-border-radius: 4px;
	border-radius: 4px;
}

.detailslink:hover
{
	background-color: #fff;
}

.externwordlink
{
	float: left;
	background-color: #eee;
	/*font-size: .83rem;*/
	padding: 4px;
	margin: 4px 4px 4px 0px;
	border: solid 1px #4D5E73;
	
	-moz-border-radius: 3px;
	border-radius: 3px;
}

.externwordlink:hover
{
	background-color: #fff;
}

/* Numbers (and prev/next) in list with page numbers */

.pageheader
{
	float: left;
	font-weight: bold;
	padding: 4px;
	margin: 4px 4px 4px 0px;
}

.pagenumber
{
	float: left;
	background-color: #DDD;
	color: #000;
	font-size: 1.083rem;
	line-height: 1;
	padding: 4px 8px;
	margin: 4px 2px;
	border: solid 1px #4D5E73;
	-moz-border-radius: 4px;
	border-radius: 4px;
}

.pagenumber:hover
{
	background-color: #fff;
}

.pagenumbercurrent {
	float: left;
	background-color: #fff;
	color: #000;
	font-size: 1.083rem;
	line-height: 1;
	padding: 4px 8px;
	margin: 3px 2px;
	border: solid 2px #4D5E73;
	-moz-border-radius: 4px;
	border-radius: 4px;
}

/* Teckenförklaring på startsidan  */

.teckenforklaring
{
	position:relative;
	float:left;
	clear:both;
	margin: 0px;
	width:450px;
	min-height:150px;
}

.teckenforklaring h1
{
	margin-bottom:0px;
	font-size:1.00rem;
}

.logo
{
	position:relative;
	float:left;
	border:0;
	margin:20px 0px 0 50px;
	max-width: 90%;
}

/* Nyhetsformatering  */

.rubrik
{
	position:relative;
	float:left;
	clear:both;
	font-size: 1.16rem;font-weight: bold;color: #4d5e73;
	word-spacing:2px;
	line-height:100%;
	margin:0px 0 5px 0;
	padding: 0px;
	display:block;
}

.datum
{
	font-size: 1.00rem;font-weight: bold;color: #4d5e73;
	word-spacing:2px;
	line-height:100%;
	margin:5px 0 15px 0;
	padding: 0px;
}

/*
 *	Error text
 */
.errortext
{
	font-size:1.5rem;
	font-weight: bold;
	margin-bottom: 12px;
}

/*  Tabell på sidan "Information om korsord" */

.fulltable
{
	width:550px;
	border:none;
}

.column1
{
	width:280px;
	vertical-align:top;
	padding: 4px;
}

.column2
{
	width:50px;
	vertical-align:top;
	font-weight:bold;
	padding: 4px;
}

.column3
{
	width:140px;
	vertical-align:top;
	font-weight:normal;
	padding: 4px;
}

.column4
{
	width:80px;
	vertical-align:top;
	font-weight:bold;
	padding: 4px;
}

/*  Sidan korsordslexikon*/

/*  Antal bokstäver */
.letters
{
	width:600px;
	height:110px;
	margin: 0px;
	padding: 0px;
}

.letters p
{
	font-size:1.00rem;
	font-weight:bold;
}

/*  Länken som kommer vara aktiv är fetmarkerad  */
.active
{
	/*font-size:.83rem;*/
	font-weight:bold;
}

/* Ram runt Kontakta formuläret */
.form input
{
	border:#4D5E73 solid 2px;
}

/*Fix*/
#container:after
{
	content: " ";
	clear:both;
	height:0;
	visibility:hidden;
	display:block;
}

a:focus 
{ 
	outline: none; 
}

/*
 * Gradients
 */
.bluegradient
{
	/* Background start */
	background: rgb(184,198,223); /* Old browsers */
	background: -moz-radial-gradient(center, ellipse cover,  rgba(184,198,223,1) 47%, rgba(109,136,183,1) 100%); /* FF3.6+ */
	background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(47%,rgba(184,198,223,1)), color-stop(100%,rgba(109,136,183,1))); /* Chrome,Safari4+ */
	background: -webkit-radial-gradient(center, ellipse cover,  rgba(184,198,223,1) 47%,rgba(109,136,183,1) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-radial-gradient(center, ellipse cover,  rgba(184,198,223,1) 47%,rgba(109,136,183,1) 100%); /* Opera 12+ */
	background: -ms-radial-gradient(center, ellipse cover,  rgba(184,198,223,1) 47%,rgba(109,136,183,1) 100%); /* IE10+ */
	background: radial-gradient(ellipse at center,  rgba(184,198,223,1) 47%,rgba(109,136,183,1) 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b8c6df', endColorstr='#6d88b7',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
	/* Background end */
}

 .greygradient
 {
 	/* Background start */
	background: rgb(235,235,235); /* Old browsers */
	background: -moz-radial-gradient(center, ellipse cover,  rgba(235,235,235,1) 35%, rgba(168,168,168,1) 100%); /* FF3.6+ */
	background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(35%,rgba(235,235,235,1)), color-stop(100%,rgba(168,168,168,1))); /* Chrome,Safari4+ */
	background: -webkit-radial-gradient(center, ellipse cover,  rgba(235,235,235,1) 35%,rgba(168,168,168,1) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-radial-gradient(center, ellipse cover,  rgba(235,235,235,1) 35%,rgba(168,168,168,1) 100%); /* Opera 12+ */
	background: -ms-radial-gradient(center, ellipse cover,  rgba(235,235,235,1) 35%,rgba(168,168,168,1) 100%); /* IE10+ */
	background: radial-gradient(ellipse at center,  rgba(235,235,235,1) 35%,rgba(168,168,168,1) 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ebebeb', endColorstr='#a8a8a8',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
	/* Background end */	
}

/*
 * Shadows
 */
.boxshadow
{
 	-moz-box-shadow: -3px 3px 3px #CCC;
	-webkit-box-shadow: -3px 3px 3px #CCC;
	box-shadow: -3px 3px 3px #CCC;
}