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

    Ruby on Rails
    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
		2. Reference documentation	
		3. Trac "integration"
		
---------------------------------------------------------------------------- */

* {
	margin:                     0;
	padding:                    0;	
}

body {	
	margin-bottom:				1em;

	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.6em;
	
	/* Center in IE5.5 */
	text-align:					center;
}

code {
	font-size:					1.2em;
}

h1 {
	margin-bottom:				0.5em;
	font-size:					2em;
	font-weight:				normal;
	letter-spacing:				-0.04em;
}

h2 {
	margin-top:					1em;
	margin-bottom:				0.5em;
	font-size:					1.5em;
	font-weight:				normal;
	letter-spacing:				-0.04em;
}

img {
	border:						none;
}

p {
	margin-bottom:				1em;
}

a:link {
	color:						#BB2233;
}

a:visited {
	color:						#991122;
}

a:hover {
	color:						#CC2233;
	background-color:			#EEEEEE;
}

a:active {
}

small {
	color:						#AAAAAA;
}


ul {
	margin-top:					1em;
	margin-bottom:				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;
}

ol {
	margin-left:				1em;
	padding-left:				1em;
}

ol li {
	margin-left: 				0.5em;
	padding-left:				0.5em;
}

input, textarea, select {
	font-family:				verdana, helvetica, arial, sans-serif;
	font-size:					1em;
	padding:					0.2em;
	border:						1px solid #888888;
}

input:focus, textarea:focus, select:focus {
	border-color:				#333333;
}

blockquote {
	font-style: 				italic;
	padding-left: 				2em;
	color: 						#888888;
	margin-bottom:				1em;
}

pre {
	background-color: 			#eeeeee;
	margin-bottom: 				1em;
	padding: 					1em;
	font-size:					1em;
}

table {
	font-size:					1em;
}

table td {
	padding:					0 1em 0 0;
	vertical-align:				top;
}

table tr td:first-child {
	padding-left:				0;
}

.highlight {
	background-color: #ffc;
}

/* ----------------------------------------------------------------------------
	Structure
---------------------------------------------------------------------------- */

div#container {
	position:					relative;
	width:						90%;
	max-width:					720px;	

	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:						200px;
	overflow:					hidden;
	text-align: center;
}

div#header h1 {
	
/*	background-image:			url('/images/ruby_on_rails.gif');
	background-repeat:			no-repeat;
	background-position:		0px 16px;
*/	font-family: georgia;
	font-size: 30px;
	margin:				10px 0 10px 110px;
	font-weight: bold;
	padding-bottom: 10px;
	text-align: center;
	/* Move the text out of the way */
/*	text-indent:				-5000px;
*/}

div#header h2 {
   font-family: georgia;
	margin: 0;
	margin-left:				110px;
   font-size: 17px;
   color: #968d8d;
   text-align: center;
   padding-bottom: 10px;
}

div#logo {
	float:						left;
	width:						80px;
}

.slivers {
	margin-bottom: 20px;
}
.sliver {
	float:left;
	width: 180px;
	text-align:center;
}
.sliver p {
	font-size: 12px;
}

/* ----------------------------------------------------------------------------
	Specific site-wide elements
---------------------------------------------------------------------------- */

/* Introduction boxes */

.introduction {
	margin-bottom:				1em;
	padding:					   1em;

 	font-size:					1.3em;
 	line-height: 				1.6em;
	background-color:			#D6DFE8;
	
	-moz-border-radius-bottomright:	1em;
}

.introduction p {
	margin-bottom:				0;
}

/* Navigation */

ul#navMain {
	margin: 					0;
	padding: 					5px 0 30px 0;

	list-style-type:			none;	
	font-size: 12px;
}

ul#navMain li {
	display:					inline;
	background-image:			none;	
	margin:						0;
	padding:					0;
}

ul#navMain li {
	border-left:				1px solid #000;
}

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 like this? */
	border-left:				none;		
}

ul#navMain li a {		
	padding:					0.2em 0.5em 0.2em 0.8em;	
	
	color:						#000;
	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 */
body#inicio a.inicio,
body#videos a.videos,
body#descargas a.descargas,
body#documentacion a.documentacion,
body#comunidad a.comunidad {
	font-weight:				bold;
}


/* ----------------------------------------------------------------------------
	Elements for specific areas
---------------------------------------------------------------------------- */

.bordered {
  padding: 2px;
  border: 2px solid #ccc;
}

div.copyright {
  font-size: 11px;
  color: #666;
}

div.sub {
	float: left;
	width: 200px;
	text-align: right;
}

div.sub h1 {
	font-family: georgia;
	font-size: 28px;
	line-height: 28px;
	font-weight: normal;
	text-align: right;
}

div.content p, div.content p.noindent {
	font-size: 18px;
	font-weight: normal;
	line-height: 140%;
	margin-top: 0;
	font-family: georgia;
	margin-bottom: 25px;
}

div.main {
	float: right;
	width: 450px;
	margin-bottom: 0;
}

div.app {
	float: left;
	width: 220px;
	text-align: center;
}

div.app p {
	font-size: 10px;
	font-family: verdana;
	margin: 0;
}

div.app img {
	padding: 1px;
	border: 1px solid #ccc;
	margin-bottom: 5px;
}

div.appmore {
	font-size: 12px;
	font-family: verdana;
	text-align: center;
}


.clearall, .clearallrule {
	margin: 0 0 10px;
	padding: 10px 0 0 0;
	clear: both;
	font-size: 2px;
}

.clearallrule {
	border-bottom: 1px solid #ccc;
}

div.copyright {
  font-size: 11px;
  color: #666;
  text-align:center;
}

table.productgrid img {
	padding: 1px;
	border: 1px solid #ccc;
	margin-bottom: 5px;
}

table.productgrid p {
	font-size: 10px;
	font-family: verdana;
	text-align: left;
}

table.productgrid {
	margin-bottom: 0;
}

table.productgrid td {
	text-align: left;
}