/**
    Default heading and paragraph styles, 
    being careful not to override homepage styles
    @TODO - check sizes/line-heights of mobile-first headings 
*/
body {
    font-family: "Open sans", Helvetica, Arial, sans-serif;
    font-size:14px;
    font-size:1.4rem;
}

h1:not(.welcome):not(.studying):not(.experience) {
    font-size: 36px;
    font-size: 3.6rem;
    line-height: 30px;
    line-height: 3.0rem;
}

h1#main-content {
    margin-bottom: 3rem;
}

header h1#main-content {
    margin-bottom:1rem;
}

h2:not(.type):not(.category-tags):not(.media-category-tags) {
    font-size: 24px;
    font-size: 2.4rem;
    line-height: 30px;
    line-height: 3.0rem;
    font-weight: 700;
    margin: 20px 0 30px;
}
h3:not(.one-block):not(.mainevent):not(.academic-carousel):not(.one-block-red):not(.two-block-uc7):not(.ucme-red):not(.media-title) {
    font-size: 20px;
    font-size: 2.0rem;
    line-height: 24px;
    line-height: 2.4rem;
    font-weight: 700;
}
h4 {
    font-size: 16px;
    font-size: 1.6rem;
    line-height: 20px;
    line-height: 2.0rem;
    font-weight: 600;
}
h5 {
    font-weight: 600;
    font-size: 14px;
    font-size: 1.4rem;
    line-height: 29px;
    line-height: 2.9rem;
    margin-top: 12px;
    margin-bottom: 14px;
    border-bottom: solid 1px #999;
}
h6 {
    font-weight: 600;
    font-size: 12px;
    font-size: 1.2rem;
    line-height: 1.4rem;
    line-height: 14px;
    margin-top: 0;  
    margin-bottom: 12px;
}
h1 a, h2 a, h3 a, h4 a {
    color: #cc0011;
}
h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover {
    color: #ae0311;
    text-decoration: underline; /* @TODO - we want to underline? */ 
}
p.lead,
.intro-1 {
    font-size: 16px;
    font-size: 1.6rem;
    line-height: 24px;
    line-height: 2.4rem;
    font-weight: 600;
}
.intro-2 {
    font-size: 18px;
    font-size: 1.8rem;
    line-height: 24px;
    line-height: 2.4rem;
}
p,
p.intro {
    font-size: 16px;
    font-size: 1.6rem;
    line-height: 24px; 
    line-height: 2.4rem; 
}
a {
    color: #cc0011;
}
a:focus, a:hover {
    color: #ae0311;
    text-decoration: none;
}
a[rel~="external"]:after {
    content: "\f08e";
    font-family: FontAwesome;   
    padding-left:5px;
}
footer a:focus {
    color: #eee;
}
.breadcrumb a {
    color: #333 !important;
}
header .breadcrumb + h1 {
    text-transform: uppercase;
}
.content.container main ul:not(.nav):not(.page-shortcuts):not(.list-inline):not(.staff-profile-qualifications):not(.pagination):not(.check-list):not(.list-unstyled),
.content.container main ol:not(.nav):not(.page-shortcuts):not(.list-inline):not(.staff-profile-qualifications):not(.pagination):not(.check-list):not(.list-unstyled),
ul.styled-list{
    padding-left:25px;
    list-style-type: none;
}
.content.container main ol:not(.nav):not(.page-shortcuts):not(.list-inline):not(.staff-profile-qualifications):not(.pagination):not(.check-list):not(.list-unstyled) > li,
.content.container main ul:not(.nav):not(.page-shortcuts):not(.list-inline):not(.staff-profile-qualifications):not(.pagination):not(.check-list):not(.list-unstyled) > li,
ul.styled-list > li {
    list-style: none;
    margin-bottom:5px;
}
.content.container main ol:not(.nav):not(.page-shortcuts):not(.list-inline):not(.staff-profile-qualifications):not(.pagination):not(.check-list):not(.list-unstyled) li:before,
.content.container main ul:not(.nav):not(.page-shortcuts):not(.list-inline):not(.staff-profile-qualifications):not(.pagination):not(.check-list):not(.list-unstyled) li:before,
ul.styled-list li:before{    
    font-family: 'FontAwesome';
    content: '\f111';
    margin: 0 10px 0 -15px;
    color: #cc0011;
    font-size: 10px;
    font-size: 1rem;
}

/**
    Colors and helpers
**/
.text-lowlight {
    color:#bcbcbc;
}
.text-red {
    color: #cc0011;
}

.text-grey {
    color: #4d4d4d;
}

.text-grey-99 {
    color: #999;
}
.text-grey-d3 {
    color: #d3d3d3;
}
.text-grey-33 {
    color: #333;
}
.text-grey-e8 {
    color: #e8e8e8;
}
.text-white {
    color: #fff;
}
.text-underline {
    border-bottom: 1px solid #333;
}
.text-bold {
    font-weight: bold;
}
.text-italic {
    font-style: italic;
}
.text-large {
    font-size:18px;
    font-size:1.8rem;
}
.font-x-large {
    font-size:24px;
    font-size:2.4rem;
}
.font-xx-large {
    font-size:30px;
    font-size:3.0rem;
}
/* medium */
@media (min-width: 768px) {
    h1:not(.welcome):not(.studying):not(.experience) {
        margin-top: 70px;
    }    
    header h1 {
        padding-left:10px;
    }
/*    h1:not(.welcome):not(.studying):not(.experience) {
        font-size: 30px;
        font-size: 3.0rem;
        line-height: 3.0rem;
    }
    h2:not(.type):not(.category-tags):not(.media-category-tags) {
        font-size: 28px;
        font-size: 2.8rem;
        line-height: 2.9rem;
    }
    h3:not(.one-block):not(.mainevent):not(.academic-carousel):not(.one-block-red):not(.two-block-uc7):not(.ucme-red):not(.media-title) {
        font-size: 24px;
        font-size: 2.4rem;
        line-height: 2.8rem;
    }
    .contact h3 {
        font-size: 18px !important;  variation for a contact page layout 
        font-size: 1.8rem !important;  variation for a contact page layout 
    }
    h4 {
        font-size: 20px;
        font-size: 2.0rem;
        line-height: 2.6rem;
    }*/
    
    main.main > h1:first-child,
    main.main > h2:first-child,
    main.main > h3:first-child,
    main.main > h4:first-child,
    main.main > h5:first-child,
    main.main > h6:first-child {
        margin-top:0 !important;
    }    
    
    p.lead,
    .intro-1 {
        font-size: 28px;
        font-size: 2.8rem;
        line-height: 36px;
        line-height: 3.6rem;
        font-weight: 600;
    }
    p.lead {
        color:#999999;
        /* Below colour works on #eee background agains AAA standards */
        /*color:#4d4d4d;*/  
    }
    .intro-2 {
        font-size: 24px;
        font-size: 2.4rem;
        line-height: 30px;
        line-height: 3.0rem;
    }
    p.intro {
        font-size: 16px;
        font-size: 1.6rem;
        line-height: 24px; 
        line-height: 2.4rem; 
    }    
}
/* large */
@media (min-width: 992px) {}


.fa {

    font: normal normal normal 2.5rem/1 FontAwesome;
    line-height: 15px;
    line-height: 1.5rem;
}

/**
 Basic recolour
**/
.white {
    color:#ffffff;
}