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