/*
********************************************************************************
********************** BUBBLES *************************************************
********************************************************************************
*/

div.pro-bubble{
   background-color: rgb(165, 180, 157);
}

div.contra-bubble{
   background-color: #D57A72;
}

div.neutral-bubble{
   background-color: rgb(222, 222, 221);
}

p.bubble-text{
   font-weight: normal;
}

div.big-bubble a, div.medium-bubble a{
   color: #000;
   cursor: pointer;
}

div.big-bubble a:active, div.medium-bubble a:active{
   color: #444;
}

div.big-bubble a:hover, div.medium-bubble a:hover{
   text-decoration: underline;
}

div.medium-bubble p.bubble-author-description, div.big-bubble p.bubble-author-description {
   border: none;
   display : block;
   margin : 0;
}

/*
********************************************************************************
********************** BIG BUBBLES *********************************************
********************************************************************************
*/

div.big-bubble{
   color: #000;
   padding: 10px 10px 30px;
   border-radius: 10px;
   -moz-box-shadow: 10px 10px 5px rgba(100, 100, 100, 0.6);
   -webkit-box-shadow: 10px 10px 5px rgba(100, 100, 100, 0.6);
   box-shadow: 10px 10px 5px rgba(100, 100, 100, 0.6);
   position: relative;
   margin-bottom: 45px;
   margin-right: 105px;
   width: 97%;
}

div.big-bubble div.bubble-body{
   border-top: 5px solid #000;
   border-bottom: 5px solid #000;
   padding: 10px 0;
   font-size: 15px;
   margin-bottom: 10px;
   font-weight: normal;
}

div.big-bubble.pro-bubble:after {
	content: url('../png/spike-green.png');
	position: absolute;
	bottom:  -34px; /* value = - border-top-width - border-bottom-width */
	left: 25px; /* controls horizontal position */
}

div.big-bubble.contra-bubble:after {
	content: url('../png/spike-red.png');
	position: absolute;
	bottom:  -34px; /* value = - border-top-width - border-bottom-width */
	left: 25px; /* controls horizontal position */
}

div.big-bubble.neutral-bubble:after {
	content: url('../png/spike-grey.png');
	position: absolute;
	bottom:  -34px; /* value = - border-top-width - border-bottom-width */
	left: 25px; /* controls horizontal position */
}

div.big-bubble div h1{
   font-size: 20px;
   margin: 0;
   padding: 0;
}

div.big-bubble > div.argument-text,
div.big-bubble > p{
   border-bottom: 1px solid #000;
   display: inline;
   font-size: 16px;
   margin: 10px 15px 10px 0;
   padding: 3px 0;
}

div.big-bubble div.argument-text img{
   display: block;
   margin: 5px auto;
   width: 460px;
}

div.big-bubble > p.float-right,
div.big-bubble > div.argument-text.float-right{
   margin-left: 105px;
   margin-top: 3px;
}

div.big-bubble p.bubble-author{
   font-weight: bold;
   font-size: 12px;
   color: #000;
   margin: 0 0 10px;
   border: none;
}

div.big-bubble p.bubble-author-description{
   font-size: 12px;
}

.big-bubble img.thumb-image {
   width: 16px;
   vertical-align: top;
   margin: 5px 7px 0;
}

.big-bubble p.comment-count img.thumb-image {
  width: 20px;
  vertical-align: top;
  margin: 7px 5px 0;
}

.big-bubble span.count{
   font-weight: bold;
   font-size: 24px;
}


/*
********************************************************************************
********************** MEDIUM BUBBLES ******************************************
********************************************************************************
*/

div.medium-bubble.pro-bubble:after {
	content: url('../png/spike-green-medium.png');
	position: absolute;
	bottom:  -34px; /* value = - border-top-width - border-bottom-width */
	left: 25px; /* controls horizontal position */
}

div.medium-bubble.contra-bubble:after {
	content: url('../png/spike-red-medium.png');
	position: absolute;
	bottom:  -34px; /* value = - border-top-width - border-bottom-width */
	left: 25px; /* controls horizontal position */
}

div.medium-bubble.neutral-bubble:after {
	content: url('../png/spike-grey-medium.png');
	position: absolute;
	bottom:  -34px; /* value = - border-top-width - border-bottom-width */
	left: 25px; /* controls horizontal position */
}

div.medium-bubble{
   color: #000;
   padding: 15px 15px 15px;
   border-radius: 10px;
   -moz-box-shadow: 10px 10px 5px rgba(100, 100, 100, 0.6);
   -webkit-box-shadow: 10px 10px 5px rgba(100, 100, 100, 0.6);
   box-shadow: 10px 10px 5px rgba(100, 100, 100, 0.6);
   position: relative;
   margin: 0 0 55px 0;
   width: 485px;
   height: 190px;
   cursor: pointer;
}

div.medium-bubble.align-left{
   margin-right: 105px;
   clear: right;
}

div.medium-bubble.align-right{
   margin-left: 105px;
   clear: left;
}

div.medium-bubble div.bubble-body{
   border-top: 5px solid #000;
   padding: 10px 0 10px;
   font-size: 12px;
   font-weight: normal;
   position: absolute;
   margin-bottom: 10px;
   top: 45px;
   width: 490px;
   left: 10px;
}

div.medium-bubble div.bubble-body > p,
div.medium-bubble div.bubble-body > div.argument-text{
   max-height: 67px;
   overflow: hidden;
   margin: 5px 0;
}

div.medium-bubble div.bubble-body > div.argument-text{
   margin-top: 0;
}

div.medium-bubble div.bubble-body > div.argument-text p,
div.medium-bubble div.bubble-body > p p{
   margin: 0;
}

div.medium-bubble > p,
div.medium-bubble > div.argument-text{
   border-bottom: 1px solid #000;
   display: inline;
   font-size: 12px;
   margin: 10px 15px 10px 0;
   padding: 3px 0;
}

div.medium-bubble div.argument-text img.medium-bubble-thumbnail{
   float: left;
   margin: 3px 7px 0 0;
}

div.medium-bubble div h1{
   font-size: 12px;
   margin: 0;
   padding: 0;
}

div.medium-bubble p.bubble-author{
   font-weight : bold;
   color: #000;
   margin: 0 0 10px;
   border: none;
   margin: 0;
   font-size: 11px;
}

div.bubble-author-data{
   line-height: 12px;
   margin-bottom: 5px;
   border: none;
}

div.medium-bubble div.bubble-author-data{
   position: absolute;
   bottom: 175px;
   left: 10px;
}

div.medium-bubble p.bubble-author-description {
   font-size: 11px;
}

div.medium-bubble p.bubble-author span.date{
   font-size: 10px;
   color: #000;
}

.medium-bubble img.thumb-image {
   width: 12px;
   vertical-align: top;
   margin: 5px 7px 0;
}

.medium-bubble p.comment-count img.thumb-image{
   width: 15px;
}

.medium-bubble span.count{
   font-weight: bold;
   font-size: 20px;
}

div.medium-bubble div.bubble-footer{
   position: absolute;
   bottom: 0;
   left: 10px;
   right: 10px;
   padding: 10px 0 10px;
   border-top: 5px solid #000;
}

div.medium-bubble div.bubble-footer p{
   display: inline;
   font-size: 12px;
   margin: 10px 15px 10px 0;
   padding: 3px 0;
}

div.medium-bubble div.bubble-footer p.comment-count{
   margin: 0;
   padding: 0;
}

/*
********************************************************************************
********************** MAIN ARTICLE VOTE BUBBLES *******************************
********************************************************************************
*/

div.vote-bubble, button.thumb-up, button.thumb-down, div.vote-desc {
   color: #000;
   padding: 5px 15px;
   -moz-box-shadow: 10px 10px 5px rgba(100, 100, 100, 0.6);
   -webkit-box-shadow: 10px 10px 5px rgba(100, 100, 100, 0.6);
   box-shadow: 10px 10px 5px rgba(100, 100, 100, 0.6);
   margin: 0 25px 25px 0;
   position: relative;
   font-size: 16px;
   font-weight: bold;
}

div.vote-bubble {
   width: 155px;
   padding: 2px 10px;
   border-radius: 10px;
   font-size: 33px;
}

div.vote-bubble p{
   margin: 0 auto;
   text-align: center;
}

div.vote-bubble.contra-bubble {
   margin: 0 0 25px 35px;
   width: 170px;
}

div.vote-desc{
   margin-bottom: 15px;
   clear: right;
}

div.vote-desc.first-vote-desc{
   position: relative;
   right: 30px;
   margin-top: 10px;
   margin-bottom: 5px;
}

div.vote-bubble:after {
	position: absolute;
	bottom:  -40px; /* value = - border-top-width - border-bottom-width */
	left: 10px; /* controls horizontal position */
}

div.vote-bubble.pro-bubble:after {
	content: url('../png/spike-green-comment.png');
}

div.vote-bubble.contra-bubble:after {
	content: url('../png/spike-red-comment.png');
}

button.thumb-up, button.thumb-down, div.vote-desc {
   float:right;
   border: none;
   color: #000;
}

button.thumb-up.voted, button.thumb-down.voted{
   -moz-box-shadow: inset 0 0 5px #888;
   -webkit-box-shadow: inset 0 0 5px #888;
   box-shadow: inset 0 0 5px #888;
}

button.thumb-up:active, button.thumb-down:active{
   text-decoration: underline;
}

button.thumb-down {
   clear: both;
}

.bubble-social-media{
   float: right;
   margin-right: -30px;
}

.comment .bubble-social-media{
   display:none;
}

div.hidden-bubble {
   background-color: rgb(192, 192, 192);
   color: #fff;
}

div.big-bubble.hidden-bubble:after {
   content: url('../png/spike-darkgrey.png');
}

div.medium-bubble.hidden-bubble:after {
   content: url('../png/spike-darkgrey-medium.png');
}