@charset "utf-8";
/* 
GLOBAL 
*/
body {
	font-size: 62.5%;
}
/* 
STRAMIEN 
*/
#wrapper {
	overflow: hidden;
	margin: 0 auto;
	width: 967px;
	padding: 0 14px;
}
#header {
	overflow: hidden;
	width: 100%;
	padding-top: 15px;
	height: 83px;
}
#logo {
	float: left;
	width: 292px;
}

#logo a {
	width: 292px;
	height:72px;
	display: block;
	text-indent: -999999px;
	background-image: url('images/compacon-logo-web2.png');
	background-repeat: no-repeat;
}

.english #logo a 
{
	background-image: url('images/compacon-logo-web2-eng.png');
}

#langselect {
	width:auto;
	float: right;
	margin-top: -3px;
}

#langselect a 
{
	float: left;
	margin: 0 0 0 4px;
	width:auto;
}

#login {
	float: right;
	width: 220px;
	margin-top: 1px;
	text-align:right;
}
#menu {
	float: right;
	text-align:right;
	width: 675px;
	margin-top: 41px;
}
#menu li.last {
	padding-right:0;
}
#submenu {
	float: left;
	width:200px;
	text-align:right;
	padding-bottom:20px;
	
}
#arena {
	margin:0 auto;
	overflow: hidden;
	clear:both;
}

#options {
	overflow:hidden; 
	top: -13px;
	position:relative; 
	z-index:10;
	background: url(images/bg-options.png) no-repeat;
}
#maincontent {
	overflow: hidden;
	margin: 0 auto;
}
.sub {
	width: 476px;
	padding-left: 42px;
	float:left;
}
#subcontent {
	float: left;
	width: 725px;
	padding-left: 42px;
	padding-top: 1.6em;
	padding-bottom: 16px;
}
#footer {
	padding: 10px;
	overflow: hidden;
	height: 12px;
	margin-bottom: 12px;
}
#naw {
	float: left;
	width: 620px;
}
#naw p {
	padding:0;
	line-height:1;
}
#pdc {
	float: right;
	width: 320px;
	text-align: right;
}
.col {
	width: 178px;
	padding: 0 8px 25px ;
	float:left;
	position: relative;
/*	border-right: 1px solid #ccdae6;*/
}


/*
LAYOUT
*/

/* Home */
.homeCol {
	padding-top: 30px;
	padding-bottom: 30px;
	
}
.homeCol:hover {
	background: url(images/arrow-service.png) center top no-repeat;
	cursor:pointer;
}
#arena.home {	height: 306px; overflow:hidden; position:relative;}

.homeslide {
	background: url(images/bg-arena.png);
	clear: both;
	overflow: hidden;
	/*position:absolute;*/
	/*top: 98px; */
	height:306px;
}
.homeslide img, #corporate img {
	float: left;
	width: 392px;
}
.homeslide .cta , #corporate .cta{
	float: left;
	width: 520px;
	margin-top: 45px;
}
.homeslide img.btn, #corporate img.btn {
	width: auto;
	float:none
}
#corporate { z-index:7;}
/*#actiemarketing {z-index:3;}
#relatiegeschenken {z-index:4;}
#custommade {z-index:5;}
#premiumprogram {z-index:6;}
#newsletter {z-index:7;} */
#actiemarketingbtn { /*padding-left:0; WEG */ }
.selected { background: url(images/arrow-service.png) center top no-repeat; }
.relatiegeschenkenbtn, .casebtn, .contactbtn, .meerinfobtn a, .downloadbtn a{
	height: 25px;
	text-indent:-4000px;
	float: left;
	margin-right: 10px;
}
.relatiegeschenkenbtn a, .casebtn a, #subcontent .contactbtn a, meerinfobtn a, .downloadbtn a{
	display: block;
	height: 25px;
	border-bottom: none;
}
.relatiegeschenkenbtn a {
	background: url(images/btn-relatiegeschenken.png) 0 0 no-repeat;
	width: 184px;
}
.relatiegeschenkenbtn a:hover {
	background-position: -184px 0;
}
.meerinfobtn a {
	background: url(images/btn_meerinfo.png) 0 0 no-repeat;
	width: 143px;
}
.meerinfobtn a:hover {
	background-position: -143px 0;
}
.english .meerinfobtn a {
	background: url(images/btn_meerinfo_en.png) 0 0 no-repeat;
	width: 147px;
}
.english .meerinfobtn a:hover {
	background-position: -147px 0;
}
.casebtn a {
	background:url(images/btn-case.png) 0 0 no-repeat;
	width: 107px;
}
.casebtn a:hover {
	background-position: -107px 0;
}
.downloadbtn a {
	background:url(images/btn_downloaden.png) 0 0 no-repeat;
	width: 123px;
}
.downloadbtn a:hover {
	background-position: -122px 0;
}
.contactbtn a {
	background:url(images/btn-contact.png) 0 0 no-repeat;
	width: 167px;
}
.contactbtn a:hover {
	background-position: -166px 0;
}
.english .contactbtn a {
	background:url(images/btn-contact_en.png) 0 0 no-repeat;
	width: 116px;
}
.english .contactbtn a:hover {
	background-position: -115px 0;
}
/* Over Compacon */
#about #subcontent {
	/* width: 532px; WEG */
}
.contentleft, .contentright {
	width: 520px;
	margin: 45px 0;
	overflow:hidden;
}
.contentleft img {
	float: left;
	width:120px;
	border-left: 4px solid #004583;
}
.contentleft .excerpt {
	float:left;
	width:386px;
	margin:0 0 0 10px;
}
.contentright .excerpt {
	float:left;
	width:350px;
}
.contentright img {
	float: right;
	width:120px;
	border-left: 4px solid #004583;
}
.contentleft h2, .excerpt p {
	padding-left:10px;
}
.contentleft h2, .contentright h2 {
	font-size:1.6em;
	padding-top: 0;
}
#subcontent .contentleft h4 a, #subcontent .contentright h4 a {
	color: #004583;
	font-size: 1.1em;
	padding-top: 2px;
	height: 15px;
	text-decoration: none;
	border-bottom: none;
}
#subcontent .contentleft h4 a { background:url(images/arrow-blue.png) right 0px no-repeat; padding-right: 24px;}
#subcontent .contentright h4 a { background:url(images/arrow-blue.png) left 0px no-repeat; padding-left: 24px; }
.contentleft h4 a {
	float: right;
}
.contentright h4 a {
	float: left;
}
.contentleft p, .contentright p {
	padding-top: 1em;
}
.contentright p {
	padding-left:0;
}
/* Producten en diensten */
#proddienst #subcontent {
	padding:0;
	width: 759px;
}
#subcontent .col {
	width: 214px;
	/*height: 100px;*/
	border-left: 4px solid #004583;
	margin-right: 6px;
	margin-bottom: 14px;
	border-right:none;
	background: url("images/col.gif") repeat-x top left;
}
#subcontent .col .colarrow {
	padding: 5px 0 0 5px; /* iets met klikoppervlak */
	width: 18px;
	position: absolute;
	bottom: 8px; 
	right: 8px;
	overflow: hidden;
	text-indent: -9999999px;
	background-repeat: no-repeat;
	background-position: right bottom;
}
.col p {
	padding: 0;
	font-size: 1.1em;
}
#subcontent .col .colimg {
	width: 207px;
	height: 140px;
	margin: 5px 0;
	text-align: center;
	vertical-align: middle;
	overflow: hidden;
}
#subcontent .col .colimg img{
	width: 207px; 
}
#subcontent .coltekst {
	background: none;
	padding-bottom: 0;
	margin-left: 4px;
	border: 0;
}
#subcontent .col a { display: block;  text-decoration:none; border-bottom:none; }

body #subcontent .coltekst a {display: inline; text-decoration: underline;}
.relatiegeschenken {
	background: url(images/prod-relatiegeschenken-premiums.jpg) left top no-repeat;
}
.salespromotions {
	background: url(images/prod-salespromotions.jpg) left top no-repeat;
}
.corporate {
	background: url(images/prod-corporate-premium.jpg) left top no-repeat;
}

.custom {
	background: url(images/prod-custom-made.jpg) left top no-repeat;
}
.handling {
	background: url(images/prod-handling.jpg) left top no-repeat;
}
.relatiegeschenken, .salespromotions, .corporate, .custom, .handling, .algemeneinfo, .missieenvisie, .kolom_organisatie, .kolom_conduct, .kolom_vacatures, .kolom_gadgets, .kolom_tassen, .kolom_snoep{
	padding-top: 140px; 
}
/* Corporate Premium Program */
#quote {
	float: left;
	width: 200px;
	text-align:left;
	margin-top: 140px;
}
#quote p {
	font-size: 2.4em;
	line-height: 1.6;
	color: #D6DAD7;
	font-family: "Trebuchet MS", Arial, sans-serif;
}
/* slider */
#slidewrap {
	width: 725px;
}
#slider {
	width:725px;
	background: #F2F2F2;
}
#btnleft, #btnright {
	float: left;
	width: 60px;
}
.product {
	width: 170px;
	padding-top: 15px;
}
.jcarousel-item h4 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 1.1em;
	font-weight: bold;
	margin: 1px 0;
}
.jcarousel-item p {
	margin:0;
	padding: 0;
}
.jcarousel-item img {
	border: 1px solid #d6d6d6 !important;
}
#mycarousel p {
	font-size: 0.9em;
}
body .jcarousel-clip-horizontal {
	height: 147px !important;
}
#mycarousel li { cursor:pointer; }
/* /e slider */

/* Catalogus online */
/*#productfinder, #catalogi {padding-top: 150px;}*/

/* Contact */
#contacthq #saddr {
	width: 240px;
	float:left;
	margin-left: 2px;
}
#contacthq a {
	float:left;
	margin-top: 1px;
	margin-left: 15px;
	text-indent: -999999px;
	background-image: url('images/btn_planuwreis.gif');
	width: 120px; 
	height: 25px;
	overflow: hidden;
}

.english #contacthq a {
	background-image: url('images/btn_planuwreis_en.gif');
}

.form {
	clear:both;
}
fieldset {
	clear: both;
	/*border: 1px solid #CCC; WEG */
	/*margin: 10px 0; WEG */
	width: 500px;
	padding: 10px 20px 20px 20px;
}
legend {
	text-transform: uppercase;
	color: #CCC;
	padding: 0;
	font-family:Arial, Helvetica, sans-serif;
}
.form ol {
	list-style:none;
	overflow:hidden
}
.form li {
	clear:both;
}

.form li span span {
	margin: 3px 0 0 2px;
	display: inline-block
}

label {
	float: left;
	width:120px;
	font-size: 1.1em;
	margin: 0 2px;
}
#verzendknop {
	width: 152px;
	height: 25px;
}

.english #verzendknop {
	width: 115px;
	height: 25px;
}
input, textarea {
	float: left;
	width: 360px;
	padding: 2px;
	margin: 2px 0;
}

label.incorrect { font-weight: bold; color: #aa1a07;}
input.incorrect, textarea.incorrect { border-color: #aa1a07; }
input[type=submit] {
	float: right;
	width: auto;
}
#contactform input[type=submit] {
	margin-right: 220px;
}
#aanvraag label {
	width: 440px;
}
input[type=hidden] {
	display: none
}
input[type=checkbox] {
	width: auto
}
/*
NAVIGATION
*/
#login li {
	display: inline;
	border-right: 1px solid #6C6C6C;
	padding:0 9px 0;
}
#login a {
	text-decoration: none;
	color: #6c6c6c;
	font-size: 1em;
}
#menu a {
	color: #004583;
	text-decoration: none;
	line-height: 1.2em;
}
#menu a:hover {
	border-bottom: 2px solid;
}
#menu li {
	display:inline;
	border-right: 1px solid #004583;
}
#menu li:lastchild {
border-right: none
}
#submenu h2 {
	font-size: 1.6em;
	padding-right: 10px;
}
#submenu ul li {
	border-bottom: 1px solid #e5e5e5;
	font-size: 1.1em;
	padding:.5em 10px;
}
#submenu li a {
	text-decoration:none;
	color: #6f6f6f;
}
#submenu li a.current, #submenu li a:hover {
	color: #004583;
}
#subcontent a {
	color: #6F6F6F;
	text-decoration:underline;
	/*border-bottom: 1px solid gray; WEG*/
}
#subcontent a:hover {
	text-decoration:none;
	/*border-bottom: none WEG*/
}
/* Highlighting */
#about a.about,#action a.action, #product a.product, #portfolio a.portfolio, #catalog a.catalog, #action a.action, #contact a.contact {
	border-bottom: 2px solid orange;
}
#menu a.highLight 
{
	border-bottom: 2px solid orange;
}

/*
TYPE
*/
h1, h2, h3, h4, h5, h6 {
	font-family: "Trebuchet MS", Arial, sans-serif;
	font-weight:normal; line-height:1.2;
}
h1 {
	font-size: 3.2em;
	color: #004583;
	padding-bottom:.5em;
}
#subcontent h1 {
	font-size: 2.2em;
	padding:.5em 0;
}
#arena p {
	font-size: 1.3em;
	padding: 0 0 15px 0;
}
h2 {
	color:#004583;
	font-size: 1.6em;
	padding: .5em 0;
	font-weight: 300;
}
h3 {
	color:#004583;
	font-size: 1.4em;
}
#options h2 {
	text-transform:uppercase;
	font-size: 1.3em;
	padding-bottom:.8em;
}
#footer ul {
	display: inline;
}
#footer li {
	font-size: 1.1em;
	margin-left: 10px;
	display: inline;
	padding: 0 10px;
	background: url(images/footer-bullet.png) left center no-repeat;
}
#footer li a {
	/*color: #9CA3AD; WEG*/
	text-decoration:none;
}
#footer p {
	font-size: 1.1em;
}
p, li {
	font-family: Arial, sans-serif;
	font-size: 1.2em;
}
p {
	color: #6f6f6f;
	padding:1em 0;
	line-height:1.5;
}
p.intro {
	font-size: 1.3em;
}
#subcontent li {padding: .5em 0;}
#menu li {
	font-family: "Trebuchet MS", Arial, sans-serif;
	font-size: 1.3em;
	padding:0 0.7em;
	text-transform:capitalize;
}
#login li {
	text-transform:capitalize;
}
#footer p, #footer li, #footer a {
	color: #899DBA;
}
/*
PALETTE
*/
donkerblauw {
	color: #004583;
}
middengrijs {
	color: #6c6c6c;
}
maatwerk {
	color: gray;
}
salespromo {
	color: darkblue;
}
premium {
	color: green;
}
relatie {
	color: orange;
}
/*
COLOR N BACKGROUNDS
*/
body {
	background-color: #FFFFFF;
	background: url(images/bg-body.png);
	background-position: center top;
	background-repeat: repeat-x;
}
#wrapper {
	background: white;
}
#arena {
	background-color: #f5f5f5;
	background-image:url(images/bg-arena.png);
	background-repeat: no-repeat;
	overflow:hidden;
}
#maincontent {
	color: #6f6f6f;
}
#footer {
	background: #E6EBF1;
	color: #899DBA;
}
/*
TOOLS
*/
.noborder {
	border: none !important;
	padding-right:0;
}

/* Portfolio MENU */
body h3 					{ font-size: 12px; color: black; font-weight: bold; border-bottom: 4px solid #004583; font-family:Arial,sans-serif; line-height:  2.5em; }

ul.portfoliomenu		 	{ margin-bottom: 15px;}
ul.portfoliomenu li a		{ display: block;}
.portfolio_meerlink			{ margin-bottom: 15px; line-height: 2.5em; padding:0.5em 10px; display: block; font-size: 11px; font-family:Arial,sans-serif; color: #004583; text-decoration: none;}
.portfolio_meerlink:hover	{ text-decoration: underline; }
ul.portfoliomenu li	{ line-height: 1.3em;} 


/* JUSTIN ADDITION */
 /* Blauw */
#subcontent .imageLine1 {  border-left: 4px solid #004583;  }
h3.imageLine1 { border-bottom: 4px solid #004583; }
#subcontent .imageLine1 .colarrow { background-image: url('images/arrow-blue.png'); }
 /* Groen */
#subcontent .imageLine2 { border-left: 4px solid #8ac500; }
h3.imageLine2 { border-bottom: 4px solid #8ac500; }
#subcontent .imageLine2 .colarrow { background-image: url('images/arrow-green.png'); }
 /* Oranje */
#subcontent .imageLine3 { border-left: 4px solid #f09000; }
h3.imageLine3 { border-bottom: 4px solid #f09000; }
#subcontent .imageLine3 .colarrow { background-image: url('images/arrow-orange.png'); }
 /* Grijs */
#subcontent .imageLine4 { border-left: 4px solid #6f6f6f; }
h3.imageLine4 { border-bottom: 4px solid #6f6f6f; }
#subcontent .imageLine4 .colarrow { background-image: url('images/arrow-grey.png'); }
 /* Lichtblauw */
#subcontent .imageLine5 { border-left: 4px solid #0094d1; }
h3.imageLine5 { border-bottom: 4px solid #0094d1; }
#subcontent .imageLine5 .colarrow { background-image: url('images/arrow-lblue.png'); }



#subcontent .contentleft .excerpt p { padding-top:0px; }
#subcontent .contentleft .excerpt h2 { padding-bottom:2px; }
#subcontent .contentright .excerpt p { padding-top:0px; }
#subcontent .contentright .excerpt h2 { padding-bottom:2px; }
#subcontent p.contentText { width: 600px; }
p.contentText .imageRight { padding: 0pt 10px 0pt 25px; clear:right; margin: 10px -120px 0 0; }
p.contentText .imageLeft { padding: 0pt 10px 0pt 0; clear:left; }
p.contentText .nomargin { margin:0 !important; padding: 0 !important; }
.productfinder { background: url(images/prod-productfinder.jpg) left top no-repeat; }
.catalogi { background: url(images/prod-catalogi.jpg) left top no-repeat; }
.field1 { background-image:url(images/bg_field1.gif); background-repeat:repeat-x; background-position:left top; }
.field2 { background-image:url(images/bg_field2.gif); background-repeat:repeat-x; background-position:left top; }
.contactBlock1 { margin:0 0 15px 0; overflow:hidden; }
.contactBlock1 h2 { padding-bottom:3px; }
.contactBlock1 .form { clear: none; width: 413px; float: right; margin-top: 0.8em;}
.contactBlock1 .form fieldset{ clear: none; width: 400px; }
.contactBlock1 p { padding-top:0; }
.contactBlock1 .column { float:left; width:200px; }
.contactBlock2 { overflow:hidden; }
.contactBlock2 h1 { margin-left:20px; margin-top:20px; }
.contactBlock2 p { margin-left:20px; margin-bottom:10px; width:490px; }
.contactBlock2 .button { width:512px; text-align:right; padding-bottom:20px; }
.contactBlock2 .button a { width:152px; height: 25px; text-align: left; float: left; text-indent: -999999px; overflow: hidden; background-image: url('images/btn_verstuur.gif');}
.english .contactBlock2 .button a { width:115px; background-image: url('images/btn_verstuur_en.gif');}

#subcontent #arena { margin-bottom:10px; }
#subcontent a.bloklink { text-decoration: none; cursor: pointer; }
#submenu ul li.active a { font-weight: bold; }
.algemeneinfo { background: url(images/prod-meerinfo.jpg) left top no-repeat; }
.missieenvisie { background: url(images/prod-missie.jpg) left top no-repeat; }
.kolom_organisatie { background: url(images/prod-organisatie.jpg) left top no-repeat; }
.kolom_conduct { background: url(images/prod-conduct.jpg) left top no-repeat; }
.kolom_vacatures  { background: url(images/prod-vacatures.jpg) left top no-repeat; }
.kolom_gadgets  { background: url(images/prod-gadgets.jpg) left top no-repeat; }
.kolom_tassen  { background: url(images/prod-tassen.jpg) left top no-repeat; }
.kolom_snoep  { background: url(images/prod-snoep.jpg) left top no-repeat; }
.nieuwsbriefpic {float: right; }

.overviewCol { height: 238px; }

.RadTreeView ul, .RadTreeView ul li { font-size: 1.0em !important; }
.RadTreeView ul li { padding: 0 !important;  }
.RadTreeView ul li .rtIn { cursor: pointer; }

.largeTextArea { width: 484px; height: 100px !important; }
.errorField { border-color: Red; }