/* 
----------------------------------------------------------------------------- 
QUICK-SERACH
-----------------------------------------------------------------------------*/
#qsWrapper {
    height: 44px;
    padding-top:20px;
}

#qsWrapper input,
#qsWrapper select {
    float: left;
}

.qsWrapper label span,
#asWrapper label span {
    font-weight: normal;
    font-size:10px;
    line-height:10px;
    color:#858585;
}

.qsWrapper {
    padding: 0 10px 0 20px;
    border-style: solid;
    border-color: #ddd;
    border-width: 1px;
    border-radius: 4px;
}
.qsWrapper h2 {
    height: 13px;
    line-height: 13px;
    margin-bottom: 4px;
    float:left;
}

.qsWrapper input.text {
    box-sizing: border-box;
    width: 658px;
    height: 26px;
    margin-right: 20px;
    border-color: #009FE3;
}
.qsWrapper select {
    width: 140px;
    margin-right: 14px;
    border-color: #009FE3;
}

/* 
----------------------------------------------------------------------------- 
ADVANCED-SERACH
-----------------------------------------------------------------------------*/
#asWrapper {
    width: 100%;
    overflow:hidden;
    display: block;
    margin-top: 22px;
    /*	padding-bottom:17px;
            *padding-bottom:7px;
            margin-bottom:17px;
            border-bottom:1px solid #b4b4b4;*/
}

#asWrapper h2 {
    height: 13px;
    line-height: 13px;
    margin: 15px 20px;
    text-indent: -9999em;
}

#asWrapper .c-1 {
    width: 550px;
    padding:0 12px 0 10px;
    background: url(../images/dotted-v.gif) repeat-y 562px 0;
}

#asWrapper .c-2 {
    width: 400px;
}
#asWrapper .c-2 p {
    margin-bottom: 11px;
}

#asWrapper input.text, #asWrapper input.date {
    width: 169px;
    height: 26px;
    margin-top:2px;
    box-sizing: border-box;
}

#asWrapper select {
    width: 169px;
    height: 26px;
    margin-top:2px;
    box-sizing: border-box;
}
.script #asWrapper .fsAsMulti select {
    width: 161px;
}

#asWrapper select .datePoser {
    margin-bottom:5px;
}

#asWrapper .fsWrapper {
    width:541px;
    margin-bottom: 17px;
}

#asWrapper .asSingle {
    padding-top:5px;
    border-style: solid;
    border-color: #ddd;
    border-width: 1px;
    border-radius: 4px;
}
.script #asWrapper .fsAsMulti { 
    padding:0
}
#asWrapper .fsAsMulti .field {
    padding-top:0;
    padding-bottom:0;
}
#asWrapper .fsAsMulti .first {
    margin-top:5px;
}

#asWrapper .asSubmit {
    padding-top:5px;
}
#asWrapper .fsAsSubmit {
    padding:8px 0 9px;
}

#asWrapper .fsAsSubmit .left {
    float:left;
    margin-top:15px;
    padding-left: 6px;

    /* Opera would need padding-top:0, but then Safari
    would need the 4px again, so instead of two additional
    hack rules in here, we simply let Opera be. */
    padding-top:2px; /* ff-adjust */
    *padding-top:0;
    padding-left:10px;
    *padding-left:6px;

    margin-top:0;
}

#asWrapper .fsAsSubmit .right {
    float:right;
    padding-right: 10px;
    width:169px;
}

#asWrapper .fsAsSubmit .right input {
    float:right;
    margin-top:14px;
}

#asWrapper .fsAsSubmit label {
    position:relative;
    top: 2px;
    *top:-2px;
}

#asWrapper .field {
    float:left;
    padding:14px 4px 5px;	
}

#asWrapper .firstFixedHeight {
    padding-left:10px;
    height: 55px;
}

#asWrapper .first {
    padding-left:10px;
}
#asWrapper .fsReset a {
    text-decoration: none;
    color: #313131;
    position: relative;
    left: 10px;
    top: -2px;
}
#asWrapper .fsReset a:hover {
    color: #009FE3;
}        

#asWrapper .fieldWidget input{            
    /*            display: inline*/
}

#asWrapper .fieldWidget .ui-button{            
    top:-1px;
    margin-right:-1px;
    height:15px;
    float:right
}

/* AdvancedSearch Toggle */
/* NOTE - we only hide when javascript is enabled */
.script .hide .toggle {
    display:none;
}
.script #asWrapper.hide {
    background:#fff;
    border-bottom:none;
    margin-bottom:0;
    padding-bottom:0;
}
.script #asWrapper h2 {
    cursor:pointer;
    background-position:0;
}
.script #asWrapper.hide h2 {
    background-position:13px 0;
}
.script #asWrapper h2 span.arrow-left {
    display:block;
    width:13px;
    background-position:-13px 0;
}
.script #asWrapper.hide h2 span.arrow-left {
    background:url(../images/arrow-left.gif) left top no-repeat;
}

/* Field Toggle */
/* 
----------------------------------------------------------------------------- 
RESULTS
-----------------------------------------------------------------------------*/
table.resultlist .col-cover { width:72px; }
table.resultlist .col-prelisten { width:38px; }
table.resultlist .col-artist { width:156px; }
table.resultlist .col-product { width:220px; }
table.resultlist .col-medium { width:123px; }
table.resultlist .col-date { width:95px; }
table.resultlist .col-ean { width:93px; }
table.resultlist .col-status { width:59px; }

.resultlist a {
    color:#3F3F3F;
    text-decoration:none;
}
.resultlist tbody a:visited,
.resultlist tbody tr td:visited {
    color:#319192;
    text-decoration:none;
}

#overlay,
#details {
    display: none;
}
#pageSize {
    display: inline;
}

.resultlist thead .cover {
    padding-left:19px;
}

.resultlist tbody .cover {
    width:40px;
    height:40px;
    background-position: center center;
    background-repeat: no-repeat;
    border:1px solid black;
    margin:0 0 0 19px;
    display:block;

    /* Bugfix IE6 flicker */
    _filter: expression(document.execCommand("BackgroundImageCache", false, true));
}

.resultlist tr.status-3 td a {
    /* text color for unavailable products */
    color:#707070;
    text-decoration:line-through;
}
/**
     * NOTE - Make Items readable when hovering over 
     *        We define a rule for fallback and for javascript enabled.
     */
.resultlist tr.status-3 td a:hover {
    text-decoration:none;
}
.resultlist tr.status-3 td a:visited {
    color:#319192;
}
.resultlist tr.hover td a {
    text-decoration: none;
}

.resultlist tr.status-3 .cover {
    opacity: 0.2;
    -moz-opacity: 0.2;
}
.resultlist tr.status-3 .cover:hover {
    opacity: 1;
    -moz-opacity: 1;
    border-color:#ccc;
}


/* 
----------------------------------------------------------------------------- 
DETAIL
-----------------------------------------------------------------------------*/
#detail, #detailInfo  {
    float:left;
    width:100%;
    padding-bottom: 20px;
    margin:1px 0 0;
    background: white;
}

#detailInfo {
    padding: 6px 0 6px 20px;
    border-top: 1px solid #B4B4B4;
}

#detail h3, #detailInfo h3 {
    font-size: 26px;
    line-height: 26px;
    font-weight: bolder;
    letter-spacing: 0.01em;
    text-transform: uppercase;
    margin-bottom:2px;
    color:#2B2B2B;
}

#detail h4, #detailInfo h4 {
    font-size: 16px;
    line-height: 16px;
    font-weight:bold;
    text-transform: uppercase;
    /*margin-bottom: 22px;*/
}

form#frm-order {
    /* */
}

/* Opera messes up the button without this float */
form#frm-order button {
    float:left;
}

#detail .c-0 {
    text-align: center;
}

/* left */
#detail .c-1 {
    width:300px;
    padding:0 20px;
}
#detail.small .c-1 {
    width:80px;
}
#detail.small .cover {
    display:block;
    margin-top:20px;
    min-height:80px;
}
#detail .cover {
    display:block;
    margin-top:20px;
    min-height:300px;
}
#detail .cover span,
#detail .cover a {
    position:absolute;
    width:300px;
    height:300px;
    margin:0;
    border:1px solid black;
    background-position: center center;
    background-repeat: no-repeat;
    cursor: default !important;
}
#detail.small .cover span,
#detail.small .cover a {                
    width:80px;
    height:80px;
}
#detail .cover a {
    border:none;
}
#detail .cover a:hover span.front {
    visibility: hidden;
}
#detail .cover a:hover { 
    /* Workaround IE6 */
    border:1px solid black;
}

#detail .cover span.preloader {
    background-color:#F7F6F5;

    line-height:300px;
    text-align:center;
    color:#009FE3;
    font-weight:bold;
    text-decoration:blink;
}

#detail .coverFormats {
    padding:5px 10px;
    background:#F7F6F5;
}

#detail .coverFormats p {
    margin-bottom:2px;
    font-weight:bold;
}

#detail strong {
    float: left;
    font-weight: bold;
    font-size: 16px;
    line-height: 24px;
    margin-right: 8px;
}
#detail .quantity {
    float: left;
    width: 30px;
    margin-right: 8px;
}
#detail em {
    float: left;
    font-style: normal;
    font-size: 11px;
    line-height: 14px;
    margin-right: 8px;
    position: relative;
    top: 6px;		
}	


/* right */
#detail .c-2 {
    width:600px;
    padding:20px 20px 0;
}
#detail.small .c-2 {
    width:600px;        
}

/* productlist */
table.productlist {
    width:100%;
    clear: both;
    margin-left:-10px;
}
table.productlist #name {
    width:130px;
}	
table.productlist #value {
    width:320px;
}
table.productlist thead {
    background:none !important;
}
table.productlist tr.even {
    background-color:#f7f6f5;
}
table.productlist tr.odd {
    /*background-color:#eee;*/
}
table.productlist th {
    padding:3px 10px;
}
table.productlist td {
    padding:3px 10px 3px 0;
}


/* tracklist */
#tracks {
    border-top:1px solid #B4B4B4;
    padding-bottom:20px;
    width:100%;
}

#tracks h2 {
    height: 13px;
    line-height: 13px;
    margin: 15px 20px;
    text-indent: -9999em;
}

table.tracklist #track { width:57px; }	
table.tracklist #artist { width:156px; }
table.tracklist #name { width:210px; }	
table.tracklist #time { width:60px; }	
table.tracklist #others { width:262px; }
table.tracklist #prelistening { width:110px; }
/*table.tracklist #isrc { width:120px; }*/

table.tracklist td {
    vertical-align: top;
}

a.btn-prelisten {
    position:relative;
    width:24px;
    height:24px;
    clear:none;
    float:left;
    margin:0 10px 0 0;
}

a.track-prelisten { background-image:url(../images/btn-play.gif); }
a.track-preview { background-image:url(../images/btn-play-flv.gif); }
a.track-prelisten-rm { background-image:url(../images/btn-play-rm.gif); }
a.track-prelisten-wm { background-image:url(../images/btn-play-wm.gif); }

.icon,
.icon-status {
    width:24px;
    height:24px;
    text-indent:-9999em;
    text-align:left;
    display:block;
    overflow:hidden;
    background-repeat:no-repeat;
    background-position:0 0;
}

.icon-status {
    margin-left:10px;
}

.icon-status-0 { background-image:url(../images/icon-status-unavailable.gif); }
.icon-status-1 { background-image:url(../images/icon-status-new.gif); }
.icon-status-2 { background-image:url(../images/icon-status-modified.gif); }
.icon-status-3 { background-image:url(../images/icon-status-unavailable.gif); }
.icon-prelisten { background-image:url(../images/icon-prelisten.gif); }
.icon-listing { background-image:url(../images/icon-listing.gif); }

.unsorted { 
    background:url(../images/btn-unsorted.gif) 100% 50% no-repeat;
    padding-right:18px;
}
.sorted-desc { 
    background:url(../images/btn-sort-desc.gif) 100% 50% no-repeat;
    padding-right:18px;
}
.sorted-asc {
    background:url(../images/btn-sort-asc.gif) 100% 50% no-repeat;
    padding-right:18px;
}

table.pager {
    width:100%;
    clear:both;
    position:relative;
}
table.pager#pagerTop {
    background:url(../images/dotted-h.gif) 50% 0 repeat-x;
}

table.pager#pagerBottom {
    background:url(../images/dotted-h.gif) 50% 100% repeat-x;
    margin-bottom:20px;
}

.pager td {
    padding:5px 19px 4px;
}

.pager td.pager-links {
    padding:5px 0 4px;
}

.pager td.pager-links span,
.pager td.pager-links a {
    float:left;
    clear:none;

    font-size:11px;
    font-weight:bold;
    padding:4px 4px 2px 4px;
    margin:0 2px;
}

.pager td.pager-links a {
    color:#009FE3;
    text-decoration:none;
    padding-bottom:0;
    border-bottom:1px solid #fff;
    outline:0;
}

.pager td.pager-links a:hover {
    border-bottom:1px solid #009FE3;
}

.pager td.pager-hits {
    text-align:right;		
}

.pager label,
.pager select {
    display:inline;
    clear:none;
}
.pager select {
    margin-left:4px;
}

.pager td.pager-links a.btn-prev,
.pager td.pager-links a.btn-next,
.pager td.pager-links a.btn-prev:hover,
.pager td.pager-links a.btn-next:hover  {
    padding:0;
    text-decoration:none;
    border:none;
}

.pager td.pager-links a.btn-prev {
    background-image:url(../images/btn-prev.gif);
}

.pager td.pager-links a.btn-next {
    background-image:url(../images/btn-next.gif);		
}