/* http://www.fontsquirrel.com/tools/webfont-generator */
	/* http://www.dafont.com/digital-7.font */
	@font-face{ 
		font-family: 'MyWebFont';
		src: url('//jangerat.home.xs4all.nl/GC66MJ0/fonts/d7.eot');
		src: url('//jangerat.home.xs4all.nl/GC66MJ0/fonts/d7.eot?#iefix') format('embedded-opentype'),
   		url('fonts/d7.woff') format('woff'), /* om de een of andere reden werkt het niet als ik deze file op xs4all zet */
   		url('//jangerat.home.xs4all.nl/GC66MJ0/fonts/d7.ttf') format('truetype'),
   		url('//jangerat.home.xs4all.nl/GC66MJ0/fonts/d7.svg#webfont') format('svg');
	}
	input[type=text] { 
		font-family: 'MyWebFont', Courier, sans-serif; font-size: 18pt;
		text-align: right;
		font-size: 30pt;
	  -webkit-border-radius: 10px;
	  -moz-border-radius: 10px;
	  border-radius: 10px;
	  border-width: 2px;
	  padding-right: 2px;
	  background-color: #fafffa;
	}
	input[type=button] {
		font-family:Comic Sans MS,TSCu_Comic,fantasy,cursive;
	  -webkit-border-radius: 10px;
	  -moz-border-radius: 10px;
	  border-radius: 10px;
		font-size: 24px;
	}
	form br { display:none;} /* omdat anders de form elementen op een eigen regel komen */ 
	::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
	  background-color: #ffa;
  	opacity: 1; /* Firefox */
	}
	#projection {
		font-family: 'MyWebFont', Courier, sans-serif; 
		font-size: 30pt;
	}
	#projectie {
		width: 60%;
	  -webkit-border-radius: 10px;
	  -moz-border-radius: 10px;
	  border-radius: 10px;
	  border-width: 2px;
	  border-color: #000;
	  border-style: double;
	  padding: 10px;
    white-space: pre-wrap;       /* Since CSS 2.1 */
    white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
    white-space: -pre-wrap;      /* Opera 4-6 */
    white-space: -o-pre-wrap;    /* Opera 7 */
    word-wrap: break-word;       /* Internet Explorer 5.5+ */
	}
	#inputs {
		color: #aaa;
	}
  .fixed {
  	margin: auto;
  	padding-left: 0px;
  	width: 580px;
  }
	/* Frame */
	.frame {
		width: 60px;
		height: 80px;
		overflow: hidden;
		border: 1px solid #eee;
	}
	.frame .slidee {
		padding: 20px 5px;
		background: #fff;
	}
	.frame ul.items {
		list-style: none;
		margin: 0;
		padding: 0;
		width: 100%;
		line-height: 30px;
	}
	.frame ul.items li {
		float: left;
		width: 100%;
		height: 37px;
		margin: 0 0 1px;
		padding: 0;
		background: #f7f7f7;
		color: #ccc;
		text-align: center;
		cursor: pointer;
		font-family: 'MyWebFont', Courier, sans-serif; 
		font-size: 35pt;
	}
	.frame ul.items li.active {
		color: #000;
		background: #f7f7f7;
	}
	div.inactive li.active{
		color: #777 !important; 
	}
	.dial {
		display:inline-block;
	}
	.fadecontainer {
		position:relative;   
	}
	.fade:after {  
		width: 63px;   
		content:'';   
		display:block;   
		position:absolute;   
		top:0px;   
		left:0px;   
		background: linear-gradient(to bottom, rgba(254,243,225,1) 0%,rgba(255,255,255,0) 40%, rgba(150,150,150,0.1) 60%, rgba(254,243,225,1) 100%);   
		height:83px; 
		pointer-events:none; 
	}
	.groot {
		font-size: 32pt;
	}	
	.invoer {
		font-size: 24pt;
		padding: 15px;
	}	
	.dubbelepunt {
		font-family: 'MyWebFont', Courier, sans-serif; 
		font-size: 30pt;
	}
	#seconden {
		font-family: 'MyWebFont', Courier, sans-serif; 
		font-size: 20pt;
	}