/*
Copyright (c) 2011, Yahoo! Inc. All rights reserved.
Code licensed under the BSD License:
http://developer.yahoo.com/yui/license.html
version: 2.9.0
*/
html{color:#000;background:#FFF}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,select,p,blockquote,th,td{margin:0;padding:0}table{border-collapse:collapse;border-spacing:0}fieldset,img{border:0}address,button,caption,cite,code,dfn,em,input,optgroup,option,select,strong,textarea,th,var{font:inherit}del,ins{text-decoration:none}li{list-style:none}caption,th{text-align:left}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}q:before,q:after{content:''}abbr,acronym{border:0;font-variant:normal}sup{vertical-align:baseline}sub{vertical-align:baseline}legend{color:#000}


/*----- Emogayu specific -------------------------------------*/


* {
  font-family: 'Rajdhani', Arial, Helvetica, sans-serif;
  font-size:18px;
  padding: 0;
  margin: 0;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  -webkit-touch-callout:none;
  -webkit-box-sizing: border-box;
  -moz-box-sizing:border-box;
  -o-box-sizing:border-box;
  box-sizing:border-box;
  -webkit-touch-callout:none;
  -webkit-text-size-adjust:none;
  -webkit-padding-start:0px;
  -webkit-padding-end:0px;
  -webkit-margin-after:0px;
  -webkit-margin-before:0px;  outline:none;
}

a,
a:active,
a:visited,
a:link{
   border:0px;
   color:currentcolor;
   text-decoration:underline;
    
}

::-webkit-scrollbar {
    width:9px;
    height:9px;

}

::-webkit-scrollbar-track {
    -webkit-border-radius:5px;
    border-radius:5px;
    background:rgba(0,0,0,0.1);
}

::-webkit-scrollbar-thumb {
    -webkit-border-radius:5px;
    border-radius:5px;
    background:rgba(0,0,0,0.2);
}

::-webkit-scrollbar-thumb:hover {
    background:rgba(0,0,0,0.4);
}

::-webkit-scrollbar-thumb:window-inactive {
    background:rgba(0,0,0,0.05);
}


body{
  position:absolute;
  top:0px;
  margin:0px;
  padding:0px;
  height:100%;
  width:100%;
  overflow:hidden;
}
    
div{
 word-wrap:break-word;
}

/* CSS Document */

a,a:hover, a:active, a:visited{
 boarder:0px;
}

.container{
  display: block;
  vertical-align:top;
  -webkit-transform: translate3d(0,0,0);
  transform: translate3d(0,0,0);
  width:100%;
}
.column{
display: table-cell;
float:left;
min-width:100px;
margin-left:0px;
}

.last{
width:auto;
margin-right:0px;
margin-left:0px;
clear:right
}

/* client specific */

.dotborder{
  padding:0px;
  margin:0px;
  background-image: url(../img/b_w_dot.gif) repeat-x;
}

body .mainCenter{
    margin-left:auto;
    margin-right:auto; 
    position:relative;
    width:100%;
}


body .mainCenter div#header{
    z-index:3;
    top:0px;
    height:80px;
    position:relative; 
    pointer-events:none;
    opacity:0;
}

body .mainCenter div#header  a{
    pointer-events:all;
}


.mainCenter div.content{
    position:relative; 
}
.mainCenter div#home.content{
    top:-80px;
}



#title a{
  display:inline-block;
}
#title a img{
  display:inline-block;
  height:50px;
}
body div.mainCenter div#header div#title a{
    display:block;
    width:200px;
    background:url('../img/util/title.png') no-repeat;
}





/* ------------- navigation ---------------* /

/*---- For Mozilla -----------*/


@-webkit-keyframes fadeInDown {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
            transform: translate3d(0, -100%, 0);
  }

  100% {
    opacity: 1;
    -webkit-transform: none;
            transform: none;
  }
}

@keyframes fadeInDown {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
            transform: translate3d(0, -100%, 0);
  }

  100% {
    opacity: 1;
    -webkit-transform: none;
            transform: none;
  }
}

.fadeInDown {
  -webkit-animation-name: fadeInDown;
          animation-name: fadeInDown;
}



.animated {
  -webkit-animation-duration: 1s;
          animation-duration: 1s;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
}




#header #navi {
	margin: 0px;
	padding: 0px;
	height: auto;
}

#header div#menu{
  position:absolute;
  height:auto;
  width:auto;
}

#navi ul#Main_navi li {
  list-style-type: none;
  margin: 0px;
  padding: 0px;
  width: 120px;
}

#navi ul#Main_navi li a {
  font-weight: 500; 
  font-size: 1em;
  height: 2em;
  display: inline-block;
  line-height:2em;
  width:100%;
  color:#333333;
  text-decoration: none ! important;
  text-align: center;
  vertical-align:middle;
  -webkit-transition: all .2s ease-out;
  -moz-transition: all .2s ease-out;
  -ms-transition: all .2s ease-out;
  -o-transition: all .2s ease-out;
  transition: all .2s ease-out;
}

#navi ul#Main_navi li.current a,
#navi ul#Main_navi li a:hover{
  background-color:  rgba(255,255,255,0.7); 
  color:;
}

@media all and (max-width: 840px)  {
  div#header div#menu{
     top:40px;
     pointer-events:all;
  }

  #navi{
    background-color: rgba(0,0,0,0.8);
    -webkit-transition: all 1s ease-out;
    -moz-transition: all 1s ease-out;
    -ms-transition: all 1s ease-out;
    -o-transition: all 1s ease-out;
    transition: all 1s ease-out;
  }
  #navi:hover{
    background-color: rgba(255,255,255,0.3);
  }

  #navi::before{
    padding:5px;
    text-align:center;
    content: '\2630';
    display:inline-block;
    color:#FFFFFF;
  }
  #navi:hover::before{
    background-color: #FFFFFF;
    color:#000000;
  }  

  div#menu ul{
    display:none;
    height:1px;
    opacity:0;
    -webkit-transition: all .2s ease-out;
    -moz-transition: all .2s ease-out;
    -ms-transition: all .2s ease-out;
    -o-transition: all .2s ease-out;
    transition: all .2s ease-out;
  }

  div#menu:hover ul{
    display:block;
    height:auto;
    opacity:1;
  }
  div#menu:hover ul a{
    height:2em;
    opacity:1;
    padding-top: 4px;
    padding-bottom: 4px;
    background-color: transparent;
    -webkit-transition: all .2s ease-out;
    -moz-transition: all .2s ease-out;
    -ms-transition: all .2s ease-out;
    -o-transition: all .2s ease-out;
    transition: all .2s ease-out;
  }

  #navi ul#Main_navi li {
    list-style-type: list-item;
    height:1px;
  }
  #navi:hover ul#Main_navi li {
    height:auto;
  }
  #navi ul#Main_navi li.current a,
  #navi ul#Main_navi li a:hover{
    width: 220px;
    margin-left: -0.5em;
  }

}

@media all and (min-width: 840px)  {


  .mainCenter div#header{
    width:100%;
    background: rgba(0,0,0,0.5);
    background: -moz-linear-gradient(top, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.3) 70%, rgba(0,0,0,0.6) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0,0,0,0.1)), color-stop(70%, rgba(0,0,0,0.3)), color-stop(100%,rgba(0,0,0,0.6)));
    background: -webkit-linear-gradient(top, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.3) 70%, rgba(0,0,0,0.6) 100%);
    background: -o-linear-gradient(top, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.3) 70%, rgba(0,0,0,0.6) 100%);
    background: -ms-linear-gradient(top, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.3) 70%, rgba(0,0,0,0.6) 100%);
    background: linear-gradient(to bottom, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.3) 70%, rgba(255,255,255,0.6) 100%);
    filter: none;
    transform: translateZ(0px);
  }
  .mainCenter div.content{
    width:100%;
  }
  #navi {
    width: 100%;
  }

  div#header div#menu{
    bottom:0px;
  }
  #navi ul#Main_navi li {
    list-styleyle-type: inline-block;
    float: left;
    height: 2em;
  }
  #navi ul#Main_navi li.current a,
  #navi ul#Main_navi li a:hover{
    height: 2.25em;
    margin-top: -0.5em;
    padding-top: 0.25em;
  }
}





/*------ body section -----------------------------------------------------****/



#news{
    font-weight:normal;

    width:300px;
    float:left;
    z-index:2;
    top:200px;
    margin-left:20px;
    padding:10px;
    position:absolute;
    border: 1px solid #FFFFFF;
    -moz-border-bottom-left-radius: 6px 6px;
    -moz-border-bottom-right-radius: 6px 6px;
    -moz-border-top-left-radius: 6px 6px;
    -moz-border-top-right-radius: 6px 6px;

    -webkit-border-bottom-left-radius: 6px 6px;
    -webkit-border-bottom-right-radius: 6px 6px;
    -webkit-border-top-left-radius: 6px 6px;
    -webkit-border-top-right-radius: 6px 6px;


    border-bottom-left-radius: 6px 6px;
    border-bottom-right-radius: 6px 6px;
    border-top-left-radius: 6px 6px;
    border-top-right-radius: 6px 6px;
    background-color: rgba(120, 171, 162, 0.8);
    
    -moz-box-shadow: 4px 4px 4px rgba(0,0,0,0.8);
    -webkit-box-shadow: 4px 4px 4px rgba(0,0,0,0.8);
    box-shadow: 4px 4px 4px rgba(0,0,0,0.8);


}

#news dt#newstitle{
  font-family: 'Lobster', cursive; 
  font-size:30px;
  color:#FFFFFF;
  text-shadow: 0.5px 0.5px 0.5px rgba(0,0,0,0.8);
}


@media all and (max-width: 840px)  {
  #news{
    margin-left:120px;
  }
}
body #news *{
  font-size:16px;
  color:#000000;
  /* text-shadow: 0.5px 0.5px 0.5px rgba(255,255,255,0.8);  */
}
body #news .twtr-user,
body #news .twtr-hd{
   display:none;
}


/*----About-------------*/
body#aboutbody div.container{
  height:100%;
  overflow-y:scroll;
}
body#aboutbody div.mainCenter{
  padding-top:80px;
  width:100%;
}

body#aboutbody div.mainCenter div#header{
    position:fixed;
}
body#aboutbody div.mainCenter div#header div#title a{
    display:block;
    width:200px;
    background:url('../img/util/title.png') no-repeat;
}

#about{
  padding-top:20px;
  transform: scale(1);
}

div#about  div#about_body
{
  font-size: 1em;
  font-family: Arial, Helvetica, sans-serif;
  clear:left;
  margin-top:20px;
  left:100px;
}
div#about  dt.about_title
{
  margin-top:20px;
  font-size: 1em;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: bold;
  padding:2px;  
}

/*--- Article general ---*/

#articleList span.pagingsection  span.currentStep,
#articleList span.pagingsection  a{
  display:inline-block;
  margin-left:5px;
  border:#666666 1px solid;
  border-radius:3px;
  padding:2px;
  font-size:0.4em;
}
#articleNavs{
  font-size:0.7em;
  width:100px;
  float:left;
}

#articleNavs .tagList{
  display:block;
}

#articleNavs .tagList>a,
#articleNavs .tagList>a:hover,
#articleNavs .tagList>a:active,
#articleNavs .tagList>a:link{
  display:inline-block;
  border:1px solid #CCCCCC;
  padding:4px;
  margin:0px 4px;
  cursor:pointer;
  text-decoration:none;
  border-radius:4px;
}
#articleList .tagList>a:hover{
  background:#636363;
}


#articleList span.pagingsection a:link{
  text-decoration:none;
}
#articleList span.pagingsection  span.currentStep,
#articleList span.pagingsection  a:hover{
  background-color:rgba(0,0,0,0.2);  
}
#articleList table{
  margin-top:20px;
  width:300px;

}
#articleList table tr{
  height:30px;
}
#articleList table tr td{
  font-size:12px;
  padding:2px;
}
#articleList table tr td.titlefield{
  text-align:left;
  width:220px;
}
#articleList table tr td.datefield{
  font-size:0.6em;
}
#articleList table a:link,
#articleList table a:hover{
  cursor:pointer;
  color:#F60;
}

#articleContent{
  width:560px;
  display:none;
  margin-left:auto;
  margin-right:auto;
  opacity:0;
}


#articleDetailOuter{
  position:absolute;
  top:20px;
  padding:20px 8px 20px 10px;
  width:600px;
  height:540px;
  border: 2px solid #66666;
  -moz-border-bottom-left-radius: 6px 6px;
  -moz-border-bottom-right-radius: 6px 6px;
  -moz-border-top-left-radius: 6px 6px;
  -moz-border-top-right-radius: 6px 6px;
  -webkit-border-bottom-left-radius: 6px 6px;
  -webkit-border-bottom-right-radius: 6px 6px;
  -webkit-border-top-left-radius: 6px 6px;
  -webkit-border-top-right-radius: 6px 6px;
  border-bottom-left-radius: 6px 6px;
  border-bottom-right-radius: 6px 6px;
  border-top-left-radius: 6px 6px;
  border-top-right-radius: 6px 6px;  
  background-color: rgba(120, 171, 162, 1);
  
}
#articleDetailOuter #articleContainer{
  height:475px;
  overflow-y:auto;
  scrollbar-base-color:#369;
  postion:relative;


}

#article{
  font-size:12px;
}
#article div.contents{
  margin-top:5px;
}
/*--- Products ------- */



#product{
  padding-top:20px;
}
/*--- Design ----------*/


#design{
  padding-top:20px;
}

/*--- Blog ----------*/


#blog{
  padding-top:20px;
}

body#blogbody div#articleContent{
  display:block;
  position:relative;
  width:660px;
}

body#blogbody div#articleContent div#articleDetailOuter{
  display:block;
  position:relative;
  width:100%;
}


/*--- Share Tools ---*/
#headerShareToolsContainer{
    position:absolute;
    top:25px;
    right:0px;
}
#headerShareToolsContainer a {
  margin-right: 5px;
}
#headerShareToolsContainer a#instagram_share{
display: block;
  float: left;
  width: 70px;
  height: 35px;
  background: url('http://www.emogayu.com/img/util/instagram.png') no-repeat 0px 9px;
  background-size: 70px auto;
}
#headerShareToolsContainer a#instagram_share:hover{
  background: url('http://www.emogayu.com/img/util/instagram.png') no-repeat 0px -24px;
  background-size: 70px auto;
}

#headerShareToolsContainer a#twitter_share{
  display:block;
  float:left;
  width:35px;
  height:35px;
  background:url('http://www.emogayu.com/img/util/icons.png') no-repeat -125px -0px;
}
#headerShareToolsContainer a#twitter_share:hover{
  background:url('http://www.emogayu.com/img/util/icons.png') no-repeat -125px -34px;
}