/*
Theme Name: Spelgalen theme
Theme URI: 
Author: 
Author URI: 
Description:
Version: 1.0 Beta
*/

@import url("normalize.css");

/* clerafix----------------------------------------------------------- */
.clearfix:after { 
	visibility: hidden; 
	display: block; 
	font-size: 0; 
	content: " "; 
	clear: both; 
	height: 0; 
}
.clearfix { 
	display: inline-block; 
	clear: both; 
}
/* start commented backslash hack \*/ * html .group { height: 1%; } .group { display: block; } /* close commented backslash hack */

/*
Grid
*****************************************************************************/
.container { 
		margin: 0 2%;
	}


.container:after
{
	clear: both;
	content: "";
	display: table;
}
.row
{
	margin: 0 auto;
	max-width: 1050px;
	zoom: 1;

}
.row:before,
.row:after
{
	content: "";
	display: table;
	line-height: 0;
}
.row:after
{
	clear: both;
}
.row [class*="box-"]
{
	box-sizing: border-box;
	display: block;
	float: left;
	margin-left: 2.709239449864817%;
	margin-left: 2.7624309392265194%;
	min-height: 30px;
	moz-box-sizing: border-box;
	webkit-box-sizing: border-box;
	width: 100%;

}
.row [class*="box-"]:first-child
{
	margin-left: 0;
	
}
.row .box-100
{
	width: 100%;
	width: 99.94680851063829%;
}
.row .box-11
{
	width: 91.38327259903608%;
	width: 91.43646408839778%;
}
.row .box-10
{
	width: 82.81973668743387%;
	width: 82.87292817679558%;
}
.row .box-75
{
	width: 77.25620077583166%;
	width: 77.30939226519337%;
}
.row .box-66
{
	width: 65.69266486422946%;
	* width: 63.74585635359117%;
}
.row .box-60
{
	width: 57.12912895262725%;
	* width: 58.18232044198895%;
}
.row .box-50
{
	width: 48.56559304102504%;
	* width: 47.61878453038674%;
}
.row .box-40
{
	width: 40.00205712942283%;
	* width: 39.05524861878453%;
}
.row .box-33
{
	width: 31.43852121782062%;
	* width: 30.491712707182323%;
}
.row .box-25
{
	width: 22.87498530621841%;
	width: 22.92817679558011%;
}
.row .box-16
{
	width: 11.311449394616199%;
	width: 11.3646408839779%;
}
html
{
	height: 100%;
}
body
{
	background-color: #ffffff;
	height: 100%;
	height: auto !important;
	min-height: 100%;
	position: relative;
}
h1, h2, h3, h4
{
	color: #333;
	font-family: "Lato";
	line-height: 1.2;
	margin: 0;
	text-transform: uppercase;
}

.big-link {
	font-family: "Oleo Script";
	font-size:45px;
	color:#fff;
}
.big-logo {
	font-family: "Oleo Script";
	font-size:80px;
	color:#fff;
	line-height:160px;
}

.big-logo a:hover
{
	text-decoration: none;
}

h1
{
	font-weight: 300;
}

h2
{
	font-weight: 700;
}




p
{
	color: #555;
	font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; 
    font-weight: 300;
	font-size: 15px;
	font-weight: 400;
	line-height: 1.3;
	margin: 0px 0 16px 0;
}
a
{
	color: #0091cf;
	text-decoration: none;
}
a:hover
{
	cursor: pointer;
/*	text-decoration: underline;*/
}
a:hover, a:active, a:focus
{
	outline: 0;
}
h1
{
	font-size: 40px;
}

h1 a
{
	font-size: 50px;
	color:#333333;
	text-decoration: none;
}


h1 a:hover
{
	
	color:#000000;
	text-decoration: none;
}

h2
{
	font-size: 35px;
}
.maincontent h3
{
	font-size: 24px;
	font-weight: 300;
	text-transform: none;
}
.line
{
	border-bottom: 1px solid #d8d8d8;
	clear: both;
	height: 8px;
	line-height: 0;
	margin-bottom: 18px;
	width: 100%;
}

.dotted{
border-bottom: 1px dotted #d8d8d8;
}

img{
height: auto;
line-height: 0px;
max-width: 100%;
}

.reklam {
text-align: center;
}

#bildwrap{
background-color: #f1f1ef;
min-height:300px;
line-height: 0;
margin: 0 0 15px 0;
position:relative;
background: transparent center center no-repeat;
background-size: cover;
width: 100%;
}

#bildwrap-subpage {
background-color: #f1f1ef;
min-height:150px;
line-height: 0;
margin: 0 0 15px 0;
position:relative;
background: transparent center center no-repeat;
background-size: cover;
width: 100%;
}

.spelbolagrubrik{
	text-decoration: none;
	color:#333333;
}

.spelbolagrubrik:hover{
	text-decoration: none;
	color:#000000;
}



/*
Menu
*****************************************************************************/
#menu-wrap{
	float:left;
	margin-top:30px;
	margin-bottom: 4px;
	list-style:none;
	position:relative;
	left:-7px;	
}

#menu-wrap a{
	font-family: "lato", serif; 
	font-weight: 300;
	text-transform:uppercase;
	color:#333;
	font-size:17px;
}

#menu-wrap a:hover{
	
	color:#000000;
	text-decoration:none;
}

#menu-wrap a:active, #menu-wrap a:visited{
	color:#333333;
}

#menu-wrap .current-menu-item a{
	background-color:#FFFFFF;
	color:#FA6900;
	font-weight: 700;
	border-bottom-left-radius:0px;
	border-bottom-right-radius:0px;
	border-top-left-radius:4px;
	border-top-right-radius:4px;
}

#menu-wrap ul{
padding:0;
display:block;
list-style:none;
}

#menu-wrap li{
float:left;
position:relative;
}

#menu-wrap li a{
padding:8px;

}

#menu-wrap .sub-menu {
	position: absolute;
	 top: 100%;
	 left: 0;
	 z-index: 1000;
	  display: none;
	  float: left;
	  min-width: 160px;
	  padding: 5px 0;
	  margin: 10px 0 0;

	border-bottom-left-radius:6px;
	border-bottom-right-radius:6px;
	border-top-left-radius:0px;
	border-top-right-radius:0px;

	  list-style: none;
	  background-color: #ffffff;
	  border: 1px solid #ccc;
	  border: 1px solid rgba(0, 0, 0, 0.2);

	  *border-right-width: 2px;
	  *border-bottom-width: 2px;
	 
	-webkit-box-shadow:  0px 1px 1px 0px rgba(0, 0, 0, 0.4);
			box-shadow:  0px 1px 1px 0px rgba(0, 0, 0, 0.4);
	  
	  -webkit-background-clip: padding-box;
		 -moz-background-clip: padding;
			  background-clip: padding-box;
}

#menu-wrap li:hover  > .sub-menu {
    display: block;
}

#menu-wrap .sub-menu a {
	text-transform:none;
	display: block;
  padding: 3px 20px;
  clear: both;
  font-weight: normal;
  line-height: 20px;
  color: #333333;
  white-space: nowrap;
}

.sub-menu li > a:hover,
.sub-menu li > a:focus,
.sub-menu:hover > a {
color: #ffffff;
  text-decoration: none;
  /*
  background-color: #0088cc;
  background-color: #0081c2;
  background-image: -moz-linear-gradient(top, #0088cc, #0077b3);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0077b3));
  background-image: -webkit-linear-gradient(top, #0088cc, #0077b3);
  background-image: -o-linear-gradient(top, #0088cc, #0077b3);
  background-image: linear-gradient(to bottom, #0088cc, #0077b3);
  background-repeat: repeat-x;
  filter: progid:dximagetransform.microsoft.gradient(startColorstr='#ff0088cc', endColorstr='#ff0077b3', GradientType=0);
  */
}


/*
Toplista
*****************************************************************************/

.topplista-wrap{
position:relative;
min-height: 270px;
}

img.topplistalogo{
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
max-width:96%;
margin-left:2%;
}

.topplistalogo-wrap{
border:0px solid #d7d7d7;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
background-color:white;
padding:2% 0;
line-height:0;
-webkit-box-shadow:  0px 1px 3px 1px rgba(0, 0, 0, 0.4);
box-shadow:  0px 1px 3px 1px rgba(0, 0, 0, 0.4);
max-width: 389px;
}

.topplistanummer{
position:absolute;
left:-15px;
top:15px;
height:20px;
width:20px;
background-color:#FFFFFF;
  text-align: center;
  line-height:21px;
  padding:10px;
-webkit-box-shadow:  0px 1px 3px 1px rgba(0, 0, 0, 0.4);
box-shadow:  0px 1px 3px 1px rgba(0, 0, 0, 0.4);
-webkit-border-radius: 40px;
-moz-border-radius: 40px;
border-radius: 40px;
  font-family: "lato";
font-size:30px;
font-weight: 700;
color:#FA6900;
}

.knapp-wrap{
position:absolute;
* position: static;

bottom:-5px;
}

a.knapp{
padding:1.5% 2%;
-webkit-box-shadow:  1px 1px 1px 0px rgba(0, 0, 0, 0.5);
box-shadow:  1px 1px 2px rgba(0, 0, 0, 0.5);
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
color:#FFFFFF;
text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.5);
font-family: "lato";
letter-spacing: 0.5 px;
font-weight: 700;
white-space:nowrap;
float:right;
margin-left:2%;
margin-bottom:2%;
}

a.knapp:hover{
text-decoration:none;
}

a.bonus{
margin-right:2%;
background: #9ED54C; /* Old browsers */
background: -moz-linear-gradient(top,  #9ED54C 0%, #59A80F 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#9ED54C), color-stop(100%,#59A80F)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #9ED54C 0%,#59A80F 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #9ED54C 0%,#59A80F 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #9ED54C 0%,#59A80F 100%); /* IE10+ */
background: linear-gradient(to bottom,  #9ED54C 0%,#59A80F 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9ED54C', endColorstr='#59A80F',GradientType=0 ); /* IE6-9 */
}

a.bonus:hover{
-webkit-box-shadow: 1px 1px 10px 0px rgba(27, 217, 131, 0.7), 1px 1px 1px 0px rgba(0, 0, 0, 0.5);
box-shadow: 1px 1px 10px 0px rgba(0, 207, 93, 0.7), 1px 1px 1px 0px rgba(0, 0, 0, 0.5);
}

a.spela{
background: #FA6900; /* Old browsers */
background: -moz-linear-gradient(top,  #FA6900 0%, #df271b 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FA6900), color-stop(100%,#df271b)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #FA6900 0%,#df271b 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #FA6900 0%,#df271b 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #FA6900 0%,#df271b 100%); /* IE10+ */
background: linear-gradient(to bottom,  #FA6900 0%,#df271b 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FA6900', endColorstr='#df271b',GradientType=0 ); /* IE6-9 */
}

a.spela:hover{
-webkit-box-shadow: 1px 1px 10px 0px rgba(250, 0, 0, 0.7), 1px 1px 1px 0px rgba(0, 0, 0, 0.5);
box-shadow: 1px 1px 10px 0px rgba(250, 0, 0, 0.7), 1px 1px 1px 0px rgba(0, 0, 0, 0.5);
}

.heartwrap{
text-align:right;
width: 48.56559304102504%;
width: 48.61878453038674%;
float:left;
}

.betygwrap{
width: 48.56559304102504%;
width: 48.61878453038674%;
float:left;
}

.small-logobox{
	max-height: 90px;
}

.row [class*="heart-"]{
clear:both;
width:94px;
height:19px;
display:inline-block;
margin-top:7px;
}

.heart-1{
background: transparent url('./images/h1.gif');
}

.heart-2{
background: transparent url('./images/h2.gif');
}

.heart-3{
background: transparent url('./images/h3.gif');
}

.heart-4{
background: transparent url('./images/h4.gif');
}

.heart-5{
background: transparent url('./images/h5.gif');
}

.betyg-text{
	font-family: "lato";
	font-size:11px;
	font-weight: 700;
	text-transform:uppercase;
	display:inline-block;
	color:#ababab;
	margin-top:7px;
	margin-left:6px;
}

/*
Sidebar
*****************************************************************************/

.sidebox{
	padding:5%;
	margin-bottom:10px;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
}

.sidebox ul{
	color: #555555;
    font-family: "HelveticaNeue-Light","Helvetica Neue Light","Helvetica Neue",Helvetica,Arial,"Lucida Grande",sans-serif;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.3;
    margin: 0 0 16px;
    padding-left: 5%;
}

.gray{
background-color:#e9e9e9;
}

.blue{
background-color:#e3f0fc;
}

.yellow{
background-color:#F9DE58;
}

.green{
background-color:#daf0e6;
}

.long{
min-height:300px;
}

.sidebar-box h3{
font-size:23px;
margin-bottom:5px;
text-transform: none;
}


/*
Topmenu
*****************************************************************************/
.supertop{
position:absolute;
top:0;
left:0;
width:100%;

background-position:bottom; 

line-height:1px;
}

.logo{
position:relative;
left:-20px;
}

div.supertop-text-wrap {
margin-top:140px;
background: none repeat scroll 0 0 #FFFFFF;
margin-top: 140px;
padding-left: 10px;
border-radius: 4px 4px 4px 4px;
}

.maincontent .ingress{
font-family: "lato";
font-size:20px;
font-weight: 300;
line-height:1.1;
}

/* footer */
.papper-footer
{
	padding: 2% 4%;
	width: 92%;
}
.footer-links
{
	color: gray;
	text-align: center;
}
.footer-links a
{
	color: gray;
	font-size: 12px;
	padding: 0 0 2%;
	text-decoration: none;
}
.footer-links a:hover
{
	text-decoration: underline;
}
#footer-list
{
	display: inline-block;
	margin: 0 auto 8px;
}
#footer-list li
{
	float: left;
	list-style-type: none;
	margin-right: 10px;
}
#footer-list li a
{
	float: left;
}


.footer-toplist ul {
	padding-left: 0px;
	list-style: none;
	margin: 3px 0;
}

.footer-toplist ul li {
	color:#ffffff;
	text-decoration: none;
	padding:4px;
}

.footer-toplist li a{
	text-decoration: none;
	color:#ffffff;
	padding:3px 0;
	margin-bottom: 3px;
}

.footer-toplist-round{
	background-color: #FFFFFF;
	border-radius: 20px;
	padding:5px;
	margin-right:7px;
	height:13px;
	width: 13px;
	display:inline-block;
	color: #51a4b5;
	text-align: center;
}

.footer-toplist ul li:hover {
	background-color:#51a4b5;
	border-radius: 10px;	
}

.footer-wrap{
	background-color: #69D2E7;
	min-height: 300px;
	-webkit-box-shadow: inset 1px 1px 100px 0px rgba(0, 0, 0, 0.2);
	box-shadow: inset 1px 1px 100px 0px rgba(0, 0, 0, 0.2);

}

.footer-wrap h3{
	color: #FFFFFF;
	font-size: 30px;
	font-weight: 700;
}

.skinny{
	font-weight: 300;
}

.footer-wrap p{
	color:#FFFFFF;
	margin-bottom: 1px;
}

.footer-arrow{
	margin:0 auto;
	position: relative;
	bottom:-20px;
	width: 0; 
	height: 0; 
	border-left: 20px solid transparent;
	border-right: 20px solid transparent;
	border-top: 20px solid #ffffff;
}

	.footer-wrap .row .box-33, .footer-wrap .row .box-25 {

			margin-top: 20px;
		}


/*
Contact
*****************************************************************************/

.contact-info
{
	float: left;
	margin-bottom: 3%;
	padding: 1%;
	width: 40%;
}
strong
{
	font-weight: bold;
}
.contact-form
{
	float: left;
	padding: 1%;
	width: 40%;
}
.contact-info h2, .contact-form h2
{
	  font-family: "lato";

	font-size: 18px;
	font-style: normal;
	font-weight: 500;
	margin: 0;
	text-transform: uppercase;
}
input, textarea
{
	border: solid 1px #d5d5d5;
	border-radius: 5px;
	box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
	color: #555555;
	font-family: "Helvetica Neue",Arial ,sans-serif;
	font-size: 14px;
	margin-bottom: 5px;
	moz-border-radius: 5px;
	moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
	moz-transition: border linear 0.2s, box-shadow linear 0.2s;
	ms-transition: border linear 0.2s, box-shadow linear 0.2s;
	o-transition: border linear 0.2s, box-shadow linear 0.2s;
	padding: 13px;
	transition: border linear 0.2s, box-shadow linear 0.2s;
	webkit-border-radius: 5px;
	webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
	webkit-transition: border linear 0.2s, box-shadow linear 0.2s;
}
input:focus,
textarea:focus
{
	box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
	moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
	outline: 0;
	webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
}
input[type="file"]:focus,
input[type="radio"]:focus,
input[type="checkbox"]:focus,
select:focus
{
	box-shadow: none;
	moz-box-shadow: none;
	outline: 0;
	outline-offset: -2px;
	webkit-box-shadow: none;
}
textarea
{
	overflow: auto;
	resize: vertical;
}
.inputortextfield
{
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;

	width: 100%;
}
.main-button
{
float:right;
border:0;
padding:10px 15px;
-webkit-box-shadow:  1px 1px 1px 0px rgba(0, 0, 0, 0.5);
box-shadow:  1px 1px 2px rgba(0, 0, 0, 0.75);
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
color:#FFFFFF;
text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.5);
font-family: "lato";
font-weight: 700;
text-transform:uppercase;
white-space:nowrap;
background: #f32a1d; /* Old browsers */
background: -moz-linear-gradient(top,  #f32a1d 0%, #df271b 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f32a1d), color-stop(100%,#df271b)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #f32a1d 0%,#df271b 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #f32a1d 0%,#df271b 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #f32a1d 0%,#df271b 100%); /* IE10+ */
background: linear-gradient(to bottom,  #f32a1d 0%,#df271b 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f32a1d', endColorstr='#df271b',GradientType=0 ); /* IE6-9 */

}


@media screen and (max-width: 900px) {

.knapp-wrap{
		position: static;
		margin:0;

	}

	a.knapp{
		padding:2% 3%;

	}

	a.bonus{
	margin-right:3%;

}



	.row .box-33, .row .box-66, .row .box-25 {
		width: 94%;
		width: 93.94680851063829%;
		margin:0 3% !important;
	}

	.supertop-text-wrap, .supertop{
		margin-left: 3% !important;
			
	}

}

/* Media */
@media screen and (max-width: 500px) {

.big-logo {font-size:50px;}
	
	h1{
		font-size: 40px;
	
	}

	.topplista-wrap h2 {
		font-size: 35px;
	
	}

	.row .box-50 {
		width: 100%;
		width: 99.94680851063829%;
	}

	.container { 
		margin: 0 1%;
	}

	.topplistanummer{
		
		left:15px;
		top:-15px;
		height:10px;
		width:10px;
		
		 line-height:11px;
		 padding:10px;
		font-size:15px;
		
		
	}


	.line {

		margin-bottom:30px;
	}

/*
	#bildwrap{
		background-image: none !important;

		}
*/
		.footer-wrap .row .box-33, .footer-wrap .row .box-25 {

			text-align: left;
		}

	.logo{
		text-align:center;
		position: static;
	}


	#menu-wrap {
    display: none;
	}

	a.knapp{
		padding:4% 6%;

	}

	a.bonus{
	margin-right:3%;

}

.toplist-round {
    background-color: #FFFFFF;
    border-radius: 15px 15px 20px 20px;
    color: #19CF7B;
    display: inline-block;
    height: 15px;
    margin-right: 7px;
    padding: 4px;
    text-align: center;
    width: 15px;
    text-align: center;
    vertical-align: middle;
}