.clearfix:after,
.section:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}

.clearfix, .section {
display: inline-block;
}

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

* html .clearfix,
* html .section {
height: 1%;
}

span.replaced {
visibility: hidden;
}
span.hidden {
display: none;
}

div.transition {
  margin-top: 30px;
  width: 200px;
  height: 200px;
  position: relative;
  margin-bottom:10px;
}

div.transition div {
  position: absolute;
  height: 1px;
  width: 1px;
  background: #000;
}

div.transition span {
  display: block;
  position: absolute;
  border-bottom: 1px solid #dadada;
  font-size: 10x;
  color: #888;
  width: 200px;
  left: 0px;
}

div.transition div.indicator {
  background-color: #ABD474;
  height: 200px;
  top: 0px;
  left: 0px;
}

div.transition div.interactive div.hint {
  width: 100%;
  top: 90px;
  font-size: 18px;
  text-align: center;
  color: #888 !important;
  background: transparent;
  border: 0;
  z-index: 1;
}

div.transition div.interactive.active div.hint {
  display: none;
}

div.transition div.marker {
  background-color: #ABD474;
  height: 6px;
  width: 6px;
  border-radius: 3px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  left: 0px;
  margin-bottom: -3px;
  margin-left: -3px;
}
div.transition div.label {
  background: transparent;
  color: #ABD474;
  font-size: 20px;
  height: 20px;
  width: 200px;
  text-align: center;
  top: 80px;
  left: 0px;
  z-index: -1;
}

div.transition div.interactive {
  width: 590px;
  height: 200px;
  left: 240px;
  border: 1px solid #dadada;
  background: #fff;
}

div.transition div.interactive div {
  color: #eee;
}

div.transition div.interactive.active div {
  color: #000;
}

div.transition div.interactive div.movement {
  width: 60px;
  height: 60px;
  border: 1px solid #eee;
  background: #fff;
  text-align:center;
  padding: 20px;
  top: 20px;
  left: 20px;
}

div.transition div.interactive.active div.movement {
  background: #F9FFED;
  border: 1px solid #ABD474;
}

div.transition div.interactive div.color {
  width: 328px;
  height: 20px;
  border: 1px solid #eee;
  background: #fff;
  text-align:center;
  padding: 10px;
  top: 140px;
  left: 20px;
}

div.transition div.interactive.active div.color {
  background: #ABD474;
}

div.transition div.interactive div.size {
  width: 30px;
  height: 30px;
  border: 1px solid #eee;
  background: #fff;
  text-align:center;
  padding: 20px;
  top: 60px;
  left: 450px;
  margin: 0;
  font-size: 100%;
}

div.transition div.interactive.active div.size {
background: #F9FFED;
border: 1px solid #ABD474;
}

body {
font-size: 82.5%;
line-height: 1.5em;
margin: 0;
padding: 0;
font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
}

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

h4 {
font-size: 17px;
color: #555;
margin: 1.0em 0 0.6em;
}

h5 {
font-size: 15px;
color: #2a2a2a;
margin: 1.0em 0 0.6em;
}

h6 {
font-size: 14px;
color: #000;
margin: 1.0em 0 0.6em;
}

a img {
border: 0;
}

ul, li {
list-style-type: none;
}

ol, ul {
margin: 0 0 15px;
}

#page a.img,
#page a.img:link,
#page a.img:visited {
border: none;
}

/* Link bar */

div#links {
margin: 0 auto;
width: 835px;
padding: 16px 0;
height: 16px;
overflow: hidden;
}

div#links_wrapper {
background: #fff;
}

div#links li {
display: inline;
}

div#links li a {
color: #666;
}

div#links li.selected a {
color: #000;
font-weight: bold;
text-decoration: none;
}

ul#internal_links {
float: left;
}

ul#internal_links li {
margin-right: 25px;
}

ul#external_links {
float: right;
}

ul#external_links li {
margin-left: 25px;
padding-left: 21px;
}

p a, p a:link,
h1 a, h1 a:link,
h2 a, h2 a:link,
h3 a, h3 a:link,
h4 a, h4 a:link,
h5 a, h5 a:link,
h6 a, h6 a:link {
color: #455C23;
}

p a:visited {
}

code {
font-family: "Panic Sans", "Bitstream Vera Sans Mono", Monaco, Consolas, Andale Mono, monospace;
font-size: 14px;
}

p code,
li code {
background-color: #f0f0f0;
border: 1px solid #ccc;
border-radius: 3px;
-webkit-border-radius: 3px;
padding: 0 3px;
}

pre code {
background-color: transparent;
border: 0;
padding: 0;
}

div.code, div.code pre {
  font-family: "Panic Sans", "Bitstream Vera Sans Mono", Monaco, Consolas, Andale Mono, monospace;
  font-size: 12px;
}

#page {
margin: 0 auto;
padding-bottom: 100px; /* FIXME: Temporary as pages are built */
}


/* top */

.related-links {
width: 835px;
font-size: 0.9em;
margin: 0 auto 10px;
padding: 10px 0 0;
}

.related-links a {
color: #000;
text-decoration: none;
}

.related-links ul {
list-style-type: none;
}

.related-links ul.internal {
float: left;
width: 355px;
}

.related-links ul.internal li {
text-align: center;
}

.related-links ul.external {
float: right;
width: 295px;
}

.related-links li {
float: left;
padding: 0 15px;
width: 85px;
margin-right: 5px;
}

.related-links li.last {
margin-right: 0;
}

.related-links ul.external li.scripty {
padding: 0 8px 0 22px;
background: url(../images/icon-scripty.png) no-repeat;
margin-right: 65px;
}

.related-links ul.external li.rails {
padding: 0 8px 0 22px;
background: url(../images/icon-rails.png) no-repeat;
}


.banner {
height: 152px;
padding: 1px 0;
background: url(../images/header-stripe.png) repeat-x;
}

.banner-content {
width: 835px;
margin: 0 auto;
}

.banner h1 {
width: 236px;
height: 150px;
background: url(../images/header-logo.png) no-repeat;
}

.banner h1 span {
display: none;
}

.banner-small {
height: 75px;
padding: 1px 0;
background: url(../images/header-stripe-small.png) repeat-x;
}

.banner-small h1 {
width: 118px;
height: 75px;
background: url(../images/header-logo-small.png) no-repeat;
margin-left: 60px;
}

.banner-small h1 span {
display: none;
}


/* PAGE CONTENT */

.page-content {
width: 955px;
margin: 60px auto 0;
}

.page-content .page-title {
margin-left: 140px;
margin-bottom: 15px;
font-size: 27px;
letter-spacing: -1px;
color: #444;
}

.page-content .page-introduction {
margin-left: 140px;
font-size: 15px;
margin-bottom: 25px;
}

.page-content .page-introduction p {
margin-top: 0;
}


.page-content .section {
width: 955px;
margin: 10px 0 20px;
}

.page-content .section .section-title {
width: 130px;
margin-top: -4px;
margin-right: 10px;
padding-right: 0;
float: left;
text-align: right;
overflow: hidden;
}

.page-content .section .section-title h3 {
color: #999;
font-size: 14px;
line-height: 110%;
padding-right: 10px;
padding-bottom: 5px;
}

.page-content .section .section-content {
width: 815px;
float: left;
}

.page-content .section .section-content h2 {
  color: #444;
  font-size: 16px;
  margin: 15px 0 5px 0;
}

.page-content .section .section-content h4.inherited { 
  clear: both; 
  font-size: 14px;
}

.page-content a,
.page-content a:link {
color: #455C23;
border-bottom: 1px solid #455C23;
text-decoration: none;
}

.page-content a:visited {
border-bottom: 1px solid #bbb;
}

.page-content ul,
.page-content ol {
margin: 10px 0;
}

.page-content li {
margin: 5px 0 8px 20px;
list-style-type: disc;
}

.page-content p {
margin: 0 0 0.8em;
}

.page-content pre {
color: #333;
background-color: #F9FFEE;
border: 1px solid #ACD576;
padding: 3px 5px;
margin: 0 0 1em;
}

.page-content .two-column {
}

.page-content .two-column-left,
.page-content .two-column-right {
width: 475px;
margin-right: 5px;
float: left;
}

.page-content .two-column-right {
margin-right: 0;
}

.page-content .two-column .section {
width: 475px;
}

.page-content .two-column .section-content {
width: 345px;
padding-right: 10px;
}



.smallcaps {
font-size: 0.85em;
text-transform: uppercase;
letter-spacing: 1px;
}


/* MASTHEAD */

div#masthead {
margin-top: 50px;
height: 76px;
}

div#masthead div#masthead_content {
margin: 0 auto;
width: 835px;
position: relative;
}

div#masthead h1#logo {
background: url(../images/header-logo.png) no-repeat 0 1px;
width: 300px;
height: 93px;
position: relative;
left: 75px;
}

div#masthead a {
text-decoration: none;
}

pre {
padding: 0;
}

code {
font-family: Monaco, "Bitstream Vera Sans Mono", "Lucida Console", monospace;
font-size: 12px;
}

div#footer {
width: 960px;
margin: 0 auto;
}

div.about {
margin-top: 20px;
padding-top: 20px;
width: 745px;
margin-left: 140px;
border-top: 1px solid #aaa;
color: #aaa;
padding-left: 90px;
background: url(../images/cc.png) no-repeat 20px left;
}

div.about a,
div.about a:link {
color: #888;
text-decoration: underline;
border: 0;
}

div.copyright,
div.credits {
width: 372px;
float: left;
}

div.copyright .cc {
width: 115px;
margin-right: 5px;
text-align: center;
float: left;
}

div.copyright .copyright-about {
width: 235px;
float: left;
}

div.credits {
text-align: right;
}

.page-title span.type {
display: block;
text-transform: uppercase;
font-size: 14px;
color: #aaa;
letter-spacing: 0;
}

h2.page-title {
margin-top: 0;
line-height: 100%;
}

ul.breadcrumbs {
margin-left: 140px;
}

ul.breadcrumbs li {
float: left;
list-style-type: none;
margin-right: 10px;
margin-left: 0;
}



ul.method-list {
margin-top: 0;
}

ul.method-list li {
margin-top: 0;
float: left;
margin-right: 5px;
margin-left: 0;
list-style-type: none;
}

ul.method-list li a,
ul.method-list li a:link {
text-decoration: none;
border: 0;
}

ul.method-details-list {
margin-top: 0;
}

ul.method-details-list li.method-description {
margin-top: 0;
margin-bottom: 3.0em;
margin-left: 0;
list-style-type: none;
}

ul.method-details-list li h4 {
margin: 0 0 0.6em;
line-height: 90%;
}

ul.method-details-list li pre {
margin-top: 0;
}

ul.method-details-list li pre code {
font-size: 13px;
}

ul.method-details-list li code {
font-size: 12px;
}

.method-description h4 .method-permalink a {
color: #aaa;
text-decoration: none;
border: 0;
font-size: 14px;
}

ul.argument-list {
margin-top: -5px;
list-style-type: disc;
margin-left: 20px;
}

ul.argument-list li {
list-style-type: disc;
font-size: 90%;
margin-bottom: 0;
}

ul.argument-list li code {
font-size: 11px;
}

ul.section-list {
margin-top: 0;
}

ul.section-list li {
margin-top: 0;
margin-left: 0;
list-style-type: none;
}

ul.section-list li h4 {
margin-top: 0;
}


/* Aliases */

.alias,
.related-to {
font-style: italic;
}

.alias code,
.related-to code {
font-style: normal;
}

/* Section icons */

.page-content .section .section-title h3 {
padding-right: 34px;
background-position: right 0;
background-repeat: no-repeat;
height: 24px;
padding-top: 5px;
}

.section-constructor .section-title h3 {
background-image: url(../images/constructor.png);
}

.section-method-list .section-title h3 {
background-image: url(../images/method.png);
}

.section-klass_methods .section-title h3 {
background-image: url(../images/class_method.png);
}

.section-klass_properties .section-title h3 {
background-image: url(../images/class_property.png);
}

.section-instance_methods .section-title h3 {
background-image: url(../images/instance_method.png);
}

.section-instance_properties .section-title h3 {
background-image: url(../images/instance_property.png);
}

.section-mixins .section-title h3 {
background-image: url(../images/mixin.png);
}

.section-classes .section-title h3 {
background-image: url(../images/class.png);
}

.section-namespaces .section-title h3 {
background-image: url(../images/namespace.png);
}

.section-sections .section-title h3 {
background-image: url(../images/section.png);
}

.section-utilities .section-title h3 {
background-image: url(../images/utility.png);
}

.section-description .section-title h3 {
background-image: url(../images/description.png);
}

.section-subclasses .section-title h3 {
background-image: url(../images/subclass.png);
}

.section-superclass .section-title h3 {
background-image: url(../images/superclass.png);
}

/* search box */

.search-results {
position: absolute;
background-color: #fff;
height: 200px;
width: 233px;
overflow: auto;
overflow-y: scroll;
overflow-x: hidden;
margin: 7px -11px 0;
border: 1px solid #999;
top: 28px;
}

* html .search-results {
left: 486px;
top: 30px;
}


/* search result types */

.menu-item a,
.menu-item a:link {
display: block;
padding: 3px 10px 3px 28px;
background-position: 6px 50%;
background-repeat: no-repeat;
text-align: left;
text-decoration: none;
color: #333;
border-top: 1px solid #fff;
border-bottom: 1px solid #fff;
white-space: nowrap;
}

.menu-item a:hover,
.menu-item a.highlighted,
#menu .highlighted a {
border-top: 1px solid #69f;
border-bottom: 1px solid #69f;
background-color: #f0f0ff;
}


.menu-item a.section {
font-weight: bold;
background-image: url(../images/section.png);
}

.menu-item a.class_method,
.menu-item a.instance_method {
background-image: url(../images/method.png);
}

.menu-item a.class {
background-image: url(../images/class.png);
}

.menu-item a.constructor {
background-image: url(../images/constructor.png);
}

.menu-item a.class_property {
background-image: url(../images/class_property.png);
}

.menu-item a.instance_property {
background-image: url(../images/instance_property.png);
}

.menu-item a.namespace {
background-image: url(../images/namespace.png);
}

.menu-item a.utility {
background-image: url(../images/utility.png);
}

.highlighter {
border: 3px solid #ABD474;
z-index: -1;
border-radius: 20px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
background: #FBFFF8;
padding: 20px;
}

div#menu {
width: 960px;
margin: 0 auto;
position: relative;
margin-top: -50px;
}

#menu .api-box h2 a,
#menu .search-box {
width: 213px;
height: 25px;
line-height: 25px;
padding: 5px 10px;
margin-right: 5px;
text-align: center;
float: right;
}

* html #menu .api-box h2 a,
* html #menu .search-box {
height: 20px;
line-height: 30px;
}

#menu .api-box {
}

#menu .api-box h2 a {
font-size: 14px;
font-weight: normal;
font-family: Verdana, sans-serif;
display: block;
text-decoration: none;
color: #222;
}

#menu .api-box .menu-items {
position: absolute;
background-color: #fff;
height: 400px;
width: 233px;
overflow: auto;
overflow-y: scroll;
overflow-x: hidden;
top: 35px;
border: 1px solid #999;
right: 240px;
}

* html #menu .api-box .menu-items {
right: 10px;
top: 37px;
}

#menu .api-box ul,
#menu .api-box li {
margin: 0;
padding: 0;
}

#menu .api-box .menu-item a {
}
#menu .search-box input {
width: 150px;
padding: 3px 10px;
margin-top: 2px;
border: 1px solid #999;
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
}

#menu #search.ghosted {
color: #aaa;
text-align: left;
}


/* notes */

p.note,
p.alias,
p.related-to {
font-size: 11px;
line-height: 14px;
padding: 5px 5px 5px 60px;
background-repeat: no-repeat;
background-position: 20px 50%;
border: 1px solid #000;
}

p.note {
background-color: #f0f0f4;
background-image: url(../images/information.png);
border-color: #69c;
}

p.alias {
background-color: #fff6de;
background-image: url(../images/alias.png);
border-color: #cc9;
}

p.related-to {
background-color: #f4f0f4;
background-image: url(../images/related_to.png);
border-color: #c9c;
}

#morph_example {
  border:1px dashed #618AB8;
  overflow:hidden;
  margin-bottom:10px;
}

#morph_example .options {
  background:#CEDCEC;
  padding:10px;
}

#morph_example .options textarea {
  height:50px;
  font-size:15px;
  width:500px;
  padding:2px;
  float:left;
}

#morph_example .options a.button,
#morph_example .options a.reset {
  background:#618AB8;
  text-decoration:none;
  border:none;
  color:#fff;
  position:relative;
  margin-left:5px;
  display:block;
  height:38px;
  width:58px;
  float:left;
  text-align:center;
  padding:18px 0 0 0;
  -webkit-border-radius:5px;
  -moz-border-radius:5px;
}

#morph_example .options a.button:hover {
  background:#365b85;
}

#morph_example .options a.reset {
  background:#aaa;
  margin-left:5px;
}

#morph_example .options a.reset:hover {
  background:#888;
}

#morph_example p {
  margin:50px auto;
  width:400px;
  position:relative;
  border:0px solid #000;
}

#morph_example .hint {
  clear:both;
  font-size:12px;
}

#morph_example .hint em {
  font-style:normal;
  color:#666;
  text-decoration:underline;
  cursor:pointer;
}