@font-face {
	font-family:'HelveticaNeueLight-Regular';
	src: url('helveticaneuelight.eot');
	src: url('helveticaneuelight.eot?#iefix') format('embedded-opentype'),
		url('helveticaneuelight.woff') format('woff'),
		url('helveticaneuelight.ttf') format('truetype'),
		url('helveticaneuelight.otf') format('opentype'),
		url('helveticaneuelight.svg#HelveticaNeueLight-Regular') format('svg');
	font-weight: 400;
	font-style: normal;
	font-stretch: normal;
	unicode-range: U+0020-02DC;
}

@font-face {
	font-family:'HelveticaNeueBold-Regular';
	src: url('helveticaneuebold.eot');
	src: url('helveticaneuebold.eot?#iefix') format('embedded-opentype'),
		url('helveticaneuebold.woff') format('woff'),
		url('helveticaneuebold.ttf') format('truetype'),
		url('helveticaneuebold.otf') format('opentype'),
		url('helveticaneuebold.svg#HelveticaNeueBold-Regular') format('svg');
	font-weight: 400;
	font-style: normal;
	font-stretch: normal;
	unicode-range: U+0020-02DC;
}

* {
	padding: 0px;
	margin: 0px;
}

button:focus { 
	outline-width: 2px;
	outline-style: solid;
	outline-color: #5E9ED6;
}

button:active {
	outline-style: none;
}

body, html {
	-webkit-touch-callout: none;
	-webkit-text-size-adjust: none;
	-webkit-user-select: none;
	-webkit-tap-highlight-color: rgba(0,0,0,0);	
	
	background-image: none;
	background-color: #000000;
	color: #ffffff;

	width: 100%;
	height: 100%;
	overflow: hidden;
}		

#og-game-holder,
#game {
	position: absolute;
	width: 100%;
	height: 100%;
	background-color: #000000;
}

div.settings_container {
    position: absolute;
    padding: 0;
    margin: 0;
    background-size: cover;
    background-position: center center;
    width: 100%;
    height: 100%;
}

div.settings_panel {
    font-family: Helvetica,Arial,sans-serif;
    color: #424d4d;
    font-size: 15px;
    position: absolute;
    top: 4%;
    left: 2%;
    bottom: 4%;
    right: 4%;
    width: 96vw;
    height: 93vh;
    border-radius: 6px ;
    background-color: #faf9f9;
    -webkit-box-shadow: 0px 0px 10px 5px rgba(0,0,0,0.3);
    -moz-box-shadow: 0px 0px 10px 5px rgba(0,0,0,0.3);
    box-shadow: 0px 0px 10px 5px rgba(0,0,0,0.3);
    padding: 0;
    margin: 0;
}

div.settings_panel h1, div.settings_panel h2 {
    font-weight: bold;
    font-size: 16px;
    margin: 0;
    padding: 0;
}

div.settings_panel h2 {
    font-size: 15px;
}

div.settings_panel div.column_wrap {
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    text-align: center;
}

div.settings_panel div.column {
    height: 100%;
    display: inline-block;
    padding: 0;
    margin: auto;
    overflow: hidden;
    position: relative;
}

div.settings_panel div.column.left {
    width: 15%;
    float: left;
    position: relative;
}

div.settings_panel div.column.center {
    width: 62%;
}

div.settings_panel div.column.right {
    width: 15%;
    float: right;
    position: relative;
}

div.settings_panel div.title_container {
    overflow: hidden;
    height: 16%;
    width: 100%;
    position: relative;
}

div.settings_panel div.title_container>div.title {
    font-weight: bold;
    overflow: hidden;
    width: 100%;
    padding: 1px;
    position: absolute;
    top: 50%;
    left: 46%;
    -ms-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

div.settings_panel div.title_container>div.title>span {
    display: inline-block;
    font-size: 16px;
    font-weight: bold;
    margin-top: 16px;
}

div.settings_panel div.items {
    height: 80%;
    overflow: auto;
}

div.settings_panel div.item_container {
    height: 33%;
    overflow: hidden;
    text-align: left;
    position: relative;
}

div.settings_panel div.item_inner {
    position: absolute;
    width: 100%;
    top: 50%;
    left: 50%;
	padding-right:100px;
	box-sizing:border-box;
    -ms-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

div.settings_panel div.item_container p {
    color: #676f6f;
    width: 86%;
    line-height: 18px;
    margin-top: 6px ;
    padding: 0;
    font-size: 14px;
}

div.settings_panel div.item_container {
}

div.settings_panel div.item_inner div.toggle {
	width: 82px;
	height: 64px;
	
    position: absolute;
    right: 0px;
    top: -10px;
}

div.settings_panel div.nav {
    position: absolute;
    width: 42px ;
    height: 42px ;
    background-size: cover;
}

div.settings_panel div.nav.left {
    top: 50%;
    left: 50%;
    -ms-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

div.settings_panel div.nav.right {
    top: 50%;
    left: 50%;
    -ms-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

div.settings_panel div.toggle button {
    width: 64px;
    height: 32px;
}

@media only screen and (min-device-width:700px) {

    div.settings_panel {
        top: 55.5%;
        left: 48%;
        width: 84vw ;
        height: 69vh ;
        position: absolute;
        margin-left: -40vw;
        margin-top: -40vh;
    }

    div.settings_panel h1 {
        font-size: 24px;
    }

    div.settings_panel h2 {
        font-size: 18px;
    }

    div.settings_panel p {
        font-size: 15px;
    }

    div.settings_panel div.nav {
        width: 64px;
        height: 64px;
    }

    div.settings_panel div.item_inner div.toggle {
        width: 100px;
        height: 55px;
	
		position: absolute;
		right: 0px;
		top: -3px;		
    }

    div.settings_panel div.toggle button {
        width: 95px;
        height: 48px;
    }

    div.settings_panel div.column.center {
        width: 57%;
    }

    div.settings_panel div.item_inner{
        top: 50%;
    }

    div.settings_panel div.title_container>div.title{
        left: 46%;
    }

    div.settings_panel div.title_container>div.title>span {
        font-size: 18px;
        margin-top: 10px;
        vertical-align: baseline;
    }
	
    div.settings_panel div.item_container {
        height: 33%
    }
}