﻿body {
    color: #666;
	background-color: #fff;
	font-family: "Open Sans", Arial, sans-serif;
	font-size: 14px;
	font-weight: 500;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	line-height: 1.7em;
    padding: 0;
    margin: 0;
}

header{
    position: relative;
	z-index: 99999;
	top: 0;
	width: 100%;
	background-color: #fff;
	-webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
	-moz-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
	box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
	font-weight: 500;
	line-height: 23px;
}

span.logo_helper {
    display: inline-block;
    width: 0;
    height: 100%;
    vertical-align: middle;
}

#main-header .container {
    max-width: 100%;
    width: 97%;
    position: relative;
    text-align: left;
}
header #main-header {
    position: relative;
    top: 0px !important;
    border-top: 4px solid #0e7b9c;
}

#container {
    padding-bottom: 60px;
    position: absolute;
    /*text-align: center;*/
    margin: auto;
    min-height:94%;
    min-width:100%;
}
/*
.clearfix:after { 
    visibility: hidden; 
    display: block; 
    font-size: 0; 
    content: " "; 
    clear: both; 
    height: 0; 
}
.logo_container {
    position: relative;
    width: 80%;
    float: left;
    margin-top: 15px;
      margin-bottom: 15px;
}

#main-content{
    margin-top: 60px;
}

#main-content  .button_container .button {
    float: none !important;
    margin: 0 auto;
    display: block;
    max-width: 100%;
    margin-bottom: 20px;
    text-align: center;
}

.formtextbox{
    margin: 0;
    padding: 0.7em;
    border: 1px solid #ddd;
    color: #666;
    font-size: 14px;
    line-height: normal !important;
    width:200px;
}

.submitbutton{
    clear: none;
    height: 42px;
    margin: 0;
    font-size: 14px;
    line-height: normal;
    background: #fdc336;
    color: #fff;
    border: 0;
    padding: 0.7em;
    width: 222px;
}

/*footer*/
#footer {
    background: #fff;
    border-top: 1px solid #dadada;
    color: #888888;
    font-size: 13px;
    height: 31px;
    line-height: 31px;
    padding-bottom: 20px;
    bottom: 0;
    width: 100%;
    position: fixed;
}

.footer-wrapper {
    -moz-box-sizing: content-box;
    box-sizing: content-box;
    margin: 0 auto;
    padding: 0 20px;
    width: 90%;
}

.footer-right {
    float: right;
    line-height: 24px;
    margin-top: 4px;
    text-align: right;
}

.footer-right > a {
    color: #888888;
    float: left;
    margin-left: 30px;
    text-decoration: none;
}

.footer-right > a:hover, .footer-right > a:focus {
    text-decoration: none;
    color: #000000;
}
/*end footer*/



.et_pb_main_blurb_image {
    background: #a64499;
    padding: 8px;
    width: 80px;
    height: 80px;
    margin-top: -68px !important;
    border-radius: 100%;
    background-color: #34495e;
    margin: 0 auto;
    text-align: center;
    border-color: #a94a9d;
    border: 5px solid #a94a9d;
}

a {
    color: #888888;
    text-decoration: none;
}


.formtextbox{
    margin: 0;
    padding: 0.7em;
    border: 1px solid #ddd;
    color: #666;
    font-size: 14px;
    line-height: normal !important;
    width:200px;
}

.submitbutton {
    clear: none;
    height: 42px;
    margin: 0;
    font-size: 14px;
    line-height: normal;
    background: #fdc336;
    color: #fff;
    border: 0;
    padding: 0.7em;
    width: 222px;
}

.imgbutton{
    clear: none;
    height: 42px;
    margin: 0;
    font-size: 14px;
    line-height: normal;
    background: #fdc336;
    color: #fff;
    border: 0;
    padding: 0.7em;
    width: 222px;
}

/*from acquire*/
.taba {
    text-decoration: none;
    font-size: 13px;
    display: block;
    padding: 4px 18px 4px 18px;
    float: left;
}

.tabinitial {
    height: 20px;
    text-decoration: none;
    font-size: 13px;
    background-color: #f8f8f8;
    color: black;
    font-weight: bold;
    border-bottom: 1px solid #dadada;
    height: 20px;
    margin-bottom: -4px;
}

    .tabinitial:hover {
        color: #FDB913;
        background-color: #fff;
        cursor: pointer;
    }

.tabclicked {
    height: 20px;
    text-decoration: none;
    font-size: 13px;
    background-color: #fff;
    font-weight: bold;
    color: black;
    border-left: 1px solid #dadada;
    border-right: 1px solid #dadada;
    border-top: 1px solid #dadada;
    border-bottom: 1px solid white;
    margin-bottom: -4px;
}
.grid {
    margin-top: 10px;
    min-width: 90%;
    font: normal 9pt "Lato", sans-serif; /* Verdana, Geneva, Arial, Helvetica, sans-serif;*/
    border-style: none;
    border-width: 0;
    color: #777777;
}

    .grid a {
        text-decoration: none;
        color: #777777;
    }

.gridheader {
    font: bold 10pt "Lato", sans-serif;
    color: #777777;
    background-color: #fff;
}

    .gridheader a {
        font: bold 10pt "Lato", sans-serif;
        color: #777777;
        text-decoration: none;
    }

.ahref {
    color: #777777;
    font-size: 13px;
}

    .ahref:hover {
        color: #000000;
    }

.font14black {
    font-size: 14px;
    color: black;
    font-weight: bold;
}

.table1 {
    font: normal 10pt "Lato", sans-serif;
    min-width: 90%;
    width: 90%;
    color: #777777;
}

.grid1 {
    font: normal 10pt "Lato", sans-serif;
    min-width: 100%;
    color: #777777;
}

    .grid1 td {
        border-bottom: 1px solid #dadada;
    }

        .grid1 td a {
            color: #777777;
        }

            .grid1 td a:hover {
                color: #000000;
            }

    .grid1 th {
        border-bottom: 1px solid #dadada;
        border-top: 1px solid #dadada;
        padding-top: 10px;
        padding-bottom: 10px;
    }

.grid100 {
    font: normal 10pt "Lato", sans-serif;
    min-width: 100%;
    color: #777777;
}

    .grid100 td a {
        color: #777777;
    }

        .grid100 td a:hover {
            color: #000000;
        }



.wrapper {
    background-color: #fff;
    padding: 5px 0 0 0;
    height: 100%;
}

.wrapperwhite {
    background-color: #fff;
}

.tdbg {
    background-color: #fff;
    border-bottom: 1px solid #dadada;
    margin-bottom: -4px;
}

.tdwhite {
    border-left: 1px solid #dadada;
    border-right: 1px solid #dadada;
    border-bottom: 1px solid #dadada;
    border-top: none;
    background-color: #fff;
    width: 100%;
    border-radius: 4px;
}

.tablewhite1 {
    margin-top: -1px;
    border: 1px solid #dadada;
    border-radius: 4px;
    background-color: #fff;
    padding: 10px 10px 10px 10px;
    min-width: 90%;
    color: #777777;
    font-size: 13px;
}

.tablegray1 {
    margin-top: -1px;
    border: 1px solid #dadada;
    border-radius: 4px;
    padding: 10px 10px 10px 10px;
    min-width: 90%;
    color: #777777;
    font-size: 13px;
    background-color: lightgray;
}

.tablewhite2 {
    border: 1px solid #dadada;
    border-radius: 4px;
    background-color: #fff;
    padding: 2px 10px 10px 10px;
    min-width: 920px;
    color: #777777;
    font-size: 13px;
    text-align: left;
}

.tablewhite {
    font: normal 10pt "Lato", sans-serif;
    font-weight: bold;
    border-style: none;
    border-width: 0;
    background-color: #fff;
    padding: 20px 50px 20px 50px;
}

.nc {
    width: 100%;
    padding: 0 0 0 5px;
    text-decoration: none;
    border-bottom: 1px solid #dadada;
    font-weight: bold;
    vertical-align: middle;
    /* text-align: center;*/
    min-width: 940px;
    font-size: 13px;
    position: absolute;
    line-height: 20px;
}

    .nc a {
        text-decoration: none;
        color: #777777;
    }

        .nc a:hover {
            color: #000000;
        }

.nc1 {
    width: 100%;
    margin: -10px 0 0 0;
    padding: 0 0 8px 0;
    text-decoration: none;
    border-bottom: 1px solid #dadada;
    font-weight: bold;
    vertical-align: middle;
    /* text-align: center;*/
    min-width: 940px;
}

    .nc1 a {
        text-decoration: none;
    }

        .nc1 a:hover {
            color: #000000;
        }

.search {
    height: 20px;
    width: 200px;
    background-color: #F0F8FF; /* #F0F8FF;*/
    color: gray;
    font-size: 8pt;
    text-align: left;
    background: url(/images/find.png) no-repeat #fff;
    padding-left: 23px;
    border: 1px solid #ccc;
}

.WaterMarkedTextBox {
    height: 20px;
    width: 200px;
    background-color: #F0F8FF;
    color: gray;
    font-size: 12px;
    text-align: left;
    background: url(/images/find.png) no-repeat;
    padding-left: 23px;
    border: 1px solid #ccc;
	font-family: "Lato", sans-serif !important;
}

.WaterMarkedTextBoxNoSearch {
    height: 18px;
    width: 250px;
    background-color: #F0F8FF;
    color: gray;
    font-size: 12px !important;
    text-align: left;
    padding-left: 23px;
    border: 1px solid #ccc;
	font-family: "Lato", sans-serif !important;
}

.font11 {
    font-size: 11px;
}

.message {
    font-size: 13px;
    color: red;
}

.font13 {
    font-size: 13px;
}

.font16 {
    font-size: 16px;
}
.overlay {
    width: 100%;
    height: 100%;
    background: #000;
    position: fixed;
    top: 0px;
    left: 0px;
    z-index: 110;
    opacity: 0.5;
    filter: alpha(opacity=50);
    display: none;
}

.GridViewEditRow input {
    width: 50px;
}

.invisible {
    display: none;
}

.visible {
    display: block;
}

.nowrap {
    white-space: nowrap;
}
#header {
    min-width: 90%;
    background-color: #dadada;
    height: 49px;
    color: #fff;
    text-align: center;
    line-height: 49px;
    font-size: 15px;
    font-weight: bold;
}


/*navigation*/
#global-header {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.nav-wrapper {
    -moz-box-sizing: content-box;
    box-sizing: content-box;
    width: 90%;
    min-width: 1100px;
    margin: 0 auto;
}
.nav-right {
left: auto !important;
    right: 0;
}

#nav {
    background:  #fff;
    /*box-shadow: 0 1px 5px rgba(0,0,0,0.2);*/
    color: #1A4F85;
    font-size: 15px;
    height: 49px;
    position: relative;
    width: 100%;
    min-width: 1100px;
}

    #nav:before {
        background: transparent;
        background: -webkit-linear-gradient(top, rgba(255,255,255,0.2), rgba(255,255,255,0));
        background: -moz-linear-gradient(top, rgba(255,255,255,0.2), rgba(255,255,255,0));
        background: -o-linear-gradient(top, rgba(255,255,255,0.2), rgba(255,255,255,0));
        background: linear-gradient(to bottom, rgba(255,255,255,0.2), rgba(255,255,255,0));
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.15),inset 0 -1px 0 rgba(0,0,0,0.15);
        content: " ";
        display: block;
        height: 49px;
        left: 0;
        min-width: 980px;
        position: absolute;
        top: 0;
        width: 100%;
    }

    

    #nav .separator a:before {
        background: rgba(255,255,255,0.35);
        content: "";
        display: block;
        height: 30px;
        left: 0;
        position: absolute;
        top: 10px;
        width: 1px;
    }

    #nav .separator .current:before {
        display: none;
    }

.logo {
    background: url(/images/visual-skus-Logo.png) no-repeat;
    background-position: 0 8px;
    background-size: 95px;
    width:95px;
}

.logofooter{
    background: url(/images//visual-skus-Logo.png) no-repeat;
    background-size: 93px;
    height:30px;
    width:93px;
    margin-top:2px !important;
    float:left;
}

.nav-tabs > div {
        float: left;
        position: relative;
    }

.nav-tabs {
    margin: 0 -12px 0 -15px;
}
ul {
    list-style-type: none;
}

    .nav-tabs > li {
        float: left;
        position: relative;
    }
    .nav-tabs > li > a > img {
        margin-top: 8px;
    }

        .nav-tabs > li > a {
            border: 0 solid transparent;
            color: #1A4F85;
            display: inline-block;
            font-weight: bold;
            height: 48px;
            line-height: 47px;
            opacity: 1;
            padding: 0 15px;
            text-decoration: none;
            text-shadow: 0 -1px 0 rgba(0,0,0,0.15);
            -webkit-font-smoothing: antialiased;
        }

            .nav-tabs > li > a:hover {
                background: #7E98B3;
                background: -webkit-linear-gradient(top, rgba(255,255,255,0.1), rgba(255,255,255,0.15));
                background: -moz-linear-gradient(top, rgba(255,255,255,0.1), rgba(255,255,255,0.15));
                background: -o-linear-gradient(top, rgba(255,255,255,0.1), rgba(255,255,255,0.15));
                background: linear-gradient(to bottom, rgba(255,255,255,0.1), rgba(255,255,255,0.15));
                opacity: 1;
            }

            .nav-tabs > li > a:focus {
                box-shadow: 0 0 10px rgba(255,255,255,0.8);
            }

            .nav-tabs > li > a:active {
                background: #e5e5e5;
                box-shadow: inset 0 0 0 rgba(0,0,0,0);
                opacity: 1;
            }

    .nav-tabs .current, .nav-tabs .current:hover {
        background: #e5e5e5;
        box-shadow: inset 0 2px 6px rgba(0,0,0,0.3);
        opacity: 1;
    }

    .nav-tabs .nav-tab-right {
        float: right;
    }

        .nav-tabs .nav-tab-right > a {
            font-size: 13px;
        }

    .nav-tabs .nav-home > .ss-icon {
        font-family: "Lato", sans-serif;
        font-size: 17px;
        line-height: 52px;
        top: 0;
    }

    .nav-tabs .nav-user > a {
        opacity: 1;
        padding-right: 12px;
    }

        .nav-tabs .nav-user > a:after {
            font-size: 7px;
            opacity: 0.75;
            top: 0;

        }

        .nav-tabs .nav-user > a > img {
            border-radius: 3px;
            box-shadow: 0 1px 1px rgba(0,0,0,0.2);
            display: inline-block;
            margin-top: -1px;
            vertical-align: middle;
        }

        .ss-dropdown:before, .ss-dropdown.ss-after:after {
    content: '▾';
    font-size:25px;
}
 /*end navigation*/

 .sub-nav-wrapper {
    width: 90%;
    min-width:1100px;
	border-style: none;
    /*border: 1px solid transparent;*/
    text-align: center !important;
    position: relative;
}


#sub-nav {
    background: #fff;/*#e5e5e5;*/
    border-bottom: 1px solid #dadada;
    font-size: 13px;
    width: 100%;
    min-width:1100px;
    float: left;
}

    #sub-nav a {
        color: #777777;
        text-decoration: none;
    }

        #sub-nav a:hover {
            color: #000000;
        }

        #sub-nav a:focus {
            box-shadow: 0 0 6px rgba(80,167,238,0.6);
        }

        #sub-nav a:active {
            box-shadow: inset 0 0 0 rgba(0,0,0,0);
            color: #777777;
        }

        #sub-nav a.current {
            color: #777777;
        }

.sub-nav-tabs {
    margin: 0 -15px;
}

    .sub-nav-tabs > li {
        float: left;
        position: relative;
    }

        .sub-nav-tabs > li > a {
            display: inline-block;
            font-weight: bold;
            height: 40px;
            line-height: 40px;
            padding: 0 15px;
            -webkit-font-smoothing: antialiased;
        }

    .sub-nav-tabs .current:before, .sub-nav-tabs .current:after {
        border-left: 7px solid transparent;
        border-right: 7px solid transparent;
        bottom: -1px;
        content: "";
        height: 0;
        left: 50%;
        position: absolute;
        width: 0;
    }

    .sub-nav-tabs .current:before {
        border-bottom: 7px solid #c4c4c4;
        margin: 0 0 0 -7px;
    }

    .sub-nav-tabs .current:after {
        border-bottom: 7px solid #fff;
        margin: 0 0 -1px -7px;
    }

.clearfix:after, #global-footer .wrapper:after, .content-wrapper:after, form.form:after, form.form .form-field:after, .inline-form:after, .new-form .nf-field:after, .new-form .nf-submit:after, .btn-submit-container:after, .btn-inline-container:after, .btn_container:after, .btn_container_footer:after, .btn_container_topbar:after, .new-chrome:after, #page-top:after, .reports-top .reports-timeframe:after, .reports-headline:after, .reports-headline .reports-headline-name .breadcrumbs:after, .reports-summary:after, #lifespan-budget-summary:after, #detailed-summary:after, .detailed-summary:after, #invoice_header:after, #invoice_header h1:after, #configure:after, ul.color-options:after, .timesheet-header:after, .timesheet-bottom:after, .welcome-screen:after, .trial-stamp .days-left:after, .referrals #share .referral-stats li:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

.frmtextbox {
    width: 300px;
    border-radius: 4px;
    border: 1px solid #dadada;
}

.frmtextboxmedium {
    width: 200px;
    border-radius: 4px;
    border: 1px solid #dadada;
	font-family: "Lato", sans-serif !important;
}

.frmtextboxshort {
    width: 100px;
    border-radius: 4px;
    border: 1px solid #dadada;
	font-family: "Lato", sans-serif !important;
}

.frmtextbox140 {
    width: 140px;
    border-radius: 4px;
    border: 1px solid #dadada;
	font-family: "Lato", sans-serif !important;
}

.frmtextbox50 {
    width: 50px;
    border-radius: 4px;
    border: 1px solid #dadada;
}

.frmtextbox30 {
    width: 30px;
    border-radius: 4px;
    border: 1px solid #dadada;
    text-align: center;
	font-family: "Lato", sans-serif !important;
}

.frmtextbox70 {
    width: 70px;
    border-radius: 4px;
    border: 1px solid #dadada;
	font-family: "Lato", sans-serif !important;
}

.frmtextbox400 {
    width: 400px;
    border-radius: 4px;
    border: 1px solid #dadada;
	font-family: "Lato", sans-serif !important;
}

.frmtextbox80 {
    width: 80px;
    border-radius: 4px;
    border: 1px solid #dadada;
	font-family: "Lato", sans-serif !important;
}

.frmtextboxsmall {
    width: 30px;
    border-radius: 4px;
    border: 1px solid #dadada;
	font-family: "Lato", sans-serif !important;
}

.frmtextarea {
    border-radius: 4px;
    border: 1px solid #dadada;
	font-family: "Lato", sans-serif !important;
}

.disabled {
    background: #dadada !important;
	font-family: "Lato", sans-serif !important;
}

.PopupWindow {
    position: fixed;
    top: 30%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 13px;
    z-index: 120;
}

/*AutoComplete flyout */
.autocomplete_completionListElement {
    width: 250px !important;
    margin: 0px !important;
    background-color: inherit;
    color: windowtext;
    border: buttonshadow;
    border-width: 1px;
    border-style: solid;
    cursor: 'default';
    overflow: auto;
    height: 100px;
    font-family: "Lato", sans-serif !important;
    font-size: small;
    text-align: left;
    list-style-type: none;
    z-index: 100;
}
/* AutoComplete highlighted item */
.autocomplete_highlightedListItem {
    margin-left:-39px !important;
    background-color: #ccc;
    color: black;
    padding: 1px;
}

/* AutoComplete item */
.autocomplete_listItem {
    margin-left:-39px !important;
    background-color: window;
    color: windowtext;
    padding: 1px;
}
