/* CSS Document */


#pagetitle {
    margin:0 auto 20px;
    width:930px;
    height:40px;
    background:url(../images/pagetitle_bg.png) repeat;
    padding:10px;
}

#pagetitle h2 {
    font-size:20px;
    font-weight:bold;
    background:url(../images/pagetitle_bg_inner.jpg) no-repeat left top;
    padding:4px 10px 0;
    width:910px;
    height:36px;
    letter-spacing:1px;
}




#main {
    clear:both;
    width:950px;
    margin:0 auto;
    min-height:500px;
}

#left {
    width:665px;
    padding:0 20px 0 0;
    margin:0;
    float:left;
    display:inline;
}

#right {
    width:265px;
    padding:0;
    margin:0;
    float:right;
    display:inline;
}




/* Artists_Alphabet-------------------------------------------------------------- */

#line1, #line2 {
    width:195px;
    float:left;
    display:inline;
    margin-right:30px;
}

#line3 {
    width:195px;
    float:right;
    display:inline;
    margin-right:20px;
}

#line1 div.alphabet, #line2 div.alphabet, #line3 div.alphabet {
    margin-bottom:30px;
}

#line1 div.alphabet h4, #line2 div.alphabet h4, #line3 div.alphabet h4{
    width:185px;
    height:25px;
    font-size:16px;
    font-weight:bold;
    padding:0 0 0 10px;
    background:url(../images/title_bg_dotted.png) repeat-x left top;
    margin-bottom:10px;
}

#line1 div.artist a, #line2 div.artist a, #line3 div.artist a {
    background:#6884AD;
    padding-bottom:10px;
    margin-bottom:10px;
    width:195px;
    display:block;
    font-weight:bold;
}

#line1 div.artist a:hover, #line2 div.artist a:hover, #line3 div.artist a:hover {
    background:#fff;
    color:#000033;
}

#line1 div.artist img, #line2 div.artist img, #line3 div.artist img {
    margin-bottom:7px;
}

#line1 div.artist p.artistname, #line2 div.artist p.artistname, #line3 div.artist p.artistname {
    margin:0 10px;
    font-weight:bold;
    font-size:12px;
}

#line1 div.artist h3, #line2 div.artist h3, #line3 div.artist h3 {

}

#line1 a, #line2 a, #line3 a {
    text-decoration:none;
}




/* Artists_Genre-------------------------------------------------------------- */

div.leftgenre {
    clear:both;
}

div.leftgenre h4 {
    width:635px;
    height:25px;
    font-size:16px;
    font-weight:bold;
    padding:0 0 0 10px;
    background:url(../images/title_bg_dotted.png) repeat-x left top;
    margin-bottom:10px;
}

div.leftgenre ul {
    clear:both;
}

div.leftgenre ul li {
    float:left;
    display:inline;
    list-style:none;
    margin-right:30px;
}

div.leftgenre ul li.right {
    float:left;
    display:inline;
    list-style:none;
    margin-right:0;
}

div.leftgenre ul li a, div.leftgenre ul li.right a {
    background:#6884AD;
    padding-bottom:10px;
    margin-bottom:30px;
    width:195px;
    display:block;
    font-weight:bold;
    text-decoration:none;
}

div.leftgenre ul li a:hover, div.leftgenre ul li.right a:hover {
    background:#fff;
    color:#000033;
}

div.leftgenre ul li img, div.leftgenre ul li.right img {
    margin-bottom:7px;
}

div.leftgenre ul li p.artistname, div.leftgenre ul li.right p.artistname {
    margin:0 10px;
    font-weight:bold;
    font-size:12px;
    height:36px;
}




/* right colomun-------------------------------------------------------------- */

.selectartist_top {
    background:url(../images/right_search_bg_top.png) no-repeat left top;
    width:265px;
    height:10px;
}

#selectartist {
    background:#fff;
    width:235px;
    padding:5px 15px 15px;
    color:#000033;
}

#selectartist p.title {
    font-size:16px;
    font-weight:bold;
    text-align:center;
    margin-bottom:15px;
}

#selectartist ul.alphabet {
    clear:both;
}

#selectartist ul.alphabet li {
    font-size:14px;
    list-style:none;
    margin:0 5px 5px 0;
    background:#eee;
    width:43px;
    float:left;
    display:inline;
    text-align:center;
    height:24px;
    padding-top:1px;
    color:#70B0F0;
}

#selectartist ul.alphabet li.right {
    margin:0 0 5px 0;
}

#selectartist ul.alphabet li a {
    display:block;
    color:#000033;
    text-decoration:none;
    height:24px;
}

#selectartist ul.alphabet li a:hover {
    color:#fff;
    background:#70B0F0;
    font-weight:bold;
}



/* Genre */
.genre {
    clear:both;
}


#selectgenre { 
    display: block;
    margin: 7px 0;
    padding: 0;
    position: relative;
    width:235px;
}

#selectgenre li {
    display: block;
    list-style: none;
    margin: 0;
    padding: 0;
    float: left;
    position: relative;
    font-size:14px;
    letter-spacing:1px;
}

#selectgenre li a {
    display: block;
    padding: 2px 20px;
    text-decoration: none;
    height:21px;
    width:195px;
}

#selectgenre ul {
    display: none;
    position: absolute;
    left: 0;
    margin: 0;
    width:235px;
}

#selectgenre ul a {
    width:195px;
    padding: 4px 20px 0;
}

* html #selectgenre ul { line-height: 21px; } /* IE6 "fix" */
#selectgenre ul a { zoom: 1; } /* IE6/7 fix */

#selectgenre ul li { float: none; }
#selectgenre ul ul { top: 0; }
     
#selectgenre a { 
    background:url(../images/genre_title_bg.gif) no-repeat left top;
    color: #000033;
    font-weight:bold;
    text-align:center;
}

#selectgenre li a.hover { 
    background:url(../images/genre_title_bg_on.gif) no-repeat left top;
    color: #3592CF;
    font-weight:bold;
    text-align:center;
}

#selectgenre ul { top: 25px; }

#selectgenre ul li a { 
    background:url(../images/genre_genre_bg.gif) no-repeat left top;
    color: #000033;
    font-weight:normal;
    text-align:left;
}

#selectgenre ul a.hover {
    background:url(../images/genre_genre_bg_on.gif) no-repeat left top;
    color: #fff;
    text-align:left;
}

/* #selectgenre ul a { border-bottom: none; } - I also needed this for IE6/7 */


.selectartist_bottom {
    background:url(../images/right_search_bg_bottom.png) no-repeat left top;
    width:265px;
    height:10px;
    margin-bottom:20px;
}






div.marrock {
    background:url(../images/marrock_bg.png) repeat-y;
    width:235px;
    padding:0 15px 5px 15px;
}

.marrock_bottom {
   background:url(../images/marrock_bg_bottom.png) no-repeat left top;
   width:265px;
   height:10px;
   margin-bottom:10px;
}

div.martrax {
    background:url(../images/martrax_bg.png) repeat-y;
    width:235px;
    padding:0 15px 5px 15px;
}

.martrax_bottom {
   background:url(../images/martrax_bg_bottom.png) no-repeat left top;
   width:265px;
   height:10px;
   margin-bottom:20px;
}

div.otherwebsite,div.otherwebsite_bottom {
    width:265px;
    margin:10px 0;
    height:99px;
    clear:both;
}

div.otherwebsite {
    border-bottom:1px dotted #585875;
}

div.otherwebsite p.left,div.otherwebsite_bottom p.left{
    float:right;
    display:inline;
    width:166px;
}

div.otherwebsite p.right,div.otherwebsite_bottom p.right {
    float:left;
    display:inline;
    width:89px;
    margin-right:10px;
}