/* includes social buttons and Font awesome */
@import url('../css/font-awesome.css');
@import url('../css/docs.css');
@import url('../css/bootstrap-social.css');

body {padding-top: 70px;}
h2, .h2, h3 {font-size: 22px;}
.jumbotron h1{font-size:45px;}
h3.cleared {clear: both;padding-top: 20px;}
a {color: #0a65b3;}

.avslutad {font-size:18px;color:red;font-weight:bold;}

.formembers {
font-size: 10px;
padding-left: 0px;
font-style: italic;
border-top: 1px solid grey;
display: block;
width: 128px;
color: #555;
text-align: center;
float: right;
position: relative;
right: 88px;
}

/* Navbar styling */
.navbar-default {background-color:#333333;}
.navbar-default .navbar-nav>li>a {color: #fff;}
.navbar-default .navbar-nav>li>a:hover {color: #fff; background-color:#428bca;}
.navbar-default .navbar-nav>.active>a, .navbar-default .navbar-nav>.active>a:hover, .navbar-default .navbar-nav>.active>a:focus {
color: #fff;
background-color: #428bca;
}
.navbar-default .navbar-nav>.open>a, .navbar-default .navbar-nav>.open>a:hover, .navbar-default .navbar-nav>.open>a:focus {
color: #fff;
background-color: #428bca;
}
.nav>li>a {padding: 15px 10px;}
.navbar-brand {
display:block;
height:47px;
width:245px;
background:url(../../imgs/toplogo_tulevoittajaksi.png) no-repeat center center;
text-indent:-9999em;
}
.navbar-fixed-top {z-index:1;}
.btn-success {color: #000; background-color: #eee; border-color: #ccc;}
.btn-checked {color: #fff; background-color: #5cb85c; border-color: #4cae4c;}

.nav-tabs>li.active>a, .nav-tabs>li.active>a:hover, .nav-tabs>li.active>a:focus {
color: #fff;
background-color: #333333;
border: 1px solid #4a4a4a;
border-bottom-color: transparent;
cursor: default;
}
.nav-tabs {border-bottom: 2px solid #333333;}
.nav-tabs>li>a:hover {background-color: #4a4a4a; border-bottom:0px; color:#fff;}
.navbar-right {margin-right:5px !important;}

/* Search form */
.container-search {
	display: block;
	width: 1px;
	height: 1px;
	float: right;
	position: relative;
	top: 20px;
	left: 30px;
}
.search-form {float: right;	position: relative;	top: -65px;}

.screen-reader-text {clip: rect(1px, 1px, 1px, 1px); position: absolute !important;}
.search-field {
    background-color: transparent;
    background-image: url("/imgs/search-icon.png");
    background-position: 5px center;
    background-repeat: no-repeat;
    background-size: 24px 24px;
    border: medium none;
    cursor: pointer;
    height: 37px;
    margin: 3px 0;
    padding: 0 0 0 34px;
    position: relative;
    transition: width 400ms ease 0s, background 400ms ease 0s;
    width: 0;
}
.search-field:focus {
    background-color: #fff;
	color:#ccc;
    border: 2px solid #c3c0ab;
    cursor: text;
    outline: 0 none;
    width: 230px;
}

/* breadcrumbs */
#breadcrumbs {
    width: 100%;
    margin: 0 auto;
    clear: both;
    padding: 0;
    font-size: 12px;
    max-width: 1170px;
}
#breadcrumbs ol {padding-left:0;}
#breadcrumbs ol li {display:inline-block; list-style-type:none; text-transform: capitalize; float:none;
padding:0 2px; }
#breadcrumbs a:link, #breadcrumbs a:visited {color:#03C !important; text-decoration:underline !important;}

/* grid column styling */
.jumbotron {padding-top:15px !important; padding-bottom:5px !important; margin-bottom:15px;}

.blue {
background-color: #0a77d4;
color: #fff;
}

.red {
background-color: #B20000;
color: #fff;
}
.blue a, .blue a:hover, .red a, .red a:hover{color:#fff;}
.red a {text-decoration:underline;}
.regbox p {font-size:16px;}
.latest ul{padding-left: 15px;}
.row {border-bottom: 1px solid #e5e5e5; padding:15px 0;}
.push h2, .morepush h2{font-size: 18px; font-weight: bold; min-height: 36px;}
.push img{width:100%; max-width:250px; border-radius: 3px; -moz-border-radius:3px; -webkit-border-radius:3px;}
.push p{max-width:250px;}
.morepush {clear:both; min-height: 135px;}

.pushlist img {float: left; border-radius: 50%; margin-right: 15px;}
.pushlist h2 {clear:right;}

.pushbreaker img {float: left; border-radius: 50%; margin-right: 15px;}
.pushbreaker h2 {font-size: 18px; font-weight: bold; margin-top: 0px;}

.page-header {margin-top:0px; border-bottom:0;}
.page-header p{font-size: 18px; line-height:22px;}
.page-header a{text-decoration:underline;}

.article h3 {font-size:18px; line-height:20px;}
.article h4 {font-size:16px; line-height:18px;}

.adunit {text-align:center;}
.offers ul li {display:inline-block;}
.offers ul li:first-child:before {content: '';}
.offers ul li:before{ content: '|'; margin: 0 0.5em;}

/* single comp styling */
.compfacts, .member, .gocomp, .socialshare {margin-top:25px;}
.single-comp {margin-bottom:25px;}
.single-comp h1 {margin-top: 20px;}

/* mixed comp list styling */
.mixed-complist p a{font-weight:bold;text-decoration:underline;}
.mixed-complist h3{background-color: #3c3c3c; line-height: 45px; padding-left: 25px; color: #fff; font-size:20px; border-radius:3px; -moz-border-radius:3px; -webkit-border-radius:3px;}


/* table styling */
.hot h3{font-size:14px; font-weight:bold; margin:5px 0; color:#006cc7;}
.toggles{float:right; text-align:right;}
.complist h4{font-size:16px; margin: 0 0 5px 0;}
.eighteen img {width: 20px; height: auto;}
.eighteen {font-size:10px;}
.eighteen a:link {color:blue; text-decoration:underline;}

/* footer styling */
.meta {background-color: #4a4a4a; color:#fff; border-bottom: 1px solid #666; padding: 15px 0;}
.meta a{color:#fff;}
.meta h4 {font-size:18px; font-weight:bold; border-bottom:1px solid #ccc; padding-bottom: 6px;}
.meta ul {list-style-type: none; padding: 0px; margin: 0px;}
.meta img {vertical-align:baseline;}
.more li {background-image: url('/imgs/mer_ikon_arrow.png'); background-repeat: no-repeat; background-position: 0px 5px; padding-left: 14px;}

.copy {background-color: #333333; color:#fff; min-height:45px; text-align:center; vertical-align:middle; padding:10px 0;}
.copy a{color:#fff; font-size:10px;}
.socials {margin-top:35px;}

/* jquery modal styling
-------------------------------------------*/
.ui-widget-header {background:#333; color:#fff;}
.ui-dialog .ui-dialog-titlebar-close::before{content: "X"; color:#000; font-size: 16px;}
.ui-dialog{width:400px !important;}

/* Sticky footer styles
-------------------------------------------------- */
html {position: relative; min-height: 100%;}
body {margin-bottom: 60px;}
.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 60px;
  background-color: #f5f5f5;
}


/* buttons */
.btn-primary {
color: #000 !important;
background-color: #fff;
border-color: #ccc;
}
.btn{margin-bottom:3px;}
.btn-primary:hover {background-color: #f9f9f9;}
.btn-default:hover, .btn-default:focus, .btn-default:active, .btn-default:active, .open > .dropdown-toggle.btn-default {background-color:#5cb85c; color:#fff;}
.vote-filled {color:#fdd122;}
.vote-empty {color:#a9a9a9;}

.styled-button {
    display: inline-block;
    padding: 10px 20px;
    background-color: #f8f8f8;
    border: 2px solid #007bff;
    border-radius: 12px;
    text-align: center;
    transition: all 0.3s ease;
}
.styled-button:hover {background-color: #e0e0e0;border-color: #0056b3;}
.styled-button img {display: block;max-width: 100%;height: auto;}

/************
GUIDE-CARDS
*************/
.guide-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 2rem 0;
}
.guide-grid a {text-decoration:none !important;}
.guide-card {
  display: flex;
  flex-direction: column;
  width: calc(25% - 10px);
  background: #fff;
  border: 1px solid #e0dcd7;
  border-radius: 8px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.05);
  color: inherit;
  overflow: hidden;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
  cursor: pointer;
}
.guide-card:hover {
  box-shadow: 0 4px 8px rgba(0,0,0,0.08);
  transform: translateY(-2px);
}
.guide-image {
  width: 100%;
  height: 160px;
  background-size: cover;
  background-position: center;
  border-bottom: 1px solid #e0dcd7;
}
.guide-content {
  padding: 1rem;
}
.guide-content h3 {
  font-size: 16px;
    color: #000;
    margin: 0 0 0.5rem 0;
    background-color: unset;
    padding: 0;
    line-height: 20px;
    font-weight: bold;
}
.guide-content p {
  margin: 0;
}

@media screen and (max-width: 768px) {
  .guide-card {
    width: calc(100% - 10px);
  }
}




/******** media queries mods ********/

/* text styling */
@media (max-width:767px){
.push h2 {min-height: 54px;font-size:17px;}
.offers ul {clear:both;}
.offers ul li {display:block; list-style-type: none;}
.offers ul li:before{ content: ''; margin: 0 0.5em;}
.ui-dialog{width:100% !important;}
.pushlist img {max-width:100px;}
.navbar-default .navbar-nav .open .dropdown-menu>li>a {color: #fff !important; background-color: transparent;}
.navigation {padding-right:0px;}
.jumbotron {padding:0px;}
.jumbotron h1{font-size:30px;}
.container-search {display:none;}
.navbar-toggle {margin-right:23px;}
.navbar-nav {margin:0px;}
.meta li{margin:10px;}
}
@media (max-width: 992px) {
.navigation {padding-right:0px; padding-left:0px;}
.navbar-right {margin-right:20px !important;}
.container-search {left:10px;}
}
@media (max-width:545px){
	.stats, .latest, .offers {font-size:16px;}
	.stats ul li, .latest ul li , .offers ul li, .more ul li{padding:6px;}
	.textpush {margin-bottom:10px;}
}