/* Main Stylesheet for IGNIEUS */
@import url(https://fonts.googleapis.com/css?family=Lato:300,300italic,400,400italic);
@font-face {
	font-family: IGNIEUS;
	src: url(../fonts/IGNIEUS_0.3.ttf);
}
* {
	box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    /* Needed to make safari look the same as Chrome */
    -webkit-font-smoothing:subpixel-antialiased;
}
body {
	margin: 0;
	background-color: #252525;
	color: #e59500;
	-webkit-touch-callout: none;
	-webkit-user-select: none; 
	-khtml-user-select: none;  
	-moz-user-select: none;    
	-ms-user-select: none;     
	user-select: none;           
}
body::selection {
	background: rgba(0,0,0,0);
}
h5 {
	font-size: 2.75em;
	color: #0b9;
	margin: 0;
	text-transform: uppercase;
}
.shrink {
	font-size: 70%;
}
h1, h2, h3, h4, h5 {
	font-family: Lato;
	font-weight: 300;
}
h1 {
	margin: 0;
	text-align: justify;
	margin-bottom: -1em;
}
h1:after {
	content: "";
	display: inline-block;
	width: 100%;
}
h1 a {
	font-weight: 300 !important;
	text-decoration: none;
}
h1 a:hover {
	background: none !important;
	color: #00f593 !important;
}
h1 a:active {
	color: #c7f7f7 !important;
}
h2 {
	margin: 0.5em 0 0 0;
	/*padding-left: 0.5em;*/
	font-weight: 300;
	text-align: left;
	font-size: 1em;
}
h4 {
	margin: 0;
	/*padding-left: 0.5em;*/
	font-weight: 300;
	text-align: left;
	font-size: 0.75em
}
h3 {
	font-size: 1.25em;
}
h4 {
	margin: 0.5em 0 0.25em 0;
	font-size: 1.25em;
	width: 100%;
	text-align: right;
}
/*#score {
	font-family: IGNIEUS;
}*/
#tools {
	width: 1.5em;
	display: absolute;
	position: fixed;
	/*opacity: 0.3;*/
	top: 0;
	right: 0.25em;
	font-size: 4em;
	background: none;
	letter-spacing: -0.25em;
	line-height: 0.9em;
	text-align: center;
	transition: opacity 500ms;
	-webkit-transition: opacity 500ms;
}
#tools a {
	text-decoration: none;
	background: none;
}
#ignieus_info, #new_warning, #rnd_warning {
	width: 80%;
	margin: auto;
	font-family: Lato;
	font-weight: 300;
	text-transform: uppercase;
	padding: 2vw !important;
	background-color: rgba(30,30,30,0.85) !important;
}
#new_warning, #rnd_warning {
	width: 60%;
}
#ignieus_info p, #new_warning p, #rnd_warning p {
	color: #0b9;
}
#ignieus_info span {
	font-size: 175%;
	line-height: 0;
	vertical-align: -0.08em;
	text-transform: none;
	font-family: IGNIEUS;
}
.icon {
	text-decoration: none;
	font-family: IGNIEUS;
	position: relative;
	top : -0.04em;
}
.expand {
	font-size: 200%;
	top: 0px !important;
	right: 0px !important;
	/*background-color: #252525;*/
	/*border-radius: 25%*/
}
.expand:hover {
	background: none !important;
} 
.expand:active {
	color: #fff !important;
	background: none !important;
}
table {
	background-color: #252525;
	border-collapse: separate; 
}
.ignieus {
	/*display: table;*/
	text-align: center;
	margin: 0 auto;
	width: 100%;
}
.drag_style {
	margin-top: 0;
	font-size: 5em;
	/*text-align: left;*/
	/*letter-spacing: -0.126em;*/
}
.ignieus a, .drag_style a {
	cursor: move;
	text-decoration: none;
	background-color: none !important;
}
.drag_style, .slots .ui-draggable-dragging {
	cursor: move;
	/*display: block !important;*/
	/*width: 5em !important;*/
	/*font-size: 5em !important;*/
	/*background-color: none !important;*/
}
.notes {
	font-family: Lato;
	font-weight: 300;
}
input {
	text-transform: uppercase;
}
.slot_notes {
	width: 100%;
	background-color: rgba(0,0,0,0);
	border: none;
	outline: none;
	text-align: center;
}
.ignieus_panel, .ui-field-contain {
	margin: 0;
	font-family: IGNIEUS;
	font-size: 3.5em;
	text-align: justify;
	/*text-align-last: justify;*/
}
.ignieus_panel {
	display: flex;
	flex-wrap: wrap;
	width: 100%;
	margin: 0 auto;
	text-align: left;
}
.ignieus_panel div {
	width: 33.333%;
	text-align: center;
}
.glyph {
	display: inline;
	cursor: move;
	padding: 0.125em;
	font-weight: 100;
	text-decoration: none;
	/*letter-spacing: -0.5em;*/
	text-align: left;
	border-radius: 0.125em;
	background-color: rgba(64,64,64,0.25);
}
.lane_settings {
	display: flex;
	flex-wrap: wrap;
	flex-flow: row wrap;
	font-family: Lato;
	font-weight: 100;
}
.leftcol, .rightcol, .left_30, .right_70 {
	margin-bottom: 0.25em;
}
.leftcol {
	width: 50%;
	text-align: left;
	/*order: 0;*/
}
.rightcol {
	width: 50%;
	text-align: right;
	/*order: 1;*/
}
.left_30 {
	width: 30%;
	text-align: left;
	/*order: 0;*/
}
.right_70 {
	width: 70%;
	text-align: right;
	/*order: 1;*/
}
.lane0, .lane1, .lane2, .lane3, .lane4 {
	/*display: table-row;*/
	height: 8vw;
	width: 100%;
	margin: 0;
	padding: 0;
}
.lane0, .l0 {
	color: #18A1EE;	
}
.lane1, .l1 {
	color: #00f593;
}
.lane2, .l2 {
	color: #f5c300;
}
.lane3, .l3 {
	color: #f93500;
}
.lane4, .l4 {
	color: #C114C6;	
}
.cnudge {
	margin-top: -0.25em !important;
}
.crow {
	width: 100%;
	border-spacing: 0.3vw;
}
.container .chars {
	cursor: move;
	background-color: rgba(64,64,64,0.25);
	text-align: center;
	border-radius: 0.3vw;
}
.slots {
	cursor: move;
	text-align: center;
	border-radius: 0.3vw;
	background-color: rgba(64,64,64,0.25);
}
/* color links */
.c0, .c1, .c2, .c3, .c4 {
	font-family: Lato;
	font-size: 1.25em;
	text-decoration: none;
	letter-spacing: 0.25em;
	border-radius: 0.125em;
	margin-top:-1em !important;
	border: 1px solid;
}
.c0:hover, .c0.active  {
	background-color: #18A1EE !important;
}
.c0 {
	/*background-color: #18A1EE;*/
	/*border-color: rgba(24,161,238,1);*/
	border-color: #18A1EE;
}
.c1:hover, .c1.active {
	background-color: #00f593 !important;
}
.c1 {
	/*background-color: #00f593 !important;*/
	/*border-color: rgba(0,245,147,1);*/
	border-color: #00f593;
}
.c2:hover, .c2.active {
	background-color: #f5c300 !important;
}
.c2 {
	/*background-color: #f5c300 !important;*/
	/*border-color: rgba(245,195,0,1);*/
	border-color: #f5c300;
}
.c3:hover, .c3.active {
	background-color: #f93500 !important;
}
.c3 {
	/*background-color: #f93500 !important;*/
	/*border-color: rgba(249,53,0,1);*/
	border-color: #f93500;
}
.c4:hover, .c4.active {
	background-color: #C114C6 !important;
}
.c4 {
	/*background-color: #C114C6 !important;*/
	/*border-color: rgba(193,20,198,1);*/
	border-color: #C114C6;
}

#setting_values input, select, .ui-page-theme-b .ui-btn, html .ui-bar-b .ui-btn, html .ui-body-b .ui-btn, .ui-field-contain {
	font-family: Lato !important;
	color: #0b9 !important;
	font-weight: 100 !important;
	/*text-transform: uppercase;*/
}
label {
	display: inline-block !important;
	width: 100%;
	text-align: left !important;
	color: #0b9 !important;
	font-weight: 100 !important;
}

a.ui-btn.ui-btn-active, .ui-btn.ui-btn-active {
	background-color: #1d1d1d !important;
	border-color:  #1d1d1d !important;
}
.ignieus_panel a:focus, .ui-focus,.ui-page-theme-b .ui-btn, html .ui-bar-b .ui-btn, html .ui-body-b .ui-btn {
	outline: none !important;
	text-shadow: none !important;
	box-shadow: none !important;
}
/* Jquery Mobile CSS Corrections */
.ui-content {
	padding: 0.5vw !important;
}
.ui-page-theme-b a, html .ui-bar-b a, html .ui-body-b a, html body .ui-group-theme-b a {
	font-weight: normal;
	color: #0b9;
	-webkit-transition: color 250ms, background-color 250ms, text-shadow 250ms;
    transition: color 250ms, background-color 250ms, text-shadow 250ms;
}
.ui-page-theme-b a:hover, html .ui-bar-b a:hover, html .ui-body-b a:hover, html body .ui-group-theme-b a:hover {
	color: #00f593;
	text-shadow: 0 0 2px #00f593;
	background-color: rgba(32,32,32,0.5);
	background-size: 4em;
}
.ui-page-theme-b a:active, html .ui-bar-b a:active, html .ui-body-b a:active, html body .ui-group-theme-b a:active {
	color: #c7f7f7;
	text-shadow: 0 0 8px #dff;
	background-color: rgba(0,0,0,0.25);
	outline: none;
}
.ui-page-theme-b a:visited, html .ui-bar-b a:visited, html .ui-body-b a:visited, html body .ui-group-theme-b a:visited {
    color: #0b9;
    outline: none;
}
.ui-flipswitch .ui-btn.ui-flipswitch-on {
	color: #00f593 !important;
	text-shadow: 0 0 5px #00f593 !important;
	display: inline-block !important;
	height: 1.59em !important;
    -webkit-box-sizing: content-box !important;
    -moz-box-sizing: content-box !important;
    box-sizing: content-box !important;
}
.ui-flipswitch .ui-btn.ui-flipswitch-off {
	display: inline-block !important;
	height: 1.59em !important;
    -webkit-box-sizing: content-box !important;
    -moz-box-sizing: content-box !important;
    box-sizing: content-box !important;
}
.ui-flipswitch-active {
	background-color: #1d1d1d !important;
	border-color:  #1d1d1d !important;
	display: inline-block !important;
	width: 2em !important;
    -webkit-box-sizing: content-box !important;
    -moz-box-sizing: content-box !important;
    box-sizing: content-box !important;
}
.ui-page-theme-b .ui-btn.ui-btn-active, html .ui-bar-b .ui-btn.ui-btn-active, html .ui-body-b .ui-btn.ui-btn-active {
	color: #00f593 !important;
	text-shadow: 0 0 5px #00f593 !important;
}
.ui-mobile label, .ui-controlgroup-label {
	margin: 0 !important;
}
/* BEGIN: CSS for panel and content only scrolling */
/* https://forum.jquery.com/topic/implementation-of-panel-only-and-content-only-scroll-with-fixed-header */
body {
    overflow: hidden;
    font-family: IGNIEUS;
    font-size: 1em;
}
.ui-panel {
    top: -1px;
}
.ui-panel .ui-panel-inner,
.ui-panel-wrapper .ui-content {
    overflow-y: auto;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 1px;
    -webkit-overflow-scrolling: touch;
}
.ui-panel-dismiss-open,
.ui-panel-page-content-open .ui-content {
    overflow-y: hidden;
}
.ui-panel-wrapper {
    height: 100%;
    top: -1px;
    margin-bottom: -2px;
}
.ui-page {
    height: 100%;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
.ui-flipswitch {
	margin: 0 !important;
	font-family: Lato !important;
	color: #0b9 !important;
	font-weight: 100 !important;
	display: inline-block !important;
    -webkit-box-sizing: content-box !important;
    -moz-box-sizing: content-box !important;
    box-sizing: content-box !important;
}
/* END: CSS for panel and content only scrolling */

/* media queries */
@media (max-width: 640px) {
	h5 {
		margin-top: 1em;
	}
}