ul.tabs {
	margin: 0;
	padding: 0;
	list-style: none;
 position: absolute;
 left: 10px;
 top: 62px;
}
ul.tabs li {

}
ul.tabs li a {
	width: 154px;
    height: 67px;
    text-indent: -999em;
    outline: none;
    background-repeat: no-repeat;
    background-image: url(images/SY-tabs-bg.png);
    display: block;
}
ul.tabs li a#ipod-tab {
  background-position: 0 0;
}
ul.tabs li a#ipod-tab:hover, ul.tabs li.active a#ipod-tab {
  background-position: 100% 0;
}
ul.tabs li a#iphone-tab {
  background-position: 0 50%;
}
ul.tabs li a#iphone-tab:hover, ul.tabs li.active a#iphone-tab {
  background-position: 100% 50%;
}
ul.tabs li a#ipad-tab {
  background-position: 0 100%;
}
ul.tabs li a#ipad-tab:hover, ul.tabs li.active a#ipad-tab {
  background-position: 100% 100%;
}


.tab_content {
   width: 496px;
    height: 213px;
    background: url(images/tab-container-bg.png) 0 0 no-repeat;
    float: right;
    margin: 15px 17px 0 0;
    padding: 0 21px;
    position: relative;
}
.tab_content h2 {
	 height: 30px;
      border-bottom: 1px solid #e6e6e6;
      text-align: center;
      margin: 0 -12px;
      padding-top: 16px;
}




/*   Scrolls   */

/*
	root element for the scrollable.
	when scrolling occurs this element stays still.
*/
.scrollable {

	/* required settings */
	position:relative;
	overflow:hidden;
	width: 496px;
	height:155px;
    margin: 10px 0 0;
}

/*
	root element for scrollable items. Must be absolutely positioned
	and it should have a extremely large width to accomodate scrollable items.
	it's enough that you set the width and height for the root element and
	not for this element.
*/
.scrollable .items {
	/* this cannot be too large */
	width:20000em;
	position:absolute;
	clear:both;
    top: 0;
    left: 0;
}

.items div {
	float:left;
	width:496px;
}
.items div a {
  width: 165px;
  display: block;
  text-align: center;
  font-size: 16px;
  font-weight: bold;
  color: #030303;
  float: left;
  height: 150px;
}
.items div a img {
  border: none;
  display: block;
  margin: 0 auto;
}

.items div#ipad-wrap {
  text-align: center;
  padding-top: 10px;
}
.items div#ipad-wrap a {
  float: none;
  display: inline-block;
}
.items div a:hover {
  color: #ff6705;
}


/* active item */
.scrollable .active {
	border:2px solid #000;
	position:relative;
	cursor:default;
}


/* this makes it possible to add next button beside scrollable */
.scrollable {
	float:left;
}

/* prev, next, prevPage and nextPage buttons */
a.browse {
	display:block;
	width:21px;
	height:28px;
	 position: absolute;
     top: 95px;
	font-size:1px;
    z-index: 100;
    cursor: pointer;
}

/* right */
a.right 				{ right: 0px; background: url(images/SY-right-arrow.png) 0 0 no-repeat;}



/* left */
a.left				{ left: 0px; background: url(images/SY-left-arrow.png) 0 0 no-repeat; }


/* up and down */
a.up, a.down		{
	background:url(../img/scrollable/arrow/vert_large.png) no-repeat;
	float: none;
	margin: 10px 50px;
}

/* up */
a.up:hover  		{ background-position:-30px 0; }
a.up:active  		{ background-position:-60px 0; }

/* down */
a.down 				{ background-position: 0 -30px; }
a.down:hover  		{ background-position:-30px -30px; }
a.down:active  	{ background-position:-60px -30px; }


/* disabled navigational button */
a.disabled {
	 cursor: default !important;
}