misc.css

/* basic reset */
html,body,p,ul,ol,dl,li,dt,dd,h1,h2,h3,h4,h5,h6 {
  margin:0;padding:0;
}
html {
  -webkit-text-size-adjust: none;
}
ul,ol {
  list-style:none
}
a {
  text-decoration:none;
  outline:0;
}
a img {
  border:0;
}

/* font */
body{
  /* Traditional Chinese */
  font-family:"Arial Unicode MS","微軟正黑體","Microsoft JhengHei",arial,sans-serif;
}

/* clear fix */
.clear:before, .clear:after {
  content:"\0020";
  display:block;
  height:0;
  overflow:hidden;
}	
.clear:after {
  clear: both;
}

/* box-sizing fix */
/* see: http://www.paulirish.com/2012/box-sizing-border-box-ftw/ */
html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}

/* no-select */
.no-select{
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* hide gray hover highlight on touch device */
body, .or-specific-element {
  -webkit-tap-highlight-color: rgba(0,0,0,0);
}

/* pure css sticky elements */
.sticky-header{
  position:-webkit-sticky;
  position:sticky;
}

/* forms - http://www.sitepoint.com/html5-forms-css/ */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
textarea {
  -webkit-appearance: none;
  -moz-appearance: none;
  -ms-appearance: none;
  appearance: none;
  outline: 0;
  box-shadow: none;
}
input::-webkit-input-placeholder { color: #ccc; }
input::-moz-placeholder { color: #ccc; }
input:-ms-input-placeholder { color: #ccc; }
input::placeholder { color: #ccc; }

input:focus,
textarea:focus,
select:focus {
  background-color: #eef;
}

/* wrap text in pre - http://stackoverflow.com/questions/248011/how-do-i-wrap-text-in-a-pre-tag */
pre {
    white-space: pre-wrap;       /* CSS 3 */
    white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
    white-space: -pre-wrap;      /* Opera 4-6 */
    white-space: -o-pre-wrap;    /* Opera 7 */
    word-wrap: break-word;       /* Internet Explorer 5.5+ */
}