/* SS.css 23-07-02 - CSS file for all SS html and php files */
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
html{line-height: 1.15; -webkit-text-size-adjust: 100%;}
body{margin: 0;} main{display: block;} h1{font-size: 2em; margin: 0.67em 0;}
hr{box-sizing: content-box; height: 0; overflow: visible;}
pre{font-family: monospace, monospace; font-size: 1em;} a{background-color: transparent;}
abbr[title]{border-bottom: none; text-decoration: underline; text-decoration: underline dotted;}
b, strong{font-weight: bolder;} code,kbd,samp{font-family: monospace, monospace; font-size: 1em;}
small{font-size: 80%;} sub,sup{font-size: 75%; line-height: 0; position: relative; vertical-align: baseline;}
sub{bottom: -0.25em;} sup{top: -0.5em;} img{border-style: none;}
button, input, optgroup, select, textarea{font-family: inherit; font-size: 100%; line-height: 1.15; margin: 0;}
button, input{overflow: visible;} button, select{text-transform: none;}
button,[type='button'],[type="reset"],[type="submit"]{-webkit-appearance: button; appearance: button;}
button::-moz-focus-inner,[type='button']::-moz-focus-inner,[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner{border-style: none; padding: 0;}
button:-moz-focusring,[type='button']:-moz-focusring,[type="reset"]:-moz-focusring,[type="submit"]:-moz-focusring{outline: 1px dotted ButtonText;} fieldset{padding: 0.35em 0.75em 0.625em;}
legend{box-sizing: border-box; color: inherit; display: table; max-width: 100%; padding: 0; white-space: normal;}
progress{vertical-align: baseline;} textarea{overflow: auto;}
[type="checkbox"],[type="radio"]{box-sizing: border-box; padding: 0;}
[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{height: auto;}
[type="search"]{-webkit-appearance: textfield; appearance: textfield; outline-offset: -2px;}
[type="search"]::-webkit-search-decoration{-webkit-appearance: none;}
::-webkit-file-upload-button{-webkit-appearance: button; font: inherit;}
details{display: block;} summary{display: list-item;} template{display: none;} [hidden]{display: none;}
/* ===================== End of normalize.css V8.0.1 ====================== */
/*
Most browsers will display the element with the following default values:
h1 { display: block; font-size: 2em; margin-top: 0.67em; margin-bottom: 0.67em; margin-left: 0; margin-right: 0; font-weight: bold; }
h2 { display: block; font-size: 1.5em; margin-top: 0.83em; margin-bottom: 0.83em; margin-left: 0; margin-right: 0; font-weight: bold; }
h3 { display: block; font-size: 1.17em; margin-top: 1em; margin-bottom: 1em; margin-left: 0; margin-right: 0; font-weight: bold; }
h4 { display: block; font-size: 1em; margin-top: 1.33em; margin-bottom: 1.33em; margin-left: 0; margin-right: 0; font-weight: bold; }
h5 { display: block; font-size: .83em; margin-top: 1.67em; margin-bottom: 1.67em; margin-left: 0; margin-right: 0; font-weight: bold; }
h6 { display: block; font-size: .67em; margin-top: 2.33em; margin-bottom: 2.33em; margin-left: 0; margin-right: 0; font-weight: bold; }
*/
h1 { display: block; font-size: 2em; margin-top: 0.3em; margin-bottom: 0.3em; margin-left: 0; margin-right: 0; font-weight: bold; }
h2 { display: block; font-size: 1.5em; margin-top: 0.4em; margin-bottom: 0.4em; margin-left: 0; margin-right: 0; font-weight: bold; }
h3 { display: block; font-size: 1.17em; margin-top: 0.5em; margin-bottom: 0.5em; margin-left: 0; margin-right: 0; font-weight: bold; }
h4 { display: block; font-size: 1em; margin-top: 0.6em; margin-bottom: 0.6em; margin-left: 0; margin-right: 0; font-weight: bold; }
h5 { display: block; font-size: .83em; margin-top: 0.8em; margin-bottom: 0.8em; margin-left: 0; margin-right: 0; font-weight: bold; }
h6 { display: block; font-size: .67em; margin-top: 1.2em; margin-bottom: 1.2em; margin-left: 0; margin-right: 0; font-weight: bold; }
/* spans which look like h's */
.h1_span { font-size: 2em; margin-top: 0.3em; margin-bottom: 0.3em; margin-left: 0; margin-right: 0; font-weight: bold; }
.h2_span { font-size: 1.5em; margin-top: 0.4em; margin-bottom: 0.4em; margin-left: 0; margin-right: 0; font-weight: bold; }
.h3_span { font-size: 1.17em; margin-top: 0.5em; margin-bottom: 0.5em; margin-left: 0; margin-right: 0; font-weight: bold; }
.h4_span { font-size: 1em; margin-top: 0.6em; margin-bottom: 0.6em; margin-left: 0; margin-right: 0; font-weight: bold; }
.h5_span { font-size: .83em; margin-top: 0.8em; margin-bottom: 0.8em; margin-left: 0; margin-right: 0; font-weight: bold; }
.h6_span { font-size: .67em; margin-top: 1.2em; margin-bottom: 1.2em; margin-left: 0; margin-right: 0; font-weight: bold; }
body {
background-color:#FFF;
font-family: Arial, Helvetica, Verdana, sans-serif;
font-size:12px;
/* padding:15px; margin: 0px; margin-right: 0px; margin-bottom: 20px; */
}
/* ===================== SS CSS Rules ====================== */
/*
Organization:
-------------
SS - General Purpose
Input fields inp_
Button Types btn_
Bgnd Status Colors salStat_
Salon type colors (1st let) salType_
UI Pages
05h_inc_CommonJSHeader_js.php
06p_inc_CommonPopupDlgsHTML.php
index.php HP_
35_YourSalons.php YS_
36_UpcomingSalons.php US_
37_Search SRCH_
38_CatsAndTopicsLists.php CT_
43_CategoryDetails.php CDt_
44_TopicDetails.php TDt
Cal.php Cal_
47a_Calendar_Mini.php CalM_
Page Specific
20_Register.php Reg_
22_Reg_Finish.php RegF_
24_EditProfile.php EP_
37_Search.php Srch_
46_ScheduleSalon.php SS_
41ip_SalonDetails.php SDt_
43ip_CategoryDetails.php CDt_
44ip_TopicDetails_PS or SS.php TDt_
45ip_SSUserDetails.php GDt_
48ip_CalendarDayDetails.php CDDt_
46aip_TopicSearch.php TSrch_
Help
55_FAQ.php Hlp_
56_HowItWorks.php Hlp_
57_Security.php Hlp_
58_AboutSS.php Hlp_
70_HTUTP_All.php Hlp_
Admin
90_Admin_OpeningPage.php Adm_
91_Admin_ShowSSInfo.php Adm_
*/
/* ---------------- SS COLORS --------------------------- */
:root {
--bgcolor_SSl: #FCC11E; /* Yellowish */
--bgcolor_Sbj: #C84718; /* Chocolate; Salmon; IndianRed; OrangeRed; DarkTurquoise; DodgerBlue; DeepSkyBlue; */
--bgcolor_Cat: #FB591F; /* SandyBrown; DarkSeaGreen; Coral; Tomato; Mediumturquoise; DeepSkyBlue; LightSkyBlue; */
--bgcolor_Sbc: #FB8A61; /* Tan; Violet; LightCoral; Coral; Turquoise; LightSkyBlue; SkyBlue; */
--bgcolor_Brn: #FDBCA4; /* NavajoWhite; SpringGreen; DarkSalmon; LightSalmon; Aquamarine; SkyBLue; LightBlue; */
--bgcolor_Tpc: #FEDDD1; /*BlanchedAlmond; Thistle; LightSalmon; PeachPuff; PaleTurquoise; LightCyan; PowderBlue; */ /* LightCyan; */
/* https://colors.artyclick.com/color-shades-finder/?color=#FB591F */
--color_btn_Finish: Gold;
--color_btnbdr_Finish: Orange;
--color_btn_Finish_Dark: Gold;
--color_btn_Finish_Light: LightYellow;
--color_btn_Action: GreenYellow;
--color_btnbdr_Action: LimeGreen;
--color_bgnd_Action: GreenYellow;
--color_btn_Action_Light: GreenYellow;
--color_btn_Action_Dark: Lime;
/* background-color: var(--color_btn_Action); */
--color_btn_NotAvil: DarkGray;
--color_btnbdr_NotAvail: Silver;
--color_btn_Normal: Cornsilk;
--color_btnbdr_Normal: Burlywood;
--color_bgnd_Normal: #FFE8EC;
--color_btn_Normal_Light: Cornsilk;
--color_btn_Normal_Dark: Burlywood;
--color_btn_Help: Pink;
--color_btnbdr_Help: Salmon;
--color_btn_Cancel: Gainsboro;
--color_btn_Help_Light: Pink;
--color_btn_Help_Dark: DeepPink;
--color_salonTxt_Posted: Green;
--color_salonTxt_Fake: Black;
/*--- Bgnd Status Colors --------*/
--color_bgc_WillHost: LightCoral;
--color_bgc_WillAttend: #C2F7A6; /*DAF7A6; paleGoldenrod; Yellow; LemonChiffon; Gold;*/
--color_bgc_OtherSched: Moccasin;
--color_bgc_PastHosted: SandyBrown; /*RosyBrown;*/ /* DarkKhaki;*/ /*Olive;*/ /* RosyBrown; */
--color_bgc_PastAttended: DarkKhaki; /*Brown;*/ /*Khaki;*/ /* Goldenrod; */
--color_bgc_PastSalon: LightGray; /*Gainsboro;*/ /* Peru; */
--color_bgc_NewlySched: Lime;
--color_bgc_VwrNotReg: Gainsboro;
--color_bgc_VwrNotReg: Gainsboro;
--color_bgc_HighlightDay: Lime;
--color_bgc_List_AvgSSUser: PowderBlue;
--color_bgc_List_MetSSUser: Gold;
--color_bgc_List_FavGuest: Lime; /*Pale Green Gold LightCyan, Cyan, Aqua */
--color_bgc_List_BadGuest: MediumPurple;
--color_bgc_List_YouSSUser: DarkTurquoise;
--color_bgc_PU_AvgSSUser: PowderBlue;
--color_bgc_PU_MetSSUser: Gold;
--color_bgc_PU_FavGuest: Lime; /*PaleGreen LightCyan, Cyan, Aqua */
--color_bgc_PU_BadGuest: MediumPurple;
--color_bgc_PU_YouSSUser: DarkTurquoise;
--color_bgc_Sal_CmntBefore: Wheat;
--color_bgc_Sal_CmntAfter: GreenYellow;
--color_sel_HighlightClr: PowderBlue;
--color_sel_HighlightBdr: blue;
--color_bgc_SS : white;
--color_bdr_Fav: lime; /*magenta;*/ /* DarkTurquoise; */
--color_saltypeFirstLet_S: blue;
--color_saltypeFirstLet_Z: green;
--color_saltypeFirstLet_M: orange;
--color_saltypeFirstLet_C: Purple;
--color_saltypeFirstLet_P: red;
--color_btn_HTUTP_Player_FwdBack: Cornsilk;
--color_menuBar: #FFAD1F;
--color_menuBar_Dark: #FFAD1F;
--color_menuBar_Light: Yellow;
--color_browseJCSBTBox: LightCyan;
--color_topicItemsList: PowderBlue;
--color_JDetPath: PowderBlue;
--color_bgndDlgUtils: BlanchedAlmond;
--color_bgndCT_OuterBox: Khaki;
--color_bgndCT_NewTopic: Beige;
--color_bgndCT_CategoryForNewTopic: YellowGreen;
--color_bgndSS_DlgInviteSSUsers: Khaki;
--color_bgndDlgSelTopic_OuterBox: Khaki;
--color_bgndSS_DlgSrchTopic_OuterBox: Khaki;
--color_bgndSS_DlgEditSalon_All: Khaki;
--color_bgndSS_DlgEditSalon_Restricted: Khaki;
--color_bgndSS_DlgRepeatSalon: Khaki;
--color_bgndGI_Bio: white;
--color_bgndCDD_DaysSalonsPopUp: LightSteelBlue;
--color_bgndCal_AllFavSTypePrefs: PowderBlue;
--color_popup_bgndSalonSelector: Khaki;
--color_popup_bgndDlgCreateTopic: PaleGreen;
--color_popup_bgndDlgCreateMTopic: LightSalmon;
--color_popup_bgndHTUTPContent: #FFDBE1;
--color_popup_bgndDisplayFavs: Tan;
--color_popup_bgndTopicDetails: BlanchedAlmond;
--color_popup_bgndSalonDetails: PeachPuff;
--color_popup_bgndWelcomeToSS: lightblue;
--color_popup_bgndMTSchedOrJoinSalon: LightSalmon;
--color_popup_bgndSSUserDetails: PowderBlue;
--color_popup_bgndNeedToBeRegistered: LightSalmon;
--color_popup_bgndDlgLogin: PaleGreen;
--color_popup_bgndDlgLoginProblem: Red;
--color_popup_bgndJoinSalon: Beige;
--color_popup_bgndYouveJoinedSalon: Beige;
--color_HIW_ContDiv: #FFE8EC;
--color_HIW_ContDiv_Dark: Pink;
--color_HIW_ContDiv_Light: #FFE8EC;
--color_HIW_shwHideDiv: blue;
--color_HIW_shwHideDef: blue;
--color_HIW_DefTextBdr: blue;
--color_HIW_DefTextBgnd: LightPink;
--color_HIW_spanHideDivTxt: blue;
--color_SFU_spanShwHideDivTxt: blue;
}
/*============== SS - General Purpose ======================*/
div.ExplanationBox_250pxW {
display: inline-block;
width: 250px;
border: 1px solid black;
padding: 5px;
}
/* .CD_InfoTable */
table,th,td {
border: 1px solid;
border-collapse: collapse;
}
.raise5px {
margin-top: -5px;
}
div.MaxHt100px_Scrl {
max-height: 100px;
overflow: auto;
}
div.MaxHt60px_Scrl {
max-height: 60px;
overflow: auto;
}
div.div_spacer150px {
display: inline-block;
width: 150px;
}
/*-- Fonts ---------------------- */
/* * { font-family: "Arial"; } */
/*---- Dlg background colors -------------*/
/*
Advice / Action Needed
RegReq: LightSalmon; [ or Coral Tomato DarkOrange ]
Do This:
Login: PaleGreen
popup_Details:
popup_SalonDetails: depends on salon status
popup_Help
popup_HTUTP: Pink
popup_Dlg
popup_DlgCreateTopic: Khaki
popup_SSUserDetails
popup_TpcDetails BlanchedAlmond; // bgc_Tpc
popup_SalonDetails PeachPuff; - but varies by salon status
popup_SSUserDetails PowderBlue; - but varies if FavGuest or BadGuest
InfoPopup BlanchedAlmond;
popup_HTUTP #FFDBE1; #FFD6DD; #FFD1D9; //Pink; light pink
*/
/*---- Input fields -------------*/
.inp_Action {
background-image: linear-gradient(30deg, var(--color_btn_Action_Dark), var(--color_btn_Action_Light));
/* background-color: var(--color_btn_Action); */
}
/* -------- Button Bars --------------- */
.btnBar_CancelAndOther_450w {
display: flex;
justify-content: space-between;
width: 90%;
max-width: 450px;
margin: 10px auto;
}
.btnBar_CancelAndOther_360w {
display: flex;
justify-content: space-between;
width: 80%;
max-width: 360px;
margin: 10px auto;
}
.btnBar_CancelAndOther_280w {
display: flex;
justify-content: space-between;
width: 280px;
/* max-width: 360px; */
margin: 10px auto;
}
.btnBar_CancelAndOther_200w {
display: flex;
justify-content: space-between;
width: 200px;
/* max-width: 360px; */
margin: 10px auto;
}
.btnBar_CancelAndOther_FullW_spcAr{
display: flex;
justify-content: space-around;
margin: 10px auto;
}
.btnBar_RegLogin {
display: inline-block;
}
.btnBar_FlexSB90pcW {
display: flex;
justify-content: space-between;
width: 90%;
margin: 5px auto; /* Top LR Bot */
}
/*-- Button Types --------*/
.btn_rndShdw {
border-radius: 6px;
box-shadow: 0px 2px 2px black;
}
.btn_Finish {
background-image: linear-gradient(30deg, var(--color_btn_Finish_Dark), var(--color_btn_Finish_Light));
border: 2px solid var(--color_btnbdr_Finish);
border-radius: 6px;
}
.btn_Action {
background-image: linear-gradient(30deg, var(--color_btn_Action_Dark), var(--color_btn_Action_Light));
border: 2px solid var(--color_btnbdr_Action);
border-radius: 6px;
}
.btn_NotAvail {
background-color: var(--color_btn_NotAvil);
border-radius: 6px;
}
.btn_NotAvail_wBrdr {
background-color: var(--color_btn_NotAvil);
border: 2px solid var(--color_btnbdr_NotAvail);
border-radius: 6px;
}
.btn_Normal {
cursor: pointer;
background-image: linear-gradient(30deg, var(--color_btn_Normal_Dark), var(--color_btn_Normal_Light));
border-radius: 6px;
text-decoration: none;
}
.btn_Normal_wBrdr {
background-image: linear-gradient(30deg, var(--color_btn_Normal_Dark), var(--color_btn_Normal_Light));
border: 2px solid var(--color_btnbdr_Normal);
border-radius: 6px;
}
.btn_Help {
background-image: linear-gradient(30deg, var(--color_btn_Help_Dark), var(--color_btn_Help_Light));
border-radius: 6px;
}
.btn_Help_wBrdr {
background-image: linear-gradient(30deg, var(--color_btn_Help_Dark), var(--color_btn_Help_Light));
border: 2px solid var(--color_btnbdr_Help);
border-radius: 6px;
}
.bgnd_Help { background-color: var(--color_bgnd_Help); }
.btn_Cancel {
background-color: var(--color_btn_Cancel);
border-radius: 6px;
}
.anchor_btn_Normal {
text-decoration: none;
background-image: linear-gradient(30deg, var(--color_btn_Normal_Dark), var(--color_btn_Normal_Light));
border: 1px solid black;
border-radius: 6px;
color: black;
padding: 2px;
}
div.anchor_2lineBtn_Normal {
height: 60px;
width: 380px;
margin: 5px auto;
font-size: 1.2em;
background-image: linear-gradient(30deg, var(--color_btn_Normal_Dark), var(--color_btn_Normal_Light));
border: 1px solid black;
border-radius: 6px;
box-shadow: 0px 2px 2px black;
padding: 5px;
}
.btn_div {
margin: 5px;
font-size: 1.2em;
width: 110px;
/* height: 35px; */
background-color: var(--color_bgnd_Normal);
border: 1px solid black;
border-radius: 6px;
box-shadow: 0px 2px 2px black;
padding: 3px;
cursor: pointer;
height: fit-content;
/*
min-height: 50px;
overflow: hidden;
height: auto;
min-height: 100%; */
}
.anchor_btn_Action {
text-decoration: none;
background-image: linear-gradient(30deg, var(--color_btn_Action_Dark), var(--color_btn_Action_Light));
border: 2px solid var(--color_btnbdr_Action);
border-radius: 6px;
color: black;
padding: 2px;
}
/*--- Salon text status colors ----*/
.txt_P { color: var(--color_salonTxt_Posted); } /* A real, posted salon */
.txt_F { color: var(--color_salonTxt_Fake); } /* A FAKE salon */
/*--- Bgnd Status Colors --------*/
.bgc_WillHost { background-color: var(--color_bgc_WillHost); }/*Coral;*/
.bgc_WillHost tr td { background-color: var(--color_bgc_WillHost); }/*Coral;*/
.bgc_WillAttend { background-color: var(--color_bgc_WillAttend); }
.bgc_WillAttend tr td { background-color: var(--color_bgc_WillAttend); }
.bgc_OtherSched { background-color: var(--color_bgc_OtherSched); }
.bgc_OtherSched tr td { background-color: var(--color_bgc_OtherSched); }
.bgc_PastHosted { background-color: var(--color_bgc_PastHosted); } /*RosyBrown;*/ /* DarkKhaki;*/ /*Olive;*/ /* RosyBrown; */
.bgc_PastHosted tr td { background-color: var(--color_bgc_PastHosted); } /*RosyBrown;*/ /* DarkKhaki;*/ /*Olive;*/ /* RosyBrown; */
.bgc_PastAttended { background-color: var(--color_bgc_PastAttended); } /*Brown;*/ /*Khaki;*/ /* Goldenrod; */
.bgc_PastAttended tr td { background-color: var(--color_bgc_PastAttended); } /*Brown;*/ /*Khaki;*/ /* Goldenrod; */
.bgc_PastSalon { background-color: var(--color_bgc_PastSalon); } /*Gainsboro;*/ /* Peru; */
.bgc_PastSalon tr td { background-color: var(--color_bgc_PastSalon); } /*Gainsboro;*/ /* Peru; */
.bgc_NewlySched { background-color: var(--color_bgc_NewlySched); }
.bgc_NewlySched tr td { background-color: var(--color_bgc_NewlySched); }
.bgc_VwrNotReg { background-color: var(--color_bgc_VwrNotReg); }
.bgc_VwrNotReg tr td { background-color: var(--color_bgc_VwrNotReg); }
.bgc_HighlightDay { background-color: var(--color_bgc_HighlightDay); }
.bgc_List_AvgSSUser { background-color: var(--color_bgc_List_AvgSSUser) !important; }
.bgc_List_MetSSUser { background-color: var(--color_bgc_List_MetSSUser) !important; }
.bgc_List_FavGuest { background-color: var(--color_bgc_List_FavGuest) !important; } /* PaleGreen LightCyan, Cyan, Aqua */
.bgc_List_BadGuest { background-color: var(--color_bgc_List_BadGuest) !important; }
.bgc_List_YouSSUser { background-color: var(--color_bgc_List_YouSSUser) !important; }
.bgc_PU_AvgSSUser { background-color: var(--color_bgc_PU_AvgSSUser); }
.bgc_PU_MetSSUser { background-color: var(--color_bgc_PU_MetSSUser); }
.bgc_PU_FavGuest { background-color: var(--color_bgc_PU_FavGuest); } /*PaleGreen LightCyan, Cyan, Aqua */
.bgc_PU_BadGuest { background-color: var(--color_bgc_PU_BadGuest); }
.bgc_PU_YouSSUser { background-color: var(--color_)bgc_PU_YouSSUser; }
.bgc_Sal_CmntBefore { background-color: var(--color_bgc_Sal_CmntBefore) !important; }
.bgc_Sal_CmntAfter { background-color: var(--color_bgc_Sal_CmntAfter) !important; }
.sel_HighlightClr { background-color: var(--color_sel_HighlightClr); }
.sel_HighlightBdr { border: 4px solid var(--color_sel_HighlightBdr); }
/* .bgc_SS { background-color: var(--color_bgc_SS); } not used */
.bgc_SSl { background-color: var(--bgcolor_SSl); }
.bgc_Sbj { background-color: var(--bgcolor_Sbj); color: white; }
/* .fgc_Sbj { color: white; } White text against dark maroon bgc */
.bgc_Cat { background-color: var(--bgcolor_Cat); }
.bgc_Sbc { background-color: var(--bgcolor_Sbc); }
.bgc_Brn { background-color: var(--bgcolor_Brn); }
.bgc_Tpc { background-color: var(--bgcolor_Tpc); }
.bdr_Fav { border: 3px solid var(--color_bdr_Fav) !important; }
.bdr_Fav2px { border: 2px solid var(--color_bdr_Fav) !important; }
.bdr_Fav1px { border: 1px solid var(--color_bdr_Fav) !important; }
div.sampleS_WH { /* Salon - Will Host */
display: inline-block;
height: 8px;
width: 10px;
border: 1px solid black;
background-color: var(--color_bgc_WillHost);
}
div.sampleS_WA { /* Salon - Will Attend */
display: inline-block;
height: 8px;
width: 10px;
border: 1px solid black;
background-color: var(--color_bgc_WillAttend);
}
div.sampleS_OS { /* Salon - Other, you can join */
display: inline-block;
height: 8px;
width: 10px;
border: 1px solid black;
background-color: var(--color_bgc_OtherSched);
}
div.sampleS_PH { /* Salon - Past, you Hosted */
display: inline-block;
height: 8px;
width: 10px;
border: 1px solid black;
background-color: var(--color_bgc_PastHosted);
}
div.sampleS_PA { /* Salon - Past, you Attended */
display: inline-block;
height: 8px;
width: 10px;
border: 1px solid black;
background-color: var(--color_bgc_PastAttended);
}
div.sampleS_PS { /* Salon - Past, not Present */
display: inline-block;
height: 8px;
width: 10px;
border: 1px solid black;
background-color: var(--color_bgc_PastSalon);
}
div.sampleG_Avg {
display: inline-block;
height: 8px;
width: 10px;
border: 1px solid black;
background-color: var(--color_bgc_List_AvgSSUser);
}
div.sampleG_Met {
display: inline-block;
height: 8px;
width: 10px;
border: 1px solid black;
background-color: var(--color_bgc_List_MetSSUser);
}
div.sampleG_Fav {
display: inline-block;
height: 8px;
width: 10px;
border: 1px solid black;
background-color: var(--color_bgc_List_FavGuest);
}
div.sampleG_Bad {
display: inline-block;
height: 8px;
width: 10px;
border: 1px solid black;
background-color: var(--color_bgc_List_BadGuest);
}
div.sampleG_You {
display: inline-block;
height: 8px;
width: 10px;
border: 1px solid black;
background-color: var(--color_bgc_List_YouSSUser);
}
div.sample_Sal_CmntBefore {
display: inline-block;
height: 8px;
width: 10px;
border: 1px solid black;
background-color: var(--color_bgc_Sal_CmntBefore);
}
div.sample_Sal_CmntAfter {
display: inline-block;
height: 8px;
width: 10px;
border: 1px solid black;
background-color: var(--color_bgc_Sal_CmntAfter);
}
/*- Salon type colors (First letter of salon type) ------------ */
.clr_S { color: var(--color_saltypeFirstLet_S); font-weight: bold; }
.clr_Z { color: var(--color_saltypeFirstLet_Z); font-weight: bold; }
.clr_M { color: var(--color_saltypeFirstLet_M); font-weight: bold; }
.clr_C { color: var(--color_saltypeFirstLet_C); font-weight: bold; }
.clr_P { color: var(--color_saltypeFirstLet_P); font-weight: bold; }
.selBoxW_Tpcs { width: 200px; }
.selBoxW_CatNames { width: 240px; }
.selBoxW_Salons { width: 200px; }
.selBoxW_SalonDtTms { width: 170px; }
.selBoxW_SSUsers { width: 200px; }
.btn_HTUTP_Player_FwdBack {
font-size: 1.8em;
background-color: var(--color_btn_HTUTP_Player_FwdBack);
/*
vertical-align: middle;
padding-bottom: 5px;
margin-top: -10px;
*/
height: 24px;
}
.btn_HTUTP_Player_Pause {
font-size: 1.4em;
background-color: var(--color_btn_HTUTP_Player_FwdBack);
/*vertical-align: middle;*/
height: 24px;
}
/*===========================================================================*/
/*============================= SS UI Pages ===============================*/
/* ======================== index (home page) ======================= */
/*------------- Header ---------------*/
#Hdr_Header {
width: 100%;
height: 80px;
margin-top: 5px;
padding: 0;
overflow: hidden;
}
.Hdr_SSLogo { margin: 5px 10px 5px 10px; } /* Top right bottom left */
.Hdr_MiniSlide { padding: 2px 2px 0px 2px; margin: 2px auto 0 auto; }
.Hdr_Slides{
display: block;
max-width: 119px;
box-shadow: 0px 4px 4px black;
border-radius: 6px;
}
div.Hdr_TopLogo {
width: 35%;
margin: 5px 10px 5px 0;
display: inline-block;
}
.Hdr_SSTitle {
font: bold 2rem Georgia, serif;
padding: 0 10px;
margin: 0 30px;
cursor: pointer;
}
.Hdr_SSTitle_Font_1p3em {
font: bold 1.3em Georgia, serif;
}
.tooltip_Sample {
font-family: Arial;
font-size: 1em;
padding: 2px;
background-color: white;
border: 1px solid black;
}
#Hdr_logProbBox {
z-index: 5; position: absolute; top: 10px; right: 45%; width: 300px; height: 170px; background-color:white; color: orange; border: 1px #2098C2 solid; display: none; border-radius: 6px; padding: 10px; }
/*------------ Menu -------------*/
#Hdr_topMenuBar {
display: inline-grid;
grid-template-columns: 1fr 1fr 1fr;
width: 100%;
min-width: 680px;
height: 48px;
font-size: 9pt;
font-weight: bold;
background-image: linear-gradient(to bottom, var(--color_menuBar_Dark), var(--color_menuBar_Light), var(--color_menuBar_Dark) );
/* background-color: var(--color_menuBar); */
}
.colorMenu {
background-color: var(--color_menuBar_Dark);
/* background-image: linear-gradient(to bottom, var(--color_menuBar_Dark), var(--color_menuBar_Light), var(--color_menuBar_Dark) ); */
}
/* -------- Menu List Items -------- */
.Hdr_btnMenu1Line {
font: bold 1.1em Arial;
cursor: pointer;
height: 28px;
margin-top: 7px;
}
.Hdr_btnMenu2Line {
font: bold 1.1em Arial;
cursor: pointer;
height: 40px;
margin-top: 3px;
}
.Hdr_btnMenuSmall {
font: bold 1.1em Arial;
cursor: pointer;
height: 20px;
}
.Hdr_menuAction {
margin: 2px 15px;
cursor: pointer;
}
div#Hdr_Menu_Left {
display: flex;
justify-content: left;
margin-left: 10px;
}
div#Hdr_Menu_Middle{
font: bold 1.3em Arial;
display: flex;
justify-content: space-around;
margin: 0;
}
div#Hdr_Menu_Right{
display: flex;
justify-content: right;
margin-right: 10px;
}
div.HelloLoginID{
text-align: center;
padding-top: 4px;
padding-bottom: 4px;
font-size: 1.3em;
}
/*------- end Menu -------*/
/*----------- Quck Links -------------*/
.btnQL_Normal {
font: bold 1rem Arial;
cursor: pointer;
background-image: linear-gradient(30deg, var(--color_btn_Normal_Dark), var(--color_btn_Normal_Light));
/*
--color_btn_Normal_Light: Cornsilk;
--color_btn_Normal_Dark: Burlywood;
*/
/* background-color: var(--color_btn_Normal); */
border-radius: 6px;
margin-bottom: 4px;
}
.btnQL_Normal_wBrdr {
font: bold 1rem Arial;
cursor: pointer;
background-image: linear-gradient(30deg, var(--color_btn_Normal_Dark), var(--color_btn_Normal_Light));
/* background-color: var(--color_btn_Normal); */
border: 2px solid var(--color_btnbdr_Normal);
border-radius: 6px;
margin-bottom: 4px;
}
.btnQL_NotAvail {
font: bold 1rem Arial;
background-color: var(--color_btn_NotAvil);
border-radius: 6px;
margin-bottom: 4px;
}
.btnQL_NotAvail_wBrdr {
font: bold 1rem Arial;
background-color: var(--color_btn_NotAvil);
border: 2px solid var(--color_btnbdr_NotAvail);
border-radius: 6px;
margin-bottom: 4px;
}
/*----------------------- end of Header ------------------------*/
/*----------- Home Page -----------------------------------------*/
#HP_container { overflow: auto; } /* margin: 0 auto; padding: 0; text-align: left; } */
div.HP_QuickLinks { margin-top: 10px; }
div#HP_IntroBox_WithPics {
display: grid;
/* grid-template-columns: [LImgs] 125px [IntroText] auto [RImgs] 125px; */
grid-template-columns: [LImgs] 15% [IntroText] 70% [RImgs] 15%;
grid-gap: 2px; /* betw rows, betw cols */
place-self: center;
font: bold 1.2em Arial;
width: 70%;
border: 1px solid black;
}
.HP_IntroBox_WithPics_Img {
/* height: 70px; */
width: 85%;
border-radius: 5px;
}
.HP_IntroBox_WithPics_BotImg {
/* height: 70px; */
width: 50%;
border-radius: 5px;
padding-left: 20px;
padding-right: 20px;
}
.HP_IntroBox_WithPics_Img90px {
height: 90px;
border-radius: 5px;
margin-top: 30px;
margin-bottom: 30px;
}
.HP_IntroBox_WithPics_BotRow {
grid-column: 1 / span 3;
grid-row: 2 / 2;
}
div#HP_IntroBox {
font: bold 1.2em Arial;
display: inline-block;
width: 60%;
padding: 15px;
border: 1px solid black;
}
div.HP_Section {
margin: 10px;
font-size: 1.2em;
width: 700px;
margin: 0 auto;
border: 1px solid black;
}
#HP_mainContent { /*----- main container---*/
/* width: 850px; */
width: 90%;
background-color: white;
}
div.HP_Panel {
/* width: 630px; */
border: 1px solid black;
}
.leftSide {
margin-left: 10%;
}
.rightSide {
/* margin-right: 10%; */
margin-left: 20%;
}
.centered {
margin: 0 auto;
}
.width80pct {
width: 80%;
}
.HP_Panel p {
text-indent: 3em;
}
div.HP_SectionBlock { width: 90%; margin: 0 3%; }
div.HP_ExploreBtns {
display: flex;
justify-content: space-between;
/* width: 60%; */
margin: 0 auto;
}
.HP_ExplFieldset{
width: 500px;
font-weight: bold;
margin: 10px auto;
}
img.HP_Img_SSDiff{
height: 100px;
margin: 3px;
}
#HP_footer { display: flex; justify-content: space-around; width: 100%; height: 40px; margin: 0; text-align: center;
background-color: white; border-top: 7px solid #F60; font-size: 0.8em; color: #888888; padding: 0;}
/* ====================== END OF INDEX (Home Page, HP_... ) ========================*/
/* ====================== 35_YourSalons.php ========================*/
/*---- Uses same classes as Upcoming Salons ------------------------*/
#MostPopTpcsList {
width: 280px;
}
#RecAddedTpcsList {
width: 280px;
}
/* ====================== 36_UpcomingSalons.php ========================*/
body.US_Body {
width: 100%;
align-content : center;
}
div#US_OuterWrapper {
/*
display: inline-block;
margin: 0 auto;
*/
width:90%;
margin: 0 auto;
/* display: flex;
justify-content: center;
*/
}
div#US_OuterDiv {
display: flex; /* justify-content: space-around; justify-content: space-between; justify-content: center; */
}
div.US_LeftSide {
margin: 3px 5px;
padding: 3px 5px;
}
div.US_RightSide {
margin: 3px 5px;
padding: 3px 5px;
}
.US_Fieldset {
width: 480px;
margin: 0 auto;
}
.US_DivNotes {
width: 50%;
border: 1px solid black;
margin: 5px auto;
padding: 3px;
}
.US_DivNotes_Help {
/* width: 85%; */
border: 1px solid black;
margin: 5px;
padding: 3px;
background-color: var(--color_btn_Help);
}
/* ====================== 37_Search.php ========================*/
.SRCH_Img {
height: 40px;
margin: 3px;
}
.listImg {
max-height: 44px;
max-width: 90px;
}
.listDiv {
max-height: 300px;
overflow-y: auto;
}
/* ====================== 38_CatsAndTopicsLists.php ========================*/
/*---------- No custom css in Cats & Topics --------------------------------*/
/* ====================== TB.php ========================*/
.JS_topBtnsBox {
display: flex;
justify-content: center;
width: 840px;
}
.ssTpcPath {
display: grid;
/* grid-template-columns: minmax( 80px, 150px) 15px minmax( 80px, 150px) 15px minmax( 80px, 105px) 15px minmax( 80px, 105px); */
grid-template-columns: 140px 15px 140px 15px 140px 15px 140px 15px 140px;
grid-gap: 0; /* betw rows, betw cols */
/* justify-items: center; left right alignment align-items up down place-items align/justify or center */
place-items: center;
grid-template-areas: 'Top' 'Sbj' 'C' 'S' 'B' 'T';
grid-auto-flow: row; /* fill row first */
width: 760px;
border: 1px solid black;
margin: 15px auto;
padding: 10px;
background-color: powderblue;
/* background-color: beige; */
border-radius: 8px;
}
.ssPathCell {
width: 120px;
/* padding-top: 5px; */
border: 1px solid black;
text-align: center;
border-radius: 8px;
box-shadow: 0px 3px 3px black;
cursor: pointer;
}
.btnDetUnderID{
font-size: 1em;
background-image: linear-gradient(30deg, var(--color_btn_Normal_Dark), var(--color_btn_Normal_Light));
border: 1px solid black;
border-radius: 6px;
}
.btnDetUnderSalonID{
font-size: 1em;
background-image: linear-gradient(30deg, var(--color_btn_Normal_Dark), var(--color_btn_Normal_Light));
border: 1px solid black;
border-radius: 6px;
}
.btnDetUnderNNID{
font-size: 1em;
background-image: linear-gradient(30deg, var(--color_btn_Normal_Dark), var(--color_btn_Normal_Light));
border: 1px solid black;
border-radius: 6px;
}
.browseJCSBTBox {
border: 1px solid black;
width: 840px;
background-color: var(--color_browseJCSBTBox);
/* background-color: PeachPuff; */
border: 1px solid black;
border-radius: 6px;
box-shadow: 0px 2px 2px black;
padding: 5px;
}
.JTTxt_browseJCSBTBox {
border: 1px solid black;
width: 450px;
background-color: var(--color_browseJCSBTBox);
border: 1px solid black;
/*
border-radius: 6px;
box-shadow: 0px 2px 2px black;
*/
padding: 5px;
}
.TB_tierDesc {
width: 500px;
height: 50px;
margin-top: 5px;
overflow-y: auto;
}
.TB_topicDesc {
width: 400px;
height: 50px;
margin-top: 5px;
overflow-y: auto;
}
.tbTilesGridWrapper {
width: 800px;
border: 1px solid black;
margin: 15px auto;
padding: 10px;
border-radius: 8px;
}
.tbTilesGrid {
display: grid;
grid-template-columns: repeat( 5, minmax( 150px, 220px) );
grid-template-rows: 170px;
grid-gap: 10px;
place-items: center;
grid-auto-flow: row;
width: 796px;
/*
width: 800px;
border: 1px solid black;
margin: 15px auto;
padding: 10px;
border-radius: 8px;
*/
}
.tbTilesHotTopicSbjRow {
width: 796px;
height: 140px;
}
.JTTxt_tbTilesGrid {
display: grid;
grid-template-columns: repeat( 5, 85px );
grid-template-rows: 35px;
grid-gap: 4px;
place-items: center;
grid-auto-flow: row;
width: 430px;
border: 1px solid black;
margin: 5px auto;
padding: 10px;
border-radius: 3px;
}
.tbTilesGridCell {
width: 150px;
padding-top: 5px;
/* height: 130px; */
border: 1px solid black;
text-align: center;
border-radius: 8px;
box-shadow: 0px 7px 6px black;
}
.JTTxt_tbTilesGridCell {
width: 75px;
height: 30px;
cursor: pointer;
overflow: hidden;
padding-top: 3px;
/* height: 130px; */
border: 1px solid black;
text-align: center;
border-radius: 3px;
box-shadow: 0px 3px 3px black;
}
.JTTxt_pathGridCell {
cursor: pointer;
padding-top: 3px;
/* height: 130px; */
border: 1px solid black;
text-align: center;
border-radius: 3px;
box-shadow: 0px 3px 3px black;
}
.tbTilesGridCell img {
max-height: 110px;
max-width: 140px;
}
.opGridCellCaption {
font-weight: bold;
font-family: Arial;
font-size: 1em;
cursor: pointer;
}
.JCSBT_Title {
font-family: Arial;
font-size: 1em;
font-weight: bold;
}
.F3p5em { font-size: 3.5em; }
.F2p5em { font-size: 2.5em; }
.ssTpcPath img {
max-height: 55px;
max-width: 100px;
}
.img30pxh {
max-height: 30px;
}
.img50pxh {
max-height: 50px;
}
img.JS_BrnImgForTpcsList {
max-height: 50px;
border: 1px solid black;
border-radius: 4px;
box-shadow: 0px 3px 3px black;
}
img.JS_ImgForJCSBSelHeading {
max-height: 60px;
margin-bottom: 3px;
border: 1px solid black;
border-radius: 4px;
box-shadow: 0px 3px 3px black;
}
.topicItemsList {
display: flex;
flex-direction: column;
width: 620px;
padding: 5px;
border: 1px solid black;
text-align: center;
background-color: var(--color_topicItemsList);
}
.topicItemsList_SSSel {
display: flex;
flex-direction: column;
width: 400px;
padding: 5px;
border: 1px solid black;
text-align: center;
background-color: var(--color_topicItemsList);
}
div.topicListItem_SSSel{
width: 360px;
margin: 10px auto;
padding: 5px;
text-align: center;
border: 1px solid black;
border-radius: 8px;
box-shadow: 0px 4px 4px black;
}
div.topicListItem {
width: 560px;
margin: 10px auto;
padding: 5px;
text-align: center;
border: 1px solid black;
border-radius: 8px;
box-shadow: 0px 4px 4px black;
}
div.topicListItemDesc {
width: 90%;
margin: 10px auto;
text-align: left;
/*
height: 30px;
overflow: auto;
*/
}
div.topicListItemBtns {
display: flex;
vertical-align: center;
justify-content: space-around;
margin: 5px auto;
}
.btnShwTpcDetails {
font-size: 1.3em;
font-weight: 600;
}
/* ====================== 49ip_JCSBDetails.php ========================*/
div#popup_JCSBDetails {
visibility: hidden;
z-index: 13;
position: fixed; /* Center in the Viewport */
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%);
width: 420px; /*350px;*/
max-height: 625px;
padding: 5px 5px 10px 5px;
/* background-color: white; */
border: 1px solid black;
border-radius: 4px;
box-shadow: 0px 7px 6px black;
}
.JDet_mainImgDiv {
width: 350px;
height: 155px;
margin: 10px;
}
.JDet_mainImgDiv img {
max-height: 150px;
border-radius: 4px;
box-shadow: 0px 7px 6px black;
}
.JDet_descDiv {
width: 270px;
height: 45px;
border: 1px solid lightgray;
padding: 3px;
text-align: left;
overflow-y: auto;
margin-bottom: 5px;
background-color: white;
}
.JDet_Path {
display: grid;
grid-template-columns: 18px 70px 18px 70px 18px 70px 18px 70px;
grid-gap: 0;
place-items: center;
width: 360px;
margin: 5px 0;
padding: 5px;
border: 1px solid black;
background-color: var(--color_JDetPath);
border-radius: 8px;
}
.JDetpathCell {
width: 70px;
height: 63px;
border: 1px solid black;
border-radius: 8px;
}
.JDet_Path img {
max-height: 25px;
}
.JDet_pathTitle {
font-size: 0.8em;
font-weight: bold;
}
.JDet_pathLabel {
font-size: 0.8em;
}
.JDet_divUseHistBox {
min-width: 390px;
max-width: 390px;
margin: auto;
}
div.JDet_divUseHistTable {
min-width: 390px;
max-width: 390px;
height: 50px;
overflow: hidden auto;
border: 1px solid black;
left: 0;
}
.JDet_UseHistTable_FullW {
min-width: 400px;
max-width: 400px;
left: 0;
text-justify: left;
}
/* ====================== Cal.php ========================*/
div.Cal_divHeaderAndCal {
background-color: iceberg;
border: 1px solid blue;
width: 615px;
margin: 10px auto;
background-color: white;
}
div.Cal_divHeader {
width: 615px;
height: 60px;
display: flex;
justify-content: space-between;
background-color: blue;
border: 1px solid black;
}
div.Cal_divMonthNameAndSchedBtn {
display: flex;
justify-content: space-between;
width: 430px;
height: 35px;
margin: 2px;
}
div.Cal_divMonthName {
font-size: 2.5em;
color: white;
font-family: Arial;
font-weight: bold;
}
div.Cal_btnSchedSalon {
font-family: Arial;
font-size: 1.2em;
color: black;
}
div.Cal_divPrevNextMonth { display: flex; background-color: iceberg; }
img.Cal_BigCalLgnd {
position: relative;
top: -3px;
left: 0;
}
div.Cal_divNumSal { font-size: 0.8em; }
div.Cal_microCal {
height: 50px;
width: 70px;
font-size: .7em;
background-color: white;
margin: 5px;
text-align: center;
}
table.Cal_tblMain {
width: 600px;
border: 1px solid black;
border-collapse: none;
}
tr.Cal_trHdrRow {
color: white;
background-color: blue;
}
table.Cal_tblMain td {
height: 100px;
width: 101px;
border: 1px solid black;
}
div.Cal_divCalCell {
height: 100px;
width: 85px;
overflow-y: auto;
overflow-x: hidden;
/*
overflow: hidden;
border: 2px solid red; */
}
div.Cal_divCalList {
font-weight: bold;
overflow-y: auto;
}
div.Cal_divDateNum { font-size: 1.5em; font-weight: bold; }
/*
With border-collapse set to collapse, the solution would be to use an inset border for all the cells, and a solid border for the cell that the mouse hovers over. Here's the suggested CSS in action: https://jsfiddle.net/QmHGG/
The following is the CSS that was applied to the table:
table, tr, td {
border: 1px inset black;
border-collapse: collapse;
border-spacing: 0;
}
td:hover {
border: 1px solid red;
}
*/
/* ====================== 20_Register.php ========================*/
.REP_SecHead_Text {
text-align: center;
background-color: #09C;
color: white;
height: 20px;
padding: 5px;
font-size: 1.4em;
font-weight: bold;
}
/* ====================== 22_Reg_Finish.php ========================*/
/* ====================== 24_EditProfile.php ========================*/
div.EP_ProfileImage {
/*
display: flex;
justify-content: space-around;
*/
margin: 5px;
}
div#EP_divCurrentImg {
width: 130px;
height: 190px;
padding: 3px;
}
img#EP_imgSSUserImage {
max-width: 120px;
max-height: 160px;
margin-top: 10px;
object-fit: cover;
box-shadow: 0px 7px 6px black;
}
.invisBtn {
opacity: 0;
}
div.EP_NewImageZone {
/*
width: 160px;
height: 215px;
*/
padding: 3px;
text-align: center;
}
div#EP_divImageDZ {
width: 120px;
height: 160px;
padding: 3px;
border: 2px dashed grey;
}
#EP_divImageDZ.highlight {
border-color: purple;
}
#EP_divNoteSaveProfileToSavePic {
display: none;
width: 300px;
color: red;
border: 2px solid red;
}
div.divTimeZonesList {
width: 200px;
height: 90px;
overflow: hidden auto;
border: 1px solid black;
background-color: white;
}
div.EP_divLinksTable {
width: 225px;
height: 50px;
overflow: hidden auto;
border: 1px solid black;
background-color: white;
}
#EP_LinksTable{
min-width: 225px;
max-width: 225px;
left: 0;
}
div.EP_divFavCSBTTable{
width: 280px;
max-height: 90px;
overflow: hidden auto;
border: 1px solid black;
background-color: white;
}
#EP_FavCSBTTable{
min-width: 280px;
max-width: 280px;
left: 0;
}
div.EP_divGuestsTable{
width: 90px;
max-height: 65px;
overflow: hidden auto;
border: 1px solid black;
background-color: white;
}
td.title {
font-weight: bold;
text-align: right;
padding-right: 10px;
font-family: Arial;
font-size: 0.9em;
}
#EP_divSSUsersMetInSalons {
width: 220px;
height: 120px;
border: 1px solid black;
background-color: white;
overflow: hidden auto;
}
#EP_tbl_AllSSUsersMet {
background-color: white;
width: 100%;
}
.EP_divSalonsList {
width: 350px;
height: 95px;
border: 1px solid black;
background-color: white;
overflow: hidden auto;
touch-action: pan-y;
}
#EP_tbl_AllSSUsersMet tr td {
max-height: 100px;/* background-color: white; */
}
/* =============== Register SSUser ====================*/
/* 20-25_Reg_EditProfile.css 14-04-16 - CSS file for 20-25 Register SSUser, Edit Profile SSUser php files */
#wrapper {
background-color: white;
/* width:740px; */
/* max-height:600px; */
padding:10px 15px;
/* position:relative; */
}
#EP_divClickToChngPwd {
display: flex;
align-items: center;
justify-content: center;
height: 30px;
width: 312px;
color: white;
background-color: #0099CC;
border: 1px solid black;
margin: 10px auto;
text-align: center;
font-size: 1.2em;
font-weight: bold;
}
#EP_pwdChangeDiv {
display: none;
font-size: 1em;
}
fieldset.SEP { width: 610px;}
.req { border: 2px solid red; }
.btn-cancel{ height: 15px; border-radius: 3px; border: 1px solid #ccc; margin: 10px; font-size: 0.7em}
/* ===== Registration & Profile ===== */
table.CEP480 { width: 480px; border: 1px solid black; }
table.SEP { width: 620px; }
table.SEP450 { width: 310px; border: 1px solid black; }
table.regInfo { padding: 0px; }
table.regInfo tr td { margin: 0px; border: 1px solid #ccc; height: 35px; }
div#InnerContent { padding: 10px; overflow:auto; }
div.ErrorBox650px { color: Blue; width: 650px;
border: 3px solid Blue; text-align: left; font-size: 1em; }
#btnRmvFavGuest { visibility: hidden; }
#btnRmvBadGuest { visibility: hidden; }
div#EP_DlgAddLink {
visibility: hidden;
width: 310px;
height: 110px;
z-index: 7;
position: fixed; /* Center in the Viewport */
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%);
padding: 3px;
background-color: var(--color_bgndDlgUtils);
border: 2px solid black;
border-radius: 4px;
box-shadow: 0px 7px 6px black;
}
div#EP_DlgAddLang {
visibility: hidden;
width: 310px;
height: 250px;
z-index: 7;
position: fixed; /* Center in the Viewport */
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%);
padding: 3px;
background-color: var(--color_bgndDlgUtils);
border: 2px solid black;
border-radius: 4px;
box-shadow: 0px 7px 6px black;
}
.EP_divDlgSelLangcodes{
width: 120px;
max-height: 120px;
border: 1px solid black;
background-color: white;
overflow: hidden auto;
}
div#EP_DlgAddFavCSBT {
visibility: hidden;
width: 370px;
height: 160px;
position: fixed;
top: 100px;
left: 35%;
padding: 3px;
font-size: 1.1em;
background-color: var(--color_bgndDlgUtils);
border: 2px solid black;
border-radius: 4px;
box-shadow: 0px 7px 6px black;
}
div#EP_DlgAddFavG {
visibility: hidden;
width: 340px;
height: 320px;
z-index: 7;
position: fixed; /* Center in the Viewport */
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%);
padding: 10px;
background-color: var(--color_bgndDlgUtils);
border: 2px solid black;
border-radius: 4px;
box-shadow: 0px 7px 6px black;
}
.EP_divDlgAddFavOrBad_UsersTables {
width: 140px;
max-height: 120px;
border: 1px solid black;
background-color: white;
overflow: hidden auto;
}
div#EP_DlgAddBadG {
visibility: hidden;
width: 340px;
height: 320px;
z-index: 7;
position: fixed; /* Center in the Viewport */
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%);
padding: 10px;
background-color: var(--color_bgndDlgUtils);
border: 2px solid black;
border-radius: 4px;
box-shadow: 0px 7px 6px black;
}
.bdr_YT{border: 2px solid #0000FF;}
.bdr_AC{border: 2px solid #A52A2A;}
.bdr_WS{border: 2px solid #DA70D6;}
.bdr_NP{border: 2px solid #F5EB67;}
.bdr_MG{border: 2px solid #44D492;}
.bgc_CWMW{background-color: #E0FFFF;} /* YT Interviews */
.bgc_JPet{background-color: #D0EFFA;}
.bgc_LexF{background-color: #AFEEEE;}
.bgc_MBak{background-color: #ADD8E6;}
.bgc_RebW{background-color: #87CEEB;}
.bgc_TFer{background-color: #87CEFA;}
.bgc_Trig{background-color: #33D1E6;}
.bgc_UHrd{background-color: #00BFFF;}
.bgc_BarW{background-color: #FEF5e5;} /* Audiocasts */
.bgc_BenS{background-color: #FDDDC4;}
.bgc_Daly{background-color: #F9D3B9;}
.bgc_FarZ{background-color: #FFCA92;}
.bgc_InOT{background-color: #F4BCA1;}
.bgc_JREX{background-color: #EEC0A9;}
.bgc_PhlB{background-color: #DB9A93;}
.bgc_PdSA{background-color: #E4A57B;}
.bgc_SHMS{background-color: #E6B683;}
.bgc_SocC{background-color: #C68D64;}
.bgc_TAmL{background-color: #BF986D;}
.bgc_BBCN{background-color: #ECE0EB;} /* Websites */
.bgc_BlmB{background-color: #F4DAE2;}
.bgc_CNwN{background-color: #EDD3E0;}
.bgc_FoxN{background-color: #EDCEE5;}
.bgc_HufP{background-color: #DFCBD2;}
.bgc_Plco{background-color: #DEC3E1;}
.bgc_Grdn{background-color: #FFE814;} /* Newspapers */
.bgc_LonT{background-color: #FFD412;}
.bgc_NYTm{background-color: #FFC412;}
.bgc_SFCh{background-color: #FFB114;}
.bgc_WaPo{background-color: #FFA012;}
.bgc_WSJn{background-color: #F28705;}
.bgc_Atln{background-color: #B1FF91;} /* Magazines */
.bgc_Econ{background-color: #96ED89;}
.bgc_Forb{background-color: #BDF271;}
.bgc_ForP{background-color: #B5E655;}
.bgc_Natn{background-color: #A9CF54;}
.bgc_NatG{background-color: #91C46C;}
.bgc_NYkr{background-color: #8BC34A;}
.bgc_Rson{background-color: #96CA2D;}
.bgc_RlSt{background-color: #BEDB39;}
.bgc_Time{background-color: #A8C545;}
.bgc_VanF{background-color: #45BF55;}
.bgc_Wird{background-color: #689F38;}
div#popup_SalonSelector {
visibility: hidden;
z-index: 5;
position: absolute; /* fixed; */
top: 0;
left: 0;
width: 350px;
max-height: 350px;
padding: 10px;
border: 2px solid black;
border-radius: 8px;
background-color: var(--color_popup_bgndSalonSelector); /*#FFD6DD; #FFD1D9; //Pink; */
box-shadow: 0px 7px 6px black;
}
div.MT_divSalsToJoin {
max-height: 150px;
overflow-y: auto;
}
/* ====================== 35_YourSalons.php ========================*/
/* ====================== 37_Search.php ========================*/
div.Srch_BrowseBox {
/* display: inline-block; */
width: fit-content;
font-size: 12px;
padding: 10px;
margin: 15px;
border: 1px solid black;
}
table.Srch_ChkBoxTable {
border: 1px solid black;
border-collapse: collapse;
}
table.Srch_ChkBoxTable tr td { padding: 2px 5px; }
.Srch_fieldSet {
margin: 5px auto;
width: 560px;
}
/* ====================== 46_ScheduleSalon.php ========================*/
div.SS_OuterDiv {
background-color: var(--color_bgndDlgUtils);
padding: 5px;
margin: 5px;
width: 500px;
}
.SS_divLangCodes {
min-width: 90px;
max-width: 90px;
max-height: 50px;
overflow: hidden auto;
border: 1px solid black;
}
.clrSchedSalon {
background-color: var(--color_bgc_OtherSched);
}
fieldset.SS_fieldSet { border-color: black; }
div#SS_inpersLoc { visibility: hidden; }
div#SS_videoType { visibility: visible; }
.SS_divDlgInviteSSUsers {
width: 140px;
min-height: 120px;
max-height: 120px;
border: 1px solid black;
background-color: white;
overflow: hidden auto;
}
/* ======== Create Topic ============= */
div#CT_OuterBox {
position: fixed;
top: 30px;
margin: 0 auto;
border: 2px solid black;
background-color: var(--color_bgndCT_OuterBox);
width: 485px;
height: 575px;
}
.SS_bgc_topicProvided {
/* background-color: linear-gradient(30deg,, var(--color_menuBar_Dark), var(--color_menuBar_Light), var(--color_menuBar_Dark) ); */
background-image: linear-gradient(30deg, var(--color_menuBar_Dark), var(--color_menuBar_Light), var(--color_menuBar_Dark) );
}
div#popup_DlgCreateTpc {
visibility: hidden;
z-index: 7;
position: fixed; /* Center in the Viewport */
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%);
width: 485px;
min-height: 540px;
padding: 5px;
border: 1px solid black;
border-radius: 4px;
background-color: var(--color_popup_bgndDlgCreateTopic); /* [ popup_Dlg ] */
box-shadow: 0px 7px 6px black;
position: fixed;
}
div#popup_DlgCreateMTopic {
visibility: hidden;
z-index: 7;
position: fixed; /* Center in the Viewport */
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%);
width: 485px;
min-height: 540px;
padding: 5px;
border: 1px solid black;
border-radius: 4px;
background-color: var(--color_popup_bgndDlgCreateMTopic); /* [ popup_Dlg ] */
box-shadow: 0px 7px 6px black;
position: fixed;
}
div#US_SrchResults {
max-height: 250px;
}
.SS_DlgSrchTopic_Results{
width: 410px;
min-height: 280px;
max-height: 280px;
overflow: hidden auto;
border: 1px solid black;
}
.SS_divInvitedSSUsersList{
width: 120px;
min-height: 50px;
max-height: 50px;
overflow: hidden auto;
border: 1px solid black;
}
#SS_InvitedSSUsers_tbl{
width: 120px;
height: 40px;
}
div#SS_DlgInviteSSUsers {
visibility: hidden;
position: fixed;
z-index: 7;
top: 50px;
left: 50%;
margin-left: -206px;
padding: 15px;
/* margin: -240px 0 0 -206px; */
border: 2px solid black;
background-color: var(--color_bgndSS_DlgInviteSSUsers);
width: 360px;
height: 350px;
}
#SS_btnRmvInvSSUser { visibility: hidden; }
#SS_btnDlgInvG_RmvInvSSUser { visibility: hidden; }
input[type='number']{
width: 35px;
}
div#DlgSelTpc_OuterBox {
visibility: hidden;
position: fixed;
z-index: 7;
top: 50px;
left: 50%;
margin-left: -206px;
/* margin: -240px 0 0 -206px; */
border: 2px solid black;
background-color: var(--color_bgndDlgSelTopic_OuterBox);
width: 485px;
max-height: 500px;
}
div#SS_DlgSrchTpc_OuterBox {
visibility: hidden;
position: fixed;
z-index: 7;
top: 50px;
left: 50%;
margin-left: -250px;
/* margin: -240px 0 0 -206px; */
border: 2px solid black;
background-color: var(--color_bgndSS_DlgSrchTopic_OuterBox);
width: 450px;
max-height: 600px;
}
div#DlgSrchTpc_Content { max-height: 550px; }
div#SS_DlgSrchTpc_Content { max-height: 550px; }
.SS_DlgSrchBtnBar { margin: 10px 10px 5px 10px; }
div.DlgSrchTpc_Results {
max-height: 400px;
width: 400px;
overflow: auto;
margin-bottom: 10px;
}
tr.bgc_Tpc td { background-color: var(--bgcolor_Tpc); }
div#SS_DlgEditSalon_All {
visibility: visible;
position: fixed;
z-index: 7;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%);
padding: 10px 20px;
/* margin: -240px 0 0 -206px; */
border: 2px solid black;
background-color: var(--color_bgndSS_DlgEditSalon_All);
width: 300px;
height: 140px;
}
div#SS_DlgEditSalon_Restricted {
visibility: visible;
position: fixed;
z-index: 7;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%);
padding: 10px 20px;
/* margin: -240px 0 0 -206px; */
border: 2px solid black;
background-color: var(--color_bgndSS_DlgEditSalon_Restricted);
width: 315px;
height: 350px;
}
div#SS_DlgRepeatSalon {
visibility: visible;
position: fixed;
z-index: 7;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%);
padding: 10px 20px;
/* margin: -240px 0 0 -206px; */
border: 2px solid black;
background-color: var(--color_bgndSS_DlgRepeatSalon);
width: 315px;
height: 180px;
}
/* ====================== 41ip_SalonDetails.php ========================*/
/* ====================== 43ip_CategoryDetails.php ========================*/
/* ====================== 45ip_SSUserDetails.php ========================*/
/* ================= SSUser Info Panel =========================== */
div.SSUD_Panel {
width: 370px;
max-height: 625px;
/* background-color: PowderBlue; DarkCyan; Olive;*/
text-align: center;
padding: 5px;
line-height: 100%;
}
div.SSUD_divLinksList{
width: 240px;
height: 30px;
overflow-x: hidden;
overflow-y: auto;
border: 1px solid black;
background-color: white;
}
#SSUD_LinksTable{
width: 240px;
}
div.SSUD_divFavCSBTs{
width: 340px;
height: 45px;
overflow-x: hidden;
overflow-y: auto;
border: 1px solid black;
}
#SSUD_FavCSBTs{
width: 340px;
}
div.SSUD_divSalonsHist{
width: 234px;
height: 45px;
overflow-x: hidden;
overflow-y: auto;
border: 1px solid black;
}
div.GI_Bio {
width: 350px;
height: 50px;
border: 1px solid black;
background-color: var(--color_bgndGI_Bio);
padding: 2px;
overflow: auto;
}
img.GI_Img {
width: auto;
height: 135px;
border: 1px solid black;
box-shadow: 0px 7px 6px black;
margin: 5px;
}
img.SSUserImage {
max-width: 120px;
max-height: 160px;
margin-top: 10px;
object-fit: cover;
box-shadow: 0px 7px 6px black;
}
.SSUD_Panel,p {
margin-top: 6px;
margin-bottom: 6px;
margin-left: 0;
margin-right: 0;
}
div.GI_SalonInfo {
display: flex;
justify-content: space-around;
width: 100%
}
/* ====================== 48ip_CalendarDayDetails.php ========================*/
div#CDD_DaysSalonsPopUp {
visibility: hidden;
z-index: 12;
position: fixed; /* Center in the Viewport */
top: 40%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%);
width: 500px;
max-height: 625px;
padding: 5px;
text-align: center;
background-color: var(--color_bgndCDD_DaysSalonsPopUp); /* CadetBlue ; */
border: 1px solid black;
border-radius: 4px;
box-shadow: 0px 7px 6px black;
}
div#CDD_OuterDiv { margin: 0 auto; }
div.Cal_AllFavSTypePrefs {
display: inline;
padding: 4px 3px 0 3px;
margin: 0 auto;
background-color: var(--color_bgndCal_AllFavSTypePrefs);
font-size: 0.9em;
}
div.AllFavSTypePrefs {
display: inline;
margin: 0 auto;
}
div#CDD_ListEnclosure {
max-height: 350px;
overflow: auto;
}
.CT_mainTable {
width: 450px;
}
.CT_mainTable tr td {
padding: 10px;
}
.CDD_MainTableFieldSet {
display: inline-block;
padding: 0 10px;
}
/* ====================== 46aip_TopicSearch.php ========================*/
/* ====================== Popup Dialogs ========================*/
span.PopUpTitle {
font-size: 1.2em;
font-weight: bold;
margin: 3px;
}
div#popup_HTUTP {
visibility: hidden;
z-index: 50;
position: absolute; /* fixed; */
top: 0;
left: 0;
width: 200px;
max-height: 350px;
background-color: transparent;
}
div#popup_HTUTPContent {
padding: 10px;
margin-top: -6px;
border: 2px solid black;
border-radius: 8px;
background-color: var(--color_popup_bgndHTUTPContent); /*#FFD6DD; #FFD1D9; //Pink; */
box-shadow: 0px 7px 6px black;
}
div#popup_HTUTPTopPointer {
z-index: 51;
}
div#popup_HTUTPBottomPointer {
z-index: 51;
margin-top: -2px;
}
/* ====================== 44_TopicDetails.php ========================*/
.TD_BrnImg {
max-width: 100px;
max-height: 80px;
border: 1px solid black;
border-radius: 4px;
box-shadow: 0px 7px 6px black;
}
.TD_Descrip {
max-height: 120px;
overflow-y: auto;
width: 265px;
text-align: left;
}
.TD_SalsList {
max-height: 65px;
overflow-y: auto;
width: 210px;
}
/* ====================== 44ip_TopicDetails.php ========================*/
div#popup_DisplayFavs {
visibility: hidden;
z-index: 100;
position: fixed; /* Center in the Viewport */
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%);
width: 640px;
max-height: 500px;
padding: 5px;
background-color: var(--color_popup_bgndDisplayFavs);
border: 1px solid black;
border-radius: 8px;
box-shadow: 0px 7px 6px black;
}
div#popup_ReqNewTierItem {
visibility: hidden;
z-index: 100;
position: fixed; /* Center in the Viewport */
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%);
width: 400px;
max-height: 400px;
padding: 5px;
background-color: var(--color_popup_bgndDisplayFavs);
border: 1px solid black;
border-radius: 8px;
box-shadow: 0px 7px 6px black;
}
div#popup_DisplayFavsContent {
max-height: 425px;
overflow-y: auto;
}
div#popup_TpcDetails {
visibility: hidden;
z-index: 15;
position: fixed; /* Center in the Viewport */
top: 45%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -40%);
width: 420px; /*350px;*/
max-height: 625px;
padding: 5px 5px 10px 5px;
background-color: var(--color_popup_bgndTopicDetails); /* bgc_Tpc */
border: 1px solid black;
border-radius: 4px;
box-shadow: 0px 7px 6px black;
}
div#popup_SalonDetails {
visibility: hidden;
z-index: 13;
position: fixed; /* Center in the Viewport */
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%);
width: 400px;
max-height: 625px;
padding: 5px;
background-color: var(--color_popup_bgndSalonDetails); /* [ popup_Details ] */
border: 1px solid black;
border-radius: 4px;
box-shadow: 0px 7px 6px black;
}
div#popup_WelcomeToSS {
visibility: hidden;
z-index: 60;
position: fixed; /* Center in the Viewport */
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%);
width: 350px;
max-height: 625px;
padding: 5px;
background-color: var(--color_popup_bgndWelcomeToSS);
border: 2px solid black;
border-radius: 4px;
box-shadow: 0px 7px 6px black;
}
div#popup_MTSchedOrJoinSalon {
visibility: hidden;
z-index: 7;
position: fixed; /* Center in the Viewport */
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%);
width: 380px;
max-height: 625px;
padding: 5px;
background-color: var(--color_popup_bgndMTSchedOrJoinSalon);
border: 1px solid black;
border-radius: 4px;
box-shadow: 0px 7px 6px black;
}
.SD_cmntsList {
min-width: 300px;
max-width: 300px;
max-height: 65px;
overflow-y: auto;
margin: 2px auto;
}
div#SD_divHostComments {
max-height: 100px;
overflow: auto;
}
#SD_TpcDiscussed {
cursor: pointer;
}
.SD_divGuestList{
width: 130px;
max-height: 80px;
overflow-y: auto;
overflow-x: hidden;
}
#SalonGuestsSelList {
width: 120px;
}
div#popup_SSUserDetails {
visibility: hidden;
z-index: 15;
position: fixed; /* Center in the Viewport */
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%);
width: 380px;
max-height: 625px;
padding: 5px;
background-color: var(--color_popup_bgndSSUserDetails); /*DarkKhaki; /* [ popup_Details ] */
border: 1px solid black;
border-radius: 4px;
box-shadow: 0px 7px 6px black;
}
#popup_NeedToBeRegistered {
visibility: hidden;
z-index: 80;
position: fixed; /* Center in the Viewport */
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%);
width: 350px;
height: 200px;
padding: 10px;
background-color: var(--color_popup_bgndNeedToBeRegistered); /* [ Advice / Action Needed ] */
border:1px solid black; /* #ccc */
border-radius: 4px;
box-shadow: 0px 7px 6px black;
}
#popup_DlgLogin {
visibility: hidden;
z-index: 5;
padding: 5px;
position: fixed; /* Center in the Viewport */
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%);
width: 220px;
height: 120px;
padding: 10px;
text-align: center;
background-color: var(--color_popup_bgndDlgLogin); /* [ Do This ] */
border: 1px solid black;
border-radius: 4px;
box-shadow: 0px 7px 6px black;
}
#popup_DlgLoginProblem {
visibility: visible;
z-index: 7;
padding: 5px;
position: fixed; /* Center in the Viewport */
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%);
width: 320px;
height: 170px;
padding: 10px;
text-align: center;
background-color: var(--color_popup_bgndDlgLoginProblem); /* [ Do This ] */
border: 1px solid black;
border-radius: 4px;
box-shadow: 0px 7px 6px black;
}
#popup_YouveJoinedSalon {
visibility: hidden;
z-index: 30;
position: fixed; /* Center in the Viewport */
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%);
width: 400px;
height: 280px;
padding: 5px;
border:1px solid #ccc;
border-radius: 4px;
background-color: var(--color_popup_bgndYouveJoinedSalon);
box-shadow: 0px 7px 6px black;
}
/* ================= FAQ =========================== */
.h2_faqs { background:#09F; color: white; padding: 3px; border-radius: 3px; text-align: center; }
.h3_faqs { background:#9C9; color: #203b49; padding: 3px; border-radius: 3px; margin: 20px 0 5px 0;}
.h4_faqs { color: green; padding: 3px; border-radius: 3px; margin: 15px 0 5px 10px; }
.h5_faqs { color: blue; padding: 3px; border-radius: 3px; margin: 5px 0 5px 10px; } /*color: #FBAD17; */
div.faq_ans { margin-left: 25px; }
div#FAQ_InnerContent {
margin: 10px auto;
font-size: 1.2em;
width: 700px;
}
/* ======== How It Works ============= */
div#HIW_InnerContent {
margin: 10px;
font-size: 1.2em;
width: 700px;
margin: 0 auto;
border: 1px solid black;
}
div#HIW_IntroBox {
display: inline-block;
width: 80%;
padding: 15px;
border: 1px solid black;
}
p.HIW_Summary {
margin: 0 70px;
}
.HIW_List li{
margin: 5px 0;
text-indent: 0;
}
div#HIW_ContentsBox {
display: block;
width: 500px;
margin: 10px auto;
border: 1px solid black;
background-color: var(--color_bgnd_Help);
}
div.HIW_ContDiv {
display: block;
margin: 5px;
margin-left: 30px;
width: 600px;
border: 1px solid black;
padding: 5px;
background-image: linear-gradient(30deg, var(--color_HIW_ContDiv_Dark), var(--color_HIW_ContDiv_Light));
}
div.HIW_ContDiv {
display: none;
margin: 5px;
margin-left: 30px;
width: 600px;
border: 1px solid black;
padding: 5px;
background-image: linear-gradient(30deg, var(--color_HIW_ContDiv_Dark), var(--color_HIW_ContDiv_Light));
}
div.HIW_ContDiv_Vis {
display: block;
margin: 5px;
margin-left: 30px;
width: 600px;
border: 1px solid black;
padding: 5px;
background-image: linear-gradient(30deg, var(--color_HIW_ContDiv_Dark), var(--color_HIW_ContDiv_Light));
}
.HIW_ContDiv p {
text-indent: 30px;
margin: 0 10px;
/* border: 1px solid red; */
}
.HIW_ContDiv_Vis p {
text-indent: 30px;
margin: 0 10px;
/* border: 1px solid red; */
}
.HIW_MainOLList li {
/* border: 1px solid red; */
margin-bottom: 10px;
padding-bottom: 10px;
}
.HIW_BriefSummary {
width: 80%;
border: 1px solid black;
margin: 10px auto;
padding: 10px;
}
.HIW_spanShwHideDiv {
display: inline;
color: var(--color_HIW_shwHideDiv);
}
.HIW_ContSecTitle {
display: inline;
font-weight: bold;
font-size: 1em;
margin-left: 20px;
}
.HIW_spanShwHideDef {
display: inline;
color: var(--color_HIW_shwHideDef);
}
.HIW_DefTitle {
display: inline;
font-weight: bold;
font-size: 0.9em;
margin-left: 40px;
}
.HIW_DefText {
display: none;
margin: 5px;
margin-left: 50px;
width: 80%;
border: 1px solid var(--color_HIW_DefTextBdr);
background-color: var(--color_HIW_DefTextBgnd); /* NavajoWhite; */
text-indent: 20px;
padding: 3px;
}
.HIW_spanHideDiv {
display: inline;
color: var(--color_HIW_spanHideDivTxt);
margin: 0 auto;
}
/*========= Salon Follow-Up =============================*/
div.SFU_ContDiv {
display: none;
margin: 5px;
margin-left: 30px;
/*
width: 600px;
border: 1px solid black;
padding: 5px;
background-color: #FFE8EC;
*/
}
.SFU_ContDiv p {
text-indent: 30px;
margin: 0 10px;
/* border: 1px solid red; */
}
.SFU_spanShwHideDiv {
display: inline;
color: var(--color_SFU_spanShwHideDivTxt);
}
.SFU_ContSecTitle {
display: inline;
font-weight: bold;
font-size: 1em;
margin-left: 20px;
}
/* ======== Salon Guides ======================*/
div.SalG_ServiceBox{
width: 600px;
border: 1px solid black;
}
.MainTitle { color:orange; }
span.MainTitle {
font-size: 18px;
font-weight: bold;
padding-left: 50px;
padding-right: 50px;
}
/* --------------- Admin page ---------------*/
body.Adm_TanBody { background-color: tan; width: 700px; }
.Adm_mainTable tr td {
padding: 5px;
border: 1px solid black;
background-color: ivory;
}
.Adm_infoTable th, tr td {
border: 1px solid black;
background-color: ivory;
}
.Adm_infoTable th {
border: 1px solid black;
background-color: coral;
}
div.Adm_DataCell {
display: inline-block;
max-height: 100px;
overflow: auto;
}
div.Adm_DataCell_120px {
display: inline-block;
width: 120px;
max-height: 100px;
overflow: auto;
}
div.Adm_DataCell_300px {
display: inline-block;
width: 300px;
max-height: 50px;
overflow: auto;
}
/* ============================ Sample Media Topics ================*/
.SMT_PathImg {
max-width: 67;
height: 47;
border: 1px solid green;
}
.SMT_JDetpathCell img{
width: 100%;
min-height: 45px;
max-height: 45px;
}
.SMT_JDetpathCell {
width: 70px;
height: 100px;
border: 1px solid black;
border-radius: 8px;
overflow: hidden;
text-align: center;
}
/* ============================ General Purpose ================================= */
/* ---------- Tables ----------------------------*/
th {
text-align: center;
}
table.centNotFirst tr td:not(:first-child) {
text-align: center;
}
/*
table.centNotFirst tr td {
not(':first-child').css({"text-align":"left"});
}
*/
/* table.borderNone tr, td, th { */
/*
.tbl_NoInnerBrdr_X { border: 1px solid black; }
.tbl_NoInnerBrdr, tr, td {
border: none !important;
}
.tbl_ZeroBorders tr, td, th{
padding: 2px;
border: 0;
}
*/
table.collapseTable {
border-collapse: collapse;
border: none;
}
td.noBrdrCell {
border: none;
}
.btnBar_2btn { margin: 30px; }
img.preserveAspectRatio {max-width: 100%; height: auto;}
legend { font-weight: bold; cursor: default; }
.overflowAuto { overflow: auto; }
div.raise15Px { margin-top: -15px; }
option { cursor: pointer; }
input[type='button'] { cursor: pointer; }
input[type='submit'] { cursor: pointer; }
div.Text300pxW { width: 300px; }
div.Text350pxW { width: 350px; }
div.Text400pxW { width: 400px; }
div.vSpc10px { height: 10px; }
div.vSpc15px { height: 15px; }
div.vSpc20px { height: 20px; }
div.vSpc25px { height: 25px; }
div.vSpc30px { height: 30px; }
.ht110 {height: 110px;} .ht100 {height: 100px;} .ht90 {height: 90px;} .ht80 {height: 80px;}
.ht70 {height: 70px;} .ht60 {height: 60px;} .ht40 {height: 40px;}
.inp-txt400px{ width:400px; height:20px; border-radius:3px; }
.inp-txt320px{ width:320px; height:20px; border-radius:3px; /*border:1px solid #ccc;*/ }
.inp-txt285px{ width:285px; height:20px; border-radius:3px; /*border:1px solid #ccc;*/ }
.inp-txt260px{ width:260px; height:20px; border-radius:3px; /*border:1px solid #ccc;*/ }
.inp-txt220px{ width:220px; height:20px; border-radius:3px; /*border:1px solid #ccc;*/ }
.inp-txt210px{ width:210px; height:20px; border-radius:3px; /*border:1px solid #ccc;*/ }
.inp-txt200px{ width:200px; height:20px; border-radius:3px; /*border:1px solid #ccc;*/ }
.inp-txt150px{ width:150px; height:20px; border-radius:3px; /*border:1px solid #ccc;*/ }
.inp-txt130px{ width:130px; height:20px; border-radius:3px; /*border:1px solid #ccc;*/ }
.inp-txt100px{ width:100px; height:20px; border-radius:3px; /*border:1px solid #ccc;*/ }
.inp-txt80px{ width:80px; height:20px; border-radius:3px; /*border:1px solid #ccc;*/ }
.inp-txt50px{ width:50px; height:20px; border-radius:3px; /*border:1px solid #ccc;*/ }
.inp-txt40px{ width:40px; height:20px; border-radius:3px; /*border:1px solid #ccc;*/ }
.inp-txt30px{ width:30px; height:20px; border-radius:3px; /*border:1px solid #ccc;*/ }
.inp-txt25px{ width:25px; height:20px; border-radius:3px; /*border:1px solid #ccc;*/ }
.inp-txt{ width:155px; height:20px; border-radius:3px; /*border:1px solid #ccc;*/ }
#wrapper #content_custom { position:relative; clear:both; border:1px solid #ccc; border-radius:5px; width:600px; height:770px; padding:10px; }
.head-name { color:#F90; font-size:27px; }
/* put these at the bottom so they override any other settings, final property addition to a class chain */
/* ------ boxes ---------------*/
.box_width600pxBlkBrdr {
width: 600px;
border: 1px solid black;
padding: 10px;
}
.box480wBlkBorder
{ width: 480px; border: 1px solid black; }
.radioBtnsBox { display: inline-flex; border: 1px solid black; padding: 1px 2px; }
/* -- Debugging ----------------- */
.DB_r{border:2px solid red;} .DB_g{border:2px solid green;} .DB_b{border:2px solid blue;}
.DB_v{border:2px solid violet;} .DB_y{border:2px solid yellow;} .DB_o{border:2px solid orange;}
.DB_m{border:2px solid magenta;} .DB_n{border:2px solid brown;} .DB_q{border:2px solid cyan;}
/*-- Fonts ---------------------- */
.F1pt { font-size: 1pt; } .F4pt { font-size: 4pt; } .F5pt { font-size: 5pt; }
.F6pt { font-size: 6pt; } .F7pt { font-size: 7pt; } .F8pt { font-size: 8pt; }
.F9pt { font-size: 9pt; } .F10pt { font-size: 10pt; } .F12pt { font-size: 12pt; }
.F14pt { font-size: 14pt; }
/*-- Fonts ---------------------- */
.F1em { font-size: 1em; } .F2em { font-size: 2em; } .F3em { font-size: 3em; }
.F4em { font-size: 4em; } .F5em { font-size: 5em; }
.F6em { font-size: 6em; } .F7em { font-size: 7em; } .F8em { font-size: 8em; }
.F9em { font-size: 9em; } .F10em { font-size: 10em; } .F12em { font-size: 12em; }
.F14em { font-size: 14em; }
.F01em { font-size: 0.1em; } .F02em { font-size: 0.2em; }
.F03em { font-size: 0.3em; } .F04em { font-size: 0.4em; } .F05em { font-size: 0.5em; }
.F06em { font-size: 0.6em; } .F065em {font-size: 0.65em;} .F07em { font-size: 0.7em; }
.F075em {font-size: 0.75em } .F08em { font-size: 0.8em; } .F085em {font-size: 0.85em }
.F09em { font-size: 0.9em; } .F095em {font-size: 0.95em } .F1p1em { font-size: 1.1em; }
.F1p2em { font-size: 1.2em; }.F1p3em { font-size: 1.3em; } .F1p4em { font-size: 1.4em; }
.F1p5em { font-size: 1.5em; } .F1p6em { font-size: 1.6em; } .F1p7em { font-size: 1.7em; }
.F1p8em { font-size: 1.8em; } .F1p9em { font-size: 1.9em; } .F2p3em { font-size: 2.3em; }
.F2p5em { font-size: 2.5em; }.F3p5em { font-size: 3.5em; }
.LH1p5em { line-height: 1.5em; } .LH1p4em { line-height: 1.4em; } .LH1p3em { line-height: 1.3em; }
.LH1p2em { line-height: 1.2em; } .LH1p1em { line-height: 1.1em; } .LH1em { line-height: 1em; }
.LH09em { line-height: 0.9em; } .LH08em { line-height: 0.8em; } .LH07em { line-height: 0.7em; }
.LH06em { line-height: 0.6em; } .LH05em { line-height: 0.5em; } .LH04em { line-height: 0.4em; }
.LH03em { line-height: 0.3em; }
.bold { font-weight: bold; }
.verybold { font-weight: 800; }
.maxbold { font-weight: 900; }
.italic { font-style: italic; }
.noDecor { text-decoration: none; } .underline { text-decoration: underline; }
.uline { text-decoration: underline; }
.wrap_anywhere { overflow-wrap: anywhere; }
.wrap_normal { overflow-wrap: normal; }
.wrap_none { white-space: nowrap; }
.scroll_horiz { overflow-x: auto; }
.scroll_vert { overflow-y: auto; }
.scroll_xyAuto { overflow: auto; }
.height_1em { height: 1em; }
.height_2em { height: 2em; }
.height_2p5em { height: 2.5em; }
.height_max_3em { max-height: 3em; }
.width_245px { width: 245px; }
.width_400px { width: 400px; }
.width_450px { width: 450px; }
.ht20pxMargAuto { height: 20px; margin: auto; }
.Scrl_300pxh {
max-height: 300px;
overflow-y: auto;
}
ul.NoDotList {
list-style-type: none;
text-align: left;
}
ul.NoDotsOnListEls {
list-style-type: none;
}
/*-- Color ---------------------- */
.brdr_Blk1px { border: 1px solid black; } .brdr_Blu1px { border: 1px solid blue; }
.brdr_Red1px { border: 1px solid red; } .brdr_Red2px { border: 2px solid red; }
.brdr_Blu2px { border: 2px solid blue; } .brdr_Grn2px { border: 2px solid green; }
/*-- Color ---------------------- */
.black { color: black; } .red { color: red; } .blue { color: blue; }
.green { color: green; } .lime { color: lime; } .brown { color: brown; }
.magenta { color: magenta; } .maroon { color: #800000; } .violet { color: violet; }
.gold { color: gold; } .gray { color: gray; } .lightGray { color: lightGray; }
.white { color: white; }
.beigeBG { background-color: Beige; }
.whiteBG { background-color: white; } .blackBG { background-color: black; }
.blueBG { background-color: blue; } .redBG { background-color: red; }
.greenBG { background-color: green; } .yellowBG { background-color: yellow; }
/*-- Width ---------------------- */
.w35px { width: 35px; }
.w40px { width: 40px; }
.w50px { min-width: 50px; max-width: 50px; }
.w70px { min-width: 70px; max-width: 70px; }
.w80px { min-width: 80px; }
.w90px { min-width: 90px; }
.w100px { width: 100px; }
.w120px { min-width: 120px; max-width: 120px; }
.w140px { min-width: 140px; max-width: 140px; }
.w180px { min-width: 180px; max-width: 180px; }
.w235px { min-width: 235px; max-width: 235px; }
.w300px { width: 300px; }
.w345px { min-width: 345px; max-width: 345px; }
.w400px { width: 400px; min-width: 400px; max-width: 400px; }
.w460px { width: 460px; }
.w500px { width: 500px; }
.w630px { width: 630px; }
.w415px { width: 415px; min-width: 415px; max-width: 415px; }
.w1150px { width: 1150px; min-width: 1150px; max-width: 1150px; }
/*-- height ------------------------- */
.h50px { height: 50px; }
.h20px { height: 20px; }
/*-- Alignment ---------------------- */
.txt_rt { text-align: right; }
.txt_lf { text-align: left; }
.txt_cent { text-align: center; }
.margcentered { margin: auto; }
.centeredBlock { display: block; margin-left: auto; margin-right: auto; }
.leftAlignUl { display: inline-block; text-align: left;}
.vertCenter { vertical-align: middle; }
.marg5px { margin: 5px; }
.marg10px { margin: 10px; }
.marg15px { margin: 15px; }
.marg25px { margin: 25px; }
.margBot5px { margin-bottom: 5px; }
.float-left { float:left; }
.marg-tb-5px { margin:5px 0px; }
.marg-tb-10px { margin:10px 0px; }
.marg-tb-30px { margin:30px 0px; }
.pad-l-10px { padding-left: 10px; }
.pad-r-10px { padding-right: 10px; }
.pad_lr_5px { padding-left: 5px; padding-right: 5px; }
.pad_lr_10px { padding-left: 10px; padding-right: 10px; }
.pad_lr_20px { padding-left: 20px; padding-right: 20px; }
.marg_lr_20px { margin-left: 20px; margin-right: 20px; }
.marg_r_5px { margin-right: 5px; }
.marg_r_10px { margin-right: 10px; }
.marg_5_10_px { margin: 5px 10px;}
.marg_5_20_px { margin: 5px 20px;}
.marg_5_50_px { margin: 5px 50px;}
.pad_10_30_px { padding: 10px 30px;}
.pad_5_20_px { padding: 5px 20px;}
.marg_10_30_px { margin: 10px 30px;}
.pad_5px { padding: 5px;}
.pad_r_3px {padding-right: 3px; }
.pad_r_10px {padding-right: 10px; }
.pad_l_10px {padding-left: 10px; }
.pad_t2r20b10l20px { padding: 2px 20px 10px 20px;}
.pad10px { padding: 10px; }
.pad5px { padding: 5px; }
.padTop5px { padding-top: 5px; }
.marg_b3px { margin-bottom: 3px; }
.marg_t5px { margin-top: 5px; }
.marg_t8px { margin-top: 8px; }
.spc100pxw { width: 100px; }
.spc150pxw { width: 150px; }
.spc200pxw { width: 200px; }
.ht20px { height: 20px; }
.ht40px { height: 40px; }
.w80px { width: 70px; }
.vAlBaseL { vertical-align: baseline; }
.posDn5px { position: relative; top: 5px; }
/*-- Display --------------------*/
.centeredDiv {
display: inline-block;
margin: 0 auto;
}
.hiddenD { display: none; } .hiddenV{ visibility: hidden; }
.flex { display: flex; } .inlineFlex { display: inline-flex; }
.inline { display: inline; }
.flexSB { display: flex; justify-content: space-between;}
.flexSA { display: flex; justify-content: space-around;}
.flexV { display: flex; flex-direction: column; }
.flexCent { display: flex; justify-content: center;}
.flexVcentSA { display: flex; flex-direction: column; align-items: center; justify-content: space-around; }
.inlblk { display: inline-block; }
.flexAlCent{ display: flex; align-items: center; }
.flexSBAlCent { display: flex; justify-content: space-between; align-items: center;}
.flexSAAlCent { display: flex; justify-content: space-around; align-items: center;}
.NoBreak { white-space:nowrap; }
.flexwrap { flex-wrap: wrap; }
/*-- Cursors -----------------------*/
.linkCur { cursor: pointer; } .moveCur { cursor: move; } .clickCur { cursor: pointer; }
.curNormal { cursor: default; }
/*============ Media Query tests ================*/