/** ----------------------------
 * Version: 1.3
 * 24 october 2008
 * Author: Sjors Rijsdam
 * Co-author: Maarten van Oudenniel
 * -----------------------------**/


/* twee koloms site momenteel nog home als uitzondering op stramien (krijgt nog redesign). */

body { background: #f1f1f1 !important; color: #666;font: 11px Verdana, Geneva, Arial, Helvetica, sans-serif;margin: 0;padding: 0; }

body #content { clear: left; background: #fff !important; border-left: 1px solid #BBBBBB; border-right: 1px solid #BBBBBB; }
body.home #content { clear: left; background: #fff; }

#header, #navigation, #content, #footer {	width: 900px;	position: relative; margin: 0 auto; padding: 0;}



ul, li,
h1, h2, h3, h4, h5, h6,
dl, dt, dd,
form, fieldset { margin: 0; padding: 0; }





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

CONTAINER HEADER 

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


#header {height: 98px;overflow: visible;text-align: right; border: 1px solid #c1000b; border-top: none; }
#header h1, #header h1 a {position: relative;display: block;width: 137px;height: 75px;}
#header h1 {position: absolute;z-index: 100;left: 16px;top: 11px;}
#header h1 a {text-align: left;overflow: hidden;text-indent: -9999em;background: transparent url(/img/boomerang-logo.png) top left no-repeat;}
#header.create h1 a { background-image: url(/img/boomerang-logo-create.png)}
#header h1.nologo {display:none} 
#header #clickcatcher {position: absolute;z-index: 50;left: 0;top: 0;width: 900px;height: 98px;	cursor: pointer;}
#header #boomerang-radio {display: none;}


/*
==============
   NAVIGATION: 
   1 sprite, trying all main content layout images in this one sprite, recalculation position when sprite changes
==============
*/

#navigation { background: transparent url(/img/redesign/nav-bg.png) repeat-x; height: 29px; border: 1px solid #c1000b; border-top: none; }
   #navigation li { height: 29px; list-style: none; border-right: 1px solid #FF7F8A; }
   #navigation li { float: left; }
      #navigation li a { height: 15px; line-height: 15px; padding: 5px 10px; margin: 2px 3px 0 3px; color: #fff; font-weight: bold; text-decoration: none; background: transparent !important; display: inline-block; *display: inline; zoom: 1; }
      #navigation li a:hover,
      #navigation li a.active { background: #c2020c !important; -moz-border-radius: 3px; border-radius: 3px; -webkit-border-radius: 3px; }
   #navigation li.nav-login { float: right; margin: 0 5px 0 0; padding: 0; border: none; }
      #navigation li.nav-login a { width: 70px; *margin-top: 3px; text-align: center; }


   #navigation li.userbar { float: right; width: 341px; border: none; border-left: 1px solid #FF7F8A; vertical-align: middle; color: #fff; padding: 0 12px 10px 12px; }
      #navigation li.userbar .microavatar { width: 23px; height: 23px; line-height: 21px; overflow: hidden; border: 1px solid #666; vertical-align: middle; display: inline-block; *display: inline; zoom: 1; float: left; margin: 3px 12px 0 0; background: #fff; text-align: center; }
        #navigation li.userbar .microavatar img { vertical-align: middle; max-width: 23px; max-height: 23px; }
      #navigation li.userbar a { padding: 0; margin: 0; font-weight: normal; text-decoration: underline; }
      #navigation li.userbar a:hover { text-decoration: none; background: transparent !important; }
         #navigation li.userbar strong a { font-weight: bold; }

/* 
===============
Site navigation
===============
*/
#site-navigation { width: 300px; margin: 0; list-style: none; position: absolute; bottom: -1px; right: 10px; z-index: 100; }
   #site-navigation li { display: inline-block; *display: inline; zoom: 1; margin: 0 4px 0 0; }
      #site-navigation li a { display: block; padding: 8px 22px; border: 1px solid #333; border-bottom-color: #C1000B; background: #eee; color: #333; font-size: 14px; text-decoration: none; font-weight: bold; cursor: pointer; -moz-border-radius-topleft: 5px; -moz-border-radius-topright: 5px; -webkit-border-top-left-radius: 5px; -webkit-border-top-right-radius: 5px; }
      #site-navigation li.active a { background: #FF4350; border-color: #c1000b; border-bottom-color: #FF4350; color: #fff; }




/* 
TODO: we hebben momenteel niet 1 stramien voor tweekoloms verdeling
ze uitzonderingen zijn: cms content, versturen realcard en home
 */

#left-col { width: 490px; float: left; padding: 45px 0 10px 10px; }
#left-col.fullwidth {width: auto;  float: none; padding-right: 10px}
#right-col { width: 348px;	float: right;	padding: 10px 12px 0 0; overflow: hidden; }

body.home #left-col { width: 512px; float: left; padding: 10px 9px 10px 10px; }
body.home #right-col { width: 348px; float: left; padding: 10px;}

body.realcards #left-col { width: 512px; float: left; padding: 10px 0 10px 12px; }
body.realcards #right-col { width: 348px; float: left; padding: 10px;}

body.artikel #left-col { width: 512px; float: left; padding: 10px 0 10px 12px; }
body.artikel #right-col { width: 348px; float: left; padding: 10px;}

body.opdracht #left-col { padding: 0; }





/* 
CONTENTBLOKKEN RECHTS KRIJGEN ALLEMAAL 15px afstand tot elkaar 
*/

#favorieten,
#mijn-werken,
#quicksearch,
#searchfilter,
#sub_kaarten,
#populair-tags { margin: 0 0 15px 0; }





/*
==============
   CONTENT: 
   main layout content settings (a, h1, form)
==============
*/


h1, h2, h3, h4, h3 a { color: #E1001A; font-family: 'Trebuchet MS',Verdana,Sans-Serif; margin: 0 0 4px 0; font-size: 16px; padding: 0;  }

h1 span, h2 span, h3 span { background-color: #fff; }
body.home h1 span, body.home h2 span, body.home h3 span { margin:0 0 0 1px;padding:0; }
body.artikel h2 { padding: 22px 0 0 0; } /* CMS CONTENT OP HOME TONEN MAAR WEL AFSTAND TOT BOVEN */

h1 span { display: none; }
h2 { text-transform: uppercase; }







.hide {display: block;width: 0;height: 0;overflow: hidden;}

.contentblock-top, .contentblock-middle, .contentblock-bottom,
.contentblock-top-diapos, .contentblock-middle-diapos, .contentblock-bottom-diapos {position: relative;}

wbr:after {
	content: "\00200B";}


/* 
we werken met absolute fontgrootte, goede browsers kunnen sites in geheel vergroten, 
of lettertype vergroten. Alleen IE heeft er geen baat bij. Echter het eerst in procenten
en dan opschalen heeft als lastig bijeffect dat de grootte nergens exact gelijk is en bovendien afhankelijk is van
lokale instellingen gebruiker (bv standaardlettertype is 14 ipv 12). Standaard staat in body, td etc is voor IE
*/

td, th, dt, dd, input, textarea, select, label { font-size: 11px; }





/* TODO: uitzoeken waarom deze aanpak */

.textinput {
	float: left;
	background: transparent url(/img/text-input-gradient.gif) top left repeat-x;}

.textinput .textinput-wrapper {
	display: block;
	background: transparent url(/img/text-input-top-left.gif) top left no-repeat;}

.textinput .textinput-wrapper .textinput-wrapper {
	background: transparent url(/img/text-input-top-right.gif) top right no-repeat;}

.textinput .textinput-wrapper .textinput-wrapper .textinput-wrapper {
	background: transparent url(/img/text-input-bottom-right.gif) bottom right no-repeat;}

.textinput .textinput-wrapper .textinput-wrapper .textinput-wrapper .textinput-wrapper {
	background: transparent url(/img/text-input-bottom-left.gif) bottom left no-repeat; 
	text-align: left;
	}



/* TODO: gebruiken we dit nog? vier div's gebruiken voor cornering... */


.textinput input.text {
	background: transparent;
	border: 0;
	color: #999;
	margin: 3px;}

.textarea {
	float: left;
	background: #F8F8F8 url(/img/textarea-top-left-bg.gif) top left no-repeat;}

.textarea .textarea {
	float: none;
	margin: 0 !important;
	background: transparent url(/img/textarea-top-right-bg.gif) top right no-repeat;}

.textarea .textarea .textarea {
	background: transparent url(/img/textarea-bottom-right-bg.gif) bottom right no-repeat;}

.textarea .textarea .textarea .textarea {
	background: transparent url(/img/textarea-bottom-left-bg.gif) bottom left no-repeat;}

.textarea .textarea .textarea .textarea textarea {
	border:0;
	background-color: transparent;}





/* POSITION STUFF DEADCENTER IN A CONTAINER */
/* code shamelessly ripped from http://www.jakpsatweb.cz/css/css-vertical-center-solution.html */
.size500 {
	width: 400px;
	height: 500px;
	line-height: 500px;
}

.size400 {
	width: 400px;
	height: 400px;
	line-height: 400px;}

.size244 {
	width: 244px;
	height: 244px;
	line-height: 244px;}

.size150 {
	width: 150px;
	height: 150px;
	line-height: 150px;}

.size100 {
	width: 100px;
	height: 100px;
	line-height: 100px;}

.size70 {
	width: 70px;
	height: 70px;
	line-height: 70px;}

.size65 {
	width: 65px;
	height: 65px;
	line-height: 65px;}

.deadcenter {
	display: block;
	text-align: center;
	overflow: hidden;}

.deadcenter-wrapper {
	overflow: visible;}

.deadcenter-wrapper a img,
.deadcenter-wrapper span img {
	border: 0;
	margin: -3px 0 0 0 !important;
	vertical-align:middle;}

.deadcenter-wrapper span span,
.deadcenter-wrapper span span img {
	line-height: 1em;
	vertical-align: top;
	top: -14px;}
	
.deadcenter-wrapper span span#audioplayer {
	position: relative;}



blockquote { font-style: italic;}
a img { border: 0;}



p a:link, p a:visited,
li a:link, li a:visited,
dd a:link, dd a:visited,
th a:link, th a:visited
td a:link, td a:visited { color: #666; text-decoration: underline;}

p a:link:hover, p a:visited:hover,
li a:link:hover, li a:visited:hover,
dd a:link:hover, dd a:visited:hover,
th a:link:hover, th a:visited:hover,
td a:link:hover, td a:visited:hover { text-decoration: none;}



/* 

LET OP: buttons als graphic sprite gaan we uitfaseren, daarvoor in de plaats sliding doors 

*/

a.btn-link {
	height: 21px;
	display: block;
	text-indent: -9999em;
	overflow: hidden;
	background-image: url(/img/button-sprites.gif);}

a.btn-link:focus {
	margin: 1px;}

button {
	text-indent: -9999em;
	overflow: hidden;
	height: 21px;
	cursor: pointer;
	display: block;
	border: 0;
	background: transparent url(/img/button-sprites.gif);}




p#pagination {text-align: center;clear: both; background: transparent url(/img/brands/boomerang/left-col-dotted-line-red.gif) repeat-x 0 0; margin: 15px 0 0 0; padding: 15px 0 0 0; }
p#pagination a { text-decoration: none; }
p#pagination strong { color: #E1001A; }













/* CONTENT */
#content { background-color: #F5F5F5; }

.contentblock-middle, .tabblock,
.contentblock-middle-diapos .tabblock {
	margin-bottom: 10px;}

.contentblock-middle p,
.contentblock-middle blockquote,
.contentblock-middle label,
.contentblock-middle img,
.contentblock-middle table,
.contentblock-middle h3,
.contentblock-middle h4,
.contentblock-middle h5,
.contentblock-middle h6,
.contentblock-middle-diapos p,
.contentblock-middle-diapos blockquote,
.contentblock-middle-diapos label,
.contentblock-middle-diapos img,
.contentblock-middle-diapos table,
.contentblock-middle-diapos h3,
.contentblock-middle-diapos h4,
.contentblock-middle-diapos h5,
.contentblock-middle-diapos h6 {
	margin: 0 6px 1em 6px;}

.contentblock-middle h3,
.contentblock-middle-diapos h3 {
	color: #333;
	margin-bottom: 0.5em;
}

.contentblock-middle ol,
.contentblock-middle ul,
.contentblock-middle-diapos ol,
.contentblock-middle-diapos ul {
	margin: 0 21px 1em 21px;}

.contentblock-middle p img,
.contentblock-middle p ol,
.contentblock-middle p ul,
.contentblock-middle p table,
.contentblock-middle p label,
.contentblock-middle p input,
.contentblock-middle p select,
.contentblock-middle-diapos p img,
.contentblock-middle-diapos p ol,
.contentblock-middle-diapos p ul,
.contentblock-middle-diapos p table,
.contentblock-middle-diapos p label,
.contentblock-middle-diapos p input,
.contentblock-middle-diapos p select,
.tabblock p label,
.tabblock p input,
.tabblock p select {
	margin: 0;
	font-size: 1em;}

.contentblock-middle ul ul {
	font-size: 1em;}

.contentblock-middle p textarea,
.contentblock-middle p code,
.contentblock-middle-diapos p textarea,
.contentblock-middle-diapos p code,
.tabblock p textarea {
	margin: 0;
	font-size: 1.1em;}

.contentblock-middle p code textarea,
.contentblock-middle-diapos p code textarea {
	font-size: 1em;}

/* TODO ONJUIST SETTING VOOR ALGEMEEN
.contentblock-bottom, .contentblock-bottom-diapos {padding: 6px 0;}
*/

#content h2 {
	font-size: 18px;
	line-height: 1em;
}




/* ALLEEN HOME HEEFT BLOKOPBOUW!! */

/*
body.home #left-col .contentblock-middle { background: transparent url(/img/contentblock-large-bg-middle.gif) top left repeat-y;}
body.home #left-col .contentblock-top {background: transparent url(/img/contentblock-large-bg-top.gif) top left no-repeat;}
body.home #left-col .contentblock-bottom { background: transparent url(/img/contentblock-large-bg-bottom.gif) bottom left no-repeat;}
*/




/* ALLEEN HOME HEEFT BLOKOPBOUW!! */
/*
body.home #right-col .contentblock-middle {background: transparent url(/img/contentblock-small-bg-middle.gif) top left repeat-y;}
body.home #right-col .contentblock-top {background: transparent url(/img/contentblock-small-bg-top.gif) top left no-repeat;}
body.home #right-col .contentblock-bottom {background: transparent url(/img/contentblock-small-bg-bottom.gif) bottom left no-repeat;}
*/




#left-col h2 { }


/* TABBLOCK */

#left-col #boomerang-selections.tabblock { overflow: hidden; background: #E1001A url(/img/brands/boomerang/tabblock-bottom-bg.gif) no-repeat left bottom;}
#left-col #boomerang-selections.tabblock .tabs {	background:#F5F5F5 url(/img/brands/boomerang/tabblock-border.gif) repeat-x scroll left bottom;}

/*
#left-col #boomerang-selections.tabblock .content {
	background:#E1001A url(/img/brands/boomerang/tabblock-bottom-bg.gif) no-repeat scroll left bottom;}
*/

#left-col .tabblock .tabs {
	position: relative;
	height: 27px;
	width: 100%;
	overflow: hidden;
	list-style: none;
	background-color: #FFF;
	margin: 0;}

#left-col .tabblock .slidebox {
	float: left;
	position: relative;
	overflow: hidden;
	width: 468px;}

#left-col .tabblock .slidecontrols {
	float: left;
	padding-left: 11px;
	padding-top: 5px;
	height: 22px;
	background: #F5F5F5 url(/img/tab-scroller.gif) top right no-repeat;
	width: 33px;}

#left-col .tabblock .slidecontrols img {
	cursor: pointer;}

#left-col .tabblock .slidebox .tabs {
	width: 10000px;}

#left-col .tabblock .tabs li {
	float: left;
	height: 27px;
	overflow: hidden;
	cursor: pointer;
	margin-right: 6px;
}

#left-col .tabblock .tabs li.haslink {
	text-indent: 0;
	overflow: inherit;
	cursor: auto;
	background: none}

#left-col .tabblock .tabs li.haslink a:link, #left-col .tabblock .tabs li.haslink a:visited {
	display: block;
	height: 27px;
	text-indent: -9999em;
	overflow: hidden;}

#left-col .tabblock .tabs li.active {
	cursor: auto;}

#left-col .tabblock .content { position: relative;float: none;clear: both;padding-bottom: 10px;}

#left-col .tabblock .hide {
	display: none;}

#left-col .tabblock .content .thumb, #left-col .tabblock .content .bigthumb {
	float: left;
	margin: 5px 0 5px 14px;}

/* BLOG POST */
#left-col .blogpost {
	margin: 5px 6px;
	font-family: Helvetica, Arial, sans-serif;}

.blogpost-wrapper { padding: 0 4px; }

#left-col #bmr-blog .blogpost-wrapper {
	padding-right: 35px;}

#left-col .blogpost .details {
	text-transform: lowercase;
	margin-bottom: 4px;
	font-size: 10px;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;}

#left-col .blogpost .details a:link,
#left-col .blogpost .details a:visited,
#left-col .blogpost .details a:hover {
	font-weight: normal;
	text-decoration: none;}

#left-col .blogpost .details a:hover {
	text-decoration: none;}

#left-col .blogpost .category {
	text-transform: uppercase;
	margin-bottom: 0;
	font-weight: bold;}

#left-col .blogpost h3 {
	font-size: 1.8em;
	line-height: 0.95em;
	letter-spacing: -1px;
	margin-bottom: 0.35em}

#left-col .blogpost .post-picture {
	float: left;
	margin-right: 12px;}

#left-col .blogpost .social-media {
	padding-bottom: 10px;}

#left-col .blogpost .social-media a {
	margin-right: 10px;}

#left-col .blogpost .social-media img {
	vertical-align: middle;
	border: 0;}

#left-col #bmr-blog div.blog-archive-link {
	padding-top: 5px;
	margin-top: 10px;}

#left-col #boomerang_selections h2 {
	margin-bottom: 10px;}

#left-col #boomerang_selections ul.titles {
	float: left;
	width: 160px;
	list-style: none;
	margin: 0;}

#left-col #boomerang_selections ul.titles a:link,
#left-col #boomerang_selections ul.titles a:visited {
	color: #E1001A;
	text-transform: uppercase;
	font: 14px "Trebuchet MS";
	line-height: 28px;
	text-decoration: underline;
	font-weight: bold;}

#left-col #boomerang_selections ul.titles a:link:hover,
#left-col #boomerang_selections ul.titles a:visited:hover {
	text-decoration: none;}

#left-col #boomerang_selections ul.titles li.active a {
	background: #FFF url(img/active-collection.gif) left center no-repeat;
	padding-left: 33px;}

#left-col #boomerang_selections #collection {
	float: left;
	margin-top: 6px;
	width: 345px;
	position: relative;}

#left-col #boomerang_selections #collection .deadcenter {
	margin: 0 0 15px 15px;
	display: inline;}

#left-col #boomerang_selections a.btn-meer-kaarten {
	float: left !important;
	position: relative;
	left: 231px;
	margin: 1px;
	margin-top: 10px;}




#right-col #blog-box .slideritem h3 {
	margin-bottom: 20px;}

#right-col #blog-box .slideritem img {
	margin-right: 10px;
	float: left;}

#right-col #blog-box .slideritem h3 a:link, #right-col #blog-box .slideritem h3 a:visited {
	color: #333;
	text-decoration: none;}

#right-col #blog-box .slideritem h3 a:link:hover, #right-col #blog-box .slideritem h3 a:visited:hover {
	text-decoration: underline;}


/* SEARCH RESULTS */
#left-col #search-results #meta-info,
#maincontent.opdracht #meta-info { float: left; margin: 0; }

#left-col #search-results form,
#maincontent.opdracht div.clear form {
	position: relative;
	float: right;
	right: 6px;}



#left-col #search-results .result-item {
	margin-top: 20px;
	clear: both}

#left-col #search-results .result-item .details { float: left;width: 335px;}
#left-col #search-results .result-item .profiledetails { float: left;width: 355px;}
#left-col #search-results .result-item .profiledetails .icon span { float: left}
#left-col #search-results .result-item .profiledetails ul.pro { background: #fff url(img/sprite.gif) no-repeat -466px -102px; }

#left-col #search-results .result-item .details ul {
	margin-left: 15px;}

#left-col #search-results .result-item .deadcenter {
	margin: 0 20px 0 0;}

#left-col #search-results .result-item h3 {
	margin-left: 0;
	margin-bottom: 0;}

#left-col #search-results .result-item p,
#left-col #search-results .result-item ul {
	margin-left: 0;}

#left-col #search-results .result-item h3 a:link, #left-col #search-results .result-item h3 a:visited { color: #E1001A;	text-decoration: none; font-size: 16px; }





/* EXPRESSION */
div#expression h2 {
	/* margin-top: 10px; TODO: als eerste h2 is dit niet gewenst omdat boven teveel ruimte vraagt; uitzoeken waar wel gewenst */
	line-height: 1.5em;}

div#expression h2, div#expression-canvas {margin: 0 0 8px 0;}

body div#left-col div.content div#expression-canvas {
	overflow: visible;
}

div#expression h3 {
	font-size: 1.25em !important;
	line-height: 1em !important;
	margin: 0 7px;
	padding-top: 5px;
	padding-left: 2px;}

div#expression p {
	/* margin-left: 10px; */
	margin-bottom: 1em;
	line-height: 1.3em; /* TODO: stond op 2 uitzoeken why (is voor verzenden ecard) */
	/* width: 400px; */
	/*overflow: auto;*/
}

div#expression p#buttons {margin: 0 0 15px 0;}

div#expression p a.btn-link {
	float: left;
	margin-left: 7px;}

div#expression p.related_work {
	width: auto;
	margin: 0;}

div#expression p.related_work a {
	margin-left: 10px;}

div#expression p#options {position: absolute;margin: 0;width: 60px;left: 413px;top: 49px;}

div#expression p#options a {
	display: block;
	width: 12px;
	height: 12px;
	overflow: hidden;
	text-indent: -9999em;
	float: left;
	margin: 0 4px 0 0;}



#left-col #workform #title, #left-col #workform #description, #left-col #workform #contentarea,
#left-col #workform #copyright, #left-col #workform #tags {
	width: 470px;}

#left-col .tabblock #workform #title, #left-col .tabblock #workform #description,
#left-col .tabblock #workform #contentarea,
#left-col .tabblock #workform #copyright, #left-col .tabblock #workform #tags {
	width: 485px;}

#left-col .tabblock #workform p, #left-col .tabblock #forward_form p {
	width: 500px;}

#left-col #next-btn {
	width: 89px;
	background-position: -897px 0;}

#left-col #next-btn:hover, #left-col #next-btn.mouseover {
	background-position: -897px -21px;}

#left-col #save-btn {
	width: 80px;
	background-position: -986px 0;}

#left-col #save-btn:hover, #left-col #save-btn.mouseover {
	background-position: -986px -21px;}

#left-col #send-btn {
	width: 97px;
	background-position: -1066px 0;}

#left-col #send-btn:hover, #left-col #send-btn.mouseover {
	background-position: -1066px -21px;}

#left-col #expression #save-btn {
	float: right;}

#left-col #expression #delete-expression-btn {
	float: right;}

#left-col #meer-van-deze-maker p {
	color: #FFF;
	text-align: right;
	margin-right: 6px;}

#left-col #meer-van-deze-maker p a:link,
#left-col #meer-van-deze-maker p a:visited {
	color: #FFF;
	text-decoration: underline;}

#left-col #meer-van-deze-maker p a:link:hover,
#left-col #meer-van-deze-maker p a:visited:hover {
	text-decoration: none;}

#left-col #ecardform-wrapper,
#left-col #ecard-wrapper {position: absolute;left: 0px;z-index: 90;width: 400px;height:500px;overflow: hidden;background-color: #fff;}

#left-col #ecard-wrapper {left: 0;}

#left-col #ecardform, #left-col #ecard, #left-col #enveloppe {
	position: absolute;
	overflow: hidden;
	width: 401px;
	left: 0;
	height: 450px;}

#left-col #ecard {
	width: 398px;
	height: 398px;
	border: 1px solid #000}

#left-col #ecardform, #left-col #ecard {
	background: #FFF url(/img/ecardform-bg.jpg) top left no-repeat;}

#left-col #enveloppe {
	background: #FFF url(/img/envelop.jpg) top left no-repeat;
	z-index: 100;}


#left-col #enveloppe .btn-link {
	background-image: url(/img/button-sprites.gif) !important;}

#left-col #enveloppe #view-ecard-btn {
	background-position: -2572px 0;
	top: 231px;
	left: 143px;
	position: absolute;
	width: 116px;}

#left-col #enveloppe #view-ecard-btn:hover {
	background-position: -2572px -21px;}

#left-col #enveloppe #send-another-ecard-btn {
	background-position: -2688px 0;
	top: 271px;
	left: 100px;
	position: absolute;
	width: 201px;}

#left-col #enveloppe #send-another-ecard-btn:hover {
	background-position: -2688px -21px;}

#left-col #ecardform-wrapper .deadcenter-wrapper,
#left-col #ecard-wrapper .deadcenter-wrapper {
	position: relative;
	z-index: 50;}


#left-col #turn-card {

	position: absolute;
	display: block;
	cursor: pointer;
	z-index: 100;
	top: 6px;
	left: 6px;
	margin: 0;
}

#left-col #expression #ecardform p {
	top: 0;
	left: 209px;
	margin: 0;
	text-align: left;
	width: 190px;
	overflow: visible;
	color: #000;
	position: absolute;}

#left-col #expression #ecardform p input {
	width: 171px;}

#left-col #expression #ecardform p.body {
	top: 50px;
	left: 10px;}

#left-col #ecardform .body textarea {
	width: 173px;
	height: 310px;}

#left-col #expression #ecardform p.from_name {
	top: 102px;}

#left-col #expression #ecardform p.from_email {
	height: 8em;
	top: 141px;}

#left-col #expression #ecardform p.to_name {
	top: 218px;}

#left-col #expression #ecardform p.to_email {
	top: 257px;}

#left-col #expression #ecardform p.captcha {
	top: 307px;}

#left-col #expression #ecardform p.button {
	top: 430px;}

#left-col #expression #ecardform button#send-btn {
	background: transparent url(/img/button-sprites.gif) -1066px 0 no-repeat;}

#left-col #expression #ecardform button#send-btn:hover,
#left-col #expression #ecardform button#send-btn.mouseover {
	background-position: -1066px -21px;}

#left-col #stamp {
	position: absolute;
	right: 4px;
	z-index: 50;
	top: 14px;}

#left-col #stamp img,
#left-col #ecard-image img {
	cursor: pointer;}

#left-col #expression #ecardform input.checkbox {
	display: inline;
	vertical-align: middle;
	margin-right: 3px;
	width: auto;}

#left-col #ecard #message,
#left-col #ecard #from_name,
#left-col #ecard #to_name {
	position: absolute;
	color: #000;
	width: 175px;
	line-height: 1.5em;
	text-align: left;}

#left-col #ecard #message {
	top: 50px;
	overflow: auto;
	line-height: 1em;
	left: 10px;
	height: 340px;}

#left-col #ecard #from_name {
	left: 210px;
	border-bottom: 1px solid #000; 
	top: 150px;}

#left-col #ecard #to_name {
	left: 210px;
	border-bottom: 1px solid #000;
	top: 210px;}

#left-col #copyright {
	margin-bottom: 0}


#extdata { /* the iframe on the realcard page */
	z-index: 1000;
	width: 500px;
	height: 460px;
	border: 0;
}

#uploadnotice {
	position: absolute;
	left: 50%;
	margin-left: -320px;
	z-index: 90;
	border: 1px solid #333;
	padding: 10px;
	width: 280px;
	text-align: center;
	top: 200px;
	background-color: #CCC}

#uploadnotice.hide {
	display: none;}




#right-col h2 { 
   border-bottom:3px solid #AAAAAA;
   color:#333;
   font-size:14px;
   padding-bottom:2px;
   font-family: 'Trebuchet MS',Verdana,Sans-Serif; overflow: hidden;
}

ul#achievements {
	list-style: none;
	position: absolute;
	margin: 0;
	left: 410px;
	top: 97px;
	width: 63px;
}

ul#achievements li { background: transparent url(img/achievements.gif) no-repeat 0 0; width: 53px; height: 53px; margin-bottom: 5px; text-indent: -99999px; }
ul#achievements li.bronze-4 { background-position: 0 0; }
ul#achievements li.silver-3 { background-position: -53px 0; }
ul#achievements li.gold-4 { background-position: -106px 0; }
ul#achievements li.bronze-3 { background-position: -159px 0; }
ul#achievements li.silver-2 { background-position: -212px 0; }
ul#achievements li.gold-3 { background-position: -265px 0; }
ul#achievements li.gold-2 { background-position: -318px 0; }
ul#achievements li.silver-1 { background-position: -371px 0; }
ul#achievements li.bronze-1 { background-position: -424px 0; }
ul#achievements li.gold-1 { background-position: -477px 0; }
ul#achievements li.bronze-2 { background-position: -530px 0; }



/* COMMENTS */
#comments { clear: both; padding-top: 15px; }

#comments .comment {
	margin: 0 6px 5px 0;}

#comments .comment .date {
	text-align: right;
	font-size: 10px;
	padding: 4px 10px 4px 0}

#comments .comment a:link, #comments .comment a:visited, #comments .comment span {
	/* font-size: 0.6875em; */
	margin: 2px 6px;
	font-weight: bold;
	text-decoration: none}

#comments .comment span.profile {
	/* font-size: 0.6875em; */ }

#comments .comment span.profile a:link, #comments .comment span.profile a:visited {
	font-size: 1em;
	margin: 0;}

#comments .comment p {
	/* font-size: 0.6875em; */ }

#comments .comment p a {
	margin: 0;}

#comments form {
	padding-top: 10px;
	margin-top: 30px;
	background: transparent url(/img/dotted-line-grey.gif) top left no-repeat;}

#comments form {
	width: 480px;}

#comments textarea {
	width: 455px;
	padding: 5px;
	height: 50px;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	color: #666}
	
#comments .textarea {
	margin: 0 6px;}

#comments #place-comment-btn {
	width: 125px;
	clear: both;
	margin: 0 6px 6px 345px;
	background-position: -772px 0;
	position: relative;
	top: 6px;}

#comments #place-comment-btn:hover, #comments #place-comment-btn.mouseover {
	background-position: -772px -21px;}










/* LOGIN FORM */


#loginform.member {
   display: none;
   position: absolute;
   background: #c2020c !important;
   z-index: 500;
   color: #fff;
   padding: 10px;
   width: 210px;
   -moz-border-radius: 4px;
   -webkit-border-radius: 4px;
}
#loginform a:hover { text-decoration: underline; }

#loginform #login-btn { width: 82px; height: 23px; overflow: hidden; text-indent: -9999px; background: transparent url(/img/redesign/button-login.png) no-repeat; }

#loginform .textInput { border: 1px solid #666; padding: 3px; display: block; margin: 0 0 4px 0; width: 190px; }
#loginform button {}
#loginform .links { display: block; margin: 12px 0 12px 0; }

#loginform p { margin: 0; padding: 0; }
#loginform a, #loggedin a { color: #fff; text-decoration: none; font-weight: normal; font-size: 11px; }


p#login-save-links .ieCheckbox { margin: 0 3px 0 -2px; padding: 0; }
p#login-save-links label { font-size: 11px; }

p#login-save-links span.error {
	text-align: left;}

#loginform ul.error {
	width: 225px;
	color: #fff;}

#login-spinner { 
   background: transparent url(/img/redesign/spinner-login.gif) no-repeat center center;
   display: none;
   margin: 20px;
   height: 32px;
   width: auto;
   text-align: center;
}













/* THE QUICKSEARCH */

#quicksearch p {
	overflow: auto;
	margin-bottom: 0;}

#quicksearch .textinput {
	width: 275px;}

#quicksearch button {
	margin: 0px 5px 0 0;
}




/* POPULAIR TAGS*/
#populair-tags p {
	font-family: Helvetica, Arial, sans-serif;
	word-spacing: 4px;
	margin-bottom: 0}

#populair-tags p a:link, #populair-tags p a:visited {
	text-decoration: none;
	font-weight: normal;}

#populair-tags p a:link:hover, #populair-tags p a:visited:hover {
	text-decoration: underline;}

#populair-tags a.rank_1_tag {
	font-size: 1em;}

#populair-tags a.rank_2_tag {
	font-size: 1.272em;}

#populair-tags a.rank_3_tag {
	font-size: 1.454em;}

#populair-tags a.rank_4_tag {
	font-size: 2.181em;}

#populair-tags a.rank_5_tag {
	font-size: 2.727em;}



/* ADVERTORIALS */
#advertorial1, #advertorial2, #advertorial3 {
	text-align: center;}

.advertorial a {
	display: block;
	margin: 6px;}

.advertorial a img {
	margin: 0;}

.advertorial a:focus img {
	margin: 0;}

#right-col .advertorial iframe {width: 336px;height: 285px;border: 0;} /* DART krijgt 250 hoog of 280 hoog dus onnodig deze 330 hoog */
#right-col .advertorial {margin-bottom: 20px;}

.advertisement { text-align: center; }


/* SLIDER */
.sliderbox {
	margin: 5px 1px 0 1px;
	overflow: hidden !important;
	position: relative;}

#right-col .sliderbox, #right-col .sliderbox .slider .slideritem {
	width: 346px;}

.sliderbox .slider {
	position: relative;
	width: 10000px;
	top: 0;
	left: 0;
	overflow: auto;}

.sliderbox .slider .slideritem {
	float: left;
	position: relative;}

.slidercontrols {
	clear: both;
	overflow: auto;
	margin: 0.5em 4px 0 4px !important;
	padding-top: 0.5em;
	background: transparent url(/img/dotted-line-grey.gif) top left no-repeat;}

.contentblock-middle .slideritem p,
.contentblock-middle .slideritem img,
.contentblock-middle .slideritem ol,
.contentblock-middle .slideritem ul,
.contentblock-middle .slideritem table,
.contentblock-middle .slideritem h3,
.contentblock-middle .slideritem h4,
.contentblock-middle .slideritem h5,
.contentblock-middle .slideritem h6 {
	margin: 0 4px;
	color: #333}

.contentblock-middle .slideritem h3 {
	margin: 0.15em 4px;}

.slidercontrols a#doe-mee-btn:link, .slidercontrols a#doe-mee-btn:visited {
	background-position: -145px 0;
	float: right;
	width: 88px}

.slidercontrols a#doe-mee-btn:link:hover, .slidercontrols a#doe-mee-btn:visited:hover {
	background-position: -145px -21px;}

.slideritem .pitchlink {
	display: none;}







/* FILTER SEARCH */
#right-col #searchfilter ul, #left-col #type-group ul {
	list-style: none;
	margin: 0 6px;}

#type-group ul li a {
	padding: 3px 0 3px 30px;
	line-height: 2em;}

#right-col #searchfilter ul.secondmenu li a {
	padding: 3px 0;}



#right-col #searchfilter ul li {  margin: 10px 0; padding: 1px 0; }
#right-col #searchfilter ul li a {  font-weight: bold; }
#right-col #searchfilter ul li.card, #type-group ul li .card  { background: url(img/sprite.gif) no-repeat -246px -202px; padding-left: 30px;}
#right-col #searchfilter ul li.video, #type-group ul li .video { background: url(img/sprite.gif) no-repeat -246px -227px; padding-left: 30px;}
#right-col #searchfilter ul li.audio, #type-group ul li .audio { background: url(img/sprite.gif) no-repeat -246px -254px; padding-left: 30px;}




#right-col #searchfilter ul li .text, #type-group ul li .text {
	background: transparent url(../img/text_expression_icon.gif) left center no-repeat;}

#right-col #searchfilter ul li .freetones, #type-group ul li .freetones {
	background: transparent url(../img/freetone_expression_icon.gif) left center no-repeat;}

#right-col #searchfilter ul li .anim, #type-group ul li .anim {
	background: transparent url(../img/animation_expression_icon.gif) left center no-repeat;}



/* ADVANCED SEARCH */
#left-col form#advsearch, #left-col form#profilesearch, #left-col #searchselect form {
	float: none;
	margin: 0 6px;}

#left-col #type-group {
	float: right;
	margin-right: 6px;}

#left-col #search-btn {
	width: 57px;
	background-position: -88px 0;}

#left-col #search-btn:hover, #left-col #search-btn.mouseover {
	background-position: -88px -21px;}

#left-col form#advsearch .textinput, #left-col form#profilesearch .textinput {
	clear: both}



/* ASSIGNMENTS / OPDRACHTEN */
#left-col .opdracht { width: 480px; margin: 15px 0 20px 0; }

#left-col .opdracht .opdracht-left-column { float: left;width: 150px;}
#left-col .opdracht .opdracht-right-column { float: right; width: 320px;}

#left-col .opdracht .opdracht-left-column a,
#left-col .opdracht .opdracht-left-column img,
#left-col .opdracht .opdracht-right-column h3,
#left-col .opdracht .opdracht-right-column p { margin: 0; }
#left-col .opdracht .opdracht-right-column p.datestamp { margin: 1em 0 0 0;}

#left-col p.buttons {
	clear: both;
	overflow: auto;}
	
#left-col p.buttons a {
	float: left;
	margin-right: 10px;
	overflow: hidden;}











#left-col .entries .deadcenter {
	float: left;
	margin: 0 0 20px 20px;}

#left-col .assignment-info {
	background: transparent url(/img/beker.gif) left center no-repeat;
	line-height: 2em;
	padding: 3px 0 3px 25px;
}

#left-col #allexpressions {
	clear: both;
	margin-right: 6px;
	margin-bottom: 0;
	text-align: right;}

#right-col #pitches-box h3 a:link, #right-col #pitches-box h3 a:visited {
	color: #333;
	text-decoration: none;}

#right-col #pitches-box h3 a:link:hover, #right-col #pitches-box h3 a:visited:hover {
	text-decoration: underline;}


/* PROFILE */
#left-col #profiel-left-column, #left-col #profiel-right-column {
	margin-top: 20px;}

#left-col #profiel-left-column {
	float: left;
	padding: 0 5px 0 11px;
	width: 134px;}

#left-col #profiel-right-column {
	float: left;
	padding: 0 11px 0 5px;
	width: 334px;}

#left-col #profiel-right-column h2 {
	background: none;}

#left-col #profiel-right-column h3 {
	margin-top: 1em}

#left-col #user-expressions a {
	float: left;
	margin: 10px 0 0 10px;}

#left-col #user-buddies .deadcenter {
	margin: 20px 0 0 20px;
	float: left;}

#left-col p.form-column {
	clear: none;
	float: left;
	width: 230px;
	margin: 0 0 1em 6px;}



/* REKKEN */
#left-col #rack-listing .container {
	width: 100%;
	position: relative;}

#left-col #rack-listing .container .wrapper {
	position: relative;
	margin: 20px auto 0 auto;
	width: 336px;}

#left-col #rack-listing .container .wrapper * {
	margin: 0;}

#left-col #rack-listing .container .wrapper h3 {
	margin-bottom: 10px;}

#left-col #rack-listing .container .wrapper p.btns {
	position: relative;
	width: 230px;
	overflow: auto;
	margin: 10px auto;}

#left-col #rack-listing .container .wrapper input {
	width: 332px;}

#left-col #rack-listing .container .wrapper a.verwijderen-btn,
#left-col #rack-listing .container .wrapper a.bewerken-btn {
	float: left;}

#left-col #rack-listing .container .wrapper a.verwijderen-btn:link,
#left-col #rack-listing .container .wrapper a.verwijderen-btn:visited {
	width: 114px;
	background-position: -2198px 0;}

#left-col #rack-listing .container .wrapper a.verwijderen-btn:hover {
	background-position: -2198px -21px;}

#left-col #rack-listing .container .wrapper a.bewerken-btn:link,
#left-col #rack-listing .container .wrapper a.bewerken-btn:visited {
	width: 96px;
	background-position: -2102px 0;
	margin-right: 10px;}

#left-col #rack-listing .container .wrapper a.bewerken-btn:hover {
	background-position: -2102px -21px;}

#left-col #rack-listing a#new-rack-btn:link,
#left-col #rack-listing a#new-rack-btn:visited {
	width: 101px;
	float: right;
	margin-right: 6px;
	margin-top: 20px; 
	background-position: -2312px 0;}

#left-col #rack-listing a#new-rack-btn:hover {
	background-position: -2312px -21px;}


/* ECARD */
#left-col #send-ecard-back-btn:link,
#left-col #send-ecard-back-btn:visited {
	width: 159px;
	background-position: -2413px 0;}

#left-col #send-ecard-back-btn:hover {
	background-position: -2413px -21px;}

#left-col #send_back {
	left: 216px;
	margin: 0;
	position: absolute;
	top: 357px;
	width: 159px;}


/* FORGOT PASSWORD */
#send-new-password-btn {
	background-position: -1567px 0;
	width: 217px;}

#send-new-password-btn:hover, #send-new-password-btn.mouseover {
	background-position: -1567px -21px;}


/* DEMOREK */
#right-col #demorack {
	display: block;
	position: relative;
	margin: 0 auto;}



/* AJAX SUGGESTIONS */
#ajaxsuggestions {
	position: absolute;
	width: 253px;
	left: 50%;
	margin-left: 97px;
	border: 1px solid #999;
	background-color: #FFF;
	line-height: 1em;
	padding: 10px;}

#ajaxsuggestions ul {
	list-style: none}



/* FOOTER */
#footer {
   background-color: #DDDDDD;
   border: 1px solid #BBBBBB;
   padding: 25px 0;
   text-align: center;
}

#footer a:link, #footer a:visited {
	color: #333;
	text-decoration: none;
	font-weight: normal;
	vertical-align: top;
}

#footer a:link:hover, #footer a:visited:hover {
	text-decoration: underline;}

#footer a.feed:link, #footer a.feed:visited {
	background: transparent url(/img/feed-icon.gif) left center no-repeat; /* TODO: sprite voor alle iconen en rewards, scheelt 20 calls */
	padding-left: 15px;}

#expression-tooltip {
	background-color: #E1001A;
	border: 1px solid #F00;
	color: #FFF;
	font-weight: bold;
	/* font-size: 0.6875em; */
	position: absolute;
	display: block;}



/* GALLERY */
#gallery .deadcenter {
	float: left;
	margin: 6px 0 0 6px;}

























/* TODO: fixes by Maarten */




/*
   SNIPPETS: 
   tagCloud, etc
*/

ul.tagCloud { margin: 0; padding: 6px 0 0 0; }
ul.tagCloud li { list-style: none; float: left; width: 104px; margin: 0; padding: 0 6px 6px 0; overflow: hidden; }
ul.tagCloud li a { text-transform: capitalize; text-decoration: none; font-weight: bold; }
ul.tagCloud li a:hover { text-decoration: underline; }


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

DEADCENTER BLOKKEN 100 breed  

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


#left-col #search-results .deadcenter,
#left-col #user-buddies .deadcenter { background: #fff url(img/sprite.gif) no-repeat 0 -200px; float: left; margin: 0 10px 20px 10px; }
#most-sent-cards .deadcenter,
#left-col #collection .deadcenter,
.profiles .deadcenter { background: #fff url(img/sprite.gif) no-repeat 0 -200px; float: left; margin: 0 15px 15px 0; }

/* browsers die moeten wachten op de dom ready */
#left-col #search-results .contentblock-bottom div.hover,
#left-col #user-buddies .contentblock-bottom div.hover,
#most-sent-cards div.hover  { background-position: -120px -200px; }

/* browsers die :hover vanzelf al snappen */
#left-col #search-results .contentblock-bottom .deadcenter:hover,
#left-col #user-buddies .contentblock-bottom .deadcenter:hover,
#most-sent-cards .deadcenter:hover,
#left-col #collection .deadcenter:hover  { background-position: -120px -200px; }



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

DEADCENTER BLOKKEN 150 breed  

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

#right-col #sub_kaarten .deadcenter,
#maincontent.opdracht .deadcenter,
body#home-ingelogd .werk .image .deadcenter { background: #fff url(img/sprite.gif) no-repeat -950px 0px; }
#right-col #sub_kaarten div.hover,
#maincontent.opdracht .werk .image div.hover,
body#home-ingelogd .werk .image div.hover { background: #fff url(img/sprite.gif) no-repeat -1140px 0px; }
#right-col #sub_kaarten .deadcenter:hover,
#maincontent.opdracht .deadcenter:hover,
body#home-ingelogd .deadcenter:hover { background: #fff url(img/sprite.gif) no-repeat -1140px 0px; }


#right-col #sub_kaarten .werk { position: relative; margin: 7px 0 17px 0; }
#maincontent.opdracht .werk { position: relative; margin: 0 0 20px 0; width: 288px; height: 150px; overflow: hidden; float: left;}
body#home-ingelogd .werk { position: relative; float: left;height: 150px;margin: 0 0 20px 0;overflow: hidden;width: 285px; }

#right-col #sub_kaarten .image,
#maincontent.opdracht .image,
body#home-ingelogd .werk .image { float: left; width: 150px; }
#right-col #sub_kaarten .text { float: right; width: 188px; font-size: 11px; overflow: hidden; }
#maincontent.opdracht .text,
body#home-ingelogd .werk .text { float: right; width: 128px; font-size: 11px; overflow: hidden; }

body#home-ingelogd .werk .text h4 a:link, body#home-ingelogd .werk .text h4 a:visited {
	text-decoration: none;
	color: #E1001A;}

body#home-ingelogd .werk .text strong a:link, body#home-ingelogd .werk .text strong a:visited {
	color: #000;
	text-decoration: none;}

body#home-ingelogd .werk .text a:link:hover, body#home-ingelogd .werk .text a:visited:hover {
	text-decoration: underline;}

#right-col #sub_kaarten .text strong,
#right-col #sub_kaarten .text a.user {font-size: 11px; display: block; font-family: Verdana, sans-serif; color: #666;}
#right-col #sub_kaarten .text a.user:link, #right-col #sub_kaarten .text a.user:visited { text-decoration: none}
#right-col #sub_kaarten .text a.user:link:hover, #right-col #sub_kaarten .text a.user:visited:hover { text-decoration: underline}
#maincontent.opdracht .text strong,
body#home-ingelogd .werk .text strong { font-size: 14px; display: block; font-family: 'Trebuchet MS',Verdana,Sans-Serif; color: #000; }

#maincontent.opdracht .meta { position: absolute; bottom: 0; left: 160px; width: 160px; color: #999; }
body#home-ingelogd .werk .text .meta { position: absolute; bottom: 0; left: 157px; width: 120px; color: #999; }

#right-col #sub_kaarten .meta .aantal,
#maincontent.opdracht .meta .aantal,
body#home-ingelogd .werk .text .meta .aantal { font-weight: bold; color: #E1001A; }
#right-col #sub_kaarten a,
#maincontent.opdracht a,
body#home-ingelogd .werk a { color: #666; }
#right-col #sub_kaarten a.user,
body#home-ingelogd .werk .text a.user,
body#home-ingelogd .werk a.user { font-weight: bold; color: #000; text-decoration: none; }

#maincontent.opdracht a.user { font-weight: bold; color: #fff; text-decoration: none; }

















/* 
==============
PROFILES 
==============
*/

.result-item .profiledetails h3 { font-size: 18px; display: block; font-family: 'Trebuchet MS',Verdana,Sans-Serif; }
span.icon { padding-top: 5px;  }
.result-item .profiledetails a { color: #666; text-decoration: none; }
.result-item .profiledetails a.werk { color: #E1001A; font-weight: bold; }
#left-col .result-item .profiledetails ul { margin: 0 0 4px 0; padding: 0; }
#left-col .result-item .profiledetails ul li { list-style: none; }
.result-item .profiledetails ul li { font-weight: bold; }
.result-item .profiledetails ul li strong { font-weight: normal; }





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

OPDRACHTEN: overzichtspagina 

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

#left-col .opdracht h3{ font-size: 18px; display: block; font-family: 'Trebuchet MS',Verdana,Sans-Serif; }
#left-col .opdracht .opdracht-left-column .deadcenter { background: #fff url(img/sprite.gif) no-repeat -950px 0px; }
#left-col .opdracht .opdracht-left-column div.hover { background: #fff url(img/sprite.gif) no-repeat -1140px 0px; }

#left-col .opdracht h3 span.icon { float: right; padding-top: 4px;  }
#left-col .opdracht h3 span.icon span { float: left; }

#left-col .opdracht .datestamp {  color: #E1001A; font-weight: bold;  }
#left-col .opdracht ul {  clear: both; margin: 0; padding: 5px 0 0 0; }
#left-col .opdracht ul li {  list-style: none; float: left; }
#left-col .opdracht ul li.first {  width: 150px; }
#left-col .opdracht ul li.first-closed {  margin-left: 150px; }
*html #left-col .opdracht ul li.first-closed {  margin-left: 75px; }
#left-col .opdracht ul li.first a.btn2 {  float: right; margin-right: 5px; }
#left-col .opdracht ul li.first-closed a.btn2 {  float: right; margin-right: 5px; }

#quicksearch fieldset { border: 0; }
#quicksearch fieldset #q { float: left; background: #fff url(img/sprite.gif) no-repeat -138px -135px; width: 157px; height: 19px;  border: 1px solid #fff; font-size: 11px; padding: 3px 0 0 5px; margin: 0 4px 0 0; }
#quicksearch fieldset .IEselect { float: left; border: 1px solid #000; width: 98px;  }


/*
===============
FILTERING
===============
*/

#filter-assignments label,
#filter-portfolios label {
	white-space: nowrap;
	float: left;
	margin: 0 24px 4px 0;
	display: block;}

#filter-assignments label#label-all,
#filter-portfolios label#label-all {
	width: 300px !important;
	clear: both;
	margin: 0 24px 4px 0;
}

#filter-assignments label#label-open, #filter-assignments label#label-closed {
	width: 160px; margin-right: 0;
}

#filter-assignments button
*/ #filter-portfolios button */ {
	width: 132px;
	float: right;
	margin-top: 10px;
	background-position: -2889px 0;}

#filter-assignments button:hover,
#filter-assignments button.mouseover,
/* #filter-portfolios button:hover, */
/* #filter-portfolios button.mouseover */ {
	background-position: -1786px -203px;
	_background-position: -1786px -204px;
	*background-position: -1786px -204px;}

/*#filter-assignments button.mouseover { background-position: -1786px -203px; }*/
#filter-assignments button.mouseover span { background-position: right -175px; }

#filter-assignments fieldset,
#filter-portfolios fieldset {
	border: 0;}

#filter-assignments legend,
#filter-portfolios legend {
	display: none;}

#filter-portfolios p,
#filter-assignments p { padding: 0; margin: 0 0 1em 0; }



/* 
==============
ICONEN SOORT WERK
==============
*/
span.icon-kaart {background: url(img/sprite.gif) no-repeat -246px -202px; display: block; width: 20px; height: 15px; text-indent: -9999px; }
span.icon-video {background: url(img/sprite.gif) no-repeat -246px -228px; display: block; width: 20px; height: 15px; text-indent: -9999px; }
span.icon-audio {background: url(img/sprite.gif) no-repeat -246px -255px; display: block; width: 20px; height: 15px; text-indent: -9999px; }
span.icon-concept {background: url(img/sprite.gif) no-repeat -246px -283px; display: block; width: 20px; height: 15px; text-indent: -9999px; }

span.rating-1 {background: url(img/sprite.gif) no-repeat -1316px 0px; display: block; width: 71px; height: 16px; text-indent: -9999px; }
span.rating-2 {background: url(img/sprite.gif) no-repeat -1316px -17px; display: block; width: 71px; height: 16px; text-indent: -9999px; }
span.rating-3 {background: url(img/sprite.gif) no-repeat -1316px -34px; display: block; width: 71px; height: 16px; text-indent: -9999px; }
span.rating-4 {background: url(img/sprite.gif) no-repeat -1316px -51px; display: block; width: 71px; height: 16px; text-indent: -9999px; }
span.rating-5 {background: url(img/sprite.gif) no-repeat -1316px -68px; display: block; width: 71px; height: 16px; text-indent: -9999px; }
span.rating-0 {background: url(img/sprite.gif) no-repeat -1316px -85px; display: block; width: 71px; height: 16px; text-indent: -9999px; }


p#rating { color: #666; }
p#rating strong { color: #E1001A; font-family: 'Trebuchet MS',Verdana,Sans-Serif; font-size: 14px; }
p#rating .left { float: left; }
p#rating .right { float: right; line-height: 1.9em }
p#rating p { clear: both; font-size: 11px; width: auto; margin: 10px 0; }




#left-col .tabblock h2 { margin: 0 0 1em 0; color: #666; text-transform: none; } /* TITEL BIJ KAART!! */



#home-ingelogd #assignments h2,
#home-ingelogd #latest_entries h2 { text-transform: uppercase; background: transparent url(/img/right-col-dotted-line-red.gif) repeat-x left bottom; }




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

RECHTERBLOK: PROFIEL (bij portfolio en bij kaart)

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

#profiel, #profielwerk { font-size: 11px; }

#profiel dl,
#profielwerk dl  { width: 348px; margin: 0; padding: 0; display: inline-block; position: relative;  }

#profiel dl.pro,
#profielwerk dl.pro { background: #fff url(img/sprite.gif) no-repeat -466px -91px; }


#profiel dt,
#profielwerk dt { width: 238px; color: #E1001A; font-family: 'Trebuchet MS',Verdana,Sans-Serif; font-size: 16px; font-weight: bold; margin: 0 0 4px 0; padding: 0; float: right; }
#profiel dd img,
#profielwerk dd img { width: 100px; float: left; margin: 0 10px 0 0; }
#profiel dd ul,
#profielwerk dd ul {  padding: 0 0 15px 0; margin: 0 0 15px 0; float: left; }
#profiel dd ul li,
#profielwerk dd ul li {  margin: 0; padding: 0; list-style: none; clear: left; font-weight: bold; }

#profiel dd ul li em,
#profielwerk dd ul li em { font-style: normal; font-weight: normal; }

#profiel dl a,
#profiel dt a,
#profielwerk dl a { text-decoration: none; }
#profiel dl a.werk,
#profiel dt a,
#profielwerk dl a.werk { color: #E1001A; font-weight: bold; }
#profiel p,
#profielwerk p { clear: both; padding: 15px 0 0 0; margin: 0; }
#profielwerk h3 { font-size: 12px; margin: 0; padding: 12px 0 0 0; clear: both; }
#profielwerk img { margin: 0; vertical-align:bottom; }

#profiel dd span.icon,
#profielwerk dd span.icon { clear: both; position: absolute; bottom: 0; left: 110px; }
#profiel dd span.icon span,
#profielwerk dd span.icon span { float: left; }
#profielwerk a.url { color: #E1001A; }
#profiel p.tags { padding: 15px 0; }
#profiel p.tags a{ text-decoration: none; font-weight: bold;}
#profiel p.tags a:hover { text-decoration: underline;}
#profiel a.readmore { text-decoration: underline; color: #666; }

#expression-description { padding: 15px 0 0 0; }




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

OPDRACHT: uitgelicht (let op dit onderdeel heeft ook een eigen css en sprite voor layout)

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

#maincontent.opdracht { padding: 16px 0 16px 16px; margin: 0 7px; clear: both; background: #ed262f url(img/sprite.gif) no-repeat -919px -301px; color: #fff;}
#maincontent.opdracht .intro h2 { width: 200px; height: 90px; background: url(img/sprite.gif) no-repeat -561px 0; text-indent: -9999px; }
#maincontent.opdracht .intro { float: left; padding-right: 10px; width: 370px;}
#maincontent.opdracht ul.spec { float: left; position: relative; margin-bottom: 20px;  width: 370px; }
#maincontent.opdracht ul.spec li { clear: left; margin: 0 0 0 100px; list-style: none;  font-family: 'Trebuchet MS',Verdana,Sans-Serif; font-size: 16px; font-weight: bold;}
#maincontent.opdracht ul.spec li strong { margin: 0 0 0 -100px; float: left; }

#maincontent.opdracht .etalage { float: left; width: 483px; }
#maincontent.opdracht dl { margin: 0; padding: 15px 0; position: relative; width: 288px; overflow: hidden; float: left;}
#maincontent.opdracht dt { color:#000; font-weight: bold; margin:0; padding:0 10px 0 0;}
#maincontent.opdracht dd { margin:0; padding:0 10px 0 0; color: #fff; }

#maincontent.opdracht a { color: #fff;}
#maincontent.opdracht a.btn-zend-creatie-large { margin: 20px 0; text-indent: -9999px; height: 23px; background: #ed262f url(img/sprite.gif) no-repeat -935px -245px; display: block; clear: left;}
a#btn-zend-creatie-large { margin: 20px auto; width: 855px; text-indent: -9999px; height: 23px; background: url(img/sprite.gif) no-repeat -936px -245px; display: block; clear: left;}


span.closed { background: url(img/deadline.png) no-repeat 0 0; display: block;text-indent: -9999px; width: 262px; height: 68px; position: absolute; bottom: 0; right: 0; }  
span.winner { background: url(img/winner.png) no-repeat 0 0; display: block;text-indent: -9999px; width: 51px; height: 51px;position:absolute;top:0;left:15px;width:53px; }  

#maincontent.opdracht ul.spec span.closed { position: absolute; left: 82px; bottom: -26px; }  
#maincontent.opdracht div.uitleg { clear: both; }
#maincontent.opdracht div.inzenden { position: relative; clear: both; }
#maincontent.opdracht div.inzenden span.closed { position: absolute; bottom:-22px; left: 293px; }  

#maincontentbottom { padding: 0; margin: 0 7px; height: 16px; clear: both; background: #ed262f url(img/sprite.gif) no-repeat -919px -284px;}

#maincontent.opdracht h3 { font-size: 16px; text-transform: uppercase; }
#maincontent.opdracht .results,
#maincontent.opdracht .results-winner { padding: 15px 0 0 0; }

#maincontent.opdracht .results-winner { color: #fff; }
#maincontent.opdracht .results-winner h4 { color: #fff; }
#maincontent.opdracht .results-winner strong { display: block; }

#maincontent.opdracht .results-winner .werk { padding-top: 10px; }
#maincontent.opdracht .werk-winner { float:left;margin:0pt 0pt 20px;overflow:hidden;position:relative;width:288px; }
#maincontent.opdracht .text { color: #fff; }
#maincontent.opdracht .text strong { color: #fff; }
#maincontent.opdracht .meta { color: #fff; }
#maincontent.opdracht .btn-bekijk-alle-werken {
	float: right;
	clear: both;
	margin-right: 12px;}

#maincontent.opdracht .entries {
	border-bottom: 1px dotted #E1001A;
	padding-bottom: 16px;
	margin-bottom: 20px;}

#maincontent.opdracht .entries .deadcenter {
	float: left;
	margin: 0 15px 15px 0;
	background: transparent url(img/sprite.gif) 0 -200px no-repeat;}

#maincontent.opdracht .entries .hover {
	background-position: -120px -200px;}



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

BUTTONS MET SPAN (irritante class op a overrulen daarna uitzoeken waarom 
randen niet transparant want achtergrondkleur zodat niet witte tekst op witte achtergrond zonder images!!
==============
*/

a.btn1 { white-space: nowrap; color: #fff !important; text-decoration: none !important; padding: 2px 0; height: 17px; display: block; float: left; background: url(img/sprite.gif) no-repeat -1786px -89px; line-height: 14px; font-family: 'Trebuchet MS',Verdana,Sans-Serif; font-size: 14px; font-weight: normal !important;}
a.btn1 span { white-space: nowrap; padding: 0px 15px 3px 7px; margin: 0 0 0 8px; background: url(img/sprite.gif) no-repeat right -60px;  }


button.btn1 { float: right; overflow: visible; border: 0; white-space: nowrap; padding: 0; margin: 10px 0 0 0; height: 22px; background: url(img/sprite.gif) no-repeat -1786px -88px; }
button.btn1 span { position: relative; display: block; text-indent: 0; height: 14px; line-height: 14px;  padding: 2px 12px 7px 0; margin: 0 0 0 8px; white-space: nowrap;  background: url(img/sprite.gif) no-repeat right -60px; line-height: 14px; font-family: 'Trebuchet MS',Verdana,Sans-Serif; font-size: 14px; font-weight: normal !important; color: #fff; }
button.btn1:hover { background-position: -1786px -203px; }
button.btn1:hover span { background-position: right -175px; }




a.btn2 { white-space: nowrap; color: #fff !important; text-decoration: none !important; padding: 2px 0; height: 17px; display: block; float: left; background: url(img/sprite.gif) no-repeat -1783px -31px; line-height: 14px; font-family: 'Trebuchet MS',Verdana,Sans-Serif; font-size: 14px; font-weight: normal !important;}
a.btn2 span { white-space: nowrap; padding: 0px 15px 3px 7px; margin: 0 0 0 8px; background: url(img/sprite.gif) no-repeat right 0px;  }

a.btn1:hover { background-position: -1786px -204px; }
a.btn1:hover span { background-position: right -175px; }

a.btn2:hover { background-position: -1783px -146px; }
a.btn2:hover span { background-position: right -115px; }





/* kenmerken specifieke buttons */

a.btn-meer-gerelateerde-kaarten,
a.btn-blog-archive,
a.btn-bekijk-alle-werken,
#home-ingelogd a.btn-bekijk-alle-inzendingen,
#sub_kaarten .btn-bekijk-alle-kaarten,
a#add-as-friend-btn,
a#edit-profile-btn,
a.btn-bekijk-alle-favorieten, 
a.btn-bekijk-alle-vrienden,
a.btn-meer-kaarten { float: right; clear: both }
a.btn-remove-from-favorites {margin-left: 20px;}

a.btn-bekijk-inzendingen { margin-right: 10px; }
*html a.btn-bekijk-inzendingen { margin-right: 5px; } /* IE6 duplicate margin bug, niet op te lossen omdat er overflow wordt gebruikt */

p#buttons a.btn1 { margin: 0 10px 10px 0; }
*html p#buttons a.btn1 { margin: 0 5px 5px 0; }


#header a.btn1 { background: url(img/btn-login.gif) no-repeat -331px -89px; }
#header a.btn1 span { background: url(img/btn-login.gif) no-repeat right -60px; }
#header a.btn2 { background: url(img/btn-login.gif) no-repeat -328px -31px; }
#header a.btn2 span { background: url(img/btn-login.gif) no-repeat right 0px; }

#header button.btn1 { background: url(img/btn-login.gif) no-repeat -331px -88px; }
#header button.btn1 span { background: url(img/btn-login.gif) no-repeat right -60px; }




/*
==============
   HACK: 
   clear floating ellements, use of overflow is not so good.
==============
*/

.clearfix:after,
.clear:after,
#content:after,
#profiel dl:after,
#user-buddies:after,
.result-item:after
 {
  content: ".";
  clear: both;
  height: 0;
  visibility: hidden;
  display: block;
}

.clearfix,
.clear,
#content,
#profiel dl,
#user-buddies,
.result-item {
  display: inline-block; /* Fixes IE/Mac */
}
/* Hides from IE-mac \*/
* html .clearfix,
* html .clear,
* html #content,
* html #profiel dl,
* html #user-buddies,
* html .result-item {height: 1%;}

.clearfix,
.clear,
#content,
#profiel dl,
#user-buddies,
.result-item {display: block;}
/* End hide from IE-mac */








/* ENTREEPAGINA HOME */






body#home-ingelogd  #quicksearch{
	width: 350px;
	float: right;
	padding:10px 12px 0 0;}

body#home-ingelogd #brandspots, body#home-ingelogd #explanation,
body#home-ingelogd #uploadlink, body#home-ingelogd #assignments, body#home-ingelogd #latest_entries {
	margin: 0 auto 15px auto;
	clear: both;
	width: 855px;}

body#home-ingelogd #brandspots #featured {
	cursor: pointer;
	float: left;}

body#home-ingelogd #brandspots #carrousel {
	width: 357px;
	float: right;}

body#home-ingelogd #brandspots #carrousel .assignment {
	cursor: pointer;
	position: relative;}

body#home-ingelogd #brandspots #carrousel .assignment img {
	width: 98px;
	height: 66px;
	background-color: #9F9;
	float: right;}

body#home-ingelogd #brandspots #carrousel .assignment p { margin:0; padding:0; }
body#home-ingelogd #brandspots #carrousel .wrapper {
	float: left;
	width: 252px;
	padding: 2px;
	background: url(/img/right-col-dotted-line-red.gif) repeat-x left bottom;}

body#home-ingelogd #brandspots #carrousel .first .wrapper {
	background: url(/img/right-col-dotted-line-red.gif) repeat-x left top;}

body#home-ingelogd #brandspots #carrousel .wrapper .wrapper {
	float: none;
	width: auto;
	background-image: none;
	min-height: 57px;
	height: auto !important;
	height: 57px;}

body#home-ingelogd #brandspots #carrousel .first .wrapper .wrapper {
background: url(/img/right-col-dotted-line-red.gif) repeat-x left bottom;}


body#home-ingelogd #brandspots #carrousel h4 {
	padding-left: 25px;
	color: #E1001A;
	font: bold 13px "Trebuchet MS", sans-serif;
	
	background: transparent url(/css/img/assignment_hand_inactive.gif) left center no-repeat;}




	
body#home-ingelogd #brandspots #carrousel h4 span {
	display: block;
	float: right;}

body#home-ingelogd #brandspots #carrousel h4 span.client {
	float: left;}

body#home-ingelogd #brandspots #carrousel .active h4 {
	background: transparent url(/css/img/assignment_hand_active.gif) left center no-repeat;}

body#home-ingelogd #brandspots #carrousel .active .wrapper .wrapper {
	background: transparent url(/css/img/active_assignment_bg.gif) top left repeat;}

body#home-ingelogd #brandspots #carrousel h4 a:link,
body#home-ingelogd #brandspots #carrousel h4 a:visited {
	color: #E1001A;
	text-decoration: none;}

body#home-ingelogd #brandspots #carrousel h4 a:link:hover,
body#home-ingelogd #brandspots #carrousel h4 a:visited:hover {
	text-decoration: underline;}

body#home-ingelogd #explanation {
	height: 48px;
	margin-top: 10px;
	text-indent: -9999em;
	overflow: hidden;
	background: transparent url(/css/img/explanation_bg.gif) top center no-repeat;}
body#home-ingelogd #explanation ol { display: none; }

body#home-ingelogd #assignments .assignment {
	width: 278px;
	cursor: pointer;
	float: left;}

body#home-ingelogd #uploadlink {
	display: block;
	height: 23px;
	overflow: hidden;
	text-indent: -9999em;
	background: #FFF url(/css/img/sprite.gif) no-repeat scroll -935px -245px;}

body#home-ingelogd #assignments .werk a strong {
	color: #E1001A;}

body#home-ingelogd #assignments .werk a:link, body#home-ingelogd #assignments .werk a:visited {
	color: #E1001A;
	text-decoration: none;} 

body#home-ingelogd #assignments .werk a:link:hover, body#home-ingelogd #assignments .werk a:visited:hover {
	text-decoration: underline;}







#profiel a.url span, #profielwerk a.url span { overflow: hidden; float: left; width: 152px; display: inline-block;  }

#search-results div.clear,
#profielwerk { padding: 0 0 15px 0; }



#populair-tags,
#filter-portfolios,
#filter-assignments,
#most-sent-cards { padding: 0 0 10px 0; background: url(/img/right-col-dotted-line-red.gif) repeat-x left bottom; }



.IEcheckbox { margin: 2px 4px 1px 0; } 





















/* 
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
BELANGRIJK HIERONDER ALLEEN OVERGENOMEN CSS PLAATSEN, NIEUWE CSS HIERBOVEN PLAATSEN
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
UIT BRAND GETROKKEN 

*/

#left-col #expression p#rating { width: 100%; padding-top: 6px; margin: 0 0 1em 0; background: transparent url(/img/brands/boomerang/left-col-dotted-line-red.gif) repeat-x 0 0;}





#left-col div#expression h3 {
	background: transparent url(/img/dotted-line-white.gif) top left repeat-x;}

#left-col #expression p#options a {
	background: transparent url(img/expression-icons.gif);}

#left-col #expression p#options a.link {
	background-position: 0 0;}

#left-col #expression p#options a.inappropriate {
	background-position: -12px 0;}

#left-col #expression p#options a.download {
	background-position: -24px 0;}


/* VERNIEUWDE OPZET VAN TABS */

#left-col .tabblock .tabs li { background: url(img/bg_tabs.gif) no-repeat right -54px; width: 100px; text-align: center; }
#left-col .tabblock .tabs li span { background: url(img/bg_tabs.gif) no-repeat -173px -81px; color: #000; font-weight: bold; padding: 5px 0pt 8px; white-space: nowrap; display: block; width: 100px; }
#left-col .tabblock .tabs li.active { background-position: right 0px;  }
#left-col .tabblock .tabs li.active span { background-position: -173px -27px; color: #fff; }





/* BLOPOST NOG NIET HERZIEN */

#left-col .blogpost {background: #F0F0F0 url(/img/brands/boomerang/bmr-blogpost-top-bg.gif) top left no-repeat;}
#left-col .blogpost-wrapper {background: transparent url(/img/brands/boomerang/bmr-blogpost-bottom-bg.gif) bottom left no-repeat;}

#left-col .blogpost .blogvideo { clear: left; }
	
#left-col .blogpost p.details,
#left-col .blogpost p.details a:link,
#left-col .blogpost p.details a:visited,
#left-col .blogpost p.details a:hover,
#left-col .blogpost p.category,
#left-col .blogpost p.category a:link,
#left-col .blogpost p.category a:visited,
#left-col .blogpost p.category a:hover,
#left-col .blogpost h3,
#left-col .blogpost h3 a:link,
#left-col .blogpost h3 a:visited,
#left-col .opdracht h3 a:link,
#left-col .opdracht h3 a:visited {
	color: #E1001A;}

#left-col .blogpost h3 a:link,
#left-col .blogpost h3 a:visited,
#left-col .opdracht h3 a:link,
#left-col .opdracht h3 a:visited {
	text-decoration: none;}

#left-col .blogpost h3 a:link:hover,
#left-col .blogpost h3 a:visited:hover,
#left-col .opdracht h3 a:link:hover,
#left-col .opdracht h3 a:visited:hover {
	text-decoration: underline;}

#left-col .comment {
	background: #F8F8F8 url(/img/brands/boomerang/comment-bottom-bg.gif) bottom left no-repeat;}

#left-col .comment .date {
	background: #F0F0F0 url(/img/brands/boomerang/comment-top-bg.gif) top left no-repeat;
	color: #E1001A}

#left-col .comment a:link, #left-col .comment a:visited {
	color: #E1001A}






#left-col #user-expressions p {
	display: block;
	clear: both;
	overflow: auto;
	text-align: right;
	margin: 0 6px 6px 0;}

#left-col #user-expressions p a:link, #left-col #user-expressions p a:visited {
	display: block;
	float: right;
	color: #FFF;
	text-decoration: none;}


/* REKKEN */
#left-col #rack-listing h3 a:link, #left-col #rack-listing h3 a:visited {
	color: #E1001A;
	text-decoration: underline;}

#left-col #rack-listing h3 a:link:hover, #left-col #rack-listing h3 a:visited:hover {
	text-decoration: none;}




#left-col .contentblock-middle-diapos {
	background: #E1001A url(/img/brands/boomerang/contentblock-large-bg-middle.gif) top left repeat-y;}

#left-col .contentblock-top-diapos {
	background: transparent url(/img/brands/boomerang/contentblock-large-bg-top.gif) top left no-repeat;}

#left-col .contentblock-bottom-diapos {
	background: transparent url(/img/brands/boomerang/contentblock-large-bg-bottom.gif) bottom left no-repeat;
	color: #FFF;}

#left-col .contentblock-bottom-diapos a {
	color: #FFF;}



#left-col h2 {
   border-bottom:3px solid #AAAAAA;
   color:#333;
   font-size:14px;
   padding-bottom:2px;
   font-family: 'Trebuchet MS',Verdana,Sans-Serif; overflow: hidden;
}

#left-col.fullwidth h2 {
	background-repeat: repeat-x;}

#left-col .contentblock-bottom-diapos h2 {
	background: transparent url(/img/brands/boomerang/left-col-dotted-line-white.gif) 1px center no-repeat;}
	
#twitterbadge {
  position: fixed; top: 140px; 
  width: 30px; height: 117px;
  display: block;
  z-index: 8765; 
  cursor: pointer; 
  background: url("/img/twitter_2_transparant.png") no-repeat scroll left top; 
  right: 0pt;
  text-indent: -9999em;
}