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