html { color: #fff; font-size: 12px; line-height: 1.5; font-family: "Helvetica Neue", Helvetica, Arial, Geneva, sans-serif; height: 100%; text-shadow: 0 1px 0 #000; } body { margin: 0; padding: 0; background: #4e5969; overflow-y: scroll; height: 100%; } body.noscroll { overflow: hidden; } #clean { background: transparent !important; } * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } pre { white-space: pre-wrap; word-wrap: break-word; } input, textarea { font-size: 12px; font-family: "Helvetica Neue", Helvetica, Arial, Geneva, sans-serif; } input:-moz-placeholder, textarea:-moz-placeholder { color: rgba(255, 255, 255, 0.6); } ::-webkit-input-placeholder, ::-webkit-textarea-placeholder { color: rgba(255, 255, 255, 0.6); } a img { border:none; } a { text-decoration:none; color: #ebfcbc; outline: 0; cursor: pointer; font-weight: bold; } a:hover { color: #f3f3f3; } .page { display: none; width: 960px; margin: 0 auto; line-height: 24px; padding: 0 0 20px; } .page.active { display: block; } .page .noticeMe { background-color: lightgoldenrodyellow; display: block; padding: 20px 10px; margin: 0 -10px 40px; font-size: 19px; text-align: center; } .content { clear:both; padding: 80px 0 10px; } .footer { text-align:center; padding: 50px 0 0 0; color: #999; font-size: 10px; clear: both; } .footer .check { color: #333; } #toTop { background: black; position: fixed; bottom: 0; right: 0; padding: 10px 10px 10px 40px; background: #f7f7f7 url('../images/toTop.gif') no-repeat 10px center; border-radius: 5px 0 0 0; } form { padding:0; margin:0; } body > .spinner, .mask{ background: rgba(0,0,0, 0.9); z-index: 100; text-align: center; } body > .mask { position: fixed; top: 0; left: 0; height: 100%; width: 100%; padding: 200px; } .button { background: #5082bc url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAyCAYAAACd+7GKAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAClJREFUeNpi/v//vwMTAwPDfzjBgMpFI/7hFSOT9Y8qRuF3JLoHAQIMAHYtMmRA+CugAAAAAElFTkSuQmCC") repeat-x; padding: 5px 10px 6px; color: #fff; text-decoration: none; font-weight: bold; line-height: 1; border-radius: 5px; box-shadow: 0 1px 3px rgba(0,0,0,0.5); text-shadow: 0 -1px 1px rgba(0,0,0,0.25); border-bottom: 1px solid rgba(0,0,0,0.25); cursor: pointer; } .button.red { background-color: #ff0000; } .button.green { background-color: #2aa300; } .button.orange { background-color: #ffa200; } .button.yellow { background-color: #ffe400; } /*** Icons ***/ .icon { display: inline-block; background: center no-repeat; } .icon.delete { background-image: url('../images/icon.delete.png'); } .icon.download { background-image: url('../images/icon.download.png'); } .icon.edit { background-image: url('../images/icon.edit.png'); } .icon.completed { background-image: url('../images/icon.check.png'); } .icon.folder { background-image: url('../images/icon.folder.png'); } .icon.imdb { background-image: url('../images/icon.imdb.png'); } .icon.refresh { background-image: url('../images/icon.refresh.png'); } .icon.rating { background-image: url('../images/icon.rating.png'); } .icon.files { background-image: url('../images/icon.files.png'); } .icon.info { background-image: url('../images/icon.info.png'); } .icon.trailer { background-image: url('../images/icon.trailer.png'); } .icon.spinner { background-image: url('../images/icon.spinner.gif'); } .icon.attention { background-image: url('../images/icon.attention.png'); } /*** Navigation ***/ .header { background: #4e5969; padding: 10px 0; height: 80px; position: fixed; margin: 0; width: 100%; z-index: 5; box-shadow: 0 20px 30px -30px rgba(0,0,0,0.05); transition: box-shadow .4s cubic-bezier(0.9,0,0.1,1); } .header.with_shadow { box-shadow: 0 20px 30px -30px rgba(0,0,0,0.3); } .header > div { width: 960px; margin: 0 auto; overflow: hidden; } .header .navigation { display: inline-block; vertical-align: middle; width: 67.2%; } .header .navigation ul { margin: 0; padding: 0; } .header .navigation li { color: #fff; display: inline-block; font-size:20px; font-weight: bold; margin: 0; text-align: center; } .header .navigation li a { display: block; padding: 15px; position: relative; } .header .navigation li:first-child a { padding-left: 10px; } .header .navigation li span { display: block; margin-top: 5px; } .header .navigation li a:after { content: ''; display: inline-block; height: 2px; width: 76%; left: 12%; position: absolute; top: 46px; background-color: #46505e; outline: none; box-shadow: inset 0 1px 8px rgba(0,0,0,0.05), 0 1px 0px rgba(255,255,255,0.15); transition: all .4s cubic-bezier(0.9,0,0.1,1); } .header .navigation li:hover a:after { background-color: #047792; } .header .navigation li.active a:after { background-color: #04bce6; } .header .navigation li.disabled { color: #e5e5e5; } .header .navigation li a { color: #fff; } .header .navigation .backtotop { opacity: 0; display: block; width: 80px; left: 50%; position: absolute; text-align: center; margin: -10px 0 0 -40px; background: #4e5969; padding: 5px 0; border-radius: 0 0 5px 5px; color: rgba(255,255,255,.4); text-shadow: none; font-weight: normal; } .header:hover .navigation .backtotop { color: #fff; } .header .more_menu { margin-left: 12px; } .header .more_menu .wrapper { width: 150px; margin-left: -110px; } .header .more_menu .wrapper:before { margin-left: -34px; } .header .more_menu .red { color: red; } .header .more_menu .orange { color: orange; } .badge { position: absolute; width: 14px; height: 14px; text-align: center; line-height: 14px; border-radius: 50%; font-size: 8px; margin: -5px 0 0 15px; box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 0 3px rgba(0,0,0,.7); background-color: #1b79b8; text-shadow: none; background-image: linear-gradient(0deg, rgba(255,255,255,.3) 0%, rgba(255,255,255,.1) 100%); } .header .notification_menu .wrapper { width: 300px; margin-left: -260px; text-align: left; } .header .notification_menu .wrapper:before { left: 296px; } .header .notification_menu ul { max-height: 300px; overflow: auto; } .header .notification_menu > a { background-position: center -209px; } .header .notification_menu li > span { padding: 5px; display: block; border-bottom: 1px solid rgba(0,0,0,0.2); word-wrap: break-word; } .header .notification_menu li > span { color: #777; } .header .notification_menu li:last-child > span { border: 0; } .header .notification_menu li .added { display: block; font-size: 10px; color: #aaa; text-align: ; } .header .notification_menu li .more { text-align: center; } .header .message.update { text-align: center; position: relative; top: -70px; padding: 2px 0; background: #ff6134; font-size: 12px; border-radius: 0 0 5px 5px; box-shadow: 0 2px 1px rgba(0,0,0, 0.3); } .header .message a { padding: 0 10px; } /*** Global Styles ***/ .check { display: inline-block; vertical-align: middle; height: 16px; width: 16px; cursor: pointer; background: url('../images/sprite.png') no-repeat -200px; } .check.highlighted { background-color: #424c59; } .check.checked { background-position: -2px 0; } .check.indeterminate { background-position: -1px -119px; } .check input { display: none !important; } .select { cursor: pointer; display: inline-block; color: #fff; } .select .selection { display: inline-block; padding: 0 30px 0 20px; border-radius:30px; box-shadow: 0 1px 1px rgba(0,0,0,0.35), inset 0 1px 0px rgba(255,255,255,0.20); background: url('../images/sprite.png') no-repeat 94% -53px, linear-gradient( 270deg, #5b9bd1 0%, #406db8 100% ); } .select .selection .selectionDisplay { display: inline-block; padding-right: 15px; border-right: 1px solid rgba(0,0,0,0.2); box-shadow: 1px 0 0 rgba(255,255,255,0.15); } .select .menu { clear: both; overflow: hidden; font-weight: bold; } .select .list { display: none; background: #282d34; border: 1px solid #1f242b; position: absolute; margin: 28px 0 0 0; box-shadow: 0 20px 20px -10px rgba(0,0,0,0.4); border-radius:3px; z-index: 3; } .select.active .list { display: block; } .select .list ul { display: block; width: 100% !important; } .select .list li { padding: 0 33px 0 20px; margin: 0 !important; display: block; border-top: 1px solid rgba(255,255,255,0.1); white-space: nowrap; } .select .list li.highlighted { background: rgba(255,255,255,0.1); border-color: transparent; } .select input { display: none; } .inlay { color: #fff; border: 0; border-radius:3px; background-color: #282d34; box-shadow: inset 0 1px 8px rgba(0,0,0,0.25), 0 1px 0px rgba(255,255,255,0.25); } .inlay.light { background-color: #47515f; outline: none; box-shadow: inset 0 1px 8px rgba(0,0,0,0.05), 0 1px 0px rgba(255,255,255,0.15); } .inlay:focus { background-color: #3a4350; outline: none; } .onlay, .inlay .selected, .inlay:not(.reversed) > li:hover, .inlay > li.active, .inlay.reversed > li { border-radius:3px; border: 1px solid #252930; box-shadow: inset 0 1px 0px rgba(255,255,255,0.20), 0 0 3px rgba(0,0,0, 0.2); background: rgb(55,62,74); background-image: linear-gradient( 90deg, rgb(55,62,74) 0%, rgb(73,83,98) 100% ); } .onlay:active, .inlay.reversed > li:active { color: #fff; border: 1px solid transparent; background-color: #282d34; box-shadow: inset 0 1px 8px rgba(0,0,0,0.25), 0 1px 0px rgba(255,255,255,0.25); } .question { display: block; width: 600px; padding: 20px; background: #f5f5f5; position:fixed; z-index:101; text-align: center; background: #5c697b; border-radius: 3px; box-shadow: 0 0 50px rgba(0,0,0,0.55); } .question h3 { font-size: 25px; padding: 0; margin: 0 0 20px; } .question .hint { font-size: 14px; color: #ccc; text-shadow: none; } .question .answer { font-size: 17px; display: inline-block; padding: 10px; margin: 5px 1%; cursor: pointer; width: auto; } .question .answer:hover { background: #000; } .question .answer.delete { background-color: #a82f12; } .question .answer.cancel { margin-top: 20px; background-color: #4c5766; } .more_menu { display: inline-block; vertical-align: middle; } .more_menu > a { display: block; background: url('../images/sprite.png') no-repeat center -137px; height: 25px; width: 25px; border: 1px solid rgba(0,0,0,0.3); transition: all 0.3s ease-in-out; } .more_menu.show > a:not(:active), .more_menu > a:hover:not(:active) { background-color: #406db8; } .more_menu .wrapper { display: none; border: 1px solid #333; background: rgba(255,255,255,0.98); border-radius: 3px; padding: 4px !important; position: absolute; z-index: 9; margin: 32px 0 0 -145px; width: 185px; box-shadow: 0 10px 10px -5px rgba(0,0,0,0.4); text-align: center; color: #000; text-shadow: none; background-image: linear-gradient( 45deg, rgb(200,200,200) 0%, rgb(255,255,255) 100% ); } .more_menu .wrapper:before { content: ' '; height: 0; position: relative; width: 0; border: 6px solid transparent; border-bottom-color: #fff; display: block; top: -16px; left: 146px; } .more_menu.show .wrapper { display: block; } .more_menu ul { padding: 0; margin: -12px 0 0 0; list-style: none; } .more_menu .wrapper li { width: 100%; height: auto; } .more_menu .wrapper li a { display: block; border-bottom: 1px solid rgba(255,255,255,0.2); box-shadow: none; font-weight: normal; font-size: 11px; text-transform: uppercase; letter-spacing: 1px; padding: 3px 0; color: #000; } .more_menu .wrapper li:last-child a { border: none; } .more_menu .wrapper li a:hover { background: rgba(0,0,0,0.05); } .messages { position: fixed; right: 0; bottom: 0; padding: 2px; width: 240px; z-index: 2; overflow: hidden; font-size: 14px; font-weight: bold; } .messages .message { text-align: center; border-radius: 2px; margin: 2px 0 0 0; height: 0; overflow: hidden; transition: all .6s cubic-bezier(0.9,0,0.1,1); box-shadow: 0 1px 1px rgba(0,0,0,0.35), inset 0 1px 0px rgba(255,255,255,0.20); background-image: linear-gradient( 270deg, #5b9bd1 0%, #406db8 100% ); width: 100%; padding: 0 5px; visibility: hidden; max-height: 0; } .messages .message.show { visibility: visible; height: auto; padding-top: 3px; padding-bottom: 3px; min-height: 1px; max-height: 400px; } .messages .message.hide { margin-left: 240px; opacity: 0; }