/* reset */
* {
    margin: 0;
    padding: 0;
}

/* render html5 elements as block */
header, footer, section, nav, article {
    display: block;
}

.responsive-size-wrapper,
.responsive-size { margin: auto; }
.responsive-leaderboard-wrapper,
.responsive-leaderboard-size { margin: 0 auto; }
.google-auto-placed { margin-top: 25px; margin-bottom: 15px; }

@media screen and (max-width: 360px) {
    #wrapper { width: 350px; }
    nav { width: 350px; }
    #main { width: 350px; background: #FFF; }
    #content { width: 336px; margin-left: 7px; margin-right: 7px; }
    article output { font-size: 20px; }
    footer { width: 350px; }
    nav .menu { font-size: 14px; }
    nav .menu ul { padding: 17px 0 0 7px; }
    nav .menu a { padding: 0px 10px; }
    header { height: 140px; }
    header > h2 { font-size: 30px; }
    header > h3 { font-size: 12px; margin-right: 10px; }
    li { padding: 0px 5px 20px 0px; }
    .footer-segment { width: 130px; }
    input[type=submit] { float: left; }
    .responsive-leaderboard-wrapper,
    .responsive-leaderboard-size { width: 320px; height: 50px; }
}

@media screen and (min-width: 375px) and (max-width: 376px) {
    #wrapper { width: 365px; }
    nav { width: 365px; }
    #main { width: 365px; background: #FFF; }
    #content { width: 351px; margin-left: 7px; margin-right: 7px; }
    article output { font-size: 20px; }
    footer { width: 365px; }
    nav .menu { font-size: 14px; }
    nav .menu ul { padding: 17px 0 0 7px; }
    nav .menu a { padding: 0px 10px; }
    header { height: 130px; }
    header > h2 { font-size: 30px; }
    header > h3 { font-size: 10px; margin-right: 10px; }
    li { padding: 0 0 20px 0; }
    .footer-segment { width: 130px; }
    .responsive-leaderboard-wrapper,
    .responsive-leaderboard-size { width: 320px; height: 50px; }
    input[type=submit] { float: left; margin-bottom: 30px; }
}

@media screen and (min-width: 376px) and (max-width: 480px) {
    #wrapper { width: 460px; }
    nav { width: 460px; }
    #main { width: 460px; background: #FFF; }
    #content { width: 445px; margin-left: 10px; }
    article output { font-size: 26px; }
    footer { width: 460px; }
    nav .menu { font-size: 14px; }
    nav .menu ul { padding: 17px 0 0 10px; }
    nav .menu a { padding: 0px 15px; }
    header { height: 130px; }
    header > h2 { font-size: 30px; }
    header > h3 { font-size: 12px; margin-right: 10px; }
    li { padding: 0px 5px 20px 0px; }
    .footer-segment { width: 170px; }
    input[type=submit] { float: left; }
    .responsive-leaderboard-wrapper,
    .responsive-leaderboard-size { width: 320px; height: 50px; }
}

@media screen and (max-width: 600px) {
    .col-25, .col-75 { width: 75%; margin-top: 0; }
    input[type=text] { width: 75%; }
    input[type=submit] { width: 75%; float: left; }
}

@media screen and (min-width: 481px) and (max-width: 1279px) {
    #wrapper { width: 640px; }
    nav { width: 640px; }
    #main { width: 640px; background: #FFF;}
    #content { width: 620px; margin-left: 10px; }
    article output { font-size: 26px; }
    footer { width: 640px; }
    nav .menu { font-size: 16px; font-weight: bold; }
    nav .menu ul { padding: 17px 0 0 20px; }
    nav .menu a { padding: 0px 20px; }
    header { height: 120px; }
    header > h2 { font-size: 40px; }
    header > h3 { font-size: 14px; margin: 14px 10px 18px 0; }
    li { padding: 0px 5px 20px 0px; }
    .footer-segment { width: 170px; }
    .responsive-leaderboard-wrapper,
    .responsive-leaderboard-size { width: 468px; height: 60px; }
}

@media screen and (min-width: 1280px) {
    #wrapper { width: 940px; }
    nav { width: 940px; }
    #main { width: 940px; }
    #content { width: 860px; margin-left: 40px; }
    article output { font-size: 26px; }
    footer { width: 940px; }
    nav .menu { font-size: 16px; font-weight: bold; }
    nav .menu ul { padding: 17px 0 0 20px; }
    nav .menu a { padding: 0px 20px; }
    header { height: 140px; }
    header > h2 { font-size: 40px; }
    header > h3 { font-size: 14px; margin: 14px 10px 18px 0; }
    li { padding-left: 5px; }
    .footer-segment { width: 190px; }
    .responsive-leaderboard-wrapper,
    .responsive-leaderboard-size { width: 940px; height: 90px; }
    .responsive-size-wrapper,
    .responsive-size { width: 336px; height: 280px; float:right; margin-left:25px; margin-bottom:25px; }
    input[type=text] { width: 30%; }
}

#wrapper { margin: 0 auto; margin-top: 20px; margin-bottom: 20px; border: 3px solid #888; background: #fff; }
body { line-height: 1; background: #AAA; font-family: Arial, Helvetica, sans-serif; color: #555; font-size: 16px; }
nav { margin: 0 auto; background: #222; height: 50px; }
#main { margin: 0 auto; padding-top: 30px; overflow: hidden; }
#content { float: left; position: relative; }
footer { margin: 0 auto; clear: both; }
h1, h2, h3, h4 { font-weight: bold; clear: both; color: #555; }
a:link, a:visited { color: #000; }
a:hover, a:active { color: #C3A26B; }
p { margin-bottom: 18px; }
nav .menu ul { margin: 0; padding: 17px 0 0 20px; list-style: none; line-height: normal; }
nav .menu li { display: block; float: left; }
nav .menu a { display: block; float: left; padding: 0px 15px 10px 10px; text-decoration: none; color: #FFF; }
nav .menu a:hover { text-decoration: underline; color: #C3A26B; }
header { display: inline-block; padding: 20px 0 10px 0; text-align: center; margin: auto; width: 100%; overflow: hidden; }
header > h2 { float: left; text-align: left; margin: 0 0 18px 10px; line-height: 36px; }
header > h2 a { color: #555; font-weight: bold; text-decoration: none; text-shadow: 0px 2px 3px #ddd; }
header > h3 { color: #555; clear: right; float: right; font-style: italic; }
article h1 { font-size: 24px; display: inline; }
article img { border: none; }
article ul { list-style: square; color: #000; margin: -15px 0 15px 25px; }
article label { display: inline-block; font-weight: bold; font-size: 14px; width: 200px; }
article output { display: inline-block; font-weight: bold; }
article li { color: #555; }
.rTable { display: table; }
.rTableRow { display: table-row; }
.rTableCellLeft { display: table-cell; width: 180px; vertical-align: top; padding: 1px 0px 1px 0px; font-weight: bold; font-size: 15px; }
.rTableCellRight { display: table-cell; }
#content p, ul, ol, hr { margin-bottom: 24px; }
#content ul ul, ol ol, ul ol, ol ul { margin-bottom: 0; }
#content h1, h2, h3, h4 { color: #000; margin: 0 0 20px 0; line-height: 1.5em; }
.alignleft, img.alignleft { display: inline; float: left; margin-right: 10px; }
.alignright, img.alignright { display: inline; float: right; margin-left: 10px; }
.aligncenter, img.aligncenter { clear: both; display: block; margin-left: auto; margin-right: auto; margin-bottom: 5px; margin-top: 5px; width: 80%; }
img { margin-bottom: 2px; height: auto; width: 100%; }
aside h3 { font-size: 18px; text-shadow: 0px 2px 3px #ddd; }
aside ul { list-style: square; color: #bbb; margin: -15px 0 15px 25px; }
#footer-area { background: #555; color: #FFF; font-size: 14px; padding: 18px 0; overflow: hidden; }
.footer-segment { float: left; margin-right: 20px; margin-left: 20px; margin-top: 15px; }
footer aside h4 { color: #fff; font-size: 16px; line-height: 1.5em; }
footer ul { list-style: none; margin: -15px 0; }
footer a:link, footer a:visited { color: #fff; }
footer a:hover { text-decoration: underline; color: #C3A26B; }
footer p { margin-top: -15px; color: #fff; }
#map { height: 200px; width: 100%; }
.leaderboard { margin: auto; }
.col-25 { float: left; width: 25%; margin-top: 6px; }
.col-75 { float: left; width: 75%; margin-top: 6px; }
input[type=text] { padding: 12px; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; resize: vertical; }
textarea { width: 100%; padding: 12px; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; resize: vertical; }
input[type=submit] { background-color: #222; color: white; padding: 12px 20px; border: none; border-radius: 4px; cursor: pointer; margin-top: 10px; }
.google_map { background-position: 50% 50%; text-align: center; margin: auto; }