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 /* Comments in code. */
  16 .comment {
  17     color: purple;
  18 }
  19
  20 /* Error messages. */
  21 .err {
  22     color: darkred;
  23     font-style: italic;
  24 }
  25
  26 /* Things to fix. */
  27 .fixme {
  28     text-decoration: underline;
  29     color: darkred;
  30     background-color: lightgray;
  31 }
  32
  33 /* Highlighted changes in code. */
  34 .highlight {
  35     background-color: mistyrose;
  36 }
  37
  38 /* Manual input. */
  39 .in {
  40     color: darkgreen;
  41 }
  42
  43 /* Program output. */
  44 .out {
  45     color: darkblue;
  46     font-style: italic;
  47 }
  48
  49 /* Putting shadows around things. */
  50 .shadow {
  51     -moz-box-shadow: 0 0 30px 5px #999;
  52     -webkit-box-shadow: 0 0 30px 5px #999;
  53     box-shadow: 0 0 30px 5px #999;
  54 }
  55
  56 /* Things to understand (lead-in to sections in book). */
  57 .understand {
  58     background-color: lightyellow;
  59 }
  60
  61 /* Block quotations. */
  62 blockquote {
  63     margin: 1em;
  64     padding: 1em 1em .5em 1em;
  65     width: 90%;
  66 }
  67
  68 /* Citation for testimonial quote. */
  69 blockquote.testimonial cite {
  70     font-style: italic;
  71 }
  72
  73 /* Main body of pages. */
  74 body {
  75     background: #BEC3C6;
  76     margin: 20px 0;
  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 }
 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 /* Displaying YouTube videos. */
 204 iframe.youtube_player {
 205     border      : 0;
 206     text-align  : center;
 207     width       : 640px;
 208     height      : 500px;
 209 }
 210
 211 /* Sections in book chapters. */
 212 section {
 213     clear: both;
 214 }
 215
 216 /* Person's name in team.html. */
 217 span.person {
 218     font-weight: bold;
 219     font-style: italic;
 220 }
 221
 222 /* Short review of book in bibliography. */
 223 span.review {
 224     font-style: italic;
 225 }
 226
 227 /* Bibliography book covers. */
 228 img.book-cover {
 229     width: 80px;
 230 }
 231
 232 /* Blog calendar table in blog/index.html. */
 233 table.blogcalendar th {
 234     text-align  : right;
 235     font-weight : bold;
 236 }
 237
 238 /* See above. */
 239 table.blogcalendar th.left {
 240     text-align : left;
 241 }
 242
 243 /* See above. */
 244 table.blogcalendar tr td {
 245     text-align : right;
 246 }
 247
 248 /* Blog index tables in blog/index.html. */
 249 table.blogindex td.date {
 250     text-align: left ;
 251     width:10em;
 252 }
 253
 254 /* Tables used for displaying choices in challenges. */
 255 table.choices tr td {
 256     vertical-align : top;
 257 }
 258
 259 /* Database tables do _not_ have double borders */
 260 table.outlined {
 261     border-collapse: collapse;
 262 }
 263
 264 /* Container for content in the bootcamp index page */
 265 div.bootcamps {
 266     text-align: center;
 267 }
 268
 269 /* Link items (to bootcamp pages) in the bootcamps tables */
 270 table.bootcamps td.link {
 271     width: 50%;
 272     text-align: left;
 273 }
 274
 275 /* Spacer items (i.e. ellipsis) on the bootcamps tables */
 276 table.bootcamps td.spacer {
 277    max-width: 100%;
 278    text-align: center;
 279 }
 280
 281 /* Date columns on the bootcamps tables */
 282 table.bootcamps td.date {
 283     width: 50%;
 284     text-align: right;
 285 }
 286
 287 /* Badge modal dialog */
 288 #assertion-modal {
 289     width:700px;
 290     margin-left:-350px;
 291 }
 292 #assertion-modal iframe {
 293     background-color: transparent;
 294     border: 0px none transparent;
 295     padding: 0px;
 296     width: 100%;
 297     height: 20em;
 298 }
 299
 300 #assertion-model img.badge {
 301     position: absolute;
 302     right: 15px;
 303     bottom: 35px;
 304     opacity: 0.5;
 305 }
 306
 307 /* list with checkbox as bullet */
 308 ul.checklist {
 309   list-style-image: url('/img/checkbox.png');
 310 }
 311
 312 /* FAQ */
 313 dl.faq dt {
 314     font-style: italic;
 315     font-weight: bold;
 316 }