/*
 * Name: productsfan client
 * Author: Cameron Babiak
 * Version: 1.0
 * Date: 7/16/2019
 * Updated: 7/16/2019
 *
 * Notes:
 * moved template_rng_new.css styles here for the site level
 * since thats what we would do if this was a client contest. 
 *
*/

@import url('https://fonts.googleapis.com/css?family=Roboto:400,400i,700');
@import url('https://fonts.googleapis.com/css?family=Roboto+Slab:400,700');
@import url('https://fonts.googleapis.com/css?family=Roboto+Condensed:400,700');


/**	=LAYOUT
------------------------------------------------------------------------------------------------ */
	#pe-frame {
	  position: relative;
	  width: 100%;
	  max-width: 800px;
	  margin: 0 auto;
	}

	/* Typography
	------------------------------------------------------------------------ */
		#pe-frame,
		#pe-frame *,
		.pe-popup .mfp-content * {
			line-height: 1.25em; 
		}
		#pe-frame h1,
		.pe-popup .mfp-content h1,
		#pe-frame h2,
		.pe-popup .mfp-content h2,
		#pe-frame p,
		.pe-popup .mfp-content p,
		#pe-frame p,
		.pe-popup .mfp-content table,
		#pe-frame p,
		.pe-popup .mfp-content ol,
		#pe-frame p,
		.pe-popup .mfp-content ul,
		#pe-frame p,
		.pe-popup .mfp-content p {
			margin-bottom: 24px; 
		}
		#pe-frame h3,
		.pe-popup .mfp-content h3,
		#pe-frame h4,
		.pe-popup .mfp-content h4,
		#pe-frame h5,
		.pe-popup .mfp-content h5 {
			margin-bottom: 8px; 				
		}

	/* Header
	------------------------------------------------------------------------ */
		#pe-frame #pe-header {
		  position: relative;
		}
		#pe-frame #user_ID {
		  position: absolute;
		}

	/* Navigation
	------------------------------------------------------------------------ */
		#pe-frame #promotion-menu a {
			line-height: 3em;
			padding: 0 24px;
		}

	/* Pages
	------------------------------------------------------------------------ */
		#pe-content-wrap form.vertical #rules_er.form-item .form-input,
		#pe-content-wrap form.vertical #receive_promo_er.form-item .form-input {
			width: 100%;
			float: none; 
			padding-right: 48px !important; 
		}
		#pe-content-wrap form.vertical #receive_promo_er.form-item .form-input label {
			line-height: 1.5em !important; 
		}

		/* {register}
		------------------------------------------------ */
			.register #pe-frame .form-button {
				text-align: right;
			}

		/* {login}
		------------------------------------------------ */
			.login #pe-frame .form-button {
				text-align: right;
			}

		/* {tech_support}
		------------------------------------------------ */
			.tech_support #pe-frame .form-button {
				text-align: right;
			}


	/** =@media queries - LAYOUT
	-------------------------------------------------------------------------------------------- */
		@media all and (max-width: 767px) {
			/* Typography
			---------------------------------------------------------------- */
				/* Forms
				---------------------------------------- */
					#pe-frame .form-input,
					.pe-popup .mfp-content .form-input {
						height: auto;
					}
					#pe-frame .vertical .form-item-select .form-input,
					.pe-popup .mfp-content .vertical .form-item-select .form-input {
						width: auto;
						float: left;
						padding-right: 36px;
					}

			/* Structure
			---------------------------------------------------------------- */
				#pe-frame #pe-content-wrap .pe-container {
					max-width: 100%;
					overflow: hidden;
				}
				#pe-frame #pe-content-wrap .pe-container {
					padding: 32px 16px 48px;
				}

				/* Navigation
				---------------------------------------- */
					#pe-frame #promotion-menu a {
						padding: 0 12px;
					}

				/* Header
				---------------------------------------- */
					#pe-frame #user_ID {
						height: 36px; 
						line-height: 36px; 
						bottom: -36px; 
						right: 0px; 
						padding-right: 24px;
					}

				/* Footer
				---------------------------------------- */
					#pe-frame #pe-footer {
						padding: 36px 24px
					}
		}
		@media all and (max-width: 479px) {
			/* Typography
			---------------------------------------------------------------- */
				/* Forms
				---------------------------------------- */
					/* recaptcha */
						#pe-frame .rCta,
						#rCta-frame {
							max-width: 250px;
						}
						#rc-imageselect,
						.g-recaptcha {
							-webkit-transform:scale(0.77);
							transform:scale(0.77);
							-webkit-transform-origin:0 0;
							transform-origin:0 0;
						}

			/* Components
			---------------------------------------------------------------- */
				/* Tabs
				---------------------------------------- */
					#pe-frame ul.tabs {
						display: -webkit-box;
						display: -ms-flexbox;
						display: -webkit-flex;
						display: flex;
						-webkit-flex-flow: row nowrap;
						flex-flow: row nowrap;
						-webkit-align-items: stretch;
						align-items: stretch;
						-webkit-justify-content: flex-start;
						justify-content: flex-start;
						min-height: 100%;
					}
					#pe-frame ul.tabs li {
						max-width: 33%;
						margin: 0;
					}
					#pe-frame ul.tabs li a {
						min-height: 100%;
						line-height: 1;
					}
		}
		@media all and (min-width: 768px) {
			/* Typography
			---------------------------------------------------------------- */
				/* Forms
				---------------------------------------- */

			/* Structure
			---------------------------------------------------------------- */
				#pe-frame .pe-container {
					max-width: 800px;
					margin: 0 auto;
				}
				#pe-frame #pe-content-wrap .pe-container {
					padding: 48px 36px 48px;
				}

				/* Header
				---------------------------------------- */
					#pe-frame #user_ID {
						height: 48px; 
						line-height: 48px; 
						bottom: -48px; 
						right: 0px; 
						padding-right: 36px;
					}

				/* Footer
				---------------------------------------- */
					#pe-frame #pe-footer {
						padding: 48px 36px;
					}
		}
	

/**	=VISUALS
------------------------------------------------------------------------------------------------ */
	/* Typography
	------------------------------------------------------------------------ */
		#pe-frame,
		.pe-popup .mfp-content,
		#pe-frame *,
		.pe-popup .mfp-content * {
			font-family: 'Roboto', sans-serif;
		}
		#pe-frame *:focus,
		.pe-popup .mfp-content *:focus {
			outline: none !important;
		}
		#pe-frame,
		#pe-frame *,
		.pe-popup .mfp-content * {
			font-size: 16px;
		}
		#pe-frame .small,
		.pe-popup .mfp-content .small {
			font-size: 14px !important;
		}
		#pe-frame .tiny,
		.pe-popup .mfp-content .tiny {
			font-size: 12px !important; 
		}

		/* Titles
		------------------------------------------------ */
			#pe-frame h1,
			.pe-popup .mfp-content h1,
			#pe-frame h2,
			.pe-popup .mfp-content h2,
			#pe-frame h3,
			.pe-popup .mfp-content h3,
			#pe-frame h4,
			.pe-popup .mfp-content h4,
			#pe-frame h5,
			.pe-popup .mfp-content h5 {
				font-family: 'Roboto Slab', serif;
			}
			#pe-frame h1,
			.pe-popup .mfp-content h1 {
				font-size: 24px;
				font-weight: 800; 
			}
			#pe-frame h4,
			.pe-popup .mfp-content h4 {
				font-weight: 600; 
			}
			#pe-frame b,
			.pe-popup .mfp-content b,
			#pe-frame strong,
			.pe-popup .mfp-content strong {
				font-weight: bold;
			}

		/* tables
		------------------------------------------------ */
			#pe-frame table,
			.pe-popup .mfp-content table,
			#pe-frame table th,
			.pe-popup .mfp-content table th *,
			#pe-frame table th *,
			.pe-popup .mfp-content table th,
			#pe-frame table td,
			.pe-popup .mfp-content table td,
			#pe-frame table td *,
			.pe-popup .mfp-content table td * {
				font-family: 'Roboto Condensed', sans-serif;
			}

		/* Lists
		------------------------------------------------ */
			#pe-frame ul.disc > li,
			.pe-popup .mfp-content ul.disc > li {
				list-style-type: disc;
			}
			#pe-frame ol > li,
			.pe-popup .mfp-content ol > li {
				list-style-type: decimal;
			}
			#pe-frame ol ol > li,
			.pe-popup .mfp-content ol ol > li {
				list-style-type: lower-alpha;
			}

		/* Forms
		------------------------------------------------ */
			/* inputs */
				#pe-frame .form-input input,
				.pe-popup .mfp-content .form-input input,
				#pe-frame .form-input textarea,
				.pe-popup .mfp-content .form-input textarea {
					border-radius: 0px;
					outline: none;
				}

			/* select */
				#pe-frame .form-input select,
				.pe-popup .mfp-content .form-input select {
					border-radius: 0px;
					outline: none;
					box-shadow: none;
				}

			/* file upload */
				#pe-frame .form-item.form-item-upload .form-input label {
					border-radius: 0px 4px 4px 0px;
					text-align: center;
				}

	/* Structure
	------------------------------------------------------------------------ */
		/* Header
		------------------------------------------------ */
			#pe-frame #user_ID {
				text-align: right; 
			}

		/* Navigation
		------------------------------------------------ */
			#pe-frame #promotion-menu li a,
			#pe-frame #promotion-menu li a * {
				color: inherit;
				cursor: pointer;
			}
			#pe-frame #promotion-menu li.active a {
				cursor: default;
			}

		/* Footer
		------------------------------------------------ */
			#pe-frame #pe-footer,
			#pe-frame #pe-footer *,
			#pe-frame #pe-footer #copyright,
			#pe-frame #pe-footer #copyright * {
				font-size: 14px;
			}

	/* Components
	------------------------------------------------------------------------ */
		/* Buttons
		------------------------------------------------ */
			#pe-frame button,
			#pe-frame .button,
			#pe-frame .button:visited,
			.pe-popup .mfp-container .mfp-content button.client,
			.pe-popup .mfp-container .mfp-content .button.client {
				border-radius: 4px;
				font-weight: normal;
			}

			/* secondary */
				#pe-frame button.secondary,
				#pe-frame .button.secondary,
				#pe-frame .button.secondary:visited,
				.pe-popup .mfp-container .mfp-content button.secondary.client {
					border-radius: 4px;
					font-weight: normal;
				}

		/* Notice
		------------------------------------------------ */
			#pe-frame .notice {
				color: #333333;
				background-color: rgba( 204, 204, 204, 0.15 );
				border: 2px solid #CCCCCC;
				border-radius: 1px;
				-webkit-box-shadow: 1px 1px 6px 0px rgba(0,0,0,0.15);
				box-shadow: 1px 1px 6px 0px rgba(0,0,0,0.15);
				text-shadow: none !important; 
			}
			#pe-frame .notice.panel {
				border-color: #CCCCCC;
			}
			#pe-frame .notice.warning {
				border-color: #FCCA03;
			}
			#pe-frame .notice.error {
				border-color: #DA5C5C;
			}
			#pe-frame .notice.success {
				border-color: #95C97C;
			}
			#pe-frame .notice .close:after,
			.pe-popup .notice .close:after {
				text-align: center;
				font-size: 18px;
			}

		/* Popup
		------------------------------------------------ */
			html .pe-popup .mfp-content {
				background-color: #fff;
			}
			html .pe-popup .mfp-content .mfp-close {
				font-size: 24px !important;
				text-align: center;
			}
			
		/* Tooltips
		------------------------------------------------ */
			#pe-content-wrap #pe-content .tooltip > div {
				text-align: left;
				border-radius: 2px;
				-webkit-box-shadow: 1px 1px 3px 0 rgba(0,0,0,0.25);
				box-shadow: 1px 1px 3px 0 rgba(0,0,0,0.25);
			}
			.enter_picks #pe-content-wrap #pe-content .tooltip > div {
				text-align: center;
			}
			#pe-content-wrap #pe-content .tooltip > div span {
				font-size: 12px;
			}
			#pe-content-wrap #pe-content th .tooltip > div span {
				text-transform: none;
			}
			#pe-content-wrap #pe-content .tooltip > div:before {
				display: block;
				content: ' ';
				border-style: solid;
				border-width: 4px;
			}

		/* Social
		------------------------------------------------ */
			#pe-frame #pe-sso .sso-link:before {
				content: '';
				font-size: 24px;
			}
			#pe-frame #pe-sso .sso-facebook:before {
				color: #3b5998;
			}
			#pe-frame #pe-sso .sso-twitter:before {
				color: #28aae1;
			}
			#pe-frame #pe-sso .sso-yahoo:before {
				color: #3f028e;
			}
			#pe-frame #pe-sso .sso-google:before {
				color: #de5145;
			}
			#pe-frame #pe-sso .sso-instagram:before {
				color: #000000; /* #bb00ab */
			}
			#pe-frame #pe-sso .sso-pinterest:before {
				color: #cc2127;
			}
			#pe-frame #pe-sso .sso-unlink:hover:before {
				font-size: 20px;
			}


	/** =@media queries - VISUALS
	-------------------------------------------------------------------------------------------- */
		@media all and (max-width: 479px) {
			/* Navigation
			---------------------------------------------------------------- */
				#pe-frame #promotion-menu a,
				#pe-frame #user_ID,
				#pe-frame #user_ID * { 
					font-size: 12px; 
				}
		}


/**	=THEME
------------------------------------------------------------------------------------------------ */
	/* Colors
	-------------------------------------------------------------------- */
		/* (1) black		// #333333
		------------------------------------------------ */
			#pe-frame,
			.pe-popup .mfp-content,
			#pe-frame *,
			.pe-popup .mfp-content *,
			#pe-frame #pe-user-snapshot .snapshot-section table th {
				color: #333333;
			}
			#pe-frame ul.tabs li a:hover,
			#pe-frame ul.tabs li.current a {
				color: #333333 !important;
			}

		/* (3) Med. Grey	// #CCCCCC
		------------------------------------------------ */
			#pe-frame ul.tabs li a {
				color: #CCCCCC !important;
			}

		/* (6) White		// #FFFFFF
		------------------------------------------------ */
			#pe-frame #promotion-menu li,
			#pe-frame #promotion-menu > ul > li.active > a,
			#pe-frame #promotion-menu ul ul a:hover,
			#pe-frame #promotion-menu > a#client-home-link,
			#pe-frame .accordion > div > .accordion-title,
			#pe-frame .accordion > div > .accordion-title a,
			html .pe-popup .mfp-content .popup-title,
			html .pe-popup .mfp-content .popup-title *,
			html .pe-popup .mfp-content .mfp-close
			#pe-content-wrap #pe-content .tooltip > div span,
			#pe-content-wrap #pe-content .tooltip > div {
				color: #FFFFFF !important;
			}

		/* (7) Primary		// #FC5300
		------------------------------------------------ */
			#pe-frame #pe-content-wrap a,
			.pe-popup .mfp-content a,
			#pe-frame #pe-content-wrap a:visited,
			.pe-popup .mfp-content a:visited,
			#pe-frame #pe-content-wrap a:visited,
			.pe-popup .mfp-content a:visited {
				color: #FC5300;
			}
			#pe-frame .chip1 {
				color: #FC5300 !important;
			}

		/* (8) Theme 1		// #757575
		------------------------------------------------ */
			#pe-frame h1,
			.pe-popup .mfp-content h1,
			#pe-frame h2,
			.pe-popup .mfp-content h2,
			#pe-frame h3,
			.pe-popup .mfp-content h3 {
				color: #757575;
			}
			#pe-frame .chip2 {
				color: #757575 !important;
			}

		/* (8) Theme 2		// #27292B
		------------------------------------------------ */
			#pe-frame .chip3 {
				color: #27292B !important;
			}

	/* Backgrounds
	-------------------------------------------------------------------- */
		/* (1) Black		// #333333
		------------------------------------------------ */
			#pe-content-wrap #pe-content .tooltip > div {
				background-color: #333333 !important;
			}

		/* (3) Med. Grey	// #CCCCCC
		------------------------------------------------ */
			#pe-frame hr,
			.pe-popup .mfp-content hr {
				background-color: #CCCCCC;
			}

		/* (4) Light Grey	// #F4F4F4
		------------------------------------------------ */
			/*#pe-frame tr:nth-of-type(even) td,
			.pe-popup .mfp-content tr:nth-of-type(even) td,*/
			#pe-frame tr:nth-of-type(even),
			.pe-popup .mfp-content tr:nth-of-type(even),
			#pe-frame ul.tabs li a {
				background-color: #f4f4f4;
			}

		/* (5) Off White	// #F7F7F7
		------------------------------------------------ */
			#pe-frame .data thead th,
			#pe-frame .data tfoot th,
			#pe-content-wrap > .pe-container {
				background-color: #F7F7F7;
			}

		/* (6) White		// #FFFFFF
		------------------------------------------------ */
			#pe-frame tbody,
			.pe-popup .mfp-content tbody,
			/*#pe-frame tr:nth-of-type(odd) td,
			.pe-popup .mfp-content tr:nth-of-type(odd) td,*/
			#pe-frame tr:nth-of-type(odd),
			.pe-popup .mfp-content tr:nth-of-type(odd),
			#pe-frame ul.tabs li a:hover,
			#pe-frame ul.tabs li.current a,
			#pe-frame .tab-content,
			#pe-frame .accordion > div .accordion-content {
				background-color: #FFFFFF;
			}

		/* (7) Primary		// #FC5300
		------------------------------------------------ */
			#pe-frame .chip1-bg {
				background-color: #FC5300 !important;
			}

		/* (8) Theme 1		// #757575
		------------------------------------------------ */
			#pe-frame .chip2-bg {
				background-color: #757575 !important;
			}

		/* (8) Theme 2		// #27292B
		------------------------------------------------ */
			#pe-frame #promotion-menu,
			#pe-frame #promotion-menu li:hover ul,
			#pe-frame #promotion-menu > ul > li.active > a,
			#pe-frame .accordion > div > .accordion-title,
			html.pe-popup .mfp-content .popup-title {
				background: #27292b;
			}
			#pe-frame .chip3-bg {
				background-color: #27292B !important;
			}

	/* Borders
	-------------------------------------------------------------------- */
		/* (0) None
		------------------------------------------------ */
			/* whole border */
				#pe-frame tbody,
				.pe-popup .mfp-content tbody,
				#pe-frame tbody tr td,
				.pe-popup .mfp-content tbody tr td,
				/* #pe-frame .data thead th, */
				#pe-frame .data tbody th,
				#pe-frame .data tfoot th,
				#pe-frame .accordion > div > .accordion-title {
					border: none;
				}

			/* top border */
				#pe-frame .accordion > div .accordion-content {
					border-top: none;
				}

		/* (3) Med. Grey	// #CCCCCC
		------------------------------------------------ */
			/* whole border */
				#pe-frame .form-input input,
				.pe-popup .mfp-content .form-input input,
				#pe-frame .form-input textarea,
				.pe-popup .mfp-content .form-input textarea,
				#pe-frame .form-input select,
				.pe-popup .mfp-content .form-input select,
				#pe-frame ul.tabs li a,
				#pe-frame .tab-content,
				#pe-frame .accordion > div .accordion-content {
					border: 1px solid #CCCCCC;
				}

			/* top border */
				#pe-frame thead tr:first-of-type th,
				.pe-popup .mfp-content thead tr:first-of-type th,
				#pe-frame tfoot tr:first-of-type th,
				.pe-popup .mfp-content tfoot tr:first-of-type th {
					border-top: 1px solid #CCCCCC;
				}

			/* right border */
				#pe-frame thead th,
				#pe-frame tbody th,
				#pe-frame tbody tr td,
				.pe-popup .mfp-content tbody tr td,
				#pe-frame tfoot {
					border-right: 1px solid #CCCCCC;
				}

			/* bottom border */
				#pe-frame table thead th,
				.pe-popup .mfp-content table thead th,
				#pe-frame thead tr:last-of-type th,
				.pe-popup .mfp-content thead tr:last-of-type th,
				#pe-frame tfoot tr:last-of-type th,
				.pe-popup .mfp-content tfoot tr:last-of-type th,
				#pe-frame tbody tr:last-of-type td,
				.pe-popup .mfp-content tbody tr:last-of-type td {
					border-bottom: 1px solid #CCCCCC;
				}

			/* left border */
				#pe-frame thead th,
				#pe-frame tbody th,
				#pe-frame tbody tr td,
				.pe-popup .mfp-content tbody tr td,
				#pe-frame tfoot {
					border-left: 1px solid #CCCCCC;
				}

		/* (4) Light Grey	// #F4F4F4
		------------------------------------------------ */
			/* right border */
				#pe-frame tbody,
				.pe-popup .mfp-content tbody {
					border-right: 1px solid #f4f4f4;
				}

			/* left border */
				#pe-frame tbody,
				.pe-popup .mfp-content tbody {
					border-left: 1px solid #f4f4f4;
				}

		/* (6) White		// #FFFFFF
		------------------------------------------------ */
			/* top border */
				#pe-frame .accordion > div > .accordion-title a span.status {
					border-color-top: #fff;
					border-color: #fff transparent transparent transparent;
				}

			/* bottom border */
				#pe-frame ul.tabs li.current a {
					border-bottom: 1px solid #FFF;
				}
				#pe-frame .accordion > div > .accordion-title.active a span.status,
				#pe-frame #groups_list .section-content-article.active .article-header:after {
					border-color-bottom: #fff;
					border-color: transparent transparent #fff transparent;
				}

	/* Buttons
	-------------------------------------------------------------------- */
		/* (3) Med. Grey	// #CCCCCC
		------------------------------------------------ */
			#pe-frame button.disabled,
			#pe-frame .button.disabled,
			#pe-frame button.disabled:hover,
			#pe-frame .button.disabled:hover {
				background: #CCCCCC !important;
				border: 1px solid #CCCCCC !important;
			}

		/* (4) Light Grey	// #F4F4F4
		------------------------------------------------ */
			#pe-frame button.disabled,
			#pe-frame .button.disabled,
			#pe-frame button.disabled:hover,
			#pe-frame .button.disabled:hover {
				color: #F4F4F4 !important;
			}

		/* (7) Primary		// #FC5300
		------------------------------------------------ */
			#pe-frame button,
			#pe-frame .button,
			#pe-frame .button:visited,
			.pe-popup .mfp-container .mfp-content button.client,
			.pe-popup .mfp-container .mfp-content a.client {
				border: 1px solid #FC5300;
				background: #FC5300;
			}

			/* secondary */
				#pe-frame button.secondary,
				#pe-frame .button.secondary,
				#pe-frame .button.secondary:visited,
				.pe-popup .mfp-container .mfp-content button.secondary.client,
				.pe-popup .mfp-container .mfp-content a.secondary.client {
					color: #FC5300 !important;
					background: transparent;
				}

			/* hover states */
				#pe-frame button:hover,
				#pe-frame button.secondary:hover,
				#pe-frame .button:hover,
				#pe-frame .button.secondary:hover,
				.pe-popup .mfp-container .mfp-content button.client:hover,
				.pe-popup .mfp-container .mfp-content button.secondary.client:hover,
				.pe-popup .mfp-container .mfp-content a.client:hover,
				.pe-popup .mfp-container .mfp-content a.secondary.client:hover {
					color: #FFF !important;
					background: #FC5300;
					border: 1px solid #FC5300;
				}

		/* (6) White		// #FFFFFF
		------------------------------------------------ */
			#pe-frame button,
			#pe-frame button *,
			.pe-popup .mfp-container .mfp-content button,
			.pe-popup .mfp-container .mfp-content button *,
			#pe-frame .button,
			#pe-frame .button *,
			.pe-popup .mfp-container .mfp-content .button,
			.pe-popup .mfp-container .mfp-content .button *,
			#pe-frame .button:visited,
			#pe-frame .button:visited *,
			.pe-popup .mfp-container .mfp-content .button:visited,
			.pe-popup .mfp-container .mfp-content .button:visited *,
			#pe-frame .button.secondary:hover,
			#pe-frame .button.secondary:hover *,
			.pe-popup .mfp-container .mfp-content .button.secondary:hover,
			.pe-popup .mfp-container .mfp-content .button.secondary:hover * {
				color: #FFFFFF !important;
			}
			.pe-popup .mfp-container .mfp-content button.mfp-close {
				color: #333333 !important;
			}


/**	=MECHANISM
------------------------------------------------------------------------------------------------ */
	/* Scratch
	------------------------------------------------------------------------ */
		#game-frame {
			margin: 0 auto;
			max-width: 100%;
			width: 540px;
			position: relative;
		}
		.game-area,
		.game-area canvas {
			display: block;
			background-position: top center;
		}
		#game-frame.loading {
			background-image: url( '/contests/html/xhtml_master/img/spinning-circles.svg' );
			background-position: center center;
			background-repeat: no-repeat;
		}
		.game-area {
			max-width: 100% !important;
			height: 0px !important;
			padding-bottom: 100% !important;
			background-size: 100% 100%;
		}
		.game-area img {
			max-width: 100%;
		}
		.game-area canvas {
			width: 100% !important;
			max-width: 100% !important;
			height: 100%;
		}

	/* Game Dialog
	------------------------------------------------------------------------ */
		#pe-frame #game-entry {
			display: none;
		}
		#pe-frame .game-dialog {
			width: 100%;
			max-width: 100%;
			height: 0px;
			padding-bottom: 100%;
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			z-index: 300 !important;
			text-align: center;
		}
		#pe-frame #game-dialog {
			display: none;
			margin: 0;
		}
		#pe-frame #game-entry .form-label {
			text-align: left;
		}
		#pe-frame #game-entry,
		#pe-frame #game-message {
			padding: 2.5em;
		}
		#pe-frame #game-message .conf {
			font-size: 0.675em;
		}
		#pe-frame .toggle {
			width: 25px;
			height: 25px;
			display: block;
			text-align: center;
			line-height: 25px;
			border-radius: 50%;
			position: absolute;
			top: 2%;
			right: 2%;
			z-index: 400;
			cursor: pointer;
		}

		/* visuals */
    		#pe-frame .game-dialog .dialog-id {
    			color: #999;
    		}
    		#pe-frame .game-dialog {
    			background: rgb( 256, 256, 256 );
    			background: rgba( 256, 256, 256, 0.72 );
    			outline: 5px solid transparent;
    		}


	/** =@media queries - MECHANISM
	-------------------------------------------------------------------------------------------- */
  		@media only screen and (max-width: 479px) {
			/* Game Dialog
			---------------------------------------------------------------- */
				#pe-frame #game-entry,
				#pe-frame #game-message {
					padding: 1em;
				}
				#pe-frame .toggle {
					width: 15px;
					height: 15px;
					line-height: 15px;
					font-size: 0.750em;
				}

				/* visuals */
					#pe-frame .game-dialog {
						outline: 2px solid transparent;
					}
  		}