/*
Theme Name: Christi Law
Theme URI: http://www.christilaw.co.nz
Author: Ray Kuo
Author URI: www.raykuo.com
Description: The theme to accompany the wptutsplus series on creating a WordPress theme from static HTML. This theme accompanies Part 3 of the series.
Version: 4.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/

/*! HTML5 Boilerplate v4.3.0 | MIT License | http://h5bp.com/ */

html,
button,
input,
select,
textarea {
    color: #222;
}

html {
    font-size: 1em;
    line-height: 1.4;
	font-family: 'Microsoft Yahei', 'Open Sans', sans-serif;
	background:#f8f8f8;
}

::-moz-selection {
    background: #b3d4fc;
    text-shadow: none;
}

::selection {
    background: #b3d4fc;
    text-shadow: none;
}

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

audio,
canvas,
img,
video {
    vertical-align: middle;
}

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

textarea {
    resize: vertical;
}

.browsehappy {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
}


/* ==========================================================================
   Author's custom styles
   ========================================================================== */

/* Global */
#wrapper,.wrapper,.wrapper2 {
  width:960px;
  margin:0 auto;
}

.clear {
  clear:both;
}

h1,h2,h3,h4 {
  font-weight:normal;
}

h1 {
  margin-top:0;
  font-size:26px;
  color:#333;
}

h2 {
  font-size:20px;
  color:#333;
}

h2 a,h2 a:visited {
  font-size:20px;
  color:#333;
  text-decoration:none;
}

h2 a:hover {
  color:#999;
  text-decoration:underline;
}

h3 {
  font-size:16px;
  color:#333;
  line-height:24px;
}

h4 {
  font-size:14px;
  color:#999;
}

h4 a{
  color:#999;
  text-decoration:none;
}

.bold {
  font-weight:bold;
}

.left {
  float:left;
}

.right {
  float:right;
}

.h200 {
  height:200px;
}

.w630 {
  width:630px;
}

.pt80 {
  padding-top:80px;
}

.pb80 {
  padding-bottom:80px;
}

.pt20 {
  padding-top:20px;
}

.pt40 {
  padding-top:40px;
}

.pl60 {
  padding-left:60px;
}

.pl20 {
  padding-left:20px;
}

.pb20 {
  padding-bottom:20px;
}

.pr20 {
  padding-right:20px;
}

.spr, .spr .wrapper  {
  background:url(img/section_bg.gif) repeat-x top;
}

.fontred {
  color:#F00;
}

.font18 {
  font-size:18px;
}

.nobullet {
  list-style-type:none;
}

.shadow {
  background:url(img/article_bg.gif) repeat-y left;
}

.bottom_line {
  border-bottom:1px solid #CCC;
}

.sliderspr {
  background:url(img/slider_spr.jpg) no-repeat top;
}

dl, dd, dt {
  margin:0;
  padding:0;
}

/* Header */
header {
  height:200px;
  background:url(img/header_bg.gif) repeat-x;
}

#logo {
  float:left;
  margin-top:34px;  
}

#logo {
  height:70px;
  width:280px; 
}

#language {
  float:right;
  height:40px;
  width:176px;
  margin-top:50px;
  display:block;
  background:url(img/language_btn.png) no-repeat;
}

#language.en {
  background-position:top;
}

#language.en:hover {
  background-position:bottom;
}

#language.cn {
  background-position:bottom;
}

#language.cn:hover {
  background-position:top;
}

/* Header - Navigation */
header .wrapper {
  background:url(img/header_bg.gif) repeat-x;
}

header nav, .menu-top-navigation-container, .menu-chinese-top-navigation-container {
  height:60px;
  width:960px;
  position:absolute;
  top:140px;
}

header nav ul, .menu-top-navigation-container .menu, .menu-chinese-top-navigation-container .menu {
  height:60px;
  width:960px;
  padding:0;
  margin:0;
  background:url(img/top_nav_spr.gif) no-repeat right;
  list-style-type:none;
  overflow:hidden;
}

header nav ul li, .menu-top-navigation-container .menu-item, .menu-chinese-top-navigation-container .menu-item {
  float:left;
  height:55px;
  width:160px;
  line-height:55px;
  background:url(img/top_nav_spr.gif) no-repeat left;
  text-align:center;
}

header nav a, .menu-top-navigation-container a, .menu-chinese-top-navigation-container a {
  font-size:18px;
  color:#666;
  text-decoration:none;
}

header nav a:hover, .menu-top-navigation-container a:hover, .menu-chinese-top-navigation-container a:hover {
  color:#F00;
}

header nav .current, .menu-top-navigation-container .current-menu-item, .menu-top-navigation-container .current-menu-parent, .menu-chinese-top-navigation-container .current-menu-item, .menu-chinese-top-navigation-container .current-menu-parent{
  height:55px;
  width:159px;
  border-bottom:5px solid #F00;
  display:block;
  color:#F00;
}

.menu-top-navigation-container .current-menu-item a, .menu-top-navigation-container .current-menu-parent a, .menu-chinese-top-navigation-container .current-menu-item a, .menu-chinese-top-navigation-container .current-menu-parent a {
  color:#F00;
}

.menu-top-navigation-container .sub-menu, .menu-chinese-top-navigation-container .sub-menu {
  padding:0;
  margin:0;
  position:absolute;
  top: 55px;
  left: 481px;
  width: 158px;
  background:#F00;
  list-style-type:none;
  z-index: 1;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  display: none;
  opacity: 0;
  visibility: hidden;
}

.menu-top-navigation-container .sub-menu li, .menu-chinese-top-navigation-container .sub-menu li {
  border:0;
  width:158px;
  border-bottom:1px solid #FFF;
}

header nav ol li.line {
  border-top:1px solid #FFF;
}

.menu-top-navigation-container .sub-menu li a, .menu-top-navigation-container .sub-menu li a:visited, .menu-chinese-top-navigation-container .sub-menu li a, .menu-chinese-top-navigation-container .sub-menu li a:visited {
  font-size:16px;
  color:#FFF;
}

.menu-top-navigation-container .sub-menu li a:hover, .menu-chinese-top-navigation-container .sub-menu li a:hover {
  color:#CCC;
}

.menu-top-navigation-container .menu li:hover .sub-menu, .menu-chinese-top-navigation-container .menu li:hover .sub-menu {
  display: block;
  opacity: 1;
  visibility: visible;
}
  
/* Body */
section {
  clear:both;
}

/* Front page mottos */
.mottosfooter {
  position:absolute;
  top:520px;
}

.mottos {
  height:80px;
  width:960px;
  background:url(img/mottos_bg.png) repeat-y;
}

.mottos li {
  float:left;
  height:80px;
  line-height:80px;
  padding-right:40px;
  font-family: 'Droid Serif', serif;
  font-size:24px;
  color:#FFF;
}	

.mottos.en li {
  width:auto;
}

.mottos.cn li {
  width:100px;
}

@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Firefox < 16 */
@-moz-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Internet Explorer */
@-ms-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Opera < 12.1 */
@-o-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.fadein.one {
    -webkit-animation: fadein 2s; /* Safari, Chrome and Opera > 12.1 */
       -moz-animation: fadein 2s; /* Firefox < 16 */
        -ms-animation: fadein 2s; /* Internet Explorer */
         -o-animation: fadein 2s; /* Opera < 12.1 */
            animation: fadein 2s;
}

.fadein.two {
    -webkit-animation: fadein 4s; /* Safari, Chrome and Opera > 12.1 */
       -moz-animation: fadein 4s; /* Firefox < 16 */
        -ms-animation: fadein 4s; /* Internet Explorer */
         -o-animation: fadein 4s; /* Opera < 12.1 */
            animation: fadein 4s;
}

.fadein.three {
    -webkit-animation: fadein 6s; /* Safari, Chrome and Opera > 12.1 */
       -moz-animation: fadein 6s; /* Firefox < 16 */
        -ms-animation: fadein 6s; /* Internet Explorer */
         -o-animation: fadein 6s; /* Opera < 12.1 */
            animation: fadein 6s;
}

.fadein.four {
    -webkit-animation: fadein 8s; /* Safari, Chrome and Opera > 12.1 */
       -moz-animation: fadein 8s; /* Firefox < 16 */
        -ms-animation: fadein 8s; /* Internet Explorer */
         -o-animation: fadein 8s; /* Opera < 12.1 */
            animation: fadein 8s;
}

/* Front page 3 columns */
#front_testi, #front_events, #front_knowledge {
  float:left;
  min-height:340px;
  margin:0;
  list-style-type:none;
}

#front_events, #front_knowledge {
  background:url(img/front_spr.png) no-repeat left top;
}

#front_testi {
  width:306px;
  padding:0 30px 0 0;
}

#front_events {
  width:304px;
  padding:0 30px 0 40px;
}

#front_events img {
  float:left;
  width:100px;
  height:100px;
  object-fit: cover;
  overflow: hidden;
}

#front_events h3 {
  float:right;
  width:184px;
  padding:0;
  margin:0;
}

#front_events .post-1 {
  padding-bottom:20px;
  border-bottom:1px solid #CCC;
}

#front_events .post-2 {
  padding-top:20px;
}

#front_knowledge {
  width:210px;
  padding:0 0 0 40px;
}

/* Christina Tan */
#christina ul {
  padding:20px 0 0 0;
  margin:0;
  list-style-type:none;
}

#christina .name {
  font-size:20px;
  color:#333;
}

#christina .position {
  font-size:16px;
  color:#999;
  padding-bottom:10px;
}

#christina .phone, #christina .email {
  font-size:16px;
  color:#333;
  line-height:40px;
  padding-left:26px;
}

#christina .phone {
  background:url(img/icon_phone_2.png) no-repeat center left;
}

#christina .email {
  background:url(img/icon_mail_2.png) no-repeat center left;
}

/* Team */
.staff {
  float:left;
  width:480px;
  height:180px;
  padding:0;
  margin:0;
  display:block;
}

.staff .biodata {
  float:left;
  margin:0 0 0 20px;
  list-style-type:none;
  padding:0;
}

.staff .name {
  font-size:20px;
  color:#333;
}

.staff .position {
  font-size:16px;
  color:#999;
  padding-bottom:10px;
}

.staff .qualify, .staff .title {
  font-size:12px;
  color:#333;
  line-height:18px;
}

.staff .qualify {
  list-style-type:none;
}


/* Contact Us */
#contact {
  width:600px;
}

#contact dt {
  padding-bottom:10px;
}

#contact dd {
  font-weight:bold;
  padding-bottom:5px;
}

.more_button, .more_button:visited, .more-link, .more-link:visited, #contact a, #contact a:visited {
  color:#F00;
  text-decoration:none;
}

.more_button:hover, .more_link:hover, #contact a:hover {
  color:#F55;
  text-decoration:underline;
}

/* Footer */
footer {
  padding-top:80px;
  clear:both;
  height:100px;
  background:url(img/footer_bg.gif) repeat-x bottom;
}

footer .wrapper {
  height:100px;
  background:url(img/footer_bg.gif) repeat-x bottom;
  overflow:hidden;
}

footer.front {
  padding-top:20px;
}

footer nav {
  float:left;
  height:55px;
}

footer nav ul {
  height:55px;
  padding:0;
  margin:0;
  background:url(img/bottom_nav_spr.gif) no-repeat right;
}

footer nav ul li {
  float:left;
  height:55px;
  padding:0 20px;
  line-height:55px;
  background:url(img/bottom_nav_spr.gif) no-repeat left;
  text-align:center;
}

footer nav a {
  font-size:16px;
  color:#FFF;
  text-decoration:none;
}

footer nav a:hover {
  color:#F00;
}

footer #simplecontact {
  float:right;
  height:55px;
  padding:0;
  margin:0;
}

footer #simplecontact li{
  height:55px;
  width:auto;
  line-height:55px;
  float:left;
  padding-left:25px;
  font-size:0.875em;
  color:#FFF;
  list-style-type:none;
}

footer .phone {
  background:url(img/icon_phone_1.gif) no-repeat center left;
  padding-right:10px;
}

footer .email {
  background:url(img/icon_mail_1.gif) no-repeat center left;
}


/* Footer Copyright */
#copy {
  padding-top:80px;
  font-size:12px;
  color:#FFF;
}

#copy_inner {
  line-height:45px;
  clear:both;
  margin:0;
  font-size:12px;
  color:#CCC;
}

/* Wordpress media */
.alignleft {
  float:left;
  padding-right:20px;
}

.alignright {
  float:right;
}

.wp-caption {
  width: 300px !important;
}

p.wp-caption-text {
  height:72px;
  display:block;
  overflow:hidden;
}

.size-medium {
  width:300px;
  height:200px;
  object-fit: cover;
  overflow: hidden;
  display:block;
}

img.alignleft {
  padding-bottom:104px;
}

.acf-map {
	width: 100%;
	height: 400px;
	border: #ccc solid 1px;
	margin: 20px 0;
}

.gallery_photo img {
  width:300px;
  height:200px;
  object-fit: cover;
  overflow: hidden;
  display:block;
}

.photo_caption {
  margin-top:10px;
  width:300px;
  height:78px;
  overflow:hidden;
}

/* ==========================================================================
   Media Queries
   ========================================================================== */

@media only screen and (min-width: 35em) {

}

@media print,
       (-o-min-device-pixel-ratio: 5/4),
       (-webkit-min-device-pixel-ratio: 1.25),
       (min-resolution: 120dpi) {

}

/* ==========================================================================
   Helper classes
   ========================================================================== */

.ir {
    background-color: transparent;
    border: 0;
    overflow: hidden;
    *text-indent: -9999px;
}

.ir:before {
    content: "";
    display: block;
    width: 0;
    height: 150%;
}

.hidden {
    display: none !important;
    visibility: hidden;
}

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
}

.invisible {
    visibility: hidden;
}

.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}

.clearfix:after {
    clear: both;
}

.clearfix {
    *zoom: 1;
}

/* ==========================================================================
   Print styles
   ========================================================================== */

@media print {
    * {
        background: transparent !important;
        color: #000 !important;
        box-shadow: none !important;
        text-shadow: none !important;
    }

    a,
    a:visited {
        text-decoration: underline;
    }

    a[href]:after {
        content: " (" attr(href) ")";
    }

    abbr[title]:after {
        content: " (" attr(title) ")";
    }

    .ir a:after,
    a[href^="javascript:"]:after,
    a[href^="#"]:after {
        content: "";
    }

    pre,
    blockquote {
        border: 1px solid #999;
        page-break-inside: avoid;
    }

    thead {
        display: table-header-group;
    }

    tr,
    img {
        page-break-inside: avoid;
    }

    img {
        max-width: 100% !important;
    }

    @page {
        margin: 0.5cm;
    }

    p,
    h2,
    h3 {
        orphans: 3;
        widows: 3;
    }

    h2,
    h3 {
        page-break-after: avoid;
    }
}