@charset "utf-8";
@import url("styles/styles.css");
@import url("styles/fancybox.css");
/* Hämtar Google Fonts - hämta egna fonter på https://www.google.com/fonts */
@import url("https://fonts.googleapis.com/css?family=Raleway");
@import url('https://fonts.googleapis.com/css?family=Roboto:300');
/* --------------------------------------------------------------------------------- */
/* EXTRA! CSS-kod som används i vissa sidor */
/* --------------------------------------------------------------------------------- */
/* Startsidan */
#startkolumn_1 {
float: left;
width: 68%;
margin: 0;
padding: 0;
/* border: 1px solid rgba(0,0,0,0.05);*/
}
#startkolumn_2 {
float: right;
width: 30%;
margin: 0;
padding: 0;
/* border: 1px solid rgba(0,0,0,0.05);*/
}
/* NYHETSBOX startsida */
#news_box_intro {
width: 95%;
height: auto;
/*border: 1px solid rgba(220,220,220,1);*/
border: 1px solid rgba(255,192,0,1);
padding: 10px 2% 10px 2%;
float: left;
clear: both;
margin: 5px 0 5px 0px;
border-radius: 10px;
background-color: rgba(250,250,250,1);
}
/* CAPTION - bilder med bildtext */
figure.image {
border: none;
background: #fff;
}
/* --------------------------------------------------------------------------------- */
/* TECKENSNITT, TEXTSTORLEK och TEXTFÄRG */
body, td, p {
font-family: 'Roboto', sans-serif;
font-size: 16px;
color: rgba(0,0,0,1);
}
/* Textinnehåll i stycken */
p {
margin: 0 0 10px 0;
padding: 0 3px 0 0;
line-height: 25px;
/* border: 1px solid #ccc;*/
}
body {
padding: 0;
margin: 0;
/* BAKGRUNDSFÄRG */
/* background: rgba(210,210,210,1); */
background: rgba(255,255,255,1);
/* BAKGRUNDSBILD - byt bakgrundsbild genom att ta bort kommentarstecknen */
/* background-image: url(bilder/tulips.jpg); */
/* background-image: url(bilder/model-face.jpg); */
/* background-image: url(bilder/ferrari.jpg); */
/* background-image: url(bilder/blue_swirl.jpg); */
/* background-image: url(bilder/grassheaven.jpg); */
/* background-image: url(bilder/dog-clothed.jpg); */
/* background-image: url(bilder/businessman.jpg);*/
/* background-image: url(bilder/ballerina.jpg); */
/* background-image: url(bilder/baloonfield.jpg); */
background-image: url(bilder/kingfisher.jpg);
/* background-image: url(bilder/man-woman.jpg); */
/* background-image: url(bilder/carfield.jpg); */
/* background-image: url(bilder/blue-swirl-banner.jpg); */
/* background-image: url(bilder/hong-kong.jpg); */
/* background-image: url(bilder/leopard.jpg); */
/* background-image: url(bilder/purple-budda.jpg); */
/* background-image: url(bilder/sea-shells.jpg); */
/* background-image: url(bilder/chess.jpg); */
/* background-image: url(bilder/woman.jpg); */
/* background-image: url(bilder/slice-of-lemon.jpg); */
/* background-image: url(bilder/drip.jpg); */
/* background-image: url(bilder/maldives.jpg); */
/* background-image: url(bilder/grassfield-header.jpg); */
/* background-image: url(bilder/art-1.jpg); */
/* background-image: url(bilder/blue_swirl.jpg); */
/* background-image: url(bilder/flowers-2.png); */
/* background-image: url(bilder/mechanic.jpg); */
/* background-image: url(bilder/relaxing.jpg); */
/* background-image: url(bilder/rosemary.jpg); */
/* background-image: url(bilder/yellow-tulip.jpg); */
/* background-image: url(bilder/desert.jpg); */
background-size: 100%;
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center 0px;
/* background-position: center -100px;*/
}
/* LÄNKAR - grundegenskaper där inget annat format angivits */
a { color: #006699; }
/* RUBRIKER */
h1, h2, h3 {
font-family: 'Roboto', sans-serif;
color: rgba(0,0,0,1);
}
h1 {
font-size: 28px;
letter-spacing: 1px;
/* font-weight: normal;*/
padding: 0 0 5px 0;
margin: 0;
}
h2 {
font-size: 22px;
letter-spacing: 1px;
/* font-weight: normal;*/
padding: 10px 0 0 0;
margin: 0;
}
h3 {
font-size: 16px;
letter-spacing: 1px;
/* font-weight: normal;*/
padding: 10px 0 0 0;
margin: 0;
}
/* --------------------------------------------------------------------------------- */
/* SIDHUVUD
/* --------------------------------------------------------------------------------- */
/* Box som innehåller sidhuvudet och den horisontella huvudmenyn */
#sidhuvud_box {
width: 90%;
margin: 70px auto 0 auto;
padding: 0;
/* overflow: hidden; */
border-radius: 0;
box-shadow: none;
border-bottom: none;
border-top: none;
/* background-image: url(bilder/bakgrund.jpg); */
/* background-repeat: repeat-x; */
/* background-attachment: fixed; */
/* background-position: 0 0; */
}
/* Maximal storlek på bilder i sidhuvudet */
#sidhuvud_box img {
max-width: 100%;
height: auto;
}
/* Box med innehållet i sidan "sidhuvud.php" */
#sidhuvud {
float: left;
width: 100%;
height: 170px;
margin: 0;
padding: 0;
overflow: hidden;
/* background-color: rgba(255,255,255,1); */
/* border: 1px solid #ccc; */
}
/* Box för rubrik eller logotype i sidhuvudet */
#sidhuvud_rubrik {
position: absolute;
z-index: 100;
float: left;
width: 58%;
margin: 0 0 0 0;
padding: 0;
/* border: 1px solid #ccc;*/
}
/* Rubrik i sidhuvudet */
#sidhuvud h1 {
font-size: 30px;
padding: 0 2% 5px 5%;
margin: 0 0 0 0;
color: rgba(90,90,90, 1);
}
/* --------------------------------------------------------------------------------- */
/* Box som innehåller GOOGLE TRANSLATE */
/* --------------------------------------------------------------------------------- */
#google_translate_box {
float: right;
width: 120px;
margin: 10px 0 0 0;
padding: 0;
/* border: 1px solid #ccc; */
}
/* --------------------------------------------------------------------------------- */
/* SÖKFUNKTION */
/* --------------------------------------------------------------------------------- */
#sokruta_sidhuvud {
float: right;
text-align: right;
width: 22%;
margin: 0 10px 0 0;
padding: 0;
/* border: 1px solid #ccc; */
}
/* jQuery för sökfält i sökfunktion */
.q {
padding: 0;
margin: 0;
}
/* CSS för sökfält i sökfunktion */
.search_text {
font-size: 18px;
color: rgba(0,0,0,1);
width: 70%;
padding: 5px;
}
/* Sökfält i resultatsidan */
.search_text_resultat {
font-size: 20px;
width: 300px;
padding: 5px;
margin: 0;
}
/* jQuery-class för sökfält (med förvald text) */
.search_text_focus {color: rgba(153,153,153,1);}
.search_text_default {color: rgba(0,0,0,1);}
/* --------------------------------------------------------------------------------- */
/* SIDLAYOUT */
/* --------------------------------------------------------------------------------- */
/* CENTRERINGSBOX - för centrerade layouter */
#centerbox {
width: 90%;
margin: 0 auto 0 auto;
padding: 0;
border-radius: 0;
border: none;
box-shadow: none;
border-top: none;
border-bottom: none;
}
/* Maximal storlek för bilder */
#centerbox img {
max-width: 100%;
height: auto;
}
/* KOLUMNBOX - box med menybox och sidinnehållsbox */
#kolumncontainer {
width: 100%;
margin: 0;
padding: 0 0 30px 0;
float: left;
background-color: rgba(255,255,255,1);
/* border: 1px solid rgba(240,240,240,1);*/
/* border-top: none;*/
border-radius: 5px 5px 0 0;
/* box-shadow: 1px 1px 10px rgba(0,0,0, 0.20);*/
}
/* KOLUMN MENY - menybox som innehåller huvudmeny */
#kolumn_menu {
float: left;
width: 19%;
margin: 0;
padding: 0 1% 0 0;
background-color: rgba(255,255,255, 0.5);
border-right: 1px dotted rgba(204,204,204,1);
/* border: 1px solid #ccc;*/
}
/* KOLUMN INNEHÅLL - sidinnehållsbox för sidornas innehåll */
#kolumn_content {
float: left;
/* BREDD på box med sidornas innehåll */
width: 75%; /* Ange ett högre värde här om du inte använder "Huvudmeny 1" vertikal listmeny */
min-height: 450px;
margin: 0;
padding: 10px 2% 5px 2%;
/* border: 1px solid #ccc;*/
}
/* EXTRA - KOLUMN INNEHÅLL - sidinnehållsbox för sidornas innehåll */
/* Används när den VERTIKALA MENYN INTE visas, som tex på STARTSIDAN */
#kolumn_content_utan_meny {
float: left;
width: 96%;
min-height: 450px;
margin: 0;
padding: 10px 2% 10px 2%;
/* border: 1px solid #CCC;*/
}
/* KOLUMN INNEHÅLL - LISTOR */
#kolumn_content li {
padding: 0 0 10px 0;
line-height: 18px;
}
#kolumn_content ul ol {
padding: 0 0 0 20px;
}
/* SIDFOT - box som innehåller sidfoten */
#sidfot {
clear: both;
width: 96%;
height: 200px;
margin: 0 auto 600px auto;
padding: 5px 2% 5px 2%;
font-size: 14px;
border-radius: 0 0 10px 10px;
background-color: rgba(240,240,240,0.8);
}
/* SIDFOT INNEHÅLL - extra boxar som kan användas för innehåll i sidfoten */
#sidfot_box1 {
margin: 0;
padding: 10px 40px 10px 10px;
float: left;
width: auto;
}
#sidfot_box2 {
margin: 0;
padding: 10px 40px 10px 10px;
float: left;
width: auto;
}
#sidfot_box3 {
margin: 0;
padding: 50px 10px 10px 10px;
float: right;
width: auto;
}
/* Länkar i sidfoten */
#sidfot a {
color: rgba(0,0,0,1);;
text-decoration: none;
}
#sidfot a:hover {
color: rgba(90,90,90,1);
}
/* Länk till inloggning av WDS CMS */
#sidfot .wds_cms a {
font-size: 14px;
color: rgba(180,180,180,1);;
text-decoration: none;
}
/* --------------------------------------------------------------------------------- */
/* MENY 1 - HORISONTELL HUVUDMENY Dropdownmeny */
/* --------------------------------------------------------------------------------- */
/* VANLIG MENY - döljer alla element som har "dropdown" som inledande attribut */
.toggle, [id^=dropdown] {
display: none;
}
.notoggle, [id^=dropdown] {
display: none;
}
/* MOBIL MENY - döljer alla element som har "dropdown" som inledande attribut */
.toggle_top, [id^=dropdown] {
display: none;
}
/* HUVUDMENY - box */
nav {
position: fixed; /* Visar menyn hela tiden */
top: 0px; /* Menyns position */
left: 0; /* Menyns position */
right: 0; /* Menyns position */
z-index: 9999; /* Positionerar boxen överst */
float: left;
width: 98%;
margin: 0 0 30px 0;
padding: 0 0 0 2%;
background-image: linear-gradient(to bottom, rgba(90,90,90,0.9), rgba(10,10,10,0.9));
background-repeat: repeat-x;
border-radius: 5px;
box-shadow: 3px 3px 10px rgba(0,0,0, 0.20);
border: 1px solid rgba(90,90,90, 0.4);
}
/* Anger att menyboxen ska visas som en Tabell */
nav:after {
content: "";
display: table;
clear: both;
}
/* HUVUDMENY - länkar text */
nav a {
color: rgba(255,255,255,1);
display: block;
padding: 0 10px;
font-size: 20px;
line-height: 60px;
text-decoration: none;
font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
}
nav a:hover {
background-image: none;
background-color: rgba(90,90,90,1);
cursor: pointer;
}
nav ul {
width: 100%;
margin: 0 auto 0 auto;
padding: 0;
list-style: none;
position: relative;
}
/* HUVUDMENY - menyval */
nav ul li {
margin: 0;
display: inline-block;
float: left;
text-align: left;
border-right: 1px solid rgba(0,0,0, 0.1);
}
nav ul li:last-child {
border-right: none;
}
nav ul ul li:last-child {
border-right: 1px solid rgba(255,255,255, 0.3);
}
/* UNDERMENY 1 */
nav ul ul {
display: none;
position: absolute;
top: 60px;
}
/* UNDERMENY 1 - menyval */
nav ul ul li {
/* BREDD (samma värde ska anges i "nav ul ul ul li" värdet "left" nedan) */
width: 250px;
float: none;
display: list-item;
position: relative;
padding: 10px 0 10px 0;
/* border: 1px solid rgba(0,0,0, 0.1);*/
border: 1px solid rgba(255,255,255, 0.3);
border-top: none;
/* background-color: rgba(240,240,240,1);*/
background-image: linear-gradient(to bottom, rgba(90,90,90,0.9), rgba(10,10,10,0.9));
background-repeat: repeat-x;
}
/* UNDERMENY 1 - länkar text */
nav ul ul li a {
font-size: 20px;
line-height: 30px;
}
/* UNDERMENY 1 - hover-läge */
nav ul li ul li:hover {
background-image: none;
background-color: rgba(90,90,90,1);
}
/* UNDERMENY 2 - menyval */
nav ul ul ul li {
position: relative;
top: -60px;
left: 250px;
}
/* VISAR dropdown-menyer i hover-läget */
nav ul li:hover > ul {
display: inherit;
}
/*###########################################*/
/* DÖLJER ALLA DROPDOWNMENYER.
Välj display: none; om du INTE vill använda dropdownmeny */
nav ul li:hover > ul {
/* display: none; */
}
/*###########################################*/
/* --------------------------------------------------------------------------------- */
/* MENY 2 - HORISONTELL UNDERMENY som visas på varje sida */
/* --------------------------------------------------------------------------------- */
/* Menybox */
#meny_top_sub {
clear: both;
padding: 0;
margin: 0 0 15px 0;
font-size: 20px;
font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
}
/* Menylistan, avstånd mellan menyraderna (vid visning i flera rader) */
#meny_top_sub li {
display: inline-block;
padding: 10px 15px 10px 15px;
margin: 5px 10px 1px 0;
background: none;
box-shadow: none;
background-color: rgba(240,240,240,1);
background-image: linear-gradient(to bottom, rgba(90,90,90,0.9), rgba(10,10,10,0.9));
background-repeat: repeat-x;
border: 1px solid rgba(0,0,0, 0.1);
border-radius: 5px;
/* box-shadow: 2px 2px 10px rgba(0,0,0, 0.10);*/
}
#meny_top_sub a {
/* Anger att menyvalen inte får brytas. OBS! Gäller hela menyraden och inte enstaka menyval */
/* white-space: nowrap;*/
}
/* Färg på menytext */
#meny_top_sub a:link, #meny_top_sub a:visited {
color: rgba(255,255,255, 1);
text-decoration: none;
}
#meny_top_sub li:hover {
background-image: none;
background-color: rgba(90,90,90,1);
}
/* Menybox RESPONSIV MENY - används endast i "@media only" screen nedan */
#meny_top_sub_container {
/* border: 1px solid #ccc;*/
}
/* Döljer RESPONSIV MENY */
#meny_top_sub_responsive_container {
display: none;
}
/* --------------------------------------------------------------------------------- */
/* MENY 3 - VERTIKAL HUVUDMENY med undermeny i flera nivåer */
/* --------------------------------------------------------------------------------- */
/* MENY NIVÅ 1 */
/* Menybox */
#meny {
margin: 0 0 0 0;
padding: 10px 0 0 10px;
font-size: 16px;
/* border: 1px solid #ccc;*/
/* background: rgba(248,244,149,1);*/
border-radius: 5px;
}
/* Undermeny
*/
#meny ul {
margin: 0 0 0 15px;
padding: 0 0 0 0;
list-style-type: none;
/* Lodrät linje före undermenyer */
border-left: 1px solid rgba(160,160,160,1);
}
/* Listelement - */
#meny li {
list-style-type: none;
border: none;
padding: 0;
margin: 5px 0 0 0;
/* Inre skugga och yttre skugga */
box-shadow: none;
}
/* Menyval */
#meny a {
text-decoration: none;
padding: 5px 5px 5px 17px;
margin: 0;
border-radius: 5px;
border: 1px solid rgba(0,0,0, 0.1);
background: rgba(255,255,255,1);
display: block;
margin: 0;
}
#meny a:link, #meny a:visited {
color: rgba(0,0,0,1);
}
#meny a:hover {
cursor: pointer;
background: rgba(0,0,0,0.05);
}
/* ROLLOVER Symbol eller innehåll EFTER menyval */
#meny a:hover:after {
content: "";
}
/* Menyval för AKTUELL SIDA */
#meny a#current {
font-weight: bold;
background-color: rgba(235,235,235,1);
background-image: linear-gradient(to bottom, rgba(255,255,255, 0.90), rgba(235,235,235, 0.90));
background-repeat: repeat-x;
border-radius: 5px;
color: rgba(0,0,0,1);
padding: 5px 5px 5px 17px;
}
/* MENY NIVÅ 2, 3, 4, 5 osv (expanderande undermeny) */
/* Listelement
- */
#meny_sub2 li {
border: none;
padding: 0;
margin: 0;
}
/* Menyval */
#meny_sub2 a {
padding: 5px 0 5px 15px;
margin: 3px 0 5px 0;
/* Vågrät linje före menyval */
background-image: url(bilder/menutree_line.gif);
background-repeat: no-repeat;
background-position: 0 14px;
border: none;
/* background-color: rgba(194,191,115,1);*/
border-radius: 5px;
/* Inre skugga och yttre skugga */
box-shadow: none;
}
#meny_sub2 a:link, #meny_sub2 a:visited {
color: rgba(0,0,0,1);
text-decoration: none;
}
/* Menyval för AKTUELL SIDA */
#meny_sub2 a#current {
font-weight: bold;
/* Vågrät linje före menyval */
background-image: url(bilder/menutree_line.gif);
background-repeat: no-repeat;
background-position: 0 14px;
}
#meny_sub2 a:hover {
cursor: pointer;
background: rgba(0,0,0,0.05);
/* Vågrät linje före menyval */
background-image: url(bilder/menutree_line.gif);
background-repeat: no-repeat;
background-position: 0 14px;
}
#meny_sub3 a { }
/* --------------------------------------------------------------------------------- */
/* SÖKVÄG MED LÄNKAR - Visar sökväg till den aktuella sidan med länkade sidnamn */
/* --------------------------------------------------------------------------------- */
#path_meny {
float: left;
width: 96%;
margin: 0;
padding: 3px 2% 3px 2%;
font-size: 18px;
text-align: left;
color: rgba(0,0,0,1);
font-weight: bold;
background-color: rgba(245,245,245, 0.5);
border-radius: 5px 5px 0 0;
}
/* LÄNKAR i sökvägen */
#path_meny a:link, #path_meny a:visited, #path_meny a:active {
color: #006699;
text-decoration: none;
font-weight: normal;
}
#path_meny a:hover {
text-decoration: underline;
}
/* Utskriftsbild */
#path_meny_print_icon {
margin: 0;
padding: 0 10px 0 0;
border: none;
}
/* Menybox RESPONSIV MENY - används endast i "@media only screen" */
#path_meny_container {
/* border: 1px solid #ccc;*/
/* display: none;*/
}
/* Döljer RESPONSIV MENY */
#path_meny_responsive_container {
display: none;
}
/* --------------------------------------------------------------------------------- */
/* MENYTRÄD - SITEMAP */
/* --------------------------------------------------------------------------------- */
#sitemap {
margin: 10px 0 0 0;
padding: 10px 10px 10px 5px;
background: rgba(255,255,255,1);
}
#sitemap ul {
margin: 5px 0 5px 20px;
padding: 0 0 0 0;
list-style-type: none;
/* Lodrät linje före lista */
border-left: 1px solid rgba(160,160,160,1);
}
#sitemap li {
margin: 0;
padding: 0 0 0 15px;
letter-spacing: 1px;
font-weight: bold;
/* Vågrät linje före menyval */
background-image: url(../admin/bilder/menutree_line.gif);
background-repeat: no-repeat;
background-position: 0 8px;
list-style-type: none;
}
#sitemap a { text-decoration: none; }
#sitemap a:link, #sitemap a:visited {
color: rgba(0,0,0,1);
}
#sitemap a:hover { text-decoration: underline; }
/* --------------------------------------------------------------------------------- */
/* KONTAKTFORMULÄR */
/* --------------------------------------------------------------------------------- */
#layout_kontaktformular {
font-size: 16px;
width: 80%;
float: left;
margin: 0;
padding: 20px 2% 15px 2%;
border-radius: 8px;
background-color: rgba(248,248,248,1);
border: 1px solid rgba(0,0,0,0.1);
}
/* Ärende */
.kontakt_arende {
font-size: 16px;
font-weight: bold;
padding: 10px 2% 10px 2%;
margin: 0 0 5px 0;
border: 1px solid rgba(226,226,226,1);
border-radius: 5px;
}
/* Förnamn */
.kontakt_fnamn {
font-size: 16px;
width: 80%;
padding: 10px 2% 10px 2%;
margin: 0 0 5px 0;
border: 1px solid rgba(226,226,226,1);
border-radius: 5px;
}
/* Efternamn */
.kontakt_enamn {
font-size: 16px;
width: 80%;
padding: 10px 2% 10px 2%;
margin: 0 0 5px 0;
border: 1px solid rgba(226,226,226,1);
border-radius: 5px;
}
/* E-postadress */
.kontakt_email {
font-size: 16px;
width: 80%;
padding: 10px 2% 10px 2%;
margin: 0 0 5px 0;
border: 1px solid rgba(226,226,226,1);
border-radius: 5px;
}
/* Meddelande */
.kontakt_meddelande {
font-family:"Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, sans-serif;
font-size: 16px;
width: 90%;
height: 300px;
padding: 10px 2% 10px 2%;
margin: 0 0 5px 0;
border: 1px solid rgba(226,226,226,1);
border-radius: 5px;
}
/* Bekräftelse på skickat meddelande */
.kontakt_meddelande_confirmation {
font-size: 16px;
width: 90%;
height: 500px;
padding: 10px 2% 10px 2%;
margin: 0 0 5px 0;
border: 1px solid rgba(226,226,226,1);
border-radius: 5px;
}
/* CAPTCHA-kod */
.capcha_text {
font-size: 16px;
width: 200px;
padding: 10px 2% 10px 2%;
margin: 0 0 5px 0;
border: 1px solid rgba(226,226,226,1);
border-radius: 5px;
}
/* Kantlinje runt CAPTCHA-kod */
.capcha_kantlinje {
width: 200px;
border: 1px solid rgba(0,185,0,1);
margin: 0 0 5px 0;
border-radius: 5px;
}
.skicka_knapp {
margin: 5px 0 0 0;
padding: 3px 5px 3px 5px;
font-size: 20px;
font-weight: normal;
}
/* ------------------------------------ */
/* FELMEDDELANDE formmail_captcha.php */
.error_formfield {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 16px;
width: 80%;
padding: 10px 2% 10px 2%;
margin: 0 0 5px 0;
border: 1px solid rgba(255,0,0,1);
border-radius: 5px;
}
.error_textfield {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 16px;
width: 90%;
height: 300px;
padding: 10px 2% 10px 2%;
margin: 0 0 5px 0;
border: 1px solid rgba(255,0,0,1);
border-radius: 5px;
}
.error_captcha {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 16px;
width: 200px;
padding: 10px 2% 10px 2%;
margin: 0 0 5px 0;
border: 1px solid rgba(255,0,0,1);
border-radius: 5px;
}
.error_text {
font-weight: bold;
color: rgba(255,0,0,1);
border-radius: 5px;
}
/* Felmeddelande */
#error {
padding: 10px 10px 10px 10px;
border: 1px solid rgba(255,0,0,1);
border-radius: 10px;
width: 80%;
min-height: 50px;
margin: 10px 0 5px 0;
}
/* ------------------------------------ */
/* --------------------------------------------------------------------------------- */
/* LOGINFORMULÄR "medlem/medlem_login.php" */
/* --------------------------------------------------------------------------------- */
/* Box med skugga */
#layout_login_border {
width: 600px;
float: left;
clear: both;
margin: 30px 0 0 20px;
padding: 3px;
border-radius: 10px;
box-shadow: 0px 0px 4px rgba(153,153,153,1);
background-color: rgba(255,255,255,1);
}
/* Box med bakgrundsfärg 1 */
#layout_login {
font-size: 16px;
width: 555px;
float: left;
margin: 0;
padding: 0 20px 5px 25px;
border-radius: 8px;
background-color: rgba(248,248,248,1);
}
/* Box med bakgrundsfärg 2 */
#layout_login_form {
width: 450px;
float: left;
margin: 0;
padding: 20px;
border-radius: 10px;
/* border: 1px solid #66CC66; */
background: rgba(204,255,102,1);
}
/* Box med informationstexten under formuläret */
#layout_login_info {
width: 500px;
float: left;
margin: 0;
padding: 0;
/* border: 1px solid #ccc; */
}
/* Formulärfält */
.login_user {
width: 400px;
font-size: 16px;
padding: 5px;
border: 1px solid rgba(204,204,204,1);
}
.login_pass {
width: 400px;
font-size: 16px;
padding: 5px;
border: 1px solid rgba(204,204,204,1);
}
.login_fnamn {
width: 400px;
font-size: 16px;
padding: 5px;
border: 1px solid rgba(204,204,204,1);
}
.login_enamn {
width: 400px;
font-size: 16px;
padding: 5px;
border: 1px solid rgba(204,204,204,1);
}
/* ################################################################################# */
/* ################################################################################# */
/* ################################################################################# */
/* --------------------------------------------------------------------------------- */
/* MOBILTELEFON och SMARTPHONE (portrait/stående)
/* --------------------------------------------------------------------------------- */
/*@media only screen and (max-width: 480px){*/
@media only screen and (max-width: 768px){
/* --------------------------------------------------------------------------------- */
/* EXTRA! CSS-kod som används i vissa sidor */
/* --------------------------------------------------------------------------------- */
/* Startsidan */
#startkolumn_1 {
float: left;
width: 100%;
margin: 0;
padding: 0;
/* border: 1px solid rgba(0,0,0,0.05);*/
}
#startkolumn_2 {
float: right;
width: 100%;
margin: 0;
padding: 0;
/* border: 1px solid rgba(0,0,0,0.05);*/
}
/* NYHETSBOX startsida */
#news_box_intro {
width: 85%;
height: auto;
border: 1px solid #cccccc;
padding: 10px;
float: left;
clear: both;
margin: 5px 0 5px 0px;
border-radius: 10px;
background-color: #fff;
}
/* --------------------------------------------------------------------------------- */
body, td, p {
padding: 0;
margin: 0;
font-size: 16px;
background-size: 120%;
background-position: center 0;
}
/* KOLUMN MENY - döljer box som innehåller huvudmeny */
#kolumn_menu {
display: none;
}
/* DIV som ska DÖLJAS vid visning */
#hide_on_smartphone {
display: none;
}
/* BILDER - maximal storlek på bilder */
#kolumn_content img, #kolumn_content_utan_meny img{
max-width: 95%;
height: auto;
}
#sidhuvud img {
max-width: 95%;
height: auto;
}
/* DIV - maximal storlek på boxar */
#kolumn_content div {
max-width: 95%;
}
/* --------------------------------------------------------------------------------- */
/* SIDHUVUD
/* --------------------------------------------------------------------------------- */
/* Box som innehåller sidhuvudet och den horisontella huvudmenyn */
#sidhuvud_box {
overflow: hidden;
width: 95%;
margin: 10px auto 10px auto;
padding: 0;
background-position: 0 0;
background-size: 120%;
}
/* Box med innehållet i "sidhuvud.php" */
#sidhuvud {
width: 100%;
height: 180px;
padding: 10px 5px 5px 10px;
margin: 0;
}
/* Box för rubrik eller logotype i sidhuvudet */
#sidhuvud_rubrik {
position: relative;
width: 95%;
height: 100px;
margin: 0;
padding: 0;
}
/* Rubrik i sidhuvudet */
#sidhuvud h1 {
width: 100%;
font-size: 25px;
text-align: center;
margin: 0;
padding: 0;
}
/* Box som innehåller GOOGLE TRANSLATE */
#google_translate_box {
float: left;
width: 110px;
margin: 10px 5px 5px 0;
padding: 0;
}
/* --------------------------------------------------------------------------------- */
/* SÖKFUNKTION */
/* --------------------------------------------------------------------------------- */
#sokruta_sidhuvud {
float: left;
text-align: left;
width: 95%;
margin: 0 0 0 0;
padding: 0;
}
/* Sökfält i sökfunktion */
.search_text {
font-size: 20px;
width: 70%;
padding: 5px;
margin: 0;
}
/* Sökfält i resultatsidan */
.search_text_resultat {
font-size: 20px;
width: auto;
padding: 5px;
margin: 0;
}
/* --------------------------------------------------------------------------------- */
/* SIDLAYOUT */
/* --------------------------------------------------------------------------------- */
/* CENTRERINGSBOX - för centrerade layouter */
#centerbox {
overflow: hidden;
clear: both;
width: 95%;
padding: 0;
margin: 0 auto 0 auto;
/* border: 1px solid #cc0;*/
}
/* KOLUMNBOX - box med meny och innehåll */
#kolumncontainer {
width: 99%;
margin: 0;
padding: 0 0 30px 0;
}
/* KOLUMN INNEHÅLL - box för sidornas innehåll */
#kolumn_content {
width: 95%;
padding: 5px 1% 5px 2%;
margin: 0;
}
/* SIDFOT - box som innehåller sidfoten */
#sidfot {
width: 100%;
height: 400px;
margin: 0;
padding: 0;
}
/* SIDFOT INNEHÅLL - boxar som kan användas i sidfoten */
#sidfot div {
width: 95%;
}
/* --------------------------------------------------------------------------------- */
/* MENY 1 - HORISONTELL HUVUDMENY Dropdownmeny */
/* --------------------------------------------------------------------------------- */
/* MENY - box */
nav {
position: relative; /* Anges för att menyn INTE ska vara fixerad */
width: 99%;
margin: 0 auto 0 auto;
padding: 0;
border-radius: 10px 10px 0 0;
background-image: none;
box-shadow: none;
}
/* MOBIL MENY BUTTON - knappen som visas i startläget */
.toggle_top {
display: block;
padding: 20px 0 20px 80px;
margin: 0 auto 0 auto;
background-color: rgba(0,0,0,1);
background-image: url(/wds_cms/css/bilder/responsive_nav_icon_white.png);
background-repeat: no-repeat;
background-size: 40px 30px;
background-position: 15px center;
color: rgba(255,255,255, 1);
font-size: 28px;
text-decoration: none;
/* border: 1px solid rgba(210,210,210,1);*/
border-radius: 10px 10px 0 0;
/* box-shadow: 3px 3px 10px rgba(0,0,0, 0.20);*/
}
/* Teckensnitt Menyval */
.toggle_top, .toggle {
font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
}
/* Döljer menyval i startläget */
.toggle + a, .menu {
display: none;
}
/* HUVUDMENY - alla menyval som har UNDERMENY */
.toggle {
display: block;
padding: 0 0 0 10px;
color: rgba(255,255,255, 1);
font-size: 24px;
line-height: 60px;
text-decoration: none;
border: none;
}
/* HUVUDMENY */
nav ul ul {
float: none;
position: static;
}
/* HUVUDMENY - menyval */
nav ul li {
margin: 2px 0 2px 0;
display: block;
width: 100%;
/* background-color: rgba(240,240,240,1);*/
background-image: linear-gradient(to bottom, rgba(90,90,90,0.9), rgba(10,10,10,0.9));
border-bottom: 1px solid rgba(0,0,0, 0.1);
}
/* HUVUDMENY - länkar text */
nav a,
nav ul li a,
nav ul li ul li a,
nav ul li ul li ul li a {
font-size: 24px;
}
/* HUVUDMENY - hover-läge */
nav a:hover,
nav li a:hover,
nav ul li a:hover,
nav ul ul li a:hover,
nav ul ul ul li a:hover,
nav ul ul ul ul li a:hover {
background-color: rgba(190,190,190,1);
}
/* Visar symbol efter menyval
Unicode används - se fler symboler här:
http://en.wikipedia.org/wiki/Miscellaneous_Symbols
http://nealchester.com/special-characters
https://dev.w3.org/html5/html-author/charref */
.toggle:after {
/* content: "\00A0\00A0\0002B"; */
content: "\00A0\00A0\0003E"; /* "00A0" är hårt blanksteg ( ) */
color: rgba(0,0,0, 0.3);
font-weight: bold;
/* font-size: 14px; */
}
/* Visar alla element som har "dropdown" som inledande attribut och där checkbox är vald */
[id^=dropdown]:checked + ul {
display: block;
}
/* UNDERMENY 1 */
nav ul ul li {
margin: 0;
padding: 0;
display: block;
width: 100%;
border: none;
border-top: 1px solid rgba(0,0,0, 0.1);
}
/* UNDERMENY 1 - menyval */
nav ul ul .toggle,
nav ul ul a {
padding: 0 0 0 20px;
background-color: rgba(255,255,255,1);
color: rgba(0,0,0,1);
}
/* UNDERMENY 1 - länkar text */
nav ul ul li a {
font-size: 20px;
line-height: 50px;
}
/* UNDERMENY 2 */
nav ul ul ul li {
position: static;
width: 100%;
border-bottom: none;
}
/* UNDERMENY 2 - menyval */
nav ul ul ul .toggle,
nav ul ul ul a {
padding: 0 0 0 40px;
background-color: rgba(240,240,240,1);
border-bottom: none;
}
/* UNDERMENY 3 */
nav ul ul ul ul li {
position: static;
width: 100%;
}
/* UNDERMENY 3 - menyval */
nav ul ul ul ul .toggle,
nav ul ul ul ul a {
padding: 0 0 0 60px;
background-color: rgba(255,255,255,1);
}
/* UNDERMENY 4 */
nav ul ul ul ul ul li {
position: static;
width: 100%;
}
/* UNDERMENY 4 - menyval */
nav ul ul ul ul ul .toggle,
nav ul ul ul ul ul a {
padding: 0 0 0 80px;
background-color: rgba(240,240,240,1);
}
/* UNDERMENY 5 */
nav ul ul ul ul ul ul li {
position: static;
width: 100%;
}
/* UNDERMENY 5 - menyval */
nav ul ul ul ul ul ul .toggle,
nav ul ul ul ul ul ul a {
padding: 0 0 0 100px;
background-color: rgba(255,255,255,1);
}
/* UNDERMENY 6 */
nav ul ul ul ul ul ul ul li {
position: static;
width: 100%;
}
/* UNDERMENY 6 - menyval */
nav ul ul ul ul ul ul ul .toggle,
nav ul ul ul ul ul ul ul a {
padding: 0 0 0 110px;
background-color: rgba(240,240,240,1);
}
/* Döljer undermenyer i hover-läge i Smartphone */
nav ul li:hover > ul,
nav ul ul li:hover > ul,
nav ul ul ul li:hover > ul,
nav ul ul ul ul li:hover > ul {
display: none;
}
/* --------------------------------------------------------------------------------- */
/* MENY 2 - HORISONTELL UNDERMENY som visas på varje sida */
/* --------------------------------------------------------------------------------- */
/* DÖLJER Menybox som visas i normalt visningsläge */
#meny_top_sub_container {
display: none;
}
/* VISAR Menybox som visas på smartphone */
#meny_top_sub_responsive_container {
display: block;
}
/* Menybox */
#meny_top_sub {
clear: both;
width: auto;
padding: 0 0 5px 5px;
margin: 0 0 5px 0;
font-size: 22px;
border: 1px solid rgba(0,0,0,0.1);
border-radius: 0 0 10px 10px;
background-color: rgba(250,250,250,1);;
}
#meny_top_sub li {
/* border: 1px solid rgba(0,0,0,0.30);*/
}
/* --------------------------------------------------------------------------------- */
/* SÖKVÄG MED LÄNKAR - Visar sökväg till den aktuella sidan med länkade sidnamn */
/* --------------------------------------------------------------------------------- */
/* DÖLJER Menybox som visas i normalt visningsläge */
#path_meny_container {
display: none;
}
/* VISAR Menybox som visas på smartphone */
#path_meny_responsive_container {
display: block;
}
#path_meny {
float: left;
width: 96%;
margin: 0 0 0 0;
padding: 5px 2% 5px 2%;
background-color: rgba(255,255,255,1);
color: rgba(0,0,0, 0.4);
border-radius: 0px;
font-size: 22px;
font-weight: bold;
text-align: left;
}
/* LÄNKAR i sökvägen */
#path_meny a:link, #path_meny a:visited, #path_meny a:active {
font-weight: bold;
}
#path_meny a:hover {
text-decoration: underline;
}
/* --------------------------------------------------------------------------------- */
/* KONTAKTFORMULÄR */
/* --------------------------------------------------------------------------------- */
/* Yttre Box runt formuläret */
#layout_kontaktformular_border {
width: 95%;
margin: 0;
padding: 0;
}
/* Inre Box runt formuläret - med innehållet */
#layout_kontaktformular {
font-size: 18px;
width: 95%;
margin: 0;
padding: 10px;
}
/* Ärende */
.kontakt_arende {
width: 95%;
}
/* Förnamn */
.kontakt_fnamn {
width: 95%;
}
/* Efternamn */
.kontakt_enamn {
width: 95%;
}
/* E-postadress */
.kontakt_email {
width: 95%;
}
/* Meddelande */
.kontakt_meddelande {
width: 95%;
}
/* Bekräftelse på skickat meddelande */
.kontakt_meddelande_confirmation {
width: 95%;
}
/* CAPTCHA-kod */
.capcha_text {
width: 70%;
}
/* Kantlinje runt CAPTCHA-kod */
.capcha_kantlinje {
width: 70%;
}
.skicka_knapp {
font-size: 20px;
}
/* --------------------------------------------------------------------------------- */
/* LOGINFORMULÄR "medlem/medlem_login.php" */
/* --------------------------------------------------------------------------------- */
/* Box med skugga */
#layout_login_border {
width: 300px;
margin: 10px 0 0 0;
padding: 3px;
}
/* Box med bakgrundsfärg 1 */
#layout_login {
width: 100%;
margin: 0;
padding: 0 5px 5px 5px;
}
/* Box med bakgrundsfärg 2 */
#layout_login_form {
width: 100%;
margin: 0;
padding: 10px;
}
#layout_login_info {
width: 100%;
}
/* Formulärfält */
.login_user {
width: 95%;
}
.login_pass {
width: 95%;
}
.login_fnamn {
width: 95%;
}
.login_enamn {
width: 95%;
}
}
@media only screen and (min-width : 768px) and (max-width: 1280px){
#sidhuvud_box {
width: 90%;
margin: 130px auto 0 auto;
padding: 0;
}
body {
padding: 0;
margin: 0 0 0 0;
background-size: 120%;
background-position: center 70px;
}
}