@import url("https://fonts.googleapis.com/css?family=Lato:300,400,900");

/* initial set up of page */

	#page { 
		width:100%; 
		margin:0; 
		padding:0; 
		color: #383838; }
	
	* { 
		font-family: 'Lato', sans-serif;
		font-size: 11pt;
		font-weight: 300;
		padding: 0px;
		margin: 0px;}
	
	body {
		font-size: 70%;
		line-height: 12px;
    	text-rendering: optimizelegibility;
	}
		
	p {
		margin-top: 10px;
		margin-bottom: 10px;
	}

/* keeping everything alphabetical for easy finding */
/* here is for the generic default tag and slight variations styles ONLY, any specific ones (popups, fancy stuff) go elsewhere, create your own css file */

/* links */
	a, .dummy-link {
		color: #f60;
		text-decoration: none;
	}
	a:hover, .dummy-link:hover {
		text-decoration: none;
		color: #666;
		cursor: pointer;
	}
	
	/*selectable divs*/
	.box-selectable:hover, .box-selectable.box-selected {
		background-color: #f60;
		cursor: pointer;
	}
	
	a.edit { width:100%; display:inline-block; color: #383838; }
	a.edit:hover { color:#f60; background:url(/images/icons/edit_pencil.png) right no-repeat; }
    
    a.button {
        background: #f60;
		border-top: 1px solid #E7A685;
		border-left: 1px solid #E7A685;
		border-right: 1px solid #8F3304;
		border-bottom: 1px solid #8F3304;
		color: #fff;
        padding:4px 10px;
        border-radius:4px;
    }
	a.button.button-disabled {
		font-style:normal;
		background-color: #997755;
		border-color: #997755;
		color: #AAAAAA;
		cursor: not-allowed;
	}

	button { 
		background: #f60;
		border-top: 1px solid #E7A685;
		border-left: 1px solid #E7A685;
		border-right: 1px solid #8F3304;
		border-bottom: 1px solid #8F3304;
		color: #fff;
		padding:4px 10px;
	}
	button:disabled {
		font-style:normal;
		background-color: #997755;
		border-color: #997755;
		color: #AAAAAA;
		cursor: not-allowed;
	}

	button.success { 
		background: #390;
		border-top: 1px solid #99cc7f;
		border-left: 1px solid #99cc7f;
		border-right: 1px solid #194c00;
		border-bottom: 1px solid #194c00;
		color: #fff;
		padding:4px 10px;
	}
	
	clear { 
		display:block; 
		clear:both; 
	}
	
	code { 
		font-family:monospace; font-size:13px;
		line-height:16px; 
		white-space:pre; 
		padding:5px; 
		width:100%; 
		display:block; 
		background-color:#fec;
	}

/* coloured tags */

	bad 	{ color:#c00; }
	good 	{ color:#390; }
	warning { color:#da0; }
	faint, .faint 	{ color:#bbb; }
	delay 	{ color:#00c; }

/* ******* fieldset ******* */	

	fieldset { 
		margin:10px; margin-left:0; 
		border:1px solid #ddd; 
		float:left; 
		background-color:#fff; 
		font-size:12px; 
	}
	
	fieldset.fixed400 {
		width:400px; height: 400px;
	}
	
	fieldset.full-width{
		width: 100%;
		float: none;
	}
	
	fieldset.padded{
		padding: 5px;
	}
	
	fieldset dt { 
		position:relative; 
		display:none;  
		padding: 2px;
	}
	fieldset dd { 
		padding: 2px; 
		padding-left:0; 
		margin:3px 10px; 
	}
	legend { 
		margin-left:10px; 
		font-size: 16px; 
	}
	
	fieldset fieldset legend { font-size:14px; }
	
/* ******** headers ********** */	

	h1 { 	
		font-weight:normal; 
		font-size:28px; 
		color: #383838; 
		text-transform: none; 
		border:1px solid #ddd; border-left:0; border-right:0; 
		line-height:32px;
		margin:10px 0; padding:0;
		display:table; 
		width:100%; 
	}
	h2 {
		font-size: 1.5em;
		color: #666;
		line-height: 1.6em;
		font-weight: normal;
		padding: 0;
		margin: 0;
		text-transform: uppercase;
	}
	h3 {
		font-size: 1.2em;
		color: #f60;
		line-height: 1.6em;
		font-weight: normal;
		padding: 0;
		margin: 0;
		text-transform: uppercase;
	}
	h4 {
		font-size: 1.1em;
		color: #666;
		line-height: 1.6em;
		font-weight: normal;
		padding: 0;
		margin: 0;
		text-transform: uppercase;
	}
				
	h1a 	{ display: table-cell;  }
	h1b 	{ display: table-cell; text-align:right; }
	h1a em 	{ color: #f60; font-style:normal; }
	h1b em 	{ font-style:normal;  color: #ddd; }
	
/* horizontal rule */
hr {
	border: 0;
	background-color: #666;
	color: #666;
	height: 1px;
	margin-top: 5px;
	margin-bottom: 5px;
}	
hr.light {	background-color: #ddd; color: #ddd; }	
/* ********* input *********** */	

	input, textarea, select {
		border: 1px solid #333;
		border-radius: 3px;
		font-family: 'Lato', sans-serif;
		font-size: 13pt;
		font-weight: 300;
		color: #333;
		padding:4px;
		
		box-sizing: border-box;
		-moz-box-sizing: border-box;
	}
	select{
		padding:3px;
	}
	input:disabled, textarea:disabled, select:disabled { 
		font-style:italic; 
		color:#666; 
		background-color:#eee; 
	}
	
	/*smaller input elements, for example to be used in a table where the big ones would look too large*/
	input.small, select.small{
		padding:1px;
	}
	
	input[type=submit], input[type=button] { 
		background: #f60;
		border: 1px solid;
		border-color: #8F3304;
		border-top-color: #E7A685;
		border-left-color: #E7A685;
		color: #fff;
		padding:4px 6px;  
	}
	input[type=button]:disabled, input[type=submit]:disabled {
		font-style:normal;
		background-color: #997755;
	    border-color: #997755;
	    color: #AAAAAA;
	}
	
	/*normal sized button, for placing in table rows etc where the bigger button would not look right*/
	input[type=submit].small, input[type=button].small { 
		padding:1px 2px;  
	}
		
	input[type=submit].bgreen {	
		background: #090;
		border: 1px solid #060;
		border-top: 1px solid #3c3;
		border-left: 1px solid #3c3;	
	}
	
	input[type=text]{
		width:150px;
	}
	
	input[type=checkbox], input[type=radio]{
		vertical-align: middle;
	}

	textarea { border: 1px solid #666; }
	.label, .input { margin:5px; }
	
	label{
		vertical-align: middle;
	}
	
	input + label {
		margin-left: 5px;
	}



	
/* images */
	img { border: 0	}
	
/* ********* tables ********** */
/*these styles are applied to any table with the class 'data-table' OR when contained within an element with the 'data-tables' class, this is set as default for the body element but maybe disabled if needed for compatibility reasons*/


	table.data-table, .data-tables table {
		font-size: 1.4em;
		color: #fff;
		margin:20px 0; margin-top:10px;
		padding:0;
		border-collapse:collapse;
		border-spacing:0;
	}
	
	table.data-table th a, .data-tables th a, th.header a { color:#ddd; }
	
	table.data-table th a:hover, .data-tables th a:hover, th.header a { color:#f60; }
	
	
	table.data-table th, .data-tables th, th.header {
		background-color: #333;
		color: #fff;
		padding: 5px;
		margin:0;
		font-size:1.6em; 
		border:1px dotted #666;
	}
	
	table.data-table tr, .data-tables tr { margin:0; padding:0; }
	table.data-table tr:nth-child(even), .data-tables tr:nth-child(even) 	{ background: #fff; }
	table.data-table tr:nth-child(odd), .data-tables tr:nth-child(odd) 	{ background-color: #ddd; }
	table.data-table tr.totals, .data-tables tr.totals {  background-color:#fff; border-top:1px solid #666; font-weight:bold; }
	
	
	table.data-table td, .data-tables td {
		margin:0px;
		color: #000;
		padding: 5px;
		border:1px dotted #666;
		font-size:1.4em;
	}
	
	/*classes which can be used to manually colour table rows, these are needed for a few weird tables with doubled up rows*/
	.data-tables tr.light-row { background: #fff; }
	.data-tables tr.dark-row { background-color: #ddd; }
	.data-tables tr.clear-row { background: transparent; border: none;}
	.data-tables tr.clear-row td { background: transparent; border: none;}
	
	td.tint-bg-red 	{ background-color:rgba(255,200,200,0.3); }
	td.tint-bg-green 	{ background-color:rgba(200,255,200,0.3); }
	td.tint-bg-blue 	{ background-color:rgba(200,200,255,0.3); }
	td.tint-bg-yellow	{ background-color:rgba(255,255,200,0.3); }
	td.tint-bg-orange	{ background-color:rgba(255,102,0,0.3); }
	td.tint-bg-dark		{ background-color:rgba(102,102,102,0.3); }
	
	tr.tint-bg-red td 	{ background-color:rgba(255,200,200,0.3); }
	tr.tint-bg-green td	{ background-color:rgba(200,255,200,0.3); }
	tr.tint-bg-blue td	{ background-color:rgba(200,200,255,0.3); }
	tr.tint-bg-yellow td { background-color:rgba(255,255,200,0.3); }
	tr.tint-bg-orange td { background-color:rgba(255,102,0,0.3); }
	tr.tint-bg-dark	td	{ background-color:rgba(102,102,102,0.3); }
	
	tr.fade > td,
	td.fade { color:#777; }

	tr.fade > td > img,
	td.fade img { opacity: .3; }

	/*less invasive table styles */
	
	td {padding: 5px; }
	td.centered { text-align:center; }
	td.right-align,  th.right-align	{ text-align:right; }

	/* text align left and right within the TD */
	td .split 		{ display: table; width:100%;  }
	td .split span	{ display: table-cell; text-align:left; }
	td .split sup 	{ display: table-cell; text-align:right; position:relative; top:-5px; vertical-align:top; color:#666; }

/* tool tips */
	.tool_tip {
		position: relative;
		cursor:pointer;
	}	
		
	.tool_tip::before {
		content: attr(data-tip);	
		font-size: 12px;
		position: absolute;
		z-index: 999;
		white-space: nowrap;
		bottom: 9999px;
		left: 50%;
		background:#eee;
		color:#383838;
		border:1px solid #ddd;
		padding:4px 8px;
		line-height: 24px;
		height: 24px;	
		opacity: 0;	
		
		-webkit-transition:opacity 0.4s ease-out;  
		-moz-transition:opacity 0.4s ease-out;  
		-o-transition:opacity 0.4s ease-out;  
		transition:opacity 0.4s ease-out; 
	}		
	
		
	.tool_tip:hover::before	{
		opacity: 1;
		bottom:-35px;
	}