F#menu/*!
@project   composer.rowy.net
@name      basic.css
@date      21-okt-2008
@author    Jo-Anne Steenbeeke
@encoding  utf-8

@version   01.04  14-jan-2015  JSt  added #menu img#skoon_plaotje
@version   01.03  04-aug-2014  JSt  id v(urniks) toegevoegd
@version   01.02  21-sep-2009  JSt  added 60 px to displayed SuperDuper and content div, and repositioned cat 60px lower
@version   01.01  21-okt-2008  JSt  Initial release

*/
@font-face {
    font-family: 'FontAwesome';
    src: url('./fonts/fontawesome-webfont.eot?v=4.3.0');
    src: url('./fonts/fontawesome-webfont.eot?#iefix&v=4.3.0') format('embedded-opentype'), url('./fonts/fontawesome-webfont.woff2?v=4.3.0') format('woff2'), url('./fonts/fontawesome-webfont.woff?v=4.3.0') format('woff'), url('./fonts/fontawesome-webfont.ttf?v=4.3.0') format('truetype'), url('./fonts/fontawesome-webfont.svg?v=4.3.0#fontawesomeregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

html, body {
    background: transparent url('/n-images/bg.gif');
    font-family: Verdana, Arial, 'Times New Roman';
    overflow:auto;
}
div#SuperDuper {
    background: #fff url('/n-images/bgcomposer.jpg') repeat-y;
    border:1px solid #444;
    height:1150px;
    margin:2px auto;
    position:relative;
    width:800px;
}
div#SuperDuper div {
    /* position:absolute; */
}

#bigHdr,
#subHdr,
#menu {
    margin:0;
    margin-left: 23px;
}

#bigHdr {
    float:left;
    margin-top:12px;
    height:34px;
}
#bigHdr h1 {
    color:#fff;
    font-size:32px;
    font-weight:normal;
    line-height:34px;
    margin:0;
    padding:0;
}

/* the language links at the top right corner */
#talen    {
    color:#000;
    float:right;
    font-size:12px;
    margin-right:25px;
    margin-top:-40px;
    line-height:21px;
    height:21px;
}
#talen a  {
    color:#000;
    text-decoration:none;
}
#talen a img {
    border:none;
    height:18px;
    margin:0 0 0 10px;
    width:32px;
}

#subHdr {
    clear:both;
    color:#e2e3ea;
    font-size: 16px;
    height:18px;
    margin-top: 5px;
    line-height:18px;
}

#menu {
    float:left;
    margin-top:25px;
    width:200px;
}

#menu img#skoon_plaotje {
    /*
    border-color:#fff;
    border-style:outset inset inset outset;
    border-width:1px;
    background-color:#fff;
    */
    margin:3px auto 5px;
    height:260px;
    width:195px;
}

/* styling the menu 'box' at the left */
#menu a   {
    border-color:#e2e2e2 #52557b #52557b #e2e2e2;
    border-style:inset outset outset inset;
    border-width:1px;
    color:#fff;
    clear:both;
    display:block;
    font-size:14px;
    height:20px;
    line-height:19px;
    margin:5px auto;
    text-decoration:none;
    text-indent:3px;
    width:99%;
}
#nomenu {
    display:none;
}
#menu a.a { background-color:#4e5772; }
#menu a.a:hover { background-color:#303143; }

#menu a.b { background-color:#8181a3; }
#menu a.b:hover { background-color:#4a4a66; }

#menu a.c { background-color:#8181a3; }
#menu a.c:hover { background-color:#4a4a66; }

#menu a.d { background-color:#a82225; }
#menu a.d:hover { background-color:#d92225; }

#menu a.art { background-color: #7e2e2e; }


#content  {
    border:1px inset #555;
    border-top-color:#8686c1;
    border-right-color:#8686c1;
    background:#fff;
    color:#000;
    float:left;
    min-height:880px;
    max-height:1050px;
    margin:0;
    margin-left:15px;
    margin-top:25px;
    overflow:auto;
    padding:0 8px 0 15px;
    width:490px;
}


#cat        {
    border:none;
    height:83px;
    left:55px;
    position:absolute;
    top:793px;
    width:82px;
}
div#menu #rowy {
    border:none;
    height:83px;
    left:55px;
    margin-left:55px;
    margin-top:25px;
    width:82px;
}

/* Styling content in text-box */
#content h2,
#content h3    { text-align:center; margin-top:10px; }
#content h2    { font: 16px Verdana, Arial, sans-serif; line-height:18px; height:18px; }
#content h3    { font: 14px Verdana, Arial, sans-serif; line-height:16px; height:16px; }

/* Alle plaatjes in het blok content zijn in principe zonder border */
#content img   { border:none; }
#content img.l { float:left; margin-right:5px;}   /* class='l' plaatjes floaten naar links met een linker marge van 5px */
#content img.r { float:right; margin-left:5px; }  /* class=´r' plaatjes naar rechts etc */

#content img.app_ad {
    height:225px;
    max-height:225px !important;
    max-width:440px !important;
    width:440px;
}

#content p   { font-size: 13px; }
#content p.q { background-color:#ffffcd;
    /* font-style:italic; */
}

#content p a { text-decoration:none; }
#content p a:hover {text-decoration:underline;}

div.rowy-van-hest img {
    cursor: nwse-resize;
    margin:5px 0; width:475px;
}
/* the bookmark links at the top right corner */
#subRight   { color:#000; font-size:12px; left:500px; line-height:21px; height:21px; text-align:right; top: 51px; width:270px; }
#subRight a { display:inline; margin-left:5px; }

#menu  .hot {
    background-color:#303143 !important;
    color:#fff;
}
#menu  .off {
    border-color:transparent;
    color:transparent;
    visibility:collapse;
}

/* id v(urniks) toegevoegd om links met een img (83x83) te gebruiken */
#menu #v      { border:none; height:83px; left:55px; margin-left:55px; margin-top:25px; width:86px; }
#menu #v img  { border: none; height: 83px; margin:auto; width:83px; }

/* Start here with declarations for smaller devices like mobiles and such */
@media screen and ( max-width:800px ) {
    html, body {
        font-size: 16px;
        line-height:18px;
        margin:0;
        overflow:auto;
        padding:0;
    }
    div#SuperDuper {
        max-width:98%;
        margin-top:1.5rem;
        width:auto;
    }
    div#bigHdr,
    div#subHdr {
        width:79%;
    }
    div#bigHdr h1 {
        font-size:1.1em;
    }
    #talen {
        margin-bottom:-5px;
        margin-top:-16px;
    }
    #talen #help {
        color:white;
        font-size:1.5em;
        text-align:center;
    }

    #nomenu {
        background-color: rgba(254,254,254,0.6);
        background-image:linear-gradient( rgba(254,254,254,0.6), rgba( 78,87,114,0.6 ) );
        border-color:#4e5772;
        border-style:solid;
        border-width:2px;
        border-bottom:none;
        cursor:pointer;
        display:block;
        font-size:135%;
        height:1.5rem;
        left:0.9%;
        line-height:1.5rem;
        right:0.9%;
        position:fixed;
        top:0px;
    }
    #nomenu:before {
        content:"MENU";
        float:left;
        margin-left:5px;
    }
    #nomenu:after {
        content:"\f0c9";
        float:right;
        font-family:FontAwesome;
        margin-right:5px;
    }

    #menu {
        /* border:5px solid rgba(254,254,254,0.9); */
        background-image:linear-gradient( rgba( 78,87,114,0.6 ), rgba(254,254,254,0.6) );
        cursor:pointer;
        display:none;
        left:1%;
        margin:0px auto 23px;
        max-height:92%;
        min-height:88%;
        right:1%;
        overflow-y:auto;
        padding:0;
        position:fixed;
        top:1.55rem;
        width:98%;
    }

    #menu img#skoon_plaotje {
        display:none;
    }

    #menu a {
        height:1.8rem;
        font-size:1.2rem;
        line-height:1.8rem;
        margin:0 auto 0.15rem;
        width:98%;
    }
    #menu a.a:nth-of-type(1) {
        margin-top:0;
    }
    #menu a.off {
        display:none;
    }
    div#content {
        /* background-color:#dfdfbe; */
        float:left;
        height:92%;
        margin:21px 5px;
        padding:5px;
        width:95%;
    }
    div.rowy-van-hest {
        width:98%;
    }
    div.rowy-van-hest img {
        width:100%;
    }
}

/* Start here with declarations for smaller devices like mobiles and such */
@media screen and ( max-width:440px ){
    #content img.app_ad { height:auto; width:99%; }
}

/* Start here with declarations for smaller devices like mobiles and such */
@media screen and ( max-width:380px ) {
    div#bigHdr h1 {
        font-size:0.9em;
    }
    div#content {
        width:92%;
    }
}
#amazon  { background-color: #4e5772; border:none; height:603px; left:18px; margin:0; padding:0; top:400px; width:162px; }

#menu span.spc { background:transparent url('/n-images/bgcomposer.jpg') repeat-y; display:block; height:8px; margin:0; width:100%; }

.red { color:red; }
.fat { font-weight: bold; }

.google { margin: 5px auto; width:488px; }

.order       { color:blue; cursor:pointer;}
.order:hover { text-decoration:underline; }