/*
Theme Name: Pretorius Familie Theme
Theme URI: https://pretoriusfamilie.info/
Author: Chris Pretorius
Author URI: https://pretoriusfamilie.info/
Description: A WordPress theme based on the Pretorius Familie website.
Version: 1.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: pretoriusfamilie-theme
*/

html {
  height: 100%;
}

body {
  height: 100%;
  margin: 0 auto;
  padding: 0;
  text-align: justify;
  font: 400 0.8em Verdana, Arial, sans-serif;
  line-height: 170%;
  background: #000 url('images/bg.jpg') repeat-x top left;
  color: #EEE;
  max-width: 1200px;
}

.gradient {
    margin: 0 auto;
    padding: 20px;
    background: #555 url('images/gradient.jpg') repeat-x bottom left;
    color: #EEE;
    border-radius: 5px;
    max-width: 1200px;
    text-align: justify;
}

h1 {
  clear: both;
  font: 700 2.5em "Trebuchet MS", serif;
  color: #FFF;
}

h2 {
  font: 400 1.5em "Trebuchet MS", serif;
  color: #FF9C40;
}

h2 a {
  color: #29E3FF;
}

h2 a:hover {
  color: #FFF;
}

h3 {
  font: 400 1.3em "Trebuchet MS", serif;
  color: #F8D766;
}

h4 {
  font: 700 1.2em "Trebuchet MS", serif;
  color: #F39F01;
}

h5 {
  font: 700 1.1em "Trebuchet MS", serif;
  color: #F17400;
}

h6 {
  font: 700 1em "Trebuchet MS", serif;
  color: #FF4B33;
}

h1, h2, h3, h4, h5, h6, p, dl {
  margin: 0;
  padding: 10px 15px;
}

a {
  color: #FD781D;
}

a:hover {
  color: #FFF;
}

ol, ul {
  margin: 10px 30px;
  padding: 0;
}

ol {
  color: #FC0;
}

ol span {
  color: #EEE;
}

del {
  color: #AAA;
}

code {
  margin: 10px 15px;
  padding: 10px;
  display: block;
  overflow: auto;
  font: 400 1em Courier, monospace;
  line-height: 120%;
  white-space: pre;
  background: #444;
}

acronym {
  cursor: help;
  border-bottom: 1px solid #777;
}

dl dt {
  font-weight: bold;
  color: #FFB323;
}

dl dd {
  margin-left: 0;
  padding-left: 45px; 
}

input,
textarea,
select {
  padding: 2px;
  font: 400 1em Verdana, sans-serif;
  color: #444;
  background: #EEE;
  border: 1px solid #444;
}

input:focus,
textarea:focus,
select:focus {
  color: #000;
  background: #E4F7FA;
  border: 1px solid #00DFFF;
}

blockquote {
  margin: 10px 15px;
  padding-left: 27px;
  background-color: #363636;  
  background-image: url('images/go.jpg');
  background-repeat: no-repeat;
  background-position: 5px 50%;  
}

#mainFrontTitleHeader
{
  position: absolute;
  text-align: right;
  padding: 15px;
  left: 20%;
  font: 700 1.5em "trebuchet ms", serif;
  letter-spacing: -3px;
  text-transform: lowercase;
  color: #FFF;
}

#footer {
  float: left;
  width: 100%;
  clear: both;
  margin-top: -3.8em;
  background: #000 url('images/footer.jpg') repeat-x top left;
}

/*do menus now*/
#mainMenu {
    text-align: left;
    background: #333; /* Dark background for the menu */
    padding: 10px 0;
}

#mainMenu .main-menu {
    list-style: none;
    margin: 0;
    padding: 0;
}

#mainMenu .main-menu li {
    display: inline-block;
    margin: 0 15px;
    position: relative; /* For dropdowns */
}

#mainMenu .main-menu li a {
    text-decoration: none;
    font: 700 1.2em "Trebuchet MS", sans-serif;
    color: #FFF;
    padding: 5px 10px;
    text-transform: lowercase;
}

#mainMenu .main-menu li a:hover,
#mainMenu .main-menu li a:focus {
    color: #FF9C40; /* Highlight color */
    border-top: 2px solid #FF9C40; /* Bottom border for hover */
}

#mainMenu .main-menu li.current_menu_item a,
#mainMenu .main-menu li.current_page_item a {
    color: #FF9C40; /* Highlight color */
    border-top: 2px solid #FF9C40; /* Bottom border for active link */
    text-decoration: none; /* Underline active page */
}

/* Dropdown menus */
#mainMenu .main-menu li ul {
    display: none;
    position: absolute;
    background: #444;
    list-style: none;
    margin: 0;
    padding: 10px;
    top: 100%; /* Aligns below the parent */
    left: 0;
    min-width: 150px;
}

#mainMenu .main-menu li:hover ul {
    display: block; /* Show dropdown on hover */
}

#mainMenu .main-menu li ul li {
    margin: 0;
    padding: 5px 0;
}

#mainMenu .main-menu li ul li a {
    color: #FFF;
    padding: 5px 10px;
    text-decoration: none;
}

#mainMenu .main-menu li ul li a:hover {
    color: #FF9C40;
    background: #555;
}
/*End menus*/