/* (c) 2019 Marco Bianchi (Public Domain) CSS stylesheet to display XML encoded text which is encoded using Menota handbook, 3.0 b and later (TEI P5 version) and the xlst-stylesheet handbook_v3.xls. As opposed to earlier style sheets, this style sheet features # web-fonts (mainly Andron by Andreas Stötzer) with full MUFI-support in body text (not headers) # a fully responsive design with divs rather than tables # relative units (% and em) whenever possible # readiness for html5 and css3 Html-skeleton for body

HANDBOOK ENTRIES

*/ /*First, import rules. Must be at the first line of css */ @import url('https://fonts.googleapis.com/css?family=Open+Sans:400,600'); /* ##### RESET.CSS */ /* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain) */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; } /* END RESET.CSS ##### */ /* MENOTA HANDBOOK V3 */ /*Linked fonts available at http://clarino.uib.no/menota/woff*/ @font-face { font-family: LMR; src: url('woff/lapidaria-menotecregular.woff') format('woff'); } @font-face { font-family: AMC-fallback; /*Andron semibold is not a complete MUFI-font. Create a fallback-font-family for glyphs that don't exist in Andron semibold */ font-weight: bold; src: url('woff/andron-mega-corpus-regular.woff') format('woff'); } @font-face { font-family: AMC; src: url('woff/andron-mega-corpus-regular.woff') format('woff'); } @font-face { font-family: MUFI-ADD; src: url('woff/mufi-additional.woff') format('woff'); unicode-range: U+E000-F8FF ;} @font-face { font-family: AMC; font-style: italic; src: url('woff/andron-mega-corpus-italic.woff') format('woff'); } @font-face { font-family: AMC; font-weight: bold; src: url('woff/andron-mega-corpus-semibold.woff') format('woff'); } @font-face { font-family: AMC-SC; src: url('woff/andron-mega-corpus-sc-regular.woff') format('woff'); } @font-face { font-family: UNI-RU; src: url('woff/uni-runes.woff') format('woff'); unicode-range: U+16A0-16F0, U+E000-F8FF; } html { height:100% } body { font-family: UNI-RU, AMC, AMC-fallback,MUFI-ADD, serif; width: 98%; max-width: 960px; margin:0 auto; font-size:1.2em; line-height: 1.3; text-align:left; min-height:90%; } header, nav ul, ul.toc, h1, h2, h3, h4, h5, h6, th, table .label { font-family:'Open sans', Verdana, Arial, Helvetica, sans-serif } code, .code { font-family:Courier, monospace; } header, nav, #content-wrapper {} header .main-header { font-size: 1.8em; font-weight: 600; color:rgb(23, 41, 131) } header .sub-header { font-size: 1.1em; color: rgb(16, 93, 71); font-weight:400 } footer { margin-top: 2em; font-size:.8em; text-align: center; border-top:1px solid #666; clear:both } p, table, ul { margin:.5em 0 } h1, h2, h3, h4, h5, h6, th, table .label { font-weight:bold; color:#666 } h1 { font-size:1.4em; margin:0 0 .7em 0 } h2 { font-size:1.2em; margin:2.4em 0 1.2em 0 } h3 { font-size:1.0em; margin:2em 0 1em 0 } h4 { font-size:.95em; margin:1.6em 0 .8em 0 } h5, h6{ font-size: .6em } :link { text-decoration: none; border-bottom: 1px solid rgba(37,62,80,.25); } a, a:link, a:active, a:visited { color:#0000FF; /*text-decoration: none*/ } a:hover { border-bottom: 1px solid black; } /* Don´t use underline when lenks are in lists,there we use only red arrows infront */ li.item a, li.item a:link, li.item a:active, li.item a:visited, li.item a:hover { color:#0000FF; text-decoration: none } a:hover { border-bottom: 1px solid black; } a.image-link:hover { border:none } b, strong, .bold { font-weight: bold; /*color:#666*/ /* Use default (black in most cases) */ } em, i, .italic, .italics { font-style: italic } #sidebar { width: 100%; float: left; margin-top:2em; font-size:.9em } #content { width: 100%; float:left; margin-top: 2em } #page {} #header-wrapper, #content-wrapper{ clear:both; width:100%; float:left } #header-wrapper { border-bottom: 1px #666 solid; padding-bottom: .5em } #content-wrapper { margin:0 auto; width: 100%; float:none /*float none to center the div*/ } #main-wrapper { overflow:hidden; /* overflow:hidden in order to be able to adjust the footers top-margin*/ clear:both; padding-top:1em } header { width: 50%; float:left } nav { width: 50%; float:right } nav ul { float:right; margin-top:1em; text-align:right } nav ul, ul.toc { font-size:.9em } ul.toc { padding-left: 1em; list-style-type: none; } li.item { padding-left: 1em; background-image: url(raudpil.gif); background-position: 0 0; background-size: 1em 1em; background-repeat: no-repeat; } /*generic classes and default settings for some elements*/ .red { color:#dd0000 /* Changes from 'red' #ff0000 to 'VG-red' #dd0000 */ } .blue { color:blue } .width10 { width:10% } .width20 { width:20% } .width25 { width:25% } .width30 { width:30% } .width33 { width:33.33% } .width40 { width:40% } .width50, figure { width:50% } .width60 { width:60% } .width66 { width:66.66% } .width70 { width:70% } .width75 { width:75% } .width80 { width:80% } .width90 { width:90%} .width100 { width:100%; } figure.width100 { margin-left:0; margin-right:0 } .alignleft, figure { float:left; clear:left; margin: 1em 1em 1em 0; } .alignright { float:right; clear:right; margin: .5em 0 1em 1em } .aligncenter { float:none; clear:both; margin: .5em auto; } .center { text-align:center } .clearboth { float:none; clear:both; } .display { padding:.5em; border:solid #0669ff 1px; border-radius: .3em; background-color:#ebf3ff; } .display h1:first-child, .display h2:first-child, .display h3:first-child, .display h4:first-child { border-bottom:1px solid #0669ff; font-size: 1em; margin-top:0; padding:.3em .3em .5em .3em; } /*block styles defined in the xsl-template*/ #content ol { list-style-position: outside; } /*#content ul, #content ol { list-style-position: outside; }*//* #content ul { list-style:disc; margin-left:2.5em } #content ul.toc { list-style:none; margin-left:0; }*/ #content ol { list-style:decimal; margin-left:2.3em }/* #content ul li {}*/ #content ol li { padding-left:.2em } #content table ul, #content table ol { margin-left: 2em } p.caption { margin-bottom: 1em; } table { table-layout:fixed; width:100%; overflow: hidden; font-size:.9em; margin: 1em 0; } tbody { overflow: hidden } tbody, th, td{ border:1px solid #0669ff; border-collapse: collapse; } table.xml-elements tbody, table.xml-elements th { border-width: 1px } table.xml-elements tbody td { border-style: dotted } tr{} th, table .label{ background-color:#ebf3ff; font-size:.8em } table.plain, table.plain th, table.plain td { border:none } th, td{ padding:.25em .5em; vertical-align: top } th { padding:.5em } tbody tr:first-child td { /*padding-top: .5em*/ } tbody tr:last-child td { /*padding-bottom: .5em*/ } table.xml-elements tr td:first-child span:only-child.attribute { margin-left:1em } table.xml-elements tr td:first-child span:only-child.value { margin-left:2em } table.glyphtable tr td { vertical-align:middle; } table.glyphtable span.glyph:only-child { font-size:2em; padding-left:.2em; } .display table, .display tbody, .display th, .display td { background-color:#FBFBFB; border:1px solid #BBBBBB; } .display table th{ background-color:#737373; color:#fff; } figure{ border:solid #bbb 1px; border-radius: .3em; box-sizing:border-box; text-align: center; padding:0 0 0 0; display:block; } table figure { width: 100%; float:none; margin:.5em auto; } figcaption{ font-size:.6em; padding:.3em; text-align: left; font-family:'Open sans', Verdana, Arial, Helvetica, sans-serif } figure img { border-radius:.3em .3em 0 0; width:100%; height: 100%; max-width:100%; max-height:100% } figure.nocaption { border:none } figure.nocaption img { border-radius: .3em; border:solid #bbb 1px } img{ border:none } pre{ clear:both; overflow-y: hidden; background-color:#FBFBFB; padding:0 1.2em 1.2em 1.2em; border:1px #A1A1A1 solid; border-radius: .3em; margin:1em 0; } table pre { background-color: transparent; padding:0 .6em } code, .code { font-size:.85em; word-wrap: break-word; overflow-y: hidden; /*margin-right:-.2em;*/ } pre code { word-wrap: normal; font-size:.8em } blockquote{ margin:.5em 1.2em } /*Inline styles defined in the xsl-template*/ cite{ font-style:italic; } span.initial { float:left; font-size:3em; margin:-.2em .1em -.3em 0 } span.imagelabel { font-style: italic } span.value { color:#c04418; } span.attribute{ color:green } span.gi { color:#669; /*Kimberly*/ } span.tag{} span.codepoint, span.entity, span.descName {} span.codepoint, span.descName { text-transform: uppercase; } span.descName { word-spacing: -.2em; } @media screen and (max-device-width: 960px), screen and (max-width:960px) { /*This should target all small screens generously*/ body { width:95%; } #content-wrapper { width: 100% } /*ul.toc li { padding:.5em 0 }*/ figure.width10,figure.width20,figure.width25, figure.width30,figure.width33,figure.width40,figure.width50{ width: 50% } figure.width60,figure.width66,figure.width70, figure.width75, figure.width80, figure.width90,figure.width100 { width:100%; margin-left:0; margin-right:0 } } @media screen and (max-device-width: 450px) and (orientation:portrait) { /*Be kind to very small screens in portrait mode (including all iphones until 8 plus, Samsung Galaxy, HTC Evo)*/ body { font-size:3em } header { font-size: .8em; } header, nav { width: 100%; } nav ul { float:left; text-align:left; } table { font-size:.8em } figure.width10,figure.width20,figure.width25,figure.width30,figure.width33,figure.width40,figure.width50 { width:100%; margin-left:0; margin-right:0 } } @media print{ body { width:100%; max-width: 100%; font-size:1em; } #content-wrapper { width:100%; } /*footer {position:relative; bottom:0; clear:both}*/ footer { display: none } }