@charset "UTF-8";
/* CSS Document */
/* animcompare.css, CSS document for portfolio site. 
 * Used by animcompare.html. 
 * 2015-06-09  Scott Robert Dawson  
 * 
 */
/* Image URLs are relative to directory in which this CSS file is stored. */


/* Table styles */

thead {
    color: green;
}

tbody {
    color: black;
}

tfoot {
    color: red;
}

table,
th,
td {
    border: 1px solid black;
}

th,
td {
    padding: 5px;
    text-align: center;
    background-color: white;
}

/* Table row 1, multiple JPEGs with script. */

#i0101 {
	/* "Multiple files linked" icon. Background icon 8-(7*72)=496 px over, 28-72=48 px down. */
    width: 144px;
    height: 144px;
    background: url('../images/icons.png') no-repeat -496px -44px;
    
}

#i0102 {
	/* "Multiple still JPEGs" icon. Background icon 8-(3*72)=208 px over, 28-(3*72)=188 px down. */
    width: 144px;
    height: 144px;
    background: url('../images/icons.png') no-repeat -208px -188px;
}

/* Table row 2, multiple PNGs with script. */

#i0201 {
	/* "Multiple files linked" icon. Background icon 8-(7*72)=496 px over, 28-72=48 px down. */
    width: 144px;
    height: 144px;
    background: url('../images/icons.png') no-repeat -496px -48px ;
}

#i0202 {
	/* "Multiple still PNGs" icon. Background icon 8-72=64 px over, 28-(3*72)=188 px down. */
    width: 144px;
    height: 144px;
    background: url('../images/icons.png') no-repeat -64px -188px ;
}

/* Table row 3, multiple GIFs with script. */

#i0301 {
	/* "Multiple files linked" icon. Background icon 8-(7*72)=496 px over, 28-72=48 px down. */
    width: 144px;
    height: 144px;
    background: url('../images/icons.png') no-repeat -496px -48px ;
}

#i0302 {
	/* "Multiple still GIFs" icon. Background icon 8-(5*72)=352 px over, 28-(3*72)=188 px down. */
    width: 144px;
    height: 144px;
    background: url('../images/icons.png') no-repeat -352px -188px ;
}

/* Table row 4, animated GIF */

#i0401 {
	/* "One file linked" icon. Background icon 8-72=64 px over, 28-72=48 px down. */
    width: 144px;
    height: 144px;
    background: url('../images/icons.png') no-repeat -64px -48px ;
}

#i0402 {
	/* "One animated GIF as image" icon. Background icon 8-(5*72)=352 px over, 28-(5*72)=332 px down. */
    width: 144px;
    height: 144px;
    background: url('../images/icons.png') no-repeat -352px -332px ;
}

/* Table row 5, animated PNG */

#i0501 {
	/* "One file linked" icon. Background icon 8-72=64 px over, 28-72=48 px down. */
    width: 144px;
    height: 144px;
    background: url('../images/icons.png') no-repeat -64px -48px ;
}

#i0502 {
	/* "One animated PNG as image" icon. Background icon 8-72=64 px over, 28-(5*72)=332 px down. */
    width: 144px;
    height: 144px;
    background: url('../images/icons.png') no-repeat -64px -332px ;
}

/* Table row 6, HTML Canvas with script animation */

#i0601 {
	/* "Script linked" icon. Background icon 8-(9*72)=640 px over, 28-72=48 px down. */
    width: 144px;
    height: 144px;
    background: url('../images/icons.png') no-repeat -640px -48px ;
}

#i0602 {
	/* "HTML Canvas animated by script" icon. Background icon 8-(3*72)=208 px over, 28-(7*72)=476 px down. */
    width: 144px;
    height: 144px;
    background: url('../images/icons.png') no-repeat -208px -476px ;
}

/* Table row 7, animated SVG linked as image */

#i0701 {
	/* "One file linked" icon. Background icon 8-72=64 px over, 28-72=48 px down. */
    width: 144px;
    height: 144px;
    background: url('../images/icons.png') no-repeat -64px -48px ;
}

#i0702 {
	/* "Animated SVG as image" icon. 8-(7*72)=496 px over, 28-(5*72)=332 px down */
    width: 144px;
    height: 144px;
    background: url('../images/icons.png') no-repeat -496px -332px ;
}

/* Table row 8, embedded SVG changed by linked script */

#i0801 {
	/* "Embedded with script" icon. 8-(7*72)=496 px over, 28-(3*72)=188 px down. */
    width: 144px;
    height: 144px;
    background: url('../images/icons.png') no-repeat -496px -188px ;
}

#i0802 {
	/* "SVG element moving" icon. 8-72=64 px over, 28-(7*72)=476 px down */
    width: 144px;
    height: 144px;
    background: url('../images/icons.png') no-repeat -64px -476px ;
}

/* Table row 9, embedded SVG chenged by linked CSS */

#i0901 {
	/* "Embedded with file" icon. 8-(9*72)=640 px over, 28-(5*72)=476 px down. */
    width: 144px;
    height: 144px;
    background: url('../images/icons.png') no-repeat -640px -332px ;
}

#i0902 {
	/* "SVG element moving" icon. 8-72=(3*64) px over, 28-(5*72)=476 px down */
    width: 144px;
    height: 144px;
    background: url('../images/icons.png') no-repeat -208px -332px ;
}

/* Table row 10, embedded animated SVG */

#i1001 {
	/* "Embedded" icon. 8-(9*72)=640 px over, 28-(3*72)=188 px down. */
    width: 144px;
    height: 144px;
    background: url('../images/icons.png') no-repeat -640px -188px ;
}

#i1002 {
	/* "Animated SVG" icon. 8-(5*72)=352 px over, 28-(7*72)=476 px down */
    width: 144px;
    height: 144px;
    background: url('../images/icons.png') no-repeat -352px -476px ;
}

/* Table row 11, linked video file */

#i1101 {
	/* "Linked" icon. 8-72 px 0ver, 28-72 px down. */
    width: 144px;
    height: 144px;
    background: url('../images/icons.png') no-repeat -64px -48px ;
}

#i1102 {
	/* "Video" icon. 8-(9*72)=640 px over, 28-(7*72)=476 px down */
    width: 144px;
    height: 144px;
    background: url('../images/icons.png') no-repeat -640px -476px ;
}

/* Table row 12, linked Flash animation */

#i1201 {
	/* "Linked" icon. 8-72= px over, 28-72= px down. */
    width: 144px;
    height: 144px;
    background: url('../images/icons.png') no-repeat -64px -48px ;
}

#i1202 {
	/* "Flash" icon. 8-(7*72)=496 px over, 28-(7*72)=476 px down */
    width: 144px;
    height: 144px;
    background: url('../images/icons.png') no-repeat -496px -476px ;
}

/* Table row 13, embedded animated PNG as data URI */

#i1301 {
	/* "Embedded" icon. 8-(13*72)=928 px over, 28-72=48 px down */
    width: 144px;
    height: 144px;
    background: url('../images/icons.png') no-repeat -928px -48px ;
}

#i1302 {
	/* "Embedded animated PNG as data" icon. 8-(11*72)=784 px over, 28-72=48 px down */
    width: 144px;
    height: 144px;
    background: url('../images/icons.png') no-repeat -784px -48px ;
}

/* Table row 14, embedded animated GIF as data URI */

#i1401 {
	/* "Embedded" icon. 8-(13*72)=928 px over, 28-72=48 px down. */
    width: 144px;
    height: 144px;
    background: url('../images/icons.png') no-repeat -928px -48px ;
}

#i1402 {
	/* "Embedded animated GIF as data URI" icon. 8-(11*72)=784 px over, 28-(3*72)=188 px down */
    width: 144px;
    height: 144px;
    background: url('../images/icons.png') no-repeat -784px -188px ;
}

/* Table row 15, embedded animated SVG as data URI */

#i1501 {
	/* "Embedded" icon. 8-(13*72)=928 px over, 28-72=48 px down. */
    width: 144px;
    height: 144px;
    background: url('../images/icons.png') no-repeat -928px -48px ;
}

#i1502 {
	/* "Embedded animated SVG as data URI" icon. 8-(11*72)=784 px over, 28-(5*72)=332 px down */
    width: 144px;
    height: 144px;
    background: url('../images/icons.png') no-repeat -784px -332px ;
}

/* Table row 16, sequence of linked JPEGs, embedded script. */

#i1601 {
	/* "Linked images with embedded script" icon. 8-(13*72)=928 px over, 28-(3*72)=188 px down. */
    width: 144px;
    height: 144px;
    background: url('../images/icons.png') no-repeat -928px -188px ;
}

#i1602 {
	/* "Multiple still JPEGs" icon. Background icon 8-(3*72)=208 px over, 28-(3*72)=188 px down. */
    width: 144px;
    height: 144px;
    background: url('../images/icons.png') no-repeat -208px -188px;
}
/* Table row 17, sequence of linked PNGs, embedded script. */

#i1701 {
	/* "Linked images with embedded script" icon. 8-(13*72)=920 px over, 28-(3*72)=188 px down. */
    width: 144px;
    height: 144px;
    background: url('../images/icons.png') no-repeat -928px -188px ;
}

#i1702 {
	/* "Multiple still PNGs" icon. Background icon 8-72=64 px over, 28-(3*72)=188 px down. */
    width: 144px;
    height: 144px;
    background: url('../images/icons.png') no-repeat -64px -188px ;
}

/* Table row 18, sequence of linked SVGs, embedded script. */

#i1801 {
	/* "Linked images with embedded script" icon. 8-(13*72)=928 px over, 28-(3*72)=188 px down. */
    width: 144px;
    height: 144px;
    background: url('../images/icons.png') no-repeat -928px -188px ;
}

#i1802 {
	/* "Multiple still GIFs" icon. Background icon 8-(5*72)=352 px over, 28-(3*72)=188 px down. */
    width: 144px;
    height: 144px;
    background: url('../images/icons.png') no-repeat -352px -188px ;
}

/* Table row 19, animation on HTML Canvas created by embedded script */

#i1901 {
	/* "HTML Canvas with embedded script" icon. 8-(11*72)=784 px over, 28-(7*72)=472 px down. */
    width: 144px;
    height: 144px;
    background: url('../images/icons.png') no-repeat -784px -472px ;
}

#i1902 {
	/* "HTML Canvas animated by script" icon. Background icon 8-(3*72)=208 px over, 28-(7*72)=476 px down. */
    width: 144px;
    height: 144px;
    background: url('../images/icons.png') no-repeat -208px -476px ;
}

/* Table row 20, embedded SVG changed by an embedded script */

#i2001 {
	/* "Embedded with embedded script" icon. 8-(13*72)=928 px over, 28-(7*72)=476 px down. */
    width: 144px;
    height: 144px;
    background: url('../images/icons.png') no-repeat -928px -476px ;
}

#i2002 {
	/* "SVG element moving" icon. 8-72=64 px over, 28-(7*72)=476 px down */
    width: 144px;
    height: 144px;
    background: url('../images/icons.png') no-repeat -64px -476px ;
}

/* Table row 21, embedded SVG chenged by embedded CSS */

#i2101 {
	/* "Embedded with embedded CSS" icon. 8-(15*72)=1072 px over, 28-(7*72)=476 px down. */
    width: 144px;
    height: 144px;
    background: url('../images/icons.png') no-repeat -1072px -476px ;
}

#i2102 {
	/* "SVG element moving" icon. 8-72=(3*64) px over, 28-(5*72)=476 px down */
    width: 144px;
    height: 144px;
    background: url('../images/icons.png') no-repeat -208px -476px ;
}