/*----------------------------------------------------------------------------- 
Snel Media Producties screen stylesheet 

version:   1.0
date:      01/06/10
author:    Koen Zwarts
email:     info@zwarts-grafischontwerp.nl
website:   www.zwarts-grafischontwerp.nl
-----------------------------------------------------------------------------*/

* {
	margin: 0;
    padding: 0;
    border: 0;
}

body {
	color: #002b5c;
	font: 62.5%/1.4 Arial, Helvetica, sans-serif;
	background: white url(../images/commcirkels.jpg) no-repeat center top;
}

#wrapper {
	background-color: transparent;
	width: 1010px;
	margin: 0 auto;
}


/* Header 
-----------------------------------------------------------------------------*/

#header {
	width: 960px;
	height: 115px;
	margin: 0 25px;
}

#logo {
	width: 258px;
	height: 69px;
	margin: 0;
	padding-top: 38px;
}


/* First Row 
-----------------------------------------------------------------------------*/

#firstRow {
	width: 1010px;
	height: 410px;
}

#firstRow390 {
	width: 1010px;
	height: 440px;
}

#navigation {
	width: 275px;
	height: 410px;
	margin: 0 20px 0 25px;
	float: left;
}

ul {
	width: 275px;
	height: 360px;
	margin: 25px 0;
	display: inline-block;
}

li {
	margin-top: 31px;
	list-style-type: none;
}

li#home a {
	background: url(../images/navHome.png) no-repeat 0 0;
	width: 41px;
	height: 16px;
	display: block;
}

li#home a:hover {
	background: url(../images/navHome.png) no-repeat 0 -16px;
}

li#tvenbedrijfsfilms a {
	background: url(../images/navTVenbedrijfsfilms.png) no-repeat 0 0;
	width: 119px;
	height: 16px;
	display: block;
}

li#tvenbedrijfsfilms a:hover {
	background: url(../images/navTVenbedrijfsfilms.png) no-repeat 0 -16px;
}

li#crossmedia a {
	background: url(../images/navCrossmedia.png) no-repeat 0 0;
	width: 80px;
	height: 16px;
	display: block;
}

li#crossmedia a:hover {
	background: url(../images/navCrossmedia.png) no-repeat 0 -16px;
}

li#klanten a {
	background: url(../images/navKlanten.png) no-repeat 0 0;
	width: 51px;
	height: 16px;
	display: block;
}

li#klanten a:hover {
	background: url(../images/navKlanten.png) no-repeat 0 -16px;
}

li#werkwijze a {
	background: url(../images/navWerkwijze.png) no-repeat 0 0;
	width: 69px;
	height: 16px;
	display: block;
}

li#werkwijze a:hover {
	background: url(../images/navWerkwijze.png) no-repeat 0 -16px;
}

li#oversnel a {
	background: url(../images/navOversnel.png) no-repeat 0 0;
	width: 66px;
	height: 16px;
	display: block;
}

li#oversnel a:hover {
	background: url(../images/navOversnel.png) no-repeat 0 -16px;
}

li#contact a {
	background: url(../images/navContact.png) no-repeat 0 0;
	width: 54px;
	height: 16px;
	display: block;
}

li#contact a:hover {
	background: url(../images/navContact.png) no-repeat 0 -16px;
}

#picture {
	background: url(../images/photoglow.png) no-repeat 0 0;
	width: 690px;
	height: 410px;
	float: left;
}

#picturesmall {
	background: url(../images/photoglowsmall.png) no-repeat 0 0;
	width: 530px;
	height: 410px;
	float: left;	
}

#picture352 {
	background: url(../images/photoglow352.png) no-repeat 0 0;
	width: 690px;
	height: 410px;
	float: left;	
}

#picture390 {
	background: url(../images/photoglow390.png) no-repeat 0 0;
	width: 690px;
	height: 440px;
	float: left;	
}

#fadeshow {
	width: 640px;
	height: 360px;
	margin: 25px;
}

a {
	color: #00b6dd;
	text-decoration: none;
}

a:hover {
	color: #002b5c
}

.hide {
	visibility: hidden;
}

.lightBlue {
	color: #00b6dd
}


/* Second Row 
-----------------------------------------------------------------------------*/

#secondRow {
	width: 985px;
	margin: 0 0 0 25px;
	padding: 10px 0 35px;
	display: inline-block;
}

#leftCol {
	width: 300px;
	margin-right: 20px;
	float: left;
}

h3 {
	width: 300px;
	height: 20px;
	margin-top: -3px;
}

#chap0 {
	background: url(../images/h_home.png) no-repeat 0 0;
}

#chap1 {
	background: url(../images/h_tvenbedrijfsfilms.png) no-repeat 0 0;
}

#chap2 {
	background: url(../images/h_crossmedia.png) no-repeat 0 0;
}

#chap3 {
	background: url(../images/h_klanten.png) no-repeat 0 0;
}

#chap4 {
	background: url(../images/h_werkwijze.png) no-repeat 0 0;
}

#chap5 {
	background: url(../images/h_oversnel.png) no-repeat 0 0;
}

#chap6 {
	background: url(../images/h_contact.png) no-repeat 0 0;
}

h4 {
	width: 220px;
	margin: 0 20px 0 80px;
}

#par1-1 {
	background: url(../images/subH_tvprogrammas.png) no-repeat 0 0;
	margin: 13px 0 0 80px;
}

#par1-2 {
	background: url(../images/subH_bedrijfsfilms.png) no-repeat 0 0;
	margin: 16px 0 0 80px;
}

#par1-3 {
	background: url(../images/subH_voorlichtingfilms.png) no-repeat 0 0;
	margin: 16px 0 0 80px;
}

#par1-4 {
	background: url(../images/subH_eventregistraties.png) no-repeat 0 0;
	margin: 16px 0 0 80px;
}

#par2-1 {
	background: url(../images/subH_projecten.png) no-repeat 0 0;
	margin: 13px 0 0 80px;
}

#subNav {
	width: 220px;
	margin: 0 50px 0 80px;
}

#subNav ul {
	width: 220px;
	height: auto;
	margin: 0;
}

#subNav li {
	font-size: 1.1em;
	line-height: 1.4;
	width: 220px;
	margin: 0;
}

#subNav a {
	color: #00b6dd;
}

#subNav a:hover {
	color: #002b5c;
}

#rightCol {
	width: 665px;
	float: right;
	display: block;
}

#rightCol h3 {
	width: 480px;
	height: 17px;
	margin: -1px 0 14px;
}

#contentH_home {
	background: url(../images/contentH_home.png) no-repeat 0 0;
}

#contentH_tvenbedrijfsfilms {
	background: url(../images/contentH_tvenbedrijfsfilms.png) no-repeat 0 0;
}

#contentH_crossmedia {
	background: url(../images/contentH_crossmedia.png) no-repeat 0 0;
}

#contentH_klanten {
	background: url(../images/contentH_klanten.png) no-repeat 0 0;
}

#contentH_werkwijze {
	background: url(../images/contentH_werkwijze.png) no-repeat 0 0;
}

#contentH_oversnel {
	background: url(../images/contentH_oversnel.png) no-repeat 0 0;
}

#rightCol p {
	font-size: 1.1em;
	line-height: 1.4;
	width: 480px;
}

#rightCol ul {
	width: 460px;
	height: auto;
	margin: 0;
	padding-left: 2em;
	display: block;
}

#rightCol li {
	font-size: 1.1em;
	line-height: 1.4;
	margin-top: 0;
	list-style-type: disc;
}

p img {
	margin: -21px -185px -21px 0;
	float: right;
}

p img.header {
	margin: -52px -185px -21px 0;
	float: right;
}

p img.left {
	margin: 29px -2px -2px -2px;
	float: left;
}

p img.logo {
	margin: 12px 12px -20px -20px;
	float: left;
}


/* Footer 
-----------------------------------------------------------------------------*/

#footer {
	background: transparent url(../images/bgFooter.png) no-repeat 0 0;
	width: 960px;
	height: 40px;
	margin: 0 25px;
}

#footer p {
	font-size: 1em;
	line-height: 1.4;
	text-align: center;
	width: 924px;
	float: left;
	margin: 6px 0 0 16px;
}

#design {
	width: 16px;
	height: 16px;
	float: right;
}


/* iPhone */
@media screen and (max-device-width: 480px) { html { -webkit-text-size-adjust: none; } }