/* THIS CSS PAGE DESIGNED BY JOHN BISHOP is an extremely simple approach to web site design, based on either very little coding at all, or the very old-fashioned tables. But you will find that it is extremely flexible (even squashable) and may easily be added to. You can always get more complicated if you wish to.
One main point is that it is very easy to control. However, if you need absolute precision, then take a pro's course, as what is here will not provide the precision you may wish to achieve.
If you are experimenting, I suggest to change maybe only ONE parameter and see what it actually does.
Some of the code near the end of this page needs rationalising one day (Note written in April 2020 after tidying about 2/3 of this page).
There are always surprises, so be careful; go slowly and carefully. Check, check, check.
Remember that this css page affectes every one of pruart.com's Web Site pages.
I have included lots of alternatives, but do bear in mind that some items support each other ...
This text, by it's very nature is copyrighted to me (1996 - 2020) but you have my permission to use this code as you wish without any reference to me. John Lumby BISHOP   john.bishop@lumby.fr  11 April 2020  If I die, the copyright of the entire site is hereby passed to Prudence Bishop, Oliver J B Bishop and Rebecca Mary Ramsay.

A Note: The simplest possible layout for the artwork is on this page: work024

A NOte: There is a page that may be used as a template (i.e. fill in and save) here: -1.htm

These are Independent Selectors that provide our Unique Formatting. The font size is in em so that users may set their own browser default */

		body {
    background-color: #000;
		}

		h1 {
	color: #FFF;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	text-align: center;
	font-size: 1.5em;
		}

		h2 {
	color: #FFF;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	text-align: center;
	font-size: 1.2em;

		}

		h3 {
	color: #FFF;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	text-align: center;
	font-size: 1em;
		}

		p {
	color: #FFF;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	text-align: center;
	font-size: 0.875em;
		}

        img.rubber {
    height: auto;
    max-width: 100%;
        }

        #overallContent {
	width: 80%;
    max-width: 1500px;/* a max-width may be desirable to keep all pages from getting too wide on a large monitor. IE6 does not respect this declaration but is now very old. At the start of almost every page, we have chosen to over-ride this i.e. set it locally as needed for the needs of each page. See comments on -1.htm page   */
    min-width: 320px;/* a min-width may be desirable to keep this layout from getting too narrow. This keeps line length more readable in the side columns. IE6 does not respect this declaration.
    NOTE THAT THIS IS VERY IMPORTANT AS PART OF THE SQUASHABLE DISPLAYS. IT SETS A LIMIT. Read more on our own guide(template)page: -1.htm
    This dates to our simple approach to web design back in 1996. */
    background-color: #000;
    margin: 0 auto; /* the auto value on the sides, coupled with the width, centers the layout. It is not needed if you set the .container's width to 100%. */
        }
		/* To oever-ride any of the above, for instance to have a larget or smaller max-width, then place this following code immediately after the beginEditable section, as is in fact now on every page as each page has a different reqirement:
                      <style> #overallContent {
                       max-width: 1200px
                      </style>        
         */
	


        /* This next code is very much in operation and is where the gray box comes from  */
        #footerContent {
    background-color: gray;
    text-align: center;
    padding-top:0px;
    padding-bottom:0px;
				/*padding-bottom:2px;*/
    clear:right;
    color: white;
			}
			

		/* Grouped Selectors - Common Formatting */

		/*
		p, ul {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: normal;
	color: #FFF;
	text-align: center;
			*/
			
			/* This in most web sites would be 'left', but I need the 'default' to be 'center' as most text is either justified (a separate instruction) or centred. Also, quite a lot of items need to be centred, and this is most easil done with <p> alone. JLB */
		}


		#mainContent p, #mainContent ul {
			/* Have to keep the above # line, or the template will not update the pages. But what's in this part is not needed as overallContent is ok:
	padding-bottom: 10px;
	text-justify: 12px;
			*/
		}


		td  /* This centres images horizontally in all tables (unless over-ridden locally), regardless of the text-align property in p above.
		       As I'm using tables extensively spefically to do this, this is a very important item.
			   I think that if you remove this, as long as 'p' has 'text-align center' the pictures will stay in the middle */

/*  I think this may now be rubbish, so taken out prior to deleting it:
{
	text-align: left;
}
*/

		/* CSS Pseudo Classes - Links */


		a img { /* this selector removes the default blue border displayed in some browsers around an image when it is surrounded by a link */
			border: none;
		}

		a:link {
			color:#FFF;/* #5BADFF for a standard white page */
		}

		a:visited {
			color:#FFF;/* #5BADFF for a standard white page */
		}

		a:hover {
			color:#FF0;/* #323FFF for a standard white page */
		}

		a:active {
	color: #FF0000;/* #FF0000 for a standard white page */
	font-weight: bold;
		}

/* Modifiers to the above instruction that keeps text central. This is used for most informative writing. (The font-size has been set above under h1 h2 h3 p). */
.textJustify {
	text-align: justify;
}
.italicText {
	font-style: italic;
}
.textRight {
	text-align: right;
}
.textLarger {
	font-size: 18px;
}

/*COLOURS*/

.textRed {
    color: red;
}
.textRedDark {
    color: darkred;
}
.textRedCrimson {
    color: crimson;
}
.textOrange {
    color: orange;
}						
.textOrangeDark {
    color: darkorange;
}
.textYellow {
    color: yellow;
}
.textGreen {
    color: green;
}
.textGreenDark {
    color: darkgreen;
}
.textGreenLawn {
    color: lawngreen;
}
.textGreenLight {
    color: lightseagreen;
}
.textGreenChartreuse {
    color: chartreuse;
}
.textBlue {
    color: blue;
}
.textBlueMedium {
    color: mediumblue;
}
.textBlueSky {
    color: skyblue;
}
.textBlueSkyDeep {
    color: deepskyblue;
}
.textBlueSlate {
    color: slateblue;
}
.textBlueLight {
    color: lightblue;
}
.textBlueCadet {
    color: cadetblue;
}
.textBlueMed {
    color: #3847F4;
}
.textIndigo {
    color: indigo;
}
.textOlive {
    color: olive;
}
.textPurpleR {
    color: rebeccapurple;
}
.textViolet {
    color: violet;
}
.textVioletBlue {
    color: blueviolet;
}
.textVioletDark {
    color: darkviolet;
}
.textShadow {
    text-shadow: 1 1 3px white;
}
.textBackBlueViolet {
    background-color: blueviolet;
}

/*FONT*/
.textSmaller {
	font-size: 0.7em;
			}

/* to remove?
.span {
    background-color: blueviolet;
}
*/