/*Pete Zeller's Den of Poetry
STYLE SHEET FOR PETEZELLER.COM
08-23-2021

Sections:

  1.  DEFAULTS
  2.  COLORS
  3.  STRUCTURE
  4.  FORMS
  5.  RADIO BUTTONS
  6.  TERMS & FINE PRINT
  7.  DATES
  8.  RETURNED MESSAGES
  9.  IMAGES
  10. MOBILE MEDIA STYLING


* *********************** DEFAULTS *************************************/

/*********************** 0.0 Brett's Work *****************************/

/* Nova Attributes */
.attachment__size,
.attachment__name {
    display: none;
}
/* End Nova Atts */

.audio-container {
    margin-top: 1rem;
    margin-bottom: 1rem;
    width: 100%;
}
.audio-container audio {
    width: 50%;
}

.card {
    border: 1px solid #fdc90f;
    border-radius: 0.5rem;
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    margin: 0.65rem 1rem;
    padding: 0.75vw;
}

.card a:hover {
    color: #ffffae;
}

.construction {
    margin-top: -7.5rem;
    margin-bottom: 4.5rem;
    text-align: center;
}

.comment-section {
    border-top: 1px solid #fdc90f;
    margin-top: 2rem;
}

.comment-section h6 {
    font-size: 2rem;
}

.comments-container {
    margin-top: 0.5rem;
    padding: 1rem;
}
.comment {
    justify-content: space-between;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    margin: 0;
    margin-top: 1rem;
}
.comment .left {
    flex-direction: column;
}
.comment .right {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.comment form {
    margin: 0;
    max-width: none;
    padding: 0;
}

.comment p,
.comment h5 {
    margin: 0px !important;
    padding: 0.15rem 0rem 0.15rem 0rem !important;
}
.comment-input {
    height: auto !important;
    align-items: baseline;
}

.comment-section button,
.comment button,
.comment-section button:active,
.comment button:active {
    border-radius: 0.5rem;
    font-size: 1rem;
    height: fit-content;
    margin: 0.5rem 0.25rem 0rem 0rem;
    padding: 0.25rem 0.65rem;
    width: fit-content;
}
.comment .button-container {
    display: flex;
    justify-content: flex-end;
}
.comment p {
    font-size: 1rem;
}
.dropdown-container {
    max-height: 28.75rem;
    border-radius: 0.25rem;
    border: 0.1rem solid #fdc90f;
    margin-top: 0.5rem;
    overflow: auto;
    padding: 0.2rem 0.65rem;
    position: relative;
    z-index: 1;
    max-width: 90%;
}

.dropdown-item {
    margin: 0.5rem 0rem;
    padding: 0.2rem 0.625rem;
}

.featured-title {
    margin-top: 0.5rem;
}

.featured-line {
    border-bottom: 0.1rem solid #fdc90f;
    width: 50%;
    margin: 2rem auto;
}

.poems-container {
    margin-top: 3.5rem;
    padding: 0.5rem;
}

.poem-column,
p,
h2,
h5,
time {
    text-align: left;
    margin: 0.25vw !important;
    padding: 0.25vw !important;
}

.poem-column h2 {
    font-size: 20px;
}

.poem-thumbnail {
    height: 15%;
    width: 15%;
}
.poem-thumbnail img {
    width: 100%;
}

.replies-container {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}
.reply {
    width: 90%;
    margin-top: 1rem;
}
.reply-bar {
    display: flex;
    flex-direction: row;
    margin-top: 0.5rem;
}

.sub-nav {
    display: flex;
    flex-direction: row;
    padding: 0.625rem 0.625rem;
    position: absolute;
    max-width: 64rem;
    background-color: transparent;
}

.sub-nav-item {
    width: 50%;
}
.category-dropdown button {
    border-radius: 12px;
    border: 1px solid #fdc90f;
    cursor: pointer;
    font-weight: bold;
    font-variant: small-caps;
    margin-top: 0.75rem;
    padding: 0.3rem 1.5rem;
    text-decoration: none;
    text-align: center;
}

.single-input {
    display: flex;
    align-items: flex-end;
    padding: 0;
}

.single-input button,
.single-input button:active {
    margin-left: 0.5rem;
}


.video-container {
    display: flex;
    justify-content: center;
    margin: 16px 0;
}

/*********************** 1.1 Page Defaults *****************************/
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/********************** 1.2 Body/Wrapper settings ***********************/

body {
    width: 100vw;
    background: url(/images/bgimg.gif);
}

.body-wrapper {
    width: 100vw;
    background: url(/images/bgimg.gif);
    display: flex;
    justify-content: center;
    overflow-y: scroll;
    font-size: 1.4em;
    padding-bottom: 100px;
    /* font-family: 'Palatino Linotype', 'Book Antiqua', Palatino, serif; */
    font-family: "Times New Roman", Times, serif;
}

.wrapper {
    display: block;
    width: 1024px;
    overflow: auto;
    padding: 0px;
}

/******************** 2 COMMON COLORS *******************************/

/********************** 2.1 Text colors **********************/

/* 97% with with hint of yellow */
.wrapper,
#ppwrapper {
    color: #fffff0;
}

/* light army green */
.sub-nav button,
nav a,
aside a,
article a,
.sign-in,
.sabtn,
.sabtn a,
.sabtn a:visited,
.sobtn,
.sobtn a,
.sobtn a:visited,
.subtn,
.subtn a,
.subtn a:visited,
.sibtn,
.sibtn a,
.sibtn a:visited,
.emailcb,
#define {
    color: #c0bf85;
}

/* Meduim dark gray */
.sub-nav button:hover,
nav a:hover,
aside a:hover,
article a:hover,
#hideonsubmit ul li:hover,
.highlightedtab,
.sabtn-highlighted,
.sabtn:hover,
.sibtn-highlighted,
.sibtn:hover,
.sobtn:hover,
.subtn:hover,
.sbutton:hover,
.sbutton:focus,
.ffield:hover,
.ffield:focus {
    color: #333333;
}

/* 95% white with yellow */
h1 {
    color: #ffffe5;
}

/* Bronze/gold */
nav,
.ffield,
.ifield,
#terms a,
#terms a:visited,
.acctbtn,
.sbutton,
.sbutton:focus,
.session-var {
    color: #fcc603;
}

/* 92% white with green */
#terms,
#terms h2,
#terms p {
    color: #ffffd5;
}

/* 84% White with green */
article a,
p.thefineprint,
.sbutton {
    color: #ffffae;
}

/* Deep, dark green */
.checkmark,
.sbutton:hover,
.sbutton:focus,
.ffield:hover,
.ffield:focus {
    color: #052b00;
}

/* Tan */
footer {
    color: #eadca2;
}

/* Green */
p.thefineprint a,
p.thefineprint a:hover {
    color: #33b202;
}

/************************** 2.2 Background colors ************************/

/* Deep, dark green */
.comment,
.sub-nav button,
nav a, aside a,
legend,
fieldset,
/*checkbox,*/
.survey input ~ .checkmark,
.sign-in,
.sbutton,
.sabtn,
.sibtn,
.sobtn,
.subtn,
.emailcb,
.ffield,
.ifield {
    background-color: #052b00;
}

/* Bronze/gold */
.sub-nav button:hover,
nav a:hover,
aside a:hover,
article a:hover,
.survey input:checked ~ .checkmark,
.survey input:hover ~ .checkmark,
#hideonsubmit ul li:hover,
.highlightedtab,
.sabtn-highlighted,
.sabtn:hover,
.sibtn-highlighted,
.sibtn:hover,
.sobtn-highlighted,
.sobtn:hover,
.subtn-highlighted,
.subtn:hover,
.sbutton:hover,
.sbutton:focus,
.ffield:hover,
.ffield:focus,
.definition {
    background-color: #fcc603;
}

/* Black */
nav,
nav ul,
header,
header ul,
#terms a,
#terms a:visited,
#fnavdiv,
footer {
    background-color: #000000;
}

/* Darkest green */
aside ul,
.wrapper,
#ppwrapper,
.dropdown-container {
    background-color: #001c00;
}

/* 90% dark green */
.sbutton {
    background-color: #063300;
}

/* Bronze shade */
article a:hover {
    background-color: #fdc90f;
}

/********************* 3 STRUCTURE ******************************/

/******************* 3 Semantic divisions    *********************/

/************ 3.1 Headers ************************/

header {
    position: fixed;
    padding-top: 10px;
    z-index: 10;
}

header ul {
    display: flex;
    width: 1024px;
    flex-direction: row;
    padding-inline-start: 10px;
    margin: 0px;
    justify-content: space-between;
    list-style-type: none;
}

header ul li {
    display: inline;
    float: left;
}

header ul li div {
    text-align: center;
}

.headerc {
    justify-content: center;
}

.hline2 {
    justify-content: space-between;
}

/*************** 3.2 Headings ****************/

h1 {
    display: block;
    min-width: 700px;
    margin: 0px;
    padding-top: 0px;
    font-size: 2.5em;
    font-weight: bold;
    justify-content: center;
    font-variant: small-caps;
}

h2 {
    position: relative;
    display: block;
    margin: 0px;
    padding: 0px;
    line-height: 1.7em;
    font-size: 1em;
    font-weight: 300;
    font-variant: small-caps;
}

header h2 {
    display: inline-block;
    margin-top: 5px;
    font-size: 1.2em;
    font-variant: small-caps;
}

h3 {
    width: 100%;
    padding: 0px 75px;
    font-size: 1.6em;
    line-height: 1.7em;
    font-weight: 300;
    font-variant: small-caps;
    text-align: center;
}

h4 {
    font-size: 1.7em;
    padding: 5px 50px;
    margin-left: 40px;
    line-height: 2em;
    font-weight: 500;
}

/* h5 {
    font-size: 1rem;
    padding: 5px 50px;
    margin-left: 40px;
    line-height: 2em;
    font-weight: 500;
}
h6 {
    font-size: 1.7em;
    padding: 5px 50px;
    margin-left: 40px;
    line-height: 2em;
    font-weight: 500;
} */

/************ 3.3 Navigataion bar ***************/

nav {
    position: fixed;
    width: 64rem;
    padding-bottom: 5px;
    padding-top: 5px;
    text-align: center;
}

nav ul {
    display: flex;
    flex-direction: row;
    height: 2.5rem;
    margin: 0px;
    padding-inline-start: 10px;
    justify-content: space-around;
    list-style-type: none;
}

nav ul li {
    display: inline;
    float: left;
    width: 170px;
    font-size: 1.1em;
}

nav a {
    display: block;
    border-radius: 12px;
    border: 2px solid #fdc90f;
    font-weight: bold;
    font-variant: small-caps;
    padding: 0.25rem 1.5rem;
    text-decoration: none;
    text-align: center;
}

.sub-nav button:hover,
nav a:hover {
    border-radius: 12px 12px 12px 12px;
    border: 2px solid #33b202;
    font-weight: bold;
}

.highlightedtab {
    border-radius: 12px 12px 12px 12px;
    border: 2px solid #2c9702;
}

/***************** 3.4 Main Content *************************/

main {
    width: 1024px;
    /*display: block;*/
    /*overflow-x: hidden;*/
    margin-top: 172px;
    padding: 20px 20px;
}

article {
    overflow-x: hidden;
    /*max-width: 1024px;*/
    margin: auto;
    display: block;
}

article a {
    text-decoration: none;
}

/*************** 3.5 Paragraph styles *************************/

p {
    margin: 25px;
}
p,
p.about {
    font-size: 0.9em;
    line-height: 1.4em;
}

p.secright {
    margin: 25px;
    padding-top: 45px;
    clear: right;
}

p.secleft {
    margin: 25px;
    padding-top: 70px;
    clear: left;
}

p.poems {
    max-width: 800px;
    padding: 15px 0px;
    display: block;
    clear: none;
}

.poems1 {
    /* max-width: 800px;
    margin-left: 200px;
    padding: 15px 20px;
    display: block;
    clear: none; */
}
.poems1 {
    /* margin-left: 155px;
    width: auto; */
}

p.sig {
    margin-top: 40px;
    margin-left: 25px;
    line-height: 1.5em;
    letter-spacing: 1.25px;
    font-size: 1em;
    font-weight: normal;
    font-style: italic;
    font-family: "Papyrus", "Monotype Corsiva", cursive;
}

p.smallsig {
    margin-top: 40px;
    margin-left: 25px;
    clear: left;
    font-size: 0.9em;
    line-height: 1.5em;
    letter-spacing: 1.4px;
    font-weight: lighter;
    font-style: italic;
    font-family: "Papyrus", "Monotype Corsiva", cursive;
}

p.smallsignc {
    margin-top: 40px;
    font-size: 1em;
    line-height: 1.4em;
    font-weight: normal;
    font-style: italic;
    font-family: "Papyrus", "Monotype Corsiva", cursive;
}

/************************* 3.6 Footer ***************************/

footer {
    align-items: center;
    display: flex;
    height: 3rem;
    justify-content: center;
    width: 1024px;
}

.thefineprint {
    font-weight: normal;
    font-style: normal;
    font-family: sans-serif;
    margin: 0px;
    font-size: 0.5em;
    line-height: 1em;
    padding: 0.5rem 0.5rem;
}

/*********************** 4 FORMS ******************************/

/************ 4.1 Froms, fieldsets & legends ***************/

form {
    max-width: 800px;
    margin-top: 5px;
    margin-bottom: 10px;
    padding: 5px 50px 20px;
}

main#form {
    overflow-x: hidden;
    margin-top: 145px;
    padding-top: 15px;
    padding-right: 15px;
    padding-left: 30px;
}

#user-sign-up-form {
    max-width: 900px;
    margin-top: 50px;
    margin-bottom: 30px;
    padding: 5px 5px 20px;
}

legend,
.legend a {
    display: block;
    height: 45px;
    margin-left: 50px;
    padding-top: 5px;
    padding-left: 35px;
    padding-right: 35px;
    border: 2px solid #fcc603;
    border-radius: 12px;
    font-size: 1.2em;
    font-variant: small-caps;
    text-decoration: none;
}

fieldset {
    display: block;
    margin: 10px;
    padding: 5px;
    border: 7px ridge #fcc603;
    border-radius: 22px;
}

.session-var {
    font-size: 1.1em;
    font-weight: normal;
    font-variant: none;
}

/*************** 4.2 Form divs **************************/

.suform {
    display: block;
    padding: 12px 12px 12px 0px;
    clear: both;
    margin-top: 0px;
    margin-left: 0px;
    font-variant: small-caps;
}

#hideonsubmit ul {
    display: flex;
    flex-direction: row;
    margin: 0px;
    padding-inline-start: 10px;
    justify-content: space-around;
    list-style-type: none;
}

#hideonsubmit ul li:hover {
    border-radius: 12px 12px 12px 12px;
    border: 2px solid #33b202;
    font-weight: bold;
}

#hideonsubmit ul li {
    width: 200px;
    height: 35px;
    display: inline;
    float: left;
    padding-top: 3px;
    border: 2px solid #fdc90f;
    border-radius: 12px;
    font-variant: small-caps;
    font-weight: bold;
    text-decoration: none;
    text-align: center;
    font-size: 1em;
    font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
}

#hideonsubmit a {
    text-decoration: none;
}

.formline {
    clear: both;
    font-weight: normal;
    font-variant: small-caps;
    margin-top: 8px;
    /*width: 100%;*/
    /*align-items: center;*/
    /*text-align: center;*/
}

/********* 4.3 Sign in, Sign-Up, Sign-Out Acct Mgt buttons ***************/

.sabtn,
.sibtn,
.sobtn,
.subtn {
    display: inline-block;
    clear: none;
    width: 95px;
    margin-top: 15px;
    border: 1px solid #fdc90f;
    border-radius: 9px;
    font-variant: small-caps;
    font-weight: bold;
    text-decoration: none;
    text-align: center;
    font-size: 0.8em;
    font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
}

.sibtn,
.sobtn {
    float: left;
}

.subtn,
.sabtn {
    float: right;
}

.sabtn a:hover,
.sibtn a:hover,
.sobtn a:hover,
.subtn a:hover {
    border-radius: 6px 6px 6px 6px;
    /*border: 2px solid #33B202;*/
    font-weight: bold;
    background-color: #fcc603;
    color: #052b00;
}

/*************** 4.4 Submit buttons **************************************/

.sbutton,
.sbutton:active {
    width: 275px;
    height: 50px;
    padding-left: 15px;
    border: 2px solid #fcc603;
    border-radius: 12px;
    font-size: 1.2em;
    font-variant: small-caps;
}

.subtn,
.subtn a,
.subtn a:visited,
.sibtn,
.sibtn a,
.sibtn a:visited,
.sobtn,
.sobtn a:visited,
.sabtn,
.sabtn a,
.sabtn a:visited,
.sbutton a,
.sbutton a:visited {
    text-decoration: none;
    font-variant: small-caps;
    /*color: inherit;*/
}

.sbutton:hover,
.sbutton:focus {
    position: relative;
    right: 0px;
    border: 2px solid #33b202;
    outline: 0px;
}

.ffield {
    position: relative;
    height: 45px;
    padding-left: 25px;
    margin-left: 20px;
    border: 2px solid #fcc603;
    border-radius: 12px;
    font-size: 1.3em;
}

.ffield:focus,
.ffield:hover {
    border: 2px solid #33b202;
    outline: 0px;
}

.toggleshow {
    display: none;
    margin-top: 40px;
    margin-bottom: 10px;
    margin-left: 150px;
    border: none;
}

#acctbtn {
    padding-bottom: 5px;
    text-align: center;
}

/*********************** 5 RADIO BUTTONS  *****************************/

/*************** Style the indicator (dot/circle) ***************************/
/* 5.0 A few properties that we don't want to inherit by default: **********/

input[type="radio"] {
    position: absolute;
    box-sizing: inherit;
    height: 1em;
    width: 1em;
    opacity: 0;
    cursor: pointer;
}

input[type="checkbox"] {
    float: right;
    height: 20px;
    width: 20px;
}

input[type="submit"] {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0em;
    width: 0em;
}

/***************** 5.1 Survey divs & radio buttons *********************************/

.survey {
    display: block;
    margin-left: 40px;
    padding: 12px;
    clear: both;
}

.rlabel {
    position: relative;
    display: block;
    cursor: pointer;
    padding-left: 40px;
    font-size: 1.1em;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.slabel {
    float: right;
    font-size: 0.8em;
    padding-right: 10px;
}

/***************** 5.2 Create a custom text box  ****************************/

.survey input ~ .checkmark {
    border: 2px solid #fcc603;
    border-radius: 10px;
}

/************ 5.3 On mouse-over, add a bronze background color *************/
.survey input:hover ~ .checkmark {
    border: 2px solid #33b202;
    border-radius: 10px;
}

/************* 5.4 When the radio button is checked, add a bronze background */
.survey input:checked ~ .checkmark {
    border: 2px solid #33b202;
    border-radius: 10px;
}

/**************5.5 Create a custom checkbox *******************************/
.checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 30px;
    width: 30px;
}

.checkmark:after {
    position: absolute;
    display: block;
}

.checkbox {
    position: absolute;
    top: 0;
    left: 0;
    height: 30px;
    width: 30px;
}

.container input:checked ~ .checkmark:after {
    display: block;
}

.container .checkmark:after {
    left: 9px;
    top: 5px;
    width: 5px;
    height: 10px;
    border: solid white;
}

#surveysubmit {
    margin-left: 200px;
    margin-top: 25px;
}

#formsubmit {
    margin-left: 250px;
    margin-top: 40px;
}

/*********************** 6 TERMS & FINE PRINT ************************/

#terms {
    margin-top: -120px;
    padding-bottom: 20px;
    font-family: sans-serif;
}

#terms h2 {
    display: block;
    font-size: 1.1em;
    line-height: 1.1em;
    padding: 0px 10px;
}

#terms h4 {
    position: relative;
    overflow: hidden;
    margin-left: 0px;
    padding-left: 20px;
    padding-bottom: 10px;
    font-size: 1em;
    line-height: 2em;
    font-weight: 500;
}

#terms p {
    max-width: 800px;
    clear: both;
    margin: 0px;
    padding: 5px 30px;
    font-size: 0.7em;
    line-height: 1.2em;
}

#terms ul,
#terms li {
    max-width: 655px;
    clear: both;
    margin: 0px;
    padding: 5px 0px;
    font-size: 0.8em;
    line-height: 1.2em;
}

#terms ul {
    margin-left: 50px;
    padding: 5px 65px;
    font-family: sans-serif;
}

/************************** 7 DATES  **************************/

.date {
    font-size: 0.8em;
    line-height: 1em;
    color: #fff;
    margin-left: 50px;
    padding-top: 0px;
    padding-right: 2px;
    padding-bottom: 20px;
    font-family: "Papyrus", "Monotype Corsiva", cursive;
    font-weight: normal;
    font-style: italic;
}

/********************* 8 RETURNED MESSAGES *********************/

.form-message,
.error-message,
.form-updates,
.form-status,
.form-umessage {
    float: left;
}

.ui-dialog,
.ui-dialog-content {
    width: 400px;
    height: 400px;
    float: left;
    padding: 10px;
    overflow: hidden;
    text-overflow: ellipsis;
    word-wrap: normal;
}

/************************** 9 IMAGES ***********************/

/********************* 9.1 Icons *********************/

.iconfloatleft {
    border-radius: 33% 0% 33% 0%;
    border-width: 6px;
    border-color: #fcc603;
    border-style: ridge;
}

.iconright {
    margin-right: 10px;
    border-radius: 0% 33% 0% 33%;
    border-width: 6px;
    border-color: #fcc603;
    border-top-style: groove;
    border-right-style: ridge;
    border-bottom-style: groove;
    border-left-style: ridge;
}

/******************** 9.2 Content images *********************/

.floatleft {
    float: left;
    clear: right;
    margin-right: 25px;
    margin-bottom: 75px;
    border-width: 8px;
    border-style: solid;
    border-color: #091405;
    border-radius: 20px;
}

.floatright {
    float: right;
    clear: right;
    margin: 20px 25px 30px 25px;
    border-width: 8px;
    border-style: solid;
    border-color: #091405;
    border-radius: 20px;
}

.floatright-monkey {
    float: right;
    margin-right: 50px;
    clear: left;
    border-width: 8px;
    border-style: solid;
    border-color: #091405;
    border-radius: 20px;
}

.floatright-flame {
    background-color: #091405;
    float: right;
    margin-right: 10px;
    margin-top: 5px;
    border-radius: 15%;
    border-width: 6px;
    border-style: solid;
    border-color: #091405;
}

.floatleft-candle {
    background-color: #001c00;
    float: left;
    margin-left: 150px;
    border-radius: 28% 28% 45% 45%;

    border-width: 6px;
    border-style: solid;
    border-color: #001c00;
}

.floatleft-about {
    border-width: 8px;
    border-style: solid;
    border-color: #091405;
    border-radius: 20px;
}

.floatright-contact {
    float: right;
    border-width: 8px;
    border-style: solid;
    border-color: #091405;
    border-radius: 20px;
}

/******************** 10 MOBILE MEDIA SETTINGS ******************/

@media (max-width: 1023px) {
    .wrapper {
        width: 667px;
        font-size: 0.8em;
        line-height: 1em;
    }

    main {
        width: 667px;
        padding-left: 0px;
        margin-top: 0px;
        padding-right: 5px;
    }

    header {
        width: 667px;
        height: 148px;
        position: relative;
    }

    header ul {
        display: flex;
        width: 667px;
        flex-direction: row;
        padding-inline-start: 10px;
        margin: 0px;
        justify-content: space-between;
        list-style-type: none;
    }
    h1 {
        min-width: 400px;
        width: 100%;
        font-size: 1.5em;
    }

    nav {
        width: 667px;

        position: relative;
    }

    nav ul {
        display: flow;
        padding-inline-start: 0px;
        width: 660;
    }

    nav ul li {
        display: inline;
        float: left;
        width: 130px;
        padding: 2px;
        font-size: 0.8em;
    }

    article {
        margin-top: 0px;
        padding-left: 4px;
    }

    p {
        margin: 15px;
        width: 667px;
    }

    p.smallsig {
        margin: 15px;
        width: 485px;
    }

    #user-sign-up-form {
        padding: 5px 5px 20px;
    }

    article {
        max-width: 600px;
    }

    #user_update,
    form {
        max-width: 500px;
        padding: 0px;
        margin-top: 0px;
        margin-left: 0px;
    }

    fieldset {
        padding-top: 0px;
        margin-left: 5px;
    }

    .iconfloatleft {
        width: 80px;
        height: 80px;
        margin: 5px 15px 0px 0px;
    }

    .iconright {
        width: 80px;
        height: 80px;
        margin: 10px 10px 0px 15px;
    }

    footer {
        padding-left: 50px;
    }

    .floatright {
        max-width: 40%;
        height: auto;
        margin: 20px 15px 20px 15px;
    }

    .floatright-flame {
        max-width: 35%;
        height: auto;
        margin: 20px 15px 20px 15px;
    }

    .floatleft {
        max-width: 35%;
        height: auto;
        margin-right: 15px;
        margin-left: 15px;
        margin-bottom: 20px;
    }

    .secright {
        margin: 15px;
        padding-top: 15px;
    }

    .floatright-monkey {
        clear: both;
        max-width: 25%;
        height: auto;
        margin-right: 15px;
    }

    .floatleft-candle {
        width: 83px;
        height: 113px;
        margin-left: 250px;
    }

    .ffield {
        width: 450px;
    }

    #fnavdiv {
        margin-left: 0px;
        padding-top: 5px;
    }

    .card {
        display: flow;
    }
    .secleft {
        padding-top: 15px;
    }

    #hideonsubmit ul li {
        width: 140px;
        height: 45px;
    }
}

/******************** 11 DROP DOWNS ******************

#define {
	display: inline-block;
	}

#definition {
	display: none;
	position: absolute;
	min-width: 160px;
	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
	padding: 12px 16px;
	z-index: 1;
	}

#define:hover #definition {
	display: block;
	}
*/