body {
   color: #707070;
   background-repeat: no-repeat;
}
html {
   font-family: Arial, Helvetica, sans-serif;
   font-size: 12px;
   color: #707070;
   background-color: #98B9D3;
   background: url(../images/umhlanga-background.jpg) no-repeat center top fixed; -webkit-background-size: cover;
   -moz-background-size: cover;
   -o-background-size: cover;
   background-size: cover;
}

form {
   margin: 20px 0;
}
p {
   margin: 20px 0;
}
hr {
   border: 0px;
   background-color: #4D87B5;
   color: #4D87B5;
   height: 1px;
}
.red {
   color:#FF0000;
}
#preloadedImages {
   width: 0px;
   height: 0px;
   display: inline;
   background-image: url(http://www.umhlangatourism.co.za/images/slider/hpslider-1.jpg);
   background-image: url(http://www.umhlangatourism.co.za/images/slider/hpslider-2.jpg);
   background-image: url(http://www.umhlangatourism.co.za/images/slider/hpslider-3.jpg);
   background-image: url(http://www.umhlangatourism.co.za/images/slider/hpslider-4.jpg);
   background-image: url(http://www.umhlangatourism.co.za/images/slider/hpslider-5.jpg);
   background-image: url(http://www.umhlangatourism.co.za/images/background.jpg);
   background-image: url(http://www.umhlangatourism.co.za/images/umhlanga-tourism-logo.jpg);
}

/** RESPONSIVE STYLES ------------------------------------------------------------------ **/

@media only screen and (min-width: 769px) { /*navigation menu >= 540px*/
   
   #leftMenu {
      padding: 0;
      margin: 0;
      color: #989890;
      float: left;
   }
   .menu {
      padding: 0;
      margin: 0;
   }
   .menu li a:link,
   .menu li a:visited {
      color: #333;
      text-decoration: none;
   }
   .menu li a:active,
   .menu li a:hover {
      color: #fff;
      text-decoration: none;
   }
   .menu ul {
      padding: 0;
      margin: 0;
      list-style: none;
   }
   .menu li.menuTitle:nth-of-type(1) {
      padding: 29px 10px 5px 20px;
   }
   .menu li.menuTitle {
      padding: 5px 10px 5px 20px;
      color: #fff;
      font-size: 14px;
      background: #0E3F7A;
      text-align: left;
      border-bottom: none; 
   }
   .menu li.menuTitle a {
      color: #fff;
      border-bottom: none; 
   }
   
   .menu li {
      padding: 3px 0px 3px 20px;
      margin: 0;
      color: #424040;
      font-size: 12px;
      list-style: none;
      border-bottom: 1px solid #D6D6FF; 
   }
   .menu li:hover {
      background: #CC0000;
   }
   .menu li:hover a {
      color: #fff;
      background: #CC0000;
   }
   div.newsBanners {
      padding: 20px 18px 80px 18px;
      margin: 0;
      height: 100%;
      min-height: 100%;
      text-align: center;
      background: #98B9D3;
   }
   div.newsBanners a {
      padding: 20px 0;
      margin: 0;
      font-weight: bold;
      font-size: 22px;
      color: #fff;
      text-transform: uppercase;
   }

   
   
}

@media only screen and (max-width: 768px) { /*navigation menu < 540px*/
   
   #leftMenu {
      padding: 0;
      margin: 0;
      color: #989890;
   }
   .menu {
      padding: 0;
      margin: 0;
   }
   .menu li a:link,
   .menu li a:visited {
      color: #333;
      text-decoration: none;
   }
   .menu li a:active,
   .menu li a:hover {
      color: #fff;
      text-decoration: none;
   }
   .menu ul {
      padding: 0;
      margin: 0;
      list-style: none;
      text-align: center;
   }
   .menu li.menuTitle {
      padding: 5px 10px 5px 20px;
      color: #fff;
      font-size: 14px;
      background: #0E3F7A;
      text-align: left;
      border-bottom: none;
      display: block;
   }
   .menu li.menuTitle a {
      color: #fff;
      border-bottom: none; 
   }
   .menu li {
      padding: 3px 10px;
      margin: 0;
      color: #424040;
      font-size: 12px;
      list-style: none;
      display: inline-block;
      border-bottom: 1px solid #D6D6FF; 
   }
   .menu li:hover {
      background: #CC0000;
   }
   .menu li:hover a {
      color: #fff;
      background: #CC0000;
   }

   .padmenuItem {
      padding-right: 10px;
   }
   a.newsBanner {
      display: none;
   }
   div.newsBanners {
      padding: 20px 18px;
      margin: 0;
      height: 100%;
      min-height: 100%;
      text-align: center;
      background: #98B9D3;
   }
   div.newsBanners a {
      padding: 20px 0;
      margin: 0;
      font-weight: bold;
      font-size: 22px;
      color: #fff;
      text-transform: uppercase;
   }
   #content {
      width: 100%;
      padding: 0;
      margin: 0;
      vertical-align: top;
      border: 0px solid #000;
   }
   
   
}

@media only screen and (min-width: 1200px) {
   
   #logo {
      height: 303px;
      padding: 0;
      margin: 0;
      float: left;
   }
   .logoMid {
      height: auto;
      padding: 18px 0;
      text-align: center;
   }
   .logoMid img {
      height: 80%;
   }
   #banImages {
      height: 303px;
      padding: 0;
      margin: 0;
      float: right;
      overflow: hidden;
   }
   #slideshow { 
      margin: 0; 
      position: relative; 
      height: auto; 
      padding: 10px;
   }
   #slideshow > div { 
      position: absolute; 
      top: 0; 
      left: 0; 
      right: 0; 
      bottom: 0; 
   }
   #slideshow > div img { 
      width: 100%;
      height: auto; 
   }
   #socMediaBar div.socMedButtons {
      margin: 0 auto;
      width: 250px;
      text-align: center;
   }
   #content {
      padding: 0;
      vertical-align: top;
      float: right;
      border: 0px solid #000;
   }

}

@media only screen and (min-width: 992px)
                  and (max-width: 1199px)  {
   
   #logo {
      height: 303px;
      padding: 0;
      margin: 0;
      float: left;
   }
   .logoMid {
      height: auto;
      padding: 18px 0;
      text-align: center;
   }
   .logoMid img {
      height: 80%;
   }
   #banImages {
      height: 303px;
      padding: 0;
      margin: 0;
      float: right;
      overflow: hidden;
   }
   #slideshow { 
      margin: 0; 
      position: relative; 
      height: auto; 
      padding: 10px;
   }
   #slideshow > div { 
      position: absolute; 
      top: 0; 
      left: 0; 
      right: 0; 
      bottom: 0; 
   }
   #slideshow > div img { 
      width: 100%;
      height: auto; 
   }
   #socMediaBar div.socMedButtons {
      margin: 0 auto;
      width: 228px;
      text-align: center;
   }
   #content {
      padding: 0;
      vertical-align: top;
      float: right;
      border: 0px solid #000;
   }

}

@media only screen and ( min-width: 769px )
                  and (max-width: 991px)  { 
   
   #logo {
      width: 32.5%;
      padding: 0;
      margin: 0;
      float: left;
   }
   .logoMid {
      height: auto;
      padding: 18px 0;
      text-align: center;
   }
   div.logoMid img {
      height: 136px;
   }
   #banImages {
      width: 67.5%;
      height: 260px;
      padding: 0;
      margin: 0;
      float: right;
      overflow: hidden;
      clear: right;
   }
   #slideshow { 
      margin: 0; 
      position: relative; 
      height: auto; 
      padding: 10px;
   }
   #slideshow > div { 
      position: absolute; 
      top: 0; 
      left: 0; 
      right: 0; 
      bottom: 0; 
   }
   #slideshow > div img { 
      width: 100%;
      height: auto; 
   }
   #socMediaBar div.socMedButtons {
      margin: 0 auto;
      width: 250px;
      text-align: center;
   }
   #content {
      width: 66.8%;
      padding: 0;
      vertical-align: top;
      float: right;
      border: 0px solid #000;
   }
   
}

@media only screen and ( min-width: 540px )
                   and (max-width: 768px) {
   
   .container {
      width: 90%;
   }
   #logo {
      width: 100%;
      padding: 0;
      margin: 0;
   }
   .logoMid {
      height: auto;
      padding: 18px 0;
      text-align: center;
   }
   div.logoMid img {
      height: 136px;
   }
   #banImages {
      padding: 0;
      margin: 0;
      overflow: hidden;
      width: 100%;
   }
   #slideshow { 
      margin: 0;
      padding: 0;
      position: relative;
      height: 250px;       
   }
   #slideshow > div {
      width: 100%;
      margin: 0;
      padding: 0;
      position: absolute; 
      top: 0; 
      left: 0;
      bottom: 0;
      right: 0;
   }
   #slideshow > div img { 
      width: 100%;
      float: left;
   }
   #socMediaBar div.socMedButtons {
      margin: 0 auto;
      width: 250px;
      text-align: center;
   }
   

}

@media only screen and (max-width: 539px) {
   
   .container {
      width: 90%;
   }
   #logo {
      width: 100%;
      padding: 0;
      margin: 0;
   }
   .logoMid {
      height: auto;
      padding: 18px 0;
      text-align: center;
   }
   div.logoMid img {
      height: 136px;
   }
   #banImages {
      padding: 0;
      margin: 0;
      overflow: hidden;
      width: 100%;
   }
   #slideshow { 
      margin: 0;
      padding: 0;
      position: relative;
      height: 150px;       
   }
   #slideshow > div {
      width: 100%;
      margin: 0;
      padding: 0;
      position: absolute; 
      top: 0; 
      left: 0;
      bottom: 0;
      right: 0;
   }
   #slideshow > div img { 
      width: 100%;
      float: left;
   }
   #socMediaBar div.socMedButtons {
      margin: 0 auto;
      width: 250px;
      text-align: center;
   }


}




/** END RESPONSIVE STYLES --------------------------------------------------------- **/

/** SLIDER HPAGE ------------------------------------------- **/

.fullWidth.col-md-12 {
   width: 100%;
   padding: 0;
   margin: 0;
}
#slider {
   width: 100%;
   padding: 0;
   margin: 0;
   overflow: hidden;
   border: none;
}
#slider img {
   width: 100%;
   padding: 0;
   margin: 0;
}
.imgSlider {
   position: absolute;
   bottom: 30px;
   left: 0;
}
span.img-caption {
   display: block;
   float: left;
   text-align: left;
   color: #000;
   background: rgba(255,255,255,0.1);
   padding: 30px;
   margin: 0 60px; 
}

.bx-controls {
    display: none;
	border: 1px solid #000;
}

/** END SLIDER -------------------------------------------- **/

.clear:after {
   clear: both;
   content: "";
   display: table;
}
.container {
   height: 100%;
   min-height: 100%;
   margin: 20px auto;
   padding: 0;
   background-color: #FFFFFF;
   box-shadow: 0px 5px 18px #1A2E4F;
}


#topAddress {
   padding: 12px;
   color: #1651AA;
   background-color: #fff;
   text-align: center;
   z-index: 10;
}

.logoTop {
   padding: 10px 0;
   color: #fff;
   text-align: center;
   background: #4B88B5;
}

.logoBot {
   padding: 14px;
   background: #4B88B5;
}

#slideshow1 img {
   width: 100%;
   
}
.hpVignnette a:link,
.hpVignnette a:visited {
   color: #00477A;
   font-weight: bold;
   text-decoration: underline;
}
.hpVignnette a:hover,
.hpVignnette a:active {
   color: #ff0000;
   font-weight: bold;
   text-decoration: none;
}
.hpVignnette {
   color: #00477A;
   background: #E3EDF4;
   
}
#socMediaBar {
   padding: 8px 0px;
   background: #258dc8;
   background: -moz-linear-gradient(right,  #98B9D3 0%, #4B88B5 100%); /* FF3.6+ */
   background: -webkit-gradient(linear, left, right, color-stop(0%,#98B9D3), color-stop(100%,#4B88B5)); /* Chrome,Safari4+ */
   background: -webkit-linear-gradient(right,  #98B9D3 0%,#4B88B5 100%); /* Chrome10+,Safari5.1+ */
   background: -o-linear-gradient(right,  #98B9D3 0%,#4B88B5 100%); /* Opera 11.10+ */
   background: -ms-linear-gradient(right,  #98B9D3 0%,#4B88B5 100%); /* IE10+ */
   background: linear-gradient(to right,  #98B9D3 0%,#4B88B5 100%); /* W3C */
   filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#98B9D3', endColorstr='#4B88B5',GradientType=0 ); /* IE6-9 */
}

#socMediaBar div.socMedButtons img.twitButton {
   margin: 0 20px;
}
#socMediaBar .umhFest {
   font-weight: bold;
   font-size: 18px;
   color: #fff;
   vertical-align: middle;
   text-align: center;
   padding: 3px 0 0 0;
}
#socMediaBar .umhFest a:link,
#socMediaBar .umhFest a:visited {
   color: #fff;
   text-decoration: underline;
}
#socMediaBar .umhFest a:hover,
#socMediaBar .umhFest a:active {
   color: #19355D;
   text-decoration: underline;
}
#grey_dec {
   height: 100%;
   width: 203px;
   background-color: #D5E2EE;
   color: #DBE7F0;
}


#contact_form {
   float: right;
   margin-top: 20px;
   padding: 20px;
   height: auto;
   background: #d1d88b url(../images/form_dec.jpg) bottom no-repeat;
}
.clearFix {
   clear: both;
   margin: 2px;
   padding: 5px;
}

#content .reciproLinks {
   padding: 8px 0;
   margin: 0;
}
#content .reciproLinks img {
   padding: 0;
   margin: 5px 0;
   float: left;
}
#content .reciproLinks h3 {
    padding: 10px 20px;
    margin: 0 20px;
    color: #fff;
    background: #0E3F7A;
}
#content .reciproLinks p {
   padding: 5px;
   margin: 10px 35px;
}


.plans a {
   text-decoration: none;
   font-weight: bold;
   color: #4D87B5;
}
.plans a:hover {
   text-decoration: none;
   font-weight: bold;
   color: #000080;
}
.no_border {
   border-right: none;
}
.sitemap_padding {
   padding: 10px 0px 10px 20px;
   margin: 10px 0px 0px 15px;
}

#content div.padContent {
   padding: 0;
}
#content a {
   text-decoration: none;
   color: #003399;
}
#content a:hover {
   text-decoration: none;
   color: #000000;
}
#slideshow h1.pageHead {
   width: 100%;
   font-weight: bold;
   font-size: 22px;
   color: #fff !important;
   padding: 15px 20px;
   margin: 0 ;
   display: block;
}
h1.hPageHead {
   width: 100%;
   font-weight: bold;
   font-size: 28px;
   color: #fff;
   background: #4B88B5;
   padding: 15px 20px;
   margin: 0 ;
   text-align: center;
   display: block;
}
#slideshow p {
   padding: 5px 12px;
}
#content h1.pageHead {
   width: 100%;
   font-weight: bold;
   font-size: 22px;
   color: #fff;
   padding: 15px 20px;
   margin: 0 ;
   background: #4B88B5;
   display: block;
}
#content h2 {
   font-weight: bold;
   font-size: 20px;
   text-transform: uppercase;
   color: #4B88B5;
   padding: 15px 0 10px 0;
   margin: 10px 20px;
   border-bottom: 1px #D6D6FF solid;
}
#content h3 {
   font-weight: bold;
   font-size: 16px;
   color: #1E3A6C;
   padding: 10px 20px 10px 20px;
   text-transform: uppercase;
}
#content h3 a:link,
#content h3 a:visited {
   font-weight: bold;
   font-size: 16px;
   color: #1E3A6C;
   text-transform: uppercase;
}
#content h4 {
   font-weight: bold;
   font-size: 14px;
   color: #1E3A6C;
   padding: 5px 20px 5px 20px;
   text-transform: uppercase;
}
#content h5 {
   font-weight: bold;
   font-size: 12px;
   color: #003399;
   padding: 5px 20px 5px 20px;
}
#content {
   font-weight: normal;
   font-size: 14px;
}
#content strong,
#content b {
   font-weight: bold;
}
#content ul {
   padding: 5px 25px 5px 25px;
}
#content p {
   padding: 10px 20px 10px 20px;
}
#content table {
   margin: 0 40px 0 20px;
   padding: 0 20px;
}
#content tr {
   margin: 0 40px 0 20px;
   padding: 4px;
}
#content td {
   margin: 0;
   padding: 4px;
}
.trailPics {
   margin: 10px 0;
   padding: 20px;
}
.trailPics img {
   margin: 5px;
   padding: 0;
   display: inline-block;
}
.body_text {
   font-size: 12px;
   font-weight: lighter;
   color: #808080;
}
.black {
   color: #000000;
}
.button {
   border: 1px #4D87B5 solid;
} 
.button:hover {
   border: 1px #003399 solid;
} 
ul {
   margin: 0px 0px 0px 15px; padding: 0px;
}
li {
   margin-bottom: 10px; margin-left: 15px; list-style-type: square;
}
.edge-container {
   width: 450px;
   height: 130px;
   display: table;
}
.edge-box {
   width: 450px;
   height: 60px;
   margin-right: 20px;
   float: left;
   text-align:left;
   padding: 0px 10px 10px 20px;
   font-size: 11px;
}
.box-container {
   width: 450px;
   height: 110px;
   display: table;
}
.box {
   width: 450px;
   height: 60px;
   margin-right: 20px;
   float: left;
   text-align:left;
   padding: 10px 10px 10px 20px;
   font-size: 11px;
}
.box a {
   font-size: 11px;
   font-weight: bold;
   color: #000000;
   text-decoration: none;
}
.box a:hover {
   font-size: 11px;
   font-weight: bold;
   color: #808080;
   text-decoration: none;
}
.thumb {
   margin: 11px 20px 0px 0;
   float: left;
}
#greensmart {
   position: absolute;
   top: 10px;
   left: 20px;
   width: 120px;
   height: 42px;
}
#footer {
   padding: 20px;
   background-color: #9ABBD6;
   clear: both;
}
#footer_text {
   padding: 0;
   font-size: 9px;
   color: #003399;
   text-align: right;
}
#footer_text a {
   color: #003399;
   text-decoration: none;
}
#terms a:hover {
   color: #000080;
   text-decoration: none;
}
#footer_text a:hover {
   color: #000080;
   text-decoration: none;
}
.fm-logo {
   float: right;
   margin: 4px 0px 5px 10px;
}
#exterior_images {
   position: absolute;
   top: 488px;
   left: 223px;
   width: 360px;
   height: 297px;
}
#exterior_thumbs {
   position: absolute;
   top: 485px;
   left: 25px;
   width: 135px;
   height: 200px;
   z-index: 10;
}
.exteriorcontainer{
   position: relative;
/*Add a height attribute and set to largest image's height to prevent overlaying*/
}

/*website */
.exterior img {
   background-color: transparent;
   margin-left: 0px;
   border: 0px solid #ffffff;
}

.exterior:hover {
   background-color: transparent;
   margin-left: 0px;
   border: 0px solid #ffffff;
}

.exterior:hover img {
   border: 0px solid #ffffff;
}
.exterior span { /*CSS for enlarged image*/
   position: absolute;
   padding: 0px;
   left: -400px;
   visibility: hidden;
   text-decoration: none;
   border: none;
}
.exterior span img { /*CSS for enlarged image*/
   border-width: 0;
   border: none;
}
.exterior:hover span { /*CSS for enlarged image*/
   visibility: visible;
   top: 3px;
   left: 198px; /*position where enlarged image should offset horizontally */
   z-index: 50;
   border: none;
}
/*end*/
.text-area {
   width: 205px;
   height: 120px;
   font-family: Arial, Helvetica, sans-serif;
   font-size: 12px;
   color: #333333;
}
.text-field {
   width: 155px;
   height: 16px;
   font-family: Arial, Helvetica, sans-serif;
   font-size: 12px;
   color: #333333;
}
#container #text_dec table tr td {
   color: #FFF;
}

.shadoEdge {
   max-width: 1200px;
   padding: 0;
   margin: 0 auto;
   -webkit-box-shadow: 1px 1px 5px 6px rgba(61, 61, 61, 0.45);
   -moz-box-shadow: 1px 1px 5px 6px rgba(61, 61, 61, 0.45);
   box-shadow: 0px 1px 5px 6px rgba(61, 61, 61, 0.45);
}

.style1 {
   font-family: Arial;
}
.auto-style1 {
   border-style: solid;
   border-width: 1px;
}
.style2 {
   text-align: center;
}
.whitetext{
   color:white;
}
a.menulink {
   display: block;
   width: 170px;
   text-align: left;
   text-decoration: none;
   font-family:arial;
   font-size:12px;
   color: #000000;
   BORDER: none;
   border: solid 1px #CCC;
}
a.menulink:hover {
   border: solid 1px #000;
   background-color:#C30;
}

.padUL {
   margin: 10px 0 0 0;
}
.memberBox:nth-child(1) {
   padding: 5px 10px 5px 10px;
   margin: 0;
   border-bottom: 1px solid #C9C9C9;
   clear: both;
   min-height: 160px;
   color: #222;
}
.memberBox {
   padding: 10px 0;
   margin: 10px 20px;
   border-bottom: 1px solid #C9C9C9;
   clear: both;
   min-height: 160px;
   color: #222;
}
.memberBox .logo {
   width: 140px;
   padding: 0;
   margin: 20px 20px 15px 20px;
   border: none;
   float: left;
}
.memberBox .img {
   width: 100%;
   padding: 0;
   margin: 20px 20px 15px 20px;
   border: none;
   float: left;
   clear: both;
}
#content table {
   margin: 0 20px;
   padding: 0;
}
/*iframe, object, embed {
        max-width: 100%;
}*/
.memberBox h2 {
   font-weight: bold;
   margin: 0;
   padding: 0;
}
.contactBox {
   padding: 0;
   margin: 0 20px;
   border-bottom: 1px solid #C9C9C9;
   clear: both;
   color: #222;
}
.showBox {
   border: 1px solid #000;
   padding: 0;
   margin: 0;
}