This web-based ordering system has been in daily operation for five years by a major distributor of food products. Retail store managers use this to adjust the quantities of each item they will receive, typically two to four times per week.
This system is driven by a SQL Server 2000 database, reloaded daily from thousands of flat files containing store and product details. The web pages are generated by Active Server Pages (ASP) scripting.
All of the page formatting is done with Cascading Style Sheets (CSS), as follows:
BODY { MARGIN: 10px; margin-top: 10px; margin-bottom: 10px; margin-left: 10px; margin-right: 10px; FONT-FAMILY: Tahoma,Verdana,Arial,sans-serif; COLOR: black; BACKGROUND-COLOR: white; font-size: 12px; } .LoginPage { background-color : #365486; } div { font-family: Tahoma,Verdana,Arial,sans-serif; } span { font-family: Tahoma,Verdana,Arial,sans-serif; } TD { MARGIN: 0px; FONT-FAMILY: Tahoma,Verdana,Arial,sans-serif; } A { font-weight: bold; CURSOR: hand; } A:link { color: #0000ff; text-decoration: none; } A:visited { color: #0000ff; text-decoration: none; } A:active { color: #ff0000; text-decoration: none; } A:hover { color: #ff0000; text-decoration: underline; } TD.CopyrightText { font-family : Tahoma, Arial, Helvetica, sans-serif; font-size : 10px; color : Gray; } TD.LoginCopyrightText { font-family : Tahoma, Arial, Helvetica, sans-serif; font-size : 8px; color : Gray; } .VersionText { font-family : Tahoma, Arial, Helvetica, sans-serif; font-weight : bold; color : Black; font-size : 12px; } .info { color: #3333cc; font-weight: bold; font-size: 16px; font-family: Tahoma,Verdana, Arial, sans-serif; } .infologin { color: White; font-weight: bold; font-size: 16px; font-family: Tahoma,Verdana, Arial, sans-serif; } Table.PINWindow { border-bottom-color : Black; border-bottom-style : outset; border-bottom-width : 4px; border-left-color : Silver; border-left-style : outset; border-left-width : 4px; border-right-color : Black; border-right-style : outset; border-right-width : 4px; border-top-color : Silver; border-top-style : groove; border-top-width : 4px; background-color: #ccccff; margin-top : 3%; margin-bottom : 0%; margin-left : 10%; margin-right : 10%; } TABLE.InformationMsg { border-bottom-color : Black; border-left-color : Black; border-right-color : Black; border-top-color : Black; border-bottom-style : outset; border-bottom-width : 2 px; border-left-style : outset; border-left-width : 2 px; border-right-style : outset; border-right-width : 2 px; border-top-style : groove; border-top-width : 2 px; background-color: #FFFF99; margin-top : 3%; } TABLE.LoginWindow { border-bottom-color : Black; border-bottom-style : outset; border-bottom-width : 4px; border-left-color : Silver; border-left-style : outset; border-left-width : 4px; border-right-color : Black; border-right-style : outset; border-right-width : 4px; border-top-color : Silvere; border-top-style : groove; border-top-width : 4px; background-color : White; margin-top : 10%; margin-bottom : 10%; margin-left : 10%; margin-right : 10%; } TABLE.DataGrid { font-size : 12px; } TD.LoginButton { BORDER-BOTTOM: 2px outset Black; BORDER-LEFT: 2px outset Silver; BORDER-RIGHT: 2px outset Black; BORDER-TOP: 2px groove White; cursor: hand; background-color : Silver; padding-bottom : 0px; padding-left : 2px; padding-right : 2px; padding-top : 0px; text-decoration: none; } a.LoginLink { font-family : Tahoma, Arial, Helvetica, sans-serif; font-size: 12px; font-weight: bold; } a.LoginLink:link { color: #365486; text-decoration: none; } a.LoginLink:visited { color: #365486; text-decoration: none; } a.LoginLink:hover { color: #ffffff; text-decoration: none; } a.LoginLink:active { color: #ffffff; text-decoration: none; } .AddlText { color: White; font-family : Tahoma, Arial, Helvetica, sans-serif; font-size: 12px; } TD.Label { font-weight : bold; font-size : 12px; } TABLE.MenuBar { BORDER-RIGHT: medium none; BORDER-TOP: medium none; BORDER-LEFT: medium none; BORDER-BOTTOM: medium none; } TD.MenuBg {background-color: #365486 } TD.MenuButton { BORDER-RIGHT: silver 2px outset; PADDING-RIGHT: 2px; BORDER-TOP: silver 2px outset; PADDING-LEFT: 2px; FONT-WEIGHT: bold; PADDING-BOTTOM: 0px; BORDER-LEFT: silver 2px outset; CURSOR: hand; PADDING-TOP: 0px; BORDER-BOTTOM: silver 2px outset; FONT-STYLE: normal; FONT-FAMILY: Tahoma, Arial, Verdana, sans-serif; BACKGROUND-COLOR: #365486; } a.MenuLink { color: #dcdcdc; text-decoration: none; font-weight: bold; font-size: 12px; } a.MenuLink:link { color: #dcdcdc; text-decoration: none; } a.MenuLink:visited { color: #dcdcdc; text-decoration: none; } a.MenuLink:active { color: #ffffff; text-decoration: none; } a.MenuLink:hover { color: #ffffff; text-decoration: none; } TD.OtherNavButton { BORDER-BOTTOM: 2px outset Black; BORDER-LEFT: 2px outset Silver; BORDER-RIGHT: 2px outset Black; BORDER-TOP: 2px groove White; cursor: hand; background-color : Silver; padding-bottom : 0px; padding-left : 2px; padding-right : 2px; padding-top : 0px; text-decoration: none; } a.OtherNavLink { font-family : Tahoma, Arial, Helvetica, sans-serif; font-size: 12px; font-weight: bold; } a.OtherNavLink:link { color: #365486; text-decoration: none; } a.OtherNavLink:visited { color: #365486; text-decoration: none; } a.OtherNavLink:hover { color: #ffffff; text-decoration: none; } a.OtherNavLink:active { color: #ffffff; text-decoration: none; } TD.SelectedNavButton { BORDER-BOTTOM: 2px outset Black; BORDER-LEFT: 2px outset Silver; BORDER-RIGHT: 2px outset Black; BORDER-TOP: 2px groove White; cursor: hand; background-color : White; padding-bottom : 0px; padding-left : 2px; padding-right : 2px; padding-top : 0px; text-decoration: none; } a.SelectedNavLink { font-family : Tahoma, Arial, Helvetica, sans-serif; font-size: 12px; font-weight: bold; } a.SelectedNavLink:link { color: #365486; text-decoration: none; } a.SelectedNavLink:visited { color: #365486; text-decoration: none; } a.SelectedNavLink:hover { color: Silver; text-decoration: none; } a.SelectedNavLink:active { color: Silver; text-decoration: none; } .ImportantMsgRow { font-weight: normal; font-style: normal; font-size: 16px; } tr.ImportantMsgRow { background-color: #FFFF99; } TD.HelpText { FONT-WEIGHT: normal; FONT-SIZE: 12px; COLOR: #339933; FONT-STYLE: normal; } .ReQueryLink { font-size: 12px; } a.ReQueryLink:link { color: #9999ff; font-weight: bold; } a.ReQueryLink:visited { color: #9999ff; font-weight: bold; } a.ReQueryLink:hover { color: #ff0000; font-weight: bold; } .DataTbl { border: 0px; padding-left: 2px; padding-right: 2px; padding-top: 2px; padding-bottom: 2px; } .DetailRow {font-size: 10px} .DetailRowAlt {font-size: 10px} .HistoryRow {font-size: 10px} .HistoryRowAlt {font-size: 10px} .HeaderCol { background-color: #ccccff; font-weight: bold; font-style: normal; font-size: 12px; } .RefreshLink {font-family: Tahoma,Verdana, Arial, sans-serif} .RefreshLink:link {color: #9999ff; text-decoration: none} .RefreshLink:visited {color: #9999ff; text-decoration: none} .RefreshLink:hover {color: #ff0000; text-decoration: underline} .InternalNavLink {font-family: Tahoma,Verdana, Arial, sans-serif} .InternalNavLink:link {color: #9999ff; text-decoration: none} .InternalNavLink:visited {color: #9999ff; text-decoration: none} .InternalNavLink:hover {color: #ff0000; text-decoration: underline} .OffSiteLink {font-family: Tahoma,Verdana, Arial, sans-serif} .OffSiteLink:link {color: #ffcc00; text-decoration: none} .OffSiteLink:visited {color: #ffcc00; text-decoration: none} .OffSiteLink:hover {color: #ff0000; text-decoration: underline} .ReferenceLink {font-family: Tahoma,Verdana, Arial, sans-serif;} .Reference:link {color: #0000ff; text-decoration: none} .Reference:visited {color: #0000ff; text-decoration: none} .Reference:hover {color: #ff0000; text-decoration: underline} .good {color: #339900; font-weight: bold} .bad {color: #ff0000; font-weight: bold} .date {color: #000000; font-size: 12px} .subtotal {font-weight: bold; font-style : italic; font-size: 12px;} tr.subtotal {background-color: #dddddd} .total {font-weight: bold; font-style : italic; font-size: 12px;} tr.total {background-color: #dddddd} .HeaderRowF {font-weight: bold; font-style : normal; font-size: 10px;} tr.HeaderRowF {background-color: #ccffcc} .HeaderRowH {font-weight: bold; font-style : normal; font-size: 10px;} tr.HeaderRowH {background-color: #ddddff} tr.DetailRow {background-color: #ffffff} tr.DetailRowAlt {background-color: #eeeedd} tr.HistoryRow {background-color: #ffffff} tr.HistoryRowAlt {background-color: #ddeeff} tr.FooterRowF {background-color: #ccffcc; font-size: 10px; font-weight: bold} tr.FooterRowH {background-color: #ddddff; font-size: 10px; font-weight: bold} td.Activated {background-color: #ccddff; font-weight: bold; font-size: 12px} td.ForecastInventory {background-color: #eeeeee; color: #000000; font-weight: normal} td.ChangesInventory {background-color: #eeeeee; color: #cc0000; font-weight: normal} td.Forecast {color: #000000; font-weight: normal} td.Changes {color: #cc0000; font-weight: normal} td.Promo {color: #0000cc; font-weight: bold} .NewValue {font-weight: bold; font-style: italic} .BroadcastMsg {FONT-WEIGHT: bold; FONT-SIZE: 14px; COLOR: #993333; FONT-STYLE: normal} .StoreMsg {FONT-WEIGHT: normal; FONT-SIZE: 14px; COLOR: #339933; FONT-STYLE: normal} input.DayButton {background-color: #ccddff; font-size: 10px; font-weight: normal} input.SubmitButton {background-color: #ffddcc; font-size: 12px; font-weight: bold} input.CancelButton {background-color: #ffffdd; font-size: 12px; font-weight: bold} .err {color: #ff0033; font-weight: bold; font-size: 16px; font-family: Tahoma,Verdana, Arial, sans-serif} h1 {font-size: 20px; font-weight: bold; font-family: Tahoma,Verdana, Arial, sans-serif; color: #365486 } h2 {font-size: 18px; font-weight: bold; font-family: Tahoma,Verdana, Arial, sans-serif; color: #365486 } h3 {font-size: 16px; font-weight: bold; font-family: Tahoma,Verdana, Arial, sans-serif; color: #365486 } h4 {font-size: 12px; font-weight: bold; font-family: Tahoma,Verdana, Arial, sans-serif; color: #365486 } h5 {font-size: 11px; font-weight: bold; font-family: Tahoma,Verdana, Arial, sans-serif; color: #365486 } h6 {font-size: 10px; font-weight: bold; font-family: Tahoma,Verdana, Arial, sans-serif; color: #365486 } big {font-size: larger } small {font-size: smaller } pre {font-family: Courier New, monospace } center { font-family: Tahoma,Verdana,Arial,sans-serif; } li { color: #365486; } blockquote { color: #365486; }