body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{ margin: 0; padding: 0;}
table{ border-collapse: collapse; border-spacing: 0;}
fieldset,img{ border: 0;}
address,caption,cite,code,dfn,var{ font-style: normal; font-weight: normal;}
ol,ul{ 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;}

html{ overflow-y: scroll;}
body{ background: white; color: #5b818e; font-family: 'Open Sans',Arial,sans-serif; font-size: 20px; line-height: 1.5; margin: 0 auto 120px; width: 940px;}
a{ color: #1a94bd; cursor: pointer; text-decoration: none;}
a:hover{ color: #333; text-decoration: underline;}

h1{ color: #1a94bd; font-size: 28px; font-weight: bold; line-height: 1.25;}
h2{ border-radius: 4px; color: #fff; display: inline-block; font-size: 16px; margin: 1em 0; padding: .125em .625em .25em;}

header{ padding: 60px 0; text-align: center;}
header a{ color: #e3b8b8; display: inline-block;}
header strong{ background: #db7272 url(jt.png) no-repeat center center; border-radius: 60px; display: inline-block; height: 120px; margin-bottom: .5em; overflow: hidden; text-indent: -290486px; width: 120px;}
header em{ display: block; font-size: 13px;}
header a:hover{ color: #db7272; text-decoration: none;}

#articles{ float: left; width: 620px;}
#articles h2{ background: #69b7d1; float: left; margin-top: 0;}
#toggle{ display: inline-block; float: right; font-size: 16px; padding: .125em 0 .25em;}
#toggle a{ display: inline-block; margin-left: .625em;}
#toggle .on{ color: #333; cursor: default; font-weight: bold;}
#toggle .on:hover{ text-decoration: none;}
#articles ul{ clear: both;}
#articles li{ font-size: 18px; line-height: 1.25; margin-bottom: .75em;}
#articles li:last-child{ margin-bottom: 0;}
#articles h3{ display: inline;}
#articles .recommended h3{ font-size: 20px; font-weight: bold;}
#articles a:visited, article a:visited{ color: #999;}
#articles a:visited:hover, article a:visited:hover{ color: #333;}
#articles time{ color: #ccc; float: right; font-size: 12px; margin-left: 1em; padding-top: .5em;}
#articles li:hover time, footer:hover{ color: #999;}

aside{ color: #ccc; float: right; font-size: 14px; width: 220px;}
aside a{ color: #ccc;}
#music h2{ background: #bec288; margin-top: 0;}
#player{ width: 200px;}
#player img, #player object{ display: block;}
#music p{ margin-top: .5em;}
#music p a{ color: #bec288;}
#music p a:hover{ color: #333;}
#portfolio h2{ background: #7cb185;}
#viewer{ border-radius: 4px; display: block; height: 132px; margin-bottom: 1em; overflow: hidden; position: relative; width: 220px;}
#viewer strong{ display: block; left: 0; position: absolute; top: 0;}
#viewer img{ cursor: pointer; float: left;}
#viewer span{ box-shadow: 0 1px 1px rgba(0, 0, 0, .25) inset; display: block; height: 100%; left: 0; position: absolute; top: 0; width: 100%;}
#portfolio ul li a.on{ color: #7cb185; font-weight: bold;}
#portfolio ul li a.on:hover{ color: #333;}
footer h2{ background: #9b8db8;}
footer p{ margin-bottom: 1em;}
footer a{ color: #907eb2;}

article time{ color: #ccc; font-size: 16px;}
article h2{ border-bottom: 1px solid #ccc; border-radius: 0; box-shadow: none; color: #333; display: block; font-size: 28px; margin-top: 2em; padding: 0 0 .5em; text-shadow: none;}
article h3{ color: #333; font-size: 24px; margin-top: 2em;}
article p, article ul{ margin: 1em 0;}
article ul li, article blockquote{ margin-left: 1em; position: relative;}
article ul li:before, article blockquote:before{ color: #ccc; content: "*"; left: -1em; position: absolute; top: 4px;}
article blockquote{ font-style: italic;}
article blockquote:before{ content: ">"; font-style: normal; top: 0;}
article a{ text-decoration: underline;}
article code, article pre{ background: whitesmoke; border: 1px solid #ccc; border-radius: 4px; color: #999; font-size: 18px; padding: .125em .25em;}
article pre code{ border: none; padding: 0;}
article img{ max-width: 100%;}
figure{ margin: 2em; text-align: center;}
figcaption{ color: #ccc; font-size: 16px; margin-top: 1em;}

/* Responsiveness */

@media only screen and (max-width: 980px) {
  body{ margin: 0 20px 120px; min-width: 280px; width: auto;}
}

@media only screen and (max-width: 900px) {
  #articles{ width: 540px;}
}

@media only screen and (max-width: 820px) {
  #articles, aside{ float: none; width: auto;}
  #music h2{ margin-top: 1em;}
}

@media only screen and (max-width: 540px) {
  #articles time{ display: none; float: none; margin-left: .5em;}
}

/* CSS 3 nonsense */

a,
time,
footer
{ -webkit-transition: color 500ms ease-out;
transition: color 500ms ease-out;}

#viewer img
{ -webkit-transition: all 500ms ease-out;
transition: all 500ms ease-out;}

/* Animation */

.animated{ animation-duration: .5s; animation-fill-mode: both;}
#logo{ animation-delay: .25s; animation-name: down;}
#articles, #music, #portfolio, footer{ animation-name: up;}
#articles{ animation-delay: .5s;}
#music{ animation-delay: .75s;}
#portfolio{ animation-delay: 1s;}
footer{ animation-delay: 1.25s;}

.animated{ -webkit-animation-duration: .5s; -webkit-animation-fill-mode: both;}
#logo{ -webkit-animation-delay: .25s; -webkit-animation-name: down;}
#articles, #music, #portfolio, footer{ -webkit-animation-name: up;}
#articles{ -webkit-animation-delay: .5s;}
#music{ -webkit-animation-delay: .75s;}
#portfolio{ -webkit-animation-delay: 1s;}
footer{ -webkit-animation-delay: 1.25s;}

@keyframes up{
  0%{ opacity: 0; transform: translateY(20px);}
  100%{ opacity: 1; transform: translateY(0);}
}

@keyframes down{
  0%{ opacity: 0; transform: translateY(-20px);}
  100%{ opacity: 1; transform: translateY(0);}
}

@keyframes fade{
  0%{ opacity: 0;}
  100%{ opacity: 1;}
}

@-webkit-keyframes up{
  0%{ opacity: 0; -webkit-transform: translateY(20px);}
  100%{ opacity: 1; -webkit-transform: translateY(0);}
}

@-webkit-keyframes down{
  0%{ opacity: 0; -webkit-transform: translateY(-20px);}
  100%{ opacity: 1; -webkit-transform: translateY(0);}
}

@-webkit-keyframes fade{
  0%{ opacity: 0;}
  100%{ opacity: 1;}
}