/* DJANGO Admin styles */ @import url(fonts.css); body { margin: 0; padding: 0; font-size: 14px; font-family: "Roboto","Lucida Grande","DejaVu Sans","Bitstream Vera Sans",Verdana,Arial,sans-serif; color: #333; background: #fff; } /* LINKS */ a:link, a:visited { color: #447e9b; text-decoration: none; } a:focus, a:hover { color: #036; } a:focus { text-decoration: underline; } a img { border: none; } a.section:link, a.section:visited { color: #fff; text-decoration: none; } a.section:focus, a.section:hover { text-decoration: underline; } /* GLOBAL DEFAULTS */ p, ol, ul, dl { margin: .2em 0 .8em 0; } p { padding: 0; line-height: 140%; } h1,h2,h3,h4,h5 { font-weight: bold; } h1 { margin: 0 0 20px; font-weight: 300; font-size: 20px; color: #666; } h2 { font-size: 16px; margin: 1em 0 .5em 0; } h2.subhead { font-weight: normal; margin-top: 0; } h3 { font-size: 14px; margin: .8em 0 .3em 0; color: #666; font-weight: bold; } h4 { font-size: 12px; margin: 1em 0 .8em 0; padding-bottom: 3px; } h5 { font-size: 10px; margin: 1.5em 0 .5em 0; color: #666; text-transform: uppercase; letter-spacing: 1px; } ul li { list-style-type: square; padding: 1px 0; } li ul { margin-bottom: 0; } li, dt, dd { font-size: 13px; line-height: 20px; } dt { font-weight: bold; margin-top: 4px; } dd { margin-left: 0; } form { margin: 0; padding: 0; } fieldset { margin: 0; padding: 0; border: none; border-top: 1px solid #eee; } blockquote { font-size: 11px; color: #777; margin-left: 2px; padding-left: 10px; border-left: 5px solid #ddd; } code, pre { font-family: "Bitstream Vera Sans Mono", Monaco, "Courier New", Courier, monospace; color: #666; font-size: 12px; } pre.literal-block { margin: 10px; background: #eee; padding: 6px 8px; } code strong { color: #930; } hr { clear: both; color: #eee; background-color: #eee; height: 1px; border: none; margin: 0; padding: 0; font-size: 1px; line-height: 1px; } /* TEXT STYLES & MODIFIERS */ .small { font-size: 11px; } .tiny { font-size: 10px; } p.tiny { margin-top: -2px; } .mini { font-size: 10px; } p.mini { margin-top: -3px; } .help, p.help, form p.help, div.help, form div.help, div.help li { font-size: 11px; color: #999; } div.help ul { margin-bottom: 0; } .help-tooltip { cursor: help; } p img, h1 img, h2 img, h3 img, h4 img, td img { vertical-align: middle; } .quiet, a.quiet:link, a.quiet:visited { color: #999; font-weight: normal; } .float-right { float: right; } .float-left { float: left; } .clear { clear: both; } .align-left { text-align: left; } .align-right { text-align: right; } .example { margin: 10px 0; padding: 5px 10px; background: #efefef; } .nowrap { white-space: nowrap; } /* TABLES */ table { border-collapse: collapse; border-color: #ccc; } td, th { font-size: 13px; line-height: 16px; border-bottom: 1px solid #eee; vertical-align: top; padding: 8px; font-family: "Roboto", "Lucida Grande", Verdana, Arial, sans-serif; } th { font-weight: 600; text-align: left; } thead th, tfoot td { color: #666; padding: 5px 10px; font-size: 11px; background: #fff; border: none; border-top: 1px solid #eee; border-bottom: 1px solid #eee; } tfoot td { border-bottom: none; border-top: 1px solid #eee; } thead th.required { color: #000; } tr.alt { background: #f6f6f6; } .row1 { background: #fff; } .row2 { background: #f9f9f9; } /* SORTABLE TABLES */ thead th { padding: 5px 10px; line-height: normal; text-transform: uppercase; background: #f6f6f6; } thead th a:link, thead th a:visited { color: #666; } thead th.sorted { background: #eee; } thead th.sorted .text { padding-right: 42px; } table thead th .text span { padding: 8px 10px; display: block; } table thead th .text a { display: block; cursor: pointer; padding: 8px 10px; } table thead th .text a:focus, table thead th .text a:hover { background: #eee; } thead th.sorted a.sortremove { visibility: hidden; } table thead th.sorted:hover a.sortremove { visibility: visible; } table thead th.sorted .sortoptions { display: block; padding: 9px 5px 0 5px; float: right; text-align: right; } table thead th.sorted .sortpriority { font-size: .8em; min-width: 12px; text-align: center; vertical-align: 3px; margin-left: 2px; margin-right: 2px; } table thead th.sorted .sortoptions a { position: relative; width: 14px; height: 14px; display: inline-block; background: url(../img/sorting-icons.svg) 0 0 no-repeat; background-size: 14px auto; } table thead th.sorted .sortoptions a.sortremove { background-position: 0 0; } table thead th.sorted .sortoptions a.sortremove:after { content: '\\'; position: absolute; top: -6px; left: 3px; font-weight: 200; font-size: 18px; color: #999; } table thead th.sorted .sortoptions a.sortremove:focus:after, table thead th.sorted .sortoptions a.sortremove:hover:after { color: #447e9b; } table thead th.sorted .sortoptions a.sortremove:focus, table thead th.sorted .sortoptions a.sortremove:hover { background-position: 0 -14px; } table thead th.sorted .sortoptions a.ascending { background-position: 0 -28px; } table thead th.sorted .sortoptions a.ascending:focus, table thead th.sorted .sortoptions a.ascending:hover { background-position: 0 -42px; } table thead th.sorted .sortoptions a.descending { top: 1px; background-position: 0 -56px; } table thead th.sorted .sortoptions a.descending:focus, table thead th.sorted .sortoptions a.descending:hover { background-position: 0 -70px; } /* FORM DEFAULTS */ input, textarea, select, .form-row p, form .button { margin: 2px 0; padding: 2px 3px; vertical-align: middle; font-family: "Roboto", "Lucida Grande", Verdana, Arial, sans-serif; font-weight: normal; font-size: 13px; } .form-row div.help { padding: 2px 3px; } textarea { vertical-align: top; } input[type=text], input[type=password], input[type=email], input[type=url], input[type=number], input[type=tel], textarea, select, .vTextField { border: 1px solid #ccc; border-radius: 4px; padding: 5px 6px; margin-top: 0; } input[type=text]:focus, input[type=password]:focus, input[type=email]:focus, input[type=url]:focus, input[type=number]:focus, input[type=tel]:focus, textarea:focus, select:focus, .vTextField:focus { border-color: #999; } select { height: 30px; } select[multiple] { /* Allow HTML size attribute to override the height in the rule above. */ height: auto; min-height: 150px; } /* FORM BUTTONS */ .button, input[type=submit], input[type=button], .submit-row input, a.button { background: #79aec8; padding: 10px 15px; border: none; border-radius: 4px; color: #fff; cursor: pointer; } a.button { padding: 4px 5px; } .button:active, input[type=submit]:active, input[type=button]:active, .button:focus, input[type=submit]:focus, input[type=button]:focus, .button:hover, input[type=submit]:hover, input[type=button]:hover { background: #609ab6; } .button[disabled], input[type=submit][disabled], input[type=button][disabled] { opacity: 0.4; } .button.default, input[type=submit].default, .submit-row input.default { float: right; border: none; font-weight: 400; background: #417690; } .button.default:active, input[type=submit].default:active, .button.default:focus, input[type=submit].default:focus, .button.default:hover, input[type=submit].default:hover { background: #205067; } .button[disabled].default, input[type=submit][disabled].default, input[type=button][disabled].default { opacity: 0.4; } /* MODULES */ .module { border: none; margin-bottom: 30px; background: #fff; } .module p, .module ul, .module h3, .module h4, .module dl, .module pre { padding-left: 10px; padding-right: 10px; } .module blockquote { margin-left: 12px; } .module ul, .module ol { margin-left: 1.5em; } .module h3 { margin-top: .6em; } .module h2, .module caption, .inline-group h2 { margin: 0; padding: 8px; font-weight: 400; font-size: 13px; text-align: left; background: #79aec8; color: #fff; } .module caption, .inline-group h2 { font-size: 12px; letter-spacing: 0.5px; text-transform: uppercase; } .module table { border-collapse: collapse; } /* MESSAGES & ERRORS */ ul.messagelist { padding: 0; margin: 0; } ul.messagelist li { display: block; font-weight: 400; font-size: 13px; padding: 10px 10px 10px 65px; margin: 0 0 10px 0; background: #dfd url(../img/icon-yes.svg) 40px 12px no-repeat; background-size: 16px auto; color: #333; } ul.messagelist li.warning { background: #ffc url(../img/icon-alert.svg) 40px 14px no-repeat; background-size: 14px auto; } ul.messagelist li.error { background: #ffefef url(../img/icon-no.svg) 40px 12px no-repeat; background-size: 16px auto; } .errornote { font-size: 14px; font-weight: 700; display: block; padding: 10px 12px; margin: 0 0 10px 0; color: #ba2121; border: 1px solid #ba2121; border-radius: 4px; background-color: #fff; background-position: 5px 12px; } ul.errorlist { margin: 0 0 4px; padding: 0; color: #ba2121; background: #fff; } ul.errorlist li { font-size: 13px; display: block; margin-bottom: 4px; } ul.errorlist li:first-child { margin-top: 0; } ul.errorlist li a { color: inherit; text-decoration: underline; } td ul.errorlist { margin: 0; padding: 0; } td ul.errorlist li { margin: 0; } .form-row.errors { margin: 0; border: none; border-bottom: 1px solid #eee; background: none; } .form-row.errors ul.errorlist li { padding-left: 0; } .errors input, .errors select, .errors textarea { border: 1px solid #ba2121; } div.system-message { background: #ffc; margin: 10px; padding: 6px 8px; font-size: .8em; } div.system-message p.system-message-title { padding: 4px 5px 4px 25px; margin: 0; color: #c11; background: #ffefef url(../img/icon-no.svg) 5px 5px no-repeat; } .description { font-size: 12px; padding: 5px 0 0 12px; } /* BREADCRUMBS */ div.breadcrumbs { background: #79aec8; padding: 10px 40px; border: none; font-size: 14px; color: #c4dce8; text-align: left; } div.breadcrumbs a { color: #fff; } div.breadcrumbs a:focus, div.breadcrumbs a:hover { color: #c4dce8; } /* ACTION ICONS */ .viewlink, .inlineviewlink { padding-left: 16px; background: url(../img/icon-viewlink.svg) 0 1px no-repeat; } .addlink { padding-left: 16px; background: url(../img/icon-addlink.svg) 0 1px no-repeat; } .changelink, .inlinechangelink { padding-left: 16px; background: url(../img/icon-changelink.svg) 0 1px no-repeat; } .deletelink { padding-left: 16px; background: url(../img/icon-deletelink.svg) 0 1px no-repeat; } a.deletelink:link, a.deletelink:visited { color: #CC3434; } a.deletelink:focus, a.deletelink:hover { color: #993333; text-decoration: none; } /* OBJECT TOOLS */ .object-tools { font-size: 10px; font-weight: bold; padding-left: 0; float: right; position: relative; margin-top: -48px; } .form-row .object-tools { margin-top: 5px; margin-bottom: 5px; float: none; height: 2em; padding-left: 3.5em; } .object-tools li { display: block; float: left; margin-left: 5px; height: 16px; } .object-tools a { border-radius: 15px; } .object-tools a:link, .object-tools a:visited { display: block; float: left; padding: 3px 12px; background: #999; font-weight: 400; font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; color: #fff; } .object-tools a:focus, .object-tools a:hover { background-color: #417690; } .object-tools a:focus{ text-decoration: none; } .object-tools a.viewsitelink, .object-tools a.golink,.object-tools a.addlink { background-repeat: no-repeat; background-position: right 7px center; padding-right: 26px; } .object-tools a.viewsitelink, .object-tools a.golink { background-image: url(../img/tooltag-arrowright.svg); } .object-tools a.addlink { background-image: url(../img/tooltag-add.svg); } /* OBJECT HISTORY */ table#change-history { width: 100%; } table#change-history tbody th { width: 16em; } /* PAGE STRUCTURE */ #container { position: relative; width: 100%; min-width: 980px; padding: 0; } #content { padding: 20px 40px; } .dashboard #content { width: 600px; } #content-main { float: left; width: 100%; } #content-related { float: right; width: 260px; position: relative; margin-right: -300px; } #footer { clear: both; padding: 10px; } /* COLUMN TYPES */ .colMS { margin-right: 300px; } .colSM { margin-left: 300px; } .colSM #content-related { float: left; margin-right: 0; margin-left: -300px; } .colSM #content-main { float: right; } .popup .colM { width: auto; } /* HEADER */ #header { width: auto; height: auto; display: flex; justify-content: space-between; align-items: center; padding: 10px 40px; background: #417690; color: #ffc; overflow: hidden; } #header a:link, #header a:visited { color: #fff; } #header a:focus , #header a:hover { text-decoration: underline; } #branding { float: left; } #branding h1 { padding: 0; margin: 0 20px 0 0; font-weight: 300; font-size: 24px; color: #f5dd5d; } #branding h1, #branding h1 a:link, #branding h1 a:visited { color: #f5dd5d; } #branding h2 { padding: 0 10px; font-size: 14px; margin: -8px 0 8px 0; font-weight: normal; color: #ffc; } #branding a:hover { text-decoration: none; } #user-tools { float: right; padding: 0; margin: 0 0 0 20px; font-weight: 300; font-size: 11px; letter-spacing: 0.5px; text-transform: uppercase; text-align: right; } #user-tools a { border-bottom: 1px solid rgba(255, 255, 255, 0.25); } #user-tools a:focus, #user-tools a:hover { text-decoration: none; border-bottom-color: #79aec8; color: #79aec8; } /* SIDEBAR */ #content-related { background: #f8f8f8; } #content-related .module { background: none; } #content-related h3 { font-size: 14px; color: #666; padding: 0 16px; margin: 0 0 16px; } #content-related h4 { font-size: 13px; } #content-related p { padding-left: 16px; padding-right: 16px; } #content-related .actionlist { padding: 0; margin: 16px; } #content-related .actionlist li { line-height: 1.2; margin-bottom: 10px; padding-left: 18px; } #content-related .module h2 { background: none; padding: 16px; margin-bottom: 16px; border-bottom: 1px solid #eaeaea; font-size: 18px; color: #333; } .delete-confirmation form input[type="submit"] { background: #ba2121; border-radius: 4px; padding: 10px 15px; color: #fff; } .delete-confirmation form input[type="submit"]:active, .delete-confirmation form input[type="submit"]:focus, .delete-confirmation form input[type="submit"]:hover { background: #a41515; } .delete-confirmation form .cancel-link { display: inline-block; vertical-align: middle; height: 15px; line-height: 15px; background: #ddd; border-radius: 4px; padding: 10px 15px; color: #333; margin: 0 0 0 10px; } .delete-confirmation form .cancel-link:active, .delete-confirmation form .cancel-link:focus, .delete-confirmation form .cancel-link:hover { background: #ccc; } /* POPUP */ .popup #content { padding: 20px; } .popup #container { min-width: 0; } .popup #header { padding: 10px 20px; }