html, body {
        font-size: 14px; /* this blocks font size chaning in IE7 but document scaling works pretty well */
        height: 100%;
        min-height: 100%;
        min-width: 100%;
        margin: 0;
        padding: 0;
        position: relative;
        width: 100%;
}
* html {
        font-size: 97%;  
}
* html body {
        font-size: 90%;  /* this meet 14px by default in all IEs with default settings */
}

#container {
        min-height: 100%;
        height: 100%;
        min-width: 71em;
        width: 100%;
}
/*
*  for IE<7 fix min-width behavior
*/
* html #container {
        behavior: url('minwidth.htc');
        width: 55em;
}

#container #content {
        height: 100%;
        min-height: 100%;
        position: relative;
        width: 100%;
}
#container #header {
        min-height: 1.2em;
        height: 1.2em;
}
#container #pagebody {
        padding-top: 1px;        /* this should be defined, otherwise we'll have a gap on top */
}
#footer {
        position: relative;
}
#footer #foot {
        min-height: 3.86em;
        height: 3.86em;
        padding-top: 0.86em;
}
html>body #container #header,
html>body #container #content,
html>body #footer #foot {
        height: auto;            /* used to fit font-sizing feature of Mozilla/FireFox */
}
/*
*  Container overlapping
*/
#container #pagebody {
        padding-bottom: 4.9em;    /* this value need to ba same as full height of the footer or greater
                                     footer top padding should be maintained in it's definition (see below)
                                     NOTE: don't set VERTICAL padding/margins on #container, #header, #pagebody!
                                  */
}
#footer {
        margin-top: -4.9em;       /* how high we will go */
}
/*************************************
*  Additional overrides
*
*  They are used to make pages look close in the differrent browsers
**************************************/
a img {
        border: none;
}

h1 {
        font-size: 2.3em;
        margin: 1.43em 0 1.43em 2.14em;
        padding: 0;
}
h2 {
        font-size: 2.2em;
        margin: 1.29em 0 1.29em 1.86em;
        padding: 0;
}
h3 {
        font-size: 2.1em;
        margin: 16px 0 16px 22px;
        padding: 0;
}
h4 {
        font-size: 2em;
        margin: 1.14em 0 1.14 1.29;
        padding: 0;
}
ol {
        margin: 0.14em 0 0.14em 2.79em;
        padding: 0;
}
* html ol, * html ul {
        padding: 0 0 .07em;
}
* html li { 
        padding: .07em 0 0;
}
/*
ul {
        margin: .14em 0;
        padding: 0;
}
ul li {
*  Assign this override to force browsers to have the same list markers.
*  If you need to implement nested markers, define more nested rules
*  Note, this way you cound not change marker color, beside adding personal images
*
*

        background: url(li.gif) 1.6em 50% no-repeat;
        list-style: none;
        padding-left: 2.79em;
        position: relative;
}
*/
/*************************************
*  Special elements and hacks
**************************************/
.clearfix:after {
        content: "."; 
        display: block; 
        height: 0; 
        clear: both; 
        visibility: hidden;
}
.clearfix {display: inline-block;}

/* Hides from IE-mac \*/
* html .clearfix {height: 1px;}
.clearfix {display: block;}
/* End hide from IE-mac */

/*************************************
*  Design page template styles
**************************************/
#container #pagebody, #footer {
        margin-left: 1em;
        margin-right: 1em;
}
#container #header {
        padding-left: 1em;
        padding-right: 1em;
}
/*
*  Font families and colors
*/
body {
        background-color: #f4f4f4;
        color: #333;
}
div, p, span {
        font-size: 1em;
}
#footer #foot, #header {
        color: #222;
        background: #dfdfdf;
}