/*
 * csp.css — Utility classes to replace inline styles for CSP compliance
 * PCI-004: Removing 'unsafe-inline' from style-src
 *
 * Naming convention:
 *   Property abbreviations: m=margin, p=padding, d=display, ta=text-align,
 *     fw=font-weight, va=vertical-align, fs=font-size, bg=background-color,
 *     c=color, fl=float, w=width, h=height, bd=border
 *   Values: numbers in px, 'n' for none, 'b' for block, 'i' for inline,
 *     'ib' for inline-block, 'h' for hidden
 *   Directions: t=top, r=right, b=bottom, l=left, x=horizontal, y=vertical
 */

/* ===== Display ===== */
.dn { display: none; }
.di { display: inline; }
.db { display: block; }
.di { display: inline; }
.dib { display: inline-block; }

/* ===== Margin: bottom ===== */
.mb0  { margin-bottom: 0; }
.mb4  { margin-bottom: 4px; }
.mb5  { margin-bottom: 5px; }
.mb10 { margin-bottom: 10px; }
.mb0-pb0 { margin-bottom: 0; padding-bottom: 0; }
.mt0-mb0-pt0-pb0 { margin-top: 0; margin-bottom: 0; padding-top: 0; padding-bottom: 0; }
.mt10-p0-w750 { margin-top: 10px; padding: 0; width: 750px; }

/* ===== Margin: top ===== */
.mt0   { margin-top: 0; }
.mt4   { margin-top: 4px; }
.mt5   { margin-top: 5px; }
.mt10  { margin-top: 10px; }
.mt30  { margin-top: 30px; }
.mt-5  { margin-top: -5px; }

/* ===== Margin: left ===== */
.ml10 { margin-left: 10px; }
.ml20 { margin-left: 20px; }
.ml15 { margin-left: 15px; }
.ml350 { margin-left: 350px; }

/* ===== Margin: right ===== */
.mr10 { margin-right: 10px; }

/* ===== Margin: compound ===== */
.m0        { margin: 0; }
.m0-p0     { margin: 0; padding: 0; }
.m0-10     { margin: 0 10px; }
.m0-0-0-10 { margin: 0 0 0 10px; }
.m0-0-0-10-p0 { margin: 0 0 0 10px; padding: 0; }
.m0-0-0-20 { margin: 0 0 0 20px; }
.m0-0-10-0 { margin: 0 0 10px 0; }
.m0-0-10-0-p0 { margin: 0 0 10px 0; padding: 0; }
.m0-20-0-0 { margin: 0 20px 0 0; }
.m0-0-5-0  { margin: 0 0 5px 0; }
.m10-0-5-0 { margin: 10px 0 5px 0; }
.m10-0-5-5 { margin: 10px 0 5px 5px; }
.m10-0-5-10 { margin: 10px 0 5px 10px; }
.m20-0-5-0 { margin: 20px 0 5px 0; }
.m5-0-5-5  { margin: 5px 0 5px 5px; }
.m5-0-25-5 { margin: 5px 0 25px 5px; }
.mx20      { margin-left: 20px; margin-right: 20px; }
.mb10-fwb  { margin-bottom: 10px; font-weight: bold; }
.mtb0-ptb0 { margin-top: 0; margin-bottom: 0; padding-top: 0; padding-bottom: 0; }
.m0p0 { margin: 0; padding: 0; }

/* ===== Padding ===== */
.p0    { padding: 0; }
.p10   { padding: 10px; }
.pl0   { padding-left: 0; }
.pl5   { padding-left: 5px; }
.pl10  { padding-left: 10px; }
.pl150 { padding-left: 150px; }
.pt10  { padding-top: 10px; }
.p10-0-5-0 { padding: 10px 0 5px 0; }

/* ===== Text ===== */
.tac  { text-align: center; }
.tar  { text-align: right; }
.tal  { text-align: left; }
.fwb  { font-weight: bold; }
.fs10 { font-size: 10pt; }
.fs11 { font-size: 11pt; }
.fsi  { font-style: italic; }
.fs13px { font-size: 13px; }
.td-u { text-decoration: underline; }

/* ===== Color ===== */
.c-red    { color: #FF0000; }
.c-dk-red { color: #990000; }
.c-white  { color: #FFFFFF; }
.bg-green { background-color: #B5CF88; }

/* ===== Vertical align ===== */
.vab { vertical-align: bottom; }
.vam { vertical-align: middle; }
.vab-p0-0-1-0 { vertical-align: bottom; padding: 0 0 1px 0; }

/* ===== Float ===== */
.fl-r { float: right; }
.fl-n { float: none; }

/* Radios laid out inline (e.g. Yes/No). dnu.css sets a GLOBAL
   input[type='radio'] { float:left; position:relative; top:5px } that is pulled in
   by district TemplateC/E on far more than DNU pages, which floats both radios to
   the left and strands their labels to the right ("O O  Yes No"). This opt-in class
   neutralises that for a specific pair. The selector is qualified with the same
   type+attribute as dnu.css and adds the class, giving (0,0,2,1) vs dnu.css's
   (0,0,1,1) -- a clean specificity win with no !important and no reliance on load
   order. (A bare .radioInline loses: an attribute selector ranks like a class, so
   input[type='radio'] already outranks a single class.) */
input[type='radio'].radioInline { float: none; position: static; vertical-align: middle; }

/* ===== Border ===== */
.bd-none { border: none; }
.bd-1-black { border: 1px solid black; padding: 1px; }

/* ===== Width ===== */
.w120  { width: 120px; }
.w130  { width: 130px; }
.w180  { width: 180px; }
.w300-h300 { width: 300px; height: 300px; }
.w950  { width: 950px; }

/* ===== Height ===== */
.h80 { height: 80px; }

/* ===== Overflow ===== */
.ofh { overflow: hidden; }
.ofx-h { overflow-x: hidden; }

/* ===== Compound utilities ===== */
.fl-r-mr10      { float: right; margin-right: 10px; }
.fl-r-m0-p0     { float: right; margin: 0; padding: 0; }
.tar-mt4        { text-align: right; margin-top: 4px; }
.dib-w120       { display: inline-block; width: 120px; }
.dib-w130-tar   { display: inline-block; width: 130px; text-align: right; margin: 0 20px 0 0; }
.fwb-m5-0-tar-w950 { font-weight: bold; margin: 5px 0; text-align: right; width: 950px; }
.mb4-mt0-c-red  { margin-bottom: 4px; margin-top: 0; color: #FF0000; }
.bd-none-ofh-w180-h80 { border: none; overflow: hidden; width: 180px; height: 80px; }
/* Compound selector on purpose: the inline style it replaces outranked the
   #mainContentColumn1 rule in landing.css/mapStyle.css. A bare class would lose to that id
   selector, so the id is included here to keep the original cascade outcome. */
#mainContentColumn1.m20-0-0-2 { margin: 20px 0 0 2px; }

/* ===== List styles (from Word-pasted content) ===== */
.ls-undef-ml05in  { list-style-type: none; margin-left: 0.5in; margin-bottom: 0; }
.ls-alpha-ml05in  { list-style-type: lower-alpha; margin-left: 0.5in; margin-bottom: 0; }
.ls-undef-ml-025in { list-style-type: none; margin-left: -0.25in; }

/* ===== Additional utilities (candidate landing) ===== */
.mb4-mt0      { margin-bottom: 4px; margin-top: 0; }
.mb4-mt4      { margin-bottom: 4px; margin-top: 4px; }
.mb4          { margin-bottom: 4px; }
.mt5-mb5      { margin-top: 5px; margin-bottom: 5px; }
.m5-0         { margin: 5px 0; }
.mt-5         { margin-top: -5px; }
.c-green-dk   { color: #49602C; }
.db-w100p     { display: block; width: 100%; }
.bd-1-black-tac { border: 1px solid black; text-align: center; padding: 1px; }
.w100p        { width: 100%; }
.bd-collapse-w75p { border-collapse: collapse; width: 75%; }

/* --- added 2026-07-29: candidate landing + newteacher landing conversions --- */
.bg-lt-blue   { background: #e7f3ff; }
.pl290        { padding-left: 290px; }
.db-mt3-p0    { display: block; margin: 3px 0 0 0; padding: 0; }
/* .blueBorder (landing.css) sets margin:0 0 10px and loads AFTER csp.css, so a bare .mt5
   loses to it at equal specificity. These divs carried style="margin-top:5px" before the
   CSP conversion, so this compound rule restores the original intent for exactly them. */
.blueBorder.mt5 { margin-top: 5px; }
.m5-p0-w750   { margin: 5px; padding: 0; width: 750px; }
.tal-mt4      { text-align: left; margin-top: 4px; }
.bg-slate     { background-color: #566374; }
.c-dk-red-fwb { color: #990000; font-weight: bold; }

/* --- added 2026-07-30: FTTR (Per-Diem Substitute Credential) conversions --- */
.fttrTitle    { font-size: 16px; font-weight: bold; margin: 15px 0 0 0; text-align: center; }
.fttrNotice   { font-weight: bold; margin: 30px 0 50px; text-align: center; }