/*--------------------- Google Web Fonts ---------------------*/ /*@import url("http://fonts.googleapis.com/css?family=Trocchi");*/ /*--------------------- General ---------------------*/ A {font-weight:normal; color:#333; text-decoration:underline;} A:hover {text-decoration:none;} h1, h2, h3 {font:14px "cooper-black-std", Arial, Sans-serif; color:#000;} h1 {font-size:34px; padding:0; margin:0 0 10px 0; font-weight:bold;} h2 {font-size:26px; padding:0; margin:25px 0 5px 0;} h3 {font-size:20px; padding:0; margin:25px 0 5px 0;} h4 {padding:0; margin:25px 0 5px 0; font-weight:bold; line-height:1.5;} p {margin:0 0 10px 0;} ::selection {background:#d0e8ff;} ::-moz-selection {background:#d0e8ff;} img, table {border:0;} html {margin:0; padding:0;} body {margin:0 0 20px 0; padding:0; COLOR:#000; font:normal 16px/1.5 'Open Sans', Arial, Verdana, Sans-serif; text-align:center; /*background-color:#999;*/ background:#64982C url(/gfx/bg.jpg) top center no-repeat;} object, iframe {max-width: 100% !important;} .greenLink {background:#6dad27; color:#fff; padding: 10px 15px; border-radius: 10px; text-decoration:none; margin: 10px 0; display:inline-block; } .greenLink:hover { background: #7dc62d; } .no-scroll { overflow: hidden; height: 100%; } .fancybox-img-limit { max-width: 90vw; max-height: 90vh; height: auto; width: auto; display: block; } /*--------------------- Body layout ---------------------*/ #wrapper {width:100%; margin:0 auto; text-align:left;} #head {width:100%; min-height:280px; margin:0; padding:0; } #head .inner {width:1200px; min-height:280px; margin:0 auto; text-align:left; position:relative;} #head #logoDiv {display:block; text-align:center; margin: 30px 0 0 0;} #head #logo {} #head #logo img {height:137px; width:413px; border:0;} #head #flags {position:absolute; right: 0; top: 0;} #head #flags img {width: 48px;} #head #nav {min-height:70px; width:100%; margin:20px 0 0 0; padding:0; overflow:hidden; } #head #nav ul#menu {list-style:none; margin:0; padding:0; width:1200px; min-height:70px; overflow:hidden; float:left; display:block; background: rgba(0, 0, 0, 0.4);} #head #nav ul#menu li {float:left; padding:0px 33.755px; display:inline; overflow:hidden;} #head #nav ul#menu li a {font: 16px "cooper-black-std", Arial, Verdana, Sans-serif; color:#FFF; text-decoration:none; padding:25px 0; margin:0; display:block;} #head #nav ul#menu li a img {margin: 0 0 0 5px;} #head #nav ul#menu li.on, #head #nav ul#menu li:hover {background: #6dad27;} #head #nav ul#menu li a:hover {cursor:pointer; text-decoration:none;} #head #nav ul#menu li a.haschild {display:none;} #head #nav ul#menu li ul {display:block;} #nav ul#menu li .marker {display:inline; z-index: 1001; text-align:center; position:relative; top: 6px;} #nav ul#menu li .subMenuDiv {visibility:hidden; position: absolute; top: 230px; left: 0; background: #6dad27; z-index: 1000; width: 100%; padding: 0px; transition: 0.2s 0.2s; min-height: 50px; overflow:hidden;} #nav ul#menu li .subMenuDiv .inner {width: 1200px; margin: auto; display: block !important; height: auto; padding: 0 0px; box-sizing:border-box; min-height:0; overflow:hidden;} #nav ul#menu li .subMenuDiv ul { padding: 0; z-index: 1000; width: 100%; overflow:hidden;} #nav ul#menu li:hover .subMenuDiv,#nav ul#menu li:hover .subMenuDiv ul {visibility:visible; transition: 0s; z-index: 1001;} #nav ul#menu li.on .subMenuDiv {visibility:visible; transition: 0s;} #nav ul#menu li .subMenuDiv ul li {display: inline; height: auto; float: left; padding: 0 20px 0 0 !important; margin: 0; border:none !important; text-align:center;overflow:hidden;} #nav ul#menu li .subMenuDiv ul li:hover a, #nav ul#menu li .subMenuDiv ul li.on a { background:none !important; color: #f6ff58 !important;} #nav ul#menu li .subMenuDiv ul li a {font-size: 14px !important; height: auto; color:#fff !important; padding: 25px 10px !important; font-weight:bold; font-family: 'Open Sans', Arial, Verdana, Sans-serif !important; } #nav ul#menu li .subMenuDiv ul li:hover a, #nav ul#menu li .subMenuDiv ul li.on a {color: #fff;} #head #responsive-menu-btn {display:none;} .facebookDiv {position:absolute; right: 0; bottom: 120px; width: 340px; background: rgba(0, 0, 0, 0.4); padding: 5px;} .facebookDiv:hover {background: rgba(66, 66, 66, 0.4);} .facebookDiv a {color:#fff; text-decoration:none;} .facebookDiv a:hover {text-decoration:underline;} .facebookDiv img {display:inline-block; float:left; width: 36px;} .facebookDiv span {display:inline-block; float:right; width: 295px; line-height: 1.1em;} /*--------------------- Page layout ---------------------*/ .clearfix:after {content:"."; display:block; height:0; clear:both; visibility:hidden;} * html .clearfix {height: 1%;} #content {width:100%; margin:0; padding:0px 0; } #content .inner {width:1200px; margin:0 auto; padding:30px; min-height:450px; overflow:hidden; background:#fff; box-sizing:border-box;} #content .inner img {max-width: 100% !important; height: auto !important;} /*--------------------- Start page ---------------------*/ #start-slideshow {width:100%; margin:0 auto 0px auto; } #start-content {width:100%; margin:3px auto 0 auto; padding:0;} #start-puffs {width:100%; margin:0; padding:0; overflow:hidden;} #start-puffs .puffitem {width:33.3%; height:100%; margin:0 0.05% 0 0; padding:0; float:left; text-align:left; overflow:hidden; position:relative;} #start-puffs .puffitem.last {margin-right:0;} #start-puffs .puffitem a {display:block; width:100%; height:100%; text-decoration:none;} #start-puffs .puffitem .rub, #start-puffs .puffitem a .rub {transition-duration:0.2s; -webkit-transition-duration:0.2s; width:100%; display:block; margin:0 0 1% 0; padding:0; font-size:26px; color:#fff; text-align:left; font-family: "cooper-black-std", Arial, sans-serif;} #start-puffs .puffitem .image, #start-puffs .puffitem a .image {width:100%;display:block; margin:0; text-align:center; background-color:#fff; overflow:hidden;} #start-puffs .puffitem .image img, #start-puffs .puffitem a .image img {transition-duration:0.2s; -webkit-transition-duration:0.2s; width:100%; display:block; opacity:1.0; filter:alpha(opacity=100);} #start-puffs .puffitem .puffContent, #start-puffs .puffitem a .puffContent {transition-duration:0.2s; -webkit-transition-duration:0.2s; width:100%; background:rgba(0,0,0,.3); position:absolute; bottom: 0; height: 186px; padding: 5% 9%; box-sizing:border-box; /*color:#fff; text-shadow:0 -1px 0 rgba(0,0,0,.3);*/} #start-puffs .puffitem .text p, #start-puffs .puffitem a .text p {transition-duration:0.2s; -webkit-transition-duration:0.2s; /*padding:0; margin:0;*/ line-height:16px; font-size:12px; color:#fff; font-family: 16px; font-family: 'Open Sans', Arial, sans-serif;} #start-puffs .puffitem .link, #start-puffs .puffitem a .link {position:absolute; bottom: 0px; right: 0; background: #a737d6; padding: 10px 15px; color: #fff; font-family: "cooper-black-std", Arial, sans-serif; font-size: 13.5px; text-transform:uppercase;} #start-puffs .puffitem .link, #start-puffs .puffitem:first-child a .link {background: #2c53df;} #start-puffs .puffitem .link, #start-puffs .puffitem:last-child a .link {background: #e4831c;} #start-puffs .puffitem:hover .rub {transition-duration:0.2s; -webkit-transition-duration:0.2s; color:#fff;} #start-puffs .puffitem:hover .text, #start-puffs .puffitem:hover .text p {transition-duration:0.2s; -webkit-transition-duration:0.2s; color:#fff;} #start-puffs .puffitem:hover img, #start-puffs .puffitem a:hover img {transition-duration:0.2s; -webkit-transition-duration:0.2s; opacity:0.8; filter:alpha(opacity=80);} /*--------------------- Third level nav ---------------------*/ .thirdLevelNav {list-style:none; padding: 0; margin: 0 0 10px 0; overflow:hidden;} .thirdLevelNav li {float:left; background:#6DAD27; padding: 5px 7px; border-radius: 5px; margin: 0 10px 10px 0; } .thirdLevelNav li a {color: #fff; text-decoration:none; font: 14px "cooper-black-std", Arial, Verdana, Sans-serif; } .thirdLevelNav li.on, .thirdLevelNav li:hover {background: #8bd738;} .thirdLevelNav li.on a {color: #f6ff58; } /*--------------------- Footer layout ---------------------*/ #footer {width:100%; margin:0 0 20px 0; clear:left; position:relative; font-size:11px; line-height:16px; color:#fff; } #footer .inner {width:1200px; margin:0 auto; box-sizing:border-box; padding:30px 25px ; overflow:hidden;} #footer a {font-weight:normal; color:#fff; text-decoration:none;} #footer a:hover {text-decoration:underline;} #footer .left {float:left; padding:0; margin:0 80px 0 0; text-align:left; } #footer .left.last {margin:0 0px 0 0; } #footer .right {float:right; padding:0; margin:0; text-align:right; } #footer p {margin: 0; font-size: 14px;} @media screen and (max-width: 1200px) { h1 {font-size:24px;} h2 {font-size:18px;} h3 {font-size:14px;} /*body, form {background:none !important;}*/ #wrapper {width:auto; height:auto; margin:0; text-align:left;} #head {width:auto; height:auto; min-height: 0; height:100px; margin:0; padding:0; position:relative;} #head .inner {width:auto; height:auto; min-height: 0; z-index:999;} #head #logoDiv {margin: 0px 0 0 0; padding: 15px 25px 15px 25px;} #head #logo {} #head #logo img {display:block; height:70px; width:auto; border:0;} #head #nav {position:static; top:0; left:0; height:auto; min-height:50px; width:100%; padding:0; margin:0; z-index:9; display:none;} #head #nav ul#menu {display:none;} #head #responsive-menu-btn {position:absolute; right:30px; top:20px; display:block; height:50px; padding:0; z-index:999; color:#fff; font-size:30px; font-weight:bold; text-transform:uppercase; line-height:50px; text-decoration:none; cursor:pointer;} #head #flags {position:absolute; right: 90px; top: 10px;} .facebookDiv {display:none;} #head #nav ul#responsive {display:block; width:100%; height:auto; padding:0; margin:50px 0 7px 0; position:static; z-index:9999;} #head #nav ul#responsive li {display:block; width:100%; height:auto; position:relative; padding:0; margin:0; overflow:hidden;} #head #nav ul#responsive li a {width:92%; height:auto; padding:0.5em 0 0.5em 15px; margin:0; display:block; color:#fff; text-decoration:none; font-size:1.2em;} #head #nav ul#responsive li span {width:8%; float:right; display:block; padding:0; margin:0; text-align:center; font-weight:bold; color:#fff; font-size:1.2em; line-height:2.5em; cursor:pointer;} #head #nav ul.childs {display:none; width:100%; height:auto; padding:0; margin:50px 0 7px 0; position:static; z-index:9999;} #head #nav ul.childs li {display:block; width:100%; height:auto; position:relative; padding:0; margin:0;} #head #nav ul.childs li.back {background:url(/gfx/webbedit/light-arrow-left.png) no-repeat; background-position:1.2em 1.2em; padding-left:15px;} #head #nav ul.childs li a {height:auto; padding:0.5em 0 0.5em 15px; margin:0; display:block; color:#fff; text-decoration:none; font-size:1.2em;} #head #nav ul.childs li span {width:8%; float:right; display:block; padding:0; margin:0; text-align:center; font-weight:bold; background:url(/gfx/webbedit/arrow-right.png) center center no-repeat; color:#fff; font-size:1.2em; line-height:2.5em; cursor:pointer;} #start-slideshow {margin:0; padding:0; width:100%; min-height:0px; overflow:hidden;} #start-content {} #start-puffs {margin:0 0 2% 0;} #start-puffs .puffitem .rub, #start-puffs .puffitem a .rub {font-size:22px; } #start-puffs .puffitem .puffContent, #start-puffs .puffitem a .puffContent {padding: 3%; height: 186px; } #content {width:auto; height:auto; min-height:100px; margin:0; padding:0;} #content .inner {width:auto; height:auto; min-height:100px; padding-bottom:2%;} #footer {width:auto; margin:0; padding:2% 0 0 0; clear:left; position:relative; font-size:11px; line-height:16px;} #footer .inner {width:auto; height:auto;} #footer .left {float:left; padding:0; margin:0 0% 30px 0; width: 33%; text-align:left; } #footer .right {float:none; text-align:center; width: 100%; clear:both; margin: 15px 0 0 0; } table.responsive-table, table.responsive-table thead, table.responsive-table tbody, table.responsive-table th, table.responsive-table td, table.responsive-table tr {display:block; border:0;} table.responsive-table thead tr {position:absolute; top:-9999px; left:-9999px;} table.responsive-table tr {border:1px solid #ccc;} table.responsive-table td {padding:4px 6px;} table.responsive-table td {border:none; border-bottom:1px solid #ddd; position:relative; padding-left:50%; white-space:normal; text-align:left !important;} table.responsive-table td:before {position:absolute; top:6px; left:6px; width:45%; padding-right:10px; white-space:nowrap; text-align:left; font-weight: bold;} table.responsive-table td:before {content:attr(data-title);} } @media screen and (max-width: 850px) { #head #logoDiv {margin: 0px 0 0 0; padding: 15px 5px;} #head #responsive-menu-btn {right:15px;} #content .inner {padding:15px;} #start-puffs .puffitem {text-align:center;} #start-puffs .puffitem .puffContent, #start-puffs .puffitem a .puffContent {height: auto !important; position:relative;background:none; padding: 0; width: 100%;} #start-puffs .puffitem .rub, #start-puffs .puffitem a .rub {font-size:22px; color: #6dad27; padding: 0 5%; box-sizing:border-box;} #start-puffs .puffitem .text p, #start-puffs .puffitem a .text p {color:#6dad27; padding: 0 5%;box-sizing:border-box; text-align:left;} #start-puffs .puffitem:hover .rub {color:#6dad27;} #start-puffs .puffitem:hover .text, #start-puffs .puffitem:hover .text p {color:#6dad27; } #start-puffs .puffitem .link, #start-puffs .puffitem a .link {position:relative; bottom: 0; right: initial; margin: 10px auto 0 auto; display:inline-block; text-align:center;} #footer .inner {padding: 0;} #footer .left {float:none; padding:0; margin:0 0% 15px 0; width: 100%; text-align:center; } } @media screen and (max-width: 600px) { h1 {font-size:20px;} h2 {font-size:16px;} h3 {font-size:14px;} #head #flags {top: 15px;} #head #flags img {width: 48px;} .rightImage {float:none !important; clear:both;} #start-puffs {width:100%;} #start-puffs .puffitem .rub, #start-puffs .puffitem a .rub {font-size:16px; padding:15px 0 0 0;} #start-puffs .puffitem .text p, #start-puffs .puffitem a .text p {line-height:14px; font-size:12px; padding:0;} .thirdLevelNav li a {font-size:12px;} .overlay-search-preloader {width:80px; height:80px; margin-left:-40px; margin-top:-20px;} object, iframe {max-height: 260px !important;} } @media screen and (max-width: 480px) { h1 {font-size:18px;} h2 {font-size:14px;} h3 {font-size:12px;} #start-puffs .puffitem {width: 100%; margin: 0 0 15px 0; } #head #flags {top: 65px; right: 15px;} #head #flags img {width:32px;} } @media screen and (max-width: 360px) { #head #logo {position:relative; top: 5px;} #head #logo img {display:block; height:50px; width:auto; border:0;} } /* Andra tips och trix */ /* Sätter en max-gräns för text och lägger till ... när det behövs */ /*max-width:50px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis;*/