/* ------------------------------------------------------------------------- * clarity_master.css * Master CSS file for all ClarityClientCodes. * * The overall responsive design is based on Simple Responsive Template at www.prowebdesign.ro. Paid for license to use commericially. * * clarity_master.css must be imported in the client's master css file. * Any changes to values specified in here must be overridden in the client's master css file. * CSS style names that are for client-only functionality must be begin with the client-code + "_", and be put into the client's master css file. */ /* ------------------------------------------------------------------------- * _FlexBox.scss * Contains styling for flexbox classes * 011222 DustinP: Created *------------------------------------------------------------------------- */ /* * _FlexBox_Mixins.css * Common Mixins for FlexBox * * 020822 DustinP: Created */ /* * Flex Misc * Created By: DustinP * Created On: 01-10-22 * Purpose: * Used for defining other settings specific to flex classes * X is variable passed in from Desktop/Mobile Class */ /* * Flex Content Alignment * Created By: DustinP * Created On: 05-17-21 * Purpose: * Used for defining flex alignments. * X is variable passed in from Desktop/Mobile Class */ /* * Flex Direction * Created By: DustinP * Created On: 05-17-21 * Purpose: * Used for defining flex directions. * X is variable passed in from Desktop/Mobile Class */ /* * Flex Gap * Created By: DustinP * Created On: 05-17-21 * Purpose: * Used for defining flex gaps. Dependent on flex direction (flipped) * X is variable passed in from Desktop/Mobile Class */ /* * Flex Size * Created By: DustinP * Created On: 05-17-21 * Purpose: * Used for defining flex sizes. Flex Sizes are used for sizing compared to the rest of the objects. * X is variable passed in from Desktop/Mobile Class */ .flex_master { /* * StandardDividerBar * Created By: TroyA * Created On: 01-17-22 * Purpose: * Used to enable standard divider bar in the flex box layout. */ /* -------------------------------------------------------------------------------------------------------------------------------------------------- ----------------------------------------------------------------------------------------------------------------------------------------------------- MEDIUM DESKTOP DEVICES / MEDIUM and LARGE TABLETS */ /* -------------------------------------------------------------------------------------------------------------------------------------------------- ----------------------------------------------------------------------------------------------------------------------------------------------------- MOBILE DEVICE */ /* -------------------------------------------------------------------------------------------------------------------------------------------------- ----------------------------------------------------------------------------------------------------------------------------------------------------- All DEVICE */ } .flex_master .StandardDividerBar { flex: 0 0 100% !important; } @media all and (min-width: 920px) { .flex_master { /* * Flex Types * Created By: DustinP * Created On: 05-17-21 * Purpose: * Used for defining flex wrapping */ /* * Flex Content Alignment * Created By: DustinP * Created On: 05-17-21 * Purpose: * Used for defining flex alignments. * *Content - aligns sub elements. * *self - aligns current element. * *justify -aligns sub elements and defines what to do with left over space. */ /* * Flex Direction * Created By: DustinP * Created On: 05-17-21 * Purpose: * Used for defining flex directions. * *column - changes orientation. Objects populate down. * *row - default orientation. Object populate across. */ /* * Flex Gap * Created By: DustinP * Created On: 05-17-21 * Purpose: * Used for defining flex gaps. Dependent on flex direction (flipped) * *column - distance between each column. * *row - distance between each row. * * Each value after "flex__gap_" indicates rem value. * Numbers followed by '_' and another number indicates fractions ("1_2" -> 1/2) */ /* * Flex Size * Created By: DustinP * Created On: 05-17-21 * Purpose: * Used for defining flex sizes. Flex Sizes are used for sizing compared to the rest of the objects. * These classes use a mixin with a variable (X) to define the values. * for example: * "@include flex_X(1);" -> All object will be the same size. * "@include flex_X(2);" -> Objects with this will be twice the size of "flex: 1;" * * Each value after "flex_" indicates flex value. * Numbers followed by '_' and another number indicates fractions ("1_2" -> 1/2) */ } .flex_master .flex_desk_wrap_yes { display: flex; flex-wrap: wrap; } .flex_master .flex_desk_wrap_no { display: flex; flex-wrap: nowrap; } .flex_master .flex_desk_ac_fs { align-content: flex-start; } .flex_master .flex_desk_ac_fe { align-content: flex-end; } .flex_master .flex_desk_ac_c { align-content: center; } .flex_master .flex_desk_as_fe { align-self: flex-end; } .flex_master .flex_desk_as_fs { align-self: flex-end; } .flex_master .flex_desk_as_c { align-self: center; } .flex_master .flex_desk_jc_fs { justify-content: flex-start; } .flex_master .flex_desk_jc_fe { justify-content: flex-end; } .flex_master .flex_desk_jc_c { justify-content: center; } .flex_master .flex_desk_jc_sa { justify-content: space-around; } .flex_master .flex_desk_jc_eq { justify-content: space-evenly; } .flex_master .flex_desk_jc_bet { justify-content: space-between; } .flex_master .flex_desk_dir_col { flex-direction: column; } .flex_master .flex_desk_dir_col_rev { flex-direction: column-reverse; } .flex_master .flex_desk_dir_row { flex-direction: row; } .flex_master .flex_desk_dir_row_rev { flex-direction: row-reverse; } .flex_master .flex_desk_col_gap_1_2 { column-gap: 0.5rem; } .flex_master .flex_desk_col_gap_1 { column-gap: 1rem; } .flex_master .flex_desk_col_gap_2 { column-gap: 2rem; } .flex_master .flex_desk_row_gap_1_2 { row-gap: 0.5rem; } .flex_master .flex_desk_row_gap_1 { row-gap: 1rem; } .flex_master .flex_desk_row_gap_2 { row-gap: 2rem; } .flex_master .flex_desk_1_2 { flex: 0.5; margin-left: 1.6666666667%; margin-right: 1.6666666667%; float: left; margin-bottom: 10px; } .flex_master .flex_desk_1 { flex: 1; margin-left: 1.6666666667%; margin-right: 1.6666666667%; float: left; margin-bottom: 10px; } .flex_master .flex_desk_2 { flex: 2; margin-left: 1.6666666667%; margin-right: 1.6666666667%; float: left; margin-bottom: 10px; } .flex_master .flex_desk_3 { flex: 3; margin-left: 1.6666666667%; margin-right: 1.6666666667%; float: left; margin-bottom: 10px; } .flex_master .flex_desk_4 { flex: 4; margin-left: 1.6666666667%; margin-right: 1.6666666667%; float: left; margin-bottom: 10px; } .flex_master .flex_desk_5 { flex: 5; margin-left: 1.6666666667%; margin-right: 1.6666666667%; float: left; margin-bottom: 10px; } .flex_master .flex_desk_6 { flex: 6; margin-left: 1.6666666667%; margin-right: 1.6666666667%; float: left; margin-bottom: 10px; } .flex_master .flex_desk_7 { flex: 7; margin-left: 1.6666666667%; margin-right: 1.6666666667%; float: left; margin-bottom: 10px; } .flex_master .flex_desk_8 { flex: 8; margin-left: 1.6666666667%; margin-right: 1.6666666667%; float: left; margin-bottom: 10px; } .flex_master .flex_desk_9 { flex: 9; margin-left: 1.6666666667%; margin-right: 1.6666666667%; float: left; margin-bottom: 10px; } .flex_master .flex_desk_10 { flex: 10; margin-left: 1.6666666667%; margin-right: 1.6666666667%; float: left; margin-bottom: 10px; } .flex_master .flex_desk_11 { flex: 11; margin-left: 1.6666666667%; margin-right: 1.6666666667%; float: left; margin-bottom: 10px; } .flex_master .flex_desk_12 { flex: 12; margin-left: 1.6666666667%; margin-right: 1.6666666667%; float: left; margin-bottom: 10px; } } @media all and (max-width: 920px) { .flex_master { /* * Flex Types * Created By: DustinP * Created On: 05-17-21 * Purpose: * Used for defining flex wrapping */ /* * Flex Content Alignment * Created By: DustinP * Created On: 05-17-21 * Purpose: * Used for defining flex alignments. * *Content - aligns sub elements. * *self - aligns current element. * *justify -aligns sub elements and defines what to do with left over space. */ /* * Flex Direction * Created By: DustinP * Created On: 05-17-21 * Purpose: * Used for defining flex directions. * *column - changes orientation. Objects populate down. * *row - default orientation. Object populate across. */ /* * Flex Gap * Created By: DustinP * Created On: 05-17-21 * Purpose: * Used for defining flex gaps. Dependent on flex direction (flipped) * *column - distance between each column. * *row - distance between each row. * * Each value after "flex__gap_" indicates rem value. * Numbers followed by '_' and another number indicates fractions ("1_2" -> 1/2) */ /* * Flex Size * Created By: DustinP * Created On: 05-17-21 * Purpose: * Used for defining flex sizes. Flex Sizes are used for sizing compared to the rest of the objects. * These classes use a mixin with a variable (X) to define the values. * for example: * "@include flex_X(1);" -> All object will be the same size. * "@include flex_X(2);" -> Objects with this will be twice the size of "flex: 1;" * * Each value after "flex_" indicates flex value. * Numbers followed by '_' and another number indicates fractions ("1_2" -> 1/2) */ } .flex_master .flex_mobi_wrap_yes { display: flex; flex-wrap: wrap; } .flex_master .flex_mobi_wrap_no { display: flex; flex-wrap: nowrap; } .flex_master .flex_mobi_ac_fs { align-content: flex-start; } .flex_master .flex_mobi_ac_fe { align-content: flex-end; } .flex_master .flex_mobi_ac_c { align-content: center; } .flex_master .flex_mobi_as_fe { align-content: flex-end; } .flex_master .flex_mobi_as_fs { align-content: flex-end; } .flex_master .flex_mobi_as_c { align-content: center; } .flex_master .flex_mobi_jc_fs { justify-content: flex-start; } .flex_master .flex_mobi_jc_fe { justify-content: flex-end; } .flex_master .flex_mobi_jc_c { justify-content: center; } .flex_master .flex_mobi_jc_sa { justify-content: space-around; } .flex_master .flex_mobi_jc_eq { justify-content: space-evenly; } .flex_master .flex_mobi_jc_bet { justify-content: space-between; } .flex_master .flex_mobi_dir_col { flex-direction: column; } .flex_master .flex_mobi_dir_col_rev { flex-direction: column-reverse; } .flex_master .flex_mobi_dir_row { flex-direction: row; } .flex_master .flex_mobi_dir_row_rev { flex-direction: row-reverse; } .flex_master .flex_mobi_col_gap_1_2 { column-gap: 0.5rem; } .flex_master .flex_mobi_col_gap_1 { column-gap: 1rem; } .flex_master .flex_mobi_col_gap_2 { column-gap: 2rem; } .flex_master .flex_mobi_row_gap_1_2 { row-gap: 0.5rem; } .flex_master .flex_mobi_row_gap_1 { row-gap: 1rem; } .flex_master .flex_mobi_row_gap_2 { row-gap: 2rem; } .flex_master .flex_mobi_1_2 { flex: 0.5; margin-left: 1.6666666667%; margin-right: 1.6666666667%; float: left; margin-bottom: 10px; } .flex_master .flex_mobi_1 { flex: 1; margin-left: 1.6666666667%; margin-right: 1.6666666667%; float: left; margin-bottom: 10px; } .flex_master .flex_mobi_2 { flex: 2; margin-left: 1.6666666667%; margin-right: 1.6666666667%; float: left; margin-bottom: 10px; } .flex_master .flex_mobi_3 { flex: 3; margin-left: 1.6666666667%; margin-right: 1.6666666667%; float: left; margin-bottom: 10px; } .flex_master .flex_mobi_4 { flex: 4; margin-left: 1.6666666667%; margin-right: 1.6666666667%; float: left; margin-bottom: 10px; } .flex_master .flex_mobi_5 { flex: 5; margin-left: 1.6666666667%; margin-right: 1.6666666667%; float: left; margin-bottom: 10px; } .flex_master .flex_mobi_6 { flex: 6; margin-left: 1.6666666667%; margin-right: 1.6666666667%; float: left; margin-bottom: 10px; } .flex_master .flex_mobi_7 { flex: 7; margin-left: 1.6666666667%; margin-right: 1.6666666667%; float: left; margin-bottom: 10px; } .flex_master .flex_mobi_8 { flex: 8; margin-left: 1.6666666667%; margin-right: 1.6666666667%; float: left; margin-bottom: 10px; } .flex_master .flex_mobi_9 { flex: 9; margin-left: 1.6666666667%; margin-right: 1.6666666667%; float: left; margin-bottom: 10px; } .flex_master .flex_mobi_10 { flex: 10; margin-left: 1.6666666667%; margin-right: 1.6666666667%; float: left; margin-bottom: 10px; } .flex_master .flex_mobi_11 { flex: 11; margin-left: 1.6666666667%; margin-right: 1.6666666667%; float: left; margin-bottom: 10px; } .flex_master .flex_mobi_12 { flex: 12; margin-left: 1.6666666667%; margin-right: 1.6666666667%; float: left; margin-bottom: 10px; } } @media all { .flex_master { /* * Flex Types * Created By: DustinP * Created On: 05-17-21 * Purpose: * Used for defining flex wrapping */ /* * Flex Content Alignment * Created By: DustinP * Created On: 05-17-21 * Purpose: * Used for defining flex alignments. * *Content - aligns sub elements. * *self - aligns current element. * *justify -aligns sub elements and defines what to do with left over space. */ /* * Flex Direction * Created By: DustinP * Created On: 05-17-21 * Purpose: * Used for defining flex directions. * *column - changes orientation. Objects populate down. * *row - default orientation. Object populate across. */ /* * Flex Gap * Created By: DustinP * Created On: 05-17-21 * Purpose: * Used for defining flex gaps. Dependent on flex direction (flipped) * *column - distance between each column. * *row - distance between each row. * * Each value after "flex__gap_" indicates rem value. * Numbers followed by '_' and another number indicates fractions ("1_2" -> 1/2) */ /* * Flex Size * Created By: DustinP * Created On: 05-17-21 * Purpose: * Used for defining flex sizes. Flex Sizes are used for sizing compared to the rest of the objects. * for example: * "flex: 1;" -> All object will be the same size. * "flex: 2;" -> Objects with this will be twice the size of "flex: 1;" * * Each value after "flex_" indicates flex value. * Numbers followed by '_' and another number indicates fractions ("1_2" -> 1/2) */ } .flex_master .flex_wrap_yes { display: flex; flex-wrap: wrap; } .flex_master .flex_wrap_no { display: flex; flex-wrap: nowrap; } .flex_master .flex_ai_c { align-items: center; } .flex_master .flex_ac_fs { align-content: flex-start; } .flex_master .flex_ac_fe { align-content: flex-end; } .flex_master .flex_ac_c { align-content: center; } .flex_master .flex_as_fe { align-self: flex-end; } .flex_master .flex_as_fs { align-self: flex-start; } .flex_master .flex_as_c { align-self: center; } .flex_master .flex_jc_fs { justify-content: flex-start; } .flex_master .flex_jc_fe { justify-content: flex-end; } .flex_master .flex_jc_c { justify-content: center; } .flex_master .flex_jc_sa { justify-content: space-around; } .flex_master .flex_jc_eq { justify-content: space-evenly; } .flex_master .flex_jc_bet { justify-content: space-between; } .flex_master .flex_dir_col { flex-direction: column; } .flex_master .flex_dir_col_rev { flex-direction: column-reverse; } .flex_master .flex_dir_row { flex-direction: row; } .flex_master .flex_dir_row_rev { flex-direction: row-reverse; } .flex_master .flex_col_gap_1_2 { column-gap: 0.5rem; } .flex_master .flex_col_gap_1 { column-gap: 1rem; } .flex_master .flex_col_gap_2 { column-gap: 2rem; } .flex_master .flex_row_gap_1_2 { row-gap: 0.5rem; } .flex_master .flex_row_gap_1 { row-gap: 1rem; } .flex_master .flex_row_gap_2 { row-gap: 2rem; } .flex_master .flex_1_2 { flex: 0.5; margin-left: 1.6666666667%; margin-right: 1.6666666667%; float: left; margin-bottom: 10px; } .flex_master .flex_1 { flex: 1; margin-left: 1.6666666667%; margin-right: 1.6666666667%; float: left; margin-bottom: 10px; } .flex_master .flex_2 { flex: 2; margin-left: 1.6666666667%; margin-right: 1.6666666667%; float: left; margin-bottom: 10px; } .flex_master .flex_3 { flex: 3; margin-left: 1.6666666667%; margin-right: 1.6666666667%; float: left; margin-bottom: 10px; } .flex_master .flex_4 { flex: 4; margin-left: 1.6666666667%; margin-right: 1.6666666667%; float: left; margin-bottom: 10px; } .flex_master .flex_5 { flex: 5; margin-left: 1.6666666667%; margin-right: 1.6666666667%; float: left; margin-bottom: 10px; } .flex_master .flex_6 { flex: 6; margin-left: 1.6666666667%; margin-right: 1.6666666667%; float: left; margin-bottom: 10px; } .flex_master .flex_7 { flex: 7; margin-left: 1.6666666667%; margin-right: 1.6666666667%; float: left; margin-bottom: 10px; } .flex_master .flex_8 { flex: 8; margin-left: 1.6666666667%; margin-right: 1.6666666667%; float: left; margin-bottom: 10px; } .flex_master .flex_9 { flex: 9; margin-left: 1.6666666667%; margin-right: 1.6666666667%; float: left; margin-bottom: 10px; } .flex_master .flex_10 { flex: 10; margin-left: 1.6666666667%; margin-right: 1.6666666667%; float: left; margin-bottom: 10px; } .flex_master .flex_11 { flex: 11; margin-left: 1.6666666667%; margin-right: 1.6666666667%; float: left; margin-bottom: 10px; } .flex_master .flex_12 { flex: 12; margin-left: 1.6666666667%; margin-right: 1.6666666667%; float: left; margin-bottom: 10px; } } /* ----------------------------------------------------------------------------------------------- * _GeneralSpacing.css * Housing General Spacing SCSS * * 041222 DustinP: Created * ----------------------------------------------------------------------------------------------- */ /* LEGEND: CSS Property: m - margin p - padding Position: t - top b - bottom l - left r - right tb - top & bottom lr - left & right a - all sides The # - the percent value of that margin/padding Example output CSS: m-t-3 - margin-top:3% ; p-b-3 - padding-bottom:3% ; m-tb-15 - margin top:15% ; margin-bottom:15% ; */ /* Handle zero margin/padding with !important */ .m-a-0 { margin: 0 !important; } .m-t-0 { margin-top: 0 !important; } .m-b-0 { margin-bottom: 0 !important; } .m-l-0 { margin-left: 0 !important; } .m-r-0 { margin-right: 0 !important; } .m-lr-0 { margin-right: 0 !important; margin-left: 0 !important; } .m-tb-0 { margin-top: 0 !important; margin-bottom: 0 !important; } .p-a-0 { padding: 0 !important; } .p-t-0 { padding-top: 0 !important; } .p-t-0 { padding-top: 0 !important; } .p-b-0 { padding-bottom: 0 !important; } .p-l-0 { padding-left: 0 !important; } .p-r-0 { padding-right: 0 !important; } .p-lr-0 { padding-right: 0 !important; padding-left: 0 !important; } .p-tb-0 { padding-top: 0 !important; padding-bottom: 0 !important; } .l-s-0 { letter-spacing: 0px !important; } .l-s-2 { letter-spacing: 2px !important; } .l-s-20 { letter-spacing: 20px !important; } .l-s-10 { letter-spacing: 10px !important; } /* Generate Dynamic Inline Helper Classes * Source https://gist.github.com/glueckpress/9b152bd5a1c949d451ec * Generate Inline Helper classes for padding and margin using the $helperIncrementSizes values * Add Additional Values here */ .m-a-1 { margin: 1% !important; } .m-b-1 { margin-bottom: 1% !important; } .m-t-1 { margin-top: 1% !important; } .m-tb-1 { margin-top: 1% !important; margin-bottom: 1% !important; } .m-l-1 { margin-left: 1% !important; } .m-r-1 { margin-right: 1% !important; } .m-lr-1 { margin-left: 1% !important; margin-right: 1% !important; } .p-a-1 { padding: 1% !important; } .p-b-1 { padding-bottom: 1% !important; } .p-t-1 { padding-top: 1% !important; } .p-tb-1 { padding-top: 1% !important; padding-bottom: 1% !important; } .p-l-1 { padding-left: 1% !important; } .p-r-1 { padding-right: 1% !important; } .p-lr-1 { padding-left: 1% !important; padding-right: 1% !important; } .m-a-2 { margin: 2% !important; } .m-b-2 { margin-bottom: 2% !important; } .m-t-2 { margin-top: 2% !important; } .m-tb-2 { margin-top: 2% !important; margin-bottom: 2% !important; } .m-l-2 { margin-left: 2% !important; } .m-r-2 { margin-right: 2% !important; } .m-lr-2 { margin-left: 2% !important; margin-right: 2% !important; } .p-a-2 { padding: 2% !important; } .p-b-2 { padding-bottom: 2% !important; } .p-t-2 { padding-top: 2% !important; } .p-tb-2 { padding-top: 2% !important; padding-bottom: 2% !important; } .p-l-2 { padding-left: 2% !important; } .p-r-2 { padding-right: 2% !important; } .p-lr-2 { padding-left: 2% !important; padding-right: 2% !important; } .m-a-3 { margin: 3% !important; } .m-b-3 { margin-bottom: 3% !important; } .m-t-3 { margin-top: 3% !important; } .m-tb-3 { margin-top: 3% !important; margin-bottom: 3% !important; } .m-l-3 { margin-left: 3% !important; } .m-r-3 { margin-right: 3% !important; } .m-lr-3 { margin-left: 3% !important; margin-right: 3% !important; } .p-a-3 { padding: 3% !important; } .p-b-3 { padding-bottom: 3% !important; } .p-t-3 { padding-top: 3% !important; } .p-tb-3 { padding-top: 3% !important; padding-bottom: 3% !important; } .p-l-3 { padding-left: 3% !important; } .p-r-3 { padding-right: 3% !important; } .p-lr-3 { padding-left: 3% !important; padding-right: 3% !important; } .m-a-5 { margin: 5% !important; } .m-b-5 { margin-bottom: 5% !important; } .m-t-5 { margin-top: 5% !important; } .m-tb-5 { margin-top: 5% !important; margin-bottom: 5% !important; } .m-l-5 { margin-left: 5% !important; } .m-r-5 { margin-right: 5% !important; } .m-lr-5 { margin-left: 5% !important; margin-right: 5% !important; } .p-a-5 { padding: 5% !important; } .p-b-5 { padding-bottom: 5% !important; } .p-t-5 { padding-top: 5% !important; } .p-tb-5 { padding-top: 5% !important; padding-bottom: 5% !important; } .p-l-5 { padding-left: 5% !important; } .p-r-5 { padding-right: 5% !important; } .p-lr-5 { padding-left: 5% !important; padding-right: 5% !important; } .m-a-7 { margin: 7% !important; } .m-b-7 { margin-bottom: 7% !important; } .m-t-7 { margin-top: 7% !important; } .m-tb-7 { margin-top: 7% !important; margin-bottom: 7% !important; } .m-l-7 { margin-left: 7% !important; } .m-r-7 { margin-right: 7% !important; } .m-lr-7 { margin-left: 7% !important; margin-right: 7% !important; } .p-a-7 { padding: 7% !important; } .p-b-7 { padding-bottom: 7% !important; } .p-t-7 { padding-top: 7% !important; } .p-tb-7 { padding-top: 7% !important; padding-bottom: 7% !important; } .p-l-7 { padding-left: 7% !important; } .p-r-7 { padding-right: 7% !important; } .p-lr-7 { padding-left: 7% !important; padding-right: 7% !important; } .m-a-10 { margin: 10% !important; } .m-b-10 { margin-bottom: 10% !important; } .m-t-10 { margin-top: 10% !important; } .m-tb-10 { margin-top: 10% !important; margin-bottom: 10% !important; } .m-l-10 { margin-left: 10% !important; } .m-r-10 { margin-right: 10% !important; } .m-lr-10 { margin-left: 10% !important; margin-right: 10% !important; } .p-a-10 { padding: 10% !important; } .p-b-10 { padding-bottom: 10% !important; } .p-t-10 { padding-top: 10% !important; } .p-tb-10 { padding-top: 10% !important; padding-bottom: 10% !important; } .p-l-10 { padding-left: 10% !important; } .p-r-10 { padding-right: 10% !important; } .p-lr-10 { padding-left: 10% !important; padding-right: 10% !important; } .m-a-15 { margin: 15% !important; } .m-b-15 { margin-bottom: 15% !important; } .m-t-15 { margin-top: 15% !important; } .m-tb-15 { margin-top: 15% !important; margin-bottom: 15% !important; } .m-l-15 { margin-left: 15% !important; } .m-r-15 { margin-right: 15% !important; } .m-lr-15 { margin-left: 15% !important; margin-right: 15% !important; } .p-a-15 { padding: 15% !important; } .p-b-15 { padding-bottom: 15% !important; } .p-t-15 { padding-top: 15% !important; } .p-tb-15 { padding-top: 15% !important; padding-bottom: 15% !important; } .p-l-15 { padding-left: 15% !important; } .p-r-15 { padding-right: 15% !important; } .p-lr-15 { padding-left: 15% !important; padding-right: 15% !important; } .m-a-20 { margin: 20% !important; } .m-b-20 { margin-bottom: 20% !important; } .m-t-20 { margin-top: 20% !important; } .m-tb-20 { margin-top: 20% !important; margin-bottom: 20% !important; } .m-l-20 { margin-left: 20% !important; } .m-r-20 { margin-right: 20% !important; } .m-lr-20 { margin-left: 20% !important; margin-right: 20% !important; } .p-a-20 { padding: 20% !important; } .p-b-20 { padding-bottom: 20% !important; } .p-t-20 { padding-top: 20% !important; } .p-tb-20 { padding-top: 20% !important; padding-bottom: 20% !important; } .p-l-20 { padding-left: 20% !important; } .p-r-20 { padding-right: 20% !important; } .p-lr-20 { padding-left: 20% !important; padding-right: 20% !important; } .m-a-25 { margin: 25% !important; } .m-b-25 { margin-bottom: 25% !important; } .m-t-25 { margin-top: 25% !important; } .m-tb-25 { margin-top: 25% !important; margin-bottom: 25% !important; } .m-l-25 { margin-left: 25% !important; } .m-r-25 { margin-right: 25% !important; } .m-lr-25 { margin-left: 25% !important; margin-right: 25% !important; } .p-a-25 { padding: 25% !important; } .p-b-25 { padding-bottom: 25% !important; } .p-t-25 { padding-top: 25% !important; } .p-tb-25 { padding-top: 25% !important; padding-bottom: 25% !important; } .p-l-25 { padding-left: 25% !important; } .p-r-25 { padding-right: 25% !important; } .p-lr-25 { padding-left: 25% !important; padding-right: 25% !important; } .m-a-30 { margin: 30% !important; } .m-b-30 { margin-bottom: 30% !important; } .m-t-30 { margin-top: 30% !important; } .m-tb-30 { margin-top: 30% !important; margin-bottom: 30% !important; } .m-l-30 { margin-left: 30% !important; } .m-r-30 { margin-right: 30% !important; } .m-lr-30 { margin-left: 30% !important; margin-right: 30% !important; } .p-a-30 { padding: 30% !important; } .p-b-30 { padding-bottom: 30% !important; } .p-t-30 { padding-top: 30% !important; } .p-tb-30 { padding-top: 30% !important; padding-bottom: 30% !important; } .p-l-30 { padding-left: 30% !important; } .p-r-30 { padding-right: 30% !important; } .p-lr-30 { padding-left: 30% !important; padding-right: 30% !important; } /************************************************* * START - CLASSES REQUIRED TO BE IN EACH CLIENT'S CSS FILE (See clarity_master.css for a complete list.) */ /* The following tags must be defined in individual Client's CSS files: *** body and width control *** body .NormalContentWidthControl .NarrowContentWidthControl #content *** Common HTML elements *** p h1, h2, h3, h4, h5, h6 All CSS related to the technology used for the client's Main Menu. *** anchors *** a, a:visited, a:active, a:hover *** buttons *** .ButtonClass .ButtonShorter .ButtonDashboard *** menus *** Could be div.RadPanelBar_MobileClarityMenu & div.RadMenu_LargeClarityMenu if using same technology as VG, or is specific to technology used for client. *** blog classes *** *** dashboard classes *** **********************************************************************/ /* The _MasterResponsive.master pages must all have the following named div's in their header: master_header_for_printing - shown only if user is printing a page from the browser master_header_mobile - shown only for mobile devices master_header_large - shown only for large devices The following CSS is standard for all clients. Might be able to override it in client's CSS file if needed. But try to use these standards. Purpose is to take care of visibility when printing, as well as break-points. */ #master_header_for_printing, #master_header_large { display: none; } #master_header_mobile { display: block; margin-top: 0px; } /*************************************** * START - CLASSES FOR RESPONSIVE DESIGN. */ /**************/ /* BOX SIZING */ /* Awesome thing. Read about it here: http://www.w3schools.com/cssref/css3_pr_box-sizing.asp */ /* Important for Responsive Design, makes sure that the padding and border are included in the total width and height of the elements. */ * { box-sizing: border-box; -moz-box-sizing: border-box; } /*********************/ /* RESPONSIVE IMAGES */ /* Note: These settings can cause problems in some situations, like showing the google maps image controls, a max-width: inherit. So we added NonResponsiveImage style to be used on those images with this problem. */ /* Note: HTML5 element can used to specify different images to be used in different @media sizes. */ img { max-width: 100%; /* max-width prevents it scaling > its original size, like width:100% would do. */ height: auto; } img.NonResponsiveImage { max-width: inherit; } /******************** /*072220 JordanG: Content Responsive Elements*/ /*For use on all pages where full width images are used. Requires three images sizes*/ /* ----------------------------------------------------------------------------------------------- * _ResponsiveDisplay.css * * 040722 DustinP: Created for housing Responsive Display SCSS * ----------------------------------------------------------------------------------------------- */ /* DESKTOP *These are also the defaults due to the media query structure */ .ShowOnDesktop { display: block; } .ShowOn1200 { display: none; } .ShowOnMobile { display: none; } .HideOnMobile { display: block; } /* IPAD / TABLET - Used for Elements that shouldnt grow past 1200px */ @media all and (min-width: 921px) and (max-width: 1200px) { .ShowOnDesktop { display: none; } .ShowOn1200 { display: block; } .ShowOnMobile { display: none; } } /* MOBILE */ @media all and (max-width: 920px) { .ShowOnDesktop { display: none; } .ShowOn1200 { display: none; } .ShowOnMobile { display: block; } .HideOnMobile { display: none !important; } } /****************************/ /* The Responsive GRID-VIEW */ /* This is a 12 column grid, which is pretty standard. */ .grid_1, .grid_2, .grid_3, .grid_4, .grid_5, .grid_6, .grid_7, .grid_8, .grid_9, .grid_10, .grid_11, .grid_12 { margin-bottom: 5px; /* small margin on small screens */ width: 100%; /* For the smallest screen size, show just 1 column per row. */ } /* START - Not sure what these are or if used. */ .clearfix { zoom: 1; } .clearfix:before { /* Contain floats: h5bp.com/q */ content: ""; display: table; } .clearfix:after { /* Contain floats: h5bp.com/q */ content: ""; display: table; clear: both; } .rightfloat { float: right; } .leftfloat { float: left; } .inlinebutton { display: inline-block; text-align: right; margin-right: 1em; } /* END - Not sure what these are or if used. */ /* * END - CLASSES FOR RESPONSIVE DESIGN. **************************************/ /******************************************************** * START - CLASSES WHOSE VALUES ARE USED FOR ALL CLIENTS. */ /* 091014 ShawnO: Unfortunately box-sizing: Border-box causes problems with RadGrid popup form captions, so they need to use content-box */ /* ?? IS THIS USED?? */ .rgHeader { box-sizing: content-box; } /*** START ToggleSwitch ***/ /* A toggle Checkbox switch - mimics height of VG's ButtonClass and ButtonShorter classes */ /* This is currently the same CSS for all clients. */ /* ----------------------------------------------------------------------------------------------- * _ToggleSwitch.css * * 040722 DustinP: Created for housing Toggle Switch SCSS * ----------------------------------------------------------------------------------------------- */ .ToggleSwitch, .ToggleSwitchShorter { position: relative; display: inline-block; vertical-align: bottom; } .ToggleSwitch input, .ToggleSwitchShorter input { display: none; } .ToggleSwitch .switch, .ToggleSwitchShorter .switch { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; -webkit-transition: 0.4s; transition: 0.4s; border-radius: 32px; } .ToggleSwitch .switchafter, .ToggleSwitchShorter .switchafter { position: absolute; content: "OFF"; } .ToggleSwitch .switchbefore, .ToggleSwitchShorter .switchbefore { position: absolute; content: ""; background-color: white; -webkit-transition: 0.4s; transition: 0.4s; border-radius: 50%; } .ToggleSwitch input:focus + .switch, .ToggleSwitchShorter input:focus + .switch { box-shadow: 0 0 1px #7A7A78; } .ToggleSwitch input:checked + .switch, .ToggleSwitchShorter input:checked + .switch { background-color: #7A7A78; } .ToggleSwitch input:checked + .switchafter, .ToggleSwitchShorter input:checked + .switchafter { position: absolute; content: "ON"; color: white; } .ToggleSwitch { width: 62px; height: 30px; } .ToggleSwitch input:checked + .switch:after { left: 8px; } .ToggleSwitch input:checked + .switch:before { -webkit-transform: translateX(28px); -ms-transform: translateX(28px); transform: translateX(28px); } .ToggleSwitch .switch:before { height: 24px; width: 24px; left: 5px; bottom: 3px; } .ToggleSwitch .switch:after { font-size: 12px; line-height: 24px; height: 24px; bottom: 3px; right: 8px; } .ToggleSwitchShorter { width: 50px; height: 20px; } .ToggleSwitchShorter input:checked + .switch:after { left: 6px; } .ToggleSwitchShorter input:checked + .switch:before { -webkit-transform: translateX(26px); -ms-transform: translateX(26px); transform: translateX(26px); } .ToggleSwitchShorter .switch:before { height: 16px; width: 16px; left: 4px; bottom: 2px; } .ToggleSwitchShorter .switch:after { font-size: 12px; line-height: 16px; height: 16px; bottom: 2px; right: 6px; } /*** END ToggleSwitch ***/ /* Used to right align fieldset legends */ .Legend_RightAligned { background-color: #fff; padding: 0 2px; position: absolute; right: 8px; top: -2px; } .Legend_RightAligned input { vertical-align: middle; } /*****************/ /* HTML Controls */ /* For all Radio buttons... */ input[type=radio]:not(old) + label { margin-left: 0.3em; /* add some spacing between radio button and label */ /* Note: could use line-height:1.5em; to vertical space them more, might be nice for touch use */ } input[type=checkbox]:not(old) + label { margin-left: 0.3em; /* add some spacing between checkbox and label */ /* Note: could use line-height:1.5em; to vertical space them more, might be nice for touch use */ } /******************************/ /* flexslider, from js folder */ /* NOTE: Until we need difference settings for different clients, this is defined in clarity_master.css file. */ /* This always could be put included in such a way that only the pages that use the flexslider control loads it. */ .flexslider { display: block; /*demo 1 slider theme*/ margin: 0 0 60px; -webkit-border-radius: 4px; -moz-border-radius: 4px; -o-border-radius: 4px; border-radius: 4px; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2); -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2); -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2); -o-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2); } .flexslider .flex-direction-nav .flex-prev { text-align: left; left: 0px; } .flexslider .flex-direction-nav .flex-next { text-align: right; right: 0px; } /* used to override the flexbox css version because it is adding width to the page. */ /* On Lookup pages, the search criteria: */ .LookupSectionHeader { color: #7A7A78; font-weight: bold; } /* Telerik RadGrid Font-Sizes */ .RadGrid { font-size: 14px !important; } .RadGrid .rgMasterTable, .RadGrid .rgDetailTable, .RadGrid .rgGroupPanel table, .RadGrid .rgCommandRow table, .RadGrid .rgEditForm table, .RadGrid .rgPager table { font-size: 14px !important; } .GridToolTip, .RadGrid .rgEditForm div { font-size: 14px !important; } /* ECommerce pages use a slightly larger font 082317 ShawnO */ .ECPage { font-size: 1.2em; } /***************************************** * Search Results, like LookupStyles.aspx *****************************************/ /* The following div is necessary to force the image to be vertical-aligned at bottom, just above text, but centered. */ div { /* 091120 ShawnO: Added this wrapper around images which helps overlay icons to know where to position themselves. */ } div.SearchResults_Container { border-bottom: 1px solid #EEEEEE; min-height: 200px; text-align: center; } div.SearchCatResults_Container { min-height: 200px; text-align: center; } div.SearchResults_ImageContainer { /* 091020 ShawnO: Fixing this to be the same size as the image, so that overlays will work. */ height: 150px; width: 150px; margin: auto; /* This will center it */ position: relative; } div.SearchResults_ImageAlignment { position: absolute; bottom: 0; text-align: center; width: 100%; } div.SearchResults_ImageWrapper { display: inline-block; } div.SearchResults_Container:nth-child(4n+1) { clear: both; } /* 101119 ShawnO: Adding for SiteSeachV2. */ /* The following div is necessary in that 'relative' is required in a div before 'absolute' is used in next div. */ /* The following div is necessary to force the image to be vertical-aligned at bottom, just above text, but centered. */ /* 081816 DougC: Had a problem with search result divs of varying heights because of content. Resulted in a floating mess. */ /* Since SiteSearch.aspx is only responsive from 4 to 1 column, no need to worry about 3-wide or 2-wide as explained below. */ /* From Ben: use :nth-child CSS pseudo-selector to clear after every 4th thumbnail. div:nth-child(4n+1) since the clear needs to happen on the div after every 4th one. Then, if the number of thumbnails decreases to 3-wide on another screen size you can add div:nth-child(4n+1) { clear: none; } to stop clearing after every 4th, and add one for div:nth-child(3n+1).*/ /**************************************** * Filter Areas, like LookupStyles.aspx ****************************************/ /* Item Filter, on left of search pages */ .itemFilterHeader { width: 100%; background-color: #f3f3f3; border: 1px solid #e2e2e2; text-align: center; } .itemFilterDetail { width: 100%; background-color: #f3f3f3; border-bottom: 1px solid #e2e2e2; text-align: left; padding: 5px; } /***********************************************/ /* HTML tag styles */ /***********************************************/ .HintText { font-size: 0.8em; font-style: italic; } .hid { display: none; } var { /* 092217 DougC: What this?! */ font-style: normal; } .processingOverlay { /* Used? */ background-color: #000000; opacity: 0.35; position: absolute; left: 0; top: 0; z-index: 5000; } .divErrorMessage { background-color: Red; color: White; font-size: 16px; font-weight: bold; text-align: center; } .divStandardBoxes { border: solid 1px #BBBBBB; /* 080714: Changed from brown #D1CAB0; to grey */ /* 080714: Remove rounded corners border-radius: 12px; */ /* double the border width is nice */ padding: 6px; } /* END: CSS used on all Pages */ /******************************/ /***********************************/ /* START: CSS used in Master Pages */ .StandardPageBodyClass { background-color: #555555; /* to save vertical & horizontal space, & maximum use within browser window, set all margins of the body to zero */ margin: 0px; } .StandardPageBodyClass_LoggedOut { background-color: White; /* to save vertical & horizontal space, & maximum use within browser window, set all margins of the body to zero */ margin: 0px; padding-bottom: 80px; /* Row for footer fixed at bottom of browser */ } .StandardBodyFormClass { /* currently, nothing is in here */ } .StandardFormTableClass { background-color: White; border-style: none; font-size: 12px; /* auto on left and right forces center of the table, and thus since all content on any page is inside this table, then entire page will be centered nicely. */ margin-left: auto; margin-right: auto; padding: 0px; /* NOTE: WIDTH affects the standard size of ALL pages. This value is set to work well on 1024x768 resolution. Can't set to 1024, because need to subtract pixels for browser's border, the vertical scroll bar (just assume it is on all our pages) and our page border (which is background color in PageContent.) */ width: 999px; } .StandardFormTableClass_LoggedOut { border-style: none; font-size: 12px; /* auto on left and right forces center of the table, and thus since all content on any page is inside this table, then entire page will be centered nicely. */ margin-left: auto; margin-right: auto; padding: 0px; /* NOTE: WIDTH affects the standard size of ALL pages. This value is set to work well on 1024x768 resolution. Can't set to 1024, because need to subtract pixels for browser's border, the vertical scroll bar (just assume it is on all our pages) and our page border (which is background color in PageContent.) */ } .StandardPostUpdatePanelClass { background-color: White; border-style: none; font-size: 12px; } /******** MAIN MENU AFTER LOGGED IN *******/ div.hideSkiplink { background-color: #3a4f63; width: 100%; } .menu ul { list-style: none; margin: 0px; padding: 0px; letter-spacing: 1px; z-index: 999; /* 081214 ShawnO: Added this so that menu won't render behind other controls */ } .menu ul li a { background-color: #666666; border: 1px #666666 solid; color: White; display: block; font-size: 14px; line-height: 1.35em; text-align: center; text-decoration: none; /* WIDTH: NOT SURE HOW TO DO DIFFERENT SIZES ON TOP ITEMS AND ON DROP DOWN ITEMS! */ width: 162px; /* for 6 items */ /* width: 140px; /* for 7 items */ } .menu ul li a:visited, .menu ul li a:hover, .menu ul li a:active { background-color: #666666; border: 1px #666666 solid; color: White; display: block; font-size: 14px; line-height: 1.35em; text-align: center; text-decoration: none; /* WIDTH: NOT SURE HOW TO DO DIFFERENT SIZES ON TOP ITEMS AND ON DROP DOWN ITEMS! */ width: 162px; /* for 6 items */ /* width: 140px; /* for 7 items */ } .menu ul li a:hover { /* Just reverse the colors when we hover over a menu item */ background-color: #DDDDDE; color: #666666; } .menu ul li a.level2 { /* Use different settings for dropdown menus, hard-coded to "level2" by the control */ text-align: left; padding-left: 5px; width: 225px; } /* END:CSS used in Master Pages */ /********************************/ /**********************************************/ /* START: CSS for Password Strength indicator */ .PasswordPoor { color: Red; font-size: 12px; } .PasswordWeak { color: Orange; font-size: 12px; } .PasswordBetter { color: Blue; font-size: 12px; } .PasswordExcellent { color: Green; font-size: 12px; } /* END: CSS for Password Strength indicator */ /**********************************************/ /******************************/ /* START: CSS for ModalPopups */ /** The following is used to wrap the entire screen with a please wait image. See Import.aspx for an example. **/ .modalBackground { background-color: #DDDDDD; /* 070106 DougC: Made lighter */ filter: alpha(opacity=60); opacity: 0.6; } /** The following is used to display a modal popup window over the current page. See Import.aspx for an example. **/ .modalPopup { background-color: white; border-width: 4px; border-style: solid; border-color: #CD661D; /*Gray;*/ color: Black; padding: 3px; width: 250px; } .modalPopup.medium-wide { width: 500px; } .modalPopup.noborder { border-style: none; } .modalPopup.blackborder { border-color: Black; border-width: 2px; } /** The following is used to override modal popup window settings. **/ /* END: CSS for ModalPopups */ /****************************/ /******************************/ /* START: CSS for RadWindow Popups */ .PopupTitle { font-size: 18px; font-weight: bold; margin: 10px; text-align: center; white-space: nowrap; } .PopupBody { margin: 10px; white-space: nowrap; } /* END: CSS for RadWindow Popups */ /****************************/ /****************************************/ /* START: CSS for standard asp:GridView #BBBBBF; */ .GridView th { background-color: #EEEEEE; color: #444444; padding-left: 10px; padding-right: 10px; padding-top: 0px; padding-bottom: 0px; } .GridView td { padding-left: 10px; padding-right: 10px; padding-top: 2px; padding-bottom: 2px; } /* END: CSS for standard asp:GridView */ /**************************************/ /****************************************/ /* START: CSS for standard asp:GridView_Compact #BBBBBF; */ .GridView_Compact th { background-color: #7A7A78; color: #444444; padding-left: 2px; padding-right: 2px; padding-top: 0px; padding-bottom: 0px; } .GridView_Compact td { padding-left: 2px; padding-right: 2px; padding-top: 2px; padding-bottom: 2px; } /* END: CSS for standard asp:GridView_Compact */ /**************************************/ /****************************************/ /* START: CSS for standard GridView_SubTable */ .GridView_SubTable th, .GridView_SubTable td { border-style: solid; border-width: 1px; border-color: gray; } .GridView_SubTable tr:first-of-type > th { border-top-width: 0px; } .GridView_SubTable tr:last-of-type > td { border-bottom-width: 0px; } .GridView_SubTable th:first-of-type, .GridView_SubTable td:first-of-type { border-left-width: 0px; } .GridView_SubTable th:last-of-type, .GridView_SubTable td:last-of-type { border-right-width: 0px; } /* * END - CLASSES WHOSE VALUES ARE USED FOR ALL CLIENTS. ******************************************************/ /******************************************* * START - CLASSES FOR A LA CARTS SALES AIDS */ /********************************/ /********************************/ /* START ALaCarteFabrics Module */ /* .BACKUPALaCarteOrderTable */ .BACKUPALaCarteOrderTable td { border: solid 1px #7A7A78; } .BACKUPALaCarteOrderTable th { border: solid 1px #7A7A78; font-weight: bold; text-align: left; } /* .ALaCarteOrderTable */ .ALaCarteOrderTable table { background-color: #7A7A78; } .ALaCarteOrderTable td { background-color: #EEEEEE; border: solid 1px White; } .ALaCarteOrderTable th { background-color: #EEEEEE; border: solid 1px White; font-weight: bold; text-align: left; } /* .ALaCarteFabricShopTable */ .ALaCarteFabricShopTable table { /* width: 100%; does not work here! Put it in the instead! */ } .ALaCarteFabricShopTable tr { vertical-align: top; } .ALaCarteFabricShopTable td { /* font-size: 14px; */ padding: 0px; padding-bottom: 20px; } /* .ALaCarteFabricShopTable_Inner */ .ALaCarteFabricShopTable_Inner td { font-size: 80%; padding-bottom: 0px; text-align: left; width: 100%; } .ALaCarteFabricShopTable_Inner img { /* Necessary because of Responsive Design, max-width:100%; causes these images to render way too small. */ max-width: inherit; } /* .ALaCarteFabricShopTable_Inner_Actions */ .ALaCarteFabricShopTable_Inner_Actions td { padding-right: 8px; } /* 100214 ShawnO: Removing this style because we are now using buttons. Adding .fabriccart-item-summary style. .fabriccart-action-removeitem { border: 1px solid #2EB8E6; } */ .fabriccart-item-summary { color: #7A7A78; text-align: center !important; background: lightgrey; } .fabriccartitemerror { color: #FF0000; } .fabriccartbulkerror { color: #FF0000; margin-left: 15px; } /* 073013 SamG: Formatting for CurrentSeasonItem Tag */ span.CurrentSeasonItem { color: White; background-color: MediumPurple; padding: 0px 2px 0px 2px; } /* END ALaCarteFabrics Module */ /******************************/ /******************************/ /*****************************************************/ /*****************************************************/ /* START: CSS for floating A La Carte Shopping Cart */ div.shopping-cart-floating-menu { margin-left: 789px; margin-top: -56px; position: fixed; } div.shopping-cart-fixed-menu { margin-left: 789px; margin-top: -56px; position: inherit; float: left; } #fabricCartSummary { padding-left: 39px; min-height: 25px; width: 100%; text-align: left; background: transparent url("/FabricModule/images/shoppingcart.gif") no-repeat top left; } #fabricCartSummary div.row { clear: left; } #fabricCartSummary div.row > div { float: left; height: 15px; } #fabricCartSummary div.row > div:first-child { float: left; padding-left: 5px; } /* END: CCSS for floating A La Carte Shopping Cart */ /***************************************************/ /***************************************************/ /**************************************/ /* START: CSS for FabricShopAccordion */ .FabricShopAccordionHeader { background-color: #7A7A78; border: 1px solid Black; color: #555555; /* 111512 DougC: Changed from White per Diane */ font-size: 16px; font-weight: bold; } .FabricShopAccordionHeaderSelected { background-color: #7A7A78; border: 1px solid Black; color: #555555; /* 111512 DougC: Changed from White per Diane */ font-size: 16px; font-weight: bold; } .FabricShopAccordionContent { background-color: White; border-bottom: 1px solid Black; border-left: 1px dashed Black; border-right: 1px dashed Black; padding-left: 5px; } /* END: CSS for FabricShopAccordion */ /***************************************/ /*****************************************/ /* START: CSS for SalesAidsOrderPickingList and SalesAidsOrderPackIt */ .XSalesAidsPickingListSectionHeader { background-color: #7A7A78; color: White; padding-left: 5px; margin-bottom: 0px; } .XSalesAidsPickingListSectionHeader a { color: white; } .SalesAidsPickingListSectionHeader, .SalesAidsPackItSectionHeader { border: 3px solid #7A7A78; background-color: #7A7A78; color: white; margin-bottom: 0px; } .SalesAidsPickingListSectionHeader a, .SalesAidsPackItSectionHeader a { color: white; } .SalesAidsPickingListSectionHeader a:hover, .SalesAidsPackItSectionHeader a:hover { color: #333; } /* END: CSS for SalesAidsOrderPickingList and SalesAidsOrderPackIt */ /***************************************/ /*****************************************/ /* START: CSS for SAOrderManifest */ table.Manifest > tbody > tr { background-color: #F4F4EE; } table.Manifest > tbody > tr > th { background-color: #DDDDDE; } table.Manifest > tbody > tr > td.Deleted { /*background-color: #DDDDFF;*/ } table.Manifest > tbody > tr > td.Cancelled { background-color: #F5A9BC; } table.Manifest > tbody > tr > td.Shipped { background-color: #EEFFEE; color: #668866; } table.Manifest > tbody > tr > td.Packed { background-color: #FFCCCC; } table.Manifest > tbody > tr > td.Pending { background-color: #FFFFCC; } table.Manifest > tbody > tr > td.Actions { white-space: nowrap; /* 032221 ShawnO > { button, input { font-size: 10px; } } */ } /* 031814 SamG: [VF-1097]: Added style for Shipping Display. */ span.ShippingStandard { font-weight: normal; } span.ShippingOvernight { color: OrangeRed; background-color: #FFFFCC; padding: 2px; font-weight: bold; } /* END: CSS for SAOrderManifest */ /***************************************/ /* * END - CLASSES FOR A LA CARTS SALES AIDS *****************************************/ /******************************/ /******************************/ /* START: CSS for Online Claim Tracking */ .ClaimForm { margin: 0 auto; padding: 0; /* 081619 ShawnO: Changing CSS to make claim table auto-size */ text-align: left; display: inline-block; } .ClaimForm table { width: 100%; } .ClaimForm .Section { width: 100%; margin-bottom: 10px; } .ClaimForm .emphasisBox { /*border: 1px solid gray;*/ background-color: #EEEEEE; } .ClaimForm .emphasisBox h3, .ClaimForm .emphasisBox td .emphasisRow { background-color: Silver; } .ClaimForm .emphasisBox h3 { margin: 0 -5px; padding: 0 5px; } .ClaimForm td { vertical-align: top; } .ClaimForm > table > tbody > tr > td { padding: 5px; /*width: 50%;*/ } .ClaimForm > div { padding: 5px; } .ClaimForm .ManualSearch input { text-transform: uppercase; } .actionButtonContainer input { margin-top: 10px; margin-right: 15px; } #onlineClaimDataEntryForm .imagelisting td { padding: 5px; } #onlineClaimDataEntryForm table.imagelisting { width: auto; } #onlineClaimDataEntryForm .imageupload { margin-top: 5px; display: block; } #onlineClaimDataEntryForm .noimagesuploaded { color: Red; font-weight: bold; font-style: italic; text-align: center; display: block; margin: 10px 0; } /*#onlineClaimDataEntryForm .imagelisting .colRemove { width: 50px; }*/ #gridClaims .altrow { background-color: #DDDDDE; } #gridClaims tr.hover { background-color: #BBBBBB; cursor: pointer; } /* END: CSS for Online Claim Tracking */ /**************************************/ /**************************************/ /*************************************************/ /*************************************************/ /* START: CSS for Imagees Manager pages & features */ .downloadAllHiResContainer { text-align: right; margin-top: -14px; } a.plusminuslink { display: block; width: 16px; height: 16px; background: url("/images/plusminus.png") no-repeat top center; } a.plusminuslink.selected { background-position: bottom center; } .multiimagecontainer .imagecontainer-container { width: 415px; } .multiimagecontainer .imagecontainer { float: left; width: 80px; height: 100px; margin: 5px; padding: 5px; text-align: center; border: solid 1px #999; } /* END: CSS for Imagees Manager pages & features */ /***********************************************/ /***********************************************/ /***********************/ /* START: Documents CSS */ .DocumentsTreeView { border: solid 1px #BBBBBB; border-top: solid 5px #BBBBBB; padding-bottom: 4px; padding-top: 4px; padding-left: 0px; padding-right: 2px; font-size: 1.2em; width: 100%; } .dynamicDocumentLinkLI { Xborder: 2px solid White; /* 080615 DougC: Don't want this everywhere, so remove it here and have to add manually to the LookupDocuments.aspx page. */ background-color: #EEEEEE; font-size: 16px; padding: 3px; } /* END: Document CSS */ /*********************/ /************************/ /* Start: Wish List CSS */ /* ----------------------------------------------------------------------------------------------- * _WishList.css * * 040722 DustinP: Created for housing Wish List SCSS * ----------------------------------------------------------------------------------------------- */ .WL { /* Added classes below for v2 of the WishList */ } .WLItemClassLimited, .WLItemClassFull, .WLItemClassNoBottom { float: left; border-radius: 10px; width: 180px; min-height: 230px; text-align: center; margin: 3px; padding: 5px; } .WLItemClassFull { font-size: 14px !important; min-height: 230px; } .WLItemClassNoBottom { font-size: 14px !important; } .WLGroup { margin-bottom: 20px; font-size: 12px; } .WLGroupHeader { /* used to fix bug in chrome, chrome is adding whitespace on right, and top of element between border */ margin-top: -1px; margin-right: -1px; } .WLGroupName { padding: 10px; margin-top: -5px; /* offset top border */ display: inline-block; } .WLItem { padding: 10px; border-bottom: 1px solid #808080; position: relative; margin: 0 10px; page-break-inside: avoid; } .WLItem .AlignRight { position: absolute; right: 20px; top: 50%; transform: translateY(-50%); } .WLItemImage { display: inline-block; max-width: 80px; max-height: 80px; } .WLItemDetails { display: inline-block; width: calc(100% - 250px); vertical-align: top; } .WLItemDetails > div { line-height: 20px; margin: 0 15px 5px 5px; } div.WLGroup div.WLItem:last-child { border-bottom: none; border-bottom: none; } @media all and (max-width: 920px) { .WLItem .AlignRight { position: static; display: block; transform: none; } } /* END: Wish List CSS */ /**********************/ /************************/ /* Start: Project CSS */ /* ----------------------------------------------------------------------------------------------- * _Project.css * * 040722 DustinP: Created for housing Project SCSS * ----------------------------------------------------------------------------------------------- */ .ProjItemClassLimited { float: left; border-radius: 10px; /* background-color: #C6ECFF; */ width: 180px; min-height: 230px; /* 050818 CharlieS: changed to min-height */ text-align: center; margin: 3px; padding: 5px; } .ProjItemClassFull { float: left; font-size: 14px !important; border-radius: 10px; /* background-color: #C6ECFF; */ width: 180px; min-height: 230px; /* 050818 CharlieS: changed to min-height */ text-align: center; margin: 3px; padding: 5px; } /* 021015 ShawnO: This is used for wish list items that don't have a bottom text line */ .ProjItemClassNoBottom { float: left; font-size: 14px !important; border-radius: 10px; width: 180px; text-align: center; margin: 3px; padding: 5px; } /* Added classes below for v2 of the WishList */ .ProjGroup { margin-bottom: 20px; /*font-size: 12px;*/ /*123119 SamuelG: not sure if we need this, it doesn't seem to be used anywhere and it was overriding some styling in IDS*/ background-color: #ddd; } .ProjGroupHeader { /* used to fix bug in chrome, chrome is adding whitespace on right, and top of element between border */ margin-top: -1px; margin-right: -1px; display: table; width: 100%; padding-left: 10px; padding-right: 10px; padding-top: 4px; padding-bottom: 4px; } .ProjGroupName { padding: 10px; margin-top: -5px; /* offset top border */ display: inline-block; } .ProjItem { display: table; width: 100%; margin: 0; padding: 10px; border-bottom: 1px solid #808080; position: relative; margin: 0; page-break-inside: avoid; background-color: white; } .ProjItemImage { display: inline-block; max-width: 80px; max-height: 80px; } .ProjItemDetails { display: inline-block; width: calc(100% - 160px); vertical-align: top; } .ProjItemDetails > div { line-height: 20px; margin: 0 15px 5px 5px; } div.ProjGroup div.ProjItem:last-child { border-bottom: none; border-bottom: none; } /* 081420 ShawnO: Adding separate CSS for the Project Print page */ .ProjPrintGroup { margin-bottom: 20px; background-color: #ddd; padding-left: 5px; padding-right: 5px; padding-bottom: 5px; padding-top: 5px; } .ProjPrintGroupHeader { padding-bottom: 5px; } .ProjPrintGroupName { padding: 10px; margin-top: -5px; display: inline-block; } .ProjPrintItems { width: 100%; background-color: white; } .ProjPrintItems th { border: 1px solid black; font-weight: bold; } .ProjPrintItems td { border: 1px solid black; } .ProjPrintItem { padding: 10px; border-bottom: 1px solid #808080; position: relative; margin: 0; page-break-inside: avoid; } .ProjPrintItemImage { display: inline-block; max-width: 80px; max-height: 80px; } .ProjPrintItemDetails { display: inline-block; width: calc(100% - 160px); vertical-align: top; } .ProjPrintItemDetails > div { line-height: 20px; margin: 0 15px 5px 5px; } .ProjPrintItemLink { float: left; } .ProjPrintItemDetails { float: left; padding: 3px; } .ProjectPrintOptionTable td { border: none; } /* END: Project CSS */ /**********************/ /***********************************/ /* Start: Custom Quote History CSS */ /* Custom Quotes */ /* ----------------------------------------------------------------------------------------------- * _CustomQuote.css * * 040722 DustinP: Created for housing Toggle Switch SCSS * ----------------------------------------------------------------------------------------------- */ .CQHistoryContainer { width: 400px; height: 200px; overflow-y: scroll; border: 1px solid gray; margin-bottom: 2px; margin-top: 2px; } .CQMsg { clear: both; display: table; margin-bottom: 3px; width: 100%; } .CQMsgAttachments { background-color: #36327b; border-radius: 4px; margin: 4px; padding: 5px; } .CQMsgCustomer { float: left; color: white; background-color: blue; padding-left: 3px; padding-right: 3px; border-radius: 5px; width: 75%; margin-left: 3px; } .CQMsgStaff { float: right; color: white; background-color: green; padding-left: 3px; padding-right: 3px; border-radius: 5px; width: 75%; margin-right: 3px; } .CQMsgTime { font-style: italic; } /* END: Custom Quote History CSS */ /*********************************/ /************************************************************/ /* START: CSS for popups used in AutoComplete lookup fields */ .CompletionListCssClass { background-color: White; border: solid 3px #777777; font-size: 16px; /* height: 300px; With no limit on height it will draw down the page. If you limit height it will draw scrollbars if needed. */ margin-top: 0px; /* Need margin-top */ overflow: auto; padding-left: 4px; cursor: pointer; } .CompletionListHighlightedItemCssClass { background-color: #ffc0c0; } /* END: CSS for popups used in AutoComplete lookup fields */ /**********************************************************/ /*******************************/ /* START: CSS for order status */ .OrderStatusOrderReceived { background-color: #feeba7; } .OrderStatusInProduction { background-color: #AFDCEC; } .OrderStatusReadyToShip { background-color: #FFF8C6; } .OrderStatusShipped { background-color: #57E964; } .OrderStatusDelayed { background-color: #F7BE81; } .OrderStatusCancelled { background-color: #BDBDBD; } /* END: CSS for order status */ /*****************************/ .TextBoxUpperCase { text-transform: uppercase; } /*********************************************************/ /* START: CSS for Telerik controls that don't use a skin */ /*** 032318 DougC: We learned that this section needed to be in Client-Specific CSS files! Was moved today. .RadListBox_Default, .RadComboBox_Default .rcbInput, .RadComboBoxDropDown_Default, .RadSplitter_Default, html body .RadInput_Default .riTextBox { font-family: Roboto,sans-serif !Important; font-size: 14px !Important; } ****/ /* END: CSS for Telerik controls that don't use a skin */ /*******************************************************/ /*******************************************************/ /** START: CSS for LookupStyles, StyleTearSheets, etc. EG: VG_LookupStyles.aspx */ .class_Styles_DetailTable table { width: 100%; border: 1px solid black; } .class_Styles_DetailTable tr { vertical-align: top; } .class_Styles_DetailTable td:FIRST-CHILD { /* Only applies to first column on each row. "td:first-child + td + td" would be specification for 3rd column. */ padding-left: 10px; /* Indentation on left */ padding-right: 5px; /* Ensure some space on right if text in td is wider than width */ white-space: nowrap; /* To ensure 1 column does not wrap */ min-width: 140px; } @media all and (max-width: 1300px) { .class_Styles_DetailTable td:FIRST-CHILD { /* Only applies to first column on each row. "td:first-child + td + td" would be specification for 3rd column. */ padding-left: 10px; /* Indentation on left */ padding-right: 5px; /* Ensure some space on right if text in td is wider than width */ white-space: normal !important; /* To ensure 1 column does not wrap */ min-width: 140px; } } /** END: CSS for LookupStyles, StyleTearSheets, etc. */ /*****************************************************/ /**************************************************/ /** START: class_radPanelBar_StandardSearchFilter */ /** This class is for use on radPanelBar_StandardSearchFilters on Lookup pages, which is based on the Telerik RadPanelBar control. **/ /* 032318 .class_radPanelBar_StandardSearchFilter is now defined in clients' CSS. */ .class_radPanelBar_StandardSearchFilter { /* 041423 ShawnO: Adding this because of change in rendering of MultiLevelCheckbox control. */ } .class_radPanelBar_StandardSearchFilter .rpText { font-size: 0.9em !important; font-weight: bold !important; margin-bottom: 10px !important; margin-top: 10px !important; } .class_radPanelBar_StandardSearchFilter .rpLink { padding: 0px 0px 0px 0px !important; } .class_radPanelBar_StandardSearchFilter td { padding: 2px 2px 2px 10px !important; } .class_radPanelBar_StandardSearchFilter .ClarityMLCB { padding-left: 10px; } .class_radPanelBar_StandardSearchFilter .ClarityMLCBItem { padding-top: 2px; padding-bottom: 2px; } .class_radPanelBar_StandardSearchFilter .rpExpandHandle { display: none !important; } .class_radPanelBar_StandardSearchFilter .rpImage { margin-top: -1px !important; } /** END : class_radPanelBar_StandardSearchFilter */ /*************************************************/ /************************/ /* START - PopupToolTip */ /* see http://www.w3schools.com/css/css_PopupToolTip.asp */ .PopupToolTipText { visibility: hidden; width: 222px; background-color: #666666; color: #FFFFFF; text-align: center; padding: 8px; border-radius: 5px; /* Position the text */ position: absolute; z-index: 1; } /* When you mouse over (or touch) the container, show the text. There is no need for different classes for each use. */ .PopupToolTip:hover .PopupToolTipText { visibility: visible; } /* END - PopupToolTip */ /**********************/ /* 090916 DougC: New class to easily set on anything to hide it for mobile devices. */ /* Since mobile is default styles, hide areas with this Class. */ .HideOnMobile { display: none; } /* 100116 DougC: For mobile devices, be sure to show areas with this Class. */ .HideOnLarger { display: inherit; } /*********************************************************/ /* START - LearningCenter, these styles start with "lc_" */ /* 082417 Moved these into ClarityMaster.css for all Clients. */ /* ----------------------------------------------------------------------------------------------- * _LearningCenter.css * * 040722 DustinP: Created for housing Learning Center SCSS * ----------------------------------------------------------------------------------------------- */ .lc_header { height: 60px; margin-bottom: 5px; position: relative; background-color: #EEEEEE; } .lc_title { font-weight: bold; float: left; margin: 15px; color: #A6A6A6; font-size: 24px; letter-spacing: 4px; } .lc_graphic { float: right; height: 60px; width: 60px; } .lc_topics_container { min-height: 425px; background-color: #EEEEEE; } .lc_topic { margin: 15px; padding: 5px; } .lc_topic_title { color: #7A7A78; font-size: 18px; letter-spacing: 1px; } .lc_play_link { display: block; height: 100%; padding: 10px; margin: 10px; border: 2px solid #7A7A78; box-shadow: -4px 4px 6px -2px rgba(136, 136, 136, 0.75); } .lc_play_link:hover { border: 2px solid #000000; color: #000000; text-decoration: none; } .lc_play_link:active { position: relative; top: 1px; left: 1px; } .lc_back_link { float: left; } .lc_back_link:hover .lc_back, .lc_back_link:hover .lc_title { color: #7A7A78; } .lc_back { float: left; font-size: 25px; line-height: 58px; margin-left: 10px; color: #A6A6A6; } .lc_label { line-height: 30px; } .lc_play_icon { float: right; } .lc_powerpoint { width: 722px; height: 565px; } @media all and (max-width: 920px) { .lc_powerpoint { width: 100%; height: auto; } } /* END - LearningCenter */ /************************/ /* 082917 CharlieS: Moved docdiv from individual pages to master */ .docdiv { background-color: #EEEEEE; border-radius: 10px; box-sizing: border-box; padding: 10px; text-align: center; height: 280px; vertical-align: middle; } /* -------------------------------------------------------------------------------------------------------------------------------------------------- ----------------------------------------------------------------------------------------------------------------------------------------------------- LARGER MOBILE DEVICES This is for mobile devices with a bit larger screens. NOTE: min-width works when you resize the screen, min-device-width does not response when resized. */ /* END LARGER MOBILE DEVICES - 481px */ /* -------------------------------------------------------------------------------------------------------------------------------------------------- ----------------------------------------------------------------------------------------------------------------------------------------------------- LARGE DEVICES TABLET & SMALLER LAPTOPS The average viewing window and preferred media query for those is 768px. But I think that some more breathing space is good:) */ @media all and (min-width: 920px) { /* Change which header is shown. */ #master_header_large { display: block; margin-top: 0px; position: relative; /* prevent absolute positioned elements from display outside of menu */ } #master_header_mobile { display: none; position: relative; /* prevent absolute positioned elements from display outside of menu */ } /* Redefine responsive grid column widths */ .grid_1 { width: 5%; } .grid_2 { width: 13.3333333333%; } .grid_3 { width: 21.6666666667%; } .grid_4 { width: 30%; } .grid_5 { width: 38.3333333333%; } .grid_6 { width: 46.6666666667%; } .grid_7 { width: 55%; } .grid_8 { width: 63.3333333333%; } .grid_9 { width: 71.6666666667%; } .grid_10 { width: 80%; } .grid_11 { width: 88.3333333333%; } .grid_12 { width: 96.6666666667%; } .grid_1, .grid_2, .grid_3, .grid_4, .grid_5, .grid_6, .grid_7, .grid_8, .grid_9, .grid_10, .grid_11, .grid_12 { margin-left: 1.6666666667%; margin-right: 1.6666666667%; float: left; display: block; margin-bottom: 10px; /* larger on larger screens */ } /* 082414 DougC: Need to support responsive columns without any pre-built-in margins, so we can design 100% of the width. */ /* Hint, set "padding" if you want space around your content. */ .grid_1_nomargin { width: 8.3333333333%; } .grid_2_nomargin { width: 16.6666666667%; } .grid_3_nomargin { width: 25%; } .grid_4_nomargin { width: 33.3333333333%; } .grid_5_nomargin { width: 41.6666666667%; } .grid_6_nomargin { width: 50%; } .grid_7_nomargin { width: 58.3333333333%; } .grid_8_nomargin { width: 66.6666666667%; } .grid_9_nomargin { width: 75%; } .grid_10_nomargin { width: 83.3333333333%; } .grid_11_nomargin { width: 91.6666666667%; } /*090716 DougC: Fixed, was 83.333% */ .grid_12_nomargin { width: 100%; } /*090716 DougC: Fixed, was 91.666% */ .grid_1_nomargin, .grid_2_nomargin, .grid_3_nomargin, .grid_4_nomargin, .grid_5_nomargin, .grid_6_nomargin, .grid_7_nomargin, .grid_8_nomargin, .grid_9_nomargin, .grid_10_nomargin, .grid_11_nomargin, .grid_12_nomargin { display: block; float: left; margin-left: 0; margin-right: 0; margin-bottom: 0; } .alpha { margin-left: 0px; } .omega { margin-right: 0px; } .rightfloat { float: right; } /* 090916 DougC: When larger size, show areas with this Class. */ .HideOnMobile { display: inherit; } /* 100116 DougC: When larger size, be sure areas with this Class are hidden. */ .HideOnLarger { display: none; } /***************************************** * div.SearchResults*, Used for formatting search results like in LookupStyles.aspx. *****************************************/ /* This media width uses same attributes with just a few overrides: */ div.SearchResults_Container { border-bottom: 0px !important; } } /* END LARGER DEVICES - 920px */ /* -------------------------------------------------------------------------------------------------------------------------------------------------- ----------------------------------------------------------------------------------------------------------------------------------------------------- DESKTOP This is the average viewing window. So Desktops, Laptops, and in general anyone not viewing on a mobile device. Here's where you can add resource intensive styles. */ /* END DESKTOP - 1030px*/ /* -------------------------------------------------------------------------------------------------------------------------------------------------- ----------------------------------------------------------------------------------------------------------------------------------------------------- LARGEST VIEWING SIZE This is for the larger monitors and possibly full screen viewers. */ /* END LARGEST DEVICES - 1240px */ /* -------------------------------------------------------------------------------------------------------------------------------------------------- ----------------------------------------------------------------------------------------------------------------------------------------------------- RETINA (2x RESOLUTION DEVICES) This applies to the retina iPhone (4s) and iPad (2,3) along with other displays with a 2x resolution. */ /* -------------------------------------------------------------------------------------------------------------------------------------------------- ----------------------------------------------------------------------------------------------------------------------------------------------------- iPHONE 5 MEDIA QUERY iPhone 5 or iPod Touch 5th generation styles (you can include your own file if you want) */ /* ------------------------------------------------------------------------- PRINT STYLESHEET */ @media print { /* 052022 ShawnO: The code below essentially changes everything to black and white in print mode, which was screwing up our PDF's (which are generated in print mode). It also hurts readability on tables that use background colors for alternate rows. So, I am removing it. * { background: transparent !important; color: black !important; text-shadow: none !important; filter: none !important; -ms-filter: none !important; }*/ /* Black prints faster: h5bp.com/s */ a { text-decoration: underline; } a:visited { text-decoration: underline; } /* 012721 ShawnO: For PDF's with embedded links, use a special CSS for links. */ /* Note: Browsers automatically ignore coloring on links in print mode if you don't use the Important flag. */ .PDFWithLinks a { color: #18e13c !important; } .PDFWithLinks a:visited, .PDFWithLinks a:active { color: #18e13c !important; } /* a[href]:after { content: " (" attr(href) ")"; } */ abbr[title]:after { content: " (" attr(title) ")"; } .ir a:after { content: ""; } a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; } /* Don't show links for images, or javascript/internal links */ pre, blockquote { border: 1px solid #999; page-break-inside: avoid; } thead { display: table-header-group; } /* h5bp.com/t */ tr { page-break-inside: avoid; } img { page-break-inside: avoid; max-width: 100% !important; } @page { margin: 0.5cm; } p, h2, h3 { orphans: 3; widows: 3; } h2, h3 { page-break-after: avoid; } /* -------- */ /* 100114 DougC: Quickly create a TearSheet for printing styles. But this helps on all pages.* /* Hide some specific named areas when printing */ /* Note: want Logo to still show, so just hide the header stuff without the logo: */ #master_header_for_printing { display: block !important; } #master_header_mobile, #master_header_large, footer, .hideOnPrint { display: none !important; } } /* ----------------------------------------------------------------------------------------------- * _HRJobApp.css * * 040722 DustinP: Created for housing HR Job Application SCSS * ----------------------------------------------------------------------------------------------- */ .HRApplication_Instructions { margin-top: 10px; padding: 5px; } .HRApplication_Title { background-color: #C0C0C0; padding: 5px; } .HRApplication_SectionHeader { background-color: #DDDDDE; font-size: larger; font-weight: bold; margin-bottom: 10px; margin-top: 20px; padding: 5px; } .HRApplication_FieldContainer { display: inline-block; margin-bottom: 3px; vertical-align: top; } .HRApplication_FieldHint { font-size: small; font-style: italic; } .HRApplication_ShortField { width: 50px; text-align: left; } .HRApplication_ShortFieldView { min-width: 50px; text-align: left; } .HRApplication_MediumField { width: 150px; text-align: left; } .HRApplication_MediumFieldView { min-width: 150px; text-align: left; } .HRApplication_LongFieldField { width: 250px; text-align: left; } .HRApplication_LongFieldFieldView { min-width: 250px; text-align: left; } .HRApplication_ExLongFieldField { width: 300px; text-align: left; } .HRApplication_ExLongFieldFieldView { min-width: 300px; text-align: left; } .HRApplication_GroupingDiv { border-top: 2px dashed #DDDDDD; margin-bottom: 8px; margin-top: 8px; padding: 5px; } .HRApplication_AppTable { margin-left: 65px; } .HRApplication_AppTable td, .HRApplication_AppTable th { padding: 3px; border: 1px solid black; } .HRApplication_HistoryTable td, .HRApplication_HistoryTable th { border: 1px solid black; padding: 2px; } /* ----------------------------------------------------------------------------------------------- * _ClaritySelector.css * * 040722 DustinP: Created for housing Clarity Selector SCSS * ----------------------------------------------------------------------------------------------- */ .ClaritySelectorContainer { /* This is the container that holds the entire control. */ border: 1px solid black; border-radius: 3px; display: inline-block; border-collapse: collapse; margin-bottom: 10px; /* Note: Need this or arrow will overlap controls below it. */ } .ClaritySelectorContainer div:not(:first-child) { /* This puts a vertical line between items. */ border-left: 1px solid black; } .ClaritySelectorContainer_UpsideDown { margin-top: 12px; } .ClaritySelectorButton { /* This is the style for a single item (unselected by default) */ float: left; text-align: center; position: relative; padding: 3px; cursor: pointer; } .ClaritySelectorButton.Selected { /* This is the style of a selected item */ background-color: black; color: white; } .ClaritySelectorButton.Selected .ClaritySelectorIndicator { /* This is the style of the indicator when it is selected. */ margin-top: -23px; vertical-align: top; color: black; font-size: 20px; } .ClaritySelectorIndicator { /* This controls the indicator (arrow) below an item. It doesn't show anything until it is selected. */ left: 0; right: 0; width: 100%; position: absolute; bottom: -16px; display: inline-block; color: rgba(0, 0, 0, 0); } .ClaritySelectorIndicator_UpsideDown { bottom: auto; top: 6px; }