/* -- Clear Fix -- */
.clearfix:after {content: "."; display: block; height: 0; clear: both; visibility: hidden;}
/* wrapper for all css */
.ccs-shared {
position: relative;
font-family: "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", Helvetica, Arial, sans-serif;
font-size: 12px;
}
/* all links default styles */
.ccs-shared a {
color: #3e528c;
text-decoration: none;
cursor: pointer;
outline: none;
}
.ccs-shared .jframe_ignore a {
text-decoration: none;
}
.ccs-shared a:hover {
text-decoration: underline;
}
/* all imgs default styles */
.ccs-shared img {
border: 0px;
}
/* all paragraph default styles */
.ccs-shared p {
margin-bottom: 12px;
}
/* all input and form element default styles */
.ccs-shared input, .ccs-shared textarea {
padding: 2px;
}
.ccs-shared label {
cursor: pointer;
}
.ccs-shared pre {
font-family: monaco, courier;
}
/* errors */
.ccs-error {
color: #900;
}
/* all em default styles */
.ccs-shared em, .ccs-shared i {
font-style: italic;
}
/* all code default styles */
.ccs-shared .ccs-code, .ccs-shared.ccs-code, .ccs-code {
font-family: "Andale Mono", "Monaco", "Courier New" !important;
}
/* text is not selectable; good for double click actions like links to prevent the double click from selecting
note that the user cannot select this text even if that's their intention; use sparingly */
.ccs-no_select, .ccs-no_select * {
user-select: none;
-moz-user-select: none;
-webkit-user-select: none;
}
/* OverText - input lables using OverText.js from MooTools More */
.ccs-shared label.overTxtLabel {
font-size: 11px;
color: #999;
margin-top: 3px;
}
.ccs-shared label.OverText-ArtInput {
margin-top: 0px;
}
/* clear both sides of floats */
.ccs-shared .ccs-clear {
clear:both;
}
/* center text */
.ccs-shared .ccs-center {
text-align: center;
}
/* float left */
.ccs-shared .ccs-left {
float: left;
}
/* float right */
.ccs-shared .ccs-right {
float: right;
}
/* not displayed */
.ccs-shared .ccs-hidden {
display: none;
}
/* cursor pointer to connote clickability */
.ccs-shared .ccs-pointer {
cursor:pointer;
}
/* inline block display; makes elements block level, but follows page flow */
.ccs-shared .ccs-inline, .ccs-shared ul.css-inline_list li {
display:-moz-inline-box; /* FF2 */
display:inline-block; /* webkit and FF3 */
#zoom: 1; /* set hasLayout:true to mimic inline-block */
#display:inline;
border:0;
padding:0;
vertical-align:middle;
#vertical-align: auto; /* makes TextBox,Button line up w/native counterparts on IE6 */
position: relative;
}
/* down divot image */
.ccs-shared .ccs-down_divot {
width: 11px;
height: 11px;
display: block;
background: url(../art/divots.png) -11px -11px no-repeat;
}
/* tabbed layout */
/* .css-tabs, a ul; container for the tabs
- section for tab 1
- section for tab 2
- section for tab 3
*/
.ccs-shared ul.ccs-tabs {
margin: none;
padding: none;
}
.ccs-shared .right_col pre {
overflow: visible;
}
.ccs-shared .right_col ul.ccs-tab_sections {
overflow: visible;
}
.ccs-shared ul.ccs-tab_sections {
overflow: visible;
}
/* the tab elements, li elements */
.ccs-shared .ccs-tabs li {
cursor: pointer;
height: 19px;
line-height: 19px;
background: url(/static/art/tabs.png);
margin-right: 8px !important;
color: #444;
}
/* each tab's text/html is wrapped in a span */
.ccs-tabs li span {
height: 18px;
display: block;
background: url(/static/art/tabs.png) right top;
position: relative;
left: 6px;
padding: 1px 6px 0px 0px;
}
.ccs-shared .ccs-tabs > li {
list-style: none;
float: left;
}
.ccs-shared .ccs-tabs li.tabSelected {
color: #000;
background: url(/static/art/tabs.png) left 38px;
}
.ccs-shared .ccs-tabs li.tabSelected span {
background: url(/static/art/tabs.png) right 38px;
}
.ccs-shared .ccs-tabs li:hover {
color: #000;
background: url(/static/art/tabs.png) left 19px;
}
.ccs-shared .ccs-tabs li:hover span {
background: url(/static/art/tabs.png) right 19px;
}
/* stripy table */
/*
see: HtmlTable.js, HtmlTable.Zebra.js, HtmlTable.Select.js, HtmlTable.Sort.js in MooTools More
| Header for Column 1 |
Header for Column 2 |
Header for Column 3 |
| col 1 | col 2 | col 3 |
| col 1 | col 2 | col 3 |
| col 1 | col 2 | col 3 |
| col 1 | col 2 | col 3 |
give it class "selectable" to allow the user to select rows
give it class "sortable" to allow the user to sort the table
*/
table.ccs-data_table {
width: 100%;
}
table.ccs-data_table thead {
background: url(/static/art/th_back.png);
}
table.ccs-data_table thead th {
text-align: left;
white-space: nowrap;
padding: 0px 6px;
border: 1px solid #b2b2b2;
border-width: 0px 1px 1px 0px;
height: 16px !important;
line-height: 16px !important;
font-size: 12px;
font-weight: normal;
overflow: hidden;
}
table.ccs-data_table th:last-child {
border-right: none;
}
table.ccs-data_table td {
white-space: nowrap;
padding: 0px 8px;
height: 20px;
line-height: 20px;
background: #fff;
border: none;
}
table.ccs-data_table tr.table-tr-odd td {
background: #f3f3f3;
}
table.ccs-data_table tr:nth-child(odd) td {
background: #f3f3f3;
}
table.ccs-data_table tr:hover > td, table.ccs-data_table tr.table-tr-hovered td {
background-color: #d4e7f8;
color: #000;
cursor: pointer;
}
table.ccs-data_table tr.selected td, table.ccs-data_table tr.table-tr-selected td, table.ccs-data_table tr.selected td a, table.ccs-data_table tr.table-tr-selected td a {
background-color: #3875d7;
color: #fff;
}
table.table-sortable th {
cursor: pointer;
}
table.table-sortable th div {
position: relative;
padding-right: 10px;
}
span.table-th-sort-span {
width: 7px;
height: 16px;
display: block;
cursor: pointer;
position: absolute;
right: -2px;
top: 0px;
}
.table-th-sort span.table-th-sort-span {
background: url(/static/art/icons/bullet_arrow_down.png) -4px top no-repeat;
}
.table-th-sort-rev span.table-th-sort-span {
background: url(/static/art/icons/bullet_arrow_up.png) -4px top no-repeat;
}
/* stickywin solid; this is the login window styles */
div.solid-win div.body-left {
background: url(../art/sticky-win-solid-back.png);
width: 16px !important;
overflow: visible;
position: relative;
z-index: 1;
}
div.solid-win div.body {
position: relative;
left: 16px;
padding: 10px 16px 1px 0px;
background: url(../art/sticky-win-solid-back.png) top right;
}
div.solid-win div.bottom {
z-index: 0;
background: url(../art/sticky-win-solid-back.png) bottom left;
width: 16px !important;
overflow: visible;
position: relative;
clear: both;
}
div.solid-win div.bottom_lr {
position: relative;
left: 16px;
background: url(../art/sticky-win-solid-back.png) bottom right;
height: 20px;
padding-right: 16px;
}
/* JFrame styles */
/* these are applied for you by default */
div.jframe_wrapper {
position: relative;
height: 100%;
}
div.jframe_contents {
min-height: 100%;
}
div.jframe_default h1, h2, h3, h4, h5 {
padding: 0;
margin: 0;
margin-bottom: .3em;
}
/* put this on your root element (or any element you want to have a 10px padding)
jframe content without this will be flush with the borders of the window */
.jframe_padded {
padding: 10px;
}
/* apply jframe_default class if you want to give your layout standard HTML-like layout
good for documents for example. */
div.jframe_default ul,
div.jframe_default ol {
padding-left: 1.5em;
margin: 0;
margin-bottom: 1em;
}
div.jframe_default ul li{
list-style-type: disc;
margin-bottom: 0.5em;
}
div.jframe_default a{
font-weight: bold;
}
div.jframe_default code {
font-family: fixed;
}
div.jframe_default table {
border-collapse: separate;
}
div.jframe_default h1,
div.jframe_default h2,
div.jframe_default h3,
div.jframe_default h4,
div.jframe_default h5 { font-weight: bold; }
div.jframe_default h1 { font-size: 150%; margin-bottom: 0.3em; padding-top: 8px; margin-top: 0px;}
div.jframe_default h2 { font-size: 130%; margin-bottom: 0.3em; padding-top: 8px; margin-top: 0px;}
div.jframe_default h3 { font-size: 120%; margin-bottom: 0.3em; padding-top: 8px; margin-top: 0px;}
div.jframe_default h4 { font-size: 110%; margin-bottom: 0.3em; padding-top: 8px; margin-top: 0px;}
div.jframe_default h5 { font-size: 105%; margin-bottom: 0.3em; padding-top: 8px; margin-top: 0px;}
/* context menu */
/*
Create a UL element with the class context-menu (a ul with li items for each menu item). Put it inside the container you want to give a right click menu (like a div; for tables, put it inside a td - if you want the tr to have the right click behaviore, still put it in a td)
Give the parent that has the right click control define the following in its data-context-menu-actions property:
[ //array of actions; this allows support for more than one context menu in a single parent
{
'events':['contextmenu','click:relay(.myapp-options)'], //when the user right clicks, or clicks a .myapp-options element
'menu':'ul.context-menu' //it shows this menu
}
]
Note that you can have more than one right click menu per container. This allows a table row to be right clicked and show a different menu if the user right clicks, say, an image vs a link or different td elements. See CCS.ContextMenu.js.
*/
.ccs-shared ul.context-menu {
border-radius: 2px;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
background: #fff;
border: solid #777;
border-width: 1px;
position: absolute;
z-index: 1;
display: none;
overflow: visible;
}
.ccs-shared ul.context-menu * {
white-space: nowrap;
}
.ccs-shared ul.context-menu li {
border-bottom: 1px solid #ccc;
padding: 3px;
}
.ccs-shared table.ccs-data_table tr.table-tr-selected td ul.context-menu li a {
color: #000;
background-color: #fff;
text-decoration: none;
}
.ccs-shared .context-menu li:hover, .ccs-shared table.ccs-data_table tr.table-tr-selected td ul.context-menu li:hover a, .ccs-shared ul.context-menu li:hover a {
text-decoration: none;
background-color: #3875D7;
color: #fff;
}
.ccs-shared ul.context-menu li:last-child {
border: none;
}
/* button bar */
input.ccs-art_button {
padding: 0px 0px 0px 0px;
/* webkit madness:
put this padding statement in place and buttons are still padding 0/8/0/8px
add the border: 0px statement below
and they all go to 0/0/0/0px
*/
border: 0px;
}
.ccs-shared .ccs-button_bar a, .ccs-shared .ccs-button_subbar_above a, .ccs-shared .ccs-button_subbar_below a {
float: left;
height: 19px;
}
.ccs-shared .ccs-button_bar li, .ccs-shared .ccs-button_subbar_above li, .ccs-shared .ccs-button_subbar_below li {
margin-right: 0 !important;
}
/* side by side select */
/*
Takes a multi-select box and makes it so you can click to move elements from a selected list to a non-selected list.
*/
.sideBySideSelect {
user-select: none;
-moz-user-select: none;
-webkit-user-select: none;
min-width:340px;
}
.sideBySideSelect div.deselected, .sideBySideSelect div.selected {
border: 1px solid #333;
float: left;
width: 45%;
height: 150px;
background: #fff;
overflow: auto;
}
.sideBySideSelect .spacer {
padding-top: 50px;
width: 30px;
float: left;
}
.sideBySideSelect .spacer a {
display: block;
width: 16px;
height: 16px;
text-indent: -900px;
margin: 5px auto;
}
.sideBySideSelect .spacer .moveRight {
background: url(/static/art/led-icons/arrow_right.png) no-repeat;
}
.sideBySideSelect .spacer .moveLeft {
background: url(/static/art/led-icons/arrow_left.png) no-repeat;
}
/* help text links */
.ccs-help_link, .ccs-info_link {
display:-moz-inline-box; /* FF2 */
display:inline-block; /* webkit and FF3 */
#zoom: 1; /* set hasLayout:true to mimic inline-block */
#display:inline;
border:0;
padding:0;
vertical-align:middle;
#vertical-align: auto; /* makes TextBox,Button line up w/native counterparts on IE6 */
position: relative;
width: 14px;
height: 14px;
background: url(/static/art/help.png);
text-indent: -200px;
overflow: hidden;
}
.ccs-info_link {
background: url(/static/art/info.png);
}
[data-filters*=ArtInput] {
display: none;
}
[data-size-to-width], [data-size-to-height] {
overflow: auto;
}
.vertical .art-splitview-splitter {
box-shadow: 0px -1px 3px #aaa;
-webkit-box-shadow: 0px -1px 3px #aaa;
-moz-box-shadow: 0px -1px 3px #aaa;
}