@font-face {
    font-family: 'komado';
    src: url('../font/komado.eot'); /* IE9 */
    src: url('../font/komado.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('../font/komado.woff') format('woff'), /* Modern Browsers */
         url('../font/komado.ttf') format('truetype'), /* safari, android, iOS */
         url('../font/komado.svg#komado') format('svg'); /*Legacy iOS */
    src: url('../font/komado.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

.lsf-icon:before {
  content:attr(title);
  margin-right:0.3em;
  font-size:130%;
  font-family: 'komado';
  -webkit-text-rendering: optimizeLegibility;
  -moz-text-rendering: optimizeLegibility;
  -ms-text-rendering: optimizeLegibility;
  -o-text-rendering: optimizeLegibility;
  text-rendering: optimizeLegibility;
}

html {
  /*
  background: url(../images/24_col.gif) repeat-y top center;
  */
  background:#fff;
}

#page_wrap {
  color:#444;
  font-size:16px;
  line-height:150%;
}

#page_wrap h2 {
  font-size:24px;
  color:#000;
  margin:0em 0 0.8em;
}

#page_wrap h3 {
  margin:1em 0 0.5em;
  color:#000;
  font-weight:bold;
  font-size:18px;
}

#page_wrap h4 {
  margin:4em 0 0.5em;
  color:#000;
  font-weight:bold;
  font-size:14px;
}

#page_wrap h5 {
  color:#000;
  font-weight:bold;
  font-size:13px;
}

footer h2{
  font-weight:bold;
  line-height:200%;
  color:#666;
}


.container hr{
  border: 0;
  height: 0;
  border-top: 1px solid rgba(0,0,0, 0.4);
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  color:#ddd;
}

.title{
  font-size:3em;
  font-family:serif;
  font-weight:bold;
  color:#333;
}

.company{
  text-align:right;
}

.highlight {
  font-weight:bold;
}

.fl_right {
  float:right;
}

.fl_left {
  float:left;
}

table.border {
  border:solid 1px gray;
}

table.border th {
  padding:0.5em;
  border:solid 1px gray;
}
table.border td {
  padding:0.5em;
  border:solid 1px gray;
}

table.thblue th {
  background:#CEE;
  font-weight:bold;
}

dt{
  font-weight:bold;
}

dd {
  padding-left:1em;
}

.horizontal li{
    float:left;
    padding-right:1em;
}

.q_list{
  line-height:200%;
}

.question{
  padding-top:1em;
  border-bottom:dashed 1px gray;
  text-indent:-1em;
  padding-left:1em;
}

.answer li {
 padding-left:1em;
}

table.resolution {
  width:150px;
}

.resolution td{
  border:dotted 1px gray;
  padding:0 0.2em 0;
  text-align:right;
}

.notes {
  padding-left:2em;
  background:#F0F0F0;
  font-size:small;
}

.topimg {
  vertical-align:top;
}

.download {
  background:url(../images/download.png);
  background-size:cover;
  -moz-background-size:cover;
  -webkit-background-size:cover;
  border:none;
  min-height:32px;
  min-width:80px;
  max-height:171px;
  max-width:400px;
  width:100%;
  height:auto;
}

.dlbtn {
  background:none;
  border:none;
  cursor:pointer;
}

.abtlogo{
  height:30px;
}

.dlbtn img{
  width:100%;
}

nav {
  background-color:rgba(44,44,44,1.0);
}
nav li small{
  color:#AAA;
}

nav li a{
  padding:0px;
  display:block;
  cursor:pointer;
  vertical-align:center;
  font: 400 13px/1.4 'Cutive', Helvetica, Verdana, Arial, sans-serif;
  text-align:center;
  text-decoration:none;
  color:#EEE;
}

nav li a small{
  color:#AAA;
  font: 100 11px/1 Helvetica, Verdana, Arial, sans-serif;
}

.centered_frame {
  position:relative;
  overflow:hidden;
}

.centered_outer {
  position:relative;
  margin-left:50%;
  float:left;
}
.center{
  position:relative;
  margin-left:-50%;
  float:left;
}

.center10em{
  margin-left:auto;
  margin-right:auto;
  width:50%;
}
.topimage{
  width:100%;
}
.history{
  background-color:rgba(255,255,255,0.60);
  text-align:right;
}

#global_nav{
  display:none;
}

#top_image_smartphone {
}

#top_backimage {
  display:block;
  background:none;
}

footer {
  border-top:solid 1px #AAA;
  text-align:right;
  padding:1em;
  background:#222;
  color:#777;
  font-size:10pt;
  line-height:1.5em;
}

footer hr {
  border: 0;
  height: 0;
  border-top: 1px solid rgba(0,0,0, 0.2);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
footer a{
  color:#888;
  font-weight:bold;
  text-decoration:none;
}
.komado_icon {
  max-height:50px;
  margin:5px;
}

.komado_logo {
  margin-left:1%;
  max-height:50px;
}

.question {
  color:#000;
  font-size:14pt;
  font-weight:bold;
}

.supplement {
  font-size:10pt;
}

.emoji {
  vertical-align:middle;
}

#global_nav_smartphone li {
    border:solid 1px #FFF;
    width:50% !important;
    background-color:rgba(44,44,44,1.0);
    color:#FFF;
}


@media ( min-width: 768px ) {
  .container{ width: 960px; margin: auto; }
  .col { margin-left: 2%; }

  #global_nav ul li{
    margin-left: 0px;
    width:16.667%;
  }

  .menu { 
    height: 40px;
    text-align:center;
  }

  .abtlogo{
    height:50px;
  }
  .komado_icon {
    min-height:50px;
    max-height:100px;
    padding-right:0;
    margin:0px;
  }

  .komado_logo {
    max-height:100px;
  }

  .history{
    /*position:absolute;*/
    right:1em4
    /*bottom:10em;*/
    padding: 0.5em;
  }
  .description {
    position: relative; 
    left:00%;
    width:30%;
    min-height:500px;
    background-color:rgba(0,0,0,0.50);
    color:#ccc;
    padding:1em;
  }

  .description h1{
    font-size:24pt;
    line-height:150%;
  }

  .title{
    font-size:6em;
  }

  .update {
    background:#F8F8F8;
    padding: 1em;
    overflow:auto;
    height:150px;
    margin:2em 0 2em;
    font-size:11pt;
  }

  nav {
    border-bottom:none 1px #888;

    background: #ededed; /* Old browsers */
    background: -moz-linear-gradient(top,  #ededed 1%, #ffffff 99%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,#ededed), color-stop(99%,#ffffff)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #ededed 1%,#ffffff 99%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #ededed 1%,#ffffff 99%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #ededed 1%,#ffffff 99%); /* IE10+ */
    background: linear-gradient(to bottom,  #ededed 1%,#ffffff 99%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ededed', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */
  }
  nav li{
    border-left:solid 1px #888;
  }
  nav li:first-child{
    border-left:none;
  }

  nav li a {
    color:#444;
    background-color:rgba(0,0,0,0);
  }

  nav li a:hover{
    background: #ffffe8; /* Old browsers */
    background: -moz-linear-gradient(top,  #ffffe8 0%, #ffffff 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffe8), color-stop(100%,#ffffff)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #f8f8f8 0%,#ffffff 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #ffffe8 0%,#ffffff 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #ffffe8 0%,#ffffff 100%); /* IE10+ */
    background: linear-gradient(to bottom,  #ffffe8 0%,#ffffff 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffe8', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */
  }

  #global_nav_smartphone{
    display:none;
  }
  #global_nav{
    display:block;
  }
  #top_image_smartphone {
    display:none;
  }

  #top_backimage {
    display:block;
    background:url(../images/top.jpg);
    background-size:cover;
    -moz-background-size:cover;
    -webkit-background-size:cover;
    min-height:500px;
  }

  .ss01 {
    display:block;
    background:url(../screenshot/ss01.jpg);
    background-size:cover;
    -moz-background-size:cover;
    -webkit-background-size:cover;
    min-height:300px;
  }
  .ss02 {
    display:block;
    background:url(../screenshot/ss02.jpg);
    background-size:cover;
    -moz-background-size:cover;
    -webkit-background-size:cover;
    min-height:300px;
  }
  .ss03 {
    display:block;
    background:url(../screenshot/ss03.jpg);
    background-size:cover;
    -moz-background-size:cover;
    -webkit-background-size:cover;
    min-height:300px;
  }
  table.resolution {
    width:200px;
  }
  
  ul.changelog {
    margin-left: 0.5em;
    list-style-type: square;
  }
  ul.changelog li {
    margin-left: 2em;
  }

<!-- smart phone -->
@media ( min-width: 0px ) {
  #global_nav_smartphone{
    display:block;
  }
  .horizontal li{
      width:100%;
  }
}