/* 
	screen.css

	text: 				333
	light grey text:	cfcfcf
	main bg:			f0f0f0

	border:				373737	top, footer, list theme on front
						cccccc	strong, dotted
						e4e4e4	lists

	bg box: 			1b1b1b			
	yellow:				ffdc00
	blue:				9accee

	( left - top )

	todo: GÅ IGENOM ALLA LINJER! kolla färgen!
			ALLT I RÄTT ORDNING? 

*/
@import url(nav.css);
@import url(list.css);
@import url(table.css);
@import url(form.css);
@import url(slider.css);


body					{
							margin: 0;
							padding: 0px;
							font-family: 'Trebuchet MS', Helvetica, sans-serif;
							font-size: 12px;
							line-height: 1.3em;
							color: #333;
							background: #000;

						}
a						{ color: #0066cc; text-decoration: none; }
a:hover					{ color: #0066cc; text-decoration: underline; }
a:focus					{ outline: none; }
img						{ border: 0 }


h1, h2, h3, h4, p		{ margin: 0 0 5px 0; padding: 0; font-weight: normal; }
h1						{ font-size: 22px; font-weight: normal; line-height: 2em; }
h2						{ font-size: 16px; font-weight: normal; }
h3,
.h3						{ margin: 10px 0 5px 0; font-size: 14px; font-weight: normal; }
h4						{ font-size: 12px; font-weight: bold; }

h1 span,
h2 span,
h3 span,
h4 span					{ color: #999; }

p.intro 				{
							margin: 0 0 15px 0;
							font-size: 1.2em;
							line-height: 1.3;
						}
blockquote				{ float: left; margin-bottom: 10px; width: 90%; font-style: italic; }
blockquote span			{ color: #333; font-style: normal; }

.left					{ float: left; }
.right					{ float: right; }
.hide					{ display: none; width: 0; height: 0; }
/*
div.clr,
div.clear				{ clear: both; height: 0; }

.clr:after,
.clear:after			{ content: "."; clear: both; display: block; visibility: hidden; height: 0; }
*/
.clr, .row { display: inline-block; }
.clr, .row { display: block; overflow: hidden; position: relative; }
.clr:after, .row:after { content: "."; clear: both; display: block; height: 0; visibility: hidden; }

hr						{
							margin: 0 0 10px 0;
							padding: 0;
							width: 100%; 
							clear: both; 
							border: 1px solid #f0f0f0;
							border-bottom: 1px solid #ccc;
						}
hr.dashed				{ border-bottom: 1px dashed #ccc; }
hr.dotted				{ border-bottom: 1px dashed #ccc; }

.line					{ 
							margin: 10px 0 10px 0;
							padding: 0;
							width: 100%;
							height: 1px;
							float: left; 
							clear: both;
							border-bottom: 1px solid #ccc;
						}
/*
	general grid
------------------------------------------------------ */
#wrap-page				{
							margin: 0;
							padding: 0;
							height: 800px;
							background: url("img/bg.png") 0 0 repeat-x; 
						}
#page					{
							margin: 0 auto;
							padding: 0;
							width: 960px;
						}
#header					{
							margin: 0 0 10px 0;
							padding: 0; 
							height: 125px;
							position: relative;
							z-index: 1;
							border-bottom: 1px solid #373737; 
						}
#content				{
							margin: 0 0 20px 0;
							padding: 0;
							width: 100%;
							display: inline-block;
							clear: both;
						}
#footer					{
							margin: 0 0 20px 0;
							padding: 10px 0px 0px 0px;
							font-size: 11px;
							color: #666;
							border-top: 1px solid #373737;
						}
#main					{
							margin: 0;
							padding: 10px 10px 50px 10px;

							background: #f0f0f0;
							border: 10px solid #fff;
							position: relative;
						}
.col1					{
							margin: 0;
							padding: 0;
							width: 560px;
							float: left;
							position: relative;
						}
.col1.wide				{ width: 760px; }
.col1.full				{ width: 960px; }

.col2,
.col3					{
							margin: 0 0 0 5px;
							padding: 0;
							width: 195px;
							float: left;
							position: relative;
							font-size: 11px;
							line-height: 14px;
						}
.col2 h2,
.col2 h3,
.col2 p					{ color: #fff; }

.col2.wide				{ width: 395px; }
.col3					{
							margin: 0 0 0 5px;
							padding: 0;
							width: 195px;
							float: left;
							position: relative;							
						}

#front					{
							margin: 0 0 20px 0;
							padding: 0;
							width: 940px;
							float: left;
							background: #f0f0f0;
							border: 10px solid #fff; 
						}
						
body.debug #content			{ background: aqua; padding-top: 20px; }
body.debug .col1			{ background: red; padding-top: 20px;  }
body.debug .col2			{ background: green; padding-top: 20px;  }
body.debug .col3			{ background: blue; padding-top: 20px;  }


/*
	common parts
------------------------------------------------------ */
#logo					{
							margin: 0;
							padding: 0;
							width: 194px;
							height: 115px;
							float: right;
							background: url(img/logo-screen.gif) 0 100% no-repeat;
						}
#logo a					{ display: block; width: 194px; height: 115px; }
#logo img				{ visibility: hidden; }
#about					{
							height: 20px;
							background: #000;
							border-bottom: 1px solid #373737;
						}

.box					{ margin: 0 0 10px 0; background: #fff; padding: 3px; }

.box .pad				{ padding: 10px; }
.black .pad				{ background: #141414 url(img/bg-box_black.gif) repeat-x 0 100%; color: #fff !important; }
.black .pad a			{ color: #fff !important; }
.white .pad				{ background: #f7f7f7 url(img/bg-box_white.gif) repeat-x 0 100%; }

#main .box.flash		{ margin: 0 0 10px 0; padding: 0px; }
.box.flash				{ 
							margin: 0 0 10px 0;
							padding: 10px 0px 10px 15px;
							background: #fff;
						}

/*
	rows and columns
------------------------------------------------------ */

.row 					{ margin: 0px 0px 10px 0px; float: left; clear: left; }
.row:after				{ content: "."; clear: both; display: block; visibility: hidden; height: 0; }

.col					{
							margin: 0px 10px 0px 10px;
							float: left;
							position: relative;
							width: 300px;
						}
.col h2					{ margin-bottom: 0px; color: #fff; }
.c3						{ margin-right: 0px; }

/*
	specials
	used in blog, 
------------------------------------------------------ */
.off_both				{ margin: 0 0 10px -20px; }
.off_left img			{ margin: 0 0 10px -20px; }

.author,
.date					{ color: #999; font-style: italic; }

.nr_comments			{
							margin: 0;
							padding: 5px 15px 0 15px;
							width: 50px;
							height: 30px;
							position: absolute;
							text-align: left;
							top: -12px;
							right: -10px; 
							background: url(img/bg_comments_new.gif) 0 0 no-repeat;
							cursor: pointer;
							text-indent: -3000px;
						}
.nr_comments a 			{ color: #fff; }
.nr_comments span		{ display: none; }

.tags					{ padding: 10px 0 0 0; border-top: 1px dotted #ccc; }
.byline					{ padding: 10px 0 0 0; border-top: 1px solid #ccc; font-size: 11px; }

.byline h3 				{ margin: 0 0 5px 0; }
.byline h3 a 			{ color: #333; }
.byline .thumb			{ margin: 0 10px 0 0; float: left; }
.byline:after			{ content: "."; clear: both; display: block; visibility: hidden; height: 0; }

.comments				{ 
							margin: 20px 0 0 0;
							padding: 0; 
							width: 560px;
							float: left;
							clear: both;
						}
.comments h2 a,
.comments h3			{ color: #fff; }

/*
	specials
	used in popup
------------------------------------------------------ */
.popup .tools 			{ float: right; }
.popup .tools span		{ padding: 0 10px 0 10px; }
.popup #page,
.popup .col1.full 		{ width: 560px; }
.popup #header			{ display: none; }
.popup #about			{ border: none; }


/*
	specials
	used for headlines using sIFR 
------------------------------------------------------ */
.col2 h2.sIFR-replaced,
.col2 .wide h2.sIFR-replaced,
.col3 h2.sIFR-replaced			{ margin: 0; padding: 7px 10px 8px 15px; font-size: 14px; line-height: 14px; background: url(img/bg_subnav.gif) 0 0 no-repeat; color: #000; }

.col2.wide h2.sIFR-replaced		{ background: url(img/bg_subnav_long.gif) 0 0 no-repeat; }

.col2 .subnav h2.sIFR-replaced		{ background: url(img/bg_subnav_short.gif) 0 0 no-repeat !important; }

/*
	for facebook	
------------------------------------------------------ */
.facebook					{ margin-top: 10px; padding: 10px 0 30px 0; border-top: 1px solid #ccc; font-size: 11px; width: 100%; }
.facebook .like				{ float: left; display: block; width: 400px; }
.facebook .share			{ margin: 3px 20px 0 0; display: block; float:left; }

.facebook_comments			{ 
								margin: 0 0 10px 0;
								padding: 10px 0 10px 20px;
								background: #f0f0f0;
								clear: both;
							}
.fb_iframe_widget			{ margin: 10px 0 10px 0; }