/* the basics */
html, body { margin:0px; height:100%; width:100%; }

body { font-family : arial,verdana; font-size : 11px; line-height:16px; color : #333333;   }

p { padding:0px; margin-top:0px; margin-bottom:10px; }

a { color: #000073;  }
a:visited { color: #000073; }
a:hover { color: #577193; }

a.footernav {
 	font-family : arial, tahoma;
	font-size : 10px;
	letter-spacing:normal;
	color: #669900;
	text-decoration:none;
}

a.footernav:hover {
	text-decoration:underline;
	color:#ffffff;
}

a.headernav {
 	font-family : arial, tahoma;
	font-size : 12px;
	letter-spacing:normal;
	color: #000000;
	text-decoration:none;
}

a.headernav:hover {
	text-decoration:underline;
	color:#0D2152;
}

/* containers */
#body { background-color:white; margin-left:27px; width:752px; margin-top:10px; }

#masthead { background-color:white; width:790px; }

#primaryNav {
	height:39px;
	background-image:url(../image/wui-navbg.jpg);
	background-repeat:no-repeat;
	overflow:hidden;
	padding-left:17px;
}

#primaryNav img {
	margin-right:25px;
	margin-bottom:0px;
	margin-top:8px;
}

#beveledNav {
	border: 1px solid #D9D9D7;
	padding:0px;
	margin:0px;
	float:right;
	width:216px;
}

#beveledNav h1 {
	margin:0px;
	height:23px; /* for IE5 */
	heig\ht:18px;
	font-size:18px;
	font-weight:bold;
	font-family:futura condensed, arial narrow, arial;
	color:#FFFFFF;
	background-color:#A7A7A7;
	padding:4px 0px 0px 0px;
	overflow:hidden;
	background-image:none;
}


#beveledNav a {
	display:block;
	margin:0px;
	height:24px;
	background-image:url(../image/beveledNav.gif);
	background-repeat:no-repeat;
	font-family:futura condensed, arial narrow, arial;
	color:#1F416F;
	padding:0px 20px;
	font-weight:bold;
	text-decoration:none;
	font-size:12px;
}

#beveledNav a:hover {
	background-image:url(../image/beveledNav-over.gif);
}


#footer {
	clear:both;
	width:790px;
	background-color:#020073;
	padding-top:10px;
	padding-bottom:10px;
	font-size:9px;
	color:white;
	line-height:normal;
	margin-top:10px;
}

#footer a { color: white; text-decoration:none; }
#footer a:hover { text-decoration:underline; }



h1, .head  	{
 	font-family: arial,tahoma;
	font-size : 22px;
 	font-weight : bold;
	color : #173579;
	line-height:100%;
	margin-bottom:5px;
	}
	

.calloutbox {
	border: 1px solid #D9D9D7;
	padding:0px;
	margin:0px;
	width:216px;
}

.calloutbox p, .calloutbox h2, .calloutbox h3 {
	margin-left:15px;
	margin-right:15px;
}


/* H1 inside comment box will be the blue header stripe. This sets a default text style as well, though you can also use an image */
.calloutbox h1 {
	margin:0px;
	height:42px;
	heig\ht:36px;
	background-image:url(../image/wui-calloutheaderbg.gif);
	background-repeat:repeat-x;
	font-size:16px;
	font-weight:bold;
	font-family:futura condensed, arial narrow, arial;
	color:#FFFFFF;
	padding:3px 4px;
}


/* if you use an image, this adjusts the image down 2 pix to center it in the blue stripe */
.calloutbox h1 img {
	margin-top:2px;
}





#breadcrumb { padding:0px 10px; font-family:arial; font-size:10px; font-weight:bold; margin-bottom:15px; margin-top:15px; letter-spacing:normal; }
#breadcrumb a  { color:#999999; }
#breadcrumb a:hover { color:#942A6E; }

ul { margin-left:10px; padding-left:20px; }
ul li, ol li { margin-bottom:8px; }

ul.nav { font-size:10px; margin-left:0px; margin-top:5px; margin-bottom:5px; padding-left:18px; list-style-type:none; list-style-image:none; }
ul.nav li { margin-bottom:2px; margin-left:0px; list-style-type:none; }
ul.nav li a { background-image:url(../image/listmarker-link.gif); background-position:0px 3px; background-repeat:no-repeat; padding-left:18px; font-weight:bold; display:block; width:90%; }
ul.nav li a:hover { background-image:url(../image/listmarker-link-hover.gif); }
ul.nav li a, #breadcrumb a  { text-decoration:none; }








/* styles */
p.intro {
	background-color:#ACACAB;
	color:#FFFFFF;
	font-family:arial narrow, arial;
	font-size:16px;
	font-weight:bold;
	padding:15px;
	width:700px;
	wid\th:670px;
	float:left;
}


h2, .home1 {
	font-weight: bold;
	color: #669900;
	font-size:14px;
	padding-bottom:0px;
	margin-top:0px;
	margin-bottom:2px;
	}

h3, .home2 {
	font-weight: bold;
	color: #173579;
	font-size:14px;
	margin-bottom:2px;
	margin-top:0px;
	}




table {
	border-spacing:0px;
	border-collapse:collapse;
}

td, th {
	padding:4px;
	font-size:10px;
}

tbody.striperows td, tbody.striperows th {
	border-width:1px 0px;
	border-color:silver;
	border-style:solid;
}

.trlabel, .tdlabel, .cell, .cell2, .odd, .even {
 	letter-spacing:normal;
	font-size : 10px;
}

.trlabel, thead th  {
 	font-weight: bold;
	color: #FFFFFF;
	background-color:#1F416F;
	text-align:left;
	}
	
.tdlabel, tbody th  {
 	font-weight: bold;
	color: #FFFFFF;
	background-color:#A7A7A7;
	}
	
.cell, .odd  {
	font-weight:normal;
	color:black;
	background-color: #f0f0f0;
	}
	
.cell2, .even  {
	font-weight:normal;
	color:black;
	background-color: #e0e0e0;
	}
	
.cell3  {
	font-weight:bold;
	color:#669900;
	background-color: #E8E8E8;
	}

th a, th a:visited { text-decoration:none; color:white; }


table.form td, table.form th { border:1px solid #FFFFFF; border-width:1px 0px; }
table.form thead { border:3px solid #1F416F; }
table.form tbody { border:3px solid #A7A7A7; }
table.form tfoot td { border-width: 0px; }

table.data {width:100%;}

	
	
.input {
 	font-family : verdana, geneva, arial, helvetica;
	font-size : 10px;
	background-color:#FFFFFF;
	width:150px;
	margin:0px;
	}
	
select {
 	font-family : verdana, geneva, arial, helvetica;
	font-size : 10px;
	background-color:#ffffff;
	}

textarea .textbox {
 	font-family : courier new, monospaced;
	font-size : 11px;
	background-color:#ffffff;
	width:400px
 	}

.button {
 	font-family : verdana;
	font-size : 8pt;
	color: black;
	}
 
.dwarf {
	font-family : arial;
	font-size : 10px;
	font-weight:normal;
	line-height: 14px;
	letter-spacing:normal;
	}

	
.selectedcell {
	font-family : verdana,arial,helvetica;
 	font-size:7pt;
	font-weight:normal;
	color:black;
	background-color: #FFFFFF;
 	letter-spacing:normal;
	border-style:solid;
	border-width:2px;
	border-color:#5AAD40;
	}
	
.box  {
 	font-family : verdana,arial,helvetica;
 	font-size:10px;
	font-weight:normal;
	letter-spacing:0px;
	}

	
.dim {
	color: gray;
	}
	
.error {
	color: red;
	font-weight:bold;
	background-color:white;
	}


div.clear {clear: both; display: block; margin: 0; padding: 0; height: 0; line-height: 1px; font-size: 1px;}

.hand {cursor:pointer;cursor:hand;}

.applyBorder2 {
	border-width: 1px;
	border-color: #838383;
	border-style:solid;
}



	
/* ========== STANDARD SUB PAGE STYLES ==========
 * 1. div#breadcrumb
 * 2. h2#pageTitle
 * 3. h3#pageSubTitle
 * 4. div#pageSummary
 * 5. div#pageContents
 * 6. div#pageBullets
 * 7. div#pageConclusion 
 * 8. div#imageBlock
 * 9. div#imageBlockFeat
 * 10. div#calloutbox
 * 11. div#pageDownloads
*/
div#breadcrumb {
	margin-bottom: 0.8em;
	font-size: 10px; 
	font-weight: bold; 
}
	div#breadcrumb span.breadcrumbTitle {
		padding-right: 10px;
	}
	div#breadcrumb a:hover,
	div#breadcrumb a:focus {
		text-decoration: none; 
	}
h2#pageTitle {
	font: normal bold 18px/110% Arial, Helvetica, sans-serif;
	padding: 0.1em 0 0.2em;
}
h3#pageSubTitle {
	font: normal bold 15px/110% Arial, Helvetica, sans-serif;
	padding: 0.1em 0 0.5em;
}
div#pageSummary p,
div#pageContents p,
div#pageConclusion p,
div#pageBullets ul,
div#pageBullets ol {
	line-height: 110%;
	padding: 0.5em 0;
}
div#pageBullets {
	clear: left;
}
	div#pageBullets ul li,
	div#pageBullets ol li {
		margin-left: 3.5em;
		margin-right:0.2em;
		line-height: 150%;
	}
	div#pageBullets span.clear {
		clear: left;
	}
div#imageBlock,
div#imageBlockFeat {
	padding: 0.5em;
}
	div#imageNav {
		text-align: center;
		padding: 0.2em 0;
		font-size: 80%
	}
	div#pageContent p#currCaption,
	div#pageContent p#featCaption {
		font-size: 80%;
		text-align: center;
		line-height:111%;
		padding-top:8px;
	}
	
#calloutbox {
	width: 200px;
	position: relative;
	margin: 1em 0;
	border-width: 1px;
	border-style: solid;
	border-color:#999999;
	background-color:#f9f9f9;
	-moz-border-radius: 11px;
	-khtml-border-radius: 11px;
	-webkit-border-radius: 11px;
	border-radius: 11px;
}
	#calloutbox h3 {
		width: 180px;
		padding: 0 10px;
		margin: 12px 0px 0px 0px;
		font-size: 110%;
		font-weight:bold;
		line-height: 40px;
		text-align: left;
		background-color:#669900;
		color:#ffffff;
	}
	#calloutbox #calloutboxContent {
		width: 180px;
		padding: 0 10px;
		text-align: center;
	}
		#calloutbox ul#calloutboxList {
			width: 180px;
			padding: 0 0 12px;
			color: inherit;
		}
			#calloutbox ul#calloutboxList li {
				list-style: disc outside url(../image/navbullet.gif);
				display: list-item;
				text-align: left;
				margin: 0 0 0 1.5em;
				padding: 2px 15px 3px 0;
			}
			#calloutbox ul#calloutboxList a {
				font-size: 90%;
				text-decoration:none;
				color:#000000;
			}
			
div#pageDownloads {
	margin: 1em 0;
	clear: both;
}
	div#pageDownloads h3 {
		padding-bottom: 0.5em;
	}
	#pageDownloads div.pageDownloadBlock {
		width: 45%;
		min-height: 45px;
		float: left; 
		padding-right: 5%;
		padding-bottom: 0.5em;
		position: relative;
	}
	#pageDownloads a.pageDownloadThumbLink {
		display: block;
		padding-right: 10px;
		position: absolute;
		left: 0;
		top: 0;
	}
	#pageDownloads div.pageDownloadBlock h4,
	#pageDownloads div.pageDownloadBlock p {
		font-size: 90%;
		padding-left: 42px;
	}
			
/* ========== SUB PAGE LAYOUTS ==========
 * 1. Layout A
 * 2. Layout B
 * 3. Layout C
 * 4. Layout D
 * 5. Layout E
 * 6. Layout F
 *
 * ===== Layout A ===== */

div#pageSummary.layoutA p,
div#pageContents.layoutA p,
div#pageConclusion.layoutA p,
div#pageBullets.layoutA ul,
div#pageBullets.layoutA ol {
	padding-left: 0;
}
div#imageBlock.layoutA {
	padding: 0 0 0.5em;
}
div#imageBlock.layoutA,
div#calloutbox.layoutA {
	float: right;
	clear: right;
	margin-left: 1em;
}

/* ===== Layout B ===== */

div#imageBlockFeat.layoutB {
	float: left;
	clear: left;
	margin-right: 1em;
}
div#imageBlock.layoutB,
div#calloutbox.layoutB {
	float: right;
	clear: right;
	margin-left: 1em;
}

/* ===== Layout C ===== */

div#calloutbox.layoutC {
	float: left;
	clear: left;
	margin-right: 1em;
}
div#imageBlock.layoutC,
div#imageBlockFeat.layoutC {
	float: right;
	clear: right;
	margin-left: 1em;
}

/* ===== Layout D ===== */
div#imageBlock.layoutD {
	float: right;
	clear: right;
	margin-left: 1em;
}
div#calloutbox.layoutD {
	float: left;
	clear: left;
	margin-right: 1em;
}

/* ===== Layout E ===== */
div.imageBlock.layoutE {
	float: right;
	clear: right;
	padding: 10px;
}
div.imageBlock.layoutE p.imageCaption {
	font-size: 80%;
	text-align: right;
	margin: 0;
	padding: 0;
}
div#pageDownloads.layoutE {
	clear: none;
}
	#pageDownloads.layoutE div.pageDownloadBlock.layoutE {
		width: auto;
		float: none;
		clear: left;
		padding: 0 0.5em;
	}

/* ===== Layout F ===== */
div#imageBlock.layoutF {
	width: 300px;
	float:right;
}
div#imageBlock.layoutF p#myCaption {
	text-align: center;
}
div#imageBlock.layoutF div#thumbGallery {
	padding: 0.5em;
	text-align: center;
}
	div#imageBlock.layoutF div#thumbGallery a.thumbSwitch {
		display: inline-block;
		width: 50px;
		height: 50px;
		padding: 5px;
	}

div#calloutbox.layoutF,
div#imageBlockFeat.layoutF {
	float: left;
	clear: left;
	margin-right: 1em;
}

/* ===== Layout G ===== */
#videoBlock.layoutG {
	float: right;
	clear: right;
	padding: 0 0 1em 1em;
	text-align: center;
}
	#videoBlock.layoutG #videoWrapper {
		background: transparent url(../image/loading.gif) no-repeat 50% 50%;
		margin: 0 auto;
	}
		#videoWrapper.layoutG object {
			display: block;
			margin: 0 auto;
		}
	#videoBlock.layoutG #videoCaption {
		padding-top: 0.5em;
		text-align: center;
	}

#calloutbox.layoutG {
	float: left;
	clear: left;
	margin-right: 1em;
}

#pageThumbs {
	margin-top: 1em;
}
	#pageThumbs div.vidThumb {
		float: left;
		padding: 0.5em 1.3em 0.5em 0;
		width: 100px;
		text-align: center;
	}
		#pageThumbs div.vidThumb a {
			text-decoration: none;
			font-size: smaller;
			font-weight: bold;
			display: block;
			position: relative;
		}
			#pageThumbs div.vidThumb a img {
				border: 1px solid #CCC;
			}

/* ===== Layout H ===== */
div#videoBlock.layoutH {
	float: right;
	clear: right;
	padding: 0 0 1em 1em;
	text-align: center;
}	
	#videoBlock.layoutH #videoWrapper {
		background: transparent url(../image/loading.gif) no-repeat 50% 50%;
		margin: 0 auto;
	}
		#videoWrapper.layoutH object {
			display: block;
			margin: 0 auto;
		}
	#videoBlock.layoutH #videoCaption {
		padding-top: 0.5em;
		text-align: center;
	}
	div#videoBlock.layoutH div#thumbGallery {
		padding: 1em 0 0.5em;
		margin: 0 auto;
	}
		div#videoBlock.layoutH div#thumbGallery a.thumbSwitch {
			position: relative;
			display: block;
			float: left;
			width: 50px;
			height: 50px;
			padding: 5px;
			overflow: hidden;
		}
		
div#calloutbox.layoutH {
	float: right;
	clear: right;
	margin-left: 1em;
}

#imageBlock.layoutH {
	float: left;
	margin-right: 1em;
}	
	#imageBlock.layoutH #myCaption {
		text-align: center;
	}