/* Hoja de estilos general para Índice y fichas*/

@font-face {
    font-family: 'robotoregular';
    src: url('../fonts/roboto-regular-webfont.eot');
    src: url('../fonts/roboto-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/roboto-regular-webfont.woff') format('woff'),
         url('../fonts/roboto-regular-webfont.ttf') format('truetype'),
         url('../fonts/roboto-regular-webfont.svg#robotoregular') format('svg');
    font-weight: normal;
    font-style: normal;

}


@font-face {
    font-family: 'robotobold';
    src: url('../fonts/roboto-bold-webfont.eot');
    src: url('../fonts/roboto-bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/roboto-bold-webfont.woff') format('woff'),
         url('../fonts/roboto-bold-webfont.ttf') format('truetype'),
         url('../fonts/roboto-bold-webfont.svg#robotobold') format('svg');
    font-weight: normal;
    font-style: normal;

}


@font-face {
    font-family: 'robotoitalic';
    src: url('../fonts/roboto-italic-webfont.eot');
    src: url('../fonts/roboto-italic-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/roboto-italic-webfont.woff') format('woff'),
         url('../fonts/roboto-italic-webfont.ttf') format('truetype'),
         url('../fonts/roboto-italic-webfont.svg#robotoitalic') format('svg');
    font-weight: normal;
    font-style: normal;

}

/*------Estilos comunes entre indice y ficha------*/
body {
    color: white;
    font-family: robotoregular, helvetica;
	background-color: #404040; 
	background-image:url("../img/fondo.png");
	margin: 0px;
	padding: 0px;
	text-decoration: none;
	-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
}
body a {
	text-decoration: none;
}
body div {
	text-decoration: none;
}

hr {
	border: 1px solid rgba(255,255,255, 0.3);
}
h1 {
	margin: 0px;
}
:focus {
outline: 0;
border:none;
color: rgba(0, 0, 0, 0);
}
.nonDraggableImage{
    -webkit-user-drag: none;
}

/*-----Estilos para el índice-----*/

.containerindex {
    margin: 0 auto;
    /*background-color: #222222; */
    text-align: center;
}
.containerindexhid {
	display: none;
}

		/* Menú superior*/
.top_menu {
	padding: 10px 20px 0px 20px;
    text-align: left;
	box-shadow: 0px 10px 5px #111111;
	z-index: 10;
	background-color: #404040;
}
.topbutton {
    background: #404040;
    font-family: robotoregular, helvetica;
	font-size: 16px;
	color: white;
	border: 0px;
}
.backbutton {
	height: 30px;
	align: center;
	margin-right: 20px;
}
.backbutton img {
	height: 35px;
}
.imglupa{
	float: right;
	margin: 10px 10px 0px 0px;
}
.search {
	float: right;
	margin: 7px 10px 0px 0px;
	display: inline-block;
	height: 100%;
	vertical-align: middle;
}
.input_search {
	color: white;
	border: 0px;
	background-color: rgba(0,0,0,0); 
	background-image:url(../img/line.png);
	repeat: no-repeat;
}
.select_adsearch{
	color: rgb(169, 169, 169);
	border: 0px;
	background-color: rgba(0,0,0,0); 
	background-image:url(../img/line.png);
	repeat: no-repeat;
}
.input_search_top{
	color: white;
	border: 0px;
	background-color: rgba(0,0,0,0); 
	background-image:url(../img/line.png);
	repeat: no-repeat;
}
.advanced_search {
	border: 3px solid #878787;
	background-color: #222222;
	display: block;
	position: fixed;
	right: 0px;
	z-index: 10;
	background-image: url(../img/lupa_big.png);
	background-repeat: no-repeat;
	background-position: bottom right;
	-webkit-animation-name: searchanimation;/*nombre de la animación*/
	-webkit-animation-iteration-count:1;/*numero de veces que se repite la animación*/
	-webkit-animation-timing-function:linear;/*es el tipo de animación, también puedes poner todas las de las CSS que usamos en transiciones.html*/
	-webkit-animation-duration:0.25s;/*duración de la animacion*/
	-webkit-animation-direction:normal;/*dirección de la animación. alternate cambia la direccion*/
}

@-webkit-keyframes searchanimation{
	0%{right:-335px;}/*aquí se declara lo que va a pasar en cada momento de la animación*/
	50%{right:-160px;}
	100%{right:0px;}
}

.advanced_search_hid {
	right: -335px;
	border: 3px solid #878787;
	background-color: #222222;
	display: block;
	position: fixed;
	z-index: 10;
	background-image: url(../img/lupa_big.png);
	background-repeat: no-repeat;
	background-position: bottom right;
	}
.adsearch_hid {
	display: none;
}
	
.close_search{
	float: right; 
	background-color: rgba(0,0,0,0);
    font-family: robotoregular, helvetica;
	font-size: 12px;
	color: white;
	border: 0px;
}
.btn_adsearch{
	float: left; 
	width: 80%;
	background-color: rgba(0,0,0,0);
    font-family: robotoregular, helvetica;
	font-size: 12px;
	color: white;
	border: 0px;
	text-align: left;
}


/* Indice de contenidos*/
header{
height: 40px}
.scroll {
	width:680px;
	margin: 0px 20px;
	overflow-x: hidden;
	overflow-y: scroll;
}
::-webkit-scrollbar {
    width: 5px;
}
::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0); 
    border-radius: 10px;
}
::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(200,200,200,1); 
}

.item {
	width: 100%;
	float: none;
}
.index_cont {
}
/*.line {
	clear: both;
	float: none;
	margin: 100px 0px 0px 0px
}*/
.mini_img {
    width: 80px;
	height: 80px;
    border-radius: 20px;
    text-align: left;
	float: left;
}
.commonnamei {
    color: white;
	max-width: 120px;
}
.scientific_namei {
    color: #878787;
	max-width: 150px;
}
.names {
	float: left;
	text-align: left;
	padding:15px 20px;
}
.true {
	float: right;
	margin-top: 30px;
	margin-right: 20px;
	width: 30px;
	height: 30px;
	background-image:url("../img/ico_star.png");
	background-size: cover;
}
.false {
	float: right;
	margin-top: 30px;
	margin-right: 20px;
	width: 30px;
	height: 30px;
	background-image:url("../img/ico_star_off.png");
	background-size: cover;
}

/*-----Estilos para la ficha-----*/

.containercard {
    margin: 0 auto;
    text-align: center;
}
.containercardhid {
	display:none;
}
.backbutton {
    background: #404040;
    font-family: robotoregular, helvetica;
	color: white;
	border: 0px;
	float: left;
}
.backimg {
	height: 100%;
	float: left;
}
.backtext {
	margin-top: 5px;
	float: left;
}
.imgGallery_off {
	display: none;
}
.imgGallery_on {
	background-color: rgba(87,87,87,0.5);
	position: fixed;
	top: 0;
	padding: 1% 1%;
	width: 100%;
	height: 150%;
	z-index: 2;
	background-color: rgba(87,87,87,0.9);
}
.closebutton{
	color: white;
	border: 0px;
	right: 0;
	z-index: 3;
	position: absolute;
    font-family: robotoregular, helvetica;
	background-color: rgba(87,87,87,0);
}
.closeimg {
	height: 100%;
	float: left;
}
.helper {
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}

.imgGallery {
	max-width: 100%;
	max-height: 65%;
}
.img_name {
	clear: both;
}
.main_image {
   /* border-radius: 20px;*/
}

.common_name {
    color: white;
}

.scientific_name {

    color: #878787;
}
.map {
    border: 2px solid #fff;
    border-radius: 20px;
    text-align: left;
	float: left;
}
.shortdesc {
    text-align: left;
	float: left;
	color: #878787;
}

.shortdesc_item {
	margin: 10px 0px;
}
.shortdesc_title {
	color: white;
	float: left;
}
.main_text {
    border-radius: 20px;
    text-align: left;
	float: none;
	display: inline-block;
}
.main_text_body{
	color: #878787;
}

/*---Estilos para los favoritos------*/

.tile {
	width: 130px;
	float: left;
	background-color: black;
	margin: 5px;
	text-align: center;
}
.tileImg {
	width: 130px;
	/*height: 200px;*/
}
.btitulo {
	font-size: 14px;
	color: white;
	margin: 0px 0px 10px 0px;	
	padding: 0px 0px 0px 5px;
	text-decoration: none;
}
.star_favs{
top: 10px;
margin-left: 100px;
position: absolute;
}