From 19a11640b3ed8d770fd1cb6f296c4c0e793cdb2a Mon Sep 17 00:00:00 2001
From: GuangrongFu <fu.guangrong@zte.com.cn>
Date: Tue, 18 Sep 2018 17:30:18 +0800
Subject: Changed the Style of GUI

Change-Id: Ie30363f6358639c660f49585aa03d243b560e444
Issue-ID: HOLMES-148
Signed-off-by: GuangrongFu <fu.guangrong@zte.com.cn>
---
 .../src/assets/framework/browser/style/docs.css    | 1480 ++++++++++++++++++++
 1 file changed, 1480 insertions(+)
 create mode 100644 rulemgt-frontend/src/assets/framework/browser/style/docs.css

(limited to 'rulemgt-frontend/src/assets/framework/browser/style/docs.css')

diff --git a/rulemgt-frontend/src/assets/framework/browser/style/docs.css b/rulemgt-frontend/src/assets/framework/browser/style/docs.css
new file mode 100644
index 0000000..d5ff754
--- /dev/null
+++ b/rulemgt-frontend/src/assets/framework/browser/style/docs.css
@@ -0,0 +1,1480 @@
+/* hide site until we know if they are logged in or not */
+html{opacity:0; visibility:hidden;}
+html[data-signed-in="true"]{opacity:1; visibility:visible;}
+/* end hide until we know if they are logged in or not */     
+
+/***** b2bTryme *****/ 
+.b2b-tryme {
+  width: 100%;
+  max-width: 100% !important;
+}
+
+/***** Remove usage section but not parameters section****/
+.usage .prettyprint {
+  display:none;
+}
+h2#example {
+  display: none;
+}
+h2#usage {
+  display: none;
+}
+
+#usage ol.linenums {
+  display:none;
+}
+/******ngDocs overrides*****/
+.variables-matrix .type-hint {
+  background: transparent !important;
+}
+/******Welcome Page*****/
+.portal-switcher {
+  float: left;
+  margin-top: 20px;
+  margin-right: 10px;
+}
+/* Universal NAV */
+.navbar{height:85px; width:100%; background-color:#222;}
+.navbar button{background-color:transparent; border:none !important; margin:5px -10px 0 0 !important; padding:0 !important; min-width:55px !important; display:none !important}
+.navbar:before, .navbar:after { display: table; content: ""; line-height: 0; }
+.navbar:after { clear: both; }
+.navInner{height:85px; overflow:hidden}
+.navbar .container{height:85px; transition:none;}
+.navbar .container:after {
+    content: "";
+    display: block;
+    height: 0;
+    position: relative;
+    top: 85px;
+}
+.brand {
+    color: #ffffff;
+    display: block;
+    float: left;
+    font-family: "Omnes-ATT-W02-Light";
+    font-size: 2.3rem;
+    height: 45px;
+    line-height: 44px;
+    margin: 20px 0 0 -5px;
+    padding: 0 15px 0 5px;
+    position: absolute;
+}
+.brand:active{color:#fff;}
+.brand sup {
+    color: #fcb314;
+    font-family: "Omnes-ATT-W02";
+    font-size: 1.4rem;
+    position: relative;
+    right: 0;
+    top: 12px;
+}
+.brand:hover,
+.brand:focus{text-decoration:none;}
+.brand:focus{outline:1px dotted white;}
+.brand .icon-att-globe {
+    color: #44c7f5;
+    float: left;
+    font-size: 44px;
+    left: -2px;
+    margin-right:25px;
+    position: relative;
+    top: 0;
+}
+.brand strong {
+    font-family: "Omnes-ATT-W02-Medium";
+    font-weight: normal;
+}
+.navbar button {
+    border: medium none;
+    border-radius: 0;
+    color: #fff;
+    font-family: "Omnes-ATT-W02-Medium";
+    font-size: 3rem;
+    height: 45px;
+    margin: 0 -10px 0 0;
+    outline-offset: 0 !important;
+    padding: 0;
+    text-align: center;
+    top: 0;
+    width: 45px;
+}
+.navbar button:hover,
+.navbar button:focus{
+    outline-offset: 0 !important;
+}
+.navbar button:focus {
+    outline:1px dotted white !important;
+}
+
+/* UNIVERSAL NAV */
+#nav-menu {
+    display: block;
+    float: right;
+    height: 85px;
+    width: auto;
+    position:relative;
+    padding-bottom:20px;
+}
+#nav-menu li {
+    display: block;
+    float: left;
+    height: 45px;
+    margin: 22px 0 0;
+}
+
+.navbar li a {
+    color:#fff;
+    display: block;
+    font-family: "Omnes-ATT-W02";
+    font-size: 1.6rem;
+    height:100%;
+    line-height:1;
+    text-align: center; 
+    transition:all .3s linear 0s;   
+}
+.navbar li a:focus{outline:1px dotted white; text-decoration:none;}
+.navbar li a:hover{outline:none; text-decoration:none;}
+
+/* 1012015 */
+.navbar li a:focus,
+.navbar li a:hover{
+   transition:color .3s linear 0s;
+   color:#44c8f5;
+}
+/* END 1012015 */
+
+.navbar li a div,
+.stickynav li a div{
+    color: transparent;
+    display: block;
+    font-family: "Omnes-ATT-W02-Medium";
+    font-size: inherit;
+    height: 2px;
+    margin: 0 10px;
+    overflow: hidden;
+    padding: 0;
+    position: relative;
+    text-align: center;
+    top: 6px;
+    opacity:0;
+    visibility:hidden;
+}
+
+body:not(#home) .navbar li a div{background-color: transparent;}
+body:not(#home) .navbar li a.active div{
+   background-color: #fcb314;
+   opacity:1;
+   transition:opacity .3s linear .1s;
+   visibility:visible;
+}
+
+#nav-menu li li a {
+   display:none;
+   padding-left:30px;
+}
+#nav-menu li li li a{
+   padding-left:60px;
+}
+
+.top-nav-btn-align {
+  margin-top: 20px !important;
+}
+
+/* THREE LINES OF THE HAMBURGER */
+.btn-menu{display:none}
+.btn-menu .svgIcon-hamburger{
+    border:none;
+    border-top:5px solid #000;
+    content: "";
+    display: table;
+    height: 0;
+    left: 10px;
+    position: relative;
+    top: 0;
+    width: 40px;
+}
+.btn-menu .svgIcon-hamburger{
+   margin-bottom:15px;
+   top:4px;
+}
+
+/* MAIN CONTENT */
+#ddh-fixed-230{
+	background-color:#efefef;
+}
+#ddh-fixed-230 + .fluid-space{
+   padding-top:0;
+}
+#ddh-fixed-230 + .fluid-space > section.content-pad:first-child{
+   margin-top:11px;
+}
+#ddh-fixed-230 + .fluid-space .stickypad{
+	height:85px;
+   position:relative;
+	z-index:100;
+}
+/* STICKY NAV */
+.stickynav {
+  background-color: #ffffff;
+  border-bottom: 1px solid #ccc;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-wrap: wrap;
+      -ms-flex-wrap: wrap;
+          flex-wrap: wrap;
+  position: absolute;
+  top: 46px;
+  width: 100%;
+}
+.stickynav h1 {
+  line-height: 3.8rem;
+  margin: 10px 20px 9px 0;
+  -webkit-flex: 0 1 auto;
+      -ms-flex: 0 1 auto;
+          flex: 0 1 auto;
+}
+.cato-div {
+  -webkit-flex: 2 1 auto !important;
+      -ms-flex: 2 1 auto !important;
+          flex: 2 1 auto !important;
+  margin: 0;
+  padding-right: 20px;
+}
+.heading-page + div,
+.cato-div + div {
+  display: block;
+  -webkit-flex: 1 1 0;
+      -ms-flex: 1 1 0;
+          flex: 1 1 0;
+  margin:0;
+}
+.heading-page + div ul, 
+.cato-div + div ul {
+  -webkit-align-content: space-around;
+      -ms-flex-line-pack: distribute;
+          align-content: space-around;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-flow: row nowrap;
+      -ms-flex-flow: row nowrap;
+          flex-flow: row nowrap;
+  -webkit-justify-content: space-around;
+      -ms-flex-pack: distribute;
+          justify-content: space-around;
+  width: 100%;
+}
+.cato-badge,
+.cato-approved {
+  background-color: #fff;
+  border: 1px solid #1b7e28;
+  border-radius: 6px;
+  color: #1b7e28;
+  float: left;
+  font-size: 1.2rem;
+  line-height: 1;
+  margin-top: 18px;
+  padding: 5px 10px;
+}
+.cato-badge {
+  background-color: #1b7e28;
+  color: #fff;
+  margin-right: 15px;
+}
+.stickynav ul {
+  display: block;
+  float: right;
+  height: 44px;
+  position: relative;
+  right: 15px;
+  top: 5px;
+  margin-bottom: 12px;
+}
+.stickynav li {
+  display: block;
+  float: left;
+  height: 44px;
+  margin: 1px 0 0;
+}
+.stickynav li > a {
+  display: block;
+  /*font-family: "Omnes-ATT-W02-Light";*/
+  font-size: 1.6rem;
+  line-height: 1;
+  margin: 4px 0 0;
+  padding: 11px 15px;
+  text-align: center;
+}
+.stickynav li.active > a {
+  color: #666;
+  font-family: "Omnes-ATT-W02-Medium";
+  /*line-height:1.1;*/
+  /*text-decoration: underline;*/
+}
+.stickynav li > a {
+  text-decoration: none !important;
+}
+.stickynav li a div {
+  transition: opacity 0.3s linear 0.1s;
+}
+.stickynav li.active a div {
+  border-top: 3px solid #0574ac;
+  margin: 0;
+  opacity: 1;
+  padding: 0 10px;
+  top: 17px;
+  visibility: visible;
+  transition: opacity 0.3s linear 0.1s;
+}
+.stickynav.affix {
+   box-shadow:0 5px 20px 20px rgba(255,255,255,1);
+  position: fixed;
+  top: 0;
+  z-index: 9999;
+  margin-top: 0;
+}
+
+
+/*section#overview{margin-top:36px;}*/
+.downloads {
+    display: inline-block;
+    float: right;
+    font-size: 1.4rem;
+    line-height: 0.75;
+    margin: 0 15px 30px 20px;
+    position: relative;
+    text-align: right;
+    top: -15px;
+	 min-width:180px;
+}
+.downloads-box{
+	background-color:#efefef; 
+	margin-top:10px; 
+	padding:15px 15px 5px 15px; 
+	border-radius:7px;
+	font-size:1.6rem;
+}
+.downloads a{line-height:16px;}
+.downloads .downloadicon{vertical-align:middle; display:inline-block; fill: #0574ac; height:20px; width:20px; margin-left:5px; margin-top:-2px;}
+.downloads li{
+	margin-bottom:10px;
+}
+
+h1.primary {
+    border-bottom: 1px solid transparent;    
+}
+h1.landing {
+    border-bottom: 1px solid #ccc;
+    min-height: 58px;
+    line-height: 58px;
+    margin-bottom:30px;
+    margin-top:43px;
+}
+.hr-spacer{margin-top:60px; margin-bottom:60px;}
+      
+/* ******* FOOTER ******* */
+.ddh-footer:before{
+   height:0;
+}
+.ddh-footer{
+   
+   padding-top: 20px;
+   background-color:#222;
+} 
+.link-farm + .ddh-footer{margin-top:0;}  
+.footer-nav,
+.footer-legal,
+.footer-logo{
+   padding-left:40px;
+}
+.footer-legal > p{ line-height:1.4rem;}
+.ddh-footer, 
+.ddh-footer a{
+   color:#fff !important;
+}
+.ddh-footer a:focus{
+   outline:1px dotted white;
+   text-decoration:none;
+}
+.footer-logo {
+    display: table;
+    font-family:"Omnes-ATT-W02-Light";
+    height: 25px;
+    position: relative;
+    font-size:1.6rem;
+    padding:5px 5px 5px 40px;
+}
+.footer-logo:hover,
+.footer-logo:focus{text-decoration:none;}
+.footer-logo b{font-family:"Omnes-ATT-W02-Medium"; font-weight:normal;}
+
+.ddh-footer .icon-att-globe {
+    display: inline-block;
+    color: #44c7f5;
+    font-size:2.5rem;
+    left: 0;
+    margin-right: 16px;
+    position: absolute;
+    top: 3px;
+}
+.footer-nav{line-height:1rem; margin-top:10px; }
+.footer-nav li{font-size:1.0rem; line-height:1; display:inline; padding-right:12px; padding-left:12px; border-left:1px solid #ccc; }
+.footer-nav li:first-child{border-left:none; padding-left:0; }
+
+.footer-nav a {
+    display: inline-block;
+    font-size: 1.2rem;
+    position: relative;
+    margin-top:0;
+    top: 1px;
+}
+.footer-nav a:hover,
+.footer-nav a.active{text-decoration:none;}
+
+.footer-nav a:hover,
+.footer-nav a:focus{
+   transition:color .3s linear 0s;
+   color:#44c8f5 !important;
+}
+.footer-nav a:after {
+   background-color: transparent;
+    bottom: -6px;
+    content: "";
+    display: block;
+    height: 2px;
+    position: absolute;
+    width: 100%;
+    opacity:0;
+}
+.footer-nav a.active:after {
+   opacity:1;
+    background-color:#fcb314;
+    transition:opacity .3s linear 0s;
+}
+/* ************ */
+
+.footer-legal {
+    font-size: 1.1rem;
+    margin-top: 25px;
+    padding-bottom:30px;
+}
+.footer-legal a{
+   font-size:1.1rem;
+   text-decoration:underline;
+}
+.footer-legal a:hover{
+   text-decoration:none;
+}
+
+p.ds2.heading{margin-bottom:30px; line-height:1; color:#666666}
+
+/* CODE SECTION */
+.codebox {
+   background-image: linear-gradient(transparent 50%, #fff 50%);
+   background-size: 40px 40px;
+   padding: 0 0 0 10px !important;
+   overflow-x:hidden; 
+   border-radius:5px 0 5px 5px;
+   background-color:#f5f5f5 !important; 
+   width:100%; 
+   box-sizing:border-box; 
+   min-height:0; 
+   margin-bottom:40px;
+   max-height:300px; 
+   font-size:1.1rem;
+   line-height:20px; 
+   font-family:'Courier New'; 
+   cursor:copy !important;
+   white-space:pre;
+}
+[data-code-id*="ANGULAR"]{
+   margin-bottom:0;
+}
+.selectalllink {
+   font-family:"Omnes-ATT-W02-Medium";
+   border:1px solid #b7b7b7;
+   border-bottom:0;
+   border-radius:5px 5px 0 0;
+   padding:3px 7px;
+   float:right;
+   background-color:#f5f5f5;
+   font-size:11px;
+   margin-bottom:-1px;
+   position:relative;
+}
+.selectalllink.focus{
+   border-color:#0574ac #0574ac transparent;
+   box-shadow: 2px 3px 2px -2px rgba(5, 116, 172, 0.35) inset;
+   transition:all 0.3s linear 0s;
+}
+.selectalllink:after {
+    background: #f5f5f5;
+    bottom: -3px;
+    content: "";
+    display: block;
+    height: 5px;
+    left: 0;
+    position: absolute;
+    width: 100%;
+}
+
+/* EDITORIAL & MARKETING TABLES */
+.ds2-table{width:100%; margin-bottom:40px;}
+.ds2-table th{text-align:left; white-space:nowrap;}
+.ds2-table thead h2{margin:0 0 15px 0}
+.ds2-table:not(.table-bordered) th,
+.ds2-table:not(.table-bordered) tbody td{padding:10px 20px 10px 0; vertical-align:top}
+   
+pre{white-space: pre-wrap; font-size:1.2rem;}
+
+.link-farm{display:table; width:100%; padding-top:60px; }
+.svg-home-button{
+   background-color:transparent;
+   border:none;
+}
+@media (min-width: 768px){
+   .landing-page .text-center p{max-width:620px; margin-left:auto; margin-right:auto; }
+	.nav-links > div{padding:0 10px;}
+   .nav-links p.ds2.heading{text-align:left; margin:0 0 10px;}
+   .nav-links p.ds2.heading + ul.no-bullet{margin-bottom:60px;}
+   .nav-links p.ds2.heading + ul.no-bullet a, ul.no-bullet li > p{font-size:1.4rem}
+	ul.no-bullet li > p{margin-top:8px;}
+   .nav-links ul.no-bullet li{line-height:11px;}
+   .landing-page .request-new-pattern{font-size:2rem; font-family:"Omnes-ATT-W02-Light";}
+   
+   .link-farm{text-align:center; background-color:#f2f2f2; margin-top:60px}
+}
+
+@media (max-width:767px){
+   
+   h1.landing {
+       margin-left: -15px;
+       margin-right: -15px;
+       margin-top:0;
+       padding:17px 15px;
+       line-height:normal;
+   }
+   .link-farm{background-color:#f2f2f2; padding-top:0; }
+   .landing-page + .link-farm{margin-top:0;}
+   .link-farm .nav-links.top-space{margin-top:0 !important}
+   
+   .landing-page .request-new-pattern{font-size:1.6rem; font-family:"Omnes-ATT-W02-Medium";}
+   .landing-page .request-new-pattern a{white-space:nowrap}
+   
+   /* LINK TYPE 2 */
+   .nav-links p.ds2.heading{margin:30px -15px 15px; padding:0 15px;}
+   .nav-links a::after {
+      background-repeat:no-repeat;
+      content: "";
+      display: block;
+      position: absolute;
+      right: 15px;
+      top: 14px;       
+   }
+   .nav-links a {
+       display: block;
+       height: 45px;
+       line-height: 45px;
+       padding: 0 15px;
+       position: relative;
+   }
+   .nav-links ul{margin:0 -15px 0; }
+   .nav-links ul.no-bullet li {
+       border-top: 1px solid #ccc;
+       margin: 0;
+       padding: 0;
+   }
+   .nav-links ul.no-bullet li:last-child{
+      border-bottom:1px solid #ccc;
+   }
+   ul.no-bullet li>p{padding-left: 15px;margin-top: -7px;margin-bottom: 7px;}
+   .svg-home-button{
+      height:40px;
+      width:40px;
+      background-color:transparent;
+   }
+   .top-space{
+      margin-top:20px;
+   }
+
+   #ddh-fixed-230{
+		display:none;
+   }
+   #ddh-fixed-230 + .fluid-space .stickypad{
+		height:20px;
+	}	
+	.stickynav{
+		display:block;
+      top:0;
+      border-width:0;    
+   }
+	.stickynav h1{display:inline-block; margin:10px 20px 5px 0; }
+   .stickynav.affix {height:84px; box-shadow:0 5px 20px 20px rgba(255,255,255,1);}
+	.heading-page + div,
+	.cato-div{ display:inline-block; position:relative; top:5px;}
+	.cato-badge, .cato-approved{display:inline-block; margin-top:0;}
+	.cato-div + div{
+		display:inline-block;
+		width:100%;
+	}
+	.cato-div + div::before {
+		background: #ccc none repeat scroll 0 0;
+		content: "";
+		display: block;
+		height: 44px;
+		position: absolute;
+		right: -15px;
+		width: 150%;
+	}
+	.stickynav ul {
+      background-color: #cccccc;
+      display: block;
+      float: none;
+      margin: 0 0 0 15px;
+      top:0;
+      text-align:center;
+      right:0;
+		left:-15px;
+   }
+   .stickynav li{margin-top:0}
+   .stickynav li > a {
+      height: 40px;
+      line-height: 1;
+      margin: 2px 0 0;
+      padding: 14px 10px 0;
+      width: 100%;
+   }
+   .stickynav li.active a div{top:8px}
+   
+	.downloads{ font-size:1.2rem; top:0; margin:0 0 10px 10px; min-width:auto;}
+	.downloads-box{ font-size:1.4rem; }
+	
+   .toolkit.fluid-space{padding-top:100px;}
+   
+   .selectalllink{display:none;}
+   
+   .ds2-table{border:0;}
+   .ds2-table *{padding:0 !important; border:0 !important;}
+   .ds2-table tr{position:relative;}
+   .ds2-table tbody tr{display:table; margin-bottom:20px; width:100%}
+   .ds2-table tbody tr:last-child{margin-bottom:0;}
+   .ds2-table tbody td{display:table; width:auto;}
+   .ds2-table.table-bullet td{margin-left:20px;}
+   .ds2-table.table-bullet .document:after {
+      background-color: black;
+      border-radius: 50%;
+      content: "";
+      display: table-cell;
+      font-size: 50px;
+      height: 6px;
+      left: 5px;
+      position: absolute;
+      top: 10px;
+      width: 6px;
+   }
+   .ds2-table tbody td:nth-child(3){display:none;}
+   .ds2-table tbody td:nth-child(4){float:left; margin-right:10px; }
+   .ds2-table tbody td:nth-child(5){float:left; }
+   .ds2-table tbody td:nth-child(5):not(:empty):before{content:"(";}
+   .ds2-table tbody td:nth-child(5):not(:empty):after{content:")";}
+   
+   .ds2-table thead .border th{display:none;}
+   .ds2-table thead .border{border-top:1px solid #ccc;}
+   .ds2-table thead h2{margin:0 0 20px;}
+   .ds2-table tbody + thead h2{margin:30px 0 20px;}
+   .ds2-table thead hr{margin-bottom:0}
+   .ds2-table tbody{padding-top:20px;}
+   
+   
+   /* FOOTER */
+   /*.ddh-footer{padding-top:20px; margin-top:20px;}*/
+   .ddh-footer.top-space{margin-top:0 !important}
+   .ddh-footer .container{padding-left:0; padding-right:0;}
+   .footer-logo{margin-left:10px;}
+   .footer-nav{margin-top:15px}
+   .footer-nav,
+   .footer-legal {
+      padding-left:0;
+   }
+   .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}
+   .footer-nav li:first-child{border-left:none; padding-left:0;border-top:1px solid #aaa;}
+   .footer-nav li a{position:relative;padding-left:10px; padding-right:10px; outline-offset:-2px; top:0}
+   
+   body:not(#home) .footer-nav a.active:after,
+   body:not(#home) .footer-nav a:hover:after {
+      background-color: transparent !important;
+      border-bottom: 2px solid #fcb314;
+      bottom: 0;
+      color: transparent;
+      content: attr(title) "";
+      display: inline;
+      height: inherit;
+      left: 10px;
+      width: auto;
+   }
+   body:not(#home) .footer-nav a:after {width:auto;}
+   .footer-nav a {
+      font-size:1.8rem;
+      display: block;
+      font-size: 1.8rem;
+      position:static;            
+   }
+   .footer-nav a:hover:after,
+   .footer-nav a.active:after {
+      display:none;
+   }
+   
+   .footer-legal {
+      margin-top: 15px; 
+      padding:0 10px 10px;            
+   }
+   .footer-legal a{text-decoration:underline;} 
+   .footer-legal a:focus{text-decoration:none;}
+}
+
+@media (min-width: 481px) and (max-width: 767px){
+   .stickynav h1{ margin:10px 20px 5px 0}
+}
+@media (max-width: 1020px) {
+   .navbar li a{font-size:1.4rem; padding:16px 5px; transition:all .3s linear 0s;}
+}
+@media (max-width: 910px) {
+   .fixed-230-subnav.affix{margin:2px 0 0}
+	.navbar button{display:inline-block !important}
+   .navbar,
+   .navInner,
+   .navbar .container{height:55px; }
+   .brand{font-size:2.0rem; line-height:33px; height:33px; margin-top:11px; padding-right:10px;}
+   .brand:focus{outline:1px dotted white;}
+   .brand .icon-att-globe {
+       font-size:33px;
+       left: -3px;
+       margin-right: 10px;
+       top: 0;
+   }
+   .btn-menu{display:block;}
+   #nav-menu > ul{display:none;}
+   #nav-menu{
+      top: 46px; 
+      width:100%;      
+   }   
+   #nav-menu[aria-hidden="true"] {
+      height:0;
+   }
+   .btn-menu + #nav-menu{
+      height:0;
+   }
+   
+   /* MENU ARROW */
+   #nav-menu[aria-expanded="false"] .menu-arrow { display:none; }
+   #nav-menu[aria-expanded="true"] .menu-arrow {
+       background-color: #222;
+       border: 1px solid #777;
+       display:block;
+       height: 10px;
+       position: absolute;
+       right: 28px;
+       top: -5px;
+       transform: rotate(45deg);
+       width: 10px;
+       z-index: 1;
+   }
+   #nav-menu[aria-expanded="true"] .menu-arrow:after {
+       background-color: #222;
+       content: "";
+       display: block;
+       height: 10px;
+       position: relative;
+       right: 0;
+       top: 0;
+       width: 10px;
+   }
+   
+   #nav-menu li a{ text-align:left; line-height:normal; }   
+   #nav-menu[aria-expanded="true"]{
+      height:auto;
+      background-color: #222;
+      overflow:visible;
+      left: 0;
+      position: absolute;
+      top: 55px;
+      width: 100% !important;
+      z-index: 9999;
+      box-shadow:0 10px 5px -5px rgba(0,0,0,.5);
+   }
+   #nav-menu[aria-expanded="true"] ul{ display:block; }
+   #nav-menu[aria-expanded="true"] li{ position:relative; margin:0; display:block; border-bottom:1px solid #777; float:none; height:auto; overflow:visible; }
+   #nav-menu[aria-expanded="true"] li:first-child{border-top:1px solid #777;}
+   #nav-menu[aria-expanded="true"] ul ul{display:none;}
+   #nav-menu[aria-expanded="true"] li a{position:relative; height:42px; display:block; color:#fff; padding:0 16px; line-height:41px;}
+   #nav-menu[aria-expanded="true"] li li a{
+      padding-left:30px;
+   }
+   #nav-menu[aria-expanded="true"] li li li a{ padding-left:45px;}
+   body:not(#home) #nav-menu[aria-expanded="true"] li a div {
+       margin: 0;
+       position: absolute;
+       top: inherit;
+   }
+   
+   .stickynav li{
+      display:inline-block;
+      float:none;
+   }
+}
+.cato-div.hide{display: none;}
+.cato-div .cato-draft{background-color:#cf2a2a; border:1px solid #cf2a2a;}
+
+
+
+
+/* junk to delete later*/
+.versionspan {
+   font-size:1rem;
+   word-spacing:1rem;
+   color:#999;
+}
+.versionspan a {
+   font-size:1rem;
+   word-spacing:normal;
+   color:blue;
+}
+
+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}
+
+
+/* SVG PICKER */
+.corner-banner {
+   font-family:"Omnes-ATT-W02-Medium";
+   position:fixed;
+    background-color: yellow;
+    border: 1px solid;
+    color: red;
+    font-size: 1rem;
+    height: 160px;
+    line-height: 1rem;
+    margin-left: -80px;
+    margin-top: -80px;
+    padding: 100px 0 0;
+    transform: rotate(-45deg);
+    width: 160px;
+}
+.corner-banner b{font-family:"Omnes-ATT-W02-Bold"; font-weight:normal; display:inline-block; margin-top:10px;}
+body.svg-picker{text-align:center;}
+.svg-picker #svg-tiles{padding-top:280px;}
+.svg-picker svg{cursor:pointer; max-width:100%; height:100%; position:relative; top:50%; margin:-50px auto auto; fill:#e3e3e3; z-index:0;}
+.svg-picker .svg-box{float:left; border:1px solid #ccc; padding:0; margin:10px; height:100px; width:100px;}
+.svg-picker .svg-box:hover,
+.svg-picker .svg-box.active {background-color:#69b158 !important}
+
+#preview{position:relative; display:block;}
+#preview svg{max-width:180px; }
+.svg-picker .row{position:relative; top:0; margin:0 auto; padding:0 40px; }
+[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;}
+[id*="pgraph"] span{font-size:26px; color:#333;}
+.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; }
+
+.svg-picker .svg-20px{height:20px !important; width:20px !important; margin-top:-10px;}
+.svg-picker .svg-24px{height:24px !important; width:24px !important; margin-top:-12px;}
+.svg-picker .svg-28px{height:28px !important; width:28px !important; margin-top:-14px;}
+.svg-picker .svg-32px{height:32px !important; width:32px !important; margin-top:-16px;}
+.svg-picker .svg-36px{height:36px !important; width:36px !important; margin-top:-18px;}
+.svg-picker .svg-40px{height:40px !important; width:40px !important; margin-top:-20px;}
+.svg-picker .svg-44px{height:44px !important; width:44px !important; margin-top:-22px;}
+.svg-picker .svg-48px{height:48px !important; width:48px !important; margin-top:-24px;}
+.svg-picker .svg-52px{height:52px !important; width:52px !important; margin-top:-26px;}
+.svg-picker .svg-56px{height:56px !important; width:56px !important; margin-top:-28px;}
+.svg-picker .svg-60px{height:60px !important; width:60px !important; margin-top:-30px;}
+.svg-picker .svg-64px{height:64px !important; width:64px !important; margin-top:-32px;}
+.svg-picker .svg-68px{height:68px !important; width:68px !important; margin-top:-34px;}
+.svg-picker .svg-72px{height:72px !important; width:72px !important; margin-top:-36px;}
+.svg-picker .svg-76px{height:76px !important; width:76px !important; margin-top:-38px;}
+.svg-picker .svg-80px{height:80px !important; width:80px !important; margin-top:-40px;}
+.svg-picker .svg-84px{height:84px !important; width:84px !important; margin-top:-42px;}
+.svg-picker .svg-88px{height:88px !important; width:88px !important; margin-top:-44px;}
+.svg-picker .svg-92px{height:92px !important; width:92px !important; margin-top:-46px;}
+.svg-picker .svg-96px{height:96px !important; width:96px !important; margin-top:-48px;}
+.svg-picker .svg-100px{height:100px !important; width:100px !important; margin-top:-50px;}
+         
+
+.svg-picker .svg-color1, .svg-picker .svg-color1 path {fill:#666666 !important}
+.svg-picker .svg-color2, .svg-picker .svg-color2 path {fill:#0574ac !important}
+.svg-picker .svg-color3, .svg-picker .svg-color3 path {fill:#cf2a2a !important}
+.svg-picker .svg-color4, .svg-picker .svg-color4 path {fill:#000000 !important}
+.svg-picker .svg-color5, .svg-picker .svg-color5 path {fill:#ffffff !important}
+#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;
+   -webkit-background-clip: padding-box; 
+  -moz-background-clip:    padding; 
+  background-clip:         padding-box;
+}
+#code{margin-bottom:60px}
+@media (max-width:767px){
+   body.svg-picker .row{
+      width:100%;
+   }
+   [id*="pgraph"] span{ font-size:16px; color:#666; text-shadow:none; margin-top:15px; display:block;}
+   .introtext.scrolled{opacity:0; height:0; transition:all 1s linear 0s; }
+   #code{margin-bottom:20px;}
+}
+
+.doctype{color:#666;}
+.highlight{background-color:yellow}
+
+#atlwdg-container {
+    left: 0 !important;
+    margin-left: 0 !important;
+    margin-top: 0 !important;
+    position: absolute !important;
+    right: 0 !important;
+    top: 0;
+    width: 100% !important;
+}
+
+.skiplink{
+   color: #fff;
+   font-size: 1.2rem;
+   left: 50%;
+   outline: 1px dotted white;
+   padding: 0 10px;
+   position: fixed;
+   text-align: center;
+   top: 0;
+   visibility:visible;
+   z-index:-1;
+}
+.skiplink:focus {
+    visibility:visible;
+    z-index:auto;
+}
+.ddh-tabs li{
+   border-left:1px solid #ccc !important;
+   border-right:1px solid #ccc;
+}
+.ddh-tab-pane{border:1px solid #ccc !important;}
+
+code,
+pre {
+  font-family: Monaco, Menlo, Consolas, "Courier New", monospace;
+  font-size:11px;
+  color: #333333;
+  border-radius: 3px;
+}
+code {
+  padding: 2px 4px;
+  color: #d14;
+  background-color: #f7f7f9;
+  border: 1px solid #e1e1e8;
+  sword-wrap:break-word;
+}
+pre {
+   padding: 9.5px;
+   word-break: break-all;
+   word-wrap: break-word;
+   white-space: pre;
+   white-space: pre-wrap;
+   background-color: #f5f5f5;
+   border-radius: 5px;
+}
+
+.pagelegend{
+   border:1px solid #ccc; 
+   border-radius:8px;
+   float:right;
+   padding:10px 15px;
+   background-color:#fcfcfc;
+   display:inline-block;
+   min-width:230px;
+   margin:0 0 20px 20px;
+}
+.pagelegend li{
+   font-size:1.4rem;
+}
+.pagelegend ul li + li{margin-top:0;}
+.pagelegend + p{margin-top:30px;}
+[class*="data-hide-at"]{visibility:hidden;}
+
+/********************* Phone number input - START *********************/
+input.b2b-phone-mask-input, input.b2b-phone-mask-input:hover, input.b2b-phone-mask-input:focus {
+    padding-right: 15px;   
+}
+/********************* Phone number input - END *********************/
+
+
+.b2b-header-tabs .header__item.profile .profile-info{
+    border: 1px solid #d3d3d3;
+    max-width:400px;
+    width:300px;
+    padding: 20px;
+    pointer-events: auto;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    box-sizing: border-box;
+    font-size: 16px;
+    -webkit-transition: opacity .2s ease-out;
+    -moz-transition: opacity .2s ease-out;
+    transition: opacity .2s ease-out;
+    background: #fff;
+    border-radius: 5px;
+    box-shadow: 0 5px 6px 0 rgba(0,0,0,.25);
+    color: #333;
+    line-height: 20px;
+    position: absolute;
+    left:-123px;
+    top:38px;
+    display:none;
+}
+.b2b-header-tabs .header__item.profile .profile-info.open{
+  display:block;
+}
+.b2b-header-tabs .header__item.profile .profile-info label{
+    font-family:Omnes-ATT-W02;
+    display:block;
+    margin-top:20px;
+}
+.b2b-header-tabs .header__item.profile .profile-info span{
+    font-family:Omnes_ATTW02Medium;
+    display:block;
+}
+
+.b2b-header-tabs i.caret{
+    position:absolute;
+    top:-7px;
+    left:50%;
+}
+.b2b-header-tabs i.caret:before{
+    content:"";
+    border-left: 8px solid transparent;
+    border-right: 8px solid transparent;
+    border-bottom: 8px solid #d3d3d3;
+    position:absolute;
+    top:-1px;
+    
+}
+.b2b-header-tabs i.caret:after{
+    content:"";
+    border-left: 8px solid transparent;
+    border-right: 8px solid transparent;
+    border-bottom: 8px solid #fff;
+    position:absolute;
+}
+
+/******* Breadcrumbs *********/
+.breadcrumb-css-override > li {
+    margin-right: 24px;
+}
+.breadcrumb-css-override li > * {
+    float: left !important;
+}
+
+/******* CHANGELOG ******/
+/* TODO: Need to rewrite this with new b2b */
+.changelog {
+  font-family: "Omnes-ATT-W02";
+  font-size: 16px;
+  margin-left: 20%;
+  margin-right: 20%;
+}
+.changelog .row { 
+  display: block;
+}
+.changelog h1 {
+  border-top: 1px solid #e2e2e2;
+  padding-top: 10px;
+}
+.changelog h1:first-of-type {
+  border-top: none;
+  padding-top: 0px;
+}
+
+#fixed, #added, #changed {
+
+}
+
+#breaking-change {
+  color: red;
+  text-transform: uppercase;
+}
+
+.slide-reveal {
+    margin-top: 10px;
+}
+
+/*nav*/
+
+.nav {
+    margin-bottom: 20px;
+    margin-left: 0;
+    list-style: none;
+}
+
+.nav > li > a {
+    display: block;
+}
+
+.nav > li > a:hover,
+.nav > li > a:focus {
+    text-decoration: none;
+    background-color: #eeeeee;
+}
+
+.nav > li > a > img {
+    max-width: none;
+}
+
+.nav > .pull-right {
+    float: right;
+}
+
+.nav-header {
+    display: block;
+    padding: 3px 15px;
+    font-size: 11px;
+    font-weight: bold;
+    line-height: 20px;
+    color: #999999;
+    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
+    text-transform: uppercase;
+}
+
+.nav li + .nav-header {
+    margin-top: 9px;
+}
+
+.nav-list {
+    padding-right: 15px;
+    padding-left: 15px;
+    margin-bottom: 0;
+}
+
+.nav-list > li > a,
+.nav-list .nav-header {
+    margin-right: -15px;
+    margin-left: -15px;
+    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
+}
+
+.nav-list > li > a {
+    padding: 3px 15px;
+}
+
+.nav-list > .active > a,
+.nav-list > .active > a:hover,
+.nav-list > .active > a:focus {
+    color: #ffffff;
+    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.2);
+    background-color: #0088cc;
+}
+
+.nav-list [class^="icon-"],
+.nav-list [class*=" icon-"] {
+    margin-right: 2px;
+}
+
+.nav-list .divider {
+    *width: 100%;
+    height: 1px;
+    margin: 9px 1px;
+    *margin: -5px 0 5px;
+    overflow: hidden;
+    background-color: #e5e5e5;
+    border-bottom: 1px solid #ffffff;
+}
+
+.nav-tabs,
+.nav-pills {
+    *zoom: 1;
+}
+
+.nav-tabs:before,
+.nav-pills:before,
+.nav-tabs:after,
+.nav-pills:after {
+    display: table;
+    line-height: 0;
+    content: "";
+}
+
+.nav-tabs:after,
+.nav-pills:after {
+    clear: both;
+}
+
+.nav-tabs > li,
+.nav-pills > li {
+    float: left;
+}
+
+.nav-tabs > li > a,
+.nav-pills > li > a {
+    padding-right: 12px;
+    padding-left: 12px;
+    margin-right: 2px;
+    line-height: 14px;
+}
+
+.nav-tabs {
+    border-bottom: 1px solid #ddd;
+}
+
+.nav-tabs > li {
+    margin-bottom: -2px;
+}
+
+.nav-tabs > li > a {
+    padding-top: 8px;
+    padding-bottom: 8px;
+    line-height: 20px;
+    border: 1px solid transparent;
+    -webkit-border-radius: 4px 4px 0 0;
+    -moz-border-radius: 4px 4px 0 0;
+    border-radius: 4px 4px 0 0;
+}
+
+.nav-tabs > li > a:hover,
+.nav-tabs > li > a:focus {
+    border-color: #eeeeee #eeeeee #dddddd;
+}
+
+.nav-tabs > .active > a,
+.nav-tabs > .active > a:hover,
+.nav-tabs > .active > a:focus {
+    color: #555555;
+    cursor: default;
+    background-color: #ffffff;
+    border: 1px solid #ddd;
+    border-bottom-color: transparent;
+}
+
+.well {
+    background-color: #ffffff;
+    border: 1px solid #e3e3e3;
+    border-radius: 4px;
+    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05) inset;
+    margin-bottom: 20px;
+    min-height: 20px;
+    padding: 19px;
+}
+/************************** Overrides for Top Navigation ends ***************************/
+
+/****** Icon ref page ******/
+.b2b-icons-size {
+    font-size:16px; 
+    display: inline-block;
+    width: 15%;
+    box-sizing: border-box;
+    vertical-align: top;
+    padding: 20px;
+    margin-bottom: 20px;
+    cursor: default;
+    min-height: 130px;
+    position: relative;
+    overflow: hidden;
+    border: 1px solid transparent;
+    -webkit-border-radius: 3px;
+    -moz-border-radius: 3px;
+    border-radius: 3px;
+    -webkit-transition: all .2s ease-out;
+    -moz-transition: all .2s ease-out;
+    transition: all .2s ease-out;
+}
+.b2b-icons-size:hover {
+    background: #fff;
+    color: #199DDF;
+    border-color: #d3d3d3;
+}
+.b2b-icons-size i:before, i:after {
+    text-align: initial;
+}
+.b2b-icons-header {
+    margin-bottom: 40px;
+}
+.b2b-icons-size span {
+    margin-top: 15px;
+    display: block;
+}
+.b2b-bc-naming {
+    float: right;
+    margin-top: 5px;
+}
+.b2b-icons-alignment {
+    margin: 4% 8%;
+}
+.b2b-icons-alignment .ds2.heading-group {
+    margin-top: 5px;
+}
+/****** End - Icon ref page ******/
+
+/****** Start - Listbox Demo ******/
+.listbox-list {
+    outline: 0px none;
+    overflow-x: hidden;
+    width: 200px;
+    position: relative;
+    height: 300px;
+    border: 1px solid #333;
+    border-radius: 6px;
+    margin-bottom: 10px;
+}
+/****** End - Listbox Demo ******/
+
+
+
+/******** Start - Scroll to Top ********/
+.b2b-scroll-speed-label {
+    margin-left: 30px;
+}
+.b2b-scroll-speed {
+    margin-left: 5px;
+}
+/******** End - Scroll to Top ********/
+
+/********************* Cato verification box starts ******************/
+.cato-verification-approved, .cato-verification-pending {
+    background-color: #fff;
+    border: 1px solid #1b7e28;
+    border-radius: 6px;
+    color: #333;
+    line-height: 1;
+    margin-top: 18px;
+    padding: 5px 10px;
+    text-align: center;
+    font-size: 1.6rem;
+}
+.cato-verification-pending {
+    border-color: #ef6f00;
+}
+.description .downloads {
+    margin-bottom: 5px;
+}
+/********************* Cato verification box Ends ********************/
+
+.form-search {
+    margin-top: 15px;
+}
+
+.att-timeline .timeline-dot .above-info-box .info-container .date {
+    font-size: 14px;
+    color: #444;
+    line-height: 20px;
+    position: relative;
+    width: 100%
+}
+
+.form-search .search-query {
+    width: 80% !important;
+}
+
+/********************* Grids Demo ********************/
+
+.b2b-grid-reference > .container {
+  background: #0574ac;
+  padding: 30px;
+  margin-bottom: 20px;
+}
+
+.b2b-grid-reference .row > [class*='span']:last-of-type {
+  margin-right: 0px !important;
+}
+
+.b2b-grid-reference .row {
+  margin-bottom: 12px;
+}
+
+.b2b-grid-reference .row [class*='span'] {
+  float: left;
+}
+
+.b2b-grid-reference .row [class*='span'] {
+  background: #fff;
+  color: #000;
+  text-align: center;
+  padding: 10px 0;
+  box-shadow: 2px 2px 3px #000;
+}
+
+.b2b-grid-reference .row:after {
+  content: '';
+  display: table;
+  clear: both;
+}
+
+.b2b-grid-reference .row:last-of-type {
+  margin-bottom: 0px;
+}
+
+.b2b-offset-column .row {
+  margin-bottom: 12px;
+}
+
+.b2b-offset-column .row:first-of-type {
+  margin-top: 10px;
+}
+
+.b2b-offset-column .row > [class*='span']{
+  margin-right: 0px !important;
+  padding: 10px;
+}
+
+.b2b-offset-column .row [class*='span'] {
+  background: #0574ac;
+  color: #fff;
+  text-align: center;
+  padding: 10px 0;
+}
+
+.b2b-headings-style, b2b-headings-specs {
+  display: inline-block;
+}
+
+.b2b-headings-specs-container {
+  background-color: #eeeeee;
+  padding: 10px;
+}
+
+.b2b-headings-container:not(:last-of-type) {
+  margin-bottom: 20px;
+}
+/********************* Redline Debug Classes **********************/
+.redline{
+    border: 1px solid red !important;
+}
+.redlines *{
+    border: 1px solid red !important;
+}
+
+.hidden-drag-ghost {
+  opacity: 0;
+}
+
+.settings-icon {
+  display: inline-block;
+  font-size: 26px;
+  color: #0568ae;
+  margin-bottom: 10px;
+}
+.settings-icon .flyout-link {
+  font: regular;
+  color: #0568ae;
+  size: 16px;
+  margin-top: 15px;
+}
+.settings-icon .dashboard-name {
+  text-align: left;
+  margin-bottom: 15px;
+}
+.settings-icon .dashboard-name .name {
+  margin-bottom: 10px;
+}
+.settings-icon .dashboard-name input {
+  width: 280px !important;
+}
+.settings-icon .form-row {
+  margin-top: -10px;
+}
+.settings-icon .b2b-flyout-container {
+  width: 310px;
+}
+.flyoutselect p {
+  margin: 0 0 15px 0;
+}
\ No newline at end of file
-- 
cgit 1.2.3-korg