﻿/*
Affinity Circles Styles
Title:  Default CSS
Author: Pasquale Scerbo (pasquale@waveactive.com)
Date:  May 2008
Website:  http://www.affinitycircles.com
*/
/*----------------- CSS NORMALIZER -----------------*/
/*
- cancels default styles applied to page elements
- adjusts default elements between browsers to same baseline
*/
img, div { behavior: url(iepngfix.htc) }
div, dl, dt, dd, ul, ol, li, pre, hr, form, fieldset, input, th, td {margin:0; padding:0;}
address, caption, cite, code, dfn, em, th, var {font-style:normal; font-weight:normal;}
table {border-collapse:collapse; border-spacing:0; font-size:inherit; font-size:100%;}
select, input, textarea {font:99% verdana,geneva,sans-serif;}
h1, h2, h3, h4, h5, h6 {margin:0; padding:0; font-size:100%; font-weight:normal;}
fieldset, img {border:0;}
img {vertical-align:middle;}
select, .inputStyle {border:1px solid #7F9DB9; background:#FFF; padding:.1em; margin:.1em 0 .1em .2em;}
ul, ol {padding-left:18px;}
legend {display:none;}
.skipNavigation {position:absolute; left:0px; top:-500px; overflow:hidden;}
select {background:#FFF;}
.cleaner	{ clear: both; }
.clear10	{ clear: both; height: 10px; }
.clear24	{ clear: both; height: 24px; }
.clear30	{ clear: both; height: 30px; }
.floatRight	{ float: right; }
a { outline: none; }
.png	{ _behavior: url(/common/css/iepngfix.htc); }
ol { line-height: 18px; }
p	{ margin-bottom: 16px; }

/*----------------- DEFAULT STYLES -----------------*/
/*html { height: 100%; }*/
html, body	{ margin: 0; padding: 0; background: url("img/mainBG.jpg") repeat-x bottom #faf9fc; font-family: "Lucida Grande", Verdana, Arial, Helvetica, sans-serif; font-size: 12px; color: #666; }

h1		{ border-bottom: 1px solid #666; font-size: 18px; font-weight: bold; font-family: "Lucida Grande", Verdana, Arial, Helvetica, sans-serif; color: #666; margin-bottom: 10px; line-height: 20px; }
h2		{ color: #833d1b; font-size: 13px; font-weight: bold; margin-bottom: 8px; }
h2 a	{ text-decoration: underline; color: #833d1b; }

hr 		{ height: 1px; background: none; border: 1px solid #dfdfe0; border-width: 1px 0 0 0; clear: both; margin: 5px 2px 10px 2px; }
hr.hr2 	{ height: 1px; background: none; border: 1px solid #666; border-width: 1px 0 0 0; clear: both; margin: 5px 2px 10px 2px; }

/*----------------- LINK STYLES -----------------*/
a 		{ color: #833d1b; text-decoration: none; }
a:hover	{ text-decoration: underline; }

a.arrowBox		{ background: url("img/arrow-box.gif") no-repeat right bottom; padding-right: 17px; color: #833d1b; text-decoration: underline; width:35px;}
a.arrowBoxLG	{ background: url("img/arrow-box.gif") no-repeat right 5px; padding-right: 20px; color: #833d1b; text-decoration: underline; font-size: 12px; font-weight: bold; }

/*----------------- HEADER -----------------*/
#headerHome		{ width: 960px; position: relative; height: 342px; background: url("img/header_topBG.jpg") repeat-x; margin-bottom: 17px; }
#headerContent	{ width: 960px; position: relative; height: 103px; background: url("img/header_topBG_content.jpg") no-repeat; margin-bottom: 25px; }
#headerHome #logo, #headerContent #logo	{ position: absolute; top: 9px; left: 15px; z-index: 1000; }

#quickLinks			{ position: absolute; top: 0; right: 0;height: 25px; padding-top: 3px; }
#quickLinks a		{ color: #FFF; text-transform: uppercase; font-size: 9px; padding: 0 5px 1px 5px; }
#quickLinks a:hover	{ text-decoration: none; background: #f99f20; }
#quickLinks span	{ border-right: 1px solid #FFF; padding: 8px 0px 1px 0;}

#flash		{ position: absolute; top: 74px; width: 960px; height: 269px; z-index: 0; }

/*----------------- MAIN MENU -----------------*/
#menu		{ position: absolute; top: 50px; right: -2px; width: 712px; height: 33px; _behavior: url(common/css/iepngfix.htc); background: url("img/menu-lt-ds.png") no-repeat left; padding-left: 2px; }
#menu .bg	{ background: url("img/menuBG.png") repeat-x; width: 710px; height: 33px; padding-top: 3px; }

/*======================================================*/
/*IE6 Only*/
#menu 		{ _background: none; }
#menu .bg	{ _background: url("img/menuBG.gif") no-repeat; _padding-top: 0; }
/*======================================================*/

#menu ul    { margin:0; padding:0; list-style-type:none; }
#menu li    { float:left; height: 26px; text-indent: -1000px; }
#menu a     { display:block; text-decoration:none; overflow:hidden; }

#menu a#solutions       { background: url("img/menu-solutions.gif") 0 0 no-repeat; width: 93px; height: 26px; }
#menu a#employers      	{ background: url("img/menu-employers.gif") 0 0 no-repeat; width: 99px; height: 26px; }
#menu a#associations    { background: url("img/menu-associations.gif") 0 0 no-repeat; width: 116px; height: 26px; }
#menu a#news  			{ background: url("img/menu-news.gif") 0 0 no-repeat; width: 63px; height: 26px; }
#menu a#about      		{ background: url("img/menu-about.gif") 0 0 no-repeat; width: 71px; height: 26px; }

#menu a#solutions:hover     { background: url("img/menu-solutions.gif") 0 -26px no-repeat; width: 93px; height: 26px; }
#menu a#employers:hover     { background: url("img/menu-employers.gif") 0 -26px no-repeat; width: 99px; height: 26px; }
#menu a#associations:hover  { background: url("img/menu-associations.gif") 0 -26px no-repeat; width: 116px; height: 26px; }
#menu a#news:hover  		{ background: url("img/menu-news.gif") 0 -26px no-repeat; width: 63px; height: 26px; }
#menu a#about:hover      	{ background: url("img/menu-about.gif") 0 -26px no-repeat; width: 71px; height: 26px; }

#menu a#solutions.on     { background: url("img/menu-solutions.gif") 0 -52px no-repeat; width: 93px; height: 26px; }
#menu a#employers.on     { background: url("img/menu-employers.gif") 0 -52px no-repeat; width: 99px; height: 26px; }
#menu a#associations.on  { background: url("img/menu-associations.gif") 0 -52px no-repeat; width: 116px; height: 26px; }
#menu a#news.on  		 { background: url("img/menu-news.gif") 0 -52px no-repeat; width: 63px; height: 26px; }
#menu a#about.on      	 { background: url("img/menu-about.gif") 0 -52px no-repeat; width: 71px; height: 26px; }

/*----------------- SUB-MENU -----------------*/
#subMenu			{ position: absolute; top: 84px; left: 250px; width: 703px; height: 14px; }
#subMenu ul			{ padding: 0; margin: 0; list-style: none; }
#subMenu li			{ float: left; color: #fff; }
#subMenu li a		{ padding: 2px 4px 2px 4px; text-decoration: none; color: #fff; }
#subMenu li a:hover	{ background: #fa9e1f; text-decoration: none; }
#subMenu li a.current	{ background: #fa9e1f; text-decoration: none; }
#sumMenu span		{ padding: 0 8px; }

/*----------------- HOME/CONTENT PAGE SHARED WRAPPERS -----------------*/
#container		{ width: 960px; margin: auto; }
#contentWrap	{ float: left; width: 960px; line-height: 18px; }

/*----------------- HOME PAGE LAYOUT -----------------*/
/*left column*/
#leftCol		{ float: left; width: 482px; background: url("img/rc-lg-top.gif") no-repeat; padding-top: 8px; margin-right: 9px; _margin-right: 7px; }
#leftCol .bot	{ float: left; width: 482px; background: url("img/rc-lg-bot.gif") no-repeat bottom; padding-bottom: 8px; }
#leftCol .fill	{ float: left; width: 450px; background: url("img/rc-box-fill.gif") repeat-x bottom #faf9fc; border: 1px solid #cfcfd0; border-width: 0 1px; padding: 0 15px 8px 15px; }

/*what's new box*/
.boxWrap		{ float: left; padding-top: 5px; }
.boxWrap .date		{ color: #333; font-size: 10px; font-weight: bold; margin-bottom: 3px; }
.boxWrap .icon		{ float: left; width: 34px; }
.boxWrap .txt		{ margin-bottom: 5px; }
.boxWrap .txtRight	{ float: left; width: 410px; margin-left: 5px; }

/*center column*/
#centerCol			{ float: left; width: 230px; background: url("img/rc-sm-top.gif") no-repeat; padding-top: 8px; margin-right: 9px; position: relative; }
#centerCol .bot		{ float: left; width: 230px; background: url("img/rc-sm-bot.gif") no-repeat bottom; padding-bottom: 8px; }
#centerCol .fill	{ float: left; width: 201px; background: url("img/rc-box-fill.gif") repeat-x bottom #faf9fc; border: 1px solid #cfcfd0; border-width: 0 1px; padding: 0 12px 8px 15px; }

/*right column*/
#rightCol		{ float: left; width: 230px; background: url("img/rc-sm-top.gif") no-repeat; padding-top: 8px; position: relative; }
#rightCol .bot	{ float: left; width: 230px; background: url("img/rc-sm-bot.gif") no-repeat bottom; padding-bottom: 8px; }
#rightCol .fill	{ float: left; width: 201px; background: url("img/rc-box-fill.gif") repeat-x bottom #faf9fc; border: 1px solid #cfcfd0; border-width: 0 1px; padding: 0 12px 8px 15px; }

/*on home page only*/
.centerTxt	{ clear: both; text-align: center; position: absolute; bottom: 10px; width: 210px; left: 0; padding: 0 10px; _bottom: 20px; }

/*----------------- CONTENT PAGE LAYOUT -----------------*/
/*left column*/
#contentLeft			{ float: left; width: 722px; margin-right: 8px; margin-top: 15px; }
#contentLeft h2			{ color: #666; font-size: 14px; margin: 30px 0 -10px 0; }
#contentLeft h2.aci		{ padding-left: 18px; color: #666; font-size: 14px; margin: 18px 0 -10px 0; background: url("img/abullet.gif") no-repeat 2px 2px; }
#contentLeft.simple		{ margin-right: 18px; width: 712px; }
#contentLeft .colOne		{ width: 320px; float: left; margin-right: 15px; }
#contentLeft .colTwo		{ width: 375px; float: left; }
#contentLeft ul			{ margin-left: 30px; }
#contentLeft .boxTop	{ width: 722px; float: left; background: url("img/cbox-top.gif") no-repeat; }
#contentLeft .boxTopForm	{ width: 722px; float: left; background: url("img/cbox-top2.gif") no-repeat; }
#contentLeft .boxBot	{ width: 722px; float: left; background: url("img/cbox-bot.gif") no-repeat bottom; padding-bottom: 11px; }
#contentLeft .boxFill	{ width: 720px; float: left; margin-top: 8px; border: 1px solid #cfcfd0; border-width: 0 1px; background: url("img/cbox-fill.gif") bottom repeat-x #faf9fc; position: relative; }
#contentLeft .title		{ font-weight: bold; font-size: 15px; color: #666; padding: 8px 0 0 11px; }

ul.aci		{ padding: 0; margin: 0; list-style: none; }
ul.aci li	{ padding-left: 20px; background: url("img/abullet.gif") no-repeat 2px 3px; padding-bottom: 7px; margin-left: -28px; }
ul.aci li ul	{ margin-top: 5px; }
ul.aci li li 	{ list-style-type: lower-roman; background: none; padding-left: 5px; margin-left: -10px; }

/*right column*/
#contentRight	{ float: left; width: 228px; margin-top: 20px; font-size:2px color:#FFF ; z-index:-89;}
html>body #contentRight	{ float: left; width: 228px; margin-top: 27px; }

/*box for right column*/
.boxRight				{ width: 228px; float: left; margin-bottom: 10px; }
.boxRight .bot			{ background: url("img/rightColBoxFill.gif") repeat-y; }
.boxRight .top			{ background: url("img/rightColBoxBot.jpg") no-repeat bottom; padding-bottom: 20px; }
.boxRight .component 	{ padding: 5px 10px 5px 10px; }
.boxRight .title		{ background: url("img/rightColBoxHead.jpg") no-repeat; font-size: 18px; font-weight: bold; font-family: "Lucida Grande", Verdana, Arial, Helvetica, sans-serif; color: #666; text-transform: uppercase; height: 28px; padding: 6px 0 0 13px; margin-bottom: 12px; }
.boxRight .subtitle		{ background: url("img/rightColBoxSubHead.jpg") no-repeat; font-size: 18px; font-weight: bold; font-family: "Lucida Grande", Verdana, Arial, Helvetica, sans-serif; color: #666; text-transform: uppercase; height: 28px; padding: 6px 0 0 13px; margin-bottom: 12px; }
.boxRight .nb			{ border-bottom: 0; margin-bottom: 5px; }
.boxRight hr 			{ height: 1px; background: none; border: 1px solid #dfdfe0; border-width: 1px 0 0 0; clear: both; margin: 5px 10px 10px 10px; }

.button	{ margin-bottom: 10px; border: 0; }

/*----------------- VERTICAL INDEX PAGE -----------------*/
.innerLeft	{ float: left; width: 243px; _behavior: url(common/css/iepngfix.htc); background: url("img/logo-leftnavBG.png") no-repeat; }
.innerRight	{ float: left; width: 446px; padding: 15px 18px 8px 8px; }
.innerRight .colOneInner	{ width: 215px; margin-right: 10px; float: left; letter-spacing: 0; }
.innerRight .colTwoInner	{ width: 215px; margin-right: 0; float: left; letter-spacing: 0; }
.innerRight h1	{ font-size: 18px; font-family: Verdana, Arial, Helvetica, sans-serif; font-weight: bold; color: #8e8e8a; border: 0; line-height: 18px; }
.innerRight h2	{ font-weight: bold; font-size: 12px; background: url("img/abullet.gif") no-repeat; padding-left: 18px; color: #666; line-height: 18px; }

.compWrap	{ clear: both; margin-top: 20px; float: left; width: 720px; }
.innerLeft .img	{ width: 230px; margin-right: 2px; }
.innerRightNP	{ padding: 0; width: 477px; float: left; }

#leftNav			{ float: left; }
#leftNav h2			{ width: 234px; color: red; font-size: 13px; margin-top: 0; margin-bottom: 0; }
#leftNav h2 a 		{ color: #FFF; text-decoration: none; height: 24px; display: block; padding: 4px 0 0 11px; }
#leftNav h2 a:hover { background: url(img/left-on.jpg) no-repeat; height: 24px; }
.atStart			{ margin: 0; padding: 0; }
.np 				{ height: 0px; }
.itemWrap			{ padding: 8px 0; background: #e2e2e0; }
.item				{ height: 25px; font-weight: bold; color: #8e8e8a; }
.item a				{ color: #8e8e8a; display: block; padding-left: 25px; padding-top: 4px; }
.item a:hover		{ text-decoration: underline; color: #833d1b; padding-left: 25px; padding-top: 4px; }


/*----------------- HOME/CONTENT SHARED STYLES -----------------*/
.component			{ float: left; padding: 2px; padding-bottom: 6px; }
.component .left	{ float: left; width: 69px; height: 51px; }
.component h2		{ float: left; margin-bottom: 0; }
.component .right	{ float: left; width: 123px; padding-left: 5px; }
.component .bold	{ font-weight: bold; font-size: 10px; padding-top: 5px; line-height: 14px; padding-left: 10px; }
.component .txt		{ clear: both; padding-bottom: 5px; padding-top: 5px; }
.component .date	{ font-size: 10px; }
.component .rep		{ font-weight: bold; font-style:italic; }
/*
#contentRight.component 			{ padding-bottom: 10px; border-bottom: red; margin-bottom: 18px; }
#contentRight .nb					{ border-bottom: 0; margin-bottom: 5px; }
#contentRight.component .right		{ float: left; width: 133px; padding-left: 5px; }
#contentRight.component .right2		{ float: left; width: 210px; padding-left: 0; }
#contentRight.txt					{ clear: both; border-bottom: none; padding-top: 5px; width: 206px; padding-left: 5px; }
*/

/*----------------- MISC -----------------*/
.paper		{ width: 165px; padding-left: 20px; background: url("img/icon-paper.gif") no-repeat 0 4px; min-height: 25px; padding-top: 0px; margin-left: 11px; font-weight: bold; margin-top: 10px; }
.paper a 	{ text-decoration: underline; }

.video		{ width: 185px; padding-left: 27px; background: url("img/icon-video.gif") no-repeat 0 5px; height: 25px; padding-top: 4px; margin-left: 11px; font-weight: bold; margin-top: 10px; }
.video a	{ text-decoration: underline; line-height: 15px; }

.podcast	{ width: 185px; padding-left: 27px; background: url("img/icon-podcast.gif") no-repeat 0 5px; height: 25px; padding-top: 4px; margin-left: 11px; font-weight: bold; margin-top: 10px; }
.podcast a	{text-decoration: underline; line-height: 15px; }

.mail	{ width: 185px; padding-left: 27px; background: url("img/icon-mail.gif") no-repeat 0 5px; height: 25px; padding-top: 4px; margin-left: 11px; font-weight: bold; margin-top: 10px; }
.mail a	{ text-decoration: underline; line-height: 15px; }

.line	{ background: url("img/line.gif") repeat-x; height: 1px; margin: 10px 8px; }

/*black box*/
.blackBox		{ width: 211px; background: url("img/blackBox-top.gif") no-repeat; color: #FFF; font-size: 13px; margin-bottom: 5px; float: left; margin-right: 15px; border: 1px solid #faf9fc; margin-top: 5px; }
.blackBox .bot	{ width: 195x; background: url("img/blackBox-bot.gif") no-repeat bottom; padding-bottom: 14px; padding: 5px 13px 13px 13px; }
.blackBox span	{ color: #f1932f; font-weight: bold; font-size: 20px; }

.cs	{ float: left; margin: 0 20px 10x 0; }

.form span { color: #CC0000; height: 0; padding-top: 10px; font-size: 10px; }
span.red	{ color: #cc0000; }

/*----------------- TABLE STYLES -----------------*/
table.news	{ border-collapse: collapse; }
table.news td	{ padding: 10px 0; border-bottom: 1px solid #bfbfbf; vertical-align: top; }

.form	{ margin: auto; padding-top: 20px; width: 540px; }
.required	{ position: absolute; top: 10px; right: 20px; }
table.form			{ border-collapse: collapse; }
table.form td		{ padding: 5px 10px 5px 5px; vertical-align: top; }
table.form label	{ font-weight: bold; font-size: 11px; }
table.form input	{ border: 1px solid #bfbfbf; background: #fff; color: #666; font-size: 11px; width: 236px; height: 18px; margin-right: 15px; padding-top: 4px; padding: 4px 5px 0 5px; }
table.form .radio	{ border: 0; background: none; width: auto; height: auto; float: left; margin-right: 5px; }
table.form .img		{ width: auto; height: auto; border: 0; background: none; float: left; margin-right: 13px; text-align: left; }
table.form textarea	{ width: 234px; height: 175px; margin-right: 15px; padding: 4px 5px 0 5px; }
table.form .request	{ width: 244px; height: 185px; }

/*----------------- FOOTER -----------------*/
#footer	{ width: 960px; margin: auto; border-top: 1px solid #666; text-align: center; font-size: 10px; padding: 20px 0; clear: both; }

