body {
    font-family:Verdana;
    font-size:14px;
    margin:0;
    background-color:#F5F5F5;
}

h1 {
    text-align:center;
    margin-top:0;
}

#content {
    width:1000px;
    margin:0 auto 20px auto;
    border-left:1px solid #000000;
    border-right:1px solid #000000;
    border-bottom:1px solid #000000;
    padding:20px 0;
    box-shadow:0 0 20px #000000;
    background-color:#FFFFFF;
}

#connector-select, #buttons, #legend, #pinout-title, #pinouts{
    width:900px;
    margin-left:auto;
    margin-right:auto;
}

#buttons {
    text-align:center;
    padding:10px;
}

#connector-select {
    margin:0 auto;
    padding:0 10px 10px 10px;
    border:1px solid #000000;
}

#connector-select h3 {
    font-size:15px;
}

#connector-select::after, .connector-set::after, .connector-checkboxes::after {
    content:"";
    display:block;
    height:0;
    clear:both;
}

.connector-select-group {
    width:300px;
    float:left;
}

#pinout-title h2 {
    font-size:25px;
    margin-bottom:5px;
}

#pinout-title h3 {
    font-size:15px;
    margin:5px 0;
}

#legend, #pinouts {
    -webkit-print-color-adjust:exact;
    color-adjust:exact;
}

#legend {
    margin-top:20px;
}

.legend-item {
    width:130px;
    float:left;
    font-size:14px;
    font-weight:bold;
    border:2px solid #000000;
    margin:3px;
    padding:3px;
}

.label-inputs {
    margin-top:10px;
    line-height:30px;
}

#series-name {
    width:300px;
}

#compatible {
    width:500px;
}

#bg-warning {
    width:900px;
    height:13px;
    text-align:center;
    position:absolute;
    top:65px;
    font-weight:bold;
    color: #FF0000;
    font-size:11px;
    text-transform:uppercase;
}

#bg-warning-overlay {
    width:900px;
    height:13px;
    background-image:url(images/blank.png);
    position:absolute;
    top:65px;
}

#pinouts {
    width:1000px;
}

#pinouts h3 {
    text-align:center;
    margin:15px 0 5px 0;
}

#pinouts h4 {
    text-align:center;
    font-variant:small-caps;
    margin:5px 0;
}

.connector-set {
    width:500px;
    float:left;
}

.connector-set-large {
    width:1000px;
}

.device-side {
    width:250px;
    float:left;
}

.psu-side {
    width:250px;
    float:right;
}

.connector-set-large .device-side, .connector-set-large .psu-side {
    width:500px;
}

.connector-box {
    margin:10px auto;
    background-repeat:no-repeat;
}

.connector-box-front.connector-box-sata {
    width:192px;
}

.connector-box-molex {
    width:158px;
}

.connector {
    padding:2px;
    border:2px solid black;
    font-weight:bold;
    background-repeat:no-repeat;
}

.connector-box-front .connector-sata {
    width:174px;
    height:33px;
    padding:0 0 0 18px;
    border:0;
    background-image:url(images/sata-front.png);
}

.connector-molex {
    width:136px;
    padding:5px 11px 11px 11px;
    border:0;
}

.connector-box-front .connector-molex {
    background-image:url(images/molex-front.png);
}

.connector-box-back .connector-molex {
    background-image:url(images/molex-back.png);
}

.connector::after, #pinouts::after {
    content:"";
    display:block;
    height:0;
    clear:both;
}

.clip {
    height:14px;
    margin:0 auto;
    text-align:center;
    font-size:10px;
    font-weight:bold;
    line-height:14px;
    width:60px;
}

.connector-box-atx .clip, .connector-box-pcie .clip {
    background-color:black;
    color:#FFFFFF;
}

.pin {
    float:left;
    width:24px;
    height:24px;
    line-height:24px;
    margin:2px;
    padding:3px;
    text-align:center;
}

.pin.highlighted {
    border:4px solid #FF0000;
    margin:-2px;
}

.pin-two-line {
    line-height:11px;
    font-size:11px;
}

.connector-box-front .connector-atx .connector-row-0 div:nth-child(4n),
.connector-box-front .connector-atx .connector-row-0 div:nth-child(4n+1),
.connector-box-front .connector-atx .connector-row-1 div:nth-child(4n+2),
.connector-box-front .connector-atx .connector-row-1 div:nth-child(4n+3),
.connector-box-front .connector-pcie .connector-row-0 div:nth-child(-n+2),
.connector-box-front .connector-pcie .connector-row-1 div:nth-child(n+2) {
    background-image:url(images/pin-front-round.png);
}

.connector-box-front .connector-atx .connector-row-0 div:nth-child(4n+2),
.connector-box-front .connector-atx .connector-row-0 div:nth-child(4n+3),
.connector-box-front .connector-atx .connector-row-1 div:nth-child(4n),
.connector-box-front .connector-atx .connector-row-1 div:nth-child(4n+1),
.connector-box-front .connector-pcie .connector-row-0 div:nth-child(n+3),
.connector-box-front .connector-pcie .connector-row-1 div:first-child {
    background-image:url(images/pin-front-square.png);
}

.connector-box-front .connector-sata .pin {
    opacity:0;
    width:25px;
    margin:1px;
}

.connector-box-back .pin {
    background-image:url(images/pin-back.png);
}

.connector-box.connector-box-front .connector-pcie {
    background:url('data:image/gif;base64,R0lGODlhBAADAIAAAAAAAP///yH5BAAHAP8ALAAAAAAEAAMAAAIDhI9WADs=') no-repeat 102px 4px;
}

[id="Oy4"] .connector-box-device.connector-box-front, [id="OyO"] .connector-box-device.connector-box-front {
    background:url(images/8pin-split-right.png);
}

[id="Oy4"] .connector-box-device.connector-box-back, [id="OyO"] .connector-box-device.connector-box-back {
    background:url(images/8pin-split-left.png);
}

[id="4y4"] .connector-box-device, [id="4yO"] .connector-box-device {
    background:url(images/8pin-split-middle.png);
}

.pin-front-r {
    background-image:url(images/pin-front-round.png);
}

.pin-front-s {
    background-image:url(images/pin-front-square.png);
}

.pin-back {
    background-image:url(images/pin-back.png);
}

.connector-box-front .connector-molex .pin {
    width:24px;
    height:24px;
    line-height:24px;
    padding:0;
    border-radius:15px;
    border:3px solid #000000;
}

.connector-box-front .connector-molex .pin.highlighted {
    border:3px solid #FF0000;
    margin:2px;
}

.pin-0 {
    background-color:#000000;
    color:#FFFFFF;
}

.pin-3 {
    background-color:#FFA500;
}

.pin-5 {
    background-color:#FF0000;
    color:#FFFFFF;
}

.pin-12 {
    background-color:#FFFF00;
}

.pin--12 {
    background-color:#0000FF;
    color:#FFFFFF;
}

.pin-5sb {
    background-color:#800080;
    color:#FFFFFF;
}

.pin-pon {
    background-color:#008000;
    color:#FFFFFF;
}

.pin-pg {
    background-color:#DDDDDD;
}

.pin-s {
    background-color:#666666;
    color:#FFFFFF;
}

.pin-res {
    color:#999999;
}

.pin-diff {
    color:#FF0000;
}

#reponote {
    width:700px;
    margin:0 auto;
    text-align:justify;
}

#repo {
    width:600px;
    margin:0 auto;
}

#repofilter {
    padding:8px;
}

#repo-table {
    width:600px;
    border:1px solid #CCCCCC;
    border-collapse:collapse;
    border-spacing:0;
    margin:20px 0;
}

#repo-table tbody {
    background:url(images/repo-table-bg.png);
}

#repo-table tr {
    border-bottom:1px solid #CCCCCC;
}

#repo-table tbody tr:hover {
    box-shadow:inset 0 1px 7px #333333;
}

#repo-table td, #repo-table th {
    padding:8px;
    text-align:left;
}

#repo-table td {
    cursor:pointer;
}

@media print {
    body {
        background-color:#FFFFFF;
    }

    #content {
        border:none;
        box-shadow:none;
    }

    #buttons, #connector-select {
        display:none;
    }
}