swc.css

   1 /* Headings */
   2 h1, h2, h3, h4, h5, h6  {
   3     color: rgb(03,03,03);
   4     font-family: "Montserrat", "Helvetica", "Arial";
   5 }
   6
   7 h1, h2 {
   8     margin-top: 40px;
   9     margin-bottom: 10px;
  10 }
  11
  12 h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
  13     color: inherit;
  14 }
  15
  16 /* Comments in code. */
  17 .comment {
  18     color: purple;
  19 }
  20
  21 /* Error messages. */
  22 .err {
  23     color: darkred;
  24     font-style: italic;
  25 }
  26
  27 /* Things to fix. */
  28 .fixme {
  29     text-decoration: underline;
  30     color: darkred;
  31     background-color: lightgray;
  32 }
  33
  34 /* Highlighted changes in code. */
  35 .highlight {
  36     background-color: mistyrose;
  37 }
  38
  39 /* Manual input. */
  40 .in {
  41     color: darkgreen;
  42 }
  43
  44 /* Program output. */
  45 .out {
  46     color: darkblue;
  47     font-style: italic;
  48 }
  49
  50 /* Putting shadows around things. */
  51 .shadow {
  52     -moz-box-shadow: 0 0 30px 5px #999;
  53     -webkit-box-shadow: 0 0 30px 5px #999;
  54     box-shadow: 0 0 30px 5px #999;
  55 }
  56
  57 /* Things to understand (lead-in to sections in book). */
  58 .understand {
  59     background-color: lightyellow;
  60 }
  61
  62 /* Block quotations. */
  63 blockquote {
  64     margin: 1em;
  65     padding: 1em 1em .5em 1em;
  66     width: 90%;
  67 }
  68
  69 /* Citation for testimonial quote. */
  70 blockquote.testimonial cite {
  71     font-style: italic;
  72 }
  73
  74 /* Main body of pages. */
  75 body {
  76     font-family: "Open Sans", Helvetica, Arial, sans-serif;
  77     color: rgb(03, 03, 03);
  78     /* TODO: fix this */
  79     padding:0 !important;
  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     /*padding-top:50px;*/
 325 }
 326
 327 .header {
 328     height:370px;
 329     background: url(/img/header.png) no-repeat center center;
 330     background-attachment: fixed;
 331     -webkit-background-size: cover;
 332     -moz-background-size: cover;
 333     -o-background-size: cover;
 334     background-size: cover;
 335     text-align: center;
 336 }
 337
 338 .header h1 {
 339     color:#FFF;
 340     line-height: 1.2;
 341     /*font-weight:normal;*/
 342 }
 343
 344 #logo {
 345     position: relative;
 346     top: 20px;
 347 }
 348
 349 #home-options {
 350     background:#F6F6F6;
 351     border-top:1px solid #DDDDDD;
 352     border-bottom:1px solid #DDDDDD;
 353     padding:50px 0 50px 0;
 354     margin-bottom:20px;
 355 }
 356
 357 section.footer {
 358     background:#2b3990;
 359     padding:20px;
 360 }