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; }