/* = GETTING STARTED IN INVESTING - CSS by Cloudspotting
============================================================= */

/* = Page Layout
----------------------------------*/
.investguide {margin:0;padding:0;}
.investguide .content {margin:0 0 20px 0;padding:0;}
.investguide .content-float {float:left;margin:0 0 20px 0;padding:0;padding:0;width:464px;}

/* = General Styles
----------------------------------*/
.spacing {margin-top:15px;}

/* = Intro Page
----------------------------------*/

#content.investguide .introboxes {margin:0 0 10px 0;padding:0;background: url(../images/investguide/4boxbg.gif) left bottom no-repeat;width:726px;}
#content.investguide .introbox {float:left;margin:0 10px 5px 0;padding:0;width:174px;}
#content.investguide .introbox.last {margin:0 0 5px 0;}
#content.investguide .introbox-content {margin:0;padding:6px 13px;}
#content.investguide .introbox h2 {text-indent: -5000px;}
#content.investguide .introbox h2 a {display:block;}
#container #content.investguide .introbox ul li, #container #content.investguide .contents ul li {background: url(../images/investguide/arrowbullet.gif) no-repeat 0 3px;padding-left: 19px; margin-bottom: 10px;} 
#content.investguide .content ul li ul {margin: 7px 0 10px 0;} 

#content.investguide .content ul.toppage li {background: url(../images/investguide/uparrow.gif) no-repeat 0 4px;padding-left: 10px; margin:0;}
#content.investguide .content ul.toppage li a {text-decoration:underline;}
#content.investguide .content ul.toppage li a:hover {text-decoration:none;}

/* = Table for which account I need.
----------------------------------*/
table.account {width:100%;margin:10px 0;padding:0;border-collapse:collapse;line-height:1.5em;}
table.account th {border-bottom:1px solid #DDD;text-align:left;color:#2d5c3d;border-right:1px solid #DDD;margin:0;padding:6px 10px;background:#DDD;}
table.account th.alt {font-weight:normal;font-style:italic;}
table.account td {border-bottom:1px solid #DDD;text-align:left;color:#666;border-right:1px solid #DDD;border-left:1px solid #DDD;margin:0;padding:6px 10px;vertical-align:top;}
table.account td.first {width:65%;}
table.account td.second {width:10%;}
table.account td.third {width:25%;}

/* = Info Box
----------------------------------*/
.box-info {float:left;margin:0 0 0 20px;padding:12px 0 0 0;width:232px;background:url(../images/investguide/infobox-top.gif) left top no-repeat;font-family:arial, helvetica, sans-serif !important;color:#666;}
.box-info-content {margin:0;padding:0;background:url(../images/investguide/infoboxbg.gif) left top repeat-y;}
.box-info-bottom {margin:0;padding:0;width:232px;background:url(../images/investguide/infobox-bot.gif) left top no-repeat;height:12px;}


.box-info p {padding:0 10px 5px 10px;margin:0;}
.box-info h3 {margin:0 0 0 10px;padding:0;text-indent:-5000px;width:170px;height:25px;}
.moreinfo {background: url(../images/investguide/h3_moreinfo.gif) left top no-repeat;}

/* = Flash Display
----------------------------------*/
#investflash {margin:0 0 20px 0;padding:0;}

/* = Headers & Titles
----------------------------------*/
a.box-started {background: url(../images/investguide/h2-start.gif) left top no-repeat;width:174px;height:33px;}
a:hover.box-started {background: url(../images/investguide/h2-start-on.gif) left top no-repeat;}
a.box-acc {background: url(../images/investguide/h2-balance.gif) left top no-repeat;width:174px;height:33px;}
a:hover.box-acc {background: url(../images/investguide/h2-balance-on.gif) left top no-repeat;}
a.box-choosing {background: url(../images/investguide/h2-account.gif) left top no-repeat;width:174px;height:33px;}
a:hover.box-choosing{background: url(../images/investguide/h2-account-on.gif) left top no-repeat;}
a.box-manage {background: url(../images/investguide/h2-essentials.gif) left top no-repeat;width:174px;height:33px; text-indent: -5000px;}
a:hover.box-manage {background: url(../images/investguide/h2-essentials-on.gif) left top no-repeat;}

/* CLEARING FLOATS (http://www.positioniseverything.net/easyclearing.html) -------------------------------------------------------------------------------------------------------------- */
.clearfix:after {content: "."; clear: both; height: 0; visibility: hidden; display: block;}
.clearfix {display: inline-block;}
/* Hides from MacIE \*/           
* html .clearfix {height: 1%;}
.clearfix {	display: block;}
/* End hide from MacIE */

img.rotate {width:436px;height:324px;margin:10px 0 5px 0;}

.equalblocks h2{
	height:40px;
}