/*-----------------------------------------------------------------------*/
/* Site wide style                                                       */
/*-----------------------------------------------------------------------*/
@import url("vendor/gf-catamaran.css");
@import url("vendor/gf-londrinasolid.css");
@import url("vendor/bs-3.3.7-glyphicons.css");

/* color scheme
 black    Black
 white    White
 #36454f  Charcoal
 #c65000  Tenne
 #00447b  Newcomers-blue
 #f8a15d  Newcomers-orange
 #71a391  Newcomers-teal
 */

/*--HTML/Body----------------------------------------------------------------*/
html {
    height:                100%;
    background:            white;
    color:                 #36454f;
    box-sizing:            border-box;
}
*, *:before, *:after {
    box-sizing:           inherit;
}
body { 
    background:            white;
    color:                 #36454f;
    margin:                0;
    border:                0;
    padding:               0;
    height:                100%;
    font-size:             16px;
    line-height:           18px;
    font-family:           Verdana, sans-serif;
    width:                 100%;
}
#wrapper {
    /* sticky footer, fluid, although with a min-height */
    position:              relative;
    width:                 100%;
    min-height:            95%;
    min-height:            calc(100% - 140px);
    min-width:             320px;
    overflow:              hidden;
}
footer {
    min-height:            140px;
}

/*--Headings-----------------------------------------------------------------*/
h1 {
    margin:                0px;
    padding:               0px 0 5px 0;
    color:                 #36454f;
    line-height:           normal;
    font-family:           'Catamaran', sans-serif;
    font-weight:           500;
    font-size:             26px;
}
h2 {
    margin:                0px;
    padding:               0px 0 5px 0;
    color:                 #36454f;
    line-height:           normal;
    font-family:           'Catamaran', sans-serif;
    font-weight:           bold;
    font-size:             23px;
}
h3 {
    margin:                0px;
    padding:               0px 0 5px 0;
    color:                 #36454f;
    line-height:           normal;
    font-family:           'Catamaran', sans-serif;
    font-weight:           bold;
    font-size:             21px;
}
h4 {
    margin:                0px;
    padding:               0px 0 5px 0;
    color:                 #36454f;
    line-height:           normal;
    font-family:           'Catamaran', sans-serif;
    font-weight:           bold;
    font-size:             16px;
}

/*--Links----------------------------------------------------------------*/
a, a:link     {
    color:                 #00447b;
    text-decoration:       none; 
}
a:visited  {  
    color:                 #00447b;
}
a:hover    { 
    color:                 #00447b;
}
a:active   { 
    background-color:      #00447b;
    color:                 white; 
}
a:hover.img-link,
a.img-link { 
    background-color:      transparent; 
    text-decoration:       none;
    outline:               0;
}
a img {
    border:                none;
}

/*--Header-------------------------------------------------------------------*/
header {
    position:              relative;
    margin:                0;
    padding:               0;
    width:                 100%;
}
header .top-bar {
    position:              relative;
    margin:                0;
    padding:               10px 10px 0px 10px;
    text-align:            center;
}
header .top-menu {
}
header .search-bar {
    display:               none;
}
header .search-box {
    z-index:               2;
    width:                 100%;
    padding:               10px 0;
    margin:                0;
    background:            rgba(238, 238, 238, 0.53);
}
header .search-box label {
    padding:               0 10px 0 0;
    margin:                0;
    font-weight:           bold;
    font-size:             16px;
}
header .search-box .search-widget {
    display:               inline-block;
    width:                 calc(80% - 150px);
    max-width:             75em;
    min-width:             12em;
}
header .search-box input {
    width:                 calc(100% - 25px);
    color:                 #36454f;
    background:            transparent;
    border:                none;
    outline:               none;
    font-size:             18px;
}

/*--Footer-------------------------------------------------------------------*/
footer {
    position:              relative;
    width:                 100%;
    margin:                0;
    padding:               10px 1px;
}
footer a,
footer a:visited,
footer a:link {
}
footer a:hover {
}

a.social-icon {
    display:               inline-block;
    margin:                0 9px;
    padding:               0;
    width:                 35px;
    height:                35px;
    background-image:      url(/static/img/social-icons.png);
    background-repeat:     no-repeat;
}
.facebook.social-icon,
.social-media:hover .facebook.social-icon:hover {
    background-position:   0px 0px;
}
.vimeo.social-icon,
.social-media:hover .vimeo.social-icon:hover {
    background-position:   -35px 0px;
}
.twitter.social-icon,
.social-media:hover .twitter.social-icon:hover {
    background-position:   -70px 0px;
}
.instagram.social-icon,
.social-media:hover .instagram.social-icon:hover {
    background-position:   -105px 0px;
}
.contact-us.social-icon,
.social-media:hover .contact-us.social-icon:hover {
    background-position:   -140px 0px;
    margin-left:           15px;
}
footer .social-media {
    width:                 100%;
    margin:                0;
    padding:               10px 1px;
    text-align:            center;
}
.social-media:hover .facebook.social-icon {
    background-position:   0px -35px;
}
.social-media:hover .vimeo.social-icon {
    background-position:   -35px -35px;
}
.social-media:hover .twitter.social-icon {
    background-position:   -70px -35px;
}
.social-media:hover .instagram.social-icon {
    background-position:   -105px -35px;
}
.social-media:hover .contact-us.social-icon {
    background-position:   -140px -35px;
}

.bottom-menu {
    width:                 100%;
    margin:                0;
    padding:               10px 1px;
    text-align:            center;
}

/*--Menu items---------------------------------------------------------------*/
a.menu-item,
a.menu-item:visited,
a.menu-item:link {
    display:               inline-block;
    margin:                0px;
    padding:               8px 15px 8px 15px;
    text-decoration:       none; 
    font-size:             16px;
    line-height:           16px;
    cursor:                pointer;
    white-space:           nowrap;
    background-color:      transparent;
    color:                 #36454f;
}
a.menu-item:active,
a.menu-item.current:active {
    padding:               7px 14px 7px 14px;
    border:                1px solid #36454f;
}
a.menu-item.current {
    background-color:      #36454f;
    color:                 white;
    margin:                0px;
    padding:               8px 15px 8px 15px;
}

/*--Misc---------------------------------------------------------------------*/
p {
    margin:                0 0 1ex 0;
}
figcaption {
    font-size:             12px;
    text-align:            center;
}

figure.image-block,
figure.video-block {
    display:               inline-block;
}

img.right,
figure.image-block.right,
figure.video-block.right {
    float:                 right;
    margin:                0 0 10px 10px;
}

figure.image-block.centre,
figure.video-block.centre {
    width:                 100%;
}
img.centre,
figure.image-block.centre img,
figure.video-block.centre img {
    display:               block;
    margin:                0 auto;
}

ul {
    margin:                0;
    list-style-position:   inside;
    list-style-type:       disc;
}
b {
    font-weight:           bold;
}

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

.together {
    display:               inline-block;
}

#overlay {
    position:              fixed;
    top:                   0;
    left:                  0;
    width:                 100%;
    height:                100%;
    background:            rgba(238, 238, 238, 0.5);
    z-index:               2;
    display:               none;
}

.popup-outer {
    position:              absolute;
    top:                   0;
    left:                  0;
    width:                 100%;
    z-index:               3;
    display:               none;
}
.popup {
    position:              relative;
    padding:               20px;
    background:            white;
    max-width:             500px;
    width:                 90%;
    height:                auto;
    margin:                10px auto 10px auto;
    border:                2px solid #71a391;
}
.popup .close {
    position:              absolute;
    top:                   5px;
    right:                 20px;
    line-height:           20px;
    text-decoration:       none;
    outline:               0;
}

a.share-tag {
    display:               inline-block;
    padding:               5px 10px 5px 10px;
    margin:                -5px 10px 5px 10px;
    background-color:      #00447b;
    color:                 white;
    text-decoration:       none; 
    font-size:             12px;
    border:                1px solid #00447b;
}
a.share-tag:active   {
    background-color:      white;
    color:                 #00447b;
    border:                1px solid #00447b;
}



/*-----------------------------------------------------------------------*/
/* Plain Tables and Lists */
/*-----------------------------------------------------------------------*/
table.plain {
    border-collapse:       collapse;
    border-spacing:        0px;
}
table.plain tr {
}
table.plain th {
    text-align:            left;
    margin:                0px;
    padding:               5px 0 5px 0;
    font-family:           "Arial",sans-serif;
    font-size:             16px;
}
table.plain td {
    padding:               0px 40px 2px 0;
}

ul.plain {
    padding:               0;
    margin:                0;
    list-style-type:       none;
}

/*-----------------------------------------------------------------------*/
/* Forms */
/*-----------------------------------------------------------------------*/
form fieldset {
	border:                0;
    margin:                0;
	padding:               0;
}

/*-----------------------------------------------------------------------*/
/* Content */
/*-----------------------------------------------------------------------*/

#main {
    position:              relative;
}
.content {
    padding:               40px 20px;
    margin:                0px;
}
@media (min-width:800px) {
.content {
    padding:               40px 5%;
}
}
.content-inner {
    padding:               0px;
}
.content-inner .rich-text {
}
.content section {
    padding:               0px 0 40px 50px;
}
.content section h1,
.content section h2 {
    margin-left:           -50px;
}

/*-----------------------------------------------------------------------*/
a.inline-link,
a.inline-link:link,
.rich-text a,
.rich-text a:link     {
    color:                 #00447b;
}
a.inline-link:active,
.rich-text a:active   { 
    color:                 white; 
    background-color:      #00447b;
}
a.inline-link:hover,
.rich-text a:hover    { 
    border-bottom:         none;
}

a.ticket:visited,
a.ticket:hover,
a.ticket:active,
a.ticket {
    background:            #eee;
    text-decoration:       none;
    outline:               0;
}
a.ticket:hover h3 {
}
a.ticket:active h3 {
    color:                 white;
    background-color:      #36454f;
}

.content .ticket {
    padding:               0px 0 10px 0;
    margin:                0;
    display:               block;
}

/*-----------------------------------------------------------------------*/
.content .card {
    padding:               0px;
    margin:                0px 0px 20px 0 ;
}
.content .card figure {
    display:               inline-block;
    padding:               0px;
    margin:                5px 0px;
}
@media (min-width:800px) {
.content .card figure {
    float:                 left;
}
.content .card p {
    margin-left:           280px;
}
}

/*-----------------------------------------------------------------------*/
.colour {
    margin:                0;
    padding:               10px 10px 20px 1px;
    font-size:             110%;
}
.colour .rich-text {
    padding:               30px 20px;
    border-radius:         10px;
}
@media (min-width:800px) {
.colour {
    padding:               10px 20px 20px 4px;
}
.colour {
    margin:                0;
    padding:               10px 20px 20px 4px;
    font-size:             110%;
}
.colour .rich-text {
    padding:               30px 50px;
    border-radius:         10px;
}
}

.fg-smalt .rich-text * {
    color:                 #00448f;
}
.fg-smalt .rich-text * {
    color:                 #00448f;
}
.fg-jewel .rich-text * {
    color:                 #0d6759;
}
.fg-forest .rich-text * {
    color:                 #228B22;
}
.fg-crusoe .rich-text * {
    color:                 #114611;
}
.fg-kowhai .rich-text * {
    color:                 #eadc18;
}
.fg-midnight .rich-text * {
    color:                 #111111;
}
.fg-alabaster .rich-text * {
    color:                 #f7f7f0;
}
.fg-white .rich-text * {
    color:                 white;
}
.fg-freespeech .rich-text * {
    color:                 #b30000;
}
.bg-smalt .rich-text {
    background-color:      #00448f;
}
.bg-jewel .rich-text {
    background-color:      #0d6759;
}
.bg-forest .rich-text {
    background-color:      #228B22;
}
.bg-crusoe .rich-text {
    background-color:      #114611;
}
.bg-kowhai .rich-text {
    background-color:      #eadc18;
}
.bg-midnight .rich-text {
    background-color:      #111111;
}
.bg-alabaster .rich-text {
    background-color:      #f7f7f0;
}
.bg-freespeech .rich-text {
    background-color:      #b30000;
}
.bg-white .rich-text {
    background-color:      white;
}

/*-----------------------------------------------------------------------*/
.web-slider-heading {
    display:               inline-block;
    margin:                0;
    padding:               5px 0;
}
.web-slider-heading .title {
    margin:                0;
    padding:               5px 0;
}
.web-slider-heading:before {
    position:              relative;
    top:                   1px;
    width:                 24px;
    display:               inline-block;
    font-family:           'Glyphicons Halflings';
    font-style:            normal;
    font-weight:           normal;
    line-height:           1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.web-slider-up .web-slider-heading:before {
    margin-left:           -24px;
    content:               "\e258";
}
.web-slider-down .web-slider-heading:before {
    margin-left:           -24px;
    content:               "\e259";
}

.web-slider-heading .title {
    font-family:           "Arial",sans-serif;
    font-size:             16px;
    font-weight:           bold;
}

.web-slider-drawer {
    display:               none;
    min-height:            20px;
}

/*-----------------------------------------------------------------------*/
/* Search */
/*-----------------------------------------------------------------------*/
.template-searchresults ul {
    padding:                10px 0 0 0;
}

.template-searchresults li {
    padding:               2px 10px 1px 50px;
    margin:                0 0 10px 0;
}
.template-searchresults .search-title {
    margin:               5px 0 0 0;
    font-size:            16px;
    font-weight:          bold;
}

/*-----------------------------------------------------------------------*/
/* Page Index */
/*-----------------------------------------------------------------------*/

.page-index {
    border-top:            1px solid #556677;
    padding:               30px 20px 20px 20px;
}

.page-index a,
.page-index a:link,
.page-index a:hover,
.page-index a:visited  {  
    text-decoration: none; 
}
.page-index a:hover .item-heading  { 
}
.page-index a:active .item-heading  { 
    color:                 white; 
    background-color:      black;
}

.page-index .item {
    padding:               2px 10px 1px 44px;
    margin:                0 0 10px 0;
    display:               block;
    min-height:            28px;
}
.page-index .item-heading {
    display:               inline;
    font-weight:           bold;
    font-size:             18px;
}