/* Headings */
h1, h2, h3, h4, h5, h6 {
    color: rgb(03,03,03);
    font-family: "Montserrat", "Helvetica", "Arial";
}

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 {
    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 {
    width: 54em;
    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;
}

/* 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;*/
   /* svg colour is slightly different? */
    background: #2b3990;
}

/* 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. */
}

/* Displaying YouTube videos. */
iframe.youtube_player {
    border: 0;
    text-align: center;
    width: 640px;
    height: 500px;
}

/* 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;
}

/* 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');
}

/* FAQ */
dl.faq dt {
    font-style: italic;
    font-weight: bold;
}

section.content {
    width:100%;
    background: white;
}

.header.home {
    background: url(../img/header.png) no-repeat center center;
    background-attachment: fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

.header {
    background:#2b3990;
}

.header h1 {
    line-height: 1.1;
    margin: 60px 0px 80px;
    font-size: 40pt;
}

#header-text {
    font-size:20pt;
    margin:0;
}

#nav-logo {
    width:270px;
    height:40px;
    top:5;
    left:10;
    position:absolute;
    z-index: 10;
}

#home-options {
    background:#F6F6F6;
    border-top:1px solid #DDDDDD;
    border-bottom:1px solid #DDDDDD;
    padding:20px 0;
    margin-bottom:20px;
}

#title {
    background:#F6F6F6;
    border-top:1px solid #DDDDDD;
    border-bottom:1px solid #DDDDDD;
    padding:0 0 20px;
    margin-bottom:20px;
}

h5 a:link, h5 a:visited,
h4 a:link, h4 a:visited,
h3 a:link, h3 a:visited {
    color:#2b3990;
}

h5 a:hover,
h4 a:hover,
h3 a:hover {
    color:#C26D17;
    text-decoration: none;
}

a {
    color:#3E51CF;
    -webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    -o-transition: all 0.2s ease;
    transition: all 0.2s ease;
}

a:hover {
    color:#965412;
}

footer {
    background:#2b3990;
    padding:20px 0;
    font-size: 10pt;
    margin-top:10px;
}

footer a, footer a:hover{
    color:#FFF;
    padding-left: 10px;
}

footer .container .links{
    background:url('../img/software-carpentry-banner-white.png') no-repeat;
    background-size: 200px;
    background-position: 0;
    height:40px;
    padding:40px 0 0 200px;
    text-align: right;
}