@media screen, projection {
  /*
  Copyright (c) 2008, Yahoo! Inc. All rights reserved.
  Code licensed under the BSD License:
  http://developer.yahoo.net/yui/license.txt
  version: 2.5.1
  */
  body{font:13px/1.231 helvetica,arial,clean,sans-serif;*font-size:small;*font:x-small;}table {font-size:inherit;font:100%;}pre,code,kbd,samp,tt{font-family:monospace;*font-size:108%;line-height:100%;}
  html{color:#000;background:#FFF;}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0;}table{border-collapse:collapse;border-spacing:0;}fieldset,img{border:0;}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}li{list-style:none;}caption,th{text-align:left;}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}q:before,q:after{content:'';}abbr,acronym {border:0;font-variant:normal;}sup {vertical-align:text-top;}sub {vertical-align:text-bottom;}input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;}input,textarea,select{*font-size:100%;}legend{color:#000;}
  h1,h2,h3,h4,h5,h6,strong{font-weight:bold;}abbr,acronym{border-bottom:1px dotted #000;cursor:help;}em{font-style:italic;}ol li{list-style:decimal outside;}ul li{list-style:disc outside;}th{font-weight:bold;}caption{margin-bottom:.5em;text-align:center;}abbr{border:none;cursor:default;}
  
  a                                             {text-decoration:none; color:#39c;}
  a:hover                                       {text-decoration:underline;}
  a:focus                                       {outline:none;}
  p                                             {margin:0 0 20px;}
  ul                                            {margin:0 0 25px; padding:0;}
  ul li                                         {padding:4px 0 4px 24px; background:url(../png/bullet.png) no-repeat 4px 10px; list-style:none;}
  #doc-nav ul li                                {margin:0; padding:0; background:none;}
  #doc-nav ul li a                              {display:block; padding:4px 0 4px 24px;}
  sup,sub                                       {height: 0; line-height: 1; vertical-align: baseline; _vertical-align: bottom; position: relative;}
  sup                                           {bottom: 1ex;}
  sub                                           {top: .5ex;}
               
/**                                             
 * Style Chunks                                 
 */   
  html                                          {background:#DFE4EC url(../png/background.png) fixed repeat-x top left;}
  body                                          {font:12px/1.5 "Lucida Grande", Tahoma, Arial, sans-serif; color:#667; background:url(../png/shadow_long.png) no-repeat 50% 135px; padding:0 25px}
  div#wrapper                                   {display: flex; flex-direction: column; width:960px; min-height: 100vh; margin:0 auto;}
  div#header                                    {height:135px; background:url(../jpg/icon.jpg) no-repeat 100% 5px; margin:0; position:relative;}
  div#header h1                                 {height:135px; width:320px; text-indent:100%; overflow:hidden; color: #687594; background:url(../jpg/harmony.jpg) no-repeat -5px 0; margin:0; padding:0; font: bold italic 32px TMixBold-Italic, TMix, sans-serif; -webkit-font-smoothing: antialiased; white-space: nowrap;}
  div#header ul                                 {position:absolute; left:-8px; top:87px; margin:0; padding:0; list-style-type:none; width:870px;}
  div#header li                                 {float:left; margin:0; padding:0;}
  div#header li a                               {display:block; height:40px; background:url(../png/nav.png) no-repeat; text-indent:-9999px; overflow:hidden; padding:0; font: bold 14px TMixBold, TMix, sans-serif; text-transform: uppercase;}
  div#header li a:hover, div#header li .current { color: #687594; }
  
  div#header li#top-nav-documentation,
  div#header li#top-nav-support,
  div#header li#top-nav-sign-in                 {float:right;}

  div.preview                                   {width:210px; float:left; padding-top:15px;}
  div.preview + div.preview                     {margin-left:40px;}
  
  div#header li#top-nav-home a                  {width:57px; background-position:0 0;}
  div#header li#top-nav-features a              {width:80px; background-position:-57px 0;}
  div#header li#top-nav-sign-up a               {width:67px; background-position:-204px 0;}
  div#header li#top-nav-blog a                  {width:53px; background-position:-271px 0;}
  div#header li#top-nav-support a               {width:73px; background-position:-324px 0;}
  div#header li#top-nav-documentation a         {width:132px; background-position:-397px 0;}
  div#header li#top-nav-pricing a               {width:68px; background-position:-136px 0;}
  div#header li#top-nav-sign-in a               {width:67px; background-position:-529px 0;}
  
  div#header li#top-nav-home a:hover            {background-position:0 -40px;}
  div#header li#top-nav-features a:hover        {background-position:-57px -40px;}
  div#header li#top-nav-sign-up a:hover         {background-position:-204px -40px;}
  div#header li#top-nav-blog a:hover            {background-position:-271px -40px;}
  div#header li#top-nav-support a:hover         {background-position:-324px -40px;}
  div#header li#top-nav-documentation a:hover   {background-position:-397px -40px;}
  div#header li#top-nav-pricing a:hover         {background-position:-136px -40px;}
  div#header li#top-nav-sign-in a:hover         {background-position:-529px -40px;}
  
  div#header li#top-nav-home.current a          {background-position:0 -80px;}
  div#header li#top-nav-features.current a      {background-position:-57px -80px;}
  div#header li#top-nav-blog.current a          {background-position:-271px -80px;}
  div#header li#top-nav-support.current a       {background-position:-324px -80px;}
  div#header li#top-nav-documentation.current a {background-position:-397px -80px;}
  div#header li#top-nav-pricing.current a       {background-position:-136px -80px;}
  
  #signup-form       {margin:20px 10px 0;}
  #signup-form label {width:50px; float:left; clear:both; margin-bottom:10px;}
  #signup-form input {margin:0 0 10px; width:120px;}
  #signup-form input#signup_button {margin-left:50px; width:auto; }
  
  div#content                                   {padding:30px 0; width:960px; float:left; overflow:hidden; flex-grow: 1;}
  div#doc-nav                                   {width:200px; float:left;}
  div#main                                      {width:720px; float:right; color:#333; position:relative;}
  
  div#video                                     {padding:1px; background:#fff; border:1px solid #999; -webkit-box-shadow:rgba(0,0,0,0.15) 0 6px 20px; width:716px; height:500px;}
  
  div#doc-nav h2,
  div#doc-nav h2 a,
  div.preview h2 a                              {color:#333;}
  div#doc-nav ul                                {margin:0 0 30px; padding:0; border-top:1px solid #CFDDEC; border-color:rgba(0,102,204,0.15);}
  div#doc-nav li                                {list-style:none; margin:0; padding:0; border-bottom:1px solid #CFDDEC; border-color:rgba(0,102,204,0.15);}
  div#doc-nav li a                              {background:none; font-weight:bold; color:#39c; padding:10px; display:block;} 
  div#doc-nav li.current a                      {color:#693;}
  
  div#doc-nav ul ul                             {border-top:none; margin-bottom:6px; margin-top:-6px;}
  div#doc-nav ul ul ul                          {margin:0 0 0 20px; border-top:1px solid #CFDDEC; border-color:rgba(0,102,204,0.15); padding:6px 0;}
  div#doc-nav ul ul ul ul                       {display:none;}
  div#doc-nav ul ul li                          {border-bottom:none;}
  div#doc-nav ul li.current li a                {color:#333; font-weight:normal; padding:4px 0 4px 34px; background:url(../png/bullet.png) no-repeat 20px 50%;}
  div#doc-nav ul li.current li.current a        {font-weight:bold; background:url(../png/bullet_current.png) no-repeat 20px 50%;}
  div#doc-nav ul li.current li.current li a     {color:#666; font-size:11px; font-weight:normal; padding:2px 0 2px 34px; background:url(../png/bullet.png) no-repeat 20px 50%;}
  div#doc-nav ul li.current li.current li.current a {font-weight:bold; background:url(../png/bullet_current.png) no-repeat 20px 50%;}
  
  h1                                            {font-size:24px; line-height:30px; font-weight:normal; color:#000; margin:0 0 25px; clear:both;}
  h2                                            {font-size:20px; font-weight:normal; line-height:30px; margin:0 0 25px; color:#693;}
  h2.code_header                                {border-bottom:1px solid #CFDDEC; border-color:rgba(0,102,204,0.15); margin-bottom:15px;}
  h3                                            {font-size:16px; color:#777; margin:0 0 25px; font-weight:normal;}
  
  div#main p,
  div#main ul,
  div#main ol                                   {width:500px; line-height:20px; position:relative; color:#666;}
  div#main p.note                               {width:470px; padding:10px 15px; background:#D2DCE9; background:rgba(0,102,204,0.1); color:#6F82A9; -webkit-border-radius:6px; -moz-border-radius:6px;}
  div.notice                                    {background:#D2DCE9; background:rgba(0,102,204,0.1); color:#6F82A9; -webkit-border-radius:6px; -moz-border-radius:6px; margin-bottom:25px; padding:10px 15px;}
  div.notice p                                  {padding:0; margin:0;}
  div.notice strong                             {color:#333;}
  div#main p strong                             {color:#111;}
  div#main p.image                              {float:right; display:inline; margin:8px 0 25px 40px;}
  div#features img,
  div#main img,
  div.single img                                {box-sizing: border-box;max-width: 100%;background:#fff; border:1px solid #999; padding:1px; -webkit-box-shadow:rgba(0,0,0,0.25) 0 10px 20px; box-shadow:0 10px 20px rgba(0,0,0,0.25);}
  div#main span.aside                           {position:absolute; text-indent:-7px; top:0; left:540px; width:180px; color:#888; line-height:20px; font-size:11px;}
  div.media                                     {margin:0 0 25px;}
  div.media img,
  div.preview img                               {background:#fff; border:1px solid #999; padding:1px; -webkit-box-shadow:rgba(0,0,0,0.15) 0 6px 20px;}
  div.preview h2                                {margin:0 0 8px;}
  
  #main blockquote                              {border:1px solid #CFDDEC; border-width:1px 0; border-color:rgba(0,102,204,0.15); padding:20px 25px 0; margin:0 0 20px; font-size:15px; font-style:italic; width:450px; color:#333;}
  #main blockquote p                            {width:100%;}
  
  div#main div.intro                            {position:absolute; left:540px; width:180px; color:#888; line-height:20px; font-size:11px;}
  div#main div.intro p                          {width:180px; margin-bottom:0.7em}
  div#main div.intro h2                         {margin-bottom:10px;}
  
  div#main table                                {width:100%; border-collapse:collapse; margin-bottom:25px;}
  div#main th                                   {padding:5px 8px; background:#CFDDEC; background-color:rgba(0,102,204,0.1);}
  div#main th.code                              {width:140px;}
  div#main td                                   {padding:5px 8px;}
  div#main tr.alt td                            {background-color:rgba(0,102,204,0.04);}
  
  div#main ul#skiplinks                                  {overflow:auto; width:auto;}
  ul#skiplinks li                               {padding:0; float:left; display:inline; margin:0 8px 8px 0; background:none;}
  ul#skiplinks li a                             {padding:2px 5px; color:#000; background:#D2DCE9; background:rgba(0,102,204,0.1); -webkit-border-radius:4px; -moz-border-radius:4px; color:#333;}
  ul#skiplinks li a:hover                       {background:rgba(0,102,204,0.2);}
  
  ul#nav-harmony-templates-children-template-tags-children {display:none; }
  
  em                                            {color:#999;}
  input:focus {outline:none; -webkit-box-shadow:#06C 0 0 6px; border:1px solid #fff !important;}

  div#footer                                    {clear:both; padding:25px 50px; margin:0 -50px; background:url(../png/shadow_long.png) no-repeat 50% 0; line-height:16px; font-size:10px;}
  p.railsmachine                                {float:right; display:inline;}
  p.railsmachine a                              {display:inline-block; width:127px; height:16px; text-indent:-9999px; overflow:hidden; background:url(../png/railsmachine.png) no-repeat;}
  div.single div#footer                         {padding:25px 185px;}
  form#search                                   {position: absolute; top: 57px; right: 107px;}
  form#search input                             {width: 225px;}
}
/*************************************
Base for code highlighting
*************************************/
pre {
  width:720px;
  margin:0 0 25px;
}

code {
  padding:2px 5px;
  color:#000;
  background:#D2DCE9;
  background:rgba(0,102,204,0.1);
  -webkit-border-radius:4px;
  -moz-border-radius:4px;
}

pre code {display:block; line-height:1.2; background:#fff; border:1px solid #999; -webkit-box-shadow:rgba(0,0,0,0.15) 0 6px 20px; padding:15px 20px; margin:0; -webkit-border-radius:0; -moz-border-radius:0; color:#333; width:678px; overflow-x:auto; overflow-y:hidden;}

/*************************************
RUBY Highlighting
*************************************/
code.ruby span.comment {
  color: #666;
}

code.ruby span.string {
  color: #A5C261;
}

code.ruby span.brackets {
  color: #E3C2F8;
}

code.ruby span.symbol {
  color: #6D9CBE;
}

code.ruby span.keywords {
  color: #BF7833;
}

 /*************************************
JAVASCRIPT Highlighting
*************************************/
code.javascript span.comment {
  color: #666;
}

code.javascript span.string {
  color: #06C;
}

code.javascript span.brackets {
  color: #E3C2F8;
}

code.javascript span.symbol {
  color: #6D9CBE;
}

code.javascript span.keywords {
  color: #BF7833;
}

/*************************************
HTML Highlighting
*************************************/
code.html span.comment {
  color: #666;
}

code.html span.string {
  color: #093;
}

code.html span.tag {
  color: #0082A3
}

code.html span.attribute {
  color: #333;
}

code.html span.doctype {
  color: #999;
}

code.html span.liquid {
  color:#06C;
}

/*************************************
CSS Highlighting
*************************************/
code.css span.comment {
  color: #666;
}

code.css span.keywords {
  color: #BF7833;
}

code.css span.selectors {
  color: #BF7833;
}

code.css span.properties {
  color: #6D9CBE;
}

code.css span.units {
  color: #A5C261;
}