@charset "utf-8";
/*	-------------------------------------------------------------
	CSS - DIANA KRALL GALLERY CSS
	- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
	Filename:		dk_gallery.css
	Date:			Jan 22, 2009
	Author:			Halo Media LLC - http://www.halopowered.com/
	-------------------------------------------------------------	*/

/*	--------------------------------------------------------------------------------------------------------------------------
	nav Styles
	- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -	*/
	ul#nav li#navGallery a {
		background-position:0 -47px;
	}

/*	--------------------------------------------------------------------------------------------------------------------------
	contentHolder Styles
	- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -	*/
	.contentHolder {
		width:943px;
		margin:53px 0 0 0; padding:0 0 0 50px;
	}

/*	--------------------------------------------------------------------------------------------------------------------------
	gallery Styles
	- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -	*/
	#gallery {
		width:968px;
		margin:0 0 28px 0; padding:16px 0 0 0;
		background:url(../../images/bg_headerGallery.jpg) no-repeat;
	}
		#gallery h1#h1Gallery {
			width:143px; height:48px;
			margin:0 0 0 19px;
			background:url(../../images/h1_gallery.png) no-repeat;
			behavior: url("shared/css/iepngfix.htc");
		}
		/*	galleryHolder */
		#gallery .galleryHolder {
			width:585px; height:508px;
			margin:0 18px 0 43px; padding:0 0 0 55px;
			float:left;
			display:inline;
		}
			#gallery .galleryHolder .content {
				width:532px;
				margin:0 0 0 23px;
			}
				#gallery .galleryHolder .content img {
					margin:0 auto;
					display:block;
				}
				#gallery .galleryHolder .content a.btnFullScreen:link, #gallery .galleryHolder .content a.btnFullScreen:active, #gallery .galleryHolder .content a.btnFullScreen:visited {
					width:110px; height:17px;
					margin:7px 0 0 145px;
					background:url(../../images/btn_viewFullScreen.png) no-repeat;
					display:block;
				}
					#gallery .galleryHolder .content a.btnFullScreen:hover {
						background-position:bottom;
					}
				#gallery .galleryHolder .content .prev {
					width:40px;
					float:left;
				}
					#gallery .galleryHolder .content .prev a:link, #gallery .galleryHolder .content .prev a:active, #gallery .galleryHolder .content .prev a:visited {
						width:40px; height:30px;
						margin:174px 0 0 0;
						background:url(../../images/btn_prevGallery.png) no-repeat;
						display:block;
					}
						#gallery .galleryHolder .content .prev a:hover {
							background-position:bottom;
						}
				#gallery .galleryHolder .content .next {
					width:40px;
					float:left;
				}
					#gallery .galleryHolder .content .next a:link, #gallery .galleryHolder .content .next a:active, #gallery .galleryHolder .content .next a:visited {
						width:40px; height:30px;
						margin:174px 0 0 0;
						background:url(../../images/btn_nextGallery.png) no-repeat;
						display:block;
					}
						#gallery .galleryHolder .content .next a:hover {
							background-position:bottom;
						}
						
				#gallery .galleryHolder .content .photo {
					width:420px;
					float:left;
				}
		/*	thumbnails */
		#gallery .scrollable {
			width:220px; height:490px;
			margin:21px 0 0 0;
			background:url(../../images/bg_thumbnail.jpg) no-repeat;
			position:relative;
			overflow:hidden;
		}
			#gallery .scrollable .items {
				height:2000px;
				position:absolute;
				overflow:hidden;
			}
			#gallery .thumbnails .oddCol {
				width:110px; height:400px;
				float:left;
			}
			#gallery .thumbnails .evenCol {
				width:110px; height:400px;
				padding:21px 0 0 0;
				float:left;
			}
			#gallery .scrollable .viewBar {
				width:148px;
				margin:0 auto; padding:0;
			}
				#gallery .scrollable .viewBar a.prev:link, #gallery .scrollable .viewBar a.prev:active, #gallery .scrollable .viewBar a.prev:visited {
					width:40px; height:28px;
					margin:0 68px 0 0;
					background:url(../../images/btn_prevThumb.png) no-repeat;
					display:block;
					float:left;
				}
					#gallery .scrollable .viewBar a.prev:hover {
						background-position:bottom;
					}
				#gallery .scrollable .viewBar a.next:link, #gallery .scrollable .viewBar a.next:active, #gallery .scrollable .viewBar a.next:visited {
					width:40px; height:28px;
					margin:0;
					background:url(../../images/btn_nextThumb.png) no-repeat;
					display:block;
					float:left;
				}
					#gallery .scrollable .viewBar a.next:hover {
						background-position:bottom;
					}
			
			
			
			/*	thumbnail */
			#gallery .thumbnails a.thumbnail1:link, #gallery .thumbnails a.thumbnail1:active, #gallery .thumbnails a.thumbnail1:visited {
				width:110px; height:90px;
				background:url(../../images/thumbnails/thumbnail1.png) top no-repeat;
				display:block;
				float:left;
			}
				#gallery .thumbnails a.thumbnail1:hover {
					background-position:0 -90px;
				}
			#gallery .thumbnails a.thumbnail2:link, #gallery .thumbnails a.thumbnail2:active, #gallery .thumbnails a.thumbnail2:visited {
				width:110px; height:90px;
				background:url(../../images/thumbnails/thumbnail2.png) top no-repeat;
				display:block;
				float:left;
			}
				#gallery .thumbnails a.thumbnail2:hover {
					background-position:0 -90px;
				}
			#gallery .thumbnails a.thumbnail3:link, #gallery .thumbnails a.thumbnail3:active, #gallery .thumbnails a.thumbnail3:visited {
				width:110px; height:90px;
				margin:13px 0 0 0;
				background:url(../../images/thumbnails/thumbnail3.png) top no-repeat;
				display:block;
				float:left;
			}
				#gallery .thumbnails a.thumbnail3:hover {
					background-position:0 -90px;
				}
			#gallery .thumbnails a.thumbnail4:link, #gallery .thumbnails a.thumbnail4:active, #gallery .thumbnails a.thumbnail4:visited {
				width:110px; height:90px;
				margin:8px 0 0 0;
				background:url(../../images/thumbnails/thumbnail4.png) top no-repeat;
				display:block;
				float:left;
			}
				#gallery .thumbnails a.thumbnail4:hover {
					background-position:0 -90px;
				}
			#gallery .thumbnails a.thumbnail5:link, #gallery .thumbnails a.thumbnail5:active, #gallery .thumbnails a.thumbnail5:visited {
				width:110px; height:90px;
				margin:8px 0 0 0;
				background:url(../../images/thumbnails/thumbnail5.png) top no-repeat;
				display:block;
				float:left;
			}
				#gallery .thumbnails a.thumbnail5:hover {
					background-position:0 -90px;
				}
			#gallery .thumbnails a.thumbnail6:link, #gallery .thumbnails a.thumbnail6:active, #gallery .thumbnails a.thumbnail6:visited {
				width:110px; height:90px;
				margin:14px 0 0 0;
				background:url(../../images/thumbnails/thumbnail8.png) top no-repeat;
				display:block;
				float:left;
			}
				#gallery .thumbnails a.thumbnail6:hover {
					background-position:0 -90px;
				}
			#gallery .thumbnails a.thumbnail7:link, #gallery .thumbnails a.thumbnail7:active, #gallery .thumbnails a.thumbnail7:visited {
				width:110px; height:90px;
				margin:3px 0 0 0;
				background:url(../../images/thumbnails/thumbnail7.png) top no-repeat;
				display:block;
				float:left;
			}
				#gallery .thumbnails a.thumbnail7:hover {
					background-position:0 -90px;
				}
			#gallery .thumbnails a.thumbnail8:link, #gallery .thumbnails a.thumbnail8:active, #gallery .thumbnails a.thumbnail8:visited {
				width:110px; height:90px;
				margin:8px 0 0 0;
				background:url(../../images/thumbnails/thumbnail8.png) top no-repeat;
				display:block;
				float:left;
			}
				#gallery .thumbnails a.thumbnail8:hover {
					background-position:0 -90px;
				}
			#gallery .thumbnails a.thumbnail9:link, #gallery .thumbnails a.thumbnail9:active, #gallery .thumbnails a.thumbnail9:visited {
				width:110px; height:90px;
				margin:8px 0 0 0;
				background:url(../../images/thumbnails/thumbnail9.png) top no-repeat;
				display:block;
				float:left;
			}
				#gallery .thumbnails a.thumbnail9:hover {
					background-position:0 -90px;
				}
			#gallery .thumbnails a.thumbnail10:link, #gallery .thumbnails a.thumbnail10:active, #gallery .thumbnails a.thumbnail10:visited {
				width:110px; height:90px;
				margin:8px 0 0 0;
				background:url(../../images/thumbnails/thumbnail10.png) top no-repeat;
				display:block;
				float:left;
			}
				#gallery .thumbnails a.thumbnail10:hover {
					background-position:0 -90px;
				}
			#gallery .thumbnails a.thumbnail11:link, #gallery .thumbnails a.thumbnail11:active, #gallery .thumbnails a.thumbnail11:visited {
				width:110px; height:90px;
				margin:8px 0 0 0;
				background:url(../../images/thumbnails/thumbnail11.png) top no-repeat;
				display:block;
				float:left;
			}
				#gallery .thumbnails a.thumbnail11:hover {
					background-position:0 -90px;
				}
			#gallery .thumbnails a.thumbnail112:link, #gallery .thumbnails a.thumbnail12:active, #gallery .thumbnails a.thumbnail12:visited {
				width:110px; height:90px;
				margin:8px 0 0 0;
				background:url(../../images/thumbnails/thumbnail12.png) top no-repeat;
				display:block;
				float:left;
			}
				#gallery .thumbnails a.thumbnail12:hover {
					background-position:0 -90px;
				}
		
/*	--------------------------------------------------------------------------------------------------------------------------
	extrasContent Styles
	- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -	*/
	#gallery .extrasContent {
		width:369px; height:360px;
		background:url(../../images/bg_videoDesktop.jpg) no-repeat;
		display:inline;
		float:left;
	}
		#gallery .extrasContent h1#h1Desktop {
			width:113px; height:39px;
			background:url(../../images/h1_desktopsAlt.png) no-repeat;
			behavior: url("shared/css/iepngfix.htc");
		}
		#gallery .extrasContent .content {
			width:324px;
			margin:13px 0 0 0; padding:0 0 0 30px;
		}
			#gallery .extrasContent .content .wallpaper {
				width:134px;
				margin:0 26px 20px 0;
				font:normal 11px Arial, Helvetica, sans-serif;
				color:#5f5e5e;
				text-align:center;
				float:left;
			}
				#gallery .extrasContent .content .wallpaper img {
					margin:0 0 2px 0;
					display:block;
				}
				
/*	--------------------------------------------------------------------------------------------------------------------------
	mobileContent Styles
	- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -	*/
	#gallery .mobileContent {
		width:306px;
		margin:0 0 60px 0; padding:0 0 24px 0;
		background:url(../../images/bg_videoDesktop.jpg) 12px 7px no-repeat;
		float:left;
	}
		#gallery .mobileContent h1#h1MobileAlt {
			width:236px; height:31px;
			background:url(../../images/h1_mobileWallpapersAlt.png) no-repeat;
			behavior: url("shared/css/iepngfix.htc");
		}
		#gallery .mobileContent .content {
			margin:19px 0 0 14px;
		}
			/*	ITEM 1 */
			#gallery .mobileContent .content .item1 {
				width:116px; height:157px;
				padding:13px 0 0 21px;
				background:url(../../images/bg_mobileLeft.png) no-repeat;
				float:left;
			}
			/*	ITEM 2 */
			#gallery .mobileContent .content .item2 {
				width:123px; height:157px;
				margin:10px 0 0 10px; padding:13px 0 0 14px;
				background:url(../../images/bg_mobileRight.png) no-repeat;
				float:left;
			}
			#gallery .mobileContent .content img {
				display:block;
			}
			#gallery .mobileContent .content a.btnBuy:link, #gallery .mobileContent .content a.btnBuy:active, #gallery .mobileContent .content a.btnBuy:visited {
				width:64px; height:25px;
				margin:14px 0 0 19px;
				background:url(../../images/btn_buy.png) no-repeat;
				display:block;
			}
				#gallery .mobileContent .content a.btnBuy:hover {
					background-position:bottom;
				}
				
/*	--------------------------------------------------------------------------------------------------------------------------
	buddyIconContent Styles
	- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -	*/
	#gallery .buddyIconContent {
		width:208px;
		margin:0 0 60px 20px; padding:0 0 24px 0;
		background:url(../../images/bg_videoDesktop.jpg) 12px 7px no-repeat;
		float:left;
	}
		#gallery .buddyIconContent h1#h1BuddyIcons {
			width:147px; height:27px;
			background:url(../../images/h1_buddyIcons.png) no-repeat;
			behavior: url("shared/css/iepngfix.htc");
		}
		#gallery .buddyIconContent .content {
			margin:0 0 0 42px; padding:25px 0 0 10px;
		}
			#gallery .buddyIconContent .content a {
				margin:0 10px 10px 0;
				display:block;
				float:left;
			}
			#gallery .buddyIconContent .content a img {
				display:block;
			}