/* @override http://localhost:4567/stylesheets/layout.css */

/*	TYPOGRAPHY
=============================================================================*/

body {
  color: #261F19;
  font: 13px/1.4 "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;;
  text-shadow: #fff 1px 1px 1px; }

h1,h2,h3,h4,h5,h6 { font-weight: normal; color: #333; clear: both; }
h1 { font-size: 20px; font-weight: bold; line-height: 1; margin-bottom: 0.5em; }
h2 { font-size: 18px; margin-bottom: 0.5em; }
h3 { font-size: 1.25em; margin-bottom: 1em; }

p           { margin: 0 0 .8em; }

a:focus, 
a:hover     { color: #267799; border-bottom: 1px dotted; }
a           { color: #267799; text-decoration: none; outline: none; }



/*	LAYOUT
=============================================================================*/


html { height: 100%; }
body { background: #d7e9ee url(/images/bg_gradient.png) repeat-x -50% 0; height: 100%; text-align: center; }

#page_container { position: relative; min-height: 100%; }
#container { width: 940px; margin: 0 auto; overflow: auto; text-align: left; }


#header { width: 100%; height: 187px; margin-bottom: 20px; background: transparent url(/images/wire.png) no-repeat 50% 0; }
#logo { width: 940px; height: 180px; margin: 0 auto; text-indent: -5000px; position: relative; }

	#logo a.home { display: block; position: absolute; top: 20px; left: 70px; width: 280px; height: 50px; }
	#logo a.terralien { display: block; position: absolute; top: 70px; left: 235px; width: 85px; height: 20px; }
	#logo a:hover {	border-bottom: none; }

#footer { width: 100%; background: transparent url(/images/footer_buildings.png) repeat-x -100% 100%; position: relative; height: 235px; margin-top: -235px; clear: both; }

.call_terralien { clear: both; width: 740px; margin: 0 100px; font-style: italic; text-align: center; color: #4a707f; padding: 25px 0 255px; }


#content { float: left; width: 510px; margin-left: 80px; }


form { }

	form ol { list-style: none; margin: 0; }
	form li { margin-bottom: 6px; }
	input.text { font-size: 13px; height: 2em; padding: 3px; margin: 0; }
	input.text.default { color: #B4A298; }
	textarea { width: 100%; height: 6em; margin-bottom: 1.5em; }
	.error { color: #7b1e27; }


form.build { float: left; width: 226px; margin-right: 14px; }

	.build h2 { height: 23px; background: transparent url(/images/enter_twitter_names.png) no-repeat 0 0; text-indent: -5000px; margin: 0 0 3px -20px; position: relative; }
	.build input.text { width: 100%; }
	.build input.submit { margin-top: 5px; }
	
	#user_input_prototype { display: none; }
	#more_users { display: none; font-weight: bold; font-size: 14px; margin-left: 5px; }


.tips { float: right; width: 260px; margin-top: 9px; background: transparent url(/images/tips_top.png) no-repeat 0 0; }

	.tips p { margin: 25px 80px 15px 15px; font-style: italic; color: #5d783d; }
	.tips form { position: relative; top: 14px; background: transparent url(/images/tips_bot.png) no-repeat 0 100%; padding-bottom: 18px; }
	.tips fieldset { margin-top: -18px; }
	.tips input.text { margin: 0 0 0 15px; width: 190px;}
	

#preview { float: right; width: 331px; text-shadow: none; color: #425b65; background: transparent url(/images/roster_bot.png) no-repeat 0 100%; margin-top: 59px; }

	#preview h2 { height: 59px; background: transparent url(/images/preview_top.png) no-repeat 0 0; margin: 0; text-indent: -5000px; margin-top: -59px; position: relative; }
	#preview.created_by h2 	{ background-image: url(/images/brought_to_you_bird.png); }
	
	#preview #twitroster, #preview p { padding: 0 55px 0 40px; font-size: 12px; }
	#preview p { margin-bottom: 1em; }
	#preview small { font-size: 11px; font-style: italic; }
	#preview #twitroster ul { width: 100%; margin-bottom: 1.5em; }
	#preview .username { display: none; }
	#preview .name a { color: inherit; }


#twitroster ul { list-style: none; margin: 0 0 1em 0; }

	#twitroster li { margin-bottom: 1em; position: relative; width: 100%; }
	#twitroster .avatar { position: absolute; }
	#twitroster .name,
	#twitroster .username { font-weight: bold; }
	#twitroster .name,
	#twitroster .username,
	#twitroster .tweets { padding-left: 60px; }
	#twitroster a:hover { border-bottom: 1px dotted; }
	#twitroster .avatar a:hover { border-bottom: none; }
	

h2.copy_this { background: transparent url(/images/copy_this.png) no-repeat 0 0; text-indent: -5000px; height: 19px; margin: 0 0 3px -10px; position: relative; }
h2.and_this { background: transparent url(/images/and_this.png) no-repeat 0 0; text-indent: -5000px; height: 19px; margin: 0 0 3px -10px; position: relative;}

.btn_makeanother { display: block; background: transparent url(/images/make_another.png) no-repeat 0 0; width: 226px; height: 39px; text-indent: -5000px; }
.btn_makeanother:hover { border-bottom: none; }