html,body,div,span,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,address,cite,code,del,dfn,hr,img,ins,input,button,kbd,q,samp,
strike,sub,sup,tt,var,dl,dt,dd,ol,ul,menu,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,b,strong,i,em,
section,article,aside,header,body>footer,nav,dialog,figure
{margin : 0;
padding : 0;
border : 0;
outline : 0;
font-weight : inherit;
font-style : inherit;
font-size : 100%;
font-family : inherit;
text-decoration : none;
vertical-align : baseline;}
object,section,article,aside,header,body>footer,nav,dialog,figure,figure>a,figure img,figure legend
{display : block;}
html,body
{background : transparent;}
body
{width : 720px;
margin : 24px auto;}
a:hover
{text-decoration : underline;}
blockquote
{border-left-width : 4px;
border-left-style : solid;}
pre
{border-width : 1px;
border-style : dashed;}
pre code
{white-space : pre;}
abbr
{border-bottom-width : 1px;
border-bottom-style : dashed;
letter-spacing : 0.1em;}
h1 em,h2 em,h3 em,h4 em,h5 em
{font-style : italic;}
p
{margin-bottom : 24px;}
blockquote,q
{quotes : none;}
blockquote::before,blockquote::after,q::before,q::after
{content : "";}
blockquote
{margin : 48px 0 48px 0;
padding : 0 0 0 20px;
border-left : 4px solid #4a545f;}
h2+blockquote,h3+blockquote
{margin-top : 0;}
pre
{margin : 24px 24px 48px 24px;
padding : 23px;
white-space : nowrap;
overflow : auto;
border : 1px dashed #4a545f;}
:focus
{outline : 0;}
ol,ul,menu
{list-style : none;}
dl
{margin-bottom : 24px;}
dt,ins,h5,h6,figure legend
{font-weight : bold;}
dd
{padding : 0 0 0 24px;}
hr
{height : 1px;
margin : 0 144px 23px 144px;}
body>hr
{display : none;}
ins::before
{content : "[";}
ins::after
{content : "]";}
del
{text-decoration : line-through;}
abbr[title]
{cursor : help;}
a abbr[title]
{cursor : pointer;}
figure
{padding : 24px;
margin-bottom : 24px;}
figure legend /* Doesn't work in any browser. */
{text-align : center;}
figure img::after /* Hack is used instead. */
{display : block;
content : attr(title);
text-align : center;
font-weight : bold;}
object,embed
{width : 100%;
height : auto;}
object.r4to3,object.r4to3 embed
{width : 432px;
height : 336px;}
section a[href^="opera:/button"]
{display : inline-block;
padding : 0 8px;
font-weight : normal;}
section a[href^="opera:/button"]:hover
{text-decoration : none;}
/* Typography ------------------------------------------------------------ */
html,section>h5 strong,pre
{font-family : Verdana,"Lucida Grande",sans-serif;}
h1,h2,h3,h4,nav a,nav b,section>h5,section a[href^="opera:/button"],h1 em,h2 em,h3 em,h4 em,h5 em
{font-family : "Delicious","Trebuchet MS",Helvetica,"Liberation Sans",sans-serif;}
code,textarea
{font-family : Consolas,Inconsolata,Menlo,monospace;}
@font-face
{font-family : "Delicious";
/* src : local("Delicious-Italic"),url(../../sys/fonts/delicious-italic.otf); */
src : url(../../sys/fonts/delicious-italic.otf);
font-style : italic;}
@font-face
{font-family : "Delicious";
/* src : local("Delicious-Roman"),url(../../sys/fonts/delicious.otf); */
src : url(../../sys/fonts/delicious.otf);
font-style : normal;}
/* ===================================================================== */
/* = Download this free font at -> http://www.josbuivenga.demon.nl = */
/* ===================================================================== */
article>footer
{font-size : 11px;}
html,body>section>h5 sup,body>section>ol small
{font-size : 12px;}
h6,body>section>h5 strong,section a[href^="opera:/button"]
{font-size : 13px;}
body>section>ol,#whatnot li
{font-size : 15px;}
nav,body>section>h5 strong:only-child
{font-size : 16px;}
h5,article strong
{font-size : 18px;}
h4
{font-size : 22px;}
h3,body>section>h5
{font-size : 24px;}
h2
{font-size : 30px;}
h1
{font-size : 34px;}
code,textarea
{line-height : 0;}
html,h1,h2,h3,h4,h5,h6,body>section>h5 strong,pre code
{line-height : 24px;}
h1,h2,h3,h4,nav,nav menu li,nav a,nav b,body>section>h5,#whatnot li,body>footer
{line-height : 48px;}
body>section>h5 strong:only-child /* To make IE 8 happy. */
{line-height : 48px;}
nav,aside h4
{text-transform : lowercase;}
/* Color ----------------------------------------------------------------- */
section a,body>footer a
{color : #dd8024;}
html,body,h2 a,h3 a,h4 a,h5 a,h6 a,nav a,body>footer nav a,section a[href^="opera:/button"],body>section>ol a,figure a
{color : #fcfcf3;}
/* pre,code,body>section>ol small
{color : #7d838a;} /* #849bb0 */
#flickr h4
{color : #0063dc;}
#flickr h4 span
{color : #ff0084;}
body,nav b
{background-color : #23282e;}
nav a,aside,section a[href^="opera:/button"]:active
{background-color : #2f363d;}
body>header h1,nav a:hover,section>h5 strong,figure,hr,section a[href^="opera:/button"]
{background-color : #464f59;}
body>header nav a
{background-color : rgba(47,54,61,0.9);}
body>header nav a:hover
{background-color : rgba(59,67,75,1);}
body>header h1
{background-color : rgba(47,54,61,0.9);}
blockquote,pre,body>section>ol,abbr
{border-color : #586471;} /* Previously #4a545f */
/* Syntax Highlighting ---------------------------------------------------- */
.keyword,.attribute
{color : #a7bbd0;}
.comment
{color : #4e6375;
font-style : italic;}
.string
{color : #7ea3b5;}
.constant
{color : #aebece;}
.function,.tag
{color : #535e9c;}
.support,.tagname
{color : #a8a9ca;}
.variable,.property
{color : #ba9c7d;
font-weight : bold;}
.operator
{color : #c9d3de;}
.delimiter,.number
{color : #d5dde1;}
.pseudo
{font-style : italic;}
.vendor
{color : #8c7965;}
/* Border Radius --------------------------------------------------------- */
h1,section>h5 strong,aside section li,figure,pre
{border-top-right-radius : 8px;
border-bottom-left-radius : 8px;
-khtml-border-radius-topright : 8px;
-khtml-border-radius-bottomleft : 8px;
-moz-border-radius-topright : 8px;
-moz-border-radius-bottomleft : 8px;
-webkit-border-top-right-radius : 8px;
-webkit-border-bottom-left-radius : 8px;}
aside
{border-top-right-radius : 16px;
border-bottom-left-radius : 16px;
-khtml-border-radius-topright : 16px;
-khtml-border-radius-bottomleft : 16px;
-moz-border-radius-topright : 16px;
-moz-border-radius-bottomleft : 16px;
-webkit-border-top-right-radius : 16px;
-webkit-border-bottom-left-radius : 16px;}
nav menu li.about a,nav menu li.about b
{border-top-right-radius : 8px;
-khtml-border-radius-topright : 8px;
-moz-border-radius-topright : 8px;
-webkit-border-top-right-radius : 8px;}
body>header
{border-top-right-radius : 16px;
-khtml-border-radius-topright : 16px;
-moz-border-radius-topright : 16px;
-webkit-border-top-right-radius : 16px;}
section a[href^="opera:/button"]
{border-top-right-radius : 6px;
border-bottom-left-radius : 6px;
-khtml-border-radius-topright : 6px;
-khtml-border-radius-bottomleft : 6px;
-moz-border-radius-topright : 6px;
-moz-border-radius-bottomleft : 6px;
-webkit-border-top-right-radius : 6px;
-webkit-border-bottom-left-radius : 6px;}
/* ----------------------------------------------------------------------- */
body>header
{background : transparent url(../../img/header.png) top left no-repeat;
height : 168px;
padding : 24px 24px 0 24px;
margin-bottom : 24px;}
body>header h1
{margin-bottom : 24px;
background-image : url(../../img/sprites.png);
background-position : -579px 0px;
background-repeat : no-repeat;
width : 96px;
height : 96px;
text-indent : -999em;}
body>header h1 a
{display : block;
width : 96px;
height : 96px;}
nav,nav menu,nav menu li,nav a,nav b
{height : 48px;}
nav menu li
{float : left;}
nav a,nav b
{display : block;
text-align : center;}
nav a:hover
{text-decoration : none;}
nav menu li
{width : 96px;}
body>section:first-child
{padding : 0 24px;}
body>section
{min-height : 480px;}
body>section>h5,body>section>figure
{font-weight : normal;
float : left;
/* width : 144px; */}
body>section>h5
{min-height : 48px;
/* margin-right : -528px; */
text-align : center;}
body>section>h5>*
{display : block;
float : left;}
body>section>h5 strong
{width : 48px;
height : 48px;
text-transform : uppercase;
word-spacing : 1em;
font-weight : normal;}
body>section>h5 sup
{text-transform : lowercase;}
body>section>h5 em
{width : 72px;
font-style : normal;}
body>section>ol
{border-left-width : 4px;
border-left-style : solid;
margin : 0 0 72px 120px;}
body>section>ol li
{background : transparent url(../../img/sprites.png) -676px -51px no-repeat;
padding-left : 20px;
height : 24px;
position : relative;}
body>section>ol li small
{position : absolute;}
body>section>ol li a
{margin-left : 96px;}
body>section>ol li.dist1
{margin-top : 24px;}
body>section>ol li.dist2
{margin-top : 48px;}
body>section>ol li.dist3
{margin-top : 72px;}
body>section>ol li.dist4
{margin-top : 96px;}
body>section>ol li.dist5
{margin-top : 120px;}
body>section>ol li.dist6
{margin-top : 144px;}
body>section>ol li.dist7
{margin-top : 168px;}
body>section>ol li.dist8
{margin-top : 192px;}
body>section>ol li.dist9
{margin-top : 216px;}
body>section>ol li.dist10
{margin-top : 240px;}
body>section>ol li.dist11
{margin-top : 264px;}
body>section>ol li.dist12
{margin-top : 288px;}
body>section>ol li.dist13
{margin-top : 312px;}
body>section>ol li.dist14
{margin-top : 336px;}
body>section>ol li.dist15
{margin-top : 360px;}
body>section>ol li.dist16
{margin-top : 384px;}
body>section>ol li.dist17
{margin-top : 408px;}
body>section>ol li.dist18
{margin-top : 432px;}
body>section>ol li.dist19
{margin-top : 456px;}
body>section>ol li.dist20
{margin-top : 480px;}
body>section>ol li.dist21
{margin-top : 504px;}
body>section>ol li.dist22
{margin-top : 528px;}
article,section>header
{margin-left : 240px;
width : 480px;}
body>section>ul
{padding-bottom : 72px !important;}
article
{min-height : 72px;
padding-bottom : 48px;}
article a,article b,body>section:first-child a
{font-weight : bold;}
article h2 a,article h3 a,article h4 a
{font-weight : normal;}
article i
{font-style : italic;}
article sup,article sub
{position : relative;
top : -5px;
font-size : smaller;}
article sub
{top : 5px;}
article a[rel="footnote"],article a[rev="footnote"]
{padding : 0 5px;}
article ul
{list-style-type : square;}
article ol
{list-style-type : decimal;}
article ul,article ol
{padding-left : 24px;
margin : 0 0 24px 24px;}
article h2+dl
{margin-top : 24px;}
aside
{clear : both;
height : 240px;
margin-bottom : 24px;
overflow : hidden;
padding : 24px;}
aside>section
{float : left;
width : 192px;}
#playlist ul
{height : 144px;}
#playlist ul li,#playlist ul li a,#flickr ul li,#flickr ul li a
{width : 48px;
height : 48px;}
#playlist ul li,#flickr ul li
{display : block;
float : left;
margin-bottom : 24px;
background-color : #fcfcf3;}
#playlist ul li a,#flickr ul li a,#playlist p a,#whatnot p a
{display : block;
text-indent : -9999px;
height : 48px;}
#playlist ul li img,#flickr ul li img
{display : block;
width : 48px;
height : 48px;}
#playlist ul li:first-child+li,#playlist ul li:first-child+li+li+li+li,
#flickr ul li:first-child+li,#flickr ul li:first-child+li+li+li+li,#flickr ul li:first-child+li+li+li+li+li+li+li
{margin : 0 24px 24px 24px;}
#playlist p a
{background : transparent url(../../img/sprites.png) top left no-repeat;}
#whatnot p a
{background : transparent url(../../img/sprites.png) -193px 0 no-repeat;}
#whatnot p+p a
{background : transparent url(../../img/sprites.png) -386px 0 no-repeat;}
#flickr
{margin : 0 48px;}
#whatnot ul
{margin-bottom : 24px;}
#whatnot li
{background : transparent url(../../img/sprites.png) -676px 0 no-repeat;
padding-left : 24px;
height : 48px;}
#playlist ul li
{background : #fff url(../../img/playlist.jpg) top left no-repeat;}
#playlist ul li:first-child+li
{background-position : -48px 0;}
#playlist ul li:first-child+li+li
{background-position : -96px 0;}
#playlist ul li:first-child+li+li+li
{background-position : 0 -48px;}
#playlist ul li:first-child+li+li+li+li
{background-position : -48px -48px;}
#playlist ul li:first-child+li+li+li+li+li
{background-position : -96px -48px;}
body>footer
{height : 48px;
margin-bottom : 24px;}
body>footer p
{float : left;}
body>footer nav
{float : right;}