/* styles for my form exercise */

* {
    padding:0;
    margin:0;
    box-sizing:border-box;
}
/* I am adding padding to my body for demonstration purposes only. REMOVE THE PADDING once you start working your homework!!!!!! */
body {
    /* background:#eee;
    padding:100px; */


}

#wrapper {
    width:940px;
    margin:30px auto;
}

header {
    height:200px;
    width:100%;
    /* background:lightgreen */
}

main {
    width:580px;
    height:auto;
    /* background:orange; */
    float:left;
}

aside {
    width:340px;
    height:100px;
    /* background:lightblue; */
    float:right;
    margin-left:20px;
}
/* footer {
    clear:both;
    height:50px;
    line-height:50px;
    (this centers the footer vertically)
    font-size:.9em;
}
footer li {
    list-style-type: none;
    float:left;
    margin-right:30px;
} */
footer {
    clear:both;
    height:60px;
    line-height:60px;
    display:flex;
    justify-content: center;
    border-top:1px dotted #800;
}
footer li {
    list-style-type: none;
    margin: 0 10px 0 10px;
}
footer ul {
    display: flex;
}


/* fieldset default gives a border */


/* The form will never be huge, so we need to style it! */

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 0 5px;
}

label {
    display:block;
    margin-bottom: 5px;
    font-weight:bold;
    font-size:1.1em;
}
/* a label is an inline element, so we need it to display as block */
/* don't use <br> tags to add a line because that's doing styling in html -- just use CSS */
/* below my input, I need some space, so... */
input {
    margin-bottom: 10px;
    height:30px;
    width:100%;
}
/* comment area is a textarea element */

input[type=radio],
input[type=checkbox] {
    margin-bottom:3px;
    /* this overrides the input styling */
    margin-right:3px;
    height:auto;
    width:auto;   
}
/* no space between input[type */
input[type="submit"] {
width:auto;
/* declare width auto it will be as big as the content */
}
/*  [ ] is an attribute selector */
form ul {
    margin-left:15px;
    margin-bottom:10px;
}
/* any ul on the form ul will have this styling */
form li {
    list-style-type: none;
}
select {
    margin-bottom:10px;
}


textarea {
    width:100%;
    height:110px;
    margin-bottom:10px;
}
img {
    margin-top:20px;
}
/* Typography */
h1 {
    color:#800;
    font-size:3em;
    margin-bottom:12px;
}

h3 {
    
    font-size:1.5em;
    margin-bottom:10px;
}





/* legend {
    font-size: 1.4em;
    font-style:italic;
    padding:8px;
    background:#fff;
    border-radius:5px;
} */