/*----------------------------
	Navigation
-----------------------------*/

nav {
	width: 38px;
	height: 45px;
	top: 0;
	left: 0;
	margin: 0;
	padding: 20px;
	position: fixed;
	z-index: 30;
}

#navList li {
	list-style: none;
	height: 38px;
	padding: 0;
	width: 38px;
}

#navList span {
	/* Container properties */
	width: 0;
	left: 38px;
	padding: 0;
	position: absolute;
	overflow: hidden;

	/* Text properties */
	font-family: 'Open Sans Condensed', 'Arial Narrow', serif;
	/* font-family: 'Myriad Pro', Arial, Helvetica, sans-serif; */
	font-size: 18px;
	font-weight: bold;
	letter-spacing: 0.6px;
	white-space: nowrap;
	line-height: 38px;
	
	/* CSS3 Transition: */
	-webkit-transition: 0.25s;
	-moz-transition: 0.25s;
	-ms-transition: 0.25s;
	-o-transition: 0.25s;
	transition: 0.25s;
}

#navList a {
	background: url('../11/img/navi-icons.png') no-repeat;
	height: 38px;
	width: 38px;
	display: block;
	position: relative;
}

/* General hover styles */
#navList a:hover span {
	width: auto;
	padding: 0 10px;
	overflow: visible;
}

#navList a:hover {
	text-decoration: none;
	
	/* CSS outer glow with the box-shadow property */
	-webkit-box-shadow: 0 0 5px #fff;
	-moz-box-shadow: 0 0 5px #fff;
	-ms-box-shadow: 0 0 5px #fff;
	-o-box-shadow: 0 0 5px #fff;
	box-shadow: 0 0 5px #fff;
}

/* First button */
#navList .btnIntro {
	background-position: 0 0;
}
#navList .btnIntro:hover {
	background-position: 0 -38px;
}
#navList .btnIntro span {
	background-color: #d6ee94;
	color: #5bb900;
	text-shadow: 1px 1px 0 #d6ee94;
}

/* Second button */
#navList .btnWeb {
	background-position: -38px 0;
}
#navList .btnWeb:hover {
	background-position: -38px -38px;
}
#navList .btnWeb span {
	background-color: #94eeec;
	color: #00b9b1;
	text-shadow: 1px 1px 0 #94eeec;
}

/* Third button */
#navList .btnPrints {
	background-position: -76px 0;
}
#navList .btnPrints:hover {
	background-position: -76px -38px;
}
#navList .btnPrints span {
	background-color: #b0a3f6;
	color: #0000d9;
	text-shadow: 1px 1px 0 #b0a3f6;
}

/* Fourth button */
#navList .btn3D {
	background-position: -114px 0;
}
#navList .btn3D:hover {
	background-position: -114px -38px;
}
#navList .btn3D span {
	background-color: #ee94a6;
	color: #b90000;
	text-shadow: 1px 1px 0 #ee94a6;
}

/* Fifth button */
#navList .btnProfile {
	background-position: -152px 0;
}
#navList .btnProfile:hover {
	background-position: -152px -38px;
}
#navList .btnProfile span {
	background-color: #feba7f;
	color: #fb0000;
	text-shadow: 1px 1px 0 #feba7f;
}