div.pageHeading { background-image: url(../css/img/headers/Basics.gif); }
div#content { height: 470px; }
div#content div.cell { position: absolute; }
div#content div.row1 { height: 287px; top: 0; }
div#content div.row2 { height: 180px; top: 290px; }
div#content div.col1 { width: 180px; }
div#content div.col2 { width: 396px; left: 183px; }
div#quad1 { background-color: #fff; }
div#quad2 { background-color: #fff; }
div#quad3 { background-color: #e3e3e3; }
div#quad4 { background-color: #f3f3f3; }


/* quad 1 */
div#quad1 h2
{
   text-align: center;
   margin-top: 10px;
}
img#metalWrapStand
{
   position: absolute;
   top: 40px;
   left: 20px;
}
a.showWrapper, a.hideWrapper
{
   position:absolute;
   display:block;
   width: 20px;
   height: 20px;
}
a.showWrapper span,
a.hideWrapper span
{
   display: none;
}
a.showWrapper.show
{
   background: url(img/show.gif) no-repeat left top;
}
a.showWrapper.show:hover 
{
   background-image: url(img/showHover.gif)
}
a.showWrapper.hide
{
   background: url(img/hide.gif) no-repeat left top;
}
a.showWrapper.hide:hover 
{
   background-image: url(img/hideHover.gif)
}
a#showWrapper {
   right: 36px;
   top: 135px;
}
a#hideWrapper {
   right: 15px;
   bottom: 15px;
}

div#largeWrapper
{
   position: absolute;
   left: 230px;
   top: 5px;
   width: 270px;
   height: 440px;
   border: 2px solid #ffb2e6;
   background: #fff;
   z-index: 999;
   display: none;
}
div#largeWrapper h2
{
   text-align: center;
   margin-top: 10px;
   color: #999;
}
img#metalWrapStandLg
{
   position: absolute;
   left: 30px;
   top: 40px;
}


a.pdf-download
{
   display: block;
   position: absolute;
   right: 30px;
   bottom: 20px;
   color: #ccc;
}


/* quad 2 */
img#mainImage
{
   position: absolute;
   top: 5px;
   left: 0;
}



/* quad3 */
h3#colourHeading
{
   position: absolute;
   top: 17px;
   left: 20px;
   margin: 0;
}
div#swatch
{
   position: absolute;
   left: 20px;
   top: 40px;
   width: 140px;
}
div#swatch a
{
   display: block;
   float: left;
   width: 26px;
   height: 26px;
   border: 1px solid #fff;
   margin: 0;
   padding: 0;
   text-decoration: none;
}
div#swatch div.row
{
   clear: both;
}
div#swatch a:hover { border-color: #000; }
div#swatch a.yellow { background-color: #FFE955; }
div#swatch a.orange { background-color: #F78F1E; }
div#swatch a.palePink { background-color: #FBC7CB; }
div#swatch a.cerise { background-color: #E877AF; }
div#swatch a.red { background-color: #ED174A; }
div#swatch a.sugarPlum { background-color: #9F7490; }
div#swatch a.lavendar { background-color: #B4B2D9; }
div#swatch a.seaBlue { background-color: #9ECBEC; }
div#swatch a.cobaltBlue { background-color: #01609A; }
div#swatch a.aqua { background-color: #A0D8D7; }
div#swatch a.lime { background-color: #E3E76E; }
div#swatch a.metallicTurquoise { background-color: #07637A; }
div#swatch a.mint { background-color: #D9EEE7; }
div#swatch a.chocolate { background-color: #7B1700; }
div#swatch a.silver { background-color: #A8A9AD; }
div#swatch a.gold { background-color: #A39161; }
div#swatch a.cream { background-color: #fef5d8; }
div#swatch a.black { background-color: #000; }
div#swatch a.purple { background-color: #6c2b87; }
div#swatch a.emerald { background-color: #007c6a; }
div#swatch p.color
{
   clear: both;
   text-align: center;
   color: #FF66CC;
   height: 22px;
   margin: 0;
}


/* quad4 */
div#notes
{
   text-align: center;
   padding: 15px 0;
   font-weight: bold;
}
div#pos
{
   border-top: 3px solid #fff;
   padding: 5px 10px;
   text-align: left;
}
div#pos h3
{
   margin-top: 10px;
}
div#newColours
{
   margin: 1.4em 0 0 0;
}
div#newColours img
{
   vertical-align: -1px;
}