body {
behavior: url(css/csshover3.htc);
background-color: #f3f3ff;
text-align: center;
-moz-user-select: none;
margin-top: 0px;
margin-left: 0px;
cursor: default;
overflow: hidden;
}
p,ul,ol,td,tr,div {
font-family: Arial,Helvetica,sans-serif;
font-size: 14px;
text-align: left
}
p {
margin: 0px;
margin-bottom: 6px
}
div {
clear: none
}
#content {
width: 993px;
margin-right: auto;
margin-top: 0px;
text-align: left;
background-color: #d4d4e4
}
a {
text-decoration: none;
color: black
}
a:hover div {
background-color: #f00;
cursor: pointer;
cursor: hand
}
h1 {
padding-top: 4px;
margin-bottom: 6px;
margin-top: 5px;
margin-left: 20px;
height: 22px
}
h1 div {
font-size: 16px
}
h2 {
font-size: 13px;
margin-left: 15px;
margin-top: 4px;
margin-bottom: 2px
}
.h1left {
float: left;
padding-left: 8px
}
#prefstyleChoice {
margin-top: -6px;
margin-bottom: 10px;
margin-left: 40px;
font-weight: bold
}
.helpBtn {
cursor: pointer;
cursor: hand;
width: 17px;
height: 17px;
margin-left: 5px;
margin-top: 1px;
background-image: url(../images/help.gif);
background-repeat: no-repeat
}
.highlightHelp {
border: 2px solid orange
}
#prefhead {
background-image: url(../images/prefs.png);
background-repeat: no-repeat;
}
#choicehead {
background-image: url(../images/tables.png);
background-repeat: no-repeat
}
#savingshead {
background-image: url(../images/bulb.png);
background-repeat: no-repeat
}
#explainSort {
font-size: 11px;
font-style: italic;
font-weight: normal;
color: #77a;
float: right;
margin-right: 30px;
margin-top: -5px
}
.button,.smallbutton,.disabledSmallbutton,.minibutton {
border: 1px solid black;
background-color: #d4d4e4;
background-repeat: no-repeat;
text-align: center;
cursor: pointer;
cursor: hand
}
.disabledSmallbutton {
color: #77a;
border-color: #77a;
margin: 10px;
margin-bottom: 0px;
padding-top: 3px;
cursor: default
}
.button:hover,.smallbutton:hover,.minibutton:hover {
background-color: #99e
}
.button {
margin-top: 20px;
padding: 10px;
background-position: 10px;
padding-left: 42px
}

.button.highlighted{
	background-color: #ff7;
}

.button.highlighted:hover{
	background-color: #ff7;
	cursor: default;
}

.smallbutton {
margin: 10px;
margin-bottom: 0px;
padding-top: 3px
}
.minibutton {
background-repeat: no-repeat;
font-size: 12px;
height: 14px
}
.like,.plus {
background-position: right;
padding-right: 18px
}
.dontlike,.minus {
background-position: left;
padding-left: 18px
}
.repeat {
background-repeat: repeat-x
}
.like {
background-color: #dfa;
background-image: url(../images/like.gif)
}
.dontlike {
background-color: #f88;
background-image: url(../images/dontlike.gif)
}
.plus {
background-image: url(../images/plus.gif)
}
.minus {
background-image: url(../images/minus.gif)
}

.centered {
background-position: center; 
}
.like:hover {
background-color: #9f4
}
.dontlike:hover {
background-color: #f33
}
.left {
float: left;
width: 215px;
padding-left: 7px;
padding-right: 7px;
padding-bottom: 3px;
background-color: #e5e5f5;
}
.left p{
	font-size: 13px;
}
.right {
float: right;
margin-top: 10px;
padding-bottom: 10px;
width: 756px
}
#row1 {
background-color: #f3f3ff;
padding-left: 0px;
height: 385px;
overflow: hidden;
}
#row2 {
	clear: both;
padding-left: 0px;
border-top: 1px solid black;
background-color: #f3f3ff;
}

#row2 .left{
	padding-top: 30px;
	height: 280px;
}
#row3 .left{
	height: 230px;
}
#row3 {
padding-left: 0px;
border-top: 1px solid black;
background-color: #f3f3ff;
position: relative;
height: 250px;
z-index: 3;
overflow: hidden
}
.tablehead {
background-image: url(../images/tables.png);
background-repeat: no-repeat
}
.important {
font-weight: bold;
color: red
}
.hidden {
height: 0px;
position: absolute
}
.clear {
clear: both
}
#debug {
border: 1px solid black;
clear: both;
margin-top: 0px;
overflow: hidden;
height: 0px;
visibility: hidden;
}
#announceContent {
border: 1px solid black;
background: #fff;
padding: 20px;
margin-top: 30px;
width: 400px;
margin-left: auto;
margin-right: auto
}
#startButton {
width: 120px;
padding-left: 10px;
margin-bottom: 20px
}
#basketFrame,#agent,#endFrame {
position: relative;
z-index: 5
}
#backdrop {
left: 1px;
top: 1px;
width: 995px;
height: 600px;
position: absolute;
z-index: 1;
background-color: #f3f3ff;
filter: alpha(opacity=80);
-moz-opacity: 0.8;
-khtml-opacity: 0.8;
opacity: 0.8
}
#foreground {
position: absolute;
z-index: 2;
top: 0px;
width: 995px;
height: 480px
}
#productInfoFrame {
border: 1px solid black;
background-color: #e5e5f5;
width: 600px;
margin-top: 10px;
margin-left: auto;
margin-right: auto
}
#attributes {
float: left;
margin-top: 40px;
width: 200px
}
#info {
float: right;
width: 330px
}
#productInfoContent {
margin-top: 15px;
margin-bottom: 15px;
margin-left: 15px;
margin-right: 15px
}
#infoBody {
clear: left;
border: 1px solid black;
background-color: #f3f3ff;
height: 140px;
padding: 10px;
overflow: auto
}
#infoBody>p {
padding-bottom: 8px
}
h2#infoHead {
font-size: 16px;
margin-left: 0px;
margin-bottom: 5px
}
.infoAttribute,.infoValue {
text-align: left;
border-bottom: 1px dotted #bbd
}
.infoAttribute {
background-color: #d4d4e4;
width: auto
}
.infoValue {
background-color: #f9f9ff;
width: 70px
}
.selectedTab,.unselectedTab {
float: left;
font-size: 11px;
padding: 5px;
margin-bottom: -1px;
border: 1px solid black;
cursor: default
}
.lastTab {
margin-left: -1px
}
.selectedTab {
border-bottom: 1px solid #f3f3ff;
background-color: #f3f3ff
}
.button:hover,.unselectedTab:hover {
background-color: #99e;
cursor: pointer;
cursor: hand
}
#infoButtons {
clear: both;
margin-top: -13px
}
#status {
text-align: center;
font-style: italic;
padding-top: 10px
}
#unselectButton {
clear: both;
float: right;
padding-top: 25px;
padding-bottom: 25px;
width: 50px;
background-image: url(../images/back.png)
}
#basketButton, #hideButton, #unknownButton, #notButton {
	float: left;
	margin-right: 10px;
	margin-top: 10px;
	width: 155px
}

.inBasket {
background-image: url(../images/inBasket.png)
}

.inHidden {
background-image: url(../images/hide.png)
}

.outHidden {
background-image: url(../images/unhide.png)
}

.unknown {
background-image: url(../images/unknown.png);
}


table {
border: 1px solid black;
border-spacing: 0px;
table-layout: automatic
}
#surveyTable {
margin-top: 10px;
margin-bottom: 50px;
font-weight: normal
}
*:first-child+html table {
border-collapse: collapse
}
* html table {
border-collapse: collapse
}
td {
border-right: 1px dotted #ddf;
border-bottom: 1px dotted #ddf;
padding: 0px 2px 0px 2px;
font-size: 11px;
text-align: right
}

#basket .scrollTable td,#recTable td {
cursor: pointer;
cursor: hand
}
tr.even {
background-color: #f9f9ff
}
tr.even .highlight {
background-color: #ddf
}
tr.odd {
background-color: #fff
}
tr.odd .highlight {
background-color: #f7f7ff
}
tr.head {
background-color: #d4d4e4;
border-bottom: 1px dotted #bbd;
font-family: Arial,Helvetica,sans-serif;
text-align: left;
font-weight: normal
}
tr.head td {
text-align: left;
font-weight: normal
}
tr.doublespace td {
height: 29px
}
tr.headerHelp {
position: absolute;
z-index: 110;
border-bottom: 2px solid orange
}
*:first-child+html tr.doublespace td {
height: 30px
}
* html tr.doublespace td {
height: 30px
}
tr.head .text {
position: relative
}
tr.head .highlight {
background-color: #bbe
}
tr.head .tooltip {
position: absolute;
display: none;
background-color: #fff;
border: 1px solid black;
padding: 5px 5px 0px 5px;
width: 140px;
left: -50px
}
.tipText,.explainSort {
text-align: left;
font-size: 11px
}
.explainSort {
font-style: italic
}
tr.head td:hover .tooltip {
display: block;
z-index: 3
}
.head .name .tooltip {
left: 20px
}
.head .last .tooltip {
width: 95px;
}
tr.sumrow {
background-color: #d4d4e4
}
.totaal td {
font-weight: bold
}
tr.void td {
text-align: center;
font-style: italic
}
td.sortasc,td.sortdesc {
background-repeat: no-repeat;
background-position: center right;
background-color: #bbe
}
td.name .text,td.name {
text-align: left
}
#recTable .body:hover td,.scrollTable .body:hover td {
background-color: #ffa
}
tr.selected {
background-color: #ff7
}
#recTable td,#basketTable td,#hiddenTable td,#notTable td{
width: 52px;
}
#recTable td.returninv,th.returninv {
width: 70px;
}
#recTable td.name,#basketTable td.sumname,#basketTable td.name,#hiddenTable td.sumname,#hiddenTable td.name, #notTable td.name{
width: 230px;
}
#recTable td.popularity{
width: 20px;
}
td.last {
border-right: none
}
#surveyTable td.name {
width: 150px
}
.recvoid td {
height: 88px;
border-right: none
}
#totalChoice {
font-size: 12px;
margin-bottom: 4px
}
#basketTable,#hiddenTable,#notTable{
width: 320px;
float: right;
border: 1px solid black
}

#basketTable{
	float: left;
}

#notTable{
	margin-top: 10px;
	clear: right;
}

#basketTable.highlightHelp,#hiddenTable.highlightHelp,#notTable.highlightHelp{
border: 2px solid orange
}
#basketTable {
margin-right: 40px
}
#basketTable .scrollTable {
overflow-y: auto;
overflow-x: hidden;
height: expression(this.scrollHeight >155 ? "156px":"auto");/* sets max-height for IE */max-height:156px;
width: 320px
}
#hiddenTable .scrollTable, #notTable .scrollTable {
overflow-y: auto;
overflow-x: hidden;
height: expression(this.scrollHeight >64 ? "65px":"auto");/* sets max-height for IE */max-height:65px;
width: 320px
}
.basketContent {
border: none;
width: 320px
}
.basketContent td.last,.basketContent td.sum {
padding-right: 25px;
border-right: none
}
.basketContent tr.tblhead td {
background-color: #d4d4e4;
width: 100%;
text-align: left;
font-weight: bold;
border-right: none
}
.basketContent td.sumname {
text-align: left;
font-weight: bold
}
.basketContent td.sum {
font-weight: bold
}

.filledMeter {
background-image: url(../images/filledMeter.gif);
background-position: center left;
border-right: 1px solid red
}
.unfilledMeter {
background-image: url(../images/unfilledMeter.gif);
background-position: center right;
}
.posFilledMeter {
background-image: url(../images/posFilledMeter.gif);
background-position: center left;
border-right: 1px solid red;
border-left: 1px solid black
}
.posUnfilledMeter {
background-image: url(../images/posUnfilledMeter.gif);
background-position: center right;
}
.negFilledMeter {
background-image: url(../images/negFilledMeter.gif);
background-position: center right;
border-left: 1px solid red;
border-right: 1px solid black;
}
.negUnfilledMeter {
background-image: url(../images/negUnfilledMeter.gif);
background-position: center left;
}
.noMeter {
width: 0px;
border-left: 1px solid red;
}

.filledMeter, .unfilledMeter, .posFilledMeter, .posUnfilledMeter, .negFilledMeter, .negUnfilledMeter, .noMeter{
	float: left;
	overflow: hidden;
	height: 16px;
}

#prefTable {
border: 1px solid black;
}
#prefAtts.highlightHelp {
border: 2px solid orange
}
#tradeOffTable .name {
text-align: center;
cursor: default;
width: 347px;
font-weight: bold
}


#tradeOffTable #prefAtts tr {
background-color: #fff
}
#tradeOffTable tr {
background-color: #e7e7f7
}
#tradeOffTable tr:hover {
background-color: #bbe
}
#tradeOffTable #prefAtts tr:hover {
background-color: #ddf
}
#tradeOffTableContent {
border: 1px solid black
}
#tradeOffTableContent.highlightHelp {
border: 2px solid orange
}
#tradeOffTable td {
border-bottom: 1px dotted #bbd
}
#prefAtts .attName {
text-align: center;
font-size: 11px;
font-weight: bold
}

.dimName {
text-align: center;
cursor: default;
width: 706px;
font-size: 12px;
font-weight: bold;
}

.dimSide1 {
text-align: left;
cursor: default;
width: 200px;
font-size: 12px;
float: left;
padding-left: 120px;
}

.dimSide2 {
text-align: right;
cursor: default;
width: 315px;
font-size: 12px;
float: left;

}

.attName .schaal {
font-size: 11px;
width: 113px;
font-weight: bold;
float:left;
}

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

.attName .schaalMidden {
text-align: center;
}

.attName .schaalRechts {
text-align: right;
}

.nameNeed{
vertical-align: top;
padding-top: 1px;
}

.utilBar {
background-color: #bbe;
margin-bottom: -14px;
padding-top: 2px;
height: 13px
}
.percent0 {
background-color: #fff
}
.utilBar .percentText {
font-size: 8px
}
td.wide {
width: 130px
}
td.shallow {
width: 38px
}
#agent {
position: absolute
}
#agent p {
font-size: 13px
}
#agentIcon,#textIcon {
margin-top: 10px;
float: left;
background-repeat: no-repeat
}
#agentIcon {
background: url(../images/agent.gif);
height: 120px;
width: 93px;
margin-right: 40px
}
#textIcon {
background: url(../images/text.gif);
height: 100px;
width: 34px;
margin-bottom: 10px;
margin-left: 10px;
margin-right: 10px
}
#speechOuter,#textOuter {
float: left
}
#textOuter {
background-color: white;
border: 2px solid orange
}
#speechInner,#textInner {
float: left;
width: 400px
}
#agentBackdrop {
position: absolute;
left: 0px;
top: -1px;
width: 995px;
height: 610px;
z-index: -10;
background-color: #f3f3ff;
filter: alpha(opacity=10);
-moz-opacity: 0.1;
-khtml-opacity: 0.1;
opacity: 0.1
}
#foregroundAgent {
position: absolute;
z-index: 80;
top: 0px;
left: 0px;
width: 540px;
height: 170px
}
#speechInner {
background-color: white;
border: 2px solid orange
}
#callout {
position: absolute;
height: 35px;
top: 40px;
left: 98px;
width: 36px;
float: left;
background-repeat: no-repeat;
background: url(../images/callout.gif)
}
#speechText {
margin-left: 15px;
margin-top: 15px;
margin-right: 15px;
margin-bottom: 15px;
font-size: 13px;
line-height: 16px
}
#closeAgent,#aprevButton,#anextButton {
padding: 4px;
width: 90px;
margin-top: 10px;
margin-bottom: 8px
}
#aprevButton {
float: left
}
#anextButton {
float: right
}
#endContent {
margin-top: 15px;
padding: 5px;
font-size: 11px;
color: black
}
.contentactive {
background-color: #ff7
}
#stopButton {
height: 21px;
margin-left: 120px;
margin-top: 5px;
font-size: 12px;
width: 80px
}
#surveyContent {
width: 670px;
max-height: 585px;
overflow: hiddenheight:expression( this.scrollHeight >584 ? "585px":"auto");/* sets max-width for IE */margin-left:auto;
margin-right: auto;
margin-top: 15px;
text-align: left;
background-color: #fff;
border: 1px solid black
}
#surveyHeader {
background-color: #e5e5f5;
padding: 13px
}
#surveyTitle {
font-size: 18px;
font-weight: bold
}
#explanation {
font-size: 14px
}
#questions {
padding-left: 15px;
padding-right: 15px;
padding-bottom: 10px
}
.question {
border-left: 5px solid #d4d4e4;
border-top: 2px solid #d4d4e4;
padding-left: 10px;
padding-top: 5px;
margin-top: 15px;
margin-bottom: 20px
}
.explanation {
border-left: none;
border-top: none
}
.questionText {
margin-bottom: 10px
}
.optional {
border-left-color: #ff7
}
.ok {
border-left-color: #cf7
}
.bad {
border-left-color: #f77
}
.checkbox,.radio {
}
.1-10 {
width: 10px
}
.input1-100 {
width: 30px
}
.inputtext {
width: 350px
}

textarea {
width: 95%;
height: 100px;
}
.option {
width: 19%;
text-align: center;
display: inline-block;
vertical-align: bottom;
position: relative
}
.l6 {
width: 16%
}
.l7 {
width: 14%
}
.l8 {
width: 12%
}
.l9 {
width: 11%
}
.label {
text-align: center;
font-size: 11px;
margin-left: 5px;
margin-right: 5px
}
.labelleft,.labelright {
position: absolute;
top: 0px;
left: 0px
}
.labelright {
left: 0px
}
#bottomRow {
clear: both;
float: right
}
#questionsLeft {
float: left;
font-style: italic;
font-size: 12px;
margin-top: 14px;
margin-right: 20px
}
#nextButton {
height: 24px;
margin-top: 10px;
margin-right: 50px;
margin-bottom: 20px
}
.imageleft {
float: left;
margin-right: 30px;
margin-top: 5px
}
.imagedownleft {
margin-right: 30px
}
.textright li {
margin-top: 25px
}