/* ********************************************
Author: Eggink Automatisering
URL: http://www.egginkautomatisering.nl
Copyright (c) 2010 All Rights Reserved
*********************************************** */

/* =Reset
-----------------------------------------------------------------------*/
* {
    margin:0;
	padding:0;
}

html, body {
	background-color:#fff;
	height:100%;
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	line-height:22px;
	color:#666;
}

p {
	margin:0 0 22px 0;
}

img {
	border:none;
}

ul {
	list-style-type:none;
}

/* =Headings
-----------------------------------------------------------------------*/
h1, h1 a {
	font-size:28px;
	color:#666;
	margin-bottom:5px;
}

h2, h2 a {
	font-size:20px;
	color:#666;
	margin:10px 0 3px 0;
}

h3, h3 a {
	font-size:18px;
	color:#666;
	margin:0 0 10px -1px;
}

h4, h4 a {
	font-size:15px;
	color:#666;
	display:inline;	
}

h5, h5 a {
	font-size:14px;
	color:#ababab;
	margin-bottom:11px;
}

h6, h6 a {
	font-size:12px;
	color:#ababab;
	margin-bottom:6px;
}

h1 a:hover,
h2 a:hover,
h3 a:hover, 
h4 a:hover,
h5 a:hover, 
h6 a:hover {
	color:#00a2ff;
	text-decoration:none;
}

/* =Framework
-----------------------------------------------------------------------*/
#topline {
	height:13px;
	width:100%;
	background-color:#00a2ff;
	margin:0px;
}

#wrapper {
	width:950px;
	margin:0 auto;
}

/* Header */
#top {
	height:77px;
}

/* Logo */
#top .logo {
	background:transparent url(../images/logo.png) no-repeat;
	height:100px;
	width:300px;
	margin-top:5px;
	float:right;
}

#top .logo span {
	display:none;
}

/* Footer */
#footer {
	background-color:#181818;
	height:145px;
	color:#666;
	margin-top:50px;
	clear:both;
}

#footer_wrapper {
	width:950px;
	margin:0 auto;
	padding:28px 0 28px 0;
}

/* Copyright */
#copyright {
	height:89px;
	width:311px;
	border-right:1px solid #0f0f0f;
	float:left;
}

#copyright .copy {
	margin-top:17px;
}

/* Laatste posts */
#laatste_posts {
	background:transparent url(../images/head_posts.gif) no-repeat;
	height:71px;
	width:311px;
	border-left:1px solid #202020;
	border-right:1px solid #0f0f0f;
	float:left;
	padding:18px 0 0 13px;
}

/* Social media */
#connect {
	background:transparent url(../images/head_connect.gif) no-repeat;
	height:71px;
	width:166px;
	padding:18px 0 0 13px;
	border-left:1px solid #202020;
	border-right:1px solid #0f0f0f;
	float:left;
}

/* Connect */
#connect p, 
#laatste_posts p {
	margin:0 0 4px 0;
}

#connect a, 
#laatste_posts a {
	color:#bbbbbb;
	border-bottom:1px dotted #707070;
}

#connect a:hover, 
#laatste_posts a:hover {
	color:#bbbbbb;
	text-decoration:none;
	border:none;
}

/* Naar boven button */
#naarboven {
	width:122px;
	height:89px;
	border-left:1px solid #202020;
	padding-left:8px;
	float:right;
}

/* =Navigatie
-----------------------------------------------------------------------*/
ul#nav {
	margin-top:23px;
	float:left;
}

ul#nav li {
	margin-left: 20px;
	float:left;
}

#nav a {
	background-position:0 0;
}

#linkHome {
	background:transparent url(../images/btn_home.png) no-repeat;
	height:18px;
	width:43px;
	text-indent:-9999px;
	display:block;
}

#linkPortfolio {
	background:transparent url(../images/btn_portfolio.png) no-repeat;
	height:18px;
	width:81px;
	text-indent:-9999px;
	display:block;
}

#linkBlog {
	background:transparent url(../images/btn_blog.png) no-repeat;
	height:18px;
	width:37px;
	text-indent:-9999px;
	display:block;
}

#linkContact {
	background:transparent url(../images/btn_contact.png) no-repeat;
	height:18px;
	width:67px;
	text-indent:-9999px;
	display:block;
}

#nav li a:hover {
	background-position:left -19px;
}

#nav a#linkHome.current,
#nav a#linkPortfolio.current,
#nav a#linkBlog.current,
#nav a#linkContact.current {
	background-position:left -38px;
}

/* =Links
-----------------------------------------------------------------------*/
a {
	color:#00a2ff;
	text-decoration:none;
	outline:none;
}

a:hover, a:active {
	text-decoration:underline;
}

.weblink {
  	background:url(../images/btn_web.gif) no-repeat;
	height:20px;
	width:42px;
	display:block;
	outline:none;
}

.printlink {
  	background:url(../images/btn_print.gif) no-repeat;
	width:51px;
	height:20px;
	display:block;
	outline:none;
}

.identitylink {
  	background:url(../images/btn_identity.gif) no-repeat;
	width:73px;
	height:20px;
	display:block;
	outline:none;
}

.weblink:hover,
.printlink:hover,
.identitylink:hover { 
  	background-position:left -21px;
}

.weblink span,
.printlink span,
.identitylink span {
	display:none;
}

.details a {
	color:#666;
}

.details a:hover {
	color:#666;
}

/* =Homepagina
-----------------------------------------------------------------------*/
#intro_home {
	background:transparent url(../images/head_home.png) no-repeat;
	height:121px;
	margin-top:20px;
	border-top:1px dotted #ccc;
	border-bottom:1px dotted #ccc;
}

/* Wrapper */
#content_home {
	height:294px;
	width:950px;
	margin-top:30px;
}

/* Content column */
.column {
	width:298px;
	margin-right:28px;
	float:left;
}

.column_last {
	width:298px;
	margin:0;
	float:left;
}

.column img {
	background-color:#fff;
	height:75px;
	width:75px;
	margin:5px 5px 0 0;
	padding:3px;
	border:1px solid #ccc;
	float:left;
}

/* Column headings */
.column h4 {
	color:#707070;
	font-size:22px;
	text-transform:none;
	margin-bottom:8px;
	display:block;
}

.column_last h4 {
	color:#707070;
	font-size:22px;
	text-transform:none;
	margin-bottom:15px;
	display:block;
}

/* Laatste blogposts home */
.blogpost {
	height:73px;
	width:298px;
	margin-bottom:20px;
	float:left;
}

.blogpost img {
	background-color:#fff;
	height:65px;
	width:65px;
	padding:3px;
	border:1px solid #ccc;
	float:left;
}

.blogpost_content {
	width:215px;
	float:right;
}

/* Blogposts headings */
.blogpost h3, .blogpost h3 a {
	font-size:12px;
	margin:-3px 0 2px 0;
}

.blogpost_content h6 {
	margin:0 0 14px 0;
	display:block;
}

/* =Portfolio
-----------------------------------------------------------------------*/
/* Header */
#intro_portfolio {
	background:transparent url(../images/head_portfolio.png) no-repeat;
	height:121px;
	margin-top:20px;
	border-top:1px dotted #ccc;
	border-bottom:1px dotted #ccc;
}

/* Keuzebuttons */
#topbuttons {
	width:950px;
	margin:30px 0 30px 0;
}

#topbuttons ul {
	height:20px;
	list-style:none;
}

#topbuttons li {
	margin-right:20px;
	float:left;
}

/* Wrapper */
.portproject {
	height:439px;
	margin-top:20px;
	border-bottom:1px dotted #ccc;
}

/* Laatste project zonder border-bottom */
.portproject_last {
	height:418px;
	margin-top:20px;
}

.project_img {
	height:400px;
	float:left;
}

.project_content {
	width:256px;
	float:right;
}

/* Checklist opgeleverde producten */
ul.checklist {
	padding:0;
	list-style:none;
}

.checklist li {
	background:url(../images/bullet_check.gif) no-repeat scroll;
	height:25px;
	padding-left:22px;
}

/* =Blog
-----------------------------------------------------------------------*/
/* Header */
#intro_blog {
	background:transparent url(../images/head_blog.png) no-repeat;
	height:121px;
	margin-top:20px;
	border-top:1px dotted #ccc;
	border-bottom:1px dotted #ccc;
}

/* Wrapper */
#blog_wrapper {
	width:950px;
	margin:24px 0 0 0;
	display:inline-block;
}

/* Laatste blogpost */
#toppost {
	height:308px;
	margin-bottom:2px;
}

#toppost_content {
	width:426px;
	float:left;
}

#toppost_img {
	background-color:#fff;
	height:300px;
	width:468px;
	padding:3px;
	border:1px solid #ccc;
	float:right;
}

/* Lees verder button */
.moreblog {
	background:url(../images/btn_verder.gif) no-repeat;
	height:20px;
	width:98px;
	padding:0;
	margin-top:-6px;
	display:block;
	outline:none;
}

.moreblog:hover { 
  	background-position:left -21px;
}

.moreblog span {
	display:none;
}

/* Oudere blogposts */
.post {
	height:350px;
	width:298px;
	margin:28px 28px 0 0;
	float:left;
	position:relative;
}

.post_img {
	background-color:#fff;
	height:170px;
	width:290px;
	padding:3px;
	border:1px solid #ccc;
}

.lastpost {
	height:350px;
	width:298px;
	margin:28px 0 0 0;
	float:left;
	position:relative;
}

.post .moreblog,
.lastpost .moreblog {
	background:url(../images/btn_verder.gif) no-repeat;
	height:20px;
	width:98px;
	padding:0;
	margin-top:-6px;
	display:block;
	outline:none;
	position:absolute;
	bottom:0;
}

.post .moreblog:hover,
.lastpost .moreblog:hover{ 
  	background-position:left -21px;
}

.post .moreblog span,
.lastpost .moreblog span {
	display:none;
}

/* Blogpagina content */
#blog_left {
	width:700px;
	float:left;
}

#blog_left .topimg {
	background-color:#fff;
	padding:3px;
	margin-top:10px;
	border:1px solid #ccc;
}

#blog_left img {
	background-color:#fff;
	padding:3px;
	margin:0;
	border:1px solid #ccc;
}

#blog_left .leftimg {
	background-color:#fff;
	padding:3px;
	margin:10px 12px 0 0;
	border:1px solid #ccc;
}

/* Blog content headings */
#blog_left h4 {
	font-size:22px;
	color:#666;
	text-transform:none;
	margin:18px 0 23px 0;
	display:block;
}

#blog_left h5 {
	font-size:16px;
	text-transform:none;
	margin-bottom:2px;
	color:#ABABAB;
}

/* Blog menu */
#blog_right {
	width:220px;
	float:right;
}

/* Blog menu headings */
#blog_right h4 {
	color:#707070;
	font-size:22px;
	text-transform:none;
	margin:6px 0 30px 0;
	display:block;
}

/* Recente posts blogpagina */
.recent_post {
	margin-bottom:16px;
}

/* Recente posts headings */
.recent_post h3, .recent_post h3 a {
	font-size:12px;
	margin:8px 0 2px 0;
}

.recent_post h6 {
	display:block;
}

/* =Contact
-----------------------------------------------------------------------*/
/* Header */
#intro_contact {
	background:transparent url(../images/head_contact.png) no-repeat;
	height:121px;
	margin-top:20px;
	border-top:1px dotted #ccc;
	border-bottom:1px dotted #ccc;
}

/* Wrapper */
#contact_wrapper {
	width:950px;
	margin:26px 0 0 0;
	display:inline-block;
}

/* Contactinformatie */
#contact_left {
	width:435px;
	margin-right:80px;
	float:left;
}

.details {
	width:435px;
	margin-bottom:25px;
	float:left;
}

.details dl {
	font-size:14px;
	width:205px;
	display:block;
}

.details dt {
	color:#ababab;
	width:70px;
	float:left;
}

.details dd {
	width:135px;
	float:left;
}

/* Social media */
ul#social {
	margin:40px 0 0 0;
	padding:0;
	list-style:none;
}

#social li {
	float:left;
	padding:0 10px 0 0;
}

.twitter {
  	background:url(../images/icon_twitter.png) no-repeat;
	height:36px;
	width:36px;
	display:block;
	outline:none;
}

.linkedin {
  	background:url(../images/icon_linkedin.png) no-repeat;
	height:36px;
	width:36px;
	display:block;
	outline:none;
}

.rss {
  	background:url(../images/icon_rss.png) no-repeat;
	height:36px;
	width:36px;
	display:block;
	outline:none;
}

.twitter span, 
.linkedin span,
.rss span {
	display:none;
}

/* Contactformulier */
#contact_right {
	width:435px;
	float:right;
}

textarea, select, .text-input {
	background-color:#ccc;
	font-size:12px;
	font-family:Arial, Helvetica, sans-serif;
	color: #666;
	width: 352px;
	padding:4px 4px 0 4px;
	border:2px solid #ccc;
	display:block;
}

textarea {
	height:170px;
	width:422px;
}

.text-input, .text {
	background-color:#ccc;
	height:21px;
	width:352px;
	margin-bottom:12px;
	border:2px solid #ccc;
}

.text-input:focus, textarea:focus {
	border:2px solid #00a2ff;
}

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

/* Verzend button */
.submit {
	background:url(../images/btn_verstuur.gif) no-repeat;
	height:20px;
	width:83px;
	padding-top:21px;
	border:none;
}
		
.submit:hover {
	background:url(../images/btn_verstuur.gif) 0 -21px no-repeat;
}

/* Vereiste velden */
.required { 
	color:#ff4b4b; 
}

/* Foutmelding */
.error_message { 
	font-size:12px;
	color:#ff4b4b;
	font-weight:lighter;
	margin-left:6px;
}

/* Bedankt tekst */
#success h1 {
	font-size:12px;
	color:#666;
	font-weight:bold;
}

#success p {
	font-size:12px;
	color:#666;
}

/* =404
-----------------------------------------------------------------------*/
/* Header */
#intro_error {
	background:transparent url(../images/head_404.png) no-repeat;
	height:121px;
	margin-top:20px;
	border-top:1px dotted #ccc;
	border-bottom:1px dotted #ccc;
}

/* Wrapper */
#error_wrapper {
	width:950px;
	height:300px;
	margin-top:30px;
}