/* page wide styles only */
          /* ---------- reset-guardian.css starts here ---------- */
body,
html
{
	background-color: white;
}

* 
{
	padding: 0;
	margin: 0;
	border-collapse: collapse;
	background-repeat: no-repeat;
}

body
{
    width: 960px;
    margin: auto;
    color: #333;
    padding-left: 10px;
    font-size: 12px;
    font-family: arial, sans-serif;
    line-height: 1.25;
    position: relative;
}

a img,
fieldset
{
    border: 0;
}

ul,
ol
{
	list-style-type: none;
}

a
{
	text-decoration: none;
	color: #005689;
}

a:hover
{
	text-decoration: underline
}

a:focus,
a:active
{
	outline: none;
	background-color: #005689; 
	color: #fff;
}
          /* ----------  reset-guardian.css ends here ----------- */
          /* ---------- grid-columns.css starts here ---------- */
/*
    The grid is based on 60px columns
    Column widths are worked out as 60px + 80px for each subsequent column
    e.g. 4 col = 60px + (80px * 3) = 300px
    
*/

.eleven-col,
.ten-col,
.nine-col,
.eight-col,
.seven-col,
.six-col,
.five-col,
.four-col,
.three-col,
.two-col,
.one-col
{
    float: left;
    overflow: hidden;
    margin-right: 20px;
}

.twelve-col
{
	clear: both;
	position: relative;
    width: 940px;
}

.eleven-col
{
    width: 860px;
}

.ten-col
{
    width: 780px;
}

.nine-col
{
    width: 700px;
}

.eight-col
{
    width: 620px;
}

.seven-col
{
    width: 540px;
}

.six-col
{
    width: 460px !important;
}

.five-col
{
    width: 380px;
}

.four-col
{
    width: 300px;
}

.three-col
{
    width: 220px;
}

.two-col
{
    width: 140px !important;
}

.one-col
{
    width: 60px;
}

.last
{
    margin-right: 0;
}
          /* ----------  grid-columns.css ends here ----------- */
          /* ---------- component.css starts here ---------- */
          /* ---------- classes.css starts here ---------- */
/* site-wide border styles */
.b1
{
    border-top-width: 10px;
    border-top-style: solid;
}

.b2, .b3, .b4
{
   	border-top-color: #999;
	padding: 3px 0 6px 0;
}

.b2, .b4 /* b4 uses zone colour */
{
    border-top-width: 1px;
    border-top-style: solid;
}

.b3
{
	border-top-style: dotted;
	border-top-width: 1px;
}

/* site-wide text styles */
.t1, .t2, .t3, .t4, .t5, .t6
{
	font-family: georgia, serif;
	font-weight: normal;
}

.t1
{
	font-size: 24px;
	line-height: 27px;
}

.t2
{
	font-size: 18px;
	line-height: 21px;
}

.t3
{
	font-size: 16px;
	line-height: 19px;
}

.t4 
{
    font-size: 16px;
    line-height: 19px;
    font-weight: bold;
}

.t5, .t6
{
    font-size: 14px;
    line-height: 17px;
}

.t5
{
    font-weight: bold;
}

.t7
{
    font-family: arial, sans-serif;
    font-size: 12px;
    line-height: 15px;
    font-weight: bold;
}

/* site-wide list styles */
.l1
{
	border-top-style: dotted;
	border-top-width: 1px;
	border-top-color: #999;
	padding: 2px 0 6px 0;
}

.l2
{
	margin-bottom: 13px;
}
          /* ----------  classes.css ends here ----------- */
          /* ---------- placeholder.css starts here ---------- */
.placeholder-instructions
{
    background-color: #ddd; 
    padding: 10px;
    margin: 0;
    margin-bottom: 20px;
    clear: left;
}
          /* ----------  placeholder.css ends here ----------- */

h2, 
h3
{
	font-family: georgia, serif;
	font-weight: normal;
}

h2 
{
	font-size: 14px;
	font-weight: bold;
	line-height: 1.125;
}

h3 
{
	font-size: 16px;
	padding-top: 1px;
	display: block;
}

p, 
.strap
{
	font-family: arial, sans-serif;
}

.strap
{
	font-weight: bold;
	margin-top: 3px;
}

.component
{
	display: inline-block;
	margin-bottom: 20px;
	background-color: #fff;
}

.hd
{
	padding-top: 4px;
	padding-bottom: 15px;
	border-top: 10px solid;
}

.bd .first
{
    margin-bottom: 20px;
}

.comment-count-info 
{
	background-position: 0 3px;
	padding: 2px 0 2px 16px;
}

          /* ---------- slot-machine.css starts here ---------- */
.slot-machine,
.slot-machine-two
{
    clear: left;
}

.slot-machine h2
{
    width: 100%;
    overflow: hidden;
}

.slot-machine li
{
    margin-top: 5px;
    padding-bottom: 10px;
}

.slot-machine h3
{
    border-top-width: 1px;
    border-top-style: solid;
    border-bottom-width: 1px;
    border-bottom-style: dotted;
    border-color: #ccc;
    font-family: arial, sans-serif;
    font-size: 12px;
    font-weight: bold;
    padding-top: 1px;
    padding-bottom: 7px;
}

.slot-machine img
{
    margin-top: 5px;
    margin-bottom: 1px;
    vertical-align: bottom;
}

.slot-machine p.strap,
.slot-machine h4,
.slot-machine-two p.strap
{
    margin-bottom: 3px;
    margin-top: 3px;
    font-weight: bold;
    font-size: 12px;
}

/* specific to the horizontally displayed slot machine */
.slot-machine-two li
{
    float: left;
    width: 140px;
}

.slot-machine-two li.odd
{
    margin-right: 20px;
}

.slot-machine-two li.hd
{
    width: 100%;
    margin-top: 0;
    border-top: 3px solid #999;
}

.slot-machine-two li.hd h3
{
    font-size: 20px;
}

.slot-machine-two .footer-heading
{
    clear: both;
    margin-top: 20px;
    float: left;
    width: 100%
}

.slot-machine-two .footer-heading li
{
    float: none;
    border-top: 1px dotted #999;
    padding-top: 3px;
    padding-bottom: 3px;
    width: 100%
}
          /* ----------  slot-machine.css ends here ----------- */
          /* ---------- section-heading.css starts here ---------- */
.section-heading
{
    margin-bottom: 25px;
    position: relative;
}

.section-heading a.feed
{
    background-image: url(images/icon_rss.gif);
    background-position: 0 0;
    padding-left: 18px;
    padding-top: 1px;
    position: absolute;
    right: 3px;
    top: 0;
    width: auto;
    left: auto;
}
          /* ----------  section-heading.css ends here ----------- */
          /* ---------- mpu.css starts here ---------- */
#mpu1 iframe, 
#mpu1 img, 
#mpu1 object, 
#mpu1 embed, 
#mpu1 div, 
#rightslot1 iframe, 
#rightslot1 img, 
#rightslot1 object, 
#rightslot1 embed, 
#rightslot1 div
{
    margin-bottom: 10px;
}

#intrusive
{
	display: inline;
}

#intrusive img.ad-placeholder
{
	display: none;
}
          /* ----------  mpu.css ends here ----------- */
          /* ---------- jobs-box-front.css starts here ---------- */
div#section-contents div.jobsbox
{
	margin-bottom: 0;
	padding-bottom: 20px;
	width: 300px;
}

div#section-contents div.jobsbox ul.jobs,
div#section-contents div.jobsbox ul.jobs h4,
div#global-jobs h4
{
	font-family: arial, sans-serif;
	font-size: 12px;
	font-weight: normal;
}

div#global-jobs #find-job-container h4
{
    font-weight: bold;
}

div.jobsbox ul.jobs li,
div#section-contents div.jobsbox ul.jobs li,
p.find-a-job
{
	padding-bottom: 10px;
	padding-top: 3px;
}

div#section-contents div.jobsbox ul.media-jobs li
{
	padding-bottom: 6px;
}

div#section-contents div.jobsbox
{
	background: white;
}

div#section-contents div.jobsbox h3
{
	padding-top: 5px;
}

div.jobsbox form,
div#section-contents div.jobsbox form
{
	padding-bottom: 5px;
}

.jobs li
{
    border-top-style: dotted;
    border-top-width: 1px;
    border-top-color: #999;
}

div.jobsbox p.find-a-job
{
    border-top-width: 1px;
    border-top-style: solid;
    border-top-color: #999;
}

div.jobsbox p.find-a-job a
{
    font-weight: bold;
}


/* grid specifics */
.three-five-four-grid .jobsbox .hd
{
    padding-bottom: 0;
    border-top-color: #999;
}

.three-five-four-grid .jobsbox
{
    background-color: #f3f3f3;
}

.three-five-four-grid .jobsbox form
{
    padding-top: 5px;
    padding-bottom: 10px;
}

.three-five-four-grid .jobsbox form input#freetext-searchalljobs
{
    width: 220px;
}
          /* ----------  jobs-box-front.css ends here ----------- */
          /* ---------- heading-vertical-links.css starts here ---------- */
.heading-vertical-links li,
.heading-vertical-links h4
{
    font-family: arial, san-serif;
    font-size: 12px;
}

.heading-vertical-links li.major-heading
{
	border-top-width: 10px;
	border-top-style: solid;
	padding-bottom: 15px;
}

.heading-vertical-links h2
{
    font-weight: bold;
}

.heading-vertical-links ul
{
    margin-bottom: 20px;
}

.heading-vertical-links li
{
    border-top-style: dotted;
    border-top-width: 1px;
    clear: both;
    overflow: hidden;
    padding-top: 3px;
    padding-bottom: 7px;
    width: 140px;
}

.heading-vertical-links li.first
{
    border-top-style: solid;
}

.heading-vertical-links span.count
{
	float: left;
	font-weight: bold;
	margin-right: 10px;
}

.heading-vertical-links.numbered div.trail-caption
{
	float: left;
	width: 115px;
}

.heading-vertical-links li.heading
{
	border-top-style: solid;
	border-top-color: #999;
}

.heading-vertical-links li.picture
{
	border-top: none;
	padding-top: 0;
}
          /* ----------  heading-vertical-links.css ends here ----------- */
          /* ---------- ad-links-in-content-area.css starts here ---------- */
/* advertiser links starts */
body #wrapper #box ul#article-toolbox
{
	border-bottom-width: 1px;
	border-bottom-style: dotted;
	padding-bottom: 5px;
	margin-bottom: 10px;
}

div#advertiser-container
{
	float: left;
	width: 620px;
	margin-bottom: 10px;
}

div#advertiser-container #google-ads-container
{
	float: none;
}

body.cif #wrapper div#advertiser-container,
body.contributor #wrapper div#advertiser-container
{
	float: right;
	width: 460px;
}

div#advertiser-container p.ads-intro
{
	margin-bottom: 30px;
}

div#advertiser-container .advertiser-links h3
{
	border-top-width: 10px;
	border-top-style: solid;
	font-weight: bold;
	margin-bottom: 16px;
	padding-top: 3px;	
}

ul.results li h4,
div#advertiser-container ul.results li h4 
{
	font-weight: bold;
	font-family:arial,sans-serif;
}

ul.results li,
div#advertiser-container ul.results li 
{
	border-top:1px dotted;
	padding:3px 0pt 12px;
}
/* advertiser links ends */


/* new template specific styles */
.three-five-four-grid .advertiser-links
{
    border-top-width: 3px;
    border-top-style: solid;
    border-top-color: #999;
}
.three-five-four-grid .advertiser-links h3
{
    font-size: 20px;
	margin-bottom: 16px;
	padding-top: 3px;	
}

.three-five-four-grid .advertiser-links h4
{
    font-size: 12px;
}
          /* ----------  ad-links-in-content-area.css ends here ----------- */
          /* ---------- sponsored-features.css starts here ---------- */
/*

I've added the body class selector here because when component.css (which imports this file)
was added site-wide, any component with a sponsored-features class name was being made
invisible by the display: none. This usually gets turned on by ad-fed javascript, but it turns out that 
the classname is used all over the place in many ways and needs to be cleaned up before this is made 
more generic again
phaine 9/11/09

*/

.three-five-four-grid .sponsored-features
{
    display: none;
    border-top-width: 3px;
    border-top-style: solid;
    border-top-color: #999;
}

.three-five-four-grid .sponsored-features h3
{
    font-size: 20px;
    margin-bottom: 16px;
    padding-top: 3px;
}

.three-five-four-grid .sponsored-features ul.tri li.image
{
	width: 140px;
	float: left;
}

.three-five-four-grid .sponsored-features li.odd
{
	clear: left;
	margin-right: 20px;
}
          /* ----------  sponsored-features.css ends here ----------- */
          /* ----------  component.css ends here ----------- */
          /* ---------- skip-links.css starts here ---------- */
#skiplinks ul,
#skiplinks li
{
    margin: 0;
    padding: 0;
}

#skiplinks li
{
	list-style-type: none;
	display: inline;
}

#skiplinks a,
#video-settings a
{
	font-weight: bold;
	position: absolute;
	top: 30px;
	left: 8px;
	overflow: hidden;
	width: 0;
	height: 0;
	font-size: 1.2em;
	z-index: 1002;
}

/* Only show skiplinks on focus */
#skiplinks a:active, 
#skiplinks a:focus,
#video-settings a:active,
#video-settings a:focus
{ 
	position: absolute;
	width: auto;
	height: auto;
	border: 0;
	margin: 0;
	padding: 8px;
	background: #333;
	color: #fff;
	z-index: 10000;
}

#video-settings .not-cookied p
{
    position: absolute;
    left: -100em;
}
          /* ----------  skip-links.css ends here ----------- */
          /* ---------- velocity-errors.css starts here ---------- */
div#velocityerrors
{
	position: fixed;
	top: 60px;
	left: 20px;
	width: 50%;
	z-index: 4;
}

div#velocityerrors li
{
	background-color: red;
	border: 1px solid black;
	color: white;
	font-size: 14px;
	font-family: monospace;
	padding: 5px;
	margin-bottom: 10px;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
}

.show-component-name-in-preview
{
	display: none;
	position: absolute;
	z-index: 20;
	border: 5px solid #f90;
	color: #fff;
	opacity: 0.9;
	font-size: 12px;
	-moz-border-radius-bottomleft: 10px;
	-moz-border-radius-bottomright: 10px;
	background-color: #efefef;
}

.show-component-name-in-preview .show-component-name-in-preview-inner
{
	padding: 10px;
	background-color: #f90;
}

.show-component-name-in-preview span
{
	font-weight: bold;
}
          /* ----------  velocity-errors.css ends here ----------- */
          /* ---------- header.css starts here ---------- */
#header
{
    padding-top: 8px;
    background-color: #fff;
    border-color: #999;
}

div#sub-header 
{
    padding: 3px;
    border-color: #bebebe;
}

ul.user-details 
{
    background-image: url(images/icon_userinfo.gif);
    margin-bottom: 10px;
    padding-top: 2px;
    padding-right: 5px;
    padding-bottom: 3px;
    padding-left: 19px;
    width: 675px;
}

ul.user-details li 
{
    border-left-color: #bebebe;
    border-left-width: 1px;
    border-left-style: solid;
    padding-left: 5px;
    padding-right: 5px;
    display: inline;
}

ul.user-details li#larger 
{
    padding-left: 30px;
    background-image: url(images/icon_textsize.gif);
    background-position: 12px 0;
}

#topslot
{
    border-bottom-color: #bebebe;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    clear: both;
    float: left;
    min-height: 0;
    padding-bottom: 10px;
    width: 940px;
}

#topslot,
#topslot a 
{
    text-align: center;
    line-height: 0;
}

#header #guardian-logo, 
#header #observer-logo 
{
    line-height: 1;
    border: 0;
    display: block;
    float: left;
    margin-top: 10px;
    margin-bottom: 15px;
}

#search 
{
    float: right;
    padding-top: 10px;
    width: 600px;
}

#web-search 
{
    clear: right;
    position: relative;
    width: auto;
    float: right;
}

#web-search-field, 
#sitesearch-text 
{
    width: 140px;
}

#search #web-search #go-guardian 
{
    min-width: 4em;
}

#section-selector 
{
    text-align: right;
    position: absolute;
    right: 0;
    top: 8px;
    width: 300px;
}

#section-selector input
{
    min-width: 2.1em;
}
          /* ----------  header.css ends here ----------- */
          /* ---------- zone-navigation-base.css starts here ---------- */
/*
Navigation section
----------------------------------------------------------------------------------------*/
#zones-nav
{
	width: 940px;
	display: block;
	clear: both;
    line-height: 1;
	font-family: georgia, serif;
	font-weight: normal;
	font-size: 1.333em; /* 16px */
}

#zones-nav #global-nav
{
	margin-bottom: 10px;
    clear: both;
    width: 100%;
    overflow: hidden;
}

#zones-nav #global-nav ul
{
	margin: 0;
	padding: 0;
	float: left;
}

#zones-nav #global-nav ul li
{
    float: left;
    padding: 0;
    margin: 0;
    width: auto;
    display: block;
    white-space: nowrap;
}

#zones-nav #global-nav ul li a,
#zones-nav .local-nav li.heading-crumb
{
    display: block;
	padding: 4px 5px 4px 5px;
	margin: 0;
	width: auto;
}

#zones-nav #global-nav ul li a,
#zones-nav #global-nav ul a:hover
{
	text-decoration: none;
}

#zones-nav .local-nav li.heading-crumb,
#zones-nav .local-nav li.heading-crumb:hover
{
	background-color: #fff;
	color: #333;
}

/* First and Last items */
#zones-nav #global-nav ul li.first a
{
	padding-left: 5px;
}

#zones-nav #global-nav ul li.last a
{
	border: none;
}

/* TAKEN FROM color.css 
Zones Navigation
--------------------------------------------------------------------------------*/

#zones-nav #global-nav ul li a
{
	border-right: 1px solid #bebebe;
}

/* Global link colours */
#header #wrapper #zones-nav #global-nav li a
{
    color: #333;
    background-color: #fff;
}

#header #wrapper #zones-nav #global-nav li a:focus,
#header #wrapper #zones-nav #global-nav li a:active,
#header #wrapper #zones-nav #global-nav li:hover,
#header #wrapper #zones-nav #global-nav li a:hover
{
    color: #fff;
    background-color: #333;
}

#global-nav li.news a
{
	color:#d61d00;
}

#global-nav li.news a:focus,
#global-nav li.news a:active,
#global-nav li.news:hover,
#global-nav li.news a:hover
{
	color: #fff;
	background-color:#d61d00;
}
#global-nav li.sport a
{
	color:#008000;
}

#global-nav li.sport a:focus,
#global-nav li.sport a:active,
#global-nav li.sport:hover,
#global-nav li.sport a:hover
{
 	color: #fff;
	background-color:#008000;
}

#global-nav li.comment a
{
	color:#0061a6;
}

#global-nav li.comment a:focus,
#global-nav li.comment a:active,
#global-nav li.comment:hover,
#global-nav li.comment a:hover
{
	color: #fff;
	background-color:#0061a6;
}
#global-nav li.culture a
{
	color:#d1008b;
}

#global-nav li.culture a:focus,
#global-nav li.culture a:active,
#global-nav li.culture:hover,
#global-nav li.culture a:hover
{
	color: #fff;
	background-color:#d1008b;
}
#global-nav li.business a
{
	color:#3246ab;
}

#global-nav li.business a:focus,
#global-nav li.business a:active,
#global-nav li.business:hover,
#global-nav li.business a:hover
{
	color: #fff;
	background-color:#3246ab;
}

#global-nav li.money a
{
	color:#8f1ab6;
}

#global-nav li.money a:focus,
#global-nav li.money a:active,
#global-nav li.money:hover,
#global-nav li.money a:hover
{
	color: #fff;
	background-color:#8f1ab6;
}
#global-nav li.life-style a,
#global-nav li.life-and-style a
{
	color:#ad532f;
}

#global-nav li.life-style a:focus,
#global-nav li.life-style a:active,
#global-nav li.life-style:hover,
#global-nav li.life-style a:hover,
#global-nav li.life-and-style a:focus,
#global-nav li.life-and-style a:active,
#global-nav li.life-and-style:hover,
#global-nav li.life-and-style a:hover
{
	color: #fff;
	background-color:#ad532f;
}
#global-nav li.travel a
{
	color:#066ec9;
}

#global-nav li.travel a:focus,
#global-nav li.travel a:active,
#global-nav li.travel:hover,
#global-nav li.travel a:hover
{
	color: #fff;
	background-color:#066ec9;
}
#global-nav li.environment a
{
	color:#4a7801;
}

#global-nav li.environment a:focus,
#global-nav li.environment a:active,
#global-nav li.environment:hover,
#global-nav li.environment a:hover
{
	color: #fff;
	background-color:#4a7801;
}

#global-nav li a
{
	color:#333;
}

#global-nav li a:focus,
#global-nav li a:active,
#global-nav li:hover,
#global-nav li a:hover
{
	color: #fff;
	background-color:#333;
}

/* ---------------------------------------------------------------------------------- */
          /* ----------  zone-navigation-base.css ends here ----------- */
          /* ---------- content-type-mask.css starts here ---------- */
img.mask
{
	position: absolute;
	top: 0;
	left: 0;
}
          /* ----------  content-type-mask.css ends here ----------- */
          /* ---------- star-rating.css starts here ---------- */
div.rating-container,
#promo div.rating-container
{
	height: 13px;
	margin-bottom: 4px;
	width: 68px;
}

body.front div.rating-container
{
	position: relative;
	margin-bottom: 11px;
}

body.network #wrapper div.rating-container
{
	position: relative;
	top: -3px;
	margin-bottom: 7px;
}

ul#auto-trail-block div.rating-container, 
ul#main-trailblock div.rating-container 
{
	position: relative;
	top: -6px;
	margin-bottom: 2px;
}

body.three-five-four-grid .rating-container
{
	position: relative;
	top: -10px;
}

body.three-five-four-grid .slot-machine .rating-container
{
    top: 0;
}
          /* ----------  star-rating.css ends here ----------- */
          /* ---------- sublinks.css starts here ---------- */
ul.sublinks li.bullet
{
	background-image: url(images/icon_bullet.gif);
    background-position: 0 0px;
	padding-left: 17px;
	border-top: 0;
	margin: 0;
}

ul.sublinks li.audio
{
	background-image: url(images/icon_audio.gif);
}

ul.sublinks li.video
{
	background-image: url(images/icon_video.gif);
}

ul.sublinks li.interactive
{
	background-image: url(images/icon_multimedia.gif);
}

ul.sublinks li.gallery,
ul.sublinks li.audioslideshow
{
	background-image: url(images/icon_gallery.gif);
}

ul.sublinks li.factsheet
{
	background-image: url(images/icon_factsheet.gif);
}
          /* ----------  sublinks.css ends here ----------- */
          /* ---------- tabs.css starts here ---------- */
#wrapper .tabs li
{
	width: auto; /* needed a more specific selector just for IE */
}

.tabs
{
	float: right;
	margin: 0 !important;
	position: relative;
	top: 1px;
}

.pane-wrapper
{
	clear: right;
}

.tabs li
{
	border: 0 !important;
	clear: none !important;
	float: left !important;
	margin-right: 3px !important;
	margin-bottom: 0 !important;
	width: auto !important;
}

.tabs li a
{
	background-color: #999 !important;
	color: white !important;
	border-top-width: 1px;
	border-left-width: 1px;
	border-right-width: 1px;
	border-style: solid;
	border-color: #999;
	-moz-border-radius-topleft: 4px;
	-moz-border-radius-topright: 4px;
	-webkit-border-top-left-radius: 4px;
	-webkit-border-top-right-radius: 4px;
	border-radius-topleft: 4px;
	border-radius-topright: 4px;
	border-bottom: 1px solid #999;
	display: block;
	text-decoration: none;
	padding: 3px 7px;
}

.tabs li a:hover
{
	background-color: #666 !important;
	border-color: #666 !important;
	color: white;
}

.tabs li a.active
{
	background-color: white !important;
	border-bottom: 1px solid white;
	color: #333 !important;
	cursor: default;
}

.tabs li a.active:hover
{
	background-color: white !important;
	border-color: #999 !important;
	border-bottom: 1px solid white !important;
}
          /* ----------  tabs.css ends here ----------- */
          /* ---------- footer.css starts here ---------- */
#footer
{
	float: none;
	clear: both;
	width: 100%;
	border-top-width: 10px;
	border-top-style: solid;
	padding-top: 4px;
	padding-bottom: 20px;
}

ul#footer-links,
ul#copyright-links
{
    line-height: 1.3;
    background-color: #fff;
}

ul#copyright-links
{
	margin-top: 3px;
}

ul#footer-links li,
ul#copyright-links li
{
    display: inline;
   	font-size: 11px;
}
          /* ----------  footer.css ends here ----------- */
          /* ---------- dialog-box.css starts here ---------- */

#abuse-box-wrapper,
#signin-div-wrapper,
div.dialog-box-wrapper
{

 	display:block; 
 	z-index:100; 
 	background:transparent url(images/white-bg.png) top left repeat;
 	position:fixed; 
 	width:100%;
 	height: 100%;
}

#abuse-box,
div.dialog-box
{
	border: 1px solid #333;
	z-index:800;
	background-color: #fff;
	color: #000; 
	top:100px; 
	width: 288px;
	padding: 10px 10px 10px 10px;
	position:fixed; 
}

#abuse-box
{
	font-size: 0.75em;
}

body.popup-comments #abuse-box
{
	font-size: 1em;
}

body.popup-comments #abuse-box h2
{
	font-family: georgia, serif;
}

#wrapper #abuse-box
{
	font-size: 1em;
}

div.dialog-box.scrollable
{
	position: absolute;
}

#comment-box-pluck .post-comment-header
{
	float: left;
	width: 420px;
}

#comment-box-pluck .post-comment-header h1
{
	margin-bottom: 20px;
}

#comment-box-pluck #close-comment-box,
#abuse-box-wrapper #abuse-box-close,
#signin-div #login-close
{
	float: right;
	width: 80px;
	text-align: right;
}

#comment-box-pluck #close-comment-box a,
#abuse-box-wrapper #abuse-box-close a,
#login-close-link
{
	background: #fff url(images/close_button.gif) top right no-repeat;
	padding: 0 18px 0 0;
}

.comment-author
{
	clear: both;
}

.comment-author ul
{
	overflow: hidden;
}
.comment-author .comment-author-img
{
	float:left;
	width: 35px;
}

.comment-author .comment-author-name
{
	float: left; 
	width: auto;
}

.comment-author .comment-author-name a
{
	display: block;
}
.comment-author .author-role
{
	float: right;
	width: 35px;

}

#comment-box-edit,
#comment-box-progress,
#comment-close-confirmation-area,
#comment-premoderation-area,
#comment-thank-you-area
{
	clear: both;
}

#comment-box-edit,
#abuse-box-edit-area
{
	margin: 20px 0 0 0;
}

#abuse-box-edit-area
{
	border-top:1px dotted #ccc ;
}

#comment-box-edit fieldset
{
	margin: 0;
	clear: both;
}

#comment-box-edit #blockquote-button
{
	float:left;
	margin-bottom: 3px;
	width: 100%;
}
#blockquote-button input
{
	float: left;
	background-color: #ededed;
	border: 1px solid #333;
	color: #333;
	font-size: 0.915em;
	margin-right: 5px;
}

#blockquote-button p
{
	text-align: right;
	float: right;
	padding-top: 2px;
	position: relative;
}

#comment-box-pluck #comment-box-edit
{
	margin-top: 17px;
}

#comment-box-pluck #comment-box-edit #blockquote-button
{
	margin-bottom: 1px;
	width: 449px;
}

#comment-box-pluck #blockquote-button input
{
	background-color: #e8e8e8;
	border-style: outset;
	border-top-color: #fff;
	border-left-color: #fff;
	border-right-color: #666;
	border-bottom-color: #666;
	margin-right: 3px;
}

#comment-box-pluck #blockquote-button input#add-bolds
{
	font-weight: bold;
}

#comment-box-pluck #blockquote-button input#add-italics
{
	font-style: italic;
}

#comment-box-pluck #blockquote-button input#add-links
{
	color: #005689;
}

#comment-box-pluck #blockquote-button p
{
	margin-top: 0;
	padding-top: 0;
	top: 2px;
}


#comment-body,
#comment-box-progress,
#abuse-progress-area,
#abuse-description,
#pluck-loading-dialog
{
	font-size: 1em;
	font-family: arial, sans-serif;
}

#abuse-description
{
	width:100%;
}

#comment-body
{
	width: 447px;
}

#comment-box-progress,
#abuse-progress-area,
#abuse-thank-you-area,
#abuse-close-confirmation-area,
#comment-close-confirmation-area,
#abuse-pluck-error-area
{
	border-top: 1px dotted #ccc;
	border-bottom: 1px dotted #ccc;
	margin-top: 20px;
}

#comment-box-progress,
#abuse-progress-area
{
	background: url(images/pluck-loading-bar.gif) center center no-repeat;
}

#comment-box-progress p,
#abuse-progress-area p,
#abuse-thank-you-area p,
#abuse-close-confirmation-area p,
#comment-close-confirmation-area p,
#pluck-loading-dialog p
{
	margin: 70px 0 50px 0;
	text-align: center;
}

#pluck-loading-dialog
{
	border-top-width: 1px;
	border-top-style: dotted;
	padding: 70px 0;
}

#pluck-loading-dialog p
{
	padding-bottom: 10px;
	text-align: left;
	font-weight: bold;
	width: 300px;
	margin: 0 auto;
}

#pluck-loading-dialog p span
{
	height: 10px;
	display: block;
	background: url(images/pluck-loading-bar.gif) top no-repeat;
	border: 1px solid;
	overflow: hidden;
}

#comment-box-pluck #comment-box-progress p
{
	margin: 155px 0 124px;
}

#comment-box-pluck #comment-premoderation-area p
{
	margin: 122px 0 135px;
}

#comment-box-pluck #comment-close-confirmation-area p
{
	margin: 96px 0 79px;
}

#comment-box-pluck #comment-thank-you-area p
{
	margin: 137px 0 142px;
}

#comment-box-pluck #comment-pluck-error-area p
{
	margin: 113px 0 101px;
}

#abuse-box #abuse-progress-area p
{
	margin: 148px 0 116px;
}

#abuse-box #abuse-close-confirmation-area p
{
	margin: 80px 0;
}

#abuse-box #abuse-thank-you-area p
{
	margin: 104px 0 123px;
}

#submit 
{
	text-align: right;
	margin: 20px 0;
}

#comment-box-pluck #submit
{
	margin: 10px 0;
}

#comment-box-pluck #submit .msg
{
	float: left;
}

#submit #submit-comment
{
	border-top-width: 2px;
	border-bottom-width: 1px;
}

#abuse-box #abuse-box-edit-area p
{
	margin: 10px 0;
}

#abuse-box label 
{
	font-weight: bold;
}
#abuse-box label span 
{
	font-weight: normal;
}
#abuse-close-confirmation-area p input,
#comment-close-confirmation-area p input,
#abuse-thank-you-area p input
{
	display: block;
	margin: 15px auto;
}

#abuse-box
{
	width: 300px;
	height: 320px;
}

#abuse-box h2
{
	font-size: 1.3em;
	font-weight: bold;
	border: none;
	margin-top: 0;
}

#abuse-box-wrapper #abuse-email-info,
#abuse-box-wrapper #abuse-login-info
{
	float: left;
	width: 200px;
}

#abuse-box-wrapper #abuse-email-info 
{
	clear: both;
}

#abuse-box-wrapper #abuse-submit-container
{
	float: right;
	width: 96px;
	text-align: right;
}

#abuse-box-wrapper #abuse-submit
{
	margin-top: 25px;
}

body.pluck-user-profile div#user-profile div#abuse-box span
{
	display: inline;
	float: none;
	margin-right: 0;
	width: auto;
}

body.pluck-user-profile div#user-profile span#report-abuse-box-link-container
{
	position: absolute;
	right: 0;
	top: 35px;
	background-image: url(images/pluck/report-abuse.gif);
	padding-left: 18px;
	width: auto;
}

/* Inline login pop up styles */
#signin-div
{
	position: fixed;
	z-index:800;
	width: 368px;
	padding: 0;
}

#inline-login
{
	width: 368px;
	background-color: #fff;
	font-size: 12px;
	color: #333;
}

#signin-div #login-close
{
	font-weight: bold;
	padding: 10px 10px 0;
}

#inline-login form
{
	padding: 0 10px 10px;
	clear: both;
}

#inline-login h1
{
	font-size: 1em;
	font-weight: bold;
	font-family: arial, sans-serif;
	padding: 10px 0 0 10px;
	width: auto;
}

#inline-login legend
{
	text-indent: -9999px;
}

#inline-login span.row label
{
	display: block;
	margin-right: 5px;
	width: 103px;
}

#inline-login span.row
{
	width: 100%;
	overflow: hidden;
	display: block;
}

#inline-login span.row label,
#inline-login span.row input
{
	float: left;
}

#inline-login span.row input
{
	width: 200px;
}

#inline-login #inline-email-label,
#inline-login #inline-remember-label
{
	padding-bottom: 14px;
}

#inline-login #inline-remember-label
{
	margin-top: 5px;
}

#inline-login #forgot-password
{
	margin-left: 107px;
	font-size: 0.916em;
	clear: left;
}

#inline-login input#inline-remember
{
	margin-top: 6px;
	width: auto;
}

.dialog-button,
div.ReportAbuse_Comment input
{
	float: right;
	font-family: arial, sans-serif;
	font-size: 1em;
	margin-top: 20px;
	margin-left: 10px;
	padding: 1px 4px;
	cursor: pointer;
}

#inline-login input#popUpSignIn,
div.ReportAbuse_Comment input
{
	font-weight: bold;
	background-color: #005689;
	color: #fff;
	border-width: 1px;
	border-color: #005689;
}

#inline-login input#cancelSignIn
{
	border: 1px solid;
	background-color: #eee;
}
          /* ----------  dialog-box.css ends here ----------- */
          /* ---------- promo-component.css starts here ---------- */
.promo-component
{
	border-top-style: solid;
	border-top-width: 10px;
	border-top-color: #D3D3D3 !important;
	float: none !important;
	margin-bottom: 10px;
	overflow: hidden;
	padding-top: 1px;
	padding-right: 10px;
	padding-left: 10px;
	padding-bottom: 15px;
	background-color: #F3F3F3 !important;
	width: 280px !important;
}

.promo-component h3
{
	font-weight: bold !important;
	font-family: georgia, serif !important;
	font-size: 14px !important;
	margin-bottom: 0 !important;
}

.promo-component .hd,
.promo-component .bd,
#promo .component .hd /* this is here for the jobs box which is too complex to refactor at this stage */
{
	border-top: none !important;
	margin-bottom: 0 !important;
}

.promo-component .bd .first
{
    margin-bottom: 0;
}
          /* ----------  promo-component.css ends here ----------- */