html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; outline: 0; font-weight: inherit; font-style: inherit; font-size: 100%; font-family: inherit; vertical-align: baseline; }

*:focus { outline: 0; }

body { line-height: 1em; color: black; background: #fff; }

ol, ul { list-style: none; }

/* tables still need 'cellspacing="0"' in the markup */
table { border-collapse: separate; border-spacing: 0; vertical-align: middle; }

caption, th, td { text-align: left; font-weight: normal; vertical-align: middle; }

q, blockquote { quotes: "" ""; }
q:before, q:after, blockquote:before, blockquote:after { content: ""; }

img a { border: none; }

/* http://gist.github.com/69502 */


.showgrid { background: url('/images/grid.png?1275270648'); }

body { line-height: 1.5; font-family: Georgia,Palatino,'Book Antiqua',serif; color: #333333; font-size: 75%; }

h1 { font-weight: normal; color: #222222; font-size: 3em; line-height: 1; margin-bottom: 0.5em; }
h1 img { margin: 0; }

h2 { font-weight: normal; color: #222222; font-size: 2em; margin-bottom: 0.75em; }

h3 { font-weight: normal; color: #222222; font-size: 1.5em; line-height: 1; margin-bottom: 1em; }

h4 { font-weight: normal; color: #222222; font-size: 1.2em; line-height: 1.25; margin-bottom: 1.25em; }

h5 { font-weight: normal; color: #222222; font-size: 1em; font-weight: bold; margin-bottom: 1.5em; }

h6 { font-weight: normal; color: #222222; font-size: 1em; font-weight: bold; }

h2 img, h3 img, h4 img, h5 img, h6 img { margin: 0; }

p { margin: 0 0 1.5em; }
p img.left { display: inline; float: left; margin: 1.5em 1.5em 1.5em 0; padding: 0; }
p img.right { display: inline; float: right; margin: 1.5em 0 1.5em 1.5em; padding: 0; }

a { text-decoration: underline; color: #00b1d4; }
a:visited { color: #00b1d4; }
a:focus { color: black; }
a:hover { color: white; }
a:active { color: #cc0099; }

blockquote { margin: 1.5em; color: #666; font-style: italic; }

strong { font-weight: bold; }

em { font-style: italic; }

dfn { font-style: italic; font-weight: bold; }

sup, sub { line-height: 0; }

abbr, acronym { border-bottom: 1px dotted #666; }

address { margin: 0 0 1.5em; font-style: italic; }

del { color: #666; }

pre { margin: 1.5em 0; white-space: pre; }

pre, code, tt { font: 1em 'andale mono', 'lucida console', monospace; line-height: 1.5; }

li ul, li ol { margin: 0 1.5em; }

ul { margin: 0 1.5em 1.5em 1.5em; list-style-type: disc; }

ol { margin: 0 1.5em 1.5em 1.5em; list-style-type: decimal; }

dl { margin: 0 0 1.5em 0; }
dl dt { font-weight: bold; }

dd { margin-left: 1.5em; }

table { margin-bottom: 1.4em; width: 100%; }

th { font-weight: bold; }

thead th { background: #c3d9ff; }

th, td, caption { padding: 4px 10px 4px 5px; }

tr.even td { background: #e5ecf9; }

tfoot { font-style: italic; }

caption { background: #eee; }

.quiet { color: #666666; }

.loud { color: #111111; }

body { background: #efefef; cursor: default; }

#root { width: 950px; margin: 0 auto; overflow: hidden; display: inline-block; }
#root { display: block; }

a { text-decoration: none; cursor: pointer; }
a:hover { background: #00b1d4; }
a.help { background: #f3b3d1; color: white; padding: 0 1px; }
a.help:hover { background: transparent; color: #ff0077; }

h2 { color: #333333; }

#header { position: relative; padding-top: 18px; z-index: 10; width: 230px; }
#header h1 span, #header h1 small { display: none; }
#header h1 a { display: block; background: url('/images/h1.png') no-repeat; height: 86px; }

#flashes { position: absolute; top: 0; left: 0; width: 100%; z-index: 1000; text-align: center; }
#flashes .message { font-size: 1.5em; font-weight: bold; cursor: pointer; }
#flashes .message p { border: 1px solid #ccc; display: inline; padding: 10px 25px; -moz-border-radius-bottomleft: 5px; -webkit-border-bottom-left-radius: 5px; border-bottom-left-radius: 5px; -moz-border-radius-bottomright: 5px; -webkit-border-bottom-right-radius: 5px; border-bottom-right-radius: 5px; margin: 0; line-height: 2em; }
#flashes .notice p { background-color: #e6efc2; border-color: #cc9; }
#flashes .error p { background-color: #fbe3e4; border-color: #900; }
#flashes .warning p { background-color: #fff6bf; border-color: #fc0; }

#twitter_signin { width: 950px; position: absolute; top: 18px; z-index: 5; }
#twitter_signin .content { float: right; line-height: 1.4em; font-style: italic; }
#twitter_signin .content .twitter_name { display: block; font-size: 1.2em; font-style: normal; color: #ff0077; }
#twitter_signin .content .twitter_name:hover { color: white; background: #ff0077; }
#twitter_signin .content .profile_image { float: left; }
#twitter_signin .content .details { display: block; margin-left: 55px; }
#twitter_signin.logged_out .content { text-align: right; width: 151px; }
#twitter_signin.logged_in .content { white-space: nowrap; }

#content { position: relative; }
#content h1 { font-size: 1.5em; font-weight: bold; position: absolute; top: -35px; left: 280px; }
#content h2 { font-size: 1.5em; font-style: italic; text-transform: lowercase; }
#content #one { display: inline; float: left; margin-right: 10px; width: 190px; padding-left: 40px; background: url('/images/side_bird.png') no-repeat 22px 0; padding-top: 207px; margin-top: 25px; }
* html #content #one { overflow-x: hidden; }
#content #one h2:first-child { background-color: white; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; margin: 0 25px 0 -25px; text-align: center; }
#content #two { position: relative; display: inline; float: left; margin-right: 10px; width: 470px; padding-left: 40px; padding-top: 10px; }
* html #content #two { overflow-x: hidden; }
#content #two .block { margin-bottom: 25px; }
#content .no_results { font-size: 1.1666em; }
#content #three { position: relative; display: inline; float: left; margin-right: 10px; width: 150px; padding-left: 40px; margin-right: 0; padding-top: 60px; }
* html #content #three { overflow-x: hidden; }
#content #three .stats { font-style: italic; margin: 0; }
#content #three .stats .value { display: block; font-size: 4em; line-height: 1em; margin-bottom: -3px; }
#content #three .stats .value .asterisk { font-size: 0.7em; color: #aaaaaa; }
#content #three .more { margin-top: 10px; font-style: italic; }

body#users_show #content #profile { position: absolute; left: 280px; display: inline; float: left; margin-right: 10px; width: 470px; }
* html body#users_show #content #profile { overflow-x: hidden; }
body#users_show #content #profile .profile_image { float: left; }
body#users_show #content #profile .status { overflow: hidden; margin-left: 58px; font-size: 1.167em; }
body#users_show #content #profile .status p { line-height: 1.1em; margin-bottom: 0.25em; }
body#users_show #content #profile .status .created_at { color: #aaaaaa; font-size: 0.857em; font-style: italic; }
body#users_show #content #profile .status .created_at a.to_twitter { color: #aaaaaa; }
body#users_show #content #profile .status .created_at a.to_twitter:hover { color: white; background: #aaaaaa; }
body#users_show #content #profile .status.protected { color: #666666; font-style: italic; }
body#users_show #content #profile.no_profile { margin-top: -10px; font-style: italic; color: #aaaaaa; }
body#users_show #content #friends ul { list-style-type: none; margin: 0px; padding: 0px; display: inline; display: block; font-size: 1.5em; line-height: 1.2em; padding-top: 10px; }
body#users_show #content #friends ul li { margin: 0px; padding: 0px; display: inline; }
body#users_show #content #friends ul li:after { content: ", "; }
body#users_show #content #friends ul li:last-child:after, body#users_show #content #friends ul li.last:after { content: ""; }
body#users_show #content #friends ul li { display: block; }
body#users_show #content #friends ul li:after { color: #ff0077; }
body#users_show #content #friends ul a { color: #666666; }
body#users_show #content #friends ul a:hover { color: white; background: #666666; }
body#users_show #content #two { margin-top: 65px; }
body#users_show #content #two .actions { position: absolute; right: 0; top: 17px; padding-right: 10px; font-style: italic; }
body#users_show #content #recent_rolls { clear: both; }
body#users_show #content #recent_rolls .addendum { margin-top: -15px; color: #aaaaaa; font-style: italic; }
body#users_show #content #statistics h3 { font-size: 1em; font-style: italic; color: #666666; border-bottom: 1px solid #dedede; padding-left: 2px; margin-bottom: 12px; }
body#users_show #content #statistics .grouping { position: relative; }
body#users_show #content #statistics #stats_group_size table { width: 270px; }
body#users_show #content #statistics #stats_group_size table td { padding: 0; }
body#users_show #content #statistics #stats_group_size table .group_size { font-size: 4em; font-style: italic; line-height: 1; }
body#users_show #content #statistics #stats_group_size table .bar { height: 7px; background: #ffb2d6; position: relative; margin: 2px 0; }
body#users_show #content #statistics #stats_group_size table .bar .fill { background: #ff0077; height: 100%; }
body#users_show #content #statistics #stats_group_size table .bar .expected { background: #ff0077; width: 1px; height: 11px; position: absolute; top: -2px; }
body#users_show #content #statistics #stats_group_size .data_pie { width: 170px; position: absolute; top: 40px; right: 0px; }
body#users_show #content #statistics #stats_group_size .data_pie .pie { width: 70px; height: 70px; position: relative; overflow: hidden; float: left; }
body#users_show #content #statistics #stats_group_size .data_pie .pie .slice { position: absolute; left: -10px; top: -10px; display: none; z-index: 1; }
body#users_show #content #statistics #stats_group_size .data_pie .pie .slice.main { display: block; z-index: 2; }
body#users_show #content #statistics #stats_group_size .data_pie .caption { margin-left: 80px; line-height: 1em; padding-top: 5px; }
body#users_show #content #statistics #stats_group_size .data_pie .caption.auxiliary { display: none; }
body#users_show #content #statistics #stats_group_size .data_pie .caption.auxiliary .pct { display: block; font-size: 2em; line-height: 1.1em; }
body#users_show #content #statistics #stats_group_size #days_of_week { position: relative; line-height: 1em; }
body#users_show #content #statistics #stats_group_size #days_of_week table { width: auto; }
body#users_show #content #statistics #stats_group_size #days_of_week #days_of_week_bar { position: absolute; top: 3px; left: 70px; width: 70px; height: 81px; overflow: hidden; }
body#users_show #content #statistics #stats_group_size #days_of_week #days_of_week_bar img { position: relative; left: -2px; }
body#users_show #content #statistics #stats_group_size #days_of_week .day_name { font-style: italic; text-align: right; width: 65px; }
body#users_show #content #statistics #stats_group_size #days_of_week .bar_gap { width: 80px; }
body#users_show #content #statistics #stats_group_size.long table.groups { float: left; }
body#users_show #content #statistics #stats_group_size.long #days_of_week { float: right; margin-top: 115px; }
body#users_show #three .addendum { color: #aaaaaa; line-height: 1em; font-style: italic; margin-top: 12px; }

.profile_image, .profile_image .mask { zoom: 1; display: inline; display: -moz-inline-box; display: inline-block; vertical-align: top; width: 48px; height: 48px; overflow: hidden; position: relative; }

.profile_image .mask { position: absolute; top: 0; left: 0; background: url('/images/profile_mask.png') no-repeat; }

body#rolls_show .buttons { margin-top: 15px; }

ul.rolls { margin: 0; }
ul.rolls li { list-style-type: none; margin-left: 0px; }
ul.rolls li { margin-bottom: 12px; }
ul.rolls li.show_more a { font-size: 1.3em; font-style: italic; display: block; width: 100%; text-align: center; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; }
ul.rolls li.show_more.loading { background: url('/images/loader.gif') no-repeat 50% top; height: 32px; }
ul.rolls li.show_more.loading a { display: none; }

div.roll { position: relative; padding-bottom: 31px; }
div.roll p { margin: 0; }
div.roll .content { background: white; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; padding: 1em 1.3em; }
div.roll .message { font-size: 2em; line-height: 1.3em; word-wrap: break-word; overflow: hidden; }
div.roll .message a.twitter_name { color: #ff0077; }
div.roll .message a.twitter_name:hover { color: white; background: #ff0077; }
div.roll .resolved_at { color: #aaaaaa; font-style: italic; margin-top: 10px; }
div.roll .roller { background: url('/images/message_point_down.png') no-repeat 25px top; position: absolute; bottom: 0; padding-top: 13px; width: 15ex; text-align: center; color: #666666; }
div.roll .roller a { font-weight: bold; color: #333333; }
div.roll .roller a:hover { color: white; background: #333333; }

form input { font-family: Georgia,Palatino,'Book Antiqua',serif; color: #333333; outline: none; }

.buttons { text-align: right; }
.buttons button, .buttons a { border: none; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; zoom: 1; display: inline; display: -moz-inline-box; display: inline-block; vertical-align: top; margin: 0 5px 0 0; background-color: #ff0077; font-family: "Lucida Grande","Georgia",sans-serif; font-size: 18px; line-height: 1em; text-decoration: none; color: white; cursor: pointer; padding: 9px 10px; }
.buttons button:hover, .buttons a:hover { background-color: #dd0055; }
.buttons button.disabled, .buttons a.disabled { background-color: #f777b3; }
.buttons button { width: auto; overflow: visible; height: 36px; }
.buttons button[type] { padding: 5px 10px 5px 7px /* Firefox */; }

html, body { height: 100%; }

#root { min-height: 100%; margin-bottom: -25px; }
#root #root_footer { height: 25px; }

#footer { clear: both; position: relative; height: 25px; }

#footer, #root_footer { clear: both; }

#footer { width: 950px; margin: 0 auto; overflow: hidden; display: inline-block; color: #aaaaaa; font-style: italic; }
#footer { display: block; }
#footer .content { text-align: center; }
#footer .content p { margin: 0; }

.overlay { display: none; width: 310px; background-image: url('/images/overlay/white.png'); padding: 25px; }
.overlay h3 { font-style: italic; }
.overlay .close { width: 36px; height: 36px; background-image: url('/images/overlay/close.png'); position: absolute; top: 0; right: 0; cursor: pointer; }
