RT 4.2.11, ticket#13852

10 files changed, 1238 insertions, 0 deletions

diff --git a/rt/share/static/css/web2/base.css b/rt/share/static/css/web2/base.css
new file mode 100644
index 000000000..b105f699c
--- /dev/null
+++ b/rt/share/static/css/web2/base.css
@@ -0,0 +1,15 @@
+a {
+  color: #000;
+  text-decoration: none;
+}
+
+
+a:visited {
+    color: #666;
+}
+
+a:hover  {
+  text-decoration: underline;
+}
+
+textarea:focus, input:focus {   background-color: #ffd; }
diff --git a/rt/share/static/css/web2/boxes.css b/rt/share/static/css/web2/boxes.css
new file mode 100644
index 000000000..053a8bb97
--- /dev/null
+++ b/rt/share/static/css/web2/boxes.css
@@ -0,0 +1,158 @@
+.titlebox { 
+ border-left: 1px solid #ccc;
+ border-top: 1px solid #ccc;
+ background-color: #efefef;
+ padding-top: 1em;
+ margin-top: 1em;
+ margin-left: 1em;
+ -moz-border-radius: 0.5em;
+ -webkit-border-radius: 0.5em;
+ margin-bottom: 2em;
+ border-bottom: 2px solid #aaa;
+ border-right: 2px solid #aaa;
+ padding-right: 1em;
+
+
+  border-radius: 0.5em;
+
+}
+
+* html .titlebox {
+ border-top: none;
+ border-left: none;
+}
+
+.titlebox .titlebox { 
+
+ background-color: #ffffff;
+ margin-top: 1em;
+ margin-right: 0.25em;
+ 
+}
+
+
+.titlebox {
+ margin-left: 0em;
+ margin-right: 0em;
+ min-height: 1.25em;
+
+}
+
+
+
+.titlebox .titlebox-title {
+ position: relative;
+ margin-top: -1.5em;
+ padding-bottom: 0.25em;
+ padding-left: 1em;
+ margin-right: -1em;
+
+}
+
+.titlebox .titlebox-title a {
+ text-decoration: none;
+ color: black;
+
+}
+
+.titlebox .titlebox-title a:hover {
+ text-decoration: underline;
+
+}
+
+.titlebox .titlebox-title .left {
+    font-weight: bold;
+    background: #ccc;
+    margin-left: 0.75em;
+    padding:0.5em;
+    padding-left: 0.75em;
+    padding-right: 0.75em;
+    -moz-border-radius: 0.5em;
+    -webkit-border-radius: 0.5em;
+    border-bottom: 2px solid #aaa;
+    border-right: 2px solid #aaa;
+
+    border-radius: 0.5em;
+
+
+}
+
+.titlebox .titlebox-title .right-empty {
+ display:none;
+}
+
+.titlebox .titlebox-title .right {
+  position: absolute;
+   right: 0;
+   top: 0.5em;
+  font-size: 0.9em;
+  background: #dedede;
+  border-left: 1px solid #ccc;
+ border-bottom: 1px solid #ccc;
+ padding-right: 0.4em;
+ padding-left: 0.4em;
+ padding-bottom: 0.2em;
+ padding-top: 0.5em;
+ -moz-border-radius-bottomleft: 0.25em;
+ -webkit-border-bottom-left-radius: 0.25em;
+ 
+ 
+ -moz-border-radius-topright: 0.25em;
+ -webkit-border-top-right-radius: 0.25em;
+
+  border-radius: 0 0.25em 0 0.25em;
+
+
+}
+
+.titlebox .titlebox-title .right a,
+.titlebox .titlebox-title .right a:visited {
+ color: #000;
+}
+
+.titlebox .titlebox-content {
+ padding-top: 0.5em;
+ padding-left: 1em;
+ padding-bottom: 1em;
+
+}
+
+.titlebox .titlebox-title .widget a {
+  display: block;
+  margin: 0;
+  margin-top: 0.6em;
+  width: 20px;
+
+  background: url(../../../static/images/css/rollup-arrow.gif) no-repeat center 0;
+
+  position: absolute;
+  top: -1em;
+  left: 0.15em;
+  float: left;
+
+  padding: 7px 0 0 0;
+  overflow: hidden;
+}
+
+* html .titlebox .titlebox-title .widget a {
+    top: 0em;
+    left: -1.5em; 
+}
+
+.titlebox.rolled-up .titlebox-title .widget a {
+    background-image: url(../../../static/images/css/rolldown-arrow.gif);
+}
+
+.unread-messages .titlebox , .unread-messages .titlebox .titlebox-title .left {
+  border: 1px solid #99a;
+  border-right: 2px solid #aab;
+  border-bottom: 2px solid #aab;
+}
+
+.unread-messages .titlebox {
+  background-color: #dde;
+}
+
+.unread-messages .titlebox .titlebox-title .left {
+  background-color: #cce;
+}
diff --git a/rt/share/static/css/web2/layout.css b/rt/share/static/css/web2/layout.css
new file mode 100644
index 000000000..f76dfe6ca
--- /dev/null
+++ b/rt/share/static/css/web2/layout.css
@@ -0,0 +1,163 @@
+/* body */
+
+body {
+    padding:0;
+    margin:0;
+    background: #547CCC url(../../../static/css/images/background-gradient.png) top left repeat-x ;
+    font-family: arial, helvetica, sans-serif;
+    color: #000000;
+}
+
+div#body {
+    position: relative;
+    padding: 1.8em 1em 1em 1em;
+    -moz-border-radius-topleft: 0.5em;
+    -webkit-border-top-left-radius: 0.5em;
+    -moz-border-radius-bottomleft: 0.5em;
+    -webkit-border-bottom-left-radius: 0.5em;
+    margin-left: 10em;
+    margin-top: 5.8em;
+    margin-right: 0;
+    margin-bottom: 0em;
+    min-height: 10%;
+    background: #fff;
+    border-top: 2px solid #ccc;
+    border-left: 2px solid #ccc;
+    z-index:1;
+    border-radius: 0.5em 0 0 0.5em;
+
+}
+
+div#body.login-body {
+    top: -2.5em;
+    margin-right: 10em;
+}
+
+div#footer {
+ position: absolute;
+ right: 0;
+ text-align: right;
+ font-size: 0.9em;
+ margin-top: 2em;
+ background: #fff;
+ margin-bottom: 0;
+ padding-left: 3em;
+ padding-right: 1em;
+ border-top: 2px solid #aaa;
+ border-left: 2px solid #aaa;
+ -moz-border-radius-topleft: 0.5em;
+ -webkit-border-top-left-radius: 0.5em;
+ -moz-border-radius-bottomleft: 0.5em;
+ -webkit-border-bottom-left-radius: 0.5em;
+
+  border-radius: 0.5em 0 0.5em 0;
+}
+
+div#footer #time {
+    display: none ;
+}
+
+div#footer #bpscredits {
+ text-align: right;
+ background: url(../../../static/images/bpslogo.png) no-repeat top right;
+ padding-top: 4em;
+}
+
+
+/* logo stuff */
+
+div#logo {
+    position: absolute;
+    right: 2px;
+    top: 0;
+    height: 2.3em;
+}
+
+div#logo a img {
+    border: 0;
+    height: 100% !important;
+    width: auto !important;
+    float: right;
+}
+
+div#logo .rtname {
+    position: relative;
+    font-weight: bold;
+    text-align: center;
+    top: 0.7em;
+    padding-right: 1em;
+    float:left;
+}
+
+
+div#quickbar, div#logo {
+    font-size: 0.9em;
+}
+div#quickbar a, div#logo a { 
+    color: #000;
+}
+
+
+div#quickbar {
+ background: #eaeaea;
+ padding-top: 1em;
+ padding-left: 1em;
+ padding-bottom: 0.5em;
+ height: 1em;
+ border-bottom: 1px solid #ccc;
+
+}
+
+#prefs-menu.sf-menu li li {
+    background: #eaeaea;
+}
+
+#prefs-menu.sf-menu #li-preferences {
+    background: none;
+}
+
+#prefs-menu.sf-menu li:hover,
+#prefs-menu.sf-menu li.sfHover,
+#prefs-menu.sf-menu #li-preferences.sfHover,
+#prefs-menu.sf-menu #li-preferences:hover,
+#prefs-menu.sf-menu a:focus,
+#prefs-menu.sf-menu a:hover,
+#prefs-menu.sf-menu a:active,
+{
+    background-color: #CFDEFF;
+    text-color: #000;
+    color: #000;
+    border: none;
+}
+
+#prefs-menu .sfHover a,
+#prefs-menu .sfHover a:visited {
+    color: #000;
+    border: none;
+}
+
+
+
+div#header h1 {
+ position: absolute;
+ left: 7em;
+ right: 20em;
+ top: 1.4em;
+ overflow: hidden;
+ height: 1em;
+ font-size: 1.4em;
+ margin-top: 0.4em;
+ padding: 0.25em;
+ color: #fff;
+}
+
+/* in multi-column layouts, make sure we have an internal gutter */
+
+tr .boxcontainer {
+      padding-right: 1em;
+}
+
+tr .boxcontainer:last-child {
+      padding-right: 0;
+}
+
diff --git a/rt/share/static/css/web2/main.css b/rt/share/static/css/web2/main.css
new file mode 100644
index 000000000..c58e3acb0
--- /dev/null
+++ b/rt/share/static/css/web2/main.css
@@ -0,0 +1,9 @@
+@import "../base/main.css";
+
+@import "base.css";
+@import "layout.css";
+@import "nav.css";
+@import "boxes.css";
+@import "ticket-lists.css";
+@import "ticket-search.css";
+@import "misc.css";
diff --git a/rt/share/static/css/web2/misc.css b/rt/share/static/css/web2/misc.css
new file mode 100644
index 000000000..742f79261
--- /dev/null
+++ b/rt/share/static/css/web2/misc.css
@@ -0,0 +1,11 @@
+.comment { 
+ padding-left: 0.5em;
+ color: #999;
+
+}
+
+#comp-Ticket-ShowEmailRecord #body {
+    margin-left: 1em;
+    margin-top: 1em;
+    overflow: auto;
+} 
diff --git a/rt/share/static/css/web2/msie.css b/rt/share/static/css/web2/msie.css
new file mode 100644
index 000000000..53568441a
--- /dev/null
+++ b/rt/share/static/css/web2/msie.css
@@ -0,0 +1,195 @@
+div#body {
+    left: 0.25em;
+    height: 100%;
+    top: 6em;
+}
+
+#main-navigation {
+    padding-bottom: 1em;
+}
+
+#footer {
+    padding: 1em;
+}
+
+
+div#header h1 {
+ position: absolute;
+ left: 7.25em;
+ overflow: hidden;
+ height: 1em;
+ font-size: 1.4em;
+ margin-top: 0.4em;
+ right: 23.5em;
+ padding: 0.25em;
+}
+
+
+#topactions {
+    top: 3.5em;
+    width: auto;
+}
+
+.topaction form * { 
+    vertical-align: top;
+}
+
+.topaction form button, .topaction form input { 
+   height: 2em; 
+}
+
+.topaction form input.field {
+   height: 1.6em; 
+}
+
+.topaction .select-queue {
+    margin-top: 0.2em;
+}
+
+div#page-navigation {
+    position: absolute;
+    top: 6.2em;
+    height: 1.8em;
+    background: #fff;
+    border-top: 2px solid #ccc;
+}
+
+
+
+div#page-navigation ul#page-menu {
+    background: none;
+    border: none;
+}
+
+
+div#quickbar { height: 1.2em;
+
+
+}
+
+#pick-criteria td.label select {
+    width: 10em;    
+}
+
+
+#editquery {
+  margin-top: 0.2em;
+  width: 39%;
+  left: 60%;
+}
+
+div#nav li.first {
+    margin-top: 0.75em;
+    border-top: none;
+}
+div#nav ul ul li.first {
+    border-top: 1px solid #cccccc;
+    margin-top: 0.25em;
+}
+
+div#nav li.last {
+    border-bottom: none;
+    padding-bottom: 0;
+    margin-bottom: 0;
+}
+
+
+.transaction .type a { font-weight: normal; text-decoration: none; color: #fff; }
+
+
+.titlebox {
+ border-top: none;
+ border-left: none;
+}
+
+.titlebox .titlebox-title .left {
+    padding: 0.25em;
+    padding-left: 0.5em;
+}
+
+.titlebox {
+}
+
+.titlebox .titlebox-title .right {
+    border-right: 2px solid #aaa;
+    display: block;
+    margin-top: 0.1em;
+    right: -0.2em;
+
+}
+
+
+.titlebox .titlebox-content {
+    padding-top: 2.2em;
+}
+
+
+.titlebox table.collection-as-table, .titlebox table.queue-summary {
+    width: 95%;
+    padding: 0.5em;
+    margin-left: auto;
+    margin-right: auto;
+}
+
+ .titlebox-title {
+    position: relative;
+}
+
+.titlebox-title .widget {
+    position: absolute;
+    top: -0.25em;
+    left: -0.25em;
+
+}
+.titlebox-title .left {
+    position: absolute;
+    top: -0.75em;
+    left: 0.5em;
+}
+
+/* nested things. like the ticket dates tab */
+.titlebox .titlebox .titlebox-title .right{
+    top: 0.25em;
+}
+
+.combobox {
+    float: left;
+}
+
+.combobox .combo-button {
+    color: ButtonText;
+    padding: 0;
+}
+
+.combobox .combo-list {
+    margin-top:0.5em;
+    margin-left: -0.2em;
+}
+
+#pick-criteria td.label {
+     width: auto;
+}
+
+#pick-criteria td.operator {
+  width: 7.5em;
+}
+
+.plain-text-white-space {
+  word-wrap: break-word;       /* Internet Explorer 5.5+ */
+  white-space: pre;   /* IE only hack to re-specify in addition to
+  word-wrap  */
+}
+
+div#logo .rtname {
+    float: right;
+    padding-right: 1em;
+}
+
+#page-action-menu {
+    top: 9.5em;
+}
+
+#rt-portal .titlebox-content {
+    height: 23em;
+}
+
diff --git a/rt/share/static/css/web2/msie6.css b/rt/share/static/css/web2/msie6.css
new file mode 100644
index 000000000..18209b17a
--- /dev/null
+++ b/rt/share/static/css/web2/msie6.css
@@ -0,0 +1,54 @@
+@import "../base/msie6.css";
+
+.topaction .select-queue {
+    margin-top: 0;
+}
+
+div#page-navigation {
+    width: 100%;
+}
+
+.titlebox-title .widget {
+    top: -1em;
+    left: 0.5em;
+
+}
+.titlebox .titlebox-title .right{
+    position: absolute;
+    top: 0.25em;
+    right: 1em;
+}
+
+/* nested things. like the ticket dates tab */
+.titlebox .titlebox .titlebox-title .right{
+    right: 1.3em;
+}
+
+#login-box .titlebox .titlebox-title .right {
+    margin-top: -0.1em;
+    right: 0em;
+}
+
+.titlebox
+{
+    height: auto !important;
+    height: 1.25em;
+}
+
+
+.transaction .messagebody img {
+    /* ie6 does not support max-width */
+    width: expression(this.width > 401 ? 400 : true);
+}
+
+#prefs-menu .sf-sub-indicator {
+    background-image: url(../../../static/css/images/arrows-grey.gif);
+}
+
+#app-nav .sf-sub-indicator {
+    background-image: url(../../../static/css/images/arrows-grey.gif);
+}
+
+.ticket-transaction div.metadata span.actions {
+    right: 1.1em;
+}
diff --git a/rt/share/static/css/web2/nav.css b/rt/share/static/css/web2/nav.css
new file mode 100644
index 000000000..7ff3ac1d4
--- /dev/null
+++ b/rt/share/static/css/web2/nav.css
@@ -0,0 +1,245 @@
+#main-navigation {
+    background-color: #fff;
+    -moz-border-radius-bottomright: 0.5em;
+    -moz-border-radius-topright: 0.5em;
+    -webkit-border-top-right-radius: 0.5em;
+    -webkit-border-bottom-right-radius: 0.5em;
+    border-radius: 0 0.5em 0.5em 0;
+    width: 10em;
+    font-size: 0.85em;
+    position: absolute;
+    top: 3.4em;
+    left: 0em;
+    z-index: 9997;
+    padding-top: 1em;
+    padding-right: 0.5em;
+    padding-left: 0.5em;
+}
+
+.sf-sub-indicator {
+    background-image: url(../../../static/css/images/arrows-grey.png);
+    margin-top: -3px;
+}
+
+#app-nav.sf-vertical li:hover ul,
+#app-nav.sf-vertical li.sfHover ul {
+    top: -1px;
+}
+
+#prefs-menu > li, #prefs-menu > li > a {
+    background-color: transparent;
+}
+
+#prefs-menu.sf-menu a,
+#prefs-menu .sf-menu a
+{
+    border: none;
+}
+
+#prefs-menu.sf-menu li li li {
+    border-left: 1px solid #ccc;
+}
+
+#prefs-menu.sf-menu li:hover ul,
+#prefs-menu.sf-menu li.sfHover ul {
+    top: 2.4em; /* match the height of the top level li */
+}
+
+#prefs-menu.sf-menu li li:hover ul,
+#prefs-menu.sf-menu li li.sfHover ul {
+    top: 0;
+}
+
+#prefs-menu .sf-sub-indicator {
+    background-image: url(../../../static/css/images/arrows-grey.png);
+    margin-top: 0;
+}
+
+#main-navigation ul li {
+}
+
+
+#main-navigation .sf-menu {
+    text-color: #000;
+}
+
+#main-navigation .sf-menu li {
+    background: none;
+}
+
+#main-navigation .sf-menu li:first-child {
+    border-top: 1px solid #ccc;
+}
+
+#main-navigation .sf-menu a,
+#main-navigation .sf-menu a:visited {
+    padding-top: 0.5em;
+    padding-bottom: 0.5em;
+    color: #000;
+    border: none;
+}
+
+#main-navigation .sf-menu li {
+    border-bottom: 1px solid #ccc;
+
+}
+
+
+#main-navigation .sf-menu ul a,
+#main-navigation .sf-menu ul a:visited {
+    color: #000;
+}
+
+
+#main-navigation .sf-menu li li, #main-navigation .sf-menu li li li {
+    border-left: none;
+    background-color: #fff;
+    text-color: #547CCC;
+}
+
+#main-navigation .sf-menu li:hover, #main-navigation .sf-menu li.sfHover, #main-navigation .sf-menu a:focus, #main-navigation .sf-menu a:hover, #main-navigation .sf-menu a:active {
+    background-color: #CFDEFF;
+    text-color: #000;
+    color: #000;
+}
+
+#main-navigation .sfHover a,
+#main-navigation .sfHover a:visited {
+    color: #000;
+}
+
+/* to stop a "flash" of an unstyled menu on an older browser,  hide the menu until superfish has initialized it */
+#app-nav.toplevel { display: none; }
+#app-nav.toplevel.sf-menu { display:block; }
+#page-menu.toplevel { display: none; }
+#page-menu.toplevel.sf-menu { display:block; }
+
+
+
+#page-navigation {
+    position: absolute;
+    top: 5.7em;
+    left: 10em;
+    right: 0em;
+    height: 2.1em;
+    z-index: 9995;
+    font-size: 0.9em;
+    background-color: #fff;
+    border: 1px solid #ccc;
+    -moz-border-radius-bottomleft: 0.5em;
+    -webkit-border-bottom-left-radius: 0.5em;
+    border-right: none;
+    border-radius: 0 0 0 0.5em;
+}
+
+#page-navigation .sf-menu {
+    margin: 0;
+}
+
+#page-navigation .sf-menu li, #page-navigation .sf-menu li li, #page-navigation .sf-menu li li li {
+    background: none;
+    height: 2em;
+    padding-top: 0.25em;
+    padding-bottom: 0;
+    padding-left: 0.5em;
+    padding-right: 0.5em;
+    display: inline-block;
+}
+
+
+#page-navigation .sf-menu ul {
+    background: white;
+    border-bottom: 2px solid #ccc;
+}
+
+
+#page-navigation .sf-menu li:hover, #page-navigation .sf-menu li.sfHover, #page-navigation .sf-menu a:focus, #page-navigation .sf-menu a:hover, #page-navigation .sf-menu a:active {
+    background: none;
+}
+
+#page-navigation .sf-menu a:visited, #page-navigation .sf-menu a {
+    border: none;
+    color: #000;
+}
+
+#page-navigation .sf-menu a {
+    padding: 0.25em;
+}
+
+#page-navigation .sf-menu a.sf-with-ul {
+    /* allow space for the submenu indicator */
+    padding-right: 2em;
+}
+
+#page-menu.sf-menu li .sf-sub-indicator {
+    top: 0.7em;
+}
+
+
+#page-actions {
+    display: none;
+}
+
+#page-action-menu {
+    position: absolute;
+    display: block;
+    top: 8.2em;
+    right: 0em;
+    left: auto;
+    z-index: 9995;
+    font-size: 0.9em;
+    background-color: #eee;
+    border: 1px solid #ccc;
+    -moz-border-radius-bottomleft: 0.5em;
+    -webkit-border-bottom-left-radius: 0.5em;
+    border-bottom-left-radius: 0.5em;
+    border-right: none;
+    border-top: none;
+    list-style-type: none;
+    padding: 0.5em;
+}
+
+
+#page-action-menu li {
+    display: inline;
+}
+
+#page-action-menu a, #page-action-menu a:visited {
+    border: none;
+    padding: 0.25em;
+    color: #000;
+}
+
+
+#topactions {
+ position: absolute;
+ background: transparent;
+ top: 3.2em;
+ right: 0.7em;
+ width: auto;
+ min-width: 42em;
+ font-size: 0.9em;
+ z-index: 99;
+}
+
+#topactions form * {
+    vertical-align: top;
+}
+
+#topactions button, #topactions select, #topactions input{
+ padding-top: 0em;
+ padding-bottom: 0em;
+ width: 8em;
+
+}
+
+#topactions #simple-search .field{
+ margin-left: 1em;
+ color: #787;
+ }
+
+#topactions #simple-search .field:focus {
+ color: #000;
+ }
+
+
diff --git a/rt/share/static/css/web2/ticket-lists.css b/rt/share/static/css/web2/ticket-lists.css
new file mode 100644
index 000000000..be831085f
--- /dev/null
+++ b/rt/share/static/css/web2/ticket-lists.css
@@ -0,0 +1,191 @@
+table.queue-summary, table.collection-as-table {
+  margin-top: 0.75em;
+  font-size: 0.9em;
+  border: 1px solid #aaa;
+  border-bottom: 2px solid #999;
+  border-right: 2px solid #999;
+  border-spacing: 0;
+  width: 100%;
+
+}
+
+table.queue-summary tr>*:first-child {
+ padding-left: 1em;
+
+}
+
+
+table.queue-summary tr>*:last-child {
+ padding-right: 1em;
+
+}
+
+table.queue-summary a, table.collection-as-table a  {
+  font-weight: bold;
+}
+
+
+table.collection-as-table th.collection-as-table {
+  background: #ddd;
+ font-size: 0.9em;
+  margin-bottom: 0.5em;
+  text-align: left;
+
+}
+
+
+table.queue-summary th.collection-as-table {
+ font-size: 0.9em;
+  margin-bottom: 0.5em;
+  text-align: right;
+
+}
+
+table.queue-summary th.collection-as-table:first-child {
+  text-align: left;
+
+}
+
+
+tr.collection-as-table+tr.collection-as-table th {
+ border-bottom: 2px solid grey;
+
+}
+
+
+
+
+table.queue-summary td {
+  background: #efefef;
+  border-bottom: 1px solid #ccc;
+}
+
+
+
+tr.evenline td {
+  background: #eee;
+}
+
+tr.oddline td {
+  background: #fff;
+
+}
+
+tr.evenline td, tr.oddline td {
+ padding-top: 0.5em;
+} 
+
+
+
+tr.evenline+tr.evenline td, tr.oddline+tr.oddline td{
+ padding-top: 0;
+ border: none;
+}
+
+
+
+table.collection-as-table td:first-child,
+table.collection-as-table th:first-child {
+  padding-left: 1em;
+}
+
+table.collection-as-table td:last-child, table.collection-as-table th:last-child {
+  padding-right: 1em;
+}
+
+th.collection-as-table , td.collection-as-table {
+ padding-right: 0.5em;
+}
+
+.pagenum.a:hover, .paging a.nav:hover{
+text-decoration: underline;
+}
+
+
+.pagenum *, .paging a.nav{
+padding: .5em;
+}
+
+.currentpage{
+text-decoration: none;
+font-weight: bold;
+background: #eee;
+}
+
+div.paging{
+text-align: center;
+padding-bottom: 1em;
+}
+
+ 
+/* full-page ticket lists */
+#body>table.collection-as-table {
+    margin-bottom: 2em;
+
+}
+
+.chart.image {
+    padding-right: 2em;
+    float: left;
+    clear: both;
+}
+
+.chart-wrapper {
+    display: block;
+    width: auto;
+}
+
+.chart-wrapper .collection-as-table {
+    width: auto;
+    font-size: 1em;
+    /* Firefox needs this to let the table flow below the chart on narrow screens */
+    clear: right;
+}
+
+.chart-wrapper .collection-as-table th.collection-as-table {
+    text-align: center;
+    padding: 0.5em;
+    padding-right: 1em;
+    padding-left:  1em;
+}
+
+.chart-wrapper .collection-as-table tr.total td {
+    border-top: 1px solid #ccc;
+}
+
+.chart-wrapper .collection-as-table td.value {
+    padding-left: 0.5em;
+}
+
+.chart-wrapper .query {
+    clear: both;
+    text-align: center;
+    font-size: 1.2em;
+    padding: 1em;
+}
+
+.chart-wrapper .collection-as-table .label {
+    font-weight: bold;
+}
+
+
+.chart-wrapper .query .label {
+    font-weight: bold;
+}
+
+.chart-meta {
+    padding-top: 2em;
+    border-top: 1px solid #ccc;
+    clear: both;
+}
+
+.chart-meta .chart-type {
+    display: inline-block;
+    float: left;
+    padding-right: 2em;
+    clear: both;
+}
+
+.chart-meta .saved-search {
+    display: inline-block;
+}
diff --git a/rt/share/static/css/web2/ticket-search.css b/rt/share/static/css/web2/ticket-search.css
new file mode 100644
index 000000000..a5f57525f
--- /dev/null
+++ b/rt/share/static/css/web2/ticket-search.css
@@ -0,0 +1,197 @@
+#comp-Search-Build #body {
+    position: relative;
+}
+
+#pick-criteria select {
+    width: 8em;
+}
+
+#pick-criteria tr {
+    height: 1.5em;
+}
+
+#pick-criteria td.label {
+    font: message-box;    
+    padding-right: 0.5em;
+    width: 11em;
+}
+
+#pick-criteria td.label select {
+  width: 8.5em;
+  text-align: right;
+}
+
+#pick-criteria td.operator {
+ padding-right: 0.5em;
+ text-align: left;
+ vertical-align: bottom;
+ width: 7em;
+}
+
+#pick-criteria td.operator select {
+ text-align: right;
+}
+
+#pick-criteria td.value input,
+#pick-criteria td.value select {
+ width: 11em;
+}
+
+#pick-criteria td.value #ValueOfDate {
+ width: 11em;
+}
+
+
+#pick-criteria td.value #ValueOfTime {
+ width: 4em;
+
+}
+
+#pick-criteria td.value #ValueOfTime-TimeUnits{
+ width: 5.5em;
+}
+
+#pick-criteria td.value {
+ padding-right: 0.5em;
+ text-align: left;
+ font: message-box;
+}
+
+#editquery, #editsearches{
+  position: absolute;
+  margin-top: 0.2em;
+  right: 1em;
+  left: 60%;
+  top: 1em;
+/*  margin-top: -1em; */
+}
+
+#editquery {
+   top: 1.3em;
+}
+
+
+#editsearches {
+  top: 24em;
+}
+
+
+#pick-criteria {
+ width: 58%;
+ padding-top: 0em;
+ margin-top: 0em;
+}
+
+#pick-criteria .titlebox-content {
+ overflow-x: auto;
+}
+
+#BuildQuery .submit {
+ width: 58%;
+}
+
+
+#sorting.titlebox {
+ width: 55%;
+ padding-right: 1em;
+}
+
+#display-options .submit {
+ width: 100%;
+}
+
+
+
+.search-result-views {
+ position: absolute;
+ top: 0;
+ right: 0;
+ margin-top: -2px;
+ margin-right: 0em;
+ padding: 0.25em;
+ padding-left: 0.5em;
+ padding-right: 0.5em;
+ background-color: #ccc;
+ border-left: 1px solid #999;
+ border-bottom: 1px solid #999;
+ -moz-border-radius-bottomleft: 0.5em;
+ -webkit-border-bottom-left-radius: 0.5em;
+ border-radius: 0 0 0 0.5em;
+}
+
+
+
+.search-result-views li {
+
+ display: inline;
+}
+
+.search-result-views li:after  {
+ content: " \00b7 ";
+}
+
+.search-result-views li:last-child:after  {
+ content: "";
+
+}
+
+.edit-saved-searches .label {
+    display: inline-block;
+    width: 10em;
+    font-weight: bold;
+}
+
+span#display-options {
+    display: block;
+    padding-top: 2em;
+    margin-top: 2em;
+    border-top: 1px solid #ccc;
+    clear: both;
+}
+
+span#display-options .titlebox#sorting {
+    float: left;
+    width: auto;
+    margin-right: 2em;
+    min-width: 35%;
+}
+
+span#display-options .titlebox#columns {
+    float: left;
+}
+
+span#display-options .titlebox#columns table.edit-columns td {
+    padding: 0.5em;
+}
+
+span#display-options .titlebox#columns table.edit-columns div.row {
+    width: 9em; 
+}
+span#display-options .titlebox#columns table.edit-columns span.label {
+    width: 2em;
+}
+
+span#display-options .titlebox#columns table.edit-columns span.value input,
+span#display-options .titlebox#columns table.edit-columns span.value select {
+    width: 7em;
+    padding: 0;
+}
+
+span#display-options .titlebox#columns table.edit-columns span.value {
+    display: inline-block;
+    width:7em;
+}
+
+#BuildQuery #formatbuttons.submit{
+    width: 85%;
+}
+
+.refresh {
+    float: left;
+}
+
+/* Force some widget to fit at max parent box */
+#HomeRefreshInterval, #SavedSearchLoad, #SavedSearchOwner {
+    max-width: 100%;
+}
+