/* Start of CMSMS style sheet 'layout' */
@charset "utf-8";

/*-----------------------------------------------
# JF-Jansson.css - Master Css
#------------------------------------------------
#
# TABLE OF CONTENT
#
# - Reset
#
# - Grid
#
# - Typography
# - - Global
#
# - Redefined standard elements
#
# - Layout
# - - Content First Containers 
#
# - Content
# - - Header
# - - - Logo
# - - Main Navigation
# - - - Main nav
# - - - Sub nav 
# - - - Pagenation
# - - Bottom
# - - Startpage
# - - Consumer
# - - - Consumer Sart
# - - Commersial
# - - - Commersial Start
# - - - Commersial Colleagues
# - - Common pages
# - - - Consumer and Commersial - Sub/ News
#
# - Color Themes
# - - - Red
# - - - Blue
#
# - Common Elements 
# - - Buttons & Links
# - - Colors
# - - Forms
# - - Lists
# - - Borders
#
# - Misc 
# - - Display
# - - Text
# - - Floats
# - - Positioning
# - - Clearing
# - - Font sizes
# - - Z-index
# - - Margins
# - - Paddings
#
#----------------------------------------------
# Glossary
#
#	act					- active
#	b bt bl bb br		- Border Top, Left, Bottom, Right
#	bg					- Background
#	cf					- Content First
#	d dIn dBl dInBl   	- Display Inline, Block, Inline-block
#	f					- Float
#	f10					- Font (1em)
# 	m mt mr mb ml     	- Margin Top, Right, Bottom, Left
# 	p pt pr pb pl	 	- Padding Top, Right, Bottom, Left
#	H					- Holder (classNameH)
#   pos1				- Position(1,2,3 etc.)
#	Sp				 	- Spacer (tagNameSp) - Mostly used with sprites/images to make dynamic rounded corners etc.
# 	txt txtL txtR txtC	- Text Left, Right, Center
#	z					- Z-index
#
#----------------------------------------------
# Colors
#	
#	Red:		 #bc011a
#	Blue:        #0283bb
#	Grey1:		 #b0b0b0
#	Grey2:       #919090
#	Grey3:		 #7b7b7b
#	Grey4:		 #4f4f4f
#   Black:		 #272828

#----------------------------------------------*/

/*---------------------------------------------*/
/*################## Reset ####################*/
/*---------------------------------------------*/

	/* Eric Meyer’s Global Reset */
	html, body, div, span, applet, object, iframe,
	h1, h2, h3, h4, h5, h6, p, blockquote, pre,
	a, abbr, acronym, address, big, cite, code,
	del, dfn, em, font, img, ins, kbd, q, s, samp,
	small, strike, strong, sub, sup, tt, var,
	dl, dt, dd, ol, ul, li,
	fieldset, form, label, legend,
	table, caption, tbody, tfoot, thead, tr, th, td {
		margin: 0;
		padding: 0;
		border: 0;
		outline: 0;
		font-weight: inherit;
		font-style: inherit;
		font-size: 100%;
		font-family: inherit;
		vertical-align: baseline;
	}

	/* Remember to define focus styles! */
	:focus {outline:0; -moz-outline-style: none;}
	
	html {overflow:-moz-scrollbars-vertical}

	body {line-height:1; color:black; background:white}

	ol, ul {list-style:none}

	/* Tables still need 'cellspacing="0"' in the markup */
	table {border-collapse:separate; border-spacing:0}

	caption, th, td {text-align:left;font-weight: normal}

	blockquote:before, blockquote:after,q:before, q:after {content:""}

	blockquote, q {quotes: "" ""}

	a img {border:0}

/*---------------------------------------------*/
/*################## Grid ######################
-------------------------------------------------

/* - - White shadow boxes - */
	.box3, .box4, .box6, .box8, .box9, .boxFull, .boxFullStart  {float:left; position:relative; display:block; padding:8px 0 0; margin:27px 12px 0 0;}  		
	.boxBottom {padding:0 4px 8px;}
	
	.box3				{ width:228px; background:url(/images/misc/spriteBoxes.gif) no-repeat 0px top;}
	.box3 .boxBottom 	{ background:url(/images/misc/spriteBoxes.gif) no-repeat 0px bottom;}
	
	.box4				{ width:308px; background:url(../images/misc/spriteBoxes.gif) no-repeat -228px top;}
	.box4 .boxBottom 	{ background:url(/images/misc/spriteBoxes.gif) no-repeat -228px bottom;display:block;}

	.box6				{ width:468px; background:url(/images/misc/spriteBoxes.gif) no-repeat -536px top;}
	.box6 .boxBottom 	{ background:url(/images/misc/spriteBoxes.gif) no-repeat -536px bottom; }

	.box8				{ width:628px; background:url(/images/misc/spriteBoxes.gif) no-repeat -1004px top;}
	.box8 .boxBottom 	{ background:url(/images/misc/spriteBoxes.gif) no-repeat -1004px bottom;}
	
	.box9				{ width:708px; background:url(/images/misc/spriteBoxes9.gif) no-repeat left top;}
	.box9 .boxBottom 	{ background:url(/images/misc/spriteBoxes9.gif) no-repeat left bottom; padding:0 4px 38px; display:block;}
	
	.boxFull			{ width:948px; background:url(/images/misc/spriteBoxesFull.gif) no-repeat left top; margin:0;  }
	.boxFull .boxBottom { background:url(/images/misc/spriteBoxesFull.gif) no-repeat left bottom;}
	
	/* Startpage shadow */
	.start .boxFull			{ width:948px; background:url(/images/misc/spriteBoxesFullStartTop.png) no-repeat left top;}
	.start .boxFull .boxBottom { background:url(/images/misc/spriteBoxesFullStartBottom.png) no-repeat left bottom;}

/*  - - The last column in a row needs this class - */
	div.last, span.last, .last      {margin-right:0}

/*---------------------------------------------*/
/*############### Typography ##################*/
/*---------------------------------------------*/


/* Main */
	body {
		font-family: Arial, verdana, sans-serif;
		line-height: 1.4; /* Unitless for proper inheritance */
		color: #4f4f4f;
	}

	/* The top one is for IE: The percentage is of 16px (default IE text size)
	   10px is 62.5%, 12px is 75%, 13px is 81.25%, and so forth).
	   The second value is what all other browsers see (the wanted font size). */
	   
	body          {font-size: 62.5%}	/* IE */
	html > body   {font-size: 10px}		/* Other browsers */
	
	p			  {font-size: 1.2em; line-height: inherit;}

/* Headers */

	h1,h2,h3,h4,h5,h6 {font-weight: normal; line-height:1.4;}	
	h1 a,h2 a,h3 a,h4 a,h5 a,h6 a {text-decoration: none}


	h2 {font-size:2.5em;  padding: 6px 0 2px 0; margin:0 20px;}
	h3 {font-size:2.5em;  padding:0 0 10px 0; color:#272828;}


/* Links */
   
   	/* LoVe/HAte-order */
    a				{ text-decoration:none; color:#919090; font-size:1.1em}
	a:link 			{ }  
	a:visited 		{ }  
	a:hover 		{ text-decoration:none}  
	a:active 		{ }
	a:focus			{ }

/*---------------------------------------------*/
/*########  Redefined standard elements #######*/
/*---------------------------------------------*/

	p 				{ color:#4f4f4f; padding:0 0 1em 0;}

/*---------------------------------------------*/
/*################## Layout ###################*/
/*---------------------------------------------*/   

/* - - Content first holders - */
	
	 /*** NO PADDING ALLOWED IN THIS SECTION ***/
	.cf-container 	{ position:relative; margin:0 auto; text-align:left; width:940px;}

	.cf-header 		{ position:absolute; top:0; left:0; height:83px; width:940px;}

	.cf-content1 	{ float:left; position:relative; width:948px; left:-4px}

	.cf-content2 	{ float:left; position:relative; left:240px; width:708px;}
					  
	.cf-leftH		{ width:228px; float:left; position:absolute; top:0px; left:-4px; overflow:visible; z-index:4;} 
	
	.cf-bottom 		{ float:left; width:940px; margin:0 0 0 4px; }
	
	/* cfSp = Content first spacer
	   Setting the placement to the main containers from the top (cf-content, cf-rightH, cf-leftH) */
	.cfSp		 	{ margin-top:129px} 
	
/*---------------------------------------------*/
/*################## Content ##################*/
/*---------------------------------------------*/

/* Header */

	.logo 			{ position:absolute; top:8px; right:0; height:62px; width:204px;}
	.logo h1 a		{ display: block; text-indent: -9999px; width: 204px; height: 62px;	/* SEO for h1 logo text */
		 	  	      background: url(/images/misc/JF-jansson.png) top left no-repeat; overflow: hidden;} 
	.topMenu		{ position:absolute; bottom:0; left:0;}
	
/* Navigation */
/* - - Main nav - */

	.topMenu ul 			{ padding: 0; margin: 0;}
	.topMenu li 			{ float: left; position: relative; width:auto; height:33px; 
							  padding:0 0 0 15px; margin:0 -3px; z-index:2;}
	.topMenu li a 			{ height:26px; padding:7px 13px 0 0; color: #fff; 
							  font-family: Univers, Arial, verdana, sans-serif; font-weight: bold; 
							  font-size:1.3em; text-decoration: none; display: inline-block; 
							  background:url(/images/misc/spriteTopMenu.png) no-repeat right -66px; }
	.topMenu li a:hover 	{ text-decoration: underline;}
							 
	/* Active tab */
	.topMenu .act		    { background:url(/images/misc/spriteTopMenu.png) no-repeat left -33px; z-index:3;}
	.topMenu .act a 	    { color:#000; background:url(/images/misc/spriteTopMenu.png) no-repeat right 0px;}
	.topMenu .act a:hover   { text-decoration:none;}
	
	/* Active last */
	.topMenu .last 			{ background:none;}

/* - - Sub nav - */
	.cf-leftH a 			{ font-size:1.2em; display:block; padding:4px 0 5px; margin:0 20px 0;  
							  border-bottom:1px solid #efeeee;}
	.cf-leftH a:hover 		{ color:#272828;}
	.cf-leftH a.act 		{ color:#272828; font-weight:bold;}

/* Bottom */
	.cf-bottom p 			{ padding:16px 0 14px; color:#b0b0b0; display:inline-block; float:left; font-size:1.1em}

/* Startpage */

	.start					{background:url(/images/start/bgStart.gif) repeat-x top left;}
	.startMain				{margin:0em auto; width:948px; position:relative;}
	.konsument				{background:url(/images/start/start_Konsument.jpg) no-repeat top left; 
							 display:inline; width:456px; height:291px;}
	.foretag				{background:url(/images/start/start_Konsument2.jpg) no-repeat top left; width:456px; height:291px;}
	.konsument a, .foretag a 	{margin:215px 0 0 0; padding:18px 0 0 57px; width:399px; display:block; font-size:2.5em;
								 font-family: Univers, Arial, verdana, sans-serif; color:#FFFFFF; font-weight:normal;}
										 	
	/* jQuery used for hover function - No other stabil soultion possible in ie6 */
	.konsument a .header, .foretag a .header				{display:block;}
	.konsument a .description, .foretag a .description 		{display:none; font-size:0.5em; line-height:1.2; padding:3px 0 0;}
	
	.logoJfPos				{position:absolute; left:400px; background:url(/images/start/LogoJf.png) no-repeat top left; width:144px; 
							 height:144px; z-index:10; top:110px;}
	.janssonRorAb			{background:url(/images/start/janssonRorAb.png) no-repeat bottom center; display:block; height:110px;}


/* Consumer */
/* - - - Consumer Start - */	
	.bgHempool, .bgIVT, .bgBadrum{ 
	  height:40px; width:250px; display:block; cursor:pointer; color:#FFF;
	  padding:75px 0 0 46px;  font-family: Univers, Arial, verdana, sans-serif;}

	.bgHempool	{ background:url(/images/consumer/photoHempool.jpg) no-repeat 4px 0px;}
	.bgIVT		{ background:url(/images/consumer/photoIVT.jpg) no-repeat 4px 0px;}
	.bgBadrum	{ background:url(/images/consumer/photoBadrum.jpg) no-repeat 4px 0px;}
	.bgFlash	{ background:url(/images/temp/consumerStartFlash.jpg) no-repeat 4px 0px; width:620px; height:217px; display:block;}
	
/* Commersial */
/* - - - Commersial Start - */

 	.box6 .txt				{ padding:2px 27px 4px;}
	.box6 h2        		{ font-size:2.5em; padding: 6px 0 4px 0px; color:#272828; margin:0px}
	.snurra					{ position:relative;}
	.snurra .txt			{ position:absolute; z-index:4; bottom:8px; left:8px; height:68px; width:202px; color:#FFF;
							  background: url(/images/commersial/snurraFade.png) no-repeat; padding:0px 0 0 10px}
	.snurra .txt p			{ font-weight:bold; color:#FFF; margin:30px 0 0 0; padding:0;}
	.snurra .icon			{ position:absolute; z-index:4; top:100px; right:-10px; height:105px; width:105px;
							  background: url(/images/commersial/snurraIcon.png) no-repeat;}
	.snurra img				{ margin:0 0 0 4px;}
	
	.projectTxt				{ font-family: Univers, Arial, verdana, sans-serif; color:#FFF; 
							  position:absolute; bottom:27px; left:322px; font-size:1.5em;}
	
	.moreNews				{ display:inline-block; position:absolute; right:25px; top:32px; z-index:6;}
	
/* - - - Commersial Colleagues - */

	.telefon p				{margin:0px; padding:0px; font-size:1.1em;}
	.telefon p a			{color:#41a2cc; font-size:1em; padding:0px; margin:0px; border-style:none;}
	
	.photoContainer			{width:136px; float:left; height: 163px;}
	
/* Common pages */
/* - - - Consumer and Commersial - Sub/ News - */

	.dateH    				{ font-size:1.2em; padding:42px 0 22px 44px; color:#bdbdbd; }
	.txtH 	   				{ width:409px; padding:0 27px 0 44px; border-right:1px solid #efeeee; float:left;}
	.txtH2 	   				{ width:613px; padding:0 27px 0 44px;  float:left;}
	.txtHlinks 				{ border-top:1px solid #efeeee; border-bottom:1px solid #efeeee; float:left; 
				  		  	  padding:3px 0 4px; margin:12px 0 0; color:#919090; width:100%;}
	.txtHlinks a			{ color:#919090;}
	.txtHlinks a:hover		{ color:#555;}
	.linkH     				{ float:right; width:164px; padding:0 30px 0 10px;}
	.linkH a span			{ float:right; width:119px; display:block;}
	.linkH a span.date		{ float:left; width:24px;}
	.linkH a 				{ border-bottom:1px solid #eee; padding:4px 0 5px; width:100%;}
	.linkH a.regular		{ border-bottom:0px; padding:1px 0; width:100%; display:block;}
	
	.imageSubMain 			{ margin:36px 0 27px 44px;}

/*---------------------------------------------*/
/*############### Color themes ###############*/
/*---------------------------------------------*/

/* - - - Red - */
	body.red 		{ background: url(/images/misc/bgRed.jpg) repeat-x;}
    .red .theme		{ color:#bc011a;}
	.red h4 		{ font-size:1.9em; border-bottom:2px solid #bc011a; margin:0 22px 0; padding:10px 0 0;}

/* - - - Blue - */
	body.blue 		{ background: url(/images/misc/bgBlue.jpg) repeat-x;}
	.blue .theme	{ color:#0283bb;}
	.blue h4 		{ font-size:1.9em; border-bottom:2px solid #0283bb; margin:0 22px 0; padding:10px 0 0;}
   
/*---------------------------------------------*/
/*############# Common Elements ###############*/
/*---------------------------------------------*/

/* - - Buttons & Links - */

	.linkNewsStart {display:block; margin:0 20px; border-bottom:1px solid #efeeee; padding:7px 0 8px 0}

/* - - Colors - */	 	
	.red		{color:#bc011a}
	.blue		{color:#0283bb}
		
/* - - Forms - */

	/* Bottom Selectbox */
	.jqTransformSelectWrapper {
		width: 45px;
		position:relative;
		height: 24px;
		background: url(/images/misc/select_left2.gif) no-repeat top left;
		float:left;
	}
	
	.jqTransformSelectWrapper div span {
		font-size: 1.1em;
		color:#464646;
		float: none;
		position: absolute;
		white-space: nowrap;
		height: 19px;
		line-height: 14px;
		padding: 5px 0 0 7px;
		overflow: hidden;
		cursor:pointer;
	}
	
	.jqTransformSelectWrapper  a.jqTransformSelectOpen {
		display: block;
		position: absolute;
		right: 0px;
		width: 26px;
		height: 24px;
		background: url(/images/misc/select_right2.gif) no-repeat center center;
	}
	
	.jqTransformSelectWrapper ul {
		position: absolute;
		width: 43px;
		top: 23px;
		left: 0px;
		list-style: none;
		background-color: #FFF;
		border: solid 1px #CCC;
		display: none;
		margin: 0px;
		padding: 0px;
		height: 150px;
		overflow: auto;
		overflow-y: auto;
		z-index:10;
	}
	
	.jqTransformSelectWrapper ul a {
		display: block;
		padding: 4px 5px;
		text-decoration: none;
		color:#333;
		background-color: #FFF;
		font-size: 1.1em;
	}
	
	.jqTransformSelectWrapper ul a.selected {
		background: #EDEDED;
		color: #333;
	}
	
	.jqTransformSelectWrapper ul a:hover, .jqTransformSelectWrapper ul a.selected:hover {
		background:#3582c4;
		color: #fff;
	}
	
	.jqTransformHidden {display: none;}

/* - - Lists - */

/* - - Borders - */
	.bNo		{border:none !important;}
	.btG1		{border-top:1px solid #eee}
	.bbG1		{border-bottom:1px solid #eee}

/*---------------------------------------------*/
/*############## Miscellaneous ################*/
/*---------------------------------------------*/
	
/* Minumim heights */
	.min204		{ min-height:204px;}
	.min217		{ min-height:217px;}
	
/* Display */
	.dIn 		{display:inline}
	.dInBl 		{display:inline-block}
	.dBl, .show	{display:block!important;}
	.hide       {display:none!important;}

/* Text */
	.txtL		{text-align:left}
	.txtR		{text-align:right}
	.txtC		{text-align:center}
	.uLine	    {text-decoration:underline}
	.bold		{font-weight:bold}
	.normal		{font-weight:normal}
	.italic  	{font-style:italic}
	.capitalize	{text-transform:capitalize}
	.upperCase	{text-transform:uppercase}
	
/* Floats */
	.fLeft		{float:left}
	.fRight		{float:right}
	.fNo		{float:none}
	
/* Positioning */
	.Absolute	{position:absolute}
	.relative	{position:relative}
	.static		{position:static}
	.fixed		{position:fixed}
	
/* Clearing */
	.clear:after, .container:after 	{content: "\0020"; display: block; height: 0; clear: both;
  									 visibility: hidden; overflow:hidden;}
	.clear, .container 				{display:block}
	.clear 							{clear:both; display: inline-block;}

/* Font sizes */
	.f09{font-size:0.9em;}
	.f11{font-size:1.1em;}
	.f20{font-size:2.0em;}  

/* Z-Index */
    .z100{z-index:100}

/*-----------------*/
/***** Margins *****/
/*-----------------*/
	
/* TRouBLed-order: Top, Right, Bottom, Left */
	
/* - Margin Top - */

.mt10{margin-top:10px}  .mt14{margin-top:14px}  .mt27{margin-top:27px} .mt60{margin-top:60px}

/* - Margin Right - */

.mr4{margin-right:4px}   .mr16{margin-right:16px}

/* - Margin Bottom - */

.mb2{margin-bottom:2px}

/* - Margin Left - */

.ml2{margin-left:2px} .ml13{margin-left:13px} .ml4{margin-left:4px} .ml41{margin-left:41px}	

/*------------------*/
/***** Paddings *****/
/*------------------*/

/* TRouBLed-order: Top, Right, Bottom, Left */

.p0{padding:0}

/* - Padding Top - */

.pt2{padding-top:2px} .pt9{padding-top:9px} .pt10{padding-top:10px} .pt12{padding-top:12px} .pt20{padding-top:20px}
	
/* - Padding Right - */	

.pr10{padding-right:10px}

/* - Padding Bottom - */

.pb4{padding-bottom:4px} .pb6{padding-bottom:6px} .pb8{padding-bottom:8px} .pb10{padding-bottom:10px} .pb17{padding-bottom:17px}  .pb20{padding-bottom:20px} .pb44{padding-bottom:44px}
	
/* - Padding Left - */	

.pl20{padding-left:20px} 
/* End of 'layout' */