body { background: #4A676D; border: 0px; margin: 15px 5px 5px 5px; font-family: verdana, sans-serif; color: #CCD3D7; font-size: 12px;}

a { text-decoration: none;}
a:hover { color: #CCD3D7;}

a img { border: 0; }
div#outerpagecontainer { width: 100%; text-align: center;  }
div#innerpagecontainer { width: 800px; margin: 0px auto 0px auto; padding-top: 20px; text-align: left; }

div#menucontainer { margin-left: 10px; width: 140px; 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: 9pt; 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: 8.5pt; 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: 550px; float: right; margin: 30px 0px 0px 0px; text-align: left; height: 500px; position: relative;  }
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: left; 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 { text-align: left; bottom: 0px; width: 100%; position: absolute; right: 0; bottom: 0; }

div#thumbnails1 { text-align: left; top: 380px; bottom: 0px; width: 100%; position: absolute; right: 0; bottom: 0; }




/* the thumnail images */
img.thumbnail { margin: 10px 13px 0px 0px;  border: none;}
img.thumbail-nopad { margin: 0; border: none;}

.case-study-thumbnail { width:110px; }

.clear { clear: both; height: 0px; font-size: 0; }
.gallery-image { border: 1px solid #ffffff; position:absolute; top: 1px; right: 0; z-index:0; float: right; clear: both; }
.gallery-caption { float: right; text-align:right; clear: both; width: 300px; margin-top: 8px; position:absolute; top: 1px; right: 0; z-index:0; background: #4A676D; }
.inlinediv { display: inline }

.picture_frame { height: 350px; width:531px; background:#ffffff; text-align:center; display: table-cell; vertical-align: middle; }