/*------------------------------------

COMMON LAYOUT BOXES WIDE CSS 
Används för layoutobjekt etc 
för breda horisontella layouter 1060 - base-7
Importeras till styles/common_wide.css
Måste ligga före standard.css

layoutbredd content: 180+40+480+40+240=980
layoutbredd total: 980+80=1060

horisontell meny med #nav
kolumner 560 + 40 + 360 = 980

------------------------------------*/

/*------------------------------------
 layout content - gemensamma storlekar
 ------------------------------------*/

	#maincol, #heading-article {width: 480px;}
	#rightcol,#midcol,#txtram,#txtram2 {width: 240px;}
	#widecol,#wideimg {width: 800px;}*/
	

/*------------------------------------
 layout content - innehållscontainrar 
 ------------------------------------*/
	
	/*bred kolumn. används på index1 och folio bred bara? också cv vilket inte fungerar bra*/
	
	#widecol
	{
	margin: 0px 0 0 0;
	float:left;
	}
	
	/* huvudkolumn - anv flitigt av t.ex. category (breddad) */
	
	#maincol
	{
	margin:0px 0 40px 0;
	float:left;
	}

	/*kolumn höger*/
	
	#rightcol
	{
	margin:0px;
	float:right;
	}

	
	/* ny 2.2.1.0 för 3col, mellerst */
	
	#midcol
	{
	margin:0px 0px 0 80px;
	float:left;
	}

	/* 3 - col */
		
	.treColLeft {
	font-size:90%;
	width:160px;
	float:left;
	margin:0px 40px 0 0;
	}

	.treColLeft ul li {
	display:block;
	list-decoration:none;
	margin:0 0px 6px 0px;
	}		
	
	.treColLeft ul li a{
	/*font-size:80%;
	font-size:90%;*/
	line-height: 1.4em;
	}		
		
	/* clears */

	div#clearfloats
	{
	clear:both;
	}
	
	div#divider
	{
	clear:both;
	margin: 20px 0 20px 0;
	}
	


/*------------------------------------
 layoutkod för content 
 ------------------------------------*/

	/* översta bilden nytt 2300
	används inte på base-7 men kan finnas på andra basmallar */
	
	.top-img {
	margin:30px 0 30px 40px;
	}		

/* --- Breda bilder sidmall */

	/* wrapper för breda bilder topbild */
	
	#wideimg { margin: 0px 0 40px 0; text-align:center; float:left; }
	
	/* navigation mellan poster */
	
	.wideimg-nav-wrap { margin: -60px 0 40px; }
	.wideimg-nav-left { float: left; width: 40%; text-align: left; }
	.wideimg-nav-right { float:right; width: 40%; text-align: right; }

	/* bred bild width:auto; måste finnas lokalt för vh adjustment annars issue */
	
	#wideimg img { width:100%; max-width:980px; }
	
	/* caption och navigation under bild */
	
	.wideimg-caption { float: left; max-width: 60%; margin-top: 20px; text-align: left; }
	.wideimg-counter { float:right; max-width:100px; margin-top:20px; }
	
/*------------------------------------
 layoutkod för content 
 ------------------------------------*/

	/* wrappa för rubrik i article och category 
	folio-katrub deprec i article from 313 då vi anv heading-article, 
	i category anv heading-article från 317 */

	#heading-article { margin:-6px 0 20px; }	
	.folio-katrub { margin:0px 0 20px; }
	
	/* category introtext under rub */
	
	.introtxt { margin:20px 0 60px 0;}

	/* category/artile - blog/textarkiv: 
	extra heading som döljs normalt/visas mobilt */
	
	#heading-mob {display:none;}


	.prevnext
	{
	clear:both;
	text-align:center;	
	}

/*------------------------------------*/
/* bild och textramar */
/*------------------------------------*/

	
	/*
	style för småbilder article + högerställd bildram
	och clearfloats efter
	*/
	
	.bildram
	{
	/*margin:0 20px 5px 0;
	width: 110px;*/
	margin:0 10% 10% 0;
	width: 45%;
	float:left;
	}

	.bildram_h
	{
	margin:0 0 10% 0;
	width: 45%;
	float:right;
	}

	/*vertikalt staplade bilder i ex article*/
	
	.bildram_vert
	{
	margin-bottom: 20px;
	width: 100%;
	}


/* ------------------------------------

bildram category små bilder
kan använda :first-child el last:child 
om vi har bildrader i div

------------------------------------ */

	/* style för småbilder i category OLD NIU ERS M BILDCOL */
	
	.bildram_txt {margin:10px 0px 0px 0;}


/*------------------------------------
test av nya bildramar

anv på category istf #bildram_first/_h
testa även m småbilder

------------------------------------*/
	
	.bildrad{width:100%; padding:40px;}
	.bildrad_th{width:100%; padding:0px;}
	
	/* bildrader antal motsv nr minus margin på 5% */
	
	.bildcol-1{width:100%;float:left;}
	.bildcol-2{width:47.5%;float:left;}
	.bildcol-3{width:30%;float:left;}
	.bildcol-4{width:21.25%;float:left;}
	.bildcol-5{width:16%;float:left;}
	
/*	[class*="bildcol-"].bildcol-pad {padding-left:60px;}
	[class*="bildcol-"].bildcol-pad:first-child {padding-left:0px;}*/

	[class*="bildcol-"].bildcol-pad {margin-right:5%; margin-bottom:5%;}
	[class*="bildcol-"].bildcol-pad-r {margin-right:0%; margin-bottom:5%;}
	
	[class*="bildcol-"] h5 {margin-top: 16px;}

/*	
	[class*="bildcol-"].bildcol-pad:last-child {padding-right:0px;}
	[class*="bildcol-"]:last-child {padding-right:0px;}*/

/* ---- ny bildklass för framad bg */


	/*
	
	Testning bg för lika stora bilder! cover 100%
	obs! anv thierrys modell med padding och relativ/absolut positionering
	anv bakgrund med cover i nästade divs
	
	$imgLinkOut = '<div class="" style="width:100%; height:150px; background-image: url('.$simpimgpath.'); background-repeat:no-repeat; background-size:cover; background-position: center;"></div>';
	
	yttre div med padding-top (kan också vara bottom)
	*/
	
	[class*="bildcol-"] .thumbdiv, .bildram .thumbdiv, .bildram_h .thumbdiv { 
		width: 100%;
	  	position: relative;
	  	height: 0;
	  	padding: 100.00% 0 0 0;
	  	overflow: hidden;
	}

	/* 
	inre div med bg och absolut pos
	background url sätts i style i /klasser/media/imgLink 
	*/

	[class*="bildcol-"] .thumbdiv .thumbimg, .bildram .thumbdiv .thumbimg, .bildram_h .thumbdiv .thumbimg 
	{
	  position: absolute; 
	  width: 100%;
	  height: 100%;
	  left: 0;
	  top: 0; 
	  background-repeat:no-repeat; background-size:cover; background-position: center;
	}
	
	/* 
	inre div med absolut pos för rubriker! som läggs ovanpå
	men som är genomskinliga! vid hover får text och bg färg
	*/

	[class*="bildcol-"] .thumbdiv .thumblayer
	{
	  	position: absolute; 
	  	width: 100%;
	  	height: 100%;
		left: 0px;
	  	top: 0;
	   	/**/
	  	background-color: rgba(0, 0, 0, 0);
		/*color: rgba(0, 0, 0, 0);*/
		color: rgba(0, 0, 0, 0);
		/*font-size: 120%; def av egen css för h5 */
	}
	
/*	hover för thumblayer */

	[class*="bildcol-"] .thumbdiv .thumblayer:hover, [class*="bildcol-"] .thumbdiv .thumblayer:active, [class*="bildcol-"] .thumbdiv .thumblayer:focus
	{
	  position: absolute; 
	  width: 90%;
	  height: 90%;
	  left: 0;
	  top: 0;
	  background-color: rgba(0, 0, 0, 0.5);
	  color: rgba(255, 255, 255, 1);
	  padding: 5%;
	  
	}
/*------------------------------------
	bildram för soc-buttons (äv
------------------------------------*/

	.bild_btn{width:20px;height:auto;padding:0 5px 5px 0}
	.bild_btn.bild_socbtn{float:left;}
	.bild_btn.bild_fblink{width:30px;height:auto;}

/*------------------------------------
bild och textramar
------------------------------------*/

	/* textram under tumnaglar i article - just nu avstängda*/
	
	div#txtram
	{
	margin:40px 0 0 0;
	clear:both;
	}
	
	/*textram under bilder i article för video tpl 4 - avstängd */
	
	#txtram2
	{
	margin-top: 0px;
	clear:both;
	}

/*------------------------------------*/
/* varningar */
/*------------------------------------*/

	.klart
	{
	padding:10px;
	border:1px #006633 solid;
	color: #006633;
	}
	
	.alert
	{
	padding:10px;
	border:1px #990000 solid;
	color: #990000;
	}

/*------------------------------------*/
/* liten box för t newsletter form */
/*------------------------------------*/

	.formbox
	{
	width:150px;
	width:50%;
	}


/*------------------------------------*/
/* UL LI CV 2220 */
/*------------------------------------*/

	/* testar att flyta första li (årtalet) */
	
	#widecol ul li:first-child{
		list-style: none;
		float:left;
		margin: 0 20px 0 0px;
	}
	
	#widecol ul li{
	 list-style: none;
	 margin: 0 0 0 52px;
	 padding: 0;
	}
	
	/* också intressant? med p::before {content: "Read this: ";} skulle vi kunna lägga in whitespaces för fyra tecken (årtal)*/

/*------------------------------------*/
/* List i rightcol för textarkiv */
/*------------------------------------*/

	#rightcol ul li, #maincol ul li {
		margin:5px 0;
		list-style-type: square;
		list-style-position: inside;
		}
	


/*------------------------------------
	SHOP FORM LAYOUT
*/
	
	/* wraps form and bar */
	
	.shopform-wrapper {margin:0px 0 20px 0;}
	.shop_form {margin-top:20px;}
	.shop_bar {margin-top:0px;}

/*------------------------------------*/
/* 2300 samla alla fontstorleksändringar här! */
/*------------------------------------*/

#footer, .widget-head, .widget-txt, .widget-item-container, .blog-foot, ul.dropdown li
{
FONT-SIZE: 80%;
}