@charset "UTF-8";
/* CSS Document */

/* apply a natural box layout model to all elements */
*, *:before, *:after {
  -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}

html {
	font-size: 100%;
	-webkit-text-size-adjust: 100%;
	-ms-text-size-adjust: 100%;
}

body {
	margin: 0;
	font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
	font-size: 14px;
	line-height: 1.3em;
	color: #293891;
	background-color: #FFF;
}

img {
	vertical-align: bottom;
}


/* ==================== TEMPORARY STYLES ==================== */
/* These styles are just used to demonstrate the positioning of the questions when there are fewer than four displayed,
and the graying out of the results area when no results are yet displayed. Presumably, these pieces of functionality
will be replaced by script, so these styles can be stripped out at that point. */

.vdi-TEMP-twoQuestionsOnly {
}

.vdi-TEMP-twoQuestionsOnly .vdi-question:first-child {
	margin-left: 163px;
}

.vdi-TEMP-oneQuestionOnly {
}

.vdi-TEMP-oneQuestionOnly .vdi-question:first-child {
	margin-left: 245px;
}

.vdi-TEMP-oneQuestionOnly .vdi-resultsHeader h1, .vdi-TEMP-oneQuestionOnly .vdi-resultsHeader p {
	opacity: 0.35;
}


/* ==================== Primary Structure and Layout Elements ==================== */

#tnContent {
	width: 900px;
	position: relative;
	margin-left: 0;
}

#tnContent p {
	margin: 0.7em 0 0 0;
}

#tnContent p:first-child {
	margin-top: 0;
}

#tnContent table {
	border-collapse: collapse;
	border-spacing: 0;
}

#tnContent a {
}

#tnContent hr {
	height: 1px;
	background-color: #DCE8EF;
	border: none;
}

.vdi-mainContainer {
	position: relative;
	height: 462px;
	border-width: 1px 0;
	border-style: solid;
	border-color: #FFF;
	background: rgb(40,171,225); /* Old browsers */
	background: -moz-linear-gradient(top,  rgba(40,171,225,1) 0%, rgba(47,100,174,1) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(40,171,225,1)), color-stop(100%,rgba(47,100,174,1))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  rgba(40,171,225,1) 0%,rgba(47,100,174,1) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  rgba(40,171,225,1) 0%,rgba(47,100,174,1) 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  rgba(40,171,225,1) 0%,rgba(47,100,174,1) 100%); /* IE10+ */
	background: linear-gradient(to bottom,  rgba(40,171,225,1) 0%,rgba(47,100,174,1) 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#28abe1', endColorstr='#2f64ae',GradientType=0 ); /* IE6-9 */
}

/* Hack to clear floats */
.vdi-mainContainer:after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}

.vdi-bannerTop {
	min-height: 44px;
	padding: 14px;
	background-color: #BEE0F1;
	-webkit-border-radius: 12px 12px 0 0;
	-moz-border-radius: 12px 12px 0 0;
	border-radius: 12px 12px 0 0;
}

.vdi-bannerBottom {
	min-height: 44px;
	padding: 14px;
	background-color: #BEE0F1;
	-webkit-border-radius: 0 0 12px 12px;
	-moz-border-radius: 0 0 12px 12px;
	border-radius: 0 0 12px 12px;
}

.vdi-bannerStripe {
	height: 10px;
	background-color: #854499;
}


/* ==================== Questionnaire ==================== */

.vdi-question {
	position: relative;
	float: left;
    width: 164px;
    display: none;
}

.vdi-questionHeader, .vdi-questionBody {
	position: relative;
	width: 164px;
	padding: 10px;
}

.vdi-qFirst .vdi-questionHeader, .vdi-qFirst .vdi-questionBody {
	border-left: none;
}

.vdi-questionHeader {
	display: table-cell;
	height: 60px;
	border-width: 0 0 1px 1px;
	border-style: solid;
	border-color: #53BBE6 #7ECDED;
	vertical-align: middle;
}

.vdi-questionHeader h1 {
	display: inline;
	margin: 0 10px 0 0;
	padding: 0;
	font-size: 40px;
	font-weight: normal;
	color: #FFF;
	vertical-align: middle;
}

.vdi-questionHeader h2 {
	display: inline;
	margin: 0;
	padding: 0;
	font-size: 18px;
	font-weight: normal;
	color: #FFF;
	vertical-align: middle;
}

.vdi-questionBody {
	height: 400px;
	border-width: 0 0 0 1px;
	border-style: solid;
	border-color: #7ECDED;
	font-size: 12px;
	line-height: 1.3em;
	color: #FFF;
}

.vdi-questionBodyDescription {
	width: 122px;
	margin-bottom: 8px;
}

.vdi-questionInfoBug {
	position: absolute;
	top: 10px;
	right: 10px;
}


/* ==================== Buttons ==================== */

#tnContent .vdi-buttonSet {
}

#tnContent .vdi-buttonSet ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
}

#tnContent .vdi-buttonSet ul li {
	margin-top: 4px;
}

#tnContent .vdi-buttonSet ul li:first-child {
	margin-top: 0;
}


#tnContent .vdi-buttonSet ul li a, #tnContent .vdi-buttonSet ul li.vdi-buttonGrayedOut span {
    cursor: pointer;
	position: relative;
	display: table-cell;
	width: 143px;
	height: 44px;
	margin: 0;
	padding: 4px;
	font-size: 13px;
	line-height: 1.3em;
	text-align: center;
	vertical-align: middle;
	text-decoration: none;
	border-width: 1px;
	border-style: solid;
	-webkit-border-radius: 6px;
	-moz-border-radius: 6px;
	border-radius: 6px;
}

#tnContent .vdi-buttonSet ul li.vdi-buttonGrayedOut span {
    cursor: default !important;
}

#tnContent .vdi-buttonSet ul li a {
	color: #000;
	border-color: #222;
	background: rgb(255,255,255); /* Old browsers */
	background: -moz-linear-gradient(top,  rgba(255,255,255,1) 0%, rgba(197,197,197,1) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(100%,rgba(197,197,197,1))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(197,197,197,1) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(197,197,197,1) 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(197,197,197,1) 100%); /* IE10+ */
	background: linear-gradient(to bottom,  rgba(255,255,255,1) 0%,rgba(197,197,197,1) 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#c5c5c5',GradientType=0 ); /* IE6-9 */
	-webkit-box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.5);
	-moz-box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.5);
	box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.5);
}

#tnContent .vdi-buttonSet ul li a:active {
	background: #BBB;
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bbbbbb', endColorstr='#bbbbbb',GradientType=0 ); /* IE6-9 */
	-webkit-box-shadow: 0px 0px 1px 0px rgba(0,0,0,0.5);
	-moz-box-shadow: 0px 0px 1px 0px rgba(0,0,0,0.5);
	box-shadow: 0px 0px 1px 0px rgba(0,0,0,0.5);
}

#tnContent .vdi-buttonSet ul li.vdi-buttonGrayedOut span {
	color: #B5B5B5;
	border-color: #444;
	background: rgb(255,255,255); /* Old browsers */
	background: -moz-linear-gradient(top,  rgba(255,255,255,1) 0%, rgba(229,229,229,1) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(100%,rgba(229,229,229,1))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(229,229,229,1) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(229,229,229,1) 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(229,229,229,1) 100%); /* IE10+ */
	background: linear-gradient(to bottom,  rgba(255,255,255,1) 0%,rgba(229,229,229,1) 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e5e5e5',GradientType=0 ); /* IE6-9 */
	-webkit-box-shadow: none;
	-moz-box-shadow: none;
	box-shadow: none;
}

#tnContent .vdi-buttonSet ul li.vdi-buttonSelected a {
	color: #FFF;
	border-color: #000;
	background: rgb(23,25,116); /* Old browsers */
	background: -moz-linear-gradient(top,  rgba(23,25,116,1) 0%, rgba(52,68,161,1) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(23,25,116,1)), color-stop(100%,rgba(52,68,161,1))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  rgba(23,25,116,1) 0%,rgba(52,68,161,1) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  rgba(23,25,116,1) 0%,rgba(52,68,161,1) 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  rgba(23,25,116,1) 0%,rgba(52,68,161,1) 100%); /* IE10+ */
	background: linear-gradient(to bottom,  rgba(23,25,116,1) 0%,rgba(52,68,161,1) 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#171974', endColorstr='#3444a1',GradientType=0 ); /* IE6-9 */
	-webkit-box-shadow: none;
	-moz-box-shadow: none;
	box-shadow: none;
}

#tnContent .vdi-buttonSet ul li.vdi-buttonSelected a:active {
	background: #171974;
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#171974', endColorstr='#171974',GradientType=0 ); /* IE6-9 */
}

.vdi-buttonNameSub {
	font-size: 11px;
}

.vdi-bottomLinkLeft {
    float: left;
}

.vdi-bottomLinkRight {
    float: right;
}


/* ==================== Results ==================== */

.vdi-resultsArea {
	position: absolute;
	right: 0;
	width: 245px;
	height: 460px;
	font-size: 13px;
	line-height: 1.3em;
	text-align: center;
	color: #000;
	background-color: #DDD;
	border-left: 1px solid #FFF;
}

.vdi-resultsArea h1 {
	display: inline;
	margin: 0;
	color: #444;
	font-size: 22px;
	font-weight: normal;
	vertical-align: top;
}

.vdi-resultsArea h2 {
	display: inline;
	color: #666;
	font-size: 17px;
	font-weight: normal;
	vertical-align: top;
}

.vdi-resultsArea p {
	text-align: left;
}

.vdi-resultsHeader {
    min-height: 80px;
	padding: 10px;
	border-bottom: 1px solid #BBB;
}

.vdi-resultsBody {
	height: 351px;
	padding: 10px;
	overflow-x: hidden;
	overflow-y: auto;
}

a.vdi-resultsEntry {
	display: block;
	margin-top: 8px;
	padding: 8px;
	color: #000;
	text-align: left;
	text-decoration: none;
	background-color: #FFF;
	border: 1px solid #AAA;
	-webkit-border-radius: 6px;
	-moz-border-radius: 6px;
	border-radius: 6px;
}

a.vdi-resultsEntry:first-child {
	margin-top: 0;
}

a.vdi-resultsEntry:active {
	background-color: #EEE;
}
.vdi-resultsEntryIcons {
    position: relative;
    z-index: 500;
    display: table-cell;
    vertical-align: top;
}

.vdi-resultsEntryText {
    position: relative;
    z-index: 500;
    display: table-cell;
    padding-left: 6px;
    vertical-align: top;
}

#tnContent .vdi-resultsEntryText table {
    border-collapse: separate;
    border-spacing: 2px 0;
}

.vdi-resultsEntryText table th {
    vertical-align: top;
    font-weight: normal;
    font-size: 11px;
    color: #2E2F90;
}

.vdi-resultsEntryText table td {
    vertical-align: top;
    font-size: 11.5px;
}

.vdi-resultsWaitingImg {
    margin-top: 174px;
}

.vdi-noExactResults {
    font-size: 12px;
    line-height: 1.3em;
    font-weight: bold;
    color: #B61D88;
}

#vdi-questionsContainer{
    margin: 0 auto;
}

.tooltip {
    position: absolute;
    z-index: 1070;
    display: block;
    visibility: visible;
    font-size: 12px;
    line-height: 1.4;
    opacity: 0;
    filter: alpha(opacity=0);
}
.tooltip.in {
    opacity: 0.9;
    filter: alpha(opacity=90);
}
.tooltip.top {
    margin-top: -3px;
    padding: 5px 0;
}
.tooltip.right {
    margin-left: 3px;
    padding: 0 5px;
}
.tooltip.bottom {
    margin-top: 3px;
    padding: 5px 0;
}
.tooltip.left {
    margin-left: -3px;
    padding: 0 5px;
}
.tooltip-inner {
    max-width: 400px;
    padding: 3px 8px;
    color: #ffffff;
    text-align: center;
    text-decoration: none;
    background-color: #333333;
    border-radius: 4px;
}
.tooltip-arrow {
    position: absolute;
    width: 0;
    height: 0;
    border-color: transparent;
    border-style: solid;
}
.tooltip.top .tooltip-arrow {
    bottom: 0;
    left: 50%;
    margin-left: -5px;
    border-width: 5px 5px 0;
    border-top-color: #333333;
}
.tooltip.top-left .tooltip-arrow {
    bottom: 0;
    left: 5px;
    border-width: 5px 5px 0;
    border-top-color: #333333;
}
.tooltip.top-right .tooltip-arrow {
    bottom: 0;
    right: 5px;
    border-width: 5px 5px 0;
    border-top-color: #333333;
}
.tooltip.right .tooltip-arrow {
    top: 50%;
    left: 0;
    margin-top: -5px;
    border-width: 5px 5px 5px 0;
    border-right-color: #333333;
}
.tooltip.left .tooltip-arrow {
    top: 50%;
    right: 0;
    margin-top: -5px;
    border-width: 5px 0 5px 5px;
    border-left-color: #333333;
}
.tooltip.bottom .tooltip-arrow {
    top: 0;
    left: 50%;
    margin-left: -5px;
    border-width: 0 5px 5px;
    border-bottom-color: #333333;
}
.tooltip.bottom-left .tooltip-arrow {
    top: 0;
    left: 5px;
    border-width: 0 5px 5px;
    border-bottom-color: #333333;
}
.tooltip.bottom-right .tooltip-arrow {
    top: 0;
    right: 5px;
    border-width: 0 5px 5px;
    border-bottom-color: #333333;
}

/* End tooltip */

.link{
    cursor: pointer;
}