#logo
{
    position: relative;
    top: 10px;
    left: 20px;
    border: none;
}

#logo-right
{
    position: relative;
    top: 20px;
    left: 550px;
    height: 70px;
    border-right: 1px solid black;
    border-top: 1px solid black;
}

a:link, a:visited
{
    color: rgb(59, 89, 152);
    font-weight: bold;
}


/*Override the widths used on the publishing site*/
div.rhs
{
    width:200px;
}

div.rhs h1
{
    width: 190px;    
}

.sub-pane
{
    width:670px;
}

.tour-menu a
{
    display: block;
}

ul.enlarge{
list-style-type:none; /*remove the bullet point*/
}
ul.enlarge li{
    width: 170px;
    vertical-align:text-top;
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:10px 10px 0 10px; /*space between the images*/
}

ul.tight li, ul.tight p {
    margin: 5px 0 0 0;
    width:110px;
}

/***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*/
}

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: -300px; /*the distance from the bottom of the thumbnail to the top of the popup image*/
left: -20px; /*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; 
}

ul.tight li:hover span, ul.enlarge li:hover:nth-child(2) span, ul.enlarge li:hover:nth-child(3) span{
top: -20px; /*the distance from the bottom of the thumbnail to the top of the popup image*/
left: -10px; /*distance from the left of the thumbnail to the left of the popup image*/    
}

#downloadbox p
{
    padding:0;
    margin:0;
}

#downloadbox img
{
    margin-right: auto;
    margin-left: auto;
    display: block;
}

/** override form border */
form
{
    border-style: none;
    padding:0;
}

form h2
{
    text-align: left;
}

.srdfooter tr.even
{
    background: none;
}

table.srd p
{
    margin:0;
    padding:0;
}

table.srd th, table.srd td
{
    padding: 0 10px;    
}

table.srd
{
    border-spacing:0;
}

table.srd th
{
    background-color: #1b468c;
    color:white;
    font-weight: bold;
}

table.srd tr.odd
{
    background-color: #e4ecf9;
}

table.srd tr.even
{
    background-color: #c7d8f4;
}

h5.title
{
    font-weight: bold;
    font-size: 14px;
    color: #5a4c9f;
}

table.srdfooter
{
    width:100%;
}

#purchasebox select
{
    width:170px;    
}