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 /* 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 /* Sections in book chapters. */
 217 section {
 218     clear: both;
 219 }
 220
 221 /* Person's name in team.html. */
 222 span.person {
 223     font-weight: bold;
 224     font-style: italic;
 225 }
 226
 227 /* Short review of book in bibliography. */
 228 span.review {
 229     font-style: italic;
 230 }
 231
 232 /* Bibliography book covers. */
 233 img.book-cover {
 234     width: 80px;
 235 }
 236
 237 /* Blog calendar table in blog/index.html. */
 238 table.blogcalendar th {
 239     text-align  : right;
 240     font-weight : bold;
 241 }
 242
 243 /* See above. */
 244 table.blogcalendar th.left {
 245     text-align : left;
 246 }
 247
 248 /* See above. */
 249 table.blogcalendar tr td {
 250     text-align : right;
 251 }
 252
 253 /* Blog index tables in blog/index.html. */
 254 table.blogindex td.date {
 255     text-align: left ;
 256     width:10em;
 257 }
 258
 259 /* Tables used for displaying choices in challenges. */
 260 table.choices tr td {
 261     vertical-align : top;
 262 }
 263
 264 /* Database tables do _not_ have double borders */
 265 table.outlined {
 266     border-collapse: collapse;
 267 }
 268
 269 /* Container for content in the bootcamp index page */
 270 div.bootcamps {
 271     text-align: center;
 272 }
 273
 274 /* Link items (to bootcamp pages) in the bootcamps tables */
 275 table.bootcamps td.link {
 276     width: 50%;
 277     text-align: left;
 278 }
 279
 280 /* Spacer items (i.e. ellipsis) on the bootcamps tables */
 281 table.bootcamps td.spacer {
 282    max-width: 100%;
 283    text-align: center;
 284 }
 285
 286 /* Date columns on the bootcamps tables */
 287 table.bootcamps td.date {
 288     width: 50%;
 289     text-align: right;
 290 }
 291
 292 /* Badge modal dialog */
 293 #assertion-modal {
 294     width:700px;
 295     margin-left:-350px;
 296 }
 297 #assertion-modal iframe {
 298     background-color: transparent;
 299     border: 0px none transparent;
 300     padding: 0px;
 301     width: 100%;
 302     height: 20em;
 303 }
 304
 305 #assertion-model img.badge {
 306     position: absolute;
 307     right: 15px;
 308     bottom: 35px;
 309     opacity: 0.5;
 310 }
 311
 312 /* list with checkbox as bullet */
 313 ul.checklist {
 314   list-style-image: url('/img/checkbox.png');
 315 }