/* This style controls the list <LI tags> by removing the bullets and to control the spacing inside and outside the list */

/* This style controls the list <LI tags> by removing the bullets and to control the spacing inside and outside the list */
ol#button {list-style: none; margin: 0; padding: 0; clear: both;}

  /* This part controls the button portion on the left */
  ol#button li {background: #bdf url(http://www.scotiabank.com/borrowing/Mortgage/Images/generalButtons.gif); float: left; margin: 0px; padding-left: 10px;}       
  
  /* This part controls the button portion on the right */
  ol#button a {background: url(http://www.scotiabank.com/borrowing/Mortgage/Images/generalButtons.gif) 100% 0; float: left; height: 28px; padding-right: 10px; text-decoration: none; }    
  	
  /* This style controls the text & spacing in the button */
  ol#button li.current a {color: #cc0000; font-weight: bold; padding: 5 50 0 0; }


ol#toc {height: 33px; list-style: none; margin: 0; padding: 0; width:550px; clear: both;}

  /* Each tab should float to the left and listed horizontally. Also this line controls the spacing between the tabs */
  ol#toc li {background: #bdf url(http://www.scotiabank.com/borrowing/Mortgage/Images/d2dTabs.gif); float: left; margin: 0 0px 0 0; padding-left: 10px;}       
  
  /* 100% 0 means 100% to the right, no offset vertically */
  ol#toc a {background: url(http://www.scotiabank.com/borrowing/Mortgage/Images/d2dTabs.gif) 100% 0; color: #666; display: block; float: left; height: 33px; padding-right: 10px; text-decoration: none; text-align:center;}    
  
  /* This style controls that state of the selected tab.  */
  ol#toc li.current {background-color: #cc0000; background-position: 0 -60px;}
  
  /* This style controls the text & spacing around the ON state tab */
  ol#toc li.current a {background-position: 100% -60px; color: #fff; font-weight: bold;}

/* This is for the red line under the navigation */
.line {border-top: #cc0000 solid 1px; clear: left; width:550px; height:15px;}

.topBanner {margin-bottom: 15px; float: left; width: 550px;}

#mainContainer {margin-bottom: 5px; float: left; width: 549px; background-color:#FFF; clear: both;}
#mainContainer ul {list-style-type: none; padding: 0px; margin: 0px;}
#mainContainer li {background-image: url(http://www.scotiabank.com/static/greyarrow.gif); background-repeat: no-repeat; background-position: 0px 5px; padding: 0 0 1 10;}

.containerLeft {float: left; *margin-top: 10px ;width: 345px;}
.containerRight {float: right; *margin-top: 10px; width: 200px;}
.containerBoth {float: right; *margin-top: 20px; width: 550px;}

#OverviewContainer {float: left; width: 550px; clear: both; margin-left: 2px; border: 0px solid green;}
.containerTitle1 {font-weight: bold; font-size: 12px; font-family: Verdana; color: #cc0000; margin: 10 0 10 0;}
.containerTitle2 {font-weight: bold; font-size: 12px; font-family: Verdana; color: #333333; margin: 10 0 10 0;}
.containerDetail1 {float:left; width: 110px; padding: 7 0 0 0; font-weight:bold; color:#333; border-bottom: 1px solid #CCC; border-right: 1px solid #CCC;}
.containerDetail2 {float:left; width: 400px; padding: 7 0 0 10; border-bottom: 1px solid #CCC;}
.containerDetail3 {float:left; width: 510px; padding: 15 0 0 10; font-size:10px;}
.containerList {list-style-type: none; padding: 0px; margin: 0 0 10 0;}
.containerOrder {padding: 0px; margin: 10 0 10 25;}
.containerNumber {padding: 0 0 3 10;}
.containerBullet {background-image: url(http://www.scotiabank.com/static/greyarrow.gif); background-repeat: no-repeat; background-position: 0px 5px; padding: 0 0 1 10;}

.containerTop {background: url(http://www.scotiabank.com/Banking/Images/top.gif); *width: 100%; height: 2em; padding-left: 10px; padding-top: 5px; font-weight:bold}
.containerBottom {background: url(http://www.scotiabank.com/Banking/Images/bottom.gif); *width: 100%; height: 2em; width: 550px; margin-bottom: 30px; }
#navigation {clear: both;}

/* ------- This section is for the second level tabs ------------ */

/* Caution! Ensure accessibility in print and other media types... */
/* Use class for showing/hiding tab content, so that visibility can be better controlled in different media types... */
@media projection, screen { 
    .tabs-hide { display: none; }
}


/* Hide useless elements in print layouts... */
@media print {
  .tabs-nav {display: none;}
}

/* Skin */
.tabs-nav {background: url(http://www.scotiabank.com/Banking/Images/d2dProductTop.gif); list-style: none; margin: 0; padding: 0 0 0 0; height: 24px; width: 550px;  border-bottom: 1px solid #999; }

.tabs-nav:after { /* clearing without presentational markup, IE gets extra treatment */
    display: block; clear: both; content: " ";}
	
.tabs-nav li {float: left; margin: 0 0 0 0px;}
.tabs-nav a {display: block; padding: 5 10 5 10; border-right: 1px solid #ccc; position: relative; top: 1px; z-index: 2; color: #cc0000;    
    line-height: 1.2; text-align: center; text-decoration: none;	
    white-space: nowrap; /* required in IE 6 */  	
}
.tabs-nav .tabs-selected a {color: #cc0000; background-color:#CCC; text-decoration: none; font-size: 11px;}
/* prevent dotted border in Firefox */
.tabs-nav .tabs-selected a, .tabs-nav a:hover, .tabs-nav a:focus, .tabs-nav a:active {outline: 0;}

*>.tabs-nav a span { /* hide from IE 6 */ width: auto; height: auto;}
.tabs-nav .tabs-selected a span { padding-top: 7px;}
.tabs-nav .tabs-selected a:link, .tabs-nav .tabs-selected a:visited, .tabs-nav .tabs-disabled a:link, .tabs-nav .tabs-disabled a:visited { /* @ Opera, use pseudo classes otherwise it confuses cursor... */ cursor: text;}
.tabs-nav a:hover, .tabs-nav a:focus, .tabs-nav a:active { /* @ Opera, we need to be explicit again here now... */ cursor: pointer;}
.tabs-nav .tabs-disabled {opacity: .4;}
/* declare background color for container to avoid distorted fonts in IE while fading */
.tabs-container {padding: 1 8 10 8; border-left: 1px solid #ccc; border-right: 1px solid #ccc; *width: 550px;}
.tabs-loading em {padding: 0 0 0 0px; background: url(loading.gif) no-repeat 0 50%;}

/* ------- End of section ------------ */

/* Product Pages Elements */

.accountInto {padding: 0 6px 0 6px; margin: 0px;}
.featureContainer {float:left; padding: 4px; width: 440px;}
.podcastContainer1 {float:left; width: 50px; padding-top: 7px; background: url(http://www.scotiabank.com/images/en/iconspersonal/20381.gif); background-repeat:no-repeat; margin-left:20px; height:20px;} 
.podcastContainer2{float:left; padding: 4px; width: 440px;}
.serviceContainer {float:left; padding: 4px; width: 440px;}
#intro {clear: both; width: 550px; vertical-align:top; height: 200px;}
#container {clear: both; width: 550px; vertical-align:top;}
.howToBankLeftContainer {float:left; padding: 4px; width: 325px;}
.howToBankRightContainer {float:right; width: 191px; vertical-align:top;}
.howToBankContent {float:left; width: 248px;}
.imageContainer {float:left; width: 70px; padding-top: 7px;}
.dottedLine {background-image: url(http://www.scotiabank.com/hr/careers/images/greydots.gif); *width: 100%; height: 23px; clear: both;}
.clearLine {background-image: url(http://www.scotiabank.com/images/spacer.gif); *width: 100%; height: 23px; clear: both;}
.shortdottedLine {margin-left: 70px; background-image: url(http://www.scotiabank.com/hr/careers/images/greydots.gif); *width: 100%; height: 23px; clear: both;}