@charset "UTF-8";

@media all{
	
	html{
		height: 100%;
	}
	
	body{
		font-family: 'Open Sans', Helvetica, sans-serif;
		font-size: 105%;
		height: 100%;
		margin: 0px;
		background-image: url(../../images/background/background-1140.png);
		background-position: center;
		background-repeat: repeat-y;
	}
	
	iframe{
		border: none;
	}

	
	/*	//////////////////////////////////////////////////
		BUILD
														*/
		div#bannerWrapper{
			position: absolute;
			top: 0px;
			left: 0px;
			width: 100%;
			height: 100%;
			min-height: 500px;
			z-index: 10;
		}
			div#bannerWrapper div#banner{
				width: 100%;
				max-width: 1638px;
				height: 100%;
				background-image: url(../../images/banner/homepage/acanthoscurria_geniculata_1.jpg);
	/*			background-image: url(../../images/banner/homepage/stromatopelma_calceatum_1.jpg);				*/
				background-position: center top;
				background-repeat: no-repeat;
				margin: 0px auto;
			}
		
		div#wrapper{
			position: relative;
			top: 0px;
			left: auto;
			width: 100%;
			max-width: 1140px;
			height: auto;
			margin: auto;
			z-index: 20;
		}
		
	/*	//////////////////////////////////////////////////
		SETTINGS
														*/
		header, section, nav{
			width: 100%;
			display: block;
			height: auto;
		}
		code{
			font-family: monospace;
			color: #009999;
		}
		
	/*	//////////////////////////////////////////////////
		HEADER
														*/
		header, nav, footer{
			color: #f9f8f7;
			background-image: url(../../images/background/42210b_3x3.png);
			background-repeat: repeat;
		}
		
		header{
			height: 40px;
		}
			header div#headerInnerContainer{
				height: 32px;
				padding: 8px 10px 0px 10px;
			}
				header div#headerInnerContainer img{
					margin: -4px 1.0em 0px 0px;
				}
		
				header div#headerInnerContainer div#google_translate_element{
				}
				
		header div#logo{
			width: 300px;
			height: 275px;
			background-image: url(../../images/logo/krix-tarantulas_text-only.png);
			background-repeat: no-repeat;
			margin: 13px auto 12px auto;
		}
		
	/*	//////////////////////////////////////////////////
		NAVIGATION
														*/
		nav{
			text-align: center;
			height: auto;
			min-height: 50px;
			margin-top: 300px;
		}
			nav div{
				font-size: 130%;
				width: auto;
				min-width: 38px;
				height: 14px;
				display: none;
			}
				nav div#handheld-menu-button{
					margin: 18px auto auto 20px;
				}
				nav div.handheld-menu-text{
					margin: 9px auto auto 10px;
				}
			
			nav ul{
				padding: 9px 35px 10px 0px;
				margin-bottom: 0px;
			}
				nav ul li{
					font-size: 130%;
					text-align: center;
					list-style-type: none;
					margin: auto 25px;
					display: inline;
				}
			nav a:link,
			nav a:active,
			nav a:visited{
				text-decoration: none;
			}
			nav a:hover{
				text-decoration: underline;
			}
		
	/*	//////////////////////////////////////////////////
		MAIN CONTENT
														*/
		div#main_content{
			min-height: 800px;
			background-image: url(../../images/background/background-1140.png);
			background-position: center;
			background-repeat: repeat-y;
		}
			div#main_content section{
				text-align: left;
				max-width: 90%;
				margin: 0px auto;
				padding-top: 20px;
			}
		
	/*	//////////////////////////////////////////////////
		FOOTER
														*/
		footer{
			font-size: 90%;
			color: #f9f8f7;
			min-height: 100px;
			height: auto;
			padding-top: 0.5em;
		}
		
		footer div.footerInnerContainer{
			width: 49.99999%;
			height: auto;
			float: left;
			padding: 1.0em 5.0em;
			box-sizing: border-box;
		}
		
		footer div#footerEndingSeparator{
			width: 90%;
			height: 2px;
			background-image: url(../../images/misc/brown-line-x.png);
			background-repeat: repeat-x;
			margin: 0px auto;
		}
		footer div#footerEnding{
			font-size: 70%;
			padding: 1em;
		}
		
	/*	//////////////////////////////////////////////////
		TEXT
														*/
		p{
			text-align: justify;
			margin: 1.0em auto;
		}
		
		a:link,
		a:active,
		a:visited{
			font-family: inherit;
			font-size: inherit;
			color: inherit;
			text-decoration: underline;
		}
		a:hover{
			text-decoration: none;
		}
		
		span{
			font-size: inherit;
		}
		
		h1, h2, h3, h4, h5, h6{
			font-family: inherit;
		}
		h1{	/*	Main headline for each page	*/
			font-size: 155%;
			margin: 1.5em auto;
		}
		h2{
			font-size: 125%;
			margin: 1.4em auto;
		}
		h3{
			font-size: 115%;
			margin: 1.3em auto 0.5em auto;
		}
		h4{
			font-size: 110%;
			margin: 1.3em auto 0.5em auto;
		}
		h5{
			font-size: 105%;
			margin: 1.3em auto 0.5em auto;
		}
		h6{
			font-size: 107%;
			margin: 1.3em auto 0.5em auto;
		}
		
	/*	//////////////////////////////////////////////////
		TABLE
														*/
		table{
			border-collapse: collapse;
			margin-bottom: 1.0em;
		}
		
		table td,
		table th{
			text-align: left;
			vertical-align: top;
			padding: 0.2em 0.7em 0.3em 0.3em;
		}
		
		table.list{
		}
			table.list thead th,
			table.list thead td{
				color: #42210b;
			}
			table.list tbody th,
			table.list tbody td{
				padding: 0.2em 0.7em 0.3em 0.3em;
			}
		
		div.tableStyleTh,
		div.tableStyleTd{
			float: left;
			padding: 0.2em 0.7em 0.3em 0.3em;
			box-sizing: border-box;
		}
		div.tableStyleTh{
			font-weight: bold;
			width: 29.99999%;
		}
		div.tableStyleTd{
			width: 69.99999%;
		}
		
	/*	//////////////////////////////////////////////////
		DIV AS TABLE
														*/
		div.list{
		}
			div.list div select{
				width: 100%;
			}
		
		div.listSmall,
		div.listMedium,
		div.listName{
			width: 100%;
		}
		div.listSmall{
			max-width: 60px;
		}
		div.listMedium{
			max-width: 100px;
		}
		div.listName{
			max-width: 200px;
		}
		div.listIcons{
			width: auto;
			padding-right: 1.3em;
		}
		
		div.individualsList{
			padding-bottom: 20px;
		}
	/*	//////////////////////////////////////////////////
		MEDIA
														*/
		div.responsiveImageHolder,
		div.responsiveImageHolderHeaderImage{
			padding: 0 6px;
			float: left;
			width: 24.99999%;
			box-sizing: border-box;
		}
		div.responsiveImageHolder{
			width: 24.99999%;
		}
		div.responsiveImageHolderHeaderImage{
			width: 49.99999%;
			padding: 6px 1.0em 1.0em 0px;
		}
			div.responsiveImageHolder figure,
			div.responsiveImageHolderHeaderImage figure{
				border: solid 0.1em #cccccc;
			}
			div.responsiveImageHolder figure:hover,
			div.responsiveImageHolderHeaderImage figure:hover{
				border: solid 0.1em #333333;
			}
				div.responsiveImageHolder figure img,
				div.responsiveImageHolderHeaderImage figure img{
					width: 100%;
					height: auto;
				}
				div.responsiveImageHolder figure figcaption,
				div.responsiveImageHolderHeaderImage figure figcaption{
					text-align: center;
				}
		
		div#imageViewerContainer{
			position: fixed;
			top: 50%;
			left: 50%;
			width: 50px;
			height: 20px;
			border: double 3px #333333;
			border-radius: 1.5em;
			background-color: #ffffff;
			/*box-shadow: 0px 0px 15px #888888;*/
			padding: 15px;
			margin: -15px auto auto -46px;
			z-index: 200;
		}
			div#imageViewerContainer figure{
				text-align: center;
				margin: 0.3em 0.5em;
			}
				div#imageViewerContainer figure figcaption{
					height: 14px;
					overflow: hidden;
				}
		
		figure{
			margin: 0px;
			margin-bottom: 0.5em;
		}
			figure figcaption{
				font-size: 70%;
				padding-bottom: 0.5em;
			}
		
	/*	//////////////////////////////////////////////////
		POPUP
														*/
		div#basicPopup{
			position: fixed;
			top: 50%;
			left: 50%;
			width: 500px;
			height: 500px;
			border: dashed 0.1em #333333;
			border-radius: 1.5em;
			background-color: #ffffff;
			box-shadow: 0px 0px 15px #888888;
			margin: -280px auto auto -250px;
			z-index: 200;
		}
		div#basicPopupFullscreen{
			position: fixed;
			top: 5%;
			left: 5%;
			width: 90%;
			height: 90%;
			border: dashed 0.1em #333333;
			border-radius: 1.5em;
			background-color: #ffffff;
			box-shadow: 0px 0px 15px #888888;
			z-index: 200;
		}
			div#basicPopupFullscreen,
			div#basicPopup{
				overflow: scroll;
			}
				div#basicPopup div#basicPopupInnerContainer{
					padding: 2.0em 3.0em;
				}
				div#basicPopupFullscreen  div#basicPopupInnerContainer,
				div#basicPopupFullscreen  div#basicPopupInnerContainer div#fullscreenMapContainer{
					width: 100%;
					height: 100%;
				}
					div#basicPopup div#basicPopupInnerContainer p,
					div#basicPopupFullscreen  div#basicPopupInnerContainer p{
						padding-left: 1.0em; 
					}
					
		div#popup_cover, div#popup_cover_invisible{
			position: fixed;
			top: 0px;
			left: 0px;
			width: 100%;
			height: 100%;
			z-index: 190;
		}
			div#popup_cover{
				background-color: #000000;
				opacity: 0.8;
				filter: Alpha(opacity=80);	/*	<= IE8 */
			}
			div#popup_cover_invisible{
			}
			
		.closeWindowButton{
			position: absolute;
			top: 10px;
			right: 10px;

			z-index: 300;
		}
		
	/*	//////////////////////////////////////////////////
		GOOGLE MAPS
														*/
		div#initial-map-holder_container{
			width: 100%;
			height: 220px;
		}
			div#initial-map-holder_container div#initial-map-holder_map{
				width: 100%;
				height: 85%;
				border: solid 0.2em #333333;
			}
			div#initial-map-holder_container div#initial-map-holder_text
			{
				font-size: 80%;
				padding: 0.2em 0.7em;
			}
			
	/*	//////////////////////////////////////////////////
		FORM
														*/
		input, textarea, select{
			font-family: 'Open Sans', Helvetica, sans-serif;
			font-size: 95%;
		}
		input, select{
			width: 20em;
			max-width: 90%;
			padding: 0.3em 0.5em;
		}
		
		select.small,
		input[type=text].small,
		input[type=number].small{
			width: 9.0em;
		}
		
		select.smaller,
		input[type=text].smaller,
		input[type=number].smaller{
			width: 5.0em;
		}
		
		input[type=submit],
		input[type=button],
		input[type=checkbox],
		input[type=radio]{
			width: auto;
		}
		
		textarea{
			width: 90%;
			height: 15em;
		}
		textarea.big{
			width: 800px;
			height: 30em;
		}
	/*	//////////////////////////////////////////////////
		OTHER DIV, ETC
														*/
		div#speciesQuickFactsContainer{
			margin-bottom: 2.5em;
		}
		
	/*	//////////////////////////////////////////////////
		INFO-BOXES
														*/
		.boxInfo,
		.boxError,
		.boxSuccess{
			position: relative;
			padding: 0.8em 0.8em 0.8em 45px;
			margin-bottom: 1em;
			clear: both;
		}
		.boxInfo{
			color: #205791;
			background-color: #d5edf8;
			border: solid 2px #92cae4;
		}
		.boxError{
			color: #912020;
			background-color: #f8d5d5;
			border: solid 2px #e49292;
		}
		.boxSuccess{
			color: #2d9120;
			background-color: #daf8d5;
			border: solid 2px #9ee492;
		}
			.boxInfo .symbol,
			.boxError .symbol,
			.boxSuccess .symbol{
				position: absolute;
				top: 8px;
				left: 5px;
			}
			
	/*	//////////////////////////////////////////////////
		SPRITE ICONS
														*/
		.icon,
		.icon-large{
			background-image: url(../../images/buttons-and-icons/sprite-icons.png);
			display: inline-block;
		}
		.icon{
			width: 12px;
			height: 12px;
		}
		.icon-large{
			width: 15px;
			height: 11px;
		}
		
		div.icon-pen{ background-position: 0 0; }
		
		div.icon-check{ background-position: -24px 0; }
		div.icon-check:hover{ background-position: -12px 0; }
		
		div.icon-cross{ background-position: -48px 0; }
		div.icon-cross:hover{ background-position: -36px 0; }
		
		div.icon-plus{ background-position: -72px 0; }
		div.icon-plus:hover{ background-position: -60px 0; }
		
		div.icon-minus{ background-position: -96px 0; }
		div.icon-minus:hover{ background-position: -84px 0; }
		
		div.icon-alert{ background-position: -120px 0; }
		div.icon-alert:hover{ background-position: -108px 0; }
		
		div.icon-image{ background-position: -132px 0; }
		
		div.icon-preview{ background-position: -144px 0; }
		
		div.icon-document{ background-position: -156px 0; }
		
		div.icon-sign{ background-position: -168px 0; }
		
		div.icon-trash{ background-position: -180px 0; }
		
		div.icon-male{ background-position: -192px 0; }
		
		div.icon-female{ background-position: -204px 0; }
		
			
		div.icon-email{ background-position: 0 -12px; }
			
	/*	//////////////////////////////////////////////////
		SPRITE INFO AND BUTTONS
														*/
	.sprite{
		background-image: url(../../images/buttons-and-icons/sprite-info-buttons.png);
	}
	div.sprite-symbol{
		display: inline-block;
	}
	
	.symbol-check-1{
		width: 18px;
		height: 17px;
		background-position: 0 0;
	}
	.symbol-check-1-false{
		width: 18px;
		height: 17px;
		background-position: -18px 0;
	}
	.symbol-check-1-alert{
		width: 18px;
		height: 17px;
		background-position: -36px 0;
	}
	.symbol-check-1-help{
		width: 18px;
		height: 17px;
		background-position: -54px 0;
	}
	.symbol-check-1-blank{
		width: 18px;
		height: 17px;
	}
	
	.symbol-info{
		width: 33px;
		height: 33px;
		background-position: -33px -21px;
	}
	.symbol-error{
		width: 33px;
		height: 33px;
		background-position: 0 -21px;
	}
	.symbol-success{
		width: 33px;
		height: 33px;
		background-position: -66px -21px;
	}
	
	.button-menu-handheld{
		width: 27px;
		height: 14px;
		background-position: -94px 0;
	}
	.button-close{
		width: 21px;
		height: 21px;
		background-position: -73px 0;
	}
	.button-next{
		width: 90px;
		height: 90px;
		background-position: -210px -53px;
	}
	.button-prev{
		width: 90px;
		height: 90px;
		background-position: -210px -143px;
	}
	
	.rss-feed{
		width: 28px;
		height: 28px;
		background-position: -180px -53px;
	}
	
	/*	//////////////////////////////////////////////////
		GLOBAL CLASSES
														*/
		.box{
			border: solid 0.2em #333333;
			padding: 1.0em;
			margin: 1.0em;
		}
		.cafter:after{
			display: block;
			visibility: hidden;
			content: " ";
			clear: both;
		}
		.cboth{
			clear: both;
		}
		.checkboxContainer{
			height: auto;
			max-height: 200px;
			overflow: scroll;
		}
		.cursor-help{
			cursor: help;
		}
		hr.divider{
			margin: 3.0em auto;
		}
		td.divider{
			height: 3.0em;
		}
		th.divider{
			width: 3.0em;
		}
		.fleft{
			float: left;
		}
		.frame{
			border: solid 0.2em #42210b;
			padding: 0.5em;
			margin: 0.5em;
		}
		.fright{
			float: right;
		}
		.head{
			margin-top: 1.0em;
		}
			li.head{
				font-weight: bold;
			}
		.marginLeftMed{
			margin-left: 3.5em;
		}
		.marginTopMed{
			margin-top: 3.5em;
		}
		.nobr{
			white-space: nowrap;
		}
		.point{
			cursor: pointer;
		}
		.red{
			color: #ff0033;
		}
		.responsiveColumnLeft{
			width: 59.99999%;
			float: left;
		}
		.responsiveColumnRight{
			width: 39.99999%;
			float: left;
		}
		.tcenter{
			text-align: center;
		}
		
		.w10p{width: 9.99999%;}
		.w20p{width: 19.99999%;}
		.w30p{width: 29.99999%;}
		.w40p{width: 39.99999%;}
		.w50p{width: 49.99999%;}
		.w60p{width: 59.99999%;}
		.w70p{width: 69.99999%;}
		.w80p{width: 79.99999%;}
		.w90p{width: 89.99999%;}
}	/*	@media all */

@media screen and (max-width: 1000px){
	
	/*	//////////////////////////////////////////////////
		MEDIA
														*/
		div.responsiveImageHolder{
			width: 49.99999%;
		}
		div.responsiveImageHolderHeaderImage{
			width: 99.99999%;
			padding: 0 6px;
		}
	/*	//////////////////////////////////////////////////
		GLOBAL CLASSES
														*/
		.responsiveColumnLeft,
		.responsiveColumnRight{
			width: 99.99999%;
		}
		.responsiveColumnLeft{
			padding-bottom: 1.5em;
		}
}

@media screen and (max-width: 500px){
	
		
	/*	//////////////////////////////////////////////////
		TABLE
														*/
		div.tableStyleTh,
		div.tableStyleTd{
			width: 99.99999%;
		}
		div.tableStyleTd{
			padding-bottom: 1.0em;
		}
	/*	//////////////////////////////////////////////////
		FOOTER
														*/
		footer div.footerInnerContainer{
			width: 99.99999%;
		}
	/*	//////////////////////////////////////////////////
		MEDIA
														*/
		div.responsiveImageHolder{
			width: 99.99999%;
		}
}

@media screen and (max-width: 650px){
	
	/*	//////////////////////////////////////////////////
		HEADER
														*/
		header div#headerInnerContainer div#google_translate_element{
			max-width: 22px;
			overflow: hidden;
		}
		
	/*	//////////////////////////////////////////////////
		NAVIGATION
														*/
		nav div{
			display: inline;
		}
		nav ul{
			display: none;
		}
			nav ul li{
				text-align: left;
				padding-left: 2.2em;
				display: list-item;
			}
			
	/*	//////////////////////////////////////////////////
		DIV AS TABLE
														*/
		div.listMedium{
			width: 50%;
			max-width: none;
		}
		div.listName{
			width: 70%;
			max-width: none;
		}
		div.listIcons div{
			margin-right: 15px;
		}
		
		div.individualsList{
			border-bottom: dashed 0.1em #333333;
			margin-bottom: 20px;
		}
}

@media screen and (max-device-width: 568px) and (orientation: portrait){
	
	/*	//////////////////////////////////////////////////
		FORM
														*/
		input, select{
			width: 10em;
			padding: 0.3em 0.5em;
		}
		
		input[type=text].smaller,
		input[type=number].smaller{
			width: 1.5em;
		}
}	/*	@media screen and (max-device-width: 568px) and (orientation: portrait){	*/

@media screen and (max-device-width: 568px) and (orientation: landscape){
}