body{
	margin:0;
	padding:0;
	font-family:Verdana, Geneva, sans-serif;
	font-size:14px;
	line-height:18px;
	color:#222;
	display: table;
	width:100%;
	background:#eee;
}

html {
  overflow-x: hidden;
}

a {
	color: #4bad29;
	text-decoration: none;
}

a:visited {
	color: #4bad29;
}

a:focus {
	outline: thin dotted;
}

a:active,
a:hover {
	color: #666;
	outline: 0;
}

a:hover {
	text-decoration: underline;
}

h1,h2,h3,h4,h5,h6 {
	clear: both;
	line-height: 1.3;
	font-weight:normal;
}

hr {
    border: 0;
    border-bottom: 1px dashed #ccc;
	clear:both;
	margin-bottom:20px;
	height:10px;
}

/* Form fields, general styles first. */
input[type=text],input[type=password],input[type=number],input[type=email],textarea {
	color: #222;
	padding: 5px;
	min-width:20%;
	margin-right:5px;
}

select { padding: 5px; min-width:20%; }

input[type=text]:focus,input[type=password]:focus,input[type=number]:focus,input[type=email]:focus,
textarea:focus, select:focus {
	border: 1px solid #4bad29;
	outline: 0;
}

/* Buttons */
.normalbtn{
	background: #4bad29; /* Old browsers */
	background: -webkit-linear-gradient(top, #4bad29 0%, #29a100 100%); /* Chrome 10+, Safari 5.1+ */
	background:   linear-gradient(to bottom, #4bad29 0%, #29a100 100%); /* W3C */
	border: none;
	border-bottom: 3px solid #1f7900;
	border-radius: 2px;
	color: #fff;
	display: inline-block;
	padding: 10px 24px 9px;
	text-decoration: none;
	cursor:pointer;
	font-size:14px;
}

.normalbtn:hover
{
    background: #29a100; /* Old browsers */
	background: -webkit-linear-gradient(top, #29a100 0%, #4bad29 100%); /* Chrome 10+, Safari 5.1+ */
	background:   linear-gradient(to bottom, #29a100 0%, #4bad29 100%); /* W3C */
	outline: none;
}
.normalbtn:focus{
	background: #29a100; /* Old browsers */
	background: -webkit-linear-gradient(top, #29a100 0%, #4bad29 100%); /* Chrome 10+, Safari 5.1+ */
	background:   linear-gradient(to bottom, #29a100 0%, #4bad29 100%); /* W3C */
	outline: none;
}

.deletebtn {
	background: #bbb; /* Old browsers */
	background: -webkit-linear-gradient(top, #bbb 0%, #999 100%); /* Chrome 10+, Safari 5.1+ */
	background:   linear-gradient(to bottom, #bbb 0%, #999 100%); /* W3C */
	border: none;
	border-bottom: 3px solid #666;
	border-radius: 2px;
	color: #fff;
	display: inline-block;
	padding: 10px 24px 9px;
	text-decoration: none;
	cursor:pointer;
	font-size:14px;
}
.deletebtn:hover 
{
    background: #999; /* Old browsers */
	background: -webkit-linear-gradient(top, #999 0%, #bbb 100%); /* Chrome 10+, Safari 5.1+ */
	background:   linear-gradient(to bottom, #999 0%, #bbb 100%); /* W3C */
	outline: none;
}
.deletebtn:focus{
	background: #999; /* Old browsers */
	background: -webkit-linear-gradient(top, #999 0%, #bbb 100%); /* Chrome 10+, Safari 5.1+ */
	background:   linear-gradient(to bottom, #999 0%, #bbb 100%); /* W3C */
	outline: none;
}

/* Placeholder text color -- selectors need to be separate to work. */
::-webkit-input-placeholder { color: #999; }
:-moz-placeholder {	color: #999; }
::-moz-placeholder { color: #999; }
:-ms-input-placeholder { color: #999; }

/* table */
table{ width:70%; font-size:14px; margin:1.5% 0;}
table tr th{text-align:left; border-bottom:3px #ddd solid; line-height:24px; padding:5px 10px;}
table tr td{border-bottom:1px #ddd solid; line-height:24px; padding:5px 10px;}
table tr:nth-child(even){background:#fafafa;}
table tr:first-child:hover{background:none;}
table tr:hover{background:#f1fbee;}

.tableheader {text-align:left; border-bottom:3px #ddd solid; line-height:24px; padding:5px 10px;}

header{
	float:none;
	width:15%;
	background:#222;
	display: table-cell;  
	vertical-align:top;
}

header hgroup{
	padding:7%;
	text-align:center;
	border-bottom:1px #121212 solid;
}

header hgroup h1{margin:0;}

nav{
	border-top:1px #333 solid;
	border-bottom:1px #121212 solid;
	padding:5% 7%;
	color:#aaa;
	font-size:16px;
}

nav ul{
	list-style:none;
	padding:0;
	margin:0;
}

nav ul li{
}

nav ul li a, nav ul li a:visited{
	color:#aaa;
	line-height:28px;
	display:block;
	padding:4px 10px;
	border-radius: 2px;
}

nav ul li a img{
	float:left;
	padding-right:10px;
    opacity: 0.7;
    filter: alpha(opacity=70); 
}

nav ul li a:hover img, nav ul li.selected a img{
    opacity: 1;
    filter: alpha(opacity=100);
}

nav ul li a:hover, nav ul li.selected a{
	background:#4bad29;
	color:#fff;
	text-decoration:none;
}

nav.profile{
	line-height:30px;
}

section{
	float:none;
	width:85%;
	background:#fff;
	display: table-cell;
	vertical-align:top;
}

section #header{
	background:#eee;
	padding:25px 1.5% 10px 1.5%;
	min-height:50px;
}

section #header #search{float:right;}
section #header #search select{ background:#ddd; border:1px #f6f6f6 solid; height:34px; padding:0 0 0 8px; font-size:13px; color:#999;}
section #header #search select option{color:#222;}
section #header #search input[type="text"]{ background:#ddd; border:1px #f6f6f6 solid; height:34px; padding:0 30px 0 8px; font-size:13px; width:160px; }
section #header #search input[type="image"]{ position:absolute; right:8px; top:28px;}

section #header h1{
	float:left;
	font-size:24px;
	margin:0;
}

#content{
	padding:1.5%;
	overflow-y: hidden;
}

#content h2{color:#aaa; font-size:18px;}

#content .options a{display:inline-block; border:1px #ccc solid; border-radius:4px; padding:10px 20px; text-transform:uppercase; color:#777; margin-bottom:5px;}
#content .options a:hover{border:1px #444 solid; color:#444; text-decoration:none;}

#content .column-50{
	float:left;
	margin-bottom:1.5%;
	width:48%;
	padding:1%;
	font-size:14px;
	color:#999;
}

#content .column-50 img{float:left; background:#eee; display:block; padding:18px; border-radius:50px; margin:-10px 10px 10px 0;}
#content .column-50 strong {color:#29a5ad; font-weight:normal; font-size:18px; line-height:26px;}

#content .step.selected{
	color:#111;
}
#content .step.selected span{background:#4bad29; color:#fff;}
#content .step{
	float:left;
	margin-bottom:1.5%;
	width:20%;
	min-height:30px;
	padding:1%;
	font-size:16px;
	color:#999;
	text-transform:uppercase;
}
#content .step span{background:#ddd; padding:5px 9px; border-radius:20px; font-weight:bold;}
#content .step strong{color:#4bad29;}
#content .step + .step{margin-left:1.5%;}

#content .widget{
	float:left;
	margin-bottom:1.5%;
	width:20%;
	min-height:60px;
	padding:1%;
	font-size:11px;
	line-height:13px;
	-moz-box-shadow:    inset 0 0 40px #e4e4e4;
   	-webkit-box-shadow: inset 0 0 40px #e4e4e4;
   	box-shadow:         inset 0 0 40px #e4e4e4;
}
#content .widget + .widget{margin-left:1.5%;}
#content .widget a{color:#666; display:block;}
#content .widget a:hover{text-decoration:none;}
#content .widget img{padding:10px; float:left; margin-right:15px; width:40px; height:40px; background:#4bad29;}
#content .widget img.blue{background:#29a5ad;}
#content .widget img.orange{background:#f08910;}

#content .widget span.result{
	font-size:26px;
	color:#222;
	line-height:34px;
}

#content .widget span.green, #content .widget span.red{font-style:italic;}
#content .widget span.green{color:#4bad29;}
#content .widget span.red{color:#ed3333;}

#content .checkbox{width:20px;}

#content .cart td{vertical-align:top;}

#content .cart .total{font-weight:bold; text-align:right}

#content .notactivestatus{background:#aaa; color:#fff; text-transform:uppercase; padding:1px 5px;}
#content .sentstatus{background:#29a5ad; color:#fff; text-transform:uppercase; padding:1px 5px;}
#content .partialpaidstatus{background:#00cc00; color:#fff; text-transform:uppercase; padding:1px 5px;}
#content .activestatus{background:#fc8a04; color:#fff; text-transform:uppercase; padding:1px 5px;}
#content .overduestatus{background:#996633; color:#fff; text-transform:uppercase; padding:1px 5px;}
#content .closedstatus{background:#ed3333; color:#fff; text-transform:uppercase; padding:1px 5px;}
#content .paidstatus, #content .invoicedstatus{background:#4bad29; color:#fff; text-transform:uppercase; padding:1px 5px;}

#content .break{border-bottom:1px #ddd solid; margin:1% 0; clear:both; height:10px;}

#content .paging{float:right;}
#content .paging a{display:inline-block; padding:4px 10px; font-size:13px; color:#999; border-top:1px #bbb solid; border-bottom:1px #bbb solid; border-right:1px #bbb solid;}
#content .paging a.selected, #content .paging a:hover{text-decoration:none; background:#f1fbee; color:#555;}
#content .paging a:first-child{border-left:1px #999 solid;}

#content .note{color:#aaa; font-size:12px; clear:both; display:block; padding-top:20px;}
#content .label{float:left; width:15%; margin-bottom:0.5%; line-height:26px; display:block; min-height:30px;}
#content .label span{color:#ed3333; font-size:12px;}
#content .data{float:left; width:85%; margin-bottom:0.5%; display:block; min-height:30px;}
#content .data span{font-style:italic; color:#aaa;  font-size:12px;}
#content .data .template-msg{margin:10px 0; padding:10px; background:#f6f6f6;}
#content .data .template-msg span{color:#777;}

#content .sub-title{font-size:18px; padding:5px 50px 7px 0; border-bottom:3px #ddd solid; color:#4bad29; margin-bottom:0.3%; clear:both;}
#content .action{clear:both; width:100%; padding:15px 0;}

#content #template_reference{overflow:scroll; height:250px;}

#content .error-msg{clear:both; padding:5px 10px; border:1px #ed3333 solid; border-radius:3px; color:#ed3333; background:#f9e1e1; margin-bottom:20px;}
#content .success-msg{clear:both; padding:5px 10px; border:1px #4bad29 solid; border-radius:3px; color:#2f920c; background:#e9f9e1; margin-bottom:20px;}

ul.tabs{padding:0;list-style:none; margin:0; border-bottom:3px #ddd solid; width:100%; height:30px;}
ul.tabs li {	
	float: left;
	position: relative;
}

ul.tabs a {
	padding:5px 50px 5px 0;
	display:block;
	color:#999;
	text-decoration:none;
	font-size:18px;
}

ul.tabs a.active {
	color:#4bad29;
}

.tab{
	clear:both;
	padding:0.3% 0;
}

footer{
	border-top:1px #333 solid;
	padding:7%;
	color:#777;
	font-size:10px;
	line-height:14px;
}

/**
 * Tooltip Styles
 */

/* Base styles for the element that has a tooltip */
[data-tooltip],
.tooltip {
  position: relative;
  cursor: pointer;
}

/* Base styles for the entire tooltip */
[data-tooltip]:before,
[data-tooltip]:after,
.tooltip:before,
.tooltip:after {
  position: absolute;
  visibility: hidden;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
  opacity: 0;
  -webkit-transition: 
      opacity 0.2s ease-in-out,
        visibility 0.2s ease-in-out,
        -webkit-transform 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24);
    -moz-transition:    
        opacity 0.2s ease-in-out,
        visibility 0.2s ease-in-out,
        -moz-transform 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24);
    transition:         
        opacity 0.2s ease-in-out,
        visibility 0.2s ease-in-out,
        transform 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24);
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform:    translate3d(0, 0, 0);
  transform:         translate3d(0, 0, 0);
  pointer-events: none;
}

/* Show the entire tooltip on hover and focus */
[data-tooltip]:hover:before,
[data-tooltip]:hover:after,
[data-tooltip]:focus:before,
[data-tooltip]:focus:after,
.tooltip:hover:before,
.tooltip:hover:after,
.tooltip:focus:before,
.tooltip:focus:after {
  visibility: visible;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
  opacity: 1;
}

/* Base styles for the tooltip's directional arrow */
.tooltip:before,
[data-tooltip]:before {
  z-index: 1001;
  border: 6px solid transparent;
  background: transparent;
  content: "";
}

/* Base styles for the tooltip's content area */
.tooltip:after,
[data-tooltip]:after {
  z-index: 1000;
  padding: 5px 8px;
  width: auto;
  background-color: #000;
  background-color: hsla(0, 0%, 20%, 0.8);
  color: #fff;
  content: attr(data-tooltip);
  font-size: 12px;
  line-height: 1.2;
}

/* Bottom */
.tooltip-bottom:before,
.tooltip-bottom:after {
  top: 100%;
  bottom: auto;
  left: 50%;
}

.tooltip-bottom:before {
  margin-top: -12px;
  margin-bottom: 0;
  border-top-color: transparent;
  border-bottom-color: #000;
  border-bottom-color: hsla(0, 0%, 20%, 0.8);
}

.tooltip-bottom:hover:before,
.tooltip-bottom:hover:after,
.tooltip-bottom:focus:before,
.tooltip-bottom:focus:after {
  -webkit-transform: translateY(12px);
  -moz-transform:    translateY(12px);
  transform:         translateY(12px); 
}



@media (max-width : 1599px) {
	select { min-width:35%; }
	input[type=text],input[type=password],input[type=number],input[type=email],textarea { min-width:35%;}
	table{ width:100%;}
	header{	width:20%; }
	section{ width:80%;	}
	section #header{ padding:25px 3% 10px 3%; }
	#content{ padding:3%; }
	#content .widget, #content .step{ width:26%; padding:1.5%; }
	#content .widget + .widget, #content .step + .step{margin-left:3%;}
	#content .break{margin:2% 0;}
	#content .label{width:25%; margin-bottom:0.7%;}
	#content .data{width:75%; margin-bottom:0.7%;}
	#content .sub-title{margin-bottom:1.5%;}
	#content .cart{padding:2% 0;}
	.tab{ padding:1.5% 0; }
}

@media (max-width : 1200px) {
	#content .widget, #content .step {
		padding:1%;
		width:30%;
		font-size:9px;
	}
	#content .widget img{margin-right:10px;}
	#content .widget + .widget, #content .step + .step{margin-left:2%;}
}

@media (max-width : 999px) {
	section #header #search input[type="image"]{ right:30px;}
}

@media (max-width : 768px) {
	body{background:#fff;}
	.sb-slidebar {
		height: 100%;
		overflow-y: auto; /* Enable vertical scrolling on Slidebars when needed. */
		position: fixed;
		top: 0;
		z-index: 0; /* Slidebars sit behind sb-site. */
		display: none; /* Initially hide the Slidebars. Changed from visibility to display to allow -webkit-overflow-scrolling. */
		background-color: #222222; /* Default Slidebars background colour, overwrite this with your own css. */
		-webkit-transform: translate(0px); /* Fixes issues with translated and z-indexed elements on iOS 7. */
	}
	#sb-site {
	width: 100%;
	position: relative;
	z-index: 1; /* Site sits above Slidebars */
	display:block;
	}
	header{display:none;}
	section{display:block;}
	section #header #search{float:none; width:100%; padding-top:15px;}
	section #header #search select{ width:40%; }
	section #header #search input[type="text"]{ padding:0 5% 0 1%; width:58%; }
	section #header #search input[type="image"]{ top:75px;}
	section #header h1{	float:none; clear:none;}
	.sb-toggle-left{float:left; width:30px; margin-right:15px;}
	#content .label{width:35%; margin-bottom:1%;}
	#content .data{width:65%; margin-bottom:1%;}
	#content .data span{font-size:11px;}
	input[type=text],input[type=password],input[type=number],input[type=email],textarea { min-width:60%; }
}

@media (max-width : 480px) {
	section #header #search select{ width:100%; }
	section #header #search input[type="text"]{ padding:0 5% 0 1%; width:100%; }
	section #header #search input[type="image"]{ top:108px; right:18px;}
	#content .widget, #content .step, #content .column-50 {
		padding:3%;
		width:94%;
		font-size:11px;
		margin-bottom:3%;
	}
	#content .widget img{margin-right:15px;}
	#content .widget + .widget, #content .step + .step, #content .column-50 + . column-50{margin-left:0;}
	#content .label{float:none; width:100%; margin-bottom:0.5%;}
	#content .data{float:none; width:100%; margin-bottom:3%;}
	input[type=text],input[type=password],input[type=number],input[type=email],textarea { min-width:100%; }
	ul.tabs a {	padding:5px 25px 5px 0;	font-size:15px;}
}

@media (max-width : 320px) {
	ul.tabs a {	padding:5px 15px 5px 0;	font-size:13px;}
}