:root { --darkcolor: #af2128; } body { margin: 0; font-family: 'Roboto', sans-serif; color: #555555; } .dark { color: #ffffff; } .title { font-size: 35pt; } .title, .subtitle, .dark .light .title, .dark .light .subtitle { color: #af2128; color: var(--darkcolor); } .dark .title, .dark .subtitle { color: #ffffff; } h3 { text-align: center; margin: 5px 0; font-size: 20pt; color: #4a8ecc; } p, .dark .light p { margin: 15px 0; line-height: 1.4; } a { color: #af2128; color: var(--darkcolor); text-decoration: none; } a:hover { text-decoration: underline; } hr { border-top: 1px solid #c0c0c0; } img { user-drag: none; -webkit-user-drag: none; max-width: 100%; } iframe { width: 1200px; height: 640px; max-width: 100%; border: none; background: #000000; } ul, ol { padding-left: 10px; } li { margin: 10 0; } .pagewrapper { min-height: 100%; position: relative; overflow: hidden; } .banner { width: 100%; color: #ffffff; position: relative; background-size: cover; background-position: center; } .banner .title { margin: 0; padding: 90px 0; font-size: 80pt; color: #ffffff; } .banner .subtitle { margin: 0; padding: 80px 0; font-size: 30pt; color: #ffffff; } .banner .screen .title, .banner .screen .subtitle { color: #af2128; } .banner.dark .screen .title, .banner.dark .screen .subtitle, .dark .banner .screen .title, .dark .banner .screen .subtitle { color: #ffffff; } .header a { color: #555555; } .subheader { margin: 0; padding: 10px; background: #eeeeee; text-align: center; box-shadow: 0 2px 2px rgba(0, 0, 0, .1); } .subheader h2 { margin: 10px 0; font-size: 24pt; font-weight: 400; color: #000000; text-align: center; } .body .dark { background: #000000; color: #ffffff; } .dark .title, .dark .subtitle, .dark p { color: #ffffff; } .parallax, .dark.parallax { background-attachment: fixed; background-size: cover; background-position: center; } .formulate .subtitle { font-size: 16pt; } .thincentercolumn { width: 700px; display: inline-block; } .sidebar { width: 300px; vertical-align: top; display: inline-block; } .mainbar { width: 900px; max-width: 900px; vertical-align: top; display: inline-block; } .half { width: 50%; display: inline-block; vertical-align: top; } .half iframe { width: 100%; height: 300px; } .third { width: 33.333%; display: inline-block; vertical-align: top; } .twothird { width: 66.666%; display: inline-block; vertical-align: top; } .centeralign { text-align: center !important; } .leftalign { text-align: left; } .rightalign { text-align: right !important; } .padded { width: 90%; display: inline-block; } .formulate-searchlist-filterbox .formulate-field { margin: 10px; } .formulate-searchlist-itemsbox {} .product { padding: 20px 20px 60px 20px; width: 250px; text-align: center; vertical-align: top; display: inline-block; } .product:hover { opacity: .8; } .product .image { height: 250px; position: relative; } .product .image img { max-width: 100%; max-height: 100%; margin: 0; position: absolute; top: 50%; left: 50%; -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .product .name { margin: 16px 0; } .product .value { margin: 0 5px; color: #af2128; color: var(--darkcolor); text-decoration: line-through; display: inline-block; } .product .price { margin: 0 5px; font-weight: 700; color: #af2128; color: var(--darkcolor); display: inline-block; } .productlisting { margin-top: 20px; text-align: left; display: inline-block; } .productlisting .image { margin: 20px 0; height: 500px; background-size: contain; background-repeat: no-repeat; background-position: center; } .productlisting .formulate-title { color: #000000; font-size: 23pt; font-weight: 400; } .productlisting .value { margin-right: 10px; color: #af2128; color: var(--darkcolor); opacity: .4; font-size: 15pt; text-decoration: line-through; display: inline-block; } .productlisting .price { color: #af2128; color: var(--darkcolor); font-size: 15pt; font-weight: 700; display: inline-block; } .productlisting .category { margin: 0 10px; color: #af2128; color: var(--darkcolor); display: inline-block; } .productlisting .bundle { margin: 0 0 20px 0; clear: both; min-height: 100px; } .productlisting .bundle img { height: 100px; margin: 0 20px 0 0; float: left; } .productlisting .description { margin-bottom: 50px; } .productlisting .description h2, .productlisting .description h3 { text-align: center; } .carticon { position: relative; vertical-align: top; display: inline-block; } .carticon img { margin-top: -12px; } .formulate .carticon .itemcount { width: 100%; color: #ffffff; text-align: center; margin: -32px 0 0 0; position: absolute; top: 27px; font-size: 10pt; } .cartimage { max-width: 100px; max-height: 100px; display: inline-block; } .carttitle { margin: 40px 15px; vertical-align: top; display: inline-block; } .formulate-expandable .expandableheader { color: #ffffff; background: #af2128; background: var(--darkcolor); } .formulate-controls-input { width: auto; color: #555555; } .formulate-controls-input input[type=checkbox] { margin: 0; height: auto; } .formulate-controls-input .loading img { margin: 10px; } button, .formulate .button, .formulate-controls-input .file { padding: 10px 25px; height: auto; background: #af2128; background: var(--darkcolor); border-radius: 4px; color: #ffffff; font-weight: 700; font-size: 11pt; } button:hover, .formulate .button:hover, .formulate-controls-input .file:hover { background: #af2128; background: var(--darkcolor); opacity: .8; } .formulate .button .subtitle { color: #ffffff; } .formulate-controls-input .table { border-color: #d2d2d2; } .formulate .table th, .formulate-controls-input th { background: #af2128; background: var(--darkcolor); color: #ffffff; padding: 10px 15px; font-weight: 700; font-size: 11pt; } .formulate .table th, .formulate-controls-input th span { color: #ffffff; } tr, .formulate-controls-input tr { background: #f8f8f8; } td, .formulate-controls-input td { padding: 10px 15px; } .formulate-controls-input input { padding: 7px 10px; height: 36px; } .formulate-controls-searchselect input { height: 34px; } .editor { margin: 8px 0; padding: 7px 10px; border: 1px solid #dddddd; border-radius: 4px; } .formulate-link { color: #af2128; color: var(--darkcolor); } .linkbutton { margin: 5px 10px; color: #af2128; color: var(--darkcolor); font-weight: bold; display: inline-block; cursor: pointer; } .linkbutton:hover { color: #000000; } .background { text-align: center; background-position: center; background-repeat: no-repeat; background-size: cover; } .background .backgroundimage { top: 0; width: 100%; height: 100%; position: absolute; opacity: 0.2; } .screen { width: 100%; background: #ffffffaa; } .dark .screen { background: #00000044; } .screen, .dark .light .screen { width: 100%; background: #ffffffaa; } .gray { background: #eeeeee; } .content { padding: 5px 5%; } .slider .slidecontent, .slider.mobile .slide .slidecontent { top: 10%; } .slider .slidecontent:before { background: none; } .slidecontent p, .slidecontent h2 { color: #ffffff; } .avatar { padding-top: 10px; border-radius: 50%; max-height: 150px; } .formbox, .formbox.light { margin: 10px 0; width: 1160px; max-width: 100%; color: #555555; background: #ffffff; border: 1px solid #cccccc; box-shadow: 0 0 3px rgba(0, 0, 0, .1); position: relative; display: inline-block; } .formbox .header { height: auto; width: auto; min-width: 0; background: #f6f6f6; text-align: left; position: relative; opacity: 1; z-index: 0; } .formbox .header .leftcontent { width: 220px; padding: 20px 0 20px 25px; display: inline-block; float: left; height: 96px; } .formbox .header .rightcontent { width: 220px; padding: 20px 25px 20px 0; display: inline-block; float: right; height: 96px; } .formbox .header .centercontent { padding: 30px 25px; text-align: center; display: block; } .formbox .header .leftcontent+.centercontent { width: 620px; display: inline-block; } .formbox .header img { max-height: 100%; } .formbox .header .subtitle { margin: 5px 0; color: #000000; } .formbox .body { min-height: 0; width: auto; min-width: 0; padding: 15px 20px; color: #555555; line-height: 1.6; } .formbox .section { padding: 10px 0; width: 100%; text-align: left; } .formbox .section img { max-width: 100%; } .formbox .block { margin: 10px; padding: 30px; width: 290px; height: 210px; background: #f6f6f6; border: 1px solid #cccccc; text-align: center; vertical-align: top; position: relative; display: inline-block; } .formbox p, .formbox label, .formbox textarea, .formbox input { color: inherit; } .formbox .block img { top: 0; right: 0; left: 0; width: 100%; position: absolute; } .formbox .block:hover img { opacity: .8; } .formbox .block .button { right: 20px; bottom: 20px; left: 20px; display: block; position: absolute; } .formbox .block:hover { background: #ececec; } .formbox .title, .formbox .subtitle { color: #af2128; color: --darkcolor; } .legislator { padding: 10px; width: 80px; vertical-align: top; display: inline-block; } .legislator .image { height: 100px; width: 100%; background-size: contain; background-position: center; background-repeat: no-repeat; } .formulate-controls-input .buttonlist .formulate-controls-thumb-button { padding: 5px 2px; } .formulate-controls-select .display { height: 20px; padding-left: 10px; } .formulate-controls-dropdown .element { padding: 4px 10px; } .formulate-controls-radio .wrapper label { padding: 9px 7px; } .bigtitle { font-size: 40pt; } .form { width: 400px; max-width: 100%; text-align: left; display: inline-block; } .form button { padding: 15px 30px; border-radius: 6px; font-size: 18pt; } .link { color: #555555; display: inline-block; font-weight: 700; cursor: pointer; } .link:hover { color: #af2128; color: var(--darkcolor); text-decoration: underline; } .editor a { color: inherit; font-weight: bold; text-decoration: underline; } .subscription { padding: 20px 20px; width: 300px; display: inline-block; vertical-align: top; } .subscription .features { text-align: left; } .subscription ul { padding-left: 15px; } .trophycolumn { width: 45%; display: inline-block; margin: 0 5px; } .availablecolumn { width: 50%; display: inline-block; margin: 0 5px; } .shadowbox { min-height: 300px; } .trophycolumn .shadowbox { border: 10px solid #cc0000; } .availablecolumn .shadowbox { border: 10px solid #0088aa; } .badgecolumn { width: 30%; display: inline-block; vertical-align: top; } .medalscolumn { width: 55%; display: inline-block; vertical-align: top; } .badge { max-height: 240px; } .availablecolumn .badge { max-height: 115px; } .medal { max-height: 115px; display: inline-block; vertical-align: top; } .leaderboard { margin: 10px; vertical-align: top; display: inline-block; } .schedule { overflow-x: auto; } .revereelement, .dark .revereelement { color: #555555; } @media only screen and (max-width: 1200px) { .centercolumn { width: 100%; } .subheader { max-width: 100%; } .banner .title { padding: 70px 0; font-size: 60pt; } iframe { width: 980px; height: 550px; border: none; } .formbox, .productlisting { width: 980px; } .formbox .header .leftcontent { width: 89%; text-align: center; } .formbox .header .rightcontent { display: none; } .formbox .header .centercontent { display: block; } .formbox .header .leftcontent+.centercontent { width: auto; display: block; } .formbox .block { width: 380px; height: 248px; } .sidebar { display: none; } .mainbar { width: 100%; } } @media only screen and (max-width: 1020px) { .banner .title { padding: 50px 0; font-size: 40pt; } iframe { width: 840px; height: 480px; } .formbox, .productlisting { width: 840px; } .formbox .block { width: 315px; height: 218px; } .third { width: 50%; } .twothird { width: 50%; } .trophycolumn { margin: 0; width: 100%; } .availablecolumn { margin: 0; width: 100%; } .badgecolumn { padding: 0; width: 50%; } .medalscolumn { width: 50%; } } @media only screen and (max-width: 880px) { iframe { width: 640px; height: 360px; } .formbox, .productlisting { width: 640px; } .formbox .block { width: 460px; height: 288px; } .thincentercolumn { width: 500px; } } @media only screen and (max-width: 700px) { iframe { width: 500px; height: 280px; } .half { width: 100%; } .third { width: 100%; } .twothird { width: 100%; } .badgecolumn { padding: 0; width: 100%; } .medalscolumn { width: 100%; } .productlisting { width: 500px; } .formbox .block { width: 375px; height: 250px; } .product { width: 100px; padding: 10px; font-size: 10pt; } .product .image { height: 125px; } .product .button { font-size: 8pt; padding: 10px 10px; } .productlisting .half { text-align: center; } } @media only screen and (max-width: 580px) { iframe { width: 440px; height: 250px; max-width: 100%; } .formbox { width: auto; } .productlisting { width: 440px; max-width: 100%; } .formbox .block { width: 320px; height: 220px; max-width: 100%; } .thincentercolumn { width: 400px; max-width: 100%; } }