/** Fork Onsite reset */ body, form, ol, ul, dl, li, dt, dd, td, th ,tr, h1, h2, h3, h4, h5, h6, p, pre, blockquote, address { margin: 0; padding: 0; } ol, ul { list-style:none; } img { border:0; } fieldset { margin: 0; padding: 0; border: 0; } input, select, textarea { font-size: 100%; vertical-align: middle; } table { border-collapse: collapse; border-spacing: 0; empty-cells: show; } th { text-align: left; } a:focus { overflow: hidden; } /** Typography and text styles */ body { font: 300 12px "Lucida Grande", sans-serif; line-height: 14px; color: #FFF; background-color: #030303 } /** Headings */ h1, h2, h3, h4 { font-weight: 700; line-height: 1.1; } h1, h2 { margin-top: 10px; padding-bottom: 5px; font-weight: normal; font-size: 25px; } h3 { margin-bottom: 5px; } p { padding: 0 0 14px 0; } small { font-size: 10px; } ul { margin: 0 0 14px 0; } ul ul { margin-left: 7px; } /** Links */ a { text-decoration: none; } a:link, a:visited { color: #FFD700; } a:hover, a:active { color: #808080; } .inverseLinks a:link, a:visited { color: #FFF; } .inverseLinks a:hover, a:active { color: #FFD700; } /** Buttons */ a.linkButton { padding: 4px; background-color: #FFD700; border: 1px solid #333; -moz-border-radius: 4px; -webkit-border-radius: 4px; color: #030303; font-weight: 900; } a.linkButton:hover { border-color: #FFF; color: #FFF; } /** Page structure and layout */ body { background: #030303 url('../images/backgrounds/1.jpg') no-repeat fixed center top; } body.bg02 { background-image: url('../images/backgrounds/2.jpg'); } body.bg03 { background-image: url('../images/backgrounds/3.jpg'); } body.bg04 { background-image: url('../images/backgrounds/4.jpg'); } body.bg05 { background-image: url('../images/backgrounds/5.jpg'); } body.bg06 { background-image: url('../images/backgrounds/6.jpg'); } body.bg07 { background-image: url('../images/backgrounds/7.jpg'); } #header { margin: 15px auto 10px; width: 832px; } #header h1 { margin: 0; padding: 0; } #header h1 a { display: block; height: 39px; width: 309px; background: transparent url('../images/logo.png') no-repeat top left; } #header h1 a span { display: none; } #content { margin: 0 auto; padding: 10px 40px; width: 672px; min-height: 470px; background: transparent url('../images/content_bg.png') no-repeat top left; } /** Player */ #player { position: relative; margin: 0 auto; padding: 1px; width: 722px; height: 475px; background: transparent url('../images/player_bg.jpg') no-repeat top left; } #player #title {position: absolute; display: none; width: 720px; background: transparent url('../images/current_bg.png') repeat-x top left; } #player #title h1 { margin: 0; padding: 5px; } #ytPlayer { width: 720px; height: 406px; background: transparent url('../images/spinner.gif') no-repeat center center; } #getFlashPlayer { background: transparent url('../images/flashplayer.jpg') no-repeat 0 18px; padding: 0 0 0 40px; margin: 10px; } #getFlashPlayer a { color: #FFF; } #enableJavascript { background: transparent url('../images/javascript.jpg') no-repeat 0 18px; padding: 0 0 0 40px; margin: 10px; } #controls { position: absolute; bottom: 0; height: 55px; margin: 5px 0; } #controls .left { float: left; } #controls .right { float: right; width: 640px; } #controls .button { margin: 0 5px 5px 0; background: transparent url('../images/controls.png') no-repeat top left; } #controls .button span { display: none; } #controls a.pause { background-position: 0 0; } #controls a.play { background-position: -80px 0; } #controls a.previous { background-position: -160px 0; } #controls a.next { background-position: -200px 0; } #controls a.mute { background-position: -240px 0; } #controls a.unmute { background-position: -280px 0; } #controls a.pause:hover { background-position: 0 -50px; } #controls a.play:hover { background-position: -80px -50px; } #controls a.previous:hover { background-position: -160px -50px; } #controls a.next:hover { background-position: -200px -50px; } #controls a.mute:hover { background-position: -240px -50px; } #controls a.unmute:hover { background-position: -280px -50px; } #controls #togglePlayPause { display: block; width: 72px; height: 45px; } #controls #previous { display: block; width: 36px; height: 20px; float: left } #controls #next { display: block; width: 36px; height: 20px; float: left; } #controls #toggleMuteUnmute { display: block; width: 36px; height: 20px; float: right; } #controls #time { line-height: 22px; float: right; margin: 0 5px 0 0; font-size: 12px; color: #999; } #controls #slider { margin: 5px 14px 0 7px; } /** Playlist */ #playlist { background: transparent url('../images/playlist_bg.png') repeat top left; } #approve { background: transparent url('../images/playlist_bg.png') repeat top left; } #playlistItems { margin: 0 auto; width: 962px; border-bottom: 1px solid #333; } #playlistItems .item { float: left; padding: 20px; margin-bottom: 10px; width: 146px; overflow: hidden; } #playlistItems .item a:link, #playlistItems .item a:visited { color: #FFF; } #playlistItems .item a:hover, #playlistItems .item a:active { color: #FFD700; } #playlistItems .item a.image { display: block; width: 144px; height: 80px; border: 1px solid #999; } #playlistItems .item h2 { margin: 5px 0 0 0; padding: 0; line-height: 16px; } #playlistItems .item span.title { font-size: 16px; } #playlistItems .item span.mute { font-size: 12px; } #playlistItems .item span.artist { font-size: 14px; } #playlistItems .current { background: transparent url('../images/current_bg.png') repeat-x top left; } #playlistItems .current a:link, #playlistItems .item a:visited { color: #FFD700; } #playlistItems .current a.image { border-color: #FFD700; } /** About */ #about { background: transparent url('../images/current_bg.png') repeat-x top left; } #aboutInner { margin: 0 auto; width: 962px; } #aboutInner .item { float: left; padding: 10px 20px; color: #DDD; } #aboutInner .item h2 { font-size: 16px; margin: 0; padding: 0 0 3px; } #aboutInner .item p { font-size: 11px; padding: 0 0 7px; } /** Forms */ label { font-weight: 900; } input.inputTextfield { margin: 3px 0; } input#artist { width: 290px; } input#title { width: 290px; } .formError { color: #F00; } .formSuccess { padding: 14px 14px 0 14px; margin-bottom: 14px; } .formSuccess .ui-icon { float: left; margin-right: 7px; } .helpText { font-size: 11px; } /* Clearfix */ .clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }