/***************/
/* main layout */
/***************/
body {
	background-image: url("../images/bg.jpg"); /* stupid IE and its stupid reading of colours incorrectly in PNGs */
	background-color: #929394;
	background-repeat: repeat-x;
	background-position: top;
	color: #fff;
	margin-top: 22px;
	line-height: 170%;
}

.mainContainer { width: 890px; margin: auto; }

/* specific link colours for this site */
a			{ text-decoration: none; }
a:link		{ color: #fff; }
a:visited	{ color: #fff; }
a:hover		{ color: #ccc; background-image: url("../images/link_bg.gif"); }
a:active	{ color: #ccc; background-image: url("../images/link_bg.gif"); }

/* specific heading stuff */
h1,
h2,
h3,
h4,
h5,
h6 { font-family: Verdana, Arial, Helvetica, sans-serif; font-weight: normal; margin-top: 15px; letter-spacing: -1px; }

h1 { font-size: 2.5em; }
h2 { font-size: 1.9em; }
h3 { font-size: 1.7em; }
h4 { font-size: 1.4em; }
h5 { font-size: 1.2em; }
h6 { font-size: 1.0em; }

/*******************/
/* header elements */
/*******************/
#topContainer {  }

#topContainer img#logo { float: left; margin-left: 140px; margin-top: 13px; }

#topContainer ul { float: right; }
#topContainer ul { margin: 0; padding: 0; }
#topContainer ul li { margin: 0; padding: 0; list-style: none; }

/****************/
/* nav elements */
/****************/
#middleContainer { margin-top: 24px; }

#navContainer {
	float: left;
	width: 110px;
	text-align: right;
	line-height: 120%;
	font-size: 12px;
	font-family: Arial, Verdana, Helvetica, sans-serif;
}

#navContainer ul { margin: 0; padding: 0; }

#navContainer li { font-weight: normal; list-style: none; margin-bottom: 6px; }
#navContainer li a { display: block; }
#navContainer li a:hover { background-color: #6a6b6c; color: #fff; background-image: none; }


/********************/
/* content elements */
/********************/
#mainContainer { float: left; margin-left: 30px; width: 750px; } /* leave room for the sidebar nav */

#frontPicContainer { float: left; width: 385px; overflow: hidden; }
#frontPic { border: 20px solid #fff; display: block; visibility: hidden; overflow: hidden; margin: auto; background-color: #fff; background-repeat: no-repeat; }

.floatleft { float: left; }

#contentHeader {  }

#peopleFilters { background-color: #6a6b6c; color: #fff; line-height: 90%; margin-bottom: 15px; }
#peopleFilters fieldset { border: none; margin-right: 80px;}

#lightboxTitle { float: left; line-height: 1.7em; margin: 0; }
#printLightbox { float: left; margin-top: 7px; margin-left: 30px; margin-bottom: 10px; }

#lightboxHelp { position: absolute; top: 129px; right: 10px; width: 400px; padding: 4px 8px; background-color: #666; border: 1px solid #333; }
#lightboxHelp h1 { margin: 5px; }
#lightboxHelpButton { display: block; margin: auto; }

.myaccount_lightbox { font-weight: bold; }
.lightbox_delete { border: 0; background: #666; color: #fff; }

hr {
	border-bottom: dotted #fff 1px;
	height: 1px;
	border-top: none;
	border-left: none;
	border-right: none;
	margin-left: 0;
}

/* photo galleries and such */
div#allPics {  }

/* a headshot in the search pages */
div.headShot {
	float: left;
	margin-bottom: 15px;
	text-align: center;
	width: 150px;
	height: 205px;
}
div.headShot img                 { margin-bottom: 5px; vertical-align: middle; }
div.headShot a.person            { background-repeat: no-repeat; background-position: center 4px; color: inherit; display: block; padding: 146px 5px 5px; }
div.headShot a.person:hover      { background-color: #6a6b6c; background-position: center 3px; border: 1px solid #909092; padding: 145px 4px 4px; }
div.headShot a.lightboxAdd       { line-height: 1em; font-size: 1em; }
div.headShot a.lightboxAdd:hover { background-color: #6a6b6c; border: 1px solid #909092; padding: 4px; }

#slideshow {
	background: #fff;
	border: 2px solid #909092;
	color: #fff;
	height: 140px;
	overflow: hidden;
	padding: 13px;
	position: absolute;
	max-width: 400px;
	white-space: nowrap;
}
#slideshow div {
	left: 0;
	position: relative;
	top: 0;
}
#slideshow img { margin-right: 3px; vertical-align: middle; }
#slideshow img:last-child { margin-right: 0; }

div#lightPics {  }
div#lightPics div.headShot { height: 203px; }

div#folioPics {
	height: 381px;
	padding: 3px;
	margin-right: 8px;
	overflow-x: auto;
	overflow-y: hidden;
	white-space: nowrap;
	margin-top: 10px;
	
	border: 3px solid #757677;
	
	/* fun scrollbars for IE */
	background-color: #fff;
	scrollbar-face-color: #fff;
	scrollbar-arrow-color: #999;
	scrollbar-track-color: #eee;
	scrollbar-shadow-color: #fff;
	scrollbar-highlight-color: #fff;
	scrollbar-3dlight-color: #cdcdcd;
	scrollbar-darkshadow-color: #fff;
}

/* for safari, who doesn't listen to max-width and can't be addressed using an <!-- IF rule :( */
/*html[xmlns*=""] body:last-child div#folioPics { overflow: auto; }*/

div#folioPics a { background: none; } /* hide the funky background as the links seem to include their whitespace in Firefox */

div#folioPics img { margin-right: 1px; vertical-align: middle; }

/* other parts of a profile */
div#personInfo		{  }
div#personInfo div	{ line-height: 2.5em; }

/* media profile */
#media-list      { float: left;  width: 280px; }
#media-container { float: right; width: 425px; padding-top: 45px; text-align: right; }
#media-player    { width: 352px; height: 265px; float: right; }

#toolbox {
	background-color:#757677;
	border: 3px solid #888;
	float: right;
	font-size: 1.1516em;
	line-height: 1.538em;
	list-style: none;
	margin: 0;
	padding: 0px;
	width: 150px;
}
#toolbox a:hover { background: #555; color: #fff; }

#toolbox li { display: block; margin: 0; }
#toolbox li a { display: block; margin: 0; padding: 5px; padding-left: 0; }

#lightboxAdd {  }
#printCard   {  }
#backLink    {  }

#emailForm     { float: left; padding-top: 40px; }
#emailHeadshot { float: right; }

a.nobg       { background: none; }
a.nobg:hover { background: none; }

/*****************/
/* photo gallery */
/*****************/
div.galleryItem { /* one gallery item */
	width: 100px;
	height: 100px;
	float: left;
	margin: 5px;
}

/*******************/
/* footer elements */
/*******************/
#footer { margin-top: 15px; padding: 2px 5px 3px 290px; background-color: #fff; color: #393939; }
#footer div { width: 890px; margin: auto; }
#footer a { color: #393939; text-decoration: none; } /* for the clevercherry.com link */
#footer a:hover,
#footer a:active { color:#999999; background: none; }

#bottomSpacer { height: 120px; }
#bottomContainer { height: 110px; width: 100%; background-color: #fff; position: fixed; bottom: 0px; left: 0px; }

/***********************/
/* general form styles */
/***********************/
#contactform	{ float: left; }  /* the contact form itself */
#contact		{ float: right; } /* contact info or whatever on right */

/* all form elements are contained within a formrow div, with a label and
 *  then the element, this is the best way (but still not good) to emulate
 *  a table */
div.formrow {
	/*clear: both; /* get rid of this because we have a left-floated div that this interferes with in Firefox, d'oh! */
	text-align: left;
	margin-bottom: 10px;
}

div.formrow label {
	float: left;
	text-align: right;
	margin-right: 10px;
	width: 80px; /* default width for a default form, add new form ids and override */
}
div.formrow.indent { margin-left: 90px; } /* label width + label margin-right, override as above */

/* if we're using an indented row, the label is obviously not on the left, probably a radio button */
div.formrow.indent label,
div.formrow label.nofloat { float: none; margin: auto; width: auto; text-align: inherit; }

#signupForm div.formrow label  { width: 65px; }
#signupForm div.formrow.indent { margin-left: 75px; }

#lightboxForm div.formrow label  { width: 100px; }
#lightboxForm div.formrow.indent { margin-left: 110px; }

#lightboxSettingsForm div.formrow label  { width: 100px; }
#lightboxSettingsForm div.formrow.indent { margin-left: 110px; }

#loginForm div.formrow label  { width: 80px; }
#loginForm div.formrow.indent { margin-left: 90px; }

#registerForm div.formrow label  { width: 120px; }
#registerForm div.formrow.indent { margin-left: 130px; }

#detailsForm div.formrow label  { width: 120px; }
#detailsForm div.formrow.indent { margin-left: 130px; }

#emailForm div.formrow label  { width: 130px; }
#emailForm div.formrow.indent { margin-left: 140px; }

#searchForm div.formrow label  { width: 60px; }
#searchForm div.formrow.indent { margin-left: 70px; }

#searchNameForm div.formrow label  { width: 30px; }
#searchNameForm div.formrow.indent { margin-left: 40px; }

#search_name_options {
	background: #666;
	border: 1px solid #222;
}
#search_name_options ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
#search_name_options ul li {
	margin: 0;
	padding: 0 6px;
}
#search_name_options ul li.selected {
	background: #999;
}

/* message and error boxes, not just useful in contact form */
div.box { border: 2px solid #090; color: #0b0; background-color: #606060; padding: 3px 5px; margin-bottom: 15px; }
div.box.nomargin { margin-bottom: 0; } /* if before something with a margin-top */
div.box.error { border-color: #c11; color: #f33; font-weight: bold; } /* error box in red */