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