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