/* Make sure you've got a page with well-formed standards based HTML 4.01, link it to this style sheet and you should see the result straight away. */ /* The element is just that, an element. So there's no reason why you can't give it its own style then make it appear around the using a margin - that's all we do here. You might even like to add your own background image properties to this element to get an even more dynamic effect. */ html {Xbackground-color: #ccaaff; ZZbackground-color: #bdbf8e; QQbackground-color: #AACCFF;} @media print { .noprint { display: none; } } @media screen { .noscreen { display: none; } } .searchbox { font-family: "Lucida Grande", LucidaGrande, Lucida, Verdana, Helvetica, Arial, sans-serif; font-size: 10px; color: #666666; } .sidelinks { width: 100%; color: #7F0000; background: #eeeeee; list-style-type: square; text-indent: -2px; } .sidelinks a:link {text-decoration: none; color: black;} .sidelinks a:visited {text-decoration: none; color: black;} .sidelinks a:hover {text-decoration: underline; color: black;} .sidelinks a:active {text-decoration: none; color: black;} .sidelinks th {font: 12px "Lucida Grande", LucidaGrande, Lucida, Verdana, Helvetica, Arial, sans-serif;} .sidelinks td {font: 10px "Lucida Grande", LucidaGrande, Lucida, Verdana, Helvetica, Arial, sans-serif;} .footer { font-family : "Lucida Grande", LucidaGrande, Lucida, Verdana, Helvetica, Arial, sans-serif; font-size : 11px; color : #999999; letter-spacing : -1px; } .alert { background: #fff6bf url(silk_icons/exclamation.png) center no-repeat; background-position: 15px 50%; /* x-pos y-pos */ text-align: left; padding: 5px 20px 5px 45px; border-top: 2px solid #ffd324; border-bottom: 2px solid #ffd324; } body {XXXmargin: 3%; xxxpadding: 2; XXXpadding-left: 10px; XXXpadding-right: 10px; XXXpadding-bottom: 20px; background-color: #ffffff; xxxbackground-color: #e4e9c1; xxxfont-family: "Lucida Grande", LucidaGrande, Lucida, Verdana, Helvetica, Arial, sans-serif; font-size: 1em; XXXborder: 3px #486ba1 solid;} /* The following gives a special effect for

elements which works best if there is only one of them on at the top of each page so they are a sort of title. / h1 {background-color: #486ba1; margin: 0px; color: #FFCC99; / was: bdbf8e which I thought looked too dark / font-family: "Lucida Grande", LucidaGrande, Lucida, Verdana, Helvetica, Arial, sans-serif; font-size: 1.8em; padding-left: 3px; padding-right: 3px; padding-bottom: 5px; padding-top: 5px; text-align: center; letter-spacing: 2px; font-style: italic; border-bottom: 20px #FFFFFF solid;} / was: bdbf8e / h2 {background-color: #486ba1; color: #e4e9c1; padding-right: 3px; padding-left: 3px; padding-top: .5%; padding-bottom: .5%; font-family: "Lucida Grande", LucidaGrande, Lucida, Verdana, Helvetica, Arial, sans-serif; font-weight: bold; font-size: 1.6em; text-align: center; margin: 0px; border-bottom: 20px #FFFFFF solid;} h3 {border-bottom: 2px #486ba1 solid; padding-top: 1.5%; font-family: "Lucida Grande", LucidaGrande, Lucida, Verdana, Helvetica, Arial, sans-serif; font-size: 1.3em; font-style: italic; font-weight: bold; color: #486ba1; text-align: left; padding-left: 3px;} h4 {color: #486ba1; padding-right: 3%; XXXpadding-left: 3%; font-family: "Lucida Grande", LucidaGrande, Lucida, Verdana, Helvetica, Arial, sans-serif; font-weight: bold; / text-decoration: underline; / font-size: 1.1em; font-style: italic; text-align: left;} / The following four selectors allow you to select links when they are in the four different states: / / link - before they have been visited / / visited - after it has been visited / / hover - when the mouse is over the link / / active - when the user clicks the link. / / NOTE!!! These selectors MUST be in that order: link, visited, hover, active! / a:link {xxxtext-decoration: none; xxxbackground-color: #6d6c40; xxxcolor: white;} a:visited {xxxtext-decoration: none; xxxbackground-color: #6d6c40; xxxcolor: white;} a:hover {background-color: #FFFF66;} a:active {background-color: #FFFF00;} a.green:link {color: green;} a.green:visited {color: green;} a.green:hover {color: green;} a.green:active {color: green;} a.white:link {color: white;} a.white:visited {color: white;} a.white:hover {color: white;} a.white:active {color: white;} a.sidemenu1:link, a.sidemenu1:visited {text-decoration: none; font-family: "Lucida Grande", LucidaGrande, Lucida, Verdana, Helvetica, Arial, sans-serif; font-size: 14px; / was: 1.0em / color: #FFCC99; xxxbackground-color: #6d6c40; } a.sidemenu1:hover {background-color: #FFFF66; color: #000000; } a.sidemenu2:link, a.sidemenu2:visited {text-decoration: none; font-family: "Lucida Grande", LucidaGrande, Lucida, Verdana, Helvetica, Arial, sans-serif; font-size: 12px; / was: 0.8em / color: #FFFFFF; xxxbackground-color: #6d6c40; } a.sidemenu2:hover {background-color: #FFFF66; color: #000000; } a.sidemenu3:link, a.sidemenu3:visited {text-decoration: none; font-family: "Lucida Grande", LucidaGrande, Lucida, Verdana, Helvetica, Arial, sans-serif; font-size: 12px; color: #FFCC99; xxxbackground-color: #6d6c40; } a.sidemenu3:hover {background-color: #FFFF66; color: #000000; } / paragraphs and quotes / / p {margin-left: 3%; margin-right: 3%; margin-top: 2%; margin-bottom: 2%;} / blockquote {xxxbackground-color: #a8d9f0; xxxcolor: #486ba1; font-style: italic; margin-right: 6%; margin-left: 6%; xxxfont-weight: bold; padding: 5px;} / This section of the style sheet has just a few selectors and properties to help you find your way around adding style to regular, standards-based HTML 4.01 tables (ie, a table to be used for presenting tabular information). / / The following selector selects the table as a whole and gives it a background color and a border. The last couple of properties might be unfamiliar to you. border-collapse allows you to specify that adjacent borders should collapse onto one another. border-spacing allows you to specify a gap between the borders of cells in a table, or in this case that there should be no gap. You'll find these properties in Style Master on the Display Type Editor. / ZZZtable {border: 1px #486ba1 solid; display: table; border-collapse: collapse; border-spacing: 0px; background-color: #a8d9f0; color: #486ba1; margin-left: 5%; margin-right: 5%; width: auto;} / Using the element for cells in the top row of an HTML table means that it is easy to apply a different style to this row and make it stand out from the rest of the table. / th {text-align: center; background-color: #486ba1; / was: 486ba1 */ color: #e4e9c1;} th.conservative {text-align: center; background-color: RED; zzcolor: #e4e9c1;} th.liberal {text-align: center; background-color: BLUE; zzcolor: #e4e9c1;} XXXth {text-align: left; background-color: #486ba1; color: #e4e9c1;} XXXtd, XXXth {border: 1px #486ba1 solid; padding: 5px;} table.bucks {border: 0px #486ba1 solid; font-size: 12px;}