/*================================================
Reset styles
================================================*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, address, article, aside, audio, canvas,
cite, code, command, datalist, del, details,
dfn, em, embed, figcaption, figure, footer, header,
hgroup, ins, kbd, mark, meter, nav, output,
progress, q, rp, ruby, section, samp, small, strong,
sub, summary, sup, time, tt, var, dl, dt, dd, ol, ul,
li, fieldset, form, label, legend, table, caption,
tbody, tfoot, thead, tr, th, td, video {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: normal;
font-style: normal;
font-size: 100%;
font-family: inherit;
vertical-align: baseline;
}
body {
line-height: 1;
color: black;
background: white;
}
ol, ul {
list-style: none;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
border-collapse: separate;
border-spacing: 0;
}
caption, th, td {
text-align: left;
font-weight: normal;
}
sub {
vertical-align: sub;
}
sup {
vertical-align: super;
}
a img {
border: none;
}

article, aside, canvas, code, details, figcaption, figure,
footer, header, hgroup, nav, section, summary {
display:block;
}

/*================================================
Normal styles
================================================*/

body {
background: #fff url(images/bg.png);
z-index: -3;
font-family: Helvetica Neue, Helvetica, Arial, serif;
color: #000;
font-size: 100%;
}

a {
color: red;
color: rgba(255,0,0,.9);
text-decoration: none;
}

a:hover,
a:focus {
text-decoration: underline;
}

.page-container {
padding: 0 1em 1em 1em;
position: relative;
}

.page-head {
max-width: 21.714em;
font-size: 1.75em;
padding: .25em 0 1.15em 0;
color: #666;
color: rgba(100,50,0,.7);
text-shadow: 0 1px 0 rgba(255,255,255,.8);
line-height: 1.6;
}

.page-head a {
color: #69c;
color: rgba(0,150,255,.7);
}

.page-head .flickr {
color: rgba(255,0,132,.7);
}

.page-head .twitter {
color: rgba(72,209,255,.7);
}

.page-head:before {
display: block;
position: absolute;
z-index: -4;
top: -12.25em;
left: -5em;
content: "";
height: 30em;
width: 30em;
background: rgba(255,150,0,.2);
-moz-border-radius: 100em;
-webkit-border-radius: 100em;
-o-border-radius: 100em;
border-radius: 100em;
}

.page-head h1,
.page-head h2 {
font-size: 1.6em;
line-height: 1.3;
}

.page-head h2:after {
content: ",";
}

.content-container {
max-width: 78em;
border-bottom: 4px solid #000;
padding-top: 3.75em;
}

.content-container:after {
display: block;
content: "";
clear: both;
visibility: hidden;
}

.entry {
position: relative;
max-width: 38em;
padding-bottom: 1em;
float: right;
}

.entry-head {
margin-bottom: 1.1em;
}

.entry-head h3 {
margin-top: -.03em;
font-size: 2.4em;
line-height: 1.25;
}

.entry-head h3 em {
display: block;
position: absolute;
right: .1em;
top: .16em;
line-height: 0;
font-size: 4.75em;
color: red;
color: rgba(255,0,0,.8);
z-index: -4;
text-transform: uppercase;
letter-spacing: .1em;
text-shadow: .02em .02em 0 rgba(255,200,150,1),
.025em .025em 0 rgba(255,200,150,1),
.03em .03em 0 rgba(255,200,150,1),
.015em .015em 0 rgba(255,200,150,1),
.01em .01em 0 rgba(255,200,150,1),
.005em .005em 0 rgba(255,200,150,1);
}

.entry .time {
position: absolute;
top: -5em;
right: 0;
font-size: 1.5em;
padding-top: 1em;
text-align: center;
background: url(images/stamp.png) 10px -30px;
width: 4em;
height: 3em;
z-index: 4;
color: #fff;
-moz-border-radius: 4em;
-webkit-border-radius: 4em;
-o-border-radius: 4em;
border-radius: 4em;
-moz-transform: rotate(-10deg);
-webkit-transform: rotate(-10deg);
-o-transform: rotate(-10deg);
transform: rotate(-10deg);
-moz-box-shadow: -.08333em .041666em 0 #f00;
-webkit-box-shadow: -.08333em .041666em 0 #f00;
-o-box-shadow: -.08333em .041666em 0 #f00;
box-shadow: -.08333em .041666em 0 #f00;
}

.entry-body {
position: relative;
line-height: 2;
}

.entry-body p {
margin-bottom: 1em;
}

.entry-body ul {
margin: 0 0 1em 2em;
list-style: disc;
}

.entry-body ol {
margin: 0 0 1em 2em;
list-style: decimal;
}

.entry-body blockquote {
margin: 0 1em 2em 1em;
position: relative;
min-height: 2.65em;
font-size: 1.1em;
line-height: 1.78;
}

.entry-body blockquote:before {
position: absolute;
top: -.11em;
left: -.11em;
content: "\201C";
color: #f00;
color: rgba(255,0,0,.4);
font-size: 18.181em;
line-height: 1;
text-shadow: .01em .01em 0 rgba(255,150,0,.4);
z-index: -5;
}

.entry-body strong,
.entry-body strong em {
font-weight: bold;
}

.entry-body em,
.entry-body em strong {
font-style: italic;
}

.entry-body img {
display: block;
margin: 1em 0;
max-width: 100%;
-moz-box-shadow: .5em .5em 0 rgba(255,150,0,.2);
-webkit-box-shadow: .5em .5em 0 rgba(255,150,0,.2);
-o-box-shadow: .5em .5em 0 rgba(255,150,0,.2);
box-shadow: .5em .5em 0 rgba(255,150,0,.2);
}

.entry-body code {
padding: 1em;
margin: 1em 0 2em 0;
background: #ccc;
background: rgba(255,150,0,.2);
color: #090;
color: rgba(0,0,0,.8);
font-family: monospace;
white-space: pre;
text-shadow: .01em .01em 0 rgba(255,255,255,.4);
}

.entry-body samp {
padding: .25em;
background: #ccc;
background: rgba(255,150,0,.2);
font-family: monospace;
white-space: pre;
text-shadow: .01em .01em 0 rgba(255,255,255,.4);
}

.comment-link {
cursor: pointer;
}

.comments-container {
margin: 2em 0;
}

.archives-container {
clear: both;
border-top: 4px solid black;
padding-top: 2em;
background: url(images/square.gif) no-repeat;
}

.archives-container h4 {
padding-bottom: .5em;
font-size: 2em;
line-height: 1;
}

.archives-container li {
padding-left: 1em;
background: url(images/bullet.gif) 0 .5em no-repeat;
padding-bottom: 1em;
line-height: 1;
}

.archives-container a {
display: block;
}

.archives-container h3 {
font-size: 1.5em;
}


@media all and (max-width: 600px) {
.page-head {
font-size: 150%;
}
}

@media all and (max-width: 695px) {
.entry-head h3 {
font-size: 175%;
}

.entry-head .time {
font-size: 100%;
right: -.5em;
top: -5em;
}
}

@media all and (max-device-width: 480px) {
.entry-body {
font-size: 300%;
}

.entry-head h3 {
font-size: 6em;
}

.entry-head h3 em {
font-size: 1em;
}

.entry-head .time {
-webkit-transform: rotate(0);
transform: rotate(0);
position: relative;
top: 0;
left: 0;
text-align: left;
}
}