@import url('jquery.vegas.css');

body{
	margin: 0;
	padding: 0;
	height: 100%;
	width: 100%;	
	background: #e8e8e8;
		opacity: 0;
}
.overlay{overflow: hidden;}
#wrapper{
	position: relative;
	height: 100%;
	width: 100%;
	padding-bottom: 60px;
	z-index: 9999;

}
.studio.small #wrapper{width:1230px!important}
.studio.large #wrapper{width:1570px!important}
.artful-living.large #wrapper{width: 100%!important;}
.artful-living.small #wrapper{width: 100%!important}

.large #wrapper{width: 100%;}
.small #wrapper{width: 960px}
.tall #wrapper{height: 100%;}
.short #wrapper{height: 660px;}

#nav{
	width: 200px;
	position: fixed;
	left: 0;
	top: 0;
	height: 100%;
	background: url('../images/design-nav-bg.png');
}
	.artful-living #nav #menu{background: url('../images/design-nav-artful.png') no-repeat!important;}
	.news #nav #menu{background: url('../images/design-nav-news.png') no-repeat!important;}
	.studio #nav #menu{background: url('../images/design-nav-firm.png') no-repeat!important;}
	
	#nav #menu{
		width: 97px;
		height: 132px;
		background: url('../images/design-nav.png') no-repeat;
		position: absolute;
		top: 115px;
		left: 30px;
	}
	
	.home #nav #menu{
		background: url('../images/design-nav-home.png') no-repeat !important;	
	}
	
	#nav #tagline{
		width: 147px;
		height: 110px;
		background: url('../images/design-tagline.png') no-repeat;
		left: 30px;
		position: absolute
	}

.short #tagline{top: 400px; bottom: auto;}
.tall #tagline{top: auto; bottom: 35px;}

#next{
	position: fixed;
	height: 100%;
	width: 100%;
	top: 0;
	left: 0;
	z-index: 99999999;
}
	
#logo{
	right: 0;
	top: 0;
	width: 447px;
	height: 578px;
	z-index: 99909;
	background: url('../images/design-logo.png') no-repeat;
}

.small #logo{position: fixed;}
.large #logo{position: fixed;}

#caption{
	position: fixed;
	right: 57px;
	bottom: 35px;
	background: url('../images/design-photo-caption-alt.png') no-repeat;
	height: 38px;
	width: 269px;
}

#intro{
	margin-left: 200px;
	margin-top: 101px;
	position: relative;
	float: left;
}

.studio #intro{ margin-bottom: 20px;}
.small #intro{width:600px}
.large #intro{width: 960px;}

#intro p{
	font-size: 19px;
	line-height: 26px;
	color: #8f9897;
	font-family: "Cambria", serif;
}

#masonry{
	list-style: none;
	margin-left: 200px;
	position: relative;
	z-index: 999;
	padding: 0;
	float: none;
	clear: both;
}
.landing#masonry li{
	background: url('../images/design-loading-bg.png') no-repeat;
}
.studio #masonry{
	float: left;
	margin-top:0;
}
.studio.small #masonry{
	width: 698px;
}

.studio.large #masonry{
	width: 1048px;
}

#masonry li{
	float: left;
	width: 343px;
	height: 256px;
	margin: 0 5px 5px 0;
}

.news #intro{margin-bottom: 20px!important;}
.news #masonry li{height: 440px!important;}
.studio #masonry li{height: 400px!important;}

#project{
	margin-left: 200px;
	margin-top: 105px;
}

.large #project{width: 1330px;}
.small #project{width: 960px;}

#project #details{
	background: url('../images/design-project-details.png') no-repeat;
	height: 601px;
	float: left;
	width: 329px;
}

#project ul{
	list-style: none;
	padding: 0;
	margin-top: 0;
	float: left;
	margin-left: 20px;
}

.small #project ul img{width: 600px;}

.studio #sidebar{
	background: url('../images/design-studio-sidebar.png') no-repeat;
	width: 322px;
	height: 522px;
	float: right;
	margin-top: 14px;
}
#overlay{
	position: fixed;
	height: 100%;
	width: 100%;
	top: 0;
	left: 0;
	background: url('../images/design-overlay-bg.png');
	z-index: 999999;
}

#overlay img{
	position: absolute;
	left: 50%;
	margin-left: -520px;
	top: 50%;
	margin-top: -348px;
}
#artful-content{
	background: url('../images/design-artful-living-content.png') no-repeat;
	height: 1242px;
	margin-left: 200px;
	margin-top: 101px;	
}