/* Specific css features
	Cyclus  CSS
       -Standaard  features 
	body - color         Background  color  working 
       -special options 
	add   Forced entry  marker
       -Hard coded options   
body {background-color:#FFFFCA;background-image: url('/icon/back/yellow5.jpg')}
*/



/* test working
-- end test */

.style1 {font-weight: bold;color: #330099;}
.style2 {font-weight: bold}
.style3 {font-weight: bold}
.style4 {font-weight: bold}
.style5 {font-weight: bold}
.style6 {font-weight: bold}
.style7 {color: #669933}
.style8 {color: #3333CC;font: bold;}
.style9 {color: #3333CC}
.style10 {color: #0033FF;font: bold;}
.style11 {color: #0033CC;font: bold;}
.style12 {font-family: "Courier New", Courier, mono;font-size: 9px;}
.black1 {color:#0;font-weight: bold;color: #330099;}
.black2 {color:#0;font-weight: bold}
.black3 {color:#0;font-weight: bold}
.black4 {color:#0;font-weight: bold}
.black5 {color:#0;font-weight: bold}
.black6 {color:#0;font-weight: bold}
.black7 {color:#0;}

.black8 {color:#0;font: bold;}
.black9 {color:#0;}
.black10 {color:#0;font: bold;}
.black11 {color:#0;font: bold;}
.black12 {color:#0;font-family: "Courier New", Courier, mono;font-size: 9px;}
.red1 {color:#FF0000;font-weight: bold;color: #330099;}
.red2 {color:#FF0000;font-weight: bold}
.red3 {color:#FF0000;font-weight: bold}
.red4 {color:#FF0000;font-weight: bold}
.red5 {color:#FF0000;font-weight: bold}
.red6 {color:#FF0000;font-weight: bold}
.red7 {color:#FF0000;}
.red8 {color:#FF0000;font: bold;}


.red9 {color:#FF0000;}
.red10 {color:#FF0000;font: bold;}
.red11 {color:#FF0000;font: bold;}
.res12 {color:#FF0000;font-family: "Courier New", Courier, mono;font-size: 9px;}
.blue1 {color:#0000FF;font-weight: bold;color: #330099;}
.blue2 {color:#0000FF;font-weight: bold}
.blue3 {color:#0000FF;font-weight: bold}
.blue4 {color:#0000FF;font-weight: bold}
.blue5 {color:#0000FF;font-weight: bold}
.blue6 {color:#0000FF;font-weight: bold}
.blue7 {color:#0000FF;}
.blue8 {color:#0000FF;font: bold;}
.blue9 {color:#0000FF;}
.blue10 {color:#0000FF;font: bold;}
.blue11 {color:#0000FF;font: bold;}
.blue12 {color:#0000FF;font-family: "Courier New", Courier, mono;font-size: 9px;}
.quote {color:#0000FF;font-style:italic;font-size: 100%;}


.pick         {position:relative;cursor:hand}
.drag         {position:relative;cursor:move}
.drag:hover   {position:relative;cursor:hand}
.drop         {cursor:hand}
.drop:hover   {background:grey;cursor:hand}
.des          {font-size: small;font-style: italic;}
.hover_comment{position:absolute;top:50;left:400;background-color:yellow;color:black;border-color:black;height:0;width:0 }
.crosshair    {Cursor:crosshair}
.wait         {Cursor:wait}
.help         {Cursor:help}
.move         {Cursor:move}

.table        {margin:1em;border:thin blue}
.tablePos     {margin:1em;border:none}
.frame        {background:gray:border:thin}
.select       {position:relative;cursor:move;border:thin red}
.input        {margin:1em;border:thin blue;cursor:text}
.inputtxt     {margin:1em;border:thin blue;cursor:text}
.inputint     {margin:1em;border:thin blue;cursor:text}
.inputfloat   {margin:1em;border:thin blue;cursor:text}
.inputdate    {margin:1em;border:thin blue;cursor:text}
.inputfile    {margin:1em;border:thin blue;cursor:text}
.inputPict    {margin:1em;border:thin blue;cursor:crosshair}
.inputxml     {margin:1em;border:thin blue;cursor:text}
.inputaccount {margin:1em;border:thin blue;cursor:text}
.option       {background:yellow}
.modify       {border:thin red}
.ro           {border:thin gray}
.display      {border:thin black}


.imageTitle   {position:relative;left:0; top:0;font-size:small:font-variant:small-caps}
.note         {font-size:small;}
.info         {color: black;font-variant: small-caps;}
.note:first-line {font-vatiant: small-capps ;font-weight:bold}
.warning      {color: blue;font-variant: small-caps;}
.error        {color: redfont-variant: small-caps;}
/*standard features */
/* body:   http://iconcss.cycluspro.net/    versus http://iconcss.cycluspro.net/ */
img { max-with:100%; height:auto; }
p {margin-left: 20px;} 
p::first-letter{display:block;  font-size:170%;}

SELECT, INPUT { FONT-FAMILY: Verdana, Helvetica CE, Arial, sans-serif; FONT-SIZE: 12px; }
A { color: #6666CC; }
.small { font-size: 10px ;}
.smallwh { background-color: #555555; font-size: 10px; color: white; }
.white { color: white; background-color: #555555; }
.red { color: red; }
.gray { color: gray; }
.big { font-size: 14px }
.frame { background-color: #555555; }
.grayline { background-color: #cccccc; }
.butt { font: bold 12px Verdana, Helvetica, Arial, sans-serif; }
.smallbut { font: bold 10px Verdana, Helvetica, Arial, sans-serif; }
.sort { color: white;  text-decoration: none}
.sort:hover { font-weight:bold }
/*
   tested area
*/

body {background-color:##fcf4ff;}
/*   hover basics    (.summary & .expand )
     this needs to be adapted for touch screens (on hover finger is over the zone can not read
  
*/
.expand {display: none;}
.summary:hover + .expand { display: block;  color: red;}
/*
    form handling 
    input[type=text] {background: yellow;}

*/
      input {background-color: lightblue font: 1rem 'Fira Sans', sans-serif;}
      input[type=number] {text-align:right;}
      input[type=text]   {text-align:left; }
      input[type=range].slide {
                            -webkit-appearance: none;  /* Override default CSS styles */
                            appearance: none;
                            width: 100%; /* Full-width */
                            height: 7px; /* Specified height */
                            background: #d3d3d3; /* Grey background  */
                            outline: none; /* Remove outline */
                            opacity: 0.7; /* Set transparency (for mouse-over effects on hover) */
                            -webkit-transition: .2s; /* 0.2 seconds transition on hover */
                            transition: opacity .2s;
                           }
       input[type=range].slide:hover {opacity:1;}                       
       input[type=range].slide:hover > span.slide {background-color:blue;}
       span.slide {background-color:yellow;}

form {display:grid; grid-template-columns: 2fr 4fr 1fr ;
                       /*  20% 60% 20%; */
                      grid-column-gap:1px;
					  grid-row-gap:1px;
					  grids-auto-rows: minmax(1em,auto);
      }
form >label { background:#eee;padding 1em;}
form >input { background:#ddd; padding 1em;}
form >div >input  { background:#ddd; padding 1em;}