html {
    -webkit-font-smoothing: antialiased;
    font-smoothing: antialiased;
}

body { font:13px/1.231 sans-serif; *font-size:small; }
body, select, input, textarea { 
	color: #111; 
	font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
	font-weight: 300;
}

h1,h2,h3,h4,h5,h6 { font-weight: bold; }
h1 { font-size: 2em; }
select, input, textarea, button { font:99% sans-serif; }

a:hover, a:active { outline: none; }

.current { background: #ccc; }
dd, h1, body, html { margin: 0;}

a, a:active, a:visited { color: #4885C2; }
a:hover { color: #036; }
.wrapper {width:200px; border:1px solid red;}

dl {margin:0 auto; width:900px;}
dt {margin-bottom:20px; cursor:pointer; cursor:hand; padding:5px; font-weight:bold; }
dd {margin-bottom:30px;}

#clear-demo {width:500px; border:1px solid black;}
#clear-demo-l {width:200px; border:1px solid black; float:left;}
#clear-demo-r {width:200px; border:1px solid black; float:right;}
#clear-demo-b {width:200px; border:1px solid black;}

header {text-align:center;}
.show, .hide {color: #607890; cursor:pointer; cursor:hand;}

body {
  padding-bottom: 200px;
}

body {
background-color:#f5f5f5;
padding-bottom:0;
}
body, select, input, textarea {
color#000;
}
header .date {
color: #CCC;
text-transform: uppercase;
width: 140px;
margin: 45px auto 0;
display: block;
float: none;    
}
div.navigation {
background-color:#000000;
clear:both;
height:50px;
}
h1.branding {
clear: both;
font-size: 130px;
font-weight:bold;
}
h2.title {
font-size:40px;
font-weight:700;
padding:25px 0;
}
div#content {
border-top: 10px solid #000;
width:900px;
margin:0 auto; 
}
div#content ol {
list-style:none;
margin:0;
}
div#content ol li {
min-height:70px;
height:auto !important;
height:70px;
padding:25px 0;
border-bottom:1px dotted #CCCCCC;
}
div#content ol li:after {
content:"";
display:block;
clear:both;
}
div#content ol li.last {
border:none;
}
div.more {
padding: 25px 0 55px;
font-size: 22px;
font-weight: bold;
}
div.more a {
color: #CFCFCF;
text-decoration: none;
}
div.more a:hover {
color:#800000;
text-decoration:underline;
}
.branding .red-text {
padding:0;
color:#800000;
}
li span.title {
display:block;
float:left;
margin-bottom:20px;
width:290px;
}
li span.title a {
font-size:22px;
font-weight:bold;
color:#000;
text-decoration:none;
}
li span.title a:hover {
color:#800000;
text-decoration:underline;
}
li span.teaser {
display:block;
float:left;
margin-bottom:20px;
padding:5px;
width:580px;
}
span.summary {
font-size:16px;
display:block;
float:left;
width:500px;
padding:5px;
color: #444;
}
.date {
color:#800000;
display:block;
float:right;
font-weight:bold;
width:80px;
}
.date em {
border-right:1px solid #800000;
display:block;
float:left;
font-size:30px;
font-style:normal;
line-height:30px;
padding-right:5px;
width:34px;
}
.date small {
display:block;
float:left;
font-size:11px;
padding-left:5px;
position: relative;
top: 2px;
}
#footer {
position: relative;
height:520px;
font-size:19px;
}
#footer h2.title {
padding-top:30px;
color: #fff;
}
#footer p {
line-height:25px;
padding-bottom:25px;
color: #fff;
}
div#footer-main {
background-color:#7f0000;
text-align: left;
padding-bottom: 40px;
}
div#footer-main a {
color: #E90000;
text-decoration: none;
text-shadow: none;
font-weight: bold;
}
div#footer-main a:hover {
color:#ca0000;
text-decoration: underline;
}
div#footer-mid {
background-color:#750000;
height:135px;
padding-bottom:15px;
}
div#footer-base {
background-color:#000;
height:45px;
}
#footer div div {
width:900px;
margin:auto;
}
div.black-band {
display:block;
width:430px;
}
div.red-bands {
display:block;
float:right;
width:430px;
background-color:#C80000;
}
div.red-bands div {
display:block;
float:left;
height:50px;
width:25%;
}
div.red-bands div.b1 {
background-color:#580000;
}
div.red-bands div.b2 {
background-color:#750000;
}
div.red-bands div.b3 {
background-color:#ab0000;
}
div.red-bands div.crest {
background: url("/images/site/crest.png") no-repeat scroll 42px 10px #C80000;
}
#footer {
background-color:#000;
}
#footer div div div#links {
padding:40px 0 15px;
text-align: center;
width: 210px;
}
#footer div div div#links ul li {
float: left;
list-style:none;
}
#footer div div div#links ul li a {
display: block;
height: 20px;
overflow: hidden;
padding: 10px 15px;
text-indent: -9999px;
width: 20px;
}
#footer div div div#links ul li a#twitter {
background:url("/images/icons.png") no-repeat scroll 10px 10px transparent
}
#footer div div div#links ul li a#flickr {
background:url("/images/icons.png") no-repeat scroll -45px 10px transparent
}
#footer div div div#links ul li a#tumblr {
background:url("/images/icons.png") no-repeat scroll -95px 10px transparent
}
#footer div div div#links ul li a#twitter:hover {
background:url("/images/icons.png") no-repeat scroll 10px -20px transparent
}
#footer div div div#links ul li a#flickr:hover {
background:url("/images/icons.png") no-repeat scroll -45px -20px transparent
}
#footer div div div#links ul li a#tumblr:hover {
background:url("/images/icons.png") no-repeat scroll -95px -20px transparent
}
#footer div div div#titles {
clear: both;
color: #400000;
font-size: 18px;
font-weight: bold;
text-align: center;
}
div.default,div.post {
font-family: Georgia,serif;
font-size: 16px;
line-height: 25px;
margin: 0 auto;
min-height: 700px;
width: 655px;
margin-bottom:50px;
}
div.default p,div.post p {
text-shadow: rgba(255, 255, 255, .8) 0 1px 0;
line-height: 30px;
color: #444;
margin:0 0 20px;
font-size: 1.2em;
line-height: 1.9em;
}
div.post li {
font-size: 1.2em;
}
blockquote {
border-left: 5px solid #E0E0E0;
padding-left: 20px;
font-style: italic;
}
blockquote p,div.post blockquote p {
color: #777;
}
div.post ol,div.post ul, div.post li {
text-shadow: rgba(255, 255, 255, .8) 0 1px 0;
line-height: 30px;
color: #444;
}
div.default h1.title,div.post h1.title {
font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif;
font-size: 2.5em;
display: block;
text-align:center;
margin:10px auto 20px auto; 
line-height: 1em;
}
div.post img {
display: block;
margin: 35px auto;
-moz-box-shadow: 0px 2px 6px #ddd;
-webkit-box-shadow: 0px 2px 6px #ddd;
box-shadow: 0px 2px 6px #ddd;
}
div.post h2 {
font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif;
font-weight: bold;
font-size: 25px;
margin-bottom: 20px;
}
div.post h3 {
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 20px;
margin-bottom: 15px;
}
div.post b, div.post a {
font-family:  'Helvetica Neue',Helvetica,Arial,sans-serif;
text-decoration: none;
font-weight: bold;
}
div.post a:hover {
text-decoration:underline;
}
div.crest a {
width:100%;
height:100%;
display:block;
}
body.archive #footer,
body.post #footer {
height: 120px;
}
body.post h1.branding {
font-size: 90px;
width:655px;
margin: 32px auto 56px;
}
body.post .summary {
font-family: Georgia, serif;
font-size: 17px;
font-style: italic;
margin: 35px auto;
color: rgb(109, 109, 109);
width: 655px;
line-height: 28px;
}
h1.branding {
text-shadow:0 1px 0 #CCC,
0 2px 0 #C9C9C9, 
0 3px 0 #BBB, 
0 4px 0 #B9B9B9, 
0 5px 0 #AAA, 
0 6px 1px rgba(0, 0, 0, .1), 
0 0 5px rgba(0, 0, 0, .1), 
0 1px 3px rgba(0, 0, 0, .3), 
0 3px 5px rgba(0, 0, 0, .2), 
0 5px 10px rgba(0, 0, 0, .25), 
0 10px 10px rgba(0, 0, 0, .2), 
0 20px 20px rgba(0, 0, 0, .15);
}
header .navigation span { padding: 0.2em 0.5em; font-size: 9px; display: inline-block; }
div.previous {
float: left; 
padding: 16px 20px 14px; 
height: 20px;
}
div.next {
float: right;
padding: 16px 20px 14px;
height: 20px;
}
div.previous a,
div.next a {
color: #777;
text-decoration: none; 
font-family: Helvetica, sans-serif; 
font-size: 13px;
font-style: normal;
font-weight: bold;
}
div.previous a:hover,
div.next a:hover {
color:#fff;
}
div.post img.alpha, img.alpha {
border: none;
box-shadow: none;
}
ol, ul {
margin-bottom:2em;
}
.post .gist {
font-size: 0.7em;
}
.post .gist .gist-file {
border: 0;
font-size: 13px;
}
.post .gist .gist-file .gist-data {
background-color: transparent;
border-bottom: 0;
}
.post .gist .gist-file .gist-meta {
display: none;
}
/*
 * Media queries for responsive design
 * These follow after primary styles so they will successfully override. 
 */

@media all and (orientation:portrait) {
  /* Style adjustments for portrait mode goes here */
  
}

@media all and (orientation:landscape) {
  /* Style adjustments for landscape mode goes here */
  
}

/* Grade-A Mobile Browsers (Opera Mobile, iPhone Safari, Android Chrome)  
   Consider this: www.cloudfour.com/css-media-query-for-mobile-is-fools-gold/ */
@media only screen and (max-width: 768px), only screen and (max-width: 480px) {
  div#footer div div { width: 95%; }
  div#content { width: 95%; }
  li span.title  { float: none; width: 100%;}
  li span.summary  { float: none; width: 100%; padding: 0; margin-bottom: 10px;}
  .date { width: 14%; float: left; }
  div.default, div.post { width: 97%; }
  body.post .summary, body.post h1.branding { width: 97%; }
  div.post img { width: 97%; }
  div.post img.alpha { width: initial; }
}

@media only screen and (max-width: 768px) {
  h1.branding { font-size: 120px; }
  body.post h1.branding { font-size: 80px; }
}

@media only screen and (max-width: 510px) {
  div#content ol li { min-height: 110px; }
}

@media only screen and (max-width: 480px) {
  header .date {
      margin: 120px auto 0;
  }
  h1.branding { font-size: 50px; }
  body.post h1.branding { font-size: 50px; }
  .date em {
    float: left;
    font-size: 23px;
    padding-right: 5px;
    width: 23px;
  }
  .date { width: 25%; }
  div#content ol li { min-height: 130px; }
  li span.summary  { width: 100%;}
  li span.title a {
    -moz-hyphens:auto;
    -ms-hyphens:auto;
    -webkit-hyphens:auto;
    hyphens:auto;
    word-wrap:break-word;
    font-size: 22px; }


  div#footer-main { height: auto; }
}
/* 
 * print styles
 * inlined to avoid required HTTP connection www.phpied.com/delay-loading-your-print-css/ 
 */
@media print {
  * { background: transparent !important; color: black !important; text-shadow: none !important; } /* Black prints faster: sanbeiji.com/archives/953 */
  a, a:visited { color: #444 !important; text-decoration: underline; }
  a[href]:after { content: " (" attr(href) ")"; }
  abbr[title]:after { content: " (" attr(title) ")"; }
  .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; }  /* Don't show links for images, or javascript/internal links */
  pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
  thead { display: table-header-group; } /* css-discuss.incutio.com/wiki/Printing_Tables */ 
  tr, img { page-break-inside: avoid; }
  @page { margin: 0.5cm; }
  p, h2, h3 { orphans: 3; widows: 3; }
  h2, h3 { page-break-after: avoid; }
}