﻿/************* What's New box **********/

.boxtitle{
	background: #144371 url(tab-left.png) no-repeat top left;
	color: #fff;
	display: block;
	text-align: center;
	font-size: 1.2em;
	width: 130px;
}
.boxtitle span{
	background: #144371 url(tab-right.png) no-repeat top right;
	margin-left: 10px;
	display: block;
	padding: 5px 10px 5px 0;
	width: 100%;
	height: 100%;
}
.box{
	border: 1px solid #144371;
	padding: 5px;
}


/* News scroller styles */

#newsticker{
	overflow: hidden; margin-top: 10px; position: relative;
	width: 775px; height: 25px; background-color: #e1e1e1;
}
#newsticker h3{
	background-color: #003466; color: #fff; margin: 0; padding: 0; z-index: 1;
	position: absolute; left: 0; top: 0; width: 70px; height: auto; font-size: 1em; padding: 5px 10px;
}
#newsticker ul{
	margin: 0; padding: 0; 
	position: absolute; top: 0; left: 90px; width: 1050px; 
}
#newsticker li{
	margin: 5px 0; padding: 0; list-style: none; float: left; width: 450px;
}
#newsticker li a{

}
#newsticker li a span{
	color: #003466; margin-right: 5px; 
}


/* Carousel styles */

#content #carousel{
    width: 790px; overflow: hidden;
    margin: 10px 0; height: 615px;
    position: relative;
	border-top: 5px solid #e5e5e5;
	border-bottom: 5px solid #e5e5e5;
}
#content #carousel ul{
    position: absolute; left: 0; top: 5px;
    width: 3000px; height: 600px;
    list-style: none; margin: 0; padding: 0;
    list-style-type: none;
}
#content #carousel li{
    list-style: none; 
    margin: 0; padding: 0;
    width: 395px;
    float: left; min-height: 600px;
}
#content #carousel .photoStoryWrapper{
    width: 335px;
    margin: 0 0 0 30px;
}

#content #carousel .slidenav{
    position: absolute;
    left: 0; top: 0; width: 20px; height: 100%;
    z-index: 100;
}
#content #carousel .slidenav.next{
    left: auto; right: 0;
}
#content #carousel .slidenav a{
    display: block;
    padding: 5px;
    width: 10px; height: 100%;
    background: #e5e5e5 url(blueArrowLeft.gif) no-repeat center;
}
#content #carousel .next a{
    background: #e5e5e5 url(blueArrowRight.gif) no-repeat center;
}
#content #carousel .slidenav a:hover{
    background-color: #ccc;
}
#content #carousel .slidenav.disabled a, #content #carousel .slidenav.disabled  a:hover{
    opacity:0.25; filter:alpha(opacity=25); -moz-opacity:0.25; 
	cursor: default; background-color: #e5e5e5 ;
}


/* Library table */

.library{
    margin: 10px 0;
}
.library h3{
    border-top: 1px solid #fff; padding: 5px 10px 5px 15px; margin: 0;
    font-size: 1.2em; 
	background: #759CC2 url(arrow-white-right.gif) no-repeat 2px 9px; color: #fff;
}
.library h3.over{
    cursor: pointer; color: #003466;
}
.library h3.open{
    cursor: pointer; border-top-color: #ccc; color: #fff;
	background: #003466 url(arrow-white.gif) no-repeat 2px 9px;	
}
.library table{
    width: 100%;
}
.library table caption{
    text-align: left;
    background: #003466;
    color: #fff;
    padding: 0 5px 10px 5px; 
}
.library div{
     border: 1px solid #003466; display: none;
}
.library td, .library th{
    padding: 5px;
    border-bottom: 1px solid #e5e5e5;
    text-align: center;
}
.library th{
    background: #759CC2;
    font-weight: bold;
    vertical-align: bottom;
}
.library td.subhead{
    background-color: #003466; font-size: 1.4em; color: #fff;
    font-weight: bold;
}
.library td.alt{
    background-color: #f5f5f5;
}
.library td.first, .library th.first{
    text-align: left; width: 25%;
}
#content .library td img{
    padding: 0; margin: 0;
}
.rounded{
    padding: 4px;
    background-color: #ccc;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    position: relative;
    overflow: hidden;
    height: 100%;
}
.rounded td, .rounded th{
    text-align: left;
    font-size: 0.9em;
}
.rounded th{
    background: transparent;
}
.rounded td{
    vertical-align: top;
    background: #fff;
}
.rounded h3, .rounded h3.open {
    padding: 5px;
    background-image: none;
}
a.pdf{
    background: url(http://www.fandc.com/FundNets_FileLibrary/Image/icons//page.png) no-repeat left top;
    padding: 3px 0 3px 20px;
    display: block;
}
/*#contentcontainer{
    display: none;
}*/

/************* Tabs **********/

#tabs{
	height: 40px; margin: -10px; margin-bottom: 20px; width: 810px; overflow-y: hidden;
	background-color: transparent;
}
#tabs ul{
	margin: 0 10px; padding: 0; list-style: none;
	border-bottom: 3px solid #144371; overflow: hidden;
	height: auto !important; height: 31px;
}
#tabs li{
	background: #759CC2 url(tab-left.png) no-repeat top left;
	margin: 0 1px 0 0; padding: 0; 
	float: left; list-style: none;
}
#tabs a{
	margin-left: 10px;
	display: block;
	background: #759CC2 url(tab-right.png) no-repeat top right;
	color: #fff;
	padding: 10px 15px 7px 5px;
	width: 120px;
	text-align: center;
}
#tabs .tabOn{
	background: #144371 url(tab-left.png) no-repeat top left;
}
#tabs .tabOn a, #tabs .tabOn a:hover{
	color: #fff; cursor: default;
	background-color: #144371;
	text-decoration: none;
}

/* Breadcrumbs */
#breadcrumbs{
    margin: -20px 10px 0 20px;
    overflow: hidden;
    font-size: 0.8em;
    height: 20px;
    width: 470px;
    color: #fff;
}
#breadcrumbs a{
    color: #fff;
    font-weight: normal;
}
#social-bookmarks{
    position: absolute;
    left: 545px;
    margin-top: -20px;
    z-index: 1000;
}

/* Column layout */

.column{
    float: left;
    background: #CCC;
    margin: 0;
    padding: 0px;
    border: 0px;
    height: 420px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    behavior: url(http://www.fandc.com/FundNets_FileLibrary/File/Templates/PIE.htc);
    position: relative;
    text-align: center;
}
.column h3{
    margin: 0;
    padding: 5px 10px;
    color: #fff;
    font-size: 1.2em;
    -webkit-border-radius: 4px 4px 0 0;
    -moz-border-radius: 4px 4px 0 0;
    border-radius: 4px 4px 0 0;
    behavior: url(http://www.fandc.com/FundNets_FileLibrary/File/Templates/PIE.htc);
    position: relative;
}
.column h3 a{
    color: #fff;
}
.column p{
    padding: 10px;
    text-align: left;
    margin: 0;
}
.column .more{
    position: absolute;
    bottom: 20px;
    left: 0;
    width: 100%;
}
.column .pic{
    overflow: hidden;
    height: 150px;
    text-align: right;
}
.column .pic img{
    width: auto !important;
    width: 100%;
    height: auto !important;
    height: 100%;
    min-width: 100%;
    min-height: 150px;
    float: right;
}
.column a.button{
    height: auto;
    max-width: 120px;
    text-align: center;
    padding: 5px 10px;
    color: #fff;
    border: 0px;
    font-size: 1em;
    position: relative;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    -webkit-box-shadow: #666 0px 0px 3px;
    -moz-box-shadow: #666 0px 0px 3px;
    box-shadow: #666 0px 0px 3px;
    behavior: url(http://www.fandc.com/FundNets_FileLibrary/File/Templates/PIE.htc);
}
.column a.button:hover{
    cursor: pointer;
    border: 2px solid #fff;
    padding: 3px 8px;
    text-decoration: none;
} 
.column br{
    height: 10px;
}
.span-4{
    width: 150px;
    margin-right: 10px;
}
.aside{
    width: 140px;
    float: left;
}
#content .aside img{
    padding: 0;
    margin: 0 0 10px 0;
}


/************* Savings calculator **********/

#iCalc{
    display: block;
    padding: 10px;
    margin: 20px auto;
    background: #f0f0f0;
    width: 75%;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    behavior: url(http://www.fandc.com/FundNets_FileLibrary/File/Templates/PIE.htc);
}
#iCalc td{
    font-size: 1.2em;
    padding: 5px;
    font-weight: bold;
}
#iCalc span.note{
    font-weight: normal;
    font-size: 0.75em;
}
#iCalc .prefix{
    width: 10px;
    display: block;
    float: left;
}
#iCalc button{
    width: 120px;
    text-align: center;
    padding: 5px 10px;
    background: #006F3D;
    color: #fff;
    border: 0px;
    font-size: 1em;
    position: relative;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    -webkit-box-shadow: #666 0px 0px 3px;
    -moz-box-shadow: #666 0px 0px 3px;
    box-shadow: #666 0px 0px 3px;
    behavior: url(http://www.fandc.com/FundNets_FileLibrary/File/Templates/PIE.htc);
}

#iCalc button:hover{
    cursor: pointer;
    border: 2px solid #fff;
    padding: 3px 8px;
    text-decoration: none;
}

/* Colors */
.bg-green{
    background: #006F3D !important;
    color: #fff;
}
.bg-blue{
    background: #2B6BA1 !important;
    color: #fff;
}
.bg-light{
    background: #A6A8CB !important;
    color: #fff;
}
.bg-purple{
    background: #553C81 !important;
    color: #fff;
}
.bg-dark{
    background: #003164 !important;
    color: #fff;
}
.bg-orange{
    background: #C05023 !important;
    color: #fff;
}
.bg-red{
    background: #B23A18 !important;
    color: #fff;
}
.bg-gray{
    background: #666 !important;
    color: #fff;
}

/************* How to invest **********/

#how-wrapper{
    position: relative;
    width: 775px;
    overflow: hidden;
    overflow-: visible;
}
#how{
    width: 10000px;
}
#how-panel{
    position: absolute;
    left: 0;
    top: 0;
    height: 25px;
    width: 773px;
    padding: 2px;
    background: #f0f0f0;
    border: 1px solid #ccc;
    overflow: hidden;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    behavior: url(http://www.fandc.com/FundNets_FileLibrary/File/Templates/PIE.htc);
    display: none;
}
#how-panel a{
    display: block;
    padding: 5px;
    float: left;
    position: relative;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    behavior: url(http://www.fandc.com/FundNets_FileLibrary/File/Templates/PIE.htc);
}
#how-panel a:hover{
    background-color: #fff;
    text-decoration: none;
}
#how-panel a[disabled], #how-panel a[disabled]:hover{
    color: #ccc;
    cursor: default;
    background: none;
}
#how h2{
    color: #999;
    font-size: 2em;
}
#how button{
    margin-top: 10px;
    padding: 5px 30px;
    background: #C72F2C;
    color: #fff;
    border: 0px;
    font-size: 1.2em;
    position: relative;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    -webkit-box-shadow: #666 0px 0px 3px;
    -moz-box-shadow: #666 0px 0px 3px;
    box-shadow: #666 0px 0px 3px;
    behavior: url(http://www.fandc.com/FundNets_FileLibrary/File/Templates/PIE.htc);
}
#how button:hover{
    cursor: pointer;
    border: 2px solid #fff;
    padding: 3px 28px;
}
#how-1 button{
    font-size: 2em;
    height: 40px; 
}
#how-footer{
    clear: both;
    width: 100%;
}
#how-footer button{
    float: right;
    display: none;
}
#how-page{
    position: absolute;
    right: 4px;
    top: 4px;
}
#how-page ul{
    margin: 0;
    padding: 0;
    list-style-type: none;
}
#how-page li{
    font-size: 0.8em;
    float: left;
    margin: 0 1px;
    padding: 2px 5px;
    list-style-type: none;
    border: 1px solid #ccc;
    color: #999;
}
#how-page li.on{
    background: #003164;
    border: 1px solid #003164;
    color: #fff;
}
#how-page a{
    display: block;
    float: left;
    padding: 2px;
    display: none;
}
.how-step{
    display: none;
    padding-top: 40px;
    width: 775px;
    float: left;
}
#how-trustlist div{
    display: none;
}
#how-1{
    display: block;
    padding-top: 0;
}
#how .box{
    width: 183px;
    margin: 10px 10px 10px 0;
    float: left;
    background: #CCC;
    padding: 0px;
    border: 0px;
    text-align: center;
    min-height: 200px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    behavior: url(http://www.fandc.com/FundNets_FileLibrary/File/Templates/PIE.htc);
    position: relative;
}
#how .box.span-3{
    width: 245px;
}
#how .box.span-2{
    width: 370px;
}
#how .box h3{
    position: relative;
    margin: 0;
    padding: 10px;
    background: #666;
    color: #fff;
    font-size: 1.3em;
    -webkit-border-radius: 4px 4px 0 0;
    -moz-border-radius: 4px 4px 0 0;
    border-radius: 4px 4px 0 0;
    behavior: url(http://www.fandc.com/FundNets_FileLibrary/File/Templates/PIE.htc);
}
#how .box p{
    text-align: left;
    padding: 10px;
    margin: 0;
}
#how-1 .box{
    height: 250px;
}
#how-1 .box p{
    text-align: center;
    padding: 0 10px 10px 10px;
}
#how .box span{
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 10;
    background: #003164;
    color: #fff;
    font-size: 1em;
    padding: 5px 10px;
    -webkit-border-radius: 4px 0 0 0;
    -moz-border-radius: 4px 0 0 0;
    border-radius: 4px 0 0 0;
    behavior: url(http://www.fandc.com/FundNets_FileLibrary/File/Templates/PIE.htc);
}
#how .box button{
    position: relative;
    margin: 10px 0;   
}
#how .box ul{
    padding: 0;
    margin: 0;
    list-style: none;
}
#how .box li{
    list-style: none;
    padding: 10px;
    margin: 0;
    border-bottom: 1px solid #fff;
}
#how table{
    width: 240px;
    margin-bottom: 20px;
    background: #666;
}
#how table td{
    border-bottom: 1px solid #fff;
    color: #fff;
    padding: 5px;
}
#how .left{
    width: 500px;
    float: left;
    position: relative;
    margin-bottom: 20px;
}
#how .right{
    float: right;
    width: 230px;
    position: relative;
    margin-right: 10px;
}
#how .info{
    width: 200px;
    background: #6782B1;
    padding: 20px;
    text-align: center;
    color: #fff;
    border: 2px solid #A6B0D4;
    position: relative;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    -webkit-box-shadow: #666 0px 0px 3px;
    -moz-box-shadow: #666 0px 0px 3px;
    box-shadow: #666 0px 0px 3px;
    behavior: url(http://www.fandc.com/FundNets_FileLibrary/File/Templates/PIE.htc);
}
#how .info a{
    display: block;
    padding: 5px 30px;
    background: #053478;
    color: #fff;
    border: 0px;
    font-size: 1.2em;
    position: relative;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    -webkit-box-shadow: #666 0px 0px 3px;
    -moz-box-shadow: #666 0px 0px 3px;
    box-shadow: #666 0px 0px 3px;
    behavior: url(http://www.fandc.com/FundNets_FileLibrary/File/Templates/PIE.htc);
}

#how #trustlist div{
    padding: 10px;
    margin: 10px 0;
    overflow: hidden;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    behavior: url(http://www.fandc.com/FundNets_FileLibrary/File/Templates/PIE.htc);
    position: relative;
    background: #f0f0f0;
    display: none;
    clear: both;
}
#how #trustlist div.how-shortlisted{
    border: 2px solid #C05023;
    padding: 9px;
}
#how #trustlist div h3{
    margin: 0 0 10px 0;
    padding: 0;
}
#how #trustlist div p{
    margin: 0;
    padding: 0;
}
#how #trustlist div a{
    display: block;
    float: left;
    background: #006F3D;
    color: #fff; 
    padding: 5px;
    margin: 10px 5px 0 0;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    behavior: url(http://www.fandc.com/FundNets_FileLibrary/File/Templates/PIE.htc);
    position: relative;
}
#how #trustlist div.how-shortlisted a.how-add{
    background: #C05023;
}

#how .box .green{
    background: #006F3D;
    color: #fff;
}
#how .box .blue{
    background: #2B6BA1;
    color: #fff;
}
#how .box .light{
    background: #A6A8CB;
    color: #fff;
}
#how .box .purple{
    background: #553C81;
    color: #fff;
}
#how .box .dark{
    background: #003164;
    color: #fff;
}
#how .box .orange{
    background: #C05023;
    color: #fff;
}
#how .box .gray{
    background: #666;
    color: #fff;
}
