/* For general additions/changes only */

@font-face{
    font-family: 'Open Sans Archive';
    src: url(/TemplatePackage/archive/assets/fonts/OpenSans-Regular.ttf) format('truetype');
}
@font-face{
    font-family: 'Merriweather Archive';
    src: url(/TemplatePackage/archive/assets/fonts/Merriweather-Regular.otf) format('embedded-opentype');
}

html, body {
    height: 100%;
}

body {
    display:flex;
    flex-direction: column;
}

#archive-container {
    flex: 1 0 auto;
}

.archive-header-container {
    position:fixed;
    top:0;
    width:100%;
    z-index:1000;
}

#archive-header {
    display:flex;
    flex-grow:1;
    flex-shrink:1;
    flex-wrap:wrap;
    padding-bottom:0;
    z-index:1;
    justify-content: space-between;
    padding:15px;
    font-family: 'Open Sans', 'Open Sans Archive', sans-serif;
    background-color: #FFECB3;
}

.h6 {
    font-weight:bold;
    font-size:17px;
    color: #333;
}

.h4 {
    font-weight: bold;
    font-size: 23px;
    color: #333;
}

#archive-header .archive-cdc-logo {
    order:1;
    margin-right:17px;
    align-self: center;
}

.archive-cdc-logo img {
    height:50px;
}

#archive-header .content {
    line-height: 1.3;
    display:flex;
    align-items: center;
    order: 2;
    flex:1 0 0%;
}

#archive-header .content a {
    text-decoration: underline;
    color: #075290;
}

#archive-header .content > p {
    line-height:inherit;
    margin:0;
    text-align:inherit;
    font-family: 'Open Sans', 'Open Sans Archive', sans-serif;
}

#archive-header #archive-tag {
    display:flex;
    align-items: center;
    order: 3;
    margin-left:17px;
    font-family: 'Merriweather', 'Merriweather Archive', serif;
    justify-content: flex-end;
}

#archive-subheader {
    background-color: #005EAA;
    padding:10px 15px;
    order:4;
    display:flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

#archive-subheader .buttons-right {
    flex-basis:350px;
    display:flex;
    flex-wrap: wrap;
    justify-content: flex-end;
}

#archive-subheader .buttons-right a:first-child {
    margin-right: 1em;
}

#archive-subheader a {
    margin: 0 5px;
    font-family: 'Open Sans', 'Open Sans Archive', sans-serif;
    flex-basis:150px;
    flex-shrink: 1;
    padding:4px 0;
    background: #fff;
    border-radius: 5px;
    font-size: 17px;
    color: #005EAA;
    text-decoration: none;
    text-align: center;
}

#archive-header button, #archive-subheader a {
    border:none;
    cursor:pointer;
}

#archive-footer {
    display:flex;
    flex-grow:1;
    flex-shrink:0;
    flex-wrap:wrap;
    background-color:#333;
    justify-content: space-between;
    padding:15px;
}

#archive-footer ul {
    margin: 0 auto;
}

#archive-footer li {
    list-style:none;
    display:inline-block;
    margin: 14px;
}

#archive-footer li > a {
    color: #fff;
    font-size: 14px;
    text-decoration: none;
    font-family: 'Open Sans', 'Open Sans Archive', sans-serif;
}

#archive-footer li > a:hover {
    text-decoration: underline;
}

@media (max-width:540px){
    #archive-subheader a {
        margin: 10px;
        margin-bottom:0;
        flex-basis:100%;
    }
    #archive-subheader > a {
        margin-top:0;
    }
    #archive-subheader .buttons-right {
        flex-basis:100%;
    }
    #archive-subheader .buttons-right a:first-child {
        margin-right:10px;
    }

    #archive-footer li {
        display:list-item;
    }
}

@media (max-width:767.98px){
    #archive-header #archive-tag {
        order: 2;
        flex-basis: calc(100% - 117px);
    }
    #archive-header .content {
        padding-top:10px;
        order: 3;
        flex-basis: 100%;
    }
}