body			{ /* -----------------   standard body-mall för alla webbsidor --------------------------- */
				background:#fff;              /* bakgrundsfärgen är vit som standard på alla mina hemsidor */
				margin:0; 
				padding:0;		
				font-family: Verdana, Arial, Helvetica, sans-serif; 
				font-size: 11px;
				color: #333;						
				} 
				
h1				{
				font-family: Verdana, Arial, Helvetica, sans-serif;
				font-size: larger;	
				color: silver;
				font-style: oblique;				
				}	
				
h2				{
				font-family: Verdana, Arial, Helvetica, sans-serif;
				font-size: xx-larg;	
				color: silver;
				font-style: oblique;				
				}				 						
				
#bakgrundsbox	{/* ett lager med namnet "bakgrundsbox" ligger underst av alla lager och 
													centrerar sidans innehåll till mitten på skärmen  */
				width:850px;   						/* sidans hela innehåll ska rymmas inom lagrets 800 px bredd */
				height:620px;   					/* sidans hela innehåll ska rymmas inom lagrets 600 px höjd */
				margin-right:auto; 		
				margin-left:auto;
				background:#fff;					/* bakgrundsfärgen är vit */
				z-index: 1;		
				border-left: 0px solid #red;		
				}						
#box_med_ram	{ 									/* detta lager ligger ovanför lagret "bakgrundsbox"  med 1px  grå linje och 													snäppet under sidhuvudet med alla knappar */
				position:relative; 					/*  lagret ligger ovanpå bakgrundsboxen  */
				left:30px; 
				top:0px;					    	/* ligger 0 px under toppen av sidan  */
				width:790px; 						/* bredden på lageret följer bakgrundsbox */
				height:608px; 						/* höjden på lageret följer bakgrundsbox */	
				border-bottom: 1px solid #666;		/* ramen runt boxen är grå  */
				border-right: 1px solid #666; 		
				border-left: 1px solid #666; 				
				background:#fff;					/* bakgrundsfärgen är vit */
				z-index: 2; 						
				} 

														
	/* FLIKARNAS utseende och placering .... nedan tipset från www.alistapart.com/articles/slidingdoors */
	
#sidhuvud		{ 									/* bakgrund  i sidhuvudet    */
				float:left; 						/* bakgrund  i sidhuvudet    */
				width: 792px;						/* bakgrundboxenss bredd  i sidhuvudet som nu ligger inom box_med_ram   */
				position:absolute;
				left:-1px;
				background: url("grafik/bg.gif") repeat-x bottom; /* linjen under knapparna som inte är aktiva */
				font-size:93%; 						/* typsnittets storlek  i sidhuvudet    */
				line-height:normal;					
				border: 0px solid #red; 			/*  ram rum flikarnas bakgrundsbox  */
				}
				
#sidhuvud ul	{									/* menyknapparnas placering på sidan från vänster räknat  */
				margin:0;
				padding:2px 235px 0;				/* stoppningen runt flikarna top-,  vänster- och 0 px i högermarginalen */ 
				list-style:none;					
				}
				
#sidhuvud li	{
				float:left; 
				background: url("grafik/norm_left.gif") no-repeat left top; /* ankring av den högra bakgrundsbilden "skjutdörren" */
				margin:0; 
				padding:0 0 0 9px;					/* textens fri utrymme i knappen; top-  höger - under - vänster */
				}
				
#sidhuvud a		{ 									/*  färgen på menyknappens typsnitt  */
				display:block; 
				background: url("grafik/norm_right.gif") no-repeat right top; /* ankring av vänstra bakgrundsbilden "skjutdörren" */
				padding:5px 10px 4px 1px;			/*  textens stoppning i knappen; top- höger- under- och vänsterkant */
				text-decoration:none;
				font-weight:bold; 					/*  fet typsnitt */
				color: #456; 						/*  färgen på typsnittet */
				} 
				
#sidhuvud #current		
				{ 
				background-image: url("grafik/norm_left_on.gif"); /* ankring av aktuell högra bakgrundsbilden "skjutdörren" */
				}    			
				
#sidhuvud #current a 	
				{ 
				background-image: url("grafik/norm_right_on.gif"); /* ankring av aktuell vänstra bakgrundsbilden "skjutdörren" */
				padding-bottom:5px;					
				}

				
	/* SLUT   FLIKARNAS utseende och placering ....  tipset från www.alistapart.com/articles/slidingdoors */


#textBox    	{
				background-color: #fdffe9;
				position:absolute;
				left: 60px;
				top:   53px;      					/* textboxarnas höjd över "havet"  */
				width:  700px;
				height: 475px;
				font-size:11px;
				font-family:verdana, arial,helvetica,sans-serif;
				text-align: left;
				line-height: 14px;  				/* radavståndet i textboxen  */
				visibility: visible;
				z-index: 3;
				overflow: visible;
				background: none;  					/* färgen på bakgrunden  */	
				border: 0px solid #red;
				padding-left: 5px;					
				}

#textBox_bildspel    	{
				background-color: #fdffe9;
				position:absolute;
				left: 150px;
				top:   303px;      					/* textboxarnas höjd över "havet"  */
				width:  600px;
				height: 250px;
				font-size:11px;
				font-family:verdana, arial,helvetica,sans-serif;
				text-align: left;
				line-height: 14px;  				/* radavståndet i textboxen  */
				visibility: visible;
				z-index: 3;
				overflow: visible;
				background: none;  					/* färgen på bakgrunden  */	
				border: 0px solid #blue;
				padding-left: 0px;					
				}
				
#textBox_expo_om    	{
				background-color: #fdffe9;
				position:absolute;
				left: 150px;
				top:   52px;      					/* textboxarnas höjd över "havet"  */
				width:  450px;
				height: 400px; 
				font-size:11px;
				font-family:verdana, arial,helvetica,sans-serif;
				text-align: left;
				line-height: 14px;  				/* radavståndet i textboxen  */
				visibility: visible;
				z-index: 3;
				overflow: visible;
				background: none;  					/* färgen på bakgrunden  */	
				border: 0px solid #red;
				}
				
			
#boxLogga		{
				position:absolute; 
				left:22px; 
				top:545px; 
				visibility: visible; 
				width: 100px; 
				height: 58px;
				background: #fff url("grafik/logga_rod.jpg");  	/* färgen på bakgrunden är vit, loggan inkapslad */
				no-repeat: left top 				}			/* ska var utan semikolon */

#sidfot			{
				font-family:verdana, arial,helvetica,sans-serif;
				background: #fff;  					/* färgen på bakgrunden  */
				color: #666;       					/* färgen på typsnittet */
				padding: 0px 0px 0px;
				text-align: top;
				font-size: 9px;
				font-weight: normal;
				color: #333;	
				visibility: visible;
				position: absolute;
				top: 588px;	
				left: 153px;						}


/* här kommer koden som styr bildarkivets expanderande meny från http://javascript.about.com/library/blclmenu.htm  */				
/*The mC class is a wrapper for the whole collapsible menu. The attributes define a 100 pixel wide menu with a 5 pixel 
margin aligned to the right of whatever contains the menu. You can change this as needed to put the menu where you want. */

.mC 			{
				position: absolute;
				top:121px;							/* marginalen till box_med_ramens överkant */
				left:-50px;							/* marginalen till box_med_ramens vänsterkant */
				width:105px; 
				margin:0px; 						
				border-top:0px dashed	 #C39C4E;
				border-bottom:1px dashed #C39C4E;
				background-color: #fafafa;				/* bakgrundsfärgen under huvudrubriken, dölja box_med_rams v-kant   */
				padding: 0px 0px 3px 3px;			/* stoppningen runt om huvudrubriekn  top, höger, botten och vänster  */														}

	/* The mH class defines the menu headings that always appear on the screen. You can change any of the attributes here 
	to make the headings look the way you want but I suggest leaving the cursor:pointer there so that your visitors will 
	know that the heading is clickable. The top border also helps to separate multiple collapsible menus. 				 */
.mH 			{
				color:#666;							/* Huvudrubrikens färg på typsnittet  */ 
				cursor:pointer;  
				font-weight: normal; 
				font-size: 100%;
				border-top:1px dashed #C39C4E;
				border-bottom:0px dashed #C39C4E;
				padding-bottom: 3px;
				padding-top: 3px;		}

				/*  The mL class is a wrapper for each of the menus that we are making collapsible. The display:none is needed to hide all 
				of the menus from view when the page is first displayed. The bottom margin ensures that the content underneath the 
				expanded menu is not hard up against the last entry in the menu. 
				  */
.mL 			{
				display:none; 
				margin-bottom:10px;					}

.mLkvar 		{
				display:block; 
				margin-bottom:10px;					}

.mL a:hover, .mL a:focus, .mLkvar a:hover, .mLkvar a:focus 			
				{
				color: #666; 
				background-color:yellow;				}
																	
	/**The mO class defines each of the options within each menu. display:block is needed here since links normally display 
	inline and we want each link on a separate line. The left margin indents the entries slightly from the headings. */

.mO 			{
				margin-left:10px; 					/* underrubrikens marginal från vänster   */
				display:block;	
				padding: 2px 0px 2px 0px;
				text-decoration: none;				/* ingen "länk-linje" under underrubrikerna  */
				font-size: 90%;						}
				
.mOskarp		{
				margin-left:10px; 					/* aktiv underrubrikens marginal från vänster   */
				display:block;	
				padding: 2px 0px 2px 0px;
				text-decoration: none;				/* ingen "länk-linje" under underrubrikerna  */
				font-size: 90%;
				color: #red;						}
				
				
				/*<!--  !Kod för bilderna för mina bildspelen  */		
.bildtext		{									/*  bildtexter under bilder i bildspelet  */
				font-family: Verdana, Arial, Helvetica, sans-serif; 
				font-size: 12px;
				color: black;
				text-align: center;					} 

.bildtxt_bok	{									/*  bildtexter under bilder i bokpresentationen  */
				font-family: Verdana, Arial, Helvetica, sans-serif; 
				font-size: 11px;
				color:  #666;
				text-align: center;
				float: right;
				padding: 0 0 0 0;			} 
				
.bildtxtproj	{									/*  bildtexter under bilder i bokpresentationen  */
				font-family: Verdana, Arial, Helvetica, sans-serif; 
				font-size: 11px;
				color:  #666;
				text-align: center;
				padding: 0 0 0 0;			
				} 
				
.brodtext		{									/*  brödtexten till bildspelet  */
				font-family: Verdana, Arial, Helvetica, sans-serif; 
				font-size: 11px;
				color: #black;
				padding: 0 10px 0 10px;	
				text-align: center;					/*  brödtexten under fliken bla Bildspel  */	
    			border: 0px solid #red;				
    			} 
				
.rubbe_expo		{									/*  huvudrubriken till entresidor  */
				font-family: Verdana, Arial, Helvetica, sans-serif; 
				font-size:42px;
				color: #999;	
				text-align: center;					/*  centrering av rubriken under fliken bl a Bildspel */	
				font-style: italic;
				font-variant: small-caps;			
				} 

.rubbe			{									/*  huvudrubriken till bildspelet  */
				font-family: Verdana, Arial, Helvetica, sans-serif; 
				font-size: x-large;
				color: #999;	
				text-align: center;					/*  centrering av rubriken under fliken bl a Bildspel */	
				font-style: italic;
				font-variant: small-caps;			
				} 

.startbildspel	{									/*  klicka här för att starta bildspelet  */
				font-family: Verdana, Arial, Helvetica, sans-serif; 
				font-size: 12px;
				color: #red;	
				text-align: center;	
				font-variant: small-caps;			
				} 
				
#tumnag			{
				float: left;
				width: auto;
				height: 180px;
				margin: 2px 2px 4px 2px;			/*  marginalerna mellan bildlagren  */
				padding: 3px 3px 0 3px;				/*  stoppningen mellan ramen och bilden  */
				border: 0px dotted red;			
				}
				
.tumnag_img		{
				float: left;
				border: 0px solid #red;
				margin: 3px 3px 0 3px;				
				border: 0px solid #red;			
				}
				
.tumnag p		{
				margin: 0;
				height: 3em;
				padding: 5px;						
				}
				

/*<!--  Kod för bilder och bildtexten för mina Senaste arkivbilderna  */		
div.imagecaption{
				float:left;
				width: 220px;
				margin: 0em 1em 1em 1em;
				display: inline;
				border: 1px solid blue;
				text-align: center;
				padding: 1px 10px 5px 10px;	
													
													}

div.imagecaption img{
				width: 200px;
				height: 200px;	
				border: 1px solid #yellow;
				}
								
div.imagecaption p	{
				text-align: left;
											}
								
				


/* här kommer koden från http://www.zinkwazi.com/wp/scripts/ ; som styr bildutställningen under fliken Expo*/
				
.image_info 	{
    			display:block;
    			font-size:10px;
    			color:#999;
    			border:0px;
    												}
.uppslag 		{									/*  boxen med uppslaget som rymmer all text och bild + tumnaglarna  */
				position:relative;
				top: 35px;
				left:25px;
    			margin:0px auto;
    			padding-top:0px;
    			padding-left:0px;
    			padding-right:0px;
    			padding-bottom:0px;
    			width:715px;
    			border: 0px solid #blue;
    			text-align:left;
													}
.show_title a 	{
				font-size:12px;
    			text-decoration:none;
    			color:#red;
       			   									}

.image_info a 	{
    			text-decoration:none;
    			color:#red;
   													}
img 			{
				border-width: 0px;
													}
.image 			{
    			margin-bottom:3px;
   													}
.image img 		{
    			padding:2px;						/* den vita ramen runt bilden 2 px stoppning */
    			border: 0px solid #000;
    			display:block;
    			background-color: #999;				/* bildens bakgrundsbox med grå färg */
    			margin-top: -5px;	
													}
.navigation, .navigation a {
				text-decoration: none;
    			color:#999;							/* bildtexten under bilden */
    			margin-top:4px;						/* marginalen mellan bildtexten och stora bilden */
    			font-weight: normal;	
													}				
.thumbnail_row {
    			margin-top: 1px;
													}
.thumbnail_row img {
    			border:0px solid #blue;				/*  ram runt alla tumnaglar - bortkopplad  */
    			margin-top:3px;						/* marginalen i topp för tumnaglarna */
													}
.thumbnail_center {
    			padding:1px;
    			border:1px solid #red !important;	/*  röd ram runt aktuell tumnagel  */
													}
.small, .small a {
    			margin-top: 20px;
    			text-decoration:none;
    			color:#777;							}
    			
    			
    			
/*
Boxen består av fyra divar inuti varandra med en bild i vardera hörn.
Den yttersta (första) div-taggen bestämmer boxens bredd, anger boxens bakgrundsfärg och visar bilden för det övre vänstra hörnet.
Den näst yttersta visar bilden med det övre högra hörnet.
Nästföljande div placerar bilden i det nedre högra hörnet.
Den sista div-taggen visar bilden i nedre vänstra hörnet och anger boxens padding.
För att undvika problem är det viktigt att boxens bredd och eventuell höjd enbart anges i den första div-taggen och att eventuell padding anges i den sista.
Koden hämtad från http://www.webbdesigndirekt.se/runda-horn-med-css/
*/

#rubrikbox{
	position: absolute;
	top:-33px;
	left:105px;
	width: 400px;
	height: 25px;
	border-left: 0px solid #999;
	border-right:  0px solid #666;
    background-color:#fcfdf6;			
	font-family: Verdana, Arial, Helvetica, sans-serif; 
	font-size: x-large;
	font-style: inherit;
	color: #333;	
	text-align: center;					/*  centrering av rubriken under fliken bl a Bildspel */	
	vertical-align:baseline;
	font-style: italic;
	font-variant: small-caps;	
	padding-top: 5px;	
	letter-spacing:6px;							}
    	
.rubrik{								/*  innehållet i boxen skrivs i denns div - den första, yttersta */
	margin-left: 20px;					
	margin-top: 8px;
	margin-bottom: 8px;
   	float: left;
    background:url(../grafik/lt.gif) 0 0 no-repeat; 
    background-color:#fcfdf6; 
   	width: 630px;					  			}
 	
.rubrik div {
    background:url() 100% 0 no-repeat;
	border-right: 0px solid #aaa;				}

.rubrik div div {
    background:url(../grafik/rb.gif) 100% 100% no-repeat;
	border-bottom: 0px solid #aaa;				}

.rubrik div div div {
    background:url() 0 100% no-repeat; 
    padding: 5px 0px 7px 15px;					}

#liten_bokbox img{
   	float: left;
   	padding-right:10px;							}

#liten_bokbox {
   	float: left;
   	margin-left: 200px;
    background:url(../grafik/lt.gif) 0 0 no-repeat; 
    background-color:#fcfdf6;
    display: inline;
   	width: 300px;								}
	
#liten_bokbox div {
    background:url() 100% 0 no-repeat;
	border-right: 0px solid #aaa;				}

#liten_bokbox div div {
    background:url(../grafk/rb.gif) 100% 100% no-repeat;
	border-bottom: 0px solid #aaa;				}

#liten_bokbox div div div {
    background:url() 0 100% no-repeat; 
    padding: 0px 10px 30px 10px;				}