/**
 * @package danbettles_net
 * @copyright Copyright (c) 2009, Dan Bettles 
 * @author Dan Bettles <danbettles@yahoo.co.uk>
 */

body {
    font-family: "lucida grande", tahoma, sans-serif;
    font-size: 80%;
    color: #333;
    background-color: #fff;
    margin: 0;
    padding: 30px 0 0;
}

p {
    margin: 0 0 .5em 0;
}

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

/*div#shrinkwrap-outer {*/
/*    position: absolute;*/
/*    top: 50%;*/
/*    width: 100%;*/
/*    overflow: visible;*/
/*}*/

div#shrinkwrap-inner {
    /*position: relative;*/
    /*top: -342px;*/
    width: 520px;
    text-align: center;
    margin: 0 auto;
}

/*~~~ HEADER ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

div#header h1 {
    font-size: 24px;
    font-weight: normal;
    letter-spacing: 1px;
    text-align: right;
    margin: 0 0 10px;
    padding: 0;
}

/*~~~ STATUS ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

div#status {
    width: 100%;
    background: url(../image/sprites-paneledges.png) 0 -10px no-repeat;
    margin-bottom: 10px;
    padding-top: 10px;
}

div#status h2 {
    position: absolute; left: -999px; top: -999px; font-size: 0;
}

div#status p {
    background: url(../image/panel-middle.png) 0 0 repeat-y;
    margin: 0;
    padding: 0 10px;
}

div#status div.status-bottom {
    height: 10px;
    background: url(../image/sprites-paneledges.png) 0 0 no-repeat;
}

/*~~~ SITES ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

div.sites {
    width: 100%;
    background: url(../image/sprites-paneledges.png) 0 -10px no-repeat;
    margin-bottom: 10px;
    padding-top: 10px;
}

div.sites-bottom {
    height: 10px;
    clear: both;
    background: url(../image/sprites-paneledges.png) 0 0 no-repeat;
}

div.sites h2 {
    position: absolute; left: -999px; top: -999px; font-size: 0;
}

/*--------------------------------------------------------------------------------------------------------------------*/

div.sites dl {
    float: left;
    width: 500px;
    list-style: none;
    background: url(../image/panel-middle.png) 0 0 repeat-y;
    margin: 0;
    padding: 0 10px;
}

/*Total height = 180px (160 + 3 + 14 + 3)*/
div.sites dl dt {
    float: left;
    width: 160px;
    padding: 0;
    margin: 0 10px 0 0;
}

div.sites dl dt.column-last {
    margin-right: 0;
}

div.sites dl dt a,
div.sites dl dt a:link,
div.sites dl dt a:visited,
div.sites dl dt a:hover {
    display: block;
    width: 160px;
    font-size: 14px;
    text-decoration: none;
    text-shadow: none;
    color: #fff;
    background-image: url(../image/sprites-icons.png);
    background-repeat: no-repeat;
    margin: 0;
    padding: 163px 0 3px 0;
}

div.sites dl dt a:hover,
div.sites dl dt a.selected {
    text-shadow: 1px 1px 1px #000;
}

div.sites dl dt.row-last a {
    padding-bottom: 0;
}

div.sites dl dd {
    position: absolute;
    display: none;
    width: 146px;
    height: 146px;
    color: #fff;
    text-align: center;
    vertical-align: middle;
    background: url(../image/sprites-icons.png) -960px 0 no-repeat;
    margin: 0;
    padding: 7px;
    cursor: pointer;
}

div.sites dl dd.selected {
    display: block;
}

/*--------------------------------------------------------------------------------------------------------------------*/

div#mine.sites dl dt.item-1 a {
    background-position: 0 0;
}

div#mine.sites dl dt.item-2 a {
    background-position: -160px 0;
}

div#mine.sites dl dt.item-3 a {
    background-position: -320px 0;
}

div#mine.sites dl dt.item-4 a {
    background-position: -640px 0;
}

div#mine.sites dl dt.item-5 a {
    background-position: -800px 0;
}

div#theirs.sites dl dt.item-1 a {
    background-position: -480px 0;
}

div#theirs.sites dl dt.item-2 a {
    background-position: -1120px 0;
}

div#theirs.sites dl dt.item-3 a {
    background-position: -1280px 0;
}

/*~~~ FOOTER ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

div#footer h2 {
    position: absolute; left: -999px; top: -999px; font-size: 0;
}

p#copyright {
    font-size: 10px;
    text-align: left;
    color: #ccc;
    margin: 0;
    padding: 0;
}