/* =========================================================================
    Dave Robertson Portfolio - Stylesheet for Screen
   ========================================================================= */

/* === GENERAL CONSTRUCTS ================================================== */

    body {
        color:#6F737B;
        background:#FFFFFF url(../img/bg.png) repeat-x;
        font:normal 10px verdana,arial,sans-serif;
        margin:0; padding:0;
        text-align:center;
    }

    h1  { margin:0; padding:0; }
    h2  { margin:0 0 5px 0; padding:0; font:normal 24px "Trebuchet MS",tahoma,verdana,arial,helvetica,sans-serif; height:30px; color:white; clear:both; }
    h3  { margin:0; padding:2px 5px; font:bold 14px "Trebuchet MS",tahoma,verdana,arial,helvetica,sans-serif; color:#FFFFFF; background:#6F737B; clear:both; border-bottom:2px solid #C0C3CD; }
    h4  { margin:0; padding:0; font-size:11px; }
	h5  { }
	h6  { }

    p   { margin:0; padding:0 0 16px 0; line-height:16px; }

    ul, ol  { }
    li      { }
        ul.expanded li,
        ol.expanded li { padding-bottom:15px; }

    table {font-size: 1em !important;}

    a       { color:#6F737B; }
    a:hover { color:#CC6600; }

    img { border:0; }

    hr {
        height:1px;
        width: 100%;
        border-bottom-width : 0px;
        border-left-width : 0px;
        border-right-width : 0px;
        border-top : 2px solid #D1CCC7;
        margin:8px 0px;
    }

    .fixer {
        height:0px;
        font-size:1px;
        overflow:hidden;
        clear:both;
    }

    /* html { overflow: -moz-scrollbars-vertical; } fix for Mozilla scrollbar, but doesn't validate */
    html { height:100%; margin-bottom:.01em; }

    html,body { height:100%; }

/* --- END: GENERAL CONSTRUCTS ---------------------------------------------- */



/* === LAYOUT =============================================================== */

    /* === CONTAINERS ======================================================= */

        #container {
            background:url(../img/bg.png) repeat-x;
            height:100%;
            width:100%;
        }


        #content {
            position:relative;
            width:950px;
            margin:0 auto;
            padding:50px 10px 0 10px;
            text-align:left;
        }

    /* --- END: CONTAINERS -------------------------------------------------- */


    /* === HEADER =========================================================== */

        #header {
            height:96px;
            background:url(../img/dr.gif) repeat-x bottom center;
            min-width:970px;
        }

        #header h1 {
            display:none;
        }

        /* === MAIN NAVIGATION ============================================== */

            #menu {
                width:960px;
                margin:0 auto;
                padding:0 10px 0 0;
                font-size:10px;
            }

            #menu ul {
                margin:45px 72px 0 0;
                float:right;
                padding:0;
                list-style:none;
                display:inline;
            }

            #menu ul li {
                margin:0 0 1px 0;
                padding:0;
                display:inline
            }

            #menu ul li a {
                float:left;
                display:block;
                margin:0 1px 0 0 ;
                text-align:center;
                width:70px;
                line-height:21px;
                text-decoration:none;
                text-align:center;
                text-transform:lowercase;
                color:#FFFFFF;
                outline:0;
            }

            #menu ul li a:hover {
                background-color:white;
                color:#6F737B;
                cursor:pointer;
            }

            #menu ul li.current a {
                margin:28px 0 0 0;
                background-color:white;
                color:#6F737B;
            }

        /* --- END: MAIN NAVIGATION ----------------------------------------- */

    /* --- END: HEADER ------------------------------------------------------ */


    /* === FOOTER =========================================================== */

        #footer {
            background:#F3F3F3;
            position:fixed;
            bottom:0px;
            left:0;
            height:23px;
            border-top:8px solid #FFFFFF;
            width:100%;
        }

        #footer p {
            margin:0 auto;
            width:960px;
            text-align:right;
            padding:0 10px;
            line-height:20px;
            color:#A5A5AF;
        }

    /* --- END: FOOTER ------------------------------------------------------ */

/* --- END: LAYOUT ---------------------------------------------------------- */



/* === SECTION SPECIFIC ===================================================== */



    /* === OVERVIEW ========================================================= */

        #overview {
            color:#61656D;
            background:url(../img/tree.gif) no-repeat top right;
            margin:-50px 0 0 0;
            padding:50px 0 0 0;
            height:400px;
        }

        #overview p {
            width:425px;
        }

        #overview p#sig {
            background-image:url(../img/sig.gif);
            width:64px; height:35px;
            margin:0; padding:0;
            text-indent:-9999px;
        }

        img#dave {
            float:left;
            margin:2px 10px 0 0;
            background:white;
            padding:6px;
            border:1px solid #B0B5C0;
        }

    /* --- END: OVERVIEW ---------------------------------------------------- */



    /* === WEBSITES ========================================================= */

        /* === LIST WEBSITES ================================================ */

            #websites h3 {
                margin:15px 10px 10px 0;
                border-bottom:0;
                background-color:#AAAFBB;
            }

            img.thumb {
                float:left;
                background-color:white;
                padding:5px;
                margin:0 10px 10px 0;
            }

        /* --- END: LIST WEBSITES ------------------------------------------- */

        /* === WEBSITE DETAILS ============================================== */

            #site_details {
                position:relative;
            }

            /* === SLIDE NAVIGATION === */

                ul#slides {
                    height:35px;
                    margin:0 22px 0 0;
                    padding:0;
                    list-style:none;
                    float:right;
                }

                ul#slides li {
                    display:inline;
                    margin:0;
                    padding:0;
                }

                ul#slides li a {
                    float:left;
                    display:block;
                    background-color:white;
                    height:20px;
                    width:20px;
                    margin:5px 0 0 10px;
                    text-decoration:none;
                    text-align:center;
                    line-height:20px;
                    color:#81858D;
                    outline:0;
                }

                ul#slides li a:hover {
                    background-color:black;
                }


            /* === BACK BUTTON === */

                #back {
                    position:absolute;
                    top:0; left:0;
                    width:20px;
                    background:white;
                }

                #back a {
                    display:block;
                    background:white url(../img/back.gif) no-repeat 6px 6px;
                    height:20px;
                    width:20px;
                    text-decoration:none;
                    line-height:20px;
                    text-indent:-9999px;
                    overflow:hidden;
                    outline:0;
                }

                #back a:hover {
                    background-color:black;
                }

            /* === SITE IMAGE === */

                #site_image_container {
                    width:464px;
                }

                img#site_image {
                    border:7px solid white;
                }

            /* === SITE DATA === */

                #site_data {
                    width:464px;
                    float:right;
                }


                #site_data dl {
                    margin:0;
                    padding:0;
                }

                #site_data dt {
                    clear:left;
                    background:white;
                    border-top:2px solid white;
                    width:100px;
                    text-align:right;
                    float:left;
                    padding:4px 5px 4px 5px;
                    margin:0 5px 2px 0;
                }

                #site_data dd {
                    color:white;
                    border-top:2px solid white;
                    padding:4px 5px 4px 5px;
                    margin:0 0 2px 0;
                }

                #site_data dd a { color:white; }


                #data_summary {
                    clear:left;
                    background:white;
                    padding:5px 10px 0 10px;
                    height:450px;
                }

        /* --- END: WEBSITE DETAILS ----------------------------------------- */

    /* --- END: WEBSITES ---------------------------------------------------- */



    /* === RESUME =========================================================== */

        #resume h4 {
            font-size:10px;
            background:white;
            margin:0;
            padding:4px 5px;
        }

        #resume ul {
            margin:0 0 10px 0;
            padding:0;
            background:#DEE0E5;
        }

        #resume li {
            margin:0;
            padding:0;
            list-style:none;
            padding:2px 4px;
            border-top:1px solid #CBCED6;
        }

        #resume p {
            padding:2px 5px 15px 5px;
        }

        /* === SKILLS COLUMN === */

            #skills {
                width:170px;
                float:left;
                padding:0;
                margin:0 15px 0 0;
            }

        /* === EXPERIENCE COLUMN === */

            #experience {
                width:480px;
                float:left;
                margin:0 15px 0 0;
            }

            #experience h4 {
                font-weight:normal;
                border-bottom:1px solid #CBCED6;
            }

            #experience .date {
                float:right;
            }

            #experience ul {
                border-top:1px solid #CBCED6;
            }

            #experience li {
                list-style:square;
                margin:0 0 0 20px;
                padding:2px 4px 2px 0;
                border:0;
            }

            #education {
                float:left;
                width:200px;
            }

            #education p {
                background:#DEE0E5;
            }

        /* === DOWNLOAD CALLOUT === */

            p#download {
                background:none;
                margin:0;
                padding:0;
            }

            p#download a {
                display:block;
                background:#FFFFFF url(../img/pdf.gif) no-repeat 10px 10px;
                padding:10px 10px 12px 55px;
                text-decoration:none;
                outline:0;
                height:32px;
            }

            p#download a:hover {
                background-color:#6F737B;
                color:white;
            }

    /* --- END: RESUME ------------------------------------------------------ */



    /* === CONTACT ========================================================== */

        p#address {
            width:185px;
            float:left;
            background:#DEE0E5;
            padding:5px 10px 10px 10px;
            height:140px;
        }

        /* === CONTACT FORM === */

            form#commentForm {
                margin:0;
                padding:0;
                width:450px;
                float:left;
            }

            form#commentForm input,
            form#commentForm textarea,
            form#commentForm select {
                font:normal 10px verdana,arial,sans-serif;
                color:#6F737B;
                background:white;
                border:0;
                width:300px;
                padding:3px;
                margin:0;
            }

            form#commentForm input.button {
                background-color:#BABEC8;
                color:white;
                border:3px solid #E9EAEC;
                padding:2px 20px;
                width:auto;
            }

            form#commentForm label {
                display:block;
                float:left;
                width:80px;
                padding-top:3px;
                background:#D4D7DD;
                height:12px;
                margin:0 3px 0 0;
                padding:3px;
            }

            .formRow {
                padding:0 0 3px 0;
                clear:left;
            }

            .buttonRow {
                padding:0 0 0 88px;
            }

    /* --- END: CONTACT ----------------------------------------------------- */