/******************************************************************************
 * file:	main.css
 * version:	0.1.0
 * author:	Doug Johnson
 * email:	doug@sizing.com
 * website:	http://www.infosizing.com/
 *
 * description:	CSS Level 2.1 compliant styling rules for entire site.
 *
 *****************************************************************************/


/* SITE-WIDE CLASS:
 * All pages have a body-level class based on this sites name. This provides
 * the end user with a "handle" so they can apply thier own style preferences
 * to this site. The empty class is included here so that CSS validators 
 * don't warn about the pages using an undefined class.
 */
.www-infosizing-com {
}

/* GENERAL:
 * Zero out all margin and padding settings. We'll put them back as needed on
 * a section-by-section basis.
 */
* {
    margin:		0;
    padding:		0;
}
img {
    border:		none;
}

/* BODY:
 * Typical default font-size is 16px. Based on that, setting it to 62.5% will
 * make 1em = 10px. This allows for easy translation between the two units.
 */
body {
    font-size:		62.5%;
    color:		#000;
    background:		#fff;
}


/* OUTER-WRAP:
 * This outer wrap is used for centering everything - the page and the
 * validation tags hanging "outside" the page.
 */
#outer-wrap {
    width:		75em;
    margin:		0em auto;
}


/* LINKS:
 * Styling for all non-navigation menu links. Links to external pages are
 * specially marked.
 */
a:link, a:visited {
    color:		#c63;
    text-decoration:	none;
}
a:hover, a:active {
    color:		#00f;
    text-decoration:	underline;
}
a[href^="http:"]:hover, a[href^="http:"]:active {
    color:		#900;
}
a[href^="http://www.infosizing.com"]:hover,
a[href^="http://www.infosizing.com"]:active {
    color:		#00f;
}
a[href^="http:"] {
    background:		url(../images/externalLink.png)
			no-repeat top right;
    padding-right:	.5em;
}
a[href^="http://www.infosizing.com"] {
    background-image:	none;
    padding-right:	0;
}
a[href^="#wrap"] {
    font-size:		.8em;
}
a[href^="mailto:"] {
    background:		url(../images/emailLink.png)
			no-repeat center right;
    padding-right:	.8em;
}


/* WRAP:
 * This wrapper contains the page content - from the header on down to the
 * footer. It does not contain the validation tags.
 */
#wrap {
    float:		left;
    width:		100%;
    margin-top:		1em;
    border:		1px solid #363;
}


/* HEADER:
 * The following rules apply to the header and its content.
 */
#header {
    float:		left;
    width:		100%;
    margin-bottom:	.5em;
    background:		url(../images/headerGradient.png)
			repeat-x top left;
    font-family:	"Times New Roman", serif;
}
#header h1 {
    float:		left;
    margin-top:		0em;
    margin-bottom:	0em;
    font-size:		4.8em;
    background:		url(../images/s-logo-transparent.png)
			no-repeat center left;
}
#header h1 a {
    display:		block;
    padding-left:	1.2em;	/*nudge name past logo */
    color:		#000;
    text-decoration:	none;
    cursor:		pointer;
}
#header h2 {
    float:		right;
    margin:		.75em .2em 0 0;
    font-size:		2.4em;
    color:		#363;
}


/* NAV:
 * The following rules apply to the navigation area and its content.
 */
#nav {
    float:		left;
    width:		100%;
    margin:		.5em 0;
    background:		url(../images/navBarGradient.png)
			repeat-x bottom left;
}
#nav ul {
    float:		left;
    list-style:		none;
}
#nav ul, #nav h2 {
    margin:		0em;
}
#nav h2 {
    font-weight:	normal;
}
#nav h2, #nav a {
    display:		block;
    padding-left:	1em;
    color:		#000;
    font-size:		1.5em;
}
#nav a {
    text-decoration:	none;
}
#nav a:hover {
    color:		#00f;
    background:		#fff;
}

/* WORK-AROUND:
 * Applying these styles to the #nav ul ul li elements would make sense.
 * However, for some of these styles, this seems to cause problems in IE -
 * mouse-over/mouse-off can cause empty li elements to remain displayed in 
 * sub-sub menus. So we apply these styles to the contents of the li elements
 * and use extraneous mark-up span tags to hold the right-arrow for sub menus.
 */
#nav a, #nav ul ul h2 {
    background:		#9c9 url(../images/navSubMenuGradient.png)
			repeat-x top left;
    border:		1px solid #363;
    line-height:	2em;
}
/* WORK-AROUND: End
 */

#nav ul ul span {
    padding-right:	1em;	/* accomodate right-arrow */
    background:		url(../images/navArrowRight.png)
			no-repeat center right;
}
#nav > ul > li > h2 {
    text-transform:	uppercase;
    background:		url(../images/navArrowDown.png)
			no-repeat bottom center;
    padding-bottom:	.25em;	/* accomodate down-arrow */
    margin-bottom:	.25em;	/* accomodate down-arrow */
}
#nav ul ul h2:hover {
    color:		#363;
    background:		#fff;
}
#nav li {
    position:		relative;
    width:		100%;
}
#nav ul ul {
    position:		absolute;
    z-index:		50;
    top:		100%;
    left:		0;
    width:		100%;
}
#nav ul ul ul {
    position:		absolute;
    top:		0;
    left:		100%;
}
#nav ul ul,
#nav ul li:hover ul ul,
#nav ul ul li:hover ul ul
{
    display:		none;
}
#nav ul li:hover ul,
#nav ul ul li:hover ul,
#nav ul ul ul li:hover ul
{
    display:		block;
}

/* The About InfoSizing menu sits over to the right of the page and therefore
 * needs a few customizations.
 */
#nav #AboutIS {
    float:		right;
}
#nav #AboutIS h2 {
    padding-left:	0em;
}
#nav #AboutIS ul span {
    background:		url(../images/navArrowLeft.png)
			no-repeat center left;
    padding:		0em 0em 0em .75em;
    margin-left:	.25em;
}
#nav #AboutIS > li > h2 {
    text-transform:	uppercase;
    background:		url(../images/navArrowDown.png)
			no-repeat bottom center;
    padding:		0em 1em .25em 1em;
    color:		#363;
}
#nav #AboutIS ul ul {
    position:		absolute;
    top:		0;
    left:		-100%;
}

/******************************************************************************
 * This is for IE(7?) only. Without this, IE seems to lose the li:hover once
 * the mouse goes off the text within the li.
 * It could go inside the <head> of the source file 
 * and use
 *	<!--[if IE]>
 *	<style type="text/css" media="screen">
 *	 #menu ul li {float: left; width: 100%;}
 *	</style>
 *	<![endif]-->
 * but I want to see if I can keep it here and not have to put it in each 
 * source file. Having it here doesn't seem to negatively affect Firefox or
 * Safari...*/
#nav ul li {
    float:		left;
    width:		100%;
}
/*****************************************************************************/


/* MAIN:
 * The following rules apply to the main area and its content.
 */
.main {
    float:		left;
    font-size:		1.6em;
    margin:		.5em 1em;
}
.main p {
    margin:		.5em 0em;
    font-size:		1.1em;
}
.main ul {
    margin:		.5em 0em .5em 2em;
}
acronym[title] {
    border-bottom:	1px dotted #666;
}
acronym[title]:hover {
    cursor:		help;
}


/* BOXES: GENERAL
 * The following rules are used for rounded corner boxes with titles.
 */
.box {
    background:		url(../images/boxRight.png)
			no-repeat bottom right;
    float:		left;
    min-width:		100%;	/* force box to be full width */
    margin-top:		.5em;
    font-family:	Calibri, Arial, sans-serif;
}
.boxHeader {
    background:		url(../images/boxHeaderGradient.png)
			repeat-x bottom left;
    border-bottom:	1px solid #696;
}
.boxHeader > h3 {
    background:		url(../images/boxRight.png)
			no-repeat top right;
    text-align:		center;
}
.boxHeader > h3 > span {
    background:		url(../images/boxLeft.png)
			no-repeat top left;
    display:		block;
    line-height:	1.4em;
}
/* Applying top padding of .75em would be nice, but IE seems to collapse this
   with the first elements margin where as Safari and Firefox don't do this
   collapsing. So instead, we make the top padding 0 and then apply the .75em
   margin to the first thing inside the boxBody.
   */
.boxBody {
    background:		url(../images/boxLeft.png)
			no-repeat bottom left;
    float:		left;
    padding:		0em 1em .25em 1em;
}
.main .boxBody > *:first-child {
    margin-top:		.75em;
}
.main .box p {
    font-size:		1em;
}

/* BOXES: CUSTOM LAYOUT
 * The following rules customize the layout/positioning of boxes.
 */
#referencesCustom #techDesign,
#referencesTpc #tpcH,
#referencesTpc #tpcC,
#referencesOverview #tpc,
#companyOverview #who,
#companyOverview #how,
#customAudits #clients,
#vendorOracle #coDesigner,
#vendorOverview #oracle,
#index #experts {
    min-width:		49%;
    max-width:		49%;
}
#referencesCustom #procurement,
#referencesTpc #tpcApp,
#referencesTpc #tpcE,
#referencesOverview #custom,
#companyOverview #what,
#customAudits #whyAudit,
#vendorOracle #independentAuditor,
#vendorOverview #sybase,
#index #services {
    min-width:		49%;
    max-width:		49%;
    float:		right;
}
#customDesigns #custom,
#customOverview #designs,
#tpcOverview #auditingResults {
    min-width:		32%;
    max-width:		32%;
}
#customDesigns #semiStandard,
#customOverview #projects,
#tpcOverview #certifiedAuditor {
    min-width:		32%;
    max-width:		32%;
    margin-left:	1em;
}
#customDesigns #standard,
#customOverview #audits,
#tpcOverview #producingResults {
    min-width:		32%;
    max-width:		32%;
    float:		right;
}

.publishingStep {
    margin-top:		2.5em;
}

#companyContact dl {
    float:		left;
    min-width:		15em;
    max-width:		15em;
    margin:		0.75em 3.2em 0em 3.2em;
    /* IE appeared to do margin/padding collapsing on the bottom.
       Firefox and Safari didn't.
       Zeroing the bottom margin and doing it with bottom padding seems to
       get a consistent end result.
       */
    padding-bottom:	0.75em;
}
#companyContact dt {
    float:		left;
    clear:		left;
    min-width:		4em;
    max-width:		4em;
    font-weight:	bold;
}
#companyContact dd {
    float:		right;
    clear:		right;
    min-width:		10em;
    max-width:		10em;
}

#referencesCustom .boxBody ul,
#referencesOverview .boxBody ul {
    float:		left;
}
#referencesCustom .boxBody ul {
    margin-left:	6em;
}

#aboutSite #testedBrowsers,
#aboutSite #w3cStandards {
    float:		left;
    min-width:		30%;
    max-width:		30%;
    margin-left:	6em;
}


/* BOXES: CUSTOM CONTENT
 * The following rules customize the content of boxes.
 */
#index #experts .boxBody h3 {
    text-align:		center;
    margin-top:		.8em;
    margin-bottom:	.8em;
    font-size:		1.2em;
}

#vendorOverview .boxHeader h3 {
    /* down-size one notch because these are wide headers */
    font-size:		1.1em;
}

#customProjects #management .boxBody h3 {
    margin:		.8em 4.5em;
    text-align:		center;
}

#companyTeam .boxHeader h3 {
    text-align:		left;
}
#companyTeam .boxHeader em {
    float:		left;
    margin-left:	1em;
    margin-right:	3em;
    width:		12em;
}
#companyTeam .boxHeader a {
    float:		right;
    margin-right:	1em;
}

a.moreInfo {
    float:		right;
/*
    margin-top:		.25em;
*/
    font-size:		.8em;
}

/* IE hack! force this down past ULs */
#referencesOverview a.moreInfo {
    margin-left:	1em;
}


/* FOOTER:
 * The following rules apply to the footer area and its content.
 */
#footer {
    clear:		both;
    float:		left;
    width:		100%;
    margin-top:		1em;
    font-size:		1.4em;
    background:		url(../images/boxHeaderGradient.png)
			repeat-x bottom left;
    font-family:	"Times New Roman", serif;
}
#footer #references,
#footer #contactUs {
    float:		left;
    text-decoration:	none;
    display:		block;
    margin-left:	1em;
    width:		100px;
    height:		30px;
}
#footer #contactUs {
    background:		url(../images/btnContactUsOff.png);
}
#footer #contactUs:hover {
    background:		url(../images/btnContactUsOn.png);
}
#footer #references {
    background:		url(../images/btnReferencesOff.png);
}
#footer #references:hover {
    background:		url(../images/btnReferencesOn.png);
}
#footer #copyRight {
    float:		left;
    margin-left:	7em;
}
#footer #aboutOurSite {
    float:		right;
    display:		block;
    width:		142px;
    line-height:	30px;
    text-decoration:	none;
    color:		#000;
    background:		url(../images/btnAboutWebSiteOff.png)
			no-repeat bottom center;
    margin-right:	1px;
}
#footer #aboutOurSite:hover {
    color:		#00f;
    background:		url(../images/btnAboutWebSiteOn.png)
			no-repeat bottom center;
}
#footer #aboutOurSite span {
    padding-left:	.8em;
}

/* VALIDATION:
 * The group of validation tags will hang off the lower right hand corner of
 * the page. Within the group, tags will appear left to right based on their
 * order in the source file.
 */
.validationTags {
    float:		right;
}
.validationTags p {
    float:		left;
}

/* undo the external link indicator */
.validationTags a {
    background-image:	none;
    padding-right:	0;
}

.validationTags img {
    border:		none;
    height:		25px;
    width:		71px;
}


/* PAGE-SPECIFIC STYLES */

/*tpcCertified*/
#tpcCertified.main p {
    font-size:		1em;
}
#tpcCertificate {
    float:		right;
    margin-top:		.5em;
    margin-left:	1em;
    margin-bottom:	.5em;
    padding:		1em;
    border:		2px solid #369;
}
#tpcCertificate ul {
    float:		left;
    margin:		0em 1em;
    font-weight:	bold;
    color:		#369;
    list-style-image:	url(../images/checkBox.png);
}
#tpcCertificate li {
    margin-top:		.3em;
}
#tpcCertificate img {
    float:		left;
    border:		1px solid #369;
}