@charset "utf-8";
/* CSS Document */
A:link { font-weight: normal; text-decoration: none; color: #3E607D;}
A:visited { font-weight: normal; text-decoration: none ; color: #3E607D;}
A:active { font-weight: bold; text-decoration: none: #7399B9;}
A:hover { font-weight: bold; text-decoration: none; color: #3E607D;}

body{ 
	color: #757575;
	background-color:#e6e6e6;
	font-family: Arial, Helvetica, sans-serif;
	max-height: *; 
	min-height: 100px;    
	margin: auto ; /* the auto margins (in conjunction with a width) center the page */
	max-width: 600px;
	border: 0px solid #000000;
	text-align: center; /* this overrides the text-align: center on the body element. */
	padding: 5px 5px; /* remember that padding is the space inside the div box and margin is the space outside the div box */
}
h1{
	font-size:130%;
}
h2{
	text-align:center;
	font-size:120%;
	font-weight:bold;
	padding:10px;
}
.questionGroup{
	font-weight:bold;
}
.question{
	font-weight:normal;
}
#mainContainer{
	background-color:#F3F3EA;
	padding:10px;
}
#contentArea{ 
	text-align: left;
}
#mainMenu{
	padding:10px;
}
.questionGroup{
	margin-top:10px;
	border-top:thin #CCC  ridge;
	padding-top:5px;
}
.questionnaire input,.questionnaire textarea{
	width:100%; /* This is to use all the space reserved for answer */
}
.questionnaire input[type="checkbox"]{
	width:auto;
}

#participant .title,
.dogs .title{
	width:22%;
}
#participant .answer,
.dogs .answer{
	width:75%;
}

.radio .answer input{
	width:20px;
}
#participant .question div,
.dogs .question div{
	display: inline-block;
}
.title{
	width:100%;
}
.answer{
	margin-bottom:3px;
}
.date input{
	width:100px;
}
.regNo input,
.date input{
	width:150px;
}
.optionDescription{
	font-size:90%;
	width:80%;
}
#preQuestions .answer{
	width:100%;
}
.flex{
	display:flex;   /*other values | flex | inline-flex*/
	flex-direction:row; /*row | row-reverse | column | column-reverse*/
	flex-wrap:wrap; /*nowrap | wrap | wrap-reverse*/
	justify-content:space-around; /*flex-start | flex-end | center | space-between | space-around*/
	align-items:center; /*flex-start | flex-end | center | baseline | stretch*/
	align-content: flex-start;  /*flex-start | flex-end | center | space-between | space-around | stretch*/
}
.flex div{
	flex-grow:0; /*<number> (default 0)*/
	flex-basis:auto; /*<length> | auto (default auto)*/
	flex:none; /*none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]*/
	align-self:auto; /*auto | flex-start | flex-end | center | baseline | stretch*/
	flex-shrink:1; /*<number> (default 1)*/
}
.errorMessage{
	background-color:#F00;
	color:#FF0;
	text-align:center;
	font-weight:bold;
	margin:5px;
	
}
.acknowledge{
	margin-top:20px;
	font-size:110%;
	text-align:center;
	
}
.notice{
	margin:10px;
	font-size:110%;
	font-weight:400;
	text-align:center;
}