358 lines
5.9 KiB
CSS
358 lines
5.9 KiB
CSS
|
/* ----------------------------------------------------------------------------
|
||
|
|
||
|
Ruby on Rails, hijacked for Hieraki
|
||
|
Stylesheet for http://rubyonrails.org
|
||
|
|
||
|
1. General HTML elements
|
||
|
2. General classes
|
||
|
3. General structure
|
||
|
1. header
|
||
|
2. Content
|
||
|
3. Sidebar
|
||
|
4. Sitewide elements
|
||
|
1. Introduction boxes
|
||
|
2. Navigation
|
||
|
5. Elements for specific areas
|
||
|
1. Weblog
|
||
|
|
||
|
---------------------------------------------------------------------------- */
|
||
|
|
||
|
* {
|
||
|
margin: 0;
|
||
|
padding: 0;
|
||
|
}
|
||
|
|
||
|
body {
|
||
|
color: #333333;
|
||
|
|
||
|
background-color: #FFFFFF;
|
||
|
background-image: url(../images/header_backdrop.png);
|
||
|
background-repeat: repeat-x;
|
||
|
background-position: 0 -25px;
|
||
|
|
||
|
font-size: 80%;
|
||
|
font-family: verdana, helvetica, arial, sans-serif;
|
||
|
line-height: 1.7em;
|
||
|
|
||
|
/* Center in IE5.5 */
|
||
|
text-align: center;
|
||
|
}
|
||
|
|
||
|
h1 {
|
||
|
font-size: 2em;
|
||
|
font-weight: normal;
|
||
|
letter-spacing: -0.04em;
|
||
|
}
|
||
|
|
||
|
h2 {
|
||
|
font-size: 1.5em;
|
||
|
font-weight: normal;
|
||
|
letter-spacing: -0.04em;
|
||
|
}
|
||
|
|
||
|
h1,h2,h3,h4,h5,h6 {
|
||
|
margin-top: 1em;
|
||
|
margin-bottom: 0.5em;
|
||
|
}
|
||
|
.pageheader a:link, .pageheader a:visited{
|
||
|
color: #333;
|
||
|
text-decoration: none;
|
||
|
}
|
||
|
|
||
|
img {
|
||
|
border: none;
|
||
|
}
|
||
|
|
||
|
p {
|
||
|
margin-bottom: 1em;
|
||
|
}
|
||
|
|
||
|
a:link {
|
||
|
color: #BB2233;
|
||
|
}
|
||
|
|
||
|
a:visited {
|
||
|
color: #991122;
|
||
|
}
|
||
|
|
||
|
a:hover {
|
||
|
color: #CC2233;
|
||
|
background-color: #EEEEEE;
|
||
|
}
|
||
|
|
||
|
a:active {
|
||
|
}
|
||
|
|
||
|
ul {
|
||
|
margin-top: 1em;
|
||
|
list-style-type: none;
|
||
|
}
|
||
|
|
||
|
ul li {
|
||
|
margin-left: 0.5em;
|
||
|
padding-left: 1em;
|
||
|
|
||
|
background-image: url(../images/bullet.gif);
|
||
|
background-repeat: no-repeat;
|
||
|
background-position: 0 0.55em;
|
||
|
}
|
||
|
|
||
|
/* ----------------------------------------------------------------------------
|
||
|
Structure
|
||
|
---------------------------------------------------------------------------- */
|
||
|
|
||
|
div#container {
|
||
|
width: 90%;
|
||
|
max-width: 790px;
|
||
|
|
||
|
margin-top: 10px;
|
||
|
margin-left: auto;
|
||
|
margin-right: auto;
|
||
|
|
||
|
font-size: 1em;
|
||
|
|
||
|
/* Don't center text, only div#container */
|
||
|
text-align: left;
|
||
|
}
|
||
|
|
||
|
div#header {
|
||
|
/* This height controls the vertical position of #content and #sidebar */
|
||
|
height: 160px;
|
||
|
overflow: hidden;
|
||
|
}
|
||
|
|
||
|
div#header h1 {
|
||
|
height: 30px;
|
||
|
|
||
|
margin: 0;
|
||
|
margin-top: 10px;
|
||
|
margin-left: 100px;
|
||
|
padding: 0;
|
||
|
font-weight: bold;
|
||
|
font-size: 24pt;
|
||
|
}
|
||
|
div#header p {
|
||
|
height: 30px;
|
||
|
margin: 0;
|
||
|
margin-left: 160px;
|
||
|
padding: 0;
|
||
|
font-weight: bold;
|
||
|
font-size: 14pt;
|
||
|
color: #999;
|
||
|
}
|
||
|
/*
|
||
|
div#logo {
|
||
|
float: left;
|
||
|
width: 110px;
|
||
|
height: 140px;
|
||
|
margin-right: 31px;
|
||
|
}
|
||
|
*/
|
||
|
|
||
|
|
||
|
div#content {
|
||
|
margin-left: 170px;
|
||
|
}
|
||
|
|
||
|
/* Fix the IE only 3pixel jog - documented at http://www.positioniseverything.net/articles/hollyhack.html#haslayout \*/
|
||
|
* html #content {
|
||
|
height: 1px;
|
||
|
}
|
||
|
/* End hide from IE5-mac */
|
||
|
|
||
|
div#sidebar {
|
||
|
float: left;
|
||
|
width: 170px;
|
||
|
margin-top: -4px;
|
||
|
font-size: 0.8em;
|
||
|
}
|
||
|
|
||
|
div#sidebar h2 {
|
||
|
margin: 0;
|
||
|
font-size: 1.1em;
|
||
|
font-weight: bold;
|
||
|
}
|
||
|
|
||
|
div#sidebar ul {
|
||
|
margin-top: 0;
|
||
|
margin-bottom: 1em;
|
||
|
padding: 0;
|
||
|
}
|
||
|
|
||
|
div#sidebar ol li {
|
||
|
margin: 0 0 2px 0px;
|
||
|
padding: 0;
|
||
|
line-height: 1.3em;
|
||
|
background-image: none;
|
||
|
}
|
||
|
|
||
|
div#sidebar ol li a {
|
||
|
display: block;
|
||
|
width: 150px;
|
||
|
padding: 0.2em 0;
|
||
|
}
|
||
|
|
||
|
div#sidebar ul li {
|
||
|
margin-left: 10px;
|
||
|
}
|
||
|
|
||
|
div#sidebar ol>ol {
|
||
|
padding-left: 5px;
|
||
|
padding-right: 5px;
|
||
|
list-style-type: none;
|
||
|
|
||
|
}
|
||
|
|
||
|
div#sidebar ol>ol li a {
|
||
|
display: block;
|
||
|
width: 140px;
|
||
|
padding: 0.2em 0;
|
||
|
margin-left: 10px;
|
||
|
|
||
|
}
|
||
|
|
||
|
div#sidebar ol li a:hover {
|
||
|
}
|
||
|
|
||
|
/* ----------------------------------------------------------------------------
|
||
|
Specific site-wide elements
|
||
|
---------------------------------------------------------------------------- */
|
||
|
|
||
|
/* Introduction boxes */
|
||
|
|
||
|
.introduction {
|
||
|
|
||
|
margin-bottom: 1em;
|
||
|
padding: 1em;
|
||
|
background-color: #D6DFE8;
|
||
|
}
|
||
|
|
||
|
.introduction p {
|
||
|
margin-bottom: 0;
|
||
|
}
|
||
|
|
||
|
/* Navigation */
|
||
|
|
||
|
ul#navMain {
|
||
|
height: 22px;
|
||
|
margin: 0;
|
||
|
margin-left: 140px;
|
||
|
padding: 16px 0;
|
||
|
|
||
|
list-style-type: none;
|
||
|
}
|
||
|
|
||
|
ul#navMain li {
|
||
|
display: inline;
|
||
|
background-image: none;
|
||
|
margin: 0;
|
||
|
padding: 0;
|
||
|
}
|
||
|
|
||
|
ul#navMain li {
|
||
|
border-left: 1px solid #FFFFFF;
|
||
|
}
|
||
|
|
||
|
ul#navMain li.first-child {
|
||
|
/* Wouldn't it be nice if IE was up-to-date with the rest of the world so we could skip
|
||
|
superfluous classes? */
|
||
|
border-left: none;
|
||
|
}
|
||
|
|
||
|
ul#navMain li a {
|
||
|
padding: 0.2em 1em;
|
||
|
|
||
|
color: #FFFFFF;
|
||
|
text-decoration: none;
|
||
|
}
|
||
|
|
||
|
ul#navMain li.first-child a {
|
||
|
/* Wouldn't it be nice if IE was up-to-date with the rest of the world? */
|
||
|
padding-left: 0;
|
||
|
}
|
||
|
|
||
|
ul#navMain li a:hover {
|
||
|
text-decoration: underline;
|
||
|
background-color: transparent;
|
||
|
}
|
||
|
|
||
|
/* Mark the current page */
|
||
|
ul#navMain li.current a {
|
||
|
font-weight: bold;
|
||
|
}
|
||
|
|
||
|
|
||
|
/* ----------------------------------------------------------------------------
|
||
|
Elements for specific areas
|
||
|
---------------------------------------------------------------------------- */
|
||
|
|
||
|
/* Weblog */
|
||
|
|
||
|
.blogEntry {
|
||
|
margin-bottom: 2em;
|
||
|
}
|
||
|
|
||
|
.blogEntry h2 {
|
||
|
margin-top: 0;
|
||
|
margin-bottom: 0;
|
||
|
}
|
||
|
|
||
|
p.metaData {
|
||
|
color: #999999;
|
||
|
font-size: 0.9em;
|
||
|
}
|
||
|
|
||
|
|
||
|
/* Reference documentation */
|
||
|
|
||
|
#reference #sidebar {
|
||
|
display: none;
|
||
|
width: 0;
|
||
|
}
|
||
|
|
||
|
#reference #content {
|
||
|
margin-left: 0;
|
||
|
}
|
||
|
|
||
|
#reference #content #api {
|
||
|
width: 100%;
|
||
|
height: 800px;
|
||
|
}
|
||
|
|
||
|
#reference #logo {
|
||
|
width: 80px;
|
||
|
height: 86px;
|
||
|
|
||
|
margin-right: 0;
|
||
|
}
|
||
|
|
||
|
#reference #logo img {
|
||
|
height: 84px;
|
||
|
}
|
||
|
|
||
|
#reference {
|
||
|
/* The header is smaller on the reference page, move the background up so the menu is in the
|
||
|
proper place still */
|
||
|
background-position: 0 -70px;
|
||
|
}
|
||
|
|
||
|
#reference #header {
|
||
|
height: 90px;
|
||
|
}
|
||
|
|
||
|
#reference #header h1 {
|
||
|
height: 24px;
|
||
|
|
||
|
margin-top: 2px;
|
||
|
margin-left: 0;
|
||
|
|
||
|
background-image: none;
|
||
|
|
||
|
text-indent: 0;
|
||
|
font-size: 1.5em;
|
||
|
font-weight: bold;
|
||
|
|
||
|
}
|
||
|
#reference #container {
|
||
|
max-width: 100%;
|
||
|
}
|