@charset "utf-8";
/* CSS Document */

/*Solapas */
ul.tabs{height:40px;width:100%;margin:0;padding:0;list-style:none}
.tabs li{float:left;height:40px;background:#00a0a0;border-radius:6px 6px 0 0;padding:3px;}
.tabs li.selected{background: #D9EDF7;border:solid #ceac45; border-width:0px 0px 0 1px; border-bottom:0px solid #fff; }
.tabs li a:link,.tabs li a:active,.tabs li a:visited,.tabs li a:hover{line-height:30px;font-size:1.0em;text-decoration:none;display:block;color:#000;padding:0 10px}
.tabs li.selected a:link,.tabs li.selected a:active,.tabs li.selected a:visited,.tabs li.selected a:hover{font-weight:bold}
div.pestana{width:100%;margin:0;padding:0;background:#D9EDF7;border:0px solid #ceac45;padding:20px;position:relative;top:-1px;z-index:1;border-radius:0 6px 6px 6px}
.pestana p{font-size:1em;line-height:100%;margin:0;}

/*Divs cuadrados*/
.wrapper{
  width: 100%;
  max-width: 100%;
  /*margin: 10px;*/
}
.square{
    font-size: 0.9em;
    color: white;
    margin: 2% 2% 0 2%;
    /*padding: 10px;*/
    float:left;
    /*width: 47%;*/
    /*margin-right:3%;*/
    background: #eeaa11;
    background-size: cover;
    background-position: center;
        border:1px solid #ceac45;
    border-radius: 3px;
    box-shadow: 0 .1em 1em black;
    -webkit-box-shadow: 0 .1em 1em black;
    -moz-box-shadow: 0 .1em 1em black;
    -o-box-shadow: 0 .1em 1em black;
}
.square:last-child{
    /*margin-left: 2%;*/
    /*margin-right:0;*/
}
.square:before{
    content:"";
    display:block;
    padding-top:100%;
  float: left; 
  /*Flotando el elemento podemos usar el cuadrado como cualquier otra capa y podremos meter contenido. Pero dejará de ser responsive cuando el contenido sea mayor que su alto*/
}


/* Icono play en miniaturas de videos */
.ImageLink {
    position: relative;
    display: block;
}
.OverlayIcon {
    position: absolute;
    width: 40%;
    top: 19px;
    left: 33px;
}.Item.ItemLeft, .Item.ItemMiddle, .Item.ItemRight {
    float:left;
    margin-right:15px;
}
.clear {
    clear:both;
}

/* Carrusel de Noticias y Articulos */
.newsdate {
background: #f0f0f0;
color: #737373;
padding: 10px;
width: 40px;
height: 40px;
float: left;
margin-right: 10px;
margin-bottom: 25px;
text-align:center;
}
/*  FIN de Carrusel de Noticias y Articulos */

/* Slider contenidos 
#slider { 
position: relative;
overflow: hidden;
width: 90%;
height: 500px; 
border:1px solid #ceac45;
border-radius: 5px;
margin: 0 auto;
padding: 0;
}
#slider img {
display: none;
//width:100%;
//min-height:300px;
//height: 100%;
max-height:500px;
max-width: 100%;
margin:0;
padding:0; 
border:0;
vertical-align: central;
}
#slider p {
position: absolute;
bottom: 10px;
left: 0;
display: block;
width: 100%;
height: 20px;
margin:0;
padding: 5px 0;
color: #eee;
background: #886611;
font-size: 12px;
line-height:12px;
text-align:center;
}
*/

/* MODALES
Primero tamaño, color y posicion de la modal
*/
#modal {
    background: rgba(250, 250, 250, 0.9); position: fixed; top: 10%; left: 5%;
    height: 88vh; width: 90vw; border-radius: 20px; transition: all .5s; z-index: 90; overflow: auto;
}
#modal p {
  width: 60%; height: 40%; position: absolute; top: 0; left: 0; bottom: 0; right: 0;
  margin: auto; font-size: 1.5em; vertical-align: middle; text-align: center;
}
/* Ahora los estilos del boton, texto o lo que sea que al pinchar abrirá la modal */
#mostrar-modal { display: none; }
/*
#mostrar-modal + label {
  background: steelblue; display: table; margin: auto; color: #fff;
  line-height: 3; padding: 0 1em; text-transform: uppercase; cursor: pointer;
}
#mostrar-modal + label:hover { background: #38678f; }
*/
#mostrar-modal:checked ~ #modal { top: 0; }
/* Ahora el boton para cerrar la modal. Le daremos un estilo circular, posición fija arriba a la derecha y un z-index superior al modal para que siempre aparezca por encima.
Como vemos, el botón está oculto por defecto, al hacer clic en el botón de abrir modal, el de cerrar se muestra (debe estar después en el html), y al estar en :checked vuelve a ocultarse.*/
#cerrar-modal { display: none; }
#cerrar-modal + label {
  position: fixed; top: 7%; right: 3%; z-index: 100; color: #fff;
  font-weight: bold; font-size: 2.5em; cursor: pointer; background: #333;
  width: 60px; height: 60px; line-height: 60px; text-align: center; border-radius: 50%; transition: all .5s;
}
#cerrar-modal:checked ~ #modal { top: -100vh; }
#mostrar-modal:checked ~ #cerrar-modal + label { display: block; }
#cerrar-modal:checked + label { display: none; }

/* ============= ModalA0 igual que la anterior ABIERTA en inicio ====== */
#modalA0 {
    background: rgba(12, 77, 80, 0.9); position: fixed; top: 10%; left: 5%;
    height: 88vh; width: 90vw; border-radius: 20px; transition: all .5s; z-index: 90; overflow: auto;
}
#modalA0 p {
  background: rgba(250, 250, 250, 0); position: relative; top: 0; left: 0; bottom: 0; right: 0;
  margin: auto; font-size: 1.5em; vertical-align: middle; text-align: center; padding: 20px; border-radius: 20px;
}
#mostrar-modalA0 { display: none; }
#mostrar-modalA0:checked ~ #modalA0 { top: 0; }
#cerrar-modalA0 { display: none; }
#cerrar-modalA0 + label {
  position: fixed; top: 11%; right: 6%; z-index: 100; color: #fff;
  font-weight: bold; font-size: 1.8em; cursor: pointer; background: #886611;
  width: 60px; height: 60px; line-height: 60px; text-align: center; border-radius: 50%; transition: all .5s;
}
#cerrar-modalA0:checked ~ #modalA0 { top: -100vh; }
#mostrar-modalA0:checked ~ #cerrar-modalA0 + label { display: block; }
#cerrar-modalA0:checked + label { display: none; }

/* ============= ModalA1 igual que la anterior ABIERTA en inicio ====== */
#modalA1 {
    background: rgba(230, 250, 250, 0.9);
    position: fixed; top: 7%; left: 20%; height: 90vh; width: 90vw;
    border-radius: 20px; transition: all .5s; z-index: 90; overflow: auto;
}
#modalA1 p {
  width: 60%; height: 40%; position: absolute; top: 0; left: 0; bottom: 0; right: 0;
  margin: auto; font-size: 1.5em; vertical-align: middle; text-align: center;
}
#mostrar-modalA1 { display: none; }
#mostrar-modalA1:checked ~ #modalA1 { top: 0; }
#cerrar-modalA1 { display: none; }
#cerrar-modalA1 + label {
  position: fixed; top: 7%; right: 5%; z-index: 100;
  color: #fff; font-weight: bold; font-size: 2.5em;
  cursor: pointer; background: #333; width: 60px; height: 60px; line-height: 60px;
  text-align: center; border-radius: 50%; transition: all .5s;
}
#cerrar-modalA1:checked ~ #modalA1 { top: -100vh; }
#mostrar-modalA1:checked ~ #cerrar-modalA1 + label { display: block; }
#cerrar-modalA1:checked + labelA1 { display: none; }

/* ============= Modal01 igual que la anterior pero CERRADA en inicio ====== */
#modal01 {
    background: rgba(230, 250, 250, 0.9);
    position: fixed; top: -220vh; left: 5vw; margin-top: 15vh;
    height: 70vh; width: 90vw;
    border-radius: 20px; transition: all .5s; z-index: 90; overflow: auto;
    vertical-align: middle; text-align: center; color: #ceac45;
}
#modal01 p {
  width: 60%; height: 40%; position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
  margin: auto; font-size: 1.5em;
  vertical-align: middle; text-align: center; color: #ceac45;
}
#mostrar-modal01 { display: none; }
#mostrar-modal01:checked ~ #modal01 { top: 0; }
#mostrar-modal01:checked ~ #cerrar-modal01 + label { display: block; }
#cerrar-modal01 { display: none; }
#cerrar-modal01 + label {
  position: fixed; top: 17%; right: 7%; z-index: 100;
  color: #fff; font-weight: bold; font-size: 1.5em; cursor: pointer;
  background: #886611; width: 60px; height: 60px; line-height: 60px;
  text-align: center; border-radius: 50%; transition: all .5s; display: none;
}
#cerrar-modal01:checked ~ #modal01 { top: -200vh; }
#cerrar-modal01:checked + label { display: none; }

/* ============= modal02 igual que la anterior pero CERRADA en inicio ====== */
#modal02 {
    background: rgba(230, 250, 250, 1);
    position: fixed; top: -320vh; left: 5vw; margin-top: 9vh;
    height: 85vh; width: 90vw;
    border-radius: 20px; transition: all .5s; z-index: 90; overflow: auto;
    vertical-align: middle; text-align: center; color: #ceac45;
}
#modal02 p {
  width: 60%; height: 40%; position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
  margin: auto; font-size: 1.5em;
  vertical-align: middle; text-align: center; color: #ceac45;
}
#mostrar-modal02 { display: none; }
#mostrar-modal02:checked ~ #modal02 { top: 0; }
#mostrar-modal02:checked ~ #cerrar-modal02 + label { display: block; }
#cerrar-modal02 { display: none; }
#cerrar-modal02 + label {
  position: fixed; top: 12%; right: 6%; z-index: 100;
  color: #fff; font-weight: bold; font-size: 1.5em; cursor: pointer;
  background: #886611; width: 60px; height: 60px; line-height: 60px;
  text-align: center; border-radius: 50%; transition: all .5s; display: none;
}
#cerrar-modal02:checked ~ #modal02 { top: -300vh; }
#cerrar-modal02:checked + label { display: none; }

/* ============= modalA2 igual que la anterior pero ABIERTA en inicio ====== */
#modalA2 {
    background: rgba(230, 250, 250, 1);
    position: fixed; top: 1%; left: 5%; margin-top: 9vh;
    height: 85vh; width: 90vw;
    border-radius: 20px; transition: all .5s; z-index: 90; overflow: auto;
    vertical-align: middle; text-align: center; color: #ceac45;
}
#modalA2 p {
  width: 60%; height: 40%; position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
  margin: auto; font-size: 1.5em;
  vertical-align: middle; text-align: center; color: #ceac45;
}
#mostrar-modalA2 { display: none; }
#mostrar-modalA2:checked ~ #modalA2 { top: 0; }
#cerrar-modalA2 { display: none; }
#cerrar-modalA2 + label {
  position: fixed; top: 12%; right: 6%; z-index: 100;
  color: #fff; font-weight: bold; font-size: 1.5em; cursor: pointer;
  background: #886611; width: 60px; height: 60px; line-height: 60px;
  text-align: center; border-radius: 50%; transition: all .5s;
}
#cerrar-modalA2:checked ~ #modalA2 { top: -300vh; }
#mostrar-modalA2:checked ~ #cerrar-modalA2 + label { display: block; }
#cerrar-modalA2:checked + label { display: none; }

/* ============= modalEdit igual que la anterior pero CERRADA en inicio ====== */
#modalEdit {
    background: rgba(230, 250, 250, 0.9);
    position: fixed; top: -120vh; left: 5vw; margin-top: 15vh;
    height: 70vh; width: 90vw;
    border-radius: 20px; transition: all .5s; z-index: 90; overflow: auto;
    vertical-align: middle; text-align: center; color: #ceac45;
}
#modalEdit p {
  width: 60%; height: 40%; position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
  margin: auto; font-size: 1.5em;
  vertical-align: middle; text-align: center; color: #ceac45;
}
#mostrar-modalEdit { display: none; }
#mostrar-modalEdit:checked ~ #modalEdit { top: 0; }
#mostrar-modalEdit:checked ~ #cerrar-modalEdit + label { display: block; }
#cerrar-modalEdit { display: none; }
#cerrar-modalEdit + label {
  position: fixed; top: 17%; right: 7%; z-index: 100;
  color: #fff; font-weight: bold; font-size: 1.5em; cursor: pointer;
  background: #886611; width: 60px; height: 60px; line-height: 60px;
  text-align: center; border-radius: 50%; transition: all .5s; display: none;
}
#cerrar-modalEdit:checked ~ #modalEdit { top: -100vh; }
#cerrar-modalEdit:checked + label { display: none; }

/* ============= modalChat igual que la anterior pero CERRADA en inicio ====== */
#modalChat {
    background: rgba(230, 250, 250, 1);
    position: fixed; top: -120vh; left: 30vw; margin-top: 35vh;
    height: 50vh; width: 45vw;
    border-radius: 20px; transition: all .5s; z-index: 90; overflow: auto;
    vertical-align: middle; text-align: center; color: #ceac45;
}
#modalChat p {
  
  margin-top: 3vh;
   font-size: 1.5em;
  text-align: center; color: #ceac45;
}
#mostrar-modalChat { display: none; }
#mostrar-modalChat:checked ~ #modalChat { top: 0; }
#mostrar-modalChat:checked ~ #cerrar-modalChat + label { display: block; }
#cerrar-modalChat { display: none; }
#cerrar-modalChat + label {
  position: fixed; top: 31%; right: 22%; z-index: 100;
  color: #fff; font-weight: bold; font-size: 1.5em; cursor: pointer;
  background: #886611; width: 60px; height: 60px; line-height: 60px;
  text-align: center; border-radius: 50%; transition: all .5s; display: none;
}
#cerrar-modalChat:checked ~ #modalChat { top: -100vh; }
#cerrar-modalChat:checked + label { display: none; }
#modalChat input{
    margin-top: 3vh;
    width: auto;
    font-size: 1.3em;

}
/*a:link {text-decoration:none;color:#fff;text-shadow: 1px 1px 5px #000;}
a:visited {text-decoration:none;color:#red;}
a:active {text-decoration:none;color:#yellow;}
a:hover {text-decoration:none;color:#blue;} */


hv
{
    margin: 20px 0;
    color:#fff;
    text-shadow: 1px 1px 5px #000;
    font-size: 32px;
    font-family: 'Century Gothic', Arial, 'Arial Unicode MS', Helvetica, Sans-Serif;
    font-weight: normal;
    font-style: normal;
    text-transform: uppercase;
}


h1
{
   color: #886611;
   margin: 20px 0;
   font-size: 26px;
   font-family: 'Century Gothic', Arial, 'Arial Unicode MS', Helvetica, Sans-Serif;
   font-weight: normal;
   font-style: normal;
   text-transform: uppercase;
}

h2
{
   color: #886611;
   margin-top: 19px;
   margin-bottom: 19px;
   font-size: 22px;
   font-family: 'Century Gothic', Arial, 'Arial Unicode MS', Helvetica, Sans-Serif;
}

h3
{
   color: #886611;
   margin: 10px 0 10px;
   font-size: 20px;
   font-family: 'Century Gothic', Arial, 'Arial Unicode MS', Helvetica, Sans-Serif;
   font-weight: normal;
   font-style: normal;
   text-transform: uppercase;
}

h4
{
   color: #886611;
   font-size: 18px;
   font-family: 'Century Gothic', Arial, 'Arial Unicode MS', Helvetica, Sans-Serif;
   font-weight: normal;
   font-style: normal;
   text-transform: uppercase;
}

h5
{
   color: #886611;
   font-size: 16px;
   font-family: 'Century Gothic', Arial, 'Arial Unicode MS', Helvetica, Sans-Serif;
   font-weight: normal;
   font-style: normal;
   text-transform: uppercase;
}

h6
{
   color: #886611;
   margin: -5px 0 -15px;
   font-size: 28px;
   font-family: 'Century Gothic', Arial, 'Arial Unicode MS', Helvetica, Sans-Serif;
   font-weight: bold;
   font-style: normal;
}

#titulo1
{
    padding: 5px;
    font-size: 1.1rem;
    color: #eee;
    background-color: #ceac45;
}

#titulo2
{
    padding: 5px;
    color: #fff;
    font-size: 1rem;
    background-color: #eeaa11;
}

aviso
{
    display: table;
    width: 100%;
    color: red;
    font-size: 1.2rem;
    /*font-weight: bold;
    margin: -5px 0 -15px;*/
    font-style: normal;
    text-align: center;
}

#ejemplar-celda {
    align: middle; 
    padding: 5px;
    /*border-radius: 5px;*/
    border:1px solid #ceac45;
}


/*  Dividir texto en dos columnas */
.art-blockheader .t, .art-vmenublockheader .t {white-space: nowrap;}

.art-estilo2columnas {
column-count: 2;
-moz-column-count: 2;
-webkit-column-count: 2;
}
/*  FIN Dividir texto en dos columnas */

table{
border-radius: 10px;
}

/*  Adaptar Videos al ancho actual */
.videoWrapper {
	position: relative;
	padding-bottom: 56.25%; /* 16:9 */
	padding-top: 25px;
	height: 0;
	/*z-index: -100;*/
}
.videoWrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	/*z-index: -100;*/
}
/*  FIN Adaptar Videos al ancho actual */

#submodulosb {
    width: 100%;
    border-radius: 5px;
}

#reseniab {
    width: 99%;
    /*border: 5px solid #fff;*/
    border-radius: 5px;
    background-color: #eeeeee;
    padding: 5px;
    margin: 5px;
    word-wrap: break-word;
}

#reseniad {
    width: 99%;
    border: 1px solid #000;
    border-radius: 5px;
    background-color: #fffc30;
    padding: 5px;
    margin: 5px;
    word-wrap: break-word;
}

#imgtnlst {
    width: 100%;
    border:1px solid #ceac45;
    border-radius: 3px;
    box-shadow: 0 .1em 1em black;
    -webkit-box-shadow: 0 .1em 1em black;
    -moz-box-shadow: 0 .1em 1em black;
    -o-box-shadow: 0 .1em 1em black;
}

#imgtnlstcenter {
    width: 100%;
    display: table-cell;
    border: 0px solid #000;
    /*vertical-align: middle;*/
    text-align:center;
    padding: 0px;
}

#botongestion {
    background:#cef0f2;
    border:1px solid #886611;
    border-radius:5px;
    -moz-border-radius:5px;
    width: 90%;
    max-width: 300px;
    font-size: 120%;
}

#botonsub {
    min-width: 15%;
    max-width: 45%;
    /*font-size: 100%;*/
    background:#cef0f2;
    border:1px solid #886611;
    border-radius:5px;
    -moz-border-radius:5px;
}

#botondestacado {
    font-size: 1rem;
    text-decoration-color: #ffffff;
    /*color: #ffffff;*/
    background: #f3dbdf;
    border:1px solid #e2001a;
    border-radius:5px;
    -moz-border-radius:5px;
}

.botonlink
{
   font-size: 11px !important;
   text-align: center;
   text-decoration: none !important;
   text-indent: 0;
   background: #d2e0ea;
   border:1px solid #628D8B;
   border-radius:5px;
   -moz-border-radius:5px;
   position:relative;
   display: inline-block;
   vertical-align: middle;
   white-space: nowrap;
   text-align: center;
}


.enlacebotonC { /*font-family: verdana, arial, sans-serif;*/
   font-size: 1.2rem;
   font-weight: bold;
   padding: 4px;
   background-color: #ffffcc;
   color: #666666;
   text-decoration: none;
}
.enlacebotonC:link,
.enlacebotonC:visited {
   border-top: 1px solid #cccccc;
   border-bottom: 2px solid #666666;
   border-left: 1px solid #cccccc;
   border-right: 2px solid #666666;
}
.enlacebotonC:hover {
    border-bottom: 1px solid #cccccc;
   border-top: 2px solid #666666;
   border-right: 1px solid #cccccc;
   border-left: 2px solid #666666;
}

.enlaceboton { /*font-family: verdana, arial, sans-serif;*/
   font-size: 1.2rem;
   padding: 8px;
   /*font-weight: bold;
   background-color: #ffffcc;*/
   color: #eeaa11;
   text-decoration: none;
   text-shadow: 0px 0px 0px #fff !important;
}
.enlaceboton:link,
.enlaceboton:visited {
   color: #886611;
}
.enlaceboton:hover {
   color: #FFF;
   background-color: #886611;
   padding: 3px;
}



/*
select {
    vertical-align: middle;
    width: 100%;
   //font-size: 100%;
    background:#cef0f2;
    border:1px solid #886611;
    border-radius:5px;
    -moz-border-radius:5px;
}

input, textarea
{
   vertical-align: middle;
   width: 100%;
   box-sizing: border-box;
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
}
*/

/* DIVs normales */
#imgtn {
    display: table-cell;
    width:115px;
    max-height:90px;
    height: auto !important;
    height: 85px;
    text-align:center;
}

#divgnral {
    display: table;
    width: 100%;
    text-align: center;
    margin: 0 auto;
}
#divfila {
    display: table-row;
}
#divmodulo {
    display: table-cell;
    border: 0px solid #000;
    vertical-align: middle;
    text-align:center;
    padding: 10px;
    /*border-radius:10px;*/
    box-shadow:inset 0px 1px 5px #ddd;
    -webkit-box-shadow:inset 0px 1px 5px #ddd;
    -moz-box-shadow:inset 0px 1px 5px #ddd;
    background: #FFF;
    border-collapse: separate;
}
#divnovedad {
    width: 100%;
    max-height: 600px; 
    overflow: auto;
    border: 0px solid #000;
    /*display: table-cell;
    vertical-align: middle;
    border-radius:10px;
    border-collapse: separate;
    text-align:center;*/
    padding: 10px;
    box-shadow:inset 0px 1px 5px #ddd;
    -webkit-box-shadow:inset 0px 1px 5px #ddd;
    -moz-box-shadow:inset 0px 1px 5px #ddd;
    background: #FFF;
        
}
#divcol0 {
    display: table-cell;
    border: 0px solid #000;
    vertical-align: middle;
    text-align:center;
    padding: 0px;
}
#divcol1 {
    display: table-cell;
    border: 0px solid #000;
    text-align:center;
    vertical-align: middle;
    padding: 5px;
    font-size: 0.9rem;
}
#divcol2 {
    display: table-cell;
    border: 1px solid #CCC;
    text-align:center;
}
#divcol3 {
    /*width: 70%;*/
    background-color: #eeeeee;
    padding: 5px;
    margin: 5px;
    /*word-wrap: break-word;*/
    display: table-cell;
    border: 5px solid #fff;
    border-radius: 5px;
    vertical-align: middle;
    text-align:left;
}
#divcampoform {
    display: table-cell;
    /*border: 1px solid #CCC;
    padding: 0px;*/
    vertical-align: top;
    text-align:left;
    padding-bottom: 10px;
    border-radius:5px;
    width:100%;
}

#divfichaimagen {
    /*display: table-cell;
    vertical-align: middle;*/
    border: 5px solid #886611;
    border-radius: 5px;
    font-size: 80%;
    text-align:left;
    padding: 20px;
    width:100%;
    background: #FFF;
}

#paracodigo {
    border: #333 1px solid; 
    background-color: #FF9;
    /*border: 2px black solid;
    background-color: silver;*/
    width: 100%; /*EL ANCHO DEBE ESTAR DECLARADO*/
    float: left;
    margin: 0;

    white-space: pre; /* CSS 2.0 */
    white-space: pre-wrap; /* CSS 2.1 */
    white-space: pre-line; /* CSS 3.0 */
    white-space: -pre-wrap; /* Opera 4-6 */
    white-space: -o-pre-wrap; /* Opera 7 */
    white-space: -moz-pre-wrap; /* Mozilla */
    white-space: -hp-pre-wrap; /* HP */
    word-wrap: break-word; /* IE 5+ */

}


#articulo-portada {
	display: table-cell;
    border: 0px solid #000;
    padding-top: 0px;
	padding-right: 5px;
	padding-bottom: 0px;
	padding-left: 10px;
    text-align:left;
	vertical-align: middle;
}
/*  FIN de DIVs normales */

/*Actualizar sin recargar pagina*/
#resultform {
	display: table-cell;
	width:97%;
	padding:5px;
	margin:auto;
	margin-top:5px;
	text-align:center;
}
#resultform1 {
	display: table-cell;
	width:97%;
	padding:5px;
	margin:auto;
	margin-top:5px;
	text-align:center;
}
#resultform2 {
	display: table-cell;
	width:30%;
	padding:5px;
	margin:auto;
	margin-top:5px;
	text-align:center;
}
#resultform3 {
	display: table-cell;
	width:30%;
	padding:5px;
	margin:auto;
	margin-top:5px;
	text-align:center;
}
#resultform4 {
	display: table-cell;
	width:97%;
	padding:5px;
        /*padding-top:60px;*/
	margin:auto;
	margin-top:5px;
	text-align:center;
}


#error {
	display:block;
	margin:5px;
	color:#4d4948;
	background-color:#fffebe;
	border: 1px solid #cbcbcb;
	color:#ff0000;
	font-size:90%;
	font:bold;
}

#success {
	margin:5px;
	color:#4d4948;
	background-color:#bce9b5;
	border: 1px solid #7ace6c;
	color:#0C0;
	font-size:90%;
}


/* **************************************************
******************************************************
********** CAJA MODAL con CSS ************************
******************************************************
******************************************************
 La clase modalmask sera la encargada de aplicar el fondo oscuro, característico de las ventanas modales, mediante la superposición de un div que se extienda sobre el contenido. En el interior de este div incluiremos la ventana, a la que se le aplican otras 2 clases, una para darle estilo y otra para animarla. Dentro incluiremos otro enlace para crear el botón de cerrar y el contenido que mostrara la ventana.

Lo realmente importante aquí es el CSS. Lo muestro por partes:
*/

.modalmask {
    position: fixed;
    font-family: Arial, sans-serif;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(0,0,0,0.8);
    z-index: 99999;
    opacity:0;
    -webkit-transition: opacity 400ms ease-in;
    -moz-transition: opacity 400ms ease-in;
    transition: opacity 400ms ease-in;
    -pointer-events: none;
}
.modalmask:target {
    opacity:1;
    -pointer-events: auto;
}

/* **************************************
 En primer lugar el efecto modal, creado mediante  la superposición de un div semitransparente sobre todo el contenido, usando para ello  la propiedad z-index. Para ocultarlo establezco la opacidad a 0 y desactivo los eventos del puntero (pointer-events: none) para evitar que interfiera con la pagina estando oculto.

Para iniciar la animación y mostrar las diferentes ventanas modales hago uso del selector target de CSS3. Lo que hace este selector es modificar los estilos del div al que hace referencia un enlace. En este caso restablece la opacidad y reactiva los eventos del puntero para activar el efecto.

Una vez que tenemos la capa modal hay que dar forma a la ventana: */

.modalbox{
    width: 400px;
    position: relative;
    padding: 5px 20px 13px 20px;
    background: #fff;
    border-radius:3px;
    -webkit-transition: all 500ms ease-in;
    -moz-transition: all 500ms ease-in;
    transition: all 500ms ease-in;
     
}

/* ******************************
 Y animar su aparición, aprovechando que el selector target también se puede usar con los elementos hijos: */

.movedown {
    margin: 0 auto;
}
.rotate {
    margin: 10% auto;
    -webkit-transform: scale(-5,-5);
    transform: scale(-5,-5);
}
.resize {
    margin: 10% auto;
    width:0;
    height:0;
 
}
.modalmask:target .movedown{       
    margin:1% auto;
}
.modalmask:target .rotate{     
    transform: rotate(360deg) scale(1,1);
        -webkit-transform: rotate(360deg) scale(1,1);
}
 
.modalmask:target .resize{
    width:400px;
    height:200px;
}

/*  Como se puede ver sobre estas lineas, establezco en cada animación el estado inicial en la clase correspondiente, y el estado final al hacer target, es decir, los estilos que se aplicaran al pulsar el enlace de cada ventana modal.

Ya solo quedaría el CSS correspondiente al botón o enlace encargado de cerrar las ventanas: */

.close {
    background: #606061;
    color: #FFFFFF;
    line-height: 25px;
    position: absolute;
    right: 1px;
    text-align: center;
    top: 1px;
    width: 24px;
    text-decoration: none;
    font-weight: bold;
    border-radius:3px;
}
 
.close:hover {
    background: #FAAC58;
    color:#222;
}

/* No tiene nada especial porque para hacer desaparecer las ventanas modales y sus estilos, bastara con cambiar el target a otro enlace, en este caso #close, que no aporta ningun CSS. Para llamarla <ul><li><a href="#modal1">DESLIZAR</a></li></ul>
********************************************************
******************************************************** */


/*
Plugin Name: WP-Digg Style Paginator
Plugin URI: http://www.mis-algoritmos.com/2007/09/09/wp-digg-style-pagination-plugin-v-10/
Author: Victor De la Rocha
Author URI: http://www.mis-algoritmos.com
*/
.pagination {
	padding: 6px;
	margin: 0px;
	text-align:center;
        background-color: #886611;
        color: white;
        line-height: 180% ;
}

.pagination a {
	padding: 2px 5px 2px 5px;
	margin: 2px;
	border: 1px solid #EEE;
	text-decoration: none; /* no underline */
	color: #FFF;
}

.pagination a:hover,
.pagination a:active {
	border: 1px solid black;
	color: black;
}
.pagination .current {
	padding: 2px 5px 2px 5px;
	margin: 2px;
	border: 1px solid #036CB4;
	font-weight: bold;
	background-color: #036CB4;
	color: #FFF;
}
.pagination .disabled {
	padding: 2px 5px 2px 5px;
	margin: 2px;
	border: 1px solid #EEE;
	color: #DDD;
}