@font-face {
  font-family: 'Geo';
  font-style: normal;
  font-weight: 400;
  src: local('Geo'), local('Geo-Regular'), url('fontgeo.woff') format('woff');
}

*, *:after, *:before { -webkit-box-sizing: border-box; box-sizing: border-box; }
.clearfix:before, .clearfix:after { content: ''; display: table; }
.clearfix:after { clear: both; }

body {
	background: #f9f7f6;
	color: #404d5b;
	font-weight: 500;
	font-size: 1.05em;
}

a {
	color: #2fa0ec;
	text-decoration: none;
	outline: none;
}

a:hover, a:focus {
	color: #404d5b;
}

.container {
	margin: 0 auto;
	text-align: center;
	overflow: hidden;
}

.content {
	font-size: 150%;
	padding: 3em 0;
}

.content h2 {
	margin: 0 0 2em;
	opacity: 0.1;
}

.content p {
	margin: 1em 0;
	padding: 5em 0 0 0;
	font-size: 0.65em;
}

.bgcolor-1 { background: #f0efee; }
.bgcolor-2 { background: #f9f9f9; }
.bgcolor-3 { background: #e8e8e8; }
.bgcolor-4 { background: #2f3238; color: #fff; }
.bgcolor-5 { background: #df6659; color: #521e18; }
.bgcolor-6 { background: #2fa8ec; color: #fff;}
.bgcolor-7 { background: #d0d6d6; }
.bgcolor-8 { background: #3d4444; color: #fff; }
.bgcolor-9 { background: #8781bd; color: #fff; }
.bgcolor-10 { background: #6C6C6C; }

body .nomargin-bottom {
	margin-bottom: 0;
}

/* Header */
.codrops-header {
	padding: 3em 190px 4em;
	letter-spacing: -1px;
}

.codrops-header h1 {
	font-weight: 800;
	font-size: 4em;
	line-height: 1;
	margin: 0.25em 0 0;
}

.codrops-header h1 span {
	display: block;
	font-size: 50%;
	font-weight: 400;
	padding: 0.325em 0 1em 0;
	color: #c3c8cd;
}

/* Demos nav */
.codrops-demos a {
	text-transform: uppercase;
	letter-spacing: 1px;
	font-weight: bold;
	font-size: 0.85em;
	display: inline-block;
	margin: 0 1em;
	font-family: "Avenir", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.codrops-demos a.current-demo {
	border-bottom: 2px solid;
	color: #404d5b;
}

/* Top Navigation Style */
.codrops-links {
	position: relative;
	display: inline-block;
	white-space: nowrap;
	font-size: 1.25em;
	text-align: center;
}

.codrops-links::after {
	position: absolute;
	top: 0;
	left: 50%;
	margin-left: -1px;
	width: 2px;
	height: 100%;
	background: #dbdbdb;
	content: '';
	-webkit-transform: rotate3d(0,0,1,22.5deg);
	transform: rotate3d(0,0,1,22.5deg);
}

.codrops-icon {
	display: inline-block;
	margin: 0.5em;
	padding: 0em 0;
	width: 1.5em;
	text-decoration: none;
}

.codrops-icon span {
	display: none;
}

.codrops-icon:before {
	margin: 0 5px;
	text-transform: none;
	font-weight: normal;
	font-style: normal;
	font-variant: normal;
	font-family: 'codropsicons';
	line-height: 1;
	speak: none;
	-webkit-font-smoothing: antialiased;
}

.codrops-icon--drop:before {
	content: "\e001";
}

.codrops-icon--prev:before {
	content: "\e004";
}

/* Related demos */
.content--related {
	text-align: center;
	color: #D8DADB;
	font-weight: bold;
}

.media-item {
	display: inline-block;
	padding: 1em;
	vertical-align: top;
	-webkit-transition: color 0.3s;
	transition: color 0.3s;
}

.media-item__img {
	opacity: 0.8;
	-webkit-transition: opacity 0.3s;
	transition: opacity 0.3s;
}

.media-item:hover .media-item__img,
.media-item:focus .media-item__img {
	opacity: 1;
}

.media-item__title {
	font-size: 0.75em;
	margin: 0;
	padding: 0.5em;
}

@media screen and (max-width: 50em) {
	.codrops-header {
		padding: 3em 10% 4em;
	}
}

@media screen and (max-width: 40em) {
	.codrops-header h1 {
		font-size: 2.8em;
	}
}
 
/* Sets Width to Maximum allowed */
.sistemDiv {
    display: none; 
    width: 359px; 
    padding: 10px; 
    background-color: #ccc;
    font-family: Tahoma;
    font-size: 10px;
}
.sistemDiv:after {
    content: " ";
    display: block;
    height: 0;
    clear: both;
    *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML += '<div class="ie7-clear"></div>' );
}
.ie7-clear {
    display: block;
    clear: both;
}

.sumbatDiv {
    display: none; 
    width: 359px; 
    padding: 10px; 
    background-color: #ddd;
    font-family: Tahoma;
    font-size: 16px;
}
.sumbatDiv:after {
    content: " ";
    display: block;
    height: 0;
    clear: both;
    *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML += '<div class="ie7-clear"></div>' );
}
.ie7-clear {
    display: block;
    clear: both;
}
    
.tayangDiv {
    display: none; 
    width: 359px; 
    padding: 10px; 
    background-color: #eee;
    font-family: Tahoma;
    font-size: 16px;
}
.tayangDiv:after {
    content: " ";
    display: block;
    height: 0;
    clear: both;
    *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML += '<div class="ie7-clear"></div>' );
}
.ie7-clear {
    display: block;
    clear: both;
}

.startile{
    float: left;
    margin-left: 5px;
    margin-top: 5px;
    height: 100px;
    width: 100px;
    white-space: nowrap;
    text-align: center;
    background-color: #46abca;
}
.startile:before{
    content: "";
    display: inline-block;
    vertical-align: middle;
    width: 0;
    height: 90px;
}
.startilebox{
    vertical-align: middle;
    display: inline-block;
    white-space: normal;
    font-family: Tahoma;
    font-size: 200%;
}
.synthesisTile{
    float: left;
    margin-left: 5px;
    margin-top: 5px;
    margin-bottom: 20px;
    height: 50px;
    width: 100px;
    white-space: nowrap;
    text-align: center;
    background-color: #73AD21;
    border-radius: 15px 50px;
}
.navbtn{
    background-color: #707070; 
    color: #f0f0f0; 
    display:inline-block; 
    text-align: center; 
    vertical-align: middle;
    width: 340px; 
    margin-top:10px;
    margin-bottom:10px;
    height: 40px;
}

.longtile{
    float: left;
    margin-left: 5px;
    margin-top: 5px;
    padding: 10px;
    width: 300px;
    white-space: nowrap;
    text-align: center;
    background-color: #fffff0;
}
.longtile:before{
    content: "";
    vertical-align: middle;
    width: 0;
    height: 90px;
}
.longtilebox{
    display: inline-block;
    vertical-align: middle;
    white-space: normal;
    font-family: Tahoma;
    font-size: 200%;
}
.bodtile{
    float: left;
    margin-left: 5px;
    margin-top:5px;
    padding-top:10px;
    height: 120px;
    width: 120px;
    white-space: nowrap;
    text-align: center;
    background-color: #f0f0f0;
    border-radius: 10px 10px 25px 25px;
    
}
.bodetile{
    font-size: 15px;
    float: left;
    margin-left: 2px;
    margin-top:2px;
    width: 22px;
    white-space: nowrap;
    text-align: center;
    background-color: #aaa;
}
.bodetile:before{
    content: "";
    vertical-align: middle;
    width: 0;
    height: 30px;
}
.keytile{
    float: left;
    margin-left: 5px;
    margin-top: 5px;
    height: 80px;
    width: 100px;
    white-space: nowrap;
    text-align: center;
    background-color: #8B5F65;
}
.keytile:before{
    content: "";
    display: inline-block;
    vertical-align: middle;
    width: 0;
    height: 70px;
}
.keytilebox{
    vertical-align: middle;
    display: inline-block;
    white-space: normal;
    font-family: Tahoma;
    color: #f0f0f0;
    font-size: 200%;
}

div#logo {
    border: 0px solid #000000;
	height: 60px;
    width: 359px;

    vertical-align: middle;
	border-radius:1px; 
    box-sizing: border-box;
    padding: 0px;
	font-family: Tahoma, sans-serif; 
	font-size: 140%;
	color:  #f0f0f0; 
    background-color: black;
}
div#main {
    margin: auto;
    width: 300px;
    position: relative;
}
 
/* Set's Style for the Copyright Paragraph text */
div#kopirait p {
	font-family: Tahoma, sans-serif;  
	font-size: 90%; 
	color: div#336633; 
	margin-left: 5px;
	font-weight: bold;
	clear: both;
}
div label input {
   margin-right:100px;
}
body {
    font-family:sans-serif;
}

#ck-button {
    margin:4px;
    height: 80px;
    background-color:#CFCFCF;
    border-radius:4px;
    border:1px solid #D0D0D0;
    overflow:none;
    float:left;
}

#ck-button:hover {
    background:#0af;
}

#ck-button label {
    float:left;
    width:4.0em;
}

#ck-button label span {
    text-align:center;
    padding:3px 0px;
    display:block;
}

#ck-button label input {
    position:absolute;
    top:-20px;
}

#ck-button input:checked + span {
    background-color:#05a;
    color:#fff;
    height: 75px;
}
    
 .keypadBox { 
    -moz-border-radius-topleft:30px;
    -webkit-border-top-left-radius:30px;
    border-top-left-radius:30px;
    border: 1px solid #848484;
    outline:0; 
    height:50px; 
    width: 275px; 
    padding-left:20px; 
    padding-right:20px;
    text-align: right;
    font-size: 30px;
  } 

.bodyField{
    margin:1px auto 0;
    padding:10px;
    background-color:#eee;
    color:#333;
    height: 80px;
}
label{
    font-size:15px;
    font-weight:700
}
.bodyLabel{
    background-repeat:no-repeat;
    background-position:6px;
    border:1px solid #DADADA;
    margin-top:10px;
    margin-bottom:10px;
    margin-right: 10px;
    padding-right:10px;
    width:280px;
    height:30px;
    font-size:14px;
    box-shadow:0 0 10px;
    text-align: right;
    -webkit-box-shadow:0 0 10px;
    /* For I.E */
    -moz-box-shadow:0 0 10px;
    /* For Mozilla Web Browser */
    border-radius:5px;
    -webkit-border-radius:5px;
    /* For I.E */
    -moz-border-radius:5px
    /* For Mozilla Web Browser */
}

button
{
	display: block;
	font-size: 1.1em;
	font-weight: bold;
	text-transform: uppercase;
    width: 340px;
    height: 50px;
	padding: 10px 15px;
	margin: auto;
    margin-top: 10px;
	color: #ccc;
	background-color: #555;
	background: -webkit-linear-gradient(#888, #555);
	background: linear-gradient(#888, #555);
	border: 0 none;
	border-radius: 3px;
	text-shadow: 0 -1px 0 #000;
	box-shadow: 0 1px 0 #666, 0 5px 0 #444, 0 6px 6px rgba(0,0,0,0.6);
	cursor: pointer;
}
button:active
{
    color:#fff;
    text-shadow: 0 -1px 0 #444, 0 0   5px #ffd, 0 0   8px #fff;
    box-shadow:  0  1px 0 #666, 0 2px 0   #444, 0 2px 2px rgba(0,0,0,0.9);
    -webkit-transform: translateY(3px);
    -webkit-animation: none;
    animation: none;
}