/*styles for my form exercise*/

*{
    padding:0;
    margin:0;
    box-sizing:border-box;
}

body{
    background:grey;
    padding:100px;
}

header{

    margin-left:5px;
    padding-top: 10px;
}

#wrapper{
    width:940px;
    margin:30px auto;
    background:rgb(220, 217, 217);
}

main{
    width:500px;
    float:left;
}

aside{
    width:350px;
    float:right;
    background-color:rgb(199, 198, 197);
    margin-right:5px;
    margin-bottom:5px;
}



footer{
    clear:both;
    height:60px;
    line-height:60px;
    display:flex;
    justify-content: center;
    border-top: 1px dotted #800;
}

footer ul{
    display:flex;
}

footer li{
    margin:0 10px;   
    list-style-type:none; 
}

/*display flex, diplays items side by side without floating*/

form{
    max-width:580px;
    margin-bottom:20px;
}

fieldset{
    padding:10px;
    border-radius:5px;
    border:1px dotted #800;
}

legend{
    font-size:1.3em;
    font-style:italic;
    padding: 0 5px;
}

label{
    display:block;
    margin-bottom:5px;
    font-weight:bold;
    font-size:1.1em;
}

input{
    margin-bottom:10px;
    height:30px;
    width:100%;
}

input[type=radio],
input[type=checkbox]{
    height:auto;
    width:auto;
    margin-right:3px;
    margin-bottom:3px;
}

input[type=submit]{
    width:auto;
}

form ul{
    margin-left:15px;
    margin-bottom:10px;
}

form li{
    list-style-type:none;
}

select{
    margin-bottom:10px;
}

input[type="submit"]{
    width:auto;
}

textarea{
    width:100%;
    height:110px;
    margin-bottom:10px;
}

h1{
   color:#800;
   font-size:3em;
   margin-left:10px;
   margin-bottom:12px; 
}

h3{
    color:white;
    background-color: #800;
    /*padding-top:2px;
    padding-left:8px;*/
    text-align:center;
    }

p{
    color:black;
    margin:5px;
}

img{
    padding:5px;
}