body { background-color: #DCE3F2; background-image: url('img_assets/bg.png'); background-repeat: no-repeat; background-position: center top; background-attachment: fixed; color: #1A237E; font-family: "Trebuchet MS", Tahoma, Arial, sans-serif; margin: 0px; padding: 0px; text-align: center; font-size: 14px; } a { color: #3F51B5; text-decoration: none; } a:hover { color: #FF6600; text-decoration: underline; } .top-bar { background-color: #FFFFFF; border-bottom: 1px solid #C5CAE9; padding: 8px 0; font-size: 13px; filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, StartColorStr='#FFFFFF', EndColorStr='#E8EAF6'); } .top-bar a { color: #1A237E; font-weight: bold; } .top-bar a:hover { color: #FF6600; } .mode-switch { background-color: #3F51B5; color: #FFFFFF !important; padding: 4px 10px; border: 1px solid #1A237E; text-decoration: none !important; filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, StartColorStr='#5C6BC0', EndColorStr='#3F51B5'); } .mode-switch:hover { background-color: #5C6BC0; } .search-input { font-family: "Trebuchet MS", sans-serif; font-size: 12px; width: 180px; padding: 3px 5px; border: 1px solid #9FA8DA; vertical-align: middle; } .search-btn { padding: 2px 8px; font-size: 12px; vertical-align: middle; } .shadow-container { width: 95%; max-width: 1200px; margin: 30px auto; background-color: #FFFFFF; border: 1px solid #9FA8DA; text-align: left; } .header { background-color: #C5CAE9; background-image: url('img_assets/header.png'); background-repeat: repeat-x; background-position: center left; height: 120px; border-bottom: 2px solid #3F51B5; } .logo-image { display: block; width: 600px; height: 100px; background-image: url('img_assets/logo.png'); background-repeat: no-repeat; _background-image: none; _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/static/img_assets/logo.png', sizingMethod='crop'); } .nav { background-color: #3F51B5; background-image: url('img_assets/nav_bg.png'); background-repeat: repeat-x; background: linear-gradient(180deg, #7986CB 0%, #3F51B5 50%, #1A237E 51%, #283593 100%); padding: 10px 15px 0px 15px; border-bottom: 4px solid #1A237E; text-align: left; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 3px 6px rgba(0, 0, 0, 0.15); position: relative; zoom: 1; } .nav a { display: inline-block; *display: inline; *zoom: 1; padding: 8px 18px; margin: 0 3px 0 0; color: #1A237E; text-decoration: none; font-size: 13px; font-weight: bold; font-family: Tahoma, sans-serif; background-color: #E8EAF6; background-image: url('img_assets/nav_tab.png'); background-repeat: repeat-x; background: linear-gradient(180deg, #FFFFFF 0%, #E8EAF6 50%, #C5CAE9 51%, #E8EAF6 100%); border-top: 1px solid #FFFFFF; border-left: 1px solid #FFFFFF; border-right: 1px solid #9FA8DA; border-bottom: none; border-radius: 8px 8px 0px 0px; position: relative; top: 4px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8); transition: background 0.15s ease, color 0.15s ease; } .nav a:hover { color: #FFFFFF; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); background-color: #5C6BC0; background-image: url('img_assets/nav_tab_hover.png'); background-repeat: repeat-x; background: linear-gradient(180deg, #9FA8DA 0%, #5C6BC0 50%, #3F51B5 51%, #283593 100%); border-top: 1px solid #C5CAE9; border-left: 1px solid #C5CAE9; border-right: 1px solid #1A237E; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 0 8px rgba(63, 81, 181, 0.6); } .nav .dropdown-item { display: block !important; padding: 6px 12px !important; margin: 0 !important; color: #1A237E !important; text-shadow: none !important; text-decoration: none !important; font-size: 11px !important; font-weight: normal !important; background: transparent !important; border: none !important; border-radius: 0 !important; position: static !important; top: 0 !important; box-shadow: none !important; text-align: left !important; } .nav .dropdown-item:hover { color: #FFFFFF !important; text-shadow: none !important; background: #3F51B5 !important; border: none !important; box-shadow: none !important; } .alert-badge { color: #FFFFFF; background-color: #FF3B30; padding: 1px 5px; font-size: 10px; border-radius: 8px; box-shadow: 0 1px 2px rgba(0,0,0,0.4); margin-left: 3px; } .nav a:hover .alert-badge { background-color: #FFFFFF; color: #FF3B30; } .content { padding: 40px; background-color: #FFFFFF; } table.vid-list td { padding: 20px; vertical-align: top; width: 25%; } .banned-bar { background-color: #c0392b; filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, StartColorStr='#ff6b6b', EndColorStr='#c0392b'); color: #FFFFFF; font-weight: bold; text-align: center; padding: 15px; border-bottom: 2px solid #800000; font-size: 16px; } .bulletin-bar { background-color: #FFF176; filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, StartColorStr='#FFF9C4', EndColorStr='#FFF176'); color: #1A237E; font-weight: bold; text-align: center; padding: 15px; border-bottom: 2px solid #FBC02D; font-size: 16px; } .status-bar { background-color: #E8EAF6; border-bottom: 1px solid #C5CAE9; padding: 12px; font-size: 14px; } .vidbox { border: 1px solid #9FA8DA; background-color: #F5F5F5; filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, StartColorStr='#FFFFFF', EndColorStr='#E8EAF6'); padding: 20px; margin-bottom: 20px; } .video-info-box { border: 1px solid #C5CAE9; padding: 15px; margin-bottom: 15px; background-color: #FFFFFF; font-size: 14px; } .vid-frame { width: 160px; height: 120px; background-color: #000; border: 3px solid #E8EAF6; display: block; margin-bottom: 10px; text-align: center; } .vid-frame img { width: 160px; height: 120px; } .vid-title { font-weight: bold; font-size: 16px; margin-bottom: 8px; } .profile-box { border: 1px solid #9FA8DA; background-color: #F5F5F5; margin-bottom: 30px; } .banner-container { width: 100%; height: 150px; background-color: #C5CAE9; border-bottom: 2px solid #9FA8DA; background-position: center center; } .avatar-box { border: 4px solid #FFFFFF; background-color: #FFF; padding: 4px; } .sidebar-box { background-color: #E8EAF6; filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, StartColorStr='#FFFFFF', EndColorStr='#E8EAF6'); border: 1px solid #C5CAE9; padding: 20px; font-size: 14px; width: 220px; } .bio-box { background-color: #FFFFFF; border: 1px solid #C5CAE9; padding: 20px; font-size: 14px; line-height: 1.6; } .admin-stats-box { background-color: #FFF9C4; border: 1px solid #FBC02D; padding: 15px; color: #1A237E; font-size: 14px; } .sidebar-title { font-weight: bold; color: #1A237E; background-image: url('img_assets/divider.png'); background-repeat: repeat-x; background-position: bottom left; margin-bottom: 15px; padding-bottom: 10px; font-size: 16px; } .flash-msg { background-color: #C8E6C9; filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, StartColorStr='#E8F5E9', EndColorStr='#C8E6C9'); border: 1px solid #81C784; padding: 15px; margin-bottom: 25px; font-weight: bold; color: #1B5E20; font-size: 15px; } .footer { padding: 30px; font-size: 13px; color: #1A237E; } .footer a { color: #3F51B5; } button, input[type="submit"], .btn-action { font-family: "Trebuchet MS", Tahoma, sans-serif; font-size: 14px; font-weight: bold; color: #FFFFFF;  background-color: #3F51B5; background-image: url('img_assets/btn.png'); background-repeat: repeat-x; background-position: center; border: 1px solid #1A237E; padding: 6px 15px; cursor: pointer; } button:hover, input[type="submit"]:hover, .btn-action:hover { background-color: #5C6BC0; border: 1px solid #000000; } .rating-star { color: #FFCA28; font-family: monospace; font-weight: bold; font-size: 18px; } .chat-container { height: 500px; overflow-y: scroll; padding: 20px; background-color: #FFFFFF; border: 1px solid #C5CAE9; } .message-row { width: 100%; margin-bottom: 15px; clear: both; } .row-sent { text-align: right; } .row-received { text-align: left; } .message-bubble { display: inline-block; *display: inline; *zoom: 1; padding: 12px 18px; font-size: 14px; position: relative; text-align: left; max-width: 80%; line-height: 1.5; border: 1px solid #C5CAE9; filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, StartColorStr='#FFFFFF', EndColorStr='#E8EAF6'); } .bubble-sent { border-color: #9FA8DA; color: #1A237E; filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, StartColorStr='#E8EAF6', EndColorStr='#C5CAE9'); } .bubble-received { background-color: #FFFFFF; color: #333333; } .message-time { font-size: 11px; color: #7986CB; margin-top: 8px; text-align: right; } .conversation-item { padding: 12px 15px; border-bottom: 1px solid #C5CAE9; cursor: pointer; margin-bottom: 5px; font-size: 14px; } .conversation-item:hover { background-color: #E8EAF6; } .conversation-item.unread { background-color: #E8EAF6; font-weight: bold; border-left: 5px solid #3F51B5; } .community-image-container { display: inline-block; max-width: 45%; border: 2px solid #C5CAE9; padding: 8px; background-color: #FFFFFF; margin: 10px 0; *display: inline; *zoom: 1; } * html .community-image-container { overflow: hidden; } .community-image-container:hover { border-color: #3F51B5; } .community-image-container img { display: block; max-width: 100%; height: auto; } .badge-link, .badge-link-small { position: relative; text-decoration: none; cursor: default; display: inline-block; margin-right: 8px; color: #1A237E; *display: inline; *zoom: 1; } .badge-tooltip { display: none; position: absolute; bottom: 40px; left: -50px; width: 160px; padding: 12px; background-color: #FFFFFF; border: 1px solid #3F51B5; color: #1A237E; font-family: Tahoma, sans-serif; font-size: 13px; text-align: center; z-index: 999; } .badge-link:hover .badge-tooltip, .badge-link-small:hover .badge-tooltip { display: block; } .badge-link:hover { background: none; z-index: 1000; } .badge-link-small .badge-tooltip { bottom: 30px; left: -60px; } html { scrollbar-face-color: #9FA8DA; scrollbar-shadow-color: #7986CB; scrollbar-highlight-color: #C5CAE9; scrollbar-3dlight-color: #E8EAF6; scrollbar-darkshadow-color: #5C6BC0; scrollbar-track-color: #E8EAF6; scrollbar-arrow-color: #1A237E; } @media screen and (max-width: 800px) { body { background-attachment: scroll; font-size: 13px; } .shadow-container, #top-container, .top-bar .container-fluid { width: 100% !important; max-width: none !important; margin: 0 !important; border-left: none; border-right: none; } .top-bar { padding: 5px 0; } .top-bar table, .top-bar tbody, .top-bar tr, .top-bar td { display: block; width: 100% !important; text-align: center !important; } .top-bar td { padding: 5px 10px; } .search-input { width: 60%; margin-bottom: 5px; } .header { height: auto; padding: 15px 0; background-size: cover; } .header table, .header tr, .header td { display: block; width: 100% !important; padding-left: 0 !important; text-align: center; } .logo-image { width: 100%; max-width: 280px; height: 60px; background-size: contain; margin: 0 auto; } .top-bar a { display: inline-block; padding: 5px 8px; margin: 2px; } .nav { padding: 10px 5px 0 5px; overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch; border-bottom-width: 3px; scrollbar-width: none; } .nav::-webkit-scrollbar { display: none; } .nav a { padding: 8px 15px; font-size: 14px; top: 0; margin: 0 2px 5px 0; display: inline-block; float: none; } .content { padding: 15px; } .content > table, .content > table > tbody, .content > table > tr, .content > table > tr > td, .profile-box table, .profile-box tr, .profile-box td, .content center > div { display: block; width: 100% !important; padding-right: 0 !important; padding-left: 0 !important; box-sizing: border-box; } .profile-box td, .content td[align="right"] { text-align: center !important; padding: 5px 0 !important; } input[type="text"], input[type="password"], input[type="email"], textarea { max-width: 100%; box-sizing: border-box; } .avatar-box { margin: 0 auto 10px auto; } .sidebar-box { width: auto !important; margin: 20px 0; } table[cellpadding="5"] > tbody > tr > td { display: block; width: 100% !important; padding: 5px 0 !important; } .vidbox { padding: 10px; } .vidbox table, .vidbox tr, .vidbox td { display: block; width: 100% !important; padding: 0 !important; } .vidbox .vid-frame { width: 100% !important; height: auto !important; margin: 0 auto 10px auto; } .vidbox .vid-frame img { width: 100%; height: auto; } .content table td[width="25%"], .content table td[width="33%"], .content table td[width="20%"], table.vid-list td { width: 50% !important; display: inline-block !important; box-sizing: border-box; padding: 10px !important; vertical-align: top; text-align: center; } @media screen and (max-width: 480px) { .content table td[width="25%"], .content table td[width="33%"], .content table td[width="20%"], table.vid-list td { width: 100% !important; display: block !important; } } .chat-container { height: 400px; } .message-bubble { max-width: 90%; } .footer { padding: 20px 10px; } } @media screen and (max-width: 480px) { table.vid-list td { width: 100% !important; display: block; } .logo-image { max-width: 220px; height: 45px; } .nav a { padding: 6px 10px; font-size: 13px; } .search-input { width: 80%; } } .search-container { display: inline-block; position: relative; vertical-align: middle; } .suggestions-dropdown { position: absolute; top: 100%; left: 0; width: 250px; background-color: #FFFFFF; border: 1px solid #9FA8DA; box-shadow: 0 4px 10px rgba(0,0,0,0.15); z-index: 10000; text-align: left; font-family: "Trebuchet MS", Tahoma, sans-serif; margin-top: 2px; } .suggestion-item { padding: 6px 10px; border-bottom: 1px solid #E8EAF6; cursor: pointer; display: flex; align-items: center; } .suggestion-item:last-child { border-bottom: none; } .suggestion-item:hover, .suggestion-item.active { background-color: #E8EAF6; color: #FF6600; } .suggestion-thumb { width: 32px; height: 24px; background-color: #000; margin-right: 8px; border: 1px solid #C5CAE9; flex-shrink: 0; display: flex; align-items: center; justify-content: center; } .suggestion-thumb img { max-width: 100%; max-height: 100%; } .suggestion-avatar { width: 24px; height: 24px; border-radius: 50%; margin-right: 8px; border: 1px solid #C5CAE9; flex-shrink: 0; } .suggestion-details { display: flex; flex-direction: column; overflow: hidden; } .suggestion-title { font-size: 12px; font-weight: bold; color: #1A237E; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .suggestion-subtitle { font-size: 10px; color: #666666; } .suggestion-item:hover .suggestion-title, .suggestion-item.active .suggestion-title { color: #FF6600; } .filter-toggle-btn { display: inline-block; padding: 5px 12px; background-color: #E8EAF6; border: 1px solid #9FA8DA; cursor: pointer; font-size: 12px; font-weight: bold; color: #1A237E; margin-bottom: 15px; font-family: Tahoma, sans-serif; } .filter-toggle-btn:hover { background-color: #C5CAE9; border-color: #3F51B5; } .filter-panel { background-color: #F8F9FA; border: 1px solid #C5CAE9; padding: 15px; margin-bottom: 20px; display: none; } .filter-column { display: inline-block; width: 30%; vertical-align: top; margin-right: 2%; box-sizing: border-box; } .filter-column-title { font-size: 12px; font-weight: bold; color: #666666; margin-bottom: 8px; border-bottom: 1px solid #C5CAE9; padding-bottom: 3px; text-transform: uppercase; } .filter-link { display: block; font-size: 12px; color: #3F51B5; padding: 3px 0; text-decoration: none; } .filter-link:hover { color: #FF6600; text-decoration: underline; } .filter-link.active { font-weight: bold; color: #FF6600; } .filter-link.active::before { content: "▶ "; font-size: 9px; vertical-align: middle; }