swc.css

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