/******************************************************************
------------------------------------------------------------------

Estilos para la linea de tiempo (#lineaDeTiempo) en Bodaclick.com

AUTOR
Txomin Bengoa - txomin@alvaroweb.com 
Acuarela Digital SL - http://www.acuareladigital.com
15 mayo 2010 

CONTENIDO DEL DOCUMENTO
conteniene todos los estilos que existen dentro dentro deel div id="lineaDeTiempo":
- Titulo "mi agenda bodaclick"
- Enlaces a "tareas pendientes" y "mi agenda"
- Linea de Tiempo interactiva
- Dias que faltan para la boda
- Tips rollover ocultos

NOMENCLATURA
- Todas las clases e ids de este documento empiezan por "linea" 
- Ids y clases tipo "upperCase"

------------------------------------------------------------------
/*****************************************************************/

/*
APAŅO PARA CORREGIR EL Z-INDEX DEL MENU PRINCIPAL
*/
#cabecera {
position: relative;
 z-index: 20000;
}
#tapizsombra {
 position: relative;
 z-index: 1;
}
/*
FIN APAŅO PARA CORREGIR EL Z-INDEX DEL MENU PRINCIPAL
*/


#lineaDeTiempo { 
 /* div - contiene todos los estilos de este documento */
 position: relative;
 width: 934px; 
 margin: 0; 
 padding: 0; 
 font-family: Tahoma, Geneva, sans-serif;
}
#lineaContenedorGeneral { 
 /* div - establece la division y los margenes de todos los estilos */
 width: 887px; 
 margin-left: 14px; 
 padding: 0; 
}
#lineaCabecero {  
 /* div - contiene el Titulo y los Enlaces */
 position: relative;
 margin: 0; 
 padding: 0 0 0 0; 
 min-height: 0px;
}
#lineaTitulo {  
/* h1 - contiene el Titulo "mi agenda bodaclick" */
 background: url(http://media.bodaclick.com/css/gfx/tapiz/linea-tiempo/linea-titulo-icono.png) no-repeat 2px 12px;
 margin: 0;
 padding: 4px 0 2px 55px;
 font-size: 42px;
 font-weight: normal;
 width: 490px;
 color: #575757;
}
#lineaEnlaces {  
 /* div - contiene enlaces a "tareas pendientes" y "mi agenda" */
 position: absolute;
 bottom: 0;
 right: 24px; 
 height: 17px;
}
#lineaEnlaces a {  
 /* a - estilo de enlaces a "tareas pendientes" y "mi agenda" */
 font-size: 11px;
 color: #FFFFFF;
 text-decoration: underline;
}
#lineaEnlaceTareas{
 /* div - estilo contenedor de enlace a "tareas pendientes" */
 background: url(http://media.bodaclick.com/css/gfx/tapiz/linea-tiempo/linea-tareas-icono.png) no-repeat left top;
 float: left;
 padding-left: 19px;
 padding-top: 3px;
 margin-right: 10px;
 height: 15px;
}
#lineaEnlacePresupuesto{ 
 /* div - estilo contenedor  de enlace a "mi presupuesto" */
 background: url(http://media.bodaclick.com/css/gfx/tapiz/linea-tiempo/linea-presupuesto-icono.png) no-repeat left top;
 float: left;
 color: white;
 padding-left: 18px;
 padding-top: 3px;
 margin-right: 10px;
 height: 15px;
}
#lineaEnlaceAgenda{ 
 /* div - estilo contenedor  de enlace a "mi agenda" */
 background: url(http://media.bodaclick.com/css/gfx/tapiz/linea-tiempo/linea-agenda-icono.png) no-repeat left top;
 float: left;
 padding-left: 19px;
 padding-top: 3px;
 height: 15px;
 margin-right: 10px;
}
#lineaContenedorTimeline { 
 /* div - contiene la linea de tiempo, las flechas y los dias que faltan */
 position: relative;
 height: 56px;
 margin-top: 0px;
}
#lineaBloqueTimeline { 
 /* div - contiene la linea de tiempo y los dias que faltan */
 position: relative;
 overflow: hidden;
 height: 52px;
 width: 851px;
 padding: 0px 0 0 0;
 margin: 0 25px;
}
#lineaTimeline { 
 /* div - contiene la linea de tiempo */
 background: url(http://media.bodaclick.com/css/gfx/tapiz/linea-tiempo/linea-tiempo-borde.png) repeat left top;
 height: 34px;
 width: 938px;
 padding: 0;
 margin-left: -0px;
}
.lineaPeriodo {
 /* div - clase comun a todos los periodos de tiempo */
 position: relative;
 float:left;
 margin-top: 1px;
 margin-left: 1px;
 height: 32px;
}
#tapiz .lineaPeriodo a {
 /* a - enlace dentro de un periodo de tiempo */
 position: relative;
 display: block;
 margin: 0;
 padding: 0;
 height: 32px; 
 color: #666666;
}
#tapiz .lineaPeriodo a:hover {
 /* a - estado hover */
 text-decoration: none;
}
.lineaPasado, .lineaPresente {
 /* div - clases periodo de tiempo pasado */
 background: url(http://media.bodaclick.com/css/gfx/tapiz/linea-tiempo/linea-pasado-fondo.jpg) repeat-x top left;
}
.lineaFuturo, .lineaPresente {
 /* div - clases periodo de tiempo futuro y presente */
 background: url(http://media.bodaclick.com/css/gfx/tapiz/linea-tiempo/linea-futuro-fondo.jpg) repeat-x top left;
}
.lineaActivo {
 /* div - clase periodo de tiempo presente activo */
 background-image: url(http://media.bodaclick.com/css/gfx/tapiz/linea-tiempo/linea-presente-activo-fondo.jpg);
}
#lineaUnAnio {
 /* div - periodo "antes de un anio" */
 width: 101px;
}
#lineaNueveOnceMeses {
 /* div - periodo "entre 9-11 meses" */
 width: 107px;
}
#lineaSeisOchoMeses {
 /* div - periodo "entre 6-8 meses" */
 width: 102px;
}
#lineaCuatroCincoMeses {
 /* div - periodo "entre 4-5 meses" */
 width: 101px;
}
#lineaDosTresMeses {
 /* div - periodo "entre 2-3 meses" */
 width: 106px;
}
#lineaCincoSeisSemanas {
 /* div - periodo "entre 5-6 semanas" */
 width: 110px;
}
#lineaTresCuatroSemanas {
 /* div - periodo "entre 3-4 semanas" */
 width: 110px;
}
#lineaUnaDosSemanas {
 /* div - periodo "entre 1-2 semanas" */
 width: 113px;
}
#lineaTuBoda {
 /* div - periodo "tu boda" */
 width: 79px;
}
.lineaProgreso {
 /* span - linea vertical que indica el dia de hoy dentro del periodo actual */
 background: url(http://media.bodaclick.com/css/gfx/tapiz/linea-tiempo/linea-progreso.gif) no-repeat right top;
 display: block;
 position: absolute;
 left: 0;
 top: 0;
 height: 32px;
 width: 35%;
}
.lineaActivo .lineaProgreso {
 /* span - linea vertical que indica el progreso del dia actual dentro del periodo actual (inactivo) */
 background-image: url(http://media.bodaclick.com/css/gfx/tapiz/linea-tiempo/linea-progreso-activo.gif);
}
.lineaFondoProgreso {
 /* span - marca el progreso del dia actual dentro del periodo (activo) */
 background: url(http://media.bodaclick.com/css/gfx/tapiz/linea-tiempo/linea-fondo-progreso.jpg) no-repeat right top;
 display: block;
 position: absolute;
 left: 0;
 top: 0;
 height: 32px;
 width: 85%;
}
.lineaActivo .lineaFondoProgreso {
 /* div - marca el progreso del dia actual dentro del periodo actual (inactivo) */
 background-image: url(http://media.bodaclick.com/css/gfx/tapiz/linea-tiempo/linea-fondo-progreso-activo.jpg);
}
.lineaCirculo {
 /* span - clase comun para los circulos de la linea de tiempo */
 position: absolute;
 display: block;
 width: 22px;
 height: 22px;
 top: 5px;
 left: 5px;
 font-size: 12px;
 color: white;
 font-weight: normal;
 text-align: center;
 line-height: 21px;
}
.lineaCirculoBlanco {
 /* span - circulo blanco */
 background: url(http://media.bodaclick.com/css/gfx/tapiz/linea-tiempo/linea-circulo-blanco.png) no-repeat left top;
 color: #ED038E;
}
.lineaCirculoVerde {
 /* span - circulo verde */
 background: url(http://media.bodaclick.com/css/gfx/tapiz/linea-tiempo/linea-circulo-verde.png) no-repeat left top;
}
.lineaCirculoRojo {
 /* span - circulo rojo */
 background: url(http://media.bodaclick.com/css/gfx/tapiz/linea-tiempo/linea-circulo-rojo.png) no-repeat left top;
}
.lineaPeriodoTexto {
 /* span - clase comun para el texto de los peridodos */
 position: absolute;
 display: block;
 top: 10px;
 left: 32px;
 font-size: 11px;
 color: #666666;
 font-weight: normal;
 text-align: center;
 line-height: 1em;
}
.lineaActivo .lineaPeriodoTexto {
 /* span - texto del peridodo actual (activo) */
 color: #FFFFFF;
}
#lineaFlechaIzq {
 /* div - contiene la flecha izquierda de la linea de tiempo */
 background: url(http://media.bodaclick.com/css/gfx/tapiz/linea-tiempo/linea-flecha-izq.png) no-repeat left top;
 position: absolute;
 height: 40px;
 width: 29px;
 top: 0;
 left: 0;
 cursor: pointer;
}
#lineaFlechaDcha {
 /* div - contiene la flecha derecha de la linea de tiempo */
 background: url(http://media.bodaclick.com/css/gfx/tapiz/linea-tiempo/linea-flecha-dcha.png) no-repeat left top;
 position: absolute;
 height: 40px;
 width: 29px;
 top: 0;
 right: 0;
 cursor: pointer;
 margin-left: -10px;
}
#lineaDiasQueFaltan { 
 /* div - contiene los dias que faltan */
 /* background: url(http://media.bodaclick.com/css/gfx/tapiz/linea-tiempo/linea-flecha-dias.png) no-repeat 0 6px; */
 width: 160px;
 padding: 2px 0 1px 15px;
 margin-left: 470px;
}
#lineaDiasQueFaltan a { 
 /* a - anlace a los dias que faltan */
 font-size: 11px;
 text-align: left;
 color: #FFFFFF;
 font-weight: normal;
 text-decoration: underline;
}
#lineaDiasQueFaltan.DiasFlechaDcha { 
 /* div - dias que faltan con la flecha en el lado derecho */
 background-position: right 6px;
 padding: 2px 15px 1px 0;
 text-align: right;
}

/* TIPS OCULTOS (rollovers) */
.lineaTipTareas {
 /* div - Contenedor Tip Tareas Pendientes */
 width: 334px;
 padding: 0;
 position: absolute;
 left: 0px;
 z-index:10000000;
 display:none;
 /*
 En HOME
 top: 34px;
 */
 top: 104px;
 /*
 En LISTA DE TAREAS
 top: 100px;
 */
}
.lineaTipTareasTop {
 /* div - Imagen superior en Tip Tareas Pendientes */
 background: url(http://media.bodaclick.com/css/gfx/tapiz/linea-tiempo/linea-tip-tareas-top.png) no-repeat left bottom;
 position: relative;
 width: 334px;
 height: 15px;
 margin: 0;
 padding: 0;
}
.lineaTipDcha .lineaTipTareasTop {
 /* div - Imagen superior con Flecha Derecha en Tip Tareas Pendientes */
 background-image: url(http://media.bodaclick.com/css/gfx/tapiz/linea-tiempo/linea-tip-tareas-top-dcha.png);
}
.lineaTipTareasFondo {
 /* div - Imagen de fondo y contenido en Tip Tareas Pendientes */
 position: relative;
 background:  url(http://media.bodaclick.com/css/gfx/tapiz/linea-tiempo/linea-tip-tareas-fondo.png) repeat-y left top;
 width: 272px;
 margin: 0;
 padding: 6px 31px;
 overflow: hidden;
 
}
.lineaTipTareasBottom {
 /* div - Imagen inferior en Tip Tareas Pendientes */
 position: relative;
 background: url(http://media.bodaclick.com/css/gfx/tapiz/linea-tiempo/linea-tip-tareas-bottom.png) no-repeat left top;
 width: 334px;
 height: 21px;
 margin: 0;
 padding: 0;
}
.lineaTipCabecero {
 /* div - Contenedor Titulo tip, Enlace a tareas y Cerrar tip */
 width: 275px;
 height: 30px;
}
.lineaTituloTip {
 /* span - Titulo tip */
 float: left;
 font-size: 18px; 
 font-weight: lighter;
 color: black;
}
.lineaTituloTip strong {
 /* strong - Titulo tip */
 color: #ABA9A9; 
 font-weight: normal;
}
.lineaEnlaceTareas { 
 /* span - Enlaces a tareas */
 color: #B6B6B6; 
 padding: 5px 7px; 
 float: left;
}
#tapiz .lineaEnlaceTareas a { color: #B6B6B6; text-decoration: none; }
#tapiz .lineaEnlaceTareas a:hover { text-decoration: underline; }
.lineaTipCerrar {
 /* div - Cerrar tip */
 float: right;
 width: 13px;
 height: 13px;
}
.lineaTipCerrar a {
 display: block;
 width: 13px;
 height: 13px;
 background: url(http://media.bodaclick.com/css/gfx/tapiz/linea-tiempo/linea-tip-cerrar.png) no-repeat left top;
}
.lineaTipCerrar span {
 display: block;
 width: 13px;
 height: 13px;
 background: url(http://media.bodaclick.com/css/gfx/tapiz/linea-tiempo/linea-tip-cerrar.png) no-repeat left top;
 cursor:pointer;
}

.lineaLista { 
 /* ul - Lista de tareas que contiene el tip */
 display: block; 
 margin: 0; 
 padding: 0; 
}
.lineaTipLista {
 /* li - Una tarea de la lista */ 
 display: block;
 background: red;
 height: 20px;
 padding: 4px 0 0 28px;
 margin: 0;
}
.lineaTipCirculoVerde {
 /* li - Circulo verde */ 
 background: url(http://media.bodaclick.com/css/gfx/tapiz/linea-tiempo/linea-circulo-verde.png) no-repeat left top;
}
.lineaTipCirculoRojo { 
 /* li - Circulo rojo */ 
 background: url(http://media.bodaclick.com/css/gfx/tapiz/linea-tiempo/linea-tip-circulo-rojo.png) no-repeat left top;
}
.lineaTipCirculoGris {
 /* li - Circulo gris */ 
background: url(http://media.bodaclick.com/css/gfx/tapiz/linea-tiempo/linea-circulo-gris.png) no-repeat left top;


}
.lineaTipCirculoBlanco {
 /* li - Circulo gris */ 
/* background: url(http://media.bodaclick.com/css/gfx/tapiz/linea-tiempo/linea-circulo-blanco.png) no-repeat left top;*/
 background: url(http://media.bodaclick.com/css/gfx/tapiz/lista-tareas/tarea-incompleta-sin-retraso.png) no-repeat left top;
}



#tapiz .lineaTipLista a {
 /* a - Enlace a una tarea de la lista */ 
 font-size: 11px;
 color: #BFBFBF;
 text-decoration: none;
}
#tapiz .lineaTipLista a:hover { text-decoration: underline; }
.lineaTipSeparador { 
 /* div - linea de puntos */
 height: 15px;
 background: url(http://media.bodaclick.com/css/gfx/tapiz/lista-tareas/separador-tarea.png) no-repeat 4px 8px; 
}
.lineaTipRecomendamos {
 /* div - contenedor titulo, imagen y texto */
 padding: 0 3px 0 3px;
 overflow: hidden;
}
.lineaRecomendamosCabecero {
 /* span - contenedor titulo recomendamos */
 display: block;
 padding-bottom: 5px;
 font-size: 12px;
 color: #666666;
 font-weight: normal;
}
.lineaRecomendamosCabecero strong {
 /* strong - titulo rosa */
 font-size: 14px;
 color: #EC008C;
 font-weight: normal;
}
.lineaTipRecomendamos img {
 /* img - imagen en tip */
 display: block;
 float: left;
 margin-right: 10px;
 margin-top: 2px;
 margin-bottom: 5px;
}
.lineaRecomendamosTitulo {
 /* span - contenedor titulo recomendacion */
 display: block;
 font-size: 11px;
 color: #666666;
 font-weight: bold;
}
.lineaTipRecomendamos p {
 /* span - contenedor titulo recomendacion */
 display: block;
 margin-top: 2px;
 font-size: 11px;
 line-height: 1.3em;
 color: #666666;
}
#tapiz .lineaTipRecomendamos p a { color: #B6B6B6; text-decoration: none; }
#tapiz .lineaTipRecomendamos p a:hover { text-decoration: underline; }
/* FIN TIPS OCULTOS (ROLLOVERS) */


/* ESTILOS PANTALLA NOLOGADO  */
#lineaContenedorNologado {
 position: absolute;
 left: -22px;
 top: -5px;
 height: 80px;
 width: 640px;
 background: url(http://media.bodaclick.com/css/gfx/tapiz/linea-tiempo/linea-nologado-fondo.jpg) no-repeat left top;
}
#lineaFormNologado{ 
 /* div - contiene a #lineaContenedorForm */
 height: 70px; 
 position: relative;
}
#lineaContenedorForm {
 /* div - contiene titulo y formulario */
 position: absolute;
/* z-index: 1;*/
 right: 0;
 top:0;
 width: 306px;
 height: 70px;
}
.lineaTituloNologado{
 /* span - titulo formulario Nologado */
 display: block;
 padding-top: 5px;
 font-size: 17px;
 line-height: 1em;
 color: #FFFFFF;
 font-weight: normal;
}
#lineaContenedorForm form {
 /* form  */
 position: relative;
 display: block;
 margin-top: 7px;
 height: 21px;
}
#lineaContenedorForm label {
 /* label  */
 font-size: 11px;
 color: #FFFFFF;
}
.lineaLabelDia {
 /* label - Dia  */
 position: absolute;
 left: 0;
 top: 4px;
}
.lineaLabelMes {
 /* label - Mes */
 position: absolute;
 left: 79px;
 top: 4px; 
}
.lineaLabelAnio {
 /* label - Anio */
 position: absolute;
 left: 197px;
 top: 4px; 
}
/* .lineaLabel {
 label - todos menos Dia 
 padding-left: 8px;
} */
.lineaDia {
 /* select - Dia  */
 width: 50px;
 border: 1px solid #666666;
 position: absolute;
 left: 18px;
 top: 0;
}
.lineaMes {
 /* select - Mes  */
 width: 85px;
 border: 1px solid #666666;
 position: absolute;
 left: 101px;
 top: 0;
}
.lineaAnio {
 /* select - Anio  */
 width: 55px;
 border: 1px solid #666666;
 position: absolute;
 left: 219px;
 top: 0;
}
.lineaSubmit{
 /* input submit - Ir  */
 display: block;
 position: absolute;
 right: 5px;
 top: -2px;
 width: 22px;
 height: 21px;
 background: url(http://media.bodaclick.com/css/gfx/tapiz/linea-tiempo/linea-nologado-submit.png) no-repeat top left;
 text-indent: -10000px;
 font-size: 0.0001em;
 border: none;
 cursor: pointer;
}
#lineaNologadoFondoGris {
 position: absolute;
 height: 80px;
 width: 340px;
 right: -18px;
 top: -5px;
 background: #616161;
}
/* FIN ESTILOS PANTALLA NOLOGADO  */