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: inherit; font-size: 100%; vertical-align: baseline; }

html { line-height: 1; }

ol, ul { list-style: none; }

table { border-collapse: collapse; border-spacing: 0; }

caption, th, td { text-align: left; font-weight: normal; vertical-align: middle; }

q, blockquote { quotes: none; }
q:before, q:after, blockquote:before, blockquote:after { content: ""; content: none; }

a img { border: none; }

article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary { display: block; }

body { background-color: #5E539E; }

body, a, button, textarea, input { font-family: "Helvetica Neue", Helvetica, Arial, Verdana, sans-serif; font-size: 14px; color: #FFFFFF; line-height: 1.4; text-decoration: none; }

.page { display: none; position: absolute; top: 0; left: 0; text-align: center; }

.page-content { display: inline-block; }

.text { max-width: 700px; margin: 0 auto; }

img { display: block; margin: 0 auto 85px; }

#start-bottom { margin-top: 60px; }

.button { display: inline-block; background-color: #FFFFFF; color: #000000; margin: 50px auto; border: none; padding: 5px 50px; cursor: pointer; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70); opacity: 0.7; }
.button:hover { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=90); opacity: 0.9; }

input, textarea { border: 0; padding: 5px 8px; font-size: 13px; color: #FFFFFF; background-color: #b4b4b4; background-color: rgba(249, 249, 249, 0.3); margin: 0 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; }

input[type=text] { width: 180px; }
input.number { width: 22px; }
input[type=checkbox] { display: block; float: left; }
input[type=submit] { color: #FFF; background-color: #000; font-weight: bold; letter-spacing: 2px; margin: 0; padding: 5px 50px; cursor: pointer; }
input[type=submit]:hover { background-color: #0d0d0d; }

textarea { display: none; overflow: hidden; height: 54px; }

.page > input, .page > textarea { width: 484px; }

.finish-question { text-transform: uppercase; text-align: left; font-family: Georgia, "Times New Roman", Times, serif; margin-bottom: 20px; }
.finish-question.first { color: #000; margin-bottom: 50px; }
.finish-question label { display: inline-block; width: 290px; vertical-align: top; margin-top: 5px; }
.finish-question input, .finish-question textarea { width: 320px; background-color: rgba(249, 249, 249, 0.1); }
.finish-question textarea { height: 36px; }

#answers { margin: 60px auto; width: 640px; text-align: left; }

#condition { text-align: left; color: #000; font-size: 12px; border-top: 1px solid #CCC; border-bottom: 1px solid #CCC; padding: 25px 15px; margin: 35px 0; }
#condition p { margin-bottom: 25px; }

#agreement { float: left; margin-left: 15px; width: 540px; }

#personal { clear: left; margin-left: 35px; }

#starthere { color: #F39515; font-weight: bold; position: absolute; bottom: 15px; right: 45px; text-align: right; width: 120px; }
#starthere img { float: right; margin: 3px 0 0 10px; }

.ecke_rechts, .ecke_links { position: fixed; bottom: 0; z-index: 1999; width: 25px; height: 25px; background-color: #870337; }

.ecke_rechts, .enter_rechts { right: 0; }

.ecke_links, .enter_links { left: 0; }

.enter_links, .enter_rechts { position: fixed; bottom: 0; z-index: 999; width: 175px; height: 175px; }

.dreieck_ro, .dreieck_lo { width: 0; height: 0; border-top: 25px solid #550223; }
.dreieck_ro:hover, .dreieck_lo:hover { cursor: pointer; }

.dreieck_ro { border-left: 25px solid transparent; }

.dreieck_lo { border-right: 25px solid transparent; }

#start .ecke_rechts { background-color: #F39515; }
#start .ecke_rechts .dreieck_lo { border-top-color: #cb790a; }

#is .ecke_rechts { background-color: #870337; }
#is .ecke_rechts .dreieck_lo { border-top-color: #550223; }
#is .ecke_links { background-color: #5E539E; }
#is .ecke_links .dreieck_ro { border-top-color: #4a417d; }
#is textarea:-moz-placeholder { color: #9a5c08; }
#is textarea::-moz-placeholder { color: #9a5c08; }
#is textarea::-webkit-input-placeholder { color: #9a5c08; }
#is textarea:-ms-input-placeholder { color: #9a5c08; }
#is textarea.placeholder { color: #9a5c08; }

#feel .ecke_rechts { background-color: #023E7B; }
#feel .ecke_rechts .dreieck_lo { border-top-color: #012549; }
#feel .ecke_links { background-color: #F39515; }
#feel .ecke_links .dreieck_ro { border-top-color: #cb790a; }
#feel textarea:-moz-placeholder { color: #23010e; }
#feel textarea::-moz-placeholder { color: #23010e; }
#feel textarea::-webkit-input-placeholder { color: #23010e; }
#feel textarea:-ms-input-placeholder { color: #23010e; }
#feel textarea.placeholder { color: #23010e; }

#look .ecke_rechts { background-color: #F2E161; }
#look .ecke_rechts .dreieck_lo { border-top-color: #eed832; }
#look .ecke_links { background-color: #870337; }
#look .ecke_links .dreieck_ro { border-top-color: #550223; }
#look textarea:-moz-placeholder { color: #000b17; }
#look textarea::-moz-placeholder { color: #000b17; }
#look textarea::-webkit-input-placeholder { color: #000b17; }
#look textarea:-ms-input-placeholder { color: #000b17; }
#look textarea.placeholder { color: #000b17; }

#smell .ecke_rechts { background-color: #0077B0; }
#smell .ecke_rechts .dreieck_lo { border-top-color: #00557d; }
#smell .ecke_links { background-color: #023E7B; }
#smell .ecke_links .dreieck_ro { border-top-color: #012549; }
#smell textarea { background-color: #eed832; }
#smell textarea:-moz-placeholder { color: #4e4506; }
#smell textarea::-moz-placeholder { color: #4e4506; }
#smell textarea::-webkit-input-placeholder { color: #4e4506; }
#smell textarea:-ms-input-placeholder { color: #4e4506; }
#smell textarea.placeholder { color: #4e4506; }

#taste .ecke_rechts { background-color: #F4A4A0; }
#taste .ecke_rechts .dreieck_lo { border-top-color: #ef7872; }
#taste .ecke_links { background-color: #F2E161; }
#taste .ecke_links .dreieck_ro { border-top-color: #eed832; }
#taste textarea:-moz-placeholder { color: #00324a; }
#taste textarea::-moz-placeholder { color: #00324a; }
#taste textarea::-webkit-input-placeholder { color: #00324a; }
#taste textarea:-ms-input-placeholder { color: #00324a; }
#taste textarea.placeholder { color: #00324a; }

#sound .ecke_rechts { background-color: #5E539E; }
#sound .ecke_rechts .dreieck_lo { border-top-color: #4a417d; }
#sound .ecke_links { background-color: #0077B0; }
#sound .ecke_links .dreieck_ro { border-top-color: #00557d; }
#sound textarea:-moz-placeholder { color: #e94c45; }
#sound textarea::-moz-placeholder { color: #e94c45; }
#sound textarea::-webkit-input-placeholder { color: #e94c45; }
#sound textarea:-ms-input-placeholder { color: #e94c45; }
#sound textarea.placeholder { color: #e94c45; }

#finish .ecke_rechts { background-color: #5E539E; }
#finish .ecke_rechts .dreieck_lo { border-top-color: #4a417d; }
#finish .ecke_links { background-color: #F4A4A0; }
#finish .ecke_links .dreieck_ro { border-top-color: #ef7872; }
#finish textarea { display: inline; }
#finish textarea:-moz-placeholder { color: #4a417d; }
#finish textarea::-moz-placeholder { color: #4a417d; }
#finish textarea::-webkit-input-placeholder { color: #4a417d; }
#finish textarea:-ms-input-placeholder { color: #4a417d; }
#finish textarea.placeholder { color: #4a417d; }

/* -------------------------------------------------------- HELPER CLASSES -------------------------------------------------------- */
.active { display: block; }

.black { color: #000000; }