/* +------------------------------------------------------------------+ | Green-Beast.com | | PHP: Font Sizer | | Cascading Style Sheet | | Copyright July 2006 | | Use with attribution by visible link please! | | Attribute to: Mike Cherim | +------------------------------------------------------------------+ */ /* this is being used just to help with the positioning of the unordered list. ul width in this case is box size times 4, plus 2px border times 8, plus internal anchor padding (6px left + right) times 4 (plus 2 for the heck of it) */ ul#pfs { padding : 0; margin : 0 auto; width : 160px; } /* this is also being used, in part, to help position the list and set the intial font */ ul#pfs li { float : right; list-style-type : none; font-size : 100%; text-align : center; } /* this makes the link box with its style... embedded images could be used instead of text the size of the box allows the text to be resized if allowed to do so (keep reading) */ ul#pfs li a { padding : 9px 4px 0 2px; background-color : #ffffdd; border : 2px outset #aaa; text-decoration : none; color : #000; display : block; width : 30px; height : 30px; } /* hover styles are set here to create more obvious interaction */ ul#pfs li a:hover { background-color : #669900; border : 2px outset #669900; color : #fff; } /* focus styles are set here to create more obvious interaction */ ul#pfs li a:focus, ul#pfs li a:active { background-color : #396c00; border : 2px inset #396c00; color : #fff; } /* this sets the font size on the button face (an image could be used instead of text) also, you might want to use a fixed text size on the buttons to keep them looking good if the user has a different default font size, but this would only be for IE (which is the only browser which the button text resizing looks a little odd as it affects the button size. stupid IE 6 */ ul#pfs li#pfs_large a { font-size : 120%; padding : 8px 4px 1px 2px; } /* same as above, but for the "larger" size */ ul#pfs li#pfs_larger a { font-size : 140%; padding : 7px 4px 2px 2px; } /* same as above, but for the "largest" size */ ul#pfs li#pfs_largest a { font-size : 160%; padding : 4px 4px 5px 2px; } /* this moves the explanatory text and list skip links out of view */ ul#pfs li a span, ul#pfs li#skip_pfs, ul#pfs li#top_pfs { position : absolute; top : -9000px; left : -9000px; } /* NOTE: The font size applied to the body element -- or element(s) of your choosing is shown in the PHP file. It, too, is CSS, but it cannot be added to your style sheet */ /* End Styles */