/* ==========================================================================
   HTML5 Boilerplate styles - h5bp.com (generated via initializr.com)
   ========================================================================== */

html,
button,
input,
select,
textarea {
    color: #222;
}

body {
    font-size: 1em;
    line-height: 1.4;
}

::-moz-selection {
    background: #b3d4fc;
    text-shadow: none;
}

::selection {
    background: #b3d4fc;
    text-shadow: none;
}

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #fff;
    margin: 1em 0;
    padding: 0;
}

img {
    vertical-align: middle;
}

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

textarea {
    resize: vertical;
}

.chromeframe {
    margin: 0.2em 0;
    background: #fff;
    color: #000;                            
    padding: 0.2em 0;
}


/* ==========================================================================
   Author's custom styles
   ========================================================================== */

   @font-face {
  font-family: 'Marker-Felt';
    src:  url('fonts/Marker-Felt.ttf.woff') format('woff'),
    url('fonts/Marker-Felt.ttf.svg#Marker-Felt') format('svg'),
    url('fonts/Marker-Felt.ttf.eot'),
    url('fonts/Marker-Felt.eot?#iefix') format('embedded-opentype'); 
    font-weight: normal;
    font-style: normal;
}

body { font:62.5%/1.4 Arial; margin:0; padding:0; }
.puzzle { display:block; position: absolute; }
a { color:#7e2b64; }

/* Header + Hero */
#header { height:75px; margin:0 auto; background-color:#eee; text-align: center; position: relative; min-width: 990px; }

    #logo { position: absolute; left:50%; margin-left:-135px; top:-5px; }
    
    .nav {
        margin:0; padding:25px; list-style-type: none;
        font-size:14px; text-align: center;
        width:950px;
        margin:0 auto;

    }
    .nav li { text-transform: uppercase; display:inline-block; margin:0;  padding:0 6px 0 5px; border-right:1px dotted #5084c0; }
    .nav li:last-child { border:none; }
    .nav li:nth-child(3) { border:none; padding-right:280px; }

    .nav a { color:#5084c0; font-weight: bold; padding:2px 6px; display:block; text-decoration: none; }
    .nav .current_page_item a { color:#fff; background-color: #a34488; border-radius:4px;}

    #mobile-nav { display: none; }

#hero { background:url(images/hero-bg.png) top left repeat-x; height:190px; position:relative; min-width: 990px; }
    #hero h1 { width:820px; height:190px; background:url(images/hero.jpg) center 0 no-repeat;
        overflow: hidden; margin:0 auto; padding:0; position: relative;}

    #hero .left { bottom:-30px; left:0;z-index: 4; left:-50px;  }
    #hero .right { top:20px; right:20px; }

    #hero h1 p { 
        font-family: 'Marker-Felt'; color:#a34488; font-size:28px; 
        display: none; width:430px; position: absolute;
        right:10px; top:0; font-weight: normal;
        text-align: center;
        line-height: 36px;
        margin:0; padding:0;
        top:50%;
        transform:translateY(-50%);
        -webkit-transform:translateY(-50%);
        -ms-transform:translateY(-50%);
    }

    #hero h1 p span { font-size:18px; display:block;margin-top:10px;}

/* Content */
#main { 
    background:#dfb2d7 url(images/pink-paper.jpg) top center no-repeat; position:relative;  padding:25px 0;
    min-width: 990px;
}
    #content { width:930px; margin:0 auto; padding-bottom:40px; padding-top:20px;

    }

    .philosophy { }
    .philosophy .circle { float:left; margin:0 20px 20px 0; }
    .philosophy .p-content { float:left; width:70%;  }
    .philosophy .item { margin-bottom: 20px; }

    .sub-nav { margin:0 0 50px 0; padding:0; list-style: none; }
    .sub-nav li {
        width:140px;
        height:140px;
        position:relative;
        display: block;
        float:left;
        margin-right:16px;
        cursor: pointer;
        
    }

    .sub-nav li:last-child { margin:0; }

    .sub-nav li a,
    .circle {
        display: block;
        width:140px;
        height:140px;
        border-radius:50%;
        border:4px solid green;
        -webkit-box-shadow: inset 3px 6px 1px rgba(0,0,0,0.3);
        -moz-box-shadow: inset 3px 6px 1px rgba(0,0,0,0.3);
        box-shadow: inset 3px 6px 1px rgba(0,0,0,0.3);
        background-repeat: no-repeat;
        background-position: center center;
        background-size:140px 140px;
        margin-bottom: 6px;
    }



    .sub-nav li  span { 
        display: block;
        padding:0; margin:0;
        /*position: absolute;
        top:40%;*/
        text-align: center;
        width:100%;
        font-family:Georgia, "Georgia";
        font-size:17px;
        text-decoration: none;
        color:inherit;
    }

    /* Triangle */
     .sub-nav li>span {
        /*display: block;
        position:relative;
        top:-4px;
        margin:0 auto;
        width:0;
        height:0;
        border-top:20px solid green;
        border-left:20px solid transparent;
        border-right:20px solid transparent;*/
    }   


    .sub-nav li a { border-color:rgba(164, 69, 137, 1); }
    .sub-nav li:nth-child(2n) a { border-color:rgba(82, 133, 192, 1); }
    .sub-nav li:nth-child(3n) a { border-color:rgba(96, 150, 77, 1); }
        
    .sub-nav li span { color:rgb(164, 69, 137); }
    .sub-nav li:nth-child(2n) span {   color:rgb(82, 133, 192); }
    .sub-nav li:nth-child(3n) span {   color:rgb(96, 150, 77); }



    .heading { background:url(images/headings.png) no-repeat; overflow: hidden; 
        text-indent: -9999em; margin:0 auto; width:300px; }
    h2.heading { height:50px; margin-bottom:30px; padding:0; clear: both; }
    h3.heading { height:45px; }

        .h_welcome { background-position: 0 0; }
        .h_philosophy { background-position: 0 -213px; }
        .h_curriculum { background-position: 0 -350px; }
        .h_enrolment { background-position: 0 -417px; }
        .h_location { background-position: 0 -485px; }
        .h_contact { background-position: 0 -553px; }
        .h_about { background-position: 0 -290px;  }

        .h_s_welcome    { width:200px; background-position: -50px -6px; }
        .h_s_philosophy { width:225px; background-position: -36px -74px; }
        .h_s_programs   { width:215px; background-position: -40px -143px; }

    .article  { float:right; width:450px;font-size:1.4em; color:#333; clear:both; }
    .article.full  { float:none; width:auto; }
    .article.full img { float:left; margin:0 15px 15px 0; clear:both; }


    .aside { float:left; width:410px; font-size:1.8em; 
        font-family:Georgia, "Georgia"; color:#5285c0; font-weight: bold; line-height: 24px; } 

    .article h3 { font-size:1.2em; font-family:Georgia, "Georgia"; color:#5285c0; margin:0 0 16px 0; }
    .article ol,
    .article ul { list-style-position: inside; padding:0; margin:0 0 12px; }
    .article p { margin:0 0 12px 0; padding:0; }

    .article ol { margin-bottom: 0; }
    .article ol>li { margin-bottom: 12px; }

    .extra_content {  clear:both; padding-top:40px; }

/* Homepage */
#content.home { padding-top:0; }
.home_module { width:265px; float:left; margin-right:45px; font-size:1.4em; color:#333; }
.home_module:nth-child(3) { margin:0; }
.home_module h3 { margin-bottom: 12px; }
.home_module p { text-align: center; margin-top:0; }
.home_module p img { margin:0  0; max-width: 160px; }

.btn { cursor: pointer; }
.btn:hover { opacity:0.8 ;}

/* Contact & Enrolment forms */
#contact_form { width:640px; font-size:1.4em; color:#333; clear:both; padding:20px 30px;
float:none; clear: both; margin:30px auto 0; /* border-radius: 10px; background-color: rgba(255,255,255,0.7);  */
}
    
    .contact-content { clear: both; width:660px; margin:0 auto; }
    .contact-content p { font-size:1.4em}


    #contact_form form { clear: both; }
    #contact_form p,
    #contact_form .checkboxes { width:310px; float:left; margin:0 0 0 0; display:block; min-height: 58px }

    #contact_form p.full-field { width:100%; float:none; clear:both; }


    #contact_form p label,
    #contact_form p input { display:block;  }
    #contact_form label { font-weight:bold; margin:0 0 5px 0;}

    #contact_form .contact-content p { float:none; margin:0 0 15px 0; min-height: 0; width: auto; }

    #contact_form p input,
    #contact_form p textarea,
    #contact_form p select { 
        font-size:14px;
        margin-bottom:15px;
        background-color:#eee;
        border:1px solid #ca8fbc; 
        font-family: arial;
        width:270px;
        padding:6px 10px;
    } 
    
    #contact_form p select { width:290px; }

    #contact_form .checkboxes { padding:15px 0 10px; }
    #contact_form .checkboxes .inputs { clear:both; }
    #contact_form .checkboxes input,
    #contact_form .checkboxes span { display:block ; float:left; }
    #contact_form .checkboxes input { margin-right:10px; }
    #contact_form span { margin-right:15px; }
    #contact_form p input.date-pick,
    #contact_form p input.dob-pick { width:220px; }

    #contact_form p.full-field input,
    #contact_form p.full-field label,
    #contact_form p.full-field textarea { width:580px; float:none; clear:both; }
    
    #contact_form .btn_submit { 
        background:url(images/btn_submit.png) 0 0 no-repeat; width:105px; height:42px; text-indent: -999em;
        overflow: hidden; margin:10px 0 0; padding:0; border:0; float:right; margin-right:25px;
    }

    #thanks { display:none; margin:0 auto; min-height: 150px; width:640px; text-align: center; font-size:1.5em; font-weight:bold ;
        clear:both; padding-top:40px;}
    #contact_form p .error { border-color:red;  }

/* Enrolment */
.enrolment_form { padding-top:30px; }
.enrolment_form h3 { font-size:1.7em; font-family:Georgia, "Georgia"; color:#a44589; text-align: center; 
margin:0 0 30px 0;}

/* Locations */
#locations { list-style-type: none; margin:0 auto 15px; padding:0; width:520px; text-align: center; }
    #locations li { 
        /*float:left;*/
        display: inline-block;
        margin-right:38px;
        position: relative;
        cursor: pointer;
        /*width:185px;
        height:196px;
        background:url(images/locations.png) no-repeat;
        float:left;
        display: block;
        margin-right:38px;
        cursor: pointer;*/
    }  

    #locations li.soon { opacity:0.7; }
    #locations li:last-child { margin:0; } 

    #locations li#loc_loftus { border-color:rgba(164, 69, 137, 1); background-color:rgba(164, 69, 137, 0.5); }
    #locations li#loc_east { border-color:rgba(82, 133, 192, 1); background-color:rgba(82, 133, 192, 0.5); }
    #locations li#loc_menai { border-color:rgba(96, 150, 77, 1); background-color:rgba(96, 150, 77, 0.5); }

    #locations li p { 
        padding:0; margin:0;

        width:100%;
        font-family:Georgia, "Georgia";
        font-size:20px;
        text-decoration: none;
        color:#fff;
        text-align: center;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);

    }

    #locations li.soon p { font-size:16px; } 

    /* Triangle */
    #locations li span {
        display: none; /* Toggled */
        position:absolute;
        top:0;
        margin:0 auto;
        width:0;
        height:0;
        border-left:20px solid transparent;
        border-right:20px solid transparent;
        left:50%;
        top:140px;
        margin-left:-20px;
    }   

    #locations li#loc_loftus span { border-top:20px solid rgba(164, 69, 137, 1); }
    #locations li#loc_east span { border-top:20px solid rgba(82, 133, 192, 1); }
    #locations li#loc_menai span { border-top:20px solid rgba(96, 150, 77, 1); } 

    /* Toggled in js */
    #locations li.active span { display: block; }

    

   

    #address,
    #details h3,
    .loc-photos h3 { text-align: center; margin-bottom: 20px; font-size:1.8em; 
        font-family:Georgia, "Georgia"; color:#a44589; font-weight:bold;
    }
    .oc-photos br { display:none !important; }

    #map { width:895px; height:380px; margin:0 auto; background-color:white; float:right; }

    #locations li.soon {
        cursor: default;
        opacity: 0.7;
    }
    /* More details */
    #details {
        width:540px;

        margin:0;
        padding:20px;
        float:left;
        display: none;
        font-size:1.4em; color:#333;
        background-color:rgba(255,255,255,0.6);
    }

    #details table { padding:0; margin: 0; height: 155px; }
    #details table td { padding:5px; vertical-align: top; text-align: left;}

    #details table td.col1 { width:300px; }

    #details p { margin:0 0 12px 0;}

    #map,
    #details { border-radius:10px; border:4px solid #ca8fbc;   box-sizing: border-box; }
    #details { border:none; }

    #details .loc { display: none; min-height: 255px; }
    #details h3,
    .loc-photos h3 { text-align: left; margin-top:0; }

    /* Forms */
    .loc-forms { min-height:145px; margin-bottom: 12px; }
    .loc-forms a { 
        display:block;  font-weight: bold; margin-bottom: 6px; text-decoration: none;
        background:url(images/pdf.gif) 0 0 no-repeat;
        padding: 1px 0 0 22px;
    }
    .loc-forms a span {  }
    .loc-forms a:hover { text-decoration: none; }


    #details a { color:#7e2b64; }

    #details .social { clear:both; padding-top:12px; }
    #details .social a {
        display: block;
        background:url(images/fb.png) 0 0 no-repeat;
        width: 144px;
        height: 37px;
        text-decoration: none;
    }

    .loc-photos .gallery br { height:1px; clear: both;  display:none !important;}
    /* TODO: Panels are jumping = make same height; */

    .loc-photos { clear:both; padding-top:0; display: none; }
    .loc-photos { list-style-type: none; margin: 0;}
    .loc-photos .gallery-item { 
        float:left;
        margin:0 10px 10px 0;
        border:3px solid #fff;
        display: none;
    }   



    .loc-photos .gallery-item:first-child,
    .loc-photos .gallery-item:nth-child(2),
    .loc-photos .gallery-item:nth-child(3),
    .loc-photos .gallery-item:nth-child(1) {
        display: block;
    }

    /* Color swaps */
    .blue #map { border:2px solid #5485c0; }
    .blue #details h3,
    .blue .loc-photos h3,
    .blue #details a { color:#5485c0; }

    .green #map { border:2px solid #61964f; }
    .green #details h3,
    .green .loc-photos h3,
    .green #details a { color:#61964f; }



 

/* Footer */
#footer { background-color:#eee; }
    #footer-inner { position: relative; width:930px; margin:0 auto; padding:6px 0 8px; font-size:1.1em; }
    #footer-inner .puzzle { top:-35px; right:50px; }

    #footer-inner h2 { color:#5385c2; font-size:18px; margin:0 0 15px; padding:0; }
    #footer-inner h3 { float:left; padding:0 17px 0 0; color:#333; margin:0; }
    #footer-inner p { float:left; padding:0 30px 0 17px; border-left:2px dotted #666; margin:0; min-height: 82px; }
    #footer-inner a { color:#7e2b64; }


#terms { background-color:#5084c0; color:#fff; font-size:1em; padding:8px 0;margin:0 auto; 
    text-transform: uppercase; text-align: center; font-weight: bold; }
#terms a,
#terms span { color:#fff; text-decoration: none; padding:0 10px;  }


/* Puzzles */
.puzzle.home-left {
    left:-30px;
    top:300px;
}

.puzzle.large-left {
    display: none;
    top:600px;
    left:-100px;
}

.puzzle.large-right {
    top:370px;
    right:0;
    width: 300px;
    overflow: hidden;
}

.page-id-9 .puzzle.large-left { display: block; }
.page-id-15 .puzzle.large-left { display: block; left:-350px; top:250px; }
.page-id-15 .puzzle.large-right { top:200px; }


table.jCalendar {

    background: #aaa;
    border-collapse: separate;
    padding:0; margin:0; width:100%;
}
table.jCalendar th {
    background: #333;
    color: #fff;
    font-weight: bold;
    padding: 3px 5px;
}

table.jCalendar td {
    background: #fff;
    color: #000;
    padding: 3px 5px;
    text-align: center;
}
table.jCalendar td.other-month {
    background: #ddd;
    color: #aaa;
}
table.jCalendar td.today {
    background: #666;
    color: #fff;
}
table.jCalendar td.selected {
    background: #5084c0;
    color: #fff;
}
table.jCalendar td.selected.dp-hover {
    background: #f33;
    color: #fff;
}
table.jCalendar td.dp-hover,
table.jCalendar tr.activeWeekHover td {
    background: #fff;
    color: #000;
}
table.jCalendar tr.selectedWeek td {
    background: #5084c0;
    color: #fff;
}
table.jCalendar td.disabled, table.jCalendar td.disabled.dp-hover {
    background: #bbb;
    color: #888;
}
table.jCalendar td.unselectable,
table.jCalendar td.unselectable:hover,
table.jCalendar td.unselectable.dp-hover {
    background: #bbb;
    color: #888;
}

/* For the popup */

/* NOTE - you will probably want to style a.dp-choose-date - see how I did it in demo.css */

/* located in demo.css and creates a little calendar icon
 * instead of a text link for "Choose date"
 */
a.dp-choose-date {
    float: left;
    width: 24px;
    height: 24px;
    padding: 0;
    margin: 0 3px 0;
    display: block;
    text-indent: -2000px;
    overflow: hidden;
    background: url(images/calendar.png) no-repeat; 
}
a.dp-choose-date.dp-disabled {
    background-position: 0 -20px;
    cursor: default;
}
/* makes the input field shorter once the date picker code
 * has run (to allow space for the calendar icon
 */
input.dp-applied {
    width: 140px;
    float: left;
}
div.dp-popup {
    position: relative;

    background-color:rgba(255,255,255,0.9);
    font-size: 10px;
    font-family: arial, sans-serif;
    padding: 3px;
    width: 171px;
    line-height: 1.2em;
}
div#dp-popup {
    position: absolute;
    z-index: 199;
}
div.dp-popup h2 {
    font-size: 12px;
    text-align: center;
    margin: 2px 0;
    padding: 4px;


}
a#dp-close {
    font-size: 11px;
    padding: 4px 0;
    text-align: center;
    display: block;
}
a#dp-close:hover {
    text-decoration: underline;
}
div.dp-popup a {
    color: #000;
    text-decoration: none;
    padding: 3px 2px 0;
}
div.dp-popup div.dp-nav-prev {
    position: absolute;
    top: 2px;
    left: 4px;
    width: 100px;
}
div.dp-popup div.dp-nav-prev a {
    float: left;
}
/* Opera needs the rules to be this specific otherwise it doesn't change the cursor back to pointer after you have disabled and re-enabled a link */
div.dp-popup div.dp-nav-prev a, div.dp-popup div.dp-nav-next a {
    cursor: pointer;
}
div.dp-popup div.dp-nav-prev a.disabled, div.dp-popup div.dp-nav-next a.disabled {
    cursor: default;
}
div.dp-popup div.dp-nav-next {
    position: absolute;
    top: 2px;
    right: 4px;
    width: 100px;
}
div.dp-popup div.dp-nav-next a {
    float: right;
}
div.dp-popup a.disabled {
    cursor: default;
    color: #aaa;
}
div.dp-popup td {
    cursor: pointer;
}
div.dp-popup td.disabled {
    cursor: default;
}



/* ==========================================================================
   Media Queries
   ========================================================================== */

@media only screen and (min-width: 35em) {

}

@media only screen and (max-width: 990px) {
    .puzzle.large-right { display: none; }
}

/* MOILE */
@media only screen and (max-width: 480px) {

    body { background-color:#dfb2d7; }
    html, body { margin: 0; padding:0; }


    #mobile-nav {
        display: block;
        position: absolute;
        top:30px;
        right: 10px;
    }

    .puzzle,
    #hero { display: none !important; }

    #header,
    .nav,
    .home_module,
    #footer,
    #main,
    #footer,
     #footer-inner,
    #hero,
    .article,
    .aside,
    #contact_form,
    #contact_form .checkboxes { width:100%; float:none !important; min-width: 90%; }

    #content,
    #footer-inner,
    #terms { padding:2% 5% !important; width:88% !important; }

    #header { height:auto;  }
    #logo { position: relative; clear: both; left:0; margin:0 0 20px 0; top:6px; }
    #logo img { width: 65%; }

    .nav { width:90% !important; margin:0 auto; clear: both; padding:0 0 10px !important;  display: none; } 
    .nav li,
    .nav li:last-child,
    .nav li:nth-child(3)  {
        display: block;
        width: 90%;
        padding:0 !important;
        border-right: none;
        text-align: left;
        margin: 0 0 4px 0;
    }


   #main { background: none; overflow: hidden; }
   #header { background-color:#eee; padding-bottom: 1px; }


    #contact_form { padding:3%; width:94% !important; }
    #contact_form p input,
    #contact_form p select,
    #contact_form p textarea,
    #contact_form p label { width:70% !important;}


    #footer  { padding:20px 0 0; }
    #footer-inner h3,
    #footer-inner p { float:none; clear: both; border: none}
    #footer-inner p { margin-bottom: 20px; padding:0; ; min-height: 40px}

    #details, #map { width:90%; float:none; }
    #map { display: none; }
    #locations { width:70%; margin:0 auto; } 
    #locations li { display: block; }

    #details table td { float:left; display: block;  }
    .loc-photos .gallery-item { width:30%; }
    .loc-photos dl { margin:5px 0 5px 0; }
    .loc-photos img { width:100%; height:100%; }
}


@media print,
       (-o-min-device-pixel-ratio: 5/4),
       (-webkit-min-device-pixel-ratio: 1.25),
       (min-resolution: 120dpi) {

}

/* ==========================================================================
   Helper classes
   ========================================================================== */

.ir {
    background-color: transparent;
    border: 0;
    overflow: hidden;
    *text-indent: -9999px;
}

.ir:before {
    content: "";
    display: block;
    width: 0;
    height: 150%;
}

.hidden {
    display: none !important;
    visibility: hidden;
}

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
}

.invisible {
    visibility: hidden;
}

.clearfix:before,
.clearfix:after {
    content: "";
    display: table;
    clear: both;
}

/* ==========================================================================
   Print styles
   ========================================================================== */

@media print {
    * {
        background: transparent !important;
        color: #000 !important; /* Black prints faster: h5bp.com/s */
        box-shadow: none !important;
        text-shadow: none !important;
    }

    a,
    a:visited {
        text-decoration: underline;
    }

    a[href]:after {
        content: " (" attr(href) ")";
    }

    abbr[title]:after {
        content: " (" attr(title) ")";
    }

    /*
     * Don't show links for images, or javascript/internal links
     */

    .ir a:after,
    a[href^="javascript:"]:after,
    a[href^="#"]:after {
        content: "";
    }

    pre,
    blockquote {
        border: 1px solid #999;
        page-break-inside: avoid;
    }

    thead {
        display: table-header-group; /* h5bp.com/t */
    }

    tr,
    img {
        page-break-inside: avoid;
    }

    img {
        max-width: 100% !important;
    }

    @page {
        margin: 0.5cm;
    }

    p,
    h2,
    h3 {
        orphans: 3;
        widows: 3;
    }

    h2,
    h3 {
        page-break-after: avoid;
    }


}