@font-face {
  font-family: 'Coming Soon';
  font-style: normal;
  font-weight: 400;
  src: local('Coming Soon'), local('ComingSoon'), url(fonts/ComingSoon.ttf) format('ttf');
}

@font-face {
  font-family: 'Crafty Girls';
  font-style: normal;
  font-weight: 400;
  src: local('Crafty Girls'), local('CraftyGirls'), url(fonts/CraftyGirls.ttf) format('ttf');
}



body {
	margin: 0;
	padding: 0;
	border: 0;			/* This removes the border around the viewport in old versions of IE */
	width: 100%;
	background: #fff;
	color: #555;
	font-family: Crafty Girls, Century Gothic, sans-serif;
	
	/* Anchura mínima del layout.
	   En jul-2012 conté (en Chrome/Win7 con tema Basic) 27px de ancho que ocupa la propia ventana,
	   barra de desplazamiento incluida.
	   Así que lo suyo es poner aquí la resolución de pantalla mínima requerida (800, 1024...), 
	   menos un margen (40, 60...).
	   En jul-2012 conté 980 píxeles de ancho mínimo en el layout de una búsqueda de Google y, si
	   Google decide esto, será que es bueno.
	   "The min-width property does not work in old versions of Internet Explorer." */
	min-width: 980px;
}
/*a {
	color: #559;
	text-decoration: none;
}
a:hover {
	color: #33f;
	text-decoration: none;
}*/
a.sinmarcas {
	color: #555;
	text-decoration: none;
	/* Para hacer links que no lo parezcan: cabecera, etc. */
}
a.sinmarcas:hover {
	color: #555;
	text-decoration: none;
	/* Para hacer links que no lo parezcan: cabecera, etc. */
}
h1, h2, h3 {
	margin: 1em 0 .7em 0;
	padding: 0;
	font-family: Crafty Girls, Century Gothic, sans-serif;
	font-weight: bold;
}
p {
	margin: .4em 0 .8em 0;
	padding: 0;
	text-align: justify;
}
ul li { /* Mío */
	margin: .4em 0 .8em 0;
	padding: 0;
	text-align: justify;
}



/* ----- ESTILOS PARA LAS BURBUJAS Y EL CUADRO INFO. ----- */

body {
	background-image:url(../img/fondo.jpg);
	background-repeat:repeat;
}

.zonaBurbujas {
	/* No necesita nada ya que todas las burbujas van en position: absolute; */
}

.burbujasCuadroMascara {
	visibility: hidden;
	position: fixed;
	width: 100%;
	height: 100%;
	background-color: #F0F;
	opacity: 0.3;
	filter: alpha(opacity=30); /* For IE8 and earlier */
	z-index: 10;
}

.burbujasCuadroInfo {
	visibility: hidden;
	position: absolute; /* Si un día lo quiero fijar en la pantalla, puedo probar a usar position: fixed; */
	top: 0px; bottom: 0px; left: 0px; right: 0px;
	margin: 3%;
	border: 1px solid black;
	overflow: auto;
	background-color: #FFF8F8;
	z-index: 20;
}

.notaCierreCuadroInfo {
	visibility: hidden;
	width: 20%;
	float: right;
	font-size: 70%;
	border-bottom: 1px solid black;
	border-left: 1px solid black;
	padding: 0.5em 2em;
	z-index: 20;
}

.contenidoCuadroInfo {
	visibility: hidden;
}

.burbuja {
	position: absolute;
	text-align: center;
}

/* Esto de container-outer-inner es para hacer una caja cuya altura sea siempre proporcional a la anchura. */
.container {
	width: 80%; /* O lo que sea. */
	min-width: 400px;
	margin: auto; /* Para centrar el contenedor. */
}
.container .outer {
	width: 100%;
	padding-top: 60%; /* Define la relación de aspecto. */
	position: relative;
}
.container .outer .inner {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
}
.inner {
	/*overflow: hidden;*/
	/*background-color: #0F0;*/
}



.destacadoTrasClick {
	background-color: yellow;
	font-weight: bold;
}



p.notastarifas {
 	width: 90%;
	margin-left: 5%;
	font-style: italic;
}

table { /* Mío */
 	width: 90%;
 	border-width: 0px;
	border-style: solid;
	border-color: #999;
	border-spacing: .7em;
	/*border-collapse: collapse; /* Esto es por si quiero evitar espacio entre celdas. */
	margin-left: 5%;
	margin-bottom: 1em;
	/*margin: auto; /* Para centrar la tabla */
}
table th, td { /* Mío */
	border-width: 0px 1px 1px 0px;
	border-style: solid;
	border-color: #bbb;
	vertical-align: middle;
	padding: .2em .5em .2em .5em;
}
table th.opcion, td.opcion { /* Mío */
	/* Anchura: la que sobre. */
	text-align: left;
}

#descuentos th.precio, td.precio { /* Mío */
	width: 13em;
	text-align: right;
}
#opciones th.precio, td.precio { /* Mío */
	width: 14em;
	text-align: right;
}
#tarifas th.precio, td.precio { /* Mío */
	width: 8em;
	text-align: right;
}

.precionormal {
    font-size: 140%;
    font-weight: bolder;
}

.precioantes {
    font-size: 120%;
    text-decoration: line-through;
    font-weight: bold;
}

.preciodespues {
	font-size: 140%;
	font-weight: bolder;
	color: #ff1493;
}

.preciodespues_tbaja {
	font-size: 100%;
	font-weight: bolder;
	color: #ff1493;
}

.titulotabla {
    color: #ff1493;
    text-transform: uppercase;
    font-weight: bold;
	text-decoration: underline;
}

.notaPequenna {
	font-size: 80%;
}

/* Header styles */
#header {
	clear: both;
	float: left;
	width: 100%;
	border-bottom: 1px solid #555;

	background-color: white;
	background-image: url(../img/alianzasplateadas.jpg);
	background-size: 40em;
	background-repeat: no-repeat;
	background-position: 100% 20%;
}
#header p,
#header h1,
#header h2,
#header h3 /* Mío */ {
	padding: .4em 15px 0 15px;
	margin: 0;
}
#header ul {
	clear: left;
	float: left;
	width: 100%;
	list-style: none;
	margin: 10px 0 0 0;
	padding: 0;
}
#header ul li {
	display: inline;
	list-style: none;
	margin: 0;
	padding: 0;
}
#header ul li a {
	display: block;
	float: left;
	margin: 0 0 0 1px auto;
	padding: 3px 10px;
	text-align: center;
	background: #eee;
	color: #000;
	text-decoration: none;
	position: relative;
	left: 15px;
	line-height: 1.3em;
}
#header ul li a:hover {
	background: #369;
	color: #fff;
}
#header ul li a.active,
#header ul li a.active:hover {
	color: #fff;
	background: #000;
	font-weight: bold;
}
#header ul li a span {
	display: block;
}

#logoCabecera {
	padding: 0.5em 2em 0em 2em;
}


#centeredmenu {
   float:left;
   width:100%;
   background:#ddd;
   border-bottom:1px solid #555;
   overflow:hidden;
   position:relative;
}
#centeredmenu ul {
   clear:left;
   float:left;
   list-style:none;
   margin:0;
   padding:0;
   position:relative;
   left:50%;
   text-align:center;
}
#centeredmenu ul li {
   display:block;
   float:left;
   list-style:none;
   margin:0;
   padding:0;
   position:relative;
   right:50%;
   min-width:5em;
   border-right:1px solid #555;
   font-size: 90%;
}
#centeredmenu ul li.primero {
   border-left:1px solid #555;
}
#centeredmenu ul li a {
   display:block;
   margin:0 0 0 0px;
   padding:3px 10px;
   background:#ddd;
   color:#000;
   text-decoration:none;
   line-height:1.5em;
   text-align: center;
}
#centeredmenu ul li a:hover {
   background:#888;
   color:#fff;
}
#centeredmenu ul li a.active,
#centeredmenu ul li a.active:hover {
   color:#fff;
   background:#000;
   font-weight:bold;
}
/* Esto debe estar después de lo de "active": */
#centeredmenu ul li a.especial,
#centeredmenu ul li a.especial:hover {
   background-color: #090;
}



* 'widths' sub menu */
#layoutdims {
	clear: both;
	background: #eee;
	border-top: 4px solid #a55;
	margin: 0;
	padding: 6px 15px !important;
	text-align: right;
}
/* column container */
.colmask {
	position: relative;	/* This fixes the IE7 overflow hidden bug */
	clear: both;
	float: left;
	width: 100%;			/* width of whole page */
	overflow: hidden;		/* This chops off any overhanging divs */
}
/* common column settings */
.colright,
.colmid,
.colleft {
	float: left;
	width: 100%;
	position: relative;
}
.col1,
.col2 {
	float: left;
	position: relative;
	padding: 0 0 1em 0;
	overflow: hidden;
}
/* 2 Column (left menu) settings */
.leftmenu {
	background-image: url(../img/fondo.jpg);
}
.leftmenu .colleft {
	right: 100%; /*TEMP 75%;			/* right column width */
	background: #fff;	/*#f4f4f4;	/* left column background colour */
}
.leftmenu .col1 {
	/*TEMP width: 71%;			/* right column content width */
	left: 100%; /*TEMP 102%;			/* 100% plus left column left padding */
	
	/* TEMP */
	margin-left: 2%;
	margin-right: 2%;
}
.leftmenu .col2 {
	width: 21%;			/* left column content width (column width minus left and right padding) */
	left: 6%;			/* (right column left and right padding) plus (left column left padding) */
}
/* Footer styles */
#footer {
	clear: both;
	float: left;
	width: 100%;
	border-top: 1px solid #555;
    font-style: italic;
}
#footer p {
	padding: 20px;
	margin: 0;
}




/*
Contact Form by html-form-guide.com
You can customize all the aspects of the form in this style sheet
All the style elements use form id selector(notice the #contacto). So, including this
stylesheet does not affect the other elements at all!
*/

#contacto fieldset {
	width: 40em;
	padding:1em;
	border:1px solid #555;
    -moz-border-radius: 15px;
    -webkit-border-radius: 15px;
    -khtml-border-radius: 15px;
	border-radius:15px;   
}

#contacto legend {
   font-size: 1em;
   color:#555;
}

#contacto label {
   font-size:0.8em;
}

#contacto input[type="text"],textarea {
	font-family: Century Gothic, sans-serif;
	font-size: 1em;
	line-height:140%;
	color : #555; 
	padding : 3px; 
	border : 1px solid #555;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	-khtml-border-radius: 5px;
	border-radius: 5px;
}

#contacto input[type="text"] {
  height:1.3em;
  width: 28em;
  
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
   border-radius: 5px;   
  
}

#contacto #scaptcha {
  width:60px;
  height:18px;
}

#contacto input[type="submit"] {
	font-family: Century Gothic, sans-serif;
	width: 8em;
	height: 2em;
	padding-left: 0px;
	
	color: #555;
	background-color: #fff;
	border:1px solid #555;
	
	-webkit-border-radius: 1em;
	-moz-border-radius: 1em;
	border-radius: 0.8em;
}

#contacto textarea {
  /*height: 10em;  Mejor lo dejo libre, en función de las líneas que tenga. */
  width: 39.5em;
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
   border-radius: 8px;  
}

#contacto input[type="text"]:focus,textarea:focus {
  color: #000;
  border: 1px solid #990000;
  background-color: #ffffaa;
}

#contacto .container {
   margin-top: 0.8em;
   margin-bottom: 0.6em;
}

#contacto .error {
   font-size: 0.7em;
   color: #900;
   background-color : #ffff00;
}

#contacto fieldset#antispam {
   padding: 2px;
   border-top: 1px solid #eee;
   border-left: 0;
   border-right: 0;
   border-bottom: 0;
   width: 20em;
}

#contacto fieldset#antispam legend {
   font-size: 0.8em;
   font-weight: bold;
   color: #333;   
}

#contacto .short_explanation {
   font-size: 0.7em;
   color: #555;   
}

/* spam_trap: This input is hidden. This is here to trick the spam bots. */
#contacto .spmhidip {
   display: none;
   width: 10px;
   height: 3px;
}
#fg_crdiv {
   font-size: 0.3em;
   opacity: .2;
   -moz-opacity: .2;
   filter: alpha(opacity=20);   
}
#fg_crdiv p {
    display: none;
}