improved basic and print styles

css/basic.css

@@ -20,8 +20,9 @@ body {
     padding: 0;
 }
 body {
-    font: normal 100%/1.4 Frutiger, Calibri, Myriad, "Nimbus Sans L", Geneva, "Helvetica Neue", Helvetica, Arial, sans-serif;
+    font: normal 100%/1.4 Frutiger, Calibri, "Myriad Pro", Myriad, "Nimbus Sans L", Geneva, "Helvetica Neue", Helvetica, Arial, sans-serif;
     /* default font size: 100% => 16px; 93.75% => 15px; 87.5% => 14px; 81.25% => 13px; 75% => 12px */
+    -webkit-text-size-adjust: 100%;
 }
 
 
@@ -32,9 +33,7 @@ h2,
 h3,
 h4,
 h5,
-h6,
-caption,
-legend {
+h6 {
     font-family: Constantia, Utopia, Lucidabright, Lucida, Georgia, "Nimbus Roman No9 L", serif;
     font-weight: bold;
     color: __text_neu__;
@@ -48,9 +47,7 @@ legend {
 [dir=rtl] h3,
 [dir=rtl] h4,
 [dir=rtl] h5,
-[dir=rtl] h6,
-[dir=rtl] caption,
-[dir=rtl] legend {
+[dir=rtl] h6 {
     clear: right;
 }
 
@@ -80,6 +77,17 @@ h6 {
 }
 /* bottom margin = 1 / font-size */
 
+caption,
+figcaption,
+summary,
+legend {
+    font-style: italic;
+    font-weight: normal;
+    line-height: 1.2;
+    padding: 0;
+    margin: 0 0 .35em;
+}
+
 
 /*____________ basic margins and paddings ____________*/
 
@@ -91,6 +99,8 @@ pre,
 table,
 hr,
 blockquote,
+figure,
+details,
 fieldset,
 address {
     margin: 0 0 1.4em 0; /* bottom margin = line-height */
@@ -175,7 +185,6 @@ table {
 caption {
     caption-side: top;
     text-align: left;
-    margin: 0 0 .3em;
 }
 [dir=rtl] caption {
     text-align: right;
@@ -187,16 +196,15 @@ td {
     margin: 0;
     vertical-align: top;
     border: 1px solid __border__;
-    text-align: left;
-}
-[dir=rtl] td,
-[dir=rtl] th {
-    text-align: right;
 }
 th {
     font-weight: bold;
     background-color: __background_alt__;
     color: inherit;
+    text-align: left;
+}
+[dir=rtl] th {
+    text-align: right;
 }
 
 
@@ -239,10 +247,19 @@ img {
 }
 
 img,
-object {
+object,
+embed,
+iframe,
+video,
+audio {
     max-width: 100%;
 }
 
+iframe {
+    border-width: 0;
+    background-color: inherit;
+}
+
 /* IE8 and below won't display the images otherwise */
 button img {
     max-width: none;
@@ -259,15 +276,23 @@ hr {
 
 acronym,
 abbr {
+    font-style: normal;
+}
+acronym[title],
+abbr[title] {
     cursor: help;
     border-bottom: 1px dotted;
-    font-style: normal;
 }
 em acronym,
 em abbr {
     font-style: italic;
 }
 
+mark {
+    background: __highlight__;
+    color: inherit;
+}
+
 pre,
 code,
 samp,
@@ -312,6 +337,10 @@ sup {
     vertical-align: super;
 }
 
+small {
+    font-size: .8em;
+}
+
 /*____________ forms ____________*/
 
 form {
@@ -321,11 +350,14 @@ form {
 }
 
 fieldset {
-    padding: 1em 1em 0;
-    border: 1px solid __text_alt__;
+    padding: .7em 1em 0;
+    padding: .7rem 1rem; /* for those browsers understanding :last-child */
+    border: 1px solid #999;
+}
+fieldset > :last-child {
+    margin-bottom: 0;
 }
 legend {
-    margin: 0;
     padding: 0 .1em;
 }
 
@@ -339,30 +371,44 @@ textarea,
 button,
 select,
 optgroup,
-option {
+option,
+keygen,
+output,
+meter,
+progress {
     font: inherit;
     color: inherit;
     /* background-color destroys button look */
-    line-height: 1;
+    line-height: normal;
     margin: 0;
     vertical-align: middle;
+    -moz-box-sizing: content-box;
+    -webkit-box-sizing: content-box;
+    box-sizing: content-box;
 }
 
-input[type=text],
-input[type=password],
+input,
+button,
+select,
+keygen,
 textarea {
     padding: .1em;
 }
 input[type=radio],
 input[type=checkbox],
+input[type=image],
 input.check {
     padding: 0;
 }
 
 input[type=submit],
+input[type=button],
+input[type=reset],
 input.button,
 button {
     cursor: pointer;
+    overflow: visible;
+    padding: .1em .4em;
 }
 #IE6 .dokuwiki input.button,
 #IE6 .dokuwiki button,
@@ -378,6 +424,20 @@ button[readonly] {
     cursor: auto;
 }
 
+input:focus,
+button:focus,
+select:focus,
+keygen:focus,
+textarea:focus {
+    box-shadow: 0 0 5px #999;
+    outline: 0;
+}
+input::-moz-focus-inner,
+button::-moz-focus-inner {
+    border: 0;
+    padding: 0;
+}
+
 optgroup {
     font-style: italic;
     font-weight: bold;

css/print.css

@@ -5,55 +5,64 @@
  */
 
 body {
-    /*
-    font: normal 12pt/1.2 serif;
-    color: #000;
+    font: normal 87.5%/1.3 Garamond, Baskerville, "Hoefler Text", "Nimbus Roman No9 L", serif;
     background-color: #fff;
-    */
+    color: #000;
 }
 
 /* hide certain sections */
 .a11y,
-div.notify, div.info, div.success, div.error,
-#dokuwiki__header .tools, #dokuwiki__aside,
-.dokuwiki .breadcrumbs, .dokuwiki .toc, #dw__toc, .dokuwiki .secedit,
-#dokuwiki__pagetools, #dokuwiki__footer {
+audio,
+video,
+div.notify,
+div.info,
+div.success,
+div.error,
+#dokuwiki__header .tools,
+#dokuwiki__aside,
+.dokuwiki .breadcrumbs,
+.dokuwiki .toc,
+#dw__toc,
+.dokuwiki .secedit,
+#dokuwiki__pagetools,
+#dokuwiki__footer {
     display: none;
 }
 
-.dokuwiki h1,
-.dokuwiki h2,
-.dokuwiki h3,
-.dokuwiki h4,
-.dokuwiki h5,
-.dokuwiki caption,
-.dokuwiki legend {
+h1,
+h2,
+h3,
+h4,
+h5,
+caption,
+legend {
     clear: both;
 }
 
-.dokuwiki ul {
+ul {
     list-style: disc outside;
 }
-.dokuwiki ol {
+ol {
     list-style: decimal outside;
 }
-.dokuwiki ol ol {
+ol ol {
     list-style-type: lower-alpha;
 }
-.dokuwiki ol ol ol {
+ol ol ol {
     list-style-type: upper-roman;
 }
-.dokuwiki ol ol ol ol {
+ol ol ol ol {
     list-style-type: upper-alpha;
 }
-.dokuwiki ol ol ol ol ol {
+ol ol ol ol ol {
     list-style-type: lower-roman;
 }
 
 /* undo icons */
-.dokuwiki a:link,
-.dokuwiki a:visited {
-    text-decoration: underline;
+a:link,
+a:visited {
+    text-decoration: none;
+    border-bottom: 1pt dotted;
     color: #333;
     background-color: inherit;
     background-image: none;
@@ -69,52 +78,56 @@ a.mail:after {
 }
 
 /* code blocks */
-.dokuwiki pre {
+pre {
     font-family: monospace;
 }
-.dokuwiki dl.code dt,
-.dokuwiki dl.file dt {
+dl.code dt,
+dl.file dt {
     font-weight: bold;
 }
 
 /* images */
-.dokuwiki img {
+img {
     border-width: 0;
     vertical-align: middle;
 }
-.dokuwiki img.media {
+img.media {
     margin: .2em 0;
 }
-.dokuwiki img.medialeft {
+img.medialeft {
     margin: .2em 1.5em .2em 0;
 }
-.dokuwiki img.mediaright {
+img.mediaright {
     margin: .2em 0 .2em 1.5em;
 }
-.dokuwiki img.mediacenter {
+img.mediacenter {
     margin: .2em auto;
 }
 
 /* align table cells */
-.dokuwiki .leftalign {
+.leftalign {
     text-align: left;
 }
-.dokuwiki .centeralign {
+.centeralign {
     text-align: center;
 }
-.dokuwiki .rightalign {
+.rightalign {
     text-align: right;
 }
 
 /* underline */
-.dokuwiki em.u {
+em.u {
     font-style: normal;
     text-decoration: underline;
 }
-.dokuwiki em em.u {
+em em.u {
     font-style: italic;
 }
 
+mark {
+    font-weight: bold;
+}
+
 div.clearer {
     clear: both;
     line-height: 0;
@@ -122,36 +135,36 @@ div.clearer {
     overflow: hidden;
 }
 
-.dokuwiki blockquote {
+blockquote {
     padding: 0 10pt;
     margin: 0;
     border: solid #ccc;
     border-width: 0 0 0 2pt;
 }
-[dir=rtl] .dokuwiki blockquote {
+[dir=rtl] blockquote {
     border-width: 0 2pt 0 0;
 }
 
 /* tables */
-.dokuwiki table {
+table {
     border-collapse: collapse;
     empty-cells: show;
     border-spacing: 0;
     border: 1pt solid #ccc;
 }
-.dokuwiki th,
-.dokuwiki td {
+th,
+td {
     padding: 3pt 5pt;
     margin: 0;
     vertical-align: top;
     border: 1pt solid #666;
     text-align: left;
 }
-[dir=rtl] .dokuwiki th,
-[dir=rtl] .dokuwiki td {
+[dir=rtl] th,
+[dir=rtl] td {
     text-align: right;
 }
-.dokuwiki th {
+th {
     font-weight: bold;
 }