/* Default styles */
* {
	font-family:'Open Sans','Helvetica Neue',Arial,sans-serif;
	font-size:100%;
}

html{
	height: 100%;
	box-sizing: border-box;
}

body {
    position:relative;
    font-family:sans-serif;
    font-size:16px;
	background-color: #fff;
    margin:0;
    padding:0;
    height:100%;
    overflow:auto;
	text-decotaion:none;
	color: #333333;
}



.ui-overlay-a, .ui-page-theme-a, .ui-page-theme-a .ui-panel-wrapper{
	text-shadow: none;
}

fieldset {
	border: none;
}

/* Fix for older browsers. */
header, section, footer, aside, nav, main, article, figure{ 
	display: block; 
}

#header{
	position: relative;
	width:100%;
	margin-left:auto;
	margin-right:auto;
}

#border{
	background-color:#5b5b5b;
	height:2px;
}

#main{
	position:relative;
	width:100%;
	margin-left:auto;
	margin-right:auto;
	height:auto;
}

#footer{
	position:fixed;
	background-color:#5b5b5b;
    width:100%;
    height:50px;
	color:#FFF;
	left:0;
	right:0;
	bottom:0;
	display:block;
}

#header_content, #main_content, #footer_content{
	width:95%;
	max-width:450px;
	margin-left:auto;
	margin-right:auto;
}

#main_content{
	padding-top:20px;
	padding-bottom:50px;
	margin-bottom:50px;
}

#footer_content{
	vertical-align:middle;
}
#logo{
	position: relative;
	top: 15px;
	left: 0px;
	height:64px;
}

#progress_container_temp{
	position: relative;
}

#progress_container{
	vertical-align:middle;
}

#progressbar{
    color:#5b5b5b;
	height:20px;
	width:100%;
	text-align:right;
	margin-top:15px;
}
#bar{
	width:90%;
	float:left;
}

#done{
	background-color:#f9f9f9;		
	height:20px;
	float:left;
	
}

#todo{
	background-color:#5b5b5b;
	height:20px;
	float:right;	
}

#prog{
	color:#f9f9f9;
	background-color:#5b5b5b;
	font-size:14px;
	float:right;
}

#dubquest{
	width:100%;
}

.footer {
	font-size:10px;
	margin-left:20px;
}

.footer a {
	font-size:10px;
	color:#FFF;
}

h1 {
	font-size:24px;
	font-weight:600;
	text-transform:uppercase;
}

h2 {
	font-size:21px;
	font-weight:600;
	text-transform:uppercase;
}

h3 {
	font-size:18px;
	font-weight:600;
	text-transform:uppercase;	
}

h4 {
	text-transform:uppercase;
	letter-spacing:2px;
}

p {
	font-size:16px;	
}

B, b {font-weight:bold;}
I, i {font-style:italic;}
U, u {text-decoration:underline;}

a{
	text-decoration:none;
	font-size: 16px;
}
a:hover{
	cursor:pointer;
}
a:visited{
	text-decoration:none;
	color:#5b5b5b;
}

.SpecialFont, .SpecialFont a{
	font-size:20px;
	font-weight: bold;
}

.QuestFont, .QuestFont a{
	font-size:16px;	
}

.OptionFont, .OptionFont a{
	font-size:14px;
	padding:5px 0px;
}

.ScaleFont, .ScaleFont a{
	font-size:12px;
}

.noneofthese, .noneofthese a{
	font-size:14px;
}

input[type="radio"], input[type="checkbox"]{
	width:20px;
	height:20px;
	vertical-align:middle;
}

input[type="text"], input[type="number"]{
	min-height:24px;
	vertical-align:middle;
	font-size:14px;
}

textarea{
	font-size:14px;
}

tr.scaleCheckbox, tr.scaleRadio{
	height:25px;
	min-height:25px;
	vertical-align:middle;
}
td.noneradio{
	vertical-align:middle;
}
tr.noneCheckboxRow, tr.noneRadioRow{
	height:25px;
	min-height:25px;
	vertical-align:middle;
}
td.nonecheckbox{
	vertical-align:middle;
}
tr.questitems{
	font-weight:bold;
}
tr.divider td{
	padding:30px 0px 15px 0px;
	vertical-align:middle;
}



.colorRow{
	height:5px;
}
/****
.cb1{
	background-color:#E20612;
}

.cb2{
	background-color:#E04B33;
}

.cb3{
	background-color:#F2F2F2;
}

.cb4{
	background-color:#92DE8E;
}

.cb5{
	background-color:#01A920;
}
*******/

/************
** General **
************/

td.item{
	text-decoration:none;
	color:#333;
	margin: 2px 0px;
	padding: 2px 0px;
}
td.openitem{
	text-decoration:none;
	color:#333;
	margin: 2px 0px;
	padding: 2px 0px;
}

/****************
** General End **
****************/

/********************
** Single Response **
********************/

table.SRTable{
	border-collapse:separate;
	border-spacing: 5px;
	margin-top:10px;
	width:auto;
	border:hidden;
}

table.SRTable td.radio, table.SRTable td.noneradio{
	display:none;
}

table.SRTable input[type=text]{
	margin-top:auto;
	margin-bottom:auto;
	height:20px;
}

/*alternate rows*/
table.SRTable tr.r1, table.SRTable tr.r2{
	min-height:20px;
	vertical-align:middle;
}

table.SRTable td.item, table.SRTable td.openitem, table.SRTable td.noneitem{
	
	padding-left:2px;
	text-decoration:none;
	vertical-align:middle;
	color:#333;
	border: 5px solid #f9f9f9;
	
}

table.SRTable td.item a{
    text-decoration:none;
	color:#333;
	padding:10px;
}

table.SRTable td.itemimage{
	text-decoration:none;
	vertical-align:middle;
	color:#333;
}

table.SRTable td.openitem a{
	text-decoration:none;
	color:#333;
	padding-left:10px;
}

table.SRTable td.opentextarea{
	vertical-align:middle;
}


table.SRTable td.opentext{
	vertical-align:middle;
	
}

table.SRTable td.noneitem a{
	text-decoration:none;
	color:#333;
}

/************************
** Single Response End **
************************/

/**********************
** Multiple Response **
**********************/

table.MRTable{
	border-collapse:separate;
	border-spacing: 5px;
	margin-top:10px;
	width:100%;
}

table.MRTable td.checkbox, table.MRTable td.nonecheckbox{
	display:none;
}

table.MRTable input[type=text]{
	margin-top:auto;
	margin-bottom:auto;
	height:20px;
}

table.MRTable tr.r1, table.MRTable tr.r2{
	min-height:20px;
	vertical-align:middle;
}

table.MRTable td.item, table.MRTable td.item a, table.MRTable td.openitem, table.MRTable td.openitem a, table.MRTable td.noneitem, table.MRTable td.noneitem a{
	padding-top:2px;
	padding-bottom:2px;
	padding-left:2px;
	text-decoration:none;
	vertical-align:middle;
	color:#333;
}

/**************************
** Multiple Response End **
**************************/

/**********************
** Items Popup Table **
**********************/

table.ItemsPopupTable{
	border-collapse:collapse;
	/*	border-spacing: 5px;  */
	margin-top:10px;
	width:100%;
	border-style: hidden;
}

/* table.ItemsPopupTable input[type="radio"]{
	display:none;
} */

table.ItemsPopupTable input[type="text"]{
	margin-top:auto;
	margin-bottom:auto;
	height:25px;
}

table.ItemsPopupTable tr.r1, table.ItemsPopupTable tr.r2, table.ItemsPopupTable td.item, table.ItemsPopupTable td.item2, table.ItemsPopupTable td.item3{
	text-align:left;
	padding-top:5px;
	padding-bottom:5px;
	
}

table.ItemsPopupTable td.ScaleColumn{
	padding-left:3px;
	padding-right:3px;
	vertical-align:bottom;
	text-align:center;
}

table.ItemsPopupTable td.radio{
	vertical-align:middle;
	text-align:center;
	min-height:25px;
	border-right:10px;
}

table.ItemsPopupTable td.noneradio{
	vertical-align:middle;
	text-align:left;
	min-height:25px;
}

table.ItemsPopupTable td {
	border: 5px solid #f9f9f9;
}

table.ItemsPopupTable tr.questitems td {
	border: 0;
}


/**************************
** Items Popup Table End **
**************************/

/*******************************
** Multiple Items Popup Table **
*******************************/

table.MultipleItemsPopupTable{
	border-collapse:separate;
	border-spacing: 5px;
	margin-top:10px;
	width:100%;
}

/* table.MultipleItemsPopupTable input[type="checkbox"]{
	display:none;
} */

table.MultipleItemsPopupTable input[type="text"]{
	margin-top:auto;
	margin-bottom:auto;
	height:25px;
}

table.MultipleItemsPopupTable tr.r1, table.MultipleItemsPopupTable tr.r2{
    text-align:left;
	padding-top:5px;
	padding-bottom:5px;
}

table.MultipleItemsPopupTable td.ScaleColumn{
	padding-left:3px;
	padding-right:3px;
	vertical-align:bottom;
	text-align:center;
}

table.MultipleItemsPopupTable td.item, table.MultipleItemsPopupTable td.item2, table.MultipleItemsPopupTable td.item3{
    text-align:left;
	padding-top:5px;
	padding-bottom:5px;
}

table.MultipleItemsPopupTable td.checkbox, table.MultipleItemsPopupTable td.nonecheckbox{
	vertical-align:middle;
	text-align:center;
	min-height:30px;
}

/***********************************
** Multiple Items Popup Table End **
***********************************/

/***************
** Open Ended **
***************/

table.OpenEnded{
	margin-top:10px;
	width:100%;
}

table.OpenEnded textarea{
	width:100%;
	padding-bottom:5px;
	padding-left:2px;
	text-decoration:none;
	vertical-align:middle;
	color:#333;
}

table.OpenEnded td.none, table.OpenEnded td.none a{
	padding-top:5px;
	padding-bottom:5px;
	padding-left:2px;
	text-decoration:none;
	vertical-align:middle;
	color:#333;
}

/*******************
** Open Ended End **
*******************/

/**************
** Numerical **
**************/

table.NumericTable{
	border-collapse:separate;
	border-spacing: 5px;
	margin-top:10px;
	width:20%;
	min-width:200px;
	margin-left:auto;
	margin-right:auto;
}

table.NumericTable td.item, table.NumericTable td.item2, table.NumericTable td.none, table.NumericTable td.none a, table.NumericTable td.noneofthese, table.NumericTable td.noneofthese a{
    padding-top:5px;
	padding-bottom:5px;
	padding-left:2px;
	text-decoration:none;
	vertical-align:middle;
	color:#333;
}

table.NumericTable td.text{
	padding-left:3px;
	vertival-align:middle;
}

/******************
** Numerical End **
******************/

/*********
** Text **
*********/

table.TextTable{
	border-collapse:separate;
	border-spacing: 5px;
	margin-top:10px;
	width:auto;
	min-width:200px;
	margin-right:auto;
}

table.TextTable td.text, table.TextTable td.password{
	vertical-align:middle;
}

table.TextTable td.item, table.TextTable td.item2, table.TextTable td.none, table.TextTable td.none a, table.TextTable td.noneofthese, table.TextTable td.noneofthese a{
    padding-top:5px;
	padding-bottom:5px;
	text-decoration:none;
	vertical-align:middle;
	color:#333;
}

/*************
** Text End **
*************/

/*********
** Date **
*********/

table.DateTable{
	border-collapse:separate;
	border-spacing: 5px;
	margin-top:10px;
	width:100%;
}

table.DateTable td.item, table.DateTable td.text{
	width:auto;
}

table.DateTable td.text table{
	width:100%;
}

table.DateTable input[type="text"] {
	min-height:24px;
	width:100%;
	min-width:80px;
	vertical-align:middle;
	font-size:14px;
}

.DateSpinnerUp, .DateSpinnerDown{
	display:none;
}

img[src=/Images/SpinnerUp.gif]{
	height:20px;
}


/*************
** Date End **
*************/


/*******************
** X-Points Table **
*******************/

table.XPointsTable{
	border-collapse:separate;
	border-spacing: 5px;
	margin-top:10px;
	width:100%;
}

table.XPointsTable input[type="text"]{
	margin-top:auto;
	margin-bottom:auto;
	height:25px;
}

table.XPointsTable tr.r1, table.XPointsTable tr.r2, table.XPointsTable td.item{
	text-align:left;
	padding-top:5px;
	padding-bottom:5px;
	
}

table.XPointsTable td.item2, table.XPointsTable td.item3{
	text-align:center;
	padding-top:5px;
	padding-bottom:5px;
	vertical-align:middle;
	
}

table.XPointsTable td.XptScaleColumn{
	padding-left:3px;
	padding-right:3px;
	vertical-align:bottom;
	text-align:center;
}

table.XPointsTable td.radio{
	vertical-align:middle;
	text-align:center;
	min-height:25px;
	min-width:25px;
}

table.XPointsTable td.noneradio{
	vertical-align:middle;
	text-align:left;
	min-height:25px;
}

/***********************
** X-Points Table End **
***********************/


/******************************************** 
* Mouseover tooltip feature. 
*
* <span class="tooltip">
*	Place content here
* 	<span>Place tooltip content here</span>
* </span>
********************************************/

span.tooltip {outline:none; }
span.tooltip strong {line-height:30px;}
span.tooltip:hover {text-decoration:none;} 
span.tooltip span {
    z-index:10;display:none;
    margin-top:60px; margin-left:20px;
    width:auto; line-height:16px;
}
span.tooltip:hover span{
    display:inline; position:absolute; 
    border:2px solid #FFF;  color:#EEE;
}
/*CSS3 extras*/
span.tooltip span
{
    border-radius:2px;
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
        
    -moz-box-shadow: 0px 0px 8px 4px #666;
    -webkit-box-shadow: 0px 0px 8px 4px #666;
    box-shadow: 0px 0px 8px 4px #666;

    opacity: 0.8;
}
/***********************************
** END Mouseover tooltip feature. **
***********************************/


/********************
** Control buttons **
********************/
/* #btnPrev{
	height:60px;
	width:60px;
	margin-right:20px;
	margin-bottom:100px;
}
#btnNext{
	height:60px;
	width:60px;
	margin-left:20px;
	margin-bottom:100px;
} */
.ui-btn{
	display:inline-block;
	width:auto;
	max-width:200px;
	min-width:100px;
	padding: 0.7em 0.5em;
	border:none;
	background-color:#b0b0b0;
	margin-left:auto;
	margin-right:auto;
}


.ui-btn:hover{
	display:inline-block;
	padding: 0.7em 0.5em;
	border:none;
	background-color:#5b5b5b;
}

/* .ui-btn-focus{
	background-color: #5b5b5b;
} */

html head+body .ui-btn.ui-btn-b { background: #5b5b5b; }
html head+body .ui-btn.ui-btn-b:hover { background: #5b5b5b; }



/************************
** Control buttons End **
************************/


/**********************
** Alerts and errors **
**********************/
div.nebui-panel{
	width:50%;
	height:150px;
	
	border-radius:5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
}
table.nebui-panel{
	font-size:18px;
	background-color:#DDD;
	color:#111;
	border-collapse:collapse;
}

table.nebui-panel td{
	font-size:18px;
	color:#111;
}

td.nebui-panel-head{
	background-color:#888;
	display:none;
}

td.nebui-panel-buttons input.button{
	background-color:#888;
	height:30px;
	width:60px;
	font-size:14px;
}
/**************************
** Alerts and errors End **
**************************/

@media screen and (max-width: 479px) {
	#header_content, #main_content, #footer_content{
		max-width:450px;
		margin-left:auto;
		margin-right:auto;
	}
	
	/*div.nebui-panel{
		width:350px;
	}*/
}



/* Styles 480px and up */
@media screen and (min-width: 480px) {
	#header_content, #main_content, #footer_content{
		max-width:480px;
		margin-left:auto;
		margin-right:auto;
	}
	/*div.nebui-panel{
		width:400px;
	}*/
}

/* Styles 640px and up */
@media screen and (min-width: 640px) {
	#header_content, #main_content, #footer_content{
		max-width:640px;
		margin-left:auto;
		margin-right:auto;
	}
	/*div.nebui-panel{
		width:400px;
	}*/
}

/* Styles 800px and up */
@media screen and (min-width: 800px) {
	#header_content, #main_content, #footer_content{
		max-width:760px;
		margin-left:auto;
		margin-right:auto;
	}
	/*div.nebui-panel{
		width:500px;
	}*/
}



@media screen and (max-width: 500px) /* Mobile */ {
  #header{
	  display:none;
  }
  #border{
	  display:none;
  }
}

.submit, .button {
  width: 120px;
}
.submit:hover, .button:hover {
  background-color: #214f9999;
}
input[type=button], input[type=submit], input[type=reset] {
  background-color: #214f99;
  border: none;
  color: white;
  padding: 12px 0px;
  text-decoration: none;
  margin: 4px 2px;
  cursor: pointer;
  -webkit-appearance: none;
   -moz-appearance: none;
   appearance:none;
  -webkit-transition: background-color 0.5s, color 0.5s;
  transition: background-color 0.5s, color 0.5s;
  border-radius: 2px;
}

div#header_content {
	display: block;
    background: url(http://answer.origogroup.com/Images/<INSERT PROJECT NAME/<INSERT IMAGE NAME>) top left no-repeat;
    background-origin: padding-box;
    background-size: auto auto;
    width: 100%;
    background-size: contain;
    background-origin: content-box;
    height: 150px;
    /*margin: 1em; use if you want logo in left corner*/
    margin-top: 1em;
    margin-bottom: 1em;
}