/*
On The Line PR
@author: Rick Stoopman
@version: 20090807-01

Used colors:
Orange: #FFB61F;
Grey (fonts): #464647;
Hover blue: #1F67FF;
*/

/* General styling
**********************************/	
body, #publerBody {
	font-family: "Lucida Grande", Verdana, Geneva, sans-serif;
	color:#464647;
	font-size:11px;
	line-height: 1.75em;
	}
		
h1 {
	color: #FFB61F;
	font-size: 30px;
	font-weight: normal;
	letter-spacing: .03em;
	line-height: 36px;
	margin-bottom: 18px;
	margin-top:0;
}
.wide h1 {
	margin-top: 18px;
}
h2 {	
	/*font-family: "Lucida Grande", Tahoma, Verdana, Geneva, sans-serif;*/
	font-weight: normal;
	font-size: 1.6363636em; /* 18px */ 
	line-height: 1em; /* 18px */
	margin-top: 1.5em; /* 27px */
	margin-bottom: 0.5em; /* 9px */
	letter-spacing: .075em;
} 
h3,h4{

}	

p{
	line-height: 1.75em;

}
a{
	text-decoration: none;
	color:  #1F67FF;
	font-weight: bold;
}
a:hover{
	text-decoration: underline;
}

	.more a, a.more {
		background: url(../../images/publer_new/background/arrows.png) right 1px no-repeat;
		padding-right: 15px;
	}
button {
	cursor: pointer;
}

#intro p {
	font-family: "Lucida Grande", Verdana, Geneva, sans-serif;
	font-size: 16px;
	width: 311px;
	line-height: 1.75em;
}

.split {
	width: 49%;
	float: left;
	margin-right: 1%;
}


/* Home material */
.home #intro {
	background: url(../../images/publer_new/background/home-intro.png) top left no-repeat;
	height: 250px;
	padding: 25px;
}
.home #intro h1{
	width: 400px;
	margin-top: 14px;
	margin-bottom: 14px;
}
.home #intro a.tour {
	background: url(../../images/publer_new/background/sprite.png) 0 -23px no-repeat;
	border: none;
	height: 28px;
	display: block;
	padding: 0;
	text-indent: -5555px;
	width: 180px;
	margin-top: 6px;
}
.home #intro a.tour:hover{
	background: url(../../images/publer_new/background/sprite.png) -184px -23px no-repeat;
}
.home #intro a.demo{
	text-indent: -5555px;
	background: url(../../images/publer_new/background/header_bg.png) no-repeat;
	display: block;
	width: 546px;
	height: 298px;
	position: absolute;
	top: 19px;
	right: 4px;
}
.home #intro a.demo:hover{
	background-position: 0 -302px;
}

#usps, #ops {
	list-style: none;
	margin: 15px 0 0 ;
	height: 162px;
}
#ops{
	margin: 0;
}
	#usps li, #ops li{
		float: left;
		display: block;
		width: 290px;
		height: 138px;
		padding: 10px 18px ;
		background: url(../../images/publer_new/background/sprite.png) -486px -512px no-repeat;
	}
	#ops li#ops-gegevens{
		background-position: -579px -1557px;
		height: 176px;
	}
	#ops li{
		margin-bottom: 20px;
	}	
	#usps li#usp-gebruiksvriendelijk{
		margin-left: -3px;
		margin-right: 9px;
	}
	#usps li#usp-prijzen{
		margin-right: -3px;
		margin-left: 9px;
	}
		#usps li h2,
		#ops li h2,
		.prijzen div.split h2,
		.reclamebureaus-ontwerpers div.split h2{
			font-size: 18px;
			margin: 18px 0 16px 0;
			line-height: 2em;
			padding-left: 47px;
			background: url(../../images/publer_new/icons/icons_sprite.png) no-repeat;
		}
		#usps li#usp-betrouwbaarheid h2,
		#ops li#ops-betrouwbaarheid h2{
			background-position: 0 -42px;
		}
		#usps li#usp-prijzen h2,
		#ops li#ops-prijzen h2{
			background-position: 0 -84px;
		}
		
		#ops li#ops-pers h2{
			background-position: 0 -2706px;
		}
		#ops li#ops-info h2,
		#ops li#ops-gegevens h2{
			background-position: 0 -2859px;
		}		
			#usps li h2 a,
			#ops li h2 a{
				text-decoration: none;
				color: #464647;
				font-weight: normal;
			}
			#usps li h2 a:hover, #ops li h2 a:hover{
				color: #1F68FF;
			}
		#usps li p, #ops li p{
			line-height: 1.75em;
		}

.home #col1 {
	width: 482px;
	padding: 0 0 0 3px;
	float: left;
}
.home #col2, .home #col3 {
	width: 234px;
	float: left;
	margin-left: 18px;
	padding: 0 0px;
}

.home #quick-links, .home #client-logos {
	position: relative;
	border-bottom: 1px solid #CCC;
	margin: 0 0 36px 0;
	list-style: none;
	height: 186px;
}
	.home #quick-links li {
		height: 36px;
		border-top: 1px solid #CCC;
	}
		.home #quick-links li a {
			display: block;
			padding: 9px 0;
			line-height: 18px;
			height: 18px;
			background: url(../../images/publer_new/background/arrows.png) right 12px no-repeat;
			padding-right: 13px;
		}
			
	.home #client-logos li {
		float: left;
		width: 66px;
		margin-right: 18px;
		margin-bottom: 18px;
	}
	.home #client-logos li.eol {
		margin-right: 0px;		
	}
		.home #client-logos li a {
			display: block;
			float: left;
			width: 66px;
			height: 66px;
			background: url(../../images/publer_new/background/sprite.png) no-repeat;
		}
		.home #client-logos li a.lyceo, .home #client-logos li a.spazuiver, .home #client-logos li a.wmf, 
		.home #client-logos li a.omroepnl, .home #client-logos li a.haust, .home #client-logos li a.emc{
			text-indent: -5555px;
		}
		.home #client-logos li a.lyceo{
			background-position: -822px -512px;
		}
		.home #client-logos li a.spazuiver{
			background-position: -898px -512px;
		}
		.home #client-logos li a.wmf{
			background-position: -822px -588px;
		}
		.home #client-logos li a.omroepnl{
			background-position: -898px -588px;
		}
		.home #client-logos li a.haust{
			background-position: -822px -664px;
		}
		.home #client-logos li a.emc{
			background-position: -898px -664px;
		}
		
		.home #client-logos li.more {
			position: absolute;
			bottom: 27px;
			left: 0;
			width: 100%;
			margin: 0;
			height: 1%;
		}
		.home #client-logos li.more a{
			height: 18px;
			line-height: 18px;
			padding-bottom: 9px;
			width: auto;
			display: block;
			background: url(../../images/publer_new/background/arrows.png) right 5px no-repeat;
		}

#twitter, #call-me, #contact-details  {
	height: 279px;
	padding: 18px;
	width: 198px;
	float: left;
	margin-left: 18px;
}
#contact-details{
	margin-left:0;
	position:relative;
	}
	
	#contact-details #email-button,#contact-details #call-button{
		background-position: -303px -276px;
		width:201px; 
		height:28px;
		text-indent:-5555px;
		margin-left:0;
		margin-bottom:8px;
		}
	#contact-details #email-button{
		background-position: -303px -305px;
	}
	#contact-details #email-button:hover{
		background-position: -514px -322px;
	}
	
	#contact-details #sPostal{
		background: url(../../images/publer_new/background/sprite.png) no-repeat -814px -319px;
		width:168px;height:24px;
		border:none;
		padding:4px 29px 0 4px;
	}
	#contact-details button{
		width:25px;
		height:28px;
		position:absolute;
		display:block;
		border:none;
		background: url(../../images/publer_new/background/sprite.png) no-repeat -495px 0;
		text-indent:-5555px;
		bottom:21px;
		right:15px;
	}
	
.home #twitter, .home #call-me  {
	float: none;
	margin-left: 0;
}
#twitter,#contact-details {
	background: url(../../images/publer_new/background/sprite.png) -521px 0 no-repeat;
	position:relative;
	word-wrap: break-word;
}
#contact-details, body.contact form#call-me{
	margin: 18px 0 0 9px;
}
form#call-me{
	float: right;
}

#footer #twitter a{
	color:#1F67FF;
	font-weight:bold;
}
#footer #twitter a:hover{
	text-decoration:underline;
}
#call-me  {
	position: relative;
	background: url(../../images/publer_new/background/sprite.png) -756px 0 no-repeat;
}
	#twitter h2, #call-me h2, #contact-details h2 {
		margin-top: 0;
	}
	#twitter h3{
		margin-bottom:0;
		font-size:1em;
	}
	#call-me p {
		margin-bottom: 10px;
	}
form#call-me input, form#call-me label {
	width: 185px;
}
form#call-me input, form#call-me select {
	border: 1px solid #CCC;
	color: #4C4C50;
	font-size: 11px;
	padding: 2px;
	margin-bottom: 3px;
}
 form#call-me select {
	width: 90px;
 }
 form#call-me select option {
 }
form#call-me label.split {
	width: 50%;
	margin:0;
}
	form#call-me button,form#contact-form button, #twitter p.more-tweets a,
	#feedback-box button{
		text-indent: -5555px;
		height: 28px;
		width: 200px;
		background: url(../../images/publer_new/background/sprite.png) 0px -82px no-repeat;
		border: none;
		margin-top: 18px;
	}
	/*JRN*/
	form#call-me button{ 
		position: absolute;
		top: 246px;
	}
	#twitter p.more-tweets a{ 
		display: block;
		height: 37px;
	 }
	 #twitter p.more-tweets{
		position:absolute;
		bottom:5px;
	 }
	.en form#call-me button,.en form#contact-form button{background: url(../../images/publer_new/background/sprite.png) 0px -111px no-repeat; }
	.nl form#call-me button:hover,.nl form#contact-form button:hover , #feedback-box button:hover{ background: url(../../images/publer_new/background/sprite.png) -201px -82px no-repeat;}
	.en form#call-me button:hover,.en form#contact-form button:hover { background: url(../../images/publer_new/background/sprite.png) -201px -111px no-repeat;}
	.nl #twitter p.more-tweets a{background-position: 0px -202px; }
	.en #twitter p.more-tweets a{background-position: 0px -239px;}
	.nl #twitter p.more-tweets a:hover {background-position: -204px -202px;}
	.en #twitter p.more-tweets a:hover {background-position: -204px -239px;}
	
form#contact-form button{
	margin-top:0;
	float:right;
	margin-right:28px;
}
form#contact-form label{
	display:block;
	width:100%;
	float:none;
}
form label em.error{
	color: red;
}

form#contact-form select.wide{
	width:320px;
	height:27px;
	line-height:30px;
	border: 1px solid #C3C3C3;
	vertical-align:middle;
	padding:3px;
}
form#contact-form p.wrap{
	float:left;
	width:216px;
	}
	form#contact-form p.wrap label{
		margin-top:12px;
	}

	form#contact-form p.first{
		margin-right:20px;
	}
	form#contact-form input{
		width:204px;
		display:block;
		padding:0;
		vertical-align:middle;
		line-height:30px;
		border:1px solid #c3c3c3;
		padding:6px;
		padding-bottom:0;
		height:24px;
	}
	input.optional{
		background-color:#F1F1F1;
	}
	label em{
		float:right;
		font-style:normal;
		color:#c3c3c3;
	}
	textarea{
		width:440px;
		display:block;
		height:104px;
		padding:6px;
		border: 1px solid #C3C3C3;
	}	
	
.home #footer #twitter, .home #footer #call-me  {
	display: none;
}
/* Tour */

.tour #intro{
	float: left;
	width: 485px;
}
	.tour #intro p{
		width: 485px;
	}
	
.tour  a.quicktour{
	float: right;
	margin-top: 29px;
	border: 1px solid #1f67ff;
	display: block;
	text-indent: -5555px;
	width: 189px;
	height: 122px;
	background: url(../../images/publer_new/background/sprite.png) no-repeat -579px -1292px;
}
.tour  a.quicktour:hover{
	background-position: -579px -1424px;
}

	/* JRN */
	.tour ul#tour,
	ul#voorbeelden{
		list-style: none;
		margin: 0;
		padding: 0;
	}
		.tour ul#tour li,
		ul#voorbeelden li{
			margin-bottom: 60px;
			position: relative;
			min-height: 220px;
		}
			.tour ul#tour li h2{
				margin-top: 0;
			}
			.tour ul#tour li.left h2,
			.tour ul#tour li.left p{
				margin-left: 427px;
			}
			.tour ul#tour li.right h2,
			.tour ul#tour li.right p{
				margin-right: 427px;
			}
			.tour ul#tour li.right img{
				position: absolute;
				right: 0;
				top: 0;
			}
				.tour ul#tour li.left img{
					position: absolute;
					left: 0;
					top: 0;
				}
/*
.tour ul#tour,*/
ul#voorbeelden{
	list-style: none;
	margin: 0;
	padding: 0;
}		
.voorbeelden ul#voorbeelden li,
ul#voorbeelden li{
	margin-top: 60px;
	position: relative;
	min-height: 120px;
}

		.voorbeelden ul#voorbeelden li h2{
			margin-top: 0;
		}
	.voorbeelden ul#voorbeelden li h2,
	.voorbeelden ul#voorbeelden li p{
		margin-right: 245px;
	}	
		.voorbeelden ul#voorbeelden li img{
			position: absolute;
			right: 0;
			top: 25px;
		}
	
	
	
	/*
	.tour ul#tour li,
	ul#voorbeelden li{
		float: left;
		margin-bottom: 60px;
	}
		.tour ul#tour li h2{
			margin-top: 0;
		}
		.tour ul#tour li h2,
		.tour ul#tour li p{
			float: left;
			width: 308px;
		}*/
		.tour ul#tour li img.left,
		img.left{
			float: left;
			padding-right: 56px;
		}
		.tour ul#tour li  img.right,
		img.right{
			float: right;
			padding-left: 56px;
		}
		
/* Voorbeelden */
ul#voorbeelden li{
	margin-bottom: 20px;
}
ul#voorbeelden h2,
ul#voorbeelden p{
	width: 460px;
	float: left;
}
ul#voorbeelden img{
	float: right;
	margin-top: -28px;
}
/* Klanten & webbased*/
div.left{
	float: left;
	margin-right: 25px;
	width: 640px;
}
div.right{
	float: left;
	margin:20px 0;
	width:325px;
}
ul#klanten,
ul#browsers{
	margin: 0;
	padding: 0;
	list-style:none;
}
ul#klanten li,
ul#browsers li{
	float: left;
	margin-left: 7px;
	margin-bottom: 20px;
}
ul#klanten li.even,
ul#browsers li.even{
	margin-left: 22px
}
blockquote{
	margin:0 0 0.5em 0;
	font-size: 1.2em;
}
/* Publer Groen */
.publer-groen div.left{
	width: 739px;
	margin-right: 18px;
}
.publer-groen div.right{
	width: 233px;
	height: 184px;
	margin-top: 0;
	background: url(../../images/publer_new/background/sprite.png) no-repeat 0 -1603px;
	text-indent: -5555px;
}
		
/* Prijzen */

.prijzen dl {
	float: left; 
	margin: 0;		
}
.prijzen div.split h2{
	letter-spacing:0.075em;
	margin-bottom:0.5em;
	margin-top:1.5em;
}
div.standaard{
	margin:20px 0;
	background: url(../../images/publer_new/background/sprite.png) no-repeat 0 -1289px;
	height: 287px;
	padding:15px 20px 0 20px;
	width:285px;
	float: left;
}
.publer-basic h1,
.publer-advanced h1,
.publer-premium h1{
	background: url(../../images/publer_new/background/sprite.png) no-repeat -928px -994px;
	padding: 15px 0 0 80px;
	height: 62px;
}
.publer-advanced h1{
	background-position: -928px -1086px;
}
.publer-premium h1{
	background-position: -928px -1178px;
}


div.prijsdetail{
	width: 640px;
	margin-right: 25px;
	float: left;
}
	.prijzen div.standaard h2{
		background: none;
		padding-left: 0;
		font-size: 16px;
		margin: 0 0 0.3em 0;
		line-height: 2em;
	}
	div.standaard ul{
		margin: 0;
	}	
	div.standaard ul li{
		background: url(../../images/publer_new/background/sprite.png) no-repeat -974px -519px;
		list-style: none;
		padding: 0 0 1px 30px;
	}

div.split h2.contract{
	background-position: 0 -126px;
}
div.split h2.overstappen{
	background-position: 0 -168px;
}
div.split h2.hosting{
	background-position: 0 -210px;
}
div.split h2.extra{
	background-position: 0 -252px;
}
div.split h2.ontwerp{
	background-position: 0 -294px;
}
div.split h2.updates{
	background-position: 0 -336px;
}
div.split h2.meer{
	background-position: 0 -378px;
}
div.split h2.edit{
	background-position: 0 -985px;
}
div.split h2.snel{
	background-position: 0 -1027px;
}


	.prijzen dt{
		background: url(/images/publer_new/background/sprite.png) -332px -829px no-repeat;
		margin: 0;
		height: 134px;
		width: 290px;
		padding: 0px 18px ;
	}
	.prijzen dl#pricing-basic {
		margin-left: -3px;
		margin-right: 9px;	
	}
	.prijzen dl#pricing-premium {
		margin-right: -3px;
		margin-left: 9px;	
	}
	.prijzen dl#pricing-basic dt{
		background: url(/images/publer_new/background/sprite.png) -1px -829px no-repeat;
	}
	.prijzen dl#pricing-premium dt{
		background: url(/images/publer_new/background/sprite.png) -663px -829px no-repeat;
	}

		.prijzen dl dt a {
			width: 326px;
			text-indent: -5555px;
			display: block;
			height: 143px;
		}
	.prijzen dl dd {
		margin: 0;
		font-size: 14px;
		color: #474849;
		height: 28px;
		line-height: 28px;
		background: url(/images/publer_new/background/sprite.png) -486px -678px no-repeat;
		padding: 0 18px;
		text-align: center;
		width: 290px;
	}
	.prijzen dl dd.contact {
		height: 90px;
		padding-top: 18px;
		background-position: -486px -720px;
		font-size: 11px;
	}
	.prijzen dl dd.contact button {
		display: block;
		margin: 0 auto 12px auto;
		background: url(../../images/publer_new/background/sprite.png) 0 -140px no-repeat;
		border: none;
		height: 28px;
		padding: 0;
		text-indent: -5555px;
		width: 180px;
	}
	.en dl dd.contact button { background-position: 0 -169px; 	}
		.prijzen dl dd.contact button:hover{
			background: url(../../images/publer_new/background/sprite.png) -184px -140px no-repeat;
		}
		.en dl dd.contact button:hover { background-position: -184px -169px; 	}

	ul#prijs-detail{
		list-style: none;
		margin-left: 10px;
	}
	ul#prijs-detail li{
		background: url(../../images/publer_new/icons/icons_sprite.png) no-repeat;
		padding-left: 25px;
	}
	ul#prijs-detail li.beheerder{ background-position: 0 -4913px; }
	ul#prijs-detail li.email{ background-position: 0 -4959px; }
	ul#prijs-detail li.opslag{ background-position: 0 -5005px; }
	ul#prijs-detail li.dataverkeer{ background-position: 0 -5051px; }
	ul#prijs-detail li.time{ background-position: 0 -5097px; }
	ul#prijs-detail li.feedback{ background-position: 0 -5143px; }
	ul#prijs-detail li.modules{ background-position: 0 -5190px; }
	ul#prijs-detail li.support{ background-position: 0 -5235px; }
	ul#prijs-detail li.maatwerk{ background-position: 0 -5281px; }
	
	
	

/* Tips en Artikelen */
div.artikelen{
	width: 468px;
	margin-right: 36px;
	float: left;
}
div.extra{
	width: 194px;
	height: 350px;
	float: right;
	background: url(../../images/publer_new/background/sprite.png) -335px -1292px no-repeat;
	padding: 0 20px;
	margin-top: 29px;
}
ul.icon{
	padding: 0;
	margin: 0;
	list-style: none;
}
ul.icon li{
	padding-left: 50px;
	background: url(../../images/publer_new/icons/icons_sprite.png) no-repeat;
}
ul.icon li ul li{
	padding-left: 0;
	background: none;
}

ul.icon li.energie{
	background-position: 0 -520px;
}
ul.icon li.papier{
	background-position: 0 -682px;
}
ul.icon li.locatie{
	background-position: 0 -834px;
}
ul.icon li.updates{
	background-position: 0 -1069px;
}
ul.icon li.servers{
	background-position: 0 -1221px;
}
ul.icon li.data{
	background-position: 0 -1373px;
}
ul.icon li.applicaties{
	background-position: 0 -1526px;
}
ul.icon li.framework{
	background-position: 0 -1678px;
}
ul.icon li.hoofditem1 {
	background-position: 0 -379px;
}
ul.icon li.one{
	background-position: 0 -1832px;
}
ul.icon li.two{
	background-position: 0 -2137px;
}
ul.icon li.three{
	background-position: 0 -2409px;
}
ul.icon li.four{
	background-position: 0 -2561px;
}	
ul.icon li.email{
	background-position: 0 -3029px;
}
ul.icon li.feedback{
	background-position: 0 -3178px;
}
ul.icon li.phone{
	background-position: 0 -3340px;
}
ul.icon li.server{
	background-position: 0 -3493px;
}
ul.icon li.piek{
	background-position: 0 -3654px;
}
ul.icon li.up{
	background-position: 0 -3805px;
}
ul.icon li.monitor{
	background-position: 0 -3957px;
}
ul.icon li.zoek{
	background-position: 0 -4111px;
}
ul.icon li.bezoek{
	background-position: 0 -4390px;
}
ul.icon li.techniek{
	background-position: 0 -4654px;
}

	
		
/* Contact */
.contact #call-me {

}


/* Large Headings */

.tour h1,
.voorbeelden h1,
.tips-artikelen h1,
.faq h1,
.publer-groen h1{
	background: url(../../images/publer_new/background/sprite_heading.jpg) no-repeat;
	height: 72px;
	padding: 52px 36px;
	margin: 0;
	margin-bottom: 18px;
}
.voorbeelden h1{
	background-position: -1px -187px;
}
.tips-artikelen h1{
	background-position: -1px -372px;
}
.faq h1{
	background-position: -1px -557px;
}
.publer-groen h1{
	background-position: -1px -742px;
}

/* RCK */
.hide{
	display: none !important;
}