﻿/* reason for hack not stated, so commenting out for now. (BS, 16/8/10)
commented backslash hack v2 \
html, body
{
	height:100%;
}
/* end hack */

html
{
	overflow-y:scroll;
}
body
{
	font-family: Verdana,Kalimati,sans-serif;
	font-size: small;
	margin:0;
	padding: 0;
}
h1,h2,h3,h4,h5,h6
{
	color: #1b3747;
}
h1
{
    margin:0 0 .3em 0;
}
h2, h3 {
	border-bottom: 5px solid #e5e5e5;
	font-size: 16px;
	margin: 0;
	padding: 5px 0 5px 10px;
	font-weight: normal;
}
img
{
	border:none;
}
input:focus
{
	background-color:#bef;
}
hr
{
	margin: 1em 0;
}
p
{
	margin: .75em 0;
}
dl
{
	margin: 0 0 0 10px;
	padding: 0;
}
ol li
{
	margin:0 10px 10px 0;
}
ul li
{
	list-style-image: url(../images/listMarkerPersonal.gif);
}
a
{
	text-decoration: underline;
	color: #1b3747;
}
a:visited
{
	text-decoration:underline;
	color: #1b3747;
}
a:hover
{
	text-decoration:none;
	color: #4ba7ac;
}
a:active
{
	text-decoration:none;
	color: #4ba7ac;
}

/* Main template layout is done with DIVs with particualr id values. The structure is as follows:
	wrapper
		header
			nav
		clearheader
		centrecontent
			userArea
				twitter
				facebook
				raves
			banner
			content
	clearfooter
	partners
	footer
		footerLinks
*/
#wrapper
{
	position: relative;
    margin: auto;
	width: 944px;
	padding: 0;
	text-align:left;
}
#header
{
	position:absolute;
	top: 0px;
	left: 0px;
	width:944px;
	height:154px;
}
#header h1
{
	width:230px;
	height:77px;
	margin: 10px 0 16px 18px;
}
#header h1 span
{
	display: none;
}
#header a
{
	color: #fff;
}
/* Software Satisfaction Award winner rosette images, within header div. */
#ssa08
{
	margin: -97px 0 -38px 0;
	float: right;
	display:block;
}
#ssa09
{
	margin: -97px 120px -38px 0;
	float: right;
	display:block;
}
/*needed to make room for header*/
#clearheader
{
	height:154px;
}
#centrecontent
{
	width:934px;
	margin: 0;
	padding: 0;
	height: auto;
	min-height: 500px;
	border: 5px solid #FFF;
}
#centrecontent p
{
	padding: 0 10px;
}
#userArea
{
	width:234px;
	float:left;
	margin: 0;
	padding: 0;
	border: 5px solid #e5e5e5;
	font-size:smaller;
}
#userArea h2, #userArea h3
{
	font-size: 13px;
	color: #FFF;
	background-color: #4ba7ac;
	padding: 7px 0 6px 10px;
	margin: 0;
}
#userArea h3
{
	border-top: 5px solid #e5e5e5;
}
#userArea img
{
	margin: 0 0 0 10px;
}
#userArea img.mags
{
	margin: 0;
}
#twitter
{
	width:244px;
	height:168px;
	position:relative;
	top:-5px;
	left:-5px;
	margin: 0;
	padding: 0;
	background: #FFF url(../images/twitterLinkBgrd.gif) no-repeat;
	font: 11px Georgia, Rekha, serif;
	font-style: italic;
	color: #1b3747;
	text-align: center;
}
#twitter h2
{
	float:right;
	font-size: 15px;
	color: #1b3747;
	background:none;
	border-bottom:none;
	padding:25px 12px 0 0;
	margin: 0 0 30px 100px;
}
#twitter_update_list li {
	margin:0 0 0 -40px;
	padding:5px 10px;
	/*padding:0 10px; */
	list-style-image:none;
	list-style-type:none;
}
#twitter-link {
	 display:block;
	 position: absolute;
	 top:140px;
	 left:122px;
	 margin:0;
	 padding:0;
}
#facebook
{
	position:relative;
	top:-10px;
	left:-15px;
	height:30px;
	width:244px;
}
#raves
{
	width:244px;
	height:163px;
	position:relative;
	top:5px;
	left:-5px;
	margin: 0;
	padding: 0;
	background: #FFF url(../images/ravesAni.gif) no-repeat 0 -5px;
	font: 12px Georgia, Rekha, serif;
	font-style: italic;
	color: #1b3747;
	text-align: center;
}
#banner
{
	/* display:none; */
	float:left;
	margin:0;
	padding:0;
	width: 685px;
	height: 115px;
	background: #fff;
	border-left: 5px solid #fff;
	border-bottom: 5px solid #fff;
}
#content
{
	width: 675px;
	float: right;
	font-size:small;
	color: #1b3747;
	padding: 0;
	border: 5px solid #e5e5e5;
}
#content h3
{
	border-bottom: none;
}
#content img
{
	float: left;
	margin: 0 10px 0 0;
	padding: 0;
}
#clearfooter{clear:both;}/*needed to make room for footer*/
#footer
{
	position: relative;
	bottom: 0;
	left: 0;
	margin: 5px 0 20px 0;
	padding: 8px 0 41px 0;
}
#footer a
{
	color: #fff;
	text-decoration: none;
}
#footer p
{
	font-size: x-small;
	color: #FFF;
	text-align: left;
	margin: 0 0 -12px 15px;
	padding: 0;
}
#footerLinks
{
	font-size: x-small;
	color: #FFF;
	text-align: right;
	height: 22px;
	width:934px;
}
#footerLinks ul
{
	float: right;
	margin: 0;
}
#footerLinks ul li
{
	display: block;
	float: left;
	list-style: none;
}
#footerLinks a
{
	text-transform: uppercase;
	margin: 0 20px 0 0;
}
#footerLinks a:hover
{
	text-decoration: underline;
}

/* styling for various product/sales pages. */
#borderTop
{
	clear: both;
	border-top: 5px solid #e5e5e5;
}
#borderTop img
{
	padding:12px 0 10px 11px;
}
#borderLeft
{
	border-left: 5px solid #e5e5e5;
	margin: 0 0 0 250px;
	padding: 0 0 47px 0;
}

div.showHide {
	background: #fafdfd;
	color: #1b3747;
	margin: 10px;
	padding: 0px;
	border: 1px solid #e5e5e5;
}
a.showHide {
	font-weight: bold;
	float: right;
	text-decoration: none;
	font-size: x-small;
	padding: 0;
	margin: -30px 20px 0 0;
}


ul.default, ul.logo
{
	margin: 0 2em;
}
ul.default ul, ul.logo ul
{
	margin: 0 2em;
}
ul.default a
{
	text-decoration: none;
}
ul default li a:hover
{
	text-decoration: underline;
}
ul.logo
{
	/* list-style: url(../images/list_logo.gif) disc; */
	margin-bottom: 10px;
}
div.tabbed
{
	border: 1px solid #4ba7ac;
	margin: 2px 10px 10px 10px;
}
div.tabbed p, div.tabbed h3
{
	margin: 10px;
}
.divider
{
	border-top: 1px solid #e5e5e5;
	margin: 10px;
}
.newButtons
{
	width: 663px;
}
input
{
	margin: 0;
	padding: 0;
}
.productAction
{
	float:right;
}
p.incCd
{
	text-align:right;
	margin-bottom:1em;
}
p.incCd input
{
	margin-bottom:0;
}
.p {
	display: block;
	margin: 0 0 0 0;
}
.p ul
{
	margin: 0 0 0 16px;
	padding: 0;
}
.divider
{
	border-top: 1px solid #e5e5e5;
	margin: 10px;
}
.topa
{
	display: block;
	margin: 10px 0;
}
.faqAnswers
{
	margin:1em 10%;
}
.faqAnswers .return
{
    float:right;
}
.faqAnswers strong
{
    color:Navy;
}
.recentFaq li a
{
	text-decoration:none;
}
.recentFaq li a:hover
{
	text-decoration:underline;
}
.items
{
    width:656px;
	border-collapse:collapse;
	margin: 0 10px 10px 10px;
}
.items td, .items th
{
    border: solid 1px #888;
    padding: 0.5em;
}
.items th
{
    background-color:#eee;
}
.items td img
{
	margin:0;
	padding:0;
}
/* For superscript text */
.super
{
	vertical-align: super;
	font-size: smaller;
}
.center
{
	text-align:center;
}
.money, .number {
	text-align:right !important;
}
.numberRemain
{
	text-align:right;
	font-weight:bold;
}
.negative
{
    font-style:italic;
}

/*   Main Navigation ("ribbon" menu at top of page) */
#nav {
    margin: 0 0 0 -40px;
	padding: 0;
    clear: both;
	z-index:100;
}
ul#primaryNav,
ul#primaryNav ul {
    display: block;
	clear: both;
    margin: 0 5px 0 0;
}
ul#primaryNav li{
	overflow: hidden;
    margin: 0;
}
ul#primaryNav ul {
    position: absolute;
    left: -999em;
}
ul#primaryNav li:hover ul,
ul#primaryNav li.current ul{
    left: auto;
	text-decoration: none;
}
ul#primaryNav li {
    float: left;
    background: #1b3747;
}
ul#primaryNav ul li {
    display: block;
    float: left;
    background: #4ba7ac;
	font-size: smaller;
}
ul#primaryNav li a {
    display: block;
    padding: 5px 10px 5px 18px;
    min-height:15px;
    color: #fff;
    text-decoration: none;
}
ul#primaryNav li a:hover {
    text-decoration: underline;
	color: #4ba7ac;
}
ul#primaryNav ul li a:hover {
    text-decoration: underline;
	color: #1b3747;
}

ul#primaryNav li ul {
    margin: 0 -40px 0 0;
    padding: 0 40px 0 0;
}


/* Pretty button links. Often over-ridden by product-type style sheets.
	Product-type-related class names are needed in order to have each product-type
	colour scheme within some pages, e.g. contact.php or the web-service links in
	the left-side menu. */
a.prettyBut, a.prettyButAml, a.prettyButDc, a.prettyButXbrl, a.prettyButTutor, input.prettyBut
{
	font-family: Verdana,Kalimati,sans-serif;
	font-size: small;
	margin:0;
	padding: 0;
	display: block;
	background: #1b3747;
	padding: 5px;
	margin: 0 10px 10px 10px;
	color: #FFF;
	text-decoration: none;
	text-align:center;
	border: 5px solid #e5e5e5;
	cursor:pointer;
}
a.prettyBut:hover, input.prettyBut:hover
{
	background: #4ba7ac;
	color: #FFF;
}
a.prettyButAml
{
	background: #333;
}
a.prettyButAml:hover
{
	background: #ff5100;
	color: #FFF;
}
a.prettyButDc
{
	background: #819f97;
}
a.prettyButDc:hover
{
	background: #937490;
	color: #FFF;
}
a.prettyButXbrl
{
	background: #007a87;
}
a.prettyButXbrl:hover
{
	background: #7ab800;
	color: #FFF;
}
a.prettyButTutor
{
	background: #216bc4;
}
a.prettyButTutor:hover
{
	background: #2f99f9;
	color: #FFF;
}

/* Style for list of sale items within order. Only used in /secure/user/order.php
	and order_info.php */
table.itemsReport {
	width:656px;
	border-collapse:collapse;
	margin: 0 10px 10px 10px;
}
table.itemsReport thead th{
	color:#fff;
	background:#4ba7ac;
}
table.itemsReport thead th, table.itemsReport td{
    border: solid 1px #1b3747;
}
table.itemsReport tfoot td.empty{
	border:none;
}
table.itemsReport th, table.itemsReport td{
    padding:0.5em;
}
table.itemsReport tbody th{
	text-align:left;
	font-size:smaller;
}
table.itemsReport tfoot th{
	text-align:right;
}

/* For tables within FORM elements. Extensively ued wherever user input is required
	and a tabular layout is used. */
table.form .descr, table.cool .descr
{
	text-align:right;
	padding-right:.5em;
	font-weight: bold;
}
table.form .profLeft
{
    width:11em;
}
table.form tbody th
{
    text-transform:uppercase;
}

/* Only used in /support/20nn/hmrc_notes.php (3 files). Files also contain DIV tags with "tabbed" class,
	but there are no style settings for this.  */
ul.tabbed
{
	list-style-type: none;
	margin: 2em 0 0 .5em;
	clear:both;
}
ul.tabbed li
{
	display:inline;
}
ul.tabbed a
{
	border:1px solid #4ba7ac;
	padding:2px 5px;
	font-weight:bold;
	text-decoration:none;
	background-color: #ddd;
}
ul.tabbed a:hover
{
	background-color: #eee;
}
ul.tabbed li.selected a
{
	border-bottom-color:#e8e9df;
	background-color: transparent;
	color: #4ba7ac;
}

/* infoButton style settings - mostly used in products area.
	settings for "infoButton strong" and infoButton.min-height are over-ridden in product-type style sheets. */
.infoButton
{
    min-height:145px;
	display:block;
	margin: 10px 10px 20px 10px;
	padding: 0px;
	border: 1px solid #e5e5e5;
	background: #fafdfd;
}
.infoButton .end
{
	clear:both;
}
a.infoButton, a.infoButton:hover
{
	text-decoration:none;
}
.infoButton strong
{
	color: #4ba7ac;
	margin-top: 10px;
}
.infoButton img
{
    position: relative;
	top: 14px;
	left: 28px;
}
.infoButton p, .infoButton ul {
	margin-left: 135px;
}
.infoButton h5 {
	margin: 10px 0 0 145px;
}
.infoButton span.descr, a.infoButton span.descr
{
    display: block;
    margin: 0 0 0 115px;
    padding: 20px 0 0 0;
}
.infoButton .productAction
{
	float:right;
}

/* "COOL" tables.
	"cool descr" settings inlcuded with "form descr" elsewhere. */
table.cool
{
	width:656px;
	border-collapse:collapse;
	margin: 0 10px 10px 10px;
}
table.cool tbody td
{
	vertical-align:top;
}
table.cool tbody tr.odd
{
	background-color:#fff;
}
table.cool tbody tr.even
{
	background-color:#fef;
}
table.cool thead th
{
	background-color:#ddd;
}
table.cool th, table.cool td{
    padding:2px;
}
/* only used in /secure/user/order_info.php in order to make headings within
	a table look the same as h4 headings outside a table. */
table.cool .h4 {
    background: #fafdfd;
	color: #4ba7ac;
	margin: 10px;
	padding: 5px;
	border: 1px solid #e5e5e5;
	font-size: 13px;
}
table.cool tr.pager td
{
	border:none;
}
table.cool tr.pager td
{
	text-align:center;
}
table.cool tbody th{
	text-align:left;
	font-size:smaller;
}
table.cool th.subtitle
{
	text-align:center;
}
table.cool tbody.tfoot th{
	text-align:center;
	font-size:100%;
}

/* Used in /privacy/eual.php and /privacy/tnc.php */
.lower-roman
{
	list-style-type:lower-roman;
}
/* Used in /support/2009/releasenotes.php */
ul.indent
{
	margin: 0 2em;
	padding: 0 2em 0 4em;
}
/* Case studies and Reviews and Press. */
.quote_img
{
	float: left;
	border: 1px solid #e5e5e5;
	padding: 2px;
	margin: 0 10px 0 0;
}
.quote
{
	font-weight: bold;
	color: #4ba7ac;
	/* text-align:right; */
}

/* used primarily in /secure/user/profile.php, and also in /secure/user/aml/check.php (once) */
.profHeading
{
    text-transform:uppercase;
    font-weight:bold;
    margin-bottom:0;
}
.profDesc
{
    margin-top:0;
    font-size:smaller;
}

/* only used once in /classes/Product.php */
.login
{
    font-size:smaller;
}

/* only used once in /classes/HmrcStatus.php */
.statusTbl h3
{
    padding:0;
    margin:0;
}
#hmrc-status
{
	font-size: 11px /* Georgia */;
    text-align:center;
    margin:1em 0;
}
#hmrc-status a
{
    text-decoration:none;
    font-size:100%;
}
#hmrc-status img
{
    vertical-align:middle;
    margin-left:1em;
}
#hmrc-status span
{
    text-decoration:underline;
}

/* only used once in /products/2007/cgt_info.php */
.cgtInfo
{
    border:solid 1px #4ba7ac;
}
.cgtInfo th
{
    border:solid 1px #4ba7ac;
    padding:.5em 0 .5em 1em;
}
.cgtInfo td
{
    padding:0 1em .8em 1em;
    vertical-align:top;
    border:solid 1px #4ba7ac;
}
.cgtInfo ul
{
    margin:0 1em;
}
.cgtInfo thead th
{
    text-align:center;
    padding: .5em 0 .5em 0;
}

/* only used in /secure/user/common.php */
.license-key span
{
	margin:0 .14em;
}

/* only used in /secure/user/downloadBeta.php */
.betaLinks
{
  float:right;
	border: 1px solid #4ba7ac;
	width:180px
}
.betaLinks p
{
    font-size:smaller;
    text-align:center;
}
.betaLinks h3
{
    text-align:center;
    padding-top:.4em;
    margin-bottom:.2em;
}

/* HMRC Notes pages (/support/20nn/hmrc_notes.php) */
.notesList li
{
	list-style:none;
	margin:.5em 0;
	font-weight:bold;
}
.notesList li ul li
{
	font-weight:normal;
}
.notesIndex
{
	margin-left:auto;
	margin-right:auto;
	width: 45em;
	border:solid 1px #4ba7ac;
	margin-bottom:3em;
}
.notesIndex td
{
	padding:0 .5em;
}

/* PARTNERS/RECOMMENDATIONS */
#partners
{
	position: relative;
	height: 70px;
	width:944px;
	margin: 20px 0;
	padding-top: 20px;
	border-top: 1px solid #e5e5e5;
}

/* New 2009 FAQ styles */
#recent1, #recent2, #recent3, #recent4, #recent5, #taxRelated, #technical, #filing, #troubleshooting
{
	background:none;
}
#taxRelated li a, #technical li a, #filing li a, #troubleshooting li a
{
	text-decoration:none;
}
#taxRelated li a:hover, #technical li a:hover, #filing li a:hover, #troubleshooting li a:hover
{
	text-decoration:underline;
}

/* MISC */
.orderNo /* only used once to highlight cheque ID in /secure/user/payment_cheque.php */
{
	color: #4ba7ac;
	font-size: large;
}
.important /* used in a variety of files (7 at the last count) */
{
	color: #f00;
	font-size: 110%;
}
option.disabled /* potentially used whenever a SELECT list is created - function makeDisplayList() in /include/functions.php. */
{
	color: #999;
}
.notify /* only used in /secure/user/profile.php (although also in admin area, where this style sheet is not used - see admin.css) */
{
	color: #0b0;
}
.inactive /* only used in /secure/user/my_products.php (and in admin area, where this style sheet is not used - see admin.css) */
{
	color: #999;
	font-size:smaller;
}
.reqd /* used in a variety of files (7 at the last count , excluding those in admin area) */
{
    background-color:#fff8dc;
}
.validError /* only referenced in FormErrors class, but is widely used. */
{
    background-color:#ffd0d0;
    border:dotted 1px red;
}
.error /* used in a variety of files */
{
	color: red;
}
tbody.space /* only used in /secure/user/profile.php and /secure/user/aml/check.php */
{
	height:1em;
}
tbody.space hr
{
    color:#4ba7ac;
}


@media print {
	#outer, #header, #centrecontent, #footerBanner
	{
		border: none;
	}
	#footer, #statusBar, #left
	{
		display: none;
	}
	#outer
	{
		margin:0;
	}
}