/* Formatting for the Cesar Gimenes home page :-D http://crg.eti.br Author: Aurelio Marinho Jargas Cesar Gimenes http://aurelio.net http://crg.eti.br 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 */ } /* Links are underlined only when the cursor is over them */ a { text-decoration : none; } a:link { color : blue; } a:hover { text-decoration : underline; } 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 #000; } /* 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 ****************************/ #header { background : #ccc url(crgEsan.jpeg) no-repeat right; color : white; margin : 0; padding : 1em; } #header * { margin : 0; } #header h3 { font-weight : normal; } /***************************** CONTENT **************************** / The page contents are placed inside the #body DIV when using / the --css-suggar option. Don't confuse it with the 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 : 2em 2em 2em 2em; border-top : 1px solid #000; /* Required: Fixes spacing bug */ line-height : 130%; font-size : 90%; } /* Normal text is gray, bold is black */ #body b { font-weight : normal; color : black; } #body h1 { margin-top : 0.5em; } #body h2 { padding-top : 0.5em; color : #999; 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* blue. / / Images are showed as blocks with auto margins, to get centered. */ #logo { float : right; margin : 0; padding : 0; z-index : 0; } #sidebar { float : right; width : 15.5em; background-color: #fff; color : #000; border-color : #000; border-style : solid; border-width : 1px 1px 1px 10px; margin : 0em 0em 2em 2em; padding : 0.5em; z-index : 1; } #sidebar a { display : block; color : #000; font-weight : normal; } #sidebar a:hover { background-color: #ccc; } #sidebar ul { margin : 0 0 0 1em; padding : 0; } #sidebar ul li { list-style-type : none; } #sidebar p { margin : 0; } #sidebar img { display : block; margin : 1em auto 0 auto; } /* A special link with the lang ID, placed at the top/right edge */ #sidebar a#lang { float : right; margin : -1em -1em 0 0; 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-size : 80%; */ } #footer p { padding : 0; margin : 0; } #footer a { font-weight : normal; } #footer #validate { float : right; } #footer img { border : none; float : right; margin-left : 5px; } #foot_left { float : left; width : 50%; } /******* 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 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 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; } /* 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%; } /* Back to normal bold */ body#download li b { font-weight : bold; color : #444; } /* The sources are preferred */ body#download a.sources { font-size : 140%; } /* 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; } /* util */ figure { text-align: center; margin-left:auto; margin-right:auto; } legend { font-style : italic; text-align: center; margin-left:auto; margin-right:auto; } .center { display:block; margin-left:auto; margin-right:auto; }