html, body { 
  background-color:#000;
   font:18px Arial, Helvetica, Sans Serif; color:#000;
  margin:0;
  padding:0;
}

a:link {font: 18px Arial;text-decoration: none; color:#ca0000; font-weight:bold;}
a:visited {font: 18px Arial;text-decoration: none; color:#843232; font-weight:bold;}
a:active {font: 18px Arial;text-decoration: none; color:#ecd9d9; font-weight:bold;}
a:hover {font: 18px Arial; text-decoration: none; color:#ecd9d9; font-weight:bold;}

a.sm:link {font: 14px Comic Sans MS; text-decoration: none; color:#ca0000; font-weight:bold;}
a.sm:visited {font: 14px Comic Sans MS; text-decoration: none; color:#843232; font-weight:bold;}
a.sm:active {font: 14px Comic Sans MS; text-decoration: none; color:#ecd9d9; font-weight:bold;}
a.sm:hover {font: 14px Comic Sans MS; text-decoration: none; color:#ecd9d9; font-weight:bold;}

a.sm2:link {font: 14px Arial; text-decoration: none; color:#ca0000; font-weight:bold;}
a.sm2:visited {font: 14px Arial; text-decoration: none; color:#843232; font-weight:bold;}
a.sm2:active {font: 14px Arial; text-decoration: none; color:#ecd9d9; font-weight:bold;}
a.sm2:hover {font: 14px Arial; text-decoration: none; color:#ecd9d9; font-weight:bold;}

#small
{
font-size:16px;
}


#container
{
display: table;
border-width: 0px;
width: 100%;
    margin-right: auto;
    margin-left: auto;
    margin-top: none;
    padding: 0px;
    margin: 0px;
}

#container2
{
display: table;
border-width: 0px;
width: 80%;
    margin-right: auto;
    margin-left: auto;
    margin-top: none;
    padding: 2px;
    margin: 0px;
background-color:#fff
}


#row
{
display: table-row;
border-style: solid;
border-width: 2px;
}

#col
{
display: table-cell;
text-align: center;
vertical-align: top;
border-width: 0px;
}

#col2
{
display: table-cell;
vertical-align: top;
border-style: solid;
border-width: 2px;
background-color:#ffffff;
background-image:url('images/argyle.png'); 
width:900px;
padding: 10px;
}

#containera
{
display: table;
border-width: 0px;
width: 100%;
    margin-right: auto;
    margin-left: auto;
    margin-top: none;
    padding: 0px;
    margin: 0px;
   font:12px Arial, Helvetica, Sans Serif; color:#000;
}

#containerb
{
display: table;
border: 2px solid;
width: 95%;
    margin-right: auto;
    margin-left: auto;
    margin-top: auto;
    padding: 4px;
    margin: 0px;
}


#containerc
{
display: table;
border-width: 0px;
width: 80%;
    margin-right: auto;
    margin-left: auto;
    margin-top: none;
    padding: 2px;
    margin: 0px;
}

#containerd
{
display: table;
border-width: 0px;
width: 90%;
    margin-right: auto;
    margin-left: auto;
    margin-top: none;
    padding: 2px;
    margin: 0px;
}


#row2
{
display: table-row;
}

#row3
{
display: table-row;
height: 20px;
}

#col3
{
display: table-cell;
text-align: center;
vertical-align: top;
border-width: 0px;
width:100px;
  font:14px Arial, Helvetica, Sans Serif; color:#000000;
}

#col4
{
display: table-cell;
text-align: center;
vertical-align: top;
border: 1px solid;
    padding: 4px;
}

#col5
{
display: table-cell;
text-align: left;
vertical-align: top;
border-width: 0px;
}

#col6
{
display: table-cell;
text-align: left;
vertical-align: top;
border-width: 0px;
width:50px;
}

#thumb
{
border: 1px solid #7f6651;
}

table.blueTable {
  width: 100%;
  text-align: left;
  border-collapse: collapse;
}
table.blueTable td, table.blueTable th {
  padding: 3px 2px;
}
table.blueTable tbody td {
  font-size: 13px;
}
table.blueTable tfoot td {
  font-size: 14px;
}
table.blueTable tfoot .links {
  text-align: right;
}
table.blueTable tfoot .links a{
  display: inline-block;
  background: #1C6EA4;
  color: #FFFFFF;
  padding: 2px 8px;
  border-radius: 5px;
}

#header
{font:20px Arial; font-weight:bold;}

 /***Style the unordered list with the class 'enlarge'***/
    ul.enlarge{
    list-style-type:none; /*remove the bullet point*/
    }
    ul.enlarge li{
    display:inline-block; /*places the images in a line*/
    position: relative; /*allows precise positioning of the popup image when used with position:absolute - see support section */
    z-index: 0; /*resets the stack order of the list items - we'll increase in step 4. See support section for more info*/
    margin:0px 0px 10px 0px; /*space between the images*/
    }



    /***In the HTML in step one we placed the large image inside a <span>, now we move it off the page until it's required***/
    ul.enlarge span{
    position:absolute; /*see support section for more info on positioning*/
    left: -9999px; /*moves the span off the page, effectively hidding it from view*/
    }



    /***Note: This styling will apply to both the thumbnail and popup image, unless you override these styles in step five***/
    ul.enlarge img{
    /*give the thumbnails a frame*/
    background-color:#c40000; /*frame colour*/
    padding: 6px; /*frame size*/
    /*add a drop shadow to the frame*/
    -webkit-box-shadow: 0 0 6px rgba(132, 132, 132, .75);
    -moz-box-shadow: 0 0 6px rgba(132, 132, 132, .75);
    box-shadow: 0 0 6px rgba(132, 132, 132, .75);
    /*and give the corners a small curve*/
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    }


 ul.enlarge li:hover{
z-index: 50; /*places the popups infront of the thumbnails, which we gave a z-index of 0 in step 1*/
cursor:pointer; /*changes the cursor to a hand*/
}
/***We bring the large image back onto the page by reducing left from -9999px (set in step 2) to figures below***/
ul.enlarge li:hover span{ /*positions the <span> when the <li> (which contains the thumbnail) is hovered*/
top: 0px; /*the distance from the bottom of the thumbnail to the top of the popup image*/
left: -25px; /*distance from the left of the thumbnail to the left of the popup image*/
}
/***To make it look neater we used :nth-child to set a different left distance for each image***/
ul.enlarge li:hover:nth-child(2) span{
left: -100px;
}
ul.enlarge li:hover:nth-child(3) span{
left: -200px;
}



    /***Override the styling of images set in step 3 to make the frame smaller and the background darker***/
    ul.enlarge span img{
    padding: 2px; /*size of the frame*/
    background: #ccc; /*colour of the frame*/
    }

    /***Style the <span> containing the framed images and the caption***/
    ul.enlarge span{
    /**Style the frame**/
    padding: 10px; /*size of the frame*/
    background:#fff; /*colour of the frame*/
    /*add a drop shadow to the frame*/
    -webkit-box-shadow: 0 0 20px rgba(0,0,0, .75));
    -moz-box-shadow: 0 0 20px rgba(0,0,0, .75);
    box-shadow: 0 0 20px rgba(0,0,0, .75);
    /*give the corners a curve*/
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius:8px;
    /**Style the caption**/
    font-family: 'Droid Sans', sans-serif; /*Droid Sans is available from Google fonts*/
    font-size:.9em;
    text-align: center;
    color: #495a62;
    }