/* XHTML y CSS con AMAYA
   Bartolomé Sintes Marco
   http://www.mclibre.org
   
   Hoja de estilo para el curso Páginas Web con PHP
   23 de febrero de 2010
*/

html { font-family: sans-serif; background-color: #F8E5C3; 
  text-align: justify; }

div.ejf, div.ejr { background-color: white; border: black 2px solid; 
  padding: 2px 5px 5px; margin: 10px 5px; width: 70%; text-align: justify; }
div.ejf { background-color: #D9EDF4; }
div.ejr { background-color: #D3F1D3; }
div.ejf h2 , div.ejr h2 { font-size: 120%; text-align: center; }

div.codphp  { border: black 2px solid; background-color: #DDDDDD; 
padding: 0px 10px; margin: 0px 20px; }

div.codhtml { border: black 2px solid; background-color: #DDDDDD;
 padding: 0px 10px; margin: 0px 20px; }
div.html { border: black 2px solid; background-color: white; 
padding: 10px 10px; margin: 0px 20px; }

.clear { clear: both; }
h2 { clear: both; }

.derecha { text-align: right; }
.php-fun { font-family: monospace; }
.php-del { font-family: monospace; font-weight: bold; } /* Delimitador de fragmento php */
.php-dir { font-family: monospace; font-weight: bold; }
.php-var { font-family: monospace; font-weight: bold; }
.php-con { font-family: monospace; font-weight: bold; }
.html-eti { font-style: oblique; background-color: NavajoWhite; }.html-eti:hover { color: NavajoWhite; background-color: silver; }
.html-atri { font-style: oblique; background-color: MintCream; }
.html-atri:hover { color: MintCream; background-color: silver; }
.html-atri-valor { font-style: oblique; background-color: #eeeeee; }
.html-atri-valor:hover { color: NavajoWhite; background-color: silver; }
.ff-atajo-teclado { font-family: monospace; font-weight: bold; font-size: 120%; }
.ff-menu { background-color: #D4D0C8; font-family: serif;}
.ie-menu { background-color: #D4D0C8; font-family: serif;}

div.diario { margin: 20px 50px 3px; padding-left: 20px; }
div.diario p.fecha { font-weight: bolder; margin-top: 0px; margin-left: -20px; padding: 5px }
div.gr1 { border: #C9C9FF 3px solid; background-color: #E7E7FF; }
div.gr1 p.fecha { background-color: #C9C9FF; color: #FFFFFF; }
div.gr2 { border: #B0E293 3px solid; background-color: #CEFFCE; }
div.gr2 p.fecha { background-color: #B0E293; color: #FFFFFF; }

table.bordetbody { border-collapse: collapse;  }
table.bordetbody tbody { border-bottom: 5px black solid; }
address { border-top: black solid 1px; padding-top: 5px; margin-top: 10px; clear: both;}
p.licencia { text-align: center; }

table.ejemplo { width: 100%; border-spacing: 20px 5px; text-align: left; border-spacing: 5px; }
/* table.ejemplo td { width: 50%; vertical-align: top; border: #7D7D7D 2px solid; 
  padding: 0px 5px; } */
table.ejemplo3 td { width: 10%; vertical-align: top; border: black 2px solid; 
  padding: 0px 5px; } /* No lo entiendo, pero si pongo width: 33% lo hace pequeño */

table.sinborde td { border: none; }
td.codphp, td.codhtml { background-color: #E0E0E0;  border: black 2px solid; padding: 0px 5px; }
td.resul-html { background-color: #FFFFE0;     border: black 2px solid; padding: 0px 5px;}
td.resul-php { background-color: #FFFFFF;     border: black 2px solid; padding: 0px 5px;}
td.conf { background-color: #FFFFE0; font-family: monospace; }
td.expl { background-color: #FFFFFF; }
td.sintaxis { background-color: #E0E0E0; font-family: monospace;} /* Sintaxis de PHP */

.fuente-num { color: blue; }

.incompleto { color: red; background-color: #FFFFFF; }

object.ejercicio { width: 90%; height: 400px; border: 2px solid black ;}
object.ejemplo { width: 90%; border: 2px solid black ;}
p.ejercicio { text-align: center;}
p.enlace-ejercicio { margin-right: 5%; text-align: right; font-size: 80%;}

/* Lo que viene a continuación son los restos de la CSS de Amaya */

h1 { font-size: 200%; text-align: center; margin-left:40px;}
h2 { font-size: 120%; }
h3 { font-size: 105%; }
h4 { font-size: 100%; font-weight: normal; text-decoration: underline;}

p { margin:5px 0px; }

p.aviso { margin:10px; padding: 10px; 
  border-left: 2px red solid; color:red; }
p.centrado { text-align: center; }
table.centrado { margin-left: auto; margin-right: auto; }
td.centrado, th.centrado { text-align: center; }
p.derecha { text-align: right; }

pre.fuente { background-color: #E0E0E0; color: black; padding: 3px 5px;
  border: #7D7D7D 2px solid; margin: 0px 10px; }

hr { width: 100%; clear: both; }
hr.corta { width: 50%; text-align: center; clear: both; }

table.indice td { vertical-align: top; }
col.centrado { padding: 0px 10px; text-align: center;  }
ul { margin-top: 0px; }
li { clear: both; }
img#vpp { position: absolute; top: 5px; left: 5px; border:none; }
img.d { float: right; margin-left: 10px; margin-bottom: 5px; }
img.i { float: left; margin-right: 10px; margin-bottom: 5px; }
.captura img { border: black 2px dotted; padding: 5px;}
.captura { text-align: center; }

.regla { border: blue 2px solid; padding: 8px 3px;}
.selector { border: red 2px solid; padding: 5px 3px; }
.declara { border: green 2px solid; padding: 5px 3px; }
.propied { border: black 2px solid; padding: 2px; }
.valor { border: yellow 2px solid; padding: 2px; }
.menu { background-color: #D4D0C8; font-family: serif;}


