/*
	SELFLESS PORTRAITS
	RALLY INTERACTIVE
*/

/*general*/
.preloader{ background: url(../images/preloader.gif); width:64px; height:64px; }
.periwinkle{ visibility: hidden; }

body{ 
	font-family:  "proxima-nova", sans-serif;
	color: #0c0c0b; 
	font-size: 12px;
	letter-spacing: 0.5px; 
	}

a, a:hover{
	color: #0c0c0b;
	text-decoration: none;
	}
	
#archive-mode{
	padding: 10px;
	margin: 0 auto;
	font-size: 14px;
	width: 250px;
	line-height: 22px;
	color: #727272; 
	}	



/*layout*/
#wrapper{
	width: 1016px;
	margin: 0px auto 0 auto;
	min-height: 1000px;
	}
	footer{
		-webkit-box-shadow: 0px -3px 3px 1px rgba(0,0,0,0.1);
		-moz-box-shadow: 0px -3px 3px 1px rgba(0,0,0,0.1);
		box-shadow: 0px -3px 3px 1px rgba(0,0,0,0.1);
		width: 100%;
		bottom: 0px;
		z-index: 9999;
		height: 45px;
		background: #ffffff;
		color: #666;
		font-size: 10px;
		}
		#footer-inner{
			width: 1016px;
			margin: 0px auto;
			clear: both;
			}
		#donate{
			float: left;
			margin: 10px 0 0 0;
			}
		#donate-text{
			float:left;
			margin: 15px 0 0 15px;
			font-size: 14px;
			color: black;
			}
		#footer-text{
			float: right;
			margin: 15px 0 0 0;
			}
	#header-wrapper{
		margin: 0 0 0 0;
		background: white;
		width: 1016px;
		height: 220px;
		position: relative;
		}
	header{
		margin: 0px;
		height: 213px;
		background: url(../images/top-line.png) no-repeat 0px 212px;
		}
		#logo{
			position: absolute;
			top: 27px;
			left: 0px;
			}
		#social{
			position: absolute;
			top: 33px;
			right: 0px;
			}
			#social div{
				float: left;
				}
				#twitter{
					width: 80px;
					margin: 0 0 0 10px;
					}
			#social div:first-child{
				}	
			#fb-user{
				font-size: 11px;
				}
				#fb-user img{ 
					width: 20px;
					height: 20px;
					float: left;
					margin: 0 10px 0 0;
					}
				#fb-user-name{
					float: left;
					line-height: 20px;
					margin: 0 20px 0 0;					
					}
				
		#main-nav{
			position: absolute;
			top: 170px;
			right: 0px;
			display: none;
			}
			#main-nav li{
				cursor: pointer;
				font-size: 15px;
				font-weight: 600;
				float: right;
				margin: 0 0px 0 23px;
				}
				#main-nav li:last-child{
					margin: 0;
					}
				#main-nav li a{
					display: block;
					height: 32px;
					padding: 0;					
					text-decoration: none;
					}
					
					#main-nav li a:hover{
						text-decoration: none;
						background: url(../images/nav-underline.jpg) no-repeat;
						background-position-y: 15px;
						background-position: 0px 15px;
						}

					#main-nav .selected{
						text-decoration: none;
						background: url(../images/nav-underline.jpg) no-repeat;
						background-position-y: 15px;
						background-position: 0px 15px;
						}
		#content{
			width: 100%;
			overflow: auto;
			padding-bottom: 40px;
			}
/*-------------------------------------------------------
CANVAS POP AND ORDERING PRINTS
--------------------------------------------------------*/

#full-content h1{
	font-weight: 600;
	font-size: 52px;
	line-height: 52px;
	letter-spacing: 1.1px;
	margin: 0;
	}
#full-content p{
	font-size: 16px;
	line-height: 20px;
	margin: 15px 0;
	font-weight: 100;
	}

#ordering-left{
	float: left;
	width: 536px;
	}
#ordering-right{
	float:right;
	width: 430px;
	}
	#ordering-right h1{
		font-weight: 600;
		font-size: 52px;
		line-height: 52px;
		letter-spacing: 1.1px;
		margin: 0;
		}
	#ordering-right p{
		font-size: 16px;
		line-height: 20px;
		margin: 15px 0;
		font-weight: 100;
		}
	#ordering-right p a{
		text-decoration: underline;
		}	

#closePop{
	background: url(../images/btn.close.png) no-repeat;
	width: 35px;
	height:35px;
	z-index: 1001;
	position: fixed;
	top: 30px;
	cursor: pointer;
	}			

/*ABOUT LAYOUT*/

#panel1-overlay{
	position: absolute;
	z-index: 99;
	width: 700px;
	height: 280px;
	background: rgba(255,255,255,0.9);
	color: black;
	top: 455px;
	left: 158px;
	}
	#panel1-overlay ul{
		margin: 40px 0 0 70px;
		list-style-type: disc;
		font-size: 43px;
		font-weight: 400;
		}
	#panel1-overlay-blurb{
		font-size: 20px;
		font-weight: 400;
		text-align: center;
		width: 700px;
		font-style: italic;
		letter-spacing: 0.2px;
		}

.about-panel{
	position: relative;
	width: 100%;
	min-height: 820px;
	border-bottom: 1px solid silver;
	}
.about-panel img{
	margin: 80px 0 60px 0;
	}
.about-quote{
	font-weight: 600;
	font-size: 26px;
	line-height: 34px;
	width: 1016px;
	text-align: center;
	}
.about-logo{
	margin: -50px auto 10px 0 !important;
	text-align: center;
	width: 1016px;
	}
	
#panel1{
	font-weight: 100;
	font-size: 41px;
	line-height: 52px;
	letter-spacing: 1.1px;
	margin: 43px 0 0 0;
	}
#how-text a{
	text-decoration: underline;
	}
#how-text{
	font-weight: 100;
	font-size: 20px;
	line-height: 24px;
	width: 495px;
	margin: 40px 0 0 0;
	float: left;
}
#about-text{
	margin: 30px 0 0 0;
	overflow: auto;
	float: none;
	}
#how-text p, #about-text p{
	margin: 0px 0 20px 0;
}
#credits{
	float: right;
	width: 400px;
	font-size: 20px;
	line-height: 24px;
	margin: 40px 0 0 0;
	}
#about-credits a{
	text-decoration: underline;
	}
#about-contact a{
	text-decoration: underline;
	}
		
/*home scroll*/
#overlay{ 
	z-index: 100;
	line-height: 65px;
	position: absolute;
	top: 120px;
	width: 1016px;
	}
	#text-block{
		text-align: center;
		width: 100%;
		line-height: 55px;
		font-size: 42px;
		font-weight: bold;
		letter-spacing: 3px;
		color: white;
		text-shadow: 3px 3px 6px #333;
		}
	#fb-auth{
		cursor: pointer;
		margin: 30px auto;
		-webkit-border-radius: 23px;
		-moz-border-radius: 23px;
		border-radius: 23px;
		background: #f4d764;
		width: 193px;
		height: 52px;
		text-align: center;
		line-height: 55px;
		font-size: 16px;
		font-weight: bold;
		letter-spacing: 3px;
		}
	
#scroll-wrapper{
	position: relative;
	height: 508px;
	margin: 40px 0 0 0;
	}	
#scroll-mask{
	position: relative;
	width: 100%;
	height: 508px;
	overflow: hidden;
	}
	#scroller{
		width: 9999px;
		height: 508px;
		background: #000;
		}
		.scroll-item{
			left: 0px;
			width: 1016px;
			height: 508px;
			position: absolute;
			display: none;
			}
			.merged{
				position: absolute;
				left: 0px;
				width: 1016px;
				height: 508px;
				opacity: 0.9;
				}
			.scroll-item figcaption{
				height: 24px;
				font-size: 13px;
				font-weight: bold;
				padding: 6px 0 0 24px;
				color: #fff;
				letter-spacing: 1px;
				}
			.scroll-item #subject-name{
				z-index: 10;
				background: url(../images/icon-profilepic.png) no-repeat;
				position: absolute;
				top: 475px;
				left: 20px;				
				}
			.scroll-item #artist-name{
				z-index: 11;
				background: url(../images/icon-pencil.png) no-repeat;
				position: absolute;
				top: 475px;
				left: 528px;				
				}
			.scroll-item a{
				color: #fff;
				}
	
/*-------------------------------------------------------
PARTICIPATE 
--------------------------------------------------------*/
#participate-steps{
	position: relative;
	height: 450px;
	margin: 0 0 150px 0;		
}
.progress-bar{
	background: #f2f4f8;
	height: 66px;
	width: 1016px;
	margin: 15px 0 0 0;
	}
	#progress-title{
		line-height: 66px;
		font-size: 30px;
		margin: 0 0 0 370px;
		}
	#step-one{
		background: url(../images/progressbar-step1.png);
		}
	
	#step-two{
		background: url(../images/progressbar-step2.png);
		}
	
	#step-three{
		background: url(../images/progressbar-step3.png);
		}			

#progress-note{
	margin: 10px 0 34px 0;
	letter-spacing: 0.5px;
	}

/*---------------------------------------------------------
step boxes under progress bar
*/
#step-wrapper-one{
	position: absolute;
	left: 0px;
	top: 0px;
	overflow: hidden;
	}		
#step-wrapper-two{
	position: absolute;
	left: 342px;
	top: 0px;
	overflow: hidden;
	}
#step-wrapper-three{
	position: absolute;
	left: 684px;
	top: 0px;
	overflow: hidden;
	width: 330px;
	height: 450px;
	}
#step-instructions{
	width: 330px;
	}
.step{ 
	width: 330px;
	height: 330px;
	overflow: hidden;
	background: #f2f4f8;
	}
	.step-complete img{
		opacity: 0.3;
		position: absolute;
		}
	.step-title{
		position: absolute;
		font-size: 48px;
		line-height: 330px;
		color: #e4e6e9;
		font-weight: 600;
		width: 330px;
		text-align: center;
		}
	.silhouette{
		background: url(../images/step1-box-bkg.png) no-repeat;
		}
	
/*step 1*/	
#step-box-one{
	display: block;
	}
	#btn-edit-profile{
		cursor: pointer;
		padding: 5px;
		font-size: 12px;
		position: absolute;
		top: 270px;
		left: 110px;
		}
		.visible{
			visibility: visible;
			}
		.hidden{
			visibility: hidden;
			}
	

/*step 2*/		
#step-box-two{
	display: block;
	}	
	#error-box{
		width: 280px;
		font-size: 16px;
		line-height: 24px;
		margin: 80px auto;
		text-align: center;
		}
#btn-submit-step2{
	float: right;
	margin: 5px;
	}	
/*step 3*/	
.hover{
	background-position-y: -330px;
	background-position: 0px -330px;
	}		
#step-box-three{
	margin: 0;
	}
	#btn-rotate{
		width:35px;
		height: 35px;
		cursor: pointer;
		}
	#file-drag{ 
		width:330px;
		height: 330px;
		text-align: center;
		display: block;
		overflow: hidden;
		}
	#file-drag.hover{
		
		}
	#upload-text{
		font-size: 18px;
		font-weight: 600;
		line-height: 24px;
		}
	#btn-upload-portrait{
		margin: 130px 0 5px 0;
		cursor: pointer;
		padding: 5px;
		font-size: 12px;
		}
	#input-upload-portrait{
		position: absolute;
		font-size: 18px;
		top: 120px;
		width: 150px;
		visibility: hidden;
		}
	#step-instructions{
		font-size: 14px;
		font-weight: 600;
		line-height: 16px;
		margin: 15px 0;
		}
	#step-instructions p a{
		text-decoration: underline;
		}
	.hidden
		{
		visibility: hidden;
		}
	.fakefile{
		margin: 120px 0 20px 0;
		cursor: pointer;
		}
	#step3-btn-submit{
		float: right;
		visibility: hidden;
		}
	#step3-btn-change{
		float: left;
		visibility: hidden;
		}
	#loader-graphic{
		position: absolute;
		top: 140px;
		left: 130px;
		width: 64px;
		}
	#percentage{
		width: 64px;
		margin: 80px auto;
		font-size: 16px;
		color: #7a8ab6;
		text-align: center;
		}
	#terms-and-conditions{
		cursor: pointer;
		text-decoration: underline;
		position: relative;
		}
	#terms-box{
		width: 400px;
		height: 250px;
		background: url(../images/terms-box.png) no-repeat;
		position: absolute;
		top: 113px;
		left: 600px;
		z-index: 99999;
		}
		#terms-box #terms-content{
			margin: 110px 0 0 20px;
			width: 360px;
			font-size: 13px;
			}
			
/*-------------------------------------------------------
OVERLAY CONGRATS
--------------------------------------------------------*/
#congrats-box-wrapper{
	z-index: 999;
	width: 720px;
	height: 500px;
	background: white;
	}
	#congrats-box{
		position: relative;	
		}
	#congrats-box #close-x{
		width: 16px;
		height: 16px;
		background: url(../images/icon.close-x.png) no-repeat;
		float: right;
		margin: 0 20px 0 0;
		cursor: pointer;
		}
	#congrats-box #selfless-logo{
		margin: 20px auto;
		background: url(../images/selfless-logo-md.png) no-repeat;
		width: 307px;
		height: 146px;		
		}
	#congrats-box p{
		font-size: 28px;
		line-height: 36px;
		margin: 22px auto;
		width: 630px;
		}
		#congrats-box p a{
			text-decoration: underline;
			}

/*-------------------------------------------------------
PROFILE TOOL
--------------------------------------------------------*/	
#profile-select-tool{
	width: 480px;
	height: 580px;
	z-index: 999;
	position: absolute; top: 0px; left:0px;
	background: #f2f4f8;
	}
	#profile-preloader{
		width: 64px;
		height: 64px;
		z-index: 99;
		margin: 100px auto;
		background: url(../images/preloader.gif) no-repeat;
		}
	#profile-select-mask{
		position: relative;
		width: 480px;
		height: 580px;
		overflow: hidden;
		}
		#loader-dialog{
			width: 250px; 
			height: 200px;
			margin: 120px auto;
			}
		#loader-dialog p{
			text-align: center;
			font-size: 14px;
			line-height: 18px;
			margin: 20px auto;			
			}	
		#profile-select-slider{
			left: 0px;
			position: absolute;
			width: 960px;
			height: 580px;
			}
		#profile-image-crop{
			width: 480px;
			height: 520px;
			margin: 0;
			float: right;
			}
			#image-crop{
				width: 480px;
				height: 480px;
				background: #000;
				position: relative;
				}
			#crop{
				}
		#profile-gallery{
			width: 480px;
			height: 520px;
			margin: 0;
			float: left;
			}
			.gallery-header-top{
				background: #7a89ba;
				width: 480px;
				height: 30px;
				color: white;
				font-size: 14px;
				line-height: 30px;
				text-indent: 5px;
				}
			.gallery-header-lower{
				background: #f2f4f8;
				height: 30px;
				width: 480px;
				font-size: 14px;
				color: black;
				line-height: 30px;
				text-indent: 5px;
				border-bottom: 1px solid #7a89ba;
				}
			#profile-grid{
				width: 480px;
				height: 480px;
				overflow: scroll;
				}
				.profile-select-thumb-wrapper{
					width: 150px;
					height: 150px;
					overflow: hidden;
					float: left;
					border: 1px solid silver;
					margin: 1px;
					}
				.profile-select-thumb-image{
					cursor: pointer;
					}
			#btn-change-profile{
				padding: 5px;
				margin: 10px 0 0 0;
				font-size: 12px;
				}
			#btn-choose-profile{
				padding: 5px;
				position: absolute;
				top: 150px;
				left: 110px;
				font-size: 12px;
				}
			#btn-cancel{
				padding: 5px;
				float: right;
				margin: 5px;
				font-size: 12px;
				}
			#btn-submit{
				float: right;
				margin: 5px;
				}
			#btn-back{
				float: left;
				margin: 5px;
				}
/*-------------------------------------------------------
GALLERY DISPLAY
--------------------------------------------------------*/



#search-friends{
	display: none;
	width: 216px;
	height: 28px;
	background: url(../images/search-background.png) no-repeat;
	position: absolute;
	top: 15px;
	left: 240px;
	}
	#search-input input{
		line-height: 28px;
		padding: 0 5px;
		z-index: 99;
		width: 190px;
		background: none;
		border: none;
		outline: 0;	
		color: #a8a6a6;	
		}
	#search-input:focus{
		color: #000;
		border: none;
		outline: 0;
		}	
	#search-icon{
		width: 31px;
		height: 27px;
		position: absolute;
		top: 0px;
		right: 0px;
		background: url(../images/icon.search.png) no-repeat;
		cursor: pointer;
		}

.filter-title{
	line-height: 60px;
	margin: 0 0 0 10px;
	}

#friends-toggle{
	cursor: pointer;
	position: absolute;
	top: 15px;
	left: 120px;
	width: 66px;
	height: 24px;
	border-radius: 4px;
	background: #6f6e6d;
	border: 1px solid #455389;
	}
#friends-toggle.on{
	background: #7a8ab6;
	}

#friends-toggle-on{
	position: absolute;
	color: white;
	top: 7px;
	left: 5px;
	z-index: 9;
	}	
#friends-toggle-off{
	position: absolute;
	color: white;
	top: 7px;
	left: 36px;
	z-index: 10;
	}	
#friends-toggle-btn{
	width: 33px;
	height: 24px;
	position: absolute;
	top: 0px;
	left: 0px;
	background: url(../images/friends-toggle-btn.png) no-repeat;
	z-index: 99;
	}	


#artist-dropdown-wrapper2{
	position: absolute;
	top: 0px;
	left: 500px;
	}
#subject-dropdown-wrapper2{
	position: absolute;
	top: 0px;
	left: 670px;
	}
	
#gallery-filter{
	color: #48494a;
	height: 60px;
	background: #f2f4f8;
	position: absolute;
	
	width: 1016px;
	top: 237px;
	z-index: 999;
	font-size: 13px;
	}
	#gallery-filter #btn-return{
		cursor: pointer;
		float: left;
		margin: 23px 0 0 20px;
		background: url(../images/icon.return-arrow.png) no-repeat;
		background-position-y: 0px;
		background-position: 0px 0px;
		text-indent: 26px; 
		}			
	#filter-title{
		float: left;
		margin: 20px;
		}
	#gallery-filter #subject-dropdown-wrapper{
		float: left;
		margin: 0 0 0 43px;
		height: 60px;	
		width: 340px;
		}
	#gallery-filter #artist-dropdown-wrapper{
		float: left;
		margin: 0 0 0 0px;
		height: 60px;	
		width: 340px;
		}
	#gallery-filter .dropdown{
		width: 182px;
		float: right;
		height: 58px;
		margin: 14px 0 0 0;
		}
		.dropdown-title{
			float: right;
			margin: 0 20px 0 0;
			height: 60px;
			color: #48494a;
			line-height: 60px;
			}
	#profile-filter{
			width: 300px;
			float: right;
			margin: 12px 0 0 0;
			}	
	#gallery-filter #dropdown-profile{
			float: right;
			margin: 0px 0 0 20px; 
			height: 58px;
			width: 182px;
			}
		#dropdown-left-title{
			height: 58px;
			margin: 0 0 0px 0;
			line-height: 38px;
			float: left;
			}
			
		#gallery-filter #profile-title{
			float: left;
			line-height: 60px;
			margin: 0 0 0 20px;
			}
		#sort-toggle{
		cursor: pointer;
		right: 20px;
		top: 24px;
		position: absolute;
		color: #48494a;
		width: 120px;
		}
		#sort-toggle span{
			color: #b0b0b0;	
			cursor: pointer;
			}
		#sort-toggle .selected{
			color: #48494a;
			}
		
	#view-toggle{
		cursor: pointer;
		position: absolute;
		right: 30px;
		top: 21px;
		width: 50px;
		height: 18px;
		}
		#grid-small{
			float: left;
			cursor: pointer;
			width: 18px;
			height: 18px;
			background: url(../images/icon.grid-small.png) no-repeat 0px -18px;
			}	
		#grid-small:hover{
			background-position-y: 0px;
			background-position: 0px 0px;
			}
		#grid-large{
			float: right;
			cursor: pointer;
			width: 18px;
			height: 18px;
			background: url(../images/icon.grid-large.png) no-repeat 0px -18px;
			}
		#grid-large:hover{
			background-position-y: 0px;	
			background-position: 0px 0px;
			}
		#view-toggle .grid-selected{
				background-position-y: 0px;
				background-position: 0px 0px;
				}

					
#no-portraits{
	width: 400px;
	font-size: 14px;
	text-align: center;	
	margin: 105px auto;
	}
#back-to-gallery{
	margin: 10px 0 0 0;
	}
#portrait-content{
	width: 1016px;
	height: 508px;
	position: relative;
	top: 105px;
	}
#gallery-content{	
	position: relative;
	width: 1016px;
	top: 104px;
	}
	.gallery-item-large{
		position: relative;
		width: 1016px;
		height: 508px;
		margin: 0 0 100px 0;
		cursor: pointer;
		}
		.merged-image{
			position: absolute;
			left:0px;
			}
	.gallery-item-large-inline{
		height: 508px;
		width: 1016px;
		position: absolute;
		top: 195px;
		z-index: 99999999;
		}
		.gallery-item-large-inline #close-btn{
			z-index: 999;
			width: 35px;
			height: 35px;
			position: absolute;
			top: 0px;
			right: 0px;
			background: url(../images/btn.close.png) no-repeat;
			cursor: pointer;
			}
			.gallery-item-large-inline #canvas-pop-btn{
			z-index: 998;
			width: 199px;
			height: 36px;
			position: absolute;
			top: 0px;
			right: 40px;
			background: url(../images/btn.order-prints.png) no-repeat;
			cursor: pointer;
			border: none;
			}
		.gallery-item-large-inline #canvas-pop-btn:focus{
			border: none;
			}
		#profile-large #canvas-pop-btn{
			z-index: 998;
			width: 199px;
			height: 36px;
			position: absolute;
			top: 0px;
			right: 0px;
			background: url(../images/btn.order-prints.png) no-repeat;
			cursor: pointer;
			border: none;
			}
		#profile-large #canvas-pop-btn:focus{
			border: none;
			}
			
			
		.gallery-item-large-inline #info-bar{
			display: none;
			}
	#gallery-item{
		height: 508px;
		width: 1016px;
		position: relative;
		}
		#profile-large{
			position: absolute;
			left: 0px;
			}
		#portrait-large{
			position: absolute;
			right: 0px;
			}
		#gallery-item-large .merged-image img{
			display: none;
			}
		/*------------------------------------------------
			IMAGE DETAIL INFO BAR
		*/	
			
		#info-bar{
			color: white;
			position: absolute;
			bottom: 0px;
			z-index: 99;
			width: 1016px;
			height: 50px;
			background-color: rgba(122,138,182, 0.8);
			display: none;
			}
			#info-bar .social-media{
				width: 330px;
				position: absolute;
				bottom: 10px;
				right: 20px;
				}
				
				.sharetip{
					width: 67px;
					height: 51px;
					background: url(../images/share-link.png) no-repeat;
					position: absolute;
					top: -51px;
					left: -15px;
					}
				
				#link-box{
					background: url(../images/link-box.png) no-repeat;
					width: 410px;
					height: 120px;
					position: absolute;
					top: -120px;
					left: -360px;
					z-index: 99;
					}
					#link-box-text{
						position: absolute;
						top: 20px;
						left: 20px;
						font-size: 18px;
						color: #fff;
						}
						
					#link-box-select{
						width: 370px;
						position: absolute;
						top: 50px;
						left: 20px;
						font-size: 16px;
						color: black;
						}	
					
						
				.social-media figure{
					position: relative;
					cursor: pointer;
					float: right;
					margin: 0 5px 0 0;
					}
				#info-bar #fb-like-detail{
					float: left;
					margin: 3px 10px 0 0;
					}
				#info-bar #twitter-detail{
					float:left;
					margin: 3px;		
					}
			#info-bar #subject-name{
				cursor: pointer;
				float: left;
				margin: 13px;
				height: 24px;
				letter-spacing: 0.5px;
				line-height: 24px;
				background: url(../images/icon-profilepic.png) no-repeat;
				text-indent: 30px;
				font-size: 12px;
				display: block;	
				}
			#info-bar #artist-name{
				cursor: pointer;
				float: left;
				margin: 13px;
				height: 24px;
				letter-spacing: 0.5px;
				line-height: 24px;
				background: url(../images/icon-pencil.png) no-repeat;
				text-indent: 30px;
				font-size: 12px;
				display: block;
				}
			#artist-name-click{
				cursor: pointer;
				z-index: 10;
				float: left;
				}
			#subject-name-click{
				cursor: pointer;
				z-index: 10;
				float: left;
				}
			.artist-name-click{
				cursor: pointer;
				z-index: 10;
				float: left;
				}
			.subject-name-click{
				cursor: pointer;
				z-index: 10;
				float: left;
				}
	
	#gallery-preloader{
		width: 64px;
		height: 64px;
		z-index: 99;
		position: absolute;
		top: 100px;
		left: 475px;
		background: url(../images/preloader.gif) no-repeat;
		}				
	.gallery-small{
		width: 158px;
		height: 158px;
		}
	.gallery-large{
		width: 508px;
		height: 508px;
		}
	#gallery-grid{
		position: relative;
		min-height: 800px;
		z-index: 1;
		height: auto;
		padding-bottom: 50px;
		}
	#gallery-more-button{
		clear: both;
		background: #f2f4f8;
		margin: 0 auto;
		width: 600px;
		height: 42px;
		font-size: 18px;
		color: #48494a;
		line-height: 42px;
		text-align: center;
		cursor: pointer;
		}
		
	.gallery-row{
		position: relative;
		width: 1016px;
		height: 155px;
		margin:0 0 43px 0;
		}
						
	.gallery-item-small{
		width: 310px;
		height: 155px;
		float: left;
		position: relative;
		margin: 0px 43px 0px 0;
		cursor: pointer;
		}
		
	.gallery-item-small:hover{
		z-index: 99999999;
		}
	.gallery-item-small .merged-image img{
		}
	.gallery-item-small:nth-child(3n+3){
		margin: 0px 0 43px 0;
		}
		.hover-box{
			color: white;
			position: absolute;
			top: 0px;
			left: 0px;
			width: 310px;
			height: 155px;
			z-index: 100;
			background-color: rgba(122,138,182, 0.8);
			opacity: 0;
			}
			.social-media-hover{
				width: 330px;
				position: absolute;
				bottom: 0px;
				height: 36px;
				right: 0px;
				}
				.social-media-hover #twitter{
					float: left;
					margin: 0 0 0 20px;
				}
				.social-media-hover .gallery-small-fb{
					float: left;
					margin: 0 0 0 20px;
				}	
				.social-media-hover figure{
					cursor: pointer;
					float: right;
					margin: 0 5px 0 0;
					}
				.subject-name{
				position: absolute;
				top: 15px;
				left: 15px;
				width: 290px;
				height: 24px;
				line-height: 24px;
				background: url(../images/icon-profilepic.png) no-repeat;
				text-indent: 30px;
				font-size: 12px;
				z-index: 999;	
				}
			.artist-name{
				position: absolute;
				top: 50px;
				left: 15px;
				width: 290px;
				height: 24px;
				line-height: 24px;
				background: url(../images/icon-pencil.png) no-repeat;
				text-indent: 30px;
				font-size: 12px;
				z-index: 1000;
				}
			.subject-name-large{
				cursor: pointer;
				float: left;
				width: 310px;
				margin: 15px 0 0 15px;
				height: 24px;
				line-height: 24px;
				background: url(../images/icon-profilepic.png) no-repeat;
				text-indent: 30px;
				font-size: 12px;	
				}
			.artist-name-large{
				cursor: pointer;
				float: left;
				width: 310px;
				margin: 15px 0 0 15px;
				height: 24px;
				line-height: 24px;
				background: url(../images/icon-pencil.png) no-repeat;
				text-indent: 30px;
				font-size: 12px;
				}
			.fb-add-friend{
				z-index: 999;
				float: right; 
				}
		.subject-images{
			position: absolute;
			top: 0px;
			left:0px;
			}
		.portrait-image{
			position: absolute;
			top: 0px;
			left: 155px;
			}
#gallery-nav-bar{
	clear: both;
	background: #7a89ba;
	width: 600px;
	height: 42px;
	font-size: 18px;
	color: #fff;
	line-height: 42px;
	text-align: center;
	cursor: pointer;
	display: none; 
	margin: 20px auto 200px auto;
	}

#webby-pv-2014-bug{
	position: absolute;
	bottom:20px;
	right:20px;
	}

#vote-here{
	
	}
	#vote-here #bigbutton{
		display: block;
		font-size: 32px;
		line-height: 100px;
		font-weight: bold;
		width: 300px;
		margin: 20px;
		height: 100px;	
		text-align: center;
		background: #7a8ab6;
		border: 2px solid #485585;
		color: white;	
		}

/*text*/
h1,h2,h3,h4{
	font-weight: 600;
	margin: 10px 0;
	}
.periwinkle-btn{
	cursor: pointer;
	color: #fff;
	background: url(../images/periwinkle-btn-bkg.png) no-repeat;	
	width: 104px;
	height: 30px;
	}
.periwinkle-btn a{
	color: white;
	width: 104px;
	height: 30px;
	display: block;
	line-height: 30px;
	font-size: 12px;
	font-weight: 400;
	letter-spacing: 1.5px;
	text-indent: 7px;
	}
#post-portrait{
	position: absolute;
	top: 16px;
	left: 180px;
}
#post-portrait-inline{
	position: absolute;
	top: 0px;
	left: 0px;
	z-index: 99;
	display: none;
}	
.periwinkle-btn-large{
	cursor: pointer;
	color: #fff;
	background: url(../images/periwinkle-btn-bkg-lg.png) no-repeat;	
	width: 260px;
	height: 30px;	
}
.periwinkle-btn-large a{
	color: white;
	width: 260px;
	height: 30px;
	display: block;
	line-height: 30px;
	font-size: 12px;
	font-weight: 400;
	letter-spacing: 1.5px;
	text-indent: 7px;
	}
.periwinkle-btn-large .next{
	background: url(../images/icon-arrow-white.png) no-repeat;
	background-position: 240px 10px;	
}

.periwinkle-btn .next{
	background: url(../images/icon-arrow-white.png) no-repeat;
	background-position: 87px 10px;	
}
.periwinkle-btn .back{
	background: url(../images/icon-arrow-white-back.png) no-repeat;
	background-position: 4px 10px;
	text-indent: 18px;	
}

.small{
	font-size: 12px;
}
.medium{
	font-size: 24px;
	line-height: 34px;	
}
.large{
	font-size: 32px;
	line-height: 32px;
}


/*misc*/
.fbpdl{
	z-index: 9999999;
	}

select{
	outline: none;
}
.screenOverlay{
	background: #000;
	opacity: 0;
	position: absolute; top: 0; left: 0;
	width: 100%;
	height: 100%;
	z-index: 999;
}