/*--------------------- RESET -----------------------*/ html,body,div,ul,ol,li,dl,dt,dd,h1,h2,h3,h4,h5,h6,pre,form,p,blockquote,fieldset,input { margin:0; padding:0; } pre,code,address,caption,cite,code,em,strong,th { font-size:1em; font-weight:normal; font-style:normal; } textarea, fieldset {border:none;} em { font-style:italic; } ul,ol { list-style:none; } img, input, button { vertical-align:middle; } /*--------------------- FIREFOX FIXES -----------------------*/ html { overflow-y:scroll; } input:focus, textarea:focus, select:focus, a:focus { outline:0; } button::-moz-focus-inner { border:0; border-style:0; } input[type="hidden"] { display:none !important; visibility:hidden !important; } #frmRedirect { display:none; } /*------------------ CHORDC STYLE --------------------*/ body { background:#F4F2EE; font:16px "Noto Sans", sans-serif; color:#333; } /* LINKS */ a, a:visited { color:#ee4923; text-decoration:none; } a:hover { color:#2b96c2; } /* HEADINGS */ h1, h2, h3, h4, h5, h6 { position:relative; line-height: 1.1; color:#492c24; font-family:"Poppins","Helvetica Neue", Helvetica, sans-serif; font-weight: 600; } h1 { font-size:3rem; margin-bottom:1rem; } h2 { font-size:2rem; margin-bottom:1.2rem;} h3 { font-size:1.5rem; margin-bottom:0.8rem; } h4 { font-size:1.2rem; margin-bottom:0.8rem; } p { font-size:1rem; margin-bottom:1em; line-height:1.5em; letter-spacing: 0.02em; } hr { color:#d4d4d4; background-color:#d4d4d4; height:1px;border:none; } ul.tos { margin-bottom:1em; font-size:1rem; line-height:1.5em; } ul.tos li { margin:10px 20px; list-style:disc; } ul.tos li ul li { list-style:circle; } address { margin:10px; padding:5px; font-size:10px; } /* FORMS */ input[type="text"], input[type="password"], input[type="file"], select, textarea { border-radius: 4px; border: 1px solid var(--Border, #9A8484); background: var(--White, #FFF); } input[type="radio"], input[type="checkbox"], button { cursor:pointer; } input[type="checkbox"][disabled="disabled"] { cursor:auto; } input { min-height: 24px; max-height: 32px; padding:4px 8px; } select { padding:8px; } legend { padding:8px; font-size:0.9em; } /*------------- SKIPPER ---------------*/ dl.skipper { position:absolute; top:-900px; left:10px; text-align:left; z-index:10; } dl.skipper dt a { display:block; padding:5px; width:200px; border:1px dotted #663300; background-color:#e8e8e8; } dl.skipper dt a:focus, .skipper dt a:active { display:block; position:absolute; top:110px; left:10px; z-index:3000; } /*------------- GENERAL ---------------*/ .clear { clear:both; `height:0; _height:auto; margin:0 !important; } .clearL { clear:left; } .clearR { clear:right; } .clearNone { clear:none !important; } .autoWidth { width:auto !important; } .strike { text-decoration:line-through; } .noWrap { white-space:nowrap; } .cursorDefault { cursor:default; } .floatL { float:left; } .floatR { float:right; } .hide { display:none; } .hideHard { display:none !important; } .show { display:block; } .showHard { display:block !important; } .txtReg { font-weight:normal; font-style:normal; } .txtCenter { text-align:center; } .txtSubColor1 { color:#666 !important; } .txtSubColor2 { color:#888 !important; } .txtSubColor3 { color:#999 !important; } .txtSubColor4 { color:#aaa !important; } .txtCapitalize { text-transform:capitalize; } .font10 { font-size:10px !important; } .font11 { font-size:11px !important; } .font12 { font-size:12px !important; } .font13 { font-size:13px !important; } .font14 { font-size:14px !important; } .font15 { font-size:15px !important; } .regFontFamily { font-family:"Poppins","Helvetica Neue", sans-serif !important; } .styledFontFamily { font-family:"Noto Serif", "Georgia", serif !important; } .noMarginTopBot { margin-top:0 !important; margin-bottom:0 !important; } .noPaddingTopBot { padding-top:0 !important; padding-bottom:0 !important; } .noMarginTop { margin-top:0 !important; } .noMarginBot { margin-bottom:0 !important; } .noMarginRight { margin-right:0 !important; } .noPaddingTop { padding-top:0 !important; } .noPaddingBot { padding-bottom:0 !important; } .noBorder { border:none !important; } .noScroll { overflow:hidden !important; } .abs { position:absolute; } .absTL { position:absolute; top:0; left:0; } .absTR { position:absolute; top:0; right:0; } .absBL { position:absolute; bottom:0; left:0; } .absBR { position:absolute; bottom:0; right:0; } .inline { display:inline !important; } .inlineBlock { display:inline-block !important;} .hintHelper { color:#777; } /* element classes */ a.lnkSubColor { color:#2b96c2 !important; } a.lnkSubColor:hover { color:#1a6e8f !important; } input.btnSubmitHide { display:none !important; `display:block !important; `position:absolute !important; `width:1px !important; `border:none !important; `background:url(/img/share/common/blank.gif) repeat 0 0 !important; } p.info { padding:10px 11px 10px 12px; color:#463620; font-size:1rem; background-color:#fff8cc; border:1px solid #ffe223; border-radius:10px; } iframe.hiddenIframe { display:none; background:transparent; } /* symbol classes */ .editSymbol { position:relative; top:3px; font-style:normal; } /*-------------------- MAIN FRAMEWORK ----------------------*/ .mainWrapper { position:relative; margin:0 auto; } #Header, #Footer, #Content { clear:both; position:relative; } /*--------------------- BREADCRUMB AREA -----------------------*/ .breadcrumb { font-size:70%; color:#7C6B5C; text-align:left; margin:10px 0 20px; text-transform:uppercase; } .breadcrumb a { color:#2b96c2; } .breadcrumb a.yourProfile { color:#ee4923; } .breadcrumb a.yourProfile:after { content: " ยท " } .breadcrumb .action { position:relative; z-index:2; float:right; } .breadcrumb .action > a, .breadcrumb .action .divider, .breadcrumb .action .addtoany_list { float:left; } .breadcrumb .action .awesome { color:#fff; } .breadcrumb .action .awesome.smallBtn { font-size:11px; font-weight:bold; } .breadcrumb .action > a { margin-top:3px; } .breadcrumb .action > a.awesome { margin-top:1px; } .breadcrumb .action .divider { margin:2px 12px 0 10px; color:#aaa; } input.a2a_menu_find { background-image:none; } /*---------------- HEADER ------------------*/ #Header { position:fixed;top:0; left:0; right:0; padding:0; color:#bdb2ac; z-index:1000; margin: 0 0 20px; background:rgba(255,255,255,0.95);border-bottom: 2px solid #F0E2DD; box-shadow: 0px 0px 24px 0px rgba(239, 78, 34, 0.32);} #Header .mainWrapper { display: flex; height: 56px; padding: 0; justify-content: space-between; align-items: center; align-self: stretch; } .userHeader { display: flex; padding: 8px 16px; justify-content: flex-start; align-items: center; gap: 8px; flex: 1 0 0; align-self: stretch; } h2.greeting { font-size:1.5rem; font-weight: 400; color:#333; margin-bottom: 0; } h2.greeting strong { font-weight:bold; } h2.greeting a { font-size:1rem; text-decoration:none; color:#6c5b56; } h2.greeting a:hover { color:#fff; } h2.notLoggedIn { margin-left:305px; } /* main menu */ ul.mainMenu { width: 212px; padding: 10px;} ul.mainMenu li.main { position:relative; float:left; margin:0 8px 0 0; } ul.mainMenu li.main .totMyMessagesNew { position:absolute; top:5px; right:-10px; text-align: right; padding:2px 8px; border-radius:20pt;background-color: #ee4923; color:#fff; border: 1.5pt solid #fff; box-shadow: 0 1px 2px rgba(0,0,0,0.4); font-size: 10px;font-weight: bold;} ul.mainMenu li.noDropDown { padding-right:18px; } ul.mainMenu li a.mainLink { color:#7c6b5c; font-size:14px; text-decoration:none; text-transform:uppercase; } ul.mainMenu li a.mainLink img { background-size:cover; background-position: 50% 50%; background-repeat: no-repeat; border-radius:100%; vertical-align: middle; } ul.mainMenu li a.more { display:block; padding-right:16px; background:url(/img/share/sprites/menuArrow.png?123) no-repeat 90% 60%; } /* main nav selector */ #Profile ul.mainMenu li.profile a.mainLink, #Chords ul.mainMenu li.chords a.mainLink, #Community ul.mainMenu li.community a.mainLink { color:#333; } /* Drop Down Menus */ ul.menuDD { display:none; padding:0 0 5px; position:absolute; z-index:1100; min-width:200px; margin:0; background-color:#fff; border-radius:8px; box-shadow:0 8px 30px rgba(0,0,0,0.2); } ul.menuDD:before {position:absolute;display:block;top:-30px;left:25px;content:url(/img/share/sprites/DD_tip.png);} ul.menuDD li:first-child { margin-top: 8px;} ul.menuDD li { overflow: hidden; } ul.menuDD li a { display:block; padding:8px; color:#333; font-size:1rem; text-decoration:none; white-space:nowrap; display: flex; justify-content: strecth; align-items: center; gap: 8px; } ul.menuDD li a:hover { color:#fff; background:#2b96c2; } ul.menuDD li a img { filter: invert(14%) sepia(82%) saturate(0%) hue-rotate(254deg) brightness(90%) contrast(85%); } ul.menuDD li a:hover img { filter: brightness(0) saturate(100%) invert(99%) sepia(2%) saturate(1139%) hue-rotate(232deg) brightness(125%) contrast(100%); } /*---------------- FOOTER ------------------*/ #Footer { position:relative;margin-top:20px; } #Footer .mainWrapper { clear:both; margin:2rem auto 0; padding:10px 0; border-top: 1px solid #F0E2DD; margin-top: 2em;} #Footer .innershadow { position: absolute; height:100%;width:100%;z-index: 50; } .pFooter .wrapper { width:64em; } .pFooter .sections { float:left; width:29%; margin:0 0 10px; padding:20px; } .pFooter .sections ul { margin:0 0 1.5rem; } .pFooter .sections ul li { margin:0 10px 5px; } .pFooter .links { clear:both; margin:0 0 20px; padding:10px; color:#d4d4d4; font-size:11px; } .pFooter .links img { float:left; margin:5px 10px 5px 5px; } .pFooter .links img.lang_icon { float:none; margin:-5px 5px -5px -5px; padding-right:5px; border-right:1px dotted #F0E2DD; } .pFooter .links .left { float:left; margin:5px 10px 5px 5px; } .pFooter .links .right { float:right; margin:10px 10px 5px 5px; } .pFooter .links li { float:left; margin-right:.5em; padding:6px 10px 2px 0; } .pFooter p em { font-style:italic; } .pFooter h3 { font-size:1rem; color:#7c6b5c;} .pFooter p { clear:both; margin:0 0 1.5em; line-height:1.2em; font-size:1em; color:#333;} /* language select */ .language { position:relative; } #languageSelect { position:absolute; bottom:35px; right:10px; width:180px; padding:5px 0; background-color:#fff; border:1px solid #d4d4d4; border-radius:5px; box-shadow:0 1px 5px rgba(0,0,0,0.3); } #languageSelect li:first-child { border-top:1px solid #efefef;} #languageSelect li { float:none; margin:0; padding:0; border-bottom:1px solid #efefef; white-space:nowrap; } #languageSelect li a { position:relative; display:block; padding:5px 5px 8px 10px; color:#333; font-size:1rem; text-decoration:none; border:none; } #languageSelect li a.sel { color:#333; background:#999; } #languageSelect li a:hover { color:#fff; background:#2b96c2; } /*------------------------- PAGE CONTENT HEADER ---------------------------*/ #Home #Content {margin-top:0;} #Content {margin-top:80px;} #pContentHeader { position:relative; } /* Home Page */ .brainwash { position: relative; margin: 300px auto 0; float: none; display: block; } .pgHome #pContentHeader { margin: 0 auto 40px; padding-bottom: 1em; overflow: hidden; background: url(/img/site/home/hero.jpg) 50% 60% no-repeat; min-height: 700px; background-size: cover; } .pgHome #pContentHeader h1 { margin-bottom:0; font-size:4em; color:#fff; } .pgHome #pContentHeader h2 { margin-bottom:2em;line-height:1.5em;font-size:1.3em; font-family: "Noto Serif"; font-style: italic; padding-right: 20%; color:#efefef; font-weight: 300;} .pgHome #pContentHeader h1 strong { font-weight:bold; } #Testimonials .testimonial { padding:10px; } .testimonial { overflow:hidden; } .pgHome .testimonial h2 { margin-bottom: 15px; padding:12px 0 25px; border-bottom:1px solid #F1F0ED; } .testimonial h2 { color:#554430; } .testimonial h4 { line-height:1em; margin-bottom:4pt; } .testimonial h4 small { color:#666; } .testimonial .bubble { margin:0 0 2rem; } .testimonial .bubbleWrap { position:relative; } .testimonial .bubbleWrap .bubbleTip { position:absolute; top:-10px; left:18px; } .testimonial .bubbleWrap .iProfileS { position:absolute; top:8px; left:13px; } #Testimonials .testimonial .bubbleWrap blockquote { color:#333;} .testimonial .bubbleWrap blockquote { padding:0; font-size:1.2rem; color:#333; font-family: "Noto Serif"; font-style: italic; } /* Signup Page */ .signUp #pContentHeader { text-align:center; } /* My Guitar Chords, coming soon... */ .createChord #pContentHeader { text-align:center; } /* Profile Secondary Pages */ #Profile #pContentHeader { min-height: 100px; margin-bottom:2rem;} #Profile #pContentHeader .content { display: flex; flex: auto; flex-direction: row; align-self: start; gap:8px; } #Profile #pContentHeader img.pageImg { width:80px; height:80px; margin:0 15px 0 0; } #Profile #pContentHeader .contentTitle { flex-grow: 1; align-self: start; } #Profile #pContentHeader .contentTitle h4 { display:block; margin:2px 2px 10px; color:#333; line-height:1em; } #Profile #pContentHeader .contentTitle .addRemoveSongWrap { float:right;} #Profile #pContentHeader .contentTitle .addRemoveSongWrap a { font-size:10px; } #Profile #pContentHeader .toggleModeButton a.action { padding:2px 4px 3px 2px; line-height:15px; } #Profile #pContentHeader .toggleModeButton a.action strong { position:relative; top:-2px; right:-3px; font-size:10px; } #Profile #pContentHeader .infoBox { flex-shrink: 1; width:268px; font-size:1rem; } #Profile #pContentHeader .infoBox li { color:#888; } #Profile #pContentHeader .content input{ margin-bottom:1rem; } #Profile #pContentHeader .content textarea{ width:430px; } .friendrequest { text-align: center; padding: 8px; border-radius: 999px; border: 2px solid #F0E2DD; font-weight: 600; background-color: transparent; margin-bottom: 1rem; } .friendrequest:hover { background-color: #F0E2DD; } .friendRequested { margin:0; padding:5px 10px; border:3px double #F0E2DD; background:#ebffc1; font-size:11px; color:#555; text-align:center; } /* private messages */ #Profile.message #pContentHeader h1 { width:auto; } /*------------------ PAGE CONTENT --------------------*/ .pageTitle { position:relative; overflow:hidden; margin:auto; margin-bottom:1rem; padding:16px 0; text-align:center; border-bottom:2px solid #F0E2DD; } .public .bodyContent { clear:both; } .public .content h3 { padding:10px 0; } .public .content h4 { padding:10px 0; } /*----------------------------- HOMEPAGE -------------------------------*/ #Home .bodyContent { background:transparent; min-height:450px; padding-top:0; border-radius: 7px 7px 0px 0px; } #Home .bodyContent .action { margin-bottom:20px; } #Home .bodyContent .action .grid_3 { margin:0 10px; } #Home .bodyContent .action h3 { margin-bottom:10px; } #Home .bodyContent .action p { font-size:1rem;line-height:1.3em;color:#666; } #Home .bodyContent .action a.awesome { display:block; } #homeTabContent { position:relative; background:url(/img/site/home/splitter.png) no-repeat 100% 15%; } #homeTabContent .wrap { padding:0; height:350px; background:url(/img/site/home/splitter.png) no-repeat 0 15%; } #homeTabContent strong { font-weight:bold; } #homeTabContent .tabView { position:absolute; top:20px; left:0; height:480px; width:100%; display:none; } #homeTabContent .tabView .action { text-align:center; } #homeTabContent .tabView img { position:absolute; top:-40px; left:50px; } #homeTabContent #playSection img { top:-35px; } #homeTabContent .action { margin:0 auto 1em; padding:15px 0 5px; width:100%; font-size:.9em; text-align:center; overflow:hidden; } #homeTabContent .action a { position:relative; top:-1px; display:inline-block; padding:0; margin:0 2px; } #homeTabContent .action a.last { border:none; } #homeTabContent .action a.selected { color:#a29f98; } #Home .searchModule {margin:195px 125px 0 20px;} #Home .searchModule .listModule {margin:0;padding:10px 15px 0; border-bottom:1px solid #F0E2DD; z-index:2; background:#c2c9d5; border-radius:5px; } #Home .searchModule .search { top:5px; left:5px; } #Home .marketing { margin-top:40px; padding-top: 20px; border-top:1px solid #F0E2DD; } .marketing .case { margin-bottom:10px; padding-top:10px; } .marketing .wrapper { position:relative; margin:0; min-height:30px; padding:10px; width:auto; } .marketing .wrapper img { position:absolute; left:10px; top:0; } .marketing .wrapper img.smallicon { left:13px; top:0; } .marketing .top { height:10px; } .marketing h2 { margin:0 0 10px; font-size:25px; } .marketing h3 { margin:10px 0; font-size:18px; color:#333;} .marketing p { margin:10px 0; padding:0; } .marketing p a { margin:5px 10px; text-decoration:none; } .marketing ol { margin-top:25px; border-top:1px solid #F0E2DD;} .marketing ol li { margin:0 0 2px; padding:15px; font-size:9pt; color:#76726a; border-bottom:1px solid #F0E2DD; } .marketing .chord-finder { position:relative;margin:0 0 1em; padding:5px; } .marketing .chord-finder h3 { margin:2px 0 0 50px; font-size:18px; color:#333;} .marketing .chord-finder p { margin:0 0 10px 53px; padding:0; } .marketing .chord-finder .left { float:left; margin:-15px 5px 5px -20px; } .marketing .chord-finder .iphonesmall {display:block;margin:-85px 0 -20px 60px;} /* PUBLIC PAGE */ .content.subpanel { padding:15px; } #Help .content.main,#Static .content.main { padding-left:0; } /* BIO */ ul.who { position:relative; margin:0; padding:0;} ul.who li { border:1px solid #F0E2DD; display:block; margin:0 0 10px; padding:0; background-color:#fff; overflow:auto; border-radius: 5px; } ul.who li .img { position:relative; float:left; margin:5px; border:1px solid #F0E2DD; } ul.who li img { display:block; } ul.who li blockquote { margin:7px 0 5px; padding:10px 0; color:#666; font-size:1rem; line-height:1.2em; border-top:1px solid #F0E2DD; } ul.who li div { margin:10px; } ul.who li h4 { margin:0; color:#4c342a; } ul.who li em { display:block; margin-top:5px; color:#4c342a; font-size:.9em; } ul.who li p { margin:0 0 .5em; } ul.who li p.contact { clear:both; text-align:right; margin:0; padding:5px; font-size:.8em; border-top:1px solid #F0E2DD; } /* Sub Menu */ ul.staticMenu { position:relative; margin:0 0 20px; padding:5px; font-size:80%; background-color: #201919; border-radius:8px; } ul.staticMenu li { border-bottom:1px solid #111;border-top:1px solid #222; display:block; margin:0; padding:0; overflow:hidden; } ul.staticMenu li a { display:block; padding:10px; color:#999; } ul.staticMenu li a:hover { background-color:#333; color:#fff; } ul.staticMenu li a.sel { color:#333; background:#e1d9ba url(/img/site/backgrounds/menu_sel_light.png) no-repeat scroll -100px 0;border-radius:4px;} /*------------------ COMMUNITY -------------------*/ #Community .marketing { margin-top:0; width:auto; } #Community .marketing .case { padding:0 10px; width:auto; } #Community .marketing .wrapper img.smallicon { display:none; } #Community .marketing .wrapper { padding:7px 0; width:auto; } /*------------------ PROFILE PAGE -------------------*/ #displayMemberName { text-transform: capitalize;} #displayMemberName .iTick { margin-top:-3px; width:21px; height:14px; background-position:0 -680px; } #displayMemberName .friendRequested { position:absolute; bottom:-15px; left:1px; font-size:9px; letter-spacing:1px; } .public-profile { margin: 2em auto; padding: 2em; width: 60%; text-align: center;} .public-profile h1 { letter-spacing: 0.05rem; } .public-profile .date { letter-spacing: 0.15em; margin-bottom: 1em; text-transform: uppercase; color: #888; font-size:70%;} .public-profile .profile-pic { width: 220px; height:220px; margin: 0 auto 2em; border-radius: 10%; overflow: hidden;background-color: #fff;background-repeat: no-repeat;background-size: cover;background-position: center center;} .public-profile .member-info { width: 70%; margin: 1em auto; } .public-profile .member-info blockquote { padding: 10px; } .public-profile .member-info blockquote p { color: #492c24; font-style:italic; font-size:16px; font-family:"Noto Serif", Georgia,"Times New Roman",serif; line-height: 1.2em;} .public-profile .member-info .metadata { margin: 1em auto; text-align: justify; border: 2px solid #F0E2DD; border-radius: 8px; background-color: #fff; padding: 20px 20px 0; } .public-profile .member-info .metadata .count { display: inline-block; text-align: center; } .public-profile .member-info .metadata .count h5 { font-size: 50%; margin-bottom: 0; line-height: 1.5; text-transform: uppercase; color: #aaa; letter-spacing: 0.15em;} .public-profile .member-info .metadata .count p { font-size: 150%; margin-bottom: 0; line-height: 1.5;} .public-profile .member-info .metadata:after { content: "";display: inline-block;width: 100%; } .public-profile .signup-info { text-align: center; padding:2em 0 0; clear: both; margin-top: 2em; border-top:1px solid #F0E2DD;} .public-profile .signup-info h2 { margin-bottom:0.5em; } .public-profile .signup-info p { margin-bottom:0; } .public-profile .member-info .awesome.button a { color:#fff; } /* Status Update */ .profileHeader { margin-bottom: 1rem; } #statusQuote .displayWrap { position:relative; margin-bottom: 2rem;} #statusQuote .displayWrap blockquote { font-style:italic; font-size:1.5rem; font-family:"Noto Serif",Georgia,"Times New Roman",serif; line-height: 1.2em; margin-bottom: 1rem;} #statusQuote .displayWrap .btnStatus { font-size:1rem; padding:5px 0; } /* Status Form */ #statusQuote form textarea { width:95%; height:40px; padding: 1rem; } #statusQuote form textarea.question { color:#888; } /* Side Panel */ .sidePanel { display: flex; flex-direction: column; gap: 1rem;padding:10px 0; position: sticky; } /* Body Content */ .bodyContent { min-height:450px; padding-top:10px; } .bodySection { position:relative; } /* bodySection goes inside .bodyContent */ .bodyContent.additional .bodySection h2 { font-size: 1.5rem; margin-bottom:12px; padding:10px 0; text-align: center; } #Community .bodySection, #Chords .bodySection { margin-top:10px; } /* Area Specifics */ #Profile .sidePanel, #Chords .sidePanel, #Community .sidePanel { padding-top:0;} #Profile .bodyContent, #Chords .bodyContent, #Community .bodyContent { padding-top:0; } #Chords .bodyContent { min-height:690px; } #Chords.pgChordFinder .bodyContent { min-height:725px; } #Chords.pgChordSearch .bodyContent { min-height:780px; } #Profile.pgMessage .bodyContent, #Profile.pgPhotoAlbum .bodyContent, #Profile.pgSong .bodyContent { min-height:450px; padding-bottom:10px; padding-top: 0; } #Chords .bodyContent.additional { min-height:545px; } #profilePic { position:relative; margin-bottom: 10px; min-height:125px; text-align:center; } #profilePic img.profile { display:block; margin:0 auto; border-radius: 8px; } #profilePic .iEdit { position:absolute; bottom:5px; right:5px; height:15px; text-indent:-9000em; } #profilePic p { padding:10px 0; margin:0 auto; } #profilePic p a { color:#2b96c2; text-decoration:none; } #profilePic p a:hover { color:#ee4923; } #avatarUploadFrame { width:100%; height:146px; background:transparent; border-radius: 16px;} #frmProfilePicUpload .selectSlot { margin:5px; font-size:11px; } #frmProfilePicUpload .msg { float:right; padding:10px; width:200px; height:40px; border-left:1px dotted #F0E2DD; } #frmProfilePicUpload .msg p { margin:0; line-height:1em; } #frmProfilePicUpload .error { color:#880000; font-size:1rem; } form.personalInfoBox { margin:0; } .profHeader { text-align:left; } .profHeader h1 { position:relative; margin-bottom:0; font-size:2rem; color:#333; } .profHeader .profImage { float:left; margin:0; background-size: cover; border-radius: 100%; } .profHeader .profName { margin:0 8px 0 105px; text-transform:capitalize;padding:1em 0; } .profHeader .profName .breadcrumb { margin:0; padding-bottom:8px; border:none; } .areaMenu { margin:0 0 10px; font-size:14px; } .areaMenu li { position:relative; } .areaMenu li a.container { display: flex; padding: 8px; align-items: center; gap: 8px; border-right: 2px solid #F0E2DD; } .areaMenu li a:hover,.areaMenu li a.sel:hover { color:#2B96C2; border-right: 2px solid #2B96C2; } .areaMenu li a.sel { color:#41392f; border-right: 2px solid #EE4923;} .areaMenu li .badge { position:absolute; top:6px; right:8px; z-index:1; } .actionWrapper { padding:16px; margin-bottom: 1rem; border-radius: 8px; border: 2px solid #F0E2DD; background: #FFF; } .actionWrapper .closeAll { float:right; margin-left:10px; padding:3px 0 3px 8px; font-size:11px; border-left:1px dotted #F0E2DD; } /* ADMIN AREA */ #Admin h3.memberName { margin:10px 0; } #Admin .areaMenu li a { padding:5px; text-decoration:none; } #Admin .bodySection strong { font-weight:bold; } #Admin .bodySection form { margin-bottom:1px; border-bottom:1px solid #F0E2DD; background-color:#efefef; } #Admin .bodySection fieldset { padding:20px; } #Admin .bodySection .fileSave button { float:left; margin-right:15px; width:40%; height:35px; text-align:center; vertical-align:middle; line-height:30px; } #Admin .bodySection .fileSave p { margin-bottom:0; height:40px; line-height:30px; } #Admin .bodySection textarea { margin-bottom:10px; width:96%; height:200px; font-size:1rem; font-family:'Courier New'; } /* AVATARS */ .avatar1 { width:50px; height:50px; border-radius:10%; background-size: cover !important; } .avatar2 { width:60px; height:60px; border-radius:100%; background-size: cover !important; } /* PHOTO ALBUMS */ #Profile .content.photoAlbumsView.floatR { width:265px;} .photoAlbumsView .imgWrapper { display:block; overflow:hidden; } .photoAlbumsView .imgWrapper a { display:block; margin:0 auto; padding:10px 20px 10px 10px; background:url(/img/site/backgrounds/photoAlbum.png) no-repeat 50% 50%; } .photoAlbumsView .imgWrapper img { display:block; width:70px; height:100px; background-position:50% 50%; } .photoAlbumsView .photoThumbsWrap { display: flex; flex-wrap: wrap; } .photoAlbumsView .photoThumbsWrap .listModule { border:none; } .photoAlbumsView .photoThumbsWrap .listModule .content dl { display: flex; flex-wrap: wrap; flex-direction: row; gap:4px; } .photoAlbumsView .photoThumbsWrap .listModule .content dd { box-shadow: none; } .photoAlbumsView .photoThumbsWrap .listModule .content .photos { width: auto; overflow: clip; padding: 2px; background-color: #fff; border: 1px solid #aaa; border-radius: 4px; } .photoAlbumsView .photoThumbsWrap .listModule .content .photos img { display:block; width:50px; height:50px; background-position:50% 50%; background-repeat: no-repeat; background-size:cover;} .photoAlbumsView .photoThumbsWrap .listModule .content .photos a { display:block; } .photoAlbumsView .photoThumbsWrap .listModule .content .photos a:hover { border-color:#ee4923; } .photoAlbumsView .photoThumbsWrap .listModule .content .photos a.sel { border-color:#ee4923; } .photoAlbumsView .photoThumbsWrap .viewAll { font-size: 0.9rem; border:0 !important; display: flex; flex-direction: row; gap:8px; margin-top:8px; } .photoAlbumsView .photoThumbsWrap .viewAll a { } .photoAlbumsView .photoThumbsWrap .viewAll a.hide { display:none; } .photoAlbumsView .photoThumbsWrap .noRecs { border:none !important; font-size:1rem; text-align:left; } .photoAlbumsView .photoThumbsWrap .noRecs a { display:inline; width:auto; height:auto; border:none; } .photoAlbumsView .photoThumbsWrap .noRecs .msg { display:block; margin-top:3px; color:#333; } /* FRIENDS */ .friendsView .imgWrapper { display:block; overflow:hidden; } .friendsView .imgWrapper a { display:block; margin:0 auto; } .friendsView .imgWrapper img { display:block; width:50px; height:50px; background-position:50% 50%; } .friendsView .contentInfo .title { padding-top:20px !important; } .friendsView ul.actionList { margin:0 0 10px; overflow:hidden; } .friendsView ul.actionList li { float:left; margin:2px 20px 2px 2px; } .friendsView ul.actionList li a { padding:0 !important; font-size:10px !important; } /* INFO */ .allInfo { margin-bottom:35px; } .allInfo .personalInfoBox:first-child { margin-top:22px; } .personalInfoBox { margin:10px 0 26px; } .personalInfoBox form { margin-bottom:32px; } .personalInfoBox h2 { margin-bottom:20px; padding-top:.5em; border-bottom:1px solid #F0E2DD; font-size:15px; } .personalInfoBox h2 span.title { float:left; padding-right:24px; margin-top:-.6em; background-color:#f4f4f4; color:#6f3c2c; } .personalInfoBox h2 a.edit { float:right; padding-left:10px; margin-top:-0.5em; font-size:0.9rem; border-left:2px solid #F0E2DD; background-color:#f4f4f4; } .personalInfoBox form dl { padding-top:5px; } .personalInfoBox dl { margin:5px 0; padding:1px 0; overflow:hidden; } .personalInfoBox dl dt { float:left; clear:left; margin:2px 10px 5px 2px; padding-top:3px; width:180px; font-size:0.9rem; text-align:right; color:#999; } .personalInfoBox dl dd { float:left; margin:2px 2px 5px; width:30rem; font-size:1rem; line-height:1.5rem; color:#666; } .personalInfoBox dl dt.section { float:none; clear:both; margin-top:-5px; padding:15px; width:90%; text-align:left; color:#999; font-size:14px; } .personalInfoBox label { display:block; padding:2px 0 3px; } .personalInfoBox label.cb.single { width:280px !important; margin-bottom:4px; } .personalInfoBox label.cb.single input[type="checkbox"] { margin:-5px 3px 0 0; } .personalInfoBox input[type="text"], .personalInfoBox input[type="password"], .personalInfoBox input[type="file"], .personalInfoBox select, .personalInfoBox textarea { margin-bottom:6px; } .personalInfoBox input[type='radio'] { margin-right:8px; } .personalInfoBox .radios { display:block; margin:0 0 0 2px; } .personalInfoBox .radios label { float:left; width:auto; margin-right:12px; font-size:1rem; } .personalInfoBox input.text { width:93%; } .personalInfoBox input.text:focus { border:1px solid #2b96c2; } .personalInfoBox textarea { width:93%; height:100px; } .personalInfoBox small { position:relative; top:-2px; font-size:1rem; color:#999; } .personalInfoBox dl dd.username input { width:180px; } .personalInfoBox dl dd.username em { font-size:1rem; } .personalInfoBox dl dd.empty { padding:4px; } /* PROFILE IMAGES */ #profileImages a { position:relative; float:left; margin:0 15px 5px 0; padding:5px; width:65px; height:65px; text-align:center; background:url(/img/site/backgrounds/profileImageCase.png) no-repeat; background-size: cover; } #profileImages a.sel { background-position:0 -75px; } #profileImages a.empty b { display:block; margin-top:35px; font-size:10px; } #profileImages a .iconS { position:absolute; bottom:-25px; left:30px; } #profileImages .clear { padding-top:20px; } #profileImages span { position:absolute; bottom:-26px; left:48px; font-size:1rem; } #profileImages a:hover span { opacity:1; filter:alpha(opacity=100); } #profileImages a.sel span { opacity:1; filter:alpha(opacity=100); color:#2B96C2; } .uploadInput { padding:10px; width:95%; background-color:#ebebeb; border-radius:3px; } .uploadInput #userfile { font-size:10px; } .uploadInput a { margin-left:5px; padding:5px 10px; font-size:11px; } .uploadInput a.save { border:1px solid #888; color:#fff; background-color:#ee4923; } .uploadInput a.save:hover { background-color:#888; } /* SIGNUP SIGN IN */ .logInForm { display: flex; position:relative; position: relative; justify-content: center; align-items: center;} .logInForm a.closeMe { position:absolute; top:-23px; right:18px; } .logInForm div { position:relative; } .logInForm div label { position:absolute; top:8px; left:12px; font-size:0.8rem; color:#ABABAB; } .logInForm input.text { display: flex; align-self: center; width:155px; } .logInForm input[name="password"] { width:140px; } .resetPasswordForm input[name="email"] { width:178px; } .logInForm span.or { display: flex; align-self: center; margin:0 1px 0 5px; font-size:10px; } .logInForm .btnSignUp { display: flex; align-self: center;font-size:1rem; color:#ee4923;} .logInForm .floatL { display: flex; gap:4px; margin-right: 4px; align-items: center; } .logInForm .rememberMe, .resetPasswordMsg, .logInForm .lnkForgotPass { position:absolute; top:5px; right:7px; font-size:10px; text-align:right; color:#333; } .logInForm .rememberMe { margin-left:130px; } .logInForm .lnkForgotPass { margin-right:50px; top:4px; right:auto; left:132px; padding:5px 10px; font-size:14px; } .loginMsg { color:#900400; padding:10px 5px; border:1px solid #ae5241; border-radius:8px; background-color:#f1f8d4; } /* SIGNUP BUBBLE */ #signupBubble { display:none; position:absolute; top:0; left:0; z-index:1; width:418px; padding:10px 0 0; font-size:1rem; } #signupBubble strong { font-weight:bold; } #signupBubble .innerWrapper { padding:5px 10px 8px; background:#eaf1f3 url(/img/share/backgrounds/bubble-seperator.png) repeat-y -50px 0; color:#554430; border:1px solid #a7c2ca; border-radius:5px; box-shadow:0 1px 5px rgba(0,0,0,0.2); overflow:hidden; } #signupBubble .bubbleTip { position:absolute; top:0; left:365px; z-index:1; } #signupBubble .iconS { float:left; margin:5px 20px 0 0; } #signupBubble .msg { display:block; margin-left:50px; } #signupBubble .innerWrapper a { color:#EE4923; } #signupBubble .innerWrapper a:hover { color:#2B96C2; } /* TOGGLE MODE BUTTONS ----------------------*/ /* default styles for the list module toggle mode button */ .toggleModeButton { } .toggleModeButton a.toggleMode { display:none; min-width:28px; min-height:24px; padding:0; border:none !important; } .toggleModeButton a.sel { display:block; } .toggleModeButton a.toggleMode strong { position:relative; left:-1px !important; top:4px !important; font-size:10px; } .toggleModeButton a.display strong { left:0 !important; } /* example toggle mode on the song display page */ #pContentHeader .toggleModeButton { padding:8px;} #pContentHeader .toggleModeButton a.toggleMode { display:block; } #pContentHeader .toggleModeButton a.toggleMode strong { } .content .signUpWrapper .closeMe { display:none; } /* LIST MODULE --------------*/ .viewWrap { position:relative; margin-top:15px; } .viewWrap.standAlone { top:-5px; } #Community .viewWrap { top:-5px; } #Chords .listModule, .listModule .body, .listModule .content dl { display: flex; flex-direction: column; gap: 8px; align-self: stretch; } .listModule .contentWrap { position:relative; z-index:1; } .listModule .results { padding:8px; margin-bottom:1.5rem; border-radius: 16px; background-color: #fff; box-shadow: 0px 1px 0px 0px #F0E2DD; } .listModule .results h3 {padding:16px; } .listModule .results p { margin-bottom:0; } .listModule .results .voice { padding:18px 0; } .listModule .results .dia { position:relative; float:left; margin:5px 22px; } .listModule .search input.go, .listModule .search .listModuleSearchBtn { color: #36240A; padding: 4px 16px; font-size: 1rem; font-weight: 600; height: 34px; border-radius: 999px; border: 2px solid #F0E2DD; text-transform: uppercase; background-color: transparent; } .listModule .search input.go:hover, .listModule .search .listModuleSearchBtn:hover { background-color: #F0E2DD; cursor: pointer; } .lmDisplayMode .lmHideMe { display:none; } /* title */ .viewWrap h1 { margin:0 0 5px; padding:10px 0 10px; color:#41392f; font-size:1.4rem; line-height:1em; text-transform:capitalize; } .viewWrap h1 small { font-size:15px; text-transform:none; } .viewWrap h2 { color:#41392f; font-size:1.6em; margin-bottom: 1rem; text-transform:capitalize; } /* search results */ .viewWrap .content .filterTitle { display: flex; padding: 8px 16px; align-items: center; gap: 16px; font-size:1rem; border-radius: 4px; border: 1px solid #F0E2DD; background: #FFF; } .viewWrap .content .filterTitle a.showAll { display: flex; padding: 4px 16px; border-radius: 999px; border: 2px solid #F0E2DD; background: transparent;} .viewWrap .content .filterTitle a.showAll:hover { background-color: #F0E2DD;} .viewWrap .content .filterTitle .action { display: flex; justify-content: flex-end; align-items: flex-start; gap: 8px;flex: 1 0 0; } /* section switch buttons */ .sectionSwitchBtns { display: flex; padding: 0px 16px; justify-content: space-between; align-items: center; border-radius: 8px; background-color: #FFF; } .sectionSwitchBtns ul { display: flex; align-items: flex-end; margin-top:2px; } .sectionSwitchBtns ul li { display: flex; padding: 0; justify-content: center; align-items: center; gap: 8px; } .sectionSwitchBtns .action { padding: 12px 0; } .sectionSwitchBtns .action a { display:flex; justify-content: center; align-items: center; gap: 4px;} .bodySection .bandland.msg { clear:left; padding:14px 15px 3px; font-size:1rem; } .sectionSwitchBtns.standalone { margin:16px 0; } /* search */ .viewWrap .search { display: flex; align-items: center; gap: 8px; align-self: stretch; } .viewWrap .search label { } .viewWrap .search input[type="text"] { display: flex; border-radius: 999px; width:250px; height: 24px; flex: 1 0 0; } .viewWrap .search .listModuleSearchBtn { display: flex; align-items: center; height: 24px; } .songsWithChords { position:absolute; top:10px; right:10px; } .songsWithChords .lnkSubColor { display: flex; gap: 8px; align-items: center; } /* actions */ .viewWrap .actions { position: relative; } .viewWrap .actions.header { padding: 16px 0; } .viewWrap .actions.footer { padding:0 16px; } .viewWrap .actions .wrap { display: flex; align-items: center; gap: 16px; align-self: stretch; } /* pagination */ .listModuleFrm .pagiTitleBar { position:absolute; top:6px; right:0; } .listModuleFrm .pagi { float:right; margin-top:4px; } .listModuleFrm .pagiBot { margin-top:8px; } .listModuleFrm .pagi * { float:left; } .listModuleFrm .pagi b { float:none; } .listModuleFrm .pagi a, .listModuleFrm .pagi span { height:20px !important; padding:0 5px !important; } .listModuleFrm .pagi a { color:#2b96c2; text-decoration:none; } .listModuleFrm .pagi .main { position:relative; top:-2px; font-size:19px; /*font-weight:bold;*/ } .listModuleFrm .pagi .main.prevIndicator { padding:0 7px 0 5px !important; } .listModuleFrm .pagi .main.nextIndicator { padding:0 5px 0 7px !important; } .listModuleFrm .pagi .main.firstIndicator, .listModuleFrm .pagi .main.lastIndicator { } .listModuleFrm .pagi span.sel { color:#333; } .listModuleFrm .pagi .nav img { position:relative; top:-2px; width:20px; } .listModuleFrm .pagi em, .listModuleFrm .cnt { font-style:normal; font-size:1rem; color:#ccc; } .listModuleFrm .disabled { color:#ccc; } .listModuleFrm .pagi em { padding:0 6px 0 8px; float:none; } .listModuleFrm .pagi .nav { font-size:1rem; } .listModuleFrm .cnt { float:left; } /* filter */ .listModule .filter { display: flex; flex-direction: column; align-items: flex-end; flex: 1 0 0;} .listModule .filter dl { display: flex ; gap: 8px; } .listModule .filter .selector { position:relative; } .listModule .filter h6 { position:relative; font-weight:normal; font-size:1rem; } .listModule .filter h6 a { display: inline-flex; padding: 4px; align-items: center; gap: 4px; color:#666; text-decoration:none; text-transform:capitalize; white-space:nowrap; } .listModule .filter h6 a:hover { color:#2b96c2; } .listModule .filter h6 a.sel { color:#575757; font-weight: 600; } .listModule .filter h6 a.sel:hover { color:#333; } .listModule .filter .menu { display:none; position:absolute; top:38px; right:0; padding:5px 0; width:200px; background-color:#fff; z-index:200; border-radius:8px; box-shadow:0 8px 30px rgba(0,0,0,0.2); border:1px solid #F0E2DD; } .listModule .filter .menu:before {position:absolute;display:block;top:-30px;right:10px;content:url(/img/share/sprites/DD_tip.png);} .listModule .filter .menu dd { padding:0; } .listModule .filter .menu a { font-size:1rem; display:block; padding:7px 30px 7px 10px; color:#333; text-decoration:none; text-transform:capitalize; } .listModule .filter .menu a:hover, .listModule .filter .menu a.sel { background:#2B96C2; color:#fff; } /* content */ .listModule .content dt.header { display: flex; padding: 0px; align-items: flex-start; gap: 8px; align-self: stretch; } .listModule .content dt strong { font-size:1rem; text-align:left; white-space:nowrap; } .listModule .content dt strong.sortBy { padding:8px 0; width:50px !important; text-align:left; } .listModule .content dt strong.checkbox { padding:6px; width:15px !important; } .listModule .content dt strong.checkbox input { } .listModule .content dt strong.last { width:136px !important; } .listModule .content dt a, .listModule .content dt span { display:block; padding:8px; text-decoration:none; color:#666; } .listModule .content dt a:hover { color:#333 !important; } .listModule .content dt a:active { font-weight:bold; } .listModule .content dt a.sel { color:#333; font-weight: bold; } .listModule .content dt a .sortArrow { position:absolute; top:8px; right:5px; width:16px; height:15px; padding:0; background:url(/img/site/icons/sortArrow.png) no-repeat 1px 0; } .listModule .content dt a .asc { background-position:1px 0; } .listModule .content dt a .desc { background-position:1px -16px; } .listModule .content dd.noRecs {width:100%; color:#666; } body.pgSong .listModule .content dd.noRecs { width:100%; } .listModule .content dd { position: relative; width:100%; border-radius: 16px; padding: 0px; background: #FFF; box-shadow: 0px 1px 0px 0px #F0E2DD; } .listModule .content dd.sel { background-color:#efefef; } .listModule .content dd a { text-decoration:none; } .listModule .content .contentGutter { position:absolute; top:16px; left: 16px;} .listModule .content .contentGutter small { padding:5px 10px; color:#888; font-size:10px; } .listModule .content .contentGutter i { margin-top:30%; } .listModule .content .contentGutter .imgWrapper { } .listModule .content .contentGutter .rating { padding-top:8px; text-align:left; } .listModule .content .contentInfo { position:relative; } .listModule .content .contentInfo.full { width:100%; } .listModule .content .contentInfo.full .rowWrap { display: flex; padding: 16px; align-items: flex-start; gap: 16px; } .listModule .content .contentInfo .right { color:#ABABAB; font-size:0.9rem; } .listModule .content .contentInfo .title { display:block; padding:0; color:#41392F; font-size:1rem; } .listModule .content .contentInfo .title .buttons { float:left; } .listModule .content .contentInfo .title .buttons a:hover { border-bottom:1px solid #ee4923; } .listModule .content .contentInfo .title .buttons span.divider { margin:0 10px; border-right:1px dotted #888; } .listModule .content .contentInfo .title a:hover { color:#ee4923; } .listModule .content .contentInfo .message { position:relative; padding:16px; margin-bottom:0; background-color:#fff; font-size:1rem; border-radius:8px; border:2px solid #F0E2DD; flex-grow: 10; min-width: 500px; } .listModule .content .contentInfo .poster { display:block; } .listModule .content .contentInfo .poster small { color:#999; } .listModule .content .contentGutter .checkbox { position:absolute; top:10px; left:6px; z-index:10; } .listModule .content .contentInfo .checkbox { position:absolute; top:10px; left:5px; z-index:10; } .listModule .content .contentInfo .checkbox.iconS { top:20px; left:0; } .listModule .content .contentInfo .rating { display: flex; gap:4px; color:#ABABAB; font-size:0.9rem; width:188px; margin-bottom: 8px; } .listModule .content .contentInfo .rating small { position:relative;} .listModule .content .contentInfo .memNameDate { width:200px; text-align:right; font-size:0.9rem; color:#ABABAB;} .listModule .content .contentInfo .memNameDate .creator { display:block; white-space:nowrap; color:#ABABAB; margin-bottom: 8px; } .listModule .content .contentInfo .memNameDate .creator a { display:inline; padding:0; } .listModule .content .contentInfo .listTotComments { display: flex; gap: 4px; font-size:0.9rem; color:#ABABAB; } /* songs */ .listModule .content .contentInfo.full.songs .rowWrap { display: flex; padding: 16px; align-items: flex-start; gap: 16px; align-self: stretch; } .listModule .content .contentInfo.songs a.songTitle { display: block; font-size:1.2rem; padding:0; max-width: 260px; text-overflow: ellipsis; overflow: hidden; line-height: 1.5; } .listModule .content .contentInfo .songArtist { display: block; font-size: 0.9rem; color:#ABABAB; } /* members */ .listModule .content .contentInfo.members .friendRequested { position:absolute; z-index:1; right:7px; width:75px; font-size:9px; border:none; border-radius:5px; } .listModule .content .contentInfo.members span.friendRequested { color:#777; } .listModule .content .contentInfo.members a.memberName { font-size:1.2rem; padding:0; margin-bottom: 8px;} .listModule .content .contentInfo.members a.songCollection { margin:0; padding:0; color:#2B96C2; } .listModule .content .contentInfo.members a.songCollection:hover { color:#ABABAB; } .listModule .content .contentInfo.members .info { position:relative; } .listModule .content .contentInfo.members .location { color:#ABABAB; } .listModule .content .contentInfo.members .info .date { display:block; color:#ABABAB; } .listModule .content .contentInfo.members .info .country { display:block; color:#ABABAB; } #lmFriends .listModule .content .contentInfo.full .rowWrap { display: flex; gap: 8px; } #lmFriends .listModule .content .contentInfo.members .avatarLnk { } #lmFriends .listModule .content .contentInfo.members .info { } #lmFriends .listModule .content .contentInfo.members a.memberName { } /* private messages */ .listModule .content .contentInfo.members.messages { align-self: stretch; } .listModule .content .contentInfo.messages .iNew { position:absolute; top:70px; left:38px; } .lmDisplayMode .listModule .content .contentInfo.messages .iNew { left:21px; } .listModule .content .contentInfo.messages .avatarLnk { top:1.2em; } .listModule .content .contentInfo.messages .outerLinks { position:relative; font-size:10px; text-align:right; } .listModule .content .contentInfo.messages .outerLinks .btns { float:none; margin:17px 7px 0 0; } .listModule .content .contentInfo.messages .outerLinks .btns .divider { padding:0 3px; } .listModule .content .contentInfo.messages .subject { display:block; margin-bottom:8px; } .listModule .content .contentInfo.messages .lbl { display:block; } .listModule .content .contentInfo.messages .info { display: flex; flex-flow: row wrap; align-items: stretch; gap: 8px;} .listModule .content .contentInfo.messages .info .meta { flex-grow: 2; display: flex ; flex-direction: column; gap: 8px;} .listModule .content .contentInfo.messages .info .date { display: flex; flex-direction: column; justify-content: start;align-items: end; gap: 8px; flex-shrink: 1; align-self: stretch;} /* friend requests */ .listModule .content .contentInfo.friendRequests .info { color:#ABABAB; } .listModule .content .contentInfo.friendRequests .info .msg { color:#ABABAB; } .listModule .content .contentInfo.friendRequests .info .date { display: block; margin-bottom: 1rem; } .listModule .content .contentInfo.friendRequests .info .awesome { margin:2px 5px 0; } /* feeds */ .listModule .content .contentInfo.feeds .content { display: flex; flex-direction: column; justify-content: stretch; align-items: flex-start; gap: 4px; flex: 1 0 0; } .listModule .content .contentInfo.feeds .avatar { } .listModule .content .contentInfo.feeds .avatar .iconS { display:none;} .listModule .content .contentInfo.feeds h6.type { color:#ABABAB; font-size: 0.9rem; font-weight: normal; } .listModule .content .contentInfo.feeds p.msg { margin-bottom:0; font-size:1.2rem; color:#333; line-height: 1.5; font-family: "Noto Serif","Georgia", serif; } .lmDisplayMode .listModule .content .contentInfo.feeds p.msg.photo { margin-left:90px; } .listModule .content .contentInfo.feeds p.msg.photo { padding:10px; min-height:80px; margin-left:90px; } .listModule .content .contentInfo.feeds a.photo { position:absolute; top:45px; padding:3px; border:2px solid #F0E2DD; background-color:#fff; border-radius: 4px; } .listModule .content .contentInfo.feeds a.photo:hover { background-color:#ee4923; } .listModule .content .contentInfo.feeds a.photo img { height:75px; } /* photo albums */ #lmPhotoAlbums .listModule .content .contentInfo { min-height:120px; border:0; margin:16px 16px 16px 125px;} /* videos */ #lmMyVideos .listModule .content dd { clear:none; width:50%; position:relative; } #lmMyVideos .listModule .content dd input.checkbox { position:absolute; top:10px; left:6px; } #lmMyVideos .listModule .content dd a.edit { position:absolute; bottom:22px; right:30px; } #lmMyVideos .listModule .content dd.noRecs { width:100%; } #lmMyVideos .listModule .content .video { float:left; margin:10px 10px 15px 22px; min-height:315px; text-align:center; border:1px solid #d4d4d4; } #lmMyVideos .listModule .content .video object, #lmMyVideos .listModule .content .video embed { width:322px !important; height:281px !important; margin:0 0 8px; } #lmMyVideos .listModule .content .video a, #lmMyVideos .listModule .content .video strong { display:block; margin:1px 0 15px; font-size:1rem; } #lmMyVideos .listModule .content .video small.date { position:relative; top:-10px; color:#888; font-size:11px; } #lmMyVideos .listModule .content .video .videoPlaceHolder { width:322px !important; height:281px !important; background-color:#ccc; } /* band land */ #bandLand { padding:5px 0; overflow:hidden; } .membersJoin { margin-bottom:25px; float:left; width:338px; } .membersNeeded { margin-bottom:25px; float:right; width:338px; } .membersJoin h2, .membersNeeded h2 { margin-bottom:10px; font-size:18px; } .bandList { margin:10px 0 0; padding:0; } .bandList .member { margin:0; } .bandList .member .avatarLnk { } .bandList .member .info { float:left; width:570px; padding: 0 16px; margin-bottom: 1rem; } .bandList .member .info h4 { font-size:1.4rem; margin:0 0 1em;} .bandList .member .info strong { font-weight:bold; color:#444;} .bandList .member .info p { margin-bottom:2px; color: #888;} .bandList .member .info .bottom { margin:4px -20px -10px; height:10px;} .bandList .member .msg { clear:both; margin:10px 10px 10px 80px; padding:5px; } .howmany { text-align:center;margin:10px 0 20px; color:#888; } .howmany a { color:; text-decoration:underline; font-size:14px; } /* LIST POPUP MENU */ .listPopup { position:absolute; top:0; left:0; z-index:2; padding:5px 0; min-width:220px; background-color:#fff; border-radius:16px; box-shadow:0px 0px 24px 0px rgb(58 53 51 / 32%); } .listPopup h6 { position:relative; padding:8px 16px; padding-right: 40px; color:#463620; font-size:1rem; } .listPopup a.closeMe { position:absolute; top:8px; right:8px; } .listPopup dl { margin-top:0; } .listPopup dd { border-bottom:1px solid #F0E2DD; } .listPopup dd:first-child { border-top:1px solid #F0E2DD; } .listPopup dd a { display:block; padding:8px 16px; color:#333; font-size:1rem; background-color:#fff; } .listPopup dd a:hover { background:#2B96C2; color:#fff; } /*--------------------- FORMS (general) -----------------------*/ .form br { clear:left; } .form.altBG1 { background-color:transparent;} .form.altBG1 input[type="text"], .form.altBG1 input[type="password"], .form.altBG1 input[type="file"], .form.altBG1 select, .form.altBG1 textarea { border-color:#cec2bd #ddd #ddd #cec2bd; } .form label.cb { cursor:pointer; } .form label.cb.single { width:125px; white-space:nowrap; } .form img.captcha { margin-right:5px; border:1px solid #d4d4d4; } .form .successDisplayMsg { padding:25px 0; text-align:center; font-size:15px; color:#666; } /*--------------------------------------------------- FLYOUT FORMS (structure, inherits from .form) -----------------------------------------------------*/ .flyoutForm { position:relative; z-index:1; margin:15px 0; padding:24px; background-color:#fff;border-radius: 16px; } .flyoutFormInline { top:0; height:auto; margin:0; padding:0; } /* ex: stand alone song edit page */ .flyoutForm.belowSectionSwitcher { margin-top: 1rem; } .flyoutForm.aboveSectionSwitcher { margin-bottom: 1rem; } .flyoutForm.inSectionSwitcher { padding-top:14px; } .flyoutForm.single textarea { width:96%; height:100px; } .flyoutForm.noBg { background:none; } .flyoutForm.noRndBrds { border-radius:0; } .flyoutForm.noTopRndBrds { border-top-right-radius:0; border-radius-topright:0; border-top-left-radius:0; border-radius-topleft:0; } .flyoutForm label { display:block; float:left; width:7rem; margin-top:5px; margin-bottom: 0.5rem; padding:0; font-size:1rem; color:#555; } .flyoutForm label img { margin-top:-8px; } .flyoutForm .wideLbl { width:320px; } .flyoutForm .name { float:left; padding:5px; } .flyoutForm textarea { width:75%; height:40px; margin-bottom:5px; line-height:14px; } .flyoutForm input { display:block; float:left; width:178px; margin:0 0 12px; } .flyoutForm select { display:block; float:left; width:200px; margin:0 0 12px; } .flyoutForm select { width:194px; margin-bottom:1rem; } .flyoutForm .wideFld { width:75%; } .flyoutForm input[type='checkbox'] { width:15px; } .flyoutForm2 label { margin-top:4px; } .flyoutForm2 textarea { margin-bottom:1rem; } .flyoutForm2 input, .flyoutForm2 select { margin-bottom:1rem; } .flyoutForm.horizontalFields input, .flyoutForm.horizontalFields select { margin-right:8px; } /* date picker */ .flyoutForm .datePicker.labelLeft { } .flyoutForm .datePicker label.date { } .flyoutForm .datePicker.labelLeft label.date { position:relative; top:-9px; } .flyoutForm .datePicker .wrap label.month { width:60px; } .flyoutForm .datePicker .wrap label.day { width:40px; } .flyoutForm .datePicker .wrap label.year { width:47px; } .flyoutForm .datePicker .wrap select { margin-right:10px; } .flyoutForm .datePicker .wrap select.month { width:66px; } .flyoutForm .datePicker .wrap select.day { width:47px; } .flyoutForm .datePicker .wrap select.year { width:60px; } .flyoutForm .datePicker .wrap select { width:100px; } /*-------------------------------- FLYOUT FORMS (individuals) ----------------------------------*/ /* song creation */ body.pgSong .frmSongCreate { display:block; } .frmSongCreate a.addArtistBtn { position: absolute; top: -18px; right: 274px; } .frmSongCreate p.info { display:inline; margin-left:20px; } /* new message */ .frmNewMsg input[name='subject'] { width:70%; } /* feedback */ .frmFeedback { margin-top:0; padding:20px; min-height:405px; } .frmFeedback input[name='name'], .frmFeedback input[name='email'] { width:250px; } .frmFeedback input[name='subject'] { width:79%; } .frmFeedback textarea { width:79%; height:175px; } .frmFeedback input[name='captcha'] { float:none; display:inline-block; margin:0; } .frmFeedback label.captcha { width:320px; margin-bottom:15px; } /* quick message */ .frmQuickMsg { position: absolute; top: 60px; right: 0; min-height:105px; margin:10px 0 0; padding-bottom:10px; border: 2px solid #F0E2DD; } .frmQuickMsg textarea { height:45px; width:96%; } /* album creation */ .frmAlbum { height:auto; } .frmAlbum .comments { height:120px; width:75%; } /* video creation */ .frmVideo { } .frmVideo label { width:148px; margin-right:6px; text-align:right; } .frmVideo input[name="title"] { width:440px; } .frmVideo textarea[name="video"] { width:470px; } .frmVideo select[name="songId"] { width:477px; } .frmVideo textarea[name="video"] { height:75px; font-size:10px; } .flyoutForm.frmVideo .datePicker.labelLeft label.date { top:-1px; } /* video edit */ .frmVideo.frmVideoEdit { top:auto; top:354px; left:-228px; position:absolute; width:535px; padding-top:26px; } .frmVideo.frmVideoEdit input[name="title"], .frmVideo.frmVideoEdit textarea[name="video"] { width:365px; } .frmVideo.frmVideoEdit select[name="songId"] { width:377px; } /* community wall post */ #Community .frmWallPost { padding-top:10px; } #Community .frmWallPost { margin:10px 0; padding-bottom:8px; } #Community .frmWallPost label { width:70px; } #Community .frmWallPost .avatar { position:relative; top:0; } #Community .frmWallPost textarea[name="feed"] { float:left; width:74%; height:57px; } /* all forms and edit page adjustments */ /* edit album */ body.pgPhotoAlbum .frmAlbum { display:block; height:auto; } body.pgPhotoAlbum .frmAlbum #pContentHeader { padding-bottom:10px; } body.pgPhotoAlbum .frmAlbum #pContentHeader a.addPhoto { position:absolute; bottom:12px; right:10px; font-size:1rem; } body.pgPhotoAlbum .frmAlbum #pContentHeader .content { padding-top:10px; } body.pgPhotoAlbum .frmAlbum #pContentHeader .content .wideFld { width:350px; } body.pgPhotoAlbum .frmAlbum #pContentHeader .content textarea { width:85%; height:68px; } /* edit photo */ body.pgPhotoAlbum #bigPhoto .frmAlbumPhoto { position:relative; top:0; padding:10px; height:auto; font-size:14px; background-color:#efefef; border-radius:10px; } body.pgPhotoAlbum #bigPhoto .frmAlbumPhoto label[for='caption'] { width:75px; } body.pgPhotoAlbum #bigPhoto .frmAlbumPhoto #caption { width:545px; } body.pgPhotoAlbum #bigPhoto .frmAlbumPhoto .photoPrivacySelect { width:260px; } body.pgPhotoAlbum #bigPhoto .frmAlbumPhoto .photoPrivacy { margin:10px 0; } body.pgPhotoAlbum #bigPhoto .frmAlbumPhoto .datePicker { margin:10px 0; } body.pgPhotoAlbum #bigPhoto .frmAlbumPhoto label.albumCoverFld { margin:-2px 0 8px; font-size:1rem; font-weight:bold; } body.pgPhotoAlbum #bigPhoto .frmAlbumPhoto label.albumCoverFld input[type="checkbox"] { margin:1px 6px 2px 0; } /* upload photo */ body.pgPhotoAlbum #uploadPhoto .frmAlbumPhoto { top:auto; margin:0 0 10px; } body.pgPhotoAlbum #uploadPhoto .frmAlbumPhoto .photoDate { float:left; margin-left:20px; } /* album edit */ #frmAlbumEdit .wideFld { width:427px; } #frmAlbumEdit .comments { width:79%; } #frmAlbumEdit #pContentHeader label { width:150px; } /* photo upload (uses a hidden iframe) */ .frmAlbumPhoto { height:292px; top:10px; } .frmAlbumPhoto .wideFld { width:426px; } .frmAlbumPhoto .wideLbl { display:block; width:190px; margin-bottom:5px; font-size:14px; } .frmAlbumPhoto input.upload { height:32px; width:400px; margin-bottom:15px; font-size:19px; } .frmAlbumPhoto .info { position:relative; top:-4px; } .frmAlbumPhoto select.photoPrivacySelect { width:175px; } .frmAlbumPhoto a.submitButton { position:relative; } .frmAlbumPhoto .picRights { position:absolute; z-index:1; bottom:22px; right:27px; width:340px; font-size:10px; color:#999; } /*--------------------- BUTTONS WRAPPER -----------------------*/ /* general */ .form .btns { margin:6px 0 5px;} .form .btns .awesome { margin-left:6px; } .form .btns .awesome:first-child { margin-left:0; } .form .btns.btnsLeft { padding-left:5px; } /* flyout forms */ .flyoutForm .btns { clear: both; } .flyoutForm2 .btns { clear: both; margin-top:10px; } /* list module action buttons */ .listModule .btns { font-size: 0.9rem;} .listModule .btns .awesome { margin-left:10px; } .listModule .btns .awesome:first-child { margin-left:0; } /* feed buttons */ .feedBtns { position:absolute; top:12px; right:8px; } .feedBtns a { min-width:80px; padding:8px; font-size:0.8rem; } .lmDisplayMode .feedBtns a { display:none; } /* individuals forms */ .frmFeedback .btns { margin-top:22px; } .frmVideo .btns { padding-left:155px; } .frmEditProfile .btns { padding-left:195px; } #Community .frmWallPost .btns { float:left; margin-top:8px; padding-left:65px; } #statusQuote .form .btns { margin:10px 10px 0 0; text-align: right;} /*----------------------------------- SEND MESSAGE BUTTONS AND FORM -------------------------------------*/ .dhtmlFrmAndBtns { margin-left: 70px; } .dhtmlFrmAndBtns .toggleBtns { padding:0 0 0 15px; font-size:1rem; } .dhtmlFrmAndBtns .toggleBtns.iconBtns { } .dhtmlFrmAndBtns .toggleBtns .iconS { margin-top:-4px; } .dhtmlFrmAndBtns .form { margin-top:14px; } /* individuals forms */ .allInfo .dhtmlFrmAndBtns { margin:12px 0 30px; } .commentsWrap .dhtmlFrmAndBtns .form { margin-top:20px; } .commentsWrap .dhtmlFrmAndBtns .toggleBtns.iconBtns { position:absolute; z-index:2; right:10px; top:12px; } .bandList .dhtmlFrmAndBtns { clear:both; margin:0 0 15px; } .bandList .dhtmlFrmAndBtns .toggleBtns { padding:0 0 0 16px; } .bandList .dhtmlFrmAndBtns .form { margin-bottom:20px; } /*------------------ SIGN UP FORM --------------------*/ .signUpWrapper fieldset > div { position:relative; margin-bottom:10px; padding:5px; min-height:30px; background-color:#edf3f8; font-size:1rem; border-radius:4px; } .signUpWrapper fieldset > .oneLineWrap { padding:10px 15px; } .signUpWrapper fieldset > .oneLineWrap label { text-align:left; margin:3px; } .signUpWrapper fieldset > .oneLineWrap input[type="checkbox"] { margin:-1px 3px 0 4px; } .signUpWrapper div em { clear:both; display:block; margin:0; padding:5px 10px; font-size:1rem; text-align:right; color:#888; } .signUpWrapper .withAboveText { padding-top:3rem; } .signUpWrapper .withAboveText .aboveText { position:absolute; top:-38px; left:10px; white-space:nowrap; } .signUpWrapper label.wrap { display:block; float:none; margin:5px 0; padding:5px; width:auto; font-size:1rem; } .signUpWrapper legend { margin:0 0 15px; font-size:10px; color:#777; } .signUpWrapper label { position:relative; float:left; margin:0 10px 0 0; padding:5px; font-size:0.9rem; text-align:right; } .signUpWrapper label.captcha { padding:0 5px; } .signUpWrapper label.captcha img { display:block; border:1px solid #d4d4d4 } .signUpWrapper input { vertical-align:middle; position:relative; z-index:5; } .signUpWrapper select, .signUpWrapper input[type='text'], .signUpWrapper input[type='password'] { padding:4px; font-size:14px; font-weight:normal; } .signUpWrapper input[type='radio'] { margin-right:8px; } .signUpWrapper select { font-weight:normal; } .signUpWrapper .radios { float:left; margin:5px 0 4px; } .signUpWrapper .radios label { float:none; width:auto; margin-right:5px; font-size:1rem; } .signUpWrapper .alreadyMember { padding:10px; font-size:1rem; } .signUpWrapper a:hover { border-bottom:1px dotted #2b96c2; } .signUpWrapper a.extraLink { position:relative; top:-1px; margin:0 5px; font-size:9px; } .signUpWrapper .btns { margin:0; margin-top:1rem; padding:1px 0; text-align:center; background-color:transparent; } /* double */ .signUpWrapper .double { padding-bottom:9px; } .signUpWrapper .double label { margin:0 10px 0 8px; } .signUpWrapper .double label:first-child { margin-left:0; } .signUpWrapper .double .radios label { margin:0 5px 0 0; } .signUpWrapper .double select, .signUpWrapper .double input[type='text'], .signUpWrapper .double input[type='password'] { float:left; } .signUpWrapper .double.oneLineWrap label { float:left; } .signUpWrapper .double.withSelects { padding-bottom:11px; } .signUpWrapper .double.withBtns { padding-bottom:14px; } .signUpWrapper .double.withBtns .btns { float:right; padding:1px 3px 1px 0; } /* widths */ .signUpWrapper { width:615px; } .signUpWrapper label { width:94px; } .signUpWrapper select, .signUpWrapper input[type='text'], .signUpWrapper input[type='password'] { width:472px; } .signUpWrapper select { width:481px; } .signUpWrapper .double select, .signUpWrapper .double input[type='text'], .signUpWrapper .double input[type='password'] { width:170px; } .signUpWrapper .double select { width:180px; } /*--------------------- SECONDARY PAGES -----------------------*/ /* private message */ #pMsg { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; align-self: stretch; } #pMsg .msgWrap { align-self: stretch; position: relative; border-radius: 16px; padding: 16px; background: #FFF; box-shadow: 0px 1px 0px 0px #F0E2DD; } #pMsg .msgWrap p.msg { margin:24px 0 16px 70px; padding:0 16px; border-left:2px solid #F0E2DD; } #pMsg .msgWrap.mine p.msg { margin:24px 72px 16px 0; border-left:none; } #pMsg .msgWrap .avatarLnk { position:absolute; left:16px; top:16px; } #pMsg .msgWrap.mine .avatarLnk { top:auto; right:16px; bottom: 16px; left:auto; } #pMsg .msgWrap .date { position:absolute; left:108px; color:#ABABAB; } #pMsg .msgWrap.mine .date { left:32px; } #Profile .content.floatL { width:660px; } #Profile .content.floatR { width:300px; } #Profile .content.floatL h2 { margin-bottom:10px; padding:16px; font-size:1.2rem; } #Profile.pgMessage .content.floatL { width:98%; } #Profile.pgSong .content.floatL { width:680px; } #Profile.pgSong .content.floatR { width:255px; } /* photo display */ .photoAlbumsView.floatR { margin:10px 0; } .photoAlbumsView.floatR h4 { margin-bottom:0; font-size:15px; } .photoAlbumsView.floatR h4 a { font-size:1rem; } #bigPhoto { min-height:550px; width:100%; } #bigPhoto.loaderMedium { background-position:50% 35%; background-repeat:no-repeat; } #bigPhoto .photoPrivateMsg { text-align:center; margin:58px 10px 0 0; font-size:14px; } #bigPhoto .photoInfo { margin:1em 0; } #bigPhoto .photoInfo .photoTitle { margin:0; padding:16px 0; font-size: 1.5rem; font-family: "Noto Serif", "Georgia", serif; } #bigPhoto .photoInfo small.date { display: block; color:#ABABAB; font-size:0.9rem; } #photoWrap { text-align:center; background-position:center; background-repeat:no-repeat; background-color: #fff; border-radius: 8px; border: 2px solid #eee; overflow: clip; } #photoWrap img { width:660px; height:500px; border-radius: 8px; } #frmAlbumEdit #photoWrap { height:350px; } #frmAlbumEdit #photoWrap img { width:509px; height:349px; border-radius: 4px; } /* SONG STUFF */ /* song display */ #songTabWrap { padding:5px; min-height:315px; overflow:auto; font-size:0.9rem; } #songTabWrap.edit { clear:left; padding:0; border:none; } /* song edit */ form.frmSongCreate #pContentHeader .content { margin:12px 10px 1px; } form.frmSongCreate .col { clear: both; position: relative; } #pContentHeader .content a.addArtistBtn { position: absolute; top: 85px; right: 24px; } #songTabControls { width:96.4%; padding:10px; font-size:1rem; } #songTabControls label { margin-top:0; font-size:17px; } #songTabControls .controls { float:right; } #songTabControls span { margin:0 5px; color:#999; } #tablature { height:1145px; margin:0 10px 10px; padding:15px 0 15px 15px; width:94.5%; line-height:14px; font-size:1rem; font-family:'Courier New',Courier,monospace; } .videoList textarea { width:93%; height:65px; margin:0 0 15px; font-size:10px; } .videoList textarea:last-child { margin-bottom:20px; } /* community song ratings */ #Profile.pgSong #pContentHeader h1 .rating { position:absolute; bottom:-2px; left:12px; } #Profile.pgSong #pContentHeader h1 .rating small { position:relative; top:-3px; left:-8px; display:inline; font-size:11px; } /* song rater */ #songRatingMine { margin-top:0; padding:0 0 5px; } #songRatingMine h4 { margin-bottom:0; text-align:center; font-style:normal; font-size:.85em; font-weight:bold; color:#444; white-space:nowrap; } #songRatingMine #frmSongRating { position:relative; margin:10px 0 2px; overflow:visible; } #songRatingMine #frmSongRating a { position:absolute; top:-1px; z-index:1; display:block; width:19px; height:20px; cursor:pointer; } #songRatingMine #frmSongRating a.star5 { left:74px; } #songRatingMine #frmSongRating a.star4 { left:56px; } #songRatingMine #frmSongRating a.star3 { left:38px; } #songRatingMine #frmSongRating a.star2 { left:20px; } #songRatingMine #frmSongRating a.star1 { left:1px; } #songRatingMine #frmSongRating strong { position:absolute; top:3px; right:-108px; color:#888; font-weight:normal; font-size:11px; text-indent:0; } #songRatingMine #frmSongRating.Update strong { right:-105px; } #songRatingMine .staticStars { position:relative; margin:10px 0 2px; overflow:visible; } #songRatingMine a.rerate { position:relative; top:3px; font-size:11px; font-weight:normal; } /* song page right side */ body.pgSong .content.col2 { margin:10px 10px 10px 0; } body.pgSong .content.col2 .videoList.display { margin-bottom:1em; } body.pgSong .content.col2 .videoList.display > div { margin-top:15px; } body.pgSong .content.col2 .videoList.display > div:first-child { margin-top:0; } body.pgSong .content.col2 .videoList.display > div * { width:250px !important; height:209px !important; } .itunes {margin:0 0 10px;} /* diagrams */ div#songChords { position:relative; left:-15px; float:left; width:101%; margin-bottom: 20px; /*margin-top:2px;*/ } div#songChords .chord { position:relative; float:left; margin:0 0 25px 36px; `padding:1px; } div#songChords .chord h4 { margin-bottom:20px; font-size:14px; color:#000; } div#songChords .chord h4 a { color:#000; text-decoration:none; } div#songChords .chord h4 a:hover { color:#ee4923; text-decoration:none; } div#songChords .chord h4 a.action { display:block; width:75px; text-align:center; } div#songChords .chord h4 a.action:hover { text-decoration:underline; } div#songChords .chord h4 a.action.remove { position:absolute; top:18px; right:-10px; width:auto; } div#songChords .chord h4 a.action.locateChord { text-decoration:underline; } div#songChords .chord h4 a.action.locateChord:hover { text-decoration:none; } div#songChords .matchedImg { top:35px; left:-27px; right:auto; } div#songChords .chord .matchedPhoto { top:-178px; right:45px; } /* songs for chord */ #songsForChord ul li { width:100%; border-radius: 16px; padding: 0px; background: #FFF; box-shadow: 0px 1px 0px 0px var(--Line, #F0E2DD); overflow: hidden; } #songsForChord .msgError { padding:8px 10px; color:#333; } /* COMMENT AREA */ .commentArea { padding:0; font-size:1rem; width:660px; } .pgSong .commentArea { width:600px; } .commentArea h3 { margin-bottom:10px; padding:10px; background-color:#efefef; font-size:22px; border-radius:4px; } .commentArea .frmPostComment { padding:0 10px 10px; overflow:auto;} .commentArea .frmPostComment label { display:block; margin-bottom:5px; } .commentArea .frmPostComment textarea { width:98%; height:40px; margin:5px 0; } .commentArea h4 { top:4px; left:5px; font-size:17px; } .commentArea .listModule { border-bottom:none; } /* comments */ .commentsWrap { padding-top:10px; margin-bottom: 1rem; border-top:1px solid #F0E2DD;} .commentsWrap .contentDL > dd .msgWrap { position:relative; padding:10px; } .commentsWrap .contentDL > dd .msgWrap .msg { min-height:20px; margin:10px; padding:10px 10px 10px 60px;} .commentsWrap .contentDL > dd .msgWrap.mine { background-color:#fffddf; border-radius: 16px; } .commentsWrap .contentDL > dd .msgWrap .msg p { margin-bottom:0; font-family: "Noto Serif","Georgia",serif; font-size: 18px; line-height: 1.5;} .commentsWrap .contentDL > dd .msgWrap .avatarLnk { position:absolute; left:16px; top:16px; right:auto; } .commentsWrap .contentDL > dd .msgWrap .date { position:absolute; left:80px; top:16px; font-size:11px; color:#999; } .commentsWrap .contentDL > dd .msgWrap .quickReplyFormWrap { height:250px; margin-top:20px; } .commentsWrap .contentDL > dd .msgWrap .quickReplyFormWrap label { display:block; float:left; font-size:15px; margin:6px 8px 0 2px; } .commentsWrap .contentDL > dd .msgWrap .quickReplyFormWrap input[name="subject"] { display:block; float:left; width:89%; } .commentsWrap .contentDL > dd .msgWrap .quickReplyFormWrap textarea { margin-top:10px; height:58%; } .commentsWrap .contentDL > dd .msgWrap .msg .commentEdit { display:none; } .commentsWrap .contentDL > dd .msgWrap .msg .commentEdit textarea { width:98%; height:100px; margin-bottom:10px; } /*-------------- MESSAGES ----------------*/ .msgPopup { position:absolute; z-index:2001; display:none; padding:10px 10px 11px; font-size:1rem; border-radius:5px; box-shadow: 0px 1px 0px 0px var(--Line, #F0E2DD); } .msgConfirm { background-color:#fff7b2; border:1px solid #ffde84; color:#429dba; } .msgError { background-color:#fff7b2; border:1px solid #ffde84; color:#ff3333; } .systemMsg { padding:5px 10px; background-color:#fff7b2; border:1px solid #ffde84; color:#b62507; } /*------------- LOADERS ---------------*/ .loader, .loaderMedium { z-index:1002; text-indent:-2000em; `text-indent:0; `font-size:0; `line-height:2000px; } .loader { width:18px; height:18px; background:transparent url(/img/site/loaders/small.gif) no-repeat 2px 2px; } .loaderMedium { width:39px; height:39px; background:transparent url(/img/site/loaders/medium.gif) no-repeat 2px 2px; } /*---------------------- COVER ME & MODAL ------------------------*/ #coverMe { position:absolute; top:0; right:0; bottom:0; left:0; width:100%; } #modoCase { position:absolute; top:-9000px; left:0; padding:10px; z-index:2000; } #modoCase .systemMsg { margin-bottom:2px; border-radius:5px; z-index:20; } .modo { margin:auto; padding:15px; background:#fff; border-radius:10px; border: 3px solid #F0E2DD;} .modo .closeMe { position:absolute; top:24px; right:24px; border:0 !important; text-decoration:none; z-index: 1000;} .modo h1 { margin-bottom:20px; padding:10px 0 7px; color:#554430; font-size:28px; line-height:12px; text-align:center; } /*---------------------------------------- AWESOME BUTTONS AND CUSTOM BUTTONS ------------------------------------------*/ .awesome, .awesome:visited { display: inline-flex; padding: 12px 32px; justify-content: center; align-items: center; gap: 8px; border-radius: 999px; color: #fff; font-weight: bold; border: 2px solid var(--Primary-Hover, #BD4D26); background: var(--Primary, #ED4722); } .awesome:hover { background-color:#BD4D26; color:#fff; } .awesome.largeBtn, .awesome.largeBtn:visited { padding: 16px 32px; } .awesome.largeBtn { background-color:#15a02a; border: 2px solid #1e712b;} .awesome.largeBtn:hover { background-color:#1e712b; } .awesome.smallBtn, .awesome.smallBtn:visited { padding: 8px 24px; color: #fff; } .awesome.deleteBtn { background-color:#333; border: 2px solid #444; } .awesome.deleteBtn:hover { background-color:#444; } .awesome.removeBtn { background-color:#888; border: 2px solid #666; } .awesome.removeBtn:hover { background-color:#666; } .awesome.cancelBtn { background-color:transparent; color: #36240A; border: 2px solid #F0E2DD; } .awesome.cancelBtn:hover { background-color:#F0E2DD; } .awesome.sectionSwitchBtn, .awesome.sectionSwitchBtn:visited { padding:10px; color:#555; background-color:transparent; border:none; border-radius: 0; font-weight: 400; border-bottom: 2px solid #F0E2DD; } .awesome.sectionSwitchBtn:hover { color:#888; } .awesome.sectionSwitchBtn:active { color:#888; } .awesome.sectionSwitchBtn.sel { cursor:default; color: #2B96C2; border-bottom: 2px solid #2B96C2; font-weight: bold; } .awesome.badge, .awesome.badge:visited { text-align: right; padding:2px 4px; border-radius:20pt; background-color: #ee4923; color:#fff; border: 1.5pt solid #fff; box-shadow: 0px 1px 0px 0px var(--Line, #F0E2DD); font-size: 10px;font-weight: bold; } .awesome.badge:hover, .totMyMessagesNew:hover { background-color:#dfe1ff; color:#ee4923; border:1px solid #888; } .awesome.helpBtn { margin-bottom:10px; background-color:#222; font-size:16px; text-align:center; } .awesome.helpBtn:hover { background-color:#5f6d72; } /* custom buttons */ .button { padding:5px 10px; margin:0 2px; vertical-align:middle; cursor:pointer; white-space:nowrap; } .button1 { color:#fff; border:1pt solid rgba(0,0,0,0.25); border-radius:5px; background:#ee4923;} .button1:hover { background-color:#2b96c2; } .button1:active { border:1px solid #999 !important; } /* list popup buttons */ a.popupBtn { padding:4px 8px; color:#fff; font-size:10px; font-weight:bold; text-align:center; line-height:10px; border-radius:4px; border:1pt solid rgba(0,0,0,0.25); background-color: #00a322; box-shadow:inset 0 1px 1px rgba(255,255,255,0.5), 0 1px 3px rgba(0,0,0,0.5); } a.popupBtn:hover { background-color: #42b75c; } a.popupBtn:active { background-color: #14802c; box-shadow:inset 0 1px 2px rgba(0,0,0,0.5);} a.popupBtn span.action { position:absolute; top:0; left:2px; } /* privacy button and notice */ .editPrivacy { padding:1px 8px 2px; font-size:11px; color:#2b96c2 !important; background-color:#fff8cc; border:1px solid #ffe223; cursor:pointer; border-radius:10px; } .editPrivacy:hover { color:#ee4923 !important; } /*----------------------------------------------- SITE MAP LAYOUT -------------------------------------------------*/ .chordLinksContainer { overflow:auto; } .chordLinksContainer h3 { margin-bottom:2px; font-size:1em !important; } .chordLinks { float:left; margin:0 20px 20px 0; padding-left:3px; width:20%; } .chordLinks li { padding:5px; } .chordLinks a { color:#333; } .chordLinks a:hover { color:#2b96c2; border-bottom:1px dotted #2b96c2; } /* MISC */ .pgChordFinderApp #Content .mainWrapper { border:none; box-shadow:none;background:none; } .pgChordFinderApp .bodyContent .left { float:left; padding:20px;margin-top:15%;width:58%;} .pgChordFinderApp .bodyContent .right { position:relative; float:right; border:none; background:none; } .pgChordFinderApp #screens { position:absolute; top:93px; left:28px; height:375px; width:250px; overflow:hidden; } .pgChordFinderApp #screens img { display:none; position:absolute; top:0; left:0; height:375px; width:250px; } .noRecs .wrap { padding:40px; } .noRecs h2 { font-weight:bold; font-size:25px; color:#666; } .noRecs .main p {color:#999;margin-bottom:4em;} .noRecs p { color:#888; margin-bottom:1.5em; } .noRecs .sub { overflow:hidden; } .noRecs .sub h2 { font-size:100%; } .noRecs .sub ul { margin-left:13px; color:#999; list-style-type:disc; } .noRecs .sub li { margin-bottom:3px; } .noRecs .sub p, .noRecs .sub li { font-size:75%; } .noRecs .sub .left { float:left;width:80px; margin-right: 10px; } .noRecs .sub .right { float:right;width:190px; } .no-results { display: flex; flex-direction: column; text-align:center; justify-content: flex-end; width: auto; height: 400px; border-radius: 16px; padding: 32px; box-shadow: 0px 1px 0px 0px #F0E2DD; } .no-results strong { font-weight:bold; } .no-results h2 { margin-top:auto; } .no-results.chords { background:#FFF url(/img/site/common/no-chords.png) no-repeat 50% 25%; } .no-results.feeds { background:#FFF url(/img/site/common/no-feeds.png) no-repeat 50% 25%; } .no-results.songs { background:#FFF url(/img/site/common/no-songs.png) no-repeat 50% 25%; } .no-results.songsForChords { background:#FFF url(/img/site/common/no-songs.png) no-repeat 50% 25%; } .no-results.photos { background:#FFF url(/img/site/common/no-photos.png) no-repeat 50% 25%; } .no-results.videos { background:#FFF url(/img/site/common/no-videos.png) no-repeat 50% 25%; } .no-results.friends { background:#FFFurl(/img/site/common/no-friends.png) no-repeat 50% 25%; } .no-results.messages { background:#FFF url(/img/site/common/no-messages.png) no-repeat 50% 25%; } .no-results.private { background:#FFF url(/img/site/common/no-entry.png) no-repeat 50% 25%; } .no-results.peopleLookingToJoinBand { background:#FFF url(/img/site/common/no-people-looking-to-join-a-band.png) no-repeat 50% 25%; } .no-results.bandsThatNeedMember { background:#FFF url(/img/site/common/no-bands-that-need-a-member.png) no-repeat 50% 25%; } /*------------------------- FORM ERROR HANDLING ---------------------------*/ i.frmFldError, input.frmFldError, textarea.frmFldError { border:1px solid #ff3333 !important; } i.errorLbl, i.fldErrorBorder { position:absolute; z-index:2001; color:#ff3333; font-style:normal; font-size:10px; } .errorMsgsWrap { max-width:260px; min-width:165px; min-height:15px; position:absolute; z-index:2001; display:none; padding:15px 15px 15px 5px; background-color:#fff7b2; color:#af0000; font-size:1rem; font-style:normal; font-weight:normal; border:1px solid #ee4923; border-radius:5px; } .errorMsgsWrap a.errorMsgClose { position:absolute; top:1px; `top:0; right:2px; padding:1px 2px 5px 5px; color:#af0000; font-size:7px; text-decoration:underline; } .errorMsgsWrap a.errorMsgClose:hover { text-decoration:none; } .errorMsgsWrap ul { padding:0 !important; } .errorMsgsWrap ul li { margin:0 0 0 10px !important; list-style-type:none !important; } .errorMsgsWrap ul.bullets { padding-left:7px !important; } .errorMsgsWrap ul.bullets li { list-style-type:disc !important; } /*--------- ADS - DONATIONS -----------*/ .adWrap { margin:0 auto; padding:25px 0; text-align:center; } .adWrap.skyscraper { min-height:602px; margin-bottom: 10px;} .adWrap.leaderboard { min-height:92px; border: none; } #Donation .info-sections { display: flex; flex-direction: column; gap: 16px; margin-left: 0; margin-right: 16px; } #Donation #pContentHeader { margin-bottom: 2rem; } .impact-section { display: flex; flex-direction: column; gap: 16px; padding:32px; background-color: #fff; border-radius: 16px; box-shadow: 0px 1px 0px 0px #F0E2DD; } .donation-container { display: flex; flex-direction: column; align-items: center; gap: 8px; padding:32px; background-color: #fff; border-radius: 16px; box-shadow: 0px 1px 0px 0px #F0E2DD; margin-bottom:1rem; } .benefits-list { display: flex; flex-direction: column; align-items: stretch; gap: 16px; } .benefits-list .title { display: flex; align-items: center; gap: 8px; } .supporter-perks { display: flex; flex-direction: column; gap: 16px; margin-bottom: 1rem; } .perk-tier { padding:8px 16px; border-left:2px solid #F0E2DD; } .perk-tier p { margin:0; } .perk-tier.featured { border-left:2px solid #ee9170; } .support-panel { padding: 8px; font-size: 0.9rem; } .support-panel p { font-size: 0.9rem; } .ad-free-icon { display: inline-block; padding: 4px 8px; border-radius: 4px; margin-bottom: 16px; font-size: 0.9rem; background-color: #ffde6f; } /*----------------- CHROME FRAME -------------------*/ #chromeFrame { position:fixed; _position:absolute; top:50%; left:50%; z-index:2002; border:10px solid #492f29; `zoom:1; } /*--------------- PHP DEGUG -----------------*/ pre.print_r { background-color:#fff !important; color:#333 !important; text-align:left !important; } pre.print_r.fixed { position:fixed; top:0; left:0; z-index:2; } /*------------------ PRINT STYLES --------------------*/ @media print { html, body { background:none; font-size:10pt; } #Header, #Footer, #pContentHeader img, #pContentHeader .infoBox, .addRemoveSongWrap, #commentAreaSong, .adWrap,.pageTitle, .videoListWrap, .songRatingsWrap,#songRatingCommunity, .sidePanel, .breadcrumb, .songsWithChords, .additional, #Public .grid_5 { display:none; } #Content .mainWrapper { border:none; box-shadow:none; } #songWrap .floatR { position: absolute; right:0; } }