@charset "UTF-8";
body { font-family: Georgia, "Times New Roman", Times, serif; font-size: 12px; background-image: url(images/background.jpg); background-repeat: repeat-x; }
#mainhome { position: relative; width: 999px; height: 1517px; background-image: url(images/main_home.jpg); margin-right: auto; margin-left: auto; }
#headeronly { position: relative; width: 999px; height: 216px; background-image: url(images/catalog_header.jpg); margin-right: auto; margin-left: auto; }
#bottom { position: relative; margin: 8px auto; width: 999px; }


#buttons { position: absolute; top: 149px; left: 140px; width: 730px; height: 53px; margin: 0px auto; background-image: url(images/stik_buttons.png); background-repeat: no-repeat; z-index:99;}

#buttons ul { border: 0; margin: 0; padding: 0; list-style-type: none; text-align: center; clear: left; }
#buttons ul li{ display: block; float: left; text-align: center; padding: 0; margin: 0; }
#buttons ul li a span { display:none; }
#buttons ul li a { height:53px; margin:0px; padding:0px; display: block; }

#buttons ul li a.home { width: 80px; }
#buttons ul li a.bands { width: 99px; }
#buttons ul li a.media { width: 98px; }
#buttons ul li a.store { width: 99px; }
#buttons ul li a.links { width: 90px; }
#buttons ul li a.contact { width: 130px; }
#buttons ul li a.nashpunk { width: 134px; }

/* -- Hovers -- */
#buttons ul li a.home:hover { background: url(images/stik_buttons.png) 0px -50px; }
/*#buttons ul li a.bands:hover { background: url(images/stik_buttons.png) -80px -50px; }*/
#buttons ul li a.media:hover { background: url(images/stik_buttons.png) -179px -50px; }
#buttons ul li a.store:hover { background: url(images/stik_buttons.png) -277px -50px; }
#buttons ul li a.links:hover { background: url(images/stik_buttons.png) -376px -50px; }
#buttons ul li a.contact:hover { background: url(images/stik_buttons.png) -466px -50px; }
#buttons ul li a.nashpunk:hover { background: url(images/stik_buttons.png) -596px -50px; }

#share { position: absolute; top: 12px; left: 630px; width: 160px; height: 52px; margin: 0px auto; background-image: url(images/stik_share.png); background-repeat: no-repeat; }

#share ul { border: 0; margin: 0; padding: 0; list-style-type: none; text-align: center; clear: left; }
#share ul li{ display: block; float: left; text-align: center; padding: 0; margin: 0; }
#share ul li a span { display:none; }
#share ul li a { height:52px; margin:0px; padding:0px; display: block; }

#share ul li a.ms { width: 35px; }
#share ul li a.fb { width: 23px; }
#share ul li a.tw { width: 31px; }
#share ul li a.yt { width: 35px; }
#share ul li a.rss { width: 36px; }

/* -- Hovers -- */
#share ul li a.ms:hover { background: url(images/stik_share.png) 0px -48px; }
#share ul li a.fb:hover { background: url(images/stik_share.png) -35px -48px; }
#share ul li a.tw:hover { background: url(images/stik_share.png) -58px -48px; }
#share ul li a.yt:hover { background: url(images/stik_share.png) -89px -48px; }
#share ul li a.rss:hover { background: url(images/stik_share.png) -124px -48px; }


#latest_news { position: absolute; left: 9px; top: 265px; z-index: 2; }

#new_releases { position: absolute; left: 15px; top: 735px; z-index: 2; }
#catalog { position: absolute; left: 370px; top: 628px; z-index: 2; }
#banner_ad { position: absolute; left: 448px; top: 967px; z-index: 2; }
#shows { position: absolute; left: 11px; top: 1105px; z-index: 2; }
#twitter { position: absolute; left: 377px; top: 1110px; z-index: 2; }
#blogs { position: absolute; left: 690px; top: 1105px; z-index: 2; }

#new_releases .headline { font-weight: bold; color: #000000; }
#new_releases .nrband { font-weight: normal; color: #990000; font-style: italic; }
#new_releases .nrdesc { font-family: Geneva, Arial, Helvetica, sans-serif; font-size: x-small; font-weight: normal; color: #000000; }
#new_releases .imgnr{ border: solid #990000 2px; }

#scroll { margin-right: auto; margin-left: auto; position: relative; height: 285px; width: 630px; }
.scroller { position: absolute; /*leave this value alone*/ overflow: scroll; /*leave this value alone*/ width: 630px; /*Width of Carousel Viewer itself*/ height:285px; /*Height should enough to fit largest content's height*/ margin-right: auto; margin-left: auto; }
.scroller .belt { position: absolute; /*leave this value alone*/ }
.scroller .panel { float: left;/*leave this value alone*/ width: 630px; /*Width of each panel holding each content. If removed, widths should be individually defined on each content DIV then. */ }

#step{  
position: absolute;
right: 11px;
top: 233px; 
height: 275px; 
width: 600px; 
z-index: 0;
}

.stepcarousel{
position: relative; /*leave this value alone*/
border: 10px solid black;
overflow: scroll; /*leave this value alone*/
width: 600px; /*Width of Carousel Viewer itself*/
height: 275px; /*Height should enough to fit largest content's height*/
}

.stepcarousel .belt{
position: absolute; /*leave this value alone*/
left: 0px;
top: 0px;
}

.stepcarousel .panel{
float: left; /*leave this value alone*/
overflow: hidden; /*clip content that go outside dimensions of holding panel DIV*/
margin: 0px; /*margin around each panel*/
width: 620px; /*Width of each panel holding each content. If removed, widths should be individually defined on each content DIV then. */
}

#catalog .imgnr{ border: solid #cc3333 2px; }

#mailing_list { float: left; }
#footer { float: right; text-align: right; font-size: 10px; color: #FFFFFF; }