/*Para los ejercicios interactivos "independientes" */
BODY {
	font-family:"times new roman, times, serif";
}
/* Para el enunciado del problema */
.enunciadototal {
  display:none;
  margin: 10px;
  border: solid green 2px;
  border-radius: 15px;
  padding: 5px;
  background-color: LightGreen;
box-shadow: 10px 10px 20px black;
}
/* Para lo que se pide en cada paso */
.enunciado {
  display:none;
  margin: 5px;
  border: solid yellow 1px;
  border-radius: 15px;
  padding: 3px;
  background-color: AntiqueWhite;
box-shadow: 10px 10px 20px black;
}
/* Cuadro inferior que se usa para meter dinámicamente cosas */
.final {display:none}
/* Para presentar ejemplos de datos y resultados */
.datos{
  height:250px;
  overflow: scroll;
  border: 3px solid black;
}
/* Para presentar función que resuelve en Javascript */
.funcion{
  height:500px;
  overflow: scroll;
  border: 3px solid green;
}
/* Para presentar un ejemplo de cómo quedaría en pantalla */
.pantalla{
border: solid gray 3px;
background: black;
color: white;
font-family: monospace;
	}
/* Para marcar en esa pantalla de ejemplo lo que teclearía el usuario */
.usuario{
	background: gray;
	color: black;
	}
/* El grupo de un paso en la resolución */
.paso {display:none;
margin: 10px;
border: solid blue 2px;
border-radius: 15px;
padding: 5px;
background-color: AliceBlue;
box-shadow: 10px 10px 20px black;
}
/* Una opción propuesta */
.opcion {
display:none;
    margin-right: 7px;
    margin-left: 7px;
  border: dashed yellow 1px;
border-radius: 5px;
  padding: 3px;
  background-color: AntiqueWhite;
}
/* Para la realimentación a la opción propuesta */
.respuesta {
display:none;
    margin-right: 7px;
    margin-left: 7px;
/*  border: dashed red 1px;*/
  padding: 3px;
font-size: 120%;
font-weight: bold;
  background-color: gold;
}
/* Para incrustar código guente cuando haga falta */
.programa { font-family : monospace ; white-space: pre}
/* Para subrayar fuertemente alguna cuestión */
.marca { background-color:red; font: small-caps 900 large serif; color: yellow; text-decoration: blink; border: thick double black;}
/* Para los ejemplos que se presentan valorados y luego se le pide al alumno que valore otros */
.peticion {
  display : none ;
  margin: 5px;
  border: solid red 1px;
border-radius: 3px;
  padding: 3px;
  background-color: MistyRose;
}
.peticion::before {
content: "Ejemplos";
font-weight: bold;
font-size: 120%;
}
/* Auxiliar para las explicaciones de sintaxis */
.explicacion {display : none ;}
/* Para un ejemplo correcto */
.valoresbien {
margin-right: 7px;
    margin-left: 7px;
  border: dashed lime 1px;
border-radius: 5px;
  padding: 3px;
  background-color: PaleGreen;
}
.valoresbien::before{
content: "Un caso correcto: ";
}
/* Para un ejemplo regular */
.valoresreg {
margin-right: 7px;
    margin-left: 7px;
  border: dashed orange 1px;
border-radius: 2px;
  padding: 3px;
  background-color: moccasin;
}
.valoresreg::before{
content: "Caso no del todo bien: ";
}
/* Para un ejemplo incorrecto */
.valoresmal {
margin-right: 7px;
    margin-left: 7px;
  border: dashed orange 1px;
  padding: 3px;
  background-color: LightPink;
}
.valoresmal::before{
content: "Caso incorrecto: ";
}
/* Para los ejemplos que se le presentan al alumno para que él los valore */
.ejemplo {display:none;
    margin-right: 7px;
    margin-left: 7px;
  border: dashed red 1px;
border-radius: 10px;
  padding: 3px;
  background-color: MistyRose;
box-shadow: 10px 10px 20px black;
}
/* Un título para lo anterior */
.ejemplo:before {
    content: "Ejemplo";
    display: block;
    font-size: 120%;
    font-weight: bold;
}
/* Realimentación al alumno que ha valorado un ejemplo */
.valor{display:none;
    margin-right: 7px;
    margin-left: 7px;
/*  border: dashed red 1px;*/
  padding: 3px;
font-size: 120%;
font-weight: bold;
  background-color: DarkOrange;
}