/*Journal tabs*/
div#tabContent {
	background: #e6e4e5;
	BORDER: #666 1px solid;
	PADDING: 1.5em;
	MIN-HEIGHT: 250px;
}
div#tabs {
	POSITION: relative;
	HEIGHT: 3em;
	margin: 0px;
	padding: 0px;
}
div#tabs UL#primary {
	PADDING: 1px 0px 0px 0px;
	MARGIN: 0px;
	BOTTOM: -1px;
	POSITION: absolute;
}
div#tabs UL#primary LI {
	DISPLAY: inline;
	LIST-STYLE-TYPE: none;
	TEXT-ALIGN: center;
}
div#tabs UL#primary A {
	PADDING: 2px 5px 0px 5px;
	DISPLAY: block;
	FLOAT: left;
	MARGIN: 1px 2px 0px 2px;
	COLOR: #333;
	TEXT-DECORATION: none;
	BORDER: #aaa 1px solid;
	BACKGROUND: #e6e4e5;
	border-bottom: #aaa 0px;
}
div#tabs UL#primary span {
	margin:0px;
	padding: 0px;
	DISPLAY: block;
	FLOAT: left;
	COLOR: #333;
	BORDER: #666 1px solid;
	border-bottom: #666 0px; 
	BACKGROUND: #e6e4e5; 
	font-weight: bold;
}
div#tabs UL#primary A:hover {
	BACKGROUND: #f5f5ff; 
	BORDER-COLOR: #666;
}

/*Actions menu box*/
div#content_right {
	FONT-SIZE: 94%; 
	FLOAT: right; 
	WIDTH: 150px; 
	background-color: #fff;
	clear: right;
	position: relative;
	margin-bottom: 10px;
}
div#content_right:hover {
	cursor: pointer;
}
div#content_right UL {
	PADDING: 0px; 
	MARGIN: 0px; 
	LIST-STYLE-TYPE: none
}
div#content_right LI {
	PADDING: 3px 0px 4px 0px; 
	border-bottom: 1px dashed #666;
}
div#content_right A {
	COLOR: #1c169e;
	TEXT-DECORATION: none
}
div#content_right A:hover {
	COLOR: #6666cc;
	text-decoration: underline
}
div.relatedarea {
	MARGIN: 0px;
}
div.grey_box_title {
	PADDING: 3px 10px;
	BACKGROUND-COLOR: #e6e4e5;
	border: 2px outset #ccc;
}
div.grey_box_title h2 {
	margin: 2px;
}
div.grey_box_body {
	display: none;
	PADDING: 10px;
	position: absolute;
	border: 2px outset #ccc;
	border-top-width: 0px;
	margin-top: -2px;
	background-color: #fff;
	WIDTH: 126px; 
}

/*General base styles - non-application specific*/
a:hover
	{
	COLOR: red;
	}
body
	{
	COLOR: black;
	BACKGROUND-COLOR: #38AC4B;
	FONT: normal 0.8em Arial, Helvetica, sans-serif;
	MARGIN: 0px;
	PADDING: 0px;
	
	background-image: url(../images/back.jpg);
	background-repeat: repeat-x;
	background-position: left top;
	text-align: center;
	height: 100%;
	}
dt
	{
	FONT-WEIGHT: bold;
	}
em
	{
	COLOR: #993300;
	}
fieldset
	{
	WIDTH: 90%;
	MARGIN-BOTTOM: 15px;
	PADDING: 4px;
	background-color: #fff;
	OVERFLOW: auto;
	border-top: 1px solid #D9DA73;
	border-right: 1px solid #999900;
	border-bottom: 1px solid #999900;
	border-left: 1px solid #D9DA73;
	clear:right;
	}
h1
	{	
	font-family: "Courier New", Courier, mono;
	font-size: 2.25em;
	line-height: 25px;
	margin-top: 0px;
	}
h2
	{	
	font-family: "Courier New", Courier, mono;
	font-size: 1.5em;
	}
h3
	{
	COLOR: #990000;
	FONT-SIZE: 1em;
	FONT-WEIGHT: bold;
	
	line-height: 16px;
	margin-bottom: 10px;
	padding: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-left: 0px;
	}
h4
	{
	FONT-SIZE: 1em;
	}
h5
	{
	FONT-SIZE: 1em;
	}
h6
	{
	FONT-SIZE: 1em;
	FONT-STYLE: italic;
	FONT-WEIGHT: normal;
	}
img
	{
	BORDER-STYLE: none;
	}
input, select
	{
	FONT-SIZE: 1.1em;
	}
legend
	{
	FONT-WEIGHT: bold;
	PADDING: 4px;
	}
table
	{
	FONT-SIZE: 1em;
	}
td
	{
	VERTICAL-ALIGN: top;
	PADDING: 4px;
	}
th
	{
	FONT-STYLE: normal;
	FONT-WEIGHT: bold;
	VERTICAL-ALIGN: top;
	TEXT-ALIGN: left;
	}
	
/*Shared colourings*/
h1, h2, legend
	{
	COLOR: #12593B;
	BACKGROUND-COLOR: transparent;
	}

/*Application specific styles including overall layout*/
input.textBoxLocked {
	background-color: #fafaff;
	COLOR: #C0C0C0;
	}
fieldset.spanPage
	{
	WIDTH: 97%;
	}
fieldset.fullPage
	{
	WIDTH: 97%;
	CLEAR: right;
	}
tr.Fail td {
	border: 1px solid red;
}
tr.Ok td {
	border: 1px solid green;
}
tr.Pending td {
	border: 1px solid orange;
}
tr.Selected td {
	background-color: #fff; 
	FONT-WEIGHT: bold;
	}
tr.validCard td {
	border-bottom: 1px dotted green;
	border-top: 1px dotted green;
	background-color: #dfd; 
}
div#smartConnectContent
	{
	MARGIN: 0px 30px 10px 255px;
	
	color: #000000;
	line-height: 18px;
	text-align: left;
	padding: 0px;
	}
div#smartConnectContent a img
	{
	border-style: none;
	text-decoration: none;
	}
div#footer
	{
	CLEAR: both;
	TEXT-ALIGN: center;
	FONT-WEIGHT: bold;
	padding: 12px 0px 15px 0px;
	border-top: 2px solid #FFFFFF;
	BACKGROUND-COLOR: #084C35;
	color: #FFFFFF;
	margin: 0px;
	font-size: 0.8em;
	}
div#footer a#toplink
	{
	TEXT-DECORATION: underline;
	COLOR: #ffffff;
	PADDING: 2px;
	}
div#footer p
	{
	/*FONT-SIZE: 0.9em;
	FONT-WEIGHT: normal;*/
	}
div#footerImage
	{
	FLOAT: left;
	PADDING: 0 20px;
	}
div#header
	{
	background-image: url(../images/smartcard_pic_blokecheck.jpg);
	background-repeat: no-repeat;
	background-position: left top;
	height: 250px;
	}
div#subheader
	{
	BACKGROUND-COLOR: #E6E4E5;
	PADDING: 4px 4px 4px 4px;
	BORDER-BOTTOM: 1px solid white;
	TEXT-ALIGN: left;
	}
div#subheader2
	{
	color: #333333;
	MARGIN-BOTTOM: 15px;
	PADDING: 4px 4px 4px 4px;
	TEXT-ALIGN: left;
	BORDER-BOTTOM: 1px solid #9A9A9A;
	BORDER-TOP: 1px solid #9A9A9A;
	}
div#subheader a
	{
	FONT-SIZE: 1em;
	COLOR: black;
	PADDING: 5px;
	BORDER-RIGHT: 1px solid white;
	TEXT-DECORATION: none;
	}
div#subheader a:hover, table#citHeader a:hover, ul#navbar li a:hover, div#footer a#toplink:hover
	{
	text-decoration: none;
	}
ul#navbar li a:hover
	{
	BACKGROUND-COLOR: #D9DA73;
	}

table#citHeader
	{
	COLOR: #0D5138;
	BACKGROUND-COLOR: white;
	FONT-SIZE: 1.1em;
	FLOAT: right;
	BORDER: 1px solid #CCCC00;
	TEXT-ALIGN: center;
	margin-bottom: 10px;
	}
table#citHeader td
	{
	BORDER: 1px solid #CCCC00;
	}
table#citHeader a
	{
	DISPLAY: block;
	}
#links {
	text-align: left;
	margin: 0px;
	padding: 0px 0px 20px 30px;
	float: left;
}
#links ul {
	margin: 0px;
	padding: 0px;
	list-style-type: none;
}
ul#navbar
	{
	WIDTH: 195px;	
	border-bottom-width: 5px;
	border-bottom-style: solid;
	border-bottom-color: #FFFFFF;
	background-color: #CBCC2C;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-weight: bold;
	}
ul#navbar li
	{
	/*BACKGROUND-COLOR: #FFF;*/
	}
ul#navbar li a
	{
	TEXT-DECORATION: none;
	DISPLAY: block;
	WIDTH: 180px;
	color: #000000;
	padding: 7px 7px 5px 8px;
	font-size: 90%;

	border-bottom: 2px solid #FFFFFF;
	margin: 0px;
	}
span.enrolText
	{
	DISPLAY: block;
	FONT-WEIGHT: bold;
	COLOR: #12593B;
	BORDER-BOTTOM: 1px solid #003300;
	MARGIN: 10px 0px;
	}
img.helpCursor
	{
	CURSOR: help;
	}
.indented
	{
	MARGIN: 5px 5px 5px 20px;
	}
td.mandated
	{
	FONT-WEIGHT: bold;
	}
table.reportData th, table.reportData td {
	padding: 4px;
}
table.reportData th {
	font-weight: bold;
	background-color: #FFF;
}
tr.alternateRow {
	background-color: #EEE;
}
table.reportData tr:hover {
	background-color: #CCC;
}
div#tabContent table.indented th 
{
	width: 200px;
}
form#frm_proof select
{
	width: 300px;
}

/*Reporting subsite*/
td.sideBar {
	background-color: #f5f5ff;
	padding: 3px;
	border: 1px solid #7D53A2;
	margin-right: 3px;
}
a.sideBarButtons {
	color: #7D53A2;
	padding: 3px;
	display: block;
}
td.wizStep {
	padding-left: 5px;
}
#smartConnectContent a.button, #appHelp a.button {
	display: block;
	height: 20px;
	width: 140px;
	text-decoration: none;
	color: #000000;
	background-color: #ECE9D8;
	border-style: outset;
	border-width: 3px;
	text-align: center;
	margin: 10px 0px;
}
.hide {
	DISPLAY: none;
}
fieldset#service_50 {
	DISPLAY: none;
}
div.serviceLocked, optgroup.serviceLocked {
	background-color: #fafaff;
	COLOR: #C0C0C0;
}
p.reasonWhy 
{
	color: red;
	display: none;
}
div.serviceLocked p.reasonWhy 
{
	display: block;
}
span.toggleAlert
{
	color: red;
	float: right;
	display: none;
}

/*Card preview positioning*/
div#cardImage {
	position: relative;
	height: 250px;
}
div#cardImage img, div#cardImage p {
	position: absolute;
	font-weight: bold;
	color: white;
}
div#cardImage p#name {
	top: 120px;
	left: 20px;
}
div#cardImage p#number {
	top: 135px;
	left: 20px;
}
div#cardImage p#expiry {
	top: 140px;
	left: 20px;
	display: none;
}
div#cardImage img#photo 
{
	width: 80px;
	top: 40px;
	left: 205px;
	display: none;
}
div#preview {
	position: absolute;
	border: 3px outset #333;
	background-color: #fff;
	padding: 5px;
	display: none;
	color: #000;
}
/*CCBC additions*/
#container {
	background-color: #FFFFFF;
	background-image: url(../images/smartcard_back_extend.jpg);
	background-repeat: repeat-x;
	background-position: left top;
	text-align: left;
	width: 80%;
	padding: 0px;
	margin: 0px auto;
	border-right-width: 1px;
	border-left-width: 1px;
	border-right-style: solid;
	border-left-style: solid;
	border-right-color: #39AB49;
	border-left-color: #39AB49;
	position: relative;
}
.box {
	margin-bottom: 20px;
	padding: 15px;
	border-top: 1px solid #D9DA73;
	border-right: 1px solid #999900;
	border-bottom: 1px solid #999900;
	border-left: 1px solid #D9DA73;
}
#navbar a.application{
	color: #990000;
	border-top: 5px white solid;
}
.leisurelifestyle {
	border: 1px solid #000000;
	width: 183px;
	background-image: url(../images/leisure_lifestyle.gif);
	background-repeat: no-repeat;
	height: 85px;
	display: block;
	margin-top: 10px;
}
.librarycatalogue {
	border: 1px solid #000000;
	width: 183px;
	background-image: url(../images/library_catalogue.gif);
	background-repeat: no-repeat;
	height: 85px;
	display: block;
	margin-top: 10px;
}
#helpline {
	background-color: #CACC2B;
	margin: 0px;
	padding: 0px;
	width: 100%;
	border-bottom-width: 2px;
	border-bottom-style: solid;
	border-bottom-color: #FFFFFF;
	text-align: right;
	clear: both;
	height: 50px;
	background-image: url(../images/helpdesk.gif);
	background-repeat: no-repeat;
	background-position: right top;
}
#helpline p {
	margin: 0px;
	padding: 0px;
}
.imagedescription {
	display: none;
}
div#appHelp {
	background-color: #CACC2B;
	text-align: left;
	min-height: 100%;
	padding: 10px;
}
@media print
{
	div#smartConnectContent
	{
		MARGIN-left: 0px;
	}
	div#header, div#subheader, div#links, div#footer
	{
		display: none;
	}
}
div#container { 
	width: 80%;
	min-width: 750px;
	width:expression(document.body.clientWidth < 938? "750px": "80%" );
}

