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 }
  52 div.code {
  53         font-family: monospace;
  54         background-color: #666;
  55         border: solid 1px #222;
  56         padding: 2px 6px 2px 6px;
  57         margin-bottom: 5px;
  58         color: white;
  59         font-weight: bold;
  60 }
  61
  62 /* Layout */
  63 body {
  64         background: fixed;
  65         background-image: url('../images/main-bg.png');
  66         background-repeat: repeat-x;
  67         background-color: white;
  68         margin-left: auto;
  69         margin-right: auto;
  70         font-family: 'DejaVu Sans Condensed', Arial, sans-serif;
  71         font-size:   0.8em;
  72         line-height: 1.5em;
  73         width: 850px;
  74         /* width: 80%; */
  75 }
  76
  77 /* Header stuff */
  78 .top {
  79         height: 80px;
  80         margin-top: 15px;
  81         border-collapse: collapse;
  82         position: relative;
  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         padding-bottom: 36px;
 153         border:     solid 1px #bce;
 154         border-top: solid 1px #abd;
 155         border-radius: 8px;
 156         -moz-border-radius: 8px;
 157 }
 158
 159 .content hr {
 160         margin: 25px 0 25px 0;
 161 }
 162
 163 .content a {
 164         text-decoration: underline;
 165 }
 166
 167 .msg {
 168         color: red;
 169         clear: both;
 170         position: relative;
 171         top: -10px;
 172         font-weight: bold;
 173         font-style: italic;
 174         text-align: center;
 175 }
 176
 177 /* Footer */
 178 .footer, .footer * {
 179         text-align: center;
 180         font-size: 8pt;
 181         margin-top: 5px;
 182         margin-bottom: 15px;
 183         color: #444;
 184 }
 185 .footer a {
 186         text-decoration: underline;
 187 }
 188
 189 /***********************
 190  * Page specific stuff *
 191  ***********************/
 192 /* Index page */
 193 .buttons {
 194         float: right;
 195         width: 200px;
 196         margin-left: 25px;
 197 }
 198
 199 .buttons > * {
 200         margin-bottom: 10px;
 201 }
 202
 203 .download {
 204         position: relative;
 205         display: block;
 206         z-index: 1;
 207         height: 62px;
 208         color: white;
 209         font-size: 11pt;
 210         text-decoration: none;
 211         padding: 8px 25px 8px 25px;
 212         background-image: url("../images/dl-bg.png");
 213         border-radius: 10px;
 214         -moz-border-radius: 10px;
 215         box-shadow: 0px 2px 2px rgba(0,0,0,0.30);
 216 }
 217
 218 .download > * {
 219         display: block;
 220 }
 221
 222 .download:first-line {
 223         font-weight: bold;
 224         font-style: italic;
 225         line-height: 2em;
 226 }
 227
 228 .download img {
 229         position: absolute;
 230         top:   10px;
 231         right: 10px;
 232 }
 233
 234 .screen {
 235         float: right;
 236         margin-left:  25px;
 237         margin-right: 25px;
 238 }
 239
 240 /* Screnshots */
 241 .gallery {
 242         padding: 0px; /* override ul */
 243         margin: 20px;
 244         font-size: larger;
 245 }
 246 .gallery > * {
 247         list-style: none;
 248         text-align: center;
 249         left:   0;
 250         float:  left;
 251         width:  320px;
 252         height: 350px;
 253         margin: 15px;
 254         padding-left:  15px;
 255         padding-right: 15px;
 256 }
 257 .gallery a {
 258         display: block;
 259 }
 260 .gallery img {
 261         box-shadow: 0px 2px 6px #888;
 262         margin-bottom: 4px;
 263         float: none;
 264         margin-left:   0px;
 265 }
 266
 267 /* News */
 268 .news {
 269         margin-top: 20px;
 270 }
 271 .news dt {
 272         clear: both;
 273         font-weight: bold;
 274 }
 275 .news dd {
 276         margin-left:   10px;
 277         margin-bottom: 15px;
 278 }
 279 .note {
 280         font-style: italic;
 281         text-align: center;
 282 }
 283
 284 /* Downloads */
 285 li.linux, li.windows, li.macos {
 286         list-style-type: none;
 287         background-repeat: no-repeat;
 288         padding-left: 50px;
 289         margin: 10px 10px 20px 0;
 290         clear: both;
 291 }
 292 li.linux {
 293         background-image: url("../images/os-linux.png");
 294 }
 295 li.windows {
 296         background-image: url("../images/os-windows.png");
 297 }
 298 li.macos {
 299         background-image: url("../images/os-macos.png");
 300 }
 301 dl.inline dt {
 302         display: block;
 303         float: left;
 304         clear: both;
 305         font-weight: bold;
 306         width: 8em;
 307 }
 308 dl.inline dt:after {
 309         content: ":";
 310 }
 311 h1 + .note,
 312 h2 + .note {
 313         text-align: left;
 314         margin-bottom: 10px;
 315 }
 316
 317 dl.inline dt {
 318         display: block;
 319         float: left;
 320         clear: both;
 321         font-weight: bold;
 322         width: 8em;
 323 }
 324 dl.inline dt:after {
 325         content: ":";
 326 }
 327 dl.small dt {
 328         width: 4em;
 329 }