﻿
/* Styles for the Resource Centre */


/* Resource Centre Index Page Hexagons */

#divHexagonsWrapper {  width: 80%; min-width: 980px; margin: 0 auto; position: relative; }

.divHexagonsScale { width: 80%; margin: 0 auto; position: relative; }
.divHexagonsIndex .divHexagonsScale { width: 100%; }

.divHexagons { width: 100%; position: relative; overflow: hidden; /*padding-top: 37.2%;*/ padding-top: 46.5%; }

.divHexagonsBackground { position: absolute; top: 5%; left: 0px; bottom: 5%; right: 0px; background-color: #daeaca; }

.hexWrapper { font-size: 0px; display: block; padding: 0px; width: 100%; height: 100%; position: absolute; top: 0px; left: 0px; }
.hexWrapper li { display: inline-block; position: relative; font-size: 0.8vw; float: left; }
.divHexagonsIndex .hexWrapper li { font-size: 1vw; }
.hexWrapper li:nth-child(last) { clear: both; }

/* 21.5% width - showing six hex across the screen */
.hexWrapper { margin-left: 12.5%; }
.hexWrapper li { width: 21.5%; padding-top: 18.619%; margin-left: -5.375%; }

.hexWrapper li.h6Down { margin-top: 9.3095%; } 

/*.hexWrapper li:nth-child(even) { margin-top: 9.3095%; }*/
.hexWrapper li:nth-child(2n+7) { margin-top: -9.3095%; }
.hexWrapper li:nth-child(2n+8) { margin-top: 0%; }
.hexWrapper p { font-size: 0.85vw; }
.divHexagonsIndex .hexWrapper p { font-size: 1.05vw; }

.hexWrapper .hexHide6 { display: none; }

.hexWrapper li div.hex1 { 
    position: absolute;
	top: 2%;
    left: 1.732%;
    right: 1.732%;
    bottom: 2%;
	transform: rotate(60deg);
    overflow: hidden;
}

.hexWrapper li div.hex2 { 
    width: 100%;
    height: 100%;
    transform: rotate(-120deg);
    overflow: hidden;
}

.hexWrapper li div.hex3 { 
    width: 100%;
    height: 100%;
    transform: rotate(60deg);
    overflow: hidden;
}

.hexWrapper a { display: block; width: 100%; height: 100%; transform: rotate(60deg); overflow: hidden; color: rgba(255,255,255,1);
    text-decoration: none; font-family: sans-serif; text-transform: uppercase; position: relative; }

.hexHover { position: absolute; width: 100%; height: 100%; background-color: rgba(0,0,0,0.2); opacity: 0; /*transition: opacity linear 0.5s;*/ }
.hexWrapper a:hover .hexHover { opacity: 1; }
.hexWrapper .hexIcon { width: 100%; height: 66%; background-position: top center; background-repeat: no-repeat; background-size: contain; z-index: 5; position: relative; }
.hexWrapper p { margin: 0px auto; text-align: center; width: 100%; text-align: center; margin-top: 4%; z-index: 5; position: relative; }

@media screen and (max-width: 1000px) {
    #divHexagonsWrapper { width: 100%; min-width: 100%; }
	.hexWrapper p { font-size: 1.3em; }
    .divHexagonsIndex .hexWrapper p { font-size: 1.3em; }
}

@media screen and (max-width: 768px) {
    .divHexagons { padding-top: 53%; padding-bottom: 13.5%; }
	.hexWrapper { margin-left: 7.5%; width: 93%; }
	.hexWrapper li { width: 33%; padding-top: 28.578%; margin-left: -8.1%; }
    .hexWrapper li.h4Down { margin-top: 14.3%; }
	.hexWrapper li:nth-child(2n+7) { margin-top: initial; }
	.hexWrapper li:nth-child(2n+8) { margin-top: initial; }	
    .hexWrapper li.h4Up:nth-child(n+7) { margin-top: -14.3%; }
/*
	.hexWrapper li:nth-child(even) { margin-top: 14.3%; }
	.hexWrapper li:nth-child(2n+5) { margin-top: -14.3%; }
	.hexWrapper li:nth-child(2n+6) { margin-top: 0%; }*/	
	.hexWrapper p { font-size: 1.9em; }
    .divHexagonsIndex .hexWrapper p { font-size: 1.9em; }
	.hexWrapper .hexHide4 { display: none; }
    .hexWrapper .hexHide6 { display: block; }
}

/* Resource Centre Breadcrumb */
.ulRcBreadcrumbs { display: inline-block; }
.ulRcLinks { display: inline-block; float: right; }
.ulRcLinks li::after { content: "" !important; }

/* Resource Centre Categories - boxes */

.ulRcCategoryBoxes { list-style: none; padding: 0px !important; margin: 0px !important; }
.ulRcCategoryBoxes li { display: inline-block; box-sizing: border-box; width: 20%; margin: 0px !important; padding: 6px; vertical-align: top; }
.rcIndex .ulRcCategoryBoxes li { width: 16.5%; }
.ulRcCategoryBoxes li a { display: block; background-color: #76ba45; color: rgba(255,255,255,1); padding: 3px; text-decoration: none; margin: 0px !important; }
.ulRcCategoryBoxes li a p  { font-size: 0.85em; margin: 0.5em 0; line-height: 1.25em; height: 2.5em; overflow: hidden; text-align: center; }
.ulRcCategoryBoxes li a div { position: relative; width: 100%; padding-top: 65%; background-position: center center; background-repeat: no-repeat; background-size: cover; }

.ulRcCategoryBoxes li a .spReadMore { color: rgba(255,255,255,1); background-color: rgba(0,0,0,0.3); display: block; position: absolute; width: 100%; height: 100%; left: 0px; top: 0px;
                                      font-size: 1.5em; text-align: center; line-height: 4em; white-space: nowrap; transition: opacity 0.5s; opacity: 0; }
.ulRcCategoryBoxes li a:hover .spReadMore { opacity: 1; }

@media screen and (max-width: 1000px) {
    .ulRcCategoryBoxes li { width: 25%; }
    .ulRcCategoryBoxes li a .spReadMore { font-size: 1.3em; line-height: 9vw; }
}

@media screen and (max-width: 768px) {
    .ulRcCategoryBoxes li { width: 33.3%; }
    .ulRcCategoryBoxes li a .spReadMore { font-size: 0.9em; line-height: 13vw; }
}

@media screen and (max-width: 500px) {
    .ulRcCategoryBoxes li { width: 50%; }
}

.liClear { clear: both; padding: 0px !important; margin: 0px !important; }

/* Resource Centre Categories - list */

.ulRcCategoryList { list-style: none; padding: 0px !important; margin: 0px !important; }
.ulRcCategoryList li { display: block; box-sizing: border-box; float: left; width: 100%; }
.ulRcCategoryList li a { display: block; text-decoration: none; margin: 0px !important; }
.ulRcCategoryList li a div { width: 10%; padding-top: 10%; float: left; background-position: center center; background-repeat: no-repeat; background-size: cover; margin-right: 1em; }
.ulRcCategoryList li a h4 { margin-top: 0px; font-weight: normal; font-size: 0.9em; }
.ulRcCategoryList li a p { font-size: 0.8em; }
.ulRcCategoryList li span { display: block; }

/* Resource Centre Documents - list */

.ulRcDocumentList { list-style: none; padding: 0px !important; margin: 0px !important; }
.ulRcDocumentList li { display: block; box-sizing: border-box; width: 100%; padding: 0.5em; border-top: solid 1px rgba(0,0,0,0.2); }
.ulRcDocumentList li.liClear { margin: 0px !important; padding: 0px !important; border: none; }

/*.ulRcDocumentList li:nth-child(even) { background-color: rgba(218, 234, 202, 0.5); }*/
.ulRcDocumentList li a { display: block; text-decoration: none; margin: 0px !important; }
.ulRcDocumentList li a .divDocListImage { width: 10%; padding-top: 10%; float: left; background-position: center center; background-repeat: no-repeat; background-size: cover; }
.ulRcDocumentList li a .spDocIcon { width: 10%; float: left; text-align: center; }
.ulRcDocumentList li a .spDocIcon i { font-size: 4em; }
.ulRcDocumentList li a .divDocListContent { width: 85%; float: right; }
.ulRcDocumentList li a .divDocListContent .pDesc {  }
.ulRcDocumentList li a .divDocListContent .pDetail { color: rgba(0,0,0,0.4); }
.ulRcDocumentList li a .divDocListContent .pAvail { color: rgba(0,0,0,0.4); }
.ulRcDocumentList li a h4 { margin-top: 0px; }
.ulRcDocumentList li a p { font-size: 0.8em; }
.ulRcDocumentList li span { display: block; }
.ulRcDocumentList li p { font-size: 0.875em; }

.ulRcDocumentList .liInLib a .spDocIcon { display: none; }
.ulRcDocumentList .liInLib a .divDocListContent { width: auto; float: none; }
.ulRcDocumentList .liInLib a .divDocListContent .pDetail { display: inline-block; margin-right: 1em; }
.ulRcDocumentList .liInLib a .divDocListContent .pAvail { display: inline-block; }

@media screen and (max-width: 768px) {
    .ulRcDocumentList li a .spDocIcon i { font-size: 3em; }
}

.ulDocDetails { list-style: none; padding: 0px !important; margin: 0px !important; }
.ulDocDetails li { display: block; margin: 0px !important; line-height: 1.5; }
.ulDocDetails li label { display: inline-block; width: 20px; min-width: 150px; font-weight: 700; }
.ulDocDetails li span { display: inline-block; }

.divRcDocument .pStrongBlock strong { display: block; margin: 0.5em 0px; }
.divRcDocument .pStrongBlock br { display: none; }
.divRcDocument .pStrongBlock em:after { content: " "; }

.divVideoWrapper { width: 80%; padding-top: 60%; position: relative; margin: 2em 0; }
.divVideoWrapper iframe { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; }

.divText .ulOrganisations { list-style: none; margin: 0px; padding: 0px; }
.divText .ulOrganisations .liOrg { /*border-bottom: solid 1px rgba(0,0,0,0.1);*/ padding: 0.01em 0.5em; }
.divText .ulOrganisations li.liOrg:last-child { border: none !important; }
.divText .ulOrganisations li .divOrgLogo { float: left; width: 10%; padding-top: 10%; margin: 0px 1em 1em 0px; background-position: center center; background-size: contain; background-repeat: no-repeat; }
.divText .ulOrganisations li h2 { }
.divText .ulOrganisations li h3 { }
.divText .ulOrganisations li h4 { }
.divText .ulOrganisations li p { }
.divText .ulOrganisations li a { margin: 0.5em 0; line-height: 1.25em; display: block; }

.divText .ulPartners .liOrg { background-color: rgba(117,234,0,0.08); }
.divText .ulNetworkMembers .liOrg { background-color: rgba(0,0,0,0.08); }
.divText .orgJump { text-decoration: none;
    font-size: 0.7em;
    padding: 0.25em;
    border: solid 1px rgba(102, 153, 0, 0.3);
    border-radius: 0.3em;
    vertical-align: middle;
    display: inline-block;
    line-height: 1.2em;
    position: absolute;
    top: 0px;
    margin: 0px;
    right: 0px; }

.divText .h3Org { line-height: 1.25em; position: relative; }

.divText .imgOrgLogo { float: right; margin: 1em; vertical-align: top; max-width: 20%; }

.divText .ulSearchResults { list-style: none; margin: 0px; padding: 0px; }
.divText .ulSearchResults li { border-bottom: solid 1px rgba(0,0,0,0.1); }

/* Resource Centre Training Materials */

.divText .ulTrainingMaterialsList { list-style: none; margin: 0px; padding: 0px; }
.divText .ulTrainingMaterialsList li { margin: 0px; }
.divText .ulTrainingMaterialsList li.tmCategory { display: block; }
.divText .ulTrainingMaterialsList li.tmCategory h2 { margin: 0.25em 0px; display: inline-block; }
.divText .ulTrainingMaterialsList li.tmItem { display: inline-block; width: 33.3%; box-sizing: border-box; padding: 5px; vertical-align: top; }
.divText .ulTrainingMaterialsList li .divTMItem { display: block; box-sizing: border-box; padding: 5px; border: solid 1px rgba(0,0,0,0.1); border-radius: 3px; vertical-align: top; }
.divText .ulTrainingMaterialsList .divTMItem img { display: inline-block; width: 30%; vertical-align: top; }
.divText .ulTrainingMaterialsList .divTMItem span { display: inline-block; width: 30%; vertical-align: top; }
.divText .ulTrainingMaterialsList .divTMItem span i { font-size: 3.5em; color: rgba(0,0,0,0.3); }
.divText .ulTrainingMaterialsList .divTMItem div { display: inline-block; width: 70%; vertical-align: top; box-sizing: border-box; position: relative; /*padding-top: 60%;*/ padding-top: 8em; }
.divText .ulTrainingMaterialsList .divTMItem div h4 { margin-top: 0px; position: absolute; top: 0px; left: 5px; bottom: 1em; overflow: hidden; }
.divText .ulTrainingMaterialsList .divTMItem div a.aDownload { position: absolute; bottom: 0px; right: 5px; }
.divText .ulTrainingMaterialsList .divTMItem div a.aMore { position: absolute; bottom: 0px; left: 5px; }

.divText .ulCatJumpMenu { list-style: none; padding: 0px; float: right; vertical-align: middle; }
.divText .ulCatJumpMenu li { display: inline-block; border: solid 1px rgba(0,0,0,0.1); border-radius: 3px; padding: 0.25em; margin-right: 0.5em; }
.divText .ulCatJumpMenu li a { text-decoration: none; }

@media screen and (max-width: 1000px) {
    .divText .ulTrainingMaterialsList li.tmItem { width: 50%; }
}

@media screen and (max-width: 768px) {
    .divText .ulTrainingMaterialsList li.tmItem { width: 50%; }
    .divText .ulTrainingMaterialsList .divTMItem div { font-size: 17px; }
    .divText .ulCatJumpMenu { display: block; float: none; }
}

@media screen and (max-width: 500px) {
    .divText .ulTrainingMaterialsList li.tmItem { width: 100%; }
}

/* Journal Index Page */

.divText .ulJournalBoxes { list-style: none; margin: 0px; padding: 0px; }
.divText .ulJournalBoxes li { display: inline-block; width: 20%; }
.divText .ulJournalBoxes li a { display: block; text-decoration: none; padding-top: 135%; margin: 5px; box-sizing: border-box;
                                background-position: center center; background-repeat: no-repeat; background-size: contain; }
.divText .ulJournalBoxes li img { display: block; width: 20%; vertical-align: top; }

@media screen and (max-width: 1000px) {
    .divText .ulJournalBoxes li { width: 25%; }
}

@media screen and (max-width: 768px) {
    .divText .ulJournalBoxes li { width: 33.3%; }
}

@media screen and (max-width: 500px) {
    .divText .ulJournalBoxes li { width: 50%; }
}


.divText .ulJournalBoxes li div { display: inline-block; width: 75%; vertical-align: top; }

/*.divText .ulJournalBoxes { list-style: none; margin: 0px; padding: 0px; }
.divText .ulJournalBoxes li a { text-decoration: none; }
.divText .ulJournalBoxes li img { display: inline-block; width: 20%; vertical-align: top; }
.divText .ulJournalBoxes li div { display: inline-block; width: 75%; vertical-align: top; }
    */

.divText .divFeaturedJournal > a { display: inline-block; text-decoration: none; width: 25%; padding-top: 33.75%; margin: 5px; box-sizing: border-box;
                                background-position: center center; background-repeat: no-repeat; background-size: contain; vertical-align: top; }
.divText .divFeaturedJournal > div { display: inline-block; width: 70%; vertical-align: top; }
.divText .divFeaturedJournal .ulJournalContents { list-style: none; margin: 0px; padding: 0px; }
.divText .divFeaturedJournal .ulJournalContents li { }

.divText.divRcJournal img { display: inline-block; width: 25%; margin: 5px; box-sizing: border-box; vertical-align: top; }
.divText.divRcJournal div { display: inline-block; width: 70%; vertical-align: top; }
.divText.divRcJournal .ulJournalContents { list-style: none; margin: 0px; padding: 0px; }

.divText .ulBeeMoviesList { list-style: none; margin: 0px; padding: 0px; }
.divText .ulBeeMoviesList li { /*border-bottom: solid 1px rgba(0,0,0,0.1);*/ margin: 1em 0px; }
.divText .ulBeeMoviesList li a { display: block; color: inherit; text-decoration: none; }
.divText .ulBeeMoviesList li .divMovieThumb { width: 20%; padding-top: 15%; margin-right: 1em; display: inline-block; background-position: center center; background-repeat: no-repeat; background-size: cover; }
.divText .ulBeeMoviesList li .divMovieDesc { display: inline-block; width: 75%; vertical-align: top; }
.divText .ulBeeMoviesList li .divMovieDesc h4 { margin-top: 0px; display: inline-block; }
.divText .ulBeeMoviesList li .divMovieDesc a { float: right; }

/* Donations */

.divText .ulDonorLogos { list-style: none; margin: 1em 0px; padding: 0px; text-align: center; }
.divText .ulDonorLogos li { display: inline-block; box-sizing: border-box; margin: 0.5em; position: relative; }
.divText .ulDonorLogos li.ip21 { width: 100px; padding-top: 200px; max-width: 100%; }
.divText .ulDonorLogos li.ip11 { width: 100px; padding-top: 100px; max-width: 100%; }
.divText .ulDonorLogos li.ip12 { width: 200px; padding-top: 100px; max-width: 100%; }
.divText .ulDonorLogos li.ip13 { width: 300px; padding-top: 100px; max-width: 100%; }
.divText .ulDonorLogos li a { display: block; width: 100%; height: 100%; }
.divText .ulDonorLogos li div { position: absolute; display: block; top: 0px; left: 0px; width: 100%; height: 100%; background-position: center center; background-repeat: no-repeat; background-size: contain; }

.divText .ulDonorLinks { list-style: none; margin: 1em 0px; padding: 0px; }
