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