css

html, body {
	background: white; background-image: url(/images/body_bg.png); background-repeat: repeat-y;
	color: #444;
	font: 14px "Helvetica Neue", "Helvetica", Arial, sans-serif; line-height: 21px;
}
body, .login-page, .forgot-password-page {
	width: 100%; margin: 0;
}
p {margin: 14px 0;}
h1, h2, h3, h4, h5, h6 {font-family: "Lucida Grande", "Trebuchet MS", Arial, sans-serif; font-weight: bold; color: black;}
.section-group {float: left;}
.aside {background-color: transparent;}
form.login .actions {width: auto;}
textarea.optional-markdown {width: 99%;}

.note {
	background-color: #FFF9EC; border: 1px solid #FFE5B3; border-width: 1px 0; padding: 10px 20px;
	font: bold 13px "Lucida Grande", "Trebuchet MS", Arial, sans-serif; color: #262523;
}

.page-aside {
	float: left; width: 228px; padding: 0 30px; color: white; background: none; position: relative;
}
.page-header,.content {
	margin-left: 288px; margin-top: 0;
}
.section.content {background: none;}
.content-header {margin-bottom: 0; padding: 0;}

h1.app-name {
	background-image: url(/images/app_name_bg.png);
	background-repeat: no-repeat;
	height: 99px; margin: 0 -30px;
	position: relative;
}
h1.app-name a {
	display: block; position: absolute; text-indent: -1000px; 
	width: 220px; height: 34px; top: 38px; left: 34px;
}
.page-aside a:hover {background: none; border: none;}
.page-aside .search {
	width: 224px; height: 43px; margin-top: 10px;
	background-image: url(/images/search_bg.png);
}
.page-aside .search label {display: none;}
.page-aside .search input.live-search {margin: 10px 0 0 15px; width: 160px;}
#search-results-panel {right: auto; left: 25px; top: 170px;}
#search-spinner {border: none; top: 120px; right: auto; left: 5px; background-color: #191919;}
a.view-source {
	display: block; position: absolute; top: 0; left: 0; 
	text-indent: -1000px; width: 60px; height: 35px;
	background: none; border: none;
}

.page-header {
	height: 128px; padding: 0;
	background-image: url(/images/page_header_bg.png);
	background-color: white; background-repeat: repeat-x;
}
.page-header .navigation.main-nav {width: auto; float: right; margin-right: 0;}
.page-header .navigation.main-nav li {margin-top: 35px;}
.page-header .navigation.main-nav a, .page-header .navigation.main-nav li.current a {
	background: none; color: #ddd; padding-right: 0; padding-left: 30px;
	font-size: 13px; text-shadow: black 1px 1px 1px;
}
.page-header .navigation.main-nav li.current a {color: white;}
.page-header .navigation.main-nav a:hover {background: none;}
select.dev-user-changer {left: auto; right: 0; top: 0;}
.page-header .account-nav {padding-top: 61px; bottom: 0; right: 0; margin-right: 45px; font-size: 12px; clear:right;}
.page-header .account-nav a, .page-header .account-nav a:hover {color: #888; font-weight: normal;}


.user.index-page .collection.users  { width: 100%; overflow:hidden; height:100%;}
.user.index-page .collection.users li { float: left; width:48%;margin-right:10px; }
.user.index-page .collection.users .card {  height: 80px; }


.api-taglibs h3 {margin-top: 30px;}
.tags {
	height: 100%; overflow: hidden; 
	padding: 10px 0 10px 10px; margin: 10px 0;
	background: #F9F7F3;
	border: 1px solid #E9E3D2; border-width: 1px 0;
}
.tags li {
	float: left; margin-right: 15px;
	font: 12px Courier, monospace; line-height: 28px;
}
.tags li a {background: none;}
.tags .undocumented {color: #888;}
p.show-source {margin-bottom: 0;}

.show-api-tag { margin-bottom: 60px;}
.show-api-tag .header {border-bottom:1px dotted #888}

.comments .comment {
	background-color: white; border: none;
	background-image: url(/images/comment_bg.png);
	background-position: 80px 0;
	background-repeat: no-repeat;
	min-height: 100px;
}
.card.comment a.gravatar {padding: 0; border: none;}
.card.comment .content {font-size: 12px; margin: 15px 40px 0 140px;}
.card.comment h4 {font-size: 12px; margin-bottom: 10px;}

/**************/

.preview-with-more { border: 1px dotted #999; padding: 10px; margin-bottom: 10px; position: relative;}
.preview-with-more h3 { margin-top: 0; }
.preview-with-more a.more { position: absolute; top: 9px; right: 9px;}
.aside .preview-with-more h3 { font-size: 16px; }
.show-page.user .aside .preview-with-more h3 { margin-bottom: 3px; }


.show-page .content-header h2 {margin-right: 56px;}

.front-page .users-and-questions { padding-left: 10px; width: 45%;}
.front-page .content-header h2 {font-size:28px; line-height: 28px; float: left; }
.front-page div.welcome-message {float:right; width: 355px; border: none; padding: 6px 0 0 0;}

.index-page.question .with { width: 50%; padding-right: 10px;}


.front-page .content-header {
    overflow: hidden; height: 100%; padding: 10px 20px;
    background:#EEEEEE;
    border: 1px solid #E8E8E8;
    color:#222222;
}

.preview-with-more h3 {font-size:20px; margin-bottom: 20px;}


textarea.recipe-body { margin-top: 20px; width: 100%; height: 500px; font-size:13px;}
textarea.question-description, textarea.comment-body { width: 100%;}
input.boolean { vertical-align: -15%;}

form.question label, form.recipe label {display:block; font-size: 16px; font-weight:bold;}
input.question-subject, input.recipe-name {width:100%;font-size: 20px; margin: 5px 0;}

.field-list .recipe-view {padding-right:6px;}

.answer.card .answer-body {margin: 10px 0;}

.recipe.card .timestamp { font-style: italic; font-size: 13px;}

.show-page.user .content .aside {width: 300px;}
.show-page.user .content-header, .show-page.recipe .content-header, .show-page.question .content-header
  {height:100px;}

.view.question-subject {line-height: 130%;}

.card.answer .question { margin-bottom: 10px;}
.card.answer .recipe { font-style: italic;}

a.gravatar {display: block; border: 1px solid #ccc; background: #ccc; padding: 2px; float:left; margin: 0 10px 10px 0;}
.content-header a.gravatar {margin: 0 20px 0 0;}

.edit-page.recipe ul.images li {overflow:hidden; height:100%; margin-bottom: 10px;}
.edit-page.recipe ul.images img {float:left; padding-right: 5px;}
.edit-page.recipe .delete-image-button { margin: 0; }

.recipe-body img { display: block; margin: 10px auto; border: 1px solid #444444; }

/* === Main Aside === */

.aside-content h2, .aside-content h3, .aside-content h4 {
	padding-bottom: 0.4em;
	color: white; border-bottom: 1px dotted #888;
}

.aside-content { margin: 40px 0 0 0; color: #FFC000; font-size: 14px;}
.aside-content a {background: none; color: #FFC000; color: #ddd; text-decoration: none; border: none;}
.aside-content a:hover {color: white;}

.aside-content .navigation {list-style: none; font-size: 12px; font-weight: bold;}
.aside-content .navigation li {margin: 4px 0; border-bottom: 1px dotted #444;}
.aside-content .navigation ul {list-style: none; font-size: 11px; margin: 0 0 0 5px;}
.aside-content .navigation ul li {border-color: #333;}
.aside-content .navigation ul li a {color: #FFD75C;}
.aside-content .navigation ul li a.undocumented {color: #B19640;}
.aside-content ul ul li.current a {color: #FFC000;}

/* === Manual Formatting === */

body.manual .last-update, body.tutorial .last-update {float:right; font-style: italic; font-size: 90%;}
.content .aside { background:#EEEEEE;border:1px solid #BBB; margin:20px 0px; padding:10px; width:auto;}

body.manual .content-body h1 { border-top: 1px dotted #999; margin-top: 80px; padding-top: 10px;}
body.manual .content-body h2 { margin-top: 40px;}
body.manual .content-body h3 { font-style: italic; margin-top: 30px;}
body.manual .content-body img { display: block; margin:10px auto;}

/* === Maruku Contents === */

.document-title { font-size: 30px; font-weight: bold; color: black; margin-bottom: 40px;}
.contents-heading { font-size: 20px; font-weight: bold; color: black; margin: 20px 0;}
.maruku_toc  {margin-left: 20px;}
.maruku_toc li {list-style-type: decimal; margin-top: 15px;}
.maruku_toc li li {list-style-type: lower-roman; margin-top: 5px;}
.maruku_toc li li li {list-style-type: none;}

/* === Code Highlighting === */

pre {
	background: #F9F7F3;
	border: 2px solid #E9E3D2; 
	font-size: 13px; line-height: 15px;
	margin: 10px 0 10px; padding: 10px 0 10px 10px;
    overflow: auto;
}

code {
	background: #F9F7F3;
	border: 1px solid #E9E3D2; border-width: 1px 0;
	font-size: 90%; padding: 0 0.2em;
}

pre code {
	color: #2D2D2D;
	font-weight: normal;
	border: none; background: transparent;
}

/** RUBY / JAVASCRIPT **/
code span.comment {
	color: #6D6D6D;
    font-style: italic;
}

code span.string {
	color: #0F6500;
}

code span.brackets {
	
}

code span.keywords {
	color: #B43473; font-weight: bold;
}

code span.erb {
	background: #333;
}

code span.symbol {
/* 	color: #DE352F;  */
      font-weight: bold;
}

/** DRYML **/
code span.tag {
	color: #005899; font-weight: bold;
}

code span.parameter {
	color: #52115D; font-weight: bold;
}

code span.attribute {
	color: #005899
}

code span.doctype {
	color: #D7FF80;
}
pre.dryml code span.string {
	color: #0F6500;
}
code span.paramdec {
	color: #990300; font-weight: bold;
}

pre.diff {
	background: #F0F0F0;
}

pre.diff code span.file {
     color: #000080;
  font-weight: bold;
}

pre.diff code span.add {
	background: #90E090;
}

pre.diff code span.remove {
	background: #E08080;
}

pre.diff code span.line_number {
     color: #800080;
}

p.commit {
    font-style: italic;
    font-size: 75%;
}

.command-options td, .command-options th {padding: 3px 20px 3px 0;}