/*********************
prioritering in CSS: 
1) type x class
2) class
3) type

bij gelijke prioriteit telt de LAATSTE.

Daarom is deze CSS opgebouwd met eerst de algemene objecten, en onderaan de specifieke.
Anders zou de algemene CSS de specifieke kunnen overschrijven en dat is nou net niet de bedoeling.

Verder zijn IDs casegevoelig. Dus NavigationButton is niet navigationButton.

**********************/

/******** Element *********/

html
{
    background-color:#FFFFFF; 
    margin:0px 0px 0px 0px;
}
        
div,h1,h2,h3,h4,h5,h6,button,p,table
{
            
    font-family: Calibri, Candara, Segoe, "Segoe UI", Optima, Arial, sans-serif;            
    font-size:15px;
    margin:0px 0px 0px 0px;
    text-align:left;
    color: #000000; 
}

h1 { font-size:27px;color: #b81d21; margin-right:17px; } /* PhoneTextTitle1Style */
h2 { font-size:27px;color:#b81d21; margin-top:13px; margin-bottom: 4px; font-weight:bolder; font-variant:small-caps; color: #b81d21; } /* 40px, phoneaccentbrush, bold, caps */
h3 { font-size:27px;  margin-top:-4px;  color: #FFFFFF;} /* PhoneTextExtraLargeStyle */
h4 { font-size:15px; background:#b81d21; width:100%; margin-top:4px; margin-left:0px; margin-right:9px; padding-left:9px; /* height: 30px; */ padding-top:8px; color: #FFFFFF;} /* header */
h5 { font-size:12px; color: #b81d21; } /* PhoneTextNormalStyle */
h6 { font-size:12px; color: #FFFFFF; font-weight:lighter; margin-top:-7px; margin-bottom: 2px; } /* PhoneTextSubtleStyle */
h3.red
{
   color:#b81d21;
}
button
{
    margin:0px 0px 0px 0px;
    padding:0px;
    border-color:#b81d21;
    border-style:none;
    background-color:#b81d21;
color: #FFFFFF; /* nieuw */
}

/* lettergroottes tot hier aangepast */
        
/******* Element x Class, absolute positions ********/

div.LayoutRoot
{
    position:absolute;                 
    right:9px;
    left:9px;
    top:12px;
    bottom:0px;
}                

div.NavigationPanel
{
    position:absolute;
    right:18px;
    margin-left:225px; /* bij smalle schermen niet door titelpanel heen */
    top:12px;
}

div.backdrop
{
    position:absolute;   
    height:100%;                
    width:100%;
    /* background-image: url('BackOpact.jpg'); background-size:cover;*/
    background-image: url('witnaarroodhorizontaal.jpg');
    background-size:100% 100%; 
    opacity: 0.2;
}

/******* Element x Class, relative positions, rootcontent ********/


div.subtext
{
    margin-left: 22px;
    margin-top: 65px;
color: #FFFFFF; /* nieuw */
}

div.TitlePanel
{
    margin: 0px 9px 21px 9px;
    display:block;
    clear:right;
    display:table;
}

div.ContentPanel
{
    margin:0px 9px 0px 9px;
}


/******* childeren ********/

.TitlePanel > *
{
    line-height:78%;
    text-align: right;
    display:block;
}


.StackPanel > div
{
    display:block;
    margin: 0px 0px 9px 0px;
    width:inherit;
}

.NavigationPanel > *
{
    margin: 0px 4px 4px 0px;
    padding: 1px 4px;
    font-size:15px;
    width:auto;
    background-color:#7d7abf /* #ff9108 */;
    float:right;
}

.navigationbutton
{
    margin: 0px 4px 4px 0px;
    padding: 1px 4px;
    width:auto;
    background-color: #7d7abf /* #ff9108 */ ;
}

.CardStack > *
{
    background-position:center center;     
    background-size: 100% 100%;
    background-clip:padding-box;
    margin: 4px;
    position: relative; /* makes its location animatable */
}

/******* Element x Class, relative positions ********/        
     
div.collapsed
{
    display:none;
    border-style:dashed;
    border-bottom-width:0px;
    border-top-width:0px;
    border-right-width:0px;
    border-left-width:1px;
    border-color: #b81d21;
    padding-left: 9px;
    margin-left: 4px;
}
div.quote
{
    margin:15px;
    font-style:oblique;
}

.timer
{
    border: 3 solid #7d7abf;
    background-color: #7d7abf;
    font-weight:bold;
}


/******** Hoofdscherm knoppies **********/      

/* ondat de class zwaarder weegt dan het type hoef ik het type niet te noemen. */

.onecardbutton, .twocardbutton, .twocardlook, .onecardlook, .docbutton, .hourglassbutton, .zerocardlook, .newpresbutton, .editpresbutton, .emailbutton, .ideabutton, .mindmapbutton
{
    padding: 3px 6px 6px 60px;
    border-style:none;
    background-size: contain; /* make it scalable! */
    background-origin:padding-box; /* make it scalable! */
    background-color:#b81d21;
    /* background-position:left; */
    background-repeat:no-repeat;
}

.onecardbutton      { background-position:  3px  1px; background-image: url('zwartgetrokkenmini.png'); }
.twocardbutton      { background-position:  3px  1px; background-image: url('zwartenblauwgetrokkenmini.png'); }
.twocardlook        { background-position:  3px  1px; background-image: url('zwartenblauwgetrokkenmini.png'); }
.onecardlook        { background-position:  3px  1px; background-image: url('zwartgetrokkenmini.png'); }
.docbutton          { background-position:  6px  1px; background-image: url('appbar.book.png'); }
.hourglassbutton    { background-position:  6px  1px; background-image: url('littlepresenter.png'); }
.zerocardlook       { background-position:  3px  1px; background-image: url('zwartenblauwgetrokkenmini.png');
                      background-color:#BBAAAA; }
.zerocardlook > *   { color:#FFDDDD; }   
.newpresbutton      { background-position:  7px  1px; background-image: url('appbar.page.png'); }
.editpresbutton     { background-position:  6px  1px; background-image: url('appbar.page.edit.png'); }
.emailbutton        { background-position:  6px  1px; background-image: url('appbar.feature.email.rest.png'); }
.ideabutton         { background-position:  6px  1px; background-image: url('appbar.photo.light.rest.png'); }
.mindmapbutton      { background-position:  6px  1px; background-image: url('appbar.diagram.png'); }

/****** BOOKCOLUMN *****/
div.BookRight       { background-position: right; background-image: url('boek_6_crop_gloss.png'); background-repeat:no-repeat;
                        background-origin:padding-box;
                      padding: 0px 90px 0px 0px; background-size:contain; height:231px;
                      }
                      
/******** Element x Classes DURFKAART **********/      
        
div.durfkaart
{
    width: 225px;
    height: 337px;
    position: absolute;
    top: 102px;
    left:37px;
    color: Black;        
    background-image: url('durf.png');
    background-size: 100% 100%;
}

div.kaarttitel
{
    width:150px;
    height:60px;
    position:absolute;
    top: 113px;
    left:75px;
    color: White;
    text-align:center;
    font-size:32px;
}
        
div.kaartsubscript
{
    width:150px;
    height:30px;
    position:absolute;
    top: 166px;
    left:75px;
    color: Black;
    text-align:center;
    font-size:10px;
}
        
div.kaarttekst
{
    width:150px;
    height:187px;
    position:absolute;
    top: 210px;
    left:75px;
    color: Black;
    text-align:left;
    font-size:15px;
}
button.durfkaartje
{
    background-image: url('zwart.png');
    height:84px;
    width:56px;   
    border: 3px double white;    
}


/******** Element x Classes STYLEKAART **********/      
        
div.stijlkaart
{
    width: 225px;
    height: 337px;
    position: absolute;
    top:90px;
    right:37px;
    color: Black;        
    background-image: url('style.png');
    background-size: 100% 100%;
}

div.stijlkaarttitel
{
    width:150px;
    height:60px;
    position:absolute;
    top: 100px;
    right:75px;
    color: White;
    text-align:center;
    font-size:23px;
}

div.stijlkaartsubtitel
{
    width:150px;
    height:60px;
    position:absolute;
    top: 123px;
    right:75px;
    color: White;
    text-align:center;
    font-size:12px;
}

        
div.stijlkaartsubscript
{
    width:150px;
    height:30px;
    position:absolute;
    top: 150px;
    right:75px;
    color: Black;
    text-align:center;
    font-size:10px;
}
        
div.stijlkaarttekst
{
    width:150px;
    height:187px;
    position:absolute;
    top: 172px;
    right:75px;
    color: Black;
    text-align:left;
    font-size:13px;
}

div.stijlkaartlesje
{
    width:112px;
    height:187px;
    position:absolute;
    top: 330px;
    right:60px;
    color: Black;
    text-align:left;
    font-size:9px;
    font-style:oblique;
}

button.stijlkaartje
{
    background-image: url('blauw.png');
    height:121px;
    width:81px;   
    border: 3px double white;
}

/* timer */
.hugetimer
{
    font-size: 60px;
    font-weight:lighter;
    margin-top: -15px;
    margin-bottom: -7px;
}

.preset, .start, .stop
{
    width: 50px;
    height: 25px;
    margin: 1px 0px 3px 0px;
    text-align: center;
    padding: 0px;
}

.start
{
    background-color: #4D6600;
}

.stop
{
    background-color: #802000;
}
/* mindmap */

table.topstrip, td.outline
{
    border: 0px none black; 
    padding:0px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

table.outline, table.innerbox
{
    text-align: left;
    margin-left: auto;
    margin-right: auto;

    border: 1px solid black;
}

td.outline
{
    color: Orange;
}

table.outline
{
    border-color: Orange;
}

/* notities */

textarea.note
{
    width: 95% !important;
    height: 200px !important;
}