/*
	Change Log
		-Add a bit at the top to prevent DNN styles from cascading into the skin
		-Changed path for images because the CSS needs to be in a specific spot for DNN and the images in a folder under that spot
		-Changed localization so that I can keep an index of images that need to be localized in a single spot (at the top)
		-Added a style for ".content table th a" since column headers are links instead of spans
		-Added a padding-right: 22px to that ".content table th a/span" so that the text doesn't overlap the up/down arrow in the header when there is excess content and it gets cramped
		-Added whitespace:nowrap to default table cells, and whitespace:normal to subject, so that dates and status text doesn't wrap but the subject can
		-Added a quick bit that identifies the elements in the approval wizard

	Outstanding issues
		- Column header links are not not styling correctly in IE
		- The subject column, with the background image isn't styling correctly in IE
		- 
*/


/* 	Override DNN styles */

.Normal { font-size: inherit; font-family: inherit; font-size: inherit; font-weight: inherit; }

/* Localization */

.en h1.mainlogo { background:url(images/localized/en/hieclogo.gif) no-repeat 13px 13px; }
.fr h1.mainlogo { background:url(images/localized/fr/hieclogo.gif) no-repeat 13px 13px; }

/* CSS for dashboard */

/* Base style removal, global fixes and browser/platform fixes */
:link, :visited {
	text-decoration:none
}
ul {
	list-style:none
}
h1, h2, h3, h4, h5, h6, pre, code {
	font-size:1em;
	font-weight:normal;
}
ul, li, h1, h2, h3, h4, h5, h6, pre, form, body, html, p, blockquote, fieldset, dl, dt, dd, input {
	margin:0;
	padding:0
}
a img, :link img, :visited img {
	border:none
}
address {
	font-style:normal
}
a, a:link, a:visited, a:hover, a:active {
	outline:0;
}
/*    End of pre-wipe  */

body {
	behavior:url("css/csshover.htc");
}
html, body {
	height: 100%;
	font:12px/20px 'Trebuchet MS', Arial, Helvetica, sans-serif;
}
.wrapper {
	width:956px;
	padding:0 5px;
	margin:0 auto;
	background:url(images/bg-wrapper.gif) repeat-y;
}
/* HEADER BAR */
.header {
	position:relative;
	width:956px;
	margin:0 auto;
	height:62px;	
	background-color:#fff;
}
h1.mainlogo {
	width:261px;
	height:47px;
	outline:none;
	text-indent:-23432px;
	padding:13px 0 0 13px;
}
.hello {
	position:absolute;
	top:9px;
	right:70px;
	height:49px;
	width:550px;
}
.hello .logo {
	float:right;
	width:94px;
	height:49px;
}
.hello .info {
	float:right;
	height:49px;
}
.hello .logo h2 {
	width:94px;
	height:49px;
	background:url(images/bg-header-hello.png) no-repeat;
}
.hello h2 b {
	padding:14px 0 0 3px;
	display:block;
	color:#fff;
	font-size:26px;
	text-align:center;
	width:85px;
	font-weight:normal;
}
.hello p {
	margin:16px 0 0 5px;
	font-size:14px;
	line-height:14px;
	color:#666;
}
.hello p span {
	font-size:12px;
}
.header .logout {
	position:absolute;
	top:23px;
	right:0;
}
.header .logout a {
	display:block;
	width:62px;
	height:22px;
	background:url(images/bg-button-red.gif);
}
.header .logout a:hover {
	background:url(images/bg-button-red.gif) 0 22px;
}
.header .logout span {
	display:block;
	width:62px;
	color:#fff;
	font-size:14px;
	text-align:center;
}
/* LOCATION BAR */

.location {
	position:relative;
	height:60px;
	background:url(images/bg-location.gif);
}
.locationtext {
	padding:12px 0 0 20px;
	width:920px;
	height:40px;
}
.location h1 {
	font-size:18px;
}
.location h2 {
	font-size:12px;
}
.location .locationsearch {
	position:absolute;
	top:15px;
	right:10px;
	
}

.locationsearch  .searchbox {
	position:relative;
	top:2px;
	float:left;
	display:block;
	width:125px;
	height:12px;
	padding:4px;
	font-size:11px;
	line-height:11px;
	border:1px solid #ccc;
}
.locationsearch .dropdownbox {
	position:relative;
	top:2px;
	float:left;
	display:block;
	height:20px;
	padding:3px 0 0 0;
	margin:0 4px;
	font-size:11px;
	line-height:11px;
	background-color:#fefefe;
	border:1px solid #ccc;
}
.locationsearch  .submitbox {
	float:left;
	display:block;
	width:62px;
	height:23px;
	background:url(images/bg-button-red.gif) 0 1px;
	border:0;
	padding:0;
	margin:0;
	color:#fff;
}
.locationsearch  .submitbox:hover {
	background:url(images/bg-button-red.gif) 0 -21px;
	cursor:pointer;
}
/* NAV BAR */


.nav {
	height:29px;
	padding-left:10px;
	background:url(images/bg-nav.gif);
}
.nav ul li {
	height:29px;
	float:left;
}
.nav ul li.navTab a {
	display:block;
	font:14px/14px "Trebuchet MS", Arial, Helvetica, sans-serif;
	text-align:center;
	text-transform:uppercase;
	color:#fff;
	text-decoration:none;
	margin:1px 0 0 0;
}
.nav ul li.navTab a:hover,
.nav ul li.navTab a.selected {
	background:url(images/roundcornerleft.png) no-repeat top left #b2d234;
	color:#fff;
}
.nav ul li.navTab a span {
	display:block;
	padding:6px 10px 7px 10px;
	margin:0;
}
.nav ul li.navTab a:hover span,
.nav ul li.navTab a.selected span {
	background:url(images/roundcornerright.png) no-repeat top right;
}
.nav ul li.navTabLogin a span {
	display:block;
	padding:6px 10px 8px 10px;
}
.navTabLogin a {
	font-size:14px;
	line-height:14px;
	text-align:center;
	text-transform:uppercase;
	color:#fff;
	text-decoration:none;
	padding-top:1px;
	margin:0 0 0 5px;
	display:block;
	background:url(images/nav/nav-home-login.gif) 0 -29px ;
}
.navTabLogin a:hover	 {
	overflow:hidden;
	background:url(images/nav/nav-home-login.gif);
}

/* FILTER */
.filterArea,
.viewBy, .viewByOrg, .viewByContact
{
	position:relative;
	height:29px;
}
.filterArea { width:80px; top:-25px; margin: 0px 0px 0px 90px; }
.viewBy { width:80px; top:-52px; margin: 0px 0px 0px 160px; text-align:right; }
.viewByOrg { width:80px; top:-83px; margin: 0px 0px 0px 250px; }
.viewByContact { width:80px; top:-112px; margin: 0px 0px 0px 340px; }

.filterAreaJump,
.viewByJump, .viewByOrgJump, .viewByContactJump
{
	position:relative;
	height:29px;  
}
.filterAreaJump { width:80px; top:-54px; margin: 0px 0px 0px 90px; }
.viewByJump { width:80px; top:-81px; margin: 0px 0px 0px 160px; text-align:right; }
.viewByOrgJump { width:80px; top:-112px; margin: 0px 0px 0px 250px; }
.viewByContactJump { width:80px; top:-141px; margin: 0px 0px 0px 340px; }
.jumpArea { position:relative; height:0px; width:500px; top:-141px; margin: 0px 0px 0px 20px; z-index:10; }

.shareArea
{
	position:relative;	
	height:29px; width:80px; top:-25px; 
}

.filterArea a, .filterAreaJump a, .shareArea a,
.selectedBtn a,
.notSelectedBtn a 
{
	display:block;
	float:left;
	height:22px;
	text-align:center;
	color:#fff;	
	cursor:pointer;
	margin-right: 10px;
}
.filterArea a, .filterAreaJump a, .shareArea a { background:url(images/bg-button-taskbar.png) 0 0; width:64px; }
.selectedBtn a { background:url(images/button-red.png) 0 0; width:80px; }
.notSelectedBtn a { background:url(images/button-blue.png) 0 0; width:80px; }
.jumpArea a { color:#37939b; text-decoration:none; }
.jumpArea a.selected { background-color:#37939b; color:White; text-decoration:none; padding:0px 2px 0px 2px; }
		
.filterArea a:hover, .filterAreaJump a:hover, .shareArea a:hover,
.notSelectedBtn a:hover 
{
	background:url(images/button-blue.png) 0 22px;
	cursor:pointer;
}
.selectedBtn a:hover 
{
	background:url(images/button-red.png) 0 22px;
	cursor:pointer;
}

.jumpArea a:hover { color:white; text-decoration:none; }
.jumpArea a.selected:hover { background-color:#37939b; color:White; text-decoration:none; padding:0px 2px 0px 2px; }

.filterContentArea
{
	margin-left:30px;
	width: 700px;
}
.filterContentArea .dll
{
	width:100%;
}
.filterContentAreaSmall
{
	margin-left:30px;
	width: 300px;
}
.filterContentAreaSmall input { margin-right: 5px; }

.shareContentArea
{
	margin-left:30px;
	width: 740px;
}
.shareContentArea input { margin-right: 5px; }

/* TASKBAR */

.taskbar {
	position:relative;
	height:29px;
	background-color:#cee091;
	clear:both;
}
.taskbarbuttons li {
	float:left;		
	height:22px;
	margin:4px 5px 0 5px;
}
	
.taskbarbuttons .opportunitylist
{
	margin-left: 20px;
}
	
	.taskbarbuttons .opportunitylistWithFilterButton
	{
		margin-left: 60px;
	}
	
	.taskbarbuttons .button a {
		display:block; 
		height:22px;
		width:64px;
		text-align:center;
		color:#fff;
		background:url(images/bg-button-taskbar.png) 0 0;
	}
	.taskbarbuttons .button a:hover {
		background:url(images/bg-button-taskbar.png) 0 22px;
	}
	.taskbarbuttons .deleteButton a {
		display:block; 
		height:22px;
		width:62px;
		text-align:center;
		color:#fff;
		margin-left:30px;
		background:url(images/bg-button-red.gif) 0 0;
	}
	.taskbarbuttons .deleteButton a:hover {
		background:url(images/bg-button-red.gif) 0 22px;
	}
	.taskbarbuttons {
		margin-left:15px;
	}
	.taskbar .pagination {
		position:absolute;
		top:5px;
		right:0;
		text-align:center;
	}
	.taskbar .pagination ul,
	.taskbar .pagination li 
	{
		float:left;		
	}
	.taskbar .pagination .rowCounter {
		float:left;
		padding-right:10px;
	}
	.taskbar .pagenumber a {
		display:block;
		width:18px;
		height:15px;
		color:#37939b;
		padding-bottom:3px;
	}
	.taskbar .pagenumber a:hover {
		color:#fff;
	}
	.taskbar .active a {
		color:#fff;
		background-color:#37939b;
	}
	.taskbar .active a:hover {
		background-color:#40a9b2;
	}
	
	.taskbar .rightaligncheckbox {
		display:block; 
		height:22px;
		width:300px;
		float:right;
	}
	.taskbar .rightaligncheckbox input { margin-right: 10px; }
	
	.taskbar .leftaligncheckbox {
		display:block; 
		height:22px;
		width:300px;
		float:left;
	}
	.taskbar .leftaligncheckbox input { margin-right: 10px; margin-left: 5px; }
	
	.pagination .right a, .pagination .left a {
		display:block;
		width:15px;
		height:15px;
		text-indent:-9999px;
	}
	.pagination .right a{
		background:url(images/bg-nav-arrow-right.gif) no-repeat 8px 5px;
		margin-right:10px;
	}
	.pagination .right a:hover {
		background:url(images/bg-nav-arrow-right.gif) no-repeat 8px -21px;
	}
	.pagination .left a {
		background:url(images/bg-nav-arrow-left.gif) no-repeat 0 5px;
	}
	.pagination .left a:hover {
		background:url(images/bg-nav-arrow-left.gif) no-repeat 0 -21px;
	}
/* RESULTS */
.results {
	background-color:#fff;
	color:#333;
}
.results .resultstable {
	width:100%;
	}
.results table {
	}
.results table th {
	background:url(images/bg-th.gif);
	text-align:left;
	color:#333;
	padding:0 0 0 5px;
}
.results table th.active {
	background:url(images/bg-th-selected.gif);
	color:#fff;
	}
/* cmc - table headers are anchors so adding that to these styles */	
.results table th span,
.results table th a {
	background:url(images/white-arrow-down.gif) no-repeat right 2px;
	display:block;
	text-transform:uppercase;
    color: inherit;
    padding-right: 22px;
}
.results table th.descending span,
.results table th.descending a {
	background:url(images/white-arrow-up.gif) no-repeat right 2px;
}
.results table th.ascending span,
.results table th.ascending a {
	background:url(images/white-arrow-down.gif) no-repeat right 2px;	
}

.resultstable .alt {
	background-color:#f3f8e0;
}
.resultstable td {
	padding: 0 7px 0 7px;
	white-space: nowrap;
}
.resultstable td.col4 { white-space: normal; }	
.resultstable .col1header {
	padding:0 0 0 20px;
}
.resultstable .col2header {
}
.resultstable .col3header {
	width:20px;
}
.resultstable .col4header {
}
.resultstable .col5header {
}
.resultstable .col6header {
}
.resultstable .col7header {
/*	padding:0 120px 0 0; */
}
.resultstable .rankHeader { width: 60px; }
.resultstable .rank { width: 60px; padding: 0px;}
.resultstable .rankBar { overflow: hidden; background-color: #ccc; font-size: 2pt; margin: 1px; }
.resultstable tr:hover { background-color:#e4eace; }
.resultstable td a { display: block; color: inherit; }
.resultstable tr:hover td a { color: Blue; }
.resultstable .col1 {
	padding:2px 0 2px 20px;
	font-style:italic;
}
.resultstable .col2 {
	color:#999;
	font-style:italic;
}
.resultstable .col3 {
	padding:2px 0 2px 5px;
}
.resultstable .col1.employer {
	color:#a3b762;
}
.resultstable .col1.teacher {
	color:#aa9c81;
}
.resultstable .col1.opportunity {
	color:#f7b346;
}
.resultstable .number
{
	text-align: right;
	padding-right: 10px;
}
/* FOOTER */
.footer {
	position:relative;
	width:966px;
	left:-5px;
	height:11px;
	margin-bottom:15px;
	background:url(images/bg-footer.gif);
	clear:both;
}
.footer p {
	position:absolute;
	top:10px;
	width:966px;
	text-align:center;
	font-size:10px;
	color:#666;
	background-color:#fff;
}
.footer p a {
	color:#666;
}
.footer p a:hover {
	text-decoration:underline;
}
/* SELECTED TOPIC */


.resultstable tr:hover .trbg {
	background-color:white;
}
.selectedtopic {
	position:relative;
	top:-26px;
	width:920px;
	margin:0 auto;
	font:12px/16px "trebuchet ms", arial, helvetica;
	border-top:1px solid #b2d234;
	border-left:1px solid #b2d234;
	border-right:1px solid #b2d234;
	border-bottom:10px solid #b2d234;
	margin:0 0 -24px -5px;
	background-color:White;
	
}
.selectedtopic .stselected {
	border-bottom:1px solid #e2eeb2;
	height:22px;
}
.selectedtopic .stcontent {
	padding:10px 30px 40px 30px;
}
.selectedtopic .stclose {
	position:absolute;
	right:10px;
	top:5px;
}
.selectedtopic .stclose a
{
	display:block;
	height:15px;
	background: url(images/close.gif) top right no-repeat;
	text-align: right;
	padding-right: 18px;
	color: #00929f;
	font-weight: bold;
}
.selectedtopic .stclose a:hover 
{
	color: Maroon;
	background:url(images/close.gif) right -20px no-repeat; 
}
.selectedtopic h1 {
	font-weight:bold;
}
.selectedtopic .stlocation {
	font-style:italic;
}
.selectedtopic .stfooter {
}
.selectedtopic .stbuttons a {
	text-align:center;
	display:block;
	width:62px;
	height:20px;
	padding-top:2px;
	color:#fff;
}
.selectedtopic .stbuttons a,
.resultstable tr:hover .selectedtopic .stbuttons a { color: white; }
.selectedtopic .stdetails a
{
	position:absolute;
	bottom:10px;
	right:150px;
	background:url(images/bg-button-teal.gif) 0 0px;
}
.selectedtopic .stdetails a:hover {
	background:url(images/bg-button-teal.gif) 0 -22px;
}
.selectedtopic .stapprove a {
	position:absolute;
	bottom:10px;
	right:10px;
	background:url(images/bg-button-green.gif) 0 0px;
}
.selectedtopic .stapprove a:hover {
	background:url(images/bg-button-green.gif) 0 -22px;
}
.selectedtopic .streject a {
	position:absolute;
	bottom:10px;
	right:80px;
	background:url(images/bg-button-red.gif) 0 0px;
}
.selectedtopic .streject a:hover {
	background:url(images/bg-button-red.gif) 0 -22px;
}
/*line wrap on descriptions*/
.stdescription {
	white-space:normal;
}

/* ANNOUNCEMENT DETAIL PAGE */

.announcement
{
	margin: 5px 10px 30px 10px;
	position: relative;
}
.announcement h1
{
	color: #366;
	margin: 5px 0 5px 0;
	font-size: x-large;
}
.announcement .postInfo
{
	border-bottom: 1px solid silver;
}
.announcement .postInfo span
{
	padding-right: 1.5em;
}
.announcement .postInfo span span
{
	font-weight: bold;
}
.announcement .buttonList
{
	border-top: 1px solid silver;
	text-align: right;
}
.announcement .buttonList a
{
	padding-right: 1em;
}
.announcement .announcementBody
{
	padding: 5px 0 5px 0;
	min-height: 120px;
}
.announcement .field
{
}
.announcement .field label
{
	display: block;
}
.announcement .field label
{
	display: inline-block;  /* allows it to be inline and have block things apply (width, position etc) */
	width: 100px;
	position: relative; top: -1px; /* being particular about faking baseline with textbox */
	text-align: right;	
}
.announcement .field input.tb
{
	width: 450px;
}
.announcement .announcementBody p
{
	margin-bottom: 0.5em;
}
.announcement .notification
{
	/* overlaps text editor. That's cool/intended.
	   There's no buttons on that side anyways and the message isn't supposed to be more than a sentence. */
	position: absolute;
	top: 0; right: 5px;
	width: 200px;
	border: 1px solid navy;
	background-color: #F0F0FF;
	padding: 5px;
}
.announcement .sendingOptions,
.announcement .dropDownSendingOptions
{
	width: 700px;
	padding: 5px 0 0 0;
	border: 1px solid transparent;
	position: absolute;
}
.announcement .moreOptions
{
	color: #00929f;
	padding: 6px;
	position: absolute; top: 0; right: 0;
}
.announcement .sendingOptions .extra
{
	/*	Hide the "extra" options when the parent class is .sendingOptions
		When the parent container is changed to .dropDownSendingOptions by JS they will become visible.
	*/
	display: none;
}
.announcement .dropDownSendingOptions
{
	border: 1px solid #5c663D;
	background-color: white;
}
.announcement .dropDownSendingOptions .borderBottom
{
	height: 20px;
	background-image: url(images/bg-location.gif);
	border-top: 1px solid #c9d731;
	margin-top: 5px;
}

.announcement .dropDownSendingOptions .toExtras
{
	margin-left: 120px;
}
.announcement .dropDownSendingOptions .dialogHeader
{
	color: White; background-color: #469ba1; border: 1px solid black; font-size: 16px; text-align: center;
	position: absolute; height: 24px; top: -26px; left: -1px; width: 100%;
	
	
}
.announcement .field.cb
{
	margin-left: 100px;
}
.announcement .editorContainer
{
	padding-top: 80px;
}

/* DETAILS PAGE */

.details
{
	background:url(images/details-wrapper.gif);
	min-height: 320px;
}
.detailswide
{
	background:url(images/details-wrapper-wide.gif);
}
.details table {
	padding:0;
	margin:0;
	border:0;
}
.detailsleft {
	position:relative;
	float:left;
	width:267px;
	background:url(images/details-left1.gif);
	z-index:10;
}
.detailsmiddle {
	float:left;
	width:340px;
	border-right:1px solid #999;
	line-height:18px;
}
.detailsright {
	float:left;
	width:348px;
	line-height:18px;
	height:1%;
}
.detailsrightwide
{
	float:left;
	width:688px;
	border-right:1px solid #999;
	line-height:18px;
}
.detailsright .opprow {
	padding:5px 3px 3px 12px;
	vertical-align:middle;
}
.detailsright .opprow img {
	padding:0 5px 0 0;
}
.detailsright .type {
	width:200px;
}
.detailsright .type a {
	text-decoration:underline;
	color:#00929f;
}
.details .alt {
	background-color:#f3f8e0;
}
.details table th {
	background:url(images/bg-th.gif);
	text-align:left;
	color:#333;
	padding:0 0 0 12px;
	text-transform:uppercase;
}
.taskbar .addnew {
	font-size:11px;
	width:300px;
	padding-left:20px;
	padding-top:4px;
}
.taskbar .addnew .field { display: inline; }
.taskbar .status {
	font-size:11px;
	position:absolute;
	right:10px;
	top:0;
}
.taskbar .status ul li {
	float:left;
	padding:5px;
}
.taskbar .status ul li img {
	float:left;
	padding:2px 3px 0 5px;
}
.taskbar .addnew input {
	font-size:11px;
	color:#fff;
	height:22px;
	width:62px;
	border:0;
	background:url(images/bg-button-red.gif) 0 0px;
}
.taskbar .addnew input:hover {
	background:url(images/bg-button-red.gif) 0 -22px;
}
.taskbar .addnew select {
	font-size:11px;
	border:1px solid #ccc;
	background-color: #fefefe;
}
.detailsmiddle .name a {
	color:#17929f;
	text-decoration:underline;
	padding-left:12px;
}
.detailsmiddle .city {
	font-style:italic;
	padding-left:12px;
}
.detailsmiddle .phone {
}
.detailsmiddle .email a {
	color:#17929f;
 text-decoration:underline;
}

/*
	The horizontal tabs on the left of the detail screen (organization, resources) Structure is something like this
	<div class="detailsnav">
		<ul class="organizations">		The tab that is active
			<li class="tabname">		Which tab it is
				<span><img/></span>		The image for when the tab is active
				<a><img/></a>			The image for when the tab is inactive and is also a link to make the tab active
			</li>
		</ul>
	</div>
*/
.detailsnav { position:absolute; width:37px; margin:0 0 0 -11px; z-index:20; }

.detailsnav ul li a,
.detailsnav ul li span { position:relative;  display: block;  width:36px;  height:177px;  overflow:hidden; }

.detailsnav ul li span,
.detailsnav ul li img,
.detailsnav ul li a,
.detailsnav ul  { line-height:0; font-size:0; display:block; }

/* Set the margin-top for images depending on which tab it is */
.detailsnav li.organizationdetails img { margin-top:0px; }
.detailsnav li.resources img { margin-top:-177px; }

/* set the margin-left depending on which tab is active. */
.detailsnav ul.organizations a img,
.detailsnav ul.organizations span img { margin-left: 0px; }
.detailsnav ul.resources a img,
.detailsnav ul.resources span img { margin-left: -36px; }





.leftwrapper {
	min-height: 311px;
	height: auto !important;
	height: 1%;
	/* bug fix for IE 6 */
}
.detailsleft .leftwrapper {
	position:relative;
	left:26px;
	width:241px;
	background:url(images/details-left.gif);
	color:#333333;
}
.leftwrapper .detailsleftheader {
	background:url(images/details-left-header.gif);
	padding: 0 10px 0 12px;
}
.leftwrapper .detailsleftheader h1 {
	width:219px;
/*
	cmc - Removing height because it messes up long org names that word wrap and seems to look fine without it.
	height:31px; 
*/ 
	background:url(images/details-left-h1.gif) repeat-y top right #e6f3f4;
	font:24px "trebuchet ms", arial, helvetica;
	padding: 14px 10px 0 0;
}
.leftwrapper .detailsleftheader h1 a
{
	color: inherit;
}
.leftwrapper .detailsleftheader p {
	padding:0 12px 0 0;
	font-size:12px;
}
.leftwrapper .detailsleftheader p.url a {
	color:#17929f;
	text-decoration:none;
}
.leftwrapper .detailsleftheader p.phone {
	font-size:16px;
}
.leftwrapper .detailsleftheader p.phone span {
	font-size:12px;
}
.leftwrapper .detailsleftheader p.employees {
	padding-left:24px;
}
.leftwrapper .detailsleftheader p.sector {
	padding-left:24px;
}
.leftwrapper .detailsleftheader p.info {
	padding-left:24px;
	background:url(images/checkmark1.gif) no-repeat 0 3px;
}
.leftwrapper .detailsleftheader hr {
	border:0;
	display:block;
	height:1px;
	background-color:#fff;
	padding:0;
	margin:10px 12px 0 0;
}
.leftwrapper .detailsleftcontent 
{
	background:transparent;
}
.leftwrapper .detailsleftcontent h2 {
	font:bold 14px "trebuchet ms", arial, helvetica;
	background:url(images/details-left-header.gif);
	text-transform:uppercase;
	padding:10px 0 5px 12px;
}
.leftwrapper .detailsleftcontent .alt {
	background:url(images/details-left-header.gif);
}
.leftwrapper .detailsleftcontent .city a {
	color:#00929f;
	text-decoration:underline;
	padding-left:36px;
}
.selected0 .stclose,
.selected1 .stclose,
.selected2 .stclose,
.selected3 .stclose {
	position:absolute;
	right:10px;
	top:5px;
}
.selected0 .stclose a,
.selected1 .stclose a,
.selected2 .stclose a,
.selected3 .stclose a {
	display:block;
	height:15px;
	text-align: right;
	padding-right: 18px;
	color: #00929f;
	font-weight: bold;
	background: url(images/close.gif) top right no-repeat;
}
.selected0 .stclose a:hover, 
.selected1 .stclose a:hover, 
.selected2 .stclose a:hover, 
.selected3 .stclose a:hover 
{
	color: Maroon;
	background:url(images/close.gif) right -20px no-repeat; 
}
.selected1 {
	position:relative;
	top:0px;
	width:220px;
	margin:0 auto;
	font:12px/16px "trebuchet ms", arial, helvetica;
	border-top:1px solid #00929f;
	border-left:1px solid #00929f;
	border-right:1px solid #00929f;
	border-bottom:10px solid #00929f;
	margin:5px auto;
	background-color:#fff;
}
.selected1 h1 {
	font-size:12px;
	font-weight:bold;
	border-bottom:1px solid #99d3d8;
	padding:5px 5px 5px 27px;
}
.selected1 p {
	font-size:12px;
	padding:2px 5px 0px 28px;
}
.selected2 {
	position:relative;
	top:0px;
	width:320px;
	margin:0 auto;
	font:12px/16px "trebuchet ms", arial, helvetica;
	border-top:1px solid #b2d234;
	border-left:1px solid #b2d234;
	border-right:1px solid #b2d234;
	border-bottom:10px solid #b2d234;
	margin:5px auto;
	background-color:#fff;
}
.selected2 h1 {
	background:url(images/details-middle-h1.gif) no-repeat 0 9px;
	padding-left:60px;
	font-size:16px;
	text-transform:capitalize;
	height:36px;
	padding-top:10px;
	border-bottom:1px solid #e2eeb2;
}
.selected2 h1 a { color: inherit; }
.selected2 table {
	margin-left:60px;
}
.selected2 .type {
	font-style: italic;
	text-transform: lowercase;
}
.selected2 .info {
	padding-left:15px;
}
.selected2 p {
	padding:5px 0 5px 63px;
}
.selected1 p.save {
	display:block;
	padding: 0 0 5px 175px;
	line-height:12px;
}
.selected2 p.save {
	display:block;
	padding:5px 0 5px 275px;
	line-height:12px;
}
.selected1 p.save a, .selected2 p.save a {
	padding-left:10px;
	color:#289aa6;
	text-decoration:underline;
	background:url(images/bg-save-arrow-right.gif) no-repeat 0 3px;
}
.selected1 p.save a:hover, .selected2 p.save a:hover {
	color:#36c4cf;
	text-decoration:underline;
	background:url(images/bg-save-arrow-right.gif) no-repeat 0 -19px;
}
.selected0, 
.selected3 {
	position:relative;
	top:0px;
	margin:0 auto;
	font:12px/16px "trebuchet ms", arial, helvetica;
	border-top:1px solid #b2d234;
	border-left:1px solid #b2d234;
	border-right:1px solid #b2d234;
	border-bottom:10px solid #b2d234;
	margin:5px auto;
	background-color:#fff;
}
.selected0 {
	width:98%;
}
.selected3 {
	width:330px;
}
.selected0 .ecoopselected, 
.selected3 .ecoopselected {
	padding:2px 0 0 2px;
}
.selected0 .escoopselectedcell, 
.selected3 .escoopselectedcell {
	width:80px;
}
.selected0 .selectedtypecell, 
.selected3 .selectedtypecell {
}
.selected0 .escoopselectedcell p, 
.selected3 .escoopselectedcell p {
}
.selected0 .escoopselectedcell img, 
.selected3 .escoopselectedcell img {
	padding:3px 5px 5px 3px;
}
.selected0 .selectedtypecell p.type, 
.selected3 .selectedtypecell p.type {
	font-weight:bold;
	padding:0;
	margin:0;
}
.selected0 .content, 
.selected3 .content {
	border-top:1px solid #e2eeb2;
}
.selected0 p, 
.selected3 p {
	padding:2px 0 0 20px;
}
.selected0 p .hightlight, 
.selected3 p .hightlight{
	font-weight:bold;
	color:Green;
}
.selected0 p .stress, 
.selected3 p .stress{
	font-weight:bold;
}
.selected0 .content .contact, 
.selected3 .content .contact {
	font-style:italic;
}
.clearboth {
	clear:both;
	padding:0;
	margin:0;
	height:0;
	line-height:0;
	font-size:0;
}

/*
	Opportunity Status within the Opportunity Detail control 
*/
.opportunityStatus
{
	margin: 7px;
	padding: 7px;
}
.opportunityStatus .buttons
{
	display: block;
	text-align: right;
}
.opportunityStatus .buttons li
{
	display: inline;
}


.oppAvailability table { width: 100%; margin-left: 7px; }
.oppAvailability table td.oppdate { text-align: left; }
.oppAvailability table .field { text-align: left; margin: 5px; }
.oppAvailability table .field label { text-align: left; text-transform: inherit; display: block; }
.oppAvailability table .field .dtp { width: 110px; }

/* fix an issue where the calendar control appears behind other controls */
.oppAvailability .field.todate { z-index: 1000; }
.oppAvailability .field.fromdate { z-index: 1000; }


/* Approval Wizard */

/*
	Note: I'm just identifying some of the elements that are there
	- this isn't supposed to look good at this point.
	The html markup can be adjusted as necessary
*/

.clearFloat, .clearfloat, clearBoth { clear: both; }

.brief { width: 225px; border: 1px solid black; padding: 10px; float: left; }
.brief h2 { font-size: large; padding-top: 1.0em }
.brief h3 { font-size: medium; padding-top: 1.0em }

.wizardPage { margin-left: 250px; border: 1px solid black; padding: 10px;height:1% }
.wizardPage h2 { font-size: large; }
.wizardPage table.approvalTable { width: 100%; margin-bottom: 25px; }
.wizardPage table.approvalTable tr.alt { background-color: #fafafa; }
.wizardPage table.approvalTable td { padding-right: 15px; border-bottom: 1px solid silver; }
.wizardPage table.approvalTable td.rb { width: 1px; }
.wizardPage table.noborder td { border: 0; }
.wizardPage table.approvalTable .match { color: orange; font-weight: bold; }
.wizardPage table.approvalTable .rank { color: silver; }
.wizardPage table.approvalTable .isSchoolNotification { border: 1px solid Blue; background-color: LightBlue; margin: 0.5em 0 0.2em 0; padding: 0.2em; }
.wizardPage .approvalInstruction { margin-top: 15px; margin-bottom: 15px; }
.wizardPage .approvalInstruction p { margin-bottom: 5px; }

.wizardPage .field { width: 500px; text-align: right; margin-bottom: 5px; }
.wizardPage .field .wide { width: 300px; }
.wizardPage .field .medium { width: 200px; }
.wizardPage .field .small { width: 75px; }	/* note: this wide/medium/small comes from the previous designers. feel free to change it, or move the phone-extension into a different field */
.wizardPage .field .full { width: 100%; }
.wizardPage .field .readonlyValue { display: inline-block; width: 300px; }
.wizardPage .field.req /* I don't think you had specific styling for required fields, but the controls we have mark them. Feel free to style them or not. */
 { background: url(images/roundcornerleft.png) no-repeat right; padding-right: 10px; }
.wizardPage .field label { text-transform: uppercase; padding-right: 10px; }
.wizardPage .buttons { width: 500px; text-align: right; margin-bottom: 15px; }

/* note that the image on the left side of the buttons is a spinning wheel graphic that is
	shown dynamically if the ajax partial page update of the content area is taking too long. 
	I'm not sure if you want to replace that image or not but feel free.
*/




/* Details View */

.details .field,
.detailswide .field 
{ 
	position: relative; 
	vertical-align: middle; 
	padding-top: 5px; 
	margin: 0 15px 0 15px; 
}
.details .field label,
.detailswide .field label 
{ 
	display: block; 
}
.details .field .tb,
.detailswide .field .tb 
{ 
	display: block; 
	width: 100%; 
}
.details .field .ddl,
.detailswide .field .ddl 
{ 
	width: 100%; 
}
.details .field .cb,
.detailswide .field .cb 
{ 
	display: block; 
	width: 100%; 
}
.details .field .cb label,
.detailswide .field .cb label
{ 
	display: inline; 
	padding-left: 10px; 
}
.details .field .cb2,
.detailswide .field .cb2 
{ 
	padding-left: 5px; 
}
.details .field .cb2 label,
.detailswide .field .cb2 label 
{ 
	display: inline; 
	padding: 0 5px 0 5px; 
}
.details .field .cbw
{
	font-style:italic;
	color: Gray;
}

.details .deleteRow
{
	margin-top:10px;
}

.details .field .inlinelabel,
.detailswide .field .inlinelabel 
{ 
	display: inline; 
}
.details .buttonList,
.detailswide .buttonList
{ 
	text-align: right; 
	padding: 10px 20px 5px 5px; 
	line-height:12px; 
}
.buttonList p.orgButton
{
	padding-bottom:8px;
}
.orgViewMoreButton
{
	padding: 8pt 0pt 8pt 0pt;
	font-size:12px;	
}
.orgViewMoreButton .noteTable
{
	width:205px;
}
.orgViewMoreButton .notedatacolumn p
{
	padding-right:5px;
}
.orgViewMoreButton .notebuttoncolumn
{
	vertical-align:bottom;
}
.contactViewMoreButton
{
	padding: 8pt 0pt 8pt 15pt;
	font-size:12px;	
}
.oppViewMoreButton
{
	padding: 4pt 0pt 8pt 15pt;
	font-size:12px;	
	border-top: #e2eeb2 1px solid;
}
.filterButtonList
{ 
	margin-left:30px;
	text-align: left; 
	padding: 20px 20px 5px 5px; 
	line-height:12px; 
}

.details .buttonList a,
.detailswide .buttonList a, 
.filterButtonList a
{ 
	padding-left:10px; 
	margin-left: 10px; 
	color:#289aa6; 
	text-decoration:underline; 
	background:url(images/bg-save-arrow-right.gif) no-repeat 0 3px; 
}
.orgViewMoreButton a, .contactViewMoreButton a, .oppViewMoreButton a, .oppInlineViewMoreButton a
{ 
	color:#289aa6; 
	text-decoration:underline; 
}

.details .buttonList a:hover,
.detailswide .buttonList a:hover, 
.filterButtonList a:hover
{ 
	color:#36c4cf; 
	text-decoration:underline; 
	background:url(images/bg-save-arrow-right.gif) no-repeat 0 -19px; 
}
.orgViewMoreButton a:hover, .contactViewMoreButton a:hover, .oppViewMoreButton a:hover, .oppInlineViewMoreButton a:hover
{ 
	color:#36c4cf; 
	text-decoration:underline;
}
.details .inactive,
.detailswide .inactive 
{ 
	display: block; 
	border: 1px solid red; 
	background-color: #FCC; 
	width: 85%; 
	padding: 5px 10px 5px 10px; 
}
.details .orgIsEmployer,
.detailswide .orgIsEmployer
{ 
	display: block; 
	border: 1px solid #4d73b3; 
	background-color: #9dbbd5; 
	width: 85%; 
	padding: 5px 10px 5px 10px; 
	margin-bottom: 3px; 
}

.details .orgIsPrivate,
.detailswide .orgIsPrivate
{ 
	display: block; 
	border: 1px solid #4d73b3; 
	background-color: #ccccff; 
	width: 85%; 
	padding: 5px 10px 5px 10px; 
	margin-bottom: 3px;
	font-size:10px;
}

.orgIsPrivateName
{
	font-weight:bold;
}

.changePassword { margin: 5px; }
.changePassword table { margin: 0; background-color: #EFF; border: 1px solid #2AA; width: 100%; }
.changePassword table
{
	
}

.modalPopupBackground 
{
	background-color: Gray;
	filter: alpha(opacity=70);
	opacity: 0.7;
}

.modalPopupPanel, .smallModalPopupPanel, .filterModalPopupPanel
{
	padding: 0px 0 0 0;	
	background-color: White;
	border-bottom: 2px solid black;
	border-right: 2px solid black;
	border-left: 1px solid grey;
}
.modalPopupPanel { width: 800px;}
.smallModalPopupPanel {	width: 550px; }
.filterModalPopupPanel { width: 700px; }

.modalPopupPanel .dialogHeader,
.smallModalPopupPanel .dialogHeader,
.filterModalPopupPanel .dialogHeader
{
	color: White; 
	background-color: #469ba1; 
	border: 1px solid black;
	font-size: 16px; 
	text-align: center;
	position: relative;
	height: 24px; 
	top: -26px;
	left: 0px; 
	width: 100%;
}
.modalPopupPanel p, .smallModalPopupPanel p, .filterModalPopupPanel p
{
	padding: 0px 0px 2px 15px;
}
.modalPopupPanel input, .smallModalPopupPanel input, .filterModalPopupPanel p
{
	margin-right: 5px;
}
.modalPopupPanel .dialogSubheader,
.smallModalPopupPanel .dialogSubheader,
.filterModalPopupPanel .dialogSubheader
{
	font-weight: bold;
	padding-left: 10px;
	margin-bottom:10px;
}
.modalPopupPanel .borderBottom,
.smallModalPopupPanel .borderBottom,
.filterModalPopupPanel .borderBottom
{
	height: 22px;
	background-image: url(images/bg-location.gif);
	border-top: 1px solid #c9d731;
	margin-top: 5px;
}

.moreViewContentArea
{
	margin: 10px 0px 0px 0px; 
	padding-right: 10px;	
	height:280px; overflow:auto;
}
.detailsleftheader .moreViewContentArea p
{
	padding: 0px 0px 2px 15px;
}