/* ~~~~~~~~~~ Global ~~~~~~~~~~ */
body {
    font-family: roboto, Arial;
}

ul {
    list-style-position: inside;
}

.flexbox {
    display: flex;
    justify-content: space-between;
}
/* TODO: Do I need this? */
.flex-item-grow {
    flex-grow: 1;
    flex-shrink: 0;
}
.flex-item-shrink {
    flex-grow: 0;
    flex-shrink: 1;
}



/* ~~~~~~~~~~ Side Bar ~~~~~~~~~~ */
.sidebar {
    float: left;
    height: 100%;
    width: 50mm;
    background-color: #388098;
    color: #fff;
    padding-left: 3mm;
    padding-right: 3mm;
    padding-top: 5mm;
}

.sidebar .title {
    text-align: center;
    font-size: 8mm;
    font-weight: 600;
    text-decoration: underline;
    margin-bottom: 5mm;
}

.sidebar .headshot-container {
    text-align: center;

}
.sidebar .headshot {
    width: 35mm;
    margin-bottom: 1mm;
}

.sidebar .header {
    text-align: center;
    font-size: 5mm;
    margin-top: 3mm;
    margin-bottom: 1mm;
}

.sidebar .header-2 {
    text-align:center;
    font-size: 3mm;
    padding-top: 1mm;
    padding-bottom: 2mm;
}
.sidebar .header-2:before,
.sidebar .header-2:after {
    content: '\2014';
}

.sidebar .paragraph {
    margin-bottom: 2mm;
}

.sidebar .content {
    font-size: 3mm;
    line-height: 4mm;
}

.sidebar .content.thin {
    font-weight: 300;
}

.sidebar .divider {
    border-bottom: solid .25mm #fff;
    margin-top: 4mm;
    margin-left: 4mm;
    margin-right: 4mm;
}

.sidebar .list {
    display: flex;
    justify-content: center;
    margin-bottom: 1mm;
}

.sidebar .list ul {
    margin-top: 0mm;
    margin-bottom: 0mm;
    padding-left: 2mm;
}

/* Flex bases are agic numbers that depend on the content
 *
 * Find the minimum width of each column that allows all instances
 * of the column to have single-line rows only.
 *
 * This results in columns being centered by the lengthiest row.
 * */
.sidebar .list ul:nth-child(1) {
    flex-basis: 22mm;
    margin-right: 5mm;
}

.sidebar .list ul:nth-child(2) {
    flex-basis: 19mm;
}

.sidebar .list ul li:before {
    content: "";
    margin-left: -0.5mm;
}

.sidebar .contact-info {
    text-align: center;
    margin-top: 4mm;
}

.sidebar .contact-info > div{
    display: inline-block;
}

.sidebar .contact {
    display: table;
    margin-bottom: 5mm;
}

.sidebar .contact > img {
    display: table-cell;
    height: 5mm;
    width: 5mm;
    margin-right: 3mm;
}

.sidebar .contact > span,
.sidebar .contact > a {
    display: table-cell;
    font-size: 3mm;
    vertical-align:middle;
    text-decoration: None;
    color: inherit;
}

/* ~~~~~~~~~~ Main Content ~~~~~~~~~~ */
.main-content {
    float: left;
    height: 100%;
    width: calc(100% - 62mm); /* Dependant on padding & sidebar width */
    padding-left: 3mm;
    padding-right: 3mm;
    padding-top: 4mm;
}

.main-content .header {
    padding-top: 4mm;
}

.main-content .header .title {
    color: #388098;
    font-size: 4.5mm;
    font-weight: 600;
}

.main-content .header .divider {
    display: inline-block;
    border-bottom: solid .25mm #388098;
    margin-left: 2mm;
    margin-bottom: 2.5mm;
}

.main-content .subheader,
.main-content .subsection {
    color: #388098;
    font-size: 3mm;
    margin-top: 0.5mm;
    margin-bottom: 1mm;
}

.main-content .subsection {
    margin-top: 1mm;
}

.main-content .content {
    padding-left: 2mm;
    font-size: 3mm;
    line-height: 4mm;
    margin-top: 0mm;
    margin-bottom: 0mm;
}

.main-content ul.content {
    padding-left: 1mm;
}

.main-content .content li:before {
    content: "";
    margin-left: -0.5mm;
}

.main-content .content .subitem {
    margin-left: 4mm;
}