/* Keep these in step with any references in the JavaScript code.
   The stylesheet must be processable by resize_stylesheet.pl , 
   a Perl program which I use to generate size variants.
*/


BODY  {
      font-family: arial, helvetica, sans-serif;
      font-size: 12pt;
      background-color: white;
      }

P     {
      font-family: arial, helvetica, sans-serif;
      font-size: 12pt;
      }

H1    {
      font-family: arial, helvetica, sans-serif;
      font-size: 16pt;
      }

H2    {
      font-family: arial, helvetica, sans-serif;
      font-size: 12pt;
      }

H3    {
      font-family: arial, helvetica, sans-serif;
      font-size: 10pt;
      }

UL    {
      font-family: arial, helvetica, sans-serif;
      font-size: 10pt;
      }

LI    {
      font-family: arial, helvetica, sans-serif;
      font-size: 10pt;
      }

DL    {
      font-family: arial, helvetica, sans-serif;
      font-size: 10pt;
      margin: 0;
      padding: 0;
      }

DT    {
      font-family: arial, helvetica, sans-serif;
      font-size: 10pt;
      font-weight: bold;
      margin: 0;
      padding: 0;
      }

DD    {
      font-family: arial, helvetica, sans-serif;
      font-size: 10pt;
      margin: 0 0 1em 0;
      padding: 0;
      }

TH    {
      font-family: arial, helvetica, sans-serif;
      font-size: 10pt;
      font-weight: bold;
      }	
			
TD    {
      font-family: arial, helvetica, sans-serif;
      font-size: 10pt;
      }


/* Visibility. */

.visible 
      { 
      visibility:visible;
      }

.invisible 
      { 
      visibility:hidden;
      }
      /* Used to preset the images of ideal-pointing
         arrows invisible in image grids. We set them
         visible (and change their SRC attribute) 
         in JavaScript if the user clicks on that square.
      */


/* Info windows (opened by linking to a new browser window) */

.info-window-page-border
      {
      font-family: arial, helvetica, sans-serif;
      font-size: 10pt;
      background-color: white;
/*
      background-color: white;      
      border-style: solid;
      border-width: thick;
      border-color: silver;
*/
      }
      

/* Navigation bars. */

.navigation-bar-row          
      {
      background: silver;
      }

.navigation-bar-cell          
      {
      font-family: arial, helvetica, sans-serif;
      font-size: 10pt; 
      font-weight: bold;
      text-align: center;
      }


/* Tables in data analysis. */

.input-table-row          
      {
      background: #a0a0c0;
      }

.input-table-title
      {
      font-family: arial, helvetica, sans-serif;
      font-size: 12pt;
      text-align: left;
      }	

.input-field  
      {
      font-family: arial, helvetica, sans-serif;
      font-size: 8pt;
      text-align: left;
      }	
      /* Any cell holding an input field. */			

.input-field-label  
      {
      font-family: arial, helvetica, sans-serif;
      font-size: 10pt;
      font-weight: bold;
      text-align: left;
      }	
      /* Cell holding the legend to an input field. */


/* Tabulations and other data summaries. */

.tabulation-header  
      {
      font-family: arial, helvetica, sans-serif;
      font-size: 10pt;
      font-weight: bold;
      text-align: left;
      background: #a0a0c0;
      }	
      /* Cells holding the head (cell titles) of a tabulation table. */

.tabulation-body  
      {
      font-family: arial, helvetica, sans-serif;
      font-size: 10pt;
      font-weight: bold;
      text-align: right;
      background: #a0c0c0;
      }	
      /* Cells holding the main body of a tabulation table. */

.tabulation-body-left-aligned  
      {
      font-family: arial, helvetica, sans-serif;
      font-size: 10pt;
      font-weight: bold;
      text-align: left;
      background: #a0c0c0;
      }	
      /* Cells holding the main body of a tabulation table when
         the text must be left-aligned. 
      */

.tabulation-totals  
      {
      font-family: arial, helvetica, sans-serif;
      font-size: 10pt;
      font-weight: bold;
      text-align: right;
      background: #c0a0c0;
      }	
      /* Cells holding auxiliary results, such as the totals. */


.tabulation-summarise-task-option-and-price 
      {
      vertical-align: top;
      }

.tabulation-summarise-task-option-and-price .option
      {
      }

.tabulation-summarise-task-option-and-price .price::before
      {
      content: " (";
      }

.tabulation-summarise-task-option-and-price .price::after
      {
      content: ")";
      }


/* Parts of a questionnaire in respondent view. */

.respondent-question-cell
      {
      text-align: left;
      }
      /* Cell holding a question in the outer table. */


/* Demographic, text, and importance questions. */

.respondent-demographic-long-text-cell
      {
      text-align: left;
      color: navy;
      }
      /* Cell holding the long text for the question. */

.respondent-demographic-short-text-cell
      {
      text-align: left;
      font-weight: bold;
      color: navy;
      }
      /* Cell holding the short text for the question. */


/* Static grid cells. */

.respondent-static-grid-table
      {
      table-layout: fixed;
      }
      /* The table containing the static grid
         attribute names and options. The only
         reason I have this class here is to get
         the "fixed" layout, so that columns
         are equal widths. Without it, they
         look ugly. Especially in unistatics,
         where because there is only one
         attribute, widths can be very different.
         I don't use the class to set borders
         and cellspacing/padding because that is
         harder in CSS, and may not work
         in all browsers.
      */

.respondent-static-grid-normal
      {
      background: white;
      }
      /* A normal white cell. */

.respondent-static-grid-thick-bottom
      {
      background: white;
      border-bottom: thick solid black; 
      }
      /* As above, but with a thick bottom border. */

.respondent-static-grid-unacceptable-0-unclicked
      {
      background: #f948fa;  /* #66ff99; */
      }
      /* An 'unacceptables' task. Pink. */

.respondent-static-grid-unacceptable-0-clicked
      {
      background: #93bf20; /* #ffccff; */
      }
      /* An 'unacceptables' task. Green. */

.respondent-static-grid-minimum-0-clicked
      {
      background: #93bf20; 
      }
      /* A 'minimum' task. Green. */

.respondent-static-grid-current-0-clicked
      {
      background: #f6ab10; /* #ffff66; */
      }
      /* A 'current' task. Yellow. */

.respondent-static-grid-expected-0-clicked
      {
      background: #478ef6; /* #66ff99; */
      }
      /* An 'expected' task. Blue. */

.respondent-static-grid-ideal-0-clicked
      {
      background: #66ff99;
      }
      /* An ideal task. Pale green. */

.respondent-static-grid-long-question-text
      {
      font-size: 12px;
      }
      /* The class of a DIV which sets a smaller
         size for the long question text in a static
         grid. 
      */

.respondent-static-grid-image-extreme-names
      {
      background: #CCFF99;
      }
      /* Holds the names of the first and last
         attributes in a static image grid.
      */

.respondent-static-grid-image-extreme-names-thick-bottom
      {
      background: #CCFF99;
      border-bottom: thick solid black; 
      }
      /* Holds the names of the first and last
         attributes in a static image grid, 
         with a thick bottom border.
      */


/* Dynamic grid cells. */

.respondent-dynamic-grid-dynamic-spend-counter-span {
  position: fixed;
  top: 0px;
  right: 110px;
  padding: 20px;
  background-color: RGB(235, 238, 245);
  border-radius: 5px;
  color: RGB(83, 131, 226);
  font-weight: bold;
  font-size: 2em;
}

/* The spend counter. This is fixed on the
   top right of the page, and remains in
   view as users scroll up and down.
   The HTML is as below, where 0 and 20 will be replaced 
   by the appropriate values:
     <ASIDE> 
       <SPAN class=respondent-dynamic-grid-dynamic-spend-counter-span>
         <NOBR>0</NOBR>/20 +
       </SPAN>
     </ASIDE>
*/

@media all and (max-width: 1024px) {
  .respondent-dynamic-grid-dynamic-spend-counter-span {
    right: 30px;
  }
}


.respondent-dynamic-grid-normal
      {
      background: white;
      }
      /* A grid for the respondent to fill in. */

.respondent-dynamic-grid-spend
      {
      color: red;
      background: white;
      }
      /* The cells with the "Spend" header and price changes down the
         left-hand column. Used if show_price_changes in
         ItemOutput.
      */ 

.respondent-dynamic-grid-dynamic-spend-counter
      {
      color: red;
      font-weight: bold;
      font-size: large
      }
      /* The cells with the dynamic spend counter.
         Used if show_dynamic_spend_counter in
         ItemOutput.
      */ 

.respondent-dynamic-grid-highlighted
      {
      background: yellow;
      }
      /* A cell indicating a starting position. */

.respondent-dynamic-grid-price
      {
      color: #3300ff;
      }
      /* A cell containing a price. Unlike the other classes,
         this adds to the classes above rather than overriding
         them (it can be used in both normal and highlighted
         cells). */

.respondent-dynamic-grid-price-in-NIE
      {
      color: #3300ff;
      }
      /* A cell containing a price, in the explanation of the
         non-image grid, October 2006, that's generated by
         NonImageExplanation.html. This adds to the classes above.
      */

.respondent-dynamic-grid-ignored
      {
      background: #cccccc;
      }
      /* A cell that's greyed out because its row is to be ignored. */

.respondent-dynamic-grid-trailed
      {
      background: #F1F1FF;
      }
      /* A cell that's in the trail. Only for image grids. */

.respondent-dynamic-grid-clicked
      {
      background: orange;
      }
      /* A cell that's been clicked and changed colour
         via JavaScript.
      */


.respondent-dynamic-grid-option-and-button-table
      {
      width: 100%; 
      border-spacing: 0;
      }
      /* The table containing a grid cell.
      */


.respondent-dynamic-grid-option-and-button-box-image-ideal
      {
      border-style: solid;
      border-width: medium;
      border-color: #ff9966;
      }
      /* Used in a DIV containing the table containing an ideal grid cell in image.
         This boxes it with a red border. 
      */

.respondent-dynamic-grid-image-brand-reminder-tail-letters
      {
      font-size: 6pt;
      }
      /* Used in a SPAN containing all but the first letter of a 
         brand-name reminder put in a grid cell, e.g. the "onda"
         of "Honda". 
         This makes the letters very small, but hopefully just
         large enough to read as a reminder.
      */

.respondent-dynamic-grid-image-extreme-names
      {
      background: #CCFF99;
      }
      /* Holds the names of the first and last
         attributes in a dynamic image grid.
      */


.respondent-brand-values-cell-light
      {
      background: #FFFFCC;
      }
      /* Alternate rows of a brand values question, to help
         guide the user's eye. Also used for concept test,
         image concept test, and repeat questions.
      */


/* Dynamic grid cells when the researcher creates concepts. */

.concept-creation-dynamic-grid-normal
      {
      background: silver;
      }
      /* A grid for concept creation. */

.concept-creation-dynamic-grid-middle-column
      {
      background: #a0a0c0;
      }
      /* The dark stripe down the "same" column of
         a concept-creation grid. 
      */

.concept-creation-dynamic-grid-clicked
      {
      background: lightblue;
      }
      /* A cell that's been clicked and changed colour
         via JavaScript.
      */


/* Grid summary cells. */

.grid-summary-normal
      {
      background: white;
      }
      /* See grid_summary info page. */

.grid-summary-cell-light
      {
      background: #FFFFCC;
      }
      /* Alternate columns of a grid summary, to help
         guide the user's eye.
      */

.grid-summary-cell-to-right-of-boundary
      {
      background: #66ff99;
      }
      /* Pale green. */

.grid-summary-cell-to-left-of-boundary
      {
      background: #ffccff;
      }
      /* Pink. */

.grid-summary-cell-when-boundary-but-no-option
      {
      background: #cccccc;
      }
      /* Grey. */

.grid-summary-cell-changed
      {
      background: lightblue;
      }
      /* Light blue. */


/* Submit buttons. */

.submit-button  
      {
      font-family: arial, helvetica, sans-serif;
      font-size: 10pt;
      font-weight: bold;
      text-align: left;
      }	


/* Questionnaire preview. */

.preview
      {
      color: blue; 
      }


/* Failure and success messages. */

.error  
      {
      font-family: arial, helvetica, sans-serif;
      font-size: 12pt;
      color: red;
      }	

.success  
      {
      font-family: arial, helvetica, sans-serif;
      font-size: 12pt;
      color: green;
      }	


/* Wrapping text on Value Game menus. */

select.value-game-menu-wrap
      {
      width: 150px; 
      overflow: hidden; 
      white-space: pre; 
      text-overflow: ellipsis;
      -webkit-appearance: none;
      }
      /* These are from the final answer on
         http://stackoverflow.com/questions/18578388/html-dropdown-select-with-text-wrap-and-border-after-every-value-option .
      */

option.value-game-menu-wrap
      {
      border: solid 1px #DDDDDD; 
      }