@media screen{
/* resets */
*{margin: 0; padding: 0; line-height: 1.2;}
header, footer, aside, section, nav, article, header a, #cMe label{display: block;}
a{cursor: pointer; text-decoration: none; outline: none; color: #0080ff;}
a:visited{color: #800000;}
a:focus, a:hover{text-decoration: underline;}
img, a img{border: 0;}
ol, ul{list-style:none;}
.fL{float: left;} .fR{float: right;} .cL{clear: left;} .cR{clear: right;} .cB{clear: both;}
.ext{padding-right: 20px; background: transparent url('i/ext.png') 100% 50% no-repeat;}
body{font: normal 20px/1em Georgia, sans-serif; background: #eee;}
/* font-face */
@font-face{font-family: 'Diavlo Bold'; src: url('GraublauWeb.eot'); src: local('Graublau Web Regular'), local('Graublau Web'), url('f/db.otf') format('opentype');}
@font-face{font-family: 'Diavlo Light'; src: url('GraublauWeb.eot'); src: local('Graublau Web Regular'), local('Graublau Web'), url('f/dl.otf') format('opentype');}
@font-face{font-family: 'Diavlo Medium'; src: url('GraublauWeb.eot'); src: local('Graublau Web Regular'), local('Graublau Web'), url('f/dm.otf') format('opentype');}
/* common */
h1, h2, h3, h4, h5, h6{font-family: "Diavlo Bold", serif;}
h1{font-size: 200%;} h2{font-size: 180%;} h3{font-size: 160%;} h4{font-size: 140%;} h5{font-size: 120%;}
header, section, footer{margin: .5em auto; width: 80%;}
h1, #me h2, #me h3, #elsewhere h4, #cMe button{border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; -khtml-border-radius: 5px;}
#me h2, #me h3{color: #000; text-align: center;}
#me h2, #me h3, #me li, #elsewhere li, #elsewhere h4, #cMe textarea, #cMe input, footer p{padding: 5px 0;}
#me, #elsewhere{width: 49%;}
#elsewhere div, footer{color: #333; font-size: 80%;}
#cMe button, #cMe button:hover, #cMe button:focus, #elsewhere h4{color: #fff;}
/* header */
header{background: url('i/logo.png') 0 50% no-repeat; padding: 2em 0;}
  header a{font: 120% "Diavlo Medium", sans-serif; text-indent: 90px;}
/* info */
h1{border: double #aaa; border-width: 3px; line-height: 1.3; padding: .3em; margin: 0 0 .6em; background: #ddd;}
/* blog */
h2{background: #ffb257;}
  #me ul{margin: .4em 0 .4em 10px;}
/* contact */
h3{background: #b2996f;}
  #cMe p{margin: .5em 0 .5em 10%;}
    #cMe label{padding: 0 0 4px;}
    #cMe textarea, #cMe input{background: #ecf3cf; color: #800000; border: 1px solid #aaa; font-size: 105%; width: 80%;}
    #cMe textarea{min-height: 100px;}
    #cMe textarea:hover, #cMe textarea:focus, #cMe input:hover, #cMe input:focus{background: #eee; color: #800000;}
    #cMe button{border: 1px solid #808000; background: #808000; padding: 8px 2em; font-size: 110%;}
    #cMe button:hover, #cMe button:focus{background: #800000;}
/* elsewhere */
#elsewhere h4{background: #2f4f4f; text-align: center;}
  #elsewhere li{position: relative;}
    #elsewhere a{font: bold 110% "Diavlo Light", sans-serif;}
      #elsewhere span{display: none; width: 32px; height: 32px; background: url('i/soc.png') no-repeat; position: absolute; right: 5px; top: 10px; opacity: 0.5;}
        #elsewhere a:hover span, #elsewhere a:focus span{opacity: 1.0;}
          #elsewhere li:nth-child(1) span{display: block; background-position: 0 0;}
          #elsewhere li:nth-child(2) span{display: block; background-position: 0 -128px;}
          #elsewhere li:nth-child(3) span{display: block; background-position: 0 -96px;}
          #elsewhere li:nth-child(4) span{display: block; background-position: 0 -160px;}
          #elsewhere li:nth-child(5) span{display: block; background-position: 0 -32px;}
    #elsewhere div{margin-right: 50px;}
/* footer */
footer{border-top: 1px dashed #aaa; text-align: right;}
  footer a{color: #666;}
} /* screen END */

@media print{
a{text-decoration: underline;}
a:after {content: " (" attr(href) ")";}
h3, #cMe{display: none;}
}/* print END */