/*
 * hjart-lung.se
 * Creator: leon@digiplant.se
 * Date: 2009-07-09
 */

/* --------------------- Reset --------------------- */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,button,input,textarea,p,blockquote,th,td{margin:0; padding:0;}
table{border-collapse:collapse;border-spacing:0;}
address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}
ol,ul{list-style:none;}
caption,th{text-align:left;}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}
q:before,q:after{content:'';}
abbr,acronym,fieldset,img,button{border:0;}
html,body{width:100%;height:100%;}
body{font:normal 62.5%/100% Arial,sans-serif;}
a:focus{outline: none;}

/* --------------------- Form Reset --------------------- */
fieldset{clear:both;}
form p,form .buttons{clear:both;margin:0 0 .5em;}
form p label{display:block;}
form ul li{list-style-type:none;margin:0;}
form ul.inline li,form ul.inline label{display:inline;}
form ul.inline li{padding:0 .5em 0 0;}
input.radio,input.checkbox{vertical-align:top;}
label,button,input.submit,input.image{cursor:pointer;}
* html input.radio,* html input.checkbox{vertical-align:middle;}
*+html input.radio,*+html input.checkbox{vertical-align:middle;}
textarea{overflow: auto;}
* html button{margin:0 .3em 0 0;}
*+html button{margin:0 .3em 0 0;}
form.horizontal p{padding-left:120px;}
form.horizontal p label{display:inline;float:left;width:110px;margin-left:-120px;}
input.text,input.password,textarea,select{margin:0;font:100%/130% Arial,sans-serif;vertical-align:baseline;}
input.text,input.password,textarea{width: 264px;border:1px solid #d8d7d7; padding:2px;}

/* --------------------- Global --------------------- */
body {
	position: relative;
	background: #fff url('../img/bg.png') repeat-x top left;
	color: #222;
	text-align: center;
}
a {
	color: #b90910;
	text-decoration: none;
	cursor: pointer;
}
	a:hover {
		text-decoration: underline;
	}

.column {
	width: 335px;
	float: left;
	margin-right: 20px;
	color: #333;
}

#container {
	position: relative;
	margin: 0 auto;
	width: 675px;
	text-align: left;
	border:0px solid #000000;
}
#header {
	position: relative;
	width: 950px;
	height: 220px;
	overflow: hidden;
	margin-bottom: 16px;
}

/* --------------------- Main logo and fronpage button --------------------- */
#index {
	position: absolute;
	display: block;
	width: 690px;
	height: 90px;
	margin-top: 40px;
	text-indent: -10000px;
	background: #fff url('../img/hjart-lung.png') no-repeat top left;
}

/* --------------------- Navigation ---------------------
 * The main navigation for the site.
 * use class="active" to mark the page the user is on.
 * */
#nav {
	display: block;
	width: 950px;
	height: 55px;
	position: absolute;
	top: 160px;
	left: 0;
	overflow: hidden;
	background: #9b9ea0 url('../img/nav.png') no-repeat top left;
}
	#nav li {
		float: left;
		width: auto;
		height: 55px;
	}
	#nav li:first-child {
		margin: 0 0 0 10px;
	}
		#nav li a {
			display: inline-block;
			font-size: 1.2em;
			line-height: 48px;
			width: auto;
			height: 48px;
			padding: 0 10px;
			color: #fff;
			text-transform: uppercase;
			border-right: 1px solid #676a6b;
		}
		#nav li.active,
		#nav li a:hover {
			background: #818384 url('../img/nav-active.png') no-repeat top center;
			text-decoration: none;
		}

/* --------------------- Related Navigation ---------------------
 * The related top navigation with sitemap, FAQ...
 * */
#relnav {
	position: absolute;
	top: 10px;
	right: 5px;
	display: block;
	width: 950px;
}
	#relnav li {
		float: right;
		margin: 0 2px;
	}
	#relnav li + li:after {
		content: '|';
		margin: 5px;
	}
		#relnav li a {
			color: #737474;
			line-height: 1.4em;
		}

/* --------------------- Search ---------------------
 * The two search bars that appear in the header.
 * */
#search {
	position: absolute;
	top: 50px;
	right: 0;
	width: 240px;
}
	#search form label {
		font-size: 1em;
		line-height: 1.4em;
		text-indent: 10px;
	}
	#search form input {
		width: 205px;
		height: 24px;
		background: #fff url('../img/search-box.png') no-repeat top left;
		font-size: 1.1em;
		padding: 5px 0 0 10px;
		border: 0;
		vertical-align: top;
	}
		#search form input.submit {
			width: 24px;
			height: 24px;
			text-indent: -10000px;
		}
		#search form.search input.submit {
			background: #b90910 url('../img/search.png') no-repeat left center;
		}
		#search form.search-association input.submit {
			background: #b90910 url('../img/search-association.png') no-repeat left center;
		}

/* --------------------- Sub Navigation ---------------------
 * The subnavigation of the page.
 * use class="children" on the li to say that this menu item contains subitems.
 * use class="active" on the li to say that the user is on this item.
 * use class="children active" when the user is on a page which is under this item.
 * */
#subnav {
	width: 220px;
	float: left;
	font-size: 1.2em;
	margin: 0 10px 0 0;
	border-top: 1px solid #f3f3f3;
	border-bottom: 10px solid #f3f3f3;
}
	#subnav h2 {
		color: #535353;
		margin: 10px 0 0 10px;
		height: 30px;
		line-height: 2em;
		font-weight: bold;
	}
		#subnav h2 span {
			color:#dfe4e7;
			font-size: 2.2em;
			vertical-align: middle;
			margin-right: 10px;
		}
	#subnav ul {
		margin: 10px 0 0 0;
	}
	#subnav ul li a {
		display: block;
		background: #f9f9f9;
		border-top: 1px solid #f3f3f3;
		border-bottom: 1px solid #fefefe;
		line-height: 2.4em;
		color: #535353;
		text-indent: 10px;
	}
		#subnav ul li.children a {
			background: #F9F9F9 url('../img/subnav.png') no-repeat 200px 10px;
		}
		#subnav ul li.active a {
			background: #F9F9F9 url('../img/subnav-active.png') no-repeat 200px 10px;
			font-weight: bold;
		}
		#subnav ul li.active ul {
			background: #fff;
			margin: 0;
		}
			#subnav ul li.active ul li {
				
			}
			#subnav ul li.active ul li a {
				background: #fff;
				padding-left: 10px;
				border: 0;
				font-weight: normal;
			}
				#subnav ul li.active ul li.active a {
					font-weight: bold;
				}

/* --------------------- Sidebar ---------------------
 * The right sidebar
 * */
#sidebar {
	float: right;
	width: 240px;
}
	#sidebar h2 {
		font-size: 1.2em;
		line-height: 1.6em;
		border-bottom: 1px solid #d6d6d6;
		font-weight: bold;
		background: transparent url('../img/subnav-active.png') no-repeat left center;
		text-indent: 15px;
	}
	#tip li {
		margin: 5px 0 5px 0;
		border-bottom: 1px solid #d6d6d6;
	}

/* --------------------- Footer ---------------------
 * Contains contact information.
 * */
#footer {
	clear: both;
	font-size: 1.1em;
	line-height: 1.4em;
	font-weight: bold;
	margin-top: 10px;
}
	#footer div {
		background: #797979;
		height: 20px;
	}
	#footer p {
		margin: 5px 0 10px 10px;
	}
	#footer a {
		color: #8b8b8b;
	}

/* --------------------- Content ---------------------
 * These styles define the different sizes of content views.
 * */
#front,
#article,
#article-wide,
#article-full {
	position: relative;
	float: left;
	width: 660px;
	overflow: hidden;
}
#article {
	width: 422px;
	margin: 0 0 20px 0;
	border-left: 1px solid #dfe4e7;
	border-right: 0px solid #dfe4e7;
	padding: 0 10px;
}
#article-wide {
	width: 680px;
	margin: 0 0 20px 0;
	border-right: 1px solid #dfe4e7;
	padding: 0 10px;
}
#article-full {
	width: 930px;
	margin: 0 0 20px 0;
	padding: 0 10px;
}

/* --------------------- Content Styles ---------------------
 * The basic typographic styles.
 * use class="content" on an item to make the default typographics work.
 * */
.content h1 {
	font-size: 3em;
	line-height: 1.5em;
	font-weight: bold;
}
.content h2 {
	font-size: 2.4em;
	line-height: 1.2em;
	font-weight: bold;
}
.content h3 {
	font-size: 1.3em;
	line-height: 1.8em;
	margin: .5em 0 2em 0;
}
.content p {
	font-size: 1.2em;
	line-height: 1.5em;
	margin: .3em 0 1.2em 0;
}
.content td {
	font-size: 1em;
	line-height: 1.5em;
	margin: .3em 0 1.2em 0;
}
.content img {
	margin: 10px;
}
.content img.img-left {
	float: left;
}
.content img.img-right {
	float: right;
}
.content img.img-center {
	margin: 0 auto;
}
.content div.footer {
	background: #f6f7f8;
	font-size: 1.2em;
	line-height: 2em;
	margin: 20px 0;
	text-indent: 5px;
}
	.content div.footer strong {
		font-weight: bold;
	}

/* --------------------- News List ---------------------
 * An image and related text, which is fully clickable, floats in two columns.
 * */
#news-list {
	display: block;
	width: 710px;
	overflow: hidden;
}
	#news-list li {
		display: block;
		float: left;
	}
		#news-list li a {
			display: block;
			width: 335px;
			margin: 5px 20px 10px 0;
			border-bottom: 1px solid #d6d6d6;
			overflow: hidden;
			color: #222;
			font-size: 1.1em;
			line-height: 1.4em;
		}
			#news-list li a img {
				float: left;
				margin: 0 10px 5px 0;
			}
			#news-list li a strong {
				display: block;
				font-size: 1.5em;
				line-height: 1.3em;
				font-weight: bold;
			}
			#news-list li a span {
				display: block;
				color: #b90910;
				text-decoration: underline;
			}

/* --------------------- News Flow ---------------------
 * Displays a news flow module with fully clickable links to news items.
 * */
#news-flow {
	position: relative;
	background: #e4e4e4;
	margin: 0 0 10px 0;
}
	#news-flow h2 {
		height: 24px;
		background: #dad7d7;
		color: #4c4c4c;
		font-size: 1.2em;
		line-height: 2em;
		font-weight: bold;
		text-indent: 5px;
	}
	#news-flow a.archive {
		position: absolute;
		top: 0;
		right: 5px;
		display: block;
		font-size: 1.1em;
		font-weight: bold;
		line-height: 2em;
	}
	#news-flow ul li a {
		display: block;
		background: transparent url('../img/arrow-gray.png') no-repeat 5px center;
		border-top: 1px solid #f5f4f4;
		border-bottom: 1px solid #d0caca;
		color: #736e6e;
		font-size: 1.1em;
		line-height: 1.4em;
		padding: 0 10px 5px 20px;
	}
		#news-flow ul li a strong {
			display: block;
			font-size: 1.1em;
			line-height: 1.4em;
			font-weight: bold;
			color: #3e3e3e;
			margin: 5px 0 0 0;
		}

/* --------------------- From here on there are only styles that only apply the the front pages --------------------- */

/* --------------------- Welcome ---------------------
 * Image and welcome text.
 * */
#welcome img {
	float: left;
	margin: 0 20px 10px 0;
}
	#welcome img.association {
		border-bottom: 10px solid #dfe4e7;
	}
	#welcome h2 {
		font-size: 2em;
		line-height: 1.6em;
		font-weight: bold;
		color: #b90910;
	}
	#welcome p {
		font-size: 1.4em;
		line-height: 1.6em;
		margin-right: 60px;
	}

/* --------------------- Point Navigation ---------------------
 * Navigation bar with arrows.
 * */
#point-nav {
	display: block;
	width: 690px;
	height: 40px;
	clear: both;
	background: #ededed;
	margin: 0 0 10px 0;
	overflow: hidden;
}
	#point-nav li {
		float: left;
		background: #dcd9d9;
	}
		#point-nav li.arrow {
			background: #dcd9d9 url('../img/arrow-bg.png') no-repeat top right;
			padding: 0 40px 0 0;
		}
		#point-nav li a {
			display: inline-block;
			padding: 0 20px;
			font-size: 1.2em;
			font-weight: bold;
			line-height: 40px;
			text-decoration: none;
			padding-right: 35px;
			background: transparent url('../img/arrow-big-red.png') no-repeat center right;
		}
			#point-nav li a:hover {
				text-decoration: underline;
			}

/* --------------------- Media News Flow ---------------------
 * Like News Flow but a different look.
 * */
#medianews-flow {
	position: relative;
	overflow: hidden;
	background: #f9f9f9;
	margin: 0 0 10px 0;
}
	#medianews-flow h2 {
		height: 24px;
		background: #dad7d7;
		color: #4c4c4c;
		font-size: 1.2em;
		line-height: 2em;
		font-weight: bold;
		text-indent: 5px;
	}
	#medianews-flow a.archive {
		position: absolute;
		top: 0;
		right: 5px;
		display: block;
		font-size: 1.1em;
		font-weight: bold;
		line-height: 2em;
	}
	#medianews-flow ul li a {
		display: block;
		border-top: 1px solid #fff;
		border-bottom: 1px solid #fff;
		color: #736e6e;
		font-size: 1.1em;
		line-height: 1.4em;
		padding: 0 0 5px 20px;
	}
		#medianews-flow ul li a strong {
			display: block;
			font-size: 1.1em;
			line-height: 1.4em;
			font-weight: bold;
			color: #3e3e3e;
			margin: 5px 0 0 0;
		}

/* --------------------- Calendar ---------------------
 * The event calendar.
 * use class="event" on td items that have events.
 * use class="now" on td items that is the current date/time.
 * use class="offbounds" on td items that aren't enabled, or aren't in this month.
 * */
#calendar table {
	width: 335px;
	background: #faf9f9;
	text-align: center;
}
	#calendar table thead,
	#calendar table tfoot {
		background: #dad7d7;
		color: #4c4c4c;
		font-size: 12px;
		line-height: 2em;
		font-weight: bold;
		text-indent: 5px;
		text-align: center;
	}
	#calendar table tfoot {
		font-size: 11px;
	}
	#calendar table tr td.next a,
	#calendar table tr td.previous a {
		display: block;
		width: 100%;
		height: 24px;
		text-indent: -10000px;
		background: transparent url('../img/arrow-black.png') no-repeat center center;
	}
	#calendar table tr td.previous a {
		background: transparent url('../img/arrowb-black.png') no-repeat center center;
	}
	#calendar table thead tr.days td {
		width: 14.28%;
		background: #e1e1e1;
		border: 1px solid #e1e0e0;
	}
	#calendar table tbody tr td {
		font-size: 12px;
		line-height: 2em;
		border: 1px solid #e1e0e0;
		color: #666;
	}
		#calendar table tbody tr td.event a {
			display: block;
			text-decoration: underline;
			font-weight: bold;
		}
		#calendar table tbody tr td.now {
			background: #bc0a11;
			color: #fff;
			font-weight: bold;
		}
		#calendar table tbody tr td.offbounds {
			color: #bab9b9;
		}

/* --------------------- Calendar Events ---------------------
 * Under the calendar the current events are shown.
 * */
	#calendar ul {
		background: #f9f9f9;
		margin: 0 0 10px 0;
	}
		#calendar ul li a {
			display: block;
			border-top: 1px solid #fff;
			border-bottom: 1px solid #fff;
			color: #736e6e;
			font-size: 1.1em;
			line-height: 1.4em;
			padding: 5px 0 5px 10px;
		}
			#calendar ul li a em {
				display: block;
				text-transform: uppercase;
			}
			#calendar ul li a strong {
				display: block;
				font-size: 1.2em;
				line-height: 1.4em;
				font-weight: bold;
				color: #3e3e3e;
			}

/* --------------------- Blog List ---------------------
 * Displays memberblogs.
 * */
#blog-list {
	margin: 0 0 10px 0;
}
	#blog-list h2 {
		font-size: 1.8em;
		line-height: 2em;
		font-weight: bold;
	}
	#blog-list ul li a {
		display: block;
		border-bottom: 1px solid #d6d6d6;
		overflow: hidden;
		color: #222;
		margin: 5px 0;
		font-size: 1.1em;
		line-height: 1.4em;
	}
		#blog-list ul li a img {
			float: left;
			margin: 0 10px 5px 0;
		}
		#blog-list ul li a strong {
			display: block;
			font-size: 1.1em;
			line-height: 1.4em;
			font-weight: bold;
		}
		#blog-list ul li a span {
			display: block;
			color: #b90910;
			text-decoration: underline;
		}



	
.ctnormal 
{
	font-family: Arial,sans-serif;
	font-size: 12px;
	font-style: normal;
	font-weight: normal;
	color: #515151;
}
.ctwhitenormal 
{
	font-family: Arial,sans-serif;
	font-size: 12px;
	font-style: normal;
	font-weight: normal;
	color: #FFFFFF;
}
.ctrednormal 
{
	font-family: Arial,sans-serif;
	font-size: 12px;
	font-style: normal;
	font-weight: normal;
	color: #EE2D25;
}
.ctbold 
{
	font-family: Arial,sans-serif;
	font-size: 12px;
	font-style: normal;
	font-weight: bold;
	color: #515151;
}
.ctwhitebold 
{
	font-family: Arial,sans-serif;
	font-size: 12px;
	font-style: normal;
	font-weight: bold;
	color: #FFFFFF;
}
.ctredbold 
{
	font-family: Arial,sans-serif;
	font-size: 12px;
	font-style: normal;
	font-weight: bold;
	color: #EE2D25;
}
.ctitalic
{
	font-family: Arial,sans-serif;
	font-size: 12px;
	font-style: italic;
	font-weight: normal;
	color: #515151;
}
a:link		
{	
  font-family: Arial,sans-serif; 
  font-size: 12px; 
  font-style: normal; 
  font-weight: normal; 
  color: #8B8B8B; 
  text-decoration: none;
  line-height:1.5em;
}
a:visited		
{
  font-family: Arial,sans-serif; 
  font-size: 12px; 
  font-style: normal; 
  font-weight: normal; 
  color: #8B8B8B; 
  text-decoration: none;
  line-height:1.5em;
}
a:hover
{
  font-family: Arial,sans-serif; 
  font-size: 12px; 
  font-style: normal; 
  font-weight: normal; 
  color: #8B8B8B; 
  text-decoration: underline;
  line-height:1.5em;
}
a.active		
{
  font-family: Arial,sans-serif; 
  font-size: 12px; 
  font-style: normal; 
  font-weight: normal;
  color: #8B8B8B; 
  text-decoration: underline;
  line-height:1.5em;
}
a:visited:hover		
{
  font-family: Arial,sans-serif; 
  font-size: 12px; 
  font-style: normal; 
  font-weight: normal;
  color: #8B8B8B; 
  text-decoration: underline;
  line-height:1.5em;
}