/*
	Stylesheet for <IdeeFiks>
	
	@media	screen, projection
	@copyright	Netlash <http://www.netlash.com>
	@author	Johan Ronsse <johan@netlash.com>

*/

/*
	Fork Onsite reset
*/

body, form, ol, ul, dl, li, dt, dd, td, th ,tr, h1, h2, h3, h4, h5, h6, p, pre, blockquote, address {
	margin: 0;
	padding: 0;
}

ol, ul {
	list-style:none;
}

img {
	border:0;
}

fieldset {
	margin: 0;
	padding: 0;
	border: 0;
}

input, select, textarea {
	font-size: 100%;
	vertical-align: middle;
}

table { 
	border-collapse: collapse;
	border-spacing: 0;
	empty-cells: show;
}

th {
	text-align: left;
}

a:focus {
	overflow: hidden;
}

/*
	Clearfix
*/

.clearfix:after, .cols:after, .section:after, #footer:after, #header:after, ul.meta:after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}

/*
	Alright, let's do this
*/

body {
	background: #F4F4F4;
	color: #333;
	font-size: 12px;
	line-height: 1.5;
	font-family: "Trebuchet MS", Arial, sans-serif;
}

	.colorInverse {
		color: #FFF;
	}

/* Headings */
h1, h2, h3 {
	font-weight: 700;
	line-height: 1.2;
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

	.colorInverse h1,
	.colorInverse h2
	.colorInverse h3 {
		color: #FFF;
	}

	h2 {
		font-size: 20px;
		padding: 0 0 10px;
	}

		h2.pageTitle {
			color: #66bc29;
			padding: 10px 20px 0;
		}
	
	h3 {
		font-size: 15px;
		padding: 0 0 10px;
	}
	
	h4 {
		font-size: 13px;
		padding: 0 0 10px;
	}
	
	p {
		padding: 0 0 10px;
	}
	
		small {
			font-size: 11px;
		}
	
	.content ul {
		padding: 0 0 20px 20px;
		color: #7d7d71;
		list-style: disc;
	}
	
		.content ul.reset {
			padding: 0;
			list-style: none;
		}
	
	.content ol {
		padding: 0 0 20px 0;
		color: #7d7d71;
		list-style: decimal;
		list-style-position: inside;
	}
	
		.content ol li {
			padding-left: 20px;
		}
	
		.content ul ul,
		.content ul ol,
		.content ol ol,
		.content ol ul {
			padding-bottom: 0;
		}
	
	
	.alignLeft, img.alignLeft {
		float: left;
		padding: 0 10px 0 0;
	}
	
	.alignRight, img.alignRight {
		float: right;
		padding: 0 0 0 10px;
	}
	
		table.alignLeft {
			margin-right: 15px;
		}
		
		table.alignRight {
			margin-left: 15px;
		}
	
	blockquote {
		font-family: Georgia, serif;
		font-style: italic;
		border-left: 3px solid #CDCDCD;
		padding-left: 10px;
		margin-left: 20px;
	}
	
		blockquote p {
			padding: 0;
			margin: 0 0 10px;
		}
		
		blockquote cite {
			display: block;
			text-align: right;
			font-family: Arial, sans-serif;
			font-style: normal;
			font-size: 11px;
		}
		
		table td {
			padding-right: 20px;
			padding-bottom: 20px;
			vertical-align: top;
		}
		
		table.visible {
			margin: 0 0 15px;
		}
		
		table.visible td, table.visible th {
			border: 1px solid #DDD;
			padding: 5px;
		}
		
		table.visible caption {
			font-size: 11px;
			font-style: italic;
			font-family: Georgia, serif;
			text-align: right;
			color: #666;
		}

a:link { color: #bd1220; }
a:visited { color: #83121c; }
a:hover { color: #dc3543; }
a:active { color: #000; }

.colorInverse a:link { color: #FFF; }
.colorInverse a:visited { color: #FFF; }
/* @remark what is the color for colorinverse visited? */
.colorInverse a:hover { color: #FDC400; }
.colorInverse a:active { color: #FFF; }


/*
	Structural
*/

#container {
	width: 880px;
	margin: 0 auto;
}

#navigation {
	width: 240px;
	background: url('../images/navigationbg.gif') no-repeat 10px 0;
}

	#navigation .holder {
		/* Min height fast-hack */
		min-height: 171px;
		height: auto !important;
		height: 171px;
	}

	#home #navigation {
		float: left;
	}

	#navigation .holder {
		padding: 30px 20px 0 30px;
	}
	
	#home #navigation .holder {
		height: 172px;
	}
	
		#navigation ul {
			padding-top: 13px;
		}
			#navigation ul ul {
				padding: 0 0 0 15px;
			}
				#navigation ul ul ul {
					padding: 0;
				}
					#container #navigation ul ul ul li a {
						padding: 3px 0 3px 15px;
						/* Override specifity */
					}
	
	#navigation .backgroundHook {
		background: url('../images/navigationbg.gif') no-repeat 10px bottom;
		height: 43px;
	}
	
	/* Level 1 */

	#navigation li a:link,
	#navigation li a:visited {
		display: block;
		border-top: 1px solid #85C954;
		font-weight: 700;
		padding: 5px 0;
		line-height: 1.25;
		text-decoration: none;
	}
		
		#navigation li.selected a:link,
		#navigation li.selected a:visited {
			color: #FDC400;
		}
		
			#navigation li.selected li a:link,
			#navigation li.selected li a:visited {
				color: #FFF;
			}
		
		/* Level 2 */
		
		#navigation li li a:link,
		#navigation li li a:visited {
			font-weight: 300;
			border: none;
		}
		
			#navigation li.selected li a:hover,
			#navigation li.selected li a:active {
				color: #FDC400;
			}
		
		/* Level 3 */
		
		#container #navigation li li li a:link,
		#container #navigation li li li a:visited {
			color: #CBFFA6;
			/* Override specifity */
			background: url(../images/navArrows.gif) no-repeat 0 2px;
		}
		
		#container #navigation li li li a:hover,
		#container #navigation li li li a:active,
		#container #navigation li li li.selected a {
			color: #FDC400;
			/* Override specifity */
			background: url(../images/navArrows.gif) no-repeat -282px 2px;
		}

	#navigation ul li.first-child a {
		border-top: none !important;
	}

#eyecatcher {
	background: url('../images/eyecatcherbg.png') no-repeat top left;
	width: 640px;
	height: 245px;
	float: left;
}

	#eyecatcher .photo {
		width: 320px;
		height: 245px;
		float: left;
	}

	#eyecatcher .content {
		width: 320px;
		height: 245px;
		height: 171px;
		float: left;
	}
	
		#eyecatcher .actualContent {
			padding: 60px 30px 0 20px;
		}

/* Header */

#header {
	background: url('../images/headerbg.jpg') no-repeat 0 71px;
	width: 880px;
	height: 197px;
	position: relative;
	padding-top: 71px;
}

#header #logo {
	position: absolute;
	left: 21px;
	top: 30px;
}

#header #title {
	width: 462px;
	position: absolute;
	left: 181px;
	top: 118px;
}

	#header #title h2 {
		color: #980a15;
		font-size: 22px;
		/* 22px in design but doesn't fit, so changing it */
		font-size: 21px;
		padding: 0 0 15px;
	}
	
		#header #title p.tagline {
			font-size: 18px;
			font-weight: 700;
			padding: 0;
		}

#header #logo h1 {
	background: url('../images/logo.gif') no-repeat top left;
	width: 116px;
	height: 136px;
	text-indent: -9000px;
	padding: 0;
	border: none;
}

	#logo h1 a {
		width: 100%;
		height: 100%;
		display: block;
		overflow: hidden;
	}

/* Partners */

#partners {
	width: 180px;
	padding: 11px 20px 20px 30px;
	margin: 0 0 0 10px;
	text-align: center;
	background: url('../images/partnersbg.gif') repeat-y;
}

	#home #partners {
		float: left;
		background: none;
	}

#partners img {
	padding: 10px;
}

#partners li {
	margin: 0 0 10px;
	font-weight: 700;
}

	#partners li a {
		color: #333;
		display: block;
		text-decoration: none;
		/* Why is this in the body color? Bizarre... */
	}


#partners h4 {
	border-bottom: 1px solid #DBDBDB;
	/* @remark Not enough contrast*/
	text-align: left;
	font-weight: 300;
	color: #666;
}

/* Blog */
#home #blog {
	border-top: 1px solid #DBDBDB;
	margin-top: 20px;
	position: relative;
	bottom: 20px;
	padding-top: 20px;
}

p.author {
	padding: 0;
}

	p.commenttitle, p.author {
		color: #666;
	}

	.blogform, .blogcomments {
		padding: 24px 0 0;
	}

#blog p.date {
	color: #999;
	/* @remark Not enough contrast in design, used to be #DBDBDB*/
}

	#blog .article {
		padding: 0 0 24px;
	}

	#blog h3 {
		padding: 0 0 5px;
	}
	
	#blog h3 a {
		text-decoration: none;
	}
	
	#blogdetail h1,
	#blog h1 {
		font-size: 20px;
		color: #66bc29;
		position: relative;
		bottom: 10px;
	}
	
	ul.meta {
		list-style: none;
		padding: 0 0 12px;
		font-weight: 700;
		font-size: 11px;
	}
		
		#blogdetail ul.meta {
			position: relative;
			bottom: 5px;
		}
	
	ul.meta li {
		float: left;
		padding-right: 10px;
		margin-right: 6px;
		background: url(../images/bullet.gif) no-repeat right 50%;
	}
	
		ul.meta li.last-child,
		ul.meta li.last-child {
			background: none;
		}
	
	a.button {
		padding: 2px 10px;
		line-height: 1;
		text-decoration: none;
		border: 1px solid #CCC;
		-moz-border-radius: 3px;
		-webkit-border-radius: 3px;
		border-radius: 3px;
		font-size: 11px;
		font-weight: 700;
	}

/* Main */

#main {
	position: relative;
	bottom: 54px;
	/* Faux equal height columns with a background image */
	background: url('../images/mainBg.gif') repeat-y;
}

/* Content */

#content {
	width: 620px;
	float: left;
	padding: 10px 10px 0 0;
	background: #FFF;
}

	#content .actualContent {
		padding: 20px;
	}

/* Home */

	#indexSidebar {
		float: left;
		width: 240px;
	}
	
	#indexContent {
		float: left;
		width: 640px;
	}
	
		#indexContent #content {
			background: url('../images/indexContentTopBg.jpg') no-repeat top left;
			width: 620px;
		}
		
	#bottom {
		position: relative;
		left: 10px;
	}
	
		#index #bottom,
		#home .noAd #bottom {
			background: url(../images/bottomNoAd.gif) no-repeat -10px 0;
			height: 35px;
		}
	
	#bottom .backgroundHook {
		width: 230px;
		height: 161px;
		background: url(../images/bottomLeft.gif) no-repeat 0 0;
		float: left;
	}
	
		#home .noAd #bottom .backgroundHook {
			display: none;
		}
	
	#bottom a {
		display: block;
		float: left;
	}

/*
	A simple column system
*/

.col {
	float: left;
	width: 200px;
	padding-right: 10px;
}


.col-2 {
	float: left;
	width: 410px;
	padding-right: 10px;
}

	.last {
		padding: 0;
		margin: 0;
	}

	#index #blog .last {
		width: 150px;
		padding-left: 10px !important;
	}
	
ul.cols-4 li {
	width: 130px;
	padding-right: 20px;
	float: left;
	text-align: center;
	font-weight: 700;
}

/* Bottom */

#bottom {
	width: 880px;
}

#bottom img {
	float: left;
}

/* Footer */

#footer {
	font-size: 12px;
	background: #F4F4F4;
	clear: both;
	padding: 0;
	color: #999;
	text-align: center;
}

#footer a:link, #footer a:visited { color: #999; }
#footer a:hover, #footer a:active { color: #000; }
	
	#footer ul li {
		display: inline;
		padding-left: 20px;
	}
		
		#footer ul li.first {
			padding: 0;
		}
	
		#footer ul {
			text-align: center;
			position: relative;
			top: 15px;
		}

/* Contact */

label {
	font-weight: 700;
	display: block;
}

input, textarea, select {
	font-family: "Trebuchet MS", Arial, sans-serif;
}

input.input-text {
	border: 1px solid #BBB;
	border-color: #CDCDCD #BABABA #BABABA #CDCDCD;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	background: #FCFCFC;
	font-size: 12px; padding: 2px 1px;
}

	#name { width: 200px; }
	#email, #website, #subject { width: 240px; }

textarea { 
	width: 354px;
	padding: 4px;
	height: 170px;
	border: 1px solid #BBB;
	background: #FCFCFC;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
}

input:focus, textarea:focus,
input.focus, textarea.focus {
	border-color: #4e8129; outline: 1px solid #66bc29; background: #FFF;
}

span.form-error,
div.form-error {
	display: block;
	font-size: 11px;
	color: #E2001A;
	font-weight: 700;
}

	span.form-error a,
	div.form-error a {
		color: #E2001A;
		border-color: #E2001A;
	}

.form-success {
	display: block;
	padding: 12px;
	border: 1px solid #D7D7D7;
	font-weight: 700;
}

/*
	Buttons
*/
input.input-submit {
	color: #FFF;
	background: #66bc29;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px;
	padding: 1px 10px;
	font-weight: 700;
	font-size: 12px;
	border: 1px solid #5ba626;
	text-align: center;
}

input.input-submit:hover,
input.input-submit:active,
input.input-submit:focus {
	background: #B0D794;
}

/* 
	Focus outline; Mozilla specific since Safari implements this right
	IE can f*** off
*/
@-moz-document url-prefix() {
	input[type="text"]:focus,
	input[type="submit"]:focus,
	textarea:focus { 
		outline: 2px solid #b2dd94;
		-moz-outline-radius: 5px;
		border-color: #7EC14F;
	}
}


/* Fork defaults: pagination */
.pagination-wrap {
	width: 100%;
	overflow: hidden;
}

.pagination {
	float: left;
	position: relative;
	left: 50%;
}

.pagination ul {
	padding: 18px 0;
	z-index: 2;
	overflow: hidden;
	position: relative;
	left: -50%;
}

.pagination li {
	float: left;
	list-style: none;
	margin: 0 5px 0 0;
	text-decoration: none;
	padding: 0;
	line-height: 15px;
	font-size: 12px;
	text-align: center;
}

.pagination li span {
	float: left;
	display: block;
	padding: 4px 5px;
	color: #AAA;
	min-width: 12px;
}

.pagination li.currentpage span {
	font-weight: 700;
	color: black;
}

.pagination li.selected span {
	padding: 4px 5px;
	font-weight: 700;
	color: black;
}

.pagination li a:link,
.pagination li a:visited {
	float: left;
	display: block;
	padding: 3px 4px;
	border: 1px solid #DDD;
	text-decoration: none;
	min-width: 12px;
}

li.ellipsis {
	margin: 0;
}

li.ellipsis span {
	color: black;
}

.pagination li a:hover,
.pagination li a:active {
	border: 1px solid #BBB;
	color: black;
}

.nextpage, .previouspage { font-size: 11px !important; }
.pagination li.nextpage { margin-left: 10px; }
.pagination li.previouspage { margin-right: 15px; }


/*
	General purpose classes
*/
.hidden { display: none; }
.mute { color: #666; }
.nopad { padding: 0; }
.pad { padding: 12px; }
.noborder { border: none !important; }
.last { margin: 0 !important; padding: 0 !important;}
.marked { background: #FFA; }