* {
    margin: 0;
    padding: 0;
    font-family: verdana, sans-serif;
    font-size: 10pt;
}

/* Global styles */
body {
    padding-bottom: 65px;
}

a {
    color: #3D8DFF;
}

h1 {
    color: #3E638F;
    font-size: 13pt;
    margin: 10px 0;
}

h2 {
    color: #3E638F;
    font-size: 11pt;
    margin: 10px 0;
}

p {
    margin: 10px 0;
}

hr {
    border: 0;
    border-top: 2px solid #CCDCEB;
    margin: 5px 0;
}

ul {
    margin-left: 20px;
}

ol {
    margin-left: 20px;
}

ol>li::marker {
    font-weight: bold;
}

/* Header */
header {
    height: 100px;
    padding-top: 6px;
    border-top: 3px solid #E0ECFF;
    border-bottom: 5px solid #CCDCEB;
}

header img#logo {
    height: 73px;
    margin-top: 6px;
}

header ul#login-links {
    list-style: none;
    float: right;
    margin-right: 10px;
}

header ul#login-links li {
    float: left;
    margin-left: 10px;
}

header ul#login-links li:not(:last-child):not(:first-child):after {
    content: "  |";
}

header ul#login-links a {
    color: #5E6D7B;
}

header nav ul {
    list-style: none;
    position: relative;
    bottom: 9px;
    margin-right: 10px;
    float: right;
}

header nav ul li {
    float: left;
    margin-left: 5px;
    padding: 5px 8px;
    background-color: #EFF5FF;
    background-image: linear-gradient(#FFFFFF, #EFF5FF);
    border: 1px solid #CCDCEB;
    border-radius: 10px 10px 0 0;
}

header nav ul li.selected {
    background-color: #CCDCEB;
    background-image: linear-gradient(#EFF5FF, #CCDCEB);
}

header nav ul li.selected a {
    color: black;
}

header nav ul li.gapafter {
    margin-right: 20px;
}

header nav ul li a {
    color: #5E6D7B;
    text-decoration: none;
}

header nav ul li a:hover {
    text-decoration: underline;
}

/* Main container */
main {
    padding: 10px;
}

/* Footer */
footer {
    height: 35px;
    width: 100%;
    color: white;
    background-color: black;
    font-size: 10pt;
    padding: 10px;
    line-height: 35px;
    position: fixed;
    bottom: 0;
    left: 0;
}

footer a {
    color: white;
}

footer ul {
    list-style: none;
}

footer ul li {
    float: left;
    margin-left: 5px;
}

footer ul li:not(:first-child):before {
    content: "| ";
}

footer ul li:first-child {
    margin-left: 0;
}

/* Global table styles */
table {
    width: 100%;
    border-collapse: collapse;
    border: 2px solid #CCDCEB;
    margin-bottom: 10px;
}

table thead {
    background-color: #CCDCEB;
    text-align: left;
}

table thead th,
table thead td {
    padding: 5px;
}

table tbody tr td,
table tbody tr th {
    border-bottom: 1px solid #CBCBCB;
    padding: 5px;
    vertical-align: top;
}

table tbody tr th {
    text-align: left;
    background-color: #CCDCEB;
}

table tbody tr.highlight {
    background-color: #EFF5FF;
}

table tbody tr td.emphasis {
    font-weight: bold;
}

table tfoot {
    text-align: left;
    font-weight: bold;
}

table tfoot tr.light,
table tfoot tr.light>th {
    font-weight: normal;
}

table tfoot tr th {
    background-color: #EFF5FF;
}

table tfoot th,
table tfoot td {
    padding: 5px;
}

table td.checkbox,
table tr.checkbox {
    width: 14px;
}

table.narrow {
    width: 25%;
    min-width: 410px;
}

table.medium {
    width: 650px;
}

table#domainlist tbody tr.expired,
table#domainlist tbody tr.deleted,
table#domainlist tbody tr.transfer-out-pending,
table#domainlist tbody tr.transfer-out-complete {
    color: #B2A899;
}

table#domainlist tbody tr.pending {
    color: #3E638F;
}

/* Global form styles */
form {
    padding: 10px;
    width: 410px;
    border: 2px solid #CCDCEB;
}

form.wide {
    width: 650px;
}

form.wrapped {
    border: none;
}

form instructions {
    display: block;
    margin-bottom: 10px;
    padding: 0 10px;
    border: 1px solid #CCDCEB;
    background-color: #EFF5FF;
}

form instructions ul {
    margin-left: 20px;
    margin-bottom: 10px;
    list-style-position: inside;
}

form instructions ul.blank {
    list-style-type: none;
}

form div.form-section {
    margin-bottom: 25px;
}

form div.form-section h3 {
    border-bottom: 1px solid #CCDCEB;
    padding-bottom: 2px;
    margin-bottom: 12px;
    color: #5E6D7B;
}

form div.input-container {
    margin-bottom: 5px;
}

form label {
    font-weight: bold;
}

form label.required::after {
    content: "*";
    vertical-align: super;
    font-size: .83em;
    color: #3E638F;
}

form input[type=text],
form input[type=email],
form input[type=password],
form select {
    width: 100%;
    padding: 5px 10px;
    margin: 5px 0;
    display: inline-block;
    box-sizing: border-box;
}

form textarea {
    width: 350px;
    height: 100px;
}

form textarea.wide {
    width: 405px;
}

/* Inline form modifiers */
form.inline {
    width: 100%;
    border: 0;
    padding: 0;
}

form.inline input[type=text],
form.inline input[type=email],
form.inline input[type=password],
form.inline select {
    width: auto;
}

form.inline button {
    width: auto;
}

/* General button styles*/
button {
    background-color: #EFF5FF;
    background-image: linear-gradient(#FFFFFF, #EFF5FF);
    color: #5E6D7B;
    padding: 5px 10px;
    margin: 5px 0;
    cursor: pointer;
    width: 100%;
    border: 1px solid #CCDCEB;
    border-radius: 5px;
}

button.main-selection {
    font-weight: bold;
}

button.danger {
    background-image: linear-gradient(#FFFFFF, #ffefef);
    color: #7B5E5E;
    border: 1px solid #EBCCCC;
}

button.disabled {
    background-image: linear-gradient(#FFFFFF, #F2F2F2);
    color: #c5c5c5;
    border: 1px solid #F2F2F2;
    cursor: auto;
}

div.buttons-with-reset {
    overflow: hidden;
}

div.buttons-with-reset.medium {
    width: 650px;
}

div.buttons-with-reset button.main-selection {
    float: left;
    width: 80%;
}

div.buttons-with-reset button.reset {
    float: right;
    width: 18%;
}

/* Global status message box styles */
messages {
    display: block;
    margin-bottom: 10px;
    padding: 0 10px;
    border: 1px solid #CCDCEB;
    background-color: #EFF5FF;
    max-width: 410px;
}

messages ul {
    margin-left: 20px;
    margin-top: 10px;
    margin-bottom: 10px;
}

messages.success {
    background-color: #DDFFDD;
    border-color: #4CAF50;
}

messages.warning {
    background-color: #ffffcc;
    border-color: #E1C16E;
}

messages.error {
    background-color: #FFDDDD;
    border-color: #F44336;
}

/* Global <code> block styles */
code {
    display: block;
    font-family: monospace;
    padding: 10px;
    background-color: #F8F8F8;
    border: 1px dashed #CCDCEB;
    width: fit-content;
    overflow-x: scroll;
}

/* Global definition list styles */
dl dt {
    font-weight: bold;
}

dl dd {
    margin-left: 20px;
    margin-bottom: 10px;
}

/* Global pagination navigation styles */
nav.pagination {
    display: block;
    float: right;
    margin-bottom: 10px;
}

nav.pagination a {
    color: black;
    padding: 2px 7px;
    text-decoration: none;
    border: 1px solid #CCDCEB;
    margin: 0 1px;
}

nav.pagination a.selected {
    background-color: #EFF5FF;
}

/* Global <details> styles */
details summary {
    color: #3E638F;
    font-size: 11pt;
    font-weight: bold;
    margin: 10px 0;
    cursor: pointer;
}

form details summary {
    font-size: 10pt;
    font-weight: normal;
}

/* Global <section> styles */
main section div.content {
    padding: 10px;
    border: 2px solid #CCDCEB;
}

/* Section navigation styles */
main section nav {
    display: inline-block;
    position: relative;
    bottom: -4px;
}

main section nav ul {
    list-style: none;
    margin-left: 0;
    margin-right: 10px;
}

main section nav ul li {
    float: left;
    margin-left: 5px;
    padding: 5px 8px;
    background-color: #EFF5FF;
    background-image: linear-gradient(#FFFFFF, #EFF5FF);
    border: 1px solid #CCDCEB;
    border-radius: 10px 10px 0 0;
}

main section nav ul li.selected {
    background-color: #CCDCEB;
    background-image: linear-gradient(#EFF5FF, #CCDCEB);
}

main section nav ul li.disabled {
    color: lightgrey;
}

main section nav ul li.selected a {
    color: black;
}

main section nav ul li a {
    color: #5E6D7B;
    text-decoration: none;
}

main section nav ul li a:hover {
    text-decoration: underline;
}

/* Domain input form */
form div.domain-input {
    display: flex;
    border: 1px solid #999999;
    border-radius: 2px;
    margin: 5px 0;
}

form div.domain-input input {
    margin: 0;
    border: 0;
    padding: 5px 0;
}

form div.domain-input span#prefix {
    width: 57px;
    color: black;
    padding: 5px 5px 5px 10px;
}

form div.domain-input input#sld {
    flex-grow: 1;
}

form div.domain-input input#sld:focus {
    outline: none;
}

form div.domain-input select#tld {
    width: auto;
    padding: 0;
    border: 0;
    background-color: #ffffff;
}

/* Domain registration wizard styles */
table#registration-wizard ul.addons {
    color: #999999;
    list-style: none;
}

/* Add credit form */
form div.add-credit {
    display: flex;
    border: 1px solid #999999;
    border-radius: 2px;
    margin: 5px 0;
}

form div.add-credit input {
    margin: 0;
    border: 0;
    padding: 5px 0;
}

form div.add-credit span#currency {
    width: 23px;
    padding: 5px 5px 5px 10px;
    font-weight: bold;
}

form div.add-credit input#amount {
    flex-grow: 1;
}

form div.add-credit input#amount:focus {
    outline: none;
}

form div.add-credit span#tax {
    width: 75px;
    padding: 5px 5px 5px 10px;
}

/* Domain info box */
div#domaininfo {
    padding: 10px;
    width: 410px;
    margin-bottom: 10px;
}

/* Composite input boxes (check nameserver & phone input forms) */
form div.check-nameserver,
form div.telephone {
    display: flex;
    border: 1px solid #999999;
    border-radius: 2px;
    margin: 5px 0;
}

form div.check-nameserver input,
form div.telephone input {
    margin: 0;
    border: 0;
    padding: 5px;
}

form div.check-nameserver input#ns,
form div.telephone input.number {
    flex-grow: 1;
}

form div.check-nameserver input#ns:focus {
    outline: none;
}

form div.check-nameserver span#sld {
    width: 200px;
    padding: 5px 5px 5px 10px;
    text-align: right;
}

form div.telephone input.international-code {
    width: 50px;
    background-color: #EFEFEF;
    text-align: center;
}

/* HTML invoice styles */
invoice dl {
    padding: 10px;
}

invoice dl#details {
    float: right;
}

invoice dl dt {
    float: left;
    clear: left;
    text-align: right;
    font-weight: bold;
}

invoice dl dt:after {
    content: ":";
}

invoice dl dd {
    margin: 0 0 0 130px;
    padding: 0 0 0.5em 0;
}

invoice address {
    font-style: normal;
}

/* Specific named elements */
div#email-verify-message {
    margin: 10px auto;
    padding: 5px;
    width: 50%;
    border: 1px solid orange;
    background-color: #fbceb1;
}

span.additional,
span.additional a {
    font-weight: normal;
    font-size: 8pt;
    text-decoration: none;
}

/* Other generic modifier classes */
.centre-text {
    text-align: center;
}