Pileus Git - ~andy/aweather-web/blob - data/global.css

   1 /* Clearn defaults */
   2 * {
   3         margin: 0;
   4         padding: 0;
   5         outline: 0;
   6         position: relative;
   7 }
   8
   9 h1, h2, h3, h4, h5, h6 {
  10         font-weight: normal;
  11 }
  12
  13 a {
  14         color: black;
  15         text-decoration: none;
  16 }
  17
  18 a img {
  19         border: none;
  20 }
  21
  22 ul {
  23         display: block;
  24 }
  25
  26 /* Global styles */
  27 .content h1, h2 {
  28         margin-top:    1.5em;
  29         margin-bottom: 0.3em;
  30 }
  31 h3, h4, h5, h6 {
  32         margin-top: 0.8em;
  33         margin-bottom: 0.1em;
  34 }
  35 .quote {
  36         font-style: italic;
  37         font-family: serif;
  38 }
  39 .quote:before {
  40         font-weight: bold;
  41         content: '“';
  42 }
  43 .quote:after {
  44         font-weight: bold;
  45         content: '”';
  46 }
  47 ul {
  48         padding-left: 30px;
  49 }
  50 span.code {
  51         font-family: monospace;
  52 }
  53 div.code {
  54         font-family: monospace;
  55         background-color: #666;
  56         border: solid 1px #222;
  57         padding: 2px 6px 2px 6px;
  58         margin-bottom: 5px;
  59         color: white;
  60         font-weight: bold;
  61 }
  62
  63 /* Layout */
  64 body {
  65         background: fixed;
  66         background-image: url('../images/main-bg.png');
  67         background-repeat: repeat-x;
  68         background-color: white;
  69         margin-left: auto;
  70         margin-right: auto;
  71         font-family: 'DejaVu Sans Condensed', Arial, sans-serif;
  72         font-size:   0.8em;
  73         line-height: 1.5em;
  74         width: 850px;
  75         /* width: 80%; */
  76 }
  77
  78 /* Header stuff */
  79 .top {
  80         height: 80px;
  81         margin-top: 15px;
  82         border-collapse: collapse;
  83 }
  84
  85 .top * {
  86         float: left;
  87 }
  88
  89 .logo {
  90         width: 130px;
  91         z-index: 1;
  92 }
  93
  94 .title {
  95         font-size: 22pt;
  96         font-weight: bold;
  97         font-style: italic;
  98         color: #222;
  99 }
 100
 101 .nav {
 102         position: absolute;
 103         top: 45px;
 104         left: 135px;
 105         right: 0px;
 106         z-index: 1;
 107         height: 36px;
 108         margin: 0 0px 0 30px;
 109         padding: 0 15px 0 15px;
 110         border-radius: 8px;
 111         -moz-border-radius: 8px;
 112         background-image: url("../images/nav-bg.png");
 113         box-shadow: 0px 2px 2px #a0a0ff;
 114 }
 115
 116 .nav .sep {
 117         width: 0px;
 118         height: 36px;
 119         border-left:  solid 1px #222;
 120         border-right: solid 1px #777;
 121         margin: 0 10px 0 10px;
 122 }
 123
 124 .nav a {
 125         display: block;
 126         margin: 5px 7px 5px 7px;
 127         padding: 2px;
 128         font-size: 12pt;
 129         font-weight: normal;
 130         color: #f4f4f4;
 131         border: solid 1px transparent;
 132         border-radius: 4px;
 133         -moz-border-radius: 4px;
 134 }
 135
 136 .nav a:hover {
 137         text-decoration: underline;
 138 }
 139
 140 .nav a.cur {
 141         background-color: #666;
 142         border: solid 1px #888;
 143         text-decoration: none;
 144 }
 145
 146 /* Content */
 147 .content {
 148         background-color: white;
 149         color: black;
 150         margin-top: 20px;
 151         padding: 24px;
 152         border:     solid 1px #bce;
 153         border-top: solid 1px #abd;
 154         border-radius: 8px;
 155         -moz-border-radius: 8px;
 156 }
 157
 158 .content hr {
 159         margin: 25px 0 25px 0;
 160 }
 161
 162 .content a {
 163         text-decoration: underline;
 164 }
 165
 166 .msg {
 167         color: red;
 168         clear: both;
 169         position: relative;
 170         top: -10px;
 171         font-weight: bold;
 172         font-style: italic;
 173         text-align: center;
 174 }
 175
 176 /* Footer */
 177 .footer, .footer * {
 178         text-align: center;
 179         font-size: 8pt;
 180         margin-top: 5px;
 181         margin-bottom: 15px;
 182         color: #444;
 183 }
 184 .footer a {
 185         text-decoration: underline;
 186 }
 187
 188 /***********************
 189  * Page specific stuff *
 190  ***********************/
 191 /* Index page */
 192 .buttons {
 193         float: right;
 194         width: 200px;
 195         margin-left: 25px;
 196 }
 197
 198 .buttons > * {
 199         margin-bottom: 10px;
 200 }
 201
 202 .download {
 203         display: block;
 204         z-index: 1;
 205         height: 62px;
 206         color: white;
 207         font-size: 11pt;
 208         padding: 8px 10px 8px 10px;
 209         background-image: url("../images/dl-bg.png");
 210         border-radius: 10px;
 211         -moz-border-radius: 10px;
 212         box-shadow: 0px 2px 2px rgba(0,0,0,0.30);
 213 }
 214
 215 .download > * {
 216         display: block;
 217 }
 218
 219 .download:first-line {
 220         font-weight: bold;
 221         font-style: italic;
 222         line-height: 2em;
 223 }
 224
 225 .download img {
 226         position: absolute;
 227         top: 10px;
 228         right: 10px;
 229 }
 230
 231 .screen {
 232         float: right;
 233         margin-left: 25px;
 234 }
 235
 236 /* Screnshots */
 237 .gallery {
 238         padding: 0px; /* override ul */
 239         margin: 20px;
 240         font-size: larger;
 241 }
 242 .gallery > * {
 243         list-style: none;
 244         text-align: center;
 245         left:   0;
 246         float:  left;
 247         width:  320px;
 248         height: 350px;
 249         margin: 15px;
 250         padding-left:  15px;
 251         padding-right: 15px;
 252 }
 253 .gallery a {
 254         display: block;
 255 }
 256 .gallery img {
 257         box-shadow: 0px 2px 6px #888;
 258         margin-bottom: 4px;
 259         float: none;
 260         margin-left:   0px;
 261 }
 262
 263 /* News */
 264 .news {
 265         margin-top: 20px;
 266 }
 267 .news dt {
 268         clear: both;
 269         font-weight: bold;
 270 }
 271 .news dd {
 272         margin-left:   10px;
 273         margin-bottom: 15px;
 274 }
 275 .note {
 276         font-style: italic;
 277         text-align: center;
 278 }
 279
 280 /* Downloads */
 281 li.linux, li.windows, li.macos {
 282         list-style-type: none;
 283         background-repeat: no-repeat;
 284         padding-left: 50px;
 285         margin: 10px 10px 20px 0;
 286         clear: both;
 287 }
 288 li.linux {
 289         background-image: url("../images/os-linux.png");
 290 }
 291 li.windows {
 292         background-image: url("../images/os-windows.png");
 293 }
 294 li.macos {
 295         background-image: url("../images/os-macos.png");
 296 }
 297 dl.inline dt {
 298         display: block;
 299         float: left;
 300         clear: both;
 301         font-weight: bold;
 302         width: 8em;
 303 }
 304 dl.inline dt:after {
 305         content: ":";
 306 }
 307 h1 + .note,
 308 h2 + .note {
 309         text-align: left;
 310         margin-bottom: 10px;
 311 }
 312
 313 dl.inline dt {
 314         display: block;
 315         float: left;
 316         clear: both;
 317         font-weight: bold;
 318         width: 8em;
 319 }
 320 dl.inline dt:after {
 321         content: ":";
 322 }
 323 dl.small dt {
 324         width: 4em;
 325 }