@charset "ISO-8859-1";

html,body{
	padding:0px;
	margin:0px;
	font-family: "sifonn","arial",sans;
}
.clear{
	position:relative;
	clear: left;
	width: 100%;
}
.fl_left{
	position:relative;
	float: left;
}
.spacer{
	position: relative;
	clear: left;
	width: 100%;
	height: 25px;
}
.spacer_short{
	position: relative;
	clear: left;
	width: 100%;
	height: 10px;
}
.italic{
	font-style:italic;
}
.underline{
	text-decoration: underline;
}
.bold{
	font-weight: bold;
}
.red{
	color: red;
}
.gray{
	background-color:#f3f3f3;
}
.border_1{
	border: 1px solid black;
}
.bottom{
	valign:bottom;
}
.block{
	display: block;
}
.progress_bar{
	position: relative;
	height: 100%;
	min-height: 100%;
	left:0px;
	background-color: #ccc;
	margin-right: auto;
	overflow: visible;
}
.progress_text{
	position: absolute;
	width: 100%;
	max-height: 100%;
	text-align: right;
	bottom: 0px;
}
.width_100{
	position:relative;
	width: 100%;
}
.center_80{
	position:relative;
	width: 80%;
	padding: 10px 10%;
}
.center_90{
	position:relative;
	width: 90%;
	padding: 10px 5%;
}
.misc_form{
	position: relative;
	width: 100%;
	margin: 0 0;
}
.left_5{
	padding-left:5px;
}
.left_15{
	padding-left: 15px;
}
.left_25{
	padding-left:25px;
}
.top_5{
	padding-top:5px;
}
.bottom_5{
	padding-bottom:5px;
}
.left_10{
	padding-left:10px;
}
.left_15{
	padding-left:15px;
}
.bottom_15{
	padding-bottom: 15px;
}
.large_1{
	font-size:1.25em;
}
.large_2{
	font-size:1.5em;
}
.large_3{
	font-size:1.75em;
}
.large_4{
	font-size:2.25em;
}

.outer_panel{
	position: relative;
	float: left;
	width: 40%;
}

.right_panel{
	position: relative;
	float: left;
	width: 50%;
}

.left_panel{
	position: relative;
	float: left;
	width: 35%;
}

.middle_panel{
	position: relative;
	float: left;
	width: 20%;
}

.mid_panel{
	position: relative;
	float: left;
	width: 15%;
}

#moip_logo{
	height: 8vh; 
	padding: 4px; 
	min-height: 35px;
	max-height: 60px;
}
#outer_holder{
	position: relative;
	display: block;
	width: 100%;
}
#inner_holder{
	position: relative;
	display: block;
	width: 95%;
	max-width: 1600px;
	margin: 0 auto;
	box-shadow: 0px 0px 15px 1px #999;
}
#flex_div{	
	position: relative;
	display: flex;
	flex-direction: row;
	width: 100%;
}

.success{
	font-size:1.25em;
	font-style:italic;
	font-weight: bold;
}
.error{
	font-size:1.25em;
	font-style:italic;
	font-weight: bold;
	color: red;
}
#title{
	position: relative;
	float: left;
	height: 12vh;
	width: 98%;
	padding-top: 1vh;
	padding-left: 2%;
	border-bottom: .35vh double black;
	color: #666d33;
	/*text-shadow: 0px 0px 1px #000000;*/
	background-color: #e9ede4;
}
#species_list{
	position: relative;
	width:34%;
	background-color: #f9f9f9;
	height:86.65vh;
	overflow: auto;
	padding-left: 1%;
	/*border-right: 5px solid #b1bd58;*/
}
#species_drop{
	display: none;
}
#category_drop{
	display: block;
	width:  100%;
	flex: 0 0 auto;
	text-align: left;
	position: relative;
	padding-top:  35px;
	padding-bottom:  25px;
}

#species_list_1{
	position: relative;
	width: 98%;
	padding-left: 2%;
}
.species{
	position: relative;
	width: 30%;
	min-width: 30%;
}
#rating_list{
	position: relative;
	padding-left: 20px;
}


#input_pane{
	position: relative;
	width:55%;
	padding-left: 10%;
	padding-top: 10px;
}
#landing_pane{
	position: relative;
	display: block;
	width:100%;
	padding-top: 10px;
}

#input_form{
	position: relative;
	width: 650px;
	margin: 0 0;
}

.rating_item{
	position: relative;
	width: 65px;
	padding: 2px 5px;
	text-align: center;
}

.form_row{
	position: relative;
	width: 100%;
	padding: 0px;
	text-align: left;
}
.text_area{
	position: relative;
	width: 100%;
}

#cts_header{
	float: left;
	width: 65%;
}
#summary_link{
	float: left;
	font-size: 1.2em;
	text-align: right;
	width: 35%;
}

.hanging{
	margin: 0px;
	padding: 0px;
	margin-left: 12px;
	text-indent: -12px;
}

.hanging_25{
	margin: 0px;
	padding: 0px;
	margin-left: 25px;
	text-indent: -25px;
}

.hanging_30{
	margin: 0px;
	padding: 0px;
	margin-left: 30px;
	text-indent: -30px;
}

.hanging_40{
	margin: 0px;
	padding: 0px;
	margin-left: 40px;
	text-indent: -40px;
}

.hanging_60{
	margin: 0px;
	padding: 0px;
	margin-left: 60px;
	text-indent: -60px;
}


@media all and (max-width: 1560px){

	#input_pane{
		padding-left: 5%;
	}
	
}
@media all and (max-width: 1250px){

	#input_pane{
		padding-left: 2%;
	}
	#species_list{		
	  width: 42%;
	  min-width: 400px;
	  padding-right: 0.5%;
	}

	#input_form{
		width: 525px;
	}
	
}
@media all and (max-width: 1075px){
	#flex_div{
		flex-direction: column;
  		justify-content: center;
	}
	#species_drop{
		display: block;
		width:  100%;
		flex: 0 0 auto;
		text-align: center;
		position: relative;
		padding-top:  10px;
		padding-bottom:  35px;
	}
	#category_drop{
		text-align: center;
		padding-top:  10px;
		padding-bottom:  15px;
	}
	#species_list{
		display: none;
	}
	#input_pane{
		margin: 0 auto;
		text-align: center;
		width: 75%;
	}

	#input_form{
		width: 100%;
		margin: 0 auto;
	}
}
@media all and (max-width: 875px){
	#moip_logo{
		height: 4vh; 
		padding: 4px; 
		min-height: 30px;
	}

	#cts_header{
		width: 100%;
		text-align: center;
	}
	#summary_link{
		width: 100%;
		text-align: center;
		font-size: 1em;
	}
	.large_4{
		font-size: 1.5em;
	}
	.large_2{
		font-size: 1.15em;
	}
	
	#inner_holder{
		width: 100%;
		box-shadow: none;
	}
	#input_pane{
		width: 90%;
	}
}