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