/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : 20-Aug-2014, 16:01:07
    Author     : geoff_000
*/

@font-face{
	font-family:"Delivery";
	font-style: normal;
	font-weight: 400;
	src:
		local(""),
		url("../fonts/Delivery/Web/WOFF/Delivery_W_Rg.ae898b768b6e.woff") format("woff");
}
@font-face{
	font-family:"Delivery";
	font-style: normal;
	font-weight: 700;
	src:
		local(""),
		url("../fonts/Delivery/Web/WOFF/Delivery_W_Bd.8f2597816571.woff") format("woff");
}
@font-face{
	font-family:"Delivery";
	font-style: normal;
	font-weight: 800;
	src:
		local(""),
		url("../fonts/Delivery/Web/WOFF/Delivery_W_CdBlk.95db25907405.woff") format("woff");
}
@font-face{
	font-family:"DeliveryArabic";
	font-style: normal;
	font-weight: 400;
	src:
		local(""),
		url("../fonts/DeliveryArabic/Web/WOFF/Delivery_Arabic_W_Rg.43903af2f5b9.woff") format("woff");
}
@font-face{
	font-family:"DeliveryViet";
	font-style: normal;
	font-weight: 400;
	src:
		local(""),
		url("../fonts/DeliveryViet/Web/WOFF/Delivery_Viet_W_Rg.2370cecaacd2.woff") format("woff");
}

/* Generic global styles */
	body,td,th,input, textarea {
		font-family: "Delivery", Helvetica, sans-serif;
		font-size: 12px;
		font-size: 12px;
	}
	html, body {
		background-color: #E8E1D7;
		margin: 0 auto;
		padding:0;
		color: #666666;
		text-rendering: optimizeLegibility;
		-webkit-font-smoothing: antialiased;
		-webkit-font-smoothing: antialiased !important;
		line-height: 20px;
		height:100%;
		min-height: 100%;
	}
	
/* Selections */
	::selection { background:#c3effd !important; color:#000;  }
	::-moz-selection  { background:#c3effd !important; color:#000;  }

/* Headings */
	h1, h2, h3, h4, h5, h6{
		color:#000;
		padding:0;
		margin:0;
		font-family: "Delivery", Helvetica, sans-serif;
		font-weight: normal;
	}
	h1{ 
        color:#D40511;
		font-size:24px;
        font-weight: bold;
		line-height:26px;
        text-transform: uppercase;
	}
	h2{ 
		font-size:20px; 
		line-height:22px;
	}
	h3{ 
		font-size:16px; 
		line-height: 18px;
	}
	h4{ 
		font-size:14px; 
		line-height: 16px;
	}
	h5{ 
		font-size:13px; 
		line-height: 15px;
	}
	h6{ 
		font-size:12px; 
		line-height: 14px;
	}
	
	.headerIconBlock{
		padding-top:20px;
		padding-bottom:20px;
		position: relative;
		color: inherit;
		text-decoration: none;
		transition: box-shadow 0.25s;
	}
	.headerIconBlock > .icon-circular{
		position: absolute;
		top:20px;
		left:5px;
		transition: color 0.25s, border-color 0.25s;
	}
	a.headerIconBlock:hover,
	a.headerIconBlock:focus{
		color:inherit;
		text-decoration: none;
		box-shadow: inset 0 2px 10px rgba(0,0,0,0.2);
		background-color: #f9f9f9;
	}
	
/* Font size */
	.noSize{
		font-size: 0;
	}
	.small{
		font-size: 11px;
	}
	.smaller{
		font-size: 10px;
	}
	.large{
		font-size:120%;
	}
	.larger{
		font-size:150%;
	}
/* Links */
	a{
		color: #c00;
		text-decoration: none;
        overflow-wrap: break-word;
	}
	a:hover,
	a:focus{
		text-decoration: underline;
	}
	
	a.emphasise{
		color: #c00 !important;
	}
	
	a.more,
	a.back,
	a.alert{
		display:inline-block;
		position: relative;
		color:#000;
		margin-left: 14px;
	}
	a.more:hover,
	a.back:hover,
	a.alert:hover{
		color:#c00;
	}
	a.more:before,
	a.back:before{
		font-family: "iconset1";
		content: "\e63a";
		color:#c00;
		font-weight: bold;
		position: absolute;
		left:-14px;
	}
	a.back{
		margin-left: 18px;
	}
	a.back:before{
		content: "\e637";
		color:#000;
		left:-16px;
	}
	a.alert{
		margin: 0;
		padding-left: 24px;
		background-repeat: no-repeat;
		background-position: left center;
	}

/*
 * inline stuff
 */
	.light{
		opacity: .75;
		-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
		filter: alpha(opacity=70);
	}
	.lighter{
		opacity: .4;
		-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
		filter: alpha(opacity=60);	
	}
	.pointer{
		cursor: pointer;
	}
	
/* Buttons */
	.button,
	.button-select{
		display:inline-block;
		background-color:#efefef;
		white-space: nowrap;
		line-height: 30px;
		height:32px;
		border:1px solid #cecece;
		color:#565656;
		font-size: 12px;
		padding:0 10px;
		text-decoration: none;
		border-radius: 3px;
		/* gradients */
		background: -moz-linear-gradient(top, #ffffff 0%, #efefef 100%);
		background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#efefef));
		background: -webkit-linear-gradient(top, #ffffff 0%,#efefef 100%);
		background: -o-linear-gradient(top, #ffffff 0%,#efefef 100%);
		background: -ms-linear-gradient(top, #ffffff 0%,#efefef 100%);
		background: linear-gradient(to bottom, #ffffff 0%,#efefef 100%);
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#efefef',GradientType=0 );
		-moz-box-sizing: border-box; 
		-webkit-box-sizing: border-box; 
		box-sizing: border-box;
	}
	.button:hover{
		border:1px solid #a3a3a3;
		text-decoration: none;
		box-shadow: 0 1px 3px rgba(0,0,0,0.2);
	}
	.button:active{
		box-shadow: inset 0 2px 3px  rgba(0,0,0,0.2);
		border:1px solid #cecece;
		background:#efefef;
	}
	.button.button-proceed{
		color:#fff;
		background-color:#a90000;
		/* gradients */
		background: -moz-linear-gradient(top, #d50000 0%, #a80000 100%);
		background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#d50000), color-stop(100%,#a80000));
		background: -webkit-linear-gradient(top, #d50000 0%,#a80000 100%);
		background: -o-linear-gradient(top, #d50000 0%,#a80000 100%);
		background: -ms-linear-gradient(top, #d50000 0%,#a80000 100%);
		background: linear-gradient(to bottom, #d50000 0%,#a80000 100%);
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d50000', endColorstr='#a80000',GradientType=0 );
		border-color: #ffc358;
		line-height:32px;
		border:0;
		padding:0 11px;
	}
	.button.button-proceed:hover{
		box-shadow: 0 1px 3px rgba(0,0,0,0.8);
	}
	.button.button-proceed:active{
		box-shadow: inset 0 2px 3px  rgba(0,0,0,0.6);
		background: #bc0000;
	}
	.button.button-action{
		color:#333;
		background-color:#ffa92f;
		/* gradients */
		background: -moz-linear-gradient(top, #fee28a 0%, #ffa92f 100%);
		background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fee28a), color-stop(100%,#ffa92f));
		background: -webkit-linear-gradient(top, #fee28a 0%,#ffa92f 100%);
		background: -o-linear-gradient(top, #fee28a 0%,#ffa92f 100%);
		background: -ms-linear-gradient(top, #fee28a 0%,#ffa92f 100%);
		background: linear-gradient(to bottom, #fee28a 0%,#ffa92f 100%);
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fee28a', endColorstr='#ffa92f',GradientType=0 );
		line-height:32px;
		border:0;
		padding:0 11px;
		color:#000;
	}
	.button.button-action:hover{
		box-shadow: 0 1px 3px rgba(0,0,0,0.8);
	}
	.button.button-action:active{
		box-shadow: inset 0 2px 3px  rgba(0,0,0,0.3);
		background:#ffc054;
	}
	.button.button-green{
		color:#fff;
		background-color:#a90000;
		/* gradients */
		background: -moz-linear-gradient(top, #44a831 0%, #30971d 100%);
		background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#44a831), color-stop(100%,#30971d));
		background: -webkit-linear-gradient(top, #44a831 0%,#30971d 100%);
		background: -o-linear-gradient(top, #44a831 0%,#30971d 100%);
		background: -ms-linear-gradient(top, #44a831 0%,#30971d 100%);
		background: linear-gradient(to bottom, #44a831 0%,#30971d 100%);
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#44a831', endColorstr='#30971d',GradientType=0 );
		border-color: #2e8d1c;
	}
	.button.button-green:hover{
		box-shadow: 0 1px 3px rgba(0,0,0,0.8);
	}
	.button.button-green:active{
		box-shadow: inset 0 2px 3px  rgba(0,0,0,0.6);
		background: #3a9f27;
	}
	.button:focus,
	.button.focus,
	.dropdown.open .button{
		outline: none;
		border:1px solid #059eff !important;
		box-shadow: 0 0 8px #059eff !important;
		text-decoration: none;
		padding:0 10px;
		line-height: 30px;
	}
	
	.button > .icon-arrow-right4{
		margin-left:-3px;
	}
	
	.button-select{
		background: none;
		background-color:#fff;
		border:1px solid #cecece;
	}
	
	.button-bar,
	.button-bar li{
		list-style: none;
		padding:0;
		margin:0;
		display:inline-block;
	}
	.button-bar {
		font-size: 0rem;
		white-space: nowrap;
	}
	.button-bar li{
		font-size: 1rem;
	}
	.button-bar .button{
		border-radius: 0;
		border-left-width: 0;
	}
	.button-bar .first .button{
		border-left-width: 1px;
	}
	.button-bar .first .button{
		border-top-left-radius: 3px;
		border-bottom-left-radius: 3px;
	}
	.button-bar .last .button{
		border-top-right-radius: 3px;
		border-bottom-right-radius: 3px;
	}

/* Dropdown */
	.dropdown {
		display:inline-block;
		zoom:1;
		position:relative;
		vertical-align:middle;
		height: 32px;
		z-index:1;
	}

	.dropdown > .link {
		cursor: pointer;
		z-index: 2;
	}

	.dropdown > .content {
		position: absolute;
		border: 1px solid #a3a3a3;
		border-top-width: 0px;
		z-index: 1;
		background-color: #efefef;
		display: none;
		right: 0;
		top: 31px;
		border-bottom-right-radius: 3px;
		border-bottom-left-radius: 3px;
		box-shadow: 1px 1px 2px rgba(0, 0, 0, 0) !important;
	}

	.dropdown.open {
		z-index: 2;
	}

	.dropdown.open > .link {
		border-bottom-width: 0px;
		border-bottom-right-radius: 0px;
		border-bottom-left-radius: 0px;
		box-shadow: 1px 1px 2px rgba(0, 0, 0, 0) !important;
	}

	.dropdown.open > .content {
		display: block;
		border-color: #059eff;
	}


/*
 * bubble
 * --------
 */

	.bubble {
		display: none;
	    background-color: #fff;
	    position: relative;
	    top: 0;
	    left: 0;
	    text-align: left;
	    margin: 0 auto auto auto;
	    -webkit-box-shadow: 0 1px 10px rgba(0,0,0,.35);
	    box-shadow: 0 1px 10px rgba(0,0,0,.35);
    }
	.bubble > .triangleWrapper {
	    position: absolute;
	    left: 50px;
	    top: -10px;
	    width: 16px;
	    height: 10px;
	    overflow: hidden;
    }
	.bubble > .footer {
	    border-bottom-right-radius: 3px;
	    border-bottom-left-radius: 3px;
    }
	.bubbleBody {
		min-width: 120px;
	}
	.triangleWrapper > .triangle {
	    width: 10px;
	    height: 10px;
	    background: white;
	    -webkit-box-shadow: -1px -1px 3px rgba(0,0,0,.15);
	    box-shadow: -1px -1px 3px rgba(0,0,0,.15);
	    -webkit-transform: rotate(45deg);
	    -moz-transform: rotate(45deg);
	    -ms-transform: rotate(45deg);
	    -o-transform: rotate(45deg);
	    transform: rotate(45deg);
	    position: relative;
	    top: 5px;
	    left: 3px;
    }
	.triangleWrapper.bottomLeft > .triangle,
	.triangleWrapper.bottomRight > .triangle,
	.triangleWrapper.bottomCenter > .triangle {
	    top: -5px;
	    -webkit-box-shadow: 0 1px 3px rgba(0,0,0,.15);
	    box-shadow: 0 1px 3px rgba(0,0,0,.15);
    }
	.triangleWrapper.topLeft,
	.triangleWrapper.bottomLeft {
	    left: 50px;
    }
	.triangleWrapper.topRight,
	.triangleWrapper.bottomRight {
	    left: auto;
	    right: 50px;
    }
	.triangleWrapper.topCenter,
	.triangleWrapper.bottomCenter {
	    left: 50%;
	    margin-left: -8px;
    }
	.triangleWrapper.bottomLeft,
	.triangleWrapper.bottomRight,
	.triangleWrapper.bottomCenter {
	    top: auto;
	    bottom: -10px;
    }
	.triangleWrapper.leftTop > .triangle,
	.triangleWrapper.leftBottom > .triangle,
	.triangleWrapper.leftCenter > .triangle {
	    top: 3px;
	    left: 4px;
    }
	.triangleWrapper.leftTop,
	.triangleWrapper.leftBottom,
	.triangleWrapper.leftCenter {
	    left: -10px;
	    height: 16px;
	    width: 10px;
    }
	.triangleWrapper.leftTop,
	.triangleWrapper.rightTop {
	    top: 24px;
    }
	.triangleWrapper.leftBottom,
	.triangleWrapper.rightBottom {
	    top: auto;
	    bottom: 24px;
    }
	.triangleWrapper.leftCenter,
	.triangleWrapper.rightCenter {
	    top: 50%;
	    margin-top: -8px;
    }
	.triangleWrapper.rightTop,
	.triangleWrapper.rightBottom,
	.triangleWrapper.rightCenter {
	    left: auto;
	    right: -10px;
	    height: 16px;
	    width: 10px;
    }
	.triangleWrapper.rightTop > .triangle,
	.triangleWrapper.rightBottom > .triangle,
	.triangleWrapper.rightCenter > .triangle {
	    top: 3px;
	    left: -6px;
    }
	.scrollingBubbleBody{
		max-height:300px;
		overflow: auto;
	}


/* Paragraphs */
	p{
		padding:0;
		margin:0 0 20px 0;
	}
	p.last{
		margin-bottom:0;
	}
	
/* Tables */
	table{
		border-collapse: collapse;
	}
	table th.smallpad,
	table td.smallpad{
	padding:4px;
	}
	table th,
	table td{
		padding:8px;
		line-height:16px;
	}
	table.data{
		width:100%;
	}
	table.data td,
	table.data th{
		border-bottom: 1px solid #ebebeb;
		font-size: 12px;
		height: 50px;
	}
	table.data th{
		font-weight: normal;
		text-align: left;
		border-bottom: 1px solid #aaa;
		text-transform: uppercase;
		font-size: 10px;
		font-weight: bold;
		
	}
	table.data th.sortedAsc,
	table.data th.sortedDesc{
		border-bottom: 3px solid #ffcc00;
		position: relative;
		padding-right: 30px;
	}
	
	table.data th.sortedAsc:after,
	table.data th.sortedDesc:after{
		font-family: 'iconset1';
		speak: none;
		font-style: normal;
		font-weight: normal;
		font-variant: normal;
		text-transform: none;
		line-height: 1;

		/* Better Font Rendering =========== */
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
		vertical-align: middle;
		content: "\e635";
		position: absolute;
		right:10px;
		top:50%;
		font-size: 14px;
		width:14px;
		height:14px;
		margin-top:-7px;
	}
	table.data th.sortedDesc:after{
		content: "\e634";
	}
	
	th.sortable:hover{
		border-bottom: 3px solid #aaa;
	}
	
	table.data tbody tr:hover{
		background-color: #f9f9f9;
	}
	table.data tbody tr.rowSelected{
		background-color: #fffae5;
		color:#333;
	}
	table.data tr:last-child td{
		border:0;
	}
	table.data th.numeric,
	table.data td.numeric{
		text-align: right;
		white-space: nowrap;
	}
	.price{
		font-size: 16px;
		font-family: "Delivery", Helvetica, sans-serif;
	}
	.largePrice{
		font-size: 24px;
		font-family: "Delivery", Helvetica, sans-serif;
	}
	table td .total{
		color: #333;
	}
	table td .disputed,
	table td .overdue{
		background-color: #cc0000;
		color:#fff;
		display:inline-block;
		border-radius:3px;
		padding:3px 7px;
	}
	table td .disputed{
		background-color: #888;
	}
	.table{
		display:table;
		width:100%;
	}
	.table > .cell{
		display: table-cell;
		vertical-align: middle;
	}
	.table > .cell.full-width {
		width: 100%;
	}
	
	table.data .showOnHover{
		display:none;
	}
	table.data tr:hover .hideOnHover{
		display:none;
	}
	table.data tr:hover .showOnHover{
		display:block;
	}
	table.data tr:hover .button.showOnHover{
		display:inline-block;
	}
	table.data .columnPaid,
	table.data .columnTotal,
	table.data .columnBalance{
		min-width:130px;
	}
	
	table.data a{
		color: inherit;
	}
	
	.columnCheckbox{
		width:45px;
	}
	.columnIconOnly{
		width:30px;
	}
	
	.disabled{
		opacity: 0.4;
		color:#aaa;
	}
	
/* Data table options */
	.checkboxOptions{
		background-color: #f9f9f9;
		border-top:1px solid #ebebeb;
		border-bottom:1px solid #ebebeb;
		padding:15px 15px 15px 40px;
		background-image: url("../images/icon-withselected.8c515feb922e.gif");
		background-repeat: no-repeat;
		background-position: 15px 25px;
	}
	.checkboxOptions .options{
		display:none;
		white-space: nowrap;
	}
	.checkboxOptions.hasOptions .options{
		display:block;
	}
	.checkboxOptions.hasOptions .placeholder{
		display: none;
	}
	.checkboxOptions .options .button {
		margin-right:5px;
	}
	.checkboxOptions .options .button:last-child {
		margin-right: 0px;
	}

	.checkboxOptions .placeholder{
		display: inline-block;
		line-height: 32px;
		white-space: nowrap;
	}
	
/* Forms & input fields */
	label{
		display:inline-block;
		margin: 3px;
	}
	
	.textfield,
	.textarea{
		position:relative;
		height:32px;
		background-color:#fff;
		border:1px solid #cecece;
		border-radius: 3px;
		padding:0 10px;
		outline:none;
		display: block;
		width:100%;
	}
	.textfield.focus,
	.textfield:focus,
	.textarea.focus,
	.textarea:focus{
		border:1px solid #059eff;
		box-shadow: 0 0 8px #059eff;
	}
	
	.textarea{
		line-height:18px;
		padding: 8px 10px;
	}
	
	.relative{
		position: relative;
	}
	.fieldContainer{
		padding:14px;
	}
	.fieldArea{
		padding:6px;
	}

	.textfield.error {
		border-color: #cc0100;
		z-index: 2;
	}

	.errorMsg {
		height: 0px;
		overflow: hidden;
		background-color: #cc0100;
		color: #ffffff;
		padding: 0px;
		margin-top: -5px;
		border-radius: 0px 0px 3px 3px;
		z-index: 1;
	}
	.textfield.error + .errorMsg {
		padding: 13px 10px 8px;
		height: auto;
	}


/* Borders */
	.bordered{
		border: 1px solid #e7e6e3;
	}
	.borderTop{
		border-top: 1px solid #e7e6e3;
	}
	.borderLeft{
		border-left: 1px solid #e7e6e3;
	}
	.borderBottom{
		border-bottom: 1px solid #e7e6e3;
	}
	.borderRight{
		border-right: 1px solid #e7e6e3;
	}
/*
	Clear Fix: clear-after
	---------
	This is really handy!!!
	instead of doing this:
		<div class="float-left"></div>
		<div class="clear"></div>
	do this:
		<div class="float-left clear-after"></div>
*/
	.clear-after:after,
	.clearfix:after {
		content: ".";
		display: block;
		height: 0;
		clear: both;
		visibility: hidden;
    }
	.clear-after,
	.clearfix{
		display:block;
		zoom:1;
		position:relative;
	}
	
/* padding */
	.nopadb{ padding-bottom: 0; }
	.nopadt{ padding-top: 0; }
	.halfpad{
		padding: 5px;
	}
	.stdpad{
		padding:10px;
	}
	.stdpadv {
		padding: 10px 0;
	}
	.stdpadv2 {
		padding: 5px 0;
	}
	.stdpadh{
		padding-left:10px;
		padding-right:10px;
	}
	.stdpadl{
		padding-left:10px;
	}
	.doublepad{
		padding:20px;
	}
	.doublepadh{
		padding-left:20px;
		padding-right:20px;
	}
	.doublepadv{
		padding-top:20px;
		padding-bottom:20px;
	}
	
/* margins */
	.halfmar{
		margin: 5px;
	}
	.stdmar{
		margin:10px;
	}
	.stdmarb{
		margin-bottom: 10px;
	}
	.stdmarr{
		margin-right: 10px;
	}
	.doublemarb{
		margin-bottom: 20px;
	}
/* Labels */
	.label,
	.iconLabel{
		display:inline-block;
		white-space: nowrap;
		vertical-align: middle;
	}
	.iconLabel{
		margin-left:5px;
	}

/* Alignment */
	.vAlignMiddle{
		vertical-align: middle !important;
	}
	.vAlignTop{
		vertical-align: top !important;
	}
	.vAlignBottom{
		vertical-align: bottom !important;
	}
	.alignLeft{
		text-align: left !important;
	}
	.alignCenter{
		text-align: center !important;
	}
	.alignRight{
		text-align: right !important;
	}

/* Tags */
	.redTag{
		background-color:#cc0100;
		display:inline-block;
		font-family: "Delivery", Helvetica, sans-serif;
		color:#fff;
		font-size: 16px;
		padding:5px 8px;
	}
	.greyTag{
		background-color: #ebebeb;
		display:inline-block;
		padding:5px 8px;
	}
	
/* backdrops */
	.whiteBackdrop{
		background-color:#fff;
	}
	.greyBackdrop{
		background-color: #f9f9f9;
	}
	.yellowBackdrop{
		background-color:#ffcc00;
		color:#333;
	}
	
/* Icons */
	@font-face {
		font-family: 'iconset1';
		src:url("../fonts/iconset1.3f70cd17abc4.eot?-yyxux9");
		src:url("../fonts/iconset1.3f70cd17abc4.eot?#iefix-yyxux9") format('embedded-opentype'),
			url("../fonts/iconset1.a6a0b6a05510.woff?-yyxux9") format('woff'),
			url("../fonts/iconset1.a21bf29a7fdf.ttf?-yyxux9") format('truetype'),
			url("../fonts/iconset1.d5492ba47ff7.svg?-yyxux9#icomoon") format('svg');
		font-weight: normal;
		font-style: normal;
	}
	
	@-moz-keyframes spin {
	  0% { -moz-transform: rotate(0deg); }
	  100% { -moz-transform: rotate(359deg); }
	}
	@-webkit-keyframes spin {
	  0% { -webkit-transform: rotate(0deg); }
	  100% { -webkit-transform: rotate(359deg); }
	}
	@-o-keyframes spin {
	  0% { -o-transform: rotate(0deg); }
	  100% { -o-transform: rotate(359deg); }
	}
	@-ms-keyframes spin {
	  0% { -ms-transform: rotate(0deg); }
	  100% {  -ms-transform: rotate(359deg); }
	}
	@keyframes spin {
	  0% { transform: rotate(0deg); }
	  100% { transform: rotate(359deg); }
	}

	[class^="icon-"], [class*=" icon-"]{
		font-family: 'iconset1';
		speak: none;
		font-style: normal;
		font-weight: normal;
		font-variant: normal;
		text-transform: none;
		line-height: 1;

		/* Better Font Rendering =========== */
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
		vertical-align: middle;
	}
	.fieldicon{
		display: block;
		position: relative;
	}
	.fieldicon .textfield{
		padding-left:30px;
	}
	.fieldicon:before{
		width:30px;
		height:32px;
		content: ' ';
		display: block;
		position: absolute;
		top:0;
		left:0;
		z-index:3;
		font-family: 'iconset1';
		speak: none;
		font-style: normal;
		font-weight: normal;
		font-variant: normal;
		text-transform: none;
		line-height: 1;
		font-size: 16px;
		text-align: center;
		line-height: 32px;

		/* Better Font Rendering =========== */
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
		vertical-align: middle;
	}
	.icon-x16{ font-size: 16px; }
	.icon-x18{ font-size: 18px; }
	.icon-x24{ font-size: 24px; }
	.icon-x32{ font-size: 32px; }
	.icon-x48{ font-size: 48px; }
	.icon-x64{ font-size: 64px; }
	
	.icon-circular{
		font-size:28px;
		color:#fff;
		width:48px;
		height:48px;
		border:2px solid #c00;
		border-radius: 24px;
		display: inline-block;
		line-height:44px;
		text-align: center;
		background-color: #c00;
	}
	.icon-avatar{
		font-size:18px;
		color:#a3a3a3;
		width:32px;
		height:32px;
		border-radius: 16px;
		display: inline-block;
		line-height:32px;
		text-align: center;
		background-color: #ffcc00;
		color:#cc0100;
	}
	.icon-attention{
		background-color:#cc0000;
		color:#fff;
		width:16px;
		height:16px;
		border-radius: 8px;
		line-height: 16px;
		text-align: center;
		font-size: 20px;
		display: inline-block;
	}
    .icon-attention-default{
        font-size: 48px;
    }
	.icon-statistics:before {
		content: "\e646";
	}
	.icon-attention:before{
		left: -2px;
		position: relative;
	}
	.icon-alarm:before {
		content: "\e645";
	}
	.icon-print:before {
		content: "\e600";
	}
	.icon-card:before {
		content: "\e601";
	}
	.icon-home:before {
		content: "\e602";
	}
	.icon-office:before {
		content: "\e603";
	}
	.icon-pencil:before {
		content: "\e604";
	}
	.icon-file:before {
		content: "\e605";
	}
	.icon-folder-open:before {
		content: "\e606";
	}
	.icon-credit:before {
		content: "\e607";
	}
	.icon-calculate:before {
		content: "\e608";
	}
	.icon-phone:before {
		content: "\e609";
	}
	.icon-history:before {
		content: "\e60a";
	}
	.icon-drawer:before {
		content: "\e60b";
	}
	.icon-user:before {
		content: "\e60c";
	}
	.icon-search:before,
	.fieldicon.search:before{
		content: "\e60d";
	}
	.icon-key:before {
		content: "\e60e";
	}
	.icon-remove:before {
		content: "\e60f";
	}
	.icon-airplane:before {
		content: "\e610";
	}
	.icon-truck:before {
		content: "\e611";
	}
	.icon-shield:before {
		content: "\e612";
	}
	.icon-list:before {
		content: "\e613";
	}
	.icon-menu:before {
		content: "\e614";
	}
	.icon-download:before {
		content: "\e615";
	}
	.icon-upload:before {
		content: "\e616";
	}
	.icon-flag:before {
		content: "\e617";
	}
	.icon-checkmark-circle:before {
		content: "\e618";
	}
	.icon-checkmark:before {
		content: "\e619";
	}
	.icon-loading:before {
		content: "\e641";
	}
	.icon-cancel:before {
		content: "\e63d";
	}
	.icon-cogs:before {
		content: "\e61b";
	}
	.icon-book:before {
		content: "\e61c";
	}
	.icon-megaphone:before {
		content: "\e61d";
	}
	.icon-email:before {
		content: "\e642";
	}
	.icon-calendar:before,
	.fieldicon.calendar:before {
		content: "\e640";
	}
	.icon-attention:before,
	.icon-attention-default:before {
		content: "\e63f";
	}
	.icon-chat:before {
		content: "\e63e";
	}
	.icon-paperclip:before {
		content: "\e61e";
	}
	.icon-user-add:before {
		content: "\e61f";
	}
	.icon-export:before {
		content: "\e620";
	}
	.icon-clock:before {
		content: "\e621";
	}
	.icon-cross:before {
		content: "\e622";
	}
	.icon-minus:before {
		content: "\e623";
	}
	.icon-plus:before {
		content: "\e624";
	}
	.icon-cross2:before {
		content: "\e625";
	}
	.icon-minus2:before {
		content: "\e626";
	}
	.icon-plus2:before {
		content: "\e627";
	}
	.icon-minus3:before {
		content: "\e628";
	}
	.icon-plus3:before {
		content: "\e629";
	}
	.icon-question:before {
		content: "\e62a";
	}
	.icon-help:before {
		content: "\e62b";
	}
	.icon-add-to-list:before {
		content: "\e62c";
	}
	.icon-list2:before {
		content: "\e62d";
	}
	.icon-disk:before,
	.fieldicon.disk:before{
		content: "\e62e";
	}
	.icon-arrow-left:before {
		content: "\e62f";
	}
	.icon-arrow-down:before {
		content: "\e630";
	}
	.icon-arrow-up:before {
		content: "\e631";
	}
	.icon-arrow-right:before {
		content: "\e632";
	}
	.icon-arrow-left2:before {
		content: "\e633";
	}
	.icon-arrow-down2:before {
		content: "\e634";
	}
	.icon-arrow-up2:before {
		content: "\e635";
	}
	.icon-arrow-right2:before {
		content: "\e636";
	}
	.icon-arrow-left3:before {
		content: "\e637";
	}
	.icon-arrow-down3:before {
		content: "\e638";
	}
	.icon-arrow-up3:before {
		content: "\e639";
	}
	.icon-arrow-right3:before {
		content: "\e63a";
	}
	.icon-arrow-left4:before {
		content: "\e63b";
	}
	.icon-arrow-down4:before,
	.icon-select:before {
		content: "\e63c";
	}
	.icon-arrow-up4:before {
		content: "\e643";
	}
	.icon-arrow-right4:before {
		content: "\e644";
	}
	.icon-language:before {
		content: "\e61a";
	}
	
	.icon-loading{
		display: inline-block;
		-moz-animation: spin 2s infinite linear;
		-o-animation: spin 2s infinite linear;
		-webkit-animation: spin 2s infinite linear;
		animation: spin 2s infinite linear;
		font-size: 16px;
	}
	.icon-loading.icon-x48{
		font-size: 48px;
	}
	.icon-loading.icon-x32{
		font-size: 32px;
	}
	

/*
	Custom select box
	-----------------
	Usage: you only need apply the custom-select class to a standard select html element 
	without any wrappers and evance.ui Javascript for evSelect will wrap it for you.
	Usage:
	
	<select class="custom-select" name="myselect">...</select>
*/
	select.select{
		color:#000;
		font-family:"Delivery", Helvetica, sans-serif;
		padding:0;
		margin:0;
		height:32px;
		overflow:hidden;
		border:0;
		width:100%;
	}
	select.evOldBrowser{
		border: 1px solid #cecece;
	}
	.custom-select{
		display:-moz-inline-box;
		display:inline-block;
		zoom:1;
		display:inline;
		overflow:visible;
		vertical-align:middle;
		position:relative;
		width:100%;
	}
	.custom-select > .button-select{
		display:none;
		margin-bottom:-32px;
		position:relative;
	}
	.custom-select > .button-select > .icon-select{
		position:absolute;
		right:10px;
		top:10px;
	}
	.custom-select > .button-select > .label{
		margin-right:20px;
		display:block;
	}
	.custom-select.hasIcon > .button-select > .label{
		margin-left:16px;
	}
	.evSelectButtonJs > select{
		opacity: 0;
		cursor: hand;
		cursor: pointer;
	}
	.evSelectButtonJs > .button-select{
		display:block;
	}
	
/*
	evRadio & evCheckbox
	--------------------
	version 2 of evRadio
*/
	a.evRadio,
	a.evCheckbox{
		-moz-box-sizing: border-box;
		-ms-box-sizing: border-box;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
		white-space:nowrap;
		display:-moz-inline-box;
		display:inline-block;
		zoom:1;
		display:inline;
		border:0;
		padding:0;
		margin:0;
		height:20px;
		width:20px;
		border:1px solid #cecece;
		vertical-align:middle;
		border-radius: 9px;
		font-family: 'iconset1';
		speak: none;
		font-style: normal;
		font-weight: normal;
		font-variant: normal;
		text-transform: none;
		text-align: center;
		line-height: 18px;
		text-decoration: none;
		outline:none;
		box-shadow: inset 0 1px 6px rgba(0,0,0,0.3);
	}
	a.evCheckbox{
		border-radius: 3px;
	}
	a.evRadio.checked,
	a.evCheckbox.checked{
		color:#000;
		border:1px solid #666666;
		box-shadow: none;
	}
	a.evRadio.checked:after,
	a.evCheckbox.checked:after{
		content: "\e619";
		position: relative;
	}
	a.evRadio.hover,
	a.evRadio:hover,
	a.evCheckbox.hover,
	a.evCheckbox:hover{
		border:1px solid #059eff;
		box-shadow: 0 0 8px #059eff;
	}
	
/*
	Responsive Grids
*/
	.maxWidth{
		width:100%;
	}
	.grid1of2,
	.grid2of3,
	.grid1of3,
	.grid1of4,
	.grid3of4,
	.grid1of5,
	.panelMain,
	.panelAside{
		display:block;
		float:left;
		zoom: 1;
		-moz-box-sizing: border-box;
		-ms-box-sizing: border-box;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
	}
	.grid1of2{ width: 50%; }
	.grid1of3{ width: 33.33%; }
	.grid2of3{ width: 66.66%; }
	.grid1of4{ width: 25%; }
	.grid3of4{ width: 75%; }
	.grid1of5{ width: 20%; }
	.panelMain{ width:73.5%; }
	.panelAside{ width:26.5%; }
	
	
	.tabularGrid{
		display: table;
		width:100%;
	}
	.tabularGrid > .grid1of3{
		display: table-cell;
		float: none;
	}

	.banner.shadowAside:before{
		background-image: url("../images/bg/shadow_aside.4789383776de.gif");
		content: ' ';
		width:10px;
		height:400px;
		right:-10px;
		display: block;
		position: absolute;
	}
	
/* debateable whether these are generic */
	.closeWindowIcon{
		position: absolute;
		top:15px;
		right:15px;
	}
	.closeWindowIcon{
		color:#a3a3a3;
		text-decoration: none !important;
		width:28px;
		height:28px;
		font-size: 18px;
		text-align: center;
		line-height: 26px;
		border:1px solid transparent;
		border-radius: 14px;
	}
	.closeWindowIcon:hover,
	.closeWindowIcon:focus{
		border: 1px solid #676767;
		color:#676767;
	}
	.previousButton,
	.nextButton{
		width:28px;
		height:28px;
		font-size: 18px;
		color:#a3a3a3;
		text-decoration: none !important;
		display: inline-block;
		text-align: center;
		line-height: 26px;
		font-size: 16px;
		border-radius: 16px;
		border:1px solid transparent;
	}
	.previousButton:hover,
	.nextButton:hover,
	.previousButton:focus,
	.nextButton:focus{
		border: 1px solid #676767;
		color:#676767;
	}
	.previousButton:before{
		left:-1px;
		position: relative;
	}
	.nextButton:before{
		left:1px;
		position: relative;
	}
	
/* normal banners */
	.banner{
		min-height: 290px;
		background-color: #333;
		background-position: 50% 50%;
		background-image: url("../images/photo/register.ceda8ac7f96f.jpg");
		background-size: cover;
		background-repeat: no-repeat;
		position: relative;
	}
	.banner .bannerStrip{
		background-color:#ffcc00;
		color: #cc0000;
		text-transform: uppercase;
		display: inline-block;
		padding: 20px;
		position: absolute;
		bottom:25px;
	}
	.banner .bannerStrip h1{
		color:#cc0000;
		font-size: 18px;
	}
	.banner .bannerStrip h1 .redTag{
		font-size: 18px;
	}

	.panelAsideAbsolute{
		position: absolute;
		top:0;
		left:100%;
		width:36%;
	}

	@media screen and (max-width: 56.25em){
		.data-header > .table,
		.data-header > .table > .cell {
			display: block;
		}
	}

	@media screen and (max-width: 43.75em){
		.grid1of3{ width: 50%; }
		.grid2of3{ width: 50%; }
		.grid1of4{ width: 50%; }
		.grid1of5{ width: 50%; }
		.grid3of4{ width: 50%; }
		.panelMain{ width: 60%; }
		.panelAside{ width: 40%; }
		
		.tabularGrid{
			display: block;
		}
		.tabularGrid > .grid1of3{
			display: block;
			float:left;
		}
		
		.banner .bannerStrip{
			bottom: 0;
		}
		
		.panelMain .grid1of2{
			width:100%;
		}
		
		.panelAsideAbsolute{
			left:100%;
			width:66%;
		}
	}

	@media screen and (min-width: 37.51em){
		.data-header .table > .cell.grid1of2 {
			float: none;
		}
	}

	@media screen and (max-width: 37.5em){
		.data-header .table,
		.data-header .table > .cell {
			display: block;
		}
	}

	@media screen and (min-width: 34.01em){
		.data-footer .custom-select {
			padding: 0 10px;
		}
	}
	@media screen and (max-width: 34em) {
		.data-footer > .table,
		.data-footer > .table > .cell {
			display: block;
			padding-bottom: 10px;
		}
		.data-footer > .table > .cell:last-child {
			padding-bottom: 0;
		}

		.data-footer .custom-select {
			padding: 0 10px 0 0;
		}
	}

	@media screen and (max-width: 31.25em){
		.grid1of2{ width: 100%; }
		.grid1of3{ width: 100%; }
		.grid2of3{ width: 100%; }
		.grid1of4{ width: 100%; }
		.grid1of5{ width: 100%; }
		.grid3of4{ width: 100%; }
		.panelMain{ width: 100%; }
		.panelAside{ width: 100%; }
		
		.grid1of2.borderRight{
			border-right: 0;
			border-bottom: 1px solid #e7e6e3;
		}
		
		.panelAsideAbsolute{
			left:auto;
			top:auto;
			position: relative;
			width: 100%;
		}
		
		.panelMain .banner.shadowAside:before{
			display: none;
		}
	}
	
	
	
	/* Tabs */
	ul.tabs,
	ul.tabs li{
		padding:0;
		margin:0;
		list-style: none;
		position: relative;
		
	}
	ul.tabs{
		display:block; 
		width:100%;
		padding: 0 10px;
		border-bottom: 1px solid #dddddd;
		padding-top:5px;
		font-size: 0;
		white-space: nowrap;
	}
	ul.tabs li{
		display:inline-block;
		text-align: center;
		padding:30px 40px;
		border: 1px solid #dddddd;
		border-bottom: 0;
		vertical-align: middle;
		cursor:pointer;
		background-color: #f9f9f9;
		font-size: 12px;
		-webkit-border-top-left-radius: 5px;
		-webkit-border-top-right-radius: 5px;
		-moz-border-radius-topleft: 5px;
		-moz-border-radius-topright: 5px;
		border-top-left-radius: 5px;
		border-top-right-radius: 5px;
		vertical-align: bottom;
		margin: 0 2px;
		white-space: normal;
	}

	ul.smallTabs li{
		padding: 10px 20px;
	}
	ul.tabs li:hover{
		border-top: 3px solid #ddd;
	}
	ul.tabs li.active{
		color:#333;
		background-color: #fff;
		border-top: 3px solid #ffcc00;
		border-bottom: 1px solid #fff;
		bottom:-1px;
	}
	
	
	.tag{
		display:inline-block;
		background-color:#ffe9c2;
		border:1px solid #ffc672;
		padding:0 10px;
		line-height:26px;
		white-space: nowrap;
		color:#333;
		border-radius: 3px;
		margin:3px;
	}
	
	
	ul.helpTopics{
		padding:0;
		margin:0;
		list-style: none;
		margin-bottom: 20px;
		border-top:1px solid #eee;
	}
	ul.helpTopics > li{
		border-bottom:1px solid #eee;
		padding:15px 20px 15px 35px;
		position: relative;
	}
	ul.helpTopics > li > .expand{
		position: absolute;
		left:5px;
		top:13px;
		font-size: 18px;
		border: 1px solid #aaa;
		color:#aaa;
		display:inline-block;
		width:20px;
		height:20px;
		border-radius: 10px;
		line-height: 19px;
		text-align: center;
		cursor:pointer;
	}
	ul.helpTopics > li > .expand:after{
		content: "\e629";
		font-family: 'iconset1';
	}
	ul.helpTopics > li .title{
		cursor:pointer;
	}
	ul.helpTopics > li.open > .expand:after{
		content: "\e628";
	}
	
	
	.noResultsArea{
		background-color:#f9f9f9;
		color:#b3b3b3;
		text-align: center;
		border-top:1px solid #ebebeb;
		border-bottom:1px solid #ebebeb;
		padding:40px;
	}
	.noResultsArea h1,
	.noResultsArea h2,
	.noResultsArea h3,
	.noResultsArea h4{
		color:#b3b3b3;
	}
	
	.progress,
	.progress > .bar{
		display:block;
		border-radius: 3px;
		height: 10px;
	}
	.progress{
		overflow: hidden;
		background-color: #ebebeb;
		box-shadow: inset 0 1px 5px rgba(0,0,0,0.2);
		margin: 11px 0;
	}
	.progress > .bar{
		background-color: #cc0001;
	}
	
	
	.columnList{
		padding:0;
		margin:0;
		list-style: none;
		height: 490px;
		overflow:auto;
		background-color: #f9f9f9;
		border-radius: 3px;
		border:1px solid #e7e6e3;
	}
	.columnList > li{
		padding:5px 10px;
		margin: 0;
		list-style: none;
		border-bottom: 1px solid #eee;
		background-color: #fff;
		cursor: move;
	}
	.columnList > li:hover{
		background-color:#efefef;
	}
	
	.columnList > li.ui-sortable-helper{
		box-shadow: 0 0 10px rgba(0,0,0,0.5);
		background-color: #fffae5;
	}
	.columnList > li.placeholder{
		box-shadow: inset 1px 2px 3px rgba(0,0,0,0.3);
		background-color: #eee;
	}
	.columnList > li.state-highlight{
		background-color: #fffae5;
	}
	
	
	
	ul.listOfOptions{
		padding:0;
		margin:0;
	}
	ul.listOfOptions li{
		list-style:none;
		border-bottom:1px solid #eee;
		padding:4px 15px 4px 15px;
		white-space:nowrap;
		line-height:26px;
	}
	ul.listOfOptions.interactive li > a{
		color:inherit;
	}
	ul.listOfOptions li.last,
	ul.listOfOptions li:last-child{
		border:0;
	}
	
	ul.listOfOptions.interactive li:hover{
		color:#333;
		background-color: #feda46;
	}
	
	
/*
 * evDialog
 * --------
 * used by <ev:dialog /> and respective JS Files
 * 
 */	
	.evDialog{
		top:0;
		right:0;
		bottom:0;
		left:0;
		z-index: 999;
		position: fixed;
		padding:40px 0;
		text-align: center;
		overflow: auto;
	}
	.evDialogHelper{
		display:inline-block;
		height:100%;
		width:1px;
		background-color: transparent;
		vertical-align: middle;
		margin-right: -10px;
	}
	.evDialog .evDialogWindow{
		background-color: #fff;
		z-index:2;
		box-shadow: 0 0 40px rgba(0,0,0,0.6);
		margin:0 auto auto auto;
		position: relative;
		display: inline-block;
		vertical-align: middle;
		text-align: left;
		min-height: 180px;
		width: 100%;
	}
	.evDialogWindow > .header{
		display: table;
		border-bottom: 1px solid #eee;
		width:100%;
	}
	.evDialogWindow > .header > .headerIcon,
	.evDialogWindow > .header > .headerTitle{
		white-space: nowrap;
		display: table-cell;
		vertical-align: middle;
		height:40px;
	}
	.evDialogWindow > .header > .headerTitle .label{
		margin:0;
		margin-left:5px;
	}
	.evDialogWindow > .header > .headerIcon{
		width:40px;
		text-align:center;
	}
	.evDialogWindow > .content{
		position: relative;
		z-index: 1;
		min-height: 140px;
	}
	.evDialogWindow > .footer{
		padding: 10px;
		display: block;
		border-top:1px solid #eee;
		text-align: center;
		white-space: nowrap;
	}
	.evDialogWindow > .footer > .evButton{
		margin: 0 5px;
	}
	.evDialogWindow > .contentCover{
		background-color: #ffcc00;
		position: absolute;
		left: 0;
		top:0;
		right:0;
		bottom:0;
		text-align: center;
		z-index: 2;
		padding: 40px 0;
	}
	.evDialogWindow > .contentCover > .iconContainer{
		display: block;
		height:32px;
		text-align: center;
		position: absolute;
		width: 32px;
		top:50%;
		margin-top: -16px;
		left:50%;
		margin-left:-16px;
	}
	.evDialogWindow > .closeIcon{
		position: absolute;
		right:10px;
		top:10px;
		z-index: 3;
	}
	
	.evDialog.evDialogModal{
		background-color:rgba(0,0,0,0.7);
	}

/*
 * evContentCover
 * derived from evDialog's content cover
 */
	.evContentCover{
		background-color: #fff;
		position: absolute;
		left: 0;
		top:0;
		bottom:0;
		right:0;
		opacity:0.9;
		filter:alpha(opacity=90);
		text-align: center;
		z-index: 2;
	}
	.evContentCover .statusHelper{
		position: relative;
		display: inline-block;
		width: 1px;
		height: 100%;
		vertical-align: middle;
	}
	
/*
	Experimental dialog blur
*/
	.evDialogBlur,
	#evPageMenu.evDialogBlur > div, 
	.evMenubar.evDialogBlur > div{
		/*filter: blur(2px) grayscale(0.5);
		-webkit-filter: blur(2px) grayscale(0.5);
		-moz-filter: blur(2px) grayscale(0.5);
		-ms-filter: blur(2px) grayscale(0.5);*/
	}
	#evPageMenu.evDialogBlur, 
	.evMenubar.evDialogBlur{
		/* filter: none;
		-webkit-filter: none;
		-moz-filter: none;
		-ms-filter: none; */
	}
	.evMenubar.evDialogBlur{
		/* box-shadow: 0 0 5px 2px #38333f; */
	}
	body.evDialogOpen{
		overflow: hidden;
	}
	
	
	ul.notifications{
		padding:0;
		margin:0;
	}
	ul.notifications > li{
		padding:0;
		margin:0;
		list-style: none;
		display: block;
		line-height: 18px;
	}
	ul.notifications > li > a{
		display: block;
		color: inherit;
		padding: 10px;
		text-decoration: none;
		position: relative;
		padding-right:60px;
	}
	ul.notifications > li > a > .label{
		white-space: normal;
	}
	ul.notifications > li > a > .counter{
		position: absolute;
		display:inline-block;
		border-radius: 3px;
		background-color: rgba(0,0,0,0.1);
		padding:4px 10px;
		line-height:normal;
		right:10px;
		top:9px;
	}
	
	ul.inline,
	ul.inline li{
		padding:0;
		margin: 0;
		list-style: none;
		display: inline;
	}
	ul.inline li{
		margin-left: 5px;
		padding-right:5px;
		border-right:1px dotted #aaa;
	}
	ul.inline li.first{
		margin: 0;
	}
	ul.inline li.last{
		padding-right: 0;
		border: 0;
	}
	ul.inline li a{
		color:inherit;
		white-space: nowrap;
	}
	
	.smallest{
		font-size: 10px;
		line-height: 14px;
	}
	
	.arrowListHeader{
		margin-bottom: 5px;
	}
	ul.arrowList{
		padding: 0;
		margin: 0;
		font-size: 11px;
	}
	ul.arrowList > li{
		padding: 0;
		margin: 0;
		list-style: none;
		line-height:15px;
	}
	ul.arrowList > li > a{
		color:inherit;
		padding-left:10px;
		background-repeat: no-repeat;
		background-position: left 3px;
	}

    .dynamic-height {
        white-space: normal;
        height:auto;
    }
    
    div.value-block {
        width: 100%;
        margin: 0 auto;
    }
    div.value-currency {
        display: inline-block;
        float: left;
        margin-left:5px;
    }
    div.value-ammount {
        display: inline-block;
        float: right;
        margin-right:5px;
    }