/* Elementos */
body
{
	margin: 0px;
	width: 100%;
	font-family: Segoe UI, Trebuchet MS, Lucida Sans, Arial, Sans-Serif;
	font-size: 70%;
	color: #ebd2cc;
	background-image: url(../images/bg.jpg);
	background-repeat: repeat;
}

.calipso #cuerpo  
{
	background-color: #240000;
	margin: 0 auto; /* los márgenes automáticos (conjuntamente con un ancho) centran la página */
	border: none;
	width: 100%;
} 

.calipso #container { 
	width: 992px;  /* esto creará un contenedor con el 80% del ancho del navegador */
	background-color: #240000;
	margin: 0 auto; /* los márgenes automáticos (conjuntamente con un ancho) centran la página */
	border: none;
	text-align: left; /* esto anula text-align: center en el elemento body. */
} 

.calipso #header { 
	padding: 0;  /* este relleno coincide con la alineación izquierda de los elementos de los divs que aparecen bajo él. Si se utiliza una imagen en el #header en lugar de texto, es posible que le interese quitar el relleno. */
	background:	url(../images/bg-header.jpg) repeat-x bottom left;
	margin: auto;
	text-align: center;
} 

.calipso #footer
{
	margin: auto;
	background: url(../images/bg-footer.jpg) repeat-x;
	padding: 0;
	text-align: center; /* esto anula text-align: center en el elemento body. */
	margin-top: 0;
	width: 100%;
}

.calipso #footer span
{
	display: inline-table;
	width: 992px;  /* esto creará un contenedor con el 80% del ancho del navegador */
	margin: 0 auto; /* los márgenes automáticos (conjuntamente con un ancho) centran la página */
	border: none;
	text-align: left; /* esto anula text-align: center en el elemento body. */
	padding: 15px 0;
	text-align: center;
}

.calipso #footer a
{
	font-weight: bold;
	text-decoration: none;
	color: #ebd2cc;
}

.calipso #footer a:hover
{
	font-weight: bold;
	text-decoration: none;
	color: #ebd2cc;
}

.calipso #footer a:active
{
	font-weight: bold;
	text-decoration: none;
	color: #ebd2cc;
}

.calipso #footer a:visited
{
	font-weight: bold;
	text-decoration: none;
	color: #ebd2cc;
}

.titulo 
{
	display: block;
	font-size: 130%;
	text-align: left;
	font-weight: bold;
}

/* Varias clases diversas para su reutilización */
.fltrt { /* esta clase puede utilizarse para que un elemento flote en la parte derecha de la página. El elemento flotante debe preceder al elemento junto al que debe aparecer en la página. */
	float: right;
	margin-left: 8px;
}
.fltlft { /* esta clase puede utilizarse para que un elemento flote en la parte izquierda de la página. El elemento flotante debe preceder al elemento junto al que debe aparecer en la página. */
	float: left;
	margin-right: 8px;
}
.clearfloat { /* esta clase debe colocarse en un elemento div o break y debe ser el último elemento antes del cierre de un contenedor que deba incluir completamente a sus elementos flotantes hijos */
	clear:both;
    height:0;
    font-size: 1px;
    line-height: 0px;
}

input
{
	font-size: 100%;
}

input[type=image]
{
	border: none;
}

input[type=text]
{
	font-family: Segoe UI, Trebuchet MS, Lucida Sans, Arial, Sans-Serif;
	font-size: 100%;
	border: solid 1px #502627;
	background-image: url(../images/input_bg.jpg);
	background-repeat: repeat-x;
	padding: 6px;
}

input[type=submit]
{
	padding: 8px;
	cursor: hand;
}

input[type=button]
{
	padding: 8px;
	cursor: hand;
}

textarea
{
	font-family: Segoe UI, Trebuchet MS, Lucida Sans, Arial, Sans-Serif;
	font-size: 100%;
	border: solid 1px #502627;
	background-image: url(../images/input_bg.jpg);
	background-repeat: repeat-x;
	padding: 6px;
}

select
{
	font-family: Segoe UI, Trebuchet MS, Lucida Sans, Arial, Sans-Serif;
	font-size: 100%;
	border: solid 1px #502627;
	background-image: url(../images/input_bg.jpg);
	background-repeat: repeat-x;
	padding: 5px;
}

a
{
	font-weight: bold;
	text-decoration: none;
	color: #ebd2cc;
}

a:hover
{
	font-weight: bold;
	text-decoration: none;
	color: #ebd2cc;
}

a:active
{
	font-weight: bold;
	text-decoration: none;
	color: #ebd2cc;
}

a:visited
{
	font-weight: bold;
	text-decoration: none;
	color: #ebd2cc;
}

.login #container {
	width: 100%;
	background: #FFFFFF;
	margin: 0 auto; /* los márgenes automáticos (conjuntamente con un ancho) centran la página */
	text-align: left; /* esto anula text-align: center en el elemento body. */
}

.login #mainContent {
	height: 400px;
	background: #FFFFFF;
	padding: 10px;
}

.login h5 {
    margin: 0px;
    margin-top: 2px;
    margin-bottom: 2px;
}

.login p {
    margin: 0px;
    margin-top: 2px;
    margin-bottom: 2px;
}

.obligatorio 
{
	color: Red;
}