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