/* Generic style for showcase */

body
        {
        font-family: Arial, Verdana, sans-serif;
	padding: 0em;
	margin: 0em;
        }
h2
	{
	font-size: 120%;
	color: var(--SHC_COL_LINE);
	}

h4
	{
	font-size: 110%;
	color: #000000;
	margin-bottom: 5px;
	}

td
        {
        font-family: Arial, Verdana, sans-serif;
        border-width: 1px;
        border-color: inherit;
	vertical-align: top;
        }

th.colA
        {
        padding: 0.3em 0.4em;
        font-family: Arial, Verdana, sans-serif;
        background-color: #e0eee0;
        border-top: solid 1px #e0eee0;
        border-bottom: solid 1px #e0eee0;
        color: var(--SHC_COL_LINE);
        }
th.colB
        {
        padding: 0.3em 0.4em;
        font-family: Arial, Verdana, sans-serif;
        background-color: #ffebcd;
        border-top: solid 1px #ffebcd;
        border-bottom: solid 1px #ffebcd;
        color: var(--SHC_COL_LINE);
        }
th.lefthead
        {
        text-align: left;
        padding-left: 0.4em;
	padding-right: 0.4em;
        }
div.main
        {
        padding: 0.5em;
        margin: 0em;
        background-color: white;
        border: solid 1px var(--SHC_COL_LINE);
	border-radius: 8px;
        background-position: right top;
        background-repeat: no-repeat;
	min-height: 100px;
	max-width: 950px;
	margin-left:auto;
	margin-right:auto;
	/* This is a fix since IE does not support max-width */
	/* width:expression( window.screen.availWidth > 870 ? "800px" : "auto" ); */
        }

div.box
	{
	padding: 0.5em;
	margin: 0em;
	border: solid 1px var(--SHC_COL_LINE);
	border-radius: 8px;
	background-color: white;
	max-width: 950px;
	margin-top: 30px;
	margin-left:auto;
	margin-right:auto;
	/* This is a fix since IE does not support max-width */
	/* width:expression( window.screen.availWidth > 870 ? "800px" : "auto" ); */
	}

#rightbar
	{
	float: right; 
	text-align: center;
	width: 190px;
	padding-top: 0px;
	margin-top: 0px;
	margin-left: 1em;
	border: thin solid white;
	}
p.rhbar
	{
	margin: 0em;
	padding: 0.3em 0em 0.8em 0em;
	}
img.logo
	{
	margin: 0em;
	padding: 0em;
	border: none;
	}
form.questfm
	{
	margin: 0em;
	padding: 0em;
	}
p.submitbt
	{
	margin: 0.5em 0em;
	padding: 0em;
	text-align: center;
	}
input.commonfont
	{
	font-size: inherit;	/* N.B. inherit does not work with IE */
	}
select.commonfont
	{
	font-size: inherit;	/* N.B. inherit does not work with IE */
	}

input.goright
	{
	float: right;
	}
p.outerbottom
        {
        color: var(--SHC_COL_LINE);
	padding: 0em;
        margin: 0em;
        max-width: 968px;
	margin-left:auto;
	margin-right:auto;
	/* This is a fix since IE does not support max-width */
	/* width:expression( window.screen.availWidth > 870 ? "800px" : 
"auto" ); */
        }
span.screentitle
	{
	font-size: 140%; 
	text-align: left;
	}
span.sessiontitle
	{
	font-size: 70%; 
	float: right;
	text-align: right;
	color: var(--SHC_COL_LINE);
	}
span.catchphrase
	{
	font-weight: bold;
	font-size: smaller; 
	float: right; 
	text-align: right;
	color: var(--SHC_COL_LINE);
	}
span.errmsg
	{
	color: #CC0000;
	}
div.footnote
	{
	font-size: 70%;
	line-spacing: 10px;
	}
p.txtcol_dark
	{
	color: var(--SHC_COL_LINE);
	}
table.qtableA
        {
        border-collapse: collapse;
        border: solid 1px #e0eee0;
        width: 100%;
	margin-bottom: 0em;
        }
table.qtableB
        {
        border-collapse: collapse;
        border: solid 1px #ffebcd;
        width: 100%;
	margin-bottom: 0em;
        }
*.smalltopgap
	{margin-top: 0.5em;
	}
td.question
        {
        padding: 0.1em 0.6em;
        }
tr.colourrowA
        {
        background-color: white;
        border-color: #e0eee0;
        }
tr.colourrowB
        {
        background-color: white;
        border-color: #ffebcd;
        }
tr.palecolourrowA
        {
        background-color: #f5fffa;
        border-color: #e0eee0;
        }
tr.palecolourrowB
        {
        background-color: #fdf5e6;
        border-color: #ffebcd;
        }
td.optrow
        {
        padding: 0.4em 0.4em;
        margin: 1px;
        }
td.setcentre
        {
        text-align: center;
        }
input.otherbox
        {
        margin: 0.3em 0.5em;
        /* Leave font-family as default */	
        font-size: inherit;	/* N.B. inherit does not work with IE */
        }

select.box
        {
        margin: 0.3em 0.5em;
	width: 10em;
        }
a.minfo
        {
        white-space: nowrap;
        margin-right: 0.8em;
        font-weight: bold;
        text-align: right;
        float: right;
        }
a.linfoA:link
        {color: var(--SHC_COL_LINE);
        }
a.linfoA:visited
        {color: var(--SHC_COL_LINE);
        }
a.linfoA:hover
        {color: #83885e;
        }
a.linfoB:link
        {color: var(--SHC_COL_LINE);
        }
a.linfoB:visited
        {color: var(--SHC_COL_LINE);
        }
a.linfoB:hover
        {color: #83885e;
        }
a.hinfo
        {
        white-space: nowrap;
        margin-right: 0.8em;
        font-weight: bold;
        text-align: right;
        float: right;

        visibility: hidden;
        display: none;
        }
p.pinfo
        {
        padding: 0.5em 0.6em 0.5em 0.6em;
        margin: 0em;
        }
div.question_infoA
        {
        background-color: #e0eee0;
        padding: 0em;
        margin: 0em;
        color: var(--SHC_COL_LINE);
        }
div.question_infoB
        {
        background-color: #ffebcd;
        padding: 0em;
        margin: 0em;
        color: var(--SHC_COL_LINE);
        }
div.cloakarea
	{
	visibility: hidden;
        display: none;
        margin: 0em 0em;
	}

table.bordercolA
	{border-color: #e0eee0;
	}
th.bordercolA
	{border-color: #e0eee0;
	}
td.bordercolA
	{border-color: #e0eee0;
	}
td.bgcolA_pale
	{background-color: #f5fffa;
	}
td.bgcolA
	{background-color: white;
	}
td.bgcolA_dark
	{background-color: #e0eee0;
	}
p.bordercolA
	{border-color: #e0eee0;
	}
p.bgcolA_pale
	{background-color: #f5fffa;
	}
table.bordercolB
	{border-color: #ffebcd;
	}
th.bordercolB
	{border-color: #ffebcd;
	}
td.bordercolB
	{border-color: #ffebcd;
	}
td.bgcolB_pale
	{background-color: #fdf5e6;
	}
td.bgcolB
	{background-color: white;
	}
td.bgcolB_dark
	{background-color: #ffebcd;
	}
p.bordercolB
	{border-color: #ffebcd;
	}
p.bgcolB_pale
	{background-color: #fdf5e6;
	}
span.vmid
	{vertical-align: text-bottom;
	}
td.imgcentre
	{
	vertical-align: middle;
	text-align: center;
	}
img.spfiller
	{
	width: 100%; 
	padding-top: 0.5em;
	}
p.rowtit
	{
	margin: 0em;
	padding: 0.3em 0em;
	}
p.rowmsg
	{
	margin: 0em;
	padding: 0.1em 0em;
	}
td.col_spacer
	{
	border-left-style: solid;
	border-right-style: solid;
	}
td.snug
	{
	margin: 0em;
	padding: 0em;
	}
td.right_none
	{
	border-right: none;
	}

img.help
	{
	cursor: help
	}

span.nowrap
	{
        white-space: nowrap;
	}
/*--------------------------------------------------
  REQUIRED to hide the non-active tab content.
  But do not hide them in the print stylesheet!
  --------------------------------------------------*/
.tabberlive .tabbertabhide
	{
	display:none;
	}

/*--------------------------------------------------
  .tabber = before the tabber interface is set up
  .tabberlive = after the tabber interface is set up
  --------------------------------------------------*/
.tabber
	{
	}
.tabberlive
	{
	margin-top:1em;
	}

/*--------------------------------------------------
  ul.tabbernav = the tab navigation list
  li.tabberactive = the active tab
  --------------------------------------------------*/
ul.tabbernav
	{
	margin:0;
	padding: 3px 0;
	border-bottom: 1px solid #778;
	font: bold 12px Verdana, sans-serif;
	max-width: 950px;
	margin-left:auto;
	margin-right:auto;

	}

ul.tabbernav li
	{
	list-style: none;
	margin: 0;
	display: inline;
	}

ul.tabbernav li a
	{
	padding: 3px 0.5em;
	margin-left: 3px;
 	border: 1px solid #778;
	border-bottom: none;
	background: #DDE;
	text-decoration: none;
	}

ul.tabbernav li a:link
	{
	color: #448;
	}
ul.tabbernav li a:visited
	{
	color: #667;
	}

ul.tabbernav li a:hover
	{
	color: #000;
	background: #AAE;
	border-color: #227;
	}

ul.tabbernav li.tabberactive a
	{
	background-color: #fff;
	border-bottom: 1px solid #fff;
	}

ul.tabbernav li.tabberactive a:hover
	{
	color: #000;
	background: white;
	border-bottom: 1px solid white;
	}

/*--------------------------------------------------
  .tabbertab = the tab content
  Add style only after the tabber interface is set up (.tabberlive)
  --------------------------------------------------*/
.tabberlive .tabbertab
	{
	padding: 5px;
	border: 1px solid var(--SHC_COL_LINE);
	background: white;
	border-top: 0;
	max-width: 970px;
	margin-left:auto;
	margin-right:auto;

 /* If you don't want the tab size changing whenever a tab is changed
    you can set a fixed height */

 /* height:200px; */

 /* If you set a fix height set overflow to auto and you will get a
    scrollbar when necessary */

 /* overflow:auto; */
}

/* If desired, hide the heading since a heading is provided by the tab */
.tabberlive .tabbertab h2
	{
	display:none;
	}

.tabberlive .tabbertab h3
	{
	display:none;
	}
/*--------------------------------------------------
  REQUIRED to hide the non-active tab content.
  But do not hide them in the print stylesheet!
  --------------------------------------------------*/
.tabberlive .tabbertabhide
	{
	display:none;
	}

/*--------------------------------------------------
  .tabber = before the tabber interface is set up
  .tabberlive = after the tabber interface is set up
  --------------------------------------------------*/
.tabber
	{
	}
.tabberlive
	{
	margin-top:1em;
	}

/*--------------------------------------------------
  ul.tabbernav = the tab navigation list
  li.tabberactive = the active tab
  --------------------------------------------------*/
ul.tabbernav
	{
	margin:0;
	padding: 3px 0;
	border-bottom: 1px solid #778;
	font: bold 14px Verdana, sans-serif;
	max-width: 968px;
	margin-left:auto;
	margin-right:auto;

	}

ul.tabbernav li
	{
	list-style: none;
	margin: 0;
	display: inline;
	}

ul.tabbernav li a
	{
	padding: 3px 0.5em;
	margin-left: 3px;
 	border: 1px solid var(--SHC_COL_LINE);
	border-bottom: none;
	background: #e8e8e8;
	text-decoration: none;
	}

ul.tabbernav li a:link
	{
	color: var(--SHC_COL_LINE);
	}
ul.tabbernav li a:visited
	{
	color: var(--SHC_COL_LINE);
	}

ul.tabbernav li a:hover
	{
	color: #000;
	color: var(--SHC_COL_LHOV);
	background: #f0f0f0;
	border-color: var(--SHC_COL_LINE);
	}

ul.tabbernav li.tabberactive a
	{
	background-color: #ffffff;
	border-bottom: 1px solid #ffffff;
	}

ul.tabbernav li.tabberactive a:hover
	{
	color: var(--SHC_COL_LINE);
	background: white;
	border-bottom: 1px solid white;
	}

/*--------------------------------------------------
  .tabbertab = the tab content
  Add style only after the tabber interface is set up (.tabberlive)
  --------------------------------------------------*/
.tabberlive .tabbertab
	{
	padding: 5px;
	border: 1px solid var(--SHC_COL_LINE);
	background: white;
	border-top: 0;
	max-width: 956px;
	min-height: 150px;
	margin-left:auto;
	margin-right:auto;

 /* If you don't want the tab size changing whenever a tab is changed
    you can set a fixed height */

 /* height:200px; */

 /* If you set a fix height set overflow to auto and you will get a
    scrollbar when necessary */

 /* overflow:auto; */
}

/* If desired, hide the heading since a heading is provided by the tab */
.tabberlive .tabbertab h2
	{
	display:none;
	}

.tabberlive .tabbertab h3
	{
	display:none;
	}

div.topnav
	{
	max-width: 968px;
	margin-left: auto;
	margin-right: auto;
	}

div.topbreak
	{
	font-size: 0;
	height: 8px;
	}

ul.topmenu
	{
	margin: 0;
	padding: 0;
	list-style-type: none;
	height: 20px;
	margin: auto;
	float: right;
	}

li.topmenu
	{
	width: 80px;
	float: left; 
	border-left-style: solid;
	border-top-style: solid;
	border-bottom-style: solid;
	border-width: 1px;
	border-color: var(--SHC_COL_LINE);
	text-align: center;
	}

li.topmenr
	{
	width: 84px;
	float: left; 
	border-style: solid;
	border-width: 1px;	
	border-color: var(--SHC_COL_LINE);
	text-align: center;
	}

a.topmenu
	{
	padding-right: 2px;
	padding-left: 2px;
	display: block;
	line-height: 26px;
	text-decoration: none;
	font-size: 12px;
	color: var(--SHC_COL_LINE);
	background-color: white;
}
a.topmenu:hover
	{
	color: var(--SHC_COL_LHOV);
	}

a.alabel
	{
	display: block;
	text-decoration: none;
	color: var(--SHC_COL_LINE);
	}

a.alabel:hover
	{
	color: var(--SHC_COL_LHOV);
	}
img.plain
	{
	margin: 0em;
	padding: 0em;
	border: none;
	vertical-align: -25%;
	}

li.plain
	{
	list-style-type: none;
	}
p.biglist
	{
	margin-top: 3px;
	margin-left: 40px;
	}

a
	{
	text-decoration: none;
	}

a:hover
	{
	color: var(--SHC_COL_LHOV);
	}

a.front
	{
	font-size: 22px;
	padding-top: 10px;
	text-decoration: none;
	color: var(--SHC_COL_LINE);
	}

li.plain:hover a.front
	{
	color: var(--SHC_COL_LHOV);
	}

a.basic
	{
	text-decoration: none;
	color: var(--SHC_COL_LINE);
	}

a.basic:hover
	{
	color: var(--SHC_COL_LHOV);
	}

a.subtle
	{
	text-decoration: none;
	color: #000000;
	}

a.subtle:hover
	{
	color: var(--SHC_COL_LHOV);
	}

a.email
	{
	text-decoration: none;
	color: var(--SHC_COL_LINE);
	}

a.email:hover
	{
	color: #00AA00;
	}

tr.row_odd
        {
        background-color: var(--SHC_TAB_ROW1);
        border-color: #ffffff;
        }

tr.row_even
        {
        background-color: var(--SHC_TAB_ROW2);
        border-color: #ffffff;
        }

th.centred
	{
	text-align: center;
	white-space: nowrap;
	}

th.int
	{
	text-align: right;
	white-space: nowrap;
	}

th.txt
	{
	text-align: left;
	white-space: nowrap;
	}

td.centred
	{
	text-align: center;
	}

td.int
	{
	text-align: right;
	vertical-align: top;
	}

td.txt
	{
	text-align: left;
	vertical-align: top;
	}

table.wrapper
	{
	border-width: 0px;
	border-spacing: 0px;
	border-style: none;
	border-collapse: collapse;
	}

table.download
	{
	border-width: 1px;
	border-color: var(--SHC_COL_LINE);
	border-style: solid;
        border-collapse: collapse;
	}

td.int_blu
	{
	border: solid 1px var(--SHC_COL_LINE);
	text-align: right;
	vertical-align: top;
	padding: 2px;
	}

td.txt_blu
	{
	border: solid 1px var(--SHC_COL_LINE);
	text-align: left;
	vertical-align: top;
	padding: 2px;
	}

td.cen_blu
	{
	border: solid 1px var(--SHC_COL_LINE);
	text-align: center;
	vertical-align: top;
	padding: 2px;
	}

td.spacer
	{
	border-width: 0px;
	}

th.cen_blu
	{
	border: solid 1px var(--SHC_COL_LINE);
	text-align: center;
	vertical-align: top;
	padding: 2px;
	}


table.outlined
	{
	border: solid 1px var(--SHC_COL_LINE);
	border-collapse: collapse;
	}

td.noborder
	{
	border-style: hidden;
	}

input.btn_act
	{
	background: #ffffb8;
	border: 1px solid var(--SHC_COL_LINE);
	font-weight: bold;
	text-align: center;
	margin-top: 0px;
	margin-bottom: 0px;
	font-size: 100%;
	width: 200px;
	cursor: pointer
	}

input.btn_act:hover
{
	background: #ffffa0;
	border: 1px solid var(--SHC_COL_LHOV);
	color: var(--SHC_COL_LHOV);
}

input.btn_mini
	{
	background: #ffffb8;
	border: 1px solid var(--SHC_COL_LINE);
	font-weight: bold;
	text-align: center;
	margin-top: 0px;
	margin-bottom: 0px;
	font-size: 100%;
	width: 110px;
	border-radius: 5px;
	cursor: pointer
	}

input.btn_mini:hover
{
	background: #ffffa0;
	border: 1px solid var(--SHC_COL_LHOV);
	color: var(--SHC_COL_LHOV);
}

div.css3outer > div.css3warning {
    display: none;
}

input.btn_glow
{
	background: var(--SHC_BTN_FACE);
	border: 2px solid var(--SHC_COL_LINE);
	font-weight: bold;
	text-align: center;
	margin: 5px;
	font-size: 100%;
	cursor: pointer;
	border-radius: 5px;                          /* if no CSS3, these will get ignored and */
	box-shadow:                                   /* it'll be a plainer, non-rounded button */
		0px 1px 3px rgba(000,000,000,0.5),
		inset 0px 0px 3px rgba(255,255,255,1);
}

input.btn_glow:hover
{
	background: var(--SHC_BTN_GLOW);
	border: 2px solid var(--SHC_COL_LHOV);
	color: var(--SHC_COL_LHOV);
}	
	
input.ukbrad  /* default for old browsers that can't understand */
{
	text-align: center;
	vertical-align: middle;
	width: 30px;
	height: 30px;
}

input.ukbrad:enabled, input.ukbrad:disabled
{
    display: none;
}

label.ukbradlab
{
	display: none;
}

input.ukbrad:enabled + label.ukbradlab,
input.ukbrad:disabled + label.ukbradlab
{  
	background-repeat:no-repeat;
	padding-left:37px;
	height: 32px; 
	line-height:32px;
	display:inline-block;
	vertical-align:middle;
	cursor:pointer;
	background-image: var(--SHC_IMG_RADIO);
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
}

input.ukbrad:enabled + label.ukbradlab
{
	background-position: 0 0;
}

input.ukbrad:disabled + label.ukbradlab
{
	background-position: 0 -61px;
}

input.ukbrad:checked + label.ukbradlab
{
	background-position: 0 -31px;
}

input[disabled].ukbrad:checked + label.ukbradlab
{
	background-position: 0 -92px;
}
	
/* Custom styles for UK Biobank Showcase */

body
        {
        font-family: Arial, Verdana, sans-serif;
	background-color: var(--SHC_COL_BG2);
	padding: 0em;
	margin: 0em;
        }

div.background
	{
/* Mozilla: */
	background: -moz-linear-gradient(top, var(--SHC_COL_BG1), var(--SHC_COL_BG2));

/* Chrome, Safari:*/
	background: -webkit-gradient(linear, left top, left bottom, 
		from(var(--SHC_COL_BG1)), to(var(--SHC_COL_BG2)));

/* MS IE */

        zoom: 1;
	filter: progid:DXImageTransform.Microsoft.Gradient(
		GradientType=0, StartColorStr='var(--SHC_COL_BG1)', 
		EndColorStr='var(--SHC_COL_BG2)');

	}

h2
	{
	font-size: 120%;
	color: var(--SHC_COL_LINE);
	}

h4
	{
	font-size: 110%;
	color: #000000;
	margin-bottom: 5px;
	}

th.colA
        {
        background-color: #e0eee0;
        border-top: solid 1px #e0eee0;
        border-bottom: solid 1px #e0eee0;
        color: var(--SHC_COL_LINE);
        }
th.colB
        {
        background-color: #ffebcd;
        border-top: solid 1px #ffebcd;
        border-bottom: solid 1px #ffebcd;
        color: var(--SHC_COL_LINE);
        }

div.main
        {
        background-color: white;
        border: solid 1px var(--SHC_COL_LINE);
	border-radius: 8px;
        }

div.box
	{
	border: solid 1px var(--SHC_COL_LINE);
	border-radius: 8px;
	background-color: white;
	}

p.outerbottom
        {
        color: var(--SHC_COL_LINE);
        }

span.sessiontitle
	{
	color: var(--SHC_COL_LINE);
	}
span.catchphrase
	{
	font-weight: bold;
	font-size: smaller; 
	float: right; 
	text-align: right;
	color: var(--SHC_COL_LINE);
	}

p.txtcol_dark
	{
	color: var(--SHC_COL_LINE);
	}
table.qtableA
        {
        border: solid 1px #e0eee0;
        }
table.qtableB
        {
        border: solid 1px #ffebcd;
        }

tr.colourrowA
        {
        background-color: white;
        border-color: #e0eee0;
        }
tr.colourrowB
        {
        background-color: white;
        border-color: #ffebcd;
        }
tr.palecolourrowA
        {
        background-color: #f5fffa;
        border-color: #e0eee0;
        }
tr.palecolourrowB
        {
        background-color: #fdf5e6;
        border-color: #ffebcd;
        }

a.linfoA:link
        {color: var(--SHC_COL_LINE);
        }
a.linfoA:visited
        {color: var(--SHC_COL_LINE);
        }
a.linfoA:hover
        {color: #83885e;
        }
a.linfoB:link
        {color: var(--SHC_COL_LINE);
        }
a.linfoB:visited
        {color: var(--SHC_COL_LINE);
        }
a.linfoB:hover
        {color: #83885e;
        }

div.question_infoA
        {
        background-color: #e0eee0;
        color: var(--SHC_COL_LINE);
        }
div.question_infoB
        {
        background-color: #ffebcd;
        color: var(--SHC_COL_LINE);
        }

table.bordercolA
	{border-color: #e0eee0;
	}
th.bordercolA
	{border-color: #e0eee0;
	}
td.bordercolA
	{border-color: #e0eee0;
	}
td.bgcolA_pale
	{background-color: #f5fffa;
	}
td.bgcolA
	{background-color: white;
	}
td.bgcolA_dark
	{background-color: #e0eee0;
	}
p.bordercolA
	{border-color: #e0eee0;
	}
p.bgcolA_pale
	{background-color: #f5fffa;
	}
table.bordercolB
	{border-color: #ffebcd;
	}
th.bordercolB
	{border-color: #ffebcd;
	}
td.bordercolB
	{border-color: #ffebcd;
	}
td.bgcolB_pale
	{background-color: #fdf5e6;
	}
td.bgcolB
	{background-color: white;
	}
td.bgcolB_dark
	{background-color: #ffebcd;
	}
p.bordercolB
	{border-color: #ffebcd;
	}
p.bgcolB_pale
	{background-color: #fdf5e6;
	}

input.menubutton
	{
	background: #fee3ad;
	border: 1px solid #0000ff;
	}

input.menuhoverbutton
	{
	background: #fee3ad;
	border: 1px solid #ff0000;
	}

input.stdbutton
	{
	background: #fee3ad;
	border: 1px solid #0000ff;
	}

input.stdhoverbutton
	{
	background: #fee3ad;
	border: 1px solid #ff0000;
	}

  --------------------------------------------------*/
ul.tabbernav
	{
	border-bottom: 1px solid #778;
	}

ul.tabbernav li a
	{
 	border: 1px solid #778;
	background: #DDE;
	}

ul.tabbernav li a:link
	{
	color: #448;
	}
ul.tabbernav li a:visited
	{
	color: #667;
	}

ul.tabbernav li a:hover
	{
	color: #000;
	background: #AAE;
	border-color: #227;
	}

ul.tabbernav li.tabberactive a
	{
	background-color: #fff;
	border-bottom: 1px solid #fff;
	}

ul.tabbernav li.tabberactive a:hover
	{
	color: #000;
	background: white;
	border-bottom: 1px solid white;
	}

/*--------------------------------------------------
  .tabbertab = the tab content
  Add style only after the tabber interface is set up (.tabberlive)
  --------------------------------------------------*/
.tabberlive .tabbertab
	{
	border: 1px solid var(--SHC_COL_LINE);
	background: white;
}

/*--------------------------------------------------
  ul.tabbernav = the tab navigation list
  li.tabberactive = the active tab
  --------------------------------------------------*/
ul.tabbernav
	{
	border-bottom: 1px solid #778;
	}

ul.tabbernav li a
	{
 	border: 1px solid var(--SHC_COL_LINE);
	background: #e8e8e8;
	}

ul.tabbernav li a:link
	{
	color: var(--SHC_COL_LINE);
	}
ul.tabbernav li a:visited
	{
	color: var(--SHC_COL_LINE);
	}

ul.tabbernav li a:hover
	{
	color: #000;
	color: var(--SHC_COL_LHOV);
	background: #f0f0f0;
	border-color: var(--SHC_COL_LINE);
	}

ul.tabbernav li.tabberactive a
	{
	background-color: #ffffff;
	border-bottom: 1px solid #ffffff;
	}

ul.tabbernav li.tabberactive a:hover
	{
	color: var(--SHC_COL_LINE);
	background: white;
	border-bottom: 1px solid white;
	}

/*--------------------------------------------------
  .tabbertab = the tab content
  Add style only after the tabber interface is set up (.tabberlive)
  --------------------------------------------------*/
.tabberlive .tabbertab
	{
	border: 1px solid var(--SHC_COL_LINE);
	background: white;
}

li.topmenu
	{
	width: 80px;
	border-width: 1px;
	border-color: var(--SHC_COL_LINE);
	}

li.topmenr
	{
	width: 84px;
	border-color: var(--SHC_COL_LINE);
	}

a.topmenu
	{
	color: var(--SHC_COL_LINE);
	background-color: white;
}
a.topmenu:hover
	{
	color: var(--SHC_COL_LHOV);
	}

a.alabel
	{
	color: var(--SHC_COL_LINE);
	}

a.alabel:hover
	{
	color: var(--SHC_COL_LHOV);
	}

a.crys_big_a
	{
	display: inline-block;
	width: 27px;
	height: 27px;
	text-decoration: none;
	margin: 0em;
	padding: 0em;
	border: none;
	vertical-align: -25%;
	background: var(--SHC_IMG_LIBIG);
	}
li.plain:hover a.crys_big_a
	{
	background-position: -27px 0;
	}
a.crys_mid_a
	{
	display: inline-block;
	width: 17px;
	height: 17px;
	text-decoration: none;
	margin: 0em;
	padding: 0em;
	border: none;
	vertical-align: -10%;
	background: var(--SHC_IMG_LIMID);
	}
a.crys_mid_a:hover
	{
	background-position: -17px 0;
	}

a:hover
	{
	color: var(--SHC_COL_LHOV);
	}

a.front
	{
	color: var(--SHC_COL_LINE);
	}

a.front:hover
	{
	color: var(--SHC_COL_LHOV);
	}

a.basic
	{
	text-decoration: none;
	color: var(--SHC_COL_LINE);
	}

a.basic:hover
	{
	color: var(--SHC_COL_LHOV);
	}

a.subtle
	{
	color: #000000;
	}

a.subtle:hover
	{
	color: var(--SHC_COL_LHOV);
	}

a.email
	{
	color: var(--SHC_COL_LINE);
	}

a.email:hover
	{
	color: #00AA00;
	}

table.download
	{
	border-color: var(--SHC_COL_LINE);
	}

td.int_blu
	{
	border: solid 1px var(--SHC_COL_LINE);
	}

td.txt_blu
	{
	border: solid 1px var(--SHC_COL_LINE);
	}

td.cen_blu
	{
	border: solid 1px var(--SHC_COL_LINE);
	}

th.cen_blu
	{
	border: solid 1px var(--SHC_COL_LINE);

table.outlined
	{
	border: solid 1px var(--SHC_COL_LINE);
	border-collapse: collapse;
	}

td.noborder
	{
	border-style: hidden;
	}

input.btn_act
	{
	background: #ffffb8;
	border: 1px solid var(--SHC_COL_LINE);
	}

input.btn_act:hover
{
	background: #ffffa0;
	border: 1px solid var(--SHC_COL_LHOV);
	color: var(--SHC_COL_LHOV);
}

input.btn_mini
	{
	background: #ffffb8;
	border: 1px solid var(--SHC_COL_LINE);
	}

input.btn_mini:hover
{
	background: #ffffa0;
	border: 1px solid var(--SHC_COL_LHOV);
	color: var(--SHC_COL_LHOV);
}

div.css3outer > div.css3warning {
    display: none;
}

input.btn_glow
{
	background: #ffffb8;
	border: 2px solid var(--SHC_COL_LINE);
	font-weight: bold;
	text-align: center;
	margin-left: 5px;
	margin-right: 5px;
	margin-top: 5px;
	margin-bottom: 5px;
	font-size: 100%;
	cursor: pointer;
	border-radius: 5px;                          /* if no CSS3, these will get ignored and */
	box-shadow:                                   /* it'll be a plainer, non-rounded button */
		0px 1px 3px rgba(000,000,000,0.5),
		inset 0px 0px 3px rgba(255,255,255,1);
	text-shadow:
		0px -1px 0px rgba(000,000,000,0.1),
		0px 1px 0px rgba(255,255,255,1); 
}

input.btn_glow:hover
{
	background: #ffffa0;
	border: 2px solid var(--SHC_COL_LHOV);
	color: var(--SHC_COL_LHOV);
}	
	
input.ukbrad  /* default for old browsers that can't understand */
{
	text-align: center;
	vertical-align: middle;
	width: 30px;
	height: 30px;
}

div.popup_overlay
{
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	background: rgba(0, 0, 0, 0.5);
	visibility: hidden;
	opacity: 0;
}

div.popup_overlay:target
{
	visibility: visible;
	opacity: 1;
}

div.popup_content
{
	margin: 70px auto;
	padding: 20px;
	background: white;
	border: 1px;
	border-color: var(--SHC_COL_LINE);
	border-radius: 5px;
	position: relative;
}