html {
	margin: 0;
	padding: 0;
	height:100%;
}

body {
	margin: 0;
	padding: 0;
	height:100%;
	font-family: 'Poppins', sans-serif;
	font-size: 12px;
	color: #ccc;
	text-align: left;
	word-wrap: break-word;
	background-repeat: repeat-x;
	
	background: rgb(52,63,74,1); /* Old browsers */
	background: -moz-linear-gradient(top, rgba(81,97,112,1) 0%, rgba(52,63,74,1) 300px) fixed; /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(81,97,112,1)), color-stop(300px,rgba(52,63,74,1))) fixed; /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, rgba(81,97,112,1) 0%,rgba(52,63,74,1) 300px) fixed; /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,rgba(81,97,112,1) 0%,rgba(52,63,74,1) 300px) fixed; /* Opera 11.10+ */
	background: -ms-linear-gradient(top, rgba(81,97,112,1) 0%,rgba(52,63,74,1) 300px) fixed; /* IE10+ */
	background: linear-gradient(to bottom, rgba(81,97,112,1) 0%,rgba(52,63,74,1) 300px) fixed; /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#516170', endColorstr='#343f4a',GradientType=0 ) fixed; /* IE6-9 */
}

input[type='text'] {
	padding: 5px; 
	border: 1px solid #676777; 
	-webkit-border-radius: 2px;
	border-radius: 2px;
	color: #fff;

	background: rgb(52,63,74,1); /* Old browsers */
	background: -moz-linear-gradient(top, rgba(81,97,112,1) 0%, rgba(52,63,74,1) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(81,97,112,1)), color-stop(100%,rgba(52,63,74,1))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, rgba(81,97,112,1) 0%,rgba(52,63,74,1) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,rgba(81,97,112,1) 0%,rgba(52,63,74,1) 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top, rgba(81,97,112,1) 0%,rgba(52,63,74,1) 100%); /* IE10+ */
	background: linear-gradient(to bottom, rgba(81,97,112,1) 0%,rgba(52,63,74,1) 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#516170', endColorstr='#343f4a',GradientType=0 ); /* IE6-9 */
}

h2 {
	font-size: 1.8em;
}

p {
	font-size: 1.2em;
}

.clickable {
	cursor: pointer;
}

#container {
	margin: 0 auto;
	position: relative;
	width: 1280px;
	min-height:100% !important; /* browser fill */
    height: auto;                /*content fill */
}

#maincolumn
{
	margin: 0 auto;
    position: absolute;
    left: 0px;
	width: 1280px;
	background-color: #101921;
	min-height:100% !important; /* browser fill */
    height: auto;                /*content fill */
    overflow: hidden;
}

#maincolumn a {
	color: rgb(81,97,112);
}

#menucolumn
{
    position: absolute;
	margin: 0 auto;
	right: 0px;
	height: 100%;
	width: 140px;
}

#titlebanner {

	position: relative;
	color: #fff;
	height: 130px;
	width: 100%;
	/* background - see layout.jade. a random number defines bg */
	background-repeat: no-repeat;
}
#titlebanner a {
	background: none;
	text-decoration: none;
}
#titlebanner a:visited {
	color: #fff;
}
#titlebanner a:hover {
	color: #989898;
}
#titlebanner div.bannergradient {
	position: absolute;
	width: 100%;
	height: 100%;
	z-index: 1;

	background: -moz-linear-gradient(top,  rgba(0,0,0,0) 0%, rgba(0,0,0,0.8) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,0.8))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.8) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.8) 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.8) 100%); /* IE10+ */
	background: linear-gradient(to bottom,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.8) 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#a6000000',GradientType=0 ); /* IE6-9 */
}
#titlebanner div.titlewrapper {
	position: absolute;
	height: 55px;
	top: 25%;
	z-index: 2;
	padding: 0px 20px;
	margin: 0;
}
#titlebanner h1 {
	font-size: 40px;
	font-family: 'Kanit', sans-serif;
	line-height: 1.0;
}
#titlebanner h1, #titlebanner p  {
	text-shadow: 2px 2px 12px #000;
	padding: 0;
	margin: 0;
}

.rel {
	position: relative;
}

.boxlabel {
	text-align: center;
	display: inline-block;
	overflow: hidden;
	position: absolute;
	pointer-events: none;
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#d6d6d6+0,45484d+100&0.4+0,0.4+100 */
	background: -moz-linear-gradient(top,  rgba(214,214,214,0.4) 0%, rgba(69,72,77,0.4) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top,  rgba(214,214,214,0.4) 0%,rgba(69,72,77,0.4) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom,  rgba(214,214,214,0.4) 0%,rgba(69,72,77,0.4) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#66d6d6d6', endColorstr='#6645484d',GradientType=0 ); /* IE6-9 */
}

.boxlabel p {
	padding: 3px 5px 0px 5px;
	margin: 0 auto;
  	font-family: 'Open+Sans', sans-serif;
  	font-size: 11px;
  	color: #101921;
  	text-align: center;
}

.boxlabel-gb {
	width: 84px;
	height: 75px;
	top: 37px;
	left: 16px;
	border-radius: 3px;	
}

.boxlabel-gbc {
	width: 86px;
	height: 76px;
	top: 43px;
	left: 15px;
	border-radius: 3px;	
}

.boxlabel-gba {
	width: 82px;
	height: 45px;
	top: 17px;
	left: 19px;
	border-radius: 3px;	
}

.boxlabel-gen {
	width: 70px;
	height: 65px;
	top: 2px;
	left: 23px;
	border-radius: 3px;	
}

.boxlabel-32x {
	width: 72px;
	height: 67px;
	top: 5px;
	left: 24px;
	border-radius: 3px;	
}

.boxlabel-gg {
	width: 88px;
	height: 61px;
	top: 28px;
	left: 14px;
	border-radius: 11px 11px 0px 0px;	
}

.boxlabel-n64 {
	width: 69px;
	height: 60px;
	top: 8px;
	left: 26px;
	border-radius: 8px 8px 1px 1px;
	padding-top: 5px;
}

.boxlabel-snes {
	width: 70px;
	height: 34px;
	top: 2px;
	left: 23px;
	border-radius: 3px;
}

.boxlabel-sms {
	width: 102px;
	height: 41px;
	top: 28px;
	left: 7px;
	border-radius: 1px;
}

.boxlabel-nes {
	width: 67px;
	height: 90px;
	top: 3px;
	left: 42px;
	border-radius: 1px;
}

.boxlabel-pce {
	width: 96px;
	height: 83px;
	top: 75px;
	left: 12px;
	border-radius: 1px;
}

.boxlabel-lynx {
	width: 106px;
	height: 68px;
	top: 31px;
	left: 7px;
	border-radius: 1px;
}

.boxlabel-vb {
	width: 76px;
	height: 61px;
	top: 14px;
	left: 20px;
	border-radius: 1px;
}

.boxlabel-wsx {
	width: 106px;
	height: 39px;
	top: 14px;
	left: 7px;
	border-radius: 1px;
}

.boxlabel-psx {
	width: 95px;
	height: 45px;
	top: 10px;
	left: 15px;
	border-radius: 1px;
}

.boxlabel-a7800 {
	width: 102px;
	height: 138px;
	top: 9px;
	left: 9px;
	border-radius: 1px;
}

.boxlabel-a2600 {
	width: 102px;
	height: 138px;
	top: 9px;
	left: 9px;
	border-radius: 1px;
}

.boxlabel-vect {
	width: 102px;
	height: 138px;
	top: 9px;
	left: 9px;
	border-radius: 1px;
}

.boxlabel-ngpx {
	width: 86px;
	height: 48px;
	top: 24px;
	left: 17px;
	border-radius: 1px;
}

.boxlabel-jag {
	width: 96px;
	height: 43px;
	top: 25px;
	left: 12px;
	border-radius: 1px;
}

.boxlabel-fds {
	width: 77px;
	height: 35px;
	top: 84px;
	left: 21px;
	border-radius: 1px;
}

.boxlabel-nds {
	width: 96px;
	height: 102px;
	top: 8px;
	left: 12px;
	border-radius: 5px;
}

.gamelink .statebutton {
	cursor: pointer;	
}

.zoom {
	transition:All 60ms ease-in;
	-webkit-transition:All 60ms ease-in;
	-moz-transition:All 60ms ease-in;
	-o-transition:All 60ms ease-in;
}

.zoom-on {
	transform: scale(1.1, 1.1);
	-webkit-transform: scale(1.1, 1.1);
	-moz-transform: scale(1.1, 1.1);
	-o-transform: scale(1.1, 1.1);
	-ms-transform: scale(1.1, 1.1);
}

.zoom-down {
	transform: scale(0.95, 0.95);
	-webkit-transform: scale(0.95, 0.95);
	-moz-transform: scale(0.95, 0.95);
	-o-transform: scale(0.95, 0.95);
	-ms-transform: scale(0.95, 0.95);
}


.darkgrad {
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#000000+0,1b2026+50,000000+100 */
	background: rgb(0,0,0); /* Old browsers */
	background: -moz-linear-gradient(top,  rgba(0,0,0,1) 0%, rgba(27,32,38,1) 50%, rgba(0,0,0,1) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,1)), color-stop(50%,rgba(27,32,38,1)), color-stop(100%,rgba(0,0,0,1))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  rgba(0,0,0,1) 0%,rgba(27,32,38,1) 50%,rgba(0,0,0,1) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  rgba(0,0,0,1) 0%,rgba(27,32,38,1) 50%,rgba(0,0,0,1) 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  rgba(0,0,0,1) 0%,rgba(27,32,38,1) 50%,rgba(0,0,0,1) 100%); /* IE10+ */
	background: linear-gradient(to bottom,  rgba(0,0,0,1) 0%,rgba(27,32,38,1) 50%,rgba(0,0,0,1) 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#000000',GradientType=0 ); /* IE6-9 */
}

.slideup {
	max-height: 0 !important; 
	overflow: hidden;
	-webkit-transition: max-height 0.5s;
	-moz-transition: max-height 0.5s;
	transition: max-height 0.5s;
}

.close {
	opacity: 0;
	transform: scale(0, 0);
	-webkit-transform: scale(0, 0);
	-moz-transform: scale(0, 0);
	-o-transform: scale(0, 0);
	-ms-transform: scale(0, 0);
}

.fl {
	float: left;
}

.fr {
	float: right;
}

.hide {
	display: none;
}

.transparent {
	opacity: 0;
}

.pointer {
	cursor: pointer;
}

#toolbar {
	height: 40px;
	font-size: 14px;
	color: #333;
	background: #f0f0f0;
	position: relative;

}

#toolbar div {
	overflow: hidden;
	height: 40px;
	display: inline-block;
	padding: 0;
	margin-right: 5px;
}

#toolbar .systemfilter {
	width: 200px;
}

#toolbar .genrefilter {
	width: 200px;
}

#selectordie {
	padding: 14px 10px;
	border: none;
	width: 200px;
	text-transform: none;
	font-size: 12px;
	font-weight: normal;
	position: absolute;
	top: 0px;
	height: 40px;
	box-shadow: none;
}

#romsselectordie {
	padding: 14px 10px;
	border: none;
	width: 800px;
	text-transform: none;
	font-size: 12px;
	font-weight: normal;
	height: 40px;
	box-shadow: none;
}

#toolbar .search input {
	height: 100%;
	padding: 0px 10px;
	border-radius: 0px;
	background: none;
	border: 0;
	box-shadow: none;
	font-size: 12px;
    text-align: left;
	width: 965px;
  	outline: none;
  	background: #fff;
  	color: #444444;
    outline: 0;
    outline-offset: -2px;
}

#toolbar .gamepads {
	height: 40px;
	width: 85px;
	margin: 0;
}

#toolbar .gamepads ul {
	height: 40px;
	margin: 0;
	padding: 0;
	list-style: none;
}

#toolbar .gamepads ul li {
	width: 40px;
	height: 40px;
	display: inline-block;
	margin-right: 5px;
	background: #fff url("http://cdn.crazyerics.com/images/toolbar-gamepad-disconnect.png") center center no-repeat;

	transition:All 200ms ease-in;
	-webkit-transition:All 200ms ease-in;
	-moz-transition:All 200ms ease-in;
	-o-transition:All 200ms ease-in;
}

#toolbar .gamepads ul li.connected {
	background: #fff url("http://cdn.crazyerics.com/images/toolbar-gamepad-connected.png") center center no-repeat;
}

#toolbar .gamepads ul li:last-child {
	margin: 0;
}

#content {
	padding: 0;
	margin: 0;
	position: relative;
}

#dialogs {

	position: relative;
	margin: 0;
	width: 100%;
	height: 150px;
}

.centered {
	
	position: absolute;
    top: 50%;
    left: 50%;
    margin: 0;
    transform: translate(-50%, -50%);
    text-align: center;
}

.dialog {
	width: 100%;
	height: auto;
	text-align: center;
}

.dialog-animation {
	/* this curve features a quick disappear (because actions are made on dialogs) and a slow dramatic appear*/
	transition-property: all;
	-webkit-transition-property: all;

	transition-timing-function: cubic-bezier(.56,.01,.27,1.29);
	-webkit-animation-timing-function: cubic-bezier(.56,.01,.27,1.29);
}

.dialogwrapper {

    position: absolute;
    top: 50%;
    left: 50%;
    margin: 0;
    transform: translate(-50%, -50%);
    
    height: auto;
    width: 100%;
}

/* configure gamepad dialog */

#gamepadwrapper {
	margin: 25px 0;
	background-repeat: no-repeat;
	background-position: 25% center;
}

#gamepadvoid {
	display: inline-block;
	width: 400px;
}	

#gamepadinputs {
	display: inline-block;
	width: 400px;
	height: auto;
	list-style: none;
	font-size: 1.4em;
	padding: 0px 0px 0px 10px;
	margin: 0;
}

#gamepadinputs li {
	display: inline-block;
	width: 400px;
	line-height: 30px;
}
#gamepadinputs li .title {
	width: 200px;
	text-align: left;
	display: inline-block;
}
#gamepadinputs li .assignment {
	width: 200px;
	text-align: right;
	display: inline-block;
}

#startgamepadover {
	cursor: pointer;
	display: inline-block;
}
#skipgamepadconfig {
	display: inline-block;
	cursor: pointer;
	margin-left: 30px;
}

/* select another game dialog */

#selectanother {
	height: 110px;
}

/* shader select dialog */

#systemshaderseletor {
	height: 450px;
}

#shaderselectlist {
	margin: 40px auto;
	list-style: none;
	padding: 0;
	width: 1280px;
}

#shaderselectlist li {
	height: 200px;
	width: 200px;
	margin: 10px 20px;
	display: inline-block;
	cursor: pointer;
}

#shaderselectlist li img {
	height: 200px;
	width: 200px;
}

#shaderselectlist li h3 {
	margin: 0;
	padding: 10px 0;
	font-size: 1.2em;
}

#shaderselectlist li p {
	margin: 0;
	padding: 0;
	font-size: 12px;
}

#systemshaderseletor label {
	font-size: 1.2em;
	margin-left: 10px;	
}

/* saved game selector */

#savedgameselector {
	height: 450px;
}

#savedgameselector p {
	padding: 0px 100px;
}

#savesselectlist {
	margin: 40px auto;
	list-style: none;
	padding: 0;
	width: 1280px;
}

#savesselectlist li {
	height: 200px;
	width: 200px;
	margin: 10px 20px;
	display: inline-block;
	cursor: pointer;
}

#savesselectlist li h3 {
	margin: 0;
	padding: 10px 0;
	font-size: 1.0em;
}

#savesselectlist li p {
	margin: 0;
	padding: 0;
	font-size: 12px;
}

#loadnosaves {
	font-size: 1.2em;
	margin-left: 10px;	
	cursor: pointer;
}

/* game loading dialog */

#dialogs div.GameLoading {
	height: 500px;
}

#dialogloadingbackground {
	height: 100%;
	width: 100%;
	display: none;
}

/*
#gameloadingimage, #saveloadingimage {

	-webkit-animation-duration: 5s; 
    animation-duration: 5s; 
    -webkit-animation-fill-mode: both; 
    animation-fill-mode: both; 
    animation-iteration-count:infinite; 
    -webkit-animation-iteration-count:infinite;
}
*/

#dialogs div.GameLoading h2{
	position: absolute;
	text-align: center;
	width: 100%;
	top: 70px;
}

#loadingstatus {
	text-align: center;
	width: 100%;
	position: absolute;
	bottom: 80px;
}

#tip {
	display: none;
	text-align: center;
	width: 100%;
	position: absolute;
	bottom: 20px;
}

#loadingprogressbarwrapper {
	position: absolute;
	bottom: 200px;
	left: 50%;
	margin: 0;
	text-align: center;
	display: inline-block;
}

#loadingprogressbar {

	position: absolute;
	bottom: 200px;
	left: 50%;
	margin: 0;
	text-align: center;
	display: inline-block;
}

/* save selection dialog */

#dialogs div.SaveSelection {
	height: 400px;
}

/* save loading dialog */

#dialogs div.SaveLoading {
	height: 400px;
}

/* emulator exception dialog */

#emulatorexception p {
	margin-right: 10%;
	margin-left: 10%;
}

#emulatorexceptiondetails {
	color: red;
	height: 200px;
	padding: 0px 50px;
	overflow: scroll;
	text-align: left;
	font-family: monospace;
}

/* emulator */

#emulatorwrapper {
	background-color: #000;
	position: absolute;
	top: 0px;
	left: 0px;
	padding-top: 10px;
	display: none;
	width: 100%;
}

#emulatorwrapperoverlay{
	display: none;
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
  	background-color: rgba(0,0,0,0.8);
  	cursor: pointer;
}

#emulatorwrapperoverlay div {
	position: relative;
  	top: 50%;
  	transform: translateY(-50%);
  	text-align: center;
	vertical-align: middle;
}

#emulatorpositionhelper {
	padding-left: 0;
    padding-right: 0;
    margin-left: auto;
    margin-right: auto;
	display: block;
	width: 1280px;
}

#emulatorpositionhelper.limited {
	width: 800px;
}

#emulator {
	outline: none;
	width: 1280px;
}

#emulator.limited {
	width: 800px;
}

/* notifications */

#notificationwrapper {
	width: 1250px;
	max-height: 40px;
	position: absolute;
	bottom: 0px;
	padding: 0px 15px;
	overflow: hidden;
	color: #000;
	opacity: 0.85;

	background: #EEE; /* For browsers that do not support gradients */
    background: -webkit-linear-gradient(#BBB, #EEE); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(#BBB, #EEE); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(#BBB, #EEE); /* For Firefox 3.6 to 15 */
    background: linear-gradient(#BBB, #EEE); /* Standard syntax */

	transition-property: all;
	transition-duration: .5s;
	transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
}

#notificationwrapper.closed {
	max-height: 0px;
}

#notificationwrapper div.spinner {
	background-image: url('http://cdn.crazyerics.com/images/notification.svg');
	background-position: center center;
	background-repeat: no-repeat;
	height: 40px;
	width: 20px;
	margin-right: 15px;
	float: left;
}

#notificationwrapper p {
	line-height: 40px;
	margin: 0;
	padding: 0;
	float: left;
}

/* game details wrapper */

#gamedetailsbackground {
	padding: 10px 0px;
	width: 100%;
	background: rgba(0,0,0,1);
}

#gamedetailswrapper {
	display: none;
	width: 100%;
	height: 100%;
}

#gamedetailstable {
	width: 100%;
	display: table;
	table-layout: fixed;
}

#gamedetailsboxfront {
	display: table-cell;
	width: 200px;
}

#gamedetailsboxfront img {
	margin: 0px 15px;
	vertical-align: middle;
	transition:All 200ms ease-in;
	-webkit-transition:All 200ms ease-in;
	-moz-transition:All 200ms ease-in;
	-o-transition:All 200ms ease-in;
	max-height: 250px;
}

#gamedetailscontent {
	display: table-cell;
	vertical-align: top;
	position: relative;
	padding-left: 15px;
}

#gametitlewrapper {
	height: 32px;
}

#gametitlecaption {
	font-size: 16px;
}

/* sliders */

#sliderpanels {
}

div.slidingpanel {
	padding: 10px 0px;
}

div.slidingpanel.closed { 
	height: 0px;
	display: none;
}

#slidericons {
	padding: 0px;
	margin: 10px 0 0 0;
	list-style-type: none;
	overflow: hidden;
}

#slidericons li {
	display: inline-block;
	height: 20px;
	width: 20px;
	margin-right: 10px;
	cursor: pointer;

	transition:All 200ms ease-in;
	-webkit-transition:All 200ms ease-in;
	-moz-transition:All 200ms ease-in;
	-o-transition:All 200ms ease-in;
}

#slidericons li.deactivated {
	display: none;
}

#slidericons .info {
	background: url("http://cdn.crazyerics.com/images/sliders/info.png") center center no-repeat;
}

#slidericons .controls {
	background: url("http://cdn.crazyerics.com/images/sliders/controls.png") center center no-repeat;
}

#slidericons .screenshots {
	background: url("http://cdn.crazyerics.com/images/sliders/screenshots.png") center center no-repeat;
}

#slidericons .versions {
	background: url("http://cdn.crazyerics.com/images/sliders/versions.png") center center no-repeat;
}

#slidericons .on {

	-webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    transform: rotate(180deg);
}

#Controls-slider td {
	vertical-align: top;
}

#Info-slider td {
	vertical-align: top;
}

#infosilderTitleScreen {
	width: 320px; /* we fetch a 320w image from cdn, reserve space in the dom for this */
	background-color: #232323;
	min-height: 200px;
	margin-right: 20px;
}

#Info-slider p {
	margin: 0px 0px 10px 0px;
}

#Screenshots-slider .grid-item {
	margin: 5px;
}

#Screenshots-slider .grid-item img {
	cursor: pointer;
}

div.screenshot-tooltip {
	text-align: center;
}

div.screenshot-tooltip div {
	cursor: pointer;
}

#Roms-slider .sod_list_wrapper {
	width: 800px;
}

/* grids */

.grid:after {
	content: '';
	display: block;
	clear: both;
}

.grid-item {
 	float: left;
 	margin: 0;
}

.grid-item img {
	display: block;
}

/* collections */

#collectionsWrapper {
	height: auto;
	padding: 10px;

	background: -moz-linear-gradient(top,  rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,1)), color-stop(100%,rgba(0,0,0,0))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  rgba(0,0,0,1) 0%,rgba(0,0,0,0) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  rgba(0,0,0,1) 0%,rgba(0,0,0,0) 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  rgba(0,0,0,1) 0%,rgba(0,0,0,0) 100%); /* IE10+ */
	background: linear-gradient(to bottom,  rgba(0,0,0,1) 0%,rgba(0,0,0,0) 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#00000000',GradientType=0 ); /* IE6-9 */
}

#collectionsWrapper.new-user {
	visibility: hidden;
	position: absolute;
}

.tooltip-content-wrapper {
	display: none;
	overflow: hidden;
}

.tooltipster-sidetip.tooltipster-shadow .tooltipster-content {
	overflow: hidden;
}

.tooltipster-sidetip.tooltipster-shadow .tooltipster-content .remove {
	color: red;
	cursor: pointer;
}

.tooltipster-sidetip.tooltipster-shadow .tooltipster-content .button {
	margin: 10px 0px;
	height: 25px;
	line-height: 25px;
	padding: 5px 10px;
	font-weight: bold;
    cursor: pointer;
    color: #1a1f26;
	border-radius: 3px;
	display: inline-block;
	color: #eee;
	margin-left: 10px;
}

.tooltipster-sidetip.tooltipster-shadow .tooltipster-content .button.first {
	margin-left: 0px;
}

.tooltipster-sidetip.tooltipster-shadow .tooltipster-content .button {
	background-image: linear-gradient(#727272, #303030);
}

.tooltipster-sidetip.tooltipster-shadow .tooltipster-content .button:active {
	background-image: linear-gradient(#303030, #727272);
}

.tooltipster-sidetip.tooltipster-shadow .tooltipster-content .play {
	background-image: linear-gradient(#8fdb46, #73d216);
	color: #303030;
}

.tooltipster-sidetip.tooltipster-shadow .tooltipster-content .play:active {
	background-image: linear-gradient(#73d216, #8fdb46);
}

.tooltipster-sidetip.tooltipster-shadow .tooltipster-content .remove {
	background-image: linear-gradient(#db4646, #d21616);
	color: #303030;
}

.tooltipster-sidetip.tooltipster-shadow .tooltipster-content .remove:active {
	background-image: linear-gradient(#d21616, #db4646);
}

#openCollectionGrid {
	transition:All 200ms ease-in;
	-webkit-transition:All 200ms ease-in;
	-moz-transition:All 200ms ease-in;
	-o-transition:All 200ms ease-in;
}

#collectionsGrid.hidden {
	visibility: hidden;
}

#collectionsGrid .grid-item {
	min-width: 20px;
	height: 20px;
	margin: 5px;
	padding: 5px;
	cursor: pointer;
	background-color: #1a1f26;
	color: #ccc;
	border-radius: 3px;
}

#collectionsGrid .grid-item.on {
	background: #ccc;
	color: #000;
}

#collectionsGrid .grid-item.on div.context{
	display: inline-block;
	background: url("http://cdn.crazyerics.com/images/add.png") center center no-repeat;
	width: 20px;
	height: 10px;
	margin-left: 20px;

	transition:All 200ms ease-in;
	-webkit-transition:All 200ms ease-in;
	-moz-transition:All 200ms ease-in;
	-o-transition:All 200ms ease-in;
}

#collectionsGrid .grid-item div.button {
	float: left;
	height: 20px;
	width: 20px;
	margin: 0px 5px;
}

#collectionsGrid .grid-item div.add {
	background: url("http://cdn.crazyerics.com/images/add.png") center center no-repeat;
	height: 20px;
	width: 20px;

	transition:All 200ms ease-in;
	-webkit-transition:All 200ms ease-in;
	-moz-transition:All 200ms ease-in;
	-o-transition:All 200ms ease-in;
}

#collectionsGrid .grid-item div.loadFeature {
	background: url("http://cdn.crazyerics.com/images/morefeatured.png") center center no-repeat;
	height: 20px;
	width: 20px;

	transition:All 200ms ease-in;
	-webkit-transition:All 200ms ease-in;
	-moz-transition:All 200ms ease-in;
	-o-transition:All 200ms ease-in;
}

#collectionsGrid div.button {
	cursor: pointer;
}

#collectionsGrid .grid-item div.confirm {
	background: url("http://cdn.crazyerics.com/images/col-ok.png") center center no-repeat;
}

#collectionsGrid .grid-item div.cancel {
	background: url("http://cdn.crazyerics.com/images/col-close.png") center center no-repeat;
}

#collectionsGrid .grid-item div.controls {

	height: 20px;
	display: none;
} 

#collectionsGrid input {
	float: left;
	padding: 0px 5px;
	margin-right: 5px;
	height: 20px;
	border-radius: 0px;
	background: none;
	border: 0;
	box-shadow: none;
	font-size: 12px;
	text-align: left;
	width: 125px;
	outline: none;
	background: #fff;
	color: #444444;
	outline: 0;
	outline-offset: -2px;
}

#collectionsGrid {
	padding-top: 10px;
}

div.collection-tooltip {
	text-align: center;
}

div.mediawrapper {
	display: none;
}

/* game links */

.gamelink {
	margin: 5px;
}

.gamelink .box {
	position: relative;
	cursor: pointer;

	transition:All 200ms ease-in;
	-webkit-transition:All 200ms ease-in;
	-moz-transition:All 200ms ease-in;
	-o-transition:All 200ms ease-in;
}

/* .gamelink .remove {
	position: absolute;
	width: 22px;
	height: 22px;
	display: none;
	top: -5px;
	right: -5px;
	z-index: 200;
} */

div.gamelink-tooltip {
	text-align: center;
}

div.tooltiptitle {
	font-size: 1.2em;
	line-height: 30px;
	font-weight: bold;
}

.tooltipcaption {
	line-height: 30px;
	max-width: 300px;
}

div.tooltipfile {
	color: green;
}

/* suggestions */

#suggestionswrapper {
	height: auto;
	padding: 0px 10px;
}

#suggestionsfilters {
	display: none;
}

div.suggestionsbar {
	font-size: 1.2em;
	margin: 10px 0px 20px 0px;
	text-align: center;
}

div.suggestionsbar a {
	padding: 0px 8px;
	cursor: pointer;
	text-decoration: none;
}

div.suggestionsbar div, div.suggestionsbar input {
	padding: 0px 5px;
	display: inline-block;
}

div.suggestionsbar input {
	margin-left: 10px;
}

#suggestionswrapper ul {
	width: 120px;
	display: inline-block;
	margin: 0px 5px;
	padding: 0;
	vertical-align: top;
}

#suggestionswrapper li {
	list-style: none;
	margin: 5px 0px;
}

#suggestionsloading {
	width: 100%;
	height: 100px;
	margin: 20px 0;
	background-position: center center;
	background-repeat: no-repeat;

	transition:All 100ms ease-in;
	-webkit-transition:All 100ms ease-in;
	-moz-transition:All 100ms ease-in;
	-o-transition:All 100ms ease-in;
}

#output {
	display: none;
	width: 100%
}

/* corner ribbons */

.ribbon-wrapper {
	width: 85px;
	height: 88px;
	overflow: hidden;
	position: absolute;
	top: -3px;
	right: -3px;
}

.ribbon {
	font: bold 11px Sans-Serif;
	color: #333;
	text-align: center;
	text-shadow: rgba(255,255,255,0.5) 0px 1px 0px;
	-webkit-transform: rotate(45deg);
	-moz-transform:    rotate(45deg);
	-ms-transform:     rotate(45deg);
	-o-transform:      rotate(45deg);
	position: relative;
	padding: 7px 0;
	left: -5px;
	top: 15px;
	width: 120px;
	-webkit-box-shadow: 0px 0px 3px rgba(0,0,0,0.3);
	-moz-box-shadow:    0px 0px 3px rgba(0,0,0,0.3);
	box-shadow:         0px 0px 3px rgba(0,0,0,0.3);
}

.ribbon-green {

	background-color: #BFDC7A;
	background-image: -webkit-gradient(linear, left top, left bottom, from(#BFDC7A), to(#8EBF45)); 
	background-image: -webkit-linear-gradient(top, #BFDC7A, #8EBF45); 
	background-image:    -moz-linear-gradient(top, #BFDC7A, #8EBF45); 
	background-image:     -ms-linear-gradient(top, #BFDC7A, #8EBF45); 
	background-image:      -o-linear-gradient(top, #BFDC7A, #8EBF45); 
	color: #6a6340;
}

.ribbon-green:before, .ribbon-green:after {
	
	border-top:   3px solid #6e8900;
}

.ribbon-red {

	background-color: #B76599;
	background-image: -webkit-gradient(linear, left top, left bottom, from(#B76599), to(#AF3F72)); 
	background-image: -webkit-linear-gradient(top, #B76599, #AF3F72); 
	background-image:    -moz-linear-gradient(top, #B76599, #AF3F72); 
	background-image:     -ms-linear-gradient(top, #B76599, #AF3F72); 
	background-image:      -o-linear-gradient(top, #B76599, #AF3F72); 
	color: #333;
}

.ribbon-red:before, .ribbon-red:after {
	
	border-top:   3px solid #610059;
}

.ribbon-orange {

	background-color: #EBC681;
	background-image: -webkit-gradient(linear, left top, left bottom, from(#EBC681), to(#D0A84B)); 
	background-image: -webkit-linear-gradient(top, #EBC681, #D0A84B); 
	background-image:    -moz-linear-gradient(top, #EBC681, #D0A84B); 
	background-image:     -ms-linear-gradient(top, #EBC681, #D0A84B); 
	background-image:      -o-linear-gradient(top, #EBC681, #D0A84B); 
	color: #333;
}

.ribbon-orange:before, .ribbon-orange:after {
	
	border-top:   3px solid #8F5400;
}

.ribbon-blue {

	background-color: #5D739C;
	background-image: -webkit-gradient(linear, left top, left bottom, from(#5D739C), to(#3E4E8E)); 
	background-image: -webkit-linear-gradient(top, #5D739C, #3E4E8E); 
	background-image:    -moz-linear-gradient(top, #5D739C, #3E4E8E); 
	background-image:     -ms-linear-gradient(top, #5D739C, #3E4E8E); 
	background-image:      -o-linear-gradient(top, #5D739C, #3E4E8E); 
	color: #333;
}

.ribbon-blue:before, .ribbon-blue:after {
	
	border-top:   3px solid #07345D;
}


.ribbon:before, .ribbon:after {
	content: "";
	border-left:  3px solid transparent;
	border-right: 3px solid transparent;
	position:absolute;
	bottom: -3px;
}

.ribbon:before {
	left: 0;
}
.ribbon:after {
	right: 0;
}​

/* side menu */

.menuwrapper {
	background-color: #101921;
	margin-bottom: 10px;
	padding: 10px;
	text-align: center;
}


@-webkit-keyframes tada { 
    0% {-webkit-transform: scale(1);} 
    10%, 20% {-webkit-transform: scale(0.9) rotate(-3deg);} 
    30%, 50%, 70%, 90% {-webkit-transform: scale(1.1) rotate(3deg);} 
    40%, 60%, 80% {-webkit-transform: scale(1.1) rotate(-3deg);} 
    100% {-webkit-transform: scale(1) rotate(0);} 
} 
@keyframes tada { 
    0% {transform: scale(1);} 
    10%, 20% {transform: scale(0.9) rotate(-3deg);} 
    30%, 50%, 70%, 90% {transform: scale(1.1) rotate(3deg);} 
    40%, 60%, 80% {transform: scale(1.1) rotate(-3deg);} 
    100% {transform: scale(1) rotate(0);} 
} 
.tada { 
    -webkit-animation-name: tada; 
    animation-name: tada; 
}

.pulsehover:hover {
	animation: pulse 2s infinite;
}

.pulse {
	animation: pulse 2s infinite;
}

@keyframes pulse {
	0% {
	  	color: #1E90FF;
	}
	50% {
		color: #00BFFF;	
	}
	100% {
		color: #1E90FF;
	}
  }

  .sepia {
	-webkit-filter: sepia(1); /* Safari */
    filter: sepia(1);
  }

  /*Huge thanks to @tobiasahlin at http://tobiasahlin.com/spinkit/ */
.spinner {
	margin: 0px auto 0;
	width: 12px;
	text-align: center;
  }
  
  .spinner > div {
	width: 4px;
	height: 4px;
	background-color: #333;
  
	border-radius: 100%;
	display: inline-block;
	-webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
	animation: sk-bouncedelay 1.4s infinite ease-in-out both;
  }
  
  .spinner .bounce1 {
	-webkit-animation-delay: -0.32s;
	animation-delay: -0.32s;
  }
  
  .spinner .bounce2 {
	-webkit-animation-delay: -0.16s;
	animation-delay: -0.16s;
  }
  
  @-webkit-keyframes sk-bouncedelay {
	0%, 80%, 100% { -webkit-transform: scale(0) }
	40% { -webkit-transform: scale(1.0) }
  }
  
  @keyframes sk-bouncedelay {
	0%, 80%, 100% { 
	  -webkit-transform: scale(0);
	  transform: scale(0);
	} 40% { 
	  -webkit-transform: scale(1.0);
	  transform: scale(1.0);
	}
  }

  .noselect {
	-webkit-touch-callout: none; /* iOS Safari */
	  -webkit-user-select: none; /* Safari */
	   -khtml-user-select: none; /* Konqueror HTML */
		 -moz-user-select: none; /* Old versions of Firefox */
		  -ms-user-select: none; /* Internet Explorer/Edge */
			  user-select: none; /* Non-prefixed version, currently
									supported by Chrome, Edge, Opera and Firefox */
  }