@charset "utf-8";
/* CSS Document */
* {
    margin: 0;
    padding: 0;
}


#container {
    padding: 1em;
}

form {
    margin: 1em 0;
}

fieldset {
    border: none;
}

form > fieldset > fieldset > label {
    display: inline-block;
}

form > fieldset > fieldset > label {
    margin-left: .5em;
}

form > fieldset > fieldset > label.first {
    margin-left: 0;
}

form > fieldset {

    margin-bottom: 2em;
    padding-top: 1em;
}

form > fieldset > legend {
	font-weight: normal;
	text-decoration: underline;
	font-size: 1.2em;
	text-align: left;
}

label {
	margin-bottom: .8em;
	text-align: left;
}

input,
textarea,
select,
button {
    padding: .5em;
    width: 100%;
    box-sizing: border-box;
    outline: none;
    border: 1px solid #333333;
    border-radius: 3px;
    background: #333333;
}

label,
input,
select,
textarea {
    display: block;
}

textarea {
    height: 30em;
	min-width: 95%;
}

input[type="submit"],
input[type="checkbox"],
input[type="radio"],
input[type="reset"],
button {
    width: auto;
    display: inline;
    background: #333333;
    border-color: #999;
    margin-right: .2em;
}

input[type="checkbox"],
input[type="radio"] {
	background: #fff;
	border: none;
	padding-left: 0px;
}

label input,
label textarea,
label select {
    margin-top: .5em;
}

span {
    cursor: pointer;
}

@media (min-width: 450px) {
    label > span,
    fieldset > fieldset > legend {
        float: left;
        width: 150px;
        margin-top: .5em;
    }

    fieldset > fieldset > label > span {
        width: auto;
        float: none;
    }

    input,
    select,
    textarea {
        width: 300px;
    }

    input[type="submit"],
    input[type="checkbox"] {
       
    }

    input[type="date"],
    input[type="time"],
    input[type~="color"] {
         display: inline;
         margin-top: 0;
    }

    input[type="color"] {
        width: 5em;
    }
}

@media (min-width: 600px) {
    #container {
        margin: 0 auto;
        width: 600px;
    }
}