/*
	Author: A lot of pixels
	Date: 27-01-2009
	Project: A lot of pixels
	Location: www.alotofpixels.be
*/

/* -------(  FORCE SCROLLBAR  )------- */

	html { 
		min-height: 100%; 
		margin-bottom: 1px;
	}

/* ----------(  GENERAL  )---------------- */

	* {
		padding:0;
		margin:0;
	}
	
	body {
		font-size:13px;
		font-weight:normal;
		font-family:Arial, Helvetica, sans-serif;
		color:#333;
		background:#f8f8f8 url(../images/bg-header.jpg) left top repeat-x;
	}

	h1 {
		padding-bottom:15px;
		font-size:22px;
		color:#ff0030;
	}
	
	h2 {
		padding-bottom:15px;
		font-size:20px;
		color:#ff0030;
	}
	
	h3 {
		font-size: 18px;
		color:#ff0030;
	}
	
	h4 {
		padding-bottom:5px;
		font-size: 18px;
	}
	
	ul,
	li {
		list-style: none;
	}
	
	li {
		line-height: 18px;
	}
	
	p {
		padding-bottom:10px;
		line-height:18px;
	}
	
	p img {
		margin:0 10px 10px 0;
		float: left;
	}
	
	.date {
		padding:3px 0 5px 0;
		font-size:12px;
	}
	
	a {
		color: #ff0030;
		text-decoration: none;
		border-bottom:1px solid #ffabbb;
	}
	
	a:active {
		color: #ff0030;
	}
	
	a:visited {
		color:#e2002b;
	}
	
	a:hover {
		color:#ff3359;
	}
	
	.no-outline a {
		outline: none;
	}
	
	.left {
		float:left;
	}
	
	.a-left {
		text-align: left;
	}
	
	.right {
		text-align:right;
		float: right;
	}
	
	.a-right {
		text-align: right;
	}
	
	.clear {
		clear: both;
	}
	
	.one {
		width:210px;
	}
	
	.one li {
		padding-bottom:4px;
	}
	
	.two {
		width:330px;
	}
	
	.three {
		width:460px;
	}
	
	.four {
		width:570px;
	}
	
	.four ul {
		margin-left:15px;
		padding-bottom:10px;
	}
	
	.four li {
		list-style: square;
	}
	
	.six {
		width:920px;
	}
	
	.seven {
		width:960px;
	}
	
	.eight {
		width:980px;
	}
	
	.component {
		overflow: hidden;
		width:430px;
		height:250px;
	}
	
	.component-small {
		width:285px;
	}
	
	.one-margin {
		margin-left:20px;
	}
	
	.four-margin {
		margin-right:20px;
	}
	
	.seven-margin {
		margin-left:10px;
	}
	
	.margin-air {
		margin-bottom:15px;
	}
	
	.side {
		padding:15px 15px 5px 15px;
		color:#000;
		border:1px solid #e4e4e4;
		background: #f9f9f9;
		width:298px;
	}
	
	blockquote {
		font-style: italic;
	}
	
	blockquote .author {
		margin-top:20px;
		padding-bottom:10px;
		font-style: normal;
		font-size:12px;
		text-align:right;
	}
	
	blockquote p {
		padding:0;
	}
	
	blockquote .author a {
		color: #ff0030;
	}
	
	.article-info {
		font-size:11px;
	}
	
	.article-info p {
		margin-bottom:10px;
		padding:15px 10px 15px 0;
		border-bottom:1px solid #e4e4e4;
	}
	
	.article-info .link {
		padding-left:20px;
		background:url(../images/href.gif) left center no-repeat;
	}
	
	.article-info .react {
		margin-left:15px;
		padding-left:20px;
		background:url(../images/react.gif) left center no-repeat;
	}
	
	.partner {
		padding:10px 0;
		text-align:center;
		border-bottom:1px solid #e4e4e4;
	}
	
	#wrapper #content .reset {
		border: 0;
	}

/* ----------(  MAIN LAYOUT  )---------------- */

	#wrapper {
		margin:0 auto;
		width:980px;
	}
	
	#header {
		position:relative;
		height: 280px;
		background: url(../images/header-bottom.jpg) left bottom no-repeat;
	}
	
	#header #logo {
		position:absolute;
		top:80px;
		left:25px;
		text-indent:-9999px;
		width:264px;
		height:62px;
		background: url(../images/alotofpixels.jpg) center center no-repeat;
		border: 0;
		display:block;
	}
	
	#header ul {
		position:absolute;
		left:20px;
		bottom:25px;
		padding:5px 5px 0 4px;
		border:5px solid #f7f7f7;
		border-bottom:0;
		background: #fff;
		z-index:100;
	}
	
	#header li {
		margin-left:1px;
		display:inline;
		float:left;
	}
	
	#header li a {
		padding:0 55px 0 10px;
		color:#fff;
		font-size:14px;
		line-height: 30px;
		text-decoration:none;
		background:#636363;
		border:0;
		display: block;
		float:left;
	}
	
	#header li a:hover,
	#header li.active a {
		background:#191919;
	}
	
	#header #television {
		position: absolute;
		right:10px;
		bottom:40px;
		width:390px;
		height:177px;
		background: url(../images/television.jpg) left bottom no-repeat;
	}
	
	#content {
		padding:0 30px 30px 30px;
		background: url(../images/bg-repeater.jpg) center top repeat-y;
	}
		
	#slideshow {
		/*margin:30px 0;*/
		margin-top:30px;
		border-top:5px solid #f2f2f2;
		border-bottom:5px solid #f2f2f2;
	}
	
	#slideshow img {
		float: left;
	}
	
	#slideshow .slideshow-nav {
		text-indent: -9999px;
		width:30px;
		height:250px;
		display: block;
		border: 0;
	}
	
	#slideshow #prev {
		background: #a5a5a5 url(../images/arrow-left.gif) center center no-repeat;
		float:left;
	}
	
	#slideshow #prev.disabled {
		background: #f2f2f2;		
	}
	
	#slideshow #next {
		background: #a5a5a5 url(../images/arrow-right.gif) center center no-repeat;
		float:left;
	}
	
	#slideshow #next.disabled {
		background: #f2f2f2;		
	}
	
	.component h2,
	.component p,
	.component-small p {
		padding: 15px 15px 0 15px;
	}
	
	#portfolio .four {
		margin-bottom:20px;
		padding-bottom:20px;
		border-bottom:1px solid #e4e4e4;
	}
	
	.component-small h2 {
		padding: 0 15px;
	}
	
	.component-small h2 a {
		border-bottom:1px solid #ffabbb;
	}
	
	.component-small a {
		border: 0;
	}
	
	.component-small p a {
		border-bottom:1px solid #ffabbb;
	}
	
	.component-small img {
		border: 1px solid #e4e4e4;
	}
	
	#portfolio-overview {
		padding-top:15px;
		border-top:1px solid #e4e4e4;
	}
	
	#portfolio-overview h4 {
		padding-bottom:15px;
	}
	
	#slideshow .component .project-go {
		margin:15px 15px 0 15px;
		padding:2px 5px;
		color: #333;
		border: 1px solid #4c4c4c;
		background: #fff;
		width: 100px;
		display: block;
	}
	
	#card {
		padding-bottom:15px;
	}
	
	#card li {
		font-size: 11px;
	}
	
	#card h4 {
		padding-bottom:20px;
		margin-bottom:5px;
		border-bottom:1px solid #ff0030;
	}
	
	span.a-right {
		padding-right:10px;
		color:#ff0030;
		width:25px;
		display:block;
		float:left;
	}
	
	#footer {
		margin-bottom:20px;
		background: #efefef;
	}
	
	#footer .seven {
		padding:25px 0 20px 0;
		font-size:11px;
		border-top:5px solid #f7f7f7;
	}
	
	#footer p {
		margin-left:20px;
	}
	
	#footer li {
		margin-right:20px;
		display: inline;
		float: left;
	}