tags */
{
font-weight: bold;
}
ul
{
list-style-type: circle;
}
.centerText
{
text-align: center
}
.justifyText
{
text-align:justify;
}
.floatLeft
{
float: left;
}
.clearBoth
{
clear: both;
}
.browserWarning
{
text-align: center;
border: solid 2px blue;
margin: 0px 0px 20px;
}
/* -----------------------------------------------------------------------*/
/* Selectors used mostly/exclusively in the MasterPage "header" section */
/* -----------------------------------------------------------------------*/
div.header
/* Element.Class Selector for the tag containing the header (navigation bar image and page links) */
{
position: relative;
height: 160px;
width: 940px;
}
img.navBar
/* Element.Class Selector for the ![]()
tag displaying the entire navigation bar image */
{
position: absolute;
top: 0px;
left: 0px;
height: 160px;
width: 940px;
}
div.pageLinks
/* Element.Class Selector for the tag containing the tag links to the various web pages */
{
position: absolute;
top: 0px;
left: 643px; /* aligned to the part of the nav bar ![]()
where the page links appear */
height: 78px; /* height of the page links */
width: 205px; /* wide enough to wrap all six of the tag links to the various pages */
}
div.pageLinks a:hover
/* Element.Class + Pseudo-class Selector for the tag links when mouse is hovering over them */
{
color: Blue;
border-style: solid;
}
a.home
/* Element.Class Selector for the tag (link) to the Home page */
{
position: absolute;
top: 0px;
left: 0px;
height: 74px; /* 4px less than the height of the associated clickable image area to make the "hover" outline correct */
width: 27px; /* 4px less than width of associated clickable image (for same reason) */
z-index: 1;
}
a.clients
/* Element.Class Selector for the tag (link) to the Clients page */
{
position: absolute;
top: 0px;
left: 32px;
height: 74px; /* 4px less than the height of the associated clickable image area to make the "hover" outline correct */
width: 27px;
z-index: 1;
}
a.technologies
/* Element.Class Selector for the tag (link) to the Technologies page */
{
position: absolute;
top: 0px;
left: 68px;
height: 74px; /* 4px less than the height of the associated clickable image area to make the "hover" outline correct */
width: 27px;
z-index: 1;
}
a.portfolio
/* Element.Class Selector for the tag (link) to the Portfolio page */
{
position: absolute;
top: 0px;
left: 103px;
height: 74px; /* 4px less than the height of the associated clickable image area to make the "hover" outline correct */
width: 27px;
z-index: 1;
}
a.about
/* Element.Class Selector for the tag (link) to the About page */
{
position: absolute;
top: 0px;
left: 137px;
height: 74px; /* 4px less than the height of the associated clickable image area to make the "hover" outline correct */
width: 27px;
z-index: 1;
}
a.contact
/* Element.Class Selector for the tag (link) to the Contact page */
{
position: absolute;
top: 0px;
left: 171px;
height: 74px; /* 4px less than the height of the associated clickable image area to make the "hover" outline correct */
width: 27px;
z-index: 1;
}
img.navLink
/* Element.Class Selector applied to ![]()
tags associated with the tag (links) in the the navigation bar */
/* Note the images are transparent, but are needed to provide "content" for their parent tags */
{
position: absolute; /* absolute within the parent tag page link */
top: 0px;
left: 0px;
width: 31px;
height: 78px;
border: none; /* to prevent the image from being surrounded by a colored border */
z-index: 1;
}
/* -----------------------------------------------------------------------------------------*/
/* Selectors used mostly/exclusively within the various Content Pages (Home, Clients, etc) */
/* -----------------------------------------------------------------------------------------*/
.fapGrid
/* Element.Class Selector applied to a tag used to wrap a Faux Absolute Positioned (FAP) "grid" */
/* [Eric's #canvas] */
{
width: 95%;
margin: 20px auto;
overflow: auto; /* show scrollbars when needed */
padding: 1%;
}
.fapRow
/* Element.Class Selector applied to a tag used to wrap a Faux Absolute Positioned (FAP) "row" */
/* [Eric's .line] */
{
float: left;
width: 100%;
display: block;
position: relative;
}
.fapCol
/* Element.Class Selector applied to a tag used to wrap a Faux Absolute Positioned (FAP) "column" */
/* [Eric's .item] */
{
position: relative;
float: left;
overflow: hidden;
left: 100%;
}
.fapCell
/* Element.Class Selector applied to tags which act as containers for Faux Absolute Positioned (FAP) "cells" */
/* Using a container for the cell content prevents the redraw bug in IE6 and provides a convenient */
/* place to apply other styles, such as overflow: hidden */
/* [Eric's .sap-content] */
{
overflow: hidden;
}
/* -----------------------------------------------------------------*/
/* Selectors used mostly/exclusively within the Home content page */
/* -----------------------------------------------------------------*/
#homeRow1Col1
/* ID Selector applied to Row 1 Col 1 of the FAP grid on the Home content page */
{
margin-left: -100%;
width: 45%;
}
#homeRow1Col2
/* ID Selector applied to Row 1 Col 2 of the FAP grid on the Home content page */
{
margin-left: -50%;
width: 40%;
}
#homeBuilding
/* ID Selector for the tag containing the image and caption of the building on the Home content page (Row 1 Col 1 of the grid) */
{
height: 300px;
width: 360px;
margin: 10px auto 20px;
color: White;
background-color: #545477;
border-style: solid;
border-color: #545477;
border-width: 10px 10px 20px 10px;
}
#homeTechLogos
/* ID Selector for the ![]()
tag containing the technology logos image on the Home content page */
{
border: 3px #000000 solid;
width: 300px;
margin: auto;
}
/* --------------------------------------------------------------------*/
/* Selectors used mostly/exclusively within the Clients content page */
/* --------------------------------------------------------------------*/
#clientsRow1Col1
/* ID Selector applied to Row 1 Col 1 of the FAP grid on the Clients content page */
{
margin-left: -99%;
width: 33%;
}
#clientsRow1Col2
/* ID Selector applied to Row 1 Col 2 of the FAP grid on the Clients content page */
{
margin-left: -66%;
width: 33%;
}
#clientsRow1Col3
/* ID Selector applied to Row 1 Col 3 of the FAP grid on the Clients content page */
{
margin-left: -33%;
width: 33%;
}
/* -------------------------------------------------------------------------*/
/* Selectors used mostly/exclusively within the Technologies content page */
/* -------------------------------------------------------------------------*/
#technologiesRow1Col1
/* ID Selector applied to Row 1 Col 1 of the FAP grid on the Technologies content page */
{
margin-left: -90%;
width: 25%;
}
#technologiesRow1Col2
/* ID Selector applied to Row 1 Col 2 of the FAP grid on the Technologies content page */
{
margin-left: -60%;
width: 25%;
}
#technologiesRow1Col3
/* ID Selector applied to Row 1 Col 3 of the FAP grid on the Technologies content page */
{
margin-left: -40%;
width: 25%;
}
/* ----------------------------------------------------------------------*/
/* Selectors used mostly/exclusively within the Portfolio content page */
/* ----------------------------------------------------------------------*/
.portfolioRow
/* Class Selector for all Rows of the FAP grid on the Portfolio page. Applied in conjunction with .fapRow */
{
margin: 0px 0px 20px 0px;
}
.portfolioCol1
/* Class Selector for Col 1 of all Rows of the FAP grid on the Portfolio page. Applied in conjunction with .fapCol */
{
margin-left: -99%;
width: 33%;
}
.portfolioCol2
/* Class Selector for Col 2 of all Rows of the FAP grid on the Portfolio page. Applied in conjunction with .fapCol */
{
margin-left: -66%;
width: 66%;
}
.portfolioProject
/* Class Selector for the first line of text describing each project on the Portfolio page */
{
font-weight: bold;
text-decoration: underline;
}
/* ------------------------------------------------------------------*/
/* Selectors used mostly/exclusively within the About content page */
/* ------------------------------------------------------------------*/
#aboutFlagAndLogo
/* ID Selector for the image of the flag and NPSi logo */
{
border: solid 2px black;
margin: 10px 30px 6px 0px;
}
#aboutRow1Col1
/* ID Selector for Col 1 of Row 1 of the FAP grid on the About page. Applied in conjunction with .fapCol */
{
margin-left: -99%;
width: 25%;
}
#aboutRow1Col2
/* ID Selector for Col 2 of Row 1 of the FAP grid on the About page. Applied in conjunction with .fapCol */
{
margin-left: -70%;
width: 70%;
}
/* ---------------------------------------------------------------------*/
/* Selectors used mostly/exclusively within the Contact content page */
/* ---------------------------------------------------------------------*/
#contactMap
{
margin-left:auto;
margin-right:auto;
width:70%;
border: solid 1px black;
}
/* -----------------------------------------------------------------------*/
/* Selectors used mostly/exclusively in the Master Page "footer" section */
/* -----------------------------------------------------------------------*/
div.footer
/* Class Selector for the tag containing the page footer links and text */
{
text-align: center;
font-size: x-small;
color: #000099;
}
div.footerLinks
/* Class Selector for the tag containing the page footer links */
{
width: 416px;
margin-left: auto;
margin-right: auto;
}
div.footerText
/* Class Selector for the tag containing the page footer text */
{
width: 650px;
margin-left: auto;
margin-right: auto;
}
.w3cIcons
/* Class Selector for the tag containing the W3C validation icons */
{
width: 190px;
margin-left: auto;
margin-right: auto;
}
a.w3cLink
/* Class Selector used by each of the W3C links */
{
border: 0px;
margin: 0px;
width: 92px;
height: 35px;
margin-left: auto;
margin-right: auto;
float: left
}
img.w3cIcon
/* Class Selector used by each of the W3C images */
{
border: 0px;
margin: 0px;
width: 92px;
height: 35px;
margin-left: auto;
margin-right: auto;
float: left
}
a.footer
/* Class Selector for the tag links in the footer */
{
background: transparent;
color: #000099;
text-decoration: underline;
}
a.footer:hover
/* Class + Pseudo-class Selector for the tag links in the footer when mouse is hovering over them */
{
background: blue;
color: White;
text-decoration: none;
}
tag containing the tag links to the various web pages */
{
position: absolute;
top: 0px;
left: 643px; /* aligned to the part of the nav bar ![]()
where the page links appear */
height: 78px; /* height of the page links */
width: 205px; /* wide enough to wrap all six of the tag links to the various pages */
}
div.pageLinks a:hover
/* Element.Class + Pseudo-class Selector for the tag links when mouse is hovering over them */
{
color: Blue;
border-style: solid;
}
a.home
/* Element.Class Selector for the tag (link) to the Home page */
{
position: absolute;
top: 0px;
left: 0px;
height: 74px; /* 4px less than the height of the associated clickable image area to make the "hover" outline correct */
width: 27px; /* 4px less than width of associated clickable image (for same reason) */
z-index: 1;
}
a.clients
/* Element.Class Selector for the tag (link) to the Clients page */
{
position: absolute;
top: 0px;
left: 32px;
height: 74px; /* 4px less than the height of the associated clickable image area to make the "hover" outline correct */
width: 27px;
z-index: 1;
}
a.technologies
/* Element.Class Selector for the tag (link) to the Technologies page */
{
position: absolute;
top: 0px;
left: 68px;
height: 74px; /* 4px less than the height of the associated clickable image area to make the "hover" outline correct */
width: 27px;
z-index: 1;
}
a.portfolio
/* Element.Class Selector for the tag (link) to the Portfolio page */
{
position: absolute;
top: 0px;
left: 103px;
height: 74px; /* 4px less than the height of the associated clickable image area to make the "hover" outline correct */
width: 27px;
z-index: 1;
}
a.about
/* Element.Class Selector for the tag (link) to the About page */
{
position: absolute;
top: 0px;
left: 137px;
height: 74px; /* 4px less than the height of the associated clickable image area to make the "hover" outline correct */
width: 27px;
z-index: 1;
}
a.contact
/* Element.Class Selector for the tag (link) to the Contact page */
{
position: absolute;
top: 0px;
left: 171px;
height: 74px; /* 4px less than the height of the associated clickable image area to make the "hover" outline correct */
width: 27px;
z-index: 1;
}
img.navLink
/* Element.Class Selector applied to ![]()
tags associated with the tag (links) in the the navigation bar */
/* Note the images are transparent, but are needed to provide "content" for their parent tags */
{
position: absolute; /* absolute within the parent tag page link */
top: 0px;
left: 0px;
width: 31px;
height: 78px;
border: none; /* to prevent the image from being surrounded by a colored border */
z-index: 1;
}
/* -----------------------------------------------------------------------------------------*/
/* Selectors used mostly/exclusively within the various Content Pages (Home, Clients, etc) */
/* -----------------------------------------------------------------------------------------*/
.fapGrid
/* Element.Class Selector applied to a
tag used to wrap a Faux Absolute Positioned (FAP) "grid" */
/* [Eric's #canvas] */
{
width: 95%;
margin: 20px auto;
overflow: auto; /* show scrollbars when needed */
padding: 1%;
}
.fapRow
/* Element.Class Selector applied to a
tag used to wrap a Faux Absolute Positioned (FAP) "row" */
/* [Eric's .line] */
{
float: left;
width: 100%;
display: block;
position: relative;
}
.fapCol
/* Element.Class Selector applied to a
tag used to wrap a Faux Absolute Positioned (FAP) "column" */
/* [Eric's .item] */
{
position: relative;
float: left;
overflow: hidden;
left: 100%;
}
.fapCell
/* Element.Class Selector applied to
tags which act as containers for Faux Absolute Positioned (FAP) "cells" */
/* Using a container for the cell content prevents the redraw bug in IE6 and provides a convenient */
/* place to apply other styles, such as overflow: hidden */
/* [Eric's .sap-content] */
{
overflow: hidden;
}
/* -----------------------------------------------------------------*/
/* Selectors used mostly/exclusively within the Home content page */
/* -----------------------------------------------------------------*/
#homeRow1Col1
/* ID Selector applied to Row 1 Col 1 of the FAP grid on the Home content page */
{
margin-left: -100%;
width: 45%;
}
#homeRow1Col2
/* ID Selector applied to Row 1 Col 2 of the FAP grid on the Home content page */
{
margin-left: -50%;
width: 40%;
}
#homeBuilding
/* ID Selector for the
tag containing the image and caption of the building on the Home content page (Row 1 Col 1 of the grid) */
{
height: 300px;
width: 360px;
margin: 10px auto 20px;
color: White;
background-color: #545477;
border-style: solid;
border-color: #545477;
border-width: 10px 10px 20px 10px;
}
#homeTechLogos
/* ID Selector for the ![]()
tag containing the technology logos image on the Home content page */
{
border: 3px #000000 solid;
width: 300px;
margin: auto;
}
/* --------------------------------------------------------------------*/
/* Selectors used mostly/exclusively within the Clients content page */
/* --------------------------------------------------------------------*/
#clientsRow1Col1
/* ID Selector applied to Row 1 Col 1 of the FAP grid on the Clients content page */
{
margin-left: -99%;
width: 33%;
}
#clientsRow1Col2
/* ID Selector applied to Row 1 Col 2 of the FAP grid on the Clients content page */
{
margin-left: -66%;
width: 33%;
}
#clientsRow1Col3
/* ID Selector applied to Row 1 Col 3 of the FAP grid on the Clients content page */
{
margin-left: -33%;
width: 33%;
}
/* -------------------------------------------------------------------------*/
/* Selectors used mostly/exclusively within the Technologies content page */
/* -------------------------------------------------------------------------*/
#technologiesRow1Col1
/* ID Selector applied to Row 1 Col 1 of the FAP grid on the Technologies content page */
{
margin-left: -90%;
width: 25%;
}
#technologiesRow1Col2
/* ID Selector applied to Row 1 Col 2 of the FAP grid on the Technologies content page */
{
margin-left: -60%;
width: 25%;
}
#technologiesRow1Col3
/* ID Selector applied to Row 1 Col 3 of the FAP grid on the Technologies content page */
{
margin-left: -40%;
width: 25%;
}
/* ----------------------------------------------------------------------*/
/* Selectors used mostly/exclusively within the Portfolio content page */
/* ----------------------------------------------------------------------*/
.portfolioRow
/* Class Selector for all Rows of the FAP grid on the Portfolio page. Applied in conjunction with .fapRow */
{
margin: 0px 0px 20px 0px;
}
.portfolioCol1
/* Class Selector for Col 1 of all Rows of the FAP grid on the Portfolio page. Applied in conjunction with .fapCol */
{
margin-left: -99%;
width: 33%;
}
.portfolioCol2
/* Class Selector for Col 2 of all Rows of the FAP grid on the Portfolio page. Applied in conjunction with .fapCol */
{
margin-left: -66%;
width: 66%;
}
.portfolioProject
/* Class Selector for the first line of text describing each project on the Portfolio page */
{
font-weight: bold;
text-decoration: underline;
}
/* ------------------------------------------------------------------*/
/* Selectors used mostly/exclusively within the About content page */
/* ------------------------------------------------------------------*/
#aboutFlagAndLogo
/* ID Selector for the image of the flag and NPSi logo */
{
border: solid 2px black;
margin: 10px 30px 6px 0px;
}
#aboutRow1Col1
/* ID Selector for Col 1 of Row 1 of the FAP grid on the About page. Applied in conjunction with .fapCol */
{
margin-left: -99%;
width: 25%;
}
#aboutRow1Col2
/* ID Selector for Col 2 of Row 1 of the FAP grid on the About page. Applied in conjunction with .fapCol */
{
margin-left: -70%;
width: 70%;
}
/* ---------------------------------------------------------------------*/
/* Selectors used mostly/exclusively within the Contact content page */
/* ---------------------------------------------------------------------*/
#contactMap
{
margin-left:auto;
margin-right:auto;
width:70%;
border: solid 1px black;
}
/* -----------------------------------------------------------------------*/
/* Selectors used mostly/exclusively in the Master Page "footer" section */
/* -----------------------------------------------------------------------*/
div.footer
/* Class Selector for the
tag containing the page footer links and text */
{
text-align: center;
font-size: x-small;
color: #000099;
}
div.footerLinks
/* Class Selector for the
tag containing the page footer links */
{
width: 416px;
margin-left: auto;
margin-right: auto;
}
div.footerText
/* Class Selector for the
tag containing the page footer text */
{
width: 650px;
margin-left: auto;
margin-right: auto;
}
.w3cIcons
/* Class Selector for the
tag containing the W3C validation icons */
{
width: 190px;
margin-left: auto;
margin-right: auto;
}
a.w3cLink
/* Class Selector used by each of the W3C links */
{
border: 0px;
margin: 0px;
width: 92px;
height: 35px;
margin-left: auto;
margin-right: auto;
float: left
}
img.w3cIcon
/* Class Selector used by each of the W3C images */
{
border: 0px;
margin: 0px;
width: 92px;
height: 35px;
margin-left: auto;
margin-right: auto;
float: left
}
a.footer
/* Class Selector for the tag links in the footer */
{
background: transparent;
color: #000099;
text-decoration: underline;
}
a.footer:hover
/* Class + Pseudo-class Selector for the tag links in the footer when mouse is hovering over them */
{
background: blue;
color: White;
text-decoration: none;
}