/* Sticky footer styles */

* {
    margin:0;
    padding:0;
} 

html, body, #wrap {
    height: 100%;
}

body > #wrap {
    height: auto;
    min-height: 100%;
}

#content {
    padding-bottom: 50px;  /* must be same height as the footer */
}  

#footer {
    position: relative;
    margin-top: -50px;  /* negative value of footer height */
    height: 50px;
} 


/* 3 column holy grail styles */
/* in IE7 if window gets smaller than LC + CC + RC - RC gets pushed down */
/* in Chrome and Mozilla if window gets smaller than LC + CC + RC - RC and LC gets pushed down */

#content {
    position: relative;     /* FOR IE (stops moving LC on load/resize) */
    padding-left: 200px;    /* LC width + LC padding */
    padding-right: 200px;   /* RC width + RC padding + CC padding */
}

#content .column {
    position: relative;
    float: left;
}

#center {
    width: 100%; /* careful with the padding, padding = mess */
}

#left {
    width: 180px;           /* LC width */
    right: 200px;           /* LC width + LC padding + CC padding*/
    margin-left: -100%;
    padding: 0 10px;     /* LC padding */
}

#right {
    width: 180px;           /* RC width */
    margin-right: -100%;
    padding: 0 10px;    /* RC padding */
}


/* prettify styles */

#center {
    background: #FDD;
}

#left {
    background: #66F;
}

#right {
    background: #F66;
}

#content {
    background-color: blue;
}

#footer {
    background-color: red;
}

#header {
    background-color: yellow;
    padding: 1em;
}                


/* For Chrome */

/* CLEAR FIX*/
.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
.clearfix {
    display: inline-block;
}
/* Hides from IE-mac \*/
* html .clearfix {
    height: 1%;
}
.clearfix {
    display: block;
}
/* End hide from IE-mac */