*, html {
	margin: 0px; padding: 0px;
}
body { 
	background: #f7f7f7;
	font-family: "Open Sans", Sans-Serif;
	font-weight: normal;
	color: #333;	
	font-size: 1em;
}
.description {
	width: 80%;
	margin: 2em 0px 2em 5%;
	padding-top: 1em;
}
.info {
	border-right: solid 4px #008cdc;
	font-size: 3em !important;
	margin-right: 2%;
	padding: 8px;
	display: block;
	float: left;
}
#sticky {
	padding-top: 1em;
	background-color: #fff;
}
.presetdate {
	padding: 0.3em 1em;
	color: white !important;
	cursor: pointer;
}
#presets {
	padding: 0.5em 0em 2em 0em;
}

.toolkit {
	width: 32px;
	height: 32px;
	display: block;
	text-align: center;
	font-size: 1.4em;
	background-color: #444;
	color: #555;
	cursor: pointer;
}

.title {
	font-family: "Oswald", Cursive;
	font-weight: 300;
	color: #ddd;	
	font-size: 2.4em;
	display: block;
	max-width: 30%;
	margin-left: 16px;
	padding-bottom: 16px;
}
.title a {	
	text-decoration: none;
	color: #aaa !important;
}
.titlesmall {
	font-family: "Open Sans", Sans-Serif;
	font-weight: 200;
	color: #333;	
	font-size: 1em;
	display: block;
	max-width: 30%;
	margin-left: 2%;
}
a img {
	border:none;
}
.logo {
	width: 180px;
	display: block;
	margin-top: 2em;
	margin-left: 8px;
}
.clear {
	clear: both;
}
#container { 
	width: 100vw;
	height: 110vh;
	margin: 0px auto;
	border: none;
	position: relative;
}
#container.admin { 
	margin-top: 0px !important;
}
#container .content { 
	width: 100%;
	height: 100%;
	margin: 0px auto;
	text-align: left;
	padding: 0px;
	color: #111;
}

#main {
	width: 100%;
	height: 100vh;
}

#mainnav {
	background-color: #008cdc;
	width: 10%;
	height: 110vh;
	float: left;
}

#mainnav ul {
	padding: 1em;
}
#mainnav li
{
	list-style-type: none;
	display: block;
	padding: 10px 4px 10px 8px;
	background-color: #008cdc;
	color: #fff;
	margin-bottom: 2px;
	font-size: 14px;
	cursor: pointer;
	border: none;
}
#mainnav ul li a {
	text-decoration: none;
	color: #fff;
	display: block;
}

#maincontent {
	width: 90%;
	height: 100vh;
	float: right;
}

.fullwidth {
	width: 100% !important;
}

#page {
	width: 90%;
	padding: 5%;
	height: 90vh;
	overflow: auto;
	font-size: 1.1em;
}

#loginpanel {
	margin: 32px auto !important;
	float: none;
	height: 400px !important;
	font-size: 0.8em;
}


.panel {
	width: 25%;
	padding: 2.5%;
	height: 20%;
	max-height: 300px;
	float: left;
	border: solid 1px #aaa;
	margin-right: 8px;
	margin-bottom: 8px;
	background-color: white;
	border-top: solid 4px #008cdc;
}

.panel a {
	text-decoration: none;
}

.campaigntitle {
	display: block;
	font-size: 1.5em;
	height: 2em;
	max-height: 3em;
}

.campaigndescription {
	display: block;
	padding: 8px 0px;
	font-size: 1em;
	max-height: 3em;
}

.campaigndetail {
	display: block;
	padding: 8px 0px;
	font-size: 1em;
	max-height: 3em;
}

.campaignlandingpage {
	display: block;
	padding: 8px 0px;
	font-size: 1em;
	max-height: 1em;
}

.live {
	display: block;
	background-color: #008cdc;
	color: white !important;
	width: 6em;
	padding: 8px;
	text-align: center;
}

.notlive {
	display: block;
	background-color: #fbb223;
	color: white !important;
	width: 6em;
	padding: 8px;
}

.panel:hover {
	cursor: pointer;
}

a.panellink {
	display: block;
	text-decoration: none;
	color: #000;
}

#reportnav
{
	padding: 0px 1% 0px 2%;
	overflow: auto;
	height: auto;
/*	width: 19%;
	height: 100%;
	background-color: #008cdc;
	float: left;
	position: absolute;
*/}

.showhide {
}

#reportnav ul {
	padding: 16px 0px 0px;
}
#reportnav li
{
	list-style-type: none;
	display: block;
	padding: 10px 4px 10px 8px;
	margin-bottom: 2px;
	font-size: 14px;
	cursor: pointer;
}
#reportnav ul li a {
	text-decoration: none;
	display: block;
}
#reportnav ul li:hover {
}

.navicon {
	color: white;
	margin-right: 8px;
}

#reportcanvas 
{
	height: 98%;
	background-color: white;
	padding: 3%;
	float: right;	
	overflow: auto;
	position: relative;
	width: 94%;
}

.narrow {
	width: 69%;
}

.wide {
	width: 96%;
}

#mobilebox {
	display: none;
}
#nav {
	width: 94%;
	padding: 8px 3% 4px 3%;
	margin-top: -48px;
	background-color: transparent;
	text-align: right;
	color: #333;
}
#nav a {
	text-decoration: none;
}

.searchblock {
	background-color: #008cdc !important;
	color: white;
}

.space {
	width: 1em; 
}
h1 { font-size: 1.7em; margin-bottom: 0.5em; color: #008cdc; padding-top: 16px; font-weight: normal; }
h2 { font-size: 1.3em; color: #000; margin-bottom: 0.5em; padding-top: 1em; }
h3 { font-size: 1em; color: #333; margin: 1.5em 0em; }
a, li {
	color: #777777;
}
.cursor {
	cursor: pointer;
}
.selected { border-left: solid 8px #fbb223; }
input
{
	padding: 0.5em;
	font-size: 0.9em;
	max-width: 320px;
	width: 90%;
	display: block;
	margin: 2px 0px 1em 0px;
	background-color: white !important;
	border: solid 1px #aaa;
	min-height:1.4em;
	cursor: pointer;
	font-family: Arial, Sans-Serif;
}
input[type='number'] {
	background-color: lightgreen !important;
}
input[type='number']:disabled {
	background-color: #dedede !important;
}
input[type='checkbox']
{
	display: inline;
	width: 100%;
	margin: 0px;
}
input[type='checkbox'].inline
{
	display: inline;
	width: 16px !important;
	margin: 0px !important;
}
code {
	font-family: monospace;
	color: green;
	font-size: 1.1em;
}
fieldset {
	border: solid 1px #eee;
	padding: 1em;
	margin: 0.5em 0em;
	font-size: 0.8em;
}
fieldset.panel {
	display: block;
	width: 45%;
	float: left;
	min-height: 40em;
}
.footer {
	width: 80%;
	text-align: left;
	font-size: 0.9em;
}
p {
	margin: 1em 0em;
	padding: 0px;
	font-size: 0.85em;
}
.caps {
	text-transform: capitalize;
}

.fade {
	position: absolute;
	top: 0px;
	left: 0px;
	height: 100%;
	width: 100%;
}

.fade1 {
	background: rgba(255,255,255,0.5);
}
.fade2 {
	background: rgba(255,255,255,0.7);
}
.fade3 {
	background: rgba(255,255,255,0.9);
}

.datatable {
	width: 100%;
	border: none;
	font-family: Arial,Sans-Serif;
	cursor: grab;
}
.datatable td,
.datatable th {
	font-size: 0.8em;
	padding: 0.1em 0.5em;
	border: solid 1px #dddddd;
	position: relative;
}
.datatable .home td {
	font-size: 1em;
}
.datatable td {
	max-width: 6em !important;
	word-wrap: break-word;
}	
.datatable .overflow {
	width: 100%;
	max-height: 4em;
	overflow: hidden;
}

.datatable.narrow {
	width: 50%;
}

.test input {
	display: inline !important;
}
.test h3 {
	display: inline !important;
	padding-left: 1em;
}

th.shade {
	background-color: #ddd;
}

.successful {
	background-color: #60ba47;
	font-size: 0.7em;
	float: left;
}
.rejected {
	background-color: #ba5847;
	font-size: 0.7em;
	float: left;
}
.alt {
	background-color: #efefef;
}
.bar {
	height: 16px;
	border: none;
	padding: 0.5% 0px 0.5% 1%;
	text-align: left;
	color: white;
	margin-bottom: 1px;
}	
#daterange {
	padding: 0.8em 0.5em 0em 0.5em;
	text-align: center;
	background-color: #efefef;
	font-size: 0.8em;
}
.daterange {
	display: inline-block;
	padding: 8px 8px 8px 1em;
	border: solid 1px #008cdc;
	font-size: 1em;
	color: #aaa;
	cursor: pointer;
}
.daterange:hover {
	border: solid 1px #fbb223;
	background-color: #fbc901;
	color: white; 
}
.expand {
	font-size: 1.5em;
}
#datepicker {
	display: block;
	font-size: 0.8em;
}
.inline {
	display: inline;
	padding-top: 0.5em;
}
#search {
	padding-top: -4px;
}
.small {
	width: 12em;
}

.tiny {
	width: 5em;
}

.smalltext {
	font-size: 0.75em;
}

.firstname {
	font-size: 1.75em;	
	text-transform: capitalize;
}
.surname {
	font-size: 2em;
	text-transform: uppercase;
}
.uppercase {
	text-transform: uppercase;
}
.capitalise {
	text-transform: capitalize;
}	
.email {
	display: block;
	font-size: 1.5em;
	margin: 0.5em 0em;
}
.address { display: block; padding: 0.5em 0em; }
.addressline, .telephone {
	display: block;
	font-size: 1.5em;
	text-transform: capitalize;	
}
.postcode {
	text-transform: uppercase; 
	padding: 0.5em 0em; 
}
.divider {
	height: 8px;
}
.usercard {
	margin-top: 0.5em;
	padding: 5%;
	width: 38%;
	float: left;
	border: solid 1px #ddd;
	border-radius: 4px;
}
.userdata {
	margin-top: 0.5em;
	padding: 5%;
	width: 38%;
	float: right;
	border: solid 1px #ddd;
	border-radius: 4px;
}
.green {
	color: #00bf00;
}
.rowcount {
	font-family: sans-serif;
}
.red {
	color: #bf0000;
}
.conversion {
	background-color: #ddfad8;
}
.scrub {
	background-color: #faddd8;
}
.chart {
	max-width: 640px;
	margin: 0px auto;
	display: block;
}
.RFchart {
	max-width: 640px;
	margin: 0px auto;
	display: block;
	float: left;
}
.desktopcolumn {
}

.block {
	display: block;
}

.em16 { width: 16em; }

.padding {
	padding: 0.5em; 
}



.blue {
	color: #008cdc !important;
}
.yellow {
	color: #fbb223 !important;
}

.orange {
	color: #fbb223 !important;
}
.blueback {
	background-color: #008cdc !important;
	color: white !important;
}
.orangeback {
	background-color: #fbb223 !important;
	color: white !important;
}
.redback {
	background-color: #d23232 !important;
	color: white !important;
}
.purpleback {
	background-color: #d232c5 !important;
	color: white !important;
}
.greenback {
	background-color: #58d232 !important;
	color: white !important;
}
.white,
.white a {
	color: white !important;
}
.right { float: right; }
.button {
	text-decoration: none;
	display: inline-block;
	width: 10em;
	border: solid 1px white;
	padding: 0.5em;
	background-color: #008cdc;
	color: white !important;
	text-align: center;
}

.big { width: 30em !important; }

.smallbutton {
	text-decoration: none;
	display: inline-block;
	width: 3em;
	border: solid 1px #eee;
	padding: 0.5em;
	text-align: center;
}

.error {
	display: block;
	padding: 1em 0.5em;
}

.modal {
	padding: 2em 0.5em;
	background-color: white;
	color: #333;
	cursor: pointer;
	position: absolute;
	left: 30%;
	top: 20%;
	z-index: 2;
	width: 30%;
	height: 25%;
	display: none;
	text-align: center;
	border: solid 2px #008cdc;
}

.columnselect {
	padding: 0.5em;
	background-color: #008cdc;
	color: white;
	cursor: pointer;
}

.columnselect:hover {
	background-color: #fbb223;
}

.fit {
	width: 100%;
	max-width: 8em;
	height: 100%;
	max-height: 8em;
}

.hidden {
	display: none; 
}

input.selectpublisher {
	display: inline; 
	float: none;
	width: 3em;
	border: solid 1px red;
}

.selectpublishername {
	display: inline; 
	float: none;
	width: 12em;
}

.columns-3 {
	width: 100%;
	column-count: 3;
	column-width: 30%;
	padding-bottom: 3em;
}

.boxtoggle {
	cursor: pointer;
}

.redfroglogo {
	position: absolute;
	width: 180px;
	height: auto;
	left: 75vw;
	margin-top: -128px;
}

.outgoings {
	background-color: red;
	color: white;
}

.income {
	background-color: green;
	color: white;
}

.credit {
	color: blue;
	font-weight: 600;
}

.debit {
	color: red;
	font-weight: 600;
}