/*
   master.css
   BiipMag
   
   Created by Jesper Thøgersen on 2010-01-12.
   Copyright 2010 Biip.no AS. All rights reserved.
*/


/* Imports
--------------------------------------------------*/

	@font-face {
		font-family: 'DIN-Engschrift';
		src: url('/media/css/fonts/DIN.eot');
		src: local('DINEngschrift LT Alternate Regular'), local('DINEngschriftLT-Alternate'), url('/media/css/fonts/DIN.ttf') format('truetype'), url('/media/css/fonts/DIN.svg#DINEngschriftLT-Alternate') format('svg');
	}



/* Clearfix
--------------------------------------------------*/

	.clearfix:after{ content:"";display:block;clear:both;visibility:hidden;line-height:0;height:0; }
	*:first-child+html .clearfix{display:inline-block;}
	html[xmlns] .clearfix{display:block;}
	* html .clearfix{height:1%;}



/* Tags & Generic Classes
--------------------------------------------------*/

	body { background: #ffca1f; font: 12px Arial, sans-srif; margin: 0; }
	
	a { color: #000; text-decoration: none; }
	a:hover { text-decoration: underline; }
	
	a img { border: none; }
	
	
	/* ###### Ads ###### */

		.ad-787x150 {}
		.ad-110x1000-left { height: 1000px; position: fixed; text-align: right; top: 0; width: 110px; }
		.ad-110x1000-right { height: 1000px; margin-left: 897px; position: fixed; text-align: left; top: 0; width: 110px; }
	
	
	/* ###### Notes ###### */
	
		.error { background:#000; color:#fff; font-family: DIN-Engschrift, Arial, Helvetica, sans-serif; font-size:18px; margin:6px; padding:10px; text-align:center; text-transform: uppercase; }
		
		/* Browser Specific */
		/*
		html.chrome .error { font-family: Arial, Helvetica, sans-serif; font-size: 14px; font-weight: bold; letter-spacing: -1px; }
		*/
	
	
	/* ###### Video Ad ###### */

		#videoAd { background: url(/media/videoplayer/images/overlay.png); position: fixed; top: 0; left: 0; width: 100%; z-index: 99; }
		#videoAd-inner { background: #000; margin: 120px auto 0; position: relative; padding: 0px; width: 987px; height: 546px; -moz-box-shadow: black 0 0 20px; -webkit-box-shadow: black 0 0 20px; box-shadow: black 0 0 20px; }
		#videoAd-close { background: url(/media/videoplayer/images/close.png); cursor: pointer; position: absolute; top: -10px; right: -10px; width: 30px; height: 30px; z-index: 1000; }
		#videoAd-title { font-family: Arial, Helvetica, sans-serif; font-size: 12px; font-weight: bold; position: absolute; top: 0px; left: 0px; color: #fff; background: #000; padding: 10px; }
		#videoAd-title a { color: #fff; }
		
		#overlayAd { background: url(/media/videoplayer/images/overlay.png); position: fixed; top: 0; left: 0; width: 100%; z-index: 99; }
		#overlayAd-inner { background: #000; margin: 120px auto 0; position: relative; padding: 0px; width: 800px; height: 600px; -moz-box-shadow: black 0 0 20px; -webkit-box-shadow: black 0 0 20px; box-shadow: black 0 0 20px; }
		#overlayAd-close { background: url(/media/videoplayer/images/close.png); cursor: pointer; position: absolute; top: -10px; right: -10px; width: 30px; height: 30px; z-index: 1000; }
		#overlayAd-title { font-family: Arial, Helvetica, sans-serif; font-size: 12px; font-weight: bold; position: absolute; top: 0px; left: 0px; color: #fff; background: #000; padding: 10px; }
		#overlayAd-title a { color: #fff; }



/* User Interface Classes
--------------------------------------------------*/

	/* ###### Ads ###### */

		.UIAd { margin-bottom: 8px; }
		
	
	/* ###### Headers ###### */
	
		.UIPageHeader { font-family: DIN-Engschrift, Arial, Helvetica, sans-serif; font-size: 50px; margin: 0 0 10px; text-transform: uppercase; }
		
			/* Browser Specific */
			/*
			html.chrome .UIPageHeader { font-family: Arial, Helvetica, sans-serif; font-size: 36px; font-weight: bold; letter-spacing: -1px; }		
			*/
			

	/* ###### Lists ###### */

		/* Normal List */
		.UIList {}
		.UIList-head { color: #000; font-family: DIN-Engschrift, Arial, Helvetica, sans-serif; font-size: 18px; text-transform: uppercase; }
		.UIList-body { font-size: 10px; margin: 0; padding: 0; list-style: none; }
		.UIList-body li { border-bottom: 1px solid #e5e5e5; padding: 3px 0; }
		.UIList-body li a { display: block; }
		
			/* Browser Specific */
			/*
			html.chrome .UIList-head { font-family: Arial, Helvetica, sans-serif; font-size: 14px; font-weight: bold; letter-spacing: -1px; }
			*/
		
		/* Article List */
		.UIList-Articles { margin: 0; padding: 0; list-style: none; }
		.UIList-Articles li { border-bottom: 1px solid #ccc; margin-bottom: 10px; padding: 0 0 10px 150px; position: relative; min-height: 85px; }
		.UIList-Articles .story-image { position: absolute; top: 0; left: 0; }
		.UIList-Articles .story-title { font-size: 22px; margin: 0 0 10px; }
	
	
	/* ###### Image Grid ###### */

		.UIImagegrid { margin: 0; padding: 0; list-style: none; }
		.UIImagegrid li { float: left; height: 60px; text-align: center; width: 20%; }
		.UIImagegrid li a img { border: 1px solid #eee; display: block; padding: 2px; }


	/* ###### Blocks ###### */

		.UIBlock { margin-bottom: 8px; }
		.UIBlock-head { color: #000; font-family: DIN-Engschrift, Arial, Helvetica, sans-serif; font-size: 18px; text-transform: uppercase; }
		.UIBlock-body { padding: 4px 0; }
		
		/* Browser Specific */
		/*
		html.chrome .UIBlock-head { font-family: Arial, Helvetica, sans-serif; font-size: 14px; font-weight: bold; letter-spacing: -1px; }
		*/
	
	
	/* ###### Tag Cloud ###### */
	
		.UITagCloud { background: #000; line-height: 2em; margin: 10px 0; padding: 10px; text-align: justify; }
		.UITagCloud a { color: #fff; padding: 2px 4px; }
		.UITagCloud a:hover { background: #fff; color: #000; text-decoration: none; }
		.UITagCloud .weight1 { font-size: 26px; font-weight: bold; }
		.UITagCloud .weight2 { font-size: 22px; font-weight: bold; }
		.UITagCloud .weight3 { font-size: 18px; font-weight: bold; }
		.UITagCloud .weight4 { font-size: 14px; font-weight: bold; }
		.UITagCloud .weight5 { font-size: 11px; color: #999; }



/* Layout Design
--------------------------------------------------*/

	#outer-wrap { margin: 0 auto; position: relative; width: 1007px; }
	#inner-wrap { background: #ffca1f; margin: 0 auto; position: relative; width: 787px; }

	
	/* ###### Top Bar ###### */
	
		#topbar { background: url(../images/topbar_fade.png) bottom repeat-x; padding-bottom: 24px; position: fixed; width: 100%; min-width: 1007px; z-index: 99; }
		#topbar-content { margin: 0 auto; padding: 3px 6px; position: relative; }
		#topbar-content-inner { height: 50px; }
		#topbar-menu { position: absolute; right: 2px; bottom: 0px; }
		#topbar-menu a img { float: left; margin-left: 2px; }
	
	
	/* ###### Header ###### */
	
		#site-header { height: 185px; position: relative; }
		#header-title { margin: 0; z-index: 99; }
		#header-title a { background: url(../images/header_logo.png) no-repeat; display: block; position: absolute; top: 58px; left: 6px; width: 336px; height: 111px; text-indent: -9000px; }
		
		/* Toplists */
		#header-toplists { padding-top: 10px; position: absolute; top: 40px; right: 0; }
		#header-toplists .UIList { width: 180px; }
		#header-toplists .UIList-body li { border-bottom: 1px solid #ffe695; padding-left: 5px; }
		#header-toplists .UIList-head { background: #fff url(../images/toplist_icon.png) center right no-repeat; color: #000; margin-bottom: 3px; padding: 2px 5px 1px; }
		#list-discussed { float: left; margin-right: 10px; }
		#list-read { float: left; }
		
		/* Menu */
		#header-menu { display: none; }
	
	
	/* ###### Site Body ###### */
	
		#site-body { background: url('../images/content_bg_top.png') top center no-repeat; margin-left: -3px; padding-top: 3px; width: 793px; }
		#site-body-inner { background: #fff; margin: 0 auto; padding-bottom: 10px; width: 787px; }
	
		/* Categories */
		#category-menu { font-family: DIN-Engschrift, Arial, sans-srif; font-size: 36px; line-height: 55px; list-style: none; margin: 0; padding: 0; overflow: hidden; text-align: center; width: 100%; height: 55px; }
		#category-menu li { display: inline; padding: 6px 12px; }
		#category-menu li a { color: #a37700; text-decoration: none; text-transform: uppercase; text-shadow: 0px 1px 0px #ffe695, 0px -1px 0px #684c00; }
		#category-menu li a:hover { color: #000; }
		#category-menu li.current a { color: #000; }
		
			/* Browser Specific */
			/*
			html.chrome #category-menu { font-family: Arial, Helvetica, sans-serif; font-size: 23px; font-weight: bold; letter-spacing: -1px; }
			*/
	
	/* ###### Top Content ###### */
		
		/* Columns */
		#body-topcontent .col-left { float: left; width: 675px; }
		#body-topcontent .col-right { float: right; width: 112px; }

		/* Teasers */
		#topcontent-teasers { padding: 3px 6px 0; }
		
		/* Sidenotes */
		#list-sidenotes.UIList { padding: 6px; }
		#list-sidenotes li { padding: 8px 0; }
	
	
	/* ###### Main Content ###### */
		
		#body-maincontent { padding: 6px; position: relative; }
	
		/* Columns */
		#body-maincontent .col-left { float: left; width: 468px; }
		#body-maincontent .col-right { float: right; width: 300px; }
	
	
	/* ###### Footer ###### */

		#site-footer { background: #fff; border-top: 2px solid #000; color: #000; font-size: 10px; font-weight: bold; line-height: 20px; padding: 10px 6px; text-align: center; }
		#site-footer a { color: #000; font-weight: normal; }
		#site-footer a:hover { text-decoration: underline; }



/* Stories
--------------------------------------------------*/	

	.story-row { float: left; margin-bottom: 10px; width: 100%; }
	
	.story { font-family: DIN-Engschrift, Arial, Helvetica, sans-serif; }
	.story .story-pretitle { color: #666; font-weight: normal; margin: 0; text-transform: uppercase; }
	.story .story-title { font-family: DIN-Engschrift, Arial, Helvetica, sans-serif; font-weight: normal; line-height: 1em; margin: 10px 0 0; text-transform: uppercase; }
	.story .story-title a { color: #000; text-decoration: none; }
	.story .story-title a:hover { text-decoration: underline; }
	.story .story-lead { font-weight: normal; margin: 0; text-transform: uppercase; }
	

	/* ###### Teasers ###### */

		.story.teaser { float: left; margin-left: 9px; position: relative; text-align: center; width: 159px; }
		.story.teaser:first-child { margin: 0; }
		.story.teaser .story-image img { display: block; width: 159px; }
		.story.teaser .story-title { font-family: Arial, sans-serif; margin: 0; position: absolute; bottom: 0; left: 0; line-height: 12px; width: 100%; text-transform: none; }
		.story.teaser .story-title a { background: #000; color: #fff; display: block; font-size: 11px; margin: 0; padding: 3px; }
		.story.teaser:hover .story-title a { text-decoration: underline; }
			
	
	/* ###### Featured Story ###### */

		.story.featured { color: #fff; clear: both; padding: 6px; text-align: left; }
		.story.featured .story-image img { display: block; }
		.story.featured .story-title { background: #000; font-size: 50px; line-height: 0.9em; margin: 0; padding: 10px 0 0 10px; }
		.story.featured .story-title a { color: #fff; }
		.story.featured .story-lead { background: #000; font-size: 26px; padding: 0 0 10px 10px; }
		
		/* Browser Specific */
		/*
		html.chrome .story.featured .story-title { font-family: Arial, Helvetica, sans-serif; font-size: 36px; font-weight: bold; letter-spacing: -1px; }
		html.chrome .story.featured .story-lead { font-family: Arial, Helvetica, sans-serif; font-size: 20px; font-weight: bold; letter-spacing: -1px; }
		*/
	
	
	/* ###### Medium Story ###### */
	
		.story.medium { border-top: 1px solid #ccc; clear: both; padding-bottom: 10px; text-align: left; }
		.story.medium .story-pretitle { background: #000; color: #fff; font-size: 18px; margin: 0; padding: 2px 0 0 5px; }
		.story.medium .story-image img { display: block; width: 468px; }
		.story.medium .story-title { background: #000; font-size: 36px; margin: 0; padding: 10px 0 0 10px; }
		.story.medium .story-title a { color: #fff; }
		.story.medium .story-lead { background: #000; color: #fff; font-size: 20px; margin: 0; padding: 0 0 10px 10px; }
		
		/* Browser Specific */
		/*
		html.chrome .story.medium .story-pretitle { font-family: Arial, Helvetica, sans-serif; font-size: 14px; font-weight: bold; }
		html.chrome .story.medium .story-title { font-family: Arial, Helvetica, sans-serif; font-size: 26px; font-weight: bold; letter-spacing: -1px; }
		html.chrome .story.medium .story-lead { font-family: Arial, Helvetica, sans-serif; font-size: 18px; font-weight: bold; letter-spacing: -1px; }
		*/
	
	
	/* ###### Small Story ###### */

		.story.small { border-top: 1px solid #ccc; float: left; text-align: center; width: 140px; }
		.story.small.second { margin: 0 23px; }
		.story-row:first-child .story.small { border-top: none; }
		.story.small .story-pretitle { background: #000; color: #fff; font-size: 16px; padding: 1px 0; }
		.story.small .story-title { font-size: 20px; margin: 5px 0; }
		.story.small .story-lead { font-family: Arial, sans-serif; font-size: 11px; margin: 5px 0 10px; text-transform: none; }
	
		/* Browser Specific */
		/*
		html.chrome .story.small .story-pretitle { font-family: Arial, Helvetica, sans-serif; font-size: 12px; font-weight: bold; }
		html.chrome .story.small .story-title { font-family: Arial, Helvetica, sans-serif; font-size: 14px; font-weight: bold; letter-spacing: -1px; }
		*/


/* Blocks
--------------------------------------------------*/

	/* ###### Hot&Not ###### */
		.block-hotnot ul { font-size: 11px; list-style: none; margin: 0; padding: 0; width: 145px; }
		.block-hotnot ul.list-hotnot-hot { float: left; }
		.block-hotnot ul.list-hotnot-not { float: right; }
		.block-hotnot ul li { padding: 4px 0; }
		.block-hotnot .list-hotnot-hot .hotnot-header { color: #000; display: block; font-size: 12px; font-weight: bold; }
		.block-hotnot .list-hotnot-hot .hotnot-header strong { color: #d10074; }
		.block-hotnot .list-hotnot-not .hotnot-header { color: #000; display: block; font-size: 12px; font-weight: bold; }
		.block-hotnot .list-hotnot-not .hotnot-header strong { color: #00b3dc; }