body{position:absolute;top:0;bottom:0;left:0;right:0;margin:0;padding:0;background:#f9f9f9;overflow:hidden;box-shadow:inset 0 -10px 100px rgba(0,0,0,0.4);font-family:'Helvetica Neue',Helvetica,sans-serif}
::selection{background:#ffb7b7;}
::-moz-selection{background:#ffb7b7;}
body *{-webkit-overflow-scrolling:touch}
@-webkit-keyframes shake{0%{-webkit-transform:scale(1.03) rotate(0)}
25%{-webkit-transform:scale(1.03) rotate(-5deg)}
75%{-webkit-transform:scale(1.03) rotate(5deg)}
100%{-webkit-transform:scale(1.03) rotate(0)}
}@-moz-keyframes shake{0%{-moz-transform:scale(1.03) rotate(0)}
25%{-moz-transform:scale(1.03) rotate(-5deg)}
75%{-moz-transform:scale(1.03) rotate(5deg)}
100%{-moz-transform:scale(1.03) rotate(0)}
}@-webkit-keyframes fadeShake{0%{-webkit-transform:scale(1.03) rotate(0);opacity:1}
25%{-webkit-transform:scale(1.03) rotate(-5deg);opacity:.5}
75%{-webkit-transform:scale(1.03) rotate(5deg);opacity:.5}
100%{-webkit-transform:scale(1.03) rotate(0);opacity:1}
}@-moz-keyframes fadeShake{0%{-moz-transform:scale(1.03) rotate(0);opacity:1}
25%{-moz-transform:scale(1.03) rotate(-5deg);opacity:.5}
75%{-moz-transform:scale(1.03) rotate(5deg);opacity:.5}
100%{-moz-transform:scale(1.03) rotate(0);opacity:1}
}.fadeShake.animate{-webkit-animation-name:fadeShake;-webkit-animation-duration:.5s;-webkit-animation-iteration-count:infinite;-webkit-animation-timing-function:linear;-moz-animation-name:fadeOutIn;-moz-animation-duration:.5s;-moz-animation-iteration-count:infinite;-moz-animation-timing-function:linear}
.shake.animate,.shake:hover{-webkit-animation-name:shake;-webkit-animation-duration:.5s;-webkit-transform-origin:50% 50%;-webkit-animation-iteration-count:infinite;-webkit-animation-timing-function:linear;-moz-animation-name:shake;-moz-animation-duration:.5s;-moz-transform-origin:50% 50%;-moz-animation-iteration-count:infinite;-moz-animation-timing-function:linear}
#templates{display:none}
i.icon{display:block;height:16px;width:16px;background-image:url("images/icons/spritesheet_16x16.png");background-repeat:no-repeat}
i.icon.delete{background-position:0 0}
i.icon.delete.yellow{background-position:-24px 0}
*:hover > i.icon.delete.default,i.icon.delete.red,i.icon.delete.default:hover{background-position:-48px 0}
i.icon.favorite{background-position:0 -24px}
*:hover > i.icon.favorite.default,.favorited i.icon.favorite,i.icon.favorite.yellow,i.icon.favorite.default:hover{background-position:-24px -24px}
i.icon.favorite.red{background-position:-48px -24px}
i.icon.32x32{height:32px;width:32px;background-image:url("images/icons/spritesheet_32x32.png")}
i.icon.32x32.delete{background-position:0 0}
i.icon.32x32.delete.yellow{background-position:0 -48px}
*:hover > i.icon.32x32.delete.default,i.icon.32x32.delete.red,i.icon.32x32.delete.default:hover{background-position:0 -96px}
i.icon.32x32.favorite{background-position:0 -48px}
*:hover > i.icon.32x32.favorite.default,.favorited i.icon.32x32.favorite,i.icon.32x32.favorite.yellow,i.icon.32x32.favorite.default:hover{background-position:-48px -48px}
i.icon.32x32.favorite.red{background-position:-96px -48px}
i.icon.64x64{height:64px;width:64px;background-image:url("images/icons/spritesheet_64x64.png")}
i.icon.64x64.delete{background-position:0 0}
i.icon.64x64.delete.yellow{background-position:0 -96px}
*:hover > i.icon.64x64.delete.default,i.icon.64x64.delete.red,i.icon.64x64.delete.default:hover{background-position:0 -192px}
i.icon.64x64.favorite{background-position:0 -96px}
*:hover > i.icon.64x64.favorite.default,.favorited i.icon.64x64.favorite,i.icon.64x64.favorite.yellow,i.icon.64x64.favorite.default:hover{background-position:-96px -96px}
i.icon.64x64.favorite.red{background-position:-192px -96px}
#background{position:fixed;top:0;bottom:0;left:0;right:0;min-height:640px;min-width:320px;background-image:url("images/backgrounds/2.jpg");background-position:left center;background-size:cover;z-index:-1;opacity:.8}
#background:before{content:'';position:absolute;top:0;bottom:0;left:0;right:0;background-image:url("images/textures/dots1.gif");opacity:.1}
#panel{position:absolute;top:0;bottom:0;width:0;background:#ddd;overflow:hidden;z-index:1;}
#panel .tag-filter{display:block;position:absolute;width:100%;height:35px;margin:0;padding:0 10px;background:#eee;border:none;border-radius:0;outline:none;color:#000;font-family:'Helvetica Neue';font-size:13px;font-weight:100;letter-spacing:1px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box}
#panel .tag-filter::-webkit-input-placeholder{color:#000}
#panel .tag-filter:-moz-placeholder{color:#000}
#panel .tag-filter::-moz-placeholder{color:#000}
#panel .tag-filter:-ms-input-placeholder{color:#000}
#panel .tag-list{display:block;position:absolute;top:35px;bottom:0;left:0;right:0;margin:0;padding:0;overflow:auto;overflow-x:hidden;font-family:'Helvetica Neue',sans-serif}
#panel .tag-list.no-results{background:url("images/no-results.png") bottom center no-repeat}
#panel .tag-list .tag{position:relative;min-width:180px;border-bottom:1px solid rgba(255,255,255,0.5);transition:background .03s ease-out;-webkit-transition:background .03s ease-out;-moz-transition:background .01s linear}
#panel .tag-list .tag:hover{background:rgba(0,0,0,0.1)}
#panel .tag-list .tag.active .count,#panel .tag-list .tag:hover .count{opacity:1}
#panel .tag-list .tag.active{background:#000}
#panel .tag-list .tag .name{display:block;margin:0;padding:6px 34px 7px 10px;color:#666;overflow:hidden;font-size:18px;font-weight:100;letter-spacing:1px;text-overflow:ellipsis;text-decoration:none;outline:none}
#panel .tag-list .tag .name:focus{background:rgba(0,0,0,0.1)}
#panel .tag-list .tag .name:focus + .count{opacity:1}
#panel .tag-list .tag.active .name{color:#e0dfde;color:#b5b59b}
#panel .tag-list .tag .count{opacity:.5;position:absolute;top:0;bottom:0;right:0;width:30px;padding:2px;background:#999;color:#fff;text-align:center;font-size:10px;font-weight:100;line-height:30px}
#panel .tag-list .tag.active .count{background:#444}
#panel .message{display:none;position:absolute;top:70px;bottom:0;left:0;right:0;width:160px;height:auto;padding:0 20px;color:#666;font-size:18px;font-weight:100;text-align:center;letter-spacing:1px;word-wrap:break-word}
#panel .tag-list.no-results + .message{display:block}
#super-wrapper{position:absolute;left:0;right:0;height:100%;min-width:480px;overflow:hidden;box-shadow:0 0 5px rgba(0,0,0,0.5);z-index:1;}
#view{position:absolute;top:35px;bottom:0;left:0;right:0;margin:0 auto}
#view.full{width:100%}
#banner{position:relative;height:34px;background:rgba(0,0,0,0.8);border-bottom:1px solid #444}
#banner.full{width:100%}
#banner .wrapper{position:relative;width:640px;max-width:100%;height:100%;margin:0 auto}
#banner .logo{display:block;width:30px;height:100%;margin:0 auto;padding:0;color:#fff;font-size:10px;line-height:34px;background:url("images/pencil_logo.png") center no-repeat}
#banner .toggle-panel{display:block;position:absolute;top:0;bottom:0;left:0;width:44px;background:rgba(0,0,0,0.2);border-radius:3px;margin:0;padding:0;border:none;outline:none;opacity:1}
#banner .toggle-panel:hover{cursor:pointer;opacity:.8}
#banner .toggle-panel .icon{display:block;width:20px}
#banner .toggle-search{display:block;float:left;clear:none;width:20px;height:20px;margin-top:-2px;background:url("images/icons/search.png") center no-repeat;border:none;outline:none;opacity:1}
#banner .toggle-search:hover{cursor:text}
#banner #search_open{display:none}
#banner .search-wrapper{position:absolute;top:4px;bottom:4px;right:10px;width:auto;background:rgba(0,0,0,0.2);border-radius:3px;padding:5px;box-shadow:0 0 0 1px rgba(255,255,204,0.3);-webkit-transition:box-shadow .1s linear;-moz-transition:box-shadow .1s linear;transition:box-shadow .1s linear}
#banner .search-wrapper:hover{cursor:text;box-shadow:0 0 0 1px rgba(255,255,204,0.4)}
#banner .search-wrapper.active{box-shadow:0 0 0 1px rgba(255,255,204,0.4)}
#banner .search-wrapper .search{float:left;clear:none;height:16px;padding:0 25px 0 0;margin:0 0 0 5px;border:none;border-radius:0;color:#dddccf;background:none;background-color:transparent;outline:none;font-family:'Helvetica Neue';font-weight:100;letter-spacing:1px}
#banner .search-wrapper .clear-search{display:none;position:absolute;top:2px;right:5px;width:20px;height:20px;padding:0;background:none;border:none;outline:none;color:#b5b59b;font-size:16px;text-align:center;z-index:1}
#banner .search-wrapper .clear-search:hover{cursor:pointer}
#view .thought-input-wrapper{position:relative;max-width:620px;height:70px;margin:0 auto;padding:0 10px}
#view .thought-input-wrapper .thought-input{display:block;position:relative;width:100%;height:46px;margin:10px auto;padding:0;outline:none;border:1px solid #ddd;border-radius:0;font-size:24px;color:#666;text-indent:10px;background:#f3f3f3;box-shadow:0 2px 10px rgba(0,0,0,0.1);z-index:1;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box}
#view .thought-input-wrapper .thought-input:focus{background:#ffc}
#view .stream{position:absolute;top:0;bottom:0;left:0;right:0;padding:0 10px;overflow:auto}
#view .stream .posts{position:absolute;top:0;left:0;right:0;padding:0 10px;clip:rect(60px,auto,auto,auto)}
#view .stream .item{position:relative;max-width:575px;margin:10px auto;padding:10px 30px 10px 10px;font-size:12px;background:#fff;border-bottom:1px solid #eee;border-left:5px solid transparent;box-shadow:0 2px 10px rgba(0,0,0,0.1)}
#view .stream .item:first-child{margin-top:70px}
#view .stream .item:last-child{margin-bottom:10px}
#view .stream .item.favorited{border-left:5px solid #ffd700}
#view .stream .item.favorited .favorite{opacity:1}
#view .stream .item.favorited .favorite:hover{opacity:1}
#view .stream .item header time{font-size:10px;color:#aaa}
#view .stream .item header time a{color:#aaa;text-decoration:none}
#view .stream .item header time a:hover{color:#7b68ee;text-decoration:underline}
#view .stream .item .action{display:none;position:absolute;right:5px;width:20px;height:20px;padding:0;outline:none;border:none;border-radius:0;opacity:.3;background:none;font-family:sans-serif;font-size:24px;text-align:center;line-height:18px}
#view .stream .item:hover .action{display:block}
#view .stream .item .action:hover{cursor:pointer;opacity:1}
#view .stream .item .action.delete{top:5px}
#view .stream .item .action.favorite{top:30px}
#view .stream .item .action .icon{position:absolute;top:0;bottom:0;left:0;right:0;margin:2px}
#view .stream .item .message{font-size:18px;font-weight:100;letter-spacing:1px;line-height:1.5;color:#777;word-wrap:break-word}
#view .stream .item .message .hashtag,#view .stream .item .message .url{color:#777;text-decoration:none}
#view .stream .item .message .hashtag:hover,#view .stream .item .message .url:hover{color:#7b68ee;text-decoration:underline}
.touch #view .stream .item .action{display:block}
@media /* iPhone ----------------------*/ only screen and (min-device-width:320px) and (max-device-width:568px), /* 5 */ only screen and (min-device-width:320px) and (max-device-width:480px){body{position:absolute;left:0;right:0;background:#f9f9f9;max-width:100%;overflow:hidden !important}
#background{top:20px}
#panel{top:20px}
#panel .message{top:90px;bottom:0}
#super-wrapper{top:20px;min-width:0}
#banner{min-width:320px}
#banner .search-wrapper{box-shadow:none}
#banner .search{display:none;width:0;margin:0;padding:0}
#view{min-width:320px}
#view .thought-input{outline:none;-webkit-appearance:none}
#view .stream{position:absolute;top:0;bottom:0;left:0;right:0;padding:0 10px;overflow:auto}
#view .stream{top:60px}
#view .stream .posts{clip:auto !important}
#view .stream .item:first-child{margin:10px auto}
#view .stream .item .action{display:block}
}@-moz-document url-prefix(){#view .stream{overflow-y:auto;overflow-x:hidden}
}