/**
 * Place your custom styles here.
 */

body{
    background: #CCCCCC url(../images/background.jpg) fixed 50% 0 no-repeat;
    font-family: arial;
    font-size: 14px;
}
h1,h2,h3{
    font-weight: bold;
}
h1{
    font-size: 30px;
}
h2{
    font-size: 20px;
}
h3{
    font-size: 18px;
}
a{
    text-decoration: none;     
    color: #D58400;
}
    a:hover, a:focus{
        text-decoration: none;
        outline: none;
    }
    .node a{
        color: #D58400;
        font-weight: bold;
    }
img{
    margin: 5px 5px;
}
hr{
    border: 0;
    border-bottom: 1px solid #CCCCCC;
}
/* node table */
.node table{
    margin: 20px 0;
}
    .node table th{
        background: #CCCCCC;
        padding: 5px 10px;   
        border: 1px solid #333333;
    }
    .table > thead > tr > th{
        border: 1px solid #333333;
    }
    .table > caption + thead > tr:first-child > th,
    .table > colgroup + thead > tr:first-child > th,
    .table > thead:first-child > tr:first-child > th,
    .table > caption + thead > tr:first-child > td,
    .table > colgroup + thead > tr:first-child > td,
    .table > thead:first-child > tr:first-child > td{
        border-top: 1px solid #333333;
    }
    
    .node table td{
        border: 1px solid #333333;
        padding: 10px 10px;
    }
    
/* views table */
.views-table{
    margin: 20px 0;
}
    .views-table th{
        background: #333333;
        padding: 5px 10px;
        border: 0;
        color: #FFFFFF;
    }
        .views-table > thead > tr > th{
            border: 0;
        }
    .views-table tr{
    
    }
    .views-table td{
        padding: 10px 10px;
    }    
    
/* list */
li{
    margin-bottom: 5px;
}

/* Breadcrumb */
.breadcrumb{
    background: #3f3f3f; /* Old browsers */
    background: -moz-linear-gradient(top,  #3f3f3f 0%, #2f2f2f 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top,  #3f3f3f 0%,#2f2f2f 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom,  #3f3f3f 0%,#2f2f2f 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3f3f3f', endColorstr='#2f2f2f',GradientType=0 ); /* IE6-9 */
    border-radius: 0;
    color: #999999;
    margin: 0;
    font-size: 12px;
}
    .breadcrumb a{
        color: #D58400;
    }
    .breadcrumb:before{
        content: "You are here: ";
        margin-right: 5px;    
    }
    .breadcrumb li{
        background: url(../images/breadcrumb-arrow.png) 100% 55% no-repeat;
        padding-right: 10px;
    }
    .breadcrumb li.active{
        background: none;
    }
    .breadcrumb > li + li::before {
      content: "";
    }
.page{
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.8);
    margin: 0 auto;
    background: #DDDDDD;
}  
/* Slideshow */
.view-slideshow img{
    margin: 0;
}

/* Home page */
#homepage h1.pane-title{
    font-size: 18px;
    text-transform: uppercase;
}

/* Main container */
.main-container{
    
}
    .main-container .row{
        padding: 20px 10px;    
    }
.main-container .col-sm-9{
    background: #FFFFFF; 
    border-radius: 7px;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
    border: 1px solid #FFFFFF;
    width: 100%;
}
body.not-front .main-container section.col-sm-12{
    background: #FFFFFF; 
    border-radius: 7px;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
    border: 1px solid #FFFFFF;
    padding: 20px 30px;
}
.page-header{
    font-size: 30px;
    margin: 15px 0;
    color: #00A850;
    text-transform: uppercase;
}
.tabs--primary{
    margin: 20px 0;
}
    
#sidebar-second{
    padding-right: 0; 
    padding-left: 0; 
    margin-top: 10px;  
}
    #sidebar-second .region-sidebar-second.well{
        background: #FFFFFF; 
        border-radius: 7px;
        border: 1px solid #FFFFFF;
        box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);    
    }
    
/* Main menu */
#navbar{
    border-bottom: 3px solid #D58400;
    margin: 0 0 10px 0;
    background: #4d4d4d; /* Old browsers */
    background: -moz-linear-gradient(top,  #4d4d4d 0%, #353536 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top,  #4d4d4d 0%,#353536 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom,  #4d4d4d 0%,#353536 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4d4d4d', endColorstr='#353536',GradientType=0 ); /* IE6-9 */ 
}
    .navbar.container{
        width: 100%;
        max-width: unset;
        border: 0;
        border-radius: 0;
    }
        .navbar.container ul{
        
        }
        .navbar.container ul li{
            margin: 0;
        }
        .navbar.container ul li a{
            color: #999999;
            font-weight: bold;
            transition: background 0.3s ease-out, color 0.3s ease-out;
            border-right: 1px solid #59595B;
        }
            .navbar.container ul li.last a{
                border-right: 0;
            }
        .navbar.container ul li li a{
            color: #999999;
            padding: 10px 20px;
            font-size: 13px;
        }
    .navbar-default .navbar-nav > .active > a, 
    .navbar-default .navbar-nav > .active > a:hover, 
    .navbar-default .navbar-nav > .active > a:focus{
        color: #FFFFFF;
        background: #fdb134; /* Old browsers */
        background: -moz-linear-gradient(top,  #fdb134 0%, #d58400 100%); /* FF3.6-15 */
        background: -webkit-linear-gradient(top,  #fdb134 0%,#d58400 100%); /* Chrome10-25,Safari5.1-6 */
        background: linear-gradient(to bottom,  #fdb134 0%,#d58400 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fdb134', endColorstr='#d58400',GradientType=0 ); /* IE6-9 */
    }
    .navbar-default .navbar-nav > .open > a, 
    .navbar-default .navbar-nav > .open > a:hover, 
    .navbar-default .navbar-nav > .open > a:focus{
    
    }
    .dropdown-menu > li > a:hover,
    .dropdown-menu > li > a:focus{
        background: #414141;
    }
    .navbar-default .navbar-nav > li > a:hover, 
    .navbar-default .navbar-nav > li > a:focus {
        background: #808080;
        color: #FFFFFF;
    }
    .navbar-default .navbar-nav > li.active-trail > a{
        color: #FFFFFF;    
    }
    .navbar-default .navbar-nav .dropdown-menu{
        padding: 0;
        background: #4d4d4d; /* Old browsers */
        background: -moz-linear-gradient(top,  #4d4d4d 0%, #353536 100%); /* FF3.6-15 */
        background: -webkit-linear-gradient(top,  #4d4d4d 0%,#353536 100%); /* Chrome10-25,Safari5.1-6 */
        background: linear-gradient(to bottom,  #4d4d4d 0%,#353536 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4d4d4d', endColorstr='#353536',GradientType=0 ); /* IE6-9 */ 
    }
    .dropdown-menu > .active > a,
    .dropdown-menu > .active > a:hover,
    .dropdown-menu > .active > a:focus{
        background: none;
        color: #FFFFFF !important;
    }
    
    
/* Branding */
#branding{
    text-align: center;
    padding: 10px 0;
    
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,d2d2d2+100 */
background: #ffffff; /* Old browsers */
background: -moz-linear-gradient(top,  #ffffff 0%, #d2d2d2 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  #ffffff 0%,#d2d2d2 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  #ffffff 0%,#d2d2d2 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#d2d2d2',GradientType=0 ); /* IE6-9 */

    
}
    #branding .block{
        display: inline-block;
    }
    #branding .sabah-crest{
        display: none;
    }
    #branding .logo{
        display: none;
    }
    #branding .welcome-to-text.block{
        display: none;
    }
    #branding .sabc-text.block{
        display: none;
    }
    #branding .official-website-text.block{
        display: none;
    }
    #branding .sitename-mobile{
        display: none; /* hide temporarily, looks nice without */
        text-shadow: 0 1px 0 #FFFFFF;
    }
    
    
/* News and publications */
.view-news-and-publications{

}
    .view-news-and-publications ul{
        margin: 0;
        padding: 0; 
    }
    .view-news-and-publications ul li{
        list-style: none;
        margin: 0 0 30px 0;
        padding: 0 0 20px 0;
        border-bottom: 2px dotted #808080;
    }
    .view-news-and-publications .view-content .field-content ul li{
        border: 0;
        padding: 0;
        margin-bottom: 10px;
        margin-left: 25px;
        list-style: disc;
    }
    .view-news-and-publications .views-field-title{
        margin-bottom: 20px;
    } 
    .view-news-and-publications.view-display-id-block .views-field-title a
    {
        color: #00A850;
        font-weight: bold;
        background: url(../../less/images/sabc-icon.jpg) no-repeat;
        padding-left: 40px;
    }
    
/* In focus */   
#block-views-in-focus-block h2.block-title{
    color: #FFFFFF;
    background: #4d4d4d; /* Old browsers */
    background: -moz-linear-gradient(top,  #7F7F7F 0%, #393939 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top,  #7F7F7F 0%,#393939 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom,  #7F7F7F 0%,#393939 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7F7F7F', endColorstr='#393939',GradientType=0 ); /* IE6-9 */ 
    font-size: 15px;
    padding: 7px 10px;
    font-weight: bold;
    border-radius: 5px;
    text-transform: uppercase;
}
.view-in-focus{

}
    .view-in-focus ul{
        margin: 0;
        padding: 0;
    }
    .view-in-focus ul li{
        list-style: none;
        border-bottom: 2px dotted #808080;
        padding: 0 0 10px 0;
        margin: 0 0 20px 0;
    }
    .view-in-focus ul li img{
        margin: 0 0 10px 0;
        width: 100%;
    }
    .view-in-focus .views-field-title{
        font-size: 13px;
        font-weight: bold;
    }
    .view-in-focus .views-field-field-body{
        font-size: 12px;
    }
    
/* Footer first */
#footer-first{
    background: #1D1D1D;
    margin: 20px 0 5px 0;
}
    #footer-first ul{
        text-align: center;
    }
    #footer-first ul li{
        display: inline-block;
        margin: 0;
    }
    #footer-first ul li a{
        color: #FDB134;
        font-size: 13px;
    }
    #footer-first .nav > li > a:hover,
    #footer-first .nav > li > a:focus{
        background: none;
    }
    
/* Footer second */
#footer-second{
    padding: 20px 20px;
    font-size: 13px;
}
    #footer-second a{
        text-shadow: 0 1px 0 #FFFFFF;
    }
    
.img-responsive{
    display: inline-block;
}

/* edit button */
.views-field-edit-node{
    text-align: right;
}
    .views-field-edit-node a{
        color: #FFFFFF;
        background: #FDB134;
        display: inline-block;
        padding: 5px 10px;
        transition: background 0.3s ease-out;
    }   
    .views-field-edit-node a:hover{
        background: #D14934;   
    }
    
/* button */
.btn-primary{
    background-color: #00A850;
    border-color: #00A850;
    transition: background 0.3s ease-out;
}
    
/* pagination */
.pagination > .active > a,
.pagination > .active > span,
.pagination > .active > a:hover,
.pagination > .active > span:hover, 
.pagination > .active > a:focus, 
.pagination > .active > span:focus{
    background-color: #00A850;
    border-color: #00A850;
}
.pagination > li > a,
.pagination > li > span{
    color: #00A850;
    transition: color 0.3s ease-out;
}
.pagination > li > a:hover,
.pagination > li > span:hover,
.pagination > li > a:focus,
.pagination > li > span:focus{
    color: #000000;
}
/* accordion */
.node .acc-head{
    display: block;
    border: 1px solid #CCCCCC;
    color: #444444;
    padding: 3px 10px 3px 10px;
    border-radius: 5px;
    
    background: #f8f8f8; /* Old browsers */
    background: -moz-linear-gradient(top,  #f8f8f8 0%, #e9e9e9 50%, #e0e0e0 52%, #e5e5e5 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top,  #f8f8f8 0%,#e9e9e9 50%,#e0e0e0 52%,#e5e5e5 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom,  #f8f8f8 0%,#e9e9e9 50%,#e0e0e0 52%,#e5e5e5 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f8f8f8', endColorstr='#e5e5e5',GradientType=0 ); /* IE6-9 */

    
}      
    .acc-head span{
        background: url(../images/icon-logo.png) 10px 50% no-repeat !important;
        display: inline-block;
        padding-left: 32px !important;
    }
    
/* Sort */
.sort-button{
    text-align: right;
}
.sort-button a{
    color: #FFFFFF;
    background: #00A850;
    display: inline-block;
    padding: 5px 10px;
    transition: background 0.3s ease-out;
}   
.sort-button a:hover{
    background: #D14934;   
}