swc.css

/* Headings */
h1, h2, h3, h4, h5, h6  {
    color: rgb(03,03,03);
}

h1, h2 { 
    margin-top: 40px;
    margin-bottom: 10px;
}

h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
    color: inherit;
} 

/* Comments in code. */
.comment {
    color: purple;
}

/* Error messages. */
.err {
    color: darkred;
    font-style: italic;
}

/* Things to fix. */
.fixme {
    text-decoration: underline;
    color: darkred;
    background-color: lightgray;
}

/* Highlighted changes in code. */
.highlight {
    background-color: mistyrose;
}

/* Manual input. */
.in {
    color: darkgreen;
}

/* Program output. */
.out {
    color: darkblue;
    font-style: italic;
}

/* Putting shadows around things. */
.shadow {
    -moz-box-shadow: 0 0 30px 5px #999;
    -webkit-box-shadow: 0 0 30px 5px #999;
    box-shadow: 0 0 30px 5px #999;
}

/* Things to understand (lead-in to sections in book). */
.understand {
    background-color: lightyellow;
}

/* Block quotations. */
blockquote {
    margin: 1em;
    padding: 1em 1em .5em 1em;
    width: 90%;
}

/* Citation for testimonial quote. */
blockquote.testimonial cite {
    font-style: italic;
}

/* Main body of pages. */
body {
    background: #BEC3C6;
    margin: 20px 0;
    font-family: "Open Sans", Helvetica, Arial, sans-serif;
    color: rgb(03, 03, 03);
}

/* Styling for editorial stylesheet */
body.stylesheet {
    background: #ffffff;
    width: 60em;
    margin: 20 auto;
}

/* Top banner of every page. */
div.banner {
    background-color: #FFFFFF;
    width: 100%;
    height: 90px;
    margin: 0px;
    padding: 0;
    border-bottom: 1px solid #A6A6A6;
}

/* Padding around image in top banner. */
div.banner a img {
    padding: 20px 25px;
}

/* Explanatory call-out boxes. */
div.box {
    background-color: mistyrose;
    display: block;
    margin-left: auto;
    margin-right: auto;
    padding-top: 1px;
    padding-bottom: 1px;
    padding-left: 10px;
    padding-right: 10px;
    outline-color: gray;
    outline-width: 1px;
    outline-style: solid;
}
@media (max-width: 700px) {
    div.box {
        width: 80%;
    }
}
@media (min-width: 700px) {
    div.box {
        width: 54em;
        max-width: 80%;
    }
}

/* Level 2 headings inside pages. */
div.content div h3 {
    border-bottom: 1px solid #CCCCCC;
    display: block;
    font-family: Verdana,"BitStream vera Sans";
    margin-top: 10px;
    padding: 0 5px 3px;
}

/* PDF and slide files referenced from lectures. */
div.files {
    padding: 10px;
}

/* Footer of every page. */
div.footer {
    clear: both;
    background: url("/img/main_shadow.png") repeat-x scroll center top #FFFFFF;
    padding: 4px 10px 7px 10px;
    border-top: 1px solid #A6A6A6;
    text-align: right;
}

.swc-blue-bg {
   background-color: #20267D;
}

/* Main menu at the top of every page. */
div.mainmenu {
    clear: both;
    background-color: #F4F4F4;
    margin: 0px;
    padding: 3px 0px 3px 25px;
    border-bottom: 1px solid #A6A6A6;
    height:30px
}

#menubar {
    float:left;
    margin-top:4px;
}

#searchbar {
    float:right;
    margin-right:20px;
}

/* Narration for audio-only lectures. */
div.narration {
    text-align: center;
    font-size: 2em;
}

/* Table of contents. */
div.toc {
    /* No special styling yet. */
}

.transcript {
    display: table;
}

.transcript .media img {
    border: 1px solid grey;
}


/* Title styling */
h1.title {
    margin:40px 0px;
    border-bottom:1px solid #515151;
}

/* YouTube video embed. */
div.youtube {
    text-align: center;
    padding: 10px;
}

/* Glossary description lists. */
dl.gloss {
    /* Empty for now. */
}

/* FIXME: shouldn't be using iframe's directly (EventBrite and YouTube should be via macro expansion). */
iframe.youtube_player {
    border      : 0;
    text-align  : center;
    width       : 640px;
    height      : 500px;
}

/* Amy Brown's logo in book/stylesheet.html. */
img.logoARB {
    float: right;
}

/* Sections in book chapters. */
section {
    clear: both;
}

/* Person's name in team.html. */
span.person {
    font-weight: bold;
    font-style: italic;
}

/* Short review of book in bibliography. */
span.review {
    font-style: italic;
}

/* Bibliography book covers. */
img.book-cover {
    width: 80px;
}

/* Blog calendar table in blog/index.html. */
table.blogcalendar th {
    text-align  : right;
    font-weight : bold;
}

/* See above. */
table.blogcalendar th.left {
    text-align : left;
}

/* See above. */
table.blogcalendar tr td {
    text-align : right;
}

/* Blog index tables in blog/index.html. */
table.blogindex td.date {
    text-align: left ;
    width:10em;
}

/* Tables used for displaying choices in challenges. */
table.choices tr td {
    vertical-align : top;
}

/* Database tables do _not_ have double borders */
table.outlined {
    border-collapse: collapse;
}

/* Container for content in the bootcamp index page */
div.bootcamps {
    text-align: center;
}

/* Link items (to bootcamp pages) in the bootcamps tables */
table.bootcamps td.link {
    width: 50%;
    text-align: left;
}

/* Spacer items (i.e. ellipsis) on the bootcamps tables */
table.bootcamps td.spacer {
   max-width: 100%;
   text-align: center;
}

/* Date columns on the bootcamps tables */
table.bootcamps td.date {
    width: 50%;
    text-align: right;
}

/* Badge modal dialog */
#assertion-modal {
    width:700px; 
    margin-left:-350px;
}
#assertion-modal iframe {
    background-color: transparent;
    border: 0px none transparent;
    padding: 0px;
    width: 100%; 
    height: 20em;
}

#assertion-model img.badge {
    position: absolute;
    right: 15px;
    bottom: 35px;
    opacity: 0.5;
}

/* list with checkbox as bullet */
ul.checklist {
  list-style-image: url('/img/checkbox.png'); 
}