/* ---------------- */ /* ! General Styles */ /* ---------------- */ * { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; } html, body { font-weight:200; color:#312; } body { position:relative; max-width:800px; margin: 0 auto; } button { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; color:#312; padding:0.25em; border:1px solid #888; border-radius:5px; box-shadow:1px 1px #aaa; min-width:65px; vertical-align:middle; } a, a:visited { text-decoration:none; color:#1147BB; } a:hover { text-decoration:underline; } legend { display:block; } legend:hover { cursor:pointer; } h1,h2 { display:inline-block; margin-right:0.5em; vertical-align:middle; /*width:25%;*/ } ul { padding-left:2.5em; margin:0; } ul > li { padding:0.5em 0; } dt, dd { padding:0.25em 0; } dd { margin-left:0.5em; } /* Hide forms by default */ fieldset dl { display:none; } #edit_form dl { display:block; } /* form styles */ fieldset { border-radius:5px; } form.add { margin-bottom:0.75em; } form dt, form dd { display:inline-block; vertical-align:top; padding:0.25em 0; } form dt { width:40%; text-align:right; } form dd { width:58%; text-align:left; margin-left:0; padding-left:.25em; } /* ! Edit buttons */ .modify { position:absolute; display:none; margin-left:1em; vertical-align:middle; } li li, li dt { position:relative; z-index:3; } li:hover > .modify, dt:hover > .modify, dd:hover > .modify { display:inline-block; vertical-align:top; } button.save { background:#7c7; -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#77cc77', EndColorStr='#559955')"; /* IE9 */ background:-o-linear-gradient(#7c7, #595); background:-ms-linear-gradient(#7c7, #595); background:-moz-linear-gradient(#7c7, #595); background:-webkit-linear-gradient(#7c7, #595); background:linear-gradient(#7c7, #595); color:#fff; } button.save:hover { background:#595; -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#559955', EndColorStr='#77cc77')"; /* IE9 */ background:-o-linear-gradient(#595, #7c7); background:-moz-linear-gradient(#595, #7c7); background:-webkit-linear-gradient(#595, #7c7); background:linear-gradient(#595, #7c7); } button.edit { background:#fff; -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#ffffff', EndColorStr='#dddddd')"; /* IE9 */ background:-o-linear-gradient(#fff, #ddd); background:-ms-linear-gradient(#fff, #ddd); background:-moz-linear-gradient(#fff, #ddd); background:-webkit-linear-gradient(#fff, #ddd); background:linear-gradient(#fff, #ddd); } button.edit:hover { background:#ddd; -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#dddddd', EndColorStr='#ffffff')"; /* IE9 */ background:-o-linear-gradient(#ddd, #fff); background:-ms-linear-gradient(#ddd, #fff); background:-moz-linear-gradient(#ddd, #fff); background:-webkit-linear-gradient(#ddd, #fff); background:linear-gradient(#ddd, #fff); } button.delete { background:#f55; -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#ff5555', EndColorStr='#995555')"; /* IE9 */ background:-o-linear-gradient(#f55, #955); background:-ms-linear-gradient(#f55, #955); background:-moz-linear-gradient(#f55, #955); background:-webkit-linear-gradient(#f55, #955); background:linear-gradient(#f55, #955); color:#fff; } button.delete:hover { background:#955; -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#995555', EndColorStr='#ff5555')"; /* IE9 */ background:-o-linear-gradient(#955, #f55); background:-ms-linear-gradient(#955, #f55); background:-moz-linear-gradient(#955, #f55); background:-webkit-linear-gradient(#955, #f55); background:linear-gradient(#955, #f55); } /* ! Outline styles */ .list { padding:0; margin:0; } .list dl { margin-left:0.5em; } #outline { position:absolute; margin:21px 0; right:0; } dl.outline dd { border-bottom:1px dotted #555; margin-bottom:0.5em; } dl.outline dd:last-child { border:0; } dl.outline dt { display:list-item; list-style:square inside; } .list > li { list-style:none; } li h4 { display:inline; } /* ! Data listing styles */ dl.multiline, dl.pair { border-bottom:1px dotted #312; } li dl.multiline:last-of-type { border-bottom:0; } dl.multiline dt { font-weight:bold; line-height:1.5; font-size:1em; margin:0; } dl.multiline dd { margin:1em; margin-right:0; } dl.pair dt, dl.pair dd { display:inline-block; vertical-align:middle; padding:0.25em 0; } dl.pair dt { width:35%; } dl.pair dd { width:64%; margin-left:0; padding-left:0; } /* ! Form overlay styles */ #overlay_bg { background:#777; background:rgba(85,105,255,0.85); position:fixed; display:none; width:900%; height:900%; z-index:5; left:0; top:0; } #overlay { position:absolute; background:#ddd; width:650px; padding:0.5em; border-radius:5px; display:none; z-index:25; } #edit_form { position:relative; overflow:hidden; } #edit_form dt { width:20%; } #edit_form dd { width:78%; }