snakes.css

/*! normalize.css 2011-07-12T10:51 UTC · http://github.com/necolas/normalize.css */

/* =============================================================================
   HTML5 element display
   ========================================================================== */

/*
 * Corrects block display not defined in IE6/7/8/9 & FF3
 */

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
nav,
section {
    display: block;
}

/*
 * Corrects inline-block display not defined in IE6/7/8/9 & FF3
 * Known limitation: IE6 will not apply style for 'audio[controls]'
 */

audio[controls],
canvas,
video {
    display: inline-block;
    *display: inline;
    *zoom: 1;
}


/* =============================================================================
   Base
   ========================================================================== */

/*
 * 1. Corrects text resizing oddly in IE6/7 when body font-size is set using em units
 *    http://clagnut.com/blog/348/#c790
 * 2. Keeps page centred in all browsers regardless of content height
 * 3. Removes Android and iOS tap highlight color to prevent entire container being highlighted
 *    www.yuiblog.com/blog/2010/10/01/quick-tip-customizing-the-mobile-safari-tap-highlight-color/
 * 4. Prevents iOS text size adjust after orientation change, without disabling user zoom
 *    www.456bereastreet.com/archive/201012/controlling_text_size_in_safari_for_ios_without_disabling_user_zoom/
 */

html {
    font-size: 100%; /* 1 */
    overflow-y: scroll; /* 2 */
    -webkit-tap-highlight-color: rgba(0,0,0,0); /* 3 */
    -webkit-text-size-adjust: 100%; /* 4 */
    -ms-text-size-adjust: 100%; /* 4 */
}

/*
 * Addresses margins handled incorrectly in IE6/7
 */

body {
    margin: 0;
}

/* 
 * Addresses font-family inconsistency between 'textarea' and other form elements.
 */

body,
button,
input,
select,
textarea {
    font-family: sans-serif;
}


/* =============================================================================
   Links
   ========================================================================== */

a {
    color: #00e;
}

a:visited {
    color: #551a8b;
}

/*
 * Addresses outline displayed oddly in Chrome
 */

a:focus {
    outline: thin dotted;
}

/*
 * Improves readability when focused and also mouse hovered in all browsers
 * people.opera.com/patrickl/experiments/keyboard/test
 */

a:hover,
a:active {
    outline: 0;
}


/* =============================================================================
   Typography
   ========================================================================== */

/*
 * Addresses styling not present in IE7/8/9, S5, Chrome
 */

abbr[title] {
    border-bottom: 1px dotted;
}

/*
 * Addresses style set to 'bolder' in FF3/4, S4/5, Chrome
*/

b, 
strong { 
    font-weight: bold; 
}

blockquote {
    margin: 1em 40px;
}

/*
 * Addresses styling not present in S5, Chrome
 */

dfn {
    font-style: italic;
}

/*
 * Addresses styling not present in IE6/7/8/9
 */

mark {
    background: #ff0;
    color: #000;
}

/*
 * Corrects font family set oddly in IE6, S5, Chrome
 * en.wikipedia.org/wiki/User:Davidgothberg/Test59
 */

pre,
code,
kbd,
samp {
    font-family: monospace, monospace;
    _font-family: 'courier new', monospace;
    font-size: 1em;
}

/*
 * Improves readability of pre-formatted text in all browsers
 */

pre {
    white-space: pre;
    white-space: pre-wrap;
    word-wrap: break-word;
}

/*
 * 1. Addresses CSS quotes not supported in IE6/7
 * 2. Addresses quote property not supported in S4
 */

/* 1 */

q {
    quotes: none;
}

/* 2 */

q:before,
q:after {
    content: '';
    content: none;
}

small {
    font-size: 75%;
}

/*
 * Prevents sub and sup affecting line-height in all browsers
 * gist.github.com/413930
 */

sub,
sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
}

sup {
    top: -0.5em;
}

sub {
    bottom: -0.25em;
}


/* =============================================================================
   Lists
   ========================================================================== */

ul,
ol {
    margin: 1em 0;
    padding: 0 0 0 40px;
}

dd {
    margin: 0 0 0 40px;
}

nav ul,
nav ol {
    list-style: none;
}


/* =============================================================================
   Embedded content
   ========================================================================== */

/*
 * 1. Removes border when inside 'a' element in IE6/7/8/9
 * 2. Improves image quality when scaled in IE7
 *    code.flickr.com/blog/2008/11/12/on-ui-quality-the-little-things-client-side-image-resizing/
 */

img {
    border: 0; /* 1 */
    -ms-interpolation-mode: bicubic; /* 2 */
}

/*
 * Corrects overflow displayed oddly in IE9 
 */

svg:not(:root) {
    overflow: hidden;
}


/* =============================================================================
   Figures
   ========================================================================== */

/*
 * Addresses margin not present in IE6/7/8/9, S5, O11
 */

figure {
    margin: 0;
}


/* =============================================================================
   Forms
   ========================================================================== */

/*
 * Corrects margin displayed oddly in IE6/7
 */

form {
    margin: 0;
}

/*
 * Define consistent margin and padding
 */

fieldset {
    margin: 0 2px;
    padding: 0.35em 0.625em 0.75em;
}

/*
 * 1. Corrects color not being inherited in IE6/7/8/9
 * 2. Corrects alignment displayed oddly in IE6/7
 */

legend {
    border: 0; /* 1 */
    *margin-left: -7px; /* 2 */
}

/*
 * 1. Corrects font size not being inherited in all browsers
 * 2. Addresses margins set differently in IE6/7, F3/4, S5, Chrome
 * 3. Improves appearance and consistency in all browsers
 */

button,
input,
select,
textarea {
    font-size: 100%; /* 1 */
    margin: 0; /* 2 */
    vertical-align: baseline; /* 3 */
    *vertical-align: middle; /* 3 */
}

/*
 * 1. Addresses FF3/4 setting line-height using !important in the UA stylesheet
 * 2. Corrects inner spacing displayed oddly in IE6/7
 */

button,
input {
    line-height: normal; /* 1 */
    *overflow: visible;  /* 2 */
}

/*
 * Corrects overlap and whitespace issue for buttons and inputs in IE6/7
 * Known issue: reintroduces inner spacing
 */

table button,
table input {
    *overflow: auto;
}

/*
 * 1. Improves usability and consistency of cursor style between image-type 'input' and others
 * 2. Corrects inability to style clickable 'input' types in iOS
 */

button,
html input[type="button"], 
input[type="reset"], 
input[type="submit"] {
    cursor: pointer; /* 1 */
    -webkit-appearance: button; /* 2 */
}

/*
 * Addresses box sizing set to content-box in IE8/9
 */

input[type="checkbox"],
input[type="radio"] {
    box-sizing: border-box;
}

/*
 * 1. Addresses appearance set to searchfield in S5, Chrome
 * 2. Addresses box sizing set to border-box in S5, Chrome (include -moz to future-proof)
 */

input[type="search"] {
    -webkit-appearance: textfield; /* 1 */
    -moz-box-sizing: content-box;
    -webkit-box-sizing: content-box; /* 2 */
    box-sizing: content-box;
}

/*
 * Corrects inner padding displayed oddly in S5, Chrome on OSX
 */

input[type="search"]::-webkit-search-decoration {
    -webkit-appearance: none;
}

/*
 * Corrects inner padding and border displayed oddly in FF3/4
 * www.sitepen.com/blog/2008/05/14/the-devils-in-the-details-fixing-dojos-toolbar-buttons/
 */

button::-moz-focus-inner,
input::-moz-focus-inner {
    border: 0;
    padding: 0;
}

/*
 * 1. Removes default vertical scrollbar in IE6/7/8/9
 * 2. Improves readability and alignment in all browsers
 */

textarea {
    overflow: auto; /* 1 */
    vertical-align: top; /* 2 */
}


/* =============================================================================
   Tables
   ========================================================================== */

/* 
 * Remove most spacing between table cells
 */

table {
    border-collapse: collapse;
    border-spacing: 0;
}
/*************************/
/* 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: 32px; height: 32px; background: url(images/mute.png); display: inline-block; cursor: pointer; position: absolute; left: -40px; }
#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 10px chunks */
  #snakes     { width: 480px; height: 360px; font-size: 7pt; }
  #logo       { width: 200px; height: 100px; }

  .watermark.top   { top:    -52px; width: 150px; height:  50px; background: url('images/firesnake/360.top.png');   }
  .watermark.left  { left:  -152px; width: 150px; height: 360px; background: url('images/firesnake/360.left.png');  }
  .watermark.right { right: -152px; width: 150px; height: 360px; background: url('images/firesnake/360.right.png'); }
}

@media screen and (min-width: 1200px) { /* 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'); }
}

@media screen and (min-width: 1600px) { /* 48x36 20px chunks */
  #snakes     { width: 960px; height: 720px; font-size: 12pt; }
  #logo       { width: 400px; height: 200px; }

  .watermark.top   { top:   -102px; width: 300px; height: 100px; background: url('images/firesnake/720.top.png');   }
  .watermark.left  { left:  -302px; width: 300px; height: 720px; background: url('images/firesnake/720.left.png');  }
  .watermark.right { right: -302px; width: 300px; height: 720px; background: url('images/firesnake/720.right.png'); }
}