/* --------------------------------------------------
Shooting People New Member Profiles Style Sheet
Author:  Giles @ Pixeco.com
Created:  01/12/08
Modified: 28/04/09
-------------------------------------------------- */

a:hover.img { background-color:transparent; }


.clearfix:after {
	content:".";
	display:block;
	clear:both;
	visibility:hidden;
	line-height:0;
	height:0;
	} 

/***************************************************** 
* Structure
*****************************************************/

#profilesWrapper {  
	padding: 25px 25px 25px 25px;
	margin: 40px auto 400px auto;
	font-family: 'Helvetica Neue', helvetica, Arial, sans-serif;	
	text-align: left;
	position: relative;
	background: url(/images/interface/bg_DiagStripe.gif) repeat 0 0;
	border-color: #bbb #bbb #ddd #bbb;			
	border-style: solid;
	border-width: 2px 1px 1px 1px;
/*	background: url(/images/profiles/rounded_edge_bottom.gif) no-repeat center bottom;*/
	}
	#profilesWrapper:after {
		content:".";
		display:block;
		clear:both;
		visibility:hidden;
		line-height:0;
		height:0;
		}
	#profilesWrapper #top { 
		position: absolute;
		top: 0;
		left: 0;
		}
	#profilesWrapper #main {
		width: 750px;
		padding: 0;
		margin: 0 10px 0 0;
		float: left;
		}
		div#headerInfo { 
			width: 718px; /* 800px */
			padding: 15px;
			margin-bottom: 20px;
			position: relative;
			background: #fffff6 url(/images/profiles/header_info_bg.jpg) repeat-x center bottom;
			border: 1px solid #fff200;
			}
			div#headerInfo:after {
				content: ".";
				display: block;
				clear: both;
				height: 0;
				visibility: hidden;
				}
/*		div#primaryInfo { 
			width: 520px;
			float: right;
			}
		div#secondaryInfo { 
			width: 260px;
			margin-right: 10px;
			float: left;
			}*/
	#profilesWrapper #sideStrip { 
		width: 120px;
		padding: 0;
		margin: 0;
		float: right;
		}

	#profilesWrapper div.box,
	#profilesWrapper div.boxWhite {
		padding: 15px;
		margin-bottom: 10px;
		border: 1px solid #fff;
		background: #fff;
		}
		#profilesWrapper div.box:after,
		#profilesWrapper div.boxWhite:after {
			content:".";
			display:block;
			clear:both;
			visibility:hidden;
			line-height:0;
			height:0;
			}
	#profilesWrapper div.boxWhite { 
		background: #fff;
		}




/***************************************************** 
* Layout
*****************************************************/


/* Main Member profile box //////////////////////////*/

div#headerInfo div#profilePicContainer { 
	margin: 0 30px 0 0;
	float: left;
	text-align: center;
	}
	div#headerInfo div#profilePicContainer img.profilePic { 
		margin: 0;
		padding: 15px;
		border: 1px solid #bbb;
		background:#fff;
		}
div#headerInfo h1 { font-size:2.6em; color:#000; letter-spacing:-0.05em; padding:0; margin:0 0 2px 0; }
	div#headerInfo h1 span { background-color:#fff200; }
div#headerInfo h2 { font-size:1.5em; color:#999; letter-spacing:-0.05em; padding:0; margin:0 0 16px 0; }
div#headerInfo h3 { font-size:1.3em; color:#000; letter-spacing:-0.07em; padding:0; margin:0 0 10px 0; }
	div#headerInfo h3.morePhotos { margin-top:10px; margin-bottom:0; position:relative; }
	div#headerInfo h3.morePhotos img.loader { position:absolute; top:1px; right:30px; }

div#headerInfo div#headerInfoText { 
	width: 295px;
	margin-top: 15px;
	float: left;
	}
	div#headerInfo div#headerInfoText img.buttonWorkedWith { 
		margin-top:15px;
		}

div#headerInfo div#pageViews { 
	width: 143px;
	padding: 10px;
	position: absolute;
	top: 15px;
	right: 15px;
	background: #fff;
	border: 1px solid #c8c8c8;
	}
	#headerInfo div#pageViews h2 { width:100%; height:17px; display:block; padding:0 0 5px 0; margin:0 0 10px 0; font-size:16px; color:#666; font-style:normal; border-bottom:1px solid #bbb; }
/*	#headerInfo div#pageViews p { color:#000; }*/



/* Photos toggle ////////////////////////////////////*/

div#headerInfo div#photosToggle { 
	width: 100%;
	padding-bottom: 0;
	}

div#headerInfo div#photosToggle ul#photos { 
	width: 100%;
	padding: 0;
	margin: 0;
	list-style: none;
	}
	div#headerInfo div#photosToggle ul#photos:after {
		content:".";
		display:block;
		clear:both;
		visibility:hidden;
		line-height:0;
		height:0;
		}
	div#headerInfo div#photosToggle ul#photos li { 
		display: block;
		width: 95px;
		height: 95px;
		padding: 5px;
		margin: 15px 11px 0 0;
		float: left;
		background-color: #fff;
		border: 1px solid #c8c8c8;
		}		
		div#headerInfo div#photosToggle ul#photos li div.photosClickFrame {
			width: 95px;
			height: 95px;
			margin-bottom:5px;
			overflow: hidden;
			background-color: transparent;
			}
			div#headerInfo div#photosToggle ul#photos li img { 
				width: 105px;
				margin-bottom: 5px;
				margin-left: -5px;
				margin-top: -5px;
				}
			
			div#headerInfo div#photosToggle ul#photos li div.photosClickFrame {
				background: #bbb no-repeat center center;
				}



/* Base typography for all boxes //////////////////////*/

#profilesWrapper div.box h1 { height:45px; display:block; padding:0 0 5px 224px; margin:2px 0 25px 0; font-size:2.5em; letter-spacing:-0.07em; color:#bbd0ff; border-bottom:1px solid #bbb; }

#profilesWrapper div.box h3 { 
	width: 225px;
	margin: 0 0 6px 0;
	padding: 2px 0;
	float: left;
/*	line-height:50%;*/
/*	background: url(/images/profiles/dotted_line.gif) no-repeat left bottom;*/
	}
	#profilesWrapper div.box h3:after {
		content:".";
		display:block;
		clear:both;
		visibility:hidden;
		line-height:0;
		height:0;
		}
	#profilesWrapper div.box h3 span { 
		padding-right: 6px;
		display: block;
		float: left;
		font-size: 0.95em;
		letter-spacing: -1px;
		color: #000;
		position: relative;
		top: 2px;
		background-color: #e5e5e5;
		}
#profilesWrapper div.box p { font-size:1em; margin-bottom:7px; }



/* Message boxes at top of profile //////////////////////////////////////*/

div#viewingOwnProfile,
div#searchReturn { 
	padding: 10px;
	margin-bottom: 15px;
	position: relative;
	border-color: #bbb #bbb #ddd #bbb;			
	border-style: solid;
	border-width: 2px 1px 1px 1px;
	background: #fff;
	}
	div#viewingOwnProfile:after,
	div#searchReturn:after {
		content:".";
		display:block;
		clear:both;
		visibility:hidden;
		line-height:0;
		height:0;
		}
	div#viewingOwnProfile p,
	div#searchReturn p { padding:0; margin:0; }
	
	div#viewingOwnProfile span.buttonMain { 
		position: absolute;
		top: 5px;
		}
		div#viewingOwnProfile span.buttonMain.edit { 
			left: 258px;
			}
		div#viewingOwnProfile span.buttonMain.add { 
			left: 385px;
			}




/* Right-hand sidebar - "Members I've worked with" and "Films I like" ///////////*/

#profilesWrapper #sideStrip div#workedWith,
#profilesWrapper #sideStrip div#filmsILike { 
	width: 118px;
	padding-bottom: 10px;
	margin-bottom: 10px;
	border: 1px solid #bbb;
	background: #fff;
	}
	#profilesWrapper #sideStrip h1 { font-size:16px; color:#666; width:95px; padding:0 0 5px 0; margin:10px 0 15px 10px; border-bottom: 1px solid #bbb; }
	#profilesWrapper #sideStrip img { width:118px; }
	
/* Tim's css - Slider styles ////////////// */
div#slider {
    width: 132px;
    margin: 0 auto;
    position: relative;
    }

div.scroll {
    overflow: auto;
    position: relative; /* fix for IE to respect overflow */
    clear: left;
    }

div.scrollContainer div.panel {
    padding: 0px;
    min-height: 105px;
    width: 118px; /* change to 560px if not using JS to remove rh.scroll */
    position: relative;
    }
    div.scrollContainer div.panel div.delete {
        text-align: center;
        margin-bottom: 5px;
        }
        div.scrollContainer div.panel div.delete a {
            display: block;
            width: 108px;
          	height: 17px;
            }

	img.scrollButtons {
		cursor: pointer;
		margin: 0;
		}
		img.scrollButtons.up { 
			margin-bottom: 7px;
			}
		img.scrollButtons.down { 
			margin-top: 7px;
			}
	
	/* Image hover styles /////////////////// */
	a.extra { display:inline; text-decoration:none; margin:0; position:relative; }
	a.extra em { font-style:normal; }
	a.extra em.txt,
	a.extra b { display:none; }
	a.extra .head { display:block; width:118px; height:90px; position:absolute; top:10px; left:0; }
	
	/* Background image restraint styles */
	a.extra div.photosClickFrame {
		width: 118px;
		height: 100px;
		background-color: transparent;
		}
		a.extra img { 
			border:0; display:block;
			width: 118px;
			height: 100px;
			}
		
		a.extra div.photosClickFrame {
			background: #bbb no-repeat center center;
			}

	a.extra:hover { position:relative; cursor:pointer; }
	a.extra:hover strong { display:block; position:absolute; top:0; left:0; width:118px; height:90px; background:#000; opacity:0.7; }

	a.extra:hover em.txt { display:block; width:107px; margin:0; font-size:12px; color:#fff; line-height:1em; position:absolute; top:12px; left:7px; }
		a.extra:hover em.txt span.name { font-size:13px; font-weight:bold; }



/* Listing structure for box information //////////////////*/

dl.detailsList { 
	margin: 0 0 1em 0;
	padding: 0;
	}
	dl.detailsList dt { 
		float: left;
		padding: 0.75em 0 0 0;
		width: 225px;
		font-weight: bold;
		border-top: 1px dotted #bbb;
/*		background: url(/images/profiles/dotted_line.gif) repeat-x 0 0;*/
		}
	dl.detailsList dd { 
		margin: 0 0 0 225px;
		padding: 0.75em 0 0 0;
		line-height: 1.3;
		border-top: 1px dotted #bbb;
/*		background: url(/images/profiles/dotted_line.gif) repeat-x 0 0;*/
		}
		dl.detailsList dt.firstChild,
		dl.detailsList dd.firstChild { 
			border-top:none;
			}
	dl.detailsList.single dt,
	dl.detailsList.single dd { 
		border-top: none;
		}
	
	dl.detailsList h2 { color:#bbd0ff; font-size:1.6em; letter-spacing:-0.05em; margin:11px 0 7px 0; }
	
	






/* Tabular info for Casting Details ////////////////////*/

#profilesWrapper div#castingDetails table.one,
#profilesWrapper div#castingDetails table.two { 
	width: 215px;
	padding: 0;
	margin: 0 20px 10px 0;
	float: left;
	font-size: 12px;
	color: #000;
	border-collapse: collapse;
	}
#profilesWrapper div#castingDetails table.two { 
	float: right;
	margin-right: 0;
	}
	#profilesWrapper div#castingDetails table.one tr,
	#profilesWrapper div#castingDetails table.two tr { 
		border-bottom: 1px dotted #000;
		}
	#profilesWrapper div#castingDetails table.one td,
	#profilesWrapper div#castingDetails table.two td { 
		width: 50%;
		padding: 5px 0;
		vertical-align: top;
		}
		#profilesWrapper div#castingDetails table.one td.left,
		#profilesWrapper div#castingDetails table.two td.left { 
			padding-right: 5px;
			font-weight: bold;
			}



/* Columns for primary info boxes ////////////////////*/

#profilesWrapper div.colOne { 
	width: 230px;
	margin-right: 20px;
	float: left;
	}
#profilesWrapper div.colTwo { 
	width: 230px;
	float: right;
	}



/* My Films & Credits boxes //////////////////////////*/

ul#MyFilms {
	width: 100%;
	padding: 0;
	margin: 0 0 10px 0;
	list-style: none;
	}
	ul#MyFilms li.item {
		width: 100%; /* Have to declare full width here for IE6 & 7, otherwise floated child gains top/bottom margins */
		padding: 15px 0 15px 0;
		margin: 0;
		border-bottom: 1px dotted #bbb;
		background: #fff;
		clear: both;
		}
/*		ul#MyFilms li:first-child { 
			border-top: none;
			}*/
		ul#MyFilms li.item:after {
			content:".";
			display:block;
			clear:both;
			visibility:hidden;
			line-height:0;
			height:0;
			}
		ul#MyFilms li h2 { 
			font-size:26px; 
			font-weight:bold; 
			letter-spacing:-1px; 
			line-height:100%; 
			padding:0; 
			margin:0 0 5px 0; 
			float: right;
			display: inline;
			width: 460px;
			}
		ul#MyFilms li p.role { 
			float: right;
			display: inline;
			width: 460px;
			padding:0; 
			margin:0 0 15px 0;
			color:#a6a6a6; 
			}
			ul#MyFilms li p.role span { 
				margin-right: 15px;
				}
				ul#MyFilms li p.role span strong { 
					font-weight: bold;
					}
		ul#MyFilms li div.workItemAvatarBorder { 
			width: 135px;
			padding: 5px;
			float: left;
			border: 1px solid #bbb;
			}
		ul#MyFilms li div.workItemAvatar { 
			width: 135px;
			height: 105px;
			overflow: hidden;
			background: #bbb;
			}
			ul#MyFilms li div.workItemAvatar img.avatar { 
				width: 140px;
				margin: -2px 0 0 -2px;
				}
		
		/* For Film items (with click through to Film View page) main pics only */	
		ul#MyFilms li div.filmStillBorder {
			width: 135px;
			padding: 5px;
			margin: 0;
			float: left;
			position: relative;
			border: 1px solid #bbb;
			}
			ul#MyFilms li div.filmStillBorder div.filmStill { 
				width: 135px;
				height: 105px;
				overflow: hidden;
				background: #bbb;
				}
				ul#MyFilms li div.filmStillBorder div.filmStill a.playButton { 
					display: block;
					width: 135px;
					height: 105px;
					position: absolute;
					top: 5px;
					left: 5px;
					background: url(/images/profiles/thumb_PlayButton_large.png) no-repeat 0 0;
					}
				ul#MyFilms li div.filmStillBorder div.filmStill img.still { 
					width: 135px;
					margin: 0;
					}
		
/* Collapsable Blue Info boes on My Work & Credits */	 
		ul#MyFilms li div.infoPanel {
			width: 440px; /* 460px */
			padding: 0 10px;
			margin: 0 0 10px 0;
			font-size: 0.8em;
			color: #666;
			float: right;
			position: relative;
			background: #dbd6ff url(/images/account/settingspanel_bg.jpg) repeat-x top left;
			}
			ul#MyFilms li div.infoPanel:after {
				content: ".";
				display: block;
				height: 0;
				clear: both;		
				visibility: hidden;
				}
			ul#MyFilms li div.infoPanel a.reveal {
				height: 25px; /*28px*/
				padding: 5px 0 0 0;	
				margin: 0;
				display: block;
				font-weight: bold;
				line-height: 2;
				position: relative;
				}
				ul#MyFilms li div.infoPanel a:hover.reveal { background-color:transparent; color:#5489ff; }
				ul#MyFilms li div.infoPanel a.reveal span.expandClose { 
					position: absolute;
					top: 6px;
					right: 0;
					font-size: 0.9em;
					font-family: helvetica, arial, sans-serif;
					font-weight: bold;
					}
			ul#MyFilms li div.infoPanel img.loader { 
				position:absolute; 
				top:6px; 
				right:92px; 
				}
			ul#MyFilms li div.infoPanel div.innerContainer { 
				padding: 9px;
				margin-bottom: 10px;
				background: #fff;
				border: 1px solid #bbb;
				}
				ul#MyFilms li div.infoPanel div.innerContainer:after {
					content: ".";
					display: block;
					height: 0;
					clear: both;		
					visibility: hidden;
					}
			ul#MyFilms li div.infoPanel h2 { display:block; width:100%; height:20px; padding:0; margin:0 0 1px 0; font-size:110%; line-height:100%; border-bottom:1px solid #bbb; }
			ul#MyFilms li div.infoPanel a:link,
			ul#MyFilms li div.infoPanel a:active,
			ul#MyFilms li div.infoPanel a:hover,
			ul#MyFilms li div.infoPanel a:visited { font-weight:bold; }

			ul#MyFilms li div.infoPanel div.rule { border-top:1px solid #bbb; margin:10px auto 15px auto; }
			
			ul#MyFilms li div.infoPanel ul { 
				width: 100%;
				margin:0 0 10px 0;
				padding: 0;
				float: left;
				list-style:none;
				}
				ul#MyFilms li div.infoPanel ul:after {
					content: ".";
					display: block;
					height: 0;
					line-height: 0;
					clear: both;		
					visibility: hidden;
					}
				ul#MyFilms li div.infoPanel ul.CastCrewList { 
					width: 205px;
					}
					ul#MyFilms li div.infoPanel ul.CastCrewList.left { 
						margin-right:10px;
						}
					ul#MyFilms li div.infoPanel ul.CastCrewList.fullWidth { 
						width: 100%;
						}
					ul#MyFilms li div.infoPanel ul.CastCrewList.left.fullWidth { 
						width: 100%;
						margin-right:0;
						}
				ul#MyFilms li div.infoPanel ul li { 
					padding-top: 8px;
					padding-bottom: 7px;
					display: block;
					font-size: 1em;
					border-bottom:1px dotted #bbb;
					}
					ul#MyFilms li div.infoPanel ul li:after {
						content: ".";
						display: block;
						height: 0;
						line-height: 0;
						clear: both;		
						visibility: hidden;
						}
					ul#MyFilms li div.infoPanel ul li strong { 
						font-weight: bold;
						}
					ul#MyFilms li div.infoPanel ul li.header { 
						font-size:1.2em; 
						font-weight:bold; 
						padding-top: 3px;
						border-bottom-style: solid;
						}
					ul#MyFilms li div.infoPanel ul.details li div.left { 
						width: 125px;
						font-weight: bold;
						float: left;
						}
					ul#MyFilms li div.infoPanel ul.details li div.right { 
						width: 290px;
						float: left;
						}
					ul#MyFilms li div.infoPanel ul.scripts li div { 
						padding: 1px 0 0 0;
						float: left;
						}
						ul#MyFilms li div.infoPanel ul.scripts li div.draft { 
							width: 55px;
							margin-bottom: 0;
							clear: both;
							}
						ul#MyFilms li div.infoPanel ul.scripts li div.name { 
							width: 280px;
							margin-bottom: 0;
							font-weight: bold;
							}
							ul#MyFilms li div.infoPanel ul.scripts.docs li div.name { 
								width: 335px;
								}
							ul#MyFilms li div.infoPanel ul.scripts li div.name a { 
								margin-left: 5px;
								font-weight: normal;
								}
						ul#MyFilms li div.infoPanel ul.scripts li div.download { 
							width: 80px;
							margin-bottom: 0;
							text-align: right;
							float: right;
							}
						ul#MyFilms li div.infoPanel ul.scripts li div.extraInfo { 
							width: 360px;
							margin: 7px 0 5px 55px;
							font-size: 1em;
							font-weight: normal;
							float: left;
							clear: both;
							}
							ul#MyFilms li div.infoPanel ul.scripts.docs li div.extraInfo { 
								width: 100%;
								margin-left: 0;
								}
							ul#MyFilms li div.infoPanel ul.scripts li div.extraInfo strong { 
								font-weight: bold;
								}
							ul#MyFilms li div.infoPanel ul.scripts li div.extraInfo p { 
								line-height: 1.3;
								padding: 0;
								margin: 5px 0 0 0;
								}


/*			ul#MyFilms li div.MyRole { 
				width: 460px;
				padding: 8px 0 5px 0;
				margin-top: 15px;
				border-top: 1px dotted #bbb;
				}
				ul#MyFilms li div.MyRole p { line-height:1.2; }
					ul#MyFilms li div.MyRole p span { font-weight: bold; }
				ul#MyFilms li div.MyRole h2 { width:100%; height:17px; display:block; padding:0 0 5px 0; margin:0 0 10px 0; font-size:14px; letter-spacing:-1px; border-bottom:1px solid #bbb; }*/
			
				
			
			


/* Tabs - Second level Functionality ('About Me', 'My Films & Credits', 'Actor') ////////////////////////////////////// */

					/* Caution! Ensure accessibility in print and other media types... */

					@media projection, screen { /* Use class for showing/hiding tab content, so that visibility can be better controlled in different media types... */
						    .ui-tabs-hide {
						        display: none !important;
						    }
						}

					/* Hide useless elements in print layouts... */
					@media print {
						    .ui-tabs-nav {
						        display: none;
						    }
						}

div#profile_tabs div.tabsContentBox {
	width: 718px; /* 750px */ /* Declare width for IE otherwise tabs hide behind container */
	padding: 15px; 
	margin-bottom: 15px;
	border-color: #5489ff;
	border-style: solid;
	border-width: 2px 1px 1px 1px;
	position: relative;
	z-index: 0;
	background: #fff url(/images/profiles/hatch_BonW.gif);
	}

	ul.tabs {
	    list-style: none;
	    margin: 0;
	    padding: 0;
		position: relative;
		z-index: 1;
		}
		ul.tabs:after { 
		    display: block;
		    clear: both;
		    content: " ";
			}
	ul.tabs li {
		height: 30px;
	    margin: 0 11px 0 0;
	    float: left;
		font-size: .85em;
		border-left: 1px solid #5489ff;
		border-right: 1px solid #5489ff;
		position: relative;
		top: 2px;
		background: #fff url(/images/profiles/tab_bg_profile.jpg) repeat-x left -30px;
		}


ul.tabs a {
	padding: 0;
    margin: 0;
	float: left; /* fixes dir=ltr problem and other quirks IE */
    white-space: nowrap; /* @ IE 6 */
    outline: 0; /* @ Firefox, prevent dotted border after click */    
	}
	ul.tabs a span {
	    padding: 9px 20px 0 20px;
	    height: 21px; /* 30px */
		float: left; /* fixes dir=ltr problem and other quirks IE */
		text-align: center;
		text-transform: uppercase;
	    background-position: 0 0;
		}
		ul.tabs a:link, 
		ul.tabs a:visited {
		    font-size: .85em;
			font-weight: bold;
			}

	ul.tabs li.tabsSelected a {
		height: 30px;
	    margin-top: 0;
		background: #fff url(/images/profiles/tab_bg_profile.jpg) repeat-x left top;
		}
		ul.tabs li.tabsSelected a span {
		    padding: 9px 20px 0 20px;
		    height: 21px; /* 30px */
			text-align: center;
		    background-position: top left;
			}


ul.tabs li.tabsSelected a:link,
ul.tabs li.tabsSelected a:visited,
ul.tabs li.tabsDisabled a:link,
ul.tabs li.tabsDisabled a:visited { /* @ Opera, use pseudo classes otherwise it confuses cursor... */
    cursor: default;	
	}
	ul.tabs li.tabsSelected a:hover { 
		text-decoration: none;
		}

ul.tabs li.tabsUnselect { 
	border-left: 1px solid #5489ff;
	border-right: 1px solid #5489ff;
	}	

ul.tabs a:hover, 
ul.tabs a:focus, 
ul.tabs a:active,
ul.tabs li.tabsUnselect a:hover, 
ul.tabs li.tabsUnselect a:focus, 
ul.tabs li.tabsUnselect a:active { /* @ Opera, we need to be explicit again here now... */
    cursor: pointer;
	background: transparent;
	color: #5489ff;
	}

li.tabsDisabled {
/*    opacity: .4;*/
	}
	ul.tabs li.tabsDisabled a:link, 
	ul.tabs li.tabsDisabled a:visited {
	    color: purple;
		}

/* End Tabs - second level /////////////////////////////////////////////////////*/


/* Tim style stuff from here */