1 HTML {2 font-size:80% !important;3 }4 5 6 /* 7 8 OCU Styles Portlet 9 v0.7 | 20090125 10 v0.8 | 20110203 - Con las actualizaciones de la version "OCU Styles Portlet v0.13 | 20101105" 11 v0.9 | 20110225 - Ajuste de estilos - Tablas 12 v0.10 | 20110527 - Con las actualizaciones de la version "OCU Styles Portlet v0.14 | 20110310" 13 14 TOC:15 16 $2 - subMainContent (Equivale al $3.2.2 de Aplication styles)17 18 */ 19 20 /*------------------------------------------------------------------------------21 $2 - subMainContent22 ------------------------------------------------------------------------------*/23 /* Contenedor general */24 #subMainContent {25 width: auto;26 margin: 0 0 0 0;27 /* Mostrar en caso de que no se muestre un espacio alrededor del portlet 28 padding: 0 0 0 0; */29 /* Mostrar en caso de que se muestre un espacio alrededor del portlet*/30 font-size: 0.75em;31 padding: 0.5em!important;32 padding-bottom: 1.6em!important;33 }34 /* Define las propiedades generales de las im?genes que se encuentran dentro del Contenedor general */35 #subMainContent IMG {36 border: 0; /* Posibilidad de colocar en uxxi_portal.css */37 margin-right: 0.8em;38 }39 #subMainContent IMG.imgIzq {40 float: left;41 }42 #subMainContent IMG.imgDer {43 float: right;44 }45 #subMainContent IMG.imgCent {46 float: center;47 }48 49 /* Define los encabezados que se encuentran dentro del Contenedor general */50 #subMainContent H2 {51 font-size: 1.4em;52 margin-top: 1.2em;53 background-color: transparent;54 }55 #subMainContent H3 {56 Font-Size: 1.2em;57 margin-top: 1.2em;58 margin-left: 0;59 }60 #subMainContent H4 {61 font-size: 1.1em;62 background: none!important;63 }64 65 #p93_166068_93_166044_166044 #subMainContent H2, #p93_166068_93_166044_166044 #subMainContent H3, #p93_166066_93_166045_166045 #subMainContent H2, #p93_166066_93_166045_166045 #subMainContent H3 {66 display: none;67 }68 69 #p93_230043_93_166045_166045 #subMainContent H2, #p93_230043_93_166045_166045 #subMainContent H3, #p93_166066_93_166046_166046 #subMainContent H2, #p93_166066_93_166046_166046 #subMainContent H3 {70 display: none;71 }72 73 74 /* Define la clase .oculto que permite ocultar un texto, un encabezado, etc. */75 #subMainContent .oculto {76 DISPLAY: none;77 }78 /* Define las propiedades de la clase .data que se puede utilizar en los campos de un formulario */79 #subMainContent P SPAN.dataout {80 font-weight: normal;81 }82 /* Define las propiedades de la clase .datab que se puede utilizar en los campos de un formulario */83 #subMainContent P SPAN.data, #subMainContent P SPAN.datab {84 font-weight: normal;85 line-height: 1.7em;86 border: 1px solid transparent;87 }88 /* searchBox */89 /* Contenedor de la b?squeda general */90 #subMainContent .searchBox {91 width: auto!important;92 height: auto;93 background: url(/portlets/images/base_rayas_big.gif);94 padding: 0.9em!important;95 border-bottom: 1px solid #c4c4c4;96 }97 #subMainContent .searchBox h2, .searchBox h2 {98 border: none;99 background-color: transparent!important;100 }101 #subMainContent .searchBox LABEL, .searchBox LABEL {102 margin-left: 0.9em;103 font-weight: normal;104 }105 #subMainContent .searchBox FORM p, .searchBox FORM p {106 font-weight: normal;107 margin: 1em 0 0.6em 0;108 padding: 0.2em 0 0 0;109 }110 /* searchBoxAdmin */111 /* Contenedor de la b?squeda para un administrador */112 #subMainContent .searchBoxAdmin {113 width: auto!important;114 height: auto;115 background: url(/portlets/images/base_rayas_big.gif);116 padding: 0.9em!important;117 border-bottom: 1px solid #c4c4c4;118 }119 #subMainContent .searchBoxAdmin h2 {120 border: none;121 }122 #subMainContent .searchBoxAdmin BUTTON {123 margin-left: 0.9em;124 }125 #subMainContent .searchBoxAdmin LABEL {126 margin-left: 0.9em;127 font-weight: bold;128 }129 #subMainContent #searchBoxAdmin .messageAdmin {130 margin-top: 0.9em;131 }132 133 /* Button */134 /* Area que contiene los botones */135 #subMainContent .button, .searchBox .button {136 width: auto;137 text-align: center;138 margin: 0 0 0 0;139 padding: 0.9em 0 0.9em 0;140 }141 #subMainContent .buttonRight, .searchBox .buttonRight {142 width: auto;143 text-align: right;144 margin: 0 0 0 0;145 padding: 0 0 0 0;146 }147 #subMainContent .button button, .searchBox .button button {148 margin: 0 0.6em 0 0;149 }150 151 /* tabs */152 /* Area que contiene los separadores, ver los ejemplos AC4A y BC4A */153 #subMainContent .tabNav {154 background: #FFF url(/portal/page/portal/uxxiportal/repositorio/images/bgTabs.gif) bottom left repeat-x;155 margin: 0 0 0 0;156 overflow: hidden;157 padding: 0;158 }159 #subMainContent .tabNav h3 {160 font-family: Verdana, Helvetica, Arial, sans-serif;161 font-size: 0.9em;162 background: #fafafa;163 margin: 0;164 padding: 0;165 }166 #subMainContent .tabNav li {167 border-bottom: 1px solid #8c9091;168 border-right: 1px solid #8c9091;169 border-left: 1px solid #8c9091;170 border-top: 1px solid #8c9091;171 float: left;172 list-style: none !important;173 margin: 0em 0 0 0.5em;174 padding: 0.2em 0.6em 0.1em 0.6em;175 }176 #subMainContent .tabNav a {177 float: left;178 font-weight: normal;179 padding: 0em 1em 0em 0.6em;180 }181 #subMainContent .tabNav li.optionACTIVE {182 background: #fafafa;183 border-bottom: 1px solid #fafafa;184 font-weight: normal;185 margin: 0em 0 0 0.5em;186 padding: 0.2em 0.6em 0.1em 0.6em;187 }188 /* stepsNav */189 /* Area que contiene una navegaci?n por pasos, ver el ejemplo AC5A */190 #subMainContent .stepsNav {191 width: auto;192 margin: 0 0 0 0;193 overflow: hidden;194 padding: 0 0 1.9em 0;195 }196 #subMainContent .stepsNav IMG {197 border: 0;198 margin: 0 0 0 0;199 padding: 0 0 0 0;200 }201 #subMainContent .stepsNav h3 {202 font-family: Verdana, Helvetica, Arial, sans-serif;203 font-size: 0.9em;204 margin: 0;205 padding: 0;206 }207 #subMainContent .stepsNav ul {208 }209 #subMainContent .stepsNav li {210 float: left;211 list-style: none !important;212 margin: 0 0 0 0;213 padding: 0 0 0 0;214 }215 #subMainContent .stepsNav a {216 float: left;217 font-weight: normal;218 padding: 0 0 0 0;219 }220 #subMainContent .stepsNav li.optionACTIVE {221 font-weight: normal;222 margin: 0 0 0 0;223 padding: 0 0 0 0;224 }225 /* fieldset */226 /* Area que agrupa los controles en un formulario */227 #subMainContent fieldset {228 width: auto;229 font-weight: bold;230 margin: 0 0 1em 0;231 padding: 0 0.9em 1.2em 0.9em;232 border: 1px solid #c4c4c4;233 }234 #subMainContent fieldset legend {235 color: #363636;236 font-size: 1.2em;237 margin: 0 0 0 0;238 padding: 0 0.9em 0 0.9em;239 }240 /* Definicion de las etiquetas de un formulario dentro de un fieldset */241 #subMainContent fieldset label.label00 {242 width: auto;243 margin-right: 0.9em;244 }245 #subMainContent fieldset label.label01 {246 width: 15%!important;247 margin-right: 0.9em;248 }249 #subMainContent fieldset label.label02 {250 width: 20%!important;251 margin-right: 0.9em;252 }253 #subMainContent fieldset label.label03 {254 width: 25%!important;255 margin-right: 0.9em;256 }257 #subMainContent fieldset label.label04 {258 width: 30%!important;259 margin-right: 0.9em;260 }261 /* Definicion de los campos desplegables de un formulario dentro de un fieldset */262 #subMainContent fieldset select.select01 {263 width: 15%!important;264 margin: 0.4em 0 0 0;265 padding: 0 0 0 0;266 }267 #subMainContent fieldset select.select02 {268 width: 32.8%!important;269 margin: 0.4em 0 0 0;270 padding: 0 0 0 0;271 }272 #subMainContent fieldset select.select03 {273 width: 55%!important;274 margin: 0.4em 0 0 0;275 padding: 0 0 0 0;276 }277 #subMainContent fieldset select.select04 {278 width: 75%!important;279 margin: 0.4em 0 0 0;280 padding: 0 0 0 0;281 }282 /* Definicion de los campos de texto de un formulario dentro de un fieldset */283 #subMainContent fieldset input.input01 {284 width: 15%!important;285 }286 #subMainContent fieldset input.input02 {287 width: 32%!important;288 }289 #subMainContent fieldset input.input03 {290 width: 55%!important;291 }292 #subMainContent fieldset input.input04 {293 width: 75%!important;294 }295 /* Definicion de los campos de texto de varias lineas de un formulario dentro de un fieldset */296 #subMainContent fieldset textarea {297 width: 75%;298 }299 #subMainContent fieldset textarea.textfield1 {300 width: 55%!important;301 }302 #subMainContent fieldset textarea.textfield2 {303 width: 73.5%!important;304 }305 /* form and related tag styles */306 /* Definicion general de los formularios */307 #subMainContent form {308 width: auto;309 margin: 0 0 0 0;310 padding: 0 0 0 0;311 }312 /* label and related tag styles */313 /* Definicion de las etiquetas de un formulario */314 #subMainContent label, .searchBox label {315 width: 100%!important;316 font-weight: normal;317 float: left;318 margin: 0.3em 0 0 0.9em;319 padding: 0 0 0 0;320 }321 #subMainContent label.label00, .searchBox label.label00 {322 width: auto!important;323 height: auto;324 margin-right: 0.9em;325 }326 #subMainContent label.label01, .searchBox label.label01 {327 width: 15%!important;328 /* height: 1.8em;329 */330 height: auto;331 margin-right: 0.9em;332 }333 #subMainContent label.label02, .searchBox label.label02 {334 width: 20.5%!important;335 height: auto;336 margin-right: 0.9em;337 }338 #subMainContent label span.ej, .searchBox label span.ej {339 font-weight: normal;340 color: #5b5a5a;341 }342 /* Definicion de los campos de texto de un formulario */343 #subMainContent input.input01, .searchBox input.input01 {344 width: 14.85%!important;345 }346 #subMainContent input.input02, .searchBox input.input02 {347 width: 31.5%!important;348 }349 #subMainContent input.input03, .searchBox input.input03 {350 width: 53.9%!important;351 }352 #subMainContent input.input04, .searchBox input.input04 {353 width: 73.35%!important;354 }355 /* Definicion de los campos checkbox de un formulario */356 #subMainContent .checkbox, .searchBox .checkbox {357 width: 100%!important;358 height: auto;359 margin: 0 0 0.9em 0.9em;360 padding: 0.9em 0 0 0;361 }362 #subMainContent .checkbox input, .searchBox .checkbox input {363 width: 0%!important;364 margin: 0 0.5em 0 0;365 padding: 0 0 0 0;366 border: 1px solid blue;367 }368 #subMainContent .checked fieldset legend {369 font-size: 1.08em!important;370 }371 /* Definicion de los campos desplegables de un formulario */372 #subMainContent select, .searchBox select {373 width: 75%!important;374 margin: 0.4em 0 0 0;375 padding: 0 0 0 0;376 }377 #subMainContent select.select01, .searchBox select.select01 {378 width: 14.85%!important;379 margin: 0.4em 0 0 0.1em;380 padding: 0 0 0 0;381 }382 #subMainContent select.select02, .searchBox select.select02 {383 width: 32%!important;384 margin: 0.4em 0 0 0.1em;385 padding: 0 0 0 0;386 }387 #subMainContent select.select03, .searchBox select.select03 {388 width: 53.9%!important;389 margin: 0.4em 0 0 0.1em;390 padding: 0 0 0 0;391 }392 #subMainContent select.select04, .searchBox select.select04 {393 width: 73.35%!important;394 margin: 0.4em 0 0 0.1em;395 padding: 0 0 0 0;396 }397 398 /* Definicion de los campos de texto de varias lineas de un formulario */399 #subMainContent textarea {400 width: 73.34%;401 font-family: Arial, sans-serif;402 font-size: 1em!important;403 margin: 0.4em 0 0 0.1em;404 padding: 0.2em 0.2em 0.2em 0.2em;405 }406 #subMainContent textarea.textfield1 {407 width: 53.9%!important;408 }409 #subMainContent textarea.textfield2 {410 width: 73.34%!important;411 }412 /* checked */413 /* Definicion de los campos checked en linea en un formulario, ver el ejemplo AC5A */414 #subMainContent .checked {415 width: 96%;416 margin: 0.2em 0 0.9em 0.9em;417 padding: 0 0 0 0;418 }419 #subMainContent .checked fieldset {420 border: 0;421 margin: 0 0 0 0;422 padding: 0 0 0 0;423 }424 #subMainContent .checked p.checkedContent {425 width: 77.6%;426 float: right;427 margin: -1.1em 0 0 0;428 padding: 0 0 0 0;429 }430 #subMainContent .checked fieldset legend {431 margin: 0 0 0 0;432 padding: 0 0 0 0;433 }434 #subMainContent .checked p.checkedContent select {435 margin: 0 0 0 0.35em;436 padding: 0 0 0 0;437 }438 #subMainContent .checked label {439 width: auto;440 font-weight: normal;441 float: none;442 margin: 0 0 0 0;443 padding: 0 0 0 0;444 }445 /* fieldset checked */446 /* Definicion de los campos checked de un formulario que se encuentran en un fieldset, ver el ejemplo AC7A */447 #subMainContent fieldset .checked p.checkedContent {448 width: 78.4%;449 }450 /* SearchLine */451 /* Definicion del ?rea en la horizontal que incluye los campos de un formulario que permiten incluir una fecha en linea */452 #subMainContent .dateSearchLine {453 width: auto;454 height: 1em;455 margin: 0 0 0 0;456 padding: 0.7em 0 0.7em 0.9em!important;457 }458 #subMainContent .dateSearchLine fieldset {459 border: 0;460 }461 #subMainContent .dateSearchLine fieldset legend {462 margin: 0 0 0 -0.9em;463 padding: 0 0 0 0;464 }465 #subMainContent .dateSearchLine p {466 width: 79.5%;467 float: right;468 margin: -1.5em 0 0 0;469 padding: 0 0 0 0;470 }471 #subMainContent .dateSearchLine p.Line00 {472 width: 89%;473 float: right;474 margin: -1.5em 0 0 0;475 padding: 0 0 0 0;476 }477 #subMainContent .dateSearchLine label {478 width: auto;479 float: none;480 margin: 0 0 0 0;481 padding: 0 0 0 0;482 }483 /* fieldset dateSearchLine */484 /* Definicion del ?rea en la horizontal que incluye los campos de un formulario dentro de un fieldset que permiten incluir una fecha en linea, ver el ejemplo AC1A */485 #subMainContent fieldset .dateSearchLine {486 margin: 0 0 0 0;487 padding: 0.6em 0 0em 0;488 }489 #subMainContent fieldset .dateSearchLine fieldset legend {490 font-weight: normal;491 font-size: 1em;492 }493 #subMainContent fieldset .checked dateSearchLine legend {494 font-weight: nornal!important;495 margin: 0 0 0 -0.9em;496 padding: 0 0 0 0;497 }498 #subMainContent .dateSearchLine fieldset p {499 width: 79.5%;500 float: right;501 margin: -1.5em 0 0 0;502 padding: 0 0 0.9em 0;503 }504 #subMainContent .dateSearchLine select {505 width: 20%!important;506 font-weight: normal;507 float: none;508 margin: 0 0 0 0;509 padding: 0 0 0 0;510 }511 /* searchResul */512 /* Definicion del ?rea que contiene los resultados de b?squeda, ver el ejemplo AC2A */513 #subMainContent .searchResul {514 margin: 0 0 1.2em 0;515 padding: 0 0 0 0;516 }517 /* options */518 /* Definicion del ?rea general que contiene las opciones disponibles sobre los resultados de b?squeda, ver el ejemplo AC2A */519 #subMainContent .searchResul .option {520 width: auto;521 height: 1.5em;522 font-size: 1.2em!important;523 margin: 0 0 0 0;524 padding: 0.9em;525 border-bottom: 1px solid #c4c4c4;526 background: url(/portlets/images/base_rayas_big.gif);527 }528 /* Definicion del subarea que contiene las opciones en linea en un solo area, ver el ejemplo AC2A */529 #subMainContent .searchResul .option00 {530 width: 100%;531 }532 /* Definicion de las subareas que contienen las opciones en linea en dos areas, ver el ejemplo AC2A */533 #subMainContent .searchResul .option01 {534 /* Definicion del subarea de la izquierda */535 width: 60%;536 margin: 0 0 0 0;537 padding: 0 0 0 0;538 float: left;539 }540 #subMainContent .searchResul .option02 {541 /* Definicion del subarea de la derecha */542 width: 39%;543 margin: 0 0 0 0;544 padding: 0 0 0 0;545 float: left;546 }547 #subMainContent .searchResul .option00 ul, #subMainContent .searchResul .option01 ul, #subMainContent .searchResul .option02 ul {548 width: 100%!important;549 overflow: hidden;550 margin: 0 0 0 0;551 padding: 0 0 0 0;552 text-align: right;553 }554 #subMainContent .searchResul .option00 li, #subMainContent .searchResul .option01 li, #subMainContent .searchResul .option02 li {555 font-size: 0.8em;556 background: none;557 list-style: none;558 background: none;559 float: left;560 margin: 0 0 0 0;561 padding: 0 0 0 0;562 }563 #subMainContent .searchResul .option00 li a, #subMainContent .searchResul .option01 li a, #subMainContent .searchResul .option02 li a {564 display: block;565 padding: 0.3em 1em 0.3em 1.7em;566 }567 #subMainContent .searchResul .option00 li.print a, #subMainContent .searchResul .option01 li.print a {568 background: url(../images/icoPrint.gif) center left no-repeat;569 padding: 0.3em 1em 0.3em 1.8em;570 }571 #subMainContent .searchResul .option00 li.excel a, #subMainContent .searchResul .option01 li.excel a {572 background: url(../images/icoExcel.png) center left no-repeat;573 padding: 0.3em 1em 0.3em 1.6em;574 }575 #subMainContent .searchResul .option02 ul li {576 float: right;577 } 578 #subMainContent .searchResul .option00 li.add a, #subMainContent .searchResul .option01 li.add a {579 background: url(../images/icoAdd.png) center left no-repeat;580 padding: 0.3em 1em 0.3em 2em;581 }582 /* pagination */583 /* Definicion del area que contiene la paginacion de los resultados, ver el ejemplo AC2A */584 #subMainContent .searchResul .pagination {585 width: 100%;586 height: auto;587 overflow: hidden;588 font-size: 0.85em;589 padding: 0.9em;590 margin: 0 0 0 0;591 padding: 0.9em 0 0.9em 0.9em!important;592 }593 #subMainContent .searchResul .pagination li {594 background: none;595 float: left;596 line-height: 1.2em;597 list-style: none;598 margin: 0 1.5em 0 0;599 padding: 0;600 }601 #subMainContent .searchResul .pagination a {602 font-weight: normal;603 }604 #subMainContent .searchResul .pagination .next {605 padding: 0 0.9em 0 0.4em;606 position: absolute;607 right: 1em;608 border-left: 1px solid #3d3d3d;609 }610 #subMainContent .searchResul .pagination .pag {611 padding: 0 0.9em 0 0;612 position: absolute;613 right: 8em!important;614 }615 #subMainContent .searchResul .pagination .first {616 padding: 0 0.9em 0 0;617 position: absolute;618 right: 15em!important;619 }620 #subMainContent .searchResul .pagination .first .firstpag1 {621 color: #ccc;622 padding: 0 0.9em 0 0.4em;623 border-right: 1px solid #3d3d3d;624 }625 /* Link */626 /* Definicion de un listado de enlaces */627 #subMainContent .link ul {628 width: 100%!important;629 overflow: hidden;630 margin: 0 0 0 0;631 padding: 0 0 0 0;632 text-align: left;633 }634 #subMainContent .link ul li {635 background: none;636 list-style: none;637 background: none;638 float: left;639 margin: 0 0 0 0.9em;640 padding: 0 0 0 0;641 }642 #subMainContent .link ul li a {643 display: block;644 padding: 0.3em 1em 0.3em 1.7em;645 }646 #subMainContent .link ul li.user a {647 background: url(../images/icoUser.png) center left no-repeat;648 padding: 0.3em 1em 0.3em 2.4em;649 }650 651 #subMainContent .link ul li.return a {652 background: url(../images/icoReturn.png) center left no-repeat;653 padding: 0.3em 1em 0.3em 2.4em;654 }655 656 /* dateSearch - fieldset*/657 /* Definicion del area en la vertical que incluye los campos de un formulario que permiten incluir una fecha en linea, ver el ejemplo AC3A */658 #subMainContent .dateSearch fieldset {659 width: auto;660 margin: 0 0 0 0;661 padding: 0 0 0 0;662 border: none;663 }664 #msubMainContent .searchBox .dateSearch fieldset legend {665 color: #363636;666 margin: 0 0 0 0;667 padding: 0 0 0 0;668 }669 #subMainContent .searchBox .dateSearch fieldset p {670 font-size: 0.8em;671 font-weight: normal;672 margin-left: 0;673 }674 #subMainContent .searchBox .dateSearch fieldset select {675 width: 4.5em !important;676 margin: 0.5em 0.2em 0.5em 0;677 }678 #subMainContent .searchBox .dateSearch fieldset .month {679 width: 7.4em !important;680 margin: 0 0.2em 0.5em 0;681 }682 #subMainContent .searchBox .dateSearch fieldset label {683 width: auto !important;684 margin: 0 0 0 0;685 padding: 0 0 0 0;686 float: left;687 }688 /* Table */689 /* Define los estilos de las tablas dentro del contenedEnlace
El enlace para compartir es: