/* Sample FormBuilder CSS base */
form {margin-top:0}
form, td, th, li { font-size: 100%}
form div {margin-bottom:0}
fieldset div {
	margin-bottom:0.5em;
	margin-left:0em;
}
fieldset div div {
	margin-top:0.5em;
	margin-left:1em
}
fieldset {
	margin-bottom:1em;
	border:0px solid #F60;
	padding:0em
}
fieldset label {
	width:auto;
}
legend {
	color:#FFF;
	background:#F60;
	font-style:italic;
	font-size:1.2em;
	margin-bottom:0.5em;
	padding:0.2em;
	width:auto;
	border:0px solid #CCC;
        display: none;
}
textarea {
	margin: 0.5em 0;
	width:98%;
	height: 6em
}

/* Apply this class to text/select input fields with shorter labels
	to help alignment */
.short-label label {float:left; width:10em}
.short-label fieldset div input,
.short-label fieldset div select {width:16em}

/* Pretty up your Captcha image output */
.captcha {
	margin:0.5em 0;
	width:200px;
	text-align:center
}
.captcha img {border:1px solid #F60; margin-bottom:0.5em}
.captcha input {width:196px; margin-top:0.5em}

/* Just a bit more room for the Submit button */
.submit {margin-top:0.5em}

.contactform input {
	border: 1px dotted #333;
	width: 290px;
	font-size: 90%;
	padding: 4px;
	margin-bottom: 5px;
	background: white;
	margin-top: 5px;
}

.contactform .options input {
	border: 1px dotted #333;
	width: auto;
	font-size: 90%;
	padding: 4px;
	margin-bottom: 2px;
	background: white;
	margin-top: 5px;
}

.contactform .options select {
	border: 1px dotted #666;
	width: 90px;
	font-size: 90%;
	padding: 4px;
	margin-bottom: 2px;
	background: white;
	margin-top: 5px;
}
.contactform select {
	border: 1px dotted #666;
	width: 300px;
	font-size: 90%;
	padding:  5px;
	margin-bottom: 5px;
	background: white;
	margin-top: 5px;
}

.contactform .multiple select {
	border: 1px dotted #666;
	width: auto;
	font-size: 90%;
	padding:  5px;
	margin-bottom: 5px;
	background: white;
	margin-top: 5px;
}

.contactform input.checkbox {border: none;}
.contactform label {
	display: block;
	float: left;
	width: auto;
       margin: 5px;
}
.contactform label.label {
	display: inline;
	float: none;
	width: 50px;
	font-size: 10px;
}
.contactform textarea {
	background: #FFF;
	border: 1px dotted #333;
       width: 290px;
       font-family: Tahoma, Verdana, Geneva, Arial, Helvetica, sans-serif;
       font-size: 90%;
       padding: 4px;
}
.formbuilderform .message {
	line-height: 16px;
	padding: 0 0 8px 0;
}

.formbuilderform input {border: 1px solid #999; width: auto;   font-size: 100%; padding: 5px; margin-bottom: 5px; background: #FFF}

.formbuilderform textarea {
	background-color: #FFF;
	border: 1px solid #999;
       width: 290px;
       font-family: Tahoma, Verdana, Geneva, Arial, Helvetica, sans-serif;
         font-size: 100%;
       padding: 5px;
}

.formbuilderform select {
       width: auto;
       font-family: Tahoma, Verdana, Geneva, Arial, Helvetica, sans-serif;
        font-size: 100%;
       padding: 5px;
       width: 100px;
}

.orderform input {border: 1px solid #999; width: 250px; font-size: 90%; padding: 4px; margin-bottom: 5px; background: #FFF;}
.orderform input.checkbox {border: none;}
.orderform label {
	display: block;
	float: left;
	width: 150px;
}
.orderform label.label {
	display: inline;
	float: none;
	width: 50px;
	font-size: 10px;
}
.orderform textarea {
	background-color: #FFF;
	border: 1px solid #999;
       width: 290px;
       font-family: Tahoma, Verdana, Geneva, Arial, Helvetica, sans-serif;
       font-size: 90%;
       padding: 4px;
}

.submit input, #mylogin {border: 1px solid #000; width: auto; padding: 4px; margin-bottom: 5px; background: #191919; color: #FFF; font-size: 120%;}

.formitem input {border: 1px solid #000; width: 40px; font-size: 90%; padding: 4px; margin-bottom: 5px; background: #333300; color: #FFF;}

.login{float: left; display: inline; padding: 0; margin: 0 20px 0;}

#login input {
  border: 1px #333 dotted;
  padding: 3px;
  width: 150px;
}
#login select {
  border: 1px #333 dotted;
  padding: 3px;
}
#login label {
  margin: 0 10px 0 5px;
}

input.cms_textfield {width: 200px;}
/* Stylesheet: DHForms Modified On 2012-02-16 10:40:13 */
/*****************
browsers interpret margin and padding a little differently, 
we'll remove all default padding and margins and
set them later on
******************/
* {
margin:0;
padding:0;
}


/*
Set initial font styles
*/
body {
   text-align: left;
   font-family: Trebuchet MS, Arial, Tahoma, Verdana, Geneva, Helvetica, sans-serif;
   font-size: 85.01%;
   line-height: 1.4em;
}

/*
set font size for all divs,
this overrides some body rules
*/
div, table{
   margin: 0;
   padding: 0;
   font-size: 1em;
   line-height: 1.4em;
}

/*
if img is inside "a" it would have 
borders, we don't want that
*/
img {
   border: 0;
   margin: 0;
}

.gallery {
 float: left;
 margin-right: 0px;
 margin-bottom: 5px;
 border: 0px;
}

.photo-left {
 float: left;
 margin-right: 10px;
 margin-bottom: 5px;
 border: 1px #666 solid;;
}

.photo-right {
 float: right;
 margin-left: 10px;
 margin-bottom: 5px;
 border: 1px #666 solid;
}

.photo {
 border: 1px #666 solid;
}

#content a:link, #content a:active, #content a:visited {color: #996600; text-decoration: none;}
#content a:hover {color: #000; text-decoration: underline;}


#sidebar ul {
	width: auto;
	text-align: left;
	margin-left: 0px;
	color: #333333;
        list-style: none;
}
#sidebar ul ul {
	margin-left: 0px;
}
#sidebar ul li a, #sidebar ul li a:visited {
	color: #996600;
	display: block;
	font-weight: normal;
	margin-bottom: 2px;
        padding-bottom: 3px;
	text-decoration: none;
        border-bottom: 1px #999 dotted;
}

#sidebar ul li a:hover {
	color: #000;
	display: block;
	font-weight: normal;
	margin-bottom: 2px;
        padding-bottom: 3px;
	text-decoration: none;
}

#sidebar a,
#sidebar a:link,
#sidebar a:active {
   text-decoration: none;
/* css validation will give a warning if color is set without background color. this will explicitly tell this element to inherit bg colour from parent element */
   background-color: inherit; 
   color: #996600;
}

#sidebar a:visited {
   text-decoration: none;
   background-color: inherit;
  color: #996600;                /* a different color can be used for visited links */
}

/* remove underline on hover and change color */
#sidebar a:hover {
   text-decoration: none;
   background-color: transparent;
   color: #000;
}

div#main a:link, div#main a:visited, div#main a:hover {
  color: #996600; text-decoration: inherit;
}


/*****************
basic layout 
*****************/
body {
   color: #000;
   margin: 0; /* gives some air for the pagewrapper */
}
/* center wrapper, min max width */

/* center wrapper, min max width */
div#pagewrapper {
   border: 0;
   margin: 0px auto 0px auto;     /* this centers wrapper */
   width: 1024px;
   background:#FFF url(https://www.profhlati.co.za/uploads/images/content-background.jpg) top center no-repeat;
}

#container {
   position: relative;
   width: 980px;
   margin: 0px 22px 0px 22px; 
   padding: 30px 0 0 0;
   border: 0;
}

/* ------------ Footer ------------ */


#footer-wrapper {
        position: relative;
	min-height: 280px;
	height: auto!important;
	height: 280px;
	width: 100%;
	margin-top: 20px;
	margin-right: 0px;
	margin-left: 0px;
        margin-bottom: 0px;
        padding: 0px;
        background: #191919;
}
#footer {
        position: relative;
	font-size: 1em;
	min-height: 290px;
	height: auto!important;
	height: 290px;
        width: 980px;
        margin: 10px auto 0 auto;
        padding: 10px 0 0 0;
}
#footer .block {
        float: left;
	width: 285px;
	margin: 10px 25px 0 15px;
	text-align: left;
}
#footer .cms {
        float: right;
	text-align: left;
	color: #666;
	margin: 10px 0px 0 0;
        border: 0px;
	width: 320px;
}
/* ------------ Footer Links ------------ */
#footer ul {
	width: auto;
	text-align: left;
	margin-left: 0px;
	color: #666;
        list-style: none;
        text-transform: uppercase;

}
#footer ul ul {
	margin-left: 0px;
}
#footer ul li a:link, #footer ul li a:visited {
	color: #666;
	display: block;
	font-weight: normal;
	margin-bottom: 2px;
        padding-bottom: 3px;
	text-decoration: none;
        border-bottom: 1px #666 dotted;
}

#footer ul li a:hover {
	color: #CCC;
	display: block;
	font-weight: normal;
	margin-bottom: 2px;
        padding-bottom: 3px;
	text-decoration: none;
}
#footer a, #footer a:visited {
	color: #666;
	text-decoration: none;
	font-weight: bold;
}

#footer .cms a, #footer .block a {
	color: #999;
}

#footer .cms a:hover {
	color: #CCC;
}

/* ------------ END LAYOUT ---------------*/

/*** header ***
we will hide text and replace it with a image
we need to assign a height for it
*/

div#header {
   height: 335px;
   margin: 0px;
}

div#search {
   position: absolute;
   top: 20px ;
   left: 0px;
   width: 320px;     /* enough width for the search input box */
   padding: 0;
   margin: 0px;
   z-index: 20;
}

div#search input {
   font-size: 105%;
   width: 300px;     /* enough width for the search input box */
   text-align:left;
   padding: 8px 10px 10px 10px;
   margin: 0;
   color: #333;
   background: transparent;
   border: 1px #333 solid;
}

div.breadcrumbs {
   padding: 0; /* CSS short hand rule first value is top then right, bottom and left */
   font-size: 90%;             /* its good to set fontsizes to be relative, this way viewer can change his/her fontsize */
   margin: 10px 0 5px 0 ;              /* css shorthand rule will be opened to be "0 1em 0 1em" */
   height: 15px;
   text-transform: lowercase;
   color: #000;
}

div.breadcrumbs a, div.breadcrumbs a:visited {
   color: #000;
}

div.breadcrumbs a:hover {
   color: #333; text-decoration : underline;
}

 div.breadcrumbs span.lastitem { 
   color: #000; 
 } 

div#content {
   position: relative;
   margin: 0; /* some air above and under menu and content */
   margin-top: 0px;
}

.content-background {
   margin: 0; /* some air above and under menu and content */
   padding-bottom: 0px;
}

div#content-nav {
   position: relative;
   padding: 0px;
   width: 980px;
   height: 60px;
   padding-bottom: 5px;
   margin: 0px 0 10px 0;
}


div#content-header {
   float: right;
   display: inline;
   margin-right: 0px ; /* some air above and under menu and content */
   height: 60px;
   padding: 0px;
   background: none;
   width: 640px;
   margin-top: 0px;
}

#content-bottom {
  float: left;
  display: inline;
  height: 20px;
  width: 960px;
  margin:0;
}

div#main {
   position: relative;
   float: left;
   display: inline;
   vertical-align: top;
   padding: 0px;
}

div#sidebar {
   position: relative;
   float: left;
   display: inline;
   width: 280px;    /* sidebar width, if you change this please also change #main margins */
   margin-right: 20px;
   margin-left: 0px;
   margin-top: 0px;
   margin-bottom: 20px;
   padding: 0 20px;
   color: #000;
   background: #e4c876;
}

/* if sidebar doesnt include menu but content add class="hascontent" */
div#sidebar.hascontent {
   padding: 0;
   width: 320px;  /* make width smaller if there's padding, or it will get too wide for the floated divs in IE */
}

div#footer p a {
   color: #333; /* needed becouse footer link would be same color as background otherwise */
}

/* as we hid all hr for accessibility we create new hr with extra div element */
div.hr {
   height: 1px;
   margin: 0;
   border-bottom: 0px dotted black;
}

/* relational links under content */
div.left49 {
  float: left;
  width: 79%;  /* 50% for both left and right might lead to rounding error on some browser */
}

div.right49 {
  float: right;
  width: 19%;
  text-align: right;
}




/********************
CONTENT STYLING
*********************/
div#content {
}

/* HEADINGS */


div#content h1 {
   color: #333; 
   font-size: 34px;  /* font size for h1 */
   line-height: 30px;
   margin: 0;
   /* text-transform: lowercase; */
}

div#content h2 {
   color: #333; 
   font-size: 28px;  /* font size for h2 */
   margin-bottom: 5px;
   /* text-transform: lowercase; */
   font-weight: normal;
}
div#content h3 {
   color: #333; 
   font-size: 22px;
   margin: 0 0 5px 0;
   /* text-transform: lowercase; */
   font-weight: normal;
}
div#sidebar h3 {
   margin-left: -20px; 
   width: 290px; 
   background: #000; 
   padding: 5px 10px 5px 20px; 
   color: #FFF; 
   margin-bottom: 10px;
}
div#content h4 {
   color: #333; 
   font-size: 16px;
   line-height: 16px;
   margin: 0 0 5px 0;
   /* text-transform: lowercase; */
   font-weight: normal;
}
div#sidebar h4 {
   color: #FFF; 
   font-size: 16px;
   line-height: 16px;
   margin: 0 0 5px 0;
   /* text-transform: lowercase; */
   font-weight: normal;
}
div#content h5 {
   color: #333;  
   font-size: 14px;
   line-height: 14px;
   margin: 0 0 5px 0;
   /* text-transform: lowercase; */
   font-weight: normal;
}
h6 {
   font-size: 1em;
   line-height: 1.3em;
   margin: 0 0 0.25em 0;
}


/* END HEADINGS */

/* TEXT */
p {
   font-size: 1em;
   margin: 0 0 0.8em 0;  /* some air around p elements */
   line-height:1.4em;
   padding: 0;
}
blockquote {
   border-left: 10px solid #CCC;
   margin-left: 10px;
}
pre {
   font-family: monospace;
   font-size: 1.0em;
}
strong, b {
/* explicit setting for these */
   font-weight: bold;
}
em, i {
/* explicit setting for these */
   font-style:italic;
}

/* Wrapping text in <code> tags. Makes CSS not validate */
code, pre {
 white-space: pre-wrap;       /* css-3 */
 white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
 white-space: -pre-wrap;      /* Opera 4-6 */
 white-space: -o-pre-wrap;    /* Opera 7 */
 word-wrap: break-word;       /* Internet Explorer 5.5+ */
 font-family: "Courier New", Courier, monospace;
 font-size: 1em;
}

pre {
   border: 1px solid #000;  /* black border for pre blocks */
   margin: 0 1em 1em 1em;
   padding: 0.5em;
   line-height: 1.5em;
   font-size: 90%;   /* smaller font size, as these are usually not so important data */
}

/* END TEXT */

/* LISTS */
div#main ul,
div#main ol,
div#main dl {
   line-height:1.4em;
   margin: 0 0 1.5em 0;
}
div#main ul li,
div#main ol li {
   margin: 0 0 0.25em 3em;
   list-style: circle;
}

div#dl dt {
   font-weight: bold;
   margin: 0 0 0.25em 3em;
}
div#dl dd {
   margin: 0 0 0 3em;
}
/* END LISTS */

#photofloat {
  position: absolute;
  z-index: 5;
  width: 127px;
  height: 127px;
  top: 20px;
  left: 150px;
}

#imagefloat {
  position: absolute;
  z-index: 5;
  width: 250px;
  height: 259px;
  top: -20px;
  left: 50px;
}

#logofloat {
  position: relative;
  display: inline;
  float: left;
  z-index: 2;
  margin: 0 auto 0 auto;
  padding-top: 0px;
  width: 320px;
  height: 320px;
  text-align: center;
  background: #FFF;
}

#header-image {
   position: relative;
   float: left;
   display: inline;
   width: 980px;
   height: 345px; 
   margin: 0px;
   padding: 0;
   background: url(https://www.profhlati.co.za/uploads/images/showtime-shadow.png) bottom center no-repeat;
}

#showtime{
  position: absolute;
  width: 660px;
  height: 320px;
  margin: 0px;
  border: 0px;
  z-index: 10;
  overflow: hidden;
  top: 0;
  right: 0;
}

.table {
   border-collapse: collapse;
   width: 605px;
}
.table td {
  border-collapse: collapse;
  border: 1px #CCC solid;
  padding: 2px 5px 2px 5px;
}

div[id^='cggm_map_defn'] {float: right; display: inline; margin-left: 10px; border: 1px #999 solid; width: 310; padding: 0; color: #333;}
div.cggm_directions {width: auto; padding: 3px;}
div.cggm_directions_form {width: 220px; padding: 3px;}

fieldset {border: 1px #000 dotted; padding: 20px; margin: 0 0 20px 0; width: auto;}


html, body {
    background: url(https://www.profhlati.co.za/uploads/images/body-background.jpg) fixed top center;
}
/* Stylesheet: DHLayout Modified On 2012-02-22 09:26:30 */
.menuwrapper { float: right; position: relative; width: 660px; margin-top: 0px; z-index: 80; background: #a78418;}
div#copyright { display: none; }
#menu {
    position:relative;
    z-index:81;
    height:32px;
}
#menu .menu {
    position:absolute;
}
#menu * {
    list-style:none;
    border:0;
    padding:0;
    margin:0;
}
#menu a {
    display:block;
    padding:7px 10px 8px 10px;
    white-space:nowrap;
}
#menu li {
    float:left;
    background:#191919;
}
#menu li li {
    float:none;
    _border:1px solid #c4c4c4; /** fix for ie6 */
}
#menu div {
    visibility:hidden;
    position:absolute;
    background:#191919  /* url(https://www.profhlati.co.za/lib/jquery/js/images/pix.gif) */;
}
#menu div div {
    margin:-24px 0 0 -1px;
    left:100%;
}
#menu li:hover>div { visibility:visible; }

/* menu::special styles */
/* menu::level 1 */
#menu a {
    text-decoration:none;
    color:#FFF;
    position:relative;
    z-index:77;
}
#menu a:hover {
    background:#000 /*url(https://www.profhlati.co.za/lib/jquery/js/images/back.png) */;
    color:#FFF;
}
#menu a:hover span { color:#bbb; }
#menu>ul>li:hover>a {
    background:#333  /*url(https://www.profhlati.co.za/lib/jquery/js/images/back.png) */;
    color:#999;
}
#menu>ul>li:hover>a span { color:#FFF; }
#menu span {
    /* text-transform:uppercase; */
    font:14px Verdana, Arial, Helvetica, Sans-serif;
    color:#FFF;
}
#menu li { background:none; }
/* menu::level >= 2 */
#menu li li a {
    padding:0;
    position:static;
}
#menu li li a:hover { background:#191919; }
#menu li li a span { color:#fff; }
#menu li li a:hover span { color:#ffffff; }
#menu li li a.parent span { background:#191919; /* background:url(https://www.profhlati.co.za/lib/jquery/js/images/pointer.gif) no-repeat right 9px; _background-position:right 10px; */ }
*+html #menu li li a.parent span { background-position:right 10px; }
#menu li li span {
    display:block;
    text-transform:none;
    line-height: 28px;
    padding:4px 25px 4px 14px;
    font-size:14px;
}
#menu li div { background:#191919  /*url(https://www.profhlati.co.za/lib/jquery/js/images/back.png) */; }
/** <fix for ie6> */
#menu div div {
    _margin-top:-25px;
    _background:#c4c4c4;
}
#menu li li li { _border:1px solid #c4c4c4; }
#menu div div div { _background:#c4c4c4; }
#menu li li li li { _border:1px solid #c4c4c4; }
/** </fix for ie6> */

/* lava lamp */
div#menu li.back {
    width:10px;
    height:32px;
    z-index:8;
    position:absolute;
}
div#menu li.back .left {
    width:auto;
    height:32px;
    float:none;
    position:relative;
    top:0;
    left:0;
    visibility:visible;
}

/* Stylesheet: DHMenu Modified On 2012-02-16 11:44:01 */
div#news {
/* margin for the entire div surrounding the news items */
	margin: 0;
/* border set here */
	border: 0px solid #909799;
/* sets it off from surroundings */
	background: #f5f5f5;
}
div#news h2 {
        display: none;
	line-height: 2em;
/* you can set your own image here */
	background: url(uploads/ngrey/darknav.png) repeat-x left center;
	color: #f5f5f5;
	border: none
}
.NewsSummary {
/* padding for the news article summary */
	padding: 0 0 20px 0;
/* margin to the bottom of the news article summary */
	margin: 0;
	border-bottom: 0px solid #ccc;
}
.NewsSummarySummary {
/* padding for the news article summary */
	padding: 10px;
/* margin to the bottom of the news article summary */
	margin: 0;
	border: 1px solid #ccc;
}
.NewsSummaryPostdate {
/* smaller than default text size */
        margin-bottom: 0px;
	font-size: 90%;
/* bold to set it off from text */
	font-weight: bold;
}
.NewsSummaryLink {
/* bold to set it off from text */
	font-weight: bold;
/* little more room at top */
	padding-top: 0em;
}
.NewsSummaryCategory {
   display: none;
/* italic to set it off from text */
	font-style: italic;
	margin: 5px 0;
}
.NewsSummaryAuthor {
   display: none;
/* italic to set it off from text */
	font-style: italic;
	padding-bottom: 0.5em;
}
.NewsSummarySummary, .NewsSummaryContent {
/* larger than default text */
        margin-top: 5px;
	line-height: 140%;
}
.NewsSummaryMorelink {
        color: #fff;
	padding-top: 5px;
        float:right;
        margin-bottom: 10px;
}
#NewsPostDetailDate {
/* smaller text */
	font-size: 90%;
	margin-bottom: 5px;
/* bold to set it off from text */
	font-weight: bold;
}
#NewsPostDetailSummary {
/* larger than default text */
	line-height: 150%;
}
#NewsPostDetailCategory {
   display: none;
/* italic to set it off from text */
	font-style: italic;
	border-top: 1px solid #ccc;
	margin-top: 0.5em;
	padding: 0.2em 0;
}
#NewsPostDetailContent {
	margin-bottom: 15px;
/* larger than default text */
	line-height: 150%;
}
#NewsPostDetailAuthor {
   display: none;
	padding-bottom: 1.5em;
/* italic to set it off from text */
	font-style: italic;
}
#NewsPostDetailPrintLink {
  display: none;
}
/* more divs, left unstyled, just so you know the IDs of them */ 
#NewsPostDetailTitle {
}
#NewsPostDetailHorizRule {
}
#NewsPostDetailPrintLink {
}
#NewsPostDetailReturnLink {
}

ul.list1 {display: none; list-style: none;}

div#news ul li {
	list-style: none;
}
/* Stylesheet: DHNews Modified On 2012-02-16 10:41:03 */