/* --------------------------------------------------------------------------

	(c) 2004-2005 U.S. Robotics Corporation


	Usage:

	Classes are used for elements that can repeat on a single page.
	IDs are used for elements that can occur only once on a single page.

	For curly quotation marks, use “ and ”.
	For curly apostrophes, use ‘ and ’.

	Use H1-9 for standalone phrases that describe a following section.

	Lists with Roman numerals:
		<ol class="clsRoman">
			<li>Connect the antenna to the Wireless MAXg Router.</li>
			...
		</ol>

	Images that float to the left of descriptive text:
		<img class="clsLeft" src="images/attention.gif" width="53" height="53">

	To prevent text following text that flows around a floating area,
	use the BR tag:
		<img class="clsLeft" ...>
		<p>This image shows ...</p>
		<br>

	Images that are centered:
		<div class="clsCenter"><img src="images/5641 install full1.gif"></div>

	Paragraphs leading with a regular keyword:
		<p><span class="clsKeyword">Power LED:</span>
		This LED is lighted green when the unit is functioning. ...</p>

	Paragraphs leading with a really important keyword:
		<p><span class="clsKeywordFlash">Attention:</span> If you are installing the
		Wireless MAXg Router and a Wireless MAXg PC Card, PCI Adapter...</p>

	A paragraph of a note:
		<p class="clsNote"><span class="clsKeyword">Note:</span> The U.S. Robotics
		Wireless has a very important thing.</p>

	There are also classes for specific text:
		clsPage			-- the name of a router page (e.g., "Internet")
		clsPageSection	-- the name of a section within a router page (e.g., "Static Routes")

		<p>Click on the <span class="clsPage">Firewall</span> tab and scroll to
		the <span class="clsPageSection">Internet Access Control</span> area.</p>

	Future?

	We could also make classes for these, but bold should be good enough for now.
		clsLabel			-- the text of a label on a router page (e.g., "Pass phrase")
		clsButton		-- the name of a button on a router page (e.g., "Finish")

*/


/* --------------------------------------------------------------------------

	Content styles -- standard tags

*/

A
{
	font-weight:	bold;
}
A:hover
{
	cursor:			hand;
	color:			red;
}

BODY, TABLE
{
	font-family:		Verdana, Arial, Sans-serif, Helvetica;
	font-size:			small;
}

BODY
{
	margin:				0 0 0.5em;
	background-color:	white;
}
DIV#idContent
{
	margin:	0 0.7em;
}


H1
{
	font-size:			x-large;
	letter-spacing:	0.05em;
}

H2
{
	margin-top:			2em;
	padding:				0.2em 0.4em;

	font-size:			large;
	letter-spacing:	1pt;
	border:				3px dotted #202080;
	background-color:	#F8F8FF;
}

H3
{
	font-size:			medium;
	letter-spacing:	0.1em;
}

H4
{
	font-size:	small;
}

/* http://www.htmlgoodies.com/beyond/css_lists.html */
LI
{
	margin-top: 1em;
	margin-bottom: 1em;
}

UL
{
	list-style-type: square;
}

OL.clsList1
{
	list-style-type: upper-alpha;
}

OL.clsList2
{
	list-style-type: decimal;
}


/* --------------------------------------------------------------------------

	Content styles -- custom classes

*/

P#idFooter
{
	border-top:		1px solid gray;
	padding-top:	0.5em;

	font-size:		xx-small;
	white-space:	nowrap;
	color:			gray;
}

IMG.clsLeft
{
	float:	left;
	clear:	left;
	margin:	0em 1em 1em 0em;
}

IMG.clsRight
{
	float:	right;
	clear:	right;
	margin:	0em 0em 1em 1em;
}

BR
{
	clear:	all;
}

DIV.clsCenter
{
	text-align:	center;
}

SPAN.clsKeyword
{
	font-weight:		bold;
}

P SPAN.clsKeywordFlash
{
	font-weight:		bold;
	text-transform:	uppercase;
}

.clsNote
{
	border:				2px solid #202080;
	background-color:	#F8F8FF;
	padding:				0.5em;
}
.clsNote SPAN.clsKeyword
{
	color:				red;
	font-weight:		bold;
}

SPAN.clsPage, SPAN.clsPageSection
{
	font-weight:		bold;
}

/* Troubleshooting and FAQs and HowTo pages with list of linked items */
P.clsQuestion A
{
	color:				#202080;
	font-weight:		normal;
	text-decoration:	none;
	border-bottom:		1px solid #202080;
	padding:				0.1em 0em;
	line-height:		145%;			/* this lets IE display the border of the last item on the page */
}
P.clsQuestion A:hover
{
	color:				white;
	background-color: #202080;
	border-bottom:		0;
}

P.clsFAQ
{
	font-weight:	bold;
	border-top:		6px double silver;
	padding-top:	1em;
}
P.clsAnswer, DIV.clsAnswer
{
	margin-left:	5em;
}


/* --------------------------------------------------------------------------

	Header styles

*/

IMG#idImgHeader
{
	float:			right;
	margin-top:		0.2em;
	margin-right:	0.2em;
	border:			0;
}

DIV#idHeader
{
	margin-bottom:		0.5em;
	padding:				0.7em 0.5em;

	font-family:		Verdana, Arial, sans-serif;
	font-weight:		bold;
	font-size:			large;
	color:				white;
	background-color:	red;
	letter-spacing:	1pt;
}


/* --------------------------------------------------------------------------

	Menu bar styles

*/

DIV#idMenu
{
	margin:				1.4em 0 1em;
	padding-bottom:	0.2em;
	border-bottom:		1px solid #202080;
}

DIV#idMenu A.clsMenuItemInactive, DIV#idMenu SPAN.clsMenuItemActive
{
	margin-left:		0.4em;
	padding:				0.2em 0.7em;

	font-weight:		normal;		/* w/o this it's bold because A is bold */
	background-color:	#F0F0F0;
	text-align:			center;

	border-top:		2px solid darkgray;
	border-left:	2px solid darkgray;
	border-right:	2px solid darkgray;
}

DIV#idMenu SPAN.clsMenuItemActive
{
	padding-top:		0.4em;		/* make this tab a little taller than the inactive ones */

	background-color:	white;
	border-top:			4px solid #202080;
	border-left:		4px solid #202080;
	border-right:		4px solid #202080;
	border-bottom:		1px solid white;
	font-weight:		bold;
}

DIV#idMenu A
{
	color:				black;
	text-decoration:	none;
}

DIV#idMenu A:hover
{
	border-top:			2px solid #202080;
	border-left:		2px solid #202080;
	border-right:		2px solid #202080;
	cursor:				hand;
	background-color:	white;
}


/* --------------------------------------------------------------------------

	Sub-menu bar styles

*/

DIV#idMenu2
{
	background-color:	#202080;

	margin-top:			-0.8em;	/* offsets some of DIV#idMenu's 1em bottom margin */
	padding:				0.2em 0.3em;
}

DIV#idMenu2 .clsMenuItemInactive, DIV#idMenu2 .clsMenuItemActive
{
	color:		white;
	font-size:	small;

	padding:		0.1em 0.3em;
	text-align:	center;
}

DIV#idMenu2 .clsMenuItemActive
{
	font-weight:		bold;
	color:				black;
	background-color:	white;
	padding-top:		0;
	padding-bottom:	0;
/*	border:	1px solid #202080;
*/
}

DIV#idMenu2 A
{
	text-decoration:	none;
}

DIV#idMenu2 A:hover
{
	cursor:				hand;
	font-weight:		bold;
	color:				black;
	background-color:	white;
}