body
{
    
    margin:0px 0px; 
    padding:0px;
    text-align:center;
    font-family:Tahoma;
    background: #fff url(http://www.soniclibrarian.net/search/images/back.png) center top;
    width: 100%;

}

div.carousel-component
{
    background:#EDF5FF;
}

/**
 * This <div> element is wrapped by jCarousel around the list
 * and has the classname "jcarousel-container".
 */
.jcarousel-container {
    position: relative;
}

.jcarousel-clip {
    z-index: 2;
    padding: 0;
    margin: 0;
    overflow: hidden;
    position: relative;
}

.jcarousel-list {
    z-index: 1;
    overflow: hidden;
    position: relative;
    top: 0;
    left: 0;
    margin: 0;
    padding: 0;
}

.jcarousel-list li,
.jcarousel-item {
    float: left;
    list-style: none;
    /* We set the width/height explicitly. No width/height causes infinite loops. */
    width: 75px;
    height: 75px;
}

.jcarousel-list li img,
.jcarousel-item img{
	border:1px solid #999999;
	display:block;
}

/**
 * The buttons are added dynamically by jCarousel before
 * the <ul> list (inside the <div> described above) and
 * have the classnames "jcarousel-next" and "jcarousel-prev".
 */
.jcarousel-next {
    z-index: 3;
    display: none;
}

.jcarousel-prev {
    z-index: 3;
    display: none;
}

.jcarousel-skin-tango .jcarousel-container {
    -moz-border-radius: 10px;
    background: #F0F6F9;
    border: 1px solid #346F97;
}

.jcarousel-skin-tango .jcarousel-container-horizontal {
    width: 245px;
    padding: 20px 40px;
}

.jcarousel-skin-tango .jcarousel-container-vertical {
    width: 75px;
    height: 245px;
    padding: 40px 20px;
}

.jcarousel-skin-tango .jcarousel-clip-horizontal {
    width:  245px;
    height: 75px;
}

.jcarousel-skin-tango .jcarousel-clip-vertical {
    width:  75px;
    height: 245px;
}

.jcarousel-skin-tango .jcarousel-item {
    width: 75px;
    height: 75px;
}

.jcarousel-skin-tango .jcarousel-item-horizontal {
    margin-right: 10px;
}

.jcarousel-skin-tango .jcarousel-item-vertical {
    margin-bottom: 10px;
}

.jcarousel-skin-tango .jcarousel-item-placeholder {
    background: #fff;
    color: #000;
}

/**
 *  Horizontal Buttons
 */
.jcarousel-skin-tango .jcarousel-next-horizontal {
    position: absolute;
    top: 43px;
    right: 5px;
    width: 32px;
    height: 32px;
    cursor: pointer;
    background: transparent url(next-horizontal.png) no-repeat 0 0;
}

.jcarousel-skin-tango .jcarousel-next-horizontal:hover {
    background-position: -32px 0;
}

.jcarousel-skin-tango .jcarousel-next-horizontal:active {
    background-position: -64px 0;
}

.jcarousel-skin-tango .jcarousel-next-disabled-horizontal,
.jcarousel-skin-tango .jcarousel-next-disabled-horizontal:hover,
.jcarousel-skin-tango .jcarousel-next-disabled-horizontal:active {
    cursor: default;
    background-position: -96px 0;
}

.jcarousel-skin-tango .jcarousel-prev-horizontal {
    position: absolute;
    top: 43px;
    left: 5px;
    width: 32px;
    height: 32px;
    cursor: pointer;
    background: transparent url(prev-horizontal.png) no-repeat 0 0;
}

.jcarousel-skin-tango .jcarousel-prev-horizontal:hover {
    background-position: -32px 0;
}

.jcarousel-skin-tango .jcarousel-prev-horizontal:active {
    background-position: -64px 0;
}

.jcarousel-skin-tango .jcarousel-prev-disabled-horizontal,
.jcarousel-skin-tango .jcarousel-prev-disabled-horizontal:hover,
.jcarousel-skin-tango .jcarousel-prev-disabled-horizontal:active {
    cursor: default;
    background-position: -96px 0;
}

/**
 *  Vertical Buttons
 */
.jcarousel-skin-tango .jcarousel-next-vertical {
    position: absolute;
    bottom: 5px;
    left: 43px;
    width: 32px;
    height: 32px;
    cursor: pointer;
    background: transparent url(next-vertical.png) no-repeat 0 0;
}

.jcarousel-skin-tango .jcarousel-next-vertical:hover {
    background-position: 0 -32px;
}

.jcarousel-skin-tango .jcarousel-next-vertical:active {
    background-position: 0 -64px;
}

.jcarousel-skin-tango .jcarousel-next-disabled-vertical,
.jcarousel-skin-tango .jcarousel-next-disabled-vertical:hover,
.jcarousel-skin-tango .jcarousel-next-disabled-vertical:active {
    cursor: default;
    background-position: 0 -96px;
}

.jcarousel-skin-tango .jcarousel-prev-vertical {
    position: absolute;
    top: 5px;
    left: 43px;
    width: 32px;
    height: 32px;
    cursor: pointer;
    background: transparent url(prev-vertical.png) no-repeat 0 0;
}

.jcarousel-skin-tango .jcarousel-prev-vertical:hover {
    background-position: 0 -32px;
}

.jcarousel-skin-tango .jcarousel-prev-vertical:active {
    background-position: 0 -64px;
}

.jcarousel-skin-tango .jcarousel-prev-disabled-vertical,
.jcarousel-skin-tango .jcarousel-prev-disabled-vertical:hover,
.jcarousel-skin-tango .jcarousel-prev-disabled-vertical:active {
    cursor: default;
    background-position: 0 -96px;
}


div.wrapper
{
	width:950px;
	margin:0px auto;
	text-align:left;		
	overflow:hidden;	
	border: solid 1px black;
}
div.catwrapper
{
	width:950px;
	margin:0px auto;
	text-align:left;		
	overflow:hidden;	
	border: solid 1px black;
	padding:0 0 5px 0;
}
div.sonicheader img
{
   border:none;
}

div.sonicheader
{
    height: 106px;
}

/*>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>  NAVIGATION   >>>>>>>>>>>>>>>>>>>>>>>>>>>>>*/

#navbar {
    clear:both;
	height: 24px;
	font-family: "Arial Black", Arial;
	font-size: 14.5px;
	font-weight: normal;
	text-transform: lowercase;
	background-repeat: repeat-x;
	padding-top:0px;
	background-color: Black;
	color:#eeeeee;
}
#navbar ul {
    margin: 0 0 0 0;
    padding: 0 0 0 0;
}
#navbar ul li 
{
    margin: 2px;
    padding: 0 6px;
	list-style: none;
	float:left;
}

#navbar a:link {font-weight:bold; color: #396CAD; text-decoration:none;}	
#navbar a:visited {font-weight:bold; color: #396CAD; text-decoration:none;}
#navbar a:hover {font-weight:bold; color: #B82424; text-decoration:none;}
#navbar a:active {font-weight:bold; color: #396CAD; text-decoration:none;}

#nav img{
	display: block;
margin: 4px;
	float: left;
}
/*>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>  END NAVIGATION   >>>>>>>>>>>>>>>>>>>>>>>>>>>>>*/

div.colsearch
{
    color:White;
    background:#2647A0;
    border-bottom: solid 5px #2647A0;
    text-align:center;
    font-size:13pt;
    padding: 10px 0 10px 0;
}
div.cdSearchPlayer
{
    color:White;
    background-color:Black;
    font-size:12px;
    padding: 10px 0 10px 0;
    height:40px;
}
div.catSearchPlayer /*cat-search page */
{
    color:White;
    background-color:Black;
    font-size:12px;
    height:35px;
}
div.catSearchPlayer a /*cat-search page */
{
    color:white;
}
input.SearchButton
{
    margin-right:10px;
}
div.cdMainInfo
{
    float:left;
    width:500px;
}
div.catMainSearch /*cat-search page */
{
    float:left;
    height: 25px;
    width:480px;
    padding-top:10px;
}
div.cdTitleArea
{
    font-size:18px;
    padding-left:20px;
}
div.cdDescArea
{
    font-size:12px;
    padding-left:20px;
}
div.cdPlayer
{
    float:right;
    padding-right: 10px;
}
div.colsearchresult
{
    height:100px;
    font-size:15px;
    padding: 5px 0 5px 0;
    border-bottom: solid 1px black;
    border-top: solid 1px black;
    background:#EDF5FF;
    height:130px;
    
}
div.cdsearchresult
{
    padding: 5px 0 0 0;
    height: 139px;
    background: #EDF5FF;
}
div.tabs
{
    height:130px;
}

div.catsearchresult
{
    font-size:15px;
    padding: 10px 0 10px 0;
    border:solid 2px black;
}
div.cats
{
    display:block;
    height:30px;
    clear:both;
}

div.cats .catlabels, .catlabels a
{
    text-align:right;
    font-size: 12pt;
    color:Blue;
    font-weight: bold;
    float:left;
    width:210px;
    padding-right:10px;
}

div.catkeys a
{
    font-size: 10pt;
    color:Black;
}
keysubs a
{
font-size:10pt;
}

div.catkeys, .catkeys div
{
    float:left;
    padding-right:5px;
}

div.key
{
    margin-left:5px;
}

div.key a
{
    text-decoration:none;
}
div.key a:hover, a:active 
{
color:#B82424;
text-decoration:none;
}
div.catbox
{
    height: auto;
    padding-top: 10px;
}
div.catbox .cats
{
    padding-top:5px;
    color:Black;
}

div.keysubbox
{
    clear:left;
    width:852px;
}
div.keysub
{
    float:left;
    padding: 5px 10px 0 0;
}
div.keysub a:hover, a:active 
{
color:#B82424;
text-decoration:none;
}
div.keysub a
{
    text-decoration:none;
}
div.keysublogo
{
    font-weight:bold;
    color:black;
    float:left;
    width:210px;
    text-align:right;
    padding: 5px 10px 0 0;
}
div.footer
{
    width:950px;
    height:30px;
}
div.gridwrap
{
    width:950px;
    height:30px;
}
div.colbelowwrap
{
    height:45px;
    border: solid 1px black;
    width:950px;
    color:White;
    margin:0px auto;
    background-color:black;
    text-align:center;
    font-size:13pt;
    padding: 10px 0 0 0;
}
div.basicgrid
{
    width:950px;
    margin:0px auto;
    text-align:left;
    padding: 5px 0 10px 0;
    font-size: 10px;
    font-family:Tahoma;
}
div.hiddenCDDesc
{
    visibility:hidden;
    position:absolute;
    top:1;
    left:-600;
}
#footer 
{
background:#000000;
color:#FFFFFF;
font-size:9px;
height:20px;
line-height: 20px;
padding:6px 0pt 5px;
width:950px;
}
#footer p {
margin:0pt;
padding:0pt;
text-align:center;
}
div.colsearch a{text-decoration:none; color:white;}
div.colsearch a:hover, a:active{color: #B82424; text-decoration:none;}

/**
 * Overwrite for having a carousel with dynamic width.
 */
.jcarousel-skin-tango .jcarousel-container-horizontal {
    width:868px;
    padding:0 30px 0 55px;
}

.jcarousel-skin-tango .jcarousel-clip-horizontal {
    width: 846px;
    height:auto;
}

.jcarousel-skin-tango .jcarousel-container {
	background: none;
	border:0px;
}

#mycarousel li, .jcarousel-item-vertical, .jcarousel-item-placeholder-vertical {
	height:auto;
	margin:5px 0;
	width:270px;
	color:#666666;
	font-family:verdana,arial,sans-serif;
	font-size:10px;
	font-size-adjust:none;
	font-style:normal;
	font-variant:normal;
	font-weight:normal;
	line-height:normal;
	text-align:center;
}

.jcarousel-skin-tango .jcarousel-container {
	-moz-border-radius-bottomleft:0px;
	-moz-border-radius-bottomright:0px;
	-moz-border-radius-topleft:0px;
	-moz-border-radius-topright:0px;
}

.hiddenInViewSource
{
	visibility:hidden;
}