@import url(http://fonts.googleapis.com/css?family=Open+Sans);
* {/* for demo only*/
    margin:0;
    padding:0
}

html, body {
    font-family: 'Open Sans', sans-serif; 
    font-size:13px;
    height:100%;/* needed to base 100% height on something known*/
    text-align:left;
    background:#f6f6f6;
}

#outer {
    min-width:300px; max-width:1000px;
    background:#f6f6f6;
    /*margin:auto;*/
    min-height:100%;
    margin-top:-210px;/*footer height - this drags the outer 40px up through the top of the monitor */
    text-align:left;
    clear:both;
}

* html #outer {
    height:100%
}

a {
    color:#464646; 
    text-decoration:none;
}

a:hover {
    color:#006b9a; 
    text-decoration:underline;
}

#header {
    background:#f6f6f6;
    border-top:200px solid #fff; /* soak up negative margin and allows header to start at top of page*/
    padding:10px;
    border-bottom: #b11f24 2px solid;
}

#footer {/* footer now sits at bottom of window*/
    min-width:300px; max-width:1000px;
    width:100%;
    /*margin:auto;*/
    height:200px;/* must match negative margin of #outer */
    clear:both;                  
}

.inputgrey {
    border:1px solid #aaa; 
    height:20px; 
    margin-bottom:3px; 
    min-width:247px; 
    max-width:100%; 
    width:1000px;  
    padding:5px; 
    border-color:#CCC; 
    border-radius:3px; 
    font-family: 'Open Sans', sans-serif !important; 
    color:#505050;
}

.statusfield {
    text-align:right; 
    width:100%; 
    padding-bottom:10px;
    font-size:10px;
}

#innerFooter {
    padding:10px 10px  10px 10px;
    margin-left:0px;
    background:#fff;
    box-shadow:1px 1px 8px rgba(0,0,0,0.1);
    /*margin-left:10px;*/ 
}

#innerFooter textarea {
    border:1px solid #aaa; 
    height:70px; 
    resize:horizontal; 
    min-width:247px; 
    max-width:100%; 
    width:1000px;  
    padding:10px; 
    border-color:#CCC; 
    border-radius:3px; 
    font-family: 'Open Sans', sans-serif !important; 
    color:#505050;
}

#footer button {
    min-width:280px; 
    width:100%;
    max-width:1000px;  
    padding:10px; 
    cursor:pointer;
}

#innerFooter .knapp-disabled {
    min-width:230px; 
    max-width:1000px; 
    font-size: 20px; 
    padding:10px; 
    height:40px; 
    cursor:wait; 
    background:#EFEFEF; 
    color:#CCC;  
    border:1px #EFEFEF solid; 
    border-radius:3px; 
    margin-top:5px; 
    text-shadow:0px 1px 0px #FFF;
}

#innerFooter .knapp {
    min-width:230px; 
    max-width:1000px; 
    font-size: 20px; 
    padding:10px; 
    height:40px; 
    cursor:pointer; 
    background:#e02228; 
    color:#FFFFFF;
    border:0px #333 solid; 
    border-radius:3px; 
    margin-top:5px;
}

#innerFooter .knapp:hover {
    background:#555; 
    color:#FFF; 
}

.knappAvslutt {
    min-width:75px;
    max-width:200px; 
    padding:5px; 
    font-size: 20px; 
    cursor:pointer; 
    background:#e02228; 
    color:#FFF; 
    border:0px; 
    border-radius:3px;
}

.knappAvslutt:hover {
    background:#555; 
    color:#FFF; 
}

.boxsizingBorder {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
}

/*Opera Fix*/
<!--[if !IE 11]>
    body:before {/* thanks to Maleika (Kohoutec)*/
    content:"";
    height:100%;
    float:left;
    width:0;
    margin-top:-32767px;/* thank you Erik J - negate effect of float*/
}

<![endif]-->

h1, h2, p {
    padding:0 10px;
}

#outer:after {/* thank you Erik J - instead of using display table for ie8*/
    clear:both;
    display:block;
    height:1%;
    content:" ";
}

#outerContent {
    padding:10px;
    background:#FFF;
    margin-left:0px;
    box-shadow:1px 1px 8px rgba(0,0,0,0.1);
}

#content {
    overflow:auto;
    height:200px;
}

#ed24ChatClientContainer {
    height:100%;
    margin-right:0px;
}

.ed24Message {
    padding: 10px;
}

.ed24OperatorMessage {
    text-shadow:0px 1px 0px #FFF; 
    border-radius:3px;
}

.ed24Message .ed24OperatorMessageBody {
    position:relative;
    float:left;
    clear:both;
    width:100%;
}

.ed24Message .ed24OperatorMessageName {
    position:relative;
    float:left;
    font-weight:bold;
}

.ed24Message .ed24OperatorMessageName:after {
    color:#aaa;
    font-weight:normal;
    content: ' (';
}

.ed24Message .ed24OperatorMessageTime {
    color:#aaa;
    position:relative;
    top:0px;
}

.ed24Message .ed24OperatorMessageTime:after {
    color:#aaa;
    content: ')';
}

.ed24CustomerMessage {
    background:#f7f7f7;
}

.ed24Message .ed24CustomerMessageBody {
    position:relative;
    float:left;
    clear:both;
    width:100%;
}

.ed24Message .ed24CustomerMessageName {
    position:relative;
    float:left;
    font-weight:bold;
}

.ed24Message .ed24CustomerMessageName:after {
    color:#aaa;
    font-weight:normal;
    content: ' (';
}

.ed24Message .ed24CustomerMessageTime {
    color:#aaa;
    position:relative;
    top:0px;
}

.ed24Message .ed24CustomerMessageTime:after { 
    color:#aaa;
    content: ')';
}
