Knightnet Site Design - Standard Style Sheet

You are in section: Home > Site Design > Template Files

This is the CSS (cascading style sheet) that I use for all of the pages on this web site.

It allows the style of the site to be easily controlled and changed if required.

/* +++ WARNING: Tag names are case sensitive, especially when using xhtml */ /* Standard Tags */ body { background:#FFF;font-family:verdana,arial,helvetica,sans-serif; margin:2px;text-align:justify; /* Set IE browsers font size (see HTML>BODY below) */ font-size:78%; } /* Cheat to set mozilla browsers font size but not IE */ /* Sadly this sets the Opera default size too big */ /* This is the only hack I will allow in this CSS!!! */ /* html>body {font-size:78%;} */ /* Tidy up links */ /* NOTE: The order of these is important, always use order: link visited focus hover active Also note that the head2 A tag is underlined for clarity (see below) */ a:link,a:visited,a:active {text-decoration:none;} /* consider using a:focus here too */ a:hover,a:focus {text-decoration:underline;} /* Make all table rows allign to top rather than middle */ tr {vertical-align:top;} /* Set Firebirds font size correctly */ input,textarea {font-family:verdana,arial,helvetica,sans-serif;font-size:100%;} /* Prevent line round linked images */ a img {border:0;} /* Reduce size of top/bottom margins on default paras and text on headings */ p {margin-top:.8em;margin-bottom:.8em;font-size:1em;line-height:1.3em;} form {margin-top:0.2em;margin-bottom:0.2em;} /* Lists */ ul {margin-top:0.8em;margin-bottom:0.5em;} li {margin-top:0.1em;margin-bottom:0.2em;} ul LI:first-line {font-style:italic;text-align:left;} dt {font-weight:bold;} dd {margin-left:0;padding-left:0;margin-bottom:0.6em;} /* Also adjust heading font sizes */ h1,h2,h3,h4,h5 {text-align:left;} h1 {font-size:165%;} h2 {font-size:135%;border-bottom:1px solid silver;} h3 {font-size:120%;margin-top:0.1em;margin-bottom:0.3em;} h5 {font-size:110%;margin-top:0.1em;margin-bottom:0.1em;} /* Make h.lines neater weird cause of browser problems */ hr {height:0px;border:0;border-top:1px solid silver;} /* Better layout for embeded code blocks */ code {display:block;background:#EEE;font-family:monospace;font-size:93%; white-space:pre;border:1px solid silver;padding:0.5em 1em 0.5em 1em} .code { /* Ooops, I used to use this class but that is wrong */ background:#D0D0D0;font-family:monospace;white-space:pre;border:solid thin;} .codeSpan {/* for examples of code embeded in a line */ background:#EEE;font-family:monospace;} /* -- Classes for the standard site template -- */ /* layout table */ body table {width:100%;border-collapse:collapse;border:0;padding:0;} /* Left top heading (Head1) */ .tblHead1 {/*TD*/ background:#369;color:#FF6;text-align:center; padding:.2em;font-size:85%;border-bottom:1px solid #FFF;} .tblHead1Bu {text-align:center;font-size:85%;} /*SUBMIT*/ /* Right top heading (Head2) */ .tblHead2 {/*TD*/ background:#369;color:#FF6;padding:.5em; border-left:1px solid #FFF;border-bottom:1px solid #FFF;} .tblHead2 h1 {margin-top:0;margin-bottom:0.3em;} /*H1 (page title)*/ /* Main Left (nav menu holder) */ .tblLeft1 {/*
1st row*/ background:#369;color:#FF6;vertical-align:top;padding:0;margin:0;border:0;} .tblLeft {/* 2nd row*/ background:#369;color:#FF6;vertical-align:top;padding:0 0.5em 0 0.5em;} /* Main content section (spans 2 rows)*/ .tblMain {vertical-align:top;padding:.5em 1% .5em 1.5%;} /*TD*/ .tblMain a {font-weight:bold;} /*links*/ /* Left Footer */ .tblFoot1 {background:#369;color:#FF6;font-size:75%;border-top:1px solid #FFF;} /*TD*/ .tblFoot1 a {color:#FF6;} /* Right Footer */ .tblFoot2 {font-size:75%;border-left:1px solid #FFF;border-top:1px solid #FFF;} /*TD*/ /* db content */ .gotoTop {float:right;font-size:75%;} /* link to top */ .edClnk { /* edit content link in h2 titles */ float:right;font-size:50%;font-weight:normal;margin-top:0.5em;} /* -- Classes for breadcrumb trail -- */ .bcrumb a {font-weight:bold;color:#FF6;font-variant:small-caps;border-bottom:1px solid #CC3;} .bcrumb a:hover,a:focus {text-decoration:none;} .bcrumb span {/*Current Page*/ font-weight:bold;font-style:italic;font-variant:small-caps;color:#EED;} .bcrumbSite {text-align:right;} /* -- Classes for the Automenu -- */ .automenu {white-space:nowrap;} /**/ .automenu h2 {border:0;font-variant:small-caps;font-size:120%;} /*Section/Page title*/ .automenu h2#pages {padding-top:1em;} /*Page title*/ .automenu ul {font-style:normal;list-style-type:none;margin:0;padding:0;} .automenu li {margin-bottom:0.5em;} .automenu li:first-line {font-style:normal;} /* Stop 1st line from being italic (see LI)*/ .automenu a {color:#FF6;margin-bottom:0.3em;border-bottom:1px solid #CC3;} .automenu a:hover,a:focus {text-decoration:none;} .automenu li span {font-style:italic;color:#EED;} /*Current Page*/ /* -- Misc classes -- */ .clear {clear:both} .boxPara {/* for paras and divs with an outline box */ border:1px solid silver;padding:1em;margin:0em;} .boxPara p {padding:0;} .blackBorder {/* Tbl w/ thin boarder - set cellspacing=0 on the table tag */ border:1px solid black;} .compact {margin-top:0.2em;margin-bottom:0.2em;} .compactList {/* have to have both margin & padding as IE/Opera uses margin, Moz uses padding */ margin-top:0em;margin-bottom:0.2em;margin-left:1em; padding-top:0em;padding-bottom:0.2em;padding-left:1em} .center {text-align:center;} .left {text-align:left;} .footnotes { /* Footnote text */ font-size:69%;border-top:1px solid silver;padding-top:0.5em;margin-top:3em;} ol.footnotes { /* Footnote list */ margin-left:0em;padding-left:2em;} a.ftnt { /* Footnote reference */ font-size:69%;vertical-align:super;} .tblHeading { /* TR for the first line of a table with headings (Use TH for cells) */ background-color:#DDD;} .small {font-size:76%;} /* Small text */ .vsmall {font-size:60%;} /* Very Small text */ .phpErr { /* Used in debug.inc */ background:#F00;color:#FF0;} .help { /* inline help clue */ border-bottom:1px dotted #333; cursor:help;} .frmClever{ /* Hide a form element (used to make forms spam resistant) */ display:none; } /* table with grey borders round all cells */ .tblBorder {border-collapse:collapse;border:1px solid silver;} .tblBorder td,.tblBorder th {border:1px solid silver;text-align:left;padding:.2em} /* a list with no bullets */ .listNoBullets {list-style-type:none;margin:0;padding:0;} .listNoBullets li {margin-top:0.2em;margin-bottom:0.2em;padding-top:0.2em;padding-bottom:0.2em;} /* ------------------ */ /* -- Table of Photos ---- */ .tblPhoto {float:left;margin:0 10px 10px 5px;padding:5px;height:265px;} .tblPhoto img {} .tblPhoto div {opacity:0.9;position:relative;left:5px;top:-1em;background-color:#FCC;text-align:center;} /* ----------------------- */ /* -- thread.class Full View default classes ---- */ .ThrTbl th input {font-size:100%;font-weight:bold;} .ThrTbl td {text-align:center;} .ThrCL {white-space:nowrap;} /* Last column (icons) */ /* Row colours for each level of recursion (10 max by default) */ .ThrR1 {background-color:#FCC} .ThrR2 {background-color:#DDE} .ThrR3 {background-color:#DEE} .ThrR4,.ThrR5,.ThrR6,.ThrR7,.ThrR8,.ThrR9,.ThrR10 {background-color:#EEE} /* ---------------------------------------------- */ /* -- thread.class Simple View default classes -- */ .svTitle {background-color:#eeb;} .svDate {background-color:#eeb;text-align:right;} .svBody {background-color:#ffc;} /* ---------------------------------------------- */ /* -- thread.class Simple View tiny classes -- */ .svtTable {background-color:white;width:30%;border:1px solid #ddd; font-size:76%;float:right;margin-left:2em;margin-bottom:1em;} .svtTable td {padding:.2em} .svtCap {font-size:165%;font-weight:bold;background-color:white;text-align:left;margin-left:1.2em;margin-top:1em;} .svtTitle {text-align:left;background-color:#eee;} .svtDate {text-align:right;background-color:#eee;} .svtBody {text-align:justify;} /* ---------------------------------------------- */ /* table with grey borders round all cells */ .tblWship {border-collapse:collapse;border:0;margin:0;padding:0;} .tblWship td {border:0;text-align:left;padding:0;margin:0;} .tblWship .chords td {border:0;text-align:left;padding:0 1em 0 0;margin:0;color:red;} .verse {margin-top:1em;font-style:italic;} .chorus {margin-left:1em;margin-top:1em;font-style:italic;} .comment {margin-top:1em;font-style:italic;font-size:80%;} .tab {margin-top:1em;white-space:pre;font-size:80%;}

Pages:

Valid HTML 4.01 iconValid CSS icon
© Copyright Julian Knight, July 2008 All rights reserved.
Page: Updated 2008-07-10 08:50:07, Author Julian Knight