/*########### STYLE SHEET FOR MY CHAT #################*/

/*Global Settings*/

body {
margin:10px;
padding:0;
background-image: -webkit-gradient(
	linear,
	left top,
	left bottom,
	color-stop(0, #6F756F),
	color-stop(1, #0C0D0C)
);
background-image: -o-linear-gradient(bottom, #6F756F 0%, #0C0D0C 100%);
background-image: -moz-linear-gradient(bottom, #6F756F 0%, #0C0D0C 100%);
background-image: -webkit-linear-gradient(bottom, #6F756F 0%, #0C0D0C 100%);
background-image: -ms-linear-gradient(bottom, #6F756F 0%, #0C0D0C 100%);
background-image: linear-gradient(to bottom, #6F756F 0%, #0C0D0C 100%);
}
/*############ BOOT CSS COMP ########*/
/*##### Addtional form Styling####*/
.form_background {
  background: rgba(236,237,230,0.2) ;
  padding: 6px; 
  -webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px; 
}
.bg-red {
background: red;    
}
.bg-blue {
background: blueviolet;    
}
.bg-yellow {
 background: yellow;   
}
.user_centre {
text-align: center;    
}
.border {
 border: 1px solid #333;    
}
.padding {
padding: 4px;    
}

/*##### MAIN DIVS #############*/
#main_wrapper { 
text-align: center; 
height: 36em;
  
}

h1,h2,h3 {
display: inline-block; 
margin: 0;
padding: 0;
text-decoration: underline;
}

#left_content { 
margin-top: 1em;
 float: left;
 text-align: left;
 width: 48%; 
 display: inline-block; 
}

#left_content p {
 padding: 0;
margin: 0;   
 text-align: left;
 line-height: 85%;   
}

#right_content {
margin-top: 1em;
 float: right;
 text-align: left; 
 width: 48%;  
  display: inline-block; 
}
#right_content p { 
padding: 0;
margin: 0;
 text-align: left;
 line-height: 125%;   
}


/*############  FONTS  ###########################*/
@font-face {
 font-family: MyCustomFont;
 src: url("../fonts/JennaSue.eot") /* EOT file for IE */
}
@font-face {
 font-family: MyCustomFont;
 src: url("../fonts/JennaSue.ttf") /* TTF file for CSS3 browsers */
}

/*###### CLASSES ##############*/
.speech
{
	position: relative;
    margin: 0 auto;    
	width: 85%;
	height:;
    max-height:;
	text-align: center;
	line-height:;
	color: #fff;
    
	border: 8px solid #666;
	-webkit-border-radius: 30px;
	-moz-border-radius: 30px;
	border-radius: 30px;
	-webkit-box-shadow: 2px 2px 4px #888;
	-moz-box-shadow: 2px 2px 4px #888;
	box-shadow: 2px 2px 4px #888;
    font-family:MyCustomFont, 'Courgette', cursive, Verdana, Arial, sans-serif;
    font-size: 1.6em;
    letter-spacing: 1.5px;
    line-height: 80%;
    background-image: -webkit-gradient(
	linear,
	left top,
	left bottom,
	color-stop(0, #F1C4F5),
	color-stop(1, #8B5DB3)
);
background-image: -o-linear-gradient(bottom, #F1C4F5 0%, #8B5DB3 100%);
background-image: -moz-linear-gradient(bottom, #F1C4F5 0%, #8B5DB3 100%);
background-image: -webkit-linear-gradient(bottom, #F1C4F5 0%, #8B5DB3 100%);
background-image: -ms-linear-gradient(bottom, #F1C4F5 0%, #8B5DB3 100%);
background-image: linear-gradient(to bottom, #F1C4F5 0%, #8B5DB3 100%);

-moz-transform: rotate(2deg);
-webkit-transform: rotate(2deg);
-o-transform: rotate(2deg);
-ms-transform: rotate(2deg);
transform: rotate(2deg);

}

.speech:before
{
	content: ' ';
	position: absolute;
	width:;
	height:;
    right: 30px;
	top: 100%;
	border: 25px solid;
	border-color: #666 transparent transparent #666;
}

.speech:after
{
	content: ' ';
	position: absolute;
	width: 0;
	height: 0;
	right: 42px;
	top: 100%;
	border: 15px solid;
	border-color: #8B5DB3 transparent transparent #8B5DB3;
}
/*########################### SPEECH RIGHT #####################################*/
.speech_right
{   
	position: relative;
    margin: 0 auto;
	width: 85%;
	height:;
    max-height: ;
	text-align: center;
	line-height:;
	color: #000;
	border: 8px solid #666;
	-webkit-border-radius: 30px;
	-moz-border-radius: 30px;
	border-radius: 30px;
	-webkit-box-shadow: 2px 2px 4px #888;
	-moz-box-shadow: 2px 2px 4px #888;
	box-shadow: 2px 2px 4px #888;
    font-family: 'Bad Script', cursive, Verdana, Arial, sans-serif;
    background-image: -webkit-gradient(
	linear,
	right top,
	left top,
	color-stop(0, #D0CAED),
	color-stop(1, #8262D9)
);
background-image: -o-linear-gradient(left, #D0CAED 0%, #8262D9 100%);
background-image: -moz-linear-gradient(left, #D0CAED 0%, #8262D9 100%);
background-image: -webkit-linear-gradient(left, #D0CAED 0%, #8262D9 100%);
background-image: -ms-linear-gradient(left, #D0CAED 0%, #8262D9 100%);
background-image: linear-gradient(to left, #D0CAED 0%, #8262D9 100%);

-moz-transform: rotate(-2deg);
-webkit-transform: rotate(-2deg);
-o-transform: rotate(-2deg);
-ms-transform: rotate(-2deg);
transform: rotate(-2deg);
}

.speech_right:before
{
	content: ' ';
	position: absolute;
	width: 0;
	height: 0;
	left: 30px;
	top: 100%;
	border: 25px solid;
	border-color: #666 transparent transparent #666;
}

.speech_right:after
{
	content: ' ';
	position: absolute;
	width: 0;
	height: 0;
	left: 38px;
	top: 100%;
	border: 15px solid;
	border-color: #8262D9 transparent transparent #8262D9;
}

.span_left { 
 position: relative;
 left: 65%; 
 bottom: -50px;   
}
.span_right { 
 position: relative;
 left: 5%;  
 bottom: -50px;   
}

.pubdate_text { background:#B4CDCD;
font-size:80%;
float: right;
padding:4pt;

}
.spill_over {
 padding: 4px;   
}

.image_rotate {
 -moz-transform: rotate(-20deg);
-webkit-transform: rotate(-20deg);
-o-transform: rotate(-20deg);
-ms-transform: rotate(-20deg);
transform: rotate(-20deg);  
}

.image_rotate_1 {
 -moz-transform: rotate(30deg);
-webkit-transform: rotate(30deg);
-o-transform: rotate(30deg);
-ms-transform: rotate(30deg);
transform: rotate(30deg);  
}

/*#####Spinner CSS #################################*/
.spinner {
height:32px;
width:32px;
margin:120px auto;
position:relative;
-webkit-animation: rotation 1s infinite linear;
-moz-animation: rotation 1s infinite linear;
-o-animation: rotation 1s infinite linear;
animation: rotation 1s infinite linear;
border-left:2px solid rgba(0,174,239,.15);
border-right:2px solid rgba(0,174,239,.15);
border-bottom:2px solid rgba(0,174,239,.15);
border-top:2px solid rgba(0,174,239,.8);
border-radius:100%;
}

@-webkit-keyframes rotation {
from {-webkit-transform: rotate(0deg);}
to {-webkit-transform: rotate(360deg);}
}

@-moz-keyframes rotation {
from {-moz-transform: rotate(0deg);}
to {-moz-transform: rotate(360deg);}
}

@-o-keyframes rotation {
from {-o-transform: rotate(0deg);}
to {-o-transform: rotate(360deg);}
}

@keyframes rotation {
from {transform: rotate(0deg);}
to {transform: rotate(360deg);}
}




/* ################  VISITOR COUNER   ########################### */

.visitorcounter {
width:;
background:rgba(51,51,51,0.2);
font-size:110%;
padding:2px;
/*-webkit-border-top-right-radius:20px;
-webkit-border-bottom-left-radius:20px;
-moz-border-radius-topright:20px;
-moz-border-radius-bottomleft:20px;
border-top-right-radius:20px;
border-bottom-left-radius:20px;*/
}

#footer {
width:100%;
font-size:65%;
clear:both;
text-align:center;
position: relative;
bottom: -50px;

}

#footer p {
margin:0;
}

/*#################### Multi Media Settings ###########*/
@media screen and (max-width:959px) {
     #main_wrapper {
      width: 45%;  
    }
    
    #main_wrapper {
        width: 100%;
        font-size: 90%;
    }

   #left_content {
    width: 100%;
   }

   #right_content {
    width: 100%;
   }