/* 
Nombre del tema: Plantilla Flujo
Direccion URL: http://www.bancochile.cl
Descripcion: Plantilla Flujo Actualizacion de Datos para Banco de Chile
Version:1.0
Front: Boris Fernandois
*/
/*---------------------------------------------------------------------------------*/

*,form{margin:0; padding:0;}
body{background-color:#F7F7F7; color:#555; font: normal 12px/120% Arial,Verdana,Helvetica,sans-serif; text-align:left; padding:0;}
hr{display:none}
a img, iframe, fieldset {border: none;}
table{border-collapse:collapse; border-spacing:0px; empty-cells:show; }
td{padding:0;} 

/*-------------------------------------------------------------------------
								Global
-------------------------------------------------------------------------*/

/*------------- Imagenes */
#Header h1 a, #FootLogBanc{background: url(../images/Logo-sprite.gif) no-repeat 0 0;}
.out, li{background:url(../images/auxiliares-sprite.gif) no-repeat 0 0;}
.alert{ background:url(../images/icoAlertGran.gif) no-repeat 10px 10px;}
.ok{ background:url(../images/icoOkGran.gif) no-repeat 10px 10px;}
.Cerrar a{ background:url(../images/Cerrar.gif) no-repeat 100% 50%;}
#Header .LogoSeguro {background:url(../images/logoSeguro.jpg) 0 0 no-repeat;}

/*------------- Listas */
ul, ol{margin:.5em 0;}
li{list-style:none}
ol li{list-style: outside decimal;}
ul li{display:block; margin:0; padding:0; position:relative;}

/*------------- Links */
a{color:#004BCC; font-style:normal; text-decoration:underline; }
a:hover{text-decoration:underline;}
a:active, a:focus{outline:0}
a:visited{color:#2D0088;}

/*------------- Headers */
h1,h2,h3{font:normal 2em/100% Arial, Verdana; margin:15px 0 10px;}
h1{font-weight:bold; font-size:1.8em; letter-spacing:-.04em; margin:0 0 0 0; color:#2178CD;}
h2{font-size:1.5em; color:#999;}
h3{font-size:1.2em;}

/*------------- Clear Fix */
.cf:after {content:"."; display:block; height:0; clear:both; visibility:hidden;}
.cf {display:inline-block;}
/* IE \*/
* html .cf{height:1%;}
.cf {display:block;}
/* IE */

/*-------------------------------------------------------------------------
							  Layout
-------------------------------------------------------------------------*/
#Top,#Header,#Main,#Footer{margin:0; padding:0;}
#Top{padding:.2em 0 .3em; border-bottom:1px solid #001947;}
#Main{background:#fff; padding:10px 0;}
#Footer{ border-top:1px solid #DBDBDB; color:#666; padding:10px 0 15px; background:#F7F7F7;}
#Header{height:90px; border-top:5px solid #001947; background:url(../images/background-kidzania.jpg) center 0 no-repeat #002464;}
.Content{margin:0; position:relative; padding:0; z-index:1}
.Center{margin:0 auto; width:940px; position:relative; padding:0 10px; z-index:1;}
.Content p{ font:12px Arial, Helvetica, sans-serif;}
.Content .obliga { color: #FF0000; font: italic 11px Arial, Helvetica, sans-serif;}
#Menu ul.pasoComp li span{ background:url(../images/pasos.gif) no-repeat 0 0;}

/*-------------------------------------------------------------------------
							   Header
-------------------------------------------------------------------------*/
/*------------- Top */
#Top p,#Top p a{color:#666;}
#Top p strong{color:#333;}

/*------------- menu superior*/
#Header .subMenu{display:block; position:absolute; right:10px; top:2px;}
#Header .subMenu li{color:#C4C9D2; float:left; background:none;}
#Header .subMenu li a{color:#C4C9D2; text-decoration:none; padding:0 5px 0 0;}
#Header .subMenu li a:hover{text-decoration:underline;}
#Header .subMenu li .cerrSesi{background:url(../images/auxiIconCandado.gif) no-repeat right 0; padding-right:20px; color:#FFF;}

/*------------- Logo */
#Header h1{margin:0; line-height: 100%; height:40px; padding:0; border-bottom:none; position:absolute; top:22px; left:10px;}
#Header h1 a{width:210px; height:40px; margin:0; text-indent: -999em; display:block;}
#Header h1 small{display:none; margin: 40px 0 0 .5em; padding:.2em 0 .3em .4em;  float:left; font:normal 2.3em/100% "Trebuchet MS", Verdana, Arial; color:#CCC; border-left:1px solid #ccc;}
#Header .LogoSeguro { margin:0; padding:0; width:100px; height:120px; border: none; float:right; text-indent:-999em;}
#Menu {background:#FFF;}

/*------------- titulo */
#Menu h1{margin:0; display:block; color:#2178CD; padding:15px 0 3px 0; border-bottom:2px solid #E8E8E8;}

/*---- Miga*/
#miga{padding:10px 0 .3em; font: normal 11px/120% "Trebuchet MS", Verdana, Arial; background:#FFF;}
#miga p,#miga p a{color:#777; text-decoration:none;}
#miga p a:hover{text-decoration:underline;}
#miga p strong{color:#777;}

/*------------- Menu */
#Menu ul{width:100%; height:40px; margin:0; padding:0; position:absolute; top:5px; left:0;}
#Menu ul li {background:none; display:block; float:left; font:normal .8em/100% arial; height:2.6em; margin:0 2px 0 0; position:relative; text-align:center; width:auto; padding:0;}
#Menu ul li a{ border:1px solid #ccc; color:#666; display:block; padding:8px 20px 6px; text-decoration:none; background:#F1F1F1; text-transform:uppercase;}
#Menu ul li a:hover{color: #000; background: #ccc;}
#Menu ul li a.acti, #Menu ul li  a.acti:hover{color: #000; background-color:#fff; padding:8px 20px 10px; border-bottom:1px solid #fff;}


#Menu ul.pasoComp{ border-bottom:1px dashed #ccc; position: relative; clear: both; width: 100%; height: 27px; margin: 0 0 45px 0; padding:0;}
#Menu ul.pasoComp li{position: absolute; top: .9em;	height: 2em; padding: 0px 10px 6px 15px; font:10px Verdana, Arial, Helvetica, sans-serif; color: #999; background:none; display:block; width:150px;}
#Menu ul.pasoComp li span{ display:block; width:35px; height:35px; margin:0 auto;}
#Menu ul.pasoComp li.uno{left: 10%;}
#Menu ul.pasoComp li.dos{left: 40%; }
#Menu ul.pasoComp li.tres{right: 10%;}
#Menu ul.pasoComp li.cuatro{right: 0%;}

#Menu ul.pasoComp li .unoImg{ background-position:0 0;}
#Menu ul.pasoComp li .dosImg{ background-position:-35px 0;}
#Menu ul.pasoComp li .tresImg{ background-position:-70px 0;}
#Menu ul.pasoComp li .cuatroImg{ background-position:-105px 0;}

#Menu ul.pasoComp li.acti{color:#3A81CB; font-weight:bold;}
#Menu ul.pasoComp li.acti .unoImg{ background-position:0 -35px;}
#Menu ul.pasoComp li.acti .dosImg{ background-position:-35px -35px;}
#Menu ul.pasoComp li.acti .tresImg{ background-position:-70px -35px;}
#Menu ul.pasoComp li.acti .cuatroImg{ background-position:-105px -35px;}

/*-------------------------------------------------------------------------
							Contenido
-------------------------------------------------------------------------*/
/*------------- TxtCont */
.TxtCont .dat{width:110px; display:block; float:left;}
.TxtCont p{line-height:130%; margin-bottom:5px;}
.TxtCont ul li{padding:0 0 5px 20px; background-position:6px -69px; background-repeat:no-repeat;}

/*------------- Columnas */
#Main #Col{float:left; position:relative; width:220px; margin-right:10px;}
#Main #Cent {float:right; position:relative; width:700px; margin-left:10px;}
#Main #Cent #CentCont{ float:left; width:460px; margin-right:10px;}
#Main #Cent #CentCol{ float:right; width:220px; margin-left:10px;}

/*------------- blockquote Contenido */
blockquote{padding:0; font-size:11px;}
blockquote p{ margin:0; padding:10px 0;}

/*------------- Tablas */
table{width:100%;margin:0 0 10px; border-collapse:collapse; empty-cells:show; border-spacing:0px; border:none; background: none; text-align:right; color:#555;}
table.NoMbot{ margin-bottom:0;}
.TBord{ border-bottom:3px solid #D9D9D9;}
.log{ font-size:1em; padding:20px;}
th, td{padding:8px 6px 8px 0;font:1em Arial, Helvetica, sans-serif;line-height:110%; border:none; border-bottom:1px dashed #E0E0E0; text-align:left; vertical-align:top;}
td.txtinp{ padding-top:15px}
td.noline { border-bottom:none;}
th samp, td samp { font:italic 10px Verdana, Arial, Helvetica, sans-serif; color:#A7A7A7; margin:0 10px 0 0;}
th samp.candado, td samp.candado { font:italic 10px Verdana, Arial, Helvetica, sans-serif; color:#A7A7A7; background:url(../images/ico-candado.jpg) 0 0 no-repeat; padding:6px 0 6px 24px; margin:0;}
.logoredbanc {margin:0; padding:0; float:right; width:146px; height:25px;} 
html* .logoredbanc {margin:-22px 0 0 0; padding:0; float:right; width:146px; height:25px;} 
.icon{ padding:0 23px 0 0; position:relative; font-style:normal; width:115px; margin:0 auto; text-align:right;}
.icon img{position:absolute; right:4px; top:-50%; margin:4px 0 0;}
th .mod, td .mod { margin:0 0 0 8px; padding:2px 0 2px 18px; background:url(../images/ico-editar.gif) 0 2px no-repeat;}

/* colores */
.thcolo th{ background-color:#E3E3E3; color:#666; font:bold 1em Arial, Helvetica, sans-serif; text-align:left;}
tr{ background: none;}
.colo{ background: none;} /* esta clase permite intercalar color fondo*/
.Elimi, .DestElim{ background-color:#FFFFB8; border:1px solid #ccc;}
.Elimi{ text-align:right;}
.DestElim{ border:1px solid #FFFFB8; font-weight:bold;}
.DestElim td{ border-bottom:1px solid #FFFFB8; padding-right:10px;}
#total{ font-weight:bold; font-size:1.3em; font-style:normal;}
td.nocolor{ background:#fff;}

table.table{width:100%;margin:0px;border-collapse: collapse;empty-cells: show;border-spacing:0px;border:1px solid #BEBEBE; background:#FFF;text-align:right;color:#555;}
table.table th, table.table td{padding:.7em .6em;font-size:11px;line-height:110%;border-right:1px solid #BEBEBE; border-bottom:1px solid #BEBEBE}
table.table th{ background-color:#f1f1f1}

/*------------- Forms */
label{ display:block; font-weight:bold; padding:7px 0;}
input{ padding:5px 3px 5px 3px; border:1px solid #D9D9D9; font:12px Arial, Helvetica, sans-serif; margin-right:6px;}
.validar{padding:0; display:block;}
.validar p{ padding:12px 10px 0;}
.validar .condiUso{ padding-right: 40px; font-size:.85em;}
.validar .condiUso label{ display:inline;}
.validar .condiUso input{ border:0; padding:0;}

/*------------- Botones */
#Main p.FormSubmit{ padding:0; display:block;}
.boton{font: bold 1em/100% Arial, helvetica, sans-serif;text-decoration: none;color: #FFF;border: 1px solid #ccc;background: url(../images/fondo-boton.jpg) 0 0 repeat-x #06AC3C;cursor: pointer;width:auto;height:40px;margin:0 15px 0 0;padding: 4px 20px 6px;_padding: 4px 0px 6px;float:left;}
.boton:hover, .botonComp:hover{text-decoration: none;color: #FFF; background: url(../images/fondo-boton-over.jpg) 0 0 repeat-x #06AC3C}
.boton:active {text-decoration: none;color: #FFF; background: url(../images/fondo-boton-active.jpg) 0 0 repeat-x #06AC3C;}
.btn-Pagar{ padding:3px 2px 3px 2px; text-align:center; width:100%; margin:2px 0 0 0;}
input.inac, input.inac:hover {background:#DDD;color:#CCC;cursor:default;}
.cancelar{ float:left; display:block; padding:12px 0 0;}

/*------------- Mensajes */
div.mens{margin-bottom: 10px; padding:10px 0 9px 0;border: 1px solid #EEE; font-weight:normal;font:1em Arial, Helvetica, sans-serif; width:100%; display:table; background: url(../images/icoAlertGran.gif) no-repeat 18px 10px #FFC;}
div.mens p{ padding:0; margin:0 0 0 0; line-height:120%;}
div.mens img { float:right; margin:10px 25px 10px 30px; padding:0; border:1px dashed #D9D9D9;}
div.mens ol { background:none;}
div.mens ul { margin:0 0 0 60px; padding:0;}
div.mens ul li { margin:0 0 8px 0; padding:0 0 0 12px; background:url(../images/bullet-flecha-azul.gif) 0 4px no-repeat;}
div.mens ol li { background:none;}
div.alert p, div.ok p, div.errorVal div{padding:10px 10px 20px 60px;}

div.mensok{margin-bottom: 10px; padding:10px 0 9px 0;border: 1px solid #EEE; font-weight:normal;font:1em Arial, Helvetica, sans-serif; width:100%; display:table; background: url(../images/icoOkGran.gif) 15px 15px no-repeat #F2F4F6;}
div.mensok p{ padding:10px 10px 10px 60px; margin:0; line-height:120%;}
div.mensok strong { color:#333;}
div.mensok strong.Tit {font-size:13px; text-transform:uppercase;}
div.mensok img { float:right; margin:10px 25px 10px 30px; padding:0; border:1px dashed #D9D9D9;}
div.mensok ol { background:none;}
div.mensok ul { margin:0 0 20px 60px; padding:0;}
div.mensok ul li { margin:0 0 8px 0; padding:0 0 0 12px; background:url(../images/bullet-flecha-azul.gif) 0 4px no-repeat;}
div.mensok ol li { background:none;}
div.mensok .destacado { background:#FFFFCC; border:1px dashed #DADADA; margin:0 0 14px 60px; padding:10px 18px; text-align:left; display: table; width:80%;}
div.mensok .destacado p { margin:0; padding:0; color:#000;}
div.mensok .destacado p.alert { margin:13px 0 0 2px; padding:0 0 8px 40px; background:url(../images/icoAlertGran.gif) 0 0 no-repeat; color:#333; text-align:justify;}

div.mensok .utilidades {background:#EBF2FE; border:1px dashed #77ACE2; margin:0 60px 24px 60px; padding:14px 18px; text-align:left; display: table; width:50%;}
div.mensok .utilidades ul { margin:0; padding:0;}
div.mensok .utilidades ul li { margin:0; padding:0; font:bold 12px Arial, Helvetica, sans-serif;}
div.mensok .utilidades ul li.info { margin:0 0 4px 0; padding:3px 0 3px 20px; background:url(../images/ico-info.gif) 0 2px no-repeat;}
div.mensok .utilidades ul li.print { margin:0 0 4px 0; padding:3px 0 3px 20px; background:url(../images/ico-print.gif) 0 2px no-repeat;}

div.errorVal{ border:1px solid #FF3900;}
div.errorVal h3{ color:#666; font-weight:bold; margin-top:10px;}
div.errorVal li{ color:#D93000;}
div.errorVal div{background-image:url(../images/icoErroGran.gif);}

div.mensError{background: url(../images/icoErroGran.gif) 18px 10px no-repeat #FFFFCC;}



/*------------- Base Celeste */
div.celeste {margin: 10px 0 20px 0; padding:10px; border: none; background: #EBF2FE; font-weight:normal; font:1em Arial, Helvetica, sans-serif;}
div.celeste td { color: #333;}

/*------------- Condiciones */
.condiciones {height:180px; overflow:scroll; overflow-x:hidden; margin:0 0 10px 0; padding:9px; border-top:2px solid #CCC; border-left:2px solid #CCC; border-right:1px solid #999; border-bottom:1px solid #999; background:#F7F7F7;}
.condiciones p {font:11px Arial, Helvetica, sans-serif; color:#666; text-align:justify; line-height:140%; margin-bottom:10px;}
.condiciones ul{ margin:5px 0 10px 0px;}
.condiciones ol{ margin:5px 0 10px 20px;}
.condiciones ol li{ background:none; padding:2px 0 2px 0px;}
.condiciones ul li{ background:url(../images/auxiliares-sprite.gif) no-repeat 15px -68px; padding:2px 0 2px 30px;}

/*------------- TOOLTIPS */
table td span.MenQue, .MenQue{ position: absolute; margin: -22em 0 0 36em;	padding-bottom: 1.1em; border: 1px solid #000; background: url(../images/auxiOculXpli.gif) no-repeat bottom left; border: 0; float:right;}
table td span.MenQue strong, .MenQue strong{position: relative;	display: block;	padding: 1em .7em .8em .6em; color: #333; background: #EBF2FE; border: 1px dashed #C0C0C0; border-bottom:none;}
table td span.MenQue strong em, .MenQue strong em{ font-weight: normal;	font-style: normal;}

table td span.MenQue02, .MenQue02{ position: absolute; margin: -8.8em 0 0 -14.5em;	padding-bottom: 1.1em; border: 1px solid #000; background: url(../images/auxiOculXpli02.gif) no-repeat bottom left; border: 0;}
html* table td span.MenQue02, .MenQue02{ position: absolute; margin: -9em 0 0 -14.5em; width:280px;}
table td span.MenQue02 strong, .MenQue02 strong{ position: relative; display: block; padding: 1em .7em .8em .6em; color: #333; background: #FFC; border: 1px solid #C0C0C0;	border-bottom:none;}
table td span.MenQue02 strong em, .MenQue02 strong em{ font-weight: normal;	font-style: normal;}

/*----------------- MENSAJE VALIDADOR */
span.error{	margin:3px 0 0; padding: 3px 0 3px 0; font:bold 12px Arial, Helvetica, sans-serif; color: #F30; clear: left; float:left; display:table; width:100%;}

/*------------- input */ 
form fieldset input{padding:4px 3px; font: normal 12px Arial, Helvetica, sans-serif; color: #333;border: 1px solid #ccc;}
form fieldset select {padding:3px; font: 12px Arial, Helvetica, sans-serif; color: #333; border: 1px solid #ccc; line-height:120%; float:left; margin-right:5px;}
form fieldset input.error, form fieldset select.error{border: 1px solid #FF3900; background-color:#FFC}
form fieldset .radio, form input.chk {margin:0 5px 0 0; padding:0; border:none;}
form fieldset .radioButt label{ font-weight:normal; padding:0; _padding:3px 0 0;}
.noBord{border: none; outline: 0;}
.noClear{display: inline; clear: none; margin:0; padding:0;}

form .subtitu { margin:30px 0 0 0; padding:0 0 10px 0; display: table; clear: both; height:20px;}
form .subtitu h2 { font:bold 12px Arial, Helvetica, sans-serif; color:#002464; float:left; margin: 0 10px 0 0;}
form .subtitu a { float:left; font: normal 12px Arial, Helvetica, sans-serif; margin:0 0 0 0;}

/*------------- formulario digipas */
.Block{ border: none; padding:10px 0; display:block; margin-bottom:10px;} /*border:1px solid #ccc;*/
.Resu{ border-right:none; border-left:none; text-align:right;} 
.Block label{ font-size:.95em; padding:5px 5px 8px 10px; margin:0; display:block; width:160px; float:left;}
.Block #digi{ float:left; margin:0 5px; width:60px;}
.Block p {padding:5px 10px 0;}
.Block .icon{ width:300px;}
.Block .icon img{ margin:8px 0 0;}
.Block .digi{ padding-left:70px; background:url(../images/auxiDigi.gif) no-repeat 0 0;}
.Block .CClave{ width:230px;}
/*-------------------------------------------------------------------------
							  Footer
-------------------------------------------------------------------------*/
/*------------- Texto Legal */
#Legal{ padding:0 0 10px; background:#fff;}

/*------------- Logos */
#FootLogBanc{width:170px; height:45px; display:block; float:left; text-indent:-999em; margin-top:5px; background-position:0 -40px}

/*------------- Info*/
#Footer address{ display:block; float:left; margin:0 0 0 10px; padding:10px 0 10px 10px; font-size:0.8em; font-style:normal}

.naturaFoot { display:block; float:right; margin:0; padding:15px 0px 15px 40px; width:270px; border-left:1px solid #DBDBDB; background:url(../images/auxiIconNatura.jpg) no-repeat 10px 8px;}
.naturaFoot strong{color:#00AA37}

/*-------------------------------------------------------------------------

/*-------------------------------------------------------------------------
							Auxiliares
-------------------------------------------------------------------------*/
.DownPDf{ background:url(../images/IcoPDF.gif) no-repeat 0 2px; padding:3px 0px 3px 23px;}
.out{background-repeat:no-repeat; background-position: 100% -49px; padding-right:1.2em}
.right {float: right;}
.left {float: left;}
.align-left {text-align: left;}
.align-right {text-align: right;}
.align-center {text-align:center;}
.justify {text-align:justify;}
.hide {display:none;}
.clear {clear: both;}
.bold {font-weight:bold;}
.italic {font-style:italic;}
img.centered {display: block;margin-left: auto;margin-right: auto;}
img.alignleft {float:left;margin:4px 10px 4px 0;}
img.alignright {float:right;margin:4px 0 4px 10px;}
.Cerrar{ display:block; font:11px Verdana, Arial, Helvetica, sans-serif; position:absolute; text-transform:none; right:0px; _right:10px; top:0;}
.Cerrar a{ padding:0 15px 0 0;}
.rojo { color:#FF0000;}
.pddMsj{ padding:6px 0 0 5px; color:#666; font-size:11px;}
.mbot{ margin-bottom:5px;}
.descPdf{ font-size:11px; color:#888; font-style:normal;}

/*------------- Anchos*/
.w2{width: 2%;}
.w4{width: 4%;}
.w5{width: 5%;}
.w10{width: 10%;}
.w15{width: 15%;}
.w20{width: 20%;}
.w30{width: 30%;}
.w35{width: 35%;}
.w40{width: 40%;}
.w50{width: 50%;}
.w60{width: 60%;}
.w70{width: 70%;}
.w80{width: 80%;}
.w90{width: 90%;}
.w100{width: 100%;}

/*------------- Margenes Altos*/
.h5 { margin-top:5px;}
.h10 { margin-top:10px;}
.h20 { margin-top:20px;}

.h10tot { margin-top:10px; display:table;}

.dataTable{margin: 1em;}
.separador td{border-bottom: 1px dotted #DBDBDB;}
.separador td p{font-size: 1em;line-height: 140%;}
.dataTable td{font-size: .75em;color: #666;padding: .3em;}
.dataTable td strong{color: #000;}