CSS Code for the Twitter Home Page, circa August 2008
Discussed @ https://perishablepress.com/css-implementations-of-the-rich-and-famous/
* { margin: 0; padding: 0; }
a { text-decoration: none; color: blue; }
a:hover { text-decoration: underline; }
ul { list-style: none; }
/* bulleted list with » */
ul.bullets { list-style-type: square; }
ul.bullets li { margin-left: 1em; }
ul.bullets { padding: 1em }
a img, form, fieldset { border: 0; }
hr { display: none; }
abbr { text-decoration: none; border-bottom: none; }
body { text-align: center; font: 0.75em/1.5 'Lucida Grande', sans-serif; color: #333; }
dt { font-weight: bold; margin-top: 5px;}
#dim-screen { position: absolute; background: #000000; z-index: 99; width: 100%; height: 100%; top: 0px; left: 0px; opacity: .90; filter: alpha(opacity=90); display: none; margin: 0 auto; }
#dev_header { padding: 5px; height: 25px; background: #eee; font-weight: bold; font-size: 20px; text-align: right; border-bottom: 1px solid #000; }
#announcement { border: 5px solid #87BC44; background: white; font-weight: bold; padding: 10px; margin: 10px; font-size: 1.1em; }
#container { width: 755px; margin: 0 auto; padding: 15px 0; text-align: left; position: relative; }
#accessibility, #navigation h3, #footer h3 {position: absolute; left: -9999px; overflow: hidden;}
#loader { position:absolute; top:5px; right:0px; padding:0px; background:#FFFFFF;border: 1px solid #CCCCCC; line-height:0px; }
#logout_form { display: inline; padding: 0; margin: 0; }
#logout_form div { display: none; }
#chars_left_notice { color: #ccc; font-size: 22pt !important; }
#container #flash .desc { padding-top: 11px; background: url(http://static.twitter.com/images/arr2.gif) no-repeat 27px 0px; margin-bottom: 9px; }
#container #flash .desc p { display: block; background: #fff; font-size: 2.12em; line-height: 1.2em; padding: 7px; font-weight: bold; }
#container #flash .thumb { padding-left: 26px; }
#navigation, #footer { background: #fff; }
#content { width: 555px; margin-top: 0px; float: left; padding-bottom: 15px; word-wrap: break-word;}
#content #doingForm .bar { line-height: 1.9em; position: relative; padding: 0 10px; }
#content #doingForm .bar h3 { font-size: 1.5em;}
#content #doingForm .bar h3 label { font-weight: bold; color: #000; padding-right: 170px; letter-spacing: -1px; }
#content #doingForm .bar span { font-size: 0.92em; display: block; position: absolute; top: 0; right: 10px; }
#content #doingForm .bar span#submit_loading { padding-top:.3em; }
#content #doingForm .info { background: #fff; padding-top: 3px; text-align: center; }
#content #doingForm textarea {
height: 2.5em;
width: 500px;
padding: 5px;
font: 1.15em/1.1 'Lucida Grande', sans-serif;
overflow: auto;
}
#content .doing { width:300px; }
#currently { word-wrap: break-word; }
#content tr.hentry_hover:hover {background-color:#f7f7f7;}
#content #submit { display: block; padding: 5px 10px; margin: 7px auto; font: normal 1.12em/1.5 'Lucida Grande', sans-serif;}
#content h2.thumb { font-size: 2.8em; }
#content h2.thumb img { float: left; margin: 0 10px 0 0; border: 1px solid #999; }
#content h2.thumb small { font-size: .4em; }
#content div.desc { background: url(http://static.twitter.com/images/arr2.gif) no-repeat 14px 0px; margin: 6px 0 12px 0; }
#content div.desc p { display: block; background: #fff; font-size: 2.12em; line-height: 1.2em; padding: 0; }
#content div.desc .meta { font-size: .98em; padding: 0; font-weight: normal; text-indent: 0; }
#content div.desc .meta img { vertical-align: top; }
#content .tabMenu { text-align: center; margin: 25px 0 0;}
#content .tabMenu li { display: inline; margin-left: -5px;}
#content .tabMenu li a { display: inline; padding: 3px 20px 1px 20px; background: #e6e6e6; text-decoration: none; color: #4c4c4c; border-top: 1px solid #cecece;border-right: 1px solid #cecece; border-left: 1px solid #cecece; }
#content .tabMenu li a:hover { text-decoration: none; color: black; background: #999;}
#content .tabMenu li.active a { background: #fff; color: #000; border-bottom: 1px solid #fff; }
#content .tab { background: #fff; padding: 0px; border-top: 1px solid #cecece; margin-top:-1px; }
#content .tab #ad { text-align: center; }
#content .tab p { text-indent: 1em; }
#content .section_links { border: 1px solid #cecece; padding: 4px 15px; margin: 1px; }
#content .disabled { color:#bbb; }
#content .doing { font-size: 1.2em; line-height: 1.1; width:100%; }
#content .doing td { border-bottom: 1px solid #bbb;}
#content .doing .thumb { padding: 6px 5px 4px 4px; width: 50px; vertical-align:top; }
#content .doing .meta { font-size: 0.80em; }
#content .doing .meta img { vertical-align: top; }
#content .doing .user_actions { vertical-align: top; width: 16px; }
#content .doing .status_activity { margin: 4px 0 0 0; padding: 10px 0 0 20px; }
#content .doing .status_activity .activity { margin: 0 0 5px; }
#content .doing .status_activity .activity .content { vertical-align:top; margin: 0 0 0 5px; font-size:.8em;}
#content .green_button { background-color: #D4FF84; border: 1px solid #669933; padding: 5px; cursor:pointer; }
#content .green_button a { color: black; text-decoration:none; font-weight: bold; }
#content #permalink { padding-top: 153px; }
#content #permalink div.desc { background: 0; }
body.status #content #permalink div.desc { margin: 0; padding: 10px; background: #fff; }
#content #permalink h2 { background: url(http://static.twitter.com/images/arr.gif) no-repeat 335px 0; padding: 16px 0 5px 321px; font-size: 2em; line-height: 48px; position: absolute; }
#content #permalink #ad { text-align: right; }
#content .desc .status_actions { float: left; padding: 5px 5px; }
#content .desc .status_actions li { display: inline; }
#content .desc .status_actions li img { vertical-align: middle; }
.bottom_nav { padding: 0; margin-top: 20px;}
.pagination { float: right; }
.pagination ul { padding: 0; margin: 0; }
.pagination li { float: left; padding: 0 7px; }
.subpage #content .wrapper { background: #fff; padding: 5px 10px 15px; }
.subpage #content h1, .subpage #content h2, .subpage #content h3, .subpage #content h4, .subpage #content h5 { margin: 3px 0pt 4px; }
.subpage #content p { line-height: 1.2; margin: 5px 0; }
.subpage #content ul { padding-left: 0px; }
.subpage #content ol, #side ol { padding-left: 30px; }
.subpage #content code { font-size: 1.2em; }
#went-protected-notice { background: #FFFF99; border: 1px solid #FCFC19; padding:0px 0px 0px 10px; line-height:1;}
#went-protected-notice .sub-h1 { font-size: 1.2em; }
#went-protected-notice table td { padding:10px; }
/* SIDE BAR BASE */
#side_base { float:right; width: 187px; margin-top: 17px; line-height: 1.2;}
/* AD */
#side_ad_base { margin-top: 0px; height:185px; margin-bottom: 5px; border: 1px solid #87bc44;}
/* SIDE MENU */
#side { padding: 12px 10px; margin-bottom: 10px; border: 1px solid #87bc44; background: #DDFFCC; }
.subpage #side { margin-top: 0px; }
#side div.user_icon img { float: left; padding-right: 0.5em; }
#side div.section { margin-bottom: 2em; }
#side div.section-header { border-bottom: 1px solid #98D231; margin-bottom: 10px; }
#side div.section-header h1 { font-weight: bold; color: #333; font-size: 1em; padding: 0 0 2px; }
#side .section-links { float: right; font-size: 0.9em; text-align:right }
#side div.msg strong { display: block; font-size: 1.4em; }
#side div.msg h3 { font-size: 1.25em; }
#side ul { margin: 0; }
#side ul.stats { margin: 0; padding: 0; }
#side ul.stats li { text-align: right; line-height: 1.4em; }
#side ul.stats li .numeric { font-size: 1.2em; }
#side ul.stats .label { float: left; }
#side .notify { border: 1px solid #87bc44; padding: 2px 5px; margin: 10px -3px; font-size: .9em; }
#side .notify a { text-decoration: none; }
#side .actions { border: 1px solid #87bc44; padding: 2px 5px; margin: 10px -3px; }
#side .actions small { font-size: .9em; }
#side .actions a { padding-left: 7px; }
#side .featured { border: 1px solid #87bc44; padding: 2px 5px; margin: 10px -3px; }
#side .featured img { vertical-align: middle; padding: 1px 0 -5px 7px; }
#side .promo { border: 1px solid #87bc44; background: #fff; padding: 10px 0px 10px 5px; margin-top: 8px; font-size: 1em; }
#side .promo li { margin: 0 0 8px; }
#side .promo a { text-decoration: none; }
#side .promo img { vertical-align: middle; }
#side p.complete { font-size: .9em; margin-top: 1em; }
#side .notify { text-align: center; line-height: 1.5; padding: 5px 0; }
div.join { text-align: center; }
div.join input { background-color: #417596; color: white; font-size: 11pt; padding: .3em 2.5em; font-weight: bold; border: 1px solid black; }
div.join input:hover { background-color: #294B60; }
#side ul.todo { font-style: italic; }
#side #submit { display: block; padding: 3px 10px; margin: 5px auto; font: bold 1.12em/1.5 'Lucida Grande', sans-serif; }
#side #friends img { padding: 0px; }
#side #friends .non-friend { opacity: .7; filter: alpha(opacity=70); }
#side .note { background: #fff; font-size: .95em; padding: 3px; border: 1px dashed #aaa; }
#side .note strong { color:red; }
#side .note li+li { border-top: 1px solid #ccc; padding-top: 4px; }
#side .note a { text-decoration: underline; }
#side .about li {padding-bottom: 3px;}
#side .about .label { font-weight: bold }
#side #friends { overflow: hidden; }
#side small {float: left; clear: both; }
#friends span { float: left; padding: 0 3px 2px 0; }
#navigation { position: absolute; top: 24px; right: 0; padding: 6px 10px 3px 5px; line-height: 1.0em; text-align:right; width:500px; vertical-align:middle;}
#navigation ul { padding-top:5px;}
#navigation li { display: inline; padding: 0 0 0 5px; }
#navigation li:before { content: ' '; padding-right: 0; }
#navigation li.first:before { content: ''; padding-right: 0; }
#navigationunauth { position: absolute; background:#fff; top: 24px; right: 0; padding: 6px 10px 6px 5px; line-height: 1.5em; text-align:right; vertical-align:middle; }
#navigationunauth ul { padding-top:0px;}
#navigationunauth li { display: inline; padding: 0 0 0 5px; }
#navigationunauth li:before { content: ' '; padding-right: 0; }
#navigationunauth li.first:before { content: ''; padding-right: 0; }
#lang-select { position:absolute; right:0px; top:63px; }
#lang-select-front { position:absolute; right:0px; top:15px; }
#user_search_form { float:left; padding: 0px; margin-left: 5px; font-size:.8em;}
#user_search_q { width:150px; height:12px; }
#user_search_form input[type="submit"] { background-color: #E6E6E6; border: 1px solid #ccc; padding:5px; font-size: .6em; margin-left:5px; width:50px; }
#footer { clear: left; width: 555px; text-align: center; padding: 8px 0; line-height: 1; }
#footer li { display: inline; padding: 0 0 0 5px; }
#footer li.first:before { content: ''; padding-right: 0; }
/* AD */
#side_ad { float: right; width: 186px; padding: -10px -10px; margin-top: -13px; margin-right: -11px;margin-bottom: 10px; border: 1px solid #000000; background: #FFFFFF;}
/* AD */
#side_ad { float: right; width: 186px; padding: -10px -10px; margin-top: -13px; margin-right: -11px;margin-bottom: 10px; border: 1px solid #000000; background: #FFFFFF;}
#profile .name-box { padding-top:2px; }
#profile .name-box .name { font-size: 3.0em; line-height: 1; text-decoration: none; font-weight:bold;}
#profile .name-box .screen-name { font-size: 1.4em; font-weight:bold; margin-left:2px; }
#profile .protected-box { background:#FEF6A8; border: 1px solid #FCFC19; padding:0px 0px 0px 10px; line-height:1;}
#profile .protected-box .sub-h1 { font-size: 1.2em; }
#profile .protected-box table td { padding:10px; }
#profile .protected-box .logged-out { padding:10px; }
/* front */
.h { position: absolute; left: -9999px; }
#front #content { width: 755px; padding-bottom: 0; background: transparent url(http://static.twitter.com/images/arr2.gif) no-repeat scroll 25px 0px; padding-top: 11px; margin-top: 6px; float: left; }
#front .wrapper { background: #fff none repeat scroll 0%; float: left; width: 715px; padding: 17px 20px;}
#front .intro { width: 510px; float: left; }
#front h2 { font-size: 2em; color: #000; line-height: 1.0; float: left; }
#front #menu { float: right; }
#front #menu li { float: left; display: inline; margin: .2em 0 0 8px; padding: 3px 2px; }
#front #menu li a { border: 1px dashed #a4a0a1; color: #a4a0a1; padding: 3px 12px; text-decoration: none; }
#front #menu li a:hover, #front #menu li a:visited { border: 1px solid #999; color: #999; }
#front #menu li.act a { border: 1px solid #000; color: #000; }
#front img.tour { margin: 9px 0; border: 1px solid #000; }
#front .intro p, #front .intro ul { font-size: 1.2em; line-height: 1.3; color: #000; margin: 0 0 1em; }
#front .intro ul { list-style: disc; margin-left: 1.2em; }
#front p.teaser { font-size: 1.5em; padding: 0 4px; }
#front p a.join { display: block; width: 9.5em; text-align: center; margin: 1em auto .5em; background: #97cd39; color: #fff; font-size: 1.5em; padding: 4px; border: 1px solid #000; }
#front p a.join:hover { text-decoration: none; }
#front #footer { width: 755px; }
#signin { float: right; width: 179px; margin: .45em 0;}
#signin legend { font-size: 1.2em; font-weight: bold; }
#signin p { margin: 5px 0; }
#signin input { width: 173px; }
#signin input[type="submit"] { cursor: pointer; }
#signin .remember { float: left; font-size: .85em; padding: .6em 0 0; }
#signin .submit { float: right; }
#signin .remember input, #signin .submit input { width: auto; color: #333; }
#signin .forgot { clear: both; padding: .5em 0; font-size: .85em; }
#signin .forgot a { color: #333; text-decoration: underline; }
#signin .forgot a:hover { text-decoration: none; }
#signin p.complete { font-size: .85em; text-align: center; background: #e8fecd; border: 1px solid #a9bf74; padding: 4px 20px; line-height: 1.2; }
#whatistwitter { float: left; background: #afeff1; padding: 30px 0; margin: 0 auto; width: 755px; }
#whatistwitter ul { width: 576px; float: left; display: inline; margin: 0 0 0 100px; color: #000; }
#whatistwitter ul li { width: 169px; float: left; display: inline; margin: 0 23px 0 0; }
#whatistwitter ul li blockquote { background: url(http://static.twitter.com/images/arr.gif) no-repeat 8% 100%; padding: 0 0 11px 0; margin: 0 0 1px 0; }
#whatistwitter ul li blockquote p { background: #fff; font-size: .92em; line-height: 1.2; padding: 6px 5px; }
#whatistwitter ul li cite { font-style: normal; font-size: .85em; }
#whatistwitter ul li cite span strong { padding: 0 8px; }
/* end front */
#settings .protected { background: #FFFF99; border: 1px solid #FCFC19; }
#settings .protected th { padding:20px 10px 0px 0px; }
#settingsNav { margin: 0 0 20px 0; font-weight: normal; }
fieldset { margin: 10px 0; }
fieldset p { margin: 0 0 5px 0; }
fieldset th,td { padding: 7px 3px; }
fieldset th { text-align: right; width: 11em; padding-top: 10px; font-weight: normal; }
fieldset small { color: #777; font-size: .97em; }
fieldset input[type="text"], input[type="password"], select, checkbox { margin-right: 3px; border: 1px solid #aaa; padding: 4px 2px; }
fieldset input[type="text"], input[type="password"] { width: 12em; }
fieldset td[colspan="2"] { text-align: right; }
fieldset label { white-space: nowrap; font-weight: normal; }
fieldset ul li { padding: 5px 0; }
fieldset ul li label { display: block; font-weight: bold; }
fieldset ul li label sup { color: #888; }
#user_search_form { margin-bottom: 3px; }
#user_search_form img { margin-left: 2px; vertical-align: middle; }
#user_search_q { font-size: 1em; color: #999; width: 90px; padding: 3px; }
#user_search_form input[type="submit"] { padding:3px 0px; font-size: 1em; }
#bio-pics { text-align: center; padding: 10px 0; }
#bio-pics div { text-align: left; margin: auto; width: 158px; }
#bio-pics img { padding-right: 2px; }
#invite_preview { background-color: #eef; padding: 10px; }
#invite_message { white-space: normal; }
.direct_messages .bar h3 { padding: 4px 4px; }
.direct_messages .bar h3 select { width: 13em; }
.devices { width: 100%; }
.devices small { font-size: 95%; }
.devices .thumb img { border: 1px solid gray; margin-top:8px; }
#create_device form { padding: 5px; }
#create_device input[type="text"] { width: 12em; }
#create_device select { width: 5em; }
#create_device input[type="text"], #create_device select {padding:2px;}
.subpage #content tr.not_verified code { display:block; font-size: 1.9em; color: green; font-weight: bold; text-align: center; }
body#profile #content h2.thumb { font-size: 2.8em; line-height: 50px; padding-top:10px; }
body#profile #content h2.thumb img#profile-image { float: left; margin-bottom:5px; margin-top:-10px;}
body#profile #content h2.thumb div#follow-details img#x { float: right; margin: 3px 0 0 0; cursor: pointer; border: none; }
div#follow-control { margin: 3px 0 0 0; }
div#follow-details { background: #F9FDAB; margin: 5px 0 10px 0; padding: 5px 10px 10px 10px; border: solid 1px #FDCC68; color: #000; line-height: 1.7em; display: none; font-size: 0.9em; }
div#follow-flash { background: #F9FDAB; border: solid 1px #FDCC68; font-size: 0.9em; color: #000; line-height: 1.75em; margin: 5px 0; font-weight: bold; padding: 5px; }
div#follow-details p { margin-top: 10px; }
div#follow-actions #onoff { margin-left: 10px;}
div#follow-details strong { display: inline; font-size: 120%; }
div#follow-details div#notifications { margin-top: 10px;}
div#follow-toggle { background-repeat: no-repeat; cursor:pointer; background-position: 2% 50%; padding:5px 5px 5px 20px; border: 1px solid #CCCCCC; }
div#follow-toggle.closed { background-image: url('/images/toggle_closed.gif'); }
div#follow-toggle.opened { background-image: url('/images/toggle_opened.gif'); }
div#followed { background-color: #e6e6e6; border: 1px solid #D1D1D1; }
.follow-button button,.follow-button input[type=submit], input[type=button].follow-button {background-color:#808080;color:#FFF;font-size:1em;font-weight:bold;border: 1px solid black;height:30px; width:75px;cursor:pointer;}
.remove-button button,.remove-button input[type=submit], input[type=button].remove-button {background-color:#E6E6E6;color:#000;font-size:1em; width:75px;cursor:pointer;margin-left:3px;}
.update-button button,.update-button input[type=submit], input[type=button].update-button {background-color:#808080;color:#FFF;font-size:1em;font-weight:bold;border: 1px solid black;cursor:pointer;margin-top:5px;}
.update-button-disabled button,.update-button-disabled input[type=submit], input[type=button].update-button-disabled {background-color:#eee;color:#666;font-size:1em;font-weight:normal;border: 1px solid #ccc;cursor:default;margin-top:5px;}
span#p { color:#999 }
img.follow-icon { border: 0; margin: 1px 5px 3px 0; vertical-align: middle; }
#content h2.thumb img.follow-icon { border: 0; margin: 1px 7px 3px 0; vertical-align: middle; }
button.small { background: #e6e6e6; width: 44px; height: 16px; padding: 0; font-size: 9px; text-align: center; margin: 2px 2px 1px 2px; border: none; line-height: 9px; cursor: pointer; }
button.med { background: #e6e6e6; width: 75px; height: 16px; padding: 0px; font-size: 9px; text-align: center; margin: 2px 2px 1px 2px; border: none; }
div.big-btn { background: #e6e6e6; width: 75pt; height: 19pt; padding: 8px 3px 4px 3px; text-align: center; font-weight: bold; text-decoration: none; font-size: 95%; vertical-align: middle; cursor: pointer; }
div.long-btn { background: #e6e6e6; width: 200px; padding: 3px 2px 2px 2px; font-size: 11px; vertical-align: middle; color: #000; cursor: pointer; }
div.med-btn { background: #e6e6e6; width: 75px; height: 18px; padding: 1px 3px 1px 21px; font-size: 11px; vertical-align: middle; color: #000; cursor: pointer; }
div.short-btn { background: #e6e6e6; width: 60px; height: 14px; padding: 2px 2px 1px 21px; font-weight: bold; font-size: 11px; line-height: 14px; vertical-align: middle; color: #000; cursor: pointer; }
#content h2.thumb img.ticon { border: none; float: left; margin: 2px 2px 3px 3px; vertical-align: middle; }
body#profile #content h2.thumb { margin-bottom: 10px; }
.profile .protected-box { background:#FEF6A8; padding:8px;}
input.big-btn { background: url(/images/btn-bg.gif) no-repeat top left; border: none; display: block; width: 88px; height: 31px;
text-align: center; font-weight: bold; text-decoration: none; font-size: 95%; vertical-align: middle; }
#notifications-sub .desc { margin-left:3px;font-style:italic; }
div.badge { margin: 0 auto -1.5em; text-align:center; }
form.device_control { display: inline; }
form.device_control select { font-size: 85%; }
.yellow-box { background: #FEF6A8; margin: 5px 0 10px 0; padding: 5px; border: solid 1px #FFFA00; color: #000; line-height: 1.7em; font-size: 0.9em; text-align: center;}
.protected-notice-box { background:#FEF6A8; margin: 5px 0 10px 0; padding: 5px 10px 10px 10px; border: solid 1px #FFFA00; color: #000; line-height: 1.0em; font-size: 0.9em;}
.alert-box { background: #FF7B6D; padding:10px; border: solid 1px #FF0000; color: #000; line-height: 1.7em; font-size: 0.9em; }
.device-alert-box { background: #FF7B6D; padding:0px 10px 10px 10px; border: solid 1px #FF0000; color: #000; line-height: 1.7em; font-size: 0.9em; margin-top:8px; }
.person img.lock { vertical-align: middle; margin-bottom:3px; }
#downtime-announce { background: #fff; border: 1px solid grey; padding: 7px; color: #333; font-size: 1.1em; }
.note { background: #fff; border: 1px solid grey; padding: 7px; color: #333; font-size: 1.1em; }
.person-actions { font-size: 90%; padding: 7px 0px 0px;}
#admin_side { background: #f9f6ba; font-size: .9em; float: right; position: absolute; left:547px; width: 185px; padding: 0px; margin: 20px; margin-bottom: 10px; line-height: 1.4; }
#admin_side .admin { margin: 10px 10px; }
a#back-link { margin-left: 20px; font-size:120% }
div#buffer { padding: 17px; }
#username_url { color: green; font-weight: bold; }
.username_taken { color: red; }
.fieldWithErrors { display: inline; }
.fieldWithErrors input, .fieldWithErrors select { background-color: #ffdfdf; }
.error { color: red; }
.highlight{ background-color: #f9f6ba; }
.beta { font-size: .9em; background-color: #f9f6ba; }
.midgrey { font-size: 1.2em; color: #999; padding-bottom: 4px; }
.user_search { border: 1px solid #bbbbbb; clear: both; padding: 10px; margin-bottom: 10px; }
.user_search .screen_name { font-weight: normal; font-size: 2em; vertical-align: bottom; text-decoration: none; }
.user_search .follow { float: right; font-size: 0.9em; height:44px; padding-right: 2px; }
.user_search .protected { background: #FFFF99; border: 1px solid #FCFC19; line-height:1.4; }
.user_search .protected .lock { padding-top: 9px; }
.user_search .follow-request { float: right; background: #FFFF99; border: 1px solid #FCFC19; height:44px; font-size:.9em; line-height:1.4;}
.user_search .details{ clear: both; padding-top: 4px; }
.user_search .profile_img { float: left; margin-right: 10px; }
#followers .stop-undo { background: #BFBFBF; border: 1px solid #4E4E4E; padding: 0px 10px; text-align: left; display:none;}
#followers .stop-button { margin-right:25px; }
#followers .stop-undo button { width: 140px; }
#followers .stop-undo table td { padding: 2px 5px; }
#followers .right-box { float:right; width:400px; font-size:.9em; text-align:right; margin-right:10px; }
#followers .followers-table { width:100% }
#follow-requests .all { float:right; margin: 4px 8px 4px 4px; }
#follow-requests .follow-request { border: 1px solid #bbbbbb; clear: both; padding: 10px; margin-bottom: 10px; min-height:95px; height:auto !important; height:95px; }
#follow-requests .follow-request .name-box { padding-top:2px; }
#follow-requests .follow-request .name-box .lock { line-height:.2pt; }
#follow-requests .follow-request .screen-name { font-size: 2em; line-height: 1; text-decoration: none; }
#follow-requests .follow-request .name { font-weight:bold; margin-left:2px; }
#follow-requests .follow-request .right-box { float: right; background:#FEF6A8; border: 1px solid #FCFC19; width:300px; padding:8px;}
#follow-requests .follow-request .buttons { margin: 4px 0px 4px; }
#follow-requests .follow-request .right-box .request-button { width:100px; font-size:.9em; padding:2px; }
#follow-requests .follow-request .right-box form { display:inline; margin-right:5px; }
#follow-requests .follow-request .right-box td .centered-text { padding:1px; }
#follow-requests .follow-request .details { padding-top: 4px; }
#follow-requests .follow-request .details .title { color: #4F4F4F; }
#follow-requests .follow-request .details .detail { width:65%; color:#000000;}
#follow-requests .follow-request .profile-img { float: left; margin-right: 10px; }
.search_following { background-color: #D8F4F5; border: 1px solid #84C2D2; }
.search_following button { background-color: #fff; border: 1px solid #84C2D2; }
/* trying to phase out the "flatbutton" style and just have all buttons default to the same style */
input.submit, button, input[type=submit], input[type=button], input[type="file"] > input[type="button"] { background-color: #E6E6E6; border: 1px solid #ccc; padding-top: 1px solid #fff; font-size: 1em; padding: 4px 8px 4px 8px; }
input.submit:hover, button:hover, input[type=submit]:hover, input[type="file"] > input[type="button"]:hover { background: #999; cursor:pointer; }
.flatbutton button,.flatbutton input[type=submit], input[type=button].flatbutton { background-color: #E6E6E6; border: 1px solid #ccc; padding-top: 1px solid #fff; font-size: 1em; padding: 4px 8px 4px 8px; cursor:pointer;}
.flatbutton input[type=submit]:hover { background: #999; cursor:pointer;}
.clear { clear: both; }
div.clear { height: 1px; }
.numeric { font-family: 'Georgia', 'Serif'; }
input.labeled_field { color: #999; }
.niceform {margin-top:10px;}
.niceform label, .niceform input{display:block;width:50%;float:left;margin-bottom:10px;}
.niceform label{text-align:right;width:150px;padding-right:20px;}
.niceform br{clear:left;}
.tabMenu { text-align: center; margin: 25px 0 0;}
.tabMenu li { display: inline; margin-left: -5px;}
.tabMenu li a { display: inline; padding: 3px 20px 1px 20px; background: #e6e6e6; text-decoration: none; color: #4c4c4c; border-top: 1px solid #cecece;border-right: 1px solid #cecece; border-left: 1px solid #cecece; }
.tabMenu li a:hover { text-decoration: none; color: black; background: #999;}
.tabMenu li.active a { background: #fff; color: #000; border-bottom: 1px solid #fff; }
#settingsNav {text-align: center; margin: 10px 0 0 0;}
#settingsNav li { display: inline; margin-left: -5px;}
#settingsNav li a { display: inline; padding: 3px 15px 1px 15px; background: #e6e6e6; text-decoration: none; color: #4c4c4c; border-top: 1px solid #cecece;border-right: 1px solid #cecece; border-left: 1px solid #cecece; }
#settingsNav li a:hover { text-decoration: none; color: black; background: #999;}
#settingsNav li.active { display: inline; padding: 3px 15px 1px 15px; background: #fff; text-decoration: none; color: #4c4c4c; border-top: 1px solid #cecece;border-right: 1px solid #cecece; border-left: 1px solid #cecece; border-bottom: 1px solid #fff; }
#videobutton img {padding-right:5px;}
#videobutton { float:right; width:180px; text-align:center; vertical-align:middle; background-color: #ff493c; color: #fff; font-size: 11pt; font-weight: bold; border: 1px solid #000; padding-top:2px; padding-bottom:2px;}
#videobutton:hover {text-decoration:none; }
div#profilebird { position:absolute; padding:0px; margin:0px; height:48px;clear:both;}
div#profilebox { width:733px; background:#feffdf; border:1px solid #ff0; padding:5px 10px 10px 10px; vertical-align:middle; margin-top:40px; margin-bottom:10px;}
div#profiletext { float:left; width:480px; margin-top:10px; margin-bottom:10px;}
div#profilebutton {float:left; text-align:center; width:175px; margin-left:50px; }
div#profilebutton small {line-height:8px;}
input.profilesubmit { background-color:#74CA00; font-size:24px; color:#fff; font-weight:bold; margin:20px 0 10px 0; padding:10px; border:1px solid #0f0; width:175px; cursor:hand;}
input.profilesubmit:hover { background-color:#8CF500; }
.side_thumb {height:31px; width:31px;}
#device_address {size:12px; width:100px;}
/* prototip */
.prototip{position:absolute;}
.prototip .effectWrapper{position:relative;}
.prototip .tooltip{position:relative;}
.prototip .toolbar{position:relative;display:block;}
.prototip .toolbar .title{display:block;position:relative;}
.prototip .content{clear:both;}
.prototip .toolbar a.close{position:relative;text-decoration:none;float:right;width:15px;height:15px;background:transparent url(close.gif);display:block;line-height:0;font-size:0px;border:0;}
.prototip .toolbar a.close:hover{background:transparent url(close_hover.gif);}
.iframeShim{position:absolute;border:0;margin:0;padding:0;background:none;}
.prototip .default{width:180px;color:#333;}
.prototip .default .toolbar{background:#f9f6ba;font-weight:bold;}
.prototip .default .title{padding:5px;}
.prototip .default .content{background:#f9f6ba;font:1em;padding:5px;border:1px solid #ffe96a;}
.badgebox { background:#ffc; border:1px solid #ff0; padding:5px; font-size:0.8em; text-align:center; margin-top:10px;}
.promobox { background:#fff; border:1px solid #ff0; padding:5px; font-size:0.8em; text-align:center; margin-top:10px;}
table.admindata { border-collapse: collapse; margin-bottom: 15px;}
table.admindata th { vertical-align: top; }
table.admindata td { }
table.admindata th, table.admindata td { border: 1px solid #ccc; padding: 2px; }
table.admindata .omgwtf { font-weight: bold; color: red; }
.ohhai { font-weight: bold; color: green; }
#adminbutton { position:absolute; right:-65px; top:24px; background:white; padding:8px; font-weight:bold; font-size:0.9em; }
body { height: 100% }
#navigation {position: static; float: right; background:transparent; width: 600px; }
#navigation form {background: #fff; position:absolute; top:25px; left:250px; line-height:2em; height:30px; text-align:left; padding-left:5px; padding-top:5px; width:250px;}
#user_search_q { width:100px; height:12px; }
#navigation ul { background: #fff; position: absolute; top: 25px; right: 0; line-height: 2em; height:30px; padding-right:10px;}
#content .friends {padding-left: 20px; padding-bottom: 20px;}
#content .friends ul, #content .friends h3 {margin-left: -20px;}
#content h2.thumb { width: 100%; }
#content h2.thumb img.ticon {margin:3px 2px 2px 3px;vertical-align:middle;}
body#profile #content h2.thumb {margin-bottom:-5px;}
#content h2.thumb img.follow-icon {margin:3px 7px 3px 0;}
button.small {cursor:default;}
#query_input {height: 21px;}
/* === status update form === */
#content #doingForm .bar, #footer {
height: 1%;
background-image: none;
}
/* the bottom of the counter was getting cut off */
#content #doingForm #status-field-char-counter { padding: 5px; float: right; }
/* without this ie displays a vertical scroll even when we don't need it */
#content #doingForm textarea { overflow: auto; }
/* profile transparent PNG */
#profilebirdimg { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/images/profile_bird.png', sizingMethod='scale');}
/* === side nav === */
/* join button */
div.join input { margin-top: 5px; }
/* ie ignores the margin bottom on section headers */
#side div.section_header { margin-bottom: 10px; }
/* the icon and name was flush with header bar */
#side div.user_icon { padding: 1px; }
/* about section was showing up in italics for some strange reason */
#side address ul.about { font-style: normal; }
/* the protected icon was flush with the header line. this pulls it up a bit */
#side img.protected { margin-top: -2px; }
/* === bottom nav === */
/* in IE the border gets cut off; can't figure out how to fix */
#content .section_links { border: 0px; }
/* === follow controls == */
div.short-btn {width:60px;height:14px;padding:0px 2px 6px 21px;}
div.long-btn {width:188px;height:16px;padding:0px 3px 0px 21px;}
.notification_controls {vertical-align: 2.5%;}
/* navigation dissappears on IE
#front div#navigation { position: static; float: right; background: transparent; width: 600px; }
#front div#navigation ul { background: #fff; position: absolute; top: 25px; right: 0; line-height: 2em; padding-top:5px; }
#front div#navigation ul li { display:inline; margin: 2px; padding; 0 0 0 5px; }
#front div#navigation input { margin: 2px 0; } /* whitespace is odd on IE -- add some spacing */
*/
/* tab border */
#content .tab { margin-top:0px;}
/*
#navigation { position: absolute; top: 24px; right: 0; padding: 6px 10px 3px 5px; line-height: 1.0em; text-align:right; width:500px; vertical-align:middle;}
#navigation ul { padding-top:5px;}
#navigation li { display: inline; padding: 0 0 0 5px; }
#navigation li:before { content: ' '; padding-right: 0; }
#navigation li.first:before { content: ''; padding-right: 0; }
#navigationunauth { position: absolute; background:#fff; top: 24px; right: 0; padding: 6px 10px 6px 5px; line-height: 1.5em; text-align:right; vertical-align:middle; }
#navigationunauth ul { padding-top:0px;}
#navigationunauth li { display: inline; padding: 0 0 0 5px; }
#navigationunauth li:before { content: ' '; padding-right: 0; }
#navigationunauth li.first:before { content: ''; padding-right: 0; }
#user_search_form { float:left; padding: 0px; margin-left: 5px; font-size:.8em; width:240px;}
#user_search_form img { }
#user_search_q { width:100px; height:12px; }
#user_search_form input[type="submit"] { background-color: #E6E6E6; border: 1px solid #ccc; padding:5px; font-size: .6em; margin-left:5px; width:50px; }
*/
#lightwindow_overlay {
/* REQUIRED */
display: none;
visibility: hidden;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100px;
z-index: 500;
/* REQUIRED */
}
#lightwindow {
/* REQUIRED */
/* Of Note - The height and width of this element are set to 0px */
display: none;
visibility: hidden;
position: absolute;
z-index: 999;
line-height: 0px;
/* REQUIRED */
}
#lightwindow_container {
/* REQUIRED */
display: none;
visibility: hidden;
position: absolute;
/* REQUIRED */
padding: 0 0 0 0;
margin: 0 0 0 0;
}
/* IE6 needs this or it messes with our positioning */
* html #lightwindow_container {
overflow: hidden;
}
#lightwindow_contents {
overflow: hidden;
z-index: 0;
position: relative;
border: 10px solid #ffffff;
background-color: #ffffff;
}
#lightwindow_loading {
/* REQUIRED */
height: 100%;
width: 100%;
top: 0px;
left: 0px;
z-index: 9999;
position: absolute;
/* REQUIRED */
background-color: #f0f0f0;
padding: 10px;
}
#lightwindow_loading_shim {
display: none;
left: 0px;
position: absolute;
top: 0px;
width: 100%;
height: 100%;
}
#lightwindow_loading span {
font-size: 12px;
line-height: 32px;
color: #444444;
float: left;
padding: 0 10px 0 0;
}
#lightwindow_loading span a,
#lightwindow_loading span a:link,
#lightwindow_loading span a:visited {
color: #09F;
text-decoration: none;
cursor: pointer;
}
#lightwindow_loading span a:hover,
#lightwindow_loading span a:active {
text-decoration: underline;
}
#lightwindow_loading img {
float: left;
margin: 0 10px 0 0;
}
/*-----------------------------------------------------------------------------------------------
I liked the Navigation so much from http://www.huddletogether.com/projects/lightbox2/
I mean let's face it, it works really well and is very easy to figure out.
-----------------------------------------------------------------------------------------------*/
#lightwindow_navigation {
/* REQUIRED */
position: absolute;
top: 0px;
left: 0px;
display: none;
/* REQUIRED */
}
/* We need to shim the navigation for IE, though its more of a sub-floor */
#lightwindow_navigation_shim {
/* REQUIRED */
display: none;
left: 0px;
position: absolute;
top: 0px;
width: 100%;
height: 100%;
/* REQUIRED */
}
#lightwindow_navigation a,
#lightwindow_navigation a:link,
#lightwindow_navigation a:visited,
#lightwindow_navigation a:hover,
#lightwindow_navigation a:active {
/* REQUIRED */
outline: none;
/* REQUIRED */
}
#lightwindow_previous,
#lightwindow_next {
width: 49%;
height: 100%;
background: transparent url(../images/blank.gif) no-repeat; /* Trick IE into showing hover */
display: block;
}
#lightwindow_previous {
float: left;
left: 0px;
}
#lightwindow_next {
float: right;
right: 0px;
}
#lightwindow_previous:hover,
#lightwindow_previous:active {
background: url(../images/prevlabel.gif) left 15% no-repeat;
}
#lightwindow_next:hover,
#lightwindow_next:active {
background: url(../images/nextlabel.gif) right 15% no-repeat;
}
#lightwindow_previous_title,
#lightwindow_next_title {
display: none;
}
#lightwindow_galleries {
width: 100%;
position: absolute;
z-index: 50;
display: none;
overflow: hidden;
margin: 0 0 0 10px;
bottom: 0px;
left: 0px;
}
#lightwindow_galleries_tab_container {
width: 100%;
height: 0px;
overflow: hidden;
}
a#lightwindow_galleries_tab,
a:link#lightwindow_galleries_tab,
a:visited#lightwindow_galleries_tab {
display: block;
height: 20px;
width: 77px;
float: right;
line-height: 22px;
color: #ffffff;
text-decoration: none;
font-weight: bold;
cursor: pointer;
font-size: 11px;
color: #ffffbe;
background: url(../images/black-70.png) repeat 0 0 transparent;
}
* html a#lightwindow_galleries_tab,
* html a:link#lightwindow_galleries_tab,
* html a:visited#lightwindow_galleries_tab {
background: none;
background-color: #000000;
opacity: .70;
filter: alpha(opacity=70);
}
a:hover#lightwindow_galleries_tab,
a:active#lightwindow_galleries_tab {
color: #ffffbe;
}
#lightwindow_galleries_tab_span {
display: block;
height: 20px;
width: 63px;
padding: 0 7px 0 7px;
}
#lightwindow_galleries_tab .up {
background: url(../images/arrow-up.gif) no-repeat 60px 5px transparent;
}
#lightwindow_galleries_tab .down {
background: url(../images/arrow-down.gif) no-repeat 60px 6px transparent;
}
#lightwindow_galleries_list {
background: url(../images/black-70.png) repeat 0 0 transparent;
overflow: hidden;
height: 0px;
}
* html #lightwindow_galleries_list {
background: none;
background-color: #000000;
opacity: .70;
filter: alpha(opacity=70);
}
.lightwindow_galleries_list {
width: 200px;
float: left;
margin: 0 0 10px 0;
padding: 10px;
}
.lightwindow_galleries_list h1 {
color: #09F;
text-decoration: none;
font-weight: bold;
cursor: pointer;
padding: 10px 0 5px 0;
font-size: 16px;
}
.lightwindow_galleries_list li {
margin: 5px 0 5px 0;
list-style-type: none;
}
.lightwindow_galleries_list a,
.lightwindow_galleries_list a:link,
.lightwindow_galleries_list a:visited {
display: block;
line-height: 22px;
color: #ffffff;
text-decoration: none;
font-weight: bold;
cursor: pointer;
padding: 0 0 0 10px;
font-size: 11px;
}
.lightwindow_galleries_list a:hover,
.lightwindow_galleries_list a:active {
background: #000000;
color: #ffffbe;
border-left: 3px solid #ffffbe;
padding: 0 0 0 7px;
}
#lightwindow_data {
/* REQUIRED */
position: absolute;
/* REQUIRED */
}
#lightwindow_data_slide {
/* REQUIRED */
position: relative;
/* REQUIRED */
}
#lightwindow_data_slide_inner {
background-color: #ffffff;
padding: 0 10px 10px 10px;
}
#lightwindow_data_caption {
padding: 10px 0 0 0;
color: #666666;
line-height: 25px;
background-color: #ffffff;
clear: both;
}
#lightwindow_data_details {
background-color: #f0f0f0;
padding: 0 10px 0 10px;
height: 20px;
}
#lightwindow_data_author_container {
width: 40%;
text-align: right;
color: #666666;
font-style: italic;
font-size: 10px;
line-height: 20px;
float: right;
overflow: hidden;
}
#lightwindow_data_gallery_container {
font-size: 10px;
width: 40%;
text-align: left;
color: #666666;
line-height: 20px;
float: left;
overflow: hidden;
}
#lightwindow_title_bar {
height: 45px;
overflow: hidden;
background-color:#fff;
}
#lightwindow_title_bar_title {
color: #000;
font-size: 14px;
font-weight:bold;
line-height: 17px;
text-align: left;
float: left;
padding-left:10px;
padding-top:10px;
}
.subtitle {
font-size:10px;
font-weight:normal;
}
a#lightwindow_title_bar_close_link,
a:link#lightwindow_title_bar_close_link,
a:visited#lightwindow_title_bar_close_link {
float: right;
text-align: right;
cursor: pointer;
color: #00f;
line-height: 25px;
padding-right: 12px;
padding-top:5px;
margin: 0;
}
a:hover#lightwindow_title_bar_close_link,
a:active#lightwindow_title_bar_close_link {
text-decoration:underline;
}
#lightwindow_formsubmit {
padding-top:20px;
height:30px;
color:red;
background-color:white;
}
/*-----------------------------------------------------------------------------------------------
Theme styling stuff
-----------------------------------------------------------------------------------------------*/
#lightwindow p {
color: #000000;
padding-right: 10px;
}
p a.join_lb { height:30px; width: 9.5em; text-align: center; margin: 0em auto 0em; background: #97cd39; color: #fff; font-size: 1.5em; padding: 4px; border: 1px solid #000; }
p a.join_lb:hover { text-decoration: none; }