.grayText
{
    color: #606060;
    font-weight:normal;
}

.boldText
{
    color: #000000;
    font-weight:bold;
}

.normalText
{
    color: #606060;
    font-size:1.5em;
    font-weight:normal;
}


.contributorsHead
{
    padding-right:0.2em;
}

div#sentence 
{
    position: absolute;
    font-weight: bold;
}

div#contributors 
{
    font-weight: normal;
    position: absolute; 
}

div#featuredText
{
    position:absolute;
    padding:0px;
    margin: 0px;
}

div#shaderOfTheWeekText
{
    position:absolute;
    padding:0px;
    margin: 0px;
}

#shaderOfTheWeek 
{ 
    position: absolute;
}


#shaderPreview0
{
    position: absolute;
}
#shaderPreview1
{
    position: absolute;
}
#shaderPreview2
{
    position: absolute;
}
#shaderPreview3
{
    position: absolute;
}


/* ----------------------- media resolutions ------------------------ */

@media screen and (max-width: 799px) 
{
    div#sentence            { left: 340px; top:  32px; width: 260px; font-size: 22px; }
    div#shaderOfTheWeekText { left:   0px; top:   8px; }
    div#featuredText        { left:   0px; top: 228px; }
    div#contributors        { left: 320px; top: 134px; width: 300px; font-size: 8px; }
    #shaderOfTheWeek        { left:   0px; top:  24px; width: 300px; height: 180px; }
    .contributorsHead       { font-size: 14px; }
    a.shader                { font-size: 12px; }

    #shaderPreview0{ left:   0px; top: 244px; width: 140px; height: 78px; }
    #shaderPreview1{ left: 160px; top: 244px; width: 140px; height: 78px; }
    #shaderPreview2{ left: 320px; top: 244px; width: 140px; height: 78px; }
    #shaderPreview3{ left: 480px; top: 244px; width: 140px; height: 78px; }
}


@media screen and (min-width: 800px) and (max-width:1023px) 
{
    div#sentence            { left: 440px; top:  70px; width: 300px; font-size: 28px; }
    div#shaderOfTheWeekText { left:   0px; top:  10px; }
    div#featuredText        { left:   0px; top: 330px; }
    div#contributors        { left: 400px; top: 240px; width: 380px; font-size: 10px; }
    #shaderOfTheWeek        { left:   0px; top:  30px; width: 380px; height: 260px; }
    .contributorsHead       { font-size: 18px; }
    a.shader                { font-size: 12px; }

    #shaderPreview0 { left:   0px; top: 350px; width: 180px; height: 100px; }
    #shaderPreview1 { left: 200px; top: 350px; width: 180px; height: 100px; }
    #shaderPreview2 { left: 400px; top: 350px; width: 180px; height: 100px; }
    #shaderPreview3 { left: 600px; top: 350px; width: 180px; height: 100px; }
}

@media screen and (min-width:1024px) and (max-width:1279px) 
{
    div#sentence            { left: 565px; top:  60px; width: 380px; font-size: 34px; }
    div#shaderOfTheWeekText { left:   0px; top:  10px; }
    div#featuredText        { left:   0px; top: 400px; }
    div#contributors        { left: 510px; top: 286px; width: 490px; font-size: 10px; }
    #shaderOfTheWeek        { left:   0px; top:  30px; width: 480px; height: 320px; }
    .contributorsHead       { font-size: 24px; }
    a.shader                { font-size: 14px; }

    #shaderPreview0         { left:   0px; top: 420px; width: 224px; height: 126px; }
    #shaderPreview1         { left: 255px; top: 420px; width: 224px; height: 126px; }
    #shaderPreview2         { left: 510px; top: 420px; width: 224px; height: 126px; }
    #shaderPreview3         { left: 765px; top: 420px; width: 224px; height: 126px; }
}

@media screen and (min-width:1280px) and (max-width:1439px) 
{
    div#sentence            { left: 720px; top:  60px; width: 420px; font-size: 38px; }
    div#shaderOfTheWeekText { left:   0px; top:  10px; }
    div#featuredText        { left:   0px; top: 380px; }
    div#contributors        { left: 640px; top: 260px; width: 600px; font-size: 10px; }
    #shaderOfTheWeek        { left:   0px; top:  30px; width: 600px; height: 300px; }
    .contributorsHead       { font-size: 24px; }
    a.shader                { font-size: 14px; }

    #shaderPreview0 { left:   0px; top: 400px; width: 280px; height: 158px; }
    #shaderPreview1 { left: 320px; top: 400px; width: 280px; height: 158px; }
    #shaderPreview2 { left: 640px; top: 400px; width: 280px; height: 158px; }
    #shaderPreview3 { left: 960px; top: 400px; width: 280px; height: 158px; }
}

@media screen and (min-width:1440px) and (max-width:1919px) 
{
    div#sentence            { left: 780px; top:  70px; width: 500px; font-size: 44px; }
    div#shaderOfTheWeekText { left:   0px; top:   0px; }
    div#featuredText        { left:   0px; top: 440px; }
    div#contributors        { left: 720px; top: 300px; width: 600px; font-size: 12px; }
    #shaderOfTheWeek        { left:   0px; top:  30px; width: 660px; height: 344px; }
    .contributorsHead       { font-size: 30px; }
    a.shader                { font-size: 16px; }

    #shaderPreview0 { left:    0px; top: 470px; width: 300px; height: 168px; }
    #shaderPreview1 { left:  360px; top: 470px; width: 300px; height: 168px; }
    #shaderPreview2 { left:  720px; top: 470px; width: 300px; height: 168px; }
    #shaderPreview3 { left: 1080px; top: 470px; width: 300px; height: 168px; }
}

@media screen and (min-width:1920px) and (max-width:2559px) 
{
    div#sentence            { left:1000px; top:  72px; width: 700px; font-size: 60px; }
    div#shaderOfTheWeekText { left:   0px; top:  12px; }
    div#featuredText        { left:   0px; top: 520px; }
    div#contributors        { left: 950px; top: 370px; width: 834px; font-size: 14px; }
    #shaderOfTheWeek        { left:   0px; top:  40px; width: 835px; height: 418px; }
    .contributorsHead       { font-size: 38px; }
    a.shader                { font-size: 18px; }

    #shaderPreview0 { left:   0px; top: 550px; width: 360px; height: 202px; }
    #shaderPreview1 { left: 475px; top: 550px; width: 360px; height: 202px; }
    #shaderPreview2 { left: 950px; top: 550px; width: 360px; height: 202px; }
    #shaderPreview3 { left:1425px; top: 550px; width: 360px; height: 202px; }
}

@media screen and (min-width:2560px) 
{
    div#sentence            { left:1440px; top: 160px; width: 800px; font-size: 72px; }
    div#shaderOfTheWeekText { left:   0px; top:  42px; }
    div#featuredText        { left:   0px; top: 765px; }
    div#contributors        { left:1240px; top: 600px; width:1100px; font-size: 16px; }
    #shaderOfTheWeek        { left:   0px; top:  70px; width:1140px; height: 608px; }
    .contributorsHead       { font-size: 40px; }
    a.shader                { font-size: 22px; }

    #shaderPreview0 { left:    0px; top: 800px; width: 520px; height: 288px; }
    #shaderPreview1 { left:  620px; top: 800px; width: 520px; height: 288px; }
    #shaderPreview2 { left: 1240px; top: 800px; width: 520px; height: 288px; }
    #shaderPreview3 { left: 1840px; top: 800px; width: 520px; height: 288px; }
}