/*  MAIN CSS  */


/* RESETS & OVERRIDES
   ========================================================================== */
/* NORMALISE.CSS (See normalise.css - HTML5-BOILERPLATE for more)*/
/* * 1. Set default font family to sans-serif.
   * 2. Prevent iOS text size adjust after orientation change, without disabling
   *    user zoom.    */
html {
  font-family: 'Open Sans'; /* 1 */
  -ms-text-size-adjust: 100%; /* 2 */
  -webkit-text-size-adjust: 100%; /* 2 */
}

/* Remove default margin. */
body { margin: 0; padding: 0; }
img { border: none; }

/* HTML5 display definitions */
/* * Correct `block` display not defined for any HTML5 element in IE 8/9.
   * Correct `block` display not defined for `details` or `summary` in IE 10/11
   * and Firefox.
   * Correct `block` display not defined for `main` in IE 11.    */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary {
  display: block;
}

/* LINKS & TYPE
   ========================================================================== */
body { font-family: "Open Sans", Verdana, sans-serif; font-size: 100%; }
a:link, a:visited { text-decoration: none; }
a:active { color: green; }
a:link { color: #0029A6; }
a:visited { color: #0029A6; }
a:hover { color: saddlebrown; text-decoration: underline; }

/* COLORS etc
   ========================================================================== */
.colorFirebrick { color: firebrick; }
.colorGreen { color: green; }
.colorRed { color: #CC0000; }
.colorBlue { color: blue ; }
.colorMaroon { color: maroon; }
.colorDate { color: #CC0000;  }

/* MAIN LAYOUT STYLES
   ==========================================================================*/
body { margin: 0 auto; padding-bottom: 100px ; overflow-x: hidden; width: 100%}
ol, ul {text-align: left; padding-top: 0px; margin-top: 5px; }




/* HEADER STYLES
   -----------------------------------------*/
#pageHeader {
	background: #2F2E2E;
	width: 100%;
    height: 220px;  
    top: 0;
    position: relative;
}
#pageHeaderLogo {
    width: 100px;
    height: 100px;
    display: block;
    margin: 0 auto;
}
#headerWordsPS {
    height: 40px;
    font-family: sans-serif;
    color: white;
    width: 250px;
    padding: 4px 0px 0px 0px;
    text-align: center;
    margin: 0 auto 0;
    font-size: 1.5em ;
}

#headerPhoneNo {
    font-family: sans-serif;
    color: white;
    text-align: center;
    width: 250px;
    font-size: 1.0em;
    font-weight: 500;
    margin: 0 auto;
    margin-top: 0px;
}
a.callChaaysPhHeader {
    color: white ;
}
a.callChaaysPhHeader:hover {
    color: saddlebrown;
    text-decoration: underline;
}
.headerFB { display: none; }

#mainNav {
    margin: 10px auto 5px;
    width: 80%;
    height: 45px;
    position: relative;
    padding: 5px 7px ;
}

.navButton {
    background-image: -webkit-linear-gradient(180deg, white 40%, gray);
    background-image: -o-linear-gradient(180deg, white 40%, gray);
    background-image: -moz-linear-gradient(180deg, white 40%, gray);
    background-image: linear-gradient(180deg, white 40%, #999);
    display: inline-block; 
    color: black;
    font: 600 0.9em 'Open Sans';
    width: 32%;
    min-height: 35px;
    max-height: 50px;
    margin: 0px auto 0px ;
    text-align: center;
    padding: 2px 0px 3px; 
    border-radius: 7px;
    text-shadow: 4px 4px 4px #989898;

}
#headerImage {
    width: 100%;
    position: relative;
    top: 0px;
    margin: 0px auto 0px ;
}

/* FOOTER STYLES
   -----------------------------------------*/
.footerTopLine { 
    border-top: 1px solid gray ;
    padding 10px 0px;
    width: 100% ;
}
#pageFooter {
    clear: both;
    background-image: url("../images/M0012-ClearMorn-509.jpg");
    background-size: cover;
    background-repeat: no-repeat ;
    background-position: center ;
    margin: 10px auto 0px ;
    width: 95%;
    float: none;
    position: relative;
    height: 280px;
    border-top: 1px solid gray;
    border-bottom: 1px solid lightgray;
    z-index: 1;
}
#businessName {
    text-align: center ;
    padding-top: 15px ;
    font-family: Arial ;
    font-weight: 600 ;
    font-size: 1.3em ;
}
.emailUs {
    position: relative;
    left: 0;
    width: 100%;
    padding: 10px 0px;
    text-align: center;
    font: 500 1em 'Open Sans';
}
.addressPh {
    width: 100%;
    position: static;
    padding: 0px 0px 10px;
    margin: 0px auto 5px;
    text-align: center;
    font: 500 .9em 'Open Sans';
}
a.callChaaysPhFooter {
    color: black ;
    margin-top: 30px ;
}
a.callChaaysPhFooter:hover {
    color: saddlebrown;
    text-decoration: underline;
}
a.footerMap { 
    color:dodgerblue ;
}
.footerFB { 
    position: relative;
    right: 0;
    float: right;
    margin-right: 0; 
    padding: 0px 0px;    
}
.copyright {
    padding: 5px 0px 0px;
    float: left;
    width: 50%;
    font: 500 .7em 'Open Sans';
}


/* HOME Page - LAYOUT STYLES
   ================================================*/

#mainContentHome {
    display:block ;
}

.moreInfo {
    clear: both ;
    display: block;
    text-align: center;
    width: 95%;
    height: auto;
    margin: 30px auto 10px;
    position: relative;
    font: 500 0.8em 'Open Sans';
    line-height: 1.5em ;
    border-bottom: 1px solid gray;
    padding-bottom: 10px
}
#mainImg {
    display: none;
}
#aboutUs {
    display: block ;
    width: 95%;
    height: 180px;
    margin: 0px 0px 10px 10px ;
    padding: 0px 0px 0px 0px;
    text-align: center ;
    font: 500 0.8em 'Open Sans';
    line-height: 1.3em;
}
/*#aboutUsImg { 
    clear: both ;
    width: 100% ;
    margin: 0px auto 0px ;
}*/

#ourTeam { display: none; }

#comingUp {
    text-align: center;
    width: 95%;
    padding: 0px 0px 10px 0px;
    margin: 0px auto 0px;
    position: relative;
    font: 500 0.8em 'Open Sans';
    line-height: 1.5em ;
    border-bottom: 1px solid gray;
}
a.linkFreeSeminar:link { color:darkgreen ;
}
a.linkFreeSeminar:visited { color:darkgreen ;
}
.hook {
    text-align: center ;
    font: 600 0.9em 'Open Sans';
}


/* COURSES Page - LAYOUT STYLES
   ===================================================*/
#mainContentCourses {
    display:block ;
}
#coursesHeading {
    margin-top: 40px ;
    text-align: center;
    font-size: 1.3em;
    font-family: Arial ;
    font-weight: 600 ;
}
#coursesHeadingLine1 {
    font-size: 1.3em ;
    font-weight: 600 ;
    padding-bottom: 15px;
    font-family: Arial, sans-serif ;
    
}  
#coursesHeadingLine2 {
    font-size: .7em ;
    font-weight: 100 ;
    padding-bottom: 15px;
}
.courseName {
    text-align: center;
    padding-bottom: 15px ;
    padding-top: 10px;
    border-top: 1px solid gray;
    width: 95% ;
    margin: 0px auto 0px ;
    font-family: "Arial", sans-serif;
}
.seminarName {
    color: darkgreen ;
    text-align: center;
    padding-bottom: 15px ;
    padding-top: 10px;
    border-top: 1px solid gray;
    width: 95% ;
    margin: 0px auto 0px ;
    font-family: "Arial", sans-serif;
}


.courseDuration {
    font-size: .9em;   
}
  
.courseDate {
    font-size: .9em;
    color: firebrick ;
    font-weight: 600 ;
}
.buttonDetails {background-color:#D3D3D3; border: 1px solid black; padding: 3px 25px;
    text-align: center; font-weight: 500; display: inline-block; margin: 5px 5px 3px; border-radius: 5px; 
    font-size: 18px; box-shadow: 5px 8px 8px 0px rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
    margin-left: 20px;
}
#coursesPics {
    display: none ;
}

/* COURSES DETAILS Pages - LAYOUT STYLES
   =================================================*/
.courseDetailsHdg {
    margin-top: 40px ;
    text-align: center;
    font-size: 1.2em;   
}
.courseDetailsHdgLine1 {
    font-size: 1.2em ;
    font-weight: 700 ;
    padding-bottom: 15px;
    text-decoration: underline;
    font-family: Arial ;
    
}  
.courseDetailsHdgLine2 {
    font-size: .9em ;
    font-weight: 500 ;
    padding-bottom: 15px;
    font-family: Arial ;
    color: green ;
}
.courseOutline {
    width: 90% ;
    margin: 0px auto 5px;
    border: 1px solid gray;
    padding: 15px 10px 20px ;
}

.courseLessonHdg {
    font-family: Arial ;
    font-size: 0.9em ;
    text-align: center ;
    font-weight: bold ;
    text-decoration: underline ;
    margin-top: 15px;
}
.courseLessonSumm {
    font-size: .8em ;
    text-align: center ;
    font-weight: 500 ;
    font-family: Arial ;   
}
.nextAndFee {
    font-family: Arial ;
    font-size: 1.0em ;
    text-align: center ;
    font-weight: bold ;
    margin-top: 15px;
}
.courseFee {
    color: green ;
    font-size: 1.5em ;
    font-weight: 500 ;
    
}
.buttonEnrol { 
    background-color:#D3D3D3;
    border: 1px solid black;
    padding: 3px 25px;
    text-align: center;
    font-weight: 600;
    border-radius: 5px; 
    font-size: 18px;
    box-shadow: 5px 8px 8px 0px rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
    margin: 20px auto 10px ;
    display :block ;
    width: 50% ;
}

/* ENROLMENT FORM Page - LAYOUT STYLES
   =============================================*/

#enrolmentForm {
    margin: 50px auto 0px;
    width: 90% ;
    padding: 5px 5px 20px 5px;
    border: 1px solid #CCC;
    border-radius: 1em;
}
label {
  /* To make sure that all labels
    have the same size and are properly aligned */
    display: inline-block;
    width: 100px;
    text-align: left;
    font-size: 0.8em;
    font-weight: 600 ;
    
}
input, textarea {
    font: 1em sans-serif;
    width: 250px;
    box-sizing: border-box;
    border: 1px solid #999;
    margin: 5px auto ;
    background-color: lightgray ;
}
input:focus, textarea:focus {
    border-color: #000;
}
textarea {
    vertical-align: top;
    height: 100px; 
}
#enrolSubmit {
    width: 80px ;
    margin : 10px auto 10px;
    display: block ;
    
}
button {
    font-size: 1.2em ;
    border: 1px solid black ;
    border-radius: 5px ;
    color: green ;
    font-weight: bold ;    
}

/* THANKYOU Page - LAYOUT STYLES
   =========================================*/
#mainContentThankYou {
    width: 90% ;
    height: 230px ;
    margin: 40px auto 20px ;
    border: 1px solid lightgray ;
    position: relative ;
	text-align: center ;
	font-family: Arial ;
    font-size: .9em ;	
}
#thankYou {
    width: 100% ;
    float: left ;
    padding: 20px 5px ;
	color: #BC7500 ;
	font-weight: bold ;
    font-size: 1.2em ;
}
.backTo {
    float: right ;
    font-size: .9em ;
    font-weight: bold ;
    padding: 10px ;
}

/* NEWS Page - LAYOUT STYLES
   =======================================*/

#newsHeader {
    margin: 35px 10px 10px 20px;
    text-align: center;
    font-size: .9em;
}
#newsHeader p {
    font-size: .6em;
}
#newsItems {
    padding: 0px 10px 20px;
    text-align: left;
    font: 500 0.8em 'Open Sans';
}
#newsItems h4 {
    text-decoration: underline;
    margin-bottom: 5px ;
}

/* WEBSITE DOWN Page - LAYOUT STYLES
   ==================================*/

#websiteDown {
    text-align: center ;
    font-weight: bold ;
    font-size: 1.2em ;
    margin: 40px auto 40px ;
    width: 80%
    
    
}

/* BREAKPOINT 1 - for approx.: Tablet sizes (Vert)
   ========================================================================== */
@media only screen and (min-width: 481px) {


a.callChaaysPh {
    text-decoration: none ;
}
#mainNav {
    float: left ;
}    

.navButton {
    float: left;
    background-image: -webkit-linear-gradient(180deg, white 40%, gray);
    background-image: -o-linear-gradient(180deg, white 40%, gray);
    background-image: -moz-linear-gradient(180deg, white 40%, gray);
    background-image: linear-gradient(180deg, white 40%, #999);
    display: inline-block; 
    color: black;
    font: 600 0.9em 'Open Sans';
    width: 31%;
    min-height: 35px;
    max-height: 50px;
    margin-right: 4px; 
    text-align: center;
    padding: 2px 0px 3px; 
    border-radius: 7px;
    text-shadow: 4px 4px 4px #989898;
}

#comingUp {
    width: 52% ;
    float: right ;
    clear: none ;
    height: 200px;
    margin: 0px;
    border-top: none ;
    border-bottom: none ;
}
.moreInfo  {
    padding: 0px 0px 0px;
}
#aboutUs {
    display: block ;
    float: left ;
    width: 42%;
    height: 240px;
    margin: 0px 0px 10px 10px ;
    padding: 0px 15px 0px 0px;
    border-right: 1px solid gray;
    text-align: justify;
    font: 500 0.8em 'Open Sans';
    line-height: 1.1em;
}

    
    /*  COURSES Page */

#coursesHeading {
    margin: 45px 5px 5px 20px;
}
    
.courseName {
    width: 70% ;
}
.seminarName {
    width: 70% ;
}
    /* COURSE DETAILS Pages */
.courseOutline {
    margin: 0px auto 10px;
}
    
    /*  ENROLMENT PAGE  */
    
    /*  NEWS Page */
    
#newsHeader {
    margin-top: 40px ;
}
}

/* BREAKPOINT 2 - for approx.: Tablet sizes (Hor) / Laptops / Small Desktop
   ========================================================================== */
@media only screen and (min-width: 680px) {
        

#pageHeader {
    height: 150px;
}
#pageHeaderLogo {
    height: 120px ;
    width: 120px ;
    float: left ;
    width: 110px ;
    height: 110px ;
    margin-top: 5px;
}
#mainNav {
    width: 600px ;
    position: absolute;
    top: 115px;
    float: left ;
    margin-left: 0px ;
}
.navButton {
    margin: 0px 2px 0px;
    width: 25%;
    border-right: 1px solid gray;
}
#headerWordsPS {
    width: 400px ;
    height: 40px ;
    margin: 45px auto 0px;
    float: left ;
    font-size:2.5em ;
    padding: 0px ;
}

#headerPhoneNo {
    font-size: 1.2em ;
    float: right ;
    width: 220px;
    margin: 10px 0px 0px;
    padding-right: 10px ;
    padding-bottom: 10px ;
    text-align: right ;
}
a.callChaaysPhHeader {
    text-decoration: none ;
}
a.callChaaysPhHeader:hover {
    color: white ;
    text-decoration: none;
    cursor: default ;
}
a.callChaaysPhFooter {
    text-decoration: none ;
}
a.callChaaysPhFooter:hover {
    color: black ;
    text-decoration: none;
    cursor: default ;
}
.phoneIcon {
    display: none;
}
.headerFB {
    display: block ;
    padding: 0px 5px;
    margin-bottom: 10px;
    clear: both;
    position: absolute;
    right: 0px;
    top: 132px;
}
#headerImage {
    display: none;
}
#mainContentHome {
    margin-top: 15px ;
}       
.moreInfo {
    width: 100%;
    height: 290px;
    background-color: white;
    margin: 30px 0px 5px;
    padding: 0px 0px 30px 0px;
}
#moreInfoDesc {
    display: block;
    width: 40%;
    float: left;
    margin: 0px 0px 10px 10px;
    line-height: 160% ;
}
.specialOffers {
     padding: 0px 0px ;      
}
.divider {
    display: none ;
}

#mainImg {
    display:block ;
    background: url("../images/PLI-37-1.jpg");
    background-repeat: no-repeat;
    background-size:auto;
    float: left;
    width: 55% ;
    height: 280px;
    margin: 10px;
/*    border: 1px solid lightgray ;  */
}

/*.talent h1 {
    margin: 0px 0px 10px ;
    padding: 0 ;                
}*/
#aboutUs {
    display:block ;
    float: left ;
    width: 29%;
    height: 250px;
    margin: 0px 0px 10px 10px ;
    padding: 0px 15px 0px 0px;
    border-right: 1px solid gray;
    text-align: justify;
    font: 500 0.8em 'Open Sans';
    line-height: 1.1em;
}
#ourTeam {
    display:block ;
    float: left;
    width: 29%;
    height: 240px;
    margin: 0px 5px;
    padding: 0px 15px 10px 10px;
    border-right: 1px solid gray;
    text-align: justify;
    font: 500 0.8em 'Open Sans';
    line-height: 1.1em;
}
.courses h1 {
    margin: 0px 0px 10px ;
    padding: 0 ;
}
.comingUp h1 {
    margin: 5px 0px 10px ;
    padding: 0 ;
}
#comingUp {
    float: right ;
    display:block ;
    width: 30%;
    margin-right: 15px;
}
.emailUs {
    clear: both;
}
#pageFooter {
    clear: both;
    padding: 5px;
    margin-top: 10px;
    border-top: 1px solid gray; 
}  
.footerFB {
    display: none;
}

/*  COURSES Page */

#mainContentCourses {
    overflow: hidden ;
    height: 100% ;
    margin-bottom: 15px ;
    clear: both ;
}
#courseSumm {
    float : left ;
    width: 65% ;
    margin-left: 0px ;
}
.courseName {
    text-align: left;
    padding-left: 20px ;
    margin: 0px auto 20px ;
    width: 90%;
}
.seminarName {
    text-align: left;
    padding-left: 20px ;
    margin: 0px auto 20px ;
    width: 90%;
}
.noBreak {
     display: none ;   
}
.buttonDetails {
    float: right;
}
#coursesPics {
    display: block ;
    float: right ;
    width: 35% ;
}
.coursesPic {
    float: right ;
    margin: 2px 0px ;
    border: 1px solid lightgray;
    box-shadow: 10px 10px 10px #888888 ;  
    overflow: hidden ;
    }
.coursesPic3 {
    margin-right: 20px ;
    }
.coursesPic4 {
    margin-right: 80px ;
    }
    
/*.TMpopupContent {
  width: 80%;
}*/
    
    /* COURSE DETAILS Pages */
.courseOutline {
    margin: 0px auto 15px;
}
/* ENROLMENT FORM Page */
    
#enrolmentForm {
    width: 80% ;
}
    
input, textarea {
    width: 400px;
}


/*  NEWS Page */
    
#newsHeader {
    margin-top: 30px ;
}
    
}
/* BREAKPOINT 3 - for approx.: DESKTOPS
   ========================================================================== */
@media only screen and (min-width: 900px) {

/* #headerPhoneNo { visibility: hidden ;}  */

main {
    width: 900px;
    margin: 0 auto ;
}
#headerContainer {
    width: 900px;
    margin: 0 auto;
    height: inherit;
    position: relative;
}
#mainNav {
    width: 680px ;
} 
.comingUp {
    width: 33%;
}

.headerFB {
    display: block ;
    padding: 0px 5px;
    margin-bottom: 10px;
    clear: both;
    position: absolute;
    right: 0px;
    top: 132px;
}
.specialOffers {
     padding: 15px 0px 0px 0px ;      
}

    
/*  COURSES Page */
    
.courseName {
    width: 80%;
}
.seminarName {
    width: 80%;
}
#coursesPics {
    width: 30% ;
    margin-right: 30px ;
}
    
    /* COURSE DETAILS Pages */
.courseOutline {
    margin: 0px auto 20px;
}
    
/* .MDDCourseDetails {
    margin-left: 150px
}                       */
#pageFooter {
    width: 850px;
    margin: 0 auto;
}
/*.TMpopupContent {
  width: 60%;
}                   */
    
/* ENROLMENT FORM Page */
    
#enrolmentForm {
    width: 65% ;
}

    /*  NEWS Page */
    
#newsHeader {
    margin-top: 40px ;
}     
    
}