/*
----------------------------------------------------------------------------------------------
HSBC HK Personal Banking MPF style sheet
Author:   
Created:  25 February 2011

History:
	
---------------------------------------------------------------------------------------------- */

/* MPF Home start  */



/* General */
html body,
body {
color: #333 !important;
}

.containerMPF .inactive {
display:none;
}
.containerMPF .active {
display:block;
}
.containerMPF .nobackground {
background:none !important;
}



.containerMPF 
{
width:940px;
float:left;
border-top:1px #ccc solid;
padding:16px 25px 24px 20px;
margin:32px 0 0 0;
}
.containerMPF h1
{
margin:0;
padding:0 0 0 0;
width:740px;
color: #f00;
font-weight: bold;
font-size: 156%;
/* \*/
font-size: 149%;
/* */
}

.containerMPF .importantBtn {
margin:5px 0 0 0;
padding:0;
width:190px;
height:29px;
float:right;
text-align:right;
}

.containerMPF .importantContainer {
width:908px;
padding:15px;
border:1px solid #ccc;
background-color:#f8f8f8;
float:left;
display:inline;
margin:-1px 0 0 0;
}
.containerMPF .importantContainer div {
margin:0 10px 0 0 ;
padding:0;
float:left;
display:inline;
}

.containerMPF ul.blackdot {
margin:0;
padding:0;
}
.containerMPF ul.blackdot li {
margin:0 0 2px 0;
padding:0 0 0 15px;
list-style:none;
background:url(../../images/common/arrow_black_circle.gif) 0 0 no-repeat; 
}

.containerMPF .text10px {
font-size:10px !important;
}


/*
Banner framework
*/

.containerMPF #crosspromotionsMPF{
position:relative;
display:block;
margin:16px 0 0 0;
padding:0 2px 0 2px;
float:left;
clear:left;
width:936px;
height:320px;
overflow:hidden;
_display:inline-block;
zoom:1;
}

.containerMPF #crosspromotionsMPF .placard{
position:relative;
display:block;
width:936px;
height:237px;
margin:0 0 10px 0;
padding:13px 0 0 0;
background-color:#e3e3e3;
}

.containerMPF #crosspromotionsMPF .controls{
position:relative;
margin:0;
padding:0;
width:936px;
height:59px;
overflow:hidden;
zoom:1;
text-align:center !important;
}

.containerMPF #crosspromotionsMPF .controls div {
position:relative;
display:inline;
padding:0 7px 0 4px;
margin:0;
width:141px;
height:59px;
zoom:1;
background:url(../../../common/images/home/promo_divider.jpg) top right no-repeat;
}
.containerMPF #crosspromotionsMPF .controls div.last {
background:none !important;
}

.containerMPF #crosspromotionsMPF .controls a{
outline:none;
}

/* Logon */
.containerMPF .loginContainer {
width:940px;
float:left;
display:inline;
margin:28px 0 0 0;
padding:9px 0 0 0;
background:url(../../../common/images/home/frame_loginTop.jpg) top left no-repeat;
}
.containerMPF .loginContainer .loginContent {
width:940px;
float:left;
display:inline;
margin:0;
padding:0;
background:url(../../../common/images/home/frame_loginBot.jpg) bottom left no-repeat;
}

.containerMPF .loginContainer .loginContent .left,
.containerMPF .loginContainer .loginContent .right  {
float:left;
display:inline;
width:400px;
margin:0;
padding:0 35px 1px 35px;
}
.containerMPF .loginContainer .loginContent .left {
background:url(../../../common/images/home/frame_loginSeperator.jpg) top right no-repeat;
}

.containerMPF .loginContainer .loginContent .left ul, 
.containerMPF .loginContainer .loginContent .right ul {
margin:0;
padding:0;
}
.containerMPF .loginContainer .loginContent .left ul li, 
.containerMPF .loginContainer .loginContent .right ul li {
margin:0 0 2px 0;
padding:0 15px 0 0;
list-style:none;
}

.containerMPF h2 {
float:left;
display:inline;
width:270px;
font-size:16px !important;
font-weight:700;
padding:0 110px 0 0;
margin:12px 0 8px 0 !important;
}

.containerMPF .loginContainer .loginContent .left .text,
.containerMPF .loginContainer .loginContent .right .text {
float:left;
display:inline;
width:400px;
margin:0;
padding:0 0 10px 0;
}

.containerMPF .loginleftpic {
height:100px;
background:url(../../../common/images/home/frame_loginPic01.jpg) bottom right no-repeat;
}
.containerMPF .loginrightpic {
height:100px;
background:url(../../../common/images/home/frame_loginPic02.jpg) bottom right no-repeat;
}





.containerMPF h4.mpfmidtitle {
float:left;
display:inline;
margin:28px 0 14px 0 !important;
padding:0;
font-size:13px !important;
color:#f00 !important;
width:100%;
}





/* Product */
.containerMPF .productContainer {
width:940px;
float:left;
display:inline;
margin:0 0 0 0;
padding:9px 0 0 0;
background:url(../../../common/images/home/frame_loginTop.jpg) top left no-repeat;
}
.containerMPF .productContainer .productContent {
width:940px;
float:left;
display:inline;
margin:0;
padding:0;
background:url(../../../common/images/home/frame_loginBot.jpg) bottom left no-repeat;
}

.containerMPF .productContainer .productContent .left,
.containerMPF .productContainer .productContent .right  {
float:left;
display:inline;
width:223px;
margin:0;
padding:0 0 1px 12px;
}
.containerMPF .productContainer .productContent .left {
background:url(../../../common/images/home/frame_ProdtSeperator.jpg) top right no-repeat;
}

.containerMPF .productContainer .productContent .left ul, 
.containerMPF .productContainer .productContent .right ul {
float:left;
display:inline;
width:222px;
margin:16px 0 10px 0;
padding:0;
}
.containerMPF .productContainer .productContent .left ul li, 
.containerMPF .productContainer .productContent .right ul li {
float:left;
display:inline;
width:222px;
margin:0 0 2px 0;
padding:0 0 0 0;
list-style:none;
}

.containerMPF h3 {
float:left;
display:inline;
width:222px;
font-size:18px !important;
font-weight:700;
padding:0 0 0 0;
margin:0 0 4px 0 !important;
}

.containerMPF .productContainer .productContent .left .text,
.containerMPF .productContainer .productContent .right .text {
float:left;
display:inline;
width:222px;
margin:0;
padding:0 0 10px 0;
}

.containerMPF .product01pic {
background:url(../../../common/images/home/frame_Prodt01.jpg) bottom right no-repeat;
}
.containerMPF .product02pic {
background:url(../../../common/images/home/frame_Prodt02.jpg) bottom right no-repeat;
}
.containerMPF .product03pic {
background:url(../../../common/images/home/frame_Prodt03.jpg) bottom right no-repeat;
}
.containerMPF .product04pic {
background:url(../../../common/images/home/frame_Prodt04.jpg) bottom right no-repeat;
}

.containerMPF .productContainer p {
float:left;
display:inline;
margin:0;
padding:0;
}


/* News & Tools */
.containerMPF .contentContainer {
width:940px;
float:left;
display:inline;
margin:0 -3px 0 0;
padding:0;
}

.containerMPF .newsContainer {
width:460px;
float:left;
display:inline;
margin:0 27px 0 0;
padding:0;
}

.containerMPF ul.news {
float:left;
display:inline;
margin:0;
padding:0;
width:460px;
}
.containerMPF ul.news li {
float:left;
display:inline;
margin:0 0 20px 0;
padding:0 0 0 0;
list-style:none;
background:none; 
width:460px;
}
.containerMPF ul.news li a {
color:#333;
text-decoration:none;
}
.containerMPF ul.news li a:hover {
color:#f00;
text-decoration:underline;
}




.containerMPF .toolsContainer {
float:left;
display:inline;
margin:0;
padding:0;
width:453px;
}
.containerMPF .toolsContainer .toolsContent {
float:left;
display:inline;
margin:0;
padding:10px 0 0 0;
width:453px;
background:url(../../../common/images/home/frame_toolTop.jpg) top left no-repeat;
}
.containerMPF .toolsContainer .toolsContent .toolsBtm {
float:left;
display:inline;
margin:0;
padding:0 0 5px 0;
width:453px;
background:url(../../../common/images/home/frame_toolBot.jpg) bottom left no-repeat;
}
.containerMPF ul.tools {
float:left;
display:inline;
margin:0;
padding:0;
width:453px;
background:url(../../../common/images/home/frame_toolsBkg.jpg) top left repeat-y;
}
.containerMPF ul.tools li {
float:left;
display:inline;
margin:0 1px 0 1px;
padding:0 20px 0 20px;
width:410px;
background:url(../../../common/images/home/frame_toolSeperator.jpg) bottom left no-repeat;
list-style:none;
}
.containerMPF ul.tools li .left {
float:left;
display:inline;
margin:0;
padding:0;
width:100px;
}
.containerMPF ul.tools li .right {
float:left;
display:inline;
margin:4px 0 0 0;
padding:0 0 8px 0;
width:310px;
}