/* ----------------------------------------------------------------------------

    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%;
}