/* Hoja de estilo CSS para Xuflet Racer, el juego.
Creado por Carles Reig para el Trabajo fin de curso del Graduado Multimedia a distancia UOC
carlesreig "arroba" gmail "punto" com
http://www.carlesreig.com
Primera edicion 23 marzo 2006
Ultima edicion 27 mayo 2006
*/

html, body{ 
 	margin:0;
 	padding:0;
	background-image:url(../img/fondo.gif);
	color:black;
	font-family:arial, helvetica, verdana;
	font-size:12px;
} 

/* Contenedor principal 750x425 (minimo) */
#contenido{
	/* nada */
}

/* ====================== */
/* INTERFAZ LOGIN USUARIO */
/*	index.php	  */
/* ====================== */

/* 1- Encabezamiento: hipervinculos para la seleccion del idioma 750x25 */
#cabecera{
	width:750px;
	height:25px;
	position:absolute;
	left:0;
	top:0;
	text-align:right;
} 

/* 2- Logo: celda con el logotipo del juego 400x375 */
#logo{ 
	width:400px;
	height:375px;
	position:absolute;
	left:0;
	top:25px;
	text-align:center;
} 

/* 3- Forumlario: celda con el forumlario de login del usuario 350x200 */
#login{
	width:350px;
	height:200px;
	position:absolute;
	left:400px;
	top:50px;
	border-color:#00C6FF;
	text-align:center;
}

/* 4- Menus iconicos: enlaces al foro y al faq del juego 350x175 */
#enlaces{
	width:350px;
	height:175px;
	position:absolute;
	left:400px;
	top:225px;
	text-align:center;
}

/* 5- Pie de pagina: hipervinculos con enlaces extra 750x25 */
#pie{
	width:750px;	
	height:25px;
	position:absolute;
	left:0;
	bottom:0;
	text-align:center;
} 

/* ============== */
/* INTERFAZ JUEGO */
/*     gui.php    */
/* ============== */

/* 1- Logotipo, menu iconico y enlace de retorno 750x50 */
#menu_iconos{
	width:480px;
	height:50px;
	position:absolute;
	left:120px;
	top:0;
	text-align:center;
}

/* 1.1 - Logotipo 120x50 */
#menu_logo{
	width:120px;
	height:50px;	
	background-image:url(../img/logo_horizontal_GUI.png);
	background-repeat:no-repeat;
	background-color: transparent;
	position:absolute;
	left:0;
	top:0;
}

/* 1.3 - enlace de retorno */
#menu_salida{
	position:absolute;
	left:600px;
	top:0;
	font-size:12px;
	text-align:left;
}

/* 2- Menus textuales 100x375 */
#menu_enlaces{
	width:100px;
	height:375px;
	position:absolute;
	left:0;
	top:50px;
	text-align:left;
}

/* 3- Contenido del juego 650x375 */
#contenido_juego{
	width:650px;
	height:375px;
	position:absolute;
	left:110px;
	top:55px;
	text-align:left;
	/* Barra lateral CSS play */
	/* unicode-bidi:bidi-override; direction:ltr; display:block; overflow:auto; */
}

/* =============== */
/* ESTILOS OBJETOS */
/* =============== */

/* Enlaces de texto - hipervinculos */
a{
	text-decoration:none;
	color:#00C6FF;
}

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

/* Imagenes del juego */
img{
	border:0;
}

/* Titulo de la seccion */
h1{
	color:#00C6FF;
	text-align:left;
	font-size:16px;
}
h1:before{
	content:"< ";
}
h1:after{
	content:" >";
}

h3{
	color:#00C6FF;
	text-align:left;
	font-size:14px;
}
h3:before{
	content:"> ";
}
h3:after{
	content:";";
}

form{
	border-style:solid;
	border-width:2px;
	border-color:#00C6FF;
	background-color:#FFFFFF;
	padding:10px;
}

/* ============================= */
/* ESTILOS CLASES Y PSEUDOCLASES */
/* ============================= */

/* Botones del juego */
.boton_img{
	border-style:none;
}

/* Botones de los formularios */
.boton_form{
	background-color:#007DA0;
	color:#FFFFFF;
}
.boton_form:hover{
	border-color:#FF8D00;
}
.boton_form:focus{
	border-color:#FF8D00;
}

/* Enlaces del forumlario de login */
.enlace_negro{
	text-decoration:none;
	color:#000000;
}

.enlace_negro:hover{
	text-decoration:underline;
	color:#000000;
}

/* Enlaces menu opciones apartado */
.apartado{
	text-decoration:none;
	text-align:center;
	background-color:#007DA0; 
	color:#fff;
	display:block; 
	width:95px; 
	padding:0.2em;
	margin:0.5em 0;
}

.apartado:hover{
	border-right:5px solid #D67600;
	background-color:#FF8D00;
	text-decoration:none;
	color:#fff;
}

/* Aspecto campos de texto de los formularios */
.campotexto{
	border-width:1px;
	border-color:#FF8D00;
}

.campotexto:focus{
	background-color:#FFFACD;
}

/* Mensaje de alerta */
.msg_alerta{
	background-color:#FFFACD;
	background-image:url(../img/msg_alerta.png);
	background-repeat:no-repeat;
	background-position:98% 0%;
	padding:10px;
	padding-right:50px;
	line-height:2;
}
.msg_alerta:before{
	content:"info: ";
	font-size:10px;
	color:red;
	padding:20px;
}

/* Mensaje de error en formulario */
.msg_error{
	color:red;
	font-size:12px;
}

/* Mensaje con la explicacion/historia de la seccion */
.descripcion{
	border-style:solid;
	border-width:1px;
	border-color:#FF8D00;
	background-color:#FFFFFF;
	padding:10px;
	line-height:1.5;
}

/* Mensaje de ayuda para rellenar campos del formulario */
.tip{
	font-size:12px;
}
.tip:before{
	content:"* ";
	color:red;
}

/* Label, Etiqueta o Titulo de los campos de texto de los forumlarios + tablas */
.etiqueta{
	text-align:right;
}