@charset "UTF-8";
/* CSS Document */
/*#a1d3a2*/
@fontface{
	font-family: 'Manifesto';
    src: url(../font/MANIFESTO.ttf) format('truetype');
}	
body{
	background-color:#efefef;
}
.paddingCell{
	float:left;
	position:relative;
	width:100px;
	height:200px;
	margin-top:0px;
	background-color:transparent;	
}
#main_container{
	float:left;
	position: relative;
	width:100%;
	height:100%;
	margin-left:-10px;
	margin-top:-10px;
	opacity:0.0;
	background-color:transparent;
	animation-name:pgFadeIn;
	animation-delay:0.0s;
	animation-duration:2s;
	animation-fill-mode: forwards; 
	}

@keyframes pgFadeIn{
	0%{
		opacity:0.0;	
	}
	100%{
		opacity:1.0;	
	}
}
#logoBox{
	float:left;
	position:relative;
	width:100%;
	height:auto;
	margin-left:0%;
	margin-top:175px;
}
#logoBox img{
	width:100%;
	height:auto;	
}
#identify_start{
	float:left;
	position:relative;
	width:70%;
	height:200px;
	margin-left:15%;
	margin-top:180px;
	background-color:transparent;	
	color:#262626;
	font-size:3em;
	font-family:'Manifesto', Helvetica, Arial;
	text-align:center;
	line-height:200px;
	vertical-align:middle;
	border-bottom:1px solid RGBA(10,10,10,0.2);
	border-top:1px solid RGBA(10,10,10,0.2);
}
#free_browse{
	float:left;
	position: relative;
	width:70%;
	height:200px;
	margin-left:15%;
	margin-top:175px;
	background-color:transparent;	
	color:#262626;
	font-size:3em;
	font-family:'Manifesto', Helvetica, Arial;
	text-align:center;
	line-height:200px;
	vertical-align:middle;
	border-bottom:1px solid RGBA(10,10,10,0.2);
	border-top:1px solid RGBA(10,10,10,0.2);
}


.stage_position{
	float:left;
	position: relative;
	width:76%;
	height:150px;
	margin-left:12%;
	margin-top:20px;
	background-color:transparent;	
}
.stage_position img{
	width:100%;
	height:auto;
}

.selector_main{
	float:left;
	position: relative;
	width:80%;
	height:1000px;
	margin-left:10%;
	margin-top:20px;
	/*background-color:#fff;*/
	color:#000;
	font-size:2em;
	text-align:center;
}
/*Selector Sections - stage 1 on seperate css================================================================*/
/*======================================================================================*/


.selObj img{
	width:auto;
	height:100%;	
}

/*Stage 2=======*/
#stage2_grid{
	display:grid;
	grid-template-columns: repeat(6, 1fr);
    grid-template-rows: repeat(3, 333px);
	grid-gap:3px;

}
#stage2_grid .selObj{
	/*width:auto;*/
	height:333px;
	background-color:transparent;
	color:#000;
}
#stg2Cat1{
	grid-column-start: 1;
    grid-column-end: 3;
    grid-row-start: 1;
    grid-row-end: 2;
}
#stg2Cat2{
	grid-column-start: 3;
    grid-column-end: 5;
    grid-row-start: 1;
    grid-row-end: 2;
}
#stg2Cat3{
	grid-column-start: 5;
    grid-column-end: 7;
    grid-row-start: 1;
    grid-row-end: 2;
}
#stg2Cat4{
	grid-column-start: 2;
    grid-column-end: 4;
    grid-row-start: 2;
    grid-row-end: 3;	
}
#stg2Cat5{
	grid-column-start: 4;
    grid-column-end: 6;
    grid-row-start: 2;
    grid-row-end: 3;	
}
#stg2Cat6{
	grid-column-start: 1;
    grid-column-end: 3;
    grid-row-start: 3;
    grid-row-end: 4;	
}
#stg2Cat7{
	grid-column-start: 3;
    grid-column-end: 5;
    grid-row-start: 3;
    grid-row-end: 4;
}
#stg2Cat8{
	grid-column-start: 5;
    grid-column-end: 7;
    grid-row-start: 3;
    grid-row-end: 4;
}

/*Stage 3=======*/
#stage3_grid{
	display:grid;
	grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(8, 125px);
	grid-gap:3px;

}
#stage3_grid .selObj{
	/*width:auto;*/
	height:250px;
	background-color:transparent;
	color:#000;
}
#stg3Cat1{
	grid-column-start: 1;
    grid-column-end: 2;
    grid-row-start: 1;
    grid-row-end: 3;
}
#stg3Cat2{
	grid-column-start: 1;
    grid-column-end: 2;
    grid-row-start: 3;
    grid-row-end: 5;
}
#stg3Cat3{
	grid-column-start: 1;
    grid-column-end: 2;
    grid-row-start: 5;
    grid-row-end: 7;
}
#stg3Cat4{
	grid-column-start: 1;
    grid-column-end: 2;
    grid-row-start: 7;
    grid-row-end: 9;	
}
#stg3Cat5{
	grid-column-start: 2;
    grid-column-end: 3;
    grid-row-start: 2;
    grid-row-end: 4;	
}
#stg3Cat6{
	grid-column-start: 2;
    grid-column-end: 3;
    grid-row-start: 4;
    grid-row-end: 6;	
}
#stg3Cat7{
	grid-column-start: 2;
    grid-column-end: 3;
    grid-row-start: 6;
    grid-row-end: 8;
}
#stg3Cat8{
	grid-column-start: 3;
    grid-column-end: 4;
    grid-row-start: 1;
    grid-row-end: 3;
}
#stg3Cat9{
	grid-column-start: 3;
    grid-column-end: 4;
    grid-row-start: 3;
    grid-row-end: 5;	
}
#stg3Cat10{
	grid-column-start: 3;
    grid-column-end: 4;
    grid-row-start: 5;
    grid-row-end: 7;
}
#stg3Cat11{
	grid-column-start: 3;
    grid-column-end: 4;
    grid-row-start: 7;
    grid-row-end: 9;
}

#stage4_grid{
	display:grid;
	grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(4, 250px);
	grid-gap:3px;

}
#stage4_grid .selObj{
	/*width:auto;*/
	height:250px;
	background-color:transparent;
	color:#000;
}
#stg4Cat1{
	grid-column-start: 1;
    grid-column-end: 2;
    grid-row-start: 1;
    grid-row-end: 2;
}
#stg4Cat2{
	grid-column-start: 1;
    grid-column-end: 2;
    grid-row-start: 2;
    grid-row-end: 3;
}
#stg4Cat3{
	grid-column-start: 1;
    grid-column-end: 2;
    grid-row-start: 3;
    grid-row-end: 4;
}
#stg4Cat4{
	grid-column-start: 1;
    grid-column-end: 2;
    grid-row-start: 4;
    grid-row-end: 5;	
}
#stg4Cat5{
	grid-column-start: 2;
    grid-column-end: 3;
    grid-row-start: 1;
    grid-row-end: 2;	
}
#stg4Cat6{
	rid-column-start: 2;
    grid-column-end: 3;
    grid-row-start: 2;
    grid-row-end: 3;	
}
#stg4Cat7{
	grid-column-start: 2;
    grid-column-end: 3;
    grid-row-start: 3;
    grid-row-end: 4;
}
#stg4Cat8{
	grid-column-start: 2;
    grid-column-end: 3;
    grid-row-start: 4;
    grid-row-end: 5;
}
#stg4Cat9{
	grid-column-start: 3;
    grid-column-end: 4;
    grid-row-start: 1;
    grid-row-end: 2;
}
#stg4Cat10{
	grid-column-start: 3;
    grid-column-end: 4;
    grid-row-start: 2;
    grid-row-end: 3;
}
#stg4Cat11{
	grid-column-start: 3;
    grid-column-end: 4;
    grid-row-start: 3;
    grid-row-end: 4;
}
#stg4Cat12{
	grid-column-start: 3;
    grid-column-end: 4;
    grid-row-start: 4;
    grid-row-end: 5;
}


/*Bottom text fields======================================================================================*/
/*======================================================================================*/
.instruction_text{
	float:left;
	position: relative;
	width:70%;
	height:100px;
	margin-left:15%;
	margin-top:20px;
	/*background-color:#CF3;*/	
	color:#262626;
	font-size:2em;
	font-family:Helvetica, Arial, sans-serif;
	text-align:center;
	line-height:100px;
	vertical-align:middle;
}
#selection_text{
	float:left;
	position: relative;
	width:60%;
	height:100px;
	margin-left:20%;
	margin-top:-20px;
	/*background-color:#969;*/	
	color:#31a35a;
	font-size:3em;
	font-family:'Manifesto', Helvetica, Arial, sans-serif;
	text-align:center;
	line-height:100px;
	vertical-align:middle;
}
#next_arrow{
	float:left;
	position: relative;
	width:50px;
	height:50px;
	margin-left:-90px;
	margin-top:5px;
	background-color:transparent;
	display:none;
	opacity:0.0;	
	animation-name:proceedAlert;
	animation-delay:0.2s;
	animation-duration:3s;
	animation-iteration-count:infinite;
	background-image:url('../img/nextArrow.png');
	
}
@keyframes proceedAlert{
	0%{
		margin-left:-90px;
		opacity:0;	
	}
	10%{
		margin-left:-90px;
		opacity:1;	
	}
	100%{
		margin-left:0px;
		opacity:0.0;	
	}
}


/*Result page fields======================================================================================*/
/*======================================================================================*/
#reset_btn{
	float:left;
	position:relative;
	width:30%;
	height:75px;
	margin-left:35%;
	margin-top:20px;
	background-color:#262626;	
	color:#eaeaea;
	font-size:2em;
	font-family:Helvetica, Arial, sans-serif;
	padding:20px;
	text-align:center;
	line-height:75px;
	vertical-align:middle;
}
#results_display_area{
	float:left;
	position: relative;
	width:80%;
	height:90%;
	margin-left:10%;
	margin-top:20px;
	/*background-color:#fff;*/
	overflow:scroll;
}
#results{
	float:left;
	position: relative;
	width:100%;
	height:auto;
	margin-left:0px;
	margin-top:0px;
	/*background-color:#fff;	*/
	overflow:scroll;
	text-align:center;
}
#possibleMatchesHeader{
	float:left;
	position:relative;
	width:100%;
	height:auto;
	margin-top:150px;
	font-size: 1.0em;
	text-align:center;
}

.resultObj{
	float:left;
	position:relative;
	width:100%;
	height:200px;
	margin-left:0px;
	margin-top:20px;
	background-color:transparent;	
	color:#262626;
	border-bottom:1px solid RGBA(10,10,10,0.2);
	border-top:1px solid RGBA(10,10,10,0.2);
	/*font-size:63px;*/
	text-align:left;
	padding-top:0px;
}


.resultObj .leaf_thumb{
	display:inline-block;
	float:left;
	position:absolute;
	width:160px;
	height:160px;
	margin-left:20px;
	margin-top:20px;
	background-color:#eaeaea;
	overflow:hidden;	
}
.resultObj .leaf_thumb img{
	width:100%;
	height:auto;
	margin-left:0px;
	margin-top:0px;
}
.resultObj .common_name{
	font-size: 45px;
	font-family:'Manifesto', Helvetica, Arial, sans-serif;
	margin-top:45px;
	margin-left:200px;
}
.resultObj .sci_name{
	font-size: 35px;
	font-family:Helvetica, Arial, sans-serif;	
	font-style:oblique;
	margin-top:-40px;
	margin-left:200px;
}
.no_match{
	float:left;
	position:relative;
	width:100%;
	height:200px;
	margin-left:0px;
	margin-top:30px;
	background-color:transparent;	
	color:#262626;
	border-bottom:1px solid RGBA(10,10,10,0.2);
	border-top:1px solid RGBA(10,10,10,0.2);
	/*font-size:63px;*/
	text-align:center;
	padding-top:0px;
	font-size: 50px;	
	font-style:oblique;
	line-height:100px;
	vertical-align:middle;
}


/*Leaf info page fields======================================================================================*/
/*======================================================================================*/
#info_display_area{
	float:left;
	position: relative;
	width:80%;
	height:100%;
	margin-left:10%;
	margin-top:0px;
	/*background-color:#fff;*/
	overflow:visible;
}
#back_btn{
	float:left;
	position:absolute;
	width:30px;
	height:30px;
	margin-left:50px;
	margin-top:50px;
	background-color:transparent;
	/*background-image:url('../img/infoBackBtn.png');	*/
	color:#eaeaea;
	font-size:2em;
	text-align:center;
	z-index:5;
}
#back_btn img{
	width:100%;
	height:auto;
}
#info_field{
	float:left;
	position: relative;
	width:100%;
	height:auto;
	margin-left:0px;
	margin-top:100px;
	background-color:transparent;
	text-align:center;
	font-family:Helvetica, Arial, sans-serif;
	z-index:1;
}
#leafImg{
	float:left;
	position: relative;
	width:90%;
	height:auto;
	margin-left:5%;
	margin-top:0px;
	background-color:transparent;
	overflow:hidden;
	text-align:left;
}
#leafImg img{
	width:100%;
	height:auto;
	margin-left:0px;
	margin-top:0px;
}
#info_field .common_name{
	float:left;
	position:relative;
	width:100%;
	font-size: 80px;
	font-family:'Manifesto', Helvetica, Arial, sans-serif;
	margin-top:50px;
	margin-left:0px;
}
#info_field .sci_name{
	float:left;
	position:relative;
	width:100%;
	font-size: 50px;
	font-family:Helvetica, Arial, sans-serif;	
	font-style:oblique;
	text-align:center;
	margin-top:-70px;
	margin-left:0px;
}
#info_field #main_desc{
	position:relative;
	width:100%;
	font-size: 50px;
	margin-top:0px;	
}
#info_field .bld_font{
	position:relative;
	width:100%;
	font-size: 50px;
	font-family:'Manifesto', Helvetica, Arial, sans-serif;
	font-style:oblique;
}
#info_field .cmn_font{
	position:relative;
	font-size: 50px;
	margin-top:-20px;
}
#location_map{
	float:left;
	position:relative;
	width: 780px;
	height: 585px;
	margin-top:20px;
	background-color:transparent;
}
#location_map img{
	width:100%;
	height:auto;	
}