/* BASIC */
body {background:#F3F3F3 url('../images/other/bg.png') repeat; color:#555753; font:12px "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Tahoma, sans-serif; line-height:1.7em}
h2 {border-bottom:1px solid #333; font-size:100px; height:75px; letter-spacing:-12px; overflow:hidden}
h2 a {border:0; color:#333; display:block; margin-top:40px; position:relative; width:655px}
h1, #comments_container h3 {font-size:35px; font-variant:small-caps; letter-spacing:-2px; line-height:100%; text-shadow:0px 1px 0px #FFF}
h1 a {border:0; color:#555753}
a {border-bottom:1px solid #CCC; color:#888A85; text-decoration:none}
a:hover {border-color:#333; color:#333}
em {font-style:italic}
:focus {outline:0}
::selection {background:#555753; color:#FFF}

/* UTILS */
.left {float:left; display:inline; margin-right:10px}
.right {float:right; display:inline; margin-left:10px}
.top {margin-bottom:10px}
.bottom {margin-top:10px}
.center {display:block; margin:0 auto; text-align:center}
.hidden {display:none}
.clear {clear:both}
.adsense {display:inline; float:right; overflow:hidden}

/* FORMS */
textarea, input {border:1px solid #CCC; color:#CCC; font:italic 13px "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Tahoma, sans-serif; overflow:auto; padding:5px}
textarea:focus, input:focus {border-color:#888A85; color:#888A85; font-style:normal}
.text_input {width:180px; height:16px}

/* HEADER */
#header {background:url('../images/other/top_shadow.png') repeat-x top}
#header .center_box {height:120px}
#rss {border-bottom:1px solid #333; overflow:hidden; position:absolute; right:0; width:230px}
#rss a {background-color:#333; border:0; color:#FFF; font-size:8px; letter-spacing:2px; text-transform:uppercase}
#rss .logo {background:url('../images/icons/rss.png') no-repeat right bottom; float:right; position:relative; text-indent:-9999px; width:65px; height:75px}
#rss .choose {position:absolute; top:5px; right:63px; text-align:right; z-index:1}
body.js #rss .choose {opacity:0; filter:alpha(opacity=0); padding-right:20px}
#rss .choose a {background:#333 url('../images/icons/tip.gif') no-repeat 6px 7px; clear:right; float:right; margin-top:10px; padding:0 3px 0 18px}
#rss .choose a:hover {background-position:7px 7px}
#rss .choose a:last-child {margin-right:10px}

/* NAVIGATION */
#navigation {position:absolute; left:0; bottom:0}
#navigation li {float:left; font-size:15px; letter-spacing:2px; margin-right:20px; position:relative; text-transform:uppercase}
#navigation a {border:0; float:left}
#navigation a:active {position:relative; top:1px}
body.js #navigation a {background:url('../images/icons/nav.png') no-repeat -9999px -9999px}
body.js #navigation .lifestream a:hover {background-position:left 2px}
body.js #navigation .blog a:hover {background-position:left -48px}
body.js #navigation .portfolio a:hover {background-position:left -98px}
body.js #navigation .labs a:hover {background-position:left -148px}
body.js #navigation .contact a:hover {background-position:left -197px}
#navigation .current a {color:#333}

/* SEARCH */
#search {float:right}
#search fieldset {position:absolute; right:0; bottom:0}
#search #search_field {background:#FFF url('../images/icons/search.png') no-repeat 5px 5px; background-color:rgba(255,255,255,0.7); padding-left:26px}
#search #search_field:focus {background-position:5px -45px}

/* SIDEBAR */
#sidebar {clear:both; margin-top:15px; overflow:hidden}
#sidebar h3 {border-bottom:1px solid #CCC; text-transform:uppercase}
#about {background:url('../images/photos/me_sidebar.png') no-repeat right top; color:#888A85; font-size:15px; margin-bottom:5px; padding:10px 0}
#about strong {color:#555753; font-weight:bold}
#about p {margin-right:35px}
#blogposts {margin-bottom:15px}
#blogposts li {border-bottom:1px solid #CCC; height:30px; line-height:30px; overflow:hidden; position:relative}
#blogposts li.hover {background:rgba(255,255,255,0.7); cursor:pointer}
#blogposts li.hover a {color:#333}
#blogposts li.hover span {color:#888A85}
#blogposts a {font-variant:small-caps; letter-spacing:2px}
#blogposts span {background:url('../images/other/item_fade.png') repeat-y left top; color:#CCC; padding-left:30px; position:absolute; right:0; top:0}
#sidebar .adsense {background-color:#F3F3F3; border:1px solid #CCC; margin-left:10px; width:125px; height:125px}
.tag_list li {display:inline; text-transform:lowercase; margin-right:10px}

/* CONTENT */
.center_box {width:900px; position:relative; margin:0 auto}
#main_container {margin:15px 0 0 0}
#activity_list {float:left}
#activity_list .item {width:211px; margin:0 15px 15px 0; float:left; overflow:hidden}
#activity_list .item.last {margin-right:0}
#activity_list .item img {display:block}
.activity_list_inner img {float:left; margin-right:10px}
.activity_item {clear:both}

/* BOX */
.item_inner {border:1px solid #CCC; height:250px; overflow:hidden; position:relative}
.inner_container {overflow:hidden; padding:8px 10px}
.instructions strong {font-weight:bold}
.instructions code {background-color:#EEEEEC}
.links {color:#888A85; font-size:9px}
.links img {float:left; margin:2px 3px 0 0}
.links a {border:0}
.links .comments {float:right; background:url('../images/icons/comments.png') no-repeat right 5px; padding-right:12px}
.links .comments:hover {background-position:right -25px}

/* SINGLE */
#single_container {font-size:13px}
#single_container h3 {font-size:20px; margin-bottom:10px}
#single_container img {background:rgba(255,255,255,0.7); border:1px solid #CCC; display:block; padding:5px}
#single_container a:hover img {border-color:#888A85}
#single_container strong {font-weight:bold}
#single_header {margin-bottom:15px}
#single_header p {color:#888A85; font-size:15px}
#single_content {overflow:hidden}
#single_content .adsense {margin:0 0 15px 15px; width:200px; height:200px}
#single_content .caption {background:rgba(255,255,255,0.7); border:1px solid #CCC; color:#888A85; font-size:10px; padding:5px; text-align:center}
#single_content .caption img {border:0; margin-bottom:5px; padding:0}
.item_tag_list li {display:inline; font-size:10px; text-transform:lowercase}
.item_tag_list a {border:0; color:#FFF; background:url('../images/other/tag_list.png') no-repeat left center; padding:2px 4px 2px 14px; white-space:nowrap}
.item_tag_list a:hover {background-position:-250px center}
#breadcrumb, #single_content p, #single_container img, .caption, #single_container ul, #single_container ol, #single_container object {margin-bottom:15px}

/* SHARE */
#share p {float:left; margin-right:10px}
#share ul {padding:3px}
#share li {float:left; margin-right:10px}
#share a {background:url('../images/icons/share.png') no-repeat; display:block; overflow:hidden; text-indent:-9999px; width:16px; height:16px}
#share .delicious a {background-position:0 0}
#share .delicious a:hover {background-position:0 -16px}
#share .digg a {background-position:-16px 0}
#share .digg a:hover {background-position:-16px -16px}
#share .reddit a {background-position:-32px 0}
#share .reddit a:hover {background-position:-32px -16px}
#share .stumbleupon a {background-position:-48px 0}
#share .stumbleupon a:hover {background-position:-48px -16px}
#share .facebook a {background-position:-64px 0}
#share .facebook a:hover {background-position:-64px -16px}
#share .twitter a {background-position:-80px 0}
#share .twitter a:hover {background-position:-80px -16px}
#share .technorati a {background-position:-96px 0}
#share .technorati a:hover {background-position:-96px -16px}
#share .openshare a {background-position:-112px 0}
#share .openshare a:hover {background-position:-112px -16px}

/* COMMENTS */
#comments_container {margin-top:15px}
.jta-tweet-list {margin-top:10px}
.jta-tweet-list-item {background:rgba(0,0,0,0.025); border-bottom:1px solid #CCC; padding:8px}
.jta-tweet-list-item:first-child {border-top:1px solid #CCC}
.jta-tweet-list-item:hover {background:rgba(255,255,255,0.7)}
.jta-tweet-profile-image {display:inline; float:left; width:48px; height:48px}
.jta-tweet-profile-image-link {border:0}
.jta-tweet-body-list-profile-image-present {margin-left:58px}
.jta-tweet-timestamp {color:#999; display:block; font-size:11px; margin-top:3px}
.jta-tweet-box {margin-top:10px}
.jta-clear {clear:both; display:block; overflow:hidden; visibility:hidden; width:0; height:0}

/* PAGE */
#breadcrumb, #pagination, #pages, #problem, .vcard, #social, #share, .adsense {border:1px solid #CCC; border-style:dotted none; font-size:15px; font-variant:small-caps; letter-spacing:2px; padding:3px}
#breadcrumb a, #pagination a, #pages a, #blogposts a, #problem a, .vcard a, #social a, #share a {border:0}

/* BLOG */
#activity_list .blog {font-size:13px; padding:15px 0; border-bottom:1px solid #CCC}
#activity_list .blog:first-child {padding-top:0}
#activity_list .blog:last-child {border-bottom:0; margin-bottom:15px; padding-bottom:0}
#activity_list .blog_header {margin-bottom:5px}
#activity_list .blog_header li {color:#888A85; display:inline; font-size:15px; padding-right:10px}
#pages li {display:inline; padding-right:30px}

/* GALLERY */
#gallery li {background:rgba(255,255,255,0.7); border:1px solid #CCC; float:left; list-style:none; margin:0 15px 15px 0; width:288px}
#gallery li.last {margin-right:0}
#gallery li a {border:0; display:block; font-size:15px; letter-spacing:2px; overflow:hidden; padding:5px 10px; position:relative; text-transform:uppercase; width:263px; height:190px}
#gallery li img {background:transparent; border:0; position:absolute; top:0; left:0; width:278px; height:190px}

/* CONTACT */
.vcard {float:right; font-size:15px; padding-right:34px; text-align:right; white-space:nowrap}
.vcard .download {margin-top:3px; position:absolute; right:0}
.vcard .download a {background:url('../images/icons/hcard.png') no-repeat center top; display:block; width:29px; height:18px; overflow:hidden}
.vcard .download a:hover {background-position:center bottom}
.vcard .geo, #single_container .photo {display:none}
#social p {float:left; margin-right:10px}
#social ul {padding:3px}
#social li {float:left; margin-right:10px}
#social li a {background:url('../images/icons/social.png') no-repeat; display:block; overflow:hidden; text-indent:-9999px; width:16px; height:16px}
#social .facebook a {background-position:0 0}
#social .facebook a:hover {background-position:0 -16px}
#social .orkut a {background-position:-16px 0}
#social .orkut a:hover {background-position:-16px -16px}
#social .live a {background-position:-32px 0}
#social .live a:hover {background-position:-32px -16px}
#social .linkedin a {background-position:-48px 0}
#social .linkedin a:hover {background-position:-48px -16px}
#social .twitter a {background-position:-64px 0}
#social .twitter a:hover {background-position:-64px -16px}
#social .gmail a {background-position:-80px 0}
#social .gmail a:hover {background-position:-80px -16px}

/* 404 */
#error404 {text-align:center}
#error404 img {background:rgba(255,255,255,0.7); margin:0 auto}
#error404 p {margin-bottom:15px}
#error404 em {display:block; margin-bottom:15px}
#error404 label {color:#888A85; cursor:pointer; border-bottom:1px solid #CCC}
#error404 label:hover {color:#333; border-color:#333}

/* FOOTER */
#footer {clear:both; font-size:10px; margin-top:25px; padding:8px; position:relative; text-align:center}
#footer li {border-left:1px solid; display:inline; padding:0 5px 0 8px}
#footer li:first-child {border:0}
#footer a {border:0; color:#555753}
#footer a:hover {color:#333}
#footer a.mobile {background:url('../images/icons/mobile.png') no-repeat left 1px; padding-left:14px}
#footer a.mobile:hover {background-position:left -41px}