/*
-----------------------------------------------
Site: Too Much Tweet
Author: Tom Fadial
Name: Base CSS
----------------------------------------------- */


/* Global
----------------------------------------------- */
html, body, .wrapper {height: 100%;}
html {background: #2896e7 url(../images/template/html_bg.png) top repeat-x;}
body {
	margin: 0; padding: 0;
	border: 0;
	color: #fff;
	font: 12px/1.5 Helvetica, Arial, Verdana, sans-serif;
	background: url(../images/template/clouds_bg.png) top repeat-x;
}

p {margin: 1em 0;}

a {color: #b3ddff;}
a:hover {text-decoration: none;}

hr {display: none;}


/* Structure
----------------------------------------------- */
#page {
	background: url(../images/template/glow_bg.png) center -100px no-repeat;
	position: relative;
	min-width: 800px; min-height: 100%;
}
	.wrapper.one {background: url(../images/template/banner_clouds_bg.png) top center no-repeat;}

	#header {
		padding: 55px 0 40px 0;
	}
		#header .bar {top: 0;}
	#banner {
		background: url(../images/template/banner_border_bg.png) top repeat-x;
		position: relative;
		clear: both;
	}
		#banner .wrapper.one {background: url(../images/template/banner_content_bg.png) bottom center no-repeat;}
		#banner .content {
			padding: 10px 20px;
			position: relative;
			background: url(../images/template/banner_border_bg.png) bottom repeat-x;
		}
	#content {padding-bottom: 20px;}
	#footer {
		width: 100%;
		position: absolute;
		bottom: 0;
	}
		#footer .bar {bottom: 0;}

	.page_area {margin: 0 auto; width: 660px;}


.clear:after,
.clearsub li:after,
#header:after,
#content:after {
	content: "."; 
	display: block; 
	height: 0; 
	clear: both; 
	visibility: hidden;
}


/* Headlines
----------------------------------------------- */
h1, h2, h3, h4, h5, h6 {margin: 1em 0;}

h1 {}
h2 {font-size: 1.5em;}
h3 {font-size: 1.3em;}
h4 {font-size: 1.1em;}
h5 {font-size: 1em;}

#header {}
	#header h1 {
		width: 268px; height: 72px;
		background: url(../images/headlines/h1_logo_bg.png);
		float: left;
	}
		#header h1 a {width: 268px; height: 72px;}
	#header p.tagline {
		margin: 20px 0 0 0;
		width: 189px; height: 33px;
		background: url(../images/headlines/p_tagline_bg.png);
		float: right;
	}

#banner {}
	#banner h2 {height: 26px;}
		#banner h2.gethelp {background-image: url(../images/headlines/h2_gethelp_bg.png);}
		#banner h2.givehelp {background-image: url(../images/headlines/h2_givehelp_bg.png);}
		
	#banner h3 {font-size: 13px;}

#content #reply.content h3 {height: 21px; margin-bottom: 4px;}
	#content #reply.content h3.givehelp {background-image: url(../images/headlines/h3_givehelp_bg.png);}


.replace,
#header h1,
.bar .content .tab {
	margin: 0; padding: 0;
	font-size: 1px;
	line-height: 1;
	text-indent: -9999px;
	background-repeat: no-repeat;
	overflow: hidden;
}
	.replace a,
	#header h1 a,
	.bar .content .tab {
		display: block;
		overflow: hidden;
	}


/* Corners
----------------------------------------------- */
.corner_container {position: relative;}
	.corner {
		width: 10px; height: 10px;
		position: absolute;
	}

	.top {top: 0;}
	.bottom {bottom: 0;}
	.left {left: 0;}
	.right {right: 0;}


	.corner {}
		.top.left {background: url(../images/template/corners/content_r10/top_left.png);}
		.top.right {background: url(../images/template/corners/content_r10/top_right.png);}
		.bottom.left {background: url(../images/template/corners/content_r10/bottom_left.png);}
		.bottom.right {background: url(../images/template/corners/content_r10/bottom_right.png);}

	.navigate .corner {width: 5px; height: 5px;}
		.navigate .top.left {background: url(../images/template/corners/content_r5/top_left.png);}
		.navigate .top.right {background: url(../images/template/corners/content_r5/top_right.png);}
		.navigate .bottom.left {background: url(../images/template/corners/content_r5/bottom_left.png);}
		.navigate .bottom.right {background: url(../images/template/corners/content_r5/bottom_right.png);}


/* Bar
----------------------------------------------- */
.bar {
	padding: 0 0 18px 0;
	position: absolute;
	left: 0;
	width: 100%;
	background-repeat: repeat-x
}
	.bar .content {
		margin: 0 auto;
		width: 660px;
		position: relative;
	}
		.bar .content .tab {
			width: 110px; height: 34px;
			position: absolute;
			right: 0;
		}
		.bar .content ul {
			margin: 0; padding: 0;
			list-style-type: none;
			display: none;
		}

	#header .bar {
		background-position: bottom;
		background-image: url(../images/template/top_bar_bg.png);
	}
		#header .bar .content .tab {
			bottom: -34px;
			background-image: url(../images/template/top_bar_tab_bg.png);
		}
	#footer .bar {
		position: static;
		background-position: top;
		background-image: url(../images/template/bottom_bar_bg.png);
	}
		#footer .bar .content .tab {
			top: -14px;
			background-image: url(../images/template/bottom_bar_tab_bg.png);
		}



/* Banner
----------------------------------------------- */
#banner {}
	#banner .content {}
		#banner .content .column {
			width: 300px;
			float: left;
		}
		#banner .content .column.one {padding-right: 20px;}
		#banner .content .column.two {}

	#banner ol {
		margin: 0; padding: 10px 0 10px 18px;
	}
		#banner ol li {
			padding: 0 0 7px 0;
			font-size: 13px;
			font-weight: bold;
		}
			#banner ol li h3 {
				margin: 0 0 2px 0;
			}
			#banner ol li p {
				margin: 0;
				font-size: 12px;
				font-weight: normal;
				line-height: 1.2;
			}

	#banner .more {}
		#banner .more a {
			width: 91px; height: 25px;
			background-image: url(../images/template/follow_button_bg.png);
			position: absolute;
			top: 13px; right: 0;
		}


/* Content
----------------------------------------------- */
#content {}
	#content ul.tweets {
		margin: 0; padding: 0;
		list-style-type: none;
		clear: both;
	}
		#content ul.tweets li {
			margin-bottom: 20px;
			position: relative;
			clear: both;
		}
			#content ul.tweets li .profile_image {
				padding: 3px 47px 11px 3px;
				width: 50px; height: 50px;
				float: left;
				background: url(../images/template/profile_image_bg.png);
			}
				#content ul.tweets li .profile_image img {width: 50px; height: 50px; border: 0;}
			#content ul.tweets li .content {
				width: 560px;
				position: relative;
				float: right;
				background-color: #1477c0;
			}
				#content ul.tweets li .content p.tweet_content {
					margin: 0; padding: 16px 18px 12px 18px;
					font-size: 16px;
					line-height: 1.3;
				}
				#content ul.tweets li .content dl.tweet_meta {
					margin: 0; padding: 1px 0 0 0;
					position: relative;
					background: #0a6bb2 url(../images/template/meta_border_bg.png) top repeat-x;
					font-size: 11px;
					font-weight: bold;
				}
					#content ul.tweets li .content dl.tweet_meta dt {display: none;}
					#content ul.tweets li .content dl.tweet_meta dd {
						margin: 0; padding: 1px 7px 0 5px;
						float: left;
						background: url(../images/template/tweet_meta_sep_bg.png) center right no-repeat;
					}
					#content ul.tweets li .content dl.tweet_meta dd.help_link {padding: 0;}
						#content ul.tweets li .content dl.tweet_meta dd.help_link a {
							width: 85px; height: 19px;
							display: block;
							background: #005da1 url(../images/template/meta_help_bg.png) no-repeat;
						}
						#content ul.tweets li .content dl.tweet_meta dd.help_link a:hover {background-color: #005796;}
					#content ul.tweets li .content dl.tweet_meta dd.topic {
						padding: 0 0 0 7px;
						height: 14px;
						position: absolute;
						bottom: -7px; right: 10px;
						z-index: 10;
						color: #005da1;
						font-size: 10px; line-height: 1;
						font-weight: bold;
						background: url(../images/template/meta_topic_left_bg.png) no-repeat;
					}
						#content ul.tweets li .content dl.tweet_meta dd.topic span {
							padding: 1px 8px 1px 5px;
							display: block;
							height: 12px;
							background: url(../images/template/meta_topic_right_bg.png) right no-repeat;
						}

					#content ul.tweets li .content dl.tweet_meta dd.last {background: none;}
						#content ul.tweets li .content dl.tweet_meta dd a {color: #fff; text-decoration: underline;}
						#content ul.tweets li .content dl.tweet_meta dd a:hover {text-decoration: none;}

	#content .navigate {
		margin: 20px 0; padding: 3px 6px;
		float: right;
		position: relative;
		background-color: #1477c0;
	}
		#content .navigate.topic {}
		#content .navigate.pagination {
			font-size: 10px;
			font-weight: bold;
		}
			#content .navigate.pagination a,
			#content .navigate.pagination span {
				padding: 2px;
				color: #fff;
			}
			#content .navigate.pagination a {text-decoration: underline;}
			#content .navigate.pagination a:hover {text-decoration: none;}
			#content .navigate.pagination .prev_page {padding-left: 7px; background: url(../images/template/pag_prev_bg.png) left center no-repeat;}
			#content .navigate.pagination .next_page {padding-right: 7px; background: url(../images/template/pag_next_bg.png) right center no-repeat;}
			#content .navigate.pagination .disabled,
			#content .navigate.pagination .current {opacity: 0.5;}


	#content .loading {
		margin: 30px auto; padding: 6px 35px 5px 20px;
		width: 60px;
		position: relative;
		background-color: #1477c0;
		text-align: center;
	}
		#content .loading span {
			padding: 3px 0 3px 23px;
			background: url(../images/template/loading_spinner_bg.gif) left center no-repeat;
		}



/* Popup
----------------------------------------------- */
#TB_overlay {
	width: 100%; height: 100%;
	position: fixed;
	top: 0; left: 0;
	z-index: 100;
}
	.TB_overlayMacFFBGHack {background: url(../images/template/overlay_bg.png) repeat;}
	.TB_overlayBG {
		background-color: #000;
		filter:alpha(opacity=75);
		-moz-opacity: 0.75;
		opacity: 0.75;
	}

#TB_load,
#TB_window {
	position: absolute;
	left: 160px;
	z-index: 102;
	width: 461px;
}

#TB_load {text-align: center; top: 20px;}
#TB_window {display: none; bottom: -118px;}
	#TB_window #TB_title {float: right;}
		#TB_window #TB_title #TB_closeWindowButton {
			display: block;
			width: 29px; height: 29px;
			text-indent: -9999px;
			overflow: hidden;
			position: absolute;
			top: 5px; right: 15px;
			z-index: 10;
			background: url(../images/template/popup_close_bg.png) no-repeat;
		}
	#TB_window #TB_ajaxContent {}
		#TB_window #TB_ajaxContent .content {
			width: 332px;
			float: none;
			padding: 49px 60px 17px 69px;
			background: transparent url(../images/template/popup_top_bg.png) top no-repeat;
		}
			#content #reply.content .errors {
				margin: 5px 0; padding: 0 0 0 10px;
				list-style-type: disc;
			}
				#content #reply.content .errors li {margin: 0; position: static;}
			#content #reply.content .textarea {
				position: relative;
				width: 332px; height: 70px;
				line-height: 1.2;
			}
				#content #reply.content .textarea span.username {
					position: absolute;
					top: 5px; left: 5px;
					z-index: 10;
					display: block;
					font-size: 12px;
					color: #999;
				}
				#content #reply.content .textarea textarea {
					position: absolute;
					z-index: 1;
					text-indent: 60px;
				}
				#content #reply.content .textarea .counter {
					padding: 2px 6px 1px 6px;
					position: absolute;
					bottom: 1px; right: 1px;
					z-index: 10;
					background-color: #1f88d5;
					color: #fff;
					font-size: 10px;
					font-weight: bold;
				}
					#content #reply.content .textarea .counter.over {background-color: #d51f1f;}
			#TB_window #TB_ajaxContent .content .human_check {visibility: hidden; position: absolute;}
			#TB_window #TB_ajaxContent .content input#post_submit,
			#TB_window #TB_ajaxContent .content .loading_img {
				margin-top: 8px;
				height: 16px;
				float: right;
			}

			#TB_window #TB_ajaxContent .content .loading .corner {display: none;}

		#TB_window #TB_ajaxContent .bottom {
			width: 461px; height: 46px;
			background: url(../images/template/popup_bottom_bg.png) top no-repeat;
		}

#reply {padding: 15px 0;}


/* Footer
----------------------------------------------- */
#footer {
	height: 19px;
	background: url(../images/template/bottom_bar_bg.png) top repeat-x;
}



/* Forms
----------------------------------------------- */
form {
	margin: 0; padding: 0;
	font-size: 11px;
}
	form fieldset {
		margin: 0; padding: 0;
		border: 0;
	}
	form input:focus,
	form textarea:focus {outline: 0;}

.navigate form {}
	.navigate.topic {}
		.navigate.topic label {font-weight: bold;}
			.navigate.topic label span {padding: 0 2px 0 3px;}
		.navigate.topic select {font-size: 10px;}

#content #reply.content form {}
	#content #reply.content form textarea {
		margin: 0; padding: 4px;
		width: 322px; height: 60px;
		font: 12px Helvetica, Arial, Verdana, sans-serif;
		background: url(../images/template/input_bg.png) -1px -1px no-repeat;
		border: 1px solid #fff;
	}
	#content #reply.content form input {margin: 0;}