/* MATT
Author: Mike Kus - Carsonified
Created: 30.06.2008
Last updated: 30.06.2008 */


* { margin:0px; padding:0px;
}

body {
	background-color:#1b1b1b;
	color:#ffffff;
	background-image:url(http://assets.themattinator.com/images/presentation/background.jpg);
	background-position:top left;
	background-repeat:repeat-x;
	background-attachment:fixed;
	padding:0px 0px 50px 0px;
}

body, input, select, textarea {
	font-family:Georgia, "Times New Roman", Times, serif;
	font-size:small;
}









/* Top Container____________________________________________*/

#topWrapper {
	/*border:1px solid #00ffff;*/
	background-color:#ffffff;
	text-align:center;
	width:100%;
}

#topContainer {
	/*border:1px solid #00ff00;*/
	width:1024px;
	margin:0px auto;
	text-align:left;
	padding:8px 0px 0px 0px;
}

#tear {
	/*border:1px solid #00ffff;*/
	height:20px;
	background-image:url(http://assets.themattinator.com/images/presentation/tear_tile.gif);
	background-position:center;
	background-repeat:repeat-x;
	text-align:center;
	width:100%;
	margin:0px 0px 0px 0px;
}








/* Top Nav_____________________________________________*/

ul#topNav {
	/*border:1px solid #fff000;*/
	float:left;
	margin:0px 0px 0px 0px;
	padding:10px 0px 10px 0px;
	font-size:large;
	font-style:italic;
	letter-spacing:-1px;
	/*white-space:nowrap;*/
}

ul#topNav li {
	padding:0px 25px 0px 0px;
	margin:0px 0px 0px 0px;
	list-style-type:none;
	display:inline;
}

ul#topNav li a {
	color:#00aeef;
	text-decoration:none;
}

ul#topNav li a:hover {
	color:#ed008c;
}







/* main Container_____________________________________________*/

#mainWrapper {
    text-align:center;
	padding:0px 0px 0px 0px;
	
}

#mainContainer {
	/*border:1px solid #00ffff;*/
	width:1024px;
	margin:0px auto;
	text-align:left;
	padding:20px 0px 0px 0px;
}









/* header_____________________________________________*/

#header {
	/*border:1px solid #00ffff;*/
	width:1024px;
	padding:0px 0px 0px 0px;
	margin:0px 0px 0px 0px;
}

#howdy {
	float:right;
	padding:25px 0px 0px 0px;
}









/* Content_____________________________________________*/

#mainContent {
	padding:30px 0px 0px 0px;
	margin:0px 0px 30px 0px;
}

#contentLeft {
	width:492px;
	padding:0px 0px 0px 0px;
	margin:0px 0px 0px 0px;
	float:left;
}

#contentRight {
	width:492px;
	padding:0px 0px 0px 0px;
	margin:0px 0px 0px 0px;
	float:right;
}










/* video _____________________________________________*/

#video {
	/*border:1px solid #00ffff;*/
	height:289px;
	padding:103px 0px 0px 307px;
	margin:0px 0px 0px 0px;
	background-image:url(http://assets.themattinator.com/images/presentation/telly2.png);
	background-position:top center;
	background-repeat:no-repeat;
}



/* Image Replacement_____________________________________________*/

a#carsonifiedLogo {
	background:url(http://assets.themattinator.com/images/presentation/carsonified_logo.gif) top left no-repeat;
	width:220px;
	height:42px;
	text-indent:-9999px;
	float:right;
	padding:0px 0px 2px 0px;
}

h1#mattLogo {
	/*border:1px solid #00ffff;*/
	background:url(http://assets.themattinator.com/images/presentation/matt_logo.png) top left no-repeat;
	width:248px;
	height:191px;
	text-indent:-9999px;
	float:left;
	padding:0px 20px 0px 0px;
	margin:0px 0px 0px 0px;
}

h1.error500 {
	/*border:1px solid #00ffff;*/
	background:url(http://assets.themattinator.com/images/presentation/500_error.png) top left no-repeat;
	width:599px;
	height:377px;
	text-indent:-9999px;
	padding:0px 0px 0px 0px;
	margin:50px 0px 30px 0px;
}

a.error404 {
	/*border:1px solid #00ffff;*/
	background:url(http://assets.themattinator.com/images/presentation/404_error.png) top left no-repeat;
	width:517px;
	height:424px;
	display:block;
	text-indent:-9999px;
	padding:0px 0px 0px 0px;
	margin:50px 0px 10px 190px;
}

h2.mattMattinator {
	/*border:1px solid #00ffff;*/
	background:url(http://assets.themattinator.com/images/presentation/matt_mattinator.png) top left no-repeat;
	width:434px;
	height:336px;
	text-indent:-9999px;
	padding:0px 0px 0px 0px;
	margin:0px 0px 0px 0px;
}

h2.mattHelp {
	background:url(http://assets.themattinator.com/images/presentation/matt_help.png) top left no-repeat;
	width:433px;
	height:343px;
	text-indent:-9999px;
	padding:0px 0px 0px 0px;
	margin:0px 0px 0px 0px;
}

h2.goboAccounts {
	/*border:1px solid #00ffff;*/
	background:url(http://assets.themattinator.com/images/presentation/gobo_accounts.png) top left no-repeat;
	width:465px;
	height:333px;
	text-indent:-9999px;
	padding:0px 0px 0px 0px;
	margin:0px 0px 0px 0px;
}

h2.tweetHistory {
	/*border:1px solid #00ffff;*/
	background:url(http://assets.themattinator.com/images/presentation/history_monster.png) top left no-repeat;
	width:477px;
	height:359px;
	text-indent:-9999px;
	padding:0px 0px 0px 0px;
	margin:0px 0px 0px 0px;
}

a.postATweet {
	/*border:1px solid #00ffff;*/
	background:url(http://assets.themattinator.com/images/presentation/post_tweet_off.png) top left no-repeat;
	display:block;
	width:270px;
	height:106px;
	padding:0px 0px 0px 0px;
	margin:0px 0px 0px 0px;
}

	a.postATweet span {
		display:none;
	}

a.postATweet:hover {
	/*border:1px solid #00ffff;*/
	background:url(http://assets.themattinator.com/images/presentation/post_a_tweet_on.png) top left no-repeat;
}









/* Text Styles______________________________________________________*/

h1 {
	color:#ed008c;
	font-size:260%;
	font-style:italic;
	font-weight:normal;
	margin:0px 0px 25px 0px;
}

h2 {
	color:#00aeef;
	font-style:italic;
	font-weight:normal;
	font-size:300%;
	margin:0px 0px 25px 0px;
}

h2.under {
	color:#00aeef;
	font-style:italic;
	font-weight:normal;
	font-size:300%;
	margin:0px 0px 15px 0px;
}

h2.left {
	color:#00aeef;
	font-style:italic;
	font-weight:normal;
	font-size:300%;
	margin:0px 0px 20px 0px;
	float:left;
}

h2.login {
	display:none;
}

h2#aboutMatt {
	color:#00aeef;
	font-style:italic;
	font-weight:normal;
	font-size:140%;
	margin:25px 0px 25px 0px;
	width:350px;
	float:left;
	line-height:27px;
}

h2#aboutMatt span {
	color:#ed008c;
}

h2#aboutMatt span span {
	color:#a0d311;
}

h2.welcome {
	color:#00aeef;
	font-style:italic;
	font-weight:normal;
	font-size:200%;
	margin:0px 0px 5px 0px;
}


h3 {
	color:#00aeef;
	font-weight:normal;
	font-style:italic;
	font-size:140%;
	margin:0px 0px 25px 0px;
}

h3.alt {
	color:#ed008c;
	font-weight:normal;
	font-style:italic;
	font-size:150%;
}

h3.error {
	color:#FF0000;
	font-size:160%;
	background-image:url(http://assets.themattinator.com/images/presentation/star_head.gif);
	background-position:left;
	background-repeat:no-repeat;
	padding:20px 0px 20px 85px;
	margin:0px 0px 0px 0px;
}

span.error {
	display: block;
	padding: 10px 0;
	text-align: center;
	font-weight: bold;
	color:#FFDE00;
}

p {
	padding:0px 0px 25px 0px;
	line-height:18px
}

p span {
	font-weight:bold;
}

p.tweet {
	font-size:150%;
	line-height:24px;
	font-style:italic;
}

p span.green {
	color:#a0d311;
	font-weight:normal;
}

p.special {
	color:#ffffff;
	font-style:italic;
	font-weight:normal;
	font-size:190%;
	margin:0px 0px 25px 0px;
	line-height:35px;
}

p.special span {
	color:#a0d311;
	font-weight:normal;
}









/* LogIn ---------------------------------------------*/

#logIn {
	/*border:1px solid #00ff00;*/
	padding:57px 20px 20px 80px;
	margin:0px 0px 0px 0px;
	float:right;
	background-image:url(http://assets.themattinator.com/images/presentation/login_background2.png);
	background-position:top right;
	background-repeat:no-repeat;
}


form#frmLogIn label {
	width:85px;
	float:left;
	color:#FFFFFF;
}

form#frmLogIn input {
	margin:0px 0px 14px 0px;
	width:150px;
}

form#frmLogIn input.button {
	margin:0px 0px 0px 85px;
	width:150px;
}









/* Your tweet history---------------------------------------------*/

ul#historyList {
	margin:0px 0px 0px 0px;
	list-style-type:none;
}

ul#historyList h3 {
	color:#00aeef;
}

ul#historyList p {
	padding:0px 0px 0px 0px;
}

ul#historyList a {
	color:#ed008c;
}

ul#historyList a:hover {
	color:#ffffff;
}

ul#historyList li {
	margin:0px 0px 20px 0px;
	padding:0px 0px 20px 0px;
	border-bottom:1px dashed #00aeef;
}

ul#historyList li.last {
	margin:0px 0px 0px 0px;
	padding:0px 0px 20px 0px;
	border-bottom:none;
}

ul#historyList li span.created {
	color:#a0d311;
}

ul#historyList li span.failed {
	color:#b30000;
}

ul#historyList li span.pending {
	color:#ffe75f;
}






/* Help---------------------------------------------*/

ul#help {
	margin:0px 0px 0px 0px;
	list-style-type:none;
}

ul#help li {
	margin:0px 0px 0px 0px;
	padding:20px 0px 20px 0px;
	list-style-type:none;
	border-bottom:1px dashed #ec008c;
}

ul#help li.first{
	padding:0px 0px 20px 0px;
}

ul#help li.last {
	padding:20px 0px 20px 0px;
	border-bottom:none;
}

ul#help li h4 {
	color:#00aeef;
	padding:0px 0px 5px 0px;
	font-size:140%;
	font-weight:normal;
}

ul#help li p {
	font-size:120%;
	font-style:italic;
	padding:0px 0px 0px 0px;
}

ul#help li p span {
	color:#a0d311;
	font-weight:normal;
}








/* Tweet Page ---------------------------------------------*/


form#frmTweet label {
	color:#FFFFFF;
	font-size:150%;
	line-height:24px;
	font-style:italic;
}

form#frmTweet input {
	margin:0px 0px 14px 0px;
	width:20px;
}

form#frmTweet textarea {
	margin:0px 0px 25px 0px;
	width:470px;
	height:60px;
}

form#frmTweet input.button {
	margin:0px 0px 0px 0px;
	width:270px;
}










/* Your accounts---------------------------------------------*/

a.add {
  background:url(http://assets.themattinator.com/images/presentation/add.png) top left no-repeat;
  width:100px;
  height:64px;
  display:block;
  float:right;
  padding:0px 0px 0px 0px;
  margin:0px 0px 0px 0px;
}

a.add span {
  display: none;
}

ul#accounts {
  margin:0px 0px 25px 0px;
}

ul#accounts li {
  list-style-type:none;
  display:block;
  padding:10px 0;
  border-bottom: 1px dashed #ed008c;
  float:left;
  clear:both;
  width:100%;
}

ul#accounts li .name {
	font-size:140%;
	float:left;
	display:block;
	width:400px;
	padding:10px 0 0 0;
}

ul#accounts li .primary {
 	color:#a0d311 !important;
}

ul#accounts li a {
  background:url(http://assets.themattinator.com/images/presentation/edit.gif) top left no-repeat;
  width:56px;
  height:32px;
  display:block;
  float:left;
  padding:0px 0px 0px 0px;
  margin:0px 10px 0px 0px;
}

ul#accounts li a.delete {
  width: 74px;
  background:url(http://assets.themattinator.com/images/presentation/delete.gif) top left no-repeat;
}

ul#accounts li a span {
  display: none;
}











/* footer ------------------------------------*/

#footerWrapper {
	/*border:1px solid #00ffff;*/
	background-image:url(http://assets.themattinator.com/images/presentation/footer_new.png);
	background-position:top center;
	background-repeat:repeat-x;
	text-align:center;
	width:100%;
}

#footer {
	/*border:1px solid #00ff00;*/
	width:1024px;
	margin:0px auto;
	text-align:left;
	padding:310px 0px 0px 0px;
}

#footerError {
	/*border:1px solid #00ff00;*/
	width:1024px;
	margin:0px auto;
	text-align:left;
	padding:390px 0px 0px 0px;
}

#footer p {
	/*border:1px solid #00ff00;*/
	padding:0px 0px 0px 0px;
	margin:0px 0px 0px 0px;
}

#footer a {
	color:#ed008c;
}

#footer a:hover {
	color:#ed008c;
	color:#00aeef;
}

/* Footer nav */

#footer ul {
	width:900px;
	height:38px;
	position:relative;
	margin:0 0 40px 0;
	list-style-type:none;
}

#footer ul li a {
	color:#fff;
	height:38px;
	display:block;
	position:absolute;
	top:0;
	text-indent:-9999px;
	outline:none;
	border:none;
}

#footer ul li a:hover {
	border:none
}

li.buttonFOWA a, li.buttonFOWD a, li.buttonFOM a, li.buttonFOOA a { background:url(http://assets.themattinator.com/images/presentation/footerNav01.png) }

/*  
Measurements for the nav image replacement:

	The distance from the top to the...

	up state = 0
	rollover state = 38px

	The distance from the far-left to the...

	fowa button = 0
	fowd button = 200px
	fom button = 435px
	fooa button = 656px

	The width of the...

	fowa button = 200px
	fowd button = 235px
	fom button = 221px
	fooa button = 244px
*/

li.buttonFOWA a 			{ background-position:0 0; width:200px; left:0 }
li.buttonFOWA a:hover		{ background-position:0 -38px }

li.buttonFOWD a 			{ background-position:-200px 0; width:235px; left:200px }
li.buttonFOWD a:hover		{ background-position:-200px -38px }

li.buttonFOM a 				{ background-position:-435px 0; width:221px; left:435px }
li.buttonFOM a:hover		{ background-position:-435px -38px }

li.buttonFOOA a 			{ background-position:-656px 0; width:244px; left:656px }
li.buttonFOOA a:hover		{ background-position:-656px -38px }

#footer a.carsonifiedButton {
	background:url(http://assets.themattinator.com/images/presentation/carsonifiedLogo01.png);
	width:181px;
	height:55px;
	text-indent:-9999px;
	display:block;
	border:none;
	float:left;
	margin:0 40px 0 0 }

#footer a.carsonifiedButton:hover {
	border:none
	}









/* Links ______________________________________________*/

.aboutMattLink {
	color:#a0d311;
	text-decoration:underline;
}

.aboutMattLink:hover {
	color:#ffffff;
}









/* misc------------------------------------*/

.horzLine	{
	height:0px;
	border-bottom:1px dashed #B0C55D;
	clear:both;
	margin:0px 0px 25px 0px;
	font-size:0px;
}

img {
	border:0px;
}

.clear {
	clear:both;
}

.left {
	float:left;
}

.right {
	float:right;
}




/* Elliott's changes: replace above here with Mike's CSS --------------------------*/

textarea {
	border: none;
	padding: 5px;
	font-size: 150%;
}

#id_password, #id_username, #id_user {
  margin: 2px 0 2px 10px;
  padding: 4px 5px;
  width: 280px;
  font-size: 110%;
  color: #333;
  border: none;
}

label.login_label {
  line-height: 2;
  font-size: 120%;
}

p.tweet span {
	font-size: 80%; 
	font-weight: normal; 
	color: #999	
}

a.postATweet {
	background:url(http://assets.themattinator.com/images/presentation/post_a_tweet.png) 0 -105px no-repeat !important;
}

a.postATweet:hover {
	background-position:0 0 !important;
}

/* stop looking at my code */

ul#historyList h3 {
	color:#00aeef;
	margin-bottom: 0;
}

.magenta {
	color: #ed008c;
}

a.magenta:hover {
	color: #fff;
}

.tweetHistory {
  margin-top: 50px !important;
}

.goboAccounts {
  margin-top: 50px !important
}

a.error404 {
	text-indent:-9999px;
}

a.error404 span {
	display: none;
}

a.error_admin {
	/*border:1px solid #00ffff;*/
	background:url(http://assets.themattinator.com/images/presentation/cheeky_admin.png) top left no-repeat;
	width:667px;
	height:424px;
	display:block;
	text-indent:-9999px;
	padding:0px 0px 0px 0px;
	margin:50px 0px 10px 190px;
}