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