Untitled diff
/* Eric Meyer's CSS Reset */
/* Eric Meyer's CSS Reset */
html, body, div, span, applet, object, iframe,
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
b, u, i, center,
dl, dt, dd, ol, ul, li,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
time, mark, audio, video {
margin: 0;
margin: 0;
padding: 0;
padding: 0;
border: 0;
border: 0;
font-size: 100%;
font-size: 100%;
font: inherit;
font: inherit;
vertical-align: baseline;
vertical-align: baseline;
}
}
/* HTML5 display-role reset for older browsers */
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
footer, header, hgroup, menu, nav, section {
display: block;
display: block;
}
}
body {
body {
line-height: 1;
line-height: 1;
}
}
ol, ul {
ol, ul {
list-style: none;
list-style: none;
}
}
blockquote, q {
blockquote, q {
quotes: none;
quotes: none;
}
}
blockquote:before, blockquote:after,
blockquote:before, blockquote:after,
q:before, q:after {
q:before, q:after {
content: '';
content: '';
content: none;
content: none;
}
}
table {
table {
border-collapse: collapse;
border-collapse: collapse;
border-spacing: 0;
border-spacing: 0;
}
}
/* End of Eric Meyer's CSS Reset */
/* End of Eric Meyer's CSS Reset */
html {
html {
height: 100%;
height: 100%;
width: 100%;
width: 100%;
}
}
article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary {
article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary {
display: block;
display: block;
}
}
body {
body {
font: 12px/18px Arial, sans-serif;
font: 12px/18px Arial, sans-serif;
height: 100%;
height: 100%;
}
}
.wrapper {
.wrapper {
min-width: 100%;
min-width: 100%;
margin: 0 auto;
margin: 0 auto;
min-height: 80%;
min-height: 80%;
background-color: red;
background-color: red;
}
}
/* Header
/* Header
-----------------------------------------------------------------------------*/
----------------------------------------------------------------------------- */header {
.header {
height: 20%;
height: 20%;
background: #FFE680;
background: #FFE680;
padding: 10px 10px 10px 10px;
padding: 10px;
}
}
/* Middle
/* Middle
-----------------------------------------------------------------------------*/
-----------------------------------------------------------------------------*/
.middle {
width: 100%;
height: auto;
position: relative;
}
.middle:after {
display: table;
clear: both;
content: '';
}
.container {
.container {
width: auto;
width: 50%;
height: auto;
float: inherit;
overflow: hidden;
overflow: hidden;
margin-left: auto;
padding: 10px;
margin-right: auto;
background-color: grey;
background-color: grey;
}
}
.content {
padding: 10px 10px 10px 10px;
min-width: 100%;
height: auto;
min-height: 100%;
}
/* Left Sidebar
/* Left Sidebar
-----------------------------------------------------------------------------*/
-----------------------------------------------------------------------------*/
.left-sidebar {
.left-sidebar {
float: left;
width: 25%;
width: 25%;
min-height: 100%;
max-height: 100%;
position: relative;
background: #B5E3FF;
background: #B5E3FF;
padding: 10px 10px 10px 10px;
padding: 10px;
overflow: hidden;
overflow: hidden;
}
}
/* Right Sidebar
/* Right Sidebar
-----------------------------------------------------------------------------*/
-----------------------------------------------------------------------------*/
.right-sidebar {
.right-sidebar {
float: right;
min-width: 25%;
max-width: 25%;
width: 25%;
width: 25%;
background: #FFACAA;
background: #FFACAA;
height: 100%;
padding: 10px;
padding: 10px 10px 10px 10px;
overflow: hidden;
overflow: hidden;
}
}
/* Footer
/* Footer
-----------------------------------------------------------------------------*/
-----------------------------------------------------------------------------*/
.footer {
.footer {
clear: both;
width: 100%;
width: 100%;
height: 20%;
height: 20%;
background: #BFF08E;
background: #BFF08E;
}
/* Equal Column Fix */
.left-sidebar, .right-sidebar, .container {
box-sizing: border-box;
float: left;
padding-bottom: 9999px;
margin-bottom: -9999px;
}
.right-sidebar {
float: right;
}
.wrapper {
overflow: hidden;
}
}