/**
    Column blocks (generally used in 3 or 4 col layouts)
**/
.col-block p,
.col-block div,
.col-block img,
.col-block form {
    padding-bottom:15px;
}
/** --------------------------------- **/


/**
    horizontal cutout promo block
**/
.horizontal-cut {
    background-color:#f4f4f4;
}
.horizontal-cut .img-responsive{
    margin:0;
    padding:0;
}
/** --------------------------------- **/


/**
    Page anchor navigation 
**/
.page-shortcuts li {
    display: block;
    float: left;
}
.page-shortcuts li a {
    font-weight: 600;
    text-transform: uppercase;
    font-size: 12px;    
    font-size: 1.2rem;  
    color: #cc0011;
}
.page-shortcuts li:after {
    display: block;
    float: right;
    content: "|";
    margin: 0 5px;
    color: #333;
}
.page-shortcuts li:last-child:after {
    display: none;
}

/**
    Contact Card - used to display a staff member or information about a person or place
**/
.contact-card {
    background-color:#f2f2f2;
    font-size: 1.2rem;
    line-height: 1.6rem;
    overflow: hidden;
    margin: 0 0 15px 0;
}
.contact-card .col-xxs-5 {
    padding: 0;
}
.contact-card .col-xxs-5 img {
    width: 100%;
}
.contact-card .col-xxs-5 a.focus--keyboard {
    width: 96%;
    margin: 2%;
    background: #333;
}
.contact-card h4 {
    font-weight: 600;
    margin-bottom: 0;
}
.contact-card h4 a {
    color: #cc0011;
}
.contact-card h5 {
    margin-top: 5px;
}
.contact-card .col-xxs-7 div {
    margin-bottom: 8px;
}
@media (min-width: 768px) { 
    .contact-card h4 {
        font-size: 16px;
        font-size: 1.6rem;
        line-height: 20px;
        line-height: 2.0rem;
        margin-bottom: 5px;
        font-weight: 400;
    }    
    .contact-card h5 {
        font-weight: 600;
    }
}

/**
    Staff profile detail page 
**/
.staff-profile-header {
    background: #999;
    color: #fff;
    text-align: center;
    margin-right: 0;
    margin-left: 0;
}


.staff-profile-header a,
.landing-box a{
    color: #fff;
    text-decoration:underline;
}
.staff-profile-header h2 {
    font-size: 30px !important;
    font-size: 3.0rem !important;
    line-height: 3.0px !important;
    line-height: 3.0rem !important;
    margin-bottom: 10px !important;
    font-weight: 600 !important;
}
.staff-profile-header h2 span {
    font-weight: 400;
    font-size: 16px;
    font-size: 1.6rem;
    display: block;
    text-transform: uppercase;
}
.staff-profile-position {
    font-size: 16px;
    font-size: 1.6rem;
    font-weight: 600;
    margin: 1em 0;
}
.staff-profile-header h4 {
    text-transform: uppercase;
    font-weight: 400;
    font-size: 15px;
    font-size: 1.5rem;
}

.staff-profile-quote {
    padding: 15px;
}

.staff-profile-photo {
    padding-top: 15px;
}
.staff-profile-photo img {
    width: 100%;
}
.staff-profile .linkedin {
    font-size: 40px;
    font-size: 4.0rem;
    margin-top: 10px;
/*    transition: color .3s;*/
}
.staff-profile .fa-linkedin-square:hover,
.staff-profile .fa-linkedin-square:focus,
.staff-profile .fa-linkedin-square:active{
    color:#ae0311;
    -webkit-transition: color .3s;
    transition: color .3s;
}
/*.staff-profile a:hover .fa-linkedin-square {
    color: #eee;
}*/
.staff-profile-quote {
    background: #e8e8e8;
}
.staff-profile-quote blockquote {
    font-size: 18px;
    font-size: 1.8rem;
    font-style: italic;
    color: #000;
    padding: 10px 20px;
    margin: 0;
    border: 0;
}
.staff-profile-downloads li,
.staff-profile-courses li {
    margin-bottom: 10px;
}
.staff-profile-courses a {
    background: #fff;
    color: #cc0011 !important;
    display: block;
    padding: 5px 10px;
}
.staff-profile-qualifications .fa {
    display: inline-block;
    font: normal normal normal 2.5rem/1 FontAwesome;
    line-height: 1.5rem;
    /* font-size: inherit; */
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    margin: auto;
    text-align: center;
    width: 35px;    
}

.section-divider {
    margin-top:20px;
    border-top: 2px solid #d9d9d9;    
}
.staff-profile-qualifications li {
    margin-bottom: 10px;
    padding-left: 38px;
    padding-left:3.8rem;
    position: relative;
}
.staff-profile-qualifications li i {
    color: #ccc;
    position: absolute;
    left: 0;
    top: 3px;
}
.staff-profile section h4 {
    margin-top: 20px;
}
@media (max-width: 420px) { 
    .staff-profile-photo {     
        padding: 0;
    }
}

@media (min-width: 768px) { 
    .staff-profile-quote blockquote {
        font-size: 24px;
        font-size: 2.4rem;
    }
}
@media (min-width: 1200px) { 
    .staff-profile-photo {     
        padding: 0;
    }
}

/**
    Features - generic style that can be used for student profiles, 
    or other informational blockswhich have an image, title and (optional) subtitle and text 
**/
.row--feature 
/*,.row--feature > [class*="col"] + [class*="col"] */
{
    margin-top: 30px;
    margin-bottom: 30px;      
}
.row--feature .hover-link-image {
    margin-bottom: 10px;
}
.feature-title{
    width: 100%;
    color: #cc0011;
    font-weight: 700;
    font-size: 20px;
    font-size: 1.6rem;
    line-height: 2.0rem;   
    margin: 0;
    padding:0px;
}
.section--grey .row--feature .col-xs-8 .feature-title{
    width: 100%;
    color: #cc0011;
    font-weight: 700;
    font-size: 20px;
    font-size: 1.6rem;
    line-height: 2.0rem;   
    margin: 0;
    padding:15px;
    padding-bottom:0px;
}

a:hover .feature-title {
    color: #ae0311;
}
.feature-subtitle {
    color: #000;
    font-weight: 700;
    font-size: 16px;
    font-size: 1.6rem;
    margin-bottom: 10px;
}
.feature-title + p {
    margin-top: 10px;
}
.section--grey .row--feature .hover-link-image {
    margin-bottom: 0;
}
.section--grey .row--feature .col-xs-4 {
    line-height: 0;
}
.section--grey .row--feature .col-xs-8 > * {
    background: #fff;
    padding: 15px;
    margin: 0;
}
.section--grey .block-h5 {
    color: #333333;
    font-size: 12px;
    font-size: 1.2rem;
    font-weight: 700;
    display: block;
    padding-bottom: 5px;
    border-bottom: 2px solid #ccc;
    text-transform: uppercase;
}

@media (min-width: 768px) { /* md overrides */
 
    .row--feature > [class*="col"] + [class*="col"] {
        margin-top: 0; /* removes margin on last col (where we don't need it') */
    }
    .row--feature > [class*="col"] .row:first-of-type {
        margin-bottom: 30px; /* removes margin on last col (where we don't need it') */
    }    
}
/** --------------------------------- **/


/**
    Hover link image - image within the link will use an opacity fade highlight on hover/focus 
**/
.hover-link {
    display: block;
}
.hover-link-image {
    display: inline-block;
    background: #111;
    width: 100%;
}
.hover-link .hover-link-image img {
    -webkit-transition: opacity .3s;
    transition: opacity .3s;
    -webkit-backface-visibility: hidden;
    /*  why? see: http://stackoverflow.com/questions/12980153/image-moves-on-hover-chrome-opacity-issue */
    width: 100%;
}
a.hover-link.focus img,
a.hover-link:hover img {
    opacity: .8;
}
/** --------------------------------- **/


/**
    Landing page box - appears on landing pages with optional 2 or 3 col layout
    2 col layout has image at 66% width, and 33% text box to right
    3 col layout has image at 100%, no text. 
**/
.landing-box {
    background: #999999;
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 40px;    
}
.landing-box-image {
    /* @TODO - the actual background image will need to an inline style when rendering content out from the CMS */
    background-image: url(http://www.canterbury.ac.nz/earlyyears/graphics/eclc_slideshow/table_snacks.jpg);
    background-size: cover;
    background-position: 50% 0;
    min-height: 200px;
}
.landing-box-text {
    padding-top: 1em;
    text-align: center;
    overflow-x: auto;
}
.landing-box-text,
.landing-box-text p{
    color: #fff;
    font-size: 12px;
    font-size: 1.2rem;
}
@media (min-width: 768px) {
    .landing-box-image{
        min-height: 300px;
    }
    .landing-box-text,
    .landing-box-text p  {
        color: #fff;
        font-size: 14px;
        font-size: 1.4rem;
    }    
}
@media (min-width: 992px) {
    .landing-box-image {
        min-height: 400px;
    }
}


/**
    Overlay for an image being used as a video placeholder 
    Wrap the image in .image-video, and then put a .fa.fa-play-circle icon next to the image
**/
.image-video {
    position: relative;
}
.image-video .fa {
    font-size: 4rem;
    color: #fff;
    position: absolute;
    top: 50%;
    transform: translate(0, -50%); /* centers icon vertically */
    width: 100%;
    text-align: center;
    z-index: 1;
    opacity: .8;
    -webkit-transition: opacity .3s;
    transition: opacity .3s;
}
a:hover .image-video .fa {
    opacity: 1;
}
@media (min-width: 768px) {
    .image-video .fa {
        font-size: 4rem;
    }   
}


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


/**
    Button arrow links - block link with arrow at one end edge, denoting link to another internal page
    Should only be used with one or two word links, as the layout will break if the text is too long 
    (Also available with the -back variation)
**/
.button-arrow-link,
.button-arrow-link-back {
    margin-bottom: 10px;
    display: block;
    background: #eee;
    padding-left: 10px;
    font-weight: 600;
    font-size: 17px;
    font-size: 1.7rem;
    line-height: 45px;
    line-height: 4.5rem;
    -webkit-transition: background .3s;
    transition: background .3s;
}
.button-arrow-link-back {
    padding-left: 0;   
}
.button-arrow-link i,
.button-arrow-link-back i {
    float: right;
    line-height: 45px;
    line-height: 4.5rem;
    background: #cc0011;
    font-size: 15px;
    font-size: 1.5rem;
    font-weight: 400;
    color: #fff;
    padding: 0 15px;
}
.button-arrow-link-back i {
    float: left;
    margin-right: 10px;
}
.button-arrow-link:hover,
.button-arrow-link-back:hover {
    background-color: #ddd;
}
a.button-arrow-link,
a.button-arrow-link-back {
    /*color: #cc0011;*/
    color: #000000;
}


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


/**
    Big red button link! 
**/
a.red-button-link,
a.red-button-link:visited {
    display: block;
    text-align: center;
    background: #cc0011;
    color: #fff;
    padding: 10px 0;
    width: 100%;
    font-size: 18px;
    font-size: 1.8rem;
    -webkit-transition: background .3s;
    transition: background .3s;
}
a.red-button-link:focus,
a.red-button-link:hover {
    background: #ae0311;
    color: #fff;
}


/**
    Arrow links 
**/
.arrow-link {
    background: url(images/arrow.png) no-repeat 0 0;
    width: 60px;
    height: 8px;
    margin: 10px 0;
    display: inline-block;
}
.arrow-link--white {
    background-image: url(images/arrow-white.png);
}
.arrow-link--red {
    background-image: url(images/arrow-red.png);
}

/**
    Subjects Listed section
**/
.subjects-listed a{
    color: #cc0011;
    background-image: url('images/arrow.png');
    background-repeat: no-repeat;
    background-position: right 30px center;
    height:60px;
    height:6rem;
    padding:30px;
    padding:3rem;
    padding-right:95px;
    line-height:60px;
    line-height:6rem;
}
.subjects-listed span{
    line-height:60px;
    line-height:6rem;
    vertical-align:middle;
}
.subjects-listed a:hover,
.subjects-listed a:focus,
.subjects-listed a:active{
    color: #ae0011;
    -webkit-transition:color .3s;
    transition:color .3s;
    background-color:#e5e5e5;
}
.subjects-listed .larger-text{
    font-size:60px;
    font-size:6rem;
    vertical-align: -1rem;
    padding:0px 5px;
}

/**
    Search results
**/
.search-result .intro {
    margin:0;
    padding:0;
}
.search-result a,
.search-result a:hover{
    color:#000;
    display:block;
}

.search-result-link {
    color: #cc0011;
    font-weight: 800;
}

/**
    Page sidebars
**/

.sidebar-block > .inner-content {
    padding:15px;
}
.sidebar-block a {
    color: #cc0011;
}
.sidebar-block .hover-link-image{
    padding:15px 15px 0;    
    background-color:transparent;
}
.sidebar-block img{}
.sidebar-block-title {
    margin-top: 10px;
    font-size: 14px;
    font-size: 1.4rem;
    text-transform: uppercase;
    font-weight: 600;
}
.sidebar-block > .inner-content .sidebar-block-title{
    margin:0;
}
.sidebar-block .sidebar-block-info{
    color: #000;
    font-size: 12px;
    font-size: 1.2rem;
    font-weight: 400;        
}
.sidebar-block form{
    padding:10px 0;
}
.sidebar-block a.block-link {
    text-align: center;
    display: block;
    padding: 10px 15px;
    background-color: #cc0011;
    color: #ffffff;
    text-transform:uppercase;
}
.sidebar-block a.block-link:hover,
.sidebar-block a.block-link:focus,
.sidebar-block a.block-link:active{
    background-color: #ae0311;
}
.sidebar-block .sidebar-block-title-uline {
    border-bottom:1px solid #d9d9d9;
    margin-bottom:15px;
}
.sidebar-block blockquote {
    padding: 0;
    margin: 0;
    border-left: 0px solid #eee;
}
.sidebar-block > .inner-content.alt-sidebar {
    background-color: #fff;
    color: #333;
}
.sidebar-block > .inner-content.alt-sidebar blockquote:before {
    content: open-quote;
}
.sidebar-block > .inner-content.alt-sidebar blockquote:after {
    content: close-quote;
}

ul.useful-links-list {
    font-size:13px;
    font-size:1.3rem;
}
ul.useful-links-list li{
    margin:10px 15px;
}
ul.useful-links-list li:before {    
    font-family: 'FontAwesome';
    content: '\f054';
    margin:0 5px 0 -15px;
    color: #d9d9d9;
}

ul.check-list{}
ul.check-list li {
    text-align: left;
    margin: 5px 15px;
    font-size: 13px;
    font-size: 1.3rem;
}
ul.check-list li:before {    
    font-family: 'FontAwesome';
    content: '\f00c';
    margin:0 5px 0 -15px;
}

/**
    Responsive video wrapper
**/
.videoWrapper {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 25px;
    height: 0;
}
.videoWrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
/**
    Responsive map embedding
**/
.google-maps {
    position: relative;
    padding-bottom: 75%; /** This is the aspect ratio, should provide a 4:3 view area**/
    height: 0;
    overflow: hidden;
}
.google-maps iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
}


/**
    Micro download component
**/
.micro-download {}
.micro-download [class*="col"]{
    padding:5px;
}
.micro-download .row{
    padding:5px;
}
.micro-download .micro-download-title{
    font-size: 14px;
    font-size: 1.4rem;
    font-weight: 600;    
}
.enrol-block {
    background-color:#cc0011;
    color:#ffffff;
    padding:15px;
    font-size:12px;
    font-size:1.2rem;
}
.enrol-block a {
    color:#ffffff;
}
.enrol-block .enrol-call-to-action {   
}
.enrol-block .enrol-call-to-action a {
    display:block;
    padding:15px;
    background-color: #ae0311;
    text-transform: uppercase;  
    font-weight: 600;
}
.enrol-block .enrol-call-to-action a:hover,
.enrol-block .enrol-call-to-action a:focus,
.enrol-block .enrol-call-to-action a:active{
    background-color: #cccccc;
    color:#000000;
}


/**
    myUC components
**/
.myuc-apply {
    margin-left: 30px;
}
.myuc-apply.time:before {
    content:"\f017";
}
.myuc-apply.requirements:before {
    content: "\f15b";
}


/**
    Accordion component
**/
.accordion {}
.accordion .panel {
    border:0px;
    border-radius: 0px;   
    -webkit-box-shadow: 0 0px 0px rgba(0, 0, 0, 0); 
    box-shadow: 0 0px 0px rgba(0, 0, 0, 0);     
}

.accordion .panel-heading a {
    display:block;
    color:#000000; 
}

.accordion .panel-heading {
    background-color: #e8e8e8;
    color: #000000;
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;  
    padding: 5px 15px;
}

.accordion .panel-heading a:after {
    content: "\f067";
    font-family:  FontAwesome;
    font-size:inherit;
    float:right;
    color:#ae0311;
}

.accordion .panel-heading.active {
    background-color:#888888;
    color:#000000;
}
.accordion .panel-heading.active a {
    color:#ffffff;
}
.accordion .panel-heading.active a:after {
    content: "\f068";
    font-family:  FontAwesome;
    font-size:inherit;
    float:right;
    color:#ae0311;
}
.accordion.panel-group .panel-heading + .panel-collapse > .panel-body, 
.accordion.panel-group .panel-heading + .panel-collapse > .list-group {
    padding:15px 0;
    margin-bottom:20px;
}

.accordion .panel-heading a:hover{
    color: #000000;
    text-decoration: underline; /* @TODO - we want to underline? */ 
}
.accordion .panel-heading.active a:hover{
    color: #ffffff;
    text-decoration: underline; /* @TODO - we want to underline? */ 
}

/**
    Styles for readmore js
**/
a[data-readmore-toggle] {
    text-align: center;
    line-height:1px;
    border-bottom:1px solid #ae0311;
    margin-top:-10px;
    padding-top:20px;
}
a[data-readmore-toggle] > span{
    background-color:#fff;
    padding:0 10px;
}

/**
    These styles add padding and margins for paragraghs which use a fontawesome element as the paragraph lead.
**/
p.imaged {
    margin-left:45px;
}

p.imaged .imaged-icon{
    margin-left:-45px;
    padding-top:10px;
}


/************/
/*** MAPS ***/
/************/


.google-maps {
    position: relative;
    height: 450px;
    overflow: hidden;
}
.google-maps iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 450px !important;
}

#map {
  position: relative;
  padding-top: 25px;
  padding-bottom: 67.5%;
  height: 0;
  margin-bottom: 40px;
  overflow: hidden;
}

#map { padding-top: 0; }






@media screen and (min-width:768px) {
    .enrol-block > .row {
        display: table;
        height: 100%;
        width: 100%;
        margin: auto;    
    }
    .enrol-block > .row > .enrol-col {
        display: table-cell;
        vertical-align: middle;
        float: none;
    }    
}