@charset "UTF-8";
/* CSS Document */



/* ----------------------------- */
/* 1x1 Grid */

#Grid_1x1_710 { /* En fast ruta 710x710 p. Rutan flödar inte nedåt med mer text */
	position: relative;
	top: 0px;
	right: 0px;
	bottom: 0px;
	left: 0px;
	width: 710px;
	height: 710px; 
	margin: 10px;
	overflow: visible;
	}

#Grid_1x1_flow { /* En ruta 710x710 som flödar nedåt om texten behöver det */
	position: relative;
	top: 0px;
	right: 0px;
	bottom: 0px;
	left: 0px;
	width: 710px;
	height: auto; 
	margin: 10px;
	overflow: visible;
	}





/* ----------------------------- */
/* 2x2 Grid - 4 fasta rutor */

#Grid_2x2_4box_col1_row1 {	
	position: relative; /* pos:rel på kolumn 1 för att styra storlek på svart bakgrund*/
	float:none;
	top: 5px;
	right: auto;
	bottom: auto;
	left: 5px;
	width: 350px;
	height: 350px;
	margin: 5px;
	padding: 0px;
	}
	
#Grid_2x2_4box_col1_row2 { 
	position: relative; /* pos:rel på kolumn 1 för att styra storlek på svart bakgrund*/
	float:left;					/* float:left på kolumn 1 för att styra storlek på svart bakgrund nedtill*/
	top: 5px;
	right: auto;
	bottom: auto;
	left: 5px;
	width: 350px;
	height: 350px;
	margin-top: 5px;
	margin-right: 5px;
	margin-bottom: 15px;
	margin-left: 5px;
	padding: 0px;
	}
#Grid_2x2_4box_col2_row1 { /* pos:abs : rutans storlek redan satt i col1, nu vill vi ha exakt placering utan att påverka marg*/
	position: absolute;
	float:none;
	/*top: -705px; */
	top: 5px;   
	right: auto;
	bottom: auto;
	left: 365px;
	width: 350px;
	height: 350px;
	margin-top: 5px;
	margin-right: 5px;
	/*margin-bottom: -345px;*/
	margin-bottom: 5px;
	margin-left: 5px;
	
	}
	
#Grid_2x2_4box_col2_row2 {
	position: absolute; /* pos:abs : rutans storlek redan satt i col1, nu vill vi ha exakt placering utan att påverka marg*/
	float:none; 
	top: 365px; 
	right: auto;
	bottom: auto;
	left: 365px;
	width: 350px;
	height: 350px;
	margin-top: 5px;
	margin-right: 5px;
	margin-bottom: 5px;
	margin-left: 5px;
	padding: 0px;
	}	
	
/* 2x2 Grid - alternativ 1: vänsterkolumn full höjd*/ 
/* högerkolumn samma div:ar som en vanlig 4x4 */

#Grid_2x2_2-11_col1_high {	/* anpassad hög högerkolumn */
	position: relative;
	float:left;
	top: 5px;
	right: auto;
	bottom: auto;
	left: 5px;
	width: 350px;
	height: 710px;
	margin-top: 5px;
	margin-right: 5px;
	margin-bottom: 15px;
	margin-left: 5px;
	padding: 0px;
	}
	
/* 2x2 Grid - alternativ 2: höger full höjd*/ 
/* vänsterkolumn samma div:ar som en vanlig 4x4 */

#Grid_2x2_11-2_col2_high {	/* anpassad hög vänsterkolumn */
	position: absolute;
	float:none;
	top: 5px;
	right: auto;
	bottom: auto;
	left: 365px;
	width: 350px;
	height: 710px;
	margin-top: 5px;
	margin-right: 5px;
	margin-bottom: 5px;
	margin-left: 5px;
	padding: 0px;
	}
	
	
	
	
/* ----------------------------- */
/* 3x3 Grid */
#Grid_3x3_9box_col1_row1 {
	position: relative;
	float:none;
	top: 5px;
	right: auto;
	bottom: auto;
	left: 5px;
	width: 230px;
	height: 230px;
	margin: 5px;
	padding: 0px;
	}
	
#Grid_3x3_9box_col1_row2 {
	position: relative;
	float:none;
	top: 10px;
	right: auto;
	bottom: auto;
	left: 5px;
	width: 230px;
	height: 230px;
	margin: 5px;
	padding: 0px;
	}
	
#Grid_3x3_9box_col1_row3 {
	position: relative;
	float:left;
	top: 10px;
	right: auto;
	bottom: auto;
	left: 5px;
	width: 230px;
	height: 230px;
	margin-top: 5px;
	margin-right: 5px;
	margin-bottom: 20px;
	margin-left: 5px;
	padding: 0px;
	}	
	
#Grid_3x3_9box_col2_row1 { 
	position: absolute;
	float:none;
	top: 5px;  
	right: auto;
	bottom: auto;
	left: 245px;
	width: 230px;
	height: 230px;
	margin: 5px;
	padding: 0px;
	}	
	
#Grid_3x3_9box_col2_row2 { 
	position: absolute;
	float:none;
	top: 245px;  
	right: auto;
	bottom: auto;
	left: 245px;
	width: 230px;
	height: 230px;
	margin: 5px;
	padding: 0px;
	}		
	
#Grid_3x3_9box_col2_row3 { 
	position: absolute;
	float:none;
	top: 485px;   
	right: auto;
	bottom: auto;
	left: 245px;
	width: 230px;
	height: 230px;
	margin: 5px;
	padding: 0px;
	}	
	
#Grid_3x3_9box_col3_row1 { 
	position: absolute;
	float:none;
	top: 5px;   
	right: auto;
	bottom: auto;
	left: 485px;
	width: 230px;
	height: 230px;
	margin: 5px;
	padding: 0px;
	}			
	
#Grid_3x3_9box_col3_row2 { 
	position: absolute;
	float:none;
	top: 245px;   
	right: auto;
	bottom: auto;
	left: 485px;
	width: 230px;
	height: 230px;
	margin: 5px;
	padding: 0px;
	}		
	
#Grid_3x3_9box_col3_row3 { 
	position: absolute;
	float:none;
	top: 485px;  
	right: auto;
	bottom: auto;
	left: 485px;
	width: 230px;
	height: 230px;
	margin: 5px;
	padding: 0px;
	}		
	
	
	
/* 3x3 Grid - alternativ 1: vänsterkolumn full höjd*/ 
#Grid_3x3_3-111-111_col1_high { /* vänsterkolumn med anpassade marginaler för att kunna behålla övriga fält*/
	position: relative;
	float:left;
	top: 5px;
	right: auto;
	bottom: auto;
	left: 5px;
	width: 230px;
	height: 710px;
	margin-top: 5px;
	margin-right: 5px;
	margin-bottom: 15px;	/* större nedermarg för att kunna behålla övriga fält i normalformat */
	margin-left: 5px;
	padding: 0px;
	}	
	
/* 3x3 Grid - alternativ 2: mittkolumn i full höjd */	
#Grid_3x3_111-3-111_col2_high { /* negativ top + margin-bottom pga relativ pos mot pos1 */
	position: absolute;
	float:none;
	top: 5px;  
	right: auto;
	bottom: auto;
	left: 245px;
	width: 230px;
	height: 710px;
	margin: 5px;
	padding: 0px;
	}		
	
/* 3x3 Grid - alternativ 3: högerkolumn i full höjd */
#Grid_3x3_111-111-3_col3_high { /* negativ top + margin-bottom pga relativ pos mot pos1 */
	position: absolute;
	float:none;
	top: 5px;   
	right: auto;
	bottom: auto;
	left: 485px;
	width: 230px;
	height: 710px;
	margin: 5px;
	padding: 0px;
	}				
	
	
	
	
/* ----------------------------- */
/* stilklasser for att bestamma bakgrunder till grid-fält */

.Grid_black { /* vit text till grid-fält som lämnas med svart bakgrund */
	color: #ffffff; 
	font-size: 110%;
	}

.Grid_white {
	background-color:#ffffff;
	}
	
.Grid_alu50 {
	background-image: url(../img/layout/alu720x50.jpg);
	}
	
	
	
/* ----------------------------- */	
/* stilklasser för att använda bilder för att fylla ut rutor till minimihöjd */	

.SpacerVerticalFill { /* klass som sätts på spacerbilden */
	float:left;
	}	
	
.clear {							/* avsluta den div som ska fyllas ut med: <div class="clear"></div> */
    clear:both;
    height:1px;
    overflow:hidden;
  }