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 a.inactive {
670 margin-top: 58.666666666666664px;
673 .resources .list .resource-wrapper.first .resource {
676 .resources .list .resource-wrapper {
684 height: 249.33333333333331px;
686 .resources .list .resource-wrapper.first {
689 .resources .list .resource-wrapper.hidden {
692 .resources .list .resource {
693 border: 1px solid #000;
694 -moz-box-sizing: border-box;
695 -webkit-box-sizing: border-box;
696 box-sizing: border-box;
697 *behavior: url(boxsizing.htc);
698 padding: 29.333333333333332px;
699 height: 249.33333333333331px;
702 .resources .list .resource .date {
706 .resources .list .resource .description {
710 -webkit-transition: top 0.35s ease-in-out;
711 -moz-transition: top 0.35s ease-in-out;
712 transition: top 0.35s ease-in-out;
713 -webkit-transition: top 0.35s ease-in-out;
714 -moz-transition: top 0.35s ease-in-out;
715 transition: top 0.35s ease-in-out;
718 margin-left: -29.333333333333332px;
719 padding: 29.333333333333332px;
720 -moz-box-sizing: border-box;
721 -webkit-box-sizing: border-box;
722 box-sizing: border-box;
723 *behavior: url(boxsizing.htc);
726 .resources .list .resource .title {
729 .resources .list .resource .category {
730 margin-top: 29.333333333333332px;
733 .resources .list .resource .category a {
736 .resources .list .resource .download {
742 -moz-box-sizing: border-box;
743 -webkit-box-sizing: border-box;
744 box-sizing: border-box;
745 *behavior: url(boxsizing.htc);
748 .resources .list .resource .download a {
751 text-decoration: none;
753 padding-left: 14.666666666666666px;
755 .resources .list .resource .download a:hover, .resources .list .resource .download a .hovered {
758 .resources .list .resource .download a:hover .download-image, .resources .list .resource .download a .hovered .download-image {
759 background-image: url("../images/resource_down_arrow-active.png");
761 .resources .list .resource .download a .download-image {
768 background-image: url("../images/resource_down_arrow.png");
769 background-position: 50% 50%;
770 background-repeat: no-repeat;
772 .resources .list .resource .download img {
774 vertical-align: middle;
776 .resources .list .resource:hover .description, .resources .list .resource .hover .description {
781 -moz-box-sizing: border-box;
782 -webkit-box-sizing: border-box;
783 box-sizing: border-box;
784 *behavior: url(boxsizing.htc);
789 .clearme:before, .clearme:after {
798 font-family: 'Antic', sans-serif;
803 font-family: 'Antic', sans-serif;
811 background-color: #cfcdc7;
815 padding: 2.333333333333333px;
821 .topbar .links:before, .topbar .links:after {
826 .topbar .links:after {
831 text-decoration: none;
835 padding: 8.333333333333332px;
837 .topbar .links a:hover {
838 background-color: #1a1a1a;
848 text-decoration: none;
849 border-bottom: 1px solid #f89a1c;
855 .styledlinks a:hover,
863 .styledlinks a.noborder,
886 border-right: 1px solid #808080;
887 border-left: 1px solid #808080;
890 display: none !important;
892 .container, .topbar, .footer {
897 border-right: 1px solid #808080;
898 border-left: 1px solid #808080;
911 .container:after, .topbar:after, .footer:after {
915 padding-bottom: 82px;
916 background-color: #ffffff;
920 margin-top: 36.666666666666664px;
921 margin-bottom: 14.666666666666666px;
927 border-bottom: 1px solid #cfcdc7;
940 border-bottom: 1px solid #808080;
941 border-top: 1px solid #a6a6a6;
942 padding-top: 14.666666666666666px;
943 padding-bottom: 14.666666666666666px;
948 ul.inline:before, ul.inline:after {
964 top: -38.13333333333333px;
967 .mainnav.quicknav li {
981 margin-bottom: -14.666666666666666px;
984 margin-top: 5.866666666666667px;
988 margin-top: 29.333333333333332px;
990 .mainnav li.active a {
991 /*border-bottom: 1px solid @linkColor;*/
998 text-decoration: none;
1001 border-bottom: 1px solid #f89a1c;
1003 .mainnav a.active, .mainnav a:active {
1004 border-bottom: 1px solid #f89a1c;
1010 .bottom-section:before, .bottom-section:after {
1015 .bottom-section:after {
1018 .bottom-section .section img {
1024 .top-section:before, .top-section:after {
1029 .top-section:after {
1037 margin-top: 73.33333333333333px;
1040 div.page:before, div.page:after {
1048 div.page:before, div.page:after {
1056 div.page .page-inner {
1083 .maincol.full:before, .maincol.full:after {
1088 .maincol.full:after {
1091 .maincol.full:before, .maincol.full:after {
1096 .maincol.full:after {
1099 .maincol .nextlink {
1106 .maincol .content-bottom {
1110 .maincol .content-bottom:before, .maincol .content-bottom:after {
1115 .maincol .content-bottom:after {
1123 background-color: #3582ac;
1133 .rightcol input[type=text], .rightcol input[type=password] {
1136 /* generic form styles */
1137 input, textarea, .form-widget {
1138 background-color: #ffffff;
1140 border-color: #000000;
1142 #forms .input, #forms input {
1143 font-family: 'Antic', sans-serif;
1145 font-weight: normal;
1147 letter-spacing: 1px;
1148 font-family: 'Antic', sans-serif;
1150 font-weight: normal;
1152 letter-spacing: 1px;
1153 border: 1px solid #808080;
1155 display: inline-block;
1156 margin-bottom: -1px;
1158 padding-left: 1.5em;
1161 #forms .input:focus, #forms input:focus {
1163 border: 1px solid #000;
1166 #forms .input:focus label, #forms input:focus label {
1170 background-color: #c3c3b9 !important;
1173 background-color: #f89a1c !important;
1176 margin-bottom: 44px;
1181 .section.positioned {
1184 .section.positioned .content {
1190 .section.positioned.withimg .img {
1196 .section.positioned.withimg img {
1199 .section.positioned h3 {
1201 margin-bottom: 14.666666666666666px;
1203 .section.positioned .text {
1206 .section .left, .section .right {
1210 .section.imagelist {
1214 .section.imagelist:before, .section.imagelist:after {
1219 .section.imagelist:after {
1222 .section.imagelist img {
1225 vertical-align: middle;
1227 input[readonly=true] {
1228 background-color: #ddd;
1231 form.withlabels label {
1237 form.withlabels input[type=text], form.withlabels input[type=password], form.withlabels textarea {
1240 form.withlabels input[type=text].long, form.withlabels input[type=password].long, form.withlabels textarea.long {
1243 .login-section a.button {
1244 margin-bottom: 12px;
1246 .login-section a.button:last-child {
1247 margin-bottom: none;
1249 .login-section a.button.withicon {
1250 background-repeat: no-repeat;
1251 background-position: 15px 50%;
1254 .login-section.loggedin {
1255 padding-bottom: 0 !important;
1256 background-image: none !important;
1259 margin-bottom: 22px;
1263 margin-bottom: 14.666666666666666px;
1267 padding-bottom: 3px;
1270 min-height: 29.333333333333332px;
1273 form .form-row.submit {
1276 form .form-row .extra-link {
1278 text-decoration: none;
1284 form .form-row label {
1287 form.innerlabels label {
1293 form.innerlabels p {
1298 form input[type="text"],
1299 form input[type="password"] {
1300 font-family: 'Antic', sans-serif;
1302 font-weight: normal;
1304 letter-spacing: 1px;
1305 font-family: 'Antic', sans-serif;
1307 font-weight: normal;
1309 letter-spacing: 1px;
1310 border: 1px solid #808080;
1312 display: inline-block;
1313 margin-bottom: -1px;
1315 padding-left: 1.5em;
1318 form textarea:focus,
1319 form input.text:focus,
1320 form input[type="text"]:focus,
1321 form input[type="password"]:focus {
1323 border: 1px solid #000;
1326 form textarea:focus label,
1327 form input.text:focus label,
1328 form input[type="text"]:focus label,
1329 form input[type="password"]:focus label {
1332 form input.submit, form input[type="submit"] {
1333 font-family: 'Antic', sans-serif;
1335 font-weight: normal;
1337 letter-spacing: 1px;
1338 font-family: 'Antic', sans-serif;
1340 font-weight: normal;
1342 letter-spacing: 1px;
1343 background-color: #3582ac;
1346 padding: 0.8em 22px;
1348 font-family: 'Antic', sans-serif;
1350 font-weight: normal;
1352 letter-spacing: 1px;
1353 font-family: 'Antic', sans-serif;
1355 font-weight: normal;
1357 letter-spacing: 1px;
1358 background-color: #3582ac;
1361 padding: 0.8em 22px;
1364 form input.submit:hover, form input[type="submit"]:hover {
1365 background-color: #f89a1c;
1367 form input.submit.back, form input[type="submit"].back {
1368 text-decoration: none;
1373 form input.submit.back.right, form input[type="submit"].back.right {
1376 form input.submit:hover, form input[type="submit"]:hover {
1377 background-color: #f89a1c;
1379 form input.submit.back, form input[type="submit"].back {
1380 text-decoration: none;
1385 form input.submit.back.right, form input[type="submit"].back.right {
1390 width: 350px !important;
1392 form .with-errors input, form .with-errors textarea, form .with-errors select {
1395 form .with-errors label {
1399 background-color: #9d261d;
1404 .form-errors.all .form-error {
1407 margin-bottom: 1.3em;
1413 .rightcol .section {
1414 background-image: url("../images/dashed_border.png");
1415 background-repeat: repeat-x;
1416 background-position: left bottom;
1417 padding-bottom: 29.333333333333332px;
1418 margin-bottom: 29.333333333333332px;
1423 margin-bottom: 22px;
1433 margin-bottom: 22px;
1438 .section .section-img {
1439 margin-bottom: 14.666666666666666px;
1447 background-color: #ddd;
1454 .messages li.success {
1455 background-color: #46a546;
1458 .messages li.error {
1459 background-color: #9d261d;
1462 .messages li.warning {
1463 background-color: #AF6906;
1466 .messages .warning {
1467 color: #ffffff !important;
1469 .messages .warning a {
1479 table tr.consumed td.consumed {
1488 .row:before, .row:after {
1496 .row:before, .row:after {
1507 -webkit-transition: color 0.15s ease-in-out;
1508 -moz-transition: color 0.15s ease-in-out;
1509 transition: color 0.15s ease-in-out;
1510 -webkit-transition: color 0.15s ease-in-out;
1511 -moz-transition: color 0.15s ease-in-out;
1512 transition: color 0.15s ease-in-out;
1514 .footer:before, .footer:after {
1523 -webkit-transition: color 0.15s ease-in-out;
1524 -moz-transition: color 0.15s ease-in-out;
1525 transition: color 0.15s ease-in-out;
1526 -webkit-transition: color 0.15s ease-in-out;
1527 -moz-transition: color 0.15s ease-in-out;
1528 transition: color 0.15s ease-in-out;
1531 color: #808080 !important;
1534 color: #808080 !important;
1538 text-decoration: none;
1541 color: #000 !important;
1544 margin-bottom: 7.333333333333333px;
1547 margin-bottom: 14.666666666666666px;
1555 .footer .col:last-child, .footer .col.last {
1559 .footer .top.row, .footer .last.row {
1566 .footer .top.row:before,
1567 .footer .last.row:before,
1568 .footer .top.row:after,
1569 .footer .last.row:after {
1574 .footer .top.row:after, .footer .last.row:after {
1577 .footer .top.row:before,
1578 .footer .last.row:before,
1579 .footer .top.row:after,
1580 .footer .last.row:after {
1585 .footer .top.row:after, .footer .last.row:after {
1588 .footer .top.row .col, .footer .last.row .col {
1594 .footer .top.row .col.first, .footer .last.row .col.first {
1595 margin-left: 0 !important;
1597 .footer .top.row .col.last, .footer .last.row .col.last {
1611 .footer .bottom.row .col {
1617 .footer .bottom.row .col:last-child, .footer .bottom.row .col.last {
1622 .pagination a.page {
1623 display: inline !important;
1627 margin-bottom: 44px;
1629 margin-bottom: 29.333333333333332px;
1634 .blog-entry.positioned {
1637 .blog-entry.positioned .content {
1643 .blog-entry.positioned.withimg .img {
1649 .blog-entry.positioned.withimg img {
1652 .blog-entry.positioned h3 {
1654 margin-bottom: 14.666666666666666px;
1656 .blog-entry.positioned .text {
1659 .blog-entry .left, .blog-entry .right {
1663 .blog-entry.imagelist {
1667 .blog-entry.imagelist:before, .blog-entry.imagelist:after {
1672 .blog-entry.imagelist:after {
1675 .blog-entry.imagelist img {
1678 vertical-align: middle;
1683 margin-bottom: 22px;
1693 margin-bottom: 22px;
1698 .blog-entry .section-img {
1699 margin-bottom: 14.666666666666666px;
1701 .blog-entry:before, .blog-entry:after {
1709 .blog-entry .title {
1714 .blog-entry .media img {
1715 border: 1px solid #808080;
1717 .blog-entry .intro-content, .blog-entry .content {
1718 margin-top: 14.666666666666666px;
1720 .blog-entry .intro-content object, .blog-entry .content object {
1721 margin: 14.666666666666666px 0;
1723 .blog-entry .entry-info {
1725 margin-top: 14.666666666666666px;
1727 .blog-entry.single .entry-info {
1729 margin-bottom: 14.666666666666666px;
1731 .section.twitter-feed {
1734 .section.twitter-feed .tweet {
1737 margin-bottom: 14.666666666666666px;
1740 .section.twitter-feed .tweet:last-child {
1743 border-bottom: none;
1745 .section.twitter-feed .tweet .date {
1749 .section.twitter-feed .tweet .date a {
1750 text-decoration: none !important;
1756 .entry-list .since {
1759 .entry-list .title {
1762 .entry-list .content, .entry-list .text {
1770 #recaptcha_widget_div {
1774 #recaptcha_widget_div #recaptcha_instructions_image {
1776 margin-bottom: 10px;
1777 display: block !important;
1779 #recaptcha_widget_div th, #recaptcha_widget_div td {
1782 .checkbox-widget.checked {
1783 background-color: #f00;
1784 background-image: url("../images/checkbox.png");
1785 background-position: 50% 50%;
1788 border: 1px solid #808080;
1794 margin-top: 5.333333333333333px;