/*
  Author: gemgon.com
  License:  CC BY Attribution 3.0
*/

/*reset*/
@import url(http://fonts.googleapis.com/css?family=Signika:300,700);

body,h1,h2,h3,ul,li,a,img,p,div{
  padding: 0;
  margin: 0;
}
body{
  font-size: 100%;
  line-height: 100%;
  font-family: 'Signika', 'Arial', sans-serif;
  font-weight: 300;
}
a{
  text-decoration: none;
}
li{list-style-type: none;}

::-moz-selection {background: #a83929; color:#fff; text-shadow: none;}
::selection {background: #a83929; color:#fff; text-shadow: none;}

/*------------------------------page-------------------------------------------------------------------------------*/
.container{
  margin: 0 auto;
}
#header{
  overflow: hidden;
  margin-bottom: 30px;
}
#page{
  overflow: hidden;
  margin-bottom: 50px;
}
.main{
  clear: right;
  float: right;
  width: 63.829787234042553191%; /* 600px/940px*/
}
.social{
  float: left;
  width: 27.659574468085106382%;  /*260px/940px*/
  font-style: normal;
  font-size: 1em; /*16px/16px*/
}
#bg{
  height:200px;/*200px*/
  background: #000000 url('./img/lantau.png') no-repeat left;
}
.figurepic {
  border-radius: 33%;
}
.circled{
  border-radius: 50%;
}
#header .figure{
  float: left;
  margin-top: -100px;
  width: 21.276595744680851063%;/*200px/940px*/
}
#header img{
  max-width: 100%;
}
h1{
  float: right;
  margin-top: 30px;
  font-size: 4em; /*64px/16px*/
  line-height: 1.25em; /*80px/64px*/
  font-weight: 700;
}
h2{
  clear: right;
  float: right;
  font-size: 1.5em; /*24px/16px*/
  line-height: 1.25em; /*30px/24px*/
  font-weight: 700;
  text-transform: uppercase;
  color: #a4a6a8;
}
p{
  font-size: 1.5em; /*24px/16px*/
  line-height: 1.25em; /*30px/24px*/
  font-weight: 300;
  margin-bottom: .625em; /*15px/24px*/
}
.spaced{
  margin-top: 30px;
  padding: .41666666666666666666em; /*10px/24px*/
  background-color: #eee8de;
  -moz-border-image: url(./img/border.png)  6 round;
  -webkit-border-image: url(./img/border.png)  6 round;
  border-image: url(./img/border.png)  6 round;
  border-width: 6px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  -khtml-border-radius: 5px;
  border-radius: 5px;
}
li{
  height: 2.75em; /*44px/16px*/
  line-height: 2.75em; /*44px/16px*/
}
li img{
  vertical-align: middle;
  margin-right: .875em; /*14px/16px*/
}
a, a:visited{
  color: #b67265;
}
a:active, a:hover {
  color: #ac5f50;
}

/*------------------------------footer-------------------------------------------------------------------------------*/
#footer{
  clear: both;
}
#footer p{
  text-align: center;
  font-size: .875em; /*14px/16px*/
  line-height: 1.28571428571428571428em; /*18px/14px*/
  color: #a4a6a8;
}

/*-----------------------------------media queries-----------------------------------------------------------------------------------*/
@media only screen and (max-width : 440px){
  .container{width: 312px;}
  #bg{height:0px;}
  #header{
    background-color:#fff;
    margin-bottom:0;
    border-top:6px solid #b67265;
  }
  #header .figure{
    width: 25%;
    margin-top:0px;
  }
  .main{width: 100%;}
  .social{
    width: 312px;
    }
  .social img{
    scale: 70%;
  }
  #page{
    margin-top:0px;
    padding-bottom:50px;
    margin-bottom:0;
  }
  .main{
    margin-top:10px;
  }
  h1{
    margin-top:6px;
    color:#000;
    font-size: 2.25em;
    line-height: 1.25em;
  }
  h2{
    font-size: 1.05em;
    line-height: 1.11111111111111111111em;
  }
  p{font-size: 1.125em;} /*18px/16px*/
  .spaced{
    text-align:center;
  }
  ul{
    margin:0 auto;
  }
  li{display:inline;}
  li span, .spaced span, p.ruby, .extra{
    display:none;
  }
  li img{
    margin-right: .375em; /*6px/16px*/
  }
  li img.last{margin-right:0;}
}
@media only screen and (min-width : 441px) and (max-width : 480px){
  .container{width: 95%;}
  #bg{height:0px;}
  #header{
    background-color:#fff;
    margin-bottom:0;
  }
  #header .figure{
    width: 30%;
    margin-top:0px;
  }
  .main{width: 100%;}
  .social{
    width: 100%;
    }
  #page{
    margin-top:-44px;
    margin-bottom:20px;
  }
  .main{
    margin-top:10px;
  }
  h1{
    margin-top:6px;
    color:#000;
    font-size: 3em; /*48px/16px*/
    line-height: 1.25em; /*60px/48px*/
  }
  h2{
    font-size: 1.125em; /*18px/16px*/
    line-height: 1.11111111111111111111em; /*20px/18px*/
  }
  p{font-size: 1.125em;} /*18px/16px*/
  .spaced{
    text-align:center;
  }
  ul{float:right;}
  li{display:inline;}
  li span, .spaced span, .extra{
    display:none;
  }
  li img{
    margin-right: .375em; /*6px/16px*/
  }
  li img.last{margin-right:0;}
}
@media only screen and (min-width : 478px) and (max-width : 570px){
  #header .figure{
    width: 30%;
  }
}
@media only screen and (min-width : 571px) and (max-width : 681px){
  #header .figure{
    width: 25%;
  }
}
@media only screen and (min-width : 481px) and (max-width : 780px) {
  .container{width: 90%;}
  #bg{height:0px;}
  #header{background-color:#242827;}
  #header .figure{
    margin-top:0px;
  }
  .main{width: 100%;}
  .social{
    width: 100%;
    }
  #page{
    margin-top:-76px;
    margin-bottom:20px;
  }
  .main{
    margin-top:20px;
  }
  h1{
    margin-top:6px;
    color:#fff;
    font-size: 3em; /*48px/16px*/
    line-height: 1.25em; /*60px/48px*/
  }
  h2{
    font-size: 1.125em; /*18px/16px*/
    line-height: 1.11111111111111111111em; /*20px/18px*/
  }
  p{font-size: 1.375em;} /*22px/16px*/
  ul{float:right;}
  li{display:inline;}
  li span{
    display:none;
  }
  li img{
    margin-right: .375em; /*6px/16px*/
  }
  li img.last{margin-right:0;}
}
@media only screen and (min-width : 781px) and  (max-width : 1024px){
  .container{width: 90%;}
  #bg{height:150px;}
  #header .figure{
    margin-top:-125px;
  }
  #page{
    margin-top:-25px;
    margin-bottom:20px;
  }
  h1{
    margin-top:-80px;
    color:#fff;
    text-shadow:1px 1px 1px #888;
  }
  p{
    font-size: 1.375em; /*22/16*/
  }
}
@media only screen and (min-width : 1025px) and  (max-width : 1280px) {
  .container{width: 80%;}
  #bg{height:150px;}
  #header .figure{
    margin-top:-125px;
  }
  h1{
    margin-top:-80px;
    color:#fff;
    text-shadow:1px 1px 1px #888;
  }
  #page{
    margin-top:-35px;
    margin-bottom:20px;
  }
  p{
    font-size: 1.375em; /*22/16*/
  }
}
@media only screen and (min-width : 1281px) and (max-width : 1680px) {
  .container{width: 65%;}
}
@media only screen and (min-width : 1681px) and (max-width : 3000px) {
  .container{width: 50%;}
}
@media only screen and (min-width : 3000px) {
  .container{width: 30%;}
}