/*INDEX PAGE*/

/*Hex*/
#hex	{
	width:140px;
	height:160px;
	padding:0;
	margin:0;
	background:url('4fx/hex/hex.png') 0 0 no-repeat;
	}
a.hex 	{
	display:block;
	width:140px;
	height:160px;
	margin:0;
	}
a:hover.hex {
	background-position: 0 -160px;
	}

#h01	{
	position:absolute;
	top:68px;
	left:0px;
	}
#h02	{
	position:absolute;
	top:68px;
	left:140px;
	}	
#h03	{
	position:absolute;
	top:68px;
	left:280px;
	}
#h04	{
	position:absolute;
	top:68px;
	left:420px;
	}
#h05	{
	position:absolute;
	top:68px;
	left:560px;
	}
#h06	{
	position:absolute;
	top:304px;
	left:0px;
	}
#h07	{
	position:absolute;
	top:304px;
	left:140px;
	}	
#h08	{
	position:absolute;
	top:304px;
	left:280px;
	}
#h09	{
	position:absolute;
	top:304px;
	left:420px;
	}
#h10	{
	position:absolute;
	top:304px;
	left:560px;
	}
a.h01,a.h02,a.h03,a.h04,a.h05,
a.h06,a.h07,a.h08,a.h09,a.h10 	{
	display:block;
	width:140px;
	height:160px;
	margin:0;
	}
a:hover.h01,a:hover.h02,a:hover.h03,a:hover.h04,a:hover.h05,
a:hover.h06,a:hover.h07,a:hover.h08,a:hover.h09,a:hover.h10 {
	background-position: 0 -160px;
	}
		
/*SnöGrafx*/
#sno	{
	position:absolute;
	top:234px;
	left:214px;
	width:272px;
	height:64px;
	padding:0;
	margin:0;
	background:url('4fx/snografx.png') 0 0 no-repeat;
	}
a.sno 	{
	display:block;
	width:272px;
	height:64px;
	margin:0;
	background:url('4fx/snografx.png') 0 0 no-repeat;
	}
a:hover.sno {
	background-position: 0 -64px;
	}
	
/*Web & Graphic Design*/
#wag	{
	position:absolute;
	top:486px;
	left:125px;
	width:450px;
	height:36px;
	padding:0;
	margin:0;
	background:url('4fx/design.png') 0 0 no-repeat;
	}

#web	{
	position:absolute;
	top:0px;
	left:92px;
	width:55px;
	height:36px;
	padding:0;
	margin:0;
	}
a.web 	{
	display:block;
	width:55px;
	height:36px;
	margin:0;
	background:#fff url('4fx/s_web.png') 0 0 no-repeat;
	}
a:hover.web {
	background-position: 0 -36px;
	}	

#gfx	{
	position:absolute;
	top:0px;
	left:170px;
	width:102px;
	height:36px;
	padding:0;
	margin:0;
	}
a.gfx 	{
	display:block;
	width:102px;
	height:36px;
	margin:0;
	background:#fff url('4fx/s_graphic.png') 0 0 no-repeat;
	}
a:hover.gfx {
	background-position: 0 -36px;
	}

/*Web || Graphic Design*/
#owb	{
	position:absolute;
	top:486px;
	left:125px;
	width:450px;
	height:36px;
	padding:0;
	margin:0;
	background:url('4fx/designweb.png') 0 0 no-repeat;
	}
#ogf	{
	position:absolute;
	top:486px;
	left:125px;
	width:450px;
	height:36px;
	padding:0;
	margin:0;
	background:url('4fx/designgfx.png') 0 0 no-repeat;
	}
/*Toggle*/
#tog	{
	position:absolute;
	top:491px;
	left:549px;
	width:26px;
	height:26px;
	padding:0;
	margin:0;
	}
a.tog 	{
	display:block;
	width:26px;
	height:26px;
	margin:0;
	background:url('4fx/toggleclick.png') 0 0 no-repeat;
	}
a:hover.tog {
	background-position: 0 -26px;
	}	
		
.drop	{
	position:absolute;
	top:522px;
	left:125px;
	width:450px;
	height:108px;
	padding:0;
	margin:0;
	background: white;
	text-align: right;
	z-index:555;
	}
.drop ul
{
	border: none;
	list-style: none;
	list-style-type: none;
	margin: 0;
	padding: 0;
	text-align: left;
}
.drop li
{
	border: 0;
	display: block;
	float: left;
	margin: 0 0 0 0;
	padding: 0;
	position: relative;
	width: 450px;
}
.drop li a
{
	background: 0 0 no-repeat;
	display: block;
	height: 36px;
	margin: 0;
	width: 450px;
}
#drop_design,
#drop_design a:hover
{
	background-image: url(4fx/design.png);
}
#drop_web,
#drop_web a:hover
{
	background-image: url(4fx/designweb.png);
}
#drop_gfx,
#drop_gfx a:hover
{
	background-image: url(4fx/designgfx.png);
}
#drop_arena,
#drop_arena a:hover
{
	background-image: url(4fx/arena.png);
}
#drop_stereo,
#drop_stereo a:hover
{
	background-image: url(4fx/stereo.png);
}
#drop_wallpaper,
#drop_wallpaper a:hover
{
	background-image: url(4fx/wallpaper.png);
}	
#drop_design a:hover,
#drop_web a:hover,
#drop_gfx a:hover,
#drop_arena a:hover,
#drop_stereo a:hover,
#drop_wallpaper a:hover
{
	background-position: 0 -36px;
}
	
/*Arrows*/
#rwd	{
	position:absolute;
	top:486px;
	left:66px;
	width:34px;
	height:36px;
	padding:0;
	margin:0;
	}
a.rwd 	{
	display:block;
	width:34px;
	height:36px;
	margin:0;
	background:url('4fx/arrowrwd.png') 0 0 no-repeat;
	}
a:hover.rwd {
	background-position: 0 -36px;
	}
#fwd	{
	position:absolute;
	top:486px;
	left:600px;
	width:34px;
	height:36px;
	padding:0;
	margin:0;
	}
a.fwd 	{
	display:block;
	width:34px;
	height:36px;
	margin:0;
	background:url('4fx/arrowfwd.png') 0 0 no-repeat;
	}
a:hover.fwd {
	background-position: 0 -36px;
	}

/*Offline*/
#off	{
	position:absolute;
	top:486px;
	left:125px;
	width:450px;
	height:36px;
	padding:0;
	margin:0;
	background:url('4fx/offline.png') 0 0 no-repeat;
	}

/*Copy*/
#axx	{
	position:absolute;
	top:545px;
	left:240px;
	width:220px;
	height:20px;
	padding:0;
	margin:0;
	}
	
	/*About SnöGrafx*/
#abt	{
	position:absolute;
	top:570px;
	left:185px;
	width:116px;
	height:20px;
	padding:0;
	margin:0;
	}
a.abt 	{
	display:block;
	width:116px;
	height:20px;
	margin:0;
	background:url('4fx/about.png') 0 0 no-repeat;
	}
a:hover.abt {
	background-position: 0 -20px;
	}

/*Copywright/All rights reserved*/
#arr	{
	position:absolute;
	top:570px;
	left:295px;
	width:220px;
	height:20px;
	padding:0;
	margin:0;
	}


	

