/*--------------------- 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:normal 14px "sofia-pro-soft", Arial, Sans-serif; color:#000;} h1 {font-size:48px; padding:0; margin:0 0 20px 0; font-weight:bold;} h2 {font-size:36px; padding:0; margin:25px 0 5px 0;} h3 {font-size:24px; 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;} table {max-width:100% !important;} .yellow {color:#edcc34;} img, table {border:0;} html {margin:0; padding:0;} body {margin:0; padding:0; COLOR:#656565; font:normal 19px/1.5 "Raleway", Arial, Verdana, "Lucida Sans", "Lucida Grande", Sans-serif; text-align:center; /*background-color:#999;*/ background:#0a0a0a url(/gfx/demo/bg-black.png) top center;} /*--------------------- Body layout ---------------------*/ #wrapper {width:100%; margin:0 auto; text-align:left;} #head {width:100%; height:80px; margin:0; padding:10px 0; background-color:#000;} #head .inner {width:1060px; height:80px; margin:0 auto; text-align:center; position:relative;} #head #logo {} #head #logo img {height:80px; width:auto; border:0;} #head #nav {position:absolute; left:0; bottom:15px; width:960px; margin:0; padding:0; overflow:hidden;} #head #responsive-menu-btn {display:none;} #head #nav ul#menu {list-style:none; margin:0; padding:0; width:960px; overflow:hidden; float:none; text-align:right; display:block;} #head #nav ul#menu li {padding:0 25px 5px 0; display:inline-block; overflow:hidden;} #head #nav ul#menu li a {font:bold 14px "Raleway", Arial, Verdana, Sans-serif; color:#000; text-decoration:none; padding:5px 0 5px 0; margin:0; display:block;} #head #nav ul#menu li:last-child a, #head #nav ul#menu li:nth-last-child(2) a {padding: 5px 10px; border:2px solid#000; border-radius: 50px; position:relative; top:1px;} #head #nav ul#menu li:last-child a:hover, #head #nav ul#menu li:nth-last-child(2) a:hover, #head #nav ul#menu li:last-child.on a, #head #nav ul#menu li:nth-last-child(2).on a {background:#000; color:#edcc34;} #head #nav ul#menu li.on a, #head #nav ul#menu li a:hover {border-bottom: 2px solid #000;} #head #nav ul#menu li a.haschild {display:none;} #head #nav ul#menu li ul {display:none;} #head #nav ul#responsive {display:none;} /*--------------------- Page layout ---------------------*/ .clearfix:after {content:"."; display:block; height:0; clear:both; visibility:hidden;} * html .clearfix {height: 1%;} #content {width:100%; margin:0; padding:0; background-color:#fff;} #content .inner {width:1060px; margin:0 auto; padding:0; overflow:hidden;} #content .inner:first-child {padding:60px 0; min-height:450px;} #content .inner.noheight {min-height:0; padding: 0;} .maincontent {width:100%; margin:0; padding:0; float:none; overflow:hidden;} .subnav {width: 100%; } .subnav .inner {width: 1060px; margin: 0 auto; padding: 0; overflow:hidden;} .subnav ul.menu {list-style:none; overflow:hidden; padding: 0; text-align:center;} .subnav ul.menu li {display:inline-block; margin: 0 20px;} .subnav ul.menu li a {color:#fff; text-decoration:none; font:bold 14px "Raleway", Arial, Verdana, Sans-serif; font-size:16px;} .subnav ul.menu li.on a {color:#edcc34 !important;} .breadcrumbs {} .breadcrumbs a {text-decoration:none; color:#6b6b6b; font:normal 14px "Raleway", Arial, Verdana, Sans-serif;} .breadcrumbs a:last-child {color:#e4bf13;} .topimage img {margin: 0; display:block; width: 100%;} /*--------------------- Start page ---------------------*/ #start-slideshow {width:100%; margin:0 auto; position:relative; } #start-slideshow .start-slideshow-content, #start-slideshow .start-slideshow-content p {display:block; width: 100%; height:100%; position:absolute; top: 0; z-index:2; } #start-slideshow .start-slideshow-content img {vertical-align: middle; max-height:220px; max-width:220px;} #start-slideshow .start-slideshow-content .helper {display: inline-block;height: 20%;vertical-align: middle;} .fotbollsfest {background:#191919; text-align:center; } .fotbollsfest h2 { margin: 0; color: #fff; padding: 30px 0 35px 0; font-size: 38px; text-align: center; text-transform: uppercase; font-weight: bold; } #start-content {width:100%; margin:0px auto 0 auto; padding:0;} #start-puffs {width:100%; margin:0; padding:0; overflow:hidden;} #start-puffs .puffitem {width:50%; height:100%; margin:0 0% 0 0; padding:0; float:left; text-align:left; overflow:hidden; position:relative;} #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; display:inline-block; margin:0; padding: 0 30px 5px 30px; border-radius: 50px; font-size:38px; font-family:"sofia-pro-soft", Arial, sans-serif; border: 2px solid #edcc34; color:#fff; text-align:center; position:absolute; top: 40%; right: 20%; z-index:2;} #start-puffs .puffitem:nth-child(2n) .rub, #start-puffs .puffitem:nth-child(2n) a .rub {right: initial; left: 20%;} #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 .content, #start-puffs .puffitem a .content {transition-duration:0.2s; -webkit-transition-duration:0.2s; width:100%; /*background:rgba(0,0,0,.6); color:#fff; text-shadow:0 -1px 0 rgba(0,0,0,.3);*/} #start-puffs .puffitem .content p, #start-puffs .puffitem a .content p {transition-duration:0.2s; -webkit-transition-duration:0.2s; /*padding:0; margin:0;*/ line-height:16px; font-size:12px; color:#444;} #start-puffs .puffitem:hover .rub {background:#edcc34; } #start-puffs .puffitem:hover .content, #start-puffs .puffitem:hover .content p {transition-duration:0.2s; -webkit-transition-duration:0.2s; color:#222;} #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);} .movie { position: relative; width: 100%; height: 0; padding-bottom: 56.25%; } .movie iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .stats {background:#edcc34; } .stats .statItem {width: 25%; float:left; text-align:center;} .stats .statItem p {font-family: "sofia-pro-soft", Arial, sans-serif; margin: 0 auto 10px auto; line-height:1em;} .stats .statItem .numbers {color:#fff; font-size: 55px; font-weight:bold;} .stats .statItem .text {font-size: 23px; color:#000; width: 75%;} .stats .statBarContainer {border-top: 1px solid #dec038; margin: 40px 0 20px 0; padding: 20px 0;} .stats .statBarContainer p {font-family: "sofia-pro-soft", Arial, sans-serif; font-size: 28px; color:#000; font-weight:bold; margin: 0 0 20px 0;} .stats .statBarContainer .statBar {width: 100%; height: 55px; background:#fff;} .stats .statBarContainer .statBar .blackBar {background:#000; height: 55px;} .start-news {text-align:center; background: #f5f5f5; padding: 10px 0 ; overflow:hidden;} .start-news.puffcontainer {background:none !important;} .start-news .inner {min-height:0 !important; width:1060px; margin:0 auto; padding:0; overflow:hidden;} .start-news h2 {margin-top: 0; padding: 20px 0 0 0;} .start-news .newsItem {width: 31%; overflow:hidden; float:left; margin: 0 3.5% 2% 0;} .start-news.fourcolumn .newsItem {width: 24%; margin: 0 1.33% 2% 0;} .start-news .newsItem:last-child, .start-news .newsItem:nth-child(3n) { margin: 0; } .start-news.fourcolumn .newsItem:nth-child(3n) {margin: 0 1.33% 2% 0;} .start-news.fourcolumn .newsItem:nth-child(4n) { margin: 0 0 2% 0; } .start-news .newsItem .image { width: 100%; position:relative; max-height: 219px; overflow:hidden;} .start-news .newsItem .image a { } .start-news .newsItem .image img {max-width: 100%; max-height: 300px; display:block; margin: auto;} .start-news .newsItem .image.hidden img {display:none;} .start-news .newsItem .content {border-top: 10px solid #22b24c; background:#fff; padding: 0 20px; margin: 0 0 20px 0; } .start-news.fourcolumn .newsItem .content {border-top:none;} .start-news .newsItem .content h3 a {font-size:24px; color: #000; font-weight:bold;} .start-news .newsItem .content a {color:#656565; text-decoration:none; font-size: 16px; } .start-news .newsItem .link {margin: 0 0 15px 0;} .start-news .newsItem .link a {background:#efce34;color:#000; padding: 10px; border-radius: 5px; text-decoration:none; } .start-news .readMoreFacebook {display:inline-block; margin: 30px 0; background: #3557A5; padding: 10px 25px; border-radius: 30px; color:#fff; text-decoration:none; font-weight:bold;} .sponsorsContainer {background: #f5f5f5; padding: 0 0 60px 0;} .sponsorsContainer .inner {min-height:0 !important; width:1060px; margin:0 auto; padding:0; overflow:hidden;} .sponsorsContainer .sponsors {} .sponsorsContainer .sponsors .sponsorItem {float:left; width: 24%; margin: 0 1.3% 0 0; background:#fff; text-align:center; padding: 20px 0;} .sponsorsContainer .sponsors .sponsorItem:nth-child(4n) {margin: 0;} .sponsorsContainer .sponsors .sponsorItem img {max-width:100%;} /*--------------------- Footer layout ---------------------*/ #footer {width:100%; margin:0; padding:40px 0; clear:left; position:relative; font-size:11px; line-height:16px; color:#fff; background: url(/gfx/footerBg.jpg) top center no-repeat;} #footer .inner {width:1060px; margin:0 auto;} #footer a {font-weight:normal; color:#fff; text-decoration:none;} #footer a:hover {text-decoration:underline;} #footer .socialMedia {width: 100%; text-align:center; margin: 0 0 80px 0;} #footer .socialMedia h2 {color:#fff;} #footer .socialMedia a {margin: 0 20px 0px 0; display:inline-block;} #footer .socialMedia a:last-child {margin: 0;} #footer .links {width:100%; text-align:center; border-top: 1px solid #363636; border-bottom: 1px solid #363636; padding: 15px 0 10px 0;} #footer .links ul {list-style:none; margin:0; padding:0; width:100%; overflow:hidden; float:none; text-align:center; display:block;} #footer .links ul li {padding:0 25px 5px 0; display:inline-block; overflow:hidden;} #footer .links ul li a {font:bold 14px "Raleway", Arial, Verdana, Sans-serif; color:#fff; text-decoration:none; padding:5px 0 5px 0; margin:0; display:block;} #footer .links ul li:last-child a, #footer .links ul li:nth-last-child(2) a {padding: 5px 10px; border:2px solid#000; border-radius: 50px; position:relative; top:1px;} #footer .links ul li:last-child a:hover, #footer .links ul li:nth-last-child(2) a:hover, #footer .links ul li:last-child.on a, #footer .links ul li:nth-last-child(2).on a {background:#000; color:#edcc34;} #footer .center p, #footer .center p a {text-align:center; margin: 30px 0 0 0; color:#808080; font-size: 15px; line-height: 22px; } @media screen and (max-width: 1060px) { h1 {font-size:36px;} h2 {font-size:28px;} h3 {font-size:22px; margin: 10px 0 5px 0;} body {font-size:16px;} /*body, form {background:none !important;}*/ #wrapper {width:auto; height:auto; margin:0; text-align:left;} #head {width:auto; height:50px; margin:0;position:relative;} #head .inner {width:auto; height:auto; z-index:999;} #head #logo {} #head #logo img {height:50px; width:auto; border:0;} #overlay-search {width:90%; overflow:auto; overflow-x:hidden; padding:0 5%;} .overlay-search-close {font-size:25px; line-height:25px; top:4%; right:5%; position:absolute;} .overlay-search-title {font:bold 24px/24px Arial, Sans-serif; margin:0 0 1.5% 0;} .overlay-search-tbx, .overlay-search-tbx:focus {font-size:18px; line-height:18px; padding:1% 2%; margin:0 0 1.5% 0; border-width:1px;} .overlay-search-result li p.title {font-size:14px;} .overlay-search-result li p.hits {font-size:10px; padding:0;} .overlay-search-result li a {font-size:12px;} .overlay-search-info, .overlay-search-alert {font:normal 14px/14px Arial, Sans-serif; border-width:1px; padding:2%;} #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:0; top:-3px; display:block; height:50px; padding:0 14px; z-index:999; color:#fff; font-size:30px; font-weight:bold; text-transform:uppercase; line-height:50px; text-decoration:none; cursor:pointer;} #head #search {position:absolute; right:55px; top:0px; display:block; height:20px; padding:15px; z-index:999; color:#fff; font-size:30px; font-weight:bold; text-transform:uppercase; line-height:50px; text-decoration:none;} #head #search img {height:20px; width:20px;} #content {width:auto; height:auto; min-height:100px; margin:0; padding:0;} #content .inner, .sponsorsContainer .inner, .start-news .inner {width:auto; height:auto; min-height:100px; padding:2% 0;} #content .inner:first-child {padding:2% 0; min-height:100px;} .maincontent {width:-moz-calc(100% - 20px)!important; width:-webkit-calc(100% - 20px)!important; width:calc(100% - 20px)!important; height:auto; margin:0; padding:10px; float:left;} .subnav {display:none;} #start-slideshow .start-slideshow-content p {text-align:left;} #start-slideshow .start-slideshow-content img {} .fotbollsfest h2 {font-size: 28px; padding: 20px 0 20px 0; } #start-slideshow {margin:0; padding:0; width:100%; min-height:0px; overflow:hidden;} #start-puffs .puffitem .rub, #start-puffs .puffitem a .rub {font-size:28px; } .startpageheader {font-size: 36px;} .stats .statItem .numbers {font-size: 45px; } .stats .statItem .text {font-size: 18px; width: 75%;} .stats .statBarContainer {border-top: 1px solid #dec038; margin: 40px 0 20px 0; padding: 20px 2%;} .stats .statBarContainer p {font-family: "sofia-pro-soft", Arial, sans-serif; font-size: 28px; color:#000; font-weight:bold; margin: 0 0 20px 0;} .stats .statBarContainer .statBar {width: 100%; height: 55px; background:#fff;} .stats .statBarContainer .statBar .blackBar {width: 86.3%; background:#000; height: 55px;} .start-news {padding: 0 2%;} .start-news .newsItem .content a {font-size: 14px; } .start-news .newsItem .content {border-top: 10px solid #22b24c; background:#fff; height:auto; padding: 0 20px 0px 20px; overflow:hidden;} #footer {width:auto; margin:0; padding:2% 0 4% 0; clear:left; position:relative; font-size:11px; line-height:16px;} #footer .inner {width:auto; height:auto;} #footer .socialMedia {width: 406px; text-align:center; margin: 0 auto 20px auto;} #footer .socialMedia a {margin: 0 20px 0 0;} #footer .socialMedia a:nth-child(2n+1) {margin: 0 0px 0px 0; } #footer .center {padding: 0 2%;} 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: 600px) { h1 {font-size:26px;} h2 {font-size:23px;} h3 {font-size:18px;} body {font-size:14px;} #start-puffs .puffitem {width:100%; height:100%; margin:0 0% 0 0; float:none;} .start-news .newsItem:nth-child(3n) {margin: 0 0 2% 0;} .start-news.fourcolumn .newsItem:nth-child(3n), .start-news.fourcolumn .newsItem:nth-child(4n) { margin: 0 0 2% 0; } .start-news.fourcolumn .newsItem { width: 100%; margin: 0 0% 2% 0; } #start-puffs .puffitem .rub, #start-puffs .puffitem a .rub {right: initial; left: 50%; margin-left:-25%; position:absolute; font-size:22px;} #start-puffs .puffitem:nth-child(2n) .rub, #start-puffs .puffitem:nth-child(2n) a .rub {right: initial; left: 50%; margin-left: -25%;} .stats .statItem {width: 50%; float:left; text-align:center;} .stats .statBarContainer p {font-size: 20px;} } @media screen and (max-width: 480px) { .fotbollsfest h2 {font-size: 24px; padding: 20px 0 20px 0; } #start-puffs .puffitem .rub, #start-puffs .puffitem a .rub {right: initial; left: 50%; margin-left:-30%; position:absolute; font-size:22px;} #start-puffs .puffitem:nth-child(2n) .rub, #start-puffs .puffitem:nth-child(2n) a .rub {right: initial; left: 50%; margin-left: -30%;} .startpageheader {font-size: 28px;} .start-news .newsItem {width: 100%; overflow:hidden; float:none; margin: 0 0 3.5% 0;} .sponsorsContainer .sponsors .sponsorItem {float:left; width: 50%; margin: 0; background:#fff; text-align:center; padding: 20px 0;} #footer .center p, #footer .center p a {text-align:center; margin: 30px 0 0 0; color:#808080; font-size: 12px; line-height: 22px; } } @media screen and (max-width: 380px) { #footer .socialMedia {width: 100%; } #footer .socialMedia a {margin: 0 0px 20px 0; display:block;} #footer .socialMedia a:nth-child(2n+1) {margin: 0 0px 20px 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;*/