/* http://virtualnauta.com/ http://www.menucool.com http://cgnauta.blogspot.com.es/2011/06/aprendiendo-disenar-con-div-y-css-parte.html http://www.w3schools.com/cssref/pr_class_display.asp para flex y block tipos de elementos: http://www.um.es/docencia/barzana/IAGP/HTML1.html */ /* Referencia px --> em 1px ..> 0.08em 10px ..> 0.8em 12px ..> 0.96em 13px ..> 1.04em 14px ..> 1.12em 15px ..> 1.2em 16px ..> 1.28em 18px ..> 1.44em 2px ..> 0.16em 20px ..> 1.6em 25px ..> 2.0em 3px ..> 0.24em 30px ..> 2.4em 35px ..> 2.8em 4px ..> 0.32em 40px ..> 3.2em 5px ..> 0.40em 6px ..> 0.48em 60px ..> 4.8em 8px ..> 0.64em 320px ..> 25.6em En general un tipo de letra lo transformo como 10pt > 1.0em 18pt > 1.8em Documentos Direcciones Interactuadores Activos Cuentas Bancos FichaEco Asuntos Foro QA Ojo, cuando 2 reglas se superponen, gana la que está mas abajo de esta lista */ @media screen and (min-width:800px){ div #Menu1 { visibility:hidden; height:0px;} div #NavigationMenu { visibility: visible; } } @media screen and (max-width:801px){ div #Menu1 { visibility:visible; height: 4.00em;} div #NavigationMenu { visibility: hidden; height:0px;} } /*Fuentes*/ @font-face { font-family: 'pplou'; /*Nombre a usar*/ src: url('fonts/pplou.eot'); /*Para Explorer 9 en modo compatible*/ src: url('fonts/pplou.eot?#truco-explorer') format('embedded-opentype');/* Explores 6 a 8*/ src: url('fonts/pplou.woff') format('woff'); /*Navegadores Modernos*/ /*src: url('fonts/pplou.ttf') format('truetype'); Safari, Android, iOS*/ /*src: url('fonts/pplou.svg#MegalopolisExtraRegular') format('svg'); IOS versiones viejas (¡si meto esto no va! en Edge)*/ } /* ESTILOS HOJAS ----------------------------------------------------------*/ .style1 { width: 100%; background-color: #000000 /*Black*/; color: #FFFF00 /*Yellow*/;} .style2 { font-size: 0.8em; background-color: #000000 /*Black*/; color: #FFFF00 /*Yellow*/;} .style3 { text-align: right; background-color: #000000 /*Black*/; color: #FFFF00 /*Yellow*/;} .style4 { font-size: 0.64em; background-color: #000000 /*Black*/; color: #FFFF00 /*Yellow*/;} /* ----------------------------------------------- FORM ELEMENTS ¡Cuidado no se pegue con algo que haga nuevo! ------------------------------------------------*/ fieldset{ margin: 0.5em 0.0em 0.5em 0.0em; padding: 0.5em 1em 0.5em 1em; border: 0.08em solid #ccc /*grisclaro1*/; } /*----Cuando meta un fieldset en otro*/ fieldset fieldset { margin: 0em 0.0em; padding: 0.16em; border: 0.08em solid #ccc /*grisclaro1*/; } fieldset p { margin: 0.16em 0.96em 0.8em 0.8em; } .login, .register, .changePassword { width: auto; min-width:6.4em; max-width: 24em; } fieldset.login label, fieldset.register label, fieldset.changePassword label { display: block; } fieldset label.inline { display: inline; } legend { font-size: 0.8em; color: #808080 /*Gris4 gray*/; padding: 0.16em 0.32em 0.08em 0.32em; } input.textEntry, input.passwordEntry { width: 100%; border: 0.08em solid #ccc /*grisclaro1*/; } div.accountInfo { width: 42%; } .clear { clear: both; } .title { display: block; float: left; text-align: left; width: auto; } .loginDisplay { font-size: 1.1em; display: block; text-align: right; padding: 0.8em; color:#FFFFFF /*white*/; } .loginDisplay a:link { color:#FFFFFF /*white*/; } .loginDisplay a:visited { color: #FFFFFF /*white*/; } .loginDisplay a:hover { color: #FFFFFF /*white*/; } .failureNotification { color: #FF0000 /*Red5*/; font-size: 1.2em; } .bold { font-weight: bold; } .submitButton { text-align: right; padding-right: 0.8em; border-radius: 2.8em; -webkit-border-radius: 2.8em; -moz-border-radius: 2.8em; -o-border-radius: 2.8em; } .iconoShow { width: 1.28em; height: 1.28em; } .endSession { text-align: center; vertical-align: middle; background-color: #FFFFFF /*Blanco*/; border-color: #000080 /*AzulOscuro6*/; border-style: solid; margin-left: 30%; margin-right: 30%; } .endSession a:link { text-align: right; padding-right: 0.8em; } .floatright { float:right; margin-left: 0.8em; } .floatleft { float: left; margin-right: 0.8em; } /*http://www.cssblog.es/bloques-de-texto-encima-de-una-imagen/*/ div [id*="imgtxt"] { /*Añadido 29/10/2016*/ position: relative; width: 100%; /* for IE 6 */ } div [id*="imgtxt"] img { width: 100%; /* for IE 6 */ } /*Texto todas las posiciones*/ div [id*="imgtxt"] h2, div [id*="imgtxt"] p { /*Añadido 29/10/2016*/ position: absolute; width: 95%; } /*ai arriba izquierda*/ div [id*="imgtxt"][id*="ai"] h2, div [id*="imgtxt"][id*="ai"] p { /*Añadido 29/10/2016*/ top: 5%; left: 5%; } /*ai abajo izquierda*/ div [id*="imgtxt"][id*="bi"] h2, div [id*="imgtxt"][id*="bi"] p { /*Añadido 29/10/2016*/ top: 65%; left: 5%; } /*ai arriba derecha*/ div [id*="imgtxt"][id*="ad"] h2, div [id*="imgtxt"][id*="ad"] p { /*Añadido 29/10/2016*/ top: 5%; left: 60%; } /*ai abajo derecha*/ div [id*="imgtxt"][id*="bd"] h2, div [id*="imgtxt"][id*="bd"] p { /*Añadido 29/10/2016*/ top: 65%; left: 60%; } div [id*="imgtxt"] h2 { /*Añadido 29/10/2016*/ line-height: 1.85em; } div [id*="imgtxt"] p { /*Añadido 29/10/2016*/ line-height: 1.3em; font-size: 0.8em; } div [id*="imgtxt"] h2 span, div [id*="imgtxt"] p span { /*Añadido 29/10/2016*/ color: white; letter-spacing: 0.24em; background: rgb(0, 0, 160);/*Navegadores Antiguos*/ background: rgba(0, 0, 160, 0.2);/*para definir la transparencia, 0.0 100%*/ } div [id*="imgtxt"] h2 span { /*Añadido 29/10/2016*/ padding: 0.40em; } div [id*="imgtxt"] p span { /*Añadido 29/10/2016*/ padding: 0.00em; } div [id*="imgtxt"] h2 span.spacer, div [id*="imgtxt"] p span.spacer { padding: 0em 0.00em; background: rgb(0, 0, 160);/*Navegadores Antiguos*/ background: rgba(0, 0, 160, 0.2);/*para definir la transparencia, 0.0 100%*/ } /*------------------------- 3 COLUMNAS --------------------------*/ /*https://cgnauta.blogspot.com.es/2011/06/aprendiendo-disenar-con-div-y-css-parte.html*/ div [id*="container"] { margin-top: 3.2em; } div [id*="side"] { float: left; margin-left: 0.40em; margin-right: 0.40em;/**/ } div [id*="side"] img { width: 26em; } /*width: 90%*/ div [id*="left"] { max-width: 19em;/*width: 25%*/; border-width: thin; border-color: #4B6C9E; border-right-style: solid; padding-right: 0.8em ;/**/} div [id*="right"] { max-width: 25em;/*width: 30%*/; border-width: thin; border-color: #4B6C9E; border-left-style: solid; padding-left: 0.8em ;/**/} div [id*="main"] { width: auto;}/*39px*/ div [id*="main"] p, div [id*="main"] img { width: 24em; } .clear { clear: both;} /*Marcos para con textos con imagen-bordes*/ /*Para usar rayas en vez de imágenes de marcos, comentar la parte que tengo debajo, y descomentar la parte de arriba desde boder-width en id*=letf y right, que indica el tipo y color de los bordes, así como la separación entre columnas.*/ /* div [id*="side"] { padding-left: 24px; padding-right: 29px; padding-top: 12px; padding-bottom: 12px; background-image: url('../Images/Fondos/marco_top_left.png'), url('../Images/Fondos/marco_top_right.png'), url('../Images/Fondos/marco_bottom_left.png'), url('../Images/Fondos/marco_bottom_right.png'), url('../Images/Fondos/marco_top_center.png'), url('../Images/Fondos/marco_center_left.png'), url('../Images/Fondos/marco_center_right.png'), url('../Images/Fondos/marco_bottom_center.png'); background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, repeat-x, repeat-y, repeat-y, repeat-x; background-position: top left, top right, bottom left, bottom right, top center, center left, center right, bottom center; }*/ /*------------------------------------------------------------------------------------------*/ #banner { height: 10.08em; padding-top: 1.44em; background-color: #DD6B26 /*Naranja*/; } #search { color: #990000 /*RojoOscuro6*/; font-family: "Lucida Sans"; font-size: small; width: 20.32em; position: absolute; top: 9.20em; left: 43.6em; } #footer { text-align: center; background-color: #DD6B26 /*Naranja*/; } #ColUPCentroAyuda{ width: 52%; /*40.00em;*/ float: left; border-right-style: ridge; border-left-style: ridge; border-bottom-style: ridge; margin-left: 0.16em;} #ColUPDerechaAccesorios { width: 41.6%; /*32.80em;*/ float: right; /*thin, 380px*/ border-right-style: ridge; border-left-style: ridge; border-bottom-style: ridge; margin-right: 0.16em;} /*background properties*/ #ColUPCentroAyuda, #ColUPDerechaAccesorios { padding: 0.40em; z-index: 7; border-width: thin; border-color: #0000FF; border-radius: 0 0 0.40em 0.40em; -webkit-border-radius: 0 0 0.40em 0.40em; -moz-border-radius: 0 0 0.40em 0.40em; -o-border-radius: 0 0 0.40em 0.40em; /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#f4ffff+12,ccffff+88,3a4f63+100 */ background: rgb(204,255,255); /* Old browsers */ background: linear-gradient(45deg, rgba(244,255,255,1) 12%,rgba(204,255,255,1) 88%,rgba(58,79,99,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ background: -moz-linear-gradient(45deg, rgba(244,255,255,1) 12%,rgba(204,255,255,1) 88%,rgba(58,79,99,1) 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(45deg, rgba(244,255,255,1) 12%,rgba(204,255,255,1) 88%,rgba(58,79,99,1) 100%); /* Chrome10-25,Safari5.1-6 */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f4ffff', endColorstr='#3a4f63',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */ } /*--------------------------- APARTADO AYUDA ---------------------------*/ /*----Empleado para el panel de ayuda pnlAyuda----*/ .flotanteIzda { float: left; width: 90% } textarea[id*="tbxAyuda"] { font-size: 1.0em; font-family: Arial, Helvetica, sans-serif; text-align: justify; border-radius: 0.24em; -webkit-border-radius: 0.24em; -moz-border-radius: 0.24em; -o-border-radius: 0.24em; /*background-color: #FFFFFF /*Blanco*/;*/ color: #000000 /*Black*/; line-height: 1.2em; padding: 0.40em; margin: 0.8em 0.40em 0.40em 0.40em; width: 90.00%; /*36.00em;*/ height: 4.80em; float: left; } #imbMASAyuda {float:left;} table[id*="cal"] { margin: 0.40em 0.40em 0.40em 0.40em; } /*----------------- BOTONES -----------------*/ /*----Aspecto general----*/ /*---Tanto botones btn, como los de los grd---*/ input[id*="tbx"], input[id*="btn"], input[id*="Button"], input[id*="Upload"], table[id*="grd"] input { background-color: #D3D3D3 /*GrisClaroAzul2*/; border-radius: 0.40em; -webkit-border-radius: 0.40em; -moz-border-radius: 0.40em; -o-border-radius: 0.40em; } input[id*="tbx"]:hover, input[id*="btn"]:hover, input[id*="Button"]:hover, input[id*="Upload"]:hover, table[id*="grd"] input:hover { border: 0.16em outset #D3D3D3 /*GrisClaroAzul2*/; font-weight: 600; border-radius: 2.8em; -webkit-border-radius: 2.8em; -moz-border-radius: 2.8em; -o-border-radius: 2.8em; box-shadow: inset 0.16em 0.16em 0.8em #F3F3F3 /*GrisClaroClaroAzul1*/; } /*----particularización ACT GestorActivos----*/ /*--los hover son mas claros que los normales. Si es posible crear una regla de claridad, los quitaría*/ input[id*="btn"][id*="ActivoNombr"] { background-color: #CCFFFF; /*AzulCyan1*/ } input[id*="btn"][id*="Zonas"] { background-color: #FFCCCC; /*carne*/} input[id*="btn"][id*="SubZona"] { background-color: #FF99CC; /*Rosa*/} input[id*="btn"][id*="Servicio"] { background-color: #FFFFCC; } /*Amarillo apagado*/ input[id*="btn"][id*="Relaciones"] { background-color: #99CCFF; /*Azul cielo*/} input[id*="btn"][id*="TipoActivo"] { background-color: #DDBBFF; /*Violeta*/} input[id*="btn"][id*="ServicioTipo"]{ background-color: #A6A6FF; /*lila*/ } /*----------------------------------------------------------------*/ input[id*="btn"][id*="Cancel"] { background-color: #FFA07A; /*Light Salmon*/ } input[id*="btn"][id*="Confirm"] { background-color: #90EE90; /*LightGreen*/} input[id*="btn"][id*="Inicio"] { background-color: #FFFFB9; /*AmarilloClaro2*/} input[id*="btn"][id*="Busca"] { background-color: #ADD8E6; /*LightBlue*/} input[id*="btn"][id*="Crea"] { background-color: #A6FFFF; /*AzulCieloClaro2*/} input[id*="btn"][id*="Modif"] { background-color: #A6FFA6; /*VerdeLimaClaro2*/} input[id*="btn"][id*="Elimin"] { background-color: #E6CDCC; /*rojoClaro2*/} input[id*="btn"][id*="Ocult"] { background-color: #F7D1AC; /*naranjaClaro2*/} input[id*="btn"][id*="Muestra"] { background-color: #A6A6FF; /*lila*/ } input[id*="btn"][id*="AsignarDocumento"], input[id*="btn"][id*="AsignarInteractuador"], input[id*="btn"][id*="AsignarDirecc"]{ background-color: #FFFF9D; /*AmarilloClaro2*/} input[id*="btn"][id*="MantenDocumento"], input[id*="btn"][id*="MantenInteractuador"], input[id*="btn"][id*="MantenDirecc"] { background-color: #B7FFB7;/*VerdeClaro2*/ } input[id*="btn"][id*="DF2"] { width: 8.00em; } /*------------------------------------------------------------ prueba GestorFichaEcoVisits que funciona solo parcialmente ------------------------------------------------------------*/ div#pago { color: #FFFFFF /*white*/; font-size: 0.96em; padding: 2.4em; margin:auto; background:#4682B4 /*SteelBlue*/; /*width: 350px;*/ border:solid 0.8em #B0C4DE /*SteelBlue*/; border-radius: 0.40em; -webkit-border-radius: 0.40em; -moz-border-radius: 0.40em; -o-border-radius: 0.40em;} div#pago fieldset { border: none; } div#pago input { font-size: 0.96em; float: right; margin-right: 1.2em; /*width: 16.00em;*/ background: #FFFFFF /*white*/; border:solid 0.08em #B0C4DE /*SteelBlue*/; border-radius: 0.24em; -webkit-border-radius: 0.24em; -moz-border-radius: 0.24em; -o-border-radius: 0.24em;} div#pago ol li { line-height: 2.0em; list-style: none; } div#pago [required] { border:solid 0.08em #0000FF /* Azul5*/; } input:required { outline: 0.08em solid #FF0000 /*Red5*/; } /*--------------------------- FORMATOS COLUMNAS -----------------------------*/ /*----prueba GestorInteractuadorVisits que funciona solo parcialmente----*/ .dosColumnas { column-count: 2; -webkit-column-count: 2; -moz-column-count: 2; } .tresColumnas {column-count: 3; -webkit-column-count: 3; -moz-column-count: 3; } /* 50% - 50% 20% - 20% - 20% - 20% - 20% 20% -30% - 50% 30% -30% - 20% - 20% 16% - 16% - 16% - 16% - 16% - 16% */ .unSexto { float:left; width: 16%; } .unQuinto { float:left; width: 20%; } .unCuarto { float:left; width: 25%; } .unTercio { float:left; width: 33%; } .unMedio { float:left; width: 50%; } /*------------------------------------- GENERAL DEFAULTS ---------------------------------------*/ body { color: #696969 /*GrisOscuro4Azul*/ ;font-size: .80em; /*Cuando tenga texto en la página sin especificar*/ font-family: "Helvetica Neue", "Lucida Grande", "Segoe UI", Arial, Helvetica, Verdana, sans-serif; /*Cuando tenga texto en la página sin especificar*/ background: #b6b7bc /*GrisOscuro2Azul*/; margin: 0.0em; padding: 0.0em; } table { border-radius:0.32em; -webkit-border-radius:0.32em; -moz-border-radius:0.32em; -o-border-radius:0.32em; } tr:first-child th:first-child { border-top-left-radius:0.24em; -webkit-border-top-left-radius:0.24em; -moz-border-top-left-radius:0.24em; -o-border-top-left-radius:0.24em;} tr:first-child th:last-child { border-top-right-radius:0.24em; -webkit-border-top-right-radius:0.24em; -moz-border-top-right-radius:0.24em; -o-border-top-right-radius:0.24em;} tr:last-child td:first-child { border-bottom-left-radius:0.24em; -webkit-border-bottom-left-radius:0.24em; -moz-border-bottom-left-radius:0.24em; -o-border-bottom-left-radius:0.24em;} tr:last-child td:last-child { border-bottom-right-radius:0.24em; -webkit-border-bottom-right-radius:0.24em; -moz-border-bottom-right-radius:0.24em; -o-border-bottom-right-radius:0.24em; } /*---- representa un vínculo----*/ a:link, a:visited { color: #034AF3/*Azul2,9*/;} a:hover { color: #1d60ff/*Azul2,5*/; text-decoration: none; } a:active { color: #034AF3/*Azul2,9*/; } /* ----

representa un párrafo----*/ p { margin-bottom: 1.0em; text-align: justify; line-height: 1.6em; /*Alto de sección donde se escribe*/ } /*--se llama con

--*/ p.normal, li.normal, div.normal { /*Este lo usare para escribir textos*/ font-size:1.0em; font-family:"Arial","Cambria","serif"; text-align : justify; padding: 0.0em; border:none; margin-top: 0.0em; margin-right: 3.5em; margin-bottom:1.5em; margin-left: 1.5em; } /*--se llama con

--*/ p.txtnormalSinEspacios, li.txtnormalSinEspacios, div.txtnormalSinEspacios {/*Este para sitios ajustados*/ margin: 0.0em; margin-top: 0.0em; margin-right: 0.0em; margin-bottom: 0.0em; margin-left: 0.0em; font-size: 1.0em; font-family:"Arial","Calibri","sans-serif"; line-height: 1.2em; text-align: justify; padding: 0.0em; border:none; } table img { margin: 0.0em; border: 0.08em solid #000080; padding: 0.40em; overflow: scroll; max-width: 48.00em; max-height: 9.60em; } /*--------------------------- APARTADO ACCESORIOS ---------------------------*/ div span[id*="lblAyuda"], a[id*="btnAyuda"], a[id*="btnAyuda"]:link, a[id*="btnAyuda"]:visited, a[id*="btnAyuda"]:hover, a[id*="btnAyuda"]:active { color: #FF0000 /*Red5*/; line-height: 1.2em; text-align: justify; border-radius: 0.4em 0.4em 0.0em 0.0em; -webkit-border-radius: 0.4em 0.4em 0.0em 0.0em; -moz-border-radius: 0.4em 0.4em 0.0em 0.0em; -o-border-radius: 0.4em 0.4em 0.0em 0.0em; padding: 0.40em; z-index: 5; } div span[id*="lblAyuda"] { margin: 0.00em 0.40em 0.00em 0.40em; width: 95%; height: 4.80em; overflow: auto; } a[id*="btnAyuda"], a[id*="btnAyuda"]:link, a[id*="btnAyuda"]:visited, a[id*="btnAyuda"]:hover, a[id*="btnAyuda"]:active { text-decoration: none; position: fixed; bottom: -0.48em; left: 30%; border: thin inset #0000FF; width: 40%; margin: 1.20em 3.20em 0.48em 1.20em; background-color: rgb(255, 255, 204); /*Navegadores Antiguos*/ background-color: rgba(255, 255, 204, 0.7); /*para definir la transparencia, 0.0 100%*/ } a[id*="btnAyuda"]:hover { transform-origin:bottom center; -webkit-transform-origin:bottom center; -moz-transform-origin:bottom center; -o-transform-origin: bottom center; transform: scale(1.5); -webkit-transform: scale(1.5); -moz-transform: scale(1.5); -o-transform: scale(1.5); transition: 0.5s 0.5s; -webkit-transition: 0.5s 0.5s; -moz-transition: 0.5s 0.5s; -o-transition: 0.5s 0.5s; } /* HEADINGS ----------------------------------------------------------*/ h1, h2, h3, h4, h5 { color: #4B6C9E/*AzulNavyMedioGris3.5*/;/*----Que coincida con el color de .header----*/ font-size: 1.5em; font-style: normal; font-variant: normal; font-weight: 600; /*traido de Word, negrita*/ font-family: "Arial", "Cambria" , "serif"; text-transform: none; text-align: justify; margin-top: 0.0em; margin-right: 0.0em; margin-bottom: 0.0em; margin-left: 0.0em; line-height: 150%; page-break-after: avoid; } /*traido de Word*/ h1 { font-size: 1.8em; font-family: "pplou","Cambria","serif"; margin-top: 2.4em; margin-bottom: 0.0em; padding-bottom: 0.0em;} h2 { font-size: 1.1em; font-family: "pplou"; font-weight: 600; margin-top: 1.2em; margin-bottom: 1.8em; } h3 { font-size: 1.1em; margin-top: 1.0em; margin-bottom: 1.2em; } h4 { font-size: 1.1em; margin-top: 1.0em; margin-bottom: 1.2em; font-style: italic; font-weight: 100; } h5 { font-size: 1.0em; font-weight: 100; } /*Este para sitios ajustados*/ h1.txtnormalSinEspacios, h2.txtnormalSinEspacios, h3.txtnormalSinEspacios, h4.txtnormalSinEspacios, h5.txtnormalSinEspacios { margin: 0.0em; margin-top: 0.0em; margin-right: 0.0em; margin-bottom: 0.0em; margin-left: 0.0em; line-height: 1.2em; padding: 0.0em; border:none; } /*Neon, SobreRelieve, BajoRelieve 3D*/ h1.txtneon, h2.txtneon, h3.txtneon, h4.txtneon, h5.txtneon { text-shadow: 0 0 0 0.2em rgba(75, 108, 158, 0.2)} h1.txtbajorelieve, h2.txtbajorelieve, h3.txtbajorelieve, h4.txtbajorelieve, h5.txtbajorelieve { text-shadow: -0.08em -0.08em white, 0.08em 0.08em black;} h1.txtsobrerelieve, h2.txtsobrerelieve, h3.txtsobrerelieve, h4.txtsobrerelieve, h5.txtsobrerelieve{text-shadow: 0.08em 0.08em white, -0.08em -0.08em black;} h1.txt3D, h2.txt3D, h3.txt3D, h4.txt3D, h5.txt3D{ text-shadow: 0 0.08em 0 #ccc, 0 0.16em 0 #c9c9c9, 0 0.24em 0 #bbb, 0 0.32em 0 #b9b9b9, 0 0.40em 0 #aaa, 0 0.48em 0.08em rgba(0,0,0,0.1), 0 0 0.40em rgba(0,0,0,0.1), 0 0.08em 0.24em rgba(0,0,0,0.3), 0 0.24em 0.40em rgba(0,0,0,0.2), 0 0.40em 0.8em rgba(0,0,0,0.25), 0 0.8em 0.8em rgba(0,0,0,0.2), 0 1.60em 1.60em rgba(0,0,0,0.15);} h1.txtfire, h2.txtfire, h3.txtfire, h4.txtfire, h5.txtfire { text-shadow: 0.00em -0.08em 0.32em #ffffff, 0.00em -0.16em 0.8em yellow, 0.00em -0.80em 1.60em #ff8000, 0.00em -1.44em 3.20em #ff0000;} h1.txtfreeze, h2.txtfreeze, h3.txtfreeze, h4.txtfreeze, h5.txtfreeze { text-shadow: 0.00em -0.08em 0.32em #ffffff, 0.00em -0.16em 0.8em cyan, 0.00em --0.80em 1.60em #00d8ff, 0.00em -1.44em 3.20em #0a00ff;} /* this rule styles

and

tags that are the first child of the left and right table columns */ .rightColumn > h1, .rightColumn > h2, .leftColumn > h1, .leftColumn > h2 { background-color: #00FFFF; /*Aqua*/ margin-top: 0.0em; } /*---------------------------------- PRIMARY LAYOUT ELEMENTS ----------------------------------*/ /*Ancho del tablero que es la página web*/ .page { font-family: "pplou"; /*Quitar esto si quiero quitar por defecto el tipo de letra general.*/ width: 100%; max-width:76.80em; /*76.80em;*/ margin: 1.6em auto 0.0em auto; border: 0.08em solid #496077/*SteelBlue4*/; padding-bottom: 0.8em; /*Con esto el texto de la página no llega hasta el borde.*/ background-color: #FFFFFF/*Blanco*/; /*http://westciv.com/tools/radialgradients/index.html*/ background-image: -moz-radial-gradient(left bottom, ellipse farthest-side, rgba(204,255,255, 0.7), rgba(255, 255, 255, 0.5) ); background-image: -webkit-radial-gradient(left bottom, ellipse farthest-side, rgba(204,255,255, 0.7), rgba(255, 255, 255, 0.5) ); background-image: -o-radial-gradient(left bottom, ellipse farthest-side, rgba(204,255,255, 0.7), rgba(255, 255, 255, 0.5) ); background-image: -ms-radial-gradient(left bottom, ellipse farthest-side, rgba(204,255,255, 0.7), rgba(255, 255, 255, 0.5) ); background-image: radial-gradient(left bottom, ellipse farthest-side, rgba(204,255,255, 0.7), rgba(255, 255, 255, 0.5) ) } .header { position: relative; margin: 0.0em; padding: 0.0em; width: 100%; z-index: 9; background: #4B6C9E/*AzulNavyMedioGris3.5*/; /* Old browsers */ /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#4b6c9e+5,3a4f63+20,3a4f63+25,3a4f63+25,4b6c9e+35,4b6c9e+100 */ background: linear-gradient(45deg, #4b6c9e 5%,#3a4f63 20%,#3a4f63 25%,#3a4f63 25%,#4b6c9e 35%,#4b6c9e 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ background: -moz-linear-gradient(45deg, #4b6c9e 5%, #3a4f63 20%, #3a4f63 25%, #3a4f63 25%, #4b6c9e 35%, #4b6c9e 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(45deg, #4b6c9e 5%,#3a4f63 20%,#3a4f63 25%,#3a4f63 25%,#4b6c9e 35%,#4b6c9e 100%); /* Chrome10-25,Safari5.1-6 */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4b6c9e', endColorstr='#4b6c9e',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */ } .header h1 { color: #F9F9F9/*AzulClaroClaro1*/; font-size: 2em; font-weight: 700; line-height: 2em; margin: 0.0em; padding: 0.0em 0.0em 0.0em 1.6em; border: none; } .headerlog { position: relative; margin: 0.0em; padding: 0.0em; background: #C0C0C0/*Gris2*/; width: 100%; } .headerlog h1 { color: #F9F9F9/*AzulClaroClaro1*/; font-size: 2em; font-weight: 700; line-height: 2em; margin: 0.0em; padding: 0.0em 0.0em 0.0em 1.6em; border: none; } .main { margin-left: 0.64em;/*3.2em*/ margin-right: 0.64em; z-index: 5;} .footer { color: #4e5766/*SteelBlueGris4*/; text-align: center; line-height: normal; padding: 0.64em 0.0em 0.0em 0.0em; margin: 0.0em auto; z-index: 5; } .leftCol { min-height: 16.00em; width: 16.00em; padding: 0.48em 0.0em; margin: 0.96em 0.64em 0.64em 0.64em;} /*------------------- TAB MENU -------------------*/ div.hideSkiplink { width:100%; background: #3a4f63; /* Old browsers */ /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#3a4f63+0,3a4f63+65,4b6c9e+75,4b6c9e+80,3a4f63+95 */ background: linear-gradient(45deg, #3a4f63 0%,#3a4f63 70%,#4b6c9e 80%,#4b6c9e 85%,#3a4f63 90%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ background: -moz-linear-gradient(45deg, #3a4f63 0%,#3a4f63 70%,#4b6c9e 80%,#4b6c9e 85%,#3a4f63 90%); /* FF3.6-15 */ background: -webkit-linear-gradient(45deg, #3a4f63 0%,#3a4f63 70%,#4b6c9e 80%,#4b6c9e 85%,#3a4f63 90%); /* Chrome10-25,Safari5.1-6 */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3a4f63', endColorstr='#3a4f63',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */ } div.hideSkiplinklog { background-color: #808080; width: 100%; } div.menu { padding: 0.32em 0.0em 0.32em 0.64em; } div.menu ul { list-style: none; margin: 0.0em; padding: 0.0em; width: auto;} div.menu ul li a, div.menu ul li a:visited { color: #DDE4EC/*SteelBlueClaro1*/; text-decoration: none; display: block; line-height: 1.35em; border: 0.08em #4e667d solid; padding: 0.32em 1.6em; white-space: nowrap; background-color: #465c71 /*SteelBlueGris3.5*/;} div.menu ul li a:hover { color: #465c71 /*SteelBlueGris3.5*/; text-decoration: none; background-color: #BFCBD6/*SteelBlueClaro1.5*/;} div.menu ul li a:active { color: #CFDBE6/*SteelBlueClaro1*/; text-decoration: none; background-color: #465c71 /*SteelBlueGris3.5*/;} div.menulog { padding: 0.32em 0.0em 0.32em 0.64em; } div.menulog ul { list-style: none; margin: 0.0em; padding: 0.0em; width: auto;} div.menulog ul li a, div.menulog ul li a:visited { color: #DDE4EC/*SteelBlueClaro1*/; text-decoration: none; display: block; line-height: 1.35em; border: 0.08em #4e667d solid; padding: 0.32em 1.6em; white-space: nowrap; background-color: #939393;} div.menulog ul li a:hover { color: #465c71 /*SteelBlueGris3.5*/; text-decoration: none; background-color: #C1CED5;} div.menulog ul li a:active { color: #CFDBE6/*SteelBlueClaro1*/; text-decoration: none; background-color: #939393/*GrisAzul3*/;} /*------------------------- SECCIONES -------------------------*/ /* pag 51 cargar las secciones como bloques.*/ article, aside, nav, section { display: block; } /*ocultar los h1 de primer nivel de article, aside, nav, section */ article > h2, aside > h2,nav > h2,section > h2 { display: none; } /*------------------------------------------ FORMATO DE TABLAS GRIDVIEW (parte General y Security) ------------------------------------------*/ table[id*="grd"], fieldset[id*="Security"] table { font-size: 0.9em; margin: 0.40em; border: solid 0.08em #525252; border-collapse: collapse; font-family:"Arial","Cambria","serif"; /*Es redundante. Quitar si no tengo en page pplou comom primera*/ } /*----Encabezado de tablas grid*/ table[id*="grd"] th, fieldset[id*="Security"] table th { padding: 0.32em 0.16em; border-left: solid 0.08em #525252; } /*----Titulos de tablas grid*/ table[id*="grd"] th a, /*----No hace falta poner a:link ni a:visited, porque con a, ya pisa el formato hipervinculo----*/ fieldset[id*="Security"] table th a { color: #000000 /*Black*/; font-weight: bold; text-decoration: none; font-family: Calibri; } /*----Columnas de tablas grid*/ table[id*="grd"] td, fieldset[id*="Security"] table td { padding: 0.16em 0.16em 0.40em 0.16em; border: solid 0.08em Grey;} /*----Filas de tablas grid*/ table[id*="grd"] tr:nth-child(even), /*filas pares*/ fieldset[id*="Security"] table tr:nth-child(even) { } table[id*="grd"] tr:hover, /*----al pasar por encima de fila todas----*/ fieldset[id*="Security"] table tr:hover { font-weight: bold; transition: 1.0s; -webkit-transition: 1.0s; -moz-transition: 1.0s; -o-transition: 1.0s;} table[id*="grd"] tr:nth-child(even):hover, fieldset[id*="Security"] table tr:nth-child(even):hover {/*/*----al pasar por encima de filas pares----*/} /*--------------------------------------------------------------------- FORMATO DE TABLAS Generales personalizadas (personalizo el formato tablas Gridview) --------------------------------------------------------------------*/ table[id*="grd"] , table[id*="cal"] { background-color: #EFF3FB/*AzulClaroClaro1*/;} table[id*="grd"] th , table[id*="cal"] th {background: #507CD1/*AzulMarinoMedioGrisClaro3*/; } table[id*="grd"] th a , table[id*="cal"] th a {} table[id*="grd"] td , table[id*="cal"] td {} table[id*="grd"] tr:nth-child(even) , table[id*="cal"] tr:nth-child(even) { background: #E1F1F7/*AzulCieloMedioGrisClaro1*/; } table[id*="grd"] tr:hover , table[id*="cal"] tr:hover {} table[id*="grd"] tr:nth-child(even):hover , table[id*="cal"] tr:nth-child(even):hover {/*/*----al pasar por encima de filas pares----*/} table[id*="grd"] .pgr { background: #507DD1 /*AzulMarinoMedioGrisClaro3*/; } table[id*="grd"] .pgr table { background: #507DD1 /*AzulMarinoMedioGrisClaro3*/; margin: 0.24em 0; } table[id*="grd"] .pgr td { color: #00008B /*darkblue*/; font-weight: bold; line-height: 0.96em; border-width: 0; padding: 0.16em 0.48em; border-left: solid 0.08em #525252; } table[id*="grd"] .pgr a { color: #FFFFFF /*white*/; font-weight: normal; text-decoration: none; } /*pgr:hover*/ table[id*="grd"] .pgr:hover {background: #698FD8 /*AzulNavyMedioGris2.5*/;} table[id*="grd"] .pgr table:hover {background: #698FD8 /*AzulNavyMedioGris2.5*/;} table[id*="grd"] .pgr td:hover {} table[id*="grd"] .pgr a:hover { color: #FFFF00 /*Yellow*/; font-weight: bold; text-decoration: none; } /*--------------------------------------------------------------------- FORMATO DE TABLAS SECURITY (personalizo el formato tablas Gridview) --------------------------------------------------------------------*/ fieldset[id*="Security"] table {background-color: #F5F5F5; /*gris casi blanco*/} fieldset[id*="Security"] table th { background: #8F8F92/*GrisAzulClaro3*/ color: #FFFFFF; /*Blanco*/ } fieldset[id*="Security"] table th a {} fieldset[id*="Security"] table td {} fieldset[id*="Security"] table tr:nth-child(even){ background: #ECECEC/*GrisAzulClaro1*/ } fieldset[id*="Security"] table tr:hover {} fieldset[id*="Security"] table tr:nth-child(even):hover {}/*no necesario*/ fieldset[id*="Security"] table .pgr{ background: #8F9192/*GrisGrisClaro3*/ } fieldset[id*="Security"] table .pgr td { color: #236883/*TealGris4*/; font-weight: bold; line-height: 0.96em; border-width: 0; padding: 0.16em 0.48em; border-left: solid 0.08em #525252; } fieldset[id*="Security"] table .pgr table {margin: 0.24em 0; } fieldset[id*="Security"] table .pgr:hover{ background: #808080 /*Gris4 gray*/} fieldset[id*="Security"] table .pgr a { color: #FFFFFF /*white*/; font-weight: normal; text-decoration: none; } fieldset[id*="Security"] table .pgr a:hover{ font-weight: bold; text-decoration: none; color: red/*#454545; darkgris*/} /*Formato para columnas que hay que estrechar Meter en el gridview el nombre de esta clase*/ .cortaPalabra{ word-break:break-all; } /*----------------------------- ELEMENTOS DE BOTONERA -----------------------------*/ /*----div generales de botonera*/ fieldset[id*="Boton"] div {/*Elementos div*/ float: left; padding: 0.16em; overflow: hidden; } /*---- botones de botonera*/ fieldset[id*="Boton"] div input[id*="btn"] { width: 11.6em; display:block; } /*---- radiobutton de botonera*/ fieldset[id*="Boton"] div input[type=radio] {}/*circulo del radiobutton del formulario botones*/ /*---- cajita checkbox de botonera*/ fieldset[id*="Boton"] fieldset input[type=checkbox] { width: 1.04em; height: 1.04em; margin: 0.00em 0.24em 0.00em 0.24em; padding: 0.00em 0.00em 0.00em 0.00em; vertical-align: middle; overflow: hidden; display: inline; } /*---- texto del checkbox principal del formulario botones*/ fieldset[id*="Boton"] fieldset [for*="cbx"][for*="Mostrar"]{ font-size: 0.8em;} fieldset[id*="Boton"] h6 { margin: 0.0em; font-size: 1.1em; font-weight: normal;} /*---- texto particularizado ...con asignaciones... de checkbox del formulario botones*/ fieldset[id*="Boton"] fieldset [for*="cbx"][for*="Asign"][for*="Ocultas"], fieldset[id*="Boton"] fieldset [for*="cbx"][for*="Activos"], fieldset[id*="Boton"] fieldset [for*="cbx"][for*="Ocultos"], fieldset[id*="Boton"] fieldset [for*="cbx"][for*="Activas"], fieldset[id*="Boton"] fieldset [for*="cbx"][for*="Ocultas"]{ font-size: 0.7em; } fieldset[id*="Boton"] p { margin: 0.0em; line-height: 1.2em; padding: 0.0em 0.0em 0.0em 1em; border: none; font-size: 1.0em;} /*----etiquetas en el formulario botones incluso las de radiobutton y checkbox*/ fieldset[id*="Boton"] div label { padding-left: 0.40em; text-indent: -0.40em; } fieldset[id*="Boton"] div label:hover{ padding-left: 0.40em; text-indent: -0.40em; font-weight: bold; } /*---------------------- FORMATO FOCUS ------------------------*/ select:focus, input:focus, textarea:focus, a:focus, li:focus, table:focus, text:focus, fieldset:focus { /*---Tanto botones btn, como los de los grd---*/ /*como hover*/ border: medium outset #33CCFF; box-shadow: outset 0.08em 0.08em 0em #999; text-shadow: inset 0.08em 0.08em 0em #999; } /*---- caja del checkbox de Formulario*/ fieldset[id*="Formulario"] input[type=checkbox]:focus { width: 1.20em; height: 1.20em; margin: 0.00em 0.32em 0.00em 0.32em; box-shadow: 0.24em 0.24em #33CCFF ; } /*---- texto del checkbox de Formulario (nunca pilla foco*/ /*---- caja del radio de Formulario*/ fieldset[id*="Formulario"] input[type=radio]:focus { width: 1.20em; height: 1.20em; margin: 0.00em 0.32em 0.00em 0.32em; box-shadow: 0.24em 0.24em #33CCFF ; border-radius: 1.20em; } /*---- texto del radio de Formulario*/ /*---- texto del radio de Formulario (nunca pilla foco*/ /*---------------------------------- FORMATO DE FORMULARIO FORMULARIO ----------------------------------*/ /*----Formato de Formularios en general*/ fieldset[id*="Formulario"] Table { background-color: #FFFFFF/*Blanco*/;} /*---Formato de celdas th en fielset (fuera de formularios)*/ fieldset[id*="Formulario"] th { font-size: 0.8em; background-color: #ADD8E6; /*LightBlue*/ text-align: center;} /*Pruebas para usar formularios con fielset(id=Formulario), p(id=blq) donde hay labels y Textbox*/ fieldset[id*="Formulario"] p span {margin-right: 0.40em; Width: 8.00em; float:left;} fieldset[id*="Formulario"] p input {margin-right: 0.40em; Width: 11.20em;} fieldset[id*="Formulario"] p select[id*="ddl"] {margin-right: 0.40em; Width: 8.00em;} fieldset p[id*="blq"] { display: block;/*no admite flex (¿block y flex son lo mismo?)*/} fieldset p[id*="blq"] span, p[id*="blq"] input { display: inline-block;/*no admite flex (¿block y flex son lo mismo?)*/} /*Para formularios long Text (escripbo lt en el id)*/ fieldset[id*="Formulario"][id*="lt"] p { margin-bottom:1.2em;} fieldset[id*="Formulario"][id*="lt"] p span { Width: 16.00em;} /*----OBJETOS TEXTBOX----*/ input[id*="tbx"], table textarea[id*="tbx"], input[id*="FileUpload"], fieldset[id*="Formulario"] textarea[id*="tbx"] { /*---Tanto botones btn, como los de los grd---*/ background-color: #F0FEFF; /*LightBlue*/ border-radius: 0.24em; -webkit-border-radius: 0.24em; -moz-border-radius: 0.24em; -o-border-radius: 0.24em; } input[id*="tbx"]:hover, table textarea[id*="tbx"]:hover, input[id*="FileUpload"]:hover, fieldset[id*="Formulario"] textarea[id*="tbx"]:hover { border-radius: 0.8em ; -webkit-border-radius: 0.8em ; -moz-border-radius: 0.8em ; -o-border-radius: 0.8em ; background-color: #D7FBFF/*CyanClaroClaro1*/; font-weight: 400;} /*----OBJETOS DROPDOWNLIST----*/ select[id*="ddl"]{ /*---Tanto botones btn, como los de los grd---*/ background-color: #E8F1FF; /*LightViolet*/ border-radius: 0.24em 0 0 0.24em; -webkit-border-radius: 0.24em 0 0 0.24em; -moz-border-radius: 0.24em 0 0 0.24em; -o-border-radius: 0.24em 0 0 0.24em; } select[id*="ddl"]:hover { background-color: #D7E7FF/*AzulClaroClaro1*/; border-radius: 2.8em 0 0 2.8em; -webkit-border-radius: 2.8em 0 0 2.8em; -moz-border-radius: 2.8em 0 0 2.8em; -o-border-radius: 2.8em 0 0 2.8em; } /*----OBJETOS CHECKBOX----*/ /*---- cajita checkbox de Formulario*/ fieldset[id*="Formulario"] input[type=checkbox] { width: 1.04em; height: 1.04em; margin: 0.00em 0.40em 0.00em 0.40em; padding: 0.00em 0.00em 0.00em 0.00em; vertical-align: middle; overflow: hidden; display: inline; } fieldset[id*="Formulario"] input[type=checkbox]:hover { width: 1.36em; height: 1.36em; margin: 0.00em 0.24em 0.00em 0.24em; box-shadow: 0.24em 0.24em #000000 ;} /*---- texto del checkbox de Formulario*/ fieldset[id*="Formulario"] div [for*="cbx"] :hover { font-weight: 600;} /*----OBJETOS RADIO BUTTON----*/ /*---- cajita radio de Formulario*/ fieldset[id*="Formulario"] input[type=radio] { width: 1.04em; height: 1.04em; margin: 0.00em 0.40em 0.00em 0.40em; padding: 0.00em 0.00em 0.00em 0.00em; vertical-align: middle; overflow: hidden; display: inline; } fieldset[id*="Formulario"] input[type=radio]:hover { width: 1.36em; height: 1.36em; margin: 0.00em 0.24em 0.00em 0.24em; box-shadow: 0.24em 0.24em #000000; border-radius: 1.36em; } /*---- texto del radio de Formulario*/ fieldset[id*="Formulario"] div [for*="rbt"] div :hover { font-weight: 600;} /*----OBJETOS RANGO----*/ fieldset[id*="Formulario"] input[type=range] { margin: 0.00em 0.40em 0.00em 0.40em; padding: 0.00em 0.00em 0.00em 0.00em; vertical-align: middle; overflow: hidden; display: inline;} fieldset[id*="Formulario"] input[type=range]:hover { box-shadow: 0.24em 0.24em #000000; } /*---OBJETOS ADROTATOR---*/ a[id*="adr"] img { border: medium outset #CCFFFF /*Azul cielo*/; margin: 0.00em 0.40em 0.00em 0.40em; padding: 0.00em 0.00em 0.00em 0.00em; vertical-align: middle; overflow: hidden; display: inline; width: 100%; border-radius: 0.24em; -webkit-border-radius: 0.24em; -moz-border-radius: 0.24em; -o-border-radius: 0.24em; } a img:hover { box-shadow: 0.24em 0.24em #000000; } /*------------------------ FORMATO INACTIVOS -----------------------*/ select[id*="ddl"][disabled], input[id*="tbx"][disabled], table textarea[id*="tbx"][disabled], fieldset[id*="Formulario"] textarea[id*="tbx"][disabled] { border: thin outset #C0C0C0/*Gris2*/; color: #070128/*Azulnegro*/; font-weight: 100; background-color: azure; border-radius: 0em; -webkit-border-radius: 0em; -moz-border-radius: 0em; -o-border-radius: 0em; } /*---- cajita checkbox de Formulario (Funciona)*/ fieldset[id*="Formulario"] input[type=checkbox][disabled], fieldset[id*="Formulario"] input[type=radio][disabled] { width: 1.04em; height: 1.04em; margin: 0.00em 0.32em 0.00em 0.32em; padding: 0.00em 0.00em 0.00em 0.00em; vertical-align: middle; overflow: hidden; display: inline; box-shadow: 0.00em 0.00em ; } /*---- texto del checkbox de Formulario (No Funciona) porque el texto no se pone inactivo fieldset[id*="Formulario"] div [for*="cbx"][disabled] div, fieldset[id*="Formulario"] div [for*="cbx"][disabled] div :hover{ color: #FFCCFF/*rosa1 pink; font-weight: normal;} */ /*--------FIGURE------*/ /*Forma y Posición*/ figure { border: 0.24em solid #CCF; position: relative; width: 98%; margin-left: 0.00em; overflow:hidden;} figure img { width: 100%; } figure figcaption { position: absolute; bottom:0; left:0; width: 95%; color: white; font-size:1.3em; padding: 0.8em ; background-color: rgba(0,0,0,0.4) } /*Transformación ids con ascend*/ figure figcaption[id*="ascend"] { bottom: -4.40em; } /*Transición ids con ascend*/ figure:hover figcaption[id*="ascend"] { bottom: 0.00em; } figure:hover figcaption[id*="ascend"] { transition: 1s 0.5s; -webkit-transition: 1s 0.5s; -moz-transition: 1s 0.5s; -o-transition: 1s 0.5s; } /*El elemento que ponga como class="escala", se aumentará cuando lo deje pulsado ----------------------------------------------------------------------*/ /*Forma y Posición*/ /*Transformación*/ .escala { transform-origin: 0 0; -webkit-transform-origin: 0 0; -moz-transform-origin: 0 0; -o-transform-origin: 0 0; transform: scale(1); -webkit-transform: scale(1); -moz-transform: scale(1); -o-transform: scale(1); } /*Transición*/ .escala { transition: 2s; -webkit-transition: 2s; -moz-transition: 2s; -o-transition: 2s; } .escala:active { transform: scale(2); -webkit-transform: scale(2); -moz-transform: scale(2); -o-transform: scale(2); } .escala:active { transition: 2s; -webkit-transition: 2s; -moz-transition: 2s; -o-transition: 2s; } /*------------------------------------------- Particularizaciones por página ---------------------------------------------*/ /*----DOC Gestor Documentos----*/ /*----Formato de Formulario de Creación de documentosl*/ fieldset[id*="CargarArchivoFormulario"] Table { background-color: #DFFFDF/*VerdeClaro1*/;} fieldset[id*="CargarArchivoFormulario"] Table Table { padding: 0.00em; margin: 0.00em; border-width: 0.00em; border-spacing: 0.00em;} /*----FEC Ficha Eco----*/ fieldset[id*="checks"]{ background-color: #F9FBFB/*CyanCasiGrisClaro1*/;} fieldset[id*="checks"] table { border-style: inset outset outset inset; border-width: thin; } /*Fondo*/ /*Texto*/ /*Aquiler*/ label[for*="cbx"][for*="FEC"][for*="Alq"], fieldset[id*="FEC"][id*="Alq"], fieldset[id*="FEC"][id*="Alq"] table { Background-Color: #CCFFCC/*Verde1*/ ; } label[for*="cbx"][for*="FEC"][for*="Alq"], fieldset[id*="FEC"][id*="Alq"] legend { Color: #008080 /*AzulVerde8 Teal*/; font-size: 1.2em } /*Venta*/ label[for*="cbx"][for*="FEC"][for*="Ven"], fieldset[id*="FEC"][id*="Ven"] , fieldset[id*="FEC"][id*="Ven"] table { Background-Color: #FFCCCC/*carne*/ ; } label[for*="cbx"][for*="FEC"][for*="Ven"], fieldset[id*="FEC"][id*="Ven"] legend { Color: #990000/*RojoOscuro6*/ ; font-size: 1.2em } /*Servicio*/ label[for*="cbx"][for*="FEC"][for*="Ser"], fieldset[id*="FEC"][id*="Ser"], fieldset[id*="FEC"][id*="Ser"] table { Background-Color: #FFCCFF/*rosa1*/ ; } label[for*="cbx"][for*="FEC"][for*="Ser"], fieldset[id*="FEC"][id*="Ser"] legend { Color: #FF00FF/*rosa4 Magenta*/ ; font-size: 1.2em } /*prestamo*/ label[for*="cbx"][for*="FEC"][for*="Pre"], fieldset[id*="FEC"][id*="Pre"], fieldset[id*="FEC"][id*="Pre"] table { Background-Color: #FFFFCC/*Amarillo1*/ ; } label[for*="cbx"][for*="FEC"][for*="Pre"], fieldset[id*="FEC"][id*="Pre"] legend { Color: #CC9900/*Amarillo5*/; font-size: 1.2em } /*Trueque*/ label[for*="cbx"][for*="FEC"][for*="Tru"], fieldset[id*="FEC"][id*="Tru"], fieldset[id*="FEC"][id*="Tru"] table { Background-Color: #CCCCFF/*Morado1*/ ;} label[for*="cbx"][for*="FEC"][for*="Tru"], fieldset[id*="FEC"][id*="Tru"] legend { Color: #9900CC/*Morado4*/; font-size: 1.2em } /*Regalo*/ label[for*="cbx"][for*="FEC"][for*="Reg"], fieldset[id*="FEC"][id*="Reg"], fieldset[id*="FEC"][id*="Reg"] table { Background-Color: #99FF66/*Verde2.5*/ ;} label[for*="cbx"][for*="FEC"][for*="Reg"], fieldset[id*="FEC"][id*="Reg"] legend { Color: #006666; font-size: 1.2em } /*Busco*/ label[for*="cbx"][for*="FEC"][for*="Bus"], fieldset[id*="FEC"][id*="Bus"], fieldset[id*="FEC"][id*="Bus"] table { Background-Color: #CCFFFF/*AzulCyan1*/ ;} label[for*="cbx"][for*="FEC"][for*="Bus"], fieldset[id*="FEC"][id*="Bus"] legend { Color: #0000FF /* Azul5*/ ; font-size: 1.2em } /*Muestra*/ label[for*="cbx"][for*="FEC"][for*="Mue"], fieldset[id*="FEC"][id*="Mue"], fieldset[id*="FEC"][id*="Mue"] table { Background-Color: #FFFFFF /*white*/ ; } label[for*="cbx"][for*="FEC"][for*="Mue"], fieldset[id*="FEC"][id*="Mue"] legend { Color: #000000 /*Black*/ ; font-size: 1.2em } /*Fianza*/ label[for*="cbx"][for*="FEC"][for*="Fia"], fieldset[id*="FEC"][id*="Fia"], fieldset[id*="FEC"][id*="Fia"] table { Background-Color: #FFFFFF /*white*/ ; border-style: dotted; border-width: thin } label[for*="cbx"][for*="FEC"][for*="Fia"], fieldset[id*="FEC"][id*="Fia"] legend { Color: #008080 /*AzulVerde8 Teal*/; font-size: 1.2em } /*Aval*/ label[for*="cbx"][for*="FEC"][for*="Ava"], fieldset[id*="FEC"][id*="Ava"], fieldset[id*="FEC"][id*="Ava"] table { Background-Color: #FFFFFF /*white*/ ; border-style: dotted; border-width: thin } label[for*="cbx"][for*="FEC"][for*="Ava"], fieldset[id*="FEC"][id*="Ava"] legend { Color: #FF0000 /*Red5*/ ; font-size: 1.2em } /*Descuento*/ label[for*="cbx"][for*="FEC"][for*="Des"], fieldset[id*="FEC"][id*="Des"], fieldset[id*="FEC"][id*="Des"] table { Background-Color: #FFFFFF /*white*/ ; border-style: dotted; border-width: thin } label[for*="cbx"][for*="FEC"][for*="Des"], fieldset[id*="FEC"][id*="Des"] legend { Color: #008000 /*Verde7 Green*/; font-size: 1.2em } /*Totales*/ label[for*="cbx"][for*="FEC"][for*="Tot"], fieldset[id*="FEC"][id*="Tot"], fieldset[id*="FEC"][id*="Tot"] table { Background-Color: #FFFFFF /*white*/ ; border-style: dotted; border-width: thin } label[for*="cbx"][for*="FEC"][for*="Tot"], fieldset[id*="FEC"][id*="Tot"] legend { Color: #000000 /*Black*/ ; font-size: 1.2em } /*Transporte*/ label[for*="cbx"][for*="FEC"][for*="Tra"], fieldset[id*="FEC"][id*="Tra"], fieldset[id*="FEC"][id*="Tra"] table { Background-Color: #FFFFFF /*white*/ ; border-style: dotted; border-width: thin } label[for*="cbx"][for*="FEC"][for*="Tra"], fieldset[id*="FEC"][id*="Tra"] legend { Color: #0000FF /* Azul5*/ ; font-size: 1.2em } /*Manipulación*/ label[for*="cbx"][for*="FEC"][for*="Man"], fieldset[id*="FEC"][id*="Man"], fieldset[id*="FEC"][id*="Man"] table { Background-Color: #FFFFFF /*white*/ ; border-style: dotted; border-width: thin } label[for*="cbx"][for*="FEC"][for*="Man"], fieldset[id*="FEC"][id*="Man"] legend { Color: #660066 /*Morado6*/; font-size: 1.2em } /*Devolución*/ label[for*="cbx"][for*="FEC"][for*="Dev"], fieldset[id*="FEC"][id*="Dev"], fieldset[id*="FEC"][id*="Dev"] table { Background-Color: #FFFFFF /*white*/ ; border-style: dotted; border-width: thin } label[for*="cbx"][for*="FEC"][for*="Dev"], fieldset[id*="FEC"][id*="Dev"] legend { Color:#3333CC ; font-size: 1.2em } /*MarcaTodo*/ label[for*="cbx"][for*="FEC"][for*="All"], fieldset[id*="FEC"][id*="All"], fieldset[id*="FEC"][id*="All"] table { Background-Color: #FFFFFF /*white*/ ; border-style: dotted; border-width: thin} label[for*="cbx"][for*="FEC"][for*="All"], fieldset[id*="FEC"][id*="All"] legend { Color: #000000 /*Black*/ ; font-size: 1.2em } /*ParametroTabla*/ label[for*="cbx"][for*="FET"][for*="TablaParametroTabla"], fieldset[id*="FET"][id*="TablaParametroTabla"], fieldset[id*="FET"][id*="TablaParametroTabla"] table { Background-Color: #99CCFF/*AzulCielo2*/ ; } label[for*="cbx"][for*="FET"][for*="TablaParametroTabla"], fieldset[id*="FET"][id*="TablaParametroTabla"] legend { Color: #000000 /*Black*/ ; font-size: 1.2em } /*FQA*/ label[for*="cbx"][for*="FQA"], fieldset[id*="FQA"], fieldset[id*="FQA"] table { Background-Color: #EAFFEA/*VerdeClaroClaro1*/ ; } label[for*="cbx"][for*="FET"][for*="TablaParametroTabla"] , fieldset[id*="FET"][id*="TablaParametroTabla"] legend { Color: #000000 /*Black*/ ; font-size: 1.2em } /*TablaComentarios*/ label[for*="cbx"][for*="TCM"][for*="TablaComentarios"], fieldset[id*="TCM"][id*="TablaComentarios"], fieldset[id*="TCM"][id*="TablaComentarios"] table { Background-Color: #FFFFE8/*AmarilloClaroClaro1*/ ; } label[for*="cbx"][for*="TCM"][for*="TablaComentarios"] , fieldset[id*="TCM"][id*="TablaComentarios"] legend { Color: #000000 /*Black*/ ; font-size: 1.2em } /*-------------------------------------- Paginas Administración de permisos ---------------------------------------*/ /*AccessRuleSummary*/ .treeview table img { border: 0.0em solid #FFFFFF /*Blanco*/; } .treeview p { vertical-align: middle; } /*-------------------------------------- Pagina Default2 usuarios registrados ---------------------------------------*/ /*carouselCodigoDuro*/ #wrapperCarouselCodigoDuro { /* width: 100%; */width: 16.40em; /* height: 8.00em; height: 8em;*/height: 2.00em; perspective: 90.00em; -webkit-perspective: 90.00em; transform: scale(0.7); -webkit-transform: scale(0.7); -moz-transform: scale(0.7); -o-transform: scale(0.7); margin: 0 auto; background-color: rgba(204,255,255, 0.7); overflow: hidden; border: 0.08em solid #4B6C9E; } #wrapperCarouselCodigoDuro:hover { width: 80%; height: 8em; transform: scale(1); -webkit-transform: scale(1); -moz-transform: scale(1); -o-transform: scale(1); transition: 1.0s 0.5s; -webkit-transition: 1.0s 0.5s; -moz-transition: 1.0s 0.5s; -o-transition: 1.0s 0.5s; } #listaCarouselCodigoDuro { width: 16.40em; height: 12.00em; margin: 0 auto; /*list-style: none;*/ /*transform-style: preserve-3d;*/ -webkit-transform-style: preserve-3d; -webkit-animation: CarousselCodigoDuro 40s infinite linear; position: relative; top: 20%; } /*div del carruselCodigoDuro*/ .ElementosCarouselCodigoDuro { position:absolute; height: 4.80em; width: 17.40em; text-align: center; color:#FFF; background-color: rgba(70, 92, 113, 0.70); } .ElementosCarouselCodigoDuro img { height: 6.40em; } .ElementosCarouselCodigoDuro a { position: absolute; width: 95%; top: 40%; left: 5%;line-height: 1.3em; font-size: 1.0em; color: White; } @-webkit-keyframes CarousselCodigoDuro { from { -webkit-transform: rotateY(0); } to { -webkit-transform: rotateY(-360deg); } } #listaCarouselCodigoDuro > .objetoCarouselCodigoDuro1{ -webkit-transform:rotateY(0deg) translateZ(21.00em); } #listaCarouselCodigoDuro > .objetoCarouselCodigoDuro2{-webkit-transform: rotateY(45deg) translateZ(21.00em); } #listaCarouselCodigoDuro > .objetoCarouselCodigoDuro3{ -webkit-transform: rotateY(90deg) translateZ(21.00em); } #listaCarouselCodigoDuro > .objetoCarouselCodigoDuro4{ -webkit-transform: rotateY(135deg) translateZ(21.00em); } #listaCarouselCodigoDuro > .objetoCarouselCodigoDuro5{ -webkit-transform: rotateY(180deg) translateZ(21.00em); } #listaCarouselCodigoDuro > .objetoCarouselCodigoDuro6{ -webkit-transform: rotateY(225deg) translateZ(21.00em);} #listaCarouselCodigoDuro > .objetoCarouselCodigoDuro7{ -webkit-transform: rotateY(270deg) translateZ(21.00em); } #listaCarouselCodigoDuro > .objetoCarouselCodigoDuro8{ -webkit-transform: rotateY(315deg) translateZ(21.00em); } /*---------------------------------------------------------------------------------------------------- PRUEBAS - PRUEBAS - PRUEBAS - PRUEBAS - PRUEBAS - PRUEBAS - PRUEBAS - PRUEBAS - PRUEBAS - PRUEBAS - PRUEBAS - PRUEBAS - PRUEBAS - PRUEBAS - PRUEBAS - PRUEBAS - PRUEBAS - PRUEBAS - PRUEBAS - PRUEBAS - ------------------------------------------------------------- pruebas transformaciones https://desandro.github.io/3dtransforms/docs/introduction.html -------------------------------------------------------------- ------------------------------------------------------------------------------------------------------*/ /*-webkit--moz--o-*/ /*Forma y Posición*//*Transformación*//*Transición*//*Animación*/ /*-------------------------------------- GestorInteractuadorVisits --------------------------------------*/ /*Ejemplo de marco con 3 dibujos que se abaten como una puerta por el medio Nota: wrapper e inner son dos clases que se usan para un objeto muy específico y no tiene sentido que sean clases, pues se podrían nombrar en otros sitio provocando conflictos. Ojo con esto. */ /*Forma y Posición*/ .wrapper { margin: 4em auto;; width: 15em; background-color: lightyellow; overflow: hidden; border: 0.48em solid #CCF;} .inner { background-color:antiquewhite; } .inner figure {box-shadow: -0.48em 0.48em 0.16em -0.24em rgba(100,100,100,0.1); display: inline-block; width: 11em; padding: 1em; margin: 1em; background: rgba(204, 255, 255, 0.71); border: 0.08em solid rgba(250,200,200,.5); } .inner figcaption { text-align: center; margin: 0.5em 0; font-family: pplou, sans-serif; font-weight: bold; color: rgba(152, 22, 22, 0.87); background-color: rgba(255,255,255,0.0); } .inner img { display: block; height: auto; max-width: 100%; margin: 0 auto; -webkit-filter: sepia(75%); } /*Transformación*/ .wrapper { transform:perspective(40.00em); -webkit-transform:perspective(40.00em); -moz-transform:perspective(40.00em); -o-transform:perspective(40.00em); transform-origin: 100% 50%; -webkit-transform-origin: 100% 50%; -moz-transform-origin: 100% 50%; -o-transform-origin: 100% 50%; } .inner { transform: rotateY(40deg);} /*Transición*/ .wrapper:hover .inner { transform: rotate(0deg); -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); } .inner { transition: 0.3s; -webkit-transition: 0.3s; -moz-transition: 0.3s; -o-transition: 0.3s; } /*Ejemplo contenedorDivertido Prueba de contenedor de texto en el que los distintos objetos aparecen y desaparecen, o cambian de tamaño según se pase el ratón por ellos*/ /*Forma y Posición*/ #contenedorDivertido { width: 24.00em; background: gray; padding: 0.8em ; text-align: center;} /*Transformación*/ #contenedorDivertido h1, #contenedorDivertido p{opacity: 1;} #contenedorDivertido a {color:white; background-color:red; font-size:1em;} #contenedorDivertido:target { border: 0.16em solid red; background-color: rgba(0, 0, 255, 0.54);} /*Transición*/ #contenedorDivertido:hover h1 { opacity: 0; } #contenedorDivertido:hover p { opacity:0;} /*duración-cuándo*/ #contenedorDivertido a:hover { color: yellow; background-color:green; font-size:3em;} #contenedorDivertido:target { transition: 5s; -webkit-transition: 5s; -moz-transition: 5s; -o-transition: 5s; } #contenedorDivertido h1 { transition: 2s; -webkit-transition: 2s; -moz-transition: 2s; -o-transition: 2s;} #contenedorDivertido p { transition:1s 1.5s;} /*duración-cuándo*/ #contenedorDivertido a { transition: 0.1s; -webkit-transition: 0.1s; -moz-transition: 0.1s; -o-transition: 0.1s;} /*si solo pongo esta va y vuelve al tiempo*/ #contenedorDivertido a:hover { transition: 2s; -webkit-transition: 2s; -moz-transition: 2s; -o-transition: 2s;}/*si solo pongo esta vuelve al tiempo*/ /*Ejemplo mario p325 este ejemplo va mal en lo que se refiere a los botones, pero el sprite en movimiento funciona mas o menos. Cambio la clase .caja por id=animation para que no se solape accidentalmente. ----------------*/ #animacion { width: 6.08em; height: 10.48em; background-image: url('../Images/Sprites/mario.png'); /*imagen de sprite*/ animation: mario 2s steps(16,end) 3; -webkit-animation: mario 2s steps(16,end) 3; -moz-animation: mario 2s steps(16,end) infinite; -o-animation: mario 2s steps(16,end) infinite; } /*1366 para 17*/ @keyframes mario { from { background-position: 0.00em;} to {background-position: -104.48em;} } @-webkit-keyframes mario { from { background-position: 0.00em;} to {background-position: -104.48em;} } @-moz-keyframes mario { from { background-position: 0.00em;} to {background-position: -104.48em;} } @-o-keyframes mario { from { background-position: 0.00em;} to {background-position: -104.48em;} } /* bloque div que se desplaza por la pantalla cuando se pulsa un hipervínculo. ------------------------------*/ /*Forma y Posición*/ #objeto1 { width: 32.00em;} /*Transformación*/ #objeto1 { /*estado inical*/ transform-origin: 0 0 ; -webkit-transform-origin: 0 0 ; -moz-transform-origin: 0 0 ; -o-transform-origin: 0 0 ; transform: translate(0.00em, 0.00em); -webkit-transform: translate(0.00em, 0.00em); -moz-transform: translate(0.00em, 0.00em); -o-transform: translate(0.00em, 0.00em); } #objeto1 { transition: 2s; -webkit-transition: 2s; -moz-transition: 2s; -o-transition: 2s;} /*Transición*/ /*estado final*/ #objeto1:target { transform: translate(12.00em, -12.00em); -webkit-transform: translate(12.00em, -12.00em); -moz-transform: translate(12.00em, -12.00em); -o-transform: translate(12.00em, -12.00em);} #objeto1:target { transition: 2s; -webkit-transition: 2s; -moz-transition: 2s; -o-transition: 2s; } /*A los objetos con clase="bordeRojo" se les pone un borde y se cambia su color al pasar por encima de ellos. -------------------------------------------------------------------------------------------------------------*/ .bordeRojo { border: 0.40em solid transparent; } .bordeRojo:hover { border: 0.40em solid red; transition: 2s ease-in; -webkit-transition: 2s ease-in; -moz-transition: 2s ease-in; -o-transition: 2s ease-in;} /*Elementos que han de saltar el reloj cuando se pulsan funciona un poco mal -----------------------------------------------------*/ .menu a:focus, input[id*="LoginButton"]:active, .loginDisplay a:active { cursor:wait;} /*Animación prueba 318 ---------------------*/ /*Libreto o guión de la animación @keyframes --------------------------------------------*/ @keyframes vaiven /*nombre para la animación*/ { 0%, 100% { transform:rotate(0deg) ; }/*estado inicial al 0% y final, porque so iguales*/ 20% { transform:rotate(270deg); } } @-webkit-keyframes vaiven /*nombre para la animación*/ { 0% { -webkit-transform:rotate(0deg); }/*estado inicial al 0%*/ 20% { -webkit-transform:rotate(270deg); } 100% { -webkit-transform:rotate(0deg) ;}/*estado final al 100%*/ } @-moz-keyframes vaiven /*nombre para la animación*/ { 0% { -moz-transform:rotate(0deg); }/*estado inicial al 0%*/ 20% { -moz-transform:rotate(270deg); } 100% { -moz-transform:rotate(0deg) ;}/*estado final al 100%*/ } @-o-keyframes vaiven /*nombre para la animación*/ { 0% { -o-transform:rotate(0deg);}/*estado inicial al 0%*/ 20% { -o-transform:rotate(270deg); } 100% { -o-transform:rotate(0deg) ;}/*estado final al 100%*/ } /*Aplicación de libreto a elementos html junto con animation-name*/ #pnlINTBotones, #lblPSFPermiso {/*id de un objeto*/ animation-name:vaiven; -webkit-animation-name:vaiven; -moz-animation-name:vaiven; -o-animation-name:vaiven; /*nombre de la animación definida*/ animation-duration: 3s; -webkit-animation-duration: 3s; -moz-animation-duration: 3s; -o-animation-duration: 3s; /*de 0% al 100%*/ animation-iteration-count: 1; -webkit-animation-iteration-count: 2; -moz-animation-iteration-count: 3; -o-animation-iteration-count: 4; /*animation-direction:alternate; -webkit-animation-direction:alternate; -moz-animation-direction:alternate; -o-animation-direction:alternate; */ } /*Ejemplo rotación animación p326*/ .rotacion { position: absolute; top: 72.00em; left: 36.00em; color: red; font-size: 4.00em; animation: rotar 60s steps(60, end); -webkit-animation: rotar 60s steps(60, end);-moz-animation: rotar 60s steps(60, end);-o-animation: rotar 60s steps(60, end); } @keyframes rotar { to { transform: rotate(360deg); } } @-webkit-keyframes rotar { to { transform: rotate(360deg); } } @-moz-keyframes rotar { to { transform: rotate(360deg); } } @-o-keyframes rotar{ to { transform: rotate(360deg); } } /*carousel2*/ #Menu1 { width: 16.00em; -webkit-perspective: 90.00em; list-style: none; /*ajustes bonito*/ background-color: #3a4f63; /*height: 4.00em;*/ width: 22%; width: 16.00em; /*100% left de li = 39%*/ } #Menu1 > ul { /**/ width: 16.00em; height: 16.00em; margin: 0 auto; -webkit-transform-style: preserve-3d; animation: Caroussel1 infinite 30s linear; -webkit-animation: Caroussel2 30s infinite linear; list-style: none; /*ajustes bonito*/ background-color:rgba(255, 255, 0, 0.7); height: 0.00em; vertical-align:central; top:50%; } /*div del carrusel*/ #Menu1 > ul >li[class*="static"] { position:absolute; /*height: 16.00em;*/ width: 10.00em; text-align: center; color:#FFF; background-color: rgba(204, 255, 255, 0.77); height: 2.10em; /*ajustes bonito*/ vertical-align:central; top:50%; backface-visibility: visible; -webkit-backface-visibility: visible; } /*@-webkit-keyframes Caroussel2 { from { -webkit-transform: rotateX(0); } to { -webkit-transform: rotateX(-360deg); } }*/ @-webkit-keyframes Caroussel2 { from { -webkit-transform: rotatey(0deg) rotateX(0); } to { -webkit-transform: rotatey(0deg) rotateX(360deg); } } @keyframes Caroussel1 { 0% {transform: translateX(130px); } 50% { transform: translateX(-650px); } 100% {transform: translateX(130px); } } #Menu1 > ul > li:nth-child(1) { transform: translateX(0px); -webkit-transform: rotateX(0deg) translateZ(1.9em) translateY(-1.1em);} #Menu1 > ul > li:nth-child(2) { transform: translateX(130px) translateY(-2.1em); -webkit-transform: rotateX(60deg) translateZ(4.6em) translateY(-1.6em);} #Menu1 > ul > li:nth-child(3) { transform: translateX(260px) translateY(-4.2em); -webkit-transform: rotateX(120deg) translateZ(6.4em) translateY(2.6em);} #Menu1 > ul > li:nth-child(4) { transform: translateX(390px) translateY(-6.3em); -webkit-transform: rotateX(180deg) translateZ(1.9em) translateY(7.3em);} #Menu1 > ul > li:nth-child(5) { transform: translateX(520px) translateY(-8.4em); -webkit-transform: rotateX(240deg) translateZ(-6.3em) translateY(4.7em);} #Menu1 > ul > li:nth-child(6) { transform: translateX(650px) translateY(-10.5em); -webkit-transform: rotateX(300deg) translateZ(-8.1em) translateY(-5.8em);} /* #Menu1 > ul > li:nth-child(7) { -webkit-transform: rotateY(270deg) translateZ(1.90em) translateY(-1.1em);} #Menu1 > ul > li:nth-child(8) { -webkit-transform: rotateY(315deg) translateZ(1.90em) translateY(-1.1em);}*/