/*
 * PHP Black Book.com CSS
 */

/* Colours */
body, #header, #header a, #header a:visited, #footer, #footer a
    {
    background-color: #000000;
    color: #ffffff;
    }
nav, nav a, nav ul li
    {
    background-color: #666666;
    color: #ffffff;
    }
/* Background color change on Hover */
nav a:hover, #footer a:hover { background-color: #66cc66; }

#content
    {
    background-color: #ffffff;
    color: #000000;
    }
h2  { color: #6666cc; }
h3  { color: #66cc66; }
h4  { color: #cccc66; }
h5  { color: #cc9966; }
h6  { color: #ff3300; }
/* Blue */
pre, code { color: #0033ff; }
/* Sky blue #00ccff */
.external { color: #00ccff; }
/* Red. */
.error { background-color: #ff3300; }
/* yellow for highlighting changes. */
.yellow { background-color: #ffff00; }
/* Pink */
.database a       { background-color: #cc6666; }
.database a:hover { background-color: #ff6666; }
.design a       { background-color: #cc66cc; }
.design a:hover { background-color: #ff66ff; }
/* PHP light #777bb3, dark #484c89 */
.php a       { background-color: #6666cc; }
.php a:hover { background-color: #9966ff; }
/* Deep blue */
.reliability a       { background-color: #0033cc; }
.reliability a:hover { background-color: #0066ff; }
/* Aqua blue */
.testing a       { background-color: #0099ff; }
.testing a:hover { background-color: #00ffff; }

/* Links have to be in this order */
a:visited { color: #551a8b; }
#footer a:visited { color: #aa34ff; }

/* Font */
body { font-family : Verdana, "Bitstream Vera Sans", "DejaVu Sans", Geneva, Arial, Sans-serif; }
blockquote, q { font-family: Georgia, "Bitstream Charter", "Times New Roman", serif }
code, pre { font-family : "Bitstream Vera Sans Mono", Courier, "DejaVu Sans Mono", "Liberation Mono", Monospace; }
#header a.site, #footer, #content
    {
    font-family: Sans-Serif;
    }
#header
    {
    font-weight: bold;
    }

pre { font-size: 130%; }
.html_preview
    {
    border-color: #ff9933;
    border-style: solid;
    border-width: 5px;
    }

#header a.site
    {
    text-decoration: none;
    font-size: 2em;
    }

.dateline
    {
    font-size: 70%;
    font-style: italic;
    }

/*
 * Layout
 */
body, h1, h2, p, ol, ul, nav, nav ul, #footer ul, nav ul li, #footer ul li { margin: 0; }
#header a, h2, p, ol, ul, nav ul, #footer ul  { padding: 0; }
#header, #footer { padding: 0.5em; }
#content
    {
    overflow: auto;
    padding: 0.5em;
    }
h1            { padding: 0.3em 0 0.3em 0; }
h2, p, ol, ul { padding-bottom: 0.5em; }
ol { padding-left: 2em; }

.dateline
    {
    text-align: right;
    }
span.error
    {
    padding-left: 5px;
    padding-right: 5px;
    padding-top: 2px;
    padding-bottom: 2px;
    }

.html_preview
    {
    margin: 0;
    height: 300px;
    width: 98%;
    }

/*
 * Remove the margin, padding, and list style from the ul element.
 * Make the position relative.
 */
nav ul, #footer ul
    {
    list-style: none;
    position:   relative;
    }

/* Make the navigation items inline. */
nav ul li, #footer ul li { display: inline-block; }

/*
 * Style the links
 */
a.site, nav a, #footer ul a
    {
    display: block;
    padding: 0 0.5em;
    }
a.site, nav a, #footer a
    {
    text-decoration: none;
    }
a.site, nav a
    {
    font-size: 130%;
    line-height: 170%;
    }

/* Hide dropdowns until hovered or selected. Giving them a position of absolute */
nav ul ul
    {
    display: none;
    position: absolute;
    top: 100%;
    }

/* Display dropdowns on Hover */
nav ul li:hover > ul
    {
    display: inherit;
    }

/* First Tier Dropdown */
nav ul ul li
    {
    min-width: 10em;
    display:   list-item;
    position:  relative;
    }

/* Second, Third and more Tiers
 * We move the 2nd and 3rd etc tier dropdowns to the left
 * by the amount of the width of the first tier.
*/
nav ul ul ul
    {
    position: absolute;
    top:  0;
    left: 100%;
    }

/*
 * Give list items a + to indicate there are more entries below the link.
 * Remove the + when the link has no children.
 */
li > a:after            { content: '+'; }
li > a:only-child:after { content: ''; }
li > a[target="_blank"]:after { content: ''; }