/*  vavoca.css
    Copyright (C) 2008, VaVoca Inc.

	This is our StyleSheet file for VaVoca!
	
	Our goal is to encode the style for all of our pages in a single
	compact and easy to read file.
	
	It is important to keep this file organized and well documented
	in order to make it easy to maintain.  Please help, by keeping
	the name-index and table of contents up to date!
	
	The name-index is an an alphabitized list of CSS class and id 
	names that already have a purpose.  This will ensure that each 
	id or class has a unique purpose and will prevent unexpected suprises 
	that could result by re-using the same or class name!
	
	After the index, we will try and organize the CSS in sections
	listed according to our Table of Contents.
*/

/*******************************************************************
   NAME INDEX
********************************************************************/
/*
#asopen
	The ID of the "Advanced Search" button.
#copyright 
	a P with our copyright notice.
#footer 
	the DIV that appears at the bottom of each page with a copyright notice
	and links.
#header 
	the TABLE at the top of each page with the logo and nav links.
#home
    the TABLE that lays out the home page with a simple search box.
#login 
	the section in the header that contains the login information or links
#main
	the DIV that wraps the main content of every page.
#nav 
	the TD in the header that contains the navigation links
#sresults
	the Table that holds the list of search results.
#subtitle 
	the SPAN next to our logo that says "find your bee"

.asbutton
	The "advanced search" button.  Currently, there is no special styling - but it is
	used by vavoca.js to find and enhance the button.
.auto_complete
	Divisions used by Autocompletion
.button
	a form submit button
.category
	In the Search Results, this is the text showing the job or talent category
.data
	a form input element or other a class a section in a form
.description
	In the Search results, this is the text that holds the job or talent description
.details
	In the Search Results, this is the column listing the job or talent details
.error
	The big yellow ERROR box that is drawn when there are problems with form submision
.facts
	In the Search Results, this is the column that shows the rate and distance
.info
	descriptive text associated with a form input element 
.label
	a label is a section of the page used to identify a form input element.
.name
	In the Search Results, this is the text showing the user name
.nonav 
	SPAN that is created in place of a hyperlink when the hyperlink
	would have linked to the same page that you are viewing.  These are
	found in the navigation section of the header and in the footer.
.pheader
	The TABLE that holds a posting header (with category to the right)
.profile
	The TABLE that holds public profile information.
.rating
	DIV elements that hold a star-rating widget or star-rating display.
	Search Results rating elements have special styling rules.
.review
	TR element that holds a public review of a candidate.
.selected
	List items in the Autocomplete widget that are selected.
.title
	In the Search Results, this text shows the talent or job title.
.vbutton
	A class to represent "Virtual Buttons".  That is elements that behave like buttons, but
	are meant to look like links.
.warning
	A div that holds the big yellow warning boxes.
*/


/*******************************************************************
   GLOBAL - settings that affect the overall look and feel.
********************************************************************/

/* We use Times for most of the text on our site. */
/* However, buttons and links are almost always Helvetica. */
/* However, all of the headers will be in Times and Cayenne color.*/
* { font-family: Helvetica, Arial, sans-serif; font-size: 13px; line-height: 1.15;}

* h1, h2, h3 { 
	font-weight: bold;
	color: #7D0509; /* cayenne */
}

a { color:blue; }
a:visited { color:blue; }
a img { border:none; text-decoration: none; }

#footer a, #header a { text-decoration:none; }
#footer a:hover, #header a:hover { text-decoration:underline;
	color:blue; }

* h2 { margin: .2em 0em; }
* h1 { font-size: 18pt; }
* h2 { font-size: 14pt; }
* h3 { font-size: 15px; }
* h3 a { font-size: 15px; }
h3 { margin: 0em 0em 0.5em 0em;}
h3 span a { font-size: 13px; font-weight: normal;}

/* The most compatible way to center a table is to wrap it in a div with text-align: center
  Internet Explorer 5.5 and lower does NOT understand auto margins, however it DOES incorrectly
  apply text-align "center" to block level descendants, including tables.
 */
div.center {
	text-align:center;
}
div.center table {
	margin-left: auto;
	margin-right: auto;
	text-align: left;
}
table.center {
	margin-left: auto;
	margin-right: auto;
}
td.center {
	text-align: center;
}

/* We use this "red" color quite often, so we have a "red" class
 that can be used with bold elements */
b.red { color:#7D0509; }
b.green { color: #00AA00; font-size:inherit; }
.big { font-size: 110%; line-height: 1.4;}
.big .big { font-size: 110%; font-weight:bold;}
.big * { font-size: 100%; line-height: 1.4; }

/* When you click on a navigation link in the header or footer, the link text
   remains on the page, but colored differently so the user knows where they 
   navigated to. */
.nonav {
	font-weight: bold;
	color: #7D0509;
}

/* We do not let the main content of our page get too wide.
	The main content should be centered.
	The text-align: left is set because IE does not center a div
	with margin set to "auto".  So instead, we set text-align for
	the whole body to "center", which causes IE to center the main
	div.
*/

html, body {
	margin: 0;
	padding: 0;
}
/* PAGE FRAME
   To implement our footer that sticks to the bottom, we do something similar to a 
   trick described at http://alistapart.com/articles/footers.  Although rather than
   relying on the parsing error, we use IE comments to set height=100% for IE versions 6
   and lower. */
html {
	height: 100%;
	background: black url("/images/background.png") repeat scroll top left;
}
body { 
	position: relative;
	height: 100%;
	}
#body {
	position: relative;
	min-height: 100%;
	height: auto;
	background: white;
	text-align:center;
}
#bottom {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 2em;
	background: black url("/images/background.png") repeat scroll top left;
	border-top: thin solid black;
	margin: 0;
	padding: 0;
}
/* END PAGE FRAME */


#footer {
	padding-bottom: 2em;
}
	
#main {
	margin:0 auto;
	padding: 0 1em;
	text-align: left;
	background-color:white;
}
.sidetd {
	width: 2em;
}
#maintd {
	width: 60em;
}
#mintd {
}

hr { margin: 7px 0; height: 1px; color: #808080; border-top: 1px solid #808080;}

/* This is my attempt to keep form layout approximately the same between
   different browsers - Safari seems to add a lot of extra padding and
   margin around text input fields */
input {
	padding: 1px;
}
input[type=text] {  
	margin: 0px;
}

/* For tables, all spacing is set to zero, unless explicitly set otherwise.
   This makes layout so much easier. */
table {
	border-collapse: collapse;  /* IE seems to have a minimum 1px border-spacing */
	border-spacing: 0;
	margin: 0;
	padding: 0;
}
td {
	vertical-align: top;
	padding: 0;
}
/* For many tables we want left and right aligned elements.  We do that with the
   "wide" and "right" classes */
table.wide {
	width: 100%;
}
td.wide { width: 100%;}
td.right {
	text-align: right;
}

form {
	margin: 0;
	padding: 0;
}

.faq td {
	padding: 0.2em 2em 0.2em 0em;
}

/* Our DT and DD elements are used as a FAQ */
dt {
	margin-top: 1em;
	color: #7D0509; /* cayenne */
	font-weight:bold;
	font-size: 17px;
}
dd {
	margin: 0.1em 0;
	max-width: 42em;
}
dd a { text-decoration:none; }
dd a:hover { text-decoration:underline;}

/* All of our user-input forms are in tables with a special look and feel 
   about them.  In particular, we want the labels to be bold, information
   text to be normal weight and a consistent amount of spacing. */

.form table {
	margin: 0em -0.5em;
}
.form td {
	padding: 0.3em 0.5em 0.3em 0.5em;
}

.form label {
	position: relative;
	top: 3px;
	font-weight: bold;
	white-space: nowrap;
}
.form label .info {
	font-weight: normal;
}
.form label.plain {
	top: 0px;
	font-weight: normal;
}

/* Sometimes we need to make a form just to hold ONE button.
   The reason we do this a technical one.  We need the button to generate a "POST" request
   to prevent browsers from pre-fetching the page or web crawlers from clicking on it */

form.button-to {
	display: inline;
	margin: 0;
	padding: 0;
}
form.button-to div {
	display: inline;
}

.photo {
	border: thin solid black;
}

/* The warning is a yellow box that appears on some pages */

div.warning {
	margin: 1em auto;
	padding: 1em;
	text-align: center;
	font-weight: bold;
	background-color: yellow;
	width: 50%;
	border: 2px solid #CCCC00;
	font-size: 12pt;
}

div.error {
	margin: 1em auto;
	padding: 1em;
	text-align: center;
	background-color: yellow;
	width: 70%;
	border: 2px solid #CCCC00;
}

.tips {
	font-size:11px;
}
			
			
/*Button styles*/

input[type=submit]{
	font-size: 10pt;
	font-weight: bold;
}


/************************
   Rounded Corners
*************************/

.rounded-body {
	border-style: solid;
	border-width: 0px 1px;
}
b.rounded-edge { display:block; font-size:0; line-height:0;}
b.rounded-edge b {
	display:block;
	height: 1px;
	overflow: hidden;
	border-style: solid;
	border-width: 0px 1px;
	}
b.rounded-edge b.r1 { margin: 0 5px; height:0px; border-top-width: 1px;}
b.rounded-edge b.r2 { margin: 0 3px; border-width: 0 2px; }
b.rounded-edge b.r3 { margin: 0 2px}
b.rounded-edge b.r4 { margin: 0 1px; height: 2px}


/**************************
   Rounded Corner Colors
***************************/

.rounded-gray  b.rounded-edge b {
	background: #f7f7f7;
	border-color: gray;
}
.rounded-gray .rounded-body {
	background: #F7f7f7;
	border-color: gray;
	padding: 0 1em;
}


.rounded-gray-h  b.rounded-edge b {
	background: #e6e6e6;
	border-color: gray;
}
.rounded-gray-h .rounded-body {
	background: #e6e6e6;
	border-color: gray;
	padding: 0 1em;
}


.rounded-burnt  b.rounded-edge b {
	background: #f8b230;
	border-color: #f8b230;
}
.rounded-burnt .rounded-body {
	background: #f8b230;
	border-color: #f8b230
;
	padding: 0 1em;
}

.rounded-dark b.rounded-edge b {
	background: #e6e6e6;
	border-color: black;
}
.rounded-dark .rounded-body {
	background: #e6e6e6;
	border-color: black;
}

.rounded-white >tbody >tr>td> b.rounded-edge > b {
	background: white;
	border-color: gray;
}
.rounded-white >tbody>tr>td>.rounded-body {
	background: white;
	border-color: gray;
	padding: 0 1em;
}

.rounded-yellow b.rounded-edge b {
	background: #f9dc91;
	border-color: gray;
}
.rounded-yellow .rounded-body {
	background: #f9dc91;
	border-color: gray;
}


.rounded-red >tbody>tr>td> b.rounded-edge > b {
	background: #d5d09e;
	border-color: #A77925;
}
.rounded-red >tbody>tr>td>.rounded-body {
	background: #d5d09e;
	border-color: #A77925;
}



/*******************************************************************
   HEADER - 
********************************************************************/


/* The "header" is the section at the top of each page with our logo and the
   navigation links. We make it the whole width of the page with no extra
   padding, margins, or border spacing. Howver, it is "underlined" with our
   royal jelly color. The "nowrap" part prevents our navigation links from
   breaking across lines when your window is set very narrow. */
#header {
	width: 100%;
	background: black url("/images/background.png") repeat scroll top left;
	border-bottom: thin solid black;
	color: white;
	text-align: left;
	margin-bottom: 1.5em;
}
#header td {
	padding-right: 0.5em;
	white-space: nowrap;
}
#header a {
	color: white;
}
#header a:hover {
	color: #fbc523;
}
#header .nonav {
	color: #fbc523;
}
#header img {
	display: inline;
	vertical-align: bottom;
	border: 0;  /* even though our logo is a link, we don't want a blue line 
				   around it! */
	
}
td#nav {
	color: #fbc523;
	vertical-align: bottom;
	text-align: right;
	padding-bottom: 6px;
	font-size:14px;
}
td#login {
	vertical-align: top;
	color: #fbc523;
	text-align: right;
	padding-top: 0.5em;
	padding-bottom: 1em;
	font-size:11pt;	
}
td#login form {
	display: inline;
}
td#login input {
	margin-right: 3px;
	font-size:90%;
}


/*******************************************************************
   FOOTER - 
********************************************************************/

div#footer {
	padding-top: 1em;
	text-align: center;
	white-space: nowrap;
	}
#pfooter a {
	font-size:9pt;
	max-width: 100%;
	color: black;
}
#copyright {
	font-size: 8pt;
	max-width: 100%;
}


/*******************************************************************
   HOME PAGE - 
********************************************************************/

table#home {
	margin: 0 auto;
	white-space: nowrap;
	text-align: center;
}
#home .splash {
	padding: 0;
}
#home #splash {
	position: relative;
	top: -0.4em;
	font-family: Times;
	font-weight: bold;
	font-size: 110%;
}
#home #splash img {
	position: relative;
	top: 0.4em;	
}
#home #splash hr {
	width: 30em;
	margin-left: auto;
	margin-right: auto;
}
#home #splash h1 {
	top: -0.4em;
	font-size: 130%;	
	font-family: Times;
}
#home #splash h1 b {
	position: relative;
	font-family: times;
	top: -4px;
	font-size: 150%;
}
#home #splash a {
	position: relative;
	top: 0.4em;
	font-weight: normal;
	font-size: 100%;
}
table#home td {
	vertical-align: baseline;
	padding: 0.4em 0.2em;
}
#home h1 {
	margin: 0;
}
#home .label {
	text-align: right;
	width: 50%;
}
#home label {
	font-size: 12pt;
}
#home a {
	color: blue;
	font-size: 120%;
}
.info {
	text-align: right;
	font-style: italic;
	font-size: 0.8em;
	white-space: nowrap;
}
#home .info a {
	font-size: 100%;
}
#home .info {
	width: 50%;
	text-align: left;
}
#home .button input {
	margin: 0em .5em;
}

#home #catsearch {
	margin:0 auto;
	padding: 0em 0em 1em 0em;
}
#home #catsearch thead * {
	text-decoration: underline;
	font-size: 105%;
}
#home #catsearch td {
	padding: 0em 1em;
}
#home #catsearch tbody td {
	color: gray;
}
#home #catsearch input {
	margin: 0;
	padding: 0;
	/* this code is IMPORTANT for IE.  See http://jehiah.cz/archive/button-width-in-ie */
	width: auto;
	overflow: visible;
	/******/
	background: none;
	border: none;
	outline: none;
	cursor: pointer;
	color: blue;
	text-decoration: underline;
	vertical-align: baseline;	
}


#searchbuttons input {
	border: none;
	width: 150px;
	height: 35px;
	background: url("/images/frontbutton.png");
}
#searchbuttons input:hover { background-position: 0px -35px; }
#searchbuttons input:active { background-position: 0px -70px; } 

#home .about ol {
	margin: 0;
	padding: 0;
	list-style-position:inside;
}
#home .about span {
	font-size: 100%;
	font-weight: bold;
}
#home .about ol li {
	font-size: 80%;
}
#home .about td {
	padding: 0;
}
#home .about td.crp {
	padding-right: 4px;
}

#sbar {
	width: 100%;
	white-space: nowrap;
}
#sbar * {
	font-family: Helvetica,Arial,sans-serif; 
	font-weight: bold;
	margin-top: 0.5em;
}
#sbar b {
	color: #7D0509; /* old red - works on white */
}
#sbar input { font-size: 8pt; }
#sbar #stype { text-align:left; width: 28%;}
#sbar #stype input { font-style: italic; font-size: 1em; }
#sbar #sort { text-align:center; width: 50%;}
#sbar #sdist { text-align:right; margin-top: 0.0em;}
#sbar #sdist * { margin-top: 0;}
#paging {
}
table.searchform {
	margin: 1em -0.5em 0em;
	white-space: nowrap;
}
table.searchform td {
	padding: 0em 0.5em;
}
div.resultcount, div.resultcount * {
	font-family: Helvetica,Arial,sans-serif;
}


/* ADVANCED SEARCH BOX

The spacing rules are very tricky.  Many of the spacing attributes just
set spacing to zero - probably because it is being increased somewhere
else.

*/

#advsearchdiv {
	margin: 0.5em 0 1em 0;
	border: 0;
	white-space: nowrap;
}
#advsearch {
	background-color: #f8b230;
	border: 1px solid #a36900;
	white-space: nowrap;
	border-collapse: collapse;
	margin: 0 auto; /* breathing space outside the whole table */
}
#ashead { background-color: black; }
#ashead td { padding: 1px 2px; vertical-align: middle;}
#astitle { color: #f8b230; display: inline; padding: 0; margin: 0;}
#asdesc { color: white;}
#asbody { overflow: hidden;}
table.ascolumns td { padding: 0.3em;}
table.ascolumns td td { padding: 0em;}
table.ascolumns .form td { height: 1.8em;}
#advsearch label { padding-right: 1em;}
#advsearch .rating_input { top: 3px; }

#advsearch table td.availability {
	/* this aligns the availability label with the other labels */
	padding: 5px 0px 2px 0px;
}
#advsearch .submit {
	text-align: right;
	padding: 6px 6px 2px 0px;
}

/* rating CSS - this style affects our rating input widget.
  This widget is made up of a star image that really consists of 3 images.
  We set the whole DIV to a height of 16 pixels - one star height and hide the
  overflow.   In this way, the color of the star can be set with its top attribute.
*/

div.rating_input {
	position: relative;
	overflow: hidden;
	height: 16px;
}
div.rating_input img {
	position: relative;
	top: -32px;
	margin: 0;
	padding: 0;
}
div.rating_input input {
	position: relative;
	height: 16px;
	top: -32px;
}

input.vbutton {
	margin: 0;
	padding: 0;
	background: none;
	border: none;
	outline: none;
	cursor: pointer;
	color: blue;
	text-decoration: underline;
	position: static;
	vertical-align: baseline;
}

/* For the Language Requirements multifield */
input.lang {
	background: transparent;
	border: none;
	margin-top: 2px;
	cursor: pointer;
	color: blue;
	text-decoration: underline;
	font-size:9pt;
}
select.lang {
	margin-bottom: 2px;
}

/*******************************************************************
	TAB COMPLETION
********************************************************************/

div.auto_complete {
	width: 350px;
	background: #fff;
	z-index: 10;
}
div.auto_complete ul {
	border:1px solid #888;
	margin:0;
	padding:0;
	width:100%;
	list-style-type:none;
}
div.auto_complete ul li {
	margin:0;
	padding:3px;
}
div.auto_complete ul li.selected {
	background-color: #ffb;
}
div.auto_complete ul strong.highlight {
	color: #800; 
	margin:0;
	padding:0;
}

/*******************************************
   Sign-in Page
*******************************************/

.sign td {
	text-align: center;
}
.sign h2 {
	color: black;
	margin-bottom: 0em;
	padding-bottom: 0;
}
.sign p { margin: 0.5em 0em 0.5em; }
.sign a strong { font-size: 15pt; }
.sign a { text-decoration: none; }
.sign a:hover { text-decoration: underline; }
.sign img {
	width: 80px;
	height: 80px;
	margin-right: 1em;
}

/*******************************************
   Profile Page
 *******************************************/

table.profile {
	border: 2px solid #b77707; /* golden honey */
	border-collapse: separate;
	border-spacing: 0.5em;
	margin: 1em 0em;
	background-color: #f7f7f7; /* a better shade of grey */
}
table.profile table {
	margin: 0em;
}

table.profile .photo {
	background-color: gray;
	vertical-align: middle;
	text-align: center;
	margin: 0;
	padding: 0;
	border: thin solid black;
}

table.profile td.middle {
	padding: 0.0em 2em;
}

table.profile .name {
	color: #7D0509; /* cayenne */
	font-size: 14pt;
	font-weight: bold;
}
table.profile .rating {
	position: relative;
	padding: 0em 0.5em;
	top: 2px;
}
table.profile .postrating {
	font-style: italic;
}
table.profile div.facts {
	margin-top: 0.5em;
}
table.profile div.facts label {
	color: #7D0509; /* cayenne */
	margin-right: 0.5em;	
}
table.profile td.map {
	background-color: #CCCC22;
	border: thin solid black;
	padding: 0;
	width: 7em;
	height: 7em;
	vertical-align:middle;
	text-align: center;
}
table.profile td.map div#map {
	width: 7em;
	height: 7em;
}
table.profile table {
	background-color: white;
	border: thin solid gray;
}


table.pheader {
	width:100%;
}
table.pheader td {
	vertical-align: baseline;
	font-weight: bold;
	text-align: right;
}
table.pheader td.title {
	color: #7D0509; /* cayenne */
	font-size: 14pt;
	text-align: left;
}

div.actions {
	margin: 1em;
}
.actions button {
	padding: 0em 1em;
}
.actions a {
	margin: 1em; 
	border: none;
	text-decoration: none;
}

/*******************************************************************
   SEARCH RESULTS
********************************************************************/

div.pagination {
	display:inline;
}
div.pagination a {
	text-decoration: none;
}

table#search-results  {
	border-collapse: separate;
	border-spacing: 0 2px;
	margin: 0.5em 0;
}
#search-results .date {
	padding-top: 0.5em;
}

.result td {
	vertical-align: top;
	padding: 5px;
}

#search-results .result td {
	background-color: white;
	border-top: thin solid #c0c0c0;
	border-bottom: thin solid #c0c0c0;
}
#search-results .result .title td {
	border-top: none;
}
.result .photo {
	width: 60px;
	height: 60px;
	border: thin solid black;
	text-align: center;
	vertical-align: middle;
	padding: 0;
	background-color: gray;
}
.result .details {
	width: 52em;
}
.result .details td {
	line-height: 1.1;
	border: none;
}

/* We may put a "result" inside the profile window - in which case we need to redefine the photo height */
table.profile .result .photo {
	width: 60px;
	height: 60px;
	border: thin solid black;
	text-align: center;
	vertical-align: middle;
	padding: 0;
	background-color: gray;
}

.result td.details {
}
.result table.title {
	width: 100%;
}
.result table.title td {
	padding: 0;
}
.result .rtl {
	text-align: left;
	vertical-align: baseline;
}
.result .rtr {
	text-align: right;
	vertical-align: baseline;
}
.result div.title {
	display: inline;
	padding: 2px 0px 2px 0px;
}
.result div.title, .result div.title a {
	font-weight: bold;
	font-size: 16px;
}
.result div.srating {
	display: inline;
	position: relative;
	top: 3px;
	white-space: nowrap;
}
.result div.location {
	display: inline;
	position: relative;
	font-weight: bold;
	white-space: nowrap;
}
.result .name {
	display: inline;
	color: #7D0509; /* cayenne */
	font-size: 14px;
	font-weight: bold;
	white-space: nowrap;
}
.result div.facts {
	display: inline;
	font-size: 13.5px;
	white-space: nowrap;
}
.result div.facts * {
	font-size: 13.5px;
}
.result div.facts .money {
	font-weight: bold;
}
.result div.facts .money .cents {
	position: relative;
	top: -0.35em;
	font-size: 70%;
}

.result .description {
	clear: both;
}
.result .description a {
	font-size: 88%;
	font-weight: bold;
}

/*******************************************************************
   USER REVIEW - similar to a search result!
********************************************************************/

.review td {
	vertical-align: top;
	padding: 5px;
}
.review hr {
	/* Do not set margin-top or margin-bottom, because IE is stupid */
	margin-left: 8em;
	margin-right: 8em;
}
.review .photo {
	width: 60px;
	height: 60px;
	border: thin solid black;
	text-align: center;
	vertical-align: middle;
	padding: 0;
	background-color: gray;
}
.review .photo img {
	max-width: 60px;
	max-height: 60px;
	border: 0;
}
.review .photo:hover {
	border-color: blue;
}
.review td.details {
	width: 100%;
	line-height: 1.1;
}
.review td.details table td {
	padding: 0;
}
.review td.title a {
	font-weight: bold;
	font-size: 16px;
	text-decoration: none;
	color: black;
}
.review td.title a:hover {
	color: blue;
	text-decoration: underline;
}
.review .description {
}
.grey {
	border: thin solid gray;
	background: #f8f8f8;
}

/*******************************************************************
   MY PAGE
********************************************************************/

td.rt {
	width: 100%;
	padding-left: 1em;
}
table.my-profile {}
table.my-profile .pad { padding-right: 1em; }
table.my-profile .details td { white-space: nowrap;}
table.my-profile .name img.photo {
	border: thin solid black;
	margin-right: 0.5em;
}
table.my-profile table.name {
	margin-bottom: 0.5em;
}

.my-profile span.name {
	font-size: 150%;
	font-weight: bold;
}
.my-profile .srating {
}
.my-profile .postrating {
	margin-top: -3px;
	padding-left: 0.3em;
}

.my-profile label {
	margin-right: 0.4em;
	font-weight: bold;
	color: black;
}
.my-profile .action { /* "Edit Profile" link */
	float: right;
}

.my-workspace h2 {
	color: black;
	margin: 0;
	padding: 0;
}

.my-posting .result >td {
	background: inherit;
	border: none;
}

/* Posting ".state" is used in _my_posting, whereas .time is used in _mini_thread */
.my-posting-title {
	width: 100%;
}
.my-posting-title td {
	vertical-align: baseline;
}
.my-posting-title .state {
	text-align: left;
	color: black;
	font-weight: bold;
}
.my-posting-title input[type=submit] {
	position: relative;
	top: -2px;
	font-size: 12px;
	padding: 0;	
}
.my-posting-title td.actions {
	text-align: right;
}
#mypagefolders {
	margin-bottom: -6px;
}
.switch * {
	font-size: 16px;
	font-weight: bold;
	color: black;
}
.switch a {
	text-decoration: none;
	color: blue;
}

.inbox {
	width: 100%;
	background: #f7f7f7;
	vertical-align: baseline;
	cursor: pointer;
}
.inbox input {
	margin: 0;
	padding: 0;
}
.inbox_actions td {
	padding-bottom: 0.5em;
}
.inbox td {
	padding: 0.3em 0.8em 0.1em;
	border-bottom: 1px solid #c0c0ff;
	border-top: 1px solid #c0c0ff;
	white-space: nowrap;
}
.inbox a { text-decoration: none; }
.inbox a:hover { text-decoration: underline; }
.inbox td.message {
	width: 100%;
	font-style: italic;
}
.inbox td.message a {
	color: #4c4c4c;	
}
.inbox td.state{
	 text-transform: uppercase;
}
.inbox .new td, .inbox .new td a { font-weight: bold; color:black; }
.inbox td.inout {
	width: 1%;
}


div.mywarning {
	background-color: #ffdc83;
	margin-top: 0.5em;
	padding: 1em;
	border: 6px solid #ffaf00;
}

/*******************************************************************
   TALENT/JOB
********************************************************************/
table.grey_box {
	
	border:solid 1px;
	background:#f7f7f7;
}

table.posting_details td {
	padding: 0em 1em;
}
.posting_details .facts {
	margin: 0em -1em;
}
table.posting_details .description {
	padding-top: 1em;
}

/*******
   GOOGLE MAP
********/

div#map {
	width: 100px;
	height: 100px;
}

table.quickpost {
	border: thin solid gray;
	background: #f7f7f7;
	margin: 1em auto 1em auto;
}
table.quickpost table {
	margin: 0 1em 0 1em;
}

.form .title {
	color: #7D0509;
	font-weight: bold;
}

div.fieldWithErrors {
	display: inline;
}
div.fieldWithErrors label {
	padding: 2px;
	border: thick solid red;
}

/**************************
/*  Thread View Page
/*************************/

div#threadmain {
	background: white;
	width: auto;
	padding: 0.8em;
}
#threadmain .threadposting {
	width: 100%;
}
#threadmain .threadposting .account{
	padding-right: 0.8em;
}
#threadmain .threadposting div.details {
	max-height: 12em; 
	height: expression( this.scrollHeight > 180 ? "180px" : "auto" ); /* sets max-height for IE */
	overflow: auto;
	/* TODO:  For some reason when overflow = AUTO, it appears that the whole width of the div
	changes when scrollbars are NOT triggered */
}
#threadmain .threadposting table.details {
}
#threadmain .threadposting .facts {
	margin: 0em -1em;
}
table.facts td {
	padding: 0em 1em;
}

#threadmain .threadposting .facts b {
	padding-right: 0.2em;
}

#threadmain .threadposting .details td.description {
	white-space: normal ;
	padding-top: 1em;
}
#threadmain .threadposting td.posting {
	width: 100%;
}

#threadtitle {
	width: 100%;
}
#threadtitle td {
	vertical-align: bottom;
	padding-bottom: 0.2em;
}
#threadtitle .state {	
	font-size: 120%;
	color: black;
	font-weight: bold;
	padding-right: 2em;
}
table.thread_message_header {
	width: 100%;
}
table.thread_message_header b.other {
	color: #7D0509;
}
table.thread_message_header b.me {
	color: black;
	font-weight: bold;
}
div.thread_message_body {
	padding: 0.3em 0em 0.8em;
	padding: 0;
}
.threadposting .account .name {
	color: #7d0509;
}
.threadposting .posting div.rounded-body {
	padding: 0.25em 1em 0.25em;
}
.threadposting .posting .header { width: 100%; margin-bottom: -7px;}
.threadposting .posting .header tr { cursor: pointer; }
.threadposting .posting .header td { vertical-align: baseline;}
.threadposting .posting .header a {
	text-decoration: none;
	font-weight: bold;
	color: #7D0509;
	font-size: 120%;
}
.threadposting .posting hr {
	margin-bottom: 0.25em;
}

/* Side bar */

.account {
	text-align: center;
	white-space: nowrap;
}
.account * {
	font-size: 12px;	
}
.account .name {
	font-weight: bold;
	font-size: 110%;
}
.account .photo {
	margin-bottom: 0.2em;
}
.account .rating {
	font-style: italic;
}
.account .postrating {
	font-style: italic;
}

.account label {
	text-align: left;
	white-space: nowrap;
	font-weight: bold;
	font-size: 80%;
}
.account .postrating {
	white-space: nowrap;
}


/*******************************************************************
   AVAILABILITY WIDGET 
********************************************************************/

table.availwidget {
  border-collapse: collapse;
}
table.availwidget * {
  font-family: Times,serif;
  font-weight: normal;
  font-size: 9pt;
  text-align: center;
}
table.availwidget tr {
  height : 15px;
}
table.availwidget tbody tr td {
  border-width:1px;
  border-style:solid;
  border-color:black;
  background-color:white;
  cursor: crosshair;
  padding: 0;
  vertical-align: middle;
}
table.availwidget td * {
	margin: 0;
	padding: 0;
}
table.availwidget_day {
  width: 25px;
}

.blue {
	border: thin solid blue;
}

/* Rounded corners */
div.cro { background: #f8b230 url("/cr/o6.png") top right repeat-y; }
div.cro .cr4 { background: url("/cr/o4.png") top left repeat-y; }
div.cro .cr3 { background: url("/cr/o3.png") top right no-repeat; }
div.cro .cr1 { background: url("/cr/o1.png") top left no-repeat; }
div.cro .cr9 { background: url("/cr/o9.png") bottom right no-repeat; }
div.cro .cr7 { background: url("/cr/o7.png") bottom left no-repeat; }
div.cro .head { padding: 5px 0px 2px 0px; border-bottom: thin solid #808080;}
div.cro .body { padding: 5px 0px 5px 0px; }
div.cro .fram { padding: 7px 0px; }
div.cro .crp { padding-left: 9px; width: 1px;}

div.crg { background: #f7f7f7 url("/cr/g6.png") top right repeat-y; }
div.crg .cr4 { background: url("/cr/g4.png") top left repeat-y; }
div.crg .cr3 { background: url("/cr/g3.png") top right no-repeat; }
div.crg .cr1 { background: url("/cr/g1.png") top left no-repeat; }
div.crg .cr9 { background: url("/cr/g9.png") bottom right no-repeat; }
div.crg .cr7 { background: url("/cr/g7.png") bottom left no-repeat; }
div.crg .head { padding: 5px 0px 2px 0px; border-bottom: thin solid #808080;}
div.crg .body { padding: 2px 0px 5px 0px; }
div.crg .fram { padding: 5px 0px; }
div.crg .crp { padding-left: 9px; width: 1px;}

div.crd { background: #e6e6e6 url("/cr/d6.png") top right repeat-y; }
div.crd .cr4 { background: url("/cr/d4.png") top left repeat-y; }
div.crd .cr3 { background: url("/cr/d3.png") top right no-repeat; }
div.crd .cr1 { background: url("/cr/d1.png") top left no-repeat; }
div.crd .cr9 { background: url("/cr/d9.png") bottom right no-repeat; }
div.crd .cr7 { background: url("/cr/d7.png") bottom left no-repeat; }
div.crd .head { padding: 5px 0px 2px 0px; border-bottom: thin solid #808080;}
div.crd .body { padding: 2px 0px 5px 0px; }
div.crd .fram { padding: 5px 0px; }
div.crd .crp { padding-left: 9px; width: 1px;}

div.crw { background: #fff url("/cr/w6.png") top right repeat-y; }
div.crw .cr4 { background: url("/cr/w4.png") top left repeat-y; }
div.crw .cr3 { background: url("/cr/w3.png") top right no-repeat; }
div.crw .cr1 { background: url("/cr/w1.png") top left no-repeat; }
div.crw .cr9 { background: url("/cr/w9.png") bottom right no-repeat; }
div.crw .cr7 { background: url("/cr/w7.png") bottom left no-repeat; }
div.crw .head { padding: 5px 0px 2px 0px; border-bottom: none;}
div.crw .body { padding: 2px 0px 5px 0px; }
div.crw .fram { padding: 5px 0px; }
div.crw .crp { padding-left: 9px; width: 1px;}