@import url(http://fonts.googleapis.com/css?family=Open+Sans:300,400,700,700italic,600,400italic,300italic,600italic); @import url(http://fonts.googleapis.com/css?family=Droid+Serif:400,700); *, *:before, *:after { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } html { overflow-y: scroll; min-height: 100%; } body { font-size: 100%; line-height: 1.5; } body, blockquote, h1, h2, h3, h4, h5, h6, p, pre, form, fieldset, img, legend, table, th, td, caption, hr { border: 0; margin: 0; outline: 0; padding: 0; } hr { border-top: 1px solid #ddd; display: block; height: 1px; margin: 24px 0; } article, aside, details, figure, figcaption, footer, header, main, nav, section, summary { display: block; } [hidden] { display: none; } img { color: red; font-style: italic; } audio, img, object, embed, video { max-width: 100%; } audio, canvas, video { display: inline-block; } audio:not([controls]) { display: none; height: 0; } svg:not(:root) { overflow: hidden; } small { display: block; } p small, li small { display: inline; margin: 0; } b, strong { font-weight: bold; } i, em, dfn { font-style: italic; } blockquote { font-size: 1.125em; font-style: italic; } blockquote:before, blockquote:after { font-size: 1.25em; font-weight: 400; line-height: 1; position: relative; top: 2px; } blockquote:before { content: '"'; left: -1px; } blockquote:after { content: '"'; right: -1px; } q { quotes: "\201C" "\201D" "\2018" "\2019"; } abbr[title], dfn[title] { border-bottom: 1px dotted #cccccc; cursor: help; } mark { background: yellow; color: #131313; } sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sub { bottom: -.25em; } sup { top: -.5em; } code, kbd, pre, samp { background: #16414c; border-left: 6px solid #acd473; color: #a9b9b9; display: block; font-family: monospace, serif; font-size: 1em; padding: 12px 8px 12px 20px; } pre { overflow: auto; white-space: pre-wrap; } pre mark { background: #eee; border-bottom: 1px solid #ddd; color: #333; } p code, p kbd, p pre, p samp, li code, li kbd, li pre, li samp, pre code, pre kbd, pre pre, pre samp { display: inline-block; margin: 0; padding: 4px; } .code-Value { color: #24b9af; } .code-Tag { color: #8ab04c; } ol, ul { margin: 0 0 8px; padding: 0 0 0 24px; } ol > li:last-child, ul > li:last-child { margin-bottom: 0; } ol li ol, ol li ul, ul li ol, ul li ul { margin-top: 8px; } ol li li, ul li li { font-size: 1em; } dd { margin: 0 0 8px; padding-left: 16px; } button, input, select, textarea { border: 0; font-family: inherit; font-size: 100%; line-height: normal; margin: 0; text-transform: none; } button, html input[type='button'], input[type='reset'], input[type='submit'] { cursor: pointer; -webkit-appearance: button; } input[type='search'] { -webkit-appearance: textfield; } input[disabled] { background: #eeeeee; cursor: not-allowed; } input[readonly] { background: #fafafa; } input[type='search']::-webkit-search-decoration { -webkit-appearance: none; } buton::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; } textarea { overflow: auto; vertical-align: top; } table { border-collapse: collapse; border-spacing: 0; } .table-Base, .table-Border, .table-Stripe { background: #fafafa; font-size: 1em; width: 100%; } .table-Base th, .table-Border th, .table-Stripe th, .table-Base td, .table-Border td, .table-Stripe td { padding: 4px; text-align: left; } .table-Header { background: #eee; } .table-Footer { background: #e3e3e3; } .table-Border { border-bottom: 1px solid #cccccc; border-right: 1px solid #cccccc; } .table-Border tr { border-top: 1px solid #cccccc; } .table-Border th, .table-Border td { border-left: 1px solid #cccccc; } .table-Stripe tr:nth-child(2n) { background: #eeeeee; } .row, .c-Row { margin-left: -20px; margin-bottom: 20px; } .col { float: left; margin-bottom: 0 !important; padding-left: 20px; position: relative; width: 100%; } .c-Row { font-size: 0; text-align: center; } .c-Row .col { display: inline-block; float: none; font-size: 16px; text-align: left; } .col-90 { width: 90%; } .col-80 { width: 80%; } .col-75 { width: 75%; } .col-66 { width: 66.6666%; } .col-60 { width: 60%; } .col-50 { width: 50%; } .col-40 { width: 40%; } .col-33 { width: 33.3333%; } .col-25, .website-Gallery li { width: 25%; } .col-20 { width: 20%; } .col-10 { width: 10%; } .rfl { padding-left: 300px; } .rfl .f-Col { float: left; margin-left: -280px; width: 280px; } .rfr { padding-right: 300px; } .rfr .f-Col { float: right; margin-right: -300px; width: 280px; } .block { background: #ccc; color: #333; padding: 4px; } .block > :last-child { margin-bottom: 0; } nav ul, nav ol { list-style: none; margin: 0; padding: 0; } nav li { margin: 0; } nav a { display: inline-block; padding: 4px 8px; text-decoration: underline; } nav a:hover { text-decoration: none; } .grouping { padding: 4px 0; } .fs-Legend { border: 1px solid #cccccc; margin-bottom: 8px; padding: 8px 12px; } legend, .legend { font-size: 1.25em; margin-left: -4px; padding: 0 4px; } /* Text Input Areas & Labels */ .text-Label, .option-Container { font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; cursor: pointer; display: block; margin-bottom: 4px; } .dis-Label { cursor: not-allowed; } .input-Area, .text-Area, .select-Container, .input-Number { background: #fff; border: 1px solid #cccccc; font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; line-height: 1.25; margin-bottom: 8px; padding: 8px 4px; width: 50%; } .input-Area:focus, .text-Area:focus, .select-Container:focus, .input-Number:focus { background: #f8f8f8; border: 1px solid #50B6D5; -moz-box-shadow: 0 0 6px rgba(0, 0, 0, 0.25) inset; -webkit-box-shadow: 0 0 6px rgba(0, 0, 0, 0.25) inset; box-shadow: 0 0 6px rgba(0, 0, 0, 0.25) inset; } .text-Area { display: block; min-height: 150px; resize: vertical; width: 100%; } /* Check/Radio Inputs & Labels */ .option-Container { position: relative; } .option-Container:hover .btn-Radio, .option-Container:hover .btn-Check { border-color: #333; } .option-Label { cursor: pointer; display: block; padding-left: 28px; position: relative; z-index: 2; } .input-Hide { border: 0 !important; height: 1px !important; left: -999999px !important; overflow: hidden !important; position: absolute !important; width: 1px !important; } .btn-Radio, .btn-Check { background: #eeeeee; border: 1px solid #ccc; font-size: 14px; font-weight: bold; height: 19px; left: 0; padding: 2px; position: absolute; top: 0; width: 19px; } .btn-Radio:hover, .input-Radio.selected-Radio .btn-Radio, .btn-Check:hover, .input-Check.selected-Check .btn-Check { background: #e93250; } .btn-Radio { -moz-border-radius: 15px; -webkit-border-radius: 15px; border-radius: 15px; background-clip: padding-box; } .input-Radio.selected-Radio .btn-Radio { border-color: #333; } .input-Check.selected-Check .btn-Check { border-color: #333; } .ifChecked { visibility: hidden; } .selected-Check .ifChecked { visibility: visible; } /* Drop Down Selection Inputs */ .select-Container { background: url(../img/drop-Arrow.png) no-repeat 99% center white; display: inline-block; overflow: hidden; } .input-Select { background: none; border: 0; font-size: 1em; padding-right: 16px; width: 120%; -webkit-appearance: textarea; } .file-Input-Area { position: relative; } .file-Input-Area label { cursor: default; } .input-File { cursor: pointer; left: 0; height: 100%; opacity: 0; position: absolute; top: 0; width: 100%; z-index: 9; } .input-File-Text { cursor: pointer; display: inline-block; } /* Inputs not supported in all browsers */ .input-Color { border: 1px solid #cccccc; font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; margin-bottom: 8px; padding: 0 4px; height: 45px; width: 50%; } .input-Color:focus { background: #f8f8f8; border: 1px solid #50B6D5; -moz-box-shadow: 0 0 6px rgba(0, 0, 0, 0.25) inset; -webkit-box-shadow: 0 0 6px rgba(0, 0, 0, 0.25) inset; box-shadow: 0 0 6px rgba(0, 0, 0, 0.25) inset; } .input-Number { font-size: 1em; } .btn, .btn-Radio, .btn-Check, .btn-Small, .btn-Large, .btn-XLarge, .btn-Wide, .btn-Action, .btn-Action-2, .btn-Action-3, .btn-Neg, .btn-Neg:hover, .btn-Disable, .btn-Square, .btn-Round { background: #343434; -moz-border-radius: 18px; -webkit-border-radius: 18px; border-radius: 18px; background-clip: padding-box; -moz-box-shadow: 0 0 6px rgba(0, 0, 0, 0.25); -webkit-box-shadow: 0 0 6px rgba(0, 0, 0, 0.25); box-shadow: 0 0 6px rgba(0, 0, 0, 0.25); color: #f8f8f8; cursor: pointer; display: inline-block; font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; font-size: 1em; line-height: 1; padding: 8px 20px; text-align: center; text-decoration: none !important; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.4); -moz-transition: all 0.25s ease-in-out 0s; -ms-transition: all 0.25s ease-in-out 0s; -o-transition: all 0.25s ease-in-out 0s; -webkit-transition: all 0.25s ease-in-out 0s; transition: all 0.25s ease-in-out 0s; vertical-align: middle; -webkit-appearance: none; } .btn.btn-Pad, .btn-Pad.btn-Radio, .btn-Pad.btn-Check, .btn-Pad.btn-Small, .btn-Pad.btn-Large, .btn-Pad.btn-XLarge, .btn-Pad.btn-Wide, .btn-Pad.btn-Action, .btn-Pad.btn-Action-2, .btn-Pad.btn-Action-3, .btn-Pad.btn-Neg, .btn-Pad.btn-Disable, .btn-Pad.btn-Square, .btn-Pad.btn-Round { padding: 8px 16px; } .btn:hover, .btn:active, .btn-Radio:hover, .input-Radio.selected-Radio .btn-Radio, .btn-Check:hover, .input-Check.selected-Check .btn-Check, .btn-Small:hover, .btn-Large:hover, .btn-XLarge:hover, .btn-Wide:hover, .btn-Action:hover, .btn-Action-2:hover, .btn-Action-3:hover, .btn-Neg:hover, .btn-Disable:hover, .btn-Square:hover, .btn-Round:hover, .btn-Radio:active, .btn-Check:active, .btn-Small:active, .btn-Large:active, .btn-XLarge:active, .btn-Wide:active, .btn-Action:active, .btn-Action-2:active, .btn-Action-3:active, .btn-Neg:active, .btn-Disable:active, .btn-Square:active, .btn-Round:active { background: #131313; color: #f8f8f8; } .btn:visited, .btn-Radio:visited, .btn-Check:visited, .btn-Small:visited, .btn-Large:visited, .btn-XLarge:visited, .btn-Wide:visited, .btn-Action:visited, .btn-Action-2:visited, .btn-Action-3:visited, .btn-Neg:visited, .btn-Disable:visited, .btn-Square:visited, .btn-Round:visited { color: #f8f8f8; } .btn-Small { font-size: 0.875em; padding: 4px 8px; } .btn-Small.btn-Pad { padding: 4px 12px; } .btn-Large { font-size: 2em; padding: 12px; } .btn-Large.btn-Pad { padding: 12px 20px; } .btn-XLarge { font-size: 2.5em; padding: 12px 16px; } .btn-XLarge.btn-Pad { padding: 16px 24px; } .btn-Wide { display: block; } .btn-Action { background: -webkit-linear-gradient(top, #e93250, #b11f36); background: -moz-linear-gradient(top, #e93250, #b11f36); background: -o-linear-gradient(top, #e93250, #b11f36); background: linear-gradient(top, #e93250, #b11f36); } .btn-Action:hover { background: -webkit-linear-gradient(top, #d51c3a, #841526); background: -moz-linear-gradient(top, #d51c3a, #841526); background: -o-linear-gradient(top, #d51c3a, #841526); background: linear-gradient(top, #d51c3a, #841526); } .btn-Action-2 { background: #daeea5; } .btn-Action-2:hover { background: #c0e265; } .btn-Action-3 { background: #f6f0e6; } .btn-Action-3:hover { background: #e2ceae; } .btn-Neg, .btn-Neg:hover { background: #aaaaaa; color: #f8f8f8; } .btn-Disable, .btn-Disable:hover, .btn-Disable:visited { background: #fafafa; border: 1px solid #eee; color: #343434; cursor: default; } .btn-Square { -moz-border-radius: 0; -webkit-border-radius: 0; border-radius: 0; background-clip: padding-box; } .btn-Round { -moz-border-radius: 12px; -webkit-border-radius: 12px; border-radius: 12px; background-clip: padding-box; } .nav ul, .nav ol { border: 1px solid #ccc; padding: 4px; } .nav li { margin: 0; } .nav a { display: block; padding: 4px 8px; text-decoration: underline; } .nav a:hover { text-decoration: none; } .h-Nav > li, .bread > li { float: left; } .c-Nav { font-size: 0; text-align: center; } .c-Nav > li, .ah-Nav a { display: inline-block; font-size: 16px; } .v-Nav { /* really only needs styling applied to it, as vertical nav is default */ } .ah-Nav { font-size: 0; } .av-Nav .drop-Start { display: block; } .drop-Start { position: relative; } .drop-Start:hover { background: #eee; } .drop-Start:hover .drop-Menu { visibility: visible; } .drop-Start a { white-space: nowrap; } .drop-Menu { background: #eee; border: 1px solid #ddd; position: absolute; visibility: hidden; z-index: 5; } .v-Nav .drop-Menu, .av-Nav .drop-Menu { left: 100%; top: 0; } .h-Nav .drop-Menu, .bread .drop-Menu, .ah-Nav .drop-Menu { left: 0; top: 100%; } .bread li:last-child:after { content: none; } .bread li:after { content: ">"; display: inline-block; } .bread a { display: inline-block; } .bread span { display: inline-block; padding: 4px 8px; } .float-Left { float: left; } .float-Right { float: right; } .float-None { float: none; } .clear { clear: both; } .clearfix, .row, .c-Row, nav ul, nav ol, .media, .media-Reverse, .media-No-Wrap-Reverse, .media-No-Wrap { *zoom: 1; } .clearfix:before, .row:before, .c-Row:before, nav ul:before, nav ol:before, .media:before, .media-Reverse:before, .media-No-Wrap-Reverse:before, .media-No-Wrap:before, .clearfix:after, .row:after, .c-Row:after, nav ul:after, nav ol:after, .media:after, .media-Reverse:after, .media-No-Wrap-Reverse:after, .media-No-Wrap:after { content: ""; display: table; } .clearfix:after, .row:after, .c-Row:after, nav ul:after, nav ol:after, .media:after, .media-Reverse:after, .media-No-Wrap-Reverse:after, .media-No-Wrap:after { clear: both; } .overflow { overflow: hidden; } blockquote, h1, h2, h3, h4, h5, h6, li, p, small, code, kbd, pre, samp, dt, form, table { margin-bottom: 12px; } .d-Block, .show { display: block; } .d-None, .mobile-Show { display: none; } .hidden { display: none !important; visibility: hidden; } .invis { border: 0 !important; height: 1px !important; left: -999999px !important; overflow: hidden !important; position: absolute !important; width: 1px !important; } .pic, .pic-Rounded { border: 1px solid white; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; background-clip: padding-box; -moz-box-shadow: 0 8px 8px -8px rgba(0, 0, 0, 0.2); -webkit-box-shadow: 0 8px 8px -8px rgba(0, 0, 0, 0.2); box-shadow: 0 8px 8px -8px rgba(0, 0, 0, 0.2); display: inline-block; overflow: hidden; width: 90px; } .pic img, .pic-Rounded img { display: block; } .pic-Rounded { -moz-border-radius: 100px; -webkit-border-radius: 100px; border-radius: 100px; background-clip: padding-box; } /* Code Example -------------------------- */ .media, .media-Reverse, .media-No-Wrap-Reverse, .media-No-Wrap { margin-bottom: 16px; position: relative; z-index: 2; } .media .media-Text > :last-child, .media-Reverse .media-Text > :last-child, .media-No-Wrap-Reverse .media-Text > :last-child, .media-No-Wrap .media-Text > :last-child { margin-bottom: 0; } .media .media-Object, .media-Reverse .media-Object, .media-No-Wrap-Reverse .media-Object, .media-No-Wrap .media-Object { float: left; margin: 0 16px 8px 0; max-width: 30%; } .media-Reverse .media-Object, .media-No-Wrap-Reverse .media-Object { float: right; margin: 0 0 8px 16px; max-width: 30%; } .media-No-Wrap { padding-left: 100px; } .media-No-Wrap .media-Text { float: left; width: 100%; } .media-No-Wrap .media-Object { margin-left: -100px; margin-right: 0; } .media-No-Wrap-Reverse { padding-right: 100px; } .media-No-Wrap-Reverse .media-Object { margin-right: -100px; margin-left: 0; } /* Code Example --------------------------

Title for Meida Element

Paragraph text to go along with media element.

-- Divs were used in this example, but the media element could be applied to various situations. Ie. could be used for a header or footer area where a logo is placed on the right or left w/text to the side. */ .emph-Block { background: #fafafa; border: 1px solid #ddd; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; background-clip: padding-box; -moz-box-shadow: 0 8px 8px -8px rgba(0, 0, 0, 0.2); -webkit-box-shadow: 0 8px 8px -8px rgba(0, 0, 0, 0.2); box-shadow: 0 8px 8px -8px rgba(0, 0, 0, 0.2); margin-bottom: 16px; min-height: 50px; padding: 16px; } .emph-Block > :last-child { margin-bottom: 0; } .kill-List, .intro-List { list-style: none; padding: 0; } .numbered { list-style-type: decimal; } .shout-Out { background: #f8f8f8; border-left: 4px solid #343434; padding: 16px; } .shout-Out:before, .shout-Out:after { display: none; } .action-Link:after { content: "\00A0" "\00BB"; } .txt-Center { text-align: center; } .txt-Left { text-align: left; } .txt-Right { text-align: right; } .txt-Just { text-align: justify; } .highlight, .slant { background: yellow; color: #131313; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; background-clip: padding-box; display: inline-block; padding: 4px; vertical-align: text-top; } .slant { -moz-transform: skewX(-16deg); -ms-transform: skewX(-16deg); -o-transform: skewX(-16deg); -webkit-transform: skewX(-16deg); transform: skewX(-16deg); } .text-Correct { display: inline-block; -moz-transform: skewX(16deg); -ms-transform: skewX(16deg); -o-transform: skewX(16deg); -webkit-transform: skewX(16deg); transform: skewX(16deg); } /* Code Example: Slanted Text w/Highlight -------------------------- Text Goes here Code Example: Normal flowing text w/slanted highlight -------------------------- Text Goes here */ .multi { -moz-column-count: 3; -webkit-column-count: 3; column-count: 3; -moz-column-gap: 40px; -webkit-column-gap: 40px; column-gap: 40px; -moz-column-rule: 1px outset #eeeeee; -webkit-column-rule: 1px outset #eeeeee; column-rule: 1px outset #eeeeee; } body { font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 300; } h1, h2, h3, h4, h5, h6 { font-family: "Droid Serif", Georgia, "Times New Roman", Times, serif; } .giga { font-size: 4.375em; font-weight: 700; } .ultra { font-size: 3.75em; font-weight: 600; } .mega { font-size: 3.5em; font-weight: 300; } h1, .alpha { font-size: 3.125em; font-weight: 400; } h2, .beta { font-size: 2.5em; font-weight: 400; } h3, .gamma { font-size: 2em; font-weight: 400; } h4, .delta { font-size: 1.625em; font-weight: 300; } h5, .eps { font-size: 1.25em; font-weight: 300; } h6, .zeta { font-size: 1.125em; font-weight: 300; } p, li, li p, .base, li a { font-size: 1em; font-weight: 300; } small, .tiny { font-size: 0.875em; font-weight: 300; } .mini { font-size: 0.75em; font-weight: 300; } .action-Link { float: right; } body { background: #CCDF9B; } ::-moz-selection { background: #e93250; color: #eeeeee; text-shadow: none; } ::selection { background: #e93250; color: #eeeeee; text-shadow: none; } .page { min-height: 600px; } @media (max-device-width: 480px), screen and (max-width: 800px) { .page { min-height: 25px; } } .content, .header-Content, .footer-Content { margin: 0 auto; max-width: 1000px; padding: 20px; } .content > :last-child, .header-Content > :last-child, .footer-Content > :last-child { margin-bottom: 0; } a { color: #e93250; } a:hover, a:active { color: #ba142f; } a:visited { color: #750d1e; } :focus, a:focus, a:active, input[type="submit"]::-moz-focus-inner { outline: none; } @media (max-device-width: 480px), screen and (max-width: 800px) { .col-33, .col-40, .col-60 { float: none; width: 100%; } } @media (max-device-width: 480px), screen and (max-width: 800px) { .col-50 { float: none; padding: 0; width: 100%; } } .header-Base { background: #65a0ad; border-bottom: 6px solid #e93250; min-height: 42px; overflow: hidden; } .header-Content { padding-top: 22px; } @media (max-device-width: 480px), screen and (max-width: 800px) { .header-Content { padding: 0; } } .blurb { background: #fff; } .header-Intro { background: url(../img/neocity.jpg) 95% bottom no-repeat; min-height: 214px; } @media (max-device-width: 480px), screen and (max-width: 800px) { .header-Intro { -moz-background-size: cover; -ms-background-size: cover; -o-background-size: cover; -webkit-background-size: cover; background-size: cover; min-height: 2px; } } .header-Outro { background: #30424b; background: -moz-linear-gradient(top, #2b3c43 0%, #354751 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #2b3c43), color-stop(100%, #354751)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #2b3c43 0%, #354751 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #2b3c43 0%, #354751 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #2b3c43 0%, #354751 100%); /* IE10+ */ background: linear-gradient(to bottom, #2b3c43 0%, #354751 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#2b3c43', endColorstr='#354751',GradientType=0 ); /* IE6-9 */ -moz-box-shadow: inset 0px 7px 10px 0px rgba(0, 0, 0, 0.1); -webkit-box-shadow: inset 0px 7px 10px 0px rgba(0, 0, 0, 0.1); box-shadow: inset 0px 7px 10px 0px rgba(0, 0, 0, 0.1); color: #fafafa; } @media (max-device-width: 480px), screen and (max-width: 800px) { .intro-List { margin-bottom: 20px; padding: 20px !important; } } .intro-List li { padding-left: 36px; padding-right: 12px; margin-bottom: 18px; } .intro-List h2 { font-size: 22px; margin-bottom: 2px; } .intro-List p { color: #B2BCC1; } .intro-Icon { background: url(../img/icons.png) no-repeat; display: block; height: 37px; left: -10px; position: absolute; top: 2px; width: 37px; } .intro-Tools { position: relative; } .intro-Question { position: relative; } .intro-Question .intro-Icon { background-position: 0 -40px; } .signup-Area { min-height: 100px; position: relative; } .signup-Form { background: #354751; border-radius: 4px 4px 0 0; height: 600%; overflow: hidden; position: absolute; top: -45px; -moz-box-shadow: 1px 2px 12px 2px rgba(0, 0, 0, 0.15); -webkit-box-shadow: 1px 2px 12px 2px rgba(0, 0, 0, 0.15); box-shadow: 1px 2px 12px 2px rgba(0, 0, 0, 0.15); } @media (max-device-width: 480px), screen and (max-width: 800px) { .signup-Form { height: auto; margin: 0; overflow: visible; position: static; } } .signup-Form h2 { margin-bottom: 0; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5); font-size: 1.8em; } .signup-Form hr { border-bottom: 1px solid #4a6677; border-top: 1px solid #1d282d; margin: 4px 0 22px; } .signup-Form fieldset { background: url(../img/sign-up-bg.png) repeat-x center top; padding: 20px 33px; } .signup-Form label { color: #81b8c6; } @media (max-device-width: 480px), screen and (max-width: 800px) { .signup-Form label { font-size: 70%; } } .signup-Form .input-Area { background: #29383f; border: 0px solid black; color: #557380; margin-bottom: 28px; margin-right: 4px; padding: 11px 12px 9px 12px; width: 62%; -moz-box-shadow: inset 1px 3px 10px 0px rgba(0, 0, 0, 0.2); -webkit-box-shadow: inset 1px 3px 10px 0px rgba(0, 0, 0, 0.2); box-shadow: inset 1px 3px 10px 0px rgba(0, 0, 0, 0.2); } .signup-Form .input-Area:focus { color: #eee; } .signup-Form ::-webkit-input-placeholder { /* WebKit browsers */ color: #5e7f8d; font-style: italic; } .signup-Form :-moz-placeholder { /* Mozilla Firefox 4 to 18 */ color: #5e7f8d; font-style: italic; } .signup-Form ::-moz-placeholder { /* Mozilla Firefox 19+ */ color: #5e7f8d; font-style: italic; } .signup-Form :-ms-input-placeholder { /* Internet Explorer 10+ */ color: #5e7f8d; font-style: italic; } .signup-Form .btn-Action { padding: 10px 25px; } .small-Nav { background: #30424B; display: none; position: fixed; right: 0; top: 0; width: 50px; z-index: 9999; } @media (max-device-width: 480px), screen and (max-width: 800px) { .small-Nav { display: block; } } .header-Nav { background: #5e95a1; border-bottom: 1px solid #a1cad4; -moz-transition: all 0.35s; -ms-transition: all 0.35s; -o-transition: all 0.35s; -webkit-transition: all 0.35s; transition: all 0.35s; } @media (max-device-width: 480px), screen and (max-width: 800px) { .header-Nav { position: fixed; top: -900px !important; } } .header-Nav.show-Nav { top: 0 !important; } .header-Nav a, .header-Nav a:visited { color: #fff; padding: 8px 12px; text-decoration: none; } @media (max-device-width: 480px), screen and (max-width: 800px) { .header-Nav a, .header-Nav a:visited { display: block; } } .header-Nav a:hover, .header-Nav a:visited:hover { background: #528995; text-decoration: underline; } .header-Nav a.selected, .header-Nav a:active, .header-Nav a:visited.selected, .header-Nav a:visited:active { background: #528995; text-decoration: underline; } .constant-Nav { float: left; position: relative; } @media (max-device-width: 480px), screen and (max-width: 800px) { .constant-Nav { float: none; } .constant-Nav li { float: none; } } .status-Nav { float: right; } @media (max-device-width: 480px), screen and (max-width: 800px) { .status-Nav { float: none; } } .status-Nav li { float: left; } @media (max-device-width: 480px), screen and (max-width: 800px) { .status-Nav li { float: none; } } .hp .header-Base { padding-top: 46px; } .hp .header-Nav { left: 0; position: fixed; top: 0; width: 100%; z-index: 3; } .hp .hp-Logo { left: -90px; position: fixed; -moz-transition: all 0.35s; -ms-transition: all 0.35s; -o-transition: all 0.35s; -webkit-transition: all 0.35s; transition: all 0.35s; } .hp .hp-Logo.in-View { left: 0 !important; z-index: 99; } @media (max-device-width: 480px), screen and (max-width: 800px) { .hp .hp-Logo.in-View { left: -90px !important; } } .hp h1.logo { padding-top: 45px; padding-bottom: 0; } .hp h1.logo img { margin-left: -10px; } @media (max-device-width: 480px), screen and (max-width: 800px) { .hp h1.logo img { margin-left: 20px; } } .constant-Nav { margin-left: -88px; -moz-transition: all 0.35s; -ms-transition: all 0.35s; -o-transition: all 0.35s; -webkit-transition: all 0.35s; transition: all 0.35s; } @media (max-device-width: 480px), screen and (max-width: 800px) { .constant-Nav { margin-left: 0; } } .constant-Nav.in-View { margin-left: 0; padding-left: 70px; } @media (max-device-width: 480px), screen and (max-width: 800px) { .constant-Nav.in-View { padding-left: 0; } } .add-Stripe { border-bottom: 6px solid #E93250; } @media (max-device-width: 480px), screen and (max-width: 800px) { .add-Stripe { border: 0; } } .interior .page { padding-top: 46px; } .interior .header-Base { left: 0; overflow: visible; position: fixed; top: 0; width: 100%; z-index: 9; } .int-Logo { left: 0; position: absolute; top: 0; width: 70px; } .interior .header-Nav { padding-left: 70px; } @media (max-device-width: 480px), screen and (max-width: 800px) { .interior .header-Nav { width: 100%; } } .interior .constant-Nav { margin: 0; } .content-Base { background: #f6f0e6; min-height: 500px; padding-bottom: 30px; padding-top: 20px; } .content-Base h1, .content-Base h2, .content-Base h3, .content-Base h4, .content-Base h5, .content-Base h6 { color: #e93250; } .single-Col { max-width: 800px; } .website-Gallery { list-style: none; margin: 0; padding: 0; } .website-Gallery li { float: left; margin-bottom: 8px; } @media (max-device-width: 480px), screen and (max-width: 800px) { .website-Gallery li { width: 50%; } } .website-Gallery a { padding: 0 8px; display: block; } .website-Gallery a img { background: #fff; -moz-box-shadow: 0 8px 8px -8px rgba(0, 0, 0, 0.2); -webkit-box-shadow: 0 8px 8px -8px rgba(0, 0, 0, 0.2); box-shadow: 0 8px 8px -8px rgba(0, 0, 0, 0.2); display: block; padding: 8px; width: 100%; } .twitter-tweet.twitter-tweet-rendered { margin: 0 auto 30px !important; } .footer-Base { color: #5e5b56; } .footer-Base h1, .footer-Base h2, .footer-Base h3, .footer-Base h4 { color: #8b9a7a; } .footer-Intro { background: #daeea5; border-top: 1px solid #cedbab; -moz-box-shadow: 0 8px 8px -8px rgba(0, 0, 0, 0.2); -webkit-box-shadow: 0 8px 8px -8px rgba(0, 0, 0, 0.2); box-shadow: 0 8px 8px -8px rgba(0, 0, 0, 0.2); position: relative; } .footer-Intro .footer-Content { padding-top: 40px; padding-bottom: 40px; } .footer-Intro h2 { font-size: 1.45em; } .f-Col { -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; min-height: 125px; padding-bottom: 28px; position: relative; } @media (max-device-width: 480px), screen and (max-width: 800px) { .f-Col { min-height: 2px; padding: 0; } } .f-Col .action-Link { bottom: 0; position: absolute; right: 12px; } @media (max-device-width: 480px), screen and (max-width: 800px) { .f-Col .action-Link { position: static; } } .footer-icon { display: block; background-repeat: no-repeat; position: absolute; right: 0px; top: -70px; } @media (max-device-width: 480px), screen and (max-width: 800px) { .footer-icon { position: static; float: right; } } @media (max-device-width: 480px), screen and (max-width: 800px) { p.tiny { min-height: 3.5em; } } .f-Col-1 { padding-right: 12px; } .f-Col-1 .footer-icon { background-image: url(../img/support-us.png); width: 92px; height: 104px; right: 5px; } .f-Col-2 { padding-left: 15px; padding-right: 6px; position: relative; } @media (max-device-width: 480px), screen and (max-width: 800px) { .f-Col-2 { border-bottom: 1px solid rgba(0, 0, 0, 0.1); border-top: 1px solid rgba(0, 0, 0, 0.1); margin: 20px 0; overflow: hidden; padding: 20px 0; } } .f-Col-2:before, .f-Col-2:after { background: url("../img/border.png") no-repeat 0 -20px; content: ""; height: 200px; opacity: 0.2; position: absolute; top: 0; width: 1px; } @media (max-device-width: 480px), screen and (max-width: 800px) { .f-Col-2:before, .f-Col-2:after { display: none; } } .f-Col-2:before { left: -14px; } .f-Col-2:after { right: -14px; } .f-Col-2 .footer-icon { background-image: url(../img/about-neocities.png); width: 100px; height: 106px; } .f-Col-3 { padding-left: 20px; } .f-Col-3 .footer-icon { background-image: url(../img/latest-news.png); width: 134px; height: 103px; } @media (max-device-width: 480px), screen and (max-width: 800px) { .f-Col-3 { padding-left: 0; } } .footer-Outro { background: #ccdf9b; border-top: 1px solid #b3c388; overflow: hidden; } .footer-Outro a { color: #5e5b56; } .credits { margin-bottom: 0; } .footer-Nav { text-transform: uppercase; } .footer-Nav .h-Nav, .footer-Nav .bread { float: right; } @media (max-device-width: 480px), screen and (max-width: 800px) { .footer-Nav .h-Nav, .footer-Nav .bread { float: none; margin-top: 15px; } .footer-Nav .h-Nav li:first-child a, .footer-Nav .bread li:first-child a { padding-left: 0; } } .footer-Nav .h-Nav a, .footer-Nav .bread a { padding: 0 8px; } .footer-Nav .h-Nav li:last-child a, .footer-Nav .bread li:last-child a { padding-right: 0; }