/* -------------------------------
 CSS file for krugertours.co.za
 (C)2014 Jan Kaluza (web designer)
 updated May 2017
------------------------------- */

@font-face {
  font-family: 'Aleo';
  src: url('Aleo-Regular.eot');
  src: url('Aleo-Regular.eot?#iefix') format('embedded-opentype'),
    url('Aleo-Regular.woff') format('woff'),
    url('Aleo-Regular.ttf') format('truetype'),
    url('Aleo-Regular.svg#aleoregular') format('svg');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'Luxi';
  src: url('luxisb.eot');
  src: url('luxisb.eot?#iefix') format('embedded-opentype'),
    url('luxisb.woff') format('woff'),
    url('luxisb.ttf') format('truetype'),
    url('luxisb.svg#luxi_sansbold') format('svg');
  font-weight: normal;
  font-style: normal;
}

html { padding: 0; margin: 0; }

body {
  font-size: 100%;
  font-family: "Aleo", Arial, Helvetica, sans-serif;
  line-height: 1.3em;
  padding: 0; margin: 0;
  background: #fefefe url(../images/bg-weave-01.png);
}
a {
  color: #669;
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}
h1 { font-size: 1.6em; }
h2 { font-size: 1.5em; }
h3 { font-size: 1.4em; }
h4 { font-size: 1.3em; }
i { font-style: italic; }
b { font-weight: bold; }

.smlcap { font-variant: small-caps; }
.picttl { font-size:0.75em; line-height: 0.85em; }
.s70 { font-size: 0.7em; line-height: 0.9em; }

/* structure */
/*-----------*/
#pagewrap {
  padding: 5px;
  width: 960px;
  margin: 20px auto;
  border: #ffffff 0px solid;
  border-radius: 8px;
  -moz-border-radius: 8px;
  -webkit-border-radius: 8px;
  background: #fefefe;
}
#header {
  padding: 0px;
  border: #ffffff 0px solid;
  border-radius: 8px;
  -moz-border-radius: 8px;
  -webkit-border-radius: 8px;
  background: #cc6 url(../images/bgtop3.gif);
}
#navmenu {
  width: 200px;
  float: left;
  padding: 5px;
  border: #ffffff 0px solid;
  border-radius: 8px;
  -moz-border-radius: 8px;
  -webkit-border-radius: 8px;
}

#content {
  width: 680px;
  float: left;
  padding: 5px 15px;
  margin: 0px 5px 5px 5px;
}
#content p {
  line-height: 1.4;
  margin-top: 0.1em;
  margin-bottom: 0.3em;
}
#footer {
  clear: both;
  padding: 0 15px;
  border: #ffffff 0px solid;
  border-radius: 8px;
  -moz-border-radius: 8px;
  -webkit-border-radius: 8px;
}

/* media queries */
/*---------------*/
/* for 980px or less */
@media screen and (max-width: 980px) {
  #pagewrap { width: 94%; }
  #navmenu { width: 21%; padding: 1% 4%; }
  #content {
    width: 61%;
    padding: 1% 4%;
    margin: 0px 0px 5px 5px;
    float: right;
  }
}

/* for 700px or less */
@media screen and (max-width: 600px) {
  #navmenu { width: auto; float: none; }
  #content { width: auto; float: none; margin-left: 0px; 	}
}

/* for 480px or less */
@media screen and (max-width: 480px) {
  body { font-size: 1.2em; }
  header { height: auto; }
  h1 { font-size: 24px; }
}

/* additional styling */
.hdrimg {
  max-width: 100%;
  height: auto;
  width: auto\9; /* ie8 */
}

#navmenu {
  background: #8C4;
  font-family: "Luxi", Helvetica, Arial, sans-serif;
}
#navmenu ul {
  padding: 0;
  margin: 0;
  width: 96%;
}
#navmenu ul li {
  display: block;
  list-style-type:none;
  padding-left:10px;
  font-size: 1.1em; /* 0.9em; */
  line-height: 1.4; /* 1.2em; */
  /* font-weight: bold; */
  /* background: #693; */
  color: black;
}
#navmenu ul > ul li {
  display: block;
  list-style-type:none;
  padding-left: 10px;
  font-size: 0.9em; /* 0.7em; */
  line-height: 1.2;
  /* font-weight: bold; */
  /* background: #693;*/
  color: black;
}
#navmenu ul li a.active {
  background: #693; /* #462; */
  color: white;
}
#navmenu ul li a:hover {
  background: #693; /* #462; */
  color: #EE9;
}
#navmenu ul > ul li a.active {
  background: #693; /* #462; */
  color: white;
}
#navmenu ul > ul li a:hover {
  background: #693; /* #462; */
  color: #EE9;
}

#header, #navmenu, #content {
  margin-bottom: 5px;
}

#pagewrap, #navmenu, #footer { /* #header, #content, */
  border: solid 1px #ccc;
}

#footer {
  background: #9cf;
  font-size: 0.7em;
  text-justify: center;
}

img {
  max-width: 100%;
  height: auto;
  width: auto\9; /* ie8 */
}

/* colours and span classes */
/*--------------------------*/

/* Background "highlighter" classes */
.hlwht    { background-color:#ffffff; }
.hlyel    { background-color:#fcfc99; }
.hlora    { background-color:#ffcf99; }
.hlcya    { background-color:#99fcfc; }
.hlpnk    { background-color:#fcccfc; }
.hlpur    { background-color:#cc99ff; }
.hlred    { background-color:#ff9999; }
.hlgrn    { background-color:#99ff99; }
.hlblu    { background-color:#9999ff; }
.hlgry    { background-color:#999999; }
.hlblk    { background-color:#333333; }

/* forefround text color classes */
.fgred    { color:#ff0000; }
.fgblu    { color:#0000ff; }
.fggrn    { color:#00ff00; }
.fgcya    { color:#00ffff; }
.fgmag    { color:#ff00ff; }
.fgyel    { color:#ffff00; }
.fgblk    { color:#000000; }
.fggr3    { color:#333333; }
.fggr6    { color:#666666; }
.fggr9    { color:#999999; }
.fggrC    { color:#cccccc; }
.fgwht    { color:#ffffff; }
.fgora    { color:#cccc00; }