style.css

   1 @charset "utf-8";
   2
   3 /* General Fonts */
   4 html, body, div, p {
   5     font-family: DejaVu Sans, Verdana, Arial, sans-serif;
   6     font-size: 12pt;
   7 }
   8 /* Header Size & Spacing */
   9 h1 {
  10     margin-top: 0.1em;
  11     font-size: 200%;
  12     margin-bottom: 0.4em;
  13 }
  14 h2 {
  15     margin-top: 0.5em;
  16     font-size: 150%;
  17     margin-bottom: 0.2em;
  18 }
  19 h3 {
  20     margin-top: 0.5em;
  21     font-size: 135%;
  22     margin-bottom: 0.1em;
  23 }
  24 h4 {
  25     margin-top: 0.5em;
  26     font-size: 120%;
  27     margin-bottom: 0.0em;
  28 }
  29
  30 /* Layout and Color stuff */
  31 /* General page structure */
  32 body {
  33     padding: 0.8em;
  34     margin: 0;
  35     color:#DDD;
  36     background-color:#505050;
  37 }
  38 #frame {
  39     margin: 0 auto;
  40     max-width: calc(50em + 2*11em); /* content width plus 2*navi width */
  41 }
  42
  43 /* The inner box */
  44 #title, #content {
  45     border: solid #121212 1px;
  46     background-color: #252525;
  47     margin: 0 11.0em; /* navi width */
  48     padding: 0;
  49 }
  50 #title {
  51     border-bottom: none;
  52     border-radius: 10px 10px 0px 0px;
  53 }
  54 #title h1 {
  55     border-bottom: solid #08f 2px;
  56     text-align: center;
  57     padding: 0 0.7em;
  58     margin-bottom: 0;
  59 }
  60 #content {
  61     border-top: none;
  62     border-radius: 0px 0px 10px 10px;
  63     display: block;
  64     padding: 0.7em;
  65     padding-top: 1px; /* If we use 0 here, things get ugly. What?!? */
  66 }
  67
  68 /* Navigation menu */
  69 #navi {
  70     /* No border, no padding, so all the width computations become easy. */
  71     float: left;
  72     background-color:#505050;
  73     width: 11.0em; /* navi width */
  74     padding: 0;
  75     margin: 0;
  76 }
  77 #navi ul {
  78     margin: 0px;
  79     padding: 0px;
  80     list-style-type: none;
  81 }
  82 #navi ul ul {
  83     /* Indentation for nested nodes */
  84     margin-left: 1.2em;
  85 }
  86 #navi li {
  87     /* Border around the links */
  88     margin-bottom:0.1em;
  89     background-color: #252525;
  90     border-left: solid #36ff00 2px;
  91     border-right: solid #36ff00 2px;
  92     border-top-left-radius: 10px;
  93     border-bottom-left-radius: 10px;
  94 }
  95 #navi li a {
  96     display: block;
  97     width: 100%;
  98
  99     color: #9ed2ff;
 100     font-size:110%;
 101     text-decoration: none;
 102     text-align: center;
 103 }
 104 #navi li.current
 105 {
 106     border-color: #ffa700;
 107 }
 108 #navi li:hover {
 109     border-color: #08f;
 110     border-radius: 0;
 111 }
 112 #navi li:hover a {
 113     color: #DDD;
 114 }
 115
 116 /* Small screens */
 117 @media screen and (max-width:60em) {
 118     #frame, #title, #content, #navi {
 119         margin: 0;
 120         width: auto;
 121         max-width: none;
 122         clear: both;
 123     }
 124     #navi {
 125         /* Place navi above the title */
 126         float: none;
 127         border: solid #121212 1px;
 128         border-bottom: none;
 129         background-color: #252525;
 130         padding: 0;
 131     }
 132     #navi ul, #navi ul ul, #navi li, #navi li a {
 133         margin: 0;
 134         padding: 0;
 135         display: inline;
 136     }
 137     #navi > ul {
 138         padding: 0.3em;
 139         display: block;
 140         border-bottom: solid #36ff00 2px;
 141     }
 142     /* Display only parent and children, and deocare them appropriately */
 143     #navi li {
 144         display:inline-block;
 145         margin: 0 0.2em;
 146     }
 147     #navi li.sibling {
 148         display:none;
 149     }
 150     #navi li.parent:before, #navi li.current:before {
 151         content: "» ";
 152     }
 153     #navi li.child:before {
 154         content: "» ";
 155     }
 156     #navi li.child + li:before {
 157         content: "| ";
 158     }
 159     #navi li {
 160         border: none;
 161     }
 162     #navi li.current a {
 163         text-decoration: underline;
 164     }
 165 }
 166
 167 /* Printing */
 168 @media print {
 169     #frame, #title, #content {
 170         margin: 0;
 171         padding: 0;
 172         width: auto;
 173         max-width: none;
 174         border: none;
 175     }
 176     #title h1 {
 177         border: none;
 178     }
 179     #navi {
 180         display: none;
 181     }
 182 }
 183
 184 /* RST styling */
 185 article.rst dt {
 186     font-weight: bold;
 187 }
 188 article.rst dd {
 189     margin-bottom: 1em;
 190 }
 191 article.rst a.rst-footnote {
 192     vertical-align: super;
 193 }
 194 article.rst div.rst-footnote {
 195     display: table;
 196 }
 197 article.rst div.rst-footnote > * {
 198     display: table-cell;
 199 }
 200 article.rst div.rst-footnote a {
 201     min-width: 3em;
 202 }
 203 article.rst .rst-literal, article.rst pre {
 204     font-family: monospace;
 205     font-size: 82%;
 206 }
 207 article.rst .rst-literal {
 208     padding: 0.1em 0.2em;
 209     background-color: #505050;
 210 }
 211 article.rst pre {
 212     padding: 0.6em;
 213     background-color: #505050;
 214 }
 215
 216 /* Content styling */
 217 #content p {
 218     margin: 0.5em 0;
 219     line-height: 1.3;
 220 }
 221 #content a {
 222     color:#9ed2ff;
 223 }
 224 #content a:visited {
 225     color:#bfe1ff;
 226 }
 227 #content a:hover {
 228     color:#5089ba;
 229 }