/* -----------------   standard body-mall för alla webbsidor ---------------------------------- */
		
/*  ../infoga/css_mall.css   */

/* FLIKARNAS utseende och placering styrs av dokumentet ../navi.php  */
/* tipset från www.alistapart.com/articles/slidingdoors */



/*---- vitt  div-lager ------------CSS-KOD------------------------- den vita bakgrunden --------*/
																							/*--*/
body		{ 																				/*--*/
/*				background-color: #dbdbdb; 	/* 	bakgrundsfärgen vit standard alla hemsidor 	/*--*/
				background-color: #fff ; 	/* 	bakgrundsfärgen vit standard alla hemsidor 	/*--*/
	    		margin      :   0px;														/*--*/  
	    		padding-top :   0px;	  													/*--*/
				font-family : 	Verdana, Arial, Helvetica, sans-serif;						/*--*/
		   		font-size	: 	11px;     	/* 	storleken på typsnittet 					/*--*/
				}																			/*--*/
																							/*--*/
/*---- vitt  div-lager ------------><!--  ------------------------ slut vita bakgrunden --------*/
					
        
/*------------------  CSS-KOD -gråa div-lagret  ------------------------------------------------*/
																							/*--*/
#bodybox, #bodybox_bilderphp, #bodybox_bildphp												/*--*/
			{								/* 	bodybox ligger underst av alla lager, centrerar */ 
											/*	sidans innehåll till mitten på skärmen 			*/
	    		width       :  1000px;      /* 	innehållet ska rymmas inom 1000 px bredd 		*/
	    		height      :  640px;       /* 	innehållet ska rymmas inom  640 px höjd 		*/
	    		background  :  #fff;        /* 	lagrets bakgrundsfärg är vit 					*/
        	    position    :  static;													 	/*--*/
        	    margin      :  0px auto 0px auto;	/*	boxens marginal visavi andra boxar 		*/
        	    text-decoration: blink														/*--*/
        	    border-bottom: 2px solid #ccc;												/*--*/
        	    border-left :  1px solid #ccc;												/*--*/
        	    border-right:  1px solid #ccc;												/*--*/
        	    padding-left:  0px;															/*--*/
    		    border-radius: 15px;														/*--*/
				box-shadow  :  0px 15px 20px #888;											/*--*/
				scrollbar-track-color		:inherit;										/*--*/
				scrollbar-dark-shadow-color	:inherit:										/*--*/
        	    }																			/*--*/
																							/*--*/
#bodybox_bilderphp	{
				height     	:  840px;  	/* 	arkivets tittbild inom lagrets 840 px höjd      */
        		padding-left:  10px;															/*--*/
    		    }																			/*--*/
																							/*--*/
#bodybox_bildphp{	height 	:  650px;	    /* 	arkivets tittbild inom lagrets 650 px höjd      */
				width		:  825px;														/*--*/
				border-radius: 0px; 														/*--*/
    		    border-bottom-left-radius: 15px;											/*--*/ 
    		    border-bottom-right-radius: 15px; 											/*--*/
  	      		}																			/*--*/
  	      																					/*--*/
/*---- grått div-lager ----------><!------ slut bodybox, bodybox_bilderphp, bodybox_bildphp ----*/


/*-----------------  CSS-KOD -H1, H2, H3 - taggarna  -------------------------------------------*/
																				/*--- H1 H2 H3--*/
H1, H2		{																	
				width		:  999px; 											/*--- H1 H2 H3--*/
				height		:  50px;											/*--- H1 H2 H3--*/
				font-family	:  Arial, verdana, sans-serif;						/*--- H1 H2 H3--*/ 
				font-size	:  24px;											/*--- H1 H2 H3--*/
				font-weight	:  bold;  											/*--- H1 H2 H3--*/
				letter-spacing:5px; 											/*--- H1 H2 H3--*/
				color		:  gray; 											/*--- H1 H2 H3--*/
				text-align	:  center;											/*--- H1 H2 H3--*/
				padding		:  0px;												/*--- H1 H2 H3--*/
				margin-bottom: 0px;												/*--- H1 H2 H3--*/
				}																/*--- H1 H2 H3--*/
																				/*--- H1 H2 H3--*/
H2			{	width		:  600px;											/*--- H1 H2 H3--*/ 
				font-size	:  18px;											/*--- H1 H2 H3--*/
				}																/*--- H1 H2 H3--*/
																				/*--- H1 H2 H3--*/
/*-----------------  CSS-KOD -H1, H2, H3 - taggarna  ------------------- SLUT ------------------*/


/*-----------------  CSS-KOD -röda div-lagrens ramar  ------------------------------------------*/
																					/*--- röda--*/
#sidfot, #toppram,	#vansterram, #hogerram, #hogerram_css, #luft_i_vansterkanten, 
#vansterram_bild, #vansterram_css, #toppram_css										/*--- röda--*/
			{	border      :  0px solid red;}										/*--- röda--*/
																					/*--- röda--*/
#toppram_css 	{  
				position    :  absolute;											/*--- röda--*/	
			  	float       :  left;												/*--- röda--*/
				width   	:  1500px;		/* 		b+m+b =	(bred)	998+0+(0+0)= 998			*/
			  	height      :  30px;			/* 		b+m+b = (höjd)	17+3+(0+0) = 20			*/
				/*top			:  25px;
*/				text-align	:  center; 
			  	padding		:  5px 0px 2px 0px; 									/*--- röda--*/
			  	background-color: 	yellow;											/*--- röda--*/
	}																				/*--- röda--*/
																					/*--- röda--*/			  	
#toppram 	{  	position    :  relative;											/*--- röda--*/	
			  	float       :  left;												/*--- röda--*/
				width       :  998px;		/* 		b+m+b =	(bred)	998+0+(0+0)= 998			*/
			  	height      :  24px;			/* 		b+m+b = (höjd)	17+3+(0+0) = 20				*/
			  	padding		:  0px 0px 2px 0px; 									/*--- röda--*/
			  	text-align	:  center;
	}																				/*--- röda--*/
																					/*--- röda--*/			  	
#vansterram_css	{
				position	:  relative;
				float		: 	left;
				height		:  700px;
  		      	width       :  180px;												/*--- röda--*/
				margin-top	:  25px;
				background-color: red;
}

#vansterram, #vansterram_bild														/*--- röda--*/
				{		
				float     	:  left;												/*--- röda--*/				
  		      	width       :  230px;												/*--- röda--*/
  		      	height      :  580px;												/*--- röda--*/
    		    padding 	:  5px 0 0 0;											/*--- röda--*/
    		    }		   															/*--- röda--*/
																					/*--- röda--*/
#vansterram_bild{width      :  173px;			/* 	b+m+b =	(bred)	160+4+(0+0)=164				*/
			  	height      :  167px;			/* 	b+m+b = (höjd)	175+0+(0+0)=175				*/
    		    padding 	:  0px 0 0 0px;											/*--- röda--*/
   				margin-left	:  -9px;												/*--- röda--*/
   				}																	/*--- röda--*/
																					/*--- röda--*/
#hogerram{		float       :  left;												/*--- röda--*/
				width       :  761px;												/*--- röda--*/
				height      :  534px;												/*--- röda--*/
 	  		    padding 	:  10px 0 0 5px;										/*--- röda--*/
				background-color: #fff;
 			   	}																	/*--- röda--*/
																					/*--- röda--*/
#hogerram_css{	position	:  absolute;
				float       :  left;												/*--- röda--*/
				max-width	:  1500px;												/*--- röda--*/
				height      :  auto;
				margin		:  49px 0 0 182px;												/*--- röda--*/
 	  		    padding 	:  10px 0 0 5px;										/*--- röda--*/
				background-color: blue;
 			   	}																	/*--- röda--*/
																					/*--- röda--*/
#hogerram img{	border      :  1px solid #666;	/* ramen runt boxen är grå  					*/
 	     		box-shadow  :  0px 0px 10px #333;									/*--- röda--*/
				}																	/*--- röda--*/
																					/*--- röda--*/
#hogerram p{	font-size	:  9px; 												/*--- röda--*/
        		margin-right:  30px;												/*--- röda--*/
        		text-align  :  right; 												/*--- röda--*/
        		}																	/*--- röda--*/
																					/*--- röda--*/
#luft_i_vansterkanten
				{	position:  absolute;											/*--- röda--*/
        		float       :  left;												/*--- röda--*/
        		height      :  545px;												/*--- röda--*/
				width       :  70px;												/*--- röda--*/
        		top         :  180px;												/*--- röda--*/
        		margin-right:  0px;	
        		border      :  1px solid yellow;									/*--- röda--*/
        		}																	/*--- röda--*/
																					/*--- röda--*/
#sidfot 	{	float       :  left; 												/*--- röda--*/
    			height      :  39px; 												/*--- röda--*/
				width       :  766px;												/*--- röda--*/
				font-family :  verdana, arial,helvetica,sans-serif;  /* färgen på typsnittet 	*/
				font-size   :  10px;												/*--- röda--*/
				font-weight :  bold;												/*--- röda--*/
				visibility  :  visible;												/*--- röda--*/
				}																	/*--- röda--*/
																					/*--- röda--*/
/*---- rött  div-lager -- SLUT ----- topp-,vanster-,högerram,kontaktkart,sidfot,företagsnamn ---*/


/*------------------  CSS-KOD -blåa div-lagrens ramar  -----------------------------------------*/
																					/*--- blåa--*/
#foretagsnamn, #kontaktbox, #fskattbox_css, #sokbox, #H1, #H2, #moodboard, 			/*--- blåa--*/
#textBox_stor, #foretagsnamnet inom sidfoten, #foretagsadress inom sidfoten, 		/*--- blåa--*/
#textBox_stor, #bildram_css															/*--- blåa--*/
			
			{	border 		:  0px solid blue;  }									/*--- blåa--*/
																					/*--- blåa--*/
#foretagsnamn{	width		:  823px; 												/*--- blåa--*/
				height		:  15px; 												/*--- blåa--*/
				padding-top	:  5px;													/*--- blåa--*/
				text-align	:  center;												/*--- blåa--*/
				}																	/*--- blåa--*/
																					/*--- blåa--*/
#kontaktbox,																		/*--- blåa--*/
#fskattbox  {	position    :  absolute;											/*--- blåa--*/
     		   	width       :  335px;   		/* innehåll rymmas inom lagrets 135 px bredd 	*/
	 			height      :  15px;   			/* innehåll rymmas inom lagrets 15 px höjd 		*/
     		   	margin      :  7px 0 0 30px; 	/* räknat från top-, höger, botten- och vänster */
     		   	padding-left:  3px;													/*--- blåa--*/
     		   	font-style  :  italic;												/*--- blåa--*/
     		   	font-weight :  bold;												/*--- blåa--*/
     		   	font-size	:  9px; 												/*--- blåa--*/
     		   	}																	/*--- blåa--*/
	 																				/*--- blåa--*/
#fskattbox 	{	width       :  155px;   		/* innehåll rymmas inom lagrets 155 px bredd 	*/
	 			margin      :  7px 0 0 740px; 	/* boxens marginal enl. klockan					*/
     		   	}																	/*--- blåa--*/

#fskattbox_css{	position    :  relative;
				width   	:  255px;   		/* innehåll rymmas inom lagrets 155 px bredd 	*/
	 			height      :  15px;   			/* innehåll rymmas inom lagrets 15 px höjd 		*/
	 			margin      :  0 0 0 840px; 	/* boxens marginal enl. klockan					*/
				text-align	:  left;  
     		   	}																	/*--- blåa--*/
	 																				/*--- blåa--*/
#sokbox		{  	position    : relative;			/*  småbilderna på förstasidan  				*/
     		   	width       : 150px;												/*--- blåa--*/
     		   	height		: 60px;													/*--- blåa--*/
     		   	padding		: 0px; 													/*--- blåa--*/
     		   	margin-top	: 10px;				/*  marginalen överkant							*/
     		   	margin-left	: 10px;				/*  marginalen vänsterkant						*/
     		   	}																	/*--- blåa--*/
	 																				/*--- blåa--*/
#sokbox p		{padding-left: 10px;												/*--- blåa--*/ 
																					/*--- blåa--*/
				}																	/*--- blåa--*/
																					/*--- blåa--*/
#moodboard	{  	position    : relative;			/*  småbilderna p förstasidan  				*/
     		   	float       : left;													/*--- blåa--*/
     		   	top         : 0px; 													/*--- blåa--*/
     		   	left        : 0px;              /*  avståndet till vänsterramens vänsterkant  	*/
     		   	width       : 100px;												/*--- blåa--*/
     		   	height      : 150px;												/*--- blåa--*/
     		   	margin		: 0 0 22px 10px; 	/*  marginalen underkant å vänsterkant			*/
    		   	box-shadow  : 0px 0px 7px #333; 									/*--- blåa--*/
     		   	}																	/*--- blåa--*/
	 																				/*--- blåa--*/
/* koden nedan gäller tittbilderna i bildarkivet box+padd+bord = boxens totala yta i anspråk 	*/
																				/*-- bildarkiv--*/

#bildram_css	{margin-left: 200px;
}

#bildram, #bildram_css
		 	{	width   	: 160px;			/*	bredd ramen runt tittbilder (b+p+b=161px)	*/
                height  	: 177px;			/*	Höjd ramen runt tittbilder (b+p+b=178px)	*/
                float   	: left;												/*-- bildarkiv--*/
                padding		: 2px 0 0 0;										/*-- bildarkiv--*/
                border  	: 1px #ccc solid;	/*  yttre ramen runt tittbilderna				*/
                margin  	: 1px;												/*-- bildarkiv--*/
 		      	text-align	: center;			/*  bildens och textens placering i ramen		*/
				}

#bildram img	{
				box-shadow	: 3px 3px  10px rgba(0,0,0,0.5); /* vänsterförskjut., höger- å blurr*/
				-moz-box-shadow		: 3px 3px  10px rgba(0,0,0,0.5); 
				-webkit-box-shadow	: 3px 3px  10px rgba(0,0,0,0.5); 
				-o-box-shadow		: 3px 3px  10px rgba(0,0,0,0.5);
				}																/*-- bildarkiv--*/
																				/*-- bildarkiv--*/
#bildram_css img {	margin	: 6px 0 0 0px;										/*-- bildarkiv--*/
                box-shadow	: 0px 0px 5px #333;									/*-- bildarkiv--*/
                border  	: 2px #393939 solid;	/*  ramen runt tittbilderna			*/
                display		: inline 											/*-- bildarkiv--*/
                }																/*-- bildarkiv--*/
																				/*-- bildarkiv--*/
#bildram_css p   {	font-family	: verdana, arial,helvetica,sans-serif;			/*-- bildarkiv--*/
                font-size	: 9px;												/*-- bildarkiv--*/
                font-weight	: 200 ;												/*-- bildarkiv--*/
                margin		: 4px 0 0 0;										/*-- bildarkiv--*/
                }																/*-- bildarkiv--*/
																				/*-- bildarkiv--*/
/* SLUT  koden för bildarkivet   */												/*-- bildarkiv--*/
																					/*--- blåa--*/
#textBox_stor{	position    : relative;												/*--- blåa--*/
				width       : 750px;												/*--- blåa--*/
				height      : 500px;												/*--- blåa--*/
 				visibility  : visible;												/*--- blåa--*/
				padding     : 0px;													/*--- blåa--*/
				margin     	: 0px;													/*--- blåa--*/
              	overflow    : auto;													/*--- blåa--*/
                }																	/*--- blåa--*/
                																	/*--- blåa--*/
#textBox_stor p {font-size  : 10px;													/*--- blåa--*/
				font-family : verdana, arial,helvetica,sans-serif;					/*--- blåa--*/
				font-weight : normal; 												/*--- blåa--*/	
				text-align	: left;													/*--- blåa--*/
				margin-left	: 50px;													/*--- blåa--*/
				border 		: 0px solid blue; 										/*--- blåa--*/
				}																	/*--- blåa--*/
																					/*--- blåa--*/
#textBox_stor img{	border  : 1px solid #666;	/* ramen runt boxen är grå  					*/
 	     		box-shadow  : 5px 5px 20px #999;									/*--- blåa--*/
				}																	/*--- blåa--*/
																					/*--- blåa--*/
/*---- blått div-lager -------------- SLUT kontaktbox, fskattbox, sokbox, moodboard ------------*/





/*------------------  CSS-KOD -gula div-lagrens ramar  -----------------------------------------*/
#textBox_liten	{border     : 0px solid yellow;	}									/*--- gula--*/
																					/*--- gula--*/
.rubbe		{	border      : 0px solid yellow;										/*--- gula--*/
      		  	color       : #666;													/*--- gula--*/
      		  	font-family : Verdana, Arial, Helvetica, sans-serif;				/*--- gula--*/
	  			font-size   : 28px;													/*--- gula--*/
	  			font-style  : italic;												/*--- gula--*/
	  			font-variant: small-caps;											/*--- gula--*/
	  			font-weight : bold;													/*--- gula--*/
      		 	height      : 30px;													/*--- gula--*/
      		  	padding-top : 0px;				/*  stoppningen ovanför rubriken				*/	
      		  	margin-right: 190px;			/*  stoppningen ovanför rubriken				*/	
      		  	text-align  : center;           /*  centrering av rubriken 						*/
      		  	width       : auto;													/*--- gula--*/
	  			}																	/*--- gula--*/
																					/*--- gula--*/
.h1			{	border      : 0px solid yellow;										/*--- gula--*/
      		  	color       : #666;													/*--- gula--*/
      		  	font-family : Verdana, Arial, Helvetica, sans-serif;				/*--- gula--*/
	  			font-size   : 28px;													/*--- gula--*/
	  			font-style  : italic;												/*--- gula--*/
	  			font-variant: small-caps;											/*--- gula--*/
	  			font-weight : bold;													/*--- gula--*/
      		 	height      : 30px;													/*--- gula--*/
      		  	padding-top : 0px; 				/*  stoppningen ovanför rubriken				*/	
      		  	margin-right: 190px;			/*  stoppningen ovanför rubriken				*/	
      		  	text-align  : center;           /*  centrering av rubriken 						*/
      		  	width       : auto;													/*--- gula--*/
	  			}																	/*--- gula--*/
																					/*--- gula--*/
#textBox_liten img{float    : left;													/*--- gula--*/
                }																	/*--- gula--*/
																					/*--- gula--*/
#textBox_liten{	margin-left	: 0px;													/*--- gula--*/
				text-align  : left;													/*--- gula--*/
                text-decoration: none;												/*--- gula--*/
                }																	/*--- gula--*/
                              														/*--- gula--*/
#expoBox_entre{	border     	: 0px solid yellow;										/*--- gula--*/
 	            width      	: auto;													/*--- gula--*/
 	            float      	: left;													/*--- gula--*/
 	            position	: relative; 											/*--- gula--*/
 	            top			: 40px;													/*--- gula--*/
 	            margin-left	: 40px; 												/*--- gula--*/
 	            }																	/*--- gula--*/
																					/*--- gula--*/
/*---- gult  div-lager --------------------------- SLUT ----------------------------------------*/



div.gallery {
    border: 1px solid #ccc;
}

div.gallery:hover {
    border: 1px solid #777;
}

div.gallery img {
    width: 100%;
    height: auto;
}

div.desc {
    padding: 15px;
    text-align: center;
}

* {
    box-sizing: border-box;
}

.responsive {
    padding: 0 6px;
    float: left;
    width: 24.99999%;
}

@media only screen and (max-width: 700px){
    .responsive {
        width: 49.99999%;
        margin: 6px 0;
    }
}

@media only screen and (max-width: 500px){
    .responsive {
        width: 100%;
    }
}

.clearfix:after {
    content: "";
    display: table;
    clear: both;
}






/*---- divarna i färgordning från understa till översta ------------------------------------------>

<!---- vitt  div-lager ------------><!--  ------------------------- den vita bakgrunden ---------->
<!---- vitt  div-lager ------------><!--  ------------------------ slut vita bakgrunden ---------->

<!---- grått div-lager ----------><!--  --------- bodybox, bodybox_bilderphp, bodybox_bildphp ---->
<!---- grått div-lager ----------><!--  ---- slut bodybox, bodybox_bilderphp, bodybox_bildphp ---->

<!---- rött  div-lager --------><!--  - topp-,vanster-,högerram,kontaktkart,sidfot,företagsnamn -->

<!---- blått div-lager ------><!--  --------------kontaktbox, fskattbox, sokbox, moodboard ------->
<!---- blått div-lager ------><!--  -------- slut kontaktbox, fskattbox, sokbox, moodboard ------->

<!---- gult  div-lager ----><!--  ---------------------------------------------------------------->
<!---- gult  div-lager ----><!--  ---------------- slut ------------------------------------------>

<!---- grönt div-lager --><!--  ------------------------------------------------------------------>
<!---- grönt div-lager --><!--  ------------------ slut -----------------------------------------*/