css/swc.css

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