root {
    display: block;
}
html{
    /*    overflow: hidden*/
}
#footer-content {
    height: auto !important;
    overflow: visible !important; /* Allow the content to grow */
    display: block;
    padding:1em 1em 1em 1em;
}
.show-comment-span, .shw-comment{
    overflow: visible !important; /* Allow the content to grow */
    height: auto !important;

}
body{
    -moz-background-size:cover;
    -ms-background-size:cover;
    -o-background-size:cover;
    -webkit-background-size:cover;
    background-size:cover;
    border:0;
    color:black;
    font-family:Arial,Calibri,Helvetica,sans-serif,Lobster;
    font-size:100%;
    font-size:11.5px;
    margin:0;
    padding:0;
}
.total-Comnts{
    color:blue;
    cursor: pointer;
    outline:none;
    text-decoration: none;
}
a{
    color:blue;
    cursor: pointer;
    outline:none;
    text-decoration: none;
}
a:link,a:visited{
    color:blue;
    cursor: pointer;
    outline:none
}
a:hover{
    color:darkblue;
    cursor: pointer;
}
a:active,a:focus{
    color:blue;
    outline:none;
}

#comments{
    height:150px;
    width:308px;
}
#comnt{
    background:url("../images/default-sprite.png")-205px 115px;
    height:113px;
    width:78px;
}
#comnt-count{
    color:darkblue;
    font-size:16px;
    font-weight:bold;
    padding-bottom:65px;
    padding-left:20px;
}
.empty-cell{
    width:175px
}
#face-book-img{
    background:url("../images/default-sprite.png")-15px 115px;
    height:113px;
    width:71px;
}
#twitter-img{
    background:url("../images/default-sprite.png")-115px 115px;
    height:113px;
    width:75px;
}
#twitterlike{
    padding-left: 10px
}
#add-comment{
    text-align:left;
}
.timeline{
    margin-left:-40px;
}
.show-comment-span{
    background-color: #D1F9FC;
    display: block;
    left: 50%;
    margin: .7% auto 0 auto;
    width: 99%
}
.comment-reply{
    background-color: #D1F9FC;
    display: block;
    margin: .7% 0 0% 14.7%;
    width: 85.2%;
}
.author{
    -moz-border-radius:5px;
    -moz-box-shadow:2px 2px 3px black,-2px -2px 5px lightblue;
    -ms-border-radius:5px;
    -ms-box-shadow:2px 2px 3px black,-2px -2px 5px lightblue;
    -o-border-radius:5px;
    -o-box-shadow:2px 2px 3px black,-2px -2px 5px lightblue;
    -webkit-border-radius:5px;
    -webkit-box-shadow:2px 2px 3px black,-2px -2px 5px lightblue;
    background:url("../images/default-sprite.png")-184px 284px;
    border-radius:5px;
    box-shadow:2px 2px 3px black,-2px -2px 5px lightblue;
    height: 55px;
    margin: 10px 0 0 10px;
    width: 45px;
}
.default-user{
    height:50px;
    margin:10px 0 3px 7px;
    width:45px;
}
.shw-comment,.page{
    -moz-border-radius-topleft:20px;
    -moz-border-radius-topright:20px;
    -moz-box-shadow:2px 2px 5px black,-2px -2px 5px lightblue;
    -ms-border-radius-topleft:20px;
    -ms-border-radius-topright:20px;
    -ms-box-shadow:2px 2px 5px black,-2px -2px 5px lightblue;
    -o-border-top-left-radius:20px;
    -o-border-top-right-radius:20px;
    -o-box-shadow:2px 2px 5px black,-2px -2px 5px lightblue;
    -webkit-border-top-left-radius:20px;
    -webkit-border-top-right-radius:20px;
    -webkit-box-shadow:2px 2px 5px black,-2px -2px 5px lightblue;
    border-top-left-radius:20px;
    border-top-right-radius:20px;
    box-shadow:2px 2px 5px black,-2px -2px 5px lightblue;
    margin-bottom:1px;
}
#your-name, #your-email, #your-website{
    height:15px;
    width:247px;
}
#valid-tags{
    display: block;
    text-align: center;
    width: 247px;
}
input[type=text]{
    font-size:12px;
    height:15px
}
input[type=submit]{
    font-size:12px;
    height:25px;
}
label{
    font-weight:bold
}
#user-comments, #user-comments-rp{
    font-size:11px;
    margin:-60px 0px 0 70px;
    padding:10px 10px 10px 0px;
    text-align:justify;
    white-space: pre;           /* CSS 2.0 */
    white-space: pre-wrap;      /* CSS 2.1 */
    white-space: pre-line;      /* CSS 3.0 */
    white-space: -pre-wrap;     /* Opera 4-6 */
    white-space: -o-pre-wrap;   /* Opera 7 */
    white-space: -moz-pre-wrap; /* Mozilla */
    white-space: -hp-pre-wrap;  /* HP Printers */
    white-space: -moz-pre-wrap !important;   /* Mozilla*/
    word-wrap: break-word;      /* IE 5+ */
    word-break: break-all;
    width: 86.5%;
}
#user-comments-rp{
    width: 570px;
}
#user-comments-td::-moz-selection{
    background:yellow
}
#user-comments-td::selection{
    background:yellow
}
#comment-name{
    -moz-border-radius-topleft:20px;
    -moz-border-radius-topright:20px;
    -ms-border-radius-topleft:20px;
    -ms-border-radius-topright:20px;
    -o-border-radius-topleft:20px;
    -o-border-radius-topright:20px;
    -webkit-border-top-left-radius:20px;
    -webkit-border-top-right-radius:20px;
    background-color: #5678B8;
    border-top-left-radius:20px;
    border-top-right-radius:20px;
    color: white;
    font-size:11px;
    font-weight: bold;
    padding-left:15px;
    text-align: justify;
}
#reply-btn{
    padding-right:15px;
    padding-bottom:10px;
    margin-bottom: 10px;
}
#comment-date{
    float: right;
    padding-right:15px;
}
#flash{
    text-align: center;
    vertical-align: middle;
}
.star{
    color:red;
    font-size:18px;
    font-weight:bolder
}
#submit-comnt{
    left: 50%;
    margin-top: 10px;
    width:120px;
}
#comment-page{
    -moz-box-shadow:2px 2px 3px black,-2px -2px 5px lightblue;
    -ms-box-shadow:2px 2px 3px black,-2px -2px 5px lightblue;
    -o-box-shadow:2px 2px 3px black,-2px -2px 5px lightblue;
    -webkit-box-shadow:2px 2px 3px black,-2px -2px 5px lightblue;
    box-shadow:2px 2px 3px black,-2px -2px 5px lightblue;
    min-height: 550px;
    left: 50%;
    margin:20px auto 0 auto;
    padding-top: 10px;
    width:420px;
}
#likes-table{
    margin-right:8px
}
.smilies{
    background: url("../images/smilies-sprite.png");
    cursor: pointer;
    display: inline-block;
    height: 22px;
    margin-bottom: -7px;
    width: 24px;
}
#alien{
    background-position: -10px -10px;
}
#angel{
    background-position: -40px -10px;
}
#angry{
    background-position: -70px -10px;
}
#broken-heart{
    background-position: -104px -10px;
}
#cat{
    background-position: -136px -10px;
}
#clown{
    background-position: -169px -10px;
}
#confused{
    background-position: -200px -10px;
}
#cool{
    background-position: -233px -10px;
}
#crying{
    background-position: -264px -10px;
}
#cup{
    background-position: -294px -10px;
}
#dog{
    background-position: -10px -50px;
}
#drunk{
    background-position: -42px -50px;
}
#fish{
    background-position: -73px -50px;
}
#football{
    background-position: -100px -50px;
}
#frown{
    background-position: -138px -50px;
}
#glasses{
    background-position: -168px -50px;
}
#greedy{
    background-position: -202px -50px;
}
#smile{
    background-position: -233px -50px;
}
#big-smile{
    background-position: -264px -50px;
}
#heart{
    background-position: -296px -50px;
}
#hug{
    background-position: -10px -90px;
    width: 37px;
}
#joking{
    background-position: -69px -90px;
    width: 26px;
}
#king{
    background-position: -104px -90px;
}
#kiss{
    background-position: -136px -90px;
}
#kissing{
    background-position: -168px -90px;
    width: 30px;
}
#lol{
    background-position: -204px -90px;
}
#mad{
    background-position: -233px -90px;
}
#mouse{
    background-position: -264px -90px;
}
#napping{
    background-position: -297px -90px;
}
#nerd{
    background-position: -9px -130px;
}
#pig{
    background-position: -40px -130px;
}
#princess{
    background-position: -70px -130px;
}
#queen{
    background-position: -104px -130px;
}
#rose{
    background-position: -136px -130px;
}
#sad{
    background-position: -168px -130px;
}
#smoking{
    background-position: -202px -130px;
}
#tongue-out{
    background-position: -233px -130px;
}
#surprised{
    background-position: -265px -130px;
}
#tired{
    background-position: -294px -130px;
    width: 26px;
}
#us-flag{
    background-position: -10px -170px;
    margin-bottom: -5px;
}
#pk-flag{
    background-position: -40px -170px;
    margin-bottom: -5px;
}
#vampire{
    background-position: -72px -170px;
    margin-bottom: -5px;
}
#yawn{
    background-position: -104px -170px;
}
#devil{
    background-position: -136px -170px;
    margin-bottom: -6px;
}
#spam{
    background-position: -169px -170px;
    margin-bottom: -6px;
}
#robot{
    background-position: -201px -170px;
}
#shark{
    background-position: -232px -170px;
}
#penguin{
    background-position: -264px -170px;
}
#fingers-cross{
    background-position: -294px -168px;
}
#show-smilies-div{
    display: none;
}
blockquote{
    font: 12px/20px normal helvetica, sans-serif;
    margin: 3% 5.5% 7% 0%;
}
blockquote:first-letter{
    font-size: 30px;
}
.quote-start{
    background: url("../images/default-sprite.png") -56px -145px;
    display: block;
    float: left;
    height: 95px;
    margin-top: -0.8%;
    width: 62px;
}
.quote-end{
    background: url("../images/default-sprite.png") -116px -148px;
    display: block;
    float: right;
    height: 92px;
    margin-right: -3.5%;
    margin-top: -14%;
    width: 65px;
    z-index: 99999;
}
code{
    background-color: snow;
    font-weight: bold
}

/* FIX 1: Clearfix - Forces containers to expand to full height of floated text */
.shw-comment::after,
.comment-reply::after,
.reply-container::after {
    content: "";
    display: table;
    clear: both;
}

/* FIX 2: Prevent clipping */
.shw-comment, .comment-reply {
    height: auto !important;
    min-height: 100px; /* Ensures space for the user icon */
    overflow: visible !important;
    display: block;
}

/* FIX 3: Adjust the comment text block */
#user-comments, #user-comments-rp {
    float: left;
    position: relative;
    /* Use a safer margin; if -60px is needed for your layout, 
       ensure the parent has 'padding-bottom' to compensate */
    margin: -55px 0px 10px 75px;
    width: 80%; /* Responsive width is safer than fixed pixels */
}
/* FIX 4: Remove fixed height from the form container */
#comment-page {
    height: auto !important;
    min-height: 550px;
    padding-bottom: 20px;
}
/* FIX 5: Ensure the reply container doesn't overlap */
.reply-container {
    clear: both;
    display: block;
    height: 95%;
    width: 90%;
}
/* FIX 6: Ensure the reply container doesn't overlap */
#user-comments, #user-comments-rp {
    float: left;
    font-size: 11.5px; /* Matched to your body font size */
    /* Remove the -60px margin; use relative positioning if needed */
    margin: 5px 0 10px 70px;
    padding: 0 10px 10px 0;
    text-align: justify;
    word-wrap: break-word;
    width: 82%; /* Slightly reduced to prevent overflow */
    display: block;
    min-height: 20px;
}
/* FIX 7: Ensure the reply container doesn't overlap */
/* Ensure the container clears the float so the background color shows */
.shw-comment::after, .comment-reply::after {
    content: "";
    display: table;
    clear: both;
}

.pagin-btn {
    padding: 5px 12px;
    background: #007bff;
    color: #fff !important;
    text-decoration: none;
    border-radius: 3px;
    font-size: 13px;
}
.reply-container {
    margin-left: 50px;
    border-left: 2px solid #ddd;
    padding-left: 15px;
    margin-top: 10px;
}
#replying-to {
    display:none;
    background:#e9ecef;
    padding:8px;
    margin-bottom:10px;
    border-radius:4px;
    border-left:4px solid #007bff;
    text-align: left;
    width: 80%;
}