@charset "utf-8";

/*
 *
 * Usage: Base layout
 *
 * Name: style.css
 *
 */

/* FONT size
---------------------------------------------------------------------
[ px ]	[ % ]
10px 	83  %		19px 	158 %
11px 	92  %		20px 	167 %
12px 	100 %		21px 	175 %
13px 	108 %		22px 	183 %
14px 	117 %		23px 	192 %
15px 	125 %		24px 	200 %
16px 	133 %		25px 	208 %
17px 	142 %		26px 	217 %
18px 	150 %
---------------------------------------------------------------------*/


/*---------------------------------------------------------------------
setting
---------------------------------------------------------------------*/
html,body   {height:100%;}
body  {background:url(../images/common/ic_loader.gif) no-repeat 50% 300px #fff8ec; min-width:900px; color:#2f2a25;}
body a  {color:#2f2a25;}

@font-face {font-family:miroco_font; src:url("../font/miroco-Regular.otf") format("opentype");}

p::selection {background: #5e5950; color: #fff8ea;}
p::-moz-selection {background: #5e5950; color: #fff8ea;}


/*---------------------------------------------------------------------
CSS3 animation & parts layout
---------------------------------------------------------------------*/
/* link */
a img         {opacity:1; filter:alpha(opacity=100);  -webkit-transition:all 0.2s ease-in; -moz-transition:all 0.2s ease-in; transition:all 0.2s ease-in;}
a:hover img   {opacity:0.7; filter:alpha(opacity=70); -webkit-transition:all 0.2s ease-in; -moz-transition:all 0.2s ease-in; transition:all 0.2s ease-in;}
a             {-moz-transition:all 0.2s ease-in; -webkit-transition:all 0.2s ease-in; transition:all 0.2s ease-in;}
a:hover       {-moz-transition:all 0.2s ease-in; -webkit-transition:all 0.2s ease-in; transition:all 0.2s ease-in;}
.opa_bg a,
.opa_bg input        {opacity:1; -moz-transition:all 0.2s ease-in; -webkit-transition:all 0.2s ease-in; transition:all 0.2s ease-in;}
.opa_bg a:hover,
.opa_bg input:hover  {opacity:0.7; -moz-transition:all 0.2s ease-in; -webkit-transition:all 0.2s ease-in; transition:all 0.2s ease-in;}
.trans_bg a          {display:block; overflow:hidden; height:0; opacity:1; filter:alpha(opacity=100); -moz-transition:all 0.2s ease-in; -webkit-transition:all 0.2s ease-in; transition: all 0.2s ease-in;}
.trans_bg a:hover    {opacity:0; filter:alpha(opacity=0); -moz-transition:all 0.2s ease-in; -webkit-transition:all 0.2s ease-in; transition: all 0.2s ease-in;}

.loader  {background:url(../images/common/ic_loader.gif) no-repeat 0 0;}


/*---------------------------------------------------------------------
Common layout
---------------------------------------------------------------------*/
#gLogo  {position:fixed; top:27px; left:0; z-index:99;}
    #gLogo a  {width:80px; height:0; padding-top:485px; overflow:hidden; display:block; background:url(../images/common/img_logo.png) no-repeat 0 0;}

#gnav   {position:fixed; top:23px; right:4px; z-index:99;}
    #gnav li  {margin-bottom:16px; line-height:100%;}
    #gnav a   {background:url(../images/common/gnav.png) no-repeat 0 0; display:block; overflow:hidden; height:0; width:53px;}
    #gnav a:hover,
    #gnav a.active  {background:url(../images/common/gnav_on.png) no-repeat 0 0;}
    #gnav .gnav01 a  {background-position:0 0; padding-top:79px;}
    #gnav .gnav02 a  {background-position:0 -96px; padding-top:100px;}
    #gnav .gnav03 a  {background-position:0 -217px; padding-top:129px;}
    #gnav .gnav04 a  {background-position:0 -362px; padding-top:132px;}
    
#copyright  {position:fixed; bottom:15px; left:23px; z-index:99; overflow:hidden; height:0; width:169px; padding-top:7px; background:url(../images/common/txt_copyright.gif) no-repeat 0 0;}
#top #copyright  {background:url(../images/top/img_copyright.png) no-repeat 0 0;}


#pagetop    {position:fixed; bottom:30px; right:18px; z-index:99; -moz-transition:all 0.2s ease-in; -webkit-transition:all 0.2s ease-in; transition:all 0.2s ease-in;}
#pagetop:hover  {bottom:35px;}

/* container */
#container  {margin:0 auto; padding:85px 100px 250px 100px; background-color:#fff8ec;}
#container h2  {text-align:center;}

.sf  {-webkit-transition:all 0.2s ease-in; -moz-transition:all 0.2s ease-in; transition:all 0.2s ease-in;}
.fade  {opacity:1 !important; filter:alpha(opacity=100) !important;  -webkit-transition:all 0.2s ease-in; -moz-transition:all 0.2s ease-in; transition:all 0.2s ease-in;}


/*---------------------------------------------------------------------
Top layout
---------------------------------------------------------------------*/
#top #gLogo a  {background:url(../images/top/img_logo.png) no-repeat 0 0;}
#top #gnav a   {background-image:url(../images/top/gnav.png);}
#top #gnav a:hover  {background-image:url(../images/top/gnav_on.png);}
#top #topSlide  {position:relative; width:100%; height:100%;}
#top #topSlide li   {position:fixed; top:0; left:0; z-index:1; opacity:0; filter:alpha(opacity=0);}
#top #container  {padding:0; width:100%; height:100%;}
#top #pagetop    {display:none;}

#top #pagenate  {position:fixed; bottom:20px; right:30px; z-index:10;}
    #top #pagenate li  {float:left; margin-left:8px;}
    #top #pagenate a   {display:block; overflow:hidden; height:0; padding-top:20px; width:36px; background:url(../images/top/btn_off.png) no-repeat 0 50%;}
    #top #pagenate a:hover,
    #top #pagenate a.active  {background:url(../images/top/btn_on.png) no-repeat 0 50%;}


/*---------------------------------------------------------------------
About layout
---------------------------------------------------------------------*/
#about #container  {width:660px; text-align:center;}
    #about #container h2  {margin-bottom:15px;}
    
    #about #container #profImg  {margin-bottom:50px;}
    #about #container #prof dt  {margin-bottom:30px;}
    #about #container #prof dd  {margin-bottom:70px;}
    #about #container #mail dt  {margin-bottom:15px;}
    #about #container #mail dd  {background:url(../images/about/btn_mail_on.gif) no-repeat 0 0; width:372px; margin:0 auto;}
    #about #container #mail a   {background:url(../images/about/btn_mail.gif) no-repeat 0 0; padding-top:57px;}


/*---------------------------------------------------------------------
News layout
---------------------------------------------------------------------*/
#news #container  {min-width:890px;}
    #news #container h2  {margin-bottom:65px;}
    
    #news #container #newsList  {text-align:center;}
    #news #container .box  {background:url(../images/news/line_sep.gif) no-repeat 50% 0; width:400px; display:inline-block; *display:inline; *zoom:1;
                            padding:33px 0 0 0; margin:0 20px 90px 20px; text-align:left; vertical-align:top;}
        #news #container .box h3   {text-align:center; margin-bottom:25px; font-size:167%; font-weight:bold;}
        #news #container .box img  {width:100%; height:auto !important;}
        #news #container .box p    {margin-bottom:25px;}
        #news #container .box a    {background:#ff9494; display:inline-block; line-height:100%;}

/*---------------------------------------------------------------------
Painting layout
---------------------------------------------------------------------*/
#painting #container  {min-width:840px;}
    #painting #container h2  {margin-bottom:60px;}
    
    #painting #works  {background:url(../images/works/line_works.gif) repeat-x 50% 0; padding-top:40px;}
        #painting #works #nav  {text-align:center; margin-bottom:56px;}
            #painting #works #nav li  {display:inline-block; *display:inline; *zoom:1;}
            #painting #works #nav a   {background:url(../images/works/nav.gif) no-repeat 0 0; display:block; overflow:hidden; height:0; padding-top:34px;}
            #painting #works #nav a:hover,
            #painting #works #nav a.active  {background:url(../images/works/nav_on.gif) no-repeat 0 0;}
            
            #painting #works #nav .nav01  {margin-right:40px;}
            #painting #works #nav .nav02  {margin-right:40px;}
            #painting #works #nav .nav03  {margin-right:20px;}
            #painting #works #nav .nav04  {margin-right:28px;}
            
            #painting #works #nav .nav01 a  {background:url(../images/works/btn_all.gif) no-repeat 0 0; width:41px; padding-top:31px;}
            #painting #works #nav .nav01 a:hover,
            #painting #works #nav .nav01 a.active  {background:url(../images/works/btn_all_on.gif) no-repeat 0 0;}
            
            
            #painting #works #nav .nav02 a  {background-position:0 0; width:86px;}
            #painting #works #nav .nav03 a  {background-position:-129px 0; width:158px;}
            #painting #works #nav .nav04 a  {background-position:-307px 0; width:70px;}
            #painting #works #nav .nav05 a  {background-position:-404px 0; width:231px;}
            

        #painting #works #worksList  {padding:0 30px;}
            #painting #works #worksList li  {float:left; margin:0 10px 20px 10px;}


/* overlay */
#ovBox  {}
#ovBox #ovPhoto  {margin-bottom:30px; text-align:center;}
    #ovBox #ovPhoto img  {max-width:800px;}

#ovBox #ovTxt  {width:455px; margin:0 auto;}
    #ovBox #ovTxt h3  {font-size:150%; font-weight:bold; margin-bottom:15px; line-height:150%;}
    #ovBox #ovTxt p   {margin-bottom:25px;}
    #ovBox #ovTxt a   {background:#ff9494;}



/*---------------------------------------------------------------------
Blog layout
---------------------------------------------------------------------*/
#blog #container  {width:600px;}
    #blog #container h2  {margin-bottom:60px;}
    
    #blog #blogContainer  {}
        #blog #blogContainer .entry  {background:url(../images/blog/line_blog.gif) no-repeat 50% 0; padding-top:26px; margin-bottom:110px;}
            #blog #blogContainer .entry h3  {text-align:center; margin-bottom:50px; font-family:miroco_font; font-size:24px;}
            #blog #blogContainer .entry p   {margin-bottom:25px;}
            #blog #blogContainer .entry a   {background:#ff9494;}

    #blog #link  {background:url(../images/blog/line_blog.gif) no-repeat 50% 0; padding-top:26px;}
        #blog #linkArchive h4  {float:left; font-size:117%; margin-right:10px;}

    #blog #pagenate  {text-align:center; font-family:miroco_font; font-size:24px;}
    /* #blog #pagenate.hide  {visibility:hidden; padding:0 0 20px 0;} */

#blog #ajaxContent.loading  {background:url(../images/common/ic_loader.gif) no-repeat 50% 100%; padding-bottom:50px;}

#blog #pagenate  {position:relative; padding:20px 0;}
#blog #pagenate span,
#blog #pagenate a  {display:inline-block; *display:inline; *zoom:1; vertical-align:middle;}
#blog #pagenate .page,
#blog #pagenate .extend  {margin:0 4px;}
#blog #pagenate .previouspostslink,
#blog #pagenate .nextpostslink  {display:block; overflow:hidden; height:0; width:50px; position:absolute; top:50%;}
#blog #pagenate .previouspostslink  {background:url(../images/blog/btn_prev.gif) no-repeat 0 0; padding-top:30px; left:0; margin-top:-15px;}
#blog #pagenate .nextpostslink      {background:url(../images/blog/btn_next.gif) no-repeat 0 0; padding-top:33px; right:0; margin-top:-16px;}
#blog #pagenate .pages  {display:none;}


/*---------------------------------------------------------------------
pjax
---------------------------------------------------------------------*/
#pjax-progressbar  {background:rgba(0,0,0,.2); display:none; position:fixed; bottom:0; left:0; z-index:9999; width:100%; height:5px;}
#pjax-progressbar #prog_inner  {background:#f77; position:absolute; top:0; left:0; width:0; height:3px;}




/*---------------------------------------------------------------------
colorbox
---------------------------------------------------------------------*/
#colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999;}
#cboxWrapper {max-width:none;}
#cboxOverlay{position:fixed; width:100%; height:100%;}
#cboxMiddleLeft, #cboxBottomLeft{clear:left;}
#cboxContent{position:relative;}
#cboxLoadedContent{overflow:auto; -webkit-overflow-scrolling: touch;}
#cboxTitle{margin:0;}
#cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%; height:100%;}
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;}
.cboxPhoto{float:left; margin:auto; border:0; display:block; max-width:none; -ms-interpolation-mode:bicubic; background:#fff8eb;}
.cboxIframe{width:100%; height:100%; display:block; border:0; padding:0; margin:0;}
#colorbox, #cboxContent, #cboxLoadedContent{box-sizing:content-box; -moz-box-sizing:content-box; -webkit-box-sizing:content-box;}

/* 
    User Style:
    Change the following styles to modify the appearance of Colorbox.  They are
    ordered & tabbed in a way that represents the nesting of the generated HTML.
*/
#cboxOverlay{background:#fff8eb;}
#colorbox{outline:0;}
    #cboxContent{margin-top:32px; overflow:visible; background:#fff8eb;}
        .cboxIframe{background:#fff;}
        #cboxError{padding:50px; border:1px solid #ccc;}
        #cboxLoadedContent{background:#fff8eb; padding:30px;}
        #cboxLoadingGraphic{}
        #cboxLoadingOverlay{background:#fff8eb;}
        #cboxTitle{position:absolute; top:-22px; left:0; color:#000;}
        #cboxCurrent{position:absolute; top:-22px; right:205px; text-indent:-9999px;}

        /* these elements are buttons, and may need to have additional styles reset to avoid unwanted base styles */
        #cboxPrevious, #cboxNext, #cboxSlideshow, #cboxClose {border:0; padding:0; margin:0; overflow:visible; text-indent:-9999px; position:fixed;}
        
        /* avoid outlines on :active (mouseclick), but preserve outlines on :focus (tabbed navigating) */
        #cboxPrevious:active, #cboxNext:active, #cboxSlideshow:active, #cboxClose:active {outline:0;}

        #cboxPrevious{background:url(../images/works/btn_prev.png) no-repeat 0 0; width:74px; height:46px; top:50%; margin-top:-19px; left:40px;}
        #cboxPrevious:hover{}
        #cboxNext{background:url(../images/works/btn_next.png) no-repeat 0 0; width:74px; height:49px; top:50%; margin-top:-20px; right:40px;}
        #cboxNext:hover{}
        #cboxClose{background:url(../images/works/btn_close.png) no-repeat 0 0; width:66px; height:74px; top:40px; right:40px;}
        #cboxClose:hover{}
        .cboxSlideshow_on #cboxPrevious, .cboxSlideshow_off #cboxPrevious{right:66px;}
        .cboxSlideshow_on #cboxSlideshow{background-position:-75px -25px; right:44px;}
        .cboxSlideshow_on #cboxSlideshow:hover{background-position:-100px -25px;}
        .cboxSlideshow_off #cboxSlideshow{background-position:-100px 0px; right:44px;}
        .cboxSlideshow_off #cboxSlideshow:hover{background-position:-75px -25px;}