html {
	/*background-color:#6a51c2; purple */
	background-color:#00898e;
}



sub {
	vertical-align: sub;
	font-size: smaller;
}

.outline {
	border:1px solid red;
}

.nofloat {
		float:none;
}

.jleft {
	text-align:left;
}

.jright {
	text-align:right;
}

.centered {
	text-align:center;
}

.clickable {
	cursor:pointer;
}

.centered>div {
	margin-left:auto !important;
	margin-right:auto !important;
}

.fullwidth {
	width:100%;
}

.boxedin {
	max-width:1024px;
	margin:0 auto;
	float:none;
	width:100%;/*fixed pos? */
	min-width:980px;/*980px;*/
}

.fineprint {
	font-size:.8125em; /* 13/18 */
}

.disabled {
		/* Required for IE 5, 6, 7 */
	/* ...or something to trigger hasLayout, like zoom: 1; */
	/*width: 100%;*/
	max-width:100%;
	max-height:100%;

	/* Theoretically for IE 8 & 9 (more valid) */
	/* ...but not required as filter works too */
	/* should come BEFORE filter */
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";

	/* This works in IE 8 & 9 too */
	/* ... but also 5, 6, 7 */
	filter: alpha(opacity=50);

	/* Older than Firefox 0.9 */
	-moz-opacity:0.5;

	/* Safari 1.x (pre WebKit!) */
	-khtml-opacity: 0.5;

	/* Modern!
	/* Firefox 0.9+, Safari 2?, Chrome any?
	/* Opera 9+, IE 9+ */
	opacity: 0.5;
	cursor:default;
}

.disabled button, .disabled a {
	cursor:default;
}

.card
{
/*	border:2px solid rgba(0, 0, 0, 0.15); */

	-moz-box-shadow:    0px 0px 0px 2px rgba(0, 0, 0, 0.15);
	-webkit-box-shadow: 0px 0px 0px 2px rgba(0, 0, 0, 0.15);
	box-shadow:         0px 0px 0px 2px rgba(0, 0, 0, 0.15);
}


.w-1 {
	width: 6.3492063%; /* 64/1008 */
}

.w-2 {
	width: 14.68254%; /* 148/1008 */
}

.w-3 {
	width: 23.015873%;  /* 232/1008 */
}

.w-4 {
	width: 31.349206%; /* 316/1008 */
}

.w-5 {
	width: 39.68254%; /* 400/1008 */
}

.w-6 {
	width: 48.015873%; /* 484/1008 */
}

.w-7 {
	width: 56.349206%; /* 568/1008 */
}

.w-8 {
	width: 64.68254%; /* 652/1008 */
}

.w-9 {
	width: 73.015873%; /* 736/1008 */
}

.w-10 {
	width: 81.349206%; /* 820/1008 */
}

.w-11 {
	width: 89.68254%; /* 904/1008 */
}

.w-12 {
	width: 98.015873%; /* 988/1008 */
}



.innercard {
	background-color:#e8e3f7;
	padding:.5% 2.5%;
	margin-bottom: 1em;
	margin-top: 1em;
}

.innercard ul{
    color: #666;
    margin: 6px 16px;
}

.innercard ul li{
	font-weight: 400;
    font-family: 'Open Sans', Helvetica, Arial, sans-serif;
    line-height: 1.27777778em;
    margin: .25em .25em 1em;
    list-style-type: disc;
}

 /* 8/1008 - make room for border - actually 7.7/1008 */
/*
[class*='col-'].card {
	margin-left: 0.7638889%;
	margin-right: 0.7638889%;
	line-height:.5em;
}*/

.white {
	background-color:#faf9f7;
}

.cardbody {
	padding:2%
}

.fill {
	margin:0;
	padding:0;
}

body {
/* non-responsive */
	min-width:980px;
	width:100%;
}

#plumpage {
	position:relative;
	width:auto;
	min-width:980px;
}

#pbsheadband {
	min-width:980px;
	max-height:40px;
	overflow:hidden;
	width:100%;
}

.desertbg {
	background-image:url("../i/bgs/bg_desert.jpg");
}

.mangrovebg {
	background-image:url("../i/bgs/bg_mangrove.jpg");
}
.junglebg {
	background-image:url("../i/bgs/bg_jungle.jpg");
}
.mountainbg {
	background-image:url("../i/bgs/bg_mountain.jpg");
}

.tealbg {
	background-image:url("../i/bgs/bg_teal.jpg");
}
.shipbg {
	background-image:url("../i/bgs/bg_teal.jpg");
}

.citybg {
	background-color:#9aeddd;
	background-image:url("../i/bgs/bg_city.png");
}

#highlight.city_p {
	background-image: url("../i/bgs/profile_bg_city.jpg");
}

#highlight.jungle_p {
	background-image: url("../i/bgs/profile_bg_jungle.jpg");
}

#highlight.mountain_p {
	background-image: url("../i/bgs/profile_bg_mountain.jpg");
}

#highlight.mangrove_p {
	background-image: url("../i/bgs/profile_bg_mangrove.jpg");
}

#highlight.desert_p {
	background-image: url("../i/bgs/profile_bg_desert.jpg");
}

/* accordions */

.acity {
		background-image:url("../i/bgs/btn_bg_city.png");
	}

.adesert {
		background-image:url("../i/bgs/btn_bg_desert.png");
	}

.amangrove {
		background-image:url("../i/bgs/btn_bg_mangrove.png");
	}

.ajungle {
		background-image:url("../i/bgs/btn_bg_jungle.png");
	}

.amountain {
		background-image:url("../i/bgs/btn_bg_mountain.png");
	}


/* bubble avatars */

.bbldesert {
	background-image:url("../i/bgs/bubl_icon_bg_desert.svg");
}
.bblmangrove {
	background-image:url("../i/bgs/bubl_icon_bg_mangrove.svg");
}
.bblmountain {
	background-image:url("../i/bgs/bubl_icon_bg_mountain.svg");
}
.bbljungle {
	background-image:url("../i/bgs/bubl_icon_bg_jungle.svg");
}





.desert {
	background-color:#f5e7db;
}

.mountain {
	background-color:#d9e9ee;
}

.jungle {
	background-color:#c1eeb8;
}

.mangrove {
	background-color:#9df1ff;
}

.ship {
	background-color:#82f5f9;
}


.city {
	background-color:#d9fcf5;
}

.deserticon {
	background-color:#e7c9b2;
}

.mountainicon {
	background-color:#9dc5d3;
}

.jungleicon {
	background-color:#6edb9e;
}

.mangroveicon {
	background-color:#5fe1eb;
}

.cityicon {
	background-color:#9aeddd;
}


.col-100 { /* special class to pickup the col-, but fill the row-group */
	width:100%;
}

.margin {/*special class to mimic a row-group (margin: 0 0.78125%) plus column (margin: 0 0.99206349%), to match margins */
	margin: 0 1.7578125%;
}

.blur-header-short {
	height: auto;
	background-color: #6a51c2;  /* 6657c4 for SVG? That's the sRGB color... */
}


.tn-sub {
	color:#C2B3F9;
	font-size:.895em;
	margin-top:3px;
	margin-bottom:5px;
	line-height:1.15em;
	display:block;
	font-weight:600;
}

/* ----- sections ----- */

#header {
	position:relative;
	background-color:#6a51c2;
/*	border-bottom:6px solid #5a41b2;*/
	}

#navbar {
	background-color:#6a51c2;
	min-width:980px; /* was 850 */
	position:relative;

}

#navbar:after {
  content: "";
  display: block;
  clear: both;
}

#nav {
	width:55%;
	display:inline-block;
	background-color:#6a51c2;
/*	margin:1% 10% 1% 1%;*/
	margin: 1% 10% 1% 2.5%;
	min-width:510px;
}


.rivets {
	border:none;
	margin:0;
	margin-top:-4px;
	padding:0;
	height:19px;
	width:100%;
	background-image: url("../i/common/rivet_border.png");
}

.fadeout {
	border:none;
	margin:0;
	padding:0;
	height:9px;
	width:100%;
	background-image: url("../i/common/blur_big.png");
}

.fadein {
	border:none;
	margin:0;
	padding:0;
	height:9px;
	width:100%;
	background-image: url("../i/common/blurin_big.png");
}

.fadefooter {
	border:none;
	margin:4em 0 0 0;
	padding:0;
	height:9px;
	width:100%;
	background-image: url("../i/common/blur_big_footer.png");
}



#footer {
	padding:0;
	margin:0;
	background-color:#00898e;
	color:#002526;
	font-family: 'Open Sans', Helvetica, Arial, sans-serif;
	font-size:.8125em;
	padding-bottom:80px;
	text-align:center;
	/*border-top:6px solid #5a41b2;*/
}

#footer p {
	color:#002526;
	margin-bottom:1em;
}

#footer a {
	color:#82f5f9;
}

#footer a:hover {
	color:white;
}

#footernav {
	color:#005a5d;
	margin-top:60px;
	margin-bottom:30px;
	text-align:center;
}

#footernav li {
	display:inline;
	line-height:1.5em;
}

#footernav li:after {
	content:"•";
	margin-left:0.5em;
	margin-right:0.25em;
}

#footernav li.end:after {
	content:none;
	margin-right:0;
}

#footernav li.newline:before {
	content:"\A";
	white-space: pre;
	margin-right:0;
}

#footernav li.last:after {
	content:none;
}

#footernav li:last-child:after {content:none;}

#wgbh {
	padding-bottom:40px;
	padding-top:50px;
	display:block;
	text-align:center;
}
#wgbh>a {
	display:block;
	margin-bottom:.75em;
}

span.fund {
	text-transform: uppercase;
	display:inline;
	vertical-align:middle;
}

#funders {
	padding-bottom:40px;
	width:100%;
	min-width:960px;
}

#funders a {
	display:inline-block;
	vertical-align:middle;
}


#funders img {
	margin:0 10px 0 10px;
	vertical-align:middle;
}

	#highlight {
		width:100%;
		max-height:290px;
		height:290px;
		background-color:#00898e;
/*		min-width:1024px;
		height:290px;

		max-width:1024px;
		height:290px;*/
		background-position:50% 0;
		background-repeat:no-repeat;
		/*background-size:152% auto;*/

	}

	.scroll { /* for homepage */
		background-attachment:fixed;
	}

	.navpoints {
		position:absolute;
		font-family: 'Dosis', Helvetica, Arial, sans-serif;
		font-weight:600;
		left:54%;
		top:11%;
		height:45%;
		padding-right:.5em;
		background-color:#311c78;
		padding-left:45%;
		padding-top:.3em;
		padding-bottom:.3em;
		text-transform: uppercase;
		font-size:0.8125em;
		color:#c2b3f9;
		text-align:left;
		line-height:1.35em;
	}

	.navpoints #navpts {
		font-size:1.69230769em;
		color:#5ebb36;
	}


	#content {
	}

	.headless {
		margin-top:2.5em;
	}

	.vspace {
		margin-top:30px;
	}

	#pe {
		position:absolute;
		right:4%;
		top:15px;
		width:9%;
	}


	#pe .btn-small {
		width:100%;
		text-align:center;
		margin:5px 0;
		padding: .321em .637em; /* 12/8  12/14 */
		text-transform: uppercase;
		height:auto;
	}


	.nav-icon {
		background-image: url("../i/common/bubble1_bg.svg");
	}

	.bubble2 {
		background-image: url("../i/common/bubble2_bg.svg");
	}

	.bubble3 {
		background-image: url("../i/common/bubble3_bg.svg");
	}

	.bigbubble {
		width:311px;
		position:relative;
		display:inline-block;
	}


	.bigbubble img {
		width:100%;
	}

	.bubbleshine {
		position:absolute;
		top:0;
		left:0;
	}

	#pbslogo {
		float:left;
		display:block;
		width:6%;
		margin-right:.5em;
		margin-top:.4em;
	}


	#plumlogo {
		display:block;
		float:left;
		width:19%;
		margin-top:6px;
		margin-bottom:-25px;
	}


	.callout-highlight {
		padding-top:3%;
		padding-bottom:3%;
		margin-bottom:0;
		margin-left:60%;
		text-align:center;
	}


	.callout-highlight .thumb-highlight {
		width:100%;
		margin-bottom:0;
	}

	.cast {
		margin-left:0;
		width:100%;
		text-align:center;
		padding:0;
		position:relative;
		margin-bottom:1em;
	}


	.cast .user-info {
		position:absolute;
		text-align:left;
		top:15%;
		left:0;
	}

	.user-info div {
		margin:0;
	}

	/* for user attribution */
.user-attr {
	position:relative;
	display:inline-block;
	width:20em;
	margin-left:.25em;
	margin-top:1.25em;
}

.userbubble {
	width:93px;
	position:relative;
}


.user-attr .username {
		position:absolute;
		font-family: 'Dosis', Helvetica, Arial, sans-serif;
		font-weight:600;
		left:60px;
		top:30%;
		height:30%;
		background-color:#311c78;
		padding-left:1.5em;
		padding-top:.25em;
		padding-right:.25em;
		font-size:1em;
		color:#fff;
		text-align:left;
		line-height:1em;
	}





	/* ACCORDION */
	.acc {
		-webkit-border-radius: 24px; /* 12/19 */
		-moz-border-radius: 24px;
		border-radius: 24px;
		background-repeat:no-repeat;
		-moz-box-shadow:    0px 4px 0px 0px rgba(0, 0, 0, 0.5);
		-webkit-box-shadow: 0px 4px 0px 0px rgba(0, 0, 0, 0.5);
		box-shadow:         0px 4px 0px 0px rgba(0, 0, 0, 0.5);
		overflow:hidden;
		margin:0 0 1em 0;
	}

	.acc-toggle>h2,.acc-toggle>h3 {
		padding-top:8px;
		margin-left:.5em;
		color:#fff;
		float:left;
	}

	.acc-toggle {
		display:block;
		width:100%;
		cursor:pointer;
		overflow:hidden;
	}

	.acc-toggle .acc-chevron {
		float:right;
		margin-right:.75em;
		margin-top:.75em;
	}

	.acc-open {
		width:100%;
		margin:0;
		padding:0 0 .5em 0;
	}

/* CAROUSEL */
.carousel {
		position:relative;
		overflow:hidden;
	}

	.carousel.static img {
		width:50%;
		display:inline;
		position:relative;
	}

	.carousel img.illus {
		position:relative;
		top:0;
	}

	.c_arrow {
		position:absolute;
		top:47%;
		width:10%;
		min-width:32px;
		background-repeat:no-repeat;
		background-size:contain;
	}

	.c_arrow img {
		width:100%;
	}

	.c_prev {
		left:1%;
	}

	.c_prev:hover {
		background-image:url("../i/common/carousel_arrow_left_100.svg");
	}

	.c_next {
		right:1%;

	}

	.c_next:hover {
		background-image:url("../i/common/carousel_arrow_right_100.svg");
	}


/* DRAWER */
	.d_drawer {
/*		width:100%; */
		display:block;
		border:2px solid rgba(0, 0, 0, 0.15);
		position:relative;
		margin-bottom:20px;
		min-width:950px;
	}

.d_desc {
	color:#666;
	margin:0 1em;
}

.userinfo {
	margin-left:.5em;
}

	.d_add {
		position:absolute;
		bottom:0;
		width:40%;
		text-align:center;
		background-color:#edeceb;
		padding-top:1em;
		right:0;
	}


	.d_title {
		display:inline-block;
		color:#fff;
		margin:0;
		padding:0;
		margin-top:.125em;
	}


	.d_detail {
		background-color:#faf9f8;
		/*transition: height 1s;
		-webkit-transition: height 1s;  Safari */
		margin-bottom:0px;
		position:relative;
	}

	.d_detail .blur-purple-sm {
		position:absolute;
		width:100%;
		top:0;
	}

	.d_detail>*.* {
		line-height:1em;
	}

	.d_pointer {
		bottom:0;
	/*	margin:0; */
		padding:0;
		top:-20px;
		position:absolute;
	}

	.d_pointer img {
		display:block;
		position:relative;
		margin:0 auto;
		padding:0;
	}

	.d_header {
		position:relative;
		text-align:center;
		height:3.5em;
	}

	.d_close {
		position:absolute;
		height:1.5em;
		left:.5em;
		top:.5em;
	}

	.d_pn {
		position:absolute;
		width:7em;
		top:.5em;
		right:.5em;

	}

	.d_next,.d_prev{
	/*	float:left;*/
		position:absolute;
		width:2.25em;
		height:2.25em;
		padding:0;
		top:-.1em;
	}


	.d_next {
	/*	margin-left:.5em;*/
		right:.4em;
	}

	.d_prev {
		left:.4em;
	}

	.d_next img,.d_prev img {
		width:80%;
		height:auto;
		margin-top:5px;
	}


	.d_info {
		display:block;
		width:40%;
		margin-top:1em;
		float:right;
		position:relative;

	/*	width:462px;  988-526 */

	}

	.d_img {
/*		height:526px;
		width:526px;
*/
		width:60%;

		min-width:568px;
		height:auto;
		margin:0;
		display:inline-block;
		vertical-align:middle;
		/*margin-left:3px;
		margin-bottom:-3px;*/
		/*margin-left:3px;*/
	}


	.d_ifra {
		height:526px;
		width:526px;
		/*margin-left:3px;*/
		display:inline-block;
		/*margin-left:3px;
		margin-bottom:-3px;*/
		margin-bottom:1em;
	}

	.d_badge {
		width:85px;
		height:96px;
		position:absolute;
		top:0;
		right:0;
	}



	/* STICKERS */

	#animalbuy {
		text-align:center;
		margin:0 auto;
	}
	/*
	.buy_arrow {
		width:30px;
		height:30px;
		vertical-align:middle;
	}*/

	.cost {
		color:#5ebc37;
		font-weight:bold;
		font-size:2.3125em;
	}

	.buyright {
		width:47%;
		float:left;
		text-align:left;
		margin-right:2%;
		margin-top:1.5%;
		margin-bottom:1.5%;
		padding-top:.5em;
	}

	.buyleft {
		width:47%;
		float:left;
		text-align:right;
		margin-right:2%;
		margin-top:1.5%;
		margin-bottom:1.5%;
		padding-top:.5em;
	}

	#animalinfo {
		font-family: 'Dosis', Helvetica, Arial, sans-serif;
	/*	margin:1em 0 0 0;*/
	}

	#animalstats {
	}

	#animaldesc {
		margin-bottom:1.5em;
	}

	#animalmore {
		clear:both;
		width:100%;
		background-color: #edeceb;
		position:relative;
	}

	#makeprofile {
		margin:1.5em 35%;
		display:inline-block;
		text-align:center;
		vertical-align:center;
		width:30%;
		position:relative;
	}

	#makeprofile .avatar {
		left:-15%;
		top:-.75em;
		position:absolute;
	}

	/*
	#makeprofile .userbubble {
		float:left;
		border:1px solid yellow;
		margin:0;
		height:40px;
	}
	*/

	dl.stat {
		font-size: 1em;
		width:100%;
	}

	dl.stat dt {
		font-weight:600;
		text-transform: uppercase;
		display:block;
		float:left;
		clear:both;
		margin-right:0;
		background-color: #6a51c2;
		color: white;
		padding:4px;
		margin-bottom:.2em;
		width:23%;
		font-size:1.1875em;
		min-height:23px;
		padding:6px 0 2px 6px;
	}

	dl.stat dd {
		display:block;
		float:left;
		background-color:#e1e0df;
		padding:4px 4px 4px 7px;
		width:65%;
		min-height:23px;
		color:#311c79;
		font-size:1.3125em;
		font-weight:500;

	}

	/* MISSION */

	.mbox {
		display:table;
		margin-bottom:2.5em;
		margin-top:2.5em;
/*		width:96%;*/
	}

	#missionbox {
		background-color:#FAF9F8;
		display:table-row;
	}

	#missionbox h3 {
		margin-bottom: 0.1em; margin-top: 0.1em;
	}

	.missiontype {
		font-size: 1.125em; /* 18/16 */
		background-color:#6A51C2;
		color:#fff;
		padding:3px;
		font-weight:normal;
		float:right;
		margin-top:10px;
	}

	.missionimg {
		width:24%;
		font-size:.1px;
		vertical-align:top;
		display:table-cell;

	}

	.missioninfo {
		vertical-align:top;
		display:table-cell;
		width:60%;
		min-width:60%;
		padding:0 1em;
	}

	.missionadd {
		display:table-cell;
		background-color:#edeceb;
		text-align:center;
		vertical-align:middle;
	}

	.missionadd .btn { margin-top: 0.75em; }



/* GAMES */

#game {
		margin-bottom:3em;
/*		border-radius:30px 0 30px 0; */
		top:4px;
		left:5px;
		position:relative;
		width:988px; /* was 1024x576 */
		height:556px;
	}


	#game>* {
		position:absolute;
	}


	#loading {
		font-family:'Dosis';
		width:30%;
		height:170px;
		font-size:1.5em;
		color:#fff;
		text-transform: uppercase;
		text-align:center;
		bottom:0;
		left:35%;
		background-image:url("../i/common/plink-loader_small.png");
		background-position:50% bottom;
		background-repeat:no-repeat;

	}

	#loading #spinner {
		position:absolute;
		width:100%;
		height:100%;
		background-image:url("../i/common/plink-loader_inner.gif");
		background-position:50% bottom;
		background-repeat:no-repeat;
	}

	#loading .text {
		width:70%;
		display:block;
		margin:0 auto;
		background-color:#665ac1; /* should hide */
		-webkit-border-radius: .632em; /* 12/19 */
		-moz-border-radius: .632em;
		border-radius: .632em;
		border:1px solid #665ac1;
		overflow:hidden;
		position:relative;
	}

	#loading .words {
		position:relative;
	}

	#loading #bar {
		background-color:#311B7A;
		width:0%;
		display:block;
		position:absolute;
		top:0;
		left:0px;
		-webkit-border-radius: .632em; /* 12/19 */
		-moz-border-radius: .632em;
		border-radius: .632em;
		border:1px solid #311B7A;
	}





	@media screen and (max-width: 1024px) and (1==0){
		#highlight {
		 /*fixed*/
			background-position:-290px 0;
		/* fluid */

			background-position:50%;
			background-size:160% auto;
			min-height:100%;
			max-height:100%;
			height:100%;*/
		}

		.boxedin {
			min-width:640px;
		}


		#navbar {
			min-width:100%;
		}

		#nav {
			width:65%;
			min-width:0;
		}

		.gnav {
			width:15%;
			vertical-align:top;
		}

		.nav-icon {
			background-size:300%;
		}

		#plumlogo {
			width:15%;
		}


		.missionimg {
			height:100%;
			overflow:hidden;
		}

		.missionimg img{
			height:100%;
			width:auto;
			max-width:200%;
			display:block;
		}


	}


	#pbskids-comscore-video-beacon {
		position:absolute;
	}


	/*   messing around    */

	.multisize .col-3:nth-child(4n+1) {
		clear:left;
	}


	.multisize .col-4:nth-child(3n+1) {
		clear:left;
	}