/* This file contains general style classes that can be called to tweak
text and other elements */

/* Classes to change the colour of the text, including child headings */
.whitetext,
.whitetext * {
    color: #FFFFFF;
}

.bluetext,
.bluetext * {
    color: #3399CC;
}

.dimbluetext,
.dimbluetext * {
    color: #287AA3;
}

.midbluetext,
.midbluetext * {
    color: #1B5F91;
}

.darkbluetext,
.darkbluetext * {
    color: #0A1F29;
}

.blacktext,
.blacktext * {
    color: #222222;
}

.greytext,
.greytext * {
    color: #777777;
}

.smalltext,
.smalltext *,
.indicator {
    font-size: 0.95rem;
}

.mediumtext {
    font-size: 1.25rem;
    line-height: 1.75rem;
}

.largetext {
    font-size: 1.4rem;
    line-height: 1.9rem;
}

/* For general padding needs */
.padleft-1 {
    padding-left: 1rem;
}

.padleft-2 {
    padding-left: 2rem;
}

.padtop-1 {
    padding-top: 1rem;
}

.padtop-2 {
    padding-top: 2rem;
}

.padright-1 {
    padding-right: 1rem;
}

.padright-2 {
    padding-right: 2rem;
}

.padbottom-1 {
    padding-bottom: 1rem;
}

.padbottom-2 {
    padding-bottom: 2rem;
}

.verticalwrap {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

.verticalwrap-1 {
    padding-top: 1rem;
    padding-bottom: 1rem;
}

.verticalwrap-2 {
    padding-top: 2rem;
    padding-bottom: 2rem;
}

.verticalwrap-3 {
    padding-top: 3rem;
    padding-bottom: 3rem;
}

.horizontalwrap-1 {
    padding-left: 1rem;
    padding-right: 1rem;
}

.horizontalwrap-2 {
    padding-left: 2rem;
    padding-right: 2rem;
}

.wrap-1 {
    padding: 1rem;
}

.wrap-2 {
    padding: 2rem;
}

.margintop {
    margin-top: 1.5rem;
}

.border, .clickable-border {
    border: 1px solid #BBBBBB;
}

html .blueborder, .clickable-border:hover {
    border: 1px solid #3399CC;
}

html .clickable,
.expandable-toggle {
    color: #287DB4;
}

html .clickable:hover,
.clickable-border:hover,
.expandable-toggle:hover {
    /* Clickables that behave like a link but may not lead anywhere */
    cursor: pointer;
    color: #1E6496;
    -webkit-transition: 0.15s;
    transition: 0.15s;
}

.evenspace, .evenspace-wider, .evenspace-nc {
    /* Spaces children evenly within a container, starting from the left edge to the right edge.
    This also means that if you have only two columns, there could be a large gap between them.
    Wider collapses slightly sooner, mostly to deal with iPads. */
    display: flex;
    justify-content: space-between;
}

html .nomargin {
    margin: 0;
}

html .nopadding {
    padding: 0;
}

html .nopadding-right {
    padding-right: 0;
}

.overflow {
    overflow: auto;
}

.nobreak {
    /* Content does not wrap. */
    white-space: nowrap;
}

html .noborder {
    border: 0;
}

.contentbox {
    box-sizing: content-box;
}

.center {
    margin: 0 auto;
    text-align: center;
}

.maxwidth {
    width: 100%;
    box-sizing: border-box;
}

.align-left {
    text-align: left;
}

.align-right {
    text-align: right;
}

.float-left {
    float: left;
}

.float-right {
    float: right;
}

.float-left:after, .float-right:after {
    content: " ";
    visibility: hidden;
    display: block;
    height: 0;
    clear: both;
}

.align-top {
    vertical-align: top;
}

.align-bottom {
    vertical-align: bottom;
}

/* Geppetto guide colours */
.red {
    color: #E60000;
}

.green {
    color: #2E8A2E;
}

.yellow {
    color: #FFCC00;
}