/**********
  Description: Second theme for yun4.net
  Author: Keefe Tang
  Last Edit: 1.03.2010
  Note: Many thanks to Kroc Camen (http://camendesign.com/design/) for the inspiration and codes
        The site now follows the 16 column, 960px grid system.
        Vertically the site follows a 27px reading rhythm with 18px font.
 **********/


/* Reset */
html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,
small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,
aside,dialog,figure,footer,header,hgroup,menu,nav,section,time,mark,audio,video
{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent;}
body{line-height:1;}
ol,ul{list-style:none;}
blockquote,q{quotes:none;}
blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;}
:focus{outline:0;}
ins{text-decoration:none;}
mark{background-color:#ff9;color:#000;font-style:italic;font-weight:bold;}
del{text-decoration:line-through;}
table{border-collapse:collapse;border-spacing:0;}
input,select{vertical-align:middle;}


/* HTML 5 (Convert them into structural elements,since they have no default style yet) */
header,nav,footer,section,aside,article,figure{display:block;}


/* General */
html{background:#ddd;-webkit-text-stroke:1px transparent;}
body{font:400 106.25%/1.47059 "Minion Pro","Minion Web",Times,serif;color:#111;text-shadow:1px 1px 0 #fafafa;}
cite{font-style:italic;}
strong{font-weight:bold;}
em,dfn{font-style:italic;}
dfn{font-weight:bold;}
address{margin:0 0 1.47059em 0;font-style:italic;}
del{color:#888;text-decoration:line-through;}
sup{vertical-align:text-top;}
sub{vertical-align:text-bottom;}
sub,sup{font-size:0.8em;line-height:0.5;}
small{vertical-align:top;}
q{font-style:italic;font-family:Palatino,"Palatino Linotype",Times,serif;}
hr{margin:2.94118em 0;text-align:center;border-width:0;}
hr:after{content:"··•··";letter-spacing:2em;}
object{margin:1.47059em 0;}


/* Links */
a{color:#982bc0;text-shadow:1px 1px 0 #f5f5f5;text-decoration:none;
  -webkit-transition:color 0.5s linear,text-shadow 0.5s linear;
  -o-transition:color 0.5s linear,text-shadow 0.5s linear;
  -moz-transition:color 0.5s linear,text-shadow 0.5s linear;
  transition:color 0.5s linear,text-shadow 0.5s linear;}
a:hover,a:focus{color:#000;text-shadow:1px 1px 0 #fff;}


/* Paragraph */
p+p{text-indent:1.47059em;}
/*p{text-align:justify;hyphenate:auto;hyphenate-before:2;hyphenate-after:3;hyphenate-lines:3;}*/
  
  
/* Target */
:target{background:#fafafa;}


/* Text Selection */
::selection{background:#888;color:#fff;text-shadow:1px 1px 0 #111;}
::-moz-selection{background:#888;color:#fff;text-shadow:1px 1px 0 #111;}


/* Scrollbar */
::-webkit-scrollbar{width:0.5em;height:0.5em;background:#ddd;}
::-webkit-scrollbar-button{display:block;height:0.5em;background:#ddd;}
::-webkit-scrollbar-track{background:#ddd;}
::-webkit-scrollbar-track-piece{background:#bbb;-webkit-border-radius:1em;}
::-webkit-scrollbar-thumb{height:5em;width:5em;background:#999;-webkit-border-radius:1em;}
::-webkit-scrollbar-corner{background:#ddd;}


/* Abbrevation */
p:hover abbr[title],dt:hover abbr[title],ul:hover>li>abbr[title],ol:hover>li>abbr[title],
dd:hover>abbr[title],dd:hover>:not(p):not(dl):not(ul):not(ol):not(blockquote) abbr[title],
li:hover>abbr[title],li:hover>:not(p):not(dl):not(ul):not(ol):not(blockquote) abbr[title],
ul:hover>li>:not(p):not(dl):not(ul):not(ol):not(blockquote) abbr[title],
ol:hover>li>:not(p):not(dl):not(ul):not(ol):not(blockquote) abbr[title]
{border-bottom:1px dotted #888;cursor:help;}
section abbr,h1 abbr,nav abbr{font-variant:small-caps;letter-spacing:0.11765em;text-transform:none;}



/* Images */
figure{margin:1.47059em auto;}
figure>dd{margin:0;}
figure>dt{font-weight:400;margin:0.73529em auto 0 auto;text-align:center;line-height:1;}
figure>dt>a{color:#fff;text-shadow:1px 1px 0 #111;background:rgba(0,0,0,0.55);padding:0.31373em 0.75em 0.15686em 0.75em;
  display:inline-block;
  -webkit-border-radius:1em;
  -moz-border-radius:1em;
  -o-border-radius:1em;
  border-radius:1em;
  
  -webkit-transition:background 0.5s linear;
  -o-transition:background 0.5s linear;
  -moz-transition:background 0.5s linear;
  transition:background 0.5s linear;}
figure:hover>dt>a{background:rgba(0,0,0,0.65);}
figure img{display:block;margin:0 auto;
  -webkit-box-shadow:0 0 8px #888;
  -moz-box-shadow:0 0 8px #888;
  -o-box-shadow:0 0 8px #888;
  box-shadow:0 0 8px #888;
  
  -webkit-transition:-webkit-box-shadow 0.5s linear;
  -moz-transition:-moz-box-shadow 0.5s linear;
  -o-transition:-o-box-shadow 0.5s linear;
  transition:box-shadow 0.5s linear;}
figure:hover img{-webkit-box-shadow:0 0 10px #666;
                 -moz-box-shadow:0 0 10px #666;
                 -o-box-shadow:0 0 10px #666;
                 box-shadow:0 0 10px #666;}
img.left{float:left;margin:0 1.47059em 0 0;}
img.right{float:right;margin:0 0 0 1.47059em;}


/* Table */
section>table{margin:1.47059em 0;width:100%;text-align:left;}
section>table th{font-weight:bold;}
section>table tfoot{font-style:italic;}
section>table th,section>table td{border:1px solid #888;padding:0.36765em 0.73529em;}
section>table tr:nth-child(2n+1){background-color:#fafafa;}


/* List */
ul ul,ol ol,ul ol,ol ul,li ul,li ol{margin:0 1.5em;}
ul,ol{margin:1.5em 0;}
ul{list-style-type:disc;}
ol{list-style-type:decimal;}

p+dl{margin:1.47059em 0;}
dt{font-weight:bold;}
dd{margin:0 0 1.47059em 1.47059em;}
dt+dt{margin:1.47059em 0 0 0;}


/* Headings */
h1,h2,h3,h4,h5,h6{font-weight:400;color:#000;text-transform:capitalize;}
h1{font-size:2.05882em;line-height:1.42857;margin:0 0 0.71429em 0;}     /* 35px */
h2{font-size:1.70588em;line-height:1.72414;margin:0 0 0.86207em 0;}     /* 29px */
h3{font-size:1.41176em;line-height:1.04167;margin:1.04167em 0;}         /* 24px */
h4{font-size:1.17647em;line-height:1.25;margin:1.25em 0;}               /* 20px */
h5,h6{font-size:1em;line-height:1.47059;margin:1.47059em 0;}            /* 17px */

p+h2{margin:0.86207em 0;}


/* Article Blockquote */
blockquote{font:italic 1.05882em/1.38889 Palatino,"Palatino Linotype",Georgia,serif;position:relative;
  margin:1.38889em;color:#000;}
blockquote:after{content:".";clear:both;height:0;visibility:hidden;display:block;}
blockquote>p{text-align:right;margin:0 0.5em 0. 2.5em;}
blockquote>p+p{margin-bottom:1.38889em;}
blockquote>cite{float:right;text-align:right;margin:0 0.5em 0 2.5em;font-variant:small-caps;font-style:normal;}
blockquote>cite:before{content:"\2014\00A0";}


/* Code */
code{font:13px/0 Menlo,Monaco,monospace;}
pre{width:100%;counter-reset:pre;font:13px/0 Menlo,Monaco,monospace;border:1px solid #888;margin:1.92308em 0;
  padding:0;white-space:normal;color:#111;text-shadow:none;}
pre code{display:block;margin-left:2.9em;border-left:1px solid #888;white-space:pre-wrap;line-height:1.92308;
  background-color:#fafafa;}
pre code:before{counter-increment:pre;content:counter(pre);display:inline-block;width:2.30769em;margin:0 0.5em 0 -2.95em;
  padding:0 0.5em 0 0;text-align:right;color:#111;}
pre code,code samp,code var,code dfn,code i{font-style:normal;font-family:Monaco,monospace;}
code span.red{color:#ff0000;}
code span.green{color:#008000;}
code span.purp{color:#800080;}
code span.teal{color:#008080;}
code span.blue{color:#cb032b;}
code span.crimson{color:#f08080;}
code span.comm{color:#808080;font-style:italic;}
code span.ital{font-style:italic;}
code span.embsrc{background-color:#808080;}


/* Footnote */
.footnotedivider{font-size:0.88235em;margin:1.66667em 0 0 0;line-height:1.66667;}


/* Special */
span.amp,abbr[title="et cetera"]{font:italic 1em/0 "Minion Pro","Minion Web","Hoefler Text",Baskerville,"Goudy Old Style",cursive;}


/* IE */
#ie{background:#fbe3e4;border-top:1px solid #b22614;border-bottom:1px solid #b22614;color:#b22614;text-shadow:none;
  padding:0.2em;margin:0.5em 0 0 0;text-align:center;}
#ie a{color:#b22614;text-decoration:underline;}
#ie a:hover{color:#f73218;border:0;}


/* Misc */
.left{float:left;}
.right{float:right;}
.clear{clear:both;}
.red{color:red;}
.full{width:100%;height:auto;}


/* Desktop version (shared with iphone style as well) */
@media screen,projection{
  /* General */
  body{width:56.47059em;margin:0 auto;}
  
  
  /* Header */
  body>header{margin:1.47059em 0;padding:0 0 1.47059em 0;border-bottom:1px solid #888;}
  body>header em{font-weight:200;font-style:normal;}
  body>header>h1{font:900 3.05882em/1.44231 "Helvetica Neue",Helvetica;letter-spacing:-0.05em;margin:0 0 0.48077em 0;text-transform:none;}
    body>header>h1>a{font-weight:200;}
  body>header>h2{font:200 1.52941em/1.2 "Helvetica Neue",Helvetica;letter-spacing:-0.05em;color:#111;text-transform:none;}
    body>header>h2>a{font-weight:900;}
    
    
  /* Article > Post */
  body>article{width:100%;border-bottom:1px solid #888;margin:0 0 1.47059em 0;padding:1.47059em 0 0 0;position:relative;}
  body>article:after{content:".";clear:both;height:0;visibility:hidden;display:block;}
  
    /* Article > Post > Aside */
    body>article>aside{width:5.88235em;float:left;margin:0 0 0 0.58824em;position:absolute;top:1.7em;}
    
      /* Article > Post > Aside > Time */
      body>article>aside>time{font-size:4em;line-height:1;float:right;width:1.35em;text-align:center;color:#000;}
      body>article>aside>time>sub{font-size:0.25em;position:absolute;bottom:-1.15em;right:0.001em;width:5.4em;}
      body>article>aside>time>sub>abbr{float:right;text-transform:none;}
      body>article>aside>time>sub>abbr[title]{float:left;}

    /* Article > Post > Section */
    body>article>section{width:41.17647em;float:left;margin:0 0 0 7.64706em;}
    
      /* Article > Post > Section > Header */
      body>article>h1{margin-left:3.68571em;width:20em;}/* 129px */
      body>article>section h2[id]:hover:after,body>article>section h3[id]:hover:after,body>article>section h4[id]:hover:after
        {display:inline;content:" #" attr(id);color:#888;font-style:italic;text-transform:none;}
        
        /* Article > Post > Section > Header > Link */
        body>article h1 a,body>article h2 a,body>article h3 a,
        body>article h4 a,body>article h5 a,body>article h6 a
          {color:#000;text-shadow:1px 1px 0 #fff;}
        body>article h1 a:hover,body>article h2 a:hover,body>article h3 a:hover,
        body>article h4 a:hover,body>article h5 a:hover,body>article h6 a:hover
          {color:#982bc0;text-shadow:1px 1px 0 #f5f5f5;}
          

      /* Article > Post > Section > Aside */          
      body>article>section>aside{position:absolute;width:6.66667em;font-size:0.88235em;margin:0 0 1.66667em 48em;line-height:1.66667;}
    
      /* Article > Post > Section > Blockquote */
      body>article>section>blockquote:before{font:italic 5em/1 Times;content:"\201C";position:relative;left:-0.05em;top:-0.15em;float:left;height:0.3em;}
    
      /* Article > Post > Section > List */
      body>article>section>ul.col{list-style-type:none;
        -webkit-column-width:9.41176em;-moz-column-width:9.41176em;-o-column-width:9.41176em;column-width:9.41176em;
        -webkit-column-gap:1.17647em;-moz-column-gap:1.17647em;-o-column-gap:1.17647em;column-gap:1.17647em;}
    

    /* Article > Post > Footer */
    body>article>footer{width:41.17647em;float:left;margin:1.47059em 0 1.47059em 7.64706em;}
    body>article>footer>a[rel=bookmark]{float:left;}
    body>article>footer>a{float:right;}
    body>article>footer>a:hover{border:0;}
    
    
  /* Article > Page */
  #tabb>section,#page>section{width:55.29412em;margin:0 0 0 0.58824em;}
  #tabb>footer,#page>footer{margin:1.47059em 0;width:55.29412em;}
  #page h1{margin-left:0;}

    /* Article > Page > Tab */
    #tabb-nav{margin:0 0 1.47059em 0;}
    #tabb-nav>ul{list-style-type:none;margin:0 auto;text-shadow:1px 1px 0px #eee;border-bottom:1px solid #888;}
    #tabb-nav>ul:after{content:".";clear:both;height:0;visibility:hidden;display:block;}
    #tabb-nav>ul>li{display:block;text-align:center;float:left;}
    #tabb-nav>ul>li:first-child{margin:0 0 0 2.5em;border-left:1px solid #888;}
    #tabb-nav>ul>li>a{border-right:1px solid #888;display:block;padding:0.73529em 1.25em;border-bottom:1px solid #888;
      position:relative;bottom:-1px;
      -webkit-transition:color 0.5s linear;
      -moz-transition:color 0.5s linear;
      -o-transition:color 0.5s linear;
      transition:color 0.5s linear;}
    #tabb-nav>ul>li>a.active{border-bottom:1px solid #ddd;color:#000;}
  
  
  /* Footer */
  body>footer{padding:0;margin:3em 0.625em;}
  body>footer:after{content:".";clear:both;height:0;visibility:hidden;display:block;}
  
  
  /* Misc */
  #error{width:55.29412em;}
  #error section{padding:0 0 1.47059em 0;}
  #error h1{font-size:15em;text-align:center;margin:0;}
  #error p{margin:0 5em;}
    
  .space{background:#888;}
}


/* Print */
@media print{
  /* General */
  body{color:#000;}
  header{font-size:1.25em;border-bottom:1px solid #888;padding:0 0 1.5em 0;margin:0 0 1.5em 0;}
  footer,aside,nav,body>header>h2{display:none;}
  
  
  /* Anchor Link */
  a{text-decoration:none;color:inherit;}
  a:not([href^="#"]):after{content: " (" attr(href) ") ";font-size:88.88888% Georgia,serif;color:#666;
    word-wrap:break-word;white-space:pre;}
  a[href^="/"]:after{content: " (" "http://www.yun4.net" attr(href) ") ";}
  header a:before,h1>a:after{content:"";}


  /* Headings */
  h1{margin:0 0 0.75em 0;}
  header>h1{margin:0;}
  h1,h2,h3{page-break-after:avoid;}
  
  
  /* Images */
  figure{margin:0 1.25em 1.5em 1.25em;}
  
  
  /* Code */
  pre{width:99%;}
  
  
  /* Article */
  body>article{margin:0 0 3em 0;width:100%;position:relative;border-bottom:1px solid #888;}
  
    /* Article > Section */
    body>article>section{padding:0 0 2em 0;}

      /* Article > Section > Blockquote */
      article>section>blockquote{page-break-inside:avoid;}
      article>section>blockquote:after{margin-left:89%;}

    /* Article > Aside */
    article>aside{display:none;}


  /* Images With Links */
  figure a:before,figure a:after{content:"";}


  /* Images */
  img{page-break-inside:avoid;}
  
  
  /* Misc */
  #archive,#search{text-align:center;padding:0.16667em 0.33333em;margin:1.2em 0 1em 0;border-top:1px solid #888;
    border-bottom:1px solid #888;}
}


/* iPhone (General) */
@media only screen and (max-device-width:480px){
  /* General */
  html{background:#ddd;-webkit-text-size-adjust:none;-webkit-text-stroke:0 #000;}


  /* Table */
  section>table th,section>table td{padding:1px 3px;}
  
  
  /* Images */
  img{width:100%;height:auto;}
  
  
  /* Headings */
  h1,h2,h3,h4,h5,h6{font:normal 400 100% Times;color:#000;}
  h1{font-size:30px;line-height:1.25;}
  h2{font-size:25px;line-height:1.25;}
  h3{font-size:20px;line-height:1.25;}


  /* Headers */
  body>header{padding:8px;margin:0 0 1.5em 0;border-bottom:1px solid #888;}
  body>header>h1{font-size:31px;}
  body>header>h2{display:none;}


  /* Code */
  pre{font-size:16px;width:100%;}
  
  
  /* Paragraph */
  section>p:first-of-type:first-letter{margin:0.111111em 0 0 0;}


  /* Article > Post */
  body>article{width:100%;margin:0 0 2em 0;padding:0;border-bottom:1px solid #888;}
  
    /* Article > Post > Aside */
    body>article>aside{display:none;}
    
    /* Article > Post > Section */
    body>article>section{padding:0 8px;margin:0;float:none;}
    
    /* Article > Post > Section > Header */
    body>article h1,body>article#page h1{margin:0 8px 8px 8px;padding:0;width:auto;}
    
      /* Article > Post > Section > Blockquote */
      body>article>section>blockquote{margin:0 16px 1.5em 16px;}
      body>article>section>blockquote:before{content:"";}
      body>article>section>blockquote>p,body>article>section>blockquote>cite{margin:0 8px 0.7em 8px;}
    
    /* Article > Post > Footer */
    body>article>footer{margin:0 8px 1.5em 8px;}

  
    /* Article > Page > Tab */
    #tabb-nav{margin:3em 0 0.75em 0;}
    #tabb-nav>ul{list-style-type:none;margin:0 auto;text-shadow:1px 1px 0px #eee;border-bottom:1px solid #888;}
    #tabb-nav>ul:after{content:".";clear:both;height:0;visibility:hidden;display:block;}
    #tabb-nav>ul>li{display:block;text-align:center;float:left;}
    #tabb-nav>ul>li:first-child{margin:0 0 0 0.5em;border-left:1px solid #888;}
    #tabb-nav>ul>li>a{border-right:1px solid #888;display:block;padding:0.5em 1em;color:#111;}
    #tabb-nav>ul>li>a:hover,#tabb-nav>ul>li>a:active{color:#111;}
  
  
  /* Sidebar */
  body>aside{display:none;}


  /* Footer */
  body>footer{background:#fafafa;padding:8px;border-bottom:1px solid #888;border-top:1px solid #888;margin:0;}
  body>footer a:hover,body>footer a:active{color:#000;text-shadow:1px 1px 0 #fff;background:#fafafa;}
  
  
  /* Misc */
  #archive,#search{border-color:#000;background:#e6e6e6;font-size:2em;}
  #error>h1{font-size:10em;}
  #everything{margin:0;}
}


/* iPhone (Portrait)  */
@media only screen and (max-device-width:480px) and (max-width:320px){
  /* General */
  body{width:320px;font-size:17px;}


    /* Article > Post > Section */
    body>article>section{width:304px;}
    
      /* Article > Post > Section > List */
      body>article>section>ul.col{-webkit-column-width:150px;-webkit-column-gap:4px;}
        
    /* Article > Post > Footer */
    body>article>footer{width:304px;}
    
    
  /* Article > Page */
  section.tab,#page section{width:304px;}
  
    
  /* Misc */
  #archive,#search,#error>h1,#error p{width:304px;}
}


/* iPhone (Landscape) */
@media only screen and (max-device-width:480px) and (min-width:321px){
  /* General */
  body{width:480px;font-size:16px;}


    /* Article > Post > Section */
    body>article>section{width:464px;}
    
      /* Article > Post > Section > List */
      body>article>section>ul.col{-webkit-column-width:150px;-webkit-column-gap:7px;}
        
    /* Article > Post > Footer */
    body>article>footer{width:464px;}
    
    
  /* Article > Page */
  section.tab,#page section{width:464px;}
  
    
  /* Misc */
  #archive,#search,#error>h1,#error p{width:464px;}
}