/* -------------------------------------------------------------- 

30.08.2010 av Bent Inge Høiås
   
-------------------------------------------------------------- */

@import "dcore/css/sm_reset.css";
@import "dcore/css/sm_typografi.css";
@import "vk_cms.css";

/* -------------------------------------------------------------- 

	Skjules i utskriftsutgave

-------------------------------------------------------------- */

.sm_firstkol,
#info,
.noprint,
#topnav,
#nav,
#header h1,
#header p,
#logo span,
#sok,
#smuler,
#navigasjon,
hr.hide	{ display: none }

/* -------------------------------------------------------------- 

	

-------------------------------------------------------------- */

body { background: #fff; line-height: 1.5; color: #333 }

/* Standard fontstacks - kommenter bort og inn... */
body,p,ul,ol,dl,input,textarea, select {
	font-family: "Trebuchet MS", "Segoe UI", Candara, "Bitstream Vera Sans", "DejaVu Sans", "Bitstream Vera Sans", Verdana, "Verdana Ref", sans serif }
	


/* Fontstørrelse */
#innholdsramme { font-size: 1.2em } /* Standard er 10px: 12px=1.2em */

/* Overskrifter */
h1, .artikkel.hovedvisning h1 { font-size: 28px; color: #333; margin: 0 0 .1em 0; line-height: 1.1em }	/* 18px/12px */
h2, .artikkel.hovedvisning h2 { font-size: 1.5em; color: #555; font-weight: normal; margin: 0 0 .7em 0; line-height: 1.3em }
h3, h4, h5, h6, .nyhetsartikkel h1 { font-size: 1.3em; line-height: 1.1em; color: #444; margin: 0 0 .4em 0 }
blockquote { padding: 0 20px; font-size: 1.2em; margin: 0 0 1.5em 0; border: none; background: none; color: #444 }

/* Lenker */

a { color: #333; text-decoration: underline }

/* -------------------------------------------------------------- 

	DESIGN
	- nettstedspesifikt
   
-------------------------------------------------------------- */


#header { padding: 0 0 1.5em 0; border-bottom: 2px solid #004990; margin: 0 0 1.5em 0 }
#kreditt { padding: 1.5em 0 0 0; border-top: 2px solid #004990; clear: both }
#kreditt p { float: left }
#kreditt p.sm_kred { float: right; text-align: right }
#kreditt a { text-decoration: none }

/*
	GALLERIDESIGN
*/

.slidegalleri {
	height: 334px; width: 470px;
	margin: 0 10px 1.5em 0;
	overflow: hidden;
	position: relative;
	float: left; }

.slidegalleri ol, .slidegalleri ul { margin: 0; list-style-type: none; position: absolute; overflow: hidden }
.slidegalleri ol { top: 313px; left: 1px; height: 20px; width: 469px; z-index: 9000 }
.slidegalleri ol li { float: left; margin: 0 1px 0 0; width: 20px; overflow: hidden }
.slidegalleri li strong,
.slidegalleri li em {
	display: block; float: left; height: 20px; background: url(gfx/bg_hvit.png);
	line-height: 20px; color: #333; cursor: pointer; overflow: hidden;
	 }

.slidegalleri li strong { width: 20px; margin: 0 1px 0 0; text-align: center;  }
.slidegalleri li em { width: 343px; padding: 0 10px; text-decoration: none; font-style: normal; color: #333 }

.slidegalleri ol li#n1 { width: 384px }
.slidegalleri ul { top: 0; left: 0; width: 2350px; height: 334px; z-index: 100 }
.slidegalleri ul li { float: left; width: 470px; height: 334px; overflow: hidden }

.slidegalleri .ax1 {
	position: absolute; top: 307px; left: 0; height: 21px; width: 470px; z-index: 200; background: url(gfx/galleri_bg.png) repeat; }

/* -------------------------------------------------------------- 
   Badeliv, skjema
-------------------------------------------------------------- */

#kontakt_skjema {
	width: 100%;
}

#kontakt_skjema p {
	width: 30%;
	float: left;
	margin: 0 3% 1em 0;
}
#kontakt_skjema input {
	width: 170px;
}

#kontakt_skjema p.knapp, #respons p.knapp, .dl-skjema p {
	font-size: 1.2em;
	width: 34%;
	text-align: center;
	float: right;
	margin: 0;
}
#kontakt_skjema p.knapp a, #respons p.knapp a, .dl-skjema p input {
	background: #01ABC4;
	color: #fff;
	text-decoration: none;
	display: block;
	height: 20px;
	line-height: 20px;
	width: 154px;
	border: 1px solid;
	border-color: #ccc #666 #666 #ccc;
	padding: 2px
}
#kontakt_skjema p.knapp a:hover, #respons p.knapp a:hover {
	border-color:  #666 #ccc #ccc #666;
}

/* -------------------------------------------------------------- 
   Bildegalleri, lightbox
-------------------------------------------------------------- */

.galleri .current {
	width: 339px; height: 243px;
	float: right; margin: 0 0 12px 0;
	background: #eee; padding: 7px;
	overflow: hidden }

.bgthumbs {
	width: 353px; 
	float: right; overflow: hidden }
.bgthumbs a {
	display: block;
	height: 70px;
	width: 100px;
	float: left;
	margin: 0 12px 12px 0;
	border: 5px solid #eee }
.bgthumbs a:hover { border-color: #666 }

.bgthumbs ul {
	list-style: none; padding: 0; margin: 0; width: 370px }
.bgthumbs li {
	float: left; display: inline }
	
.galleri .innerart { width: 310px; float: left; zoom: 1 }


/* SKJEMAER */
input, textarea, select {
	border: 1px solid #cdcdce;
	background: #fafafa; 
}
input.postnr {width: 50px;margin: 0 5px 0 0;}
input.poststed {width: 213px;}
/* fieldset { padding:10px; margin:10px 0; width:604px;} */

legend {}
label {font-weight:bold; color:#666;}
label.opt {font-weight:normal;}
dl {clear:both;}
dt {float:left; width:292px; line-height:20px; margin:0;}
dd {float:left; width:292px; line-height:25px; margin:0 0 .5em 0;}

.form_bred dl.en_linje input {width: 20px; text-align: center}
dl dd {margin-left: 0;}
dl.radio {float: left; width: 150px; clear: none}

/* KOLONNER */
.form_kol {
	float: left;
	width: 292px;
	padding: 0 5px;
}
.form_bred {clear: both; padding: 0 5px; }
input {width: 274px; padding: 2px;}
textarea {width: 274px; padding: 2px;}
.form_bred textarea.liten {height: 50px}

.radio input {width: 20px;}
.radio dt {width: 30px; padding: 5px;}
.form_bred .radio dd {width: 100px; clear: none}

.form_bred dd {clear: both; width: 600px;}
.form_bred textarea {width: 577px; height: 100px;}


/* -------------------------------------------------------------- 
  
   ARTIKKELDESIGN ++
   
-------------------------------------------------------------- */


.nb { padding: .8em; border: 2px solid #FFD324; background: #FFF6BF; color: #514721 }

.smal_artikkel { /* Vet ikke hvor denne brukes */
	width: 400px;
	margin: 0 0 1.5em 0;
}

.nyhetsartikkel {
	float: left;
	width: 560px;
	padding: 0 0 1em 140px;
	min-height: 120px;
	clear: both;
	border-bottom: 1px solid #ddd;
	position: relative;
	margin: 0 0 1em 0;
	line-height: 1.3em }

.nyhetsartikkel img {
	position: absolute; top: 0; left: 0 }
	
.nyhetsartikkel h2 { font-size: 1em; margin: 0 }
.nyhetsartikkel p { margin: 0 }

/* -------------------------------------------------------------- 
   Personalia og teasere (Senter for familie og samliv)
-------------------------------------------------------------- */

.pers { float: left; width: 100%; clear: left }
.pers ul,
.tease ul,
.badearkiv ul { margin: 0 0 1.5em 0; width: 720px; list-style: none }
.pers li {
	float: left; position: relative; width: 212px; height: 100px;
	padding: 5px 10px 0 120px; margin: 0 10px 10px 0; overflow: hidden;
	font-size: .9em; border: 1px solid #eee }
.pers li img { position: absolute; top: 0; left: 0 }
.pers li strong, .tease li strong { font-size: 1.1em; color: #333 }
.pers li em { font-style: normal }
.pers h4 { clear: both; width: 100%; margin: 0 0 1em 0 }

.tease li {
	float: left; position: relative; width: 340px; height: 8em;
	overflow: hidden; margin: 0 15px 10px 0 }
.tease li a {
	display: block; color: #444; height: 8em; zoom: 1 }
.tease li a:hover { text-decoration: none; background: #eee }
.tease li img { top: 6px; left: 6px }
.tease li.hr { width: 690px; margin: 0; height: auto }

/* -------------------------------------------------------------- 
   Badeliv arkiv - art.design .badearkiv
-------------------------------------------------------------- */

.badearkiv li {
	float: left; position: relative; width: 148px; height: 100px;
	padding: 0; margin: 0 30px 10px 0; overflow: hidden;
	font-size: 1em; border: 1px solid #eee; text-align: right }
.badearkiv li img { position: absolute; top: -1em; left: -1.5em }
.badearkiv h4,.badearkiv h5,.badearkiv h6 { clear: left; padding: .5em 0 }
.badearkiv h5, .badearkiv h6 { color: #999; font-size: 1.2em }

/* -------------------------------------------------------------- 
   Artikler og "inline" stiler
   1. tospalter
-------------------------------------------------------------- */

.spalte { float: left; width: 330px; margin: 0 40px 0 0;
		zoom: 1 }
.spalte.sist { margin: 0 }
.spalte.blokkjustert { text-align: justify }
.spalte.tredelt { width: 206px }

.spalte.strek { margin: 0 20px 0 0; padding: 0 19px 0 0; border-right: 1px solid #ddd }

.spalte.years p { padding-left: 5em; margin-top: -2em } /* Brukes på tidl. forelesninger Gordon Johnsen */

/* -------------------------------------------------------------- 
   Liste med oppdateringer - se f.eks. Malawi-prosjekt
-------------------------------------------------------------- */

ul.update { margin: 0 0 40px 40px; width: 330px; float: right; list-style: none }
ul.update li { margin: 0 0 10px 0 }
ul.update li a {
	display: block;
	width: 248px; height: 75px;
	float: left;
	padding: 0 0 0 80px; position: relative;
	overflow: hidden; color: #666;
	border: 1px solid #fff }
ul.update li a strong { color: #333; font-size: 1.1em }
ul.update li em { font-style: normal; font-size: .9em }
ul.update li a:hover { background: #fafafa; border-color: #ddd; color: #333; text-decoration: none }
ul.update img { position: absolute; top: 0; left: 0 }

/* -------------------------------------------------------------- 
   Sosiale medier
-------------------------------------------------------------- */

#social { position: absolute; top: 2px; left: 935px; width: 45px }
#social a {
	display: block; float: left;
	height: 20px; width: 21px;
	text-decoration: none;
	background: no-repeat 50% 50% url(/gfx/addthis.gif) !important }
#social span { display: none }
#social a.rss { 	background-image: url(/gfx/rss.gif) !important }

/* -------------------------------------------------------------- 
   Faktaboks
-------------------------------------------------------------- */

.faktaboks { float: right; width: 200px; margin: 0 0 1.5em 1.5em; font-size: .9em; padding: 40px 0 0 0; background: url(gfx/fakta.gif) no-repeat }
.faktaboks h3 { padding: 0 20px }
.faktaboks ul { margin: 0; list-style: none; padding: 0 0 80px 20px; background: url(gfx/fakta.gif) no-repeat bottom left }

/* -------------------------------------------------------------- 
   Nyheter / forsideaktiviteter og art.design kontaktinfo - se f.eks. PREP
-------------------------------------------------------------- */

#nyheter, .kontaktinfo {
	width: 220px; overflow: hidden;
	float: right; position: relative }
#nyheter { height: 355px }
#nyheter h1, #nyheter h2, .kontaktinfo h1 { font-size: 1em; margin: 0 0 12px 0 }

.kontaktinfo .innerart { padding: 0 14px; line-height: 1.2em }
.kontaktinfo strong { color: #333 }
.kontaktinfo em { color: #999 }

#nyheter h1.tittel a, .forsideaktiviteter h1 a, ul.update li.tittel, .kontaktinfo h1 {
	display: block;
	text-decoration: none; height: 30px; line-height: 30px;
	padding: 0 14px !important; font-size: 1.2em;
	border: 1px solid #d0e7f5;
	background: #deeef8 !important }
#nyheter h1.tittel a:hover, .forsideaktiviteter h1 a:hover { background: #00abc2 }

.art, ul.update li { line-height: 1.2em }	
.art a {
	display: block;
	width: 138px; height: 95px;
	float: left; margin: 0 10px 10px 0;
	padding: 0 0 0 80px; position: relative;
	overflow: hidden; color: #666;
	border: 1px solid #fff }
.art a strong { color: #333 }
.art em { font-style: normal; font-size: .9em }
.art a:hover { background: #fafafa; border-color: #ddd; color: #333; text-decoration: none }
.art img, p.bilde { position: absolute; top: 0; left: 0 }
.art .dato, .art .lesmer { display: none }

#nyheter h3 { font-size: 1em; font-weight: normal }

/* -------------------------------------------------------------- 
   Aktiviteter, konserter og kurs
-------------------------------------------------------------- */

.aktivitet {
	border-bottom: 1px dotted #ddd;
	margin: 0 0 8px 0;
	padding: 8px 60px 0 95px;
	height: 75px;
	position:relative }
.aktivitet h1 { font-size: 1.2em; margin: 0 }
.aktivitet h1 a { color: #333 }
.aktivitet h2 { font-size: 1em; display: inline; padding: 0 50px 0 0 }
.aktivitet p.dato { color: #888; padding: 0 10px 0 0; display: inline }
.aktivitet p.lesmer { position: absolute; bottom: 8px; right: 0; margin: 0 }

/* -------------------------------------------------------------- 
   Artikkeldesign, artmeny - som på Om Modum Bad
-------------------------------------------------------------- */

.artmeny ul { width: 733px; list-style: none; margin: 0 }
.artmeny li { float: left; position: relative; zoom: 1;
	width: 214px; height: 181px; margin: 0 30px 30px 0; overflow: hidden }
.artmeny img { position: absolute; top: 0; left: 0 }
.artmeny a { display: block; padding: 146px 5px 5px 5px; height: 30px; background: #ecf1f7; color: #336da6; line-height: 15px; text-align: center } 
.artmeny a:hover { background: #333; color: #fff; text-decoration: none }

/*
Ledige stillinger
*/

ul.stillinger { list-style: none; margin: 0 0 1.5em 0 }
ul.stillinger li { padding: .5em; border: 1px solid #ddd; margin: 0 0 .5em 0; background: #fafafa }
ul.stillinger li strong { font-size: 1.1em; color: #333 }

/* Ordbok - indexliste i toppen på siden /ordbok */

ul.om { margin: 0 0 1.5em 0; list-style: none; width: 702px; height: 22px; overflow: hidden }
ul.om li { float: left; width: 22px; height: 22px; margin: 0 2px 0 0 }
ul.om a { display: block; height: 20px; line-height: 20px; border: 1px solid #ddd; text-align: center; text-decoration: none }
ul.om a:hover { background: #004990; color: #fff; font-size: 1.2em; font-weight: bold }