/* Rick: This style sheet controls most of the layout and graphics on the KC-A site.
	I've put in notes here and there to explain what different things do.
*/

body { 
		background: #fff url(images/grade.jpg) repeat-x; /* this is the background gradation */
	font-family: Verdana;
	font-size: 9px;
	line-height: 14px;
	margin: 0; 
	}
#header { /* the header ID is a div where the KC-A logo appears and goes all the way across the top of the page */
	background: #1e1818;
	width: 100%;
	}
#menu { /* navigation menu, of course */
	position: absolute;
	width: 130px;
	left: 0;
	top: 56px;
	}
#menu a {
	width: 130px;
	height: 16px;
	display: block; /* this block thing puts each <a> element on its own line in the #menu div */
	}
	
/*	this next big section controls the appearance of the nave menu items.
	there is only one graphic for each menu item. each graphic contains three images
	for the default state (this section), the hover state (next section), and the
	hilite state (third section). the effect is achieved by clipping the graphic to show
	only one of the three possible images and shifting the image to the left to show
	the one we want. */
	
/* this set of declarations displays the default appearance of all the nav menu items.*/
a#home { height: 16px; background: transparent url(images/m_home.gif) 0 0 no-repeat; }
a#marketing { height: 16px; background: transparent url(images/m_marketing.gif) 0 0 no-repeat; }
	a#planning1 { height: 16px; background: transparent url(images/m_planning1.gif) 0 0 no-repeat; }
	a#leadgen { height: 16px; background: transparent url(images/m_leadgen.gif) 0 0 no-repeat; }
	a#salestools { height: 16px; background: transparent url(images/m_salestools.gif) 0 0 no-repeat; }
	a#internetmktg { height: 16px; background: transparent url(images/m_internetmktg.gif) 0 0 no-repeat; }
	a#eventmktg { height: 16px; background: transparent url(images/m_eventmktg.gif) 0 0 no-repeat; }
	a#advertising { height: 16px; background: transparent url(images/m_advertising.gif) 0 0 no-repeat; }
	a#branding { height: 16px; background: transparent url(images/m_branding.gif) 0 0 no-repeat; }
	a#custloyalty { height: 16px; background: transparent url(images/m_custloyalty.gif) 0 0 no-repeat; }
	a#co-mktg { height: 28px; background: transparent url(images/m_co-mktg.gif) 0 0 no-repeat; }
a#pubrel { height: 16px; background: transparent url(images/m_pubrel.gif) 0 0 no-repeat; }
	a#planning2 { height: 16px; background: transparent url(images/m_interactivepr.gif) 0 0 no-repeat; }
	a#mediarel { height: 16px; background: transparent url(images/m_mediarel.gif) 0 0 no-repeat; }
	a#analystrel { height: 16px; background: transparent url(images/m_analystrel.gif) 0 0 no-repeat; }
	a#investrel { height: 16px; background: transparent url(images/m_investrel.gif) 0 0 no-repeat; }
	a#intcomm { height: 28px; background: transparent url(images/m_intcomm.gif) 0 0 no-repeat; }
	a#commrel { height: 28px; background: transparent url(images/m_commrel.gif) 0 0 no-repeat; }
a#prodmktg { height: 16px; background: transparent url(images/m_prodmktg.gif) 0 0 no-repeat; }
a#prodlaunch { height: 16px; background: transparent url(images/m_prodlaunch.gif) 0 0 no-repeat; }
	a#planning3 { height: 16px; background: transparent url(images/m_planning3.gif) 0 0 no-repeat; }
	a#mktlaunch { height: 16px; background: transparent url(images/m_mktlaunch.gif) 0 0 no-repeat; }
	a#prodroll { height: 16px; background: transparent url(images/m_prodroll.gif) 0 0 no-repeat; }
a#bizdev { height: 28px; background: transparent url(images/m_busdevelopment.gif) 0 0 no-repeat; }
a#strategy { height: 28px; background: transparent url(images/m_msgdevelopment.gif) 0 0 no-repeat; }
a#mktgout { height: 28px; background: transparent url(images/m_mktgout.gif) 0 0 no-repeat; }
#expert { margin-top: 20px; height: 24px; background: transparent url(images/m_expert.gif) 0 0 no-repeat; }
a#vantagepoint { margin-top: 12px; height: 60px; background: transparent url(images/m_vantagepoint.gif) 0 0 no-repeat; }
a#news { margin-top: 12px; height: 16px; background: transparent url(images/m_news.gif) 0 0 no-repeat; }
a#about { height: 16px; background: transparent url(images/m_about.gif) 0 0 no-repeat; }
a#clients { height: 16px; background: transparent url(images/m_clients.gif) 0 0 no-repeat; }
a#portfolio { height: 16px; background: transparent url(images/m_portfolio.gif) 0 0 no-repeat; }
a#contact { height: 16px; background: transparent url(images/m_contact.gif) 0 0 no-repeat; }
a#login { height: 16px; background: transparent url(images/m_login.gif) 0 0 no-repeat; }
a#privacy { height: 16px; background: transparent url(images/m_privacy.gif) 0 0 no-repeat; }

/* this set of declarations displays the mouse-over appearance of all the nav menu items */
a:hover#home { height: 16px; background: transparent url(images/m_home.gif) -130px 0 no-repeat; }
a:hover#marketing { height: 16px; background: transparent url(images/m_marketing.gif) -130px 0 no-repeat; }
a:hover#planning1 { height: 16px; background: transparent url(images/m_planning1.gif) -130px 0 no-repeat; }
a:hover#leadgen { height: 16px; background: transparent url(images/m_leadgen.gif) -130px 0 no-repeat; }
a:hover#salestools { height: 16px; background: transparent url(images/m_salestools.gif) -130px 0 no-repeat; }
	a:hover#internetmktg { height: 16px; background: transparent url(images/m_internetmktg.gif) -130px 0 no-repeat }
a:hover#eventmktg { height: 16px; background: transparent url(images/m_eventmktg.gif) -130px 0 no-repeat; }
a:hover#advertising { height: 16px; background: transparent url(images/m_advertising.gif) -130px 0 no-repeat; }
	a:hover#branding { height: 16px; background: transparent url(images/m_branding.gif) -130px 0 no-repeat; }
a:hover#custloyalty { height: 16px; background: transparent url(images/m_custloyalty.gif) -130px 0 no-repeat; }
	a:hover#co-mktg { height: 28px; background: transparent url(images/m_co-mktg.gif) -130px 0 no-repeat; }
a:hover#pubrel { height: 16px; background: transparent url(images/m_pubrel.gif) -130px 0 no-repeat; }
a:hover#planning2 { height: 16px; background: transparent url(images/m_interactivepr.gif) -130px 0 no-repeat; }
a:hover#mediarel { height: 16px; background: transparent url(images/m_mediarel.gif) -130px 0 no-repeat; }
a:hover#analystrel { height: 16px; background: transparent url(images/m_analystrel.gif) -130px 0 no-repeat; }
a:hover#investrel { height: 16px; background: transparent url(images/m_investrel.gif) -130px 0 no-repeat; }
a:hover#intcomm { height: 28px; background: transparent url(images/m_intcomm.gif) -130px 0 no-repeat; }
a:hover#commrel { height: 28px; background: transparent url(images/m_commrel.gif) -130px 0 no-repeat; }
a:hover#prodmktg { height: 16px; background: transparent url(images/m_prodmktg.gif) -130px 0 no-repeat; }
a:hover#prodlaunch { height: 16px; background: transparent url(images/m_prodlaunch.gif) -130px 0 no-repeat; }
a:hover#planning3 { height: 16px; background: transparent url(images/m_planning3.gif) -130px 0 no-repeat; }
a:hover#mktlaunch { height: 16px; background: transparent url(images/m_mktlaunch.gif) -130px 0 no-repeat; }
a:hover#prodroll { height: 16px; background: transparent url(images/m_prodroll.gif) -130px 0 no-repeat; }
a:hover#bizdev { height: 28px; background: transparent url(images/m_busdevelopment.gif) -130px 0 no-repeat; }
a:hover#strategy { height: 28px; background: transparent url(images/m_msgdevelopment.gif) -130px 0 no-repeat; }
a:hover#mktgout { height: 28px; background: transparent url(images/m_mktgout.gif) -130px 0 no-repeat; }
a:hover#expert { height: 16px; background: transparent url(images/m_expert.gif) -130px 0 no-repeat; }
a:hover#vantagepoint { height: 60px; background: transparent url(images/m_vantagepoint.gif) -130px 0 no-repeat; }
a:hover#news { height: 16px; background: transparent url(images/m_news.gif) -130px 0 no-repeat; }
a:hover#about { height: 16px; background: transparent url(images/m_about.gif) -130px 0 no-repeat; }
a:hover#clients { height: 16px; background: transparent url(images/m_clients.gif) -130px 0 no-repeat; }
a:hover#portfolio { height: 16px; background: transparent url(images/m_portfolio.gif) -130px 0 no-repeat; }
a:hover#contact { height: 16px; background: transparent url(images/m_contact.gif) -130px 0 no-repeat; }
a:hover#login { height: 16px; background: transparent url(images/m_login.gif) -130px 0 no-repeat; }
a:hover#privacy { height: 16px; background: transparent url(images/m_privacy.gif) -130px 0 no-repeat; }

/* this set of declarations displays the 'you are here' appearance of all the nav menu items.
	these are used for whichever section or sections are current. it puts a small red square next to
	the menu item. */
a#homeOn { height: 16px; background: transparent url(images/m_home.gif) -260px 0 no-repeat; }
a#marketingOn { height: 16px; background: transparent url(images/m_marketing.gif) -260px 0 no-repeat; }
	a#planning1On { height: 16px; background: transparent url(images/m_planning1.gif) -260px 0 no-repeat; }
	a#leadgenOn { height: 16px; background: transparent url(images/m_leadgen.gif) -260px 0 no-repeat; }
	a#salestoolsOn { height: 16px; background: transparent url(images/m_salestools.gif) -260px 0 no-repeat; }
	a#internetmktgOn { height: 16px; background: transparent url(images/m_internetmktg.gif) -260px 0 no-repeat }
	a#eventmktgOn { height: 16px; background: transparent url(images/m_eventmktg.gif) -260px 0 no-repeat; }
	a#advertisingOn { height: 16px; background: transparent url(images/m_advertising.gif) -260px 0 no-repeat; }
	a#brandingOn { height: 16px; background: transparent url(images/m_branding.gif) -260px 0 no-repeat; }
	a#prodmktgOn { height: 16px; background: transparent url(images/m_prodmktg.gif) -260px 0 no-repeat; }
	a#custloyaltyOn {height: 16px; background: transparent url(images/m_custloyalty.gif) -260px 0 no-repeat; }
	a#co-mktgOn { height: 28px; background: transparent url(images/m_co-mktg.gif) -260px 0 no-repeat; }
a#pubrelOn { height: 16px; background: transparent url(images/m_pubrel.gif) -260px 0 no-repeat; }
	a#planning2On { height: 16px; background: transparent url(images/m_interactivepr.gif) -260px 0 no-repeat; }
	a#mediarelOn { height: 16px; background: transparent url(images/m_mediarel.gif) -260px 0 no-repeat; }
	a#analystrelOn { height: 16px; background: transparent url(images/m_analystrel.gif) -260px 0 no-repeat; }
	a#investrelOn { height: 16px; background: transparent url(images/m_investrel.gif) -260px 0 no-repeat; }
	a#intcommOn { height: 28px; background: transparent url(images/m_intcomm.gif) -260px 0 no-repeat; }
	a#commrelOn { height: 28px; background: transparent url(images/m_commrel.gif) -260px 0 no-repeat; }
a#prodmktgOn { height: 16px; background: transparent url(images/m_prodmktg.gif) -260px 0 no-repeat; }
a#prodlaunchOn { height: 16px; background: transparent url(images/m_prodlaunch.gif) -260px 0 no-repeat; }
	a#planning3On { height: 16px; background: transparent url(images/m_planning3.gif) -260px 0 no-repeat; }
	a#mktlaunchOn { height: 16px; background: transparent url(images/m_mktlaunch.gif) -260px 0 no-repeat; }
	a#prodrollOn { height: 16px; background: transparent url(images/m_prodroll.gif) -260px 0 no-repeat; }
a#bizdevOn { height: 28px; background: transparent url(images/m_busdevelopment.gif) -260px 0 no-repeat; }
a#strategyOn { height: 28px; background: transparent url(images/m_msgdevelopment.gif) -260px 0 no-repeat; }
a#mktgoutOn { height: 28px; background: transparent url(images/m_mktgout.gif) -260px 0 no-repeat; }
a#expertOn { margin-top: 20px; background: transparent url(images/m_expert.gif) -260px 0 no-repeat; }
a#vantagepointOn { margin-top: 12px; height: 60px; background: transparent url(images/m_vantagepoint.gif) -260px 0 no-repeat; }
a#newsOn { margin-top: 12px; height: 16px; background: transparent url(images/m_news.gif) -260px 0 no-repeat; }
a#aboutOn { height: 16px; background: transparent url(images/m_about.gif) -260px 0 no-repeat; }
a#clientsOn { height: 16px; background: transparent url(images/m_clients.gif) -260px 0 no-repeat; }
a#portfolioOn { height: 16px; background: transparent url(images/m_portfolio.gif) -260px 0 no-repeat; }
a#contactOn { height: 16px; background: transparent url(images/m_contact.gif) -260px 0 no-repeat; }
a#loginOn { height: 16px; background: transparent url(images/m_login.gif) -260px 0 no-repeat; }
a#privacyOn { height: 16px; background: transparent url(images/m_privacy.gif) -260px 0 no-repeat; }

/* i think i dropped this id. I've commented it out instead of deleting it just in case...
#copy {
	margin-top: 24px;
	} */

#textwell { /* this is the div just to the right of the nav menu where the main text appears */
	background: #fff;
	position: absolute; /*new*/
	left: 130px; /*new*/
	top: 48px; /*new*/
	padding: 0 27px 0 12px;
	/* margin: 0 0 0 130px; old */
	border-style: solid;
	border-width: 0 0 0 1px;
	border-color: #ccc;
	width: 340px; /* width for ie5 windows */
         voice-family: "\"}\"";
         voice-family: inherit;
	width: 300px; /* actual width */
	}
	
#textwell_rght { /* this is the div just to the right of the nav menu where the main text appears */
	background: #fff;
	position: absolute; /*new*/
	left: 130px; /*new*/
	top: 48px; /*new*/
	padding: 0 27px 0 12px;
	/* margin: 0 0 0 130px; old */
	border-style: solid;
	border-width: 0 0 0 1px;
	border-color: #ccc;
	width: 700px; /* width for ie5 windows */
         voice-family: "\"}\"";
         voice-family: inherit;
	width: 700px; /* actual width */
	}
	
#textwell_news { /* this is the div just to the right of the nav menu where the main text appears */
	background: #fff;
	position: absolute; /*new*/
	left: 130px; /*new*/
	top: 48px; /*new*/
	padding: 0 27px 0 12px;
	/* margin: 0 0 0 130px; old */
	border-style: solid;
	border-width: 0 0 0 1px;
	border-color: #ccc;
	width: 600px; /* width for ie5 windows */
         voice-family: "\"}\"";
         voice-family: inherit;
	width: 600px; /* actual width */
	}
	
#art { /*this is the div to the right of the textwell which usually contains graphics, but sometimes text */
	position: absolute;
	overflow: hidden;
	width: 350px;
	height: 530px;
	left: 470px;
	top: 48px;
	background: #fff;
	border-style: solid;
	border-width: 0 1px 0 1px;
	border-color: #ccc;
	}

#art p {
	margin-top: 14px;
	color: #fff;
	}

#art ul {
	color: #fff;
	}

#box1, #box2, #box3, #box4, #box5, #box6, #box7, #box8, #box_strat
	{ 
	/* these two ids are for optional pop-up boxes. if you need more than two on a page,
		just add more (i.e., #box3, etc.) 
		see the code on individual pages to see how they are used. */
	position: absolute;
	top: 58px;
	left: 140px;
	width: 390px;
	background: #fff;
	padding: 0;
	margin: 0;
	border-style: solid;
	border-width: 1px ;
	border-color: #666;
	background: #ecebeb;
	visibility: hidden;
	}
	
#box2 { /* this adjusts the position of #box2. i've added this sort of thing on individual pages as needed, too */
	top: 100px;
	}
.alt { /* this class causes things to disappear. it's used mainly on the h1 tags which are replaced by graphics.
			by doing it this way, the h1 text gets picked up by search engines. */
	display: none;
	}
h1 { /* this is the code that causes the graphic image to be used for h1 elements. 
			this default one is only good for the marketing page. in all other pages, 
			this is overridden to display the correct image. also, the dimensions 
			are adjusted if necessary. */
	padding: 0 0 0 0;
	margin: 0;
	background: url(images/h_marketing.gif) no-repeat 0 12px;
	height: 120px;
	width: 100px;
	float: left;
	}
h2 { /* these are used mainly in the pop-up boxes */
	font-family: Verdana;
	font-size: 10px;
	line-height: 14px;
	font-weight: bold;
	color: #000;
	margin: 10px 0 0 0;
	padding: 9px 0 0 18px;
	}
p { /* this is the default paragraph text style */
	font-family: Verdana;
	font-size: 9px;
	text-align: left;
	line-height: 14px;
	margin: 0;
	padding: 9px 0 0 18px;
	color: #000;
	}
	
p.small { /* this is the default paragraph text style */
	font-family: Verdana;
	font-size: 8px;
	text-align: left;
	line-height: 12px;
	margin: 0;
	padding: 9px 0 0 18px;
	color: #000;
	}
	
ul {
	margin-right: 18px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 9px;
	}
li {
	margin-right: 18px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 9px;

	}
	
p.td { /* this is for td elements */
	font-family: Verdana;
	font-size: 9px;
	text-align: left;
	line-height: 14px;
	margin: 0;
	padding: 9px 0 0 18px;
	color: #000;
	}
	
#box1 p, #box2 p , #box3 p, #box4 p, #box5 p, #box6 p, #box7 p, #box8 p, #box_strat p
	{ /* this overrides the default p style for pop-up boxes */
	font-family: Verdana;
	font-size: 9px;
	text-align: left;
	line-height: 14px;
	margin: 9px 18px;
	padding: 0 0 0 0;
	color: #000;
	}
#box1 p.last, #box2 p.last, #box3 p.last, #box4 p.last, #box5 p.last, 
#box6 p.last, #box7 p.last, #box8 p.last, #box_strat p.last
	{ /* this class should be applied to the last paragraph in a pop-up box */
	margin-bottom: 18px;
	}
p.first { /* this class should be applied to the first paragraph in the textwell div, etc. */
	text-indent: 0px;
	padding-top: 24px;
	}
p.last { /* this class should be applied to the last paragraph in the textwell div */
	padding-bottom: 70px;
	}

/* the following declarations controld the appearance of links in the textwell and art divs */
#textwell a:link, #box1 a:link, #box2 a:link,  #box3 a:link, #box4 a:link, 
#box5 a:link, #box6 a:link,  #box7 a:link, box8 a:link, #box_strat a:link, 
#textwell a:visited, #box1 a:visited, #box2 a:visited,  #box3 a:visited, 
#box4 a:visited,  #box5 a:visited, #box6 a:visited,  #box7 a:visited, #box8 a:visited, 
#box_strat a:visited
{
	color: #c00;
	font-family: Verdana;
	text-decoration: none;
	font-weight: bold;
	}
#textwell a:hover, #box1 a:hover, #box2 a:hover, #box3 a:hover, #box4 a:hover, 
#box5 a:hover, #box6 a:hover, #box7 a:hover, #box8 a:hover, #box_strat a:hover
{
	border-bottom: solid #c00 1px;
	}
#textwell a:active, #box1 a:active, #box2 a:active, #box3 a:active, #box4 a:active, 
#box5 a:active, #box6 a:active, #box7 a:active, #box8 a:active, #box_strat a:active
{
	color: #c00;
	font-family: Verdana;
	text-decoration: none;
	}

#art a:link, #art a:visited  {
	color: #fff;
	font-family: Verdana;
	text-decoration: none;
	font-weight: bold;
	}
#art a:hover {
	border-bottom: solid #fff 1px;
	}
#art a:active {
	color: #fff;
	font-family: Verdana;
	text-decoration: none;
	}