/* - - - - - - - - - - - - - - - - - - - -

			-- FleuraMetz FPP --
		Author:		Carlo Ravelli
		Info:		FleuraMetz FPP
		Notes:		Development
		Last Edit:	11 / 01 / 2013

- - - - - - - - - - - - - - - - - - - - -		

			-- Colours --

		#0b0b0b	-	Black
	
- - - - - - - - - - - - - - - - - - - - */	


/* --- R E S E T --- */

*{margin:0; padding:0;}
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video 
{margin:0; padding:0; border:0; outline:0; font-size:100%; vertical-align:baseline; background:transparent;font-family: Arial;font-style: normal;}
*:focus{outline:none;}
body {line-height:1;}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display:block;}
nav ul {list-style:none;}

blockquote, q {quotes:none;}
blockquote:before, blockquote:after, q:before, q:after {content:''; content:none;}
a {color: #cf003b; text-decoration: none; margin:0; padding:0; font-size:100%; vertical-align:baseline; background:transparent;}
a:hover{color:#222;}
ins {background-color:#ff9; color:#000; text-decoration:none;}
mark {color:#004990; font-style:italic; font-weight:bold;}
del {text-decoration: line-through;}
abbr[title], dfn[title] {border-bottom:1px dotted; cursor:help;}
table {border-collapse:collapse; border-spacing:0;}
hr {display: block;height: 1px;border: 0;border-top: 1px solid #CB003A;margin: 1em 0;padding: 0;float: left;width: 100%;}
input, select {vertical-align:middle;}
h1, h2, h3, h4, h5, h6{cursor:normal;}
a, button{cursor:pointer;}

.clearfix:after {content:"."; display:block; clear:both; visibility:hidden; line-height:0; height:0;} 
.clearfix {}
html[xmlns] .clearfix {display:block;}
* html .clearfix {height: 1%;}


/* --- B A S I C --- */

body{background:#fff;}
h1, h2, h3, h4, h5, h6{font-family:CG-Bold;}
h1{font-size: 63px;}
h2{font-size:30px;}
h3{font-size:24px;}
h4{font-size:20px;}
h5{font-size:16px;}
h6{font-size:14px;}
.pos-center{margin:0 auto;}
.pos-center.core{margin:0 auto; width:960px; margin-top:70px;}

.pagetitle{width:960px; margin:20px auto; color:#fff;}

/* --- H E A D E R --- */

header{width:100%; }
header .logo{width:960px; height: 140px; margin:0 auto; }
header .logo .the-logo{float:left; position:relative; background:url(images/logo.png) no-repeat; width: 500px; height: 100px; margin: 10px 0 0 -55px;}
header .logo .the-logo a{position:absolute; width:100%; height:100%;}
header .logo .the-logo a h1{text-indent:-9999px;}

header .logo .back-to{float:right;height:50px;margin-top: 74px;}
header .logo .back-to a{height:50px; display:block;}
header .logo .back-to a h4{color:#777;font-size: 15px;}
header .logo .back-to a h4:hover{color:#222;}

header .breadcrumbs{width:100%; min-height: 20px; height: auto;background:#cb003a;box-shadow: 0px 5px 10px -4px black;}
header .breadcrumbs nav{width:960px; margin:0 auto;height: 50px;}
header .breadcrumbs nav ul{float:left; display:block;}
header .breadcrumbs nav ul li{background:url(images/breadcrumb.png); font-size:13px; color:#fff; margin: 19px 5px 0px 5px; float:left; display:inline-block;}
header .breadcrumbs nav ul li img{border:1px solid rgba(255,255,255, .3)}
header .breadcrumbs nav ul li img:hover{border:1px solid rgba(255,255,255, .1)}
header .breadcrumbs nav ul li a{color:#fff; padding:0px 10px; display:block;}
header .breadcrumbs nav ul li a:hover{text-decoration:underline;}
.signout{float: right !important; width: 60px;}

/* --- M A I N --- */

.main{background: url(images/background-tulip.png) no-repeat; height:auto; min-height:600px; width: 100%;background-position: 0px -150px;display: inline-block; background-size:cover;}
.main .block{width:100%; float:left; margin-bottom: 40px;}
.main h1, .main h2, .main h3, .main h4{text-shadow:1px 1px 1px rgba(0,0,0,0.15);color: #fff;}


.block.intro .heading{float:left; width: 650px; height: auto; margin-bottom: 50px;}
.block.intro .heading h5{color:#fff;}
.block.intro .heading h1{color:#fff;font-size: 72px;}
.block.intro article.intro{float:left; width:500px; color:#fff;}
.block.intro article.intro h3{color:#CB003A; margin-bottom:20px;}
.block.intro.login .heading{width:100%;}

.main .pos-col{width: 350px; margin-right: 50px; float:left;}
.main .pos-col article{}
.main .pos-col article h3{color:#cb003a; margin-bottom:20px; display:block;}
.main .pos-col article p{margin-bottom:15px; display:block;color: #444;}
.main .pos-col article strong{color:#3fabb8;}
.main .pos-col tr{ height: 23px;}
.main .pos-col tr td:first-child{color: #3fabb8; font-weight:bold;padding-right: 30px;font-size: 13px; vertical-align:middle;}
table tr td:first-child{color:#3fabb8;font-weight:bold;font-size:13px;vertical-align:middle;}

.main .gift-box{background: #78B745; width:550px; float:right; border-radius: 3px;color:#fff;box-shadow: 1px 1px 20px -9px black, inset 0px 0px 14px -3px #A9FF64;border: 1px solid #66A334;}
.main .gift-box .top{padding:15px;}
.main .gift-box .top h3{width:290px; float:left;}
.main .gift-box .top .balance{float:right; width:200px; text-align:center;}

.main .gift-box .gifts{padding: 15px 15px 15px 17px;float: left;width: 520px;}
.main .gift-box .gifts li{float:left; /* width:27%; */ width:140px;margin: 3%; height: 145px;list-style:none;text-align: center;display: block;background: #fff;overflow: hidden;box-shadow: 1px 1px 10px -4px black; position: relative;}
.main .gift-box .gifts li img{width: auto;margin-bottom: 10px;max-height: 100%;height: auto;}
.main .gift-box .gifts li h6{margin:15px 0px 0px 0px;}

.main .sales-rep{float:right; width:550px; margin-top:17px;}
.main .sales-rep h3{color:#cf003b; /* font-size:18px; */ float:left;padding-bottom: 20px;}
.main .sales-rep .wrapper{float:right; width:200px;}

/* --- L O G I N --- */

.main .login-form{float:right; width: 250px; height:auto; background: #78b745;color: #fff;}
.main .login-form form .title{margin-left:-5px; float: left;width: 100%;margin-bottom: 15px;font-family: CG-Bold;}
.main .login-form form a input{width: 100px; height: auto; padding: 5px 10px 7px 10px;  background: #cf003b;margin: 0 auto;border: 1px solid #B10032;border-radius: 3px;display: block;color: #fff;font-family: CG-Bold;font-size: 15px;}
.main .login-form form a input:hover{cursor:pointer; }

/* --- S T A T S --- */

.chart, .highcharts-container, svg, rect{max-width:960px!important;width:960px!important;float:left;}
.chart:last-child{margin-bottom:20px!important;}
.__content_mid, .um_box_mid_content{width:960px;margin:0 auto;}
.um_box_mid_content_mid ul li{list-style:none;margin:20px 0;float:left;}
.um_box_mid_content_mid h1 {
    font-size: 24px;
    padding: 40px 0;
    padding-bottom: 20px;
    color: #CB003A;
    border-bottom: 1px solid #CB003A;
	}
.um_box_mid_content_mid dl{float:left;width:100%;background:#F4F4F4}
	.um_box_mid_content_mid dt{float:left;padding:0 20px;width:auto;}
	.um_box_mid_content_mid dd{float:left;padding:0 20px;border-left:1px solid #dbdbdb}
.um_box_mid_content_mid .button{
	background: #CA0039;
	padding: 5px 30px;
	border: 1px solid #6B0622;
	color: #FFF;
	font-family: "CG-Bold", Myriad, Lucida Grande, Verdana, Arial;
	display: block;
	font-size: 14px;
	float: left;
	clear: both;
	cursor: pointer;
	border-radius: 3px;
	text-shadow: rgba(0, 0, 0, 0.5) 0px -1px 0px;
	-moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0px 1px 1px rgba(0, 0, 0, 0.2);
	-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0px 1px 1px rgba(0, 0, 0, 0.2);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0px 1px 1px rgba(0, 0, 0, 0.2);
	-webkit-user-select: none;
	letter-spacing: 1px;
	font-weight: normal;
	margin-right: 10px;
	}
	.um_box_mid_content_mid .button:active{
	-moz-box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.3);
	-webkit-box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.3);
	box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.3);
	}
/* --- T A B L E --- */


.block.table{}

.clients{width:960px;box-shadow: 1px 1px 25px -15px black;}
.clients tr{ background: #fff; }
.clients thead tr{background: rgba(255, 255, 255, 0.75);}
.clients tr:nth-child(even){background:#f9f9f9;}
.clients td, .clients th{padding: 15px 10px;text-align: center;}
.clients thead tr th{color:#3fabb8;}
.clients tr:hover{background:#78b745; color:#fff; cursor:pointer;}
.clients thead tr:hover{background:rgba(255, 255, 255, 0.75);}

/* --- I D - C A R D --- */

.user-status{float:right; margin-top:25px; width:auto;}
.user-status h4{font-size:26px; width:200px; float:left; text-align:right; margin-right:15px;}
.user-status h1{font-size:26px; font-family:CG; float:left; text-align:right;}

.id-card{float:right; width: 500px; height: auto;}
.id-card .pos-title{width: 150px; height: 35px;float: left;}
.id-card .pos-title h4{text-align: right; width:100%; height: 30px;font-size: 18px;color: #fff;text-shadow: 1px 1px 3px rgba(0,0,0,0.3);}
.id-card .pos-card{height: 140px; width: 300px;  float: right;}
.id-card .pos-card .logo-small{background:url(images/logo-small.png) no-repeat;}
.id-card .pos-card h1.fancy{font-family: CG; color:#cb003a; float:right; width: 280px; height: 40px;text-align: right;font-size: 50px;padding: 20px 0px 0px 0px;}
.id-card .pos-card address{padding:30px 10px 0px 10px; width:160px; font-size:13px; display: none;float:left;}
.id-card .pos-card address td{padding-right:10px; width:90px; font-size:11px;}
.id-card .pos-card .id-code{float:right; display: none;padding:55px 10px 0px 10px;}

/* --- F O O T E R --- */

footer{width:960px; margin:50px auto;}
footer .menu{border-top: 1px solid #EEEEEE; width:755px; margin:0 auto;float:left;}
footer .menu ul{margin:0 auto; width: 100%; display:inline-block;}
footer .menu ul a{
	float: left; 
	font-size: 12px;
	padding: 10px 40px;
	box-shadow: inset -4px 4px   30px -20px black;
	border-right: 1px solid #eee;
	text-align: center;
	}


/* Aanpassingen Sam (14-1-13) */

/*Tabel*/
#index table{
	width:76%; 
	margin: 30px auto; 
	font-size: 14px;
	word-wrap:break-word;
	overflow: auto;
	}
	#index table th{
		color: #009eac; 
		font-weight: normal;
		font-family: CG-Bold, Myriad, Lucida Grande, Verdana, Arial;
		padding:0 6px 10px;
		text-align: center;
		vertical-align: middle;
		}
		#index table th:nth-child(1),
		#index table th:nth-child(2){text-align: left;}
		
	#index table td{
		color: #171a1a;
		font-family: Myriad, Lucida Grande, Verdana, Arial;
		font-size: 12px;
		vertical-align: middle;
		text-align: left;
		padding-top:0;
		padding-bottom:0;
		height:36px;
		}
		#index table:nth-child(4){padding-right:5%;}
		
		#index table td.CustomerNr,
		#index table td.Name{font-weight: bold; text-align: left;}
		
		#index table td.Name{width:250px;}
		
		#index table .point_updater{
			background: url(../images/edit_icon.png) no-repeat;
			display: block;
			height:11px;
			width:11px;
			text-indent: -5555px;
			float: right;
			}
	
		#index .Email{width:162px; padding-right:0;}
			#index .Email .icon{
				background: url(../images/email_prod_btn.jpg) no-repeat;
				display: block;
				height:36px;
				line-height: 36px;
				width:132px;
				font-family: GC, Myriad, Lucida Grande, Verdana, Arial;
				font-size:11px;
				color: #fff;
				text-shadow: 1px 1px 3px #12b9c7;
				padding:0 0 0 30px;
				margin-bottom:0;
				border:0;
				border-radius: 0;
				text-indent: 0;
				}

.active-row td{background:#79b748; color: #fff;}
#index table th div{float: left;}
	#index table th .title{position: relative; display: inline-block; padding-right:20px;}
	#index table th .orderNav{position: absolute;right:0; top:50%; width:10px; margin-top:-8px;}
	
#index table th a{width:8px; height:8px; display: block;}
	#index table th .up{background: url(../images/admin_up.png) no-repeat;}
	#index table th .down{background: url(../images/admin_down.png) no-repeat;}

@media screen and (min-width: 1280px) {
	#index table{width:960px;}
	}	
/*edit box*/
.fancybox-overlay{background: rgba(255,255,255,0.75) !important;}

#pointEditor,#emailBox{font-family: "GC",Lucida Grande, Helvetica, Arial, sans-serif;}
	#pointEditor .customer{
		font-family: "CG-Bold", Myriad, Lucida Grande, Verdana, Arial;
		font-size:26px;
		color: #009eaa;
		margin-bottom:10px;
		}
	#pointEditor label{
		font-family: Myriad, Lucida Grande, Verdana, Arial; 
		text-transform: uppercase;
		color: #303030;
		width:75px;
		float: left;
		}
	#emailBox input, #emailBox textarea, #pointEditor input, #pointEditor textarea{
		float: left;
		width:420px;
		border: 1px solid #acacac;
		border-radius: 3px;
		padding:5px;
		background: #fff;
		}
	#pointEditor textarea, #emailBox textarea{ 
		height:100px; 
		color: #303030; 
		resize: none; 
		font-size:12px; 
		font-weight: normal; 
		text-shadow: none;
		}
	#emailBox input{margin-bottom:10px;}
	
	#pointEditor .submitPoints, #emailBox .submitMessage, #UserLoginForm input[type="submit"], #UserRegisterForm input[type="submit"]{
		background: #ca0039; 
		padding: 5px 30px; 
		border: 1px solid #6b0622;
		color: #fff;
		font-family: "CG-Bold", Myriad, Lucida Grande, Verdana, Arial;
		display: block;
		font-size:14px;
		text-transform: lowercase;
		margin-top:10px;
		float: right;
		clear: both;
		cursor: pointer;
		border-radius: 3px;
		}
		
.um_box_mid_content_top	{display: none;}

	/*flashmsg*/
	#flashMessage{
		position: relative;
		background: url("../images/success_icon.png") no-repeat 10px center #79B748;
	    border: 0 none;
	    color: #fff;
	    margin: 20px auto 0;
	    padding: 10px 10px 10px 40px;
	    text-shadow: 1px 1px 2px #367f0c;
	    width: 905px;
	    }
	    #flashMessage .close{
	    	display: block;
	    	position: absolute;
	    	right:5px;
	    	top:5px;
	    	height:16px;
	    	width:16px;
	    	background: url(../images/close_btn.png) no-repeat;
	    	}
/*login/register form*/				
	.intro p{line-height: 125%; font-family: Arial, Helvetica, sans-serif; color: #373737;}
	.main .login-form{border-radius: 3px; padding:20px;}
			
		form#UserLoginForm > .wrapper, 
		form#UserRegisterForm > .wrapper{margin-bottom:10px; padding:0; position: relative; height:30px;}
		
		#UserLoginForm > .wrapper label,
		#UserRegisterForm > .wrapper label{
			float: left; 
			width:88px; 
			height:28px; 
			line-height: 28px;
			font-family: "CG-Bold", Myriad, Lucida Grande, Verdana, Arial;
			}
			#UserLoginForm > .wrapper figure,
			#UserRegisterForm > .wrapper figure{font-family: Lucida Grande, Helvetica, Arial, sans-serif;}
			
			form .input.select {padding: 0;}
				form .input.select select {
				    width: 148px;
				    border: 1px solid #305215;
				    font-size: 14px;
				    height: 28px;
				    color:#305215;
				    }
				form .input.select label {
					width: 88px;
					float: left;
					padding-top:6px;
					color:#fff;
					}			
		#UserLoginForm > .wrapper input,
		#UserRegisterForm > .wrapper input{
			width:138px; 
			padding:0 4px; 
			margin-bottom: 10px;
			border: 1px solid #305215;
			border-radius: 2px;
			font-size: 14px;
			font-family: Lucida Grande, Helvetica, Arial, sans-serif;
			height:28px;
			float: left;
			clear: right;
			}
		
		#UserLoginForm input[type="submit"],
		#UserRegisterForm input[type="submit"]{
			/* width:130px;  
			margin:0 auto; */
			display: block; 
			float: none;
			width:148px;
			max-width:148px;
			margin:0 0 0 80px;
			}
		
		.login-form .wrap-the-button{float: right; width: auto; font-size:12px;}
			.login-form .wrap-the-button:after{content: " »";}
		
		#UserLoginForm > .wrapper:nth-of-type(3),
		#UserRegisterForm > .wrapper:nth-of-type(3){margin-bottom:0; height:30px;}
		
		#UserRegisterForm label.inline{margin-bottom:10px; cursor: pointer; line-height:18px;}
		#UserRegisterForm label.inline:first-of-type{margin-top:20px;}
		
		#UserRegisterForm label.inline,
		#UserRegisterForm label.inline a{font-size:12px;}
		
		#UserRegisterForm label.inline a{color: #fff; text-decoration: underline;}
		#UserRegisterForm label.inline a:hover{text-decoration: none;}

	/*error*/	
	#UserLoginForm > .wrapper input.form-error{border: 1px solid red;}	
	form .error-icon{
		display: block;
		position: absolute;
		right:5px;
		top:5px;
		background: url(../images/error_warning.png) no-repeat;
		height:20px;
		width:20px;
		cursor: pointer;
		z-index: 20;
		}
		
	form .error-message{
		font-size:12px; 
		font-family: Arial, Helvetica, sans-serif;
		background: #fff;
		border: 1px solid #ddd;
		padding:5px;
		width:75px;
		display: none;
		position: absolute;
		right:-29px;
		bottom:27px;
		z-index: 21;
		}
/*homepage?*/
.pos-col .intro{overflow: hidden;}
.arrowRight{display: block; float: right; clear: right;}
	.arrowRight:after{content: "»"; margin-left:5px;}

.intro .arrowRight{margin-bottom:7px;}	
.contact-information{clear: both; margin-top:83px;}

	.gifts div{
		color: #fff; 
		text-shadow: 1px 1px 3px #335715; 
		text-align: center; 
		box-shadow: inset 1px 1px 2px #335715;
		position: absolute;
		top:0;
		left:0;
		background: rgba(76,123,38, 0.7); 
		background: url(/img/products/gifts-hover.png);
		display: none;
		height:100px;
		width:90%;
		padding: 45px 5% 0;
		}
	.gifts .points{font-size:22px;}
	
	.giftshadow{box-shadow: 1px 1px 10px -4px black;}
	
/*footer*/
footer .menu{width:100%;}
	footer .menu ul{
		width:auto; 
		float: right; 
		padding: 30px 80px 30px 0;
		padding-top:30px;
		background: url(../images/footer_logo.jpg) no-repeat center right;
		padding-right:80px;
		}
	footer .menu ul a{display: block;padding:5px 0;float: none;border:0;box-shadow: none;text-align: right;}	

/*nav*/
.breadcrumbs nav{position: relative;}
header .breadcrumbs nav ul li a{padding:0; margin-right:5px;}

.breadcrumbs li:last-child{position: absolute; right:0; margin-right:0;}
header .breadcrumbs li:last-child a{ margin-right:0;}
.breadcrumbs li:first-child{margin-left:0;}