@charset "utf-8";
/* ===[ core structure ]=== */
/* stickyfooter */
#content{
	display:table; 
	height:100%; 
	border-collapse: collapse;
	border-spacing: 0; 
	table-layout:fixed;
	position:absolute;
}
#content > header,
#content > main, 
#content > footer{display:table-row;}
#content > header,
#content > footer{height:1px;}
#content > main{height:100%;}
#content > footer .scrollFix{ margin-bottom:1px;}

.container{
	background:#f00;
	display:table-cell;
	height:50px;
}

/*admin sidebar*/
#sidebar{
	background:#000;
	position:absolute;
	top:0;
	height:100%;
}

#sidebar ul{
	white-space: nowrap;
	overflow: hidden;
	list-style: none;
	font-family: 'Source Sans Pro', Helvetica, Arial, sans-serif;
	font-weight: 400;
}

#sidebar li a{display:block;}
#sidebar li a,
#sidebar li label{
	text-decoration:none;
}
#sidebar li.act > a,
#sidebar li.act label,
#sidebar li a:hover,
#sidebar li label:hover{
	color: #fff;
	text-decoration:none;
	cursor:pointer;
}

#sidebar li.act > a,
#sidebar li.act > label{background: #F90019;}
#sidebar li a i,
#sidebar li label i{width:1.4em;}


/* top level only */
#sidebar > ul{
	margin: 14px 0 10px;
}

#sidebar > ul > li > a,
#sidebar > ul > li > label{
	padding: 12px 5px 12px 15px;
	color:#999;
}

#sidebar > ul > li > a span,
#sidebar > ul > li > label span {color: #fff;}

/* sub level only */
#sidebar > ul ul{
	margin:0;
	background:#999;
	padding-left:10px;
}

#sidebar > ul ul li a{
	background:#999;
	color:#000;
	padding: 8px 5px 8px 15px;
}

/*#sidebar > ul ul li a span{color: #000;}*/
.rdOpen, .rdClose{display:none;}
.lblOpener b, .lblCloser b{

	position:absolute;
	right:0;
	width:1.4em;
	top:16px;
}

.lblOpener,
.lblCloser{display:block; position:relative;}
.rdOpen:checked ~ .lblOpener,
.rdClose:checked ~ .lblCloser{display:none;}

.rdOpen:checked ~ ul{display:block;}
.rdClose:checked ~ ul{display:none;}

	
/*logo*/
.logo{
	display: block;
	width:100%;
	text-align: center;
}

.logo img{
	max-width:100%;
	max-height:100%;
	vertical-align:middle;
}

/*expanded nav*/
#sidebar{
	width:230px;
	/*left:-230px;*/
	z-index:10;
}
#content{
	/*width:calc(100% - 230px); 
	margin-left:230px;*/
	width:100%;
}

#content header .cell,
#content main .cell,
#content footer .cell{
	padding-left:238px;		
}

.logo{height:150px;}

/*collapsed nav*/
.collapse #sidebar{
	width:50px;
	/*left:-50px;*/
}
.collapse #content{
	/*width:calc(100% - 50px);
	margin-left:50px;*/
}
.collapse .logo{
	height:50px;
	line-height:50px;
}

.collapse #content header .cell,
.collapse #content main .cell,
.collapse #content footer .cell{
	padding-left:58px;		
}

.collapse #sidebar li a span,
.collapse #sidebar li label span{display:none;}
.collapse #sidebar li label b{padding-left:0.2em;}

/* hidden nav */
.hidden #sidebar{display:none;}
.hidden #content{
	width:100%;
	margin:0;
}

.hidden #content > header h1{
	margin-top:0.4em;
	margin-left:0.2em;
} 

/*main structure*/
#content > header, 
#content > main,  
#content > footer{
	width:100%;
}

#content > header .cell, 
#content > main .cell,  
#content > footer .cell{
	display:table-cell;
}

#content > header .cell{ 
	background:#000;
	height:50px;
}

/* sidebar toggle */
#sidebarToggle{
	font-family: fontAwesome;
	font-size:18px;
	display:inline-block;
	padding:0 12px 0 15px;
	line-height:50px;
	color:#F90019;
	text-decoration:none;
}
	
#sidebarToggle::before{
	content: "\f0c9"
}

#sidebarToggle:hover{
	cursor:pointer;
	text-decoration:none;
	background:#999;
}

/* current user / signout link */
#user{
	display:inline-block;
	background:#6B6B6B;
	color:#fff;
	height:100%;
	float:right;
	/*padding:15px;*/
	min-width:140px;
	text-align:left;
	position:relative;
}

#user > span{display:block; height:100%; padding:15px;}

#user i.fa-user-circle{margin-right:0.4em;}
#user i.fa-caret-down{margin-left:0.4em;}
#user i.fa-sign-out{margin-right:0.4em;}

#showUser:checked ~ #user, 
#user:hover{
	background:#999;
	cursor:pointer;
}

#user ul{
	list-style:none;
	margin:0;
	padding:0;
	position:absolute;
	top:50px;
	right:0;
	width:100%;
	display:none;
}

#user ul li a{
	background:#F9F9F9;
	color:#666;
	width:100%;
	display:block;
	padding:10px;
	text-decoration:none;
}

#user ul li a i{margin-left:0.4em;}
#user ul li a:hover{
	background:#e7e7e7;
	text-decoration:none;
	cursor:pointer;
}
#showUser{display:none;}
#showUser:checked ~ #user ul{display:block;}

/*current page header*/
#content > header h1{
	display:inline-block;
	font-family:'Source Sans Pro', sans-serif;
	font-size:21px;
	color:#fff;
} 

#content > header h1 i{margin:0 4px;}
#content > header h1 small{
	font-size:17px;
}

#content > main{background:#f4f4f4;}

#content > main .cell{ 
	padding-top:0.8em;
	padding-right:0.8em;
	padding-bottom:0.8em;
}

#content > footer{
	background:#999;
	color:#fff;
}

#content > footer .cell{ 
	line-height:40px;
	text-align:center;
}

/* ===[ tables / grids / floats / alignment ]=== */
.wrapper{
	width:100%;
	overflow:auto;
}

.wrapperContainX{
	width:100%; 
	max-width:100%;
	display:block;
	overflow-x:hidden;
}

table{
	width:100%;
	border:none;
	border-collapse:collapse;
}

table td{line-height:24px;}
.gridview td{line-height:inherit;}
table td, .gridview td{
	height:22px;
	text-align:left; 
	vertical-align:top;
}

table td{padding:0;}

.cellpadding2, table.cellpadding2 td {padding:2px;}
.cellspacing2, table.cellspacing2 td{border-spacing:2px;}

.alignleft, table td.alignleft, table th.alignleft{text-align:left;}
.alignright, table td.alignright, table th.alignright{text-align:right;}
.aligncenter, table td.aligncenter, table th.aligncenter{text-align:center;}

.vtop, table td.vtop{vertical-align:top;}
.vmiddle, table td.vmiddle{vertical-align:middle;}
.vbottom, table td.vbottom{vertical-align:bottom;}

.fright{float:right;}
.fleft{float:left;}
.clear{clear:both;}


 /* ===[ Grids ]=== */
.gridview, 
.grid .gridview {
	background:#fcfcfc;
	border:1px solid #424242;
	font-family:Verdana,Arial, Helvetica, sans-serif;
	font-size:11px;
	line-height:18px;
	margin-bottom:0.2em;
}

.gridview th, 
.headers{
	background:#000;
	color:#fff;
	font-family:Verdana,Arial, Helvetica, sans-serif;
	font-size:1em;
	font-weight:bold;
	padding:0.4em 0.4em;
	text-align:left;
	vertical-align:middle;
}

.gridview th a{
	color:inherit; 
	padding-right: 18px;
	position: relative;
	display: block;
	width: 100%;
}

.gridview th a:before,
.gridview th a:after {
	border: 4px solid transparent;
	content: "";
	display: block;
	height: 0;
	right: 5px;
	top: 50%;
	position: absolute;
	width: 0;
}
.gridview th a:before {
	border-bottom-color: #f00;
	margin-top: -9px;
}
.gridview th a:after {
	border-top-color: #f00;
	margin-top: 1px;
} 

.gridview th.asc a:after{border-top-color: transparent;}
.gridview th.desc a:before{border-bottom-color: transparent;}

table.cellspacing2 td.headers,
table td.headers{padding:0.2em 0.4em;}

.grid .gridheaders{height:auto;}
 
.gridview > thead > tr, 
.gridview > tbody > tr, 
.grid .gridview .gridrow{border-bottom:1px solid #424242;}

.gridview tr:hover, 
.gridrow:hover{background:#dedede;}

.gridview td{padding:0.4em; height:1.4em;}
.grid .gridrow .col{padding:0.2em;}

.gridview .fa-trash {
	color:#808080;
	font-size:1.7em;
	padding:0.2em 0.4em;
	vertical-align:middle;
	float:right;
}

.gridview .fa-trash:hover{
	cursor:pointer;
	color:#F40000;
	text-decoration:none;
}

.headers{
	font-weight:bold;
	padding:0.4em 0.2em;
}

.gridview.grey th, 
.headers.grey{background:#999;}

/* ===[ Textboxes ]=== */
.textboxes, input[type='text'], input[type='password'], select, textarea{
	border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
	-webkit-box-sizing: border-box;
  	-moz-box-sizing: border-box;
	box-sizing: border-box;
	border:1px solid #bbb;
	background-color:#fff;
	-webkit-box-shadow:1px 1px 2px -1px rgba(0, 0, 0, 0.15) inset;
	-moz-box-shadow:1px 1px 2px -1px rgba(0, 0, 0, 0.15) inset;
	box-shadow:1px 1px 2px -1px rgba(0, 0, 0, 0.15) inset;
	color:#555;
	padding:4px 6px;
	font-family: 'Source Sans Pro', Helvetica, Arial, sans-serif;
}

.textboxes:focus, input[type='text']:focus, input[type='password']:focus, select:focus, textarea:focus,
.fileUpload:focus + label, .fileUpload + label:hover {
	border:1px solid #F90019;
	-webkit-box-shadow:none;
	-moz-box-box-shadow:none;
	box-shadow:none;
	color:#111; 
	margin:0;
}

/* readonly / disabled textboxes*/
input:read-only{background: #ddd;}
input:-moz-read-only {background: #ddd;} 
/*removed for now. Firefox was applying style to all radiobutton lists*/
/*input:-moz-read-only:hover{cursor: not-allowed;}*/
input:read-only:hover{cursor: not-allowed;}

input[type='text']:disabled, input[type='password']:disabled, select:disabled, textarea:disabled{background: #ddd; color:#111;} 
input[type='text']:disabled:hover, input[type='password']:disabled:hover, select:disabled:hover, textarea:disabled:hover{cursor: not-allowed;}

/* stylised file upload */
.uploadWrapper{
	display:inline-block;
	height:2.1em;
	width:100%;
}
.uploadWrapper .fileUpload{
	width: 0.1px;
	height: 0.1px;
	opacity: 0;
	overflow: hidden;
	position: absolute;
	z-index: -1;
}
.uploadWrapper .fileUpload + label{
	display:inline-block;
	overflow:hidden;
	height:100%;
	vertical-align:top;
	padding:2px 4px;
	position:relative;
}
.uploadWrapper .fileUpload + label .fa{
	width:8%;
	position:absolute;
	top:0.5em;
	left:0.4em;
}
.uploadWrapper .fileUpload + label span{
	display:inline-block; 
	height:100%;
	word-break:break-all;
	max-width:100%;
	padding-left:1.4em;
}
.uploadWrapper .fileUpload + label + a{
	display:inline-block;
	height:100%;
}

/* ===[ Buttons ]=== */
.buttons, a.buttons, input[type='submit']{
	font-family: fontAwesome, 'Source Sans Pro', Helvetica, Arial, sans-serif;
	background: #999;
	color: #fff;
	margin:0 1px;
	display: inline-block;
	padding: 6px 12px !important;
	border-radius:3px;
	-moz-border-radius:3px;
	-webkit-border-radius:3px;
	box-shadow: none;
	font-size:14px;
	font-weight:400;
	text-align: center;
	-webkit-transition: all 200ms ease;
	-moz-transition: all 200ms ease;
	-ms-transition: all 200ms ease;
	-o-transition: all 200ms ease;
	transition: all 200ms ease;
	line-height:1.1em;
	border:none;
	min-width:auto;
	max-width:99%;
	text-decoration:none;
}

/* padding between font awesome and button / textbox text */
.buttons.fa::before,
.fileUpload + label i.fa::before { margin-right: 0.4em; }

.buttons.iconOnly.fa::before { margin-right: 0; }

.buttons:hover, .buttons:hover:enabled, 
a.buttons:hover, a.buttons:hover:enabled, 
input[type='submit']:hover, input[type='submit']:hover:enabled{
	text-decoration:none;
	cursor:pointer;
	background:#888;
	color:#fff;
	-webkit-box-shadow: inset 0 3px 5px rgba(0,0,0,.125);
	box-shadow: inset 0 3px 5px rgba(0,0,0,.125);
} 

.buttons.fixed, a.buttons.fixed, input[type='submit'].fixed{min-width:80px; }

/*black button*/
.buttons.black, a.buttons.black, input[type='submit'].black{background:#314146}
.buttons.black:hover:enabled, a.buttons.black:hover:enabled, input[type='submit'].black:hover:enabled{background:#000;}

/*red button*/
.buttons.red, a.buttons.red, input[type='submit'].red{background:#F40000;}
.buttons.red:hover:enabled, a.buttons.red:hover:enabled, input[type='submit'].red:hover:enabled{background: #E80000;}

/*blue button*/
.buttons.blue, a.buttons.blue, input[type='submit'].red{background:#489FDF;}
.buttons.blue:hover:enabled, a.buttons.blue:hover:enabled, input[type='submit'].blue:hover:enabled{background: #2487D0;}

/*green button*/   
.buttons.green, a.buttons.green, input[type='submit'].green{background:#7FC235;} 
.buttons.green:hover:enabled, a.buttons.green:hover:enabled, input[type='submit'].green:hover:enabled{background:#76B531;}  
   
/*disabled buttons*/
.buttons:disabled:hover, a.buttons:disabled:hover, input[type='submit']:disabled:hover{cursor: not-allowed;}

 /* ===[ Core Text ]=== */
main h1, main h2, main h3, main h4{
	line-height:1em;
	margin:0.6em 0 0.2em 0;
}

main h1 {font-size:1.76rem;}
main h2 {font-size:1.5rem;}
main h3 {font-size:1.35rem;}
main h4 {
	font-size:1.14rem;
	text-decoration:underline;
}

main p{
	font-size:1rem; 
	margin-bottom:0.4em;
}

main a {  
	color: #000; 
	text-decoration:underline;
	cursor:pointer;
	-webkit-transition: all 200ms ease;
	-moz-transition: all 200ms ease;
	-ms-transition: all 200ms ease;
	-o-transition: all 200ms ease;
	transition: all 200ms ease;
}
main a:hover {text-decoration:underline;}

ul, ol{margin:0.4em 0 0.8em 2.4em;}
ul{list-style:disc;}
ol{list-style:decimal;}

main .greyText{color:#999;}
main .blackText{color:#000;}
main .redText, .req{color:#f00;}

.req::after{
	content:"*";
	display:inline-block;
	margin-left:0.2em;
}

main *.margin0{margin:0;}


/* ===[ Information boxes ]=== */
.alert-box {
	font-family:fontAwesome,Tahoma,Geneva,Arial,sans-serif;
	border-radius:10px;
	padding:12px 10px 8px 50px;
	margin:5px;
	color:#555;
	position:relative;
	text-align:left;
	min-height:55px;
}

.alert-box::before{
	font-size:30px;
	position:absolute;
	left:10px;
	top:4px;
}

.alert-box.info {
	border:1px solid #68a2cf;
	background:#e1f2fc;
}
.alert-box.success {
	border:1px solid #a3c159;
	background:#eeffdd;
}
.alert-box.notice {
	border:1px solid #e6c555;
	background:#fef7e0;
}
.alert-box.error {
	border:1px solid #ff9999;
	background:#feebeb;
}

.alert-box.info::before{
	content:"\f27a";
	color:#68a2cf;
}
.alert-box.success::before{
	content:"\f00c";
	color:#a3c159;
}
.alert-box.notice::before{
	content:"\f071";
	color:#e6c555;
}
.alert-box.error::before{
	content:"\f057";
	color:#ff4444;
}

.alert-box.small{
	background-image:none;
	padding:6px 10px 6px 10px;
	min-height:auto;
	font-size:13px;
}

.alert-box.small::before{
	margin-right:6px;
	font-size:1em;
	left:0;
	top:0;
	position:relative;
}

.alert-box .close-box{
	position:absolute;
	right:16px;
	top:6px;
}

.alert-box .close-box:hover{cursor:pointer;}
.alert-box span{
	font-weight:bold;
	text-transform:uppercase;
}

.alert-box > ul { 
	list-style:disc;
	margin:0.4em 0 0 1.4em;
}

/* ===[ panel tabs ]=== */
.tabs{
	margin: 0 0 0.8em 0;
	border-bottom: 1px solid #ddd;
}

.tabs a{
	display: inline-block;
	margin: 0 0 -1px;
	padding: 8px 16px;
	font-weight: 600;
	text-align: center;
	color: #333;
	border: 1px solid #ddd;
	background:#fefefe;
	font-family: fontAwesome, 'Source Sans Pro', Helvetica, Arial, sans-serif;
}

.tabs a.act,
.tabs a:hover{
	color: #fff;
	background:#999999;
	/*background:#7FC235;*/
	border-bottom: 1px solid transparent; 
	text-decoration:none;
}

.tabs a i{margin-right:0.3em;}

/* ===[ login modal ]=== */
body#loginForm{background:#eee;}

#loginModal{
	width:98%;
	max-width:500px;
	min-height:100px;
	display:block;
	
	position:absolute;
	left: 50%;
	top: 50%;
	
	-moz-transform: translateX(-50%) translateY(-50%);
	-webkit-transform: translateX(-50%) translateY(-50%);
	-o-transform: translateX(-50%) translateY(-50%);
	-ms-transform: translateX(-50%) translateY(-50%);
	transform: translate(-50%, -50%);
	
	background:#fff; 
	box-sizing:border-box;
	padding:1em;
	
	border:1px solid #ccc;
	-webkit-border-radius: 4px;
	border-radius: 4px;

	-webkit-box-shadow: 0 0 10px 1px rgba(200,200,200,.5);
	box-shadow: 0 0 10px 1px rgba(200,200,200,.5);
	overflow:visible;
}

#loginModal strong{padding-right:1em;}
#loginModal img{
	margin:15px auto 20px auto; 
	max-width:90%;
}

/* ===[ modal box ]=== */
.modal{
	position:fixed;
	width:100%;
	height:100%;
	top:0;
	left:0;
	z-index:99;
	display:none;
	background-color: rgba(240, 240, 240, 0.4);
}
.modal.block {display:block;}
.modal.topLevel {z-index:1000;}

.modalDialog{
	position:absolute;
	left: 50%;
	top: 50%;
	-moz-transform: translateX(-50%) translateY(-50%);
	-webkit-transform: translateX(-50%) translateY(-50%);
	-o-transform: translateX(-50%) translateY(-50%);
	-ms-transform: translateX(-50%) translateY(-50%);
	transform: translate(-50%, -50%);
	background:#fff;
	box-sizing:border-box;
	padding:1em;
	border:1px solid #ccc;
	-webkit-border-radius: 4px 4px 4px 4px;
	border-radius: 4px 4px 4px 4px;
	-webkit-box-shadow: 0 0 10px 1px rgba(200,200,200,.5);
	box-shadow: 0 0 10px 1px rgba(200,200,200,.5);
	overflow-y:scroll;
	max-height:95%;
}

.modal div.close{padding-bottom:1em;}
.modal a.close{
	position:absolute; 
	top:0;
	right:4px;
	text-decoration:none;
}