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