MIA SPEV

gistfile1.txt

<!-- START OF MIA SPEV -->
                <style type="text/css">

        #spev-mia {
          width: 956px;
          height: 580px;
            position: relative;
            padding-top: 10px;
        }

        #spev-mia-background {
          width: 956px;
          position: absolute;
          left: 0px;
        }

        .spev-mia-top {
color: #FFF;
float: left;
padding: 20px 0px 20px 20px;
width: 67%;
        }

        .black-bgd {
width: 100%;
height: 100%;
background-color: #000;
position: absolute;
opacity: 0.6;
filter: alpha(opacity=60);
display: block;
        }

        #spev-mia .title-box {
          position: absolute;
top:70%;
width: 100%;
-webkit-font-smoothing: antialiased;
        }

        .spev-mia-top h1 {
            font-family: "ff-meta-serif-web-1","ff-meta-serif-web-2","Georgia",serif;
            font-size: 40px;
            line-height: 44px;
            -webkit-font-smoothing: antialiased;
        }

        .spev-mia-top h4 {
            font-family: "ff-meta-serif-web-2","ff-meta-serif-web-1","Georgia",serif;
            font-size: 24px;
            margin: 0 0 4px 0;
            -webkit-font-smoothing: antialiased;
        }

        .spev-mia-top .byline { color: #e4e4e4; font-size: 14px; padding: 0px 0px 5px; }

        #spev-mia .guff {
            color: #FFF;
            font-family: Georgia, Times, serif;
            font-size: 18px;
            line-height: 1.3em;
        }

        #spev-mia .second-story-box .guff {
          font-size: 15px;
          padding-top:10px;
        }

        #spev-mia a, #spev-mia a:hover, #spev-mia a:visited {
            color: #fcf7eb;
            text-decoration: none;
        }


        #spev-mia a.read-more {
          color: rgb(111, 167, 219);
        }

        #spev-mia a:hover {
          color:#fff;
        }

        #spev-mia .unit p:hover {
            color: white;
            text-decoration: underline;
        }

        #spev-mia h5 {
          font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
            text-transform: uppercase;
            padding: 0 0 5px 0;
            font-size: 12px;
            font-weight: bold;
            color: #FFF;
            -webkit-font-smoothing: antialiased;
        }

        #spev-mia .share-units {
          position: absolute;
            bottom: 20px;
            color: #FFF;
            font-family: Georgia, Times, serif;
        }

        #spev-mia .share-units .unit {
            float: left;
            width: 220px;
            margin: 0 8px;
        }

        #spev-mia .share-units .unit.first { margin-left: 20px;}

        #spev-mia .share-units .unit img {
            margin: 0 6px 0 0;
        }

        #spev-mia .desc {
            font-size: 16px;
            line-height: 20px;
        }

        .clear {
            clear: both;
        }
        #spev-mia #title-img {
          width: 100%
        }

        #spev-mia .second-story-box{
          float: left;
          width: 30%;
        }

        #spev-mia .second-story-box img{
          float: left;
          margin:10px;
          width:80px;
        }
        #spev-mia .second-story-box .second-title {
          float: left;
          color: #fcf7eb;
          font-family: "ff-meta-serif-web-1","ff-meta-serif-web-2","Georgia",serif;
          margin: 10px;
          margin: 20px 10px 0px;
          font-size: 20px;
          width: 50%;
        }

        @media screen and (max-width: 800px) and (min-width: 481px) {
            html body #spev-mia { width: 630px; height: 385px; margin: 0 0 10px 0; }
            html body #spev-mia .spev-mia-top { width: 60%; padding: 0px 25px 0px 20px; margin: 18px 0px; }
            #spev-mia-background { width: 630px; }
            .spev-mia-top .byline { padding-top: 5px; }
            .spev-mia-top h1 { font-size: 28px; line-height: 32px; width: 90% }
            #spev-mia .guff { font-size: 14px; max-width: 340px}
            .share-units { padding: 20px 14px 5px; bottom: 0px; background-color: black;}
            #spev-mia .desc { font-size: 14px; line-height: 17px;}
            #spev-mia .share-units .unit { width: 134px; height: 90px; padding-bottom: 6px;}
            #spev-mia .share-units .unit.first { margin-left: 10px;}
            #spev-mia h5 {color: #DADADA; height: 24px;}
            #spev-mia .title-box {top:55%;}
            #spev-mia .second-story-box {margin-top:10px; width: 32%;}
            #spev-mia .second-story-box img{width:70px;}
            #spev-mia .second-story-box .guff {font-size: 12px}
            #spev-mia .second-story-box .second-title {margin: 10px 0px; font-size: 16px;}
        }

        @media screen and (max-width: 480px){
            html body #spev-mia {width: 300px; height: 340px;}
            #spev-mia #title-img {position: absolute;top: 30px}
            #spev-mia-background { width: 300px; position: inherit; }
            #spev-mia a, #spev-mia a:hover, #spev-mia a:visited {color: black; text-decoration: none; }
            #spev-mia .unit p:hover {color: black; text-decoration: underline; }
            .spev-mia-top { margin: 10px 0; padding: 0px; width: 300px;}
            .spev-mia-top h1 { font-size: 20px; line-height: 22px; margin-top:10px; }
            .spev-mia-top .byline { color: #666; margin-bottom: 0px; font-size: 12px;}
            .black-bgd { display: none; }
            #spev-mia .guff {color: #000; position: inherit; top: 0px; left: 0px; width: 300px; font-size: 14px;}
            #spev-mia h5 {color: black;}
            #spev-mia .share-units .unit { margin: 16px 0px; }
            #spev-mia h5 img {display: none;}
            #spev-mia .share-units .unit.first { margin-top: 10px !important; }
            #spev-mia .desc { font-size: 13px; line-height: 14px;}
            html body #spev-mia .guff a { color: #2262cc; }
            #spev-mia a, #spev-mia a:hover, #spev-mia a:visited {color: #2262cc; }
            #spev-mia .spev-mia-top a { color: black; }
            #spev-mia .title-box {top: 190px;}
            #spev-mia .second-story-box {display: none;}
        }

        </style>


        <div id="spev-mia">
            <img id="spev-mia-background" src="http://propublica.s3.amazonaws.com/images/mia-spevphoto.JPG" />
            <img id="title-img" width="100%" src="http://propublica.s3.amazonaws.com/images/mia-title2.png">

            <div class="title-box">
              <div class="black-bgd"></div>
              <div class="spev-mia-top">
                <a href="http://www.propublica.org/article/cheat-sheet-the-tyson-gay-file"><h1>Unidentifiable and Far From Home</h1></a>
                <p class="byline">by <a href="http://www.propublica.org/site/author/megan_mccloskey">Megan McCloskey</a>, ProPublica, Feb. 10</p>

              <p class="guff">The Pentagon, a dysfunctional agency, and one man's search for his missing cousin. <a class="read-more" href="http://www.propublica.org/article/TKTKTK">Read more &raquo;</a></p>
            </div>
            <div class="second-story-box">
              <img src="http://propublica.s3.amazonaws.com/images/mia-letter.png">
              <div class="second-title">
                <h3>Documents from History</h3>
                <p class="guff">Some description of these documents</p>
              </div>
            </div>
              <div class="clear"></div>
            </div>
        </div>
                <!-- END OF MIA SPEV-->