@charset "UTF-8";

body {
	background-color:#5D5244;
}
nav {
    width: 700px;
    margin: 100px auto 0 auto;
}
#inspo, #web, #other, #projects {
	width: 150px;
	margin-right: 25px;
	float: left;
	position: relative;
}

#projects {
	margin-right: 0;
}

.inspo-icon, .web-icon, .other-icon, .projects-icon {
	width: 150px;
	height: 150px;
	background-image:url("../images/sprite.png");
	background-repeat: no-repeat;
	overflow: hidden;
	
}

.inspo-icon {
	background-position: 0 0;
}

.web-icon {
	background-position: -150px 0;
}

.other-icon {
	background-position: -300px 0;
}

.projects-icon {
	background-position: -450px 0;
}

.inspo-icon:hover {
	background-position: 0 -150px;
}

.web-icon:hover {
	background-position: -150px -150px;
}

.other-icon:hover {
	background-position: -300px -150px;
}

.projects-icon:hover {
	background-position: -450px -150px;
}

li a {
	display: block;
	width: 150px;
	font-family:"Academy Engraved LET Plain:1.0";
	font-size: 1em;
	text-align: center;
	text-transform: lowercase;
	line-height: 30px;
	background-color:#8E80A9;
	color: black;
	border-bottom: 2px dotted #6E6565;
}

a.inspo, a.web, a.other, a.projects {
	background-color: darkgrey;
	border-bottom: none;
}

li:hover a.inspo, li:hover  a.web, li:hover a.other, li:hover  a.projects {
	background-color: #685A7B;
	color: white;
}

ul.submenu {
	position: absolute;
	left: -9000em;
	height: 0;
	transition: height 1.5s ease-in-out;
	overflow: hidden;
}

.topmenu li:hover ul.submenu {
	left: 0;
	height: 400px;
}

ul.submenu li a:hover{
	background-color: #AEA8A5;
	border-bottom: 2px solid #AEA8A5;
}

/* TOP MENU ITEM SUSTAINED HOVER*/

li:hover a.inspo, li:hover  a.web, li:hover a.other, li:hover  a.projects {
	background-color:#685A7B;
}

#home {
    width: 50%;
    text-align: center;
    float: left;
    margin-top: 100px;
    margin-left: 150px;
    color: #000000;
}