#logo { content:url("./general_icons/LOGO no text.png");
        background-image:url("./general_icons/LOGO no text.png");
        width:8%; height:auto; background-size:100%;}

/****************************************************/

/* Set up a class for the overall splash screen div to be the same size as the
splash background image */
/* Note that this needs to have the property of relative position so that
everything inside it picks up their positions from it **/
.splash_div { width:800px; height: 500px; z-index: 0; position: relative; }

/** Use both "content" AND "background-image" because IE doesn't understand "content", even inside
:after sub-class, but in general want to use the content property rather than the background-image
property -- if we use just background-image then in Firefox it appears with a fine border around it **/
#splash_back { content:url("./splash_border/splash_back.png"); background-image:url("./splash_border/splash_back.png");
              position:relative; z-index: 1; width:800px; height:500px; }
/** Additional code because the content:url() property doesn't work in Firefox
 unless it's within an :after sub-class **/

 /** TODO!!! try using a straight .splash_back entry instead of the #splash_back
  one above i.e. try just using a class instead of an individual CSS object ID **/

.splash_back:after { content:url("./splash_border/splash_back.png");
              position:relative; z-index: 1; width:800px; height:500px; }

/* don't use background image for macaw because in Firefox it ends up with the
small macaw image having the top-left portion of a larger version of the macaw
behind it */
#macaw_in_splash  { content:url("./splash_border/Scarlet_macaw.png");
              width: 125px; height: 205px;
              position:absolute; top:57%; left:0; z-index: 2; transform: translate(0%, -50%);}
/** Additional code because the content:url() property doesn't work in Firefox
 unless it's within an :after sub-class **/
.macaw_in_splash:after { content:url("./splash_border/Scarlet_macaw.png");
              width: 125px; height: 205px;
              position:absolute; top:57%; left:0; z-index: 2; transform: translate(0%, -50%);}

#leaves_in_splash  { content:url("./splash_border/Top_leaves.png");
              width: 144px; height: 147px;
              position:absolute; top:0; left:73%; z-index: 2; transform: translate(-50%, 0%);}
/** Additional code because the content:url() property doesn't work in Firefox
 unless it's within an :after sub-class **/
.leaves_in_splash:after { content:url("./splash_border/Top_leaves.png");
              width: 144px; height: 147px;
              position:absolute; top:0; left:73%; z-index: 2; transform: translate(-50%, 0%);}

#front_grass_in_splash  { content:url("./splash_border/light grass only.png");
              width: 800px; height: 63px;
              position:absolute; bottom:0px; left:0%; z-index: 3; }
/** Additional code because the content:url() property doesn't work in Firefox
 unless it's within an :after sub-class **/
.front_grass_in_splash:after { content:url("./splash_border/light grass only.png");
              width: 800px; height: 63px;
              position:absolute; bottom:0px; left:0%; z-index: 3; }

/** Want logo to be in the middle of the splash image, so don't want it to have
z-index 3 because that would instead position it relative to the macaw and leaves **/
#logo_in_splash  { content:url("./general_icons/LOGO.png"); background-image:url("./general_icons/LOGO.png");
              width: 213px; height: 213px;
              position:absolute; left:50%; top: 25%; z-index: 2; transform: translate(-50%, -50%);}
/** Additional code because the content:url() property doesn't work in Firefox
 unless it's within an :after sub-class **/
.logo_in_splash:after { content:url("./general_icons/LOGO.png");
              width: 213px; height: 213px;
              position:absolute; left:50%; top: 25%; z-index: 2; transform: translate(-50%, -50%);}

.base_images { width: 1200px; height: 134px; position: relative; bottom: 0px;
               background-image: url("./splash_border/front_grass_shrunk_match_back_size.png"),
               url("./splash_border/back_grass_shrunk.png"); background-repeat: repeat-x; }

/* don't use background image for macaw because in Firefox it ends up with the
small macaw image having the top-left portion of a larger version of the macaw
behind it */
#macaw { content:url("./splash_border/Scarlet_macaw.png");
          width: 94px; height: 154px;}
/** Additional code because the content:url() property doesn't work in Firefox
 unless it's within an :after sub-class **/
.macaw:after { content:url("./splash_border/Scarlet_macaw.png");
               width: 94px; height: 154px;}

/* don't use background image for macaw because in Firefox it ends up with the
small macaw image having the top-left portion of a larger version of the macaw
behind it */
#macaw_backwards{ content:url("./splash_border/Scarlet_macaw.png");
          width: 141px; height: 231px; transform: scaleX(-1);}
/** Additional code because the content:url() property doesn't work in Firefox
 unless it's within an :after sub-class **/
.macaw_backwards:after { content:url("./splash_border/Scarlet_macaw.png");
               width: 141px; height: 231px; transform: scaleX(-1);}

#leaves { content:url("./splash_border/Top_leaves.png");
              width: 144px; height: 147px;
              position:absolute; top:0; left:50%; z-index: 2; }
/** Additional code because the content:url() property doesn't work in Firefox
 unless it's within an :after sub-class **/
.leaves:after { content:url("./splash_border/Top_leaves.png");
              width: 144px; height: 147px;
              position:absolute; top:0; left:50%; z-index: 2; }

/****************************************************/

#correctAnswerImage {content:url("./general_icons/correct.png");
                     background-image:url("./general_icons/correct.png");
                     width:2%; height:auto; background-size:100%; }
#wrongAnswerImage {content:url("./general_icons/wrong.png");
                   background-image:url("./general_icons/wrong.png");
                   width:2%; height:auto; background-size:100%; }

#correctAnswerText {font-family: "Brush Script MT",cursive; font-weight: bold; color: #7ea530; font-size: 140%;}
#wrongAnswerText {font-family: "Brush Script MT",cursive; font-weight: bold; color: #ff3126; font-size: 140%;}


/****************************************************/

#context_psychology_image { content:url("./context_icons/context_psychology_small.png");
                           background-image:url("./context_icons/context_psychology_small.png");
                           width:15%; height:auto; background-size:100%;}
#context_crops_image { content:url("./context_icons/context_crops_small.png");
                           background-image:url("./context_icons/context_crops_small.png");
                           width:15%; height:auto; background-size:100%;}
#context_survival_image { content:url("./context_icons/context_survival_small.png");
                           background-image:url("./context_icons/context_survival_small.png");
                           width:15%; height:auto; background-size:100%;}
#context_weather_image { content:url("./context_icons/context_weather_small.png");
                           background-image:url("./context_icons/context_weather_small.png");
                           width:15%; height:auto; background-size:100%;}

/****************************************************/

#topic_basic_stats_image { content:url("./topic_icons/topic_interpreting_graphs_small.png");
                           background-image:url("./topic_icons/topic_interpreting_graphs_small.png");
                           width:15%; height:auto; background-size:100%;}
/** Additional code because the content:url() property doesn't work in Firefox
 unless it's within an :after sub-class **/
/**.topic_basic_stats_image:after { content:url("./topic_icons/topic_basic_stats_small.png");
              width:15%; height:auto; background-size:100%;}**/

#topic_probability_image { content:url("./topic_icons/topic_probability_small.png");
                           background-image:url("./topic_icons/topic_probability_small.png");
                           width:15%; height:auto; background-size:100%;}
/** Additional code because the content:url() property doesn't work in Firefox
 unless it's within an :after sub-class **/
/** .topic_probability_image:after { content:url("./topic_icons/topic_probability_small.png");
              width:15%; height:auto; background-size:100%;} **/
#topic_estimates_parameters_image { content:url("./topic_icons/topic_estimates_parameters_small.png");
                                    background-image:url("./topic_icons/topic_estimates_parameters_small.png");
                                    width:15%; height:auto; background-size:100%;}
/** Additional code because the content:url() property doesn't work in Firefox
 unless it's within an :after sub-class **/
/** .topic_estimates_parameters_image:after { content:url("./topic_icons/topic_estimates_parameters_small.png");
              width:15%; height:auto; background-size:100%;} **/

/****************************************************/

/** Use both "content" AND "background-image" because IE doesn't understand "content", even inside
:after sub-class, but in general want to use the content property rather than the background-image
property -- if we use just background-image then in Firefox it appears with a fine border around it **/
#splashScreen { content:url("./splash_border/splash_combined.jpg"); background-image:url("./splash_border/splash_combined.jpg");
              width:1200px; height:750px;}
/** Additional code because the content:url() property doesn't work in Firefox unless it's within an :after sub-class **/
.splash:after { content:url("./splash_border/splash_combined.jpg");
              width:1200px; height:750px; }

              /** Use both "content" AND "background-image" because IE doesn't understand "content", even inside
:after sub-class, but in general want to use the content property rather than the background-image
property -- if we use just background-image then in Firefox it appears with a fine border around it **/
#vuwLogo { content:url("./general_icons/VUW_Logo.png"); background-image:url("./general_icons/VUW_Logo.png");}
/** Additional code because the content:url() property doesn't work in Firefox unless it's within an :after sub-class **/
.vuw_logo:after { content:url("./general_icons/VUW_Logo.png");}