/** 1) rood van het boek: b81d21, kan in plaats van het paars b81d21 
 ** 2) titel ook rood
 ** 3) achtergrond kleurovergang
 ** 4) tekst op achtergrond (behalve titel) wordt zwart.
 

**/
/*********************
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; /* was: 000000 */
    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:20px;
    margin:0px 0px 0px 0px;
    text-align:left;
    color: #000000; /* was: FFFFFF */
}

h1 { font-size:72px; margin-right: 20; color: #b81d21; /*<-nieuw*/} /* PhoneTextTitle1Style */
h2 { font-size:40px; margin-top:18px; margin-bottom: 6px; font-weight:bolder; font-variant:small-caps; color:#b81d21; } /* 40px, phoneaccentbrush, bold, caps */
h3 { font-size:43px;  margin-top:-6px; color: #FFFFFF; /* <- nieuw */} /* PhoneTextExtraLargeStyle */
h4 { font-size:20px; background:#b81d21; width:100%; margin-top:6px; margin-left:0px; margin-right:12px; padding-left:12px; color: #FFFFFF; /* <- nieuw */} /* header */
h5 { font-size:20px; color: #b81d21; /*<-nieuw*/} /* PhoneTextNormalStyle */
h6 { font-size:20px; font-weight:lighter; color: #FFFFFF; /* <- nieuw */ margin-top:-10px; margin-bottom: 6px; } /* PhoneTextSubtleStyle */

button
{
    margin:0px 0px 0px 0px;
    padding:0px;
    border-color:#b81d21;
    border-style:none;
    background-color:#b81d21;
	color: #FFFFFF; /* nieuw */
}

        
/******* Element x Class, absolute positions ********/
h3.red, 
    h3.input1c, h3.input1d, h3.input1e, 
    h3.input2a, h3.input2b, h3.input2c,
    h3.input6a, h3.input6b, h3.input6c,
    h3.input10a, h3.input10b, h3.input10c
{
   color:#b81d21;
}
   
div.LayoutRoot
{
    position:absolute;                 
    right:12px;
    left:12px;
    top:17px;
    bottom:0px;
}                

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

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.TitlePanel
{
    margin: 0px 12px 28px 12px;
    display:block;
    clear:right;
    display:table;
}

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


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

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


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

.NavigationPanel > *
{
    margin: 0px 6px 6px 0px;
    padding: 3px 6px;
    font-size:20px;
    width:auto;
    background-color:#7d7abf;
    float:right;
}

.navigationbutton
{
    margin: 0px 6px 6px 0px;
    padding: 3px 6px;
    width:auto;
    background-color:#7d7abf;
}

.CardStack > *
{
    background-position:center center;     
    background-size: 100% 100%;
    background-clip:padding-box;
    margin: 6px;
    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:3px;
    border-color: #b81d21;
    padding-left: 12px;
    margin-left: 6px;
}
div.quote
{
    margin:20px;
    font-style:oblique;
}

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

.timer
{
    border: 3 solid #7d7abf;
    background-color:#b81d21;
    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: 6px 12px 6px 78px;
    border-color:#b81d21;
    border-style:none;
    background-color:#b81d21;
    background-position:left;
    background-repeat:no-repeat;
}

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

/****** BOOKCOLUMN *****/
div.BookRight       { background-position: right; background-image: url('boek_6_crop_gloss.png'); 
                      padding: 0px 220px 0px 0px; background-repeat:no-repeat; height:600px;
                      }
                      
/******** Element x Classes DURFKAART **********/      
        
div.durfkaart
{
    width: 300px;
    height: 450px;
    position: absolute;
    top: 150px;
    left:50px;
    color: Black;        
    background-image: url('durf.png');
    background-size: 100% 100%;
}

div.kaarttitel
{
    width:200px;
    height:80px;
    position:absolute;
    top: 160px;
    left:100px;
    color: White;
    text-align:center;
    font-size:46px;
}
        
div.kaartsubscript
{
    width:200px;
    height:40px;
    position:absolute;
    top: 230px;
    left:100px;
    color: Black;
    text-align:center;
    font-size:14px;
}
        
div.kaarttekst
{
    width:200px;
    height:250px;
    position:absolute;
    top: 280px;
    left:100px;
    color: Black;
    text-align:left;
    font-size:20px;
}
button.durfkaartje
{
    background-image: url('zwart.png');
    height:180px; /* was 150 */
    width:120px;  /* was 100 */ 
    border: 5px double white;
    margin: 15px;    
}


/******** Element x Classes STYLEKAART **********/      
        
div.stijlkaart
{
    width: 300px;
    height: 450px;
    position: absolute;
    top: 220px; /* was 120 */
    left:300px; /* right:50px; */
    color: Black;        
    background-image: url('style.png');
    background-size: 100% 100%;
}

div.stijlkaarttitel
{
    width:200px;
    height:80px;
    position:absolute;
    top: 220px; /* was 120 */
    left:350px; /*right:100px;*/
    color: White;
    text-align:center;
    font-size:46px;
}

div.stijlkaartsubtitel
{
    width:200px;
    height:80px;
    position:absolute;
    top: 265px; /* was 165 */
    left:350px; /*right:100px;*/
    color: White;
    text-align:center;
    font-size:16px;
}

        
div.stijlkaartsubscript
{
    width:200px;
    height:40px;
    position:absolute;
    top: 300px; /* was 200 */
    left:350px; /*right:100px;*/
    color: Black;
    text-align:center;
    font-size:14px;
}
        
div.stijlkaarttekst
{
    width:200px;
    height:250px;
    position:absolute;
    top: 330px; /* was 230 */
    left:350px; /*right:100px;*/
    color: Black;
    text-align:left;
    font-size:18px;
}

div.stijlkaartlesje
{
    width:150px;
    height:250px;
    position:absolute;
    top: 540px; /* was 440 */
    left:420px; /* right:80px; */
    color: Black;
    text-align:left;
    font-size:13px;
    font-style:oblique;
}

button.stijlkaartje
{
    background-image: url('blauw.png');
    height:270px; /* 180px; */
    width:180px; /* 120px; */   
    border: 5px double white;
}

/* timer */
.hugetimer
{
    font-size: 100px;
    font-weight:lighter;
    margin-top: -20px;
    margin-bottom: -10px;
}

.preset, .start, .stop
{
    width: 72px;
    margin: 3px;
    text-align: center;
    padding: 3px;
}

.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: 300px !important;
}
/* laatste hack */
input
{
    width: 80%;
    font-size:20px;
}