/* @group Reset */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
/* @end */


/* @group Page Style */
body {
  color: #272727;
  font-size: 8pt;
  /*background: url(http://f.cl.ly/items/0C3h3E3A1D3l0Z2n0i0z/bg2.png) no-repeat 50% 0;*/
  font-family: "pt-sans-1","pt-sans-2",sans-serif;
  font-weight: 300;
}

#name {
  text-indent: -9999px;
  width: 128px;
  height: 128px;
  background: url(http://static.tumblr.com/wot22jl/moxm74oq4/icon2.png) no-repeat 0 0;
  background-size: 100%;
  margin-top: 74px;
  margin-bottom: 74px;
}
#name:hover {
  cursor: pointer;
  background-position: 0 100%;
}

header, section {
  width: 40%;
  margin: 0 auto;
  min-width: 480px;
  max-width: 1500px;
}

.content {
  margin-bottom: 6em;
  padding-right: 10em;
}
/* @end */


/* @group Text Style */
p, ul, ol {
  color: #323232;
  font: 300 2.0em/1.8em "pt-sans-1","pt-sans-2",sans-serif;
}

p { margin-bottom: 1.5em; }
  
blockquote {
  padding-left: 2em;
  border-left: 1em solid #fe5252;
}

.afterword { 
  margin-top: 15em;
  vertical-align: bottom;
}

.afterword p {
  color: #c4c4c4;
}

.afterword p a { 
  color: #c4c4c4; 
  text-decoration: none;
  border: none;
}

h2 { font-size: 4.2em; margin-bottom: 0.5em; }
h3 { font-size: 3.6em; margin-bottom: 1.0em; margin-top: 1.5em; }
h4 { font-size: 3.0em; margin-bottom: 1.0em; margin-top: 2.5em; }
h1, h2, h3, h4 {
  font-style: normal;
  font-weight: 700;
  font-family: "pt-sans-narrow-1","pt-sans-narrow-2",Helvetica,sans-serif;
}

.subtitle { color: #c4c4c4; display: block; margin-top: -1.4em; }

em { font-style: italic; }

strong {
  background-color: #fe5252;
  /*font-weight: 700;*/
  color: #ffffff;
}

p a { border-bottom: 2px dashed rgba(255, 80, 80, 0.5); }
p a:hover { border-bottom: 2px dashed #fe5252; }
p strong a, p strong a:hover { color: #ffffff; border: none; }
p strong a:hover { background-color: rgba(255, 80, 80, 0.5); }

a {
  text-decoration: none;
  font-style: normal;
  color: #272727;
}

ol {
  margin-bottom: 1.5em;
  padding-left: 2em;
  border-left: 1em solid #fe5252;
}
ol ul {
  padding-left: 2em;
  font-size: 1.0em;
}

::-moz-selection{
  text-shadow: none;
  background-color: #fe5252;
  color: #ffffff;
}
::selection {
  text-shadow: none;
  background-color: #fe5252;
  color: #ffffff;
}

.break { font-size: 3.0em; letter-spacing: 10px; display: block; margin-top: -1.0em;}
.break a, .break a:hover { border: none; }

.preview { margin-bottom: 10.0em; }
/* @end */


/* @group Text Modifications */
.center { text-align: center; margin: 0 auto; }
.inline { display: inline; }
.floatright { float: right; }
.textright { text-align: right; }
.nomargin { margin-bottom: 0; }
/* @end */


/* @group Flexible Sizes */
@media screen and (max-width: 2000px) {
  header, section { width: 50%; }
  p, ul, ol { font-size: 2.0em;
  line-height: 1.6em;
  }
  .content { padding-right: 9em; }
  h2 { font-size: 3.6em; }
  h3 { font-size: 2.6em; }
  h4 { font-size: 2.2em; }
}

@media screen and (max-width: 1680px) {
  header, section { width: 55%; }
  p, ul, ol { font-size: 2.0em; }
  .content { padding-right: 6em; }
  h2 { font-size: 3.6em; }
  h3 { font-size: 2.6em; }
  h4 { font-size: 2.2em; }
}

@media screen and (max-width: 960px) {
  header, section {
    width: 80%;
    min-width: 400px;
  }
  .content { padding-right: 2em; }
  p, ul, ol { font-size: 1.3em; }

}

@media screen and (max-width: 480px) {
  header, section {
    width: 90%;
    min-width: 320px;
  }
  p, ul, ol { font-size: 1.2em; }
  h2 { font-size: 3.0em; }
  h3 { font-size: 2.0em; }
  h4 { font-size: 1.5em; }
  .content { padding-right: 0; }
}
/* @end */