div, span, body, ul, li, h1, h2, h3, h4, img, p, form {
    margin: 0; padding: 0; border: 0;
}

body {
    font-size: 100%;
    text-align: center;
    font-family: Verdana;
    font-size: 100%;
    margin-bottom: 1em;
}

.clear { clear: both;}
.decent { color: #808080; }
.invisible { display: none; }

#page {
    width: 100%;
    text-align: left;
    margin: 0 auto;
    border-top: 1px solid #E7E7E7;
}

    #logo {
        float: left;
        background-image: url('/snippets/images/logo_bg.png');
        width: 100%;
    }

        #logo a {
            float: left;
            color: #4E4E4E;
            font-family: Arial;
            font-size: 2.4em;
            font-weight: bold;
            text-decoration: none;
            text-shadow: 1px 1px 0px #FFFFFF;
            padding: 8px 10px;
        }

    #menu {
        float: left;
        background-image: url('/snippets/images/menu_bg.png');
        height: 27px;
        width: 100%;
    }

        #menu ul {
            float: left;
            height: 27px;
            width: 60%;
            list-style-type: none;
            margin-left: 23px;
        }

        #menu ul li {
            float: left;
            height: 27px;
            list-style-type: none;
            background-position: top left;
            background-repeat: no-repeat;
        }

        #menu ul li a { float: left; height: 27px; }
        #menu ul li a span { display: none; }

        li.sep {
            background-image: url('/snippets/images/menu_sep.png');
            background-position: top left;
            background-repeat: no-repeat;
            float: left;
            height: 27px;
            width: 14px;
        }



        #menu_home { background-image: url('/snippets/images/menu_home.png'); }
        #menu_home a { width: 31px; }

        #menu_browse { background-image: url('/snippets/images/menu_browse.png'); }
        #menu_browse a { width: 41px; }

        #menu_top { background-image: url('/snippets/images/menu_top.png'); }
        #menu_top a { width: 37px; }

        #menu_php_classes { background-image: url('/snippets/images/menu_php_classes.png'); }
        #menu_php_classes a { width: 67px; }

        #menu_about { background-image: url('/snippets/images/menu_about.png'); }
        #menu_about a { width: 67px; }


    #geen_line {
        background-color: #98C477;
        float: left;
        width: 100%;
        height: 5px;
        margin-top: 1px;
    }

    #content {
        float: left;
        width: 100%;
        background-color: #F1F7ED;
    }

        #inner_content {
            padding: 1em;
        }

            h1, h2, h3, h4, h5 { font-family: Trebuchet MS, Verdana, Arial; color: #464646; }
            h1 { font-size: 1.40em; border-bottom: 1px solid #D8D8D8;  }
            h2 { font-size: 1.05em; }
            h3 { font-size: 0.90em; }
            h4 { font-size: 0.70em; }

            #inner_content p { font-size: 0.8em; margin: 0.4em 0.1em; margin-bottom: 1.5em; }
            #inner_content ul li { font-size: 0.8em; }

            #inner_content a:link { color: #47692E; }
            #inner_content a:hover { color: #000000; }
            #inner_content a:active { color: #000000; }
            #inner_content a:visited { color: #000000; }

            .center_img img { vertical-align: middle; margin-right: 0.5em; }

            span.lang {
                color: #434343;
                font-size: 90%;
            }

            #inner_content ul.list {
                margin-top: 0.5em;
                margin-left: 1.3em;
            }

            #inner_content ul.list li {
                padding: 0.3em 0em;
            }

            .box {
                background-color: #FFFFFF;
                margin-top: 10px;
                border: 1px solid #98C477;
            }

            .box2 {
                margin-top: 5px;
                padding: 0;
                height: 300px;
            }

            .boxheader {
                background-color: #98C477;
                padding: 0.4em 0.7em 0.5em 0.7em;
                font-family: Verdana;
                font-size: 0.7em;
                color: #FFFFFF; background-image: url('/snippets/images/menu_bg.png');
            }

            .box_content {
                padding: 0.3em 1.1em;
                font-size: 0.73em;
            }

            .code {
                padding-top: 45px;
                background-image: url('/snippets/images/box_src.png');
                background-position: top left;
                background-repeat: no-repeat;
                width: 100%;
                font-size: 1.15em;
            }

            .code pre { font-family: "Consolas", "Bitstream Vera Sans Mono", "Lucida Console", "Courier New", Courier, monospace; }

            .code_info {
                width: 100%;
                margin-top: 15px;
            }

            .code_info a:link, .code_info a:visited { color: #414141; }

            .code_info li > div {
                font-weight: bold;
                margin-bottom: 5px;
            }

            .code_info li {
                float: left;
                list-style-type: none;
                padding: 0.9em 0.7em; font-size: 0.71em;
            }

            .code_info .box2 p { padding: 0.3em 0em 0em 0.9em; font-size: 0.71em; }

            .example {
                padding-top: 40px;
                padding-bottom: 10px;
                background-image: url('/snippets/images/box_example.png');
                background-position: top left;
                background-repeat: no-repeat;
            }

            .example a:link, .example a:visited {
                color: #414141;
            }

            #copy_source_code {
                width: 100%;
            }

            #toggle_view_area { margin: 0.2em 0em 0.5em 0.7em; }

            #example_code { font-size: 0.85em; margin-top: 1em; }

    #footer {
        background-color: #FFFFFF;
        float: left;
        width: 100%;
        margin-top: 1px;
        text-align: right;
    }

        #footer p {
            padding: 0.5em;
            font-family: Verdana;
            font-size: 0.7em;
            color: #BFDAAD;
        }

        #footer a:link, #footer a:visited { color: #BFDAAD; }


    div#SearchForm {
        float: right;
        padding: 0.1em 0.4em;
    }

        div#SearchForm input.SearchField {
            font-size: 0.5em;
            font-family: Verdana;
            background-color: #494949;
            border-top: 1px solid #353535;
            border-left: 1px solid #353535;
            border-bottom: 1px solid #797979;
            border-right: 1px solid #797979;
            color: #CCCCCC;
        }

        div#SearchForm input.SearchButton {
            font-size: 0.5em;
            font-family: Verdana;
            background-color: #494949;
            border-top: 1px solid #797979;
            border-left: 1px solid #797979;
            border-bottom: 1px solid #353535;
            border-right: 1px solid #353535;
            color: #CCCCCC;
        }

        div#SearchForm img {
            vertical-align: middle;
        }


    #related_links { font-size: 0.7em; margin-top: 0em; padding-top: 0em; border-top: 0em; }

/* Startpage */

div.start-left-col { }
div.start-right-col { }

/* Media queries */

@media (min-width:320px) {
    /* smartphones, iPhone, portrait 480x320 phones */
}
@media (min-width:481px) { /* portrait e-readers (Nook/Kindle), smaller tablets @ 600 or @ 640 wide. */ }
@media (min-width:641px) {
    /* portrait tablets, portrait iPad, landscape e-readers, landscape 800x480 or 854x480 phones */

}
@media (min-width:961px) {
    /* tablet, landscape iPad, lo-res laptops ands desktops */
    #page { margin-top: 10px; }
    .code { float: left; width: 76%; }
    .code_info {
        float: left;
        width: 20%;
        margin-left: 1.8em;
    }
    .code_info li {
        float: none;
    }
    div.start-left-col { width: 45%; float: left; margin-right: 1em; }
    div.start-right-col { width: 45%; float: left; }
}
@media (min-width:1025px) {
    /* big landscape tablets, laptops, and desktops */
    #page { width: 80%; }
}
@media (min-width:1281px) {
    /* hi-res laptops and desktops */
}

@media print {
    #page { width: 100%; border: 0; }
    #logo a { font-size: 1.4em !important; }
    #menu { display: none; }
    div.below-content { display: none; }
    #footer { color: #ccc; text-align: left; }
    div.box.code { padding-top: 0; width: 100%; border: 0; }
    .code_info { margin-left: 0 !important; width: 50%; }
    .box_content { padding: 0; }
}