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

/*Universal Code*/ 

* {
	margin: 0;
	padding: 0;
	border-style: none;
	list-style-type: none;
}

body{
	color: black;
	font: 62.5% Arial, "Helvetica Neue", Helvetica, Geneva, sans-serif;
	background: url(images/shop-bg.jpg) top center #000;
}

#container{
	width: 980px;
	position: relative;
	margin: 0 auto;
}

a:link {
	color: #FFCC00;
	text-decoration: none;
}
a:visited {
	text-decoration: none;
	color:#00FF00;
}
a:hover {
	text-decoration: underline;
	color: #FFFF00;
}
a:active {
	text-decoration: none;
}

/*Header Section*/ 

#header{
	width:980px;
	height:150px;
	background-image:url(images/header.jpg);
	}

#logo a{
	width:196px;
	height:153px;
	display:block;
	text-indent: -9999px;
	overflow:hidden;
}

/*Navigation Bar*/ 

ul#nav {
	width: 758px;
	margin-top:-30px;
	padding-left: -3px;
	height: 27px;
	float:right;
	}


#nav li {
	float: left;	
}

#nav li a {
	display: block;
	height: 27px;
	text-indent: -9999px;
	font-size:1.2em;
	overflow:hidden;
	}

ul li {
	position: relative;
	}

li ul {
	z-index: 4;
	position:absolute;
	top: 27px;
	display: none;
	background:none #000;
	border: 1px solid #ffff00;
	width:155px;
	}
	
#nav li ul li a{
	position:relative;
	background:#000 none !important ;
	text-indent: 0;
	text-decoration: none;
	color:#fff;
	border: 1px solid #fff;
	padding: 7px 0 0 17px;
	width: 121px !important ;
	margin:2px;
	height: 24px;
	}

#nav li ul li a:hover{
	background:#440404 !important ;
	text-indent: 0;
	text-decoration: none;
	color: #ffff00;
	border: 1px solid #ccc;
	}

li:hover ul, 
li.over ul { 
	display: block; }


/*Styles Button*/ 

#nav li.styles a{
	width: 70px;
	padding-right: 7px;
	background:url(images/styles.png) no-repeat;
}

#nav li.styles a:hover {
	background:url(images/styles-b.png) no-repeat;
}


/*Apperal Button*/ 

#nav li.apperal a {
	padding-right: 9px;
	width: 84px;
	background:url(images/apparel.png) no-repeat;
}

#nav li.apperal a:hover {
	background:url(images/apparel-b.png) no-repeat;
}


/*Posters Button*/ 

#nav li.posters a {
	padding-right: 11px;
	width: 81px;
	background:url(images/posters.png) no-repeat;
}

#nav li.posters a:hover {
	background:url(images/posters-b.png) no-repeat;
}


/*Skateboards Button*/ 

#nav li.skateboards a {
	padding-right: 9px;
	width: 125px;
	background:url(images/skateboards.png) no-repeat;
}

#nav li.skateboards a:hover {
	background:url(images/skateboards-b.png) no-repeat;
}


/*Merchandise Button*/ 

#nav li.merch a {
	padding-right: 10px;
	width: 125px;
	background:url(images/merchandise.png) no-repeat;
}

#nav li.merch a:hover {
	background:url(images/merchandise-b.png) no-repeat;
}



/*Toys Button*/ 

#nav li.toys a {
	padding-right: 10px;
	width: 48px;
	background:url(images/toys.png) no-repeat;
}

#nav li.toys a:hover {
	background:url(images/toys-b.png) no-repeat;
}



/*Original Art Button*/ 

#nav li.original_art a {
	width: 119px;
	background:url(images/original_art.png) no-repeat;
}

#nav li.original_art a:hover {
	background:url(images/original_art-b.png) no-repeat;
}




/*HEADLINE SECTION*/	

#header-bottom{
	width:920px;
	height:40px;
	margin-bottom: -40px;
	background:url(images/menu-bottom.png) center;
	z-index: 2;
	position:absolute;
	}

#headlines{
	width: 920px;
	height:350px;
	background:#545358;
	margin:0 auto;
	}

	#featured_item{
		width:636px;
		height:350px;
		float:left;
		}
		
	#vert {
		border: 4px #fff solid;
		height:339px;
		float:left;
		margin-left: -5px;
		}
	
	#welcome{
		width:280px;
		height:350px;
		padding-left: 3px;
		float:left;
		}
		
		.hello{
			width:255px;
			height:53px;
			display:block;
			background:url(images/welcome.png) no-repeat top center;
			text-indent: -9999px;
			margin:20px 12px 0 15px;
			}
			
		 .welcome_text{
		 	padding: 10px 10px 5px 13px;
			font-size:1.4em;
			color:#fff;
			}


/* Carousel*/

#carousel_inner {
float:left; /* important for inline positioning */
width:636px; /* important (this width = width of list item(including margin) * items shown */ 
overflow: hidden;  /* important (hide the items outside the div) */
/* non-important styling bellow */
background: #F0F0F0;
}

#carousel_ul {
position:relative;
left:-636px; /* important (this should be negative number of list items width(including margin) */
list-style-type: none; /* removing the default styling for unordered list items */
margin: 0px;
padding: 0px;
width:9999px; /* important */
/* non-important styling bellow */
padding-bottom:10px;
}

#carousel_ul li{
float: left; /* important for inline positioning of the list items */                                    
width:636px;  /* fixed width, important */
/* just styling bellow*/
padding:0px;
height:350px;
background: #000000;
}

#carousel_ul li img {
.margin-bottom:-4px; /* IE is making a 4px gap bellow an image inside of an anchor (<a href...>) so this is to fix that*/
/* styling */
cursor:pointer;
cursor: hand; 
border:0px; 
}

#left_scroll, 
#right_scroll{
float:left; 
height:26px; 
width:26px; 
background: #C0C0C0; 
border: 1px solid #000;
margin-right:5px;
}
#left_scroll img, 
#right_scroll img{
border:0; /* remove the default border of linked image */
/*styling*/
cursor: pointer;
cursor: hand;

}


#scroll_buttons{
	z-index: 2;
	position:absolute;
	width:140px;
	height:26px;
	margin:318px 0 0 30px;
	}


/*SIDEBAR*/	

#side-bar{
	width: 197px;
	height: 669px;
	float:left;
	margin-top:2px;
	background:url(images/sidebar.gif);
	}
	
		#twitter_image a{
		background-image:url(images/twitter-feed.png);
		text-indent:-9999px;
		overflow:hidden;
		width:170px;
		height:53px;
		display:block;
		margin: 17px 0 0 15px;
			}
			
		#twitter_feed{
			width:170px;
			height:380px;
			margin: 1px 0 0 15px;
			}
			
		.facebook a{
			width: 170px;
			height:52px;
			background-image:url(images/facebook-logo.png);
			margin: 5px 0 0 15px;
			text-indent:-9999px;
			overflow:hidden;
			display:block;
			}
			
		.myspace a{
			width: 170px;
			height:62px;
			background-image:url(images/myspace-logo.gif);
			margin: -5px 0 0 15px;
			text-indent:-9999px;
			display:block;
			overflow:hidden;
			}
			
		.artsproject a{
			width: 108px;
			height:88px;
			background-image:url(images/arts-project-logo.png);
			margin: -5px 0 0 45px;
			text-indent:-9999px;
			display:block;
			overflow:hidden;
			}

#center{
	margin:0 auto;
	}

/*FOOTER*/
	
#footer{
	width: 980px;
	height:150px;
	float:left;
	margin-top:20px;
	background:url(images/footer-background.jpg) bottom center repeat-x;
	overflow: hidden;
	}
	
	#caution-bar{
		height: 20px;
		background:url(images/caution-bar.jpg) no-repeat;
		}
		
	.footer_text {
		color: #FFFFFF;
		font-size:1em;
		text-transform:uppercase;
		}
		
		.footer_text a:link{
			color:#FFFF66;
			text-decoration: none;
			}
		
		.footer_text a:hover{
			color:#FFCC00;
			text-decoration: underline;
			}
			
		.copyright {
			font-size: 0.9em;
			}