/*************************/
/* web font declarations */
/*************************/

@font-face {
    font-family: 'SFFedoraRegular';
    src: url('fonts/sf_fedora-webfont.eot');
    src: url('fonts/sf_fedora-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/sf_fedora-webfont.woff') format('woff'),
         url('fonts/sf_fedora-webfont.ttf') format('truetype'),
         url('fonts/sf_fedora-webfont.svg#SFFedoraRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'SFFedoraTitlesRegular';
    src: url('fonts/sf_fedora_titles-webfont.eot');
    src: url('fonts/sf_fedora_titles-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/sf_fedora_titles-webfont.woff') format('woff'),
         url('fonts/sf_fedora_titles-webfont.ttf') format('truetype'),
         url('fonts/sf_fedora_titles-webfont.svg#SFFedoraTitlesRegular') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'SFFedoraTitlesItalic';
    src: url('fonts/sf_fedora_titles_italic-webfont.eot');
    src: url('fonts/sf_fedora_titles_italic-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/sf_fedora_titles_italic-webfont.woff') format('woff'),
         url('fonts/sf_fedora_titles_italic-webfont.ttf') format('truetype'),
         url('fonts/sf_fedora_titles_italic-webfont.svg#SFFedoraTitlesItalic') format('svg');
    font-weight: normal;
    font-style: normal;
}

/*******************************/
/* COMMON COLORS

 #1F4367 = darkblue
 #FF7A1C = orange
 #ff2d1c = red
 #FFFF40 = yellow
 #FCF9C0 = pale yellow

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

/*******************************/
/* global document body styles */
/*******************************/

body {
  padding: 0;
   margin: 0;
  background: #FCF9C0;
}

.watermark { position: absolute; opacity: 0.4; }

/**************************/
/* unique id-based styles */
/**************************/

#snakes     { margin: 3em auto; position: relative; border: 2px solid #333; user-select: none; }
#canvas     { position: absolute; width: 100%; height: 100%; background-color: #F9F281; -webkit-transform: translateZ(0); }
#overlay    { position: absolute; width: 100%; height: 100%; background-color: rgba(6,46,87,0.3); }
#loading    { position: absolute; width: 100%; height: 100%; text-align: center; margin-top: 5em; color: #1F4367; opacity: 0.5; font-size: 2em; }
#menu       { position: absolute; width: 100%; }
#quitmenu   { position: absolute; width: 100%; }
#highscores { position: absolute; width: 100%; }
#credits    { position: absolute; width: 100%; }
#logo       { position: absolute; top: 1em; }
#stats      { position: absolute; right: -90px; bottom: 0; }
#help       { position: absolute; width: 100%; bottom: -1.5em; font-style: italic; }

#sound     { width: 232px; height: 32px; background: url(images/mute.png); display: inline-block; cursor: pointer; position: absolute; left: 10px; }
#sound.on  { background-position:   0   0; }
#sound.off { background-position: -32px 0; }

#score                 { width: 100%; position: absolute; top: -1.2em; font-family: SFFedoraTitlesRegular, Arial; font-size: 2em; color: #1F4367; }
#score .value          { display: inline-block; width: 5em; text-align: left; }
#score .high           { display: block; width: 9em; text-align: center; margin: 0px auto; opacity: 0.4; }
#score .current        { position: absolute; right: 0px; }
#score .current .value { color: #FF2D1C; }

#snakes.highscore #score .high { opacity: 1.0; }

#credits ul             { padding: 0; font-size: 0.5em; text-shadow: none; list-style: none; margin-top: -1em; }
#credits ul li          { color: #1F4367; }
#credits ul li .key     { display: inline-block; width: 10em; text-align: right; }
#credits ul li .value   { display: inline-block; width: 10em; text-align: left;  }
#credits ul li a        { color: #FCF9C0; text-decoration: none; }
#credits ul li a:hover  { text-decoration: underline; }
#credits ul li.author   { font-family: SFFedoraRegular, Arial; font-size: 1.25em; margin-bottom: 0.5em; }
#credits ul li.author a { color: #FFFF40; text-shadow: 0 0 1em #FF7A1C; }


#highscores h1                       { font-size: 1em; color: #FFFF40; text-shadow: 0 0 0.5em #FF7A1C;  margin-top: -0.5em; }
#highscores ul                       { padding: 0; font-size: 0.5em; text-shadow: none; list-style: none; }
#highscores ul li                    { }
#highscores ul li         span.score { display: inline-block; width: 10em; color: #FFFF40;  text-align: right; margin-right: 0.25em; text-shadow: 0 0 0.5em #FF7A1C; }
#highscores ul li         span.name  { display: inline-block; width: 10em; color: #1F4367; text-align: left;  margin-left:  0.25em; text-transform: uppercase;  }
#highscores ul li.current            { }
#highscores ul li.current span.score { }
#highscores ul li.current span.name  { color: #1F4367; text-shadow: 0 0 0.5em #1F4367; }
#highscores ul li.editing            { border: 2px solid black; background: rgba(255,255,255,0.5); border-left: 0px; border-right: 0px; }
#highscores ul li.editing span.score { color: #FF2D1C; text-shadow: none; }
#highscores ul li.editing span.name  { color: #FF2D1C; }
#highscores span.reset               { display: inline-block; margin-top: 1em; margin-left: 10em; cursor: pointer; font-family: SFFedoraTitlesItalic; text-decoration: underline; }
#highscores span.reset:hover         { color: #FF2D1C; }
#highscores input                    { background: transparent; color: #FF2D1C; font-family: SFFedoraTitlesRegular, Arial; border: 0; padding: 0; margin: 0; text-transform: uppercase; width: 12em; }
#highscores input:focus              { outline: none; }

/***************/
/* menu styles */
/***************/

.menu {
  margin-top: 2.6em;
  font-family: SFFedoraTitlesRegular, Arial;
  font-size: 4em;
  text-align: center;
  text-shadow: -1px 1px 1px black;
}
.menu .item                 { color: #1F4367; text-decoration: none; outline: none; }
.menu .item.selected        { color: #FCF9C0; text-shadow: 0 0 0.5em #FCF9C0; }

.menu .item          .choice { width: 4em; display: inline-block; }
.menu .item          .prev   { width: 1em; display: none; text-align: right; }
.menu .item          .next   { width: 1em; display: none; text-align: left;  }
.menu .item.selected .prev   {             display: inline-block; color: #F8F38C; }
.menu .item.selected .next   {             display: inline-block; color: #F8F38C; }

#snakes.state_is_quit .menu .item.selected:before { content: '>'; }
#snakes.state_is_quit .menu .item.selected:after  { content: '<'; }

/********************************/
/* re-usable class-based styles */
/********************************/

.unsupported {
            border: 1px solid #FFFF40;
             color: black;
  background-color: #FFFFAD;
           padding: 2em;
            margin: 5em;
           display: inline-block;
}

/*****************************/
/* @media query based layout */
/*****************************/


@media screen and (min-width: 0px) { /* 48x36 x 15px chunks */
  #snakes     { width: 720px; height: 540px; font-size: 10pt; }
  #logo       { width: 300px; height: 150px; }

  .watermark.top   { top:    -77px; width: 225px; height:  75px; background: url('images/firesnake/540.top.png');   }
  .watermark.left  { left:  -227px; width: 225px; height: 540px; background: url('images/firesnake/540.left.png');  }
  .watermark.right { right: -227px; width: 225px; height: 540px; background: url('images/firesnake/540.right.png'); }
}