/* stilmallar f?r www.cluram.se */


* {
padding: 0;
margin: 0;
font-family: "Lucida Grande", Verdana, Arial, sans-serif;
}


html {
	height:100%;
}


body {
	min-height:101%; /* visar vertikal scrollbar*/
	margin: 0;
	padding: 0;
	color:#000;
	background-color: #ffffff;/* #f4f2e5; */
}
	

#kanvas {
	background-image: url(../bilder/horisontal_bg_alt2.png); background-repeat: repeat-x; 
	width:100%;
}

#sida {
	margin:0px auto 0px auto; /* centrera inneh?llet */
	display:block;
	width:782px;  /* inneh?llets bredd */
}

#huvud {
	height: 297px;  /* ursprungligen 297px */
	margin: 0;
	padding: 0;
}
	

#navigation {
	
	background: transparent;
	height: 80px;
	width: 100%;
	border: 0;
	padding:0;
	overflow: hidden;
}

#logo {
	width:153px;
	height: 66px;
	float:left;
	margin: 8px 0px 3px 10px;
}

#logo img {
	border: 0;
	padding: 0;
}

#logo a, #logo a:hover, #logo a:link {
	text-decoration: none;
	background-color: transparent;
	border: 0;
}


#huvudbild { /* bildstorlekar ska vara: 782 x 206 px */
	height: 217px;
	padding:0;

}

#huvudbild img { /* positionerar huvudbilden mot bakgrunden */
	border:0;
	margin-top:8px;
}

#innehall {
	background: #fff; /* transparent */
	text-align: left;
	width: 100%; /* 782px ?r den egentliga bredden */
    overflow:auto;
	padding: 20px 0px 50px 0px;
}

#sidospalt {
	position: relative;
	left: 10px;
	float:left;
	display: block;
	width:210px;
	background-color: transparent;	
	/*padding: 0px 10px;*/
	padding: 0;
}

#huvudspalt {
	float: right;
	display: block;
	background-color: transparent;
	width: 532px;
	padding:0px 10px;
}


#sidfot {
	position: relative;
	display: block;
	background: url(../bilder/sidfot_toning.png);
	text-align: center;
	height:40px;
}


/* _____________________ bilder _____________________ */

div.vanster {
	float:left;
}

div.hoger {
	float:right;	
}

div.bildram.hoger {
	margin-left: 10px;
}

div.bildram.vanster {
	margin-right: 10px;
}

div#huvudspalt .bildram img, div#sidospalt .bildram img {
	border:4px solid #e8e8e9;
}

div#huvudspalt .bildram a:hover img, div#sidospalt .bildram a:hover img {
	border:4px solid #ccc;
}

div#huvudspalt .bildram a:hover, div#sidospalt .bildram a:hover {
	text-decoration: none;
	background-color: transparent;
}

#pil {
	padding-top:8px;
}

div#sidospalt #pil img {
	
}


.bildram img.liten {
 	 width: 62px;
	 height: 46px;
}


.bildram img.normal?{
	width: 124px;
	height: 93px;
}


/* _____________________ typografi _____________________ */


p {
	margin: 0.8em 0px; /* 1em 0 */
}



h1 {
	font-size: 1.3em;
	margin-bottom: 0.5em;
	color: #e78c32;
}

/*** KURSPUFF ***/

#huvudspalt div.kurspuff {
	position: relative;
	display: block;
	width: 100%; /* div#huvudspalt ?r 532px bred exklusive padding. */
	float: none;
	clear: both; /* B?rja alltid p? ny rad. Det ?r i och f?r sig sv?rt att inte g?ra det n?r bredden ?r 100%. */
	padding: 0;
	margin: 0;
}

#huvudspalt div.kurspuff div.bildram {
	/*
		Bildramen har en fet kantlinje som definieras lite h?gre upp i filen.
		Bildramen har ingen given bredd utan f?r den bredd som bilden inuti har (+ kantlinjen).
	*/
	position: relative;
	display: block;
	margin: 0 !important;
	float: left;
}

#huvudspalt div.kurspuff.stor_bild div.bildram img {
	/*
		Stor bild anv?nds p? sidan "hem".
	*/
	width: 124px;
	height: 93px;
}

#huvudspalt div.kurspuff.liten_bild div.bildram img {
	/*
		Liten bild anv?nds p? sidorna "kurser" och "kursdatum".
	*/
	width: 62px;
	height: 46px;
}

#huvudspalt div.kurspuff p {
	/*
		Bredden p? br?dtexten beror av hur bred bilden till v?nster ?r. Se efterf?ljande definitioner.
	*/
	position: relative;
	display: block;
	float: right;
	font-size: 0.86em;
	line-height: 1.36em;
	color: #000;
	margin-top: 0;
}

#huvudspalt div.kurspuff.stor_bild p {
	/*
		Br?dtext till h?ger om stor bild.
	*/
	width: 390px;
} 

#huvudspalt div.kurspuff.liten_bild p {
	/*
		Br?dtext till h?ger om liten bild.
	*/
	width: 452px;
} 

/*** KURSPUFF slut ***/

#huvudspalt h2 {
	clear:both;
	font-size: 0.92em;
	line-height: 1em;
	color: #000;
	border-bottom: 1px solid #efefef;
	padding: 12px 0px 3px 0px;
	margin: 0 5px 10px 0;
	/* text-transform: uppercase; */
}


#huvudspalt p {
	font-size: 0.86em;
	line-height: 1.36em;
	color: #000;
	margin-top: 6px;
}

#huvudspalt li {
	list-style: inside square;
	font-size: 0.86em;
	line-height: 1.36em;
	color: #000;
	padding-left: 30px;
}

#huvudspalt ul {
	padding-bottom: 6px;	
}

#sidospalt p {
	font-size: 0.70em;
	line-height:1.24em;
	color: #303030;
	padding: 6px 0;
	margin: 0;
}

#sidospalt h2 { /* anv?nds i rubriker i sidospalten */
	font-size: 0.75em;
	line-height: 1.6em;
	font-weight: bold;
	border-bottom: 1px solid #efefef;
	padding-top: 42px;	 
	margin-bottom: 6px;
	color: #666;
}

#sidospalt .topp {  /* anv?nds i sidospalten, f?r att ta bort ev. luft */
	padding-top:0;
	margin-top:0;
}

#sidfot p{
	margin:0;
	padding:0;
	font-size: 0.68em;
	line-height: 1.2em;
	color: #666;
	padding: 10px 10px 5px 10px;	
}

#sidfot a:hover {
    background-color: #fff;
}

.emfas {
	margin: 0 40px;
	padding: 6px;
	font-weight: inherit;
	background-color: #f0f6fc;
	display: block;
	position: relative;
}

.kundlista {
	font-size: smaller;
}

/* _____________________ citat ______________________ */


#sidospalt blockquote {
		background-image: url(../bilder/citattecken.gif);
		background-repeat: no-repeat;
		background-position: 0pt 2px;
		background-attachment: scroll;
	}

#sidospalt blockquote p {
		margin-bottom: 0.5em;
		text-indent: 27px;
		font-size: 0.75em;
		color: #6b6b6b !important;
		line-height: 1.4em;	
	}

#sidospalt .avsluta-citat {
		padding: 0pt 27px 0pt 0pt;
		background-image: url(../bilder/citattecken.gif);
		background-repeat: no-repeat;
		background-position: right top;
		background-attachment: scroll;
	}
	
#sidospalt p.signatur {
		font-style: italic;
		text-align: left;
		font-size: 0.65em;
		display: block;
		position: relative;
		text-align: right;
		padding:0;
		margin:0 0 6px 0;   /* margin:0 0 25px 0; */
}


/* _____________________ feedback _______________________ */


#feedback p {
		font-style: italic;
		background-image: url(../bilder/citattecken.gif);
		background-repeat: no-repeat;
		text-indent: 27px;

}

/* _____________________ l?nkar, generellt  _____________________ */

a:link, a:visited {
    color: #005a9c;
    background-color: transparent;
    text-decoration: underline;

}

a:hover, a:active {
    color: #005A9C;
    background-color: #f4f2e5;
    text-decoration: underline;
}


/* _____________________ menyflikar _____________________ */

#flikar {
	
	float:right;
	margin:42px 0px 0px 0px;
	padding:0;

}
	
ul#fliknav { /* flikarnas utseende generellt */
	text-align: left;
	margin: 1em 0 1em 0;  /* marginalerna */
	font: 0.8em "Lucida Grande", verdana, arial, sans-serif; /* font */
	border:0;
	list-style-type: none;
	padding: 7px 16px 7px 16px; /* TREDJE v?rdet, ?ndras enligt padding-top (X) nedan */
}

ul#fliknav li { /* ?ndra inte */
	display: inline;
}

/*
ul#fliknav li.flik5 { /* ta bort detta när bloggen öppnas 
	display: none;
}
*/

body#flik1 li.flik1, body#flik2 li.flik2, body#flik3 li.flik3, body#flik4 li.flik4, body#flik5 li.flik5 { /* VALD FLIK */
	border:transparent; 
	background-color: #e78c32; 

}

body#flik1 li.flik1 a, body#flik2 li.flik2 a, body#flik3 li.flik3 a, body#flik4 li.flik4 a, body#flik5 li.flik5 a { /* vald fliks L?NK */
	background-color: #e78c32;
	color: white;
	padding-top: 7px; /* ?ndras med h?nsyn till padding (X) ovan och nedan */

}

ul#fliknav li a { /* l?nkar i alla flikar */
	padding: 7px 16px 7px 16px; /* padding (storlek p? flik); F?RSTA v?rdet ?ndras enl. padding-top (X) ovan */
	border: 0; 
	background-color: transparent; /* bakgrundsf?rg p? ej valda flikar */
	color: #666; /* l?nkf?rg p? ej valda flikar */
	margin-right: 0px; /* extra luft mellan flikar */
	text-decoration: none;
	border-bottom: none;
}

ul#fliknav a:hover { /* hover effekt */
	background: #e78c32; 
}	
	


/* _____________________ anm?lningsknapp _____________________ */


.knapp {
	position: relative;
	display: block;
	padding: 4px 0;
	margin: 0;
}

.kursanmalan {
		background-image: url(../bilder/anmalningsknapp2.gif);
		padding: 0;
		border: 0;
		height: 27px;
	}
	
.knapptryck:hover {
		background-position: 0 -35px;
		background-color: #fff;
	}
.knapptryck:active {
		background-position: 0 -70px; 
		background-color: #fff;
	}
	
.knapptryckSub {   /* ev. text under knapp */
		font-size: .8em;
		text-align: center;
	}


.knapptryck {
		background-repeat: no-repeat;
		background-position: 0 0;
		width: 132px;
		height: 27px;
		text-indent: -3000px;
		display: block;
		margin: 0;
		background-color: #fff;
		padding: 0;
}



/* _____________________ forms _____________________ */


fieldset#nyhetsbrev {
	background: transparent;
	padding: 0;
	border: 0;
}

fieldset#nyhetsbrev input.epostadress { 
	width: 120px;
	font-size: 0.7em;
	color: #505050;
}

input#submit {  /* anv?nds f?r nyhetsbrevsanm?lan */
	background: url(../bilder/orange_knapp.gif);
	width: 62px;
	height: 20px;
	border:0;
	color: #fff;
	font-size: 11px;
	padding: 0px 3px;
	margin:0;
}

input#submit_kurs { /* anv?nds f?r kursanm?lan */ 
 	background: url(../bilder/orange_knapp.gif);
	width: 62px !important;
	height: 20px;
	border: 0;
	color: #fff;
	font-size: 11px;
	padding: 0px 3px;/* ?ndra inte */
	margin:0;
}

/* _____________________ fakta _____________________ */

.fakta {
		background-image: url(../bilder/glodlampa.gif);
		background-repeat: no-repeat;
		background-position: 0 0;
		background-attachment: scroll;
		margin: 30px 0;
		padding:0;
}



.fakta p {
		text-indent: 20px;

}





/* ___________________ sidomeny __________________________ */


#sidomeny{
	margin: 4px 0 30px 0;
}


#sidomeny ul {	
	width: 190px;
	padding: 0;
	margin: 0;
	list-style-type: none;
	font-size: 0.8em;
}


#meny li {
	margin: 1px 0;
	}


#meny a {
	display: block;
	line-height: 1.8em;
	color: black;
	text-decoration: none;
	padding-left: 20px;
	background-color: #f4f2e5;
	width: 190px;
}


#meny a:hover {
	background-color: #e78c32;
	color:#fff;
}


#meny li.aktiv {
	background-color: #e78c32;
	color: #fff;
	width: 190px;
	padding-left: 20px;
	display: block;
	line-height: 1.8em;
}



/* _____________________ tabeller kursdatum _______________________ */


#huvudspalt .pris { 
	line-height: 1.2em;
	display: block;
	position: relative;
	font-size: 0.68em;
	padding: 5px 0;
	text-align: right;
	clear:both;
}


#ugl table {
	clear: both;
	width: 100%;
}

#diplomutb table {
}


#ugl th, #ugl td, #diplomutb th, #diplomutb td { /* stil p? tabellinneh?ll */
	border-bottom: 1px solid silver;
	border-collapse: collapse;
	font-size: 11px;
	line-height: 1.2em; 
	color: #444; 
	text-align: left; 
	padding: 4px 4px 4px 6px; 
}

#huvudspalt p.tabellrubrik{ /* p ovanf?r tabell */
	font-size: 11px; 
	line-height: 2em; 
	font-weight: normal; 
	text-align: left; 
	margin-top: 5px;
}

colgroup { }

col#kolumn_ugl1 { width: 177px; }

col#kolumn_ugl2 { width: 177px }

col#kolumn_ugl3 { width: 178px; }

/*col#kolumn_diplomutbildning1 { width: 240px; }
col#kolumn_diplomutbildning2 { width: 240px; }*/

col.kolumn_diplomutbildning { width: 240px; }

#ugl thead th, #diplomutb thead th { /* rubrikerna i tabellerna */ 
	text-align: left; 
	background: #bbcbeb; 
	color: #333;
	font-size: 10px !important;
}

#ugl tbody tr, #diplomutb tbody tr {  /* varannan rad i tabellerna */
	background: #fcfdfe;
}

#ugl tbody tr.odd, #diplomutb tbody tr.odd {  /* varannan rad i avvikande bg. */
	background: rgb(245,245,245); 
}



/* _____________________ tabeller kursanm?lan _______________________ */

div.felmeddelande_anmalan {
	border-top: 1px solid silver;
	background-color: #FFF1F1;
	padding-bottom: 0.6em;
	margin-top: 20px;
}

div.felmeddelande h1 {
	color: #FF3333;
}

div.felmeddelande_anmalan h1 {
	font-size: 90%;
	margin-top: 0.8em;
	margin-bottom: 0.6em;
	color: #FF3333;
	padding: 0 8px 0 8px;
}

div.felmeddelande li,
div.felmeddelande_anmalan li {
	color: #FF3333 !important;
	margin-top: 0.3em;
	margin-bottom: 0.3em;
}

table#formular {
	margin: 0;
	width: 100%;
}

#formular th, #formular td { 
	border-top: 1px solid silver; 
	border-collapse: collapse; 
	font-size: 11px;
	color: #222; 
	text-align: left; 
	background-color: #ebeff6;
	padding: 8px 8px 8px 10px;
}

#formular textarea { /* texten i rutan (anm?lningsvillkor) */ 
	font-size: 11px;
	color: #666;
	width: 313px;
 }
 
#formular select {
	/*font-size: 11px;*/
	width: 315px;
}

#formular input.namn {
	width: 150px;
}

#formular input.adress {
	width: 315px;
}

#formular input.foretag,
#formular input.epostadress,
#formular input.postadress {
	width: 225px;
}

#formular td.kolumn_1 {
	width: 128px;
}

#formular td.kolumn_2 {
	width: 12px;
	text-align: right;
	padding-right: 0;
}

#formular td.kolumn_3 {
	width: 338px;
}