/* http://csswizardry.com/2011/01/the-real-html5-boilerplate/ */

html,body,div,span,applet,object,iframe,
h1,h2,h3,h4,h5,h6,p,blockquote,pre,
a,abbr,acronym,address,big,cite,code,
del,dfn,em,img,ins,kbd,q,s,samp,
small,strike,strong,sub,sup,tt,var,
b,u,i,center,
dl,dt,dd,ol,ul,li,
fieldset,form,label,legend,
table,caption,tbody,tfoot,thead,tr,th,td,
article,aside,canvas,details,figcaption,figure,
footer,header,hgroup,menu,nav,section,summary,
time,mark,audio,video{
    margin:0;
    padding:0;
    border:0;
    outline:0;
    font-size:100%;
    font:inherit;
    vertical-align:baseline;
}
/* GO! */
body { 
      font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro",Osaka, "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
      margin:0px auto 0px auto;
      text-align:center;
      text-shadow:none !important;
    }
    body .ui-body-c, body .ui-overlay-c { text-shadow:0 0 0 !important; }
    .ui-page {
      background:#fff;
     }
    .headpic { 
      width:50%;
      min-width:360px;
      margin:0px auto;
      padding:10px 0px;
      background:#009900;
      color:#000;
      border-radius:0px 0px 5px 5px; 
    }
    .player-info { 
    width:50%;
    min-width:360px;
    margin:0px auto;
    text-align:left;
     }
    h1 {
      font-family:'Play';
      font-size:20px;
      font-weight:bold;
      margin-bottom:10px;
    }
    h2 {
      font-family:'Play';
      font-size:18px;
      font-weight:bold;
      margin-bottom:10px;
    } 
    .flipbox {
    width:50%;
    min-width:360px;
    }
    .pic { 
      width:100%;
      min-width:360px;
      margin:0px auto;
      border-radius:5px; 
    }
    .button {
   font-size:20px;   
   cursor: pointer; cursor: hand;   
   border-radius:5px;  
   text-align:center;
   color:#000;
   text-shadow:1px 1px 1px #fff;   
   width:50%;
   min-width:360px;
   padding:15px 0px;
   margin:0px auto 5px auto; 
   text-decoration:none !important;
    }  
    .right,.wrong { 
border:3px solid #999;background: rgba(226,226,226,1);
background: -moz-linear-gradient(top, rgba(226,226,226,1) 0%, rgba(254,254,254,1) 0%, rgba(209,209,209,1) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(226,226,226,1)), color-stop(0%, rgba(254,254,254,1)), color-stop(100%, rgba(209,209,209,1)));
background: -webkit-linear-gradient(top, rgba(226,226,226,1) 0%, rgba(254,254,254,1) 0%, rgba(209,209,209,1) 100%);
background: -o-linear-gradient(top, rgba(226,226,226,1) 0%, rgba(254,254,254,1) 0%, rgba(209,209,209,1) 100%);
background: -ms-linear-gradient(top, rgba(226,226,226,1) 0%, rgba(254,254,254,1) 0%, rgba(209,209,209,1) 100%);
background: linear-gradient(to bottom, rgba(226,226,226,1) 0%, rgba(254,254,254,1) 0%, rgba(209,209,209,1) 100%);
    }  
    .right:hover,.wrong:hover {
cursor: pointer; cursor: hand;
border:3px solid #aaa;      
background: #ffffff; /* Old browsers */
background: -moz-linear-gradient(top, #ffffff 0%, #e5e5e5 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#e5e5e5)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #ffffff 0%,#e5e5e5 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #ffffff 0%,#e5e5e5 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #ffffff 0%,#e5e5e5 100%); /* IE10+ */
background: linear-gradient(to bottom, #ffffff 0%,#e5e5e5 100%); /* W3C */
    }
 .win {
border:  3px solid #2b4513;
background: #d2ff52; /* Old browsers */
background: -moz-linear-gradient(top, #d2ff52 0%, #91e842 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#d2ff52), color-stop(100%,#91e842)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #d2ff52 0%,#91e842 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #d2ff52 0%,#91e842 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #d2ff52 0%,#91e842 100%); /* IE10+ */
background: linear-gradient(to bottom, #d2ff52 0%,#91e842 100%); /* W3C */
} 
.lose {
border:  3px solid #901c0d;
background: rgb(254,187,187); /* Old browsers */
background: -moz-linear-gradient(top,  rgba(254,187,187,1) 0%, rgba(254,144,144,1) 45%, rgba(255,92,92,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(254,187,187,1)), color-stop(45%,rgba(254,144,144,1)), color-stop(100%,rgba(255,92,92,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(254,187,187,1) 0%,rgba(254,144,144,1) 45%,rgba(255,92,92,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(254,187,187,1) 0%,rgba(254,144,144,1) 45%,rgba(255,92,92,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(254,187,187,1) 0%,rgba(254,144,144,1) 45%,rgba(255,92,92,1) 100%); /* IE10+ */
background: linear-gradient(to bottom,  rgba(254,187,187,1) 0%,rgba(254,144,144,1) 45%,rgba(255,92,92,1) 100%); /* W3C */
}
.extra {  
border:  3px solid #2b6372;
background: rgb(240,249,255); /* Old browsers */
background: -moz-linear-gradient(top, rgba(240,249,255,1) 0%, rgba(203,235,255,1) 47%, rgba(161,219,255,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(240,249,255,1)), color-stop(47%,rgba(203,235,255,1)), color-stop(100%,rgba(161,219,255,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(240,249,255,1) 0%,rgba(203,235,255,1) 47%,rgba(161,219,255,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(240,249,255,1) 0%,rgba(203,235,255,1) 47%,rgba(161,219,255,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(240,249,255,1) 0%,rgba(203,235,255,1) 47%,rgba(161,219,255,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(240,249,255,1) 0%,rgba(203,235,255,1) 47%,rgba(161,219,255,1) 100%); /* W3C */
}
.next {
border:  3px solid #946c00;
background: rgb(252,234,187); /* Old browsers */
background: -moz-linear-gradient(top,  rgba(252,234,187,1) 0%, rgba(247,206,101,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(252,234,187,1)), color-stop(100%,rgba(247,206,101,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(252,234,187,1) 0%,rgba(247,206,101,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(252,234,187,1) 0%,rgba(247,206,101,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(252,234,187,1) 0%,rgba(247,206,101,1) 100%); /* IE10+ */
background: linear-gradient(to bottom,  rgba(252,234,187,1) 0%,rgba(247,206,101,1) 100%); /* W3C */
}  
    .search-box { width:50%;min-width:360px;margin:30px auto 0px auto;border-radius:5px 5px 0px 0px; }
    .buttons-row { margin-bottom:10px; }
    .buttons-more { display:none;margin:0px 0px 10px 0px; }
    input[type=text] { padding:5px 5px;width:84%; }
    a div { font-weight:normal;text-decoration:none; }
    a:link, a:visited { text-decoration:none; }
    
    @media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
     body { width:100%; }
    
    .headpic{ width:90%;min-width:300px; }
    .player-info { width:90%;min-width:300px;margin:5px auto;}
    h1 { font-size:12px; }
    .pic { min-width:300px; }
    .button,.right,.wrong, .extra { width:90%;min-width:300px; }
    input[type=text] { width:260px !important; }
    .search-box { width:90%;min-width:310px; }
    .flipbox{width:90%;min-width:300px;min-height:120px;border-radius:5px;background-color:#eee;margin:5px auto;}
    .box { padding:50px 0px;font-size:30px; }
    .ui-footer { display:none; }
    .adslot_smartphone { margin:5px auto;width:300px; height: 250px; }
    }
    
    .headbar { 
 width:100%;
 background-color:#000;
 border-top:2px solid silver;
 border-bottom:2px solid silver;
 color:#64cecf;
 text-align:center;
 text-shadow:none;
 box-shadow:inset 0px 0px 0px #64cecf;
  }
 .headbar div { padding:5px 0px;font-weight:bold;font-family:Play,黑体,SimHei,华文宋体,STSong;font-size:12px;  } 
 
.flipbox-container,.buttons-row,.buttons-more { 
 margin:10px auto 10px auto;
  }

 .lives,.coins,.streak { margin-right:15px; }
 .buttons-more { display:none;margin:0px 0px 10px 0px; }
 .pinyin { font-size:50%; }