@import url(reset.css);

body{ color: #333; font-family: "Lucida Grande", Verdana, Arial, Helvetica, sans-serif; font-size: 10.5px; text-align: center; }
* :focus { outline:none }

#wrapper{ margin: 0 auto 2em auto; text-align: left; width: 960px; }

#header{ background: url(img/header-bg.png) repeat-x; font-size: 1.2em; margin-bottom: 2em; position: relative; }
#header img{ border-right: 1px solid #fff; position: relative; left: -15px; top: 0; }
#header .tagline{ color: #999; font-family: Tahoma, Geneva, sans-serif; font-size: 0.9em; position: absolute; line-height: 29px; top: 0; left: 225px; text-align: right; font-weight: bold; }
#header ul{ position: absolute; line-height: 29px; top: 0; right: 0.7em; text-align: right; text-transform: uppercase; }
#header li{ display: inline; margin-left: 1em; }
#header a{ color: #555; text-decoration: none; }

#artist-list ol{ float: left; line-height: 1.6em; text-transform: uppercase; width: 160px; }
#artist-list li a{ color: #333; cursor: pointer; display: block; font-size: 1.1em; text-decoration: none; }
#artist-list li a:hover{ color: #aaa; }
#artist-list li a.active{ color: #000; font-weight: bold; }

#index-featured{ height: 350px; margin-bottom: 3em; width: 100%; }
#index-featured li{ float: left; display: none; margin-left: 1px; overflow: hidden; width: 319px; }
#index-featured .artist{ color: #999; display: block; font-size: 1.2em; }
#index-featured .photo-title{ color: #666; display: block; font-size: 1.2em; font-weight: normal; text-transform: uppercase; }
#index-featured a{ text-decoration: none; }
#index-featured a:hover .artist, #index-featured a:hover .photo-title{ color: #333; }
#index-featured img{ height: 300px; width: 320px; }

#artist-controls{ height: 1em; margin-bottom: 4em; position: relative; text-align: center; }
#artist-controls a{ color: #777; line-height: 18px; text-decoration: none; }
#artist-controls a:hover{ color: #222; }
#artist-controls a.disabled{ color: #ddd; }
#artist-controls #prevartist{ background: url(img/prev-arrow.png) no-repeat left -18px; padding-left: 25px; position: absolute; left: 0; top: 0; }
#artist-controls #nextartist{ background: url(img/next-arrow.png) no-repeat right -18px; padding-right: 25px; position: absolute; right: 0; top: 0; }
#artist-controls #prevartist:hover{ background-position: left -36px; }
#artist-controls #nextartist:hover{ background-position: right -36px; }
#artist-controls #prevartist.disabled{ background-position: left 0; cursor: default; }
#artist-controls #nextartist.disabled{ background-position: right 0; cursor: default; }
#artist-controls .artist-list-toggle{ font-weight: bold; margin: 0 auto; }


.artist .artist-features{ display: none; position: relative; }
.artist .artist-features .nice-url{ background: #0000ff; display: block; height: 20px; position: absolute; right: 0; top: 0; width: 20px; }

#artist-wrapper{ display: none; padding-top: 2em; overflow-x: hidden; overflow-y: visible; width: 960px; }
#artist-container{ position: relative; height: 900px; overflow-x: hidden; overflow-y: visible; width: 1920px; }

.artist .photos{ float: left; width: 620px; }
.artist .photos img.queue{ display: none; }

.artist .buttons{ cursor: default; text-align: right; }
.artist .buttons li{ color: #999; border: 1px solid #fff; border-width: 0 0 1px 1px; float: right; }
.artist .buttons span{ display: block; float: left; padding: 0.3em 0.7em; }
.artist .buttons a{ background: #ccc; color: #fff; display: block; float: left; font-weight: bold; padding: 0.3em 0.7em; text-decoration: none; }
.artist .photo-controls a:hover{ background: #aaa; }
.artist .download li{ border-width: 0 1px 1px 0; float: left; }
.artist .download a:hover{ background: #8eac8f; }
.artist .buttons a.disabled{ background: #ccc; color: #ddd; }
.artist .buttons a.disabled:hover{ background: #ccc; }

.artist .info{ float: right; font-size: 1.15em; width: 310px; }
.artist .info h2{ font-size: 2.2em; margin-bottom: 0.2em; }
.artist .info h3{ font-size: 1.6em; }
.artist .info p{ margin-top: 1em; }
.artist .info a{ color: #999; }

.artist.current{ position: absolute; top: 0; left:0; width: 960px; }
.artist.next{ position: absolute; top: 0; left: 960px; width: 960px; }
.artist.prev{ position: absolute; top: 0; left: -960px; width: 960px; }

.clear{ clear: both; }