/* embed default.css */
/*font icons*/

/*svg*/

.social-reveal-button{
  width:30px;
  height:30px;
  fill:gray;
margin-top:5px;
}

/*Dave's hacks */
.prssms-post-entrybox .press {
	margin-bottom: 25px;
	border-bottom: 1px solid gray;
	text-align: left;
  white-space: -moz-pre-wrap; /* Firefox */    
  white-space: -pre-wrap;     /* Opera <7 */   
  white-space: -o-pre-wrap;   /* Opera 7 */    
  word-wrap: break-word;      /* IE */
}
.press-blurb {
    text-decoration: none !important;
    font-weight: bold;
    font-size: 15px;
    color: #222;
    clear: both;
}

#chrono{
  cursor: pointer;
   float: right;
   font-size: 15px;
   margin-right: 10px;
   margin-top: 15px;
   text-decoration: none;
}

.press-pub-details {
	font-size: 15px;
	margin: 15px 0;
}

.prssms-embed-post {
    border: none;
}

.prssms-post {
    color: #000;
    background: #fff;
}


.prssms-post-head div a {
    color: #999;
    text-decoration: underline;
}

.prssms-entry {
    margin: 3em 0;
}

.prssms-entry-blurb {
    font-size: 135%;
    border-top: 1px solid #333;
}

.prssms-entry-timestamp,
.prssms-entry-timestamp-revised {
    font-size: 85%;
}

.prssms-entry-text {
    margin: 1em 0;
}

.prssms-entry .snippet {
    margin: 2em 0.5em;
/*    border: 1px solid #ccc;
    background: #eee;
*/
}

.prssms-entry .snippet .timestamp {
    font-size: 75%;
}

.prssms-entry .snippet .timestamp a {
    text-decoration: none;
}

.prssms-entry .snippet .timestamp a:hover {
    text-decoration: underline;
}

.prssms-entry .snippet.youtube {
    max-width: 500px;
    margin: 2em auto;
}

.prssms-entry .snippet.twitter img {
    float: left;
    padding-right: 1em;
}

.prssms-entry .snippet.instagram img, .prssms-entry .snippet.flickr img {
	border: none;
	display: block;
	margin: 0 auto;
	padding: 0;
	width: 100%;
	height: auto;
	max-width: 612px;
}

.prssms-entry .snippet.youtube .video {
    display: block;
    margin: 0.5em auto;
}


.tweet-embed {
	padding: 10px 0;
	/* width: 550px; 
	margin: 0 auto; */
}

/* TAIVO'S HACKS */
.loadButton, .updateButton {
  margin: 10px 0px;
  padding: 1em;
  text-align: center;
  border: 1px solid #ccf;
  color: #669;
  cursor: pointer;
  clear: both;
}
.loadButton:hover, .updateButton:hover {
  border: 1px solid #99f;
  color: #336;
}
span.profile-image {
    display: block;
    float: left;
    margin: 5px 10px 0 0;    
}
span.profile-image img {
    width: 30px;
    height: 30px;
}
.press-date {
    text-decoration: none !important;
    font-weight: bold;
    font-size: 13px;
    color: #222;
}

/* SAM's HACKS */
.press-powered-by {
/*    
background: none repeat scroll 0 0 #CCCCCC;
    border: 0.2em solid #CCCCCC;
    */
  background: #1B2A7C;
  color: #FFFFFF !important;
  height:60px;
  margin: 0 0.6em 20px 0;
  padding: 0 5px 0px;
  text-decoration: none;
  font-family: Arial;
  font-size: 11px;
  width:100%;
  z-index: 99999;
}

@media only screen and (max-width: 800px) {

  .embed-span{
    display:none;
  }

}

@media only screen and (max-width: 520px) {

  .embed-join-btn{
    background:#FF3434;
    color:white;
    width:100px;
    margin-top:11px;
    float:right;
    margin-right:7px;
    padding:10px 20px;
    text-align: center;
    cursor:pointer;
    width:50px;
  }
  
}

.embed-join-btn{
  background:#FF3434;
  color:white;
  width:100px;
  margin-top:13px;
  float:right;
  margin-right:7px;
  padding:10px 20px;
  text-align: center;
  cursor:pointer;
  width:80px;
}

.embed-authed-btn{
  background:#FF3434;
  color:white;
  width:100px;
  margin-top:11px;
  float:right;
  margin-right:7px;
  padding:10px 20px;
  text-align: center;
  cursor:pointer;
  width:auto;
}

.embed-join-btn:hover{
  background:#ff5934;

}

.press-powered-by img{
  width:15px;
  margin-top:11px;
  margin-left:5px;
  float:left;
  margin-right:5px;
}

.embed-powered-by-tag{
  float:left;
  margin-top:20px;
  font-size: 12px;
  margin-left: 10px;
}

.embed-info-btn{
  border-radius:50%;
  padding:0px 6px;
  float:right;
  margin-right:5px;
  margin-top:19px;
  text-align: center;
  color:white;
  border:1px solid white;
}

.modalDialog{
  position:fixed;
}

.embed-info-btn:hover{
  cursor:pointer;
}

.press-published-in{
    font-family: Serif;
    font-size: 12px;
    font-style: italic;
}
.author{
    font-family: Arial;
    font-size: 12px;
    font-style: italic;
	}

/* May 2, 2014 - Styling FB, Instagram and Snippet URL embeds */

.snippet {
    background: white none repeat scroll 0 0;
    margin-left: auto;
    margin-right: auto;
    max-width: 505px;
}

.snippet.facebook {
    padding: 10px 0 0;
}

.snippet.url, .snippet.facebook {
    border-width: 1px; border-style: solid; border-color: rgb(238, 238, 238) rgb(221, 221, 221) rgb(187, 187, 187);
    border-radius: 5px;
    margin-bottom: 20px;
}

.facebook img.profile {
	height: auto;
}
.snippet a[href*="facebook.com/profile.php"] {
	display: block;
	float: left;
	margin: 0 10px 0 10px; // I have no idea how, but setting this link to have the left-margin causes the profile picture to also have it.
						   // I just spent an hour trying to make that happen to no avail.  Then when I copied the CSS for the link from
						   // the FB snippet CSS in profile.css, it just worked.  Go figure.
}

.facebook .body {
	clear: both;
}

.facebook .text {
	padding: 10px;
}

.facebook .body img {
    padding: 0 10px;
}

.facebook .timestamp {
    background: none repeat scroll 0 0 #EFEFEF;
    font-size: 12.5px;
    padding: 4px 10px;
    line-height: 20px;
}

.facebook .author a{
  margin-left:10px;
}

.twitter-tweet-rendered {
    width: 100% !important;  // Sets the Tweet embeds to 100% of width of containing element.  Did this because the fixed width set
    						 // by the tweet-embed was 500px, not responsive.
    height: intrinsic;
}

.twitter-tweet-rendered .media .autosaved {
	width: 100% !important;
}

/* Snippet URL Styling */
.snippet.url .title-body {
	display: block;
	/* float: left; */
	/* background-color: #EFEFEF !important; */
	}

  .snippet.url iframe {
    display: block;
        height: 330px;
        width: 100%;
  }

/* Instagram URL snippet styling - NOTE: Not necessarily ideal to do it by styling on the contents of the href, but hey
   it seems to work for now.  We should be adding a class to identify the URL snippets' origins.  For instance, we could 
   add prss-embed-instagram-url-snippet as a class name.  Maybe there is an even better way to do it.  Let's just get it done!
*/
.snippet.url a[href*="instagram.com"] img {
	width: 100% !important;
}

.snippet.url a[href*="instagram.com"] .title-body {
	background-color: #EFEFEF;
	margin: 0px;
}

.url-title a[href*="instagram.com"] {
	background-color: #EFEFEF; /* In some sites there was a tiny gap caused by this href between the instagram image and its timestamp.
							      This resolved that gap by making the gap the same color as the timestamp background. */
}

/* Damn there is a lot of legacy crap in this css.  Not much thinking has gone into this.  It is embarrassing to think that
    our CSS guy slapped things together so poorly that I am forced to cludge together a bunch of hacks to make it look even 
    remotely decent.  What am I complaining about?  No congruity between different pages in which the same elements are displayed.
    For now, just remember that we want to consolidate all the styles for Instagrams, Tweets, YouTubes and FB posts so that they
    look the same whether they are entered via a SNIPPET URL or via a Concierge search. The below styles the meta area of an 
    instagram snippet pulled in via a snippet URL.  The following css styles the meta area of an instagram pulled in from a 
    concierge search... Don't ask.  */
.snippet.url .timestamp {
    font-size: 12.5px !important;
    padding: 4px 0px 4px 10px !important;
    line-height: 20px !important;
    margin-bottom: 12px !important;
      text-align: left !important;
      width: 40% !important;
}

.url.snippet .title-content p {
    color: #777;
    font-size: 11pt;
    margin:10px 0;
    font-weight: 400;
    margin-left: 0;
}
.snippet.instagram .timestamp,.snippet.flickr .timestamp {
	width: 100% !important;
	background-color: #EFEFEF !important
    font-size: 12.5px !important;
    padding: 4px 0 4px 10px !important;
    line-height: 20px !important;
}

.timestamp {
	overflow: hidden;
}

/* Round the corners on the instagram snippets from concierge search */
.snippet.instagram, .snippet.flickr {
    margin-bottom: 20px;
}

.snippet .author {
    color: #bbb;
    font-size: 14px;
    margin: 5px 0;
    text-align: center;
}


.url.snippet a.url-read-link-btnfy:hover{
  background:#eee !important;
  border-color:#aaa !important;
  color:#aaa !important;
}


.snippet.pressimus div.press-blurb-text {
    font-family: "proxima-nova",san-serif,helvetica,verdana,arial,futura;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 25px;
    max-width: 100%;
}

.pressimus.snippet a.url-read-link-btnfy {
    background: white none repeat scroll 0 0 !important;
    border: 1px solid #ccc;
    border-radius: 4px;
    color: #ccc !important;
    display: block;
    float: right;
    font-size: 12px;
    margin-right: 10px;
    margin-top: -5px;
    padding: 5px 12px;
    text-decoration: none;
    width: 100px !important;
}

.snippet.pressimus div.press-text {
    -moz-osx-font-smoothing: grayscale;
    font-family: "freight-text-pro",Georgia,Cambria,"Times New Roman",Times,serif;
    font-feature-settings: "liga";
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    letter-spacing: 0.01rem;
    line-height: 1.5;
    text-rendering: optimizelegibility;
}

.pressimus.snippet {
    background-color: #fcfcfc;
    border: 1px solid #ddd;
    border-radius: 4px;
    max-width: 520px;
}

.snippet.instagram a img, .snippet.flickr a img {
	width: 100% !important; /* noticed that in some different web pages where I had an instagram embed
							   it was not expanding to the full-width of the snippet container.  That's
							   what this particular style deals with. */ 
}

.snippet.tidied a img {
    display: block;
    margin: 20px auto 0px;
    max-width: 93% !important;
}

.snippet.tidied a img.big {
  width:600px;
}

.snippet.tidied a img.small {
  height:100px;
  float:left;
  margin:5px 10px 0 21px;
}

.snippet.tidied .title-content {
    display: block;
    margin-bottom:10px;
}

.snippet.tidied .url-header {
    display: block;
    margin-left:10px;
}
.snippet.tidied .provider-favicon {
    margin-right:10px !important;
}

.snippet.tidied a[href*="instagram.com"] img,.snippet.tidied a[href*="flickr.com"] img {
	margin: 0px; /* For instagram we actually want the image to touch the edges of the div, so overriding the above rule for Instagram snippet URLs only */
}

/* Youtube */
.snippet.youtube {
	margin-bottom: 20px; /* added margin because the YouTube snippets were touching snippets below them */
}

.snippet.youtube .video {
	width: 605px !important;
	height: 340px !important;
}


/* Make sure images do not exceed width of container!!! */
.press-text div img {
	max-width: 100%;
}

/* Put some freaking space vertically between elements.  Where do you leave your brain BT?
   Because neither DK or BT thought to put any margin between snippets in a press, I have no 
   choice but to use the immediate child-selector > to give each immediate child div of the .press-text class a margin.
   I did this because I didn't want to go more than one level deep. It's just to put a small bottom margin for each
   press div so they're not stacked so tightly. */
.press-text > div {
	margin-bottom: 20px; 
}

/* Too much space between the press-published-in div and the last press div.  Remove some. */
.press-published-in {
	margin-top: -25px;
}

.pressimus.snippet .press-blurb-text{
  margin-left:10px;
  margin-right:10px;
  font-size:15pt;
  font-weight:400;
}

.profile-image {
    display: block;
    float: left;
}

.pressimus.snippet .profile-image img {
    height: 30px;
    width: 30px;
    border-radius: 50%;
}

.pressimus.snippet .entry-display-name {
    font: 11pt "proxima-nova",san-serif,helvetica,verdana,arial,futura;
    margin-left: 40px;
    margin-top: 15px;
    position: absolute;
}


.pressimus.snippet  .press-meta::after{
    clear: both;
    content: ".";
    display: block;
    height: 0;
    visibility: hidden;
}
.pressimus.snippet .press-meta {
    margin: 0;
    padding: 10px;
    color: #555;
    position: relative;
}

.pressimus.snippet .background-image img {
    background-position: center center;
    background-size: cover;
    left: 0;
    top: 0;
    width: 100%;
}
.press-text img {
    height: auto;
    max-width: 460px;
}

.pressimus.snippet .press-text {
    padding-bottom: 0;
}
.pressimus.snippet  .press-text{
    color: #555;
    font-size: 12pt;
    padding: 10px;
    word-wrap: break-word;
}

.pressimus.snippet a.url-read-link {
    color: #1a95b3 !important;
    display: block;
    margin-left: 10px;
    padding-bottom: 10px;
    padding-top: 10px;
    width: 120px;
}

.url-body-content{
   padding-left: 10px;
    padding-right: 10px;
    position: relative;
}

.url-body-content br{
  display:none;
}

.url.snippet .title-body{
  color: #464646;
    font-size: 14px;
    font-weight: 700;
    position: relative;
}

.url.snippet a.url-read-link-btnfy{
  background: white none repeat scroll 0 0 !important;
    border: 1px solid #ccc;
    border-radius: 4px;
    color: #ccc !important;
    display: block;
    float: right;
    font-size: 12px;
    margin-top: -5px;
    padding: 5px 12px;
    text-decoration: none;
    width: 95px !important;
}

  .snippet-social-author[data-icon]:before {
    display:none;
  }

  .snippet-social-author-svg{
    fill: gray;
    display:block;
    vertical-align: -3px;
    display:inline-block;
     height: 15px;
     margin-top: 5px;
     width: 15px;
  }

.media-excerpt {
    color: #aaa;
    font-style: italic;
    margin-bottom: 20px;
    margin-top: 10px;
}

.press .snippet.media .timestamp {
    display: none;
}



/* Likes */

#likes-inner-new-wrapper{
  margin-bottom:30px;
}

.likes-wrapper{
  margin:30px auto 10px;
  padding:2px;
  height:48px;
  border-top:1px #ccc solid;
  border-bottom:1px #ccc solid;
}
.like-icons{
  text-decoration: none;
  height:28px;
  cursor:pointer;
}

.likes-left-wrapper{
  width:50px;
  float:left;
  display:inline-block;
  margin-top:0px;
  height:48px;

}

.like-star-wrapper{
  width:20px;
  cursor: pointer;
  height:20px;
  float:left;
    margin-left:5% ;
    margin-right:8% ;
}

.like-star-wrapper .active-star{
  display:block;
}

.like-star-wrapper .non-active-star{
  display:none;
}

.like-star-wrapper:hover > .active-star{
  display:none;
}

.like-star-wrapper:hover > .non-active-star{
  display:block !important;
}


.likes-word{
  color:#ccc;
  font-size:12px;
  margin-top:3px;
}

.LikesModalShow{
  text-decoration: none;
}

.likes-number-wrapper{
  font-weight:400;
  font-size:15px;
  margin-top:-5px;
}

.likes-right-wrapper{
  padding-left:10px;
  height:42px;
  max-width:400px;
  border-left:1px solid #ccc;
  display:inline-block;
}

.likers-wrapper{
  display:inline-block;
  width:35px;
  margin:5px;
}

.likers-image-wrapper, .likers-image{
  width:30px;
  border-radius:50%;
}

#likes-modal-inner-wrapper{
  max-height:400px;
  overflow-y:scroll;
}

#Post_chronologicalOrder{
  display: block;
}

.modal-likers-wrapper{
  min-height:70px;
  max-height:120px;
border-top:1px solid #CCC;
padding:10px;
}

.modal-likers-wrapper:hover{
  background:#F7F8FA;
}

.modal-likers-image{
  width:50px;
  border-radius:50%;
}

.modal-likers-username{
  color:#CCC;
}

.modal-likers-wrapper a{
  text-decoration:none;
  color:gray;
}

#likers-load-more{
  text-align:center;
  cursor:pointer;
  padding:10px;
  border:1px solid #ccf;
  background:#f6f6ff;
  color:#669;
  margin:0 7.5%;
}

.likes-notification{
  margin:5px auto;
  border:1px solid #ccc;
  padding:15px;
  max-width:480px;
}


.like-star-wrapper{
  width:20px;
  cursor: pointer;
  height:20px;
  float:left;
    margin-left:5% ;
    margin-right:8% ;
}

.like-star-wrapper .active-star{
  display:block;
}

.like-star-wrapper .non-active-star{
  display:none;
}

.like-star-wrapper:hover > .active-star{
  display:none;
}

.like-star-wrapper:hover > .non-active-star{
  display:block !important;
}

.gold-star::before {
    color: #617a96 !important;
}

[data-icon]::before {
    color: #ccc;
    content: attr(data-icon);
    font-family: "icomoon";
    font-variant: normal;
    font-weight: normal;
    line-height: 1;
    text-transform: none;
    vertical-align: top;
}

.social-container {
    font-size: 20px;
    height: 20px;
    margin-bottom: 15px;
    margin-top: 25px;
    max-width: 300px;
    position: absolute;
    width: 100%;
}

.clearfix::after, .container::after {
    clear: both;
    content: " ";
    display: block;
    height: 0;
    overflow: hidden;
    visibility: hidden;
}
.clearfix, .container {
    display: block;
}


/*hide background image btn*/
.make-background-button{
  display:none;
}


.pr_entry_content p img{
  margin:0px;
}

.url.snippet .url-title img.big{
  margin:0;

}

.url.snippet .url-header-content a {
  color: #464646;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.2px;
  line-height: 34px;
  margin-left: 5px;
  text-decoration: none;
  vertical-align: top;
}

.embed-socials-icon{
  margin:5px 20px 5px 0px;
  display:inline-block;
}
.embed-socials-icon a{
  text-decoration: none;
}

.embed-socials-wrapper{
  margin:10px 0;
}