Telerik Academy CSS Exam-Variant 2

task3

by Naydenov_it

HTML

<body>
    <div id="wrapper">
        <form>
            <fieldset>
                <legend>Register Information</legend>
                <label for="tb-username">Username: </label>
                <input type="text" id="tb-username" /><br />
                <label for="tb-password">Password: </label>
                <input type="password" id="tb-password" /><br />
                <label for="tb-rpt-password">Repeat Password: </label>
                <input type="password" id="tb-rpt-password" /><br />
            </fieldset>
            <fieldset>
                <legend>Personal Information</legend>
                <label for="tb-firstname">Firsname: </label>
                <input type="text" id="tb-firstname" /><br />
                <label for="tb-lastname">Lastname: </label>
                <input type="text" id="tb-lastname" /><br />
                <label for="tb-age">Age: </label>
                <input type="number" id="tb-age" value="1" min="0" max="99" /><br />
            </fieldset>
            Agree with our temrs of use?
            <label for="radio-yes">Yes</label>
            <input type="radio" id="radio-yes" name="terms-group" value="yes" />
            <label for="radio-no">No</label>
            <input type="radio" id="radio-no" name="terms-group" checked="checked" value="no" />
            <br />
            <button>
                Register now
            </button>
            <input type="reset" value="Clear form" />
            <div id="msg-holder"></div>
        </form>
    </div>
</body>

CSS

* {
    margin:0px;
    padding:0px;
}

div#wrapper {
    width:960px;
    font-family: Verdana, Geneva, 'DejaVu Sans', sans-serif;
    font-size: 16px;
}
    div#wrapper form {
        
        text-align:right;
        border:1px solid black;
        border-radius:15px;
        -web-kid-border-radius:15px;
        margin:25px;
        width:380px;
        height:320px;
        padding:15px;
        background: -webkit-linear-gradient(top, #68D2FF 39%,#8CFEFB 99%); /* Chrome10+,Safari5.1+ */  
    }
     
    div#wrapper form fieldset{
        color:#333333;
        border:3px solid black;
        border-radius:5px;
        -web-kid-border-radius:5px;
        text-align:right;
        padding-right:15px;
        padding-top:10px;
        padding-bottom:5px;
    }
        div#wrapper form fieldset:last-of-type {
            margin-bottom:5px;
        }
    div#wrapper form fieldset legend{
        text-align:right;
        padding-left:20px;
        padding-right:10px;
        font-size:1.3em;
        margin-bottom:-5px;
    }
    div#wrapper form fieldset label{
        
    } 
        div#wrapper form fieldset input[type] {
            width:160px;
            height:25px;
            margin-top:1px;
            border:1px solid #008FCE;
            border-radius:5px;
            -web-kid-border-radius:5px;
            padding-left:15px;

            background: -webkit-linear-gradient(top, #6BD5FF 39%,#89FBFB 99%); /* Chrome10+,Safari5.1+ */  
        }
    div#wrapper form fieldset input#tb-age{
        margin-top:2px;
    }
        div#wrapper form fieldset input[type="number"] {
            height:25px;
            width:35px;
            padding-left:5px;
        }
div#wrapper form input[type="radio"]{
   margin-bottom:20px;
   
}

form button {
    color:#333333;
    border:none;
    width:140px;
    height:35px;
    font-size:1.1em;
    border-bottom:1px solid black;
    border-radius:5px;
    -web-kid-border-radius:5px;
    background:...