.grayscale {
    background-color: #FFFFFF; /* Same as img-polaroid*/
    -webkit-filter: grayscale(1);
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
    filter: grayscale(100%);
    -webkit-transition: all .6s ease; /* Fade to color for Chrome and Safari */
    -webkit-backface-visibility: hidden; /* Fix for transition flickering */
}
.grayscaleDisabled {
    background-color: red;
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/></filter></svg>#grayscale");
    -webkit-filter: grayscale(0);
    -webkit-filter: grayscale(0%);
    -moz-filter: grayscale(0%);
    -ms-filter: grayscale(0%);
    -o-filter: grayscale(0%);
}

.img-polaroid {
    background-color: #E7D640;
}
hr {
    border-color: #E7D640;
}

h1, .carousel-caption > h2
{
    color: #FFFFFF;
}

.carousel-caption > h2 {
    /* Set to the same size as H1 (bootstrap.css) */
    font-size: 38.5px;
}

@font-face {
    font-family: FranklinGothic;
    src: url('/css/framd.ttf');
}
@font-face {
    font-family: FranklinGothic;
    src: url('/css/framdit.ttf');
    font-style: italic;
}

h2, body, html {
    font-family: Roboto, FranklinGothic, sans-serif;
}


.pull-left {
    font-size: 13px;
    padding-left:3px;
}

#footer {
    background-color: #000000;
    padding: 5px 20px;
}

.center {
    text-align: center;
}

.bg-black {
    background-color: black;
}

.section-block, .focus-block, .section-block-left20 {
    padding-left: 4px;
    padding-right: 4px;
    margin-bottom: 20px;

    background-color: #DDDDDD;
    background-image: url('/images/background.jpg');

    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    /* Dropped Shadow*/
    -webkit-box-shadow: #666 0px 2px 3px;
    -moz-box-shadow: #666 0px 2px 3px;
    box-shadow: #666 0px 2px 3px;

}

.focus-block {
    min-height: 300px;
}
.focus-block img {
    margin-left: 2px;
    margin-top: 2px;
}

.section-block-left20 {
    margin-left: 0px; /* Undo the *-span 20*/
}

.span9 {
    width: 700px;
}
.span9-border {
    width: 688px;   /* 700 - borders (2) - focus-block:padding (10)*/
    border: 1px solid black;
}
.span6-border {
    width: 448px; /* 460 - borders (2) - focus-block:padding (10) */
    border: 1px solid black;
}
.span3-border {
    width: 208px;   /* 220 - borders (2) - focus-block:padding (10)*/
    border: 1px solid black;
}

/* Desktop Only */
@media (min-width: 980px) {
    h1, h2{
/*        text-shadow: 5px 5px 5px #021758;*/ /*H shadow, V Shadow, Distance, Colour*/
    }
}


/* Extra-Large Desktop */
@media (min-width: 1200px) {
    .span9 {
        width: 870px;
    }
    .span9-border {
        width: 858px;   /* 870 - borders (2) - focus-block:padding (10)*/
        border: 1px solid black;
    }
    .span6-border {
        width: 558px; /* 570 - borders (2) - focus-block:padding (10) */
        border: 1px solid black;
    }
    .span3-border {
        width: 258px;   /* 270 - borders (2) - focus-block:padding (10)*/
        border: 1px solid black;
    }
}

/* Phones and Tablets */
@media (max-width: 980px) {

    .span9, .span6, .span3 {
        width: 100%;
    }
    .span9-border, .span6-border, .span3-border {
        width: 97%; /* An oddity of the responsive design */
        border: 1px solid black;
    }
    .focus-block {
        min-height: 0px;
        margin-bottom: 20px;
        padding-left: 5px;
        padding-right: 5px;
        margin-left: 4px;	/* Reduce the margin */
    }
    h1, .carousel-caption > h2 {
        font-size: 20px;
    }
}
/* Phones and Maybe Tablet*/
@media (max-width: 480px), (max-width: 767px) {
    .span9-border, .span6-border, .span3-border {
        width: 100%;
        border: 1px solid black;
    }

}

/* Padding below the menu */
#wrap > .container {
    padding-top: 41px; /*was 60*/
}
/* Tablet and Phone */
@media (max-width: 480px), (max-width: 767px), (max-width: 980px) {
    #wrap > .container {
        padding-top: 0px; /*was 60*/
    }
}

/*Episode page*/

.gallery-pane {
    max-height: 1948px;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

.span12-border {
    width: 928px; /* 940 - borders (2) - focus-block:padding (10) */
}
/* Extra-Large */
@media (min-width: 1200px) {
    .span12-border {
        width: 1158px; /* 1170 - borders (2) - focus-block:padding (10) */
        border: 1px solid black;
    }
}

/* Tablet and Phone */
@media (max-width: 480px), (max-width: 767px), (max-width: 980px) {
    .span12-border {
        width: 100%;
        border: 1px solid black;
    }

    .gallery-pane {
        max-height: 466px;
        overflow:auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* Force the title to be shown on the image all of the time */
.modal-fullscreen .modal-header {
    opacity: 1;
}