:root
	{
	--OQS_COL_GREY: #f0f0f0;
	}

body
	{
	font-family: Arial, Verdana, sans-serif;
	color: black;
	background-color: white;
	padding: 0px;
	margin: 0px;
	}

*.clearout
	{
	clear: both;
	padding: 0em;
	margin: 0em;
	}

*.preformat
	{
	white-space: pre-wrap;
	word-break: keep-all;
	}

.oqs_bg
	{
	background-color: white;
	background-color: var(--OQS_COL3,white);
	}

.oqs_primary_txt
	{
	color: black;
	color: var(--OQS_COL2,black);
	}

div.oqs_banner_top
	{
	background-color: #d0e0f0;
	background-color: var(--OQS_COL1,#d0e0f0);
	min-height: 80px;
	margin: 0px;
	overflow: auto;
	}

@media only screen and (max-width: 490px)
	{
	div.oqs_banner_top
		{
		min-height: 100px;
		}
	}

@media only screen and (max-width: 400px)
	{
	div.oqs_banner_top
		{
		min-height: 130px;
		}
	}

div.oqs_banner_bottom, footer.oqs_banner_bottom
	{
	background-color: #d0e0f0;
	background-color: var(--OQS_COL1,#d0e0f0);
	min-height: 35px;
	padding-bottom: 5px;
	margin: 0px;
	}

div.oqs_body_bg
	{
	background-color: white;
	background-color: var(--OQS_COL3,white);
	}


@media only screen and (max-width: 700px)    
    {
    .title_text {
            margin: 0px;
            padding: 0em 2em;
        }
    }


*.oqs_project_txt
	{
	color: black;
	color: var(--OQS_COL2,black);
	padding: 10px 10px 10px 10px;
	overflow: auto;
	font-size: 100%;
	margin: 0em;
	}

*.oqs_questionnaire_txt
	{
	color: black;
	color: var(--OQS_COL2,black);
	padding: 10px 10px 10px 10px;
	overflow: auto;
	font-size: 250%;
	margin: 0em;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
	}

@media only screen and (max-width: 700px)    
    {
    *.oqs_questionnaire_txt
        {
        display: block;
        text-align: center;
        padding: 0px;
        }
    }

@media only screen and (max-width: 700px)
	{
	p.oqs_project_txt
		{
		float: none;
		padding-top: 2px;
		margin-left: auto;
		margin-right: auto;
		text-align: center;
		}
	}

div.oqs_project_logo
	{
	float: right;
	margin: 5px 10px 5px auto;
	overflow: auto;
	padding: 0em;
	}

img.oqs_project_logo
	{
	height: 70px; /*  105px for uniox */
	width: auto;
	padding: 0em;
	margin: 10px;
	}

@media only screen and (max-width: 700px)
	{
	div.oqs_project_logo
		{
		float: none;
		text-align:center;
		}
	img.oqs_project_logo
		{
		height: 60px;
        margin: 0px;
		}
	}

div.oqs_outer
	{
	padding: 10px;
	margin: 0px;
	background: white;
	background: var(--OQS_COL3,white);
	}

@media only screen and (max-width: 600px)
	{
	div.oqs_outer
		{
		padding: 0px;
		margin: 0px;
		background-color: #d0e0f0;
		background-color: var(--OQS_COL1,d0e0f0);
		}
	}

div.oqs_frame
	{
	padding: 15px 15px 10px 15px;
	margin: 0px;
	background: #f0f0f0;
	background: var(--OQS_COL_GREY,#f0f0f0);
	border-radius: 10px;
	}

@media only screen and (max-width: 600px)
	{
	div.oqs_frame
		{
		border-radius: 0px;
		padding: 8px 0px 8px 0px;
		margin: 0px;
		}
	}

div.oqs_core
	{
	padding: 15px;
	margin: 0px;
	background: white;
	}

div.oqs_button_bar
	{
	display: flex;
	flex-wrap: wrap-reverse;
	align-items: center;
	padding: 0px;
	margin: 0px;
	}

div.oqs_status_bar
	{
	display: flex;
	align-items: center;
	padding-top: 5px;
	padding-bottom: 0px;
	padding-left: 15px;
	padding-right: 15px;
	margin: 0px;
	background: #f0f0f0;
	background: var(--OQS_COL_GREY,#f0f0f0);
	}

p.oqs_tagline_txt
	{
	color: var(--OQS_COL2);
	float: right;
	margin: 10px 10px auto auto;
	overflow: auto;
	}

.oqs_nav_btn
	{
	background-color: #f0f0f0;
	background-color: var(--OQS_COL_GREY,#f0f0f0);
	border: 1px solid black;
	border: 1px solid var(--OQS_COL4, black);
	color: black;
	font-size: 120%;
	margin: 8px;
	padding-left: 10px;
	padding-right: 10px;
	padding-top: 4px;
	padding-bottom: 4px;
	border-radius: 5px;
	cursor: pointer;
	}

@media only screen and (max-width: 440px)
	{
	.oqs_nav_btn
		{
		font-size: 120%;
        appearance: none;
		-webkit-appearance: none;
		-moz-appearance: none;
		white-space: normal;
		word-wrap: break-word;
		}
	}

.oqs_nav_btn:hover
	{
	cursor: pointer;
	}

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

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

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

.oqs_progress_meter
	{
	height: 0.7em; 
	position: relative;
	background: #ffffff; 
	border: 2px solid;
	border-color: black;
	border-color: var(--OQS_COL4,black);
	border-radius: 1em;
	-moz-border-radius: 1em;
	-webkit-border-radius: 1em;
	padding: 0.1em;
	margin: 0em;
	box-shadow: inset 0 -1px 1px rgba(255,255,255,0.3);
	flex-grow: 1;
	}  

@media only screen and (max-width: 400px)
	{
	.oqs_progress_meter
		{
		display: none;
		}
	}


.oqs_progress_meter > span
{
	display: block;
	height: 100%;
	border-radius: 20px;
	box-shadow:
		inset 0 2px 9px rgba(80,80,80,0.3),
		inset 0 -2px 6px rgba(0,0,0,0.4);
	position: relative;
	overflow: hidden;
}

.oqs_highlight_problem
	{
	background-color: #ffff99;
	border-bottom: dashed 1px #ff3333;
	-webkit-animation-name: borderChange; /* Safari 4.0 - 8.0 */
	-webkit-animation-duration: 3s; /* Safari 4.0 - 8.0 */
	-webkit-animation-iteration-count: infinite;
	animation-name: borderChange;
	animation-duration: 3s;
	animation-iteration-count: infinite;
	}

span.oqs_staytogether
	{
	white-space: nowrap;
	}

@media only screen and (max-width: 25em)
	{
	span.oqs_staytogether
		{
		white-space: normal;
		}
	}

h2.oqs_ptitle
	{
	margin: 0em;
	padding: 15px 0px 0px 25px;
	font-size: 1.6em;
	border: none;
	}

h2.oqs_ptitle span.oqs_ptitle
	{
	-webkit-border-radius: 1em 1em 0em 0em;
	-moz-border-radius: 1em 1em 0em 0em;
	border-radius: 1em 1em 0em 0em;
	border: none;
	white-space: nowrap;
	padding: 0.2em 1.1em 5px 1.1em;
	margin: 0em;
	background-color: #f0f0f0;
	background-color: var(--OQS_COL_GREY,#f0f0f0);
	color: black;
	color: var(--OQS_COL4,black);
	}

@media only screen and (max-width: 600px)
	{
	h2.oqs_ptitle span.oqs_ptitle
		{
		background-color: white;
		}
	}

.oqs_rdg 
	{
	display: block;
	float: none;
	clear: left;
	position: relative;
	padding: 0 0 0 1.5em; 
	margin-top: 3px; 				
	margin-bottom: 3px; 
	}

.oqs_rdg input[type=radio]
	{
	position: absolute;
	cursor: pointer;
	left: 0;
	top: 0;
	width: 1.5em;
	height: 1.5em;
	z-index: 1;
	margin: 0;
	zoom: 1;
	filter: alpha(opacity=0);
	opacity: 0; 
	}
		
.oqs_rdg label 
	{
	cursor: pointer;
	padding: 5px 9px 5px 8px;
	display: block;
	-ms-touch-action: manipulation;
	touch-action: manipulation; 
	}

	/* circle style */	
.oqs_rdg [type=radio] + label::before 
	{
	content: "";
	border: 1px solid #888888;		/* Border colour */			
	background: #eeeeee;			/* Unselected colour */
	width: 1.5em;
	height: 1.5em;
	position: absolute;
	top: 0;
	left: 0;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%; 
	}

.oqs_rdg [type=radio] + label
	{
	font-weight: normal;
	}

.oqs_rdg [type=radio]:checked + label
	{
	font-weight: bold;
	}

.oqs_rdg input:checked + label::before 
	{
	background: #888888;			/* Selected colour */
	}

input.oqs_cbx
	{
	margin: 0em 0em 0em 0.8em;
	}

div p>input[type="checkbox"].oqs_cbx, div p>input[type="checkbox"].chk_subitem
	{
	display: none;
	}

input[type="checkbox"].oqs_cbx+label:before, input[type="checkbox"].chk_subitem+label:before
	{
	margin-left: 0.2em;
	padding: 0em; 
	}

input[type="checkbox"].oqs_cbx:checked+label:before
	{
	background-image: url('/oqs/graphics/cbx_tick.png');
	}

input[type="checkbox"].chk_subitem:checked+label:before
	{
	background-image: url('/oqs/graphics/cbx_tick.png');
	}

input[type="checkbox"].oqs_cbx:checked+label:before, input[type="checkbox"].chk_subitem:checked+label:before
	{
	content: "\00a0/\00a0";
	}