/*
	Twitster - Mellow
	=================
	by Jesse Gardner, Plasticmind Design (http://plasticmind.com)
	last edit: 03/30/09
*/

body {
background: #ecedde url(/twitster/i/body.png) top center repeat-y;
border-top: solid 4px #537880;
font: 13px/1.5 "Lucida Grande", "Segoe UI", "Trebuchet MS", Arial, Helvetica, sans-serif;
color: #403033;
}
#container {
width: 720px;
margin: 0 auto;
}
#container-in {
padding: 30px 108px 0;
}
a {
color: #5b8498;
font-weight: bold;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
#page-body {
padding-top: 18px;
clear: left;
}


/* ----------------------------------------------------------------------------------- HEADER */

#header #logo {
text-align: center;
}
#header h1 {
display: block;
height: 60px;
background: transparent url(/twitster/i/tagline.png) center no-repeat;
text-indent: -9999px;
}

/* ----------------------------------------------------------------------------------- DOWNLOAD */

#download {
margin: 6px 0 36px;
}
#download a {
display: block;
height: 78px;
background: transparent url(/twitster/i/download.jpg) top no-repeat;
text-indent: -9999px;
overflow: hidden;
text-decoration: none;
}
#download a:hover {
background-position: bottom;
}
#download a span {
display: block;
text-indent: 0;
color: #fff;
position: relative;
top: 28px;
left: 245px;
font-weight: normal;
font-size: 11px;
}

/* ----------------------------------------------------------------------------------- NAV MENU */

#nav-menu li {
float: left;
background: none;
padding: 0 0 0 5px;
}
#nav-menu li a {
display: block;
text-indent: -9999px;
background: transparent url(/twitster/i/menu.png) no-repeat top left;
height: 26px;
width: 95px;
}
#nav-menu li.about a { background-position: -101px 0; }
#nav-menu li.support a { background-position: -202px 0; }
#nav-menu li.blog a { background-position: -303px 0; }
#nav-menu li.download a { background-position: -404px 0; }

#nav-menu li.home a:hover { background-position: 0 -26px; }
#nav-menu li.about a:hover { background-position: -101px -26px; }
#nav-menu li.support a:hover { background-position: -202px -26px; }
#nav-menu li.blog a:hover { background-position: -303px -26px; }
#nav-menu li.download a:hover { background-position: -404px -26px; }

#pages li {
font-size: 14px;
font-weight: bold;
text-transform: uppercase;
border-bottom: solid 1px #cacab5; 
padding-bottom: 6px;
background-position: 0 5px;
}
#pages a:hover {
text-decoration: none;
padding-left: 1px;
color: #39bdcc;
}

/* ----------------------------------------------------------------------------------- COMMON */

h2 {
font-size:20px;
font-weight: bold;
margin-bottom: 12px;
}
h3,
#comments h2 {
font-size:13px;
font-weight: bold;
padding: 20px 0 10px 0;
margin-bottom: 10px;	
text-transform: uppercase;
color: #8a8a65;
border-bottom: solid 1px #dadac5;
}
p, ul {
margin-bottom: 12px;
}
ul li {
background: transparent url(/twitster/i/bullet-plus.png) left 3px no-repeat;
padding-left: 15px;
margin-bottom: 6px;
font-size: 12px;
}
ol {
	list-style: decimal;
	list-style-position: inside;	
}

.column-left {
float: left;
width: 280px;
border-right: solid 1px #cacab5;
padding-right: 20px;
font-size: 12px;
}
.column-right {
margin-left: 320px;
}
dfn {
border-bottom: dashed 1px;
}
#about p, #about li {
  font-size: 1.1em;
line-height: 1.5em;
}
.avatar-thumb {
float: left;
margin: 0 10px 0 0;
}
.avatar-thumb img {
border: solid 1px #ecedde;
padding: 3px;
}

/* ----------------------------------------------------------------------------------- ILLUSTRATION BAR */

#illustration-bar {
margin: 40px 0 25px -60px;
}
#illustration-bar ul {
width: 624px;
height: 189px;
text-indent: -9999px;
background: transparent url(/twitster/i/illustration-bar.jpg) left no-repeat;
}
#illustration-bar li {
background: none;
}

/* ----------------------------------------------------------------------------------- SCREENSHOTS */

#screenshots li {
background: none;
padding: 0;
}
#screenshots a img {
border: solid 3px #403033;
}
#screenshots a:hover img {
border: solid 3px #537880;
}

/* ----------------------------------------------------------------------------------- FOOTER */

#footer {
clear: both;
margin-top: 120px;
text-align: center;
font-size: 11px;
}

/* ----------------------------------------------------------------------------------- BLOG */

.asset-name {
font-size: 14px;
margin: 0 0 3px 0;
padding-bottom: 6px;
}
.asset-meta {
font: 11px/1.3 Georgia, "Times New Roman", serif;
font-style: italic;
margin: 0 0 12px 0;
}
.asset-meta,
.asset-meta a {
color: #8a8a65;
}
.content-nav {
padding-top: 36px;
font-size: 12px;
text-align: right;
}
.content-nav a {
padding: 3px;
color: #8a8a65;
border: solid 1px #dadac5;
}

/* ----------------------------------------------------------------------------------- COMMENTS */

.comment {
border: solid 1px #dcdcca;
margin-bottom: 18px;
background: #eeefe1;
padding: 12px;
overflow: hidden;
font-size: 11px;
color: #555;
}
.comment p {
padding: 0 0 6px 0;
margin: 0;
}
#comments-form {
background: #eff0e2;
padding: 0 15px 15px 15px;

}
#comments-form input,
#comments-form textarea {
font: 13px/1 "Lucida Grande", "Segoe UI", "Trebuchet MS", Arial, Helvetica, sans-serif;
}
#comments-open-data {
margin: 18px 0 12px 0;
width: 190px;
overflow: hidden;
float: left;
}
#comments-open-data label {
width: 100px;
display: block;
float: left;
}
#comments-form label {
font-size: 11px;
text-transform: uppercase;
}
#comments-open-data input {
margin-bottom: 6px;
width: 170px;
}
#comment-form-remember-me {
margin-top: 4px;
}
#comment-form-remember-me label {
width: auto;
float: none;
margin: 0; padding: 0;
}
#comment-form-remember-me input {
width: auto;
float: left;
margin: 0 6px 0 0;
}
#comment-form-reply,
#comments-open-text {
clear: none;
padding-top: 15px;
}
#comments-open-text textarea {
width: 280px;
}
#comments-open-footer {
margin-top: 12px;
text-align: right;
}
blockquote {
padding: 12px 12px 1px 12px;
background: #eff0e2;
margin-bottom: 12px;
border-left: solid 1px #dadac5;
}