/* This style is designed for use within the Socialist party, particularly for the Birmingham Branch,
and may not be used for any other purpose. This style remains the intellectual property of Chloe Sumner,
and if you would like to use this style, or would would like further information about designs,
including personal project assistance, please contact me at Contact@Chlowtech.com. Sites promoting a Socialist agenda or charitable websites requiring assistance should also contact me at that address for free advise or assistance if possible. If permission to use
this is granted, this disclaimer must remain, as well as appropriate website accreditation */
/* This is just setting the red background, and any uncaught text elsewhere to be black and centere'd.
The background is the bit behind the site in this style. */
body
{
text-align: center;
background: #FFFFFF;
color: #000000;
}
/* This part defines the main text display container, the white inside background bit. Borders are set for
the stlyed boxed look, just helping to keep all the parts seperate and make give a distincitve seperation from
the background. text-align is used here make the text appears on from the left */
#container
{
text-align: left;
margin: 0 auto;
width: 100%;
background: #FFFFFF repeat-Y;
}
/* This sets the title on every page to have the green background and the white text and the same border as elsehwere.
If you wanty to add an image you'd need to edit the 'background:' line to
background: url(FileNameInSameFolder.jpg);
If you wanted to make one pattern repeated, you'd either
repeat-x or repeat-y before the semi colon.
no-repeat...does exactly what it says on the tin.
This applies the background over the whole area, x is horizontally, y is vertically.
*/
h1
{
background: #FFFFFF;
background: url(/Img/B_splogo.GIF) no-repeat;;
height: 3cm;
color: #000000;
padding: 0px;
margin: 0;
border-bottom: 5px solid #FF0000;
}
p.Author
{
text-align: right;
color: #7777FF;
}
/* This is meant for sub titles and the like. font-weight is to stop the default h2 settings as bold, but that can be
removed or added in the html to over-ride. I just think it looks alright. */
h2
{
margin-top: 0;
color: #B20B00;
font-weight: normal;
}
h3
{
margin-top: 20;
color: #FF0000;
font-weight: normal;
}
/* The following image information is only meant to give some defaults, and an organised look, images can still be added
as normal in html if required. */
/* This edits a div (purely a coding thing to define an area, shows nothing) with it's class set as imagecaptiondefault
This sets a background for an image to be placed on, adjusts it to the webpage positioning, puts in in a box on the
right of the page (mainly for ease of avoiding display issues) and sets the text code within that to red*/
div.imagecaptiondefault
{
float: right;
width: 140px;
margin: 0 1em 1em 1em;
display: inline;
padding: 2% 1% 2% 2%;
background: #DDDDDD
text-align: center;
color: #FF0000;
}
/* Gives the image it's own small yellow border to assist with the differentiation from the background I just made */
div.imagecaptiondefault img
{
border: 2px solid #FFFF00;
}
/* This is the same as before but just for bigger larger images. */
div.imagecaptionlarge
{
float: right;
width: 300px;
margin: 0 1em 1em 1em;
display: inline;
padding: 2% 1% 2% 2%;
background: #DDDDDD
text-align: center;
color: #FF0000;
}
/* Same again */
div.imagecaptionlarge img
{
border: 2px solid #FFFF00;
}
a:link img, a:visited img, a:focus img, a:hover img, a:active img
{
border: 0px red solid;
}
/* This just makes quotes look pretier. Applies a possible margin to things around it (if there's space) pushes the
content in the quote down alittle more to make it look more spacious, then applies a " graphic top left */
blockquote
{
float: right;
width: 90%;
margin: 1em 5em 1em 1em;
border: 1px solid #000000;
background: url(Q1.gif) 5px 5px no-repeat;
padding-top: 30px;
}
/* This effects and (paragraph text) in the quote. Put's a padding around it, to again make everything more centered
and make the box look more spacious */
blockquote p
{
padding: 0 70px;
}
/* This effects any
info in the quote with the class source. Basically only meant to be used to say where the quote
came from. Sets it right and italics it and adds in the closing " image. */
blockquote p.source
{
background: url(Q2.gif) no-repeat 100% 100%;
padding-bottom: 30px;
marging: 0 5px 5px 0;
color: #7777FF;
text-align: right;
font-style: italic;
}
/* This is the caption that goes above tables. Just basic text setting */
Caption
{
text-align: center;
margin: 0 0 .5em 0;
font-weight: bold;
}
/* This is just to remove the default cell spacing the
command normally has. Keeps everything tidy */
table
{
border-collapse: collapse;
}
/* Everything in the table is either table head (th) or table data (td) so I'm putting a border around everything and
a little padding around the box, again for spaciuious appearance */
th, td
{
Border-right: 1px solid #000000;
Border-bottom: 1px solid #000000;
Border-top 1px solid #000000;
Border-left 1px solid #000000;
Padding: .5em;
}
/* TR - table row, just setting a deault colour in the background, though this will be over-ridden if the code works
Just a safety net basically. */
tr
{
background: #FFDDDD;
}
/* Set table head info to be white with a deep red background */
thead th
{
background: #A00000;
color: #FFFFFF;
}
/* Set the body data's head (left collumn) to appear yellow with it's own background red color */
tbody th
{
background: #FF1010;
color: #FFFF00;
text-weight: normal;
}
/* change the background colour on alternating lines (set with the alternate class in the html page) - for ease of reading */
tr.alternate
{
background: #FACCCC;
}
/* see above */
tr.alternate th
{
background: #FF7070;
}
/* List info with the id navigation are set to just appear without any