/* ÉÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍ PROGRAMº 45Hours DATE WRITTEN³ 07/11/09 ³BY³ Chuck Milbourne º LAST CHANGED³ / / ³BY³ PURPOSEº Style Sheet for Web Site CHANGE º ÄÄÄÄÄÄÄÄÈÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍ 07/15/09 I spent at least two hours trying to figure out how to style radio buttons and checkboxes. I've tried INPUT.Radio and INPUT:Radio and CLASS=Radio and ID=Radio. Nothing works and so I give up. 07/11/09 I've completely reworked my site's style sheet. It's basic color palette are described bythe General Class Selector 'MYxx' and complementary/contrasting colors using 'GExx'. My design objectives were: (1) to provide a harmonious look to all pages, (2) reduce the need to insert in-line CSS in the actual code, (3) enable incremental improvements in the appearance of my web site as my understanding of CSS improves, (4) reduce the need to add HTML to improve spacing, (5) make pages easy to read for users over 40. Use DisplayCSSExamples.htm to display the styles. Although this version represents a tremendous improvement from my initial style sheet, it still evidences my incomplete understanding as to how the CSS inheritance model works and my incomplete knowledge of the CSS attributes. ÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄ*/ /* TAG SELECTORS */ BODY {Font-Family: verdana, arial, geneva, helvetica, sans-serif; Color: rgb(0,42,42); Background-Color: rgb(255,255,255); Background-Image: url(images/BlueFall.gif); Background-Repeat: repeat-x; Margin: 0px; Padding: 0px; Font-Size: 120%; Line-Height: 1.2; } P, H1, H2, H3, H4, H5, H6, UL {Margin: 1em 20px 1em 20px;} /*ÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄ#TABLEÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄ Since tables are used to format blocks (e.g., the banner and footer), styling for a table should be explicitly enabled using "". (This CSS was adapted from http://veerle.duoh.com/blog/comments/a_css_styled_table/ ). ÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄ*/ TABLE#MYTABLE {Width: 95%;} TABLE#MYTABLE CAPTION {Font-Weight: bold; Font-Style: normal; Font-Size: 14pt ;Text-Align: center; Color: rgb(25,79,78); Border-Top: 1px solid grey; Border-Bottom: 1px solid grey; Margin: 0 0 25px 0; Padding: 8px 0 8px 0;} TABLE#MYTABLE TH {Font-Weight: bold; Font-Size: 10pt; Color: rgb(20,42,42); Border-Right: 1px solid rgb(193,218,215); Border-Bottom: 1px solid rgb(193,218,215); Border-Top: 1px solid rgb(193,218,215); Text-Align: left; Padding: 6px 6px 6px 12px; Background: rgb(202,232,234) url(images/bg_header.jpg) no-repeat;} TABLE#MYTABLE TR.EVEN TH {Border-Left: 1px solid rgb(193,218,215); Border-Top: 0; Background: white url(images/bullet1.gif) no-repeat;} TABLE#MYTABLE TR.ODD TH {Border-Left: 1px solid rgb(193,218,215); Border-Top: 0; Background: rgb(238,251,253) url(images/bullet2.gif) no-repeat;} TABLE#MYTABLE TH.NOBG {Border-Top: 0; Border-Left: 0; Border-Right: 1px solid rgb(193,218,215); Background: none; Margin: 0 0 0 0;} /* Makes cell invisible. */ TABLE#MYTABLE TD {Border-Right: 1px solid rgb(193,218,215); Border-Bottom: 1px solid rgb(193,218,215); Background: white; Padding: 0px 6px 0px 12px; Color: RGB(20,42,42);} TABLE#MYTABLE TR.ODD TD {Background: rgb(238,251,253); Color: rgb(20,42,42);} TABLE#MYTABLE TR.LTAN TD {Background: rgb(245,245,220);} TABLE#MYTABLE TR.LGREY TD {Background: rgb(227,227,227);} TABLE#MYTABLE TR.LYELLOW TD {Background: rgb(255,255,204);} TABLE#MYTABLE TD.FOOT {Font-Size: 8pt; Color: rgb(22,113,114); Padding-Bottom: 5px; Border-Right: 0px; Background: none; Padding-Left: 3em; Text-Indent: -1em; } /*ÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄHyperbuttonÄÄÄÄÄÄÄÄÄÄ*/ #HyperButton { } #HyperButton A {Border-Top : 2px solid rgb(0,0,0); Border-Bottom: 2px solid rgb(0,0,0); Border-Left: 2px solid rgb(0,0,0); Border-Right: 2px solid rgb(0,0,0); Font-Weight: bold; Padding: 3; Background: rgb(8,45,177); Background: rgb(238,251,253); Color: rgb(255,255,255); Text-Decoration: none;} #HyperButton A:HOVER {Background: rgb(0,0,0); Color: rgb(255,255,255);} /*ÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄHyperlinkÄÄÄÄÄÄÄÄÄÄÄÄ*/ A:LINK { Color: blue; Text-Decoration: none;} A:ACTIVE {Background-Color: rgb(255, 96, 55); Text-Decoration: none;} A:VISITED { Color: rgb(90,54,150); Text-Decoration: none;} A:HOVER {Background-Color: rgb(255,255,204); Text-Decoration: underline;} /*ÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄHeadingsÄÄÄÄÄÄÄÄÄÄÄÄÄ*/ H1 {Font-Size: 200%; Font-Weight: bold; Color: rgb(255,255,255); Margin-Top: 6pt; Margin-Bottom: 1pt; Background-Color: rgb(25,79,42); Border-Bottom: 2px solid rgb(118,219,239);} H2 {Font-Size: 180%; Font-Weight: bold; Color: rgb(238,251,253); Margin-Top: 5pt; Margin-Bottom: 1pt; Background-Color: rgb(22,113,114); Border-Bottom: 2px solid rgb(118,219,239);} H3 {Font-Size: 160%; Font-Weight: bold; Color: rgb(238,251,253); Margin-Top: 4pt; Margin-Bottom: 1pt; Background-Color: rgb(24,158,156); Border-Bottom: 2px solid rgb(118,219,239);} H4 {Font-Size: 140%; Font-Weight: bold; Color: Color: rgb(25,79,78); Margin-Top: 3pt; Margin-Bottom: 1pt; Background-Color: rgb(118,219,239); Border-Bottom: 2px solid rgb(118,219,239);} H5 {Font-Size: 120%; Font-Weight: normal; Color: Color: rgb(25,79,78); Margin-Top: 2pt; Margin-Bottom: 1pt; Background-Color: rgb(185,237,248); Border-Bottom: 2px solid rgb(118,219,239);} H6 {Font-Size: 100%; Font-Weight: normal; Color: rgb(25,79,78); Margin-Top: 1pt; Margin-Bottom: 1pt; Background-Color: rgb(238,251,253); Border-Bottom: 2px solid rgb(118,219,239);} /*ÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄFormÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄ 07/16/09: Re the following two lines pertaining FIELDSET. I have no idea why this works. I would have thought that the FIELDSET would have been sufficient to set the BORDER attributes but for some reason the .FIELDSET is required to make it work; that is for the BORDER attributes to be made manifest. The solution:http://www.vbulletin.com/forum/showthread.php?t=129908 . The magnitude of the Font-Size value seems to make no sense. */ FIELDSET {Border-Width: 9px; Border-Style: Solid; Border-Color: rgb(118,219,239); } LEGEND {Font-Size: 16pt; Font-Weight: bold; Font-Style: italic; Color: rgb(25,79,78); Padding: 10px 10px ;} /* Gave up trying to style radio buttons. (See 07/15/09) */ /* For some reason, INPUT (and probably the other related form tags, do not inherit the form attributes from the BODY tag. (08/10/2009) */ INPUT, OPTION, OPTGROUP, TEXTAREA, SELECT {Margin: 14px 0px 0px 0px; Color: RGB(0,0,0); Background-Color: rgb(255,255,153); Border: rgb(34,109,107) solid 1px; Font-Size: 14pt; Font-Family: verdana, arial, geneva, helvetica, sans-serif;} UL {Margin-Left: 2em; List-Style-Type: disc; List-Style-Position: outside;} LI {Padding-Top: .4em;} /* Use to display a value the user may not change. */ .DISABLED {Color: red; Background-color: transparent; Border-Style: none;} TEXTAREA {Max-Height: 400px; Width: 70%;} LABEL {Display: block; Float: left; Clear: both; Color: rgb(22,113,114); Width: 150px; Text-Align: right; Font-Style: italic; Font-Size: 14pt; Padding: 0; Margin: 12px 20px 0 0;} .INPUT-BOX {Color: black; Background-Color: rgb(255,0,0); Border: rgb(34,109,170) solid 1px; } .PAGE-TITLE {Font-Weight: normal; Font-Size: 120%; Color : rgb(207,242,250);} /* Some screens use what I call a "hyper-buttons" to link to other pages. These buttons are hyperlinks styled to look like the INPUT/SUBMIT buttons on the form. To use these buttons, put the hyperlinks into DIV using ID='HyperButton'. You can distinguish between the two by moving the mouse over the button. If the mouse pointer changes to a hand, it's a hyper-button. --> CM (08/19/09) */ #HyperButton {Text-Align: center;} .SUBMIT-BUTTON, #HyperButton A {Font-Size: 12pt; Font-Weight: Normal; Margin-Left: 0em; Margin-Right: 2em; Color: rgb(20,42,42); Background: white; Border: 3px rgb(154,204,255) outset} /* Augments A in
block.*/ #HyperButton A {Font-Size: 12pt; Padding: .1em .5em .1em .5em;} .SUBMIT-BUTTON:HOVER, #Hyperbutton A:HOVER {Color: black; Background: RGB(185,237,248);} P.EXAMPLE {Margin: 0px 0px 0px 172px; Color: rgb(128,128,128); Font-Size: 14pt; Padding-Left: 0pt; Padding-Right: 0pt;} .ERROR {Color: rgb(255,255,255); Background-Color: rgb(255,96,55); Padding: .2em .5em .2em 1em;} .HRADIO {Margin:20px 10px 0 5px} .HCHECKBOX {Margin:20px 10px 0 5px} /*ÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄColorÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄ*/ .MYF0 {Color: white;} .MYF1 {Color: rgb(238,251,253);} .MYF2 {Color: rgb(185,237,248);} .MYF3 {Color: rgb(118,219,239);} .MYF4 {Color: rgb( 24,158,156);} .MYF5 {Color: rgb( 22,113,114);} .MYF6 {Color: rgb( 25, 79, 78);} .MYF7 {Color: rgb( 20, 42, 42);} .MYF8 {Color: black;} .MYB0 {Background-Color: white;} .MYB1 {Background-Color: rgb(238,251,253);} .MYB2 {Background-Color: rgb(185,237,248);} .MYB3 {Background-Color: rgb(118,219,239);} .MYB4 {Background-Color: rgb( 24,158,156);} .MYB5 {Background-Color: rgb( 22,113,114);} .MYB6 {Background-Color: rgb( 25, 79, 78);} .MYB7 {Background-Color: rgb( 20, 42, 42);} .MYB8 {Background-Color: black;} .GEF0 {Color: rgb(255,255,204);} .GEF1 {Color: rgb(255,255, 0);} .GEF2 {Color: rgb(161,198,199);} .GEF3 {Color: rgb( 14,156,190);} .GEF4 {Color: rgb( 255,96, 55);} .GEF5 {Color: rgb(246, 52,112);} .GEF6 {Color: rgb(226,247,252);} .GEF7 {Color: rgb(245,245,220);} .GEF8 {Color: rgb(212,209,176);} .GEB0 {Background-Color: rgb(255,255,204);} .GEB1 {Background-Color: rgb(255,255, 0);} .GEB2 {Background-Color: rgb(161,198,199);} .GEB3 {Background-Color: rgb( 14,156,190);} .GEB4 {Background-Color: rgb(255, 96, 55);} .GEB5 {Background-Color: rgb(246, 52,112);} .GEB6 {Background-Color: rgb(226,247,252);} .GEB7 {Background-Color: rgb(245,245,220);} .GEB8 {Background-Color: rgb(212,209,176);} .GRF0 {Color: rgb(227,227,227);} .GRF1 {Color: rgb(217,217,217);} .GRF2 {Color: rgb(210,210,210);} .GRF3 {Color: rgb(204,204,204);} .GRF4 {Color: rgb(187,187,187);} .GRF5 {Color: rgb(170,170,170);} .GRF6 {Color: rgb(119,119,119);} .GRF7 {Color: rgb( 85, 85, 85);} .GRF8 {Color: rgb( 68, 68, 68);} .GRF9 {Color: rgb( 51, 51, 51);} .GRB0 {Background-Color: rgb(227,227,227);} .GRB1 {Background-Color: rgb(217,217,217);} .GRB2 {Background-Color: rgb(210,210,210);} .GRB3 {Background-Color: rgb(204,204,204);} .GRB4 {Background-Color: rgb(187,187,187);} .GRB5 {Background-Color: rgb(170,170,170);} .GRB6 {Background-Color: rgb(119,119,119);} .GRB7 {Background-Color: rgb( 85, 85, 85);} .GRB8 {Background-Color: rgb( 68, 68, 68);} .GRB9 {Background-Color: rgb( 51, 51, 51);} .INDENT1 {Padding-Left: 50pt;} .INDENT2 {Padding-Left: 75pt;} .INDENT3 {Padding-Left: 100pt;} .INDENT4 {Padding-Left: 125pt;} .SIZE300 {Font-Size: 300%;} .SIZE250 {Font-Size: 250%;} .SIZE200 {Font-Size: 200%;} .SIZE180 {Font-Size: 180%;} .SIZE160 {Font-Size: 160%;} .SIZE140 {Font-Size: 140%;} .SIZE120 {Font-Size: 120%;} .SIZE100 {Font-Size: 100%;} .SIZE90 {Font-Size: 90%;} .SIZE80 {Font-Size: 80%;} .SIZE70 {Font-Size: 70%;} .SIZE60 {Font-Size: 60%;} .SIZE50 {Font-Size: 50%;} .SIZE40 {Font-Size: 40%;} .BOLD {Font-Weight: bold;} .ITALICS {Font-Style: italic;} /*ÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄSpecialÄÄÄÄÄÄÄÄÄÄÄÄÄÄ*/ .DetailBoxDiv {Font-Size: 75%;Background-Color: rgb(185,237,248); Border-Top: 2px inset rgb(24,158,156); Border-Left: 2px inset rgb(24,158,156); Border-Right: 1px inset rgb(255,255,255); Border-Bottom: 1px inset rgb(255,255,255); Margin: 0 5em 0 5em; Padding: 0 .3em 0 0;} .DetailBoxDivFoot {Font-Size: 75%; Border-Top: 2px inset rgb(24,158,156); Border-Left: 2px inset rgb(24,158,156); Border-Right: 2px inset rgb(187,187,187); Border-Bottom: 2px inset rgb(187,187,187); Background-Color: rgb(238,251,253); Margin: 0 5em 0 5em; Padding: 0 .3em 0 0;} /* ECHO "
"; ECHO ""; ECHO "When registering for any any of our continuing education products enter ". "12121212 for Referral No.". " to obtain a 10% discount."; */ .DetailBoxDivAlert {Font-Size: 82%; color: rgb(20,42,42); Border-Style: dotted; Border-Color: rgb(25,79,78); Background-Color: rgb(255,255,204); Margin: 0 5em 0 5em; Padding: .3em 0 .3em 0;} .DetailBoxFontPackage {Font-Size: 110%; Background-Color: rgb(255,255,204); Padding: 0,1em, 0, 1em; Font-Weight: bold;} .DetailBoxFontRemember {Color: rgb(238,251,253); Background-Color: rgb(22,113,114); Padding: 0,.5em, 0, .5em; Font-Weight: bold;} .DetailBoxDiv P {Margin: 0; Padding: .5em;} .DetailBoxDivFoot P{Margin: 0; Padding: .5em;} .NoBreaks {Margin-Top: 0; Margin-Bottom: 0;} /* ID SELECTORS */ /* .POPUP {COLOR: #9F141A;CURSOR: HELP;TEXT-DECORATION: NONE} TABLE.ENTRIES {Table-Display: fixed;} TD.ENTRIES {Font-Size: 16px; Color: rgb(00,42,52); Background-Color: rgb(255,255,255);} .CAPITALIZE {text-transform: capitalize;} .EMAIL-BUTTON {Color: BLACK;Background: WHITE; Border: 2px #9cf outset} .INPUT-BOX-INVISIBLE {Float: left;Margin-Bottom: 10px;Color: BLACK; Background-color: Transparent; Border-Style: None;} .T2 {font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; font-size: 80%;color : #0F3867;} .T3 {font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; font-size: 80%;} .A1 a:link {color: White;text-decoration: none;} .A1 a:active {color: White;text-decoration: none;} .A1 a:visited {color: White; text-decoration: none;} .A1 a:hover {color : #DD7D00; text-decoration: none;} .A2 a:link {color: #002A34;text-decoration: underline;} .A2 a:active {color: #002A34; text-decoration: underline;} .A2 a:visited {color: #002A34;text-decoration: underline;} .A2 a:hover {color: Red;text-decoration: underline;} #form1 {width: 60px;} #form2 {width: 120px;} #form3 {width: 240px;} #form4 {width: 600px;} #text3 {font-family : Verdana, Arial, sans-serif; font-size : 11px;} #text7 {font-family : Verdana, Arial, sans-serif; font-size : 11px; color :#CC0022;} #text8 {font-family : Verdana, Arial, sans-serif; font-size : 13px;line-height: 12px; color :#CC0022;} A:LINK.FOOTER {Color: rgb(8,145,177); Text-Decoration: underline;} /* "Padding: 1" causes a one pixel-wide vertical bar in FireFox." .T1 {Font-Family: arial, helvetica, sans-serif; Font-Size: 11px;} .TAKETEST {Background-Color: rgb(254,171, 62); Background-Image: url(images/bg_1.gif); Background-Repeat: repeat-x; Background-Position: top;} */