#sample_questions_data { display: none; }
/* Reset CSS */

/*html, body, */

div#DocumentPForm, div#DocumentPForm div, div#DocumentPForm span, 
div#DocumentPForm applet, div#DocumentPForm object, div#DocumentPForm iframe,
div#DocumentPForm h1, div#DocumentPForm h2, div#DocumentPForm h3, 
div#DocumentPForm h4, div#DocumentPForm h5, div#DocumentPForm h6, 
div#DocumentPForm p, div#DocumentPForm blockquote, div#DocumentPForm pre,
div#DocumentPForm a, div#DocumentPForm abbr, div#DocumentPForm acronym, 
div#DocumentPForm address, div#DocumentPForm big, div#DocumentPForm cite, 
div#DocumentPForm code, div#DocumentPForm del, div#DocumentPForm dfn, 
div#DocumentPForm em, div#DocumentPForm font, div#DocumentPForm img, 
div#DocumentPForm ins, div#DocumentPForm kbd, div#DocumentPForm q, 
div#DocumentPForm s, div#DocumentPForm samp, div#DocumentPForm small, 
div#DocumentPForm strike, div#DocumentPForm strong, div#DocumentPForm sub, 
div#DocumentPForm sup, div#DocumentPForm tt, div#DocumentPForm var,
div#DocumentPForm dl, div#DocumentPForm dt, div#DocumentPForm dd, 
div#DocumentPForm ol, div#DocumentPForm ul, div#DocumentPForm li,
div#DocumentPForm fieldset, div#DocumentPForm form, div#DocumentPForm label, 
div#DocumentPForm legend, div#DocumentPForm table, div#DocumentPForm caption, 
div#DocumentPForm tbody, div#DocumentPForm tfoot, div#DocumentPForm thead, 
div#DocumentPForm tr, div#DocumentPForm th, div#DocumentPForm td {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-weight: inherit;
    font-style: inherit;
    font-size: 100%;
    font-family: inherit;
    vertical-align: baseline;
}
/* remember to define focus styles! */
div#DocumentPForm :focus {
    outline: 0;
}

/*
body {
    line-height: 1;
    color: black;
    background: white;
}*/

div#DocumentPForm ol, 
div#DocumentPForm ul {
    list-style: none;
}
/* tables still need 'cellspacing="0"' in the markup */
div#DocumentPForm table {
    border-collapse: separate;
    border-spacing: 0;
}
div#DocumentPForm caption, 
div#DocumentPForm th, 
div#DocumentPForm td {
    text-align: left;
    font-weight: normal;
}
div#DocumentPForm blockquote:before, 
div#DocumentPForm blockquote:after,
div#DocumentPForm q:before, 
div#DocumentPForm q:after {
    content: "";
}
div#DocumentPForm blockquote, 
div#DocumentPForm q {
    quotes: "" "";
}
/*
html,body{
    width:100%;
    height:100%;
}
*/
div#DocumentPForm input{
    font-family: inherit;
}

/*
body {
    font-family: arial, verdana;
    font-size: 12px;
}
*/
div#DocumentPForm h1 {
    font-weight: bold;
    font-style: italic;
    font-size: 14px;
    color: #1F371F;
}

div#DocumentPForm ol {
    margin-top: 33px;
    font-weight: bold;
}

div#DocumentPForm li {
    margin-top: 10px;
}

div#DocumentPForm ol li {
    color: #8BB148;
}

div#DocumentPForm em {
    position: relative;
    display: block;
    border: solid #FFF 2px;
    color: #FFF;
    width: 18px;
    height: 16px;
    margin: 0 auto;
    padding: 2px;
}

div#DocumentPForm iframe {
    overflow: hidden;
}

/*** common stimulus ***/
/*
body
{
    font-family: Arial;
    font-size:   10pt;
    line-height: 12.5pt;
}
*/
div#DocumentPForm {
    margin-left: 2px;
}

div#DocumentPForm .floater {
    float: left;
}

div#DocumentPForm p {
    padding-bottom: 6px;
}

/**
 * this is the Stimulus Header for displaying the unit's title,
 * we should not use h2 tag anywhere else.
 */
div#DocumentPForm h2
{
    position:    relative;
    color:       #CC3300;
    font-size:   20pt;
    font-family: Arial;
    font-weight: bold;
    padding:     4px 0px;
    top:         0px;
    margin-bottom: 12px;
    text-transform: uppercase;
}

/**
 * StimulusTop, StimulusContent, StimulusBottom
 * are controlling the border of the stimulus area.
 */
div#DocumentPForm #StimulusTop
{
    width:       974px;
    height:      22px;
    /*background:  url(http://www.oecd.org/media/oecdorg/satellitesites/pisa/images/stimulus_top.png) no-repeat;*/
}

div#DocumentPForm #StimulusContent
{
  position: relative;
    width:       924px;
    /*padding:     0px 25px;*/
    /*background:  url(http://www.oecd.org/media/oecdorg/satellitesites/pisa/images/stimulus_middle.png);*/
}

div#DocumentPForm #StimulusBottom
{
    width:       974px;
    height:      19px;
    /*background:  url(http://www.oecd.org/media/oecdorg/satellitesites/pisa/images/stimulus_bottom.png) no-repeat;*/
}

/**
 * some common things within our PISA2012 for all units' stimulus start from here.
 */
div#DocumentPForm p {
    max-width: 900px;
}

/**
 * when ever we want to turn the text into red in the stimulus, we can use this class!
 */
div#DocumentPForm .redText {
    color: #d71818;
}

div#DocumentPForm .MediaBorder {
    border: solid 2px #CCCCCC;
    -moz-border-radius: 12px;
}

div#DocumentPForm .spacer {
    width: 10px;
    height: 10px;
}

/*** common item ***/
/*
body
{
    font-family:  Arial;
    font-size:    9pt;
    font-weight:  normal;
    line-height:  11.5pt;
}
*/
/**
 * h4, ItemUnitTitle, ItemQuestionLabel, ItemCode
 * are controlling the style for the header within each item.
 * for example:
      <h4 id="ItemQuestionHead">
        <span id="ItemUnitTitle">FIT THE CURVE</span>
        <span id="ItemQuestionLabel">Question <em class="item_order">1</em></span>
        <span id="ItemCode">CM005Q01</span>
      </h4>
 *
 * note: we should not use h4 anywhere else.
 **/
div#DocumentPForm h4
{
    font-family: Arial;
    font-size:   10pt;
    font-weight: bold;
    padding:     0px 0px 6px 0px;
    color:       #CC3300;
}

div#DocumentPForm #ItemUnitTitle {
    text-transform: uppercase;
}

div#DocumentPForm #ItemQuestionLabel {
    text-transform: capitalize;
}

div#DocumentPForm #ItemCode {
    font-size:   0.9em;
    font-weight: normal;
    font-style:  italic;
    color:       #999999;
    padding:     0px 5px;
}

/**
 * ItemContent, and ItemBottom
 * are contorl the border of each item.
 */
div#DocumentPForm #ItemContent {
    width:       909px;
    /*background:  url(http://www.oecd.org/media/oecdorg/satellitesites/pisa/images/item_middle.png);*/
    padding:     5px 20px 8px 0px;
}

div#DocumentPForm #ItemBottom {
    width:       974px;
    height:      8px;
    /*background:  url(http://www.oecd.org/media/oecdorg/satellitesites/pisa/images/item_bottom.png) no-repeat;*/
}


/**
 * some common things within our PISA2012 for all units' item start from here.
 */

div#DocumentPForm #ItemQuestionText
{
    margin-bottom: 10px;
}

div#DocumentPForm p {
    max-width: 880px;
    padding-bottom: 5.35px;
    line-height: 11.5pt;
}

div#DocumentPForm .resultsButton {
  background-color:#3C70CE;
  cursor: pointer;
  
  border-radius: 10px;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  
  text-indent:0;
  border:1px solid #3C70CE;
  display:inline-block;
  color:#ffffff;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size:16px;
  font-weight:bold;
  font-style:normal;
  height:33px;
  line-height:33px;
  width:136px;
  text-decoration:none;
  text-align:center;
}

.resultsPopup {
 display: none;
 position: absolute;
 z-index: 500;
 /*margin-left: 260px;*/
 margin: auto;
 padding: 46px 50px 20px 50px;
 /*float: right;*/
 top: 50px;
 left: 0;
 right: 0;
 width: 380px;
 background-color: #A1BD30;
 color: #FFF;
 clear: right;
}

.resultsDataHeading {
 line-height: 1;
 font-size: 16px;
 position: relative;
 font-weight: bold;
 width: 235px;
 margin-bottom: 15px;
}

.resultsDataSet {
 font-size: 14px;
 clear: both;
 width: 300px;
 position: relative;
 height: 600px;
 overflow: auto;
 max-width: 100%;
}

#resultsCloseButton{
  text-align: center; 
  width: 300px; 
  margin-top: 20px;
}

#endPopup .container,
#answer .container {
  position: relative;
  width: 730px;
  height: 300px;
  overflow: auto;
}