test.css

.CodeRay {
  background-color: #f8f8f8;
  border: 1px solid silver;
  font-family: 'Courier New', 'Terminal', monospace;
  color: #000;
}
.CodeRay pre { margin: 0px }

div.CodeRay { }

span.CodeRay { white-space: pre; border: 0px; padding: 2px }

table.CodeRay { border-collapse: collapse; width: 100%; padding: 2px }
table.CodeRay td { padding: 2px 4px; vertical-align: top }

.CodeRay .line_numbers, .CodeRay .no {
  background-color: #def;
  color: gray;
  text-align: right;
}
.CodeRay .line_numbers tt { font-weight: bold }
.CodeRay .no { padding: 0px 4px }
.CodeRay .code { width: 100% }

ol.CodeRay { font-size: 10pt }
ol.CodeRay li { white-space: pre }

.CodeRay .code pre { overflow: auto }

.CodeRay .debug { color:white ! important; background:blue ! important; }

.CodeRay .af { color:#00C }
.CodeRay .an { color:#007 }
.CodeRay .at { color:#f08 }
.CodeRay .av { color:#700 }
.CodeRay .aw { color:#C00 }
.CodeRay .bi { color:#509; font-weight:bold }
.CodeRay .c  { color:#888; }

.CodeRay .ch { color:#04D }
.CodeRay .ch .k { color:#04D }
.CodeRay .ch .dl { color:#039 }

.CodeRay .cl { color:#B06; font-weight:bold }
.CodeRay .co { color:#036; font-weight:bold }
.CodeRay .cr { color:#0A0 }
.CodeRay .cv { color:#369 }
.CodeRay .df { color:#099; font-weight:bold }
.CodeRay .di { color:#088; font-weight:bold }
.CodeRay .dl { color:black }
.CodeRay .do { color:#970 }
.CodeRay .dt { color:#34b }
.CodeRay .ds { color:#D42; font-weight:bold }
.CodeRay .e  { color:#666; font-weight:bold }
.CodeRay .en { color:#800; font-weight:bold }
.CodeRay .er { color:#F00; background-color:#FAA }
.CodeRay .ex { color:#F00; font-weight:bold }
.CodeRay .fl { color:#60E; font-weight:bold }
.CodeRay .fu { color:#06B; font-weight:bold }
.CodeRay .gv { color:#d70; font-weight:bold }
.CodeRay .hx { color:#058; font-weight:bold }
.CodeRay .i  { color:#00D; font-weight:bold }
.CodeRay .ic { color:#B44; font-weight:bold }

.CodeRay .il { background: #eee; color: black }
.CodeRay .il .il { background: #ddd }
.CodeRay .il .il .il { background: #ccc }
.CodeRay .il .idl { font-weight: bold; color: #777 }

.CodeRay .im { color:#f00; }
.CodeRay .in { color:#B2B; font-weight:bold }
.CodeRay .iv { color:#33B }
.CodeRay .la { color:#970; font-weight:bold }
.CodeRay .lv { color:#963 }
.CodeRay .oc { color:#40E; font-weight:bold }
.CodeRay .of { color:#000; font-weight:bold }
.CodeRay .op { }
.CodeRay .pc { color:#038; font-weight:bold }
.CodeRay .pd { color:#369; font-weight:bold }
.CodeRay .pp { color:#579; }
.CodeRay .ps { color:#00C; font-weight: bold; }
.CodeRay .pt { color:#349; font-weight:bold }
.CodeRay .r, .kw  { color:#080; font-weight:bold }

.CodeRay .ke { color: #808; }
.CodeRay .ke .dl { color: #606; }
.CodeRay .ke .ch { color: #80f; }
.CodeRay .vl { color: #088; }

.CodeRay .rx { background-color:#fff0ff }
.CodeRay .rx .k { color:#808 }
.CodeRay .rx .dl { color:#404 }
.CodeRay .rx .mod { color:#C2C }
.CodeRay .rx .fu  { color:#404; font-weight: bold }

.CodeRay .s { background-color:#fff0f0; color: #D20; }
.CodeRay .s .s { background-color:#ffe0e0 }
.CodeRay .s .s  .s { background-color:#ffd0d0 }
.CodeRay .s .k { }
.CodeRay .s .ch { color: #b0b; }
.CodeRay .s .dl { color: #710; }

.CodeRay .sh { background-color:#f0fff0; color:#2B2 }
.CodeRay .sh .k { }
.CodeRay .sh .dl { color:#161 }

.CodeRay .sy { color:#A60 }
.CodeRay .sy .k { color:#A60 }
.CodeRay .sy .dl { color:#630 }

.CodeRay .ta { color:#070 }
.CodeRay .tf { color:#070; font-weight:bold }
.CodeRay .ts { color:#D70; font-weight:bold }
.CodeRay .ty { color:#339; font-weight:bold }
.CodeRay .v  { color:#036 }
.CodeRay .xt { color:#444 }

.CodeRay .ins { background: #afa; }
.CodeRay .del { background: #faa; }
.CodeRay .chg { color: #aaf; background: #007; }
.CodeRay .head { color: #f8f; background: #505 }

.CodeRay .ins .ins { color: #080; font-weight:bold }
.CodeRay .del .del { color: #800; font-weight:bold }
.CodeRay .chg .chg { color: #66f; }
.CodeRay .head .head { color: #f4f; }
/*
Designed by http://www.dreamtemplate.com
*/
body { margin:0; padding:0; width:100%; color:#474747; font:normal 15px/1.8em "Liberation sans", Arial, Helvetica, sans-serif; background:#f1f1f1 url(/images/akitaonrails/main_bg.gif) repeat-x center top;}
html, .main { padding:0; margin:0;}
.main { background:url(/images/akitaonrails/header_bg.gif) no-repeat center top;}
.clr { clear:both; padding:0; margin:0; width:100%; font-size:0px; line-height:0px;}
.logo { padding:0; width:auto; float:left;}
h1 { margin:0; padding:50px 0 24px; color:#fff; font:normal 36px/1.2em "Liberation sans", Arial, Helvetica, sans-serif; letter-spacing:-2px;}
h1 a, h1 a:hover { color:#fff; text-decoration:none;}
h1 small { font:normal 12px/1.2em "Liberation sans", Arial, Helvetica, sans-serif; letter-spacing:normal; color:#fff;}
h2 { font:normal 24px/1.5em "Liberation sans", Arial, Helvetica, sans-serif; padding:8px 0 0; margin:8px 0 0; color:#555;}
h2 a { text-decoration: none }
p { margin:8px 0; padding:0 0 8px 0; font:normal 15px/1.8em "Liberation sans", Arial, Helvetica, sans-serif;}
a { color:#850225; text-decoration:underline;}
p.spec { padding:0;}
p.infopost { margin-bottom:12px; padding:8px 0 16px; border-bottom:1px solid #c9c9c9;}
a.rm { color:#fff; padding:6px 16px; text-decoration:underline; font-weight:bold; background-color:#181818;}
a.com { margin:0; padding:18px 12px 0 0; text-decoration:none; color:#fff; float:right; font-size:24px;}
a.com span { }
.dsq-brlink { font:normal 12px/1.2em "Liberation sans", Arial, Helvetica, sans-serif; letter-spacing:normal; }

/* Hype */
.HYPE_scene { background: url(/images/akitaonrails/banner_bg.gif) repeat-x center top; }
#akitaonrailsbanner_hype_container { margin:80px 0 32px; padding:0; }

.header, .content, .menu_nav, .fbg, .footer, form, ol, ol li, ul, .content .mainbar, .content .sidebar { margin:0; padding:0;}

/* header */
.header { }
.header_resize { margin:0 auto; padding:0; width:960px;}
img.hbg_img { margin:80px 0 32px; padding:0;}

/* menu */
.menu_nav { float:right; margin:0 auto; padding:54px 24px 16px; float:right;}
.menu_nav ul { list-style:none; padding:0; height:33px; float:left;}
.menu_nav ul li { margin:0; padding:0 8px 0 0; float:left;}
.menu_nav ul li a { display:block; margin:0; padding:8px 20px; color:#fff; text-decoration:none; font-size:13px; border:1px solid transparent;}
.menu_nav ul li.active a, .menu_nav ul li a:hover { color:#3c3c3c; background:#f00 url(/images/akitaonrails/menu_a.gif) repeat-x center top; border:1px solid #fff;}

/* content */
.content { }
.content_resize { margin:0 auto 24px; padding:0; width:960px;}
.content .mainbar { margin:0; padding:0; float:left; width:660px;}
.content .mainbar h2 { padding:8px 12px; background-color:#850225; color:#fff;}
.content .mainbar img { border:1px solid #d4d4d4; background-color:#fff; padding:6px;}
.content .mainbar img.fl { margin:4px 16px 4px 0; float:left;}
.content .mainbar .article { margin:0 0 24px; padding:8px 24px 16px 24px;}
.content .mainbar img { max-width: 600px; }
.content .mainbar ul { margin-left: 1em; }
.content .sidebar { padding:0; float:right; width:280px;}
.content .sidebar .gadget { margin:0 0 12px; padding:8px 16px 8px 24px;}
ul.sb_menu, ul.ex_menu { margin:0; padding:0; list-style:none; color:#959595;}
ul.sb_menu li, ul.ex_menu li { margin:0;}
ul.sb_menu li { padding:4px 0; width:220px;}
ul.ex_menu li { padding:4px 0;}
ul.sb_menu li a, ul.ex_menu li a { color:#555; text-decoration:none; margin-left:-16px; padding:4px 8px 4px 16px; background:url(/images/akitaonrails/li.gif) no-repeat left center;}
ul.sb_menu li a:hover, ul.ex_menu li a:hover { color:#850225; font-weight:bold; text-decoration:none;}
.content p.pages { margin:0 24px; padding:0 0 24px; font-size:11px; color:#555; text-align:right;}
.content p.pages span, .content p.pages a:hover { padding:8px 10px; color:#fff; background-color:#850225;}
.content p.pages a { padding:8px 10px; color:#fff; background-color:#181818; text-decoration:none;}
.content p.pages small { font-size:12px; float:left;}

/* subpages */
.content .mainbar .comment { margin:0; padding:16px 0 0 0;}
.content .mainbar .comment img.userpic { border:1px solid #dedede; margin:10px 16px 0 0; padding:0; float:left;}

/* fbg */
.fbg { background-color:#d5d5d5;}
.fbg_resize { margin:0 auto; width:912px; padding:32px 24px;}
.fbg .c2 a, .fbg .c3 a { margin:0; padding:2px 4px; text-decoration:underline; color:#474747;}
.fbg  h2 { padding-bottom:12px;}
.fbg img { margin:0 16px 16px 0; padding:3px; background-color:#fff; border:1px solid #99bece;}
.fbg .col { margin:0; float:left;}
.fbg .c1 { padding:0 16px 0 0; width:266px;}
.fbg .c2 { padding:0 16px; width:290px;}
.fbg .c3 { padding:0 0 0 16px; width:260px;}

/* footer */
.footer { background-color:#5d5d5d;}
.footer_resize { margin:0 auto; padding:12px 24px; width:912px; color:#fff;}
.footer p.lf { margin:0; padding:24px 0; text-align:left; width:auto; line-height:1.5em;}
.footer p.lf a { color:#fff;}
.footer p.lf span { float:right;}

/* form */
ol { list-style:none;}
ol li { display:block; clear:both;}
ol li label { display:block; margin:0; padding:16px 0 0 0;}
ol li input.text { width:480px; border:1px solid #c0c0c0; margin:0; padding:5px 2px; height:16px; background-color:#fff;}
ol li textarea { width:480px; border:1px solid #c0c0c0; margin:0; padding:2px; background-color:#fff;}
ol li .send { margin:16px 0 0 0;}

/* search */
.searchform { float:left; padding:0;}
#formsearch { margin:0; height:36px; padding:16px 0 24px 24px; width:232px;}
#formsearch span { display:block; margin:0; padding:0; float:left; background:url(/images/akitaonrails/search.gif) no-repeat top left;}
#formsearch input.editbox_search { margin:0; padding:10px 6px 9px; float:left; width:181px; border:none; background:none; font:normal 12px/1.5em "Liberation sans", Arial, Helvetica, sans-serif; color:#a8acb2;}
#formsearch input.button_search { margin:0; padding:0; border:none; float:left;}

.CodeRay {
  margin-bottom: 1.0em;
}

.CodeRay .code {
  font-family: 'Inconsolata', 'Monaco', 'Consolas', 'Courier New', 'Terminal';
}

.CodeRay .code pre {
  overflow:auto;
  width:610px;
}

.CodeRay pre {
  background-color:transparent;
  border-bottom:0 none;
  border-top:0 none;
  margin:0;
  padding:0;
  width:10px;
}

/* Payment container */

.payment .price {
  float: left;
  width: 130px;
  height: 30px;
  font-size: 1.4em;
  text-align: center;
  vertical-align: middle;
}

.payment .merchant {
  float: left;
  width: 320px;
  height: 30px;
  text-align: center;
  vertical-align: middle;
}

.payment .smaller {
  width: 170px;
}

.payment .button {
  float: left;
  margin-right: 2px;
  margin-left: 2px;
}

.gallery_container {
  width: 600px;
}

.gallery {
  float: left;
  margin: 10px 10px 10px;
  border: 1px solid #bbbbbb;
}
.clearfix:after {
	content: ".";
	display: block;
	clear: both;
	visibility: hidden;
	line-height: 0;
	height: 0;
}

.clearfix {
	display: inline-block;
}

html[xmlns] .clearfix {
	display: block;
}

* html .clearfix {
	height: 1%;
}
/*
 * This is a manifest file that'll automatically include all the stylesheets available in this directory
 * and any sub-directories. You're free to add application-wide styles to this file and they'll appear at
 * the top of the compiled file, but it's generally better to create a new file per style scope.
*/