html,body
{
height:100%;
width: 1000px;
font-family:Verdana, Geneva, sans-serif;
}


#mask {
	display: none;
	background: #000; 
	position: fixed; 
	left: 0; top: 0; 
	width: 100%; height: 100%;
	opacity: 0.5;
	z-index: 999;
	
}

.pglogo {
	display:block; 
	margin:10px auto; 
	cursor:pointer;
}
a img
{
border:0px;
}

#container
{
width:90%;
margin:10px auto;
visibility:hidden;
}

#container #artistname {
	display: block; z-index:1000; font-size: 90%; font-weight: bold; padding: 10px; background-color: #048ABF; color: #ffffff; opacity: .5; font-family: 'Rock Salt', cursive;text-transform:uppercase;
}

#titleContainer
{
margin:10px auto 15px auto;
position:relative; 
top:10px;
width:800px;
}
	#titleContainer h1
	{
	margin:0 auto;
	padding:0px;
	/*font-family:"Strait", Arial, Helvetica, sans-serif;*/
	font-size:200%;
	font-weight:normal;
	text-align:center;width: 70%;
	font-family: 'Rock Salt', cursive;
	}
	
	#titleContainer h2
	{
	margin:10px auto;
	padding:0px;
	font-size:20pt;
	font-weight:normal;
	text-align:center;
	width: 80%;
	}
	
	#titleContainer p
	{
	clear:both;
	width:100%;
	margin:10px 0px;
	padding:0px;
	/*font-family:"Strait", Arial, Helvetica, sans-serif;*/
	font-weight:normal;
	text-align:center;
	float: left;
	}
	
.thumbnail
{
width:200px;/*230*/
height:200px;
margin:10px;
-moz-border-radius: 5px;
border-radius: 5px;
background-color:orange;
float:left;
display:block;
cursor:pointer;
box-shadow:0px 2px 10px gray;
-moz-box-shadow: 0px 2px 10px gray; /* Firefox */
-webkit-box-shadow: 0px 2px 10px gray; /* Safari, Chrome */
}

	
	
	.thumbnail img
	{
	

	}
	
					
	.thumbnail .boxcaption{  
    float: left;  
    position: absolute;  
    background: #000;  
    height: 100px;  
    width: 100%;  
    opacity: .8;  
    /* For IE 5-7 */  
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);  
    /* For IE 8 */  
    -MS-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";  
    } 
	
	.thumbnail .captionfull .boxcaption {  
		top: 260;  
		left: 0;  
	}  
	.thumbnail .caption .boxcaption {  
		top: 220;  
		left: 0;  
	} 
	
	.boxcaption{ 
				float: left; 
				position: absolute; 
				background: #000; 
				height: 100px; 
				width: 100%; 
				opacity: .8; 
				/* For IE 5-7 */
				filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
				/* For IE 8 */
				-MS-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
 			}
 				.captionfull .boxcaption {
 					top: 260px;/*260*/
 					left: 0;
 				}  
.thumbnail.big
	{
	/*width:730px;*/
	width:100%;
	height:auto;
	background-color:white;
	cursor:default;
	padding-bottom: 20px;
	
	}
	
	
	
		.thumbnail.big p
		{
		padding:5px 10px 10px 10px;
		margin:0;
		font-family: Helvetica, Arial, san-serif;
		color: #434343;
		font-size:10pt;
		max-height:300px;
		overflow:auto;
		}
		
		.thumbnail.big h1
		{
		padding:1%;
		margin:0px;
		font-family:"Dosis", Helvetica, Arial, sans-serif;
		text-transform:uppercase;
		font-weight:normal;
		}
		
		.thumbnail.big img
		{
			width:100%;
			
		}
		
		
		
		.thumbnail.big.photo
		{
		max-width:750px;
		min-width:230px;
		/*max-height:700px;*/
		height: auto;
		/* from popup*/
		position: absolute;
		/*top: 20px; left: 25%;*/
		z-index: 99999;
		/* end popup */
		}
		

			
			
			
			.thumbnail.big.photo .storyPane, .thumbnail.big.video .storyPane
			{
			width:26%;
			/*padding:1%;*/
			padding: 10px;
			float:right;
			min-height:350px;
			}
			
				.example {
					font-weight:500;
					margin-bottom: 5px;
				}
				.thumbnail.big.photo .storyPane .portrait, .thumbnail.big.video .storyPane .portrait
				{
					width:100%;
					height:150px;
					background-color:red;
					margin:auto;
					margin-bottom:10px;
					/*box-shadow:0px 2px 10px gray;
					-moz-box-shadow: 0px 2px 10px gray; 
    				-webkit-box-shadow: 0px 2px 10px gray;  */
				}
			
				.thumbnail.big.photo .storyPane .bio, .thumbnail.big.video .storyPane .bio
				{
				font-family:"Dosis", Helvetica, Arial, sans-serif;
				font-size:9pt;
				line-height:1.3em;
				margin-bottom:10px
				}
				
				.thumbnail.big.photo .storyPane .play, .thumbnail.big.video .storyPane .play
				{
				font-family: 'Dosis', Helvetica, Arial, sans-serif;
				text-transform:uppercase;
				font-size:11pt;
				cursor:pointer;
				margin-bottom:35px;
				}
			
				
					
			.thumbnail.big.photo .photoPane, .thumbnail.big.video .photoPane
			{
			width:70%;
			/*padding:1%;*/
			padding-left: 10px;
			float:left;
			}
			
			.thumbnail.big.photo .photoPane, .thumbnail.big.video .photoPane p
			{
			font-family: 'Dosis', Helvetica, Arial, sans-serif;
			
			}
			
		
			
			.bigPicture { 
			margin-bottom: 10px;
			box-shadow:0px 2px 10px gray;
					-moz-box-shadow: 0px 2px 10px gray; /* Firefox */
    				-webkit-box-shadow: 0px 2px 10px gray; /* Safari, Chrome */
			}
			
			
		.thumbnail.big.title
		{
		height: 420px;
		}
	
		.thumbnail.big.video
		{
		max-width:730px;
		}
		
		.thumbnail.big.story
		{
		width:97%;
		padding:1%;
		}
		
			.thumbnail.big.story .storyPane
			{
			width:48%;
			float:right;
			}
				.thumbnail.big.story .storyPane h1
				{
				margin:0px;
				padding:0px;
				font-family: Georgia, serif;
				font-weight:normal;
				}
				
				.thumbnail.big.story .storyPane p
				{
				font-family:Georgia, serif;
				line-height:1.5em;
				}
				
					.thumbnail.big.story .storyPane p .lead
					{
					font-size:14pt;
					}
				
				.thumbnail.big.story .storyPane a
				{
					font-family:'Dosis', Helvetica, Arial, sans-serif;
					text-transform:uppercase;
					color:black;
				}
			
			.thumbnail.big.story .photoPane 
			{
			width:48%;
			padding-right:1%
			border-right:1px solid lightgray;
			float:left;
			}
				.thumbnail.big.story .photoPane img
				{
				border:1px solid lightgray;
				box-shadow:0px 5px 5px lightgray;
				-moz-box-shadow: 0px 5px 5px lightgray; /* Firefox */
    			-webkit-box-shadow: 0px 5px 5px lightgray; /* Safari, Chrome */}
				}
								
		


.blackout
{
position:fixed;
width:100%;
height:100%;
top:0;
left:0;
background-color:black;
background-color:rgba(0,0,0,.8);
z-index:999;
}

.blackout img
{
position:absolute;
margin:auto;
top:5%;
}

.close, .next, .prev
{
width:26px;
height:26px;
position:absolute;

cursor:pointer;
}
		
	.close
	{
	background: url('images/close.png') center center;
	left:98%;
	top:-13px;
	}
		
	.next
	{
	background: url('images/right.png') center center;
	width:26px;
	height:26px;
	position:absolute;
	right:5px;
	bottom:2px;
	cursor:pointer;
	}
		
	.prev
	{
	background: url('images/left.png') center center;
	width:26px;
	height:26px;
	position:absolute;
	right:36px;
	bottom:2px;
	cursor:pointer;
	}

.share
{
font-family: 'Dosis', Helvetica, Arial, sans-serif;
text-transform:uppercase;
font-size:11pt;
position:absolute;
bottom:2px;
right:77px;
}
				
	.share .button
	{
		width:26px;
		height:26px;
		margin-left:5px;
		float:left;
		background: center center no-repeat;
	}
	
.credit
{
font-family: Helvetica, Arial, sans-serif;
font-size:10pt;
color:gray;
margin:10px auto;
text-align:center;
}

.credit a
{
color:black;
}