/* Containters */ .wrapper { margin-left: 20%; width:60%; } .top-bar { width: 100%; margin-bottom: 2px; padding-bottom: 2px; border-bottom: 1px lightgrey solid; margin-top: 2em; overflow: auto; text-align: right; display: inline-block; vertical-align: text-bottom; } .full { clear: both; } .main { float: left; width: 65%; } .sidebar { float: right; width: 33%; } footer { display: inline-block; width: 100%; margin-bottom: 2px; padding-bottom: 2px; border-bottom: 1px lightgrey solid; margin-top: 2px; padding-top: 2px; border-top: 1px lightgrey solid; text-align: center; color: grey; } /* panels */ .panel { overflow: auto; word-wrap: break-word; } .col-left, .col-right { overflow: auto; margin: 0px; width: 48%; } .col-left { padding: 5px 10px 5px 0px; float: left; } .col-right { padding: 5px 0px 5px 10px; float: right; } /* text */ a, a:visited { color: blue; text-decoration: none; } h1 { font-size: x-large; } h2 { font-size: medium; margin-top: 1em; border-top: 1px #999 solid; background-color: lightgray; padding: 6px; } .subheader { margin-top: 0px; } h4 { padding: 3px; } .center-text { text-align: center; } /* other */ input { padding: 0.3em; } table { width: 100%; text-align: left; } .stop-float { clear: both; } .toggle-link { float: right; } .wrap-words { word-wrap: break-word; } .input-error { font-weight: bold; color: red; font-size: small; } @media (max-width: 1250px) { .wrapper { margin-left: 10%; width:80%; } } @media (max-width: 1000px) { .wrapper { margin-left: 10%; width:80%; } .main { float: none; width: 100%; margin-right: 0px; padding-right: 0px; border-right: 0px; margin-bottom: 5px; } .sidebar { border-top: 1px solid lightgray; float: none; width: 100%; } } @media (max-width: 750px ) { .col-left, .col-right { float: none; margin: 0px; padding: 0px; width: 100%; } .col-right { padding-top: 20px; } } @media (max-width: 475px) { .wrapper { margin: 0px; width: 100%; } }