BODY 
{
font-family: 'futura-pt', sans-serif ; 
font-weight: 300 ;
font-size: 12pt ;
font-style: normal ;
padding-top: 40px ;
padding-left: 398px ;
padding-right: 40px ;
padding-bottom: 0px ;
margin: 0px ;
background-color: rgb(145,0,75) ;
color: rgb(255,255,255) ;

transition-property: padding-left, padding-right ;
transition-delay: 1000ms ;
transition-duration: 500ms;
}

BODY.init 
{
/*
padding-left: 40px ;
padding-right: 398px ;
*/
}


.cta, 
.cta:link, 
.cta:active,
.cta:visited,
.cta:hover 
{
display: inline-block ;
padding: 0px 15px ;
background-color: rgba(255,255,255,0) ;
color: rgba(255,255,255,1) ;
border: 2px solid rgba(255,255,255,1) ;
border-radius: 4px ;
text-decoration: none ;
font-size: 12pt ;
font-weight: 700 ;
transition-property: color, background-color ;
transition-duration: 300ms ;
}

.cta:hover 
{
color: rgb(145,0,75);
background-color: rgba(255,255,255,1);
}

.cta > I 
{
display: inline-block;
margin-left: 12px;
font-size: 15pt;
padding-top: 2px ;
padding-left: 0px ;
padding-right: 0px ;
padding-bottom: 4px ;
}


HEADER
{
margin-top: 10px ;
margin-bottom: 20px ;
}


HEADER FIGURE 
{
position: absolute ;
right: 4px ;
top: 14px ; 
width: 150px;
}

HEADER FIGURE IMG 
{
width: 100%;
}




ASIDE 
{
position: fixed;
margin: 0px;
padding: 40px ;
padding-top: 40px ;
width: 270px ;
height: 120%;
top: 0px;
left: 0px;
background-color: rgb(145,0,75) ;
border-right: solid 8px #ffffff;
z-index: 9;

transition-property: left ;
transition-delay: 0ms ;
transition-duration: 600ms;
}



BODY.init ASIDE 
{
left: -360px;
}







/* PARAMETER FORM */


SPAN
{
display: block ;
margin-bottom: 6px ;
font-size: 10pt ;
font-weight: 400 ;
color: rgba(255,255,255,1) ;
}

SPAN:nth-of-type(1),
SPAN:nth-of-type(2),
SPAN:nth-of-type(3),
SPAN:nth-of-type(4)
{
margin-bottom: 2px ;
}

SPAN I
{
display: none ;
}

INPUT[type="text"],
SELECT,
DIV.option
{
display: block ;
margin-bottom: 24px ;
}

INPUT[type="range"]
{
margin-bottom: 8px ;
}

INPUT,
SELECT,
INPUT[type="radio"]+LABEL
{
font-family: 'futura-pt', sans-serif ; 
font-size: 12pt ;
font-weight: 500 ;
}

INPUT[type="text"],
SELECT
{
background-color: #ffffff ;
color: rgb(145,0,75) ;
border-radius: 4px ;
border: 0px solid #ffffff ;
width: 96% ;
}

INPUT[type="text"],
INPUT[type="radio"]+LABEL,
SELECT
{
padding-top: 6px ;
padding-left: 2% ;
padding-right: 2% ;
padding-bottom: 6px ;
}

INPUT:focus,
SELECT:focus
{
outline: -webkit-focus-ring-color auto 0px ;
}

SELECT
{
padding: 2% ;
width: 100% ;
}

INPUT[type="range"],
INPUT[type="range"]+INPUT
{
display: inline ;
}

INPUT[type="range"]
{
width: 64% ;
/* zie styling onderaan */
}

INPUT[type="range"]+INPUT
{
width: 20%;
margin-left: 4%;
text-align: center ;
}





INPUT[type="radio"]
{
display: none ;
}

INPUT[type="radio"]+LABEL
{
display: inline-block ;
border-radius: 4px ;
border: 2px solid #ffffff ;
margin-bottom: 8px ; 
text-align: center ;
cursor: pointer ;
background-color: rgba(255,255,255,0) ;

transition-property: background-color;
transition-duration: 300ms;
}

INPUT[type="radio"]+LABEL:hover
{
background-color: rgba(255,255,255,0.25) ;
}

INPUT[type="radio"]:checked+LABEL
{
font-weight: 700 ;
background-color: rgba(255,255,255,1) ;
color: rgb(145,0,75) ;
cursor: default ;
}


.optcol1 INPUT[type="radio"]+LABEL
{
display: block ;
}

.optcol2 INPUT[type="radio"]+LABEL
{
width: 43% ;
margin-right: 4px ; 
}

.optcol2 INPUT[type="radio"]:nth-of-type(even)+LABEL
{
margin-right: 0px ; 
}

.optcol3 INPUT[type="radio"]+LABEL
{
width: 26% ;
margin-right: 3px ; 
}

.optcol3 INPUT[type="radio"]:nth-of-type(3n+3)+LABEL
{
margin-right: 0px; 
}







INPUT:disabled
{
color: rgba(0,0,0,0.6) ;
font-style: italic ;
transition-property: color;
transition-duration: 400ms;
}

INPUT:disabled.hideTXT
{
color: rgba(0,0,0,0) ;
}





/* ColourPicker */

#ColourPicker INPUT[type="radio"]+LABEL
{
/*
font-size: 11pt ;
*/

transition-property: background-color, border;
transition-duration: 300ms;
}

#ColourPicker INPUT[type="radio"]+LABEL:hover
{
border: 2px solid #ffffff ; 
}


#ColourPicker INPUT[type="radio"]:checked+LABEL
{
background-color: rgba(255,255,255,1) ;
border: 2px solid #ffffff ; 
color: rgb(145,0,75) ;
}



#Color01+LABEL { background-color: #ffff0a ; }
#Color02+LABEL { background-color: #df5d1f ; }
#Color03+LABEL { background-color: #a3171a ; }

#Color04+LABEL { background-color: #9e7293 ; }
#Color05+LABEL { background-color: #002d79 ; }
#Color06+LABEL { background-color: #2872b8 ; }

#Color07+LABEL { background-color: #366926 ; }
#Color08+LABEL { background-color: #428c77 ; }
#Color09+LABEL { background-color: #4d5b6b ; }



#Color01+LABEL { border: 2px solid #ffff0a ; }
#Color02+LABEL { border: 2px solid #df5d1f ; }
#Color03+LABEL { border: 2px solid #a3171a ; }

#Color04+LABEL { border: 2px solid #9e7293 ; }
#Color05+LABEL { border: 2px solid #002d79 ; }
#Color06+LABEL { border: 2px solid #2872b8 ; }

#Color07+LABEL { border: 2px solid #366926 ; }
#Color08+LABEL { border: 2px solid #428c77 ; }
#Color09+LABEL { border: 2px solid #4d5b6b ; }

#Color01+LABEL 
{ 
color: rgba(0,0,0,0.8); 
-webkit-text-stroke: 0.5px; 
}



HR
{
display: block;
height: 1px;
border: none;
color: rgba(255,255,255,1);
background-color: rgba(255,255,255,1);
margin-top: 10px;
margin-bottom: 25px;
}


A.button
{
display: block ;
border-radius: 0px ;
border: 0px none #ffffff ;
background-color: rgba(116,185,89,1) ;
color: rgba(255,255,255,1) ;
padding: 2% ;
text-align: center ;
cursor: pointer ;

transition-property: background-color, color ;
transition-duration: 300ms;
}


A.button:hover
{
background-color: rgba(255,255,255,1) ;
color: rgba(145,0,75,1) ;
}








/* VIEWER */


#cdcViewer
{
position: relative ;
width: 100% ;
height: 760px ; 
}

#cdcViewer IFRAME
{
border: 0px none white ;
}








/* RANGE STYLING */


input[type=range] {
  -webkit-appearance: none;
  width: 100%;
  border-radius: 4px;
}
input[type=range]:focus {
  outline: none;
}



input[type=range]::-webkit-slider-runnable-track {
  width: 100%;
  height: 0px;
  cursor: pointer;
  box-shadow: 0px 0px 0px rgba(0, 0, 0, 0), 0px 0px 0px rgba(13, 13, 13, 0);
  background: rgba(0, 0, 0, 0);
  border-radius: 4px;
  border: 2px solid #ffffff ;
}
input[type=range]::-webkit-slider-thumb {
  box-shadow: 0px 0px 0px rgba(0, 0, 0, 0), 0px 0px 0px rgba(13, 13, 13, 0);
  border: 2px solid #91004b;
  height: 16px;
  width: 16px;
  border-radius: 0px;
  background: #aaaaab;
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: -8px;
}
input[type=range]:focus::-webkit-slider-runnable-track {
  background: rgba(0, 0, 0, 0);
}


input[type=range]::-moz-range-track {
  width: 100%;
  height: 3px;
  cursor: pointer;
  box-shadow: 0px 0px 0px rgba(0, 0, 0, 0), 0px 0px 0px rgba(0, 0, 0, 0);
  background-color: #ffffff ;
  color: transparent ;
  border-radius: 4px;
  border: 2px solid #91004b ;
  margin-bottom: 0px !important ;
}
input[type=range]::-moz-range-thumb {
  box-shadow: 0px 0px 0px rgba(0, 0, 0, 0), 0px 0px 0px rgba(13, 13, 13, 0);
  border: 2px solid #91004b ;
  height: 12px;
  width: 12px;
  border-radius: 0px;
  background: #aaaaab;
  cursor: pointer;
}







input[type=range]::-ms-track {
  width: 100% ;
  height: 8px ;
  cursor: pointer ;
  background-color: #ffffff ;
  border: 0px none rgba(0,0,0,0) ;
  color: transparent ;
  border-radius: 4px;
}
input[type=range]::-ms-fill-lower {
  background: rgba(0, 0, 0, 0);
  border: 0px solid rgba(0, 0, 0, 0);
  border-radius: 0px;
  box-shadow: 0px 0px 0px rgba(0, 0, 0, 0), 0px 0px 0px rgba(13, 13, 13, 0);
}
input[type=range]::-ms-fill-upper {
  background: rgba(0, 0, 0, 0);
  border: 0px solid rgba(0, 0, 0, 0);
  border-radius: 0px;
  box-shadow: 0px 0px 0px rgba(0, 0, 0, 0), 0px 0px 0px rgba(13, 13, 13, 0);
}
input[type=range]::-ms-thumb {
  box-shadow: 0px 0px 0px rgba(0, 0, 0, 0), 0px 0px 0px rgba(0, 0, 0, 0);
  border: 0px solid #000000;
  height: 8px;
  width: 8px;
  border-radius: 0px;
  background: #000000;
  cursor: pointer;
}
input[type=range]:focus::-ms-fill-lower {
  background: rgba(0, 0, 0, 0);
}
input[type=range]:focus::-ms-fill-upper {
  background: rgba(0, 0, 0, 0);
}




/* / RANGE STYLING  */


input[type=range] 
{
width: 70%;

margin-top: 0px ;
margin-left: 0px ;
margin-right: 0px ;
margin-bottom: 0px ;

padding-top: 0px ;
padding-left: 0px ;
padding-right: 0px ;
padding-bottom: 0px ;
}







/* EMBEDDED  */

BODY.embedded HEADER
{
display: none ;
}

BODY.embedded #cdcViewer
{
height: 820px ; 
}