/*
	Default style settings for all public area pages (i.e. not those in /secure/admin).
	Most pages will reference this style sheet file first, followed by one other specific to the web site area.
	Many settings will be over-ridden / augmented by the "other" style sheet, e.g. personal.css
	On the whole, only colours and backgrounds are overriden, leaving the layout / positioning / size
	specification (e.g. margins, padding, font size) the same throughout the site.
*/

/*
	Always show scroll bar, even if page does not require it.
	This stops the standard layout elements (such as the heading area and menu bar)
	from appearing to jump when moving from between pages which require and
	do not require a scroll bar.
*/
html {
	overflow-y:scroll;
}
body {
	font-family: Verdana,Kalimati,sans-serif;
	font-size: small;
	margin:0;
	padding: 0;
	/* Background images are specified in other style sheets. */
	background-repeat: no-repeat;
	background-position: top center;
}
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;
}
h4 {
	font-size: 13px;
	margin: 30px 10px 10px 10px;
	padding: 5px;
	border: 1px solid #e5e5e5;
}
#userArea h4
{
	margin:10px 10px 15px 10px;
	line-height:20px;
}
img
{
	border: none;
}
input
{
	margin: 0;
	padding: 0;
}
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
				hmrc-status (actually, a paragraph)
				twitter
				facebook
				raves
			content
	clearfooter
	partners
	footer
		footerLinks
*/
#wrapper
{
	margin-left: auto;
	margin-right: auto;
	margin-top: 0;
	width: 944px;
	padding: 0;
	text-align:left;
}
#header
{
	width:100%;
	height:142px;
}
/* Software Satisfaction Award image, within header div. */
#awards
{
	margin: 10px 0 5px 0;
	float: right;
}
#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;
}
/* Set width of username input box to fit within userArea. */
#userArea #login
{
    width: 208px;
}
#userArea #password
{
    width: 150px;
}
#userArea img
{
	margin: 0 0 0 10px;
}
#userArea img.mags
{
	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;
}
#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;
}
#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;
}
/*needed to make room for footer*/
#clearfooter{
	clear:both;
}
#footer
{
	background-repeat: no-repeat;
	background-position: 50% 100%;
	bottom: 0;
	left: 0;
	margin: 5px 0 5px 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
{
	margin: 0 2em;
}
ul.default ul
{
	margin: 0 2em;
}
ul.default a
{
	text-decoration: none;
}
ul default li a:hover
{
	text-decoration: underline;
}
.divider
{
	border-top: 1px solid #e5e5e5;
	margin: 10px;
}
.productAction
{
	float:right;
}
p.incCd
{
	text-align:right;
	margin-bottom:1em;
}
p.incCd input
{
	margin-bottom:0;
}
/* "p" class used to enable links to be wrapped round block-level display items. */
.p {
	display: block;
	margin: 0 0 0 0;
}
.p ul
{
	margin: 0 0 0 16px;
	padding: 0;
}
.return
{
    float:right;
}
.recentFaq li a
{
	text-decoration:none;
}
.recentFaq li a:hover
{
	text-decoration:underline;
}
/* For superscript text */
.super
{
	vertical-align: super;
	font-size: smaller;
}

/*   Main Navigation ("ribbon" menu at top of page) */
#nav {
	width: 100%;
	height: 28px;
	margin-top: 10px;
    clear: both;
	z-index:100;
    background: #1b3747;
}
#primaryNav {
	width: 100%;
	padding-left: 0px;
}
ul#primaryNav, ul#primaryNav ul {
    display: block;
	clear: both;
    margin: 0;
}
ul#primaryNav li{
	overflow: hidden;
    margin: 0;
	list-style-image: none;
}
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;
}
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 {
	padding: 0;
}
ul#primaryNav li ul.navProducts {
	width: 875px;
}
ul#primaryNav li ul.navReviews {
	width: 775px;
}


/* These "visited" pseudo-class settings are required for IE6! Without them,
 the background and color (i.e. foreground) colours are the same. */
a.prettyBut:visited, input.prettyBut:visited
{
	background: #1b3747;
	color: #FFF;
	text-decoration: none;
}
a.prettyButAml:visited, input.prettyButAml:visited
{
	background: #333;
	color: #FFF;
	text-decoration: none;
}
a.prettyButDc:visited, input.prettyButDc:visited
{
	background: #819f97;
	color: #FFF;
	text-decoration: none;
}
a.prettyButXbrl:visited, input.prettyButXbrl:visited
{
	background: #007a87;
	color: #FFF;
	text-decoration: none;
}

/* 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, input.prettyBut
{
	font-family: Verdana,Kalimati,sans-serif;
	font-size: small;
	margin:0;
	padding: 0;
	display: block;
	padding: 5px;
	margin: 0 10px 10px 10px;
	background: #1b3747;
	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;
}


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

/* 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:160px;
	display:block;
	margin: 10px 10px 20px 10px;
	padding: 0px;
	border: 1px solid #e5e5e5;
	background: #fafdfd;
}
.infoButton p
{
    min-height:55px;
}
.infoButton p.incCd
{
    min-height:0px;
}
.infoButton .end
{
	clear:both;
}
.infoButton strong, .infoButton a
{
/*	color: #4ba7ac; */
}
.infoButton a.prettyBut
{
	color: #fff;
}
.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 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;
}

.login
{
    font-size:smaller;
}

/* only used once in /classes/HmrcStatus.php */
.statusTbl h3
{
    padding:0;
    margin:0;
}

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

/* 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
{
	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 */
.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 - see Util::makeDisplayList() */
{
	color: #999;
}
.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;
}

/* does not appear to be referenced anywhere, but looks clever in some way ??
.eula ol { counter-reset: item; padding-left: 0px; margin-top: 1ex; margin-bottom: 0ex;}
.eula li { display: block;}
.eula li:before { content: counters(item, ".") " "; counter-increment: item }
.eula ol li ol { padding-left: 20px;}
*/
@media print {
	#header, #centrecontent
	{
		border: none;
	}
	#footer
	{
		display: none;
	}
}