/* 
    Document   : style
    Created on : Jan 5, 2012, 15:45:47 PM
    Author     : Consilium
    Description:
        Purpose of the stylesheet follows.
*/

/*
    basic element
*/
body {
    background-color: #f2f2f2;
    font-size: 75%;
    color: #333;
    font-family: 'Nobile', arial, serif;
    margin: 0px;
}
a:link {
    cursor: pointer;
    color: #063;
}
a:visited {
    color: #063;
}
h2 {
    font-family: 'Nobile', arial, serif;
    font-size: 27px;
    line-height: 30px;
    font-weight: normal;
    margin: 0px;
}
li {
    list-style: none;
}
input[type="text"] {
    background: #eaf1f6;
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#FFFFFF), to(#EEEEEE));
    background: -moz-linear-gradient(100% 66% 90deg, #FFFFFF, #EEEEEE) repeat scroll 0 0 transparent;
    border: 1px solid #CCCCCC;
    height: 18px;
    padding-left: 2px;
}

input[disabled] {
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#FFFFFF), to(#EEEEEE));
    color: #999999;
}

input[type=checkbox] {
    border:0px;
    background-color: transparent;
}

input[type=radio] {
    border:0px;
    background-color: transparent;
}


textarea {
    /*background: #eaf1f6;*/
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#FFFFFF), to(#EEEEEE));
    background: -moz-linear-gradient(100% 66% 90deg, #FFFFFF, #EEEEEE) repeat scroll 0 0 transparent;
    border: 1px solid #CCCCCC;
}
textarea:focus {
    background: #F8F8F3;
    background: -moz-linear-gradient(100% 66% 90deg, #FFFFFF, #F8F8F3);
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#FFFFFF), to(#F8F8F3));
}

textarea[disabled]{
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#FFFFFF), to(#EEEEEE));
    color: #999999;
}

/*
    container style
*/
.container-view {
    width: 890px ;
    padding-left: 30px;
    padding-right: 30px;
    overflow: auto;
}

.container-view .container-content-top {
    width: 890px ;
    height: 1px ;
}
.container-view .container-content-body {
    background-color: #f2f2f2;
    background-repeat: repeat-y;
    width: 890px ;
    overflow: auto;
}
.container-title {
    background: rgba(35, 73,118, 0.7);
    color: white;
    text-transform: uppercase;
    line-height: 15px;
    padding: 7px 3px 5px 21px;
    font-size: 13px;
    font-weight: bold;
}
.container-view .container-content-body .container-survey {
    padding-top: 20px;
    padding-left: 30px;
    padding-right: 30px;
    padding: 21px 20px 0px 20px;
}
.container-view .container-content-body .container-button {
    padding: 20px 10px 20px 0px;
    overflow: auto;
}
.container-view .container-content-body .container-button1 {
    padding: 20px 30px 20px 0px;
    overflow: auto;
}
.container-heading {
    padding: 11px 0px 13px 13px;
}
.container-body {
    background: #fff;
    padding: 14px 25px 0px 20px;
    border-bottom: 1px solid #CCC;
}
.container-support {
    background-image: url('images/tab_support.png');
    background-color: black;
    border: solid 1px;
    border-color: black;
    display: block; 
    cursor: pointer;
    height: 108px;
    overflow: hidden;
    position: fixed;
    text-indent: -5000px;
    top: 23%;
    width: 33px;
    z-index: 10000;
    border-image: initial;
    left: 0;
    background-position: right 0;
}
.container-survey-heading {
    margin: 0px 15px 0px 12px;
    border-bottom: 1px solid #CCC;
}
.container-survey-form {
    border-width: 0px;
    margin: 0px 20px 0px 20px;
    margin-top: 25px;
}
.container-survey-form .attributerow {
    padding-bottom: 19px;
    overflow:auto;
}
.container-survey-form .attributerow .title {
    width: 150px;
    padding: 0px 5px 0px 0px;
}
.container-survey-form .attributerow-radio {
    padding: 0px 0px 19px 0px;
    overflow:auto;
}
.container-survey-form .attributerow-radio .title {
    width: 150px;
    padding: 5px 5px 0px 0px;
}
.container-survey-form .attributerow-radio .newpanel {
    background-color: #CCC;
    margin: 10px 0px 0px 10px;
    border-right: 1px solid #CCC;
    border-bottom: 1px solid #CCC;
}
.container-survey-form .attributerow-radio .newpanel .top {
    padding: 3px 0px 3px 5px;
    line-height: 20px;
}
.container-survey-form .attributerow-radio .newpanel .bottom {
    background-image: url('images/content/box-px.jpg');
    background-repeat: repeat-y;
    padding: 5px 5px 3px 5px;
}
.container-survey-form .dialogattributerow {
    padding-bottom: 10px;
    overflow:auto;
}
.container-survey-form .dialogattributerow .title {
    width: 100px;
    padding-right: 5px;
}
.container-survey-form .dialogattributerow .fillin {

}
.container-survey-form .dialogattributerow .leftGraph {
    border: 1px solid #CCC;
    overflow:auto;
}
.container-survey-form .dialogattributerow .rightGraph {
    border: 1px solid #CCC;
    overflow:auto;
}
.container-bottom-netvigation {
    margin: 20px 15px 20px 15px;
    padding: 0px 15px 0px 15px;
    overflow:auto;
}
.container-bottom-netvigation .container-mid {
    width: 650px;
    padding-top: 15px;
    color: #CCC;
}
.container-bottom-netvigation .container-mid-long {
    color: #CCC;
    padding: 0px 305px 0px 305px;
}
.container-bottom-netvigation .container-disabled-mid-long {
    width: 690px;
}
.container-bottom-netvigation .container-mid-one-button {
    padding-left: 350px;
}
.container-survey-form .titlerow {
    font-family: Georgia;
    font-size: 14px;
    font-style: italic;
    padding: 0px 0px 1px 10px;
    border-bottom: 1px solid #CCC;
    overflow:auto;
}
.container-survey-form .titlerow a {
    text-decoration: none;
}
.container-survey-form .row {
    padding: 10px 0px 20px 0px;
    margin-bottom: 20px;
    border-bottom: 1px solid #CCC;
    overflow:auto;
}
.container-survey-form .btnrow {
    margin-bottom: 20px;
    overflow:auto;
}
.container-survey-form .lastrow {
    padding-bottom: 10px;
    overflow:auto;
}
.container-survey-form .row .body {
    width: 820px;
    overflow:auto;
}
.container-survey-form .row .body .left {
    width: 400px;
    border-right: 1px solid #CCC;
    overflow: auto;
}

.container-survey-form .row .body .leftMsg {
    width: 400px;
    min-height: 200px;
    border-right: 1px solid #CCC;
    overflow: auto;
}

.container-survey-form .row .body .leftMsg {
    width: 400px;
    min-height: 200px;
    border-right: 1px solid #CCC;
    overflow: auto;
}
.container-survey-form .row .body .right {
    padding-left: 10px;
    width: 400px;
    overflow: auto;
}
.container-survey-form .row .body .right .valign-mid {
    padding-top: 95px;
}
.container-survey-form .row .body .question-num {
    padding: 0px 0px 15px 0px;
}
.container-survey-form .row .body .question {
    padding: 0px 0px 0px 10px;
}
.container-survey-form .row .body .question .title, .container-survey-form .row .body .left .translation .title, .container-survey-form .row .body .right .translation .title {
    font-weight: bold;
    padding-bottom: 5px;
}
.container-survey-form .row .body .question .answer, .container-survey-form .row .body .left .translation .answer, .container-survey-form .row .body .right .translation .answer {
    padding-left: 10px;
}
.container-survey-form .row .body .question .answer .title {
    width: 50px;
    padding: 5px 10px 10px 0px;
}
.container-survey-form .row .body .question .answer .editRow, .container-survey-form .row .body .left .translation .answer .editRow, .container-survey-form .row .body .right .translation .answer .editRow {
    padding-bottom: 5px;
    overflow: auto;
}
.container-survey-form .row .body .question .answer .editRow .deleteicon, .container-survey-form .row .body .left .translation .answer .editRow .deleteicon, .container-survey-form .row .body .right .translation .answer .editRow .deleteicon {
    padding-left: 5px;
}
.container-survey-form .row .body .question .answer .editRow .addicon, .container-survey-form .row .body .left .translation .answer .editRow .addicon, .container-survey-form .row .body .right .translation .answer .editRow .addicon {
    padding-left: 5px;
}
.container-survey-form .row .body .question .checkOption {
    padding: 0px 10px 0px 0px;
}
.container-survey-form .row .body .contentbox .title {
    width: 150px;
    padding-right: 5px;
}
.container-survey-form .row .body .container-question-summary .container-question-column {
    width: 810px;
    padding: 10px 10px 10px 10px;
}
.container-survey-form .row .body .container-question-summary .container-question-column .heading {
    font-family: Georgia;
    font-size: 14px;
    font-style: italic;
}
.container-survey-form .row .body .container-question-summary .container-question-column .answer {
    padding-left: 10px;
}
.container-survey-form .row .body .container-question-summary .container-question-seperator {
    width: 20px;
}
.container-survey-form .row .body .contentbox {
    border: 1px solid #CCCCCC;
    width: 500px;
    margin: 10px auto;
    padding: 10px 10px 10px 10px;
    overflow:auto;
}
.container-survey-form .row .body .contentbox .title {
    width: 150px;
    padding: 5px 5px 15px 0px;
}
.container-survey-form .row .body .contentbox .heading {
    font-weight:bold;
    padding-bottom: 5px;
}
.container-tab-widget {
    border: 1px solid #CCCCCC;
    box-shadow: 1px 1px 1px #CCCCCC;
    margin-bottom: 10px;
}
.container-tab-widget .survey-percentage {
    background-color: #75CDE6;
    padding: 10px 5px 10px 5px;
}
.container-tab-widget .survey-question {
    background-color: #FFF;
    line-height: 25px;
}
.container-tab-widget .survey-question .question-text {
    border-bottom: 1px solid #CCC;
    padding: 10px 5px 10px 5px;
}
.container-tab-widget .survey-question .question-chart {
    padding: 10px 5px 10px 5px;
    overflow:auto;
}
.container-tab-widget .survey-question .question-chart .action {
    color:  #0F8238;
}
.container-tab-widget .survey-question .question-chart .action a {
    color:  #0F8238;
    padding: 0px 5px 0px 5px;
}
.container-tab-widget .survey-question .question-chart .graph {
    width: 780px;
    padding: 10px 5px 10px 55px;
    overflow: auto;
}
.container-tab-widget .note {
    background-color: #FFF;
    line-height: 20px;
    padding: 10px 10px 10px 10px;
    overflow: auto;
}
.container-tab-widget .note .highlight-value {
    font-weight: bold;
    font-size: 140%;
}
.container-survey-form .newsurvey {
    background-color: #FFF;
    padding-top: 10px;
}
.container-qtab-leftcol {
    width: 380px;
    height: 270px;
    border-right: 1px solid #CCC;
    margin: -10px 0px -10px 0px;
    padding: 10px 10px 20px 30px;
    overflow: auto;
}
.container-qtab-rightcol {
    width: 370px;
    height: 270px;
    margin: -10px 0px -10px 0px;
    padding: 20px 10px 10px 10px;
    overflow: auto;
}
.container-qtab-leftcol .tabrow {
    border-bottom: 1px solid #CCC;
    padding: 3px 0px 3px 0px;
}
.container-qtab-leftcol .tabrow a {
    cursor: pointer;
    text-decoration:none;
    color: #333;
}
.container-qtab-leftcol div.tabrow:hover {
    background-color: #E0F07D;
}
.container-qtab-rightcol .question .title {
    font-weight: bold;
}
.container-qtab-rightcol .question .answer {
    padding-left: 10px;
}
.container-error-msg {
    background-color: #FFBABA;
    color: #D8000C;
    border: 1px solid #D8000C;
    -moz-border-radius-topleft: 4px; -webkit-border-top-left-radius: 4px; -khtml-border-top-left-radius: 4px; border-top-left-radius: 4px;
    -moz-border-radius-topright: 4px; -webkit-border-top-right-radius: 4px; -khtml-border-top-right-radius: 4px; border-top-right-radius: 4px;
    -moz-border-radius-bottomleft: 4px; -webkit-border-bottom-left-radius: 4px; -khtml-border-bottom-left-radius: 4px; border-bottom-left-radius: 4px;
    -moz-border-radius-bottomright: 4px; -webkit-border-bottom-right-radius: 4px; -khtml-border-bottom-right-radius: 4px; border-bottom-right-radius: 4px;
    padding: 10px;
    margin-top: 10px;
    overflow: auto;
}
.container-hidden {
    display: none;
}
.container-content-body .container-survey-form .container-edit-row {
    background-color: #FFF;
}
.container-survey-form .container-edit-row .titlerow {
    font-family: Georgia;
    font-size: 14px;
    font-style: italic;
    padding: 0px 0px 1px 10px;
    border-bottom: 0px;
    overflow:auto;
}
.container-survey-form .row .body .question .answer .addBtnRow {
    padding: 0px 0px 10px 5px;
}
.container-survey-form .row .body .question .answer .addBtnRow-lessbottompadding {
    padding: 0px 0px 5px 5px;
}
.container-survey-form .row .highlight {
    background-color: #FFFF49;
}
.container-survey-form .row .body .checkboxrow {
    background-color: #F8F9F4;
    width: 830px;
    padding: 5px 0px 5px 0px;
    margin: 5px 0px 15px 0px;
    overflow: auto;
}
.container-survey-form .row .body .rangerow {
    background-color: #F8F9F4;
    width: 820px;
    padding: 12px 0px 12px 6px;
    margin: 5px 0px 15px 0px;
    overflow: auto;
}
.container-loadingimg {
    padding: 70px 200px 0px 300px;
    width: 340px;
}
.container-small-loadingimg {
    padding: 40px 0px 26px 120px;
    width: 360px;
}
.container-filter-leftcol {
    width: 150px;
    padding-bottom: 10px;
}
.container-filter-midcol {
    width: 300px;
    padding-bottom: 10px;
}
.container-filter-rightcol {
    width: 300px;
    padding-bottom: 10px;
}
.container-filter .container-filter-contentbox {
    width: 100%;
    height: 150px;
    border: 1px solid #CCC;
    overflow: auto;
}
.container-filter .container-filter-contentbox .row {
    padding: 3px 0px 3px 0px;
    white-space: nowrap;
}
.container-filter .container-filter-contentbox .subtitlerow {
    white-space: nowrap;
    background-color: #CCC;
}
.container-filter .container-filter-contentbox .filterrow {
    white-space: nowrap;
}
.container-filter .container-filter-contentbox .row a {
    cursor: pointer;
    text-decoration:none;
    color: #333;
}
.container-filter .container-filter-contentbox div.highlight:hover {
    background-color: #E0F07D;
}
.container-survey-form .row .body .question .checkOption .subOption {
    padding: 5px 0px 5px 15px;
    background-color: #DDD;
    width: 100%;
}
.container-loading {
    font-size: 18px;
    padding-top: 60px;
}
.container-loading img {
    vertical-align: middle;
}
.row .body .container-image-upload {
    position: relative;
    width: 350px;
    max-height: 200px;
    margin-bottom: 10px;
    overflow: auto;
}
.row .body .container-image-upload-buttons {
    width: 170px;
    overflow: auto;
}
.container-survey-form .container-source-filter {
    max-height: 170px;
    width: 225px;
    padding-bottom: 5px;
    overflow: auto;
}
.container-survey-form .container-job-filter {
    max-height: 170px;
    width: 320px;
    padding-bottom: 5px;
    overflow: auto;
}
.container-survey-form .container-job-filter .ui-widget-content {
    border: none;
}
.container-weighting-content {
    border-top: 1px solid #CCC;
    padding-top: 5px;
}
.container-weighting-add-variable {
    padding: 5px 0px 0px 10px;
}
.container-weighting-variables {
    max-height: 300px;
    margin: 0px 5px 0px 5px;
    overflow: auto;
}
.container-weighting-variable {
    border-top: 1px solid #CCC;
    padding-top: 5px;
}
.container-survey-form .dialogrow {
    padding: 0px 0px 10px 10px;
    width: 400px;
    overflow:auto;
}
.container-survey-form .dialogrow .container-weighting-inputs {
    padding-left: 10px;
}
.container-survey-form .dialogrow .title {
    font-weight: bold;
}
.container-survey-form .dialog-picklist-row {
    border-bottom: 1px solid #CCC;
    padding-bottom: 10px;
    width: 530px;
    overflow:auto;
}
.container-compareLink {
    padding-right: 50px;
}
.container-result-pivot {
    padding: 0px 25px 0px 20px;
}
.container-pivot-table {
    padding-top: 10px;
    width: 845px;
    overflow: auto;
}
.container-survey-form .container-dual-graphs {
    width:970px;
}
.container-preview-image {
    margin-bottom: 5px;
    padding: 5px;
    border: 1px solid #CCC;
    width: 350px;
    height: 200px;
    overflow: auto;
}
.container-preview-images-heading {
    margin-bottom: 10px;
    border-bottom: 1px solid #CCC;
    padding-left: 5px;
    overflow: auto;
}
.container-image-upload-control {
    max-height: 150px;
    overflow: hidden;
}
.container-preview-question {
    background-color: #FFF;
    border: 1px solid #CCC;
    color: #000;
    padding: 3px;
    margin: 5px;
    width: 120px;
    height: 30px;
}
.swtich-survey-ID {
    width: 40px;
}
.container-messagebox {
    height: 265px;
    padding-right: 20px;
}
.container-filter-group {
    overflow: auto;
}
.container-user-info {
    margin-top: 10px;
    margin-right: 20px;
}

.container-user-info a {
    text-decoration: none;
}

.container-organisation-context-switch {
    z-index: 9999;
    position: absolute;
    top: 40px;
    height: 250px;
    overflow-y: auto;
    overflow-x: hidden;
}
.container-group-management-tree {
    width: 100%;
    border: 0px;
    padding: 0px;
    margin-bottom: 10px;
}
.container-compare-chart-area {
    width: 480px;
}
.container-survey-relocation-tree {
    width: 100%;
    border: 0px;
    padding: 0px;
    margin-bottom: 14px;
}
.container-result-setting {
    overflow: auto;
}
.container-job-filter-tree .ui-chkbox-box {
    background: none;
    -moz-border-radius: 0px;
    -webkit-border-radius: 0px;
    border-radius: 0px;
    width: 10px;
    height: 10px;
}
.container-job-filter-tree .ui-icon-check {
    background-position: -66px -148px;
}
.container-job-filter-tree .ui-icon-minus {
    background-position: -51px -132px;
}
/*
    div alignment
*/
.div-align-center {
    margin-left: auto;
    margin-right: auto;
}
.div-float-left {
    float: left;
}
.div-float-right {
    float: right;
}
.div-float-none {
    clear: both;
}
.div-float-mid {
    margin: 0px auto;
}
.div-auto-height {
    overflow: auto;
}
/*
    text alignment
*/
.text-align-center {
    text-align: center;  
}

.text-align-left {
    text-align: left;
}

.text-align-right {
    text-align: right;  
}
.text-valign-top {
    vertical-align: text-top;
}
.text-valign-mid {
    vertical-align: middle;
}
.text-valign-bottom {
    vertical-align: text-bottom;
}
.translate-survey-text-align {
    margin: 0px;
    position: relative;
    top:4px;
}

.container-survey-heading ul {
    margin:0;
    padding:20px 0px 14px 0px;
    overflow:hidden;
}
.container-survey-heading ul li {
    font-size: 14px;
    line-height:12px;
    font-family: 'Nobile', arial, serif;
    float:left;
    padding: 0px 0px 0px 10px;
}
.container-survey-heading ul li a {
    color:#999999;
    text-decoration:none;

    display:block;
}
.container-survey-heading ul li .active {
    color:#F30;
    text-decoration:none;
    display:block;
}
.container-question-tab {
    overflow: auto;
    height: 335px;
}
.container-result-tab {
    background: none;
    border: none;
    overflow: auto;
}
.container-result-tab ul.ui-tabs-nav {
    padding-left: 0px;
}
ul.errorMsg {
    color: #D8000C;
    padding: 0px;
}
ul.errorMsg li {
    background: url('images/icons/error.png') no-repeat left center;
    padding-left: 20px;
}
ul.errorMsgLeft {
    margin: 0px;
}
ul.respondentFilterSummary {
    margin: 0px;
    margin-top: 5px;
    padding-left: 20px;
}
ul.respondentFilterSummary li {
    list-style: disc;
}
ul.filterSummary {
    margin: 0px;
    padding-left: 20px;
}
ul.filterSummary li {
    list-style: disc;
}
ul.subFilterSummary {
    margin: 0px;
    padding-left: 20px;
}
ul.subFilterSummary li {
    list-style: circle;
}
ul.password-tooltips {
    margin: 0px;
    padding: 0px;
    padding-left: 20px;
}
ul.password-tooltips li {
    list-style-type:decimal
}
/*
    span style
*/
span.errorMsg {
    background: url('images/icons/error.png') no-repeat left center;
    color: #D8000C;
}
span.errorMsgBelowText {
    width: 200px;
    margin: 5px 0px 5px 5px;
    padding: 0px 5px 2px 20px;
}
.logininfo-left {
    padding-right: 10px;
    margin-right: 16px;
    font-size: 13px;
}

.logininfo-left label {
    cursor: pointer;
}
span.logininfo-mid {
    padding-right: 16px;
    margin-right: 10px;
    font-size: 13px;
}

span.logininfo-right {
    font-size: 13px;
}

.span-tab-question-heading {
    font-family: Georgia;
    font-size: 12px;
    font-style: italic;
}
.span-tab-filter-body {
    font-family: 'Nobile',arial,serif;
    font-size: 16px;
    font-style: normal;
    white-space: nowrap;
}
.span-tab-question-body {
    font-family: 'Nobile',arial,serif;
    font-size: 16px;
    font-style: normal;
}
.span-tab-question-crosstab-label {
    font-size: 12px;
    line-height: 12px;
}
.span-tab-question-crosstab-question {
    font-weight: bold;
}
span.reminder {
    font-size: 10px;
    font-style: italic;
}
span.tips {
    font-size: 10px;
    font-style: italic;
}
/*
    table style
*/
.table-survey-list {
    width: 100%;
    font-family: 'Nobile',arial,serif;
}
.table-survey-list thead tr th {
    background: none;
    color: #999;
    text-align: left;
    padding-left: 5px;
    font-weight: normal;
    font-size: 13px;
    border-style: none;
}
.table-survey-list thead tr th.ui-paginator-top {
    border: none;
    text-align: center;
    padding: 0px;
    padding-bottom: 5px;
    font-weight: bold;
}
.table-survey-list thead th:hover {
    box-shadow: none;
}
.table-survey-list tbody {
    border: none;
    border-top: 1px solid #CCC;
}
.table-survey-list tbody tr {
    border: none;
}
.table-survey-list tbody tr:hover {
    background-color: #E0F07D;
}
.table-survey-list tbody tr td {
    font-size: 12px;
    border-style: none;
}
.table-survey-list tbody tr td.stdleftpadding {
    padding-left: 5px;
}
.table-survey-list tbody tr td.noborder {
    border: 0px;
}
.table-survey-list tfoot tr td {
    background: none;
    border: none;
    border-top: 1px solid #999;
    color: #999;
    margin-top: 10px;
    height: 40px;
}
.table-survey-list .ui-widget-header {
    background: none;
    border: none;
    color: #999;
}
.table-survey-list .ui-paginator-bottom {
    border-top: 1px solid #CCC;
    margin-bottom: 10px;
    padding-top: 10px;
}
.table-survey-list .ui-progressbar .ui-widget-header {
    background: #85b2cb;
    background: #85b2cb linear-gradient(top, rgba(255,255,255,0.8), rgba(255,255,255,0));
    background: #85b2cb -webkit-gradient(linear, left top, left bottom, from(rgba(255,255,255,0.8)), to(rgba(255,255,255,0)));
    background: #85b2cb -moz-linear-gradient(top, rgba(255,255,255,0.8), rgba(255,255,255,0));
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#DDFFFFFF, endColorstr=#00FFFFFF);
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#DDFFFFFF, endColorstr=#00FFFFFF)";
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    border: 1px solid #a8a8a8;
}
.table-result-list {
    width: 882px;
    font-family: 'Nobile',arial,serif;
}
.table-result-list thead th span.ui-state-default {
    box-shadow: none;
}
.table-result-list thead th:hover {
    box-shadow: none;
}
.table-result-list thead tr th {
    background: none;
    border: none;
    color: #999;
    text-align: center;
}
.table-result-list tbody {
    border: none;
    padding-bottom: 10px;
}
.table-result-list tbody tr {
    border: none;
}
.table-result-list tbody tr td.noborder {
    border: 0px;
}
.table-result-list tr.ui-widget-content {
    background-color: #F1F3E8;
}
.table-result-list tfoot tr td span.ui-state-default {
    box-shadow: none;
}
.table-result-list tfoot tr td:hover {
    box-shadow: none;
}
.table-result-list tfoot tr td {
    background: none;
    border: none;
    color: #999;
    text-align: center;
}
.table-result-list .ui-widget-header {
    background: none;
    border: none;
    color: #999;
}
.table-radio2D td {
    padding: 0px 5px 0px 5px;
    text-align: center;
}
.table-radio2D td.rowheading {
    text-align: right;
}
.optionTable tr td {
    height: 22px;
}
.optionTable tr td input {
    margin: 0px;
    vertical-align: text-bottom;

}

.optionTableText tr td {
    height: 27px;
}

.optionTable-radio tr td input {
    margin: 0px;
    vertical-align:text-bottom;
    border: 0px;
    background-color:transparent;
}

.option-survey-setup-table-radio tr td input {
    margin: 0px;
    vertical-align:text-bottom;
    border: 0px;
    background-color:transparent;
    height:27px;
}

.rim-weighting-table {
    border: none;
}
.std-weighting-table {

}
.table-pivot {
    width: 840px;
}
.table-pivot tr td {
    border-right: 1px solid #CCC;
    border-bottom: 1px solid #CCC;
    padding: 2px 5px 1px 5px;
    background-color: #FFF;
}
.table-pivot tr td:hover {

}
.table-pivot tr td.headline {
    border: 1px solid #CCC;
    padding: 2px 5px 1px 5px;
    background-color: #999;
    color: #FFF;
}
.table-pivot tr td.headline:hover {
    background-color: #999;
}
.table-pivot tr td.header {
    font-weight: bold;
}
.table-pivot tr td.header:hover {
    background-color: #FFF;
}
.table-pivot tr td.leftMost {
    border-left: 1px solid #CCC;
}
.table-pivot tr td.top {
    border-top: 1px solid #CCC;
}
.table-question-option tr td{
    padding: 0px 3px 0px 3px;
}
.table-question-option tr td.narrow{
    padding: 0px;
}
.table-question-option tr td.header{
    border-bottom: 1px solid #CCC;
}
.table-question-option tr td.lastrow{
    border-top: 1px solid #CCC;
    padding-top: 3px;
}

.table-question-display-input{
    position: relative;
    top : 4px;
}

.graph table tr th{
    line-height: 10px;
    font-size: 75%;
}
.graph table tr td{
    line-height: 10px;
    font-size: 75%;
}
.table-text-valign-bottom {
    vertical-align: bottom;
}
.table-respondent-filter tr td.checkboxColumn {
    width: 10px;
}
.table-respondent-filter tr td.checkboxName {
    width: 150px;
}
.table-question-summary {
    width: 100%;
}
.table-question-summary td.question-col {
    background: #FFF;
    padding: 10px;
}
.table-question-summary td.seperator {
    width: 10px;
    background: #F1F3E8;
}
.table-result-setting {
    width: 100%;
}
.table-result-setting td {
    width: 16%;
    vertical-align: top;
}
.table-result-setting td.first {
    padding-right: 10px;
}
.table-result-setting td.middle {
    border-left: 1px solid #CCC;
    padding: 0px 10px 0px 10px;
}
.table-result-setting td.last {
    border-left: 1px solid #CCC;
    padding-left: 10px;
}

.std-main-data-table table {
    table-layout: fixed;
    width:100%;
}

.std-main-data-table table {
    border:none;
    padding:0px;
}

.std-main-data-table table tbody {
    border:none;
    padding:0px;
}

.std-main-data-table table tbody tr, .std-main-data-table table tbody tr td {
    margin: 0px;
    border:none;
    padding:0px;
}



.std-left-content {
    height:49px;
    padding-left:10px;
    border-left: 10px solid white;
}

.std-left-content.show-notification {
    border-left: 10px solid rgba(35, 73,118, 0.8);
}

.std-main-data-table table tbody tr {
    border-top: 1px solid rgb(233, 221, 221);
}

.std-main-data-table table tr:first-child {
    border-top: none;
}


.std-main-data-table table tr:hover /*to override undesired highlight*/ {
    background-color: white;
}

.std-main-data-table table .ui-datatable-even {
    background-color: white;
}

.std-main-data-table table .ui-datatable-odd {
    background-color: white;
}

.std-main-data-table table thead {
    display: none;
}

.std-main-data-table .std-quick-commands {
    float:right;
    background-color:rgba(35, 73,118, 0.8);
}

.std-main-data-table .std-quick-commands .large-icon:hover {
    background-color:#e22b31;
}

.std-main-data-table .ui-paginator-bottom {
    border:none;
    background:none;
}

div.left-notification {
    border-left:10px solid white;
}

div.left-notification.show {
    border-left:10px solid rgba(35, 73,118, 0.8);
}
/*
 * #####################################################################button style######################################################################
*/

/* The following rules are used to define the spans/div that group buttons.
 * If you have two buttons that needs to be placed right, please do not style their positions seperately(e.g. to move the second button on the right hand side of the
 * first button. Instead, you should place the two buttons in a span and then apply the following rule to the span.
*/
span.button-group-right-1 /*This span is used to group buttons.  Move all the buttons in the group to the right by 50% of the parent element's width.*/ {
    position: relative; left:50%;
}

span.button-group-right-2 {
    position: relative; left:60%;    
}

span.button-group-right-8 {
    position: relative; left:80%;
}

div.button-group-right-10/*buttons inside this div is changed to inline-block and wrapped in a span*/ {
    text-align: right;
    margin-bottom: 5px;
}

/*
 * Makes any element a non-static positioned element. Some button styles defined in this styles sheet use position:relative and position:absolute and these non-static
 * positioned buttons need to be placed inside this container.
*/
.button-container {
    position: relative;
}

.button-container-right-margin-8 {
    margin-right: 10%;
}

.button-container-right-margin-9 {
    margin-right: 3%;
}
.button-container-right-margin-10 {
    margin-right: 4%;
}

/*
 * The followings are rules that make a button gray/red and places the button in the center/left/right. Please note that you should only use left/right placement rules defined here
 * if you only have ONE button.
*/
.button-cancel-back /*makes a button gray*/{
    text-transform: uppercase;
    margin-top: 10px; margin-bottom: 3px;
    display: inline-block;
    border:none;
    background: rgba(35, 73,118, 0.7); 
    font-size:12px; font-weight:bold; 
    padding:2px 10px;
    height:32px;
    color:#fff;
    cursor: pointer;
    margin-left: 10px;
    border: 1px solid #4B544B; 
}

.button-cancel-back:hover {
    background-color: rgba(18,57, 104, 1);     
}

.button-cancel-back:disabled {
    background: none;
    background: none;
    background-color: rgb(238, 235, 235);
    border: 1px solid rgb(156, 154, 154);
    color: gray;
    position: static;
    cursor: url('images/icons/df-nope.png'), pointer;
    cursor: pointer;
}


.button-confirm-save/*makes a button red*/{
    text-transform: uppercase;
    margin-top: 10px;
    margin-bottom: 3px;
    display: inline-block;
    background-color: rgba(226,44,49, 0.8);
    border: none;
    font-size: 12px;
    font-weight: bold;
    padding: 2px 10px;
    height: 32px;
    color: #fff;
    cursor: pointer;
    margin-left: 10px;
    border: 1px solid #F30;
    transition: 0.3s;
}

.button-confirm-save:hover{
    background-color: rgba(226,44,49, 1);
}

.button-confirm-save:disabled {
    background: none;
    background-color: rgb(238, 235, 235);
    border: 1px solid rgb(156, 154, 154);
    color: gray;
    position: static;
    cursor: url('images/icons/df-nope.png'), pointer;
    cursor: pointer;
}

/*
 * Following:Used to move buttons upwards and downwards. 
*/
.button-move-up-10 /*used to move button upwards by 10px.*/{
    position: relative;
    top:-10px;
}

.button-move-up-20 /*used to move button upwards by 20px. Only applys to buttons that have 'position: relative' or 'position: absolute'*/{
    position: relative;
    top:-20px;
}

.btn-move-right-6/*move to the right most side*/ {
    display: block;
    margin-left: auto; margin-right: 30%;    
}

.btn-move-right-10/*move to the right most side*/ {
    display: block;
    margin-left: auto; margin-right: 0px;    
}

/*
 * Used to add additional margins to a button
*/
.button-top-space-8 {
    margin-top: 20px;
}

.button-bottom-space-8 {
    margin-bottom: 20px;
}

.button-bottom-space-10 {
    margin-bottom: 30px;
}

/*
 * Make a button light-gray to indicate that this button is inactive.
*/
.button-inactive {
    background: #A8A8A8;
    border: 1px solid #999999;
}

.df-expand-icon {
    display: inline-block;
    vertical-align: bottom;
    margin-bottom: 1px;
}

/*
 * adjust the button height
*/
.button-short-height {
    height: 24px;
}

/*
    dropdown style
*/
.dropdown-closesurvey {
    width: 100px;
}
.dropdown-chart_settings {
    width: 200px;
    margin-right: 10px;
}
/*
    textarea style
*/
textarea.textarea-normal {
    width: 380px;
    height: 150px;
    resize:none;
}
textarea.textarea-narrow {
    width: 260px;
    height: 210px;
    resize:none;
}
textarea.textarea-small {
    width: 300px;
    height: 50px;
    resize:none;
}
.container-survey-form .row .body .question textarea {
    width: 800px;
    height: 35px;
    resize: none;
    overflow: auto;
}
.container-survey-form .row .body .left .translation textarea {
    width: 390px;
    height: 70px;
    resize: none;
    overflow: auto;
}
.container-survey-form .row .body .right .translation textarea {
    width: 390px;
    height: 70px;
    resize: none;
    overflow: auto;
}
.container-survey-form .dialogattributerow .fillin .dialoginputtextarea {
    width: 300px;
    height: 100px;
    resize: none;
    overflow: auto;
}
/*
    override style
*/
.container-survey-form .noborder {
    border: 0px;
}
.notoppadding, .container-view .container-content-body .notoppadding {
    padding-top: 0px;
}
.noleftpadding {
    padding-left: 0px;
}
.norightpadding {
    padding-right: 0px;
}
.nobottompadding, .container-survey-form .nobottompadding {
    padding-bottom: 0px;
}
.container-content-body .notopmargin {
    margin-top: 0px;
}
.container-content-body .nobottommargin {
    margin-bottom: 0px;
}
.container-content-body .matoppading {
    padding-top: 10px;
}
.stdbottompadding {
    padding-bottom: 10px;
}
.stdleftpadding {
    padding-left: 10px;
}
.stdrightpadding {
    padding-right: 10px;
}
.ui-tabs .ui-tabs-panel {
    padding-left: 0px;
    padding-right: 0px;
}
.container-survey-form .row .body .noborder {
    border-right: 0px;
}
.container-survey-form .row .body .toppadding {
    padding-top: 10px;
}
.stdtoppadding {
    padding-top: 10px;
}
.shorttoppadding {
    padding-top: 5px;
}
.noborder {
    border: 0px;
}
.extrabottompadding {
    padding-bottom: 30px;
}
.stdtopmargin {
    margin-top: 10px;
}
.stdbottommargin {
    margin-bottom: 10px;
}
.stdrightmargin {
    margin-right: 10px;
}
.longtopmargin {
    margin-top: 25px;
}
.longbottommargin {
    margin-bottom: 20px;
}
.nowrap {
    white-space:nowrap;
}
.noleftmargin {
    margin-left: 0px;
}
.norightmargin {
    margin-right: 0px;
}
.fillin input.plaintextbox {
    background: #eaf1f6;
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#FFFFFF), to(#EEEEEE));
    background: -moz-linear-gradient(100% 66% 90deg, #FFFFFF, #EEEEEE) repeat scroll 0 0 transparent;
    border: 1px solid #CCCCCC;
    height: 13px;
    padding-left: 0px;
    padding-right: 3px;
    margin-left: 2px;
    -moz-border-radius: 0px;
    -webkit-border-radius: 0px;
    border-radius: 0px;
    -webkit-box-shadow: none;
    box-shadow: none;
}
.fillin input.plaintextbox:focus {
    background: #FFA500;
    background: -moz-linear-gradient(100% 66% 90deg, #FFFFFF, #F8F8F3);
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#FFFFFF), to(#F8F8F3));

    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
}
.inputarea input.plaintextbox {
    background: #eaf1f6;
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#FFFFFF), to(#EEEEEE));
    background: -moz-linear-gradient(100% 66% 90deg, #FFFFFF, #EEEEEE) repeat scroll 0 0 transparent;
    border: 1px solid #CCCCCC;
    height: 13px;
    padding-left: 0px;
    padding-right: 3px;
    margin-left: 2px;
    -moz-border-radius: 0px;
    -webkit-border-radius: 0px;
    border-radius: 0px;
    -webkit-box-shadow: none;
    box-shadow: none;
}
.inputarea input.plaintextbox:focus {
    background: #FFA500;
    background: -moz-linear-gradient(100% 66% 90deg, #FFFFFF, #F8F8F3);
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#FFFFFF), to(#F8F8F3));

    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
}
/*
    image style
*/
.image-addrow {
    background-image: url('images/icons/buttons_add_remove.png');
    background-repeat: no-repeat;
    width: 20px;
    height: 20px;
    cursor: pointer;
}
.image-toggle {
    vertical-align: text-top;
}
.image-border {
    border: 1px solid #CCC;
}
.image-thumbnail {
    padding-right: 5px;
}
/*
    tab style
*/
.container-result-tab .ui-tabs-panels {
    border: 1px solid #A8A8A8;
    background-color: #F1F3E8;
}
.container-result-tab .ui-tabs-nav {
    background: none;
}
.container-result-tab .ui-tabs-nav .ui-state-default {
    background: #D4D5C6;
    padding-left: 30px;
    padding-right: 30px;
    cursor: pointer;
}
.container-result-tab .ui-tabs-nav .ui-state-default:hover {
    background: #F1F3E8;
}
.container-result-tab .ui-tabs-nav .ui-state-default a {
    text-decoration: none;
    color: #666;
    font-weight: normal;
    text-shadow: 1px 1px 1px #FFFFFF;
}
.container-result-tab .ui-tabs-nav .ui-state-default a:hover {
    text-decoration: none;
    color: #333;
    font-weight: normal;
    text-shadow: 1px 1px 1px #FFFFFF;
}
.container-result-tab .ui-tabs-nav .ui-tabs-selected {
    background-color: #F1F3E8;
    cursor: default;
}
/*
    p:datatable style
*/
.ui-paginator-next, .ui-paginator-last, .ui-paginator-first, .ui-paginator-prev, .ui-paginator-current {
    padding: 0px 1px 0px 1px;
}
.ui-paginator-pages {
    padding: 0px 5px 0px 5px;
}
.ui-widget-header .ui-state-active {
    cursor: default;
}
.ui-widget-header .ui-paginator-first, .ui-widget-header .ui-paginator-prev, .ui-widget-header .ui-paginator-next, .ui-widget-header .ui-paginator-last {
    background: none;
    border: none;
}
.ui-widget-header .ui-paginator-pages .ui-paginator-page {
    background: none;
}
.ui-widget-header .ui-paginator-pages .ui-state-active {
    border: none;
}
.ui-state-hover, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-hover
{
    box-shadow: none;
}
.ui-widget-header .ui-paginator-pages .ui-state-hover
{
    border: 1px solid #CCC;
    color: #F30;
    box-shadow: none;
}
.ui-state-default .ui-icon-seek-first {
    background-image: url('images/table/page-first.gif');
    background-position: 0px 0px;
}
.ui-state-default .ui-icon-seek-prev {

    background-image: url('images/table/page-prev.gif');
    background-position: 0px 0px;
}
.ui-state-default .ui-icon-seek-next {
    background-image: url('images/table/page-next.gif');
    background-position: 0px 0px;
}
.ui-state-default .ui-icon-seek-end{
    background-image: url('images/table/page-last.gif');
    background-position: 0px 0px;
}
/*
    spinner style
*/
span.ui-spinner, span.ui-spinner input.ui-spinner-input, span.ui-spinner a.ui-spinner-button {
    -moz-border-radius: 0px;
    -webkit-border-radius: 0px;
    border-radius: 0px;
}
span.ui-spinner input.ui-spinner-input {
    background: #eaf1f6;
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#FFFFFF), to(#EEEEEE));
    background: -moz-linear-gradient(100% 66% 90deg, #FFFFFF, #EEEEEE) repeat scroll 0 0 transparent;
    border: 1px solid #CCCCCC;
    height: 11px;
    padding-left: 2px;
}
span.ui-spinner input.ui-spinner-input:focus {
    background: #F8F8F3;
    background: -moz-linear-gradient(100% 66% 90deg, #FFFFFF, #F8F8F3);
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#FFFFFF), to(#F8F8F3));
    border-color: #EAC473;
    box-shadow: 1px 1px 1px #EAC473;
}
span.ui-spinner a.ui-spinner-button {
    height: 9px;
}
/*
    dialog style
*/
div.ui-widget-header {
    background: #eaf1f6;
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#FFFFFF), to(#EEEEEE));
    background: -moz-linear-gradient(100% 66% 90deg, #FFFFFF, #EEEEEE) repeat scroll 0 0 transparent;
}
div.noheadingbardialog div.ui-widget-header {
    display: none;
}
/*
    mask style
*/
.table-control-mask {
    background: #fff;
    opacity: .50;
    filter: Alpha(Opacity=50);
    width: 850px;
    height: 20px;
    z-index: 1000;
    position: absolute;
    margin-left: 10px;
}
.action-mask {
    background: #fff;
    opacity: .50;
    filter: Alpha(Opacity=50);
    width: 750px;
    height: 30px;
    z-index: 1000;
    position: absolute;
}
.source-filter-mask {
    background: #fff;
    opacity: .50;
    filter: Alpha(Opacity=50);
    width: 200px;
    height: 45px;
    z-index: 1000;
    position: absolute;
}
.weighting-mask {
    background: #fff;
    opacity: .50;
    filter: Alpha(Opacity=50);
    width: 200px;
    height: 45px;
    z-index: 1000;
    position: absolute;
}
.QC-mask {
    background: #fff;
    opacity: .50;
    filter: Alpha(Opacity=50);
    width: 230px;
    height: 40px;
    z-index: 1000;
    position: absolute;
}
/*
    input text style
*/
.wieghting-input {
    width: 25px;
}
/*
    picklist style
*/
table.container-picklist tbody tr td div {
    -moz-border-radius: 0px;
    -webkit-border-radius: 0px;
    border-radius: 0px;
}
table.container-picklist tbody tr td ul {
    -moz-border-radius: 0px;
    -webkit-border-radius: 0px;
    border-radius: 0px;
}
/*
    file upload style
*/
div.container-file-upload div.fileupload-buttonbar {
    overflow: auto;
}
div.container-file-upload div.fileupload-buttonbar label.fileinput-button{
    float: right;
}

/*
    label
*/
.question-setup-label{
    position: relative;
    top: 4px;
}

.output-summary-traspose{
    color: #000;
}

/*
    checkbox
*/
.checkbox {
    margin: 0px;
    height: auto;
}

.select-boolean-checkbox {
    border:0px;
    background-color: transparent;
    height: 13px;
}

.checkbox-no-border-background {
    margin: 0px;
    height: auto;
    border:0px;
    background-color: transparent;
}

.transpose-checkbox {
    border:0px;
    background-color: transparent;
    height: 13px;
}

/*
    tree
*/
.organisation-tree {
    width: auto;
    min-width: 400px;
    z-index: 100;
}

/*
    input style
*/
.calendar input.ui-inputfield {
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#FFFFFF), to(#EEEEEE));
    background: -moz-linear-gradient(100% 66% 90deg, #FFFFFF, #EEEEEE) repeat scroll 0 0 transparent;
    border: 1px solid #CCCCCC;
    height: 13px;
    padding-left: 2px;
    border-radius: 0px;
    moz-box-shadow: inset 0 2px 2px #8f8f8f;
    -webkit-box-shadow: inset 0 2px 2px #8F8F8F;
    box-shadow: inset 0 2px 2px #8F8F8F;
}

/*list*/
/*#################################### level one menu bar #####################################################*/
ul.level-one-menubar {
    padding-left: 0px;
    margin-bottom: 5px;
    margin-left: 20px;
    margin-right: 20px;
    color: white;
    border-style: none;
    background-color: rgba(35, 73,118, 0.8);
    font-weight:bold;
    text-transform: uppercase;
}

ul.level-one-menubar li{
    display: inline-block;
    padding-right: 12px;
    padding-left: 14px;
    padding-top: 10px;
    padding-bottom: 10px;
    transition: 1s;
}

ul.level-one-menubar li:nth-child(2n+1):hover {
    background-color: rgba(18,57, 104, 1);
    cursor:poniter;
}

ul.level-one-menubar li a {
    text-decoration: none;
    color:white;
}

ul.level-one-menubar li a:visited {
    text-decoration: none;
    color:white;
}

ul.level-one-menubar li.selected {
    background-color: rgba(18,57, 104, 1);
}

/*
   utility css
*/
.df-hidden-element {
    display: none
}

.df-show-element {
    display: block;
}

.df-inline-block {
    display: inline-block;
}

.df-error-message {
    position: absolute;
    box-shadow: 1px 2px 5px 0px rgb(173, 170, 170);
}

.df-error-message span.ui-message-error-detail {
    display: inline-block;
    width: 240px;
}

/*std util classes*/
.std-inner-container {
    border-width: 0px;
    margin: 0px 20px 0px 20px;
    margin-top: 25px;
}

select.std-title-select {
    background-color: rgba(75, 110, 134, 1);
    color: white;
    border: none;
    font-weight: bold;
}

.large-icon {
    width: 25px;
    height: 25px;
    padding: 12px;
}

.large-icon:active {
    background-color: #F30;
    box-shadow: 0px 0px 20px 0px rgb(136, 136, 136) inset;
}

.small-icon {
    width:17px;
    height:17px;
    padding: 12px;
}

.small-icon-row-mouseover {
    background-color: rgba(35, 73,118, 0.8);
}

.large-icon:hover,.small-icon:hover {
    background-color: #e22b31;
}



.ui-tree .ui-state-hover {
    background:none !important;
    background-color: rgba(226, 44, 49, 0.8) !important;
    color: white !important;
    border-radius:0px !important;
}



.std-font {
    color:#4B544B;
}

.std-font-link {
    color:#4B544B;
}

.std-font-link a {
    color:#4B544B;
    text-decoration: none;
}

a.std-font-link {
    color:#4B544B;
    text-decoration: none; 
}

a.std-font-link:hover {
    color:#4B544B;
    text-decoration: none;
}

.std-float-right {
    float:right;
}

.std-float-left {
    float:left;
}

.std-visibility-hidden {
    visibility: hidden;
}

.ui-datatable-empty-message td {
    padding-top: 15px !important;
    padding-bottom: 15px !important;
    padding-left: 50px !important;
}

.ui-paginator-top {
    display: none;
}

.std-container-body {
    position: relative;
    background: #fff;
    padding: 10px 20px;
    border-bottom: 1px solid #CCC;
    margin-bottom: 20px;
}

#zenbox_tab {
    background-color: rgba(75, 110, 134, 1) !important;
}