/* ==========================
   STYLESHEET FOR TWEETAG.COM
   All rights reserved.
   ========================== */


/* --- BASIC STYLES --- */

/* Text styles & colors */
@import "base.css";

/* Page dimensions */
#global {
	width: 630px;
	margin: 0 auto;
}


/* --- HEADER --- */

/* Container and logo */
#header {
	position: relative;
	height: 98px;
	padding: 1px 0;
	background: url(/meta/img/topnav-bg.png) no-repeat 625px 0;
}
#logo {
	position: absolute;
	top: 10px;
	left: 0;
	width: 315px;
	margin: 0;
	line-height: 1;
}
#logo img {
	vertical-align: middle;
}

/* Top navigation */
#topnav {
	position: absolute;
	right: 5px;
	top: 0;
	height: 25px;
	margin: 0;
	padding: 0;
	list-style: none;
	background: url(/meta/img/topnav-bg.png) no-repeat -5px 0;
}
#topnav li {
	float: left;
	height: 25px;
	margin: 0;
	padding: 0 9px 0 14px;
	line-height: 24px;
	background: url(/meta/img/bullet-lightblue.png) no-repeat 0px 10px;
}
#topnav li.first {
	padding-left: 12px;
	background: none;
}
#topnav li.last {
	padding-right: 6px;
}
#topnav a {
	padding: 5px 0;
	color: #2a82aa;
}
#topnav li.current a, #topnav a:hover,
#topnav a:focus, #topnav a:active {
	color: #454d65;
}

/* Metrics */
#metrics {
	position: absolute;
	top: 42px;
	right: 0;
	width: 288px;
	margin: 0;
	font-size: 1.45em;
	color: white;
}
#metrics .part1 {
	float: left;
	margin: 0 10px 0 0;
	padding: 0;
	background: url(/meta/img/header-metrics-bg.png) no-repeat left bottom;
}
#metrics .part1 span {
	position: relative;
	right: -5px;
	display: block;
	padding: 6px 8px 5px 3px;
	color: #111;
	background: url(/meta/img/header-metrics-bg.png) no-repeat right bottom;
}
#metrics .part2 {
	display: block;
	padding-top: 6px;
}


/* --- SEARCH AND TAGS --- */

/* Title on top */
#topmost {
	margin: 20px 0 0 0;
	padding: 9px 20px 6px 20px;
	text-align: center;
	border-bottom: 1px solid #e2e8eb;
	background: url(/meta/img/center-edges-bg.png) no-repeat;
}
#topmost h2 {
	margin: 0;
	line-height: 1.1;
	font-size: 1em;
	font-weight: normal;
	text-transform: uppercase;
	color: #82a6b8;
}
#topmost a {
	color: #111;
}
#topmost a:hover, #topmost a:focus, #topmost a:active {
	color: #c00;
}

/* Container for search and tags and nav */
#top {
	padding: 18px 20px 0 20px;
	border: 1px solid white;
	background: #f5fafd url(/meta/img/center-middle-bg.png) repeat-x;
}

/* Search */
#search {
	margin: 0 0 10px 0;
}
#search p {
	width: 100%;
	overflow: hidden;
	margin: 0;
}
#search .text {
	float: left;
	width: 472px; /* total 496 */
	height: 15px; /* total 35 */
	padding: 11px 12px 9px 12px;
	border: none;
	line-height: 15px;
	background: url(/meta/img/form-text-biggestinput-bg.png);
}
#search .button {
	float: right;
	margin-top: 1px;
}

/* Tags */
#maintags {
	margin: 18px -8px 22px -8px;
	text-align: center;
	line-height: 1.4;
}
#maintags a {
	padding: 2px 5px;
}
#maintags .l1 {font-size: 1.00em;}
#maintags .l2 {font-size: 1.40em;}
#maintags .l3 {font-size: 1.80em;}
#maintags .l4 {font-size: 2.20em;}
#maintags .l5 {font-size: 2.50em;}

/* Tab navigation */
#middletabs {
	margin: 0;
	padding: 6px 0 4px 0;
	list-style: none;
	text-align: center;
	line-height: 1;
}
#middletabs li {
	display: inline;
	margin: 0 1px;
}
#middletabs a {
	padding: 4px 8px 3px 8px;
	border: solid #e2f6fe;
	border-width: 1px 1px 0 1px;
	text-transform: uppercase;
	color: #90b8cb;
	background: #e2f6fe;
}
#middletabs .current a,
#middletabs a:hover, #middletabs a:focus, #middletabs a:active {
	padding-bottom: 4px;
	border-color: #e2e8eb;
	background: white;
	color: #888;
}
#middletabs a strong {
	margin: 0 2px 0 0;
	font-weight: normal;
	color: #688793;
}
#middletabs .current a strong,
#middletabs a:hover strong, #middletabs a:focus strong,
#middletabs a:active strong {
	color: #111;
}


/* --- USER LOGIN, POSTING, ETC. --- */

/* Container */
#user {
	padding: 35px 20px 5px 78px;
	border-top: 1px solid #e2e8eb;
	background: white;
}
#user .userpic {
	float: left;
	margin: 3px 0 0 -58px;
}
#user .message {
	width: 100%;
	overflow: hidden;
}
#user .message h2 {
	float: left;
	margin: 0;
	padding: 0 0 0 2px;
	font-size: 1em;
	color: #777;
}
#user .message h2 strong {
	color: #111;
}
#user .message p {
	float: right;
	margin: 0;
	color: #777;
}
#user .message .warning {
	color: #c00;
}

/* Login form */
#login {
	width: 100%;
	overflow: hidden;
	padding: 3px 0 7px 0;
}
#login .username {
	float: left;
	width: 214px;
	margin: 0 10px 0 0;
}
#login .password {
	float: left;
	width: 214px;
	margin: 0;
}
#login .username input, #login .password input {
	width: 190px; /* total 214 */
	height: 15px; /* total 35 */
	padding: 11px 12px 9px 12px;
	border: none;
	line-height: 15px;
	background: url(/meta/img/form-text-medinput-bg.png);
}
#login .send {
	float: right;
	margin: 0;
}

/* Posting form */
#post {
	width: 100%;
	overflow: hidden;
	padding: 3px 0 5px 0;
}
#post.disabled {
	opacity: .4;
	filter: alpha(opacity=40);
}
#post .tweet {
	float: left;
	margin: 0;
}
#post .tweet input {
	width: 414px; /* total 438 */
	height: 15px; /* total 35 */
	padding: 11px 12px 9px 12px;
	border: none;
	line-height: 15px;
	background: url(/meta/img/form-text-biginput-bg.png);
}
#post .send {
	float: right;
	margin: 0;
}


/* --- LIST OF RECENT TWEETS --- */

#activity {
	zoom: 1;
	padding: 5px 0 5px 0;
	background: white;
	line-height: 1.3;
}
#activity .tweet {
	position: relative;
	height: 1%;
	overflow: hidden;
	padding: 10px 120px 10px 80px;
}
#activity.enabled .tweet:hover,
#activity.enabled .tweet-hover {
	background: #EFF8FC;
}
#activity .userpic {
	float: left;
	margin: 0 0 0 -60px;
}
#activity h3 {
	display: inline;
	margin: 0 2px 0 0;
	font-size: 1em;
}
#activity .content {
	display: inline;
	color: #111;
}
#activity .meta {
	margin: 0;
	color: #888;
}
#activity .reply {
	position: absolute;
	top: 50%;
	right: 20px;
	width: 75px;
	margin: -18px 0 0 0;
	text-align: right;
}
#activity .reply a {
	display: block;
	width: 100%;
	opacity: 0.4;
	filter: alpha(opacity=40); 
	-webkit-transition: opacity .4s ease-out;
}
#activity .reply a:focus,
#activity .reply a:active,
#activity .tweet:hover .reply a,
#activity .tweet-hover .reply a  {
	opacity: 1;
	filter: alpha(opacity=100);
}
#activity .reply {
	padding:0;
	margin-top:-30px;
}
#activity .reply img {
	display:block;
	float:left;
	margin:1px;
}


/* --- BOTTOM PART --- */

#bottom {
	padding: 3px 22px 3px 22px;
	border-top: 1px solid #ebf1f4;
	background: #fafafa url(/meta/img/center-edges-bg.png) repeat-x left bottom;
}
#bottom p {
	margin: 0;
}
#bottom a {
	padding: 3px 14px 3px 10px;
	background: url(/meta/img/arrow-small-bottom-left.png) no-repeat left center;
}


/* --- FOOTER --- */

#footer {
	height: 85px; /* total 105 */
	padding: 35px 21px 0 320px;
	font-size: .95em;
	text-align: right;
	color: #84abba;
	background: url(/meta/img/footer-logo.png) no-repeat 14px 27px;
}
#footer p {
	margin: 0;
}

/* --- Xav styles ----- */
div.loading {
	background:transparent url('/img/wait2.gif') no-repeat center;
}

div#tagcloud_loading {
	margin:21px;
	height:115px;
}

div#atoms_loading {
	background:white url('/img/wait2.gif') no-repeat center;
	width:629px;
	height:200px;
	padding:5;
}

a.stbutton {
	float:right;
	position:relative;
	top:-4px;
}