/*drugboundStyle.css*/
html,body {
			background-color: #000;
			color: #fff;
			font-family: helvetica, arial, sans-serif;
			margin: 0;
			padding: 0;
			font-size: 100%;
			text-align: center;
			background-image: 'url(media/storeitems.png)';
		}
		@font-face {
		    font-family: 'BebasNeueRegular';
		    src: url('media/fonts/BebasNeue-webfont.eot');
		    src: url('media/fonts/BebasNeue-webfont.eot?#iefix') format('embedded-opentype'),
		         url('media/fonts/BebasNeue-webfont.woff') format('woff'),
		         url('media/fonts/BebasNeue-webfont.ttf') format('truetype'),
		         url('media/fonts/BebasNeue-webfont.svg#BebasNeueRegular') format('svg');
		    font-weight: normal;
		    font-style: normal;
		}
		
		div,img {
			-webkit-transform : translateZ(0);
			-o-transform : translateZ(0);
			-moz-transform : translateZ(0);
			-ms-transform : translateZ(0);
			transform : translateZ(0);
		}
		
		/*
		div.menuOverlay {
			-webkit-transform : translateZ(0);
			-o-transform : translateZ(0);
			-moz-transform : translateZ(0);
			-ms-transform : translateZ(0);
			transform : translateZ(0);
		}
		*/
		div.GJS0OUCDBB,
		div.GJS0OUCDDB { /* for google wallet */
			
			-webkit-transform : none;
			-o-transform : none;
			-moz-transform : none;
			-ms-transform : none;
			transform : none;
			
		}
		#canvas {
			position: relative;
			left: 0;
			right: 0;
			border: 1px solid #555;
			
		}
		div.large_container {
			position: relative;
			margin:auto;
			display: inline-block;
			/*
			width: 1200px;
			height: 800px;
			*/
		}
		div.menuoverlay {
			position: absolute;
			width: 100%;
			height: 100%;
			left: 0;
			top: 0;
			overflow: hidden;
			pointer-events: none;
		}
		div.menuarrowcontainer {
			-webkit-transition: all 0.3s ease-out;
			-moz-transition: all 0.3s ease-out;
			-o-transition: all 0.3s ease-out;
			-ms-transition: all 0.3s ease-out;
			transition: all 0.3s ease-out;
			height: 45%;
			margin: 4.6% 0px;
		}
		img.menuarrow {
			height: 100%;
			-webkit-transition: all 0.3s ease-out;
			-moz-transition: all 0.3s ease-out;
			-o-transition: all 0.3s ease-out;
			-ms-transition: all 0.3s ease-out;
			transition: all 0.3s ease-out;
			/* use this:-webkit-transform: translate(-100%, 0); */
		}
		div#topright {
			-webkit-transform: translate(100%, 0);
			-moz-transform: translate(100%, 0);
			-o-transform: translate(100%, 0);
			-ms-transform: translate(100%, 0);
			transform: translate(100%, 0);
			margin-top: -17%;
		}
		img#topright {
			/* coming in from the right */
			-webkit-transform: scaleX(-1);
			-moz-transform: scaleX(-1);
			-o-transform: scaleX(-1);
			-ms-transform: scaleX(-1);
			transform: scaleX(-1);
		}
		div#middleleft {
			/* coming in from the left */
			-webkit-transform: translate(-100%, 0);
			-moz-transform: translate(-100%, 0);
			-o-transform: translate(-100%, 0);
			-ms-transform: translate(-100%, 0);
			transform: translate(-100%, 0);
			margin-left: -25%;
		}
		img#middleleft {
			
		}
		div#bottomright {
			/* coming in from the right */
			-webkit-transform: scaleX(-1);
			-moz-transform: scaleX(-1);
			-o-transform: scaleX(-1);
			-ms-transform: scaleX(-1);
			transform: scaleX(-1);
			
			-webkit-transform: translate(100%, 0);
			-moz-transform: translate(100%, 0);
			-o-transform: translate(100%, 0);
			-ms-transform: translate(100%, 0);
			transform: translate(100%, 0);
			margin-left: -20%;
		}
		img#bottomright {
			/* coming in from the right */
			-webkit-transform: scaleX(-1);
			-moz-transform: scaleX(-1);
			-o-transform: scaleX(-1);
			-ms-transform: scaleX(-1);
			transform: scaleX(-1);
		}

		div.buttoncontainer {
			position: absolute;
			right: 0px;
			top: 0px;
			height: 70%;
			width: 30%;
			padding: 3% 0;
		}
		div.button {
			width: 100%;
			height: 20%;
			margin: 1% 0;
			background-repeat: no-repeat;
			background-size: contain;
			pointer-events: auto;
		}
		div.button:hover,
		div.button:focus {
			background-color: rgba(29,99,124,0.4);
		}

		div.downarrow {
			position: absolute;
			top: 0;
			left: 0;
			width: 60%;
			height: 95%;
			/*border: 2px solid #B11;*/
			
			-webkit-transform: translateY(-180%);
			-moz-transform: translateY(-180%);
			-o-transform: translateY(-180%);
			-ms-transform: translateY(-180%);
			transform: translateY(-180%);
			
			-webkit-transition: all 0.3s ease-out;
			-moz-transition: all 0.3s ease-out;
			-o-transition: all 0.3s ease-out;
			-ms-transition: all 0.3s ease-out;
			transition: all 0.3s ease-out;
		
			/*
			-webkit-transform: translate(100%, 0);
			-moz-transform: translate(100%, 0);
			-o-transform: translate(100%, 0);
			-ms-transform: translate(100%, 0);
			*/
		}
		img.downarrow {
			position: relative;
			bottom: 0;
			width: 100%;
			top: -510px;
			/*
			-webkit-transform: rotate(90deg) translateX(-0%);
			-moz-transform: rotate(90deg) translateX(-0%);
			-o-transform: rotate(90deg) translateX(-0%);
			-ms-transform: rotate(90deg) translateX(-0%);
			transform: rotate(90deg) translateX(-0%);
			*/
			/*
			-webkit-transform-origin: 0 100%;
			-moz-transform-origin: 0 100%;
			-o-transform-origin: 0 100%;
			-ms-transform-origin: 0 100%;
			transform-origin: 0 100%;
			*/
			/*
			margin: 20px;
			height: 100%;
			*/
		}
		div.alertarrow {
			position: absolute;
			background-image: url('media/alertArrow.svg');
			background-size: 100% 100%;
			background-repeat: no-repeat;
			top: 30%;
			left: 0;
			width: 90%;
			height: 30%;
			/*border: 2px solid #B11;/* 
			/*
			-webkit-transform: translateX(180%);
			-moz-transform: translateX(180%);
			-o-transform: translateX(180%);
			-ms-transform: translateX(180%);
			transform: translateX(180%);
			*/
			-webkit-transform: translateX(180%);
			-moz-transform: translateX(180%);
			-o-transform: translateX(180%);
			-ms-transform: translateX(180%);
			transform: translateX(180%);

			-webkit-transition: all 0.2s ease-out;
			-moz-transition: all 0.2s ease-out;
			-o-transition: all 0.2s ease-out;
			-ms-transition: all 0.2s ease-out;
			transition: all 0.2s ease-out;
		}
		div#quotesbox {
			position: absolute;
			right: 0px;
			top: 0px;
			height: 70%;
			width: 30%;
			padding: 0 0;
			text-align: left;
			padding: 1% 0%;

			/*border: 1px solid #555;*/
		}
		div#scrollmenu {
			/*border: 2px solid #B11;*/
			position: absolute;
			top: 0;
			left: 0;
			height: 100%;
			width: 100%;
			overflow-y: scroll;
			overflow-x: hidden;
			pointer-events: auto;
		}
		/*
		ul.scrollinglist {
			list-style: none;
			list-style-position: outside;
			width: 80%;
			margin: auto;
			border: 2px solid #1B1;
		}
		*/
		div.scrollinglistContainer {
			width: 80%;
			margin: auto;
			/*border: 2px solid #1B1;*/
			pointer-events: auto;


		}
		div.scrollinglist {
			/*float: left;*/
			width: 100%;
			color: #BBB;
			background-color: #333;
			margin: 2% 0%;
			padding: 2px 2px 18px 2px;
			/*height: 30px;*/
			z-index: 10;
			pointer-events: auto;
			overflow-y: hidden;
			overflow-x: visible;
			text-align: left;
			font-family: BebasNeueRegular, helvetica, arial, sans-serif;

			-webkit-transition: all 0.2s ease-out;
			-moz-transition: all 0.2s ease-out;
			-o-transition: all 0.2s ease-out;
			-ms-transition: all 0.2s ease-out;
			transition: all 0.2s ease-out;
		}
		div.scrollinglist:hover,
		div.scrollinglist:focus {
			color: #222;
			background-color: #AAA;
		}
		div.scrollinglist#girdle {
			color: #DDD;
			background-color: #505A50;
		}
		div.scrollinglist#girdle:hover,
		div.scrollinglist#girdle:focus {
			color: #222;
			background-color: #9BA79B;
		}
		div.scrollinglist h3,
		div.scrollinglist h2 {
			margin: 0px 0px;
		}
		div.scrollinglist span.flavor {
			font-family: georgia, serif;
			font-size: 75%;
		}
		div.scrollinglist span.tooltip {
			visibility: hidden;
			font-size: 100%;
			-webkit-transition: all 0.2s ease-out;
			-moz-transition: all 0.2s ease-out;
			-o-transition: all 0.2s ease-out;
			-ms-transition: all 0.2s ease-out;
			transition: all 0.2s ease-out;
		}
		div.imagediv{
			float: left;
			height: 64px;
			width: 64px;
			background-size: cover;
			margin-bottom: 5px;
			/*background-image: 'url(media/storeitems.png)';*/
		}
		div.logodiv {
			height: 400px;
			width: 100%;
			background-size: 100%;
			background-repeat: no-repeat;
			margin-top: 180px;
		}
		div.creditsdiv {
			height: 400px;
			width: 100%;
			margin-top: 160px;
			background-color: #353535;
		}
		div.creditstext {
			font-family: BebasNeueRegular, helvetica, arial, sans-serif;
			font-size: 1.5em;
			text-align: right;
			padding: 20px 20px;
		}
		div.summarydiv {
			height: 320px;
			width: 100%;
			margin-top: 160px;
			background-color: #353535;
		}
		div.summarytext {
			font-family: BebasNeueRegular, helvetica, arial, sans-serif;
			font-size: 3.5em;
		}
		div.summaryweed {
			font-family: BebasNeueRegular, helvetica, arial, sans-serif;
			font-size: 2.5em;
		}
		div.summarybutton {
			font-family: BebasNeueRegular, helvetica, arial, sans-serif;
			font-size: 2.5em;
			background-color: #555;
		}
		div.summarybutton:hover, 
		div.summarybutton:focus {
			background-color: #AAA;
			color: #333;
		}
		div.rightcolumn {
			height: 128px;
			width: 60px;
			float: right;
			/*border: 1px solid green;*/
		}
		div.itemstatus {
			position: absolute;
			height: 20px;
			width: 50px;
			top: 50px;
			right: 0px;
			background-image: url('media/itemstatus.png');
			background-size: cover;
			/*border: 1px solid blue;*/
		}
		div.purchasediv {
			/*
			position: absolute;
			display: inline;
			*/
			top: 0px;
			right: 0px;
			position: absolute;
			height: 50px;
			width: 50px;
			color: #222;
			line-height: 90%;
			background-color: #888;
			/*border: 1px solid red;*/
			-webkit-transition: all 0.2s ease-out;
			-moz-transition: all 0.2s ease-out;
			-o-transition: all 0.2s ease-out;
			-ms-transition: all 0.2s ease-out;
			transition: all 0.2s ease-out;

		}
		div.purchasediv:hover,
		div.purchasediv:focus {
			color: #BBB;
			background-color: #333;
		}
		img.itemimg,
		img.achieveimg {
			
		}
		div.morearrow {
			position: absolute;
			height: 20px;
			width: 64px;
			bottom: 0px;
			/*margin-left: auto; //centered in javascript in storescene.js*/
			background-size: cover;
			background-image: url('media/more-arrow.png');
			background-position: 0px -20px;  /*set in storeitem.js*/
			/*border: 1px solid white;*/
			
		}
		div.feedbackdiv {
			font-family: BebasNeueRegular, helvetica, arial, sans-serif;
			font-size: 1.5em;
		}
		div.feedbackdiv a:link{color:#CCC;}
		div.feedbackdiv a:visited{color:#CAA;}
		div.feedbackdiv a:hover{color:#C88;}
		div.feedbackdiv a:active{color:#888;}