MediaWiki:Common.css

Note: After publishing, you may have to bypass your browser's cache to see the changes.

• Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
• Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
• Internet Explorer / Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5
• Opera: Press Ctrl-F5.

/* CSS placed here will be applied to all skins */
/* Basic style for the entire page */
body {
  padding: 20px;
  background-color: #fef9e9; /* Very light yellow background for a dreamy feel */
  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: linear-gradient(to right, #f9d423, #ff4e50); /* Gradient from soft yellow to pinkish red */
  margin: 0;
  padding: 20px; /* More space for better appearance */
  text-align: center; /* Center text */
  border-radius: 12px; /* Rounded corners for a modern look */
  box-shadow: 0 6px 12px rgba(0,0,0,0.2); /* Soft shadow for emphasis */
  font-size: 2.5em; /* Increased font size for importance */
  font-weight: bold; /* Highlight text */
  color: #fff; /* White text color for contrast */
}

/* Style for navigation menu */
#p-navigation {
  padding: 15px;
  background: #f7e6b6; /* Soft pastel yellow for navigation */
  border-radius: 8px; /* Rounded corners for a modern look */
  border-bottom: 3px solid #f9d423; /* Bright yellow bottom border */
  margin-bottom: 20px; /* Space below navigation */
  box-shadow: 0 4px 8px 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 12px; /* Space between list items */
}

/* Style for links in the navigation menu */
#p-navigation a {
  color: #ff6f61; /* Coral color for links */
  text-decoration: none; /* No underline for a modern look */
  font-weight: bold; /* Highlight links */
  transition: color 0.3s ease, text-decoration 0.3s ease; /* Smooth transition */
}

#p-navigation a:hover {
  text-decoration: underline; /* Underline on hover */
  color: #e64a19; /* Darker coral color on hover */
}

/* Style for main content area */
#bodyContent {
  padding: 20px;
  background: #ffffff; /* White background for contrasting content */
  border-radius: 12px; /* Rounded corners for a modern look */
  box-shadow: 0 6px 12px rgba(0,0,0,0.2); /* 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 */
  color: #6a1b9a; /* Deep purple color for list items */
}

/* Style for the footer */
#footer {
  padding: 15px;
  background: #f9d423; /* Bright yellow background for the footer */
  text-align: center; /* Center text */
  border-top: 3px solid #ff6f61; /* Coral top border */
  margin-top: 20px; /* Space above footer */
  box-shadow: 0 -4px 8px 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 */
  }
}