@import url('font.css'); /* important, must be on the first line above all comments */

/*! HTML5 Boilerplate v5.2.0 | MIT License | https://html5boilerplate.com/ */

/*
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */

/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */

html {
    color: #222;
    font-size: 1em;
    line-height: 1.4;
}

/*
 * Remove text-shadow in selection highlight:
 * https://twitter.com/miketaylr/status/12228805301
 *
 * These selection rule sets have to be separate.
 * Customize the background color to match your design.
 */

::-moz-selection {
    background: #b3d4fc;
    text-shadow: none;
}

::selection {
    background: #b3d4fc;
    text-shadow: none;
}

/*
 * A better looking default horizontal rule
 */

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

/*
 * Remove the gap between audio, canvas, iframes,
 * images, videos and the bottom of their containers:
 * https://github.com/h5bp/html5-boilerplate/issues/440
 */

audio,
canvas,
iframe,
img,
svg,
video {
    vertical-align: middle;
}

/*
 * Remove default fieldset styles.
 */

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

/*
 * Allow only vertical resizing of textareas.
 */

textarea {
    resize: vertical;
}

/* ==========================================================================
   Browser Upgrade Prompt
   ========================================================================== */

.browserupgrade {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
}

/* ==========================================================================
   Author's custom styles
   ========================================================================== */
   
body {
		font-family: Frutiger,'Open Sans', Verdana, sans-serif;
		margin: 0px;
		width: 100%;
		min-width: 350px;
		background: #042336 url('../img/content_bkrd_pattern-01.png');
	}
 
 /* Accessibility: Focus rect around all elements, only if a11y is turned on: */
 
.a11y-on :focus {
	outline-color: #EFB5A8;
}
.a11y-off :focus {
	outline: 0;
}
 

/* -------------
	Header
   -------------
*/
.header {
	/* Header pattern is specified in the customheader.css that is imported at the top */
	/*background: #174f7b url('../img/header-pattern-blue.png');*/
	min-height: 74px;
	width: 94%;
	margin-left: auto;
	margin-right: auto;
}	
	.header h1 {
		margin: 0px;
		color: white;
		font-family: HeinemannSchool, 'Open Sans', Verdana, sans-serif;
		font-weight: bold;
		padding-top: 0.5em;
		padding-bottom: 0.4em;
		cursor: default;
		margin-bottom: -30px; /* For small screens, when the search box and help button wrap below the title, remove the extra space (caused by their top margins) */
		display: inline-block; /* important, for it to share the same horizontal line as the right-panel */
	}
	

	.header .right-panel { /* contains the search box and the translation (Spanish) button, also the help button (which isn't turned on for the json data for MWI) */
		float: right;
		min-width: 350px; /* same width-width as for the top-bar, so that on mobile they will align nicely */
		width: 50%;
		text-align: right;
		margin-top: 1.2em;
	}
	
		.header .right-panel .search-box {

			background: #042336 url('../img/searchicon-01.png') no-repeat;
			background-position: 5px 5px; /* search icon position within the text-box */
			border-radius: 6px;
			margin-bottom: 1.0em; /* only appears when search box wraps to left-side for very small screen */
			padding: 5px;
			display: inline-block; /* important */
			border: solid 2px #2B6A94;
			text-align: left;
			margin-right: 10px; /* space between the search-box and the translation button */
			
			max-width: 300px;
			width: 70%; /* 50% of the right-panel */
			min-width: 225px;
			
		}
			.header .search-box input {
				background: transparent;
				border: transparent;
				color: white;
				margin: 5px 5px 5px 40px;
				width: 80%;
				font-size: 1.0em;
			}
			
		.header .right-panel .translation-button {
			background: #2B6A94;
			color: white;
			display: inline-block; /* sets the width of the button to the width of the text */
			padding: 0.3em 0.5em 0.3em 0.5em;
			border-radius: 4px;
			border: solid 2px transparent;
		}
			.header .right-panel .translation-button.skin-up-hovering, .header .right-panel .translation-button.skin-down-hovering, .header .right-panel .translation-button.skin-down {
				background: #042336;
				border: solid 2px #2B6A94;
			}
		
		/* Note: the help button is not specified in the json data right now, so it won't show up. But if it's added back in the data, these css rules should be close to what is needed. */
		.header .right-panel .help-button {
			background: #2B6A94 url('../img/helpicon_up.png') no-repeat;
			background-position: center center;
			color: white; 
			display: inline-block;
			padding: 0.3em 0.5em 0.3em 0.5em;		
			border-radius: 4px;
			border: solid 2px transparent;
			
			min-height: 1.4em;
			min-width: 1.25em;	
			margin-left: 10px;
			vertical-align: middle;
			
		}	
			.header .right-panel .help-button.skin-up-hovering, .header .right-panel .help-button.skin-down-hovering, .header .right-panel .help-button.skin-down {
				background: #042336 url('../img/helpicon_up.png') no-repeat;
				background-position: center center;
				border: solid 2px #2B6A94;
			}
		
	
	
	/* This only appears in the temporary 'coming soon' page for the math tools */
	.mathtools-fullpage-comingsoon {
		
		font-family: HeinemannSchool, 'Open Sans', Verdana, sans-serif;
		font-size: 3.8em;
		font-weight: normal;
		width: 120%;
		padding-top: 0.1em;
		padding-bottom: 0.1em;
		text-align: center;
		color: white;
		margin-left: -10%;
		/*background-color: rgba(167,169,171,0.6);*/
		background-color: rgba(88,88,92,0.5);
		  -webkit-transform: rotate(-30deg); /* Chrome, Safari, Opera */
    transform: rotate(-30deg);
	}
	
	
		
/* -------------------
	Top bar (View toggle and top horizontal menu)
   -------------------
*/
   
	.top-bar {
		background: #F05124;
		display: table; /* important - so the view-toggle and tier 2 menu will keep their height the same if they wrap (like 2 columns in the same row) */
		height: 3.5 em;
		min-width: 350px;
		border-top-left-radius: 4px;
		border-top-right-radius: 4px;
		
		width: 94%;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: -1px; /* to fix a browser rounding error in IE which causes a 1px line to appear at certain resolutions */
		
	}
	.view-toggle {	
		
		color: white;
		/*display: inline-block;*/
		display: table-cell; /* important - the first cell in the 'row' of view toggle and category menus */
		/*float: left;*/
		/*min-height: 54px;*/
		/* width: 76px;	*/
		width: 86px;
		padding-bottom: 10px;
		padding-left: 4px;
	}

		.view-toggle .view-list-button {
			background: transparent url('../img/viewtoggleicons_list.png') no-repeat;
			height: 30px;
			width: 30px;
			float: right;
			margin-top: 10px;
			/* margin-right: 10px; */
			margin-right: 7px;
		}
			.view-toggle .view-list-button:hover{
				opacity: 0.5;
			}
		
		.view-toggle .view-tile-button {
			background: transparent url('../img/viewtoggleicons_grid.png') no-repeat;
			height: 30px;
			width: 30px;
			/* margin-left: 5px; */
			margin-left: 14px;
			margin-top: 10px;
		}
			/*
			.view-toggle .view-tile-button:hover {
				opacity: 0.5;
			}
			*/
			.view-toggle .view-tile-button.skin-down, .view-toggle .view-tile-button.skin-down-hovering, .view-toggle .view-list-button.skin-down, .view-toggle .view-list-button.skin-down-hovering  {
				opacity: 1.0;
			}	
			.view-toggle .view-tile-button.skin-up-hovering,.view-toggle .view-list-button.skin-up-hovering {
				opacity: 1.0;
			}
			.view-toggle .view-tile-button.skin-up, .view-toggle .view-list-button.skin-up {
				opacity: 0.5;
			}				
			
	
	.tier2 .menu-name { display: none; }
	
	/*
		--------------------
		Category Menu
		--------------------
	*/
	
	.tier2 {
		
		display: table-cell; /* important - the second cell in the 'row' of view toggle and category menus */
		/*min-height: 54px;*/ /* must be the same as the height of the view-toggle if specified. However - taking it out because in IE it adds extra padding when this is specified */	
		
		vertical-align: top;
		padding-top: 0.3em;
		text-align: right; /* latest design has the category buttons right-aligned */

	}
		.tier2 .menu-item { /* default, used by "All" button, the other category buttons will be over-written by specific color-theme rules */

			background-color: transparent;		
			color: #F6915B; 
			
			display: inline-block;
			text-transform: uppercase;
			padding: 0px;			
			margin: 0em 0.2em 0.2em 0.2em;  /* note: the top margin is already accounted for in the parent div, this way if the buttons wrap they won't have double the spacing */

			height: 40px; /* to match the small hexagon image size */
			font-size: 1.3em;
			font-weight: 700;			
		}
		.tier2 .menu-item.skin-up-hovering {
			background-color: transparent; /* default color is blue (use by the 'All' menu item), over-written for the other categories further down */
			color: white;			
		}
		.tier2 .menu-item.skin-down, .tier2 .menu-item.skin-down-hovering {
			background-color: transparent; /* default color is blue (use by the 'All' menu item),  over-written for the other categories further down  */
			color: white;
			box-shadow: none;			
		}
		.tier2 .menu-item img {
			padding: 0px;
			float: left;
		}
		.tier2 .menu-item .title {
			display: inline-block;
			margin: 0.3em 1.0em 0em 1.3em;
		}

		/* In the latest design, every small unit hexagon selection are the same (rather than different icons for different units) */
		.tier2 .menu-item.category-orange.skin-up,.tier2 .menu-item.category-red.skin-up,.tier2 .menu-item.category-yellow.skin-up, .tier2 .menu-item.category-blue.skin-up, .tier2 .menu-item.category-green.skin-up {
			background: url('../img/games-smhexicon_up.png') no-repeat;
			background-position: center center;
			height: 40px;
		}
		.tier2 .menu-item.category-orange.skin-up-hovering,.tier2 .menu-item.category-red.skin-up-hovering,.tier2 .menu-item.category-yellow.skin-up-hovering, .tier2 .menu-item.category-blue.skin-up-hovering, .tier2 .menu-item.category-green.skin-up-hovering {
			background: url('../img/games-smhexicon_hover.png') no-repeat;
			background-position: center center;
			height: 40px;			
		}
		.tier2 .menu-item.category-orange.skin-down,.tier2 .menu-item.category-red.skin-down,.tier2 .menu-item.category-yellow.skin-down, .tier2 .menu-item.category-blue.skin-down, .tier2 .menu-item.category-green.skin-down {
			background: url('../img/games-smhexicon_down.png') no-repeat;
			background-position: center center;
			height: 40px;	
		}
		.tier2 .menu-item.category-orange.skin-down-hovering,.tier2 .menu-item.category-red.skin-down-hovering,.tier2 .menu-item.category-yellow.skin-down-hovering, .tier2 .menu-item.category-blue.skin-down-hovering, .tier2 .menu-item.category-green.skin-down-hovering {
			background: url('../img/games-smhexicon_down.png') no-repeat;
			background-position: center center;
			height: 40px;	
		}
		
		/* Since the "subjects" in the json data (Unit 1, 2, 3, etc...) no longer control the theme of the hexagons (setting a cssClass on them no longer corresponds to larger tiles - each asset has it's own class), this is a
			special class to put on the subjects, that will set the small hexagon style, but not affect theme coloring of the larger tiles. */
		
		.tier2 .menu-item.category-sm-hexagon.skin-up {
			background: url('../img/games-smhexicon_up.png') no-repeat;
			background-position: center center;
			height: 40px;
		}
		.tier2 .menu-item.category-sm-hexagon.skin-up-hovering {
			background: url('../img/games-smhexicon_hover.png') no-repeat;
			background-position: center center;
			height: 40px;			
		}
		.tier2 .menu-item.category-sm-hexagon.skin-down {
			background: url('../img/games-smhexicon_down.png') no-repeat;
			background-position: center center;
			height: 40px;	
		}
		.tier2 .menu-item.category-sm-hexagon.skin-down-hovering {
			background: url('../img/games-smhexicon_down.png') no-repeat;
			background-position: center center;
			height: 40px;	
		}
		
	.view-tile .content-area, .view-list .content-area {
		background: transparent;
		min-height: 700px;
		height: 100%;
		
		/*		
		width: 90%;
		margin-left: 40px;
		*/
		min-width: 350px; /* matches the min-width of the top-bar and header */
		width: 94%;
		margin-left: auto;
		margin-right: auto;

	}
	
	
	/*
		------------------------------
		Grade menu (ex. K - 12 black)
		------------------------------
	*/
	.tier1 {
		/*background: transparent url('../img/triangular_edge-01.png') bottom right;*/
		background-color: #F05124;
		float: left;
		margin: 0px;
		/*min-height: 400px;		*/
		padding-bottom: 0.8em;
		/* width: 80px; */ /* must be the same width as the viewtoggle */
		width: 90px; /* must be the same width as the viewtoggle */
		/*margin-right: 5px;*/
		z-index: 500;
	}
		/* ex. "Grade" */
		.tier1 .menu-name {
			color: white;
			/* border-bottom: solid 2px #333e73;*/
			/*text-align: center;*/
			text-transform: uppercase;
			padding: 0.5em 0.5em 0.3em 0.5em;		
			cursor: default;		
			text-align: left;
			/* margin-left: 5px; */ /* to left-align exactly with the view toggle icons and the page header */
            margin-left: 14px;
			margin-right: 5px;
		}
	
		/* ex. K, 1, 2, ... All */
		.tier1 .menu-item {
			color: #F6915B;
			font-weight: bold;
			font-size: 1.3em;
			padding: 0.1em;
			padding-bottom: 0.2em;
			text-align: center;
			margin-top: 0.2em;
			margin-bottom: 0.2em;
			border-left: solid 6px transparent;
			/*cursor: default;*/
			
			margin-left: 0.3em;
			/* margin-right: 0.6em; */
		}	
		.tier1 .menu-item.skin-up-hovering {
			border-left: solid 6px #fdc10f;
			color: white;
			
			/*background: rgba(255,255,255,0.1);*/
		}
		/* also the selected state style: */
		.tier1 .menu-item.skin-down, .tier1 .menu-item.skin-down-hovering {
			border-left: solid 6px #fdc10f;
			color: white;
			/*background: rgba(255,255,255,0.1);*/
		}
		.tier1 .menu-item.skin-up-disabled, .tier1 .menu-item.skin-up-disabled {
			cursor: default;
			color: #F47D4A;
			opacity: 0.6;
			border-left: solid 6px transparent;
		}	
	
	/*
		----------------------------
		Sub-Category menus
		----------------------------
	*/
	
	.tier3 {
		background: rgba(76, 94, 170, 0.6);
		display: block;
		margin: 0px;		
		width: 100%;
		padding-bottom: 0.5em;
		padding-left: 89px; /* to left align it exactly with the content tiles and the category menus */
		box-sizing: border-box; /* Includes the padding in the width calculation, this fixes an iPad safari issue - now it doesn't cause an extra 89px of layout discrepancy on the right side. */
		border-right: solid 10px #F05124;
	}
		.tier3 .menu-name {
			/* not-used currently */
			display: none;
		}
	
		.tier3 .menu-item {
			/*
			background-color: rgba(255,255,255,0.6);
			color: #042336;
			*/
			background-color: transparent;
			color: white;
			
			display: inline-block;
			text-transform: uppercase;
			/*padding: 0.3em;*/
			padding: 0.3em 0.3em 0.3em 0.6em;
			margin: 0.5em 0.5em 0em 0.5em; /* note: the bottom margin is already accounted for in the parent div, this way if the buttons wrap they won't have double the spacing */
			border-radius: 2px;
		}
		.tier3 .menu-item.skin-up-hovering {
			color: white;
		}
		.tier3 .menu-item.skin-down, .tier3 .menu-item.skin-down-hovering {
			color: white;
		}

	/* Slide animation: */

@-webkit-keyframes mwi-slide-anim {
  0%   { 
			-ms-transform: translate(0px,-100px); /* IE 9 */
		-webkit-transform: translate(0px,-100px); /* Safari */
				transform: translate(0px,-100px); 
				transform-style: flat;
		}
  100%   { 
			-ms-transform: translate(0px,0px); /* IE 9 */
		-webkit-transform: translate(0px,0px); /* Safari */
				transform: translate(0px,0px); 
				transform-style: flat;
		}
}
@-moz-keyframes mwi-slide-anim {
  0%   { 
			-ms-transform: translate(0px,-100px); /* IE 9 */
		-webkit-transform: translate(0px,-100px); /* Safari */
				transform: translate(0px,-100px); 
				transform-style: flat;
		}
  100%   { 
			-ms-transform: translate(0px,0px); /* IE 9 */
		-webkit-transform: translate(0px,0px); /* Safari */
				transform: translate(0px,0px); 
				transform-style: flat;
		}
}
@-o-keyframes mwi-slide-anim {
  0%   { 
			-ms-transform: translate(0px,-100px); /* IE 9 */
		-webkit-transform: translate(0px,-100px); /* Safari */
				transform: translate(0px,-100px); 
				transform-style: flat;
		}
  100%   { 
			-ms-transform: translate(0px,0px); /* IE 9 */
		-webkit-transform: translate(0px,0px); /* Safari */
				transform: translate(0px,0px); 
				transform-style: flat;
		}
}
@keyframes mwi-slide-anim {
  0%   { 
			-ms-transform: translate(0px,-100px); /* IE 9 */
		-webkit-transform: translate(0px,-100px); /* Safari */
				transform: translate(0px,-100px); 
				transform-style: flat;
		}
  100%   { 
			-ms-transform: translate(0px,0px); /* IE 9 */
		-webkit-transform: translate(0px,0px); /* Safari */
				transform: translate(0px,0px); 
				transform-style: flat;
		}
}

	/* end slide-down animation. */
		
		
	/*
		---------------------
			Div area that contains the asset tiles/list items (sibling to tier1 menu and tier3 menu)
		---------------------
	*/
		.item-area {
			margin-left: 90px; /* width of the grade menu (tier1) plus padding */
			
			/* 04/21: Remove padding to accomdate gwt-animations */
			/*
			padding-top: 10px;
			padding-bottom: 20px;
			*/
			
			/* margin-left: 70px; */ /*over-write, for v2 design */
			margin-left: 90px;
			
			/* purple frame border (design v2) */
			
			border-left: solid 10px #F05124;
			border-bottom: solid 10px #F05124;
			border-right: solid 10px #F05124;
			
			margin-bottom: 50px;
			background: #042336;
			
			font-size: 0; /* fix an inline-block issue in IE where eventually a 1px line starts appearing between the inline-block elements, so this essentially removes any extra whitespace */
		}
		.item-area > * {font-size: 16px;} /* fix an inline-block issue in IE where eventually a 1px line starts appearing between the inline-block elements, so this essentially removes any extra whitespace */
		
	/*
	-----------------------
		Content Items as Tiles
	-----------------------
	*/
	
	.view-tile .item {
		
		clear: both;
		color: #000000;
		display: inline-block;
		font-size: 1.2 em;
		position: relative;		
		width: 200px;
		height: 200px;		
		overflow: hidden;	
	}  
	.view-tile .list-item-info-grade {
		display: none; /* info that is only shown in the list-view. ex. G2 U1 */
	}
	.view-tile .list-item-info-unit {
		display: none; /* info that is only shown in the list-view. ex. G2 U1 */
	}
	
	
		.view-tile .item .skin-up-hovering {
			-ms-transform: scale(1.02,1.02); 
		-webkit-transform: scale(1.02,1.02); 
				transform: scale(1.02,1.02);
		}
	
		.view-tile .item .item-container {			
			background: url('../img/hexagon_mask-01.svg') no-repeat;
			background-size: 200px 260px;
			height: 200px;
			width: 200px;	
			text-align: center;
			display: table-cell; /* needed to vertically center the inner-content reliably using vertical-align: middle */
			vertical-align: middle; 
		}
			.category-icon {
				/* If there is an icon specified in the json file: ex. {"icon": "category_icons_tile_categoryorange.png",  .... Then this will show up nicely above the sub-category text. */
				margin-bottom: 10px;
			}
			.view-tile .hexagon-text-content {
				width: 150px; /* this is the width of the widest part of the hexagon shape */
				display: inline-block; /* needed for the vertical-align middle to work on the parent element to reliably center the hexagon text content */
				font-family: HeinemannSchool, 'Open Sans', Verdana, sans-serif;
				
			}
				.view-tile .hexagon-text-content .subcategory-string { /* first on the tile */
					font-size: 1.3em;
					color: white;
					/*position: relative;
					top: 25%;*/
					word-break: keep-all;
					line-height: 1.2em; /* keep any word-wrapped titles vertically close together */
					margin-left: 4px; /* to keep the text from touching the edges of the tile on longer titles */
					margin-right: 4px;
					margin-top: 10px; /* mostly to keep the tops of the titles from crashing with the Coming Soon label. */
				}
				.view-tile .hexagon-text-content .item-category {		
					font-size: 0.9em;
					display: block;
					text-align: center;
					color: rgba(0,0,0,0.3);
					text-transform: uppercase;
					font-weight: 700; /* bold */
					line-height: 2.0em; /* allows some vertical spacing between the category and its sub-category above it */
				}

	.view-tile .smaller-text .subcategory-string {
		font-size: 1em;
	}

	/* New 04/21: Sub-menu: */	
	.view-tile .sub-item-container {
        display: none !important;
	 }
	
	/* Call-out arrows on the pop-up menus: */
	.sub-item-popup.popup-arrow-right .popup-triangle {
		width: 0;
		height: 0;
		border-top: 10px solid transparent;
		border-bottom: 10px solid transparent;
		border-left: 10px solid white;
		float: right;
		margin-right: -22px;
		margin-top: 40px;
	}
	.sub-item-popup.popup-arrow-left .popup-triangle {
		width: 0;
		height: 0;
		border-top: 10px solid transparent;
		border-bottom: 10px solid transparent;
		border-right: 10px solid white;
		float: left;
		margin-left: -22px;
		margin-top: 40px;
	}
	
	
	.view-tile .item .disabled-notice {
		position: absolute;
		margin-top: 30px;
		width: 52%;
		padding: 0.5em;
		text-align: center;
		background: rgba(255,255,255,0.7);
		font-size: 0.8em;
		text-transform: uppercase;
		font-weight: bold;
		opacity: 0.4;
		box-shadow: 3px 3px 0px rgba(0,0,0,0.1);
		-webkit-box-shadow: 3px 3px 0px rgba(0,0,0,0.1);
		-moz-box-shadow: 3px 3px 0px rgba(0,0,0,0.1);
		
    -webkit-transform: rotate(-30deg); /* Chrome, Safari, Opera */
    transform: rotate(-30deg);

		opacity: 1.0;
		border-radius: 4px;
		
		/* To show the coming soon badge in the lower right corner: (comment out to have it appear upper left) */
		/*
		margin-top: 140px;
		margin-left: 170px;
		*/
	}

		.view-tile .skin-up-hovering .disabled-notice {
			background-color: #ffffff; /* This used to be opacity 0.5, but there's a strange issue in Firefox where the text disappears entirely */
			/*color: #2c72a0;*/
		}


    .view-tile .item .disabled-notice::after {
      content: "Coming Soon";
    }

    .es_US.view-tile .item .disabled-notice::after {
      content: "\00a1Ya Llega!";
    }

	/* New 04/21: Sub-menu: */
	.sub-item-popup	{
		background-color: white;
		border-radius: 5px;
		padding: 0.8em;
	}	
		.sub-item-popup .category-orange {
			color: #EE4023;
		}		
			.sub-item-popup .category-orange .sub-item{
				border-bottom: solid 1px rgba(237,65,35,0.5); /* same as hex above, orange as rgb */
				padding-top: 0.2em;
				padding-bottom: 0.2em;
			}
			.sub-item-popup .category-orange .sub-item:nth-last-child(2){ /* second last child (since the tab-index div is technically the last */
				border-bottom: solid 1px transparent;
				padding-top: 0.2em;
				padding-bottom: 0.2em;
			}
			.sub-item-popup .category-orange .sub-item.skin-up-hovering, .sub-item-popup .category-orange .sub-item.skin-down {
				color: #D83A1F;
			}
			
		.sub-item-popup .category-yellow {
			color: #FDB813;
		}		
			.sub-item-popup .category-yellow .sub-item{
				border-bottom: solid 1px rgba(253,184,19,0.5); /* same as hex above, yellow as rgb */
				padding-top: 0.2em;
				padding-bottom: 0.2em;
			}
			.sub-item-popup .category-yellow .sub-item:nth-last-child(2){ /* second last child (since the tab-index div is technically the last */
				border-bottom: solid 1px transparent;
				padding-top: 0.2em;
				padding-bottom: 0.2em;
			}	
			.sub-item-popup .category-yellow .sub-item.skin-up-hovering, .sub-item-popup .category-yellow .sub-item.skin-down {
				color: #E5A712;
			}
			
		.sub-item-popup .category-red {
			color: #EC008B;
		}		
			.sub-item-popup .category-red .sub-item{
				border-bottom: solid 1px rgba(236,0,139,0.5); /* same as hex above, red as rgb */
				padding-top: 0.2em;
				padding-bottom: 0.2em;
			}
			.sub-item-popup .category-red .sub-item:nth-last-child(2){ /* second last child (since the tab-index div is technically the last */
				border-bottom: solid 1px transparent;
				padding-top: 0.2em;
				padding-bottom: 0.2em;
			}	
			.sub-item-popup .category-red .sub-item.skin-up-hovering, .sub-item-popup .category-red .sub-item.skin-down {
				color: #D3057E;
			}
			
		.sub-item-popup .category-green {
			color: #A6CE38;
		}		
			.sub-item-popup .category-green .sub-item{
				border-bottom: solid 1px rgba(166,206,56,0.5); /* same as hex above, green as rgb */
				padding-top: 0.2em;
				padding-bottom: 0.2em;
			}
			.sub-item-popup .category-green .sub-item:nth-last-child(2){ /* second last child (since the tab-index div is technically the last */
				border-bottom: solid 1px transparent;
				padding-top: 0.2em;
				padding-bottom: 0.2em;
			}
			.sub-item-popup .category-green .sub-item.skin-up-hovering, .sub-item-popup .category-green .sub-item.skin-down {
				color: #96BB32;
			}
			
		.sub-item-popup .category-blue {
			color: #18BACE;
		}		
			.sub-item-popup .category-blue .sub-item{
				border-bottom: solid 1px rgba(24,186,206,0.5); /* same as hex above, blue as rgb */
				padding-top: 0.2em;
				padding-bottom: 0.2em;
			}
			.sub-item-popup .category-blue .sub-item:nth-last-child(2){ /* second last child (since the tab-index div is technically the last */
				border-bottom: solid 1px transparent;
				padding-top: 0.2em;
				padding-bottom: 0.2em;
			}	
			.sub-item-popup .category-blue .sub-item.skin-up-hovering, .sub-item-popup .category-blue .sub-item.skin-down {
				color: #14A9BB;
			}
			
		
	.entrancefadein {
		
			-webkit-animation: fadein 3s;
   -moz-animation: fadein 3s;
    -ms-animation: fadein 3s;
     -o-animation: fadein 3s;
        animation: fadein 3s; /* this comes last */
	
	}

	
	.view-tile .triangularcutout {
		width: 0px;
		height: 0px;
		display: inline-block;
		border-top: solid 20px #042336;
		border-left: solid 20px rgba(0,0,0,0.1);
		float: right;
	}

	.view-tile .item .descriptive-label {		
		display: block;
		/*color: #000000;*//* leave the color to the generic item, since it changes on hover */
		margin: 0.8em;	
		overflow: hidden;
		box-sizing: border-box;
		float:left;
		clear: both;
		margin-top: -6px;
		font-size: 1.1em;
	}
		
	/*
	-----------------------
		Content Items as List items
	-----------------------
	*/
	.view-list .item {

		clear: both;
		background: transparent;
		border-bottom: dashed 1px #333e73;

		color: white;
		display: inline-block;
		/*width: 890px;*/
		width: 95%;
		/*cursor: default;	*/
		/*margin-top: 5px 15px 15px 7px;*/
		margin-left: 12px;
	
-webkit-animation: fadein 0.8s;
   -moz-animation: fadein 0.8s;
    -ms-animation: fadein 0.8s;
     -o-animation: fadein 0.8s;
        animation: fadein 0.8s; /* this comes last */
		
	}  
	.view-list .triangularcutout {
		display: none;
	}
	
	/* New 04/21: Sub-menu */
	/*
	.view-list .sub-item-container:not(.expanded) {
		display: none !important;
	}
	*/
	.view-list .item.category-orange:not(.expanded) .sub-item-container, .view-list .item.category-red:not(.expanded) .sub-item-container, .view-list .item.category-yellow:not(.expanded) .sub-item-container, .view-list .item.category-green:not(.expanded) .sub-item-container, .view-list .item.category-blue:not(.expanded) .sub-item-container {
		display: none !important;
	}
	
	
	.view-list .item .disabled-notice {
			/*background-color: rgba(255,255,255,0.2);*/
			font-size: 0.8em;
		    position: absolute;
			padding: 0.5em;
			text-align: center;
			text-transform: uppercase;
			font-weight: bold;
			width: 100px;
			border: dotted 1px rgba(255,255,255,0.5);
			margin-left: 60%;
			margin-top: 0.3em;
			color: rgba(255,255,255,0.5);
			/* transform: rotate(-15deg); */
	}

	.view-list .skin-up-hovering .disabled-notice {
			color: #ffffff;
	}

    .view-list .item .disabled-notice::after {
      content: "Coming Soon";
    }

    .es_US.view-list .item .disabled-notice::after {
      content: "\00a1Ya Llega!";
    }
	
	/*
	.view-list .item .descriptive-label {		
		float: left;
		padding: 0.3em 0.5em 0.3em 0.5em;
		font-size: 1.2em;
	}*/
	.view-list .item .category-withicon {	
		float: right;
		padding: 0.5em;
	}
		/*
		.view-list .item .category-withicon img {	
			display: none;
		}*/
		/*
		.view-list .category-withicon .categorystr {
			color: #dee0e1;
			text-transform: uppercase;
			font-size: 1.0em;
		}
		*/
	
	/* new for design v2 */
	.view-list .category-icon { display: none; }
	
	.view-list .item-container { 
		display: table;  /* Used to nicely space out the 3 div elements aligned horizontally as each list item: ex: Title G1 U1 */
		width: 100% 
	}
	
	.view-list .hexagon-text-content { 
		display: inline-block; 
		display: table-row; /* Used to nicely space out the 3 div elements aligned horizontally as each list item: ex: Title G1 U1 */
	}
	
	.view-list .subcategory-string { /* main string text listed on the left (Games asset title) */
		font-size: 1.1em;
		padding: 0.5em;
		font-family: HeinemannSchool, 'Open Sans', Verdana, sans-serif;
		display: table-cell; /* works in combination with the item-container display being set to table. */
	}
	
	/* The "Unit 1" string is not show exactly the same in list-view as it is in tile view. So we need to use 2 different classes and hide one for each case */
	.view-list .item-category { 
		display: none;
	}
	
	.view-list .item-title {
		padding: 0.3em 0.5em 0.3em 0.5em;
		font-size: 1.2em;
		display: table-cell; /* works in combination with the item-container display being set to table. */
	}
	.view-list .list-item-info-grade {
		display: inline-block;
		color: #2A6A94;
		font-weight: normal;
		padding: 0.3em 0.5em 0.3em 0.5em;
		font-size: 1.0em;
		display: table-cell; /* works in combination with the item-container display being set to table. */
		text-align: right;
		width: 50px;
	}
	.view-list .list-item-info-unit {
		display: inline-block;
		color: #2A6A94;
		font-weight: normal;
		padding: 0.3em 0.5em 0.3em 0.5em;
		font-size: 1.0em;
		display: table-cell;
		text-align: right;
		width: 80px; /* need this cell to be a little wider to allow for games with multiple units: ex. U1,U2,U3 */
	}
	
/* 
	-----------------------
	Category color-coding for List view
	-----------------------
*/

.view-list .category-orange.expanded .sub-item-container {
	display: block;
	clear: both;
	color: #EE4023;	
	border-top: dashed 1px #333e73;
}
.view-list .category-yellow.expanded .sub-item-container {
	display: block;
	clear: both;
	color: #FDB813;	
	border-top: dashed 1px #333e73;
}
.view-list .category-red.expanded .sub-item-container {
	display: block;
	clear: both;
	color: #EC008B;	
	border-top: dashed 1px #333e73;
}
.view-list .category-blue.expanded .sub-item-container {
	display: block;
	clear: both;
	color: #18BACE;	
	border-top: dashed 1px #333e73;
}
.view-list .category-green.expanded .sub-item-container {
	display: block;
	clear: both;
	color: #A6CE38;	
	border-top: dashed 1px #333e73;
}


	.view-list .sub-item{
		margin-left: 30px;
		border-bottom: dashed 1px #333e73;
		line-height: 2.5em;
		vertical-align: middle;
	}
	.view-list .sub-item:last-child{
		margin-left: 30px;
		border-bottom: none;
	}
	
	
	/* Color theme specific - for list view carets: */
	
	/* orange */  /* also used for 'category-unit1' and 'category-unit6' */
	.view-list .category-orange .sub-item.skin-up-hovering, .view-list .category-unit1 .sub-item.skin-up-hovering, .view-list .category-unit6 .sub-item.skin-up-hovering { 
		color: #D83A1F;
	}
	.view-list .category-orange .subcategory-string:hover, .view-list .category-unit1 .subcategory-string:hover, .view-list .category-unit6 .subcategory-string:hover   {
		font-weight: 700;
		color: #D83A1F;
	}

	.view-list .category-orange .skin-up .subcategory-string, .view-list .category-orange .skin-up-hovering .subcategory-string , .view-list .category-orange .skin-down .subcategory-string, .view-list .category-orange .skin-down-hovering .subcategory-string, .view-list .category-unit1 .skin-up .subcategory-string, .view-list .category-unit1 .skin-up-hovering .subcategory-string , .view-list .category-unit1 .skin-down .subcategory-string, .view-list .category-unit1 .skin-down-hovering .subcategory-string, .view-list .category-unit6 .skin-up .subcategory-string, .view-list .category-unit6 .skin-up-hovering .subcategory-string , .view-list .category-unit6 .skin-down .subcategory-string, .view-list .category-unit6 .skin-down-hovering .subcategory-string {
		display: inline-block;
		background: transparent url('../img/listview-caret_orange.svg') no-repeat;
		background-position: right center;
		/*background-size: auto 30%;*/ /* percentage of the height - this doesn't work properly in IE */
		background-size: 1.2em 0.6em;
		padding-right: 1.3em; /* so the caret bkrd image does not crash with the text */
	}
		.view-list .category-orange.expanded .skin-up .subcategory-string, .view-list .category-orange.expanded .skin-up-hovering .subcategory-string, .view-list .category-orange.expanded .skin-down .subcategory-string, .view-list .category-orange.expanded .skin-down-hovering .subcategory-string, .view-list .category-unit1.expanded .skin-up .subcategory-string, .view-list .category-unit1.expanded .skin-up-hovering .subcategory-string, .view-list .category-unit1.expanded .skin-down .subcategory-string, .view-list .category-unit1.expanded .skin-down-hovering .subcategory-string, .view-list .category-unit6.expanded .skin-up .subcategory-string, .view-list .category-unit6.expanded .skin-up-hovering .subcategory-string, .view-list .category-unit6.expanded .skin-down .subcategory-string, .view-list .category-unit6.expanded .skin-down-hovering .subcategory-string{
			display: inline-block;
			background: transparent url('../img/listview-caret_orange-down.svg') no-repeat;
			background-position: right center;
			/*background-size: auto 30%;*/ /* percentage of the height - this doesn't work properly in IE */
			background-size: 1.2em 0.6em;
			padding-right: 1.3em; /* so the caret bkrd image does not crash with the text */
		}

	/* yellow: */
	.view-list .category-yellow .sub-item.skin-up-hovering {
		color: #E5A712;
	}
	.view-list .category-yellow .subcategory-string:hover {
		font-weight: 700;
		color: #E5A712;
	}

	.view-list .category-yellow .skin-up .subcategory-string, .view-list .category-yellow .skin-up-hovering .subcategory-string, .view-list .category-yellow .skin-down .subcategory-string, .view-list .category-yellow .skin-down-hovering .subcategory-string {
		display: inline-block;
		background: transparent url('../img/listview-caret_yellow.svg') no-repeat;
		background-position: right center;
		/*background-size: auto 30%;*/ /* percentage of the height - this doesn't work properly in IE */
		background-size: 1.2em 0.6em;
		padding-right: 1.3em; /* so the caret bkrd image does not crash with the text */
	}
		.view-list .category-yellow.expanded .skin-up .subcategory-string, .view-list .category-yellow.expanded .skin-up-hovering .subcategory-string , .view-list .category-yellow.expanded .skin-down .subcategory-string, .view-list .category-yellow.expanded .skin-down-hovering .subcategory-string{
			display: inline-block;
			background: transparent url('../img/listview-caret_yellow-down.svg') no-repeat;
			background-position: right center;
			/*background-size: auto 30%;*/ /* percentage of the height - this doesn't work properly in IE */
			background-size: 1.2em 0.6em;
			padding-right: 1.3em; /* so the caret bkrd image does not crash with the text */
		}
		
		/* red: */
	.view-list .category-red .sub-item.skin-up-hovering {
		color: #D3057E;
	}
	.view-list .category-red .subcategory-string:hover {
		font-weight: 700;
		color: #D3057E;
	}

	.view-list .category-red .skin-up .subcategory-string, .view-list .category-red .skin-up-hovering .subcategory-string , .view-list .category-red .skin-down .subcategory-string, .view-list .category-red .skin-down-hovering .subcategory-string {
		display: inline-block;
		background: transparent url('../img/listview-caret_red.svg') no-repeat;
		background-position: right center;
		/*background-size: auto 30%;*/ /* percentage of the height - this doesn't work properly in IE */
		background-size: 1.2em 0.6em;
		padding-right: 1.3em; /* so the caret bkrd image does not crash with the text */
	}
		.view-list .category-red.expanded .skin-up .subcategory-string, .view-list .category-red.expanded .skin-up-hovering .subcategory-string , .view-list .category-red.expanded .skin-down .subcategory-string, .view-list .category-red.expanded .skin-down-hovering .subcategory-string{
			display: inline-block;
			background: transparent url('../img/listview-caret_red-down.svg') no-repeat;
			background-position: right center;
			/*background-size: auto 30%;*/ /* percentage of the height - this doesn't work properly in IE */
			background-size: 1.2em 0.6em;
			padding-right: 1.3em; /* so the caret bkrd image does not crash with the text */
		}
		
		/* blue: */
	.view-list .category-blue .sub-item.skin-up-hovering {
		color: #14A9BB;
	}
	.view-list .category-blue .subcategory-string:hover {
		font-weight: 700;
		color: #14A9BB;
	}

	.view-list .category-blue .skin-up .subcategory-string, .view-list .category-blue .skin-up-hovering .subcategory-string , .view-list .category-blue .skin-down .subcategory-string, .view-list .category-blue .skin-down-hovering .subcategory-string {
		display: inline-block;
		background: transparent url('../img/listview-caret_blue.svg') no-repeat;
		background-position: right center;
		/*background-size: auto 30%;*/ /* percentage of the height - this doesn't work properly in IE */
		background-size: 1.2em 0.6em;
		padding-right: 1.3em; /* so the caret bkrd image does not crash with the text */
	}
		.view-list .category-blue.expanded .skin-up .subcategory-string, .view-list .category-blue.expanded .skin-up-hovering .subcategory-string , .view-list .category-blue.expanded .skin-down .subcategory-string, .view-list .category-blue.expanded .skin-down-hovering .subcategory-string{
			display: inline-block;
			background: transparent url('../img/listview-caret_blue-down.svg') no-repeat;
			background-position: right center;
			/*background-size: auto 30%;*/ /* percentage of the height - this doesn't work properly in IE */
			background-size: 1.2em 0.6em;
			padding-right: 1.3em; /* so the caret bkrd image does not crash with the text */
		}		
		
		/* green: */
	.view-list .category-green .sub-item.skin-up-hovering {
		color: #96BB32;
	}
	.view-list .category-green .subcategory-string:hover {
		font-weight: 700;
		color: #96BB32;
	}

	.view-list .category-green .skin-up .subcategory-string, .view-list .category-green .skin-up-hovering .subcategory-string, .view-list .category-green .skin-down .subcategory-string, .view-list .category-green .skin-down-hovering .subcategory-string {
		display: inline-block;
		background: transparent url('../img/listview-caret_green.svg') no-repeat;
		background-position: right center;
		/*background-size: auto 30%;*/ /* percentage of the height - this doesn't work properly in IE */
		background-size: 1.2em 0.6em;
		padding-right: 1.3em; /* so the caret bkrd image does not crash with the text */
	}
		.view-list .category-green.expanded .skin-up .subcategory-string, .view-list .category-green.expanded .skin-up-hovering .subcategory-string , .view-list .category-green.expanded .skin-down .subcategory-string, .view-list .category-green.expanded .skin-down-hovering .subcategory-string{
			display: inline-block;
			background: transparent url('../img/listview-caret_green-down.svg') no-repeat;
			background-position: right center;
			/*background-size: auto 30%;*/ /* percentage of the height - this doesn't work properly in IE */
			background-size: 1.2em 0.6em;
			padding-right: 1.3em; /* so the caret bkrd image does not crash with the text */
		}			
	
/* 
	-----------------------
	Category color-coding for Tile view
	-----------------------
*/

.view-tile .long-title .subcategory-string {
	font-size: 1.1em;
	margin-top: 15px;
}

/* category-red */
.view-tile .content-area .item.category-red {
	/*background: #EC008B;*/ /* Note: The only reason we are using a stretched image color, rather than just the hex value is because of a strange iOS sub-pixel hairline border bug. This was the only workaround. */
	background: url('../img/hexcolor_red.png') no-repeat;
	background-position: 2px 2px;
	background-size: 95% 95%;
}
	.view-tile .content-area .item.category-red.skin-up-hovering {
		background: #b01116;
		color: white;
	}
	
/* category-orange */ /* also used for: category-unit1, category-unit6 */	
.view-tile .content-area .item.category-orange, .view-tile .content-area .item.category-unit1, .view-tile .content-area .item.category-unit6 {
	/*background: #EE4023;*/ /* Note: The only reason we are using a stretched image color, rather than just the hex value is because of a strange iOS sub-pixel hairline border bug. This was the only workaround. */
	background: url('../img/hexcolor_orange.png') no-repeat;
	background-position: 2px 2px;
	background-size: 95% 95%;
}
	.view-tile .content-area .item.category-orange.skin-up-hovering, .view-tile .content-area .item.category-unit1.skin-up-hovering, .view-tile .content-area .item.category-unit6.skin-up-hovering {
		background: #c5351b;
		color: white;
	}

/* category-green */
.view-tile .content-area .item.category-green {
	/*background: #A6CE38;*/ /* Note: The only reason we are using a stretched image color, rather than just the hex value is because of a strange iOS sub-pixel hairline border bug. This was the only workaround. */
	background: url('../img/hexcolor_green.png') no-repeat;
	background-position: 2px 2px;
	background-size: 95% 95%;
}
	.view-tile .content-area .item.category-green.skin-up-hovering {
		background: #96BB32;
		color: white;
	}
	.view-tile .content-area .item.category-green.skin-down,.view-tile .content-area .item.category-green.skin-down-hovering {
		background: #96BB32;
	}
	
/* category-blue */
.view-tile .content-area .item.category-blue {
	/*background: #18BACE;*/ /* Note: The only reason we are using a stretched image color, rather than just the hex value is because of a strange iOS sub-pixel hairline border bug. This was the only workaround. */
	background: url('../img/hexcolor_blue.png') no-repeat;
	background-position: 2px 2px;
	background-size: 95% 95%;
}
	.view-tile .content-area .item.category-blue.skin-up-hovering {
		background: #3390ad;
		color: white;
	}

/* category-yellow */
.view-tile .content-area .item.category-yellow {
	/*background: #FDB813;*/ /* Note: The only reason we are using a stretched image color, rather than just the hex value is because of a strange iOS sub-pixel hairline border bug. This was the only workaround. */
	background: url('../img/hexcolor_yellow.png') no-repeat;
	background-position: 2px 2px;
	background-size: 95% 95%;
}
	.view-tile .content-area .item.category-yellow.skin-up-hovering {
		background: #e18e19;
		color: white;
	}

	
	
	@-moz-keyframes fadein{
		from { opacity: 0.0; }
		to { opacity: 1.0;  }
	}

	@-webkit-keyframes fadein{
		from { opacity: 0.0; }
		to { opacity: 1.0;  }
	}
	@-o-keyframes fadein{
		from { opacity: 0.0; }
		to { opacity: 1.0;  }
	}
	@keyframes fadein{	
		from { opacity: 0.0; }
		to { opacity: 1.0;  }
	}	
	
		
/* ==========================================================================
   Helper classes
   ========================================================================== */

/*
 * Hide visually and from screen readers:
 */

.hidden {
    display: none !important;
}

/*
 * Hide only visually, but have it available for screen readers:
 * http://snook.ca/archives/html_and_css/hiding-content-for-accessibility
 */

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

/*
 * Extends the .visuallyhidden class to allow the element
 * to be focusable when navigated to via the keyboard:
 * https://www.drupal.org/node/897638
 */

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
}

/*
 * Hide visually and from screen readers, but maintain layout
 */

.invisible {
    visibility: hidden;
}

/*
 * Clearfix: contain floats
 *
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    `contenteditable` attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that receive the `clearfix` class.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */

.clearfix:before,
.clearfix:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.clearfix:after {
    clear: both;
}

/* ==========================================================================
   EXAMPLE Media Queries for Responsive Design.
   These examples override the primary ('mobile first') styles.
   Modify as content requires.
   ========================================================================== */

@media only screen and (max-width: 600px) {
    /* Style adjustments for viewports that meet the condition */
	
	.tier2 {
		text-align: left; /* when the page gets small, the wrapped category buttons look better left-aligned */
	}
	
	
}

@media print,
       (-webkit-min-device-pixel-ratio: 1.25),
       (min-resolution: 1.25dppx),
       (min-resolution: 120dpi) {
    /* Style adjustments for high resolution devices */
}

/* ==========================================================================
   Print styles.
   Inlined to avoid the additional HTTP request:
   http://www.phpied.com/delay-loading-your-print-css/
   ========================================================================== */

@media print {
    *,
    *:before,
    *:after {
        background: transparent !important;
        color: #000 !important; /* Black prints faster:
                                   http://www.sanbeiji.com/archives/953 */
        box-shadow: none !important;
        text-shadow: none !important;
    }

    a,
    a:visited {
        text-decoration: underline;
    }

    a[href]:after {
        content: " (" attr(href) ")";
    }

    abbr[title]:after {
        content: " (" attr(title) ")";
    }

    /*
     * Don't show links that are fragment identifiers,
     * or use the `javascript:` pseudo protocol
     */

    a[href^="#"]:after,
    a[href^="javascript:"]:after {
        content: "";
    }

    pre,
    blockquote {
        border: 1px solid #999;
        page-break-inside: avoid;
    }

    /*
     * Printing Tables:
     * http://css-discuss.incutio.com/wiki/Printing_Tables
     */

    thead {
        display: table-header-group;
    }

    tr,
    img {
        page-break-inside: avoid;
    }

    img {
        max-width: 100% !important;
    }

    p,
    h2,
    h3 {
        orphans: 3;
        widows: 3;
    }

    h2,
    h3 {
        page-break-after: avoid;
    }
}