@media screen, projection { /************************* * Reset *************************/ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; outline: 0; font-weight: inherit; font-style: inherit; font-size: 100%; font-family: inherit; vertical-align: baseline; } /* remember to define focus styles! */ :focus { outline: 0; } body { line-height: 1; color: black; background: white; } ol, ul { list-style: none; } /* tables still need 'cellspacing="0"' in the markup */ table { border-collapse: separate; border-spacing: 0; } caption, th, td { text-align: left; font-weight: normal; } blockquote:before, blockquote:after, q:before, q:after { content: ""; } blockquote, q { quotes: "" ""; } /************************* * Fonts *************************/ body { font-family: Arial, sans-serif; font-size: 81.3%; color: #444; } h1 { font-weight: normal; font-size: 1.846em; color: #99CCFF; margin: 40px 0; } h2 { font-weight: normal; font-size: 1.385em; margin: 10px 0; } a, a:visited, a:hover { color: #4c637b; } a:hover { text-decoration: none; } /************************* * Structure *************************/ #page { position: relative; width: 800px; margin: 20px auto; font-size: 1em; padding-top: 100px; } #logo { position: absolute; top: 0; right: 0; display: block; width: 185px; height: 80px; background: #fff url('../img/mailman_logo.png') no-repeat top right; } #content { clear: both; } p { margin: 0 0 20px 0; } /************************* * Forms *************************/ fieldset { clear: both; border: 1px solid #b2b2b2; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; padding: 10px 10px 20px 10px; margin-bottom: 20px; } fieldset legend, a.toggleFieldset { padding: 2px 5px; border: 1px solid #b2b2b2; border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; background-color: #fff; text-shadow: 0 1px silver; line-height: 1.5em; color: #444; } fieldset.optional legend, a.toggleFieldset { display: block; padding-left: 25px; background: #fff url('../img/icons/plus.png') no-repeat 5px 2px; cursor: pointer; } fieldset.optional legend { background-image: url('../img/icons/minus.png'); } legend { margin-left: 0px; } a.toggleFieldset { clear: both; float: left; margin-bottom: 20px; margin-left: 13px; } input { border: 1px solid #b2b2b2; border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; width: 400px; padding: 2px; } .errorlist { float: right; width: 300px; list-style: none; margin: 0 0 0 15px; padding: 0; color: red; } form div.field { clear: both; padding-top: 15px; } label { clear: both; display: block; } button { margin-top: 5px; } /************************* * Special form styles *************************/ .newlist .listname input { font-size: 1.5em; width: 400px; padding: 2px; } .newlist .listname .errorlist { margin-top: .5em; } /************************* * Tables *************************/ table { width: 100%; border: 1px solid #b2b2b2; border-radius: 2px; -moz-border-radius: 2px; -webkit-border-radius: 2px; } th { text-align: left; padding: 4px 15px 4px 5px; font-weight: normal; text-shadow: 0 1px silver; background-color: #e8e8e8; } td { border-top: 1px solid #b2b2b2; padding: 4px; } } @media screen and (max-width: 600px) { }