﻿/*********** modify header ***************/
BODY
{
	margin-top: 0px;
}

#xxxbelowLogo
{
	display: none;
}

#headerbar
{
	height: 50px !important;
}

.ts-menu
{
	bottom: 7px;
}

/********** frames  *****************/

#tblFrames
{
	margin: 0px auto 3px auto;
}

#tblFrames TD
{
	margin: 0px;
	padding: 0px 15px;
	width: 530px;
	height: 100%;
}

DIV.container
{
	overflow-x: hidden;
	overflow-y: auto;
	width: 530px;
	position: relative;
	background-color: White;
	border: 1px solid #888;
	margin: 0px;
	padding: 0px 30px 0px 0px; /* right padding for scroll bar */
	font-size: 0.95em;
	box-shadow: 0px 1px 2px 0px rgba(0,​ 0,​ 0,​ 0.2);
}

/* shared between all Fragments, whether based on Content or not */
/* designed for 500 width, including usually 10 margin L+R PLUS 30 for scrollbar (lost in Fragment padding usually) */

SPAN.clickPrompt
{
	border: 1px solid #444;
	background-color: #eea;
	box-shadow: 3px 3px 2px 0px #999;
	position: absolute;
	left: 140px;
	right: 140px;
	top: 40%;
	text-align: center;
	z-index: 1000;
	padding: 4px 8px;
	opacity: 0.9;
	display: none;
}

DIV.wait
{ /* http://preloaders.net/ */
	background-image: url('../images/loading.GIF');
	background-repeat: no-repeat;
	background-position: center center;
	margin: auto;
	width: 100px;
	height: 80%;
}

H1
{
	border-bottom: 1px dotted #aae;
	color: #008;
	margin: 6px 0px;
	font-size: 1.7em;
}

H2
{
	border-bottom: 1px solid #eee;
	color: #666;
	margin: 6px 0px;
	font-size: 1.2em;
	text-align: right;
}

.yearSelect
{
	background-position: right center;
	cursor: pointer;
	padding-right: 14px;
	background-image: url('../images/Dropdown_12.png');
	background-repeat: no-repeat;
}

.yearSelect:hover
{
	background-color: #cef;
	background-image: url('../images/DropdownHilite_12.png');
}

.titleCharacteristic
{
	/* already bold */
	color: black;
}

DIV.container DIV.yearWarning
{ /* long spec needed to give it priority */
	border: 1px solid red;
	background-color: #fcc;
	font-size: 110%;
	padding: 5px;
	margin: 20px 30px;
	text-align: center;
}


H1, DIV.container H2, DIV.container> DIV, DIV.container H3
{
	padding: 0px 10px;
}

DIV.container DIV
{
	margin-bottom: 6px;
}

DIV.container A, DIV.container A:visited
{
	color: Blue;
}

A.info
{
	text-decoration: none;
	border-bottom: 1px dotted black;
	color: Black;
	cursor: pointer;
}

DIV.container A:hover, A.info:hover
{
	background-color: #cef;
}

A.info.footLink
{
	background-position: left center;
	color: Blue;
	padding-left: 22px;
	background-image: url('../images/info.png');
	background-repeat: no-repeat;
	border-bottom: none;
	margin-left: 8px;
}

DIV.requestFailed
{
	border: 1px solid #f00;
	background-color: #fcc;
	position: absolute;
	left: 140px;
	right: 140px;
	top: 40%;
	text-align: center;
	z-index: 100;
	padding: 4px 8px;
	font-size: 14pt;
	font-weight: bold;
}

DIV.reason
{
	font-size: 85%;
	font-weight: normal;
}

SPAN.privacy
{
	position: absolute;
	top: 0px;
	right: 0px;
	opacity: 0.6;
	/* for no data */
	background-color: #eee;
	border-bottom: 1px solid #888;
	border-left: 1px solid #888;
	cursor: pointer;
	padding: 2px 3px 2px 6px;
	border-bottom-left-radius: 13px;
}

SPAN.privacy.privacyNoData
{
	display: none;
}

SPAN.privacy.privacy0 /* sample */
{
	background-color: #fff;
	border-color: #ddd;
	opacity: 0.5;
}

SPAN.privacy.privacy1 /* public */
{
	background-color: #cfc;
	border-color: #6f6;
	opacity: 0.5;
}

SPAN.privacy.privacy32 /* publishable */
{
	background-color: #cef;
	border-color: #88f;
}

SPAN.privacy.privacy64, SPAN.privacy.privacy96, SPAN.privacy.privacy128 /*assumed,  private and private-secondary */
{
	background-color: #fcc;
	border-color: #f88;
	opacity: 0.8;
}

/********** Toolbar and tabs ***************/

#tblFrames TD DIV.toolbar
{
	padding: 0px;
	margin: 0px;
	height: 33px;
}

UL.topTabs
{
	list-style-type: none;
	display: inline-block;
	float: left;
	padding: 0px;
	margin: 0px;
	height: 32px;
}

UL.topTabs LI
{
	display: inline-block;
	background-color: #cef;
	border: 1px solid #999;
	padding: 4px 6px;
	cursor: pointer;
	height: 20px;
	position: relative;
	top: 1px; /* goes over border for page in selected one */
}

UL.topTabs LI.selected
{
	background-color: #fff;
	border-bottom-color: White;
	padding: 6px 8px 4px 8px;
	cursor: default;
	z-index: 50;
}

DIV.buttons
{
	float: right;
	height: 32px;
	margin: 0px;
	padding: 0px 1px;
	display: inline-block;
}

DIV.buttons SPAN
{
	float: right;
	width: 32px;
	height: 31px;
	margin: 0px 0px 1px 1px;
	cursor: pointer;
	background-repeat: no-repeat;
	background-position: center center;
}

DIV.buttons SPAN:hover
{
	background-color: #cef;
}

SPAN.btnPDF
{
	background-image: url('../images/PDF_24.gif');
}

SPAN.btnPrint
{
	background-image: url('../images/print.png');
}

SPAN.btnBookmark
{
	background-image: url('../images/bookmark.png');
}

SPAN.btnHome
{
	background-image: url('../images/home.png');
}

SPAN.btnBack
{
	background-image: url('../images/back.png');
}

SPAN.btnNoPrivate
{
	background-image: url('../images/unlock.png');
}

SPAN.btnCSV
{
	background-image: url('../images/CSV.png');
}

/***** for info boxes *****/
/*H1
{
	border-bottom: 1px dotted #aae;
	color: #008;
	margin-top: 2px;
}*/

#cboxLoadedContent DIV
{
	margin-bottom: 4px;
}

/********** for fragment contents  **********/

/* generic charting */
svg
{
	font-family: Verdana, Arial, Helvetica, sans-serif; /* "Lucida Grande", "Lucida Sans Unicode" */
}

g.clickArea:hover rect.Area, rect.circleField:hover, rect.circleQual:hover, rect.circleSubject:hover,
rect.compareField:hover, rect.compareQual:hover, rect.compareSubject:hover /* clickArea applied to invisible background bars in bar chart.  Second specifier is for a bar drawn by a CategoryAxis */
{
	/* inner bars DodgerBlue 1E90FF */
	fill: #cef !important;
	fill-opacity: 0.4 !important;
}

g.clickArea:hover rect.Bar
{
	fill: #16f !important;
}

g.clickArea:hover rect.Bar.Yellow
{
	fill: #bb0 !important;
}

.clickArea /* any part of RangeBar will include invis and bar and label */
{
	cursor: pointer;
}

g.clickableAxis text
{
	cursor: pointer;
}

g.clickableAxis text:hover
{
	fill: #00A !important;
	text-decoration: underline !important; /* in FF will only work from v25 onwards */
}

g.clickableAxis text.noClick
{
	cursor: default;
	fill: #000 !important;
	text-decoration: none !important;
}

text#Characteristic_1
{ /* switch off hyperlink effect for all students - don't want to link to this! */
	fill: Black !important;
	text-decoration: none !important;
	cursor: default !important;
}

/* other generic */
.smallLinks
{
	text-align: center;
	font-size: 85%;
}

.smallLinks A
{
	color: Blue;
}

.smallLinks span.unavailable
{
	color: grey;
	cursor: not-allowed;
}

.smallLinks A:hover
{
	background-color: #cef;
}

.datatable
{
	border: 1px solid #555;
	margin: 5px;
	cursor: default;
	border-collapse: collapse;
}

.datatable TD
{
	border: 1px solid #888;
}

.datatable TR.header TD
{
	background-color: #cef;
}

.datatable TR.total TD
{
	font-style: italic;
	/*border-top: 1px solid #fff;  no effect? */
	color: Black;
}

.notApplicable
{
	background-color: LightGray !important;
}

.redWarning
{
	background-color: Red !important;
	color: Black;
}

.orangeWarning
{
	background-color: Orange !important;
	color: Black;
}


/* FieldContent */
.DfETitle
{
	font-style: italic;
}

DIV.nodata
{
	font-size: 1.5em;
	border: 1px solid #666;
	background-color: #eee;
	padding: 3px;
	border-radius: 3px;
	margin: auto;
	width: 150px;
	text-align: center;
	margin-top: 40px;
}

DIV.footnote
{
	font-size: 0.9em;
	text-align: center;
	color: #666;
}

DIV.footnote .info
{
	color: #666;
}

div.tipHeader
{
	font-weight: bold;
	text-align:center;
}

/*** circle ******/

.centreSelectors A:hover
{
	color: Red;
	background-color: #cef;
}

.circleSelected
{ /* works on both HTML and SVG */
	fill: #f00 !important;
	/* z-index: 1000;  doesn't work with SVG - done by re-ordering within script */
	color: Red !important;
}

/*** destinations ******/

span.destTitle
{
	font-weight: bold;
	padding-right: 2px;
	text-decoration: underline;
	text-decoration-color: #888;
}

div#destinationExplain ul
{
	padding-left: 10px;
}

