/* CSS for Union Plus Debt Management */

/* ===========================================
         GLOBAL DEFINITIONS              
==============================================*/

* { margin: 0; padding: 0; }

.clear { clear: both; height: 0px; font-size: 0px; }

a { color: #2f7cb2; text-decoration: none; }

a img { border: none; }
a.skipToContent { display: none; }

span { display: none; }

p { margin-bottom: 1em; }


/* ===========================================
         MAIN LAYOUT
==============================================*/

body { 
	background-color: #ffffff;
	font-family: Verdana, Helvetica, sans-serif;
	font-size: 75%; /* Use percentages and ems for fonts: http://www.alistapart.com/articles/elastic/ */
	line-height: 1.4em;
	color: #000;
	text-align: center;
	behavior: url(/behaviorfiles/csshover.htc); /* Expands use of "hover" command. Helps drop down menus work in IE5+ */
}

#container {
	width: 770px;
	margin: 0 auto;
	text-align: left;
	border-bottom: 43px solid #2c72a6;
}

#header {
	border-bottom: 3px solid #2f7cb2;
}

#content {
	padding-bottom: 20px;
	zoom: 1;  /* Fixes bottom margin bug in Win/IE6,7 */
	_margin-bottom: 0;  /* For Win/IE6 */
}
	*+html #content { margin-bottom: 0;  /* For Win/IE7 */ }


/* ===========================================
         NAV
==============================================*/

#topNav {
	list-style: none;
	background-color: #000;
	border-top: 1px solid #fff;
	border-bottom: 1px solid #fff;
}

#topNav li {
	float: left;
}

#topNav li a {
	_float: left; /* For Win/IE6 - makes <a> stretch entire width of li */
	display: block;
	padding: 3px 10px;
	background-color: #000;
	font-size: 0.92em;
	color: #fff;
	border-right: 1px solid #fff;
	border-left: 1px solid #2f7cb2;
}

#topNav li a:hover {
	background-color: #2f7cb2;
}


/* ---------- DROP DOWN SUBMENUS ---------- */

#topNav ul.nav2 {
	_clear: left; /* For Win/IE6 */
	display: none;
	position: absolute;
	list-style: none;
	border-top: 1px solid #949cc0;
	width: 14em;
	_z-index: 99; /* For Win/IE6 - fixes drop downs appearing behind elements with position:relative */
}

#topNav li.nav1:hover ul.nav2 { 
	display: block;
}

#topNav ul.nav2 li {
	width: 100%;
}

#topNav ul.nav2 li a {
	background-color: #f1f5f8;
	color: #000;
	border: 1px solid #949cc0;
	border-top: none;
	_width: 14em; /* For Win/IE6 */
}

#topNav ul.nav2 li a:hover {
	background-color: #2f7cb2;
	color: #fff;
}


/* ---- FIRST LINK (Assess Your Debt) ---- */

#topNav li.navLink-first a {
	padding-left: 35px;
	border-left: none;
}

#topNav li.navLink-first ul.nav2 li a {
	padding-left: 10px;
}


/* ---------- HOME LINK ---------- */

#topNav li.navLink-home {
	float: right;
	padding: 3px 10px;
	background-color: #000;
	_text-align: right; /* Helps text align right in IE */
}
	*+html #topNav li.navLink-home { /* For Win/IE7 */
		float: none;
		padding-bottom: 0;
		text-align: right;
	}


#topNav li.navLink-home a {
	_display: inline; /* Helps text align right in IE */
	_float: none; /* For Win/IE6 - cancels-out float: left in #topNav li a */
	font-size: 0.9em;
	border: none;
	padding: 0;
}
	*+html #topNav li.navLink-home a { /* For Win/IE7 */
		display: inline;
	}

#topNav li.navLink-home a:hover {
	background-color: #000;
	color: #2f7cb2;
}


/* ===========================================
         PAGE TOOLS
==============================================*/

#pageTools {
	list-style: none;
	margin-top: 6px;
}

#pageTools li {
	float: right;
	margin-right: 0.5em;
}

#pageTools li a {
	color: #8f8f8f;
	font-size: 0.8em;
	font-weight: bold;
}

#pageTools li a:hover {
	color: #2f7cb2;
}

#pageTools li img {
	float: left;
	margin-right: 0.2em;
}

#pageTools li.bookmark {  padding-right: 0.5em; margin-right: 0.7em; border-right: 1px solid #000; }
#pageTools li.printPage { margin-right: 0; }
#pageTools li.emailPage img { margin-top: 2px; }




/* ===========================================
         CONTENT - Common
==============================================*/

#content {
	margin: 35px 60px 1em 60px;
	padding-bottom: 20px;
	border-bottom: 1px solid #eaeaea;
}
	*+html #content { margin-bottom: 1em;  /* For Win/IE7 - For some reason, previous margin value doesn't work */ }

#content a {
	font-weight: bold;
}

#content a:hover {
	text-decoration: underline;
}

#content ul, 
#content ol {
	margin-left: 2em;
	margin-bottom: 1.5em;
}

#content ul.noBullets {
	list-style: none;
}

#content li {
	margin-bottom: 0.5em;
}

#content ul.paragraphList li, #content ol.paragraphList li {
	margin-bottom: 1em;
}

#content ul ul, #content ul ol, 
#content ol ul, #content ol ol {
	margin-top: 0.5em;
}

#content h3 {
	font-size: 1.1em;
	margin-bottom: 0.6em;
}
.required {
	color:#cc0000;
}

/* ===========================================
         PAGE TITLE
==============================================*/

#pageTitle.withoutIcon {
	margin-bottom: 1.5em;
}

#pageTitle.withIcon {
	margin-bottom: 0;
}

#content .storiesIcon { /* Union Stories icon doesn't fade to white at bottom like other icons. So give it some spacing. */
	margin-bottom: 1.5em;
}

#pageTitle img {
	float: left;
	margin-top: -2px;
	margin-left: -7px;
	margin-right: 15px;
	_position: relative; /* For Win/IE6 - prevents image from being cut-off due to negative margin */
}

#pageTitle h2 {
	margin-bottom: 0.1em;
	_margin-bottom: 0.2em; /* For Win/IE6 */
	font-size: 1.5em;
	color: #2f7cb2;
}
	*+html #pageTitle h2{ /* For Win/IE7 */
		margin-bottom: 0.15em;
	}

#pageTitle h1 {
	font-size: 1.4em;
	line-height: 1.1em;
}



/* ===========================================
         BOXES W/ROUND CORNERS
==============================================*/

.tr { background-repeat: no-repeat; background-position: right top; }
.br { background-repeat: no-repeat; background-position: right bottom; }
.bl { background-repeat: no-repeat; background-position: left bottom; }
.tl { background-repeat: no-repeat; background-position: left top; }

.bdr_t { background-repeat: repeat-x; background-position: top; }
.bdr_r { background-repeat: repeat-y; background-position: right; }
.bdr_b { background-repeat: repeat-x; background-position: bottom; }
.bdr_l { background-repeat: repeat-y; background-position: left; }


.blueBox,.liteBlueBox, .greyBox {
	margin-bottom: 2em;
} 

/* ---------- BLUE BOX ---------- */

.blueBox {
	background-color: #c1d0ed;
}

.blueBox .tr { background-image: url(../images/boxes/blue-tr.gif); }
.blueBox .br { background-image: url(../images/boxes/blue-br.gif); }
.blueBox .bl { background-image: url(../images/boxes/blue-bl.gif); }
.blueBox .tl { background-image: url(../images/boxes/blue-tl.gif); }

.blueBox .bdr_t, .blueBox .bdr_r, 
.blueBox .bdr_b, .blueBox .bdr_l { background-image: url(../images/boxes/blue-bdr.gif); }


/* ---------- LITE BLUE BOX ---------- */

.liteBlueBox {
	background-color: #e1e7f7;
}

.liteBlueBox .tr { background-image: url(../images/boxes/liteBlue-tr.gif); }
.liteBlueBox .br { background-image: url(../images/boxes/liteBlue-br.gif); }
.liteBlueBox .bl { background-image: url(../images/boxes/liteBlue-bl.gif); }
.liteBlueBox .tl { background-image: url(../images/boxes/liteBlue-tl.gif); }

.liteBlueBox .bdr_t, .liteBlueBox .bdr_r, 
.liteBlueBox .bdr_b, .liteBlueBox .bdr_l { background-image: url(../images/boxes/liteBlue-bdr.gif); }


/* ---------- GREY BOX ---------- */

.greyBox {
	background-color: #eaeaea;
}

.greyBox .tr { background-image: url(../images/boxes/grey-tr.gif); }
.greyBox .br { background-image: url(../images/boxes/grey-br.gif); }
.greyBox .bl { background-image: url(../images/boxes/grey-bl.gif); }
.greyBox .tl { background-image: url(../images/boxes/grey-tl.gif); }

.greyBox .bdr_t, .greyBox .bdr_r, 
.greyBox .bdr_b, .greyBox .bdr_l { background-image: url(../images/boxes/grey-bdr.gif); }


/* ---------- BOX CONTENT ---------- */

.boxContent {
	padding: 11px 15px 1px 15px;
}

.boxContent ol, .boxContent ul {
	margin-right: 1em;
}

/* Numbered lists with bold numbers */
.boxContent ol.boldNumbers { font-weight: bold; }
.boxContent ol.boldNumbers span { display: inline; font-weight: normal; }


/* ---------- MORE LINKS BOX ---------- */

.moreLinks {
	float: right;
	width: 250px;
	margin-left: 0.4em;
	margin-bottom: 0.5em;
}


/* ===========================================
         INSET PHOTO
==============================================*/

#content .insetPhoto {
	clear: right;
	float: right;
	margin-left: 0.8em;
	margin-bottom: 0.4em;
}


/* ===========================================
         PDF DOWNLOAD
==============================================*/

.pdf {
	padding-top: 18px;
}

.pdf img {
	float: left;
	margin-top: -14px;
	margin-right: 0.4em;
}


/* ===========================================
         FOOTER
==============================================*/

#footer {
	padding-bottom: 0.4em;
	text-align: center;
	border-bottom: 6px solid #000;
}

#footer ul {
	list-style: none;
	margin-bottom: 0.8em;
}

#footer li {
	display: inline;
}

#footer li a {
	padding: 0 0.4em;
	color: #9c9c9c;
	font-weight: bold;
	border-right: 1px solid #000;
}
	*+html #footer li a { /* For Win/IE7 */
		padding: 2px 10px 4px 10px;
	}

#footer li a:hover {
	color: #2f7cb2;
}

#footer li.last a {
	border-right: none;
}

#footer p {
	color: #9a9a9a;
	font-size: 0.92em;
}