@import url('//fonts.googleapis.com/css?family=Open+Sans:400,400italic,700|Montserrat:400,700');
@import url('//cdn.jsdelivr.net/fontawesome/4.7.0/css/font-awesome.min.css');

html {
	box-sizing: border-box;
}
*, *:before, *:after {
	box-sizing: inherit;
}
html, body {
	margin: 0;
	padding: 0;
	height: 100%;
}
body {
	margin: 0;
	padding: 0;
	background: #FFFFFF;
	font-family: 'Open Sans', Verdana, Arial, Helvetica, sans-serif;
	line-height: 1.2;
	color: #50595C;
}
#wrapper { /* to enable footer fixed to bottom */
	min-height: 100%;
	margin: 0 auto -61px; /* the bottom margin is the negative value of the footer's height */
}



/* ============================================= page structure ============================================= */

#header {
	padding: 50px 10px 10px;
	text-align: right;
	background: #EEEFEF;
	border-bottom: 1px solid #DCDEDE;
}
#header a {
	color: #22758A;
	font: bold 20px/1.2 Montserrat, Arial, Helvetica, sans-serif;
	text-decoration: none;
	display: inline-block;
	padding: 0 10px;
}
#header small {
	font-size: 14px;
	text-transform: uppercase;
}


#stage {
	background: #FFFFFF;
	padding-bottom: 60px;
}


#footer {
	border-top: 1px solid #DCDEDE;
	background: #EEEFEF;
	text-align: right;
	height: 60px;
}
#footer .container {
	padding: 15px 15px;
}



/* ============================================= general ============================================= */

h1, h2, h3, h4 {
	font-family: Montserrat, Arial, Helvetica, sans-serif;
	line-height: 1.2;
	color: #22758A;
}

h1 {
	margin: 14px 0 15px 0;
	font-size: 24px;
	letter-spacing: -0.025em;
	text-transform: uppercase;
	text-shadow: 1px 1px 0 #FFFFFF;
}
h2 {
	margin: 15px 0;
	font-size: 24px;
	letter-spacing: -0.025em;
	text-shadow: 1px 1px 0 #FFFFFF;
}
h2 a {
	color: #22758A;
	text-decoration: none;
}
h2 a:hover {
	color: #8EB743;
}
h3 {
	margin: 15px 0;
	font-size: 16px;
	letter-spacing: -0.025em;
	text-transform: uppercase;
	text-shadow: 1px 1px 0 #FFFFFF;
}
h4 { /* sidebar heading */
	margin: 15px 0;
	font-size: 12px;
	font-weight: normal;
	line-height: 1;
	text-transform: uppercase;
}
h5 { /* breadcrumbs */
	margin: 10px 0 25px;
	padding: 10px 0 0;
	font-size: 12px;
	font-weight: normal;
	color: #A7ACAD;
	border-top: 1px solid #DCDEDE;
}
h5 a {
	color: #A7ACAD;
}
h6 { /* status indicators */
	display: inline-block;
	font-size: 10px;
	font-weight: normal;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	margin: 0px 0 0 10px;
	padding: 2px 4px 3px;
	vertical-align: middle;
}
.Live { /* based on h6*/
	background: lime;
}
.Offline {
	background: #CCCCCC;
}
.Red {
	background: #F00;
}
h6 a {
	display: block;
	margin: -2px -4px -3px;
	padding: 2px 4px 3px 18px;
	position: relative;
	text-decoration: none;
}
h6 a:before {
    content: "\f021"; /* refresh */
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    text-decoration: inherit;
/*--adjust as necessary--*/
/*	color: rgba(255,255,255,0.5);*/
    font-size: 10px;
    position: absolute;
    top: 3px;
    left: 5px;
}


p {
	margin: 15px 0;
	line-height: 1.6;
}
ul {
	margin: 20px 0;
	padding: 0;
	list-style: none;
}
a {
	color: #50595C;
}
small {
	font: normal 12px/1.4 'Open Sans', Verdana, Arial, Helvetica, sans-serif;
	text-transform: none;
	color: #A7ACAD;
}
small a {
	color: #A7ACAD;
}
form small {
	display: block;
}

hr {
	margin: 30px 0;
	height: 1px;
	color: #DCDEDE;
	background-color: #DCDEDE;
	border: none;
}
img {
	max-width: 100%;
	height: auto;
}

form {
	margin: 0;
}
label {
	margin: 0 0 5px;
	padding: 0;
	display: block;
	font: normal 14px Montserrat, Arial, Helvetica, sans-serif;
	text-transform: uppercase;
}
input, select, textarea {
	color: #50595C;
	font: italic 14px 'Open Sans', Verdana, Arial, Helvetica, sans-serif;
	letter-spacing: 0.02em;
	-webkit-border-radius: 3px;
	border-radius: 3px;
	border: 1px solid #DCDEDE;

	display: block;
	margin: 0 0 20px 0;
	padding: 7px 0 8px 10px;
}
select {
	width: 100%;
	padding: 6px 0 7px 10px;
}
input[type="file"]:hover, input[type="text"]:hover, input[type="url"]:hover, select:hover, textarea:hover, .catBoxes:hover {
	border: 1px solid #F0D576;
	background: #FFFBBB;
}

.plainFormItem,
input[type="checkbox"],
input[type="radio"] {
	display: inline-block;
	margin: 0;
	padding: 0;
	width: auto;
	border: none;
}
input[type="checkbox"] {
	float: left;
	margin: 2px 5px 0 0;
}
input[type="file"] {
/*	border: none; */
	padding: 7px 3px 7px 7px;
}
.oneLine { /* eg. checkbox + text */
	margin-bottom: 20px;
}

.catBoxes { /* used in blog categories */
	overflow: hidden;
	border: 1px #DCDEDE solid;
	padding: 10px 10px 5px;
	margin-bottom: 20px;
	-webkit-border-radius: 3px;
	border-radius: 3px;
}
.catBoxes div {
	float: left;
	width: 30%;
	min-width: 200px;
}
.catBoxes label {
	font: normal 14px/1.2 'Open Sans', Verdana, Arial, Helvetica, sans-serif;
	text-transform: none;
}
.catBoxes input {
	margin: 1px 7px 0 0;
}


.button, .button-sml {
	display: inline-block;
	position: relative;
	width: auto;
	background: #8EB743;
	color: #FFFFFF;
	font: normal 20px Montserrat, Arial, Helvetica, sans-serif;
	text-transform: uppercase;
	-webkit-border-radius: 3px;
	border-radius: 3px;
	border: 1px solid #8EB743;
	margin: 0;
	padding: 5px 10px 5px;
	cursor: pointer;
}
.button:hover, .button-sml:hover {
	border-color: rgba(0,0,0,.2);
	-webkit-box-shadow: 0 0 5px 0 rgba(0,0,0,0.3);
	box-shadow: 0 0 5px 0 rgba(0,0,0,0.3);
}
.button-sml, .actionButton {
	font-size: 12px;
}
a.button, span.button, a.button-sml {
	padding: 4px 7px 4px 22px;
	text-decoration: none;
}
.actionDelete { /* text buttons */
	background: #FF0000;
	border-color: #FF0000;
}
.inActive { /* grey buttons */
	background: #CCCCCC;
	border-color: #CCCCCC;
	cursor: not-allowed;
}
a.actionPreview {
	height: 26px;
	padding-left: 16px;
}



/* ============================================= icon stuff ============================================= */

.button:before {
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    text-decoration: inherit;
/*--adjust as necessary--*/
	color: rgba(255,255,255,0.5);
    font-size: 14px;
    position: absolute;
    top: 4px;
    left: 5px;
}

.button.actionEdit:before {
    content: "\f040"; /* pencil */
}
.button.actionView:before {
    content: "\f06e"; /* eye */
}
.button.actionDelete:before {
    content: "\f00d"; /* times */
	left: 6px;
}
.button.actionAdd:before {
    content: "\f067"; /* plus */
}
.button.actionUpdate:before {
    content: "\f00c"; /* check */
}
.button.sendNewsletter:before {
    content: "\f003"; /* envelope-o */
}
.button.actionPreview:before {
    content: "\f002"; /* search */
}
.button.thumbsUp:before {
    content: "\f087"; /* thumbs-o-up */
}
.button.link:before {
    content: "\f0c1"; /* link */
}


.messageBox:before {
    font: normal 20px/1 FontAwesome;
	color: #158EC6;
    position: absolute;
    top: 11px;
	left: 12px;
}
.messageInfo:before {
    content: "\f05a"; /* info-circle */
}
.messageSuccess:before {
    content: "\f00c"; /* tick */
	color: rgba(255,255,255,0.5);
}
.messageFail:before {
    content: "\f00d"; /* times */
	color: red;
}



/* ============================================= odds + ends ============================================= */

.messageBox {
	margin: 20px 0;
	padding: 11px 5px 12px 38px;
	color: #5D5330;
	font-size: 14px;
	line-height: 1.4;
	border: 1px solid #F0D576;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	background: #FFFBBB;
	position: relative;
}
.messageBox.messageSuccess {
	border-color: #8EB743;
	background: #8EB743;
	color: #FFFFFF;
}


#tabularList {
/*	max-width: 700px;*/
}
#tabularList li {
	margin: 0 0 10px;
	padding: 10px 10px 0 10px;
	border: 1px solid #DCDEDE;
	overflow: hidden;
}
#tabularList li.Live {
	background: white;
}
#tabularList li.Offline {
	opacity: 0.5;
	background: #F5F5F5;
}
#tabularList li:hover {
	background: #F5F5F5;
}
#tabularList li:hover li {
	background: #FFFFFF;
}
#tabularList li li:hover {
	background: #F5F5F5;
}
#tabularList ul {
	margin: 0;
}
#tabularList ul li {
	clear: right;
	background: #F5F5F5;
	margin-bottom: 5px;
	margin-right: -11px;
}
#tabularList ul li:last-child {
	margin-bottom: 10px;
}

#tabularList strong {
	font-weight: normal;
	display: inline-block;
	vertical-align: middle;
	padding-bottom: 10px;
}
#tabularList strong img {
	display: inline-block;
	vertical-align: top;
	max-width: 150px;
	padding-right: 10px;
}
#tabularList b { /* snippet list */
	display: inline-block;
	vertical-align: bottom;
	margin-left: -44px;
	padding-bottom: 1px;
	width: 39px;
	overflow: hidden;
	color: #CCC;
	font-size: 10px;
	font-weight: normal;
	text-transform: uppercase;
	white-space: nowrap;
}
#tabularList h6 {
	margin-bottom: 10px;
}
#tabularList .actionButton {
	margin: 0 0 10px 10px;
	vertical-align: middle;
}
#tabularList .actionButton.delete {
	margin-right: 0;
}
#tabularList .handle {
	cursor: n-resize;
	color: #8EB743;
	line-height: 22px;
	text-align: center;
	width: 22px;
	height: 22px;
	margin: 0 10px 10px 0;
	background: #FFFFFF;
	-webkit-border-radius: 11px;
	border-radius: 11px;
	vertical-align: middle;
	-webkit-box-shadow: 0 0 5px 0 rgba(0,0,0,.2);
	box-shadow: 0 0 5px 0 rgba(0,0,0,.2);
}

.buttonGroup {
	float: right;
}

#tabularList:hover div > .actionButton { /* on table hover, turn off all buttons */
	background: #CCCCCC;
	border-color: #CCCCCC;
}
#tabularList li:hover > div > .actionButton { /* re-activate only buttons on the row you're hovering over */
	background: #8EB743;
	border-color: #8EB743;
}
#tabularList li:hover > div > .actionButton.actionDelete { /* ditto, but for delete buttons */
	background: #FF0000;
	border-color: #FF0000;
}
#tabularList li:hover > div > .actionButton.inActive { /* ditto, but for grey buttons */
	background: #CCCCCC;
	border-color: #CCCCCC;
	-webkit-box-shadow: none;
	box-shadow: none;
}

#tabularList li:hover .actionButton:hover, #tabularList li:hover .actionButton.actionDelete:hover { /* highlight individual buttons on hover */
	border-color: rgba(0,0,0,.2);
}


#tabularList .date {
	display: inline-block;
	padding-right: 10px;
}
#tabularList input[type=text] {
	display: inline-block;
	width: 50%;
}
#tabularList input {
	margin-bottom: 10px;
}


#tabularList .prodImg { /* used on prod listing page */
	display: inline-block;
	vertical-align: middle;
	width: 80px;
	height: 80px;
	background: #FFFFFF center no-repeat;
	background-size: contain;
	border: 1px #DCDEDE solid;
	margin-bottom: 10px;
	position: relative;
}
#tabularList .prodImg h6 {
	position: absolute;
	top: -1px;
	right: -1px;
}
#tabularList blockquote {
	margin: 0;
	padding: 0 10px 0 0;
	display: inline-block;
	vertical-align: middle;
}
#tabularList blockquote strong {
	padding-bottom: 0;
	display: block;
}
#tabularList blockquote p {
	margin: 5px 0 10px;
}
#tabularList blockquote a {
	display: block;
	position: relative;
	padding: 2px 0 0 20px;
	font-size: 12px;
	text-decoration: none;
}
#tabularList blockquote a:before {
    content: "\f067"; /* plus */
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    text-decoration: inherit;
/*--adjust as necessary--*/
	color: #8EB743;
	font-size: 10px;
    position: absolute;
    top: 5px;
	left: 7px;
}


dl {
	margin: 10px 0;
}
dt {
	margin: 2px 0 0;
	float: left;
	width: 130px;
	color: #A7ACAD;
	font: normal 12px/1.4 'Open Sans', Verdana, Arial, Helvetica, sans-serif;
	text-transform: uppercase;
}
dd {
	margin: 0 0 10px 130px;
}



#idAreaoEdit1 {
	margin-bottom: 20px;
}

.gridDragDrop {
	overflow: hidden;
}
.gridDragDrop li {
	float: left;
	margin: 15px 20px 20px 0;
	cursor: move;
	text-align: center;
	position: relative;
	border: 1px solid transparent;
}
.gridDragDrop li div {
	background: #FFFFFF center no-repeat;
	background-size: contain;
	border: 1px #DCDEDE solid;
	margin-bottom: 3px;
	height: 140px;
	width: 140px;
}
.gridDragDrop h6 {
	position: absolute;
	top: 0;
	right: 0;
}
.gridDragDrop p {
	margin: 5px 0 7px;
	width: 140px;
	overflow: hidden;
	font-size: 13px;
	line-height: 1.2;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.gridDragDrop .actionDelete { /* overlayed delete button on search results page */
	position: absolute;
	top: 115px;
	left: 5px;
	padding: 0;
	font-size: 0;
	height: 20px;
	width: 20px;
}
.gridDragDrop .actionDelete:before {
	top: 1px;
	left: 5px;
}


.rightCol {
	border: 1px #DCDEDE solid;
	padding: 20px;
	-webkit-border-radius: 10px;
	border-radius: 10px;
}
.rightCol h2 {
	margin-top: -5px;
}

.fileToggle {
	border: 1px #DCDEDE solid;
	padding: 10px;
	-webkit-border-radius: 3px;
	border-radius: 3px;
	overflow: hidden;
	margin-bottom: 20px;
}
.fileToggle input[type="file"] {
	width: auto;
	margin-bottom: 0;
}


.jumpList {
	margin-top: -5px;
}
.jumpList a {
	display: block;
	position: relative;
	padding: 5px 0 5px 28px;
	text-decoration: none;
}
.jumpList a:after {
    content: "\f061"; /* info-circle */
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    text-decoration: inherit;
/*--adjust as necessary--*/
	color: #8EB743;
	font-size: 14px;
    position: absolute;
    top: 7px;
	left: 10px;
}


.top-th-table {
	margin: 15px 0;
	width: 100%;
}
.top-th-table th {
	color: #22758A;
	font: normal 14px/1.2 Montserrat, Arial, Helvetica, sans-serif;
	letter-spacing: -0.025em;
	text-transform: uppercase;
	border-bottom: 1px solid #DCDEDE;
	padding: 10px;
}
.top-th-table td {
	border-bottom: 1px solid #DCDEDE;
	padding: 10px;
}
.top-th-table td small {
	display: block;
}

.top-th-table form {
	white-space: nowrap;
}
.top-th-table form input[type=text] {
	width: 20px;
}


#pagination {
	margin: 30px 0;
	text-align: center;
}
#pagination a, #pagination strong {
	display: inline-block;
	vertical-align: middle;
	width: 22px;
	height: 20px;
	font: normal 14px/1.2 Montserrat, Arial, Helvetica, sans-serif;
	padding: 2px 0 0;
	margin: 0 2px;
}
#pagination a {
	color: #8EB743;
	text-decoration: none;
}
#pagination a:hover {
	background: #F5F5F5;
}
#pagination strong {
	background: #22758A;
	color: #FFFFFF;
	font-weight: normal;
}



/* ============================================= specific pages ============================================= */

#activityFeed {
	border-top: 1px solid #DCDEDE;
}
#activityFeed li {
	border-bottom: 1px solid #DCDEDE;
	overflow: hidden;
	padding: 10px 5px;
	white-space: nowrap;
}
#activityFeed li:hover {
	background: #F5F5F5;
}
#activityFeed li small {
	display: block;
	float: left;
	width: 70px;
	white-space: normal;
}
#activityFeed li p {
	margin: 0 0 0 70px;
	font-size: 14px;
	line-height: 1.2;
	white-space: normal;
}

/* Edit product  */

#additionalCats .button {
	float: right;
	margin-top: -6px;
	padding: 2px 4px 2px 20px;
}
#additionalCats .button::before {
	top: 2px;
}
#productImageList ul {
	margin: 0;
}
#productImageList .gridDragDrop li {
	margin: 10px;
}
#content .dropzone {
	min-height: 140px;
	border-style: dashed;
}
#content .ui-state-highlight {
	background-color: #FFFBBB;
}
.ui-state-highlight {
	background-color: red;
}

/* Stock, Product options  */

.productStockSort i {
	vertical-align: middle;
}
.productStockSort label {
	font-size: 12px;
	white-space: nowrap;
}
.productStockSort div {
	display: inline-block;
	vertical-align: middle;
	width: 7.5%;
	padding-right: 5px;
}
.productStockSort div:nth-child(2), .productStockSort div:nth-child(3) {
	width: 15%;
}
.productStockSort div:nth-child(4) {
	width: 12%;
}
#tabularList.productStockSort input, #tabularList.productStockSort input.bin[type="text"] {
	padding: 5px 0 6px 8px;
	width: 100%;
}
#tabularList.productStockSort .actionButton, #tabularList.productOptions .actionButton {
	width: 0;
	margin: 14px 0 10px;
	padding-left: 15px;
	overflow: hidden;
	color: red;
}

#tabularList.productOptions i {
	display: block;
}
#tabularList.productOptions .actionButton {
	clear: none;
	float: right;
	margin-top: 0;
}
#tabularList.productOptions input[type="text"] {
	width: 100%;
}
#tabularList.productOptions li > div:last-child small {
	display: inline;
	padding-left: 10px;
}


/* Search products, Recommend tab (in edit) */

#results .gridDragDrop li, #recProducts .gridDragDrop li {
	cursor: default;
}
#results .gridDragDrop .actionEdit {
	margin-right: 10px;
}


/* indent additional cats */

#addCatsList {
	margin: -10px 0 30px;
	padding: 0;
}
#addCatsList > li {
	margin: 0;
	padding: 10px 0;
	border-bottom: 1px solid #DCDEDE;
}
#addCatsList > li label {
	margin: 0;
}
#addCatsList > li li label { /* 2nd and 3rd level */
	font-family: 'Open Sans', Verdana, Arial, Helvetica, sans-serif;
	line-height: 1.2;
	text-transform: none;
/*	border-top: 1px solid #DCDEDE;*/
}
#addCatsList > li > ul > li > label { /* 2nd level only */
	font-weight: bold;
}
#addCatsList li small {
	display: inline-block;
	margin-left: 7px;
	font-size: 14px;
	font-weight: bold;
}
#addCatsList li ul {
	margin: 10px 0 -10px 30px;
}
#addCatsList li li {
	margin: 0 0 10px;
}
#addCatsList li li ul {
	margin: 10px 0 25px 30px;
}
#addCatsList input[type="checkbox"] {
	margin: 2px 10px 0 0;
}


#tabularList.dataList li {
	padding-bottom: 10px;
}
#tabularList.dataList span {
	display: inline-block;
	vertical-align: middle;
	width: 20%;
}
#tabularList.dataList strong {
	display: inline;
}
#tabularList.dataList small {
	text-transform: uppercase;
	padding-right: 5px;
}
#tabularList.dataList .owner {
	padding-left: 20px;
	position: relative;
}
#tabularList.dataList .owner:before {
    content: "\f003"; /* envelope-o */
	color: rgba(80,89,92,0.5);
    font: normal 14px/1 FontAwesome;
    position: absolute;
    top: 4px;
    left: 0;
}
#tabularList.dataList strong {
	padding: 0 10px 0 0;
}
#tabularList.dataList .actionButton {
	margin-bottom: 0;
}

/* order details */
#tabularList.dataList.orderDetails span {
	width: 45%;
}
#tabularList.dataList .optionsSelected li {
	border: none;
	display: inline-block;
	margin: 0;
	padding: 5px 10px 0 0;
	background: none;
	color: #A7ACAD;
	font-size: 12px;
	text-transform: none;
}


/* gift voucher specific */
#tabularList.ordersList span {
	width: 18%;
}
#tabularList.ordersList span:first-child {
	width: 100px;
}
#tabularList.ordersList span:first-child small {
	text-transform: none;
}
#tabularList.ordersList .voucherValue {
	width: auto;
}
#tabularList.ordersList .voucherValue small {
	border: 1px solid #DCDEDE;
	background: #FFFFFF;
	margin-left: 5px;
	padding: 1px 5px 2px;
	position: relative;
	top: -1px;
}

/* promo codes specific */
#tabularList.promoList span {
	width: 48%;
}


.dropMenu {
	margin: 0;
	padding: 0;
	font-size: 0;
	white-space: nowrap;
}
.dropMenu li {
	position: relative;
	margin: 0;
	padding: 0;
	display: inline-block;
	vertical-align: middle;
}
.dropMenu li a {
	display: block;
	cursor: pointer;
	text-decoration: none;
}
.dropMenu > li > ul {
	margin: 0;
	padding: 0;
	width: 150px;
	background: #FFF;

	float: none;
	position: absolute;
	top: 100%;
	right: 0;
	z-index: 10;
	visibility: hidden;
	transition: 0 0; /* delay of 1 seconds on hover off */
}
.dropMenu li li {
	display: block;
	margin-top: 1px;
}
.dropMenu li:hover ul {
  visibility: visible;
  transition-delay: 0s; /* react immediately on hover */
}


.dropMenu .fa-caret-down {
	margin-left: 1px;
	height: 26px;
	font-size: 1rem;
}
.dropMenu .fa-caret-down::before {
	left: 11px;
}


#overlay {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 2;
	background: rgba(0,0,0,0.7);
}

#closeOverlay {
	position: absolute;
	top: 10px;
	right: 10px;
	z-index: 1;
	padding-bottom: 2px;
	width: 30px;
	line-height: 28px;
	border-radius: 30px;
	background: #22758A;
	color: #FFFFFF;
	font-size: 26px;
	text-align: center;
	text-decoration: none;
}

#overlayContent {
	position: relative;
	top: 10px;
	left: 50%;
	bottom: 5%;
	transform: translateX(-50%);
	padding: 20px 30px;
	max-width: 1000px;
	height: 90%;
	border-radius: 5px;
	overflow: auto;
	background: #FFFFFF;
}

/* Used in reports */
.income {
	color: green;
}

.expense {
	color: #ad0808;
}