/* CSS Document */

body {
	background-color: #5B0B1A !important;
    width: calc(100% - 16px);
    height: calc(100% - 16px);

    margin: 0;
}

html {
    overflow: hidden;
    height: 100%;
}

body {
    height: 100%;
    overflow: auto;
}

.dropdown-toggle::after {
    display:none !important;
}

.main-content .bg-light{
    display: none;
    background-color: #5B0B1A !important;
    border-bottom: 1px solid black;
}

.left-side-content a {
    color: white !important; 
}

.left-side-content a:link{
    color: white !important;
}

.left-side-content a:visited {
    color: white !important;
}

#top-bar{
	height: auto;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
    
    margin-bottom: 15px;


    width: 175px;
    padding: 0;
}

#top-bar a{
    width: 175px;
    margin: 0;
}

#top-bar .top-bar-image{
    width: 175px;
}

.main-content{
    display: flex;
    width: 100%;
    height: 100%;
}

#nav{
    border-right: 1px solid white;
    width: 175px;
    height: calc(100% - 85px);
}

.navbar{
    max-height: 100%;
}

#navbarSupportedContent{
    display: block;
    height: 0px;
    width: 100%;

    transition-property: height;
    transition-duration: 0.5s;

    overflow-y: scroll;
}


#screenDoor{

    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;

    margin-top: 80px;
}

#screenDoor #screenDoorGifTop, #screenDoor #screenDoorGifBottom {
    width: 275px;
    opacity: 1;
}

#screenDoor #screenDoorGifTop {
    transition-property: opacity;
    transition-duration: 0.5s;
}



.screen-door-container{
    position: relative;

    width: 275px;
    height: 600px;
}

.screen-door-container img{
    position: absolute;
    top: 0;
    left: 0;
}

.section-title{
    width: 100%;
    text-align: center;

    opacity: 1;
    transition-property: opacity;
    transition-duration: 0.5s;
}

.topbar-txt{
    width: 100%;
    font-family: Papyrus, sans-serif;
    color: white;
    font-weight: bold;
    font-size: 48px;
    text-align: center;
    margin-top: 20px;
    
}

.categoryName {
    cursor: pointer;
}

.sublinks {
    height: auto;
    display: none;
    width: 175px;
    padding-right: 10px;
}

.sublinks ul{
    list-style-type: none;
}

/*The following rule corrects the line spacing in the navigation links: - Aaron Katz*/

.sublinks li {
    line-height: 1.2em;
    margin-bottom: .95em;
}

.individual-sublink {
    margin-bottom: 10px;
}

.individual-sublink:hover{
    cursor: pointer;
}

.individual-sublink a{
    text-decoration: none;
    font-family: Georgia, "Times New Roman", Times, serif; 
    font-size: 14px; 
    font-style: italic;
    text-wrap: none;
}

.individual-sublink a:link {
	color: #FFFFFF;
	text-decoration: none;
}
.individual-sublink a:visited {
	color: #999999;
	text-decoration: none;
}
.individual-sublink a:hover {
	text-decoration: underline;
}
.individual-sublink a:active {
	text-decoration: none;
}

.rightLINKSbig {
    font-size: 16px;
}

.main-body-content{
    width: calc(100% - 190px);
    height: calc(100% - 10px);
    padding-left:20px;
}

.content {

    height: 100%;
    width: 100%;

    display: none;
    flex-direction: column;
}

.content .contentTitle{
    width: 100%;
    border-bottom: 1px solid white;
    height: 10%;

    display: flex;
    align-items: center;
}

.content .contentBody{
    width: 100%;
    height: 90%;
}

#contentHTML {
    width: 100%;
    height: 100%;
}

.title {
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 24px;
	font-style: italic;
	line-height: normal;
	font-weight: bold;
	color: #FFFFFF;
}


/****************************************** 
**************** Stories ******************
******************************************/

.body-story-container{
    display: flex;
    justify-content: space-around;
}

.bodystories table{
    width: calc(100% - 100px);
}
.bodytext {

    display: flex;
}

.bodytext table{
    width: calc(100% - 100px);
}

#synopsisImgContainer {
    
    width: 200px;

    padding-top: 10px;
}

#synopsisImgContainer img{
    width: 100%;
}

#synopsisImgContainer #downloadPDFImg,
#synopsisImgContainer #readStoryImg{
    width: 50px;
}

.storyHTMLbody {
    padding: 10px;
}

.storyHTMLbody p{
    margin: 0;
}

.links{
    display: flex;
    justify-content: space-around;
    align-items: center;

    padding-top: 10px;
}

.pdfLink, .htmlLink {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100px;

    color: white;
}

.pdfLink a, .htmlLink a{
    padding-top: 10px;
    text-decoration: none;
    color: white;
}

.pdfLink a:link{
    color: white;
}

.pdfLink a:visited{
    color: white;
}

.pdfTxt {
    color: white;
}

/****************************************** 
**************** Movies *******************
******************************************/

.movie-bodytext {
    display: flex;
}

.moviebody{
	color: #FFFFFF;
}
.moviebody a {
	font-size: medium;
	color: #FFFFFF;
}
.moviebody a:visited {
	color: #FFFFFF;
}
.moviebody a:link {
	color: #FFFFFF;
}
.synoposis-text-container{
    width: 300px;

    padding-top: 10px;
}

.movie-trailer-container{
    padding: 10px;
}

.dvd-link{

    padding-top: 5px;
}


/****************************************** 
**************** Music ********************
******************************************/


.musicbody{
	color: #FFFFFF;
}
.musicbody a {
	font-size: medium;
	color: #FFFFFF;
}
.musicbody a:visited {
	color: #FFFFFF;
}
.musicbody a:link {
	color: #FFFFFF;
}

.music-bodytext {
    display: flex;
}

.music-synopsis-container{
    padding-left: 10px;
    padding-right: 10px;
}

.audio-container{
    width: 300px;

    padding: 1em 0 1em 0;
}

.music-notes-link{

    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.music-notes-link-2{
}

.music-notes-link a{
    display: flex;
    flex-direction: column;
    align-items: center;

    text-decoration: none;
}

.music-notes-link img{
    width: 50px;
}

.three-bronchioles .music-synopsis-container{

    width: 300px;
}

.three-bronchioles .audio-container {

    display: flex;

    margin-top: 0;
}

.three-bronchioles .audio-container p{
    margin-top: 0;

}

.three-bronchioles .audio-container audio{
    margin-bottom: 16px;
}

.musicpart{
    margin: 16px;
}

.score-link{
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.score-link a{
    display: flex;
    flex-direction: column;
    align-items: center;

    text-decoration: none;
}

.score-link img{
    width: 50px;
}

.music-synopsis-container .music-notes-link{
    display: flex;
    flex-direction: row;
    justify-content: space-around;
}

.compactor .music-synopsis-container a:link{
    color: #3399CC
}

.compactor .music-synopsis-container a:visited{
    color: #3399CC
}

.compactor .music-synopsis-container a{
    color: #3399CC
}

.compactor .music-synopsis-container p{
    text-indent: 25px;
}

/****************************************** 
************ Writings *********************
******************************************/

.cdReview-html body, .cdReview-html td, .cdReview-html th {
    color: #FFFFFF;
}

.cdReview-html a {
    font-size: small;
    color: #CCCCCC;
}

.cdReview-html a:visited {
    color: #6633FF;
}

.cdReview-html a:link {
    color: #0033CC;
}

.cdReview-html .style1 {
    color: #5B0B1A;
}

.cdReview-html .style2 {
    color: black;
}

.cdReview-html .style3 {
    font-size: 14px;
}

.writings-bodytext{
	color: #FFFFFF;
}
.writings-bodytext a {
	font-size: medium;
	color: #FFFFFF;
}
.writings-bodytext a:visited {
	color: #FFFFFF;
}
.writings-bodytext a:link {
	color: #FFFFFF;
}

.writings-bodytext {
    display: flex;
}

.writings-image-container{

    width: 300px;

    padding: 1em 0 1em 0;
}

.writings-image-container #downloadPDFImg,
.writings-image-container #readStoryImg{
    width: 50px;
}

.writings-image-container img{
    width:300px;
}

.writings-synopsis-container{
    margin-left: 16px;
}

.writings-hyperlinks{
    display: flex;
    justify-content: center;
}

.writings-hyperlinks a{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 16px;
    text-decoration: none;
}

.writings-hyperlinks a img{
    margin-bottom: 10px;
}

.synopsis-links{

    justify-content: space-around;
}

.writings-synopsis-container .style14{
    margin: 10px 0;
}


/****************************************** 
************ Photos *********************
******************************************/

.photo-container{
    margin-top: 16px;
}



/****************************************** 
**************** News *********************
******************************************/

.news-bodytext{
	color: #FFFFFF;
}
.news-bodytext a {
	font-size: medium;
	color: #FFFFFF;
}
.news-bodytext a:visited {
	color: #FFFFFF;
}
.news-bodytext a:link {
	color: #FFFFFF;
}

.news-bodytext {
}

.news-text-container{
    padding-left: 16px;
}


/****************************************** 
************ Auto Bio *********************
******************************************/

.autobio-bodytext{
	color: #FFFFFF;
}
.autobio-bodytext a {
	font-size: medium;
	color: #FFFFFF;
}
.autobio-bodytext a:visited {
	color: #FFFFFF;
}
.autobio-bodytext a:link {
	color: #FFFFFF;
}

.autobio-bodytext {
    display: flex;
}

.autobio-text-container{
    padding-left: 16px;
}

.autobio-image-container{

    width: 300px;

    padding: 1em 0 1em 0;
}

.autobio-image-container img{
    width:300px;
}

.bodystories-custom{
    font-family: "Times New Roman", Times, serif;
    font-size: 14px;
    font-style: normal;
    line-height: 1.3em;
    font-weight: normal;
    text-indent: 25px;
    padding-top: 2px;
    padding-right: 4px;
    padding-bottom: 2px;
    padding-left: 4px;
    color: #000000;
}

.autobio-custom a {
	font-size: medium;
	color: #CCCCCC;
}
.autobio-custom a:visited {
	color: #660033;
	text-decoration: none;
}
.autobio-custom a:link {
	color: #000066;
	text-decoration: none;
}
.autobio-custom a:hover {
	text-decoration: underline;
}
.autobio-custom a:active {
	text-decoration: none;
}

.autobio-hyperlink{

    padding-top: 16px;
}

.autobio-hyperlink a{
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    
}

.sf-suicide-image-container{
    display: flex; 
    justify-content: space-around; 
    margin-top: 16px;
}

.warrenpics-body{
    display: block;
}

.audio-diaries{
    background-color: #D08395 !important;
    padding: 10px;
}

.audio-diaries-subtable{
        display: flex;
        justify-content: space-around;
        align-items: center;
    }

.inside-giant-camera{
    display: flex;
    flex-direction: column;
}




/* This is a media query. This CSS takes over depending on the specification
	In this instance, the CSS takes over when the screen width is less than 767px
	Essentially, this is CSS for mobile devices and small tablets
*/
@media screen and (max-width: 767px){

    body{
        width: 100vw;
        padding: 5px;
    }
    .main-content .bg-light{
        display: flex;
    }

    .navbar-nav .dropdown-menu{
        background-color: rgba(171, 78, 91, 1);
        color: white;
        margin-top: -10px;

    }

    .main-content .navbar-light .navbar-toggler{
        border: 1px solid white;
    }


    .main-content{
        flex-direction: column;
    }

    .left-side-content{
        display: none;

    }

    #nav{
        border-right: none;
    }

    .screen-door-container{
        width: 200px;
        height: 450px;
    }

    #screenDoor #screenDoorGifTop, #screenDoor #screenDoorGifBottom{
        width: 200px;
    }

    .topbar-txt{
        font-size: 36px;
    }

    .main-body-content{
        width: 100%;
        height: calc(100% - 62px);

        margin-top: 99px;
        padding: 0;
    }

    .content{
        width: 100%;
        height: 100%;

        padding: 0;
    }

    .contentTitle{
        justify-content: center;
    }

    .title{
        font-size: 16px;
        text-align: center;
    }

    .bodytext, .movie-bodytext, .music-bodytext, 
    .three-bronchioles .audio-container, .writings-bodytext,
    .autobio-bodytext{
        flex-direction: column;
        align-items: center;
        padding: 0;
    }


    .bodytext .storyHTMLbody{
        width: 95%;
        padding: 5px;
    }

    .movie-bodytext video{
        width: 100%;
    }

    .movie-bodytext .dvd-link{
        text-align: center;
    }

    .writings-synopsis-container{
        margin-left: 0;
        width: 95%;
    }

    .autobio-bodytext{
        padding: 10px;
        width: auto
    }

    .body-story-container{
        display: block;
        width: 100%;
        padding: 0 !important;
    }

    .body-story-container .pdfLink{
        display: none;
    }

    .body-story-container table{
        width: 100%;
    }

    .body-story-container table img{
        max-width: 100%;
    }

    .bodytext table{
        width: 100%;
    }

    .photo-container img{
        width: 100%;
    }

    .html-image-container{
        padding: 0;
        width: 100%;
    }

    .sf-suicide-image-container {
        flex-direction: column;
        align-items: center;
    }

    .sf-suicide-image-container div{
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .nav-item .dropdown-menu{
        padding-left: 10px;
    }

    .main-content .bg-light{
        background: rgba(91,11,26, 1) !important;
    }

    .autobio-text-container{
        padding: 0;
        width: 100%;
    }

    .warrenpics-body, html .george-coates-body{
        margin: 0;
        padding: 0;
    }

    .warrenpics-body img, .george-coates-body img{
        max-width: 100%;
    }

    .warrenpics-body table, .george-coates-body table{
        width: 100%;
    }

    img{
        max-width: 100%;
    }

    .george-coates-body th, .george-coates-body tr, .george-coates-body td{
        padding-left: 0;
        padding-right: 0;
        margin-left: 0;
        margin-right: 0;
    }

    #navbarSupportedContent li a{
        padding: 10px 0;
    }

    .tribute-to-amc-pacer .tribute-title{
        font-size: 18px;
    }

    html .audio-diaries{
        padding: 0 5px;
        width:auto;
    }

    .audio-diaries-subtable{
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
    }
}


/* This is a media query. This CSS takes over depending on the specification
	In this instanced, the CSS takes over when the screen width is less than 480px
	Essentially, this is CSS for mobile devices, which takes precedence over the above
	media query for any overlapping CSS styling on the same elements
*/
@media screen and (max-width: 480px) {
    .navbar-brand .top-bar-image{
        width: 100px;
    }

    .main-body-content{
        margin-top: 62px;

        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    #screenDoor{
        margin: 10px;
    }

    .screen-door-container {
        width: 125px;
        height: 325px;
    }

    #screenDoor #screenDoorGifBottom{
        width: 125px;
    }

    #screenDoor #screenDoorGifTop{
        width: 125px;
    }

    .topbar-txt{
        font-size: 24px;
    }

    .bodytext #synopsisImgContainer{
        width: 95%;
        padding: 5px;
    }

}


.style5 {color: #660033}