/********************************************************************************************** CSS on Sails Title: Skei Golf Author: XHTMLized (http://www.xhtmlized.com/) Date: May 10th *********************************************************************************************** 1. BASE 1.1 Reset 1.2 Accessibility Navigation & Hide 1.3 Clearfix 1.4 Default Styles 2. LAYOUT 2.1 Structure 2.2 Header 2.3 Navigation 2.4 Content 2.5 Sidebar 2.6 Footer 3. INDIVIDUAL PAGES 2.1 Homepage ***********************************************************************************************/ /* 1. BASE ----------------------------------------------------------------------------------------------- ===============================================================================================*/ /* 1.1 Reset -----------------------------------------------------------------------------------------------*/ html, body, div, span, object, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, samp, small, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; font-size: 100%; vertical-align: baseline; background: transparent; } q { quotes: none; } q:before, q:after { content: ""; content: none; } a, ins, del { text-decoration: none; } table { border-collapse: collapse; } th, td { vertical-align: top; } th { text-align: left; } /* 1.2 Accessibility Navigation & Hide -----------------------------------------------------------------------------------------------*/ ol#accessibility-nav, .hide { position: absolute; top: -999em; left: -999em; height: 1px; width: 1px; } /* 1.3 Clearfix -----------------------------------------------------------------------------------------------*/ .clearfix:after, #wrapper:after, #box-weather dl:after, #content .cols3:after, #content .partners .contents:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } /* 1.4 Default Styles -----------------------------------------------------------------------------------------------*/ body { color: #404040; font-size:62.5%; line-height:1.25em; font-family:Calibri, "Gill Sans", "Gill Sans MT", Frutiger, "Frutiger Linotype", Univers, "Myriad Pro", Myriad, "DejaVu Sans Condensed", "Liberation Sans", "Nimbus Sans L", Tahoma, Geneva, "Helvetica Neue", Helvetica, Arial, sans serif; text-align: center; } hr { display: none; } strong { font-weight: bold; } em { font-style: italic; } del { text-decoration: line-through; } th { font-weight: normal; } address, cite, dfn { font-style: normal; } li { list-style: none; } abbr, acronym { border-bottom: 1px dotted #999; cursor: help; } input, textarea, select { font-family: "Arial", "Helvetica", sans-serif; } a { color: #003263; text-decoration: none; } a:hover { text-decoration:underline; } /* 2. SITE-WIDE LAYOUT ----------------------------------------------------------------------------------------------- ===============================================================================================*/ /* 2.1 Structure -----------------------------------------------------------------------------------------------*/ html, body {height:100%;} #body {min-height:100%;} * html #body {height:100%;} body {background-color:#003263;background-image:url(../images/bg_body.png);background-repeat:repeat-x;background-position:50% 0;} #body {background:url(../images/bg_body-inner.png) 50% 0 repeat-y;} #footer {background:#131415 url(../images/bg_footer.png) 50% 0 no-repeat;} .container {background-color:#fff;} .container { width: 948px; padding:0 12px; position: relative; margin: 0 auto; text-align: left; font-size: 1.2em; } #header {height:135px; margin:0 0 12px 0;} #content { width: 710px; padding: 0 0 0 22px; float: left; } #wrapper {margin:10px 0;} #content #main-content {float:left; width:477px;} #content #secondary-content {float:right;width:193px;} #sidebar { width: 180px; float: right; } #footer { height:22px; padding:5px 14px 0 14px; clear: both; } /* 2.2 Header -----------------------------------------------------------------------------------------------*/ #header .site-name, #header .site-name span { display: block; overflow: hidden; width: 167px; height: 125px; } #header .site-name { position: absolute; top:10px; left:12px; text-align:center; font-size:40px; color:#0a3f88; line-height:50px; } #header .site-name span { background: url(../images/logo.png) no-repeat; position: absolute; top: 0; left: 0; z-index: 10; } #header a.site-name span { cursor: pointer; } #header .branding {position:absolute;top:12px;right:12px;} /* 2.3 Navigation -----------------------------------------------------------------------------------------------*/ #navigation {position:relative;width:948px;height:63px;overflow:hidden;margin:0 0 18px 0;background:url(../images/bg_nav.png) 0 0 no-repeat;} #navigation .menu {height:36px;} #navigation .menu li {float:left;background-image:url(../images/bg_nav-sep.png);background-position:0 50%;background-repeat:no-repeat;} #navigation .menu li.first-child, #navigation .menu li:first-child {background:none;} #navigation .menu li a {float:left;height:36px;padding:0 21px;margin-right:-1px;line-height:36px;color:#fff;background-position:0 0;background-repeat:repeat-x;text-decoration:none;} #navigation .menu li a:hover {} #navigation .clicked a {position:relative;z-index:2;background-image:url(../images/bg_nav-h.png);} .container #navigation ul.menu > li:hover > a {position:relative;z-index:2;background-image:url(../images/bg_nav-h.png);} #navigation .menu li ul {position:absolute;top:36px;left:-999em;height:27px;width:948px;background:#73a33a url(../images/bg_subnav.png) 0 0 no-repeat; } #navigation .menu li ul.empty {background:#fff;} #navigation .menu li.clicked ul {left:0;z-index:1;} #navigation .menu li:hover ul {left:0;z-index:2;} #navigation .menu li.active ul {} #navigation .menu li:hover ul {} #navigation .menu li ul li {float:left;background:none;} #navigation .menu li ul li a {line-height:27px;height:27px;padding-right:20px;margin-right:0;background:none;} #navigation .menu li ul li a:hover {text-decoration:underline;} #navigation .language {position:absolute;top:11px;right:13px;} #navigation .language li {float:left;} #navigation .language li a {float:left;width:20px;height:16px;text-align:left;text-indent:-999em;background-position:50% 50%;background-repeat:no-repeat;} #navigation .language .en a {background-image:url(../images/ico/en.png);} /* Centering dropdown */ body.js #navigation .menu li {} body.js #navigation .menu li .drop {position:absolute;top:36px;left:-999em;width:948px;background:#73a33a url(../images/bg_subnav.png) 0 0 no-repeat;} body.js #navigation .menu li:hover .drop {left:0;} body.js #navigation .menu li.clicked .drop {left:0;} body.js #navigation .menu li.clicked .drop1 {position:relative;float:left;} body.js #navigation .menu li .drop ul {float:left;width:auto;position:relative;top:0;left:0;background:none;} /* 2.4 Content -----------------------------------------------------------------------------------------------*/ /* 2.4.1 Typography _______________________________________________*/ #content h1, #content h2, #content h3, #content h4, #content h5, #content h6 {margin:0 0 15px 0;} #content h1 {margin-bottom:8px;font-size: 1.83em;line-height:1.36em;color:#003263; text-transform:uppercase; font-family: "Franklin Gothic Demi", "Franklin Gothic", "Franklin Gothic Medium","Arial Narrow Bold",Arial,sans-serif; font-weight:normal;} /* 22 / 30 */ #content h2 {margin-bottom:8px;font-size: 1.58em;line-height:1.15em;color:#494949; font-weight:bold; font-family: "Times New Roman", Times, Palatino, "Palatino Linotype", Georgia, serif;} /* 19 / 22 */ #content h3 {font-size: 1.5em;line-height:1.16em;color:#404040;} /* 18 / 21 */ #content h4 {font-size: 1.33em;line-height:1.125em;color:#404040;} /* 16 / 18 */ #content h5 {font-size: 1.25em;line-height:1.2em;color:#404040;} /* 15 / 18 */ #content h6 {font-size: 1.16em;line-height:1.28em;color:#404040;} /* 14 / 18 */ #content p {font-size: 1.16em;line-height:1.28em;margin:0 0 15px 0;line-height:1.5em;} /* 12 / 18 */ #content ul {margin:0 0 15px 0;} #content ul li {background-position:4px 6px;background-image:url(../images/bull.gif);background-repeat:no-repeat;line-height:1.25em;padding:0 0 0 18px;margin:0 0 6px 0;} #content ul.links li {margin-bottom:13px;background-image:url(../images/bull-links.png);background-position:0 5px;margin-left:-3px;padding-left:11px;} #content ol {margin:0 0 15px 0;line-height:1.25em;} #content ol li {line-height:1.1em;padding:0.2em 0 0.2em 0;list-style-type:decimal;list-style-position:outside;margin-left:24px;} #content h2.title {margin:0 0 7px 0;font-size:2em;font-family: Arial, "Helvetica Neue", Helvetica, Verdana, sans-serif; font-weight:normal;line-height:26px;} #content h2.title a {display:block;padding:0 0 0 35px;background:url(../images/ico/latest-news.png) 0 0 no-repeat;color:#003263;} #content a.readmore {display:block;width:53px;height:21px;padding:0 1px 0 10px;line-height:19px;text-align:center;background:url(../images/bg_readmore.png) no-repeat;} #content a.imglink {float:left;padding:6px;border-width:1px;border-style:solid;border-color:#76b5a8;background:#fff;} #content a.imglink img {float:left;} #content a.imglink:hover {border-color:#003263;} /* 2.4.2 Boxes _______________________________________________*/ #content .img {margin:0 0 20px 0;} #content .img .img-bordered {margin:0 0 14px 0;} #content .img p {font-style:italic;margin:-10px 0px 25px 0px;float:left;width:100%;} #content .img-bordered {float:left;position:relative;} #content .img-bordered img {float:left;border:1px solid #7e7e7e;} #secondary-content .box {border:1px solid #efcd4e; background:#FFF url(../images/bg_secondarybox-n.png) 0 0 repeat-x;margin-bottom: 10px;} #secondary-content .box-inner {padding:9px 9px 1px;} #secondary-content #box-related ul.links a {color:#404040;} #secondary-content #box-related ul.links a:hover {color:#003263;} #content .cols3 {margin:0 0 18px 0;} #content .cols3 .col {float:left;width:224px;} body.home #content .cols3 .col {width:239px;} #content .cols3 .col1, #content .cols3 .col4 {margin-right:18px;} #content .cols3 .col3, #content .cols3 .col6 {float:right;} /* 2.5 Sidebar -----------------------------------------------------------------------------------------------*/ #sidebar .box {margin:20px 0 0 0;padding:8px 10px 0 10px;background-image:url(../images/bg_sidebox.png);background-position:0 0;background-repeat:no-repeat;color:#747474;} #sidebar .box h3 {margin:0 0 5px 0;font-size: 1.5em;line-height:1.22em; font-weight:normal;color:#003263;} /* 2.5.1 Login _______________________________________________*/ #box-login {display:none;} /* Clarification required */ /* 2.5.2 Contact _______________________________________________*/ #box-contact .vcard {} #box-contact .vcard .fn {font-weight:bold;} #box-contact .vcard a {color:#747474;font-size:12px;} #box-contact .vcard a:hover {color:#b80606;} #box-contact .map {margin:10px -3px 0;width:166px;} /* 2.5.3 Banestatus _______________________________________________*/ #box-banestatus p {margin:0 0 10px 0;font-weight:bold;} #box-banestatus p strong {display:block;} /* 2.5.4 Weather _______________________________________________*/ #box-weather h3 {float:left; width:100%;} #box-weather div.status {float:left;position:relative;top:-3px;margin-bottom:5px;} #box-weather dl {margin-right:-10px;width:170px;clear:both;font-size: 0.91em;line-height:15px;color:#3d4a2c;} #box-weather dl dt {float:left;clear:left;width:58px;padding-right:2px;margin-right:2px;background:url(../images/bg_dt.png) 100% 6px no-repeat;} #box-weather dl dd {float:left;width:104px;} #box-weather dl dd img {float:left;} #box-weather a.more {display:block;margin:4px 0 0 0;padding:0 0 0 9px;line-height:18px; text-decoration:underline; background:url(../images/bull_side.png) 0 6px no-repeat;} #box-weather a.more:hover {text-decoration:none;} #box-weather div.status img { margin : 0 5px 5px 0;} /* 2.5.5 Activities _______________________________________________*/ #box-activities ul {margin:12px 0 0 0;} #box-activities ul li {font-size: 0.91em;line-height:1.27em;padding:0 0 0 13px;margin:0 0 0 4px; background:#FFF url(../images/bull_side.png) 0 3px no-repeat;} #box-activities ul li a {color:#383838;} #box-activities ul li a:hover {color:#003263;} #box-activities .calendar {margin-left:-10px;margin-right:-10px;margin-top:8px;} .calendar {width:180px;padding:0 0 3px 0; background:#FFF url(../images/bg_calendar-s.png) 0 100% no-repeat;} .calendar-inner {padding:3px 3px 0 3px; background:url(../images/bg_calendar-n.png) 0 0 no-repeat;} .calendar table {width:100%;text-align:center;border-collapse:separate;} .calendar table th {font-weight:bold;text-align:center;color:#222;line-height:22px;} .calendar table td.calCell, .calendar table td.calCellHoliday, .calendar table td.calToday, .calendar table td.calEvent {line-height:15px;vertical-align:middle;} .calendar table td.calCell, .calendar table td.calCellHoliday, .calendar table td.calToday {background-color:#ededed;background-image:url(../images/bg_calendar-cell.png);background-position:0 50%;background-repeat:repeat-x;border:1px solid #d3d3d3;color:#555;} .calendar table td.calToday {font-weight:bold;} .calendar table td.calCellEvent, .calendar table td.calCellEventHoliday {border:1px solid #fcefa1;background-color:#fcfaf1;background-image:url(../images/bg_calendar-cell-active.png);} .calendar table td a {display:block;line-height:15px;color:#363636;} .calendar table td a:hover {color:#b80606;} .calendar .title {width:174px;height:26px;background-image:url(../images/bg_calendar-title.png);background-position:50% 0;background-repeat:no-repeat;background-color:#d7d7d7;color:#222;} .calendar .title .prev {float:left;width:26px;height:26px;background-image:url(../images/bg_calendar-title.png);background-position:0 0;background-repeat:no-repeat;} .calendar .title strong {float:left;width:122px;text-align:center;line-height:26px;} .calendar .title .next {float:right;width:26px;height:26px;background-image:url(../images/bg_calendar-title.png);background-position:100% 0;background-repeat:no-repeat;} .calendar .title .prev a, .calendar .title .next a {display:block;height:26px;width:26px;background-position:50% 50%;background-repeat:no-repeat;text-align:left;text-indent:-999em;} .calendar .title .prev a {background-image:url(../images/ico/prev.png);} .calendar .title .next a {background-image:url(../images/ico/next.png);} /* 2.5.6 Sponsor _______________________________________________*/ #sidebar .box-sponsor {text-align:center;padding:22px 0 0 0;} #sidebar .box-sponsor img {display:block;margin:0 auto;} #sidebar .box-sponsor-big {background:none;padding:0;} /* 2.6 Footer -----------------------------------------------------------------------------------------------*/ #footer {color:#fff;} #footer p {margin:0;font-size: 0.91em;line-height:22px;text-align:right;} #footer a {color:#fff;} /* 3. INDIVIDUAL PAGES ----------------------------------------------------------------------------------------------- ===============================================================================================*/ /* 3.1 Homepage -----------------------------------------------------------------------------------------------*/ body.home #content {padding-left:0;width:754px;} /* Presentation */ #content .presentation {position:relative;padding:12px 12px 0 12px;margin:0 0 18px 0;height:301px;overflow:hidden; background:#ededed url(../images/bg_presentation.png) 0 0 no-repeat;} #content .presentation .contents {float:left;padding:15px 0 0 12px;width:265px;height:252px;overflow:hidden;} #content .presentation .carousel-wrapper {position:relative;float:right;width:438px;height:288px;border:1px solid #8bc4c7;} #content .presentation .carousel-wrapper .jcarousel-control {position:absolute;top:248px;left:50%;} #content .presentation .carousel-wrapper .jcarousel-control .jcarousel-control-inner {position:relative;left:-50%;float:left;padding:0 0 0 10px; background:url(../images/bg_carouselcontrol-w.png) 0 0 no-repeat;width:222px;} #content .presentation .carousel-wrapper .jcarousel-control .jcarousel-control-inner2 {float:left;padding:0 5px 0 0; background:url(../images/bg_carouselcontrol-e.png) 100% 0 no-repeat;} #content .presentation .carousel-wrapper .jcarousel-control a#jcarousel-prev {position:relative;left:-5px;float:left;height:32px;width:31px;margin:0 4px 0 0;text-align:left;text-indent:-999em;background:url(../images/carousel-prev.png) 6px 50% no-repeat;outline:none;} #content .presentation .carousel-wrapper .jcarousel-control a#jcarousel-next {float:left;height:32px;width:31px;text-align:left;text-indent:-999em;background:url(../images/carousel-next.png) 10px 50% no-repeat;outline:none;} #content .presentation .carousel-wrapper .jcarousel-control ul {float:left;margin:0 6px 0 0;} #content .presentation .carousel-wrapper .jcarousel-control ul li {float:left;background:none;padding:0;margin:0;} #content .presentation .carousel-wrapper .jcarousel-control ul li a {float:left;width:17px;padding:0 6px;height:32px;line-height:32px;text-align:center;background-position:50% 50%;background-repeat:no-repeat;background-image:url(../images/carousel-nav.png);color:#fff;outline:none;} #content ul.jcarousel {width:438px;height:288px;} #content ul.jcarousel {margin:0;} #content ul.jcarousel li {width:438px;height:288px;padding:0;margin:0;background:none;} #content ul.jcarousel li img {float:left;} #content .presentation .readmore {position:absolute;left:24px;bottom:17px;} #content .presentation .readmore.right {position:absolute;left:200px;bottom:17px;background: url("../images/bg_readmore_medium.png") no-repeat scroll 0 0 transparent; width:74px;} #content .presentation .contents h2 {margin:0 0 14px;font-size: 1.5em;line-height:1.22em;font-weight:normal; font-family: Arial, "Helvetica Neue", Helvetica, Verdana, sans-serif; color:#003263;} #content .presentation .contents h3 {margin:0 0 14px;font-size: 1.33em;line-height:1.18em;font-weight:normal;color:#007d64;} #content .presentation .contents p {margin:0 0 14px 0;font-size: 1em;line-height:1.25em;color:#404040;} /* Latest News */ #content .latest-news {margin:0 0 28px 0;} #content .latest-news .contents {padding:1px 27px 0 27px;border:1px solid #efcd50;background-image:url(../images/bg_latest-news.png);background-repeat:repeat-x;} body.home #content .latest-news .cols3 {margin:0;padding:16px 0; background:url(../images/bg_latestnews-col.png) 222px 50% no-repeat;} body.home #content .latest-news .cols3 .col {width:191px;} #content .latest-news .cols3 .col1, #content .latest-news .cols3 .col4 {margin-right:62px;} #content .news .imglink {margin:0 0 9px 0;} #content .news .contents {clear:both;padding:0 4px;border:none;height:40px;overflow:hidden;background:none;} #content .news .contents.noImage {height:176px;} #content .news h6 {margin:0 0 12px 0;color:#003263;} #content .news .contents p {margin:0;font-size: 0.91em;line-height:1.18em;color:#000;} #content .news a.readmore {margin-left:3px;} /* Services */ #content .services {margin:0 0 28px 0;} #content .services .service {padding:9px 12px 0;background-image:url(../images/bg_services.png);background-repeat:repeat-x;border-top:2px solid #97d5cd;} #content .services .service h3 {margin:0 0 7px 0;font-weight:normal;color:#003263;} #content .services .service img {float:left;margin:0 8px 12px 0;border:1px solid #5f7d34;} #content .services .service .contents {height:60px;overflow:hidden;} #content .services .service .contents p {margin:0;font-size: 1em;line-height:1.25em;color:#000;} #content .services .service a.more {display:block;font-size: 1em;line-height:1.25em;} /* Partners */ #content .partners .contents {background:url(../images/bg_partners.png) 0 0 repeat-x;padding:10px 21px;} #content .partners .contents ul {margin:0;} #content .partners .contents ul li {background:none;float:left;height:70px;line-height:70px;padding:0 3px;} /* Slideshow */ #bannershow { position:relative; height:122px; width:770px; overflow:hidden; } #bannershow DIV { position:absolute; top:0; left:0; z-index:8; opacity:0.0; height: 122px; background-color: #FFF; } #bannershow DIV.active { z-index:10; opacity:1.0; } #bannershow DIV.last-active { z-index:9; } #bannershow DIV IMG { height: 122px; display: block; border: 0; margin-bottom: 10px; } #bannershow span.description { margin : -50px 0px 0px 10px; position: absolute; color : #fff; font-size : 25px; text-shadow: 1px 1px 3px #000; line-height: 25px; } #bannershow span.descriptionIE { visibility:hidden; } /* Calendar */ #content ul.eventList { margin : 0px; padding : 0px; list-style : none; float : right; width : 100%; } #content ul.eventList li{ padding : 5px 0px !important; margin : 5px 0px !important; border-bottom : 1px dotted #ccc !important; background-image : none !important; } #content ul.eventList li p{ margin : 0px; padding : 0px; } /* Bildegalleri */ #content ul.thumbs { margin : 0px; padding : 0px; list-style: none; } #content ul.thumbs li { float : left; list-style : none; background-image : none; padding : 0px; margin : 0px 2px; } #content ul.thumbs li img { border : 2px solid #fff; cursor : pointer; } #content ul.thumbs li img.selected { border : 2px solid #000; } #content ul.large { margin : 20px 0px 0px 0px; padding : 0px; list-style: none; } #content ul.large li { list-style : none; background-image : none; padding : 0px; margin : 0px; } #content ul.large li span.description { font-size : 1.2em; line-height : 1.5em } /* Nyhetsarkiv */ #content ul.paging { padding : 0px; margin : 20px 0px; list-style : none; } #content ul.paging li{ padding : 0px; margin : 2px; list-style : none; background-image : none; width : 15px; height : 15px; line-height : 15px; text-align : center; border : 1px solid #003263; float : left; } #content ul.paging li a { display : block; } #content ul.paging li.selected { border : 1px solid #fff; background-color : #003263; } #content ul.paging li.selected a { color : #fff; } #content ul.archive { margin : 0px; padding : 0px; list-style : none; } #content ul.archive li { width : 100%; padding : 10px 0px; margin : 0px 0px 0px 0px; border-bottom : 1px dotted #ccc; float : left; background-image : none; } #content ul.archive li div.img { float : left; padding : 3px; border : 1px solid #ccc; margin : 0px 10px 0px 0px; width : 177px; height : 113px; } #content ul.archive li a { font-weight : bold; } .largeCalendar { float : left; width : 45%; padding-right : 5%; } .largeCalendar table.cLarge { width : 100%; font-size : 18px; border-collapse : separate; table-layout : auto; } .largeCalendar table.cLarge th, .largeCalendar table.cLarge td{ height : 30px; line-height : 30px; text-align : center; border : 1px solid #D3D3D3; background : url("../images/bg_calendar-cell.png") bottom left repeat-x #EDEDED; padding : 0px; margin : 0px; } .largeCalendar table.cLarge td a { display : block; } .largeCalendar table.cLarge td.calCellEventHoliday, .largeCalendar table.cLarge td.calCellEvent { height : 30px; line-height : 30px; text-align : center; border : 1px solid #FCEFA1; background : url("../images/bg_calendar-cell-active.png") bottom left repeat-x #FCFAF1; } .largeCalendar table.cLarge td.calToday a { font-weight : bold; } .largeCalendar table.cLarge th.calTop, .largeCalendar table.cLarge th.calTopHoliday, .largeCalendar table.cLarge th.calCellWeekNum, .largeCalendar table.cLarge td.calCellWeekNum { border : 1px dotted #ccc; background : none; } .listCalendar { float:right;width:50%; } .listCalendar h2 { background : url("../images/bg_calendar-cell.png") bottom left repeat-x #EDEDED; height : 30px; line-height : 30px !important; border : 1px solid #d3d3d3; margin : 3px 0px !important; padding : 0px 0px 0px 10px !important; font-size : 18px !important; font-weight : normal !important; font-family : Calibri,"Gill Sans","Gill Sans MT",Frutiger,"Frutiger Linotype",Univers,"Myriad Pro",Myriad,"DejaVu Sans Condensed","Liberation Sans","Nimbus Sans L",Tahoma,Geneva,"Helvetica Neue",Helvetica,Arial,sans serif !important; } .confirm { background-color : #E6EFC2; border : 1px solid #C6D880; padding : 10px; margin-bottom : 20px; } table.contactform { font-size : 14px; } table.contactform td { padding : 2px 5px; border-bottom : 1px dotted #ccc; }