/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : Oct 7, 2015, 8:54:12 AM
    Author     : Mayom
*/

// colors
$vfRed : #e60000;
#cas{
    overflow: hidden;
}

/*login start*/
#login-rhombus-img{
    position: relative;
    top: -340px;
    left: -30px;
    display: block;
    z-index: 1;
}
#form-div{
    background-color: $vfRed;
    direction: rtl;
    top: 145px;
    border-radius: 5px;
    padding-bottom: 20px;
    h2{
        color: white;
        font-family: tahoma;
        font-weight: bold;
        text-align: right;
    }
    form{
        text-align: right;
        div{
            label{
                color: white;
                font-family:tahoma;
            }
            input{
                width: 50%;

            }
            button{
                padding-left: 20px;
                padding-right: 20px;
                margin-left: 10px;
                background-color: #238A23;
                border: none;
                border-radius: 10px;
            }
            a{
                color:white;
                font-size: 20px;
                &hover{
                    text-decoration: none;
                }
            }

        }
    }
}
@media (max-width: 1200px){
    #login-rhombus-img{
        img{
            display: none;
        }
    }

}
@media ( max-width: 800px){
    #form-div{
        h2{
            font-size: 16px;
        }
        form{
            div{
                input{
                    width:100%;
                }
            }
        }
    }
}
/* login end */

#en-page{
    background-color: #f4f4f4;
    @media (min-width: 1200px){
        .container {
            width: 1000px;
        }
    }
    .navbar.vf-navbar{
        margin-bottom: 0px;
        background-color: #ebebeb;
        min-height: 39px;
        ul.nav{
            li{
                a{
                    padding-top: 8px;
                    padding-bottom: 8px;
                }
            }
        }
    }
    .nav-custom{

        width: 969px;
    }
    #main-navbar{
        margin-top: 10px;
        margin-left: 55px;
        .navbar{
            background-color: #E60000;
            border-radius: 0px;
            color: white;
            margin-bottom: 40px;
            .dropdown:hover .dropdown-menu {
                display: block;
            }
            ul.nav{
                li{
                    padding-right:30px;
                    a{
                        color: white;
                        font-size: 18px;

                    }
                    ul{
                        li{
                            a{
                                color: black;
                                font-size: 15px;
                            }
                        }
                        &:hover {
                            display: block;
                        }
                    }

                }
            }
        }

    }
    .main-content{
        min-height:500px;  


        .thumbnail{
            padding:2px;
            min-height: 300px;
            .title{
                background-color: #EBEBEB;
                padding: 3px;
                padding-left: 15px;
                h5{
                    font-weight: bold;
                    font-size: 15px;
                }
            }
            .vf-img-container{
                width: 70px;
                height: 70px;
                display: inline;
                float: left;
                padding-right: 110px;
                margin-left:15px;
                img{
                    padding-top: 10px;
                    float:left;
                }
            }
            .vf-linkslist{
                    padding-left: 125px;
                        padding-right: 20px;
                li{
                    list-style: none;
                        padding-top: 5px;
                        border-bottom: 1px solid #eee;
    padding-bottom: 5px;
                    a{    padding: 7px;
                        color: #333333;
                        font-size: 13px;
                        text-decoration: none;
                      
                    }
                  
                  a:hover{ 
                 color:#bd0000;
                  }
                }
                     li:hover{ 
                  background:none #eee;
                  }
                    
                }
            
        }
        .vf-sidebar{
            h5{
                color: black;
                padding: 10px;
                font-size: 15px;
                font-weight: bold;
                background-color: #EBEBEB;
                border: 1px solid white;
            }     
            #cssmenu {
                padding: 0;
                margin: 0;
                border: 0;
                line-height: 1;
            }
            #cssmenu ul,
            #cssmenu ul li,
            #cssmenu ul ul {
                list-style: none;
                margin: 0;
                padding: 0;
            }
            #cssmenu ul {
                position: relative;
                z-index: 597;
                float: left;
            }
            #cssmenu ul li {
                float: left;
                min-height: 1px;
                line-height: 1em;
                vertical-align: middle;
                position: relative;
            }
            #cssmenu ul li.hover,
            #cssmenu ul li:hover {
                position: relative;
                z-index: 599;
                cursor: default;
            }
            #cssmenu ul ul {
                visibility: hidden;
                position: absolute;
                top: 100%;
                left: 0px;
                z-index: 598;
                width: 100%;
            }
            #cssmenu ul ul li {
                float: none;
            }
            #cssmenu ul ul ul {
                top: -2px;
                right: 0;
            }
            #cssmenu ul li:hover > ul {
                visibility: visible;
            }
            #cssmenu ul ul {
                top: 1px;
                left: 99%;
            }
            #cssmenu ul li {
                float: none;
            }
            #cssmenu ul ul {
                margin-top: 1px;
            }
            #cssmenu ul ul li {
                font-weight: normal;
            }
            /* Custom CSS Styles */
            #cssmenu {
                width: 230px;
                background: white;
                font-family: 'Oxygen Mono', Tahoma, Arial, sans-serif;
                zoom: 1;
                font-size: 12px;
            }
            #cssmenu:before {
                content: '';
                display: block;
            }
            #cssmenu:after {
                content: '';
                display: table;
                clear: both;
            }
            #cssmenu a {
                display: block;
                padding: 15px 20px;
                color:#333333;
                text-decoration: none;
                text-transform: uppercase;
            }
            #cssmenu > ul {
                width:  230px;
                        padding-left: 5px;
    padding-right: 5px;
    padding-bottom: 20px;

            }
            #cssmenu ul ul {
                width: 230px;
            }
            #cssmenu > ul > li > a {
                border-bottom: 1px solid #eee;
                color: #333333;
            }
            #cssmenu > ul > li > a:hover {
                color:#bd0000;
            }
            #cssmenu > ul > li.active a {
                background: #eee;
            }
            #cssmenu > ul > li a:hover,
                #cssmenu > ul > li:hover a {
               /* background: #1b9bff;*/
            }
            #cssmenu li {
                position: relative;
            }
            #cssmenu ul li.has-sub > a:after {
                content: '+';
                position: absolute;
                top: 50%;
                right: 15px;
                margin-top: -6px;
            }
            #cssmenu ul ul li.first {
                -webkit-border-radius: 0 3px 0 0;
                -moz-border-radius: 0 3px 0 0;
                border-radius: 0 3px 0 0;
            }
            #cssmenu ul ul li.last {
                -webkit-border-radius: 0 0 3px 0;
                -moz-border-radius: 0 0 3px 0;
                border-radius: 0 0 3px 0;
                border-bottom: 0;
            }
            #cssmenu ul ul {
                -webkit-border-radius: 0 3px 3px 0;
                -moz-border-radius: 0 3px 3px 0;
                border-radius: 0 3px 3px 0;
            }
            #cssmenu ul ul {
                border: 1px solid #0082e7;
            }
            #cssmenu ul ul a {
                font-size: 12px;
                color:#333333;
            }
            #cssmenu ul ul a:hover {
                color: #333333;
            }
            #cssmenu ul ul li {
                border-bottom: 1px solid #0082e7;
            }
            #cssmenu ul ul li:hover > a {
               /* background: #4eb1ff;*/
                color: #333333;
            }
            #cssmenu.align-right > ul > li > a {
                border-left: 4px solid #1b9bff;
                border-right: none;
            }
            #cssmenu.align-right {
                float: right;
            }
            #cssmenu.align-right li {
                text-align: right;
            }
            #cssmenu.align-right ul li.has-sub > a:before {
                content: '+';
                position: absolute;
                top: 50%;
                left: 15px;
                margin-top: -6px;
            }
            #cssmenu.align-right ul li.has-sub > a:after {
                content: none;
            }
            #cssmenu.align-right ul ul {
                visibility: hidden;
                position: absolute;
                top: 0;
                left: -100%;
                z-index: 598;
                width: 100%;
            }
            #cssmenu.align-right ul ul li.first {
                -webkit-border-radius: 3px 0 0 0;
                -moz-border-radius: 3px 0 0 0;
                border-radius: 3px 0 0 0;
            }
            #cssmenu.align-right ul ul li.last {
                -webkit-border-radius: 0 0 0 3px;
                -moz-border-radius: 0 0 0 3px;
                border-radius: 0 0 0 3px;
            }
            #cssmenu.align-right ul ul {
                -webkit-border-radius: 3px 0 0 3px;
                -moz-border-radius: 3px 0 0 3px;
                border-radius: 3px 0 0 3px;
            }
        }
        .vf-content{
            min-height:550px;
            background-color: white;
            h5{
                color: black;
                padding: 10px;
                font-size: 15px;
                font-weight: bold;
                background-color: #EBEBEB;
                border: 1px solid white;
            }    
        }

    }
    .footer-custom{
        height: 100px;
        background-color: #ebebeb;
        text-align: center;
        border-top: 1px solid #ccc;

    }
    /* logo */
    .rhombus {
        position: absolute;
        right :12%;
        top: 40px;
        height: 52px;
        width: 816px;
        background-color: #e60000;
        z-index: 101;
    }

    .rhombusBefore {
        position: absolute;
        right: -34px;
        top: 50px;
        width: 0;
        height: 0;
        border-left: 850px solid #e60000;
        border-bottom: 840px solid transparent;
        content: '';
        -moz-transform: scale(.9999);
    }

    .rhombusAfter {
        position: absolute;
        right: -30px;
        bottom: 40px;
        width: 0;
        height: 0;
        border-left: 850px solid #e60000;
        border-top: 840px solid transparent;
        content: '';
        -moz-transform: scale(.9999);
    }

    .rhombus img {
        position: absolute;
        right: -40px;
        top: 3px;
        z-index: 102;
    }




    /*.holder {
       position: relative;
       height:500px;
       overflow:hidden;
       margin: 0 auto;
       z-index: 999;
   }*/
    .holder {
        position: absolute;
        top: 0;
        height: 500px;
        overflow: hidden;
        margin: 0 auto;
        z-index: 999;
        left: 0;
        width: 365px;
    }

}

@media ( max-width: 480px){
    .main-content .thumbnail .vf-linkslist {
        width: 100%;
        margin-right: 0;
    }
    .navbar-nav {
        margin: 0;
    }
    .main-content .thumbnail .vf-linkslist li {
        width: auto;
        margin: 0 10px;
        display: block;
        line-height: 25px;
    }
    .navbar-default .navbar-toggle {
        background-color: #ebebeb;
        margin-left: 15px;
    }
    .carousel {
        margin-right: 0;
    }
    .main-content .col-lg-6 {
        width: 100%;
    }
    .carousel-control {
        top: 40px;
    }
    .carousel-inner {
        height: 150px;
    }

    .Cuscolumn {
        float: none;
        display: block;
    }
    .web-part {
        float: left;
        position: relative;
        width: 100%;
        margin: 10px 0;
    }

    .footer-custom {
        float: left;
        width: 100%;
    }
    #pubSearsh {
        margin-left: 30px;
    }
    .wrMain {
        margin-left: 0;
        margin-bottom: 0;
    }
    .CusSec a {
        display: block;
        text-align: center;
    }
    .form-row > .input-wrapper {
        width: 100% !important;
        text-align: center;
    }
    .form-row > .input-wrapper a{
        width: 100%;
    }
    .nav-wraper .navbar ul.nav li.vf-dropdown {
        float: none;
    }
    .main-content .vf-content {
        float: left;
        margin-top: 15px;
    }
}

.errorContent {
    padding: 10px;
    margin-top: 15px;
}

.categoriesWrapper {
    width: 1050px;
    float: left;
}