/* Css for Amanda drawing blah blah*/
/* Minor edit for Git tracking */
/* Ensure this is linked in your HTML : */
/* 1. The Container for your drawing and labels */
.drawing-container {
position: relative; /* CRITICAL: Establishes context for absolute children */
display: block; /* Makes it shrink-wrap its content (the base image) */
max-width: 100%;
/* Add a border or background here temporarily if you want to visualize its size */
/* border: 1px dashed red; */
}
/* 2. Styling for BOTH image elements within the container */
.drawing-container img {
max-width: 100%; /* CRITICAL: Makes images responsive within the container */
height: auto; /* CRITICAL: Maintains aspect ratio */
display: block; /* Removes extra space below image */
/* Position for overlaying. They will stack exactly on top of each other. */
position: absolute;
top: 0;
left: 0;
}
/* 3. Specific styling for the base image */
#baseDrawing {
position: relative; /* CRITICAL: Keeps this image in flow to give container its height */
z-index: 1; /* Ensures it's below the labeled image and labels initially */
/* It also needs to be block as per .drawing-container img */
}
/* 4. Specific styling for the labeled image (overlay) */
#labeledDrawing {
z-index: 2; /* Sits on top of the base image */
/* It's already position: absolute; from .drawing-container img
Below: postion button. Tweak top and left.*/
}
#toggleLabels {
position: absolute; /* Allow positioning relative to parent */
top: 10px; /* 10 pixels from the top of the container */
left: 10px; /* 10 pixels from the left of the container */
z-index: 10; /* Ensure it's above images and labels */
/* Add any other styling you want for the button here,
like padding, background-color, border, font-size, etc. */
padding: 8px 15px; /* Example padding */
background-color: #6475B4; /* Example background color */
color: white; /* Example text color */
border: none; /* Example no border */
border-radius: 5px; /* Example rounded corners */
cursor: pointer; /* Indicate it's clickable */
font-size: 1em; /* Example font size */
}
/* 5. Styling for the individual text labels */
.hotspot-label {
position: absolute; /* CRITICAL: Allows positioning with top/left percentages */
/* top and left percentages are set directly in the HTML 'style' attribute by your Python script */
background-color: rgba(255, 255, 255, 0.7); /* Semi-transparent background */
border: 0;
padding: 2px 5px;
border-radius: 3px;
font-size: 0.8em;
color: black;
text-decoration: none; /* Remove underline */
white-space: nowrap; /* Prevent label text from wrapping */
cursor: pointer;
z-index: 3; /* Ensures labels are on top of both images */
transition: background-color 0.2s, opacity 0.3s; /* Smooth transitions */
}
.hotspot-label:hover {
background-color: rgba(255, 255, 255, 1);
color: #000;
}
/* 6. The class used to hide elements with JavaScript
.hidden {
display: none !important; /* Added !important to force hiding
}
replacing above bit with this:*/
.invisible-image {
visibility: hidden;
}
.container {
display: flex;
align-items: center;
}
.image-container {
margin: 12px;
}
#index-container {
display: flex;
overflow-x: auto;
white-space: nowrap;
height: 60px;
}
.index-button {
width: 40px; /* Increase button width for demonstration */
height: 30px;
margin: 5px;
padding: 5px 10px;
text-decoration: none;
font-size: 20px;
color: #fff;
background-color: #DDDDD5;
border: 1px solid #000;
border-radius: 5px;
display: flex;
justify-content: center;
align-items: center;
}
/* Below - p text is 16px. I am temporarily increasing it*/
body p {
font-family: Georgia / serif;
font-size: 20px;
line-height: 1.5;
color: black;
margin-left: 25px
}
.larger-text {
font-size: 1.5em; /* Adjust the font size as needed */
}
*
/* CSS for caption Style */
.caption {
font-size: 12pt;
font-style: italic;
margin-top: 5px; /* Add margin to separate the image from the caption */
text-align: center; /* Center the caption text */
}
.heavy-rule {
border-style: solid; /* Explicitly set border style */
border-color: #6475B4;
border-width: 2px;
margin: 8; /* Remove default margin */
width: 100%;
}
/* Wider button for word:*/
.wider-button {
width: 40px; /* Increase button width for demonstration */
height: 30px;
margin: 5px;
padding: 5px 10px;
text-decoration: none;
font-size: 30px;
color: #fff;
background-color: #000;
border: 1px solid #000;
border-radius: 5px;
display: flex;
justify-content: center;
align-items: center;
}
/* Button Hover behavior
.index-button:hover {
background-color: #45a049;
}
header {
background-color: #333;
color: #fff;
text-align: center;
padding-top: 10px;
padding-right: 20px;
padding-left: 20px;
padding-bottom: 10px;
}
*/
/* Style for cells with simple text */
.text-cell {
vertical-align: top;
padding: 10;
border: none;
/* Add specific styling for cells with simple text */
}
/* Style for cells with a bordered box */
.bordered-box-cell {
border: 1px solid #515050;
padding: 4px;
}
.bordered-box-cell p {
margin: 0; /* Remove default margin on paragraphs */
vertical-align: top; /* Align paragraphs to the top */
}
/* This p seems to be overruled by body p*/
p {
font-size: 16px;
}
/* List for orientation infon in the morpholgy page */
td.custom-list-container {
border: 1px solid #000;
color: #535252;
padding: 2px;
margin-left: 20px; /* Adjust the left margin of