projects.mako.cc - scuttle/blob - scuttle.css

   1 /* BASE */
   2
   3 * {
   4   font-family: helvetica, arial, sans-serif;
   5 }
   6 a {
   7   color: #47A;
   8   text-decoration: none;
   9 }
  10 a:hover {
  11   color: #258;
  12   text-decoration: underline;
  13 }
  14 a img {
  15   border: 0;
  16 }
  17 body {
  18   background-color: #FFF;
  19   margin: 0;
  20   padding: 0;
  21 }
  22 input[type=submit] {
  23   background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#FFF), to(#DDD));
  24   border: 1px solid #CCC;
  25   border-radius: 5px;
  26   font-size: 13px;
  27   padding: 4px 12px;
  28   text-shadow: #FFF 1px 1px 0px;
  29   -moz-border-radius: 5px;
  30 }
  31 input[type=submit]:active {
  32   background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#DDD), to(#FFF));
  33 }
  34 input[type=submit]:hover {
  35   border-color: #666;
  36 }
  37 input[type=text],
  38 input[type=password],
  39 select,
  40 textarea {
  41   border: 1px solid #CCC;
  42   border-radius: 3px;
  43   font-size: 13px;
  44   padding: 4px 5px;
  45   -moz-border-radius: 3px;
  46 }
  47 p.error,
  48 p.success {
  49   border: 1px solid;
  50   font-size: small;
  51   margin: .5em;
  52   padding: .5em;
  53   width: 70%;
  54 }
  55 p.error {
  56   background: #FCC;
  57   border-color: #966;
  58   color: #633;
  59 }
  60 p.success {
  61   background: #CFC;
  62   border-color: #696;
  63   color: #363;
  64 }
  65 td#availability {
  66   color: #285;
  67   font-weight: bold;
  68 }
  69 td#availability.not-available {
  70   color: #F00;
  71 }
  72 textarea {
  73   font-size: small;
  74   padding: .2em;
  75 }
  76 th {
  77   padding-right: 1em;
  78   text-align: right;
  79 }
  80
  81 /* HEADER */
  82
  83 div#header {
  84   background: #FFF url('bg_header.png') bottom repeat-x;
  85   border-bottom: 3px solid #9CD;
  86   clear: both;
  87 }
  88 div#header:after {
  89   content: ".";
  90   display: block;
  91   height: 0;
  92   clear: both;
  93   visibility: hidden;
  94 }
  95 * html div#header {
  96   height: 1%;
  97 }
  98 h1 {
  99   float: left;
 100   font-size: x-large;
 101   font-weight: bold;
 102   margin: 0;
 103   padding: 1em;
 104   text-transform: lowercase;
 105 }
 106 html > body h1 {
 107   background: url('logo.png') no-repeat 10px;
 108   padding-left: 75px;
 109 }
 110 html > body div#header.popup h1 {
 111   background: url('logo_24.png') no-repeat 10px;
 112   padding: .5em .5em .5em 50px;
 113 }
 114 h1 a {
 115   color: #000;
 116   text-shadow: 2px 2px 2px #9CD;
 117 }
 118 h1 a:hover {
 119   color: #000;
 120 }
 121 h2 {
 122   background: #666 url('bg_bar.png') center center repeat-x;
 123   border-bottom: 3px solid #DDD;
 124   clear: both;
 125   color: #DDD;
 126   font-size: medium;
 127   letter-spacing: .1em;
 128   margin: 0 0 1em 0;
 129   padding: .5em 1em;
 130   text-shadow: 1px 1px 1px #333;
 131   text-transform: lowercase;
 132 }
 133
 134 /* NAVIGATION */
 135
 136 ul#navigation {
 137   list-style-type: none;
 138   margin: 0;
 139   padding: 1.9em 1em;
 140   text-transform: lowercase;
 141   width: auto;
 142 }
 143 ul#navigation a {
 144   font-size: medium;
 145   font-weight: bold;
 146   padding: .2em .5em;
 147 }
 148 ul#navigation a:hover {
 149   background: #7AD;
 150   color: #FFF;
 151 }
 152 ul#navigation li {
 153   float: left;
 154 }
 155 ul#navigation li.access {
 156   float: right;
 157 }
 158
 159 /* BOOKMARKS */
 160
 161 ol#bookmarks {
 162   list-style-type: none;
 163   margin: 0;
 164   padding: 0 1em;
 165   width: 70%;
 166 }
 167 html > body ol#bookmarks {
 168   margin: 0 1em;
 169   padding: 0;
 170 }
 171 div.link a {
 172   color: blue;
 173   font-size: medium;
 174 }
 175 div.link a:visited {
 176   color: purple;
 177 }
 178 div.meta {
 179   color: #285;
 180 }
 181 div.meta span {
 182   color: #F00;
 183 }
 184 /* bookmark date fields: updated and created */
 185 div.meta span#date-updated {
 186     color: #285;
 187 }
 188 div.meta span#date-original {
 189     background: #eee;
 190     color: #aaa;
 191 }
 192 li.xfolkentry {
 193   border-bottom: 1px solid #DDD;
 194   margin-bottom: 0;
 195   padding: 1em .5em;
 196 }
 197 html > body li.xfolkentry {
 198   border-bottom: 1px dotted #AAA;
 199 }
 200 li.xfolkentry div {
 201   padding: .1em;
 202 }
 203 li.xfolkentry.deleted {
 204   opacity: .5;
 205 }
 206 li.xfolkentry.private {
 207   border-left: 3px solid #F00;
 208 }
 209 li.xfolkentry.shared {
 210   border-left: 3px solid #FA0;
 211 }
 212
 213 /* SIDEBAR */
 214
 215 div#sidebar {
 216   font-size: small;
 217   position: absolute;
 218   right: 1em;
 219   top: 10em;
 220   width: 25%;
 221 }
 222 div#sidebar a {
 223   color: #995;
 224 }
 225 div#sidebar a:hover {
 226   color: #773;
 227 }
 228 div#sidebar div {
 229   background: #FFF url('bg_sidebar.png') bottom repeat-x;
 230   border: 1px solid #CC8;
 231   color: #555;
 232   margin-bottom: 1em;
 233 }
 234 div#sidebar h2 {
 235   background: transparent;
 236   border: 0;
 237   color: #995;
 238   letter-spacing: 0;
 239   margin: 0;
 240   padding: .5em 0;
 241   text-shadow: none;
 242 }
 243 div#sidebar hr {
 244   display: none;
 245 }
 246 div#sidebar p {
 247   margin: 1em;
 248 }
 249 div#sidebar p.tags a {
 250   margin: 0;
 251 }
 252 div#sidebar table {
 253   margin: .5em .5em 0 .5em;
 254 }
 255 div#sidebar table td {
 256   padding-bottom: .25em;
 257   padding-right: .5em;
 258 }
 259 div#sidebar ul {
 260   list-style-type: none;
 261   margin: 0;
 262   padding: .5em;
 263 }
 264 div#sidebar ul li {
 265   margin: .5em 0;
 266 }
 267
 268 /* TAGS */
 269
 270 p.tags {
 271   line-height: 2.25em;
 272   margin: 2em 10%;
 273   text-align: justify;
 274   vertical-align: middle;
 275 }
 276 p.tags a,
 277 p.tags span {
 278   color: #47A;
 279   margin-right: .5em;
 280 }
 281 p.tags span:hover {
 282   cursor: pointer;
 283   text-decoration: underline;
 284 }
 285 p.tags span.selected {
 286   background: #CEC;
 287 }
 288
 289 /* PROFILE */
 290
 291 table.profile th {
 292   width: 10em;
 293 }
 294
 295 /* OTHER GUFF */
 296
 297 dd {
 298   background: #CEC;
 299   border-right: 4px solid #ACA;
 300   color: #464;
 301   padding: 6px;
 302 }
 303 dd a {
 304   color: #464;
 305 }
 306 dd a:hover {
 307   color: #000 !important;
 308   text-decoration: underline !important;
 309 }
 310
 311 dl {
 312   font-size: small;
 313   margin: 1em;
 314   width: 70%;
 315 }
 316 dl#profile dd {
 317   background: #CDE;
 318   border-color: #ABC;
 319   color: #247;
 320 }
 321 dl#profile dt {
 322   background: #BCE;
 323   border-color: #9AC;
 324   color: #245;
 325   display: block;
 326   font-weight: bold;
 327   padding: 6px;
 328 }
 329 dl#profile a {
 330   color: #446;
 331 }
 332 dl#profile a:hover {
 333   color: #000 !important;
 334   text-decoration: underline !important;
 335 }
 336 dl#meta dd {
 337   line-height: 1.5em;
 338 }
 339 dl#meta dt {
 340   background: #BDB;
 341   color: #353;
 342   display: block;
 343   font-weight: bold;
 344   padding: 6px;
 345 }
 346 dt {
 347   border-right: 4px solid #9B9;
 348 }
 349 dt a {
 350   background: #BDB;
 351   color: #353;
 352   display: block;
 353   font-weight: bold;
 354   padding: 6px;
 355 }
 356 dt a:hover {
 357   background: #ACA;
 358   border: 0;
 359 }
 360 form {
 361   margin: 0;
 362 }
 363 form#search {
 364   background: #FFF;
 365   color: #555;
 366   font-size: small;
 367   margin-bottom: 1em;
 368 }
 369 form label,
 370 form td,
 371 form th {
 372   font-size: small;
 373 }
 374 form table {
 375   margin: 0 1em;
 376 }
 377 h3 {
 378   background: #DDD;
 379   color: #555;
 380   font-size: small;
 381   letter-spacing: .2em;
 382   margin: 2em 1em 1em 1em;
 383   padding: .5em .75em;
 384   text-shadow: 1px 1px 1px #FFF;
 385 }
 386 li {
 387   font-size: small;
 388   margin-bottom: .5em;
 389 }
 390 p {
 391   font-size: small;
 392   margin: 1em;
 393 }
 394 p#sort {
 395   color: #CCC;
 396   font-size: small;
 397   float: right;
 398   margin: 0;
 399   position: absolute;
 400   right: 0;
 401   top: 6.9em;
 402 }
 403 html > body p#sort {
 404   margin-right: .75em;
 405 }
 406 p#sort a {
 407   background: #AAA;
 408   color: #555;
 409   font-weight: normal;
 410   margin-right: .5em;
 411   padding: 0 1em;
 412   border-radius: .25em;.
 413 }
 414 html > body p#sort a {
 415   margin-right: 0;
 416 }
 417 p#sort a:hover {
 418   background: #CCC;
 419   text-decoration: none !important;
 420 }
 421 p#sort span {
 422   display: none;
 423 }
 424 p.paging {
 425   font-size: small;
 426   margin-left: 1em;
 427 }
 428 p.paging a,
 429 p.paging span.disable {
 430   background: #888;
 431   color: #FFF;
 432   display: inline;
 433   margin-right: .5em;
 434   padding: .25em 1em;
 435 }
 436 p.paging a:hover {
 437   background: #666;
 438 }
 439 p.paging span {
 440   display: none;
 441 }
 442 p.paging span.disable {
 443   background: #DDD;
 444   color: #AAA;
 445 }
 446 div.collapsible p.tags {
 447   line-height: 2.25em;
 448   margin: 1em 2em;
 449 }
 450 th label {
 451   padding-right: 1em;
 452 }
 453 ul {
 454   margin-right: 1em;
 455   width: 75%;
 456 }