/* ========================== general rules for all pages */
*							{ margin:0; padding:0; font-weight:400; color:#333333; font-family: "Trebuchet MS", "Helvetica", "Sans-Serif"; }
body 						{ overflow-y:scroll; height:100%; }
@media screen and (max-width: 1024px) { body { font-size:12px; } }
@media screen and (min-width: 1024px) { body { font-size:13px; } }
@media screen and (min-width: 1210px) { body { font-size:14px; } }
a 							{ border:none; color:#3c98e5; text-decoration:none; }
a:hover 					{ border:none; color:#18b0e2; text-decoration:underline; }
.bold 						{ font-weight:700; }
.italic						{ font-style:italic; }
.italicBold					{ font-style:italic; font-weight:700; }
.italic_grey				{ font-style:italic; color:#666; }
.italic_white				{ font-style:italic; color:#FFF; }
.italic_blue				{ font-style:italic; color:#3c98e5; cursor:default; }
.clear						{ clear:both; }
.arrow						{ width:12px; }
.floatright					{ float:right; }
img 						{ border:none; }
h1							{ color:#3c98e5; font-style:italic; font-weight:700; padding-top:5px; }
h2							{ color:#3c98e5; font-style:italic; font-weight:500; }
.centered					{ text-align:center; }
.inline_image				{ vertical-align:middle; height:1em; }

/* ========================== header rules */
#header_bar					{ position:fixed; top:0; left:0; width:100%; height:50px; z-index:10; background-image:url(/graphics/MenuBarDark.jpg); background-repeat:repeat-x; }

	/* ========================== start position of the menu bar buttons + if we show all flags or just one */
	.header						{ position:absolute; top:0; z-index:15; }
		.header_flags			{ position:absolute; right:10px; top:10px; text-align:right; }
		.header_flags_small		{ position:absolute; } 
	@media screen and (max-width: 1100px) { /* for browser screen smaller than 1024 px wide */
	.header						{ left:13px; min-width:600px; /* force menu items on one line */ }
		.header_flags			{ z-index:-1; display:none; }
		.header_flags_small		{ right:10px; top:15px; z-index:20; width:75px; cursor:pointer; } }
	@media screen and (min-width: 1100px) { /* for browser screen bigger than 1024 px wide */
	.header						{ left:5%; }		
		.header_flags			{ z-index:20; display:block; }
		.header_flags_small		{ right:0; top:0; z-index:-1; display:none; } }
	.header_flag_img			{ width:48px; height:29px; float:right; }
	
	/* ========================== choosing language in case we are only showing one flag */
	.header_flags_drop_button	{ position:absolute; top:-5px; right:0; display:block; z-index:20; }
	@media screen and (max-width: 675px) {	
	#triangle_button			{ display:none; } }
	.header_flags_drop_menu		{ position:absolute; right:-5px; top:-10px; padding:5px 5px 5px 0px; display:none; z-index:20;
								  background-color:rgba(192,192,192,0.6); width:55px; text-align:right; border-radius:6px; }
	.header_flags_menu_x_button	{ cursor:pointer; background-image:url(/graphics/ClosePopup.png); height:28px; width:28px; position:absolute; top:5px; left:-23px; z-index:25; }
	
		/* ========================== menu items */
		/* add one here for < 660px to change the menu look for small screens */
		.header li 					{ list-style:none; float:left; height:50px; line-height:50px; margin:0 1px; background-image:url(/graphics/MenuBarLight.jpg)}
		.header li a 				{ display:block; color:#333333; font-size:13px; line-height:50px; text-decoration:none; } 
		@media screen and (max-width: 800px) { /* for browser screen smaller than 800 px wide */
		.header li a 				{ padding:0px 5px; } }
		@media screen and (min-width: 800px) { /* for browser screen bigger than 800 px wide */
		.header li a 				{ padding:0px 15px; } }
		.header li a:hover 			{ color:#000000; background:#f0f0f0; }
		.header li a.current 		{ color:#000000; background:#ffffff; font-size:13px; line-height:50px; text-decoration:none; padding:0px 15px; font-weight:bolder;}
	

/* ========================== the DIV that contains the pages */
#maincontent					{ position:relative; top:50px; /*as much as the header*/ } 
@media screen and (max-width: 1024px) { /* for browser screen smaller than 1024 px wide */
#maincontent					{ left:13px; width:96%; } }
@media screen and (min-width: 1024px) { /* for browser screen bigger than 1024 px wide */
#maincontent					{ left:5%; width:94%; } }

	/* ========================== left banner with optional menu */
	.banner									  	{ position:absolute; top:-30px; padding-bottom:60px; }
	h1#logo 								  	{ text-indent:-99999px; }
	.left-menu li 							  	{ list-style-type:none; background-color:#E3E3E3; overflow:hidden; cursor:pointer; }
	.left-menu li a							  	{ display:block; text-decoration:none; color:#333; }
	.left-menu li a:hover					  	{ background-color:#BBB; }
	.left-menu li.current				 	  	{ background-color:#BBB; } 
	.left-menu li #Search_input 			  	{ font-weight:700; color:#3c98e5; font-style:italic; border:none; font-size:1.5em; padding-left:5px; }
	.left-menu li #Search_input:focus 		  	{ outline: none; }
	.left-menu li #Search_Icon_Button 		  	{ display:block; float:right; }
	.left-menu li #Selector_Form select   	  	{ border:0 !important; -webkit-appearance:none; -moz-appearance:none; color:#3c98e5; }
	.left-menu li #Selector_Form select:focus 	{ outline: 0; } ; 
	.left-submenu li 						  	{ list-style-type:none; background-color:#E3E3E3; overflow:hidden; cursor:pointer; }
	.left-submenu li a						  	{ display:block; text-decoration:none; color:#333; }
	.left-submenu li a:hover				  	{ background-color:#BBB; }
	.left-submenu li.current				  	{ background-color:#BBB; } 
	@media screen and (max-width: 670px) { /* for browser screen smaller than 670 px wide */
	.banner										{ width:120px; } 
	.banner img									{ width:120px; }
		#Fidelix_logo							{ width:60px; }
		#Search_Icon							{ width:30px; }
		.left-menu li 							{ border-radius:0px; height:25px; margin-top:2px; }
		.left-menu li a							{ background:transparent url("/graphics/DoubleArrow_smallest.gif") no-repeat 4px 5px; font-size:10px; line-height:25px; padding-left:20px; } 
		.left-menu li #Search_input 			{ margin-left:2px; margin-top:2px; width:74%; height:1.14em; border-radius:0px; }	
		.left-menu li #Search_Icon_Button 		{ margin-top:4px; margin-right:3px; height:1.15em; }						  
		.left-menu li #Selector_Form select   	{ border-radius:0px; margin:2px; padding:0px 20px 3px 0px; font-size:1.2em; height:1.45em; width:78%; box-shadow:inset 0 0 1.5px #333;
												  background:#E3E3E3 url("/graphics/DoubleArrowRotated_smallest.gif") no-repeat 3px 3px; background-position:95% 50%;  } 		
		.left-submenu li						{ border-radius:0px; height:16px; margin-top:2px; }
		.left-submenu li a						{ background:transparent url("/graphics/DoubleArrow_smallest.gif") no-repeat 3px 3px; font-size:10px; line-height:16px; padding-left:16px; background-size:10px 10px; }
		.left-menu .left-submenu li				{ margin-left:8px; margin-right:8px; } }
	@media screen and (min-width: 670px) and (max-width: 1024px) { /* for browser screen between 670 and 1024 px wide */
	.banner										{ width:150px; } 
	.banner img									{ width:150px; }
		#Fidelix_logo							{ width:70px; }
		#Search_Icon							{ width:40px; }
		.left-menu li 							{ border-radius:6px; height:30px; margin-top:2px; }
		.left-menu li a							{ background:transparent url("/graphics/DoubleArrow_smaller.gif") no-repeat 5px 5px; font-size:12px; line-height:30px; padding-left:30px; } 
		.left-menu li #Search_input 			{ margin-left:3px; margin-top:3px; width:75%; height:1.32em; border-radius:4px; }	
		.left-menu li #Search_Icon_Button 		{ margin-top:6px; margin-right:4px; height:1.32em; }						  
		.left-menu li #Selector_Form select   	{ border-radius:5px; margin:2px; padding:0px 23px 3px 0px; font-size:1.4em; height:1.55em; width:80%; box-shadow:inset 0 0 2px #333;
												  background:#E3E3E3 url("/graphics/DoubleArrowRotated_smaller.gif") no-repeat 3px 3px; background-position:95% 50%;  } 		
		.left-submenu li						{ border-radius:0px; height:20px; margin-top:2px; }
		.left-submenu li a						{ background:transparent url("/graphics/DoubleArrow_smaller.gif") no-repeat 4px 4px; font-size:12px; line-height:20px; padding-left:22px; background-size:14px 14px; } 
		.left-menu .left-submenu li				{ margin-left:11px; margin-right:11px; } }
	@media screen and (min-width: 1024px) and (max-width: 1210px) { /* for browser screen between 1024 and 1210 px wide */
	.banner										{ width:200px; } 
	.banner img									{ width:200px; }
		#Fidelix_logo							{ width:95px; }
		#Search_Icon							{ width:50px; }
		.left-menu li 							{ border-radius:10px; height:50px; margin-top:5px; }
		.left-menu li a							{ background:transparent url("/graphics/DoubleArrow_small.gif") no-repeat 10px 10px; font-size:14px; line-height:50px; padding-left:45px; } 
		.left-menu li #Search_input 			{ margin-left:5px; margin-top:5px; width:72%; height:2.04em; border-radius:6px; }	
		.left-menu li #Search_Icon_Button 		{ margin-top:11px; margin-right:8px; height:2.04em; }						  
		.left-menu li #Selector_Form select   	{ border-radius:7px; margin:5px; padding:5px 37px 5px 1px; font-size:1.5em; height:2em; width:75%; box-shadow:inset 0 0 3px #333;
												  background:#E3E3E3 url("/graphics/DoubleArrowRotated_small.gif") no-repeat 3px 3px; background-position:95% 50%;  } 		
		.left-submenu li						{ border-radius:10px; height:35px; margin-top:5px;  }
		.left-submenu li a						{ background:transparent url("/graphics/DoubleArrow_small.gif") no-repeat 6px 5px; font-size:14px; line-height:35px; padding-left:38px; background-size:25px 25px; } 
		.left-menu .left-submenu li				{ margin-left:18px; margin-right:18px; } }
	@media screen and (min-width: 1210px) {
	.banner										{ width:250px; } 
	.banner img									{ width:250px; }
		#Fidelix_logo							{ width:105px; }
		#Search_Icon							{ width:55px; }
		.left-menu li 							{ border-radius:13px; height:60px; margin-top:10px; }
		.left-menu li a							{ background:transparent url("/graphics/DoubleArrow.gif") no-repeat 10px 10px; font-size:16px; line-height:60px; padding-left:60px; } 
		.left-menu li #Search_input 			{ margin-left:7px; margin-top:7px; width:74%; height:2.16em; border-radius:7px; }	
		.left-menu li #Search_Icon_Button 		{ margin-top:14px; margin-right:11px; height:2.16em; }						  
		.left-menu li #Selector_Form select   	{ border-radius:8px; margin:7px; padding:5px 37px 5px 2px; font-size:1.5em; height:2.18em; width:76%; box-shadow:inset 0 0 5px #333;
												  background:#E3E3E3 url("/graphics/DoubleArrowRotated_small.gif") no-repeat 3px 3px; background-position:95% 50%;  } 		
		.left-submenu li						{ border-radius:0px; height:43px; margin-top:10px; }
		.left-submenu li a						{ background:transparent url("/graphics/DoubleArrow.gif") no-repeat 6px 5px; font-size:16px; line-height:43px; padding-left:45px; background-size:32px 32px; } 
		.left-menu .left-submenu li				{ margin-left:28px; margin-right:28px; } }

	
	/* ========================== breadcrums */
	.breadcrums							{ position:relative; width:0; color:#777; white-space:nowrap; }
		@media screen and (max-width: 670px) 							{ .breadcrums { left:120px; font-size:10px; } }
		@media screen and (min-width: 670px)  and (max-width: 1024px) 	{ .breadcrums { left:150px; font-size:10px; } }
		@media screen and (min-width: 1024px) and (max-width: 1210px) 	{ .breadcrums { left:215px; font-size:11px; } }
		@media screen and (min-width: 1210px) 							{ .breadcrums { left:300px; font-size:13px; } }
	.breadcrums a						{ color:#777; }
	.breadcrums span#product_category	{ color:#777; }
	
	/* ========================== Home page content window */
	#FADERcontainer					{ position:absolute; height:30em; }
	#PhotoFader 					{ width:100%; max-width:966px; height:100%; max-height:800px; }
	#PhotoFader img 				{ position:absolute; left:0; top:0; max-width:100%; max-height:100%; }
		@media screen and (max-width: 530px) 							{ #FADERcontainer { left:5%; right:10%; top:250px; } }
		@media screen and (min-width: 530px)  and (max-width: 670px) 	{ #FADERcontainer { left:5%; right:10%; top:160px; } }
		@media screen and (min-width: 670px)  and (max-width: 830px) 	{ #FADERcontainer { left:5%; right:15%; top:150px; } }
		@media screen and (min-width: 830px)  and (max-width: 1024px) 	{ #FADERcontainer { left:5%; right:15%; top:130px; } }
		@media screen and (min-width: 1024px) and (max-width: 1210px) 	{ #FADERcontainer { left:5%; right:20%; top:180px; } }
		@media screen and (min-width: 1210px) 							{ #FADERcontainer { left:5%; right:20%; top:150px; } }



/******************************************************************************************************************************************************************************************************************************************************************************/
	#button_container				{ height:105px; position:fixed; left:0; right:0; bottom:50px; background-color:#FFF; border-radius:10px; padding:5px 10% 5px 10%; }
	.homepage_button				{ width:28%; height:80%; border-radius:10px; box-shadow:3px 3px 5px #999; float:left; margin-right:10px; border:5px solid; border-color:#3C98E5; margin-bottom:10px; 
									  padding:0px 5px 10px 5px; overflow:hidden; text-overflow:ellipsis; white-space:normal; }
	.homepage_button h3				{ color:#3c98e5; font-style:italic; font-weight:700;  }									  
		@media screen and (max-width: 875px) 							{ .homepage_button { margin-right:6px; } #button_container { padding:5px 10% 5px 10%; } }
		@media screen and (max-width: 620px) 							{ #button_container { padding:5px 5% 5px 5%; } }
		@media screen and (max-width: 560px) 							{ #button_container { padding:5px 2% 5px 2%; } .homepage_button { margin-right:4px; box-shadow:0 0 0 #FFF; } }
		@media screen and (max-width: 490px) 							{ #button_container { padding:5px 2% 5px 2%; } .homepage_button { width:25%; } }
		
	.homepage_button#image_button	{ background-image:url(/graphics/logo_OIVA_FI.png); background-position:center; background-repeat:no-repeat; background-size:contain; }
/******************************************************************************************************************************************************************************************************************************************************************************/



	/* ========================== main content window, without menu bars */
	.content							{ position:absolute; right:0;  } 
	
		@media screen and (max-width: 670px) { /* for browser screen smaller than 670 px wide */
		.content									{ left:120px; padding-left:5px; } 
		.content#FullPageContent					{ left:75px; padding-left:0; }
		.content h1									{ font-size:22px; }
		.content#homepage h1						{ font-size:26px; padding-top:15px; }
		.content#FullPageContent h1					{ left:45px; }
		.content#FullPageContent .take_no_space		{ left:45px; }
		.content h2									{ font-size:14px; padding-top:7px; } }
		@media screen and (min-width: 670px) and (max-width: 1024px) { /* for browser screen between 670 and 1024 px wide */
		.content									{ left:150px; padding-left:5px; } 
		.content#FullPageContent					{ left:100px; padding-left:0; }
		.content h1									{ font-size:22px; }
		.content#homepage h1						{ font-size:26px; padding-top:15px; }
		.content#FullPageContent h1					{ left:50px; }
		.content#FullPageContent .take_no_space		{ left:50px; }
		.content h2									{ font-size:16px; padding-top:5px; } }
		@media screen and (min-width: 1024px) and (max-width: 1210px) { /* for browser screen between 1024 and 1210 px wide */
		.content									{ left:200px; padding-left:15px; } 
		.content#FullPageContent					{ left:115px; padding-left:0; }
		.content h1									{ font-size:26px; }
		.content#homepage h1						{ font-size:32px; padding-top:15px; }
		.content#FullPageContent h1 				{ left:100px; }
		.content#FullPageContent .take_no_space 	{ left:100px; }
		.content h2									{ font-size:18px; padding-top:15px; padding-bottom:5px; } }
		@media screen and (min-width: 1210px) {
		.content									{ left:300px; padding-left:5px; top:50px; } 
		.content#FullPageContent					{ left:150px; padding-left:0; top:35px; }
		.content h1									{ font-size:26px; }
		.content#homepage h1						{ font-size:32px; padding-top:15px; }
		.content#FullPageContent h1					{ left:150px; }
		.content#FullPageContent .take_no_space		{ left:150px; }
		.content h2									{ font-size:20px; padding-top:10px; padding-bottom:15px; } }
	
	.content#FullPageContent h1			{ position:relative; cursor:pointer; }	
	.content#FullPageContent h1#related	{ cursor:auto; left:auto; }	
	.content#FullPageContent h1#prh1	{ max-width:calc(100% - 200px); } 	
	
	.content#AJAX_DIV_international img#partnerlogo	{ position:absolute; left:11em; top:10em; width:13em; }

			/* ========================== inside the "<div class="content">", after the "<h1>Title</h1>", this DIV is placed */
			#actual_content				{ }
			#actual_content h4			{ color:#666666; font-style:italic; }
			
			@media screen and (max-width: 670px) { /* for browser screen smaller than 670 px wide */
			#actual_content h2			{ padding-top:15px; padding-bottom:8px; }
			#actual_content h3			{ font-size:13px; } 
			#actual_content h4			{ font-size:13px; } }
			@media screen and (min-width: 670px) and (max-width: 1024px) { /* for browser screen between 670 and 1024 px wide */
			#actual_content h2			{ padding-top:20px; padding-bottom:12px; line-height:21px; }
			#actual_content h3			{ font-size:14px; }  
			#actual_content h4			{ font-size:14px; } }
			@media screen and (min-width: 1024px) and (max-width: 1210px) { /* for browser screen between 1024 and 1210 px wide */
			#actual_content h2			{ padding-top:25px; padding-bottom:16px; line-height:21px; }
			#actual_content h3			{ font-size:14px; }  
			#actual_content h4			{ font-size:16px; } }
			@media screen and (min-width: 1210px) {
			#actual_content h2			{ padding-top:30px; padding-bottom:20px; }
			#actual_content h3			{ font-size:14px; } 
			#actual_content h4			{ font-size:17px; } }
			
			#actual_content .first 		{ padding-top:0; margin-top:-5px; }
			
			#actual_content #logos 		{ -webkit-transform-style:preserve-3d; -moz-transform-style:preserve-3d; transform-style:preserve-3d; }
			
			@media screen and (max-width: 1050px) { #actual_content #logos { width:65%; } } /* This is used on the Finnish "company" page to contain the special logo's */
			@media screen and (max-width: 830px)  { #actual_content #logos { width:80%; } } 
			@media screen and (max-width: 710px)  { #actual_content #logos { width:100%; } } 
			@media screen and (max-width: 570px)  { #actual_content #logos { width:75%; } } 
			/* ========================== "products" page related elements */
			.take_no_space							{ position:relative; width:0; height:0; white-space:nowrap; }
			#slow_internet_message					{ position:absolute; white-space:normal; width:210px; text-align:right; top:0; vertical-align:top; height:50px; display:table; cursor:pointer; right:0; }
			#slow_internet_message img				{ height:50px; float:right; }
			#slow_internet_message span				{ vertical-align:middle; display:table-cell; padding-right:5px; }
				@media screen and (max-width: 1024px) 							{ .content#FullPageContent .take_no_space#slow_internet_message { font-size:10px; right:0; left:auto; } }
				@media screen and (min-width: 1024px) and (max-width: 1210px) 	{ .content#FullPageContent .take_no_space#slow_internet_message { font-size:11px; right:0; left:auto; } }
				@media screen and (min-width: 1210px) 							{ .content#FullPageContent .take_no_space#slow_internet_message { font-size:13px; right:0; left:auto; width:320px; } }
			

			.products_header						{ position:relative; top:-85px; height:165px; z-index:-1; }
			.products_header .title					{ position:absolute; float:left; }	
			.products_header .rot					{ position:absolute; float:left; }
				
				/* ========================== rotated titles */
				div#ulist 						{ overflow:hidden; height:175px; /* the actual length of the longest word */ margin-bottom:-12.5px; }
				ul#rotated-list li 				{ list-style-type:none;	float:left; }
				ul#rotated-list li span 		{ -webkit-transform:rotate(300deg); -moz-transform:rotate(300deg); -ms-transform:rotate(300deg); 
												  -o-transform:rotate(300deg); transform:rotate(300deg); font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif; 
												  width:350px; /* twice the actual length of the longest word; rotation is done around the center... */ display:block; }	
					
			.products_2nd_title			{ position:relative; top:-80px; margin-top:15px; }
			.products_content			{ position:relative; top:-85px; border:solid 1px #ccc; }
			.products_content .name				{ border:#CCC; border-style:solid; border-width:1px; float:left; }
			.products_content .description		{ border:#CCC; border-style:solid; border-width:1px; float:left; overflow:hidden; }
			.products_content .description_wide	{ border:#CCC; border-style:solid; border-width:1px; float:left; overflow:hidden; }
			.products_content .sheets			{ border:#CCC; border-style:solid; border-width:1px; float:left; }
			#linki								{ margin-top:2px; float:left;} 
			@media screen and (max-width: 950px) {
			.products_header .title				{ top:140px; }	
			.products_header .rot				{ left:343px; width:310px; }	
			ul#rotated-list li 					{ width:20.5px; }
			.products_2nd_title 				{ top:-85px;  } 
			.products_content					{ width:613px; }
			.products_content .name				{ padding:3px; height:18px; width:83px; }
			.products_content .description		{ padding:3px; height:18px; width:320px; overflow:hidden; }
			.products_content .description_wide	{ padding:3px; height:18px; width:514px; overflow:hidden; }
			.products_content .sheets			{ padding:3px 3px 3px 9px; height:18px; width:180px; }
			#linki								{ width:20px; }
			#linki img							{ width:12px; } 
			.products_content#wider_products_table .name { width:130px; }
			.products_content#wider_products_table .description_wide { width:467px; } }
			
			@media screen and (min-width: 950px) and (max-width: 1340px) {
			.products_header .title				{ top:128px; }	
			.products_header .rot				{ left:411px; width:380px; }	
			ul#rotated-list li 					{ width:27px; }
			.products_content					{ width:755px; }
			.products_content .name				{ padding:5px; height:20px; width:100px; }
			.products_content .description		{ padding:5px; height:20px; width:360px; overflow:hidden; }
			.products_content .description_wide	{ padding:5px; height:20px; width:631px; overflow:hidden; }
			.products_content .sheets			{ padding:5px 5px 5px 10px; height:20px; width:254px; }
			#linki								{ width:27px; }
			#linki img							{ width:16px; } 
			.products_content#wider_products_table .name { width:150px; }
			.products_content#wider_products_table .description_wide { width:581px; } }
			
			@media screen and (min-width: 950px) and (max-width: 1023px) {
			.products_2nd_title 				{ top:-95px;  } }

			@media screen and (min-width: 1024px) and (max-width: 1210px) {
			.products_2nd_title 				{ top:-78px;  } }
			
			@media screen and (min-width: 1211px) and (max-width: 1339px) {
			.products_2nd_title 				{ top:-70px;  } }
			
			@media screen and (min-width: 1340px) {
			.products_header .title				{ top:132px; }	
			.products_header .rot				{ left:560px; width:430px; }	
			ul#rotated-list li 					{ width:35px; }
			.products_2nd_title					{ top:-68px; }
			.products_content					{ width:972px; }
			.products_content .name				{ padding:8px; height:25px; width:140px; }
			.products_content .description		{ padding:8px; height:25px; width:450px; overflow:hidden; font-size:14px; }
			.products_content .description_wide	{ padding:8px; height:25px; width:796px; overflow:hidden; }
			.products_content .sheets			{ padding:8px 8px 8px 15px; height:25px; width:321px; }
			#linki								{ width:35px; }
			#linki img							{ width:23px; }
			.products_content#wider_products_table .name { width:180px; }
			.products_content#wider_products_table .description_wide { width:756px; } }


			/* ========================== inside the "<div class="content">", after the "<h1>Title</h1>", this DIV is placed, just like the "#actualContent" DIV */
			/* this is used on teh "products" page for the photos of the products */
			#FullPageCoverBanner				{ position:relative; top:50px; }
				@media screen and (max-width: 670px) 							{ #FullPageCoverBanner { left: -75px; width:calc(100% +  75px); top:25px; } }
				@media screen and (min-width: 670px) and (max-width: 1024px) 	{ #FullPageCoverBanner { left:-100px; width:calc(100% + 100px); top:35px; } }
				@media screen and (min-width: 1024px) and (max-width: 1210px) 	{ #FullPageCoverBanner { left:-115px; width:calc(100% + 115px); } }
				@media screen and (min-width: 1210px) 							{ #FullPageCoverBanner { left:-150px; width:calc(100% + 150px); } }	
			
			#FullPageCoverBanner .MenuButtons									{ width:28%; min-width:300px; max-width:450px; display:inline-block; height:10em; margin:1.25em 1em 0 0; border-radius:1em; 
																				  padding:1em; background-color:#E3E3E3; position:relative; cursor:pointer; }
			#FullPageCoverBanner .MenuButtons:hover								{ background-color:#999; }
			#FullPageCoverBanner .MenuButtons:hover	h1							{ color:white; }
			#FullPageCoverBanner .MenuButtons:hover	p#text						{ color:#3c98e5; }
			
			#FullPageCoverBanner .MenuButtonActive								{ background-color:#999; }								  		
				@media screen and (max-width: 720px) /* (2 x 300) + space */							{ #FullPageCoverBanner .MenuButtons { width:95%; max-width:95%; } }
				@media screen and (min-width: 720px) and (max-width: 1115px) /* (3 x 300) + space */	{ #FullPageCoverBanner .MenuButtons { width:44%; } }
				@media screen and (min-width:1650px) and (max-width: 2125px) /* (3 x 450) + space */	{ #FullPageCoverBanner .MenuButtons { max-width:30%; } }
				@media screen and (min-width:2125px) 													{ #FullPageCoverBanner .MenuButtons { } }
			#FullPageCoverBanner .MenuButtons h1								{ position:absolute; padding:0; padding-left:0.5em; padding-right:0.5em; z-index:3; 
																				  background-color:rgba(195, 195, 195, 0.8); border-radius:0.4em; left:0.5em; right:0.5em; max-width:425px; }
			#FullPageCoverBanner .MenuButtons p#text							{ position:absolute; bottom:1em; color:white; }
			#FullPageCoverBanner .MenuButtons img								{ position:absolute; right:1em; bottom:0.5em; height:11em; z-index:2; }
				
			/* ========================== and then the actual "full screen" products */
			#FullPageCoverContent												{ position:relative; left:12em; top:-0.5em; width:calc(100% - 160px); display:none; }
				@media screen and (min-width:1024px) and (max-width:1210px) 	{ #FullPageCoverContent { left:13em; } }																				  
				@media screen and (min-width: 670px) and (max-width:1024px) 	{ #FullPageCoverContent { left:15em; } }  																				  
				@media screen and (max-width: 670px) 							{ #FullPageCoverContent { left:15em; } }  
			
			#FullPageCoverContent h1											{}				
			#FullPageCoverContent .ItemButton									{ width:90%; display:inline-block; height:4.75em; margin: 0 1em 3em 0; padding:1em; position:relative;  
																				  border:1px solid #3c98e5; max-width:1200px; }
			#FullPageCoverContent .ItemButton h1								{ position:absolute; padding:0; padding-left:0.25em; padding-right:0.25em; z-index:10; cursor:auto; 
																				  left:0.2em; top:0.25em; max-width:425px; }
			#FullPageCoverContent .ItemButton .text								{ position:absolute; top:3.25em; width:83%; }
			#FullPageCoverContent .ItemButton img								{ position:absolute; right:1em; top:0.5em; height:6em; z-index:2; cursor:pointer !important; }
			#FullPageCoverContent .ItemButton .flags							{ position:absolute; top:3.5em; z-index:3; vertical-align:top; padding-top:0.5em; color:#3c98e5; }
			#FullPageCoverContent .ItemButton .flags .flagsDownloadTxt			{ position:relative; top:0.25em; color:#3c98e5; cursor:pointer !important; }
			#FullPageCoverContent .ItemButton .flags .datasheet_flags			{ visibility:hidden; }
			#FullPageCoverContent .ItemButton .flags span.NOflagsTxt			{ position:relative; top:0.75em; }
			#FullPageCoverContent .ItemButton .flags img						{ position:relative; top:0.75em; width:30px; height:auto; left:0; }
			#FullPageCoverContent .ItemButton .flags img.arrows					{ position:relative; top:0.6em; width:1.25em; height:auto; cursor:pointer !important; }

			#FullPageCoverContent .ItemButton_wInfo								{ height:6.25em; }
			#FullPageCoverContent .ItemButton_wInfo span.info_txt				{ position:absolute; top:6.4em; left:2.5em; color:#AAA; }
			#FullPageCoverContent .ItemButton_wInfo img.info_icon				{ position:absolute; top:6.4em; left:1em; height:1.25em; opacity:0.5; }
			
			#FullPageCoverContent .ItemButton_longInfo							{ height:7.5em; }
			
			#FullPageCoverContent img.product_arrows							{ position:relative; top:0.15em; height:1.15em; }
			#FullPageCoverContent img#productsInfoIcon							{ position:relative; left:1em; }
			
			#FullPageCoverContent h2											{ padding-left:2.5em; position:relative; top:-1.8em; }
				@media screen and (min-width: 1024px) and (max-width: 1210px) 	{ #FullPageCoverContent h2 { top:-2.2em; } }	
			
			/* ========================== "contact" page related elements */
			.google_maps_link			{ text-align:left; }
			#Russian_Contact			{ text-align:center; padding-bottom:15px; }
			#RU_1_of_2.contact_colums	{ width:40%; padding-right:5%; text-align:right; }				 
			#RU_2_of_2.contact_colums	{ width:40%; padding-left:10%; }
				@media screen and (max-width: 812px) { #RU_2_of_2.contact_colums h2 {padding-bottom:2.2em;} }				 


			#google_maps_English		{ width:90%; }
				@media screen and (max-width: 610px) 						{ #google_maps_Russian, #google_maps_English { width:400px; height:180px; } #Russian_Contact { width:400px; } }
				@media screen and (min-width: 610px) and (max-width: 700px) { #google_maps_Russian, #google_maps_English { width:450px; height:200px; } #Russian_Contact { width:450px; } }
				@media screen and (min-width: 700px) and (max-width: 800px) { #google_maps_Russian, #google_maps_English { width:500px; height:250px; } #Russian_Contact { width:500px; } }
				@media screen and (min-width: 800px) and (max-width: 900px) { #google_maps_Russian, #google_maps_English { width:600px; height:300px; } #Russian_Contact { width:600px; } }
				@media screen and (min-width: 900px) and (max-width:1100px) { #google_maps_Russian, #google_maps_English { width:700px; height:350px; } #Russian_Contact { width:700px; } }
				@media screen and (min-width:1100px) and (max-width:1300px) { #google_maps_Russian, #google_maps_English { width:800px; height:400px; } #Russian_Contact { width:800px; } }
				@media screen and (min-width:1300px)  						{ #google_maps_Russian, #google_maps_English { width:90%;   height:500px; } #Russian_Contact { width:90%; } }
			
			#contactForm				{ float:left; width:60%; }
			#contactImg_EN				{ float:left; width:250px; padding-left:50px; padding-top:50px; }
			#contactImg_EN img			{ width:100%; }
				@media screen and (max-width: 860px) 						{ #contactForm { width:100%; } #contactImg_EN { display:none; } }
				@media screen and (min-width: 860px) and (max-width: 920px) { #contactForm { width:70%;  } #contactImg_EN { width:150px; padding-left:20px; } }
				@media screen and (min-width: 920px) and (max-width:1100px) { #contactForm { width:65%;  } #contactImg_EN { width:200px; padding-left:30px; } }
				@media screen and (min-width:1313px) and (max-width:1450px) { #contactForm { width:50%;  } #contactImg_EN { width:350px; padding-left:75px;  padding-top:10px; } }
				@media screen and (min-width:1450px) and (max-width:1600px) { #contactForm { width:50%;  } #contactImg_EN { width:400px; padding-left:85px;  padding-top:0; } }
				@media screen and (min-width:1600px) and (max-width:1900px) { #contactForm { width:50%;  } #contactImg_EN { width:450px; padding-left:100px; margin-top:-20px; } }
				@media screen and (min-width:1900px) 		 				{ #contactForm { width:50%;  } #contactImg_EN { width:550px; padding-left:125px; margin-top:-50px; } }

 				#contactForm #contactFormError 	{ width:90%; background-color:#3c98e5; padding:15px; border-radius:15px; margin-left:2.5%; }
 				#contactForm #contactFormError p{ color:white; font-size:1.2em; }

				#contactForm table  			{ width:100%; }
				#contactForm table td.legenda	{ vertical-align:top; min-width:180px; width:35%; }
				#contactForm table td.formfields{ width:65%; }
					@media screen and (max-width: 610px) 					{ #contactForm table td.legenda {min-width:100px;} }
				
			input.contactforminput, textarea.contactforminput
										{ width:100%; font-family:"Trebuchet MS", "Helvetica", "Sans-Serif"; font-style:italic; font-weight: 400; color:#333333; }  
			input.contactformcorrect, textarea.contactformcorrect
										{ width:100%; font-family:"Trebuchet MS", "Helvetica", "Sans-Serif"; font-style:italic; font-weight: 400; color:#333333; border: 1px solid #F00; }  
				
			.contact_colums				{ float:left; }
			#first.contact_colums 		{ width:300px; }
				@media screen and (max-width: 730px) 						{ #first.contact_colums { width:172px; } }
				@media screen and (min-width: 730px) and (max-width: 860px) { #first.contact_colums { width:225px; } }
				@media screen and (min-width:1300px) and (max-width:1600px) { #first.contact_colums { width:337px; } }
				@media screen and (min-width:1600px) and (max-width:1900px) { #first.contact_colums { width:390px; } }
				@media screen and (min-width:1900px) 						{ #first.contact_colums { width:450px; } }

			.contact_colums h3			{ color:#3c98e5; font-style:italic; }
			.contact_FI_header			{ width:90%; text-align:center; }
			#actual_content .contact_FI_header h2		{ padding-top:0;  }
			
			.contact_FI_header #Invoice_address			{ position:absolute; bottom:70px; background-color:rgba(195, 195, 195, 0.8); border-radius:1em; padding:0 1em 0 1em; cursor:pointer; }
				@media screen and (min-width:1500px) 						{ .contact_FI_header #Invoice_address { right:10%; } }
				@media screen and (min-width:1300px) and (max-width:1500px) { .contact_FI_header #Invoice_address { right:5%;  } }
				@media screen and (min-width: 830px) and (max-width:1300px) { .contact_FI_header #Invoice_address { right:0;   } }
				@media screen and (min-width: 670px) and (max-width: 830px) { .contact_FI_header #Invoice_address { right:25%; } }
				@media screen and (min-width: 560px) and (max-width: 670px) { .contact_FI_header #Invoice_address { right:20%; } }
				@media screen and (max-width: 560px) 						{ .contact_FI_header #Invoice_address { right:56%; } }
				
				@media screen and (max-width: 561px) 						{ .contact_FI_header #Invoice_address { bottom:280px; } }
				@media screen and (min-width: 561px) and (max-width: 610px) { .contact_FI_header #Invoice_address { bottom:360px; } }
				@media screen and (min-width: 610px) and (max-width: 670px) { .contact_FI_header #Invoice_address { bottom:380px; } }
				@media screen and (min-width: 670px) and (max-width: 700px) { .contact_FI_header #Invoice_address { bottom:370px; } }
				@media screen and (min-width: 700px) and (max-width: 800px) { .contact_FI_header #Invoice_address { bottom:415px; } }
				@media screen and (min-width: 800px) and (max-width: 900px) { .contact_FI_header #Invoice_address { bottom:465px; } }
				@media screen and (min-width: 900px) and (max-width:1100px) { .contact_FI_header #Invoice_address { bottom:515px; } }
				@media screen and (min-width:1100px) and (max-width:1300px) { .contact_FI_header #Invoice_address { bottom:565px; } }
				@media screen and (min-width:1300px) and (max-width:1500px) { .contact_FI_header #Invoice_address { bottom:665px; } }
				@media screen and (min-width:1500px)  						{ .contact_FI_header #Invoice_address { bottom:665px; } }				
				
			#contact_FI_AJAX_content .contact_text		{ padding-right:25%; } /* to give space to the "huomio laskutusosoite" box */
				@media screen and (max-width: 561px) 						{ #contact_FI_AJAX_content .contact_text { position:relative; top:30em;} }
				
			#FI_first.contact_colums 	{ width:25%; } 	/* these are used on the Vantaa and Tampere page for the collumns */
			#FI_second.contact_colums 	{ width:33%; } 
			#FI_third.contact_colums 	{ width:42%; }
				@media screen and (max-width: 1170px) { #FI_second.contact_colums { -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
  																					-moz-box-sizing: border-box;    /* Firefox, other Gecko */
  																					box-sizing: border-box;         /* Opera/IE 8+ */ 
  																					padding-right:30px; } }

				@media screen and (max-width: 830px) { 	#FI_first.contact_colums { width:40%; margin-left:10%; } 
					  									#FI_second.contact_colums { width:40%; } 
														#FI_third.contact_colums { width:80%; margin-left:10%; } } 
				@media screen and (max-width: 670px) { 	#FI_contact_moveToRightTopOnSmallScreen { position:relative; left:50%; top:-11px; } } 										
				@media screen and (max-width: 470px) { 	#FI_first.contact_colums { width:80%; } 
					  									#FI_second.contact_colums { width:80%; margin-left:10%; } 
														#FI_third.contact_colums { width:80%; } }

			.FI_contact					{ height:10em; margin-bottom:2em; }	/* these are used on the Vantaa and Tampere page for the collumns */
			.FI_row1					{ min-height:10em; }
			.FI_row2					{ min-height:10em; }
			.FI_row3					{ min-height:10em; }
			.FI_row4					{ min-height:10em; }
			
				@media screen and (min-width: 830px) 						{ .contact_TMP_2	{ left:-1.5em; } }

			.contact_TMP_3				{ position:relative; }
				@media screen and (min-width:1700px) 						{ .contact_TMP_3	{ left:-13em; } }
				@media screen and (min-width:1600px) and (max-width:1700px) { .contact_TMP_3	{ left:-10em; } }
				@media screen and (min-width: 830px) and (max-width:1600px) { .contact_TMP_3	{ left: -8em; } }
				@media screen and (max-width: 830px) 						{ .contact_TMP_3	{  top: -3em; } }
				
			#FI_1_of_2.contact_colums 	{ padding-right:3.5em ; }		/* on the finnish pages for all the other aluekonttorit */

			#actual_content .contact_french h2 								{ padding-top:25px; padding-bottom:3px; }
			#actual_content .contact_french .contact_french_left_space 		{ padding-left:15px; }
			#actual_content .contact_french .contact_french_left_space	h3	{ color:#3c98e5; display: inline; }				
			
			.partner_logo					{ max-width:80%; }
				@media screen and (min-width: 1211px) { .partner_logo { max-height:6em; } }
				@media screen and (max-width: 1210px) { .partner_logo { max-height:4em; } }
			
			.contact_cells					{ height:25em;}			
				@media screen and (max-width: 700px) { .contact_cells { height:32em;} }
				@media screen and (max-width: 470px) { .contact_cells { height:28em;} }
			/* ========================== "news" page related elements */
			.AnchorLinksHeaderSpace			{ display:block; height:150px; margin-top:-150px; visibility:hidden; } 
			.news_picture_nextTOtitle		{ float:right; text-align:center; vertical-align:top; color:#999; padding:0px 0px 0px 30px; }
			.news_picture_nextTOtitle img	{ width:100%; }
			#NewsContent.content			{ width:70%; }


			/* ========================== "partner" page related elements */
			.partner_table									{ display:table; width:100%; border-collapse:collapse }
			.partner_table .partner_row						{ display:table-row; height:2em; }
			.partner_table .partner_row .partner_cell		{ display:table-cell; padding:5px; border:1px solid #3c98e5; vertical-align:top; }
			.partner_table .partner_row .partner_cell .partner_cell_buttons				{ float:left; width:12em; margin-bottom:1em; text-align:center; }
			.partner_table .partner_row .partner_cell .partner_cell_buttons a img 		{ width:7em; }	
			.partner_table .partner_row .partner_cell .partner_cell_buttons_unselected	{ width:7em; margin-bottom:2em; }
			.partner_table .partner_row .partner_cell .partner_cell_buttons	.product_button_text { display:none; }
			.partner_table .partner_label_column			{ display:table-column; width:6em; background-colour:#AAA; }
			.partner_table .partner_manual_column			{ display:table-column; width:6em; }
			.partner_table .partner_software_column			{ display:table-column; width:calc(100%-28em); }
			.partner_table .partner_datasheet_column		{ display:table-column; width:6em; }
			.partner_table .partner_examples_column			{ display:table-column; width:6em; }
			

			/* ========================== Some elements that are page specific */
			.clear						{ clear:both; /* clear line for any purpose. Mostly the div itself will be empty. */ }

			.company					{ max-width:200px; top:85px; float:left; margin:10px 20px; position:relative; transform:translateY(-50%); }
										  /* a class used for left-to-right presentation of logo's in one row and vertically centered */
			.companypic					{ float:right; width:280px; padding:0px 0px 0px 20px; }
			
			.refpic						{ margin-right:20px; text-align:center; margin-left:0; float:left; }
			.reftxt						{ display:table-cell; }

			.SandSpic					{ margin-right:20px; text-align:center; margin-left:10px; float:left; margin-top:20px; }
				@media screen and (max-width: 670px) { .SandSpic { width:120px; } }
				@media screen and (min-width: 670px) and (max-width: 1024px) { .SandSpic { width:150px; } }
			.SanSfit					{ width:100%; }	
			.SandStxt					{ padding-top:60px; }		
				@media screen and (max-width: 670px) { .SandStxt { padding-top:40px; } }
				@media screen and (min-width: 670px) and (max-width: 1024px) { .SandStxt { padding-top:50px; } }
			.flag_404					{ float:left; padding-right:10px; }

			#SUPRAcontainer				{ position:relative; height:32em; width:47.5em; text-align:right; }
				@media screen and (max-width: 1024px) { 
				#SUPRAcontainer				{ height:23em; } }
				@media screen and (min-width: 1024px) and (max-width: 1210px) { 
				#SUPRAcontainer				{ height:34em; } }


			#SUPRAcontainer img			{ position:absolute; left:-700px; top:-700px; }
			#SUPRAcontainer h1#line_1	{ display:none; }
			#SUPRAcontainer h1#line_2	{ display:none; }
			#SUPRAcontainer h1#line_3	{ display:none; }
			
				@media screen and (min-width: 1600px) {
				#SUPRAfeatures				{ position:relative; left:51em; top:-32.3em; } }	
				@media screen and (min-width: 1800px) {
				#SUPRAfeatures				{ position:relative; left:56em; } }	
				@media screen and (min-width: 2000px) {
				#SUPRAfeatures				{ position:relative; left:62em; } }	
							

	/* ========================== just empty space to make sure we don't write anything (z-index wise) "underneath" the footer bar */
	.pre_footer						{ height:75px; width:100%; /*background-color:#19ADE3;*/ }

/* ========================== for popups */
#TransparentBlackDIV		{ display:none; position:fixed; top:0; left:0; width:100%; height:100%; z-index:18; opacity:0.42; background-color:#000000; } 
#TransparentDIV				{ display:none; position:fixed; top:0; left:0; width:100%; height:100%; z-index:18; } 
.flag_outside_lang_popup	{ display:none; position:fixed; top:60px; background-color:#FFFFFF; z-index:20; text-align:left; border-radius: 18px; box-shadow: 10px 10px 20px #000000; } 
.flag_outside_lang_popup h1	{ color:#3c98e5; font-style:italic; font-weight:700; padding-top:5px; }
.flag_outside_lang_popup h2	{ color:#3c98e5; font-style:italic; font-weight:500; } 
.flag_outside_lang_popup img{ float:right; }
@media screen and (max-width: 900px) { /* for browser screen smaller than 900 px wide */
.flag_outside_lang_popup	{ left:70px; right:70px; padding:19px; } 
.flag_outside_lang_popup img{ width:120px; padding-left:15px; } }
@media screen and (min-width: 900px) { /* for browser screen bigger than 900 px wide */
.flag_outside_lang_popup	{ left:50%; margin-left:-410px; width:750px; padding:30px; } 
.flag_outside_lang_popup img{ width:200px; padding-left:30px; } }	

.invoice_popup				{ text-align:center; }
.invoice_popup h2			{ color:black; font-size:1.5em; }
.popupDIVclosebutton		{ cursor:pointer; background-image:url(/graphics/ClosePopup.png); background-position:center; background-repeat:no-repeat; height:90px; width:90px; position:absolute; top:-41px; right:-46px; z-index:10; }

.popupDIVclosebuttonLEFT	{ cursor:pointer; background-image:url(/graphics/ClosePopup.png); height:29px; width:29px; position:absolute; top:-7px; left:-7px;}
.flag_outside_lang_popup .waitingpic { float:left; width:50px; padding:0 20px 0 0;}
#waiting_space  			{ padding-left:80px; /* 50px for the width of the image, 20px for the padding, and 10px for extra padding */}

.fullscreen_picDIV_class		{ display:none; position:fixed; top:60px; left:60px; right:60px; bottom:60px; background-color:#333; z-index:20; border-radius:10px; box-shadow:10px 10px 20px #000000; 
								  padding:10px 10px 6px 10px; } 
	@media screen and (min-width: 670px)  and (max-width: 900px) 	{ .fullscreen_pic_class { left:30px; right:30px; bottom:30px; } }
	@media screen and (max-width: 670px) 							{ .fullscreen_pic_class { left:15px; right:15px; bottom:15px; } }

.fullscreen_picDIV_class #DIV_with_fullscreen_image
							{ background: black url('/graphics/empty.gif') no-repeat; background-position:center center; 
							  -webkit-background-size:contain; -moz-background-size:contain; -o-background-size:contain; background-size:contain; position:relative; width:100%; height:99%; }
	
/* ========================== for the footer */
#footer_bar					{ position:fixed; bottom:0; left:0; width:100%; height:50px; z-index:10; background-image:url(/graphics/FooterBar.png); background-repeat:repeat-x; }
.footer						{ position:relative; font-size:12px; z-index:10; } 
.footer li					{ float:left; list-style:none; color:#FFFFFF; line-height:50px; text-align:center; } 
.footer li.double			{ float:left; list-style:none; color:#FFFFFF; line-height:12.5px; text-align:center;; } 
.footer li h1				{ font-size:12px; display:inline; color:#FFFFFF; font-weight:900; font-style:normal; }
.footer a					{ text-decoration:none; color:#FFFFFF; }
.footer a:hover				{ text-decoration:none; color:#333333; }   

@media screen and (max-width: 740px) { /* for browser screen smaller than 740 px wide */
.footer li					{ padding:0px 6px; } 
.footer li.double			{ padding:0px 6px; } }
@media screen and (max-width: 850px) and (min-width: 740px) { /* for browser screen between 740 and 850 px wide */
.footer li					{ padding:0px 13px; } 
.footer li.double			{ padding:0px 13px; } }
@media screen and (min-width: 850px) { /* for browser screen bigger than 850 px wide */
.footer						{ left:50%; margin-left:-400px; } 
.footer li					{ padding:0px 25px; } 
.footer li.double			{ padding:0px 25px; } }

/* ========================== at the end to be sure to hide this! */
#IE6						{ position:absolute; display:none; z-index:-1; width:0; height:0; }
#lte_IE8_I					{ position:absolute; display:none; z-index:-1; width:0; height:0; }