@import url("https://use.typekit.net/gvu1qnu.css");
/* ^^^ TypeKit requires this to go at the top of the file. ^^^ */
/* 
    Standards
    (Shared by most projects.)
*/

/* For browsers that don't recognize HTML5 tags. */
article, aside, figure, figcaption, footer, header, main, nav, section, summary  {
    display: block;
}

/* Fixes the bizarre default behavior of boxes in CSS. */
html {
    box-sizing: border-box;
}
  
*, *:before, *:after {
    box-sizing: inherit;
}

a {
    /* Removes default link styling */
    color: inherit;
    text-decoration: none;
}

a, h1, h2, h3, h4, h5, h6, p, figure, figcaption, div, body, ul {
    margin: 0;
    padding: 0;
}

ul {
    list-style-type: none;
}
/* 
    Fonts 
*/

/* Gives us consistent font weights on Firefox and Safari. */
* {
	-webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

a, h1, h2, h3, h4, h5, h6, strong, b, p, ul, time, figcaption, address, section {
    /* 
    Using this reference for specifying Helvetica Neue
    http://rachaelmoore.name/posts/design/css/web-safe-helvetica-font-stack/ 
    */
    font-family: "HelveticaNeue", "Helvetica Neue", "HelveticaNeueRoman", "HelveticaNeue-Roman", "Helvetica Neue Roman", "Helvetica", "Arial", sans-serif; 
    font-weight:400; 
    font-stretch:normal;
    font-style: normal;
    color: rgb(83, 76, 73);
}

.hn-reg {
    font-family: "HelveticaNeue", "Helvetica Neue", "HelveticaNeueRoman", "HelveticaNeue-Roman", "Helvetica Neue Roman", "Helvetica", "Arial", sans-serif; 
    font-weight:400; 
    font-stretch:normal;
    font-style: normal;
}

.hn-med {
    font-family: "HelveticaNeueMedium", "HelveticaNeue-Medium", "Helvetica Neue Medium", "HelveticaNeue", "Helvetica Neue", "Helvetica", "Arial", sans-serif; 
    font-weight:500; 
    font-stretch:normal;
}

.hn-bold {
    font-family: "HelveticaNeueBold", "HelveticaNeue-Bold", "Helvetica Neue Bold", "HelveticaNeue", "Helvetica Neue", "Helvetica", "Arial", sans-serif; 
    font-weight:600; 
    font-stretch:normal;    
}

.hn-light {
    font-family: "HelveticaNeueLight", "HelveticaNeue-Light", "Helvetica Neue Light", "HelveticaNeue", "Helvetica Neue", "Helvetica", "Arial", sans-serif; 
    font-weight:300; 
    font-stretch:normal;
}

/* 
    General
    (Specific to SHARE project.)
 */

/* 
    Color Reference
    Default text grey: rgb(83, 76, 73)
    Text light grey:  rgb(201, 201, 207)
    Text purple: rgb(135, 0, 100)
    Page background color: rgb(239, 240, 242)
    Text green: rgb(184, 233, 134)
    Text red: rgb(205, 83, 55)
 */

body {
    background-color: rgb(239, 240, 242);
}

div#content {
    width: 1024px;
    min-width: 768px;
    margin: 0px auto;
}

main {
    width: 700px;
    margin: 0px auto;
}

main>h1, main > header h1 {
    font-size: 42px;
    margin-top: 44px;

    font-family: sofia-pro-soft, sans-serif;
    font-style: normal;
    font-weight: 700;
}

/* Main Nav */

header#main-nav {
    height: 80px;
    width: 100%;
    border-bottom: white 1px solid;

    background-image: url("../img/long_nav_image.ac8a41596f16.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 2560px 80px;
}

header#main-nav nav {
    width: 1024px;
    min-width: 768px;
    height: 100%;
    margin: 0px auto;
    padding: 0px 30px;
    
    display: flex;
    align-items: center;

    background-image: url("../img/nav_rose_motif.ebc288028032.png");
    background-repeat: no-repeat;
    background-size: contain;
}

header#main-nav a {
    display: block;
    margin: 0px 30px;
    color: white;
}

header#main-nav a#profile {
    margin-left: auto;
}

hr {
    border: 0px;
    border-bottom: 1px solid rgb(83, 76, 73);
    margin: 0px;
    margin-bottom: 18px;
}

/* Environment Header */

header#environment {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px;
  
    font-size: 28px;
    background-color: rgb(245, 194, 116);
}

header#environment h1 {
    font-size: 28px;
    color: rgb(83, 76, 73);
    text-align: center;
}

/* Messages */

ul#messages li {
    height: 40px;
    line-height: 40px;
    text-align: center;
    font-size: 18px;
    color: rgb(83, 76, 73);
}

ul#messages li.success {
    background-color: rgb(184, 233, 134);
}

ul#messages li.warning {
    background-color: rgb(245, 194, 116);
}

ul#messages li.error {
    background-color: rgb(205, 83, 55);
    color: white;
}

ul#messages li.debug {
    background-color: rgb(201, 201, 207);
}

ul#messages li.info {
    background-color: rgb(83, 76, 73);
    color: white;
}

ul#messages li::before {
    font-family: "HelveticaNeueBold", "HelveticaNeue-Bold", "Helvetica Neue Bold", "HelveticaNeue", "Helvetica Neue", "Helvetica", "Arial", sans-serif; 
    font-weight:600; 
    font-stretch:normal;    
}

ul#messages li.debug::before {
    content: "Debug: ";
}

ul#messages li.info::before {
    content: "Info: ";
}

ul#messages li.success::before {
    content: "Success! ";
}

ul#messages li.warning::before {
    content: "Warning: ";
}

ul#messages li.error::before {
    content: "Error: ";
}

/* Forms General */

form {
    margin-top: 32px;
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
}

form p {
    width: 100%;
    margin-bottom: 16px;
}

form .helptext {
    display: none;
}

form label {
    display: block;
    margin-bottom: 6px;

    font-family: "HelveticaNeueBold", "HelveticaNeue-Bold", "Helvetica Neue Bold", "HelveticaNeue", "Helvetica Neue", "Helvetica", "Arial", sans-serif; 
    font-weight:600; 
    font-stretch:normal;    
    font-size: 14px;
}

/* 
    This is a very clever but filthy hack to get rid of the colon 
    that Django insists on adding after every form label.
    https://www.craigrodrigues.com/blog/changing-the-color-of-the-last-letter-of-a-word-using-only-css
*/
form label::after {
    content: ":";
    /* Color matches the page background color. */
    color: rgb(239, 240, 242); 
    position: absolute;
    transform: translate(-100%, 0);  
}

form input {
    display: block;
    height: 50px;
    width: 100%;
    padding: 0px 30px;

    border-radius: 20px;
    border-color: transparent;  

    font-size: 21px;
    color: rgb(19,44,80);
}

form button, form input[type='submit'] {
    display: block;
    height: 50px;
    margin: 44px auto;
    padding: 0px 25px;

    background-color: rgb(135,0,100);
    color: white;
    font-size: 18px;
    border-color: transparent;  
    border-radius: 25px;

    font-family: "HelveticaNeueMedium", "HelveticaNeue-Medium", "Helvetica Neue Medium", "HelveticaNeue", "Helvetica Neue", "Helvetica", "Arial", sans-serif; 
    font-weight:500; 
    font-stretch:normal;
}

form input[type='checkbox'] {
    width: 50px;
    height: 50px;
}

/* Error */

body.error h1 {
    font-family: sofia-pro-soft, sans-serif;
    font-style: normal;
    font-weight: 500;

    font-size: 42px;
    line-height: 60px;

    margin-top: 110px;
    text-align: center;
}

body.error h1 a {
    font-family: inherit;
    font-style: inherit;
    font-weight: inherit;

    color: rgb(135, 0, 100);
    text-decoration: underline;
}

body.error figure.share-logo {
    margin-top: 64px;
    display: flex;
    justify-content: center;
}

ul.errorlist li {
    font-family: "HelveticaNeueBold", "HelveticaNeue-Bold", "Helvetica Neue Bold", "HelveticaNeue", "Helvetica Neue", "Helvetica", "Arial", sans-serif; 
    font-weight:600; 
    font-stretch:normal;

    font-size: 14px;
    color: rgb(205, 83, 55);
}