/**
 * Title: Proper Dienstverlening
 * Description: This stylesheet defines the layout of the website of properdienstverlening.nl
 * Copyright: Pronamic
 * Company: Pronamic
 * Author: Karel-Jan Tolsma, Remco Tolsma, Jelke Boonstra
 * Version: 1.0
 */

body {
	background: #FFF;

	border-top: solid 5px #ed1b2e;

	font-family: Arial, Helvetica, Verdana, sans-serif;
	font-size: 80%;

	line-height: 160%;

	margin: 0;
	padding: 0;

	overflow-x: hidden;
}

/**
 * Anchors
 */
a {
	color: #ed1b2e;

	text-decoration: none;
}

a:hover {
	text-decoration: none;
}

a:visited {

}

/**
 * Headings
 */
h1 {
	color: #ed1b2e;

	font-size: 200%;

	margin-top: 0; 
}

h2 {
	color: #000;

	font-size: 180%;
}

h3 {
	font-size: 150%;
}

/**
 * Global
 */
hr {
	display: none;
}

address {
	font-style: normal;
}

.clear {
	clear: both;
}

p.error {
	color: #C00;

	font-size: 75%;
}

/**
 * Forms
 */
.field {
	margin: 0 0 10px 0;
}
 
form label {
	text-align: right;

	cursor: pointer;

	display: block;

	float: left;

	font-weight: bold;

	margin: 0 10px 0 0;

	width: 10em;
}
 
input.text,
textarea {
	border: 1px solid #CDCDCD;

	font-family: Arial, Helvetica, sans-serif;
	font-size: 1em;

	padding: 5px;

	width: 60%;
}

input.text:hover,
textarea:hover {
	border-color: #ED1B2E;
}

input.text:focus,
textarea:focus {
	border-color: #ED1B2E;
}

form .required-indicator {
	color: #ED1B2E;
}

form .actions {
	margin-left: 10.5em;
}

form .error {
	margin-left: 14.5em;
}
/* Quote submission form*/
#quote-submission-form label{
	width: 14em;
}

#quote-submission-form .actions {
	margin-left: 14.7em;
}

#quote-submission-form .error {
	margin-left: 20em;
}
/**
 * Header
 */ 
#header {
	background: url('header-back.gif') no-repeat 20px 0;

	margin: 0;
	padding: 20px 0 60px 0;
}

/* Company name */
#name { 
	background: url("logo.gif") no-repeat;

	display: block;

	float: left;

	margin: 0;
	padding: 0;

	overflow: hidden;

	width: 310px;
	height: 79px;

	text-indent: -1000em;
}

/* Slogan */
#slogan {
	float: right;

	margin: 0;
	padding: 0;
}

#slogan {
	background: url("slogan.gif") no-repeat;

	display: block;

	margin-top: 22px; 

	width: 602px;
	height: 39px;
}

#slogan span {
	display: none;
}

/**
 * Navigation
 */
#nav {
	list-style: none;

	font-size: 110%;
	font-weight: bold;

	margin: -20px 0 0 0;
	padding: 1px 0 0 0;

	text-transform: uppercase;
}

#nav li {
	float: left;

	margin: 0 0 0 -12px;
	padding: 0;

	position: relative;
}

#nav .first{
	margin: 0;
}

#nav li a {
	background: #5a5a5a;
	color: #FFF;

	display: block;

	padding: 10px 18px 8px 18px;
	margin: 0 19px 0 0;
}

#nav li a:hover,
#nav li a.active {
	background: #ed1b2e;
}

#nav li span {
	background: url('menu-right.png') no-repeat top right;

	position: absolute;

	top: 0;
	right: 0;

	height: 38px;
	width: 19px;

	z-index: 1;
}

#nav li a:hover span,
#nav li a.active span {
	background: url('menu-right.png') no-repeat bottom right;
}

/**
 * Intro
 */
#intro {
	background: url("intro-sub.jpg") no-repeat top left;

	height: 174px;

	margin-bottom: 20px;
	padding: 20px 30px;
}

#intro .intro-content {
	width: 550px;
}

#intro .intro-content h2 {
	margin: 0 0 10px 0;
	padding: 0;
}
 
#intro .intro-content h3 {
	margin: 0;
	padding: 0;
}

#intro .hook {
	background: url('hook2.jpg') no-repeat top right;

	margin: -20px 0 0 430px;
	padding: 0;

	height: 214px;
	width: 500px;
}

/**
 * Container
 */
#container {
	margin: 0 auto;

	width: 960px;
}

/**
 * Core
 */
#core {
	margin: 0 0 20px 0;
}

/* Content */
#content {
	border-right: #f1f1f1 solid 5px;
	border-left: #f1f1f1 solid 5px;

	float: left;

	padding: 0 25px;
	margin: 0 20px 0 0;

	min-height: 340px;
	width: 630px;
}

/* services */
#services {
	margin: 0 -5px;
}

.service-item {
	background: #f4ecc5;

	float: left;

	padding: 130px 5px 10px 5px;
	margin: 0 5px;

	position: relative;

	width: 174px;
	min-height: 250px;
}

.service-item .image {
	border: none;

	overflow: hidden;

	position: absolute;
	top: 5px;
}

.service-item .image img {
	border: none;
}

.service-item-content {
	font-size: 11px;

	padding: 0 5px;
}

.service-item-content h3 {
	font-size: 15px;
}

.service-item-content h3 a {
	color: #000;
	font-size: 15px;
}

.service-item-content h3 a:hover { 
	color: #ed1b2e;
}

.service-item-text-decoration {
	background: url('arrow.gif') no-repeat center right;
	font-size: 12px;
	font-weight: bold;

	float: right;

	position: absolute;
	bottom: 5px;
	right: 10px;

	padding-right: 20px;
}

/* Service-list */
.service-list {
	list-style: none;

	margin: 10px 0 0 0;
	padding: 0;
}

.service-list li {
	background: url('arrow.gif') no-repeat center left;

	margin: 0 0 5px 0;
	padding: 0 0 0 20px;
}

.service-list li a.active {
	color: #000;
}

.service-list li:hover {
	margin-left: 5px; 
}

.service-list li:hover a {
	color: #000;

	text-decoration: underline;
}

/* Extra */
#extra {
	background: #f4ecc5;

	float: right;

	padding: 15px 20px;

	width: 210px;
}

#extra h3 {
	margin: 0;

	font-size: 130%;
}

.why-us-list {
	list-style: none;

	margin: 0;
	padding: 0;
}

.why-us-list li {
	background: url('list-item(black).gif') no-repeat left center;

	margin: 10px 0;
	padding: 0 0 0 30px;
}

.why-us-list li:hover {
	background: url('list-item.png') no-repeat left center;

	color: #ed1b2e;
}

/**
 * Bottom
 */
#contact {
	background: #d3d3d3;

	color: #595959;

	float: left;

	padding: 9px 10px 8px 10px;
	margin-right: 20px;

	width: 440px;
}

#bottom .container {
	border: solid 1px #e5e5e5;

	padding: 8px;
}

#bottom .container h2 {
	color: #303030;

	margin-right: 20px;

	float: left;

	font-size: 130%;

	text-transform: uppercase;
}

#bottom #contact .col {
	float: left;

	padding: 5px 0;
	margin: 0 5px;

	width: 130px;
}

#bottom .propposal {
	float: left;

	width: 474px;
	height: 82px;
}

/**
 * Footer
 */
#footer {
	color: #999999;

	font-size: 75%;
}

.copyright {
	float: left ;
}

.developer {
	float: right;
}