/****************** general tags ******************/ html, body, .md div, .md span, .md applet, .md object, .md iframe, .md h1, .md h2, .md h3, .md h4, .md h5, .md h6, .md p, .md blockquote, .md pre, .md a, .md abbr, .md acronym, .md address, .md big, .md cite, .md code, .md del, .md dfn, .md em, .md font, .md ins, .md kbd, .md q, .md s, .md samp, .md small, .md strike, .md strong, .md sub, .md sup, .md tt, .md var, .md dl, .md dt, .md dd, .md ol, .md ul, .md li, .md fieldset, .md form, .md label, .md legend, .md table, .md caption, .md tbody, .md tfoot, .md thead, .md tr, .md th, .md td{ margin: 0; padding: 0; border-width: 0; border-style: none; font-size: 100%; font-family: inherit; vertical-align: baseline; } body .md, .md input, .md select, .md textarea, .md button{ font-size: 12px; line-height: 1.2; } @-moz-document url-prefix() { /* FF12 does not correctly render form input font sizes */ .md6 .input input{ font-size: 11px; } } .md blockquote:before, .md blockquote:after, .md q:before, .md q:after { content: ""; } .md blockquote, q { quotes: "" ""; } .md a:hover{ text-decoration: none; } .md a img{ border: none; } .md img{ border-style: none; border-width: 0; clear: both; display: block; margin: 0; padding: 0; } .md p{ margin-bottom: 1em; } .md sup, /* fix for the line-height problem with sub and sup */ .md sub{ position: relative; vertical-align: 0; } .md sup{ bottom: 0.4em; } .md sub{ top: 0.4em; } .md h1, .md h2, .md h3, .md h4, .md h5, .md h6{ margin: 0 0 10px 0; font-weight: bold; } .md h2, .md h3, .md h4, .md h5, .md h6{ margin: 14px 0 8px; } .md h1 {font-size: 18px;} .md h2 {font-size: 14px;} .md h3 {font-size: 13px;} .md h4 {font-size: 12px;} .md h5 {font-size: 11px;} .md h6 {font-size: 10px;} .md ol{ margin: 0 0 20px 0; padding: 0 0 0 30px; list-style-position: outside; } .md ul{ margin: 0 0 20px 8px; padding: 0 0 0 10px; list-style-position: outside; } .md li{ margin: 0 0 5px 0; } .md dl{ list-style-type: none; margin: 0 0 20px 0; padding: 0; } .md dt{ margin: 0 0 5px 0; } .md dd{ margin: 0 0 8px 20px; } /****************** tables ******************/ .md table { display: table; clear: both; width : 100%; border-width: 0 0 1px 1px; border-spacing: 0; border-collapse: collapse; margin-bottom: 20px; } .md table caption { position: absolute; left: -9999px; top: -9999px; } .md table, .md td, .md th { border-style: solid; vertical-align: top; } .md td, .md th { border-width: 1px 1px 0 0; margin: 0; padding: 4px 8px; } .md thead th, .md tbody th, .md tfoot th{ text-align: left; font-weight: bold; } body .md, .md input, .md select, .md textarea, .md button{ font-size: 13px; } @-moz-document url-prefix() { /* FF12 does not correctly render form input font sizes */ .md .input input{ font-size: 13px; } } .md h1{ font-size: 40px; } .md h2{ font-size: 18px; } .md h3{ font-size: 16px; } .md h4{ font-size: 15px; } .md h5{ font-size: 14px; } .md h6{ font-size: 13px; } /********************* Site Layout ***********************/ body > .mdi{ position: relative; overflow: hidden;/*due to having divs extend via extendedContentContainer*/ min-width: 960px;/*site width*/ } .Popup .mdi, .ModalWindow .mdi{ overflow: visible; min-width: auto;/*decorators that are less than the site width*/ } .Online .mdi{ overflow: visible; } div.outerWarning, div.outerHeader, div.outerColContainer, div.outerFooter, div.outerPromoArea{ text-align: center; } div.outerWarning{ border-style: solid none; border-width: 5px; } div.outerWarning div.warning, /*.warning is used elsewhere*/ div.header, div.colContainer, div.footer{ margin: 0 auto; text-align: left; width: 960px; } div.promoArea{ /*width is property*/ margin: 0 auto; text-align: left; } div.outerWarning div.warning{ /*.warning is used elsewhere*/ padding: 12px; text-align: center; width: 936px; } div.colContainer, div.header{ position: relative;/*not on footer cause of ie7 and show hides in online banking*/ } div.colContainer{ clear: both; display: block; } div.colOne{ float: left; display: inline; margin-left: 8px; min-height: 1em; overflow: hidden; padding-bottom: 15px; width: 200px; } div.colTwo{ float: left; display: inline; margin: 0 12px 0 12px; min-height: 1em; overflow: visible; padding-bottom: 15px; width: 520px; } div.colThree{ float: left; display: inline; margin-right: 8px; min-height: 1em; overflow: hidden; padding-bottom: 15px; width: 200px; } div.colOneTwo{ float: left; display: inline; margin: 0 12px 0 8px; min-height: 1em; overflow: hidden; padding-bottom: 15px; width: 732px; } div.colTwoThree{ float: left; display: inline; margin: 0 8px 0 12px; min-height: 1em; overflow: hidden; padding-bottom: 15px; width: 732px; } div.colOneTwoThree{ display: block; margin: 0 8px; padding-bottom: 15px; } div.footer{ clear: both; display: block; margin: 0; margin-right: auto; margin-left: auto; padding: 5px 0; } /********** Site Layout variations ***********/ .Popup div.colContainer{ padding: 20px; width: auto; } body.mobileDemo div.colContainer{ margin: 0 auto; padding: 0px; width: 900px; } body.ModalWindow .outerWarning div.warning, /*.warning is used elsewhere*/ body.ModalWindow .header, body.ModalWindow .colContainer{ width: 536px; } body.ModalWindow .colOneTwoThree{ width: 520px; } .Campaign div.colOneTwoThree{ padding-top: 15px; } /***** Added to create extended content beyond the 960px ******/ div.extendedContentContainer{ width: 500%; margin-left: -200%; } .extendedContentContainer > div{ width: 960px; margin: 0 auto; } .unclickable { pointer-events: none; } input[type="text"].unclickable, div.unclickable input[type="checkbox"], select.unclickable, div.unclickable select { opacity: 0.5; } div.payrollBox { width: 640px; height: 180px; border: 1px solid gray; box-sizing: border-box; z-index: 1; padding-left: 2em; } div.payrollDelegateBox { border: 1px solid gray; box-sizing: border-box; z-index: 1; width: 640px; min-height: 1vh; flex:1; align-self: flex-start; padding-left: 2em; } div.payrollBlurb { width: 180px; margin-top: 2.5em; } div.contentLeft { float: left ; width: 35% ; } div.contentRight { float: right; width: 65%; } div.openProfileHolder { padding-top: 7px; font-size: 9pt; } div.viewPayrollHolder { padding-top: 7px; font-size: 9pt; } button.viewPayroll { background:none!important; border:none; padding:0!important; font: inherit; /*border is optional*/ border-bottom:1px solid #444; cursor: pointer; } hr.payrollLine { width: 570px; align: center; } div.payrollDelegatesList { padding-top: 0.9em; } div.payrollModifyDelegate { padding-top: 0.8em; padding-bottom: 1.0em; } div.payrollEditDelete { padding-top:0.3em; padding-bottom:0.8em; } span.payrollEdDel { color: #71a4c9; } div.lateWarning { border-color: #D70505; border: solid 1px; color: #D70505; margin-bottom: 10px; padding: 12px 10px 2px 10px; background-repeat: no-repeat!important; background-image: url('/DynamicContent/Resources/Images/Icons/warning.png')!important; padding-left: 28px; height: auto; min-height:92px; height:auto !important; height:92px; padding-top: 3px; padding-bottom: 10px; } div.rejectLateInfo { border-color: #D70505; border: solid 1px; color: #D70505; margin-bottom: 10px; padding: 12px 10px 2px 10px; background-repeat: no-repeat!important; background-image: url('/DynamicContent/Resources/Images/Icons/warning.png')!important; padding-left: 28px; height: auto; min-height:192px; height:auto !important; height:192px; padding-top: 3px; padding-bottom: 10px; } a#downloadPDF{ display: inline-block; margin-bottom: 15px; } html{ background-color: #ebe8db; } html.Popup, body.Popup{ background: #ffffff; } div.outerColContainer, div.outerHeader, div.outerFooter{ min-width: 970px; } div.outerWarning div.warning, div.header, div.colContainer, div.footer{ width: 970px; } div.outerHeader, div.outerFooter{ border-color: #000; border-width: 30px; } div.outerHeader{ border-top-style: solid; position: relative; } .NoNavigation div.outerFooter{ border: none; } div.header{ background-color: transparent; background-image: none; height: 214px; margin-top: -30px; } .NoNavigation div.header{ height: 180px; } div.header:before, div.footer:before{ content: ""; position: absolute; } div.header:before{ height: 10px; left: 220px; top: 29px; width: 740px; } div.outerColContainer{ position: relative; } div.outerColContainer:before{/*embedding this image into the CSS to avoid another request since it doesn't make sense for these to be in the sprite*/ background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA+oAAAEkCAYAAAC448s/AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAChJJREFUeNrs3Utu21YYhmFZcezCCaT4kgwKdNJhF9PFdisFupYOSjJk7QCCcmTrckh+kp8HIFC3SgX8aAeveS5XXdct/vzjl8VMVv1zu/Fz2z/dxs/Nxl93L/+8xmcBzt5f//xrCAAAF+h6xu9e9s9v/fNhhu8e6xcA25+d6nta/ykDAAAI9VM9zBTpixm/dwpTrUpoJvweAAAAoT6yq/75avyjWG79fEm/lJhqVUI74ffYkgEAAESE+rp/Pho/Bxp+wbP5i4dLWxlxSVsySj8DAADBoe5tOvzskrdkbEf+a1FvNQQAAO/a1Qynvn/un9+NHrggDqgEYG9u7QDeMscb9SdjBy6MAyrrfNYBlQAAM4T68Op+ZewAZ8MBlXU+a0sGABAb6t6mA5DCAZV1Plvr0EkHVALADKE+nPJ+b+QAMIn3dECl1RAACPUjPS6e314AAJzCaog6n3VAJcA7D/XlS6gDAPA6B1TW+awDKoGzNdX1bMPe9F+NGwCAC2VLBlDFcIXjFG/UrxYOkQMA4LLZknH6Zwf/nfBnHVDJxZgi1Nf9c2PUAABwthxQWeezVkMQE+repgMAAKmshqjzWQdUnlGof+6fO//vAwAAzMIBlXU+O+kBlWOHurfpAAAAjGG59fMl/FJiCPe/lyN+wXCU/Mp/OwAAALCX/9+4jxnq3qYDAABASKh/7J97MwYAAIC9NWOG+uPi+fREAAAAYD+jvVEf/p0P5gsAAAAZoT5E+rX5AgAAwPyhPix3d4gcAAAAhIT6un9uzBYAAAAONsphct6mAwAAwHGqv1H/1D935goAAABH6WqH+lczBQAAgKNVfaN+2z8rMwUAAICjVd2j7m06AAAAnKbaG/XhzvQv5gkAAAAZof60qH96PAAAAAj1Iwx//sEsAQAAICPUh0i/NksAAAA4WZXD5J7MEQAAAKo4+Y36un9uzBEAAACq6E4NdVeyAQAAQD0nvVH/1D93ZggAAADVnLRH3dt0AAAAqKf98RfHhPpt/6zMEAAAADJC3dt0AAAACAn14c70L+YHAAAAGaH+tDj97nUAAACgQqgPn30wOwAAAMgI9fvF89J3AAAAICDUHSIHAAAAIaG+7p8bcwMAAIBRNIeGurfpAAAAMJ6D3qjfvTwAAABAQKh/My8AAADICPVhX/rKvAAAACAj1O1NBwAAgPHtdZjccGf6vVkBAADA6Lp9Qv1xcdg96wAAAMBx3lz6vnwJdQAAACAg1Icl79fmBAAAAJN4c4+6Q+QAAABgOq++UR+uY7sxIwAAAMgI9W/mAwAAABmhfvfyAAAAAAGhbm86AAAATKvZ/GEz1Id96WvzAQAAgEm1u0Ld23QAAACYXlcK9eHO9HuzAQAAgMkV36ivF7vvVAcAAADGU9yj/sFcAAAAYBY796gDAAAAQh0AAACE+naot+YCAAAAOaHemQsAAADkhDoAAAAg1AEAAECol0Ld0ncAAAAICnWHyQEAAMA8mlKoAwAAAPOwRx0AAACEOgAAALB3qNujDgAAAEGhDgAAAAh1AAAAEOqlUHePOgAAAASFuj3qAAAAEBTqAAAAwPSa7b8h1AEAAGA+rVAHAACAMwj1xmwAAAAgJ9QBAAAAoQ4AAABCXagDAABAeKi7Rx0AAACCQr0zGwAAAMgJdQAAAGB6jVAHAACAHJa+AwAAgFAHAAAADgp1AAAAQKgDAACAUC+FuqXvAAAAEGC5q+ABAACA+UIdAAAAEOoAAADArlC3Tx0AAACCQt0+dQAAAAgKdQAAAECoAwAAwLvVCXUAAADI0b4W6vaoAwAAwMy8UQcAAAChDgAAAAh1AAAAOKNQb4wDAAAAckIdAAAAEOoAAACAUAcAAIDwUHePOgAAAASFemccAAAAkBPqAAAAgFAHAAAASqFu6TsAAAAEhbrD5AAAACAo1AEAAAChDgAAAJRC3R51AAAAEOoAAABAKdQBAAAAoQ4AAACUQt3SdwAAAAgKdfeoAwAAQFCoAwAAAEIdAAAAEOoAAAAQHuqNcQAAAEBOqAMAAADTaoU6AAAA5OiEOgAAAARzjzoAAACEhjoAAAAg1AEAAAChDgAAAOGhbo86AAAABIV6ZxwAAACQE+oAAACAUAcAAABKoW6POgAAAASFuj3qAAAAEBTqAAAAgFAHAAAASqFu6TsAAAAIdQAAAKAU6gAAAIBQBwAAAEqhbuk7AAAABIV6axwAAACQE+oAAACAUAcAAACEOgAAAISHemMcAAAAkBPqAAAAgFAHAAAAhDoAAACEh7p71AEAAGBazWuh3pkPAAAAzMvSdwAAABDqAAAAwFuhbuk7AAAACHUAAACgFOoAAACAUAcAAABKoe4edQAAAAgKdXvUAQAAICjUAQAAAKEOAAAA7Ap1y98BAAAgKNQdKAcAAABBoQ4AAAAIdQAAAECoAwAAQHio26MOAAAAQaEOAAAACHUAAABAqAMAAEB4qDdGAgAAADmhDgAAAAh1AAAAQKgDAABAeKi7Rx0AAACCQr0zEgAAAMgJdQAAAGA6nVAHAACAMwp1e9QBAABgRvaoAwAAQHCoAwAAAEIdAAAAKIW6pe8AAAAg1AEAAIBSqAMAAABCHQAAACiFuqXvAAAAEBTqrZEAAABATqgDAAAAQh0AAAAQ6gAAABAe6o2RAAAAQE6oAwAAAEIdAAAAEOoAAAAQHuruUQcAAICgUAcAAACEOgAAACDUAQAAIDzU3aMOAAAAQaEOAAAACHUAAABAqAMAAEB4qLtHHQAAAIJCvTMSAAAAmEzzVqgDAAAAMxLqAAAAEBzqlr4DAACAUAcAAABKoQ4AAAAIdQAAAKAU6pa+AwAAQFCot0YCAAAAOaEOAAAACHUAAACgFOr2qAMAAEBQqNujDgAAAEGhDgAAAAh1AAAAQKgDAABAeKjbow4AAABBoe7UdwAAAAgKdQAAAECoAwAAAKVQt0cdAAAAgkIdAAAAEOoAAACAUAcAAIDwULdHHQAAAIJC3T3qAAAAEBTqAAAAgFAHAACAd6fbN9QtfwcAAIDxtfuGugPlAAAAYCaWvgMAAIBQBwAAAIQ6AAAAnGGo26MOAAAAQaEOAAAACHUAAADAPeoAAAAQHur2qAMAAEBQqAMAAABCHQAAABDqAAAAEB7qjbEAAABATqgDAAAAQh0AAAAQ6gAAABAe6u5RBwAAgKBQ74wFAAAAckIdAAAAEOoAAACApe8AAAAg1AEAAIB9Qx0AAAAQ6gAAAICl7wAAABAe6q2xAAAAQE6oAwAAAONrhToAAACEs0cdAAAAwkPdHnUAAAAICnUAAABAqAMAAABCHQAAAMJD3R51AAAACAp1AAAAQKgDAAAAQh0AAADCQ70xFgAAAMgJdQAAAECoAwAAAEIdAAAAwkPdPeoAAAAQFOqdsQAAAEBOqAMAAABCHQAAALD0HQAAAIJ8F2AA1tmA2pIPhAMAAAAASUVORK5CYII=); background-repeat: no-repeat; background-position: center top; content: ""; height: 292px; left: 0; right: 0; position: absolute; top: -75px; min-width: 970px; } .NoNavigation div.outerColContainer:before{ top: -20px; } div.colContainer{ max-width: 970px; padding-bottom: 25px; min-height: 375px; } .NoNavigation div.colContainer{ padding-top: 30px; } div.colContainer:after{/*clearing floats on main container to avoid FOUC, since we're clearing old school with div.clear w/ overflow: hidden*/ content: " "; clear: both; display: table; } div.colContainer:before{ bottom: 183px; content: ""; left: 0; position: absolute; top: 217px; width: 100%; min-width: 970px; background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA+AAAAADCAYAAAATH2XMAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA2hpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDowMzgwMTE3NDA3MjA2ODExODIyQUJGQjAxOTFGN0JBNSIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpERUI4RDc4NDhCNEIxMUUyODc3M0QzRUIyOEMwRDU4MyIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpERUI4RDc4MzhCNEIxMUUyODc3M0QzRUIyOEMwRDU4MyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M2IChNYWNpbnRvc2gpIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MDQ4MDExNzQwNzIwNjgxMTgyMkFCRkIwMTkxRjdCQTUiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6MDM4MDExNzQwNzIwNjgxMTgyMkFCRkIwMTkxRjdCQTUiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz6rjAEBAAAAPElEQVR42uzXIQEAIAwAwYEhC4YmlF8iFH4G1F2Ed9/2HCvqMgAAAICr/NRdKwAAAHjPgAMAAMAHR4ABAGhWAbHSbPebAAAAAElFTkSuQmCC); left: -11px; zoom: 1; width: 992px; } .NoNavigation div.colContainer:before{ top: 247px; } .Popup .colContainer:before, .Popup .colContainer:after{ content: normal; width: auto; min-width: auto; } .Popup .colContainer{ width: auto; max-width: 970px; } div.colOne, div.colTwo, div.colThree{ overflow: visible; } div.colOne, div.colThree{ display: block; width: 180px; } div.colOne{ -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; margin: 4px 29px 0 0; padding: 0 0 0 27px; } div.colTwo{ display: block; margin: 0 29px 0 0; padding: 0; width: 552px; } div.colOneTwo{ -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; margin: 0 29px 0 0; padding: 0 0 0 27px; width: 761px; } div.colThree{ float: right; margin: 9px 0 0 0; padding: 0; } .Online .colThree{ padding-top: 0; } div.colTwoThree{ display: block; margin: 0; padding: 0 0 0 0; } div.colOneTwoThree{ margin: 0; padding: 0 25px; } div.colTwoThree, div.colOneTwoThree, div.colOneTwo, div.colOne, div.colTwo, div.colThree, div.mainContent{ position: relative;/*fixes a strange issue where text/links cannot be selected or clicked within mainContent*/ } div.outerFooter{ border-bottom-style: solid; } div.outerFooter:before{ background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA+oAAADJCAYAAAC0TsjXAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAB6VJREFUeNrs3V1u2loAhVEbU5WplLmUwWYofcgU+tIBpGl+GiojodQmHHNOsonWklCuuAVF1tWtPrZt+u/fvnZ7N7d3/37utpv1y49tBwAAADT10uI/Xj+3mvhzK4cKAAAAPoYoBwAAgPBQF+8AAAAQFOq9wwIAAAA5oW5RBwAAgKBQBwAAAIJCXbwDAACAUAcAAACEOgAAAISHuru+AwAAQFCoW9QBAABAqAMAAABCHQAAAMJDfXBYAAAAICfU3UwOAAAAgkLdog4AAABCHQAAABDqAAAAEB7q7voOAAAAQh0AAABw6jsAAACkhvpuu5mLdwAAAOC9Qx0AAAAICvWb2ztHBAAAAFJCHQAAAAgK9d120zskAAAAEBLqAAAAQFaoW9QBAAAgKNQBAACAoFC3qAMAAIBQBwAAAIQ6AAAACHUAAABAqAMAAIBQBwAAAC4JdV/XBgAAAEGhblEHAAAAoQ4AAABMhbpT3wEAACAo1C3qAAAAEBTqFnUAAAAQ6gAAAIBQBwAAAKEOAAAACHUAAAC4wlB313cAAAAICvXBIQEAAICcUHfqOwAAAASF+tohAQAAgIBQ3203jgYAAACkhPrINeoAAAAQFOoAAABAUKgLdwAAAAgKdd+jDgAAAEGhblEHAACAoFAHAAAAgkJduAMAAEBQqLtGHQAAAEJCXaQDAABAUKgDAAAAQaFuUQcAAICgUAcAAACCQt2iDgAAAEIdAAAAEOoAAAAg1AEAAAChDgAAAFcY6u4ADwAAAEGhblEHAAAAoQ4AAABMhbpT3wEAAECoAwAAAFNx7tR3AAAACAr1weEAAACAnFC3qAMAAEBQqFvUAQAAICjUAQAAgKBQXzscAAAAkBPqAAAAQFCoi3YAAAAICnV3fQcAAICgULeoAwAAQFCoAwAAAEGhLtoBAAAgKNRdow4AAABBoW5RBwAAgKBQt6gDAACAUAcAAACmQt2p7wAAABAU6hZ1AAAAEOoAAACAUAcAAIDwUHeNOgAAAISEujUdAAAAgkLdmg4AAABBoQ4AAAAEhbpgBwAAgKBQd406AAAABIW6RR0AAACCQh0AAAAICvXBoQAAAICcUAcAAACCQl2wAwAAQFCou+s7AAAABIW6RR0AAACCQh0AAAAICnXBDgAAAEGh7hp1AAAACAp1izoAAAAEhbpFHQAAAIQ6AAAAINQBAAAgPNRdow4AAABBoW5RBwAAAKEOAAAATIW6U98BAAAgKNQt6gAAACDUAQAAAKEOAAAA4aHuGnUAAAAICnWLOgAAAASFukUdAAAAgkIdAAAACAr1waEAAACAnFAHAAAAgkJdsAMAAEBQqAMAAABBoe4adQAAAAgKdQAAACAk1MU6AAAABIV67zAAAABATqhb1AEAACAo1AEAAICgUBfrAAAAEBTqrlEHAACAoFC3qAMAAEBQqFvUAQAAQKgDAAAAU6Hu1HcAAAAICnWLOgAAAAh1AAAAQKgDAABAeKi7Rh0AAACCQt2iDgAAAEGhblEHAACAoFAHAAAAgkJdrAMAAEBQqLtGHQAAAIJC3aIOAAAAQaEOAAAABIX64DAAAABATqgDAAAAQaEu1gEAACAo1AEAAICgUHeNOgAAAASFOgAAABAU6mIdAAAAgkK9dxgAAAAgJ9Qt6gAAABAU6hZ1AAAA+AC77eaLUAcAAIBgQh0AAADCQt016gAAABBi/fL49fIYjh7ro38W8QAAANDO81So/zzxgv5ExJ96buicUg8AAACLQv2tFzyMj1JDQdRb8QEAAOCMUL/E4/go1RdE/evnAQAAQKhXVnPFPzf2rfgAAAAI9QYuWfHnov6ta/MBAABAqFe2X/H/jI9SS2+2Z8UHAABAqDdQe8U/53R9AAAAhDqV1VjxS264t+58ZR4AAIBQp4nDin9f+LpVV34NvhUfAABAqNPI0/ioveKfWvat+AAAAEKdBmqt+CWn6wMAAAh1qOySFb8k6o+ft+IDAABCHRp4GB+lVt2yBd+KDwAACHVoYOmK33fLb7ZnxQcAAIQ6VLb/yrxWK/7ccyuHHQAAEOpQX60Vf+6UfCs+AAAIdeAdXLril1yDf3jOig8AAEIdaGC/4N8veN05K/7cBwBWfAAAEOpAZZes+Eu+Ls+KDwAAQh1o5HF8lOq7ZQu+/0cBACDUARo4XvF/F752yYJvxQcAQKgDNHLJil9yF/3j5wAAQKgDVLZf8f905V+Z13XLb7ZnxQcAQKgDNFB7xT/ndH0AABDqAJXVWPHPvQb/8JyvzAMA+GyhfnN75ygAfLzDin9/7gt2283+x6orvwbfig8AkBzqDgHAVXsaH7VX/FPLvhUfAKCeZ6EOwEHxij9adcu+Ms+KDwDwvyehDkCNv0yWrvglUb//QKDvpu+mf/h3r/kwAAC4ekIdgPf0MD7eU43Yb/0e6b+fyx0AQKgDQDX7676mvm7v0aGpIuWDg7n3SP/9Vv4TAkCoAwA1+cCjvvSzKYYr+P0AhDoAANU8zTzvQ5HlXALT5j0AoQ7AsZvbOwcB4DxRl8DstpvPclyHgufnPgSo8R5zHySsG763sz8Q6gAAQJzHwud5m7M/2ryHUAcAAGARN0BtI/3Gov/5K8AAExF8VCGeXeAAAAAASUVORK5CYII=); background-repeat: no-repeat; background-position: center bottom; bottom: 112px; content: ""; height: 201px; left: 0; position: absolute; width: 100%; min-width: 970px; } .NoNavigation div.outerFooter:before{ bottom: -43px; } /* CHG056759, Vancity requested a link added to the footer. Had to remove 10px from top padding below, as the link was too low on the page and broken. Used to be: padding: 40px 0 0 27px; */ div.footer{ -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; height: 130px; margin-bottom: -30px; padding: 30px 0 0 27px; position: relative; } div.footer:before{ background-position: 0 -10px; bottom: 29px; height: 11px; left: 0; width: 100%; } /*set z-indexes*/ html{ z-index: 0; } body, .md{ z-index: 1; } div.outerHeader{ z-index: 2; } div.outerColContainer{ z-index: 1; } div.outerFooter{ z-index: 3; } div.header, div.colContainer, div.footer{ } .Home div.outerPromoArea{ position: absolute; background: #fff; } .Home div.outerPromoArea, .Home div.promoArea{ width: 785px; height: 405px; min-height: 405px; margin: 0; } div.outerPromoArea{ margin: 0 -25px; min-height: 0; } /* colThree link fix */ div.colThree > div { position: relative; } /* Based on twitter bootstrap v3 Using only col-md class because mdi is not responsive Custom to MDI: .container = .row-container Additional classes for .row div classes added to .row: .row-filled-content so that we can use the grid for callout blocks see brandProduct.jsp */ .md .row-container { margin-right: auto; margin-left: auto; overflow: hidden; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .row-container .row{ overflow: hidden; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .md .row-show-grid > div { /*really only for debugging*/ border-width: 1px; border-style: solid; padding-top: 15px; padding-bottom: 15px; float: left; } .md .row-container:before, .md .row-container:after, .row-container .row:before, .row-container .row:after{ display: table; content: " "; clear: both; } .row .col-md-1, .row .col-md-2, .row .col-md-3, .row .col-md-4, .row .col-md-5, .row .col-md-6,.row .col-md-7, .row .col-md-8, .row .col-md-9, .row .col-md-10, .row .col-md-11, .row .col-md-12 { position: relative; min-height: 1px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .row .col-md-1, .row .col-md-2, .row .col-md-3, .row .col-md-4, .row .col-md-5, .row .col-md-6, .row .col-md-7, .row .col-md-8, .row .col-md-9, .row .col-md-10, .row .col-md-11, .row .col-md-12 { float: left; } .row .col-md-12 { width: 100%; } .row .col-md-11 { width: 91.66666667%; } .row .col-md-10 { width: 83.33333333%; } .row .col-md-9 { width: 75%; } .row .col-md-8 { width: 66.66666667%; } .row .col-md-7 { width: 58.33333333%; } .row .col-md-6 { width: 50%; } .row .col-md-5 { width: 41.66666667%; } .row .col-md-4 { width: 33.33333333%; } .row .col-md-3 { width: 25%; } .row .col-md-2 { width: 16.66666667%; } .row .col-md-1 { width: 8.33333333%; } .row .col-md-pull-12 { right: 100%; } .row .col-md-pull-11 { right: 91.66666667%; } .row .col-md-pull-10 { right: 83.33333333%; } .row .col-md-pull-9 { right: 75%; } .row .col-md-pull-8 { right: 66.66666667%; } .row .col-md-pull-7 { right: 58.33333333%; } .row .col-md-pull-6 { right: 50%; } .row .col-md-pull-5 { right: 41.66666667%; } .row .col-md-pull-4 { right: 33.33333333%; } .row .col-md-pull-3 { right: 25%; } .row .col-md-pull-2 { right: 16.66666667%; } .row .col-md-pull-1 { right: 8.33333333%; } .row .col-md-pull-0 { right: auto; } .row .col-md-push-12 { left: 100%; } .row .col-md-push-11 { left: 91.66666667%; } .row .col-md-push-10 { left: 83.33333333%; } .row .col-md-push-9 { left: 75%; } .row .col-md-push-8 { left: 66.66666667%; } .row .col-md-push-7 { left: 58.33333333%; } .row .col-md-push-6 { left: 50%; } .row .col-md-push-5 { left: 41.66666667%; } .row .col-md-push-4 { left: 33.33333333%; } .row .col-md-push-3 { left: 25%; } .row .col-md-push-2 { left: 16.66666667%; } .row .col-md-push-1 { left: 8.33333333%; } .row .col-md-push-0 { left: auto; } .row .col-md-offset-12 { margin-left: 100%; } .row .col-md-offset-11 { margin-left: 91.66666667%; } .row .col-md-offset-10 { margin-left: 83.33333333%; } .row .col-md-offset-9 { margin-left: 75%; } .row .col-md-offset-8 { margin-left: 66.66666667%; } .row .col-md-offset-7 { margin-left: 58.33333333%; } .row .col-md-offset-6 { margin-left: 50%; } .row .col-md-offset-5 { margin-left: 41.66666667%; } .row .col-md-offset-4 { margin-left: 33.33333333%; } .row .col-md-offset-3 { margin-left: 25%; } .row .col-md-offset-2 { margin-left: 16.66666667%; } .row .col-md-offset-1 { margin-left: 8.33333333%; } .row .col-md-offset-0 { margin-left: 0; } /*remove gutter padding for grid columns*/ .no-gutter > [class*='col-'] { padding-right:0; padding-left:0; } /**/ /************* general tags **************/ .md .name-noDesktopNav, .md .onlyPrint{ display: none !important; } .md .opposed{ float: right; } .md .hidden{ display: none !important; } .md .loading{ margin-left: 16px; display: inline-block; height: 11px; margin-bottom: 0px; } .md .loading canvas{ float: left; margin-top: -4px; } .md .loading_centered{ display: block; margin: 0 auto; width: 40px; } .md .loading_centered canvas{ margin-top: 0; } .md .portlets .loading{ margin-left: 5px; } .md h1 .loading canvas{ margin-top: -5px; } .md h3 .loading canvas{ margin-top: -6px; } .md .portlets .loading canvas{ margin-top: -3px; } .md .modal .loading canvas{ margin-top: -3px; } .md .asOfDate{ display: block; font-size: 10px; font-style: italic; } /* START graphing CSS - these belong in properties somewhere */ .md .chart_legend:before{ content: ''; display: inline-block; height: 10px; margin-right: 2px; width: 10px; } /*general classes*/ .md .filter_heading{ margin-top: -31px; float: right; } .md div.hr{ clear: both; display: block; font-size: 1px; height: 1px; line-height: 1px; margin: 4px 0 12px; } .md div.hr hr{ display: none; } .aligncenter{ text-align: center; } .alignright{ text-align: right; } img.alignLeft{ float: left; margin: 0 5px 5px 0; } img.alignRight{ float: right; margin: 0 0 5px 5px; } .md div.clear, .md div.clearBoth, .md br.clearboth{ display: block; clear: both; height: 1px; line-height: 1px; font-size: 1px; } .md ul.skip { list-style-type: none; position: absolute; top: 10px; left: 10px; height: 1px; overflow: visible; margin: 0; padding: 0; z-index: 9999; } .md ul.skip li { float: left; } .md ul.skip a { position: absolute; top: -9999px; padding: 2px; } .md ul.skip a:focus { position: relative; top: auto; } .string.string_break { overflow-x: hidden; text-overflow: ellipsis; } .currency.string_break { overflow-x: hidden; text-overflow: clip; word-wrap: break-word; word-break: break-word; } .noBreak { white-space: nowrap; } .clickable{ cursor: pointer; } .indent{ text-indent: 10px; } .md .subduedText{ font-weight: lighter; } .md .subduedText_size{ font-size: 90%; line-height: 130%; } /************* Header **************/ .header h1{ height: 75px; margin: 0; width: 300px; } /*this is also h2.sectionTitle*/ .header h2{ margin: 0; position: absolute; z-index: 10; top: 88px; left: 10px; } .header .clear{ margin-top: -1px; } /*system & mobile warnings*/ div.outerWarning div.warning{ /*.warning is used elsewhere*/ font-size: 18px; } div.outerWarning div.mobileAlert{ font-size: 26px; } div.outerWarning .warning p{ margin: 0; } /*content treatment maincontent*/ .contentTitle h1, h1#PageTitle, .mainContent h1, h2.dynamicPageTitle, .Online .sfHead h2/*md sf forms*/, .Online .end h2/*md sf forms receipt*/{ border-bottom-width: 1px; border-bottom-style: solid; clear: both; display: block; margin: 0px 0px 6px; padding: 4px 0px 2px; font-size: 18px; } .Form h1#PageTitle{ font-size: 16px; border: none; padding-bottom: 0; } .Online h1#PageTitle, .Online .sfHead h2, h2.dynamicPageTitle, .Online .end h2{/*to make room for the utility nav*/ margin: 0 0 6px 0; } .Emt h1#PageTitle{/*fix border-bottom hiding in ie6 */ position: relative; } sup.tm{/*french tm*/ font-size: 0.9em; vertical-align: super; text-transform: lowercase; font-variant: small-caps; } sub.tm{/*french tm*/ font-size: 0.9em; vertical-align: sub; text-transform: lowercase; font-variant: small-caps; } /***** Copy treatment (MDSB) ******/ div.highlight{ border-style: solid; border-width: 1px; margin-bottom: 20px; padding: 10px 4px 6px 4px; } /*************** Disclaimer ***************/ .disclaimer{ padding: 35px 2px; } .disclaimer img{ float: left; } /***** footer copyright ******/ .md p.footerCopyright{ font-size: 11px; } /***** Link treatment (MDSB) ******/ span.secondaryInfo, div.secondaryInfo{ font-size: 11px; } /******* inside page .promo Regression note: same class as homepage *******/ /*promo(small) - minor - major*/ .md .promo{ float: right; margin: 0px 0px 4px; position: relative; width: 136px; } .md .promo br{ font-size: 1px; line-height: 1px; display: block; clear: both; } .md .minor{ float: left; width: 256px; } .minor .hd{ float: left; width: 150px; } .md .major{ float: none; width: 394px; } /*promo header and paragraph*/ .promo h3{ padding: 4px; margin: 0; } .promo p{ padding: 0px 4px 4px; font-size: 11px; margin: 0; } .minor p{ padding: 4px; } .major h3{ padding: 4px 8px; margin: 0; } .major p{ font-size: 12px; padding: 4px 8px; } /*promo cta*/ .promo ul.calltoaction{ margin: 0px 0px 0px 14px; padding: 4px 0px 0px 4px; } .major ul.calltoaction{ padding-left: 8px; } .collapsable{ display: block; clear: both; } /*.collapsable .control .collapsableContent*/ .collapsable .control, .collapsableLevel2 .controlLevel2{ cursor:pointer; text-decoration:underline; } .collapsable .control:hover, .collapsableLevel2 .controlLevel2:hover{ text-decoration:none; } /*if js enabled collapsed class is added*/ .collapsed .collapsableContent, .collapsedLevel2 .collapsableContentLevel2{ display:none; } /* MRR-30170 */ body.Online form .collapsable .collapsableContent { width: 330px; } .collapsable .controlIcon, .collapsableLevel2 .controlIcon{ padding-left: 15px; } .hiddenInlineControl, .hiddenBlockControl{ display: none; } .javascript .hiddenBlockControl{ display: block; } .javascript .hiddenInlineControl{ display: inline; font-weight: normal; font-size: 11px; } .javascript .collapsable .showText, .javascript .collapsableLevel2 .showText{ display: none; } .javascript .collapsable .hideText, .javascript .collapsableLevel2 .hideText{ display: inline; } .javascript .collapsed .showText, .javascript .collapsedLevel2 .showText{ display: inline; } .javascript .collapsed .hideText, .javascript .collapsedLevel2 .hideText{ display: none; } /* If JavaScript enabled, hide these and let 'formShowHideControls.js' do the processing (MDSB: ON CT form) */ .javascript div.formElementHide{ display: none; } /******* Alert ********/ .alert{ padding: 10px 10px 5px; margin-bottom: 5px; border-width: 1px; border-style: solid; } /******* Image alignment (MDSB) ********/ .imgLeft{ float: left; margin-right: 16px; } .imgRight{ float: right; margin-left: 16px; } /******* Image and Caption (Tour Template) ********/ /*imageandcaption*/ .imageandcaption .image{ display: block; float: left; margin: 3px 8px 8px 0; padding: 0; } .imageandcaption .caption ul, .imageandcaption .caption ol{/*Fix the floating issues with lists*/ list-style-position:inside; margin-left: 0px; padding-left: 0px; } /*action links*/ .imageandcaption .rightActionLinks{ float: right; margin: 0 0 8px 0; } .imageandcaption .actionLinks ul{ list-style-image: none; list-style-type: none; margin: 0; } .imageandcaption .actionLinks ul li{ display: block; float: left; padding: 0 5px; margin: 0; background: url(/DynamicContent/Resources/Images/Navigation/globalmarker.gif) 0 3px no-repeat; } .imageandcaption .actionLinks ul li.link0{background-image: none;} /*paging controls*/ .pagingControls{ display: block; float:right; margin: 0 5px 0 0; clear: both; } .pagingControls .previous, .pagingControls .action, .pagingControls .next{ float: left; font-weight: bold; padding-right: 5px; } /******* Content Call to Action ********/ .contentCalltoaction{ background-position: 5px center; background-repeat: no-repeat; border: 1px solid; padding: 10px 10px 10px 25px; } /******* Help ********/ .md .helpSelect{/*fixing the margin below the dropdown*/ margin: 0 0 10px 0; } /******* demos ********/ .md .flashDemos{ margin-bottom: 1em; } /******* Hopefully we can get rid of this one day as it is all pixel based widths and has been refactored to containerTreatments.css ********/ div.contentBlocks{ margin-bottom: 12px; overflow: hidden; width: 732px; } .colTwo .contentBlocks, .colTwo .contentBlock{ width: 520px; } div.contentCallOuts{ border-style: solid; border-width: 1px; width: 730px; } .colTwo .contentCallOuts{ width: 518px; } div.contentBlock{ float: left; overflow: hidden; padding: 0; width: 732px; } .contentCallOuts .contentBlock{ padding: 8px 8px 0 8px; width: 714px; } .colTwo .contentCallOuts .contentBlock{ width: 502px; } .contentBlocks2Col .contentBlock{ margin-right: 8px; width: 362px; } .colTwo .contentBlocks2Col .contentBlock{ width: 256px; } .contentCallOuts2Col .contentBlock{ width: 349px; } .colTwo .contentCallOuts2Col .contentBlock{ width: 243px; } .contentBlocks3Col .contentBlock{ margin-right: 8px; width: 238px; } .colTwo .contentBlocks3Col .contentBlock{ width: 168px } .contentCallOuts3Col .contentBlock{ width: 227px; } .colTwo .contentCallOuts3Col .contentBlock{ width: 156px; } .contentBlocks4Col .contentBlock{ margin-right: 8px; width: 177px; } .contentCallOuts4Col .contentBlock{ width: 166px; } .contentBlocks2Col .contentBlockN, .contentBlocks3Col .contentBlockN, .contentBlocks4Col .contentBlockN{ margin-right: 0; } .contentBlock h3{ margin: 0 0 8px 0; } .contentBlock h3:focus-within{ margin: 2px 2px 8px; } .contentBlock img{ float: left; padding: 0 8px 8px 0; } div.contentCenter{ text-align: center; } .contentCenter img, .contentBlock img.contentCenter{ float: none; margin: 0 auto; padding: 0 0 8px 0; } .contentBlock img.contentRight{ float: right; padding: 0 0 8px 8px; } /***** End ******/ a.callOutAction{ border-style: solid; border-width: 1px; margin-bottom: 10px; padding: 8px; } .md a.noLinkAnchor { text-decoration: inherit; outline: none; } /***** JavaScript Items - don't work without JavaScript need to be hidden by default ******/ .calcTotalResult{ display: none; } .javascript .calcTotalResult{ display: table-footer-group; } /*ShowHideSwitch*/ .javascript p.selected, .javascript span.selected, .javascript h2.selected, .javascript h3.selected, .javascript p.unselected, .javascript span.unselected, .javascript h2.unselected, .javascript h3.unselected{ text-decoration: underline; } /***** Long Call to action Main part is just like regular content ******/ .md .Component-LongCallToAction { padding: 0; margin: 0; /*when not inside mainContent margin is on the elements*/ position: relative; clear: both; } .md .Component-LongCallToAction:after { content: ""; display: table; clear: both; } .md .mainContent .Component-LongCallToAction { margin: 0 0 12px 0; } .Component-LongCallToAction .simple h2{ margin: 0 0 8px 0; } .Component-LongCallToAction .simple h3{ margin: 0 0 8px 0; } /*inside mainContent*/ .mainContent .Component-LongCallToAction.hasCallout{ float: left; width: 100%; clear: both; } .mainContent .Component-LongCallToAction.hasCallout .section{ clear: none; } .Component-LongCallToAction.hasCallout .callout, .Component-LongCallToAction.hasCallout .simple{/*when not inside main content*/ margin-bottom: 12px; } .mainContent .Component-LongCallToAction.hasCallout .simple{ float: left; padding: 0 212px 0 0; margin: 0; } .mainContent .Component-LongCallToAction .callout + .simple{ float: right; padding: 0 0 0 212px; } .mainContent .Component-LongCallToAction .callout{ float: left; position: relative; margin: 0 -200px 0 0; width: 200px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .mainContent .Component-LongCallToAction .simple + .callout { float: right; margin: 0 0 0 -200px; } .Component-LongCallToAction .callout h3{ padding: 8px 8px 0; margin: 0 0 8px 0; } .Component-LongCallToAction .callout .copy{ padding: 0 8px 8px; } .Component-LongCallToAction .callout .Component-Button{ float: none; margin: 0; } .Component-LongCallToAction .callout .Component-Button a{ float: none; } .Component-LongCallToAction .callout .Component-Button a{ display: block; margin: 0; } .Component-LongCallToAction .callout .Component-Button a::after{ content: normal; } /**** Component EventGroup - here because we won't be using the portlet classes anymore *****/ .md .Component-EventGroup{ clear: both; margin: 0 0 1em; } .md .Component-EventGroup h2 { margin-bottom: 0; padding: 5px 10px; } .md .Component-EventGroup .event-item { clear: both; padding-bottom: 1.5em; padding-top: 1.5em; } .md .Component-EventGroup .event-item:first-child{ border: none; } .md .Component-EventGroup .date { -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; float: left; margin-right: 2%; padding: 10px 6px; text-align: center; text-transform: uppercase; width: 80px; } .md .Component-EventGroup .month { margin-left: 0; width: 100%; } .md .month.end { display: none; } .md .Component-EventGroup .day { display: inline; font-size: 20px; font-weight: bold; } .day.end:before { content: " - "; } .md .Component-EventGroup .event { overflow: hidden; } .md .Component-EventGroup .title { font-size: 14px; font-weight: bold; margin-bottom: 1em; margin-right: 2%; } .md .Component-EventGroup span.location { display: block; font-size: 12px; font-style: italic; font-weight: normal; } .md .Component-EventGroup .description { overflow: hidden; } .md .Component-EventGroup h2 { font-size: 15px; } .md .Component-EventGroup .title, .md .Component-EventGroup .title a { color: #ca1905; } .md .Component-EventGroup .title span { color: #000000; } /***** Expandable content ******/ .md div.Component-ExpandableContent { clear: both; position: relative; margin-bottom: 12px; } .md div.Component-ExpandableContent .expandableTitle { position: relative; padding-right: 50px; } .md div.Component-ExpandableContent h1, .md div.Component-ExpandableContent h2, .md div.Component-ExpandableContent h3, .md div.Component-ExpandableContent h4, .md div.Component-ExpandableContent h5 { margin: 0.6em 0; padding: 0; } .md div.Component-ExpandableContent .expandableToggle { position: absolute; text-indent: -9999px; width: 17px; height: 100%; top: 0; right: 0; outline: none; } .md div.Component-ExpandableContent .content .actions { list-style-type: none; margin: 0 0 20px 0; } .md div.Component-ExpandableContent .content .actions li { padding-left: 12px; } .md .Component-ExpandableContent h2, .md .Component-ExpandableContent h2 a, .md .Component-ExpandableContent h3, .md .Component-ExpandableContent h3 a, .md .Component-ExpandableContent h4, .md .Component-ExpandableContent h4 a, .md .Component-ExpandableContent h5, .md .Component-ExpandableContent h5 a { color: #ca1905; } .md .Component-ExpandableContent .calltoaction a { text-decoration: none; } .md .Component-ExpandableContent .calltoaction a::before { color: #ca1905; content: "\00bb"; font-size: 13px; height: 7px; left: 3px; line-height: 5px; position: absolute; top: 4px; z-index: 2; } .md .Component-ExpandableContent ul.calltoaction { padding: 0; } .md .Component-ExpandableContent .calltoaction li { padding-left: 15px; } .md .Component-ExpandableContent .calltoaction li::before { background-image: none; } /***** Document List ******/ .md ul.Component-DocumentList { clear: both; margin: 0 0 20px 0; padding: 0; list-style-type: none; } .md ul.Component-DocumentList h3{ margin: 0; padding: 5px 0; } .md ul.Component-DocumentList li { margin: 0; padding: 5px 5px 10px 48px; position: relative; } .md ul.Component-DocumentList li:before{ content: ''; display: block; width: 32px; height: 32px; position: absolute; top: 10px; left: 10px; background-position: 0 0; background-repeat: no-repeat; } .md ul.Component-DocumentList li.pdf:before{ background-position: 0 -96px; } .md ul.Component-DocumentList li.xls:before{ background-position: 0 -32px; } .md ul.Component-DocumentList li.doc:before{ background-position: 0 -64px; } .md ul.Component-DocumentList li.img:before{ background-position: 0 -128px; } .md ul.Component-DocumentList p:last-child { margin: 0; } .md ul.Component-DocumentList h3 { font-size: 14px; font-weight: normal; } .md ul.Component-DocumentList h3 a { color: #ca1905; text-decoration: none; } .md ul.Component-DocumentList h3 a:hover { text-decoration: underline; } /***** Short Call to action ******/ .md .Component-ShortCallToAction { clear: both; margin: 0 0 12px; } .md .Component-ShortCallToAction a { display: block; padding: 10px 10px 10px 20px; background-repeat: no-repeat; } .md .Component-ShortCallToAction { overflow: auto; position: relative; } .md .Component-ShortCallToAction a, .md .Component-ShortCallToAction a:visited{ background-color: #ca1905; background-image: none; border: 2px solid #ca1905; box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.6); color: #ffffff; float: left; font-size: 13px; line-height: 1; margin-bottom: 5px; padding: 7px 30px 6px 25px; text-decoration: none; position: relative; } .md .Component-ShortCallToAction a::before { color: #fff; content: "\00bb"; font-size: 13px; height: 7px; left: 14px; line-height: 5px; position: absolute; top: 10px; z-index: 2; } .md .Component-ShortCallToAction a:hover, .md .Component-ShortCallToAction a:visited:hover{ background-color: #AC1100; border: 2px solid #AC1100; color: #FFFFFF; } .Component-ShortCallToAction a::after{ background: url("/DynamicContent/Resources/Images/imgMatrix.png") no-repeat scroll -502px -30px transparent; content: ""; height: 32px; position: absolute; right: -7px; top: -2px; width: 7px; z-index: 3; } .Component-ShortCallToAction a:hover:after{ background-position: -502px -63px; } /***** Button Call to Action ******/ .md .Component-Button{ clear: right; float: right; margin: 0 0 12px 0; } .md .Component-Button:after{ content: ''; clear: both; display: block; } .md .Component-Button a{ display: block; float: right; padding: 8px 9px; text-decoration: none; } .md .Component-Button a:after{ content: '\00a0\00a0\00BB'; } .md .authentication .Component-Button, .md .oneClickOpenAnywhere .Component-Button { float: none; margin-bottom: 0; padding: 5px; } .md .authentication .Component-Button a, .md .oneClickOpenAnywhere .Component-Button a { float: none; text-align: center; } /*duplcating buttons to avoid !important*/ .md .Component-Button{ float: none; } .md .Component-Button a, .md .Component-Button a:visited{ position: relative; border: 2px solid #ca1905; border-right: none; color: #fff; display: inline-block; line-height: 1; text-decoration: none; background-color: #ca1905; -webkit-box-shadow: 1px 1px 2px rgba(0,0,0,0.6); box-shadow: 1px 1px 2px rgba(0,0,0,0.6); -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; font-size: 13px; height: 30px; margin: 0 8px 0 0; position: relative; padding: 7px 30px 6px 25px; z-index: 1; filter: none; float: none; } .md .Component-Button a:before, .md .Component-Button a:hover:before{ color: #fff; content: "\00BB"; font-size: 13px; height: 7px; left: 14px; line-height: 5px; position: absolute; top: 10px; z-index: 2; border: none; } .md .Component-Button a:after{ background: url("/DynamicContent/Resources/Images/imgMatrix.png") no-repeat scroll -502px -30px transparent; content: ""; height: 32px; position: absolute; right: -7px; top: -2px; width: 7px; z-index: 3; } .md .Component-Button a:hover, .md .Component-Button a:visited:hover{ color: #fff; background-color: #AC1100; border-color: #AC1100; } .md .Component-Button a:hover:after{ background-position: -502px -63px; } /***** Disclaimer text ******/ .md .Component-Disclaimer{ clear: both; margin: 10px 0; padding: 10px; font-size: 0.8em; } .md .Component-Disclaimer p:last-child{ margin-bottom: 0; } /**/ /***** Blockquotes - class to avoid regression ******/ blockquote.Component-Blockquote{ border-width: 1px; clear: both; padding: 13px; margin: 0 0 13px; } blockquote.Component-Blockquote h3{ margin: 0 0 5px 0; } blockquote.Component-Blockquote p:last-child{ margin-bottom: 0; } blockquote.Component-Blockquote { border-width: 2px; } /***** Component-Marketing ******/ .md .Component-Marketing{ clear: both; margin: 0 0 12px 0; position: relative; } .md .Component-Marketing > :first-child{ margin-top: 0; padding-top: 0; } .md .Component-Marketing .imageWrapper{ display: block; margin: 0 0 1px 0; } .md .Component-Marketing .imageWrapper img{ display: block; } .md .Component-Marketing .copy{ padding: 12px 0; } .md .Component-Marketing .Icon-Help, .md .Component-Marketing .Icon-Forms, .md .Component-Marketing .Icon-Contact, .md .Component-Marketing .Icon-Information, .md .Component-Marketing .Icon-Alert, .md .Component-Marketing .Icon-Performance, .md .Component-Marketing .Icon-NewProduct, .md .Component-Marketing .Icon-Custom{ position: relative; padding-left: 45px; } .md .Component-Marketing .overlayContent{ position: absolute; padding-top: 0; padding-right: 12px; width: 100%; -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */ -moz-box-sizing: border-box; /* Firefox, other Gecko */ box-sizing: border-box; /* Opera/IE 8+ */ } .md .Component-Marketing .copy h3{ margin: 0 0 12px 0; } .md .Component-Marketing .copy p:last-child{ margin-bottom: 0; } .md .Component-Marketing .Component-Button{ float: none; margin: 0 0 1px 0; } .md .Component-Marketing .Component-Button a{ display: block; float: none; text-align: right; } /*icons used in .Component-Marketing*/ .Component-Marketing .Icon-Help, .Component-Marketing .Icon-Forms, .Component-Marketing .Icon-Contact, .Component-Marketing .Icon-Information, .Component-Marketing .Icon-Alert, .Component-Marketing .Icon-Performance, .Component-Marketing .Icon-NewProduct, .Component-Marketing .Icon-Custom{ position: relative; padding-left: 45px; } .Component-Marketing .Icon-Custom{/*when custom this is a bg image*/ background-position: top left; background-repeat: no-repeat; } .Component-Marketing .Icon-Help:before, .Component-Marketing .Icon-Forms:before, .Component-Marketing .Icon-Contact:before, .Component-Marketing .Icon-Information:before, .Component-Marketing .Icon-Alert:before, .Component-Marketing .Icon-Performance:before, .Component-Marketing .Icon-NewProduct:before{ content: ''; display: block; position: absolute; height: 32px; width: 32px; background-position: top left; background-repeat: no-repeat; left: 0; } .Component-Marketing .Icon-Help:before{background-position: 0 0px;} .Component-Marketing .Icon-Forms:before{background-position: 0 -32px;} .Component-Marketing .Icon-Contact:before{background-position: 0 -64px;} .Component-Marketing .Icon-Information:before{background-position: 0 -96px;} .Component-Marketing .Icon-Alert:before{background-position: 0 -160px;} .Component-Marketing .Icon-Performance:before{background-position: 0 -128px;} .Component-Marketing .Icon-NewProduct:before{background-position: 0 -192px;} .md .Component-Marketing .Component-Button a { text-align: left; display: inline-block; } /*base portlet*/ .md .colOne .Component-Marketing, .md .colThree .Component-Marketing{ background: transparent !important; border: 1px solid #ca1905; margin-right: 0; padding: 15px; position: relative; border-right-width: 0; } .md .colOne .Component-Marketing{ border-right-width: 1px; border-left-width: 0; } /*border gradients on flex/html portlet*/ .md .colOne .Component-Marketing:before, .md .colOne .Component-Marketing:after, .md .colThree .Component-Marketing:before, .md .colThree .Component-Marketing:after{ background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIwIi8+CiAgICA8c3RvcCBvZmZzZXQ9Ijk1JSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIwLjk1Ii8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); background: -moz-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,0.95) 95%); background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(255,255,255,0)), color-stop(95%,rgba(255,255,255,0.95))); background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,0.95) 95%); background: -o-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,0.95) 95%); background: -ms-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,0.95) 95%); background: linear-gradient(to right, rgba(255,255,255,0) 0%,rgba(255,255,255,0.95) 95%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=1 ); content: ""; height: 1px; position: absolute; right: 0; top: -1px; width: 100%; } .md .colOne .Component-Marketing:after, .md .colThree .Component-Marketing:after{ bottom: -1px; top: auto; } .md .colOne .Component-Marketing:before, .md .colOne .Component-Marketing:after{ background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIwIi8+CiAgICA8c3RvcCBvZmZzZXQ9Ijk1JSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIwLjk1Ii8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); background: -moz-linear-gradient(right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.95) 95%); background: -webkit-gradient(linear, 100% 0, 0 0, from(rgba(255,255,255,0)), color-stop(0.95, rgba(255,255,255,0.95))); background: -webkit-linear-gradient(right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.95) 95%); background: -o-linear-gradient(right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.95) 95%); background: -ms-linear-gradient(right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.95) 95%); background: linear-gradient(right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.95) 95%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=1 ); left: 0; right: auto; } .md .colOne .Component-Marketing img, .md .colThree .Component-Marketing img{ margin-bottom: 10px; max-width: 100%; } .md .colOne .Component-Marketing .calltoaction, .md .colThree .Component-Marketing .calltoaction{ margin-top: 0; } .md .colOne .Component-Marketing.noBorder, .md .colThree .Component-Marketing.noBorder{ background-image: none; padding: 0; } .md .colOne .Component-Marketing.noBorder:before, .md .colOne .Component-Marketing.noBorder:after, .md .colThree .Component-Marketing.noBorder:before, .md .colThree .Component-Marketing.noBorder:after{ display: none; } /**** Component Quicknav - here because we won't be using the portlet classes anymore *****/ .md .Component-Quicknav{ clear: both; margin: 0 0 12px 0; } .md .Component-Quicknav h3{ margin: 0 0 6px 0; } .md .Component-Quicknav select{ max-width: 100%; } .md .Component-Quicknav .submit{ clear: both; display: block; margin-top: 4px; } .md .Component-Quicknav{ border: none; } .md .Component-Quicknav input { margin-top: 0 !important; } .md .Component-Quicknav .btnWrap { margin-top: 5px; } .md .Component-Quicknav .btnWrap::before { top: 11px !important; } /**** Component Shortcuts - here because we won't be using the portlet classes anymore ****/ .md .Component-Shortcuts{ clear: both; margin: 0 0 12px 0; } .md .Component-Shortcuts h3{ margin: 0 0 6px 0; } .md .Component-Shortcuts span.heading{ margin: 0 0 6px 0; } .md .Component-Shortcuts ul{ margin: 0; padding: 0; list-style: none; } .md .Component-Shortcuts li{ margin: 0; padding: 0 0 6px 17px; position: relative; } .md .Component-Shortcuts li:before{ content: ''; background-position: -2px -1px; background-repeat: no-repeat; display: block; position: absolute; top: 0; left: 0; width: 15px; height: 15px; } .md .Component-Shortcuts{ border: none; } .md .Component-Shortcuts h3{ margin: 0 0 10px 0; } .md .Component-Shortcuts li{ padding: 0; margin: 0; } .md .Component-Shortcuts li::before { background-image: none !important; } .md .Component-Shortcuts a { text-decoration: none; padding: 0 0 3px 14px; } .md .Component-Shortcuts a::before { color: #ca1905; content: " \00bb"; font-size: 12px; height: 7px; left: 0; position: absolute; top: 0; z-index: 2; } /***** Component-RatesTable ******/ div.Component-RatesTable{ display: block; clear: both; } div.Component-RatesTable:after { content: ""; display: table; clear: both; } .Component-RatesTableCompact table thead th{ font-size: 13px; } .Component-RatesTableCompact table, .Component-RatesTableCompact table th, .Component-RatesTableCompact table td{ border: none; padding: 4px 8px 4px 0; } /**/ /***** Component-ContactFormlet Only affects the universal template. In fact all Component- classes do ******/ .Component-ContactFormlet h3{ margin: 0 0 8px 0; } .md .Component-ContactFormlet{ margin: 0 0 12px 0; } /**/ .Component-Carousel > .slide{ display: none; } .Component-Carousel > .slide:first-child{ display: block; } /*base slick.css*/ .md .slick-slider{ position: relative; display: block; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-touch-callout: none; -khtml-user-select: none; -ms-touch-action: pan-y; touch-action: pan-y; -webkit-tap-highlight-color: transparent; } .slick-slider .slick-list{ position: relative; display: block; overflow: hidden; margin: 0; padding: 0; } .slick-slider .slick-list:focus{ outline: none; } .slick-slider .slick-list.dragging{ cursor: pointer; cursor: hand; } .slick-slider .slick-slider .slick-track, .slick-slider .slick-slider .slick-list{ -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .slick-slider .slick-track{ position: relative; top: 0; left: 0; display: block; } .slick-slider .slick-track:before, .slick-slider .slick-track:after{ display: table; content: ''; } .slick-slider .slick-track:after{ clear: both; } .slick-slider .slick-loading .slick-track{ visibility: hidden; } .slick-slider .slick-slide{ display: none; float: left; height: 100%; min-height: 1px; } .slick-slider .slick-slide img{ display: block; } .slick-slider .slick-slide.slick-loading img{ display: none; } .slick-slider .slick-slide.dragging img{ pointer-events: none; } .slick-initialized .slick-slide{ display: block; } .slick-loading .slick-slide{ visibility: hidden; } .slick-vertical .slick-slide{ display: block; height: auto; border: 1px solid transparent; } /*slick-theme.css*/ .slick-loading .slick-list{ background-position: center center; background-repeat: no-repeat; } /* Arrows */ .slick-slider .slick-prev, .slick-slider .slick-next{ font-size: 0; line-height: 0; position: absolute; top: 50%; display: block; padding: 0; cursor: pointer; color: transparent; border: none; outline: none; background: transparent; z-index: 1001; } .slick-slider .slick-prev:hover, .slick-slider .slick-prev:focus, .slick-slider .slick-next:hover, .slick-slider .slick-next:focus{ color: transparent; outline: none; background: transparent; } .slick-slider .slick-prev:hover:before, .slick-slider .slick-prev:focus:before, .slick-slider .slick-next:hover:before, .slick-slider .slick-next:focus:before{ opacity: 1; } .slick-slider .slick-prev.slick-disabled:before, .slick-slider .slick-next.slick-disabled:before{ opacity: .25; } .slick-slider .slick-prev:before, .slick-slider .slick-next:before{ line-height: 1; opacity: .75; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .slick-slider .slick-dots{ position: absolute; z-index: 1001; margin: 0; display: block; width: 100%; padding: 0; list-style: none; text-align: center; } .slick-slider .slick-dots li{ position: relative; display: inline-block; margin: 0 5px; padding: 0; cursor: pointer; } .slick-slider .slick-dots li button{ font-size: 0; line-height: 0; display: block; padding: 5px; cursor: pointer; color: transparent; border: 0; outline: none; background: transparent; } .slick-slider .slick-dots li button:hover, .slick-slider .slick-dots li button:focus{ outline: none; } .slick-slider .slick-dots li button:hover:before, .slick-slider .slick-dots li button:focus:before{ opacity: 1; } .slick-slider .slick-dots li button:before{ position: absolute; top: 0; left: 0; text-align: center; opacity: .25; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .slick-slider .slick-dots li.slick-active button:before{ opacity: .75; } .slick-slider .slick-slide img{ width: 100%; height: auto; } .slick-slider .slick-slide a{ display: block; } .slick-slider .slick-track{ max-height: 100%; overflow: hidden; } /* MTCC Targeted Marketing */ #marketing-carousel .slick-slider .slick-dots { position: static; z-index: auto; text-align: left; } #marketing-carousel .slick-dots li:before{ content: normal; } .slick-slider .slick-dots { bottom: 25px; left: 27px; width: auto; } .slick-slider .slick-dots li { background: #887e6e none repeat scroll 0 0; height: 10px; margin: 0 2px 0 0; padding: 0; position: relative; width: 10px; } .slick-slider .slick-dots li.slick-active { background: #ca1905 none repeat scroll 0 0; } .slick-slider .slick-dots li button { height: 10px; padding: 0 !important; width: 10px; } .slick-slider .slick-dots li button::before { content: none; } /***** Component-Random-Images ******/ .md .Component-RandomImages{ position: relative; } /**/ /*even in posistion 2 we want the text to be centered*/ .md .outerImageCopy{ display: block; margin-left: auto; margin-right: auto; margin-bottom: -1px; width: 960px; height: 1px; } .md .imageCopy{ position: absolute; width: 300px; top: 20%; text-align: center; left: 50%; margin-left: -150px; } .imageCopy h2{ font-size: 22px; margin: 0 0 15px 0; } .imageCopy .copy{ font-size: 18px; margin: 0 0 5px 0; } .imageCopy ul.actions{ text-align: center; } .imageCopy ul.actions li{ display: block; } .imageCopy ul.actions a{ display: inline-block; padding: 10px 15px; } .imageCopy .actionPrimary a{ border-style: solid; border-width: 1px; display: block; float: left; font-weight: bold; outline: medium none; padding: 2px 10px; text-decoration: none; } /**/ /************* buttons **************/ /*button group*/ .md .btn_group{ position: relative; } .md .btn_group_opposed{ text-align: right; } /*buttons*/ .md .btn{ border-style: solid; border-width: 1px; cursor: pointer; height: 20px; margin: 0; opacity: 1; filter:alpha(opacity=100); padding: 2px 12px; white-space: nowrap; overflow: hidden; } .md .btn_group_segmented .btn { border-left-width: 0; } .md .btn_group_segmented .btn:first-child { border-left-width: 1px; } .md .btn_icon{ background-position: 0 -638px; background-repeat: no-repeat; display: block; float: left; height: 8px; width: 8px; margin: 0 auto; } .btn_icon_only{ padding: 0 12px; } .md .btn_icon_down{ background-position: 0 -638px; } .btn:hover .btn_icon_down{ background-position: 0 -670px; } .md .btn_icon_up{ background-position: 0 -702px; } .btn:hover .btn_icon_up{ background-position: 0 -734px; } .md .btn_icon_left{ background-position: 2px -768px; } .btn:hover .btn_icon_left{ background-position: 2px -800px; } .md .btn_icon_right{ background-position: 2px -832px; } .btn:hover .btn_icon_right{ background-position: 2px -864px; } .md .btn_text{ margin-right: 8px; } .btn_icon_only .btn_text{ display: block; height: 0; margin-right: 0; text-indent: -9999px; } .md .btn_cta{ display: inline-block; height: 20px; line-height: 20px; text-decoration: none; padding: 10px 20px; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; } /* in tables */ .sortable .header .btn_icon{ display: inline-block; float: none; } .sortable .header_hide_icon .btn_icon{ display: none; } .sortable .header_sort_asc .btn_icon{ background-position: 0 -702px; } .sortable .header_sort_asc:hover .btn_icon{ background-position: 0 -734px; } .sortable .header_sort_desc .btn_icon{ background-position: 0 -638px; } .sortable .header_sort_desc:hover .btn_icon{ background-position: 0 -670px; } /*shared*/ input[type=submit], input[type=button]{ -webkit-appearance: none; border-radius: 0; font-weight: normal; } .formActions input#Continue, .formActions input.continue, .submit input#Continue, .submit input.continue{ font-weight: normal; } /* Next buttons submits*/ .colContainer span.btnWrap input, .colContainer span.btnWrap button, .Home-New .colContainer .mdlogon .submit input{ -webkit-appearance: none; background-color: #ca1905; border: none; -webkit-box-shadow: 1px 1px 2px rgba(0,0,0,0.6); box-shadow: 1px 1px 2px rgba(0,0,0,0.6); -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; font-size: 13px; height: 30px; margin: 0; padding: 9px 40px 8px 27px; z-index: 1; } span.btnWrap, .Home-New .colContainer .mdlogon .submit{ position: relative; cursor: pointer; display: inline-block; margin-right: 28px; } li span.btnWrap, .Home-New .colContainer .mdlogon .submit{ margin-right: 0; } .btnWrap:before, .Home-New .colContainer .mdlogon .submit:before{ color: #fff; content: "\00BB"; font-size: 13px; height: 7px; left: 14px; line-height: 5px; position: absolute; top: 12px; z-index: 2; } .ie8 .btnWrap:before{ top: 10px; } span.btnWrap:after, .Home-New .colContainer .mdlogon .submit:after{ background: transparent url(/DynamicContent/Resources/Images/imgMatrix.png) -502px -30px no-repeat; content: ""; height: 32px; position: absolute; right: -7px; top: 0; width: 7px; z-index: 3; } span.btnWrap input:hover, span.btnWrap button:hover, .Home-New .colContainer .mdlogon .submit input:hover{ background-color: #ac1100; } .ie8 span.btnWrap input:hover, .ie8 span.btnWrap button:hover{ cursor: pointer;/*need to declare a hover state in order for the following selector to work in IE8*/ } span.btnWrap:hover input, span.btnWrap:hover button{ background-color: #ac1100; } span.btnWrap:hover:after{ background-position: -502px -63px; } .colContainer span.btnWrap input, .colContainer span.btnWrap button, .Home-New .colContainer .mdlogon .submit input{ color: #fff; cursor: pointer; font-weight: normal; padding-top: 0; padding-bottom: 2px; padding-left: 24px;/*slight difference in padding required for inputs*/ text-align: left; } .ie8 .colContainer .btnWrap input, .ie8 .colContainer .btnWrap button{ padding-left: 27px; } .mdlogon .btnWrap input, .authentication.link .btnWrap input, .Home-New .colContainer .mdlogon .submit input{ width: 100%; } .formActions .btnWrap input{ padding-right: 7px; } .loginPortlet .authentication .submit input{ font-size: 13px; } .loginPortlet .authentication .submit input#Continue{/*overriding some terrible css in portlets*/ font-weight: normal; padding-bottom: 2px; padding-left: 24px; } .ie8 .loginPortlet .authentication input#Continue{ padding-left: 27px; } form.locatorportlet .submit input.submit{ float: none; padding: 0 13px 2px 24px; position: static; } /*transparent bg w/ white border & shadow*/ .authentication.in .btnWrap:after{ background-position: -502px -196px; right: -3px; } .authentication.in .btnWrap:hover:after{ background-position: -502px -63px; } .authentication.in .btnWrap input{ background-color: transparent; border: 2px solid #fff; border-right-width: 0; padding: 4px 10px 4px 24px; } .ie8 .authentication.in .btnWrap input{ padding-bottom: 6px; } .authentication.in .btnWrap input:hover{ background-color: #ac1100; border-color: #ac1100; } .geoBranchAtm span.btnWrap input{ padding-left: 24px; padding-right: 13px; } /******* Previous and and edit buttons *******/ .colContainer span.prevBtnWrap input{ background-color: #fff; border: 2px solid #887e6e; border-left-width: 0; -webkit-box-shadow: -1px 1px 2px rgba(0,0,0,0.6); box-shadow: -1px 1px 2px rgba(0,0,0,0.6); -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; padding: 0px 24px 2px 40px; text-decoration: none; font-size: 13px; height: 30px; margin: 0; z-index: 1; color: #887e6e; } span.prevBtnWrap{ margin-right: 20px; margin-left: 8px; cursor: pointer; display: inline-block; position: relative; } .colContainer span.prevBtnWrap:hover input{ background-color: #ffffff; color: #ac1100; cursor: pointer; } span.prevBtnWrap:before{ background: transparent url(/DynamicContent/Resources/Images/imgMatrix.png) -514px -178px; no-repeat; content: ""; height: 32px; position: absolute; left: -7px; right: auto; top: 0; width: 7px; z-index: 3; } .ie8 span.prevBtnWrap:before{ top: 0px; } span.prevBtnWrap:after{ color: #887E6E; content: "\00AB"; background: #fff; font-size: 13px; height: 7px; right: 14px; line-height: 5px; position: absolute; top: 12px; z-index: 2; } .ie8 span.prevBtnWrap:after{ top: 10px; } .colContainer span.prevBtnWrap:hover:after{ color: #ac1100; } /***** Make cancels that are inputs look like text ******/ #Cancel, div.submit .formButton.cancel, div.submit .formButton.iDoNotAgree, div.submit .formButton.iDoNotAccept{ background-color: transparent; border: none; -webkit-box-shadow: none; box-shadow: none; color: #000; cursor: pointer; height: auto; text-decoration: underline; float: left; margin-right: 10px; padding: 7px 0; } #Cancel:hover, div.submit .formButton.cancel:hover, div.submit .formButton.iDoNotAgree:hover, div.submit .formButton.iDoNotAccept:hover{ background-color: transparent; color: #ca1905; text-decoration: none; } /**** anchors for content entering - some css repeated to keep seperate default Red with Red hover ****/ .md a.btn, .md .vcBtn, .md .Component-FindBranchAtmSearchForm .UXM-Component-Button, .md a.btn:visited, .md .vcBtn:visited, .md .Component-FindBranchAtmSearchForm .UXM-Component-Button:visited{ border: 2px solid #ca1905; border-right: none; color: #fff; display: inline-block; line-height: 1; text-decoration: none; background-color: #ca1905; -webkit-box-shadow: 1px 1px 2px rgba(0,0,0,0.6); box-shadow: 1px 1px 2px rgba(0,0,0,0.6); -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; font-size: 13px; height: 30px; margin: 0 8px 0 0; position: relative; padding: 7px 30px 6px 25px; z-index: 1; filter:none; overflow: visible; } .md a.btn:before, .md a.btn:hover:before, .md .vcBtn:before, .md .vcBtn:hover:before, .md .Component-FindBranchAtmSearchForm .UXM-Component-Button:before, .md .Component-FindBranchAtmSearchForm .UXM-Component-Button:hover:before{ color: #fff; content: "\00BB"; font-size: 13px; height: 7px; left: 14px; line-height: 5px; position: absolute; top: 10px; z-index: 2; } .md a.btn:after, .md .vcBtn:after, .md .Component-FindBranchAtmSearchForm .UXM-Component-Button:after{ background: url("/DynamicContent/Resources/Images/imgMatrix.png") no-repeat scroll -502px -30px transparent; content: ""; height: 32px; position: absolute; right: -7px; top: -2px; width: 7px; z-index: 3; } .ie8 .md a.btn:after, .ie8 .md .vcBtn:after, .ie8 .md .Component-FindBranchAtmSearchForm .UXM-Component-Button:after{ height: 30px; overflow: hidden; } .md .Component-FindBranchAtmSearchForm input.searchQuery, .md .Component-FindBranchAtmSearchForm .UXM-Component-Button { display: none; } .md a.btn:hover, .md a.btn:visited:hover, .md .vcBtn:hover, .md .vcBtn:visited:hover, .md .Component-FindBranchAtmSearchForm .UXM-Component-Button:hover, .md .Component-FindBranchAtmSearchForm .UXM-Component-Button:visited:hover{ color: #fff; background-color: #AC1100; border-color: #AC1100; } .md a.btn:hover:after, .md .vcBtn:hover:after, .md .Component-FindBranchAtmSearchForm .UXM-Component-Button:hover:after{ background-position: -502px -63px; } .md .Component-FindBranchAtmSearchForm .UXM-Component-Button{ border-radius: 0; text-transform: none; } /*level 2 red border, white background*/ .md .vcBtnLvl2, .md .vcBtnLvl2:visited{ background-color: #ffffff; color: #ca1905; border-color: #ca1905; } .md .vcBtnLvl2:before{ color: #ca1905; } .md .vcBtnLvl2:after{ background-position: -502px -96px; } /*level 3 grey border, white background*/ .md .vcBtnLvl3, .md .vcBtnLvl3:visited{ background-color: #ffffff; color: #867d74; border-color: #867d74; } .md .vcBtnLvl3:before{ color: #867d74; } .md .vcBtnLvl3:after{ background-position: -502px -129px; } /*reversed. White border, transparent bg. hover full white*/ .md .vcBtnRev, .md .vcBtnRev:visited{ background-color: transparent; color: #ffffff; border-color: #ffffff; -webkit-box-shadow: none; box-shadow: none; } .md .vcBtnRev:before{ color: #ffffff; } .md .vcBtnRev:after{ background-position: -502px -162px; } .md .vcBtnRev:hover, .md .vcBtnRev:visited:hover{ color: #ca1905; background-color: #ffffff; border-color: #ffffff; } .md .vcBtnRev:hover:after{ background-position: -502px -230px; } .md .vcBtnRev:hover:before{ color: #ca1905; } .md .vcBtnRev:after{ height: 30px; overflow: hidden; } /*previous. White border, transparent bg. hover full white*/ .md .vcBtnPrev, .md .vcBtnPrev:visited{ border: 2px solid #867d74; border-right: 2px solid #867d74; border-left: none; color: #867d74; background-color: #ffffff; -webkit-box-shadow: -1px 1px 2px rgba(0,0,0,0.6); box-shadow: -1px 1px 2px rgba(0,0,0,0.6); margin: 0 0 0 8px; position: relative; padding: 7px 25px 6px 30px; z-index: 1; } .md .vcBtnPrev:before, .md .vcBtnPrev:hover:before{ background: transparent url(/DynamicContent/Resources/Images/imgMatrix.png) -514px -178px no-repeat; content: ""; height: 32px; position: absolute; left: -7px; right: auto; top: -2px; width: 7px; z-index: 3; } .md .vcBtnPrev:after{ color: #887E6E; content: "\00AB"; position: absolute; left: auto; right: 14px; top: 6px; width: auto; height: auto; background-image: none; } .ie8 .md .vcBtnPrev:after{ height: 30px; overflow: hidden; } .md .vcBtnPrev:hover, .md .vcBtnPrev:visited:hover{ color: #ca1905; background-color: #ffffff; border-color: #867d74; } .md .vcBtnPrev:hover:before{ background-position: -514px -178px; } .md .vcBtnPrev:hover:after{ color: #ca1905; } /************* Bars **************/ .md .bar{ padding: 4px; } .md .bar_block{ margin: -4px -4px 8px; } .md .bar_block_snug{ margin: -4px -4px 1px; } .md .bar_tight{ margin: 0; } /**/ .md .heading_split{ border-bottom-style: solid; border-bottom-width: 1px; } .md .heading_icons{ line-height: 20px; } .md .heading_filter{ line-height: 26px; padding-right: 200px; } /**/ /************* General list augmentation **************/ .md .noBullets{ list-style-type: none; margin-left: 0; padding-left: 0; } .md .noBullets_snug{ margin-bottom: 4px; } /******** Inline Lists Default based on "add a payee" *********/ ul.inline{ list-style-type: none; display: block; clear: both; margin: 0 0 12px 0; padding: 0; } ul.inline li{ background: none; padding: 0px 3px 0px 0px; margin: 0px; display: inline; } ul.inline li a{ padding: 0 1px; } /********* document list *********/ ul.documentlist{ margin:0; padding:0; } ul.documentlist li{ display:block; margin: 0 0 4px 0; padding: 4px; border-width: 1px; border-style: solid; } ul.documentlist h5{ margin: -4px -4px 4px -4px; padding:8px 4px 8px 38px; border-bottom-width: 1px; border-bottom-style: solid; background-position: 4px 50%; background-repeat: no-repeat; font-size: 13px; } /****** Block DL Default based on "add a payee" *******/ dl.block{ margin: 0px 0px 15px 0px; padding: 0; display: block; clear: both; } dl.block dt{ font-weight: bold; display: block; clear: both; margin: 0px; padding: 0px; } dl.block dd a:focus{ margin: 0px 0px 2px 2px; } dl.block dd{ margin:0px 0px 2px 0px; padding: 0px; } /****** Total DL Default based on Account Summary accounts total *******/ .md .inlineTotal{ border-top: 2px solid #ABABAB; font-size: 18px; margin-top: 8px; padding-top: 8px; text-align: right; } .inlineTotal dt, .inlineTotal dd{ display: inline; font-weight: bold; } .inlineTotal dd{ margin-left: 8px; } /** IconChecklist - list items have custom image icon *// ul.iconChecklist { padding-left: 15px; } /*bulleted*/ .mainContent ul, .mainContent ol{ margin: 0 0 20px 0; padding: 0 0 0 16px; } .mainContent ul, .mainContent ol{ list-style: none; } .mainContent li{ position: relative; } .mainContent ul li:before, .mainContent ul li.nav-default:before{ background: transparent url(/DynamicContent/Resources/Images/imgMatrix.png) -512px -30px no-repeat; content: ""; width: 6px; height: 6px; font-size: 10px; left: -14px; position: absolute; top: 5px; } .mainContent .calcJS ul li:before{ display: none; } /*numbered*/ /*http://www.456bereastreet.com/archive/201105/styling_ordered_list_numbers/*/ .mainContent ol{ counter-reset: li; } .mainContent ol li{ padding-left: 5px; } .mainContent ol li:before{ color: #ca1905; content: counter(li)"."; counter-increment: li; left: -16px; position: absolute; text-align: right; width: 18px; } .mainContent ol ol{ margin: 8px 0 10px 0; padding-left: 5px; } .mainContent ol ol li{ padding-left: 12px; } .mainContent ol ol li:before{ content: counter(li, lower-roman)"."; width: 25px; } /*numbered errors*/ .errors ol li:before{ -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; left: -25px; line-height: 1.2; top: 3px; } .ie8 .errors ol li:before{ top: 3.5px; } /*added after easy layout because marketing was converted to html. Too global?*/ .colThree ul, .colOne ul{ margin: 0 0 10px; padding: 0 0 0 10px; } .colThree ul li, .colOne ul li{ list-style: none; } .colThree ul a, .colOne ul a{ display: block; list-style: none; padding: 0 0 3px 14px; text-decoration: none; } /*"unique" style*/ .colThree ul li:before, .colOne ul li:before, .contentColumns ul li:before, .loginPortlet li:before, .portlets .portlet ul li:before, a.actionMore:before, .mdgst + .topic li:before, .receipts + .topic li:before, ul.footer li:before, ul.viewportToggle li:before, .mainContent ul li.nav-highlight:before{ background: transparent; color: #ca1905; content: "\00BB"; float: left; font-size: 12px; top: 0; } .ie8 .contentColumns ul li:before, .ie8 .loginPortlet li:before, .ie8 .portlets .portlet ul li:before, .ie8 a.actionMore:before, .ie8 .mdgst + .topic li:before, .ie8 .receipts + .topic li:before, .ie8 ul.footer li:before, .ie8 ul.viewportToggle li:before, .ie8 .mainContent ul li.nav-highlight:before{ font-size: 12px; top: 0; } .contentColumns li a, ul.footer li a{ text-decoration: none; } /*exceptions*/ .nav ul{ margin: 0; padding: 0; } ul.inline li:before, .agreement ol li:before{ display: none; } /*2 column lists*/ ul[class^="split"], ol[class^="split"]{ -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; float: left; width: 50%; } ul.splitLeft, ol.splitLeft{ padding-right: 10px; } .splitRight:before, .splitRight:after{ content: " "; display: table; } .splitRight:after{ clear: both; } .mainContent .vcInvestmentSharesv2 .formSection ol li:before{ color: #000; font-size: 15px; } .mainContent .vcInvestmentSharesv2Step3 .formSection ol li:before, .mainContent .vcInvestmentSharesv2StepConfirm .formSection ol li:before{ display: none; } .vcInvestmentSharesv2StepConfirm div.formPageConfirmation ul { font-weight: normal !important; } .vcInvestmentSharesv2Step3 .formatText { display: none; } /***** Rates table ******/ table.rates{ border-width: 0 1px 1px 1px; margin-bottom: 12px; } table.rates td, table.rates th{ border-width: 1px 0 0 0; } table.rates th{ text-align:left; } table.rates td, table.rates .value{ text-align: right; } table.rates tbody th{ font-weight: normal; } /***** Sortable table ******/ body.waiting{ cursor: wait; } .javascript .sortable th, .javascript .sortable th label{ cursor: pointer; } .javascript .sortable th label{ text-decoration: underline; } /****************** table modifiers The following remove default syle ******************/ .md table.noBorder, .md table.noBorder tr, .md table.noBorder th, .md table.noBorder td{ border-style: none; } .md table.noBGColor, .md table.noBGColor tr, .md table.noBGColor th, .md table.noBGColor td{ background-color: transparent; } .md table.textual{ width:auto; } .md table.textual th, .md table.textual td{ margin:0; padding: 0 4px 0 0; } .md table.noTH th, .md table.noTH tr.header, .md table.noTH tr.header td, .md table.noTH tr.header th, .md table.noTH thead tr, .md table.noTH thead td, .md table.noTH thead th, .md table.noTH tfoot th, .md table.noTH tfoot td{ font-weight:normal; background-color:inherit; color:inherit; text-align:left; } table.noStripeUnselected tr.even, table.noStripeUnselected tr.even td, table.noStripeUnselected tr.even th{ background-color:inherit; color:inherit; } .md table.noStripe tr.even, .md table.noStripe tr.even td, .md table.noStripe tr.even th, .md table.noStripe tr.odd, .md table.noStripe tr.odd td, .md table.noStripe tr.odd th, .md table.noStripe tr.evenSelected, .md table.noStripe tr.evenSelected td, .md table.noStripe tr.evenSelected th, .md table.noStripe tr.oddSelected, .md table.noStripe tr.oddSelected td, .md table.noStripe tr.oddSelected th{ background-color:inherit; color:inherit; } .md table.snug{ margin-bottom: 4px; } .md .fixedTableHeader { position: relative; overflow-x: hidden; overflow-y: auto; } .md table.fixedLayout{ table-layout: fixed; } .simple table, table.rates{ border: none; position: relative; } .md tr.even td, .md tr.even th{ background-color: transparent; } .simple table:before, table.rates:before{ background: transparent url(/DynamicContent/Resources/Images/imgMatrix.png) 0 -292px repeat-x; content: ""; height: 3px; left: 0; position: absolute; top: 0; width: 100%; display: block; } .ie8 .simple table, .ie8 table.rates{ border-top: 2px dotted #CA1905; } .simple table{ background-color: transparent; background-position: left bottom; background-repeat: repeat-x; } .ie8 .simple table{ background: none; border-bottom: 2px dotted #CA1905; } .simple tbody tr, table.rates tbody tr, table.rates tfoot tr{ background-color: transparent; background-image: url(data:image/gif;base64,R0lGODlhBAABAIAAAAAAAP///yH/C1hNUCBEYXRhWE1QPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS4zLWMwMTEgNjYuMTQ1NjYxLCAyMDEyLzAyLzA2LTE0OjU2OjI3ICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtbG5zOnhtcD0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLyIgeG1wTU06T3JpZ2luYWxEb2N1bWVudElEPSJ4bXAuZGlkOkZDN0YxMTc0MDcyMDY4MTE4MjJBQTREQjFDMDg1Q0ZBIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjkxOTc5MDg4QTQ3RTExRTI5NjYyRDBGQ0E2QTNDNTEzIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjkxOTc5MDg3QTQ3RTExRTI5NjYyRDBGQ0E2QTNDNTEzIiB4bXA6Q3JlYXRvclRvb2w9IkFkb2JlIFBob3Rvc2hvcCBDUzYgKE1hY2ludG9zaCkiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpGQzdGMTE3NDA3MjA2ODExODIyQUE0REIxQzA4NUNGQSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpGQzdGMTE3NDA3MjA2ODExODIyQUE0REIxQzA4NUNGQSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PgH//v38+/r5+Pf29fTz8vHw7+7t7Ovq6ejn5uXk4+Lh4N/e3dzb2tnY19bV1NPS0dDPzs3My8rJyMfGxcTDwsHAv769vLu6ubi3trW0s7KxsK+urayrqqmop6alpKOioaCfnp2cm5qZmJeWlZSTkpGQj46NjIuKiYiHhoWEg4KBgH9+fXx7enl4d3Z1dHNycXBvbm1sa2ppaGdmZWRjYmFgX15dXFtaWVhXVlVUU1JRUE9OTUxLSklIR0ZFRENCQUA/Pj08Ozo5ODc2NTQzMjEwLy4tLCsqKSgnJiUkIyIhIB8eHRwbGhkYFxYVFBMSERAPDg0MCwoJCAcGBQQDAgEAACH5BAAAAAAALAAAAAAEAAEAAAICRF4AOw==); background-position: left top; background-repeat: repeat-x; } table.rates tbody tr:first-child, .simple tbody tr:first-child{ background: none; } .simple th, .simple td, table.rates td, table.rates th{ background-color: transparent; border-top-width: 0; border-right-width: 0; border-bottom-width: 1px; border-left-width: 1px; padding: 8px 9px; } table.rates td, table.rates th{ border-left-width: 0; } .simple td, .simple tbody th, table.rates td, table.rates tbody th{ border-bottom: none; } .simple th:first-child, .simple td:first-child, .rates th:first-child, .rates td:first-child{ padding-left: 0; border-left-width: 0; } .simple th:last-child, .simple td:last-child, .rates th:last-child, .rates td:last-child{ padding-right: 0; } .simple tr:first-child th, .rates tr:first-child th{ padding-top: 12px; } .simple tr:last-child td{ border-bottom-width: 0; padding-bottom: 12px; } .rates tr:last-child td{ border-bottom-width: 1px; padding-bottom: 8px; } .rates tfoot th{ background-color: transparent; border-bottom-width: 0; } .md .Component-RatesTable table.rates, .md .Component-RatesTable table.rates td, .md .Component-RatesTable table.rates th { border-color: #ca1100; } /*links*/ .nav a, .portlet a{ text-decoration: none; } .mainContent a:visited{ color: #887e6e; } a.btn:visited{ color: #fff; } .portlet a:visited{ text-decoration: underline; } /*add hover color here to override brand?*/ .md h1 a:visited, .md h2 a:visited, .md h3 a:visited, .md h4 a:visited{ color: #000; } .md a:hover, .md h1 a:hover:visited, .md h2 a:hover:visited, .md h3 a:hover:visited, .md h4 a:hover:visited{ color: #ca1905; } /*main page headings*/ .contentTitle h1, h1#PageTitle, .Online h1#PageTitle, .Online .sfHead h2,/*md sf forms*/ .Online .end h2{/*md sf forms receipt*/ border: none; font-size: 40px; font-weight: normal; line-height: 1; margin: 0 0 24px 0; padding: 0; } .mainContent h1{ border: none; padding: 0; } /*maincontent paragraphs*/ .mainContent p{ line-height: 1.6; } /*logo*/ a.logo, a.vancityLogo{ -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; color: #000; display: block; font-size: 40px; height: 75px; position: absolute; text-align: center; width: 224px; z-index: 1; text-indent: -9999px; } a.logo .imgOverlay{ display: block; position: absolute; left: 0; height: 75px; width: 220px; color: white; top: 30px; background-color: #F04E39; margin-top: -15%; border-radius: 0px 0px 20px 20px; } /*main content*/ .mainContent h1:first-child{ margin-top: 0; } /*site alert & warning*/ div.siteAlert{ border: 2px solid #ca1905; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; display: inline-block; font-size: 13px; margin: 0 25px 6px 25px; padding: 15px 65px 15px 75px; position: relative; width: 920px; } .warning:before, .warning i, .siteAlert:before{ background: transparent url(/DynamicContent/Resources/Images/imgMatrix.png) -298px -192px no-repeat; content: ""; position: absolute; top: 50%; left: 15px; height: 49px; margin-top: -24.5px; width: 49px; } .warning h4, .siteAlert h4{ color: #ca1905; display: inline; font-size: 18px; font-weight: normal; margin: 0; } .warning p, .siteAlert p{ display: inline; font-size: 18px; margin: 0; } .confirmation .warning:before { content: normal; display: none; } div.outerWarning{ border: none; } div.outerWarning div.warning{ -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; padding: 15px 15px 15px 75px; position: relative; text-align: left; } .warning:before, .warning i{ left: 0; } .ie7 .warning h4{ font-size: 18px; } .ie7 .warning h4, .ie7 .warning .browserName{ *display: inline; padding-right: 4px; *zoom: 1; } .warning span{ font-weight: bold; } /*content123 promos*/ .Content123 .promo{ float: none; margin: 0 -25px 20px -25px; width: auto; } /*alert*/ div.alert{ padding: 10px 10px 5px 10px; } /*other*/ .md small{ font-size: 11px; } /*squamish*/ .Squamish .logo{ left: -16px; height: 110px; padding: 25px 0; width: 270px; top: 0; } .Squamish .logo .imgOverlay{ background: transparent url(/DynamicContent/Resources/Images/imgMatrixSq.png) 0 0 no-repeat; left: 0; height: 110px; width: 270px; top: 70px; } .Squamish .logo .imgOverlay svg { display: none !important; } a.vancityLogo{ bottom: 64px; font-size: 16px; height: 89px; left: auto; padding: 25px 0; right: 0; width: 147px; } /* a.vancityLogo .imgOverlay{ display: block; background: transparent url(/DynamicContent/Resources/Images/imgMatrixSq.png) -270px 0 no-repeat; height: 89px; left: 0; position: absolute; width: 147px; top: 0; } */ a.vancityLogo .imgOverlay{ display: block; position: absolute; left: -23px; height: 48px; width: 169px; top: 41px; background-color: #F04E39; border-radius: 10px 10px 0px 0px; color: #FFFFFF; } .md sup{ font-size: 75%; } div.outerWarning div.mobileAlert{ font-size: 24px; } .colThree div.Component-StandardContent { margin-bottom: 12px; } .colThree .Component-StandardContent h2 { margin-top: 0; } .colThree .Component-StandardContent { padding-bottom: 0 !important; } /************* making things accessbile to assistive technologies only **************/ .md .assistive{ height: 1px; margin-top: -1px; overflow: hidden; text-indent: 100%; white-space: nowrap; width: 1px; } /**/ /************* actions dropdown **************/ .md .actions_dropdown{ border-style: solid; border-width: 1px; border-radius: 3px; display: none; float: right; list-style-type: none; margin: 1px 0 0; padding: 4px 0 0; position: absolute; right: 0; top: 100%; z-index: 100; } .md .actions_dropdown_opposed{ left: 0; right: auto; } .md .actions_dropdown_up { top: auto; bottom: 100%; } .actions_dropdown a{ display: block; padding: 4px 12px; text-decoration: none; white-space: nowrap; outline: 0; } .md .actions_opposed{ text-align: right; } .md .value_stacked{ clear: both; display: block; } /**/ /************* hover behaviours and such **************/ .visibleOnHover{ visibility: hidden; } .hover .visibleOnHover{ visibility: visible; } .invisibleOnHover{ visibility: visible; } .hover .invisibleOnHover{ visibility: hidden; } .showOnHover{ display: none; } .hover .showOnHover{ display: block; } .hideOnHover{ display: block; } .hover .hideOnHover{ display: none; } /************* Set height to match bars eg. Budget/spending analysis tables *************/ table.progressBarsTable td{ line-height: 22px; padding-bottom: 1px; padding-top: 1px; } /************* eg. Budget health status bars div.progressBarContainer [ progressBarContainer_alignRight | progressBarContainer_alignCenter | progressBarContainer_over | progressBarContainer_under | progressBarContainer_near | progressBarContainer_negative ] div.progressBar span.description **************/ .md .progressBarContainer{ border-style: solid; border-width: 1px; line-height: 18px; padding: 0; position: relative; text-align: left; } .progressBarContainer .progressBar{ border-style: solid; border-width: 1px; -mox-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; height: 20px; white-space: nowrap; } .progressBarContainer_zero .progressBar { border-width: 0; visibility: hidden; } .progressBarContainer_noBorder .progressBar{ border-width: 0; } .progressBarContainer .description{ padding-left: 2px; padding-right: 2px; } .md .progressBarContainer_alignRight{ text-align: right; } .progressBarContainer_alignCenter .description{ left: 0; position: absolute; text-align: center; width: 100%; } /**/ /********** Content Containers/Layouts ***********/ /*content columns*/ div.contentColumns{ -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; clear: both; overflow: hidden; width: 100%; } div.contentColumnsBorder{ border-style: solid; border-width: 1px; } div.columnGroup{ overflow: hidden; width: 100%; } div.contentColumn{ -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; float: left; padding: 8px 8px 0; width: 100%; } .OAOLanding div.contentColumn{ text-align: center; } .contentColumns_snugHorizontal .contentColumn{ padding-left: 0; padding-right: 0; } .contentColumns_snugVertical .contentColumn{ padding-top: 0; } div.contentColumn > div *:first-child{ margin-top: 0; } .columnGroup2Col .contentColumn{ width: 50%; } .columnGroup3Col .contentColumn{ width: 33.333333%; } .columnGroup4Col .contentColumn{ width: 25%; } .columnGroup5Col .contentColumn{ width: 20%; } /*block*/ .md .block{ -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; overflow: hidden; margin-bottom: 12px; width: 100%; } .md .block_cushion{ padding: 4px 4px 0; } .md .block_cushion_all{ padding: 4px; } .md .block_cushion_all_thick{ padding: 12px; } .md .block_spacing{ margin-bottom: 12px; } .md .block_tight{ margin-bottom: 0; } .md .block_scrollable{ height: 200px; overflow-y: auto; width: 100%; } .md .block_border{ border-style: solid; } .md .block_border_all{ border-width: 1px; } .md .block_border_bottom{ border-bottom-width: 1px; } .md .block_border_left{ border-left-width: 1px; } .md .block_border_right{ border-right-width: 1px; } .md .block_border_top{ border-top-width: 1px; } . .md .block_marker{ margin: -1px; padding: 16px 12px 12px; position: relative; } .md .block_marker:before{ border-left: 8px solid transparent; border-right: 8px solid transparent; content: ""; height: 0; left: 0; position: absolute; top: 0; width: 0; } div.contentColumns{ position: relative; } .contentColumns:before{ background: transparent url(/DynamicContent/Resources/Images/imgMatrix.png) 0 -287px repeat-x; content: ""; height: 4px; left: 0; position: absolute; top: 0; width: 100%; } div.contentColumns.section{ margin-bottom: 0; } div.columnGroup{ position: relative; } .columnGroup:after{ background: transparent url(/DynamicContent/Resources/Images/imgMatrix.png) 0 -287px repeat-x; bottom: 0; content: ""; height: 4px; left: 0; position: absolute; width: 100%; } div.contentColumn{ padding: 24px 20px 18px 24px; position: relative; } .contentColumn:last-child{ padding-right: 0; } .columnGroup0 .contentColumn0:after, .columnGroup0.columnGroup3Col .contentColumn1:after{ top: 7px; } .contentColumn0:after, .columnGroup3Col .contentColumn1:after{ background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAICAYAAADeM14FAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAEVJREFUeNpifGeoIsrAwDABiNmAuIAFSMQCcRQDBFwDCRwB4u9AzAzEB0ECp4BYHirwggWq9DWUZmD8//8/AzIgLAAQYACouxI1336I5AAAAABJRU5ErkJggg==); background-repeat: repeat-y; content: ""; position: absolute; height: 200%; right: -2px; top: 4px; width: 4px; } .columnGroup3Col .contentColumn1:after{ left: 304px; } .contentColumn div.section{ margin: 0; } .contentColumn h2{ margin-bottom: 18px; } .contentColumn h2 a, .contentColumn h2 a:visited{ color: #ca1905; text-decoration: none; } .contentColumn h2 a:hover, .contentColumn h2 a:hover:visited{ color: #ca1905; text-decoration: underline; } /*2col within a full-width layout*/ .podSpan2L > div:first-child, .podSpan2R > div:last-child{ width: 66.66666%; } .podSpan2L > div:last-child, .podSpan2R > div:first-child{ width: 33.33333%; } /*fullwidth*/ .columnGroup1Col .contentColumn0:after{ display: none; } /*image treatments*/ .columnGroup1Col h2{ /*display: inline-block;*/ /*width: 75%;*/ } .columnGroup2Col h2, .columnGroup3Col h2{ /*display: inline-block;*/ /*width: 66%;*/ } .imageHalfWidth h2{ width: 50% } .contentColumn img{ max-width: 100%; } .contentColumn h2+img{ float: right; padding: 0 0 10px 10px; max-width: 33%; } .imageHalfWidth h2+img{ max-width: 45% } /*image only pod*/ .contentColumn.imageOnly{ padding: 3px 3px 3px 0; } /*social content*/ div.socialContent{ background-image: none; margin: 18px -25px 0 -25px; width: auto; } .socialRow.columnGroup{ background-color: #f2ece4; } /* .socialRow:after{ background-position: 0 -277px; height: 9px; top: 0; } */ .socialRow:after{ display: none; } .socialItem.contentColumn{ padding: 0 0 90px 0; position: static; } .socialItem.contentColumn0, .socialItem.contentColumn2{ width: 34%; } .socialItem.contentColumn1{ /*border: 3px solid #fff;*/ /*border-width: 0 3px;*/ width: 32%; } /*.socialItem.contentColumn:last-child{ border: none; }*/ .contentColumn.socialItem:after{ display: none; } .socialItem div.simple{ margin-bottom: -9999px; padding: 0 20px 9999px 20px; } .socialItem.contentColumn0 .simple{ padding-left: 32px; } .socialItem.contentColumn1 .simple{ border: 3px solid #fff; border-width: 0 3px; } div.socialHead{ position: relative; } div.socialItem.contentColumn .socialHead{/*just to override a very specific selector*/ margin: 0 -20px 16px -20px; } div.socialItem.contentColumn0 .socialHead{/*just to override a very specific selector*/ margin-left: -32px; } .socialHead img{ max-width: 330px; } .socialItem.contentColumn1 .socialHead img{ max-width: 304px; } .socialItem.contentColumn h2{ margin-top: 0; } .socialItem .actionMore{ border: 1px dashed #ca1905; border-width: 1px 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; bottom: 38px; display: block; font-size: 12px; left: 25px; padding: 10px 5px; position: absolute; text-align: right; text-decoration: none; width: 280px; } .socialItem .actionMore:before{ float: none; margin-right: 5px; } .socialItem.contentColumn1 .actionMore{ left: 355px; width: 260px; } .socialItem.contentColumn2 .actionMore{ left: auto; right: 25px; } /*alerts*/ .md .block_marker:before{ display: none; } .md .block_cushion{ padding: 5px 5px 0; } .md .bar_block_snug{ margin: -5px -5px 1px; } .md h4.bar_block_snug{ font-size: 13px; } .md .block_marker{ padding-bottom: 5px; } /********** Content Layouts ***********/ /*spending analysis*/ div.spendingCol1, div.spendingCol2{ min-height: 50px; } div.spendingCol1{ float: left; width: 160px; } div.spendingCol2{ width: 350px; float: right; } div.spendingGraph{ clear: both; height: 160px; width: 160px; } div.spendingFilter{ margin-bottom: 8px; overflow: auto; } div.spendingFilter label { float: left; padding: 4px 4px 0; } div.spendingFilter form label:first-child { padding-left: 0; } div.spendingFilter div.selectWrapper { float: left; overflow: hidden; width: 125px; } /**/ #ModModalWrapper{ position: static; } .md .modal{ border-width: 1px; border-style: solid; -webkit-box-shadow: 0 8px 6px -6px black; -moz-box-shadow: 0 8px 6px -6px black; box-shadow: 0 8px 6px -6px black; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; float: left; padding: 12px; position: fixed; width: 520px; z-index: 1000; } .md .modal_noChrome{ border-style: solid; border-width: 1px; border-radius: 15px; height: auto; padding: 0; width: auto; } .md .modal_noShadow{ -webkit-box-shadow: 0 0 0 0 transparent; -moz-box-shadow: 0 0 0 0 transparent; box-shadow: 0 0 0 0 transparent; } .md .modal_noPadding{ padding: 0; } .md .overlay_decorator{ filter: alpha(opacity=80); height: 100%; left: 0; opacity: 0.8; position: fixed; top: 0; width: 100%; z-index: 10000; zoom: 1; } .md .overlay_wrap{ display: block; height: 100%; left: 0; overflow: auto; position: fixed; top: 0; width: 100%; z-index: 10001; } .md .overlay{ display: table; height: 100%; margin: 0 auto; position: relative; vertical-align: middle; z-index: 20000; } .md .spinner_overlay { position: fixed; top: 0; left: 0; height: 100%; width: 100%; z-index: 30000; background-color: rgba(0,0,0,0.5); } .md .spinner_container { display: flex; justify-content: center; align-items: center; position: absolute; top: -15vh; } .md .spinner_modal { display: flex; flex-flow: column; align-items: center; width: 520px; height: 249px; top: 50%; left: 50%; background-color: white; border-radius: 5px; text-align: center; z-index: 30001; /* 1px higher than the overlay layer */ position: sticky; } .md .spinner_modal .title { font-family: "Trebuchet MS"; font-weight: bold; color: #333333; font-size: 18px; alignment: center; line-height: 21px; margin-top: 20px; margin-bottom: 10px; } .md .spinner_modal .description { font-family: "Trebuchet MS"; font-weight: normal; color: #333333; font-size: 13px; alignment: center; line-height: 15px; } .ml-loader { position: relative; width: 70px; height: 70px; margin-top: 53px!important; } .ml-loader div { -webkit-transform-origin: 32px 32px; -ms-transform-origin: 32px 32px; transform-origin: 32px 32px; -webkit-animation: 1.2s opaque ease-in-out infinite both; animation: 1.2s opaque ease-in-out infinite both; } .ml-loader div::after { content: ""; display: block; position: absolute; top: 0; left: 30px; width: 5px; height: 18px; border-radius: 10px; background-color: #000000; } .ml-loader div:nth-child(1) { -webkit-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0); } .ml-loader div:nth-child(2) { -webkit-transform: rotate(30deg); -ms-transform: rotate(30deg); transform: rotate(30deg); -webkit-animation-delay: 0.1s; animation-delay: 0.1s; } .ml-loader div:nth-child(3) { -webkit-transform: rotate(60deg); -ms-transform: rotate(60deg); transform: rotate(60deg); -webkit-animation-delay: 0.2s; animation-delay: 0.2s; } .ml-loader div:nth-child(4) { -webkit-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); -webkit-animation-delay: 0.3s; animation-delay: 0.3s; } .ml-loader div:nth-child(5) { -webkit-transform: rotate(120deg); -ms-transform: rotate(120deg); transform: rotate(120deg); -webkit-animation-delay: 0.4s; animation-delay: 0.4s; } .ml-loader div:nth-child(6) { -webkit-transform: rotate(150deg); -ms-transform: rotate(150deg); transform: rotate(150deg); -webkit-animation-delay: 0.5s; animation-delay: 0.5s; } .ml-loader div:nth-child(7) { -webkit-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg); -webkit-animation-delay: 0.6s; animation-delay: 0.6s; } .ml-loader div:nth-child(8) { -webkit-transform: rotate(210deg); -ms-transform: rotate(210deg); transform: rotate(210deg); -webkit-animation-delay: 0.7s; animation-delay: 0.7s; } .ml-loader div:nth-child(9) { -webkit-transform: rotate(240deg); -ms-transform: rotate(240deg); transform: rotate(240deg); -webkit-animation-delay: 0.8s; animation-delay: 0.8s; } .ml-loader div:nth-child(10) { -webkit-transform: rotate(270deg); -ms-transform: rotate(270deg); transform: rotate(270deg); -webkit-animation-delay: 0.9s; animation-delay: 0.9s; } .ml-loader div:nth-child(11) { -webkit-transform: rotate(300deg); -ms-transform: rotate(300deg); transform: rotate(300deg); -webkit-animation-delay: 1s; animation-delay: 1s; } .ml-loader div:nth-child(12) { -webkit-transform: rotate(330deg); -ms-transform: rotate(330deg); transform: rotate(330deg); -webkit-animation-delay: 1.1s; animation-delay: 1.1s; } .ml-loader div:nth-child(13) { -webkit-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg); -webkit-animation-delay: 1.2s; animation-delay: 1.2s; } @-webkit-keyframes opaque { 0%, 40%, 100% { opacity: 0.1; } 40% { opacity: 1; } } @keyframes opaque { 0%, 40%, 100% { opacity: 0.1; } 40% { opacity: 1; } } .md .dialog_wrap{ display: table-cell; vertical-align: middle; } .md .dialog{ border-style: solid; border-width: 2px; position: relative; outline: none; } .md .modalContent{ max-height: 450px; overflow-y: auto; padding: 0 1px; } .md .modal h1, .md .modal h2, .md .modal h3 { margin-top: 0px; } .md .modal .modal_heading{ padding: 0 0 10px; } .md .modal div.formActions{ padding-top: 8px; padding-bottom: 8px; } .md .modal_close{ background-position: 0 -609px; background-repeat: no-repeat; display: block; height: 31px; position: absolute; right: -16px; text-indent: -9999px; top: -16px; width: 31px; outline: none; z-index: 1; } .growl_panel{ width: 520px; position: fixed; top: 0px; z-index: 1000; top: 0px; } .growl_panel ul{ margin-bottom: 0px; } .growl_panel li{ background: none repeat scroll 0 0 white; border: 1px solid #BABABA; -webkit-box-shadow: 0 8px 6px -6px black; -moz-box-shadow: 0 8px 6px -6px black; box-shadow: 0 8px 6px -6px black; box-sizing: border-box; padding: 8px; margin-bottom: 4px; } .growl_panel li{ background-color: #ffffcc; } .growl_panel p{ margin-bottom: 0px; width: 440px; } .growl_panel span.close{ float: right; } .md .modal .modal_activity{ display: inline-block; height: 16px; padding-left: 0px; margin: -3px 0 -4px 10px; } .md div .selectedBox { margin-bottom: 6px; } /**/ .md .tip{ -moz-border-radius: 6px; -webkit-border-radius: 6px; border-radius: 6px; -webkit-box-shadow: 0 8px 6px -6px; box-shadow: 0 8px 6px -6px; padding: 8px 8px 0; width: 200px; } .md .tip:before{ background-color: transparent; background-position: top left; background-repeat: no-repeat; content: ""; display: block; float: left; height: 16px; width: 26px; margin-top: -24px; } /* (giant tool tip)
...
*/ div.contentCallout { box-sizing: border-box; position: relative; padding: 15px; border-radius: 3px; } div.contentCallout.bottom, div.contentCallout.bottom-left, div.contentCallout.bottom-right{ margin-bottom: 10px; } div.contentCallout.top, div.contentCallout.top-left, div.contentCallout.top-right{ margin-top: 10px; } div.contentCallout.right, div.contentCallout.right-top, div.contentCallout.right-bottom { margin-right: 10px; } div.contentCallout.left, div.contentCallout.left-top, div.contentCallout.left-bottom{ margin-left: 10px; } div.contentCallout::before { content: ""; width: 0; height: 0; border: 0.8em solid transparent; position: absolute; } div.contentCallout.bottom::before { left: 45%; bottom: -19px; } div.contentCallout.top::before { left: 45%; top: -19px; } div.contentCallout.right::before { right: -19px; top: 35%; } div.contentCallout.left::before { left: -19px; top: 35%; } div.contentCallout.bottom-left::before { left: 7px; bottom: -19px; } div.contentCallout.bottom-right::before { right: 7px; bottom: -19px; } div.contentCallout.top-left::before { left: 7px; top: -19px; } div.contentCallout.top-right::before { right: 7px; top: -19px; } div.contentCallout.right-bottom::before { bottom: 7px; right: -19px; } div.contentCallout.right-top::before { top: 7px; right: -19px; } div.contentCallout.left-bottom::before { bottom: 7px; left: -19px; } div.contentCallout.left-top::before { top: 7px; left: -19px; } /**/ /****************** content tabs - regular and inverted ******************/ .md .contentTabsContainer, .md .contentTabsContainerFaked{ border-bottom-Style: solid; border-bottom-width: 1px; display: block; float: left; margin-bottom: 12px; width: 100%; } .contentTabsContainer .contentTabs, .contentTabsContainerFaked .contentTabs{ border-bottom-Style: solid; border-bottom-width: 1px; display: none;/*Hide real tabs without JS*/ height: 22px; list-style-position: outside; list-style-type: none; margin: 0 0 20px; padding: 0; width: 100%; } .contentTabsContainerFaked .contentTabs,/*Show fake tabs without JS*/ .javascript .contentTabsContainer .contentTabs{/*Show real tabs with JS*/ display: block; } .contentTabsContainerFaked .contentTabHeader, .javascript .contentTabsContainer .contentTabHeader{/*Hide header for each tab with JS*/ display: none; } .contentTabs li{ display: block; float: left; height: 22px; margin: 0 1px 0 0; padding: 0; position: relative; top: 1px; } /*right side*/ .contentTabs a{ background-position: right -66px; background-repeat: no-repeat; display: block; font-weight: bold; overflow: visible; padding-right: 10px; text-decoration: none; } .contentTabs a:not(:focus){ outline-width: 0; outline-style: none; } /*left side*/ .contentTabs span{ background-position: 0 0; background-repeat: no-repeat; cursor: pointer; display: inline-block; line-height: 17px; overflow: hidden; padding-left: 10px; padding-bottom: 2px; padding-top: 3px; } /*current and current hover state for right side of tab*/ .contentTabs .selected a, .contentTabs .selected a:hover{ background-position: right -110px; } /*current and current hover state for left side of tab*/ .contentTabs .selected a span, .contentTabs .selected a:hover span{ background-position: 0 -44px; } /*hover state for right side of tab*/ .contentTabs a:hover{ background-position: right -88px; } /*hover state for left side of tab*/ .contentTabs a:hover span{ background-position: 0 -22px; } /****************************** (flexapp) helper.tabify.js div.tabify [ [ tabify_vertical | tabify_horizontal ](1) | tabify_opposed | tabify_decor [ tabify_decor_image | tabify_decor_border ](1) ]* div.tabify_menu_container ul.tabify_menu li.tabify_tab [ tabify_tab_active ]? // repeatable item div.tabify_tab_content [ tabify_tab_cushion ]? // optional a.tabify_tab_label (href='#') span.tabify_tab_label_text // optional div.tabify_content_container div.tabify_content_frame div.tabify_content div.tabify_page [ ] // repeatable item *******************************/ /* menu base - tabs */ .tabify .tabify_menu_container{ border-style: solid; float: left; position: relative; width: 100%; } .tabify .tabify_menu{ clear: both; list-style-type: none; margin: 0; padding-left: 0; } .tabify .tabify_tab_cushion{ padding: 2px 4px 0 4px; } .tabify .tabify_tab{ cursor: pointer; float: left; margin: 0; overflow: hidden; position: relative; top: 1px; } .tabify_tab .tabify_tab_content{ overflow: hidden; width: auto; } .tabify .tabify_tab_label{ display: block; font-weight: bold; outline-style: none; outline-width: 0; overflow: visible; padding-right: 10px; text-decoration: none; } .tabify .tabify_tab_label:focus{ outline: -webkit-focus-ring-color auto 1px; } .tabify .tabify_tab_label_text{ cursor: pointer; display: block; line-height: 17px; overflow: hidden; padding: 3px 0 2px 10px; width: auto; } /* menu base: tabs - active */ .tabify_decor_border .tabify_tab_active{ z-index: 1; } .tabify_decor_image .tabify_tab_active .tabify_tab_label, .tabify_decor_image .tabify_tab_active .tabify_tab_label:hover{ background-position: right -110px; } .tabify_decor_image .tabify_tab_active .tabify_tab_label_text, .tabify_decor_image .tabify_tab_active .tabify_tab_label:hover .tabify_tab_label_text{ background-position: 0 -44px; } .tabify_decor_border .tabify_tab_content{ border-style: solid; border-width: 1px 1px 0 1px; } /* menu base: opposed */ .tabify_horizontal.tabify_opposed .tabify_menu, .tabify_vertical.tabify_opposed .tabify_menu_container{ float: right; } /* menu base: decorated - decor_image */ .tabify_decor_image .tabify_menu_container{ border-bottom-width: 1px; } .tabify_decor_image .tabify_tab{ height: 22px; } .tabify_decor_image .tabify_tab_label{ background-position: right -66px; background-repeat: no-repeat; display: block; } .tabify_decor_image .tabify_tab_label:hover{ background-position: right -88px; } .tabify_decor_image .tabify_tab_label_text{ background-position: 0 0; background-repeat: no-repeat; } .tabify_decor_image .tabify_tab_label:hover .tabify_tab_label_text{ background-position: 0 -22px; } /* menu base: decorated - decor_border */ /* horizontal layout - menu & tabs */ .tabify_horizontal .tabify_menu{ float: left; } .tabify_horizontal.tabify_decor_border .tabify_menu{ position: relative; top: 2px; } .tabify_horizontal.tabify_decor_border .tabify_tab{ top: -1px; } /* horizontal & opposed layout - menu & tabs */ /* vertical layout - tabify menu & tabs */ .tabify_vertical .tabify_menu_container{ border-width: 0; clear: none; height: 100%; width: 170px; } .tabify_vertical .tabify_menu{ width: 100%; } .tabify_vertical .tabify_tab{ clear: both; float: none; left: 1px; top: 0; width: 100%; } .tabify_vertical .tabify_tab_label{ padding: 0 0 0 10px; } .tabify_vertical.tabify_decor_image .tabify_tab_label{ background-position: 0 0; } .tabify_vertical .tabify_tab_label_text, .tabify_vertical.tabify_opposed .tabify_tab_label{ padding-left: 0; padding-right: 10px; } /* vertical layout: decorated - decor_image */ .tabify_vertical.tabify_decor_image .tabify_tab_label_text{ background-position: right 0; } .tabify_vertical.tabify_decor_image .tabify_tab_label:hover{ background-position: 0 -22px; } .tabify_vertical.tabify_decor_image .tabify_tab_label:hover .tabify_tab_label_text{ background-position: right -22px; } .tabify_vertical.tabify_decor_image .tabify_tab_active .tabify_tab_label, .tabify_vertical.tabify_decor_image .tabify_tab_active .tabify_tab_label:hover{ background-position: 0 -44px; } .tabify_vertical.tabify_decor_image .tabify_tab_active .tabify_tab_label_text, .tabify_vertical.tabify_decor_image .tabify_tab_active .tabify_tab_label:hover .tabify_tab_label_text{ background-position: right -44px; } .tabify_vertical.tabify_decor_image .tabify_menu_container{ left: 0; z-index: 1; } /* vertical layout: decorated - decor_border */ .tabify_vertical.tabify_decor_border .tabify_menu{ top: 0; } .tabify_vertical.tabify_decor_border .tabify_tab{ padding-left: 5px; } .tabify_vertical.tabify_decor_border .tabify_tab_cushion{ padding: 6px 6px 6px 6px; } .tabify_vertical.tabify_decor_border .tabify_tab_content{ border-width: 1px; } .tabify_vertical.tabify_decor_border .tabify_tab_active .tabify_tab_content{ border-right-width: 0; } .tabify_vertical.tabify_decor_border .tabify_tab_active{ -webkit-box-shadow: 0 8px 6px -6px black; -moz-box-shadow: 0 8px 6px -6px black; box-shadow: 0 8px 6px -6px black; padding: 0; } /* vertical & opposed layout - menu & tabs */ .tabify_vertical.tabify_opposed .tabify_tab{ left: 0; } .tabify_vertical.tabify_opposed .tabify_tab_label_text{ padding-left: 10px; padding-right: 0; } /* vertical & opposed layout: decorated - decor_image */ .tabify_vertical.tabify_opposed.tabify_decor_border, .tabify_vertical.tabify_opposed.tabify_decor_image .tabify_menu_container{ left: -1px; } .tabify_vertical.tabify_opposed.tabify_decor_image .tabify_tab_label{ background-position: right -66px; } .tabify_vertical.tabify_opposed.tabify_decor_image .tabify_tab_label_text{ background-position: 0 -66px; } .tabify_vertical.tabify_opposed.tabify_decor_image .tabify_tab_label:hover{ background-position: right -88px; } .tabify_vertical.tabify_opposed.tabify_decor_image .tabify_tab_label:hover .tabify_tab_label_text{ background-position: 0 -88px; } .tabify_vertical.tabify_opposed.tabify_decor_image .tabify_tab_active .tabify_tab_label, .tabify_vertical.tabify_opposed.tabify_decor_image .tabify_tab_active .tabify_tab_label:hover{ background-position: right -110px; } .tabify_vertical.tabify_opposed.tabify_decor_image .tabify_tab_active .tabify_tab_label_text, .tabify_vertical.tabify_opposed.tabify_decor_image .tabify_tab_active .tabify_tab_label:hover .tabify_tab_label_text{ background-position: 0 -110px; } /* vertical & opposed layout: decorated - decor_border */ .tabify_vertical.tabify_opposed.tabify_decor_border .tabify_tab{ left: -5px; padding-left: 0; } .tabify_vertical.tabify_opposed.tabify_decor_border .tabify_tab_active{ left: -1px; padding-left: 0; } .tabify_vertical.tabify_opposed.tabify_decor_border .tabify_tab_content{ padding-left: 11px; left: -5px; } .tabify_vertical.tabify_opposed.tabify_decor_border .tabify_tab_active .tabify_tab_content{ border-left-width: 0; border-right-width: 1px; padding-left: 6px; } /* page base - page content */ .tabify .tabify_content_container{ clear: both; overflow: auto; position: relative; width: 100%; } .tabify .tabify_content_frame{ border-style: solid; height: inherit; overflow: auto; width: auto; } .tabify .tabify_content{ overflow: auto; padding: 8px 8px 0px 8px; width: auto; } .tabify .tabify_content ul li { position: relative; left: 1em; width: 95%; /* necessary to prevent extra width causing overflow */ } .tabify .tabify_page{ display: none; overflow: auto; } .tabify .tabify_page_active{ display: block; width: 100%; } /* horizontal layout - page content */ /* vertical layout - page content */ .tabify_vertical .tabify_content_container{ clear: none; width: auto; } /* page base: decorated - decor_image */ .tabify_vertical.tabify_decor_image .tabify_content_frame{ border-left-width: 1px; } .tabify_vertical.tabify_opposed.tabify_decor_image .tabify_content_frame{ border-left-width: 0; border-right-width: 1px; } /* page base: decorated - decor_border */ .tabify_decor_border .tabify_content_frame{ border-width: 1px; } .md .contentTabsContainer, .md .contentTabsContainerFaked{ border-bottom: none; padding-bottom: 15px; position: relative; } .contentTabsContainer .contentTabs, .contentTabsContainerFaked .contentTabs{ border-bottom: none; height: auto; padding-bottom: 5px; position: relative; } .contentTabs:before{ background: transparent url(/DynamicContent/Resources/Images/imgMatrix.png) 0 -292px repeat-x; bottom: 0; content: ""; height: 3px; left: 0; position: absolute; width: 100%; } .contentTabs:before, .contentTabs:after{ content: ""; display: table; } .contentTabs:after{ clear: both; } .contentTabs li{ -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; height: auto; margin: 0; text-align: center; top: auto; width: 33.333333%; } .contentTabs li:before{ display: none; } .contentTabs a, .contentTabs span{ background-image: none; } .contentTabs a{ border-color: #ca1905; border-style: solid; border-width: 2px 2px 0 2px; font-weight: normal; margin: 0 3px 0 0; padding: 12px 10px; } .contentTabs a:before, .contentTabs a:after{ background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIwIi8+CiAgICA8c3RvcCBvZmZzZXQ9Ijk1JSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIwLjk1Ii8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); background: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0.95) 95%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0)), color-stop(95%,rgba(255,255,255,0.95))); background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,0.95) 95%); background: -o-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,0.95) 95%); background: -ms-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,0.95) 95%); background: linear-gradient(to bottom, rgba(255,255,255,0) 0%,rgba(255,255,255,0.95) 95%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=0 ); bottom: 0; content: ""; height: 100%; position: absolute; left: 0; width: 2px; } .contentTabs a:after{ left: auto; right: 3px; } .contentTabs a:hover span{ color: #000; } .contentTabs li:last-child a{ margin-right: 0; } li.contentTab3 a:after{ right: 0; } .contentTabs .selected a, .contentTabs .selected a:hover, .contentTabs .selected span, .contentTabs .selected a:hover span{ background-color: #ca1905; color: #fff; } .contentTabs .selected a:before, .contentTabs .selected a:after{ display: none; } .contentTabs span{ padding: 0; } .contentTabsContainer h2, .contentTabsContainer h2 a, .contentTabsContainer h3, .contentTabsContainer h3 a, .contentTabsContainer h4, .contentTabsContainer h4 a, .contentTabsContainer h5, .contentTabsContainer h5 a, .contentTabsContainer h6, .contentTabsContainer h6 a { color: #CA1905; } .Online .contentTabs a, .Online .contentTabs span{ background-image: none; } /************* Icons **************/ /*Icons - before or after the text of an element*/ .md .icon_before:before, .md .icon_after:after{ background-position: 0 0; background-repeat: no-repeat; content: ""; display: inline-block; height: 16px; position: absolute; top: 0; width: 16px; } .md .icon_before, .md .icon_after{ background-repeat: no-repeat; padding-left: 20px; position: relative; } .md .icon_before:before{ margin-right: 4px; left: 0; } .md .icon_after:after{ margin-left: 4px; right: 0; } .md .icon_inline{ position: static; } /* centered icon with text div.icon_withLabel div.icon_withLabel_lower div.icon_withLabel_upper */ .md .icon_withLabel{ position: relative; } .md .icon_withLabel_lower{ margin: 0 auto; height: 27px; width: 27px; } .md .icon_withLabel_upper{ position: absolute; left: 0; text-align: center; top: 8px; width: 100%; } /*Icons - When used as Image Replacement*/ .md .icon{ background-repeat: no-repeat; padding-left: 16px; line-height: 16px; } .md .icon_only{ display: inline-block; height: 16px; margin: 0 0 0 4px; overflow: hidden; padding: 0; text-align: left; text-indent: 100%; white-space: nowrap; width: 16px; } .md .icon_tight{ margin-left: 0; margin-right: 0; } .md .icon_only_before{ margin: 0 4px 0 0; } .md .icon_circle{ background-position: 0 0; } .md .icon_none{ background-position: 0 -32px; } .md .icon_success{ background-position: 0 -64px; } .md .icon_alert{ background-position: 0 -96px; } .md .icon_lock{ background-position: 0 -128px; padding-left: 24px; } .md .icon_news{ background-position: 0 -160px; padding-left: 24px; } .md .icon_plus, .md .icon_before.icon_plus:before, .md .icon_after.icon_plus:after{ background-position: 0 -192px; } .md .icon_repeat, .md .icon_before.icon_repeat:before, .md .icon_after.icon_repeat:after{ /*background-position: 0 -224px;*/ background-position: 0 -1249px; } .md .icon_complete, .md .icon_before.icon_complete:before{ background-position: 0 -256px; } .md .icon_info, .md .icon_before.icon_info:before{ background-position: 0 -288px; } .md .icon_warning, .md .icon_before.icon_warning:before{ background-position: 0 -320px; } .md .icon_error, .md .icon_before.icon_error:before{ background-position: 0 -352px; } .md .icon_close{ background-position: 0 -896px; } .md .icon_close:hover{ background-position: 0 -928px; } .md .icon_payment{ background-position: 0 -1184px; } .md .icon_transfer{ background-position: 0 -1216px; } .md .icon_config{ background-position: 0 -1344px; padding-left: 24px; } /* global warning style */ .md div.globalWarning{ border-style: solid; border-width: 2px; padding: 10px; margin:0 0 10px 0; } .md a.icon_helpHint{ background-color: #ca1905; border-radius: 7.5px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; color: #fff; font-size: 12px; height: 15px; padding: 0 4.5px; text-indent: 0; width: 15px; text-decoration: none; display: inline-block; } /************* Toggle - Generic Classes **************/ .md .toggle{ list-style-type: none; margin: 0; padding: 0; } .md .toggle_header{ float: right; margin-top: -28px; } .toggle li{ display: inline-block; margin: 0; padding: 0; } .toggle a{ background-position: 0 0; background-repeat: no-repeat; display: block; text-indent: -9999px; } /*chart toggle*/ .md .toggle_chart a{ height: 22px; overflow: hidden; width: 22px; } .md .toggle_chart li{ margin: 0 0 0 -4px; } .md .toggle_chart li:first-child{ margin-left: 0px; } .md .toggle_chart li:last-child{ margin-left: -5px; } .toggle_chart .toggle_chart_pie a{ background-position: 0 -480px; background-repeat: no-repeat; } .toggle_chart .toggle_chart_bar a{ background-position: 0 -544px; } .toggle_chart .toggle_chart_pie.current a, .toggle_chart .toggle_chart_pie a:hover{ background-position: 0 -512px; } .toggle_chart .toggle_chart_bar.current a, .toggle_chart .toggle_chart_bar a:hover{ background-position: 0 -576px; } /*show hide toggle*/ .toggle_visibility li{ display: none; } .toggle_visibility .current{ display: inline-block; } .md .toggle_visibility a{ height: 16px; width: 16px; } .md .toggle_visibility_show a{ background-position: 0 -448px; background-repeat: no-repeat; } .md .toggle_visibility_hide a{ background-position: 0 -416px; background-repeat: no-repeat; } /*tip text toggle*/ .md .toggle_tip{ background-position: 0 -384px; background-repeat: no-repeat; cursor: pointer; display: inline-block; height: 16px; margin: 0 0 0 10px; padding: 0; text-align: left; text-indent: -9999px; width: 16px; } .md .toggle_tip_before{ margin: 0 4px 0 0; } .md .toggle_errortip{ background-position: 0 -352px; background-repeat: no-repeat; cursor: pointer; display: inline-block; font-weight: normal; height: 16px; line-height: 18px; margin-left: 10px; padding-left: 20px; } /**/ div.searchGlobal{ background-color: #fff; border: 1px solid #dbc6ad; -webkit-box-shadow: 1px 1px 4px rgba(0,0,0,.2) inset; box-shadow: 1px 1px 4px rgba(0,0,0,.2) inset; height: 25px; padding: 3px; position: absolute; right: 0; top: 103px; width: 200px; } .searchGlobal .entry{/*extra properties to override form css*/ float: left; padding: 0; width: auto; } .searchGlobal .submit{/*extra properties to override form css*/ clear: none; float: right; padding: 0; width: auto; } .searchGlobal input{ border: none; } .searchGlobal input[type=text]{ background: transparent; font-size: 13px; height: 25px; line-height: 25px; padding: 0 0 0 10px; max-width: 149px; } .searchGlobal input[type=submit]{ background: transparent url(/DynamicContent/Resources/Images/imgMatrix.png) -470px -30px no-repeat; cursor: pointer; height: 25px; text-indent: -9999px; width: 25px; } .searchGlobal input[type=submit]:hover{ background: transparent url(/DynamicContent/Resources/Images/imgMatrix.png) -470px -56px no-repeat; } /*Custom CSS for Global Search*/ div.graphMonthHighlights{ position: absolute; z-index: 1; } div.graphMonthContainer{ position: absolute; z-index: 11; } div.graphMonthSelectorHover, div.graphMonthSelectorHighlight{ position:absolute; top:0; left:0; width:0; } div.graphMonthSelectorHighlight{ z-index: 1; } div.graphMonthSelectorHover{ z-index: 2; } div.graphMonthContainer{ background-color: #FFFFFF; filter: alpha(opacity=0); -khtml-opacity: 0; -moz-opacity: 0; opacity: 0; } /* Component-GraphDateRangeSelector */ div.graphMonthSelectorHover { background-color: #CAE1FF; } div.graphMonthSelectorHighlight { background-color: #E7F1FE; } /* Component-TransactionCategoryList */ .categoryTransactionsTable .progressBar{ background-color: #9FC5F8; } .categoryTransactionsTable .hover .progressBar{ background-color: #2B78E4; } /************* Highcharts *************/ .highcharts-tooltip span{ z-index: 9999 !important; } .widePaddingTooltip .highcharts-tooltip span{ padding: 3px 500px 0; } /***************** V6.1.1 CSS fix ****************/ /* disable axis-label rotation */ .highcharts-axis-labels span { transform: none !important; -webkit-transform: none !important; -moz-transform: none !important; -o-transform: none !important; } /* reduce font-size to avoid label too long showing character... */ .highcharts-xaxis-labels text { font-size: 9px !important; } /* PFM Spending Category Gragh: xaxis is showing by default */ .SpendingCategoryGraph .highcharts-axis.highcharts-xaxis { display: none; } .backgroundTooltip .highcharts-tooltip span{ background-color: #edd3b7; } /********** nav adjacent ***********/ .header h2.adjacent{ margin: 0; position: absolute; z-index: 10; top: 80px; left: 10px; } .header h2.adjacent a { background-position: 0em 0.45em; background-repeat: no-repeat; display: block; font-size: 0.85em; padding-left: 10px; } /**/ /********************** global ***********************/ div.global{ position: absolute; right: 5px; top: 0px; } ul.global{ margin: 2px 0px 0px 0px; padding: 0 4px 0 0; text-align: left; background-position: 100% 50%; background-repeat: no-repeat; float: left; } ul.global li{ background-repeat: no-repeat; background-position: 0 50%; display : inline; padding-left : 8px; padding-right : 4px; } .Home ul.global li.name-home{ display: none; } ul.global li a{ text-decoration : none; } ul.global li a:hover{ text-decoration : underline; } /*global*/ div.global{ right: 240px; } ul.global{ background: none; margin: -1px 0 0 0; padding: 0 10px 0 0; } ul.global li{ background: none; margin: 0; padding: 0; position: relative; border-top: 1px solid #000; } ul.global a{ -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; display: inline-block; font-size: 14px; height: 30px; padding: 8px; } ul.global a:hover{ color: #fff; } ul.global li:after{ content: ''; background: #42382f; border-right: 1px solid #8d7f74; position: absolute; top: 2px; right: -1px; height: 12px; width: 1px; z-index: 10; } .global .linkN:after{ content: normal; } /*login widget*/ ul.loginWidget{ margin: 0; padding: 0; position: absolute; right: -3px; top: 0; width: 120px; z-index: 5; } .loginWidget > li{ background: transparent url(/DynamicContent/Resources/Images/lock-icon.svg) 12px 6px no-repeat; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; background-color: #F04E39; color: #fff; cursor: pointer; font-size: 16px; height: 40px; list-style: none; margin: 0; padding: 7px 12px 12px 44px; border-radius: 0px 0px 15px 15px; } .loginWidget > li:hover{ background-position: 12px 6px; } .loginWidget > li > a:visited{ text-decoration: none; } .loginWidget ul{ background-color: #fff; display: none; margin: 9px 96px 0 -48px; padding: 0; width: 170px; position: absolute; right: -90px; border-style: solid; border: 2px solid #807E81; border-radius: 6px; } .loginWidget li li{ font-family: Arial, sans-serif; list-style: none; margin: 0; } .loginWidget li li.item0 > a:hover{ border-radius: 4px 4px 0px 0px; } .loginWidget li li.item5 > a:hover{ border-radius: 0px 0px 4px 4px; } .loginWidget li li.itemLogout > a:hover{ border-radius: 4px 4px 4px 4px; } .loginWidget ul a{ display: block; font-size: 12px; padding: 10px 8px 10px 25px; text-decoration: none; } .loginWidget > li > a, .loginWidget > li > a:hover{ color: #fff; font-family: 'Sharp Grotesk', sans-serif; font-weight: 700; } .ie8 .loginWidget ul a{ border-bottom: 1px solid #efefef; } /*logged in*/ .loginWidget.loggedIn > li{ background-position: -225px -136px; background-color: #F04E39; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; color: #fff; cursor: pointer; font-size: 16px; height: 40px; list-style: none; margin: 0; border-radius: 0px 0px 15px 15px; font-family: 'Sharp Grotesk', sans-serif; font-weight: 500; } .loginWidget.loggedIn li ul{ background-color: rgb(255, 255, 255); display: none; width: 240px; position: absolute; border: 2px solid rgb(128, 126, 129); border-radius: 6px; margin-top: 14px; } /*Join us*/ a.join-us { position: absolute; right: 116px; width: 120px; background-color: #EBE8DB; color: #F04E39; cursor: pointer; font-size: 16px; height: 40px; text-align: center; padding-top: 8px; text-decoration: none; font-family: 'Sharp Grotesk', sans-serif; font-weight: 700; } /*login dropdown hover effect*/ .loginWidget li li > a:hover{ background-color: #EBE8DB; text-decoration: none; color:black; } /*logged in*/ .loginWidget.loggedIn { margin: 0; padding: 0; position: absolute; right: -3px; top: 0; width: 245px; z-index: 5; } div.breadcrumb{ height: 1%; margin-bottom: 8px; } .Landing div.breadcrumb{ margin-bottom: 0; } div.breadcrumb span{/*You are here text*/ display: none; } ul.breadcrumb{ font-weight: bold; height: 1%; margin: 0; padding: 0; } html>body ul.breadcrumb{ height: auto; } ul.breadcrumb:after{ content: "."; display: block; height: 0; clear: both; visibility:hidden; } ul.breadcrumb li{ background-position: 0% 50%; background-repeat: no-repeat; display: block; float: left; margin: 0 0 0 5px; padding: 5px 2px 5px 12px; white-space: nowrap; } ul.breadcrumb li.link0{ background-image: none; list-style: none; margin-left: 0; padding-left: 6px; } ul.breadcrumb li a{ font-weight: normal; } ul.breadcrumb li.self a{ font-weight: bold; text-decoration: none; } div.breadcrumb{ height: auto; padding: 20px 0 10px 0; margin: 0 0 0 209px; } .Landing div.breadcrumb, .Content123 div.breadcrumb{ height: auto; padding: 0 0 10px 0; margin: 0; } .Error div.breadcrumb, .Logout div.breadcrumb{ display: none; } ul.breadcrumb{ font-size: 12px; font-weight: normal; } ul.nav.breadcrumb li{ background: none; margin: 0; padding: 0; } ul.nav.breadcrumb li:before{/*because content123 breadcrumb is inside .mainContent*/ display: none; } ul.breadcrumb a{ display: block; padding: 0 2.5px; } ul.breadcrumb a:hover{ color: #ca1905; } ul.breadcrumb a:after{ content: "\00BB"; padding-left: 4px; } ul.breadcrumb li:first-child a{ padding-left: 0; } ul.breadcrumb li.self a{ font-weight: normal; color: #ca1905; } ul.breadcrumb li.self a:after{ display: none; } div.primary{ width: 100%; clear: both; display: block; position: relative; height: 40px; } ul.primary{ height: 40px; margin: 0; padding: 0; position: absolute; right: 0px; top: 0px; width: auto; } ul.primary li{ background-position: top left; background-repeat: no-repeat; display: block; float: left; font-weight: bold; height: 40px; margin: 0; padding: 0; text-align: left; } ul.primary li.current{ background-position: bottom left; } ul.primary li a{ display: block; height: 35px; padding: 5px 3px 0px 10px; text-decoration: none; } ul.primary li a:hover{ text-decoration: underline; } div.primary{ bottom: 0; height: auto; position: absolute; } ul.primary{ background: #2ab2c2 url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAMAAAC6V+0/AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAGBQTFRFIqGsJKawKrC5KaaxKaq1JaiyLay2JKu0KaOvJq62Lam0IamyMK23KKy2L664Ka63K6+4KamzKK24Jau2J6y1Kq63Iay1JK22J6+4J6mzLa23Ka22Kqq0KKq0K6y2KK22oZMZtQAAASNJREFUeNoM0EmChCAMAMBAZFNbsIU2gUD+/8uZe50KsAdSW7+itbLmDldL8Di51azY8USSD8qdDigpkbeO9hAeJdz23+7BxmXsenYKdl/xvJ9pN3Dv6Pg9f6Zaur/pRSICwYndFWxmYTKFP9UyXOE+qoYmzpXc709OaGHfuvNuB3obWjNscSoQrrHqnGudI8+wvbzbDpoM3U0VJzsXA0/5MQwQsnezCb1cpvXzKATYjrVSLTlJc2rG26GD9y2m3LayUgw2+bDahKlGJI2ta8i00OqIHuYMmdHRcPKljx+KqQDnR5ewUjENkxuRzYSugilX9KHKS43rvhigszHDDF41oHXrv6IB/juOQ+tV38zXa433sAi6O87BWtvNIh+Nz58AAwAZ0Bk0fRO/xwAAAABJRU5ErkJggg==) 0 0; border-bottom: 6px solid #fff; border-top: 6px solid #fff; height: 52px; overflow: hidden; position: static; right: auto; top: auto; } ul.primary li{ background: none; font-weight: normal; height: auto; width: auto; } ul.primary > li > a{ -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; display: block; height: 52px; padding: 18px 33px; position: relative; text-align: center; } .Personal ul.primary > li > a { padding: 18px 30px; } ul.primary > li > .current, ul.primary > li > a:hover, ul.primary .activeFlyout > a{ background-color: #caebf0; color: #ca1905; text-decoration: none; } .primary > li > a:after{ content: "|"; height: 13px; margin-top: -7px; overflow: hidden; position: absolute; right: -3px; top: 26px; } .primary > li > .current:after, .primary > li > a:hover:after, .primary > .linkN > a:after{ content: ""; } .Business .primary{ background-color: #94a712; background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAMAAAC6V+0/AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAYNQTFRFlqISmKUVlKEPl6QTlKEOlaEOlKAOlaEQk6AMl6QUlqMQkZ0Ml6MTj5sMl6MOlKASmKQTl6QVmKQUkZ0Qkp4OlJ8Rkp4Sk58TlqIVk58RlqIRkp8Kkp4KmKUWlaIQk58MlKATlaATk58Kk6AOk58Ql6MUmKQQk54QlqIWlKENlKEMj5sIkZ0TlaEUlKEKl6IWmaUVl6IXkJsOmaUXmaYWmaUSkJsJmaURlKAMl6QPlaEKkJwSlaIOkJwGkJ0HkZwMmKMYl6MYlqEVkJwLkJwKk6AKlaIMkp8Mkp0RmqYTmaIYkZ0GjpkPl6EPmKURmKQRlaILl6Ial6EQj5wFmqcYkp4TmaUTkp8LmaYOl6UMlqMMk54PlqMNmqYXlqIYmKEQj5sNmaYTkp4Vl6EOkJwOi5YKlKAImKEYk58XkJwRj5sQj5oMkZ0Ii5QKk58Um6cWjpoKlKAVlaAIl6QSkp4IlKEIlaIGlaIKlqIMmqcVmKQVl6MSlqMTlaIRlqIQlqMRlaIPZaegRAAAAXhJREFUeNoEwYNiHFEUANA7tmdte2ObbZMiqW3beP70ngPadlBYUA3i62E4/XnTsEb7ZRgEkTqvu8TRrTXhG9J2x12HWPhCc6YKSXYPkdfxMt6mDVfs90alelE0oKygMKWmksxBP/02pm3qiLq8XEnIrWBr8QiWz9md58eSWBf2Qzl2f5zyYgnw12out8dSq/aoXKrLRdmTCZBuDk3V8iUkHc0igBDLDxCozVkmMB+I/JBqxQXPnREFsNQURQx3n9lPlf0/B9LEPlgDyNCRcmNJuz0IPCnvs97rvQRaPLJ3WAHMPCcvxbHi4McEVlWW5ztSozViOjUrLWz8/gC8GhTnhhbn/7KUuxvWCuZfQNEh1SgX4hfK3suyunLCSmDGPKx1UEQXl9hG6S+ev/59F14YfttVzwpEl/XoY/NV5r70BIZOlsjcvMpVI273krE/k8EQv/uMxWG/udLrbvUvM+faJ82EzdVJ4+3dSi1HNRhPNOnCmyr8F2AAdCRUp5J1/0UAAAAASUVORK5CYII=); } .Business .primary > li > .current, .Business .primary > li > a:hover, .Business .primary .activeFlyout > a{ background-color: #e3e9c3; } .AboutVancity .primary{ background-color: #ca1905; background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAIAAADZrBkAAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAf9JREFUeNo0kwF2GjEMRCV5CYRAcoIeoPe/Sq/Rl5eWQFh2pf7Rpnl5iy3Lo5mR7L9+/jAzN1vNdu5ZFe6PKoJhNrkvVcN95mv2sNp73DJj7TtfVU/u4TbF9519ONmfmdxkzyl3Dh7gPkdMgJXbabC3JYuzZ4+vyiWFdYyoxgWL+NqIXIm9+2RwM0K3UlgnpLqDSpCky5pUu1USnK12zct24Vfokufs7H1NLrAA5F6FimNIYZj4v8DQjWS/dB4HichEpH0sSMIAG//t4W+0Z2vZLUsSAeA7danXCPg8hal+p3J67ZqqYHYvmURF2UUIWw+QaergI/iewpqVZ7OMsz9rHrYGwA0biZ6H9GxsMY01KJfMYQgTPdi+jRhtu47B4Ac9c8o0Uxv1nb8N8IOr8q6bTg7/gVdH96E6auhJeOSpXYfO23r1OhQB4i5LTUlzt4rm7gyFWqOW+DVbTyuE7caC+uTHaPWcsfceIlw9tKsvQzrfAtNR6/LQ5BZqY9fDdg7/vawMJC5191Vz7fFjdIjchRXbDNHb2OpCAyfxA20Uep1i42mt8H1J0PGQcSEfF2iusrPnYN89fLSfeP3ZHafOqZ8F8Q/mSYNe6sO5+zZ6lDYmYp7Sc63kETAMk9Z6XNVzo/fyV73S1FY/im0OSV1wyPqBurX7ej6s0f9PgAEApWaBLlAZIAIAAAAASUVORK5CYII=); } .AboutVancity .primary > li > .current, .AboutVancity .primary > li > a:hover, .AboutVancity .primary .activeFlyout > a{ background-color: #f7ddda; } .Squamish .primary{ background-color: #004890; background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAMAAAC6V+0/AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAOdQTFRFAk6CAk+CAE2BAEp8AEh7AEl9AU6CA1CEAEh8AUx/AEl+AE2AAEuAA06AAk2BAk2ABE+BBFGFAUp9AUyAAEl7A06BBFGEAk6BAEd6AEt9Ak+EAUx+AEyBAUp+AUt+Ak6AAUt/AUl7AEx+AEd7AU1/A0+BA1CDBFKGBFCFAEp/BE+CBE+DAUl9A1GFBFCCAEh6AlCEA0+EBE+AAU+DAU6BAlCFAk6DAE2CBFCBAUl8BVGDAU2CAEd4AE1/AE6CAU2AA0+DA0+CAk+DBFCDAEl8AU2BAEx/AEt+AEp9BFCEAEt/AEyAAEp+LhIqhwAAAVVJREFUeNoMz1WS21AQQNEWWRbLzDjMSWbCID2G7v2vJ/6/daouyB16q+vDqZ1lXnR6IlZvIBwmgWZx83gUEpWrYxeBD1XIU0pirRxy5wj6DFha/qNv3gYBDu59GboHNwZbUDpR95z88dP3db4l8nvo3O/BiN7L0Tb/6h/uVI9kYOgVEb2sfb4O/RYHHlGDUXcp4dGp3n3mL4QjvDIwD2WOnKMhvb9kjhwxCHriPJ3bcSeZvJUERm8AA1Foqw/mtLGv0Su7ilYzkH2XRJPVzfntR1WZ9jT7OYtBiIsBv7LNny9V1S7PK9sc4Nm4p5jO0+umHbeRXFbLmyk8KeWzBodZE4+nj9dLZqIpKF/Y+u8H64RliwVbyGQhoDa3SIXt950LrN+BvzxCjc9iaOeBMdgTCt3r0sPESon9nEyQ+h1PeOfDEoYdaOoi5oqED8IBqHy0/i/AALaHRpMcMVCfAAAAAElFTkSuQmCC); } .Squamish .primary > li > .current, .Squamish .primary > li > a:hover, .Squamish .primary .activeFlyout > a{ background-color: #c0d1e3; } /*mega menu*/ ul.primary .activeFlyout{ -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.45); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.45); } ul.primary .activeFlyout > a{ background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIwIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); background-image: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 50%, rgba(255,255,255,1) 100%); background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0)), color-stop(50%,rgba(255,255,255,1)), color-stop(100%,rgba(255,255,255,1))); background-image: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 50%,rgba(255,255,255,1) 100%); background-image: -o-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 50%,rgba(255,255,255,1) 100%); background-image: -ms-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 50%,rgba(255,255,255,1) 100%); background-image: linear-gradient(to bottom, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 50%,rgba(255,255,255,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=0 ); color: #2ab2c2; z-index: 4000;/*don't feel like reordering all the z-indexes everywhere*/ } .Business li.activeFlyout > a{ color: #94a712; } .AboutVancity li.activeFlyout > a{ color: #ca1905; } div.FlyOutMenus{ display: block; } .javascript .primary div.FlyOutMenus{ background-color: #fff; background-image: none; -webkit-box-shadow: 0 1px 3px rgba(0,0,0,.45); box-shadow: 0 1px 3px rgba(0,0,0,.45); display: none; left: 25px; padding-top: 25px; position: absolute; right: 25px; top: 58px; width: auto; z-index: 3000; } .primary li.link1 div.FlyOutMenus{ left: 0; right: 50px; } .primary li.linkN div.FlyOutMenus{ left: 50px; right: 0; } .FlyOutMenus.contentColumns:before, .FlyOutMenus .columnGroup:after, .FlyOutMenus .contentColumn:after{ display: none; } .FlyOutMenus .columnGroup{ margin-bottom: 25px; } .FlyOutMenus .vcCallouts.columnGroup2Col{ -webkit-box-shadow: 0 0 5px rgba(0,0,0,.25); box-shadow: 0 0 5px rgba(0,0,0,.25); margin: 0; } .FlyOutMenus .contentColumn{ padding: 0 0 0 25px; } .FlyOutMenus .contentColumn:last-child{ padding-right: 25px; } .FlyOutMenus .vcCallouts.columnGroup2Col .contentColumn{ margin: 0; padding: 0; } .FlyOutMenus .contentColumn .section{ border-right: 1px dotted #ca1905; margin-bottom: -9999px; padding: 0 10px 9999px 0; } .FlyOutMenus .vcCallouts.columnGroup2Col .section, .FlyOutMenus .columnGroup4Col .contentColumn3 .section{ border: none; } .FlyOutMenus .contentColumn:last-child .section{ border: none; } .FlyOutMenus .vcCallouts.columnGroup2Col .section{ margin: 0; padding: 0; } .FlyOutMenus h2{ color: #ca1905; font-size: inherit; left: auto; margin-bottom: 10px; position: relative; top: auto; z-index: inherit; width: auto; } div.FlyOutMenus h2 a, div.FlyOutMenus h2 a:visited, div.FlyOutMenus h2 a:hover{ color: #ca1905; height: auto; padding: 0; text-decoration: none; } div.FlyOutMenus li{ float: none; margin-bottom: 6px; } div.FlyOutMenus li a{ color: #000; display: block; font-weight: normal; height: auto; padding: 0 0 0 16px; } div.FlyOutMenus li a:visited{ text-decoration: none; } div.FlyOutMenus li a:hover{ color: #ca1905; text-decoration: none; } .FlyOutMenus .vcCallouts.columnGroup2Col a{ height: auto; padding: 0; } /*adjustments to primary for arrows*/ ul.primaryWMegaMenu > li > a{ padding: 5px 5px 0; text-align: center; } ul.primary > li.activeMegaMenu > a{ position: relative; } ul.primary > li.activeMegaMenu > a:after{ content: ""; display: block; width: 0; height: 0; position: absolute; border-style: solid; border-width: 0 7px 9px 7px; top: 41px; z-index: 3010; left: 50%; margin-left: -7px; -webkit-transform:rotate(360deg); } /* Mega Menu - show/hide */ ul.primary .megaMenu{ -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; font-weight: normal; position: absolute; width: 886px; top: 40px; right: 37px; border-width: 10px; border-style: solid; display: none; z-index: 3000; } ul.primary > li:hover .megaMenu{ display: block; } .js ul.primary > li:hover .megaMenu{ display: none; } ul.primary .megaMenu .section{ margin-bottom: 0; } /* Mega Menu - columns layout */ ul.primary .megaMenu:after, ul.primary .megaMenu .contentColumns:after, ul.primary .megaMenu .contentColumn:after{ content: ""; display: table; clear: both; } ul.primary .megaMenu .contentColumn{ float: left; height: 100%; padding: 0 10px 0 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } ul.primary .megaMenu .contentColumn:last-child{ padding: 0; } ul.primary .megaMenu .contentColumn > div{ border: none; clear: none; padding: 5px; margin: 0 0 10px 0; } /* Mega Menu - typography */ ul.primary .megaMenu ul{ margin: 0; padding: 0; } ul.primary .megaMenu li{ height: auto; float: none; background-color: transparent; background-repeat: no-repeat; background-position: 0 0; margin: 0; padding: 0 0 6px 13px; width: auto; } ul.primary .megaMenu a{ height: auto; padding: 0; font-weight: normal; } ul.primary .megaMenu .contentColumn h2, ul.primary .megaMenu .contentColumn h3, ul.primary .megaMenu .contentColumn h2 a, ul.primary .megaMenu .contentColumn h3 a{ font-size: 13px; font-weight: bold; top: auto; left: auto; margin: 0 0 5px 0; padding: 0; position: relative; height: auto; width: auto; } /* Mega Menu - Component Adjustment */ ul.primary .megaMenu .Component-Marketing .copy{ padding: 0 0 10px; } ul.primary .megaMenu .Component-Marketing .imageWrapper, ul.primary .megaMenu .Component-Marketing .Component-Button{ margin: 0 -5px; } ul.primary .megaMenu .Component-Button a{ font-weight: bold; padding: 8px 9px; } ul.primary .megaMenu .Component-Button a:hover{ text-decoration: none; } ul.primary .megaMenu .Component-Shortcuts li{ background-image: none; padding: 0 0 6px 15px; } /**/ /*Section Nav*/ div.sectionNav{ position: absolute; } ul.sectionNav{ margin: 0; padding: 0; list-style: none; } ul.sectionNav li{ float: left; margin: 0 8px 0 0; padding: 0; } ul.sectionNav li a{ -webkit-border-bottom-right-radius:0px; -moz-border-radius-bottomright:0px; border-bottom-right-radius:0px; -webkit-border-bottom-left-radius:0px; -moz-border-radius-bottomleft:0px; border-bottom-left-radius:0px; display: block; font-weight: bold; float: left; line-height: 30px; text-decoration: none; text-align: center; position:relative; padding: 0 16px; } ul.sectionNav li a:hover{ text-decoration: underline; } ul.sectionNav li.current a, ul.sectionNav li.current a:hover{ text-decoration: none; } /**/ /*secondary*/ div.secondary{ position:absolute; right:8px; top:50px; } ul.secondary{ margin : 0; padding: 0; } ul.secondary li{ display : block; float: left; list-style : none; padding-left : 4px; } ul.secondary li a{ background-position : 0px 0px; background-repeat : no-repeat; display : block; height : 15px; padding-bottom : 2px; padding-left : 0px; padding-top : 2px; text-align : center; text-decoration : none; vertical-align : middle; width : 104px; font-size: 11px; } ul.secondary li a:hover, ul.secondary li.current a{ background-position : 0px -19px; } ul.secondary li a:hover{ text-decoration : underline; } div.secondary{ left: 240px; right: auto; top: 103px; z-index: 1; } ul.secondary li{ margin: 0; padding: 0; } ul.secondary li a{ background: none; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; -webkit-box-shadow: 0 -3px 2px rgba(0, 0, 0, 0.1) inset; box-shadow: 0 -3px 2px rgba(0, 0, 0, 0.1) inset; font-size: 18px; height: 47px; margin-right: 3px; padding: 13px 16px; position: relative; width: auto; background-position: 0 0; background-repeat: repeat; } ul.secondary li a:hover{ color: #fff; text-decoration: none; background-image: none; } ul.secondary .linkN a{ margin-right: 0; } .secondary a:before{ background-color: transparent; background-repeat: no-repeat; content: ""; height: 3px; left: 0; position: absolute; right: 0; top: -3px; } /*personal tab*/ .secondary .name-home a, .Personal .secondary .current a:hover{ background-color: #2ab2c2; background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAMAAAC6V+0/AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAGBQTFRFIqGsJKawKrC5KaaxKaq1JaiyLay2JKu0KaOvJq62Lam0IamyMK23KKy2L664Ka63K6+4KamzKK24Jau2J6y1Kq63Iay1JK22J6+4J6mzLa23Ka22Kqq0KKq0K6y2KK22oZMZtQAAASNJREFUeNoM0EmChCAMAMBAZFNbsIU2gUD+/8uZe50KsAdSW7+itbLmDldL8Di51azY8USSD8qdDigpkbeO9hAeJdz23+7BxmXsenYKdl/xvJ9pN3Dv6Pg9f6Zaur/pRSICwYndFWxmYTKFP9UyXOE+qoYmzpXc709OaGHfuvNuB3obWjNscSoQrrHqnGudI8+wvbzbDpoM3U0VJzsXA0/5MQwQsnezCb1cpvXzKATYjrVSLTlJc2rG26GD9y2m3LayUgw2+bDahKlGJI2ta8i00OqIHuYMmdHRcPKljx+KqQDnR5ewUjENkxuRzYSugilX9KHKS43rvhigszHDDF41oHXrv6IB/juOQ+tV38zXa433sAi6O87BWtvNIh+Nz58AAwAZ0Bk0fRO/xwAAAABJRU5ErkJggg==); border-radius: 10px 0px 0px 0px; } .secondary .name-home a:hover{ background-color: #228e9b; } .secondary .name-home a:before{ background-position: 0 -22px; } .secondary .name-home a:hover:before{ background-position: 0 -26px; } .Personal .secondary .current a:hover:before{ background-position: 0 -22px; } /*business tab*/ .secondary .name-Business a, .secondary .current.name-Business a:hover{ background-color: #94a712; background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAMAAAC6V+0/AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAYNQTFRFlqISmKUVlKEPl6QTlKEOlaEOlKAOlaEQk6AMl6QUlqMQkZ0Ml6MTj5sMl6MOlKASmKQTl6QVmKQUkZ0Qkp4OlJ8Rkp4Sk58TlqIVk58RlqIRkp8Kkp4KmKUWlaIQk58MlKATlaATk58Kk6AOk58Ql6MUmKQQk54QlqIWlKENlKEMj5sIkZ0TlaEUlKEKl6IWmaUVl6IXkJsOmaUXmaYWmaUSkJsJmaURlKAMl6QPlaEKkJwSlaIOkJwGkJ0HkZwMmKMYl6MYlqEVkJwLkJwKk6AKlaIMkp8Mkp0RmqYTmaIYkZ0GjpkPl6EPmKURmKQRlaILl6Ial6EQj5wFmqcYkp4TmaUTkp8LmaYOl6UMlqMMk54PlqMNmqYXlqIYmKEQj5sNmaYTkp4Vl6EOkJwOi5YKlKAImKEYk58XkJwRj5sQj5oMkZ0Ii5QKk58Um6cWjpoKlKAVlaAIl6QSkp4IlKEIlaIGlaIKlqIMmqcVmKQVl6MSlqMTlaIRlqIQlqMRlaIPZaegRAAAAXhJREFUeNoEwYNiHFEUANA7tmdte2ObbZMiqW3beP70ngPadlBYUA3i62E4/XnTsEb7ZRgEkTqvu8TRrTXhG9J2x12HWPhCc6YKSXYPkdfxMt6mDVfs90alelE0oKygMKWmksxBP/02pm3qiLq8XEnIrWBr8QiWz9md58eSWBf2Qzl2f5zyYgnw12out8dSq/aoXKrLRdmTCZBuDk3V8iUkHc0igBDLDxCozVkmMB+I/JBqxQXPnREFsNQURQx3n9lPlf0/B9LEPlgDyNCRcmNJuz0IPCnvs97rvQRaPLJ3WAHMPCcvxbHi4McEVlWW5ztSozViOjUrLWz8/gC8GhTnhhbn/7KUuxvWCuZfQNEh1SgX4hfK3suyunLCSmDGPKx1UEQXl9hG6S+ev/59F14YfttVzwpEl/XoY/NV5r70BIZOlsjcvMpVI273krE/k8EQv/uMxWG/udLrbvUvM+faJ82EzdVJ4+3dSi1HNRhPNOnCmyr8F2AAdCRUp5J1/0UAAAAASUVORK5CYII=); } .secondary .name-Business a:hover{ background-color: #76860e; } .secondary .name-Business a:before{ background-position: -175px -22px; } .secondary .name-Business a:hover:before{ background-position: -175px -26px; } .secondary .current.name-Business a:hover:before{ background-position: -175px -22px; } /*about vancity tab*/ .secondary .name-AboutVancity a, .secondary .current.name-AboutVancity a:hover{ background-color: #ca1905; background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAIAAADZrBkAAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAf9JREFUeNo0kwF2GjEMRCV5CYRAcoIeoPe/Sq/Rl5eWQFh2pf7Rpnl5iy3Lo5mR7L9+/jAzN1vNdu5ZFe6PKoJhNrkvVcN95mv2sNp73DJj7TtfVU/u4TbF9519ONmfmdxkzyl3Dh7gPkdMgJXbabC3JYuzZ4+vyiWFdYyoxgWL+NqIXIm9+2RwM0K3UlgnpLqDSpCky5pUu1USnK12zct24Vfokufs7H1NLrAA5F6FimNIYZj4v8DQjWS/dB4HichEpH0sSMIAG//t4W+0Z2vZLUsSAeA7danXCPg8hal+p3J67ZqqYHYvmURF2UUIWw+QaergI/iewpqVZ7OMsz9rHrYGwA0biZ6H9GxsMY01KJfMYQgTPdi+jRhtu47B4Ac9c8o0Uxv1nb8N8IOr8q6bTg7/gVdH96E6auhJeOSpXYfO23r1OhQB4i5LTUlzt4rm7gyFWqOW+DVbTyuE7caC+uTHaPWcsfceIlw9tKsvQzrfAtNR6/LQ5BZqY9fDdg7/vawMJC5191Vz7fFjdIjchRXbDNHb2OpCAyfxA20Uep1i42mt8H1J0PGQcSEfF2iusrPnYN89fLSfeP3ZHafOqZ8F8Q/mSYNe6sO5+zZ6lDYmYp7Sc63kETAMk9Z6XNVzo/fyV73S1FY/im0OSV1wyPqBurX7ej6s0f9PgAEApWaBLlAZIAIAAAAASUVORK5CYII=); border-radius: 0px 10px 0px 0px; } .secondary .name-AboutVancity a:hover{ background-color: #930f00; } .secondary .name-AboutVancity a:before{ background-position: -347px -22px; } .secondary .name-AboutVancity a:hover:before{ background-position: -347px -26px; } .secondary .current.name-AboutVancity a:hover:before{ background-position: -347px -22px; } /*about squamish savings tab*/ .secondary .name-AboutSquamish a, .secondary .current.name-AboutSquamish a:hover{ background-color: #004890; background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAMAAAC6V+0/AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAOdQTFRFAk6CAk+CAE2BAEp8AEh7AEl9AU6CA1CEAEh8AUx/AEl+AE2AAEuAA06AAk2BAk2ABE+BBFGFAUp9AUyAAEl7A06BBFGEAk6BAEd6AEt9Ak+EAUx+AEyBAUp+AUt+Ak6AAUt/AUl7AEx+AEd7AU1/A0+BA1CDBFKGBFCFAEp/BE+CBE+DAUl9A1GFBFCCAEh6AlCEA0+EBE+AAU+DAU6BAlCFAk6DAE2CBFCBAUl8BVGDAU2CAEd4AE1/AE6CAU2AA0+DA0+CAk+DBFCDAEl8AU2BAEx/AEt+AEp9BFCEAEt/AEyAAEp+LhIqhwAAAVVJREFUeNoMz1WS21AQQNEWWRbLzDjMSWbCID2G7v2vJ/6/daouyB16q+vDqZ1lXnR6IlZvIBwmgWZx83gUEpWrYxeBD1XIU0pirRxy5wj6DFha/qNv3gYBDu59GboHNwZbUDpR95z88dP3db4l8nvo3O/BiN7L0Tb/6h/uVI9kYOgVEb2sfb4O/RYHHlGDUXcp4dGp3n3mL4QjvDIwD2WOnKMhvb9kjhwxCHriPJ3bcSeZvJUERm8AA1Foqw/mtLGv0Su7ilYzkH2XRJPVzfntR1WZ9jT7OYtBiIsBv7LNny9V1S7PK9sc4Nm4p5jO0+umHbeRXFbLmyk8KeWzBodZE4+nj9dLZqIpKF/Y+u8H64RliwVbyGQhoDa3SIXt950LrN+BvzxCjc9iaOeBMdgTCt3r0sPESon9nEyQ+h1PeOfDEoYdaOoi5oqED8IBqHy0/i/AALaHRpMcMVCfAAAAAElFTkSuQmCC); } .secondary .name-AboutSquamish a:hover{ background-color: #003a73; } .secondary .name-AboutSquamish a:before{ background-position: -512px -22px; } .secondary .name-AboutSquamish a:hover:before{ background-position: -512px -26px; } .secondary .current.name-AboutSquamish a:hover:before{ background-position: -512px -22px; } /*current tab*/ .Personal .secondary .name-home a{ -webkit-box-shadow: none; box-shadow: none; height: 53px; border-radius: 10px 0px 0px 0px; } .secondary .current.name-Business a{ -webkit-box-shadow: none; box-shadow: none; height: 53px; border-radius: 0px 0px 0px 0px; } .secondary .current.name-AboutVancity a, .secondary .current.name-AboutSquamish a{ -webkit-box-shadow: none; box-shadow: none; height: 53px; border-radius: 0px 10px 0px 0px; } /********************* Online Banking Tabs **********************/ ul.online{ background-position : bottom left; background-repeat : no-repeat; background-color : #fff; clear : both; height : 21px; margin : -4px 0 10px 0;/*-4 because of breadcrumb bottom margin*/ padding : 8px 0 0 230px; z-index : 100; } ul.online li{ display: block; float: left; margin: 0; padding: 0; height: 21px; width: 106px; overflow: hidden; } ul.online a{ background-image : url(/DynamicContent/Resources/Images/Navigation/online_106.gif); background-position: 0 0; display : block; font-weight : bold; padding-bottom : 3px; padding-top : 4px; text-align : center; text-decoration : none; width : 100%; } ul.online li a:hover{ background-position: 0 -21px } ul.online li.current a, ul.online li.current a:hover{ background-position: 0 -42px } /*end online tabs*/ /**/ div.context{ margin-bottom: 8px; } ul.context{ border-width: 1px; border-style: solid; margin: 0; padding: 0; overflow: hidden; width: 196px; } ul.context li{ background-position: 2px 6px; background-repeat: no-repeat; border-bottom-width: 1px; border-bottom-style: solid; display: block; clear: both; font-weight: bold; height: auto; list-style: none; margin: 0; padding: 4px 4px 4px 20px; position: relative; text-align: left; width: 174px; list-style-position: outside; font-size: 14px; } ul.context li.linkN{ border-bottom: none; } ul.context li a{ height: auto; text-align: left; } ul.context li.self a{ font-weight: bold; } ul.context li.self li a{ font-weight: normal; } ul.context .depth1{ border-top-width: 1px; border-top-style: solid; margin: 4px -4px -4px -20px; padding: 0; } ul.context .depth1 li{ background-position: 10px 6px; background-repeat: no-repeat; border: none; font-weight: normal; margin: 0; padding: 2px 2px 2px 20px; width: auto; font-size: 12px; } ul.context .depth2{ margin: 4px -4px -2px -20px; padding: 0; } ul.context .depth2 li{ background-position: 15px 6px; background-repeat: no-repeat; border: none; font-weight: normal; margin: 0; padding: 2px 2px 2px 25px; width: auto; } ul.context .depth3{ margin: 4px 0px 0px -25px; padding: 0; } ul.context .depth3 li{ background-position: 20px 4px; background-repeat: no-repeat; border: none; font-weight: normal; margin: 0; padding: 2px 0 2px 30px; width: auto; } ul.context .depth4{ margin: 4px 0px 0px -30px; padding: 0; } ul.context .depth4 li{ background-position: 27px 4px; background-repeat: no-repeat; border: none; font-weight: normal; margin: 0 12px 0 0; padding: 2px 0px 2px 36px; width: auto; } ul.context li sup{ font-size: 70%; } div.context{ margin: 0 0 25px 0; } .context h2{ color: #887e6e !important; font-size: 22px !important; font-weight: normal !important; margin: 0 0 20px 0 !important; } ul.context{ border: none; /* border-bottom: 1px dotted #000; border-top: 1px dotted #000; */ position: relative; width: auto; } ul.context:before, ul.context:after, ul.context > li:after{ background: transparent url(/DynamicContent/Resources/Images/imgMatrix.png) 0 -296px repeat-x; content: ""; height: 1px; left: 0; position: absolute; top: 0; width: 100%; } ul.context:after{ bottom: 0; top: auto; } ul.context li:before{ content: normal; background: none; } ul.context li{ font-weight: normal; padding: 0; width: auto; } ul.nav.context li, ul.nav.context li.current{ background: none; } /*1st level*/ ul.context > li{ border: none; position: relative; } ul.context > li:after{ bottom: 0; top: auto; } ul.context > li:last-child{ border: none; } .context > li > a{ padding: 12px 10px 12px 0; } .context > li.current > a{/*overwrite bttm 15px for 1st level that is current*/ padding-bottom: 6px; } .context > li > a:after{/* only first level children of .context*/ content: "\00BB"; position: absolute; right: 0; } /*all levels after 1st level*/ ul.nav.context ul{ border: none; margin: 0; } ul.nav.context ul li, ul.nav.context ul.depth1 li, ul.nav.context ul.depth2 li, ul.nav.context ul.depth3 li, ul.nav.context ul.depth4 li{ font-size: 13px; padding: 0; margin: 0; } ul.nav.context li a{ font-weight: normal; } ul.nav.context li a:hover{ color: #ca1905; } ul.context ul li a:before{ background: transparent url(/DynamicContent/Resources/Images/imgMatrix.png) -512px -30px no-repeat; content: ''; width: 6px; height: 6px; position: absolute; left: 0; top: 11px; } ul.context > li > ul > li > a:hover:before, ul.context > li > ul > li.current > a:before{ background-position: -521px -30px; } /*2nd level*/ ul.nav.context > li > ul{ padding-bottom: 6px; } /*3rd level*/ ul.context ul ul a{ padding-left: 23px; } ul.context > li > ul > li > ul > li > a:before{ background-position: -560px -30px; left: 13px; } ul.context > li > ul > li > ul > li > a:hover:before, ul.context > li > ul > li > ul > li.current > a:before{ background-position: -566px -30px; } /*4th level*/ ul.context ul ul ul a{ padding-left: 33px; } ul.context > li > ul > li > ul > li > ul > li > a:before{ background-position: -560px -42px; left: 22px; width: 8px; } ul.context > li > ul > li > ul > li > ul > li > a:hover:before, ul.context > li > ul > li > ul > li > ul > li.current > a:before{ background-position: -567px -42px; } /*5th level*/ ul.context ul ul ul ul a{ padding-left: 44px; } ul.context > li > ul > li > ul > li > ul > li > ul > li > a:before{ background-position: -560px -36px; left: 35px; } ul.context > li > ul > li > ul > li > ul > li > ul > li > a:hover:before, ul.context > li > ul > li > ul > li > ul > li > ul > li.current > a:before{ background-position: -566px -36px; } /*context links - all levels*/ ul.context ul a{ display: block; font-weight: normal; padding: 6px 0 6px 12px; position: relative; text-decoration: none; } ul.nav.context li a:hover, ul.nav.context li a:hover:before{ color: #ca1905; } /* necessary? ul.nav.context li a:visited{ color: #887e6e; } */ /*link colors*/ ul.nav.context .current > a, ul.nav.context .current > a:before{/*ul.nav.context .current > a:visited*/ color: #ca1905; } /* Tsys */ .context li.id-CreditCardLinking.name-CreditCardLinking { display: none; } /********************** global ***********************/ div.footer br{ display: block; clear: both; } ul.footer{ display: inline; float: left; margin: 0 0 0 5px; padding: 0; } ul.footer li{ border-width: 1px; border-style: solid; display: inline; float: left; margin: 2px; } ul.footer li a{ display: block; float: left; padding: 5px; text-decoration: none; } ul.footer li a:hover{ text-decoration:underline; } ul.socialMedia{ -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; height: 82px; list-style: none; margin: 0; padding: 70px 20px 28px 20px; position: absolute; right: -19px; top: -25px; width: 297px; z-index: 1; } .socialMedia li{ float: left; margin: 0; } .socialMedia a{ background: transparent url(/DynamicContent/Resources/Images/imgMatrix.png) -470px -82px no-repeat; display: block; height: 30px; margin-right: 4px; overflow: hidden; text-indent: 100%; white-space: nowrap; width: 30px; } .socialMedia .itemN a{ background: none; color: #ca1905; font-size: 13px; height: auto; margin-right: 0; text-decoration: none; text-indent: 0; white-space: normal; width: 87px; } .facebook a{ background-position: -470px -112px; } .linkedin a{ background-position: -470px -142px; } .instagram a{ background-position: -470px -202px; } li.youtube{ margin-right: 0; } .youtube a{ background-position: -470px -172px; } ul.footer{ display: block; float: none; font-size: 13px; margin: 0; overflow: hidden; width: 400px; } ul.footer li{ display: block; list-style: none; margin: 0; width: 125px; } div.footer ul.footer li{ border: none; } ul.footer li a{ display: inline; float: none; } .footer p{ bottom: 8px; color: #fff; font-size: 11px; margin: 0; position: absolute; } /* CHG056759 */ ul.footer { overflow: visible; } /* CSTC-327 - CSS For Custom Footer */ .vcCustomFooter:before { background: none; } .vcCustomFooter .columnGroup:after { background: none; } .vcCustomFooter .contentColumn0:after, .vcCustomFooter .contentColumn1:after { background: none; } .vcCustomFooter .contentColumn { width: 170px; } .vcCustomFooter .contentColumn { padding-left: 0px; padding-top: 0px; } .vcCustomFooter li { margin: 0px; } .vcCustomFooter ul { list-style-type: none; } .vcCustomFooter ul li a { padding-left: 5px; } .vcCustomFooter ul li a:hover { text-decoration: underline; color: #000; } /********************** Viewport Toggle ***********************/ ul.viewportToggle li.viewportToggle-desktop{ display: none; } ul.viewportToggle{ float: left; margin: 0; padding: 0; list-style: none; } ul.viewportToggle li{ border-width: 1px; border-style: solid; display: inline; float: left; margin: 2px; } ul.viewportToggle li a{ display: block; float: left; padding: 5px; text-decoration: none; } ul.viewportToggle li a:hover{ text-decoration:underline; } /********************** Viewport Toggle ***********************/ ul.viewportToggle li{ border: none; margin: 0; width: 110px; } ul.viewportToggle li a{ display: inline; float: none; } .md ul.lang{ margin : 2px 0px 0px 0px; padding: 0 4px 0 0; text-align : left; background-position: 100% 50%; background-repeat: no-repeat; float: left; } ul.lang li{ background-repeat: no-repeat; background-position: 0 50%; display : inline; padding-left : 8px; padding-right : 4px; } ul.lang li.current{ display: none } ul.lang li a{ text-decoration : none; } ul.lang li a:hover{ text-decoration : underline; } /**/ /********************** topic ***********************/ div.topic, div.utilities{ /*remove ones PFM is in production*/ clear: both; display: block; } ul.topic{ font-size: 12px; font-weight: normal; list-style-type: none; margin: 4px 0 12px 0; padding: 0; text-align: left; } ul.topic li{ background-repeat: no-repeat; background-position: 0% 50%; display : inline; margin: 0 0 5px; padding: 0 4px 0 5px; } ul.topic li.link0{ background-image: none; padding-left: 0; } ul.topic li.noSeparator{ background-image: none } ul.topic li a{ text-decoration : underline; } ul.topic li a:hover{ text-decoration : none; } ul.topic ul{ display: inline; margin: 0 0 0 4px; padding: 0; } ul.topic ul.listBlock li{ display: inline-block; } ul.topic ul li{ background-image: none; padding: 0 2px 0 0; } /*vertical*/ ul.topic_vertical li{ background-image: none; display: block; margin: 0 0 2px 5px; padding: 0; } ul.topic_heading{ float: right; margin-bottom: 0; margin-top: -26px; overflow: hidden; width: auto; } ul.topic_heading li{ display: block; float: left; } /*aligned right*/ ul.topic_mirror{ text-align: right; } /*snug*/ ul.topic_snug{ margin-bottom: 4px; } ul.topic_tight{ margin: 0; } ul.topic_inline{ display: inline; } ul.topic{ font-size: 13px; } .topic li:before{ display: none; } .searchActivityForm + .topic li:before, .searchActivityForm + .mdgst + .topic li:before, .receipts + .topic li:before{ display: block; } /*account activity topic nav*/ .mdgst + .topic{ margin-top: -15px; padding-right: 190px; } .mdgst + .topic ul{ margin: 0; } .mdgst + .topic li, .receipts + .topic li{ background: none; display: block; padding: 0; } .mdgst + .topic li:before, .receipts + .topic li:before{ left: 0; } .mdgst + .topic a, .receipts + .topic a{ padding-left: 15px; } .md ul.campaign{ margin: 0; padding: 0; list-style: none; position: absolute; top: 47px; left: 300px; border-left-width: 1px; border-left-style: solid; } .md ul.campaign li{ margin: 0; padding: 0; float: left; border-right-width: 1px; border-right-style: solid; } .md ul.campaign li a{ line-height: 1em; padding: 0px 12px; margin-top: -1px; } /**/ /************ general portlet styles *************/ .portlets .portlet{ clear: both; padding: 4px; border-style: solid; border-width: 1px; margin-bottom: 8px; position: relative; } .portlets .portlet h3{ margin: 0 0 3px; padding: 0; text-transform: uppercase; font-weight: bold; font-size: 11px; } .Online .portlets h3{ border-bottom-style: solid; border-bottom-width: 1px; background-position: 0px 0px; background-repeat: no-repeat; margin: -5px -5px 0px; padding: 1px 4px; font-size: 12px; } /*all portlets*/ .portlets .portlet, .colThree .loginPortlet .portlet{ margin: 0 25px 25px 0; } .portlets .portlet{ border-width: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; font-size: 13px; padding: 25px 0 0 0; } .colOne .portlets{ margin-left: -27px; } .colOne .portlet, .colOne .portlet.formlet, .colOne .portlet.langToggle{ margin-right: 0; margin-left: 27px; } .colOne .marketing{ margin-left: 0; } .portlets .portlet, .portlets .portlet.langToggle, .portlet .formlet{ background: transparent url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAADCAYAAAC09K7GAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAB1JREFUeNpiPCXJ+p8BCEyf/WIE0UwMaABDACDAALGJBAONK4sDAAAAAElFTkSuQmCC) repeat-x 0 0; } .portlets .onlineUtil, .colThree .portlets:first-child .rates:first-child, .colThree .portlets:first-child .langToggle:first-child, .colThree .portlets:first-child .formlet:first-child, .colThree .portlets:first-child .quicknav:first-child, .colThree .portlets:first-child .shortcut:first-child, .colThree .portlets:first-child .marketing.noBorder:first-child, .colThree .portlets:first-child .marketing.htmlContent:first-child{/*portlets with borders keep padding*/ background: transparent; padding-top: 0; } .portlets .portlet h3, .portlets .portlet h4, div.formletIntro{ font-size: 15px; margin: 0 0 10px 0; text-transform: none; } .portlets .portlet ul, .portlets .portlet ol, .portlets .portlet p, .portlets .portlet img{ margin-top: 0; } div.portlets .portlet ul{ list-style-type: none; margin: 0 0 10px 0; } div.portlets .portlet ul li{ margin: 0; padding: 0; } .portlets .portlet li a{ display: block; padding: 0 0 3px 14px; } /*portlets with forms*/ .portlets .portlet input[type=text]{ background-color: #fff; border: 1px solid #ababab; -webkit-box-shadow: 4px 4px 4px -4px rgba(0,0,0,0.5) inset; box-shadow: 4px 4px 4px -4px rgba(0,0,0,0.5) inset; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; height: 27px; padding: 3px 10px; width: 100%; } /*base portlet*/ .portlet.marketing{ background: transparent; border-width: 1px; border-right-width: 0; margin-right: 0; padding: 15px; } .colOne .portlet.marketing{ border-right-width: 1px; border-left-width: 0; } /*border gradients on flex/html portlet*/ .portlet.marketing:before, .portlet.marketing:after{ background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIwIi8+CiAgICA8c3RvcCBvZmZzZXQ9Ijk1JSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIwLjk1Ii8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); background: -moz-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,0.95) 95%); background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(255,255,255,0)), color-stop(95%,rgba(255,255,255,0.95))); background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,0.95) 95%); background: -o-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,0.95) 95%); background: -ms-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,0.95) 95%); background: linear-gradient(to right, rgba(255,255,255,0) 0%,rgba(255,255,255,0.95) 95%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=1 ); content: ""; height: 1px; position: absolute; right: 0; top: -1px; width: 100%; } .portlet.marketing:after{ bottom: -1px; top: auto; } .colOne .portlet.marketing:before, .colOne .portlet.marketing:after{ background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIwIi8+CiAgICA8c3RvcCBvZmZzZXQ9Ijk1JSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIwLjk1Ii8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); background: -moz-linear-gradient(right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.95) 95%); background: -webkit-gradient(linear, 100% 0, 0 0, from(rgba(255,255,255,0)), color-stop(0.95, rgba(255,255,255,0.95))); background: -webkit-linear-gradient(right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.95) 95%); background: -o-linear-gradient(right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.95) 95%); background: -ms-linear-gradient(right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.95) 95%); background: linear-gradient(right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.95) 95%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=1 ); left: 0; right: auto; } div.portlet.marketing img{ margin-bottom: 10px; max-width: 129px; } div.portlet.marketing .calltoaction{ margin-top: 0; } /* .portlet.marketing *:last-child{ margin-bottom: 0; } */ /* no border, no padding: - html portlet - formlet legacy portlets: - noBorder - imgOnly */ .portlet.htmlContent, .portlet.formlet, .portlet.noBorder, .portlet.imgOnly, .portlet.marketingImageOverlay{ background: transparent; border: none; padding: 0; } .portlet.htmlContent:before, .portlet.htmlContent:after, .portlet.formlet:before, .portlet.formlet:after{ display: none; } div.portlet.htmlContent img{ max-width: none; } /*login portlet w/ button*/ .colThree .loginPortlet .portlet{ background-image: none; border: none; } /*related links/shortcut portlet div.portlet.shortcut ul li{ } */ /*language switch portlet*/ .portlet.langToggle{ border: none; margin-right: 25px; padding: 25px 0 0 0; } .langToggle ul.lang{ background: none; float: none; } .langToggle .lang li{ display: block; } /*quicknav portlet*/ form.portlet.quicknav select{ width: 100%; } /*contact form portlet*/ .portlet .formlet{ background-color: #fff; padding: 25px 0 0 0; position: relative; } div.formletIntro{ color: #ca1905; font-weight: bold; } div.formlet .contactFormlet{ padding: 0 25px 0 0; } div.formlet .contactFormlet .content{ margin: 0; } /*legacy portlets*/ div.portlet.noBorder img, div.portlet.marketingImageOverlay img{ max-width: 100%; } .portlet.noBorder, .portlet.imgOnly, .portlet.marketingImageOverlay{ background-image: none; } .portlet.noBorder:before, .portlet.noBorder:after, .portlet.imgOnly:before, .portlet.imgOnly:after, .portlet.marketingImageOverlay:before, .portlet.marketingImageOverlay:after, .portlet.marketingImageOverlay li:before{ display: none; } /***** form portlet ******/ .loginPortlet .portlet{ border-width: 1px; border-style: solid; margin-bottom: 8px; } .loginPortlet .portlet input, .loginPortlet .portlet select{ font-size: 11px; } .Home .loginPortlet .authentication{ height: 200px; width: 200px; overflow: hidden; position: absolute; right: 8px; top: 8px; z-index: 2000; padding-bottom: 24px; voice-family: "\"}\""; voice-family:inherit; height: 167px; } html>body .Home .loginPortlet .authentication{ height: 167px; } .loginPortlet .authentication form{ margin: 4px; padding: 0; } .loginPortlet label{ font-size: 10px; } .loginPortlet .authentication h3{ border-bottom-style: solid; border-bottom-width: 1px; height: auto; margin: 0; padding: 4px; text-transform: uppercase; font-size: 12px; } .loginPortlet .authentication .loggedInWelcome{ border-bottom-style: solid; border-bottom-width: 1px; height: auto; margin: 0; padding: 4px; text-transform: uppercase; font-size: 12px; } .loginPortlet .authentication .required{ float: left; position: relative; padding-bottom: 3px; padding-right: 4px } .loginPortlet .authentication .memory select, .loginPortlet .authentication .branch select{ width : 180px; } .loginPortlet .authentication .sec{ display: block; clear: both; padding: 0 0 3px 0; } .loginPortlet .authentication .sec .checkbox{ margin: 0 4px 2px 0; padding:0; width: 13px; height: 13px; } .loginPortlet .authentication .submit{ float: left; padding-left: 0; margin: 3px 5px 3px 0; } .loginPortlet .authentication .control{ float: left; position: relative; width: 95px; font-size: 10px; } /************ increased authentication - login portlet reshuffle ************/ .loginPortlet .authentication .submit #Continue{ font-weight: bold; padding: 0 3px; } .loginPortlet #loginAuth{ margin: 0; overflow: hidden; zoom: 1; } .loginPortlet .enhancedSecurity{ display: block; clear: both; } .loginPortlet .authentication .enhancedSecurity p{ font-size: 10px; margin: 8px 0 0 0; padding: 0; } /****** logout link: .link = login; .in = logout ******/ .loginPortlet .in, .loginPortlet .link{ height: 84px; } html>body .loginPortlet .in, html>body .loginPortlet .link{ height: auto; min-height: 84px; } .loginPortlet .in h3, .Home .loginPortlet .in h3{ margin: 0; padding: 10px 0 0 0; border: none; text-align: center; background-color: transparent; font-weight: normal; } .loginPortlet .in .loggedInWelcome, .Home .loginPortlet .in .loggedInWelcome{ margin: 0; padding: 10px 0 0 0; border: none; text-align: center; background-color: transparent; font-weight: normal; } .loginPortlet .link h3{ display : none; } .loginPortlet .link .submit, .loginPortlet .in .submit{ float: none; margin: 14px 0 15px 11px; width: 171px; height: 25px; clear: none; } .loginPortlet .link .submit{ margin-top: 30px; } /*on 2 col decorator3*/ .colOneTwoThree .loginPortlet .authentication, .colTwoThree .loginPortlet .authentication{ height: 25px; margin: 0; border: none; } .colOneTwoThree .loginPortlet .link .submit, .colOneTwoThree .loginPortlet .in .submit, .colTwoThree .loginPortlet .link .submit, .colTwoThree .loginPortlet .in .submit{ width: 171px; height: 25px; float: right; margin: 0; } .colOneTwoThree .loginPortlet .in h3, .colTwoThree .loginPortlet .in h3{/*logged in name */ margin: 0; padding:0; border: none; text-align: left; width: 330px; float: left; background: transparent; font-weight: normal; } .colOneTwoThree .loginPortlet .in .loggedInWelcome, .colTwoThree .loginPortlet .in .loggedInWelcome{/*logged in name */ margin: 0; padding:0; border: none; text-align: left; width: 330px; float: left; background: transparent; font-weight: normal; } .colOneTwoThree .loginPortlet .in h3{ width: 760px; } .colOneTwoThree .loginPortlet .in .loggedInWelcome{ width: 760px; } .colOneTwoThree .loginPortlet .link h3, .colTwoThree .loginPortlet .link h3{ display : none; } .colOneTwoThree .loginPortlet .in, .colOneTwoThree .loginPortlet .link, .colTwoThree .loginPortlet .in, .colTwoThree .loginPortlet .link{ height: 25px; } html>body .colOneTwoThree .loginPortlet .in, html>body .colOneTwoThree .loginPortlet .link, html>body .colTwoThree .loginPortlet .in, html>body .colTwoThree .loginPortlet .link{ height: auto; min-height: 25px; } /****** LOGGED out link with message ******/ .loginPortlet .authentication p{ margin: 10px; } /************ 2 column decorator Form and Online *************/ .colOneTwoThree .loginPortlet .authentication, .colTwoThree .loginPortlet .authentication{ background: transparent; } .colOneTwoThree .loginPortlet h3, .colTwoThree .loginPortlet h3 { background: transparent; border: none; float: left; margin: 0; padding: 0; text-align: left; width: 405px; } .colOneTwoThree .loginPortlet .loggedInWelcome, .colTwoThree .loginPortlet .loggedInWelcome { background: transparent; border: none; float: left; margin: 0; padding: 0; text-align: left; width: 405px; } .outerColContainer .loginPortlet .authentication .loggedInWelcome, .colThree .loginPortlet .authentication .loggedInWelcome{ display: block;/* need this to look like h3 in user agent css */ } .colOneTwoThree .loginPortlet .submit, .colTwoThree .loginPortlet .submit { float:right; height:25px; width:171px; } /************ 3 column Form decorator *************/ .Form .loginPortlet label, .Form .loginPortlet .required .input, .Form .loginPortlet .required { font-weight: normal; width: auto; } .Form .loginPortlet .required, .Form .loginPortlet .authentication .control{ clear: none; } .Form .loginPortlet label, .Form .loginPortlet .required .input{ float: none; } .Form .loginPortlet .submit{ clear: none; padding: 0; } /********** Hide accounts dropdown by default. enable it by JS if there is more than 1 account *********/ #loginAuth div.memory{ display: none; } /********** No JavaScript *********/ div.jsDisabled{ display: none; } div.jsEnabled{ display:block; } /* IR-103 */ button.member-reward.entrance { background-color: #6EBB1F; color: #FFFFFF; font-size: 14px; height: 25px; width: 160px; margin-bottom: 10px; cursor: pointer; border: none; } /* MRR-20170 login Portlet with google recaptcha customize size */ .loginPortlet #captcha_container { transform: scale(0.6); -webkit-transform: scale(0.6); -moz-transform: scale(0.6); -ms-transform: scale(0.6); -o-transform: scale(0.6); transform-origin: 0 0; -webkit-transform-origin: 0 0; -moz-transform-origin: 0 0; -ms-transform-origin: 0 0; -o-transform-origin: 0 0; margin-bottom: 10px; } .Home .loginPortlet{ height: 397px; } .loginPortlet{ float: right; right: 0; top: 0; width: 180px; } .loginPortlet a{ text-decoration: underline; } .loginPortlet .portlet.authentication, .loginPortlet .portlet{ border: none; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; padding: 8px 26px 0 26px; right: 0; width: 180px; } .loginPortlet .portlet.authentication{ height: 340px; margin-bottom: 3px; position: relative; top: 0; } .loginPortlet .portlet.authentication:before, .loginPortlet .portlet:before{ background-image: url(/DynamicContent/Resources/Images/imgMatrix.png); background-position: -512px -41px; background-repeat: no-repeat; content: ""; height: 12px; left: 0; position: absolute; top: 0; width: 16px; } .loginPortlet .portlet.authentication h3, .loginPortlet .portlet h3{ border: none; color: #fff; font-size: 16px; font-weight: normal; margin: 0 0 7px 0; padding: 0; text-align: left; text-transform: none; } .loginPortlet .authentication form{ margin: 0; } .loginPortlet #loginAuth{ overflow: visible; } .loginPortlet .authentication .required{ margin-bottom: 5px; padding: 0; width: 100%; } .loginPortlet .authentication .memory{ margin: 0 0 5px 0; } .loginPortlet .authentication .memory select{ font-size: 12px; width: 131px; } .loginPortlet .portlet input[type=text], .loginPortlet .portlet input[type=password]{ /*THIS NEEDS TO BE STANDARDIZED WITHIN FORMCUSTOM*/ border: 1px solid #dbc6ad; -webkit-box-shadow: 1px 1px 4px rgba(0,0,0,.2) inset; box-shadow: 1px 1px 4px rgba(0,0,0,.2) inset; font-size: 12px; padding: 5px; width: 118px; } .loginPortlet .authentication p{ margin: 0; } .loginPortlet .authentication .submit{ margin: 0 0 8px 0; padding: 0; width: 100%; } .loginPortlet .btnWrap{ width: 100%; } .loginPortlet .authentication .control{ font-size: 12px; margin-right: -10px; width: auto; } .loginPortlet .control ul{ list-style: none; margin: 0; padding: 0; } .loginPortlet li{ line-height: 1.1; margin: 0; position: relative; } .loginPortlet li:before{ color: #fff; left: 0; position: absolute; } .loginPortlet .control li a{ display: block; margin-bottom: 3px; padding-left: 15px; text-decoration: none; } .loginPortlet .control li a:hover{ text-decoration: underline; } .loginPortletAppendText{ bottom: 0; height: 46px; position: absolute; } .loginPortletAppendText a, .loginPortletAppendText a:visited{ background-color: #6e6559; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; display: block; height: 46px; line-height: .9; margin: 0 -25px; padding: 11px 11px 8px 47px; text-decoration: none; width: 180px; } .loginPortletAppendText a:before{ background: transparent url(/DynamicContent/Resources/Images/imgMatrix.png) -512px -54px no-repeat; content: ""; height: 18px; left: 0; margin-top: -9px; position: absolute; top: 23px; width: 14px; } .loginPortlet .portlet{ background-color: #887e6e; bottom: 0; margin: 0; padding-bottom: 10px; padding-top: 4px; position: relative; } /*other login states*/ .loginPortlet .link .submit, .loginPortlet .in .submit{ height: auto; } /*logged in*/ .loginPortlet .portlet.in h3{ border-bottom: 1px dotted #fff; margin-bottom: 15px; padding-bottom: 10px; } .loginPortlet .portlet.in p{ font-size: 12px; margin-bottom: 30px; word-wrap: break-word; } .loginPortlet .portlet.in .vcBtnGoTo{/*stupid multi-line button when logged in.... sigh*/ display: block; height: 48px; margin-bottom: 7px; padding-right: 15px; text-decoration: none; white-space: normal; } .portlet.in .vcBtnGoTo:after{ background-position: -512px -76px; height: 49px; } .portlet.in .vcBtnGoTo:hover:after{ background-position: -512px -127px; } .loginPortlet .portlet.in .vcBtnGoTo, .loginPortlet .portlet.in .vcBtnRev{ width: 97%; } .loginPortlet .portlet.in .vcBtnRev:hover{ color: #CA1905; } .loginPortlet .portlet.in .submit, .loginPortlet .portlet.in .btnWrap{ margin: 0; width: 97%; } .loginPortlet .portlet.in .submit:hover input{ border-color: #ac1100; } /*logged out w/ message & login button*/ .loginPortlet .link p{ margin-bottom: 12px; } /* CSTC-22 */ .loginPortlet .portlet input#acctnum { float: right; width: 70px; } .loginPortlet .account .panprefix { display: inline-block; margin-top: 5px; } .loginPortlet label { font-size: inherit; } /*marketing offer presentment*/ .portlets .marketing img{ display: block; margin: 4px auto; } .portlets .marketing p{ margin-bottom: 4px; } /*calltoaction is ul. leaving ul out for specificity*/ .portlets .marketing .calltoaction{ margin: 8px 0px; padding: 0; list-style-type: none; } .portlets .marketing .calltoaction li{ margin: 0; padding: 0; } /**/ /*Quicknav specific*/ .portlets .quicknav select{ width: 188px; } .Home .portlets .quicknav select{ width: 184px; } /**/ /*rate portlet specific*/ .portlets .rates .calltoaction, .portlets .markets .calltoaction, .portlets .stocks .calltoaction{ margin: 0px; padding: 0; list-style-type: none; position: absolute; top: 3px; right: 4px; font-size: 11px; } .portlets .rates table, .portlets .markets table, .portlets .stocks table{ margin: 0; border: none; } .portlets .rates tr th, .portlets .markets tr th, .portlets .stocks tr th{ text-align: left; padding: 1px 0px; border: none; } .portlets .rates tr td, .portlets .markets tr td, .portlets .stocks tr td{ text-align: right; padding: 1px 0px; border: none; } .portlets .rates tr th, .portlets .markets tr th, .portlets .stocks tr th{ font-weight: normal; } /*this is the header*/ .portlets .rates tr.name th, .portlets .markets tr.name th, .portlets .stocks tr.name th{ font-weight: bold; padding: 8px 0px 3px; } /*this is p.legal*/ .portlets .rates .legal, .portlets .markets .legal, .portlets .stocks .legal{ font-size: 9px; margin: 10px 0 0; } /**/ .portlets .shortcut ul{ margin: 8px 0px; padding: 0; } .portlets .shortcut ul li{ margin: 0 0 0 18px; padding: 0 0 2px 0; } /**/ .portlets .shortcut ul a:hover{ color: #CA1905 }; .portlets .shortcut .portletHead h4{ text-transform: lowercase; } .portlets .shortcut .portletHead h4:first-letter { text-transform: uppercase; } /* This portlet is using the same markup as the shortcuts portlet, only use the rss class for the rss portlet */ .portlets .rss ul{ margin: 8px 0px; padding: 0; } .portlets .rss ul li{ list-style: none; margin: 0px; padding: 0 0 4px 2px; } .portlets .rss ul li a{ background: transparent url(/DynamicContent/Resources/Images/Furniture/rss.gif) 0px 2px no-repeat; padding: 0 0 0 18px; } /**/ .portlets .onlineShortcuts{ margin-bottom: 8px; padding: 0; border-style: solid; border-width: 1px; } .portlets .onlineShortcuts h3{ margin: -1px -1px 0px; } .portlets .onlineShortcuts ul{ border-bottom-width: 1px; border-bottom-style: dashed; margin: 0px; padding: 4px 0px 4px 4px; } .portlets .onlineShortcuts ul.itemN{ border-bottom: none; } .portlets .onlineShortcuts ul li{ margin: 0; padding: 2px 2px 2px 8px; display: block; list-style-image: none; list-style-type: none; background-position: 0em 0.5em; background-repeat: no-repeat; } /**/ .portlets .marketingImageOverlay{ overflow:hidden; padding:0px; } .marketingImageOverlay .marketingImg{ background-position:top left; background-repeat:no-repeat; } .marketingImageOverlay .overlayText{ position:absolute; z-index:9998; } .marketingImageOverlay .marketingImg .calltoaction{ display:block; height:100%; margin:0px; padding:0px; position:absolute; width:100%; z-index:9999; } .marketingImageOverlay .calltoaction li{ display:block; height:100%; margin:0px; padding:0px; } .marketingImageOverlay .calltoaction a{ background-image:url(/DynamicContent/Resources/Images/spacer.gif);/*To Fix IE6&7*/ display:block; height:100%; text-indent:-9999px; } /**/ .portlets .banners{ border: none; padding: 0px; } /*used on the Login page onlyl*/ div.banner{ float: right; overflow: hidden; width: 761px; } .banner .banner{ float: none; width: auto; } .banner .banner, .portlets .banners{ margin: 0; } .portlets .banners{ padding-top: 28px; } .banners img{ max-width: 761px; } /***************************** FORMLET *****************************/ div.formlet form, .md div.infoFormlet{ padding: 10px 5px 12px 5px; } div.formlet .formSection input{ font-size: 11px; } div.formlet .formSection label { font-weight: bold; } div.formlet div#WeCallYou{ padding: 10px 0; } div.formlet div.content{ margin: 5px 0; } div.formlet div.infoFormlet ul{ list-style-type: none; margin: 0 0 15px 0; padding: 0; } div.formlet div.infoFormlet ul li label{ display: inline-block; font-weight: normal; width: 75px; } div.formlet div.infoFormlet div.content h4, div.formlet div.infoFormlet div.content p, div.formlet div.infoFormlet div.content ul li{ margin: 3px 0 0 0; padding: 0; } div.formlet div.collapsible{ display: none; } div.formlet div.actionFooter{ margin: 10px 0 0 0; padding: 0; } div.actionFooter div.input, div.actionFooter div.formCancel{ display: inline; margin: 0 10px 0 0; } div.formlet div.formInstruction{ margin: 0; } div.formlet div.oneColRow { margin: 0 0 10px 0; } div.formError{ background-color: transparent; border-style: solid; border-width: 1px; margin: 0 0 12px 0; padding: 5px; } div.formError p.fieldText{ background-repeat: no-repeat; background-position: 0 0; font-weight: bold; padding: 3px 0 1px 26px; } /***************************** INFO PORTLET *****************************/ .portlets div.infoPortlet h3{ border-bottom-style: solid; border-bottom-width: 1px; margin: 0 0 10px 0; } div.infoPortlet ul, .portlets div.securityPortlet ul{ clear: both; border: none; list-style-type: none; margin: 0 0 15px 0; padding: 0; } div.infoPortlet ul li label{ display: inline-block; font-weight: normal; width: 75px; } .portlets div.infoPortlet h4, div.infoPortlet div.content p, div.infoPortlet div.content ul li{ background: none; margin: 3px 0 0 0; padding: 0; } .portlets div.securityPortlet img{ float: left; margin: 0 10px 20px 0; } .portlets div.securityPortlet p{ clear: none; } div.actionFooter div.input{ display: inline-block; margin: 0 0 12px 0; } div.actionFooter div.input:before{ top: 9px; } div.actionFooter div.formCancel{ display: block; margin: 0; } /**/ /*SearchBug*/ /* Search Bug */ form.searchbug { border-width: 1px; border-style: solid; padding:8px; margin: 8px 0; } form.searchbug label { display: block; padding-bottom: 4px; font-weight: bold; } form.searchbug .input{ width:176px; } form.searchbug .input input{ background-repeat: no-repeat; background-position: 0 50%; display: block; padding-left: 15px; width: 155px; } /*searchbugWSubmit - added for accessibility*/ form.searchbugWSubmit .input{ float: left; } form.searchbugWSubmit .input input{ padding-top: 2px; padding-bottom: 2px; } form.searchbugWSubmit .submit{ float: right; } form.searchbugWSubmit:after{ content: ''; display: block; clear: both; } /*Custom Search Bug CSS*/ /*portletAtmBranchLocatorCustom*/ .locatorportlet .entry{ float: left; margin: 4px 0px; position: relative;/*IE6*/ width: 190px; } form.locatorportlet .input{ float: left; margin-right: 4px; position: relative;/*IE6*/ width: 128px; } .md form.locatorportlet input.blur{ color: #B3B3B3; } form.locatorportlet input.submit { padding: 0; position: relative;/*IE6*/ float: left; } form.locatorportlet .control{ display: block; margin: 3px 0 4px 0; padding-top: 2px; clear: both; } /*fbatm portlet & pod - used in colThree & in homepage contentColumns */ .locatorportlet .introduction{ margin-bottom: 12px; } .ie8 .Home .locatorportlet .introduction{ width: 283px; } .locatorportlet .entry{ display: block; float: none; margin: 0 0 4px 0; width: 100%; } .locatorportlet p + .entry{ margin-bottom: 12px; } .locatorportlet .entry input[type=text]{ float: none; width: 159px; } .locatorportlet div.submit{ display: inline-block; padding: 0; } .locatorportlet p{ margin-bottom: 4px; } /*fbatm pod*/ .section .portlets .locatorportlet{ background: none; font-size: 13px; margin: 0; padding: 0; } .section .locatorportlet h3{ font-size: 18px; margin-bottom: 18px; } .section .locatorportlet div.submit{ position: absolute; left: 170px; top: 64px; } .section .portlets input[type=text]{ background-color: #fff; border: 1px solid #ababab; -webkit-box-shadow: 4px 4px 4px -4px rgba(0,0,0,0.5) inset; box-shadow: 4px 4px 4px -4px rgba(0,0,0,0.5) inset; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; height: 27px; padding: 3px 10px; } .locatorportlet select{ margin-bottom: 12px; } /************* General **************/ /*Form highlight - form with a background color and padding*/ div.transactionSearch{ clear: both; float: left; padding: 10px 10px 0; margin-bottom: 10px; height: 1%; position: relative; } /*general*/ .sfHead{ clear: both; margin: 0px 0px 7px; } .sf a img{/*fix calendar icon alignment*/ display: inline; vertical-align: top; } .sf h2{/*conf screen mostly*/ font-size: 13px; display: block; margin: 0px; padding: 3px 0px; } .sf h3{/*section headers*/ display: block; margin: 0px; padding: 2px 4px; } .sf .sfData{/*section containers*/ text-align: left; margin: 0; padding: 5px 0 0; } .sf s, .required label s, .requirederror label s{/*asterisk*/ color: #f00; font-size: 14px; font-weight: bold; text-decoration: none; } .javascript .sf .icon{ padding-left: 0; } .in textarea{/*textfield in right column*/ width: 225px; height: 100px; } .md .hint, .md .sfGroupHint{/*hint text*/ display: block; clear: both; font-size: 11px; } .md .longHint { width: 340px; } .md .hint p, .md .sfGroupHint p{ margin:0 0 4px 0; } .md .sfGroupHint{/*group hint text*/ padding:0 0 0 5px; margin:0 0 5px; } .sfHead, .firstSect, .editSect, .lastSect,/*form only*/ #sect-button,/*form and confirmation*/ .firstStep, .dataStep, .lastStep{/*confirmation only*/ width: 598px; } .confirmStep{/*because of the border*/ width: 596px; } .Forms1024x768 .sfHead, .Forms1024x768 .firstSect, .Forms1024x768 .editSect, .Forms1024x768 .lastSect, .Forms1024x768 #sect-button, .Forms1024x768 .firstStep, .Forms1024x768 .dataStep, .Forms1024x768 .lastStep{ /*overwrite for 1024 form layout*/ width: 520px; } .Forms1024x768 .confirmStep{ width: 518px; } .Online .sfHead, .Online .firstSect, .Online .editSect, .Online .lastSect,/*form only*/ .Online #sect-button,/*form and confirmation*/ .Online .firstStep, .Online .dataStep, .Online .lastStep{/*confirmation*/ width: 520px; } .Online .confirmStep{/*because of the border*/ width: 518px; } input#refresh{ display: none; } .r .repeatBreak hr{ border: none; width: 80%; height: 1px; text-align: center; } .sf table.signature{ width: 100%; padding: 0; margin: 50px 0 0 0; border-top-width: 1px; border-top-style: solid; font-size: 1em; } .sf table.signature td{ background: transparent; } .md label, .md .label{ font-weight: bold; } .md fieldset{/*(Transfer Funds)*/ border: none; clear: both; padding: 0; margin: 0; } div.cntxthelp{ display: block; margin-bottom: 4px; } div.control{ display: block; margin: 0px 0px 12px 0px; } input.checkbox{ position: relative; top: 2px; width: 13px; height: 13px; } /*inside table remove the top*/ .summarydata input.checkbox{ margin: 2px 0 2px 4px; top: 0px; } /************* Required message *************/ .note{ padding: 0 0 15px 0; } div.reqNote, p.reqNote{ padding: 0; margin: 5px 0; position: relative; color: #f00; } /****************** Confirmation Screen ******************/ .sf h3 .edit, .sf h2 .edit{ float: right; margin: 0; border: 0; background: transparent; text-decoration: underline; padding: 0; display: inline; font-weight: bold; cursor: pointer; } form.sf .confirmStep{ border-style: none solid solid; border-width: 0px 1px 1px; margin: 0 0 10px; display: block; } /********** Buttons ***********/ div.buttons, div.submit, div.confButtons{ -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; display: block; clear: both; height: 1%; margin: 0px; overflow: hidden; padding: 5px 0px 10px 165px; position: relative; width: 100%; } .javascript .submitAuto{ /*Hide buttons on forms submitted by JS*/ display: none; } /* ATM/Branch Locator portlet submit button */ .locatorportlet .submit{ padding: 5px 0px 10px 0px; } /* MDSB Pending Transactions / Transaction Manager submit button */ .transactionApprovals .submit { float: right; width: auto; } .transactionManager h2 { font-weight: bold; font-size: 14px; } .sf div.buttons, .sf div.submit, .sf div.confButtons{ padding: 5px 0px 10px 170px; } /*actions form, primary, secondary*/ div.submit .actionsAligned{/*always used by itself*/ float: left; /*padding-left: 165px; remove comments after we update ALL submit buttons into this paradigm*/ } div.submit .actionsPrimary{/*used in conjunction with actionScondary*/ float: right; } div.submit .actionsSecondary{/*used in conjunction with actionPrimary*/ float: left; } div.buttons .sfHalo, div.confButtons .sfHalo{ padding: 5px 3px; } div.control, div.instructions, div.conclusion{ display: block; clear: both; padding: 0; } input#Continue, input.continue{ font-weight: bold; } /********** Alerts ***********/ form.sf .r .buttons .alert { padding: 3px; position: relative; } /***************** Usability buttons *****************/ .md div.formActions{ border-style: solid; border-width: 1px; border-left: none; border-right: none; border-bottom: none; clear: both; float: none; text-align: left; overflow: hidden; width: 100%; } div.formActions ul{ list-style-type: none; margin: 0; padding: 5px; } .formActions ul li{ display: inline; margin: 0 8px 0 0; padding: 0 8px 0 0; } .formActions ul li input{ line-height: normal; overflow: visible; padding: 0 6px; vertical-align: middle; } .formActions ul li.formCancel, .formActions ul li.formEdit{ background-repeat: no-repeat; background-position: 0 0; padding: 0 0 0 15px; } .formActions ul li.opposed{ float: right; padding-top: 3px; } .formActions p{ padding: 5px 10px 0 10px; } /***** I Agree ******/ .md label.acceptanceToggle { width: auto; font-weight: normal; } /** inlineFilter div.inlineFilter [div.required]? [label] [div.input] [select] [div.submit]? [input.btn type='submit' || button.btn] ***/ .md .inlineFilter .required, .md .inlineFilter label, .md .inlineFilter .input, .md .inlineFilter select, .md .inlineFilter .submit, .md .inlineFilter .btn{ width: auto; } .md .inlineFilter label, .md .inlineFilter select, .md .inlineFilter input.btn{ margin-right: 5px; } /* Wicket E-Transfer memo field label */ .md form.certapaySendTransfer div.required div.input span.hint { max-width:325px; } /* E-Transfer Add/Edit contact Legacy UI */ .md form.certapayAddContact.certapayAddContactStep1 div.required div.input span.hint, .md form.certapayUpdateContact.certapayUpdateContactStep1 div.required div.input span.hint { max-width: 325px; } .md .address { margin-right: 10px; } /* memo input field */ .md textarea.formComment { width: 330px; resize: vertical; } .md label, .md .label{ font-weight: normal; } input.checkbox{ top: 0; } .sf .sfErrorBlock a, div.errors a{ text-decoration: underline; color: #000; } .sf .sfErrorBlock a:hover, div.errors a:hover{ color: #CA1905; } /*old forms - fx calc*/ form.sf h3{ font-size: 18px; margin: 0 0 20px 0; padding: 14px 210px 16px 0; position: relative; } form.sf h3:before, form.sf h3:after{ background: transparent url(/DynamicContent/Resources/Images/imgMatrix.png) 0 -292px repeat-x; bottom: 0; content: ""; height: 3px; left: 0; position: absolute; width: 100%; } form.sf h3:before{ bottom: auto; top: 0; } /* MRR-21917 calendar in payment */ form.removeEmptyCheckedSets .summarygroup input.date { padding: 3px 8px; } /*submits - old forms, online banking so far targets all submits in online banking except acct activity*/ .Online .mainContent div.submit, form[name=memorizedAcctForm] div.submit{ margin-top: 20px; padding: 0; position: relative; } .Online .submit #Cancel, .Online .submit .cancel, .Login .submit #Cancel{ margin-right: 10px; padding: 7px 0; } .Online .submit .actionsAligned{ float: none; } /*conclusions*/ div.conclusion{ margin-top: 20px; } /*mobile banking forms - OnlineBanking/AccountServices/MobileBanking*/ div.actionsAligned input.addMobilePhone{ margin-bottom: 40px; } .mobileStepPhone2 .actionsAligned .btnWrap{ margin-right: 20px } /*form actions - submits, cancel, previous/back when there's no 1024X678, ie pay bills*/ .md div.formActions{ border: none; padding: 6px 0; position: relative; } div.formActions ul{ padding: 5px 0; } .formActions ul li{ display: block; float: left; margin: 0 28px 0 0; padding: 0; position: relative; } .formActions ul li:before{ display: none; } .formActions ul li.formEdit, .formActions ul li.formCancel{ background-image: none; margin: 5px 20px 0 0; } /* OSVOAD-2 */ /* Custom Open anywhere styles */ /* FONTS */ * { -webkit-font-smoothing: antialiased; } html.vcOpenAnywhereHTML, body.vcOpenAnywhereBody { height: 100%; } body.vcOpenAnywhereBody #right-column { min-height: 100vh; } .vcOpenAnywhereBody .formSection div.multiRow div.inputOption label, .vcOpenAnywhereBody .formSection div.entry label, .vcOpenAnywhereBody .ePackageChequing-moreInfo label, .vcOpenAnywhereBody .payAsYouGoChequing-moreInfo label, .vcOpenAnywhereBody .jumpStartSavings-moreInfo label, .vcOpenAnywhereBody .plan24Savings-moreInfo label { font-family: 'Agenda', sans-serif; color: #000; font-size: 18px; line-height: 18px; font-weight: 500; } .vcOpenAnywhereBody .openMembershipStep2 div.labelWithInfo { padding-bottom: 5px; } .vcOpenAnywhereBody .openMembershipStep4 .formSection div.entry label { line-height: 21px; } .vcOpenAnywhereBody .formSection p, .vcOpenAnywhereBody .formInstruction p, .vcOpenAnywhereBody .readOnly label, .vcOpenAnywhereBody .ePackageChequing-moreInfo ul, .vcOpenAnywhereBody .payAsYouGoChequing-moreInfo ul, .vcOpenAnywhereBody .jumpStartSavings-moreInfo ul, .vcOpenAnywhereBody .plan24Savings-moreInfo ul, .vcOpenAnywhereBody .openMembershipStepConfirm p, .vcOpenAnywhereBody .openMembershipStepConfirm ul { font-family: 'Open Sans', sans-serif; font-size: 15px; line-height: 24px; font-weight: 400; } .vcOpenAnywhereBody .openMembershipStep3 ul { font-family: 'Open Sans', sans-serif; font-size: 13px; line-height: 24px; font-weight: 400; } .vcOpenAnywhereBody .ePackageChequing-moreInfo ul, .vcOpenAnywhereBody .payAsYouGoChequing-moreInfo ul, .vcOpenAnywhereBody .jumpStartSavings-moreInfo ul, .vcOpenAnywhereBody .plan24Savings-moreInfo ul { line-height: 23px; font-size: 16px; list-style-type: none; padding-left: 0; margin-left: 0; } .vcOpenAnywhereBody caption { font-family: 'Open Sans', sans-serif; font-size: 13px; line-height: 21px; color: #776E64; font-weight: 600; } .vcOpenAnywhereBody blockquote { font-family: 'Open Sans', sans-serif; color: #000; font-size: 18px; line-height: 26px; font-weight: 600; } .vcOpenAnywhereBody h1 { font-family: 'Agenda', sans-serif; color: rgba(0,0,0,0.8); font-weight: 500; font-size: 36px; line-height: 44px; } .vcOpenAnywhereBody h2, .vcOpenAnywhereBody .formSection h2, .vcOpenAnywhereBody div.formPageConfirmation h2 { font: 500 26px/32px 'Agenda', sans-serif; color: #000; } .vcOpenAnywhereBody h3, .vcOpenAnywhereBody .formSection h3 { font-family: 'Agenda', sans-serif; color: #000; font-weight: 500; font-size: 22px; line-height: 30px; } .vcOpenAnywhereBody h3.select-branch-heading { font-weight: 500 !important; font-size: 22px !important; line-height: 30px !important; } .vcOpenAnywhereBody ul.contact-methods { font-family: 'Agenda', sans-serif; color: #776E64; font-weight: 400; font-size: 18px; line-height: 26px; } .vcOpenAnywhereBody ul.contact-methods li a { color: #776E64; } .vcOpenAnywhereBody ul.contact-methods li a:hover { color: #E82011; } /* OVERRIDING HEADING STYLES ON ESCAPED PROPERTIES */ .vcOpenAnywhereBody .openMembershipStep1 div.formSection > h3, .vcOpenAnywhereBody .openMembershipStep2 div.formSection > h3, .vcOpenAnywhereBody .openMembershipStep3 div.formSection > h3, .vcOpenAnywhereBody .openMembershipStep6 div.formSection > h3, .vcOpenAnywhereBody .openMembershipStep4 .formInstruction > h3, .vcOpenAnywhereBody .openMembershipStepConfirm h3 { font-weight: 400; font-size: 36px; line-height: 44px; } .vcOpenAnywhereBody .openMembershipStep3 div.formSection > h3 { margin-bottom: 14px; } /* OVERRIDING SOME EXISTING STYLES */ html.vcOpenAnywhereHTML { background-image: none; background-color: #F7F7F7; } .vcOpenAnywhereBody div.formSection:before, .vcOpenAnywhereBody div.formReceipt:before, .vcOpenAnywhereBody div.coApplicant:before, .vcOpenAnywhereBody div.formActions:before, .vcOpenAnywhereBody .formSection h3:after { background: transparent; } .vcOpenAnywhereBody div.header { margin-top: 0px; height: auto; width: auto; } .vcOpenAnywhereBody div.header:before { background: none; } .vcOpenAnywhereBody div.header .imgOverlay { background: url('/SharedContent/images/open-anywhere/VancityLogo.png') no-repeat; background-size: 170px; height: 110px; width: 170px; display: flex; margin: 0 auto; } .vcOpenAnywhereBody div.formPageConfirmation h2, .vcOpenAnywhereBody div.formSection h3, .vcOpenAnywhereBody div.formPageConfirmation div.formSection h3 { padding-right: 0; } /* LAYOUT */ body.vcOpenAnywhereBody { overflow: auto; } .vcOpenAnywhereBody #left-column { min-height: 600px; height: 100vh; background: url('/SharedContent/images/open-anywhere/sidebar-images/default.png') no-repeat; background-position: center right !important; background-size: cover !important; position: fixed; overflow: hidden; } .vcOpenAnywhereBody .openMembershipStep1#left-column { background: url('/SharedContent/images/open-anywhere/sidebar-images/getting-started.png') no-repeat; } .vcOpenAnywhereBody .openMembershipStep2#left-column { background: url('/SharedContent/images/open-anywhere/sidebar-images/get-to-know-you.png') no-repeat; } /* CHG091681 */ .vcOpenAnywhereBody .openMembershipStep3#left-column { background: url('/SharedContent/images/open-anywhere/sidebar-images/Image.png') no-repeat; } .vcOpenAnywhereBody .openMembershipStep4#left-column { background: url('/SharedContent/images/open-anywhere/sidebar-images/trans-union-questions.png') no-repeat; } .vcOpenAnywhereBody .openMembershipStepConfirm#left-column { background: url('/SharedContent/images/open-anywhere/sidebar-images/confirmation.png') no-repeat; } .vcOpenAnywhereBody #right-column { margin-left: 33.33333333%; } .vcOpenAnywhereBody #form-column { padding-left: 0px; padding-right: 0px; } .vcOpenAnywhereBody .nav { width: inherit; height: 149px; background-color: #F7F7F7; z-index: 1; position: fixed; } .vcOpenAnywhereBody .nav .box-shadow { width: 700px; height: 1px; position: absolute; bottom: 0; left: 0; right: 0; margin-left: auto; margin-right: auto; } .vcOpenAnywhereBody .nav .box-shadow.scrolling { box-sizing: border-box; border-bottom: 1px solid #EFECEA; box-shadow: 0 2px 4px 0 rgba(119,110,100,0.1); } .vcOpenAnywhereBody .form-content { max-width: 580px; margin: 149px auto; } .vcOpenAnywhereBody .form-content .formBank { padding: 5px; } /* FLYOUT MENU */ .vcOpenAnywhereBody .nav .menu-open { width: 34px; height: 34px; background: url('/SharedContent/images/open-anywhere/Help.svg') no-repeat center; cursor: pointer; position: absolute; top: 30px; right: 53px; } .vcOpenAnywhereBody .hidden-menu { height: 100%; width: 0; /* Changing this with jQuery on menu open/close */ position: fixed; z-index: 2; top: 0; right: 0; background-color: #fff; overflow-x: hidden; transition: 0.5s; box-shadow: 0 2px 4px 0 rgba(119,110,100,0.4); } .vcOpenAnywhereBody .body-overlay { position: fixed; display: none; /* hidden until menu toggles */ width: 100%; height: 100%; top: 0; left: 0; right: 0; bottom: 0; background-color: #F7F7F7; opacity: 0.96; z-index: 1; } .vcOpenAnywhereBody .hidden-menu .contact-details { width: 200px; margin: 192px auto; transition: 0.5s; display: none; } .vcOpenAnywhereBody .hidden-menu .close-menu { width: 34px; height: 34px; background: url('/SharedContent/images/open-anywhere/cancel.svg') no-repeat center; cursor: pointer; transition: 0.5s; position: absolute; top: 30px; right: 40px; } .vcOpenAnywhereBody .hidden-menu h1 { margin-bottom: 37px; } .vcOpenAnywhereBody .hidden-menu ul { padding-left: 0; margin-left: 0; } .vcOpenAnywhereBody .hidden-menu ul li { list-style-type: none; padding-left: 37px; margin-bottom: 54px; backface-visibility: hidden; } .vcOpenAnywhereBody .hidden-menu ul li.phone { background: url('/SharedContent/images/open-anywhere/phone.svg') no-repeat left center; } .vcOpenAnywhereBody .hidden-menu ul li.faq { background: url('/SharedContent/images/open-anywhere/faq.svg') no-repeat left center; } .vcOpenAnywhereBody .hidden-menu ul li.link { background: url('/SharedContent/images/open-anywhere/external-link.svg') no-repeat left center; } /* PROGRESS BAR */ .vcOpenAnywhereBody .formProgress { background-color: transparent; min-height: 62px; position: absolute; bottom: 5px; overflow: visible; padding-bottom: 10px; } .vcOpenAnywhereBody .formProgress ul { max-width: 585px; margin: 0 auto; } .vcOpenAnywhereBody .formProgress ul li.leftCol { width: auto; float: none; display: inline-block; } .vcOpenAnywhereBody .formProgress ul li span { background: none; color: transparent; } .vcOpenAnywhereBody .formProgress ul li span:before { content: '\2022'; color: #776E64; position: absolute; left: -20px; top: 17px; font-size: 20px; overflow: visible; } /* 6th progress bar dot, may not be needed */ /* .vcOpenAnywhereBody .formProgress ul li.leftCol ul li:last-child:after { content: '\2022'; color: #776E64; position: absolute; right: -1px; font-size: 22px; overflow: visible; top: 13px; } */ .vcOpenAnywhereBody .formProgress ul li.leftCol ul li:nth-child(5) { display: none; } .vcOpenAnywhereBody .formProgress ul li.leftCol ul li:nth-child(4):after { content: '\2022'; color: #776E64; position: absolute; right: -2px; font-size: 23px; overflow: visible; top: 12px; } .vcOpenAnywhereBody .openMembershipStep2 .formProgress ul li.leftCol ul li:first-child, .vcOpenAnywhereBody .openMembershipStep3 .formProgress ul li.leftCol ul li:first-child, .vcOpenAnywhereBody .openMembershipStep3 .formProgress ul li.leftCol ul li:nth-child(2), .vcOpenAnywhereBody .openMembershipStep6 .formProgress ul li.leftCol ul li:first-child, .vcOpenAnywhereBody .openMembershipStep6 .formProgress ul li.leftCol ul li:nth-child(2), .vcOpenAnywhereBody .openMembershipStep6 .formProgress ul li.leftCol ul li:nth-child(3), .vcOpenAnywhereBody .openMembershipStep4 .formProgress ul li.leftCol ul li:first-child, .vcOpenAnywhereBody .openMembershipStep4 .formProgress ul li.leftCol ul li:nth-child(2), .vcOpenAnywhereBody .openMembershipStep4 .formProgress ul li.leftCol ul li:nth-child(3), .vcOpenAnywhereBody .openMembershipStepConfirm .formProgress ul li.leftCol ul li:first-child, .vcOpenAnywhereBody .openMembershipStepConfirm .formProgress ul li.leftCol ul li:nth-child(2), .vcOpenAnywhereBody .openMembershipStepConfirm .formProgress ul li.leftCol ul li:nth-child(3), .vcOpenAnywhereBody .openMembershipStepConfirm .formProgress ul li.leftCol ul li:nth-child(4) { border-bottom: 2px solid #E82011; overflow: visible; } .vcOpenAnywhereBody .formProgress ul li ul li.current span:before, .vcOpenAnywhereBody .openMembershipStep1 .formProgress ul li.leftCol ul li:first-child span:before, .vcOpenAnywhereBody .openMembershipStep2 .formProgress ul li.leftCol ul li:first-child span:before, .vcOpenAnywhereBody .openMembershipStep3 .formProgress ul li.leftCol ul li:first-child span:before, .vcOpenAnywhereBody .openMembershipStep3 .formProgress ul li.leftCol ul li:nth-child(2) span:before, .vcOpenAnywhereBody .openMembershipStep6 .formProgress ul li.leftCol ul li:first-child span:before, .vcOpenAnywhereBody .openMembershipStep6 .formProgress ul li.leftCol ul li:nth-child(2) span:before, .vcOpenAnywhereBody .openMembershipStep6 .formProgress ul li.leftCol ul li:nth-child(3) span:before, .vcOpenAnywhereBody .openMembershipStep6 .formProgress ul li.leftCol ul li:nth-child(4) span:before, .vcOpenAnywhereBody .openMembershipStep4 .formProgress ul li.leftCol ul li:first-child span:before, .vcOpenAnywhereBody .openMembershipStep4 .formProgress ul li.leftCol ul li:nth-child(2) span:before, .vcOpenAnywhereBody .openMembershipStep4 .formProgress ul li.leftCol ul li:nth-child(3) span:before, .vcOpenAnywhereBody .openMembershipStepConfirm .formProgress ul li.leftCol ul li:first-child span:before, .vcOpenAnywhereBody .openMembershipStepConfirm .formProgress ul li.leftCol ul li:nth-child(2) span:before, .vcOpenAnywhereBody .openMembershipStepConfirm .formProgress ul li.leftCol ul li:nth-child(3) span:before, .vcOpenAnywhereBody .openMembershipStepConfirm .formProgress ul li.leftCol ul li:nth-child(4) span:before, .vcOpenAnywhereBody .openMembershipStepConfirm .formProgress ul li.leftCol ul li:nth-child(4):after { color: #E82011; } .vcOpenAnywhereBody .formProgress ul li.current { background: none; } .vcOpenAnywhereBody .formProgress li li { min-width: 140px; float: left; border-bottom: 2px solid #EFECEA; } .vcOpenAnywhereBody .formProgress p { position: absolute; top: 35px; color: #776E64; font-family: 'Open Sans', sans-serif; font-size: 13px; font-weight: 600; line-height: 21px; text-align: center; } .vcOpenAnywhereBody .openMembershipStep1 .formProgress p.step-one-name { height: 21px; left: -24px; width: 45px; } .vcOpenAnywhereBody .openMembershipStep1 .formProgress p.step-two-name { height: 42px; width: 72px; left: -35px; opacity: 0.3; } .vcOpenAnywhereBody .openMembershipStep2 .formProgress p.step-two-name { height: 42px; width: 72px; left: -35px; } .vcOpenAnywhereBody .openMembershipStep2 .formProgress p.step-three-name { height: 42px; left: -18px; opacity: 0.3; } .vcOpenAnywhereBody .openMembershipStep3 .formProgress p.step-three-name { height: 42px; left: -18px; } .vcOpenAnywhereBody .openMembershipStep3 .formProgress p.step-four-name { height: 42px; width: 92px; left: -48px; opacity: 0.3; } /* .vcOpenAnywhereBody .openMembershipStep6 .formProgress p.step-four-name { height: 42px; left: -32px; } */ /* .vcOpenAnywhereBody .openMembershipStep6 .formProgress p.step-five-name { height: 42px; width: 72px; left: -35px; opacity: 0.3; } */ .vcOpenAnywhereBody .openMembershipStep4 .formProgress p.step-four-name { height: 42px; width: 92px; left: 92px; } .vcOpenAnywhereBody .openMembershipStep4 .formProgress p.step-five-name { height: 42px; width: 92px; left: 92px; opacity: 0.3; } .vcOpenAnywhereBody .openMembershipStepConfirm .formProgress p.step-five-name { height: 42px; width: 92px; left: 92px; } /* GENERAL FORM STYLES */ .vcOpenAnywhereBody .contentTitle { display: none; } .vcOpenAnywhereBody label span.optional { height: 21px; width: 67.3px; color: #776E64; font-family: "Open Sans"; font-size: 13px; line-height: 21px; } .vcOpenAnywhereBody select { font-size: 15px; height: 40px; width: 100%; border-radius: 0; -moz-border-radius: 0; -webkit-border-radius: 0; border: 2px solid #EFECEA; padding: 8px 11px; appearance: none; -moz-appearance: none; -webkit-appearance: none; background: #fff url('/SharedContent/images/open-anywhere/dropdown.svg') no-repeat right; background-position: right 13px top 50%; } .vcOpenAnywhereBody select:disabled { background-color: #F7F7F7; color: #776E64; } .vcOpenAnywhereBody .formSection input[type=text], .vcOpenAnywhereBody input[type=password] { font-size: 15px !important; height: 40px; width: 100%; border-radius: 0; -moz-border-radius: 0; -webkit-border-radius: 0; box-shadow: none; -webkit-box-shadow: none; border: 2px solid #EFECEA; padding: 8px 11px; } .vcOpenAnywhereBody input[type=password] { height: 20px; width: 540px; } .vcOpenAnywhereBody div.entryError select { background-color: #fff; background-image: url('/SharedContent/images/open-anywhere/dropdown.svg'), url('/SharedContent/images/open-anywhere/Warning.svg'); background-position: right 13px top 50%, right 38px top 50%; background-repeat: no-repeat; border: 2px solid #EFECEA !important; border-bottom: 2px solid #FD5F00 !important; } .vcOpenAnywhereBody div.entryError input[type=text], .vcOpenAnywhereBody div.entryError input[type=password], .vcOpenAnywhereBody input.has-error { background: #fff url('/SharedContent/images/open-anywhere/Warning.svg') right 8px top 50% no-repeat; border: 2px solid #EFECEA !important; border-bottom: 2px solid #FD5F00 !important; } .vcOpenAnywhereBody .openMembershipStep2 #errorMsgId { background: #fff url('/SharedContent/images/open-anywhere/error-header-icon.svg') top 25px right 23px no-repeat; border-top: 2px solid #FD5F00; padding: 20px; } .vcOpenAnywhereBody .openMembershipStep2 #errorMsgId span.optional { display: none; } .vcOpenAnywhereBody .openMembershipStep2 #errorMsgId p.fieldText { color: #000; font: 500 22px/30px 'Agenda', sans-serif !important; margin-top: 5px; margin-left: 0; padding-left: 0; } .vcOpenAnywhereBody .openMembershipStep2 #errorMsgId p.fieldText:before { content: ''; background: transparent; } .vcOpenAnywhereBody .openMembershipStep2 #errorMsgId ol { padding-left: 0; margin-left: 0; list-style-type: none; color: #000; } .vcOpenAnywhereBody .openMembershipStep2 #errorMsgId ol li , .vcOpenAnywhereBody .openMembershipStep2 #errorMsgId ol li label { margin: 0; } .vcOpenAnywhereBody select::-ms-expand { display: none; } .vcOpenAnywhereBody input[type=checkbox] { height: 26px; width: 26px !important; border: 2px solid #EFECEA; background-color: #FFFFFF; appearance: none; -moz-appearance: none; -webkit-appearance: none; backface-visibility: hidden; } .vcOpenAnywhereBody .ePackageChequing-checkbox input[type=checkbox], .vcOpenAnywhereBody .payAsYouGoChequing-checkbox input[type=checkbox], .vcOpenAnywhereBody .jumpStartSavings-checkbox input[type=checkbox], .vcOpenAnywhereBody .plan24Savings-checkbox input[type=checkbox] { border: 2px solid #E5E5E5; } .vcOpenAnywhereBody input[type=checkbox]:checked { background: #fff url('/SharedContent/images/open-anywhere/select-checkmark.svg') no-repeat center; outline: none; background-size: 70%; } .vcOpenAnywhereBody .openMembershipStep1 .oneColRow input[type=checkbox] { margin-right: 10px; cursor: pointer; } .vcOpenAnywhereBody .openMembershipStep3 input[type=checkbox] { position: inherit !important; height: 18px; width: 18px !important; border: 2px solid #776E64; } .vcOpenAnywhereBody .openMembershipStep3 input[type=checkbox]:checked { background: #00A4B3 url('/SharedContent/images/open-anywhere/white-check.svg') center no-repeat; border-color: #00A4B3; outline: none; } .vcOpenAnywhereBody input[type=radio] { opacity: 0; } .vcOpenAnywhereBody input[type=radio] + label:before { display: inline-block; content: ''; font-size: 24px; line-height: 18px; text-align: center; background: #fff; width: 14px; height: 14px; vertical-align: middle; margin: 0 10px; border-radius: 50%; border: 2px solid #776E64; } .vcOpenAnywhereBody input[type=radio]:focus + label:before { outline-width: 2px; outline-style: solid; outline-color: Highlight; outline: 5px auto -webkit-focus-ring-color; } .vcOpenAnywhereBody input[type=radio]:checked + label:before { background: #00A4B3 url('/SharedContent/images/open-anywhere/white-check.svg') center no-repeat; border: 2px solid #00A4B3; } .vcOpenAnywhereBody .formSection div.inputOption label { padding-left: 0 !important; margin-left: -10px; margin-right: 24px; font: 400 15px/22px 'Open Sans', sans-serif; } .vcOpenAnywhereBody div.entryError div.input input[type=radio], .vcOpenAnywhereBody div.entryError div.input input[type=checkbox] { outline: 1px solid #FD5F00 !important; } .vcOpenAnywhereBody .formSection div.multiRow div.inputOption { display: table; } .vcOpenAnywhereBody .formSection div.multiRow div.inputOption label { display: table-cell; vertical-align: middle; padding-left: 10px; } .vcOpenAnywhereBody a { color: #776E64; text-decoration: underline; } .vcOpenAnywhereBody a:hover { color: #E82011; text-decoration: underline; } /* BUTTONS */ .btnWrap:before { content: ''; } span.btnWrap:after { z-index: 0; background: none; } .vcOpenAnywhereBody .md .formActions { width: 135px; margin: 44px auto; } .vcOpenAnywhereBody .formActions ul li { margin: 0 10px; } .vcOpenAnywhereBody .formActions .btnWrap input[type=submit], .vcOpenAnywhereBody .openMembershipStep6 .m-signature-pad--footer button.save, .vcOpenAnywhereBody .openMembershipStepConfirm p.find-branch a, .vcOpenAnywhereBody .openMembershipStepConfirm p.log-in-link a { font-family: 'Agenda', sans-serif; height: 40px; width: 120px; border: 1px solid #BA271C; color: #fff; background: #E82011; cursor: pointer; transition: all .15s ease; font-size: 16px; } .vcOpenAnywhereBody .formActions .btnWrap input[type=submit]:hover, .vcOpenAnywhereBody .openMembershipStep6 .m-signature-pad--footer button.save:hover, .vcOpenAnywhereBody .openMembershipStepConfirm p.find-branch a:hover, .vcOpenAnywhereBody .openMembershipStepConfirm p.log-in-link a:hover { border: 1px solid #E82011; color: #E82011 !important; background: #f7f7f7; } /* Disabled button state */ .vcOpenAnywhereBody .formActions .btnWrap input[type=submit]:disabled { pointer-events: none; background: #F7F7F7; color: rgba(119,110,100,0.5); border: 1px solid rgba(119,110,100,0.5); } .vcOpenAnywhereBody .openMembershipStep2 .formActions ul, .vcOpenAnywhereBody .openMembershipStep3 .formActions ul { display: flex; flex-direction: column; } .vcOpenAnywhereBody .openMembershipStep2 .formActions ul li, .vcOpenAnywhereBody .openMembershipStep3 .formActions ul li, { display: list-item; float: none; } .vcOpenAnywhereBody .openMembershipStep2 .formActions ul li:first-child, .vcOpenAnywhereBody .openMembershipStep3 .formActions ul li:first-child { order: 2; } .vcOpenAnywhereBody .openMembershipStep2 .formActions ul li:nth-child(2), .vcOpenAnywhereBody .openMembershipStep3 .formActions ul li:nth-child(2) { order: 1; } .vcOpenAnywhereBody .formActions .vcBtnPrev { font-family: 'Agenda', sans-serif; font-size: 14px; width: 120px; border: none; background: transparent; box-shadow: none; padding: 0; margin: 0; } .vcOpenAnywhereBody .vcBtnPrev:before, .vcOpenAnywhereBody .vcBtnPrev:hover:before { background: none; } .vcOpenAnywhereBody .vcBtnPrev:after { content: ''; } .vcOpenAnywhereBody .openMembershipStep2 .formActions ul li.formPrevious, .vcOpenAnywhereBody .openMembershipStep3 .formActions ul li.formPrevious { text-align: center; margin-top: 30px; background: url('/SharedContent/images/open-anywhere/ChevronLeft.svg') no-repeat top 2px left; } /* GETTING STARTED PAGE */ /* Hiding error messages at the top of the screen on Getting Started Page */ .vcOpenAnywhereBody .openMembershipStep1 .formError { display: none; } /* this also contains error for dropdown on consents page */ .vcOpenAnywhereBody p.branch-error-text, .vcOpenAnywhereBody p.drop-down-error-text, .vcOpenAnywhereBody p.error-text { height: 14px; color: #000000; font-family: "Open Sans"; font-size: 12px; line-height: 14px; margin-top: 2px; } .vcOpenAnywhereBody p.account-purpose-error-text { height: 14px; color: #fff; font-family: "Open Sans"; font-size: 12px; line-height: 14px; margin-top: 0; } .vcOpenAnywhereBody .openMembershipStep1 .formSection > .oneColRow:last-child { display: none; } .vcOpenAnywhereBody img.account-image { float: right; padding-left: 20px; padding-bottom: 20px; } .vcOpenAnywhereBody .ePackageChequing-details h2 { margin-top: 0; } .vcOpenAnywhereBody p.disclaimer-text, .vcOpenAnywhereBody span.disclaimer-text { margin-bottom: 21px; color: #776E64; clear: left; } .vcOpenAnywhereBody span.disclaimer-text { font-size: 14px; } .vcOpenAnywhereBody .ePackageChequing p.disclaimer-text, .vcOpenAnywhereBody .payAsYouGoChequing p.disclaimer-text, .vcOpenAnywhereBody .jumpStartSavings p.disclaimer-text, .vcOpenAnywhereBody .plan24Savings p.disclaimer-text { font-size: 16px; font-weight: 600; } .vcOpenAnywhereBody .ePackageChequing p.disclaimer-text, .vcOpenAnywhereBody .payAsYouGoChequing p.disclaimer-text, .vcOpenAnywhereBody .plan24Savings p.disclaimer-text { border-bottom: 2px dotted #CEBFB1; padding-bottom: 20px; } .vcOpenAnywhereBody .formSection .account-extra-info { font-size: 13px; line-height: 21px; } .vcOpenAnywhereBody p.no-account-error-text { display: none; height: 16px; width: 428px; color: #000000; font-family: "Open Sans"; font-size: 12px; line-height: 15px; background: url('/SharedContent/images/open-anywhere/Warning.svg') no-repeat left; padding-left: 25px; } .vcOpenAnywhereBody .openMembershipStep1 .formSection > h3 { display: none; } .vcOpenAnywhereBody .openMembershipStep1 h3.account-select-heading { font-weight: 400; font-size: 36px; line-height: 44px; } .vcOpenAnywhereBody h3.account-select-heading { margin-bottom: 20px; padding-bottom: 0; } .vcOpenAnywhereBody .ePackageChequing-moreInfo, .vcOpenAnywhereBody .payAsYouGoChequing-moreInfo, .vcOpenAnywhereBody .jumpStartSavings-moreInfo, .vcOpenAnywhereBody .plan24Savings-moreInfo { display: none; } .vcOpenAnywhereBody .openMembershipStep1 span.helpHintTrigger { display: none; } .vcOpenAnywhereBody .ePackageChequing, .vcOpenAnywhereBody .payAsYouGoChequing, .vcOpenAnywhereBody .jumpStartSavings, .vcOpenAnywhereBody .plan24Savings { background: #fff; box-shadow: 0 2px 4px 0 rgba(0,0,0,0.1); margin-bottom: 0; } .vcOpenAnywhereBody .payAsYouGoChequing, .vcOpenAnywhereBody .jumpStartSavings, .vcOpenAnywhereBody .plan24Savings, .vcOpenAnywhereBody .openMembershipStep1 h3.select-branch-heading { margin-top: 40px; } .vcOpenAnywhereBody .branch-dropdown { margin-top: 70px; } .vcOpenAnywhereBody .openMembershipStep1 .formFieldGroup > div:nth-child(3), .vcOpenAnywhereBody .openMembershipStep1 .formFieldGroup > div:nth-child(6), .vcOpenAnywhereBody .openMembershipStep1 .formFieldGroup > div:nth-child(9), .vcOpenAnywhereBody .openMembershipStep1 .formFieldGroup > div:nth-child(12) { display: none; } .vcOpenAnywhereBody .openMembershipStep1 .formFieldGroup > div:nth-child(4), .vcOpenAnywhereBody .openMembershipStep1 .formFieldGroup > div:nth-child(7), .vcOpenAnywhereBody .openMembershipStep1 .formFieldGroup > div:nth-child(10), .vcOpenAnywhereBody .openMembershipStep1 .formFieldGroup > div:nth-child(13), .vcOpenAnywhereBody .openMembershipStep1 .ePackageChequing-checkbox, .vcOpenAnywhereBody .openMembershipStep1 .payAsYouGoChequing-checkbox, .vcOpenAnywhereBody .openMembershipStep1 .jumpStartSavings-checkbox, .vcOpenAnywhereBody .openMembershipStep1 .plan24Savings-checkbox { background: #EEECEA; box-shadow: 0 2px 4px 0 rgba(0,0,0,0.1); padding: 20px; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } .vcOpenAnywhereBody .openMembershipStep1 .formFieldGroup > div:nth-child(4), .vcOpenAnywhereBody .openMembershipStep1 .formFieldGroup > div:nth-child(7), .vcOpenAnywhereBody .openMembershipStep1 .formFieldGroup > div:nth-child(10), .vcOpenAnywhereBody .openMembershipStep1 .formFieldGroup > div:nth-child(13) { padding-top: 0; } .vcOpenAnywhereBody .openMembershipStep1 .formFieldGroup > div:nth-child(4), .vcOpenAnywhereBody .openMembershipStep1 .formFieldGroup > div:nth-child(7), .vcOpenAnywhereBody .openMembershipStep1 .formFieldGroup > div:nth-child(10), .vcOpenAnywhereBody .openMembershipStep1 .formFieldGroup > div:nth-child(13) { background: #00A4B3; } .vcOpenAnywhereBody .openMembershipStep1 .formFieldGroup > div:nth-child(4) label, .vcOpenAnywhereBody .openMembershipStep1 .formFieldGroup > div:nth-child(7) label, .vcOpenAnywhereBody .openMembershipStep1 .formFieldGroup > div:nth-child(10) label, .vcOpenAnywhereBody .openMembershipStep1 .formFieldGroup > div:nth-child(13) label { color: #fff; } .vcOpenAnywhereBody .openMembershipStep1 .formFieldGroup > div:nth-child(4) .labelWithInfo, .vcOpenAnywhereBody .openMembershipStep1 .formFieldGroup > div:nth-child(7) .labelWithInfo, .vcOpenAnywhereBody .openMembershipStep1 .formFieldGroup > div:nth-child(10) .labelWithInfo, .vcOpenAnywhereBody .openMembershipStep1 .formFieldGroup > div:nth-child(13) .labelWithInfo { margin-bottom: 7px; } .vcOpenAnywhereBody .ePackageChequing-checkbox, .vcOpenAnywhereBody .payAsYouGoChequing-checkbox { padding: 20px; } .vcOpenAnywhereBody .ePackageChequing-details, .vcOpenAnywhereBody .payAsYouGoChequing-details, .vcOpenAnywhereBody .jumpStartSavings-details, .vcOpenAnywhereBody .plan24Savings-details { padding: 20px 20px 10px 20px; } .vcOpenAnywhereBody .ePackageChequing-moreInfo, .vcOpenAnywhereBody .payAsYouGoChequing-moreInfo, .vcOpenAnywhereBody .jumpStartSavings-moreInfo, .vcOpenAnywhereBody .plan24Savings-moreInfo { padding-top: 20px; border-top: 1px solid #EFECEA; } .vcOpenAnywhereBody a.show-more-link { text-decoration: none; color: #E82011; background: url('/SharedContent/images/open-anywhere/ShowMore.svg') no-repeat left; padding-left: 28px; } .vcOpenAnywhereBody a.show-more-link:hover { text-decoration: underline; } .vcOpenAnywhereBody a.show-more-link.rotated { background: url('/SharedContent/images/open-anywhere/ShowLess.svg') no-repeat left; } .vcOpenAnywhereBody a.show-less-link { text-decoration: none; color: #E82011; background: url('/SharedContent/images/open-anywhere/ShowLess.svg') no-repeat left; padding-left: 28px; } .vcOpenAnywhereBody a.show-less-link:hover { text-decoration: underline; } .vcOpenAnywhereBody .openMembershipStep1 a.find-branch-link { display: block; height: 12px; margin: 12px 5px 10px 0; background: transparent url(/SharedContent/images/open-anywhere/info-circle.svg) left no-repeat; background-size: 14px; color: #00838F; padding-left: 17px; font: 400 12px/14px 'Open Sans', sans-serif; outline: none; } .vcOpenAnywhereBody .openMembershipStep1 a.find-branch-link:hover { text-decoration: none; } /* GETTING TO KNOW YOU PAGE */ .vcOpenAnywhereBody .openMembershipStep2 .id-verification-section h3, .vcOpenAnywhereBody .openMembershipStep2 .contact-info-section h3, .vcOpenAnywhereBody .openMembershipStep2 .address-section h3, .vcOpenAnywhereBody .openMembershipStep2 .employment-info-section h3, .vcOpenAnywhereBody .openMembershipStep2 .security-section h3, .vcOpenAnywhereBody .openMembershipStep2 .MailingAddressGroup h4 { font: 500 26px/32px 'Agenda', sans-serif !important; } .vcOpenAnywhereBody .id-verification-section, .vcOpenAnywhereBody .contact-info-section, .vcOpenAnywhereBody .employment-info-section, .vcOpenAnywhereBody .security-section { margin-top: 120px; } .vcOpenAnywhereBody .sin-section .disclaimer-text { margin-top: 15px; } .vcOpenAnywhereBody .sin-section input { margin-top: 7px; } .vcOpenAnywhereBody .sin-section h3, .vcOpenAnywhereBody .address-section h3 { display: none; } .vcOpenAnywhereBody .openMembershipStep2 span.helpHintTrigger { display: none; } .vcOpenAnywhereBody .id-verification-section h3, .vcOpenAnywhereBody .contact-info-section h3 { margin-bottom: 14px; } .vcOpenAnywhereBody .id-verification-section .disclaimer-text { margin-bottom: 30px; } .vcOpenAnywhereBody .id-verification-section .labelWithInfo:first-child, .vcOpenAnywhereBody .id-verification-section div.oneColRow:nth-child(3) .labelWithInfo { margin-bottom: 7px; } .vcOpenAnywhereBody .openMembershipStep2 label { margin-top: 15px; } .vcOpenAnywhereBody .openMembershipStep2 .MailingAddressGroup { background: none; margin-top: 100px; } .vcOpenAnywhereBody .openMembershipStep2 .MailingAddressGroup h4:after { background: none; } /* Address complete styles */ .vcOpenAnywhereBody .openMembershipStep2 .AddressGroup { margin-top: -40px; } .vcOpenAnywhereBody .CanadaPostGroup > div:nth-child(2) { margin-top: -30px; } .vcOpenAnywhereBody .openMembershipStep2 .MailingAddressGroup h4 { margin-bottom: -30px; } .vcOpenAnywhereBody .CanadaPostGroup div:nth-child(2) a, .vcOpenAnywhereBody .MailingCanadaPostGroup a { font-size: 13px; } .vcOpenAnywhereBody .pca span.pcadescription { font-style: normal; } .vcOpenAnywhereBody .pca .pcaitem { background: #fff; } .vcOpenAnywhereBody .pca .pcaselected { color: #fff; background: #00A4B3; } .vcOpenAnywhereBody .pca .pcaselected span.pcadescription { color: #fff; font-style: normal; } .vcOpenAnywhereBody .pcaautocomplete { background: #fff; font-size: 13px; font-family: 'Open Sans', sans-serif; box-shadow: 0 2px 4px 0 rgba(32,16,47,.3); } .vcOpenAnywhereBody .pca .pcaitem.pcaexpandable { background-image: url(//ws1.postescanada-canadapost.ca/images/icons/captureplus/chevron.png); background-repeat: no-repeat; background-position-x: 99%; background-position-y: 50%; background-position: right 7px center; } .vcOpenAnywhereBody .formFieldGroup.CanadaPostGroup .input textarea, .vcOpenAnywhereBody .formFieldGroup.MailingCanadaPostGroup .input textarea { background: #fff; box-shadow: none; font-family: 'Open Sans', sans-serif; font-size: 15px; line-height: 24px; height: 100px; width: 100%; } .vcOpenAnywhereBody .openMembershipStep2 input[type=radio] + label:before, .vcOpenAnywhereBody .openMembershipStep2 input[type=radio]:checked + label:before { margin-left: -6px; } .vcOpenAnywhereBody .MailingCanadaPostGroup > div:nth-child(2) { margin-top: -30px; } /* Custom tooltips on Getting to know you page */ .vcOpenAnywhereBody .openMembershipStep2 .email-tooltip, .vcOpenAnywhereBody .openMembershipStep2 .sin-tooltip, .vcOpenAnywhereBody .openMembershipStep2 .pac-tooltip, .vcOpenAnywhereBody .openMembershipStep2 .address-tooltip { position: absolute; left: -340px; height: auto; width: 300px; padding: 14px; background: #fff; font-family: 'Open Sans', sans-serif; box-shadow: 0 2px 4px 0 rgba(119,110,100,0.2); border-left: 2px solid #00A4B3; } .vcOpenAnywhereBody .openMembershipStep2 .sin-tooltip { top: 19px; visibility: hidden; } .vcOpenAnywhereBody .openMembershipStep2 .email-tooltip { top: 294px; visibility: hidden; } .vcOpenAnywhereBody .openMembershipStep2 .address-tooltip { top: 56px; visibility: hidden; } .vcOpenAnywhereBody .openMembershipStep2 .pac-tooltip { top: 142px; visibility: hidden; } .vcOpenAnywhereBody .openMembershipStep2 .email-tooltip .left-arrow, .vcOpenAnywhereBody .openMembershipStep2 .sin-tooltip .left-arrow, .vcOpenAnywhereBody .openMembershipStep2 .pac-tooltip .left-arrow, .vcOpenAnywhereBody .openMembershipStep2 .address-tooltip .left-arrow { position: absolute; top: calc(50% - 8px); right: -7px; width: 7px; height: 16px; overflow: hidden; } .vcOpenAnywhereBody .openMembershipStep2 .email-tooltip .left-arrow:after, .vcOpenAnywhereBody .openMembershipStep2 .sin-tooltip .left-arrow:after, .vcOpenAnywhereBody .openMembershipStep2 .pac-tooltip .left-arrow:after, .vcOpenAnywhereBody .openMembershipStep2 .address-tooltip .left-arrow:after { content: ""; position: absolute; width: 10px; height: 10px; background-color: rgba(255,255,255,0.95); transform-origin: center; transform: rotate(225deg); box-shadow: 0 -2px 4px 0 rgba(119,110,100,0.2); right: 2px; top: 3px; } /* Getting to know you page errors */ .vcOpenAnywhereBody .errorMsgId span.optional { color: #ca1905; } /* LEGAL PAGE */ .vcOpenAnywhereBody .openMembershipStep3 .labelWithInfo span.helpHintTrigger { display: block; height: 12px; width: 225px; margin: 12px 5px 10px 0; background: transparent url(/SharedContent/images/open-anywhere/info-circle.svg) left no-repeat; background-size: 14px; color: #00838F; padding-left: 17px; font: 400 12px/14px 'Open Sans', sans-serif; outline: none; } .vcOpenAnywhereBody .openMembershipStep3 .legal-section { margin-top: 105px; margin-bottom: 120px; } /* Custom tooltips on Legal page */ .vcOpenAnywhereBody .openMembershipStep3 .helpHint h3 { margin: 0 0 10px 0; padding: 0; width: 275px; } .vcOpenAnywhereBody .openMembershipStep3 .helpHint p { font: 400 13px/21px 'Open Sans', sans-serif; } .vcOpenAnywhereBody .openMembershipStep3 .helpHint { position: absolute; display: block; left: -366px !important; height: auto; width: 300px; padding: 20px; background: #fff; font-family: 'Open Sans', sans-serif; box-shadow: 0 2px 4px 0 rgba(119,110,100,0.2); border: none; border-left: 2px solid #00A4B3; z-index: 0; } .vcOpenAnywhereBody .openMembershipStep3 .formSection div.entry, .vcOpenAnywhereBody .openMembershipStep3 .oneColRow { overflow: visible !important; } .vcOpenAnywhereBody .openMembershipStep3 .instructions .labelWithInfo, .vcOpenAnywhereBody .openMembershipStep3 .foreign-state .labelWithInfo, .vcOpenAnywhereBody .openMembershipStep3 .senior-official .labelWithInfo, .vcOpenAnywhereBody .openMembershipStep3 .hio .labelWithInfo, .vcOpenAnywhereBody .openMembershipStep3 .us-tax .labelWithInfo, .vcOpenAnywhereBody .openMembershipStep3 .tin-confirm .labelWithInfo { position: relative; } .vcOpenAnywhereBody .openMembershipStep3 .purpose .helpHint { top: 110px !important; } .vcOpenAnywhereBody .openMembershipStep3 .instructions .helpHint { top: 4px !important; } .vcOpenAnywhereBody .openMembershipStep3 .foreign-state .helpHint { top: 24px !important; } .vcOpenAnywhereBody .openMembershipStep3 .senior-official .helpHint { top: 6px !important; } .vcOpenAnywhereBody .openMembershipStep3 .hio .helpHint { top: 59px !important; } .vcOpenAnywhereBody .openMembershipStep3 .us-tax .helpHint { top: 5px !important; } .vcOpenAnywhereBody .openMembershipStep3 .tin-confirm .helpHint { top: 3px !important; } .vcOpenAnywhereBody .openMembershipStep3 .helpHint .left-arrow { position: absolute; right: -7px; width: 7px; height: 16px; overflow: hidden; } .vcOpenAnywhereBody .openMembershipStep3 .purpose .helpHint .left-arrow, .vcOpenAnywhereBody .openMembershipStep3 .instructions .helpHint .left-arrow, .vcOpenAnywhereBody .openMembershipStep3 .foreign-state .helpHint .left-arrow , .vcOpenAnywhereBody .openMembershipStep3 .senior-official .helpHint .left-arrow , .vcOpenAnywhereBody .openMembershipStep3 .hio .helpHint .left-arrow , .vcOpenAnywhereBody .openMembershipStep3 .us-tax .helpHint .left-arrow, .vcOpenAnywhereBody .openMembershipStep3 .tin-confirm .helpHint .left-arrow { top: 23px; } .vcOpenAnywhereBody .openMembershipStep3 .helpHint .left-arrow:after { content: ""; position: absolute; width: 10px; height: 10px; background-color: rgba(255,255,255,0.95); transform-origin: center; transform: rotate(225deg); box-shadow: 0 -2px 4px 0 rgba(119,110,100,0.2); right: 2px; top: 3px; } .vcOpenAnywhereBody .openMembershipStep3 .close-help, .vcOpenAnywhereBody .openMembershipStep3 .tin-close-help { width: 16px; height: 16px; background: url('/SharedContent/images/open-anywhere/cancel.svg') no-repeat center; background-size: cover; cursor: pointer; transition: 0.5s; position: absolute; top: 23px; right: 20px; cursor: pointer; } .vcOpenAnywhereBody .openMembershipStep3 .formSection div:nth-child(8) { background: #fff; padding: 20px; } .vcOpenAnywhereBody .openMembershipStep3 .formSection div:nth-child(8) .helpHintTrigger { display: none; } .vcOpenAnywhereBody .openMembershipStep3 .legal-section div.inputOption label, .vcOpenAnywhereBody .openMembershipStep3 .marketing-consent-section div.inputOption label { padding-left: 40px !important; display: inline-block; margin-top: -25px; } .vcOpenAnywhereBody .openMembershipStep3 .legal-section div.inputOption label { display: table !important; } /* .vcOpenAnywhereBody .openMembershipStep3 .legal-section div.inputOption label { padding-left: 20px !important; } */ .vcOpenAnywhereBody .openMembershipStep3 .legal-agreement p.disclaimer-text, .vcOpenAnywhereBody .openMembershipStep3 .marketing-consent p.disclaimer-text { font-size: 15px; line-height: 21px; } .vcOpenAnywhereBody .openMembershipStep3 .marketing-consent p.disclaimer-text { margin-bottom: 30px } .vcOpenAnywhereBody .openMembershipStep3 .legal-agreement .embedded-agreement { overflow: scroll; height: 300px; width: 100%; background: #fff; padding: 20px; margin: 31px 0 20px 0; border-top: 1px #E5E5E5 solid; border-bottom: 1px #E5E5E5 solid; } .vcOpenAnywhereBody .openMembershipStep3 .legal-agreement .embedded-agreement p { font-size: 13px; line-height: 21px; } .vcOpenAnywhereBody .openMembershipStep3 .legal-agreement a.download-link, .vcOpenAnywhereBody .openMembershipStep3 .marketing-consent a.download-link { font-size: 16px; line-height: 21px; padding: 10px 36px 10px 12px; height: 40px; width: auto; border: 2px solid #776E64; cursor: pointer; text-decoration: none; background: url('/SharedContent/images/open-anywhere/Grey.svg') no-repeat right 8px center; background-size: 18px; } .vcOpenAnywhereBody .openMembershipStep3 .legal-agreement a.download-link:hover, .vcOpenAnywhereBody .openMembershipStep3 .marketing-consent a.download-link:hover { color: #E82011; border: 2px solid #E82011; background: url('/SharedContent/images/open-anywhere/Red.svg') no-repeat right 8px center; background-size: 18px; } .vcOpenAnywhereBody .openMembershipStep3 .legal-section div.oneColRow { margin-top: 31px; } .vcOpenAnywhereBody .openMembershipStep3 .marketing-consent-section div.oneColRow { margin-top: 40px; } .vcOpenAnywhereBody .openMembershipStep3 .marketing-consent-section .oneColRow:last-child label { display: block; } /* .vcOpenAnywhereBody .openMembershipStep3 .tin-confirm { background: #fff; padding: 20px; } */ /* Legal page error handling */ .vcOpenAnywhereBody .openMembershipStep3 #errorMsgId { display: none; } .vcOpenAnywhereBody .openMembershipStep3 p.radio-button-error { background: url('/SharedContent/images/open-anywhere/Warning.svg') left no-repeat; font-size: 12px; padding-left: 28px; padding-top: 5px; } /* Error on incorrect tax juristiction */ .vcOpenAnywhereBody .openMembershipStep3 div.tax-error { display: none; padding: 22px 20px 20px 76px; background: #fff url('/SharedContent/images/open-anywhere/error-header-icon.svg') no-repeat top 22px left 20px; box-shadow: 0 2px 4px 0 rgba(253,95,0,0.2); border-top: 2px solid #FD5F00; margin-top: 20px; margin-bottom: 30px; } .vcOpenAnywhereBody .openMembershipStep3 div.tax-error p { margin-bottom: 0; } /* Special PAC Confirmation on Legal page */ .vcOpenAnywhereBody .openMembershipStep3 div.pac-confirmation { width: 100%; background: #fff; padding: 20px; margin-top: 20px; display: none; } .vcOpenAnywhereBody .openMembershipStep3 div.pac-confirmation label { font: 500 18px/21px 'Agenda', sans-serif; } .vcOpenAnywhereBody .openMembershipStep3 input[type=password] { width: 95%; } /* SIGNATURE PAGE */ .vcOpenAnywhereBody .openMembershipStep6 p.disclaimer-text, .vcOpenAnywhereBody .openMembershipStep6 .provide-signature { margin-bottom: 30px; } .vcOpenAnywhereBody .openMembershipStep6 .sign-now-message p.info { color: #776E64; } .vcOpenAnywhereBody .openMembershipStep6 .input .m-signature-pad { border: none; box-shadow: none; border-radius: 0; padding: 0; background: #fff; } .vcOpenAnywhereBody .openMembershipStep6 .m-signature-pad > .m-signature-pad--body { border: none; } .vcOpenAnywhereBody .openMembershipStep6 .m-signature-pad > .m-signature-pad--body > hr { border: 1px solid #00A4B3; margin: 0 20px; } .vcOpenAnywhereBody .openMembershipStep6 .branch-signature-message { display: none; background: #fff url('/SharedContent/images/open-anywhere/alert-icon-yellow.svg') no-repeat top 18px left 20px; padding: 21px 20px 19px 76px; margin-top: 38px; border-top: 2px solid #F5A623; } .vcOpenAnywhereBody .openMembershipStep6 .custom-signature-panel { background: #fff; } .vcOpenAnywhereBody .openMembershipStep6 .custom-signature-panel hr { border: none !important; height: 1px; background: #00A4B3; padding: 0; } .vcOpenAnywhereBody .openMembershipStep6 .m-signature-pad > .m-signature-pad--footer { margin: 0; } .vcOpenAnywhereBody .openMembershipStep6 .m-signature-pad--footer button.redo { float: right; background: url('/SharedContent/images/open-anywhere/cancel-gray.svg') no-repeat right center; background-size: 16px; padding-right: 21px; border: none; color: #776E64; height: 40px; cursor: pointer; } .vcOpenAnywhereBody .openMembershipStep6 .m-signature-pad--footer button.redo:hover { color: #E82011; background: url('/SharedContent/images/open-anywhere/cancel-hover.svg') no-repeat right center; background-size: 16px; } .vcOpenAnywhereBody .openMembershipStep6 .m-signature-pad--footer button.save { float: left; } .vcOpenAnywhereBody .openMembershipStep6 .m-signature-pad--footer button.save, .vcOpenAnywhereBody .openMembershipStep6 .m-signature-pad--footer button.redo { margin: 20px; } .vcOpenAnywhereBody .openMembershipStep6 .openmembershipEsignatureLater { display: none; } .vcOpenAnywhereBody .openMembershipStep6 .formActions { margin-top: 30px; } /* SECURITY PAGE */ .vcOpenAnywhereBody .openMembershipStep4 .formSection div.multiRow div.inputOption { display: block; } .vcOpenAnywhereBody .openMembershipStep4 .formSection div.multiRow div.inputOption label { background: #fff; height: 60px; width: 440px; border: 2px solid #EFECEA; border-bottom: none; padding-left: 40px !important; cursor: pointer; } .vcOpenAnywhereBody .openMembershipStep4 .formSection div.multiRow div.inputOption label:last-child { border-bottom: 2px solid #EFECEA; } .vcOpenAnywhereBody .openMembershipStep4 .formSection div.entry div.input input { margin-bottom: -20px; } .vcOpenAnywhereBody .openMembershipStep4 div.formSection > h3, .vcOpenAnywhereBody .openMembershipStepConfirm div.formSection > h3 { display: none; } .vcOpenAnywhereBody .openMembershipStep4 .formInstruction h3 { margin-bottom: 22px; } .vcOpenAnywhereBody .openMembershipStep4 .formSection div.entry label { margin-bottom: 25px; } .vcOpenAnywhereBody .openMembershipStep4 .formSection div.multiRow div.inputOption label.checked-box { background: #00A4B3; color: #fff; } .vcOpenAnywhereBody .openMembershipStep4 input[type=radio] + label:before { border: 1px solid #776E64; margin-left: -27px; } .vcOpenAnywhereBody .openMembershipStep4 input[type=radio]:checked + label:before { background: #fff url('/SharedContent/images/open-anywhere/select-checkmark.svg') center no-repeat; border: 1px solid #fff; background-size: 80%; } /* CONFIRMATION PAGE */ .vcOpenAnywhereBody .openMembershipStepConfirm h3 { margin-bottom: 22px; } .vcOpenAnywhereBody .openMembershipStepConfirm .confirm-page-info { padding: 23px 20px 20px 75px; margin-top: 30px; margin-bottom: 30px; border-top: 2px solid #00A4B3; background: #fff url('/SharedContent/images/open-anywhere/info-icon.svg') no-repeat top 24px left 26px; box-shadow: 0 2px 4px 0 rgba(0,164,179,0.2); } .vcOpenAnywhereBody .openMembershipStepConfirm p.find-branch { text-align: center; margin-top: 40px; } .vcOpenAnywhereBody .openMembershipStepConfirm p.find-branch a, .vcOpenAnywhereBody .openMembershipStepConfirm p.log-in-link a { text-decoration: none; padding: 10px 30px; } .vcOpenAnywhereBody .openMembershipStepConfirm p.back-to-vc, .vcOpenAnywhereBody .openMembershipStepConfirm p.log-in-link { text-align: center; font-family: 'Agenda', sans-serif; color: #776E64; font-size: 14px; line-height: 17px; font-weight: 400; margin-top: 30px; } .vcOpenAnywhereBody .openMembershipStepConfirm p.back-to-vc a, .vcOpenAnywhereBody .openMembershipStepConfirm p.log-in-link a { text-decoration: none; } .vcOpenAnywhereBody .openMembershipStepConfirm .confirm-success-info { background: #fff; box-shadow: 0 2px 4px 0 rgba(119,110,100,0.3); text-align: center; position: relative; margin-top: 110px; margin-bottom: 70px; padding: 130px 40px 50px 40px; } .vcOpenAnywhereBody .openMembershipStepConfirm .confirm-success-info .card-number { background: transparent url('/SharedContent/images/open-anywhere/card-illustration.svg') no-repeat; width: 285px; height: 180px; margin: 0 auto; position: absolute; top: -65px; left: 0; right: 0; margin-left: auto; margin-right: auto; } .vcOpenAnywhereBody .openMembershipStepConfirm .confirm-success-info .card-number p { color: #E82011; font-weight: bold; font-size: 19.2px; line-height: 27px; letter-spacing: 2.22px; padding-top: 100px; } .vcOpenAnywhereBody .openMembershipStepConfirm .confirm-success-info h4 { font-family: 'Agenda', sans-serif; font-size: 26px; line-height: 32px; font-weight: 500; } .vcOpenAnywhereBody .openMembershipStepConfirm .confirm-success-info hr { height: 2px; background: #F5A623; border: none; margin: 30px 0; } .vcOpenAnywhereBody .openMembershipStepConfirm .confirm-success-info p.safety-notice { background: url('/SharedContent/images/open-anywhere/alert-icon-yellow.svg') no-repeat center left; text-align: left; font-style: italic; padding-left: 50px; margin-bottom: 45px; } .vcOpenAnywhereBody .openMembershipStepConfirm .deposit-information { background: transparent url('/SharedContent/images/open-anywhere/your-money.svg') no-repeat top left; } .vcOpenAnywhereBody .openMembershipStepConfirm .more-help { background: transparent url('/SharedContent/images/open-anywhere/your-community.svg') no-repeat top left; } .vcOpenAnywhereBody .openMembershipStepConfirm .deposit-information, .vcOpenAnywhereBody .openMembershipStepConfirm .more-help { padding-left: 110px; margin-bottom: 70px; } .vcOpenAnywhereBody .openMembershipStepConfirm .deposit-information h4, .vcOpenAnywhereBody .openMembershipStepConfirm .more-help h4 { font-family: 'Agenda', sans-serif; font-size: 26px; line-height: 32px; letter-spacing: 0.2px; font-weight: 500; margin-bottom: 30px; } .vcOpenAnywhereBody .openMembershipStepConfirm p.find-nearest-branch, .vcOpenAnywhereBody .openMembershipStepConfirm p.digital-learning { margin-top: 40px; } .vcOpenAnywhereBody .openMembershipStepConfirm p.find-nearest-branch a, .vcOpenAnywhereBody .openMembershipStepConfirm p.digital-learning a { border: 1px solid #E82011; color: #E82011; padding: 10px 25.5px; text-decoration: none; } .vcOpenAnywhereBody .openMembershipStepConfirm p.find-nearest-branch a:hover, .vcOpenAnywhereBody .openMembershipStepConfirm p.digital-learning a:hover { border: 1px solid #776E64; color: #776E64; } .vcOpenAnywhereBody .openMembershipStepConfirm ul.contact-numbers { font-family: 'Open Sans', sans-serif; list-style-type: none; padding-left: 0; margin-left: 0; font-size: 15px; color: #776E64; font-weight: 600; line-height: 24px; margin-top: 20px; } .vcOpenAnywhereBody .openMembershipStepConfirm ul.contact-numbers span.phone-number { color: #E82011; } .vcOpenAnywhereBody .openMembershipStepConfirm .transitionBottom { width: 300px; text-align: center; margin: 0 auto; } .vcOpenAnywhereBody div.transitionSpinner { background-image: url('/SharedContent/images/open-anywhere/preloader.gif') !important; background-size: 121px 55px; margin-bottom: 70px; } span.yui-skin-sam { display: inline; } /* FORM TIME OUT PAGE */ .vcOpenAnywhereBody h1#PageTitle { font: 500 36px/44px 'Agenda', sans-serif; color: #000; } .vcOpenAnywhereBody div.errors { border: none; padding: 0; } .vcOpenAnywhereBody div.errors p { font: 400 15px/24px 'Open Sans', sans-serif; color: #776E64; padding-left: 0; } .vcOpenAnywhereBody div.errors p a { text-decoration: underline; color: #776E64; } .vcOpenAnywhereBody div.errors p a:hover { text-decoration: none; color: #776E64; } /* NO JAVASCRIPT OVERLAY */ .vcOpenAnywhereBody .no-js-overlay { position: absolute; top: 0; right: 0; z-index: 9999; height: 100%; width: 90%; background: #F7F7F7; } .vcOpenAnywhereBody .no-js-overlay .no-js-message { width: 460px; margin: 200px auto; font: 400 15px/24px 'Open Sans', sans-serif; } .vcOpenAnywhereBody .no-js-overlay .no-js-message p { color: #776E64; } .vcOpenAnywhereBody .no-js-overlay .no-js-warning { width: 100%; background: #fff url('/SharedContent/images/open-anywhere/alert-icon-yellow.svg') no-repeat top 18px left 20px; box-shadow: 0 2px 4px 0 rgba(245,166,35,0.2); border-top: 2px solid #F5A623; margin: 30px auto; } .vcOpenAnywhereBody .no-js-overlay .no-js-warning p { padding: 20px 20px 20px 76px; color: #000; } .vcOpenAnywhereBody .no-js-overlay .no-js-message ul { list-style-type: none; list-style-type: none; padding-left: 0; margin-left: 0; margin-top: 30px; } .vcOpenAnywhereBody .no-js-overlay .no-js-message ul li { color: #E82011; } .vcOpenAnywhereBody .no-js-overlay .no-js-message ul li strong { color: #776E64; } .vcOpenAnywhereBody .no-js-overlay .no-js-message p.find-branch { text-align: center; margin-top: 60px; margin-bottom: 40px; } .vcOpenAnywhereBody .no-js-overlay .no-js-message p.find-branch a { border: 1px solid #BA271C; background: #E82011; color: #fff; padding: 10px 25.5px; text-decoration: none; } .vcOpenAnywhereBody .no-js-overlay .no-js-message p.find-branch a:hover { border: 1px solid #E82011; color: #E82011; background: #f7f7f7; } .vcOpenAnywhereBody .no-js-overlay .no-js-message p.back-to-vc { text-align: center; } .vcOpenAnywhereBody .no-js-overlay .no-js-message p.back-to-vc a { font: 500 14px/17px 'Agenda', sans-serif; text-decoration: none; } .vcOpenAnywhereBody .no-js-overlay .no-js-message p.back-to-vc a:hover { text-decoration: underline; color: #776E64; } /* Custom province error */ .vcOpenAnywhereBody .provinceError { background: #fff url('/SharedContent/images/open-anywhere/error-header-icon.svg') top 18px left 23px no-repeat; border-top: 2px solid #FD5F00; padding: 20px; } .vcOpenAnywhereBody .provinceError { color: #000; font: 400 18px/30px 'Agenda', sans-serif !important; margin-top: 5px; margin-left: 0; padding-left: 80px; } /* CST-1133 */ .vcPersonalAmlv2Step1 .suppressOnConfirmation { display: block; margin-top: 10px; } .vcPersonalAmlv2StepConfirm div.formPageConfirmation span.suppressOnConfirmation { display: none; } /* MRR-24177 */ .Lang-en .craDirectDepositv2Step2 .formActions ul li.formPrevious { margin-top: 0px; } .Lang-en .craDirectDepositv2Step2 .formActions ul li.formPrevious a.vcBtnPrev:first-child { visibility: hidden; } .Lang-en .craDirectDepositv2Step2 .formActions ul li.formPrevious + li { margin-top: 10px; } .Lang-en .craDirectDepositv2Step2 .formActions ul li.formCancel { margin-top: 20px; } /* MRR-24615 */ .cewsDirectDepositv2Step2 span.yui-skin-sam { display: inline-block; } .cewsDirectDepositv2Step3 .formActions ul li.formPrevious { margin-top: 0px; } .cewsDirectDepositv2Step3 .formActions ul li.formPrevious a.vcBtnPrev:first-child { visibility: hidden; } .cewsDirectDepositv2Step3 .formActions ul li.formPrevious + li { margin-top: 10px; } .cewsDirectDepositv2Step3 .formActions ul li.formCancel { margin-top: 20px; } .Lang-fr .cewsDirectDepositv2Step2 p.formRequiredNote, .Lang-fr .cewsDirectDepositv2Step3 p.formRequiredNote { top: -15px; } /************* row in SF *************/ /*added relative on these 2 items because of NS7 didn't support it on labels then removed it because couldn't find a way to bring the calendar to the front when above fields*/ /*.r, .d{position: relative;}*/ .md .r{/*width: 598px;*/ padding: 0 5px 8px 5px; display: block; clear: both; width: 588px; } .md .r , .md .r{ \width: 598px; w\idth: 588px; } .md .confCol .r , .md .confCol .r{/*confirmation 1px border*/ \width: 596px; w\idth: 586px; } .Online .md .r , .Online .md .r{/*standard form in online banking*/ \width: 520px; w\idth: 510px; } .Online .md .confCol .r , .Online .md .confCol .r{/*confirmation 1px border*/ \width: 518px; w\idth: 508px; } .r br{ clear: both; font-size:1px; line-height: 1px; margin-bottom: -1px; } /*left column*/ .r label, .r .label{ width: 160px; float: left; padding: 1px 5px 0px 0px; text-align: right; cursor: pointer; } .confCol .r label, .confCol .r .label{ padding: 0px 5px 0px 0px; } .r label, .r .label{ \width: 165px; w\idth: 160px; } .r span.in, .r span.conf{/*right column (either inputs of text for confirmation)*/ display: block; float: left; width: 423px; } .r span.conf{/*right column (either inputs of text for confirmation)*/ width: 421px; } .Online .r span.in, .Online .r span.conf{/*standard form in online banking*/ width: 345px; } .Online .r span.conf{ width: 343px; } .r .onlyLbl span.conf, .r .onlyLbl span.in, .Online .r .onlyLbl span.in, .Online .r .onlyLbl span.conf{/*added for consent test on confirmation screen*/ width: auto; } .r .in label{/*when label in right col it needs the full width... -4 pixel because of the error border and padding on .ctr*/ display: block; clear: both; width: auto;/*width:auto which is a bug in ie6 so remove float*/ float: none; margin: 0px; padding: 0px; text-align: left; font-weight: normal; position: relative; /*to fix IE repeating character bug in Corporatesponsorship/Apply*/ } .fullWidthInput input#type_mdi, .fullWidthInput input#type_mdsb, .fullWidthInput input#type_next_login, .fullWidthInput input#type_more_info { float: left; margin-right: 7px; margin-top: 1px; margin-bottom: 10px; } .r .il label{/*except when we want to display them inline*/ width: auto; float: left; display: inline; clear: none; padding-right: 2px; white-space: no-wrap; } .r .onlyLbl .noLabel{/*just text*/ padding: 0; } .r .fullWidthInput span.in, .r .fullWidthInput span.conf {/*switch radio buttons for small bus - not std*/ width: auto; float: none; } /******* Row 2 col ********/ /*2column example loan app step 3*/ .r .d{ float: left; width: 294px; } .r .d label, .r .d .label{ width: 140px; float: left; text-align: right; } .r .d label, .r .d .label{ \width: 144px; w\idth: 140px; } .r .d span.in{ width: 140px; } /******* Row 3 col ********/ .col3 .r .d{ float: left; width: 196px; } .col3 .r .d label, .col3 .r .d .label{ width: 191px; float: left; text-align: left; } .col3 .r .d label, .col3 .r .d .label{ \width: 196px; w\idth: 191px; } .col3 .r .d span.in{ display: block; clear: both; float: none; width: 191px; } /************* error handling in sf rows *************/ .fielderror i{ float: left; width: 15px; margin-top: 2px; } .errBorder .ctr{ display:block; float:left; border-width: 1px; border-style: solid; padding:1px; } /**/ /*********** Row in MD ************/ /******************** div.details (optional and can contain zero or more ofthe following) div[.entry | .entryInline | .required | .error | .requirederror | div.string(*) | optiongroup(added for rtp)] label | .label div.input *********************/ div.required, div.requirederror, div.string, div.entry{ margin-bottom: 0; padding-bottom: 10px; border-bottom: none; display: block; clear: both; float: left; width: 100%; } /* MII-67 date field: zero padding-bottom */ div.searchDateField div.entry{ margin-bottom: 0; padding-bottom: 0px; !important; border-bottom: none; display: block; clear: both; float: left; width: 100%; } /* MII-67 date field: underlying hint*/ p.dateFormatHint { margin-left: 165px; } div.entryInline{ padding: 5px 0; } div.entryInline_snug{ padding: 0; } /*paybills pay from account variation*/ .summarygroup div.required, .summarygroup div.requirederror{ padding: 3px 2px; } .summarygroup .required .input, .summarygroup .requirederror .input{ width: auto; } /*end - paybills pay from account variation*/ /*inside tables div don't have width*/ .summarydata div.required, .summarydata div.requirederror, .summarydata div.string, .summarydata div.entry{ padding: 0; } /*required is sometimes inside .entry so to avoid the duplicates*/ .entry div.required{ margin: 0; padding: 0; } .required label, .required .label, .string label, .string .label, .entry label, .entry .label{ width: 140px; float: left; padding: 1px 5px 0px 0px; } .searchDateField div.entryError label{ background-image: url(/DynamicContent/Resources/Images/Furniture/errors.gif); background-repeat:no-repeat; background-position: right; } .searchDateField .md form label,.md form label{ color:#131111 } .md .confirmCheckBoxText{ padding-left: 12px; width: 90%; } .entryInline label{ width: auto; } label.memoText{ font-size: 11px; margin-left: 8px; margin-top: -6px; } /*Stacked label ontop of field*/ .fieldsetBlock label{ display: block; float: none; padding-bottom: 5px; width: auto; } .range label{ display: inline; width: auto; float: left; height: 1%; padding: 3px 5px 0 8px; } .required .input, .requirederror .input, div.string .input, .entry .input, div.string span.value{ display: block; float: left; width: auto; } .entryInline .input{ width: auto; } /*inputs are not as wide when inside a form group*/ .formGroup .required .input, .formGroup .requirederror .input, .formGroup .string .input, .formGroup .entry .input, .formGroup .string span.value{ width: 345px; } .required span.value, .entry span.value{ display: block; float: left; width: 345px; } /*remove this once IE6 is not supported*/ *html .formGroup .required .input, *html .formGroup .requirederror .input, *html .formGroup .string .input, *html .formGroup .entry .input, *html .formGroup .string span.value{ display: inline; float: none; } /*full width inputs are not as wide when inside a form group*/ .formGroup .fieldsetFullWidth .input{ width: 100%; } /*ensuring modals don't have unnecessary bottom margin*/ .modalContent .formGroup:last-child{ margin-bottom: 0px; } /*Stacked label ontop of field*/ .fieldsetBlock .input{ float: none; width: auto; } .range .inputRangeStart, .range .inputRangeEnd{ float: left; padding-right: 20px; } .optiongroup .range .inputRangeStart, .optiongroup .range .inputRangeEnd{ padding-top: 2px; position: relative; } .range .inputRangeInput{ float: left; } /*full width inputs*/ .formGroup .fieldsetFullWidth select{ width: 100%; } /*inside tables don't have width*/ .summarydata .required .input, .summarydata .requirederror .input, .summarydata .string .input, .summarydata .entry .input, .summarydata .string span.value, .formData .required .input, .formData .requirederror .input, .formData .string .input, .formData .entry .input, .formData .string span.value{ float: none; width: auto; } .summarydata th label, .summarydata td label{ float: none; width: auto; padding: 0 } div.sec input.checkbox{ border: none; width: 13px; height: 13px; margin:0; } input.monetary{ width: 70px; } input.desc{ width: 200px; } input.descLarge{ width: 260px; } .formHighlight .fieldsetFullWidth input, .formHighlight .fieldsetFullWidth select{ width: 100%; } .required div.qualify{/*Account Activity request Extra field, qualifier for account activity*/ padding-left: 165px; padding-top: 6px; diaply: block; clear: both; } .required .qualify .input{ float: none; } /*radio buttons*/ div.input .option{ clear: both; position: relative; vertical-align: top; } div.input .option input[type="radio"], div.input .option input[type="checkbox"]{ float: left; margin: 0; padding: 0; border: none; width: 13px; height: 13px; } .input .option .label, .input .option label{ display: inline; font-weight: normal; text-align: left; width: 329px; margin-left: 0px; padding-left: 5px; padding-bottom: 5px; } .formGroup .input .option .label, .formGroup .input .option label{ width: auto; word-wrap: break-word; } .formData .input .option .label, .formData .input .option label{ width: auto; } /********* * Radio button labels - example: MDSB * ******/ div.required .fullWidthInput label{ width: 100%; font-weight: normal; } /********* Optiongroups - example: RTP **********/ .md .optiongroup{ border-bottom: none; clear: both; display: block; margin-bottom: 0; overflow: hidden; width: 100%; } /*left col*/ .optiongroup .label{ width: 148px; float: left; padding: 0px 5px 0px 0px; } .optiongroup .label{ \width: 148px; w\idth: 143px; } /*right col*/ .optiongroup .options{ display: block; float: left; width: 355px; } .optiongroup .option{ display: block; clear: both; float: left; padding-left: 17px; margin-bottom: 5px; width: 100%; } .optiongroup .optionlabel{ clear: both; display: block; width: 100%; } #EMTReceiveActions .optionlabel{ padding-bottom: 5px; } .optiongroup .optionlabel label{ display: inline; float: left; padding: 3px 3px 0 0; width: auto; } .optiongroup .optionlabel span.input{ display: block; float: left; } .optiongroup .optionlabel input.checkbox{ float: none; margin: 0 4px 0 0; padding: 0; width: 14px; height: 14px; position:static; } .optiongroup .option .control{ clear: both; display: block; float: left; width: auto; } .optiongroup .option .control label{ margin: 0; padding: 0; width: auto; float: none; display: inline; } #EMTReceiveActions .option .control label{ display: block; } .optiongroup .hint{ padding-left: 17px; } .optiongroup .range .hint{ padding-left: 0; } .optiongroup .errored { background-position: 0 3px; background-repeat: no-repeat; } .optiongroup .recurring .errored{ margin: 0 0 0 -9px; padding: 0 0 0 17px; } html>body .optiongroup .recurring .errored{ margin: 0 0 0 -17px; } #EMTReceiveActions .errored { background-position: 0 0; } #EMTReceiveActions .option .required, #EMTReceiveActions .option .requirederror{ width: 338px; } #EMTReceiveActions .errored .requirederror label{ background-image: none; } /*end - Optiongroups /*checkbox input option eg. VC edit future transfers */ .inputOptionGroup .option label{ padding-left: 17px; position: relative; } .inputOptionGroup .option input.checkbox{ left: 0; margin-right: 4px; position: absolute; } /**************** Inline forms Not inline element ex. account statement drill down *****************/ div.il, div.il label, div.il .input{ clear: none; display: inline; padding: 0px; margin: 0px; width: auto; float:none; font-weight:normal; } div.il label, div.il .input{ margin: 0px 4px 10px 0px; } /*********** Error handling for md forms ***********/ .requirederror label, .requirederror .label{ background-repeat: no-repeat; background-position: 4px 0px; width: 137px; float: left; padding: 0px 5px 0px 23px; } .requirederror label, .requirederror .label{ \width: 165px; w\idth: 137px; } .entryInline label,/*not enough hooks so we have to specify it again*/ .entryInline .label{ width: auto; } .requirederror .input label, .requirederror .input .label{ background-image:none !important; } .requirederror .input .inputOptionGroup .option label{ background-image: none; } /*legacy forms (login forms etc)*/ div.buttons, div.submit, div.confButtons{ display: inline-block; height: auto; overflow: visible; width: auto; min-height: 32px; } .mdlogon .submit:before{ left: 178px; top: auto; } .mdIALogonSecurityImage .submit:before{ left: 195px; } .mdlogon .submit:after{ top: 5px; } .mdIALogonEnrollPac .submit:hover:after{ background-position: -502px -63px; } .mainContent .input input[type=text], .mainContent .input input[type=password]{ background-color: #fff; border: 1px solid #ababab; -webkit-box-shadow: 4px 4px 4px -4px rgba(0,0,0,0.5) inset; box-shadow: 4px 4px 4px -4px rgba(0,0,0,0.5) inset; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; height: 27px; padding: 3px 10px; } .memoText span{ color: #ca1905; } /*errors*/ .requirederror .input{ border: 1px solid #ca1905; padding: 1px; } .requirederror .input.range{ padding: 3px 5px; } /********************* Receipt *********************/ .md .receipts{ clear: both; display: block; float: left; } /*receipt header*/ .receipts .receiptHeader{ border-style: solid; border-left-width: 1px; border-right-width: 1px; border-top-width: 1px; float: left; margin: 0px; padding: 5px; width: 506px; } .receiptHeader .column{ margin: 0px; } .receiptHeader .twoColRow .column{ float: left; width: 50%; } .receiptHeader label{ float: left; padding-right: 10px; } .receiptHeader .value{ padding-right: 10px; } /*receipt*/ .receipts .receipt{ background-position: 20px 10px; background-repeat: no-repeat; border-style: solid; border-width: 1px; border-bottom-width: 0px; float: left; margin-bottom: 0px; padding: 10px 10px 0; width: 496px; } .receipts .receiptN{ border-bottom-width: 1px; margin-bottom: 12px; } .receipt dl{ clear: left; float: left; /*floating because the dt is floating*/ margin: 0; padding: 0 0 0 45px; padding-bottom: 10px; width: 400px; } .receipt dt, .receipt dd{ margin: 0 0 3px 0; } .receipt dt{ clear: left; display: block; float: left; font-weight: bold; padding-right: 5px; width: 175px; } .receipt dd{ float: left; width: 220px; word-wrap: break-word; overflow-wrap: break-word; } .receipt dd.status{ position: relative; /* needed for MDSB PST calculationHint (see below)*/ } /* added for MDSB receipt embedded hr */ .md div.receipt div.hr{ clear: both; display: block; font-size: 1px; height: 1px; line-height: 1px; margin: 0 10px 8px 45px; } /*MDSB relative positioned hint*/ .receipt dd.status .calculationHint { display: block; left: 120px; top: 0; position: absolute; width: 100px; } .receiptFail dd.status{ font-weight: bold; } .receipt p{ clear: both; padding-left: 45px; } .receipt p.note{ clear: left; padding: 10px 5px; } .receipt p.noteN{ margin-bottom: 0px; } .receipts .receiptHeader, .receipts .receipt{ -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; width: 100%; } /********************* Confirmations *********************/ .md .confirmation{ display: block; overflow: hidden; width: 100%; } .confirmation .confirmationHeader{ display: block; overflow: hidden; width: 100%; } .confirmation .oneColRow{ clear: both; display: block; overflow: hidden; padding-bottom: 10px; width: 100%; } .confirmation .column label { float: left; padding: 0 10px 0 0; width: 155px; } .confirmation .column .value { display: block; float: left; width: 350px; position: relative; /* needed for MDSB PST calculationHint (see below)*/ word-wrap: break-word; overflow-wrap: break-word; } /*MDSB relative positioned hint*/ .confirmation .column .value .calculationHint { display: block; left: 120px; top: 0; position: absolute; width: 100px; } .confirmation .rowN{ margin-bottom: 14px; } .confirmation .termAccountDetails .rowN{ margin-bottom: 8px; } .confirmation .note { display: block; padding-right: 10px; width: 140px; } .confirmation p{ clear: both; } /*pay bills confirmation*/ .confirmation tfoot th{ font-weight: normal; } /**/ /* Main Style Sheet for jQuery UI date picker */ #datepicker_div, #ui-datepicker-div, .datepicker_inline { font-size: 12px; padding: 0; margin: 0; width: 185px; cursor: default; } #datepicker_div, #ui-datepicker-div { display: none; border-width: 1px; border-style: solid; z-index: 9999; /*must have*/ } .datepicker_inline { float: left; display: block; border: 0; } .datepicker_rtl { direction: rtl; } .datepicker_dialog { padding: 5px !important; border-width: 4px !important; border-style:ridge !important; } .ui-datepicker-prev { float: left; } .ui-datepicker-next { float: right; } .ui-datepicker-title { clear: both; } .ui-datepicker-prev span, .ui-datepicker-next span{ padding: 2px 5px; } button.ui-datepicker-close { float: right; border: none; } button.ui-datepicker-current { display: none; } button.datepicker_trigger, button.ui-datepicker-trigger{ background-color: transparent; border-style: none; margin: 0; padding: 0; cursor: pointer; position: absolute; } .md .datepicker_wrap{ display: block; padding-right: 20px; } .datepicker_centerButton .datepicker_wrap { display: block; position: relative;; } .datepicker_centerButton button.datepicker_trigger { bottom: 4px; } .optiongroup button.datepicker_trigger{/*currently rtp specific*/ position: static; } .optiongroup .optionInline .range button.datepicker_trigger{ position: absolute; right: 0; top: 2px; } img.datepicker_trigger { margin: 2px; vertical-align: middle; } .datepicker_prompt { float: left; padding: 2px; } * html .datepicker_prompt { width: 185px; } .datepicker_control, .datepicker_links, .datepicker_header, .datepicker, .ui-datepicker-title, .ui-datepicker-calendar, .ui-datepicker-buttonpane, .ui-datepicker-header { clear: both; float: left; width: 100%; } .ui-datepicker-calendar{ border-spacing: 0; } .ui-datepicker-calendar thead th{ font-weight: normal; } .datepicker_control, .ui-datepicker-buttonpane { padding: 2px 0px; } .datepicker_links { padding: 2px 0px; } .datepicker_control, .datepicker_links, .ui-datepicker-buttonpane { font-weight: bold; font-size: 10px; letter-spacing: 1px; } .datepicker_links label { /* disabled links */ padding: 2px 5px; } .datepicker_clear{ display:none; } .datepicker_clear, .datepicker_prev { float: left; width: 34%; } .datepicker_rtl .datepicker_clear, .datepicker_rtl .datepicker_prev { float: right; text-align: right; } .datepicker_current { display:none; float: left; width: 30%; text-align: center; } .datepicker_close, .datepicker_next { float: right; width: 34%; text-align: right; } .datepicker_rtl .datepicker_close, .datepicker_rtl .datepicker_next { float: left; text-align: left; } .datepicker_header, .ui-datepicker-title { padding: 1px 0 3px; text-align: center; font-weight: bold; height: 1.3em; } .datepicker_header select, .ui-datepicker-title select { border: 0px; font-weight: bold; font-size:12px; } .datepicker, .ui-datepicker-calendar { text-align: center; font-size: 100%; } .datepicker a, .ui-datepicker-calendar a { display: block; width: 100%; } .datepicker_daysCell, .ui-datepicker-calendar tbody td{ border-width: 1px; border-style: solid; padding:0px; cursor: pointer; } .datepicker_daysCell a, .ui-datepicker-calendar tbody td a{ display: block; } .datepicker_daysCellOver { border-width: 1px; border-style: solid; } .datepicker_status { width: 100%; font-size: 80%; text-align: center; } /* ________ Datepicker Links _______ ** Reset link properties and then override them with !important */ #datepicker_div a, .datepicker_inline a{ cursor: pointer; margin: 0; padding: 0; background: none; } #ui-datepicker-div a { cursor: pointer; margin: 0; padding: 0; } #ui-datepicker-div a { text-decoration: none; } .datepicker_inline .datepicker_links a { padding: 0 5px !important; } .datepicker_control a, .datepicker_links a, .ui-datepicker-buttonpane button { padding: 2px 5px !important; } /* ___________ MULTIPLE MONTHS _________*/ .datepicker_multi .datepicker { border-width: 1px; border-style: solid; } .datepicker_oneMonth { float: left; width: 185px; } .datepicker_newRow { clear: left; } /* ___________ IE6 IFRAME FIX ________ */ .datepicker_cover { display: none; /*sorry for IE5*/ display/**/: block; /*sorry for IE5*/ position: absolute; /*must have*/ z-index: -1; /*must have*/ filter: mask(); /*must have*/ top: -4px; /*must have*/ left: -4px; /*must have*/ width: 200px; /*must have*/ height: 200px; /*must have*/ } span.yui-skin-sam table.yui-calendar{ border-width: 0; } span.yui-skin-sam .yui-calendar a.calnav{ text-decoration: underline; } /************* progress steps *************/ .md .sfProg{ margin-bottom: 6px; display: block; clear: both; padding: 5px; border-width: 1px; border-style: solid; height: 1%; } .Online .md .sfProg h2, .Form .md .sfProg h2{ display: none; } .sfProg .skip{ display: none; } .sfProg .sfLeft, .sfProg .sfRight{ float: left; width: 49%; display: block; position: relative; } .sfProg .step{ position: relative; padding: 2px 0px; } .sfProg .num{ float:left; font-weight: bold; margin-right:4px; padding:0px 2px; border-width: 1px; border-style: solid; } /* textual progress steps */ div.textualFormProgress.contentCallout.bottom-left { padding: 15px; font-size: 12pt; margin: 0 0 20px 0; width: 100%; } .textualFormProgress.contentCallout.bottom-left::before{ bottom: -22px; left: 10px; } /**/ /********** Error Messages in both forms ***********/ .sf .sfErrorBlock, div.errors{ border-width: 1px; border-style: solid; clear: both; margin: 7px 0px 15px; padding: 6px 6px 0px 6px; background-repeat: no-repeat; background-position: 5px 6px; } .sfErrorBlock i{ display: none; } .sf .sfErrorBlock label, div.errors label{ cursor: pointer; font-weight: normal; text-decoration: none; } span.sfErrorHeader, div.errors p{ display: block; padding-left: 20px; margin-bottom: 1em; font-weight: bold; } .sfErrorBlock ol, div.errors ol{ font-weight: normal; list-style-position: outside;/*ie7 needs this*/ margin: 0; padding: 0 0 0 23px; } .sfErrorBlock ol li, div.errors ol li{ margin-bottom: 3px; padding: 0 0 4px 0px; } div.errors ol li p{ padding: 0; margin: 0; font-weight: normal; } /*errors inline*/ span.error{ color: red; display: none; } span.error_stacked{ clear: both; display: none; } .entryerror .error, .requirederror .error{ display: inline; } .entryerror .error_stacked, .requirederror .error_stacked{ display: block; } .sf .sfErrorBlock, div.errors{ padding-left: 10px; } .sf .sfErrorBlock, div.errors, div.requirederror label, div.requirederror .label, .md div.formError p.fieldText{ background-image: none; position: relative; } .sf .sfErrorBlock:before, form div.errors:before, div div.requirederror label:before, div div.requirederror .label:before, .md div.formError p.fieldText:before, div.infoNote:before{ content: "!"; left: 0; line-height: 1.3; padding: 0 6px; position: absolute; top: 0; } form div.errors:before{ left: 7px; top: 9px; } div.requirederror .range label:before, div.requirederror .il label:before{ display: none; } .md div.formError p.fieldText:before{ font-weight: normal; left: 6px; top: 6px; } .sfErrorBlock ol, div.errors ol{ padding-left: 22px; } .sf .sfErrorBlock a, div.errors a{ font-weight: bold; text-decoration: underline; } div div.requirederror div.input div.inputOptionGroup div.option label:before { background-color: transparent; content: "" !important; } /************* FformGroup used in online banking to group froms into a filter style form *************/ /******************** div[.formGroup || .formGroup .formGroupHighlight] h2 div[.entry .entryInline .entryNoIndent .required .requirederror] div[.submit] *********************/ .md .formGroup{/*table container*/ border-width: 1px; border-style: solid; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; clear: both; float: left; margin-bottom: 12px; padding: 8px 4px 0; width: 100%; } .md .formGroup_plain{ background-color: transparent; border-style: none; float: none; } .formGroup h2, .formGroup h3{ clear: left; margin-top: 0; } html body.Online .md .formGroup table.formData{ border: none; clear: both; margin: -10px -4px 0; width: 518px; /*width is needed because of the negative margins*/ } .md .formGroup table.formData, .md .formData td, .md .formData th{ border: none; } .formData td, .formData th{ padding: 3px 4px; } /*remove this once IE6 is not supported*/ *html div.formGroup .entry, *html div.formGroup .required, *html div.formGroup .requirederror{ float: none; height: 1%; } /*add borders on the bottom of fields in form highlight*/ div.formGroupHighlight .entry, div.formGroupHighlight .required, div.formGroupHighlight .requirederror{ border-bottom-style: solid; border-bottom-width: 1px; padding: 5px 0; } /*when javascript is enabled don't display the border on the bottom of this particular form*/ .javascript .mobileAlertsStepAdmin .formGroupHighlight .entry, .javascript .mobileAlertsStepAdmin .formGroupHighlight .required, .javascript .mobileAlertsStepAdmin .formGroupHighlight .requirederror{ border-bottom-width: 0; } /*full width labels*/ .formGroup .fieldsetFullWidth label{ padding-right: 0; width: 100%; } .formGroup .range{/*aligning the fields with the labels a bit better*/ padding: 3px 0 0; } .formGroup .entryInline .inputRangeStart label, .formGroup .entryInline .inputRangeEnd label{ padding: 3px 5px 0 8px; } .formGroup .entryInline .input{ width: auto; } .formGroup table.formData .requirederror label{ width: auto; } .formGroup .requirederror label{ padding-bottom: 5px; width: 487px; } .md .formGroup div.hr{ margin-top: 0; } div.formGroupHighlight .requirederror label{ width: 137px; } div.formGroupHighlight fieldset .entry, div.formGroupHighlight fieldset .required, div.formGroupHighlight fieldset .requirederror{ border: none; } div.formGroupHighlight fieldset{ padding-top: 10px; } *html div.formGroup fieldset .required .input{ /* EDOCS-27: fix for IE6 radio button alignment */ float: left; } fieldset .range .dateRangeStartLabel, div.formGroupHighlight .requirederror label.dateRangeStartLabel{ padding: 3px 5px 0 0; width: auto; } fieldset .range .dateRangeEndLabel, div.formGroupHighlight .requirederror label.dateRangeEndLabel{ padding: 3px 5px 0 5px; width: auto; } /*account activity*/ form.searchActivityForm{ overflow: hidden; position: relative; } .searchActivityForm .formGroup{ border: none; border-radius: 5px; margin-bottom: 20px; overflow: hidden; padding: 32px 20px 74px 20px; position: relative; } .searchActivityForm .formGroup h2{ border-radius: 5px 5px 0 0; margin: -32px -20px 0 -20px; padding: 32px 20px 20px 20px; position: relative; } .searchActivityForm .formGroup h2:after{ background: transparent url(/DynamicContent/Resources/Images/imgMatrix.png) 0 -292px no-repeat; bottom: 0; content: ""; height: 4px; left: 0; position: absolute; width: 100%; } form.searchActivityForm .entry, form.searchActivityForm .required, form.searchActivityForm .requirederror{ border-bottom-width: 0; } form.searchActivityForm .entry{ padding-bottom: 20px; padding-top: 20px; position: relative; } .searchActivityForm .entry:after{ background: transparent url(/DynamicContent/Resources/Images/imgMatrix.png) 0 -296px no-repeat; bottom: -4px; content: ""; height: 4px; left: -20px; position: absolute; right: -20px; } form.searchActivityForm .required, form.searchActivityForm .requirederror{ z-index: 1; } form.searchActivityForm .required, form.searchActivityForm .requirederror, form.searchActivityForm .entrySelected{ margin: 0 -20px; padding: 20px; } form.searchActivityForm .entrySelected{ margin-top: 1px; } .searchActivityForm .entryInline label, .searchActivityForm .entryInline .range label{ padding-right: 15px; } .searchActivityForm .range{ padding: 0; } .searchActivityForm .entryInline .range label{ padding-top: 2px; } .range .inputRangeInput{ position: relative; top: -3px; } form.searchActivityForm .requirederror label{ width: auto; } .searchActivityForm .formGroup .hr{ background: transparent url(/DynamicContent/Resources/Images/imgMatrix.png) 0 -292px no-repeat; height: 4px; margin: 0 -20px; padding: 0 20px; width: 100%; } .searchActivityForm h3{ bottom: 29px; font-size: 13px; font-weight: normal; left: 20px; margin: 0; position: absolute; } .searchActivityForm h3 .icon{ background: none; padding: 0; } .searchActivityForm h3 a{ display: inline-block; padding: 0 0 0 15px; position: relative; } .searchActivityForm h3 a:before{ color: #ca1905; content: "\00BB"; left: 0; position: absolute; } .searchActivityForm span.selected a:before{ -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); -o-transform: rotate(-90deg); -ms-transform: rotate(-90deg); transform: rotate(-90deg); } span.helpHintTrigger{ background-repeat: no-repeat; background-position: 0 0; } div.helpHint{ border-style: solid; border-width: 1px; margin: 0 0 12px 0; padding: 5px; } div.labelWithInfo{ margin: 0; padding: 0; } div.labelWithInfo label{ display: inline-block; } span.helpHintTrigger{ cursor: pointer; display: inline-block; height: 18px; margin: 0 0 3px 3px; text-indent: -9999px; vertical-align: 2px; width: 18px; } div.helpHint{ display: none; margin: 0 0 0 3px; position: absolute; width: 300px; z-index: 9999; } /*help hint trigger & errors share the same style, so done here since this file is always w/ all forms*/ .labelWithInfo span.helpHintTrigger, .helpHintContainer span.helpHintTrigger, div.requirederror label:before, div.requirederror .label:before, .sfErrorBlock:before, div.errors:before, div.formError p.fieldText:before, div.infoNote:before{ background-color: #ca1905; background-image: none; border-radius: 7.5px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; color: #fff; font-size: 12px; height: 15px; padding: 0 4.5px; text-indent: 0; width: 15px; } div.infoNote:before { /* MRR-11803 - Vancity has requested the ! be removed */ /* Couldn't remove through a properties file, so changed it to a white background */ background-color: #fff; } .labelWithInfo div.helpHint, .helpHintContainer div.helpHint{ border: 2px solid #887e6e; background-image: -webkit-linear-gradient(to bottom, rgba(255,255,255,0) 0%, #f0f0f0 100%); background-image: -moz-linear-gradient(to bottom, rgba(255,255,255,0) 0%, #f0f0f0 100%); background-image: -o-linear-gradient(to bottom, rgba(255,255,255,0) 0%, #f0f0f0 100%); background-image: -ms-linear-gradient(to bottom, rgba(255,255,255,0) 0%, #f0f0f0 100%); background-image: linear-gradient(to bottom, rgba(255,255,255,0) 0%, #f0f0f0 100%); margin: 0 0 0 18px; padding: 20px; } div.requirederror .il label:before{ display: none; } .helpHintContainer div.helpHint { visibility: hidden; } .helpHintContainer span.helpHintTrigger { margin: 5px; } /************************ Override wicket modal ************************/ div.wicket-modal div.w_blue .w_topLeft, div.wicket-modal div.w_blue .w_topRight, div.wicket-modal div.w_blue .w_top, div.wicket-modal div.w_blue .w_left, div.wicket-modal div.w_blue .w_right, div.wicket-modal div.w_blue .w_bottom, div.wicket-modal div.w_blue .w_bottomLeft, div.wicket-modal div.w_blue .w_bottomRight{ background-image: none !important; } div.wicket-modal div.w_bottom, div.wicket-modal div.w_bottomRight, div.wicket-modal div.w_bottomLeft, div.wicket-modal div.w_top, div.wicket-modal .w_topLeft, div.wicket-modal div.w_topRight{ height: 1px !important; } div.wicket-modal div.w_content_1, div.wicket-modal div.w_right_1{ margin: 0 !important; } div.wicket-modal{ border-width: 1px; border-style: solid; padding: 3px; background:white; font-family: inherit; } div.wicket-modal div.w_content_3{ border: none; } div.wicket-modal div.w_content_container{ font-size: 12px; padding: 10px; text-align: left; } div.wicket-modal div.w_blue div.w_caption{ font-weight: bold; font-size: 14px; padding: 5px !important; } div.wicket-modal div.w_blue span.w_captionText{ margin-left: 5px !important; } div.wicket-modal div.w_blue div.actionButtons{ border-top-width: 1px; border-top-style: solid; bottom: 10px; padding: 10px 10px 0 0; position: absolute; right: 0; text-align: right; width: 100%; } div.wicket-modal div.w_blue div.actionButtons a{ border-width: 1px; border-style: solid; display: inline-block; font-weight: bold; font-size: 12px; margin: 0 0 0 10px; padding: 5px; text-decoration: none; } div.wicket-modal div.w_blue a.w_close{ background-repeat: no-repeat !important; background-position: -80px 2px !important; } div.wicket-modal div.w_blue a.w_close:hover{ background-repeat: no-repeat !important; background-position: -80px 2px !important; } div.wicket-modal div.w_blue div.required, div.wicket-modal div.w_blue div.requirederror, div.wicket-modal div.w_blue div.string, div.wicket-modal div.w_blue div.entry{ width: 100%; } /*Modal Close New Button*/ div.wicket-modal .mdi span.w_captionText{ height: auto; width: 400px; position: inherit; margin-left: 0; } div.wicket-modal .mdi div.w_caption{ overflow: visible; margin-left: 3px; width: 480px; height: auto; } div.wicket-modal .mdi a.w_close:hover { background-position: 0 -609px; float: none; height: 31px; overflow: visible; width: 31px; } div.wicket-modal .mdi a.w_close{ background-image: url("/DynamicContent/Resources/Images/Icons/icons_matrix.png"); background-position: 0 -609px; background-repeat: no-repeat; display: block; height: 31px; position: absolute; right: -36px; top: -16px; width: 31px; } div.wicket-modal a.w_close /*Modal Close New Button End*/ /*Modal Buttons*/ div.wicket-modal .btn_group{ position: relative; } div.wicket-modal .btn_group_opposed{ text-align: right; } /*F2VAN-66*/ @font-face { font-family: 'SharpGroteskMedium'; src: url('../Fonts/SharpGroteskMedium/sharpgroteskmedium20-webfont.woff2') format('woff2'), url('../Fonts/SharpGroteskMedium/sharpgroteskmedium20-webfont.woff') format('woff'); font-weight: 600; font-style: normal; } @font-face { font-family: 'SharpGroteskSmBold'; src: url('../Fonts/SharpGroteskSmBold/sharpgrotesksmbold25-webfont.woff2') format('woff2'), url('../Fonts/SharpGroteskSmBold/sharpgrotesksmbold25-webfont.woff') format('woff'); font-weight: 900; font-style: normal; } .NoNavigation .mainContent h1{ /*font-family: Arial, sans-serif;*/ } .NoNavigation div.formActions{ border: none; } .NoNavigation .formActions li{ display: inline-block; } .NoNavigation .formActions li:first-child:after{ display: block; right: 1px; top: 0; } /*.NoNavigation .outerColContainer:before,*/ .NoNavigation .formActions li:after, .NoNavigation ul li:before{ display: none; } .removeSpacesBetweenFormCheckBoxes { margin-bottom: 0; } form .stepConfirm .formRequiredNote { margin-bottom: 25px; } #Component-CuahhMap_cuahhMap h3 { font-size: 13px; } #Component-CuahhCounter_cuahhCounter.cuahhCounter { margin-bottom: 12px !important; } #Component-CuahhCounter_cuahhCounter #widget-counter-simple { background: #ca1905 !important; border: 0 none !important; } #Component-CuahhCounter_cuahhCounter #widget-counter-simple:hover { background: #ac1100 !important; } #Component-CuahhCounter_cuahhCounter .widget-counter-green-button { background: transparent !important; text-transform: none !important; max-width: none !important; } /* Landing */ .Landing div.promoArea { margin: 0; min-height: 0; } div.promoArea:empty{ display: none; } .md .colOne div.noBorder, .md .colThree div.noBorder, .md .colOne div.no-border, .md .colThree div.no-border{ border: none; background: transparent; } .md .colOne div[class^="Component-"], .md .colOne div[class*=" Component-"], .md .colThree div[class^="Component-"], .md .colThree div[class*=" Component-"]{ background: transparent url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAADCAYAAAC09K7GAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAB1JREFUeNpiPCXJ+p8BCEyf/WIE0UwMaABDACDAALGJBAONK4sDAAAAAElFTkSuQmCC) repeat-x 0 0; padding-top: 15px } .md .colOne div[class^="Component-"]:first-child, .md .colOne div[class*=" Component-"]:first-child, .md .colThree div[class^="Component-"]:first-child, .md .colThree div[class*=" Component-"]:first-child, .md .colOne div[class^="Component-"].noBorder, .md .colOne div[class*=" Component-"].noBorder, .md .colThree div[class^="Component-"].noBorder, .md .colThree div[class*=" Component-"].noBorder{ background: transparent; padding-top: 0; border: none; } .md .colOne h2, .md .colOne h2 a, .md .colOne h3, .md .colOne h3 a, .md .colOne h4, .md .colOne h4 a, .md .colThree h2, .md .colThree h2 a, .md .colThree h3, .md .colThree h3 a, .md .colThree h4, .md .colThree h4 a{ color: #ca1905; font-size: 15px; } .serviceUnavailable h3{font-size: 36px; line-height: 44px; margin-bottom: 30px;} .serviceUnavailable img{width: 100%;} .serviceUnavailable p{margin-bottom: 30px;} .serviceUnavailable span{color: #E82011;} .serviceUnavailable div{ color: #776E64; font-family: 'Open Sans', sans-serif; font-size: 15px; line-height: 24px; font-weight: 400; margin-top: 30px; } .serviceUnavailable a.nearestBranch{ color: #FFF; border: 1px solid #BA271C; background: #E82011; font-size: 16px; text-decoration: none; width: 190px; display: block; font-family: 'Agenda', sans-serif; text-align: center; padding: 10px 20px; margin: 50px auto 0; } .serviceUnavailable a.backTo{ display: block; text-align: center; margin: 30px 0 0 0; text-decoration: none; font-family: 'Open Sans', sans-serif; font-size: 12px; } /*VTIWM-541*/ #dateGroups:before { content: "| " } #dateGroups:after { content: " |" } #selectedYear { font-weight: bold; } /* F2VAN-57 */ /* .md div.vcc-link-card a { color: #887e6e; } .md div.vcc-link-card a:hover { color: #ca1905; } .md div.vcc-card { background: #eee; padding: 2em 0; display: flex; justify-content: space-between; margin: 0 0 1em; } .vcc-card img{ width: 220px; height: 115px; margin: auto; } img.enviroExpenseCard { width: 180px; height: 115px; } .vcc-card .text { width: 65%; margin: 0 1em 0 0; } a.vcc-button { display: inline-block; background: #ca1905; color: white !important; margin: 1em 0; cursor: pointer; padding: 1em; text-decoration: none; } */ /* CHG084030 */ /* VMIR-22 */ form.AlignSubmit .submit{padding-left: 0;} /* VMIR-71 */ p.van-red-subtitle > strong { color: #ca1905; } div.mobile-content { display: none; } div.desktop-content { display: block !important; } /* ******** */ /* CST-1438 */ /* ******** */ /* FIG-5017 - Fix Borrow page for F2.0 */ /* .borrow-landing-page { margin: 0 auto; text-align: center; } .borrow-landing-page .colTwo { width: 640px; } */ .borrow-landing-page .mainContent { font-family: 'Open Sans', sans-serif; font-size: 16px; line-height: 24px; width: 90%; margin: 0 auto; } .borrow-landing-page .contentTitle h1 { padding-top: 20px; text-align: center; color: #000; font-size: 48px; font-family: 'AgendaMedium', sans-serif; } .borrow-landing-page section { text-align: center; } .borrow-landing-page section:not(.questions) { margin-bottom: 20px; padding: 20px 0 40px; border-bottom: 2px solid #ddd; } .borrow-landing-page section div.item-title { font-size: 16px; font-weight: bolder; -webkit-font-smoothing: antialiased; } .borrow-landing-page p.item-info { font-size: 16px; line-height: 24px; } .borrow-landing-page section div.text-headline { font-size: 30px; font-weight: 700; padding-bottom: 30px; font-family: AgendaRegular, Arial; } .borrow-landing-page section div.text-headline::after { padding-top: 10px; display: block; content: url(/DynamicContent/Resources/Images/underline.svg); } .borrow-landing-page section.how-it-works .list { margin: 0 auto; max-width: 75%; text-align: left; line-height: 24px; } .borrow-landing-page ul { list-style: none; } .borrow-landing-page .list li::before { float: left; padding-right: 10px; content: url(/DynamicContent/Resources/Images/check.svg); margin-top: -2px; margin-left: -25px; background: none; width: 25px; height: 25px; } .borrow-landing-page .button-group { display: flex; justify-content: center; } .borrow-landing-page .button-group div { padding: 30px 40px; } .borrow-landing-page .button-group div:nth-child(1) { border-right: 2px solid #ddd; } /* F2VAN-64 */ /* .borrow-landing-page .ui-button { background-color: #e82011; border: 1px solid #ba271c; color: #fff; text-align: center; font-family: AgendaRegular, Arial; font-size: 16px; font-weight: 400; line-height: 24px; padding: 8px 32px; margin: 4px 3.5px; cursor: pointer; text-decoration: none; display: inline-block; } */ .borrow-landing-page .mainContent a:visited { color: #009999; } .borrow-landing-page .mainContent a:hover { color: #009999; text-decoration: underline; } /* F2VAN-64 */ /* .borrow-landing-page a.ui-button:visited { color: #fff; } .borrow-landing-page a.ui-button:hover { background-color: darkred; color: #fff; text-decoration: none; } */ .borrow-landing-page section.fair-fast-details .details-list { width: 60; width: 74%; margin-left: 18%; line-height: 24px; } .borrow-landing-page section.fair-fast-details .details-list > div { display: flex; flex-direction: row; font-size: 16px; margin-top: 20px; } .borrow-landing-page section.fair-fast-details .details-list > div .details-list-title { flex: 1; text-align: right; font-weight: bold; margin-right: 7%; } .borrow-landing-page section.fair-fast-details .details-list > div .details-list-info { flex: 3; text-align: left; } .borrow-landing-page section.fair-fast-details .details-list > div .details-list-info a { text-decoration: none; } .borrow-landing-page p { font-size: 16px; line-height: 24px; } .borrow-landing-page section.learn-more div:first-child{ margin-bottom: 6px; } .borrow-landing-page section.learn-more p { margin-bottom: 0; } .borrow-landing-page section.learn-more a { color: #009999; } .borrow-landing-page section.learn-more a::after { content: ">>"; font-size: 15px; margin-left: 3px; } .borrow-landing-page a[name="disclaimer"] { color: #776E64; } .borrow-landing-page a[name="disclaimer"]:hover { color: #776E64; } .borrow-landing-page p.disclaimer-info { font-size: 12px; line-height: 18px; } .borrow-landing-page p.fair-fast-desc { margin-bottom: 40px; } /* MRR-25219 */ .searchActivityForm + .mdgst + .topic li:last-of-type { display: none; } /* CSTC-2294 */ .md .AvisoWarning { text-align: center; font-weight: bold; font-size: 15px !important; border: 1px solid red; margin-bottom: 20px; padding: 10px 0; } /* CSTC-2331 */ .onlineVoting div.errors{ padding: 8px 30px; } /* CUSSOL-674 */ @font-face { font-family: "Sharp Grotesk"; src: url("/common/fonts/SharpGroteskSmBold25.woff2"); font-display: swap; font-weight: 700; } @font-face { font-family: "Sharp Grotesk"; src: url("/common/fonts/SharpGroteskMedium20.woff2"); font-display: swap; font-weight: 500; } /* FIG-4283 - Hide nav menu for Error pages in F2.0 */ #nav-wrapper { height: auto; } #sidenav.pb-md-2 { padding-bottom: 0 !important; } /* FIG-5399 - Style Credit Cards on Summary page */ .vcCcCreditCardLabelAddLink { font-size: 14px; float: right; bottom: 18px; position: relative; } #vcCcSummary table caption { display:none; } #vcCcSummary table { background-color: var(--bs-tertiary-6); width: 100%; margin-bottom: 1rem; } #vcCcSummary table th { color: var(--bs-secondary-1, #000000); font-weight: 500; background-color: var(--bs-secondary-3, #ffffff); } #vcCcSummary table td { border-bottom: 1px solid var(--bs-tertiary-4, #d4dae5); } #vcCcSummary table > * > * > * { padding: 0.5rem; border-bottom-width: 1px; } /* FIG-5399 */ /* Overwrite TSYS background */ html { background-color: var(--bs-body-bg, #ebe8db); } #tsys-page .tabs-container { background-color: var(--bs-content-area-background); } /* TSYS F2.0 Styling */ #tsys-page .tabs-container .tabs-content { border-top: none; } #tsys-page .tabs-container .tabs li.active { text-decoration: none; } #tsys-page #PageTitle { display: none; } #tsys-page .account-summary-details, #tsys-page .payment-info, #tsys-page .tabs-container .tabs-content .tabs-panel .card-detail-left-col.rewards, #tsys-page .tabs-container .tabs-content .tabs-panel .card-detail-right-col.benefits, app-tsys-alerts-ui app-phone .contact-phone-page .contact-form section { background-color: var(--bs-tertiary-6); padding: 1rem; } #tsys-page .tabs-container .tabs-content .tabs-panel.manageTab .half-width, #tsys-page .tabs-container .tabs-content .tabs-panel.manageTab .full-width:not(.instruction-text), #tsys-page .transaction-container .transaction-group .transaction-header, app-tsys-statements .tableContainer .mat-expansion-panel-header, .contact-information[_ngcontent-c3] .contacts[_ngcontent-c3] td[_ngcontent-c3], .manage-preferences app-cards app-accordion .accordion .tab .tab-label, .tsys-visa-alerts .contact-information .contacts tbody tr { background-color: var(--bs-tertiary-6); } #tsys-page .transaction-container.filter-transactions .filter-section { background-color: transparent; } #tsys-page .transaction-container .transaction-group .transaction-item, app-tsys-statements .tableContainer .mat-expansion-panel-body .mat-row, .contact-information[_ngcontent-c3] .contacts[_ngcontent-c3] tbody[_ngcontent-c3] tr[_ngcontent-c3] td[_ngcontent-c3], .manage-preferences app-cards app-accordion .accordion .tab .tab-content, .tsys-visa-alerts .contact-information .contacts theads tr { background-color: var(--bs-secondary-3, #ffffff); } .tsys-visa-alerts .receipt-page .transaction-receipt { background-color: var(--bs-content-area-background); box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15); border-radius: 0.25rem; padding: 1.502rem; } .TsysEStatement #mainContent .contentTitle { margin-bottom: 1rem; } /* FIG-5216 - TSYS F2.0 Styling */ #tsys-page .tabs-container .tabs { list-style-type: none; } #tsys-page .tabs-container .tabs li.active, #tsys-page .tabs-container .tabs li:hover { font-weight: bold; border-top: none; border-right: none; border-left: 1px solid #000; } #tsys-page .tabs-container .tabs li { border-left: 1px solid #000; } #tsys-page .tabs-container .tabs li:last-child { border-right: 1px solid #000; } #tsys-page .tabs-container .tabs li { text-decoration: underline; } #tsys-page .vcBtn { color: var(--bs-content-area-background, #ffffff); background-color: var(--bs-primary-2, #2074dd); border-color: var(--bs-primary-2, #2074dd); font-weight: bold; font-size: 1.142rem; border-radius: var(--bs-border-radius, 0.25rem); } #tsys-page .transaction-section .transaction-container .filter-section .dropdown-container select, #tsys-page #list-of-cards { width: 100%; padding: 0.375rem 2.25rem 0.375rem 0.75rem; -moz-padding-start: calc(0.75rem - 3px); background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23F04E39' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e"); background-repeat: no-repeat; background-position: right 0.75rem center; background-size: 16px 12px; border: 1px solid #ced4da; transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; appearance: none; border-color: var(--bs-form-select-indicator-color, #2074dd); border-radius: var(--bs-border-radius, 0.25rem); } /* FIG-5216 - TSYS Statements F2.0 Styling */ app-tsys-statements .mat-expansion-panel-body { padding: 0; } /* FIG-5216 - TSYS Alerts F2.0 Styling */ .tsys-visa-alerts .manage-preferences h2 { background-color: var(--bs-content-area-background); box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15); border-radius: 0.25rem; padding: 1.502rem; } .tsys-visa-alerts header { display: none; } .tsys-visa-alerts .contact-information, .tsys-visa-alerts .manage-preferences section.card, .tsys-visa-alerts .manage-alerts-page main h2, .tsys-visa-alerts .manage-alerts-page .manage-alerts, .tsys-visa-alerts .contact-phone-page .contact-form { background-color: var(--bs-content-area-background); box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15); border-radius: 0.25rem; padding-top: 1.502rem; padding-bottom: 1.502rem; padding-right: 1.502rem; padding-left: 1.502rem; margin-top: 1.502rem; } .tsys-visa-alerts .manage-preferences h2 { margin-top: 1.502rem; } .tsys-visa-alerts .manage-alerts-page .manage-alerts .form-row { background-color: var(--bs-tertiary-6); border: none; padding-left: 1.429rem; padding-right: 1.429rem; padding-top: 0.714rem; padding-bottom: 0.714rem; margin-top: 0.714rem; margin-bottom: 0.714rem; } .tsys-visa-alerts .manage-alerts-page .manage-alerts .buttons { height: 40px; } /* FIG-5216 - Mobile App */ #PagePrimaryContent .mobileAppDownload img { width: auto; } /* FIG-5216 - Conclusion Text */ .payments-section .summarygroup a span, .transfers-section .summarygroup a span { flex-direction: column; } .conclusion { background-color: var(--bs-content-area-background); border-radius: 0.25rem; padding: 1.502rem !important; margin-top: 1.502rem !important; } /* FIG-5216 - Logo */ #brandLogo { filter: invert(100%) sepia(53%) saturate(2%) hue-rotate(26deg) brightness(114%) contrast(101%); } /* FIG-5216 - Account Summary - Smaller font, spacing to Payments and Transfers */ .payments-section .summarygroup .instructions, .transfers-section .summarygroup .instructions { font-size: 14px; margin-top: 0.5rem; } /* FIG-5265 Account Services- remove underline on Open Account page */ .md-container.card-deck-wrapper.card-container.mt-2.px-2.py-1 .row.card-container .col-md-4 .card.md-card a { text-decoration: none; } #Link3 .md-card a { text-decoration: underline; } /* FIG-5264 My Accounts -Statement Year for e-statement */ #dateGroups:before { content: "" } #dateGroups:after { content: "" } /*FIG-5260*/ div.md-page-header span.text-primary-2 i.print-button{ margin-right: 8px; } /*FIG-5400*/ .void-cheque-details-parent #downloadPDF { margin-top: 10px !important; display: block; } /*FIG-5401*/ .manageMFA p, .manageMFA .summarygroup { background-color: var(--bs-tertiary-6); border-radius: var(--bs-border-radius, 0.25rem); padding: 0.714rem; } .manageMFA h2.dynamicPageTitle { margin-bottom: 20px; } /*FIG-5408*/ .tsys-visa-alerts main { margin-top: 1.502rem; } /*FIG-5260*/ .instructions span.gstNo{ float: right; font-size: 16px; line-height: 20px; } div.md-page-header span.text-primary-2 i.print-button{ margin-right: 8px; } @media screen and (max-width: 399px){ div.md-page-header span.text-primary-2 i.print-button{ margin-right: 0px; } } .navbar > .container{ position: relative; } nav.navbar a.langSwitcher { position: absolute; right: 12px; top: -32px; } @media screen and (max-width: 991px) { nav.navbar a.langSwitcher { right: 44px; top: 3px; } } /* FIG-5506 - Style regular fontAwesome icons*/ .tablinks i.far { font-size: 2.286rem; color: var(--bs-leftnav-icon); line-height: 0.5; } /* FIG-5510 - Hide Contribution Disclaimer */ #AccountNew { display: none; } /*F2VAN-29*/ div.logo{ padding-left: 34px; } @media only screen and (max-width: 1399px) { div.logo{ padding-left: 21px; } } @media only screen and (max-width: 1199px) { div.logo{ padding-left: 0; } } .lastlogged.header-desktop-lastlogintime { font-weight: 500; } .lastlogged .form-label{ padding-right: 0; color: #000; } /*F2VAN-51*/ .post-page-header{ background: #FFF; } .post-page-header .Component-Shortcuts{ margin-top: 0; border-radius: 0; box-shadow: none; } .post-page-header .Component-Shortcuts ul{ list-style: none; padding-left: 0; } .post-page-header .Component-Shortcuts ul li{ display: inline-block; padding: 0 24px 0 0; } .post-page-header .Component-Shortcuts ul li a{ text-decoration: none; } /* F2VAN-50 */ #tsys-page .tabs-container .tabs-content .tabs-panel .card-detail-left-col .card-image img { max-width: 198px; } /* F2VAN-53 */ #tsys-page .transaction-container.filter-transactions .transaction-section-title { display: none; } /* F2VAN-54 */ #tsys-page .payment-info h5, #tsys-page .benefits-header h5, #tsys-page .rewards-header h5 { font-size: 1.17em; font-weight: 700; } /* F2VAN-57 */ .vcc-card { background: var(--bs-tertiary-6); padding: 2em 0; display: flex; justify-content: space-between; margin: 0 0 1em; } .vcc-card img{ width: 220px; height: 115px; margin: auto; } img.enviroExpenseCard { width: 180px; height: 115px; } .vcc-card .text { width: 65%; margin: 0 1em 0 0; } /*F2VAN-56*/ #tsys-page .tabs-container .tabs-content .tabs-panel.manageTab .half-width div.full-width, #tsys-page .tabs-container .tabs-content .tabs-panel.manageTab .half-width div.half-width { display: block; } #tsys-page .tabs-container .tabs-content .tabs-panel.manageTab div{ display: flex; flex-direction: row; flex-wrap: wrap; } /* F2VAN-44 */ .vcChangeAddressv2 .form-label.pt-2, .vcChangeAddressMDSBv2 .form-label.pt-2 { font-weight: 700; margin-top: 15px; } .vcChangeAddressv2 .text-end, .vcChangeAddressMDSBv2 .text-end { position: relative; top: 32px; } #AccountDetail .transactionApprovals .row span:only-child { width: 100%; font-weight: 700; } /* F2VAN-60 */ @media screen and (max-width: 568px) { #tsys-page .tabs-container .tabs-content .tabs-panel .card-detail-left-col { width: 40%; } #tsys-page .tabs-container .tabs-content .tabs-panel .card-detail-right-col { width: 54%; } } /* F2VAN-65 */ .md-container.manageMFA app-root app-password-recovery div button.vcBtn { color: var(--bs-content-area-background, #ffffff); background-color: var(--bs-primary-2, #2074dd); border-color: var(--bs-primary-2, #2074dd); min-width: 8rem; min-height: 2rem; font-weight: bold; font-size: 1.142rem; text-decoration: initial; border-radius: var(--bs-border-radius, 0.25rem); } .md-container.manageMFA app-root app-password-recovery div button.vcBtn:active { background-color: var(--bs-tertiary-1, #546d99); } .md-container.manageMFA app-root app-password-recovery div button.vcBtn:disabled { background-color: grey; } /* F2VAN-67 */ #allAlerts .accordion-item .float-end .btn.btn_gradient { text-decoration: underline; } /*F2VAN-66*/ .md-maincontent .md-page-header h1{ font-family: 'SharpGroteskSmBold'; font-size: 1.75rem; } /* F2VAN-68 */ .AccountSummary .summarygroup .table-responsive .table tr td:not(.void-cheque-details-parent) { position: relative; top: 6px; } /*F2VAN-73*/ header#PageHeader nav.header { background-color: var(--bs-header-background); } .post-page-header .Component-HTML{ margin-top: 0; padding: 0; } .post-page-header .second-header { background: #FFF; } .post-page-header .second-header-wrapper { align-items: center; display: flex; justify-content: start; gap: clamp(40px, 6vw, 60px); margin-top: 0; border-radius: 0; box-shadow: none; padding: 0; } .post-page-header .second-header-item-text { font-family: 'Sharp Grotesk', sans-serif; font-weight: 700; font-size: 18px; text-decoration: none; color: black; } .post-page-header .second-header-item { position: relative; padding: 1em 0; } .post-page-header .second-header-item.active { border-bottom: #f04e39 solid 5px; padding-bottom: 0.6em; } .post-page-header a.second-header-item-text:hover { text-decoration: none; } header.offersHeader#PageHeader{ padding-top: 35px; font-family: var(--bs-body-font-family); line-height: 23.5px; } header.offersHeader .md-welcome{ padding-top: 2px; } header.offersHeader#PageHeader div.logo{ padding-left: 24px; } header.offersHeader#PageHeader nav.navbar div.container{ padding-right: 0; } @media only screen and (max-width: 991px) { header.offersHeader#PageHeader{ padding-top: 0; } header.offersHeader#PageHeader nav.navbar { height: 60px; padding: 12px 5vw 0px; } header.offersHeader#PageHeader nav.navbar div.container{ padding-right: var(--bs-gutter-x, 0.75rem); } } header.offersHeader#PageHeader #md-navbar-toggle{ display: none; } /*F2VAN-74*/ div.summarygroup table.table tbody tr td a[title="Delete this message"] { float: right; } /*F2VAN-29*/ .lastlogged .text-secondary-2{ color: #000 !important; } /*F2VAN-75*/ tr.epmUnread a{ font-weight: 900; } /*F2VAN-83*/ .tablinks:hover, button.md-subnav-btn:hover, .md-subnav-a:hover div.md-subnav{ font-weight: 700; } .table th{ color: #000000; } /*F2VAN-76*/ #PersonalMessage tr { border-color: rgb(240, 78, 57); border-width: 1px; } #PersonalMessage tr th, #PersonalMessage tr td{ padding: 5px; } #PersonalMessage tr td{ border-right: 1px solid rgb(240, 78, 57); } #PersonalMessage tr td:last-of-type { border-right: none; } /*F2VAN-87*/ #AccountStatementStep1 span.md-amount.text-end{ float: right; } #AccountStatementStep1 .table th[data-field="amount"] .th-inner, #AccountStatementStep1 .table th[data-field="balance"] .th-inner{ text-align: right; } /* F2VAN-89 - Manage My Visa Nav Link - set custom icon */ #nav-btn-ManageMyVisa i::before { background-image: url(/DynamicContent/Resources/Images/cc-visa.svg); background-repeat: no-repeat; display: block; width: 36px; height: 32px; content: ""; } /* CUSSOL-1154 */ body .form-check-input[type="checkbox"] { border-radius: 0.25rem; } /*F2VAN-85*/ span.md-amount.negative{ color: #990B20; } /*CUSSOL-1381*/ .vcNonFraudDisputev2 .twoColRow .formCopy { width: auto; font-weight: bold; padding-right:0; } #VCNonFraudDisputeStep1 nav.breadcrumb { display: none; } #VCNonFraudDisputeStep1 .receiptPanel { margin-top: 0 !important; } #VCNonFraudDisputeStep1 .container #PagePrimaryContent .simple.Component-HTML { display:none; } #VCNonFraudDisputeStep1 .container .receiptPanel h1.dynamicPageTitle { font-family:'SharpGroteskSmBold'; } /* #tsys-page .tabs-container .tabs-content .tabs-panel.manageTab div .half-width:nth-child(7) { display: none; } */ /* CUSSOL-1434 */ .AccountSummary .summarygroup .table-responsive .table tr td.negative, #AccountStatementStep1 span.md-confirm-value.negative { color: #990B20; } /* CUSSOL-1465 */ .onlineVoting .preferred .candidateName { padding-left: 0.714rem; } .onlineVotingStep1 .form-check label.preferred { padding-left: 0; } /*CUSSOL-1452*/ .tsyscreditlimitincrease h2.smart-heading{ font-family: 'Sharp Grotesk', sans-serif; font-weight: 700; } .tsyscreditlimitincrease h2 { font-weight: bold; } .tsyscreditlimitincrease fui-icon[name="calendar-week"] .icon-inner{ line-height: normal; } .tsyscreditlimitincrease fui-icon[name="calendar-week"] .icon-inner:after{ content: "\f073"; font-family: 'Font Awesome 5 Pro'; } .tsyscreditlimitincrease #form-progress-container li span { font-family: 'Sharp Grotesk'; font-weight: 700; font-size: 1.643rem; line-height: 1.143rem; } .tsyscreditlimitincrease #form-progress-container li span.step-name{ display: none !important; } .tsyscreditlimitincrease .d-md-none{ display: none; } .tsyscreditlimitincrease li.stepper-item.completed span.step-counter.btn { background-color: #F04E39; } .tsyscreditlimitincrease .duet-date__select--month option:disabled { text-transform: none; font-weight: normal; } /*CUSSOL-1400*/ .pc-review-info-tile { width: 49%; } .pc-review-info-tile-left{ float: left; } .pc-review-info-tile-right{ float: right; } @media screen and (max-width: 992px){ .pc-review-info-tile { width: 100%; } } .pc-product-card { border: 2px solid; border-radius: 20px; margin: 0 auto; width: 350px; margin-top: 61px; padding: 2rem 2rem 7rem 2rem; display: none; } body.enviro-Visa-Classic-with-Vancity-Rewards .pc-product-card.pc-enviro-Visa-Classic-with-Vancity-Rewards{ display: block; } body.enviro-Visa-Classic-Low-Rate .pc-product-card.pc-enviro-Visa-Classic-Low-Rate{ display: block; } body.enviro-Visa-Classic-Low-Rate-with-Vancity-Rewards .pc-product-card.pc-enviro-Visa-Classic-Low-Rate-with-Vancity-Rewards{ display: block; } body.enviro-Visa-Gold-with-Vancity-Rewards .pc-product-card.pc-enviro-Visa-Gold-with-Vancity-Rewards{ display: block; } body.enviro-Visa-Gold-Low-Rate .pc-product-card.pc-enviro-Visa-Gold-Low-Rate{ display: block; } body.enviro-Visa-Gold-Low-Rate-with-Vancity-Rewards .pc-product-card.pc-enviro-Visa-Gold-Low-Rate-with-Vancity-Rewards{ display: block; } body.enviro-Visa-Infinite-with-Vancity-Rewards .pc-product-card.pc-enviro-Visa-Infinite-with-Vancity-Rewards{ display: block; } body.enviro-Visa-Infinite-Privilege-with-Vancity-Rewards .pc-product-card.pc-enviro-Visa-Infinite-Privilege-with-Vancity-Rewards{ display: block; } img.pc-product-card__image { width: 60%; margin: 0 auto -54px auto; display: block; position: relative; top: -79px; } h2.pc-product-card__heading { font-family: "Sharp Grotesk", sans-serif; font-weight: 600; font-size: 1.1rem; } h2.pc-product-card__heading .secondary-heading { font-family: "Open Sans", sans-serif; font-weight: 500; padding-top: 5px; display: inline-block; } .pc-product-card__highlight { font-family: "Open Sans", sans-serif; font-size: 16px; padding: 24px 0; border-bottom: 2px solid; display: flex; justify-content: space-between; gap: 1rem; font-weight: 900; line-height: 1.15rem; } .pc-product-card__highlight span:last-child:not(:first-child) { max-width: 50%; text-align: right; font-weight: 300; } /*CUSSOL-1676*/ #CreditLimitRequestStep1 input#hidden-email { display: none; } .vcCreditLimitRequestv2.step2 div#form-progress-container { margin-bottom: 1rem; } /*CUSSOL-1720*/ .onlineVoting.onlineVotingStep2 .agreement { display: none; } .onlineVoting.onlineVotingStep2 span.candidateMeta { color: var(--bs-leftnav-icon); } .onlineVoting.onlineVotingStep2 p.agreementTrigger { text-decoration: underline; cursor: pointer; } /*CUSSOL-1741*/ .formFieldGroup.formFieldGroup0 div.oneColRow:nth-child(3) { margin-bottom: 0px; } .vcOptOutRequestv2 div.formActions ul.optOutRequestForm { margin-left:10px; position:relative; } .vcOptOutRequestv2 div.formActions ul.optOutRequestForm li { padding-left: 15px; float:none; line-height: 1.4; } .vcOptOutRequestv2 div.formActions ul.optOutRequestForm li:before { display:block; content: '\2022'; position: absolute; left: 0; background:none; top:4px; } .formFieldGroup.formFieldGroup0 div.oneColRow:nth-child(4) { margin-bottom:15px; }