|
|
| Line 1: |
Line 1: |
| /* CSS placed here will be applied to all skins */ | | /* CSS placed here will be applied to all skins */ |
|
| |
|
| |
| /* Basic style for the entire page */
| |
| body {
| |
| padding: 20px;
| |
| background-color: #faf8e4; /* Very light yellow background for the page */
| |
| font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; /* Modern and readable font */
| |
| color: #333; /* Dark gray text color for good contrast */
| |
| line-height: 1.6; /* Improved text readability */
| |
| margin: 0;
| |
| }
| |
|
| |
| /* Style for the main banner */
| |
| #firstHeading {
| |
| background-color: #f7c87c; /* Soft yellow-orange for a prominent banner */
| |
| margin: 0;
| |
| padding: 20px; /* More space for better appearance */
| |
| text-align: center; /* Center text */
| |
| border-radius: 8px; /* Rounded corners for a modern look */
| |
| box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* Soft shadow for emphasis */
| |
| font-size: 2em; /* Increased font size for importance */
| |
| font-weight: bold; /* Highlight text */
| |
| color: #333; /* Dark gray text color for contrast */
| |
| }
| |
|
| |
| /* Style for navigation menu */
| |
| #p-navigation {
| |
| padding: 15px;
| |
| background-color: #fef8e4; /* Very light yellow background for navigation */
| |
| border-radius: 8px; /* Rounded corners for a modern look */
| |
| border-bottom: 3px solid #f7c87c; /* Soft yellow-orange bottom border */
| |
| margin-bottom: 20px; /* Space below navigation */
| |
| box-shadow: 0 2px 6px rgba(0,0,0,0.1); /* Soft shadow for separation */
| |
| }
| |
|
| |
| /* Navigation list style */
| |
| #p-navigation ul {
| |
| list-style: none; /* Remove default bullet points */
| |
| padding: 0; /* Remove default padding */
| |
| margin: 0; /* Remove default margin */
| |
| display: flex; /* Display list items in a row */
| |
| justify-content: center; /* Center align list items */
| |
| }
| |
|
| |
| /* Navigation link style */
| |
| #p-navigation li {
| |
| margin: 0 10px; /* Space between list items */
| |
| }
| |
|
| |
| /* Style for links in the navigation menu */
| |
| #p-navigation a {
| |
| color: #ff9800; /* Bright orange color for links */
| |
| text-decoration: none; /* No underline for a modern look */
| |
| font-weight: bold; /* Highlight links */
| |
| }
| |
|
| |
| #p-navigation a:hover {
| |
| text-decoration: underline; /* Underline on hover */
| |
| color: #e64a19; /* Darker orange color on hover */
| |
| }
| |
|
| |
| /* Style for main content area */
| |
| #bodyContent {
| |
| padding: 20px;
| |
| background-color: #ffffff; /* White background for contrasting content */
| |
| border-radius: 8px; /* Rounded corners for a modern look */
| |
| box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* Soft shadow for emphasis */
| |
| }
| |
|
| |
| /* Style for lists */
| |
| ul {
| |
| padding-left: 20px; /* Space on the left side of the list */
| |
| }
| |
|
| |
| li {
| |
| margin-bottom: 10px; /* Space between list items */
| |
| font-size: 1.1em; /* Increased font size for better readability */
| |
| }
| |
|
| |
| /* Style for the footer */
| |
| #footer {
| |
| padding: 15px;
| |
| background-color: #f7c87c; /* Soft yellow-orange for the footer */
| |
| text-align: center; /* Center text */
| |
| border-top: 3px solid #f7c87c; /* Soft yellow-orange top border */
| |
| margin-top: 20px; /* Space above footer */
| |
| box-shadow: 0 -2px 6px rgba(0,0,0,0.1); /* Soft shadow for separation */
| |
| font-size: 0.9em; /* Smaller font size for the footer */
| |
| color: #333; /* Dark gray text color for contrast */
| |
| }
| |
|
| |
| /* Responsive design for navigation menu on small screens */
| |
| @media (max-width: 768px) {
| |
| #p-navigation ul {
| |
| flex-direction: column; /* Stack list items vertically on smaller screens */
| |
| align-items: center; /* Center align list items */
| |
| }
| |
|
| |
| #p-navigation li {
| |
| margin: 8px 0; /* Space between list items when stacked */
| |
| }
| |
| }
| |