/* css for Lino Trading AS, Porsgrunn
©Helge Hansen og ©Gita S. Norheim 2007

versjon 070614 med blå/svart menytekst

Farger:

#294193 - mørk blå, logo-fargen
#A9B3D4 - lys variant av logo

#E0E0E0 - lys grå
#C0C0C0 - grå til tabell-linjer

mørke farger:

#089d3b - suter - grønn
#04a27b - reginox
#08a1af - schock
#1590d7 - system ceram
#2979c9 - alveus
#4d4baf - lino
#8e41aa - villeroy
#c23f7e - gsi
#d63553 - marmorin
#ef3732 - crolla
#ed6712 - newform - orange

lyse farger (evt. litt lysere):

#9cd8b1 - suter - grønn
#9be1db - reginox
#a2e4ed - schock
#ade0fe - system ceram
#add1f5 - alveus
#b8b7df - lino
#d5b7e0 - villeroy
#e7b2cb - gsi
#fab1bf - marmorin
#f9afad - crolla
#f8c2a0 - newform - orange

side-navn:

side-ingen
side-suter
side-reginox
side-schock
side-ceram
side-alveus
side-lino
side-villeroy
side-gsi
side-marmorin
side-crolla
side-newform

*/

/* nullstiller: */

html, body, div, span, h1, h2, h3, h4, h5, h6, p, a, img, strong, sub, sup, dl, dt, dd, ol, ul, li, table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border-width: 0;
}

ol, ul {
	list-style: none;
}

/* tabeller skal allikevel ha 'cellspacing="0"' i html: */

table {
	border-collapse: separate;
}

caption, th, td {
	text-align: left;
	font-weight: normal;
}

/* generelt: */

html {
	background: #F7F7F7 url("bilder/striper.gif"); /* stripete bakgrunn */
}

body {
	margin: 0 auto; /* auto på begge sider midtstiller hele */
	font-size: 10px; /* 10px tekststørrelse, lettere å beregne for etterfølgende */
	width: 86em; /* tilsvarer 860px;  bredden på hele siden */
	line-height: 150%; /* litt ekstra linjehøyde (normal er 120%) */
	font-family: Geneva, Arial, Helvetica, sans-serif; /* generell font */
	border: 1px solid #E0E0E0; /* lysegrå kanter ... */
	border-width: 0 1px; /* ... men bare på sidene */
	margin-bottom: 10px;  /* litt ekstra luft under hele blokken */
}

h1, h2, h3, h4, h5, h6 {
	font-family: Geneva, Arial, Helvetica, sans-serif; /* egen font på overskrifter */
	margin-bottom: 10px; /* avstand under */
	line-height: 150%;
}

/* omdefinerer størrelser på overskrifter: */
h1 { font-size: 1.7em; }
h2 { font-size: 1.4em; }
h3 { font-size: 1.2em; }
h4 { font-size: 1em; }
h5 { font-size: 0.8em; }
h6 { font-size: 0.6em; }

p {
	margin-bottom: 1em; /* avstand under */
}

a {
	text-decoration: none;
	color: #294193;
	border-bottom: 1px dotted #294193;
}

a:hover {
	border-bottom: 1px solid red;
	color: red;
}

a img {
	border-width: 0;
}

hr { /* skillelinje */
	border: 1px dashed #294193;
	margin: 1em 10px 2em;
}

/* ekstra uthevet boks, hele og halve bredden: */

.uthevet, .uthevet-smal {
	background: #F7F7F7;
	border: 1px solid #294193; /* standard-border, se også nedenfor */
	margin-bottom: 10px;
}

.uthevet h2, .uthevet-smal h2 {
	padding: 5px 0 5px 10px;
	background: #294193; /* mørk blå bak */
	color: white; /* hvit tekst */
	font-size: 1.2em; /* omdefinerer størrelsen til det samme som h3 */
	line-height: 80%; /* dette gir bedre høyde på blå linje */
}

.uthevet h3, .uthevet-smal h3 {
	padding: 5px 0 5px 10px;
	color: #294193; /* denne har blå tekst på hvit bakgrunn */
}

.uthevet p, .uthevet-smal p {
	margin: 10px;
}

.uthevet img, .uthevet-smal img {
	margin: 0 10px 10px 10px;
}

.uthevet-smal { /* halve bredden, flyttet til høyre side */
	width: 50%;
	float: right;
}

/* ekstra border-stiler for bokser: */

.dotted-border { border-style: dotted; }
.double-border { border-style: double; border-width: 3px; }

/* bakgrunnsbilde på toppen: */

#side-ingen { background: white url("bilder/Lino-header-o.jpg") no-repeat top right; }
#side-suter { background: white url("bilder/Lino-header-suter07.jpg") no-repeat top right; }
#side-reginox { background: white url("bilder/Lino-header-Reginox07.jpg") no-repeat top right; }
#side-schock { background: white url("bilder/Lino-header-schock07.jpg") no-repeat top right; }
#side-ceram { background: white url("bilder/Lino-header-system-ceram07.jpg") no-repeat top right; }
#side-alveus { background: white url("bilder/Lino-header-alveus07.jpg") no-repeat top right; }
#side-lino { background: white url("bilder/Lino-header-lino07.jpg") no-repeat top right; }
#side-villeroy { background: white url("bilder/Lino-header-Reginox07.jpg") no-repeat top right; }
#side-gsi { background: white url("bilder/Lino-header-gsi07.jpg") no-repeat top right; }
#side-marmorin { background: white url("bilder/Lino-header-marmorin07.jpg") no-repeat top right; }
#side-crolla { background: white url("bilder/Lino-header-crolla07.jpg") no-repeat top right; }
#side-newform { background: white url("bilder/Lino-header-newform07.jpg") no-repeat top right; }

/* header: */

#header {
	padding: 0;
	margin: 0;
}

#header img { /* logo */
	float: left; /* for å rette opp ie6?? */
	margin: 15px 0 20px 15px; /* høyremarg er kritisk */
}

#header a { /* også logo */
	border-width: 0; /* for sikkerhets skyld */
	text-decoration: none;
}

/* kontakt: */

#kontakt {
	float: right; /* plasser mot høyre kant */
	margin: 70px 20px 0 0; /* flytter kontakt-teksten ned, litt under logoen, og litt inn fra høyre */
	padding: 0;
	font-size: 1.1em; /* gir fontstr 11px */
	font-family: Arial, Helvetica, sans-serif;
}

#kontakt dt {
	float: left; /* hvert element plasseres mot venstre; legger seg på én linje */
	margin-left: 8px; /* avstand mellom hvert element */
}

#kontakt a { /* egen stil på linkene */
	text-decoration: none;
	color: #294193;
	border-width: 0; /* tar bort generell border på a */
}

#kontakt a:hover {
	text-decoration: underline;
	color: red;
}

/* hovedfelt (produktmeny og innhold-felt): */

#hovedfelt {
	clear: both; /* opphever float */
	background: white; /* gir fargen på nedsiden av produktmenyen */
}

/* menyfelt på venstre side: */

#menyfelt {
	float: left; /* hele menyfeltet legger seg til venstre */
	width: 20em; /* gir bredde 200px */
	background: white; /* gir fargen bak produktmenyen, men bare der det er innhold */
}

/* produktmeny: */

#produktmeny {
	text-align: right; /* all tekst på produktmeny-knappene er høyrejustert */
}

#produktmeny dt { /* overskrift for meny ("Produkter") */
	color: white;
	background: #294193;
	font-size: 1.2em; /* all tekst på den blå linjen har 12px tekststr. */
	padding: 0.5em 18px; /* 0.5em oppe og nede, 0.5em(=6px) + 12px her istedenfor border (nedenfor) */
	line-height: 100%; /* sørger for at den blå linjen har samme høyde hele veien */
	text-transform: uppercase; /* bare store bokstaver */
	margin-bottom: 2px; /* mellomrom under 'produkter' */
}

#produktmeny a {
	text-decoration: none;
	display: block; /* linkene har høyde */
	text-transform: uppercase; /* bare store bokstaver */
	font-size: 1.1em; /* 11px */
	padding: 1px 5px;
	border-style: solid;
	border-left-style: dotted;
	border-width: 0 10px 1px 1px; /* bredden til høyre gir tydelig farge */
	margin: 2px 2px 2px 0; /* marg oppe og nede retter en feil i ie; de to går allikevel sammen til 2px */
	color: #294193; /* normalfargen på teksten */
	background: #f0f0f0;
	font-weight: bold;
}

#produktmeny a .produkt-type {
	text-transform: none; /* motvirker denne fra a */
	color: black; /* beskrivelsen er svart */
	font-weight: normal; /* motvirker denne fra a */
}

#produktmeny a:hover, #produktmeny a:hover .produkt-type { color: white; }

/* indikerer denne siden: */

#side-suter #produktmeny .meny-suter a,
#side-reginox #produktmeny .meny-reginox a,
#side-schock #produktmeny .meny-schock a,
#side-ceram #produktmeny .meny-ceram a,
#side-alveus #produktmeny .meny-alveus a,
#side-lino #produktmeny .meny-lino a,
#side-villeroy #produktmeny .meny-villeroy a,
#side-gsi #produktmeny .meny-gsi a,
#side-marmorin #produktmeny .meny-marmorin a,
#side-crolla #produktmeny .meny-crolla a,
#side-newform #produktmeny .meny-newform a {
	border-right-width: 20px;
	margin-right: 0;
	color: #294193;
}

/* skal holde fargen på produkt-typen stabil på den siden vi er på: */

#side-suter #produktmeny .meny-suter a:hover .produkt-type,
#side-reginox #produktmeny .meny-reginox a:hover .produkt-type,
#side-schock #produktmeny .meny-schock a:hover .produkt-type,
#side-ceram #produktmeny .meny-ceram a:hover .produkt-type,
#side-alveus #produktmeny .meny-alveus a:hover .produkt-type,
#side-lino #produktmeny .meny-lino a:hover .produkt-type,
#side-villeroy #produktmeny .meny-villeroy a:hover .produkt-type,
#side-gsi #produktmeny .meny-gsi a:hover .produkt-type,
#side-marmorin #produktmeny .meny-marmorin a:hover .produkt-type,
#side-crolla #produktmeny .meny-crolla a:hover .produkt-type,
#side-newform #produktmeny .meny-newform a:hover .produkt-type {
	color: black;
}

/* farger på navigasjonslinker, a: */

#produktmeny .meny-suter a { border-color: #089d3b; }
#produktmeny .meny-reginox a { border-color: #04a27b; }
#produktmeny .meny-schock a { border-color: #08a1af; }

#produktmeny .meny-ceram a { border-color: #1590d7; }
#produktmeny .meny-alveus a { border-color: #2979c9; }
#produktmeny .meny-lino a { border-color: #4d4baf; }

#produktmeny .meny-villeroy a { border-color: #8e41aa; }
#produktmeny .meny-gsi a { border-color: #c23f7e; }
#produktmeny .meny-marmorin a { border-color: #d63553; }

#produktmeny .meny-crolla a { border-color: #ef3732; }
#produktmeny .meny-newform a { border-color: #ed6712; }

/* farger på navigasjonslinker, a:hover */

#produktmeny .meny-suter a:hover { background: #089d3b; border-color: #9cd8b1; }
#produktmeny .meny-reginox a:hover { background: #04a27b; border-color: #9be1db; }
#produktmeny .meny-schock a:hover { background: #08a1af; border-color: #a2e4ed; }

#produktmeny .meny-ceram a:hover { background: #1590d7; border-color: #ade0fe; }
#produktmeny .meny-alveus a:hover { background: #2979c9; border-color: #add1f5; }
#produktmeny .meny-lino a:hover { background: #4d4baf; border-color: #b8b7df; }

#produktmeny .meny-villeroy a:hover { background: #8e41aa; border-color: #d5b7e0; }
#produktmeny .meny-gsi a:hover { background: #c23f7e; border-color: #e7b2cb; }
#produktmeny .meny-marmorin a:hover { background: #d63553; border-color: #fab1bf; }

#produktmeny .meny-crolla a:hover { background: #ef3732; border-color: #f9afad; }
#produktmeny .meny-newform a:hover { background: #ed6712; border-color: #f8c2a0; }

/* farger på navigasjonslinker, a:hover på denne siden (skal ikke endre seg) */

#side-suter #produktmeny .meny-suter a:hover { border-color: #089d3b; }
#side-reginox #produktmeny .meny-reginox a:hover { border-color: #04a27b; }
#side-schock #produktmeny .meny-schock a:hover { border-color: #08a1af; }

#side-ceram #produktmeny .meny-ceram a:hover { border-color: #1590d7; }
#side-alveus #produktmeny .meny-alveus a:hover { border-color: #2979c9; }
#side-lino #produktmeny .meny-lino a:hover { border-color: #4d4baf; }

#side-villeroy #produktmeny .meny-villeroy a:hover { border-color: #8e41aa; }
#side-gsi #produktmeny .meny-gsi a:hover { border-color: #c23f7e; }
#side-marmorin #produktmeny .meny-marmorin a:hover { border-color: #d63553; }

#side-crolla #produktmeny .meny-crolla a:hover { border-color: #ef3732; }
#side-newform #produktmeny .meny-newform a:hover { border-color: #ed6712; }

/* felles for a:hover på denne siden: */
#side-suter #produktmeny .meny-suter a:hover,
#side-reginox #produktmeny .meny-reginox a:hover,
#side-schock #produktmeny .meny-schock a:hover,

#side-ceram #produktmeny .meny-ceram a:hover,
#side-alveus #produktmeny .meny-alveus a:hover,
#side-lino #produktmeny .meny-lino a:hover,

#side-villeroy #produktmeny .meny-villeroy a:hover,
#side-gsi #produktmeny .meny-gsi a:hover,
#side-marmorin #produktmeny .meny-marmorin a:hover,

#side-crolla #produktmeny .meny-crolla a:hover,
#side-newform #produktmeny .meny-newform a:hover
{ color: #294193; background: #f0f0f0; }

/* info, under produkt-meny: */

#info {
	padding: 10px;
}

#info p {
	margin-bottom: 5px;
	color: #294193;
}

/* innhold-wrapper: */

#innhold-wrapper {
	margin-left: 20em; /* gir 240px bredde */
	background: #294193; /* mørk blå bak topp meny */
	border-left: 10px solid #E0E0E0; /* default farge på kant til høyre for 'produkter' (se under) */
}

/* toppmeny: */

#innhold-wrapper #meny {
	text-align: right; /* legger teksten mot høyre */
	font-size: 1.2em; /* gir 12px */
	height: 2em; /* høyden på den blå linjen */
	padding-right: 10px;
}

/* farget kant til høyre for 'produkter' (se kommentar over): */

#side-suter #innhold-wrapper { border-color: #089d3b; }
#side-reginox #innhold-wrapper { border-color: #04a27b; }
#side-schock #innhold-wrapper { border-color: #08a1af; }

#side-ceram #innhold-wrapper { border-color: #1590d7; }
#side-alveus #innhold-wrapper { border-color: #2979c9; }
#side-lino #innhold-wrapper { border-color: #4d4baf; }

#side-villeroy #innhold-wrapper { border-color: #8e41aa; }
#side-gsi #innhold-wrapper { border-color: #c23f7e; }
#side-marmorin #innhold-wrapper { border-color: #d63553; }

#side-crolla #innhold-wrapper { border-color: #ef3732; }
#side-newform #innhold-wrapper { border-color: #ed6712; }

/* linker på blå linje */

#innhold-wrapper #meny a {
	text-decoration: none;
	color: white;
	display: block;
	padding: 0.5em 10px; /* 0.5em gir 5px normalt, følger tekststørrelsen */
	line-height: 100%; /* samme høyde på den blå linjen */
	background: #294193;
	float: right;
	border-width: 0; /* ta bort border på generell a */
}

#innhold-wrapper #meny a:hover {
	color: #294193;
	background: #A9B3D4;
}

/* innhold, redigerbart område: */

#innhold {
	font-size: 1.2em;
	line-height: 150%;
	padding: 20px;
	background: white;
}

/* farget kant på venstre side av tekstfeltet: */

#side-ingen #innhold {
	background: white url("bilder/Lino-header-u.jpg") no-repeat top right; /* eget bakgrunnsbilde på firma-sidene */
	padding-top: 35px; /* ... og ekstra avstand for å gi plass til bildet */
}

/* et bilde i teksten */

#innhold img {
	float: right;
	padding: 5px;
	border: 1px solid #E0E0E0;
	margin: 0 0 10px 10px;
	background: white;
}

/* link på bilde vil endre border-farge */

#innhold a img {
	
}

#innhold a:hover img {
	border-color: #294193;
}

/* produkt-tabell i teksten: */

#innhold table {
	border-collapse: collapse;
	/* bredde 99% for å rette 3px jog-feil i ie6: */
	width: 99%; /* må ta bort alle ekstrating på table i html unntatt cellspacing="0" */
}

#innhold table caption { /* overskrift i begge tabellene */
	font-weight: bold;
	font-size: 1.2em;
	font-family: Geneva, Arial, Helvetica, sans-serif;
	padding: 5px 0 5px 20px;
	background: #294193; /* mørk blå linje øverst */
	color: white;
	border-bottom: 7px solid white; /* hvitt mellomrom under overskriften */
	text-align: left; /* tekst mot venstre */
}

#innhold td {
	background: #E0E0E0; /* lys grå bakgrunn */
	border-bottom: 10px solid white; /* hvitt mellomrom mellom 'bokser' */
	vertical-align: top; /* tekst legger seg øverst */
}

#innhold td p, #innhold td h1, #innhold td h2, #innhold td h3, #innhold td h4, #innhold td h5, #innhold td h6 {
	margin: 10px 20px;
}

#innhold td img {
	margin: 5px;
	float: right; /* legger bilder på høyre side */
	padding: 0;
	border-width: 0;
}

/* prislistetabell i tabellen */

#innhold table table {
	border-collapse: collapse;
	/*margin: 10px 20px 20px 20px;*/
	font-size: 100%;
	/*width: 95%;*/
}

* html #innhold table table {
	/*width: 26em;  for IE5 */
	/*w\idth: 100%;  for alle andre */
}

#innhold table table caption {
	background: #E0E0E0; /* ta bort den blå igjen */
	font-size: 1em;
	color: black;
	border-bottom-width: 0;
	padding: 5px 10px;
	text-transform: uppercase; /* store bokstaver på overskrift */
}

#innhold table table .undertekst { /* egen stil i overskriften for normal tekst */
	text-transform: none;
	font-weight: normal;
	/* kan ikke ha mindre størrelse på teksten her */
}

#innhold table table th, #innhold table table td { /* plasserer tekst i tabellrutene */
	text-align: left;
	vertical-align: top;
	padding: 5px 10px;
}

#innhold table table th {
	border-bottom: 1px solid #C0C0C0; /* border oppe og nede på tabelloverskrift */
	border-top: 1px solid #C0C0C0;
	font-weight: bold;
}

#innhold table table td {
	border-bottom: 1px dotted #C0C0C0; /* border under tabellelementer */
	border-top: 1px dotted #C0C0C0;
}

/* lister */

.enkel-liste {
	margin-bottom: 10px;
}

.enkel-liste dt {
	font-weight: bold; /* overskrift i liste */
	margin-top: 5px;
}

.enkel-liste dd {
	margin-left: 20px; /* innrykk på liste */
}

.enkel-liste dl dt {
	margin-left: 0; /* innrykk på liste */
	font-weight: normal;
}

.enkel-liste dl dd {
	margin-left: 20px; /* innrykk på liste */
}

.punktliste dt {
	font-weight: bold;
	margin-top: 10px;
}

/* bunntekst */

#bunntekst {
	font-size: 1.1em; /* 11px */
	clear: both; /* sørger for at bunnfeltet strekker seg over hele bredden */
	border-top: 1px solid #A9B3D4;
	background: #E0E0E0;
	text-align: center;
	padding: 5px;
}

#bunntekst p { margin-bottom: 5px; }

#bunntekst a {
	text-decoration: none;
	color: #294193;
	border-width: 0; /* tar bort generell border på a */
}

#bunntekst a:hover {
	text-decoration: underline;
	color: red;
}

/* ie6 hacks */

* html #produktmeny a {
	height: 1px;
}

* html #kontakt {
	display: inline;
}

/* Firefox hacks: */

html { height: 100%; }

/* ----------------------------- slutt ---------------------------- */