body {margin: 0px; background-color: #FFFFFF; font-family: Arial, Helvetica, sans-serif; font-size: 9pt; color: #444444;} form {display:inline} /* globally turns off image borders. Means you don't have to set border='0' on every linked image. added 12/2 */ img {border:0px;} table { text-align: left;} /* ##### TEXT STYLES ##### */ a {color: #2462aa; text-decoration:none;} /* changed from 3366CC on 01-06-2010 */ a:hover {color: #f4792a; text-decoration: underline;} /* used to add a 'file' icon next to a link. good for pdf's and downloads */ a.file {background:url(/biz/images/trial/file_icon-17x17.png) no-repeat; padding:2px 18px 3px 22px; display:inline-block;} a.file:hover {color:#f4792a;} /* b {color:#666666;} */ /* any block of text more than two lines should have a P tag around it. Any block of text should not run more than 600px wide. */ p {line-height:140%; font-weight:normal; margin-bottom:30px; margin-top:0px; font-size: 9pt;} li {margin-bottom:6px; font-weight:normal; margin-top:0px;} /* used to align groups of horizontal buttons. A div with zbutton_group should be placed around the buttons. see syndication for examples */ div.zbutton_group {text-align:right;} /*section or page header. There should only be one of these per page and it should be at the very top.*/ h1 {font-size: 13pt; color: #6F6F6F; margin: 0px 0px 15px 0px;} /* used for the heading of section of text blocks each with it's own sub heading. must be followed by 2+ h3's. can be directly followed by a P ONLY if it is introductional text, followed by a series of h3's */ h2 {font-size: 11pt; color: #5A75AC; margin: 0px 0px 6px 0px; font-family:"Trebuchet MS", sans-serif} /* used for a subsection of a text block. Should be preceded by a h2, though not necessarily immediately below it. should be followed by a P , TABLE or LIST. */ h3 {font-size: 10pt; color: #666666; margin: 0px 0px 3px 0px; font-weight: bold;} /* used in lists to denote sections. For instance, to separate DIV's in layouts and emails */ h4 {font-size: 9pt; color: #666666; margin: 5px 0px 3px 0px; font-weight: bold;} /* if you want to display a hint or tip, give it the hint class */ .hint {font-size:7pt; } /* used on successful save. Put messagin in a div with a class of success */ div.success {margin:3px 0px 3px 0px; font-size:9pt; color:#2461AA; font-weight:bold; padding:0px 10px 0px 10px; } /* used on warnings (ie - a save occured, but warnings occured). Put messagin in a div with a class of warning */ div.warning {margin:3px 0px 3px 0px; font-size:9pt; color:#d27200; font-weight:bold; padding:0px 10px 0px 10px; } /* used on error (ie - no save occured). Put messagin in a div with a class of error */ div.error {margin:3px 0px 3px 0px; font-size:9pt; color:#CC0000; font-weight:bold; padding:0px 10px 0px 10px; } /* 'link selected' is used where you have a list of links and, once one is clicked, the selected link needs to highlight. An example of this would be in the sitebuilder when a layout or email template has DIV's present */ .link {font-size: 9pt;} .link_selected {color:#FFFFFF; font-size:9pt; font-weight:bold;} .link_selected:hover {color:#FFFFFF;} td.link {padding-bottom:2px; padding-left: 5px;} td.link_selected {padding:2px; padding-left: 5px; background-color:#3366CC;} /* ## END TEXT STYLES ## */ /* ##### HR STYLES ##### */ /* any horizontal rule ( HR ) in the system should have the ruler class applied to it. */ .ruler {color:#CCCCCC; height:1px;} /* ## END HR STYLES ## */ /* ##### FORM STYLES ##### */ /* button should be used when there is a group of buttons next to each other. Vertical lists of buttons should all have the same width. */ .button {-moz-border-radius: 4px; background:url(/biz/images/header/ui_backgrounds-180x400.gif) repeat-x right -323px; padding:1px 5px; cursor:pointer; border:solid 1px #c4c4c4; font-weight:bold; color:#666666; font-size:11px; text-shadow:0 0 3px #ffffff;} /*button2 should be used when a button is all by its lonesome if a group of buttons is present nearby, but this button stands alone, it still gets the button2 class see product editor for examples. */ .button2, .savebutton {-moz-border-radius: 4px; background:url(/biz/images/header/ui_backgrounds-180x400.gif) repeat-x right -277px; padding:1px 5px; cursor:pointer; border:solid 1px #8db2e3; font-weight:bold; color:#ffffff; font-size:11px; text-shadow:0 0 3px #1c62ac;} .button:hover, .button2:hover, .savebutton:hover, .minibutton:hover {background:url(/biz/images/header/ui_backgrounds-180x400.gif) repeat-x right -300px; color:#dd6a15; text-shadow:0 0 3px #ffffff; border-color:#efc080} /* a mini button is something which is typically used on a table row, often there will be many, and they are infrequently used.. */ .minibutton {font-family:Arial, Helvetica; font-size: 9px; border:outset 1px; font-weight:normal; -moz-border-radius: 2px; background:url(/biz/images/header/ui_backgrounds-180x400.gif) repeat-x right -323px; padding:1px 5px; cursor:pointer text-align:left; margin-bottom:0px; cursor:pointer; } /* global fields that affect all form select lists and input boxes */ select {font-family: sans-serif, arial, verdana; font-size: 8pt; color: #444444;} input {font-family: sans-serif, arial, verdana; font-size: 9pt; color: #444444;} /* ## END FORM STYLES ## */ /* ##### TABLE STYLES ##### */ /* used for navcat drop down. also used in setup for section header background colors */ .navcat_Z { background-color: #ffd9a7; color: #333333; border: 1px solid #efc080; } .navcat_0 { background-color: #a6cdf7; color: #333333; border: 1px solid #CCCCCC; } .navcat_1 { background-color: #b9d7f8; color: #333333; border: 1px solid #CCCCCC; } .navcat_2 { background-color: #cae1fa; color: #333333; border: 1px solid #CCCCCC; } .navcat_3 { background-color: #daebfc; color: #333333; border: 1px solid #CCCCCC; } .navcat_4 { background-color: #f2f7fe; color: #333333; border: 1px solid #CCCCCC; } .navcat_5 { background-color: #ffffff; color: #333333; border: 1px solid #CCCCCC; } /* These styles should be used anytime you need to create a border on a cell or table. use left, right, etc for a border on a single side. these are used in the product editor to create lines and headers */ /* the divider class was set to match the same as navcat_0, which seems to be the first editable panel color (navcat editor) */ .divider {background:url(/biz/images/divider_bluefade_bkground.jpg) repeat-y; } .border_top { border-top:#dedede 1px solid;} .border_right { border-right:#dedede 1px solid;} .border_bottom { border-bottom:#dedede 1px solid;} .border_left { border-left:#dedede 1px solid;} .border-gray {border:#dedede 1px solid;} /* zoovytable is the outer fixed (non-scrollable table) zoovytableheader is header in scrollable table (headers are separate table to accomodate scrollbar) zoovytableframe is a "scrollable frame" inside each tr is r1/r0/rs/rx, and each td is 'cell' */ .zoovytable { vertical-align: top; text-align:left; font-family:Arial, Helvetica, sans-serif; border: 2px solid #c3daf9; margin-bottom:10px; } /* if this ends up looking like ass, remove the background attribute and change it to background:#d7ecff; */ .zoovytableheader { padding: 3px 3px 3px 5px; background:url(/biz/images/header/ui_backgrounds-180x400.gif) repeat-x right -353px ; color:#595959; border:none; font-size:12px; font-weight:bold; } .zoovysub1header { padding: 2px 0px 3px 5px; font-family: sans-serif; color:#555555; background-color:#a6cdf7; border:none; font-size:8pt; font-weight:bold; } /* this is used in the product editor. I don't know where else. in flexedit, it's used for the prompts. */ .zoovysub2header { padding: 2px 0px 3px 5px; font-family: sans-serif; color:#555555; background-color:#cae1fa; border:none; font-size:8pt; font-weight:bold; } .zoovytableframe { overflow:auto; height:100px; border:none; } /* sets the default font size of a table cell to the same as the body. */ td {font-size: 9pt;} /* alternating row colors for td. always start with r0 */ .r1 { color:#333333; background-color: #f5f5f5; font-size: 8pt; } .r0 { color:#333333; background-color: #FFFFFF; font-size: 8pt; } .rx { color:#333333; background-color: #FFCC66; font-size: 8pt; } /* added by B. not sure for what */ .rs { color:#333333; background-color: #FFCCCC; font-size: 8pt; } /* added by B. not sure for what */ .cell { font-family: sans-serif; font-size:8pt; } /* ## END TABLE STYLES ## */ div.box {background:#F0F2F9; border:1px solid #C0C4D4; margin-bottom:4px;} div.box_header {background: url(/biz/images/header/ui_links_bg-1x16.gif) repeat-x bottom #C6CCF3; padding:4px; font-size:14px; color:#555555; font-weight:bold;} div.box_body {padding:4px;} /* ##### UI STYLES - DO NOT CHANGE ##### */ /* all the stuff below was commented out for the header redesign on 01/06/10. remove later if nothing explodes. */ /* .header_button a {display:block; padding:0px 3px 0px 3px; border:solid 1px #91A1B5; text-decoration:none; font-size:11px; font-weight:bold; color:#91A1B5; text-align:center} .header_button_alert a {background-image:url(/biz/images/header/ui_button_bg.gif); display:block; padding:0px 3px 0px 3px; border:solid 1px #91A1B5; text-decoration:none; font-family:Arial, Helvetica, sans-serif; font-size:11px; font-weight:bold; color:#91A1B5; text-align:center} .alertbutton a:hover {text-decoration:underline;} */ /* this is for the links in the upper right corner */ /* .header_menu a {color:#91A1B5;} */ /* this is for the main tabs */ /* .header_tab_off {font-size:12px; color:#8F9FCA; font-family:"Trebuchet MS", arial, sans-serif; font-weight:bold; margin:0px 5px 0px 5px; text-decoration:none;} .header_tab_on {font-size:12px; color:#FFFFFF; font-family:"Trebuchet MS", arial, sans-serif; font-weight:bold; margin:0px 5px 0px 5px; text-decoration:none;} .header_tab_off:hover {text-decoration:none;} .header_tab_on:hover {text-decoration:none; color:#ffffff;} */ /* this is for the sub links that appear below the main tabs on specific pages. */ /* .header_sublink {color:#7784AB; text-decoration:none; padding:0px 10px 0px 10px;} .header_sublink_active {color:#FFFFFF; background-color:#99A5EA; text-decoration:none; padding:0px 10px 0px 10px;} */ /* THis grey is used for the login text at the top and splitters in the upper right corner. ## MAY ALSO BE USED IN THE UI ITSELF ##*/ .gray {color:#828282;} /* ## END UI STYLES ## */ /* ##### OLD UI STYLES - DO NOT CHANGE ##### */ /* top_menu is the class for the links in the upper right corner */ .top_menu {font-size: 8pt;} .bc_bg {background-image: url('/biz/images/tabs/bc_bg.gif')} /* main_menu is the class used for the main section links across the top of the UI. main_menu_selected is the class used when you are IN that paticular section to highlight the menu. */ .main_menu {font-size: 10pt; font-weight: bold; color: #283F9C; text-decoration: none;} .main_menu:hover {color: #ffffff;} .main_menu_selected {font-size: 10pt; font-weight: bold; color: #EEEEEE; text-decoration: none;} .main_menu_selected:hover {color: #ffffff;} .menu_bg {background-image: url('/biz/images/tabs/main_menu_bg.gif')} /* These are the classes used in the subsection tabs that appear at the top of some pages*/ .tab_menu_grey {filter:dropshadow(color=#cccccc, offx=1, offy=1); color: #666666; font-size: 8pt; text-decoration: none;} .tab_menu_blue {filter:dropshadow(color=#ccccff, offx=1, offy=1); color: #666666; font-size: 8pt; text-decoration: none;} .tab_menu_orange {filter:dropshadow(color=#330000, offx=1, offy=1); color: #CC3300; font-size: 8pt; text-decoration: none;} .tab_grey {background-image: url('/biz/images/tabs/tab_grey_bg.gif'); padding-bottom: 5px;} .tab_blue {background-image: url('/biz/images/tabs/tab_blue_bg.gif'); padding-bottom: 5px;} .tab_orange {background-image: url('/biz/images/tabs/tab_orange_bg.gif'); padding-bottom: 5px;} .horz_bg {background-image: url('/biz/images/tabs/horz_bg.gif')} .bottom_bg {background-image: url('/biz/images/tabs/bottom_bg.gif')} .horz_shadow {background-image: url('/biz/images/tabs/horz_shadow.gif');} /* ## END OLD UI STYLES ## */ /* ##### This stuff is either depricated, i don't know what it is, or I haven't gotten to yet. ##### */ .small {font-size: 8pt;} /* this is used in the setup page */ .big_link {font-size: 12pt; font-weight: bold;} .table_stroke {border-style: solid; border-width: 1px; border-color: #3366CC;} .table_head {background-color: #C5D5FC;} .table_top {background-color: #C5D5FC;} .header {color: #555555; font-size: 10pt; font-weight: bold;} .table_outline {border:1px solid #3366CC; background-color:#3366CC;} .table_colhead {background-color:#C5D5FC;} .text_heading {color:#555555; font-size:11pt; font-weight:bold;} .text_colhead {color:#555555; font-size:10pt; font-weight:bold;} .table_bg0 {background-color:#FFFFFF;} /* rows are numbered 0-1 NOT 1-2 !!!!! */ .table_bg1 {background-color:#B8CBF1;} .table_bg2 {background-color:#FFFFFF;} .bold {font-weight:bold;} .white {color: #ffffff;} .success {color: #000066; font-weight: bold;} .alert {color: #FF0000; font-weight: bold;} .light {background-color: #B8CBF1;} .white_bg {background-color: #FFFFFF;} .lgrey { background-color: #F2F2F2;} .warning {background-color: #F5E5CD;} .yeehaw {background-color: #B9D1B9;} .captainibs {background-color: #E0B7B7;} .yellow_bg {background-color: #FFCC33;} .item_on {background-color: #f0f0f0;} .item_off {background-color: #ffffff;} .column {background-image: url('/biz/images/tabs/column.gif')} .hint_header { width: 100%;} .navtext { width:150px; font-family: verdana, arial, sans serif; font-size:8pt; border-width:2px; border-style:outset; border-color:darkgray; layer-background-color:#99CCFF; background-color:#99CCFF; color:black; } /* subtitle0 should be used on a div below an href to explain what it is about, text only, no links, etc. subtitle1 should be used on a div below an href, where no padding is wanted, use subtitle_margin to manually add padding. ) subtitle1_margin -- see subtitle1 */ .subtitle0 { font-size: 7pt; line-height: 9pt; margin-bottom: 10px; margin-top: 2px; } .subtitle1 { font-size: 7pt; line-height: 9pt; margin-bottom: 6px; margin-top: 2px;} .subtitle1_margin { margin-bottom: 10px; } /* jordan 12/16/05 - used for product editor - the rest that were here have been moved into the table section. */ .margin {margin:4px;} .gray {color:#828282;} .blue {color:#6479A5;} /* header tabs and on-hover styles - added on 1/6/2010 for the new header. The styles from the header that was worked on last year in Dec. can be found in the 20100105 standard.css backup. These styles can probably be removed if we implement the extjs header. */ /* common styling */ #header {font-size:12px;} /* styles for the top level tabs */ #header ul, li {list-style:none; margin:0px; padding:0px; font-family:Arial, Helvetica, sans-serif; z-index:500; position:relative;} #header li { float:left; margin-right:2px;} /* sets the background. a span is used inside the href tag so that a left and right background image can be used. */ #menutabs li a span {background:url(/biz/images/header/ui_backgrounds-180x400.gif) no-repeat left top; padding-left:10px; line-height:22px; display:block;} #menutabs li a {background:url(/biz/images/header/ui_backgrounds-180x400.gif) no-repeat right top; padding-right:10px; display:block; text-decoration:none; color:#2462aa; font-size:13px;} /* in focus state for tabs. also compensates for hover state, so focus tab has no hover */ #menutabs li.on span, #menutabs li.on:hover span {background:url(/biz/images/header/ui_backgrounds-180x400.gif) no-repeat left -31px;} #menutabs li.on a, #menutabs li.on a:hover {background:url(/biz/images/header/ui_backgrounds-180x400.gif) no-repeat right -31px; color:#2462aa; font-weight:bold} /* hover state */ #menutabs li:hover span {background:url(/biz/images/header/ui_backgrounds-180x400.gif) no-repeat left -62px;} #menutabs li a:hover {background:url(/biz/images/header/ui_backgrounds-180x400.gif) no-repeat right -62px; color:#FF3300;} #sublinks {background:url(/biz/images/header/ui_backgrounds-180x400.gif) repeat-x right -93px; height:31px; top:-1px; position:relative; z-index:10;} #sublinks a.header_sublink {padding: 0 10px; background:url(/biz/images/header/ui_backgrounds-180x400.gif) no-repeat right -176px;} #sublinks a, #sublinks a span {line-height:28px; display:block; text-decoration:none; font-size:11px; float:left;} #sublinks a.header_sublink_active span, #sublinks a.header_sublink_active:hover span {background:url(/biz/images/header/ui_backgrounds-180x400.gif) no-repeat left -210px; padding-left:10px;} #sublinks a.header_sublink_active, #sublinks a.header_sublink_active a:hover {background:url(/biz/images/header/ui_backgrounds-180x400.gif) no-repeat right -210px; padding-right:10px; padding-left:0; color:#ffffff;} #sublinks a.header_sublink:hover span {background:url(/biz/images/header/ui_backgrounds-180x400.gif) no-repeat left -247px; padding-left:10px;} #sublinks a.header_sublink:hover {background:url(/biz/images/header/ui_backgrounds-180x400.gif) no-repeat right -247px; padding-left:0;} #menu.menu_alert {color:#990000; text-decoration:blink; Shadow(Color=#ffffff, Direction=135, Strength=1); }