/* 
 *  _litestrap abstracts
 *
 * Abstracted objects for multi-purpose use
 *
 */

/* makin' a circle.. */
.circle {    
    -moz-border-radius: 50%;
	-webkit-border-radius: 50%;
	border-radius: 50%;
    /* set your own damn widths, you crazy kids */
    /* protip: if the height != the width, you'll end up with an elipse. */
} 
 
/*
    the media object
    - http://www.stubbornella.org/content/2010/06/25/the-media-object-saves-hundreds-of-lines-of-code/
*/
.media {
    display: block;
}
    .media__img {
        float: left;
        margin-right: 0.5em;
    }
    .media__img--rev {
        float: right;
        margin-left: 0.5em;
    }
        .media__img img,
        .media__img--rev img {
            display: block;
        }
    .media__body {
        overflow: hidden;
        display: block;
    }        
 
/* 
	faux tables for image/text display 
	- the 'flag' object with a different name: 
	   http://csswizardry.com/2013/05/the-flag-object/ 
*/
.faux {
    display: table;
    width: 100%;
}
.faux--mid { text-align: center; }

    .faux__image,
    .faux__img,
    .faux__body {
        display: table-cell;
        vertical-align: middle;
	}
        .faux--top .faux__image,
        .faux--top .faux__img,
		.faux--top  .faux__body {
            vertical-align: top;
        }

        .faux--bottom .faux__image, 
        .faux--bottom .faux__img, 
		.faux--bottom  .faux__body {
            vertical-align: bottom;
        }
        .faux--mid .faux__image, 
        .faux--mid .faux__img, 
        .faux--mid .faux__body {
            display: inline-table;
        }
  
    .faux__image, .faux__img {
        padding-right: 0.5em;
	}
        .faux__image > img, .faux__img > img {
            display: block;
            max-width: none;
        }

        .faux--rev .faux__image,
        .faux--rev .faux__img {
            padding-right: 0;
            padding-left: 0.5em;
        }

    .faux__body {
        width: 100%;
    }
        .faux--mid .faux__body {
            width: auto;
            text-align: left;
        }
