/*==============================================================================

	This website/webapplication is developed by:
	Occhio Group
	http://www.occhio.nl/
	info@occhio.nl
	+31 (0)20 320 78 70
					
	Stylesheet for CSS 2 styles
==============================================================================*/

/* ============================================================================= 
	STYLES FOR LAYOUT 
============================================================================= */

/* generic styles for inputfields */

/* uncomment if needed
div.gender radio {
    font-weight: normal;
	display: inline;
}

input.firstName, input.middleName, input.lastName, input.street, 
input.postcode, input.city, input.country, input.email, input.username, 
input.password, input.phone, input.title, input.filename, input.description, 
input.remarks {
	display: block;
	width: 300px;
}

input.gender {
	display: inline;
}
input#middleName, input#postcode {
	width: 90px;
}
*/



.container {
	width: 737px;
	margin: 0 auto;
	position: relative;
}

a.skipmenu {
	display: none;
}

.clear {
	clear: both;
}

/* COMMON USED STYLES BY OCCHIO DON"T REMOVE */

/* styles for errormessage and message */
div.message,
div.error {
	color: #000;
	font-weight: bold;
	border: 1px solid #FF0000;
	padding: 10px 10px 20px 50px;
	margin: 10px 0;
	background: url(../../static.occhio.nl/images/attention.gif) #FFDDDD no-repeat 10px 10px;
	 
}
div.message {
	border: 1px solid #3B89EF;
	background: url(../../static.occhio.nl/images/attention-info.gif) #D2DFF1 no-repeat 10px 5px;
}

div.message ul,
div.error ul {
	margin-left: 10px;
*	margin-left: 15px; /* ie */
}

/*

Not working in IE:
PNG -> use javascript that Replaces PNG by GIF

Not working in Mac IE:
Some Flash with transparent background -> save as older flash version

*/

html {
	background: #CD0126;
}


#logo {
	display: block;
	margin: 10px 0 0 0;
	height: 136px;
	background-repeat: no-repeat;
}

#logo span {
	display: none;
}	

.p4 #logo, .p33 #logo,
.p60 #logo, .p64 #logo  {
	background-image: url(../images/layout/t-bennink-bicker-caarten.gif);
	height: 260px;
} 

.p5 #logo, .p34 #logo {
	background-image: url(../images/layout/t-het-verhaal.gif);
}

/* pagina DE MENSEN */
.p6 #logo, .p54 #logo, .p57 #logo, .p58 #logo, .p59 #logo { 
	background-image: url(../images/layout/t-de-mensen.gif);
}

.s-het-werk #logo,
.p7 #logo, .p14 #logo {
	background-image: url(../images/layout/t-het-werk.gif);
}

.p8 #logo {
	background-image: url(../images/layout/t-de-opdrachtgevers.gif);
	height: 266px;
}

.p9 #logo, .p78 #logo {
	background-image: url(../images/layout/t-bbc-nieuws.gif);
}

.p10 #logo {
	background-image: url(../images/layout/t-het-contact.gif);
}

.p15 #logo {
	background-image: url(../images/layout/t-de-vacatures.gif);
}

#content {
	margin: 16px 0 0 0;
}

a, a:link, a:visited, a:hover {
	color: #FF00D9;
	text-decoration: none;
}

ul#rightColumn {
	margin-left: 50px;
}

ul.clients {
	float: left;
}


/* Het werk
*******************************************************************************/
.p14 #content {
	width: 660px;
}

.p14 .workblock {
	float: left;
	margin: 0 10px 10px 0;
	padding: 0;
	width: 76px;
	height: 83px;
}

.p14 .workblockvid {
position: absolute;
left: 10px;
}


.s-het-werk #content .clear {
	margin-bottom: 50px;
}

div#werk img {
	float: left;
	margin-right: 10px;
	margin-bottom: 20px;
}

/* Google Map
*******************************************************************************/

#map {
	float: right;
	width: 410px; 
	height: 250px; 
	color: #000;
}


/* Gratis boekje
*******************************************************************************/
.p61 #logo {
	background-image: url(../images/layout/t-bennink-bicker-boekje.gif);
	height: 260px;
}

/* Ster animatie */
.p4 div#star /*grote ster home */{
	position: absolute;
	top: 85px;
	left: 605px;
}

.p4 div#star-small {
	display: none;
}

div#star-small {
	position: absolute;
	display: block;
	height: 122px;
	width: 122px;
	top: 17px;
	left: 605px;
	z-index: 900;
}