/**************** Title / Blog Category Styling ****************/
.article_title h4 {
    color: #281c14 !important;
}
.category_blog_view .article_title h4 a,
.cat-children h3{
    text-decoration: none !important;
    color: #4b392b !important;
}
.cat-children h3{
    font-size: 1.75em !important; /*28/16=2*/
    font-weight: 400 !important;
}
.category_blog_view .article_title h4 a:hover {
    background-color: transparent;
    color: #281c14;
    text-decoration: underline;
}
/**************** Table Styling ****************/
#component table, table#nobg, table#nostyle {
    margin-bottom: 2.5em;
    border: 1px solid #e3dfd4;
}
table#nobg, table#nostyle {
    border: none;
}
#component th {
    text-align: left;
    background: #6a7621;
    border-left: 1px dashed #8f9859;
    color: #fff;
}
#component th:lang(ms), #component td:lang(ms){
    hyphens: auto;
}
#component th, #component td{
    padding: 10px 15px;
}
#component td {
    vertical-align: top;
    border-left: 1px dashed #ccc7bb;
    background: #f5f1e7;
}
td.altrow {
    background: #fff !important;
}
table ul, table ol {
    margin: 0 !important;
}
#component #recaptcha_table td, #component #nostyle td {
    vertical-align: top;
    border-right: none;
    background: transparent;
}
table#nobg tr td:first-child, table#nostyle td:first-child{
    border-left: none;
}
table#nobg tr:last-child td, table#nostyle tr:last-child td {
    border-bottom: none;
}
table#nobg td, table#nostyle td {
    background: #fff;
    border-right: none;
}
table#nostyle > tbody > tr > td {
    padding: 0;
}
#component th:first-child, #nobg th, #nostyle th,
#component td:first-child, #nobg td, #nostyle td {
    border-left: none;
}
/**************** Flow Chart Arrows ****************/
.up-arrow, .down-arrow, .left-arrow, .right-arrow {
    background-image: url('images/icons/chart-arrows-red.png');
    background-repeat: no-repeat;
}
.up-arrow, .down-arrow {
    margin: 10px auto;
}
.left-arrow, .right-arrow {
    margin: 65% 25px;
}
.up-arrow {
    background-position: 48px 0;
    width: 16px;
    height: 48px;
}
.down-arrow {
    background-position: -64px 0;
    width: 16px;
    height: 48px;
}
.left-arrow {
    background-position: 0 0;
    width: 48px;
    height: 16px;
}
.right-arrow {
    background-position: 0 -16px;
    width: 48px;
    height: 16px;
}
.row_container img {
    border: 8px solid #fff;
    max-width: 92%;
}

/**************** Descriptive Chart ****************/
.desc_chart, .desc_chart_number {
    position: relative;
    overflow: hidden;
    text-align: center;
}
.desc_bubble {    
    padding: 15px 18px 20px;
    position: relative;
    display: block;
    text-align: left;
}
.desc_bubble:before, .desc_bubble:after {      
    content: "";
    display: block;    
    position: absolute;
    width: 0;
}
.desc_bubble.red, .desc_bubble.red:before, .desc_bubble.red:after,
.desc_bubble.green, .desc_bubble.green:before, .desc_bubble.green:after,
.desc_bubble.brown, .desc_bubble.brown:before, .desc_bubble.brown:after {
    color: #fff;
}
.desc_bubble.yellow, .desc_bubble.yellow:before, .desc_bubble.yellow:after,
.desc_bubble.beige, .desc_bubble.beige:before, .desc_bubble.beige:after {
    color: #e3d297;
}
.desc_bubble.red{
    background: #de1827;
}
.desc_bubble.yellow{
    background: #ffb500;
}
.desc_bubble.green{
    background: #6a7621;
}
.desc_bubble.brown{
    background: #2b1e15;
}
.desc_bubble.beige{
    background: #e3d297;
}
.desc_chart .topleft, .desc_chart .topright, .desc_chart .bottomleft, .desc_chart .bottomright, .desc_chart .centerright, .desc_chart .centerleft {
    width: 160px;
}
.desc_chart_number .topleft, .desc_chart_number .topright, .desc_chart_number .bottomleft, .desc_chart_number .bottomright, .desc_chart_number .centerright, .desc_chart_number .centerleft {
    width: 10px;
}
.red.topleft:before, .red.topright:before, .red.centerright:before, .red.centerleft:before, .red.bottomleft:before, .red.bottomright:before,
.yellow.topleft:before, .yellow.topright:before, .yellow.centerright:before, .yellow.centerleft:before, .yellow.bottomleft:before, .yellow.bottomright:before,
.green.topleft:before, .green.topright:before, .green.centerright:before, .green.centerleft:before, .green.bottomleft:before, .green.bottomright:before,
.brown.topleft:before, .brown.topright:before, .brown.centerright:before, .brown.centerleft:before, .brown.bottomleft:before, .brown.bottomright:before,
.beige.topleft:before, .beige.topright:before, .beige.centerright:before, .beige.centerleft:before, .beige.bottomleft:before, .beige.bottomright:before
{
    width: 0;
    height: 0; 
    border-style: solid;
}
.red.topleft:before,
.yellow.topleft:before,
.green.topleft:before,
.brown.topleft:before,
.beige.topleft:before {
    border-width: 30px 0 0 15px;
    bottom: -30px;
    right: 15px;      
}
.red.topleft:before {
    border-color: #de1827 rgba(255, 255, 255, 0) rgba(0, 0, 0, 0) rgba(0, 0, 0, 0);
}
.yellow.topleft:before {
    border-color: #ffb500 rgba(255, 255, 255, 0) rgba(0, 0, 0, 0) rgba(0, 0, 0, 0);
}
.green.topleft:before {
    border-color: #6a7621 rgba(255, 255, 255, 0) rgba(0, 0, 0, 0) rgba(0, 0, 0, 0);
}
.brown.topleft:before {
    border-color: #2b1e15 rgba(255, 255, 255, 0) rgba(0, 0, 0, 0) rgba(0, 0, 0, 0);
}
.beige.topleft:before {
    border-color: #e3d297 rgba(255, 255, 255, 0) rgba(0, 0, 0, 0) rgba(0, 0, 0, 0);
}
.red.topright:before,
.yellow.topright:before,
.green.topright:before,
.brown.topright:before,
.beige.topright:before {
    left: 15px;
    bottom: -30px;
    border-width: 30px 15px 0 0;
}
.red.topright:before {
    border-color: #de1827 rgba(255, 255, 255, 0) rgba(0, 0, 0, 0) rgba(0, 0, 0, 0);
}
.yellow.topright:before {
    border-color: #ffb500 rgba(255, 255, 255, 0) rgba(0, 0, 0, 0) rgba(0, 0, 0, 0);
}
.green.topright:before {
    border-color: #6a7621 rgba(255, 255, 255, 0) rgba(0, 0, 0, 0) rgba(0, 0, 0, 0);
}
.brown.topright:before {
    border-color: #2b1e15 rgba(255, 255, 255, 0) rgba(0, 0, 0, 0) rgba(0, 0, 0, 0);
}
.beige.topright:before {
    border-color: #e3d297 rgba(255, 255, 255, 0) rgba(0, 0, 0, 0) rgba(0, 0, 0, 0);
}
.red.centerright:before,
.yellow.centerright:before,
.green.centerright:before,
.brown.centerright:before,
.beige.centerright:before {
    left: -30px;
    top: 15px;
    border-width: 15px 0 0 30px; 
}
.red.centerright:before {
    border-color: #de1827 rgba(255, 255, 255, 0) rgba(0, 0, 0, 0) rgba(0, 0, 0, 0);
}
.yellow.centerright:before {
    border-color: #ffb500 rgba(255, 255, 255, 0) rgba(0, 0, 0, 0) rgba(0, 0, 0, 0);
}
.green.centerright:before {
    border-color: #6a7621 rgba(255, 255, 255, 0) rgba(0, 0, 0, 0) rgba(0, 0, 0, 0);
}
.brown.centerright:before {
    border-color: #2b1e15 rgba(255, 255, 255, 0) rgba(0, 0, 0, 0) rgba(0, 0, 0, 0);
}
.beige.centerright:before {
    border-color: #e3d297 rgba(255, 255, 255, 0) rgba(0, 0, 0, 0) rgba(0, 0, 0, 0);
}
.red.centerleft:before,
.yellow.centerleft:before,
.green.centerleft:before,
.brown.centerleft:before,
.beige.centerleft:before {
    right: -30px;
    top: 15px;
    border-width: 15px 30px 0 0;    
}
.red.centerleft:before {
    border-color: #de1827 rgba(255, 255, 255, 0) rgba(0, 0, 0, 0) rgba(0, 0, 0, 0);
}
.yellow.centerleft:before {
    border-color: #ffb500 rgba(255, 255, 255, 0) rgba(0, 0, 0, 0) rgba(0, 0, 0, 0);
}
.green.centerleft:before {
    border-color: #6a7621 rgba(255, 255, 255, 0) rgba(0, 0, 0, 0) rgba(0, 0, 0, 0);
}
.brown.centerleft:before {
    border-color: #2b1e15 rgba(255, 255, 255, 0) rgba(0, 0, 0, 0) rgba(0, 0, 0, 0);
}
.beige.centerleft:before {
    border-color: #e3d297 rgba(255, 255, 255, 0) rgba(0, 0, 0, 0) rgba(0, 0, 0, 0);
}
.red.bottomleft:before,
.yellow.bottomleft:before,
.green.bottomleft:before,
.brown.bottomleft:before,
.beige.bottomleft:before {
    right: 15px;
    top: -30px;
    border-width: 0 0 30px 15px; 
}
.red.bottomleft:before {
    border-color: rgba(255, 255, 255, 0) rgba(0, 0, 0, 0) #de1827 rgba(0, 0, 0, 0);
}
.yellow.bottomleft:before {
    border-color: rgba(255, 255, 255, 0) rgba(0, 0, 0, 0) #ffb500 rgba(0, 0, 0, 0);
}
.green.bottomleft:before {
    border-color: rgba(255, 255, 255, 0) rgba(0, 0, 0, 0) #6a7621 rgba(0, 0, 0, 0);
}
.brown.bottomleft:before {
    border-color: rgba(255, 255, 255, 0) rgba(0, 0, 0, 0) #2b1e15 rgba(0, 0, 0, 0);
}
.beige.bottomleft:before {
    border-color: rgba(255, 255, 255, 0) rgba(0, 0, 0, 0) #e3d297 rgba(0, 0, 0, 0);
}
.red.bottomright:before,
.yellow.bottomright:before,
.green.bottomright:before,
.brown.bottomright:before,
.beige.bottomright:before {
    left: 15px;
    top: -30px;
    border-width: 0 15px 30px 0;    
}
.red.bottomright:before {
    border-color:rgba(255, 255, 255, 0) rgba(0, 0, 0, 0) #de1827 rgba(0, 0, 0, 0);
}
.yellow.bottomright:before {
    border-color: rgba(255, 255, 255, 0) rgba(0, 0, 0, 0) #ffb500 rgba(0, 0, 0, 0);
}
.green.bottomright:before {
    border-color: rgba(255, 255, 255, 0) rgba(0, 0, 0, 0) #6a7621 rgba(0, 0, 0, 0);
}
.brown.bottomright:before {
    border-color: rgba(255, 255, 255, 0) rgba(0, 0, 0, 0) #2b1e15 rgba(0, 0, 0, 0);
}
.beige.bottomright:before {
    border-color: rgba(255, 255, 255, 0) rgba(0, 0, 0, 0) #e3d297 rgba(0, 0, 0, 0);
}

/**************** Contact Us CSS ***************/
/* icons css are in css3buttons.css because of mfglabs iconset */
.contact_form_div br {
    display: none;
}
.contact_detail_block{
    padding-bottom: 15px;
    display: block;
}
.map_block {
    margin-bottom: 35px;
    display: block;
}
.contact_detail_block .row {
    line-height: 1.2em;
    margin-bottom: 15px;
}
.contact_label {
    margin-bottom: 5px;
    font-style: italic;
    color: #906b51;
}
.contact_field {
    margin-bottom: 18px;
}
.contact_form_div br{
    line-height: 0.25em;
}
.contact_form {
    margin-bottom: 15px;
}
#recaptcha_widget_div {
    margin-top: 25px;
}
.map {
    margin: 0 !important;
    position: relative !important;
}
.contact_detail_block img {
    border: none !important;
}
.orgtitle {
    overflow: hidden;
    text-overflow: ellipsis; /* adds break ... */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 7;   /* number of lines to show */    
    height: 2.8em;       /* fallback */
}
.orgtitle, .orgname {
    line-height: 1.3em;        /* fallback */
}
/*Organisation Tree*/

.orgchart {
    width: auto;
    margin-left: auto;
    margin-right: auto;    
}
.orgchart { /*added on 07 Jan 2014*/
    width: 580px;
    height: 415px;
    background: url('images/org_chart_small.png') top center no-repeat;
    position: relative;
    margin-bottom: 20px;
}
.bodir {
    width: 155px;
    height: 26px;
    position: absolute;
    top: 12px;
    left: 195px;
    display: block;
    border: 2px solid #ffb500;
    border-radius: 5px;
    -moz-box-shadow:    0 0 5px 1px #ffd500;
    -webkit-box-shadow:   0 0 5px 1px #ffd500;
    box-shadow:           0 0 5px 1px #ffd500;
}
.bodir:hover {
    background: rgba(221, 255, 117, 0.2);
}
.orgchart ul {
    padding-top: 20px;
    position: relative;
    transition: all 0.5s;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
}
.orgchart li {
    float: left; text-align: center;
    list-style-type: none;
    position: relative;
    padding: 20px 5px 0 5px;
    transition: all 0.5s;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
}
.stackbranch li {
    float: none;
    display: block;
    text-align: center;
    list-style-type: none;
    position: relative;
    padding: 20px 5px 0 5px;
    transition: all 0.5s;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
}

/*We will use ::before and ::after to draw the connectors*/

.orgchart li::before, .orgchart li::after{
    content: '';
    position: absolute; top: 0; right: 50%;
    border-top: 1px solid #ccc;
    width: 50%; height: 20px;
}
.orgchart li:after{
    right: auto; left: 50%;
    border-left: 1px solid #ccc;
}
.stackbranch {
    border-left: 1px solid #ccc;
}

/*We need to remove left-right connectors from elements without 
any siblings*/
.orgchart li:only-child::after, .orgchart li:only-child::before {
    display: none;
}
.stackbranch li:only-child::after, .stackbranch li:only-child::before {
    display: none;
}

/*Remove space from the top of single children*/
.orgchart li:only-child { padding-top: 0;}
.stackbranch li:only-child { padding-top: 0;}

/*Remove left connector from first child and 
right connector from last child*/
.orgchart li:first-child::before, .orgchart li:last-child::after, .stackbranch li::after{
    border: 0 none;
}
.stackbranch li::before{
    border-right: 1px solid #ccc;
}
/*Adding back the vertical connector to the last nodes*/
.orgchart li:last-child::before{
    border-right: 1px solid #ccc;
    border-radius: 0 5px 0 0;
    -webkit-border-radius: 0 5px 0 0;
    -moz-border-radius: 0 5px 0 0;
}
.orgchart li:first-child::after{
    border-radius: 5px 0 0 0;
    -webkit-border-radius: 5px 0 0 0;
    -moz-border-radius: 5px 0 0 0;
}
.stackbranch li:last-child::before, .stackbranch li:first-child::after{
    border-right: none;
    border-radius: 0;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
}

/*Time to add downward connectors from parents*/
.stackbranch::before{
    border-left: none;
}
.orgchart ul ul::before{
    content: '';
    position: absolute; top: 0; left: 50%;
    border-left: 1px solid #ccc;
    width: 0; height: 20px;
    margin-left: -1px;
}

.orgchart li .job_desc{
    border: 1px solid #ccc;
    padding: 5px 10px;
    text-decoration: none;
    color: #666;
    font-family: arial, verdana, tahoma;
    font-size: 11px;
    display: inline-block;

    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;

    transition: all 0.5s;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
}

/*Time for some hover effects*/
/*We will apply the hover effect the the lineage of the element also*/
.orgchart li .job_desc:hover, .orgchart li .job_desc:hover+ul li .job_desc {
    background: #c8e4f8;
    color: #000;
    border: 1px solid #94a0b4;
}
/*Connector styles on hover*/
.orgchart li .job_desca:hover+ul li::after, 
.orgchart li .job_desc:hover+ul li::before, 
.orgchart li .job_desc:hover+ul::before, 
.orgchart li .job_desc:hover+ul ul::before{
    border-color:  #94a0b4;
}
li .just-line {
display: none;
}
a.just-line + ul {
    padding-top: 74px;
}
a.just-line + ul:before {
    height: 74px;
}