/*************************************************************************************************/ /* This CSS file is built with the concept of "BLOCKS" defining the space on the page a section */ /* takes up and "BOXES" defining the text formatting within the BLOCK. Blocks define their */ /* space on the page by using "background images". */ /* */ /* The Page Content Hierarchy is expected to be the following: */ /* body - defines the truly base portions of the text styles */ /* Container */ /* Header Block - no text in this area */ /* Menu Block - Two types of Boxes: */ /* Menu Tab - Menu Tab Box (repeated....) */ /* Submenu - SubmenuBox */ /* Page Header - Page Header Box */ /* Content Block - Content Box */ /* Footer Block - Footer Box */ /* */ /* There is a concerted goal to use the CSS inheritance such that things are not specified if */ /* the parent container has the information already in it. There was also a concerted effort */ /* to separate Text Formatting from Page Position formatting (Boxes vs Blocks) */ /* */ /* The author of the blogs has the option to customize their web page and so the CSS file has */ /* two parts - the first part is static and does not change between blog page instances while */ /* the second section is written by PHP code in the admin portal of the blog site. The basic */ /* concept is to give the blogger control over a few aesthetic things like background images */ /* and colors. Perhaps things like founts as well. But the Static portion of the CSS file has */ /* control over the size and structure of things. The customization does not let them add new */ /* specs to the CSS file. */ /*************************************************************************************************/ /*************************************************************************************************/ /* Top Level Blocks & Boxes */ /* The blocks block off an area of the page and apply a background to that area while the boxes */ /* they contain set margins and base styles for the text in that region. Done this way we don't */ /* have to repeat basic stuff in multiple areas of the style sheet. */ /* */ /* Because images can be uploaded by the Author of the blog, all the blocks have background */ /* clipping turned on at the block boarder. */ /*************************************************************************************************/ body { font-size: 100%; margin: 0 0 0 0; color: Black; } /*********************************************************************************************/ /* The container is the way we get that neat look of having the page floating inside the */ /* background. I've always liked this look - but it might be a bit dated? */ /*********************************************************************************************/ #Container { position: relative; width: 1200px; margin: auto; text-align: left; } /*****************************************************************************************/ /* HEADER BLOCK */ /* */ /* The Header Block is meant to remain static on all pages. Originally it consisted of */ /* only a background image - this is where the author was suppose to be creative using */ /* a custom built image that expresses something they think is essential for readers */ /* to understand when reading the blogs. */ /* */ /* It has evolved to allow two text fields - Blog Name at top left in very large font */ /* and Author name in bottom right. I think it should be optional as maybe the author */ /* wants to do something with the image that can't be done with text flowing over it. */ /* the font family should also be configurable. */ /*****************************************************************************************/ #HeaderBlock { position: relative; height: 630px; background-clip: border-box; background-repeat: no-repeat; background-position: top center; } #HeaderTLBox { position: absolute; text-align: left; } #HeaderBRBox { position: absolute; text-align: right; } /*****************************************************************************************/ /* MENU BLOCK */ /* */ /* The menu block is by far the part of the pages where I have spent an insane amount of */ /* time getting it to work right. Came from original Image Surfer Pro web development */ /* was updated for Surfing After Dark, then overhauled for Voce De Oro, and extended for */ /* JB Williams JD. So now in the 6th iteration of updating and changing it... I think */ /* it is now in an end state... but then again I've thought that 5 times before... */ /*****************************************************************************************/ #MenuBlock { clear: both; height: 85px; margin: 0 0 0 0; background-clip: border-box; background-repeat: no-repeat; background-position: top center; } #MenuBox { margin: 0 45px 0 45px; } /*********************************************************************************/ /* Menu Tabs */ /* Over the iterations of the menu system, these blocks have complicated */ /* */ /* The menu is basically broken into tabs that start from the left (LTab) and */ /* tabs that start from the right (RTab). These blocks really only differ in */ /* which side they float from... */ /* */ /* There are starting tabs (01) and continuing tabs (Next) from both sides of */ /* the menu. The difference here is that starting tabs have no margin, while */ /* continuing tabs have padding "back" toward the tab before them - so LTabNext */ /* has margin to the left and RTabNext has margin to the right. */ /* */ /* The last category is whether or not the tab is the "Active" selected tab. */ /* Active tabs should have a different background color or image than non active */ /* tabs. */ /* */ /* Putting the three options together there are a total of 8 possible tab blocks */ /*********************************************************************************/ #MenuLTab01 /* LEFT NON ACTIVE START */ { width: 70px; height: 30px; float: left; margin: 28px 0 0 0; background-clip: border-box; background-repeat: no-repeat; background-position: top center; } #MenuActLTab01 /* LEFT ACTIVE START */ { width: 70px; height: 30px; float: left; margin: 28px 0 0 0; background-clip: border-box; background-repeat: no-repeat; background-position: top center; } #MenuRTab01 /* RIGHT NON ACTIVE START */ { width: 70px; height: 30px; float: right; margin: 28px 0 0 0; background-clip: border-box; background-repeat: no-repeat; background-position: top center; } #MenuActRTab01 /* RIGHT ACTIVE START */ { width: 70px; height: 30px; float: right; margin: 28px 0 0 0; background-clip: border-box; background-repeat: no-repeat; background-position: top center; } #MenuLTabNext /* LEFT NON ACTIVE CONTINUATION */ { width: 70px; height: 30px; float: left; margin: 28px 0 0 4px; background-clip: border-box; background-repeat: no-repeat; background-position: top center; } #MenuActLTabNext /* LEFT ACTIVE CONTINUATION */ { width: 70px; height: 30px; float: left; margin: 28px 0 0 4px; background-clip: border-box; background-repeat: no-repeat; background-position: top center; } #MenuRTabNext /* RIGHT NON ACTIVE CONTINUATION */ { width: 70px; height: 30px; float: right; margin: 28px 4px 0 0; background-clip: border-box; background-repeat: no-repeat; background-position: top center; } #MenuActRTabNext /* RIGHT ACTIVE CONTINUATION */ { width: 70px; height: 30px; float: right; margin: 28px 4px 0 0; background-clip: border-box; background-repeat: no-repeat; background-position: top center; } /*********************************************************************************/ /* The final menu tab blocks allow us to space out the tabs. We provide both */ /* full and half tabs to further tailor the menu. It is assumed the first tab in */ /* never a gap - so the martins match the "Next" tabs */ /*********************************************************************************/ #MenuTabGap { width: 70px; height: 30px; float: left; margin: 28px 0 0 4px; } #MenuHalfTabGap { width: 35px; height: 30px; float: left; margin: 28px 0 0 4px; } /*****************************************************************************/ /* The menu tab box is here really just to give us a single point of */ /* reference for any content put on a menu tab. It is essentially the same */ /* space on the page as its parent Tab. The current system forces the tab */ /* content to be SVG Graphics... even text will use the SVG Text construct */ /*****************************************************************************/ #MenuTabBox { height: 100%; width: 100%; } /*********************************************************************************/ /* The submenu's primary purpose is to provide navigational / information text */ /* when the user overs over a tab in the main menu. It is written to by Java */ /* Script. structurally it clears the float regions from the main menu as well. */ /* */ /* The box makes sure the text is aligned left and needs a color that will */ /* contrast the the background of the block */ /*********************************************************************************/ #Submenu { clear: both; height: 24px; background-clip: border-box; background-repeat: no-repeat; background-position: top center; } #SubmenuBox { margin: 0 0 0 0; padding-top: 5px; padding-bottom: 0px; } /*****************************************************************************************/ /* PAGE HEADER */ /* */ /* This is a small block at the top of the page just under the menu area. The purpose of */ /* this area is to provide a title for the page with a brief tag line. There hardest */ /* thing about using this space is making sure this background bends into the top of the */ /* background of the next section. */ /*****************************************************************************************/ #PageHeader { margin: 0 0 0 0; height: 100px; background-clip: border-box; background-repeat: no-repeat; background-position: top center; } #PageHeaderBox { margin: 0 20px 0 20px; text-align: center; font-style: normal; } /*****************************************************************************************/ /* CONTENT BLOCK */ /* */ /* When blogs are actually written this is the primary section of the pages. All of the */ /* real content of the blog site is contained in this section of the page, and it should */ /* scroll several times over if the content is robust. */ /* */ /* As the central focus of the page almost everything is already predefined to be what */ /* is needed for this portion of the page. The box makes sure the boundaries of the */ /* container are not infringed upon by the page content. */ /*****************************************************************************************/ #ContentBlock { margin: 0 0 0 0; background-clip: border-box; background-repeat: repeat; background-position: top center; } #ContentBox { margin-top: 0; margin-bottom: 0; text-align: left; font-style: normal; } /*****************************************************************************************/ /* CONTENT BLOCK */ /* */ /* The last real data section of the page is footer. Like the header, this block is */ /* present on every page. It gives the author a last chance at the end of a page to */ /* leave an impression about the content of the page. */ /*****************************************************************************************/ #FooterBlock { margin: 0 0 0 0; height: 200px; background-clip: border-box; background-repeat: no-repeat; background-position: top center; } #FooterBox { margin-top: 0; margin-bottom: 0; padding: 35px 0 0 0; text-align: left; } /*****************************************************************************************/ /* At the very bottom of the page in very small print is a single line paragraph that */ /* reserves the copy rights of the author of the blog pages. This paragraph is a child */ /* of the container just as the previous sections. */ /* */ /* We intend for there to be a small gap between the bottom of the footer and this block */ /* as well as some remaining space on the page below the copyright. This space is */ /* created by break lines in the footer.php code. */ /*****************************************************************************************/ #FinePrint { font-size: x-small; float: none; clear: both; text-align:center; } /*************************************************************************************************/ /* HEADINGS */ /* The primary definition is assigned at the Container level and has some effect on all parts of */ /* the page. The values specified in the Container definitions are primarily based on what we */ /* would want the for the main content - so the variations are in other areas of the page. */ */ /* */ /* Header */ /* The two header boxes use much larger H1 blocks. The Color and Font-Family are configurable */ /* */ /* PageHeader */ /* The pag header has a heading 1 followed by ah heading 3 followed by a paragraph. The area is */ /* very tight and so we remove all of the offset space typically provided to headings. But we do */ /* increase the size of the h1 text and reduce the side margins to allow for larger page titles */ /* */ /* Footer */ /* The footer includes one h1 block followed by a paragraph. It is not uncommon to "Bookend" */ /* the text with a couple of images and we don't want to overly distract from the rest of the */ /* page so the margins are pulled in and the H1 block is smaller. /*************************************************************************************************/ #Container h1, #Container h2, #Container h3 { clear: both; font-weight: bold; } #Container h1 { margin-top: 1em; margin-bottom: .25em; font-size: 2.5em; } #Container h2 { margin-top: 1em; margin-bottom: 0; font-size: 2.0em; font-style: italic; } #Container h3 { margin-top: 0.5em; margin-bottom: 0; font-size: 1.5em; } #HeaderTLBox h1 { margin: 0 0 0 0; font-size: 5em; } #HeaderBRBox h1 { margin: 0 0 0 0; font-size: 3em; } #PageHeaderBox h1, #PageHeader h2, #PageHeader h3, #FooterBox h1, #FooterBox h2, #FooterBox h3 { margin: 0 0 0 0; } #PageHeaderBox h1 { font-size: 3.0em; } #FooterBox h1 { font-size: 2.0em; } /*************************************************************************************************/ /* PARAGRAPH */ /* Obviously paragraphs are where the majority of the content will wind up being. I personally */ /* like single spaced blocks separated by a bit of space, so have the basic paragraph to have */ /* a one character spacing below the paragraph. */ /* */ /* Submenu */ /* The submenu is literally a single line of text and we need it very precisely placed. So we */ /* remove the margins and use padding to put the text line at the bottom of the submenu bar. */ /*************************************************************************************************/ #Container p { margin-bottom: 1em; margin-top: 0; } #SubmenuBox p { margin: 0 0 0 0; } /*************************************************************************************************/ /* HYPER LINKS */ /* Links between pages of the website as well as links to other sites need a consistent look. We */ /* could simply rely on the browser side style sheet... */ /* */ /* Link */ /* That said, I'm not a big fan of the browser style sheets for links. I prefer the links to */ /* have underlines but be the same color as the base text and to "highlight" by changing color */ /* when I hover over them. */ /* */ /* Heading as Link */ /* In addition, in these blogging pages we often use various headers as links and having the */ /* underline present there is distracting from the document flow - so we created a class for */ /* links where the underline can be removed. The Hover action really pops then as the underline */ /* then appears on mouse over. */ /*************************************************************************************************/ #Container a { text-decoration: underline; } #Container a:hover { text-decoration: underline; } #Container a.heading { text-decoration: none; } #Container a.heading:hover { text-decoration: underline; } /*************************************************************************************************/ /* EMPHASIZE */ /* Emphasized text is used from time to time on the pages natively just to draw attention to a */ /* particular point. It is probably used more on the admin pages than in the generated text of */ /* the main blog pages. However, we expect boggers to use it a fair bit. We force the text to be */ /* bold and italicized... though the browser style sheets do the same so it wasn't necessary. */ /* */ /* We also provide classes for the "Primary Colors" that can be used. In the admin verification */ /* pages we use class='red' to mark areas of validation that failed. */ /*************************************************************************************************/ em { font-weight: bold; font-style: italic; } em.red { color: red; } em.blue { color: blue; } em.green { color: green; } /*************************************************************************************************/ /* TABLES */ /* I think we have provided a very stylish table system. The blogger can choose a color for the */ /* tables generated on their pages (assuming they don't directly use a style construct). The */ /* header row uses the solid version of the color and the rows of the table alternate between */ /* 100% transparent and 50% transparent. The header row has boarders but the rows do not. We do */ /* provide the "border" class for tables that will put a 2px solid border around the table for */ /* them. Se also a row class "solid" that can be used to alternate between two solid colors if */ /* they prefer. */ /* */ /* The automatically generated tables created by the PHP code use the alternating transparency */ /* rows. They also make use of a header class "TableDate" to fix the size of columns displaying */ /* dates. */ /*************************************************************************************************/ #ContentBox table { border: none; caption-side: bottom; border-collapse: collapse; text-align:left; width: 100%; } #ContentBox table.border { border: 2px solid #40F040; } #ContentBox th { font-weight: bold; text-align: left; border: 1px solid black; } #ContentBox th { font-size: 1.25em; } #ContentBox th.TableDate { width: 9ch; } #ContentBox td { background-color: transparent; padding: 0 3px 0 3px; margin: 0 0 0 0; text-align: left; vertical-align: top; } /*************************************************************************************************/' /* Data block configurations */ /*************************************************************************************************/ /*************************************************************************************************/ /* AUDIO */ /* Used to define how the embedded media player is configured on a page. It is intended to be */ /* placed directly in the ContentBox */ /*************************************************************************************************/ audio { width: 100%; height: 40px; box-shadow: 5px 5px 20px rgba(0,0, 0, 0.4); border-radius: 90px; transform: scale(1.05); } /*************************************************************************************************/ /* IMAGES */ /* Images are also intended to be placed directly in the ConentBox portion of the page. The */ /* default is to let the text of the page flow around the image. There may be something to */ /* update here as we add the ability to upload images for the blogs. */ /*************************************************************************************************/ #ContentBox img { position:relative; top:0; left:0; max-width: 100%; } #ContentBox img.ImgLeft { float: left; position: relative; margin: 0 12px 0 0; max-width: 65%; } #ContentBox img.ImgRight { float: right; position: relative; margin: 0 0 0 12px; max-width: 65%; } /*************************************************************************************************/ /*************************************************************************************************/ /* USER CUSTOMIZATION */ /* */ /* The following things can be customized through the administration portal of the blog site. */ /* They are basically just pieces and parts of the over all style sheet equating to only */ /* cosmetic aspects of the page that tailor the look and feel without requiring any dramatic */ /* PHP code changes for the core site development. When the blogger uses the admin customization */ /* pages to make a change a new revision of the root.xx.css file is created. This file which is */ /* the base.css file (which ends after this comment) is copied to the new file. After the base */ /* is copied to the new file, the customization PHP code will generate the rest of the file */ /* based on the configuration changes the user has specified. The customized settings are also */ /* stored in the css.xml file so the next time the user wants to make a change their previous */ /* changes are still remembered. */ /* */ /* When the blog is first created the following files are created: */ /* root.01.css Full css file with all the default values present */ /* scripts/base.css The base css settings used for all blog sites */ /* scripts/css.xml Stores the configuration parameters and current values match default */ /*************************************************************************************************/ /*************************************************************************************************/ /*************************************************************************************************/ /* Background Colors and Images */ /* The initial CSS file for the site has NO IMAGES */ /* */ /* Initial base colors have been chosen for some contrast that isn't horrible to look at. The */ /* user will have the option for each of using a color alone or a color under the image. */ /* */ /* The following image mapping is what the customizing PHP code will use: */ /* Body #8E5B34 url(graphics/pagebackground.01.jpg) */ /* HeaderBlock #E3A454 url(graphics/header.01.jpg) no-repeat top center */ /* MenuBlock #8E5B34 url(graphics/menu.01.jpg) no-repeat top center */ /* Menu.Tab.... black url(graphics/menutabdark.01.jpg) no-repeat top center */ /* MenuAct.Tab.... #7B7B7B url(graphics/menutabbright.01.jpg) no-repeat top center */ /* Submenu #005000 url(graphics/submenu.01.jpg) no-repeat top center */ /* PageHeader #E3A454 url(graphics/pageheader.01.jpg) repeat-y top center */ /* ContentBlock #F4E2C1 url(graphics/background.01.jpg) repeat-y top center */ /* FooterBlock #E3A454 url(graphics/footer.01.jpg) no-repeat center center */ /* FinePrint #E3A454 NONE - color only */ /* */ /*************************************************************************************************/ body { background-color: #8E5B34; } #HeaderBlock { background: #E3A454; } #MenuBlock { background: #8E5B34; } /* These images MUST be the same image reference - NOTE black color by default*/ #MenuLTab01 { background: black; } #MenuRTab01 { background: black; } #MenuLTabNext { background: black; } #MenuRTabNext { background: black; } /* These images MUST be the same image reference - NOTE brighter grey by default*/ #MenuActLTab01 { background: #7B7B7B; } #MenuActLTabNext { background: #7B7B7B; } #MenuActRTab01 { background: #7B7B7B; } #MenuActRTabNext { background: #7B7B7B; } /* One option for this is to set the background to "clear" and just show what was on the MenuBlock */ #Submenu { background: #005000; } #PageHeader { background: #E3A454; } #ContentBlock { background: #F4E2C1; } #FooterBlock { background: #E3A454; } #FinePrint { background: #E3A454; } /*************************************************************************************************/ /* Font Families & Text Colors */ /* There are really only two font families in use on the pages. One at the body level that sets */ /* the over all style of the pages and one for the Header which gives the banner image at the */ /* top some flair */ /* */ /* The following mappings are the defaults: */ /* body arial helvetica sans-serif */ /* HeaderBlock Copperplate, Papyrus, fantasy */ /* */ /* There are a few text colors, the most dominate one being specified in the body that drives */ /* most of the text and other object colors. The colors available for configuration are: */ /* body #10460E */ /* a (all base links) */ */ /* Header #EBEBEB */ /* Submenu #40F040 */ /* */ /* Table background colors. By default a table will have a single color used with the header */ /* solid and the rows alternating between transparent and shaded of the same color as the header */ /* The user can specify a solid color table using the .solid class on the rows - in which case */ /* the table has three configurable colors - th, tr odd, and tr even. */ /* table 1 */ /* th #A4927 solid */ /* tr odd #A492700 Fully transparent */ /* tr even #A492750 Shaded */ /* Table.solid */ /* tr #4E2C1 */ /* tr even #A49271 */ /* */ /* A few colors designed specifically to highlight text can also be configured. By default the */ /* link hover and emphasize colors are the same - but I'll let the bloggers pick both. */ /* a:hover #009011 */ /* a.heading:Hover */ /* em #009011 */ /*************************************************************************************************/ body { font-family: arial, helvetica, sans-serif; } #HeaderBlock { font-family: Copperplate, Papyrus, fantasy; } #HeaderBlock { color: #EBEBEB; } #Container { color: #10460E; } #ContentBox svg.tab { fill:#10460E; stroke:#10460E; width: 70px; height: 30px; } #Container svg { fill:#10460E; stroke:#10460E; } #MenuTabBox svg { fill:#EBEBEB; stroke:#EBEBEB; width: 70px; height: 30px; } #MenuTabBox svg:hover { fill:#40F040; stroke:#40F040; } #SubmenuBox { color: #40F040; } #Container a { color: #10460E; } #Container a:hover { color: #009011; } #Container a.heading:hover { color: #009011; } #ContentBox svg.tab:hover { fill:#009011; stroke:#009011; } em { color: #009011; } #ContentBox th { background-color: #A49271; } #ContentBox tr { background-color:#A4927150; } #ContentBox tr:nth-child(even) { background: #A4927100; } #ContentBox tr.solid { background-color: #A49271; } #ContentBox tr.solid:nth-child(even) { background-color: #F4E2C1; } #FinePrint { color: Black; } /*************************************************************************************************/ /* Margins */ /* The primary content of the pages is contained in three segments. The PageHeader, Content, and */ /* Footer boxes. If the user wishes to provide some "side piping" graphics to their bog pages it */ /* may be necessary for them to adjust the side margins of these sections (and Header?). Making */ /* each edge independently configurable gives a lot of flexibility. */ /*************************************************************************************************/ #HeaderTLBox { top: 20px; left: 20px; } #HeaderBRBox { bottom: 20px; right: 20px; } #PageHeaderBox { margin-left: 20px; margin-right: 20px; } #ContentBox { margin-left: 35px; margin-right: 35px; } #FooterBox { margin-left: 120px; margin-right: 250px; }