﻿#ContenedorVisor /* ContenedorVisor envuelve a todo el visor, aportando un marco de 10 píxels de grosor, con esquinas redondeadas y sombra */
{
    display:inline-block; /* Ajustar el tamaño del contenedor al del contenido */
    background-color:; /* Color de fondo, el mismo que las flechas verdes */
    padding:0px; /* Relleno de 10 píxels por el interior de ContenedorVisor (y por el exterior de su contenido) */
}

#Visor
{
    margin:0px -5px; /* 0px vertical, -5px horizontal, para eliminar el espacio entre el visor y los botones */
    overflow:hidden; /* Si el contenido del visor es más grande que las dimensiones del mismo, que el resto no se muestre */
    display:inline-block; /* Con esto evitamos que los elementos se apilen verticalmente y que lo hagan horizontalmente si hay espacio */
}

#BotonAnterior, #BotonSiguiente
{
    display:inline-block; /* Con esto evitamos que los elementos se apilen verticalmente y que lo hagan horizontalmente si hay espacio */
    width:16px; /* Los botones ocupan 16 píxels de ancho y toda la altura del visor */
    background-color:;
    background-repeat:no-repeat; /* El DIV tendrá una imagen de fondo de una flecha, más pequeña que el propio DIV. No repetir la imagen en vertical u horizontal */
    background-position:center center; /* Centrar la imagen en el DIV */
    padding:0px 0px; /* Podemos hacer los botones más anchos jugando con el relleno horizontal */
    cursor:pointer; /* Mostrar el icono de la mano acusadora */
}

#BotonAnterior
{
    border-radius:5px 0px 0px 5px;
    background-image:url(I1.png);
    visibility:hidden;
}

#BotonSiguiente
{
    border-radius:0px 5px 5px 0px;
    background-image:url(D1.png);
}

#BotonAnterior:hover
{
    background-image:url(I2.png);
}

#BotonSiguiente:hover
{
    background-image:url(D2.png);
}

#Contenedor
{
    /* Espacio suficiente para 1000 imágenes de 1000 píxels de ancho */
    width:1000000px;
    text-align:left;
    margin-left:45px;
}
