testcms-final-anon/themes/default/css/style.css

   1 /**
   2  *    TestCMS' default theme
   3  */
   4
   5 ::-webkit-selection {
   6         background: #ffc;
   7         color: #222;
   8 }
   9 ::-moz-selection {
  10         background: #ffc;
  11         color: #222;
  12 }
  13 ::selection {
  14         background: #ffc;
  15         color: #222;
  16 }
  17
  18 html {
  19     min-height: 100%;
  20 }
  21
  22 body, input, textarea, button {
  23         color: #777;
  24         font: 16px/26px "Helvetica Neue", sans-serif;
  25 }
  26
  27 h1 {
  28     font-size: 40px;
  29     line-height: 48px;
  30     font-weight: bold;
  31
  32     color: #333;
  33
  34     margin-bottom: 30px;
  35 }
  36
  37 a, a * {
  38     -webkit-transition: color .25s;
  39     -moz-transition: color .25s;
  40     -ms-transition: color .25s;
  41     -o-transition: color .25s;
  42     transition: color .25s;
  43 }
  44     a:active {
  45         -webkit-transform: translateY(1px);
  46     }
  47
  48 .content a, .comments a {
  49     color: #2082ab;
  50 }
  51     .content a:hover, .comments a:hover {
  52         color: #222;
  53     }
  54
  55 .wrap, .content {
  56         width: 900px;
  57         margin: 0 auto;
  58
  59         text-align: left;
  60 }
  61     .content {
  62         width: 730px;
  63         margin: 60px auto 80px;
  64
  65         padding-left: 170px;
  66     }
  67         .content img, .content .items {
  68             margin-left: -170px;
  69
  70             width: 900px;
  71             height: auto;
  72         }
  73         .content p {
  74             padding-bottom: 15px;
  75         }
  76
  77 form#search {
  78         position: relative;
  79         background: #ddd;
  80
  81         padding: 10px 0;
  82 }
  83         form#search input {
  84                 padding: 8px 12px;
  85                 color: #333;
  86
  87                 border: none;
  88                 width: 900px;
  89         }
  90
  91 button {
  92     background: #2082ab;
  93
  94     color: #fff;
  95     font-weight: bold;
  96
  97     border: none;
  98
  99     padding: 8px 15px;
 100
 101     -webkit-border-radius: 3px;
 102     -moz-border-radius: 3px;
 103     border-radius: 3px;
 104 }
 105
 106 header#top {
 107         background: #f3f3f3;
 108         padding: 50px 0 20px;
 109 }
 110         header#top div {
 111                 position: relative;
 112         }
 113         header#top a#logo {
 114                 color: #444;
 115                 font-size: 18px;
 116                 line-height: 21px;
 117
 118                 text-decoration: none;
 119
 120                 display: block;
 121                 width: 130px;
 122
 123                 padding-bottom: 4px;
 124         }
 125             header#top a#logo:hover, header#top nav li.active a, header#top nav li.active a:hover {
 126                 color: #2082ab;
 127             }
 128         header#top nav {
 129                 position: absolute;
 130                 left: 170px;
 131                 bottom: 0;
 132         }
 133                 header#top nav li {
 134                         float: left;
 135                         position: relative;
 136
 137                         margin-right: 50px;
 138                 }
 139                     header#top nav li.active:after {
 140                         content: '';
 141                         display: block;
 142
 143                         position: absolute;
 144                         left: 50%;
 145                         bottom: -20px;
 146
 147                         width: 0;
 148                         height: 0;
 149
 150                         border-left: 8px solid transparent;
 151                         border-right: 8px solid transparent;
 152                         border-bottom: 8px solid #fff;
 153
 154                         margin-left: -8px;
 155                     }
 156                 header#top nav li a {
 157                         color: #888;
 158
 159                         font-weight: bold;
 160                         font-size: 14px;
 161
 162                         text-decoration: none;
 163
 164                         display: block;
 165                 }
 166                     header#top nav li a:hover {
 167                         color: #444;
 168                     }
 169         header#top img#search {
 170                 cursor: pointer;
 171
 172                 position: absolute;
 173                 right: 0;
 174                 bottom: 0;
 175         }
 176
 177 ul.items {
 178     list-style: none;
 179
 180     padding: 60px 0 80px;
 181 }
 182     ul.items li {
 183         clear: both;
 184         overflow: hidden;
 185
 186         padding-bottom: 20px;
 187     }
 188     ul.items li a {
 189         display: block;
 190         text-decoration: none;
 191     }
 192         ul.items li a time {
 193             display: block;
 194             float: left;
 195
 196             color: #aaa;
 197             font-size: 13px;
 198             line-height: 34px;
 199
 200             width: 130px;
 201             padding-right: 40px;
 202             text-align: right;
 203         }
 204             ul.items li a:hover time {
 205                 color: #7ac1df;
 206             }
 207         ul.items li a h2 {
 208             font-size: 28px;
 209             line-height: 30px;
 210
 211             color: #555;
 212
 213             display: block;
 214             float: left;
 215
 216             width: 730px;
 217         }
 218             ul.items li a:hover h2 {
 219                 color: #2082ab;
 220             }
 221
 222 section.comments {
 223     width: 900px;
 224     margin: 0 auto 50px;
 225     padding-top: 30px;
 226
 227     text-align: left;
 228
 229     border-top: 1px solid #eee;
 230 }
 231     section.comments h1, section.comments form.commentform legend {
 232         font-weight: bold;
 233         font-size: 22px;
 234
 235         color: #555;
 236     }
 237         section.comments h1 a {
 238             float: right;
 239             font-size: 15px;
 240         }
 241     section.comments ul {
 242         list-style: none;
 243         overflow: hidden;
 244
 245         padding-left: 170px;
 246         padding-bottom: 30px;
 247     }
 248         section.comments ul li {
 249             float: left;
 250             width: 670px;
 251
 252             margin-bottom: 30px;
 253             padding: 30px;
 254
 255             background: #fafafa;
 256         }
 257         section.comments h2 {
 258             color: #555;
 259             font-size: 18px;
 260             line-height: 30px;
 261
 262             float: left;
 263             width: 250px;
 264         }
 265         section.comments time {
 266             float: right;
 267
 268             font: italic 13px/30px Georgia, serif;
 269         }
 270         section.comments div.content {
 271             clear: both;
 272             width: auto;
 273
 274             margin: 0;
 275             padding: 20px 0 0;
 276
 277             font-size: 15px;
 278             line-height: 25px;
 279         }
 280
 281     section.comments form.commentform {
 282         clear: both;
 283         padding-left: 170px;
 284         padding-top: 40px;
 285
 286         border-top: 1px solid #eee;
 287     }
 288         section.comments form.commentform p.notification {
 289             clear: both;
 290             float: none;
 291             padding-bottom: 25px;
 292
 293             font-weight: bold;
 294         }
 295             section.comments form.commentform p.notification.error {
 296                 color: #c22a0a;
 297             }
 298         section.comments form.commentform legend {
 299             margin-left: -170px;
 300             margin-bottom: 20px;
 301         }
 302         section.comments form.commentform p {
 303             float: left;
 304             width: 365px;
 305
 306             position: relative;
 307         }
 308             section.comments form.commentform p.email {
 309                 position: relative;
 310                 right: -15px;
 311             }
 312             section.comments form.commentform p.textarea {
 313                 width: 630px;
 314             }
 315             section.comments form.commentform p em {
 316                 font: italic 13px Georgia, serif;
 317
 318                 position: absolute;
 319                 top: 5px;
 320                 right: 15px;
 321
 322                 color: #aaa;
 323             }
 324         section.comments form.commentform label {
 325             display: block;
 326             font-size: 15px;
 327
 328             padding-bottom: 8px;
 329         }
 330         section.comments form.commentform input, section.comments form.commentform textarea {
 331             width: 320px;
 332             padding: 8px 14px;
 333             margin-bottom: 20px;
 334
 335             border: 1px solid #bbb;
 336         }
 337             section.comments form.commentform textarea {
 338                 width: 700px;
 339                 min-height: 150px;
 340                 max-height: 400px;
 341                 resize: vertical;
 342             }
 343         section.comments form.commentform button {
 344             margin-bottom: 50px;
 345         }
 346
 347 section.footnote {
 348     clear: both;
 349     width: 730px;
 350
 351     font: italic 12px/19px Georgia, serif;
 352     text-align: left;
 353     color: #aaa;
 354
 355     margin: 0 auto 60px;
 356     padding-left: 170px;
 357 }
 358
 359 footer#bottom {
 360     width: 130px;
 361     height: 80px;
 362
 363     border-top: 1px solid #f5f5f5;
 364     padding-top: 20px;
 365
 366     text-align: left;
 367     position: relative;
 368 }
 369     footer#bottom small {
 370         width: 730px;
 371         display: block;
 372         float: left;
 373
 374         font-size: 13px;
 375         color: #999;
 376     }
 377         footer#bottom small a {
 378             color: #666;
 379         }
 380         footer#bottom small a:hover {
 381             color: #333;
 382         }
 383     footer#bottom ul {
 384         clear: both;
 385         list-style: none;
 386
 387         position: relative;
 388         top: -8px;
 389
 390         width: 730px;
 391     }
 392         footer#bottom ul li {
 393             display: inline-block;
 394             float: left;
 395         }
 396         footer#bottom ul a {
 397             color: #aaa;
 398             font-size: 11px;
 399             line-height: 11px;
 400
 401             padding-right: 15px;
 402         }
 403             footer#bottom ul a:hover {
 404                 color: #777;
 405             }
 406     footer#bottom a#attribution {
 407         display: block;
 408
 409         position: absolute;
 410         left: 876px;
 411         top: 18px;
 412
 413         width: 24px;
 414         height: 22px;
 415
 416         background: url('../img/attribution.gif');
 417         text-indent: -999em;
 418
 419         opacity: .5;
 420
 421         -webkit-transition: opacity .25s;
 422         -moz-transition: opacity .25s;
 423         -ms-transition: opacity .25s;
 424         -o-transition: opacity .25s;
 425         transition: opacity .25s;
 426     }
 427         footer#bottom a#attribution:hover {
 428             opacity: 1;
 429         }
 430
 431 @media only screen and (max-width: 900px), only screen and (max-device-width: 480px) {
 432
 433     .wrap, .content {
 434         width: 90%;
 435         margin: 0 5%;
 436         padding-left: 0;
 437     }
 438         .content h1 {
 439             padding-top: 50px;
 440         }
 441
 442     form#search {
 443         padding: 10px 5%;
 444     }
 445         form#search input {
 446             width: 100%;
 447         }
 448
 449     header#top {
 450         overflow: hidden;
 451         padding-top: 40px;
 452     }
 453         header#top a#logo {
 454             width: 100%;
 455             padding-bottom: 15px;
 456         }
 457         header#top nav {
 458             position: static;
 459         }
 460             header#top nav li {
 461                 margin-right: 30px;
 462             }
 463         header#top img#search {
 464             bottom: -20px;
 465         }
 466
 467     ul.items {
 468         padding-bottom: 20px;
 469     }
 470         ul.items li a {
 471             overflow: hidden;
 472             padding-bottom: 20px;
 473         }
 474             ul.items li a time, ul.items li a h2 {
 475                 float: none;
 476                 clear: both;
 477
 478                 width: 100%;
 479             }
 480             ul.items li a time {
 481                 line-height: 22px;
 482                 text-align: left;
 483             }
 484
 485     section.comments {
 486         margin-top: 40px;
 487         width: auto;
 488     }
 489     section.comments h1 {
 490         padding: 0 20px;
 491         line-height: 20px;
 492     }
 493     section.comments ul {
 494         padding: 0;
 495     }
 496         section.comments ul li {
 497             width: 90%;
 498             padding: 20px 5%;
 499             margin-bottom: 0;
 500             border-bottom: 1px solid #ddd;
 501
 502             position: relative;
 503         }
 504             section.comments ul li:last-child {
 505                 border-bottom: none;
 506             }
 507             section.comments ul li time {
 508                 position: absolute;
 509                 right: 20px;
 510                 top: 20px;
 511             }
 512         section.comments div.content {
 513             width: auto;
 514             padding-top: 0;
 515         }
 516     section.comments form.commentform {
 517         padding: 20px 20px;
 518         position: relative;
 519     }
 520         section.comments form.commentform legend {
 521             margin-left: 0;
 522         }
 523         section.comments form.commentform p, section.comments form.commentform p.textarea {
 524             float: none;
 525             width: 100%;
 526         }
 527             section.comments form.commentform p.email {
 528                 right: 0;
 529             }
 530
 531         section.comments form.commentform input, section.comments form.commentform textarea {
 532             width: 93%;
 533         }
 534
 535     section.footnote {
 536         width: 90%;
 537
 538         margin: 30px 5%;
 539         padding: 0;
 540     }
 541
 542     footer#bottom, footer#bottom small, footer#bottom ul {
 543         width: 100%;
 544     }
 545         footer#bottom a#attribution {
 546             left: auto;
 547             right: 0;
 548
 549             top: 30px;
 550         }
 551 }