Untitled

dabblet.css

.profil_ground {
	margin-top:5px;
	height:580px;
	background:#b0a4a4;	
	-webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 5px;
}
.bet-form {
    /* Size and position */
    width: 100%;	
    padding: 10px;
    position: relative;
 
    /* Font styles */
    font-family: 'Raleway', 'Lato', Arial, sans-serif;
    color: white;
    text-shadow: 0 2px 1px rgba(0,0,0,0.3);
}
 
.bet-form h1 {
    font-size: 22px;
    padding-bottom: 10px;
}
.bet-form p {
    width: 33%;
    float: left;
    border-bottom:1px solid #fff;
    border-top:1px solid #fff;

	
}

.bet-form input[type=text] {
    /* Size and position */
	float:left;
    padding: 3px 1px 3px 5px;
	width: 5%;
    font-size: 12px;
	margin-right:8px;

 
    /* Styles */
    border: 1px solid #4e3043; /* Fallback */
    border: 1px solid rgba(78,48,67, 0.8);
    background: rgba(0,0,0,0.15);
    border-radius: 2px;
    box-shadow: 
        0 1px 0 rgba(255,255,255,0.2), 
        inset 0 1px 1px rgba(0,0,0,0.1);
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
 
    /* Font styles */
    font-family: 'Raleway', 'Lato', Arial, sans-serif;
    color: #fff;
}
.bet-form input::-webkit-input-placeholder {
    color: rgba(249,202,202,0.5);
    text-shadow: 0 1px 0 rgba(255,255,255,0.15);
}
 
.bet-form input:-moz-placeholder {
     color: rgba(249,202,202,0.5);
    text-shadow: 0 1px 0 rgba(255,255,255,0.15);
}
 
.bet-form input:-ms-input-placeholder {
     color: rgba(249,202,202,0.5);
    text-shadow: 0 1px 0 rgba(255,255,255,0.15);
}
.bet-form .float {
    width: 50%;
    float: left;
    padding-top: 15px;
    border-top: 1px solid rgba(255,255,255,1);
}

.bet-form label {
    display: block;
    cursor: pointer;
    text-transform: uppercase;
    font-weight: 400;
    text-shadow: 0 1px 0 rgba(255,255,255,0.8);
    font-size: 11px;
	
	width: 60%;
    float: left;
    padding-top: 9px;
 
}

dabblet.html

<div class="profil_ground">
   <form class="bet-form">
    <p class="clearfix"><!-- Match 1 -->
        <label for="login">Sverige - England</label>
        <input name="game1" placeholder="X" maxlength="2"
        type="text" required=""
   onKeyPress="return numbersonly(this, event)" >
        
        <input type="text" name="game1" placeholder="X" required="">
    </p>
   	 <p class="clearfix">
        <label for="login">Italien - Frankrike</label>
        <input type="text" name="game1" placeholder="X" required="">
        <input type="text" name="game1" placeholder="X" required="">
    </p>
 	<p class="clearfix">
        <label for="login">Danmark - Kroatien</label>
        <input type="text" name="game1" placeholder="X" required="">
        <input type="text" name="game1" placeholder="X" required="">
    </p>
     <p class="clearfix"><!-- Match 2 -->
        <label for="login">Frankrike - Ukraina</label>
        <input type="text" name="game1" placeholder="X" required="">
        <input type="text" name="game1" placeholder="X" required="">
    </p>
    <p class="clearfix">
        <label for="login">Portugal - Irland</label>
        <input type="text" name="game1" placeholder="X" required="">
        <input type="text" name="game1" placeholder="X" required="">
    </p>
 	<p class="clearfix">
        <label for="login">Frankrike - Portugal</label>
        <input type="text" name="game1" placeholder="X" required="">
        <input type="text" name="game1" placeholder="X" required="">
    </p>
     <p class="clearfix"><!-- Match 3 -->
        <label for="login">Italien - Holland</label>
        <input type="text" name="game1" placeholder="X" required="">
        <input type="text" name="game1" placeholder="X" required="">
    </p>
    <p class="clearfix">
        <label for="login">England - Ukraina</label>
        <input type="text" name="game1" placeholder="X" required="">
        <input type="text" name="game1" placeholder="X" required="">
    </p>
 	<p class="clearfix">
        <label for="login">Sverige - Frankrike</label>
        <input type="text" name="game1" placeholder="X" required="">
        <input type="text" name="game1" placeholder="X" required="">
    </p>
     <p class="clearfix"><!-- Match 4 -->
        <label for="login">Norge - Island</label>
        <input type="text" name="game1" placeholder="X" required="">
        <input type="text" name="game1" placeholder="X" required="">
    </p>
    <p class="clearfix">
        <label for="login">Irland - Norge</label>
        <input type="text" name="game1" placeholder="X" required="">
        <input type="text" name="game1" placeholder="X" required="">
    </p>
 	<p class="clearfix">
        <label for="login">Polen - Holland</label>
        <input type="text" name="game1" placeholder="X" required="">
        <input type="text" name="game1" placeholder="X" required="">
    </p>
     <p class="clearfix">
        <label for="login">Italien - Kroatien</label>
        <input type="text" name="game1" placeholder="X" required="">
        <input type="text" name="game1" placeholder="X" required="">
    </p>
    <p class="clearfix">
        <label for="login">Irland - Holland</label>
        <input type="text" name="game1" placeholder="X" required="">
        <input type="text" name="game1" placeholder="X" required="">
    </p>
 	<p class="clearfix">
        <label for="login">Lag1 - Lag2</label>
        <input type="text" name="game1" placeholder="X" required="">
        <input type="text" name="game1" placeholder="X" required="">
    </p>
     <p class="clearfix">
        <label for="login">Lag1 - Lag2</label>
        <input type="text" name="game1" placeholder="X" required="">
        <input type="text" name="game1" placeholder="X" required="">
    </p>
    <p class="clearfix">
        <label for="login">Lag1 - Lag2</label>
        <input type="text" name="game1" placeholder="X" required="">
        <input type="text" name="game1" placeholder="X" required="">
    </p>
 	<p class="clearfix">
        <label for="login">Lag1 - Lag2</label>
        <input type="text" name="game1" placeholder="X" required="">
        <input type="text" name="game1" placeholder="X" required="">
    </p>
     <p class="clearfix">
        <label for="login">Lag1 - Lag2</label>
        <input type="text" name="game1" placeholder="X" required="">
        <input type="text" name="game1" placeholder="X" required="">
    </p>
    <p class="clearfix">
        <label for="login">Lag1 - Lag2</label>
        <input type="text" name="game1" placeholder="X" required="">
        <input type="text" name="game1" placeholder="X" required="">
    </p>
 	<p class="clearfix">
        <label for="login">Lag1 - Lag2</label>
        <input type="text" name="game1" placeholder="X" required="">
        <input type="text" name="game1" placeholder="X" required="">
    </p>
     <p class="clearfix">
        <label for="login">Lag1 - Lag2</label>
        <input type="text" name="game1" placeholder="X" required="">
        <input type="text" name="game1" placeholder="X" required="">
    </p>
    <p class="clearfix">
        <label for="login">Lag1 - Lag2</label>
        <input type="text" name="game1" placeholder="X" required="">
        <input type="text" name="game1" placeholder="X" required="">
    </p>
 	<p class="clearfix">
        <label for="login">Lag1 - Lag2</label>
        <input type="text" name="game1" placeholder="X" required="">
        <input type="text" name="game1" placeholder="X" required="">
    </p>
   
 
    <p>
        <input type="submit" name="submit" value="Continue">
    </p>       
</form>
   </div>

dabblet.js

<SCRIPT TYPE="text/javascript">
<!--
// copyright 1999 Idocs, Inc. http://www.idocs.com
// Distribute this script freely but keep this notice in place
function numbersonly(myfield, e, dec)
{
var key;
var keychar;

if (window.event)
   key = window.event.keyCode;
else if (e)
   key = e.which;
else
   return true;
keychar = String.fromCharCode(key);

// control keys
if ((key==null) || (key==0) || (key==8) || 
    (key==9) || (key==13) || (key==27) )
   return true;

// numbers
else if ((("0123456789").indexOf(keychar) > -1))
   return true;

// decimal point jump
else if (dec && (keychar == "."))
   {
   myfield.form.elements[dec].focus();
   return false;
   }
else
   return false;
}

//-->
</SCRIPT>

settings.json

{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"javascript"}