/*****************************************************************************/
/*              The basic style guide for the whole application              */
/*****************************************************************************/
/* NOTE: initially we will run with this whole .better-styles container.
Once we get all the application code ready for it, we will get rid of that. */

@font-face {
    font-family: 'Playlist-script';
    font-style: normal;
    font-weight: normal;
    src: local('Playlist script'), local('Playlist-script'), url(../fonts/playlist/playlist-script.otf) format('opentype');
}

@font-face {
    font-family: 'Avenir';
    src: url('../fonts/avenir/Avenir-Book.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Avenir';
    src: url('../fonts/avenir/Avenir-BookOblique.ttf') format('truetype');
    font-weight: normal;
    font-style: italic;
}
@font-face {
    font-family: 'Avenir';
    src: url('../fonts/avenir/Avenir-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
}
@font-face {
    font-family: 'Avenir';
    src: url('../fonts/avenir/Avenir-MediumOblique.ttf') format('truetype');
    font-weight: 500;
    font-style: italic;
}
@font-face {
    font-family: 'Avenir';
    src: url('../fonts/avenir/Avenir-Heavy.ttf') format('truetype');
    font-weight: 900;
    font-style: normal;
}
@font-face {
    font-family: 'Avenir';
    src: url('../fonts/avenir/Avenir-HeavyOblique.ttf') format('truetype');
    font-weight: 900;
    font-style: italic;
}
@font-face {
    font-family: 'Avenir-Roman';
    src: url('../fonts/avenir/Avenir-Roman.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

body {
    font: 400 16px Avenir, Arial, sans-serif;
}

.better-styles .Avenir-heading {
    font-family: Avenir, Arial, 'sans-serif';
}

.better-styles .oswald-heading {
    font-family: Oswald, Arial, 'sans-serif';
}

.better-styles,
.better-styles h2,
.better-styles h3,
.better-styles h4,
.better-styles h5,
.better-styles h6 {
    font-family: Avenir, Arial, 'sans-serif';
    color: #000000;
}

.better-styles h1 span,
.better-styles h2 span,
.better-styles h3 span,
.better-styles h4 span,
.better-styles h5 span,
.better-styles h6 span{
    font-weight: inherit;
}

.better-styles h1,
.better-styles h2,
.better-styles h3 {
    font-weight: 900;
}
.better-styles h4,
.better-styles h5,
.better-styles h6 {
    font-weight: 500;
}
.better-styles h1 {
    font-size: 28px;
}

.better-styles h2 {
    font-size: 24px;
}
.better-styles h3 {
    font-size: 18px;
    margin-top: 45px;
}
.better-styles h4 {
    font-size: 18px;
}

.better-styles .color-teal {
    color: #32908c;
}

.better-styles .centered {
    text-align: center;
}
.better-styles .right-aligned {
    text-align: right;
}

.better-styles .emphasised {
    font-style: italic;
}

.better-styles .shaded {
    color: #999999;
}

.better-styles .clickable {
    cursor: pointer;
}

body b,
.better-styles .strengthened,
.better-styles b {
    font-weight: 900;
}

.better-styles .emphasised-container {
    box-sizing: border-box;
    border: solid 2px #f7f7f7;
    border-radius: 10px;
    padding: 0;
    margin-top: 20px;
    margin-bottom: 20px;
}
.better-styles .emphasised-container.filled {
    background-color: #f7f7f7;
}
.better-styles .emphasised-container .emphasised-container--content {
    /*margin: 20px;*/
    margin: 20px 20px 10px 20px;
}

.better-styles .emphasised-container > header .emphasised-container--content {
    margin: 15px 18px;
}
.better-styles .emphasised-container > header {
    margin-top: 0;
    margin-bottom: 0;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.better-styles ul.horizontal-key-value-list {
    list-style-type: none;
}
.better-styles ul.horizontal-key-value-list > li {
    display: inline-block;
    margin-right: 25px;
}


.better-styles .btn {
    border-radius: 20px;
    border-width: 0;
    display: inline-block;
    text-align: center;
    transition: all 300ms ease-in-out;
    width: 300px;
    height: 40px;
    font-size: 14px;
    font-weight: 900;
    max-width: 100%;
    padding: 10px;
}

/*.better-styles .btn:focus {
    background-color: #39699E;
    border-color: #ba9ca8;
}*/

/* Additional overrides for specific buttons */
.btn-pw {
    font-weight: bold;
    background-color: #F1CE27;
    border-radius: 4px;
    transition: all 300ms ease-in-out;
}

/* Colors
mid teal: #39699E
dark teal: #FF696E
mustard: #F1CE27
rose: #ba9ca8
light teal #d0e0e3

off white: #f7f7f7
grey: #cccccc
dark grey: #999999
light grey : #EEEEEE;
light-black: #4a4a4a;
black: #000000
 */

.better-styles .bg-primary,
.better-styles .bg-dark-teal {
    background-color: #FF696E;
    color: white;
}

.better-styles .bg-secondary,
.better-styles .bg-denim {
    background-color: #39699E;
    color: white;
}
.better-styles .bg-tertiary,
.better-styles .bg-warning,
.better-styles .bg-mustard {
    background-color: #F1CE27;
    color: white;
}
.better-styles .bg-mustard:hover {
    background-color: #E3C400;
}
.better-styles .bg-light-grey {
    background-color: #EEEEEE;
}
.better-styles .bg-ultra-light-grey {
    background-color: #f8f8f8;
}
.better-styles .bg-error {
    background-color: #ed7c76;
}
.better-styles .bg-success {
    background-color: #57af70;
}
.better-styles .bg-honey-yellow {
    background-color: #FFF6E3;
}

.better-styles .bg-white {
    background-color: #FFFFFF;
    color: #39699E;
}

.better-styles .bdr-primary {
    border-color: #FF696E;
}

.better-styles .bdr-secondary,
.better-styles .bdr-denim {
    border-color: #39699E;
}
.better-styles .bdr-light-grey {
    border-color: #EEEEEE;
}
.better-styles .bdr-off-white {
    border-color: #f7f7f7;
}
.better-styles .bdr-error {
    border-color: #ed7c76;
}

.better-styles .fg-primary,
.better-styles .fg-dark-teal {
    color: #FF696E;
}
.better-styles .fg-secondary,
.better-styles .fg-mid-teal {
    color: #39699E;
}
.better-styles .fg-dark-denim {
    color: #2A415B;
}
.better-styles .fg-error {
    color: #ed7c76;
}

.better-styles .fg-mustard {
    color: #F1CE27;
}
.better-styles .fg-light-black {
    color: #4A4A4A;
}

.better-styles .fg-grey {
    color: #5a5a5a;
}

.better-styles .fg-dark-grey {
    color: #999999;
}

/* -------------------- */

.better-styles .round-bordered {
    border: 2px solid;
    border-radius: 10px;
}

.better-styles .btn.btn-bordered {
    background: none;
    border-style: solid;
    border-width: 2px;
    transition:
        border-color 300ms ease-in-out,
        color 300ms ease-in-out,
        background-color 300ms ease-in-out
        ;
}


/*.better-styles .btn.btn-bordered:focus {
    border-color: #39699E;
}*/
.better-styles .btn.btn-bordered.bdr-denim:hover,
.better-styles .btn.btn-bordered.bdr-denim:active,
.better-styles .btn.btn-bordered.bdr-secondary:hover,
.better-styles .btn.btn-bordered.bdr-secondary:active {
    border-color: #39699E;
    color: white;
    background-color: #39699E;
}

.better-styles .btn.btn-bordered.bdr-primary:hover,
.better-styles .btn.btn-bordered.bdr-primary:active {
    color: white;
    background-color: #FF696E;
}

/* TODO: hover colours */
.better-styles .btn.bg-mustard:hover {
    background-color: #E3C400;
    color: white;
}

.better-styles .btn.bg-denim:hover,
.better-styles .btn.bg-secondary:hover {
    background-color: #2A415B;
}

.better-styles .btn.bg-primary:hover {
    background-color: #E95258;
}


.better-styled-container {
    margin-top: 60px;
    margin-bottom: 40px;
}

.better-styles a.fg-mid-teal:not(.btn):hover,
.better-styles a.fg-mid-teal:not(.btn):active {
    text-decoration: underline !important;
}

.better-styles .link-without-decoration:hover,
.better-styles .link-without-decoration:visited,
.better-styles .link-without-decoration:link,
.better-styles .link-without-decoration:active {
    text-decoration: none!important;
    -webkit-box-shadow: none!important;
    box-shadow: none!important;
}

@media only screen and (max-width: 768px) {
    .better-styled-container {
        margin-top: 40px;
        margin-bottom: 20px;
    }
    .better-styles article {
        font-size: 14px;
    }
}

/* Bootstrap overrides */
.better-styles .dropdown-menu>.active>a,
.better-styles .dropdown-menu>.active>a:focus,
.better-styles .dropdown-menu>.active>a:hover {
    background-color: #39699E;
}

.better-styles .hidden {
    visibility: hidden;
}

.looking-for-registry {
    display: inline-block;
    width: 300px;
    max-width: 100%;
}
.better-styles .bg-greyedout {
    background-color: #999;
    color: white;
}