/*
Pixelpanic (pixelpanic.be)
Door Pixelpanic.be (versie 31-12-2009)
*/

/* HTML selectors */
body {
	font: 14px Arial, Helvetica, sans-serif;
	color: #fff;
	background: #333 url(../img/back.png);
}
body, p, ul, li, form, img, h1, h2, h3, h4, h5, h6, dl, dt, dd {
	margin: 0;
	padding: 0;
}
p, ul, dl {
	padding-bottom: 20px;
}
h1, h2, h3, h4, h5, h6 {
	font-weight: normal;
}
h1 {
	font: 18px Georgia, "Times New Roman", Times, serif;
	margin-bottom: 15px;
	color: #745724;
}
#about h1 {
	font-size: 26px;
	margin-bottom: 15px;
	color: #7E7966;
}
#about h1 span {
	font-size: 16px;
}
#p1 #intro h2 {
	font-size: 22px;
	margin-bottom: 15px;
	color: #D86B11;
}
#p1 #about h2 {
	font-size: 14px;
	margin-bottom: 15px;
	color: #7E7966;
}
#content h2 {
	font-size: 24px;
	margin-bottom: 15px;
	color: #D86B11;
}
#content h2.fcor {
	margin-top: 4px; /* correctie op hoogte baseline van tekst afhankelijk van gebruikte karakters */
}
#content h2.split {
	border-top: 1px solid #E8E3CB;
	padding-top: 15px;
}
#p1 #content h2.up {
	margin-bottom: 11px; /* door padding op li */
}
#p1 #content .c1 h2.flow {
	background: url(../img/flow.png) no-repeat 265px 13px;
}
h3 {
	font-size: 18px;
	margin-bottom: 15px;
	color: #7E7966;
}
h3.script {
	font-size: 16px;
	color: #fff;
}
#p1 #about h4 {
	font-size: 18px;
	margin-bottom: 10px;
	color: #000;
	background: url(../img/logo_monomail.png) no-repeat;
	width: 158px;
	height: 31px;
}
#p1 #about h4 span {
	display: none;
}
#p1 #content .project h4 {
	font-size: 16px;
	margin-bottom: 14px;
}
#p1 #content .project.active h4 {
	color: #D86B11;
}
#p1 #content .project p {
	font-size: 12px;
	padding: 0;
	line-height: 18px;
}
h5 {
	font-size: 10px;
	color: #B8B5A5;
	line-height: 16px;
}

/* Positie */
.container {
	margin: 0 auto;
	width: 960px;
}
.clear:after {
	visibility: hidden;
	display: block;
	font-size: 0;
	content: " ";
	clear: both;
	height: 0;
}
* html .clear { zoom: 1; } /* IE6 */
*:first-child+html .clear { zoom: 1; } /* IE7 */

/* Links */
a {
	color: #74B5D6;
}
a:hover, a:active {
	color: #D86B11;
}
#p1 #intro a {
	color: #74B5D6;
	text-decoration: none;
}
#p1 #intro a:hover, #p1 #intro a:active {
	color: #fff;
	text-decoration: underline;
}
#p1 #about a, #p1 #content .c1 .info a, #p1 #content .c3 a, #p2 a, #p3 a, #p1 #about .c12 .reactie a {
	color: #7E7966;
}
#p1 #about .c12 h2 a {
	color: #7E7966;
	text-decoration: underline;
}
#p1 #about .c12 h2 a:hover, #p1 #about .c12 h2 a:active {
	color: #000;
	text-decoration: underline;
}
#p1 #about a:hover, #p1 #about a:active, #p1 #content .c1 .info a:hover, #p1 #content .c1 .info a:active, #p1 #content .c3 a:hover, #p1 #content .c3 a:active, #p2 a:hover, #p2 a:active, #p3 a:hover, #p3 a:active, #p1 #about .c12 .reactie a:hover, #p1 #about .c12 .reactie a:active {
	color: #000;
}
#p1 #about .c3 a, #p1 #content .updates li a, #p1 #about .c12 a, #p1 #content p a {
	color: #000;
}
#p1 #about .c3 a:hover, #p1 #about .c3 a:active, #p1 #content .updates li a:hover, #p1 #content .updates li a:active, #p1 #about .c12 a:hover, #p1 #about .c12 a:active, #p1 #content p a:hover , #p1 #content p a:active {
	color: #D86B11;
}
#p1 .footer a {
	color: #4B832F;
}
#p1 .footer a:hover, #p1 .footer a:active {
	color: #fff;
}
#p1 #content .updates li span a {
	color: #7E7966;
	font-size: 11px;
	text-decoration: none;
}
#p1 #content .updates li span a:hover, #p1 #content .updates li span a:active {
	text-decoration: underline;
}

/* Header */
#p1 .header {
	background: url(../img/back_header.png) repeat-x;
}
#p1 .header .container {
	background: url(../img/header.png) no-repeat;
	height: 74px;
	width: 905px;
	padding: 82px 0 0 55px;
}
#p1 .header h1 a {
	display: block;
	width: 254px;
	height: 41px;
	background: url(../img/logo.png) no-repeat;
}
#p1 .header h1 a:hover, #p1 .header h1 a:active {
	background: url(../img/logo.png) no-repeat 0 -41px;
}
#p1 .header h1 span {
	display: none;
}
#p2 .header, #p2 .main, #p2 .footer {
	width: 620px;
	margin-left: 280px;
}
#p2 .header {
	background: url(../img/back_p2.png) no-repeat;
	height: 25px;
}
#p3 .header, #p3 .main, #p3 .footer {
	width: 720px;
	margin-left: 60px;
}
#p3 .header {
	background: url(../img/back_p3.png) no-repeat;
	height: 25px;
}

/* Main */
#p1 .main .container {
	background: url(../img/back_main.png) repeat-y;
	padding: 0 20px;
	width: 920px;
}
#p2 .main  {
	color: #7E7966;
	background: url(../img/back_main_p2.png) repeat-y;
	padding: 15px 45px 10px 45px;
	width: 530px;
	text-shadow:1px 1px 1px #F9F8F2;
}
#p2 .main p, #p3 .main p  {
	line-height: 20px;
}
#p2 .main p {
	padding-bottom: 15px;
}
#p2 .main .c1 {
	float: left;
	width: 390px;
}
#p2 .main .c1 ul {
	padding-bottom: 5px;
	list-style: none;
	font-size: 12px;
	line-height: 18px;
}
#p2 .main .c1 ul li {
	background: url(../img/bullet_orange_s.png) no-repeat 0 7px;
	padding-left: 12px;
}
#p2 .main .c2 {
	float: right;
	width: 110px;
}
#p2 .main .c3 {
	width: 170px;
	float: left;
}
#p2 .main .c4 {
	width: 170px;
	float: right;
	border-left: 1px solid #DED5B3;
	padding-left: 20px;
}
#p2 .main .c3 ul, #p2 .main .c4 ul {
	padding-bottom: 5px;
}
#p2 .main .c3 ul li, #p2 .main .c4 ul li {
	list-style: none;
	font-size: 12px;
	line-height: 18px;
	background: url(../img/bullet_orange_s.png) no-repeat 0 7px;
	padding-left: 12px;
}
#p2 .main .c2 ul {
	list-style: none;
}
#p2 .main .c2 ul li {
	line-height: 24px;
	padding-left: 26px;
}
#p2 .main .c2 ul li.twitter {
	background: url(../img/socialicons.png) no-repeat 0 4px;
}
#p2 .main .c2 ul li.facebook {
	background: url(../img/socialicons.png) no-repeat 0 -21px;
}
#p2 .main .c2 ul li.linkedin {
	background: url(../img/socialicons.png) no-repeat 0 -46px;
}
#p2 .main .c2 ul li.flickr {
	background: url(../img/socialicons.png) no-repeat 0 -71px;
}
#p2 .main .c2 ul li.delicious {
	background: url(../img/socialicons.png) no-repeat 0 -96px;
}
#p3 .main  {
	color: #7E7966;
	background: url(../img/back_main_p3.png) repeat-y;
	padding: 15px 45px 10px 45px;
	width: 630px;
	text-shadow:1px 1px 1px #F9F8F2;
}
#p3 .main p {
	padding: 0 0 10px 326px;
	background: url(../img/logo_projects.png) no-repeat;
}

/* Intro */
#p1 #intro {
	background: #333 url(../img/back_intro.png) no-repeat;
	padding: 50px 25px 20px 25px;
	border-bottom: 1px solid #000;
	text-shadow: 1px 1px 1px #141414;
}
#p1 #intro p {
	line-height: 20px;
	padding-bottom: 15px;
}
#p1 #intro ul, #p1 #about .c12 ul {
	list-style: none;
	padding: 0;
}
#p1 #intro .c1 li {
	padding-left: 15px;
	background: url(../img/bullet_intro.png) no-repeat center left;
	line-height: 20px;
}
#p1 #intro .c1 {
	width: 510px;
	float: left;
}
#p1 #intro .c2 {
	width: 332px;
	float: right;
}
#p1 #intro #large {
	background: #5C5C5C;
	padding: 10px;
	height: 152px;
	-khtml-border-radius: 4px;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	border-radius: 4px;
}
#p1 #intro #large ul, #p1 #intro #large ul li, #p1 #intro #large ul a, #p1 #intro #large ul li img {
	margin: 	0;
	padding: 0;
	list-style: none;
	border: 0;
	text-decoration: none;
}
#p1 #intro #large ul li {
	position:relative;
	float:left;
}
#p1 #intro #large ul li a {
	display: block;
	position: relative;
	background: url(../img/overlay_large.png) no-repeat;
	width: 310px;
	height: 150px;
	overflow:hidden;
	z-index:1;
	float:left;
	text-indent:-1000em;
	border: 1px solid #333;
}
#p1 #intro #large ul li a:hover, #p1 #intro #large ul li a:active {
	border: 1px solid #fff;
}
#p1 #intro #large ul img {
	position: absolute;
	width:310px;
	height:150px;
	top: 1px;
	left: 1px;
}

/* Slideshow */
#p1 #slider, #p1 #autoslider {
	margin-bottom: 20px;
	position: relative;
}
#p1 #slider ul, #p1 #slider li, #p1 #autoslider ul, #p1 #autoslider li {
	margin: 0;
	padding: 0;
	list-style: none;
}
#p1 ol#controls, #p1 #intro #large ul.label {
	margin: 0;
	padding: 0;
	margin-left: -10px;
}
#p1 ol#controls li, #p1 #intro #large ul.label li {
	font-size: 12px;
	margin: 0 10px 0 0;
	padding: 0;
	float: left;
	list-style: none;
}
#p1 ol#controls li a, #p1 #intro #large ul.label li {
	float: left;
	background: #5C5C5C;
	color: #fff;
	padding: 2px 8px;
	text-decoration: none;
	text-shadow: 1px 1px 1px #333;
	-khtml-border-radius: 4px;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	border-radius: 4px;
}
#p1 #intro #large ul.label li {
	color: #999;
	padding-left: 20px;
	background: #5C5C5C url(../img/label.png) no-repeat;
}
#p1 ol#controls li a:hover, #p1 #intro #large ol#controls li a:active {
	background: #74B5D6;
	text-decoration: none;
}
#p1 ol#controls li.current a {
	background: #74B5D6;
	color: #fff;
}
#p1 ol#controls li a:focus {
	outline: none;
}

/* About */
#p1 #about {
	color: #7E7966;
	background: #E8E3CB;
	border-bottom: 1px solid #DED5B3;
	padding: 20px 25px 0px 25px;
	text-shadow:1px 1px 1px #F9F8F2;
}
#p1 #about .c1, #p1 #content .c1 {
	float: left;
	width: 325px;
	padding-right: 25px;
}
#p1 #content .c1 {
	padding-right: 20px;
	width: 310px;
	margin-right: 20px;
}
#p1 #content .c1.alt {
	padding-bottom: 5px;
}
#p1 #about .c2, #p1 #content .c2 {
	float: left;
	width: 310px;
}
#p1 #about .c12 {
	color: #000;
	float: left;
	width: 660px;
	line-height: 20px;
	margin-top: -6px;
}
#p1 #about .c12 ul {
	padding-bottom: 20px;
}
#p1 #about .c12 li {
	padding-left: 15px;
	background: url(../img/bullet_about.png) no-repeat 0 7px;
	line-height: 20px;
}
#p1 #about .c12 .reactie {
	background: #F3F2E4;
	-khtml-border-radius: 4px;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	border-radius: 4px;
	padding: 16px 20px;
	margin-bottom: 20px;
}
#p1 #about .c12 .reactie div {
	border-top: 1px solid #E8E3CB;
	color: #7E7966;
	margin-top: 15px;
	padding-top: 15px;
}
#p1 #content .c2 {
	margin: 0 0 5px 0;
}
#p1 #content .c2.alt {
	margin: 44px 0 5px 0;
}
#p1 #about .c3, #p1 #content .c3 {
	float: right;
	width: 160px;
	border-left: 1px solid #DED5B3;
	padding-left: 25px;
}
#p1 #about .c1, #p1 #content .c3 {
	line-height: 20px;
	color: #7E7966;
}
#p1 #about .c1 p {
	margin-top: 2px;
}
#p1 #about .c2, #p1 #about .c3 {
	color: #000;
	font-size: 12px;
	line-height: 18px;
}
#p1 #about .c3 p.ss {
	background: url(../img/flowshow.png) no-repeat 110px 0;
	font-style: italic;
	padding-top: 25px;
}
#p1 #about .c2 ul {
	list-style: none;
	padding-bottom: 15px;
}
#p1 #about .c2 ul li {
	padding-left: 12px;
	background: url(../img/bullet_orange_s.png) no-repeat 0 7px;
}

/* Content */
#p1 #content {
	color: #000;
	background: #F3F2E4;
	padding: 16px 25px 0px 25px; /* minder top vanwege cufon */
	line-height: 20px;
	text-shadow:1px 1px 1px #fff;
}
#p1 #content .c3 {
	border-left: 1px solid #E8E3CB;
}
#p1 #content .c3 p {
	padding-bottom: 10px;
	font-size: 12px;
	line-height: 18px;
}
#p1 #content .c3 p.alt {
	padding-bottom: 15px;
}
#p1 #content .updates {
	list-style: none;
	padding-bottom: 10px;
}
#p1 #content .updates li {
	border-bottom: 1px solid #E8E3CB;
	line-height: 20px;
	padding: 4px 0;
}
#p1 #content .updates li span {
	color: #7E7966;
	font-size: 11px;
}
#p1 #content .c1 .info {
	color: #7E7966;
	font-size: 12px;
}
#p1 #content .project {
	margin-bottom: 15px;
}
#p1 #content .project.active {
	background: #E8E3CB;
	-khtml-border-radius: 4px;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	border-radius: 4px;
}
#p1 #content .project .pr-shot {
	width: 75px;
	float: left;
	position: relative;
}
#p1 #content .project .pr-desc {
	width: 220px;
	padding-right: 5px;
	float: right;
}
#p1 #content .project .pr-shot img {
	background: #fff;
	padding: 4px;
}
#p1 #content .project .pr-shot a img {
	border: 1px solid #DED5B3;
	display: block;
}
#p1 #content .project .pr-shot a:hover img, #p1 #content .project .pr-shot a:active img {
	border: 1px solid #D86B11;
}
#p1 #content .project .pr-shot span {
	position: absolute;
	background: url(../img/overlay_thumb.png) no-repeat;
	display: block;
	width: 60px;
	height: 60px;
	top: 5px;
	left: 5px;
	cursor: pointer;
}

/* Footer */
#p1 .footer .container {
	font-size: 12px;
	color: #4B832F;
	background: url(../img/footer.png) no-repeat;
	width: 895px;
	padding: 18px 0 0 65px;
}
#p1 .footer p {
	line-height: 16px;
	text-shadow: 1px 1px 1px #B0DD9B;
}
#p1 .footer h3 {
	margin: 45px 0 20px 40px;
}
#p2 .footer {
	background: url(../img/back_p2.png) no-repeat 0 -25px;
}
#p2 .footer h3 {
	padding: 50px 0 20px 320px;
}
#p3 .footer {
	background: url(../img/back_p3.png) no-repeat 0 -25px;
}
#p3 .footer h3 {
	padding: 110px 0 0 120px;
	margin-bottom: 10px;
}
#p3 #world {
	background: url(../img/world.png) no-repeat;
	height: 100px;
	width: 260px;
	margin: 0 0 20px 290px;
}

/* End */
#end {
	height: 10px;
	background: #232323;
}