@font-face {
    font-family: Uniform;
    src: url('fonts/Uniform.ttf');
}
@font-face {
    font-family: UniformCondensed;
    src: url('fonts/Uniform-Condensed.ttf');
}
@font-face {
    font-family: UniformCondensedMedium;
    src: url('fonts/Uniform-Condensed-Medium.ttf');
}
@font-face {
    font-family: UniformExtraCondensed;
    src: url('fonts/Uniform-Extra-Condensed.ttf');
}
@font-face {
    font-family: UniformExtraCondensedBlack;
    src: url('fonts/Uniform-Extra-Condensed-Black.ttf');
}


/*
 ######
 #     #  ####  #####  #   #
 #     # #    # #    #  # #
 ######  #    # #    #   #
 #     # #    # #    #   #
 #     # #    # #    #   #
 ######   ####  #####    #
*/
body .wrapper .container {
	background-color: #fff;
	width: 692px;
	margin-top: 2em;
}
#ruleta-app {
    font-family: Uniform;
	background-color: #182438;
	color: #fff;
}
#ruleta-app p {
    color: #EFF0F1;
    line-height: 1.4;
}
#ruleta-app #results {
	background-color: #fff;
	color: #333;
}

#ruleta-app .clear::after, .clearfix::after {display: block; content: ''; clear: both;}
#ruleta-app .ss_information {cursor: pointer; position: relative; top: -2px;}
#ruleta-app input[type="text"] {margin-top: 0px; margin-bottom: 0px;}

#ruleta-app .ss_sprite {
	display: inline;
	overflow: hidden;
	height: 18px;
	padding-left: 18px;
	padding-bottom: 0px;
	background-repeat: no-repeat;
	background-image: url(sprites.png);
}
#ruleta-app .ss_information {
    /**/display: none;
    background-position: 0px -8749px;
}


/*
 ###
  #  #    # ######  ####
  #  ##   # #      #    #
  #  # #  # #####  #    #
  #  #  # # #      #    #
  #  #   ## #      #    #
 ### #    # #       ####
*/
#ruleta-app .info {
	padding: 32px 32px 24px 32px;
}
#ruleta-app .info h1 {
    font-family: UniformCondensedMedium;
    font-weight: bold;
	color: #06F9EF;
	font-size: 24pt;
	text-transform: uppercase;
	padding: 0px;
}


/*
  #####
 #     # ###### ##### ##### # #    #  ####   ####
 #       #        #     #   # ##   # #    # #
  #####  #####    #     #   # # #  # #       ####
       # #        #     #   # #  # # #  ###      #
 #     # #        #     #   # #   ## #    # #    #
  #####  ######   #     #   # #    #  ####   ####
*/
#ruleta-app .simulator {
	height: auto;
	padding: 20px 32px 0 32px;
	overflow: auto;
	background: #182438 url('simulator.jpg') no-repeat center top;
}
#ruleta-app .simulator form #system-standard-settings {
    /*height: 165px;*/
    overflow: hidden;
}
#ruleta-app .simulator form .clear {
    padding-bottom: 16px;
}
#ruleta-app .form-group {
	width: 24%;
	float: left;
    margin-right: 25px;
}
#ruleta-app .form-group::after {
    display: block;
    content: '';
    clear: both;
}

#ruleta-app .form-group.system,
#ruleta-app .form-group.cache,
#ruleta-app .form-group.spins,
#_ {
	width: auto;
	height: 42px;
	float: left;
}

#ruleta-app .simulator form label {
    display: block;
    font-family: UniformExtraCondensed;
    font-weight: bold;
    font-size: 10pt;
    line-height: 1.5;
    color: #06F9EF;
    text-transform: uppercase;
}
#ruleta-app .form-group.min label,
#ruleta-app .form-group.max label,
#ruleta-app .checkboxes .form-group label,
#_ {
    color: #fff;
}
#ruleta-app input,
#ruleta-app select,
#_ {
    display: block;
    float: left;
    width: 60px;
    min-width: 0px;
	height: 20px;
	border-radius: 0px;
    padding: 0 .5em;
    margin: 0 .5em 0 0;

	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}
#ruleta-app select[name="system"] {
	width: 108px;
}
#ruleta-app input[name="cache"] {
	width: 60px;
}
#ruleta-app input[name="spins"] {
    width: 84px;
	background-image: none;
	background-position: 0% 0%;
	background-repeat: repeat repeat;
}
#ruleta-app input[type="checkbox"] {
	width: auto;
    float: none;
    display: inline-block;
    margin: 0 0 0 .5em;
    position: relative;
    top: 6px;
}
#ruleta-app [name="simulate"] {
	display: inline-block;
    line-height: 39px;
    padding: 4px 0 0 0;
    width: 161px;
    text-align: center;
    text-transform: uppercase;
    font-family: UniformExtraCondensed;
    font-size: 17pt;
    font-weight: bold;
    color: #182438;
    border-radius: 22px;
    position: relative;
    top: 6px;

    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#4ef982+0,08f9ed+100 */
    background: rgb(78,249,130); /* Old browsers */
    background: -moz-linear-gradient(left, rgba(78,249,130,1) 0%, rgba(8,249,237,1) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(left, rgba(78,249,130,1) 0%,rgba(8,249,237,1) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to right, rgba(78,249,130,1) 0%,rgba(8,249,237,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4ef982', endColorstr='#08f9ed',GradientType=1 ); /* IE6-9 */
}
#ruleta-app .form-group .ss_information {
    position: relative; top: 1px;
}

#ruleta-app .system-info.notice {
    width: 300px;
    padding: 1em;
    line-height: 1.3em;
}

#ruleta-app #system-extra-settings {
}
#ruleta-app #system-extra-settings .label {
    display: block;
    float: left;
    font-family: UniformExtraCondensed;
    font-weight: bold;
    font-size: 10pt;
    line-height: 1.0;
    padding: 4px 3px 1px 3px;
    text-transform: uppercase;
    color: #182438;
    margin: 4px 0 1em 0;

    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#4ef982+0,08f9ed+100 */
    background: rgb(78,249,130); /* Old browsers */
    background: -moz-linear-gradient(left, rgba(78,249,130,1) 0%, rgba(8,249,237,1) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(left, rgba(78,249,130,1) 0%,rgba(8,249,237,1) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to right, rgba(78,249,130,1) 0%,rgba(8,249,237,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4ef982', endColorstr='#08f9ed',GradientType=1 ); /* IE6-9 */
}
#ruleta-app #system-extra-settings .form-group {
    margin-bottom: .5em;
}
#ruleta-app #system-extra-settings .form-group:nth-child(2) {
    clear: both;
}
#ruleta-app #system-extra-settings input,
#ruleta-app #system-extra-settings select,
#_ {
    width: 100%;
}


/*
 ######
 #     # ######  ####  #    # #      #####  ####
 #     # #      #      #    # #        #   #
 ######  #####   ####  #    # #        #    ####
 #   #   #           # #    # #        #        #
 #    #  #      #    # #    # #        #   #    #
 #     # ######  ####   ####  ######   #    ####
*/
#ruleta-app #results {
	display: none;
	position: relative;
	border: 0px solid white;
}
#ruleta-app .ui-tabs .ui-tabs-nav {
	margin: 0;
	padding: 0 32px;
	background:
	#FCAC07 url(tabs.jpg) left top no-repeat;
}
#ruleta-app .ui-widget-header { border: 0px solid white; }

#ruleta-app #results > div { padding-bottom: 10px; min-height: 54px; }

/* Charts */
#ruleta-app #chart,
#ruleta-app #chart2,
#ruleta-app #chart3 {
	float: left;
	width: 310px;
	height: 250px;
}

/* Table */
#ruleta-app table th {
	vertical-align: top;
	padding-top: 4.5px;
}
#ruleta-app tr.win td,
#ruleta-app div.win {
	color: #008000;
}
#ruleta-app tr.lose td,
#ruleta-app div.lose {
	color: #800000;
}
#ruleta-app table.results tbody tr td {
	vertical-align: top;
}
#ruleta-app .limited-height {
	max-height: 100px;
	overflow: auto;
}
#ruleta-app form > table > tbody > tr > th {
	width: 1px;
	padding-right: 13em;
	white-space: nowrap;
}

#ruleta-app table td table {
	width: 2px;
}
#ruleta-app table td table th,
#ruleta-app table td table td {
	white-space: nowrap; width: 1px;
}
#ruleta-app table td table td input{
	width: 32px;
}

/* Results table */
#ruleta-app table.results {
	width: 100%;
	margin-bottom: 1em;
	margin-top: 1em;
}
#ruleta-app table.results>thead>tr>th:nth-child(1) {
	border-top-left-radius: 5px;
}
#ruleta-app table.results>thead>tr>th:nth-last-child(1) {
	border-top-right-radius: 5px;
}
#ruleta-app table.results>tbody>tr:nth-last-child(1)>td:nth-child(1) {
	border-bottom-left-radius: 5px;
}
#ruleta-app table.results>tbody>tr:nth-last-child(1)>td:nth-last-child(1) {
	border-bottom-right-radius: 5px;
}

/* Series */
#statistics h4.serie { float: left; cursor: pointer; padding-right: 10px; border-right: 1px solid #999; margin-left: 10px; margin-bottom: 2px; }
#statistics .stat > h4.serie:nth-last-child(1) { border-right: 0px solid #FFF; }
#statistics h4.serie.active { text-decoration: underline; cursor: default; }
#statistics .stat { text-align: center; }
#statistics .stat:nth-child(1) { float: left; width: 358px; border-right: 1px solid #EEE; }
#statistics .stat:nth-child(2) { margin-left: 359px; }
#statistics .stat:nth-child(3) { clear: both; padding-top: 18px; border-top: 1px solid #EEE; }


/*
  #####
 #     # #####  ####  #####    ##    ####  ######
 #         #   #    # #    #  #  #  #    # #
  #####    #   #    # #    # #    # #      #####
       #   #   #    # #####  ###### #  ### #
 #     #   #   #    # #   #  #    # #    # #
  #####    #    ####  #    # #    #  ####  ######
*/
#ruleta-app form.save {
	width: 638px;
	line-height: 24px;
	position: absolute;
	top: 0px;
	right: 0px;
	z-index: 4;
	display: none;

	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}
#ruleta-app form.save a {
	display: block;
	line-height: 24px;
}
#ruleta-app .save input {
	width: auto;
	height: auto;
	margin: 0px;
	float: right;
	cursor: pointer;
	/*font-family: Helvetica, Arial, sans-serif; font-weight: bold;*/
	color: #EEE;
	background-color: #BB0F04;
	border: 0px solid white;
	padding: 5px 10px;
	border-radius: 5px;
	border-top-left-radius: 0px;
	border-top-right-radius: 0px;
}


/*
 #######
    #      ##   #####   ####
    #     #  #  #    # #
    #    #    # #####   ####
    #    ###### #    #      #
    #    #    # #    # #    #
    #    #    # #####   ####
*/
#ruleta-app h3 {
	font-size: 1.4em;
	margin: 0px;
	padding: 22.4px 0;
	text-align: center;
}
#ruleta-app #graph-cache {
	padding: 2em 0em 1em 0em;
}


/*
 ######
 #     #   ##    ####  # #    #   ##   #####  ####  #####
 #     #  #  #  #    # # ##   #  #  #    #   #    # #    #
 ######  #    # #      # # #  # #    #   #   #    # #    #
 #       ###### #  ### # #  # # ######   #   #    # #####
 #       #    # #    # # #   ## #    #   #   #    # #   #
 #       #    #  ####  # #    # #    #   #    ####  #    #
*/
.paginator a,
.paginator span,
#_ {
	display: inline-block;
	background-color: #182438;
	border-radius: 5px;
	margin-right: 1em;
	padding: 0 .5em;
	line-height: 1.4;
	color: #fff;
	font-size: 10pt;
	text-decoration: none;
}
.paginator span {
	-webkit-opacity: 0.62;
	-moz-opacity: 0.62;
	-ms-opacity: 0.62;
	-o-opacity: 0.62;
	opacity: 0.62;
}