/* set the background colour the slate gray, set the page borders, margins and paddings  because  they are not consistent cross-browser. */
body { background: #4A676D; border: 0px; margin: 5px; font-family: verdana, sans-serif; color: #CCD3D7;}
body.showcase { color:#8B9C9E; }

/*  Debugging borders. */
/*
div {border: 1px dashed #8B9C9E; }
*/
/* no underlines on non-hovered links, underline on mouseover */
a { text-decoration: none;}
a:hover { color: #CCD3D7;}

/* outer container for the whole page.  This deals with different browers having different ideas about what text-align means, and also with some browsers ignoring the margins: auto descriptor */
div#outerpagecontainer { width: 100%; text-align: center; }


/* inner container for the whole page.  This deals with those browsers that ignore text-align as it applies to divs, but are aware of the margins: auto descriptor */
div#innerpagecontainer { width: 790px; margin: 0px auto 0px auto; padding: 0px; text-align: left;}


/* The top of the page.  Mostly empty in this site..... */
div#pagetop { }


/*....except for the information pages headline text 'mark cator' */
h1.markcator { color: #D610ED; letter-spacing: 0.35em; text-transform: uppercase; font-size: 10pt; margin: 8px 0px 0px 0px; font-weight:bold; }


/* the left hand menu container.  no text formatting information in this div, because the format of the menu changes slightly for the showcase pages */
div#menucontainer { margin-left: 30px; width: 146px; float: left;}


/* container for the menu on information pages (non-showcase) - sets font colour and size etc for these page's menu*/
div#menuinfopage, h2.menu, a { font-size: 7.5pt; line-height: 150%; padding: 0px 0px 0px 0px; color: red;}


/* container for the menu on shawcases - sets font colour and size etc for these page's menu*/
div#menushowcase, h2.menu, a { ; font-size: 7pt; line-height: 150%; padding: 0px 0px 0px 0px; color: #CCD3D7;}


/* the menu section headings - done as H2 to assist with SEO */
h2.menu { font-weight: bold; margin: 13px 0px 1px 0px; text-transform: uppercase;}


/* content container */
div#contentcontainer { width: 576px; float: left; margin: 12px 0px 0px 0px; text-align: right; }
div#contentcontainer h2 { font-size: 12px;}
div#contentcontainer p { font-size: 8pt;}
div#contentcontainer a { font-size: 8pt; }

/* captioned picture, and it's caption.  referenced dynamically within the style= tag, ditto hieght and width */
div#captionedpicture { border: 1px solid white; margin-left: auto;}
div#captionedpicturecaption {  padding: 3px; color: #CCD3D7; font-size: 10px; }
.picturecaption {padding: 3px; color: #CCD3D7; font-size: 10px;   }

div#extrainfo { font-size: 8pt; margin-top: 150px; /*width: 160px; */}

div#homepagetext { clear:both; text-align: right; font-size: 8pt; padding-top: 25px; width: 369px; }

/* text sizing etc for showcase texts */
div#showcasecontent { font-size: 8pt; margin: 6px 0px 0px 0px; text-align: right;}

/* the prev / next buttons */
div#picnav { float: left; width: 90px; text-align: left;}

/* the picture caption */
div#showcasecaption { font-size: 7pt; margin-top: 2px; float: right; width: 400px; text-align: right}

/* the thumbnail container */
div#thumbnails { margin: 40px 0px 15px 0px; text-align: right;}

/* the thumnail images */
img.thumbnail { margin: 0px 7px 0px 0px;  border: none;}

/* the mouse-over popup image */
div.popup { position: absolute; z-index: 50; visibility: hidden; top: 0px; left: 0px; }

img.popup { border: 1px solid #fff; }

/* Linebreak div.  Useful for fixing firefox's background/float issue.  Must have some content - suggest   */
div.linebreak { width: 100%; clear: both; font-size: 2px; height: 12px;}

/* generic highlighting class - make whatever is selected white and bold */
.selected { color: #fff; font-weight: bold;}

h1 { font-size: 20px; }

div#orderform { width: 90%; text-align: center; margin-left: auto; margin-right: auto; background-color: #768A93; padding-top: 2px; }

table.orderform { width: 80%; margin-left: auto; margin-right: auto; margin-bottom: 5px;}
table.orderform input { width: 350px }
table.products { font-size: 12px; width: 85%; margin-left: auto; margin-right: auto; padding-top: 5px; padding-bottom: 5px; }
table.products td.header { text-align: center; border-left: 1px solid #667880; border-right: 1px solid #667880; border-top: 2px solid #667880; border-bottom: 2px solid #667880; background: #929FA5; color: #FFFFFF;}
table.products td.left { border-left: 2px solid #667880; border-top: 2px solid #667880; border-right: 1px solid #667880; text-align: center; border-bottom: 2px solid #667880; background: #929FA5; color: #FFFFFF;}
table.products td.right { border-left: 1px solid #667880; border-top: 2px solid #667880; border-right: 2px solid #667880; text-align: center; border-bottom: 2px solid #667880; background: #929FA5; color: #FFFFFF;}
table.products td.rowleft { border-left: 2px solid #667880; border-right: 1px solid #667880; text-align: center; background: #929FA5; color: #FFFFFF;}
table.products td.rowright { border-left: 1px solid #667880; border-right: 2px solid #667880; text-align: center; background: #929FA5; color: #FFFFFF;}
table.products td.row { border-left: 1px solid #667880; border-right: 1px solid #667880; text-align: center; padding-left: 2px;background: #929FA5;color: #FFFFFF;}
table.products td.bottomleft {border-left: 2px solid #667880; border-top: 2px solid #667880; border-right: 1px solid #667880; text-align: center; border-bottom: 2px solid #667880; background: #929FA5; color: #FFFFFF;}
table.products td.bottomright {border-left: 1px solid #667880; border-top: 2px solid #667880; border-right: 2px solid #667880; text-align: center; border-bottom: 2px solid #667880;background: #929FA5; color: #FFFFFF;}

table.buttons { width: 100%; padding: 10px; }
.red {
color: #FFFF00;
font-style: bold;
}

button {
background: #4A676D;
color: white;
font-size: 10px;
font-family: Verdana,Arial,Helvetica;
}