/* van Sjors */
h1 { font-size:22px; line-height: 150%;  margin-top:10px; margin-bottom:2px; font-family: Verdana, Arial, Helvetica, sans-serif; }
h2 { font-size:16px; line-height: 150%;  margin-top:15px; margin-bottom:2px; font-family: Verdana, Arial, Helvetica, sans-serif;}

.Blauw h1, .Blauw h2 { color: #1ca8e3;    }
.Groen h1, .Groen h2 { color: #82b32e;    }
.Paars h1, .Paars h2 { color: #823f90;    }
.Oranje h1, .Oranje h2 { color: #f08e2c; }
.Rood h1, .Rood h2 { color: #b31414; }



/* HTML */

html, body {  margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; 
              padding-top:0px; padding-bottom:0px; padding-left:0px; padding-right:0px; 
        text-align:left; font-family:Verdana; font-size:12px; vertical-align:top; margin:0px; padding:0px;
        line-height:167%;
              }




/* COLOR SKINNING */


.bgcol_CYAAN { background-color:#33ccff; }
.bgcol_GROEN { background-color:#64c23f; }
.bgcol_ROOD { background-color:#dd0000; }
.bgcol_ORANJE { background-color:#f08e2c; }
.bgcol_GEEL { background-color:#ffef7a; }
.bgcol_PAARS { background-color:#684288; }



.logo_MEESTERSPIGTSCHOOL { background-image:url(images/logo/meesterspigtschool.png); }
.logo_HETKERSPEL         { background-image:url(images/logo/hetkerspel.png); }
.logo_DEREGENBOOG        { background-image:url(images/logo/deregenboog.png); }
.logo_JOZEFSCHOOL        { background-image:url(images/logo/jozefschool.png); }
.logo_PANCRATIUS         { background-image:url(images/logo/pancratius.png); }
.logo_BESTUUR            { background-image:url(images/logo/bestuur.png); }




h1 { color:#33ccff; font-size:20px; font-family:Verdana; }


.BG
{
   background-image:url(images/bg_fade.png); background-repeat:repeat; background-position:left top; /* maakt 86% lichter */
}








/* WEG
       .foto_1 { background-image:url(images/DSC00103.JPG); }
       .foto_2 { background-image:url(images/DSC_0180.JPG); }
       .foto_3 { background-image:url(images/DSC_0078.JPG); }
       .foto_4 { background-image:url(images/DSC_0114.JPG); }
*/



/* voor dnn titels */
/* .holder_foto_A2_edit .SubHead,
.holder_foto_B2_edit .SubHead, */



.FotoPane .SubHead
{
    color:#000000; padding:1px;
    background-color:#ffffff; font-weight:normal;
}



/* ------------ CUSTOM FOTO'S ------------ */

.FotoPane
{
    height:135px; width:310px;
    padding:0px; margin:0px; border:none;
    z-index:0;
    overflow:hidden;
}

.FotoRondje
{
    position:relative;
    overflow:hidden;
    /* width:300px; height:135px; */
    z-index:9;
}

.FotoImg
{
    position:absolute;
    overflow:hidden;
    width:800px; height:800px;
}

.FotoHolderBoven
{
    float:left;
    width:315px; height:135px;
    position:relative; overflow:hidden;
}


.FotoHolderOnder
{
    float:left;
    /* width:165px; -- 2x anders*/
    height:300px;
    position:relative; overflow:hidden;
}


.FotoHolderBoven.FotoPane {height:135px; width:300px;}

.FotoHolderOnder .FotoPane {height: 300px; width: 170px;}






/* ------------ schaduw vlakken in tint basiskleur ------------ */

.border_left
{
    width:10px;
}

.border_right
{
    width:10px;
}



/* ------------ hoofd vlakken ------------ */

.pane_pagina
{
    background-image:url(images/bg_shadow.png);
    background-repeat:repeat-y; background-position:center top;
}

.pane_table
{
    width:1000px; height:100%; /* 980px + boder_left + border_right = 994px; */
}



.pane_header
{
    height:135px;
}


        /* ------------ ------------ ------------ ------------ ------------ */
        /* ------------ ------------ CONTAINERS begin ------------ ------------ */
        
        
        h1 { color:#000000; font-size:22px; letter-spacing:-1px; }
        h2 { color:#000000; font-size:16px; font-weight:bold; }
        
        
        .contentInner
        {
            z-index:0; width:100%; /* voor agenda, etc. */
        }


        /* ------------ ------------ CONTAINERS end ------------ ------------ */
        /* ------------ ------------ ------------ ------------ ------------ */
        
        

        /* ------------ ------------ ------------ ------------ ------------ */
        /* ------------ ------------ RECHTER BALK begin ------------ ------------ */
        
        .contentRechterBalk
        {
            color:#ffffff;
            background-color:Transparent;
            margin:0px; padding:0px;
        }


        /* ------------ ------------ RECHTER BALK end ------------ ------------ */
        /* ------------ ------------ ------------ ------------ ------------ */




.photo-frame { margin:0px; padding:0px; border:none; }
.photo-frame .topx-- { margin:0px; padding:0px; border:none; }
.photo-frame .top-x- { margin:0px; padding:0px; border:none; }
.photo-frame .top--x { margin:0px; padding:0px; border:none; }
.photo-frame .midx-- { margin:0px; padding:0px; border:none; }
.photo-frame .mid--x { margin:0px; padding:0px; border:none; }
.photo-frame .botx-- { margin:0px; padding:0px; border:none; }
.photo-frame .bot-x- { margin:0px; padding:0px; border:none; }
.photo-frame .bot--x { margin:0px; padding:0px; border:none; }



.FotoHolderBoven div,
.FotoHolderBoven p,
.FotoHolderBoven td,
.FotoHolderBoven img {	margin: 0px !important; vertical-align:top;  }
.FotoHolderBoven img, .FotoHolderOnder img { border: 0px !important; }
.RandomView td {vertical-align: top;}
.RandomView img { border: 0px !important;}
.FotoPane div {margin: 0px !important; padding: 0px !important;}








        /* ------------ header: logo en twee foto's in circles ------------ */
        
        .header_holder_logo
        {
            float:left; height:135px; width:332px; background-color:#ffffff; 
            background-image:url(images/circle_NULL.png); background-repeat:no-repeat; background-position:-270px -400px;
        }

        .header_logo
        {
            width:270px; height:135px; background-repeat:no-repeat; background-position:center center;
        }
        












/* ------------ header MENU ------------ */


.border_HR2px
{
    background-color:#ffffff;height:2px;
}


        .header_menu
        {
             background-image:url(images/menubalk.png); background-repeat:repeat-x; background-position:left top;
            background-color:#808080;
            color:#ffffff; font-weight:bold; 
            height:30px; padding-top:0px;
            width:100%;
        }





/* ------------------------ main content ------------------------ */


/* --- kolom links --- */

.pane_left
{
    width:165px;
    background-color:#dd0000;
}


.pane_left_bottom
{
    width:165px;
    vertical-align:bottom; padding-bottom:40px;
    background-color:#dd0000;
    background-image:url(images/zwarte_schaduw_onder.png);
    background-position:left bottom; background-repeat:repeat-x;
}


        .submenu_css
        {
            padding-left:25px; padding-top:15px;  cursor:hand; color:#ffffff;
        }


        .holder_foto_C1
        {
            height:300px; width:165px;
            background-position:center center;
        }
        .holder_foto_C2
        {
            height:300px; width:165px;
            background-image:url(images/circle_ROOD.png); background-repeat:no-repeat; 
             background-position:-350px -250px;/* background-position:-550px -250px; */
        }



/* --- kolom rechts --- */

.pane_right
{
    width:135px;
    background-image:url(images/zwarte_schaduw_onder.png);
    background-position:left bottom; background-repeat:repeat-x;
    padding-bottom:35px; /* nodig om schaduw effect niet af te hakken met "ronde foto" met vaste rode achtergrond kleur */
}

        .holder_foto_D1
        {
            height:265px; width:135px;
            background-position:center center;
        }
        .holder_foto_D2
        {
            height:265px; width:135px;
            background-image:url(images/circle_CYAAN.png); background-repeat:no-repeat;
            /* background-position:0px -300px; */ background-position:-270px -300px;
        }





.zwarte_schaduw_onder
{
    background-image:url(images/zwarte_schaduw_onder.png);
    background-position:left bottom; background-repeat:repeat-x;
}



/* --- main content --- */


.pane_content
{
    width:710px;
    margin:0px; padding:0px;
    background-color:#ffffff;
}


.pane_right_split
{
    width:20px; background-color:#ffffff;
    background-position:left top; background-repeat:no-repeat;
}


/* --- footer --- */

.footer_height
{
    height:32px;
}

.footer_pane
{
    width:980px;
     background-image:url(images/footerbalk.png); background-repeat:repeat-x; background-position:left top;
    background-color:#808080;
}

.footer_slogan
{
    float:left; padding-left:15px; padding-top:5px;
    width:710px; /* zoiets */
    color:#ffffff; font-weight:bold;
}

.topmenu_login
{
    float:right; width:35px; text-align:center; padding-top:4px;
}

.topmenu_login_dnn, .topmenu_login_dnn:link, .topmenu_login_dnn:visited, .topmenu_login_dnn:active
{
    font-size:15px; width:24px; height:15px; background-repeat:no-repeat; background-position:center center; background-image:url(images/login.png); 
}

.topmenu_login_dnn:hover
{
    font-size:15px; width:24px; height:15px; background-repeat:no-repeat; background-position:center center; background-image:url(images/login_over.png);
}




/* --- HTML --- */

td, tr, div
    {
        text-align:left; font-family:Verdana; font-size:12px; vertical-align:top; margin:0px; padding:0px;
        line-height:167%;
    }







A:link, A:visited, A:active { color:#b22316; font-weight:bold;  }
A:hover { color:#b22316;  font-weight:bold; text-decoration:none; }









/* -------------------------- DNN CONTENT -------------------------- */




.Normal
{
       text-align:left; font-family:Verdana; font-size:13px; vertical-align:top;
       line-height:167%;
       margin:0px; padding:0px;
}






/* ************************************************************** DNN MENUS ************************************************************** */


/* ---------------------------------------------------------- TOPMENU (RadMenu) geen popups ---------------------------------------------- */

.topmenu_css
{
    padding-left:0px; padding-top:0px;  cursor:default;
}

.RadMenu_TOPMENU
{
    padding:0px; margin:0px; 
    z-index: 10;
}

.RadMenu_TOPMENU .rootGroup, .RadMenu_TOPMENU .rmRootGroup
{
    padding:0px; margin:0px; 
}

 .RadMenu_TOPMENU .rootGroup .text, .RadMenu_TOPMENU .rmRootGroup .rmText
{
    font-weight:bold; font-size:12px; text-decoration:none;
}



.RadMenu_TOPMENU .rootGroup .link, .RadMenu_TOPMENU .rmRootGroup .rmLink
{
    /* float:left; /* om min breedte */
    padding-right:10px; padding-left:10px; padding-top:4px; padding-bottom:4px;
    color:#ffffff;cursor:hand;
    background-color:Transparent;
    border-right:solid 2px #ffffff;
}



.RadMenu_TOPMENU .rootGroup .link:hover, .RadMenu_TOPMENU .rmRootGroup .rmLink:hover,
.RadMenu_TOPMENU .rootGroup .focused, .RadMenu_TOPMENU .rmRootGroup .rmFocused,
.RadMenu_TOPMENU .rootGroup .expanded, .RadMenu_TOPMENU .rmRootGroup .rmExpanded
{
    color:#555555;
    background-color:#ffffff;
    background-image:url(images/menu_fade_rood.png); background-position:left bottom; background-repeat:repeat-x;
    text-decoration:none; cursor:hand;
    border-right:solid 2px #ffffff;
}

/* ----------------- TOPMENU  POPUP ----------------- */  

/* vvvvvvvvv niet gebruikt vvvvvvvvvv 

.RadMenu_TOPMENU .group
{
    background-color:#ee2222;
}
.RadMenu_TOPMENU .group .text
{
     margin-left:10px; margin-right:20px; text-align:left; 
}*/




/* ----------------- LEFTMENU ----------------- */

.submenu_css
{
    padding:0px; margin:0px; cursor:default;
}

/* ------------------------------------------------------------ LEFTMENU (RadPanelBar) ---------------------------------------------- */

.RadPanelBar
{
    width: 165px !important;  
    border-width:0px !important;
    font-family:Verdana; 
    font-size:12px; 
    font-weight:bold; 
    line-height: 120% !important;
    padding-bottom:5px;
    z-index: 10;
    }

.rpRootGroup      { border-style:none; border-width:0px !important; padding:0px !important; margin:0px !important;  border-color:#ffffff; }
.rpItem		  { border-style:none; border-width:0px !important; padding:0px !important; margin:0px !important; }
.rpLink		  { border-style:none; border-width:0px !important; padding:0px !important; margin:0px !important;  border-color:#ffffff; }
.rpOut		  { border-style:none; border-width:0px !important; padding:0px !important; margin:0px !important;  border-color:#ffffff; }
.rpText		  { border-style:none; border-width:0px !important; border-color:#ffffff; padding-left: 0px !important;  }


.rpRootGroup .rpText {padding-top:8px!important; padding-bottom:8px!important; padding-left:10px!important; padding-right:5px!important; }
.rpGroup .rpText {padding-top:0px!important; padding-bottom:0px!important; padding-left:20px!important; padding-right:5px!important; }


.rpExpandable {border-style:none; border-width:0px !important; }
.rpSlide      {border-style:none; border-width:0px !important; }



/* root-knop : normal */
.menupanel_root { color:#ffffff!important; text-decoration:none; text-decoration:none!important;  }
/* root-knop : active */
.menupanel_root_hover { color:#555555!important; text-decoration:none; background-color: #ffffff; 
                                background-image:url(images/menu_fade_rood.png); background-position:left bottom; background-repeat:repeat-x; }

/* sub-knop : normal */
.menupanel_subpage { color:#ffffff!important; font-weight:normal!important; text-decoration:none!important; /*line-height:25px;*/}
/* sub-knop : active */
.menupanel_subpage_hover { color:#555555!important; background-color:#ffffff!important; 
                           background-image:url(images/menu_fade_rood.png); background-position:left bottom; background-repeat:repeat-x; 
                           font-weight:normal!important; text-decoration:none;   /*line-height:25px;*/}




/* ---------------------------------------------------- LEFTMENU ADMIN met popups (RadMenu) ---------------------------------------------- */



.RadMenu_LEFTMENU
{
    padding:0px; margin:0px;
    width:165px;
    z-index:10;
}

.RadMenu_LEFTMENU .rootGroup, .RadMenu_LEFTMENU .rmRootGroup
{
    padding:0px; margin:0px; width:165px;
        height:auto;
}

.RadMenu_LEFTMENU .rootGroup .text, .RadMenu_LEFTMENU .rmRootGroup .rmText
{
    font-size:12px; text-decoration:none; 
    padding-top:5px; padding-bottom:5px; margin-left:10px; margin-right:10px;
    width:145px; display:block; white-space:normal;
}



.RadMenu_LEFTMENU .rootGroup .link, .RadMenu_LEFTMENU .rmRootGroup .rmLink
{
    cursor:hand;
    background-color:Transparent; color:#ffffff;
    border-top:dotted 1px #ffffff; 
}

.RadMenu_LEFTMENU .rootGroup .last, .RadMenu_LEFTMENU .rmRootGroup .rmLast
{
    border-bottom:dotted 1px #ffffff; 
    margin-bottom:5px; 
}

.RadMenu_LEFTMENU .rootGroup .link:hover, .RadMenu_LEFTMENU .rmRootGroup .rmLink:hover,
.RadMenu_LEFTMENU .rootGroup .focused, .RadMenu_LEFTMENU .rmRootGroup .rmFocused,
.RadMenu_LEFTMENU .rootGroup .expanded, .RadMenu_LEFTMENU .rmRootGroup .rmExpanded
{
    text-decoration:none; cursor:default;
    width:145px;
    color:#ffc0c0;
}


.RadMenu_LEFTMENU .group, .RadMenu_LEFTMENU .rmGroup
{
    background-color:#ee2222;
    width:270px; /* = 2x rechter pane */
    margin:0px; padding:0px;
}
.RadMenu_LEFTMENU .group .text, .RadMenu_LEFTMENU .rmGroup .rmText
{
    text-align:left; margin:0px; padding:0px; display:block;
}

.RadMenu_LEFTMENU .slide, .RadMenu_LEFTMENU .slide .slide, .RadMenu_LEFTMENU .slide .slide .slide, .RadMenu_LEFTMENU .rmSlide, .RadMenu_LEFTMENU .rmSlide .rmSlide, .RadMenu_LEFTMENU .rmSlide .rmSlide .rmSlide
{
    border:solid 2px #ffffff; margin:0px; padding:0px;
}

.RadMenu_LEFTMENU .group .link, .RadMenu_LEFTMENU .rmGroup .rmLink,
.RadMenu_LEFTMENU .group .link:hover, .RadMenu_LEFTMENU .rmGroup .rmLink:hover,
.RadMenu_LEFTMENU .group .link:focused, .RadMenu_LEFTMENU .rmGroup .rmLink:focused,
.RadMenu_LEFTMENU .group .link::expanded, .RadMenu_LEFTMENU .rmGroup .rmLink::expanded
{
    border-top:none; 
    margin:0px; padding:0px;
}


.RadMenu_LEFTMENU .group .last, .RadMenu_LEFTMENU .rmGroup .rmLast
{
    border-bottom:none; margin:0px; padding:0px;
}

.RadMenu_LEFTMENU .expandLeft, .RadMenu_LEFTMENU .expandRight, .RadMenu_LEFTMENU .rmExpandLeft, .RadMenu_LEFTMENU .rmExpandRight
{
    color: White;
}