*, html {
	margin: 0px; padding: 0px;
}
body { 
	background: #f7f7f7;
	background-image: url("/gfx/logo.png");
	background-position: left top;
	background-size: 30%;
	background-repeat: no-repeat;
	font-family: "Open Sans", Sans-Serif;
	font-weight: normal;
	color: #333;	
	font-size: 1em;
}

a img {
	border:none;
}

textarea {
	width: 80%;
	height: 10em;
	font-size: 1.2em;
	padding: 1em;
	display: block;
}

.logo {
	width: 50%;
	display: block;
}
.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;
}

.list {
	display: block;
	margin: 1em 0em 0em;
	width: 95%;
	font-size: 1em;
}

.list th,
.list td {
	padding: 0.5em;
}

.list td {
	font-family: monospace;
	font-size: 1.2em;
}

#nav {
	width: 28vw;
	height: auto;
	min-height: 100vh;
	position: absolute;
	top: 30%;
	left: 2vw;
	background-color: transparent;
	float: left;
}

#nav ul {
	padding: 0px 0px 0px 2em;
	list-style-type: none;
}

#nav ul li a {
	text-decoration: none;
	color: #0093d2;
}

#main {
	width: 66vw;
	height: auto;
	min-height: 100vh;
	position: absolute;
	top: 1%;
	left: 32vw;
	background-color: transparent;
	float: right;
}

.fullwidth {
	width: 100vw !important;
}

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

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

.loginform {
	padding: 2.5%;
}

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

.panel a {
	text-decoration: none;
}

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='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%;
}

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;
}

.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;
}

.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;
}
.yellowback {
	background-color: #fbdf23 !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: #0093d2 !important;
	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;
}

.blankday {
	background-color: #ccc;
}

.day {
	text-align: center;
}

.month {
	background-color: #d42e2e;
	text-align: center;
	font-size: 1em !important;
	padding: 0.5em 0em !important;
	color: white;
	padding: 1em 0em;
}

.holiday {
	background-color: #63d563;
}