/* GREEN: 00a78d */

a, a:link, a:visited
{
	color: #00a78d;
}
	a:hover {
		transition-duration: .2s;
		color: #006e5d;
	}

.footer a,
.footer-links-left a
{
	color: white;	
}

.footer .footer-right,
.footer-right
{
	margin-top: 16px;
}

button,
a.button, 
.button
{
	background: none repeat scroll 0 0 #00A78D;
	border: 1px solid #02957e;
	border-radius: 5px;
	font-family: sans-serif;
	color: #FFFFFF;
	display: inline-block;
	zoom: -1;
	height: 32px;
	min-width: 80px;
	padding: 0 14px;	
	text-decoration: none;
	box-sizing: border-box;
}

	a.button
	{
		padding-top: 5px;	
	}

	button:hover,
	.button:hover
	{
		background: #192324;
		border: 1px solid #334648;		
	}
	

input[type="text"],
input[type="email"],
input.text,
input.email
{
	border-radius: 3px;
	display: block;
	
	font-family: Courier;
	font-size: 16px;
	color: gray;
	padding: 8px;
	border: 1px solid gray;
	margin-bottom: 8px;	
}

label
{
	display: inline-block;
	zoom: -1;
	font-family: Intro, Arial, sans-serif;
	font-weight: bold;
	font-size: 14px;
	color: #00a78d;	
	width: 170px;
}

#overlay
{
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	background: url(../images/overlay-black.png);	
	display: none;
	z-index: 999;
}

#modal {
	position: fixed;
	left: 50%;
	top: 50%;
	padding: 10px 24px 54px 34px;
	border: 15px solid #00A78D;
	background: white;
	box-shadow: 0px 2px 12px rgba(0,0,0,0.5);
	display: none;
	z-index: 999;	
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	width: 500px;
	height: 500px;
	margin-left: -250px;
	margin-top: -250px;
}

#modal iframe
{
	border: none;	
	display: block;
	width: 100%;
	overflow: none;
}

#modal .close
{
	width: 32px;
	height: 32px;	
	background-image: url(../images/tab-bubble.png);
	background-position: center top;
	font-weight: bold;
	font-size: 20px;
	color: #00a78d;
	cursor: pointer;
	position: absolute;
	top: 15px;
	right: 15px;
	text-align: center;
	z-index: 9999;
}

	#modal .close span
	{
		display: inline-block;
		font-family: Verdana;
		font-weight: normal;
		margin: 0;
	}

#popup {
	position: fixed;
	left: 50%;
	top: 50%;
	#padding: 10px 24px 54px 34px;
	#border: 15px solid #00A78D;
	background: white;
	box-shadow: 0px 2px 12px rgba(0,0,0,0.5);
	display: none;
	z-index: 999;	
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	width: 500px;
	height: 500px;
	margin-left: -250px;
	margin-top: -250px;
}

#popup iframe
{
	border: none;	
	display: block;
	width: 100%;
	overflow: none;
}

#popup .close
{
	width: 32px;
	height: 32px;	
	background-image: url(../images/tab-bubble.png);
	background-position: center top;
	font-weight: bold;
	font-size: 20px;
	color: #00a78d;
	cursor: pointer;
	position: absolute;
	top: 15px;
	right: 15px;
	text-align: center;
	z-index: 9999;
}

	#popup .close span
	{
		display: inline-block;
		font-family: Verdana;
		font-weight: normal;
		margin: 0;
	}



.window h1,
.window h2,
.window h3
{
	font-family: 'Intro', Arial, sans-serif;
	margin-bottom: 12px;
	font-size: 24px;
	text-align: center;
}

.window h2
{
	text-align: left;
	font-size: 20px;	
}

.window h3
{
	text-align: left;	
	font-size: 16px;	
}


.window .scroller
{
	height: 300px;
	padding-right: 14px;
	text-align: justify;
	overflow-y: scroll;	
}

	.window .scroller p
	{
		margin-top: 0;
		line-height: 20px;
	}

	.window .scroller.avatar
	{
		height: 290px;	
	}

	.window .scroller.science
	{
		height: 280px;	
	}


#avatars img
{
	border: 8px solid black;
	margin-right: 12px;
	margin-bottom: 12px;	
	width: 76px;
	height: 69px;
	box-sizing: content-box;
}




.window .user
{
	border-top: 1px dashed gray;		
}

.window .user .add-friend
{
	float: right;	
	margin-top: 24px;
}

.window .user a.button
{
	padding-top: 7px;	
}

.window .user .avatar img
{
	float: left;
	margin-right: 24px;
}




#dashboard-header
{
	float: left;
	margin-right: 48px;	
}

#dashboard-container > div
{
	float: left;
	margin-right: 48px;	
	width: 250px;
}

#dashboard-info ul
{
	margin: 0;	
	padding: 0;
	margin-top: 24px;
}

#dashboard-info ul .button
{
	width: 200px;
	margin-bottom: 8px;	
}

#dashboard-header .choose-avatar img,
#dashboard .friend-avatar img
{
	border: 4px solid black;	
}

#dashboard .friend-avatar img
{
	float: left;	
	margin-right: 12px;
}


#dashboard #activity .items > div 
{
	margin-bottom: 12px;
}

	#dashboard #activity p
	{
		margin: 0;	
	}

	#dashboard #activity .items span
	{
		font-size: 14px;
		font-style: italic;	
		color: gray;
	}
	
	
#dashboard .puzzle-tile > div
{
	float: left;
}

#dashboard .puzzle-tile > div.nofloat
{
	float: none;	
	display: block;
	clear: both;
	padding-top: 2px;
}

#dashboard .puzzle-tile p
{
	display: block;	
}

#dashboard .puzzle-tile .puzzle-image-container a
{
	display: block;
}

	#dashboard .puzzle-tile .puzzle-image-container
	{
		font-size: 12px;	
		margin-right: 12px;
	}

	#dashboard .puzzle-tile .puzzle-image-container img
	{
		border: 4px solid black;	
	}

.wrapper {
	position: relative;
	z-index: 100;
}

.feature-one {
	z-index: 0;
	background-image: none;
}

.feature-two {
	z-index: 10;
	background-image: none;	
	background-position: 0 -48px;
}

.feature-three {
	z-index: 0;	
}

	.feature-three ul.assets li	{
		overflow: hidden;	
	}

.feature-four {
	height: 680px;
	z-index: 10;	
}

.feature-five {
	margin-top: -120px;
	position: relative;
	z-index: 30;
}



.content-main {
	position: relative; /* this helps with puzzle piece positioning on Asset page */
}

.logo img {
	width: auto;
}

.nav {
	position: relative;	
}


.nav-top-login ul {
	position: absolute;
	background: white;	
	padding: 12px;
	margin-top: 9px;
	box-shadow: 0 2px 5px rgba(0,0,0,0.5);
}

	.nav-top-login li {
		padding-bottom: 26px;	
	}

		.nav-top-login li:hover a {
			color: #00a78d;	
		}
		
		ul.nav-top-login li:first-child {
			margin: 0 10px 0 0;
		}	

	.nav-top-login label {
		color: #222;
		font-size: 14px;
		text-transform: uppercase;
	}
	
	.nav-top-login input {
		border: 1px solid #808080;
		border-radius: 3px;
		color: #808080;
		display: block;
		padding: 5px;
	}
	
	.nav-top-login input[type="submit"] {
		font-size: 12px;
		margin-top: 12px;
		margin-bottom: 0;
		width: 80px;
		height: 24px;
		float: right;
		background: gray;
		color: white;
	}
	
	.nav-top-login ul {
		display: none;
	}
	
	.nav-top-login > li:hover > ul {
		display: block;	
	}
		
		
.nav-social {
	position: absolute;
	z-index: 10;
	top: 72px;
	right: 40px;
	width: auto;
	margin: 0;	
}
	.twitter h1, .twitter h1 a {
		font-size: 18px;
		font-weight: normal;
	}
	
.nav-bottom ul {
	width: 100%;
}

.fb-like {
	margin-top: 0;
}

#user-box {
	margin-left: -10px;
}

	#user-box > div	{
		margin-top: -5px;
		display: inline-block;
		zoom: -1;
		float: left;
	}
	
	#user-box #account-avatar {
		width: 55px;
		height: 50px;
		margin: 0;
		padding: 0;
		overflow: hidden;
	/*	border:5px solid #192324;*/
	}
		#user-box #account-avatar img {
			width:55px;
			height:50px;
			margin: -5px 12px -2px 10px;
			padding: 0;
			position: relative;
			top: -2px;
			left: -2px;
		}

	#user-box ul.nav-top-login {
		margin-left: 0;
		/*margin-left: -25px; Once logged in, the name tucks under the avatar */
	}

#account-progress {
	font-size: 10px;
}

#account-progress a {
	color: white;
}

h3#account-collection {
	line-height: 0;
	margin: 0;
	padding: 0;
	display:inline-block;
	zoom: -1;
}

#account-collection-progress {
    background-image: url("../images/layout/collection-gradient.png");
    background-repeat: no-repeat;
    border: 1px solid white;
    height: 12px;
    width: 78px;
	margin: 0 16px;
	display:inline-block;
	zoom: -1;
	position: relative;
	top: 2px;
}

.header, .asset-header {
	height: auto;
	min-height: 286px;
}

.asset-title {
	height: auto;
	min-height: 115px;
}

.asset-title h1 {
	margin-bottom: -7px;
}

.btn-yeah {
	margin-top: 16px;
}

.btn-yeah span,
.btn-yeah a span {
	display: inline-block;
	zoom: -1;
	width: 62px;
	height: 31px;
	background: url(../images/btn-yeah.jpg);
	vertical-align: middle;
}

	.btn-yeah:hover span,
	.btn-yeah:hover a span {
		background-position: 0 -31px;
	}

.btn-yeah h3,
.btn-yeah a h3 {
	display: inline-block;
	zoom: -1;
	color: #00a78d;
	font-size: 18px;
	vertical-align: middle;
	margin: 5px 0 0 0;
	padding: 0;
}

	.btn-yeah:hover h3,
	.btn-yeah:hover a h3 {
		color: #222;
	}

	.btn-yeah.active h3	{
		margin: 5px 0 0 12px;
	}

.btn-yeah.active span,
.btn-yeah.active:hover span {
	background: url(../images/btn-yeah-checked.jpg);
}

.btn-yeah.active:hover h3 {
	color: #00a78d;
}

ul.assets {
	display: -webkit-box; /* IMPORTANT : fix for iPad */
	margin: 0;
	margin-left: -4px;
}

	ul.assets li {
		height: 245px;
		/*
		margin-bottom: 0;
		padding-bottom: 0;
		*/
		overflow: hidden;
	}
	
		ul.assets li h1 {
			position: absolute;
			padding: 20px 18px 8px 18px;
			z-index: 20;
		}
		
		.feature-three ul.assets li h1 {
			top: 95px;
		}
		
	
		ul.assets li h1.truncate {
			display: block;
			width: 100%;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
		}
		
			ul.assets li h1.truncate:hover {
				overflow: inherit;
				white-space: normal;
				text-overflow: clip;
				background: #D3D3D3;
				box-shadow: 0 2px 4px rgba(0,0,0,0.5);
			}
		
				ul.assets li h1.truncate:hover + p {
					/*margin-top: 200px;*/
				}
	
		ul.assets li p,
		.feature-three ul.assets li p {
			font-size: 13px;
			line-height: 18px;
			margin-top: 50px;
		}
		
		.feature-three ul.assets li p {
			position: absolute;
			margin-top: 145px;
			z-index: 10;
		}		

	.right-col ul.assets li.next {
		background-position: center 0;
		box-shadow: none;
	}

	.right-col ul.assets li.next:hover {
		background-position: center -245px;
	}

	ul.assets li a {
		float: left; /*  makes safari behave */
		display: block;
	}

	ul.assets li .award {
		position: absolute;
		top: 4px;
		right: 4px;
		width: 50px;
		height: 50px;
	}

ul.assets .asset-wrapper {
	height: 103px;
	overflow: hidden;
}

	/* hack for Chrome/Safari - if one item, width is too narrow */
	ul.assets li.one {
		width: 217px;
	}

	ul.assets li:last-child.end	{
		background: #EBE9E9 url('../images/btn-go.png') no-repeat right bottom;
	}

	ul.assets li:last-child.end:hover {
		background-color: #D3D3D3;
	}

	ul.assets a	{
		display: block;
		width: 100%;
		height: 100%;
	}

#award {
	width: 220px;
	height: 220px;
	float: left;
	margin: 24px 0 0 24px;
}

.about-the-science .fulltext {
	display: none;	
}

.recommendations-left-arrow {
	visibility: hidden;
}
/*
.title > h1 {
	padding-left: 274px;
	font-size: 50px;
	margin: 12px 0;
	width: 75%;
	float: right;
	clear: both;
}
*/

.left-col-filter {
	padding-top: 0;
	position: relative;
}

.left-col-filter ul {
	margin-top: 56px;
}

.left-col-filter ul li {
	line-height: 16px;
	margin: 0 0 16px 0;
}

.left-col-filter ul li.all {
	font-size: 20px;	
}

/*
ul.tabs li a {
	display: block;
	height: 24px;
	width: 24px;
	margin: 3px 0 0 131px;
	text-align: center;	
	font-weight: normal;
}
*/

ul.tabs li {
	padding: 0;
}

ul.tabs li a {
	margin: 0;
	height: 100%;
	width: 100%;
	display: block;
}

ul.topics a {
	color: black;
}

	ul.topics a:hover,
	ul.topics li.active a {
		color: #00A78D;
	}

.left-col-filter form {
	overflow: hidden;
	width: 264px;
	margin-top: 10px;
	height: 40px;
	padding: 0;
}

.left-col-filter select {
	font-family: 'Intro', arial, sans-serif;
	font-size: 20px;
	width: 300px;
	height: 47px;
	padding: 10px 10px 10px 0;
	border: 0;
	background: url(../images/dropdown-arrow.png) no-repeat 230px center;
	-webkit-appearance: none;
	cursor: pointer;
}

	.left-col-filter select.active	{	color: #00a78d;	}
	.left-col-filter select option	{	color: #222;		}
	.left-col-filter select option.active	{	color: #00a78d;	}

.right-col {
	width: 75%;
}

.right-col ul.tabs li.tab-video,
.right-col ul.tabs li.tab-games,
.right-col ul.tabs li.tab-comics,
.right-col ul.tabs li.tab-experiments {
	position: relative;	
	background-position: center bottom;	
}

.right-col ul.tabs li.tab-video .bubble,
.right-col ul.tabs li.tab-games .bubble,
.right-col ul.tabs li.tab-comics .bubble,
.right-col ul.tabs li.tab-experiments .bubble {
	background-position: center bottom;		
}

.right-col ul.tabs li.tab-video.active,
.right-col ul.tabs li.tab-games.active,
.right-col ul.tabs li.tab-comics.active,
.right-col ul.tabs li.tab-experiments.active,
.right-col ul.tabs li.tab-video.active .bubble,
.right-col ul.tabs li.tab-games.active .bubble,
.right-col ul.tabs li.tab-comics.active .bubble,
.right-col ul.tabs li.tab-experiments.active .bubble {
	background-position: center top;
}

.right-col ul.tabs li.tab-video.active:hover,
.right-col ul.tabs li.tab-games.active:hover,
.right-col ul.tabs li.tab-comics.active:hover,
.right-col ul.tabs li.tab-experiments.active:hover,
.right-col ul.tabs li.tab-video.active:hover .bubble,
.right-col ul.tabs li.tab-games.active:hover .bubble,
.right-col ul.tabs li.tab-comics.active:hover .bubble,
.right-col ul.tabs li.tab-experiments.active:hover .bubble {
	background-position: center bottom;
}

.right-col ul.tabs li.tab-video:hover,
.right-col ul.tabs li.tab-games:hover,
.right-col ul.tabs li.tab-comics:hover,
.right-col ul.tabs li.tab-experiments:hover,
.right-col ul.tabs li.tab-video:hover .bubble,
.right-col ul.tabs li.tab-games:hover .bubble,
.right-col ul.tabs li.tab-comics:hover .bubble,
.right-col ul.tabs li.tab-experiments:hover .bubble {
	background-position: center top;
}

.right-col ul.tabs li .bubble {
	width: 32px;
	height: 32px;	
	background-image: url(../images/tab-bubble.png);
	background-position: center top;		
	position: absolute;
	top: 50px;
	right: 25%;
	padding: 6px 0 0 0;
	text-align: center;
}

.right-col ul.tabs li span.count {
	color: #00A78D;
	font-family: 'Intro',arial,sans-serif;
	font-size: 15px;
	font-weight: normal;
	text-decoration: none;
}

.content-main.account label,
.window label {
	display: inline-block;
	zoom: -1;
	font-family: Intro, Arial, sans-serif;
	font-weight: bold;
	font-size: 14px;
	color: #00a78d;
	width: 170px;
}

	.window .login label {
		display: block;
		zoom: 0;
		width: auto;
	}

	.content-main.account .noLabel label,
	.window .noLabel label {
		width: auto;
	}

	.content-main.account .ctrlHolder .radios {
		display: inline-block;
		zoom: -1;
	}
	
		.content-main.account .ctrlHolder .radios label {
			width: 80px;
		}

		.content-main.account .ctrlHolder .radios label input {
			margin-right: 4px;
		}

	.content-main.account input[type="text"],
	.content-main.account input[type="password"],	
	.content-main.account input[type="date"],		
	.window input[type="text"], 
	.window input[type="password"] {
		font-family: Courier;
		font-size: 16px;
		color: gray;
		padding: 8px;
		border: 1px solid gray;
		border-radius: 5px;
		margin-bottom: 8px;
		display: inline-block;
		zoom: -1;
	}

		.window .login input[type="text"],
		.window .login input[type="password"] {
			width: 90%;
		}

	.content-main.account input.delete_btn {
		font-family: Arial, sans-serif;
		font-size: 16px;
		color: white;
		padding: 0 16px;
		box-sizing: border-box;	
	}
	
	.content-main.account .formHint	{
		font-size: 12px;
		font-style: italic;
		color: #777;
	}

.content-main.account ul {
	list-style: none;
}

.content-main.admin input[type="submit"] {
	background: none repeat scroll 0 0 #00A78D;
	border: 1px solid #808080;
	border-radius: 5px;
	color: #FFFFFF;
	height: 32px;
	min-width: 80px;
	padding: 0 14px;
}

	.content-main.admin input[type="submit"]:hover {
		background: gray;
	}

.window .login .login-error {
	color: red;
	font-style: italic;	
}

.template-AssetHolder a#puzzle-piece {
    background: url("../images/layout/puzzle-piece.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
    border-left: 10px solid #ffdf65;
    display: none;
    height: 100px;
    padding: 0 30px;
	margin-left: 30px;
    position: absolute;
	top: 10px;
	z-index: 1;
    width: 250px;
	border-radius: 3px;
}

.template-AssetHolder a#puzzle-piece:hover {
	background-position: 0 -109px;
	transition-duration: 0s;
}

.template-AssetHolder #puzzle-piece span {
	display: none;
}

.template-Account-puzzle body {
    background: url("../images/template-AssetHolder-collect/puzzle.png") no-repeat scroll -5px 31px;
}

.template-Account-puzzle p {
	margin-left: 140px;
}

#security-login #Remember label {
	width: auto;
	margin-bottom: 12px;
}


/** UNITY STUFF ***/

.template-AssetHolder .asset .type-unity3d #UnityPrompt {
	width: 800px;
	height: 500px;
	padding-top: 220px;
	background: url("../images/template-AssetHolder/get-unity3d.jpg") no-repeat transparent 50% 50%;
}

#UnityPrompt img {
    width: 20%;
}

/** UNITY STUFF ***/


.did-you-know img {
	float: left;
	margin-right: 24px
}

	.did-you-know .description h1,
	.did-you-know .description h2 {
		font-size: 16px;
		color: white;
	}

	.did-you-know .description p {
		color: white;
		font-size: 15px;
		margin: 0;
		margin-top: 5px;
		line-height: 18px;
		font-family: sans-serif;
	}


@media screen and (max-width: 1300px) {
	
	.logo {
		display: none;
	}
	
	.logo-rectangle	{
		background: url(../images/wonderville-logo-rectangle.gif) no-repeat bottom center;
		float: left;
		width:27%;
		height: 101px;
		display: block;
		overflow: hidden;
	}
		.logo-rectangle	img {
			width: 100%;
			height: auto;
		}	
			
	ul.assets {
		/*background: purple;	*/
		margin-left: -4px;
	}

	ul.assets li {
		margin: 0 0 1.8rem 1px;
		width: 24.5%;
	}

	.footer-right p, .footer .footer-right p {
		font-size: 14px;
		line-height: 1.6;
	}

	.footer-right img, .footer .footer-right img {
		width: 45%;
	}
	
	.template-AssetHolder .asset .type-unity3d #UnityPrompt,
	#unity3dObject embed {
		width: 750px;	
	}	
}

@media screen and (max-width: 1250px) {
		ul.assets li {
		margin: 0 0 1.8rem 1px;
		width: 32.5%;
	}
	
	.template-AssetHolder .asset .type-unity3d #UnityPrompt,
	#unity3dObject embed {
		width: 750px;	
	}	
}

@media screen and (max-width: 1200px) {
	
	ul.assets	{
		/*background: blue;	*/
		margin-left: -4px;		
	}

	ul.assets li {
		margin: 0 0 1.8rem 1px;
		width: 32.5%;
	}

	.left-col-filter select {
		background-position: 200px center;
	}

	.footer-right p, .footer .footer-right p {
		font-size: 14px;
		line-height: 1.6;
	}

	.footer-right img, .footer .footer-right img {
		width: 48%;
	}
	
	.template-AssetHolder .asset .type-unity3d #UnityPrompt,
	#unity3dObject embed {
		width: 700px;	
	}	
}


@media screen and (max-width: 1100px) {
	ul.assets	{
		/*background: green;*/
	}

	ul.assets li {
		margin: 0 0 1.8rem 1px;
	}

	.nav-bottom ul li a h3 {
		font-size: 16px;
	}

	.footer-right p, .footer .footer-right p {
		font-size: 14px;
		line-height: 1.6;
	}

	.footer-right img, .footer .footer-right img {
		width: 45%;
	}
	
	.template-AssetHolder .asset .type-unity3d #UnityPrompt,
	#unity3dObject embed {
		width: 700px;	
	}
}

@media screen and (max-width: 1000px) {
	ul.assets	{
		/*background: yellow;	*/
	}
	
	.template-AssetHolder .asset .type-unity3d #UnityPrompt,
	#unity3dObject embed {
		width: 625px;	
	}	
}

@media screen and (max-width: 900px) {
	.logo-rectangle	{
		background: url(../images/wonderville-logo-W.gif) no-repeat bottom center;
	}
		
	ul.assets	{
		/*background: red;*/
	}
	
	ul.assets li {
		margin: 0 0 1.8rem 3px;		
		width: 32.25%;
	}	
	
	.left-col-filter select {
		background-position: 150px center;
	}

	#frmCategory,
	#frmGrade {
		width: 260px;
	}
	
	#frmCategory select,
	#frmGrade select {
		width: 300px;
		font-size: 15px;
		padding-top: 16px;
	}
	
	.template-AssetHolder .asset .type-unity3d #UnityPrompt,
	#unity3dObject embed {
		width: 100%;	
	}	
}

@media screen and (max-width: 850px) {
		ul.assets li {
		margin: 0 0 1.8rem 1px;
		width: 49.25%;
	}
}