/*
* Select redondeado.
* Se pone un select transparente.
* Encima se pone un span con la imagen redondeada.
* El span es absoluto, el select relativo al span.
* Todo se mete en un div inline.
* Y listo, a funcionar.
*/


#seccionRegistro {
	margin: auto;
	text-align: left;
	width: 475px;
	border: 1px solid #ccccccc;
	float:left;
	margin-top: 25px;
}

#seccionRegistro #datos {
	margin-left: 40px;
	line-height: 20px;
}

.separador {
	width: 20px;
}

.tituloCampo {
	float:left;
	font-weight: bold;
	width: 70px;
}


div.roundselect {
	display:inline;
	/*float:left;*/
   font-size:12px;
	color:#4B4B4B;
}

select.roundselectsmall {
	opacity:0;
	filter: alpha(opacity=0);
	cursor:pointer;
	width:57px;
	height:21px;
	position:relative;
	z-index:5;
	top: 0px;		/* Sube un poco el select porque se queda separado del span */
}
span.roundselectsmall {
	background:transparent url(img/roundform/selectsmall.gif) no-repeat scroll left top;
	width:57px;
	height:21px;
	position: absolute;
	padding-left: 3px;
}

select.roundselectmedium {
	opacity:0;
	filter: alpha(opacity=0);
	cursor:pointer;
	width:105px;
	height:20px;
	position:relative;
	z-index:5;
	top: 0px;		/* Sube un poco el select porque se queda separado del span */
}
span.roundselectmedium {
	background:transparent url(img/roundform/selectmedium.gif) no-repeat scroll left top;
	width:105px;
	height:20px;
	position: absolute;
	padding-left: 3px;
}

select.roundselectbig {
	opacity:0;
	filter: alpha(opacity=0);
	cursor:pointer;
	width:210px;
	height:21px;
	position:relative;
	z-index:5;
	top: -5px;		/* Sube un poco el select porque se queda separado del span */
}
span.roundselectbig {
	background:transparent url(img/roundform/selectbig.gif) no-repeat scroll left top;
	width:210px;
	height:21px;
	position: absolute;
	padding-left: 3px;
}
/* Select redondeado */



/*
* Input redondeado.
* Simplemente se pone una imagen de fondo al input.
*/
input.roundinputsmall {
	background:url(img/roundform/inputsmall.gif) no-repeat;
    border:0 none;
    font-size:12px;
	font-weight: bold;
	color:#4B4B4B;
    width:78px;
	width: 99px;
    height:20px;
    padding:2px 3px;
}

input.roundinputmedium {
	background:url(img/roundform/inputmedium.gif) no-repeat;
    border:0 none;
       font-size:12px;
	font-weight: bold;
	color:#4B4B4B;
    width:150px;
    height:20px;
    padding:2px 3px;
}

input.roundinputbig {
	background:url(img/roundform/inputbig.gif) no-repeat;
    border:0 none;
   font-size:12px;
	font-weight: bold;
	color:#4B4B4B;
    width:194px;
    height:20px;
    padding:2px 3px;
}
/* Input redondeado */





/*
* Botones redondeados
*
*/
div.botonleft {
	float:left;
    width:3px;
    height:21px;
	
    background:url(img/roundform/botonleft.gif) no-repeat left top;
}

div.botonright {
    float:left;
    width:3px;
    height:21px;
    background:url(img/roundform/botonright.gif) no-repeat left top;
	
}

input.botoncenter {
    float:left;
    height:21px;
	width:120px;

    padding:0 8px 4px;
   
    background:url(img/roundform/botoncenter.gif) repeat-x left top;
    border:0;
    font-weight:bold;
    cursor:pointer;
    font-size:10px;
    color:#FFF;
}
input.botoncenter:hover {
    background:url(img/roundform/botoncenter2.gif) repeat-x left top;
}
/* Botones redondeados */









/*
* Checkbox redondeado.
* Usa el script fancy-form para los checkboxes.
*/
.checked {
    background-image:url(img/roundform/check.gif);
	background-repeat: no-repeat;
	width: 18px;
	height:18px;
	padding-top: 4px;
	padding-botton: 4px;
	padding-left: 18px;

	cursor: pointer;
}

.unchecked {
    background-image:url(img/roundform/uncheck2.gif);
	background-repeat: no-repeat;
	width: 18px;
	height:18px;
	padding-top: 4px;
	padding-botton: 4px;
	padding-left: 18px;

	cursor: pointer;
}
/* Checkbox redondeado */