<style type="text/css">
.formstyle1 {
    margin:5px auto;
    max-width: 400px;
    padding: 20px 12px 10px 20px;
}

.formstyle1 li {
    padding: 0;
    display: block;
    list-style: none;
    margin: 5px 0 0 0;
}

ul.defaultul  {
    list-style: circle;
    margin: initial;
    padding: 0 0 0 40px;
}

ul.defaultul > li {
 	list-style: circle;
    padding: 0;
    display: list-item;
    margin: 5px 0 0 0;
}

ol.defaultol  {
    list-style: decimal;
    margin: initial;
    padding: 0 0 0 40px;
}

ol.defaultol > li {
    list-style: decimal;
    padding: 0;
    display: list-item;
    margin: 5px 0 0 0;
}
.formstyle1 label{
    margin:0 0 3px 0;
    padding:0px;
    display:block;
    font-weight: bold;
    font-style: Italic;
}

 /**
 * Start by hiding the checkboxes
 */
.formstyle1 .checkboxOne input[type=checkbox] {
	visibility: hidden;
}


.formstyle1 .checkboxOne  {
	width: 20px;
	height: 20px;
	background: #ddd;
	margin: 5px 10px;
	border-radius: 100%;
	position: relative;
	box-shadow: 0px 1px 3px rgba(0,0,0,0.5);
}

/**
 * Create the slider from the label
 */
.formstyle1 .checkboxOne label {
	display: block;
	width: 15px;
	height: 15px;
	border-radius: 100px;

	transition: all .5s ease;
	cursor: pointer;
	position: absolute;
	top: 2.5px;
	left: 2.5px;
	z-index: 1;
	background: #ccc;
	box-shadow:inset 0px 1px 3px rgba(0,0,0,0.5);
}

/**
 * Move the slider in the correct position if the checkbox is clicked
 */
.formstyle1 .checkboxOne :checked + label {
	background: #26ca28;
}

.formstyle1 input[type=text],
.formstyle1 input[type=date],
.formstyle1 input[type=datetime],
.formstyle1 input[type=number],
.formstyle1 input[type=search],
.formstyle1 input[type=time],
.formstyle1 input[type=url],
.formstyle1 input[type=email],
.formstyle1 input[type=password],
textarea,
select{
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    border:1px solid #BEBEBE;
    padding: 7px;
    margin:0px;
    -webkit-transition: all 0.30s ease-in-out;
    -moz-transition: all 0.30s ease-in-out;
    -ms-transition: all 0.30s ease-in-out;
    -o-transition: all 0.30s ease-in-out;
    outline: none; 
    background-color : #f0f0f0; 

}
.formstyle1 input[type=text]:focus,
.formstyle1 input[type=date]:focus,
.formstyle1 input[type=datetime]:focus,
.formstyle1 input[type=number]:focus,
.formstyle1 input[type=search]:focus,
.formstyle1 input[type=time]:focus,
.formstyle1 input[type=url]:focus,
.formstyle1 input[type=email]:focus,
.formstyle1 input[type=password]:focus,
.formstyle1 textarea:focus,
.formstyle1 select:focus{
    -moz-box-shadow: 0 0 8px #88D5E9;
    -webkit-box-shadow: 0 0 8px #88D5E9;
    box-shadow: 0 0 8px #88D5E9;
    border: 1px solid #88D5E9;
}
.formstyle1 .field-divided{
    width: 49%;
}

.formstyle1 .field-long{
    width: 100%;
}
.formstyle1 .field-select{
    width: 75%;
}
.formstyle1 .field-textarea{
    height: 100px;
}

.formstyle1 .required{
    color:red;
}


</style>