/**
 * Global styles
 */

body {
    text-align:center;
    background: #fff url(../img/body-bg.jpg) 50% 24px no-repeat;
    font-family:  Arial, sans-serif;
    color:#373737;
    font-size:18px;
}

a { 
    text-decoration:none;
}

strong {
    font-weight:bold;
}

em {
    font-style:italic;
}

sup {
    font-size: 65%;
    vertical-align: super;
}

.frutiger {
    letter-spacing: -2px;
}

#video-content {
    position:absolute;
    left:-999em;
}

#mainVid {
    visibility: hidden;
}

#toggleVolume {
    height:50px;
    width:50px;
    display:block;
    position:absolute;
    right: 28px;
    top: 460px;
    text-indent: -999em;
    background: url(../img/bg-toggle-volume.png) no-repeat top left;
}
#toggleVolume.muted {
    background-position: 0 -50px;
}

.vjs-spinner {
    display:none !important;
}
.vjs-styles-check {
    background: pink;
}

/* BNS Rainbow colours */
.pink		{color:#e53985 !important;}
.purple		{color:#925fb0 !important;}
.red		{color:#D81E05 !important;}
.blue		{color:#00a3e5 !important;}
.orange		{color:#f87700 !important;}
.green		{color:#7f7f00 !important;}
.white		{color:#fff !important;}
.darkred	{color:#bd0000 !important;}
.grey		{color:#515151 !important;}
.lightgrey	{color:#797979 !important;}
.yellow		{color:#c29e25 !important;}
.brown      {color:#89180a !important;}

/**
 * Layout
 */

#container {
    width:960px;
    margin:0 auto;
    text-align:left;
    position:relative;
}

header {
    height:60px;
    width:960px;
    position:fixed;
    background: rgb(255,255,255);
    background: rgba(255,255,255,0.7);
    z-index:100;
}

#popup-wrapper {
    background:rgb(0,0,0);
    background:rgba(0,0,0,0.85);
    position:absolute;
    top:0;
    left:0;
    right:0;
    width:100%;
    height:100%;
    z-index:100;
    display:none;
}

/**
 * Header styles
 */

header #logo {
    background: url(../img/scotiabank-header-logo.png) top left no-repeat;
    text-indent:-999em;
    display:block;
    height:60px;
    width:205px;
    overflow:hidden;
}
.fr header #logo {
    background-image: url(../img/scotiabank-header-logo_fr.png);
}

nav {
    position:absolute;
    top:0;
    left:205px;    
    width: 755px;
    height:60px;
    z-index: 5;
}

nav ul {
    margin-left: 60px;
}

.fr nav ul {
    margin-left: 40px;
}

nav ul li {
    float:left;
    margin-right:50px;
    width:82px;
    text-align:center;
}

.fr nav ul li {
    width:95px;
    margin-right:45px;
}

nav a {
    font-size: 14px;
    font-weight:bold;
    color: #515151;
    display: block;
    line-height: 1.2;
}

.fr nav a {
    font-size: 13px;
}

header a:focus {
    outline: 1px dotted #000;
}

nav a.nav-link {
    padding:15px 0;
}

nav a.nav-link:focus {
    outline: none;
}

nav a.nav-link.hover {
    color:#fff;
    text-shadow: #666 -1px 2px 2px;
}

header .nav-hover-state {
    display:none;
    position:absolute;
    z-index: 4;
}
header .nav-hover-state a {
    text-indent: -999em;
    display:block;
    width:100%;
    height: 100%;
    outline:none;
}

#nav-simple-hover {
    background: url(../img/nav-hover-simple.png) 0 0 no-repeat;
    width: 338px;
    height: 374px;
    top:-24px;
    left: 103px;
}
.fr #nav-simple-hover {
    background-image: url(../img/nav-hover-simple_fr.png);
    top: -30px;
    left: 91px;
}
#nav-account-hover {
    background: url(../img/nav-hover-account.png) 0 0 no-repeat;
    width: 338px;
    height: 368px;
    top:-25px;
    left: 284px;
}
.fr #nav-account-hover {
    background-image: url(../img/nav-hover-account_fr.png);
    left: 281px;
    top: -34px;
}
#nav-easier-hover {
    background: url(../img/nav-hover-easier.png) 0 0 no-repeat;
    width: 338px;
    height: 385px;
    top:-32px;
    left: 398px;
}
.fr #nav-easier-hover {
    background-image: url(../img/nav-hover-easier_fr.png);
    left: 400px;
    top: -36px;
}
#nav-investing-hover {
    background: url(../img/nav-hover-investing.png) 0 0 no-repeat;
    width: 338px;
    height: 373px;
    top:-24px;
    left: 570px;
}
.fr #nav-investing-hover {
    background-image: url(../img/nav-hover-investing_fr.png);
    top: -37px;
    left: 581px;
}

#back-to-scotiabank {
    position:absolute;
    top:0; right:20px;
    margin:0;
    width:132px;
    height:42px;
}

.fr #back-to-scotiabank {
    width:155px;
}

#back-to-scotiabank a {
    font-weight:normal;
    display:block;
    height:16px;
    width:132px;
    padding:10px 0;
    background: url(../img/back-to-scotiabank-bg.png) bottom center no-repeat;
    text-align:center;
    font-size:12px;
    color:#919191;
}
.fr #back-to-scotiabank a {
    width:155px;
    background: url(../img/back-to-scotiabank-bg_fr.png) bottom center no-repeat;
}
#back-to-scotiabank a:hover, #back-to-scotiabank a:focus {
    color:#d81e05;
    padding-top:16px;
}
/**
 * Footer styles
 */

footer {
    font-size:12px;
    color: #373737;
    overflow:hidden;
}

footer #footer-top {
    border-bottom: 1px solid #d1d1d1;
    padding: 20px 0;
    margin-bottom:15px;
    background: url(../img/bg-footer-en.png) no-repeat center right;
}
body.fr footer #footer-top {
    background: url(../img/bg-footer-fr.png) no-repeat center right;
}

.footerpipe {
    padding:0 7px;
    color: #999;
}

footer a {
    color: #D81E05;
    font-weight:bold;
}
footer a:focus {
    outline: 1px dotted #000;
}

footer #contact-info {
    float:left;
    width: 170px;
}

footer p.phone-info {
    background: url(../img/bg-contact.png) no-repeat center left;
    padding-left:30px;
    margin: 15px 0 10px;
    line-height:1.2;
}

footer #contact-info p.email a {
    font-weight:normal;
}

footer h2 {
    color: #666666;
    font-size: 14px;
}

footer #links-and-legal {
    float:left;
    width:790px;
    color: #999;
    font-size:11px;
}

footer #links-and-legal ul {
    margin-bottom:15px;
    overflow: hidden;
}
footer #links-and-legal ul li {
    float:left;
    padding-right: 10px;
    margin-right:10px;
    border-right:1px solid #999;
}
footer #links-and-legal ul li.noborder {
    border-right:none;
}

footer #links-and-legal p {
    clear: both;
    margin-bottom: 15px;
}


/**
 * Content styles
 */

#last-frame {
    position:absolute;
    left: 80px;
    visibility: hidden;
    width:800px;
    height:450px;
    overflow:hidden;
    background: url(../img/bg-last-frame.png) top center no-repeat;
    text-indent:-999em;
    top: 60px;
}

.fr #last-frame {
    background: url(../img/bg-last-frame_fr.png) top center no-repeat;
}

#last-frame:hover {
    background-position: bottom center;
}

#mkt-vid {
    height:400px;
    padding:60px 0 0;
    text-align:center;
}
.ie6 #mkt-vid {
    padding-top:0;
}
#mkt-vid .video-js-box {
    margin:0 auto;
    width: 800px;
}
#mkt-vid .vjs-controls {
    display:none !important;
}
#mkt-vid .vjs-big-play-button {
    display:none !important;
}

#mkt-vid .vjs-hidden {
    position:absolute !important; 
    left: -999em !important;
}

section .section-wrap {
    position:relative;
    height:450px;
}

section.content-section {
    padding:200px 0;
}

section.content-section img {
    position:absolute;
    z-index:2
}

section .copy {
    position:absolute;
    z-index:3;
    margin-left:20px;
}

section a.simulator-cta {
    padding:5px 28px 5px 0;
    background: url(../img/bg-tryitout.png) center right no-repeat;
    position:relative;
}
.ie6 a.simulator-cta {
    bottom:-5px;
}
section a.simulator-cta span {
    display:block;
    position:absolute;
    width:239px;
    height:167px;
    padding:45px 25px 0;
    left:-9999px;
    background: url(../img/bg-tryitout-tooltip.png) center right no-repeat;
    color:#fff;
    font-weight:normal;
}
.fr section a.simulator-cta span {
    padding-top:25px;
}
.fr section a.simulator-cta span strong {
    font-style: italic;
}
section a.simulator-cta:hover span,section a.simulator-cta:focus span  {
    left:74px;
    top:-150px;
}
.fr section a.simulator-cta:hover span,.fr section a.simulator-cta:focus span  {
    left:136px;
    top:-140px;
}
.ie6 section a.simulator-cta:hover span,.ie7 section a.simulator-cta:hover span, .ie8 section a.simulator-cta:hover span {
    left:75px;
}
.ie6 .fr section a.simulator-cta:hover span,.ie7 .fr section a.simulator-cta:hover span, .ie8 .fr section a.simulator-cta:hover span {
    left:137px;
}

.copy p {
    line-height:1.2;
    margin:10px 0;
}

/* Per-section tweaks */
section#section-simple .copy {
    width: 555px;
}
.fr section#section-simple .copy {
    top: -25px;
}
section#section-simple .section-bg {
    top: 150px;
}
section#section-account .section-bg {
    top: -65px;
}
section#section-account .copy {
    padding-left: 340px;
    top: -50px;
}
.fr section#section-account .copy {
    top: -30px;
}
section#section-account .video-list-wrapper {
    margin-left: 425px;
}
section#section-easier .section-bg {
    top: -55px;
}
section#section-investing .section-bg {
    top: -60px;
}
.ie6 section#section-investing .section-bg {
    left: -10px;
}
section#section-investing .copy {
    padding-left: 340px;
}
.fr section#section-investing .copy {
    top: -70px;
}
section#section-investing .video-list-wrapper {
    margin-left:425px;
}
.fr section#section-investing .video-list-wrapper {
    margin-left:445px;
}
section#section-investing {
    padding-bottom:55px !important;
}

h1{ font-weight:normal }
h2 {
    font-size: 42px;
    font-weight:normal;
}

h3 {
    margin:10px 0;
    font-size:24px;
}

a.simulator-cta {
    color: #d81e05;
    font-weight:bold;
}

/* Fix animating opacity by making this an inline-block element in ie8 */
.ie8 a.simulator-cta {
    display:inline-block;
}

.videos {
    height:180px;
    width:940px;
    margin:20px 10px 10px 10px;
    position:absolute;
    top:180px;
    z-index:2;

    /* Drop shadow */
    -moz-box-shadow: 0px 3px 8px #bbb; /* FF3.5+ */
    -webkit-box-shadow: 0px 3px 8px #bbb; /* Saf3.0+, Chrome */
    box-shadow: 0px 3px 8px #bbb; /* Opera 10.5, IE9, Chrome 10+ */
    
    /* Rounded corners */
    -moz-border-radius: 12px; /* FF1+ */
    -webkit-border-radius: 12px; /* Saf3-4, iOS 1+, Android 1.5+ */
    border-radius: 12px; /* Opera 10.5, IE9, Saf5, Chrome, FF4 */
    
    /* Gradient BG */
    background-color: #d71e05;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#d71e05), to(#b10000)); /* Saf4+, Chrome */
    background-image: -webkit-linear-gradient(top, #d71e05, #b10000); /* Chrome 10+, Saf5.1+ */
    background-image:    -moz-linear-gradient(top, #d71e05, #b10000); /* FF3.6 */
    background-image:     -ms-linear-gradient(top, #d71e05, #b10000); /* IE10 */
    background-image:      -o-linear-gradient(top, #d71e05, #b10000); /* Opera 11.10+ */
    background-image:         linear-gradient(top, #d71e05, #b10000);
}

.video-list-wrapper, .video-list-wrapper a {
    color:#fff;
    text-decoration:none;
    font-size:12px;
}

.video-list-wrapper {
    margin-left:35px;
    margin-top: 20px;
    position:absolute;
    z-index:30;
    top:180px;
}
#section-simple .video-list-wrapper {
    margin-left: 55px;
}

.video-list { 
    width: 405px; 
    height:185px;
    overflow:hidden; 
    float:left;
}
.ie6 .video-list {
    zoom:1;
}

.video-list ul {
    width: 1080px;
}

.video-list-wrapper li {
    float:left;
    margin-right:10px;
    margin-top:20px;
    width:125px;
}

.video-list-wrapper a.prev, .video-list-wrapper a.next {
    float:left;
    width:50px;
    height:80px;
    margin-top:45px;
    text-indent: -999em;
    overflow:hidden;
}
.video-list-wrapper a.prev {
    margin-right: 10px;
    width: 40px;
    background: url(../img/prevnext-sprite.png) 0 0 no-repeat;
}
.ie6 .video-list-wrapper a.prev {
    background: url(../img/prevnext-sprite_IE6.png) 0 0 no-repeat;
}
.video-list-wrapper a.prev.disabled {
    background-position: 0 -160px;
    cursor:default;
}
.ie6 .prev-disabled a.prev {
    background-position: 0 -160px;
    cursor:default;
}
.video-list-wrapper a.next {
    background: url(../img/prevnext-sprite.png) -15px -80px no-repeat;
}
.video-list-wrapper a.next.disabled {
    background: url(../img/prevnext-sprite.png) -15px -240px no-repeat;
    cursor: default;
}
.ie6 .video-list-wrapper a.next {
    background: url(../img/prevnext-sprite_IE6.png) -15px -80px no-repeat;
}
.ie6 .next-disabled a.next {
    background: url(../img/prevnext-sprite_IE6.png) -15px -240px no-repeat;
}

.video-list-wrapper .duration {
    display:block;
    margin-bottom: 5px;
}

.video-list-wrapper li a {
    display:block;
    width:120px;
    padding-top:90px;
    padding-left:5px;
    background:url(../img/video-thumbnail-sprite.png) -1px 0 no-repeat;
    font-size:16px;
}
.ie6 .video-list-wrapper li a {
    background:url(../img/video-thumbnail-sprite_IE6.png) -1px 0 no-repeat;
}
.video-list-wrapper li a:hover, .video-list-wrapper li a:focus {
    background-position: top right;
}
.video-list-wrapper a:focus {
    outline: 1px dotted #000;
}

.next-link {
    line-height:1.3;
    position:absolute;
    z-index:3;
    left: 15px;
    top: 400px;
}

.next-link a {
    display:block;
    color: #d81e05;
    font-weight:bold;
    padding: 15px 0 15px 60px;
    background: url(../img/downarrow-sprite.png) 0 0 no-repeat;
}
.next-link a:hover, .next-link a:focus {
    background-position: 0 -160px;
}

#section-account .next-link {
    text-align:right;
}
#section-account .next-link a {
    margin-left:510px;
    padding: 15px 60px 15px 0px;
    background: url(../img/downarrow-sprite.png) 363px 0 no-repeat;
}
#section-account .next-link a:hover {
    background-position: 363px -160px;
}
.fr #section-account .next-link a {
    margin-left: 620px;
    background-position: 252px 0;
}
.fr #section-account .next-link a:hover {
	background-position: 252px -160px;
}
.next-link a span {
    color: #373737;
}
.next-link a:hover span, .next-link a:focus span {
    color: #d81e05;
}

/**
 * Simulator popup
 */
#simulator-popup {
    position:absolute;
    width:970px;
    height:770px;
    padding:20px 30px 0;
    left: -999em;
    top:0;
    color: #fff;
    text-align:left;
    margin-left: -510px; /* this is screwing up the iPhone */
    background: #585858 url(../img/bg-simulator-popup.png) repeat-x;
    /* Rounded corners */
    -moz-border-radius: 12px; /* FF1+ */
    -webkit-border-radius: 12px; /* Saf3-4, iOS 1+, Android 1.5+ */
    border-radius: 12px; /* Opera 10.5, IE9, Saf5, Chrome, FF4 */

    /* Drop shadow */
    -moz-box-shadow: 0px 0px 10px #000; /* FF3.5+ */
    -webkit-box-shadow: 0px 0px 10px #000; /* Saf3.0+, Chrome */
    box-shadow: 0px 0px 10px #000; /* Opera 10.5, IE9, Chrome 10+ */
}

#simulator-popup h1 {
    font-size: 42px;
    margin-bottom: 10px;
}

#simulator-popup p {
    font-size: 16px;
    line-height: 1.4;
}

#simulator-popup.visible {
    left: 50%;
    top: 10px;
}

#simulator-example {
    position:absolute;
    bottom:15px;
    left:15px;
}

/**
 * Video popup
 */

.video-popup {
    position:fixed;
    width:880px;
    height:520px;
    padding:30px 30px 0;
    background:#fff;
    left: -999em;
    margin-left: -470px; /* this is screwing up the iPhone */
    /* Rounded corners */
    -moz-border-radius: 12px; /* FF1+ */
    -webkit-border-radius: 12px; /* Saf3-4, iOS 1+, Android 1.5+ */
    border-radius: 12px; /* Opera 10.5, IE9, Saf5, Chrome, FF4 */

    /* Drop shadow */
    -moz-box-shadow: 0px 0px 10px #000; /* FF3.5+ */
    -webkit-box-shadow: 0px 0px 10px #000; /* Saf3.0+, Chrome */
    box-shadow: 0px 0px 10px #000; /* Opera 10.5, IE9, Chrome 10+ */
}

.ie6 .video-popup {
    zoom: 1;
    position:absolute;
}

.video-popup-visible {
    left: 50% !important;
}

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
    body {
        background-position:20% 24px;
    }
    #popup-wrapper {
        background:transparent;
        margin:0;
        padding:0;
    }
    #simulator-popup.visible {
        position: absolute;
        left: 10px !important; 
        margin-left: 0 !important; 
    }
    .video-popup{
        position:absolute;
        margin-left: 0 !important; 
    }
    .video-popup-visible {
        left: 10px !important;
    }
}
@media only screen and (max-device-width: 480px) {
    body {
        background-position:20% 24px;
    }
    #popup-wrapper {
        background:transparent;
        margin:0;
        padding:0;
    }
    #simulator-popup.visible {
        position: absolute;
        left: 10px !important; 
        margin-left: 0 !important; 
    }
    .video-popup{
        position:absolute;
        margin-left: 0 !important; 
    }
    .video-popup-visible {
        left: 10px !important;
    }
}


.video-popup h1 {
    text-align:left;
    color: #d81e05;
    font-size: 42px;
}

.video-popup .video-category {
    color:#373737;
    display: block;
    font-size: 16px;
}

.video-popup .video-embed {
    float:left;
    width:640px;
    margin-top:10px;
}

.video-embed .player-loader {
    line-height: 1;
    color: #000;
}

.video-popup .video-copy {
    float:left;
    width:220px;
    margin-top:15px;
    margin-left: 20px;
    text-align:left;
}
.video-popup .video-copy a {
    color: #D81E05;
    text-decoration: none;
}
.video-popup .video-copy a:hover {
    text-decoration: underline;
}
.video-popup .video-copy li {
    padding: 0.5em 0 0.5em;
    border-bottom:1px solid #dfdfdf;
}

.video-popup .video-copy li {
    line-height: 1.4;
}
.video-popup .video-copy li.last {
    border-bottom: none;
}

.video-nav {
    position:absolute;
    bottom:0;
    left:0;
    width:940px;
    height:55px;
    -moz-border-radius-bottomleft: 12px;
    -moz-border-radius-bottomright: 12px;
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
    font-size: 16px;
    background:#ececec;
    background: -webkit-gradient(linear, left center, right center, from(#FDFDFD), to(#FDFDFD), color-stop(.1,#ECECEC),color-stop(.9,#ECECEC));
    background: -moz-linear-gradient(left, #FDFDFD 0%, #ECECEC 10%,#ECECEC 90%, #FDFDFD 100%);
    
}

.ie6 .video-nav {
    zoom:1;
}

.video-nav li {
    background-image: url(../img/videonav-sprite.png);
    background-repeat: no-repeat;
    margin-top:20px;
}

.video-nav a {
    color:#373737;
}
.video-nav a:hover, .video-nav a:focus {
    color: #D81E05;
}

.video-nav-prev {
    float:left;
    background-position: center left;
    padding-left: 20px;
    margin-left: 30px;
}
.video-nav-next {
    float:right;
    background-position: center right;
    padding-right: 20px;
    margin-right: 30px;
}

.close-video-popup, .close-simulator-popup {
    position:absolute;
    top:0;
    right:0;
    width:55px;
    height:50px;
    text-indent: -999em;
    background: url(../img/close-video-popup.png) bottom left no-repeat;
    overflow:hidden;
}
.ie6 .close-video-popup, 
.ie6 .close-simulator-popup, 
.ie6 .close-video-popup:hover, 
.ie6 .close-simulator-popup:hover,
.ie6 .close-video-popup:focus, 
.ie6 .close-simulator-popup:focus 
{
    zoom: 1;
    background: url(../img/close-video-popup_IE6.png) bottom left no-repeat;

}
.close-video-popup:hover, .close-simulator-popup:hover, .close-video-popup:focus, .close-simulator-popup:focus {
    background: url(../img/close-video-popup-hover.png) bottom left no-repeat;
}
.video-popup a:focus {
    outline: 1px dotted #000;
}

/*  Hide only visually, but have it available for screenreaders: h5bp.com/v */
.visually-hidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }
/* Extends the .visuallyhidden class to allow the element to be focusable when navigated to via the keyboard: h5bp.com/p */
.visually-hidden.focusable:active, .visually-hidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; }