swc.css

   1 /* Headings */
   2 h1, h2, h3, h4, h5, h6  {
   3     color: rgb(03,03,03);
   4 }
   5
   6 h1, h2 {
   7     margin-top: 40px;
   8     margin-bottom: 10px;
   9 }
  10
  11 h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
  12     color: inherit;
  13 }
  14
  15 /* Chapter titles. */
  16 div.chapter h2 {
  17     text-align: center;
  18     font-style: italic;
  19 }
  20
  21 /* Objectives and key points */
  22 .objectives, .keypoints {
  23     background-color: azure;
  24 }
  25
  26 /* Things to fix. */
  27 .fixme {
  28     text-decoration: underline;
  29     color: darkred;
  30     background-color: lightgray;
  31 }
  32
  33 /* Putting shadows around things. */
  34 .shadow {
  35     -moz-box-shadow: 0 0 30px 5px #999;
  36     -webkit-box-shadow: 0 0 30px 5px #999;
  37     box-shadow: 0 0 30px 5px #999;
  38 }
  39
  40 /* Things to understand (lead-in to sections in book). */
  41 .understand {
  42     background-color: lightyellow;
  43 }
  44
  45 /* Block quotations. */
  46 blockquote {
  47     margin: 1em;
  48     padding: 1em 1em .5em 1em;
  49     width: 90%;
  50 }
  51
  52 /* Citation for testimonial quote. */
  53 blockquote.testimonial cite {
  54     font-style: italic;
  55 }
  56
  57 /* Main body of pages. */
  58 body {
  59     background: #BEC3C6;
  60     margin: 20px 0;
  61     font-family: "Open Sans", Helvetica, Arial, sans-serif;
  62     color: rgb(03, 03, 03);
  63 }
  64
  65 /* Styling for editorial stylesheet */
  66 body.stylesheet {
  67     background: #ffffff;
  68     width: 60em;
  69     margin: 20 auto;
  70 }
  71
  72 /* Top banner of every page. */
  73 div.banner {
  74     background-color: #FFFFFF;
  75     width: 100%;
  76     height: 90px;
  77     margin: 0px;
  78     padding: 0;
  79     border-bottom: 1px solid #A6A6A6;
  80 }
  81
  82 /* Padding around image in top banner. */
  83 div.banner a img {
  84     padding: 20px 25px;
  85 }
  86
  87 /* Explanatory call-out boxes. */
  88 div.box {
  89     background-color: mistyrose;
  90     display: block;
  91     margin-left: auto;
  92     margin-right: auto;
  93     padding-top: 1px;
  94     padding-bottom: 1px;
  95     padding-left: 10px;
  96     padding-right: 10px;
  97     outline-color: gray;
  98     outline-width: 1px;
  99     outline-style: solid;
 100 }
 101 @media (max-width: 700px) {
 102     div.box {
 103         width: 80%;
 104     }
 105 }
 106 @media (min-width: 700px) {
 107     div.box {
 108         width: 54em;
 109         max-width: 80%;
 110     }
 111 }
 112
 113 /* Level 2 headings inside pages. */
 114 div.content div h3 {
 115     border-bottom: 1px solid #CCCCCC;
 116     display: block;
 117     font-family: Verdana,"BitStream vera Sans";
 118     margin-top: 10px;
 119     padding: 0 5px 3px;
 120 }
 121
 122 /* PDF and slide files referenced from lectures. */
 123 div.files {
 124     padding: 10px;
 125 }
 126
 127 /* Footer of every page. */
 128 div.footer {
 129     clear: both;
 130     background: url("/img/main_shadow.png") repeat-x scroll center top #FFFFFF;
 131     padding: 4px 10px 7px 10px;
 132     border-top: 1px solid #A6A6A6;
 133     text-align: right;
 134 }
 135
 136 .swc-blue-bg {
 137    background-color: #20267D;
 138 }
 139
 140 /* Main menu at the top of every page. */
 141 div.mainmenu {
 142     clear: both;
 143     background-color: #F4F4F4;
 144     margin: 0px;
 145     padding: 3px 0px 3px 25px;
 146     border-bottom: 1px solid #A6A6A6;
 147     height:30px
 148 }
 149
 150 #menubar {
 151     float:left;
 152     margin-top:4px;
 153 }
 154
 155 #searchbar {
 156     float:right;
 157     margin-right:20px;
 158 }
 159
 160 /* Narration for audio-only lectures. */
 161 div.narration {
 162     text-align: center;
 163     font-size: 2em;
 164 }
 165
 166 /* Table of contents. */
 167 div.toc {
 168     /* No special styling yet. */
 169 }
 170
 171 .transcript {
 172     display: table;
 173 }
 174
 175 .transcript .media img {
 176     border: 1px solid grey;
 177 }
 178
 179
 180 /* Title styling */
 181 h1.title {
 182     margin:40px 0px;
 183     border-bottom:1px solid #515151;
 184 }
 185
 186 /* YouTube video embed. */
 187 div.youtube {
 188     text-align: center;
 189     padding: 10px;
 190 }
 191
 192 /* Glossary description lists. */
 193 dl.gloss {
 194     /* Empty for now. */
 195 }
 196
 197 /* FIXME: shouldn't be using iframe's directly (EventBrite and YouTube should be via macro expansion). */
 198 iframe.youtube_player {
 199     border      : 0;
 200     text-align  : center;
 201     width       : 640px;
 202     height      : 500px;
 203 }
 204
 205 /* Amy Brown's logo in book/stylesheet.html. */
 206 img.logoARB {
 207     float: right;
 208 }
 209
 210 /* Person's name in team.html. */
 211 span.person {
 212     font-weight: bold;
 213     font-style: italic;
 214 }
 215
 216 /* Bibliography book covers. */
 217 img.book-cover {
 218     width: 80px;
 219 }
 220
 221 /* Blog calendar table in blog/index.html. */
 222 table.blogcalendar th {
 223     text-align  : right;
 224     font-weight : bold;
 225 }
 226
 227 /* See above. */
 228 table.blogcalendar th.left {
 229     text-align : left;
 230 }
 231
 232 /* See above. */
 233 table.blogcalendar tr td {
 234     text-align : right;
 235 }
 236
 237 /* Blog index tables in blog/index.html. */
 238 table.blogindex td.date {
 239     text-align: left ;
 240     width:10em;
 241 }
 242
 243 /* Tables used for displaying choices in challenges. */
 244 table.choices tr td {
 245     vertical-align : top;
 246 }
 247
 248 /* Database tables do _not_ have double borders */
 249 table.outlined {
 250     border-collapse: collapse;
 251 }
 252
 253 /* Container for content in the bootcamp index page */
 254 div.bootcamps {
 255     text-align: center;
 256 }
 257
 258 /* Link items (to bootcamp pages) in the bootcamps tables */
 259 table.bootcamps td.link {
 260     width: 50%;
 261     text-align: left;
 262 }
 263
 264 /* Spacer items (i.e. ellipsis) on the bootcamps tables */
 265 table.bootcamps td.spacer {
 266    max-width: 100%;
 267    text-align: center;
 268 }
 269
 270 /* Date columns on the bootcamps tables */
 271 table.bootcamps td.date {
 272     width: 50%;
 273     text-align: right;
 274 }
 275
 276 /* Badge modal dialog */
 277 #assertion-modal {
 278     width:700px;
 279     margin-left:-350px;
 280 }
 281 #assertion-modal iframe {
 282     background-color: transparent;
 283     border: 0px none transparent;
 284     padding: 0px;
 285     width: 100%;
 286     height: 20em;
 287 }
 288
 289 #assertion-model img.badge {
 290     position: absolute;
 291     right: 15px;
 292     bottom: 35px;
 293     opacity: 0.5;
 294 }
 295
 296 /* list with checkbox as bullet */
 297 ul.checklist {
 298   list-style-image: url('/img/checkbox.png');
 299 }