@import url('roboto.css');
@import url('font-awesome.min.css');

/* base start */
* {
  box-sizing: border-box;
}

body, html {
  margin: 0;
  padding: 0;
}

body {
  background: url(../images/topheadbg.png) repeat top left;
  font-family: 'Roboto', serif, 'Microsoft JhengHei', 'Apple LiGothic Medium';
  font-size: 14px;
  line-height: 1.5em;
}

.inner,
.dialog {
  margin: 0 auto;
  max-width: 1000px;
}

a {
  color: #02587C;
  text-decoration: none;
  -webkit-transition: all 500ms cubic-bezier(0.215, 0.610, 0.355, 1.000);
     -moz-transition: all 500ms cubic-bezier(0.215, 0.610, 0.355, 1.000);
       -o-transition: all 500ms cubic-bezier(0.215, 0.610, 0.355, 1.000);
          transition: all 500ms cubic-bezier(0.215, 0.610, 0.355, 1.000);
}

a:focus,
a:hover {
  color: inherit;
}

h1, h2, h3, h4, h5, h6, p {
  margin-top: 0;
}

/* base RWD start */
@media screen and (min-width: 480px) {
  body {
    font-size: 16px;
  }
}
@media screen and (min-width: 640px) {
  .dialog {
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
    max-width: 85%;
    margin: 2em auto;
  }
}

@media screen and (min-width: 1024px) {
  .dialog {
    max-width: 1000px;
  }
}
/* base RWD end */
/* base end */

/* header start */
header {
  background: #02587C;
  color: #FFFFFF;
  text-align: center;
}

header .inner {
  padding: 2em 1em;
}

header h1 {
  font-style: italic;
  margin: 0;
}

header h1 .fa {
  font-style: inherit;
}
/* header RWD start */
@media screen and (min-width: 640px) {
  header .inner {
    padding: 2em 1.5em;
  }
}
/* header RWD end */
/* header end */

/* nav start */
nav {
  background: #014F70;
}

nav .func {
  list-style: none;
  text-align: center;
  margin: 0;
  padding: 0;
}

nav .func li {
  display: inline-block;
}

nav .func li + li {
  margin-left: -3px;
}

nav .func li a {
  color: #FFFFFF;
  display: block;
  padding: 1em 0.5em;
}

nav .func li a:focus,
nav .func li a:hover {
  background: rgba(0, 0, 0, 0.2);
}

nav .func li a .fa {
  margin-right: 0.5em;
}

/* nav RWD start */
@media screen and (min-width: 640px) {
  nav .func li a {
    padding: 1em 1.5em;
  }
}
/* nav RWD end */
/* nav end */

/* article start */
article {
  background: #F2F2F2;
  /* min-height: 30vh; */
}

article .inner {
  padding: 2em 1em;
}

article h2 {
  color: #1794C8;
  font-size: 2em;
  line-height: 1.5em;
}

/* article RWD start */
@media screen and (min-width: 640px) {
  article .inner {
    padding: 4em 1.5em;
  }
}
/* article RWD end */
/* article end */

/* footer start */
footer {
  background: #4A4A4A;
  color: #FFFFFF;
}

footer .inner {
  padding: 2em 1em;
}

footer a {
  color: #EE9530;
}

footer a:focus,
footer a:hover {
  color: #EED52F;
}

footer .info {
  list-style: none;
  margin: 0;
  padding: 0;
}
/* footer end */