You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@ofbiz.apache.org by ja...@apache.org on 2007/03/03 09:01:02 UTC
svn commit: r514097 - /ofbiz/trunk/framework/images/webapp/images/maincss.css
Author: jacopoc
Date: Sat Mar 3 00:01:01 2007
New Revision: 514097
URL: http://svn.apache.org/viewvc?view=rev&rev=514097
Log:
Applied patch from Adrian Crum (OFBIZ-754) to refactor/reorganize according to best practices the backoffice cascading stylesheets definitions: this is still a work in progress.
Modified:
ofbiz/trunk/framework/images/webapp/images/maincss.css
Modified: ofbiz/trunk/framework/images/webapp/images/maincss.css
URL: http://svn.apache.org/viewvc/ofbiz/trunk/framework/images/webapp/images/maincss.css?view=diff&rev=514097&r1=514096&r2=514097
==============================================================================
--- ofbiz/trunk/framework/images/webapp/images/maincss.css (original)
+++ ofbiz/trunk/framework/images/webapp/images/maincss.css Sat Mar 3 00:01:01 2007
@@ -20,133 +20,173 @@
/* This CSS file is used for all OFBiz applications EXCEPT ecommerce. */
/* See the "ecommain.css" file for ecommerce. */
-/* ===== General Styles ===== */
-BODY {
-font-size: 62.5%;
-text-decoration: none;
-font-family: Verdana, Arial, Helvetica, sans-serif;
-background: #D4D0C8;
+/* ===== Resets/Browser Normalization ===== */
+
+blockquote, body, div, dl, dt, dd, fieldset, form, h1, h2, h3, h4, h5, h6,
+img, input, li, ol, p, select, span, td, textarea, th, ul {
+border-style: none;
margin: 0;
+padding: 0;
}
-FORM {
-margin: 0;
+a, address, body, caption, cite, code, dfn, em, strong, th, var {
+font-style: normal;
+font-weight: normal;
+text-decoration: none;
+}
+
+body, caption, th {
+text-align: left;
+}
+
+h1, h2, h3, h4, h5, h6 {
+font-size: 100%;
+}
+
+ol, ul {
+list-style: none;
}
-INPUT {
+/* ===== Basic Element Styles ===== */
+
+a, a:visited {
+color: #000099;
+font-weight: bold;
+}
+
+a:hover, a:active {
+text-decoration: underline;
+}
+
+body, textarea, input, select {
font-family: Verdana, Arial, Helvetica, sans-serif;
-background: #FFFFFF;
+}
+
+body {
+background: #D4D0C8;
+font-size: 62.5%;
+position: relative;
+}
+
+input[type="radio"], input[type="checkbox"] {
font-size: 1.1em;
-background: #ffffff;
-border: #999999 solid 0.1em;
margin: 0.2em;
}
-/* The "smallSubmit" class can be used to decorate links (A elements) and make them similar to form's buttons. */
-INPUT[type="submit"], .smallSubmit {
-font-family: Verdana, Arial, Helvetica, sans-serif;
-font-size: 1.1em;
-font-weight: bold;
-text-decoration: none;
-color: #000099;
-background: #ffffff;
+input[type="text"], input[type="password"], .inputBox {
+/* inputBox is deprecated */
+background-color: #ffffff;
border: #999999 solid 0.1em;
+font-size: 1.1em;
margin: 0.2em;
+padding: 0.1em 0 0.1em 0;
+}
+
+input[type="submit"], input[type="button"],
+input[type="reset"] {
+background-color: #ffffff;
+border: #999999 solid 0.1em;
+color: #000099;
+font-size: 1em;
+font-weight: bold;
}
-INPUT[type="submit"]:hover, .smallSubmit:hover {
+input[type="submit"]:hover {
color: #ff0000;
+cursor: pointer;
text-decoration: underline;
}
-SELECT {
-font-family: Verdana, Arial, Helvetica, sans-serif;
-background: #FFFFFF;
+input[type="file"] {
font-size: 1.1em;
-background: #ffffff;
-border: #999999 solid 0.1em;
-margin: 0.2em;
+height: 1.6em; /* force ctrl to scale with text */
}
-UL {
-margin-top: 0;
-margin-bottom: 0;
+select, .selectBox {
+/* selectBox is deprecated */
+background-color: #ffffff;
+border: #999999 solid 0.1em;
+font-size: 1.1em;
+height: 1.6em; /* force ctrl to scale with text */
+margin: 0.1em;
}
-H1 {
-margin: 0;
+h1, .head1 {
font-size: 1.6em;
font-weight: bold;
-color: #000099;
}
-H2 {
-margin: 0;
-font-size: 1.2em;
+h2, .head2 {
+font-size: 1.3em;
font-weight: bold;
-color: #000000;
}
-H3 {
-margin: 0;
+h3, .head3 {
font-size: 1.1em;
font-weight: bold;
-color: #000000;
}
-textarea {
-font-family: Verdana, Arial, Helvetica, sans-serif;
+/* <h> element colors deprecated */
+h1, .head1 {
+color: #000099;
}
-TH, .tableheadtext {
-font-size: 1em;
-font-weight: bold;
-text-decoration: none;
+h2, .head2, h3, .head3 {
color: #000000;
}
-.endcolumns {
-clear: both;
-height: 0;
-visibility: hidden;
+textarea, .textAreaBox {
+/* textAreaBox is deprecated */
+background-color: #ffffff;
+border: #999999 solid 0.1em;
+font-size: 1.1em;
}
-
-.head1 {
-margin: 0;
-font-size: 1.6em;
+th, th a, .tableheadtext {
+/* tableheadtext is deprecated */
+color: #000000;
font-weight: bold;
-color: #000099;
}
-.head2 {
-margin: 0;
-font-size: 1.2em;
+/* ===== Legacy Styles ===== */
+
+/* The "smallSubmit" class can be used to decorate
+links (A elements) and make them similar to form's buttons. */
+.smallSubmit, .smallSubmit:visited {
+background-color: #ffffff;
+border: #999999 solid 0.1em;
+color: #000099;
+font-size: 1em;
font-weight: bold;
-color: #000000;
+margin: 0.2em;
+padding: 0.1em 0.2em 0.1em 0.2em;
}
-.head3 {
-margin: 0;
-font-size: 1.1em;
-font-weight: bold;
-color: #000000;
+.smallSubmit:hover, .smallSubmit:active {
+color: #ff0000;
+text-decoration: none;
+}
+
+.endcolumns {
+/* deprecated - use .clear */
+clear: both;
+height: 0;
+visibility: hidden;
}
.info {
-margin: 0;
-font-style: normal;
color: #000000;
+font-style: normal;
}
DIV.graybox {
-font-weight: bold;
-background: #CCCCCC;
+background-color: #CCCCCC;
border: 0.1em solid #000000;
-text-align: center;
+font-weight: bold;
margin: 0.2em auto;
-width: auto;
padding: 0.4em;
+text-align: center;
+width: auto;
}
DIV.tabletexthidden {
@@ -154,20 +194,18 @@
}
A.tabletext, DIV.tabletext, SPAN.tabletext, P.tabletext, .tabletext {
-text-decoration: none;
+/* deprecated */
}
A.tabletext:hover {
-text-decoration: underline;
+/* deprecated */
}
.tabletextright {
-text-decoration: none;
text-align: right;
}
.tabletextcenter {
-text-decoration: none;
text-align: center;
}
@@ -180,217 +218,168 @@
}
.headerboxoutside {
-background: #FFFFFF;
-padding: 0;
+background-color: #FFFFFF;
}
.headerboxtop {
-background: #FFFFFF;
-padding: 0.4em;
+background-color: #FFFFFF;
border-color: #FFFFFF;
border-style: solid;
border-width: 0.1em 0.1em 0 0.1em;
+padding: 0.4em;
}
.headerboxbottom {
-background: #FFFFFF;
-padding: 0;
+background-color: #FFFFFF;
border-color: #FFFFFF;
border-style: solid;
border-width: 0 0.1em 0.1em 0.1em;
}
.boxhead {
-margin: 0;
+color: #FFFFFF;
font-size: 1.1em;
font-weight: bold;
-text-decoration: none;
-color: #FFFFFF;
}
.boxlink {
- float:right;
+float:right;
}
DIV.boxtop {
-margin: 0 auto 0 auto;
-padding: 0;
-text-align: center;
-background: #000099;
-padding: 0.1em 0.4em 0.1em 0.4em;
+background-color: #000099;
border-color: #999999;
border-style: solid;
-border: 0;
+margin: 0 auto 0 auto;
+padding: 0.1em 0.4em 0.1em 0.4em;
+text-align: center;
}
DIV.boxhead-left {
border: none;
+color: #FFFFFF;
float: left;
-margin: 0;
-padding: 0;
-width: auto;
font-size: 1.1em;
font-weight: bold;
-text-decoration: none;
-color: #FFFFFF;
+width: auto;
}
DIV.boxhead-fill {
-margin: 0;
-padding: 0;
border: none;
-text-align: center;
-width: 0;
+color: #FFFFFF;
font-size: 1.1em;
font-weight: bold;
-text-decoration: none;
-color: #FFFFFF;
+text-align: center;
+width: 0;
}
DIV.boxhead-right {
border: none;
+color: #FFFFFF;
float: right;
-margin: 0;
-padding: 0;
-width: auto;
font-size: 1.1em;
font-weight: bold;
-text-decoration: none;
-color: #FFFFFF;
+width: auto;
}
A.boxheadbutton {
-margin: 0;
-font-size: 1.1em;
-font-weight: bold;
-text-decoration: none;
color: #FFFFFF;
+font-size: 1.1em;
}
A.boxheadbutton:hover {
-margin: 0;
-font-size: 1.1em;
-font-weight: bold;
-text-decoration: none;
color: #ff0000;
+text-decoration: none;
}
.boxoutside {
-background: #FFFFFF;
-padding: 0;
-border-color: #999999;
-border-style: solid;
-border-width: 0.1em;
+background-color: #FFFFFF;
+border: 0.1em solid #999999;
}
.boxtop {
-background: #000099;
+background-color: #000099;
+border: 0 solid #999999;
padding: 0.1em 0.4em 0.1em 0.4em;
-border-color: #999999;
-border-style: solid;
-border-width: 0;
}
.boxbottom {
-background: #FFFFFF;
+background-color: #FFFFFF;
+border: 0 solid #999999;
padding: 0.4em;
-border-color: #999999;
-border-style: solid;
-border-width: 0;
}
.button {
-border-style: outset;
-border-color: #9999CC;
-border-width: 0.2em;
-background: #dddddd;
+background-color: #dddddd;
+border: 0.2em outset #9999CC;
padding-right: 0.5em;
padding-left: 0.5em;
}
/* ===== Tab/Button Bar Styles ===== */
.tabContainer {
-background: #FFFFFF;
-padding-top: 0.4em;
+background-color: #FFFFFF;
margin-bottom: 1em;
+padding-top: 0.4em;
}
A.tabButton {
-font-weight: bold;
-text-decoration: none;
+background-color: #D4D0C8;
+border: solid #000099 0.1em;
color: #000099;
-background: #D4D0C8;
+line-height: 2em;
padding: 0.1em 0.5em 0.1em 0.5em;
white-space: nowrap;
-border: solid #000099 0.1em;
-line-height: 2em;
}
A.tabButton:hover {
+background-color: #000099;
color: #FFFFFF;
-background: #000099;
-border: solid #000099 0.1em;
}
A.tabButtonSelected {
-font-weight: bold;
-text-decoration: none;
+background-color: #000099;
+border: solid #000099 0.1em;
color: #FFFFFF;
-background: #000099;
padding: 0.1em 0.5em 0.1em 0.5em;
white-space: nowrap;
-border: solid #000099 0.1em;
}
A.tabButtonSelected:hover {
color: #FFFFFF;
-border: solid #000099 0.1em;
}
A.tableheadbutton {
-font-weight: bold;
-text-decoration: none;
color: #000000;
}
A.tableheadbutton:hover {
-font-weight: bold;
-text-decoration: underline;
color: #ff0000;
}
.browsecategorytext {
-font-weight: bold;
-text-decoration: none;
color: #000099;
+font-weight: bold;
text-indent: -1em;
}
A.browsecategorybutton {
-font-weight: bold;
-text-decoration: none;
-color: #000099;
-}
-
-A.browsecategorybutton:hover {
color: #000099;
-text-decoration: underline;
}
.browsecategorybuttondisabled {
-font-weight: bold;
-text-decoration: none;
color: #333333;
+font-weight: bold;
}
A.buttontext, .buttontextdisabled {
-font-weight: bold;
-text-decoration: none;
-background: #ffffff;
+background-color: #ffffff;
border: #999999 solid 0.1em;
-margin: 0.2em 0.2em 0.2em 0.2em;
-padding: 0.1em 0.4em 0.1em 0.4em;
+font-weight: bold;
line-height: 1.8em;
+margin: 0.2em;
+padding: 0.1em 0.4em 0.1em 0.4em;
+/*white-space: nowrap;*/
}
A.buttontext {
@@ -399,18 +388,14 @@
A.buttontext:hover {
color: #ff0000;
-text-decoration: underline;
}
A.linktext {
-font-weight: bold;
-text-decoration: none;
color: #000099;
}
A.linktext:hover {
color: #ff0000;
-text-decoration: underline;
}
.buttontextdisabled {
@@ -418,336 +403,293 @@
}
A.headerbuttontext {
-font-weight: bold;
-text-decoration: none;
color: #000099;
}
-
A.headerbuttontext:hover {
color: #000000;
-text-decoration: underline;
}
.submenutextinfo {
+border-right: 0.1em solid #5886C6;
+color: #ffffff;
font-size: 0.9em;
font-weight: bold;
-text-decoration: none;
-color: #ffffff;
padding-left: 0.5em;
padding-right: 0.5em;
-border-right: 0.1em solid #5886C6
}
.submenutext, A.submenutext, A.submenutext:visited {
+border-right: 0.1em solid #5886C6;
+color: #ffff00;
font-size: 0.9em;
font-weight: bold;
-text-decoration: none;
-color: #ffff00;
padding-left: 0.2em;
padding-right: 0.5em;
-border-right: 0.1em solid #5886C6
}
A.submenutext:hover {
color: #ffff00;
-text-decoration: underline;
}
.submenutextdisabled, A.submenutextdisabled {
+border-right: 0.1em solid #5886C6;
+color: #CCCCCC;
font-size: 0.9em;
font-weight: bold;
-text-decoration: none;
-color: #CCCCCC;
padding-left: 0.2em;
padding-right: 0.5em;
-border-right: 0.1em solid #5886C6
}
A.submenutextdisabled:hover {
-font-weight: bold;
-text-decoration: underline;
color: #ffff00;
}
.submenutextinforight {
+color: #ffffff;
font-size: 0.9em;
font-weight: bold;
-text-decoration: none;
-color: #ffffff;
padding-left: 0.2em;
}
.submenutextright, A.submenutextright {
+color: #ffff00;
font-size: 0.9em;
font-weight: bold;
-text-decoration: none;
-color: #ffff00;
padding-left: 0.2em;
}
A.submenutextright:hover {
color: #ffff00;
-text-decoration: underline;
}
.submenutextrightdisabled, A.submenutextrightdisabled {
+color: #CCCCCC;
font-size: 0.9em;
font-weight: bold;
-text-decoration: none;
-color: #CCCCCC;
padding-left: 0.2em;
}
A.submenutextrightdisabled:hover {
-text-decoration: underline;
color: #ffff00;
}
A.lightbuttontext {
-font-weight: bold;
-text-decoration: none;
-color: #ffff00;
border: none;
+color: #ffff00;
}
A.lightbuttontext:hover {
color: #ffff00;
-text-decoration: underline;
}
A.lightbuttontextsmall {
-font-size: 0.8em;
-font-weight: bold;
-text-decoration: none;
-color: #ffff00;
border: none;
+color: #ffff00;
+font-size: 0.8em;
}
A.lightbuttontextsmall:hover {
color: #ffff00;
-text-decoration: underline;
}
.lightbuttontextdisabled {
-font-weight: bold;
-text-decoration: none;
color: #CCCCCC;
+font-weight: bold;
}
A.buttontextbig, .buttontextbigdisabled {
+background-color: #ffffff;
+border: #999999 solid 0.1em;
font-size: 1.5em;
font-weight: bold;
-text-decoration: none;
-background: #ffffff;
-border: #999999 solid 0.1em;
margin: 0.2em;
padding: 0.1em 0.4em 0.1em 0.4em;
}
+
A.buttontextbig {
color: #000099;
}
+
.buttontextbigdisabled {
color: #CCCCCC;
}
+
A.buttontextbig:hover {
color: #ff0000;
-text-decoration: underline;
}
A IMG.imageborder {
-border-style: solid;
-border-width: 0.1em;
-border-color: #999999;
+border: 0.1em solid #999999;
}
.headerButtonLeft {
-font-weight: bold;
-text-decoration: none;
+background-color: #B4B0AA;
color: #000099;
-background: #B4B0AA;
+font-weight: bold;
border-right: solid #ffffff 0.1em;
padding-right: 1em;
padding-left: 1em;
}
.headerButtonLeft:hover {
-background: #D4D0C8;
+background-color: #D4D0C8;
color: #000000;
-text-decoration: underline;
}
.headerButtonLeftSelected {
-font-weight: bold;
-text-decoration: none;
-color: #000099;
-background: #D4D0C8;
+background-color: #D4D0C8;
border-right: solid #ffffff 0.1em;
+color: #000099;
+font-weight: bold;
padding-right: 1em;
padding-left: 1em;
}
.headerButtonRight {
-font-weight: bold;
-text-decoration: none;
-color: #000099;
-background: #B4B0AA;
+background-color: #B4B0AA;
border-left: solid #ffffff 0.1em;
+color: #000099;
+font-weight: bold;
padding-right: 1em;
padding-left: 1em;
text-align: right;
}
.headerButtonRight:hover {
-background: #D4D0C8;
+background-color: #D4D0C8;
color: #000000;
-text-decoration: underline;
}
.headerButtonRightSelected {
-font-weight: bold;
-text-decoration: none;
-color: #000099;
-background: #D4D0C8;
+background-color: #D4D0C8;
border-left: solid #ffffff 0.1em;
+color: #000099;
+font-weight: bold;
padding-right: 1em;
padding-left: 1em;
}
.headerCenter {
-background: #B4B0AA;
+background-color: #B4B0AA;
+color: #000000;
+font-weight: bold;
padding-right: 1em;
padding-left: 1em;
-font-weight: bold;
-text-decoration: none;
-color: #000000;
}
A.headerCenter {
-font-weight: bold;
-text-decoration: none;
+background-color: #D4D0C8;
color: #000099;
-background: #D4D0C8;
+font-weight: bold;
padding-right: 1em;
padding-left: 1em;
}
A.headerCenter:hover {
-background: #D4D0C8;
+background-color: #D4D0C8;
color: #000000;
-text-decoration: underline;
}
.headerCenterSelected {
-background: #D4D0C8;
-padding-right: 1em;
-padding-left: 1em;
+background-color: #D4D0C8;
+color: #000000;
font-size: 1.1em;
font-weight: bold;
-text-decoration: none;
-color: #000000;
+padding-right: 1em;
+padding-left: 1em;
}
.headerCompanyName {
-margin: 0;
+color: #000099;
font-size: 1.6em;
font-weight: bold;
-color: #000099;
white-space: nowrap;
}
.headerCompanySubtitle {
-margin: 0;
-font-size: 0.8em;
color: #330099;
+font-size: 0.8em;
white-space: nowrap;
}
.insideHeaderText {
-font-weight: bold;
color: #000000;
+font-weight: bold;
}
A.insideHeaderLink {
-font-weight: bold;
-text-decoration: none;
color: #000099;
}
A.insideHeaderLink:hover {
color: #000000;
-text-decoration: underline;
}
.insideHeaderDisabled {
-font-weight: bold;
-text-decoration: none;
color: #666666;
+font-weight: bold;
}
.headersmalltext {
+color: #000000;
font-size: 1.1em;
font-weight: bold;
-color: #000000;
}
+
a.headersmalllink {
font-size: 1.1em;
-font-weight: bold;
color: #000099;
-text-decoration: none;
}
+
a.headersmalllink:hover {
color: #ff0000;
}
-HR.sepbar {
-width: 100%;
-height: 0.1em;
-background: #999999;
+hr, .sepbar {
+/* .sepbar deprecated */
+background-color: #999999;
border: 0;
+height: 0.1em;
+margin: 0.5em 0 0.5em 0;
+/*width: 100%;*/
}
.errorMessage {
-margin: 0;
+color: #ff0000;
font-size: 1.1em;
font-weight: bold;
-color: #ff0000;
}
.eventMessage {
-margin: 0;
+color: #000099;
font-size: 1.1em;
font-weight: bold;
-color: #000099;
}
.ontab {
-font-size: 1.1em;
-background: #000000;
-padding: 0.2em;
+background-color: #000000;
border-style: inset;
border-width: 0.3em;
+font-size: 1.1em;
+padding: 0.2em;
}
a.onlnk {
-font-size: 1.1em;
-font-weight: bold;
color: #FFFFFF;
-text-decoration: none;
+font-size: 1.1em;
padding: 0.2em;
}
.offtab {
-background: #CCCCCC;
-padding: 0.2em;
+background-color: #CCCCCC;
border-style: outset;
border-width: 0.3em;
+padding: 0.2em;
}
a.offlnk {
-font-weight: bold;
color: #000099;
-text-decoration: none;
padding: 0.2em;
}
@@ -756,11 +698,11 @@
}
.areaheader {
-font-weight: bold;
+background-color: #000000;
color: #FFFFFF;
-width: 100%;
-background: #000000;
+font-weight: bold;
padding: 0.2em;
+width: 100%;
}
.edittable {
@@ -770,78 +712,53 @@
}
.viewOneTR1 {
-background: #B4B0AA;
+background-color: #B4B0AA;
}
.viewOneTR2 {
-background: #D4D0C8;
+background-color: #D4D0C8;
}
.viewManyHeaderTR {
-background: #99CCFF;
+background-color: #99CCFF;
}
.viewManyTR1 {
-background: #D4D0C8;
+background-color: #D4D0C8;
}
.viewManyTR2 {
-background: #FFFFFF;
+background-color: #FFFFFF;
}
.editInputBox {
-background: #FFFFFF;
-font-size: 1.1em;
-background: #ffffff;
-border: #999999 solid 0.1em;
-margin: 0.2em;
-}
-
-.inputBox {
-background: #FFFFFF;
-font-size: 1.1em;
-background: #ffffff;
-border: #999999 solid 0.1em;
-margin: 0.2em;
-}
-
-.selectBox {
-font-size: 1.1em;
-background: #ffffff;
+background-color: #ffffff;
border: #999999 solid 0.1em;
-margin: 0.2em;
-}
-
-.textAreaBox {
font-size: 1.1em;
-background: #ffffff;
-border: #999999 solid 0.1em;
margin: 0.2em;
}
.radioButton {
-background: #FFFFFF;
+background-color: #FFFFFF;
font-size: 1.1em;
}
.checkBox {
-background: #FFFFFF;
+background-color: #FFFFFF;
font-size: 1.1em;
}
.mediumSubmit,.largeSubmit,.loginButton {
+background-color: #ffffff;
+border: #999999 solid 0.1em;
+color: #000099;
font-size: 1.4em;
font-weight: bold;
-text-decoration: none;
-color: #000099;
-background: #ffffff;
-border: #999999 solid 0.1em;
margin: 0.2em;
}
.mediumSubmit:hover,.largeSubmit:hover,.loginButton:hover {
color: #ff0000;
-text-decoration: underline;
}
.smallAltSubmit,.mediumAltSubmit,.largeAltSubmit {
@@ -865,12 +782,14 @@
clear: both;
padding-top: 0.2em;
}
+
.form-label {
float: left;
-width: 18em;
-text-align: right;
padding-top: 0.5em;
+text-align: right;
+width: 18em;
}
+
.form-field {
float: left;
margin-left: 1em;
@@ -883,18 +802,18 @@
}
.productsummary-container {
+border-top: #999 solid 0.1em;
margin-top: 0.5em;
margin-bottom: 0.5em;
-border-top: #999 solid 0.1em;
}
.productsummary {
-position: relative;
-padding: 0.5em;
border-bottom: #999 solid 0.1em;
/* using min-height as an alternative to clear: both; because that, in some browsers, will clear the top-level columns and not just in this div (Mozilla based, namely) */
min-height: 6em;
overflow: auto;
+padding: 0.5em;
+position: relative;
}
.productsummary .smallimage {
@@ -909,9 +828,9 @@
.productsummary .productbuy {
float: right;
-width: 13em;
margin: 0.5em;
text-align: right;
+width: 13em;
}
.productsummary .productinfo {
@@ -921,86 +840,87 @@
/* ===== Product Detail Styles ===== */
#productdetail #long-description {
+border-top: #999 solid 0.1em;
margin-top: 1em;
padding-top: 0.5em;
-border-top: #999 solid 0.1em;
}
#productdetail #reviews {
+border-top: #999 solid 0.1em;
margin-top: 1em;
padding-top: 0.5em;
-border-top: #999 solid 0.1em;
}
#productdetail #associated-products {
+border-top: #999 solid 0.1em;
margin-top: 1em;
padding-top: 0.5em;
-border-top: #999 solid 0.1em;
}
.treeWrapper {
-color:#000000;
-background:#ffffff;
+background-color: #ffffff;
+border-top: 0.1em solid #000000;
+border-left: 0.1em solid #000000;
+color: #000000;
font-size: 1.6em;
-font-weight:normal;
-text-align:left;
-text-decoration:none;
+font-weight: normal;
margin-left: 1.2em;
margin-top: 0.2em;
-border-top: 0.1em solid #000000;
-border-left: 0.1em solid #000000;
+text-align: left;
+text-decoration: none;
}
+
.lefthalf{
-left:0;
-width:49%;
-height:1%;
-margin:0% 1% 1% 0%;
-float:left;
+float: left;
+height: 1%;
+left: 0;
+margin: 0% 1% 1% 0%;
+width: 49%;
}
+
.righthalf {
-float:right;
-height:1%;
-width:49%;
-right:0;
-margin:0 0 1% 1%;
+float: right;
+height: 1%;
+margin: 0 0 1% 1%;
+right: 0;
+width: 49%;
}
+
.leftclear{
-height:1%;
clear: left;
+height: 1%;
}
+
.bothclear{
-height:1%;
+/* deprecated - use .clear */
clear: both;
+height: 1%;
}
/* ==== Styles For Form Widgets === */
.formTableBordered {
-width: 100%;
border: 0.1em solid #999999;
+width: 100%;
}
/* ==== Styles For The Html Log === */
.DEBUG {
-text-decoration: none;
color: #808080;
}
.WARN {
-text-decoration: none;
-font-weight: bold;
color: #0000ff;
+font-weight: bold;
}
.INFO{
-text-decoration: none;
color: #008000;
}
.ERROR {
-text-decoration: none;
-font-weight: bold;
-color: #ff0000;
border: 0.2em solid #ff0000;
+color: #ff0000;
+font-weight: bold;
}
/* ==== Styles Copied From tabstyles.css === */
@@ -1010,10 +930,10 @@
}
.treeitem {
+border: #888888 solid 0.1em;
color: #0000ff;
font-size: 1.4em;
font-weight: bold;
-border: #888888 solid 0.1em;
}
DIV.centerarea {
@@ -1040,52 +960,49 @@
}
.tabdowncenter {
-background-image: url(/images/tabs/tab_down_fill.gif);
background-color: #B4B0AA;
+background-image: url(/images/tabs/tab_down_fill.gif);
+color: #000000;
font-size: 1.05em;
text-align: center;
vertical-align: middle;
-color: #000000;
}
.tabdownleft {
-background-image: url(/images/tabs/tab_down_left.gif);
background-color: #B4B0AA;
-
+background-image: url(/images/tabs/tab_down_left.gif);
}
.tabdownright {
-background-image: url(/images/tabs/tab_down_right.gif);
background-color: #B4B0AA;
+background-image: url(/images/tabs/tab_down_right.gif);
}
.tabupcenter {
-background-image: url(/images/tabs/tab_up_fill.gif);
background-color: #D4D0C8;
+background-image: url(/images/tabs/tab_up_fill.gif);
+color: #000000;
font-size: 1.05em;
text-align: center;
vertical-align: middle;
-color: #000000;
}
.tabupleft {
-background-image: url(/images/tabs/tab_up_left.gif);
background-color: #D4D0C8;
+background-image: url(/images/tabs/tab_up_left.gif);
border: 0;
-padding: 0;
}
.tabupright {
-background-image: url(/images/tabs/tab_up_right.gif);
background-color: #D4D0C8;
+background-image: url(/images/tabs/tab_up_right.gif);
}
-A.tablink,A.tablink:hover,A.tablinkselected,A.tablinkselected:hover {
+A.tablink, A.tablink:hover, A.tablinkselected, A.tablinkselected:hover {
+color: #000000;
font-size: 1.05em;
-font-weight: bold;
text-align: center;
text-decoration: none;
-color: #000000;
}
A.tablink:hover,A.tablink:active,A.tablinkselected {
@@ -1094,37 +1011,31 @@
.apptitle {
background-color: #000099;
-line-height: 2em;
-font-size: 1.3em;
-font-weight: bold;
color: #FFFFFF;
display: block;
+font-size: 1.3em;
+font-weight: bold;
+line-height: 2em;
width: 100%;
}
DIV.row {
background-color: #B4B0AA;
margin: 0 auto 0 auto;
-padding: 0;
text-align: center;
}
DIV.col {
border: none;
float: left;
-margin: 0;
-padding: 0;
width: auto;
}
DIV.col-fill {
-font-weight: bold;
-text-decoration: none;
background-color: #B4B0AA;
-color: #000099;
-margin: 0;
-padding: 0;
border: none;
+color: #000099;
+font-weight: bold;
text-align: center;
width: 0;
}
@@ -1132,8 +1043,6 @@
DIV.col-right {
border: none;
float: right;
-margin: 0;
-padding: 0;
width: auto;
}
@@ -1145,7 +1054,8 @@
}
DIV.endcolumns {
- clear: both;
+/* deprecated - use .clear */
+clear: both;
}
DIV.simple-right-small {
@@ -1163,35 +1073,38 @@
DIV.screenlet {
background-color: #FFFFFF;
border: 0.1em solid #999999;
+height: auto !important;
+height: 1%;
margin-bottom: 1em;
-height:auto !important;
-height:1%
}
+
DIV.screenlet-header {
background-color: #000099;
+height: auto !important;
+height: 1%;
padding: 0.1em 0.4em 0.3em 0.4em;
-height:auto !important;
-height:1%
}
+
DIV.screenlet-body {
background-color: #FFFFFF;
+height: auto !important;
+height: 1%;
padding: 0.4em;
-height:auto !important;
-height:1%
}
#column-container {
-position: relative;
background-color: #FFFFFF;
margin: auto;
+position: relative;
width: 100%;
}
#column-container .left {
float: left;
-margin-right: 1em;
/* alt: position: absolute; top: 0px; left: 0px; */
-width: 22em;
+/*width: 22em;*/
+margin-right: 1em;
+width: 20%;
}
.left-border {
@@ -1206,39 +1119,711 @@
#column-container .right {
float: right;
margin-left: 1em;
-width: 22em;
+/*width: 22em;*/
+width: 20%;
}
#column-container .leftonly {
-margin-left: 23em;
-width: auto;
+/*margin-left: 23em;
+width: auto;*/
+float: left;
+width: 79%;
}
+
#column-container .rightonly {
-margin-right: 23em;
-width: auto;
+/*margin-right: 23em;
+width: auto;*/
+float: right;
+width: 79%;
}
+
#column-container .center {
-margin-left: 23em;
+/*margin-left: 23em;
margin-right: 23em;
-width: auto;
+width: auto;*/
+width: 59%;
}
+
#column-container .nocolumns {
width: auto;
}
DIV.column-left-wide {
-float: left;
-width: 30em;
background-color: #CCCCCC;
border: #000000 solid 0.2em;
+float: left;
overflow: auto;
+width: 30em;
}
DIV.widget-container {
margin-bottom: 2em;
}
+/* ===== New Styles ===== */
+/* ================================ */
+/* ===== Used to clear floats ===== */
+/* ================================ */
+.clear {
+clear: both;
+height: 0;
+visibility: hidden;
+}
+/* ================================= */
+/* ===== Single Element Styles ===== */
+/* ================================= */
+.alert {
+/* Used for alert text */
+color: #ff0000;
+}
+
+.label {
+/* Used for <input> element labels */
+font-weight: bold;
+height: 1.2em; /* Same as <input> height */
+padding-right: 1.1em;
+text-align: right;
+white-space: nowrap;
+width: 1%;
+}
+
+.required, input.required {
+/* required style for <input> elements */
+background-color: #eeeeee;
+}
+
+.tooltip {
+/* tooltip style */
+background-color: #ffffbb;
+border: 0.1em solid #999999;
+color: #000000;
+font-style: italic;
+margin: 0.4em;
+padding: 0.1em;
+}
+
+/* ================================== */
+/* ===== Used to align elements ===== */
+/* ================================== */
+
+.align-float {
+float: right;
+}
+
+.align-text {
+text-align: right;
+}
+
+.align-top {
+vertical-align: top;
+}
+
+/* ==================================== */
+/* ===== Masthead (Header) Styles ===== */
+/* ==================================== */
+
+#masthead {
+background-color: #FFFFFF;
+color: #000000;
+font-weight: bold;
+height: 1%; /* IE fix */
+padding: 0.4em;
+}
+
+#masthead ul li {
+float: left;
+}
+
+#masthead ul .logo-area {
+/* placeholder */
+}
+
+#masthead ul .control-area {
+float: right;
+text-align: right;
+}
+
+/* ========================================= */
+/* ===== Footer Styles ===================== */
+/* ========================================= */
+
+#footer {
+text-align: center;
+}
+
+#footer p {
+margin: 1em;
+}
+
+/* ================================================== */
+/* ===== Main Navigation (App Menu) Styles ========== */
+/* ================================================== */
+
+#main-navigation {
+background-color: #ffffff;
+font-size: 1.1em;
+height: 1%; /* IE fix */
+}
+
+#main-navigation ul {
+display: inline; /* IE Fix */
+}
+
+#main-navigation ul li {
+background-color: #B4B0AA;
+float: left;
+}
+
+#main-navigation ul a {
+color: #000000;
+display: block;
+padding: 0.2em 0.5em 0.2em 0.5em;
+text-align: center;
+}
+
+#main-navigation ul .disabled {
+/* disabled tab */
+color: #D4D0C8;
+}
+
+#main-navigation ul .selected {
+/* selected tab */
+background-color: #D4D0C8;
+}
+
+#main-navigation ul .selected a {
+background-color: #D4D0C8;
+color: #000099;
+}
+
+#main-navigation ul a:hover {
+background-color: #D4D0C8;
+color: #000099;
+text-decoration: none;
+}
+
+/* ========================================================= */
+/* ===== Component Navigation (App Header) Styles ========== */
+/* ========================================================= */
+
+#app-navigation {
+background-color: #B4B0AA;
+height: 1%; /* IE fix */
+}
+
+#app-navigation h1,
+#app-navigation h2,
+#app-navigation h3 {
+background-color: #000099;
+color: #ffffff;
+padding: 0.4em;
+}
+
+#app-navigation ul {
+display: inline; /* IE Fix */
+}
+
+#app-navigation ul li {
+border-right: solid #ffffff 0.1em;
+float: left;
+}
+
+#app-navigation .opposed li,
+#app-navigation ul .opposed,
+#app-navigation ul .col-right {
+/* .col-right deprecated - use .opposed */
+border-left: solid #ffffff 0.1em;
+border-right: none;
+float: right;
+}
+
+#app-navigation ul .disabled {
+color: #D4D0C8;
+}
+
+#app-navigation ul a {
+background-color: #B4B0AA;
+color: #000099;
+display: block;
+font-size: 1em;
+padding: 0 1em 0 1em;
+}
+
+#app-navigation ul .selected,
+#app-navigation ul .selected a {
+background-color: #D4D0C8;
+}
+
+#app-navigation ul a:hover {
+background-color: #D4D0C8;
+color: #000000;
+text-decoration: none;
+}
+
+/* ================================================= */
+/* ===== Screenlet Title Bar/Navigation Styles ===== */
+/* ================================================= */
+
+.screenlet-title-bar {
+background-color: #000099;
+color: #ffffff;
+height: 1%; /* IE fix */
+}
+
+.screenlet-title-bar h1,
+.screenlet-title-bar h2,
+.screenlet-title-bar h3 {
+background-color: #000099;
+color: #ffffff;
+padding: 0.2em 0.5em 0.2em 0.5em;
+}
+
+.screenlet-title-bar ul {
+display: inline; /* IE Fix */
+}
+
+.screenlet-title-bar ul li {
+background-color: #000099;
+border-left: 0.1em solid #5886C6;
+color: #ffffff;
+float: right;
+font-size: 1em;
+font-weight: bold;
+padding: 0.2em 0.5em 0.2em 0.5em;
+}
+
+.screenlet-title-bar ul h1,
+.screenlet-title-bar ul h2,
+.screenlet-title-bar ul h3 {
+background-color: #000099;
+border-left: none;
+float: left;
+padding: 0.2em 0.5em 0.2em 0.5em;
+}
+
+.screenlet-title-bar ul .disabled {
+color: #CCCCCC;
+}
+
+.screenlet-title-bar ul a {
+background-color: #000099;
+color: #ffff00;
+display: block;
+}
+
+.screenlet-title-bar ul a:hover {
+/* placeholder */
+}
+
+/* ======================================== */
+/* ===== Button Bar Navigation Styles ===== */
+/* ======================================== */
+
+/* tabContainer style deprecated - included here for
+backward compatibility */
+
+.button-bar {
+background-color: #ffffff;
+height: 1%; /* IE fix */
+margin-bottom: 1.0em;
+padding-top: 0.4em;
+}
+
+.button-bar ul,
+.tabContainer ul {
+display: inline; /* IE Fix */
+}
+
+.button-bar ul li,
+.tabContainer ul li {
+float: left;
+font-weight: bold;
+padding: 0.1em 0.4em 0.1em 0.4em;
+}
+
+.button-bar ul a,
+.tabContainer ul a {
+display: block;
+}
+
+.button-bar ul a,
+.tabContainer ul a,
+.button-bar a {
+padding: 0.1em 0.5em 0.1em 0.5em;
+white-space: nowrap;
+}
+
+.button-bar ul a:hover,
+.tabContainer ul a:hover,
+.button-bar a {
+text-decoration: none;
+}
+
+/* ===== Button style decorator ===== */
+
+.button-style-1 ul li,
+.tabContainer ul li {
+background-color: #ffffff;
+color: #000099;
+}
+
+.button-style-1 a,
+.button-style-1 ul a,
+a.button-style-1,
+.tabContainer ul a {
+background-color: #D4D0C8;
+border: solid #000099 0.1em;
+color: #000099;
+}
+
+.button-style-1 .selected,
+.button-style-1 ul .selected,
+.button-style-1 ul .selected a,
+.tabContainer ul .tabButtonSelected,
+.tabContainer ul .tabButtonSelected a {
+/* .tabButtonSelected deprecated - use .selected */
+background-color: #000099;
+color: #ffffff;
+}
+
+.button-style-1 a:hover,
+.button-style-1 ul a:hover,
+a.button-style-1:hover,
+.tabContainer ul a:hover {
+background-color: #000099;
+color: #ffffff;
+}
+
+/* ===== Button style decorator ===== */
+
+.button-style-2 ul li {
+background-color: #ffffff;
+color: #000099;
+}
+
+.button-style-2 ul a,
+.button-style-2 a,
+a.button-style-2 {
+background-color: #ffffff;
+border: solid #000099 0.1em;
+color: #000099;
+}
+
+.button-style-2 ul .selected a,
+.button-style-2 .selected {
+background-color: #000099;
+color: #ffffff;
+}
+
+.button-style-2 ul a:hover,
+.button-style-2 a:hover,
+a.button-style-2:hover {
+background-color: #000099;
+color: #ffffff;
+}
+
+/* ===== Button bar decorator ===== */
+
+.tool-bar {
+background-color: #D4D0C8;
+border: 0.1em solid #000099;
+padding: 0.2em;
+}
+
+.tool-bar ul li {
+background-color: #D4D0C8;
+padding: 0.1em;
+}
+
+/* ======================== */
+/* ===== Table Styles ===== */
+/* ======================== */
+
+.basic-table {
+width: 100%;
+}
+
+.basic-table,
+.basic-table .header-row:hover {
+background-color: #ffffff;
+color: #000000;
+}
+
+.basic-table tr td {
+/* Style for all cells */
+padding: 0.1em;
+}
+
+.basic-table tr .label,
+.basic-table tr .group-label {
+/* field labels for forms */
+font-weight: bold;
+text-align: right;
+padding-right: 1.5em;
+white-space: nowrap;
+width: 1%;
+}
+
+.basic-table tr .group-label {
+/* "header" for field label groups */
+font-size: 1.2em;
+padding: 2em 1.5em 0 0;
+}
+
+.basic-table tr th,
+.basic-table .header-row {
+font-weight: bold;
+text-align: left;
+}
+
+.basic-table .header-row:hover,
+.basic-table tr th:hover{
+background-color: #ffffff;
+color: #000000;
+}
+
+.basic-table .header-row td {
+border-bottom: 0.1em solid #999999;
+}
+
+.basic-table .header-row td a {
+color: #000000;
+}
+
+.basic-table .viewManyTR1,
+.basic-table .alternate-row {
+/* Alternating row style */
+/* .viewManyTR1 deprecated - use .alternate-row */
+background-color: #eeeeee;
+}
+
+.basic-table tr .button-col {
+/* button column style - for the small
+collection of buttons used in lists */
+vertical-align: top;
+}
+
+.basic-table tr .button-col a {
+background-color: #ffffff;
+border: #999999 solid 0.1em;
+color: #000099;
+float: left;
+margin: 0.1em 0.2em 0.1em 0.2em;
+padding: 0.1em 0.4em 0.1em 0.4em;
+white-space: nowrap;
+}
+
+.basic-table tr .smallSubmit,
+.basic-table tr .smallSubmit:visited {
+background-color: #ffffff;
+border: #999999 solid 0.1em;
+color: #000099;
+font-size: 1em;
+font-weight: bold;
+margin: 0.2em;
+padding: 0.1em 0.2em 0.1em 0.2em;
+white-space: nowrap;
+}
+
+.basic-table tr .button-col a:hover,
+.basic-table tr .button-col a:active,
+.basic-table tr .smallSubmit:hover,
+.basic-table tr .smallSubmit:active {
+color: #ff0000;
+text-decoration: none;
+}
+
+/* ===== Table decorator - Hover bar ===== */
+
+.hover-bar tr:hover {
+background-color: #cccccc;
+cursor: default;
+}
+
+/* ===== Table decorator - Grid ===== */
+
+/* These decorators need an IE hack. IE7 does not
+render borders around empty <td> elements */
+
+.dark-grid {
+/* dark grid */
+border-right: 0.1em solid #000000;
+border-top: 0.1em solid #000000;
+}
+
+.dark-grid td {
+border-bottom: 0.1em solid #000000;
+border-left: 0.1em solid #000000;
+}
+
+.light-grid {
+/* light grid */
+border-right: 0.1em solid #cccccc;
+border-top: 0.1em solid #cccccc;
+}
+
+.light-grid td {
+border-bottom: 0.1em solid #cccccc;
+border-left: 0.1em solid #cccccc;
+}
+
+/* ======================= */
+/* ===== Tree Styles ===== */
+/* ======================= */
+
+.basic-tree {
+/* placeholder */
+}
+
+.basic-tree ul {
+padding-left: 1em;
+}
+
+.basic-tree li {
+padding-left: 1em;
+white-space: nowrap;
+}
+
+.basic-tree li .expanded {
+background: url(/images/collapse.gif) no-repeat left center;
+padding-right: 1em;
+}
+
+.basic-tree li .collapsed {
+background: url(/images/expand.gif) no-repeat left center;
+padding-right: 1em;
+}
+
+.basic-tree li .treeitem {
+/* treeitem is deprecated */
+border-style: none;
+color: #000099;
+font-size: 1em;
+}
+
+.basic-tree li a:hover {
+color: #0000ff;
+}
+
+/* ======================== */
+/* ===== Form Styles ===== */
+/* ======================== */
+
+.basic-form table {
+width: 100%;
+}
+
+.basic-form, table .header-row:hover {
+background-color: #ffffff;
+color: #000000;
+}
+
+.basic-form table tr td {
+padding: 0.1em;
+}
+
+.basic-form table tr .label,
+.basic-form table tr .group-label {
+/* field labels for forms */
+font-weight: bold;
+text-align: right;
+padding-right: 1.5em;
+width: 1%;
+}
+
+.basic-form table tr .group-label {
+/* "header" for field label groups */
+font-size: 1.2em;
+padding: 2em 1.5em 0 0;
+}
+
+.basic-form table tr th,
+.basic-form table .header-row {
+font-weight: bold;
+text-align: left;
+}
+
+.basic-form table .header-row:hover,
+.basic-form table tr th:hover{
+background-color: #ffffff;
+color: #000000;
+}
+
+.basic-form table .header-row td {
+border-bottom: 0.1em solid #999999;
+}
+
+.basic-form table .viewManyTR1,
+.basic-form table .alternate-row {
+/* Alternating row style */
+/* .viewManyTR1 deprecated - use .alternate-row */
+background-color: #eeeeee;
+}
+
+.basic-form table tr td .smallSubmit,
+.basic-form table tr td .smallSubmit:visited {
+background-color: #ffffff;
+border: #999999 solid 0.1em;
+color: #000099;
+font-size: 1em;
+font-weight: bold;
+margin: 0.2em;
+padding: 0.1em 0.2em 0.1em 0.2em;
+}
+
+.basic-form table tr td .smallSubmit:hover,
+.basic-form table tr td .smallSubmit:active {
+color: #ff0000;
+text-decoration: none;
+}
+
+/* ===== Form decorator - Form Widget ===== */
+
+.form-widget table tr .label {
+/* Added for backward compatibility */
+width: 20%;
+}
+
+/* ================================= */
+/* ===== Visual Embellishments ===== */
+/* ================================= */
+
+.view-calendar {
+background: url(/images/cal.gif) no-repeat;
+}
+
+.field-lookup {
+background: url(/images/fieldlookup.gif) no-repeat;
+}
+
+.nav-first {
+/*
+background: url(/images/prev-year.gif) no-repeat left center;
+padding-left: 1.8em;
+*/
+}
+
+.nav-last {
+/*
+background: url(/images/next-year.gif) no-repeat right center;
+padding-right: 1.8em;
+*/
+}
+
+.nav-next {
+/*
+background: url(/images/next.gif) no-repeat right center;
+padding-right: 1.8em;
+*/
+}
+
+.nav-previous {
+/*
+background: url(/images/prev.gif) no-repeat left center;
+padding-left: 1.8em;
+*/
+}