Untitled

dabblet.css

* {
	padding: 0;
	margin: 0;
}

html {
    -webkit-perspective: 1000;
    background: #6b6b6b;
}

li {
	list-style: none;
}

a {
	text-decoration: none;
}

@font-face {
    font-family: 'BlackJackRegular';
    src: url('http://db.tt/vnqPyeoh');
    src: url('http://db.tt/vnqPyeoh?#iefix') format('embedded-opentype'),
         url('http://db.tt/bcRc4WAo') format('woff'),
         url('http://db.tt/ajsqpqnS') format('truetype'),
         url('http://db.tt/GPBodWt4#BlackJackRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'OpenSansRegular';
    src: url('http://db.tt/Drohgs3s');
    src: url('http://db.tt/Drohgs3s#iefix') format('embedded-opentype'),
         url('http://db.tt/Kl9NtlVY') format('woff'),
         url('http://db.tt/aqKe3Y2x') format('truetype'),
         url('http://db.tt/d5x5rx4w#OpenSansRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}

.ir {
	background: url(http://db.tt/uzRljhUS) no-repeat;
	border: 0;
	color: transparent;
  	font: 0/0 a;
  	height: 104px;
  	margin: 20px 50px ;
  	text-shadow: none;
}
    
    
.container {
	background: #f7f5f5 url(http://db.tt/KbSmZaMT);	
	border-bottom: 2px solid #44aa99;
	box-shadow: 0 5px 10px rgba(0,0,0,.75);
	height: 50px;	
	margin: 100px 115px;
	padding-top: 10px;
	position: relative;
	width: 237px;
}

.portfolio-icon {
	background-image: url(http://db.tt/NDVlqDYB);
	background-repeat: none;
	height: 25px;
	left: 45px;
	position: absolute;
	top: 20px;
	width: 26px;
	z-index: 9999;
	transition: background-position 300ms linear;
}


.main-menu a {
	font-family: 'BlackJackRegular';
	font-weight: normal;
	font-size: 2em;
	color: black;
	display: block;
	top: 15%;
	left: 35%;
	right: 0%;
	position: absolute;
	text-decoration: none;
	z-index: 9999;
	transition: color 300ms linear;
}
	
	
.bottom-border {
	background: #44aa99 url(http://db.tt/ZDnYwpK0);	
	height: 0;	
	position: absolute;
	width: 237px;
	bottom: 0;
	z-index: 9998;
	transition: height 300ms linear;

}

.container:hover {
	cursor:pointer;
}

.container:hover .bottom-border {
        height: 60px;
	transition: height 300ms linear;
}

.container:hover .main-menu a {
	color: white;
	transition: color 300ms linear;
} 

.container:hover .portfolio-icon {
       	background-position: 0 -27px;
       	transition: background-position 300ms linear;
}

@-webkit-keyframes menu-animation {
    0% { -webkit-transform:rotateY(180deg);}
    100% { -webkit-transform:rotateY(0deg);}
}

@-webkit-keyframes sub-menu-animation {
    0% { left:0;}
    100% { left: 246px;}
}

.container:hover .portfolio-menu {
	animation: menu-animation 300ms ease;
	box-shadow: 0 5px 10px rgba(0,0,0,.75);
	display: block;
	opacity: 1;
	left: 240px;
    	transform:rotateY(0deg);
    	transform-origin: left center;

}

.portfolio-menu {
	background: #f7f5f5 url(http://db.tt/KbSmZaMT);		
	border-bottom: 2px solid #44aa99;
	backface-visibility: hidden;
	display: none;
	opacity: 0;
	padding: 0 10px;
	position: absolute;    	
    	top: 0;
	text-align: center;
	width: 246px;
	transform:rotateY(180deg);
	transform-origin: right center;	}

.portfolio-menu li {
	border-bottom: 1px solid #ddd;
	font-family: OpenSansRegular;
	font-weight: normal;
	font-size: 1.5em;
	list-style-type: none;
	padding: 8px 0;
	transition: background-color 300ms ease-in-out;
}

.portfolio-menu li:last-child {
	border-bottom: none;
}

.portfolio-menu li a {
	transition: color 300ms ease-in-out;
}

.portfolio-menu li:hover {
	background-color:rgba(85,191,179,.9);
	transition: background-color 300ms ease-in-out;
}

.portfolio-menu li:hover a, .wedding .sub-menu li:hover a {
	color: #fff;
	transition: color 300ms ease-in-out;
}

.portfolio-menu li a, .wedding:hover li a {
	color: #44aa99;
}

.wedding {
	position: relative;
}

.sub-menu {
	background: #f7f5f5 url(http://db.tt/KbSmZaMT);	
	border-bottom: 2px solid #44aa99;
	display: none;
	text-align: center;
	width: 246px;
	display: block;
	font-size: .675em;
	left: 246px;
	opacity: 0;
	padding: 0 10px;
	position: absolute;
	top: 2px;
	z-index: -1;
}

.wedding:hover .sub-menu {
	animation: sub-menu-animation 300ms ease;	
	box-shadow: none;
	font-size: .675em;
	left: 246px;
	opacity: 1;
	top: 0;
	z-index: 99999;

}

dabblet.html

<h1 class="ir logo">Farren Carlson</h1>
<div class="container">
        <div class="portfolio-icon"></div>
<ul class="nav">
	<li class="main-menu"><a href="#">Portfolio</a></li>
	<li>
	<ul class="portfolio-menu">
		<li><a href="#">Babies</a></li>
		<li><a href="#">Bellies</a></li>
		<li><a href="#">Toddlers</a></li>
		<li><a href="#">Children</a></li>
		<li><a href="#">Senior Portrait</a></li>
		<li><a href="#">Engagement</a></li>
		<li class="wedding"><a href="#sub-menu">Wedding</a>
			<ul id="sub-menu" class="sub-menu">				
				<li><a href="#">Bride</a></li>
				<li><a href="#">Groom</a></li>
				<li><a href="#">Bridesmaids</a></li>
				<li><a href="#">Groomsmen</a></li>
			</ul>
		</li>
		<li><a href="#">Families</a></li>
		<li><a href="#">Modeling</a></li>
		<li><a href="#">Boidoir</a></li>
	</ul>
	</li>
</ul>
	<div class="bottom-border"></div>
</div>

settings.json

{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}