/*
	puurpxl.nl
	**********
	
	Styles voor screens
*/

body {
	font:14px/22px "Georgia", serif;
	text-align:center;
	color:#867866;
	background-color: #fff;
}

#header,
#main {
	width:980px;
	margin:0 auto;
	text-align:left;
}

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

a:hover {
	text-decoration:none;
	background:repeat-x left bottom url(../gfx/line_dotted_blue.gif);
}

/*
a:visited {
	color: #afafaf;	
}
*/

div.clear {
	clear: both;	
}

.displayNone
{
	display:none;	
}

/*	Headers	*/
h1, h2, h3, h4, h5, h6 {
	color:#867866;
	font-weight:normal;
	font-family:"Helvetica", "Arial", sans-serif;
	text-transform:uppercase;
}

h1 {
	display:none;
}

.heading3 {
	color:#ffffff;
	font-weight:normal;
	font-family:"Helvetica", "Arial", sans-serif;
	text-transform:uppercase;
}

div.clear {
	clear: both;	
}

/*	Header	*/
#header {
	position:relative;
	height:114px;
}

#header #logo {
	display:block;
	position:absolute;
	top:41px;
	left:100px;
}

#header #telNr {
	display:block;
	position:absolute;
	top:40px;
	left:790px;
	width:133px;
	height:21px;
	text-indent:-4096px;
	overflow:hidden;
	background:no-repeat 0 0 url(../gfx/telefoonnummer.gif);
}

#header #mailOns {
	display:block;
	position:absolute;
	top:64px;
	left:790px;
	width:105px;
	height:11px;
	text-indent:-4096px;
	overflow:hidden;
	background:no-repeat 0 0 url(../gfx/emailadres.gif);
}


/*	Twitter	*/
#twits {
	position:relative;
	text-align:center;
	background:#00aeef;
}

#twits div.preload {
	position:absolute;
	top:68px;
	left:50%;
	width:32px;
	height:32px;
	margin-left:-67px;
	z-index:50;
	background:no-repeat 0 0 url(../gfx/twitter_loading.gif);
}

#twits ul {
	position:relative;
	left:-67px;
	margin:0 auto;
	padding:0;
	width:646px;
	height:174px;
}

#twits ul li {
	position:absolute;
	top:20px;
	left:0;
	width:314px;
	font-size:16px;
	line-height:20px;
	color:#00aeef;
	text-align:left;
	z-index:75;
	background:no-repeat 0 100% url(../gfx/twit_left_bottom.gif);
}

#twits ul li.even {
	top:auto;
	bottom:20px;
	left:319px;
}

#twits ul li div.content {
	display:block;
	margin:0;
	padding:0;
	background:white no-repeat 0 0 url(../gfx/twit_left.gif);
}

#twits ul li div.content div {
	padding:0 10px 0 7px;
	background:no-repeat 100% 0 url(../gfx/twit_right.gif);
}

#twits ul li div.content div span {
	position:relative;
	top:5px;
	z-index:1000;
}

#twits ul li div.bottom {
	position:relative;
	height:9px;
	margin:0 0 0 10px;
	padding:18px 38px 0 0;
	color:#00688f;
	font-family: "Helvetica", "Arial", sans-serif;
	font-size:10px;
	line-height:9px;
	text-align:right;
	text-transform:uppercase;
	background:no-repeat 100% 0 url(../gfx/twit_left_bottom.gif);
}

#twits ul li div.bottom span {
	display:block;
	position:absolute;
	top:18px;
	left:0;
	color:#008bbf;
}

/*	Even	*/
#twits ul li.even {
	background:no-repeat 100% 100% url(../gfx/twit_right_bottom.gif);
}

#twits ul li.even div.bottom {
	margin:0 20px 0 0;
	padding:18px 0 0 38px;
	text-align:left;
	background:no-repeat 0 0 url(../gfx/twit_right_bottom.gif);
}

#twits ul li.even div.bottom span {
	text-align:right;
	right:0;
}


/*	Projectenlijst	*/
div#projecten {
	width:740px;
	float:left;
	margin:0 50px 0 0;
	padding:0;
}

div#projecten ul li {
	display:block;
	position:relative;
	padding-bottom:21px;
	border-bottom:1px solid #e7e4e0;
}

div#projecten ul li.First {

}

div#projecten ul li.Case,
div#projecten ul li.Vacatures	
{
	cursor:pointer;
}

div#projecten ul li span.datum {
	position:absolute;
	top:20px;
	left:0;
	display:block;
	width:100px;
	font-size:12px;
	line-height:18px;
	text-align:center;
}

div#projecten ul li span.datum strong {
	display:block;
	font-size:30px;
	line-height:30px;
	font-weight:normal;
}

div#projecten ul li h2 {
	position:absolute;
	top:21px;
	left:100px;
	margin:0;
	padding:0;
	width:220px;
	font-size:18px;
	line-height:26px;
	color:#00aeef;
}

div#projecten ul li div.excerpt {
	padding:21px 0 0 340px;
	min-height:50px;
	width:380px;
}

div#projecten ul li div.excerpt a.minicaselink
{
	color: #144E74;
}

div#projecten ul li div.excerpt a.minicaselink:hover
{
	text-decoration:none;
	background:repeat-x left bottom url(../gfx/line_dotted_darkblue.gif);
}

div#projecten ul li div.excerpt p {
	margin:0;
}

div#projecten ul li object {
	
}

div#projecten ul li a.btnToon {
	display:none;
}

div#projecten ul li div.content {
	display:none;
	padding:0 0 0 340px;
}


/*	Case | Vactures	*/
div#projecten ul li.Vacatures,
div#projecten ul li.Case,
div#projecten ul li.Case_mini
{
	height:246px;
	background:no-repeat 100px 25px url(../gfx/bg_case.gif);
}

div#projecten ul li.Case h2,
div#projecten ul li.Vacatures h2,
div#projecten ul li.Case_mini h2
{
	position:static;
	margin:0;
	padding:42px 0 0 120px;
	width:180px;
	color:white;
}

div#projecten ul li.Case div.excerpt,
div#projecten ul li.Vacatures div.excerpt,
div#projecten ul li.Case_mini div.excerpt
 {
	position:static;
	margin:0;
	padding:0 0 0 120px;
	width:180px;
	color:white;
}

div#projecten ul li.Case img.visual,
div#projecten ul li.Vacatures img.visual,
div#projecten ul li.Case_mini img.visual
{
	display:block;
	position:absolute;
	top:25px;
	left:340px;
}

div#projecten ul li.hover {
	background-color:#f2fbfe;
}

div#projecten ul li.hover.Case
{
	background-image:url(../gfx/bg_case_hover.gif);
}

/*	Verfijn	*/
#verfijn {
	float:left;
	margin:25px 0 25px 0;
	width:170px;
}

#verfijn h2 {
	margin:0 0 9px 0;
	padding:0 0 15px 0;
	height:9px;
	border-bottom: 1px solid #e7e4e0;
	font-size: 12px;
}

#verfijn li {
	display:block;
	font-family:"Helvetica", "Arial", sans-serif;
	font-size:12px;
	line-height:22px;
	text-transform:uppercase;
}



/*	Page navigation	*/
ul.pages {
	clear:both;
	margin:0 0 0 95px;
	padding:11px 0 0 0;
	height:38px;
}

ul.pages li {
	display:inline;
}

ul.pages li a {
	display:block;
	float:left;
	margin:0 3px 0 0;
	padding:0 5px;
	height:26px;
	font-family:"Helvetica", "Arial", sans-serif;
	font-size:13px;
	line-height:26px;
}

/*  Content */

div#content
{
	padding:34px 0 34px 100px;
}

div#content h2.large
{
	font-size:60px;
}

/*	Footer	*/
#footer {
	clear:both;
	text-align:left;
	color:#144e74;
	background:#00aeef;
}

#footer h2 {
	height:11px;
	font:1px/1px sans-serif;
	text-indent:-4096px;
	overflow:hidden;
}

#footer a {
	color:white;
}

#footer a.phone {
	color:#144e74;
}

#footer a:hover {
	text-decoration:none;
	background:repeat-x left bottom url(../gfx/line_dotted_white.gif);
}


#footer div.content {
	position:relative;
	width:980px;
	margin:0 auto;
	text-align:left;
	clear:both;
}

#footer #puurpxl {
	float:left;
	position:relative;
	padding:34px 0;
	width:400px;
	left: 120px;
}

#footer #puurpxl p {
	display:inline;
}

#footer #puurpxl h2 {
	background:no-repeat 0 0 url(../gfx/hd_over_puurpxl.gif);
}

#footer #contact {
	position:relative;
	float:left;
	padding:34px 0 0 0;
	width:220px;
	left: 100px;
}

#footer #contact h2 {
	background:no-repeat 0 0 url(../gfx/hd_contact.gif);
}

#footer #etc {
	position:relative;
	clear:both;
	padding:22px 0 0 340px;
	height:60px;
	font-family:"Helvetica", "Arial", sans-serif;
	font-size:11px;
	line-height:30px;
	text-transform:uppercase;
	border-top:1px solid #1ab6f1;
	background:100% 19px no-repeat url(../gfx/helemaal_puur.gif);
}

#footer #etc #linkRoute,
#footer #etc #linkKlantomgeving,
#footer #etc #copyright {
	position:absolute;
	top:33px;
	height:10px;
	font:1px/1px sans-serif;
	text-indent:-4096px;
	overflow:hidden;
}

#footer #etc #linkKlantomgeving {
	left:100px;
	width:98px;
	background:no-repeat 0 0 url(../gfx/link_klantomgeving.gif);
}

#footer #etc #linkRoute {
	left:100px;
	width:37px;
	background:no-repeat 0 0 url(../gfx/link_route.gif);
	display:none
}

#footer #etc a#linkRoute:hover,
#footer #etc a#linkKlantomgeving:hover
{
	height:13px;
}

#footer #etc #copyright {
	left:340px;
	width:122px;
	background:no-repeat 0 0 url(../gfx/txt_copyright.gif);
}



/*	Modals	*/
div.modal {
	display:none;
    position:absolute;
    left:50%;
	width:804px;
	margin-left:-400px;
	text-align:left;
    z-index:3000;
}

div.modal div.inner {
	padding:0 4px 0 0;
	background:no-repeat 100% 0 url(../gfx/modal_right.png);
}

div.modal div.content {
	background:white;
}

div.modal div.bottom {
	clear:both;
	font:1px/1px sans-serif;
	background:no-repeat 100% 0 url(../gfx/modal_bottom_right.png);
}

div.modal div.bottom div {
	font:1px/1px sans-serif;
	height:10px;
	margin:0 4px 0 0;
	background:no-repeat 0 0 url(../gfx/modal_bottom.png);
}

div.modal span.btnSluit {
	position:absolute;
	top:19px;
	right:23px;
	width:15px;
	height:15px;
	text-indent:-4096px;
	overflow:hidden;
	cursor:pointer;
	cursor:hand;
	background:no-repeat 0 0 url(../gfx/btn_sluit_modal.gif);
}

div.modal span.btnSluit.hover {
	width:86px;
	background-image: url(../gfx/btn_sluit_hover_modal.gif);
}

#modalOverlay {
	display:none;
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:100%;
	z-index:2999;
	background-color:black;
}

/*	Modal content	*/
div.modal h2 {
	font-size:18px;
	height:55px;
	padding:0 55px 0 20px;
	vertical-align:center;
	line-height:55px;
	color:#00aeef;
}

div.modal div.main {
	padding:20px 16px 20px 20px;
	color:#144e74;
	background:#00AEEF;
}

div.modal div.main div.text {
	float: left;
	width: 222px;
}

div.modal div.main div.images {
	float: left;
	width: 539px;
}

div.modal div.addition_info {
	padding: 20px;
	clear: both;
}

div.modal div.addition_info div.info {
	background: repeat-y 240px top url(../gfx/line-px.gif);
	margin-bottom: 20px;
}

div.modal div.addition_info div.info div.info_short {
	float: left;
	width: 240px;
}

div.modal div.addition_info div.info div.info_short div {
	margin-bottom: 15px;
}

div.modal div.addition_info div.info div.info_short h4 {
	font-family:sans-serif;
	font-size:1px;
	text-indent:-4096px;
	height: 8px;
	margin-bottom:3px;
}

div.modal div.addition_info div.info div.info_text {
	float: left;
	width: 499px;
	padding-left: 20px;
	margin-top: -8px;
}

div.modal div.addition_info div.info div.info_text ul.items_navigation {
	padding-bottom: 25px;
	margin-top: 7px;
	border-bottom:1px solid #E7E4E0;	
}

div.modal div.addition_info div.info div.info_text ul.items_navigation li {
	float: left;
	margin-right: 20px;
}

div.modal div.addition_info div.info div.info_text ul.items_navigation li a {
	background: transparent no-repeat scroll 0 0;
	display: block;
	height: 10px;
	font-size: 1px;
	text-indent:-4096px;
}

div.modal div.addition_info div.info div.info_text ul.items_navigation li a:hover {
	text-decoration:none;
	background:repeat-x left bottom url(../gfx/line_dotted_blue.gif);
}


div.modal div.addition_info div.info div.info_text ul.items_navigation li.active a {
	background-position: 0 -30px;
}

div.modal div.addition_info div.info div.info_text ul.items {
	clear: both;
}

div.modal div.addition_info div.info div.info_text ul.items li {
	display: none;
}

div.modal div.addition_info div.info div.info_text ul.items li h3 {
	display: none;
}

div.modal div.addition_info div.info div.info_text ul.items li p {
	margin: 0;
	margin-bottom: 10px;
	padding: 0;
	padding-top: 10px;
}

div.modal div.addition_info div.employers {
	border-top: 1px solid #e7e4e0;	
	padding: 20px 0 47px 0;
	border-bottom: 1px solid #e7e4e0;
}

div.modal div.addition_info div.employers div div.employer {
	position: relative;
	float: left;
	margin-right: 10px;
	cursor: pointer;
}

div.modal div.addition_info div.employers div div.employer div {
	position: absolute;
	display: none;
	top: 51px;
	left: 0px;
	text-transform:uppercase;
	font-size: 10px;
	font-family: "Helvetica", "Arial", sans-serif;
	color: #999999;
	white-space: nowrap;
}

div.modal div.addition_info div.employers div div.employer div span {
	color: #CCCCCC;	
	padding-left: 4px;
}


/*	Modals specifiek	*/
#casesModal {
}

#casesModal div.main div.images div.image {
	float: left;
	padding: 0 20px 0 20px;
}

#casesModal div.main div.images div.thumbnails {
	float: left;
	width: 86px;
}

#casesModal div.main div.images div.thumbnails a {
	display: block;
	margin-bottom: 18px;
	width: 86px;
	height: 64px;
}

#casesModal div.main div.images div.thumbnails a:hover {
	text-decoration: none;	
}

#casesModal div.main div.images div.thumbnails a.last {
	margin-bottom: 0px;
}

#casesModal div.main div.images div.thumbnails a div.current {
	background: no-repeat left top url(../gfx/case_thumb_selected.gif);
	position: relative;
	left: -5px;
	width: 91px;
	height: 64px;
}

#casesModal div.addition_info div.info div.info_short h4.status {
	background: transparent url(../gfx/hd_status.gif) no-repeat scroll 0 0;
}

#casesModal div.addition_info div.info div.info_short h4.partners {
	background: transparent url(../gfx/hd_partners.gif) no-repeat scroll 0 0;	
}

#casesModal div.addition_info div.info div.info_short h4.doorlooptijd {
	background: transparent url(../gfx/hd_doorlooptijd.gif) no-repeat scroll 0 0;
}

#casesModal div.addition_info div.info div.info_text ul.items_navigation li a.link_item_vraag {
	background-image: url(../gfx/hd_vraag.gif);
	width: 41px;
	padding-bottom: 5px;
}

#casesModal div.addition_info div.info div.info_text ul.items_navigation li a.link_item_oplossing {
	background-image: url(../gfx/hd_oplossing.gif);
	width: 70px;	
	padding-bottom: 15px;	
}

#casesModal div.addition_info div.info div.info_text ul.items_navigation li a.link_item_vraag:hover,
#casesModal div.addition_info div.info div.info_text ul.items_navigation li a.link_item_oplossing:hover {
	/*border-bottom: 1px solid #877866;*/
}

#casesModal div.addition_info div.info div.info_text ul.items_navigation li.active a.link_item_vraag:hover,
#casesModal div.addition_info div.info div.info_text ul.items_navigation li.active a.link_item_oplossing:hover {
	border: none;
}

#casesModal div.addition_info div.employers h4.aandezecasewerkten {
	font-family:sans-serif;
	font-size:1px;
	text-indent:-4096px;
	height: 10px;
	width: 260px;
	background: transparent url(../gfx/hd_aan_de_case_werkten.gif) no-repeat scroll 0 0;
	float: left;
}

#casesModal div.addition_info div.navigate {
	clear: both;
	padding-top: 26px;
	padding-bottom: 13px;	
}

#casesModal div.addition_info div.navigate div.previous_case {
	float: left;
}

#casesModal div.addition_info div.navigate div.previous_case a {
	background: url(../gfx/btn_vorigecase.gif);
	display: block;
	height: 13px;
	width: 96px;
	text-indent:-4096px;
}

#casesModal div.addition_info div.navigate div.next_case {
	float: right;
}

#casesModal div.addition_info div.navigate div.next_case a {
	background: url(../gfx/btn_volgendecase.gif);
	display: block;
	height: 13px;
	width: 119px;
	text-indent:-4096px;
}

#vacaturesModal div.main img {
	float:right;
}

#vacaturesModal div.addition_info div.info div.info_short h4.ervaring {
	background: transparent url(../gfx/hd_ervaring.gif) no-repeat scroll 0 0;
}

#vacaturesModal div.addition_info div.info div.info_short h4.dienstverband {
	background: transparent url(../gfx/hd_dienstverband.gif) no-repeat scroll 0 0;	
}

#vacaturesModal div.addition_info div.info div.info_short h4.jijbent {
	background: transparent url(../gfx/hd_jijbent.gif) no-repeat scroll 0 0;
}

#vacaturesModal div.addition_info div.info div.info_text ul.items_navigation li a.link_item_functieinhoud {
	background-image: url(../gfx/hd_functieinhoud.gif);
	width: 104px;	
	padding-bottom: 0px;	
}

#vacaturesModal div.addition_info div.info div.info_text ul.items_navigation li a.link_item_watvragenwij {
	background-image: url(../gfx/hd_watvragenwij.gif);
	width: 110px;	
	padding-bottom: 0px;	
}

#vacaturesModal div.addition_info div.info div.info_text ul.items_navigation li a.link_item_watbiedenwij {
	background-image: url(../gfx/hd_watbiedenwij.gif);
	width: 106px;	
	padding-bottom: 0px;	
}

#puurpxlModal {
	
}

#puurpxlModal div.main img {
	float:right;
}

#puurpxlModal div.addition_info div.info div.info_short h4.opgericht {
	background: transparent url(../gfx/hd_opgericht.gif) no-repeat scroll 0 0;
}

#puurpxlModal div.addition_info div.info div.info_short h4.twitter {
	background: transparent url(../gfx/hd_twitter.gif) no-repeat scroll 0 0;	
}

#puurpxlModal div.addition_info div.info div.info_short h4.werkengraagsamenmet {
	background: transparent url(../gfx/hd_wewerkengraagsamenmet.gif) no-repeat scroll 0 0;
}

#puurpxlModal div.addition_info div.info div.info_text ul.items_navigation li a.link_item_wiezijnwij {
	background-image: url(../gfx/hd_wiezijnwij.gif);
	width: 84px;
}

#puurpxlModal div.addition_info div.info div.info_text ul.items_navigation li a.link_item_hoewerkenwij {
	background-image: url(../gfx/hd_hoewerkenwij.gif);
	width: 112px;	
}

div.addition_info div.employers h4.wiewerkenerbijpuurpxl {
	font-family:sans-serif;
	font-size:1px;
	text-indent:-4096px;
	height: 10px;
	width: 260px;
	background: transparent url(../gfx/hd_wiewerkenerbijpuurpxl.gif) no-repeat scroll 0 0;
	float: left;
}

#routeModal div.main input {
	background: #008bbf;
	color: white;
	text-transform: uppercase;
	width: 203px;
	*width: 221px;
	font-size: 12px;
	display: block;
	border: none;
	padding: 9px;
	font-family:"Helvetica", "Arial", sans-serif;
	margin-bottom: 20px;
}

#routeModal div.main input.submit_btn {
	background: white;
	color: #00aeef;
	width: 106px;
	float: right;
	padding: 6px 9px;
	cursor: pointer;
	
}

#routeModal div.main div.gmap {
	float: left;
	width: 519px;
	height:300px;
	margin-left:20px;
}

/* Paginering */

div.wp-pagenavi {
	margin: 20px 0 20px 103px;
	font-family: "Arial", sans-serif;
	font-size: 12px;
}

div.wp-pagenavi a:hover {
	text-decoration: none;
}

div.wp-pagenavi a,
div.wp-pagenavi span {
	margin-right: 5px;
}

/*	Hacks	*/

.clearfix:after,
#twits ul:after {
     visibility: hidden;
     display: block;
     font-size: 0;
     content: " ";
     clear: both;
     height: 0;
}

.clearfix,
#twits ul {
	display:inline-block;
}

/* start commented backslash hack \*/
* html .clearfix,
* html #twits ul { height: 1%; }
.clearfix,
#twits ul { display: block; }
/* close commented backslash hack */