@charset "utf-8"; /* CSS Document */ /******************************************************************************** Styles for Conversation Speech bubbles ********************************************************************************/ .bubble { position: absolute; width: auto; height: auto; padding: 5px; background: #FFFFFF; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 15px; border: #964541 solid 2px; color: rgba(50,50,50,1.00); text-align: center; -webkit-box-shadow: -2px 2px 10px 2px rgba(0,0,0,0.5); -moz-box-shadow: -2px 2px 10px 2px rgba(0,0,0,0.5); box-shadow: -2px 2px 10px 2px rgba(0,0,0,0.5); } .bubble > p, .bubble > span, .bubble > li { line-height: 18px; } .bubble.pointer-left-center, .bubble.pointer-right-center, .bubble.pointer-left-btm, .bubble.pointer-right-btm, .bubble.pointer-left-top, .bubble.pointer-right-top { min-height: 55px; } /* Use this this for speech bubbles above people on left side of table */ .bubble.pointer-btm-right:after { content: ''; position: absolute; border-style: solid; border-width: 15px 15px 0; border-color: #FFFFFF transparent; display: block; width: 0; z-index: 1; margin-left: -15px; bottom: -15px; left: 80%; } .bubble.pointer-btm-right:before { content: ''; position: absolute; border-style: solid; border-width: 16px 16px 0; border-color: #964541 transparent; display: block; width: 0; z-index: 0; margin-left: -16px; bottom: -18px; left: 80%; } .bubble.pointer-top-right:after { content: ''; position: absolute; border-style: solid; border-width: 0 15px 15px; border-color: #FFFFFF transparent; display: block; width: 0; z-index: 1; margin-left: -15px; top: -15px; left: 80%; } .bubble.pointer-top-right:before { content: ''; position: absolute; border-style: solid; border-width: 0 16px 16px; border-color: #964541 transparent; display: block; width: 0; z-index: 0; margin-left: -16px; top: -18px; left: 80%; } /* Use this this for speech bubbles above people on right side of table */ .bubble.pointer-btm-left:after { content: ''; position: absolute; border-style: solid; border-width: 15px 15px 0; border-color: #FFFFFF transparent; display: block; width: 0; z-index: 1; margin-left: -15px; bottom: -15px; left: 20%; } .bubble.pointer-btm-left:before { content: ''; position: absolute; border-style: solid; border-width: 16px 16px 0; border-color: #964541 transparent; display: block; width: 0; z-index: 0; margin-left: -16px; bottom: -18px; left: 20%; } .bubble.pointer-top-left:after { content: ''; position: absolute; border-style: solid; border-width: 0 15px 15px; border-color: #FFFFFF transparent; display: block; width: 0; z-index: 1; margin-left: -15px; top: -15px; left: 20%; } .bubble.pointer-top-left:before { content: ''; position: absolute; border-style: solid; border-width: 0 16px 16px; border-color: #964541 transparent; display: block; width: 0; z-index: 0; margin-left: -16px; top: -18px; left: 20%; } /* Use this this for speech bubbles centered above people */ .bubble.pointer-btm-center:after { content: ''; position: absolute; border-style: solid; border-width: 15px 15px 0; border-color: #FFFFFF transparent; display: block; width: 0; z-index: 1; margin-left: -15px; bottom: -15px; left: 50%; } .bubble.pointer-btm-center:before { content: ''; position: absolute; border-style: solid; border-width: 16px 16px 0; border-color: #964541 transparent; display: block; width: 0; z-index: 0; margin-left: -16px; bottom: -18px; left: 50%; } /* Use this this for speech bubbles centered below people */ .bubble.pointer-top-center:after { content: ''; position: absolute; border-style: solid; border-width: 0 15px 15px; border-color: #FFFFFF transparent; display: block; width: 0; z-index: 1; margin-left: -15px; top: -15px; left: 50%; } .bubble.pointer-top-center:before { content: ''; position: absolute; border-style: solid; border-width: 0 16px 16px; border-color: #964541 transparent; display: block; width: 0; z-index: 0; margin-left: -16px; top: -18px; left: 50%; } /* Use this this for speech bubbles to the right of people */ .bubble.pointer-left-center:after { content: ''; position: absolute; border-style: solid; border-width: 15px 15px 15px 0; border-color: transparent #FFFFFF; display: block; width: 0; z-index: 1; margin-top: -15px; left: -15px; top: 50%; } .bubble.pointer-left-center:before { content: ''; position: absolute; border-style: solid; border-width: 16px 16px 16px 0; border-color: transparent #964541; display: block; width: 0; z-index: 0; margin-top: -16px; left: -18px; top: 50%; } .bubble.pointer-left-top:after { content: ''; position: absolute; border-style: solid; border-width: 15px 15px 15px 0; border-color: transparent #FFFFFF; display: block; width: 0; z-index: 1; left: -15px; top: 15px; } .bubble.pointer-left-top:before { content: ''; position: absolute; border-style: solid; border-width: 16px 16px 16px 0; border-color: transparent #964541; display: block; width: 0; z-index: 0; left: -18px; top: 14px; } .bubble.pointer-left-btm:after { content: ''; position: absolute; border-style: solid; border-width: 15px 15px 15px 0; border-color: transparent #FFFFFF; display: block; width: 0; z-index: 1; left: -15px; top: 72px; } .bubble.pointer-left-btm:before { content: ''; position: absolute; border-style: solid; border-width: 16px 16px 16px 0; border-color: transparent #964541; display: block; width: 0; z-index: 0; left: -18px; top: 71px; } /* Use this this for speech bubbles to the left of people */ .bubble.pointer-right-center:after { content: ''; position: absolute; border-style: solid; border-width: 15px 0 15px 15px; border-color: transparent #FFFFFF; display: block; width: 0; z-index: 1; margin-top: -15px; right: -15px; top: 50%; } .bubble.pointer-right-center:before { content: ''; position: absolute; border-style: solid; border-width: 16px 0 16px 16px; border-color: transparent #964541; display: block; width: 0; z-index: 0; margin-top: -16px; right: -18px; top: 50%; } .bubble.pointer-right-top:after { content: ''; position: absolute; border-style: solid; border-width: 15px 0 15px 15px; border-color: transparent #FFFFFF; display: block; width: 0; z-index: 1; right: -15px; top: 15px; } .bubble.pointer-right-top:before { content: ''; position: absolute; border-style: solid; border-width: 16px 0 16px 16px; border-color: transparent #964541; display: block; width: 0; z-index: 0; right: -18px; top: 14px; } .bubble.pointer-right-btm:after { content: ''; position: absolute; border-style: solid; border-width: 15px 0 15px 15px; border-color: transparent #FFFFFF; display: block; width: 0; z-index: 1; right: -15px; top: 72px; } .bubble.pointer-right-btm:before { content: ''; position: absolute; border-style: solid; border-width: 16px 0 16px 16px; border-color: transparent #964541; display: block; width: 0; z-index: 0; right: -18px; top: 71px; }