/* ------------------------------------------------------------------------------
 * MEMBER - (IE7+ FF3+ Opera9+)
 * 
 * 	project: 	StockFuel
 * 	version: 	1.0 - 17.03.2010
 * 	author:		Hugo Larcher (hl@void.pt)
 *
 * 	[Table of Contents]
 *
 * 	1. Content Area (#memberPage)
 *		1.1. Details (#memberDetails)
 *			1.1.1. Avatar (.avatar)
 *			1.1.2. Info (.info)
 *			1.1.3. Actions (.actions)
 *		1.2. Top Bar (#topBar)
 *			1.2.1. Search (#portfolioSearch)
 *			1.2.2. Sort (#portfolioSort)
 *			1.2.3. Top Paging (#portfolioPaging)
 *		1.3. List (#portfolioList)
 *		1.4. Bottom Bar (#bottomBar)
 *	2. Message Popup (#layermessage)
 * ------------------------------------------------------------------------------
 */

/* [1. Content Area] */
#memberPage {
	position:					relative;
	width:						674px;
	min-height:					897px;
	margin:						0px;
	padding:                	10px 5px 10px 5px;
	text-align:					left;
	background-color:			#232323;
}

#memberPage h1 {
	padding:                    5px 0px 5px 10px;
	font:						13px/24px 'Trebuchet MS', 'Lucida Grande', Arial, sans-serif;
	font-weight:				bold;
	color:						#94b4d2;
}

#memberPage h2 {
	height:						24px;
	padding:	            	5px 0px 5px 10px;
	text-indent:                5px;
	font:						12px/24px 'Trebuchet MS', 'Lucida Grande', Arial, sans-serif;
	font-weight:				bold;
	color:						#ffffff;
}

.hrBevel {
	width:						674px;
}

#titleBox {
	padding-left:               5px;
}

/* [1.1. Details] */
#memberDetails {
	position:					relative;
	width:						664px;
	height:						115px;
	margin:						0px;
	padding:                    5px;
	background:					url(../../images/member-details-bg.gif) no-repeat left top;
}

/* [1.1.1. Avatar] */
#memberDetails .avatar {
	position:					absolute;
	left:						16px;
	top:						15px;
	width:						94px;
	height:						94px;
	margin:						0px;
	padding:                    0px;
}

/* [1.1.2. Info] */
#memberDetails .info {
	position:					absolute;
	left:						135px;
	top:						15px;
	width:						350px;
	height:						74px;
	margin:						0px;
	padding:                    10px;
}

#memberDetails .info h1 {
	padding:                    0px;
	font:						11px Tahoma, Geneva, Verdana, Arial, Helvetica, sans-serif;
	font-weight:				bold;
	color:						#febf53;
}

#memberDetails .info ul {
	position:					relative;
	width:						350px;
	height:						14px;
	margin:						0px;
	padding:                    6px 0px 0px 0px;
}

#memberDetails .info ul li {
	display:					block;
	position:					relative;
	float:						left;
	height:						14px;
	padding:                    0px 10px 0px 10px;
	font:						11px Tahoma, Geneva, Verdana, Arial, Helvetica, sans-serif;
	font-weight:				normal;
	color:						#ffffff;
	border-left:				1px solid #8f8f8f;
}

#memberDetails .info ul li.first {
	padding:                    0px 10px 0px 0px;
	border:						none;
}

#memberDetails .info ul li span {
	color:						#8f8f8f;
}

#memberDetails .info ul li a {
	text-decoration:			underline;
	color:						#8f8f8f;
}

#memberDetails .info ul li a:hover, 
#memberDetails .info ul li a:active {
	color:						#94b4d2;
}

/* [1.1.3. Actions] */
#memberDetails .actions {
	position:					absolute;
	left:						535px;
	top:						25px;
	width:						114px;
	height:						70px;
	margin:						0px;
	padding:                    3px;
}

#memberDetails .actions a.messageButton {
	display:					block;
	float:						left;
	width: 						114px;
    height: 					25px;
	margin:						0px;
	padding:	 				10px 0px 0px 0px;
    border: 					none;
	text-align:					center;
	text-decoration:			none;
	font:						11px Tahoma, Geneva, Verdana, Arial, Helvetica, sans-serif;
	font-weight:				bold;
	color:						#000000;
	background:					url(../../images/member.gif) no-repeat 0px -170px;
}

#memberDetails .actions a.messageButton:hover, 
#memberDetails .actions a.messageButton:active {
	color:						#ffffff;
}

#memberDetails .actions a.favesButton {
	display:					block;
	float:						left;
	width: 						114px;
    height: 					25px;
	margin:						0px;
	padding:	 				10px 0px 0px 0px;
    border: 					none;
	text-align:					center;
	text-decoration:			none;
	font:						11px Tahoma, Geneva, Verdana, Arial, Helvetica, sans-serif;
	font-weight:				bold;
	color:						#ffffff;
	background:					url(../../images/member.gif) no-repeat 0px -205px;
}

#memberDetails .actions a.favesButton:hover, 
#memberDetails .actions a.favesButton:active {
	color:						#94b4d2;
}

/* [1.2. Top Bar] */
#topBar {
	position:					relative;
	width:						674px;
	height:						37px;
	margin:						0px;
	padding:                	2px 0px 2px 0px;
	background:					url(../../images/member.gif) no-repeat -5px -4px;
	z-index:					100;
}

/* [1.2.1. Search] */
#portfolioSearch {
	position:					relative;
	float:						left;
	width:						204px;
	height:						30px;
	margin:						0px;
	padding:                	4px 5px 3px 5px;
}

#portfolioSearch form {
	position:					relative;
	width:						204px;
	height:						30px;
	margin:						0px;
	padding:                	0px;
}

#portfolioSearch form div.field {
	position:					relative;
	float:						left;
	width:						136px;
	height: 					30px;
	margin:						0px;
	padding:	 				0px;
	background:					transparent url(../../images/member.gif) no-repeat 0px -50px;
}

#portfolioSearch form input {
	width:						116px;
	margin:						8px 10px 4px 10px;
	padding:	 				0px;
	border: 					none;
	background:					none;
	line-height:				16px;
	font: 						11px Tahoma, Geneva, Verdana, Arial, Helvetica, sans-serif;
	color:						#1b1b1b;
}

#portfolioSearch form input.submitButton {
	float:						left;
	width: 						68px;
    height: 					30px;
	margin:						0px;
	padding:	 				0px;
    border: 					none;
	background:					url(../../images/member.gif) no-repeat;
	background-position:		0px -110px;
	text-indent:				-5555px;	
	cursor: 					pointer;
}

#portfolioSearch form input.submitButton:hover, 
#portfolioSearch form input.submitButton:active {
	background-position:		-68px -110px;
}

/* [1.2.2. Sort] */
#portfolioSort {
	position:					relative;
	float:						left;
	width:						126px;
	height:						30px;
	margin:						0px;
	padding:                	4px 3px 3px 11px;
	z-index:					100;
}

#portfolioSort form {
	position:					relative;
	width:						126px;
	height:						30px;
	margin:						0px;
	padding:                	0px;
}

#portfolioSort form div.field {
	position:					relative;
	display:					block;
	float:						left;
	height: 					30px;
	margin:						0px;
	padding:	 				0px;
}

#portfolioSort form .smallSelect {
	display: 					inline;
	width: 						86px;
	margin:						0px;
	padding:					8px 30px 4px 10px;
	border: 					none;
	line-height:				16px;
	font: 						11px Tahoma, Geneva, Verdana, Arial, Helvetica, sans-serif;
	color:						#000000;	
	background:					url(../../images/member.gif) no-repeat 0px -80px;
}

#portfolioSort form .smallSelect.hover {
	background-position:		-126px -80px;
}

#portfolioSort form .smallSelect.active {
	background-position:		-252px -80px;
}

#portfolioSort form .selectOptions {
	max-height: 				200px;
	padding:                    5px 1px 5px 1px;
	overflow: 					auto;
	text-align:					left;
	border: 					solid 3px #4d4d4d;
	background: 				#ffffff;
}

#portfolioSort form .selectOptions li {
	display: 					block;
	padding:                    3px 5px 3px 5px;
	font: 						11px Tahoma, Geneva, Verdana, Arial, Helvetica, sans-serif;
	color:						#1b1b1b;
}

#portfolioSort form .selectOptions li.hover {
	background: 				#e0e0e0;
}

#portfolioSort form .selectOptions li.sel {
	background: 				#e0e0e0;
}

/* [1.2.2. Top Paging] */
#portfolioPaging {
	position:					relative;
	float:						right;
	clear:						right;
	width:						300px;
	height:						28px;
	margin:						0px;
	padding:                	4px 4px 5px 3px;
}

/* [1.3. List] */
#portfolioList {
	position:					relative;
	width:						672px;
	height:						520px;
	margin:						0px;
	padding:                	4px 1px 0px 1px;
}

#portfolioList li {
	position:					relative;
	float:						left;
	width:						206px;
	height:						110px;
	margin:						0px 6px 6px 0px;
	padding:                	7px;
	overflow:					hidden;
	text-align:					left;
	background:					transparent url(../../images/thumb-bg.gif) no-repeat left top;
}

#portfolioList li.last {
	margin:						0px 0px 6px 0px;
	clear:						right;
}

#portfolioList li p {
	position:					relative;
	float:						right;
	width:						89px;
	margin-top:					5px;
	overflow:					hidden;
}

#portfolioList li p a {
	text-decoration:			underline;
	color:						#ffffff;
}

#portfolioList li p a:hover,
#portfolioList li p a:active {
	color:						#9cbddd;
}

#portfolioList li img {
	position:					relative;
	float:						left;
	width:						110px;
	height:						110px;
	overflow:					hidden;
	margin-right:				7px;
}

#portfolioList li div.fthumb {
	position:					relative;
	float:						left;
	width:						110px;
	height:						110px;
	overflow:					hidden;
	margin-right:				7px;
}

/* [1.4. Bottom Bar] */
#bottomBar {
	position:					relative;
	clear:						both;
	width:						662px;
	height:						28px;
	margin:						0px;
	padding:                	4px 5px 5px 7px;
	background:					url(../../images/member.gif) no-repeat -5px -246px;
}

/* [2. Message Popup] */
#layermessage {
	width: 						740px;
	height: 					310px;
    top: 						50%;
    left: 						50%;
    margin:						0px;
	padding:                    5px;
	text-align:					left;
    background-color: 			#ffffff;
    color: 						#323232;
	margin-top:					-140px;
	margin-left: 				-375px;
	z-index:					5000;
}

#layermessage .titlebox {
	position:					relative;
	width:						740px;
	height:						35px;
	margin:						0px 0px 5px 0px;
	padding:                    0px;
}

#layermessage .titlebox span {
	display:					block;
	float:						left;
	width:						670px;
	height:						15px;
	margin:						0px;
	padding:                    11px 5px 9px 20px;
	text-align:					left;
	font:						11px Tahoma, Geneva, Verdana, Arial, Helvetica, sans-serif;
	font-weight:				normal;
	color:						#676767;
}

#layermessage .titlebox a {
	display:					block;
	float:						right;
	width:						35px;
	height:						35px;
	margin:						0px 10px 0px 0px;
	padding:                    0px;
	background:					#ffffff url(../../images/popup-close.gif) no-repeat left top;
	text-indent:                -5555px;
}

#layermessage .contentbox {
	clear:						both;
	width:						710px;
	height:						240px;
	margin:						0px;
	padding:                    15px;
	font:						11px Tahoma, Geneva, Verdana, Arial, Helvetica, sans-serif;
	font-weight:				normal;
	color:						#323232;
	background: 				#e8e8e8 url(../../images/popup-message-bg.gif) no-repeat left top;
}

/* [2.1. Message Form] */
#layermessage .contentbox #messagebox {
	position:					relative;
	width:						710px;
	height:						240px;
	overflow:					hidden;
}

#layermessage .contentbox #messagebox p {
	text-indent:                5px;
	font: 						11px Tahoma, Geneva, Verdana, Arial, Helvetica, sans-serif;
	font-weight:				bold;
	color:						#323232;
}

#layermessage .contentbox #messagebox form {
	position:					relative;
	float:						left;
	width:						710px;
	height:						auto;
	margin:						0px;
	padding:                	10px 0px 0px 0px;
}

#layermessage .contentbox #messagebox .formline {
	position:					relative;
	clear:						both;
	width:						710px;
	height:						auto;
	margin:						0px;
	padding:                    0px 0px 5px 0px;
}

#layermessage .contentbox #messagebox form label {
	float:						left;
	width:						80px;
	margin:						9px 5px 0px 0px;
	text-align:					right;
	font: 						11px Tahoma, Geneva, Verdana, Arial, Helvetica, sans-serif;
	font-weight:				normal;
	color:						#323232;
}

#layermessage .contentbox #messagebox form div.field {
	float:						left;
	width: 						620px;
	height: 					30px;
	margin:						0px 4px 0px 0px;
	padding:	 				0px;
	background:					url(../../images/popup-message-assets.gif) no-repeat 0px 0px;
}

#layermessage .contentbox #messagebox form input {
	width: 						600px;
	margin:						8px 10px 6px 10px;
	padding:	 				0px;
	border: 					none;
	background:					none;
	line-height:				16px;
	font: 						11px Tahoma, Geneva, Verdana, Arial, Helvetica, sans-serif;
	color:						#000000;
}

#layermessage .contentbox #messagebox form div.area {
	position:					relative;
	float:						left;
	width: 						620px;
	height: 					122px;
	margin:						0px 0px 5px 0px;
	padding:	 				0px;
	background:					url(../../images/popup-message-assets.gif) no-repeat 0px -30px;
}

#layermessage .contentbox #messagebox form textarea {
	width: 						600px;
	height: 					104px;
	margin:						9px 10px 9px 10px;
	padding:	 				0px;
	border: 					none;
	background:					none;
	line-height:				13px;
	font: 						11px Tahoma, Geneva, Verdana, Arial, Helvetica, sans-serif;
	color:						#000000;
}

#layermessage .contentbox #messagebox form input.sendButton {
	float:						left;
	width: 						80px;
    height: 					30px;
	margin:						5px 0px 0px 315px;
	padding:	 				0px;
    border: 					none;
	background:					url(../../images/popup-message-assets.gif) no-repeat;
	background-position:		0px -160px;
	text-indent:				-5555px;	
	cursor: 					pointer;
}

#layermessage .contentbox #messagebox form input.sendButton:hover, 
#layermessage .contentbox #messagebox form input.sendButton:active {
	background-position:		-80px -160px;
}