CSS:Euphonies

body { background: white url('./euphoniesBG.jpg') repeat-x fixed top; font: medium arial; color: #406080; } body:before { content: "stylesheet by too_much green_tea"; display: block; text-align: right; margin-right: 2%; margin-top: 5px; color: white; font: bold x-small verdana; } body:after { content: " "; display: block; margin-top: 300px; } a { font-weight: bold; text-decoration: none; } a:link { color: cornflowerblue; } a:visited { color: lightsteelblue; } a:hover { color: gold; } a:active { color: salmon; } div.item { width: 680px; margin: 1em auto; position: relative; } h2.item-title { margin: 0px; padding: 0px; font: bold large arial; color: #6fa62f; } span.item-ordinal { position: absolute; left: 2%; padding: 6px 0.5em 4px; } h2.item-title a { display: block; font: bold large arial; color: #6fa62f; padding: 4px 4em 4px; -moz-border-radius: 16px; border: 2px solid silver; } h2.item-title a:link:after { display: inline; content: "[NEW]"; font-size: small; color: salmon; margin-left: 2em; } h2.item-title a:hover { color: gold; } h2.item-title a:visited { color: silver; } h2.item-title a:active { color: salmon; } div.item:hover h2.item-title a { background-color: #fffedc; border: 2px solid khaki; } div.item-desc { display: none; } div.item-desc img { margin: 4px; } div.item:hover div.item-desc { display: block; font: bold large arial; padding: 1em; background-color: #fffedc; -moz-border-radius: 0px 0px 16px 16px; width: 420px; border: 2px solid lightgrey; border-top: 2px solid #fffedc; position: absolute; left: 54px; top: 90%; z-index: 1; } div.item:hover div.item-desc:before { content: "pubDate missing"; display: block; font: bold large arial; color: silver; padding: 0px; width: 420px; position: absolute; left: 54px; top: 90%; } div.item-enclosure { display: none; } div.item:hover div.item-enclosure { display: block; font: bold large arial; padding: 1em; background-color: #fffedc; -moz-border-radius: 0px 0px 16px 16px; width: 100px; border: 2px solid lightgrey; border-top: 2px solid #fffedc; position: absolute; left: 524px; top: 90%; z-index: 1; } div.item:hover div.item-enclosure:before { content: "Duration: unknown"; display: block; font: bold large arial; padding: 0px; width: 100px; position: absolute; left: 524px; top: 90%; } div.item-duration { display: none; } div.item:hover div.item-duration { display: block; font: bold large arial; padding: 1em 1em 0em 1em; background-color: #fffedc; width: 100px; border: 2px solid #fffedc; border-left: 2px solid lightgrey; border-right: 2px solid lightgrey; position: absolute; left: 524px; top: 90%; z-index: 1; } div.item-pubDate { display: none; } div.item:hover div.item-pubDate { display: block; font: bold large arial; color: darkseagreen; padding: 1em 1em 0em 1em; background-color: #fffedc; width: 420px; border: 2px solid #fffedc; border-left: 2px solid lightgrey; border-right: 2px solid lightgrey; position: absolute; left: 54px; top: 90%; z-index: 1; } div.item-technorati { display: none; }
 * 1) rss-header { width: 700px; margin: 0.5em auto; position: relative; }
 * 2) rss-title { background-image: url("./euphoniesHD.jpg"); background-color: #94d33e; width: 680px; height: 150px; margin: 0px auto; padding: 4px; }
 * 3) rss-link { display: block; font: bold xx-large arial; color: white; text-decoration: none; margin: 30px 1em 0px; }
 * 4) rss-desc { display: none; }
 * 5) rss-header:hover #rss-desc { display: block; font: bold large arial; color: green; padding: 1em; background-color: #fffedc; -moz-border-radius: 16px; max-width: 500px; border: 2px solid lightgrey; position: absolute; left: 10%; top: 45%; z-index: 1; }
 * 6) rss-copyright { display: block; font-weight: bold; color: green; max-width: 500px; position: absolute; left: 10%; bottom: 0px; }
 * 7) rss-image { float: right; margin: 4px 18px 0px 0px; opacity: 0.3; max-width: 144px; max-height: 144px; -moz-border-radius: 4px; }
 * 8) rss-header:hover #rss-image { opacity: 0.9; }