body {
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 12px;
	color: #333;
	background: #e6e6e6;
	width: 1200px;
	margin: 0px auto;
}

tr.spacer {
	height: 20px;
}

a {
	text-decoration: none;
	font-weight: bold;
}

a img {
	border: 0px;
}

a:link {
	color: #4781A4;
}

.box {
	background: url(images/bg-mask.png);
	border: solid 1px #D5DBDE;
	-moz-box-shadow: 0 1px 0 #c6cccf;
	-webkit-box-shadow: 0 1px 0 #c6cccf;
	box-shadow: 0 1px 0 #c6cccf;
	padding: 5px;
	padding-right: 10px;
	margin: 5px;
	margin-bottom: 10px;
	clear: both;
}

.box:after {
	content: '';
	display: block;
	clear: both;
}

.left-box {
	float: left;
	width: 46%;
	clear: none;
}

.right-box {
	float: right;
	width: 47%;
	clear: none;
}

.messages {
	color: blue;
}

#page-sidebar {
	width: 20%;
	float: left;
}

#page-content {
	width: 80%;
	float: right;
}

#page-header #logo {
	/*background: url('images/logo.png');*/
	background: url(images/new_logo.png);
	height: 70px;
	width: 1180px;
}

#page-header #links {
	float: right;
	margin-right: 10px;
}

#page-header #links a {
	color: white;
	padding-left: 10px;
	text-decoration: underline;
	font-size: xx-small;
}

#page-header #links a:hover {
	color: #bbbbbb;
}

#page-header {
	background: none;
	clear: both;
	padding: 5px;
	padding-right: 10px;
	margin: 5px;
	margin-bottom: 10px;	
}

#page-content.full {
	width: 100%;
}

#page-footer {
	clear: both;
}

nav ul {
	list-style-type: none;
	padding-left: 3px;
}

nav ul > li > a {
	display: block;
}

nav ul > li > a:hover {
	background-color: #f7f7f7;
}			

nav ul > li {
	margin: 2px;
	padding: 2px;
}

li img {
	vertical-align: middle;
	margin: 2px;
	width: 32px;
	height: 32px;
}

.box > header > h1 {
	font-size: 16px;
	margin: 2px;
	padding: 2px;
}

.box > header.with-actions > h1 {
	float: left;
	width: 50%;
}

.box > header.with-actions > div {
	float: right;
	width: 49%;
}

.box > header.with-actions > div > * {
	float: right;
}
.box > header.with-actions > div > form > select {
	width: 70%;
}

.expando > header > h1 img {
	float: right;
	cursor: pointer;
}

.expando > header {
	cursor: pointer;
}

.expando h1 a, .expando h1 a:visited {
	text-decoration: bold;
	color: #333;
}

.expando-in {
	display: none;
}

.expando-out {
	
}

#page-sidebar h1 {
	text-align: center;
}

#page-breadcrumbs > span {
	float: right;
}

#page-breadcrumbs#logout {
	float: right;
}

.sub-list img {

	padding: 2px;
}			

.sub-list {
	padding-left: 10px;
}

table {
	width: 100%;
	border-spacing: 0px;
}

.static-mouseover, .mouseover:hover {
	background-color: #f7f7f7;
}

td.empty-result-set {
	text-align: center;
	font-style: italic;
	color: red;
	padding: 20px;
}

td {
	margin: 0px;
	padding: 5px;
}

td.break-all {
	word-break: break-all;
}

.element > input[type="checkbox"] {
	margin-left: 50%;
}

td.action {
	text-align: center;
	padding: 5px;
	width: 30px;
}

td.number {
	text-align: center;
}

input[type=submit], button {
	cursor: pointer;
}

button {
	font-weight: bold;
}

button > img {
	vertical-align: middle;
}

td.action > button.delete {
	width: 5px;
	height: 25px;
	padding: 0px;
}

td.action > button.new {
	float: right;
}

.pagination {
	text-align: right;
}

.sub-form {
	text-align: center;
}

input[type="submit"] {
	
}

ul.form-errors {
	color: red;
	font-weight: bold;
}

input, button.new {
	padding: 3px;
	border: 1px solid grey;
	font-size: 10px;
}

.element > input[type="text"], .element > input[type="password"] {
	width: 90%;
}

input[type="file"] {
	border: 0px;
	font-weight: bold;
}

.form-save input[type="submit"], .form-save button {
	margin-left: 90%;
	width: 10%;
}

.form-save-new {
	margin-left: 80%;
}

.form-save-new input[type="submit"], .form-save-new .new {
	width: 48%;
}

.error {
	background: red !important;
	color: white !important;
}

ul.horizontal-list > li {
	display: inline;
}

ul.horizontal-list {
	list-style-type: none;
	margin: 0;
	padding: 0;
	float: left;
	width: 100%;
}

iframe {
	width: 120%;
	height: 600px;
	border: 0px solid black;
}

canvas {
	
}

select {
	width: 100%;
}

.nostretch > select {
	width: auto;
}

.note {
	color: red;
	font-style: italic;
	margin: 10px;
}

textarea {
	width: 100%;
	resize: none;
}

textarea[readonly] {
	background: lightgray;
}

.colour-block {
	width: 20px;
	height: 20px;
	margin-right: auto; margin-left: auto;
}

.preloader {
	margin-left: 40%;
	/*margin-top: 100px;*/
	padding-top: 5px;
    height: 19px; 
	width: 220px;
	background: url(images/preloader.gif) center center no-repeat;
	font-weight: bold;
	font-size: smaller;
	text-align: center;
}

th.dividor {
	padding: 20px;
	font-size:larger ;
}

/* Load Masking */
.loadmask
{
	z-index: 100;
	position: fixed;
	top: 0;
	left: 0;
	-moz-opacity: 0.5;
	opacity: .50;
	filter: alpha(opacity=50);
	background-color: #CCC;
	width: 100%;
	height: 100%;
	zoom: 1;
}

.masked
{
	cursor: wait;
}

.masked-hidden
{
	visibility: hidden !important;
}

/* file upload */
.upload-button {
	width: 110px;
	height: 22px;
		
	border: 1px solid black;
	text-align: center;
	padding: 5px;
		
	cursor: pointer;
}
	
.upload-button > img {
	vertical-align: middle;
}
	
#fileupload-button input[type="file"] {
	position: absolute;
	top: 0;
	right: 0;
	margin: 0;
	opacity: 0;
	filter: alpha(opacity=0);
	transform: translate(-300px, 0) scale(4);
	ont-size: 23px;
	direction: ltr;
	cursor: pointer;
}

#fileupload-button button {
	padding: 1px 6px 1px 6px;
	line-height: 24px;
	font-weight: bold;
}

#fileupload-button button img {
	width: 22px;
	height: 22px;
	vertical-align: middle;
}

button.small-file-upload {
	position: relative;
		
	overflow: hidden;
}
	
button.small-file-upload > input[type=file] {
	position: absolute;
		
	top: 0;
	left: 0;
		
	opacity: 0;
	zoom: 2;
}

.snapin-search form > input[type="submit"],
.snapin-search form > button {
	float: right;
}

.snapin-search:after {
	content: '';
	display: block;
	clear: both;
}

/* popup */
.popup {
	display: none;

	position: fixed;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
		
	background: rgba(230, 230, 230, 0.8);
}
	
.popup > .inside {
	position: relative;

	padding: 10px;
	margin: 2% auto;
	
	width: 1100px;
	max-width: 100%;

	height: 95%;

	overflow: auto;
		
	background: #ececec;
	
	box-shadow: 2px 2px 0px #d5dbde;
	box-sizing: border-box;
}
	
.popup > .inside > header {
	position: relative;
		
	margin: 10px 0;
	
	height: 30px;
	line-height: 30px;
}
	
.popup > .inside > header > h1 {
	margin: 0;
}
	
.popup > .inside > header > .close {
	position: absolute;
		
	top: 0;
	bottom: 0;
	
	right: 10px;
	
	width: 30px;		
	
	background-image: url('images/scalable/actions/window-close-symbolic.svg');
	background-size: 100% 100%;
	
	cursor: pointer;
}
	
.popup > .inside > article {
	height: calc(100% - 60px);
	margin: 5px;
	overflow: auto;
}

.popup > .inside .actions {
	float: right;
}

.popup > .inside .actions:after {
	display: block;
	content: '';
	clear: both;
}

.popup > .inside .box.error {
	margin: 0;
}

.popup > .outside {
	position: absolute;

	top: 0;
	bottom: 0;
	right: 0;
	left: 0;
}

.gradient {
	/* IE10 Consumer Preview */ 
	background-image: -ms-linear-gradient(top, #E3E3E3 0%, #F6F6F6 100%);

	/* Mozilla Firefox */ 
	background-image: -moz-linear-gradient(top, #E3E3E3 0%, #F6F6F6 100%);

	/* Opera */ 
	background-image: -o-linear-gradient(top, #E3E3E3 0%, #F6F6F6 100%);

	/* Webkit (Safari/Chrome 10) */ 
	background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #E3E3E3), color-stop(1, #F6F6F6));

	/* Webkit (Chrome 11+) */ 
	background-image: -webkit-linear-gradient(top, #E3E3E3 0%, #F6F6F6 100%);

	/* W3C Markup, IE10 Release Preview */ 
	background-image: linear-gradient(to bottom, #E3E3E3 0%, #F6F6F6 100%);
}

.menu {
	width: 98%;
	height: auto;
		
	margin: 0 auto;
}
	
.menu > ul {
	display: flex;
	list-style: none;
	padding-left: 0;
	margin: 0;
}
	
.menu > ul > li {
	padding: 10px;
	border: 1px solid #d5dbde;
	border-bottom: 0;
	border-right: 0;
	
	cursor: pointer;
}

.menu > ul > li.active {
	font-weight: bold;
}
	
.menu > ul > li:last-child {
	border-right: 1px solid #d5dbde;
}
	
.menu > ul > li:hover {
	background: #e6e6e6;
}
	
.menu > div {
	border: 1px solid #d5dbde;		
	padding: 10px;
	
	height: 100%;
	display: none;
}

.menu > div.active {
	display: block;
}
	
.menu > div:after {
	content: '';
	display: block;
	clear: both;
}

header.both-sides {
	line-height: 30px;
}

header.both-sides:after {
	content: '';
	display: block;
	clear: both;
}

header.both-sides > h1 {
	float: left;
}

header.both-sides > div {
	float: right;
}

header.both-sides > div select {
	width: auto;
}

.snapin-search dl {
	border: 1px solid #d5dbde;
}

.snapin-search dl > dt,
.snapin-search dl > dd {
	margin: 5px;
}

.snapin-search dl > dt {
	font-weight: bold;
}

.snapin-search dl > dd {
}

.snapin-search dl > dd input[type=text] {
	width: 100%;
	box-sizing: border-box;
}

/* Dev */
body.dev:before {
	content: 'Development Environment';
	padding: 10px;
	font-size: 1.4em;
	color: white;
	display: block;
	margin: 10px;
	font-weight: bold;
	background: red;
}

body.dev {
	background: #ffaaaa;
}