CSS Code for the Twitter Home Page, circa August 2008
Discussed @ https://perishablepress.com/css-implementations-of-the-rich-and-famous/



<link href="http://assets3.twitter.com/stylesheets/screen.css?1217634962" media="screen, projection" rel="stylesheet" type="text/css" />
<link href="http://assets0.twitter.com/stylesheets/ie.css?1217634962" media="screen, projection" rel="stylesheet" type="text/css" />
<link href="http://assets3.twitter.com/stylesheets/lightwindow.css?1217634962" media="screen, projection" rel="stylesheet" type="text/css" />

<style>
	.inside {color:#666; font-size:0.8em;}
</style>

<style type="text/css">
  body {
	background: #9ae4e8 url(http://assets2.twitter.com/images/bg.gif?1217634962) fixed no-repeat top left; 
	}
  .subpage #content { 
	padding-top: 11px; 
	background: url(http://static.twitter.com/images/arr2.gif) no-repeat 25px 0px; margin-top: 6px;
	}
</style>









* { margin: 0; padding: 0; }
a { text-decoration: none; color: blue; }
a:hover { text-decoration: underline; }
ul { list-style: none; }

/* bulleted list with &raquo; */
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; }