/************************************************************************************************
Click!
Desarrollos Multimedia
www.clickmultimedia.net
2010
************************************************************************************************/

html,body{margin:0;padding:0}

body {
	padding:0;
	margin:0;
/*	text-align: center;*/
	font: 90% Geneva, Arial, Helvetica, sans-serif;
	color:#000;
	background: url('../interfaz/back.jpg') #FFF 0 0 repeat-x;
}


/******************************************************************************************************************
CONTENEDOR
******************************************************************************************************************/
#contenedor {
	float:left;
/*	margin-left: auto;
	margin-right: auto;*/
	width:100%;
	text-align: left;
/*	border:1px solid #0000CC;*/
}


/******************************************************************************************************************
CABEZA
******************************************************************************************************************/
#cabeza{
	clear: both;
	height: 159px;
	/* border: 1px solid  #FF0000;  */
}

#cabeza	img{
	float: left;
	display:block
	margin: 0;
	padding: 0 0 0 0;
	/* border: 1px solid #00FF00;  */
}

#cabeza .titulo_cabeza{
	float: left;
	margin-top:105px;
	width:380px;
	/* border: 1px solid #00FF00; */
}

#cabeza .nombreper_cabeza{
	float: right;
	margin-top:105px;
	margin-right:15px;
	width:270px;
	text-align:right;
	/* border: 1px solid #00FF00; */
}


#cabeza .titulo_cabeza,.nombreper_cabeza{
	color: #FFF;
	font: bold 80% Georgia, "Times New Roman", Times, serif;
	text-shadow: 0 0 0.4em #000, 0 0 0.4em #000, 0 0 0.4em #000;
}


/******************************************************************************************************************
CUERPO
******************************************************************************************************************/
#cuerpo{
	float:left;
	display:block;
	margin-bottom:20px;
/*	margin:0 2% 0 25px;*/
	width:100%;
	height:auto;
/*	border:1px solid red;*/
}

#cuerpo h1, h2, h3{
	color: #9A1A1A;
	margin-bottom:10px;
}


#cuerpo p{
	text-align:justify;
}



#interna{
	margin:0 25px;
/*	border:1px solid red;*/
}

/* TITULACION -------------------------------------------------------------------------- */
#titulacion{
	float:left;
	display:block;
	width:100%;
	margin-bottom:10px;
	padding-bottom:3px;
	border-bottom:1px solid #CCC;
}

#titulacion h2{
	margin: 10px 0 0 0;
	float: left;
}


/* cargaForm -------------------------------------------------------------------------- */
#cargaForm{
	padding:0 5px;
}


/******************************************************************************************************************
FORMULARIO
******************************************************************************************************************/
#centro form{
/*	border: 1px solid #F00;*/
}

#titulo{
	float:left;
	display:block;
	height:26px;
	padding-left:8px;
	background:url('../interfaz/cabeFizq.gif') transparent 0 0 no-repeat;
/*	border: 1px solid red;*/
}
#titulo h3{
	float:left;
	display:block;
	margin:0;
	padding:4px 8px 4px 0;
	color:#FFF;
	background:url('../interfaz/cabeFder.gif') transparent right top no-repeat;
}


fieldset{	margin:0 0 0 0;}
legend { 	font-weight:bold;}

form #area{
	float:left;
	display:block;
	width:99%;
	margin-bottom:10px;
	padding: 15px 0.5% 10px 0.5%;
/*	padding:15px 10px 10px 10px;*/
	background-color:#F2F2F2;
	border: 1px solid #999;
}


/* LABEL -------------------------------------------------------------------------- */
form label{
	float:left;
	display:block;
	width:100%;
	margin-bottom:5px;
/*	height:44px;
	font-weight:bold;*/
}
form #area label{
	width:299px;
	height:auto;/*44px*/
/*	border: 1px solid blue;*/
}
form label span{
	float:left;
	display:block;
	width:100%;
	margin-bottom:3px;
/*	border: 1px solid red;*/
}


form #area label.mensaje{
	visibility:hidden;
	display:none;
	
	float:left;
	padding:5px 0;
	margin-bottom:10px;
	width:100%;
	text-align:center;
	font-weight:bold;
	color:#A70707;
/*	background-color:#CCC;
	background:#A70707 url('../interfaz/XbkMensaje.gif') 0 0 ;*/
	border: 1px solid #A70707;
}


form #area label.L{
	width:100%;
	height:auto;
/*	border: 1px solid blue;*/
}
form #area label.L input{
	margin-right:8px;
}
form #area label.L input.L{
	width:98%;
}
input.L{
	width:98%;
}

form #area label.Lc{
	width:100%;
	height:auto;
	text-align:center;
/*	border: 1px solid blue;*/
}


/* TEXTAREA -------------------------------------------------------------------------- */
form #area label.txtAreaS, form #area label.txtAreaM, form #area label.txtAreaL{
	float:left;
	width:100%;
	height:88px;
}
form #area label.txtAreaS textarea, form #area label.txtAreaM textarea, form #area label.txtAreaL textarea{
	width:98%;
	height:60px;
	margin-bottom:10px;
	font:80% Verdana, Arial, Helvetica, sans-serif;
	padding:0 2px;
	border: 1px solid #999;
}

form #area label.txtAreaM{			height:158px;}
form #area label.txtAreaM textarea{	height:130px;}

form #area label.txtAreaL{			height:188px;}
form #area label.txtAreaL textarea{	height:150px;}

form textarea{
	margin-bottom:5px;
	border: 1px solid #2B286B;
}


/* SPAN -------------------------------------------------------------------------- */
form #area span{
	float:left;
	padding-top:2px;
}

form #area label span.sm,
form #area label span span{
	width:auto;
	margin:0;
	padding:0;
/*	border: 1px solid yellow;*/
}


/* INPUT -------------------------------------------------------------------------- */
form input{
	width:280px;
	height:18px;
	padding:0px 0;
	margin-bottom:4px;
	font:80% Verdana, Arial, Helvetica, sans-serif;
	padding:2px 2px 0 2px;
	border: 1px solid #999;/*2B286B*/
}


/*
form table input{
	margin-bottom:0px;
}

/*form input[type=radio], input[type=checkbox] {*/
form input.mini, form span.mini input{
	float:left;
	padding-top:2px;
	margin-bottom:6px;
	width:20px;
	border:none;
	/*border: 1px solid yellow;*/
}

form #area label span.mini label{
	float:left;
	display:block;
	width:260px;
	/*border: 1px solid green;*/
}

form input.diez {
	width:82px;
}
form input.veinte {
	width:164px;
}



form table input[type=radio], input[type=checkbox] {
	margin:0 10px 0 5px;
}


/* SELECT -------------------------------------------------------------------------- */
form select{
	margin-bottom:8px;
	font:80% Verdana, Arial, Helvetica, sans-serif;
	border: 1px solid #999;
}


/* LABEL BUSCAR -------------------------------------------------------------------------- */
form #area label.buscar{
}

form input.campoBoton{
	float:left;
	width:255px;
/*	background-color:#0099FF;*/
}

form select.SelectBoton{
	float:left;
/*	background-color:#0099FF;*/
}


/* BOTONES CHICOS -------------------------------------------------------------------------- */
form input.botonBuscarS,
form input.btGuardarS,
form input.btSubirS,
form input.btBajarS,
form input.btPersonaS{
	float:left;
	display:block;
	width:22px;
	height:22px;
	margin-left:5px;
	text-indent:-9000px;
	line-height:1000px;
	outline:hidden;
	background: url('../interfaz/btBuscarS.jpg') 0 0 no-repeat;
	border:none;
}

form input.btGuardarS{	background-image: url('../interfaz/btGuardarS.jpg');}
form input.btSubirS{	background-image: url('../interfaz/btSubirS.jpg');}
form input.btBajarS{	background-image: url('../interfaz/btBajarS.jpg');}
form input.btPersonaS{	background-image: url('../interfaz/btPersonaS.jpg');}



/* DIV's DOBLE -------------------------------------------------------------------------- */
#area .doble, #area .panel{
	float:left;
	display:block;
	width:100%;
	margin-bottom:5px;
	font-size:12px;
	/*border: 1px solid red;*/
}

#area .dobleI, #area .panelI, #area .panelIdos{
	float:left;
	display:block;
	width:30px;
}


#area .dobleD{	margin-left:35px; }

#area .panelI{	width:140px;}
#area .panelD{	margin-left:150px;}

#area .panelIdos{	width:200px;}
#area .panelDdos{	margin-left:210px;}


#area a{
	color:#000;
	text-decoration:none;
}
#area a:hover{
	color: #9A1A1A;
	text-decoration:underline;
}

#area a.nva{
	display: block;
	margin-bottom: 10px;
	font-size: 110%;
}


/* lista modificaciones -------------------------------------------------------------------------- */
ul.modificaciones{
	margin: 6px 0 6px 0;
	padding: 0;
	list-style-type: none;
	border-left: 1px solid #358125;
}

ul.modificaciones li{
	display: inline;
}

ul.modificaciones a{
	padding: 1px 5px 1px 25px;
	text-align: center;
	text-decoration: none;
	color: #29651D;
	border-right: 1px solid #358125;
}

a.editar{ background: url('../interfaz/btEditarS.jpg') 4px 0 no-repeat; }
a.eliminar{ background: url('../interfaz/btEliminar.jpg') 4px 0 no-repeat; }
a.print{ background: url('../interfaz/btPrintS.jpg') 4px 0 no-repeat; }
a.desaudi{ background: url('../interfaz/btPerso_bla.jpg') 4px 0 no-repeat; }


ul.modificaciones a:hover{
	background-position: 4px 100%;
}



/* tabla -------------------------------------------------------------------------- */
#area table{
	width: 98%;
	margin: 5px 0;	
	border-collapse: collapse;
	border-top: 1px solid #CCC;
	border-right: 1px solid #CCC;
	background-color: #FFF;
}
#area th {
	padding: 4px 10px;
	text-align: center;
	border: 1px solid #CCC;
	border-bottom: 2px solid #CCC;
	background-color: #E0E0E0;
}
#area td {
	padding: 6px 6px;
	border-left: 1px solid #CCC;
	border-bottom: solid 1px #CCC;
}

#area td a.persona{
	padding: 2px 0 0 22px;
	background: url('../interfaz/btPerso_bla.jpg') 0 0 no-repeat;
}
#area td a.persona:hover{
	background-position: 0 100%;
}



/* BAJA LABEL -------------------------------------------------------------------------- */
#salto{
	clear:both;
}

#saltoCarga{
	clear:both;
	height:25px;
}

hr{
	clear: both;
	float: left;
	display: block;
	margin: 0 0 12px 0;
	width: 98%;
	height: 1px;
	border: 0;
	color: #CCC;
	background-color: #CCC;
}

hr.sepa{ margin: 30px 0 0 0; }



/* BOTONES NORMALES -------------------------------------------------------------------------- */
/*form input[type=submit], input[type=reset] , input[type=button]{*/
form input.botonS,
form input.botonM,
form input.botonL,
form input.botonBuscar,
form input.botonSalvar,
form input.botonMas,
form input.botonMenos
{
	float:left;
	display:block;
	width:83px;
	height:37px;
	margin-right:10px;
	font-size: 80%;
	color:#FFF;
	background: url('../interfaz/botonS.jpg') 0 0 no-repeat;
	border:none;
}
form input.botonM{
	width:125px;
	background: url('../interfaz/botonM.jpg') 0 0 no-repeat;
}
form input.botonL{
	width:200px;
	background: url('../interfaz/botonL.jpg') 0 0 no-repeat;
}
form input.botonBuscar, form input.botonSalvar{
	width:95px;
	text-align:left;
	padding-left: 8px;
	background: url('../interfaz/botonBuscar.jpg') 0 0 no-repeat;
}
form input.botonSalvar{ background: url('../interfaz/botonSave.jpg') 0 0 no-repeat; }


form input.botonMas, form input.botonMenos{
	width:26px;
	height:30px;
	text-indent:-9000px;
	line-height:1000px;
	outline:hidden;
	background: url('../interfaz/btMas.jpg') 0 0 no-repeat;
}

form input.botonMenos{
	background: url('../interfaz/btMenos.jpg') 0 0 no-repeat;
}


input[type=submit]:hover, input[type=reset]:hover, input[type=button]:hover{
	background-position:0 bottom;
}


/* BOTONES SIMPLES -------------------------------------------------------------------------- */
input.btAyuda{
	float:left;
	display:block;
	width:46px;
	height:44px;
	text-indent:-9000px;
	line-height:1000px;
	overflow: hidden;
	background: url('../interfaz/btAyuda.jpg') 0 0 no-repeat;
	border:none;
}



/******************************************************************************************************************
PIE
******************************************************************************************************************/
#pie {
	clear: both;
	height: 180px;
	padding: 25px 0 0 15px;
	background:#FFF url('../interfaz/pie.gif') 0 top repeat-x;
/*	border-top: 1px solid #CCC;*/
}

#pie h1{
	margin-left:10px;
}
#pie h2{
	margin-bottom:-20px;
	color: #666;
}

#click{
	float:right;
	margin-right:30px;
	font-size: 70%;
	text-align: right;
}
#click a{
	text-decoration: none;
	color: #666;
}
#click a:hover{
	color: #000;
}