/*
 *
 * Diseñado por Jhonatan Posada Loaiza
 * CSS principal de mi página
 * Versión 0.2
 *
*/





/* ---------------------------------------------------------------------
 * Estilo De La Página:
 * Aspecto general que tendrá mi página principal
 * ------------------------------------------------------------------ */



/* ---------------------------------------------------------------------
 * Estilos de las diferentes divisiones del contenido de la página
 * organizado desde la parte más general a la parte más particular,
 * de arriba a abajo.
 * ------------------------------------------------------------------ */

body {
    background-color : #080808;
    background-image : url('../imagenes/body.jpg');
    font-family : Tahoma, Verdana, Arial, sans-serif;
    font-size : 1em;
    font-style : normal;
    margin: 0 auto;
    text-align : justify;
}

/* Estructura principal de la página */
div#contenedor {
    max-height: 3000px;
    margin: 7% auto;
    min-height: 1500px;
    padding : .5%;
    width : 1100px;
}

/* Contenedor de la cabecera */
div#cont-cabecera {
    background-image : url('../imagenes/blank.gif');
    height : 150px;
    width : 100%;
}

/* Mi logo o algo por el estilo */
div#logo {
    background-image : url('../imagenes/logo.png');
    background-position : center center;
    background-repeat : no-repeat;
    float : right;
    height : 100%;
    width : 25%;
}

/* Banner por si deseo promocionar cualquier tipo de actividad */
div#banner {
    background-image : url('../imagenes/Los Sompsons.png');
    background-position : 20% center;
    background-repeat : no-repeat;
    float : left;
    height : 100%;
    width : 75%;
}


/* ---------------------------------------------------------------------
 * Barra/Menú horizontal
 * ------------------------------------------------------------------ */

/* Contenedor de la barra/menú */
div#menu {
    height: 1em;
    margin: 1% 0 2% 0;
    width : 100%;
}

ul#nav,ul#nav li {
    list-style-type : none;
    padding: 0%;
}

ul#nav {
    margin : 0 3% 0 3%;
    width:100%;
}

ul#nav li {
    float : left;
    margin : 0% .5% 0% .5%;
    text-align: center;
}

ul#nav a {
    background: #666666;
    text-decoration:none;
    color: #ffffff;
}

ul#nav a:hover {
    background: #FFA826;
    color: #FFF;
}

ul#nav li.activelink a,ul#nav li.activelink a:hover {
    background: #FFF;
    color: #003;
}


/* ---------------------------------------------------------------------
 * Bordes con estilo para del contenido
 * ------------------------------------------------------------------ */

.borde1, .borde2 {
    height : 40px;
    margin : 0;
}

.borde1, div#columna {
    float : left;
    width : 330px;
}

.borde2, div#contenido {
    float : right;
    width : 750px;
}

.borDerSup, .borIzqInf, .borDerInf, .borIzqSup {
    background-repeat : no-repeat;
    height : 40px;
    margin : 0;
    width : 40px;
}

.borDerSup {
    background-image : url('../imagenes/borDerSup.png');
    position : relative;
    float : right;
}

.borIzqSup {
    background-image : url('../imagenes/borIzqSup.png');
    position : relative;
    float : left;
}

.borCen {
    background-image : url('../imagenes/opacidad.png');
    background-position : 50% 50%;
    float : left;
    height : 100%;
}

.borde1 .borCen {
    width : 250px;
}

.borde2 .borCen {
    width : 670px;
}

.borDerInf {
    background-image : url('../imagenes/borDerInf.png');
    float : right;
}

.borIzqInf {
    background-image : url('../imagenes/borIzqInf.png');
    float : left;
}



/* ---------------------------------------------------------------------
 * Contenido principal de las páginas
 * ------------------------------------------------------------------ */

div#contenido, div#columna {
    max-height: 2000px;
    min-height: 1000px;
    height : 1000px;
}

/* Atributos del contenido de las páginas que son enlazadas */
div#contenido {
    background-image : url('../imagenes/opacidad.png');
    float: left;
    padding: 0 0 10% 0;
}


/* ---------------------------------------------------------------------
 * Columna lateral de la página
 * ------------------------------------------------------------------ */

/* Contenedor de la barra/columna/menú lateral*/
div#columna {
    background-image : url('../imagenes/opacidad.png');
    float: left;
}

/* Menú de navegación */
div#menuv {
    float: left;
    margin: 5% auto;
}

/* Recuadro especial para crear publicidad */
div#calendario, div#publicidad {
    float: left;
    height : 300px;
    margin: 1% auto;
    width : 300px;
}



/* ---------------------------------------------------------------------
 * Dock
 * ------------------------------------------------------------------ */

/* Contenedor del dock */
div#cont-dock {
    float : left;
    height : 100%;
    width : 100%;
}

.dock {
    position: relative;
    height: 50px;
    text-align: center;
}

.dock-container {
    position: absolute;
    height: 50px;
    background: url(images/dock-bg2.gif);
    padding-left: 20px;
}

a.dock-item {
    display: block;
    width: 40px;
    color: #000;
    position: absolute;
    top: 0px;
    text-align: center;
    text-decoration: none;
    font: bold 12px Arial, Helvetica, sans-serif;
}

.dock-item img {
    border: none;
    margin: 5px 10px 0px;
    width: 100%;
}


.dock-item span {
    display: none;
    padding-left: 20px;
}



/* ---------------------------------------------------------------------
 * Dock2 - Bottom
 * ------------------------------------------------------------------ */

#dock2 {
    bottom: 5px;
    position: relative;
    left: 0px;
}


.dock-container2 {
    position: absolute;
    height: 50px;
    background: url(images/dock-bg.gif);
    padding-left: 20px;
}

a.dock-item2 {
    display: block;
    font: bold 12px Arial, Helvetica, sans-serif;
    width: 40px;
    color: #000;
    bottom: 0px;
    position: absolute;
    text-align: center;
    text-decoration: none;
}

.dock-item2 span {
    display: none;
    padding-left: 20px;
}


.dock-item2 img {
    border: none;
    margin: 5px 10px 0px;
    width: 100%;
}



/* ---------------------------------------------------------------------
 * Pie de página
 * ------------------------------------------------------------------ */

div#pie {
    background-color : #121212;
    float : left;
    height : 15em;
    width : 100%;
    top: 5%;
}



/* ---------------------------------------------------------------------
 * Páginas
 * ------------------------------------------------------------------ */

div#centrado {
    text-align: center;
    right: 50%;
}



/* ---------------------------------------------------------------------
 * Títulos
 * ------------------------------------------------------------------ */

h1 {
    color : #FFF;
    font-size : 2.5em;
}

h2 {
    color: #EEE;
    font-size: 2.25em;
}

h3 {
    color: #DDD;
    font-size: 2em;
}

h4 {
    color: #CCC;
    font-size:1.75em;
}

h1, h2, h3, h4 {
    font-style : italic;
    font-weight : lighter;
    font-family : Purisa, Serif, Tahoma;
    margin : 0 0 0 0.2em;
    text-align: left;
    border-bottom: 1px dotted #ffffff;
}



/* ---------------------------------------------------------------------
 * Enlaces
 * ------------------------------------------------------------------ */

a:link, a:visited {
    color: #B9C322;
    text-decoration: none;
    font-weight: normal;
}


a {
    color: #EEC;
    text-decoration: none;
}

a:hover {
    color: #FFA;
    text-decoration: underline;
}

a:active, a:hover {
    color: #FFCC00;
    text-decoration: underline;
}



/* ---------------------------------------------------------------------
 * Parrafos y citas
 * ------------------------------------------------------------------ */

p {
    margin: 0px;
    padding: 0.2em 0 1.2em;
}

small,.small {
    font-size: 0.9em;
}

blockquote {
    background: #4A4A4A url('img/quote.gif') no-repeat left top;
    padding: 6px 14px 6px 44px;
    border: 1px solid #333;
    color: #BBB;
    display: block;
    margin-bottom: 12px;
}

code {
    font: normal 0.9em Verdana,sans-serif;
    line-height: 1.5em;
    padding: 8px 14px;
}

blockquote p {
    padding: 0.5em 0;
}

/* Texto regular para el contenido de la página */
div#texto {
    background-color : #000000;
    border : .1px solid #FFF;
    color : #FFF;
    font-family : Times New Roman, Liberation Serif, Furat, Tahoma, Sans-Serif;
    margin : 3%;
    padding : 5% 2% 15% 3%;
}



/* ---------------------------------------------------------------------
 * Selección de texto:
 * Cambiar el color del texto cuando es seleccionado.
 * Funciona para: Safari, Chrome, Konqueror, Opera, Firefox, Flock, etc.
 * ------------------------------------------------------------------ */

::selection {
    background : #DFEAF8;
    color : #000000;
}

::-moz-selection {
    background-color : #DFEAF8;
    color : #000000;
}



/* ---------------------------------------------------------------------
 * Tratamiento de las imagenes.
 * Elimina los bordes de las imágenes
 * ------------------------------------------------------------------ */

img {
    margin: 0px;
    padding: 0px;
    border: none;
}