/* CSS Document */

/*

Style Name: The Share Centre

Description: 

Version: Beta 1.2

Last Edited: Justin Knightley, The Share Centre 03 Nov 2008

Creation Date: 10 October 2008

Author: Phil Bartholomew, AI Digital

Licence: 

*/



/*

=Palette

Green � B5D305

Crimson � C4017B

Grey � CCCCCC

Green Tint � E5EFC1

Crimson � EEE2F0

Hyperlink - unvisited - blue

Hyperlink - mouseover - blue, underline

Hyperlink - visited - blue


*/



/*

=Global Reset

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

        

* { padding:0; margin:0}

body {
	background-color: #e5e3e3;
}

.big-number {color: #eee2f0; font-size: 6em; font-weight: bold; padding-top: 0px; margin-top: 0px;}

address,caption,cite,code,dfn,em,strong,th,var {font-style:normal; font-weight:normal} 

address {font-style:normal}

abbr,acronym, img,a img,:link img,:visited img {border:0}

body {font-size: 86%; }

caption,th { text-align:left} 

fieldset {padding: .5em;}

h1, p, h3, h4, h5, h6, pre, blockquote, label, ul, ol, dl, fieldset, address  {margin:0.8em 10px}

h2 {margin:0.8em 10px -8px 10px;}

h3.page-title {margin:0.7em 10px; font-weight: normal; color: #999999;}

#right-area h3, #right-area-services h3, right-area-research h3 {color: #000000;}

#right-area h3 a, #right-area-services h3 a, right-area-research h3 a {color: #000000; text-decoration: underline;}

.no-topmargin {margin-top: -10px;}

#content-centre li {
	font-size: 86%;
}

.risk-warnings {
	margin-left: 10px;
	font-size: 86%;
	color: #454854;
	line-height: normal;
}
#content-centre-middle {
	position:relative; 
	z-index:2;
}

#content-centre #content-centre-middle li {
	font-size: 100%;
}

li  {margin:0 0 7px 0; padding:0;}

li h3  {margin:0 0 7px 0; padding:0}

li p  {margin:0; padding:0}

ul  {margin:0 0 0 27px; padding:0}

ol  {margin:0 0 0 35px; padding:0}

:link,:visited {text-decoration:#425bf6}

select {min-width: 1.5em}

select optgroup { margin-left: 2%}

select optgroup option {margin-left: 10%}

table {border-collapse:collapse; border-spacing:0; margin-bottom: 10px; font-size: 0.9em; margin-top:10px;} 

td {padding: 2px}

#sidebar div h2 {margin:0} 

img {margin: 0; padding: 0}
        

/*

=Layout------------- */



body {text-align: center; width:980px; margin:auto} /*IE hack */

#page {width: 980px; margin: 0 auto 10px auto; text-align: left; background-color: #FFFFFF;}

#masthead {width: 980px; position: relative; background: #bedb03 url(../../web/images/header-bg.jpg) repeat-x bottom; }

ul.top-menu {list-style: none;  position: absolute; right: 22px; top: 5px; margin: 0}

ul.top-menu li {display: inline; margin: 0}

ul.top-menu li a {color: black; font-size: 0.8em;}

ul.top-menu li a:hover {text-decoration: underline}

li.border {/*border-left: 1px solid black;*/ padding-left: 0px}

#header {width: 980px; height: 100px}

#price-search {
	position: absolute;
	left: 696px;
	top: 56px;
	width: 234px;
}

#site-search {position: absolute; left: 730px; top: 55px}

.submit {font-size: 0.8em}

#logo {width: 199px; height: 43px; position: relative; left: 10px; top: 45px}






/*
=Content Left home page------------- */

#content-left {width: 766px; margin-top: 0px; float: left; overflow:hidden;  }

#content {width: 980px; margin-top: 10px; float: left; overflow:hidden;  }

#home-img {width: 766px; height: 248px; border-top: 1px solid white; background: url(../../web/images/home-img.jpg) no-repeat}

#banner-content {width: 350px; padding-left: 18px}

#banner-content h3{font-size:1.3em; line-height:24px; color: #000000;}

#banner-content ul { list-style: url(../../web/images/square.jpg); line-height: 20px}

#pink-buttons {width: 400px; padding-left: 10px; margin-top: 30px}

#services {width: 370px; height:10em; background: #e5efc1; margin-top: 18px; float: left}
#services ul a {text-decoration: underline; color: #000000;}
#services ul a:hover {text-decoration: underline; color: black}

#markets {width: 248px; height:10em; background: #e5efc1; margin-top: 18px; float: left}
#markets ul a {text-decoration: underline; color: #000000;}
#markets ul a:hover {text-decoration: underline; color: black}

#investing {width: 370px; height:10em; background: #e5efc1; margin-top: 18px; float: left; margin-left: 11px; margin-right: 11px}
#investing ul a {text-decoration: underline; color: #000000;}
#investing ul a:hover {text-decoration: underline; color: black}

div.home-features ul  {list-style: none; margin:8px 0 0 22px;}

div.home-features li  {padding:0 0 0 5px;}




/*-----------centre Content main------------- */

#content-centre {width: 550px; float: right; }
#content-centre p a {color: #425bf6; text-decoration: none;}
#content-centre p a:hover {list-style: none; text-decoration: underline;}

#content-main {width: 764px; float: right; float: left; }

#content-main.min-width {width: 635px}

#content-centre table {margin-left: 10px;}
#content-centre table.contact {width: 526px; margin-left: 10px;}
#content-centre table.contact em {font-weight: bold;}
em {font-weight: bold;}

#content-centre ul {padding-bottom: 15px; list-style: none;}

#content-centre li p {font-size: 100%;}

#content-centre-left {width: 300px; float: left}

#content-centre-right {width: 240px; float: right}

.green-box-left {width: 300px; height:11em; float: left; background: #e5efc1 url(../../web/images/colour-guides.jpg) top right no-repeat; border-top: 1px solid #e5efc1;}

.green-box-left h2 {font-size: 0.9em;  font-weight: bold}

.green-box-left p {width: 160px}

.green-box-left-no-background {width: 300px; height:10em; float: left; background: #e5efc1; border-top: 1px solid #e5efc1;}

.green-box-left-no-background h2 {font-size: 0.9em;  font-weight: bold}

.green-box-left-no-background p {width: 280px; margin-bottom: -10px;}


.purple-box-left {padding-top:0; width: 300px; height: 9em; float: left;  background: #eee2f0; border-top: 1px solid #eee2f0; z-index:2; position:relative; }
.purple-box-left-button {width: 300px; float: left;  background: #eee2f0; border-top: 1px solid #eee2f0}

.purple-box-left h2 {font-size: 0.9em;  font-weight: bold}

.purple-box-left img {margin-left: 145px}

.green-box-right {width: 240px; height: 9em; float: right; background: #e5efc1; border-top: 1px solid #e5efc1; z-index:2; position:relative;}

.green-box-right h2 {font-size: 0.9em;  font-weight: bold}

.green-box-right img {margin-left: 80px}

#content-centre img {margin-bottom: 10px}

#share-dealing {width: 95%; margin-left: 10px}

#share-dealing-left {width: 40%; padding-top: 2px; float: left}

#share-dealing-right {width: 55%; float: right; font-size: 1em}

#share-dealing-right p {margin-top: 0px; margin-bottom: 7px}


#research-features {width: 176px; float: left; padding-bottom: 5px; font-size: 1em; background: #e5efc1; border-top: #e5efcl }
#research-features h3 {color: #000000; font-weight: bold;}

#research-features-pink {width: 176px; float: left; padding-bottom: 5px; font-size: 1em; background: #eee2f0; border-top: #e5efcl }

#research-features img {margin-left: 100px}

#research-features-pink img {margin-left: 100px}

#research-features.margin {margin: 0 11px 0 11px}

#research-features-pink.margin {margin: 0 11px 0 11px}

#research-features .grey-btn, #right-area .grey-btn{float: right;}

#name {float: left}

#total {float: left}

#calculated {float: left; font-size: 0.9em}




/*-----------centre Content research the markets/learn about investing------------- */

#content-centre-top {width: 550px; padding:0px; margin:0px; height:23.1em; }
#content-centre-top-learn {width: 550px; padding:0px; margin:0px; height:24em; }

#content-centre-top-research {width: 550px; padding:0px; margin:0px}

#lady-jumping {float:right}

#research-text {width: 270px; float: left}

#content-centre-middle {width: 550px;}
#content-centre-middle h3 {font-weight: bold; font-size: 100%;}
#content-centre-middle h3 a {font-weight: bold; font-size: 100%;}
#content-centre-middle a {color: #000000;}
#content-centre-middle ul a {list-style: none; text-decoration: underline; display: block;}
#content-centre-middle ul a: hover {list-style: none; text-decoration: underline;}
#content-centre-middle .list {margin-left: 12px; padding-right: 10px;}

#content-centre-bottom {width: 550px; margin-top:0px; }

#investing-text {width: 300px; float: left; height:13em;}

.purple-box {width: 270px; float: left; margin-bottom: 10px; background: #eee2f0; border-top: 1px solid #eee2f0;}

.green-box {width: 270px; float: right; margin-bottom: 10px; background: #e5efc1; border-top: 1px solid #e5efc1}

#15em { height:15em;/*Height declaration for 3 column layout*/ }

#ftse {width: 206px; height: 12em; margin:0px;}

#ftse h3 {margin:0px;}

#ftse-new {width: 206px; height: 12em; margin:0px; margin-top: 8px; padding-bottom: 4px; background: #eee2f0; border-top: 1px solid #eee2f0;/*z-index and relative position declaration used for layering above background image in ff*/}

#ftse-new h3 {margin:0px; margin-left: 31px; margin-top: 8px;}

.3colbg {background-image:url(../../web/images/3colbg.gif); background-repeat:repeat-y;  z-index:-1; margin-left:217px; display:block; position:relative; height:110px; margin-top:-110px; }

.3colbgwide {background-image:url(../../web/images/3colbgresearch.gif); background-repeat:repeat-y; background-position:top;   z-index:-1; margin-left:217px; display:block; position:relative; height:100px; margin-top:-100px;}




/*
=Right side bar------------- */

#content-right {width: 206px; margin-top: 10px; float: right}

#contact {width: 206px; background: #bedb03 url(../../web/images/contact.jpg) no-repeat; border-top: 1px solid white; height:6em}

#contact-business {width: 206px; height: 20px; background: #bedb03 url(../../web/images/contact-business.jpg) no-repeat; border-top: 1px solid white}

p.callUs {padding-top: 0px; font-size: 1.4em; text-align: left; padding-left:60px;font-weight:bold; line-height:10px;}
p.tel {padding-top: 1px; font-size: 1.4em; text-align: left; padding-left:60px;font-weight:bold; line-height:10px; color: #c4017b;}
p.line-times {padding-top: 0px; font-size: 0.65em; text-align: centre; padding-bottom:7px;}

#Callus {
	width: 206px;
	background: #BB8CC3 url(../../web/images/phone_icon.GIF) no-repeat;
	height: 32px;
}
#Callus p {
	color: #FFFFFF;
	font-weight: bold;
	font-size: 1.5em;
	margin-top: 0px;
	margin-bottom: 0px;
	padding: 4px 0px 0px 34px;}

#filler {
	background: #BB8CC3; width: 10px; height: 32px; float: left; margin-top: 0px;
}



/*--------Right side bar home page---------*/
#advert {width: 206px; height:26.4em; margin-top: 0px; padding-top: 0px; background: #bedb03 url(../../web/images/sweets.jpg) no-repeat }

.find-out-more {margin-top: 24em; margin-left: 90px}




/*--------Right side bar sub pages---------*/

#right-area-action {width: 206px; height: 8em; margin-top: 0px; margin-bottom: 10px; background: #eee2f0; border-top: 1px solid #eee2f0;}
#right-area {width: 206px; margin-top: 0px; padding-bottom: 0px; background: #eee2f0; border-top: 1px solid #eee2f0;/*z-index and relative position declaration used for layering above background image in ff*/ z-index:2; position:relative; }

#right-area h3 {font-weight: bold;}
#right-area h3 a {font-weight: normal; text-decoration: underline;}
#right-area li {list-style: none; display: block;}
#right-area .list {margin-left: 12px; padding-right: 10px;}

#right-area.green {background-color: #f6f6d5; border-top: 1px solid #f6f6d5}

#right-area-learn {width: 206px; height: 31.5em; margin-top: 0px; padding-bottom: 0px; background: #eee2f0; border-top: 1px solid #eee2f0;/*z-index and relative position declaration used for layering above background image in ff*/ z-index:2; position:relative; }

#right-area-learn h3 {font-weight: bold;}
#right-area-learn h3 a {font-weight: normal; text-decoration: underline;}
#right-area-learn li {list-style: none; display: block;}
#right-area-learn .list {margin-left: 12px; padding-right: 10px;}

#right-area-services {width: 206px; height: 29.55em; margin-top: 0px; padding-bottom: 13px; background: #eee2f0; border-top: 1px solid #eee2f0;/*z-index and relative position declaration used for layering above background image in ff*/ z-index:2; position:relative; }
#right-area-services h3 {font-weight: bold;}
#right-area-services h3 a {font-weight: normal; text-decoration: underline;}
#right-area-services li {list-style: none; display: block;}
#right-area-services .list {margin-left: 12px; padding-right: 10px;}

#right-area-research/*modified right bar id for 3 col layout*/ {width: 206px; height:23.15em;; position: relative; z-index:2 margin-top: 0px; padding-top: 4px; padding-bottom: 0px; background: #eee2f0; border-top: 1px solid #eee2f0; }

#right-area-research h3 {font-weight: bold;}
#right-area-research h3 a {font-weight: normal; text-decoration: underline;}
#right-area-research li {list-style: none; display: block;}
#right-area-research .list {margin-left: 12px; padding-right: 10px;}

#right-area ul a:hover, #right-area-research ul a:hover{text-decoration: underline; color: black}

#right-area a:hover, #right-area-research a:hover {text-decoration: underline; color: black}

#right-area-green {width: 206px; margin-top: 10px; padding-top: 28px; background: #e5efc1 url(../../web/images/top-quote.jpg) top no-repeat; border-top: 1px solid #FFF}

#bottom-quote {width: 206px; height: 30px; background: #e5efc1 url(../../web/images/bottom-quote.jpg) no-repeat; border-top: 1px solid #e5efc1}

#horz {background: #FFFFFF; height: 10px;}

#horz-pink {background: #eee2fo repeat-x; height: 2px; width: 500px;}

#right-area p, #right-area-research p {font-size: 0.9em; padding-bottom:0px; margin-bottom:20px}

#right-area ul, #right-area-research ul {margin-left: 15px}

#right-area .list2 {font-size: 86%; margin-left: 14px; padding-left: 14px; list-style: url(../../web/images/square.jpg)}

.list {
list-style: none;}

#content-centre-middle .list {
list-style: none; font-size: 86%;}

.list2  { margin-left: 14px; padding-left: 14px; list-style: url(../../web/images/square.jpg);}

.list-research {margin:0.8em 10px;}

#start-trading {width: 206px; margin-top: 10px; position: relative; border-top: 1px solid white}

#start-trading-text {float: left; margin-top: 0px}

.start-trading { margin-left: 0; margin-right: 0; font-size: 0.9em; color: #c4017b}

.start-trading-btn {position: absolute; top: 0; right: 0}

#download {width: 206px; margin-top: 10px; padding-bottom: 5px; background: #e5efc1 url(../../web/images/download.jpg) left top no-repeat; border-top: 1px solid #e5efc1}

#download p {margin-left: 55px}




/*
=Authorisation------------- */

#foldline {width: 980px; height: 17px; border-bottom: 3px solid #B5D305}

#authorisation {width: 978px; height: 45px; text-align: left; font-size: 0.9em; border:1px solid white; margin:2px 0px 2px 0px;}
#authorisation a {text-decoration: none;}
#authorisation a:hover {text-decoration: underline;}




/*
=Footer------------- */

#footer {width: 980px; position: relative; background: black; border-top: 2px solid #666666; }

#footer-left {width: 465px; float: left; margin-left: 10px; padding-top: 10px; padding-bottom: 10px;}

#footer-left-text {margin-left: 0px; width: 450px; float: left; color: #FFF; font-size: 0.8em; padding-top: 0px;}

#footer-left-text a {text-decoration: none;}

#footer-right {width: 490px; float: right}

#footer-text {position: absolute; top: 80px; left: 25px; font-size: 0.7em; color: #fff}

#footer-menu {float: right; margin-top: 13px; margin-bottom: 13px;  color: white; font-size: 0.8em}

#footer-menu ul {width: 135px; float: right; list-style: none; line-height: 10px; padding: 0; margin: 0}

#footer a {color: #FFF}

#footer span {width: 450px; float: left; margin-top: 55px; margin-left: 5px; color: #FFF; font-size: 0.8em; padding-top: 5px; }

#footer a:hover {color: white; text-decoration:underline; }

#footer .copyright {width: 200px; margin-top:15px; margin-left:140px; font-size:0.8em; font-weight:bold;}

.copy {text-align: left; font-size: 0.9em;}




/*
=Clearer div------------- */

.clear {clear: both; margin: 0; padding: 0}  
.clearfooter {clear: both; margin: 0; padding: 0; height:0}    




/*

=Menus------------- */

#mainmenu {margin-top: 21px}
        
.menu-tabs{float:left; width:100%; line-height:normal }

.menu-tabs ul{list-style-type: none; font-size:1em; font-family:Arial, Helvetica, sans-serif; margin: 0; margin-left: 10px; /*Left offset of entire tab menu relative to page*/ padding:0}

.menu-tabs li{display:inline; margin:0; padding:0}

.menu-tabs a{float: left; background:url(../../web/images/glowtab-left.gif) no-repeat left top; margin: 0; margin-right: 5px; /*spacing between each tab*/padding: 0 0 0 9px; text-decoration: none; color:white}

.menu-tabs a.lock{float: left; background:url(../../web/images/glowtab-left-lock.gif) no-repeat left top; margin: 0; margin-right: 5px; /*spacing between each tab*/padding: 0 0 0 25px; text-decoration:none; color:white}


.menu-tabs a span{float: left; display: block; background: url(../../web/images/glowtab.gif) no-repeat right top; padding: 13px 12px 8px 3px; margin-left: 5px}

/* Commented Backslash Hack hides rule from IE5-Mac \*/
.menu-tabs a span {float: none}
/* End IE5-Mac hack */

.menu-tabs a:hover span {color: white; text-decoration:underline}

.menu-tabs a.current{ /*Selected Tab style*/background-position:0 -90px; /*Shift background image up to start of 2nd tab image*/}

.menu-tabs a.current span{ /*Selected Tab style*/background-position:100% -90px; /*Shift background image up to start of 2nd tab image*/color: #000000!important}

/* this was in the menu-tabs current, now removed; font-weight: 700

/* Rollover for images - turns the tab white when you roll over. Not being used

/*.menu-tabs a:hover{ /*onMouseover style*/background-position:0% -90px; text-decoration:underline; color:black; /*Shift background image up to start of 2nd tab image}*/

/*
.menu-tabs a:hover span{ /*onMouseover style*/background-position:100% -90px; /*Shift background image up to start of 2nd tab image}*/







#sidemenu {
font-family: Arial, Helvetica, sans-serif;
font-size: 1.1em;
width: 206px;
padding: 0px;
margin: 0px;
float: left
}

#sidemenu ul {
list-style: none;
margin: 0px;
padding: 0px;
}
#sidemenu ul li {
margin: 0 0 2px 0;
background: #bedb03 url(../../web/images/side-nav-on.jpg) left no-repeat;
padding: 0;
}
#sidemenu ul li a {
/*font-size: 80%;*/
font-size:0.8em;
display: block;
padding: 8px 0px 8px 30px;
text-decoration: none;
color: #000;
width:170px;

}

#sidemenu ul li a:hover, #sidemenu ul li a:focus {
text-decoration: underline
}


#sidemenu ul li.level-one {background: #231f20}
#sidemenu ul li.level-one-up {background: #231f20 url(../../web/images/level-one-up.jpg) left no-repeat}
#sidemenu ul li.level-one-up a {color:#FFFFFF}
#sidemenu ul li.level-one-down {background: #231f20 url(../../web/images/level-one-down.jpg) left no-repeat}
#sidemenu ul li.level-one-down a {color:#FFFFFF}
#sidemenu ul li.level-one-right {background: #231f20 url(../../web/images/level-one-right.jpg) left no-repeat}
#sidemenu ul li.level-one-right a {color:#FFFFFF}


#sidemenu ul li.level-two {background: #b5d305}
#sidemenu ul li.level-two-up {background: #b5d305 url(../../web/images/level-two-up.jpg) left no-repeat}
#sidemenu ul li.level-two-down {background: #b5d305 url(../../web/images/level-two-down.jpg) left no-repeat}
#sidemenu ul li.level-two-right {background: #b5d305 url(../../web/images/level-two-right.jpg) left no-repeat}


#sidemenu ul li.level-three {background: #f1f7d1}
#sidemenu ul li.level-three-up {background: #f1f7d1 url(../../web/images/level-three-up.jpg) left no-repeat}
#sidemenu ul li.level-three-down {background: #f1f7d1 url(../../web/images/level-three-down.jpg) left no-repeat}
#sidemenu ul li.level-three-right {background: #f1f7d1 url(../../web/images/level-three-right.jpg) left no-repeat}

#sidemenu ul li.level-four {background: #e6e7e8}
#sidemenu ul li.level-four-up {background: #e6e7e8 url(../../web/images/level-four-up.jpg) left no-repeat}
#sidemenu ul li.level-four-down {background: #e6e7e8 url(../../web/images/level-four-down.jpg) left no-repeat}
#sidemenu ul li.level-four-right {background: #e6e7e8 url(../../web/images/level-four-right.jpg) left no-repeat}

#sidemenu ul li.level-five {background: #FFFFFF}
#sidemenu ul li.level-five-up {background: #FFFFFF url(../../web/images/level-five-up.jpg) left no-repeat}
#sidemenu ul li.level-five-down {background: #FFFFFF url(../../web/images/level-five-down.jpg) left no-repeat}
#sidemenu ul li.level-five-right {background: #FFFFFF url(../../web/images/level-five-right.jpg) left no-repeat}



.pink-btn-menu{ /*container that holds a row of aero buttons*/
overflow: hidden; /*See: http://www.quirksmode.org/css/clearing.html */
width: auto;
padding: 4px 0;
margin-left: 3px
}

* html .pink-btn-menu{ /*IE6 and below hack. Set explicit strip width*/
width: 100%;
}

.pink-btn-menu a.aero{ /*aero button CSS*/
background: transparent url(../../web/images/pink-btn-left.gif) no-repeat top left;
display: block;
float: left;
font: 1.0em Arial, Helvetica, Sans-Serif; /* Change 13px as desired */
font-weight: normal;
line-height: 23px; /* This value + 8px should equal height of button background (default is 31px) */
height: 31px; /* Height of button background height */
padding-left: 20px; /* Width of left menu image */
text-decoration: none;
margin-left: 0px; /*spacing between buttons*/
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=90); /*this and next two rules control opacity of buttons before hover*/
opacity: 0.9;
-moz-opacity: 0.9;
}

.pink-btn-menu a.aero:link, .pink-btn-menu a.aero:visited, .pink-btn-menu a:active{
color: white; /*button text color*/
}

.pink-btn-menu a.aero span{
background: transparent url(../../web/images/pink-btn-right.gif) no-repeat top right;
display: block;
padding: 4px 20px 6px 0; /*Set 10px here to match value of 'padding-left' value above*/
margin-right: 5px
}

.pink-btn-menu a.aero:hover{ /* Hover state CSS */
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100); /*this and next two rules control opacity of buttons during hover*/
opacity: 1;
-moz-opacity: 0.99;
}

.pink-btn-menu a.aero:hover span{ /* Hover state CSS (for text) */
text-decoration: underline
}


.better-investing{ /*container that holds a row of aero buttons*/
overflow: hidden; /*See: http://www.quirksmode.org/css/clearing.html */
width: auto;
padding: 20px 0 4px 5px;
margin-left: 3px
}

* html ..better-investing{ /*IE6 and below hack. Set explicit strip width*/
width: 100%;
}

.better-investing a.aero{ /*aero button CSS*/
background: transparent url(../../web/images/pink-btn-left.gif) no-repeat top left;
display: block;
float: right;
font: 1.0em Arial, Helvetica, Sans-Serif; /* Change 13px as desired */
font-weight: normal;
line-height: 23px; /* This value + 8px should equal height of button background (default is 31px) */
height: 31px; /* Height of button background height */
padding-left: 20px; /* Width of left menu image */
text-decoration: none;
margin-right: 7px; /*spacing between buttons*/
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=90); /*this and next two rules control opacity of buttons before hover*/
opacity: 0.9;
-moz-opacity: 0.9;
}

.better-investing a.aero:link, .better-investing a.aero:visited, .better-investing a:active{
color: white; /*button text color*/
}

.better-investing a.aero span{
background: transparent url(../../web/images/pink-btn-right.gif) no-repeat top right;
display: block;
padding: 4px 20px 6px 0; /*Set 10px here to match value of 'padding-left' value above*/
margin-right: 5px
}

.better-investing a.aero:hover{ /* Hover state CSS */
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100); /*this and next two rules control opacity of buttons during hover*/
opacity: 1;
-moz-opacity: 0.99;
}

.better-investing a.aero:hover span{ /* Hover state CSS (for text) */
text-decoration: underline
}

.pink-btn-menu-right a.aero{ /*aero button CSS*/
background: transparent url(../../web/images/pink-btn-left.gif) no-repeat top left;
display: block;
float: right;
font: 1.0em Arial, Helvetica, Sans-Serif; /* Change 13px as desired */
font-weight: normal;
line-height: 23px; /* This value + 8px should equal height of button background (default is 31px) */
height: 31px; /* Height of button background height */
padding-left: 20px; /* Width of left menu image */
text-decoration: none;
margin-right: 7px; /*spacing between buttons*/
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=90); /*this and next two rules control opacity of buttons before hover*/
opacity: 0.9;
-moz-opacity: 0.9;
}

.pink-btn-menu-right a.aero:link, .pink-btn-menu-right a.aero:visited, .pink-btn-menu-right a:active{
color: white; /*button text color*/
}

.pink-btn-menu-right a.aero span{
background: transparent url(../../web/images/pink-btn-right.gif) no-repeat top right;
display: block;
padding: 4px 20px 6px 0; /*Set 10px here to match value of 'padding-left' value above*/
margin-right: 5px
}

.pink-btn-menu-right a.aero:hover{ /* Hover state CSS */
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100); /*this and next two rules control opacity of buttons during hover*/
opacity: 1;
-moz-opacity: 0.99;
}

.pink-btn-menu-right a.aero:hover span{ /* Hover state CSS (for text) */
text-decoration: underline
}

.grey-btn-menu{ /*container that holds a row of aero buttons*/
overflow: hidden; /*See: http://www.quirksmode.org/css/clearing.html */
padding: 4px 0;
}

* html .grey-btn{ /*IE6 and below hack. Set explicit strip width*/
width: 100%;
}

.grey-btn a.aero{ /*aero button CSS*/
background: transparent url(../../web/images/grey-btn-greenbg-left.gif) no-repeat top left;
display: block;
float: left;
font: 0.8em Arial, Helvetica, sans-serif; /* Change 13px as desired */
line-height: 15px; /* This value + 8px should equal height of button background (default is 31px) */
height: 23px; /* Height of button background height */
padding-left: 20px; /* Width of left menu image */
text-decoration: none;
margin-right: 10px; /*spacing between buttons*/
margin-left: 10px;
}

.grey-btn a.aero:link, .grey-btn-menu a.aero:visited, .grey-btn-menu a:active{
color: black; /*button text color*/
}

.grey-btn a.aero span{
background: transparent url(../../web/images/grey-btn-greenbg.gif) no-repeat top right;
display: block;
padding: 4px 20px 6px 0; /*Set 20px here to match value of 'padding-left' value above*/
color: black;
}

.grey-btn a.aero:hover span{ /* Hover state CSS (for text) */
text-decoration: underline
}

.small-left-btn-menu{ /*container that holds a row of aero buttons*/
overflow: hidden; /*See: http://www.quirksmode.org/css/clearing.html */
width: auto;
padding: 4px 0 0 10px;
}

* html .small-left-btn-menu{ /*IE6 and below hack. Set explicit strip width*/
width: 100%;
}

.small-left-btn-menu a.aero{ /*aero button CSS*/
background: transparent url(../../web/images/small-btn-left.gif) no-repeat top left;
display: block;
float: left;
font: 11px Arial, Helvetica, sans-serif; /* Change 13px as desired */
line-height: 14px; /* This value + 8px should equal height of button background (default is 31px) */
height: 22px; /* Height of button background height */
padding-left: 19px; /* Width of left menu image */
text-decoration: none;
margin-right: 10px; /*spacing between buttons*/
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=90); /*this and next two rules control opacity of buttons before hover*/
opacity: 0.9;
-moz-opacity: 0.9;
}

.small-left-btn-menu a.aero:link, .small-left-btn-menu a.aero:visited, .small-left-btn-menu a:active{
color: black; /*button text color*/
}

.small-left-btn-menu a.aero span{
background: transparent url(../../web/images/small-btn-right.gif) no-repeat top right;
display: block;
padding: 4px 20px 6px 0; /*Set 10px here to match value of 'padding-left' value above*/
}

.small-left-btn-menu a.aero:hover{ /* Hover state CSS */

filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100); /*this and next two rules control opacity of buttons during hover*/
opacity: 1;
-moz-opacity: 0.99;
}

.small-left-btn-menu a.aero:hover span{ /* Hover state CSS (for text) */
text-decoration: underline
}



.fees-btn-menu{ /*container that holds a row of aero buttons*/
overflow: hidden; /*See: http://www.quirksmode.org/css/clearing.html */
width: auto;
padding-top: 9px;
padding-left: 10px;
}

* html .fees-btn-menu{ /*IE6 and below hack. Set explicit strip width*/
width: 100%;
}

.fees-btn-menu a.aero{ /*aero button CSS*/
background: transparent url(../../web/images/small-btn-left.gif) no-repeat top left;
display: block;
float: left;
font: 11px Arial, Helvetica, sans-serif; /* Change 13px as desired */
line-height: 14px; /* This value + 8px should equal height of button background (default is 31px) */
height: 22px; /* Height of button background height */
padding-left: 19px; /* Width of left menu image */
text-decoration: none;
margin-right: 10px; /*spacing between buttons*/
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=90); /*this and next two rules control opacity of buttons before hover*/
opacity: 0.9;
-moz-opacity: 0.9;
}

.fees-btn-menu a.aero:link, .fees-btn-menu a.aero:visited, .fees-btn-menu a:active{
color: black; /*button text color*/
}

.fees-btn-menu a.aero span{
background: transparent url(../../web/images/small-btn-right.gif) no-repeat top right;
display: block;
padding: 4px 20px 6px 0; /*Set 10px here to match value of 'padding-left' value above*/
}

.fees-btn-menu a.aero:hover{ /* Hover state CSS */
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100); /*this and next two rules control opacity of buttons during hover*/
opacity: 1;
-moz-opacity: 0.99;
}

.fees-btn-menu a.aero:hover span{ /* Hover state CSS (for text) */
text-decoration: underline
}




.black-btn-menu{ /*container that holds a row of aero buttons*/
overflow: hidden; /*See: http://www.quirksmode.org/css/clearing.html */
width: auto;
padding: 4px 0;
}

* html .black-btn-menu{ /*IE6 and below hack. Set explicit strip width*/
width: 100%;
}

.black-btn-menu a.aero{ /*aero button CSS*/
background: transparent url(../../web/images/black-btn-left.gif) no-repeat top left;
display: block;
float: right;
font: 0.8em Arial, Helvetica, sans-serif; /* Change 13px as desired */
line-height: 14px; /* This value + 8px should equal height of button background (default is 31px) */
height: 22px; /* Height of button background height */
padding-left: 20px; /* Width of left menu image */
text-decoration: none;
margin-right: 10px; /*spacing between buttons*/
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=90); /*this and next two rules control opacity of buttons before hover*/
opacity: 0.9;
-moz-opacity: 0.9;
}

.black-btn-menu a.aero:link, .black-btn-menu a.aero:visited, .black-btn-menu a:active{
color: white; /*button text color*/
}

.black-btn-menu a.aero span{
background: transparent url(../../web/images/black-btn-right.gif) no-repeat top right;
display: block;
margin-left: 0;
padding: 4px 10px 6px 3px; /*Set 10px here to match value of 'padding-left' value above*/
}

.black-btn-menu a.aero:hover{ /* Hover state CSS */
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100); /*this and next two rules control opacity of buttons during hover*/
opacity: 1;
-moz-opacity: 0.99;
}

.black-btn-menu a.aero:hover span{ /* Hover state CSS (for text) */
text-decoration: underline;
color: white
}


/* Font stack */


body {font-family: Arial, Helvetica, Sans-Serif}



h1, h2, h3, h4, h5, h6, p {font-family: Arial, Helvetica, Sans-Serif}

code,textarea {font-family: Arial, Helvetica, Sans-Serif}

#commentlist li .counter {font-family: Arial, Helvetica, Sans-Serif}

h1 {font-size: 1.3em}

h2 {font-size: 1.1em}

h3 {font-size: 0.9em}

h4 {font-size: 1em; font-weight: 100; margin-top: 24px}

h4 a {text-decoration: underline!important; color: #425bf6;}

h4 a:hover {color: #000}

h3 a {font-size: 1em; margin-top:40px; font-weight:100; text-decoration:underline!important}

h3 a:hover {color: #000}

p {font-size: 0.9em}

#content-centre p {font-size: 0.9em; }

pre {font-family: Arial, Helvetica, Sans-Serif}

em {font-style: strong;}

a {color: #425bf6; text-decoration: underline}

ul p a {color: #425bf6}

ul p a:hover {text-decoration: underline}

ul h3 a:hover {color: black; text-decoration: underline;}

a:hover {text-decoration: underline;}

p a {text-decoration: none;}

p a:hover {text-decoration: underline;}

p a:visited {color: #425bf6; text-decoration: none}

ul a {color: #425bf6; text-decoration: none;}

.bold {font-weight: bold}

.black-link {color: black}

.headline1 {font-weight: bold; text-decoration:underline; color: #425bf6}

a:hover.headline1  {text-decoration: none}

.headline2 {font-weight: bold; color: #c4017b}



/* re-usable classes */

.name {font-size: 0.9em; font-weight: bold; margin-left: 90px}
 
.no-margin-left {padding-left: 0; margin-left: 0}

.no-margin-left-top {padding-left: 0; margin-left: 0; margin-top: 5px}

.no-margin {margin: 0}

.margin-bottom {margin-bottom: 10px; background: url(../../web/images/lady-cheering.jpg) bottom right no-repeat}

.arial14 {font-size: 1.1em; font-weight: 100; margin-top:21px }

.arial14 a {margin-bottom:0px; padding-bottom:0px;  line-height:7px; color: #000000; text-decoration: underline; font-weight: bold; }

.arial15 {font-size: 1.1em; color: #000000; }

.arial15 a {margin-bottom:0px; padding-bottom:0px;  line-height:7px; color: #000000; text-decoration: underline; font-weight: bold; }

.bold-arial12 {font-size: 0.9em;  font-weight: bold}

#right-area .bold-arial12 {font-size: 0.9em;  font-weight: bold; margin-bottom: -10px;}

#right-area .bold-arial12 a {font-weight: bold; margin-bottom: -10px; text-decoration: underline;}

.big-text {font-size: 1.1em}

.pink {color: #c4017b; font-weight: bold; float: left; padding-top: 7px; margin-right: 75px}

.pink-text {color: #c4017b; font-weight: bold; }

.blue {color: #425bf6}

.square-indent {font-weight: bold;}

h3.square-indent {margin-bottom: -10px;}

.square-indent a {
	color: #000000;
	text-decoration: underline;
	font-weight: bold;
}

.new-h2-style {font-size: 1.1em; font-weight: bold; }

.indent {margin-left: 10px}

.table-small-font {font-size: 0.9em}

.other-charges-list {list-style: none; margin: 10px 0 0 10px}

p.sbm img {margin-top: 12px}

#input-box {float: left; padding-top: 2px}

table.lines td {border: 1px solid #D1CBD1; padding-left: 8px}

.company-search { background-image:url(../../web/images/company-search.jpg); padding:4px 15px 7px 8px; background-repeat:no-repeat; color:#000000; text-decoration:none;  font-size:0.9em; }

.site-search { background-image:url(../../web/images/site-search.jpg); padding:5px; background-repeat:no-repeat; color:#000000; text-decoration:none; padding:4px 8px 7px 8px; font-size:0.9em}

.company-search:hover, .site-search:hover {color:#000000; text-decoration:underline}

headline1 {font-weight: bold; color: blue; background-image: none}

.bg-h1 {width: 95%; height: 50px; padding: 4px 0 4px 0px; margin-left: 15px; background: #f6f6d5}

.bg-search {width: 95%; height: 50px; padding: 4px 0 4px 0px; margin-left: 15px; background: #eae8ea}

.float-left {float: left}

table.internet-testing-table {margin-left: 10px; font-size: 0.8em}

table.internet-testing-table td {padding: 4px}

table.internet-testing-table h3 {padding: 0; margin: 0}

table.live-accounts-table {font-size: 0.8em}

table.live-accounts-table td {padding: 4px}

table.research-table {font-size: 0.8em; border-top: #808284; border-bottom: #808284;}

table.research-table th {padding: 4px; font-weight: bold; background-color: #F6F9E4;}

table.research-table-grey tr {padding: 4px; background-color: #F6F9E4;}


.red-text {color: #FF0000}

.turquoise-text {color: #3bbbed} 

.form2 {padding-left: 4px}

#services ul a:hover {text-decoration: underline; color: black}

a.popup-link {color:#000000; text-decoration:none; border-bottom: 1px dashed #CCCCCC;  padding: -1px; cursor: help;}
/*  added JK 05/12/08  link was a.popup-link {color:#000000; text-decoration:none; border-bottom: 2px solid #B5D305; } */

.popup-link:hover {color: #000000; text-decoration:none; border-bottom: 1px dashed #CCCCCC;}
/*  added JK 05/12/08  link was .popup-link:hover {color: #000000; text-decoration:none; border-bottom: 2px solid #B5D305; } */

table.sector-view-table {margin-left: 10px; font-size: 0.8em; border-top: 1px solid #D1CBD1; border-bottom: 1px solid #D1CBD1;}

table.sector-view-table td {padding: 4px}
table.sector-view-table td a {text-decoration: none;}
table.sector-view-table td a:hover {text-decoration: underline;}

table.sector-view-table h3 {padding: 0; margin: 0}

/* important note about popup-link

If your tooltip description contains apostrophes ('), be sure to backslash them first, e.g. ("Yahoo\'s Site"), or an error will occur

 */

#dhtmltooltip {
position: absolute;
width: 150px;
text-align:left;
border: 2px solid #b5d300;
padding: 2px;
background: #fff;
visibility: hidden;
z-index: 100;
/*Remove below line to remove shadow. Below line should always appear last within this CSS*/
filter: progid:DXImageTransform.Microsoft.Shadow(color=gray,direction=135);
}


/*DL CSS*/
#content-centrex {width: 750px; float: left}
#content-centrestrip {width: 10px; float: left}


.toolboxHeader {width: 206px;}
.toolbox {width: 206px;}
.toolboxNest ul {list-style: none;}
#chart_time_period, #primary_chart_type, #chart_comparison_index, #chart_comparison_sector, {width: 150px;}
.textFooterInternal {width: 500px;}
h2.textHeaderUnderline {font-weight: bold; margin:0.8em 10px -8px 10px; font-size: 1.1em; text-decoration: none;}

h2.textHeaderUnderline a {color: #000000; text-decoration: underline;}

table.guides {border-collapse: collapse; border:0px; cellspacing: 0px; cellpadding: 0px;}
/*Tables*/

.firstColHolder table {font-size: 0.8em; border-top: 1px solid #D1CBD1; border-bottom: 1px solid #D1CBD1; width: 650px;}

.firstColHolder.dataRegularHeader {padding: 4px; font-weight: bold; background-color: #F6F9E4;}

.firstColHolder.dataRegularHeader a {padding: 4px; font-weight: bold; background-color: #F6F9E4;}

.firstColHolder.dataRegularUlOn {padding: 4px; background-color: #ffffff;}

.firstColHolder.dataRegularUlOff {padding: 4px; background-color: #eae8ea;}


#maginifying-img {width: 766px; height: 248px; border-top: 1px solid white; background: url(../../web/images/mag_glass_landing_pg.jpg) no-repeat}

#landing-page-banner-content {width: 500px; padding-top: 50px; margin-left: 260px;}

#fundisa-features {width: 450px; background: #e5efc1; margin-top: 10px; float: left;}
#fundisa-features ul a {text-decoration: underline; color: #000000;}
#fundisa-features ul a:hover {text-decoration: underline; color: black}
#funddisa-features p {margin-left: 10px;}

#free-shares-features {width: 300px; background: #e5efc1; margin-top: 10px; margin-left: 10px; float: left}
#free-shares-features ul a {text-decoration: underline; color: #000000;}
#free-shares-features ul a:hover {text-decoration: underline; color: black}

div.landing-features ul  {list-style: none; margin:8px 0 0 22px;}

div.landing-features li  {padding:0 0 0 5px;}

#landing-right-area-services {width: 206px; height: 32.8em; margin-top: 0px; padding-bottom: 13px; background: #eee2f0; border-top: 1px solid #eee2f0;/*z-index and relative position declaration used for layering above background image in ff*/ z-index:2; position:relative; }
#landing-right-area-services h3 {font-weight: bold;}
#landing-right-area-services h3 a {font-weight: normal; text-decoration: underline;}
#landing-right-area-services li {list-style: none; display: block;}
#landing-right-area-services .list {margin-left: 12px; padding-right: 10px;}

#right-area-landing {width: 206px; height: 240px; margin-top: 0px; padding-bottom: 0px; background: #eee2f0; border-top: 1px solid #eee2f0;/*z-index and relative position declaration used for layering above background image in ff*/ z-index:2; position:relative; }

#right-area-landing h3 {font-weight: bold;}
#right-area-landing h3 a {font-weight: normal; text-decoration: underline;}
#right-area-landing li {list-style: none; display: block;}
#right-area-landing .list {margin-left: 12px; padding-right: 10px;}

#sign-in {padding: 0 8px 8px 0}

#services .grey-btn, #investing .grey-btn, #markets .grey-btn {margin:20px 0px 0px 0px; float:right; }
#services .aero, #investing .aero, #markets .aero {float:right; }