body {
    font: 85.5%/1.5em "Droid Sans", helvetica, sans-serif;
}

@media screen {

    html, body {
        height:100%;
    }

    body {
        margin:0;
        background:#fff;

    }

    img {
        border:0;
    }

    h1, h2, h3, h4, h5, h6 {
        color:#fff;
    }

    h1 {
        font-size:200%;
        line-height:1.5em;
        margin:0 0 1.5ex;
    }

    h2 {
        font-size:180%;
        line-height:1em;
        margin:1ex 0 1ex;

    }

    p {
        margin: 0 0 0;
        color:#fff;
        width:480px;
        font-size:130%;
    }

    ul {
        margin:0 0 1.5em;
        padding:0;
    }

    a {
        color:#fff;
    }

    a:hover {
        color: #fff;
    }

    /* HEADER ELEMENTS */

    #header {
        position:relative;
        margin-left:auto;
        margin-right:auto;
        width:960px;
        height:100px;
    }

    .headerlogo {
        position:absolute;
        margin-top:18px;
        width:335px;
        height:63px;
    }

    .headercopy {
        position:absolute;
        margin-top:48px;
        margin-left:520px;
        width:432px;
        font-size:140%;
        color:#7c7c7c;
    }

    .socialmediabg {
        position:absolute;
        margin-left: 889px;
        width:77px;
        height:28px;
    }

    .socialcopy{
        position:absolute;
        margin-top:2px;
        margin-left:790px;
        width:150px;
        color:#a1a1a1;
        font-size:85%;
    }

    #socialmedia {
        position:absolute;
        margin-top:5px;
        margin-left:900px;
    }

    .copy-container {
        width:550px;
    }

    /* CONTENT ELEMENTS */
    .outsideContainer{width:100%;min-height:100%;}
    .content {padding-bottom:50px;}

    html>body #agile-apps { height:auto; }

    * html .footer{margin-top:-50px;}
    * html .outsideContainer,html{height:100%;}

    .filler {
        position:absolute;
        width:60%;
        height:395px;
        margin-left:40%;
    }
    
    .wrapper {
        width:960px;
        margin:0 auto;
        height:330px;
        position:relative;
    }
    .wrapper:after {
        clear:left;
        content:".";
        display:block;
        height:0;
        visibility:hidden;
    }

    #agile-apps {
        margin:0;
        padding:0;
        list-style:none;
    }

    #agile-apps > li {
        margin:0;
        padding:0;
        clear:left;
        background-repeat:no-repeat;
        background-position:50% 0;
    }

    #agile-apps .logo-container .wrapper {
        background:none;
        height:0px;
    }

    #agile-apps h2 {
        margin:0;
        padding:2em 0 0.5ex 0;
    }

    #agilecarddeck {
        color:#fff;
        background:#689518;
        width:100%;
        height:430px;
    }

    #agilecarddeck .wrapper {
        background: url(../img/carddeck/bg.jpg);
    }

    .agilecarddeck-filler {
        margin-top:-430px;
        background:url(../img/carddeck/line_spacer.png) right repeat-x ;
    }

    #agilepokerclock {
        color:#fff;
        background:#0166ff;
        width:100%;
        height:430px;
    }

    #agilepokerclock .wrapper {
        background: url(../img/pokerclock/bg.jpg);
    }

    .agilepokerclock-filler {
        margin-top:-431px;
        background:url(../img/pokerclock/line_spacer.png) repeat-x right;
    }

    #agilemeetingalert {
        color:#fff;
        background:#ff6600;
        width:100%;
        height:430px;
    }

    #agilemeetingalert .wrapper {
        background: url(../img/meetingalert/bg.jpg);
    }

    .agilemeetingalert-filler {
        margin-top:-429px;
        background:url(../img/meetingalert/line_spacer.png) repeat-x right;
    }

    .image-container {
        position:absolute;
        width:360px;
        height:330px;
        margin-left:550px;
    }

    .container-imageone {
        position:absolute;
        background:url(../img/global/iphone.png);
        width:253px;
        height:422px;
        margin-top:8px;
        z-index:2;
    }

    .container-imagetwo {
        position:absolute;
        background:url(../img/global/nexusone.png);
        width:214px;
        height:369px;
        margin:46px 0 0 180px;
        z-index:1;
    }

    .containeroverlay-one {
        position:absolute;
        width:179px;
        height:267px;
        background-image:url(../img/carddeck/screenoverlay1.png);
        margin: 75px 0 0 28px;
        z-index:4;
    }
    
    .containeroverlay-two {
        position:absolute;
        width:166px;
        height:248px;
        background-image:url(../img/carddeck/screenoverlay2-coming-soon.png);
        margin: 85px 0 0 197px;
        z-index:3;
    }

    .container-macbook {
        position:absolute;
        width:558px;
        height:332px;
        background: url(../img/global/macbook.png);
        margin: 56px 0 0 -100px;
        z-index:1;
    }

    .containeroverlay-carousel {
        position:absolute;
        width:179px;
        height:267px;
        margin: 75px 0 0 28px;
        z-index:4;
    }

    .containeroverlay-carousel ul{padding:0;list-style:none;}
    .containeroverlay-carousel ul li{width:179px;margin:0;float:left;}
    .containeroverlay-carousel ul li img {width:179px;height:267px;}
    
    .button {
        float:left;
        margin-top:30px;
        line-height:1.5;
    }

    .button.button-android {
        margin-left: 60px;
    }

    .button.button-windows {
        background-image: url(../img/global/windows_logo.png);
    }

    .button.button-play {
        background-image: url(../img/global/play_logo.png);
    }

    .button img{
        margin:6px 0 10px 0;
    }

    #agilepokerclock .copy-container {
        padding-top:15px;
    }

    #agilepokerclock .button a, #agilemeetingalert .button a {
        display:block;
        font-size: 18px;
        text-decoration:none;
        padding:10px 0 0 0;
    }

    #agilepokerclock .button.button-play {
        width:100%;
    }

    #agilepokerclock .button.button-play a {
        width:230px;
        text-decoration:underline;
    }

    #agilepokerclock .button.button-iphone {
        margin-top:10px;
    }

    #agilepokerclock .button.button-windows {
        margin-top:10px;
    }

    .button a,
    .button a span,
    .button img,
    .button small{
        display: block;
    }

    .logo-container {
        position:relative;
        width:100%;
        height:100px;
        clear: left;
        background-color:#fff;
    }

    .logo-container .wrapper img {
        margin-top:35px;
        margin-left:130px;
        width:830px;
        height:41px;
    }

    /* FOOTER ELEMENTS */

    #footer {
        position:relative;
        width:100%;
        height:50px;
        margin: -50px auto;
        background-color:#000;
    }

    #footer .wrapper {
        height:50px;
        background-color:#000;
    }

    #footer img {
        position:absolute;
        margin-left:872px;
        margin-top:17px;
    }

    .footercopy {
        position:absolute;
        font-size:13px;
        font-family:arial;
        color:#b7b7b7;
        font-size:100%;
        margin-left:0px;
        margin-top:15px;
    }
}