/* 
   Formatting for the txt2tags site
   http://txt2tags.org
   
   Author: Aurelio Jargas
   http://aurelio.net
   
   License: Public Domain
*/



/***************************** GLOBAL **************************** 
/ Here are the global rules, used everywhere on the page. */
body
	{
	background-color: white;
	color		: #444;
	margin		: 0;
	padding		: 0;
	font-family : sans-serif;
	overflow	: scroll;  /* Avoids dancing menu */
	overflow-x	: auto; /* IE: horizontal bar is sooo large */
	}

/* Links are underlined only when the cursor is over them */
a
	{
	text-decoration : none;
	}
a:link
	{
	color		: blue;
	font-weight : bold;
	}
a:hover
	{
	text-decoration : underline;
	background		: #ccf;
	}
a:visited
	{
	color		: #66f;
	}

/* That nice green background on some words and code samples */
code
	{
	background-color: #eee;
	border		: 1px dotted #ddd;
	}
pre
	{
	background-color: #eee;
	margin-left : 3em;
	margin-right	: 2em;
	padding		: 8px;
	border		: 1px outset gray;
	}

/* Tables are used by: docs, sample */
table
	{
	font-size	: 100%; /* Needed to inherit the body font size*/
	border-color	: #ccc;
	}
th
	{
	background-color: #ddd;
	padding		: .5em 0;
	border-color	: #ccc;
	border-style	: solid;
	}
td
	{
	border-style	: none;
	padding		: .2em .5em;
	}

form
	{
	margin-bottom	: 2em;
	}

/* Mark the tooltip'ed texts (underline and highlight) */
span.tooltip
	{
	border-bottom	: 1px dashed #444;
	}
span.tooltip:hover
	{
	background-color: #cf9;
	}
a.donate
	{
	font-size	: smaller;
	text-align	: center;
	margin		: 0;
	padding		: 0;
	}

/***************************** HEADERS **************************** 
/ Remember that headers are the first three lines of the source file.
/ They are placed inside the #header DIV when using --css-suggar.
/ So we can format it freely without messing other rules.
/
/ Yes, it is that green strip at the top. Note that the white gems
/ image is referred as background.
*/

#header
	{
	background	: #6c6 url(img/t2tgems.png) no-repeat right;
	color		: white;
	margin		: 0;
	padding		: 1em;
	}
#header *
	{
	margin		: 0;
	}
#header h3
	{
	font-weight : normal;
	}
#header a
	{
	color		: white;
	text-decoration : none;
	}
#header a:hover
	{
	background	: transparent;
	}


/***************************** CONTENT **************************** 
/ The page contents are placed inside the #body DIV when using
/ the --css-suggar option. Don't confuse it with the <body> tag.
/ I know it would be better to call it #content, but... too late.
/
/ Inside #body there are the sidebar and the page contents. The
/ sidebar has its own DIV, but the contents doesn't. I could have
/ made an extra DIV for it, but it is not strictly necessary. So
/ some special care is needed to format both using the same container.
*/

#body
	{
	margin		: 0;
	padding		: 0 2em 2em 2em;
	border-top	: 1px solid #6c6; /* Required: Fixes spacing bug */
	line-height : 130%;
	font-size	: 90%;
	_font-size	: 80%; /* IE: Font becomes ugly with 90% */
	}

/* Normal text is gray, bold is black */
#body b
	{
	font-weight : normal;
	color		: black;
	}

#body h1
	{
	margin-top	: 1.5em;
	}
#body h2
	{
	padding-top : 1em;
	color		: #444;
	font-size	: 150%;
	font-weight : normal;
	}


/***************************** SIDEBAR **************************** 
/ The sidebar is a DIV made "by hand", inserting custom HTML code
/ on the page with %!postproc filters.
/
/ Yes, it is that green strip at the right with the menu links.
/ This is the most tricky part of the CSS, some magic was necessary.
/
/ The sidebar is floated right with its width set in EMs, so it scales
/ with the text size, not window. Cute.
/
/ The right margin is negative so the sidebar can "escape" the #body
/ box padding and stick with the right border of the window.
/
/ The menu links are defined as block so you can click outside the
/ text and it will work. And they're *always* the same color, visited
/ or not.
/
/ Images are showed as blocks with auto margins, to get centered.
*/

#sidebar
	{
	float		: right;
	width		: 9.5em;
	background-color: #cf9;
	color		: #030;
	border-color	: #fff;
	border-style	: solid;
	border-width	: 0 0 1px 1px;
	margin		: 0 -2em 1em 2em;
	padding		: 1em;
	z-index		: 1;
	/* IE: Box model strikes again */
	_width		: 11.5em;
	_margin		: 0 -1em 0 2em;
	}
#sidebar a
	{
	display		: block;
	color		: #363;
	font-weight : normal;
	}
#sidebar a:hover
	{
	background-color: #ad7;
	}
#sidebar ul {
	margin		: 0 0 0 1em;
	padding		: 0;
}
#sidebar ul li {
	list-style-type : none;
	_border		: 1px solid #cf9;  /* IE: fixes spaced items bug */
}
#sidebar p
	{
	margin		: 0;
	}
#sidebar img
	{
	display		: block;
	margin		: 1em auto 0 auto;
	_text-align : center; /* IE: margin:auto didn't work */
	}

/* A special link with the lang ID, placed at the top/right edge */
#sidebar a#lang
	{
	float		: right;
	margin		: -1em -1em 0 0;
	_margin-right	: -.5em; /* IE: well... */
	font-size	: 80%;
	}



/****************************** FOOTER **************************** 
/ Not using footer fixed at the bottom because it is strange.
/ The footer must follow the contents, not the window height.
*/

#footer
	{
	margin		: 3em 0 0 0;
	padding		: .3em;
	border-top	: 1px solid #ccc;
	font-style	: italic;
	_font-style : normal; /* IE: Italic is ugly */
	font-size	: 80%;
	clear		: both;
	}
#footer p
	{
	padding		: 0;
	margin		: 0;
	}
#footer a
	{
	font-weight : normal;
	}
#footer #validate
	{
	float		: right;
	}
#footer img
	{
	float		: right;
	margin-left : 5px;
	}

/******* Current menu item detection
/
/ Now breath. This is a CSS black magic.
/
/ All pages use a special %!postproc to add an ID to it's <body> tag.
/ All menu items have their own ID also.
/ If we have unique identifiers for pages and menu items, we can
/ combine them to know which is the item for a specific page.
/
/ This is what the following rules do.
/ They add special formatting only for the current page menu item.
/
/ Reading the first: If we're on the #home page, add the bullet
/ for the list item #menuhome, inside the sidebar.
*/

body#home #sidebar li#menuhome,
body#oldnews #sidebar li#menuoldnews,
body#features #sidebar li#menufeatures,
body#sample #sidebar li#menusample,
body#shots #sidebar li#menushots,
body#docs #sidebar li#menudocs,
body#tips #sidebar li#menutips,
body#online #sidebar li#menuonline,
body#markup #sidebar li#menumarkup,
body#download #sidebar li#menudownload,
body#changelog #sidebar li#menuchangelog,
body#tools #sidebar li#menutools,
body#children #sidebar li#menuchildren,
body#comments #sidebar li#menucomments,
body#team #sidebar li#menuteam,
body#ml #sidebar li#menuml,
body#art #sidebar li#menuart
	{
	list-style-type : square;
	}


/************************** PAGE SPECIFIC ************************* 
/ Since all the pages have an unique ID on <body> tag, we can set
/ specific rules in a breeze, avoiding %!postproc tricks on sources,
/ or multiple tiny CSS files all around.
*/

/* Old News: headlines are bigger and dates are tiny */
body#oldnews dt
	{
	margin-top	: 2em;
	font-size	: 150%;
	color		: #999;
	}
body#oldnews dt i
	{
	font-size	: 60%;
	color		: #aaa;
	}

/* Highlight news about releases */
body#oldnews dd.release
	{
	background-color: #eee;
	border		: 1px solid #ddd;
	color		: #333;
	}

/* Underline is used to mark people names on the Old News */
body#oldnews dd u
	{
	background-color: #eee;
	border		: 1px dotted #ddd;
	text-decoration : none;
	}

/* Make the flags table smaller, to fit page width */
body#docs td
	{
	padding		: 0;
	}

/* Flags are links, make it clear */
body#docs td img
	{
	border		: 1px solid blue;
	}

/* Highlight table row */
body#docs tr:hover,
body#download tr:hover
	{
	background-color: #cf9;
	}

/* Highlight the important parts of source code */
body#new-target pre b
	{
	color:red;
	}

/* Avoid pre blocks over sidebar */
body#sample pre,
body#tips pre
	{
	margin-right	: 12em;
	}

/* Increase the contrast to make it more readable */
body#shots h2, body#art h2
	{
	color		: #666;
	}

/* Tips page gets special formatting */
body#tips #body h1
	{
	padding		: 2em 0 1em 0;
	}
body#tips #body h2
	{
	color		: #000;
	font-weight : bold;
	border-top	: 1px solid #ccc;
	padding-top : 1.5em;
	padding-bottom	: 1em;
	margin-top	: 1.5em;
	}
body#tips .toc
	{
	margin-top	: 2.5em;
	line-height : 1.7em;
	}

/* Highlight the catchy terms */
body#features li b
	{
	background-color: #cf9;
	color		: #444;
	}

/* Highlight the "thanks" messages */
body#download li em,
body#changelog li em
	{
	color		: #6c6;
	font-size	: 80%;
	}

/* Issues */
body#changelog a.bug
	{
/*	text-decoration: line-through;*/
	font-weight:normal;
	color:red;
/*	background-color:#fee;*/
	}

/* SVN revision numbers */
body#changelog a.rev
	{
	font-weight:normal;
/*	background-color:#eef;*/
	}

/* Back to normal bold */
body#download li b
	{
	font-weight : bold;
	color		: #444;
	}

/* The sources are preferred */
body#download a.sources
	{
	font-size	: 140%;
	}

body#download td img
	{
	width:36px;
	}

body#download code
	{
	background-color:transparent;
	border-width:0;
	}

body#download table
	{
	border-collapse:collapse;
	}

/* Markup table is tricky, make it smaller and pretty */
body#markup table
	{
	clear		: right;
	border-spacing	: 0;
	}
body#markup table td
	{
	padding		: 2em 0;
	border-bottom	: 1px solid #ccc;
	}
body#markup table td h1,
body#markup table td h2,
body#markup table td h3
	{
	margin		: 0;
	padding		: 0;
	}
body#markup table td pre
	{
	margin		: 0 1.5em 0 0;
	padding		: 0 .5em 1em .5em;
	}
body#markup table td dt
	{
	font-style	: italic;
	}
body#markup table td table td
	{
	border		: 1px solid #ccc;
	padding		: .5em;
	}

/* The nice testimonials box */
#testimonials
	{
	clear		: right;
	float		: right;
	width		: 18em;
	margin		: 2em 0 0 2em;
	padding		: 1em;
	font-family : serif;
	color		: #222;
	/* Tried outset, but the colors change on Opera */
	border-top	: 1px solid #ccc;
	border-left : 1px solid #ccc;
	border-right	: 2px solid #999;
	border-bottom	: 2px solid #999;
	}
/* Brighten the names to improve comments readability */
#testimonials .name
	{
	color		: #999;
	}

#donate .ballon
	{
	background	: #eee url(img/aurelio.jpg) no-repeat bottom left;
	padding		: 2em 82px 1em 82px;
	margin		: 3em 0 2em 1em;
	width		: 20em;
	border		: 5px solid #555;
	}
#donate .ballon p
	{
	font-family : skia, sans-serif;
	text-align	: center;
	line-height : 140%;
	}
#donate .ballon p:hover
	{
	color		: black;
	}

/* Splash download button */
body#home img.splashimg
	{
	display		: block;
	margin		: 4em auto;
	text-align	: center;
	}
body#home a:hover img
	{
	outline		: 3px solid blue;
	}
