/*---------------------------- REGLAS DE ESTILO UTILIZADAS EN LA DESCRIPCIÓN DE LOS PRODUCTOS --------------------------*/

/*---------------------------- Imagenes o textos emergentes en los links ----------------------------------*/

/* EJEMPLO DE UTILIZACIÓN EN UN ENLACE:
<a class="fotolink" href="http://www.lacasadelgps.com/-p-0000.html"><b>Texto del enlace o referencia</b>
<span><img src="http://www.lacasadelgps.com/tienda2.0/images/referencia_Low.png" alt="Texto descriptivo"></span></a> */




.fotolink {
color: #222 !important;
box-shadow: inset 0 -2px 20px #5abaf7 !important;
/*-webkit-transition: color 0.1s ease-out !important;
transition: color 0.1s ease-out !important;*/
transition:color 0.1s ease-out, background 0.3s ease-in !important;
text-decoration: none !important;
}
.fotolink {
	outline: none;
	position: relative;
	padding: 0px;
	
}
a{
padding: 0px;
}	
.fotolink:hover {background:yellow; }

/* Esto hace invisible todo lo que está dentro de la etiqueta <span> */
.fotolink span{
	width:100px;
	height:80px;
    visibility: hidden; /*oculta */
    background:#F8F8F8; /*Fondo */
    border: 3px solid #5096f2; /*Contorno */
    position: absolute;/* modo pos */
    top: 10px;/*altura */
	margin: 0px;
    border-radius: 5px 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; /*redondea el borde */
	box-shadow: 4px 4px 4px #7d7d7d; -webkit-box-shadow: 4px 4px 5px #7d7d7d; -moz-box-shadow: 4px 4px 4px #7d7d7d;/* sombreado */
    padding:5px; /*margenes */    
}
.fotolink img{
	width:100px !important;
	height:80px;

}

/*	Establece el pico del cuadro */
.fotolink span:after{  
    content:''; /* vaciado */
    position:absolute; /* modo pos */
    width: 0px;
	height: 0px;
	left:20px;
	top:-15px;
	border-style: solid;
	border-width: 0 10px 14px 10px;
	border-color: transparent transparent #5096f2 transparent;
}

/* Esto hace invisible todo lo que está dentro de la etiqueta <span> al poner el ratón sobre el link */
.fotolink:hover span{
	 
    visibility: visible;
	transition: visibility 0.5s ease-out, opacity 0;
    z-index: 999;
    top: 210%;
    left: 10%;
}

/*----------------------------Estilo basico web.--------------------------*/

body, table, p {
	font-family: Verdana, Arial, Helvetica, Calibri, Sans-Serif, Geneva;
	font-size: 11px;
	color: #000;
}
/* Importante que el font-weight se aplique al contenedor del producto y no a todas las etiquetas A  */
#cuerpo_producto a {
	font-weight: bold;
}

.titulo_rojo {
	color: #800000;
	font-style: normal;
	font-weight: bold;
}
.titulo_rojo_grande {
	font-size: 16px;
	font-weight: bold;
	color: #F00;
}

/* --- Reglas antiguas para las tablas --- */
.titulo_tabla {
	font-size: 11px;
	font-weight: bold;
	color: #FFF;
}
.concepto_tabla {
	font-size: 10px;
	font-weight: bold;
}

/* --- Reglas para las tablas --- */
.tabla_titulo {
	font-size: 11px;
	font-weight: bold;
	color: #FFF;
	background-color: #0099FF;
	text-align: center;
	padding: 0px;	
}
.tabla_concepto {
	font-size: 10px;
	font-weight: bold;
	background-color: #CCCCCC;
	color: #000;
	text-align: left;
	padding: 0px;	
}
.tabla_descripcion {
	font-size: 10px;
	color: #000;
	background-color: #F5F5F5;
	text-align: left;
	padding: 0px;	
}
.tabla_en_linea {
/*	Esta regla se aplica a la tabla y permite que varias tablas queden en linea.	*/
/*  box-shadow: 3px 3px 8px #777;*/
/*	border-radius: 0px 0px 8px 0px;*/
	display: inline-block;
	margin-bottom: 15px;
	margin-right: 10px;
	vertical-align: top;
	border: 1px solid #003789;
}

.tabla {
	display: table;
	width: 100%;
}

.tabla .linea {
	display: table-row;
}
.tabla .celda {
/*	Indicar en el html el valor de "width" (20%, 25%, 33% o 50%) para cada celda */
	display: table-cell;
    text-align: center; 
	padding-right: 10px;
	padding-left: 10px;
}

/* --- Reglas para flotar objetos --- */
.flotante_izquierda {
	float: left;
	margin-right:5px;
}
.flotante_derecha {
	float: right;
	margin-left:5px;
}
.laterales_limpios {
	clear: both;
	padding-top: 10px;
}

/*--- Marco con 2 columnas ---*/
.marco {
	display: table;
}
.marco .col_izda {
	display: table-cell;
	vertical-align: middle;
}
.marco .col_dcha {
	display: table-cell;
	vertical-align: middle;
	padding-left: 10px;
}

/*----------------- Cartel levemente resaltado (blanco)------*/
.recuadro_nota {
	background-position: 10px 50%; /* x-pos y-pos */
	text-align: left;
	padding: 5px 20px 5px 45px;
	border-top: 2px solid #F2EFEA;
	border-bottom: 2px solid #F2EFEA;
	color:#000000;
	background-color: #FAF9F7;
	background-image: url(images/nota.png);
	background-repeat: no-repeat;
	margin: 0px 0px 20px 0px;
} 
/*--------------------------- Cartel Azul --------------------------*/
.recuadro_info{

	background: #E7F9F8 url(images/info.gif) center no-repeat;
	background-position: 10px 50%; /* x-pos y-pos */
	text-align: left;
	border-top: 2px solid #B5D4FE;
	border-bottom: 2px solid #B5D4FE;
	color:#000000;
	padding-top: 5px;
	padding-right: 20px;
	padding-bottom: 5px;
	padding-left: 45px;
	margin: 0px 0px 20px 0px;
	
}
/* .recuadro_info a[href^="https:"]{
  padding:0px 0px 0px 0;
  margin:-2px 0;
  background-repeat: no-repeat;
  background-position: right center;  

}
 */
.recuadro_info a{
  padding:0px 0px 0px 0;
  margin:-2px 0;
  background-repeat: no-repeat;
  background-position: right center;  

}
	
/*----------------------- Ancho acortado a 410px ----------------------*/
.acortado {
	width:440px;
}
/*-------------------------- Cartel Amarillo --------------------------*/





.recuadro_descarga:before {
    content:"";
    position:absolute;
    top:0;
    right:0;
    border-width:0 16px 16px 0; /* This trick side-steps a webkit bug */
    border-style:solid;
    border-color:#fff #fff #58BDE8 #58BDE8; /* A bit more verbose to work with .rounded too */
    background:#58BDE8; /* For Opera when also applying a border-radius */
    display:block; width:0; /* Only for Firefox 3.0 damage limitation */
    /* Optional: shadow */
    -webkit-box-shadow:0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2);
       -moz-box-shadow:0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2);
            box-shadow:0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2);
}

/*-------------------------- Cartel Descarga --------------------------*/
.recuadro_descarga {
position:relative;  
	background: #d5edf8 url(images/download.png) right no-repeat;  
	background-position: 2% 50%; /* x-pos y-pos */  
	text-align: left;  
	padding: 5px 20px 5px 65px;  
	/*border-top: 2px solid #DFE786; */
	border-bottom: 4px solid #58BDE8; 
	color:#000000;  
	overflow:hidden;
	margin: 0px 0px 20px 0px;
}  
.recuadro_descarga a {
	color:#4B4B4B;
	text-decoration:none;
	border-bottom:0px dotted #444;
	font-weight: bold;
	
}
.recuadro_descarga a:hover{
	background:#2da5da;
    -webkit-transition-duration: 0.2s;
	-o-transition-duration: 0.2s;
	-moz-transition-duration: 0.2s;
	transition-duration: 0.2s;
	color:#FFF;
	

}


.recuadro_descarga a[href^="https:"]{
/*  padding:2px 15px 2px 0; */
  margin:-2px 0;
  background-repeat: no-repeat;
  background-position: right center;  

}
.recuadro_descarga a[href^="http:"], a[href^="https:"], a[href^="http:"]:visited, a[href^="https:"]:visited, a[href^="mailto:"], a[href$=".pdf"], a[href$=".doc"], a[href$=".xls"], a[href$=".rss"], a[href$=".rdf"], a[href^="aim:"] {
 /*  padding:2px 15px 2px 0; */
  margin:0px 0;
  background-repeat: no-repeat;
  background-position: right center;  
  }
  
  /* External links */
.recuadro_descarga a[href^="http:"]          { background-image: url(icons/external.png); background-repeat: no-repeat; }
.recuadro_descarga a[href^="https:"]         { background-image: url(icons/lock.png); padding: 2px 15px 2px 0 }
.recuadro_descarga a[href^="mailto:"]        { background-image: url(icons/email.png); }
.recuadro_descarga a[href^="https:"]:visited  { background-image: url(icons/visited.png); }

/* Files */
.recuadro_descarga a[href$=".pdf"]   { background-image: url(icons/pdf.png); }
.recuadro_descarga a[href$=".doc"]   { background-image: url(icons/doc.png); }
.recuadro_descarga a[href$=".xls"]   { background-image: url(icons/xls.png); }

/* Misc */
.recuadro_descarga a[href$=".rss"],
.recuadro_descarga a[href$=".rdf"]   { background-image: url(icons/feed.png); }
.recuadro_descarga a[href^="aim:"]   { background-image: url(icons/im.png); }

/*-------------------------- Cartel Rojo------------------------------*/
.recuadro_importante {  
  
	background: #FDD1C5 url(images/importante.png) center no-repeat ;  
	background-position: 10px 50%; /* x-pos y-pos */  
	text-align: left;  
	padding: 5px 20px 5px 50px;  
	border-top: 3px solid #ff0000;  
	border-bottom: 3px solid #ff0000;  
	color:#000000;  
	margin: 0px 0px 20px 0px;
}
.recuadro_importante span{  
   
	background-position: 10px 10px;
	font-size: 16px;
	font-weight: bold;
	text-shadow: 0 0px 10px rgba(0,0,0,0.2 );
	text-align: left;  
	color:#FF0000;  
} 
.recuadro_importante a{

	color:#000; 
	background: #fff000;
	width:20px;
}
.recuadro_importante a:hover{
}

/*--------------------------- Cartel YouTube------------------------------*/
.recuadro_YouTube {
	background-color: #E8E8E8;
	background-image: url(images/youtube_logo.png);
	background-position: 10px 50%;
	border-top-width: 2px;
	border-bottom-width: 2px;
	border-top-style: solid;
	border-bottom-style: solid;
	border-top-color: #E43737;
	border-bottom-color: #E43737;
	background-repeat: no-repeat;
	padding-top: 5px;
	padding-bottom: 5px;
	padding-left: 70px;
	padding-right: 10px;
	margin: 0px 0px 20px 0px;
}
/*NUEVOS CSS */
.info, .success, .warning, .error, .validation {
	border: 1px solid;
	margin: 10px 0px;
	padding:15px 10px 15px 50px;
	background-repeat: no-repeat;
	background-position: 10px center;
}
.info {
	color: #00529B;
	background-color: #BDE5F8;
	background-image: url('images/info.png');
}
.success {
	color: #4F8A10;
	background-color: #DFF2BF;
	background-image:url('images/success.png');
}
.warning {
	color: #9F6000;
	background-color: #FEEFB3;
	background-image: url('images/warning.png');
}
.error {
	color: #D8000C;
	background-color: #FFBABA;
	background-image: url('images/error.png');
}



/* ------ CONTENDO_CAJA ------ */
#contenido_caja {
	background-color: #FFFFFF;
	border: 2px solid #003789;
	width: 660px;
	margin: 0px;
	padding: 0px; 
	clear: both;
}
#contenido_caja img{
	width:660px;
}

#contenido_caja ul {
	text-align: left;
	padding-right: 5px;
	padding-top: 1px;
	padding-bottom: 0px;
	margin-left: 10px;
	list-style-type: none;
	padding-left: 0px;
}

#contenido_caja ul li {
	list-style-type: none;
	list-style-image: none;
	padding-right: 5px;
	padding-left: 22px;
	padding-top: 0px;
	padding-bottom: 0px;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
}

/* ----- NÚMEROS PARA CONTENIDO DE LA CAJA ----- */
#contenido_caja .cc_1 {
	background-image: url('https://www.lacasadelgps.com/css/images/1.png');
	background-repeat: no-repeat;
}
#contenido_caja .cc_2 {
	background-image: url('https://www.lacasadelgps.com/css/images/2.png');
	background-repeat: no-repeat;
}
#contenido_caja .cc_3 {
	background-image: url('https://www.lacasadelgps.com/css/images/3.png');
	background-repeat: no-repeat;
}
#contenido_caja .cc_4 {
	background-image: url('https://www.lacasadelgps.com/css/images/4.png');
	background-repeat: no-repeat;
}
#contenido_caja .cc_5 {
	background-image: url('https://www.lacasadelgps.com/css/images/5.png');
	background-repeat: no-repeat;
}
#contenido_caja .cc_6 {
	background-image: url('https://www.lacasadelgps.com/css/images/6.png');
	background-repeat: no-repeat;
}
#contenido_caja .cc_7 {
	background-image: url('https://www.lacasadelgps.com/css/images/7.png');
	background-repeat: no-repeat;
}
#contenido_caja .cc_8 {
	background-image: url('https://www.lacasadelgps.com/css/images/8.png');
	background-repeat: no-repeat;
}
#contenido_caja .cc_9 {
	background-image: url('https://www.lacasadelgps.com/css/images/9.png');
	background-repeat: no-repeat;
}
#contenido_caja .cc_10 {
	background-image: url('https://www.lacasadelgps.com/css/images/10.png');
	background-repeat: no-repeat;
}
#contenido_caja .cc_11 {
	background-image: url('https://www.lacasadelgps.com/css/images/11.png');
	background-repeat: no-repeat;
}
#contenido_caja .cc_12 {
	background-image: url('https://www.lacasadelgps.com/css/images/12.png');
	background-repeat: no-repeat;
}
#contenido_caja .cc_13 {
	background-image: url('https://www.lacasadelgps.com/css/images/13.png');
	background-repeat: no-repeat;
}