body { color: #585858; background: #FFFFFF; width: 800px; margin-left: 2%; margin-right: 4%; font-size: 15; font-family: 'Martel Sans'; /*Google Font, añadir link en */ font-weight: 300; /* para esta font bold es 600*/ } /* LINEAS HORIZONTALES */ hr.guia { border: 1px solid orange; padding: 0; margin: 0em 0em 1em 16px; } hr.nota { border: none; margin-left: 10px; height: 1px; background-color: orange; } hr.nota_il { margin-left: 0px; } /* HEADINGS */ h1 { font-weight: bold; font-size: 240%; color: #202020; width: 100%; padding: 10px 0px; } h2 { font-weight: bold; font-size: 160%; color: #202020; width: 100%; padding: 0em; } h3 { color: #202020; width: 98%; font-weight: bold; font-size: 150%; /*font-style: italic;*/ padding-left: 0.5em; background-color: #d6eaf8; } h4 { font-weight: bold; font-size: 130%; color: #202020; width: 98%; padding: 0em; margin: 0.5em 0em 0em 10px; } h4.guia { font-weight: bold; font-size: 130%; color: #202020; width: 98%; padding: 0em; margin: 0.5em 0em 0em 6px; } h5 { font-weight: bold; font-size: 110%; color: #202020; width: 98%; padding: 0em; margin-left: 20px; } /* PARRAFOS */ p { width: 100%; font-size: 100%; padding: 0em; margin: 0.2em 0em 1em 10px; } p.nota { width: 95%; color: black; font-size: 85%; /*padding: 0em; margin: 0.2em 0em 1em 20px;*/ } p.cuadro { color: black; font-size: 120%; } p.title1 { text-align: right; /*font-family: sans;*/ width: 99%; font-size: 135%; padding: 0em; margin: 0; } p.title2 { text-align: right; /*font-family : serif;*/ color: #000000; font-style: italic; width: 99%; font-size: 180%; padding: 0em; margin-bottom: 5px; } /* LISTAS */ ol { width: 90%; font-size: 92%; padding: 6px 45px; } /* ENHANCED */ /* Subrayado de acuerdo con https://css-tricks.com/styling-underlines-web/ Subrayado DOBLE: background-image: linear-gradient(to bottom, red 33%, transparent 33%, transparent 66%, red 66%, red); background-size: 2px 6px; */ mark { text-decoration: none; background: #fef9e7; background-image: linear-gradient(to right, #aa0000 50%, transparent 50%); background-size: 4px 1px; background-position: 0 1.55em; background-repeat: repeat-x; } b { color: black; font-weight: bold; } b.i { font-style: italic; } b.b { font-family: helvetica; } i { color: black; font-style: italic; } i.i { color: #880000; font-size: 98%; font-family: monospace; background-color: #fcf4e8; } i.com { font-family: monospace; color: #d35400 ; } i.cod { font-family: monospace; font-size: 94%; color: green; background-color:#e8f8f5 ; font-style: italic; } /* LINKS */ a { text-decoration: none; font-weight: bold; color: #21618c; /* #146eb4; */ background-image: linear-gradient(to bottom, #aed6f1 33%, transparent 33%, transparent 66%, #aed6f1 66%, #aed6f1); background-position: 0 1.5em; background-repeat: repeat-x; background-size: 2px 2px; } /* :link { color: rgb(0, 160, 160); } :visited { color: rgb(0, 160, 160); } */ :hover { color: #873600; background-image: linear-gradient(to bottom, #146eb4 33%, transparent 33%, transparent 66%, #146eb4 66%, #146eb4); background-position: 0 1.5em; background-repeat: repeat-x; background-size: 2px 2px; } /* DIVS */ div.title { float: left; width: 210px; padding: 0px 10px 10px 0px; } /*Cuadros de Figuras*/ div.f_left { float: left; width: 30%; margin-right : 1em; margin-bottom : 1em; } div.f_left p { color: #000080; text-align: center; font-family: serif; font-style: italic; font-size: 80%; font-weight: bold; } div.f_right { float: right; border: dotted #000 thin; padding : 5px 0px 2.5px 0px; width: 45%; text-align: center; margin-top : 1em; margin-left : 1em; margin-bottom : 1em; } div.f_right p { color: #000080; text-align: center; font-size: 80%; font-weight: bold; width: 92%; margin: 0 auto 0 auto; } div.f_rightt { float: right; width: 30%; margin-left : 21em; margin-bottom : 8em; } div.f_rightt p { color: #000080; text-align: center; font-family: serif; font-style: italic; font-size: 80%; font-weight: bold; } /*Cuadro "lista" utilizados en guias*/ div.lista { color: #101010; font-size: 100%; width: 776px; background: #FFFFCC; border: dashed #000 thin; padding : 10px 0px 0px 10px; margin: 0em 0em 2.5em 10px; } div.f_centro { border: dotted #000 thin; padding : 5px 0px 2.5px 0px; width: 100%; text-align: center; margin-top : 1em; margin-left : 10px; margin-bottom : 1em; } div.f_centro p { color: #000080; text-align: center; font-size: 80%; font-weight: bold; width: 92%; margin: 0 auto 0 auto; } div.lista h4 { padding-left: 15px; } div.lista ul { color: #000080; font-size: 90%; width: 95%; margin-left: 5; padding-left: 35px; } div.lista ul li { padding: 2px 4px; } div.lista ol { list-style: none; color: #000080; margin-left: 20; padding-left: 20px; } /*Lista numerada con numeros especiales*/ div.lista ol li::before { counter-increment: li; content: "(" counter(li) ") "; background: #e5e8e8; color: blue; font-weight: bold; display: inline-block; width: 2em; margin-left: -2em} div.lista ol:first-of-type { /* Parece que no funciona */ counter-reset: li; } div.lista ol li { padding: 6px 5px; } div.lista p { color: #000080; width: 95%; padding-left: 15px; } /*Cuadros de Preguntas*/ div.preg { color: #000080; font-size: 90%; width: 776px; background: #e5e8e8;/*#ddd;*/ border: dashed #000 thin; padding : 10px 0px 0px 10px; margin: 0em 0em 2.5em 10px; } div.preg ul { width: 95%; font-size: 92%; margin: 0; padding-left: 0px 0px 0px 35px; list-style: none; } div.preg ul li { padding: 0px 5px; } div.preg ul li:before { display: inline-block; content:"--"; width: 1em; margin-left: -1em; } /*Cuadros Otros*/ div.entr { color: blue; font-size: 85%; background: #ddd; border: dashed #000 thin; padding : .5em 1em; margin-left : 1em; } div.foot_link { color: red; font-size: 85%; padding: 0.5em; text-align: center; } div.foot_link img { vertical-align: middle; } div.foot_link span { vertical-align: middle; } div.actualizado { background: #005f0c; color: #ffffff; font-size: 10px; padding: 3 10 2 0; display: flex; justify-content: right; align-items: center; } /* TABLAS, dentro de un div de clase lista */ table { width: 98%; font-size: 92%; padding: 0em; margin: 1em auto 2em auto; border-collapse: collapse; } th { /*border: 1px solid black; border-top: 1px solid orange; border-bottom: 1px solid orange;*/ height: 40px; vertical-align: middle; color: black; font-family: helvetica; font-weight: bold; background-color: lightsteelblue; } td { border: 0; border-bottom: 1px solid orange; text-align: center; vertical-align: middle; } td.tit { border: 0; /*border-top: 2px solid orange;*/ color: black; /*font-weight: bold;*/ text-align: left; padding-left: 1em; } .col1 { color: black; font-weight: bold; } .last { border-bottom: 2px solid orange; } /* LISTA DEFINICION */ dl { font-size: 90%; padding: 0em; margin: 0.5em 0 0.5em 10px; } dt { font-size: 110%; color: black; font-weight: bold; } /* LISTA ESPECIAL A,B,C */ ol.esp { counter-reset: list; padding: 0; margin: 1.5em 0 1em 0; } ol.esp > li { list-style: none; padding-left: 6em; } ol.esp > li:before { content: "Patrón " counter(list, upper-alpha) ":"; counter-increment: list; /*padding-right: 18px;*/ color: black; font-weight: bold; display: inline-block; width: 5em; margin-left: -5em } /*Cuadros para lista def */ div.cua { color: #000080; font-size: 88%; width: 776px; background: #f0f0f0;/*#ddd;*/ border: dotted #000 thin; padding : 10px 8px 8px 10px; margin: 0em 0em 0em 10px; } /*Ecuaciones*/ div.eq { /*border: dotted #000 thin;*/ padding: 5px; margin: 5px auto 0 auto; text-align: center; color: black; } .fraction { display: inline-block; vertical-align: middle; margin: 0 0.1em 0.4ex; text-align: center; } .fraction > span { display: block; padding-top: 0.1em; } .fraction span.fdn { border-top: thin solid black; } .fraction span.bar { display: none; } div.contenedor { width: 100%; text-align: center; } /* "clear fix" para que despues del contenedor se reinicie todo*/ .contenedor::after { content: ""; clear: both; display: table; } /* MORE */ /* Soporte para edicion avanzada de colores - Picker -> ColorZilla https://www.colorzilla.com/ - Paleta -> HTML Color Groups https://www.w3schools.com/colors/colors_groups.asp - Shades -> Link para cada color en lista anterior - Gradient -> https://www.colorzilla.com/gradient-editor/