/* ----------------------------------------------------------------------------
Basic Style Sheet (all browsers)

version:		1.0
author:			Joost Pronk
email:			info@design-works.nl
website:		http://www.design-works.nl
---------------------------------------------------------------------------- */
*
{
	margin:0;
	padding:0;
	font-family: arial, verdana, helvetica, sans-serif;
	border: none;
	color: #666;
}

body
{
	background: url(../images/background.gif) center 0 no-repeat #333;
	font-size: 75%;
}

:focus
{
	outline: none;
}

.hidden
{
	display: none;
}

a:hover
{
	color: #999;
}

ul
{
	line-height: 20px;
}

/* Typography
---------------------------------------------------------------------------- */
p
{
	font-size: 1em;
	line-height: 20px;
	padding: 0 0 15px 0;
}

.footer p,
.footer2 p
{
	font-size: 0.8em;
	line-height: 19px;
	color: #999;
}

.footer p a,
.footer2 p a
{
	color: #999;
}

.footer h4
{
	margin: 0 0 6px 0;
	font-size: 0.8em;
}

h1
{
	font-size: 2em;
	margin: 0 0 10px 0;
	font-weight: Bold;
	color: #996633;
	line-height: 28px;
}

h2
{
	font-size: 1.6em;
	padding: 0 0 0 30px;
	margin: 5px 0 10px 0;
	line-height: 30px;
	width: 900px;
	color: #009999;
	font-weight: normal;
}

h3
{
	font-size: 1.4em;
	line-height: 20px;
	color: #669900;
	margin: 0 0 15px 0;
}

.top p
{
	color: #ccc;
	font-size: 0.8em;
}

.top p a
{
	color: #ccc;
}

.top p a:hover
{
	color: #fff;
}

/* Generic classes
---------------------------------------------------------------------------- */
.clear
{
	clear: both;
}

.right
{
	float: right;
}

.left
{
	float: left;
}

.center
{
	margin: 0 auto;
}

/* StepCarousel
---------------------------------------------------------------------------- */
.stepcarousel{
position: relative; /*leave this value alone*/
overflow: scroll; /*leave this value alone*/
width: 961px; /*Width of Carousel Viewer itself*/
height: 173px; /*Height should enough to fit largest content's height*/
float: left;
}

.stepcarousel .belt{
position: absolute; /*leave this value alone*/
left: 0;
top: 0;
}

.stepcarousel .panel{
float: left; /*leave this value alone*/
overflow: hidden; /*clip content that go outside dimensions of holding panel DIV*/
width: 940px; /*Width of each panel holding each content. If removed, widths should be individually defined on each content DIV then. */
}



/* Content
---------------------------------------------------------------------------- */
ul.content li
{
	margin: 0 0 0 13px;
}

.priceoffer
{
	width: 1063px;
	margin: 0 auto;
}

.logo
{
	width: 130px;
	height: 1px;
	float: left;
	margin: 10px 0 0 10px;
}

.price
{
	width: 53px;
	height: 191px;
	float: right;
	display:block;
	margin: 86px 0 0 0;
}

.price a:hover
{
	padding: 10px 0 0 0;
}

.bg-wide
{
	width: 1005px;
	margin: 0 auto;
	background: url(../images/main.png) repeat-y;
	margin: 0 0 0 27px;
}

.header
{
	width: 961px;
	height: 173px;
	float: left;
	margin: 90px 0 0 0;
	border-bottom: 5px solid #ccc;
	border-top: 5px solid #ccc;
}

.wrapped
{
	margin: 0 auto;
	width: 961px;
	position: relative;
	background: #fff;
	padding: 0 0 10px 0;
}



.hoofdmenu
{
	height: 92px;
	float: right;
	margin: -285px 10px 0 0;
}

.contentdrie
{
	width: 280px;
	float: left;
	margin: 10px 0 0 30px;
}

.contenttwee
{
	width: 435px;
	float: left;
	margin: 10px 0 0 30px;
}

.contentrechts-contact
{
	width: 415px;
	float: left;
	margin: 10px 0 0 30px;
	background: #ccc;
	padding: 10px 10px;
}


.contentprojecten
{
	width: 304px;
	height: 300px;
	float: left;
	margin: 0 0 15px 12px;
}

.contentprojecten:hover
{
	background: url(../images/bg.jpg) 0 -400px repeat-x #fff;
}

.thumbdrie
{
	width: 270px;
	height: 100px;
	border: 5px solid #ccc;
	margin: 0 0 20px 0;
}

.thumbtwee
{
	width: 425px;
	height: 219px;
	border: 5px solid #ccc;
	margin: 0 0 20px 0;
}

.footer
{
	margin: 45px auto 10px auto;


	padding: 15px 0 0 0;
	padding: 2px 0 2px 0;
}

.footer2
{

	text-align: center;
	color: #ccc;
}




/* Navigation
---------------------------------------------------------------------------- */
ul#mainMenu

{
list-style:none;
overflow:hidden;
}

ul#mainMenu li
{
text-indent:-90000px;
height:108px;
float:left;

}

ul#mainMenu li a
{
display:block;
width:100%;
height:108px;
}

/*<<<<<<<<<<<<<<<<<<<<<< Home >>>>>>>>>>>>>>>>>>>>>>>*/
ul#mainMenu li.home
{
width:85px;
}

ul#mainMenu li.home a
{
background:url(../images/menu/home.jpg) no-repeat;
}

ul#mainMenu li.home-active, ul#mainMenu li.home a:hover, #home ul#mainMenu li.home a
{
background:url(../images/menu/home-active.jpg) #619b13 no-repeat;
width: 85px;
}

/*<<<<<<<<<<<<<<<<<<<<<< Ocean >>>>>>>>>>>>>>>>>>>>>>>*/
ul#mainMenu li.ocean
{
width:178px;
}

ul#mainMenu li.ocean a
{
background:url(../images/menu/oceanrodeo.jpg) no-repeat;
}

ul#mainMenu li.ocean-active, ul#mainMenu li.ocean a:hover, #ocean ul#mainMenu li.ocean a
{
width: 178px;
background:url(../images/menu/oceanrodeo-active.jpg) #619b13 no-repeat;
}

/*<<<<<<<<<<<<<<<<<<<<<< Caution >>>>>>>>>>>>>>>>>>>>>>>*/
ul#mainMenu li.caution
{
width:121px;
}

ul#mainMenu li.caution a
{
background:url(../images/menu/caution.jpg) no-repeat;
}

ul#mainMenu li.caution-active, ul#mainMenu li.caution a:hover, #caution ul#mainMenu li.caution a
{
width: 121px;
background:url(../images/menu/caution-active.jpg) #619b13 no-repeat;
}

/*<<<<<<<<<<<<<<<<<<<<<< Contact >>>>>>>>>>>>>>>>>>>>>>>*/
ul#mainMenu li.contact
{
width:128px;
}

ul#mainMenu li.contact a
{
background:url(../images/menu/contact.jpg) no-repeat;
}

ul#mainMenu li.contact-active, ul#mainMenu li.contact a:hover, #contact ul#mainMenu li.contact a
{
width: 128px;
background:url(../images/menu/contact-active.jpg) #619b13 no-repeat;
}

/*<<<<<<<<<<<<<<<<<<<<<< HotDeals >>>>>>>>>>>>>>>>>>>>>>>*/
ul#mainMenu li.hotdeals
{
width:145px;
}

ul#mainMenu li.hotdeals a
{
background:url(../images/menu/hotdeals.jpg) no-repeat;
}

ul#mainMenu li.hotdeals-active, ul#mainMenu li.hotdeals a:hover, #hotdeals ul#mainMenu li.hotdeals a
{
width: 145px;
background:url(../images/menu/hotdeals-active.jpg) #619b13 no-repeat;
}


/* Submenu
---------------------------------------------------------------------------- */
ul#subMenu

{
list-style:none;
overflow:hidden;
margin: -10px 0 10px 0px;
padding: 0 0 0 30px;
background-color: #ccc;

}

ul#subMenu li
{
float:left;
margin: -3px 0 0 0;
}

ul#subMenu li a
{
display:block;
padding: 4px 8px 4px 8px;
text-decoration: none;
font-size: 1.2em;
font-weight: normal;
}

ul#subMenu li.active, 
ul#subMenu li a:hover
{
	background: #669900;
	color: #fff;
}



/* Fields
---------------------------------------------------------------------------- */

input,
select,
textarea
{
	padding: 3px 3px;
	border: 1px solid #999;
	margin: 3px 0 9px 0;
	font-size: 1em;
}

input:active,
textarea:active,
input:focus,
textarea:focus
{
	border: 1px solid #666;
}