diff --git a/railties/guides/files/stylesheets/main.css b/railties/guides/files/stylesheets/main.css index 9fedd1af8d6dfbaec405a97c9e5a5eb33c41263b..3fee08143fbb2a47dc99106740774fbe02af3085 100644 --- a/railties/guides/files/stylesheets/main.css +++ b/railties/guides/files/stylesheets/main.css @@ -7,417 +7,538 @@ /* General --------------------------------------- */ -.left {float: left; margin-right: 1em;} -.right {float: right; margin-left: 1em;} -.small {font-size: smaller;} -.large {font-size: larger;} -.hide {display: none;} +.left { + float: left; + margin-right: 1em; +} +.right { + float: right; + margin-left: 1em; +} +.small { + font-size: smaller; +} +.large { + font-size: larger; +} +.hide { + display: none; +} -li ul, li ol { margin:0 1.5em; } -ul, ol { margin: 0 1.5em 1.5em 1.5em; } +li ul, li ol { + margin: 0 1.5em; +} +ul, ol { + margin: 0 1.5em 1.5em 1.5em; +} -ul { list-style-type: disc; } -ol { list-style-type: decimal; } +ul { + list-style-type: disc; +} +ol { + list-style-type: decimal; +} -dl { margin: 0 0 1.5em 0; } -dl dt { font-weight: bold; } -dd { margin-left: 1.5em;} +dl { + margin: 0 0 1.5em 0; +} +dl dt { + font-weight: bold; +} +dd { + margin-left: 1.5em; +} -pre,code { margin: 1.5em 0; white-space: pre; } -pre,code,tt { font: 1em 'andale mono', 'lucida console', monospace; line-height: 1.5; } +pre,code { + margin: 1.5em 0; + white-space: pre; +} +pre,code { + font: 1em 'andale mono', 'lucida console', monospace; + line-height: 1.5; +} -abbr, acronym { border-bottom: 1px dotted #666; } -address { margin: 0 0 1.5em; font-style: italic; } -del { color:#666; } +abbr, acronym { + border-bottom: 1px dotted #666; +} +address { + margin: 0 0 1.5em; + font-style: italic; +} +del { + color: #666; +} -blockquote { margin: 1.5em; color: #666; font-style: italic; } -strong { font-weight: bold; } -em, dfn { font-style: italic; } -dfn { font-weight: bold; } -sup, sub { line-height: 0; } -p {margin: 0 0 1.5em;} +blockquote { + margin: 1.5em; + color: #666; + font-style: italic; +} +strong { + font-weight: bold; +} +em, dfn { + font-style: italic; +} +dfn { + font-weight: bold; +} +sup, sub { + line-height: 0; +} +p { + margin: 0 0 1.5em; +} -label { font-weight: bold; } -fieldset { padding:1.4em; margin: 0 0 1.5em 0; border: 1px solid #ccc; } -legend { font-weight: bold; font-size:1.2em; } +label { + font-weight: bold; +} +fieldset { + padding: 1.4em; + margin: 0 0 1.5em 0; + border: 1px solid #ccc; +} +legend { + font-weight: bold; + font-size: 1.2em; +} -input.text, input.title, -textarea, select { - margin:0.5em 0; - border:1px solid #bbb; +input.text, input.title, textarea, select { + margin: 0.5em 0em; + border: 1px solid #bbb; } table { - margin: 1em 0; - border: 1px solid #ddd; - background: #f4f4f4; - border-spacing: 0; + margin: 1em 0; + border: 1px solid #ddd; + background: #f4f4f4; + border-spacing: 0; } - table th, table td { +table th, table td { padding: 0.25em; border-right: 1px dotted #e0e0e0; border-bottom: 1px dotted #e0e0e0; - } +} - table th:last-child, table td:last-child { - border-right: none; - } +table th:last-child, table td:last-child { + border-right: none; +} - table th { +table th { border-bottom: 1px solid #ddd; background: #f0f0f0; font-weight: bold; - } - - table td { - } +} - table tt { +table tt { padding: 0.1em; - } +} /* Structure and Layout --------------------------------------- */ body { - text-align: center; - font-family: Helvetica, Arial, sans-serif; - font-size: 87.5%; - line-height: 1.5em; - background: #222; - color: #999; - } + text-align: center; + font-family: Helvetica, Arial, sans-serif; + font-size: 87.5%; + line-height: 1.5em; + background: #222; + color: #999; +} .wrapper { - text-align: left; - margin: 0 auto; - width: 69em; - } + text-align: left; + margin: 0 auto; + width: 69em; +} #topNav { - padding: 1em 0; - color: #565656; + padding: 1em 0; + color: #565656; } #header { - background: #c52f24 url(../../images/header_tile.gif) repeat-x; - color: #FFF; - padding: 1.5em 0; - position: relative; - z-index: 99; - } + background: #c52f24 url(../../images/header_tile.gif) repeat-x; + color: #FFF; + padding: 1.5em 0; + position: relative; + z-index: 99; +} #feature { - background: #d5e9f6 url(../../images/feature_tile.gif) repeat-x; - color: #333; - padding: 0.5em 0 1.5em; + background: #d5e9f6 url(../../images/feature_tile.gif) repeat-x; + color: #333; + padding: 0.5em 0 1.5em; } #container { - background: #FFF; - color: #333; - padding: 0.5em 0 1.5em 0; - } + background: #FFF; + color: #333; + padding: 0.5em 0 1.5em 0; +} #mainCol { - width: 45em; - margin-left: 2em; - } + width: 45em; + margin-left: 2em; +} #subCol { - position: absolute; - z-index: 0; - top: 0; - right: 0; - background: #FFF; - padding: 1em 1.5em 1em 1.25em; - width: 17em; - font-size: 0.9285em; - line-height: 1.3846em; - } - -#extraCol {display: none;} + position: absolute; + z-index: 0; + top: 0; + right: 0; + background: #FFF; + padding: 1em 1.5em 1em 1.25em; + width: 17em; + font-size: 0.9285em; + line-height: 1.3846em; +} + +#extraCol { + display: none; +} #footer { - padding: 2em 0; - background: url(../../images/footer_tile.gif) repeat-x; - } + padding: 2em 0; + background: url(../../images/footer_tile.gif) repeat-x; +} #footer .wrapper { - padding-left: 2em; - width: 67em; + padding-left: 2em; + width: 67em; } -#header .wrapper, #topNav .wrapper, #feature .wrapper {padding-left: 1em; width: 68em;} -#feature .wrapper {width: 45em; padding-right: 23em; position: relative; z-index: 0;} +#header .wrapper, #topNav .wrapper, #feature .wrapper { + padding-left: 1em; + width: 68em; +} +#feature .wrapper { + width: 45em; + padding-right: 23em; + position: relative; + z-index: 0; +} /* Links --------------------------------------- */ a, a:link, a:visited { - color: #ee3f3f; - text-decoration: underline; - } + color: #ee3f3f; + text-decoration: underline; +} -#mainCol a, #subCol a {color: #980905;} +#mainCol a, #subCol a { + color: #980905; +} /* Navigation --------------------------------------- */ -.nav {margin: 0; padding: 0;} -.nav li {display: inline; list-style: none;} +.nav { + margin: 0; + padding: 0; +} +.nav li { + display: inline; + list-style: none; +} #header .nav { - float: right; - margin-top: 1.5em; - font-size: 1.2857em; + float: right; + margin-top: 1.5em; + font-size: 1.2857em; } -#header .nav li {margin: 0 0 0 0.5em;} -#header .nav a {color: #FFF; text-decoration: none;} -#header .nav a:hover {text-decoration: underline;} +#header .nav li { + margin: 0 0 0 0.5em; +} +#header .nav a { + color: #FFF; + text-decoration: none; +} +#header .nav a:hover { + text-decoration: underline; +} #header .nav .index { - padding: 0.5em 1.5em; - border-radius: 1em; - -webkit-border-radius: 1em; - -moz-border-radius: 1em; - background: #980905; - position: relative; + padding: 0.5em 1.5em; + border-radius: 1em; + -webkit-border-radius: 1em; + -moz-border-radius: 1em; + background: #980905; + position: relative; } #header .nav .index a { - background: #980905 url(../../images/nav_arrow.gif) no-repeat right top; - padding-right: 1em; - position: relative; - z-index: 15; - padding-bottom: 0.125em; + background: #980905 url(../../images/nav_arrow.gif) no-repeat right top; + padding-right: 1em; + position: relative; + z-index: 15; + padding-bottom: 0.125em; +} +#header .nav .index:hover a, #header .nav .index a:hover { + background-position: right -81px; } -#header .nav .index:hover a, #header .nav .index a:hover {background-position: right -81px;} #guides { - width: 27em; - display: block; - background: #980905; - border-radius: 1em; - -webkit-border-radius: 1em; - -moz-border-radius: 1em; - -webkit-box-shadow: 0.25em 0.25em 1em rgba(0,0,0,0.25); - -moz-box-shadow: rgba(0,0,0,0.25) 0.25em 0.25em 1em; - color: #f1938c; - padding: 1.5em 2em; - position: absolute; - z-index: 10; - top: -0.25em; - right: 0; - padding-top: 2em; + width: 27em; + display: block; + background: #980905; + border-radius: 1em; + -webkit-border-radius: 1em; + -moz-border-radius: 1em; + -webkit-box-shadow: 0.25em 0.25em 1em rgba(0,0,0,0.25); + -moz-box-shadow: rgba(0,0,0,0.25) 0.25em 0.25em 1em; + color: #f1938c; + padding: 1.5em 2em; + position: absolute; + z-index: 10; + top: -0.25em; + right: 0; + padding-top: 2em; } #guides dt, #guides dd { - font-weight: normal; - font-size: 0.722em; - margin: 0; - padding: 0; -} -#guides dt {padding:0; margin: 0.5em 0 0;} -#guides a {color: #FFF; background: none !important;} -#guides .L, #guides .R {float: left; width: 50%; margin: 0; padding: 0;} -#guides .R {float: right;} + font-weight: normal; + font-size: 0.722em; + margin: 0; + padding: 0; +} +#guides dt { + padding: 0; + margin: 0.5em 0 0; +} +#guides a { + color: #FFF; + background: none !important; +} +#guides .L, #guides .R { + float: left; + width: 50%; + margin: 0; + padding: 0; +} +#guides .R { + float: right; +} #guides hr { - display: block; - border: none; - height: 1px; - color: #f1938c; - background: #f1938c; + display: block; + border: none; + height: 1px; + color: #f1938c; + background: #f1938c; } /* Headings --------------------------------------- */ h1 { - font-size: 2.5em; - line-height: 1em; - margin: 0.6em 0 .2em; - font-weight: bold; - } + font-size: 2.5em; + line-height: 1em; + margin: 0.6em 0 .2em; + font-weight: bold; +} h2 { - font-size: 2.1428em; - line-height: 1em; - margin: 0.7em 0 .2333em; - font-weight: bold; - } + font-size: 2.1428em; + line-height: 1em; + margin: 0.7em 0 .2333em; + font-weight: bold; +} h3 { - font-size: 1.7142em; - line-height: 1.286em; - margin: 0.875em 0 0.2916em; - font-weight: bold; - } + font-size: 1.7142em; + line-height: 1.286em; + margin: 0.875em 0 0.2916em; + font-weight: bold; +} h4 { - font-size: 1.2857em; - line-height: 1.2em; - margin: 1.6667em 0 .3887em; - font-weight: bold; - } + font-size: 1.2857em; + line-height: 1.2em; + margin: 1.6667em 0 .3887em; + font-weight: bold; +} h5 { - font-size: 1em; - line-height: 1.5em; - margin: 1em 0 .5em; - font-weight: bold; + font-size: 1em; + line-height: 1.5em; + margin: 1em 0 .5em; + font-weight: bold; } h6 { - font-size: 1em; - line-height: 1.5em; - margin: 1em 0 .5em; - font-weight: normal; - } + font-size: 1em; + line-height: 1.5em; + margin: 1em 0 .5em; + font-weight: normal; +} /* Content --------------------------------------- */ .pic { - margin: 0 2em 2em 0; + margin: 0 2em 2em 0; } -#topNav strong {color: #999; margin-right: 0.5em;} -#topNav strong a {color: #FFF;} +#topNav strong { + color: #999; + margin-right: 0.5em; +} +#topNav strong a { + color: #FFF; +} #header h1 { - float: left; - background: url(../../images/ruby_guides_logo.gif) no-repeat; - width: 492px; - text-indent: -9999em; - margin: 0; - padding: 0; + float: left; + background: url(../../images/ruby_guides_logo.gif) no-repeat; + width: 492px; + text-indent: -9999em; + margin: 0; + padding: 0; } #header h1 a { - text-decoration: none; - display: block; - height: 77px; + text-decoration: none; + display: block; + height: 77px; } #feature p { - font-size: 1.2857em; - margin-bottom: 0.75em; + font-size: 1.2857em; + margin-bottom: 0.75em; } -#feature ul {margin-left: 0;} +#feature ul { + margin-left: 0; +} #feature ul li { - list-style: none; - background: url(../../images/check_bullet.gif) no-repeat left 0.5em; - padding: 0.5em 1.75em 0.5em 1.75em; - font-size: 1.1428em; - font-weight: bold; + list-style: none; + background: url(../../images/check_bullet.gif) no-repeat left 0.5em; + padding: 0.5em 1.75em 0.5em 1.75em; + font-size: 1.1428em; + font-weight: bold; } #mainCol dd, #subCol dd { - padding: 0.25em 0 1em; - border-bottom: 1px solid #CCC; - margin-bottom: 1em; - margin-left: 0; - padding-left: 28px; + padding: 0.25em 0 1em; + border-bottom: 1px solid #CCC; + margin-bottom: 1em; + margin-left: 0; + padding-left: 28px; } #mainCol dt, #subCol dt { - font-size: 1.2857em; - padding: 0.125em 0 0.25em 28px; - margin-bottom: 0; - background: url(../../images/book_icon.gif) no-repeat left top; + font-size: 1.2857em; + padding: 0.125em 0 0.25em 28px; + margin-bottom: 0; + background: url(../../images/book_icon.gif) no-repeat left top; } #mainCol dd.ticket, #subCol dd.ticket { - background: #fff9d8 url(../../images/tab_yellow.gif) no-repeat left top; - border: none; - padding: 1.25em 1em 1.25em 48px; - margin-left: 0; - margin-top: 0.25em; + background: #fff9d8 url(../../images/tab_yellow.gif) no-repeat left top; + border: none; + padding: 1.25em 1em 1.25em 48px; + margin-left: 0; + margin-top: 0.25em; } #mainCol dd.warning, #subCol dd.warning { - background: #f9d9d8 url(../../images/tab_red.gif) no-repeat left top; - border: none; - padding: 1.25em 1.25em 1.25em 48px; - margin-left: 0; - margin-top: 0.25em; -} - -#subCol .chapters {color: #980905;} -#subCol .chapters a {font-weight: bold;} -#subCol .chapters ul a {font-weight: normal;} -#subCol .chapters li {margin-bottom: 0.75em;} -#subCol h3.chapter {margin-top: 0.25em;} -#subCol h3.chapter img {vertical-align: text-bottom;} -#subCol .chapters ul {margin-left: 0; margin-top: 0.5em;} + background: #f9d9d8 url(../../images/tab_red.gif) no-repeat left top; + border: none; + padding: 1.25em 1.25em 1.25em 48px; + margin-left: 0; + margin-top: 0.25em; +} + +#subCol .chapters { + color: #980905; +} +#subCol .chapters a { + font-weight: bold; +} +#subCol .chapters ul a { + font-weight: normal; +} +#subCol .chapters li { + margin-bottom: 0.75em; +} +#subCol h3.chapter { + margin-top: 0.25em; +} +#subCol h3.chapter img { + vertical-align: text-bottom; +} +#subCol .chapters ul { + margin-left: 0; + margin-top: 0.5em; +} #subCol .chapters ul li { - list-style: none; - padding: 0 0 0 1em; - background: url(../../images/bullet.gif) no-repeat left 0.45em; - margin-left: 0; - font-size: 1em; - font-weight: normal; + list-style: none; + padding: 0 0 0 1em; + background: url(../../images/bullet.gif) no-repeat left 0.45em; + margin-left: 0; + font-size: 1em; + font-weight: normal; } tt { - background: #EEE; - border: 1px solid #CCC; - padding: 0.25em 0.5em; - font-family: monaco, "Bitstream Vera Sans Mono", "Courier New", courier, monospace; + font-family: monaco, "Bitstream Vera Sans Mono", "Courier New", courier, monospace; } code, pre { - font-family: monaco, "Bitstream Vera Sans Mono", "Courier New", courier, monospace; - background: #EEE url(../../images/tab_grey.gif) no-repeat left top; - border: none; - padding: 0.25em 1em 0.5em 48px; - margin-left: 0; - margin-top: 0.25em; - display: block; - min-height: 45px; + font-family: monaco, "Bitstream Vera Sans Mono", "Courier New", courier, monospace; + background: #EEE url(../../images/tab_grey.gif) no-repeat left top; + border: none; + padding: 0.25em 1em 0.5em 48px; + margin-left: 0; + margin-top: 0.25em; + display: block; + min-height: 45px; } .note { - background: #fff9d8 url(../../images/tab_note.gif) no-repeat left top; - border: none; - padding: 1em 1em 0.25em 48px; - margin-left: 0; - margin-top: 0.25em; + background: #fff9d8 url(../../images/tab_note.gif) no-repeat left top; + border: none; + padding: 1em 1em 0.25em 48px; + margin-left: 0; + margin-top: 0.25em; } .info { - background: #d5e9f6 url(../../images/tab_info.gif) no-repeat left top; - border: none; - padding: 1em 1em 0.25em 48px; - margin-left: 0; - margin-top: 0.25em; + background: #d5e9f6 url(../../images/tab_info.gif) no-repeat left top; + border: none; + padding: 1em 1em 0.25em 48px; + margin-left: 0; + margin-top: 0.25em; } .warning { - background: #f9d9d8 url(../../images/tab_red.gif) no-repeat left top; - border: none; - padding: 1em 1em 0.25em 48px; - margin-left: 0; - margin-top: 0.25em; + background: #f9d9d8 url(../../images/tab_red.gif) no-repeat left top; + border: none; + padding: 1em 1em 0.25em 48px; + margin-left: 0; + margin-top: 0.25em; } -.warning tt, .note tt, .info tt {border:none; background: none; padding: 0;} +.warning tt, .note tt, .info tt { + border: none; + background: none; + padding: 0; +} em.highlight { - background: #fffcdb; - padding: 0 0.25em; + background: #fffcdb; + padding: 0 0.25em; } #mainCol ul li { - list-style:none; - background: url(../../images/grey_bullet.gif) no-repeat left 0.5em; - padding-left: 1em; - margin-left: 0; + list-style: none; + background: url(../../images/grey_bullet.gif) no-repeat left 0.5em; + padding-left: 1em; + margin-left: 0; } /* Clearing @@ -431,7 +552,15 @@ em.highlight { visibility: hidden; } -.clearfix {display: inline-block;} -* html .clearfix {height: 1%;} -.clearfix {display: block;} -.clear { clear:both; } +.clearfix { + display: inline-block; +} +* html .clearfix { + height: 1%; +} +.clearfix { + display: block; +} +.clear { + clear: both; +}