/* Overrides and other template-specific CSS
-------------------------------------------------------------------*/
#container, #companies ul { overflow: visible; }

#content { position: relative; z-index: 2; }
#group-nav { position: relative; z-index: 1; }
#collaborators { position: relative; z-index: 3; }
#collaborators li { position: relative; z-index: 10; }

#collaborators .fn {
	font: bold 14px 'Lucida Grande', sans-serif;
	display: block;
}

#collaborators .mark-toggle {
    display: block;
}

#collaborators li:hover .mark {
	display: block;
}

/* Mark bubbles
-------------------------------------------------------------------*/
.mark-toggle {
	padding-left: 10px;
}

.mark { /* total mark background dimensions: 410x160 */
	z-index: 100;
	position: absolute;
	padding: 10px;
	width: 380px;
	height: 140px;
	font-style: italic;
	font-size: 12px;
	background: transparent url(/images/public/mark_br.gif) no-repeat left top;
}
	.mark.top-left { 
	  top: -130px; 
	  left: -410px; 
	  padding-right: 20px;
	  background-image: url(/images/public/mark_tl.gif); 
	}
	.mark.top-right {
	  top: -130px; 
	  left: 188px; 
	  padding-left: 20px;
	  background-image: url(/images/public/mark_tr.gif); 
	}
	.mark.bottom-left {
	  top: -10px; 
	  left: -410px; 
	  padding-right: 20px;
	  background-image: url(/images/public/mark_bl.gif); 
	}
	.mark.bottom-right { 
	  top: -10px; 
	  left: 188px; 
	  padding-left: 20px; 
	  background-image: url(/images/public/mark_br.gif); 
	}
	
	.mark .logo {
		float: left;
		clear: both;
		margin: 0;
		padding: 0;
	}
	
	.mark .fn {
		margin: 0;
		padding: 0 0 2px 0;
		font-size: 11px !important;
		text-align: right;
		float: right;
		width: 190px;
		clear: right;
	}
	
	.mark .adr {
		padding: 0 0 12px;
		margin: 0 0 4px 0;
		height: 30px;
		font-size: 11px;
		line-height: 12px;
		text-align: right;
		float: right;
		width: 190px;
		clear: right;
	}
		.mark .adr span { display: inline; }
		.mark .adr span.street-address { display: block; }
	
	.mark .tel {
		position: absolute;
		clear: left; /* IE6 issue - meaningless elsewhere */
		bottom: 10px;
		width: 190px;
		text-align: right;
	}
	.mark.top-right .tel, .mark.bottom-right .tel { right: 10px; }
	.mark.top-left .tel, .mark.bottom-left .tel { right: 20px; }
	
	.mark .role {
		padding: 5px;
		margin: 0;
		font-weight: normal;
		height: 32px;
		background-color: #f9f9f9;
		border-bottom: 1px dotted #a2a2a2;
		border-top: 1px dotted #a2a2a2;
		clear: both;
		width: 370px;
	}
	
	.mark .actions {
		position: absolute;
		clear: left; /* IE6 issue - meaningless elsewhere */
		bottom: 10px;
		color: #a2a2a2;
		font-style: normal;
	}
	.mark.top-right .actions, .mark.bottom-right .actions { left: 20px; }
	.mark.top-left .actions, .mark.bottom-left .actions { left: 10px; }

	.mark .actions a {
		display: inline;
		color: #0055ff;
		text-decoration: none;
	}
		.mark .actions a:hover {
			color: #25a8de;
		}