/* A two column layout, with a header and a footer. The header has drop down and popout menues. The footer is always below whichever column is longest. The most common screen formats are 600×300 (640×480), 760×420 (800×600) are 955×600 (1024×768). My screen is 1440×900. Opera can use a width of max 1416 px (and other browsers can use a few pixels more). {line-height: 2;} is right for all characters of Dialekt Uni, but 1.25 is OK for the normal elfdalian characters in Opera, Firefox and Safari. However IE7 requires 1.3. Safari's hover needs a top-margin of 6px, to be able to "see" when the hovering is ended. */ * {padding: 0; border: 0; margin: 0;} body {font-weight: normal; font-size: 125%; line-height: 1.3; font-family: "Dialekt Uni" !important; background-color: #ecf2c9;} p.hand {font-size: 2em; font-family: "Palace Script MT", cursive; width: 12em; margin-left: auto; margin-right: auto; color: #0000c0;} div#menuwrapper {width: 100%; height: 2em;} div#flaps {display: none;} div#menu {position: fixed; top: 0; z-index: 4; width: 99%; float: left; display: inline; padding: 6px 0 0 1%; margin: 0; border-bottom: 3px solid green; background-color: #dee7b6;} /* QT.player ligger framför menyn, Fx är OK */ div#menu span {padding: 0 0.2em;} .drop {display: block; padding: 0; margin: 0; text-align: right; cursor: pointer;} /* cursor is for IE7 */ .drop span {float: left; padding: 0 ;} div#mainwrapper {width: 100%;} div#columnswrapper {width: 100%; padding-bottom: 20px; background-color: #ecf2c9;} div#content {width: 60%; float: left; display: inline; padding: 0 0; background-color: #ecf2c9;} div#rightcolumn {font-size: .6em; width: 40%; float: left; padding: 2em 0 4px 0; border-bottom: 2px solid #996600;} div#first_page {font-family: "Times New Roman", serif; font-size: 125%; line-height: 1;} div#first_page div#content {width: 100%;} /* The first page is special */ div#first_page p em{background-color: #010101; color: yellow;} div#first_page ul {list-style: inside;} div#layout_page div#content {width: 100%; float:none; display: block;} /* The layout page is special */ div#layout_page div#rightcolumn {width: 100%;} div#calendar div#content {width: 100%; float:none; display: block; } /* The calender page is special */ div#calendar table {page-break-after: always;} div#calendar div#rightcolumn {width: 100%;} div#swedish {width: 96%; padding: 8px 3.5% 8px .5%; border-top: 2px solid #996600; border-bottom: 2px solid #996600; margin: 10px 0 6px 0; color: #cc6600;} div#footerwrapper {position: relative;} div#rightfooter{position: fixed; bottom: 0; width: 164px; height:27px; padding: 3px 0 0 16px; border-top: 3px solid green; background-color: #dee7b6;} div#footer{position: fixed; bottom: 0; left: 180px; width: 70%; height:24px; padding: 6px 20% 0 0; border-top: 3px solid green; background-color: #dee7b6;} div#footerfill {height: 34px;} .clearthis {clear: both;} /* The Flaps or div#menu ul */ div#menu ul {padding: 0; margin: 0; list-style-type: none; float: left;} div#menu li {position: relative; float: left; margin: 0 3px 0 0; display: inline; background: #ffa url(../bilder/left_flap.bmp) no-repeat;} div#menu ul li a {display: block; float: left; text-decoration: none; padding-top: 0.3em; color: black;} div#menu ul li a.flap {background: url(../bilder/right_flap.bmp) no-repeat top right;} div#menu ul li:hover {background: #dd7 url(../bilder/left_h_flap.bmp) no-repeat;} div#menu ul li:hover a.flap, div#menu ul li a.flap:hover {border-right: 0px solid silver; background: url(../bilder/right_h_flap.bmp) no-repeat top right;} /* The You Are Here funtionality */ #body_skrievum #nav_skrievum, #body_abis #nav_skrievum, #body_kbd #nav_skrievum, #body_leksa #nav_istorrjur, #body_sundagsskauln #nav_istorrjur, #body_sovmorgun #nav_istorrjur, #body_bruäkrove #nav_istorrjur, #body_witterweglag #nav_istorrjur, #body_kumiur #nav_kumiur, #body_ukin #nav_dikt, #body_tide #nav_dikt, #body_an_kuägeð #nav_dikt, #body_stöllugiete #nav_dikt, #body_alnakk #nav_al, #body_lekker #nav_lekk, #body_ig #nav_ig {background: #ee8 url(../bilder/left_a_flap.bmp) no-repeat;} #body_skrievum #nav_skrievum a.flap, #body_abis #nav_skrievum a.flap, #body_kbd #nav_skrievum a.flap, #body_leksa #nav_istorrjur a.flap, #body_sundagsskauln #nav_istorrjur a.flap, #body_sovmorgun #nav_istorrjur a.flap, #body_bruäkrove #nav_istorrjur a.flap, #body_witterweglag #nav_istorrjur a.flap, #body_kumiur #nav_kumiur a.flap, #body_ukin #nav_dikt a.flap, #body_tide #nav_dikt a.flap, #body_an_kuägeð #nav_dikt a.flap, #body_stöllugiete #nav_dikt a.flap, #body_alnakk #nav_al a.flap, #body_lekker #nav_lekk a.flap, #body_ig #nav_ig a.flap {background: url(../bilder/right_a_flap.bmp) no-repeat top right;} #body_skrievum #skrievum a, #body_abis #abis a, #body_kbd #kbd7 a, #body_leksa #leksa a, #body_sundagsskauln #sundagsskauln a, #body_witterweglag #witterweglag a, #body_sovmorgun #sovmorgun a, #body_bruäkrove #bruäkrove a, #body_ukin #ukin a, #body_tide #tide a, #body_an_kuägeð #an_kuägeð a, #body_stöllugiete #stöllugiete a {background-color: #ee8;} div#menu ul#navigation li#nav_index a.flap em.sv {font-style: normal; color: #cc6600;} /* The Dropdown or div#menu ul li ul */ div#menu ul li ul {display: none; padding-top: 1px; padding-right: 2px; padding-bottom: 2px; padding-left: 1px; margin: 0;} div#menu ul li:hover ul, div#menu ul li a:hover ul {display: block; position: absolute; top: 1.5em; left: -1px; width: 9em; height: auto; background-color: gray; z-index: 1;} /* IE7 don't put drop down menus on top */ div#menu ul li:hover ul.skinny, div#menu ul li a:hover ul.skinny {width: 9em;} div#menu ul li:hover ul li a, div#menu ul li a:hover ul li a {width: 9em; height: auto; padding: 0; padding-top: 0.3em; border: 0; margin: 0; background-color: #ffffaa;} div#menu ul li:hover ul li:hover a, div#menu ul li a:hover ul li a:hover {background: #dddd77;} /* The Popout or div#menu ul li ul li ul */ div#menu ul li:hover ul li ul, div#menu ul li a:hover ul li a ul {visibility: hidden; padding-left: 0;} div#menu ul li:hover ul li:hover ul, div#menu ul li a:hover ul li a:hover ul {visibility: visible; position: absolute; top: 0; left: 4.75em; width: 9em; margin-top: -1px;} div#menu ul li:hover ul li:hover ul li a, div#menu ul li a:hover ul li a:hover ul li a {background: #ffffaa;} div#menu ul li:hover ul li:hover ul li a:hover, div#menu ul li a:hover ul li a:hover ul li a:hover {background: #eeee88;} /* The efdalian text */ div#contentinner {margin: 2em 2% 0.5em 2%;} #body_ukin div#contentinner {width: 85%; margin-left: 10%; margin-right: auto;} #body_tide div#contentinner {width: 85%; margin-left: 10%; margin-right: auto;} #body_an_kuägeð div#contentinner {width: 85%; margin-left: 10%; margin-right: auto;} #body_stöllugiete div#contentinner {width: 85%; margin-left: 10%; margin-right: auto;} div#content div.image {float: right; margin: 4px 4px 4px 1em;} div#content div.image p {font-size: .6em; margin: 0px 0px; text-indent: 0%; color: #cc6600;} div#content div.image p span{text-decoration: underline; color:blue;} /* Opera 9 */ div#content div.imageLeft {float: left; margin: 4px 1em 4px 4px;} div#content div.imageLeft p {font-size: .6em; margin: 0px 0px; text-indent: 0%; color: #cc6600;} div#content div.imageLeft p span{text-decoration: underline; color:blue;} /* Opera 9 */ div#content h1 {font-size: 1.4em; margin-top: 0.2em; margin-bottom: .5em;} div#content h2 {font-size: 1.2em; margin-top: 0.2em; margin-bottom: .5em;} div#content p {margin-top: 0; text-indent: 2em;} div#content p.noindent {margin-top: 0; text-indent: 0ex;} div#content li {font-size: .8em;} ol.contentList {font-size: 125%; line-height: 1.3; list-style: decimal outside; padding: 0; border: 0; margin: 12px 20px 12px 2em;} ol.contentList ol{list-style: lower-latin; margin: 0 0 0 1em;} ol.contentList ol object {width: 50%; height: 18px; background-color: #ecf2c9;} ol.contentList li {padding: .3em 0; margin: 0;} /* .3em is used due to the lineheight of Dialect Uni */ ol.contentList a {text-decoration: none; color: black;} ol.contentList a span {text-decoration: underline; color: blue;} span.link {text-decoration: underline; color: blue;} span.small-link {font-size: 0.5em; text-decoration: underline; color: blue;} span.half-font {font-size: 0.5em;} ol.contentList a:hover {background-color: #dee7b6;} /* The translation, i.e. the swedish text */ div#swedish h1 {font-size: 1.4em; margin-top: 0.1em; margin-bottom: .3em;} div#swedish h2 {font-size: 1.2em; margin-top: 0.1em; margin-bottom: .3em;} div#swedish p {margin-top: 0; text-indent: 3ex;} div#swedish p.noindent {margin-top: 0; text-indent: 0ex;} div#swedish p span {color: black;} div#swedish p.yellow span{background-color: yellow;} div#swedish ol {line-height: 1.3; list-style: decimal outside; padding: 0 1em; border: 0; margin: 12px 20px 12px 2em;} div#swedish ol li ol li span {color: black;} div#swedish ol ol{list-style: lower-latin; margin: 0 0 0 2em;} div#swedish li {padding: .3em 0; margin: 0;} /* .3em is used due to the lineheight of Dialect Uni */ div#rightcolumn p a {text-decoration: underline; color: blue;} /* Opera 9 */ /* The Footer */ div#footer object {width: 100%; height: 18px; background-color: #ecf2c9;} /* The alphabet page */ table.runor {table-layout: fixed; width: 90%; font-size: 1em; line-height: 2; margin: 0.5em 0 0.5em 2%; border-collapse: collapse; border: 3px solid black;} table.runor tr {} table.runor tr td {text-align: center; border: 2px solid black;} table.alfa {table-layout: fixed; width: 70%; font-size: 1em; line-height: 2; margin: 0.5em 0 0.5em 10%;} /* The calendar page*/ #calendar caption {font-size: 2em; font-style: italic;} #calendar caption a {font-size: 0.5em; text-decoration: underline; color: blue;} #calendar table {border: 6px solid #666; font-weight: bold; width: 98%} #calendar thead {background-color: #99bbff;} #calendar th {border: 6px outset #444; font-size: 1em;} #calendar td {border: 3px inset #999; height: 4em; padding: 5px; vertical-align: top; font-family: "Dialekt Uni", sans-serif; background-color: white;} #calendar #content td.talesätt {vertical-align: middle; background-color: #ffc;} #calendar td span.new {color: black;} #calendar td span.full {color: black;} #calendar td span.note {font-size: .8em; color: #00a;} #calendar td span.auth {font-size: .8em; font-style: italic;} #calendar .sunday {color: red;} #calendar col.weekday {width: 14%;} #calendar col.weekend {width: 14%;} /* The kbd7 layout_page */ div#layout_page div#text {display:inline; margin-left: 0px} div.dk {display:inline; font-weight: bold; border: 5px solid; border-color: #a0c0f0 #4060a0 #4060a0 #a0c0f0; background-color:#80a0e0; color: white;} div.dk:hover {background-color:#99bbff} div#layout_page table {width: 720px; font-size:1.5em; line-height: 1.5; font-weight: bold; table-layout:fixed; margin:12px 0px; border-collapse:separate; empty-cells:hide; background-color:#454545; border: 10px solid #444444} /* Hide empty cells in Opera. 1440x900 */ div#seven:hover div.kbdLayout {z-index:3} div#acuteAccent:hover div.kbdLayout {z-index:3} div#graveAccent:hover div.kbdLayout {z-index:3} div#diaresis:hover div.kbdLayout {z-index:3} div#circumflex:hover div.kbdLayout {z-index:3} div#tilde:hover div.kbdLayout {z-index:3} div.kbdLayout {position: absolute; top: 6.4em; left: 1.9em; color:black} div.kbdLayout tr {background-color:#80a0e0} div.kbdLayout tr.hide {background-color:#444444} /* Safari needs one 30 column row */ div.kbdLayout td.hidden {height: 3px; border: 1px} div.kbdLayout td {border: 5px solid; border-color: #a0c0f0 #4060a0 #4060a0 #a0c0f0} .size128 {font-size: 0.5em} .x2 {font-size: 2em; font-style: normal; vertical-align: middle} .indent1 {text-indent:2px} div.kbdLayout td.enter1 {font-size:0.5em; border-color:#a0c0f0 #80a0e0 #80a0e0 #a0c0f0} div.kbdLayout td.enter2 {font-size:0.5em; line-height: .9; border-left-color:#80a0e0} div.kbdLayout td.modified {background-color:#99bbff} div.kbdLayout td.modified128 {font-size: 0.5em; background-color:#99bbff} div.kbdLayout td span {background-color:#99bbff} div#kbdSE div.kbdLayout td span {color:white; background-color:#80a0e0} div#kbd_background {width: 728px; height: 18.5em; margin: 0 0 0 0.5em; background-color: #ecf2c9;} /* A Ą B C D  Ð  E Ę F G  H I Į J K L  M  N  O Ǫ P Q R  S   T  U Ų V W X Y  Å  Ä  Ö  ’ a ą b c d  ð  e ę f g  h i į j k l  m  n  o ǫ p q r  s   t  u ų v w x y  x å  ä  ö  ’ 00000000011111111112222222222333333333344444444445555555555666666666677777777778888888888899999999900000000001 12345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890 TEST: p {border: 1px solid #333; background-color: #EEE;}. Enligt w3schools.com har webläsarna följande procentuella fördelning i % 2007: Juni: IE7 19,7, (IE6 37,3, IE5 1,5, ) Fx 34,0, Opera 1,8, Safari 1,5, (Mozilla 1,4) Juli: IE7 20,1, (IE6 36,9, IE5 1,5, ) Fx 34,5, Opera 1,9, Safari 1,5, (Mozilla 1,4) Testat på PC med Windows XP och de fyra mest moderna webb-läsarna: Opera 9.21: 1. Dålig på utskrifter 2. Visa inte hjälpetiketter, ty man riskerar att "tappa" hover-tilståndet. Se Verktyg|Inställningar| Avancerat|Läsning. IE 7.0: 1. Radbryter (markerat med -) orden "i-" "-uteð" och "E-", dvs tecknen i private area behandlas som white-space! Firefox 2.0: 1. Radbryter INTE vid ­ 2. Kör ihop kolumnerna vid stor förstoring. 3. Textarea ärver inte "line-height: 1.2" från body? Safari 3.0.3: 1. Zoom (CTRL++ och CTRL+-) fungerar inte med numeriska tangentbordets +/-. (Pub. Beta) 2. Kör ihop kolumnerna vid stor förstoring. 3. Om det finns många ­ i ett ord, kan ibland en bokstav saknas (och även bindestrecket) vid "avstavning". Några webb-läsare klarar inte utskrift av kbd7_layout.html (som har överlagrade layouter). Däremot gör de webbläsare OK som skriver ut ett par I på Space-och backspace-tangenten (ty background = vit och foregroung =svart text). 00000000011111111112222222222333333333344444444445555555555666666666677777777778888888888899999999900000000001 12345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890