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

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