/*

   Notes:
   A little wider than v9
   Used by Latin1 and Latin2
   
   At some point, all other testing pages should be updated to use this css file only
   
*/

/*----------------------------------------------------------------------------------------------------
  General Reset
  ---------------------------------------------------------------------------------------------------*/
body {
    background: white;
    color: black;
    margin: 0;
    padding: 0;
}
section {
    display: block;
    float: left;
    margin: 0;
    padding: 0;
    width: 100%;
}
h1,
h2,
h3,
h4 {
    font-family: arial, sans-serif;
    font-weight: normal;
}
ol {
    padding-left: 0px;
    list-style-position: inside;
}

/*----------------------------------------------------------------------------------------------------
  Top
  ---------------------------------------------------------------------------------------------------*/
#top {
    width: 960px;
    margin: 0 20px;
    padding: 0px;
}
header {
    margin: 0;
    padding: 0;
    background: #cccccc;
}
header h1 {
    margin: 0;
    padding: 15px 0 0 0;
    color: rgb(207, 207, 207);
}

/* Font Selection */
#fonts {
    width: 940px;
    margin: 0;
    padding: 0;
    padding-top: 10px;
    top: 0px;
    left: 20px;
    position: fixed;
    background: none;
    border: none;
}
#fonts li {
    display: inline;
    list-style: none;
    margin: 0 16px 0 0;
    padding: 0;
    cursor: pointer;
}
#fonts li a {
    text-decoration: none;
}
#fonts li.active a {
    text-decoration: underline;
}



/* OT Features Menu */
#otfeatures {
    float: left;
    width: 960px;
    margin: 0px 20px 10px;
    padding: 0px 0px 8px;
    background: #bababa;
    font: normal 13px/13px "Lucida Grande", "Lucida Sans Unicode", arial,
        sans-serif !important;
}
#otfeatures table td {
    padding: 4px 20px;
}
#csscode {
    margin: 0;
    padding: 0;
    font: normal 10px/10px "Lucida Grande", "Lucida Sans Unicode", arial,
        sans-serif;
}

/*-----------------------------------------------------------------------------------------------------
  Content
  ---------------------------------------------------------------------------------------------------*/
#custom {
    margin: 0;
    padding: 0;
}
#custom p {
    margin: 0;
    padding: 0;
}
#custom p.sizelabel {
    font: normal 10px/10px "Lucida Grande", "Lucida Sans Unicode", arial,
        sans-serif !important;
    color: #666;
}

/* Navigation */
ul.tabNavigation {
    width: 960px;
    overflow: hidden;
    list-style: none;
    margin: 2px 20px;
    padding: 0;
    font: normal 15px/15px "Lucida Grande", "Lucida Sans Unicode", arial,
        sans-serif !important;
}
ul.tabNavigation li {
    float: left;
    padding: 0;
    margin: 0;
}
ul.tabNavigation li a {
    display: block;
    padding: 2px 5px 7px 0;
    margin: 2px 4px 2px 0px;
    color: #000;
    text-decoration: none;
    background-color: none;
}
ul.tabNavigation li a.selected,
ul.tabNavigation li a:hover {
    color: #000;
    background-color: none;
    text-decoration: underline;
}
ul.tabNavigation li a:focus {
    outline: 0;
}

/* Default Styles for all tabs */
div.tabs > div {
    padding: 20px;
}

/* Is this rule still used? If no longer used then it can be removed... */
div.tabs > div h2 {
    margin-top: 0;
}

/* Rules for changing case*/
.lowercase {
    text-transform: lowercase;
}
.capitalized {
    text-transform: capitalize;
}
.uppercase {
    text-transform: uppercase;
}

/*-----------------------------------------------------------------------------------------------------
  Tab Specific Rules:
  - If the rule is used in multiple tabs, put it here
  - If the rule is only used in one specific tab and nowhere else, put it inline into the tab html
  ---------------------------------------------------------------------------------------------------*/

/* Used in Text previews in multiple Tabs */
.textsettingCol1 {
    width: 460px;
    float: left;
}
.textsettingCol2 {
    width: 460px;
    float: right;
}





/*
     FILE ARCHIVED ON 19:12:04 Oct 11, 2023 AND RETRIEVED FROM THE
     INTERNET ARCHIVE ON 14:51:40 Apr 13, 2024.
     JAVASCRIPT APPENDED BY WAYBACK MACHINE, COPYRIGHT INTERNET ARCHIVE.

     ALL OTHER CONTENT MAY ALSO BE PROTECTED BY COPYRIGHT (17 U.S.C.
     SECTION 108(a)(3)).
*/
/*
playback timings (ms):
  captures_list: 0.724
  exclusion.robots: 0.071
  exclusion.robots.policy: 0.062
  cdx.remote: 0.058
  esindex: 0.01
  LoadShardBlock: 424.564 (3)
  PetaboxLoader3.resolve: 357.559 (4)
  PetaboxLoader3.datanode: 205.768 (4)
  load_resource: 228.793
*/

/* General styles for the range input */
input[type="range"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 100%;
    margin: 5px 0 12px 0;
    background: transparent;
}

/* Style the track (line) */
input[type="range"]::-webkit-slider-runnable-track {
    width: 100%;
    height: 1px;
    background: rgb(209, 209, 209);
    border: none;
}

input[type="range"]::-moz-range-track {
    width: 100%;
    height: 1px; /* Set track height to 1px */
    background: rgb(135, 135, 135); /* Track color */
    border: none;
}

input[type="range"]::-ms-track {
    width: 100%;
    height: 1px; /* Set track height to 1px */
    background: transparent; /* Transparent for IE */
    border: none;
    color: transparent; /* Hide default text in IE */
}

/* Style the thumb (circle) */
input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none; /* Remove default thumb */
    height: 12px; /* Thumb height */
    width: 12px; /* Thumb width */
    margin-top: -5.5px; /* Center the thumb on the track */
    background: rgb(255, 255, 255); /* Thumb color */
    border-radius: 50%; /* Make it circular */
    cursor: pointer; /* Cursor on hover */
    border: none;
    border: 1px solid rgb(146, 146, 146);
}

input[type="range"]::-moz-range-thumb {
    height: 12px; /* Thumb height */
    width: 12px; /* Thumb width */
    background: rgb(255, 255, 255); /* Thumb color */
    border-radius: 50%; /* Make it circular */
    cursor: pointer; /* Cursor on hover */
    border: none;
}

input[type="range"]::-ms-thumb {
    height: 12px; /* Thumb height */
    width: 12px; /* Thumb width */
    background: #000000; /* Thumb color */
    border-radius: 50%; /* Make it circular */
    cursor: pointer; /* Cursor on hover */
    border: none;
}

/* Hide the track in IE */
input[type="range"]::-ms-track {
    background: transparent;
    border-color: transparent;
    color: transparent;
}

/* Focus styles */
input[type="range"]:focus {
    outline: none; /* Remove focus outline */
}

/* Remove focus outline for the thumb */
input[type="range"]::-webkit-slider-thumb:focus {
    outline: none; /* Remove focus outline */
}

/* Adjusted Thumb Size to 3px */
input[type="range"]::-webkit-slider-thumb {
    height: 13px;
    width: 13px;
    margin-top: -6px; /* Adjust margin to center thumb */
    /* Other styles remain the same */
}

input[type="range"]::-moz-range-thumb {
    height: 13px;
    width: 13px;
    /* Other styles remain the same */
}

input[type="range"]::-ms-thumb {
    height: 13px;
    width: 13px;
    /* Other styles remain the same */
}

/*-----------------------------------------------------------------------------------------------------
  Multi-font system styles (moved from HTML)
  ---------------------------------------------------------------------------------------------------*/

/* Selection styles */
*::selection {
    background-color: #ffb7b7;
    color: #000;
}

/* Body and label styles */
body,
.sizelabel,
#custom p.sizelabel {
    font-family: Arial !important;
    font-size: 10px !important;
    font-weight: bold !important;
    color: black !important;
}

/* Text line styles */
.textline {
    font-family: initial;
    font-size: initial;
    font-weight: normal;
    color: initial;
}

.textline:focus {
    outline: none;
}

/* Header styles */
#top header {
    background-color: white !important;
}

#top h1 {
    font-family: Arial;
    font-size: 10px;
    font-weight: bold;
    color: rgb(207, 207, 207);
    text-align: left;
    padding: 15px 0 0 0;
}

/* Navigation link styles */
ul li a {
    font-family: Arial !important;
    font-size: 10px !important;
    font-weight: bold !important;
    color: black !important;
    background-color: none !important;
}

ul.tabNavigation li a.selected,
ul.tabNavigation li a:hover {
    font-family: Arial !important;
    font-size: 10px !important;
    font-weight: bold !important;
    color: black !important;
    background-color: none !important;
}

ul.tabNavigation li a {
    font-family: Arial !important;
    font-size: 10px !important;
    font-weight: bold !important;
    color: black !important;
    background-color: none !important;
}

/* Content editable focus styles */
div[contenteditable="true"]:focus {
    outline: none;
}

/* Drag and drop visual feedback */
body.drag-over {
    background-color: rgba(255, 255, 255, 0.3) !important;
    position: relative;
}

body.drag-over::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(255, 255, 255, 0.3);
    z-index: 9999;
    pointer-events: none;
}

/* Letter spacing indicator styles */
.letter-spacing-indicator {
    position: fixed;
    z-index: 10000;
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 12px;
    font-weight: bold;
    color: white;
    pointer-events: none;
    user-select: none;
    font-family: Arial, sans-serif;
    white-space: nowrap;
}

.letter-spacing-indicator.positive {
    background-color: rgba(41, 116, 255, 0.35); /* Blue with 35% opacity */
}

.letter-spacing-indicator.negative {
    background-color: rgba(255, 69, 41, 0.35); /* Orange with 35% opacity */
}