@charset "utf-8";
/* CSS Document */

#big {
width: 100%;
margin-left:0;
margin-top: 130px;
position: absolute;
height: 60px;
background-color:#CCCCCC;
}

#wrap {
width:1010px;
text-decoration:none;
margin: 0px auto 0px auto;
}

#navigation {
margin-top:-130px;
width: 1010px;
z-index:100;
position: absolute;
}


#navigation ul{
list-style-type: none;
padding-top: 130px;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
}

#navigation li {
float:left;
height: 60px;
width: 100%;
background-color:#cccccc;
}


#navigation li a {
	float:left;
	position:relative;
	height: 60px;
	text-align:center;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:14px;
	width: 100%;
	color:#000000;
	text-transform: capitalize;
	text-decoration:none;
}

#navigation li a:link{
text-decoration:none;
}


#navigation li a:hover{
background-color: #aaaaaa;
text-decoration:none;
}

//#navigation li a:active{
//background-color: #777777;
//text-decoration:none;
//}

#navigation li.picture{
margin-top: -130px; /* this is dependant on navigation ul padding:top: value  eg -130 to 130 , -120 to 120 etc...  */
height: 240px;
width:175px;
background-image: url(/img/wovenart.png);
background-repeat:no-repeat;
background-color: transparent;
}
#navigation li.picture a{
cursor: default;
}
#navigation li.picture a:hover{
background: transparent;
}

#navigation li.home{
width: 60px;
border-left: dotted #FFFFFF 1px;
border-right: dotted #FFFFFF 1px;
}
#navigation li.home a span {
vertical-align:middle;
position:relative;
top:35%;
}
#navigation li.home a span {
width:60px;
}

#navigation li.gallery{
width: 83px;
border-right: dotted #FFFFFF 1px;
}
#navigation li.gallery a span {
vertical-align:middle;
position:relative;
top:35%;
}
#navigation li.gallery a:link span {
width: 83px;
}

#navigation li.equipment{
width: 135px;
border-right: dotted #FFFFFF 1px;
}
#navigation li.equipment a span {
vertical-align:middle;
position:relative;
top:25%;
}
#navigation li.equipment a:link span {
width: 135px;
}

#navigation li.classes{
width: 129px;
}
#navigation li.classes a span {
vertical-align:middle;
position:relative;
top:35%;
}
#navigation li.classes a:link span {
width: 129px;
}

#navigation li.hand{
width: 130px;
border-right: dotted #FFFFFF 1px;
}
#navigation li.hand a span {
vertical-align:middle;
position:relative;
top:35%;
}
#navigation li.hand a:link span {
width: 130px;
}

#navigation li.yarns{
width: 130px;
border-right: dotted #FFFFFF 1px;
}
#navigation li.yarns a span {
vertical-align:middle;
position:relative;
top:25%;
}
#navigation li.yarns a:link span {
width: 130px;
}

#navigation li.blog{
width: 71px;
border-right: dotted #FFFFFF 1px;
}
#navigation li.blog a span {
vertical-align:middle;
position:relative;
top:35%;
}
#navigation li.blog a:link span {
width: 71px;
}

#navigation li.contact{
width: 89px;
border-right: dotted #FFFFFF 1px;
}
#navigation li.contact a span {
vertical-align:middle;
position:relative;
top:35%;
}
#navigation li.contact a:link span {
width: 89px;
}

a.active1 {
width: 135px;height:60px;color:#FFFFFF !important; background-color:#777777 !important;
}

a.active2 {
width: 83px; height:60px;color:#FFFFFF !important; background-color:#777777 !important;
}

a.active3 {
width: 135px; height:60px;color:#FFFFFF !important; background-color:#777777 !important;
}

a.active4 {
width: 129px;height:60px;color:#FFFFFF !important; background-color:#777777 !important;
}

a.active5 {
width: 130px;height:60px;color:#FFFFFF !important; background-color:#777777 !important;
}

a.active6 {
width: 130px;height:60px;color:#FFFFFF !important; background-color:#777777 !important;
}

a.active7 {
width: 71px;height:60px;color:#FFFFFF !important; background-color:#777777 !important;
}

a.active8 {
width: 89px;height:60px;color:#FFFFFF !important; background-color:#777777 !important;
}

#menutextleft {
float:left;
margin: -80 0px 0px 50px;
position: absolute;
}

#menutextright {
float:right;
margin: -80 0px 0px 650px;
position: absolute;
}