/************************************************************************************************
 * Conversation Grid v1.0
 * Author: Jason Koi, DevelopThings, LLC
 * URL: http://www.developthings.com
 * Copyright (C) 2014, DevelopThings, LLC
 ************************************************************************************************/
					
/************************************************************************************************
 * CLEARFIX
 ************************************************************************************************/
    
    .conversation-grid.css { zoom: 1; margin: 0 -10px; text-align: left; color: #565656; }
    .conversation-grid.css * { box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; }
    .conversation-grid.css ,
    .conversation-grid.css .cg-header { zoom: 1; }
    .conversation-grid.css:before, .conversation-grid.css:after, .conversation-grid.css .cg-header:before, .conversation-grid.css .cg-header:after { content: " "; display: table; }
    .conversation-grid.css:after, .conversation-grid.css .cg-header:after { clear: both; }	


/************************************************************************************************
 * GLOBAL GRID STYLES
 ************************************************************************************************/

	.conversation-grid.css .cg-column { float: left; padding: 0 10px; }
	.conversation-grid.css.cg-one-columns .cg-column { width: 100% }
	.conversation-grid.css.cg-two-columns .cg-column { width: 50% }
	.conversation-grid.css.cg-three-columns .cg-column { width: 33.33% }
	.conversation-grid.css.cg-four-columns .cg-column { width: 25% }
	.conversation-grid.css.cg-five-columns .cg-column { width: 20% }
	.conversation-grid.css.cg-six-columns .cg-column { width: 16.66% }
		
	.conversation-grid.js { opacity: 0; } /* Hide until javascript is ready() */	
	
	.cg-temp-column .cg-column { float: none !important; }
	
	/* Load More Button */
	#cg-load-more { display: block; width: 200px; margin: 20px auto; padding: 4px 0; opacity: 0; color: #ccc; text-align: center; text-transform: uppercase; text-decoration: none; border: 2px solid #ddd; border-radius: 6px; -webkit-border-radius: 6px; -moz-border-radius: 6px; transition: color 200ms linear, border-color 200ms linear; -webkit-transition: color 200ms linear, border-color 200ms linear; -moz-transition: color 200ms linear, border-color 200ms linear; }
	#cg-load-more:hover { color: #aaa; border-color: #aaa; }
		
		
/************************************************************************************************
 * GRID TILES
 ************************************************************************************************/

	.conversation-grid.css .cg-grid-item { padding: 14px; margin-bottom: 20px; background: white; width: 100%; -webkit-column-break-inside: avoid; -moz-column-break-inside: avoid; break-inside: avoid; box-shadow: 0px 0px 17px rgba(0,0,0,.15); }
	.conversation-grid.css .cg-grid-item a { text-decoration: none; outline: none; border: none; }
	
    	/* Header - Author Info */
    	.conversation-grid.css .cg-grid-item .cg-header { margin-bottom: 12px; position: relative; padding-right: 70px; }
    	.conversation-grid.css .cg-grid-item .cg-header .cg-author-avatar { width: 28px; height: 28px; float: left; margin: 0 9px 5px 0; border-radius: 2px; }
    	.conversation-grid.css .cg-grid-item .cg-header .cg-author-name { color: #333; display: block; font-size: .875em; line-height: 1.2em;  }
    	.conversation-grid.css .cg-grid-item .cg-header .cg-author-screen-name { color: #aaa; display: block; font-size: .75em; line-height: 1.2em; }					
    	.conversation-grid.css .cg-grid-item .cg-header .cg-follow-button { position: absolute; top: 0; right: 0; display: block; font-size: 12px; line-height: 18px; padding: 2px 8px 2px 23px; border: 1px solid #eaeaea; border-radius: 3px; background: white url(../images/sprites.png) top left no-repeat; }

        /* Featured Image/Video */
    	.conversation-grid.css .cg-grid-item .cg-featured-video,
    	.conversation-grid.css .cg-grid-item .cg-featured-image-wrapper { margin-bottom: 12px; }
    	.conversation-grid.css .cg-grid-item .cg-featured-image { margin: 0; width: 100%; height: auto; display: block;  }
    	.conversation-grid.css .cg-grid-item .cg-featured-image-wrapper { position: relative; height: 0; width: 100%; }
    	.conversation-grid.css .cg-grid-item .cg-featured-image-wrapper .cg-featured-image { position: absolute; top: 0; left: 0;  height: 100%; width: 100%; }
        
        /* Title */
        .conversation-grid.css .cg-grid-item .cg-title { display: block; font-size: .875em; line-height: 1.3; margin: 0 0 12px; word-wrap: break-word; font-weight: bold; }	
        
        /* Text */
    	.conversation-grid.css .cg-grid-item .cg-text { font-size: .875em; line-height: 1.35em; margin: 0; word-wrap: break-word; }
	
        /* Footer - Timestamp and Actions */
    	.conversation-grid.css .cg-grid-item .cg-footer { height: 16px; margin-top: 8px; }	
    	.conversation-grid.css .cg-grid-item .cg-footer .cg-timestamp { float: left; height: 16px; font-size: .75em; color: #bbb; font-weight: normal; }
    	.conversation-grid.css .cg-grid-item .cg-footer .cg-footer-actions { float: right; }
    	.conversation-grid.css .cg-grid-item .cg-footer .cg-footer-actions > a { display: inline-block; width: 16px; height: 16px; text-indent: -9999px; background: url(../images/sprites.png) left top no-repeat; opacity: .4; transition: opacity 200ms linear; }
    	.conversation-grid.css .cg-grid-item .cg-footer .cg-footer-actions > a:hover { opacity: 1; }
    	.conversation-grid.css .cg-grid-item .cg-footer .cg-footer-actions > a.btn-facebook-share { background-position: -175px top; width: 14px; }		
    	.conversation-grid.css .cg-grid-item .cg-footer .cg-footer-actions > a.btn-twitter-share { background-position: -192px top; }		
		
    	/* Video Controls */
    	.conversation-grid.css .cg-grid-item .cg-featured-video { position: relative; }
    	.conversation-grid.css .cg-grid-item .cg-featured-video .cg-video-thumbnail { margin: 0; }
    	.conversation-grid.css .cg-grid-item .cg-featured-video .btn-play { display: block; width: 70px; height: 70px; background: url(../images/btn-play.png) 24px center no-repeat; text-indent: -9999px; position: absolute; top: 50%; left: 50%; margin-top: -35px; margin-left: -35px; border-radius: 35px; background-color: rgba(0,0,0,.7); opacity: .7; transition: opacity 200ms linear; }	
    	.conversation-grid.css .cg-grid-item .cg-featured-video .btn-play:hover { opacity: 1; }	
    
    	.conversation-grid.css .cg-grid-item .cg-featured-video.touch-video-showing { background: #000; }
    	.conversation-grid.css .cg-grid-item .cg-featured-video.touch-video-showing .cg-video-thumbnail,	
    	.conversation-grid.css .cg-grid-item .cg-featured-video.touch-video-showing .btn-play { display: none; }	
    	.conversation-grid.css .cg-grid-item .cg-featured-video.touch-video-showing .embedded-video-preview { height: 0; padding-top: 56.25%; position: relative; }
    	.conversation-grid.css .cg-grid-item .cg-featured-video.touch-video-showing .embedded-video-preview iframe,
    	.conversation-grid.css .cg-grid-item .cg-featured-video.touch-video-showing .embedded-video-preview .crt-video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }


/************************************************************************************************
 * SERVICE-SPECIFIC TILES
 ************************************************************************************************/
	
		/* Facebook Tile */		
		.conversation-grid.css .cg-grid-item.facebook .cg-header .cg-follow-button { color: #3b5998; background-position: 5px -49px; }
		.conversation-grid.css .cg-grid-item.facebook .web-link { display: block; margin: 14px -14px 0 -14px; padding: 14px; position: relative; border-top: 1px dotted #ddd;
			background: #fff; /* Old browsers */
			background: -moz-linear-gradient(top, #f7f7f7 0%, #ffffff 100%); /* FF3.6+ */
			background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f7f7f7), color-stop(100%,#ffffff)); /* Chrome,Safari4+ */
			background: -webkit-linear-gradient(top,  #f7f7f7 0%,#ffffff 100%); /* Chrome10+,Safari5.1+ */
			background: -o-linear-gradient(top,  #f7f7f7 0%,#ffffff 100%); /* Opera 11.10+ */
			background: -ms-linear-gradient(top,  #f7f7f7 0%,#ffffff 100%); /* IE10+ */
			background: linear-gradient(to bottom,  #f7f7f7 0%,#ffffff 100%); /* W3C */
			filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f7f7f7', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */
		}			
		.conversation-grid.css .cg-grid-item.facebook .web-link .web-link-thumbnail { display: none; position: absolute; left: 14px; top: 14px; width: 40px; }
		.conversation-grid.css .cg-grid-item.facebook .web-link .web-link-title { display: block; font-size: .75em; color: #3b5998; line-height: 1.2em; margin: 0; font-weight: bold; }
		.conversation-grid.css .cg-grid-item.facebook .web-link .web-link-domain { display: block; font-size: .75em; color: #959595; line-height: 1.2em; margin: 0; }
		.conversation-grid.css .cg-grid-item.facebook .web-link .web-link-text { display: block; font-size: .75em; color: #959595; line-height: 1.2em; margin: 8px 0 0 0; }
		.conversation-grid.css .cg-grid-item.facebook .web-link.has-thumb .web-link-thumbnail { display: block; }
		.conversation-grid.css .cg-grid-item.facebook .web-link.has-thumb .web-link-title,
		.conversation-grid.css .cg-grid-item.facebook .web-link.has-thumb .web-link-domain,
		.conversation-grid.css .cg-grid-item.facebook .web-link.has-thumb .web-link-text { margin-left: 50px; }
		.conversation-grid.css .cg-grid-item.facebook .cg-footer .cg-footer-actions > a.btn-facebook-like { background-position: -159px top; margin-right: 2px; }
		.conversation-grid.css .cg-grid-item.facebook .cg-footer .cg-footer-actions > a.btn-facebook-comment { background-position: -144px 1px; margin-right: 3px; }						

		/* Image Tile */
		.conversation-grid.css .cg-grid-item.image { padding: 0; position: relative; }			
		.conversation-grid.css .cg-grid-item.image img { display: block; width: 100%; height: auto; }
	
		/* Instagram Tile */
		.conversation-grid.css .cg-grid-item.instagram .cg-header .cg-follow-button { color: #417199; background-position: 4px -23px; }
		.conversation-grid.css .cg-grid-item.instagram .cg-featured-image-wrapper { padding-top: 100%; }
		.conversation-grid.css .cg-grid-item.instagram .cg-text a { color: #417199; }
		.conversation-grid.css .cg-grid-item.instagram .cg-footer .cg-footer-actions > a.btn-instagram-like { background-position: -128px top; margin-right: 5px; }

		/* Post Tile */
		.conversation-grid.css .cg-grid-item.post .cg-header { padding: 0; }
		.conversation-grid.css .cg-grid-item.post .cg-header .cg-featured-image-wrapper { margin-bottom: 10px; }
		.conversation-grid.css .cg-grid-item.post .cg-text { margin-bottom: 12px; line-height: 1.4 }
		.conversation-grid.css .cg-grid-item.post .cg-read-more-button { display: block; white-space: nowrap; font-size: .875em; }

		/* Tumblr Tile */
		.conversation-grid.css .cg-grid-item.tumblr .cg-header .cg-follow-button { color: #36465d; padding-left: 24px; background-position: 4px -123px }
		.conversation-grid.css .cg-grid-item.tumblr .cg-header .cg-title { display: block; clear: both; font-size: 1em; line-height: 1.2em; font-weight: bold; margin: 20px 0 0; }	
		.conversation-grid.css .cg-grid-item.tumblr .cg-text a { color: #1c5db8; }
		.conversation-grid.css .cg-grid-item.tumblr .cg-text h1,
		.conversation-grid.css .cg-grid-item.tumblr .cg-text h2,
		.conversation-grid.css .cg-grid-item.tumblr .cg-text h3 { font-size: 1.125em; } 		
		.conversation-grid.css .cg-grid-item.tumblr .cg-text blockquote { padding: 4px 15px; margin: 10px 0; border-left: 3px solid #ddd; }
		.conversation-grid.css .cg-grid-item.tumblr .cg-text blockquote p { margin: 0; }
		.conversation-grid.css .cg-grid-item.tumblr .cg-footer .cg-footer-actions > a.btn-tumblr-reblog { background-position: -80px top; margin-right: 3px; }
		.conversation-grid.css .cg-grid-item.tumblr .cg-footer .cg-footer-actions > a.btn-tumblr-favorite { background-position: -128px top; margin-right: 5px; }			
		
		
            /* Tumblr Audio Type */
            .conversation-grid.css .cg-grid-item.tumblr .cg-audio-title { display: block; font-style: italic; }
            .conversation-grid.css .cg-grid-item.tumblr .cg-audio-info { color: #aaa; font-style: italic; font-size: .875em; }
            
                /* Spotify Player */
                .conversation-grid.css .cg-grid-item.tumblr .spotify_audio_player { height: 80px; width: 100%; }
                
                /* Tumblr Player */
                .conversation-grid.css .cg-grid-item.tumblr .tumblr_audio_player { width: 100%; height: 88px; }
                .conversation-grid.css .cg-grid-item.tumblr .tumblr_audio_player .audio_player { height: 88px; border: 1px solid #eee; }
                
                        
		    /* Tumblr Quote Type */
    		.conversation-grid.css .cg-grid-item.tumblr .cg-quote { font-style: italic; margin-bottom: 12px; }
			.conversation-grid.css .cg-grid-item.tumblr .cg-source { font-size: .875em; }		
		  
		/* Twitter Tile */
		.conversation-grid.css .cg-grid-item.twitter .cg-header .cg-follow-button { color: #00acee; background-position: 4px -74px }
		.conversation-grid.css .cg-grid-item.twitter .cg-text a { color: #00acee; }
		.conversation-grid.css .cg-grid-item.twitter .cg-footer .cg-footer-actions > a.btn-twitter-retweet { background-position: -80px top; }
		.conversation-grid.css .cg-grid-item.twitter .cg-footer .cg-footer-actions > a.btn-twitter-favorite { background-position: -32px top; }			
					
		/* YouTube Tile */
		.conversation-grid.css .cg-grid-item.youtube .cg-header { padding-right: 95px; }
		.conversation-grid.css .cg-grid-item.youtube .cg-header .cg-follow-button { color: #d22222; padding-left: 30px; background-position: 4px -97px; }			
    
    
/************************************************************************************************
 * VIDEO MODAL
 * Assumes a 16:9 video ratio, overrides will need to follow
 ************************************************************************************************/

	.cg-modal-overlay { width: 100%; height: 100%; position: fixed; top: 0; left: 0; z-index: 100; background: rgba(255, 255, 255, 0.7); display: none; }	
	.cg-modal { position: fixed; top: 50%; left: 50%; width: 600px; max-height: 80%; padding: 20px; display: none; z-index: 110; background: white; -webkit-box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.5); -moz-box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.5); box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.5); }
	.cg-modal .close { font: 40px sans-serif; position: absolute; top: 0; right: -30px; line-height: 1em; text-decoration: none; color: #333; }
	.cg-modal .cg-featured-video { width: 100%; }		
	.cg-modal .cg-video { height: 0; width: 100%; padding-top: 56.25%; position: relative; }
    .cg-modal .cg-video iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
    
        /* Instagram */
        #cg-preview-instagram-video { width: 460px; }
        #cg-preview-instagram-video .cg-video { padding-top: 100%; }
		
        /* Tumblr */
        #cg-preview-tumblr-video .crt-video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
        
        /* Facebook */
        #cg-preview-facebook-video .wp-video-shortcode { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
        

/************************************************************************************************
 * MEDIA QUERIES
 ************************************************************************************************/

	@media all and (max-width: 480px) {
	
		.conversation-grid.css.one-columns-mobile-narrow .cg-column { width: 100% }
		.conversation-grid.css.two-columns-mobile-narrow .cg-column { width: 50% }
		.conversation-grid.css.three-columns-mobile-narrow .cg-column { width: 33.33% }
		.conversation-grid.css.four-columns-mobile-narrow .cg-column { width: 25% }
		.conversation-grid.css.five-columns-mobile-narrow .cg-column { width: 20% }
		.conversation-grid.css.six-columns-mobile-narrow .cg-column { width: 16.66% }		
	
	}
	
	
	@media all and (min-width: 481px) and (max-width: 767px) {

		.conversation-grid.css.one-columns-mobile-wide .cg-column { width: 100% }
		.conversation-grid.css.two-columns-mobile-wide .cg-column { width: 50% }
		.conversation-grid.css.three-columns-mobile-wide .cg-column { width: 33.33% }
		.conversation-grid.css.four-columns-mobile-wide .cg-column { width: 25% }
		.conversation-grid.css.five-columns-mobile-wide .cg-column { width: 20% }
		.conversation-grid.css.six-columns-mobile-wide .cg-column { width: 16.66% }				
		
	}	
	

	@media screen and (max-width: 767px) {
	
		
		/* Mobile styles for Video Modal */
		.cg-modal { z-index: 501 !important; width: 100% !important; height: 100% !important; top: 0 !important; left: 0 !important; max-height: none; margin: 0 !important; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; overflow-x: hidden; overflow-y: auto; }
		.cg-modal .close { position: absolute; top: 6px; right: 10px; }
	
	}

	
	@media all and (min-width: 768px) {

										
	}