/* opera.css */

/* styling */
body { margin: 0px; padding: 0px; background-color: #FFFFFF; background-image: url(/prx/000/http/www.markschenk.com/cssexp/contentnstyle/images/ologo.png); background-attachment: fixed; background-position: center center; background-repeat: no-repeat; }
h1 { padding: 0px; margin: 20px auto 10px auto; width: 300px; color: #B22222; font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; font-style: normal; font-size: 30px; }
p { padding: 2px; margin: 0px 20px 10px 20px; color: #000000; font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; font-size: 11px; }
div.main { border-style: solid; border-width: 1px; border-color: #000080; padding: 10px; width: 400px; margin: auto auto; background-image: url(/prx/000/http/www.markschenk.com/cssexp/contentnstyle/images/pale.png); text-align: justify; }
div.main:after { color: #808080; font-size: 10px; }
p:before { display: block; color: #000080; font-weight: bold; content: counter(chapter,upper-roman) "-" attr(id); counter-increment: chapter; text-transform: capitalize; }
a,a:visited { padding: 0px; color: #8B0000; font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; font-size: 11px; position: relative; left: 23px; top: -10px; }
a:hover { color: #006400; }
#nostyle { display: none; }

/* content */
#headline { content: "Opera \0026  CSS"; }
#introduction { content: "What is so special about this page\003F  For one thing, it can only be viewed in the Opera 7 browser. This is not because the pages uses proprietary markup but it uses CSS2.1 and CSS3 options which are currently only supported by Opera."; }
#content { content: "I hear you saying: this page doesn't look very special, so what advanced CSS stuff are you using then? Ok, have a look at the page source... what? You don't see any content in the source? That is correct. This pages uses Cascading Style Sheets to produce both style AND content."; }
#stylesheets { display: none; content: "W3C - " attr(href); }
#advanced { content: "Is it possible to use CSS for both style and content? Yes it is. As said, it is advanced CSS stuff. It uses the CSS2 property 'content' for adding information to the page, but this will be explained in detail in the next stylesheet."; }
#usage { content: "The great thing is that you can easily change the appearance and text of a page by merely switching to an alternate stylesheet. Just click on the dropdown menu next to the author/user mode toggle in Opera 7 and select the appropriate one. This way you can serve different pages, simply by serving different stylesheets. Try it!"; }
#usage:after { padding-top: 10px; display: block; content: "There are three stylesheets in this page, each with different content. This is the default page, the second is called \0022 How does it work?\0022  which explains about this page and the third is called \0022 The Sting\0022  and is a showcase with some interesting gadgets."; }
div.main:after { content: "\00A9  2003 - Mark Schenk"; }