/*
 -----------------------------------------
| Author: Robin Melville              |
| Version: 2                                   |   
| Date: 01-05-2007                      |   
 -----------------------------------------
*/

/*NOTE: where you see multiple NNNNNNNNNNNNN's placed; this designates the begining of a new section of code */

/* 
the border 0 here permanently removes default appearances of form elements such as radio buttons and
can never be restored via css rules
this will have to be removed in the future with some thorough testing done afterwards
*/

*
{
margin: 0;
padding: 0;
border: 0;
}

/* this sets the pixel height to 10px throughout the document, to be moderated by using 'em'*/
/* the font size % allows us to easily control the typography throughout the site */

body
{
background-color: white;
font-size: 62.5%;
font-family: Arial;
}					

/* This technique is courteous of Richard Rutter  */
/* the change defaulted some browsers to 10px (IE) and others to 12 on headings (Gecko) */
/* the following standardises some mishaps caused by our font-sizing*/

/* I'v decided not to let this functionality effect the header in IE*/

input, select, tr, td, li li, text area
{
font-size: 1em;
}


/*NNNNNNNNNNNNNN HEADING STYLES SECTION HERE NNNNNNNNNNNN*/

h1, span.h1
{
font-size: 1.5em;
margin: 10px 5px;
color: #F60;
display: block;
}

h1.largeH1, span.h1.largeH1
{
font-size: 2em;
}

h2, span.h2
{
background-color: transparent;
color: #1384D4;
font-size: 1.4em;
margin: 10px 0 5px 0;
display: block;
}

h2.largeH2, span.h2.largeH2
{
font-size: 2em;
}

h3
{
font-family: arial;
font-weight: bolder;
font-size: 1.1em;
letter-spacing: 0px;
margin: 8px 0px 0px 0px;
}

h3.largeH3
{
font-family: "arial black";
font-size: 1.5em;
line-height: 17px;
}

#magazineLatestIssue h3
{
font-size: 1.3em;
color: #1384D4;
}

#regulationFinder h3
{
margin-top: 6px;
border-bottom: 1px dotted #D7F0FD;
}

h1.contentHeading 
{
font-family: "arial black";
font-size: 1.8em;
font-weight: normal;
letter-spacing: -1px;
color: #1384D4;
margin: 0px;
padding: 0px;
border-bottom: 1px solid #6CA4C3;
}


h4, h5, h3.greyH3blueBB
{
color: #1583D5;
font-size: 1.2em;
line-height: 10px;
padding: 0px 0px 4px 0px;
border-bottom: 1px solid #6CA4C3;
letter-spacing: 0.8px;
}

#regulationFinder h5
{
margin-top: 10px;
}

#bodyLeft h4
{
padding-left: 5px;
}

#contentTop h4, #contentBottom h4, #extraFeatures h4
{
font-size: 1.1em;
border: 0px;
}

h5, h1.contentHeading, h3.greyH3blueBB
{
background-color: transparent;
color: #808080;
padding: 4px 0px;
line-height: normal;
}

/*i.e BROWSE BY */
#extraFeaturesRow2 h5
{
color: #1583D5;
border: 0px;
}

#site h5.blueH5
{
color: #1583D5;
border-bottom: 1px solid #6CA4C3;
margin-right: 7px;
}

/* used on the legend for the e-learning login box */
span.blueH5
{
color: #1583D5;
margin: 0px 10px;
font-size: 1.2em;
font-weight: bold;
}

/*to get the gap between the borders of 'BROWSE BY' and 'EXCLUSIVELY' columns*/
#contentBottom h5
{
margin-right: 7px;
}

/*the border would not continue under the search area to edge of page thus border on bottom of the div instead*/
#contentHeading h5, #contentHeading h1.contentHeading
{
border: 0px;
}

h6, span.h6
{
font-size: 1.1em;
margin: 2px;
}

span.h6
{
font-weight: bold;
display: block;
}

h6.largerMargin, span.h6.largerMargin
{
margin-top: 8px;
}

h1, h2, h3, h4, h5, h6
{
font-weight: bold;
}


/*NNNNNNNNNNN LINK STYLES HERE NNNNNNNNNNNNNNNN*/


/*more specific editions to these located in appropriate sections*/

h1 a:link, h1 a:visited, h2 a:link, h2 a:visited, h4 a:link, h4 a:visited, h5 a:link, h5 a:visited, h6 a:link, h6 a:visited, #nav ul#navPrimary li a:link, #nav ul#navPrimary li a:visited, #nav ul#navSecondary li a:link, #nav ul#navSecondary li a:visited, #breadcrumb ul li a:link, #breadcrumb ul li a:visited, div.tags a:link, div.tags a:visited, 
#footer ul li a:link, #footer ul li a:visited, #resourceExtraFeatures a:link, #resourceExtraFeatures a:visited, #regulationFinder a:link, #regulationFinder a:visited
{
background-color: transparent;
color: #1583D5;
text-decoration: none;
font-weight: bold;
}

h1 a:hover, h2 a:hover, h4 a:hover, h5 a:hover, h6 a:hover, #nav ul#navSecondary li a:hover, #nav ul#navPrimary li a:hover, 
#breadcrumb ul li a:hover, div.tags a:hover, #footer ul li a:hover, #resourceExtraFeatures a:hover, #regulationFinder a:hover
{
background-color: transparent;
color: #F60;
}

h4 a:link, h4 a:visited
{
background: transparent url("../images/arrowBlue.gif") no-repeat 3px 3px;
margin: 0px;
padding: 0px 0px 0px 12px;
}

h4 a:hover
{
background: transparent url("../images/arrowOrange.gif") no-repeat 3px 3px;
}

#bodyLeft h4 a
{
margin-left: -5px;
}

#site #body h4.blueArrowH4
{
line-height: normal;
}

#site #body h4.blueArrowH4 a
{
display: block;
background-position: 3px 1px;
}

/* HEADING STYLES SECTION ENDS HERE */

a:link, a:visited
{
background-color: transparent;
color: #1583D5;
text-decoration: none;
}

a:hover
{
background-color: transparent;
color: #F60;
}

h3 a:link, h3 a:visited
{
background-color: transparent;
color: black;
text-decoration: none;
}

h3 a:hover
{
background-color: transparent;
color: #F60;
}

#navSecondary li#register a:link.orangeToBlue, #navSecondary li#register a:visited.orangeToBlue
{
font-family: arial;
color: #F60;
font-size: 1em;
}

div#site a:link.orangeToBlue, div#site a:visited.orangeToBlue
{
background-color: transparent;
color: #F60;
text-decoration: none;
font-family: "arial black";
letter-spacing: 0px;
}

div#site a:link.orangeToBlue.normal, div#site a:visited.orangeToBlue.normal
{
font-family: "arial";
letter-spacing: normal;
}

div#site a:hover.orangeToBlue, #navSecondary li#register a:hover.orangeToBlue
{
background-color: transparent;
color: #1583D5;
}


/*the classes allow us to easily change the links style depending on which pages we are on in the navigation */

#footer.aboutUs ul li a#footerAboutUs:link, #footer.aboutUs ul li a#footerAboutUs:visited,
#footer.privacyPolicy ul li a#footerPrivacyPolicy:link, #footer.privacyPolicy ul li a#footerPrivacyPolicy:visited,
#footer.contactUs ul li a#footerContactUs:link, #footer.contactUs ul li a#footerContactUs:visited,
#footer.termsConditions ul li a#footerTermsConditions:link, #footer.termsConditions ul li a#footerTermsConditions:visited,
#footer.careers ul li a#footerCareers:link, #footer.careers ul li a#footerCareers:visited,
#footer.membership ul li a#footerMembership:link, #footer.membership ul li a#footerMembership:visited,
#footer.sitemap ul li a#footerSitemap:link, #footer.sitemap ul li a#footerSitemap:visited, 
body div#site div#nav ul li a.activeNav:link, body div#site div#nav ul li a.activeNav:visited
{
background-color: transparent;
color: #F60;
text-decoration: none;
font-weight: bold;
}

#footer.aboutUs ul li a#footerAboutUs:hover, #footer.privacyPolicy ul li a#footerPrivacyPolicy:hover,
#footer.contactUs ul li a#footerContactUs:hover, #footer.termsConditions ul li a#footerTermsConditions:hover,
#footer.careers ul li a#footerCareers:hover, #footer.membership ul li a#footerMembership:hover,
#footer.sitemap ul li a#footerSitemap:hover, body div#site div#nav ul li a.activeNav:hover
{
background-color: transparent;
color: #1583D5;
}

#breadcrumb ul li a:link, #breadcrumb ul li a:visited
{
background: transparent url("../images/chevronBlue.gif") no-repeat left center;
}

#breadcrumb ul li a:hover
{
background: transparent url("../images/chevronOrange.gif") no-repeat left center;
}

#breadcrumb ul li.active a:link, #breadcrumb ul li.active a:visited
{
background: transparent url("../images/chevronOrange.gif") no-repeat left center;
color: #F60;
}

#breadcrumb ul li.active a:hover
{
background: transparent url("../images/chevronBlue.gif") no-repeat left center;
color: #1583D5;
}

a.active:link, a.active:visited
{
color: #F60;
}

a.active:hover
{
color: #1583D5;
}

/* this is for the trial activation page */
a.activationLink:link, a.activationLink:visited
{
display: block;
width: 489;
height: 98px;
font-size: 4.6em;
color: white;
text-align: center;
font-family: "arial black";
padding: 8px 0px 0px 0px;
background: transparent url("../images/trialActivationbuttonblue.gif") no-repeat left top;
}

a.activationLink:hover
{
background: transparent url("../images/trialActivationbutton.gif") no-repeat left top;
}

/*LINK STYLES ENDS HERE */



/*NNNNNN TYPOGRAPHY STYLES NNNNNNNNNN*/


p
{
margin: 5px 0px 0px 0px;
font-size: 1.1em;
}

/* Added by Tariq Hussein - basically, when viewing old communications, they still have pre tags in them */
pre
{
margin: 5px 0px 0px 0px;
font-size: 1.1em;
font-family: Arial;
}


small
{
color: #808080;
font-size: 1em;
font-weight: bold;
}

blockquote
{
/*margin: 2% 8%;*/
margin: 5px 0px 0px 15px;
padding: 0px 0px 5px 10px;
vertical-align: top;
border: 0px;
font-size: 1.1em;
}

blockquote cite
{
font-size: 0.8em;
}

blockquote p
{
font-size: 1em;
}

blockquote small
{
font-size: 0.8em;
}

.bold
{
font-weight: bold;
}

fieldset
{
border: 0px;
}

img
{
border: 0px;
}

hr, div.hr
{
clear: both;
border-bottom: 2px solid #6CA4C3;
margin: 5px 5px 10px 0px;
}

div.lightHr
{
clear: both;
border-bottom: 1px solid #CCCCCC;
margin: 5px 5px 10px 0px;
}

#site div.ultraClear, div.ultraClear
{
clear: both;
margin: 0px;
border: 0px;
width: 0px;
padding: 0px;
height: 0px;
}

/* initializing floated lists */

#nav ul, #nav ul li, #footer ul, #footer ul li, #awards ul, #awards ul li, #breadcrumb ul, #breadcrumb ul li
{
list-style: none;
float: left;
display: inline;
}

/*TYPOGRAPHY STYLES ENDS HERE*/


/*SOME GENERAL STYLES */

.clear, div#site div#head .clear, div#site div#body .clear
{
clear: both;
}

#site #body .removeBorder
{
border: 0px;
}

#site #body .removeBkgd
{
background-image: none;
}

#site .blackText
{
background-color: transparent;
color: black;
}

#site .orangeText, #callForHelp .orangeText
{
background-color: transparent;
color: #F60;
}

#site #body .blueText
{
color: #1583D5;
}

#site .font11, .font11
{
font-size: 1.1em;
}

p span.emphasize
{
font-size: 1em;
font-weight: bold;
text-decoration: underline;
}

.margins
{
margin: 0px 5px;
}

#site .font13
{
font-size: 1.3em;
}

#site #body #right .forwardPaginationChevron a
{
padding-right: 20px;
}

.forwardPaginationChevron a:link, .forwardPaginationChevron a:visited
{
background: transparent url("../images/chevronBlue.gif") no-repeat center right;
}

.forwardPaginationChevron a:hover
{
background: transparent url("../images/chevronOrange.gif") no-repeat center right;
}

#site #body #right .reversePaginationChevron a
{
padding-left: 20px;
}

.reversePaginationChevron a:link, .reversePaginationChevron a:visited
{
background: transparent url("../images/reverseChevronBlue.gif") no-repeat center left;
}

.reversePaginationChevron a:hover
{
background: transparent url("../images/reverseChevronOrange.gif") no-repeat center left;
}

#site #body .noMarginOrPadding
{
padding: 0px;
margin: 0px;
}

.submit, .submitBig, .registerButton
{
background: transparent url("../images/loginButton.jpg") no-repeat left top;
display: block;
width: 48px;
height: 17px;
margin: 5px 0px;
padding: 0px;
color: white;
cursor: pointer;
}

.submitBig, .registerButton
{
background: transparent url("../images/loginButtonBig.jpg") no-repeat left top;
width: 75px;
height: 27px;
font-size: 1.6em;
font-weight: bold;
}

.blueSubmit
{
color: #1384D4;
background-color: white;
cursor: pointer;
}

.registerButton
{
background: transparent url("../images/registerButton.jpg") no-repeat left top;
width: 109px;
}

.blueButton, .greenButton, .orangeButton, #site .blueButton, #site .greenButton, #site .orangeButton
{
height: 16px;
border: 1px solid #A6A6A5;
cursor: pointer;
color: white;
font-size: 1.1em;
font-weight: bold;
padding: 0px 0px 0px 2px;
margin: 2px 0px 0px 0px;
display: block; /*added 10/09/2007 for blue button link on viewMessageSuccess */
text-align: center;
overflow: visible; /*hack for IE that causes the inline box i.e for text, to overflow its outerbox padding and allows for bottom parts of letters like j, g, q to be seen*/
}

input.blueButton, input.greenButton, input.orangeButton
{
padding: 0px;
}

/* if this type of button begins to be used often can put background in here x-repeat*/
.whiteButton
{
margin-left: 20px;
width: 84px;
height: 24px;
border: 0px;
cursor: pointer;
background: transparent url("../images/activate.gif") no-repeat left top;
}

#site a.whiteButton:link, #site a.whiteButton:visited
{
margin: 0px;
padding: 0px;
margin-left: 20px;
width: 84px;
height: 24px;
display: block;
}

.whiteButton.activate
{
background-image: url("../images/activate.gif");
}

.whiteButton.takeTour
{
background-image: url("../images/takeTour.gif");
}

.whiteButton.getQuote
{
background-image: url("../images/getQuote.gif");
}

.whiteButton.upgrade
{
background-image: url("../images/upgrade.gif");
}

.blueButton:link, .blueButton:visited, .greenButton:link, .greenButton:visited, .orangeButton:link, 
.orangeButton:visited, #site .orangeButton:link, #site .orangeButton:visited
{
color: white;
margin: 2px 0px 0px 0px;
padding: 0px 0px 0px 2px;
border: 1px solid #A6A6A5;
}

.blueButton:hover
{
color: white;
background-color: #1583D5;
}

.greenButton:hover
{
color: white;
background-color: #29D610;
}

.orangeButton:link, .orangeButton:visited, #site .orangeButton:link, #site .orangeButton:visited
{
background-color: #F88537;
padding: 0px 5px;
width: auto;
}

.orangeButton:hover, #site .orangeButton:hover
{
color: white;
background-color: #F88537;
}

.blueButton
{
background: #1583D5 url("../images/blueButtonBkgd.gif") repeat-x left top;
width: 95px;
}

.greenButton
{
background: #29D610 url("../images/greenButtonBkgd.gif") repeat-x left top;
width: 78px;
}

.blueButton.big, .orangeButton.large, #site .blueButton.big, #site .orangeButton.large
{
width: 120px;
height: 23px;
}

#site .orangeButton.large:link, #site .orangeButton.large:visited
{
font-size: 1.2em;
padding: 5px 5px 0px 5px;
height: 18px;
}

.blueButton.big
{
background-image: url("../images/blueBigButtonBkgd.gif");
}

/*IE6 has problem with this being orangeButton.big
confuses it with the .big extension of .blueButton*/
.orangeButton.large
{
background: #F88537 url("../images/orangeBigButtonBkgd.gif") repeat-x left top;
}

/*
TODO: check out the default list style; if floating next to image
the arrows appear behing the image; only problem in bookshop (temp fixed
with larger margin) so far
the rest of resources dont have cms text next to the top floating image
*/

#site #body ul.ordinaryList
{
list-style: none;
margin: 7px 5px;
font-size: 1em;
}

#site #body ul.ordinaryList.font11
{
font-size: 1.1em;
}

#site #body ul.ordinaryList.bold
{
font-weight: bold;
}

#site #body ul.ordinaryList .font16
{
font-size: 1.6em;
}

#site #body ul.ordinaryList li
{
list-style: none;
list-style-image: none;
font-size: 1em;
margin: 2px 0px 2px 15px;
}

#site #body ul.ordinaryList.extraSpace li
{
margin-top: 5px;
margin-bottom: 5px;
}

#site #body ul.ordinaryList.left
{
margin-left: 0px;
}

#site #body ul.ordinaryList.left li
{
margin-left: 0px;
padding-left: 0px;
}

#site #body #right ul.horizontalTabs
{
list-style: none;
float: left;
border-top: 1px solid #6CA4C3;
margin: 0px;
padding: 0px;
}

#site #body ul.horizontalTabs li
{
list-style: none;
float: left;
padding: 0px;
margin: 0px 2px 0px 0px;
}

#site #body ul.horizontalTabs li.last
{
margin: 0px;
}

#site #body ul.horizontalTabs li a
{
display: block;
font-size: 1.2em;
font-weight: bold;
white-space: nowrap;
width: 225px;
padding: 2px 5px 2px 10px;
}

#site #body ul.horizontalTabs li a:link, #site #body ul.horizontalTabs li a:visited
{
background: #BDBEC0 url("../images/arrowWhite.gif") no-repeat 3px 5px;
color: #FFF;
}

#site #body ul.horizontalTabs li a.active:link, #site #body ul.horizontalTabs li a.active:visited, #site #body ul.horizontalTabs li a:hover
{
background: #D7F0FD url("../images/arrowBlue.gif") no-repeat 3px 5px;
color: #1583D5;
}

div.speechBubblePeople
{
background: transparent url("../images/speechBubblePeople.gif") no-repeat left top;
width: 444px;
height: 96px;
padding: 10px;
font-size: 1.8em;
margin-top: 20px;
}

div.speechPeopleTwoBubbles
{
background: transparent url("../images/speechPeopleTwoBubbles.gif") no-repeat left top;
width: 136px;
height: 124px;
font-size: 1.4em;
font-weight: bold;
position: relative;
}

div.speechPeopleTwoBubbles div.manBubble
{
position: absolute;
width: 67px;
height: 31px;
padding: 5px;
top: 0px;
left: 0px;
color: #1583D5;
}

div.speechPeopleTwoBubbles div.womanBubble
{
position: absolute;
width: 56px;
height: 32px;
padding: 0px;
top: 30px;
left: 70px;
color: #F60;
}

.vcenter
{
vertical-align: middle;
}

/*used in the messages area for unread messages*/

tr.unread td a
{
font-size: 1.1em;
font-weight: bold;
}

.pdf, #site #body table.listArticles td img.pdf
{
width: 32px;
height: 32px;
}

.printIcon, #site #body .printIcon
{
background: transparent url("../images/printIcon.gif") no-repeat left center;
display: block;
height: 21px;
padding: 6px 0px 0px 23px;
margin-right: 5px;
}

.shareIcon, #site #body .shareIcon
{
background: transparent url("../images/shareIcon.gif") no-repeat left center;
display: block;
height: 21px;
padding: 6px 0px 0px 35px;
margin-right: 5px;
}

.scrapbookIcon, #site #body .scrapbookIcon
{
background: transparent url("../images/scrapbookIcon.gif") no-repeat left center;
display: block;
height: 21px;
padding: 6px 0px 0px 32px;
margin-right: 5px;
}

/* then place an absolute positioned blue button over it */


label
{
margin-right: 5px;
}

/*margin: 0 auto; centres the page within the body*/
body div#site
{
background-color: #fff;
width: 932px;
margin: 0 auto;
}

body div#head
{
background: transparent url("../images/welcomeBorder.jpg") repeat-x left 90px;
width: 926px;
height: 109px; 
}



/*NNNNNNNNNNNN ALL CODE FOR HEADER HERE NNNNNNNNNNNNN*/



body div#headWelcome
{
width: 430px;
height: 90px;
float: left;
margin: 0px 28px 0px 0px;
}



#callForHelp, .callForHelp
{
background: transparent url("../images/callUs.gif") no-repeat left top;
width: 155px;
height: 50px;
padding-left: 45px;
}



div#headWelcome h1, span.headWelcomeH1
{
display: block;
font-family: "arial black";
font-size: 35px;
font-weight: normal;
letter-spacing: -3px;
color: #1384D4;
margin: 0px;
background-color: transparent;
}


div#headWelcome h2, span.headWelcomeH2
{
display: block;
font-family: arial;
color: #878787;
font-size: 12px;
font-weight: bold;
line-height: 1.2;
letter-spacing: 0.3px;
margin: 0px 25px 0px 0px;
}

span.headWelcomeH1.dottedBlueBorder, #quotamator span.headWelcomeH2.dottedBlueBorder
{
background: transparent url("../images/welcomeBorder.gif") repeat-x left 50px;
padding-bottom: 10px;
border: 0px;
}

#WPLadvert
{
width: 468px;
height: 60px;
float: left;
margin-top: 17px;
}



#WPLadvert a img
{
float: left;
}

#bannerRight
{
display: none;
}

.oneWPLbanner #bannerLeft
{
width: 468px;
height: 60px;
}



#WPLadvert.twoWPLbanners a img#bannerLeft,
#WPLadvert.twoWPLbanners a img#bannerRight
{
display: block;
width: 234px;
height: 60px;
}

/* ALL CODE FOR HEADER ENDS HERE */



/*NNNNNNNNNNNNNN ALL CODE FOR NAVIGATION STARTS HERE NNNNNNNNNNNNNNNNNNNNN*/



#nav
{
clear: both;
width: 932px;
min-height: 57px;
border-bottom: 3px solid #A6A6A5;
}

ul#navPrimary
{
background: transparent url("../images/primaryNavborder.jpg") repeat-x left bottom;
width: 926px;
height: 29px;
}

#nav ul li
{
padding: 8px 0px;
line-height: 1;
}

ul#navSecondary
{
clear: left;
width: 647px;
min-height: 28px;
}

#navRightContainer
{
width: 279px;
float: left;
height: 28px;
}

ul#navSecondary li
{
position: relative;
}

#nav ul li a
{
font-size: 1.2em;
display: block;
border-right: 1px solid #A6A6A5;
padding: 0px 5px;
}

#nav ul#navPrimary li a
{
font-size: 1.4em;
}

#nav ul li.first a
{
padding-left: 2px;
}

#nav ul li.last a
{
border-right: 0px;
}

/* third hierarchy nav  */

#site ul#navSecondary ul
{
clear: both;
position: absolute;
top: 28px;
left: -999em;
z-index: 200;
width: 187px;
border: 1px solid #A6A6A5;
border-top: 3px solid #A6A6A5;
background-color: #fff;
}

#site ul#navSecondary li:hover ul,
#site ul#navSecondary li.sfhover ul
{
left: 0em;
}

#site ul#navSecondary li.sfhide ul
{
left: -999em;
}

#site ul#navSecondary ul li
{
clear: both;
width: 185px;
padding: 2px 0px;
}

#site ul#navSecondary ul li a
{
border: 0px;
padding: 2px 7px;
}

#site ul#navSecondary ul li a:hover
{
background-color: #D7F0FD;
}

/* ALL CODE FOR NAVIGATION ENDS HERE */




/*NNNNNNNN CODE FOR LOGIN AND REGISTER HERE NNNNNNNNN*/

div#nav li#loginButton
{
width: 48px;
letter-spacing: 0.8px;
padding: 7px 0px 0px 0px;	
}

div#nav li#loginButton a
{
width: 48px;
background: transparent url("../images/loginButton.jpg") no-repeat left top;
color: white;
padding: 2px 3px 3px 3px;
height: 12px;
}

div#nav #register
{
font-size: 0.8em;
}

/* CODE FOR LOGIN AND REGISTER ENDS HERE */



div#body
{
clear: both;
width: 932px;
}



/* BREADCRUMB CODE HERE */


/*breadcrumb styling same as nav styling*/
/*breadcrumb anchor styling styling with anchor styling at top of page, as well as above in the nav section and here*/
#breadcrumb
{
width: 645px;
height: 39px;
float: left;
}

#breadcrumb ul li
{
margin: 8px 0px;
}

#breadcrumb ul li a
{
display: block;
font-size: 1em;
padding: 0px 10px;
}

#site #breadcrumb ul li.first a
{
background-image: none;
padding-left: 2px;
}




/* END BREADCRUMB CODE HERE */



/*NNNNNNNNNNN ALL CODE FOR SEARCH AREA HERE NNNNNNNNNNNNNN*/



#bodySearch
{
position: relative;
z-index: 1;
width: 285px;
height: 56px;
float: right;
}

input.text, select, textarea
{
color: #808080;
font-family: "Arial";
font-weight: bold;
font-size: 1em;
border: 1px solid #A9A9A9;
/*margin: 7px 2px -2px 0px; changed 16/11/07 to neaten up in IE; negative margin takes the border away for some reason*/
padding-left: 3px;
width: 156px;
height: 15px;
margin: 7px 2px 0px 0px;
}

textarea
{
font-size: 1.1em;
padding: 5px;
}

select
{
padding-left: 0px;
}

input.text.magazineMouse
{
background: transparent url("../images/magazineMouse.gif") no-repeat left top;
padding: 10px 0px 0px 32px;
height: 21px;
width: 38px;
border: 0px;
}

textarea
{
height: 75px;
overflow: auto;
}

select
{
width: 161px;
height: 18px;
}

/* ALL CODE FOR SEARCH ENDS HERE */


/*NNNNNNNNNNNN GENERIC CODE FOR GO BUTTON NNNNNNNNNNNNNN*/


input.go
{
background: transparent url("../images/goButton.jpg") no-repeat center center;
width: 26px;
height: 18px;
margin-bottom: -1px;
cursor: pointer;
}


/* GENERIC CODE FOR GO BUTTON  ENDS HERE*/



/* this class is used when on the home or news pages in order to make the breaking news and latest cases appear and pull the diaply upwards */
/*on all other pages they are not present*/
/* .dontDisplay pretty much makes anything else unwanted go away*/


.dontDisplay
{
display: none;
}

div#site #right
{
margin-top: -23px;
}



div#site #bodyLeft
{
margin-top: -23px;
}



/*NNNNN NEW CODE FOR RESOURCE PAGES HERE NNNNN*/



/*a line-height: 10px; was removed from all lists across site on 04/09/07 */
/*this blue arrow list replaced the below one on the same date above*/
#content ul, .blueArrowList
{
list-style: square outside url("../images/arrowBlue.gif");
}

#site ul.orangeBlockList, .orangeBlockList
{
list-style: square outside url("../images/orangeDot6px.gif");
}

ol, #content ol, .decimalList
{
list-style: decimal outside;
}

ol, #content ul, #content ol, .blueArrowList, .decimalList, .orangeBlockList
{
margin: 5px 0px 0px 15px;
padding: 0px 0px 5px 10px;
vertical-align: top;
font-size: 1.1em;
border: 0px;
}

/* this sorts out the extra features area of the resources template */

#resourceExtraFeatures
{
display: none;
}

#extraFeatures h5
{
clear: both;
}

/*
#resourceExtraFeatures div
*/
/* I have changed this back to using an explicit class - things like the slider are a pain
	at the moment because they keep inheriting paddings */
div.plusPanel
/*, #resourceExtraFeatures #resourceBanner*/
{
padding: 0px 2px 0px 20px;
margin-bottom: 8px;
}
/* topPlusPanel is the same as commentsRatings, would be good to get rid of commentsRatings one */
#resourceExtraFeatures #resourceBanner, #resourceExtraFeatures #commentsRatings, #resourceExtraFeatures #topPlusPanel
{
padding-top: 8px;
}

#site h4.plusPanel
{
color: black;
font-size: 1.1em;
letter-spacing: 0px;
margin: 2px 5px 0px 0px;
border: 0px;
padding: 4px 0px 4px 5px;
line-height: normal;
background-color: #D7F0FD;
}

#site h5.plusPanel a, #site h4.plusPanel a
{
display: block;
padding: 0px;
margin-right: 5px;
float: left;
background: transparent url("../images/minus.jpg") no-repeat center center;
width: 12px;
height: 12px;
border: 1px solid #A6A6A5;
}

#site h5.plusPanel a.plus, #site h4.plusPanel a.plus
{
background: transparent url("../images/plus.gif") no-repeat center center;
}

#site h4.plusPanel a, #site h4.plusPanel a.plus
{
background-color: white;
}

/* new since the 06/09/07 to fix problem on search results page */
.plusPanel h4
{
margin-top: 5px;
}



#site .horizontalList
{
margin: 5px 0px 0px 0px;
/*margin-top: 5px;  new since04/10/07 counter acting default set earlier*/
padding-bottom: 12px;
}

#site .horizontalList li
{
list-style: none;
float: left;
margin: 2px 0px 0px 0px;
padding: 0px;
white-space: nowrap;/*introduced 16/07/2007 for the news content for related topics list when text to long to fit online*/
}

#site .horizontalList li a
{
border-right: 1px solid #A6A6A5;
font-size: 1em;
padding: 0px 4px 1px 4px;
display: block;
font-weight: bold;
float: left;
}

#site .horizontalList li.last a
{
border-right: 0px;
padding-right: 0px;
}

#site .horizontalList li.first a
{
padding-left: 0px;
}

#commentsRatings #comments
{
float: left;
margin: 0px;
padding: 0px;
}

#site #body ul li.commentDetails
{
width: 230px;
margin: 2px 0px;
list-style: none;
float: left;
display: inline;
}

#site #body ul li.commentDetails a
{
font-size: 1em;
}

div#site div#body ul li.commentAvatar
{
background: transparent url("../images/commentsAvatar.jpg") no-repeat left center;
width: 17px;
height: 26px;
padding-right: 5px;
float: left;
display: inline;
clear: left;
}

#resourceExtraFeatures h4
{
margin-top: 20px;
}

#resourceExtraFeatures small a:link, #resourceExtraFeatures small a:visited
{
font-weight: normal;
}

/*table display styles*/

table.bottomBorder td, #site .dottedBlueBorder, .dottedBlueBorder
{
border-bottom: 1px dotted #D7F0FD;
}

table.listArticles
{
font-size: 1em; /* added this for the white papers page; could have side effects else where */
width: 100%;
margin: 4px 0px;
padding-right: 5px;
background: transparent url("../images/bkgdGradient.jpg") repeat-y left top;
text-align: left;
}

#body table.listArticles a
{
font-weight: bold;
}

table.listArticles td
{
padding: 0px 5px;
vertical-align: top;
}

table.listArticles td.last
{
padding-bottom: 5px;
}

table.listArticles td h4
{
margin-top: 7px;
}

table.listArticles th
{
color: #888D8F;
background-color: transparent;
padding: 1px 3px 3px 3px;
margin: 5px 0px -3px 0px;
white-space: nowrap;
}

table.noH3Margin h3
{
margin-top: 0px;
}

table.listArticles td small
{
white-space: nowrap;
}

table.listArticles td p
{
margin-top: 0px;
}

/* for the training variation */

table.largerSmallGrey td small, #site #body .fs11pix
{
font-size: 1.1em;
}

#site #body table.listArticles td img
{
margin: 0px;
padding: 0px;
width: 27px;
height: 18px;
}

/* NEW CODE FOR RESOURCE PAGES ENDS HERE */


#contentHeading
{
padding: 0px 290px 0px 0px;
border-bottom: 1px solid #6CA4C3;
}



/*NNNNNNNNN NEWS TICKER AND RSS CODE NNNNNNNNNNNNN*/



#newsTicker
{
display: none;
}

#ebulletinIcon
{
float: right;
width: 150px;
}

#rss
{
float: right;
width: 137px;
}

#rss a, #ebulletinIcon a
{
background: transparent url("../images/RSSicon.jpg") no-repeat left center;
display: block;
color: #F60;
padding: 4px 0px 0px 22px;
height: 18px;
font-weight: bold;
}

#ebulletinIcon a
{
background: transparent url("../images/ebulletinIcon.gif") no-repeat left center;
}



/* NEWS TICKER AND RSS CODE ENDS HERE */






/*NNNNNN ALL CODE FOR SWITCHING PERSONAL AREA COLUMN WITH THE MAIN CONTENT AND BROWSE/SKYSCRAPER/EXTRA FEATURES COLUMNS NNNNN*/

div#bodyLeft
{
display: none;
}

div#body.mainPersonal div#right,
div#body.personalMain div#right
{
width: 775px;
}

div#body.mainPersonal div#bodyLeft,
div#body.personalMain div#bodyLeft
{
display: block;
width: 145px;
margin-right: 10px;
}

div#body.mainPersonal div#right,
div#body.personalMain div#bodyLeft
{
float: left;
}

div#body.personalMain div#right,
div#body.mainPersonal div#bodyLeft
{
float: right;
}

/*this is because we are pulling div right and div bodyLeft up over the margin of the search area*/
/*when the personal area is on the right it would overlap the search or visa versa so it must be lowered in this case*/
div#body.mainPersonal div#bodyLeft
{
margin: 0px 0px 0px 10px;
}

/* ALL CODE FOR SWITCHING PERSONAL AREA COLUMN WITH THE MAIN CONTENT AND BROWSE/SKYSCRAPER/EXTRA FEATURES COLUMNS  ENDS HERE*/



div#right div#bodyRight
{
width: 775px;
}



/*NNNNNNNN ALL CODE FOR SWITCHING CONTENT AREA COLUMN WITH THE BROWSE/SKYSCRAPER/EXTRA FEATURES COLUMNS NNNNNNNNNNNN*/



#extraFeatures
{
float: right;
}

div#bodyRight div#content
{
display: none;
}

div#bodyRight.contentExtraFeatures div#content,
div#bodyRight.extraFeaturesContent div#content
{
display: block;
width: 490px;
}

div#bodyRight.contentExtraFeatures div#extraFeatures,
div#bodyRight.extraFeaturesContent div#extraFeatures
{
width: 285px;
}

div#bodyRight.contentExtraFeatures div#content,
div#bodyRight.extraFeaturesContent div#extraFeatures
{
float: left;
}

div#bodyRight.extraFeaturesContent div#content,
div#bodyRight.contentExtraFeatures div#extraFeatures
{
float: right;
}

/*  ALL CODE FOR SWITCHING CONTENT AREA COLUMN WITH THE BROWSE/SKYSCRAPER/EXTRA FEATURES COLUMNS  ENDS HERE*/



/*NNNNNNNNNN  ALL CODE FOR BODY LEFT  HERE NNNNNNNNNNNNNN*/

#heartLogo a
{
clear: both;
background: transparent url("../images/heartLogo.jpg") no-repeat left center;
display: block;
color: #F60;
margin: 0px 0px 8px 0px;
padding: 0px 0px 0px 41px;
height: 36px;
line-height: 12px;
}

#personalStatus
{
background: #D7F0FD url("../images/networkAbilityCorners.jpg") no-repeat bottom left;
width: 139px;
min-height: 170px;
padding: 3px;
margin: 0px 0px 4px 0px;
}

#site #personalStatus ul.horizontalList
{
margin: 2px;
}

#site #personalStatus p
{
margin: 2px 2px 5px 2px;
}

a.basket
{
display: block;
height: 25px;
width: 25px;
margin: 2px 5px 0px 5px;
}

#personalStatusInnerBox
{
background: transparent url("../images/tourInfoIconBkgd.gif") no-repeat top right;
width: 139px;
height: 91px;
margin-top: 10px;
}

#networkAbility
{
background: #D7F0FD url("../images/networkAbilityCorners.jpg") no-repeat bottom left;
width: 145px;
min-height: 64px;
margin: 0px 0px 8px 0px;
padding: 7px 0px 0px 0px;
}

#cogs
{
background: transparent url("../images/cogs.jpg") no-repeat top left;
width: 87px;
height: 54px;
margin: 0px -11px -8px 0px;
}

#awards
{
background: #D7F0FD url("../images/networkAbilityCorners.jpg") no-repeat bottom left;
width: 145px;
min-height: 45px;
margin: 0px 0px 10px 0px;
padding-top: 7px;
}

#awards ul li a img
{
margin: 2px 5px 4px 5px;
}

/*this is for the audio home page help panel*/
#site #body .plainBlue
{
background-color: #E1F3FD;
background-image: none;
width: 230px;
margin-right: 5px;
}

#sevenDayTrial
{
width: 145px;
margin: 0px 0px 8px 0px;
}

/*  ALL CODE FOR BODY LEFT  ENDS HERE */





/*NNNNNNNNNNNN      BODY RIGHT      NNNNNNNNNNNNNN*/


#site #body .col1, .col1
{
float: left;
display: inline; /*IE6 fix*/
}

#site #body .col2, .col2
{
float: right;
display: inline; /*IE6 fix*/
}

#contentTop, #contentBottom
{
clear: both;
width: 490px;
}

#extraFeaturesRow1, #extraFeaturesRow2
{
clear: both;
width: 285px;
}

#extraFeatures div.leftCol
{
float: left;
width: 163px;
}

#extraFeatures div.rightCol
{
float: right;
width: 122px;
}

#contentTop p
{
clear: both;
margin-top: 4px;
}




/*NNNNNNNNNNN MANIPULATION OF STACK IMAGES NNNNNNNNNN*/

/* this is probably over kill; we should just decide on a standard, but it could come in handy */

#extraFeaturesRow1 div img
{
display: none;
/*width: 47px;
height: 50px;*/
}

#contentTop div img, #contentBottom div img
{
/*display: none;*/
}

#contentTop.stackImageLeft div img, #contentBottom.stackImageLeft div img, #extraFeaturesRow1.stackImageLeft div img
{
float: left;
margin-right: 5px;
display: inline;
}

#contentTop.stackImageRight div img, #contentBottom.stackImageRight div img, #extraFeaturesRow1.stackImageRight div img
{
float: right;
margin-left: 5px;
display: inline;
}

/* the next three provide for over-riding the above classes if they are already in use */

#contentTop div img.stackImageLeft, #contentBottom div img.stackImageLeft, 
#extraFeaturesRow1 div img.stackImageLeft, img.stackImageLeft
{
float: left;
margin: 0px 5px 0px 0px;
display: inline;
}

#contentTop div img.stackImageRight, #contentBottom div img.stackImageRight, 
#extraFeaturesRow1 div img.stackImageRight, img.stackImageRight
{
float: right;
margin: 0px 0px 0px 5px;
display: inline;
}

#contentTop div img.dontDisplay, #contentBottom div img.dontDisplay, 
#extraFeaturesRow1 div img.dontDisplay
{
display: none;
}


/* MANIPULATION OF STACK IMAGES ENDS HERE*/


/*NNNNNNNNNNN HOVER OVER DIVS CODE HERE NNNNNNNN*/

/*see general links at the top for the initial black link*/
/* NOTE FOR LATER: create class divStackHoverOver for JavaScript solution for other browsers*/
/*class = "divStackHoverOver" can be used by JavaScript to create the same effect in browsers that dont handle hover over on anything but anchors*/

div#contentTop div p > a:link, div#contentTop div p > a:visited, div#col1 div p > a:link, div#col1 div p > a:visited, div#col2 div p > a:link,div#col2 div p > a:visited, #extraFeaturesRow1 div p > a:link, #extraFeaturesRow1 div p > a:visited
{
background-color: transparent;
color: black;
text-decoration: none;
}

div#contentTop div:hover > p a, div#col1 div:hover > p a, div#col2 div:hover > p a, #extraFeaturesRow1 div:hover > p a
{
background-color: transparent;
color: #1583D5;
text-decoration: underline;
}

div#contentTop div > p a:hover, div#col1 div > p a:hover, div#col2 div > p a:hover, #extraFeaturesRow1 div  > p a:hover 
{
background-color: transparent;
color: #F60;
text-decoration: underline;
}



/* HOVER OVER DIVS CODE ENDS HERE */

#content div#col1, #content div#col2
{
width: 245px;
}

div#contentTop div.col1, div#contentTop div.col2, div#contentBottom div#col1.col1 div, div#contentBottom div#col2.col2 div
{
background: transparent url("../images/bkgdGradient.jpg") repeat-y left top;
width: 235px;
min-height: 140px;
}
/*width of 235 because of 10px padding added below; total width 245*/

div#contentBottom div#col1.col1 div, div#contentBottom div#col2.col2 div
{
min-height: 100px;
}

div#contentTop div.col1, div#contentTop div.col2, div#contentBottom div#col1.col1 div, div#contentBottom div#col2.col2 div, 
div#extraFeaturesRow1 div.col1, div#extraFeaturesRow1 div.col2
{
margin-bottom: 10px;
padding: 10px 5px;
}

#site #body div.overide
{
background-image: none; 
padding: 10px 0px; 
width: 245px;
}

#site #body #right div.twoColWideStack
{
width: 470px;
padding: 10px 5px;
margin: 10px 10px 10px 0px;
background: transparent url("../images/twoColBkgdGradient.gif") repeat-y left top; /* new since 17/08/2007 */
}

/*little hacky for < IE7 */
#site #body div.twoColWideStackWithoutBkgd
{
width: 480px;
margin: 10px 5px 10px 0px;
min-height: 1px;
background-image: none;
}

#site #body > div.twoColWideStackWithoutBkgd
{
margin-right: 10px;
}

/*NNNNNNNNNN  ALL CODE FOR EXTRA FEATURES  HERE NNNNNNNNNNNNNN*/

/*width of 153 because of 10px padding added above; total width 163*/
#extraFeatures .extraFeaturesCol1Stack
{
background: transparent url("../images/briefingBkgd.jpg") repeat-y left top;
width: 153px;
min-height: 140px;
margin-bottom: 10px;
padding: 10px 5px;
float: left;
}

/*width of 112 because of 10px padding added above; total width 122*/
#extraFeatures .extraFeaturesCol2Stack
{
background: transparent url("../images/audioBkgd.jpg") repeat-y left top;
width: 112px;
min-height: 140px;
margin-bottom: 10px;
padding: 10px 5px;
float: right;
}

#site #body #right #extraFeatures div.removeBkgd
{
background-image: none;
}

#site #body #right #extraFeatures div.twoColWideStack
{
width: 275px;
min-height: 140px;
padding: 10px 5px;
margin: 0px 0px 10px 0px; /*this is new added for the form listthreads page 15/08/2007*/
}

* html #site #body #right #extraFeatures div.twoColWideStack
{
height: 140px;
}

#extraFeatures .extraFeaturesCol1Stack p, #extraFeatures .extraFeaturesCol2Stack p
{
clear: both;
/*margin-top: 10px;*/
}

#browseBy
{
width: 156px;
border-top: 1px solid #6CA4C3;
margin: 0px 7px 10px 0px;
}

div.tags
{
float: left;
display: inline;
background: #D7F0FD url("../images/browseByCorners.jpg") no-repeat left bottom;
width: 120px;
min-height: 220px;
padding: 8px;
}

#browseBy div.fillWidth
{
background: #D7F0FD url("../images/browseByCornersFullWidth.jpg") no-repeat left bottom;
width: 140px;
}

div.tags a
{
padding-right: 5px;
}

/*this is to allow the tags to increase in font-size*/
/*these in are duplicate because of lightboxes */

.font8
{
font-size: 0.8em;
}
.font10
{
font-size: 1em;
}
.font12, #site #body .font12
{
font-size: 1.2em;
}
.font14, #site #body .font14
{
font-size: 1.4em;
}
.font16, #site #body .font16
{
font-size: 1.6em;
}
.font18, #site #body .font18
{
font-size: 1.8em;
}
.font24, #site #body .font24
{
font-size: 2.4em;
}

#browseBy ul
{
background-color: white;
list-style: none;
float: right;
}

#browseBy ul li
{
clear: both;
list-style: none;
margin-bottom: 2px;
}

#browseByOptions li a
{
display: block;
width: 20px;
height: 72px;
}

#browseByOptions li a#browseByPopular:link, #browseByOptions li a#browseByPopular:visited
{
background: #A6A6A5 url("../images/popular.jpg") no-repeat top left;
}

#browseBy #browseByOptions.popular li a#browseByPopular, #browseByOptions li a#browseByPopular:hover
{
background: #D7F0FD url("../images/popularClicked.jpg") no-repeat top left;
}

#browseByOptions li a#browseByTopic:link, #browseByOptions li a#browseByTopic:visited
{
background: #A6A6A5 url("../images/topic.jpg") no-repeat top left;
}

#browseBy #browseByOptions.topic li a#browseByTopic, #browseByOptions li a#browseByTopic:hover
{
background: #D7F0FD url("../images/topicClicked.jpg") no-repeat top left;
}

#browseByOptions li a#browseByService:link, #browseByOptions li a#browseByService:visited
{
background: #A6A6A5 url("../images/service.jpg") no-repeat top left;
}

#browseBy #browseByOptions.service li a#browseByService, #browseByOptions li a#browseByService:hover
{
background: #D7F0FD url("../images/serviceClicked.jpg") no-repeat top left;
}

#site #skyScraper
{
width: 122px;
height: 610px;
margin-bottom: 10px;
padding: 0px;
}

#site #skyScraper img
{
display: block;
margin: 0px;
}

/*  ALL CODE FOR EXTRA FEATURES ENDS HERE */


/*      BODY RIGHT CODE ENDS HERE      */


/*NNNNNNN  ALL CODE FOR FOOTER HERE NNNNNNNNNNN*/

#footer
{
clear: both;
width: 920px;
height: 16px;
border-top: 1px solid #6CA4C3;
}

#footer ul li
{
padding-left: 16px;
}

#footerNav
{
border-top: 1px solid #6CA4C3;
clear:both;
padding-top: 16px;
}

/*  ALL CODE FOR FOOTER ENDS HERE */

div.twocol 
{

}

div.twocol_col1 
{
	float:left;
	width:50%;
}

div.twocol_col2 
{
	float:right;
	width:50%;
}

/* n for "numeric" and align right :) */
td.n, th.n 
{
	text-align: right;
}

/** nw for nowrap*/
td.nw, th.nw 
{
	white-space: nowrap ;
}

/** The paginaction container */
div.pagination 
{
	margin-top: 5px;
	padding-top: 5px;
	background: transparent url("../images/primaryNavborder.jpg") repeat-x left top;
	text-align:center;
}

/** The current page in the pagination */
div.pagination a.sel 
{
	font-weight: bold;
	color: #000;
}

/** The div that errors for a WplForm appear in */

div.wplFormErrorArea {
	clear:both;
}

div.wplFormErrorArea ul 
{
margin-left: 5px;
}

div.wplFormErrorArea ul li
{
color: red;
list-style: none;
font-size: 1em;
margin: 2px 0px 2px 10px;
padding: 0px 0px 5px 18px;
background: transparent url("../images/validatedBad.gif") no-repeat left top;
}

/** Autocomplete div that pops up*/
div.autocomplete 
{
	position: absolute;
	z-index:100;
	background-color: #CCC;
	display: none;
	min-width: 200px;
	padding: 5px;
	
}
/** The sclass applied ot make it appear */
div.autocompleteActive 
{
	display: block;
}
/** The list od items inside an autocomplete */
div.autocomplete ul 
{
	list-style-type: none;
}
div.autocomplete li 
{
	cursor: pointer;
}
/** A highlighted item */
div.autocomplete li.highlight , div.autocomplete li:hover
{
	background-color: red;
}
/** A remove link for an array list */
div.arrayinput a 
{
	cursor: pointer;
	color: red;
	font-weight: bold;
}

/*NNNNNNNNNNNN FORUMS STYLES/ TABLE STYLES */

/*this is a generic version of commentSpeachBubbles*/

/* this is cause IE sucks! */

div.doubleSpeachBubbleContainer
{
width: 1px;
height: 1px;
float: right;
display: inline;
position: relative;
}

div.doubleSpeachBubble
{
background: transparent url("../images/doubleSpeachBubble.gif") no-repeat left top;
width: 156px;
height: 89px;
position: absolute;
right: -21px;
top: -10px;
}

span.bubble1Text
{
background-color: transparent;
color: #5AC6EF;
font-size: 1.8em;
display: block;
font-style: italic;
margin: 10px 0px 0px 9px;
font-weight: normal;
}

span.bubble2Text
{
background-color: transparent;
color: #F60;
font-weight: bold;
font-size: 1.8em;
display: block;
margin: 5px 0px 0px 77px;
}

div.commentSpeachBubbles
{
background: transparent url("../images/commentSpeachBubbles.gif") no-repeat left top;
width: 156px;
height: 89px;
position: absolute;
right: -16px;
top: -8px;
}

table.forumTable
{
width: 483px;
padding: 0px;
}

div.plusPanel table.forumTable
{
margin-left: -20px;
display: block;
}

table.forumTable td, table.forumTable th
{
text-align: left;
padding: 3px 5px 3px 0px;
border-bottom: 1px dotted #1583D5;
vertical-align: top;
}

table.forumTable tr.last td
{
border: 0px;
}

table.forumTable th
{
white-space: nowrap;
padding-bottom: 0px;
font-size: 1.1em;
font-weight: bold;
border: 0px;
}

table.forumTable td.first, table.forumTable th.first
{
width: 193px;
padding-left: 20px;
}

.lightBlueBkgd
{
background-color: #D7F0FD;
}

.darkDottedBlueBorderTop
{
border-top: 1px dotted #1583D5;
}

.darkDottedBlueBorderBottom
{
border-bottom: 1px dotted #1583D5;
}

/* FORUMS STYLES/ TABLE STYLES END HERE*/



/*NNNNNNN FOR THE TRAINING SECTION OF THE SITE */

#site #body a.bigButton, #site #body img.bigButton
{
width: 117px;
height: 116px;
margin: 0px 4px 0px 0px;
float: left;
display: inline;
}

#site #body a.bigButton.solo, #site #body img.bigButton.solo
{
margin: 5px 20px 10px 0px;
}

div#site div#body a.bigButton.last
{
margin-right: 0px;
}

#site #body a.bigButton img
{
width: 117px;
height: 116px;
display: block;
margin: 0px 0px 0px 0px;
}

#site #body #right div.dateTableDivContainer
{
background-color: #D7F0FD; 
background-image: none;
min-height: 200px;
clear: both;
}

#site #body div.dateTableDivContainer h6
{
text-align: center;
margin-top: 10px;
}

#site #body div.dateTableDivContainer .monthlist
{
margin-top: 30px;
}

#site #body div.dateTableDiv
{
width: 360px;
margin-top: 15px;
}

#site table.dateTable
{
width: 175px;
margin: 4px 0px;
}

#site table.dateTable td, #site table.dateTable th
{
color: #888D8F;
background-color: #E9E9E9;
vertical-align: middle;
height: 20px;
width: 20px;
text-align: center;
}

#site table.dateTable td
{
background-color: #F6F6F6;
}

/* used for the dateTable cells where an the date is of importance */

#site #body #right .darkBlueBkgd
{
background-color: #0069D6;
}

#site #body #right .darkBlueBkgd a:link, #site #body #right .darkBlueBkgd a:visited
{
background-color: transparent;
color: white;
}

#site #body #right .darkBlueBkgd a:hover
{
text-decoration: underline;
}

#site #body .codeBox
{
border: 1px solid #f60;
padding: 10px;
margin-left: 20px;
width: 115px;
}


/* FOR THE TRAINING SECTION OF THE SITE END HERE */


/*NNNNNNN FORM STYLES*/

table.form td
{
font-size: 1.1em;
text-align: left;
vertical-align: top;
padding-bottom: 2px;
}

table.form td.rowspan, #site .rowspan
{
vertical-align: top;
padding-top: 7px;
}

table.form.compressed
{
margin-top: 10px;
}

table.form.compressed td
{
padding: 2px;
}

table.form.compressed td input, table.form.compressed td select, table.form.compressed td textarea
{
padding-top: 0px;
padding-bottom: 0px;
margin: 0px;
}

table.form.compressed td span.validate
{
margin-top: 0px;
}

/* FORM STYLES END HERE*/


/* CLASSIFACTION LIST STYLES */

ul.list
{
float: left;
width: 153px;
}

ul.list li
{
list-style: square outside url("../images/arrowBlue.gif");
font-size: 1.1em;
margin: 2px 0px;
margin-left: 15px;
}

#site #body ul.list li.classificationImg 
{
width: 140px;
height: 28px;
list-style: none;
list-style-image: none;
margin: 0px 0px 5px 0px;
}


/* CLASSIFACTION LIST END STYLES */


/** Ratings bars */
div.superRatings  
{

	
}

* html div.superRatings  
{
overflow: hidden;
}

.superRatings .hide 
{
	
}

.superRatings .user 
{
	position: absolute;
	/*background-color: #ffffff;*/
	width: 300px;	
}

.superRatings .global 
{
	/*background-color: #ffffff;*/
}

.superRatings span.percentage
{
	font-size: 1.2em;
	font-family: "arial black";
	margin: 2px 5px;
	color: #F60;
}

.superRatings .globalRatingTrack
{
	width: 200px;
	height: 18px;
	border: 1px solid #A6A6A5;
	background-color:#fff;
}

* html .superRatings .globalRatingTrack
{
overflow: hidden;
}

.superRatings .globalRatingTrackFill
{
	background-color: #F60;
	/*color: transparent;*/
	height: 18px;
}

.superRatings .userRatingTrack 
{
	width:200px;
	background-color:#fff;
	height: 18px;
	border: 1px solid #A6A6A5;
}

* html .superRatings .userRatingTrack 
{
overflow: hidden;
}

.superRatings .userRatingTrackFill 
{
	position:relative; 
	top:-19px; 
	background-color:#1583D5;
	height:18px;
	z-index: 45;
}

.superRatingsSaved {
	position: absolute;
	z-index: 55;
	background-color:#d7f0fd;
	width: 300px;
	text-align: center;
}


.userRatingHandle 
{
	width:11px;
	height:25px;
	cursor:move;
	background: transparent url("../images/slider.png") no-repeat left top;
	z-index: 50;
}

* html .userRatingHandle 
{
position: relative;
}

/* Added by Tariq Hussein - this is basically styling for the search 'sliders'. This probably needs refactoring to keep in line with the rest of the styling. */
div.sliderOuter
{
  position: relative;
  margin-top: 1px;
  margin-bottom: 4px;
}

div.sliderValue
{
  position: absolute;
  left: 1px;
  top: 1px;
  width: 100%;
  text-align: left;
  font-weight: bold;
  font-size: 8pt;
  color: #FFF;
}

div.sliderTrack
{
  background-color: #2C97DF;
  border: 2px solid #DBDBDB;
  height: 15px;
}

* html div.sliderTrack
{
	overflow: hidden;
}

/** Standard styling for help box - fix me :) */
div.helpBox 
{
	background-color: #0F0;
}



/*  ESHOP STUFF   */

table.items
{
text-align: left;
width: 100%;
}

table.items td
{
padding: 5px 0px;
}

table.items thead th, table.items thead td
{
vertical-align: top;
border-bottom: 3px solid #888D8F;
padding: 3px;
margin: 5px 0px -3px 0px;
white-space: nowrap;
font-size: 1.1em;
font-weight: bold;
text-align: left;
}

table.items thead th
{
padding: 3px 0px 3px 5px;
text-align: left;
width: 65px;
}

table.items thead th.quantity
{
width: 35px;
padding-left: 0px;
}

#site input.text.quantity
{
background: transparent url("../images/brackets.gif") no-repeat 2px 2px;
width: 21px;
border-width: 0px;
padding: 0px 1px;
margin: 0px;
text-align: center;
font-size: 7pt;
}

table.items thead th h5
{
font-size: 1.1em;
}

table.items tbody td
{
padding: 5px;
border-bottom: 1px dotted #D7F0FD;
vertical-align: top;
text-align: left;
}

/* eshop home page orange bordered boxes at top of the page */
div.eshopClockTopBox, div.eshopPoundTopBox, div.eshopLockTopBox, div.eshopCompassTopBox
{
background: transparent url("../images/eshopClockTopBox.gif") no-repeat left top;
width: 136px;
height: 64px;
padding: 7px 2px 5px 33px;
margin: 10px 5px 10px 0px;
float: left;
}

div.eshopPoundTopBox
{
background: transparent url("../images/eshopPoundTopBox.gif") no-repeat left top;
width: 151px;
padding-right: 0px;
}

div.eshopLockTopBox
{
background: transparent url("../images/eshopLockTopBox.gif") no-repeat left top;
}

div.eshopCompassTopBox
{
background: transparent url("../images/eshopCompassTopBox.gif") no-repeat left top;
width: 143px;
padding-left: 35px;
}

/* eshop home page table styles */

#site table.eshopTableDesign.top
{
background: #D7F0FD url("../images/leftBlueRndCorners.gif") no-repeat left top;
margin-top: 5px;
}

table.eshopTableDesign
{
text-align: left;
width: 99%;
margin-top: -18px;
padding-left: 12px;
}

table.eshopTableDesign td
{
padding: 5px;
border-bottom: 1px dotted #1583D5;
vertical-align: top;
}

table.eshopTableDesign th
{
white-space: nowrap;
padding: 2px 5px;
text-align: right;
}

table.eshopTableDesign.top td.title
{
width: 295px;
}

table.eshopTableDesign td.title
{
width: 255px;
}

table.eshopTableDesign td.informationIcon
{
width: 40px;
}

table.eshopTableDesign td.last
{
width: 155px;
border: 0px;
}

table.eshopTableDesign tr.last td
{
border: 0px;
}

/* eshop home page table styles ends here*/

a.informationIcon
{
background: transparent url("../images/informationIcon.gif") no-repeat center top;
display: block;
width: 12px;
height: 12px;
margin-left: 10px;
}

/* eshop styleing ends here*/


/* CONSULTING SPECIFIC STYLES */

a.consultingHRcircle, a.consultingHScircle, a.consultingPFMcircle, a.consultingCasesCircle
{
display: block;
width: 52px;
height: 52px;
background: transparent url("../images/hrCircle.gif") no-repeat right top;
float: right;
}

a.consultingHScircle
{
background-image: url("../images/hsCircle.gif");
}

a.consultingPFMcircle
{
background-image: url("../images/pfmCircle.gif");
}

a.consultingCasesCircle
{
background-image: url("../images/casesCircle.gif");
}

/* CONSULTING SPECIFIC STYLES ENDS HERE*/

/* CHECKOUT STUFF */

.starBox
{
background: transparent url("../images/starsBkgd.gif") repeat-y left top;
width: 639px;
}

/* MEMBERSHIP CONTENT ACCESS OPTIONS */

.premiumOptionContainer
{
margin-left: 15px;
width: 93px;
}

.premiumOption
{
min-height: 92px;
position: relative;
padding: 4px 4px 4px 20px;
}

* html .premiumOption
{
height: 92px;
}

.premiumOption span.bigLetter
{
position: absolute;
left: -9px;
top: -25px;
font-size: 5em;
font-weight: bolder;
font-family: "arial black";
}

/* MEMBERSHIP CONTENT ACCESS OPTIONS ENDS HERE */

div.upgradeStar
{
background: transparent url("../images/upgradeStar.jpg") no-repeat left top;
width: 87px;
height: 86px;
float: right;
position: relative;
display: inline;
margin: -14px -8px -7px 0px;
display: block;
}

* html div.upgradeStar
{
margin-bottom: -14px;
}

img.orangeTick
{
display: block;
position: absolute;
width: 61px;
height: 59px;
right: -10px;
top: -30px;
z-index: 5;
}

h5.bigBorder, .bigBorder
{
border-bottom: 3px solid #888D8F;
}

div.lockProtection
{
width: 232px;
background-color: #fff;
margin: 7px 0px 0px 0px;
float: left;
}

div.lockProtection .lock
{
width: 40px;
height: 40px;
float: left;
margin: 0px 7px 0px 0px;
display: inline; /* fixes IE6 bug */
}

.lockProtection h3
{
margin: 0px;
}

.lockProtection p
{
font-size: 0.9em;
margin-top: 2px;
}

.orangeHeading, .blueHeading
{
background-color: transparent;
color: #F60;
margin: 0px;
padding: 0px;
font-size: 1.4em;
font-weight: bold;
}

.blueHeading
{
color: #1583D5;
}

.loginRegisterBox input.text
{
width: 115px;
}

.loginRegisterBox table.form th
{
vertical-align: bottom;
font-size: 1em;
white-space: nowrap;
text-align: left;
}

.loginRegisterBox table.form td
{
padding: 5px 0px 0px 4px;
white-space: nowrap;
}

.loginBox, .registerBox
{
width: 232px;
}

.checkout .loginBox, .checkout .registerBox
{
width: 300px;
}

table.form td input
{
vertical-align: top;
float: left;
clear: left;
display: inline;
margin-right: 2px;
}

.checkBoxContainer span.validate
{
float: left;
margin-top: 4px;
}

.checkBoxContainer input
{
float: left;
margin-top: 4px;
}

span.validate
{
border: 0px;
float: left;
display: inline;
margin: 7px 0px 0px 5px;
width: 15px;
height: 15px;
}

span.validatedGood
{
background: transparent url("../images/validatedGood.gif") no-repeat left top;
}

span.validatedBad
{
background: transparent url("../images/validatedBad.gif") no-repeat left top;
}

/* TELEPHONE SUPPORT */

.quotationHeadingBox
{
font-size: 1.2em;
color: #1583D5;
font-weight: bold;
height: 78px;
padding: 10px 114px 10px 10px;
}

* html .quotationHeadingBox
{
font-size: 12px;
}

.callCentrePerson
{
background: transparent url("../images/callCentrePerson.gif") no-repeat right bottom;
}

/* TELEPHONE SUPPORT STUFF ENDS HERE */

/* ONLINE ADVICE */

.onlineAdvicePerson
{
background: transparent url("../images/onlineAdvicePerson.gif") no-repeat right bottom;
}

/* ONLINE ADVICE STUFF ENDS HERE */





/* NEW ROUNDED CORNER IMPLEMENTATION */

/* these are for a rounded background; the container div must have a white background*/

.brwhite
{
background: transparent url("../images/brwhite.gif") no-repeat right bottom;
}

.blwhite
{
background: transparent url("../images/blwhite.gif") no-repeat left bottom;
}

.tlwhite
{
background: transparent url("../images/tlwhite.gif") no-repeat left top;
}

.trwhite
{
background: transparent url("../images/trwhite.gif") no-repeat right top;
}

/* these are for a rounded background; the container div must have a lightblue background; i.e #D7F0FD */

.brlightblue
{
background: transparent url("../images/brlightblue.gif") no-repeat right bottom;
}

.bllightblue
{
background: transparent url("../images/bllightblue.gif") no-repeat left bottom;
}

.tllightblue
{
background: transparent url("../images/tllightblue.gif") no-repeat left top;
}

.trlightblue
{
background: transparent url("../images/trlightblue.gif") no-repeat right top;
}

/* these are for a rounded orange border; the container div must have a white background*/

/* 1px border */
.orangeDotXTop
{
background: transparent url("../images/orangeDot.gif") repeat-x left top;
}

.orangeDotXBottom
{
background: transparent url("../images/orangeDot.gif") repeat-x left bottom;
}

.orangeDotYLeft
{
background: transparent url("../images/orangeDot.gif") repeat-y left top;
}

.orangeDotYRight
{
background: transparent url("../images/orangeDot.gif") repeat-y right top;
}

.brobwhite
{
background: transparent url("../images/brobwhite.gif") no-repeat right bottom;
}

.blobwhite
{
background: transparent url("../images/blobwhite.gif") no-repeat left bottom;
}

.tlobwhite
{
background: transparent url("../images/tlobwhite.gif") no-repeat left top;
}

.trobwhite
{
background: transparent url("../images/trobwhite.gif") no-repeat right top;
}

/* 2px border */

.orangeDotX2pxTop
{
background: transparent url("../images/orangeDot2px.gif") repeat-x left top;
}

.orangeDotX2pxBottom
{
background: transparent url("../images/orangeDot2px.gif") repeat-x left bottom;
}

.orangeDotY2pxLeft
{
background: transparent url("../images/orangeDot2px.gif") repeat-y left top;
}

.orangeDotY2pxRight
{
background: transparent url("../images/orangeDot2px.gif") repeat-y right top;
}

.brob2pxwhite
{
background: transparent url("../images/brob2pxwhite.gif") no-repeat right bottom;
}

.blob2pxwhite
{
background: transparent url("../images/blob2pxwhite.gif") no-repeat left bottom;
}

.tlob2pxwhite
{
background: transparent url("../images/tlob2pxwhite.gif") no-repeat left top;
}

.trob2pxwhite
{
background: transparent url("../images/trob2pxwhite.gif") no-repeat right top;
}

/* these are for a rounded orange border; the container div must have a lightblue background; i.e #D7F0FD */

/* 1px border */

.broblightblue
{
background: transparent url("../images/broblightblue.gif") no-repeat right bottom;
}

.bloblightblue
{
background: transparent url("../images/bloblightblue.gif") no-repeat left bottom;
}

.tloblightblue
{
background: transparent url("../images/tloblightblue.gif") no-repeat left top;
}

.troblightblue
{
background: transparent url("../images/troblightblue.gif") no-repeat right top;
}

/* 2px not yet needed */

/* these are for a rounded blue border; the container div must have a white background*/

/* 1px border */

.blueDotXTop
{
background: transparent url("../images/blueDot.gif") repeat-x left top;
}

.blueDotXBottom
{
background: transparent url("../images/blueDot.gif") repeat-x left bottom;
}

.blueDotYLeft
{
background: transparent url("../images/blueDot.gif") repeat-y left top;
}

.blueDotYRight
{
background: transparent url("../images/blueDot.gif") repeat-y right top;
}

/* this is actually yellow in the corners but not noticable on white */
/* the white corners are noticable on a yellow background like in the checkout area */

.brbbwhite
{
background: transparent url("../images/brbbwhite.gif") no-repeat right bottom;
}

.blbbwhite
{
background: transparent url("../images/blbbwhite.gif") no-repeat left bottom;
}

.tlbbwhite
{
background: transparent url("../images/tlbbwhite.gif") no-repeat left top;
}

.trbbwhite
{
background: transparent url("../images/trbbwhite.gif") no-repeat right top;
}

/* 2px border */

.blueDotX2pxTop
{
background: transparent url("../images/blueDot2px.gif") repeat-x left top;
}

.blueDotX2pxBottom
{
background: transparent url("../images/blueDot2px.gif") repeat-x left bottom;
}

.blueDotY2pxLeft
{
background: transparent url("../images/blueDot2px.gif") repeat-y left top;
}

.blueDotY2pxRight
{
background: transparent url("../images/blueDot2px.gif") repeat-y right top;
}

.brbb2pxwhite
{
background: transparent url("../images/brbb2pxwhite.gif") no-repeat right bottom;
}

.blbb2pxwhite
{
background: transparent url("../images/blbb2pxwhite.gif") no-repeat left bottom;
}

.tlbb2pxwhite
{
background: transparent url("../images/tlbb2pxwhite.gif") no-repeat left top;
}

.trbb2pxwhite
{
background: transparent url("../images/trbb2pxwhite.gif") no-repeat right top;
}

/* these are for a rounded blue border; the container div must have a lightblue background; i.e #D7F0FD */

/* 1px border */

.brbblightblue
{
background: transparent url("../images/brbblightblue.gif") no-repeat right bottom;
}

.blbblightblue
{
background: transparent url("../images/blbblightblue.gif") no-repeat left bottom;
}

.tlbblightblue
{
background: transparent url("../images/tlbblightblue.gif") no-repeat left top;
}

.trbblightblue
{
background: transparent url("../images/trbblightblue.gif") no-repeat right top;
}

/* 2px not yet needed */

/*
used in the bookshop; double border; border with gradient; inside area with bkgd gradient as well;
2 different versions: small and large, so the crops for the sides are different
apply in this order

dblRndBorderBoxTop
dblRndBorderBoxLeftSml
dblRndBorderBoxRightSml
dblRndBorderBoxBottom
dblRndBorderBoxtl
dblRndBorderBoxtr
dblRndBorderBoxLeft
dblRndBorderBoxLeft_smlBox
dblRndBorderBoxRight
dblRndBorderBoxRight_smlBox
dblRndBorderBoxbl
dblRndBorderBoxbr
dblRndBorderBoxInternalGradient

11 divs will be needed
*/



.dblRndBorderBoxTop
{
background: transparent url("../images/dblRndBorderBoxTop.gif") repeat-x left top;
}

.dblRndBorderBoxBottom
{
background: transparent url("../images/dblRndBorderBoxBottom.gif") repeat-x left bottom;
}

/* same as below for the right hand side */

.dblRndBorderBoxLeft
{
background: transparent url("../images/dblRndBorderBoxLeft.gif") no-repeat left top;
}

/* for a smaller box where the gradient is not as long */
.dblRndBorderBoxLeftSmlBox
{
background: transparent url("../images/dblRndBorderBoxLeftSmlBox.gif") no-repeat left top;
}

.dblRndBorderBoxLeftSml
{
background: transparent url("../images/dblRndBorderBoxLeftSml.gif") repeat-y left top;
}

/* right bottom border gradient */
.dblRndBorderBoxRight
{
background: transparent url("../images/dblRndBorderBoxRight.gif") no-repeat right top;
}

/* for a smaller box where the gradient is not as long */
.dblRndBorderBoxRightSmlBox
{
background: transparent url("../images/dblRndBorderBoxRightSmlBox.gif") no-repeat right top;
}

/* right block which should conitnue upwards beneath gradient */
.dblRndBorderBoxRightSml
{
background: transparent url("../images/dblRndBorderBoxRightSml.gif") repeat-y right top;
}

.dblRndBorderBoxbr
{
background: transparent url("../images/dblRndBorderBoxbr.gif") no-repeat right bottom;
}

.dblRndBorderBoxbl
{
background: transparent url("../images/dblRndBorderBoxbl.gif") no-repeat left bottom;
}

.dblRndBorderBoxtl
{
background: transparent url("../images/dblRndBorderBoxtl.gif") no-repeat left top;
}

.dblRndBorderBoxtr
{
background: transparent url("../images/dblRndBorderBoxtr.gif") no-repeat right top;
}

/* gradient to be used in the middle */
.dblRndBorderBoxInternalGradient
{
background: transparent url("../images/dblRndBorderBoxInternalGradient.gif") repeat-x left top;
}

.dblRndBorderBoxInternalGradientSmlBox
{
background: transparent url("../images/dblRndBorderBoxInternalGradientSmlBox.gif") repeat-x left top;
}

/* grey round corner box */

.greyDotX2pxTop
{
background: transparent url("../images/greyDot2px.gif") repeat-x left top;
}

.greyDotX2pxBottom
{
background: transparent url("../images/greyDot2px.gif") repeat-x left bottom;
}

.greyDotY2pxLeft
{
background: transparent url("../images/greyDot2px.gif") repeat-y left top;
}

.greyDotY2pxRight
{
background: transparent url("../images/greyDot2px.gif") repeat-y right top;
}

.greyBorderDsBoxBr {
background: transparent url("../images/greyBorderBoxBr.gif") no-repeat right bottom;
}

.greyBorderDsBoxBl {
background: transparent url("../images/greyBorderBoxBl.gif") no-repeat left bottom;
}

.greyBorderDsBoxTl {
background: transparent url("../images/greyBorderBoxTl.gif") no-repeat left top;
}

.greyBorderDsBoxTr {
background: transparent url("../images/greyBorderBoxTr.gif") no-repeat right top;
}

/* NEW ROUNDED CORNER IMPLEMENTATION ENDS HERE */



.blueH3 h3 a:link, .blueH3 h3 a:visited
{
background-color: transparent;
color: #1583D5;
}

.blueH3 h3 a:hover
{
background-color: transparent;
color: #F60;
}

/*added for Nebosh pages*/

.blueVerticalGradientBkgd
{
background: transparent url("../images/bkgdVerticalGradient.jpg") repeat-x right top;
}

.enrolIcon
{
background: transparent url("../images/enrolIcon.gif") no-repeat right top;
}

.sampleMediaIcon
{
background: transparent url("../images/sampleMediaIcon.gif") no-repeat right top;
}

.studyIcon
{
background: transparent url("../images/studyIcon.gif") no-repeat right top;
}

.compareIcon
{
background: transparent url("../images/compareIcon.gif") no-repeat right top;
}

.soundIcon
{
background: transparent url("../images/soundIcon.gif") no-repeat left top;
}

.videoIcon
{
background: transparent url("../images/videoIcon.gif") no-repeat left top;
}

.ruffledPaperBkgd
{
background: transparent url("../images/ruffledPaperBkgd.jpg") no-repeat left top;
width: 363px;
height: 168px;
padding: 10px 15px;
}

.checkBox
{
background: transparent url("../images/checkBox.gif") no-repeat left top;
}

.RRCnotePage
{
background: transparent url("../images/RRCnotePage.jpg") no-repeat left top;
height: 135px;
}

.WPLMagazine27
{
background: transparent url("../images/WPLMagazine27.jpg") no-repeat left top;
height: 135px;
}

.blueTriangleBkgd
{
background: transparent url("../images/blueTriangle.gif") no-repeat right bottom;
}

#site #body table.comparisonTable th
{
border-bottom: 1px dotted #1583D5;
padding: 5px 0px 2px 5px;
}

#site #body table.comparisonTable ul.blueArrowList
{
margin-left: 10px;
}



/* for the viral survey */

#surveyForm
{
min-height: 600px;
}

.clipForClipboard
{
background: transparent url("../images/clipForClipboard.gif") no-repeat right bottom;
height: 82px;
width: 143px;
}

.pageCornerPart2
{
background: transparent url("../images/pageCornerPart2.gif") no-repeat right bottom;
width: 63px;
height: 71px;
}

.pageCornerPart1
{
background: transparent url("../images/pageCornerPart1.gif") no-repeat left top;
filter:alpha(opacity=90);
-moz-opacity: 0.9;
opacity: 0.9;
display: block;
width: 35px;
height: 45px;
}

/*
this appears to really be slowing IE6 down big time and for some reason the cursor stopped working since adding in the partials
.surveyForm, .surveyForm *
{
cursor: url("../images/pencilCursor.cur"), auto;
}
*/

.surveyForm input
{
display: inline;
clear: left;
float: left;
margin-top: 3px;
}

.surveyForm label
{
display: block;
font-size: 1.1em;
/*quick hack for < IE7*/
_height: 1%;
margin-top: 2px;
padding-top: 2px;
}

.surveyForm div > label
{
margin-left: 20px;
}

/* viral survey code ends here */

/* added for facilities store add */

#site .redBuyButton
{
background: #D20202 url("../images/buttonBuyNowRed.gif") no-repeat left top;
color: #fff;
width: 78px;
height: 25px;
display: block;
}

.whiteGreyGradShortBkgd
{
background: transparent url("../images/whiteGreyGradShortBkgd.gif") repeat-x left bottom;
}

.greyPhoneSmall
{
background: transparent url("../images/greyPhoneSmall.gif") no-repeat left top;
padding-left: 20px;
}

/* ends here */

img.faviconimg 
{
border:0;
width:16px;
height:16px;
padding:5px 4px 0 0;
}

img.resourceNat {
width: 140px;
height: 112px;
}

img.resourceMed {
width: 80px;
height: 64px;
}

img.resourceSml {
width: 50px;
height: 40px;
}

/* alt sizes for bookshop */
img.resourceSmlalt
{
border: 1px solid #D7D6D7;
width: 57px;
height: 80px;
}

img.resourceLrgalt
{
border: 1px solid #D7D6D7;
width: 121px;
height: 170px;
}

table.info {

}

table.info th {
	text-align: left;
	vertical-align: top;
	color: #888888;
}

table.info td {
	vertical-align: top;
	text-align: left;
}

div.loading {
	text-align:center; position:absolute; background-color: #ffffff
}

div.loading img{
	position: static;
}

.soldOut {
	color: #ff0000;
	font-weight: bold;
	font-size: 1.6em;
}

.requiredField
{
color: #f22; 
}

table.info {

}

table.info th {
	text-align: left;
	vertical-align: top;
	color: #888888;
}

table.info td {
	vertical-align: top;
	text-align: left;
}

div.loading {
	text-align:center; position:absolute; background-color: #ffffff
}

div.loading img{
	position: static;
}

.soldOut {
	color: #ff0000;
	font-weight: bold;
	font-size: 1.6em;
}

// Tariq:
// Copied and pasted from SELMA CSS - prefixed with selma to separate it from
// any other progress bars.
.selmaProgressBar
{
height: 19px;
width: 200px;
position: relative;
}
.selmaProgressBar div.selmaProgress
{
background: #00FE00 url("/selma/claroline/img/progressBar.gif") repeat-x left top;
height: 19px;
width: 50%;
float: left;
}

.selmaProgressBar div.selmaTodo
{
height: 19px;
background-color: #D6D6D6;
width: 50%;
float: right;
}

.selmaProgressBar div.selmaPercentage
{
position: absolute;
z-index: 2;
width: 100%;
height: 17px;
padding-top: 2px;
text-align: center;
font-weight: bold;
}