4 * Copyright 2011 Twitter, Inc
5 * Licensed under the Apache License v2.0
6 * http://www.apache.org/licenses/LICENSE-2.0
8 * Designed and built with all the love in the world @twitter by @mdo and @fat.
12 * Props to Eric Meyer (meyerweb.com) for his CSS reset file. We're using an adapted version here that cuts out some of the reset HTML elements we will never need here (i.e., dfn, samp, etc).
13 * ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
76 border-collapse: collapse;
91 -webkit-text-size-adjust: 100%;
92 -ms-text-size-adjust: 100%;
112 audio, canvas, video {
113 display: inline-block;
117 audio:not([controls]) {
124 vertical-align: baseline;
134 -ms-interpolation-mode: bicubic;
142 vertical-align: baseline;
143 *vertical-align: middle;
149 button::-moz-focus-inner, input::-moz-focus-inner {
154 input[type="button"],
156 input[type="submit"] {
158 -webkit-appearance: button;
160 input[type="search"] {
161 -webkit-appearance: textfield;
162 -webkit-box-sizing: content-box;
163 -moz-box-sizing: content-box;
164 box-sizing: content-box;
166 input[type="search"]::-webkit-search-decoration {
167 -webkit-appearance: none;
174 * Variables to customize the look and feel of Bootstrap
175 * ----------------------------------------------------- */
177 * Snippets of reusable CSS to develop faster and keep code readable
178 * ----------------------------------------------------------------- */
183 .makeRow:before, .makeRow:after {
192 font-family: 'Antic', sans-serif;
197 font-family: 'Antic', sans-serif;
202 background-color: #3582ac;
209 background-color: #f89a1c;
212 text-decoration: none;
224 .buttons-list .button {
227 .buttons-list.fixpos {
231 text-align: center !important;
232 color: #fff !important;
233 border: none !important;
234 display: block !important;
237 color: #fff !important;
239 /*addon to style django forms rendered with as_p filter*/
242 * Tables for, you guessed it, tabular data
243 * ---------------------------------------- */
249 border-collapse: collapse;
252 padding: 10px 10px 9px;
259 vertical-align: middle;
263 border-top: 1px solid #ddd;
266 border-top: 1px solid #ddd;
269 .condensed-table th, .condensed-table td {
270 padding: 5px 5px 4px;
273 border: 1px solid #ddd;
274 border-collapse: separate;
275 *border-collapse: collapse;
276 /* IE7, collapse table to remove spacing */
278 -webkit-border-radius: 4px;
279 -moz-border-radius: 4px;
282 .bordered-table th + th, .bordered-table td + td, .bordered-table th + td {
283 border-left: 1px solid #ddd;
285 .bordered-table thead tr:first-child th:first-child, .bordered-table tbody tr:first-child td:first-child {
286 -webkit-border-radius: 4px 0 0 0;
287 -moz-border-radius: 4px 0 0 0;
288 border-radius: 4px 0 0 0;
290 .bordered-table thead tr:first-child th:last-child, .bordered-table tbody tr:first-child td:last-child {
291 -webkit-border-radius: 0 4px 0 0;
292 -moz-border-radius: 0 4px 0 0;
293 border-radius: 0 4px 0 0;
295 .bordered-table tbody tr:last-child td:first-child {
296 -webkit-border-radius: 0 0 0 4px;
297 -moz-border-radius: 0 0 0 4px;
298 border-radius: 0 0 0 4px;
300 .bordered-table tbody tr:last-child td:last-child {
301 -webkit-border-radius: 0 0 4px 0;
302 -moz-border-radius: 0 0 4px 0;
303 border-radius: 0 0 4px 0;
353 .zebra-striped tbody tr:nth-child(odd) td, .zebra-striped tbody tr:nth-child(odd) th {
354 background-color: #f9f9f9;
356 .zebra-striped tbody tr:hover td, .zebra-striped tbody tr:hover th {
357 background-color: #f5f5f5;
362 table .header:after {
366 border-width: 0 4px 4px;
368 border-color: #000 transparent;
371 table .headerSortUp, table .headerSortDown {
372 background-color: rgba(141, 192, 219, 0.25);
373 text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
375 table .header:hover:after {
378 table .headerSortDown:after, table .headerSortDown:hover:after {
380 filter: alpha(opacity=60);
385 table .headerSortUp:after {
387 border-left: 4px solid transparent;
388 border-right: 4px solid transparent;
389 border-top: 4px solid #000;
391 -webkit-box-shadow: none;
392 -moz-box-shadow: none;
394 filter: alpha(opacity=60);
401 border-bottom-color: #3582ac;
403 table .headerSortUp.blue, table .headerSortDown.blue {
404 background-color: #c1ddec;
408 border-bottom-color: #46a546;
410 table .headerSortUp.green, table .headerSortDown.green {
411 background-color: #cdeacd;
415 border-bottom-color: #9d261d;
417 table .headerSortUp.red, table .headerSortDown.red {
418 background-color: #f4c8c5;
422 border-bottom-color: #ffc40d;
424 table .headerSortUp.yellow, table .headerSortDown.yellow {
425 background-color: #fff6d9;
429 border-bottom-color: #f89406;
431 table .headerSortUp.orange, table .headerSortDown.orange {
432 background-color: #fee9cc;
436 border-bottom-color: #7a43b6;
438 table .headerSortUp.purple, table .headerSortDown.purple {
439 background-color: #e2d5f0;
445 .makeRow:before, .makeRow:after {
454 font-family: 'Antic', sans-serif;
459 font-family: 'Antic', sans-serif;
464 background-color: #3582ac;
471 background-color: #f89a1c;
474 text-decoration: none;
486 .buttons-list .button {
489 .buttons-list.fixpos {
493 text-align: center !important;
494 color: #fff !important;
495 border: none !important;
496 display: block !important;
499 color: #fff !important;
503 The following CSS is consistent between example themes and should not be altered.
505 #colorbox, #cboxOverlay, #cboxWrapper {
517 #cboxMiddleLeft, #cboxBottomLeft {
529 #cboxLoadingOverlay, #cboxLoadingGraphic {
556 Change the following styles to modify the appearance of ColorBox. They are
557 ordered & tabbed in a way that represents the nesting of the generated HTML.
570 border: 1px solid #ccc;
573 border: 5px solid #000;
599 background: url(../images/colorbox/controls.png) no-repeat top left;
602 text-indent: -9999px;
604 #cboxPrevious:hover {
605 background-position: bottom left;
612 background: url(../images/colorbox/controls.png) no-repeat top right;
615 text-indent: -9999px;
618 background-position: bottom right;
620 #cboxLoadingOverlay {
623 #cboxLoadingGraphic {
624 background: url(../images/colorbox/loading.gif) no-repeat center center;
631 background: url(../images/colorbox/controls.png) no-repeat top center;
634 text-indent: -9999px;
637 background-position: bottom center;
639 .resources .categories ul {
642 .resources .categories ul:before, .resources .categories ul:after {
647 .resources .categories ul:after {
650 .resources .categories ul li {
653 .resources .categories .title {
654 margin-bottom: 7.333333333333333px;
656 .resources .categories ul li a {
657 text-decoration: none;
661 .resources .categories ul li a:hover, .resources .categories ul li a.selected {
662 color: #000 !important;
664 .resources .categories ul li.inactive {
667 .resources .categories ul li.active {
674 margin-top: 58.666666666666664px;
677 .resources .list .resource-wrapper.first .resource {
680 .resources .list .resource-wrapper {
688 height: 249.33333333333331px;
690 .resources .list .resource-wrapper.first {
693 .resources .list .resource-wrapper.hidden {
696 .resources .list .resource {
697 border: 1px solid #000;
698 -moz-box-sizing: border-box;
699 -webkit-box-sizing: border-box;
700 box-sizing: border-box;
701 *behavior: url(boxsizing.htc);
702 padding: 29.333333333333332px;
703 height: 249.33333333333331px;
706 .resources .list .resource .date {
710 .resources .list .resource .description {
714 -webkit-transition: top 0.35s ease-in-out;
715 -moz-transition: top 0.35s ease-in-out;
716 transition: top 0.35s ease-in-out;
717 -webkit-transition: top 0.35s ease-in-out;
718 -moz-transition: top 0.35s ease-in-out;
719 transition: top 0.35s ease-in-out;
722 margin-left: -29.333333333333332px;
723 padding: 29.333333333333332px;
724 -moz-box-sizing: border-box;
725 -webkit-box-sizing: border-box;
726 box-sizing: border-box;
727 *behavior: url(boxsizing.htc);
730 .resources .list .resource .title {
733 .resources .list .resource .category {
734 margin-top: 29.333333333333332px;
737 .resources .list .resource .category a {
740 .resources .list .resource .download {
748 -moz-box-sizing: border-box;
749 -webkit-box-sizing: border-box;
750 box-sizing: border-box;
751 *behavior: url(boxsizing.htc);
754 .resources .list .resource .download a {
757 text-decoration: none;
759 padding-left: 14.666666666666666px;
761 .resources .list .resource .download a:hover, .resources .list .resource .download a .hovered {
764 .resources .list .resource .download a:hover .download-image, .resources .list .resource .download a .hovered .download-image {
765 background-image: url("../images/resource_down_arrow-active.png");
767 .resources .list .resource .download a .download-image {
774 background-image: url("../images/resource_down_arrow.png");
775 background-position: 50% 50%;
776 background-repeat: no-repeat;
778 .resources .list .resource .download img {
780 vertical-align: middle;
782 .resources .list .resource:hover .description, .resources .list .resource .hover .description {
787 -moz-box-sizing: border-box;
788 -webkit-box-sizing: border-box;
789 box-sizing: border-box;
790 *behavior: url(boxsizing.htc);
795 .clearme:before, .clearme:after {
804 font-family: 'Antic', sans-serif;
809 font-family: 'Antic', sans-serif;
817 background-color: #cfcdc7;
821 padding: 2.333333333333333px;
827 .topbar .links:before, .topbar .links:after {
832 .topbar .links:after {
837 text-decoration: none;
841 padding: 8.333333333333332px;
843 .topbar .links a:hover {
844 background-color: #1a1a1a;
854 text-decoration: none;
855 border-bottom: 1px solid #f89a1c;
861 .styledlinks a:hover,
869 .styledlinks a.noborder,
892 border-right: 1px solid #808080;
893 border-left: 1px solid #808080;
896 display: none !important;
898 .container, .topbar, .footer {
903 border-right: 1px solid #808080;
904 border-left: 1px solid #808080;
917 .container:after, .topbar:after, .footer:after {
921 padding-bottom: 82px;
922 background-color: #ffffff;
926 margin-top: 36.666666666666664px;
927 margin-bottom: 14.666666666666666px;
933 border-bottom: 1px solid #cfcdc7;
946 border-bottom: 1px solid #808080;
947 border-top: 1px solid #a6a6a6;
948 padding-top: 14.666666666666666px;
949 padding-bottom: 14.666666666666666px;
954 ul.inline:before, ul.inline:after {
970 top: -38.13333333333333px;
973 .mainnav.quicknav li {
987 margin-bottom: -14.666666666666666px;
990 margin-top: 5.866666666666667px;
994 margin-top: 29.333333333333332px;
996 .mainnav li.active a {
997 /*border-bottom: 1px solid @linkColor;*/
1004 text-decoration: none;
1007 border-bottom: 1px solid #f89a1c;
1009 .mainnav a.active, .mainnav a:active {
1010 border-bottom: 1px solid #f89a1c;
1016 .bottom-section:before, .bottom-section:after {
1021 .bottom-section:after {
1024 .bottom-section .section img {
1030 .top-section:before, .top-section:after {
1035 .top-section:after {
1043 margin-top: 73.33333333333333px;
1046 div.page:before, div.page:after {
1054 div.page:before, div.page:after {
1062 div.page .page-inner {
1089 .maincol.full:before, .maincol.full:after {
1094 .maincol.full:after {
1097 .maincol.full:before, .maincol.full:after {
1102 .maincol.full:after {
1105 .maincol .nextlink {
1112 .maincol .content-bottom {
1116 .maincol .content-bottom:before, .maincol .content-bottom:after {
1121 .maincol .content-bottom:after {
1129 background-color: #3582ac;
1139 .rightcol input[type=text], .rightcol input[type=password] {
1142 /* generic form styles */
1143 input, textarea, .form-widget {
1144 background-color: #ffffff;
1146 border-color: #000000;
1148 #forms .input, #forms input {
1149 font-family: 'Antic', sans-serif;
1151 font-weight: normal;
1153 letter-spacing: 1px;
1154 font-family: 'Antic', sans-serif;
1156 font-weight: normal;
1158 letter-spacing: 1px;
1159 border: 1px solid #808080;
1161 display: inline-block;
1162 margin-bottom: -1px;
1164 padding-left: 1.5em;
1167 #forms .input:focus, #forms input:focus {
1169 border: 1px solid #000;
1172 #forms .input:focus label, #forms input:focus label {
1176 background-color: #c3c3b9 !important;
1179 background-color: #f89a1c !important;
1182 margin-bottom: 44px;
1187 .section.positioned {
1190 .section.positioned .content {
1196 .section.positioned.withimg .img {
1202 .section.positioned.withimg img {
1205 .section.positioned h3 {
1207 margin-bottom: 14.666666666666666px;
1209 .section.positioned .text {
1212 .section .left, .section .right {
1216 .section.imagelist {
1220 .section.imagelist:before, .section.imagelist:after {
1225 .section.imagelist:after {
1228 .section.imagelist img {
1231 vertical-align: middle;
1233 input[readonly=true] {
1234 background-color: #ddd;
1237 form.withlabels label {
1243 form.withlabels input[type=text], form.withlabels input[type=password], form.withlabels textarea {
1246 form.withlabels input[type=text].long, form.withlabels input[type=password].long, form.withlabels textarea.long {
1249 .login-section a.button {
1250 margin-bottom: 12px;
1252 .login-section a.button:last-child {
1253 margin-bottom: none;
1255 .login-section a.button.withicon {
1256 background-repeat: no-repeat;
1257 background-position: 15px 50%;
1260 .login-section.loggedin {
1261 padding-bottom: 0 !important;
1262 background-image: none !important;
1265 margin-bottom: 22px;
1269 margin-bottom: 14.666666666666666px;
1273 padding-bottom: 3px;
1276 min-height: 29.333333333333332px;
1279 form .form-row.submit {
1282 form .form-row .extra-link {
1284 text-decoration: none;
1290 form .form-row label {
1293 form.innerlabels label {
1299 form.innerlabels p {
1304 form input[type="text"],
1305 form input[type="password"] {
1306 font-family: 'Antic', sans-serif;
1308 font-weight: normal;
1310 letter-spacing: 1px;
1311 font-family: 'Antic', sans-serif;
1313 font-weight: normal;
1315 letter-spacing: 1px;
1316 border: 1px solid #808080;
1318 display: inline-block;
1319 margin-bottom: -1px;
1321 padding-left: 1.5em;
1324 form textarea:focus,
1325 form input.text:focus,
1326 form input[type="text"]:focus,
1327 form input[type="password"]:focus {
1329 border: 1px solid #000;
1332 form textarea:focus label,
1333 form input.text:focus label,
1334 form input[type="text"]:focus label,
1335 form input[type="password"]:focus label {
1338 form input.submit, form input[type="submit"] {
1339 font-family: 'Antic', sans-serif;
1341 font-weight: normal;
1343 letter-spacing: 1px;
1344 font-family: 'Antic', sans-serif;
1346 font-weight: normal;
1348 letter-spacing: 1px;
1349 background-color: #3582ac;
1352 padding: 0.8em 22px;
1354 font-family: 'Antic', sans-serif;
1356 font-weight: normal;
1358 letter-spacing: 1px;
1359 font-family: 'Antic', sans-serif;
1361 font-weight: normal;
1363 letter-spacing: 1px;
1364 background-color: #3582ac;
1367 padding: 0.8em 22px;
1370 form input.submit:hover, form input[type="submit"]:hover {
1371 background-color: #f89a1c;
1373 form input.submit.back, form input[type="submit"].back {
1374 text-decoration: none;
1379 form input.submit.back.right, form input[type="submit"].back.right {
1382 form input.submit:hover, form input[type="submit"]:hover {
1383 background-color: #f89a1c;
1385 form input.submit.back, form input[type="submit"].back {
1386 text-decoration: none;
1391 form input.submit.back.right, form input[type="submit"].back.right {
1396 width: 350px !important;
1398 form .with-errors input, form .with-errors textarea, form .with-errors select {
1401 form .with-errors label {
1405 background-color: #9d261d;
1410 .form-errors.all .form-error {
1413 margin-bottom: 1.3em;
1419 .rightcol .section {
1420 background-image: url("../images/dashed_border.png");
1421 background-repeat: repeat-x;
1422 background-position: left bottom;
1423 padding-bottom: 29.333333333333332px;
1424 margin-bottom: 29.333333333333332px;
1429 margin-bottom: 22px;
1439 margin-bottom: 22px;
1444 .section .section-img {
1445 margin-bottom: 14.666666666666666px;
1453 background-color: #ddd;
1460 .messages li.success {
1461 background-color: #46a546;
1464 .messages li.error {
1465 background-color: #9d261d;
1468 .messages li.warning {
1469 background-color: #AF6906;
1472 .messages .warning {
1473 color: #ffffff !important;
1475 .messages .warning a {
1485 table tr.consumed td.consumed {
1494 .row:before, .row:after {
1502 .row:before, .row:after {
1513 -webkit-transition: color 0.15s ease-in-out;
1514 -moz-transition: color 0.15s ease-in-out;
1515 transition: color 0.15s ease-in-out;
1516 -webkit-transition: color 0.15s ease-in-out;
1517 -moz-transition: color 0.15s ease-in-out;
1518 transition: color 0.15s ease-in-out;
1520 .footer:before, .footer:after {
1529 -webkit-transition: color 0.15s ease-in-out;
1530 -moz-transition: color 0.15s ease-in-out;
1531 transition: color 0.15s ease-in-out;
1532 -webkit-transition: color 0.15s ease-in-out;
1533 -moz-transition: color 0.15s ease-in-out;
1534 transition: color 0.15s ease-in-out;
1537 color: #808080 !important;
1540 color: #808080 !important;
1544 text-decoration: none;
1547 color: #000 !important;
1550 margin-bottom: 7.333333333333333px;
1553 margin-bottom: 14.666666666666666px;
1561 .footer .col:last-child, .footer .col.last {
1565 .footer .top.row, .footer .last.row {
1572 .footer .top.row:before,
1573 .footer .last.row:before,
1574 .footer .top.row:after,
1575 .footer .last.row:after {
1580 .footer .top.row:after, .footer .last.row:after {
1583 .footer .top.row:before,
1584 .footer .last.row:before,
1585 .footer .top.row:after,
1586 .footer .last.row:after {
1591 .footer .top.row:after, .footer .last.row:after {
1594 .footer .top.row .col, .footer .last.row .col {
1600 .footer .top.row .col.first, .footer .last.row .col.first {
1601 margin-left: 0 !important;
1603 .footer .top.row .col.last, .footer .last.row .col.last {
1617 .footer .bottom.row .col {
1623 .footer .bottom.row .col:last-child, .footer .bottom.row .col.last {
1628 .pagination a.page {
1629 display: inline !important;
1633 margin-bottom: 44px;
1635 margin-bottom: 29.333333333333332px;
1640 .blog-entry.positioned {
1643 .blog-entry.positioned .content {
1649 .blog-entry.positioned.withimg .img {
1655 .blog-entry.positioned.withimg img {
1658 .blog-entry.positioned h3 {
1660 margin-bottom: 14.666666666666666px;
1662 .blog-entry.positioned .text {
1665 .blog-entry .left, .blog-entry .right {
1669 .blog-entry.imagelist {
1673 .blog-entry.imagelist:before, .blog-entry.imagelist:after {
1678 .blog-entry.imagelist:after {
1681 .blog-entry.imagelist img {
1684 vertical-align: middle;
1689 margin-bottom: 22px;
1699 margin-bottom: 22px;
1704 .blog-entry .section-img {
1705 margin-bottom: 14.666666666666666px;
1707 .blog-entry:before, .blog-entry:after {
1715 .blog-entry .title {
1720 .blog-entry .media img {
1721 border: 1px solid #808080;
1723 .blog-entry .intro-content, .blog-entry .content {
1724 margin-top: 14.666666666666666px;
1726 .blog-entry .intro-content object, .blog-entry .content object {
1727 margin: 14.666666666666666px 0;
1729 .blog-entry .entry-info {
1731 margin-top: 14.666666666666666px;
1733 .blog-entry.single .entry-info {
1735 margin-bottom: 14.666666666666666px;
1737 .section.twitter-feed {
1740 .section.twitter-feed .tweet {
1743 margin-bottom: 14.666666666666666px;
1746 .section.twitter-feed .tweet:last-child {
1749 border-bottom: none;
1751 .section.twitter-feed .tweet .date {
1755 .section.twitter-feed .tweet .date a {
1756 text-decoration: none !important;
1762 .entry-list .since {
1765 .entry-list .title {
1768 .entry-list .content, .entry-list .text {
1776 #recaptcha_widget_div {
1780 #recaptcha_widget_div #recaptcha_instructions_image {
1782 margin-bottom: 10px;
1783 display: block !important;
1785 #recaptcha_widget_div th, #recaptcha_widget_div td {
1788 .checkbox-widget.checked {
1789 background-color: #f00;
1790 background-image: url("../images/checkbox.png");
1791 background-position: 50% 50%;
1794 border: 1px solid #808080;
1800 margin-top: 5.333333333333333px;