/* Cascading Style Sheet for John Williams' Saving-Old-Seagulls.Co.UK Site*/ /* Written by Brendan Mason - April 2009 - after a fair ammount of browsing :) */ /* Called by every page in with */ /* straight tag styles */ body { background-image: url('../images/cdbkgnd.jpg'); margin-left: 10px; margin-right: 10px; font-family: "Comic Sans MS", "Trebuchet MS" ,"Tahoma" ,"Helvetica" ,"DejaVu Sans Mono" ,"URW Gothic L" ,"Lucida Sans" ,"sans-serif"; } a:link {color: #0000ff;} a:visited {color: #cc3300;} a:hover {color: #ff0000;} a:focus {color: #00ff00;} a:active {color: #ff0000;} td.l1 {text-align:left} td.j1 {text-align:justify} td.c1 {text-align:center} td.t1 {text-align:center;background-color:#5d7ac5;color:#00ff00} td.r1 {text-align:right} th.l1 {text-align:left} th.j1 {text-align:justify} th.c1 {text-align:center} th.t1 {text-align:center;background-color:#5d7ac5;color:#00ff00} th.r1 {text-align:right} tr.h1 {background-color:#c0c0c0} tr.h2 {background-color:#b3b3ff} table.ebaytable {border-color:#000080} td { text-align: center; } p { text-align: justify; font-size: 14pt; color: #000080; } h1 { color: #ff0000; font-size: 400%; font-weight: bold; } h2 { color: #ff0000; font-size: 300%; font-weight: bold; } h3 { color: #ff0000; font-size: 200%; font-weight: bold; } h4 { color: #ff0000; font-size: 150%; font-weight: bold; } h5 { color: #ff0000; font-size: 125%; font-weight: bold; } h6 { color: #ff0000; font-size: 110%; font-weight: bold; } hr { width: 75%; color: #cc3300; height: 4px; } /* useful class styles */ /* call by using ..... */ .redbold{ color: #ff0000; font-weight: bold; } .red { color: #ff0000; } .darkred { color: #cc3300; } .bluebold { color: #0000ff; font-weight: bold; } .blue { color: #0000ff; } .darkblue { color: #000080; } .largerbold { font-size: 110%; font-weight: bold; } .larger { font-size: 150%; } .smallerbold { font-size: 90%; font-weight: bold; } .smaller { font-size: 90%; } .smalleryellow { font-size: 80%; color: #ff8000; } .unbold { font-weight: normal; } /* ID style can only be used once per document */ /* call with
...
*/ #content{ margin-left: 8px; margin-top: 8px; } /* navigation buttons */ /* 318x39 max dimensions*/ /* use in a table ideally like this */ /*
*/ /* (for vert list of buttons set width in
and height for each
only) */ /* (lots of cells of buttons) */ /* Home */ /*
*/ /*
*/ /* if you want the page to refresh the button after clicking (and you don't mind JavaScript!!) then add onclick="this.blur();" to the tag */ /* use for colouring the text in navigation buttons */ /* see above for use */ .buttons a:link {color: #80ff00;} .buttons a:visited {color: #ff8000;} .buttons a:hover {color: #000080;} .buttons a:focus {color: #ff0000;} .buttons a:active {color: #ff0000;} .newbuttons a:link {color: #ffff00;} .newbuttons a:visited {color: #ffff00;} .newbuttons a:hover {color: #ff0000;} .newbuttons a:focus {color: #ffff00;} .newbuttons a:active {color: #ffff00;} /* stretchy buttons */ /* see above for use */ .clear { overflow: hidden; width: 100%; } /* 1-line buttons */ a.button1 { background: transparent url('../buttons/col_but_1lin_a.gif') no-repeat scroll top right; display: block; float: none; font-weight: bold; font-size: 18px; height: 39px; margin-right: 0px; padding-right: 12px; text-decoration: none; } a.button1 span { background: transparent url('../buttons/col_but_1lin_s.gif') no-repeat; display: block; line-height: 39px; padding: 0px 0px 0px 12px; } a.button1:hover { background-position: center right; outline: none; } a.button1:hover span { background-position: center left; padding: 0px 0px 0px 12px; } a.button1:active { background-position: bottom right; outline: none; } a.button1:active span { background-position: bottom left; padding: 0px 0px 0px 12px; } /* end 1-line buttons */ /* 2-line buttons */ a.button2 { background: transparent url('../buttons/col_but_2lin_a.gif') no-repeat scroll top right; display: block; float: none; font-weight: bold; font-size: 18px; height: 78px; margin-right: 0px; padding-right: 12px; text-decoration: none; } a.button2 span { background: transparent url('../buttons/col_but_2lin_s.gif') no-repeat; display: block; line-height: 39px; padding: 0px 0px 0px 12px; } a.button2:hover { background-position: center right; outline: none; } a.button2:hover span { background-position: center left; padding: 0px 0px 0px 12px; } a.button2:active { background-position: bottom right; outline: none; } a.button2:active span { background-position: bottom left; padding: 0px 0px 0px 12px; } /* end 2-line buttons */ /* end stretchy buttons */