rulemgt-frontend/src/assets/framework/browser/style/docs.css

   1 /* hide site until we know if they are logged in or not */
   2 html{opacity:0; visibility:hidden;}
   3 html[data-signed-in="true"]{opacity:1; visibility:visible;}
   4 /* end hide until we know if they are logged in or not */
   5
   6 /***** b2bTryme *****/
   7 .b2b-tryme {
   8   width: 100%;
   9   max-width: 100% !important;
  10 }
  11
  12 /***** Remove usage section but not parameters section****/
  13 .usage .prettyprint {
  14   display:none;
  15 }
  16 h2#example {
  17   display: none;
  18 }
  19 h2#usage {
  20   display: none;
  21 }
  22
  23 #usage ol.linenums {
  24   display:none;
  25 }
  26 /******ngDocs overrides*****/
  27 .variables-matrix .type-hint {
  28   background: transparent !important;
  29 }
  30 /******Welcome Page*****/
  31 .portal-switcher {
  32   float: left;
  33   margin-top: 20px;
  34   margin-right: 10px;
  35 }
  36 /* Universal NAV */
  37 .navbar{height:85px; width:100%; background-color:#222;}
  38 .navbar button{background-color:transparent; border:none !important; margin:5px -10px 0 0 !important; padding:0 !important; min-width:55px !important; display:none !important}
  39 .navbar:before, .navbar:after { display: table; content: ""; line-height: 0; }
  40 .navbar:after { clear: both; }
  41 .navInner{height:85px; overflow:hidden}
  42 .navbar .container{height:85px; transition:none;}
  43 .navbar .container:after {
  44     content: "";
  45     display: block;
  46     height: 0;
  47     position: relative;
  48     top: 85px;
  49 }
  50 .brand {
  51     color: #ffffff;
  52     display: block;
  53     float: left;
  54     font-family: "Omnes-ATT-W02-Light";
  55     font-size: 2.3rem;
  56     height: 45px;
  57     line-height: 44px;
  58     margin: 20px 0 0 -5px;
  59     padding: 0 15px 0 5px;
  60     position: absolute;
  61 }
  62 .brand:active{color:#fff;}
  63 .brand sup {
  64     color: #fcb314;
  65     font-family: "Omnes-ATT-W02";
  66     font-size: 1.4rem;
  67     position: relative;
  68     right: 0;
  69     top: 12px;
  70 }
  71 .brand:hover,
  72 .brand:focus{text-decoration:none;}
  73 .brand:focus{outline:1px dotted white;}
  74 .brand .icon-att-globe {
  75     color: #44c7f5;
  76     float: left;
  77     font-size: 44px;
  78     left: -2px;
  79     margin-right:25px;
  80     position: relative;
  81     top: 0;
  82 }
  83 .brand strong {
  84     font-family: "Omnes-ATT-W02-Medium";
  85     font-weight: normal;
  86 }
  87 .navbar button {
  88     border: medium none;
  89     border-radius: 0;
  90     color: #fff;
  91     font-family: "Omnes-ATT-W02-Medium";
  92     font-size: 3rem;
  93     height: 45px;
  94     margin: 0 -10px 0 0;
  95     outline-offset: 0 !important;
  96     padding: 0;
  97     text-align: center;
  98     top: 0;
  99     width: 45px;
 100 }
 101 .navbar button:hover,
 102 .navbar button:focus{
 103     outline-offset: 0 !important;
 104 }
 105 .navbar button:focus {
 106     outline:1px dotted white !important;
 107 }
 108
 109 /* UNIVERSAL NAV */
 110 #nav-menu {
 111     display: block;
 112     float: right;
 113     height: 85px;
 114     width: auto;
 115     position:relative;
 116     padding-bottom:20px;
 117 }
 118 #nav-menu li {
 119     display: block;
 120     float: left;
 121     height: 45px;
 122     margin: 22px 0 0;
 123 }
 124
 125 .navbar li a {
 126     color:#fff;
 127     display: block;
 128     font-family: "Omnes-ATT-W02";
 129     font-size: 1.6rem;
 130     height:100%;
 131     line-height:1;
 132     text-align: center;
 133     transition:all .3s linear 0s;
 134 }
 135 .navbar li a:focus{outline:1px dotted white; text-decoration:none;}
 136 .navbar li a:hover{outline:none; text-decoration:none;}
 137
 138 /* 1012015 */
 139 .navbar li a:focus,
 140 .navbar li a:hover{
 141    transition:color .3s linear 0s;
 142    color:#44c8f5;
 143 }
 144 /* END 1012015 */
 145
 146 .navbar li a div,
 147 .stickynav li a div{
 148     color: transparent;
 149     display: block;
 150     font-family: "Omnes-ATT-W02-Medium";
 151     font-size: inherit;
 152     height: 2px;
 153     margin: 0 10px;
 154     overflow: hidden;
 155     padding: 0;
 156     position: relative;
 157     text-align: center;
 158     top: 6px;
 159     opacity:0;
 160     visibility:hidden;
 161 }
 162
 163 body:not(#home) .navbar li a div{background-color: transparent;}
 164 body:not(#home) .navbar li a.active div{
 165    background-color: #fcb314;
 166    opacity:1;
 167    transition:opacity .3s linear .1s;
 168    visibility:visible;
 169 }
 170
 171 #nav-menu li li a {
 172    display:none;
 173    padding-left:30px;
 174 }
 175 #nav-menu li li li a{
 176    padding-left:60px;
 177 }
 178
 179 .top-nav-btn-align {
 180   margin-top: 20px !important;
 181 }
 182
 183 /* THREE LINES OF THE HAMBURGER */
 184 .btn-menu{display:none}
 185 .btn-menu .svgIcon-hamburger{
 186     border:none;
 187     border-top:5px solid #000;
 188     content: "";
 189     display: table;
 190     height: 0;
 191     left: 10px;
 192     position: relative;
 193     top: 0;
 194     width: 40px;
 195 }
 196 .btn-menu .svgIcon-hamburger{
 197    margin-bottom:15px;
 198    top:4px;
 199 }
 200
 201 /* MAIN CONTENT */
 202 #ddh-fixed-230{
 203         background-color:#efefef;
 204 }
 205 #ddh-fixed-230 + .fluid-space{
 206    padding-top:0;
 207 }
 208 #ddh-fixed-230 + .fluid-space > section.content-pad:first-child{
 209    margin-top:11px;
 210 }
 211 #ddh-fixed-230 + .fluid-space .stickypad{
 212         height:85px;
 213    position:relative;
 214         z-index:100;
 215 }
 216 /* STICKY NAV */
 217 .stickynav {
 218   background-color: #ffffff;
 219   border-bottom: 1px solid #ccc;
 220   display: -webkit-flex;
 221   display: -ms-flexbox;
 222   display: flex;
 223   -webkit-flex-wrap: wrap;
 224       -ms-flex-wrap: wrap;
 225           flex-wrap: wrap;
 226   position: absolute;
 227   top: 46px;
 228   width: 100%;
 229 }
 230 .stickynav h1 {
 231   line-height: 3.8rem;
 232   margin: 10px 20px 9px 0;
 233   -webkit-flex: 0 1 auto;
 234       -ms-flex: 0 1 auto;
 235           flex: 0 1 auto;
 236 }
 237 .cato-div {
 238   -webkit-flex: 2 1 auto !important;
 239       -ms-flex: 2 1 auto !important;
 240           flex: 2 1 auto !important;
 241   margin: 0;
 242   padding-right: 20px;
 243 }
 244 .heading-page + div,
 245 .cato-div + div {
 246   display: block;
 247   -webkit-flex: 1 1 0;
 248       -ms-flex: 1 1 0;
 249           flex: 1 1 0;
 250   margin:0;
 251 }
 252 .heading-page + div ul,
 253 .cato-div + div ul {
 254   -webkit-align-content: space-around;
 255       -ms-flex-line-pack: distribute;
 256           align-content: space-around;
 257   display: -webkit-flex;
 258   display: -ms-flexbox;
 259   display: flex;
 260   -webkit-flex-flow: row nowrap;
 261       -ms-flex-flow: row nowrap;
 262           flex-flow: row nowrap;
 263   -webkit-justify-content: space-around;
 264       -ms-flex-pack: distribute;
 265           justify-content: space-around;
 266   width: 100%;
 267 }
 268 .cato-badge,
 269 .cato-approved {
 270   background-color: #fff;
 271   border: 1px solid #1b7e28;
 272   border-radius: 6px;
 273   color: #1b7e28;
 274   float: left;
 275   font-size: 1.2rem;
 276   line-height: 1;
 277   margin-top: 18px;
 278   padding: 5px 10px;
 279 }
 280 .cato-badge {
 281   background-color: #1b7e28;
 282   color: #fff;
 283   margin-right: 15px;
 284 }
 285 .stickynav ul {
 286   display: block;
 287   float: right;
 288   height: 44px;
 289   position: relative;
 290   right: 15px;
 291   top: 5px;
 292   margin-bottom: 12px;
 293 }
 294 .stickynav li {
 295   display: block;
 296   float: left;
 297   height: 44px;
 298   margin: 1px 0 0;
 299 }
 300 .stickynav li > a {
 301   display: block;
 302   /*font-family: "Omnes-ATT-W02-Light";*/
 303   font-size: 1.6rem;
 304   line-height: 1;
 305   margin: 4px 0 0;
 306   padding: 11px 15px;
 307   text-align: center;
 308 }
 309 .stickynav li.active > a {
 310   color: #666;
 311   font-family: "Omnes-ATT-W02-Medium";
 312   /*line-height:1.1;*/
 313   /*text-decoration: underline;*/
 314 }
 315 .stickynav li > a {
 316   text-decoration: none !important;
 317 }
 318 .stickynav li a div {
 319   transition: opacity 0.3s linear 0.1s;
 320 }
 321 .stickynav li.active a div {
 322   border-top: 3px solid #0574ac;
 323   margin: 0;
 324   opacity: 1;
 325   padding: 0 10px;
 326   top: 17px;
 327   visibility: visible;
 328   transition: opacity 0.3s linear 0.1s;
 329 }
 330 .stickynav.affix {
 331    box-shadow:0 5px 20px 20px rgba(255,255,255,1);
 332   position: fixed;
 333   top: 0;
 334   z-index: 9999;
 335   margin-top: 0;
 336 }
 337
 338
 339 /*section#overview{margin-top:36px;}*/
 340 .downloads {
 341     display: inline-block;
 342     float: right;
 343     font-size: 1.4rem;
 344     line-height: 0.75;
 345     margin: 0 15px 30px 20px;
 346     position: relative;
 347     text-align: right;
 348     top: -15px;
 349          min-width:180px;
 350 }
 351 .downloads-box{
 352         background-color:#efefef;
 353         margin-top:10px;
 354         padding:15px 15px 5px 15px;
 355         border-radius:7px;
 356         font-size:1.6rem;
 357 }
 358 .downloads a{line-height:16px;}
 359 .downloads .downloadicon{vertical-align:middle; display:inline-block; fill: #0574ac; height:20px; width:20px; margin-left:5px; margin-top:-2px;}
 360 .downloads li{
 361         margin-bottom:10px;
 362 }
 363
 364 h1.primary {
 365     border-bottom: 1px solid transparent;
 366 }
 367 h1.landing {
 368     border-bottom: 1px solid #ccc;
 369     min-height: 58px;
 370     line-height: 58px;
 371     margin-bottom:30px;
 372     margin-top:43px;
 373 }
 374 .hr-spacer{margin-top:60px; margin-bottom:60px;}
 375
 376 /* ******* FOOTER ******* */
 377 .ddh-footer:before{
 378    height:0;
 379 }
 380 .ddh-footer{
 381
 382    padding-top: 20px;
 383    background-color:#222;
 384 }
 385 .link-farm + .ddh-footer{margin-top:0;}
 386 .footer-nav,
 387 .footer-legal,
 388 .footer-logo{
 389    padding-left:40px;
 390 }
 391 .footer-legal > p{ line-height:1.4rem;}
 392 .ddh-footer,
 393 .ddh-footer a{
 394    color:#fff !important;
 395 }
 396 .ddh-footer a:focus{
 397    outline:1px dotted white;
 398    text-decoration:none;
 399 }
 400 .footer-logo {
 401     display: table;
 402     font-family:"Omnes-ATT-W02-Light";
 403     height: 25px;
 404     position: relative;
 405     font-size:1.6rem;
 406     padding:5px 5px 5px 40px;
 407 }
 408 .footer-logo:hover,
 409 .footer-logo:focus{text-decoration:none;}
 410 .footer-logo b{font-family:"Omnes-ATT-W02-Medium"; font-weight:normal;}
 411
 412 .ddh-footer .icon-att-globe {
 413     display: inline-block;
 414     color: #44c7f5;
 415     font-size:2.5rem;
 416     left: 0;
 417     margin-right: 16px;
 418     position: absolute;
 419     top: 3px;
 420 }
 421 .footer-nav{line-height:1rem; margin-top:10px; }
 422 .footer-nav li{font-size:1.0rem; line-height:1; display:inline; padding-right:12px; padding-left:12px; border-left:1px solid #ccc; }
 423 .footer-nav li:first-child{border-left:none; padding-left:0; }
 424
 425 .footer-nav a {
 426     display: inline-block;
 427     font-size: 1.2rem;
 428     position: relative;
 429     margin-top:0;
 430     top: 1px;
 431 }
 432 .footer-nav a:hover,
 433 .footer-nav a.active{text-decoration:none;}
 434
 435 .footer-nav a:hover,
 436 .footer-nav a:focus{
 437    transition:color .3s linear 0s;
 438    color:#44c8f5 !important;
 439 }
 440 .footer-nav a:after {
 441    background-color: transparent;
 442     bottom: -6px;
 443     content: "";
 444     display: block;
 445     height: 2px;
 446     position: absolute;
 447     width: 100%;
 448     opacity:0;
 449 }
 450 .footer-nav a.active:after {
 451    opacity:1;
 452     background-color:#fcb314;
 453     transition:opacity .3s linear 0s;
 454 }
 455 /* ************ */
 456
 457 .footer-legal {
 458     font-size: 1.1rem;
 459     margin-top: 25px;
 460     padding-bottom:30px;
 461 }
 462 .footer-legal a{
 463    font-size:1.1rem;
 464    text-decoration:underline;
 465 }
 466 .footer-legal a:hover{
 467    text-decoration:none;
 468 }
 469
 470 p.ds2.heading{margin-bottom:30px; line-height:1; color:#666666}
 471
 472 /* CODE SECTION */
 473 .codebox {
 474    background-image: linear-gradient(transparent 50%, #fff 50%);
 475    background-size: 40px 40px;
 476    padding: 0 0 0 10px !important;
 477    overflow-x:hidden;
 478    border-radius:5px 0 5px 5px;
 479    background-color:#f5f5f5 !important;
 480    width:100%;
 481    box-sizing:border-box;
 482    min-height:0;
 483    margin-bottom:40px;
 484    max-height:300px;
 485    font-size:1.1rem;
 486    line-height:20px;
 487    font-family:'Courier New';
 488    cursor:copy !important;
 489    white-space:pre;
 490 }
 491 [data-code-id*="ANGULAR"]{
 492    margin-bottom:0;
 493 }
 494 .selectalllink {
 495    font-family:"Omnes-ATT-W02-Medium";
 496    border:1px solid #b7b7b7;
 497    border-bottom:0;
 498    border-radius:5px 5px 0 0;
 499    padding:3px 7px;
 500    float:right;
 501    background-color:#f5f5f5;
 502    font-size:11px;
 503    margin-bottom:-1px;
 504    position:relative;
 505 }
 506 .selectalllink.focus{
 507    border-color:#0574ac #0574ac transparent;
 508    box-shadow: 2px 3px 2px -2px rgba(5, 116, 172, 0.35) inset;
 509    transition:all 0.3s linear 0s;
 510 }
 511 .selectalllink:after {
 512     background: #f5f5f5;
 513     bottom: -3px;
 514     content: "";
 515     display: block;
 516     height: 5px;
 517     left: 0;
 518     position: absolute;
 519     width: 100%;
 520 }
 521
 522 /* EDITORIAL & MARKETING TABLES */
 523 .ds2-table{width:100%; margin-bottom:40px;}
 524 .ds2-table th{text-align:left; white-space:nowrap;}
 525 .ds2-table thead h2{margin:0 0 15px 0}
 526 .ds2-table:not(.table-bordered) th,
 527 .ds2-table:not(.table-bordered) tbody td{padding:10px 20px 10px 0; vertical-align:top}
 528
 529 pre{white-space: pre-wrap; font-size:1.2rem;}
 530
 531 .link-farm{display:table; width:100%; padding-top:60px; }
 532 .svg-home-button{
 533    background-color:transparent;
 534    border:none;
 535 }
 536 @media (min-width: 768px){
 537    .landing-page .text-center p{max-width:620px; margin-left:auto; margin-right:auto; }
 538         .nav-links > div{padding:0 10px;}
 539    .nav-links p.ds2.heading{text-align:left; margin:0 0 10px;}
 540    .nav-links p.ds2.heading + ul.no-bullet{margin-bottom:60px;}
 541    .nav-links p.ds2.heading + ul.no-bullet a, ul.no-bullet li > p{font-size:1.4rem}
 542         ul.no-bullet li > p{margin-top:8px;}
 543    .nav-links ul.no-bullet li{line-height:11px;}
 544    .landing-page .request-new-pattern{font-size:2rem; font-family:"Omnes-ATT-W02-Light";}
 545
 546    .link-farm{text-align:center; background-color:#f2f2f2; margin-top:60px}
 547 }
 548
 549 @media (max-width:767px){
 550
 551    h1.landing {
 552        margin-left: -15px;
 553        margin-right: -15px;
 554        margin-top:0;
 555        padding:17px 15px;
 556        line-height:normal;
 557    }
 558    .link-farm{background-color:#f2f2f2; padding-top:0; }
 559    .landing-page + .link-farm{margin-top:0;}
 560    .link-farm .nav-links.top-space{margin-top:0 !important}
 561
 562    .landing-page .request-new-pattern{font-size:1.6rem; font-family:"Omnes-ATT-W02-Medium";}
 563    .landing-page .request-new-pattern a{white-space:nowrap}
 564
 565    /* LINK TYPE 2 */
 566    .nav-links p.ds2.heading{margin:30px -15px 15px; padding:0 15px;}
 567    .nav-links a::after {
 568       background-repeat:no-repeat;
 569       content: "";
 570       display: block;
 571       position: absolute;
 572       right: 15px;
 573       top: 14px;
 574    }
 575    .nav-links a {
 576        display: block;
 577        height: 45px;
 578        line-height: 45px;
 579        padding: 0 15px;
 580        position: relative;
 581    }
 582    .nav-links ul{margin:0 -15px 0; }
 583    .nav-links ul.no-bullet li {
 584        border-top: 1px solid #ccc;
 585        margin: 0;
 586        padding: 0;
 587    }
 588    .nav-links ul.no-bullet li:last-child{
 589       border-bottom:1px solid #ccc;
 590    }
 591    ul.no-bullet li>p{padding-left: 15px;margin-top: -7px;margin-bottom: 7px;}
 592    .svg-home-button{
 593       height:40px;
 594       width:40px;
 595       background-color:transparent;
 596    }
 597    .top-space{
 598       margin-top:20px;
 599    }
 600
 601    #ddh-fixed-230{
 602                 display:none;
 603    }
 604    #ddh-fixed-230 + .fluid-space .stickypad{
 605                 height:20px;
 606         }
 607         .stickynav{
 608                 display:block;
 609       top:0;
 610       border-width:0;
 611    }
 612         .stickynav h1{display:inline-block; margin:10px 20px 5px 0; }
 613    .stickynav.affix {height:84px; box-shadow:0 5px 20px 20px rgba(255,255,255,1);}
 614         .heading-page + div,
 615         .cato-div{ display:inline-block; position:relative; top:5px;}
 616         .cato-badge, .cato-approved{display:inline-block; margin-top:0;}
 617         .cato-div + div{
 618                 display:inline-block;
 619                 width:100%;
 620         }
 621         .cato-div + div::before {
 622                 background: #ccc none repeat scroll 0 0;
 623                 content: "";
 624                 display: block;
 625                 height: 44px;
 626                 position: absolute;
 627                 right: -15px;
 628                 width: 150%;
 629         }
 630         .stickynav ul {
 631       background-color: #cccccc;
 632       display: block;
 633       float: none;
 634       margin: 0 0 0 15px;
 635       top:0;
 636       text-align:center;
 637       right:0;
 638                 left:-15px;
 639    }
 640    .stickynav li{margin-top:0}
 641    .stickynav li > a {
 642       height: 40px;
 643       line-height: 1;
 644       margin: 2px 0 0;
 645       padding: 14px 10px 0;
 646       width: 100%;
 647    }
 648    .stickynav li.active a div{top:8px}
 649
 650         .downloads{ font-size:1.2rem; top:0; margin:0 0 10px 10px; min-width:auto;}
 651         .downloads-box{ font-size:1.4rem; }
 652
 653    .toolkit.fluid-space{padding-top:100px;}
 654
 655    .selectalllink{display:none;}
 656
 657    .ds2-table{border:0;}
 658    .ds2-table *{padding:0 !important; border:0 !important;}
 659    .ds2-table tr{position:relative;}
 660    .ds2-table tbody tr{display:table; margin-bottom:20px; width:100%}
 661    .ds2-table tbody tr:last-child{margin-bottom:0;}
 662    .ds2-table tbody td{display:table; width:auto;}
 663    .ds2-table.table-bullet td{margin-left:20px;}
 664    .ds2-table.table-bullet .document:after {
 665       background-color: black;
 666       border-radius: 50%;
 667       content: "";
 668       display: table-cell;
 669       font-size: 50px;
 670       height: 6px;
 671       left: 5px;
 672       position: absolute;
 673       top: 10px;
 674       width: 6px;
 675    }
 676    .ds2-table tbody td:nth-child(3){display:none;}
 677    .ds2-table tbody td:nth-child(4){float:left; margin-right:10px; }
 678    .ds2-table tbody td:nth-child(5){float:left; }
 679    .ds2-table tbody td:nth-child(5):not(:empty):before{content:"(";}
 680    .ds2-table tbody td:nth-child(5):not(:empty):after{content:")";}
 681
 682    .ds2-table thead .border th{display:none;}
 683    .ds2-table thead .border{border-top:1px solid #ccc;}
 684    .ds2-table thead h2{margin:0 0 20px;}
 685    .ds2-table tbody + thead h2{margin:30px 0 20px;}
 686    .ds2-table thead hr{margin-bottom:0}
 687    .ds2-table tbody{padding-top:20px;}
 688
 689
 690    /* FOOTER */
 691    /*.ddh-footer{padding-top:20px; margin-top:20px;}*/
 692    .ddh-footer.top-space{margin-top:0 !important}
 693    .ddh-footer .container{padding-left:0; padding-right:0;}
 694    .footer-logo{margin-left:10px;}
 695    .footer-nav{margin-top:15px}
 696    .footer-nav,
 697    .footer-legal {
 698       padding-left:0;
 699    }
 700    .footer-nav li{box-sizing:content-box; font-size:inherit; display:block; padding-right:0; padding-left:0; border-left:none; border-bottom:1px solid #aaa; height:40px; line-height:40px}
 701    .footer-nav li:first-child{border-left:none; padding-left:0;border-top:1px solid #aaa;}
 702    .footer-nav li a{position:relative;padding-left:10px; padding-right:10px; outline-offset:-2px; top:0}
 703
 704    body:not(#home) .footer-nav a.active:after,
 705    body:not(#home) .footer-nav a:hover:after {
 706       background-color: transparent !important;
 707       border-bottom: 2px solid #fcb314;
 708       bottom: 0;
 709       color: transparent;
 710       content: attr(title) "";
 711       display: inline;
 712       height: inherit;
 713       left: 10px;
 714       width: auto;
 715    }
 716    body:not(#home) .footer-nav a:after {width:auto;}
 717    .footer-nav a {
 718       font-size:1.8rem;
 719       display: block;
 720       font-size: 1.8rem;
 721       position:static;
 722    }
 723    .footer-nav a:hover:after,
 724    .footer-nav a.active:after {
 725       display:none;
 726    }
 727
 728    .footer-legal {
 729       margin-top: 15px;
 730       padding:0 10px 10px;
 731    }
 732    .footer-legal a{text-decoration:underline;}
 733    .footer-legal a:focus{text-decoration:none;}
 734 }
 735
 736 @media (min-width: 481px) and (max-width: 767px){
 737    .stickynav h1{ margin:10px 20px 5px 0}
 738 }
 739 @media (max-width: 1020px) {
 740    .navbar li a{font-size:1.4rem; padding:16px 5px; transition:all .3s linear 0s;}
 741 }
 742 @media (max-width: 910px) {
 743    .fixed-230-subnav.affix{margin:2px 0 0}
 744         .navbar button{display:inline-block !important}
 745    .navbar,
 746    .navInner,
 747    .navbar .container{height:55px; }
 748    .brand{font-size:2.0rem; line-height:33px; height:33px; margin-top:11px; padding-right:10px;}
 749    .brand:focus{outline:1px dotted white;}
 750    .brand .icon-att-globe {
 751        font-size:33px;
 752        left: -3px;
 753        margin-right: 10px;
 754        top: 0;
 755    }
 756    .btn-menu{display:block;}
 757    #nav-menu > ul{display:none;}
 758    #nav-menu{
 759       top: 46px;
 760       width:100%;
 761    }
 762    #nav-menu[aria-hidden="true"] {
 763       height:0;
 764    }
 765    .btn-menu + #nav-menu{
 766       height:0;
 767    }
 768
 769    /* MENU ARROW */
 770    #nav-menu[aria-expanded="false"] .menu-arrow { display:none; }
 771    #nav-menu[aria-expanded="true"] .menu-arrow {
 772        background-color: #222;
 773        border: 1px solid #777;
 774        display:block;
 775        height: 10px;
 776        position: absolute;
 777        right: 28px;
 778        top: -5px;
 779        transform: rotate(45deg);
 780        width: 10px;
 781        z-index: 1;
 782    }
 783    #nav-menu[aria-expanded="true"] .menu-arrow:after {
 784        background-color: #222;
 785        content: "";
 786        display: block;
 787        height: 10px;
 788        position: relative;
 789        right: 0;
 790        top: 0;
 791        width: 10px;
 792    }
 793
 794    #nav-menu li a{ text-align:left; line-height:normal; }
 795    #nav-menu[aria-expanded="true"]{
 796       height:auto;
 797       background-color: #222;
 798       overflow:visible;
 799       left: 0;
 800       position: absolute;
 801       top: 55px;
 802       width: 100% !important;
 803       z-index: 9999;
 804       box-shadow:0 10px 5px -5px rgba(0,0,0,.5);
 805    }
 806    #nav-menu[aria-expanded="true"] ul{ display:block; }
 807    #nav-menu[aria-expanded="true"] li{ position:relative; margin:0; display:block; border-bottom:1px solid #777; float:none; height:auto; overflow:visible; }
 808    #nav-menu[aria-expanded="true"] li:first-child{border-top:1px solid #777;}
 809    #nav-menu[aria-expanded="true"] ul ul{display:none;}
 810    #nav-menu[aria-expanded="true"] li a{position:relative; height:42px; display:block; color:#fff; padding:0 16px; line-height:41px;}
 811    #nav-menu[aria-expanded="true"] li li a{
 812       padding-left:30px;
 813    }
 814    #nav-menu[aria-expanded="true"] li li li a{ padding-left:45px;}
 815    body:not(#home) #nav-menu[aria-expanded="true"] li a div {
 816        margin: 0;
 817        position: absolute;
 818        top: inherit;
 819    }
 820
 821    .stickynav li{
 822       display:inline-block;
 823       float:none;
 824    }
 825 }
 826 .cato-div.hide{display: none;}
 827 .cato-div .cato-draft{background-color:#cf2a2a; border:1px solid #cf2a2a;}
 828
 829
 830
 831
 832 /* junk to delete later*/
 833 .versionspan {
 834    font-size:1rem;
 835    word-spacing:1rem;
 836    color:#999;
 837 }
 838 .versionspan a {
 839    font-size:1rem;
 840    word-spacing:normal;
 841    color:blue;
 842 }
 843
 844 code{border:1px solid #ccc; padding:0 5px; background-color:#f5f5f5; border-radius:3px; font-family:"Courier New", monospace; font-size:15px; margin:0 5px}
 845
 846
 847 /* SVG PICKER */
 848 .corner-banner {
 849    font-family:"Omnes-ATT-W02-Medium";
 850    position:fixed;
 851     background-color: yellow;
 852     border: 1px solid;
 853     color: red;
 854     font-size: 1rem;
 855     height: 160px;
 856     line-height: 1rem;
 857     margin-left: -80px;
 858     margin-top: -80px;
 859     padding: 100px 0 0;
 860     transform: rotate(-45deg);
 861     width: 160px;
 862 }
 863 .corner-banner b{font-family:"Omnes-ATT-W02-Bold"; font-weight:normal; display:inline-block; margin-top:10px;}
 864 body.svg-picker{text-align:center;}
 865 .svg-picker #svg-tiles{padding-top:280px;}
 866 .svg-picker svg{cursor:pointer; max-width:100%; height:100%; position:relative; top:50%; margin:-50px auto auto; fill:#e3e3e3; z-index:0;}
 867 .svg-picker .svg-box{float:left; border:1px solid #ccc; padding:0; margin:10px; height:100px; width:100px;}
 868 .svg-picker .svg-box:hover,
 869 .svg-picker .svg-box.active {background-color:#69b158 !important}
 870
 871 #preview{position:relative; display:block;}
 872 #preview svg{max-width:180px; }
 873 .svg-picker .row{position:relative; top:0; margin:0 auto; padding:0 40px; }
 874 [id*="pgraph"]{text-align:center; width:100%; font-size:38px; color:orange; font-family:"Omnes-ATT-W02-Medium-Italic"; margin-top:20px; padding-left:15px; padding-right:15px;}
 875 [id*="pgraph"] span{font-size:26px; color:#333;}
 876 .introtext{font-family:'Omnes-ATT-W02-Light'; font-size:20px; line-height:normal; display:block; height:100px; transition:height 1s ease 0s; transition:opacity 1s linear 0s; }
 877
 878 .svg-picker .svg-20px{height:20px !important; width:20px !important; margin-top:-10px;}
 879 .svg-picker .svg-24px{height:24px !important; width:24px !important; margin-top:-12px;}
 880 .svg-picker .svg-28px{height:28px !important; width:28px !important; margin-top:-14px;}
 881 .svg-picker .svg-32px{height:32px !important; width:32px !important; margin-top:-16px;}
 882 .svg-picker .svg-36px{height:36px !important; width:36px !important; margin-top:-18px;}
 883 .svg-picker .svg-40px{height:40px !important; width:40px !important; margin-top:-20px;}
 884 .svg-picker .svg-44px{height:44px !important; width:44px !important; margin-top:-22px;}
 885 .svg-picker .svg-48px{height:48px !important; width:48px !important; margin-top:-24px;}
 886 .svg-picker .svg-52px{height:52px !important; width:52px !important; margin-top:-26px;}
 887 .svg-picker .svg-56px{height:56px !important; width:56px !important; margin-top:-28px;}
 888 .svg-picker .svg-60px{height:60px !important; width:60px !important; margin-top:-30px;}
 889 .svg-picker .svg-64px{height:64px !important; width:64px !important; margin-top:-32px;}
 890 .svg-picker .svg-68px{height:68px !important; width:68px !important; margin-top:-34px;}
 891 .svg-picker .svg-72px{height:72px !important; width:72px !important; margin-top:-36px;}
 892 .svg-picker .svg-76px{height:76px !important; width:76px !important; margin-top:-38px;}
 893 .svg-picker .svg-80px{height:80px !important; width:80px !important; margin-top:-40px;}
 894 .svg-picker .svg-84px{height:84px !important; width:84px !important; margin-top:-42px;}
 895 .svg-picker .svg-88px{height:88px !important; width:88px !important; margin-top:-44px;}
 896 .svg-picker .svg-92px{height:92px !important; width:92px !important; margin-top:-46px;}
 897 .svg-picker .svg-96px{height:96px !important; width:96px !important; margin-top:-48px;}
 898 .svg-picker .svg-100px{height:100px !important; width:100px !important; margin-top:-50px;}
 899
 900
 901 .svg-picker .svg-color1, .svg-picker .svg-color1 path {fill:#666666 !important}
 902 .svg-picker .svg-color2, .svg-picker .svg-color2 path {fill:#0574ac !important}
 903 .svg-picker .svg-color3, .svg-picker .svg-color3 path {fill:#cf2a2a !important}
 904 .svg-picker .svg-color4, .svg-picker .svg-color4 path {fill:#000000 !important}
 905 .svg-picker .svg-color5, .svg-picker .svg-color5 path {fill:#ffffff !important}
 906 #nameBox[readonly]{ background-color:#69B158; color:white; overflow:hidden; text-align:center; border:1px solid #ccc; border-radius:15px; padding:20px; font-size:11px; font-family:Consolas, "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", Monaco, "Courier New", monospace;
 907    -webkit-background-clip: padding-box;
 908   -moz-background-clip:    padding;
 909   background-clip:         padding-box;
 910 }
 911 #code{margin-bottom:60px}
 912 @media (max-width:767px){
 913    body.svg-picker .row{
 914       width:100%;
 915    }
 916    [id*="pgraph"] span{ font-size:16px; color:#666; text-shadow:none; margin-top:15px; display:block;}
 917    .introtext.scrolled{opacity:0; height:0; transition:all 1s linear 0s; }
 918    #code{margin-bottom:20px;}
 919 }
 920
 921 .doctype{color:#666;}
 922 .highlight{background-color:yellow}
 923
 924 #atlwdg-container {
 925     left: 0 !important;
 926     margin-left: 0 !important;
 927     margin-top: 0 !important;
 928     position: absolute !important;
 929     right: 0 !important;
 930     top: 0;
 931     width: 100% !important;
 932 }
 933
 934 .skiplink{
 935    color: #fff;
 936    font-size: 1.2rem;
 937    left: 50%;
 938    outline: 1px dotted white;
 939    padding: 0 10px;
 940    position: fixed;
 941    text-align: center;
 942    top: 0;
 943    visibility:visible;
 944    z-index:-1;
 945 }
 946 .skiplink:focus {
 947     visibility:visible;
 948     z-index:auto;
 949 }
 950 .ddh-tabs li{
 951    border-left:1px solid #ccc !important;
 952    border-right:1px solid #ccc;
 953 }
 954 .ddh-tab-pane{border:1px solid #ccc !important;}
 955
 956 code,
 957 pre {
 958   font-family: Monaco, Menlo, Consolas, "Courier New", monospace;
 959   font-size:11px;
 960   color: #333333;
 961   border-radius: 3px;
 962 }
 963 code {
 964   padding: 2px 4px;
 965   color: #d14;
 966   background-color: #f7f7f9;
 967   border: 1px solid #e1e1e8;
 968   sword-wrap:break-word;
 969 }
 970 pre {
 971    padding: 9.5px;
 972    word-break: break-all;
 973    word-wrap: break-word;
 974    white-space: pre;
 975    white-space: pre-wrap;
 976    background-color: #f5f5f5;
 977    border-radius: 5px;
 978 }
 979
 980 .pagelegend{
 981    border:1px solid #ccc;
 982    border-radius:8px;
 983    float:right;
 984    padding:10px 15px;
 985    background-color:#fcfcfc;
 986    display:inline-block;
 987    min-width:230px;
 988    margin:0 0 20px 20px;
 989 }
 990 .pagelegend li{
 991    font-size:1.4rem;
 992 }
 993 .pagelegend ul li + li{margin-top:0;}
 994 .pagelegend + p{margin-top:30px;}
 995 [class*="data-hide-at"]{visibility:hidden;}
 996
 997 /********************* Phone number input - START *********************/
 998 input.b2b-phone-mask-input, input.b2b-phone-mask-input:hover, input.b2b-phone-mask-input:focus {
 999     padding-right: 15px;
1000 }
1001 /********************* Phone number input - END *********************/
1002
1003
1004 .b2b-header-tabs .header__item.profile .profile-info{
1005     border: 1px solid #d3d3d3;
1006     max-width:400px;
1007     width:300px;
1008     padding: 20px;
1009     pointer-events: auto;
1010     -webkit-box-sizing: border-box;
1011     -moz-box-sizing: border-box;
1012     box-sizing: border-box;
1013     font-size: 16px;
1014     -webkit-transition: opacity .2s ease-out;
1015     -moz-transition: opacity .2s ease-out;
1016     transition: opacity .2s ease-out;
1017     background: #fff;
1018     border-radius: 5px;
1019     box-shadow: 0 5px 6px 0 rgba(0,0,0,.25);
1020     color: #333;
1021     line-height: 20px;
1022     position: absolute;
1023     left:-123px;
1024     top:38px;
1025     display:none;
1026 }
1027 .b2b-header-tabs .header__item.profile .profile-info.open{
1028   display:block;
1029 }
1030 .b2b-header-tabs .header__item.profile .profile-info label{
1031     font-family:Omnes-ATT-W02;
1032     display:block;
1033     margin-top:20px;
1034 }
1035 .b2b-header-tabs .header__item.profile .profile-info span{
1036     font-family:Omnes_ATTW02Medium;
1037     display:block;
1038 }
1039
1040 .b2b-header-tabs i.caret{
1041     position:absolute;
1042     top:-7px;
1043     left:50%;
1044 }
1045 .b2b-header-tabs i.caret:before{
1046     content:"";
1047     border-left: 8px solid transparent;
1048     border-right: 8px solid transparent;
1049     border-bottom: 8px solid #d3d3d3;
1050     position:absolute;
1051     top:-1px;
1052
1053 }
1054 .b2b-header-tabs i.caret:after{
1055     content:"";
1056     border-left: 8px solid transparent;
1057     border-right: 8px solid transparent;
1058     border-bottom: 8px solid #fff;
1059     position:absolute;
1060 }
1061
1062 /******* Breadcrumbs *********/
1063 .breadcrumb-css-override > li {
1064     margin-right: 24px;
1065 }
1066 .breadcrumb-css-override li > * {
1067     float: left !important;
1068 }
1069
1070 /******* CHANGELOG ******/
1071 /* TODO: Need to rewrite this with new b2b */
1072 .changelog {
1073   font-family: "Omnes-ATT-W02";
1074   font-size: 16px;
1075   margin-left: 20%;
1076   margin-right: 20%;
1077 }
1078 .changelog .row {
1079   display: block;
1080 }
1081 .changelog h1 {
1082   border-top: 1px solid #e2e2e2;
1083   padding-top: 10px;
1084 }
1085 .changelog h1:first-of-type {
1086   border-top: none;
1087   padding-top: 0px;
1088 }
1089
1090 #fixed, #added, #changed {
1091
1092 }
1093
1094 #breaking-change {
1095   color: red;
1096   text-transform: uppercase;
1097 }
1098
1099 .slide-reveal {
1100     margin-top: 10px;
1101 }
1102
1103 /*nav*/
1104
1105 .nav {
1106     margin-bottom: 20px;
1107     margin-left: 0;
1108     list-style: none;
1109 }
1110
1111 .nav > li > a {
1112     display: block;
1113 }
1114
1115 .nav > li > a:hover,
1116 .nav > li > a:focus {
1117     text-decoration: none;
1118     background-color: #eeeeee;
1119 }
1120
1121 .nav > li > a > img {
1122     max-width: none;
1123 }
1124
1125 .nav > .pull-right {
1126     float: right;
1127 }
1128
1129 .nav-header {
1130     display: block;
1131     padding: 3px 15px;
1132     font-size: 11px;
1133     font-weight: bold;
1134     line-height: 20px;
1135     color: #999999;
1136     text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
1137     text-transform: uppercase;
1138 }
1139
1140 .nav li + .nav-header {
1141     margin-top: 9px;
1142 }
1143
1144 .nav-list {
1145     padding-right: 15px;
1146     padding-left: 15px;
1147     margin-bottom: 0;
1148 }
1149
1150 .nav-list > li > a,
1151 .nav-list .nav-header {
1152     margin-right: -15px;
1153     margin-left: -15px;
1154     text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
1155 }
1156
1157 .nav-list > li > a {
1158     padding: 3px 15px;
1159 }
1160
1161 .nav-list > .active > a,
1162 .nav-list > .active > a:hover,
1163 .nav-list > .active > a:focus {
1164     color: #ffffff;
1165     text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.2);
1166     background-color: #0088cc;
1167 }
1168
1169 .nav-list [class^="icon-"],
1170 .nav-list [class*=" icon-"] {
1171     margin-right: 2px;
1172 }
1173
1174 .nav-list .divider {
1175     *width: 100%;
1176     height: 1px;
1177     margin: 9px 1px;
1178     *margin: -5px 0 5px;
1179     overflow: hidden;
1180     background-color: #e5e5e5;
1181     border-bottom: 1px solid #ffffff;
1182 }
1183
1184 .nav-tabs,
1185 .nav-pills {
1186     *zoom: 1;
1187 }
1188
1189 .nav-tabs:before,
1190 .nav-pills:before,
1191 .nav-tabs:after,
1192 .nav-pills:after {
1193     display: table;
1194     line-height: 0;
1195     content: "";
1196 }
1197
1198 .nav-tabs:after,
1199 .nav-pills:after {
1200     clear: both;
1201 }
1202
1203 .nav-tabs > li,
1204 .nav-pills > li {
1205     float: left;
1206 }
1207
1208 .nav-tabs > li > a,
1209 .nav-pills > li > a {
1210     padding-right: 12px;
1211     padding-left: 12px;
1212     margin-right: 2px;
1213     line-height: 14px;
1214 }
1215
1216 .nav-tabs {
1217     border-bottom: 1px solid #ddd;
1218 }
1219
1220 .nav-tabs > li {
1221     margin-bottom: -2px;
1222 }
1223
1224 .nav-tabs > li > a {
1225     padding-top: 8px;
1226     padding-bottom: 8px;
1227     line-height: 20px;
1228     border: 1px solid transparent;
1229     -webkit-border-radius: 4px 4px 0 0;
1230     -moz-border-radius: 4px 4px 0 0;
1231     border-radius: 4px 4px 0 0;
1232 }
1233
1234 .nav-tabs > li > a:hover,
1235 .nav-tabs > li > a:focus {
1236     border-color: #eeeeee #eeeeee #dddddd;
1237 }
1238
1239 .nav-tabs > .active > a,
1240 .nav-tabs > .active > a:hover,
1241 .nav-tabs > .active > a:focus {
1242     color: #555555;
1243     cursor: default;
1244     background-color: #ffffff;
1245     border: 1px solid #ddd;
1246     border-bottom-color: transparent;
1247 }
1248
1249 .well {
1250     background-color: #ffffff;
1251     border: 1px solid #e3e3e3;
1252     border-radius: 4px;
1253     box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05) inset;
1254     margin-bottom: 20px;
1255     min-height: 20px;
1256     padding: 19px;
1257 }
1258 /************************** Overrides for Top Navigation ends ***************************/
1259
1260 /****** Icon ref page ******/
1261 .b2b-icons-size {
1262     font-size:16px;
1263     display: inline-block;
1264     width: 15%;
1265     box-sizing: border-box;
1266     vertical-align: top;
1267     padding: 20px;
1268     margin-bottom: 20px;
1269     cursor: default;
1270     min-height: 130px;
1271     position: relative;
1272     overflow: hidden;
1273     border: 1px solid transparent;
1274     -webkit-border-radius: 3px;
1275     -moz-border-radius: 3px;
1276     border-radius: 3px;
1277     -webkit-transition: all .2s ease-out;
1278     -moz-transition: all .2s ease-out;
1279     transition: all .2s ease-out;
1280 }
1281 .b2b-icons-size:hover {
1282     background: #fff;
1283     color: #199DDF;
1284     border-color: #d3d3d3;
1285 }
1286 .b2b-icons-size i:before, i:after {
1287     text-align: initial;
1288 }
1289 .b2b-icons-header {
1290     margin-bottom: 40px;
1291 }
1292 .b2b-icons-size span {
1293     margin-top: 15px;
1294     display: block;
1295 }
1296 .b2b-bc-naming {
1297     float: right;
1298     margin-top: 5px;
1299 }
1300 .b2b-icons-alignment {
1301     margin: 4% 8%;
1302 }
1303 .b2b-icons-alignment .ds2.heading-group {
1304     margin-top: 5px;
1305 }
1306 /****** End - Icon ref page ******/
1307
1308 /****** Start - Listbox Demo ******/
1309 .listbox-list {
1310     outline: 0px none;
1311     overflow-x: hidden;
1312     width: 200px;
1313     position: relative;
1314     height: 300px;
1315     border: 1px solid #333;
1316     border-radius: 6px;
1317     margin-bottom: 10px;
1318 }
1319 /****** End - Listbox Demo ******/
1320
1321
1322
1323 /******** Start - Scroll to Top ********/
1324 .b2b-scroll-speed-label {
1325     margin-left: 30px;
1326 }
1327 .b2b-scroll-speed {
1328     margin-left: 5px;
1329 }
1330 /******** End - Scroll to Top ********/
1331
1332 /********************* Cato verification box starts ******************/
1333 .cato-verification-approved, .cato-verification-pending {
1334     background-color: #fff;
1335     border: 1px solid #1b7e28;
1336     border-radius: 6px;
1337     color: #333;
1338     line-height: 1;
1339     margin-top: 18px;
1340     padding: 5px 10px;
1341     text-align: center;
1342     font-size: 1.6rem;
1343 }
1344 .cato-verification-pending {
1345     border-color: #ef6f00;
1346 }
1347 .description .downloads {
1348     margin-bottom: 5px;
1349 }
1350 /********************* Cato verification box Ends ********************/
1351
1352 .form-search {
1353     margin-top: 15px;
1354 }
1355
1356 .att-timeline .timeline-dot .above-info-box .info-container .date {
1357     font-size: 14px;
1358     color: #444;
1359     line-height: 20px;
1360     position: relative;
1361     width: 100%
1362 }
1363
1364 .form-search .search-query {
1365     width: 80% !important;
1366 }
1367
1368 /********************* Grids Demo ********************/
1369
1370 .b2b-grid-reference > .container {
1371   background: #0574ac;
1372   padding: 30px;
1373   margin-bottom: 20px;
1374 }
1375
1376 .b2b-grid-reference .row > [class*='span']:last-of-type {
1377   margin-right: 0px !important;
1378 }
1379
1380 .b2b-grid-reference .row {
1381   margin-bottom: 12px;
1382 }
1383
1384 .b2b-grid-reference .row [class*='span'] {
1385   float: left;
1386 }
1387
1388 .b2b-grid-reference .row [class*='span'] {
1389   background: #fff;
1390   color: #000;
1391   text-align: center;
1392   padding: 10px 0;
1393   box-shadow: 2px 2px 3px #000;
1394 }
1395
1396 .b2b-grid-reference .row:after {
1397   content: '';
1398   display: table;
1399   clear: both;
1400 }
1401
1402 .b2b-grid-reference .row:last-of-type {
1403   margin-bottom: 0px;
1404 }
1405
1406 .b2b-offset-column .row {
1407   margin-bottom: 12px;
1408 }
1409
1410 .b2b-offset-column .row:first-of-type {
1411   margin-top: 10px;
1412 }
1413
1414 .b2b-offset-column .row > [class*='span']{
1415   margin-right: 0px !important;
1416   padding: 10px;
1417 }
1418
1419 .b2b-offset-column .row [class*='span'] {
1420   background: #0574ac;
1421   color: #fff;
1422   text-align: center;
1423   padding: 10px 0;
1424 }
1425
1426 .b2b-headings-style, b2b-headings-specs {
1427   display: inline-block;
1428 }
1429
1430 .b2b-headings-specs-container {
1431   background-color: #eeeeee;
1432   padding: 10px;
1433 }
1434
1435 .b2b-headings-container:not(:last-of-type) {
1436   margin-bottom: 20px;
1437 }
1438 /********************* Redline Debug Classes **********************/
1439 .redline{
1440     border: 1px solid red !important;
1441 }
1442 .redlines *{
1443     border: 1px solid red !important;
1444 }
1445
1446 .hidden-drag-ghost {
1447   opacity: 0;
1448 }
1449
1450 .settings-icon {
1451   display: inline-block;
1452   font-size: 26px;
1453   color: #0568ae;
1454   margin-bottom: 10px;
1455 }
1456 .settings-icon .flyout-link {
1457   font: regular;
1458   color: #0568ae;
1459   size: 16px;
1460   margin-top: 15px;
1461 }
1462 .settings-icon .dashboard-name {
1463   text-align: left;
1464   margin-bottom: 15px;
1465 }
1466 .settings-icon .dashboard-name .name {
1467   margin-bottom: 10px;
1468 }
1469 .settings-icon .dashboard-name input {
1470   width: 280px !important;
1471 }
1472 .settings-icon .form-row {
1473   margin-top: -10px;
1474 }
1475 .settings-icon .b2b-flyout-container {
1476   width: 310px;
1477 }
1478 .flyoutselect p {
1479   margin: 0 0 15px 0;
1480 }