@font-face {
    font-family: 'Oswald';
    font-style: normal;
    font-weight: 700;
    src: url('fonts/Oswald-Bold.eot'); /* MSIE */
    src: local('☺'),
         url('fonts/Oswald-Bold.eot?#iefix') format('embedded-opentype'),
         url('fonts/Oswald-Bold.woff') format('woff'),
         url('fonts/Oswald-Bold.ttf') format('truetype');
}

body, th, td {
    margin: 0;
    padding: 0;
    font-family: Arial, "DejaVu Sans", "Bitstream Vera Sans", sans-serif;
    font-size: 11pt;
    line-height: 150%;
    cursor: default;
    color: black;
}
p {
    margin-top: 0;
    margin-bottom: 1ex;
}
a {
    color: blue;
}
a:visited {
    color: teal;
}
a:hover {
    color: red;
}
div.overlay {
    display: none;
    position: fixed;
    z-index: 10000;
    background: black;
    opacity: 0.8;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
div.modal {
    z-index: 10001;
    display: none;
    background: white;
    border: 10px solid rgba(255,255,255,.5);
    position: fixed;
    top: 50%;
    left: 50%;
    margin-left: -300px;
    margin-top: -100px;
    width: 600px;
    height: 200px;
    border-radius: 15px;
    box-shadow: 0 0 20px 5px black;
}
div.modal div.dialog {
    margin: 10px;
}
div.modal button {
    position: absolute;
    bottom: 10px;
    width: 60px;
    left: 50%;
    margin-left: -30px;
}
#header1, #header2 h1 h2 {
    font-family: "Oswald";
}
#header1 {
    background: black;
    color: white;
    padding: 25px 0;
}
#header1 a {
    color: white;
    text-decoration: none;
}
#header1 a:hover {
    color: silver;
}
.content {
    width: 950px;
    margin: auto;
    position: relative;
}
#intro {
    font-size: 30pt;
    text-transform: uppercase;
}
abbr {
    text-transform: none;
}
nav {
    float: right;
}
#header2 {
    position: relative;
    background: #538a9a;
    background: -webkit-radial-gradient(center bottom, 450px 450px, #74c0d6, #124d5f); 
    background: -moz-radial-gradient(center bottom, circle cover, #74c0d6, #124d5f); 
    background: -o-radial-gradient(center bottom, circle cover, #74c0d6, #124d5f); 
    background: radial-gradient(center bottom, circle cover, #74c0d6, #124d5f); 
    height: 220px;
    border-bottom: 6px solid black;
}
#header2 .ornament {
    position: absolute;
    background-image: url(images/header2bg.png);
    top: 0px;
    left: 10%;
    width: 473px;
    height: 220px;
}
#header2 h1 {
    text-transform: lowercase;
    color: white;
    font-family: 'Oswald';
    font-weight: normal;
    font-size: 16pt;
    margin: 0;
    margin-bottom: 1ex;
}
#connection {
    position: absolute;
    top: 0;
    left: 0;
    background: rgba(125,200,220,.8);
    padding: 15px;
    height: 145px;
    width: 435px;
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
}
#connection table {
    display: none;
}
#connection #ip6 #privacywarning {
    position: absolute;
    display: none;
    top: 25px;
    left: 40px;
    padding: 5px;
    line-height: 20px;
    background-color: #ef423e !important;
    border-radius: 4px;
    font-weight: bold;
    color: white;
}
#domform {
    z-index: 500;
    position: absolute;
    top: 0;
    right: 0;
    background: rgba(30,85,100,.8);
    background: -webkit-linear-gradient(left, rgba(37,104,122,.8), rgba(23,65,76,1));
    background: -moz-linear-gradient(left, rgba(37,104,122,.8), rgba(23,65,76,1));
    background: -o-linear-gradient(left, rgba(37,104,122,.8), rgba(23,65,76,1));
    background: linear-gradient(left, rgba(37,104,122,.8), rgba(23,65,76,1));
    
    padding: 15px;
    height: 145px;
    width: 435px;
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
}
#connection table {
    margin: 0;
    padding: 0;
    border-spacing: 10px;
    position: relative;
    top: -10px;  /* compensate for spacing */
    left: -10px;
    width: 455px;
}
#connection td,
#connection th {
    height: 40px;
    border-radius: 8px;
    white-space: nowrap;
    line-height: 40px;
}
#connection th {
    background: white;
    background: white -webkit-linear-gradient(bottom, rgba(0,0,0,.2), transparent 27px);
    
    background: white -moz-linear-gradient(bottom, rgba(0,0,0,.2), transparent 27px);
    background: white -o-linear-gradient(bottom, rgba(0,0,0,.2), transparent 27px);
    background: white linear-gradient(bottom, rgba(0,0,0,.2), transparent 27px);
    width: 135px;
}
#connection table.table-size-fix th {
    /* In Mozilla, the text (IPv6 address) may overflow. Even though the first
    column has more than enough free room, it won't reformat the table. */
    width: auto !important;
    padding: 0 5px;
}
#connection td {
    background: white;
    background: white -webkit-linear-gradient(bottom, rgba(0,0,0,.2), transparent 27px);;
    background: white -moz-linear-gradient(bottom, rgba(0,0,0,.2), transparent 27px);;
    background: white -o-linear-gradient(bottom, rgba(0,0,0,.2), transparent 27px);;
    background: white linear-gradient(bottom, rgba(0,0,0,.2), transparent 27px);;
    padding-right: 5px;
}

#domform input, #domform #start {
    height: 50px;
    border-radius: 8px;
    font-size: 18pt;
    float: left;
    border: 0;
    padding: 0 5px;
}
#domform input {
    background: white;
    background: white -webkit-linear-gradient(bottom, rgba(0,0,0,.2), transparent 35px);
    
    background: white -moz-linear-gradient(bottom, rgba(0,0,0,.2), transparent 35px);
    background: white -o-linear-gradient(bottom, rgba(0,0,0,.2), transparent 35px);
    background: white linear-gradient(bottom, rgba(0,0,0,.2), transparent 35px);
    color: black;
    margin-right: 10px;
    width: 280px;
}
#domform a#start {
    display: block;
    line-height: 50px;

    font-family: 'Oswald';
    background: #3ca0b0;
    background: #3ca0b0 -webkit-linear-gradient(bottom, rgba(0,0,0,.5), transparent 35px);
    background: #3ca0b0 -moz-linear-gradient(bottom, rgba(0,0,0,.5), transparent 35px);
    background: #3ca0b0 -o-linear-gradient(bottom, rgba(0,0,0,.5), transparent 35px);
    background: #3ca0b0 linear-gradient(bottom, rgba(0,0,0,.5), transparent 35px);
    color: white;
    text-decoration: none;
}
#domform a#start:hover {
    color: white;
    background: #3ca0b0;
    background: #3ca0b0 -webkit-linear-gradient(top, rgba(0,0,0,.5), transparent 35px);
    background: #3ca0b0 -moz-linear-gradient(top, rgba(0,0,0,.5), transparent 35px);
    background: #3ca0b0 -o-linear-gradient(top, rgba(0,0,0,.5), transparent 35px);
    background: #3ca0b0 linear-gradient(top, rgba(0,0,0,.5), transparent 35px);
}
#main {
    border-top: 1px solid #485a5e;
    border-bottom: 6px solid black;
    background: #b4dbea;
    background: -webkit-linear-gradient(top, #b4dbea, white 400px);
    background:    -moz-linear-gradient(top, #b4dbea, white 400px);
    background:     -ms-linear-gradient(top, #b4dbea, white 400px);
    background:      -o-linear-gradient(top, #b4dbea, white 400px);
    background:         linear-gradient(top, #b4dbea, white 400px);
    -pie-background:    linear-gradient(top, #b4dbea, white 400px);
    behavior: url(js/PIE.htc);
}
#footer {
    position: relative;
    background: #124d5f;
    background: -webkit-linear-gradient(top, #0a2f38, #124d5f 6px);
    background: -moz-linear-gradient(top, #0a2f38, #124d5f 6px);
    background: -o-linear-gradient(top, #0a2f38, #124d5f 6px);
    background: linear-gradient(top, #0a2f38, #124d5f 6px);
    padding: 15px 0;
    border-bottom: 60px solid black;
    color: white;
    font-size: 8pt;
    height: 160px;
}
#footer .ornament {
    position: absolute;
    background-image: url(images/footerbg.png);
    top: 0px;
    right: 10%;
    width: 473px;
    height: 190px;
}
#footer a {
    color: white;
    text-decoration: none;
}
#footer a:hover {
    color: silver;
    text-decoration: underline;
}
#footer p {
    margin-bottom: 15px;
    max-width: 31em;
    line-height: 150%;
}
p#disclaimer {
    color: #679ba9;
    font-size: 110%;
}
#footer p#contact {
    max-width: none;
}
.badge {
    background-image: url(images/neutral30.png);
    position: relative;
    width: 30px;
    height: 30px;
    margin: 5px;
    float: left;
}
.good {
    background-color: #bbfd9b !important;
}
.good .badge {
    background-image: url(images/check30.png);
}
.okay {
    background-color: #fbd575 !important;
}
.okay .badge {
    background-image: url(images/okay30.png);
}
.bad {
    background-color: #ef423e !important;
}
.bad .badge {
    background-image: url(images/cross30.png);
}
.bad a {
    color: white;
}
.bad a:hover {
    color: silver;
}
#main h2, #verdict {
    font-family: 'Oswald';
    font-weight: normal;
    font-size: 20pt;
    line-height: 45px;  /* Like the rating stars */
}
#verdict iframe {
    /* Facebook like-button */
    margin-left: 1em;
}
#main h2 {
    color: white;
    text-transform: lowercase;
    margin-top: 0;
    margin-bottom: 15px;
}
#verdict, #ratingdiv, #linktext {
    margin-bottom: 15px;
    margin-left: 15px;
}
#timeinfo {
    margin-left: 15px;
    line-height: 110%;
}
#timeinfo th, #timeinfo td {
    padding: 0;
    font-size: 70%;
    opacity: .6;
    text-align: left;
    font-weight: normal;
}
#tweet {
    margin-top: 15px;
    margin-left: 90px;
}
a#fbshare {
    position: relative;
    top: +4px;
    left: +5px;
}
#main h2 .dom {
    color: black;
}
#main .content {
    margin-top: 10px;
    padding-bottom: 15px;
    min-height: 400px;
    background: url(images/bordjes.png) 600px bottom no-repeat;
}
#results, #list {
    display: none;
}
#ratingback {
    display: none;
    position: absolute;
    top: 0;
    left: 340px;
    background: url(images/star2.png) 0 0;
    width: 225px;
    height: 45px;
    overflow: hidden;
}
#ratingfront {
    background: url(images/star1.png) 0 0;
    width: 113px;
    height: 45px;
    overflow: hidden;
}
#main table.dns {
    background: white;
    border-radius: 15px;
    border-spacing: 15px 10px;
}
#main table.dns th, #main table.dns td {
    /* padding: 20px 15px; CRASHES CHROME */
    padding: 0 15px;
    height: 50px;  /* 60px crashes chrome too */
    min-width: 40px;
    border-radius: 15px;
}
#main table.dns th:first-child {
    background: #c3dfed;
}
#list table {
    margin-bottom: 170px;
}
#list tr:hover th:first-child {
    background: teal;
}
#list tr:hover th:first-child a {
    color: white;
}
#main table.dns td {
    background: #e7e7e9;
}
#main table.dns tr:first-child th {
    font-family: 'Oswald';
    font-weight: normal;
    font-size: 28pt;
    padding: 0;
}
#main table.dns tr:first-child th:first-child {
    background: white;
}
#main .good {
    background: url(images/check40.png) 7px center no-repeat;
}
#main .okay {
    background: url(images/okay40.png) 7px center no-repeat;
}
#main .bad {
    background: url(images/cross40.png) 7px center no-repeat;
}
#list td {
    width: 40px;
    background-position: center center !important;
}
#results table.dns td:last-child {
    padding-left: 60px;
}
input#link {
    border: 1px solid silver;
    width: 320px;
}
.clear {
    clear: both;
}
#measure {
    float: left;
}
.loading {
    cursor: wait;
}
div.dialog, div.hint {
    display: none;
}
.box, .hof {
    background: #f1f1f1;
    border-radius: 20px;
    box-shadow: inset 3px 3px 4px rgba(0,0,0,.1);
    width: 306px;
    margin-bottom: 10px;
    margin-top: 10px;
}
.box p, .hof p {
    margin: 10px 20px;
}

.hof {
    background: white;
    box-shadow: none;
    float: right;
    margin-right: 8px;
}
#overview h2 {
    color: black;
}
#overview .boxes {
    width: 950px;
}
.box h3, .hof h3 {
    background: #266a7f;
    color: white;
    margin-top: 0;
    margin-bottom: 2px;
    font-weight: bold;
    font-size: 18pt;
    padding: 15px;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
}
.hof h3 {
    background: #b3d87b;
    color: black;
    position: relative;
}
.hof h3 img {
    position: absolute;
    bottom: 0;
    right: -32px;
    z-index: 600;
}
.box ol, .hof ul {
    margin: 10px 0;
}
.box li {
    position: relative;
    height: 22px;
}
.box li a {
    display: inline-block;
    white-space: nowrap;
    width: 200px;
    overflow: hidden;
}
.box li .rating {
    position: absolute;
    right: 10px;
    top: 0;
    height: 22px;
    width: 110px;
    background: #f1f1f1 url(images/star2small.png);
}
.box li .ratingfront {
    height: 22px;
    width: 0;
    background: url(images/star1small.png);
}
time:before {
    content: " ~ "
}
time {
    color: silver;
}
#hoflist a {
    display: block;
    float: left;
    margin-right: 2ex;
}
.bordjesspacer {
    height: 160px;
}
a img { border: 0 }
#overview {
    display: none;
}
#hofpage {
    display: none;
}
.puny .nonascii {
    background-color: rgba(0,0,0,.2);
    border-radius: 5px;
}