/*-----------------------------------------------------------------------*/
/* Site wide style                                                       */
/*-----------------------------------------------------------------------*/
@import url("vendor/bs-3.3.7-glyphicons.css");
@import url("vendor/wagtail-fonts.css");

/* color scheme
 black    Black
 white    White
 #36454f  Charcoal
 #c13100  Grenadier
 #23345c  Regal
 #f76172  Brink
 */

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

/*--Headings-----------------------------------------------------------------*/
h1 {
    margin:                0px;
    padding:               0px 0 5px 0;
    color:                 #c13100;
    font-weight:           normal;
    font-size:             22px;
    line-height:           normal;
}
h2 {
    margin:                0px;
    padding:               0px 0 5px 0;
    color:                 #23345c;
    font-size:             20px;
    margin:                0;
    line-height:           normal;
}
h3 {
    margin:                0px;
    padding:               0px 0 5px 0;
    color:                 #23345c;
    font-size:             18px;
    line-height:           normal;
}
h4 {
    margin:                0px;
    padding:               0px 0 5px 0;
    color:                 #23345c;
    font-size:             16px;
}

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

/*--Images-------------------------------------------------------------------*/
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;
}

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

/*--Header-------------------------------------------------------------------*/
header {
    position:              relative;
    margin:                0;
    padding:               0;
    width:                 100%;
}
header .top-bar {
}
header .search-box {
}
header .search-box input {
}
header .search-box .glyphicon-search {
}
header .banner h1 {
}

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

footer a.login {
    display:               inline-block;
    float:                 left;
    padding:               4px 5px 0 10px;
    margin:                0;
    font-family:           wagtail;
    font-size:             14px;
    vertical-align:        middle;
    text-decoration:       none; 
    outline:               0;
}
footer a.login:hover,
footer a.login:active {
    background:            transparent;
}

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:               1px 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:               1px 1px;
    text-align:            center;
}

/*--Misc---------------------------------------------------------------------*/
p {
    margin:                0;
    padding:               0 0 1ex 0;
}

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:              fixed;
    top:                   50px;
    left:                  0;
    width:                 100%;
    padding-bottom:        15px;
    z-index:               3;
    display:               none;
}
.popup {
    position:              relative;
    padding:               10px 20px 50px 20px;
    background:            ghostwhite;
    width:                 400px;
    margin:                50px auto 10px auto;
    border:                2px solid #c13100;
}
.popup .close {
    position:              absolute;
    top:                   5px;
    right:                 20px;
    line-height:           20px;
    text-decoration:       none;
    outline:               0;
}

/*-----------------------------------------------------------------------*/
/* 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;
}

/*-----------------------------------------------------------------------*/
/* Content */
/*-----------------------------------------------------------------------*/
#main {
    position:              relative;
    margin:                0px;
}
.content {
    padding:               40px 20px;
}
@media (min-width:800px) {
.content {
    padding:               40px calc(5% - 10px) 40px 5%;
}
}
.content-inner {
    padding:               0px;
}
.content-inner .rich-text {
}

/*-----------------------------------------------------------------------*/
.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;
}
}

/*-----------------------------------------------------------------------*/
.content .animal {
    vertical-align:        top;
    padding:               0px;
    margin:                0px 0px 40px 0;
}
.content .animal figure {
    display:               inline-block;
    padding:               0px;
    margin:                5px 0px;
}
.content .animal-details {
    line-height:           0px;
}
.content .animal-names {
    display:               inline-block;
    line-height: 1px;
    margin:                0;
    padding:               0 0 0 0;
    font-size:             24px;
    font-weight:           bold;
    line-height:           normal;
}
.content .animal-scientific-name {
    margin:                0;
    padding:               2px 0 2px 0;
    font-size:             22px;
    font-style:            italic;
    line-height:           normal;
    color:                 #616161;

}
.content .animal-sound {
    margin:                0 0 -8px 0;
    height:                20px;
    width:                 120px;
    float:                 right;
}
.content .animal-details .spacer {
    margin:                0;
    display:               inline-block;
    width:                 100%;
    height:                1px;
}
.content .animal-content {
    margin:                0;
    padding:               0 10px 0px 0;
    line-height:           normal;
}

@media (min-width:1350px) {
.content .animal {
    display:               inline-block;
    width:                 calc(50% - 18px);
    padding:               0 0 0 0ex;
    margin:                0 15px 40px 0ex; /* for the birds */
}
}
@media (min-width:610px) {
.content .animal figure {
    float:                 left;
}
.content .animal .animal-details {
    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 {
    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; 
    text-decoration:       underline; 
}

.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;
}