/* -------------------------------------------------

TheInternet Default Stylesheet

Version: 1.1
Author: Carl Brown
Email: carl@theinternet.co.uk
Last modified: 30th July 2009

All styles reused throughout the site should live in here.
I will slowly be moving the majority of homepage.css into here, 
as that file has lost its original meaning.
It is intended that this shall replace main.css

Ultimately, there will be a separate stylesheet for each section of the site:
  *shops.css
  *classifieds.css
  *business.css
  *jobs.css
  *property.css

Also, some browser-specific style sheets:
  *ie6.css
  *ie7.css

=== Contents    ================================| Line

  1. Clear browser defaults 
  2. Default Page background
  3. HEADER STYLES 
    a. Members Area
    b. Global Search in Members Area
    c. Members Area Drop Downs 
    d. Create Account Tabs 
    e. Primary Navigation Tabs
    f. Global Navigation Drop Down Menu
    g. Lower half of header 
    h. Global Search Form 
    i. Global Login Form 
    j. Error Message 
    k. Welcome Message
    l. Footer 
  4. Default Box Headers
    (the blue strip with colour coded tag)
  5. Default content box
  6. Progress bar for file uploads 
  7. Buttons at the bottom of forms 
  8. Images 
    a. SMALL
    b. MEDIUM
    c. LARGE
  9. Default Text links
  10. Drop Shadows 
  11. Default Search Results Table
    (used for Jobs and Business currently)
  12. Recently Viewed Module 
    a. Scrollable 
      i. Scrollable navigation
      ii. Numbered Navigation (auto-generated)
  13. QUOTE ME BANNER 
  14. Flowplayer 
  15. Embed Overlay
  16. Features Icons
  17. Section intros with video
  18. Recruiting Styles 
  19. Roque Websites
  20. DOTD and Wowcher Banner
  21. DOTD Mailing List Form
  22. Product Search Results
  23. Forgotten Password form
  24. Affiliate Window Voucher Codes

--------------------------------------------------*/

/* !=== *1* Clear browser defaults    ========================================== */

html, body, button, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-weight: inherit;
  font-style: inherit;
  font-size: 100%;
  font-family: Helvetica, Arial, Sans;
  vertical-align: baseline;
}
/* remember to define focus styles! */
:focus {
  outline: 0;
}
body {
  background-color: #506185;
  color: #000;
  font-family: Helvetica, Arial, Sans;
  line-height: 1;
}

ol, ul {
  list-style: none;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
  border-collapse: separate;
  border-spacing: 0;
}

caption, th, td {
  text-align: left;
  font-weight: normal;
}

blockquote:before, blockquote:after,
q:before, q:after {
  content: "";
}

blockquote, q {
  quotes: "" "";
}

h2 {
  color: #013eb0;
  letter-spacing: 1px;
  font-weight:bold;
}

h2.boxHeader {
  padding:0 0 10px 0;
  letter-spacing: 4px;
}

a {
  color: #397eff;
}

a:hover {
  text-decoration: none;
}

.clearingDiv {
  visibility: hidden;
  clear: both;
  font-size: 0; /* FF fix */
  line-height: 0;
}

abbr {
  cursor: help;
}

.clearing {
  width: 100%;
  height: 1px;
  margin: 0 0 -1px;
  clear: both;
}

/* !=== *2* Default Page background    ========================================== */

#pageBackground {
  border: 1px #3c3c3c solid;
  background-color: #f1f1f1;
  width: 948px !important;
  text-align: left;
  font-size: 11px;
  padding: 0 10px;
  margin: 5px auto;
  height: 100%;
}

#pageBackgroundLegacy {
  border: 1px #3c3c3c solid;
  background-color: #f1f1f1;
  width: 968px;
  text-align: left;
  font-size: 11px;
  margin: 5px auto;
}

/* Replace the internet heading with a graphic */
h1#theinternetLogo {
  background: url(/images/static/logo2.gif) no-repeat left top;
  float: left;
  height: 67px;  
  margin-top: 5px;
  width: 231px;
}

h1#theinternetLogo a {
  background: url(/images/static/logo2.gif) no-repeat left top;
  display: block;
  height: 67px;
  margin: 0;
  text-indent: -5000px;
  width: 231px;
}

table.mainframe {
  width: 968px;
}

/* !=== *3* HEADER STYLES    ========================================== */

/* enable menus to be positioned absolutely within header boxes */
div#headerBoxHome, div#headerBoxShops, div#headerBoxClassifieds, div#headerBoxProperties, div#headerBoxJobs, div#headerBoxBusiness {
  position: relative;
  height: 167px;
}

/* !=== Members Area    ========================================== */

ul#membersArea {
  background: url(/images/static/header-spacer-sprites.png) repeat-x left -420px;
  list-style-type: none;
  text-align: right;  
  z-index:3;
  /* the following 2 styles will need changing if more <li>'s are added */  
  margin-left:395px;
  letter-spacing: 0.6px;
}

ul#membersArea li {
  background: url(/images/static/header-spacer-sprites.png) repeat-x left -420px;
  border:1px solid transparent;
  border-width: 0 1px;
  display: inline;
  float:right;
  line-height:30px;
  padding-left:7px;
  position:relative;
}

ul#membersArea li:hover {
  background-image:none;
  background-color: #fff;
  border:1px solid #3c3c3c;
  border-width:0 1px;
}

ul#membersArea li a {
  color:#3c3c3c;
  display:block;
  height:30px;
  padding-right:7px;
  text-decoration: none;  
}

ul#membersArea li a:hover {
  color:#013eb0;
}

ul#membersArea li.logOutLi {
  border:none;
  background: url(/images/static/header-sprites.png) no-repeat -507px -720px;
}

/* replace background image on elements that still need it */

ul#membersArea li.logOutLi a {
  background: url(/images/static/header-sprites.png) no-repeat -500px -720px;
  color:#397eff;
  margin-right: 5px;
  padding-right: 14px;
}

ul#membersArea li.logOutLi a:hover {
  color:#ec3838;
}

ul#membersArea li.membersLeftEdge {
  border:none;
  background: url(/images/static/header-sprites.png) no-repeat left -720px;
  width: 3px;
}

div#highlightMembersArea {
  position: absolute;
  left: 618px;
  top: 30px;
  font-size: 14px;
  width: 300px;
  text-align: center;
  border: 2px solid #ec3838;
  -moz-border-radius: 0 0 10px 10px;
  -webkit-border-bottom-right-radius: 10px;
  -webkit-border-bottom-left-radius: 10px;
  border-top: none;
  color: #ec3838;
  height: 12px;
  padding-top: 5px;
  display: none;
}

div#highlightMembersArea p {
  background-color: #f1f1f1;
  text-align: center;
  width:100px;
  margin:2px auto 0 auto;
  padding:2px 5px;
  border: 1px solid #ec3838;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  background-color: #ec3838;
  line-height:16px;
  color:#fff;
}

/* !=== Global Search in Members Area    ========================================== */

ul#membersArea form {
  background: url(/images/static/header-sprites.png) no-repeat left -720px;
  height:30px;
  width: 200px;
}

ul#membersArea form fieldset {
  border:none; 
}

ul#membersArea form legend {
  display:none;
}

ul#membersArea label {
  display:none; 
}

ul#membersArea form input#globalSearchKeywords {
  border:1px solid #bcbcbc;
}

ul#membersArea form input#globalSearchKeywords {
  border:1px solid #bcbcbc;
}

/* !=== Members Area Drop Downs    ========================================== */

ul#membersArea ul {
  background: url(/images/static/header-sprites.png) no-repeat -950px bottom transparent;
  display:block;
  left:-11px;
  margin:0;
  padding:0 0 20px 10px;
  position:absolute;  
  top:30px;
  width:135px;
  visibility:hidden;
  z-index:4;
}

/*
The class which turns on the dropdowns on hover is further down this file,
within the "Global Navigation Drop Down Menu" section
*/

ul#membersArea li ul {
  padding:10px 0 20px 10px;
}

ul#membersArea ul li {
  background: none;
  border: none;
  text-align:left;
  width:130px;
}

ul#membersArea ul li a {
  /*stop from overflowing on right ride of dropdown*/
  padding:0 5px 0 0;
  height: auto; /* stop it from inheriting height */
  line-height: 18px;
  display:block;
}

/* remove inherited styles */
ul#membersArea li:hover ul li,
ul#membersArea li ul li {
  border: 1px solid transparent;
}

ul#membersArea li ul li:hover { 
  background-color: #bfd6ff;
  border: 1px solid #3c3c3c;
  padding-left: 10px;
}

ul#membersArea li ul li:hover a {
  padding-left: 5px;
}

/* !=== Create Account Tabs    ========================================== */

/* float login links to the right */
ul#loginLinks {
  clear:both; /* clear the logo and members area */
  float:right;
  letter-spacing:0.6px;  
  list-style-type: none;
  padding-right:10px;
  text-align:right;
  z-index:1;
}

ul#loginLinks li {
  background: url(/images/static/header-sprites.png) no-repeat left -350px;
  display: inline;
  float:right;
  line-height:21px;
  padding-left:10px;
}

ul#loginLinks li a {
  background: url(/images/static/header-sprites.png) no-repeat right -350px #f1f1f1;
  color:#013eb0;
  display:block;
  height:21px;
  padding-right:7px;
  text-decoration: none;  
}

ul#loginLinks li a:hover {
 color:#397eff;
}

/*leaves same amount of space when logged in */
div.loggedInSpacer {
  clear: both;
  float: right;
  height: 21px;
  visibility: hidden;
  width: 100%;
}

/* !=== Primary Navigation Tabs    ========================================== */

img.dropdownArrow {
  border:none;
}

ul#navigationLinks {
  float:left;  /* makes the <ul> shrink wrap around the floated <li>'s */
  list-style-type: none;
  letter-spacing:1px;
  position:relative;
  width:948px;
  z-index:2;
  background: url(/images/static/header-spacer-sprites.png) repeat-x;
}

div#headerBoxHome ul#navigationLinks {
  background-position: left -23px;
}

div#headerBoxShops ul#navigationLinks {
  background-position: left -150px;
}

div#headerBoxClassifieds ul#navigationLinks {
  background-position: left -200px;
}

div#headerBoxProperties ul#navigationLinks {
  background-position: left -250px;
}

div#headerBoxJobs ul#navigationLinks {
  background-position: left -300px;
}

div#headerBoxBusiness ul#navigationLinks {
  background-position: left -100px;
}

/* make the main navigation align to the left */
ul#navigationLinks li {
  color:#ffffff;
  display: inline;
  float:left;  
  line-height:21px;
  padding-left:10px;
  position:relative;
  height:21px;
}

ul#navigationLinks li a {
  color:#ffffff;
  display:block;
  font-weight:bold;
  height:21px;
  padding-right:10px;
  text-decoration: none;
}

ul#navigationLinks li.homeLi {
  background: url(/images/static/header-sprites.png) no-repeat left -46px #f1f1f1;
}

ul#navigationLinks li.shopsLi {
  background: url(/images/static/header-sprites.png) no-repeat left -173px #f1f1f1;
}

ul#navigationLinks li.classifiedsLi {
  background: url(/images/static/header-sprites.png) no-repeat left -223px #f1f1f1;
}

ul#navigationLinks li.propertiesLi {
  background: url(/images/static/header-sprites.png) no-repeat left -273px #f1f1f1;
}

ul#navigationLinks li.jobsLi {
  background: url(/images/static/header-sprites.png) no-repeat left -323px #f1f1f1;
}

ul#navigationLinks li.businessLi {
  background: url(/images/static/header-sprites.png) no-repeat left -123px #f1f1f1;
}

ul#navigationLinks li.spacerLi {
  background: url(/images/static/header-spacer-sprites.png) repeat-x left -23px;
  width:11px;
  padding-left:0;
  z-index:2;  
}

ul#navigationLinks li.homeLi a {
  background: url(/images/static/header-sprites.png) no-repeat right -46px #f1f1f1;
}

ul#navigationLinks li.shopsLi a {
  background: url(/images/static/header-sprites.png) no-repeat right -173px #f1f1f1;
  color:#3c3c3c;  
}

ul#navigationLinks li.classifiedsLi a {
  background: url(/images/static/header-sprites.png) no-repeat right -223px #f1f1f1;
}

ul#navigationLinks li.propertiesLi a {
  background: url(/images/static/header-sprites.png) no-repeat right -273px #f1f1f1;
}

ul#navigationLinks li.jobsLi a {
  background: url(/images/static/header-sprites.png) no-repeat right -323px #f1f1f1;
  color:#3c3c3c;
}

ul#navigationLinks li.businessLi a {
  background: url(/images/static/header-sprites.png) no-repeat right -123px #f1f1f1;
}

ul#navigationLinks li.spacerLi strong {
  display:block;
  height:21px;
}

/*Make the date align to the right*/
ul#navigationLinks li.forgotten_password {
  float:right;
  height:21px;
  text-align:right;
}

ul#navigationLinks li.forgotten_password a {
  padding: 0 10px 0 0;
  text-decoration: underline;
}

/* Change the colour of the date when section has lighter coloured background */
div#headerBoxShops ul#navigationLinks li.forgotten_password a,
div#headerBoxJobs ul#navigationLinks li.forgotten_password a {
  color:#3c3c3c;
}

ul#navigationLinks li.forgotten_password a:hover {
  color: #fff !important;
  text-decoration: none;
}

div#headerBoxJobs ul#navigationLinks li.forgotten_password a:hover {
  color: #000 !important;
  text-decoration: none;
}

/* Hover states */
/* javascript makes IE6 behave */

ul#navigationLinks li a:hover {
  color:#000000;
}

/* colour hover state of links for parents AND children */

ul#navigationLinks li.homeLi:hover > a,
ul#navigationLinks li.shopsLi:hover > a,
ul#navigationLinks li.classifiedsLi:hover > a,
ul#navigationLinks li.propertiesLi:hover > a,
ul#navigationLinks li.jobsLi:hover > a,
ul#navigationLinks li.businessLi:hover > a {
  color:#3c3c3c;
}

ul#navigationLinks li.homeLi > a:hover {
  color:#000000;
}

ul#navigationLinks li.shopsLi > a:hover {
  color:#eeb900;
}

ul#navigationLinks li.classifiedsLi > a:hover {
  color:#ec3838;
}

ul#navigationLinks li.propertiesLi > a:hover {
  color:green;
}

ul#navigationLinks li.jobsLi > a:hover {
  color:orange;
}

ul#navigationLinks li.businessLi > a:hover {
  color:purple;
}

/* Active states - Turns 'on' tabs when in relevant sections and cancels hover states, also changes colour of the rest of the header depending on location */

div#headerBoxHome ul#navigationLinks li.homeLi {
  background-position: left -23px;
}

div#headerBoxShops ul#navigationLinks li.shopsLi {
  background-position: left -150px;
}
div#headerBoxClassifieds ul#navigationLinks li.classifiedsLi {
  background-position: left -200px;
}

div#headerBoxProperties ul#navigationLinks li.propertiesLi {
  background-position: left -250px;
}

div#headerBoxJobs ul#navigationLinks li.jobsLi {
  background-position: left -300px;
}

div#headerBoxBusiness ul#navigationLinks li.businessLi {
  background-position: left -100px;
}

/* makes sure that the whole image doesn't changes whether you hover over the <li> or the <a> tag */

div#headerBoxHome ul#navigationLinks li.homeLi a {
  background-position: right -23px;
}

div#headerBoxShops ul#navigationLinks li.shopsLi a {
  background-position: right -150px;
}
div#headerBoxClassifieds ul#navigationLinks li.classifiedsLi a {
  background-position: right -200px;
}

div#headerBoxProperties ul#navigationLinks li.propertiesLi a {
  background-position: right -250px;
}

div#headerBoxJobs ul#navigationLinks li.jobsLi a {
  background-position: right -300px;
}

div#headerBoxBusiness ul#navigationLinks li.businessLi a {
  background-position: right -100px;
}


div#headerBoxHome ul#navigationLinks li.spacerLi {
  background: url(/images/static/header-spacer-sprites.png) repeat-x left -23px;
}

div#headerBoxShops ul#navigationLinks li.spacerLi {
  background: url(/images/static/header-spacer-sprites.png) repeat-x left -150px;
}

div#headerBoxClassifieds ul#navigationLinks li.spacerLi {
  background: url(/images/static/header-spacer-sprites.png) repeat-x left -200px;
}

div#headerBoxProperties ul#navigationLinks li.spacerLi {
  background: url(/images/static/header-spacer-sprites.png) repeat-x left -250px;
}

div#headerBoxJobs ul#navigationLinks li.spacerLi {
  background: url(/images/static/header-spacer-sprites.png) repeat-x left -300px;
}

div#headerBoxBusiness ul#navigationLinks li.spacerLi {
  background: url(/images/static/header-spacer-sprites.png) repeat-x left -100px;
}

/* 
Sets the hover state of back ground images for tabs 
This has to happen after the Active states above so that the hover effect always happens
*/

ul#navigationLinks li:hover,
div#headerBoxShops ul#navigationLinks li:hover,
div#headerBoxClassifieds ul#navigationLinks li:hover,
div#headerBoxProperties ul#navigationLinks li:hover,
div#headerBoxJobs ul#navigationLinks li:hover,
div#headerBoxBusiness ul#navigationLinks li:hover {
  background-position: left top;
}

/* makes sure that the whole image changes whether you hover over the <li> or the <a> tag */

ul#navigationLinks li:hover a,
ul#navigationLinks li a:hover,
div#headerBoxClassifieds ul#navigationLinks li:hover a,
div#headerBoxClassifieds ul#navigationLinks li a:hover,
div#headerBoxProperties ul#navigationLinks li:hover a,
div#headerBoxProperties ul#navigationLinks li a:hover,
div#headerBoxShops ul#navigationLinks li:hover a,
div#headerBoxShops ul#navigationLinks li a:hover,
div#headerBoxJobs ul#navigationLinks li:hover a,
div#headerBoxJobs ul#navigationLinks li a:hover,
div#headerBoxBusiness ul#navigationLinks li:hover a,
div#headerBoxBusiness ul#navigationLinks li a:hover {
  background-position: right top;
}

/* The following creates the edge of the remaining header */
div#headerBoxHome ul#navigationLinks li.spacerLi strong {
  background: url(/images/static/header-sprites.png) no-repeat left -23px #f1f1f1;
}

div#headerBoxShops ul#navigationLinks li.spacerLi strong {
  background: url(/images/static/header-sprites.png) no-repeat left -150px #f1f1f1;
}

div#headerBoxClassifieds ul#navigationLinks li.spacerLi strong {
  background: url(/images/static/header-sprites.png) no-repeat left -200px #f1f1f1;
}

div#headerBoxProperties ul#navigationLinks li.spacerLi strong {
  background: url(/images/static/header-sprites.png) no-repeat left -250px #f1f1f1;
}

div#headerBoxJobs ul#navigationLinks li.spacerLi strong {
  background: url(/images/static/header-sprites.png) no-repeat left -300px #f1f1f1;
}

div#headerBoxBusiness ul#navigationLinks li.spacerLi strong {
  background: url(/images/static/header-sprites.png) no-repeat left -100px #f1f1f1;
}

/* The following sets the colour of the date background depending on location */

div#headerBoxHome ul#navigationLinks li.forgotten_password {
  background: url(/images/static/header-spacer-sprites.png) repeat-x left -23px;
}

div#headerBoxShops ul#navigationLinks li.forgotten_password {
  background: url(/images/static/header-spacer-sprites.png) repeat-x left -150px;
}

div#headerBoxClassifieds ul#navigationLinks li.forgotten_password {
  background: url(/images/static/header-spacer-sprites.png) repeat-x left -200px;
}

div#headerBoxProperties ul#navigationLinks li.forgotten_password {
  background: url(/images/static/header-spacer-sprites.png) repeat-x left -250px;
}

div#headerBoxJobs ul#navigationLinks li.forgotten_password {
  background: url(/images/static/header-spacer-sprites.png) repeat-x left -300px;
}

div#headerBoxBusiness ul#navigationLinks li.forgotten_password {
  background: url(/images/static/header-spacer-sprites.png) repeat-x left -100px;
}

div#headerBoxHome ul#navigationLinks li.forgotten_password a {
  background: url(/images/static/header-sprites.png) no-repeat right -23px #f1f1f1;
}

div#headerBoxShops ul#navigationLinks li.forgotten_password a {
  background: url(/images/static/header-sprites.png) no-repeat right -150px #f1f1f1;
}

div#headerBoxClassifieds ul#navigationLinks li.forgotten_password a {
  background: url(/images/static/header-sprites.png) no-repeat right -200px #f1f1f1;
}

div#headerBoxProperties ul#navigationLinks li.forgotten_password a {
  background: url(/images/static/header-sprites.png) no-repeat right -250px #f1f1f1;
}

div#headerBoxJobs ul#navigationLinks li.forgotten_password a {
  background: url(/images/static/header-sprites.png) no-repeat right -300px #f1f1f1;
}

div#headerBoxBusiness ul#navigationLinks li.forgotten_password a {
  background: url(/images/static/header-sprites.png) no-repeat right -100px #f1f1f1;
}

ul#navigationLinks li a em.newFeature {
  background: url(/images/static/icon_sprite_horizontal_36px.png) no-repeat -144px top;
  height:36px;
  right:-10px;
  position: absolute;
  text-indent: -1500px;
  top:-24px;
  width:36px;
  z-index: 5;
}

/* !=== Global Navigation Drop Down Menu    ========================================== */

ul#navigationLinks li ul {
  background: url(/images/static/header-sprites.png) no-repeat -948px bottom transparent;
  display: block;
  left: -10px;
  padding: 10px 0 20px 10px;
  position: absolute;  
  top: 21px;
  width: 135px;
  visibility: hidden;
  z-index: 3;
}

ul#navigationLinks li ul li {
  border: 1px solid transparent;
  display:block;
  float: right;
  height: auto; /* overrides inherited style */
  padding-left: 7px;
  width: 130px;
}

ul#navigationLinks li ul li:hover {
  background-color: #bfd6ff;
  border: 1px solid #3c3c3c;
}

ul#navigationLinks li.shopsLi ul li a,
ul#navigationLinks li.classifiedsLi ul li a,
ul#navigationLinks li.propertiesLi ul li a,
ul#navigationLinks li.jobsLi ul li a,
ul#navigationLinks li.businessLi ul li a {
  background-image: none;
  /* stop children from inheriting background colour */
  background-color: transparent;
  color:#3c3c3c;
  display:block;
  font-weight:normal;
  padding-right: 5px;
  height: auto;
  padding-left: 2px;
}

ul#navigationLinks li ul li a:hover {
  padding-left: 5px;
  color: #013eb0;
}

/*
The following styles handle the drop downs for both the
members area and the primary navigation, with and without Javascript.
*/

ul#navigationLinks li.navHover:hover ul,
ul#navigationLinks li.navHover a:hover ul,
ul#membersArea li.navHover:hover ul,
ul#membersArea li.navHover a:hover ul {
  visibility: visible;
}

ul#navigationLinks li.intent ul,
ul#membersArea li.intent ul {
  visibility: visible;
}

/* !=== Lower half of header    ========================================== */

div.clearHeader {
  clear:both;
  display:none;
}

div.headerLowerWrap {
  clear:both;
  height:36px;
  width:948px;
  z-index:1;
  background: url(/images/static/header-sprites.png) no-repeat;
}

div#headerBoxHome div.headerLowerWrap {
  background-position: left -401px;
}

div#headerBoxShops div.headerLowerWrap {
  background-position: left -501px;
}

div#headerBoxClassifieds div.headerLowerWrap {
  background-position: left -551px;
}

div#headerBoxProperties div.headerLowerWrap {
  background-position: left -601px;
}

div#headerBoxJobs div.headerLowerWrap {
  background-position: left -651px;
}

div#headerBoxBusiness div.headerLowerWrap {
  background-position: left -451px;
}

/* !=== Global Search Form    ========================================== */

form#newSearchForm {
  float:left;
  margin:8px 0 0 10px;
  width:350px; /* forces IE to behave */
}

form#newSearchForm fieldset {
  border:none;

}

form#newSearchForm legend {
  display:none;

}

form#newSearchForm label {
  color:#ffffff;
  font-size:12px;
  letter-spacing:0.6px;
}

div#headerBoxShops form#newSearchForm label,
div#headerBoxJobs form#newSearchForm label {
  color:#3c3c3c;
}

form#newSearchForm #newSearch_text {
  width:200px;
}

/* !=== Global Login Form    ========================================== */

form#newLoginForm {
  float:right;
  margin:8px 10px 0 0;
  text-align:right;
}

form#newLoginForm fieldset {
  border:none;
}

form#newLoginForm legend {
  display:none;
}

form#newLoginForm label {
  display:none;
}

form#newLoginForm #loginEmail {
  width: 120px;
}

form#newLoginForm #loginPassword {
  width:80px;
}

/* !=== Error Message    ========================================== */

div.LoginErrorMessage {
  background: url(/images/static/header-sprites.png) no-repeat left -760px;
  color:#ec3838;
  float:right;
  height:19px;
  line-height:19px;
  margin:9px 0 0 0px;
  padding-left:10px;
  width:270px;
  letter-spacing: 0.6px;
}

/* !=== Welcome Message    ========================================== */

h2.welcomeMessage {
  color:#bfd6ff;
  float:right;
  font-size:14px;
  margin:10px 10px 0 0;
}

h2.welcomeMessage strong {
  color:#fff;
}

#headerBoxShops h2.welcomeMessage,
#headerBoxShops h2.welcomeMessage strong {
  color:#3c3c3c;
}

/* !=== Footer    ========================================== */

#footerHome, #footerShop, #footerClassified, #footerProperty, #footerJobs, #footerBusiness {
  width: 948px;
  height: 27px;
  background: url(/images/static/header-sprites.png) no-repeat left -800px;
  clear: both;
  margin-top: 10px;
  text-align:  center;
  color: #ffffff;
}

#footerShop {
  background: url(/images/static/header-sprites.png) no-repeat left -860px;
  color: #3c3c3c;
}

#footerShop a {
  color: #3c3c3c;
}

#footerClassified {
  background: url(/images/static/header-sprites.png) no-repeat left -890px;
  color: #ffffff;
}

#footerProperty {
  background: url(/images/static/header-sprites.png) no-repeat left -920px;
  color: #ffffff;
}

#footerJobs {
  background: url(/images/static/header-sprites.png) no-repeat left -950px;
  color: #3c3c3c;
}

#footerBusiness {
  background: url(/images/static/header-sprites.png) no-repeat left -830px;
}

.footerLinks {
  padding-top: 7px;
}

.footerLinks li {
  display: inline;
  margin-right: 10px;
}

.footerLinks li a {
  text-decoration: none;
  color: #ffffff;
}

.footerLinks li a:hover {
  text-decoration: underline;
  color: #ffffff;
}

/* !=== Legacy Page Fix    ========================================== */

/* Workaround to get header lining up on legacy pages */

#pageBackgroundLegacy #headerBoxHome, #pageBackgroundLegacy #headerBoxShops, #pageBackgroundLegacy #headerBoxClassifieds, #pageBackgroundLegacy #headerBoxProperties, #pageBackgroundLegacy #footerHome, #pageBackgroundLegacy #footerShop, #pageBackgroundLegacy #footerClassified, #pageBackgroundLegacy #footerProperty {
  margin-left: 10px;
}

#pageBackgroundLegacy #loginLinks {
  padding-right: 20px;
}

#pageBackgroundLegacy .quoteMeBanner {
  margin-right: 10px;
}

/* !=== *4* Default Box Headers    ========================================== */

.defaultHeader {
  width:100%;
  height:20px;
  background: url(../images/static/miniBlueFade.gif) repeat-x top;
  border-bottom:1px #bcbcbc solid;
  padding-bottom:0;
  position:relative;
  letter-spacing:4px;
}

.defaultHeaderText {
  margin-left:10px;
  font-weight:bold;
  font-size:13px;
  color:#ffffff;
  background: url(../images/static/dottedFade.gif) repeat-y right;
  display:block;
  line-height:20px;
  text-decoration:none;
} 

/* !=== *5* Default Content Box    ========================================== */

.defaultWrapper {
  background-color: #fff;
  border: 1px solid #bcbcbc;
  font-size:13px;
  line-height:15px;
  color:#000;
  letter-spacing: 0.6px;
}

div.defaultInnerWrapper {
  padding:10px;
}

.defaultWrapper h2 {
  color:#013eb0;
  background-color: #bfd6ff;
  margin-bottom:10px;
}

/* !=== *6* Progress bar for file uploads    ========================================== */

.progress_Box {
  display:none;
  position:absolute;
  left:0;
  top:0;
  margin-left:40%;
  z-index: 501;
  text-align:center;
  color:#013eb0;
  font-family:Helvetica,Arial,Sans;
  font-size:16px;
  background-color: #fff;
  border:2px solid #3c3c3c;
  height:100px;
  width:300px;
  padding-top:80px;
}

/* !=== *7* Buttons at the bottom of forms    ========================================== */

div.bottomButtons {
  height:30px;
  border-top:1px solid #bcbcbc;
  padding:10px;
}

.blockButton {
  background-color:#f1f1f1;
  border:1px solid #bcbcbc;
  color:#013eb0;
  text-decoration:none;
  padding:5px 10px;
  font-size:12px;
  font-family: helvetica, arial, sans-serif;
  letter-spacing:0.6px;
  cursor:pointer;
}

.blockButton:hover {
  background-color:#013eb0;
  color:#ffffff;
}

.leftSide {
  float:left;
}

.rightSide {
  float:right;
}

/* !=== *8* Images    ========================================== */

/* SMALL */

/* MEDIUM */

.imageMedium {
  height:55px;
  width:90px;
  padding:2px;
  border:1px solid #f1f1f1;
  background-color:#ffffff;
}

div.noImageBoxMedium {
  border: 1px solid #f1f1f1;
  padding: 2px;
  text-align: center;
  line-height: 55px;
  background-color: #ffffff;
  color: #3c3c3c;
  width: 90px;
  height: 55px;
}

/* LARGE */

/* !=== *9* Default Text links    ========================================== */

a.defaultTextLink {
  color:#397eff;
}

a.defaultTextLink:hover {
  text-decoration:none;
}

/* Dark Text link used in search results */

a.darkTextLink {
  font-size:12px;
  color:#013eb0;
  font-weight:bold;
  text-decoration:none;
}

a.darkTextLink:hover {
  text-decoration:underline;
}

/* !=== *10* Drop Shadows    ========================================== */

.shadow_1000px {
  background:transparent url(/images/static/shadow_sprites.png) no-repeat scroll center -50px;
  height:11px;
  margin:0 auto 10px auto;
  width:1000px;
}

.shadow_900px {
  background:transparent url(/images/static/shadow_sprites.png) no-repeat scroll center -130px;
  height:11px;
  margin:0 auto 10px auto;
  width:900px;
}

.shadow_800px {
  background:transparent url(/images/static/shadow_sprites.png) no-repeat scroll center -210px;
  height:11px;
  margin:0 auto 10px auto;
  width:800px;
}

.shadow_700px {
  background:transparent url(/images/static/shadow_sprites.png) no-repeat scroll center -290px;
  height:11px;
  margin:0 auto 10px auto;
  width:700px;
}

.shadow_600px {
  background:transparent url(/images/static/shadow_sprites.png) no-repeat scroll center -370px;
  height:11px;
  margin:0 auto 10px auto;
  width:600px;
}

.shadow_500px {
  background:transparent url(/images/static/shadow_sprites.png) no-repeat scroll center -450px;
  height:11px;
  margin:0 auto 10px auto;
  width:500px;
}

.shadow_400px {
  background:transparent url(/images/static/shadow_sprites.png) no-repeat scroll center -530px;
  height:11px;
  margin:0 auto 10px auto;
  width:400px;
}

.shadow_300px {
  background:transparent url(/images/static/shadow_sprites.png) no-repeat scroll center -610px;
  height:11px;
  margin:0 auto 10px auto;
  width:300px;
}

.shadow_200px {
  background:transparent url(/images/static/shadow_sprites.png) no-repeat scroll center -690px;
  height:11px;
  margin:0 auto 10px auto;
  width:200px;
}

.shadow_100px {
  background:transparent url(/images/static/shadow_sprites.png) no-repeat scroll center -770px;
  height:11px;
  margin:0 auto 10px auto;
  width:100px;
}

/* !=== *11* Default Search Results Table (Jobs and Business)    ========================================== */

.searchResultsInnerWrap {
  padding:10px;
}

.userSearchString {
  color:#3c3c3c;
  font-size:12px;
  background-color: #FFF8DC;
  height:20px;
  margin-bottom:10px;
  line-height:20px;
  padding-left:10px;
}

.userSearchString span {
  color:#013eb0;
}

/* Order By */

#searchOrderBy {
  text-align:right;
  font-size:12px;
  margin-bottom:15px;
}

#searchOrderBy fieldset {
  border:none;
}

#searchOrderBy legend {
  display:none;
}

#jobSearchOrderBy select option {
  padding:0 5px;
}

#searchResultsTable {
  width:100%;
  font-size:12px;
}

#searchResultsTable th {
  border-bottom: 1px solid #bcbcbc;
  font-size:12px;
  background: url(/images/static/manageShopTabM.gif) repeat-x left top;
  line-height:30px;
  padding-left:5px;
}

#searchResultsTable td {
  border: solid #bcbcbc;
  border-width: 0 1px 1px 0;
  padding:5px;
}

#searchResultsTable .leftTh {
  background: url(/images/static/manageShopTabL.gif) no-repeat left top;
  padding-left:10px;
}

#searchResultsTable .rightTh {
  background: url(/images/static/manageShopTabR.gif) no-repeat right top;
}

#searchResultsTable .leftTd {
  border-left:1px solid #bcbcbc;
}

.trOdd {
  background-color:#ffffff;
  height:30px;
}

.trEven {
  background-color:#f1f1f1;
  height:30px;
}

.trOdd:hover, .trEven:hover {
  background-color:#F0F8FF;
}

#searchResultsTable .searchTelephoneTd {
  width:100px;
}

#searchResultsTable td.searchTableRightTd {
  padding:0 5px;
}

#searchResultsTable td.viewLinkTd {
  width:40px;
}

div.noSearchResults {
  font-size: 12px;
  letter-spacing: 0.6px;
}

div.noSearchResults p {
  font-size: 12px;
  margin-top:20px;
  line-height:20px;
}

/* !=== *12* Recently Viewed Module    ========================================== */

#recentlyViewedBox {
  background-color: #fff;
  border: 1px solid #bcbcbc;
  margin:5px -3px 0 0;
  font-size:13px;
  color:#3c3c3c;
  letter-spacing: 0.6px;
}

#recentlyViewedBox .boxHeader {
  margin-bottom:10px;
  border-bottom: 1px solid #bcbcbc;
}

a.minimiseRecentlyViewed, a.maximiseRecentlyViewed {
  background: url(/images/static/recently-viewed-sprite.png) no-repeat -540px -50px;
  border-left: 1px solid #bcbcbc;
  color: #397eff;
  display:none;
  font-size: 10px;
  float: right;
  line-height: 34px;
  margin: -11px -11px 0 0;
  padding-left: 10px;
  height: 34px;
  width: 75px;
}

a.maximiseRecentlyViewed {
  background: url(/images/static/recently-viewed-sprite.png) no-repeat -540px -10px;
}

a.viewAllRecentItems {
  float:left;
  display:block;
  width: 300px;
  height: 23px;
  line-height: 23px;
  color: #397eff;
}

div.recentlyViewedItemWrapper {
  width: 263px;
  background: url(/images/static/recently-viewed-sprite.png) no-repeat 0px -100px; /* default */
  overflow: auto; /* because some of the contents are floated */
  float:left;
  margin-right:10px;
}

a.deleteItemBtn {
  background: url(/images/static/recently-viewed-sprite.png) no-repeat -700px -30px;
  border: none;
  float:right; 
  margin:5px 5px 0 0; 
  text-indent: -50000px;
  height:16px;
  width:16px;
}

a.deleteItemBtn:hover {
  background: url(/images/static/recently-viewed-sprite.png) no-repeat -700px -60px;
}

div.recentlyViewedItemWindow {
  overflow: hidden;
  position:relative; /*so we can hide content outside of it*/
  height: 94px; /* have to specify height for IE 6 */
}

div.recentlyViewedItemWindow div.itemImageWrap {
  /*medium sized image*/
  width: 80px;
  height: 80px;
  overflow: hidden; /*in case of alt text*/
  text-align: center; /* center images that aren't as wide as div */
  position: absolute;
  top:10px;
  left:10px;
}

div.recentlyViewedItemWindow div.itemImageWrap img {
  border: 1px solid #bcbcbc;
}

p.recentlyViewedItemType {
  height: 13px;
  float: right;
  margin: 10px 7px 5px 0;
  width: 138px;
}

p.recentlyViewedItemType_noImage {
  height: 20px;
  width: 230px;
  margin: 10px 0 7px 7px;
}

p.recentlyViewedItemTitle {
  border: 1px solid #fff; /*make it align with adjacent image*/
  color: #013eb0;
  float: right;
  margin: 0px 7px 7px 0;
  text-align: justify;
  width: 138px;
  /*match height to image dimensions*/
  height: 57px;
}

p.recentlyViewedItemTitle_noImage {
  color: #013eb0;
  text-align: justify;
  width: 138px;
  /*match height to image dimensions*/
  margin: 0 0 7px 7px;
  /* same width as window, minus the margins */
  width: 230px;
  height: 50px; /* extra 2px to compensate for borders on images */
}

p.recentlyViewedHidden {
  position: absolute;
  /*position at the bottom of the window.
  Javascript will animate it upwards on hover */
  top: 92px;
  left: 7px;
  background: url(/images/static/recently-viewed-sprite.png) no-repeat -100px 0px;
  /*match dimensions of window*/
  height: 70px;
  width: 205px;
  padding:10px 15px;
  overflow: hidden;
  font-size: 12px;
  letter-spacing: 1px;
  line-height:13px;
}

/* deal with basic functionality when javascript is turned off */
div.recentlyViewedItemWindow.noJavascriptHover:hover p.recentlyViewedHidden {
  /* move hidden content upwards */
  top: 0px;
  display:block;
}

div.recentlyViewedItemFeatures {
  float:left;
  margin: 7px 0 7px 7px;
  /* match dimensions with icons*/
  width: 179px;
  height:24px;
}

div.recentlyViewedItemFeatures img {
  overflow: hidden; /*covers alt text*/
  height:24px;
  width:24px;
}

a.recentlyViewedLink {
  background: url(/images/static/recently-viewed-sprite.png) no-repeat -707px -3px;
  display: block;
  float: right;
  line-height: 24px;
  margin: 7px 7px 7px 0;
  padding-right:12px;  
  /*match dimensions of feature icons*/
  height: 24px;
  color: #397eff;
}

a.recentlyViewedLink:hover {
  background: url(/images/static/recently-viewed-sprite.png) no-repeat -667px -3px;
}

/* change the colour of the more link depending on background image */
div.isAShop:hover a.recentlyViewedLink,
div.isAShop.active a.recentlyViewedLink,
div.isAJob:hover a.recentlyViewedLink,
div.isAJob.active a.recentlyViewedLink,
div.isAProduct:hover a.recentlyViewedLink,
div.isAProduct.active a.recentlyViewedLink,
div.isAProperty:hover a.recentlyViewedLink,
div.isAProperty.active a.recentlyViewedLink { color: #3c3c3c; }

div.isAClassified:hover a.recentlyViewedLink,
div.isAClassified.active a.recentlyViewedLink,
div.isABusiness:hover a.recentlyViewedLink,
div.isABusiness.active a.recentlyViewedLink { color: #fff; }

/* hover and active states for contect specific styles */

div.isAShop:hover,
div.isAShop.active { background-position: -270px -100px; }

div.isAProduct:hover,
div.isAProduct.active { background-position: -270px -100px; }

div.isAClassified:hover,
div.isAClassified.active { background-position: -540px -100px; }

div.isAProperty:hover,
div.isAProperty.active { background-position: -540px -240px; }

div.isABusiness:hover,
div.isABusiness.active { background-position: -270px -240px; }

div.isAJob:hover,
div.isAJob.active { background-position: 0px -240px; }

/* !=== Scrollable    ========================================== */

/* 
  root element for the scrollable. 
  when scrolling occurs this element stays still. 
*/
div.scrollable {
  position:relative;
  overflow:hidden;    
  width: 820px; 
  height:131px;
}

/* 
  root element for scrollable items. Must be absolutely positioned
  and it should have a super large width to accomodate scrollable items.
  it's enough that you set width and height for the root element and
  not for this element.
*/

div.scrollable div.items {  
  clear:both;
  margin-left:8px;
  position:absolute;
  /* this cannot be too large */
  width:20000em;  
}

/* !=== Scrollable navigation    ========================================== */

/* this makes it possible to add next button beside scrollable */
div.scrollable {
  float:left;
}

/* prev, next, prevPage and nextPage buttons */
a.prev, a.next {
  display:block;
  width:34px;
  height:27px;
  background: url(/images/static/recently-viewed-sprite.png) no-repeat 0px -30px;
  float:left;
  margin:35px 9px;
  cursor:pointer;
  text-indent: -5000px;
}

a.prev:hover {
  background-position: 0px 0px;
}

/* next button uses another background image */
a.next {
  background-position: -34px -30px;
  clear:right;  
}

a.next:hover {
  background-position: -34px 0px;
}

a.next.disabled {
  background-position: -34px -60px;
}

a.prev.disabled {
  background-position: 0px -60px;
}

/* !=== Numbered Navigation (auto-generated)    ========================================== */

span.naviText {
  line-height: normal; /* stop IE from cutting off the bottom of the text */
  float: right;
  padding:4px 0;
}

/* position and dimensions of the navigator */
div.navi {
  float:right;
  margin: 0 0 10px 5px;
  overflow: auto;
  width: 135px; /* width of 5 page links - would need to increase if we show more than 15 items */
}

/* items inside navigator */
div.navi a {
  border: 1px solid #bcbcbc;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  color: #3c3c3c;  
  cursor: pointer;
  float: left;
  line-height: 20px;
  margin-right:5px;
  text-align: center;
  text-decoration: none;
  height: 20px;
  width: 20px;
}

div.navi a:hover {
  color: #397eff;
  border-color: #397eff;
}

div.navi a.active {
  color: #013eb0;
  border-color: #013eb0;
  font-weight:bold;
}   


/* !=== *13* QUOTE ME BANNER    ========================================== */

a.quoteMeBanner {
  background: url(/images/static/quoteMe_banner.png) no-repeat left top;
  display: block;
  color: #3c3c3c;
  float: right;
  font-size: 12px;
  height: 50px;
  letter-spacing: 0px;
  margin-top: 5px;
  position: relative;
  text-decoration: none;
  width: 494px;
}

span.quoteMe_line1 {
  left: 150px;
  position: absolute;
  text-align: center;  
  top:10px;
}

span.quoteMe_line2 {
  color: #fff;
  left: 305px;
  position: absolute;  
  text-align: center;
  top: 10px;
}

span.quoteMe_line3 {
  bottom: 16px;
  color: #fff;
  font-size: 10px;
  position: absolute;
  right: 10px;
  text-decoration: underline;
}

span.quoteMe_line3:hover {
  text-decoration: none;
}

.quoteMeInner a {
  display:block;
  background: url(../images/static/quoteMeInner.png) no-repeat left top;
  width:256px;
  height:63px;
  text-indent: -1500px;
}

.quoteMeInner a:hover {
  background-position: left bottom;
}

/* !=== *14* Flowplayer    ========================================== */

span.playButton_4x3 {
background: url(/images/static/button_play_video.png) no-repeat left top;
height: 66px;
left: 50%;
margin: -33px 0 0 -66px;
position: absolute;
text-indent: -5000px;
top: 50%;
width: 133px;
}

span.playButton_4x3:hover {    
background-position: left bottom;
}

a.flowplayer {
  /* dimensions are controlled by the function that creates the flowplayer code */
  border: 1px solid #bcbcbc;
  display: block;  
  position: relative;
}

/* embed button */

button.buttonEmbed {
  background-color: #397eff;
  border: 1px solid #3c3c3c;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  color: #fff;
  cursor: pointer;
  float: right;
  font-size: 11px;
  margin-top: 10px;
  padding: 2px;
}

button.buttonEmbed:hover {
  background-color: #013eb0;
}

/* !=== *15* Embed Overlay  */
/* ===============================================*/

div.embedOverlay {      
  /* growing background image */ 
  background-image: url(/images/static/business_embed_overlay.png); 
  color: #3c3c3c;
  display: none;
  font-size: 14px;
  height: 264px;            
  /* initially overlay is hidden */  
  padding: 55px;
  width: 600px;
  z-index: 100;
}

div.embedOverlay h3 {
  font-size: 16px;
  font-weight: bold;
  color: #6c477c;
  border-bottom: 1px solid #6c477c;
}

div.embedOverlay textarea {  
  border: 1px solid #6c447c;
  color: #3c3c3c;
  height: 155px !important; /* avoid style overrides */
  margin: 10px 0;
  width: 600px !important; /* avoid style overrides */
}
 
/* default close button positioned on upper right corner */ 
div.embedOverlay div.close { 
  background-image: url(/images/static/icon_close.png); 
  position: absolute; 
  right: 12px; 
  top: 12px; 
  cursor: pointer; 
  height: 28px; 
  width: 28px; 
} 

/* !=== *16* Features Icons    ========================================== */

/* remember to properly style the <ul> so that background images don't overflow */

/* 16 px */

li.hasProfileVideo_16px, li.hasFeaturedItems_16px, li.hasProductVideos_16px,
li.isRecruiting_16px, li.hasVouchers_16px, li.hasGallery_16px {
  float: left;
  width: 16px;
  height: 16px;
  overflow: hidden;
  text-indent: -5000px;
}

li.hasProfileVideo_16px {
  background: url(/images/static/icon_sprite_vertical_16px.png) no-repeat left -304px;
}

li.hasFeaturedItems_16px {
  background: url(/images/static/icon_sprite_vertical_16px.png) no-repeat left -288px;
}

li.hasProductVideos_16px {
  background: url(/images/static/icon_sprite_vertical_16px.png) no-repeat left -272px;
}

li.isRecruiting_16px {
  background: url(/images/static/icon_sprite_vertical_16px.png) no-repeat left -320px;
}

li.hasVouchers_16px {
  background: url(/images/static/icon_sprite_vertical_16px.png) no-repeat left -256px;
}

li.hasGallery_16px {
  background: url(/images/static/icon_sprite_vertical_16px.png) no-repeat left -240px;
}

/* 24px */
li.hasProfileVideo_24px, li.hasFeaturedItems_24px, li.hasProductVideos_24px,
li.isRecruiting_24px, li.hasVouchers_24px, li.hasGallery_24px {
  float: left;
  width: 24px;
  height: 24px;
  overflow: hidden;
  text-indent: -5000px;
}

li.hasProfileVideo_24px {
  background: url(/images/static/icon_sprite_vertical_24px.png) no-repeat -49px -456px;
}

li.hasFeaturedItems_24px {
  background: url(/images/static/icon_sprite_vertical_24px.png) no-repeat -49px -432px;
}

li.hasProductVideos_24px {
  background: url(/images/static/icon_sprite_vertical_24px.png) no-repeat -49px -408px;
}

li.isRecruiting_24px {
  background: url(/images/static/icon_sprite_vertical_24px.png) no-repeat -49px -480px;
}

li.hasVouchers_24px {
  background: url(/images/static/icon_sprite_vertical_24px.png) no-repeat -49px -384px;
}

li.hasGallery_24px {
  background: url(/images/static/icon_sprite_vertical_24px.png) no-repeat -49px -360px;
}

/* !=== *17* Section intros with video (shops, classifieds, properties)    ========================================== */

div.sectionIntroWrapper {
  border-bottom: 1px solid #bcbcbc;
  margin: 0 0 20px 0;
  font-size: 12px;
  line-height: 14px;
  letter-spacing: 0.6px;
  padding: 0 10px 10px 10px;
}

div.sectionIntroWrapper_right {
  float: right;
  width: 185px;
}

div.sectionIntroWrapper h2 {
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  font-weight: normal;
  margin: 0 0 10px 0;
  padding: 5px;
}

div.sectionIntroWrapper h2 strong {
  font-weight: bold;
}

div.sectionIntroInner ul {
  padding: 0 0 0 15px;
}

div.sectionIntroInner ul li {
  list-style-type: disc;
  margin-bottom: 5px;
}

/* !=== *18* Recruiting Styles    ========================================== */

.shopLognDisdetail img {
  margin-left:4px;
}
.shopRecruitingBtn {
  float:right;
  height:69px;
  width:232px;
  background: url(/images/static/recruitmentButton.gif) no-repeat left bottom;
  letter-spacing:0.5px;
  margin:10px 10px 0 0;
  position:relative;
}

.shopRecruitingBtn .wereRecruitingLink1 {
  display:block;
  height:25px;
  color:#3c3c3c;
  font-size:16px;
  text-decoration:none;
  padding:15px 0 0 15px;
  font-weight:bold;
}

.shopRecruitingBtn .wereRecruitingLink1:hover {
  color:#397eff;
}

.shopRecruitingBtn .wereRecruitingLink2 {
  color:#ec3838;
  display:block;
  font-size:12px;
  text-decoration:none;
  height:23px;
  padding-left:50px;
}

.shopRecruitingBtn .wereRecruitingLink2:hover {
  text-decoration:underline;
}

/* !=== *19* Rogue Websites */
/* ===============================================*/

div#rogue_websites_sidebar {
  background: url(/images/static/rogue_websites_sidebar_middle.gif) repeat-y left top #f1c846;
  margin: 3px 0 0 0;
  width: 255px;
}

div#rogue_websites_sidebar h3 {
  float: right;
  font-size: 16px;
  font-weight: bold;
  width: 170px;
}

div#rogue_websites_sidebar img.caution {
  display: block;
  float: left;
  height: 85px;
  margin: 0 10px;
  width: 60px;
  
}

div#rogue_websites_sidebar p {
  float: right;
  font-size: 14px;
  line-height: 16px;
  margin-top: 10px;
  width: 160px;
}

div#rogue_websites_sidebar p strong {
  display:block;
  font-weight: bold;
  margin-top: 5px;
}

div#rogue_websites_sidebar p a {
  color: #3c3c3c;
  text-decoration: none;
}

div#rogue_websites_sidebar p a:hover {
  color: #013eb0;
}

div.rogue_tape {
  width: 900px; /* width of page */
  height: 64px;
  margin: 10px 0;
  position: relative;
  z-index: 1;
}

div.rogue_tape img {
  position: absolute;
  left: -26px;
  top: 0px;
  z-index: 1;
}

div.rogueWebsitesWrapper h2 {
  background-color: transparent;
  border-bottom: 2px solid #013eb0;
  color: #3c3c3c;
  font-size: 32px;
  line-height: 35px;
  margin: 10px 0 30px 0;
}

div.rogue_list_wrapper {
  border: 1px solid #f1f1f1;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  margin: 20px 0 0 0;
  padding: 10px;
}

div.rogueWebsitesWrapper div.rogue_sign {
  background: url(/images/static/rogue_sign.png) no-repeat 750px top transparent;
  min-height: 100px;
  padding-right: 250px;
}

div.rogueWebsitesWrapper strong {
  font-weight: bold;
}

ul.rogue_websites_list {
  float: left;
  width: 446px;
}

ul.right_list {
  margin-left: 10px;
}

ul.rogue_websites_list li {
  float: left;
  cursor: pointer;
  width: 447px;
}

ul.rogue_websites_list li a {
  display: block;
  padding:5px;
}

ul.rogue_websites_list li.hovered, ul.rogue_websites_list li a.noJavascript:hover  {
  background-color: #bfd6ff !important;
}

/* !=== *20* DOTD and Wowcher Banner */
/* ===============================================*/

div.DOTD_banner {
  background: url(/images/static/DOTD_banner_background.png) no-repeat left top #fff;
  height: 152px;
  letter-spacing: 1px;
  margin-top: 10px;
  padding-left: 270px;
  position: relative;
  width: 678px;
}

#pageBackgroundLegacy div.DOTD_banner {
  margin-left: 10px;
}

div.DOTD_banner img {
  border: 3px solid #f5bf26;
  left: 33px;
  position: absolute;
  top: 17px;
}

img.DOTD_banner_image {
  border: 1px solid #166a96;
  left: 40px;
  position: absolute;
  top: 24px;
  text-align: center;
}

div.DOTD_banner h2 {
  color: #000;
  font-size: 18px;
  padding-top: 20px;
}

div.DOTD_banner h2 span {
  color: #206094;
}

span.banner_price {
  font-size: 30px;
  font-weight: bold;
  left: 340px;
  position: absolute;
  top: 80px;
}

span.banner_discount, span.banner_saving, span.banner_value {
  font-size: 14px;
  position: absolute;
  text-align: center;
  top: 80px; 
}

span.banner_value {
  left: 475px;
}

span.banner_discount {
  left: 560px;
}

span.banner_saving {
  left: 650px;
}

div.DOTD_banner span strong {
  font-weight: bold;
}

div.DOTD_banner a {
  color: #fff;
  display: block;
  font-size: 18px;
  height: 62px;
  left: 742px;
  line-height: 62px;
  position: absolute;
  text-align: center;
  top: 64px;
  width: 182px;
}

div.DOTD_banner a:hover {
  background: url(/images/static/DOTD_banner_link_on.png) no-repeat left top;
}

div.wowcher_banner span.banner_discount,
div.wowcher_banner span.banner_saving,
div.wowcher_banner span.banner_value,
div.wowcher_banner span.banner_price {
  top: 95px;
}


/* This is the outer border and drop shadow */
.wowcher_button {
/*   overflow: auto; */
  padding: 1px;
  /* account for drop shadow */
  margin-bottom: 0px;
  /* shrink wrap */
  float: right;
  display: inline;
  
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-box-shadow: 1px 1px 3px #bcbcbc;
  -webkit-box-shadow: 1px 1px 3px #bcbcbc;
  box-shadow: 1px 1px 3px #bcbcbc;    
}


/* This is the inner border and gradient fill */
.wowcher_button a {
  border: 1px solid;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  
  /* Style link Text */
  color: #f1f1f1;
  text-decoration: none;
  text-align: center;
  font-weight: bold;
  font-size: 200%;
  cursor: pointer;

  padding: 15px 30px;
  float: left;
}

.wowcher_button a {
  border: 1px solid;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  
  /* Style link Text */
  color: #f1f1f1;
  text-decoration: none;
  font-size: 14px;
  font-weight: normal;
  padding: 2px 0;
  width: 115px;
}

.wowcher_button:hover {
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
  box-shadow: none;   
}
  
.wowcher_button {
  background-color: #2b75a2;
}

.wowcher_button a {
  background-color: #6eb2db; /* fallback */
  background-image: -moz-linear-gradient(100% 100% 90deg, #62a5cd, #90c9eb);
  background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#90c9eb), to(#62a5cd));
  border-color: #b1d3e8;
  text-shadow: 1px 1px 1px #2b75a2;
}

.wowcher_button a:active {
  text-shadow: -1px -1px 1px #2b75a2; 
  background-color: #6eb2db; /* fallback */
  background-image: -moz-linear-gradient(100% 100% 90deg, #90c9eb, #62a5cd);
  background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#62a5cd), to(#90c9eb));
}

.wowcher_button a:hover, .wowcher_button a:focus {
  background-color: #b1ddf8; /* fallback */
  background-image: -moz-linear-gradient(100% 100% 90deg, #62a5cd, #b1ddf8);
  background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#b1ddf8), to(#62a5cd));
}

#wowcher_widget .wowcher_button {
  margin: 20px 30px 20px 20px;
}

#wowcher_banner {
  background-color: #fff;
  border: 1px solid #bcbcbc;
  letter-spacing: 1px;
  margin: 10px auto;
  width: 946px;
  padding-bottom: 20px;
}

#wowcher_banner h2 {
  height: 66px;
  background-color: #E31262;
  margin-bottom: 10px;
}

#wowcher_banner h2 img {
  padding-top: 10px;
}

#wowcher_banner_image {
  display: block;
  float: left;
  width: 200px;
  height: 114px;
  margin-left: 30px;
}

#wowcher_banner_details {
  float: right;
  width: 700px;
}

#wowcher_banner h3 {
  font-size: 16px;
  line-height: 20px;
  margin-right: 20px;
}

#wowcher_banner h3 a {
  color: #000;
  text-decoration: none;
}

#wowcher_banner_price {
  font-size: 16px;
  border: 1px solid #bcbcbc;
  border-width: 1px 0;
  padding: 5px 10px;
  margin: 10px 20px 10px 0;
}

#wowcher_banner_savings span {
  display: block;
  width: 70px;
  font-size: 12px;
  text-align: center;
  float: left;
}

#wowcher_banner .wowcher_button {
  margin-right: 20px;
}


/* !=== *21* DOTD Mailing List Form */
/* ===============================================*/

p.form_failed {
  color: #ec0000;
}

div.DOTD_success_wrapper, div.password_reset_form_wrapper {
  margin: 40px 0 20px 0;
}

span.form_success_message {
  color:#bcbcbc;
  display: block;
  font-size:60px;
  font-weight:bold;
  margin-bottom:20px;
  line-height:60px;
}

div.DOTD_success_wrapper p, div.password_reset_form_wrapper p {
  margin-bottom: 20px;
}

div.DOTD_success_wrapper p span, div.password_reset_form_wrapper p span {
  color: #397eff;
  font-weight: bold;
  font-size: 16px;
}

div.DOTD_form_page_wrapper {
  border: 2px solid #EC0000;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  margin: 30px auto;
  padding: 50px;
  width: 600px;
}

div.DOTD_form_page_wrapper p {
  margin-bottom: 20px;
}

form#DOTD_mailing_list_page {
  text-align: center;
}

/* !=== *22* Product Search Results */
/* ===============================================*/

/* wrapper for filtering and pagination */
div.organise_results {
  background-color: #f1f1f1;
  border: 1px solid #bcbcbc;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  clear: both; /* safety net */
  margin: 0 0 20px 0;
  width: 708px;
}

div.organise_results_inner {
  border: 1px solid #fff;
  border-width: 2px 0 0 1px;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  color: #3c3c3c !important;
  font-size: 12px !important;
  width: 706px;
}

/* change list ordering */
div.listby {
  float: left;
  padding: 10px 0 10px 10px;
  width: 455px;
}

/* number of pages, prev and next links */
div.pagination {
  border-left: 1px solid #bcbcbc;
  float: right;
  padding: 10px 10px 10px 0;
  text-align: right;
  width: 205px;
}

/* !=== Forgotten Password form */
/* ===============================================*/

div.password_reset_form_wrapper em {
  font-style: italic;
}

div.password_reset_form_wrapper ol {
  list-style: disc;
  margin-bottom: 20px;
}

div.password_reset_form_wrapper ol li {
  list-style-type: decimal;
  margin: 0 0 10px 20px;
}

div.password_reset_form_wrapper strong {
  font-weight: bold;
}

form#reset_password_form {
  border: 1px solid #397eff;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  font-size: 16px;
  float: left;
  margin-bottom: 20px;
  padding: 20px;
  width: 365px;
}

form#reset_password_form label {
  display: block;
  line-height: 18px;
  margin-bottom: 10px;
}

form#reset_password_form input.text {
  border: 1px solid #3c3c3c;
  font-size: 18px;
  line-height: 20px;
  width: 300px;
}

.along_form {
  margin-left: 450px;
}

/* !=== *24* Affiliate Window Voucher Codes */
/* ===============================================*/

div.aWin h3 {
  font-size: 16px;
  font-weight: bold;
  margin:10px 0;
}

div.aWin h3 a {
  font-size: 12px;
  font-weight: normal;
}

div.aWinHelp {
  background-color: #f1f1f1;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  display:none;
  margin-bottom: 20px;
  padding: 10px;
  width: 440px;
}

div.aWinHelp ol {
  font-size: 12px;
  list-style: decimal;
  line-height: 14px;
  margin:10px 0;
  padding-left: 10px;
}

div.aWinHelp ol li {
  margin-left: 10px;
  padding: 2px 0;
}

div.aWin p{
  font-size: 12px;
  letter-spacing: 0.6px;
}

table.aWin_voucher_codes {
  font-size:12px;
  margin: 0 0 10px 0;
  padding: 5px;
  width: 460px;
}

table.aWin_voucher_codes thead tr th {
  border-bottom: 1px solid #bfd6ff;
  padding: 5px 0;
}

table.aWin_voucher_codes tbody td {
 padding: 5px 0;
}

table.aWin_voucher_codes th {
}

table.aWin_voucher_codes tbody td.aWin_voucher_expiry {
  text-align: right;
}