@charset "utf-8";

/* Basic Layout */

body { background: url('/images/body-background.png') top left repeat-x; overflow-x: hidden; }
div#wrapper { position: relative; }
div.dotted { height: 39px; border-bottom: 1px dotted #dcdcdc; margin: 0 10px 39px 10px; }
.border-bottom { padding: 0 0 9px 0; border-bottom: 2px solid #dcdcdc; }

/* Header */

div#panda-background { background: url('/images/panda-background.png') top left no-repeat; width: 467px; height: 342px; position: absolute; top: 0; right: -120px; }
img#panda { width: 467px; height: 342px; }
h1 { background: url('/images/h1.png') top left no-repeat; width: 363px; height: 100px; margin: 18px 0 9px 0; text-indent: -999em; }

/* Primary Nav */

div#nav { height: 49px; position: relative; top: 33px; left: -10px; margin: 0 0 71px 0; }
div#nav > div, div#nav > ul { float: left; }
	div#nav-left { background: url('/images/nav-left.png') top left no-repeat; width: 20px; height: 49px; }
	ul#primary { background: url('/images/primary-background.png') top left repeat-x; height: 49px; margin: 0; padding: 0; }
		ul#primary > li { display: block; float: left; margin: 0 10px; padding: 3px 0 0 0; }
	div#nav-right { background: url('/images/nav-right.png') top left no-repeat; width: 20px; height: 49px; }

/* Services */

	h2.services { font-family: "bistro-script-web-1","bistro-script-web-2", serif; font-size: 60px; font-weight: normal; margin: -29px 0 49px 0; border: none; color: #525252; line-height: 1em; }
	div.service { padding: 0 0 14px 0; }
	div.service p { padding: 10px 0 0 54px; }
	div#website_met_cms { background: url('/images/services/cms.png') bottom left no-repeat; }
	div#front_end_ontwikkeling { background: url('/images/services/frontend.png') bottom left no-repeat; }
	div#zoekmachine_optimalisatie { background: url('/images/services/seo.png') bottom left no-repeat; }
	div#e_mailmarketing { background: url('/images/services/mail.png') bottom left no-repeat; }
	
/* Spotlight */

	h2.spotlight { font-family: "bistro-script-web-1","bistro-script-web-2", serif; font-size: 60px; font-weight: normal; margin: -29px 0 49px 0; border: none; color: #525252; line-height: 1em; }
	div#spotlight { width: 940px; height: 278px; }
	div.panel { position: relative; height: 278px; }
	div#spotlight div:first-child { display: block; }
	div.bar { position: absolute; bottom: 0; left: 0; width: 100%; height: 42px; z-index: 2; background: rgba(0,0,0,0.8); }
		div.bar h3 { position: absolute; top: 2px; left: 10px; }
		div.bar div.details { position: absolute; top: 0; right: 10px; }
		div.bar p { float: left; margin: 6px 0; width: 300px; }
	div.spotlight-image img { box-shadow:inset 0 0 15px #000, -moz-box-shadow:inset 0 0 15px #000, -webkit-box-shadow:inset 0 0 15px #000; }
		
/* Weblog */

	h2#weblog { font-family: "bistro-script-web-1","bistro-script-web-2", serif; font-size: 60px; font-weight: normal; margin: -29px 0 49px 0; border: none; color: #525252; line-height: 1em; }
	div.grid_6.weblog { margin-right: 0; }
	div.date { float: left; background: url('/images/date-background.png') top left no-repeat; position: relative; left: -16px; top: -8px; width: 70px; height: 106px; }
		div.date > div.container { padding: 18px 0 45px 0; }
		div.more { height: 106px; background: url('/images/more.png') top left no-repeat; position: relative; left: -20px; }
		div.more h4 { padding: 10px 25px; }
	div.blog-entry { margin: 0 0 15px 0; }
	
/* Footer */
	
	div.footer { background: url('/images/footer-background.png') bottom left repeat-x; clear: both; height: 330px; }
	div.footer > div.container_12 { padding: 96px 0 0 0; }
	div.footer p { text-shadow: 0 1px #dcdcdc; }
	h3.footer { font-family: "bistro-script-web-1","bistro-script-web-2", serif; font-size: 48px; font-weight: normal; margin: -29px 0 29px 0; border: none; color: #36a30a; line-height: 1em; text-shadow: 0 1px #dcdcdc; }
	
/* Cases */
	
	ul.cases { display: inline; }
	ul.cases li { display: inline; }
	img.case-thumbnail { width: 280px; padding: 9px; border: 1px solid #ccc; margin: 0 10px 10px 0; clear: right }
	h2.cases { font-family: "bistro-script-web-1","bistro-script-web-2", serif; font-size: 60px; font-weight: normal; margin: -29px 0 49px 0; border: none; color: #525252; line-height: 1em; }
	
/* Commentform */
	form.commentform { border-top: 2px solid #dcdcdc; padding: 16px 0 0 0; margin: 16px 0 0 0; }
	form.commentform label { width: 280px; display: block; float: left; clear: left; padding: 5px 0 0 0; }
	form.commentform input[type="submit"] { float: left; clear: left; background: url('/images/submit.png') top left no-repeat; width: 300px; height: 58px; position: relative; left: -10px; border: none; cursor: pointer; text-align: left; vertical-align: top; color: white; padding: 0 0 20px 10px;  }
	form.commentform input[type="submit"]:hover { background: url('/images/submit-hover.png') top left no-repeat; text-decoration: underline; }
	form.commentform input[type="text"], textarea { border: 1px solid #dcdcdc; padding: 3px; margin: 0 0 4px 0; }
	input#submit { margin: 16px 0 0 0; }

/* Typography */

p,li,label,input,textarea { font-family: Helvetica, Arial, sans-serif; font-size: 13px; line-height: 1.3em; color: #525252; }
ul#primary a { font-family: "museo-1", "museo-2", serif; text-transform: capitalize; color: white; font-weight: 700; font-size: 30px; line-height: 1.3em; text-decoration: none; text-shadow: 1px 1px 2px rgba(0,0,0,0.4); }
	ul#primary a:hover, ul#primary a.active { color: #ccc; }
	
	p a, div.weblog li a { font-weight: bold; color: #82644b; text-decoration: none; }
	p a:hover, div.weblog li a:hover { border-bottom: 1px dotted #82644b; }
	
	div.service h3 { font-size: 15px; color: #36a30a; font-weight: normal; font-family: "museo-1", "museo-2", serif; font-weight: 300; padding: 0 0 15px 0; margin: 0 0 9px 0; border-bottom: 1px dotted #dcdcdc; }
	div.service a { color: #525252; text-decoration: none; }
	div.service a:hover { border-bottom: 1px dotted #525252; }
	
	div#spotlight-container { height: 278px; }
	div#spotlight h3 { font-family: "museo-1", "museo-2", serif; color: white; text-transform: capitalize; font-size: 32px; line-height: 1.2em; padding: 0; }
	div#spotlight p { color: #ccc; line-height: 15px; text-align: right; }
	div#spotlight div.details > p:first-child { text-align: left; }
	div#spotlight p a { font-weight: bold; text-decoration: none; color: #ccc; }
	div#spotlight p a:hover { color: white; border-bottom: 1px dotted white; }
	
	div.footer a { color: #36a30a; font-weight: bold; text-decoration: none; }
	div.footer a:hover { color: #36a30a; border-bottom: 1px dotted #36a30a; }
	
	div.case-details h3 { margin: 15px 0 9px 0; padding: 9px 0 9px 0; border-bottom: 1px dotted #dcdcdc; border-top: 2px solid #dcdcdc; font-family: "museo-1", "museo-2", serif; font-size: 18px; font-weight: bold; color: #36a30a; }
	
	div.weblog h3, div.weblog h2, h2.case-title { font-family: "museo-1", "museo-2", serif; color: #36a30a; font-weight: normal; }
	h2.case-title { padding-top: 9px; border-top: 2px solid #dcdcdc; margin: 0 0 16px 0;}
	div.weblog h3 { font-size: 21px; margin: 6px 0 9px 0; padding: 0 0 9px 0; border-bottom: 1px dotted #dcdcdc; }
	div.weblog h2 { font-size: 34px; padding: 0 0 9px 0; border-bottom: 1px dotted #dcdcdc; margin: 0 0 9px 0; }
	h2#comments { border-top: 2px solid #dcdcdc; padding: 9px 0 16px 0; margin: 36px 0 16px 0; }
	div.weblog p.categories { padding: 0 0 9px 0; border-bottom: 1px dotted #dcdcdc; }
	div.weblog ul, div.weblog ol { margin: 0 0 1.3em 0; }
	div.weblog li { padding: 5px 0 9px 27px; border-bottom: 1px dotted #dcdcdc; margin: 0 0 4px 0; }
	div.weblog ul > li:last-child { border: none; }
	p.categories strong { color: #36a30a; }
	ul.categories { text-transform: capitalize; }
	ul.categories a { color: #82644b; text-decoration: none; }
	ul.categories a:hover { border-bottom: 1px dotted #82644b; }
	h2.case-title, div.weblog h2 { font-size: 36px; }
	div.date { color: white; font-family: "museo-1", "museo-2", serif; text-align: center; line-height: 1em; }
	div.date .date-d { font-weight: normal; font-size: 30px; }
	div.date .date-m { font-size: 13px; line-height: 1em; text-transform: lowercase; font-weight: 300; }
	div.weblog p, div.footer p, div.case-details p { margin-bottom: 1.3em; }
	div.more h4 { font-family: "museo-1", "museo-2", serif; font-size: 21px; font-weight: bold; text-transform: capitalize; color: white; line-height: 1.4em; }
	div.more h4 a { color: white; text-decoration: none; }
	div.more h4 a:hover { color: #ccc; }
	
	div.feed { text-shadow: 0 1px #dcdcdc; }
	div.feed h3 { font-family: "bistro-script-web-1","bistro-script-web-2", serif; font-size: 36px; font-weight: normal; margin: -19px 0 29px 0; border: none; color: #36a30a; line-height: 1em;  }
	div.feed li { margin: 0 0 4px 0; }
	div.feed ul > li > a { color: #525252; }
	div.feed ul > li > a:hover { color: #525252; border-bottom: 1px dotted #525252; }
	div#header h2#catch { font-family: "museo-1", "museo-2", serif; font-size: 24px; line-height: 1.3em; text-shadow: 0px 1px white; color: #525252; font-weight: 300; margin: 11px 0 -12px 0; width: 70%; text-transform: lowercase;  }
	
	
/* Script Specific CSS */
	
	/* Coda-slider */

		.coda-slider-wrapper { height: 278px; }
		.coda-slider-no-js .coda-slider { height: 200px; overflow: auto !important;}
		.coda-slider, .coda-slider .panel { width: 940px; position: relative; } 
		.coda-slider-wrapper.arrows .coda-slider, .coda-slider-wrapper.arrows .coda-slider .panel { width: 940px; }
		.coda-slider-wrapper.arrows .coda-slider { margin: 0; }
		.coda-nav-left a, .coda-nav-right a { display: none; }	
		.coda-slider p.loading { padding: 20px; text-align: center }			

		#inner-body .coda-nav ul { clear: both; display: block; margin: auto; overflow: hidden }
		#inner-body .coda-nav ul li { display: inline }
		#inner-body .coda-nav ul li a { background: #000; color: #fff; display: block; float: left; margin-right: 1px; padding: 3px 6px; text-decoration: none }	

		.coda-slider-wrapper { clear: both; overflow: auto }
		.coda-slider { float: left; overflow: hidden; position: relative }
		.coda-slider .panel { display: block; float: left }
		.coda-slider .panel-container { position: relative }
		.coda-nav-left, .coda-nav-right { float: left }
		.coda-nav-left a, .coda-nav-right a { display: block; text-align: center; text-decoration: none }