/**
 * Title: Pronamic Internet, Vormgeving en Software
 * Description: This stylesheet defines the default layout of Sijtsma Groep
 * Copyright: Pronamic Internet, Vormgeving en Software
 * Company: Pronamic Internet, Vormgeving en Software
 * Author: Jelke boonstra, Remco Tolsma
 * Version: 1.0
 */

body {
	background: #7E8083;

	font: 80%/1.5 Arial, Helvetica, sans-serif;

	margin: 0;
	padding: 0;
}

.clear {
	clear: both;
}

/**
 * Anchors
 */
a {
	color: #FFF;
}

a:hover {
	
}

img {
	border: none;
}

/**
 * Form
 */
form {

}

form .field {
	line-height: 1;

	clear: both;

	margin: .5em 0;
}

input.text, 
textarea, 
select,
button {
	background: #7E8083;

	border: 1px solid #FFF;

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

	margin: 0;
	padding: 5px;

	width: 20em;
}

select {
	background: #EE2E24;

	color: #FFF;
}

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

label {
	color: #FFF;

	cursor: pointer;

	float: left;

	font-weight: bold;

	padding: 6px 1em 6px 0;

	text-align: right;

	width: 12.5em;
}

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

form .actions button {
	background: #EE2E24;

	color: #FFF;
}

.required-indicator {
	color: #EB7F00;
}

form .error {
	border-left: solid 2px #F00;

	color: #FFF;

	line-height: 120%;

	margin-left: 13.5em;
	padding: 0 0 0 5px;

	width: 21em;
}

/**
 * Image
 */
img.decoration-over {
	position: relative;

	z-index: 1000;
}

/**
 *  Directions form
 */
#directions-form {

}

#directions-form .field {
	line-height: 1;

	clear: both;

	margin: .5em 0;
}

#directions-form input.text, 
#directions-formtext area, 
#directions-form select,
#directions-form button {
	background: #7E8083;

	border: 1px solid #FFF;

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

	margin: 0;
	padding: 5px;

	width: 20em;
}

#directions-form select {
	background: #EE2E24;

	color: #FFF;
}

#directions-form input.text:focus, 
#directions-form textarea:focus, 
#directions-form select:focus {
	border-color: #000;
}

#directions-form label {
	color: #FFF;

	cursor: pointer;

	float: left;

	font-weight: bold;

	padding: 6px 1em 6px 0;

	text-align: left;

	width: 5em;
}

#directions-form .actions {
	margin-left: 6em;
}

#directions-form .actions button {
	background: #EE2E24;

	color: #FFF;
}

#directions-form .required-indicator {
	color: #EB7F00;
}



/**
 * Table rental
 */
table {
	border-collapse: collapse;

	width: 100%;
}

caption {
	background: #0079c2;

	color: #FFF;

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

	padding: 0 5px;

	text-align: left;
}

th {
	background: #7bacdc;

	font-weight: normal;
	font-style: italic;

	padding: 0 5px;

	text-align: left;
}

tr {
}

tr.odd {background: #c7d9f0;}
tr {background: #8f989d;}

td {
padding: 0 5px;
}

tfoot {
	font-style: italic;
}

.new-caption {
	background: #0079c2;

	color: #FFF;

	font-size: 120%;
	font-style: italic;
	font-weight: bold;

	padding: 0 5px;
}

/**
 * Access menu
 */
#access-menu {
	display: none;
}

/**
 * Container
 */
#container {
	color: #FFF;
}

/**
 * Top
 */
#top {
	background: #EE2E24;

	color: #FFF;

	min-height: 250px;

	position: relative;
}

/**
 * Intro
 */
#intro {
	margin: 0 101px 0 155px;
	padding: 20px 0;

	text-align: right;
}

/**
 * Company name
 */
#company-name {
	float: right;

	margin-top: 50px;

	width: 40%;
}

#company-name a {
	background: url("logo.gif") no-repeat;

	display: block;

	margin: 0 auto;

	width: 277px;
	height: 55px;
}

#company-name span {
	display: none;
}

/**
 * Lead
 */
#lead {
	float: left;

	padding-right: 5%;

	width: 55%;
}

.files-list {
	list-style: none;

	margin: 1em 0;
	padding: 0;
}

.files-list a {
	background-repeat: no-repeat;
	background-position: right;

	padding: 10px 64px 20px 0px;
}

.files-list a.pdf-item { background-image: url("file-pdf.gif"); }

/**
 * Menu
 */ 
.menu {
	list-style: none;

	margin: 0;
	padding: 0;
}

.menu li {
	position: absolute;

	top: 0;
	bottom: 0;
}

.menu a {
	background-repeat: no-repeat;
	background-position: bottom left;

	color: #FFF;

	display: block;

	font-weight: bold;

	width: 27px;
	height: 100%;

	text-decoration: none;
}

.menu a:focus {
	outline: none;
}

.menu a:hover,
.menu .active {
	background-position: bottom right;
}

.menu a span {
	display: none;
}

/* Sub-menu */ 
.menu li:hover .sub-menu,
.menu li.hover .sub-menu {
	left: auto;
}

.menu .sub-menu {
	position: absolute;
	left: -999em;

	width: 15em;
}

.menu .sub-menu ul { 
	list-style: none;

	margin: 0;
	padding: 0;
}

.menu .sub-menu li {
	float: none;

	position: static;

	height: auto;
}

.menu .sub-menu li a {
	background-position: top left;

	border-bottom: 1px solid #FFF;

	width: 250px;
	height: 27px;
}

.menu .sub-menu li a:hover {
	background-position: bottom left;

	color: #EE2E24;
}

.menu .sub-menu li a.active, 
.menu .sub-menu li a:hover {
	
}

/* Specific items */
#menu-item-enter-website { background-color: #EE2E24; right: 0; }
#menu-item-enter-website a { background-image: url("menu-items/enter-website.gif"); }

#menu-item-home { background-color: #EE2E24; left: 0; }
#menu-item-home a { background-image: url("menu-items/home.gif"); }

#menu-item-hoogwerkerverhuur { background-color: #0079C2; left: 27px; }
#menu-item-hoogwerkerverhuur a { background-image: url("menu-items/hoogwerkerverhuur.gif"); }

#menu-item-gevel-en-betonrenovatie { background-color: #8F989D; left: 54px; }
#menu-item-gevel-en-betonrenovatie a { background-image: url("menu-items/gevel-en-betonrenovatie.gif"); }

#menu-item-straal-en-vloertechniek { background-color: #009C7B; left: 81px; }
#menu-item-straal-en-vloertechniek a { background-image: url("menu-items/straal-en-vloertechniek.gif"); }

#menu-item-krottje-kunststofvloeren { background-color: #8ED2C5; left: 108px; }
#menu-item-krottje-kunststofvloeren a { background-image: url("menu-items/krottje-kunststofvloeren.gif"); }

#menu-item-specialistische-reiniging { background-color: #002c77; left: 135px; }
#menu-item-specialistische-reiniging a { background-image: url("menu-items/specialistische-reiniging.gif"); }

#menu-item-projecten { background-color: #FFD204; right: 54px; }
#menu-item-projecten a { background-image: url("menu-items/projecten.gif"); }

#menu-item-nieuws { background-color: #FFD204; right: 27px; }
#menu-item-nieuws a { background-image: url("menu-items/nieuws.gif"); }

#menu-item-contact { background-color: #FFD204; right: 0; }
#menu-item-contact a { background-image: url("menu-items/contact.gif"); }

/* Sub menu - Home */
#menu-item-vacatures a { background-image: url("menu-items/vacatures.gif"); }
#menu-item-certificates a { background-image: url("menu-items/certificaten.gif"); }
#menu-item-disclaimer a { background-image: url("menu-items/disclaimer.gif"); }
#menu-item-links a { background-image: url("menu-items/links.gif"); }

/* Sub menu - Hoogwerkerverhuur */
#menu-item-hoogwerkers-op-vrachtwagens a { background-image: url("menu-items/hoogwerkers-op-vrachtwagens.gif"); }
#menu-item-zelfrijdende-telesc-hoogwerkers a { background-image: url("menu-items/zelfrijdende-telesc-hoogwerkers.gif"); }
#menu-item-zelfrijdende-schaarliften a { background-image: url("menu-items/zelfrijdende-schaarliften.gif"); }
#menu-item-verticale-hoogwerkers a { background-image: url("menu-items/verticale-hoogwerkers.gif"); }
#menu-item-zelfrijdende-hoogwerkers-knikarm a { background-image: url("menu-items/zelfrijdende-hoogwerker-knikarm.gif"); }

/* Sub menu - Gevel- en betonrenovatie */
#menu-item-gevelreiniging a { background-image: url("menu-items/gevelreiniging.gif"); }
#menu-item-dakreiniging a { background-image: url("menu-items/dakreiniging.gif"); }
#menu-item-anti-graffiti a { background-image: url("menu-items/anti-graffiti.gif"); }
#menu-item-gevelrestauratie a { background-image: url("menu-items/gevelrestauratie.gif"); }
#menu-item-impregneren a { background-image: url("menu-items/impregneren.gif"); }
#menu-item-gevelonderhoud a { background-image: url("menu-items/gevelonderhoud.gif"); }
#menu-item-total-wall-concept a { background-image: url("menu-items/total-wall-concept.gif"); }
#menu-item-betonrenovatie a { background-image: url("menu-items/betonrenovatie.gif"); }

/* #menu-item-vochtwering a { background-image: url("menu-items/vochtwering.gif"); } */
#menu-item-spouwisolatie a { background-image: url("menu-items/spouwisolatie.gif"); }
#menu-item-injecteren a { background-image: url("menu-items/injecteren.gif"); }
#menu-item-kelderafdichtingen a { background-image: url("menu-items/kelderafdichtingen.gif"); }

/* Sub menu - Straal- en vloertechniek */
#menu-item-gritstralen a { background-image: url("menu-items/gritstralen.gif"); }
#menu-item-waterstralen a { background-image: url("menu-items/waterstralen.gif"); }
#menu-item-stofvrij-stralen a { background-image: url("menu-items/stofvrij-stralen.gif"); }
#menu-item-schuren-frezen a { background-image: url("menu-items/schuren-frezen.gif"); }

/* Sub menu - Krottje Kunststofvloeren */
#menu-item-epoxy-coating a { background-image: url("menu-items/epoxy-coating.gif"); }
#menu-item-epoxy-diklaagcoating a { background-image: url("menu-items/epoxy-diklaagcoating.gif"); }
#menu-item-epoxy-gietvloeren a { background-image: url("menu-items/epoxy-gietvloeren.gif"); }
#menu-item-epoxy-troffelvloeren a { background-image: url("menu-items/epoxy-troffelvloeren.gif"); }
#menu-item-epoxy-siergrindvloer a { background-image: url("menu-items/epoxy-siergrindvloer.gif"); }
#menu-item-epoxy-decochips-vloer a { background-image: url("menu-items/epoxy-decochips-vloer.gif"); }
#menu-item-epoxy-sanitaire-vloerafwerking a { background-image: url("menu-items/epoxy-sanitaire-vloerafwerking.gif"); }
#menu-item-degadur-troffelvloeren a { background-image: url("menu-items/degadur-troffelvloer.gif"); }
#menu-item-degadur-diklaagcoating a { background-image: url("menu-items/degadur-diklaagcoating.gif"); }
#menu-item-degadur-instrooivloer a { background-image: url("menu-items/degadur-instrooivloer.gif"); }
#menu-item-epoxy-wanden a { background-image: url("menu-items/epoxy-wanden.gif"); }
#menu-item-cementgebonden-gietvloer a { background-image: url("menu-items/cementgebonden-gietvloer.gif"); }
#menu-item-polyurethaan-vloeren a { background-image: url("menu-items/polyurethaan-vloeren.gif"); }
#menu-item-pmma-vloeren a { background-image: url("menu-items/pmma-vloeren.gif"); }

/* Sub menu - Specialistische Reiniging */
#menu-item-aluminium-en-kunststof-onderdelen a { background-image: url("menu-items/alluminium-en-kunststof.gif"); }
#menu-item-gevelbekleding a { background-image: url("menu-items/gevelbekleding.gif"); }
#menu-item-specifieke-projecten a { background-image: url("menu-items/specifieke-projecten.gif"); }
#menu-item-opleveringsschoonmaak a { background-image: url("menu-items/opleveringsschoonmaak.gif"); }
#menu-item-diversen-op-specialistisch-gebied a { background-image: url("menu-items/diversen-op-specialistisch-gebied.gif"); }

/**
 * Page menu
 */
#page-menu {
	float: left;
}

/**
 * Website menu
 */
#website-menu {
	float: right;
}

/**
 * Main
 */
#main {
	line-height: 30px;

	width: 100%;
	height: 100%;
}

#main h3 { 
	color: #000;
}

#content-1-wrap {
	float: left;

	width: 30%;
}

#content-2-wrap {
	float: right;

	width: 70%;
}

#content-1,
#content-2 {
	background: no-repeat center center;

	padding: 0 0 0 20px;

	min-height: 625px;
}

#content-2-a-wrap,
#content-2-b-wrap {
	width: 50%;
}

#content-2-a-wrap { float: left; }
#content-2-b-wrap {
	float: right;

	padding: 0;
}

#content-2-a,
#content-2-b {
	background: no-repeat center center;

	min-height: 625px;
}

#content-2-a {
	margin-right: 20px; 
}

/* Project/news links */
.subject-overview {
	margin: 0;
	padding: 0;

	list-style: none;
}

.subject-overview li {
	background: url("project-link.gif") no-repeat top left;
	background-position: 0 50%;

	padding: 0 0 0 30px;
}

.subject-overview li a:hover {
	color: #FFF;
}


/* Project links */
#main #post-address {
	color: #FFF;

	float: right;

	text-align: right;
}

#main #post-address span {
	color: #000;

	font-size: 140%;
	font-style: normal;
	font-weight: bold;
}

.certificate-list{
	list-style-type: none;

}

.certificate-list li{
	margin-bottom: 20px; 
}

/**
 * Contact form
 */
#contact-form {
	float: left;

	padding: 20px 0;

	width: 75%;
}

/**
 * Contact info
 */
#contact-info {
	float: right;

	padding: 20px 0;

	width: 25%;
}

/**
 * Foot
 */
#foot {
	background: #FFF;

	color: #F00;

	/* is only displayed on intro page */
	display: none;

	font-size: 140%;
	font-weight: normal;

	position: absolute;

	bottom: 20px;

	padding-bottom: 10px;

	width: 100%;
}

#foot ul{
	list-style: none;
}

#foot li{
	float: left;

}

#foot ul li a{
	color: #F00;

	font-weight: normal;

	text-decoration: none;
}

#foot ul li a:hover{
	color: #000;

	text-decoration: underline;
}

/**
 * Map
 */
#map {
	border: 1px solid #525252;

	width: 500px;
	height: 300px;
}