/**
 * Title: Horjus
 * Description: This stylesheet defines the default layout of horjusdronrijp.nl
 * Copyright: Pronamic
 * Company: Pronamic
 * Author: Karel-Jan Tolsma
 * Version: 1.0
 */

body {
	background-color: #C60C30;
	color: #5E6A71;

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

	margin: 0;
	padding: 0;
}

/**
 * Global
 */
p {
	margin: 0 0 15px 0;
}

img {
	border: 0;
}

form {
	margin: 0;
}

.clear {
	clear: both;
}

/**
 * Anchors
 */
a {
	color: #C60C30;
	
	text-decoration: underline;
}

a:hover {
	text-decoration: none;
}

/**
 * Headings
 */
h1, h2, h3, h4 {
	font-weight: normal;

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

	line-height: 100%;
}

h2 {
	font-size: 36px;
	
	margin-bottom: 20px;
}

h3 {
	font-size: 26px;
	
	color: #5E6A71;
}

/**
 * Top
 */
#top {
	background-color: #FFF;
	
	padding-bottom: 1px;
}

/**
 * Name
 */
#name {
	float: left;

	padding: 15px;
}

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

	display: block;

	width: 263px;
	height: 118px;

	overflow: hidden;

	text-indent: -1000em;
}

/**
 * Slogan
 */
#slogan {
	background: url("slogan.gif") no-repeat;
	
	float: right;
	
	width: 263px;
	height: 19px;

	margin: 30px 20px 5px 0;
}

#slogan span {
	display: none;
}

/**
 * Menu
 */
#menu {
	background: url("menu.gif") top left no-repeat;
	
	clear: right;
	float: right;
	
	padding-left: 13px;
}

#menu ul {
	list-style: none;

	margin: 0;
	padding: 0;
}

#menu li {
	float: left;
	
	padding: 13px 0;
}

#menu a {
	background-color: #5E6A71;
	
	color: #FFF;
	font-size: 16px;

	display: block;
	
	padding: 16px 20px;
	
	text-decoration: none;
}

#menu a:focus {
	outline: none;
}

#menu-item-home {
	background: url("left.gif") no-repeat;
}

#menu-item-home:hover {
	background-position: left 50%;
}

#menu-item-home.active:hover,
#menu-item-home.active {
	background-position: left bottom;
}

#menu a.active,
#menu a.active:hover {
	background-color: #C60C30;
}

#menu a:hover {
	background-color: #464F55;
}

/**
 * Template
 */
#wrapper {
	width: 100%;

	overflow: hidden;
	
	position: relative; /* IE Fix */
}

#pages {
	width: 12000px;
}

#pages .page {
	float: left;

	width: 2000px;
}

#page-home, #page-producten, #page-contact { 
	background: url("background-1.png") no-repeat top left; 
}

#page-filosofie, #page-machtige-machines, #page-vacatures { 
	background: url("background-2.png") no-repeat top left; 
}

/**
 * Container
 */
.container {
	margin: 0 auto;
	
	height: 600px;
	
	position: relative;

	width: 902px;
}

/**
 * Image
 */
.image-1, .image-2 {
 	position: absolute;
	top: 0;
	
	width: 490px;
	height: 380px;
	
	z-index: 1;
}

.image-1 { left: 16px; }
.image-2 { right: 16px; }

.image-overlay {
	background-position: bottom;
	background-repeat: no-repeat;
	
	position: absolute;
	top: 0;
	
	width: 490px;
	height: 380px;
	
	z-index: 2;
}

.image-1 .image-overlay { background-image: url("image-overlay-1.png"); }
.image-2 .image-overlay { background-image: url("image-overlay-2.png"); }

/**
 * Extra
 */
.extra-1, .extra-2 {
	background: url("extra.png") no-repeat;
	position: absolute;

	top: 405px;
	
	padding: 15px 20px;

	width: 360px;
	height: 125px;
}

.extra-1 { left: 81px; }
.extra-2 { right: 81px; }

.extra-1 ul, .extra-2 ul {
	padding: 0;
	margin: 0;
}

.extra-1 ul li, .extra-2 ul li {
	background: url("bullet.gif") left center no-repeat;
	
	float: left;
	
	list-style-type: none;

	padding-left: 15px;

	width: 160px;
}

.extra-1 strong, .extra-2 strong {
	color: #c60c30;
	
	font-weight: bold;
}

p.column {
	float: left;
	
	width: 175px;
}

/**
 * Buttons
 */
.button {
	cursor: pointer;
	
	position: absolute;
	bottom: 15px;
	
	width: 29px;
	height: 30px;
	
	z-index: 5;
}

div#button-prev,
div#button-prev-2 {
	background: url("prev-button.gif");

	right: 49px;
}

div#button-next,
div#button-next-2 {
	background: url("next-button.gif");

	right: 15px;

	margin-left: 5px;
}

div#button-prev:hover,
div#button-next:hover,
div#button-prev-2:hover,
div#button-next-2:hover {
	background-position: bottom left;
}

/**
 * Content
 */
 .content-1, .content-2 {
 	background: url("content.png") bottom no-repeat;
	
	color: #FFF;
	
	position: absolute;
	top: 120px;
	
	width: 330px;
	min-height: 320px;
	
	padding: 5px 41px 25px 41px;
	
	z-index: 0;
 }
 
.content-1 { right: 0; }
.content-2 { left: 0; }

.content-1 h3,
.content-2 h3 {
	color: #FFF;
	
	font-size: 22px;
}

.content-1 a,
.content-2 a {
	color: #FFF;
}

.content-1 ul {
	padding: 0 0 0 15px;
	margin: 0 0 15px 0;
}

.content-1 ul li {
	float: left;

	width: 156px;
}

/**
 * Titles
 */
h2#home-title {
	background: url("titles/home.gif") no-repeat;

	width: 293px;
	height: 27px;
}

h2#filosofie-title {
	background: url("titles/filosofie.gif") no-repeat;

	width: 271px;
	height: 63px;
}

h2#producten-title {
	background: url("titles/producten.gif") no-repeat;

	width: 212px;
	height: 71px;
}

h2#machtige-machines-title {
	background: url("titles/machtige-machines.gif") no-repeat;

	width: 254px;
	height: 63px;
}

h2#vacatures-title {
	background: url("titles/vacatures.gif") no-repeat;

	width: 154px;
	height: 26px;
}

h2#contact-title {
	background: url("titles/contact.gif") no-repeat;

	width: 230px;
	height: 63px;
}

h2 span {
	display: none;
}

/**
 * Slideshow
 */
#slideshow-2, #slideshow-3, #slideshow-1 {
	position: absolute;
}

.mask-2, .mask-3 {
	position: relative;
	
	width: 490px;
	height: 380px;

	overflow: hidden;
}

.mask-2 img, .mask-3 img  {
	display: block;
	
	position: absolute;
}

/* News slide */
.mask-1 {
	position: relative;
	
	height: 120px;

	overflow: hidden;
}

.mask-1 div {
	background-color: #FFF;
	
	position: absolute;

	display: block;
		
	width: 100%;
	height: 120px;
	
	z-index: 4;
}

.news p,
.vacature p {
	margin-bottom: 5px;
}

/**
 * Tooltip
 */
.tip {
	background: url("tooltip.png") top left;

	width: 170px;
	height: 38px;
	
	padding: 12px 15px;
	z-index: 13000;
}

.tip span {
	color: #C60C30;
	font-weight: bold;
}