#pageText {
    margin: 0 50% 0 0;
    position: relative;
}

.wc-webchat {
    width: 380px;
    position: fixed;
    bottom: 0;
    right: 20px;
    background-color: #fff;
    z-index: 99;
    background-image: none;
}

.wc-chatbox {
    /*height: 380px;*/
    padding: 10px 10px 0 10px;
    max-width: 450px;
    margin: 0 auto 50px auto !important;
}

.wc-webchat .wc-ctistatus {
    font: status-bar;
    font-size: 14px;
    display: block;
    line-height: 0;
}

.wc-webchat > header {
    background-color: #666;
    color: #fff;
    text-indent: 34px;
    font-size: 16px;
    line-height: 42px;
    cursor: pointer;
    background-image: none;
    margin: 0;
    border:none;
}

header .wc-buttons {
    float: right;
    margin-right: 0;
    border: none;
}

.wc-buttons a, .wc-buttons a:visited {
    font-size: 32px;
    padding: 2px;
    color: #ccc;
    text-decoration: none;
    margin-right: 8px;
    background-color: #666;
    border: none;
}

    .wc-buttons a:hover {
        background-color: #666;
        color: #fff;
    }

.wc-status {
    height: auto;
    font-size: 14px;
    text-align: left;
    color: #666;
    line-height: 28px;
    padding: 0;
    margin: 0;
}

.wc-error {
    background-color: #FF9999;
    color: #A60000;
    border: 1px solid #A60000;
    padding: 0;
}

.wc-webchat .wc-chatbox section {
    padding: 20px;
    /* margin: 24px -16px 0 -16px; */
    background: #f6f7f8;
    height: auto;
    border: 1px dashed #ccc;
}

.wc-history {
    list-style-type: none;
    padding-left: 0;
    overflow-y: auto;
    height: 200px;
    margin: 2px 0;
    border: 1px solid #999;
    background: #fff;
    font-size: 16px;
}

    .wc-history li {
        padding: 5px;
        margin: 0 5px 5px 0;
        color: #000;
    }

        .wc-history li.wc-local {
            color: #8D8D8C;
        }

.wc-name:after {
    content: ':';
}

.wc-name-input {
    width: 270px;
}

.wc-history li .wc-name {
    display: block;
    color: #333;
}

.wc-history li.wc-local .wc-name {
    color: #8D8D8C;
}

.wc-history li .wc-name.wc-consecutive {
    display: none;
}

.wc-typing {
    height: 32px;
    width: 100%;
    color: #000;
    background-color: transparent;
    font-style: italic;
    text-indent: 20px;
    border: none;
}

textarea.wc-message {
    width: 100%;
    min-width: 100%;
    max-width: 100%;
    height: 60px;
    border: 1px solid #999;
    margin: 0;
    font-size: 16px;
}

.wc-webchat fieldset {
    margin: 15px 0 0 0;
    border: 0;
    padding: 0;
}

.wc-webchat legend {
    display: none;
}
.wc-webchat input {
	font-size: 16px;
}
.wc-webchat fieldset input {
    height: 32px;
    width: 100%;
    padding: 1px 7px 1px 8px;
    min-width: auto;
}

.wc-initiate, .wc-terminate {
    color: #000;
    border: 1px solid #999;
    width: 120px;
    height: 32px;
    background-color: #E3E3AA;
}

    .wc-initiate:hover, .wc-terminate:hover {
        background-color: #FFFFDE;
    }

.wc-initiating p {
    margin-right: 22px;
}

.wc-transcript {
    float: left;
    font-size: 80%;
    color: #2C2C2C;
    line-height: 28px;
    text-decoration: underline;
    cursor: pointer;
}

.wc-progress, .wc-announcement, .wc-welcome {
    font-style: italic;
    font-size: 14px;
    color: #2C2C2C;
    margin: 0;
    padding: 0;
}
.wc-progress {
	color: #000;
}




#chatTemplate {
    display: none;
}

.wc-webchat h3 {
    margin: 20px 0 20px 0;
    font-family: Arial, Helvetica, sans-serif;
    font-size: .9em;
    color: #666;
    font-weight: normal;
    display: block;
}

@media only screen and (max-width : 815px), only screen and (max-device-width : 815px) {
    .wc-webchat {
        width: 380px;
        position: fixed;
        bottom: 0;
        left: 60px;
        background-color: #fff;
        z-index: 99;
        background-image: none;
    }

    #pageText {
        margin: 0 20% 0 0;
        position: relative;
    }
}
























html {
    font-family: sans-serif
}

body {
    margin: 0;
    padding: 0;
    font-size: .9em;
    line-height: 1.1em;
    background-image: url(/images/webchat/flower.png);
    background-repeat: no-repeat;
    color: #333;
}

#nowebchat {
    height: 40px;
    line-height: 40px;
    font-size: 20px;
    text-align: center;
    background-color: orangered;
    margin: 2px;
    border: red solid 1px;
    display: none;
}

#menuPageIndex, #menuPageIndex:visited {
    font: italic bold 18px/30px Verdana, Arial;
    color: #666;
    text-decoration: none;
}

    #menuPageIndex:hover {
        font: italic bold 18px/30px Verdana, Arial;
        color: #000;
    }

    #menuPageIndex, #menuPageIndex:visited, #menuPageIndex:hover {
        text-decoration: none;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 12px;
        color: #999;
        font-weight: normal;
        background: url(/images/webchat/backArrow.png) no-repeat left center;
        padding: 0px 0px 0px 20px;
    }

#navBack {
    margin: 60px 100px 0px 60px;
    position: relative;
}

#menuPageIndex:hover {
    color: blue;
    background: url(/images/webchat/backArrowHover.png) no-repeat left center;
}

.wc-webchat h1 {
    margin: 20px 0px 20px 0px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 20px;
    color: #666;
    display: block;
}

/*....................Default Example..............................*/

.wc-name-input {
    height: 32px;
    width: 270px;
    padding: 0 0 0 8px;
    margin: 20px 0 0 -2px;
}

.wc-initiating {
    /* margin-top: 50px; */
    height: auto;
}

.wc-initiate, .wc-terminate {
    color: #fff;
    border-width: 0;
    width: 60%;
    height: 32px;
    position: relative;
    box-sizing: inherit;
}

.wc-typing {
    height: 32px;
    width: 100%;
    font-size: 14px;
    vertical-align: bottom;
    line-height: 32px;
}

html > body > div.wc-webchat.wc-online.wc-show > div.wc-chatbox.wc-show > div.wc-status.wc-error {
    line-height: 16px;
    padding: 6px 0 6px 6px;
}

.wc-history {
    margin-right: 0px;
    margin-top: 20px;
    height: 200px;
}

.wc-buttons a, .wc-buttons a:visited {
    font-size: 32px;
    color: #99DAED;
    background-color: #09a0ce;
}

    .wc-buttons a:hover, .wc-terminate a:hover {
        Color: #fff;
        background-color: #09a0ce;
    }


/*...........................Optional Config..................................*/

.wc-email-input {
    height: 32px;
    min-width: 270px;
    padding: 0 0 0 8px;
    margin: 0 0 0 -2px;
}


/*---------------------------*/

@media only screen and (max-width : 814px), only screen and (max-device-width : 814px) {

    #navBack {
        margin: 60px 0 0 60px;
        position: relative;
    }
}















@charset "utf-8";
/* CSS Document */

body {
    font-family: arial;
    font-size: 14px;
    line-height: 18px;
    margin: 0;
    padding: 0;
    background-image: none;
}

.wc-webchat h1 {
    font-size: 18px;
    line-height: 24px;
    margin: 16px 0 0 0;
    color: #8ed20c;
}

.wc-webchat h2 {
    font-size: 18px;
    line-height: 22px;
    margin: 0 0 20px 0;
    color: #8ed20c;
}

.wc-webchat h3 {
    font-weight: normal;
    font-style: italic;
    font-size: 15px;
    line-height: 20px;
    margin: 0;
    color: #404040;
}

.wc-webchat h4 {
    text-align: center;
    font-weight: 100;
    font-style: italic;
    font-size: 15px;
    line-height: 20px;
    margin: 30px 80px 30px 80px;
    color: #404040;
}

.wc-webchat h5 {
    font-size: 16px;
    line-height: 22px;
    margin: 0 0 10px 0;
    color: #4c4c4c;
}


.h5 {
    font-weight: 100;
    font-style: italic;
}

.subhead {
    font-weight: bold;
    font-style: normal;
    font-size: 15px;
    line-height: 20px;
    margin: 0 0 0px 0;
    color: #5c5c5c;
}

.table {
    font-weight: bold;
    font-style: normal;
    font-size: 12px;
    line-height: 18px;
    margin: 0 0 0 0;
    color: #5c5c5c;
    padding: 10px 18px 10px 18px;
}

.tablerules {
    width: 100%;
    margin: 10px 0 25px 0;
    background-color: #fff;
    border: 1px #8ed20c solid;
    border-collapse: collapse;
    border-spacing: 0;
}

.underline {
    border-bottom: 1px #6699CC dotted;
}

.tabletop {
    background-color: #8ed20c;
    font-weight: bold;
    font-style: normal;
    font-size: 16px;
    line-height: 20px;
    padding: 0 18px 0 18px;
    color: #fff;
}

.wc-webchat a {
    padding: 6px 0 0 0;
    font-family: Arial, Helvetica, sans-serif;
    text-decoration: none;
    font-size: 13px;
    color: #666;
}

.bigwrapper {
    width: 80%;
    margin: 0px auto 0 auto;
    background-color: #fff;
}

.pic {
    float: right;
    width: 100%;
    padding: 0 0 0 0;
    position: relative;
    margin: 0 auto 0 0;
    z-index: -1;
}

    .pic img {
        width: 100%;
        max-width: 600px;
        max-height: 400px;
    }

.bigimagepad {
    width: 100%;
    float: left;
    margin: 20px 0 10px 3%;
}

    .bigimagepad img {
        width: 300px;
        height: 50%;
        margin: 0 0 0 0;
    }



.middle {
    background-image: url(/images/webchat/weightwatchers.jpg);
    background-position: right;
    background-repeat: no-repeat;
    background-size: cover;
    float: left;
    width: 100%;
    height: 100%;
    margin: 0 auto 12px auto;
    overflow: hidden;
}

.midholder {
    width: 70%;
    margin: 0 0 6% 2%;
}

.middle p {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    line-height: 22px;
    margin: 0 4% 2% 4%;
    color: #666;
}

.middle H1 {
    font-size: 28px;
    line-height: 32px;
    margin: 0 4% 2% 4%;
    color: #333;
}

#name {
    font-size: 12px;
    line-height: 14px;
}

.rightcol {
    width: 450px;
    margin: 0 auto 100px 260px;
    padding: 50px 0 0 0; /*border:1px solid red;*/
}

.leftcol {
    float: left;
    width: 157px;
    height: 100px;
    margin: 0 auto 0 auto;
    padding: 10px 0 0 20px; /*border: 1px solid blue;*/
}

    .leftcol img {
        margin: 0 auto 0 auto;
        padding: 10px 0 0 15px; /*border: 1px solid blue;*/
    }

.top {
    /*background-image:url(images/search.jpg);
	background-position:right;
	background-repeat:no-repeat;*/
    Height: 60px;
    width: 100%;
    min-width: 500px;
    margin: 0 auto 0 auto;
    padding: 16px 0 24px 0;
}

.top1 {
    float: left;
    max-width: 30%;
}

.top2 {
    float: left;
    max-width: 30%;
    margin: 6px 0 0 0;
}

.topright {
    float: right;
}

.bottom {
    background-image: url(file://///akl-fp1/Documentation1/UX/Web%20Chat/demo%20site/botline.jpg);
    background-position: top right;
    background-repeat: no-repeat;
    Height: 60px;
    width: 800px;
    margin: 0 auto 0 auto;
    padding: 16px 0 12px 16px;
}

.navmiddle {
    text-align: center;
    width: 100%;
    margin: 0 0 0 0;
    padding: 0 0 0 0;
    height: 60px;
    background: #00A3D3;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#0087bc), to(#56c6f0));
    background-image: -moz-linear-gradient(top, #0087bc, #56c6f0);
    background-image: -webkit-linear-gradient(top, #0087bc, #56c6f0);
    background-image: -o-linear-gradient(top, #0087bc, #56c6f0);
    background-image: -ms-linear-gradient(top, #0087bc, #56c6f0);
    background-image: linear-gradient(to bottom, #0087bc, #56c6f0);
    filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#ff0087bc', endColorstr='#ff56c6f0');
}

.navdrop {
    display: none;
}

.navpmid {
    margin: 20px auto 20px auto;
    width: 100%;
    height: 50px;
}

.navwrapper {
    width: 100%;
    height: 60px;
}

#slides {
    margin: 0 auto 0 auto;
    overflow: hidden;
    border-bottom: solid 0 #666;
}

.one {
    background-position: right;
    background-repeat: no-repeat;
    background-color: #FFF
}
/*----------------------------------------------------*/

.menu1 {
    padding: 0 0 0 0;
    display: inline;
    width: 20%;
    height: 50px;
    margin: 0px 0 0 0;
}

    .menu1 li {
        display: inline;
        line-height: 12px;
        padding: 0 auto 0 auto;
        float: left;
        cursor: pointer;
        width: 20%;
        height: 50px;
    }

        .menu1 li.current {
            background-color: #FFF;
        }

        .menu1 li a {
            display: block;
            padding: 20px 0 0 0;
            margin: 0 auto 0 auto;
            color: #fff;
            width: 100%;
            height: 40px;
            text-decoration: none;
            font-size: 12px;
            font-family: arial, sans-serif;
            font-weight: normal;
            text-align: center;
            cursor: pointer;
        }

            .menu1 li a b {
                margin: 0 auto 0 auto;
            }

        .menu1 li.current a {
            width: 160px;
            color: #00A3D3;
            font-weight: normal;
        }

        .menu1 li:hover {
            height: 60px;
            color: #00A3D3;
            background-color: #FFF;
            cursor: pointer;
        }

        .menu1 li a:hover {
            color: #00A3D3;
        }

            .menu1 li a:hover b {
                color: #00A3D3;
            }

        .menu1 li.current a:hover {
            color: #00A3D3;
            cursor: default;
        }

            .menu1 li.current a:hover b {
            }




/*_____________________________________________________________________________________________*/


/*CONTAINER STYLES*/

.container {
    width: 100%;
    margin: 0 auto 0 auto;
    overflow: hidden;
    border-top: 0 dotted
}

.piccontainer {
    border: solid 0 blue;
    margin: 0 0 0 14.28571428571429%;
    overflow: hidden;
    padding-left: 1.38095238095238%;
}


/*GALLERY STYLES*/
.galleryItem {
    color: #797478;
    font: 10px/1.5 Verdana, Helvetica, sans-serif;
    width: 24%;
    margin: 0 0 16px 0;
    float: left;
    -webkit-transition: color 0.5s ease;
    border-left: 1px dotted;
}

#one {
    margin: 0 2.5% 16px 2%;
    border-left: 0 dotted;
}

#two {
    margin: 0 2% 16px 0;
    border-left: 1px dotted;
}

#four {
    width: 20%;
    margin: 0 0 16px 0;
    float: right;
    border-left: 1px dotted;
}

.galleryItem #four img {
    width: 90%;
    height: 50%;
}

.galleryItem h1 {
    font-size: 13px;
    font-family: arial, sans-serif;
    font-weight: normal;
    text-align: left;
    color: #000;
    padding: 0 0 0 0;
    margin: 0 0 0 10px;
}

#four h2 {
    color: #008ABF;
    font-size: 14px;
    font-weight: normal;
    line-height: 16px;
    margin: 0 0 0 0;
}

.deetgalleryItem {
    color: #797478;
    font: 10px/1.5 Verdana, Helvetica, sans-serif;
    width: 32%;
    margin: 0 0 0 0;
    float: left;
    -webkit-transition: color 0.5s ease;
}


#op {
    color: #FBA61C;
}

#auto {
    color: #BB2552;
}

#uni {
    color: #6EBE43;
}

.galleryItem h3 {
    text-transform: uppercase;
    line-height: 1;
    margin: .5em 0 .5em 0;
}

.galleryItem:hover {
    color: #000;
    background-color: #d9f1f8;
    cursor: pointer;
}

.Itemholder {
    margin: 8% 0 0 12%;
}


.galleryItem img {
    /*max-width: 100%;
	-webkit-border-radius: 2px;
	-moz-border-radius: 2px;
	border-radius: 2px;
	-moz-box-shadow: 0 0 3px #666;
	-webkit-box-shadow: 0 0 3px #666;
	box-shadow: 0 0 3px #666;*/
}

.deetgalleryItem img {
    /*max-width: 100%;
	-moz-box-shadow: 0 0 3px #666;
	-webkit-box-shadow: 0 0 3px #666;
	box-shadow: 0 0 3px #666;*/
}

.chatbanner {
    width: 100%;
    height: 40px;
    background-color: #FBA61C;
    background-image: url(/images/webchat/chaticonsquare5.png);
    background-repeat: no-repeat;
    background-position: 0;
    background-size: 46px;
}




.chattitle {
    color: #008ABF;
    font-size: 14px;
    font-weight: normal;
    line-height: 16px;
    padding: 0 0 0 0;
}

#chathead {
    font-size: 14px;
    font-weight: normal;
    line-height: 36px;
    margin: 0 0 0 56px;
}
/*---------------------------------------------------------------------------------------------------*/
/* Smartphones (portrait and landscape) ----------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
    /* Styles */
}

/* Smartphones (landscape) ----------- */
@media only screen and (min-width : 321px) {
    /* Styles */
}

/* Smartphones (portrait) ----------- */
@media only screen and (max-width : 320px) {
    /* Styles */
}

/* iPads (portrait and landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
    /* Styles */
}

/* iPads (landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
    /* Styles */
}

/* iPads (portrait) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
    /* Styles */
}

/* Desktops and laptops ----------- */
@media only screen and (min-width : 1224px) {
    /* Styles */
}

/* Large screens ----------- */
@media only screen and (min-width : 1824px) {
    /* Styles */
}

/* iPhone 4 ----------- */
@media only screen and (-webkit-min-device-pixel-ratio : 1.5), only screen and (min-device-pixel-ratio : 1.5) {
    /* Styles */
}

/*-----------------------------------------------------------------------------------------------*/

@media only screen and (max-width : 900px), only screen and (max-device-width : 900px) {
    .galleryItem {
        width: 44%;
    }

        .galleryItem img {
            width: 25%;
        }

    .midholder {
        margin: 0 0 40px 4%;
        width: 70%;
    }

    .middle h1 {
        font-size: 18px;
        line-height: 22px;
        margin-right: 25%;
    }

    .Itemholder {
        margin: -22% 0 10px 33%;
        float: left;
        height: 100%;
    }

    #four .Itemholder {
        margin: 4% 0 0 8%;
    }

    .Itemholder h2 {
        margin: -8px 0 0 0;
        text-align: left;
    }

    #name {
        font-size: 10px;
        margin: 4px 0 12px 0;
    }

    #one {
        margin: 0 2% 0 5%;
        border-top: 1px dotted;
    }

    #two {
        margin: 0 2% 0 5%;
        border-top: 1px dotted;
        border-left: none;
    }

    #three {
        border-top: 1px dotted;
        border-left: none;
        margin: 0 2% 0 5%;
    }

    #four {
        margin: 0 0 0 0;
        float: right;
        width: 44%;
    }

        #four img {
            width: 80%;
            height: 80%;
        }

    .bigimagepad img {
        width: 200px;
        height: 25%;
        margin: 0 0 6px 0;
    }

    .middle p {
        font-size: 12px;
        line-height: 16px;
        margin: 0 25% 6px 4%
    }

    .navdrop {
        display: none;
    }
}

@media only screen and (max-width : 760px), only screen and (max-device-width : 760px) {
    .galleryItem {
        width: 45%;
        margin: 1.5% 0 10px 0;
    }

    .header h1 {
        font-size: 4em;
    }

    .Itemholder {
        margin: -20% 0 10px 25%;
        float: left;
        height: 100%;
    }

    #four .Itemholder {
        margin: 4% 0 0 8%;
    }

    .Itemholder h2 {
        margin: 0 0 0 0;
        text-align: left;
        font-size: 14px;
    }

    .galleryItem img {
        width: 20%;
    }

    #one {
        margin: 0 2% 0 5%;
        border-top: 1px dotted;
    }

    #two {
        margin: 0 2% 0 5%;
        border-top: 1px dotted;
        border-left: none;
    }

    #three {
        border-top: 1px dotted;
        border-left: none;
        margin: 0 2% 0 5%;
    }

    #four {
        margin: 0 0 0 0;
        float: right;
        width: 44%;
    }

        #four img {
            width: 100%;
            height: 100%;
        }

    .middle p {
        font-size: 10px;
        line-height: 14px;
        margin: 0 35% 6px 4%
    }

    .left1 h2 {
        font-size: 2.5em;
    }

    .top1 {
        width: 100px;
    }

        .top1 img {
            width: 100%;
        }

    .top2 {
        width: 120px
    }

        .top2 img {
            width: 100%;
        }

        .top2 b {
            font-size: 1em;
            margin: 10px 0 0 -12px
        }
}

@media only screen and (max-width : 580px), only screen and (max-device-width : 580px) {
    .galleryItem {
        width: 100%;
        margin: 1.5% 0 10px 0;
    }

    .midholder h1 {
        font-size: 24px;
        line-height: 28px;
        color: #6EBE43;
        margin: 0 0 6px 4%;
    }

    .Itemholder {
        margin: -16% 16% 4px 25%;
        float: left;
        height: 100%;
    }

        .Itemholder h2 {
            margin: 0 0 0 0;
            text-align: left;
            font-size: 14px;
        }

    .galleryItem img {
        width: 15%;
    }

    #one {
        margin: 0 2% 0 0;
        border-top: 1px dotted;
    }

    #two {
        margin: 0 2% 0 0;
        border-top: 1px dotted;
        border-left: none;
    }

    #three {
        border-top: 1px dotted;
        border-left: none;
        margin: 0 2% 0 0;
    }

    #four {
        margin: 0 0 4% 0;
        float: left;
        width: 100%;
        border-left: none;
        border-bottom: 0 solid #FBA61C;
    }

        #four img {
            float: right;
            width: 60%;
            height: 60%;
            min-height: 100px;
        }

        #four .Itemholder {
            margin: -30% 40% 2% 4%;
        }

    .midholder {
        width: 100%;
        margin: 0 0 6px 0;
    }

    .middle p {
        font-size: 12px;
        line-height: 16px;
        margin: 0 8% 10px 4%
    }

    .middle {
        background-image: none;
        background-position: top right;
        background-repeat: no-repeat;
        background-size: 300px;
        margin: 0 0 20px 0;
        max-height: 200px;
    }

    #name {
        font-size: 10px;
        margin: 4px 0 0 0;
    }

    .navdrop {
        display: block;
        float: left;
        margin: 18px 0 0 18px;
    }

    .navwrapper {
        display: none;
    }

    .topright img {
        display: none;
    }

    .top {
        height: 20px;
    }
}

@media only screen and (max-width : 372px), only screen and (max-device-width : 372px) {
    .galleryItem {
        width: 100%;
        margin: 1.5% 0 10px 0;
    }

    .header h1 {
        font-size: 4em;
    }

    .Itemholder {
        margin: -16% 16% 4px 25%;
        float: left;
        height: 100%;
    }

        .Itemholder h2 {
            margin: 0 0 0 0;
            text-align: left;
            font-size: 14px;
        }

    .galleryItem img {
        width: 15%;
    }

    #one {
        margin: 0 2% 0 0;
        border-top: 1px dotted;
    }

    #two {
        margin: 0 2% 0 0;
        border-top: 1px dotted;
        border-left: none;
    }

    #three {
        border-top: 1px dotted;
        border-left: none;
        margin: 0 2% 0 0;
    }

    #four {
        margin: 0 0 4% 0;
        float: left;
        width: 100%;
        border-left: none;
    }

        #four img {
            display: none;
        }

        #four .Itemholder {
            margin: 4% 2% 2% 4%;
        }

    .middle h2 {
        margin: 0 0 6px 0;
    }

    .middle h1 {
        margin: 0 0 6px 4%;
    }

    .middle p {
        font-size: 10px;
        line-height: 14px;
        margin: 0 0 6px 4%;
    }

    .middle {
        background-image: none;
        margin: 0 0 20px 0;
    }

    .midholder {
        width: 96%;
        margin: 0 0 20px 0;
    }

    .top {
        height: 20px;
    }

}












body {
    background-color: #FFF;
}

.wc-webchat {
    width: 350px;
    line-height: 1.2;
    position: fixed;
    bottom: 0;
    right: 20px;
    -webkit-box-shadow: 3px 0 3px -1px rgba(0, 0, 0, 0.2), -1px 0 3px 1px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 3px 0 3px -1px rgba(0, 0, 0, 0.2), -1px 0 3px 1px rgba(0, 0, 0, 0.2);
    -ms-box-shadow: 3px 0 3px -1px rgba(0, 0, 0, 0.2), -1px 0 3px 1px rgba(0, 0, 0, 0.2);
    box-shadow: 3px 0 3px -1px rgba(0, 0, 0, 0.2), -1px 0 3px 1px rgba(0, 0, 0, 0.2);
    background-color: #fff;
    background-repeat: no-repeat;
    background-position: 5px 2px;
}

    .wc-webchat section {
        padding-left: 15px;
    }

.wc-online > header {
    background-image: url(/images/webchat/chaticonsquare5.png);
    background-repeat: no-repeat;
    background-color: #005785;
    margin: 0 0 0 0;
}

.wc-webchat .wc-ctistatus {
    font: status-bar;
    font-size: 11px;
    display: block;
    line-height: 0;
    margin: 0 0 0 46px;
}

.wc-webchat > header {
    background-image: url(/images/webchat/chaticonsquare5.png);
    background-repeat: no-repeat;
    /*background-position:15px 10px;*/
    margin: 0 0 0 0;
}

    .wc-webchat > header .wc-buttons {
        background-color: #FBA61C;
        /* height: 84px;*/
    }

    .wc-webchat > header .wc-terminate {
        background-color: #FBA61C;
    }

.wc-name-input .wc-email-input {
    height: 26px;
    min-width: 245px;
    padding: 0 0 0 6px;
}

.wc-chatbox .wc-initiating .z-dialog-welcome {
    color: #005785;
    font-size: 30px;
    font-weight: normal;
    margin: 0 0 30px 0;
    max-width: 450px;
}

#headingText {
    color: #005785;
    font-size: 30px;
}

.wc-title {
    margin: 0 0 0 46px;
}

.wc-buttons a:hover {
    background-color: #FFBC4E;
}

.wc-status {
    color: #444;
}

.wc-history {
    margin-right: 0;
}

    .wc-history li {
        color: #000;
    }

        .wc-history li.wc-local {
            color: #000;
        }

        .wc-history li .wc-name {
            color: #595959;
        }

        .wc-history li.wc-local .wc-name {
            color: #595959;
        }

.wc-typing {
    font-style: italic;
    color: #2C2C2C;
    border: none;
}

.wc-message, .wc-history {
    border: #C0C0C0 1px solid;
}

.wc-initiating input .wc-error-label {
    float: left;
    margin: 0 0 0 32px;
}
.wc-error-label {
    color: #D4352F;
}

.wc-initiating p {
    clear: both;
}

    .wc-initiating p:nth-of-type(1) {
        margin-top: 60px;
    }

.wc-initiate, .wc-send {
    background-color: #008A0E;
    box-sizing: inherit;
    cursor:pointer;
	font-size: 16px;
	color: #fff;
}
.wc-send {
    width: 100%;
    padding: 0.75em 0.25em;
    border: 0;
}
.wc-send:hover, .wc-send:focus {
    background-color: #197322;
}
.wc-terminate.wc-show {
    cursor: pointer;
}
.wc-terminate.wc-show:hover, .wc-terminate.wc-show:focus {
    background-color: #197322;
}
.wc-chatting .wc-terminate.wc-show {
    display: block;
    width: 100%;
    margin-top: 2em;
    padding: 0 4px;
    height: 32px;
    background-color: #993434;
}
.wc-chatting .wc-terminate.wc-show:hover, .wc-chatting .wc-terminate.wc-show:focus {
    background-color: #197322;
}
.wc-initiate, .wc-terminate {
    background-color: #008A0E;
    color: white;
    border-width: 0;
    width: 60%;
    height: 52px;
    position: relative;
    box-sizing: inherit;
}

    .wc-initiate:enabled:hover, .wc-initiate:enabled:focus {
        background-color: #197322;
    }

.wc-initiating input[type='button'] {
    margin: 20px 0 0 0;
}

/*.wc-chatbox {
    margin: 0;
}*/

.ui-dialog .ui-widget .ui-widget-content {
    margin: -20px;
    background-color: #000;
}
.wc-chatting textarea {
    width: 100%;
    display: block;
}

















.wc-webchat {
    width: auto;
    height: auto;
    position: static;
    background-repeat: no-repeat;
    background-position: right;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
}

.no-title .ui-dialog-titlebar {
    display: none;
}

#chatTemplate {
    display: none;
}

.wc-initiating form {
    margin-right: 20px;
    margin-bottom: 0;
}

.z-dialog-welcome {
    display: block;
    color: #005785;
    font-size: 26px;
}

.wc-initiating p {
    clear: both;
    width: 40%;
}

.wc-status {
    padding-left: 0;
}



html, body {
    height: 100%;
    width: 100%;
    padding: 0;
    margin: 0;
    background: #fff url(/images/webchat/loading.gif) center center no-repeat;
}

.wc-webchat {
    background-image: url('Zeacom/Images/Agent.png');
}
#chatTemplate {
    display: none;
}

header .wc-terminate.wc-show {
    display: none;
}

#guideline a {
    border: solid 1px #008A0E;
    background-color: transparent;
    color: #2c2c2c;
    font-size: 1em;
    display: inline-block;
    padding: 8px;
    margin: 0 auto;
    outline: none;
    text-decoration: none;
}
    #guideline a:hover, #guideline a:focus {
        color: #fff;
        background-color: #008A0E;
        text-decoration: underline;
    }