/* sparkdesign.nl 
Peter@Kraaijeveld.nl
Joost@deKeijzer.org
2009
*/

/* div's */
div.main
{
	position: relative;
	width: 774px;
	height: auto;
	background-color: #FFFFFF;
	padding: 0px;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
	text-align: left;
}

div.mainbinnen
{
	position: absolute;
	left: 30px;
	top: 222px;
	height: auto;
	width: 715px;
	padding: 0px;
	margin: 0 auto;
	text-align: left;
}

div.breed
{
	float: left;
	width: 715px;
	overflow: hidden;
	x-background: green;
}

div.middel
{
	float: left;
	width: 471px;
	overflow: hidden;
	x-background: blue;
}

div.smal
{
	float: left;
	width: 238px;
	overflow: hidden;
	x-background: red;
}

div.kolom-marge { margin-left: 6px; }

div.breed div.header, div.middel div.header, div.smal div.header
{
	position: relative;
	top: auto;
	left: auto;
	height: 30px;
	width: 100%;
	margin: 0 0 4px 0;
	padding: 0px;
	background-image: url(/css/heading-noflash-background.png);
	z-index: 0;
}

div.breed div.header h1, div.middel div.header h1, div.smal div.header h1
{
	margin-top: 0;
	padding-top: 6px;
	font-size: 12px;
	overflow: hidden;
	white-space: nowrap;
}

div.breed div.body, div.middel div.body, div.smal div.body
{
	position: relative;
	top: auto;
	left: auto;
	height: auto;
	width: 100%;
	margin: 0px;
	padding: 0px;
	overflow: hidden;
}

div.breed div.footer, div.middel div.footer, div.smal div.footer
{
	position: relative;
	top: auto;
	left: auto;
	height: 5px;
	width: 100%;
	margin: 0px;
	padding: 0px;
	border-top-width: 1px;
	border-top-style: solid;
	border-top-color: #999;
}

div.breed div.content
{
	position: relative;
	top: auto;
	left: auto;
	height: auto;
	width: 697px;
	/* 715-9-9 */
	margin: 0 0 0 9px;
	padding: 0px;
	overflow: visible;
}

div.middel div.content
{
	position: relative;
	top: auto;
	left: auto;
	height: auto;
	width: 453px;
	/* 471-9-9 */
	margin: 0 0 0 9px;
	padding: 0px;
	overflow: visible;
}

div.smal div.content
{
	position: relative;
	top: auto;
	left: auto;
	height: auto;
	width: 220px;
	/* 238-9-9 */
	margin: 0 0 0 9px;
	padding: 0;
	overflow: visible;
}

div.middel div.foto
{
	position: relative;
	top: auto;
	text-align: center;
	vertical-align: middle;
	height: auto;
	width: 100%;
	overflow: hidden;
}

div.middel div.bijschrift
{
	position: relative;
	top: auto;
	height: 14px;
	width: 100%;
	margin: 0px;
	padding: 0px;
	border-bottom-width: 1px;
}

div.zoekregel div.icoon
{
	float: left;
	width: 100px;
	text-align: center;
}

div.zoekregel div.tekst
{
	float:left;
	width: 588px;
	margin-left: 9px;
}
div.zoekregel div.tekst a
{
	text-decoration: none;
	border: none;
	display: block;
}
div.zoekregel div.tekst a strong { color: black; }
div.zoekregel div.tekst a strong span, div.zoekregel div.tekst a span { color: #666; }

div.zoekregel div.clear
{
	clear: both;
	float: none;
}
a.news
{
	display: block;
	text-decoration: none;
	margin-bottom: 8px;
	padding-bottom: 10px;
	border-bottom: 1px solid #999;
}

a.news p
{
	display: inline;
	color: #777;
}

a.news h3
{
	display: inline;
	color: black;
}

a.news.sticky h3 { color: #ff6600; }

h3.news-month
{
	color: #999;
	font-weight: bold;
	width: auto;
	padding: 0;
	border-bottom: 1px solid #999;
	margin: -12px 0 10px 0;
	background: white;
	height: 7px;
	overflow: visible;
}

h3.news-month span
{
	background: white;
	padding-right: 2px;
}

#stepper
{
	position: relative;
	margin: -26px 12px 0 0;
	float: right;
}

#stepper a
{
	float: left;
	height: 14px;
	width: 14px;
	background: #dadada;
	border: none;
	text-align: center;
	vertical-align: middle;
	color: #666;
	text-decoration: none;
	margin-left: 3px;
}

#stepper a.active
{
	background: #f7941d;
	color: #FFF;
}

div.middel div.pagenumber
{
	position: absolute;
	top: 6px;
	right: 0px;
	height: 17px;
	margin: 0;
	padding: 0px;
	width: 83px;
	border-bottom-width: 1px;
	text-align: right;
	background: white;
}

div.middel div.pagenumber-current
{
	display: inline;
	padding-right: 4px;
}

div.middel div.header.home
{
	height: 95px;
	margin-bottom: 2px;
	background-image: url(/css/home-left-header-noflash.png);
}

div.middel div.header.home p
{
	color: #FFF;
	font-size: 12px;
	padding: 0px;
	margin-top: 6px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 9px;
}

div.logo
{
	width: 104px;
	top: 14px;
	left: 30px;
	position: absolute;
	margin: 0px;
	padding: 0px;
	height: 55px;
}

div.designinnovation
{
	width: 206px;
	top: 5px;
	position: absolute;
	margin: 0px;
	padding: 0px;
/*	height: 47px;*/
	left: 539px;
/*	overflow: hidden;*/
	display: block;
	text-align: right;
}
div.designinnovation img { margin: 0; }
form.zoekformulier
{
	margin: 0;
	padding: 0;
	display: block;
	position: relative;
}
form.zoekformulier input
{
	display: inline-block;
	position: relative;
	vertical-align: top;
}
form.zoekformulier input.text
{
	font-size: 11px;
	/*line-height: normal;*/
	margin: 0;
	padding: 1px;
	border: 1px solid silver;
	height: 13px;
	width: 150px;
	vertical-align: top;
}
form.zoekformulier input.submit
{
	font-size: 1px;
	margin: 0 2px;
	width: 18px;
	height: 18px;
	border: 0px none;
	cursor: pointer;
	background: white url(/css/zoek.png) no-repeat scroll 1px 1px;
	top: 1px;
	vertical-align: top;
}
form.zoekformulier p
{
	color: #444;
	margin-top: 5px;
}
/******** Menubar ********/
div.menubar
{
	height: 38px;
	width: 715px;
	top: 80px;
	position: absolute;
	left: 30px;
	background-image: url(/css/menu-rest.png);
	background-repeat: no-repeat;
	z-index: 30;
}

div.menutitel
{
	position: absolute;
	height: 35px;
	overflow: hidden;
	top: 0px;
	background-position: left top;
	margin: 0;
	padding: 0;
}

div.menutitel-selected
{
	position: absolute;
	height: 35px;
	overflow: hidden;
	top: 0px;
	background-position: left bottom;
}

div.menubar div.menutitel a, 
div.menubar div.menutitel-selected a
{
	display: block;
	width: 100%;
	height: 100%;
}

#menuTitelHome
{
	/* taalonafhankelijk*/
	left: 0px;
	width: 69px;
	background-image: url(/css/menu-home.png);
}

#menuTitelHome:hover { background-position: right top; }

#menuTitelDiensten-nl
{
	left: 69px;
	width: 93px;
	background-image: url(/css/menu-diensten-nl.png);
}

#menuTitelNews-nl
{
	left: 162px;
	width: 71px;
	background-image: url(/css/menu-news-nl.png);
}

#menuTitelProjecten-nl
{
	left: 233px;
	width: 84px;
	background-image: url(/css/menu-projecten-nl.png);
}

#menuTitelOverspark-nl
{
	left: 317px;
	width: 100px;
	background-image: url(/css/menu-overspark-nl.png);
}

#menuTitelDiensten-en
{
	left: 69px;
	width: 103px;
	background-image: url(/css/menu-diensten-en.png);
}

#menuTitelNews-en
{
	left: 172px;
	width: 65px;
	background-image: url(/css/menu-news-en.png);
}

#menuTitelProjecten-en
{
	left: 237px;
	width: 84px;
	background-image: url(/css/menu-projecten-en.png);
}

#menuTitelOverspark-en
{
	left: 321px;
	width: 100px;
	background-image: url(/css/menu-overspark-en.png);
}

#menuTitelNL
{
	/* taalonafhankelijk*/
	left: 638px;
	width: 29px;
	background-image: url(/css/menu-nl.png);
}

#menuTitelNL:hover { background-position: right top; }

#menuTitelEN
{
	/* taalonafhankelijk*/
	left: 674px;
	width: 34px;
	background-image: url(/css/menu-en.png);
}

#menuTitelEN:hover { background-position: right top; }

div.menu
{
	background-color: #FFFFFF;
	position: absolute;
	border: 1px solid #999999;
	margin: 0px;
	padding-top: 4px;
	padding-right: 0px;
	padding-bottom: 6px;
	padding-left: 0px;
	display: none;
	top: 34px;
	width: auto;
	left: 0px;
	z-index: 40;
}

div.menuschaduw1
{
	position: absolute;
	display: none;
	opacity: 0.1;
	background-color: #000;
	z-index: 40;
}

div.menuschaduw2
{
	position: absolute;
	display: none;
	opacity: 0.1;
	background-color: #000;
	z-index: 40;
}

div.menuschaduw3
{
	position: absolute;
	display: none;
	opacity: 0.1;
	background-color: #000;
	z-index: 40;
}

div.menuschaduw4
{
	position: absolute;
	display: none;
	opacity: 0.1;
	background-color: #000;
	z-index: 40;
}

div.menuschaduw5
{
	position: absolute;
	display: none;
	opacity: 0.1;
	background-color: #000;
	z-index: 40;
}

div.menuschaduw6
{
	position: absolute;
	display: none;
	opacity: 0.1;
	background-color: #000;
	z-index: 40;
}

div.menuschaduw7
{
	position: absolute;
	display: none;
	z-index: 40;
	background-color: #FFF;
}

div.menu p
{
	display: block;
	white-space: nowrap;
	margin: 0px;
	padding-top: 0px;
	padding-right: 14px;
	padding-bottom: 0px;
	padding-left: 14px;
	font-size: 10px;
	line-height: 16px;
	background-color: #FFF;
}

div.menu p a
{
	text-decoration: none;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
	display: block;
}

div.menu p a:hover { color: #FF6600; }

/******** Project Browser ********/
div.projectbrowser
{
	/* hoogste parent */
	height: 94px;
	width: 684px;
	top: 120px;
	margin: 0px;
	padding: 0px;
	position: absolute;
	left: 46px;
	overflow: hidden;
	z-index: 10;
}

div.projectbrowser-scrollleft
{
	/* scroll knop links */
	height: 17px;
	width: 14px;
	top: 153px;
	margin: 0px;
	padding: 0px;
	position: absolute;
	left: 27px;
}

div.projectbrowser-scrollright
{
	/* scrollknop rechts */
	height: 15px;
	width: 12px;
	top: 156px;
	margin: 0px;
	padding: 0px;
	position: absolute;
	left: 733px;
}

div.projectbrowser-canvas
{
	/* één nivo dieper: deze scrollt heen en weer */
	height: 81px;
	top: 7px;
	margin: 0px;
	padding: 0px;
	position: absolute;
	left: 0px;
}

div.projectbrowser-element
{
	position: absolute;
	top: 4px;
	height: 66px;
	width: auto;
}

div.projectbrowser-detail
{
	height: auto;
	top: 122px;
	margin: 0px;
	padding: 5px;
	position: absolute;
	background-color: #FFFFFF;
	border: 1px solid #999999;
	z-index: 20;
	left: -600px;
	display: none;
	text-align: center;
}

div.projectbrowser-detail a { display: block; }

div.projectbrowser-detail p
{
	padding: 0px;
	margin: 0px;
	white-space: nowrap;
	display: block;
}

div.projectbrowser-detail p a
{
	color: #000;
	text-decoration: none;
	border: 0px none #FFF;
}

div.projectbrowser-detail p a:hover { color: #F60; }

div.projectbrowser-detailschaduw1
{
	position: absolute;
	display: none;
	opacity: 0.1;
	-moz-opacity: 0.1;
	background-color: #000;
	z-index: 20;
}

div.projectbrowser-detailschaduw2
{
	position: absolute;
	display: none;
	opacity: 0.1;
	background-color: #000;
	z-index: 20;
}

div.projectbrowser-detailschaduw3
{
	position: absolute;
	display: none;
	opacity: 0.1;
	background-color: #000;
	z-index: 20;
}

div.projectbrowser-detailschaduw4
{
	position: absolute;
	display: none;
	opacity: 0.1;
	background-color: #000;
	z-index: 20;
}

div.projectbrowser-detailschaduw5
{
	position: absolute;
	display: none;
	opacity: 0.1;
	background-color: #000;
	z-index: 20;
}

div.projectbrowser-detailschaduw6
{
	position: absolute;
	display: none;
	opacity: 0.1;
	background-color: #000;
	z-index: 20;
}

div.projectbrowser-detailschaduw7
{
	position: absolute;
	display: none;
	opacity: 0.1;
	background-color: #000;
	z-index: 20;
}

/******** Homepage ********/
div.homeleft-header
{
	height: 95px;
	top: 222px;
	margin: 0px;
	padding: 0px;
	position: absolute;
	left: 0px;
	width: 471px;
	background-image: url(/css/home-left-header-noflash.png);
	z-index: 0;
}

div.homeleft-header p
{
	color: #FFF;
	font-size: 12px;
	padding: 0px;
	margin-top: 6px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 9px;
}

div.homeleft-body
{
	height: 293px;
	top: 319px;
	margin: 0px;
	padding: 0px;
	position: absolute;
	left: 0px;
	width: 471px;
	overflow: hidden;
}

div.homeright-body
{
	height: 353px;
	top: 256px;
	margin: 2px;
	position: absolute;
	left: 476px;
	width: 225px;
	overflow: hidden;
}

div.project-left-body
{
	height: 358px;
	top: 256px;
	margin: 0px;
	padding: 0px;
	position: absolute;
	left: 0px;
	width: 470px;
	overflow: hidden;
}

div.left-header
{
	height: 30px;
	top: 222px;
	margin: 0px;
	padding: 0px;
	position: absolute;
	left: 0px;
	width: 471px;
	background-image: url(/css/heading-noflash-background.png);
}

div.left-body
{
	height: 356px;
	top: 256px;
	margin: 0px;
	padding: 0px;
	position: absolute;
	left: 0px;
	width: 458px;
	overflow: hidden;
}

div.left-footer
{
	height: 5px;
	top: 615px;
	margin: 0px;
	padding: 0px;
	position: absolute;
	left: 0px;
	width: 471px;
	border-top-width: 1px;
	border-top-style: solid;
	border-top-color: #999;
}

div.left-content
{
	height: auto;
	top: 0px;
	margin: 0px;
	padding: 0px;
	position: absolute;
	left: 9px;
	width: 446px;
	overflow: hidden;
}

div.left-foto
{
	display: none;
	text-align: center;
	vertical-align: middle;
	position: absolute;
	height: 336px;
	width: 471px;
	top: 0px;
	overflow: hidden;
}

div.left-bijschrift
{
	height: 14px;
	top: 340px;
	margin: 0px;
	padding: 0px;
	position: absolute;
	left: 0px;
	width: 374px;
	border-bottom-width: 1px;
}

div.right-header
{
	height: 30px;
	top: 222px;
	margin: 0px;
	padding: 0px;
	position: absolute;
	left: 477px;
	width: 234px;
	background-image: url(/css/heading-noflash-background.png);
	z-index: 0;
}

div.right-body
{
	height: 353px;
	top: 256px;
	margin: 2px;
	position: absolute;
	left: 476px;
	width: 225px;
	overflow: hidden;
}

div.right-footer
{
	height: 4px;
	top: 615px;
	margin: 0px;
	padding: 0px;
	position: absolute;
	left: 477px;
	width: 234px;
	border-top-width: 1px;
	border-top-style: solid;
	border-top-color: #999;
}

div.right-content
{
	height: auto;
	top: 0px;
	margin: 0px;
	padding: 0px;
	position: absolute;
	left: 9px;
	width: 211px;
	overflow: hidden;
}

div.left-scrollbar
{
	height: 356px;
	top: 256px;
	margin: 0px;
	padding: 0px;
	position: absolute;
	left: 457px;
	width: 14px;
}

div.left-scrollbar-boven
{
	position: absolute;
	width: 11px;
	height: 12px;
	left: 2px;
	top: 0px;
}

div.left-scrollbar-boven:hover { cursor: pointer; }

div.left-scrollbar-sliderbodem
{
	position: absolute;
	background-color: #EEE;
	height: 331px;
	top: 12px;
	width: 7px;
	left: 4px;
	margin: 0px;
	padding: 0px;
	display: block;
}

div.left-scrollbar-slider
{
	position: absolute;
	height: 331px;
	width: 7px;
	background-color: #ccc;
	left: 0px;
	top: 0px;
	margin: 0px;
	padding: 0px;
	display: block;
}

div.left-scrollbar-onder
{
	position: absolute;
	top: 346px;
	width: 11px;
	height: 12px;
	left: 2px;
}

div.right-scrollbar
{
	height: 356px;
	top: 256px;
	margin: 0px;
	padding: 0px;
	position: absolute;
	left: 699px;
	width: 14px;
}

div.right-scrollbar-boven
{
	position: absolute;
	width: 11px;
	height: 12px;
	top: 0px;
	right: 0px;
	left: 2px;
}

div.right-scrollbar-sliderbodem
{
	position: absolute;
	background-color: #EEE;
	height: 331px;
	top: 12px;
	width: 7px;
	left: 4px;
	margin: 0px;
	padding: 0px;
	display: block;
}

div.right-scrollbar-slider
{
	position: absolute;
	height: 331px;
	width: 7px;
	background-color: #ccc;
	left: 0px;
	top: 0px;
	margin: 0px;
	padding: 0px;
	display: block;
}

div.right-scrollbar-onder
{
	position: absolute;
	top: 346px;
	width: 11px;
	height: 12px;
	left: 2px;
}

div.pagenumber
{
	height: 16px;
	top: 596px;
	margin: 0px;
	padding: 0px;
	position: absolute;
	left: 381px;
	width: 89px;
	border-bottom-width: 1px;
	text-align: right;
}

div.pagenumber-current
{
	display: inline;
	padding-right: 4px;
}

div.footer
{
	position: relative;
	top: auto;
	height: 17px;
	width: 714px;
	margin: 0px;
	padding: 0px;
	clear: both;
}

div.status
{
	padding: 2px;
	left: 1px;
	top: 660px;
	width: auto;
	position: absolute;
	height: 16px;
}

div.status p
{
	font-size: 9px;
	color: #F60;
	margin: 1px;
	padding: 0px;
}

div.paging
{
	margin-top: -4px;
	padding-bottom: 4px;
}

div.paging a
{
	text-decoration: none;
	color: #444;
}

div.paging a:hover, div.paging span { color: #aaa; }
div.paging div.vorige { float: left; }

div.paging div.vorige a, div.paging div.vorige span
{
	padding-left: 14px;
	background-image: url(/css/prev.png);
	background-repeat: no-repeat;
	background-position: left center;
}

div.paging div.volgende { float: right; }

div.paging div.volgende a, div.paging div.volgende span
{
	padding-right: 14px;
	background-image: url(/css/next.png);
	background-repeat: no-repeat;
	background-position: right center;
}

h3.paging a
{
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #FF6600;
}

h3.paging a:visited { color: #666; }

h3.paging em
{
	font-style: normal;
	color: #666;
}

p.leesmeer
{
	margin-top: -9px;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #CCC;
}

img.foto-pijl { vertical-align: top; }
a:hover { cursor: pointer; }