/* CSS Document */

body{
	background-color:#93ccef;
	background-image:url("../images/bg-main.jpg");
	color:#dd089e;
	margin:0px;
	font-size:150%;
	font-family:BariolRegular,arial;
}

@font-face{
    font-family: BariolRegular;
    src:url('../fonts/Bariol_Regular.otf'),
	url('../fonts/Bariol_Regular.woff') format('woff')
}

@font-face{
    font-family:BariolBold;
    src:url('../fonts/Bariol_Bold.otf'),
	url('../fonts/Bariol_Bold.woff') format('woff');
}

a[name]{
	display:block;
    position:relative;
    top:-170px;
    visibility:hidden;
}

#layout-floating-header{
	position:fixed;
	width:100%;
	z-index:100;
}

#layout-nav{
	background-color:rgba(221,8,158,0.85);
	color:#FFFFFF;
	padding:0px 3% 0px 3%;
	height:48px;
}

#layout-nav ul#nav-global{
	list-style:none;
	margin:0px;
	padding:0px;
}

#layout-nav ul#nav-global:before{
	display:inline-block;
	float:left;
	background-image:url('../images/icon-home-bear.png');
	background-repeat:no-repeat;
	width:65px;
	height:43px;
	margin:2px;
	content:"";
}

#layout-nav ul#nav-global>li{
	float:left;	
	margin:0px;
	padding:0px;
	position:relative; /* for sub nav positioning */
}


#layout-nav ul#nav-global>li>a{
	color:#FFFFFF;
	text-decoration:none;
	border-right:2px solid #FFFFFF;
	padding:11px 30px;
	display:block;
}

#layout-nav ul#nav-global>li>a sup{font-size:50%;}

#layout-nav ul#nav-global>li>a[rel="by-subject"]{
	background-image:url('../images/icon-nav-filter.png');
	background-repeat:no-repeat;
	background-position:20px center;
	padding-left:55px;
}

#layout-nav ul#nav-global li a:hover,
body.page-object #layout-nav ul#nav-global li a[rel="look-around"],
body.page-category #layout-nav ul#nav-global li a[rel="by-subject"]{
	color:#FFFFFF;
	background-color:rgba(255,255,255,0.35);
}

#layout-nav ul.nav-sub{
	position:absolute;
	left:-2px;
	top:48px;
	z-index:998;	
	background-color:rgba(221,8,158,0.85);
	list-style:none;
	margin:0px;
	padding:0px;
	border:2px solid #FFFFFF;
	border-top-width:1px;
	width:360%;
	display:none;
}

/* narrower for subject one */
#layout-nav ul.nav-sub#by-subject{width:200%;}

#layout-nav ul.nav-sub>li:first-child{}

#layout-nav ul.nav-sub>li>a{
	display:block;
	color:#FFFFFF;
	text-decoration:none;
	font-size:75%;
	padding:10px 2% 10px 2%;	
	border-top:1px solid #FFFFFF;
	float:left;
	width:46%;
}

#layout-ncl-credit{
	float:right;
}

#layout-ncl-credit a{
	color:#FFFFFF;
	display:inline-block;
	text-decoration:none;
	background-image:url('../images/icon-ncl-logo.png');
	background-position:center right;
	background-repeat:no-repeat;
	margin:5px;
	padding:8px 130px 8px 10px;
	font-size:20px;
}

#layout-ncl-credit a:hover{text-decoration:underline;}

#layout-header{
	background-color:rgba(255,255,255,0.7);
	position:relative;
	height:210px;
}

body.page-additional-page #layout-floating-header{
	position:static;
}

body.page-additional-page #layout-header{
	height:auto;
}

body.page-additional-page #layout-header h2{
	display:none;
}

body.page-additional-page #layout-container{
	background-color:rgba(255,255,255,0.7);	
	padding:10px 5% 50px 5%;
}

#layout-header-text{
	padding:20px 5% 35px 5%;
	width:60%;
}

#layout-header h1{
	font-family:BariolBold;
	margin:0px;
	font-size:60px;
}

#layout-header h1 .item-category{
	font-size:25%;
	text-transform:uppercase;
	background-color:#dd089e;
	margin-left:20px;
	margin-right:-15px;
	padding:3px 5px;
	color:#FFFFFF;
	border-radius:3px;
	border:1px solid #dd089e;
}

#layout-header h1 a.item-category:hover{
	background-color:rgba(221,8,158,0.2);
	color:#dd089e;
}

#layout-header h1 a#remove-filter{
	display:inline-block;
	width:36px;
	background-image:url('../images/button-header-filter-on.png');
	background-repeat:no-repeat;
	color:transparent;
	margin-left:15px;
	background-position:left 18px;
}

#layout-header h1 a#remove-filter:hover{
	background-image:url('../images/button-header-filter-off.png');
}

#layout-header a{
	color:#dd089e;
	text-decoration:none;
}

#layout-header h2{
	font-family:BariolRegular;
	margin:0px;
	font-size:25px;
}

#layout-header-image{
	/*background-image:url('../images/object-header-socks.png');*/
	width:30%;
	height:100%;
	position:absolute;
	top:0px;
	right:0px;
	background-repeat:no-repeat;
	background-position:center center;
	background-size:auto 90%;
}

#layout-container{
	padding-top:258px;
	padding-bottom:50px;
}

#layout-container a{color:#dd089e;}
#layout-container a:hover{text-decoration:none;}

body.page-home #layout-content,
body.page-category #layout-content{
	padding-left:5%;
	padding-top:40px;
	z-index:99;
}

body.page-home #layout-content .column,
body.page-category #layout-content .column{
	float:left;
	min-height:400px;
	width:15%;
	margin-right:5%;
}

body.page-home #layout-content .box,
body.page-category #layout-content .box{
	width:100%;
	margin-bottom:60px;	
	position:relative;
	height:500px;
}

body.page-home #layout-content .box img,
body.page-category #layout-content .box img{
	width:100%;
	position:absolute;
	-webkit-transition:-webkit-transform .8s ease-in-out;
  	transition:transform .1s ease-in-out;
	-webkit-filter:drop-shadow(10px 10px 5px #FFFFFF);
    filter:drop-shadow(10px 10px 5px #FFFFFF);
	z-index:99;
}

body.page-home #layout-content .box img:hover,
body.page-category #layout-content .box img:hover{
	-webkit-transform:rotate(10deg);
	transform:rotate(10deg);
	z-index:101;
}

body.page-home #layout-content .box .hidden,
body.page-category #layout-content .box .hidden{display:none;}

body.page-object #layout-content{}

/* header scrolling changes */

body.page-home.user-scroll:not(.mobile) #layout-header{background-color:rgba(255, 255, 255, 0.9);}

body.page-object.user-scroll:not(.mobile) #layout-header{
	height:100px;
	background-color:rgba(255, 255, 255, 0.9);
}

body.page-object.user-scroll:not(.mobile) #layout-header-text{width:75%;}
body.page-object.user-scroll:not(.mobile) #layout-header h1{font-size:50px;}

body.page-object.user-scroll:not(.mobile) #layout-header h2,
body.page-object.user-scroll:not(.mobile) #layout-header-image{
	display:none;
}

/* standard view when not scrolled */
body.page-object #layout-content ul#nav-activities{
	list-style:none;
	margin:0px;
	padding:0px;
	display:block;
}

body.page-object #layout-content ul#nav-activities li{
	float:left;
	width:20%;
	height:140px;
	background-color:#FFFFFF;
}

body.page-object #layout-content ul#nav-activities li a{
	display:block;
	height:100%;
	border:2px solid #FFFFFF;
	border-top-width:3px;
	border-bottom-width:3px;
	background-repeat:no-repeat;
	background-position:center center;
	background-size:auto 80%;
	color:transparent;
	/*-webkit-transition:-webkit-transform .8s ease-in-out;
  	transition:transform .1s ease-in-out;*/
}

body.page-object #layout-content ul#nav-activities li a:hover{
	background-size:auto 90%;
}

body.page-object.user-scroll:not(.mobile) #layout-content ul#nav-activities{
	list-style:none;
	margin:0px;
	padding:0px;
	position:fixed;
	right:0px;
	top:48px;
	z-index:998;
}

body.page-object.user-scroll:not(.mobile) #layout-content ul#nav-activities li{
	float:none;
	width:100px;
	height:100px;
	background-color:#FFFFFF;
}

body.page-object.user-scroll:not(.mobile) #layout-content ul#nav-activities li a{
	background-size:auto 75%;
}

body.page-object.user-scroll:not(.mobile) #layout-content ul#nav-activities li a:hover{
	background-size:auto 85%;
}

body.page-object #layout-content ul#nav-activities li a.nav-activity-discover{
	background-color:#b0db77;	
	background-image:url('../images/object-activity-discover.png');
}

body.page-object #layout-content ul#nav-activities li a.nav-activity-watch{
	background-color:#f96060;	
	background-image:url('../images/object-activity-watch.png');
}

body.page-object #layout-content ul#nav-activities li a.nav-activity-play{
	background-color:#75cbf7;	
	background-image:url('../images/object-activity-play.png');
}

body.page-object #layout-content ul#nav-activities li a.nav-activity-listen{
	background-color:#9383bc;	
	background-image:url('../images/object-activity-listen.png');
}

body.page-object #layout-content ul#nav-activities li a.nav-activity-explore{
	background-color:#f7c055;	
	background-image:url('../images/object-activity-explore.png');
}

body.page-object #layout-content ul#nav-activities li a.disabled{background-color:#999999;}
body.page-object #layout-content ul#nav-activities li a.disabled:hover{background-size:auto 80%;cursor:default;}
body.page-object.user-scroll:not(.mobile) #layout-content ul#nav-activities li a.disabled:hover{
	background-size:auto 75%;
}
body.page-object #layout-content ul#nav-activities li a.disabled.nav-activity-discover{background-image:url('../images/object-activity-discover-disabled.png');}
body.page-object #layout-content ul#nav-activities li a.disabled.nav-activity-watch{background-image:url('../images/object-activity-watch-disabled.png');}
body.page-object #layout-content ul#nav-activities li a.disabled.nav-activity-play{background-image:url('../images/object-activity-play-disabled.png');}
body.page-object #layout-content ul#nav-activities li a.disabled.nav-activity-listen{background-image:url('../images/object-activity-listen-disabled.png');}
body.page-object #layout-content ul#nav-activities li a.disabled.nav-activity-explore{background-image:url('../images/object-activity-explore-disabled.png');}

body.page-object .content-section{
	background-color:rgba(255,255,255,0.8);
	padding-bottom:50px;
}

body.page-object .content-section h2{
	background-color:#666666;
	padding-top:15px;
	padding-bottom:15px;
	color:#FFFFFF;
	background-repeat:no-repeat;
	background-position:right 15% center;
	background-size:auto 80%;
}

body.page-object .content-section h2,
body.page-object .content-section h3{
	font-weight:normal;
	font-family:BariolBold;	
}

body.page-object .content-section > *:not(embed){
	padding-left:5%;
	padding-right:15%;
}

body.page-object .content-section embed{
	margin-left:5%;
	margin-bottom:30px;
	width:800px;
	height:600px;
	background-color:rgba(255,255,255,0.5);
	border-radius:15px;
}

body.page-object #content-section-play embed.background-fill{background-color:#73b4fd;}

body.page-object .content-section ul{
	margin-left:50px;
}

body.page-object .content-section ul li{
	margin-bottom:10px;
}

body.page-object .content-section img{
	padding-top:20px;
	padding-bottom:20px;
	/*width:100%;*/
}

body.page-object .content-section img.img-full-width{width:100%;}
body.page-object .content-section img.img-float-left,body.page-object .content-section img.alignleft{float:left;margin-right:20px;}
body.page-object .content-section img.img-float-right,body.page-object .content-section img.alignright{float:right;margin-left:20px;}

body.page-object .content-section p a:hover{text-decoration:none;}

body.page-object #content-section-discover h2{background-color:#8ad22e;background-image:url('../images/icon-content-section-discover.png');}
body.page-object.user-scroll:not(.mobile) #content-section-discover h2{margin-top:171px;} /* to compensate for midding nav when user scrolling */
body.page-object #content-section-discover,body.page-object #content-section-discover a{color:#63ad05;}

body.page-object #content-section-watch h2{background-color:#ef2828;background-image:url('../images/icon-content-section-watch.png');}
body.page-object #content-section-watch,body.page-object #content-section-watch a{color:#ef2828;}

body.page-object #content-section-play h2{background-color:#2e7fda;background-image:url('../images/icon-content-section-play.png');}
body.page-object #content-section-play,body.page-object #content-section-play a{color:#2e7fda;}

body.page-object #content-section-listen h2{background-color:#882dd0;background-image:url('../images/icon-content-section-listen.png');}
body.page-object #content-section-listen,body.page-object #content-section-listen a{color:#882dd0;}

body.page-object #content-section-explore h2{background-color:#ff9600;background-image:url('../images/icon-content-section-explore.png');}
body.page-object #content-section-explore,body.page-object #content-section-explore a{color:#e68b07;}

body.page-object .content-section #quiz-container,
body.page-object .content-section audio{
	width:800px;
	/*
		N.B. the wordpress player width needs to be configured/changed here:
		/wp-includes/js/mediaelement/mediaelement-and-player.min.js
		mejs.MepDefaults.audioWidth=800 (line 27-ish)
	*/
}

body.page-object #did_you_know{
	background-color:rgba(221, 8, 158, 0.85);
	color:#FFFFFF;
	position:fixed;
	right:0px;
	bottom:0px;
	margin-right:4%;
	padding:10px 2% 0px 1%;
	width:300px;
	z-index:9999;
	cursor:pointer;
}

body.page-object #did_you_know p,
body.page-object #did_you_know h3{margin:0px;}

body.page-object #did_you_know p{
	font-size:0.7em;	
	padding:10px;
	margin-top:5px;
}

body.page-object #did_you_know h3{
	font-size:1em;
	font-weight:normal;
	font-family:BariolBold;
	background-image:url('../images/did-you-know-tip.png');
	background-repeat:no-repeat;
	background-position:left center;
	padding:13px 0px 7px 70px;
	background-size:65px;
	margin-bottom:15px;
}

body.page-object #did_you_know a{
	position:absolute;
	top:0px;
	right:0px;
	display:block;
	font-size:0.8em;
	font-family:BariolBold;
	padding:8px 15px;
	text-decoration:none;
	color:#FFFFFF;
}

body.page-object #did_you_know a:hover{
	background-color:rgba(255,255,255,0.25);	
}

body.page-object #did_you_know.minimised{
	padding-top:5px;
	width:auto;
}

body.page-object #did_you_know.minimised p{display:none;}

body.page-object #did_you_know.minimised h3{
	background-size:50px;
	margin-bottom:5px;
	font-size:0.8em;
	padding-left:60px;
}

body.page-object #did_you_know.minimised a{display:none;}

body.page-object .content-section div.mejs-container.svg.wp-audio-shortcode.mejs-audio{
	margin-left:50px !important;	
}

#layout-footer{
	background-color:rgba(255,255,255,0.7);
	color:#FFFFFF;
	padding:20px 3% 20px 3%;
	color:#dd089e;
	font-size:20px;
	text-align:center;
}

#layout-footer a{color:#dd089e;}
#layout-footer a:hover{text-decoration:none;}

span.developer-question{font-size:200%;color:red;background-color:yellow;}

.mobile-only{display:none;}

/* smaller desktops / IPADS? */
@media (max-width: 1024px){
	
	/*body{
		background-image:none;
		background-color:yellow;
	}*/
	
	.full-desktop-only{display:none;}
	
	#layout-header h1{
		font-size:45px;
	}

	
}

/* mobile */
@media (max-width: 1023px){
	
	.desktop-only{display:none;}
	.mobile-only{display:block;}
	
	#layout-nav ul#nav-global>li>a{
		border-right:none;
		padding:11px 20px;
	}
	
	#layout-floating-header{position:static;}
	
	#layout-header{height:auto;}
	
	#layout-header-text{
		padding:25px 5% 25px 5%;
		width:auto;
	}
	
	body.page-object #layout-header-text{
		padding:25px 5% 25px 5%;
		width:60%;
	}
	
	#layout-header-image{width:30%;}
	
	#layout-header-image img{
		height:100%;
		width:auto;
		margin-top:0px;
	}
	
	#layout-header h1{font-size:40px;}
	#layout-header h1 a#remove-filter{display:none;}
	
	#layout-header h1 .item-category{
		margin-left:0px;
		margin-right:5px;
	}
	
	#layout-header h2{font-size:20px;}
	
	#layout-header label[for="by-subject-mobile"],
	#layout-header a#remove-filter-mobile{
		background-repeat:no-repeat;
		background-size:auto 100%;
		background-position:left center;
		padding-left:25px;
		font-size:15px;
		text-transform:uppercase;
	}
	
	#layout-header a#remove-filter-mobile{
		display:block;
		margin-top:15px;
	}
	
	#layout-header label[for="by-subject-mobile"]{
		background-image:url('../images/button-header-filter-on.png');
		margin-top:20px;
	}
	
	#layout-header select#by-subject-mobile{
		font-size:15px;
		font-family:BariolRegular;
		/*border:1px solid #dd089e;
		border-radius:0px;
		-webkit-appearance:none;
		text-transform:uppercase;
		color:#dd089e;*/
	}
	
	#layout-header a#remove-filter-mobile{
		background-image:url('../images/button-header-filter-off.png');
	}
	
	#layout-container{padding-top:0px;}
	
	body.page-home #layout-content .column,
	body.page-category #layout-content .column{
		float:none;
		width:auto;
		margin-right:0px;
		min-height:auto;
	}
	
	body.page-home #layout-content .box,
	body.page-category #layout-content .box{
		width:90%;
		background-color:rgba(255,255,255,0.7);
		height:auto;
		padding:10px 5%;
		margin-bottom:40px;
	}
	
	body.page-home #layout-content .box img,
	body.page-category #layout-content .box img{
		width:40%;
		float:right;
		position:static;
		margin:0px 0px 5px 5%;
		-webkit-filter:drop-shadow(2px 2px 5px #FFFFFF);
		filter:drop-shadow(2px 2px 5px #FFFFFF);
		-webkit-transition:none;
  		transition:none;
	}

	body.page-home #layout-content .box img:hover,
	body.page-category #layout-content .box img:hover{
		-webkit-transform:none;
		transform:none;
	}
	
	body.page-home #layout-content,
	body.page-category #layout-content{padding-left:0px;}
	
	body.page-home #layout-content .box h3,
	body.page-category #layout-content .box h3{
		margin:10px 0px 0px 0px;
		font-size:25px;
		font-weight:normal;
		font-family:BariolBold;
	}
	
	body.page-home #layout-content .box p,
	body.page-category #layout-content .box p{
		margin:10px 0px 15px 0px;
		font-size:20px;
	}
	
	body.page-home #layout-content .box a,
	body.page-category #layout-content .box a{
		color:#dd089e;
		text-decoration:none;
	}
	
	body.page-home #layout-content .box a h3,
	body.page-category #layout-content .box a h3{text-decoration:underline;}
	
	body #layout-content .box a .categories span{
		font-family:BariolBold;
		font-size:60%;
		text-transform:uppercase;
		background-color:#dd089e;
		margin-right:5px;
		padding:3px 5px;
		color:#FFFFFF;
		border-radius:3px;
		border:1px solid #dd089e;
	}
	
	body.page-object .content-section img.img-float-left,body.page-object .content-section img.alignleft,body.page-object .content-section img.img-float-right,body.page-object .content-section img.alignright{float:none;margin-left:0px;width:100%;height:auto;}
	
	body.page-object .content-section iframe[src*="youtube.com"]{
		width:100%;
		height:auto;
	}
	
	body.page-object .content-section h2{background-position:right 5% center;}
	
	body.page-object .content-section > *:not(embed){padding-right:5%;}	
	
	a[name]{top:0px;}
	
	body.page-object #layout-content ul#nav-activities li{
		height:80px;
	}
	
	body.page-object #layout-content ul#nav-activities li a{
		/*background-size:auto 80%;*/
	}
	
	#nav-sub-mobile a#toggle{
		display:block;
		background-image:url("../images/button-mobile-menu-show.png");
		background-size:100% 100%;
		width:30px;
		height:25px;
		margin-top:10px;
		color:transparent;
		float:right;
	}
	
	#nav-sub-mobile a#toggle.hide{
		background-image:url("../images/button-mobile-menu-hide.png");
	}
	
	#nav-sub-mobile div{
		width:100%;
	}
	
	#nav-sub-mobile div ul{
		display:none;
		position:absolute;
		left:0px;
		top:48px;
		margin:0px;
		padding:10px 0px 0px 0px;
		z-index:9999 !important;
		background-color:rgba(221,8,158,0.85);
		list-style:none;
		border-bottom:3px solid #FFFFFF;
		width:100%;
	}
	
	#nav-sub-mobile div ul li{
		border-top:1px solid #FFFFFF;
		padding:10px 20px;
	}
	
	#nav-sub-mobile div ul li a{
		color:#FFFFFF;
		text-decoration:none;		
	}
	
	body.page-object #did_you_know{
		background-color:rgba(221, 8, 158, 0.85);
		color:#FFFFFF;
		position:static;
		margin:0px;
		margin-top:30px;
		padding-bottom:10px;
		cursor:auto;
		width:auto;
	}
	
	body.page-object #did_you_know p,
	body.page-object #did_you_know h3{margin:0px;}
	
	body.page-object #did_you_know p{
		font-size:1em;	
		padding:10px;
		margin-top:5px;
	}
	
	body.page-object #did_you_know h3{
		font-size:1em;
		font-weight:normal;
		font-family:BariolBold;
		background-image:url('../images/did-you-know-tip.png');
		background-repeat:no-repeat;
		background-position:left center;
		padding:13px 0px 7px 70px;
		background-size:65px;
		margin-bottom:15px;
	}
	
	body.page-object #did_you_know a{
		display:none;
	}
	
	body.page-object #did_you_know a:hover{
		background-color:rgba(255,255,255,0.25);	
	}
	
}


@media (max-width: 500px){
	#layout-header-image img{
		width:100%;
		height:auto;
		margin-top:20px;
	}
}