/*
Theme Name: Sawdust & Glitter
Theme URI: http://sawdustandglitter.com/
Description: The WordPress theme for Sawdust & Glitter.
Version: 1.0
Author: Pak-Kei Mak
Author URI: http://pakkeimak.com/
Tags: 
*/

@font-face {
  font-family: Univers;
  src: url('/common/UniversLTStd-Light.otf') format("opentype");
}

@font-face {
  font-family: Univers Bold;
  src: url('/common/UniversLTStd-Bold.otf') format("opentype");
}

body, .text p {font: 11px Lucida Grande, Arial, Helvetica, sans-serif; color: #333333; line-height: 150%;}
.tagbox {font: 9px Arial, Helvetica, sans-serif; text-transform: uppercase; text-align: right;}
h1 {font: bold 20px Arial, Helvetica, sans-serif; letter-spacing: -1px; line-height: 28px;}
h1 small {font-size: 14px; text-transform: uppercase;}
h2 {font: 34px Univers, Arial, Helvetica, sans-serif; letter-spacing: -2px; line-height: 34px;}
h4 {font: bold 16px Arial, Helvetica, sans-serif; line-height: 16px; padding: 10px 0 10px 0;}
.title, #announce {font: 25px Univers Bold, Arial, Helvetica, sans-serif; letter-spacing: -1px; line-height: 25px;}
.title.medium {font-size: 20px; line-height: 20px;}
.title.long {font-size: 16px; line-height: 16px; letter-spacing: 0;}
.title small, h2 small {font-size: 50%; letter-spacing: 0;}
.perma, .perma .text p {font-size: 13px;}
.perma .title, .perma h2 {font-size: 40px; line-height: 40px; letter-spacing: -2px;}
.perma .title.medium {font-size: 34px; line-height: 34px; letter-spacing: -2px;}
.perma .title.long {font-size: 28px; line-height: 28px; letter-spacing: -1px;}
/*#nav {color: #FFF;}*/
#pagination, #search-text {font: bold 16px Arial, Helvetica, sans-serif; line-height: 16px; letter-spacing: -1px;}
.timebox {font: bold 9px Arial, Helvetica, sans-serif; text-align: right; text-transform: uppercase; color: white;}
strong {font-weight: bold;}
em {font-style: italic;}


body {background-color: #f4f3f2; background: url('/common/background.png') repeat-x; min-width: 1250px;}
a img { border-width: 0; }
*:active, *:focus { outline: 0; }
a {color: #BF6000; text-decoration: none;}
a:hover { color: #BF6000; }
p + p {margin: 0; padding: 10px 0 0 0;}
.tumblr .caption img {width: 250px; margin-left: -20px; height: auto;}
.perma .caption img {width: auto;}
blockquote {padding-left: 15px; margin-top: 10px; margin-bottom: 10px; border-left: 5px solid #FAFAFA;}
#pagination a, .timebox a {color: #FFF;}
h2 {margin-bottom: 20px;}
li {margin-left: 20px;}
li + li, p + ul, ul + p {padding: 10px 0 0 0;}


#background {position: fixed; left: 0; width: 100%; height: 100%; background: url('/common/background.png') repeat-x; background-color: white;}

#nav {position: fixed; width: 300px; height: 100%; z-index: 1;}
#nav .back {position: absolute; width: 100%; height: 100%;}
/* #nav .back .layer1 {position: absolute; width: 100%; height: 100%; background: url('/common/nav-1.png') repeat-x; background-color: #1a1918;}
#nav .back .layer2 {position: absolute; right: 0; width: 57px; height: 100%; background: url('/common/nav-2.png') repeat-y;}
 #nav #logo {position: absolute; top: 50px; left: 50px; width: 101px; height: 587px; background: url('/common/logo2.png') no-repeat;} */
#nav #logo {position: absolute; top: 0; left: 50px; width: 250px; height: 250px; background: url('/common/logo2.png') no-repeat;}
#nav #logo a {position: absolute; top: 0; left: 0; width: 245px; height: 250px;}
#nav #credits {position: absolute; bottom: 0; left: 50px; width: 250px;}
#nav #credits .caption {padding: 20px; text-align: right;}
#nav #search {position: absolute; bottom: 170px; left: 50px; width: 250px; height: 30px; background: url('/common/search.png') no-repeat;}
#nav #search-text {position: absolute; top: 4px; left: 28px; width: 220px; height: 24px; background: none; border: none;}
#nav #search-button {display: none;}
#nav #links {position: absolute; top: 300px; left: 50px; width: 250px; height: 200px;}
/*#nav #links div {position: relative; left: -5px;}*/
#nav #links .select {background: url('/common/nav-select.png') no-repeat;} /* repeat-x; background-color: #660000; left: 0; margin-right: -5px; border-right: 5px solid #400A00;}*/

#content {position: absolute; left: 325px; width: 600px; padding: 25px 0 25px 0; z-index: 2;}
#content .box {position: relative; width: 550px; margin: 25px; float: left; }
#content .wordpress.perma {width: 850px;}

#sidebar {position: absolute; margin-left: 925px; padding: 25px 0 25px 0;}
#sidebar .box {position: relative; width: 250px; margin: 25px; float: left;}

#pagination .front {background-color: #BF6000;}
#pagination p {padding: 10px 20px 10px 20px; text-align: center;}


.box .caption {padding: 20px;}
.box .text {padding: 20px;}

.back .mm {position: absolute; top: -1px; bottom: -1px; left: -1px; right: -1px; background: url('/common/box-mm.png');}
.back .bl {position: absolute; bottom: 0; left: 0; width: 25px; height: 6px; margin-bottom: -6px; background: url('/common/box-bl.png');}
.back .bm {position: absolute; bottom: 0; left: 25px; right: 25px; height: 6px; margin-bottom: -6px; background: url('/common/box-bm.png');}
.back .br {position: absolute; bottom: 0; right: 0; width: 25px; height: 6px; margin-bottom: -6px; background: url('/common/box-br.png');}
.front {position: relative; top: 0; left: 0; width: 100%; background-color: white;}

.box .titlebox {position: relative; padding: 20px; background-color: #F2F2F2;}
.widget .titlebox {top: -20px; left: -20px; width: 210px;}
.box .imagebox {position: relative; padding-bottom: 1px; background-color: #F2F2F2; line-height: 0;}
.wordpress .imagebox {position: relative; top: -20px; left: -20px; width: 550px;}
.wordpress.perma .imagebox {width: 850px;}
.tagbox {position: relative; padding: 5px 20px 5px 20px; background-color: #FAFAFA;}
.wordpress .timebox {position: relative; height: 0;}
.wordpress .timebox div {position: absolute; margin-left: -46px; width: 20px; padding: 3px; z-index: 3; background: url('/common/date.png'); background-color: #C00000; border-right: 5px solid #801500;}


.commentlist li {padding-bottom: 20px; border-bottom: 1px solid #F2F2F2;}




.tumblr.chat {padding: 20px;}
.tumblr.chat .name {font-weight: bold;}
.tumblr.chat .name.line1 {color: #444400;}
.tumblr.audio {width: 250px; text-align: center; background-color: #e4e4e4;}
.tumblr .audio_player {padding-left: 22px; width: 207px;}
.tumblr .quote-open {position: relative; margin-top: -20px;}
.tumblr .quote-close {position: relative; margin-bottom: -22px;}

.tumblr .caption p:first-child img:first-child {margin-top: -20px;}
.tumblr .caption img + br + img {margin-top: 1px;}