/*Style Sheet For Assignment 4, Form Varification with Java Script*/

/* reset all rules before starting customize styling */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
    display: block;
}

body {
    line-height: 1;
    max-width: 1000px;
    background-color: #d0eeee;
    margin: auto;
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}

/* Taking allPage Div into a box and Positioning */
#allPage {
    border: thin solid #3399FF;
    border-radius: 15px;
    padding: 8px;
    box-shadow: 3px 3px 3px #808080;
    width: 980px;
    margin-right: auto;
    margin-left: auto;
}

/* main content within the Article */
article {
    width: 940px;
    text-align: left;
    background: #b0e898;
    padding: 20px;
    overflow: auto;
    margin-top: 100px;
    border-radius: 10px;
}

/* Styling Heading in h2 */
h2 {
    font-weight: bold;
    font-size: 30px;
    margin-left: 90px;
    width: 66.6667%;
    text-shadow: 1px 1px 1px #000011;
    color: #bfbfbf;
}

h3 {
    font-family: arial, helvetica, sans-serif;
    font-size: 20px;
    margin-left: 90px;
    margin-top: 10px;
    color: rgb(55, 96, 46);
}

hTwoAndThree {
    width: 940px;
    text-align: left;
    background: #b0e898;
    padding: 100px;
    overflow: auto;
    margin-top: 100px;
    border-radius: 10px;
}

.errorMsg {
    display: block;
    margin-top: -22px;
    margin-right: 10px;
    width: 54%;
    text-align: left;
    padding-left: 10px;
    background: #cae1e4;
    color: black;
    border: 0px solid rgb(190,50,38);
    font-weight: bold;
}

.errorMsgS {
    display: block;
    margin-top: 6px;
    margin-right: 10px;
    width: 54%;
    text-align: left;
    padding-left: 10px;
    background: #cae1e4;
    color: black;
    border: 0px solid rgb(190,50,38);
    font-weight: bold;
}



/* form */
form {
    padding: 10px;
    width: 83%;
    float: left;
    margin-left: 80px;
}

fieldset {
    margin-bottom: 10px;
    position: relative;
    padding: 2.5em 1em 0.5em 1em;
    background: #cae1e4;
    border: 1px solid rgb(50,150,38);
}

    fieldset fieldset {
        padding-top: 15px;
    }

legend, #submit, #instrlabel {
    font-family: arial, helvetica, sans-serif;
    font-weight: bold;
}

legend {
    position: absolute;
    top: 0;
    left: 0;
    font-size: 1.25em;
    margin-top: 0.5em;
    margin-left: 0.5em;
}

fieldset fieldset legend {
    font-size: 1em;
    margin-top: 25px;
    top: -30px;
    left: 8px;
}

fieldset.text {
    position: relative;
    padding: 5px 10px 5px 5px;
    margin-right: 15px;
}

legend {
    font-weight: bold;
    font-size: 18px;
    text-align: left;
    padding-left: 1.4em;
    margin-bottom: 0.5em;
}

    legend span {
        text-align: right;
    }

input, label {
    position: relative;
    line-height: 1.2em;
    display: block;
}

fieldset.text label {
    width: 8em;
    text-align: left;
    float: left;
    clear: left;
    color: #0000FF;
    margin: 5px 1px 0 10px;
    font-weight: bold;
    font-size: 18px;
}

fieldset.text select {
    width: 153px;
    margin: 5px 1px 0 0;
    height: 21px;
}

fieldset.text p {
    text-align: left;
    float: right;
    clear: right;
    font-weight: bold;
    font-size: 16px;
    height: 22px;
}

fieldset.text input {
    margin: 5px 0 0 0;
    width: 153px;
}



footer {
    background: #afb3b7;
    text-align: center;
    padding: 10px;
    color: rgb(118, 138, 118);
    font-size: 16px;
    font-weight: bold;
    text-shadow: 1px 1px 1px #000000;
}

#createBtn {
    width: 8em;
    margin-left: 0px;
    float: left;
    clear: left;
    padding: 5px;
}

#reset {
    width: 153px;
    margin-left: 160px;
    padding: 5px;
    color: #557d55;
}

#createBtn, #reset {
    font-weight: bold;
    font-size: 20px;
    color: #446d44;
    text-shadow: 1px 1px 1px #000000;
}

    #createBtn:hover, #reset:hover {
        background-color: #ffadad;
    }