/*The thing to keep in mind here is that the width of the page is just one
number, but the width of the wrapper is its width and then its padding.
thus, ten pixels are subtracted on each side */

                            h1,.content>a {font-size:195%;} .scale{font-size:060%;} .front-wrapper { width:312px; } .navigation{ width:306px; height: 280px; } .big-tile{ width:306px; height: 337px; } .big-tile .view{ top: 287px; width:286px; }
@media (min-width: 488px) { h1,.content>a {font-size:250%;} .scale{font-size:080%;} .front-wrapper { width:468px; } .navigation{ width:462px; height: 280px; } .big-tile{ width:462px; height: 386px; } .big-tile .view{ top: 334px; width:442px;}}
@media (min-width: 644px) { h1,.content>a {font-size:300%;} .scale{font-size:100%;} .front-wrapper { width:624px; } .navigation{ width:306px; height: 386px; } .big-tile{ width:306px; height: 386px; } .big-tile .view{ top: 334px; width:286px;}}
@media (min-width: 800px) { h1,.content>a {font-size:300%;} .scale{font-size:100%;} .front-wrapper { width:780px; } .navigation{ width:306px; height: 386px; } .big-tile{ width:462px; height: 386px; } .big-tile .view{ top: 334px; width:442px;}}
/*
@media (min-width: 956px) { .front-wrapper { width:936px; } }
@media (min-width: 1192px) { .front-wrapper { width:1092px; } }
@media (min-width: 1268px) { .front-wrapper { width:1248px; } }
@media (min-width: 1424px) { .front-wrapper { width:1404px; } }
@media (min-width: 1580px) { .front-wrapper { width:1560px; } }
@media (min-width: 1736px) { .front-wrapper { width:1716px; } }
@media (min-width: 1892px) { .front-wrapper { width:1872px; } }
*/