MeetStrap: i has a box

dabblet.css

/**
 * MeetStrap: i has a box
 */
html{overflow-y:scroll;font-size:100%;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}html,body{font-size:12px;color:#555;line-height:1.5;margin:0;padding:0}body,button,input,select,textarea{font-family:Verdana,Geneva,Tahoma,sans-serif}abbr,strong,acronym,span,small,time,strike,sub,sup,a{display:inline;font-family:inherit}abbr,acronym{border-width:0}b,strong{font-weight:bold}i,em{font-weight:normal}sup,sub{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-0.5em}sub{bottom:-0.25em}small{font-size:11px}p,ul,ol,li blockquote,form,fieldset,legend,table,dl,dd,article,aside,details,figcaption,figure,footer,header,hgroup,nav,section{margin:0;padding:0;margin-bottom:12px;font-family:inherit}form,legend{margin-bottom:0}img{margin:0;padding:0;border:0}img.resample{-ms-interpolation-mode:bicubic;image-rendering:optimizeQuality}ul,ol{list-style-position:outside;padding-left:2.75em}article,aside,details,figcaption,figure,footer,header,hgroup,nav,section{display:block}audio,canvas,video{display:inline-block;display:inline-block;zoom:1;*display:inline}a:link,a:visited{text-decoration:none;color:#3987cb}a:hover,a:active{text-decoration:none;color:#3987cb}h1,h2,h3,h4,h5,h6{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-weight:normal;color:#222;margin:0;padding:0;padding-bottom:6.4px;line-height:1.1}h1{font-weight:bold;font-size:2.5em;letter-spacing:-0.75px}h2{font-weight:bold;font-size:2em;letter-spacing:-0.5px}h3{font-weight:bold;font-size:1.6666em}h4{font-weight:normal;font-size:1.5em}h5{font-weight:normal;font-size:1.25em}h6{font-weight:bold;font-size:1em}label{margin-right:1em}table{width:100%;font-size:12px;border-collapse:collapse}caption,td,th{padding:8px;line-height:16px;text-align:left}caption{vertical-align:middle;padding-left:0}th{font-weight:bold;vertical-align:middle}td,tbody th{vertical-align:top;border-top:1px solid #ddd}.borderedTable{border:1px solid #ddd}.borderedTable th+th,.borderedTable td+td,.borderedTable th+td{border-left:1px solid #ddd}.stripedTable tbody tr:nth-child(odd) td,.stripedTable tbody tr:nth-child(odd) th{background-color:#f7f7f7}.leading-top{padding-top:12px}.leading-bottom{padding-bottom:12px}.margin-top{margin-top:12px}.margin-bottom{margin-bottom:12px}.margin-none{margin:0}.padding-none{padding:0}.align-right{text-align:right}.align-left{text-align:left}.align-center{text-align:center}.display-none{display:none}.hidden{display:hidden}.block{display:block}.inline{display:inline}.muted{color:#999}.bold{font-weight:bold}.caps{text-transform:uppercase}.small,small{font-size:.85em}.opacity-quarter{opacity:.25;-ms-filter:alpha(opacity=25);filter:alpha(opacity=25)}.border-none{border-width:0!important}.resetList{margin:0;padding:0;list-style-type:none}.inlineList,.pipeList,.crumbList{padding-left:0}.inlineList>li,.pipeList>li,.crumbList>li{display:inline;list-style:none}.pipeList>li{margin-right:.5em;padding-right:.5em;border-right:1px solid}.pipeList>li:last-child,.pipeList>li.last{border-right-width:0}.crumbList>li{margin-right:.75em}.crumbList>li:after{content:'>';margin-left:.75em}.crumbList>li:last-child:after,.crumbList>li.last:after{margin-left:0;content:''}.dividedList,.paddedList{list-style:none;padding:0;margin:0}.dividedList>li,.paddedList>li{margin:0;padding:12px 12px 0;border-top:1px solid #eee}.paddedList>li{padding:6px 0 0 0;border-width:0}.doc-content>.dividedList>li{padding-left:0;padding-right:0}.line:after,.lastUnit:after{clear:both;display:block;visibility:hidden;overflow:hidden;height:0!important;line-height:0;font-size:xx-large;content:" x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x "}.line{*zoom:1}.unit{float:left;min-height:1px}.size1of1{float:none}.size1of2{width:50%}.size1of3{width:33.33333%}.size2of3{width:66.66666%}.size1of4{width:25%}.size3of4{width:75%}.size1of5{width:20%}.size2of5{width:40%}.size3of5{width:60%}.size4of5{width:80%}.lastUnit{display:table-cell;float:none;width:auto;*display:block;*zoom:1;_position:relative;_left:-3px;_margin-right:-3px}.size1of7{width:14.28571%}.size2of7{width:28.57142%}.size3of7{width:42.85713%}.size4of7{width:57.14284%}.size5of7{width:71.42855%}.size6of7{width:85.71426%}.gutter-left{margin-left:16px}.gutter-right{margin-right:16px}.span-25{width:25%}.span-30{width:30%}.span-50{width:50%}.span-60{width:60%}.span-75{width:75%}.doc-box{-moz-border-radius:4px 4px 4px 4px;-webkit-border-radius:4px 4px 4px 4px;border-radius:4px 4px 4px 4px;background-color:#fff;margin-bottom:16px}.doc-box>.doc-content:first-child{border-top:0;-moz-border-radius-topleft:4px;-webkit-border-top-left-radius:4px;border-top-left-radius:4px;-moz-border-radius-topright:4px;-webkit-border-top-right-radius:4px;border-top-right-radius:4px}.doc-box>.doc-content:last-child{-moz-border-radius-bottomleft:4px;-webkit-border-bottom-left-radius:4px;border-bottom-left-radius:4px;-moz-border-radius-bottomright:4px;-webkit-border-bottom-right-radius:4px;border-bottom-right-radius:4px}.doc-box .doc-content{border-top:1px solid #ddd}.doc-box>.line>.unit{float:none;border-right:1px solid #ddd;display:table-cell;vertical-align:top}.doc-box>.line>.lastUnit{border-right:0;vertical-align:top}.doc-box>.line .doc-content{-moz-border-radius:0;-webkit-border-radius:0;border-radius:0}.doc-box>.line .unit:first-child .doc-content:first-child{-moz-border-radius-topleft:4px;-webkit-border-top-left-radius:4px;border-top-left-radius:4px}.doc-box>.line .unit:first-child .doc-content:last-child{-moz-border-radius-bottomleft:4px;-webkit-border-bottom-left-radius:4px;border-bottom-left-radius:4px}.doc-box>.line .unit:last-child .doc-content:first-child,.doc-box>.line .lastUnit .doc-content:first-child{-moz-border-radius-topright:4px;-webkit-border-top-right-radius:4px;border-top-right-radius:4px}.doc-box>.line .unit:last-child .doc-content:last-child,.doc-box>.line .lastUnit .doc-content:last-child{-moz-border-radius-bottomright:4px;-webkit-border-bottom-right-radius:4px;border-bottom-right-radius:4px}.ie6 .doc-box .line .unit,.ie7 .doc-box .line .unit{float:left!important}.doc-content{padding:12px;padding-bottom:0;border-bottom:1px solid transparent}.doc-content.footer{background:#eee;-moz-border-radius:0 0 4px 4px 0;-webkit-border-radius:0 0 4px 4px 0;border-radius:0 0 4px 0}.clearfix:after{visibility:hidden;display:block;font-size:0;content:" ";clear:both;height:0}* html .clearfix,*:first-child+html .clearfix{zoom:1}.clear-both{clear:both}.rounded-top{-moz-border-radius:4px 4px 0 0;-webkit-border-radius:4px 4px 0 0;border-radius:4px 4px 0 0}.rounded-bottom{-moz-border-radius:0 0 4px 4px;-webkit-border-radius:0 0 4px 4px;border-radius:0 0 4px 4px}.rounded-all{-moz-border-radius:4px 4px 4px 4px;-webkit-border-radius:4px 4px 4px 4px;border-radius:4px 4px 4px 4px}.doc-content-notice{background:#ddd;position:relative}.close-me{position:absolute;top:12px;right:12px;display:block;background:url("//img1.dev.meetupstatic.com/img/ui-dialog-close.png") no-repeat top left;width:14px;height:14px;cursor:pointer;*cursor:hand;opacity:.5;-ms-filter:alpha(opacity=50);filter:alpha(opacity=50)}.close-me:hover{opacity:1;-ms-filter:alpha(opacity=100);filter:alpha(opacity=100)}.doc-content-into,.doc-content-outof{position:relative}.doc-content-into:before,.doc-content-into:after,.doc-content-outof:before,.doc-content-outof:after{content:' ';position:absolute;left:16px;border-left:8px solid transparent;border-right:8px solid transparent;display:block}.doc-content-outof:before{top:-9px;border-bottom:8px solid #ddd}.doc-content-outof:after{top:-8px;border-bottom:8px solid white}.doc-content-into:before{top:0;border-top:8px solid #ddd}.doc-content-into:after{top:-1px;border-top:8px solid white}.figureset,.figureset-right{*zoom:1}.figureset:after,.figureset-right:after{visibility:hidden;display:block;font-size:0;content:".";clear:both;height:0}.figureset .figureset-figure,.figureset .figureset-description{display:table-cell;vertical-align:top}.figureset .figureset-description{width:auto;padding-left:12px;min-width:99%}.figureset-right .figureset-figure{float:right}.figureset-right .figureset-description{float:left;padding-right:12px;padding-left:0;min-width:70%;width:70%}.ie6 .figureset .figureset-figure,.ie6 .figureset .figureset-description,.ie7 .figureset .figureset-figure,.ie7 .figureset .figureset-description{float:left}.ie6 .figureset .figureset-description,.ie7 .figureset .figureset-description{min-width:75%;width:75%}.cardList{padding:12px 0 0;list-style:none;vertical-align:top;margin:0;font-size:0}.cardList>li{font-size:12px;margin:0 0 12px 12px;padding:0;background:#f7f7f7;border:1px solid #fff;-moz-box-shadow:rgba(0,0,0,0.35) 0 0 1px 0;-webkit-box-shadow:rgba(0,0,0,0.35) 0 0 1px 0;-o-box-shadow:rgba(0,0,0,0.35) 0 0 1px 0;box-shadow:rgba(0,0,0,0.35) 0 0 1px 0;display:inline-block;zoom:1;*display:inline;vertical-align:top;width:223px}.cardList>li .doc-content{border-top-color:#eee}.cardList>li .doc-content:first-child{border-top:0}.nav-tabs{padding-top:6px;padding-left:6px;border-bottom:1px solid #ddd;list-style:none;zoom:1}.nav-tabs:after{content:".";display:block;clear:both;visibility:hidden;line-height:0;height:0}.nav-tabs li{float:left;padding:0;margin-right:6px;margin-bottom:-1px}.nav-tabs a{display:block;text-decoration:none;color:#111;background-color:#eee;padding:6px 12px;opacity:.65;-ms-filter:alpha(opacity=65);filter:alpha(opacity=65)}.nav-tabs a:focus{outline-width:0;border-width:0}.nav-tabs a img{margin-top:-5px}.nav-tabs .selected a{opacity:1;-ms-filter:alpha(opacity=100);filter:alpha(opacity=100);border:1px solid #ccc;border-bottom-width:0;background-color:#fff}.nav-tabs .tabcount{color:#888}#lma .tabsNav{border-bottom:0;background-color:#e9ebe5}.nav-pagination{list-style-type:none;margin-bottom:16px;zoom:1}.nav-pagination:after{content:".";display:block;clear:both;visibility:hidden;line-height:0;height:0}.nav-pagination a{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;border:1px solid #ddd;border-left-width:0;font-size:1.08em;padding:.4em 1em;display:block;background:#fff;-moz-box-shadow:none;-webkit-box-shadow:none;-ms-box-shadow:none;box-shadow:none}.nav-pagination a:hover{background-color:#eee}.nav-pagination a[rel=prev]:before{content:"\2190";margin-right:.5em}.nav-pagination a[rel=next]:after{content:"\2192";margin-left:.5em}.nav-pagination li{float:left}.nav-pagination li:first-child a{border-left-width:1px;-moz-border-radius-topleft:4px;-webkit-border-top-left-radius:4px;border-top-left-radius:4px;-moz-border-radius-bottomleft:4px;-webkit-border-bottom-left-radius:4px;border-bottom-left-radius:4px}.nav-pagination li:last-child a{-moz-border-radius-topright:4px;-webkit-border-top-right-radius:4px;border-top-right-radius:4px;-moz-border-radius-bottomright:4px;-webkit-border-bottom-right-radius:4px;border-bottom-right-radius:4px}.nav-pagination li.selected a{font-weight:bold;font-weight:500;letter-spacing:.04em;background-color:#3987cb;color:#fff!important;background:#4d93d0;background-image:-webkit-gradient(linear,left top,left bottom,from(#2264a0),to(#4d93d0));background-image:-moz-linear-gradient(top,#2264a0,#4d93d0);filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,startColorstr='#2264a0',endColorstr='#4d93d0');-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr='#2264a0', endColorstr='#4d93d0')"}.nav-appendPager{-moz-border-radius:4px 4px 4px 4px;-webkit-border-radius:4px 4px 4px 4px;border-radius:4px 4px 4px 4px;border:1px solid #ddd;display:block;text-align:center;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:1.08em;font-weight:bold;font-weight:500;letter-spacing:.04em;color:#3987cb;padding:.5em 0;margin-bottom:16px;cursor:pointer;*cursor:hand}.nav-appendPager:hover{background-color:#eee}.nav-appendPager:active{font-weight:bold;font-weight:500;letter-spacing:.04em;background-color:#3987cb;color:#fff!important;background:#4d93d0;background-image:-webkit-gradient(linear,left top,left bottom,from(#2264a0),to(#4d93d0));background-image:-moz-linear-gradient(top,#2264a0,#4d93d0);filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,startColorstr='#2264a0',endColorstr='#4d93d0');-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr='#2264a0', endColorstr='#4d93d0')"}.nav-buttons{list-style-type:none;margin-bottom:16px;padding-left:0;line-height:1.5;zoom:1}.nav-buttons:after{content:".";display:block;clear:both;visibility:hidden;line-height:0;height:0}.nav-buttons a{background-color:white;background:#e6e6e6;background-image:-webkit-gradient(linear,left top,left bottom,from(white),to(#e6e6e6));background-image:-moz-linear-gradient(top,white,#e6e6e6);filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,startColorstr='white',endColorstr='#e6e6e6');-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr='white', endColorstr='#e6e6e6')";font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;border:1px solid #c4c4c4;border-left-color:#fff;color:#555!important;font-size:1.08em;padding:.4em 1em;display:block}.nav-buttons a:hover{background:#d1d1d1;background-image:-webkit-gradient(linear,left top,left bottom,from(white),to(#d1d1d1));background-image:-moz-linear-gradient(top,white,#d1d1d1);filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,startColorstr='white',endColorstr='#d1d1d1');-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr='white', endColorstr='#d1d1d1')"}.nav-buttons a:active{background:#e6e6e6;-moz-box-shadow:#999 1px 1px 0 0 inset;-webkit-box-shadow:#999 1px 1px 0 0 inset;-o-box-shadow:#999 1px 1px 0 0 inset;box-shadow:#999 1px 1px 0 0 inset}.nav-buttons li{float:left}.nav-buttons li:first-child a{-moz-border-radius-topleft:2px;-webkit-border-top-left-radius:2px;border-top-left-radius:2px;-moz-border-radius-bottomleft:2px;-webkit-border-bottom-left-radius:2px;border-bottom-left-radius:2px;border-left-color:#c4c4c4}.nav-buttons li:last-child a{-moz-border-radius-topright:2px;-webkit-border-top-right-radius:2px;border-top-right-radius:2px;-moz-border-radius-bottomright:2px;-webkit-border-bottom-right-radius:2px;border-bottom-right-radius:2px;border-right-width:1px}.nav-buttons li.selected a{font-weight:bold;font-weight:500;letter-spacing:.04em;background-color:#3987cb;color:#fff!important;background:#4d93d0;background-image:-webkit-gradient(linear,left top,left bottom,from(#2264a0),to(#4d93d0));background-image:-moz-linear-gradient(top,#2264a0,#4d93d0);filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,startColorstr='#2264a0',endColorstr='#4d93d0');-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr='#2264a0', endColorstr='#4d93d0')";border-left:0}.tearsheet,.tearsheet-25,.tearsheet-80{font-family:'helvetica neue',arial;display:inline-block;text-align:center;margin-bottom:12px;-moz-border-radius:2px 2px 2px 2px;-webkit-border-radius:2px 2px 2px 2px;border-radius:2px 2px 2px 2px;width:40px;height:40px}.tearsheet .month,.tearsheet-25 .month,.tearsheet-80 .month{display:block;background:#e6304c;color:#fff;-moz-border-radius:2px 2px 0 0;-webkit-border-radius:2px 2px 0 0;border-radius:2px 2px 0 0}.tearsheet .day,.tearsheet-25 .day,.tearsheet-80 .day{display:block;font-weight:bold;border:1px solid #ddd;border-width:0 1px 1px;-moz-border-radius:0 0 2px 2px;-webkit-border-radius:0 0 2px 2px;border-radius:0 0 2px 2px;background:#f7f7f7}.tearsheet .month,.tearsheet-25 .month,.tearsheet-80 .month{font-size:11px;height:16px;line-height:16px}.tearsheet .day,.tearsheet-25 .day,.tearsheet-80 .day{line-height:24px;font-size:16px}.tearsheet-25{width:25px;height:25px}.tearsheet-25 .month{font-size:7px;height:10px;line-height:10px}.tearsheet-25 .day{line-height:15px;font-size:10px}.tearsheet-80{width:80px;height:80px}.tearsheet-80 .month{font-size:22px;height:32px;line-height:32px}.tearsheet-80 .day{line-height:48px;font-size:32px}

body {
	background: #eee;
}
.debug {
	border: 2px dashed red;
}
.header {
	background: #e6304c;
}
.wrap {
	width: 960px;
	margin: 0 auto;
	padding: 16px 0;
	overflow: hidden;
}

dabblet.html

<!-- content to be placed inside <body>…</body> -->
<div class="header">&nbsp;</div>
<div class="wrap">

<div class="doc-box">
    <div class="doc-content">

        <!-- Title and Stats -->
        <h1>NYC MeetStrap Enthusiasts</h1>
        <ul class="pipeList">
            <li><strong>Members:</strong> 23</li>
            <li><strong>Meetups:</strong> 127</li>
            <li><strong>Photos:</strong> 36</li>
            <li><strong>Statistics:</strong> 4, including this one</li>
        </ul>

        <!-- Member photo strip -->
        <ul class="inlineList">
            <li><img src="http://placekitten.com/50/50" /></li>
            <li><img src="http://placekitten.com/50/50" /></li>
            <li><img src="http://placekitten.com/50/50" /></li>
            <li><img src="http://placekitten.com/50/50" /></li>
            <li><img src="http://placekitten.com/50/50" /></li>
            <li><img src="http://placekitten.com/50/50" /></li>
            <li><img src="http://placekitten.com/50/50" /></li>
            <li><img src="http://placekitten.com/50/50" /></li>
            <li><img src="http://placekitten.com/50/50" /></li>
            <li><img src="http://placekitten.com/50/50" /></li>
        </ul>

        <!-- Exploration section -->
        <h2>Explore NYC MeetStrap Enthusiasts</h2>

        <div class="line">

            <!-- Group photo and description -->
            <div class="unit gutter-right size3of5">
                <img src="http://placekitten.com/160/160" />
                <p>Ethnic odio Austin reprehenderit et sapiente. Commodo nihil delectus pinterest, consectetur mollit cred nisi freegan cillum ea nulla skateboard. Eiusmod sartorial delectus, organic butcher vegan anim +1 post-ironic 8-bit thundercats. Thundercats biodiesel letterpress sapiente sed officia, vice vinyl messenger bag. Pickled skateboard fugiat, in duis ethnic small batch irure. Lo-fi dreamcatcher adipisicing occaecat cred salvia keffiyeh, ennui semiotics echo park excepteur eiusmod before they sold out quis enim.</p>
                <p>Sunt pour-over messenger bag gentrify ennui, biodiesel consectetur esse stumptown keytar master cleanse. Artisan mollit gentrify, pour-over keffiyeh bicycle rights lomo pork belly jean shorts. Brooklyn odd future freegan, ex photo booth Austin sriracha ethnic delectus bushwick...</p>
                <a href="#">Read More</a>
            </div>

            <!-- Event listings -->
            <div class="unit lastUnit">
                <h4>Show:</h4>
                <ul>
                    <li><a href="#">Cool Meetups</a></li>
                    <li><a href="#">Lame Meetups</a></li>
                </ul>

                <ol class="dividedList">
                    <!-- Event Item -->
                    <li>
                        <time datetime="2012-03-14">
                            <span class="month">Mar</span>
                            <span class="day">14</span>
                        </time>
                        <h5><a href="#">Hello MeetStrap Faff</a></h5>
                        <p><strong>18</strong> members attending</p>
                    </li>
                    <!-- Event Item -->
                    <li>
                        <time datetime="2012-03-14">
                            <span class="month">Mar</span>
                            <span class="day">14</span>
                        </time>
                        <h5><a href="#">Hello MeetStrap Faff</a></h5>
                        <p><strong>18</strong> members attending</p>
                    </li>
                    <!-- Event Item -->
                    <li>
                        <time datetime="2012-03-14">
                            <span class="month">Mar</span>
                            <span class="day">14</span>
                        </time>
                        <h5><a href="#">Hello MeetStrap Faff</a></h5>
                        <p><strong>18</strong> members attending</p>
                    </li>
                    <!-- Event Item -->
                    <li>
                        <time datetime="2012-03-14">
                            <span class="month">Mar</span>
                            <span class="day">14</span>
                        </time>
                        <h5><a href="#">Hello MeetStrap Faff</a></h5>
                        <p><strong>18</strong> members attending</p>
                    </li>
                    <!-- Event Item -->
                    <li>
                        <time datetime="2012-03-14">
                            <span class="month">Mar</span>
                            <span class="day">14</span>
                        </time>
                        <h5><a href="#">Hello MeetStrap Faff</a></h5>
                        <p><strong>18</strong> members attending</p>
                    </li>
                </ol>

                <!-- Event pagination -->
                <ul>
                    <li><a rel="relationship" href="#">Previous</a></li>
                    <li><a href="#">1</a></li>
                    <li><a href="#">2</a></li>
                    <li><a href="#">3</a></li>
                    <li><a rel="relationship" href="#">Next</a></li>
                </ul>
            </div> <!-- /lastUnit -->

        </div> <!-- /line -->

    </div>
</div>

</div>

settings.json

{"view":"split","seethrough":"","prefixfree":"","page":"html"}