Última actualización CSS.
/* Definiciones generales pagina principal------------------------------------- */
*{
font-family: arial;
font-weight: bold;
border:none;
margin: auto;
text-align: left;
}
body {
background-color: #336699; /*aero */
margin-top: 0px;
}
#contenedor{
position:relative;
width: 780px;
height: 704px;
padding: 10px;
background-color: #FFFFFF; /* blanco */
border: none;
}
/* Definición de la cabecera ------------------------------------- */
#cabecera{
position:absolute;
top: 0px;
left: 0px;
width: 800px;
height: 210px;
background-color: #000000; /* negro */
border-right: 2px solid black;
border-left: 2px solid black;
}
#contenedor #cabecera img{
position: absolute;
top: 0px;
left: 5px;
width: 178px;
height: 190px;
margin: 5px 0px 0px 5px;
border: none;
}
#contenedor #cabecera #titulo{
position: absolute;
top: 5px;
left: 200px;
width: 500px;
height: 80px;
padding: 60px 0px 0px 20px;
overflow: hidden;
background-color: #000000; /* negro */
font-size: 30px;
color: white;
/*color: transparent
text-shadow: 0 0 5px #FFF, 0 0 10px #FFF, 0 0 2px #FFF;
letter-spacing: 2px;*/
}
#contenedor #cabecera #titulo{
background-color:#000000; /* negro */
}
/* #contenedor #cabecera #titulo:hover{
color: transparent;
}
#contenedor #cabecera #titulo:span{
color: #AA0000;
font-size: 30px;
vertical-align: super;
}*/
#contenedor #cabecera #subtitulo{
position: absolute;
top: 150px;
left: 200px;
width: 500px;
height: 45px;
padding: 0px 0px 0px 20px;
overflow: hidden;
background-color: #000000; /* negro */
color: #FFCC00; /*mostaza */ /* #FF6633 naranja */
font-size: 20px;
}
/* Definición del cuerpo ------------------------------------- */
#contenedor #cuerpo{
position: absolute;
top: 200px;
left: 0px;
width: 800px;
height: 485px;
background-color: inherit;
border-right: 2px solid black;
border-left: 2px solid black;
margin:0px;
}
/* Definición del cuerpo: MENU ------------------------------------- */
#contenedor #cuerpo #menu{
position: absolute;
top: 0px;
left: 0px;
width: 800px;
height: 40px;
padding: 0px;
background-color: #F3F3F3; /* gris claro */
color: #666666; /* gris */
border-top: 2px solid #666666; /* gris */;
border-bottom: 2px solid #666666; /* gris */;
margin: 0px 0px 10px 0px;
}
#contenedor #cuerpo #menu ul{
list-style:none;
}
#contenedor #cuerpo #menu ul li{
padding: 10px 20px 0px 10px;
float: left;
background-color: inherit; /* blanco */
font-size: 12px;
}
#contenedor #cuerpo #menu ul li a{
color: #666666; /* gris */
text-decoration: none;
}
#contenedor #cuerpo #menu ul li a:hover{
color: #000000;/* negro */
}
/* Definición del cuerpo: CONTENIDO ------------------------------------- */
#contenedor #cuerpo #contenido{
position: absolute;
top: 45px;
left: 0px;
width: 800px;
height: 435px;
padding: 0px;
background-color: #FFFFFF; /* blanco */
margin: 0px 0px 10px 0px;
font-size: 12px;
color: #000000; /* negro */
border: none;
overflow: hidden; /* para que las imágenes queden contenidas dentro de la división en el carrito de compras división disfráz */
}
/* Definición del cuerpo: CONTENIDO --> LATERAL IZQUIERDO ------------------------------------- */
#lateralizq{
top: 10px;
left: 5px;
width: 215px;
height: 400px;
}
/* Definición del cuerpo: CONTENIDO --> CENTRO ------------------------------------- */
#centro{
top: 10px;
left: 265px;
width: 260px;
height: 400px;
}
/* Definición del cuerpo: CONTENIDO --> LATERAL DERECHO ------------------------------------- */
#lateralder{
top: 10px;
left: 525px;
width: 215px;
height: 400px;
}
/* Definición del cuerpo: CONTENIDO --> LATERAL IZQUIERDO, CENTRO Y DERECHO (PROPIEDADESCOMUNES)------------------------------------- */
#contenedor #cuerpo #contenido #lateralizq, #centro, #lateralder, #politica, #quienesomos, #contacto{
position: absolute;
padding: 0px 10px 10px 10px;
overflow: hidden;
background-color: #FFFFFF; /* blanco */
margin: 10px;
border: none;
}
/* Efecto: cambio de color en paneles */
.paneles{
text-decoration: none;
color: silver; /* gris claro */
font-weight: normal;
font-size: 10px;
}
a:hover.paneles {
color: #666666; /* gris oscuro */
cursor: default;
}
/* Fin Efecto */
p{
margin: 5px;
}
p > a{
color: #336699; /*aero*/
font-weight: bold;
font-size: 10px;
cursor: pointer;
}
p > img{
border: none;
margin: 0px 5px 0px 5px;
}
/* Definición links laterales*/
#contenedor #cuerpo #contenido ul > li{
list-style-type: square;
list-style-position: outside;
}
/* Fin definición links laterales*/
/* Definición del pie------------------------------------- */
#contenedor #pie{
position: absolute;
top: 685px;
left: 0px;
width: 800px;
height: 30px;
padding: 5px 0px 0px 0px;
background-color: #FFCC00; /*mostaza */
margin: 0px 0px 10px 0px;
font-size: 10px;
color: #000000; /* negro */
border: 2px solid black;
}
#contenedor > #pie > p{
text-align: center;
}
#contenedor #pie >p > a{
text-decoration: none;
color: #000000; /* negro */
}
#contenedor #pie > p > a:hover{
color: #FFFFFF; /* blanco */
}
/* Fin definiciones pagina principal------------------------------------- */
/* Definiciones generales: pagina politicas de privacidad / pagina quienes somos ------------------------------------ */
#contenedor #cuerpo #contenido > #politica , #quienesomos{
top: 10px;
left: 5px;
width: 750px;
height: 400px;
}
/* Definiciones generales: pagina quienes somos, texto alrededor de la imagen de equipo ------------------------------------ */
#contenedor #cuerpo #contenido > #quienesomos > #superior{
position: absolute;
top: 30px;
left: 5px;
width: 750px;
height: 50px;
}
#contenedor #cuerpo #contenido > #quienesomos > #lateralizq{
position: absolute;
top: 50px;
left: 5px;
width: 240px;
height: 152px; /* altura de la imagen 232 px */
padding: 0px;
margin: 10px 0px 0px 0px;
}
#contenedor #cuerpo #contenido > #quienesomos > #centro{
position: absolute;
top: 50px;
left: 240px;
width: 232px; /* anchura de la imagen 232 px */
height: 152px; /* altura de la imagen 152 px */
}
#contenedor #cuerpo #contenido > #quienesomos > #lateralder{
position: absolute;
top: 50px;
left: 480px;
width: 240px;
height: 152px; /* altura de la imagen 232 px */
}
#contenedor #cuerpo #contenido > #quienesomos > #inferior{
position: absolute;
top: 240px;
left: 5px;
width: 750px;
height: 90px;
border: none;
}
/* Definiciones generales: pagina album, visor de imágenes ----------------------------------- */
table#base{ /* tabla base que actúa de contenedor */
position:absolute;
left: 30px;
top:10px;
width: 700px;
height: 300px;
border: none;
margin: 5px;
padding: 5px;
background-color: black;
}
table#base td#imagen{ /* tabla base, columna imagen: contiene la imagen ampliada */
position:relative;
width: 300px;
height: 300px;
border: none;
padding: 0px;
margin: 0px;
}
table#base td#thumbnail{ /* tabla que contiene la tira de imágenes reducidas */
position:relative;
width: 400px;
height: 300px;
border: none;
padding: 0px;
}
table#base td#thumbnail table#tira{
width: 400px;
height: 300px;
border: none;
margin: 0px;
padding: 0px;
}
table#base td#thumbnail table#tira td.foto{
width: 90px;
height: 90px;
border-collapse:separte;
border-bottom: 2px solid white; /* Color del borde igual al color del background para evitar movimientos */
border-left: 2px solid white;
border-top: 2px solid white;
border-right: 2px solid white;
margin: 0px;
overflow: hidden;
padding: 0px;
}
table#base td#thumbnail table#tira td.foto:hover{
border-bottom: 2px solid silver;
border-left: 2px solid silver;
background-color: white;
}
/*------*/
.fotochiquita{
background: url(file:///C|/Escuela%202012/Plantillas/SE1/EnAdopcion1.JPG);
width: 90px;
height: 90px;
}
.fotogrande{ /*posición imagen ampliada */
visibility: hidden;
position: absolute;
top: 10px;
left: -300px;
margin-left: 5px;
overflow:hidden;
}
a:hover .fotogrande {
visibility: visible;
width: 270px;
height: 270px;
border: 2px solid white;
}
/* Definiciones generales: pagina contacto ------------------------------------ */
table#datoscontacto{
margin: 5px;
}
div > label , textarea{
width: 150px;
margin: 5px;
float:left;
color: black; /* negro */
font-weight: normal;
font-size: 11px;
}
div > input , textarea{
left: 170px;
margin: 5px;
color: black; /* negro */
font-weight: normal;
font-size: 11px;
border: 1px solid silver;
}
div > input{
width: 250px;
}
div > textarea{
width: 320px;
}
div#mensaje{
position: absolute;
top: 241px;
left: 430px;
padding: 0px;
margin: 0px;
}
div#informacion{
position: absolute;
top: 353px;
left: 312px;
padding: 0px;
margin: 0px;
}
div#informacion p#enviarinformacion{
position: absolute;
top: 0px;
left:140px;
width: 300px;
}
input:hover, textarea:hover{
background-color: #F3F3F3; /* gris claro */
border: 1px solid #FFCC00; /*mostaza */
}
#botones{
position:absolute;
left: 415px;
width: 375px;
height: 27px;
border: none;
}
#botones > input, #botonesenvio > input{
width: 105px;
height: 20px;
background-color: white;
font-size: 12px;
font-weight: bold;
color: #666666; /* gris */
border:none;
}
#botones > input:hover, #botonesenvio > input:hover, #vermas:hover{
color: black;
cursor: pointer;
}
/* Carrito -------------------------------------------------------- */
#contenedor #cuerpo #contenidocarrito{
position: absolute;
top: 45px;
left: 0px;
width: 800px;
height: 440px;
padding: 0px;
background-color:#000000; /* negro */
background-repeat: no-repeat;
overflow: hidden;
background-image: url(file:///C:/Escuela2012/Plantillas/SE1/tiendaI.jpg);
margin: 0px 0px 0px 0px;
font-size: 12px;
color: #000000; /* negro */
border: none;
}
#carritoinicio, #productos , #carrito, #pago, #carritocontacto{
border: none;
height: 440px;
padding: 0px;
margin: 0px;
float: left;
}
#carritoinicio{
width:116px;
}
#productos{
width: 225px;
}
#carrito{
/* Visita nuestro PetShop */
width: 200px;
}
#pago{
/* Despeja tus dudas: cómo pagar / proceso de envío */
width: 258px;
}
#carritoinicio:hover, #productos:hover , #carrito:hover, #pago:hover, #carritocontacto:hover, .ver:hover{
background-color: white; /* #666666; gris igual al menu superior */
/*filter:alpha(opacity=70); IE genérico
-moz-opacity: 0.7; Mozzilla Hacks: buscar en el blog publicación 2010 al respecto */
opacity: 0.7;
/* -khtml-opacity: 0.7; */
}
ul>li.subelementos{
visibility: hidden;
text-decoration: none;
list-style: none;
margin: 15px 0px 15px -30px;
color: #666666; /* gris */
}
#carritoinicio:hover li, #productos:hover li {
visibility: visible;
}
li.subelementos:hover {
color: #000000;/* negro */
margin: 15px 0px 15px -35px;
padding-left: 5px;
border-left: 2px solid black;
cursor: pointer;
}
/* Carrito: Venta de Productos / Disfraces */
#tira{
height: 144px;
width: 1270px;
}
.imagentira{
height: 142px;
width: 127px;
position: relative;
cursor: pointer;
filter:alpha(opacity=70);
-moz-opacity: 0.7;
opacity: 0.7;
-khtml-opacity: 0.7;
}
.imagentira:hover{
filter:alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 1.0;
-khtml-opacity: 1.0;
}
.bordeimagencarrito{
border: 1px solid #999999; /* gris */
cursor: pointer;
}
.bordeimagencarrito:hover{
border: 1px solid #000000; /* negro */
}
#cantidadelegida{
width: 20px;
}
#ordenpedido{
width: 550px;
border-top: 2px solid black;
/* border-bottom: 2px solid black; */
font: bold 14px arial;
padding:5px;
}
div#botonescarrito{
position: relative;
left: 150px;
height: 70px;
width: 250px;
}
div#botonescarrito > input{
background-color: white;
font-size: 12px;
font-weight: bold;
color: #666666; /* gris */
border:none;
}
div#botonescarrito > input:hover{
color: black;
cursor: pointer;
}
#articuloscomprados{
position: relative;
top: 480px;
left: 0px;
width: 800px;
height: 345px;
border-top: 2px solid #666666; /* gris */
/* border-bottom: 2px solid #666666; gris */
padding: 0px;
}
table tr th, table tr td{
text-align: center;
}
table tr th {
background-color: #F3F3F3; /* gris claro */
}
.menucompras{
width:52px;
height: 50px;
filter:alpha(opacity=70);
-moz-opacity: 0.7;
opacity: 0.7;
-khtml-opacity: 0.7;
}
.menucompras:hover{
filter:alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 1.0;
-khtml-opacity: 1.0;
}
#tablacarrito{
width:750px;
}
#datosenvio{
position: relative;
left: 20px;
padding: 0px;
}
#botonesenvio{
position:relative;
top: 170px;
left: 210px;
width: 330px;
height: 27px;
}
/* Album: division Ver mas*/
#vermas{
position: relative;
left: -5px;
width: 170px;
height: 20px;
background-color: white;
font-size: 12px;
font-weight: bold;
color: #666666; /* gris */
border: none;
}