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 /* 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 /* Link items (to bootcamp pages) in the bootcamps tables */
 267 table.bootcamps td.link {
 268     width: 50%;
 269     text-align: left;
 270 }
 271
 272 /* Spacer items (i.e. ellipsis) on the bootcamps tables */
 273 table.bootcamps td.spacer {
 274    max-width: 100%;
 275    text-align: center;
 276 }
 277
 278 /* Date columns on the bootcamps tables */
 279 table.bootcamps td.date {
 280     width: 50%;
 281     text-align: right;
 282 }
 283
 284 /* Badge modal dialog */
 285 #assertion-modal {
 286     width:700px;
 287     margin-left:-350px;
 288 }
 289 #assertion-modal iframe {
 290     background-color: transparent;
 291     border: 0px none transparent;
 292     padding: 0px;
 293     width: 100%;
 294     height: 20em;
 295 }
 296
 297 #assertion-model img.badge {
 298     position: absolute;
 299     right: 15px;
 300     bottom: 35px;
 301     opacity: 0.5;
 302 }
 303
 304 /* list with checkbox as bullet */
 305 ul.checklist {
 306   list-style-image: url('../img/checkbox.png');
 307 }
 308
 309 /* FAQ */
 310 dl.faq dt {
 311     font-style: italic;
 312     font-weight: bold;
 313 }
 314
 315 section.content {
 316     width:100%;
 317     background: white;
 318 }
 319
 320 .header.home {
 321     background: url(../img/header.png) no-repeat center center;
 322     background-attachment: fixed;
 323     -webkit-background-size: cover;
 324     -moz-background-size: cover;
 325     -o-background-size: cover;
 326     background-size: cover;
 327 }
 328
 329 .header {
 330     background:#2b3990;
 331 }
 332
 333 .header h1 {
 334     line-height: 1.1;
 335     margin: 60px 0px 80px;
 336     font-size: 40pt;
 337 }
 338
 339 #header-text {
 340     font-size:20pt;
 341     margin:0;
 342 }
 343
 344 #nav-logo {
 345     width:270px;
 346     height:40px;
 347     top:0;
 348     left:0;
 349 }
 350
 351 #home-options {
 352     background:#F6F6F6;
 353     border-top:1px solid #DDDDDD;
 354     border-bottom:1px solid #DDDDDD;
 355     padding:20px 0;
 356     margin-bottom:20px;
 357 }
 358
 359 #title {
 360     background:#F6F6F6;
 361     border-top:1px solid #DDDDDD;
 362     border-bottom:1px solid #DDDDDD;
 363     padding:0 0 20px;
 364     margin-bottom:20px;
 365 }
 366 #home-options h4{
 367     color:#2b3990;
 368 }
 369
 370 h5 a:link, h5 a:visited, a,
 371 h4 a:link, h4 a:visited, a,
 372 h3 a:link, h3 a:visited, a {
 373        color:#2b3990;
 374 }
 375
 376 footer {
 377     background:#2b3990;
 378     padding:20px 0;
 379     font-size: 10pt;
 380 }
 381
 382 footer a, footer a:hover{
 383     color:#FFF;
 384     padding-left: 10px;
 385 }
 386
 387 footer .container .links{
 388     background:url('../img/software-carpentry-banner-white.png') no-repeat;
 389     background-size: 200px;
 390     background-position: 0;
 391     height:40px;
 392     padding:40px 0 0 200px;
 393 }