.tpn-zone {
    overflow: auto;
}

.tpn-zone-disabled {
    font-family: Arial, Verdana, Tahoma, 'san serif';
    font-size:12px;
    position:absolute;
    display: table-cell;
    width:100%;
    height:100%;
    background-color: lightgray;
    color:#595959;
    text-align: center;
    opacity: 0.1;
}

.tpn-banner {
    padding:10px;
}


.tpn-banner-answered {
    opacity:0.3;
    background-color: #f6f6f6;
}

.tpn-banner-answered *, .tpn-banner-answered *:focus {
    cursor: default!important;
    outline: none;
}

.tpn-banner-answer-pending {
    opacity: 0.3;
    background-color: #f6f6f6;
}

.tpn-banner-answer-pending *, .tpn-banner-answer-pending, *:focus {
    cursor: default!important;
    outline: none;
}

.tpn-banner-image {
    padding-bottom:3px;
}

.tpn-banner-image-wide {
    padding-left: 6px;
}

.tpn-question-text {
    font-family: Arial, Verdana, Tahoma, 'san serif';
    font-size: 14px;
    color:#595959;
}

.tpn-buttons {
    padding-left: 10px;
}

ol.tpn-answers {
    list-style-type: none;
    padding: 0px;
    margin: 10px 0px 0px 0px;
}

ol.tpn-answers-inline li {
    display: inline-block;
    padding-right: 12px;
}

.tpn-answer-label {
    font-family: Arial, Verdana, Tahoma, 'san serif';
    font-size: 13px;
    color:#595959;
    padding: 2px 0px 0px 21px;
    display: inline-block;
}

.tpn-answer-label > input {
    margin-left: -20px;
    margin-right: 6px;
}

.tpn-question-required {
    color: #b94a48;
    background-color: #f2dede;
    -webkit-transition: background-color 1000ms linear;
    -moz-transition: background-color 1000ms linear;
    -o-transition: background-color 1000ms linear;
    -ms-transition: background-color 1000ms linear;
    transition: background-color 1000ms linear;
}

.tpn-additional-fields {
    padding:10px;
}

.tpn-additional-fields table tr td {
    padding-top:5px;
}

.tpn-additional-fields-title {
    font-family: Arial, Verdana, Tahoma, 'san serif';
    font-size: 14px;
    color:#595959;
    font-weight:bold;
}

.tpn-additional-field-label {
    font-family: Arial, Verdana, Tahoma, 'san serif';
    font-size: 14px;
    color:#595959;
}

.tpn-additional-field {
    font-family: Arial, Verdana, Tahoma, 'san serif';
    font-size: 14px;
    color:#595959;
}

.tpn-banner-separator {
    border-bottom: 1px solid #eeeeee;
    clear:both;
}

.tpn-confirmation {
    font-family: Arial, Verdana, Tahoma, 'san serif';
    font-size: 14px;
    color:#595959;
    padding:10px 10px 20px 10px;
}

.tpn-button-small[disabled]:hover,
.tpn-button-small {
    -moz-box-shadow:inset 0px 1px 0px 0px #ffffff;
    -webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;
    box-shadow:inset 0px 1px 0px 0px #ffffff;
    background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #f9f9f9), color-stop(1, #e9e9e9));
    background:-moz-linear-gradient(top, #f9f9f9 5%, #e9e9e9 100%);
    background:-webkit-linear-gradient(top, #f9f9f9 5%, #e9e9e9 100%);
    background:-o-linear-gradient(top, #f9f9f9 5%, #e9e9e9 100%);
    background:-ms-linear-gradient(top, #f9f9f9 5%, #e9e9e9 100%);
    background:linear-gradient(to bottom, #f9f9f9 5%, #e9e9e9 100%);
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f9f9f9', endColorstr='#e9e9e9',GradientType=0);
    background-color:#f9f9f9;
    -moz-border-radius:6px;
    -webkit-border-radius:6px;
    border-radius:6px;
    border:1px solid #dcdcdc;
    display:inline-block;
    color:#666666;
    font-family:arial;
    font-size:13px;
    font-weight:bold;
    padding:4px 13px;
    text-decoration:none;
    margin:10px 7px 0px 0px;
    text-shadow:0px 1px 0px #ffffff;
}
.tpn-button-small:hover {
    background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #e9e9e9), color-stop(1, #f9f9f9));
    background:-moz-linear-gradient(top, #e9e9e9 5%, #f9f9f9 100%);
    background:-webkit-linear-gradient(top, #e9e9e9 5%, #f9f9f9 100%);
    background:-o-linear-gradient(top, #e9e9e9 5%, #f9f9f9 100%);
    background:-ms-linear-gradient(top, #e9e9e9 5%, #f9f9f9 100%);
    background:linear-gradient(to bottom, #e9e9e9 5%, #f9f9f9 100%);
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#e9e9e9', endColorstr='#f9f9f9',GradientType=0);
    background-color:#e9e9e9;
}

.tpn-button-small.active[disabled]:hover,
.tpn-button-small.active {
    background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #ccc), color-stop(1, #f9f9f9));
    background:-moz-linear-gradient(top, #ccc 5%, #f9f9f9 100%);
    background:-webkit-linear-gradient(top, #ccc 5%, #f9f9f9 100%);
    background:-o-linear-gradient(top, #ccc 5%, #f9f9f9 100%);
    background:-ms-linear-gradient(top, #ccc 5%, #f9f9f9 100%);
    background:linear-gradient(to bottom, #ccc 5%, #f9f9f9 100%);
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ccc', endColorstr='#f9f9f9',GradientType=0);
    background-color:#ccc;
}

.tpn-button-large[disabled]:hover,
.tpn-button-large {
    -moz-box-shadow:inset 0px 1px 0px 0px #97c4fe;
    -webkit-box-shadow:inset 0px 1px 0px 0px #97c4fe;
    box-shadow:inset 0px 1px 0px 0px #97c4fe;
    background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #3d94f6), color-stop(1, #1e62d0));
    background:-moz-linear-gradient(top, #3d94f6 5%, #1e62d0 100%);
    background:-webkit-linear-gradient(top, #3d94f6 5%, #1e62d0 100%);
    background:-o-linear-gradient(top, #3d94f6 5%, #1e62d0 100%);
    background:-ms-linear-gradient(top, #3d94f6 5%, #1e62d0 100%);
    background:linear-gradient(to bottom, #3d94f6 5%, #1e62d0 100%);
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#3d94f6', endColorstr='#1e62d0',GradientType=0);
    background-color:#3d94f6;
    -moz-border-radius:6px;
    -webkit-border-radius:6px;
    border-radius:6px;
    border:1px solid #337fed;
    display:inline-block;
    color:#ffffff;
    font-family:arial;
    font-size:15px;
    font-weight:bold;
    padding:6px 24px;
    text-decoration:none;
    margin:10px 7px 0px 0px;
    text-shadow:0px 1px 0px #1570cd;
}
.tpn-button-large:hover {
    background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #1e62d0), color-stop(1, #3d94f6));
    background:-moz-linear-gradient(top, #1e62d0 5%, #3d94f6 100%);
    background:-webkit-linear-gradient(top, #1e62d0 5%, #3d94f6 100%);
    background:-o-linear-gradient(top, #1e62d0 5%, #3d94f6 100%);
    background:-ms-linear-gradient(top, #1e62d0 5%, #3d94f6 100%);
    background:linear-gradient(to bottom, #1e62d0 5%, #3d94f6 100%);
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#1e62d0', endColorstr='#3d94f6',GradientType=0);
    background-color:#1e62d0;
    color: #ffffff;
    text-decoration: none;
}

.tpn-answer-skip,
.tpn-answer-skip[disabled]:hover {
    font-family: Arial, Verdana, Tahoma, 'san serif';
    display: block;
    font-size: 9pt;
    text-decoration: none;
    color: #999;
    vertical-align: middle;
    padding: 4px;
}

.tpn-answer-skip a {
    text-decoration: none;
    color: #999;
}

.tpn-answer-skip a:hover {
    color: #bbb;
    text-decoration: underline;
}

.tpn-mode-wide .tpn-answer-skip {
    clear: right;
    float: right;
    text-align: right;
}

.tpn-mode-wide .tpn-logo-moreinfo {
    clear: right;
    float: right;
    text-align: right;
}

.tpn-banner-container {
    clear: both;
    width: 100%;
}

.tpn-banner:after,
.tpn-banner-container:after,
.clearfix:after {
    content: " "; /* Older browser do not support empty content */
    visibility: hidden;
    display: block;
    height: 0;
    clear: both;
}

.tpn-moreinfo-link-container {
    position: relative;
    padding: 4px;
    width: 15px;
    display: block;
}
.tpn-moreinfo-link {
    font-family: Arial, Verdana, Tahoma, 'san serif';
    font-size:12px;
    text-decoration: none;
    color: rgb(106, 136, 15);
    cursor: pointer;
    display: inline-block;
    height: 15px;
    width: 15px;
    background-image: url('tpn-information.png');
}

.tpn-mode-stacked .tpn-moreinfo-link
{
    margin-left: 3px;
}

.tpn-moreinfo {
    background-color: #eeeeee;
    border: 1px solid #ccc;
    color: #666;
    font-family: Arial, Verdana, Tahoma, 'san serif';
    font-size: 13px;
    min-height: 50px;
    text-align: left;
}
.tpn-moreinfo-content {
    margin: 18px 10px 10px 10px;
}

.tpn-moreinfo-arrow {
    position: absolute;
    background-image: url('moreinfo-arrow-right.png');
    right: -11px;
    top: 18px;
    width: 12px;
    height: 26px;
    margin:0;
    padding:0;
}

.tpn-moreinfo-close {
    position: absolute;
    background-image: url('../../lib/bootstrap/img/glyphicons-halflings.png');
    background-position: -314px 0;
    top: 4px;
    right: 4px;
    width: 12px;
    height: 12px;
    margin:0;
    padding:0;
    cursor: pointer;
    text-align: center;
}

.tpn-moreinfo-panel
{
    display: none;
}
.tpn-mode-wide .tpn-moreinfo-panel {
    right: 35px;
    top: -20px;
    position: absolute;
    z-index: 1000;
    min-width: 300px;
}

.tpn-mode-wide .tpn-moreinfo-link-container {
    float: right;
    display: block;
}

.tpn-mode-stacked .tpn-moreinfo-panel {
    position: relative;
    width: 90%; 
    margin: 20px auto;
}

.tpn-mode-stacked .tpn-moreinfo
{
    background-color: #ffffff;
}

.tpn-mode-stacked .tpn-moreinfo-arrow {
    display: none;
}

.background-mask {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0px;
    left:0px;
    z-index: 100;
    display: none;
    background: #fff;
    opacity: 0.1;
    filter: alpha(opacity=0.1);
}

.tpn-mode-stacked .background-mask {
    background:rgb(96,96,96);
    background:rgba(96,96,96,0.6);
    opacity: 1;
    filter: alpha(opacity=1);
}

/*
* these styles are used for answer tooltips
*/
.tpn-answer-moreinfo {
    position: absolute;
    color: #ffffff;
    background-color: #eeeeee;
    max-width:90%;
    box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.3);
    z-index: 1000;
    bottom: 22px;
    left: 15px;
    padding: 2px 8px 8px 8px;
    -moz-border-radius:3px;
    -webkit-border-radius:3px;
    border-radius:3px;
    border: 1px solid #bbb;
    color: #666;
    font-family: Arial, Verdana, Tahoma, 'san serif';
    font-size: 13px;
}
.tpn-answer-moreinfo:after {
    content: '';
    position: relative;
    display: block;
    width: 0;
    height: 0;
    background: transparent;
    border: 6px solid transparent;
    margin-bottom: -18px;
    border-top-color: #eeeeee;
    z-index: 1000;
    pointer-events: none;
    left: 6px;
}

.tpn-answer-moreinfo-label {
    padding-right: 20px;
    background-image: url('tpn-information.png');
    background-position: right 5px;
    background-repeat: no-repeat;
}

.tpn-footer {
    font-family: Arial, Verdana, Tahoma, 'san serif';
    color:#595959;
    font-size:10px;
    text-align:right;
    padding-top:4px;
    padding-right:15px;
}
.tpn-footer a {
    font-family: Arial, Verdana, Tahoma, 'san serif';
    text-decoration: none;
    font-size:10px;
    color:blue;
}