css/swc.css

   1 /* Headings */
   2 h1, h2, h3, h4, h5, h6  {
   3     color: rgb(03,03,03);
   4 }
   5
   6 h1, h2 {
   7     margin-top: 40px;
   8     margin-bottom: 10px;
   9 }
  10
  11 h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
  12     color: inherit;
  13 }
  14
  15 /* Chapter titles. */
  16 div.chapter h2 {
  17     text-align: center;
  18     font-style: italic;
  19 }
  20
  21 /* Objectives and key points */
  22 .objectives, .keypoints {
  23     background-color: azure;
  24 }
  25
  26 /* Things to fix. */
  27 .fixme {
  28     text-decoration: underline;
  29     color: darkred;
  30     background-color: lightgray;
  31 }
  32
  33 /* Putting shadows around things. */
  34 .shadow {
  35     -moz-box-shadow: 0 0 30px 5px #999;
  36     -webkit-box-shadow: 0 0 30px 5px #999;
  37     box-shadow: 0 0 30px 5px #999;
  38 }
  39
  40 /* Things to understand (lead-in to sections in book). */
  41 .understand {
  42     background-color: lightyellow;
  43 }
  44
  45 /* Block quotations. */
  46 blockquote {
  47     margin: 1em;
  48     padding: 1em 1em .5em 1em;
  49     width: 90%;
  50 }
  51
  52 /* Citation for testimonial quote. */
  53 blockquote.testimonial cite {
  54     font-style: italic;
  55 }
  56
  57 /* Main body of pages. */
  58 body {
  59     background: #BEC3C6;
  60     margin: 20px 0;
  61     font-family: "Open Sans", Helvetica, Arial, sans-serif;
  62     color: rgb(03, 03, 03);
  63 }
  64
  65 /* Styling for editorial stylesheet */
  66 body.stylesheet {
  67     background: #ffffff;
  68     width: 60em;
  69     margin: 20 auto;
  70 }
  71
  72 /* Top banner of every page. */
  73 div.banner {
  74     background-color: #FFFFFF;
  75     width: 100%;
  76     height: 90px;
  77     margin: 0px;
  78     padding: 0;
  79     border-bottom: 1px solid #A6A6A6;
  80 }
  81
  82 /* Padding around image in top banner. */
  83 div.banner a img {
  84     padding: 20px 25px;
  85 }
  86
  87 @media (max-width: 700px) {
  88     div.banner a img {
  89         padding: 20px 0px;
  90     }
  91 }
  92
  93 /* Explanatory call-out boxes. */
  94 div.box {
  95     background-color: mistyrose;
  96     display: block;
  97     margin-left: auto;
  98     margin-right: auto;
  99     padding-top: 1px;
 100     padding-bottom: 1px;
 101     padding-left: 10px;
 102     padding-right: 10px;
 103     outline-color: gray;
 104     outline-width: 1px;
 105     outline-style: solid;
 106 }
 107 @media (max-width: 700px) {
 108     div.box {
 109         width: 80%;
 110     }
 111 }
 112 @media (min-width: 700px) {
 113     div.box {
 114         width: 54em;
 115         max-width: 80%;
 116     }
 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 }
 145
 146 /* Main menu at the top of every page. */
 147 div.mainmenu {
 148     clear: both;
 149     background-color: #F4F4F4;
 150     margin: 0px;
 151     padding: 3px 0px 3px 25px;
 152     border-bottom: 1px solid #A6A6A6;
 153     height:30px
 154 }
 155
 156 #menubar {
 157     float:left;
 158     margin-top:4px;
 159 }
 160
 161 #searchbar {
 162     float:right;
 163     margin-right:20px;
 164 }
 165
 166 /* Narration for audio-only lectures. */
 167 div.narration {
 168     text-align: center;
 169     font-size: 2em;
 170 }
 171
 172 /* Table of contents. */
 173 div.toc {
 174     /* No special styling yet. */
 175 }
 176
 177 .transcript {
 178     display: table;
 179 }
 180
 181 .transcript .media img {
 182     border: 1px solid grey;
 183 }
 184
 185
 186 /* Title styling */
 187 h1.title {
 188     margin:40px 0px;
 189     border-bottom:1px solid #515151;
 190 }
 191
 192 /* YouTube video embed. */
 193 div.youtube {
 194     text-align: center;
 195     padding: 10px;
 196 }
 197
 198 /* Glossary description lists. */
 199 dl.gloss {
 200     /* Empty for now. */
 201 }
 202
 203 /* FIXME: shouldn't be using iframe's directly (EventBrite and YouTube should be via macro expansion). */
 204 iframe.youtube_player {
 205     border      : 0;
 206     text-align  : center;
 207     width       : 640px;
 208     height      : 500px;
 209 }
 210
 211 /* Amy Brown's logo in book/stylesheet.html. */
 212 img.logoARB {
 213     float: right;
 214 }
 215
 216 /* Person's name in team.html. */
 217 span.person {
 218     font-weight: bold;
 219     font-style: italic;
 220 }
 221
 222 /* Bibliography book covers. */
 223 img.book-cover {
 224     width: 80px;
 225 }
 226
 227 /* Blog calendar table in blog/index.html. */
 228 table.blogcalendar th {
 229     text-align  : right;
 230     font-weight : bold;
 231 }
 232
 233 /* See above. */
 234 table.blogcalendar th.left {
 235     text-align : left;
 236 }
 237
 238 /* See above. */
 239 table.blogcalendar tr td {
 240     text-align : right;
 241 }
 242
 243 /* Blog index tables in blog/index.html. */
 244 table.blogindex td.date {
 245     text-align: left ;
 246     width:10em;
 247 }
 248
 249 /* Tables used for displaying choices in challenges. */
 250 table.choices tr td {
 251     vertical-align : top;
 252 }
 253
 254 /* Database tables do _not_ have double borders */
 255 table.outlined {
 256     border-collapse: collapse;
 257 }
 258
 259 /* Container for content in the workshop index page */
 260 div.workshops {
 261     text-align: center;
 262 }
 263
 264 /* Link items (to workshop pages) in the workshops tables */
 265 table.workshops td.link {
 266     width: 50%;
 267     text-align: left;
 268 }
 269
 270 /* Spacer items (i.e. ellipsis) on the workshops tables */
 271 table.workshops td.spacer {
 272    max-width: 100%;
 273    text-align: center;
 274 }
 275
 276 /* Date columns on the workshops tables */
 277 table.workshops td.date {
 278     width: 50%;
 279     text-align: right;
 280 }
 281
 282 /* Badge modal dialog */
 283 #assertion-modal {
 284     width:700px;
 285     margin-left:-350px;
 286 }
 287 #assertion-modal iframe {
 288     background-color: transparent;
 289     border: 0px none transparent;
 290     padding: 0px;
 291     width: 100%;
 292     height: 20em;
 293 }
 294
 295 #assertion-model img.badge {
 296     position: absolute;
 297     right: 15px;
 298     bottom: 35px;
 299     opacity: 0.5;
 300 }
 301
 302 /* list with checkbox as bullet */
 303 ul.checklist {
 304   list-style-image: url('/img/checkbox.png');
 305 }
 306
 307 /* Printing */
 308 @media print {
 309   h1 {
 310     font-size: 16pt;
 311     line-height: 18pt;
 312   }
 313
 314   h2,h3,h4,h5,h6 {
 315     font-size: 12pt;
 316     line-height: 13pt;
 317   }
 318
 319   p,ul,ol,li,pre,code {
 320     font-size: 8pt;
 321     line-height: 9pt;
 322   }
 323
 324   code {
 325     padding: 0px;
 326     border: 0px;
 327     background: none;
 328   }
 329
 330   #github-ribbon {
 331     display: none;
 332   }
 333
 334   .banner {
 335     display: none;
 336   }
 337
 338   .footer {
 339     display: none;
 340   }
 341 }