/* $RCSfile: style.css,v $
 * $Revision: 1.3 $ $Date: 2005/11/29 23:29:33 $
 * Auth: Dave Loffredo (loffredo@steptools.com)
 * 
 * Copyright (c) 1991-2010 by STEP Tools Inc. 
 * All Rights Reserved.
 * 
 */
 
/* in css dot (.) applies to a class=foo
 * in css hash (#) applies to a id=foo
 * 
 * class=main: Use this for the main content on a page.  In a single
 * 	column flow, mark the content with a DIV tag.  For two column
 *	flows, add a table and mark one TD with this class.
 *
 * class=code: Use with a SPAN for keywords and other code examples in 
 *	text.  For standalone blocks of code, use with a PRE.  We do not
 *	use with a DIV because PRE strips out the leading newline making
 *	the code example look like we expect.  With divs, we would have
 *	to put it on the starting line of the example to avoid extra
 *	whitespace, which is annoying to author.
 */

BODY {
	background: white;
	margin: 10px;
}

/* Use the default browser color, but flash the underline and color */
A:link    { text-decoration: underline; }
A:visited { text-decoration: underline; }
A:hover   { color: #CC3333; text-decoration: none; }


H1,H2,H3 { 
	font-family: Arial, Helvetica, sans-serif;
}

/* add a rule separator */
.rule { border-bottom:1px solid black; padding-bottom:0.2em; }
H1.rule { color:#CC3333; }
H2.rule { color:#CC3333; width:75% }
H3.rule { color:#CC3333; width:75% }


DIV.mainwrap {
    text-align: center;
}

DIV.mainfixed {
    text-align: left;
    margin: 0 auto;
    padding-top: 1em;
    max-width: 50em;
    width: expression('50em');
}

/* Use for main content in a single column flow */
DIV.main {
	margin-left: 5%; 
	margin-right:5%; 
	padding: 0.5em; 
}

/* Use for sidebar */
DIV.sidebar {
	width:30%;
	float: right;
	margin: 1em; 
 	padding: 0.5em;
	background:#efefef; 
	border: solid 1px black;
}


DIV.figure {
	text-align:center; 
	padding-top: 1em;
	padding-bottom: 1em;
}

/* Use for single column flow content that you want to stand out */
DIV.box {
	margin-left: 10%; 
	margin-right:10%; 
	padding: 0.5em; 
	background:#efefef; 
	border: solid 1px black;
}

DIV.copyright {
	font-size: 	70%;
	margin-right: 	20%;
	margin-left: 	20%;
	margin-top: 	2em;
	margin-bottom: 	1em;
	padding: 	0.5em;
	text-align: 	center;
	border-top: 	1px solid #000000;
	clear: both; /* avoid interference with floats */
}


/* ============================================================
 * TABLES - We used to define global styles for TABLE and TD, but this
 * disables any cellspacing or cellpadding attributes. Undesireable if
 * we simply add our header to an existing table.
 */
TABLE.format { vertical-align: top; border: none; border-collapse: collapse; } 
TABLE.format TD	{ vertical-align: top; margin: 0px; padding: 0px; }

/* For normal text tables, as opposed to ones used for  formatting. 
 * The auto margins will center tables on Moz and opera, but we force
 * center in the html tag because IE will not center tables through
 * CSS unless you center the entire body block.  
 *
 * In the manuals we normally give this a width and border but here do not
 */
TABLE.normal { 		margin-top: 1em; margin-bottom: 1em; }
TABLE.normal TD { 	vertical-align: top; margin: 0px; padding: 0.25em; } 
TABLE.normal TH { 	vertical-align: top; margin: 0px; padding: 0.25em; 
			border-bottom: solid 2px black; } 


/* Padding for text multi-column flow */
TABLE.textcolumn    { width: 100%; border-collapse: collapse; } 
TABLE.textcolumn TD { vertical-align: top; margin: 0px; padding: 1em; }


/* For the main body in a two column flow content. */ 
TD.main {
	width: 70%; 
	vertical-align: top; 
	padding-top: 0.5ex    !important; 
	padding-left: 1.5em   !important; 
	padding-right: 1.5em  !important; 
}

/* For the display box in a two column flow */
TD.box { 
	width: 30%;
	vertical-align: top; 
	border: solid 1px black; 
	background: #efefef; 
	padding-top: 0.5ex; 
	padding-left: 0.5em; 
	padding-right: 0.5em; 
}

TD.box H2 { 
	font-size: 120%; 
	text-align: center;
	padding-top: 0.2em;
	padding-bottom: 0.2em;
	border-bottom: groove thin;
	background: #e0e0e0;
	white-space: nowrap

}

/* TD.box DL { font-size: 80%; } */

TD.box DT { 	
	font-weight: bold; 
	/*
	display: list-item; 
	list-style-type: disc;
	list-style-position: inside;
	*/
}

TD.box DD { 
	font-size: 80%; 
	margin-left: 2em; 
	margin-bottom: 2ex;
}




/* ============================================================
 * SITE BANNER - Although not fasionable, we use a table for
 * formatting because it handles resize better.  Supporting resize
 * with placed divs is more trouble than it is worth, so most folks
 * who go down that route end up with 800px fixed width pages and
 * fixed fonts.
 */
TABLE.stban { 
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bold; 
	font-size: 12px; 
	border-collapse: collapse;
	background: url(images/logo-site-nowords.gif) no-repeat;
	background-color: #FFFFFF; 
	padding: 0; margin: 0;
	width: 100%; 
	}

TABLE.fpban { 
    background: #FFFFFF url(images/main_logo.gif) no-repeat !important;
}

TABLE.stban TD 	{ white-space: nowrap; vertical-align: middle; }
TABLE.stban FORM 	{ padding: 0; margin: 0; }

TABLE.stban TD.stlogo  { 
	height: 42px; font-size: 28px; 
	padding: 0 28px 0 30px; 
	}

TABLE.fpban TD.stlogo  { 
	height: 70px; font-size: 50px !important; 
	padding: 0 35px 0 45px  !important;  
	vertical-align: top;
	}

/* A blanket rule for "A" is not enough for IE */
TABLE.stban TD.stlogo A:link, 
TABLE.stban TD.stlogo A:visited,
TABLE.stban TD.stlogo A:hover { color: #202020; text-decoration: none; }

TABLE.stban .stnav 	{ text-align: right; padding: 1px 3px 1px 3px; } 
TABLE.stban .stnavlast	{ margin-right: 10px; }

TABLE.fpban .stnav	{ font-size: 18px; }

TABLE.stban A:link,
TABLE.stban A:visited { color: #404040; text-decoration: none; }
TABLE.stban A:hover   { color: #CC3333; text-decoration: underline; }

/* SITE BREADCRUMB LIST - for navigation */
DIV.stloc {
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bold; 
	font-size: 11px;
	padding: 3px 6px;
	margin: 0 0 2em 0;
	background: #202020;
	color: #f0f0f0; 
}

DIV.stloc A:link,
DIV.stloc A:visited { color: #f0f0f0; text-decoration: none; }
DIV.stloc A:hover   { color: #CC3333; text-decoration: underline; }

/* red color for use in STI logo */
.stred	{ color: #CC3333; }


/* ============================================================
 * TAB LISTS -- Used by the product pages
 */
#tabmenu {
	color: black;
	border-bottom: 1px solid black;
	margin: 0px;
	margin-bottom: 0.5em;
	padding: 0px;
	padding-left: 0.5em;
	padding-right: 0.5em;
	white-space: nowrap; 
	text-align: right; 
	z-index: 1;
}

#tabmenu li { 
	display: inline; 
	overflow: hidden;
	list-style-type: none; 
	margin: 0.1em;
}

#tabmenu a, #tabmenu a.active {
	color: black;
	background: #dfdfdf;
	border: 1px solid black;
	padding: 1px 5px 0px 5px;
	margin: 0;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bold; 
	/* font-size: 90%; */
	font-size: 9pt;
	text-decoration: none; 
	vertical-align: bottom;
}

#tabmenu a:visited 	{ color: black; }
#tabmenu a:hover 	{ color: white; background: #7f7f7f; }

#tabmenu a.active 	{ background: white; border-bottom: 1px solid white; }
#tabmenu a.active:hover { color: black; background: white; }


TABLE.tabmenu { 
	border: none; 
	border-collapse: collapse; 
	margin-bottom: 1em;
} 
TABLE.tabmenu TD { 
	vertical-align: bottom; 
	margin: 0px; 
	padding: 0px; 
}
TABLE.tabmenu TD.notab { border-bottom: 1px solid black; }
TABLE.tabmenu TD.notab H1,
TABLE.tabmenu TD.notab H2,
TABLE.tabmenu TD.notab H3 { margin-bottom: 0.1em; }
TABLE.tabmenu #tabmenu { margin-bottom: 0; margin-top: 2px; }




/* ============================================================
 * Subheading Link Bar -- For major subdivisions of the site 
 */
TABLE.subhead { 
	width: 100%;
	border-bottom: 1px solid black;
	border-collapse: collapse; 
	margin-bottom: 1em;
} 
TABLE.subhead TD { 
	vertical-align: bottom; 
	margin: 0px; 
	padding: 0 0 0.5em 0;
}
TABLE.subhead TD.sublogo { text-align: left; }
TABLE.subhead TD.sublinks { text-align: right; 	padding-left: 2em; }

/* ============================================================
 * GALLERIES - For photos, screencaps or other things
 */

TABLE.gallery { 
	margin-top: 1em; 
	margin-bottom: 1em; 
	border: solid 1px #CCCCCC;
	border-collapse: collapse;
	}
TABLE.gallery IMG { border: none; } 
TABLE.gallery TD { 
	text-align: center;
	vertical-align: bottom; 
	margin: 0px; padding: 30px; 
	} 
TABLE.gallery TH { 
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bold; 
	font-size: 120%; 

	color: #CC3333; 
	text-align: left;
	vertical-align: bottom; 
	margin: 0px; padding: 5px; 
 	border-bottom: solid 1px #CCCCCC;
	} 

/* gallery for photos, usually 72px wide, with seven across */
TABLE.gal-photo TD { padding: 5px; } 

/* display with photo and accompanying text, fixed width */
TABLE.gal-display { width: 50em; }
TABLE.gal-display TD { 
	text-align: left;
	vertical-align: middle; 
	padding: 1em; 
	} 



/* ============================================================
 * PARAGRAPH AND FONT STYLES - Used primarily by the reference manuals
 * generated from Framemaker, but available for other pages as well.
 */
SPAN.keyword {
	font-weight: bold;
}

SPAN.code {
	font-size: 95%;
	font-weight: bold;
 	font-family: monospace;
}

PRE.code {
	margin-left: 5%; 
	margin-right:5%; 
	padding: 0.5em; 
	background:#efefef; 
	border: solid 1px black;
}

/* Turn off the fancy backgrounds when used in tables */
TD PRE.code, TH PRE.code { 
	background: none; 
	border: none;
	margin: 0; 
	padding: 0; 
}

/* In the printed manuals, we use an alert icon, here we just use red
 * bars on each side.  There may be better ways to make it stand out.
 */
P.alert {
	border-left: solid 3px red; 
	border-right: solid 3px red; 
	padding-left: 0.5em;
	padding-right: 0.5em;
}

/* Splash banner at the top of a page */
DIV.splash {
	padding: 0 0 2em 0;
	margin: 0 0 2em 0;
	border-bottom: 1px solid #808080;
	}

/* Used to emphasise a quote or other statement */
.redcaps {
	font-family: Arial, Helvetica, sans-serif; 
	font-weight: bold; 
	/*	font-variant: small-caps; */
	color: #CC3333;
}



/* ============================================================
 * SORTABLE TABLES - Used by the sortable table javascript utility
 * put together by Joost de Valk 
 */
table.sortable {
	border-spacing: 0;
	border: 1px solid #000;
	border-collapse: collapse;
}

table.sortable th a img {
	border: 0;
}

table.sortable th, table.sortable td {
	text-align: left;
	padding: 2px 4px 2px 4px;
	border-style: solid;
	border-color: #444;
}
table.sortable th {
	border-width: 0px 1px 1px 1px;
	background-color: #ccc;
}
table.sortable td {
	border-width: 0px 1px 0px 1px;
}
table.sortable tr.odd td {
	background-color: #ddd;
}
table.sortable tr.even td {
	background-color: #fff;
}
table.sortable tr.sortbottom td {
	border-top: 1px solid #444;
	background-color: #ccc;
	font-weight: bold;
}



/* ============================================================
 * PRESS RELEASES - Styles specific to PR content.
 */
p.inline {
	display: inline; 
}

div.pressrelease p.date {
	display: inline; 
	font-weight: bold; 
}
div.pressrelease p.summary {
	font-style: italic; 
	margin-top: 1em;
	margin-bottom: 2em;
}

div.pressrelease h2 {
	font-size: 100%; 
	margin-top: 2em;
	margin-bottom: 0;
	border-bottom: 1px solid black;
}

div.pressrelease h3 {
	font-size: 100%; 
	margin-top: 1em;
	margin-bottom: 0;
}



/* Nicely indented definition list for terms.  Consider applying this
 * to the base DL element.
 */
DL.termdefs  { margin: 2em; padding: 0; }
DL.termdefs DT { font-weight: bold; }
DL.termdefs DD { margin: 0 3em 1em 3em; }

UL.tight LI { margin-top: 0; margin-bottom: 0; }
UL.loose LI { margin-top: 1em; margin-bottom: 1em; }