@import url(https://fonts.googleapis.com/css?family=Exo+2:300,300i,400,400i,500,500i,600,600i,700,700i,800,800i&display=swap);
@import url(https://fonts.googleapis.com/css?family=Neuton:300,400,400i,700&display=swap);
/*
*/
/* */
/* Gloabal styles for page body */
body {
background-color: #11222A;
font-family: 'Exo 2', sans-serif;
color: #ffffff;
}
/* Background Images */
#background {
position: fixed;
width: 100%;
z-index: -1;
top: -100px;
left: 0px;
margin: 0px auto;
}
#bigbackground {
position: fixed;
width: 107%;
z-index: -1;
top: 0px;
left: -30px;
margin: 0px auto;
}
/* Page structure */
#frame_wrapper {
width: 1040px;
/* border-style: solid;
border-color: #666; */
/* border-width: .1px; */
margin: auto;
}
#body_wrapper {
/* opacity: 0.5; */
width: 960px;
border-left: .5px solid #F1810B;
border-right: .5px solid #F1810B;
margin: auto;
background-color: #11222A;
height: 1750px;
}
#body_header {
/* height: 125px; */
/* background-color: purple; */
margin: auto;
}
#column-left {
width: 320px;
float: left;
/* background-color: green; */
}
#column-center {
width: 320px;
/* height: 350; */
float: left;
/* background-color: red; */
}
#column-right {
width: 320px;
float: left;
/* background-color: blue; */
}
#decks-column-left {
width: 292px;
float: left;
margin-left: 40px;
/* background-color: green; */
}
#deck-column-center {
width: 292px;
/* height: 350; */
float: left;
/* background-color: red; */
}
#decks-column-right {
width: 292px;
float: left;
/* background-color: blue; */
}
#column-library {
/* width: 672px; */
width: 555px;
float: left;
margin-left: 40px;
/* background-color: purple; */
}
#search_results-header {
/* width: 672px; */
/* width: 878px; */
float: left;
margin-left: 41px;
/* margin: auto; */
/* background-color: purple; */
}
#column-decklist {
/* width: 288px; */
width: 324px;
border-left: solid 0px #F1810B;
margin-right: 40px;
float: left;
/* background-color: orange; */
}
#decklist-wrapper {
border: solid 1px white;
}
#cardsfilter-wrapper {
width: 28%;
height: 1000px;
float: left;
padding: 30px;
border: solid ipx white;
/* background-color: purple; */
}
.one_third_column {
float: left;
width: 290px;
border: 1px solid green;
}
.one_half_column {
float: left;
width: 436px;
/* border: 1px solid green; */
}
.half_column_panel {
width: 360px;
background-color: #1C2D35;
border-style: solid;
border-color: #4EB8E7;
border-width: 1px;
padding-top: 6px;
padding-right: 12px;
padding-bottom: 9px;
padding-left: 12px;
/* padding:12px; */
margin: 0 auto;
margin-bottom: 10px;
overflow-wrap: break-word;
text-align: left;
/* opacity: 0.5; */
}
.eventPanel {
display: table;
float: left;
width: 266px;
height: 90px;
padding: 10px;
border-style: solid;
border-color: #4EB8E7;
border-width: .5px;
margin-right: 5px;
background-color: #1C2D35;
}
.eventPanel .eventListing {
display: table-cell;
vertical-align: middle;
text-align: center;
}
#footer {
height: 100px;
clear: both;
/* background-color: yellow; */
}
.clear_columns {
clear: both;
}
.inner_single_column {
width: 91%;
margin: auto;
}
/* MODULES========================================================== */
/* UPPER BAND FOR LOGIN/CONTACT ============================= */
.upper {
height: 26px;
background-color: #F1810B;
/* font-weight: 600; */
/* font-size: .8em; */
color: #11222A;
/* padding-top: 7px; */
}
.upper.left {
float: left;
margin-left: 5%;
border-bottom-left-radius: 15px;
padding-left: 25px;
}
.upper.middle {
float: left;
width: 300px;
/* margin: auto; */
text-align: middle;
color: green;
}
.upper.middle content {
display: table-cell;
vertical-align: middle;
border: 1px solid green;
}
.upper.right {
float: right;
margin-right: 5%;
border-bottom-right-radius: 15px;
padding-right: 25px;
}
.upper_center {
overflow: hidden;
height: 26px;
background-color: #F1810B;
}
.lower {
/* height: 100px; */
background-color: #1C2D35;
/* font-weight: 600; */
/* font-size: .8em; */
color: #11222A;
}
.lower.left {
float: left;
margin-left: 5%;
border-top-left-radius: 15px;
padding-left: 25px;
}
.lower.right {
float: right;
margin-right: 5%;
border-top-right-radius: 15px;
padding-right: 25px;
}
.lower_center {
color: #999999;
font-size: .7em;
margin: auto;
align: bottom;
text-align: middle;
padding: 24px;
overflow: hidden;
/* height: 26px; */
background-color: #1C2D35;
text-align: center;
width: 100%;
margin-top: 45px;
float: left;
}
a.upper {
font-size: .8em;
font-weight: 600;
padding-top: 7px;
}
a.upper:hover {
color: #ffffff;
}
img.avatar {
vertical-align: middle;
margin-right: 3px;
width: 18px;
height: 18px;
object-fit: fill;
border: solid 1px #999999;
}
img.badge {
vertical-align: middle;
margin-right: 1px;
width: 18px;
height: 18px;
object-fit: fill;
/* border: solid 1px #999999; */
}
/* TOP NAV ============================= */
#topnav_buttons {
margin-top: 36px;
margin-bottom: 20px;
margin-left: 30px;
font-weight: 700;
font-size: 1.12em;
float: left;
}
/* SECTION HEADER ============================= */
#section {
width: 916px;
color: white;
font-weight: 600;
margin-top: -10px;
margin-bottom: auto;
margin-left: auto;
margin-right: auto;
}
#section_title {
font-size: 2em;
color: #4EB8E7;
margin-top: -58px;
text-align: right;
margin-right: 35px;
font-weight: 700;
}
/* HOMEPAGE TOP BANNER IMAGE ============================= */
/* #home_banner {
width: 916px;
margin-top: -10px;
margin-bottom: 10px;
margin-left: auto;
margin-right: auto;
} */
img.home_banner {
/* width: 874px;
height: 70px; */
margin-top: -10px;
margin-bottom: 10px;
margin-left: 43px;
margin-right: auto;
border-bottom: solid 1px #F1810B;
z-index: -1;
object-fit: cover;
}
img.mid_banner {
z-index: -1;
float: left;
margin-bottom: 1px;
}
/* HOMEPAGE COLUMN TITLE LABEL ============================= */
#column_label {
font-size:1.2em;
font-weight: 700;
color: #ffffff;
font-style: italic;
text-align: center;
}
/* Definition for home page panel */
#panel {
width: 260px;
background-color: #1C2D35;
border-style: solid;
border-color: #4EB8E7;
border-width: .5px;
padding-top: 6px;
padding-right: 12px;
padding-bottom: 9px;
padding-left: 12px;
/* padding:12px; */
margin: 0 auto;
margin-bottom: 10px;
overflow-wrap: break-word;
/* opacity: 0.5; */
}
/* HOME PAGE MID-PAGE BANNER ============================= */
.midbanner {
/* border: 1px red solid; */
clear: both;
margin-left: 30px;
margin-top: 15px;
float: left;
border-top: solid 1px #F1810B;
border-bottom: solid 1px #F1810B;
width: 874px;
}
.midbanner_text {
color: #4EB8E7;
font-size: 2em;
font-weight: 700;
margin-top: 25px;
text-align: right;
vertical-align: middle;
}
/* DECKS PAGE SEARCH RESULTS BODY ============================= */
.results_label {
/* align: left; */
float: left;
font-size: 2em;
color: #4EB8E7;
/* margin-right: 35px; */
font-weight: 700;
}
/* CARD SEARCH INPUT LABELS ============================= */
.searchLabel {
font-size: 1em;
font-weight: 600;
color: #ffffff;
font-style: italic;
text-align: left;
margin-top: 20px;
margin-bottom: 5px;
}
.searchLabel.first {
margin-top: -10px;
}
/* FACTION FILTERS MODULE FORMATTING ============================= */
.faction_filters {
float: left;
margin-top: 10px;
}
/* Styles for panels */
#list_title {
font-family: 'Exo 2', sans-serif;
font-size: 1.1em;
font-weight: 700;
color:#F1810B;
line-height: 1;
}
#byline {
width: 236px;
font-size: .9em;
font-weight: 300;
margin-top: .1em;
}
#article_author {
font-weight: 600;
color:#F1810B;
}
#ago_time {
font-family: 'Exo 2', sans-serif;
font-weight: 300;
font-style: italic;
}
.archetype {
font-family: 'Exo 2', sans-serif;
font-weight: 400;
font-style: normal;
color: #458A9E;
}
#article_description {
font-size: .9em;
margin-top: 0em;
font-weight: 300;
/* margin-bottom: 5em; */
}
table.dl {
background-color: #11222A;
width: 100%;
}
#decktitle {
font-size: 1.2em;
font-weight: 600;
margin-left: 15px;
margin-top: 8px;
}
#deckcreator {
font-size: 1em;
font-weight: 400;
margin-left: 15px;
margin-top: 5px;
margin-bottom : 8px;
}
#cardcount {
width: 300;
/* border: solid white 1px; */
margin-bottom: 7px;
font-weight: 400;
font-size: 1em;
text-align: right;
}
#deck_info {
/* border-style: solid;
border-color: white; */
margin-top: .4em;
}
.listed_factions {
/* border-style: solid;
border-color: blue; */
width: 130px;
float: left;
/* font-weight: 600;
color: #4EB8E7; */
}
.factions_centered {
text-align: center;
/* border:1px solid #666; */
}
#essence {
/* border-style: solid;
border-color: green; */
float: left;
margin-left: 1em;
/* margin-right: auto; */
text-align: center;
width: 65px;
font-weight: 600;
color: #B4E185;
}
#upvotes {
/* border-style: solid;
border-color: red; */
/* width: 55px; */
float: leftt;
font-weight: 600;
margin-left: 2em;
text-align: right;
color: #4EB8E7;
}
.card_type_label {
/* float: left; */
display: table-cell;
/* width: 250px; */
/* height: 80px;
padding: 10px; */
/* border: 3px dashed #1c87c9; */
vertical-align: middle;
}
/* CARD DETAILS PAGE ==================================== */
#column_card_details {
/* width: 672px; */
width: 874px;
float: left;
margin-left: 40px;
/* background-color: red; */
}
#card_details_left {
width: 220px;
float: left;
margin-left: 50px;
/* background-color: purple; */
}
#card_details_right {
width: 220px;
float: left;
margin-left: 50px;
/* background-color: green; */
}
img.card_details {
width: 333px;
float: left;
}
img.card_details.token {
width: 222px;
float: left;
}
img.card_faction {
height: 22px;
/* float: left; */
vertical-align: middle;
}
.card_detail_label {
font-size: 1em;
font-weight: 600;
color: #458A9E;
font-style: italic;
text-align: left;
/* margin-top: 20px; */
margin-bottom: 5px;
}
hr.card_detail {
margin-top: 0px;
margin-bottom: 0px;
margin-left: auto;
margin-right: auto;
width: 100%;
border: 0;
height: 1px;
background-image: linear-gradient(to right, #458A9E, #458A9E, #1C2D35);
}
.card_detail_name {
font-weight: 600;
font-size: 2em;
margin-bottom: 8px;
}
.card_detail_text {
font-weight: 400;
font-size: 1.8em;
margin-bottom: 18px;
}
/* IMAGES ============================== */
img.faction_list {
margin: 0px 2px 2px 0px;
width: 15px;
padding: 2px;
}
img.faction_icon {
margin: 0px 2px 2px 0px;
width: 40px;
padding: 10px;
opacity: 0.7;
}
img.faction_icon:hover {
opacity: 1;
-webkit-filter: drop-shadow(0px 0px 3px rgba(241,129,11,0.7));
}
img.upVote {
opacity: 0.5;
}
img.upVote:hover {
opacity: 1;
/* -webkit-filter: drop-shadow(0px 0px 3px rgba(241,129,11,0.7)); */
}
.favorite {
width: 25px;
height: 21px;
background: url("https://cdn.mythgardhub.com/icons/heartFavorite.png") no-repeat;
display: inline-block;
}
.favorite:hover {
background: url("https://cdn.mythgardhub.com/icons/heartFavoriteOn.png") no-repeat;
}
img.cost {
width: 30px;
margin: 7px;
opacity: 0.7;
vertical-align: middle;
}
img.cost:hover {
opacity: 1;
-webkit-filter: drop-shadow(0px 0px 3px rgba(241,129,11,0.5));
}
img.card_type {
/* float: left; */
vertical-align: middle;
height: 30px;
margin: 7px;
opacity: 0.7;
}
img.card_type:hover {
opacity: 1;
-webkit-filter: drop-shadow(0px 0px 3px rgba(241,129,11,0.5));
}
img.uparrow {
margin-right: .1em;
width: 10px;
}
img.essence {
margin-right: .1em;
width: 10px;
}
/* search_results Table */
table.search_results {
width: 91%;
margin: auto;;
border-collapse: collapse;
padding: 20px;
overflow-wrap: break-word;
}
/* Decklist Table */
#decklist_wrapper {
border: solid 1px #ffffff;
background-color: #333333;
border-radius: 7px;
margin-left: 20px;
width: 100%;
}
table.decklist {
width: 100%;
background-color: #11222A;
}
table.decklist td {
border: 0px;
/* padding: 10px; */
/* background-color: #333333; */
/* font-size:.8em; */
}
input[type=text].deck_name {
width: 300px;
height: 30px;
border: 1px solid #458A9E;
border-radius: 7px;
background-color: #333333;
outline: none;
vertical-align: middle;
margin: 0px 0px 0px -4px;
}
input[type=text].deck_name::placeholder {
color: #FFFFFF;
opacity: 1; /* Firefox */
font-style: normal;
font-family: 'Exo 2', sans-serif;
font-size: 1.5em;
padding-top: 10px;
font-weight: 600;
padding: 10px;
}
input[type=text].import_deck {
width: 300px;
width: 300px;
padding: 10px 0px 280px 0px;
border: 1px solid #458A9E;
border-radius: 7px;
background-color: #D1D1D1;
margin-top: 15px;
/* border-radius: 7px;
margin-top: 5px; */
outline: none;
/* vertical-align: middle; */
/* padding-left: 9px; */
/* padding: 0px 0px 380px 0px; */
}
input[type=text].import_deck::placeholder {
/* vertical-align: top; */
/* padding: 0px 0px 280px 0px; */
text-align: top;
color: #458A9E;
opacity: 1; /* Firefox */
font-style: italic;
font-family: 'Exo 2', sans-serif;
font-size: 1em;
font-weight: 500;
/* margin-top: 30px; */
}
.deckname {
font-size: 1.2em;
font-weight: 600;
margin-left: 15px;
margin-top: 8px;
}
a.decklist {
font-size: .8em;
float: right;
margin-right: 6px;
/* color: green; */
}
td.pathpower {
font-size: 1em;
background-color: #333333;
text-align: left;
padding: 10px;
}
td.mana_cost {
font-size: 1.1em;
background-color: #333333;
color:#ffffff;
font-family: arial;
padding: 10px;
text-align: center;
/* font-weight: bold; */
}
td.gem_cost {
padding: 10px;
width: 30px;
text-align: center;
font-family:verdana;
background-color: #333333;
}
td.blue {
color:#4EB8E7;
}
td.yellow {
color: #E9E008;
}
td.red {
color: #DC1919;
}
td.green {
color: #30B170;
}
td.orange {
color: #F97800;
}
td.purple {
color: #AC55E9;
}
td.card_name {
width: 300px;
padding: 10px;
text-align: left;
font-size:1em;
color: #333333;
font-family: 'Exo 2', sans-serif;
font-weight: 700;
font-size:.8em;
}
td.norden {
background-color: #4EB8E7;
}
td.aztlan {
background-color: #E9E008;
}
td.oberos {
background-color: #DC1919; text-align: left;
}
td.dreni {
background-color: #30B170;
}
td.parsa {
background-color: #F97800;
}
td.harmony {
background-color: #AC55E9;
}
td.card_quantity {
padding: 10px;
text-align: center;
font-size:.7em;
color:#ffffff;
font-family:arial;
font-style: italic;
}
td.rarity {
width: 7px;
padding: 0px;
}
td.common {
background-color: #926950;
}
td.uncommon {
background-color: #A5A5A5;
}
td.rare {
background-color: #FDF007;
}
td.mythic {
background-color: #33A0E0;
}
/* Table for Card Library */
table.cardlibrary {
width: 100%;
border: solid 0px #666;
cellpadding: 0;
/* background-color: yellow; */
border-collapse: collapse;
}
table.cardlibrary td {
width: 100%;
border: solid 0px #666;
cellpadding: 30px;
margin-top: 17px;
padding-bottom: 15px;
/* background-color: yellow; */
}
#cardartcell {
width: 33%;
margin-top: 50px;
height: 185px;
/* background-color: yellow; */
}
#cardart {
width: 160px;
/* margin: auto; */
}
#pathart {
width: 240px;
/* margin: auto; */
}
#pathartcell {
width: 50%;
top-margin: 20px;
height: 135px;
/* background-color: yellow; */
}
table.search_results tr {
border-top: 1px solid orange;
/* background-color: purple; */
}
table.search_results td {
padding: 10px;
}
table.search_results tr:nth-child(even) {
background-color: #1C2D35;
}
.search_results_name {
width:300px;
top-margin: 50px;
height: 50px;
}
.search_results_name {
width:300px;
top-margin: 50px;
height: 50px;
}
.panelContent.eventName {
font-weight: 700;
}
.panelContent.eventDate {
font-size: 1em;
font-weight: 400;
}
.search_results.eventName {
width:300px;
top-margin: 50px;
height: 50px;
font-weight: 700;
}
.search_results.eventDate {
width:300px;
text-align: right;
font-weight: 300;
font-size: 1em;
color: #ffffff;
}
.search_results_factions {
width: 260px;
/* border: 1px red solid;
background-color: yellow; */
}
.search_results_essence {
/* float: left; */
/* margin-left: 1em; */
text-align: center;
font-weight: 600;
width: 200px;
color: #B4E185;
top-margin: 50px;
/* background-color: purple; */
}
.search_results_archetype {
/* float: left; */
/* margin-left: 1em; */
text-align: center;
font-weight: 500;
width: 200px;
/* color: #B4E185; */
top-margin: 50px;
/* background-color: green; */
}
.search_results_date {
width: 150px;
color: #ffffff;
font-weight: 500;
margin-left: 30px;
text-align: right;
font-size: .8em
}
.search_results_placement {
/* width: 150px; */
color: #ffffff;
font-weight: 600;
margin-left: 30px;
text-align: right;
font-size: 1em;
vertical-align: top;
}
/* Events Page Components */
.event_title {
float: left;
font-size: 1.7em;
/* margin-bottom: 7px; */
font-weight: 600;
}
.eventDate {
font-size: .7em;
font-weight: 400;
color: #458A9E;
}
.announcement {
border: 0px white solid;
/* width: 100%; */
padding-top: 0px;
padding-left: 20px;
padding-left: 20px;
padding-bottom: 10px;
}
.announcement content {
display: table-cell;
vertical-align: middle;
text-align: left;
}
.announcement p {
font-family: 'Exo 2', sans-serif;
font-size: .8em;
font-weight: 300;
width: 90%;
}
/* Link and hover styles */
a {
color: #F1810B;
text-decoration: none;
}
a.tn {
color: #FFFFFF;
text-decoration: none;
}
/* a.section_head {
color: #4EB8E7;
} */
a.selected {
color: #4EB8E7;
text-decoration: none;
}
a:hover {
color: #4EB8E7;
}
a.mb {
color: #4EB8E7;
text-decoration: none;
}
a.mb:hover {
color: #F1810B;
}
a.mb {
color: #4EB8E7;
text-decoration: none;
}
a.creator {
color: #F1810B;
text-decoration: none;
}
a.creator:hover {
color: #4EB8E7;
}
a.tabs {
color: #458A9E;
}
a.tabs:hover {
color: #F1810B;
}
a.buttons {
color: #F1810B;
}
a.buttons:hover {
color: #F1810B;
}
a.buttonst {
color: #333333;
}
a.buttonst:hover {
color: #4EB8E7;
}
a.search_results {
color: #ffffff;
text-decoration: none;
}
a.search_results:hover {
color: #4EB8E7;
text-decoration: none;
}
a.filter {
color: #ffffff;
}
a.filter:hover {
opacity: 1;
-webkit-filter: drop-shadow(0px 0px 3px rgba(241,129,11,0.5));
}
#more_link {
font-size:.7em;
margin-top: -5px;
margin-right: 20px;
font-weight: 600;
/* color: #458A9E;
font-style: italic; */
text-align: right;
}
/* Inputs and Buttons */
input[type=text].a {
width: 350px;
height: 30px;
border: 1px solid #458A9E;
background-color: #D1D1D1;
border-radius: 7px;
margin-top: 5px;
outline: none;
padding-left: 9px;
}
input[type=text].a.decks {
width: 250px;
}
input[type=text].card_search {
border-radius: 7px;
width: 350px;
height: 30px;
border: 1px solid #458A9E;
margin-top: 5px;
outline: none;
padding-left: 9px;
clear: both;
}
::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
color: #458A9E;
opacity: 1; /* Firefox */
font-style: italic;
font-family: 'Exo 2', sans-serif;
}
input[type=text].b {
width: 250px;
height: 30px;
border: 1px solid #458A9E;
background-color: #D1D1D1;
border-radius: 7px;
margin-top: 5px;
outline: none;
padding-left: 9px;
}
.button {
background-color: #333333;
padding: 10px;
text-align: center;
text-decoration: none;
font-family: 'Exo 2', sans-serif;
border-radius: 7px;
margin: 5px 5px 5px 5px;
}
.button1 {float: right;}
/* original */
.button2 {
border: 1px solid #458A9E;
background-color: #333333;
color: #ffffff;
width: 100px;
margin-left: 44px;
font-style: italic;
font-weight: 600; f
font-size: 1em;
}
.short {
padding: 10px;
border: 1px solid #458A9E;
/* background-color: purple; */
color: #ffffff;
width: 91px;
margin-left: 0px;
font-style: italic;
font-weight: 600;
font-size: 1em;
}
.short.first {
padding: 10px;
border: 1px solid #458A9E;
/* background-color: purple; */
color: #ffffff;
margin-left: 28px;
font-style: italic;
font-weight: 600;
font-size: 1em;
}
.button2b {
border: 1px solid #458A9E;
background-color: #F1810B;
color: blue;
width: 100px;
margin-left: 44px;
font-style: italic;
font-weight: 600; f
font-size: 1em;}
.button3 {
border: 1px solid #458A9E;
background-color: #333333;
color: #ffffff;
width: 300px;
margin-left: 28px;
font-style: italic;
font-weight: 600;
font-size: 1em;
}
.card_tabs {
/* background-color: purple; */
clear: both;
}
.deckbuilder_filter_buttons {
float: rightt;
margin-left: 60px;
}
.button4 {
padding: 5px;
border-top: 1px solid #458A9E;
border-right: 1px solid #458A9E;
border-left: 1px solid #458A9E;
border-bottom: 1px solid #11222A;
background-color: #11222A;
border-bottom-left-radius: 0px;
border-bottom-right-radius: 0px;
color: #458A9E;
width: 100px;
height: 30px;
font-style: normal;
}
.button5 {
/* margin-left: 10px; */
padding: 5px;
border-top: 1px solid #458A9E;
border-right: 1px solid #458A9E;
border-left: 1px solid #458A9E;
border-bottom: 1px solid #458A9E;
background-color: #11222A;
border-bottom-left-radius: 0px;
border-bottom-right-radius: 0px;
color: #458A9E;
width: 100px;
height: 30px;
font-style: normal;
}
.cardset select {
background-color: #D1D1D1;
width: 268px;
height: 30px;
padding: 5px;
/* font-size: 16px; */
line-height: 1;
border: 1px solid #458A9E;
border-radius: 7px;
/* -webkit-appearance: none; */
outline: none;
color: #458A9E;
opacity: 1; /* Firefox */
font-style: italic;
font-family: 'Exo 2', sans-serif;
}
.cardsearch select {
background-color: #D1D1D1;
width: 260px;
height: 30px;
padding: 5px;
/* font-size: 16px; */
line-height: 1;
border: 1px solid #458A9E;
border-radius: 7px;
/* -webkit-appearance: none; */
outline: none;
color: #458A9E;
opacity: 1; /* Firefox */
font-style: italic;
font-family: 'Exo 2', sans-serif;
}
.toggle {
/* float: left; */
display: inline-block;
/* vertical-align: middle; */
/* border: solid 1px white; */
color: green;
width: 200px;
}
.switch {
position: relative;
display: inline-block;
vertical-align: middle;
/* float: left; */
width: 50px;
height: 24px;
margin: 0px 5px 0px 5px;
}
.switch input {
opacity: 0;
width: 0;
height: 0;
}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
-webkit-transition: .4s;
transition: .4s;
}
.slider:before {
position: absolute;
content: "";
height: 16px;
width: 16px;
left: 4px;
bottom: 4px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}
input:checked + .slider {
background-color: #B4E185;
}
input:focus + .slider {
box-shadow: 0 0 1px #333;
}
input:checked + .slider:before {
-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);
transform: translateX(26px);
}
/* Rounded sliders */
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;
}
/* Horizontal Rules */
hr.top {
margin-top: 0px;
margin-bottom: 10px;
margin-left: auto;
margin-right: auto;
height: 1px;
border: none;
color: #F1810B;
background-color: #F1810B;
width: 91%;
}
hr.top.db {
color: green;
}
hr.ograd {
margin-top: 10px;
margin-bottom: 12px;
margin-left: auto;
margin-right: auto;
width: 90%;
border: 0;
height: 1px;
background-image: linear-gradient(to right, #11222A, #F1810B, #11222A);
}
hr.bgrad {
margin-top: 10px;
margin-bottom: 8px;
margin-left: auto;
margin-right: auto;
width: 100%;
border: 0;
height: .5px;
background-image: linear-gradient(to right, #1C2D35, #4EB8E7, #4EB8E7);
}
hr.cbody {
margin-top: -6.5px;
margin-bottom: 10px;
height: 1.5px;
border: none;
color: #458A9E;
background-color: #458A9E;
width: 95%;
}
hr.leftToRightFade {
margin-top: 10px;
margin-bottom: 8px;
margin-left: auto;
margin-right: auto;
width: 100%;
border: 0;
height: 1px;
background-image: linear-gradient(to right, #4EB8E7, #4EB8E7, #1C2D35);
}
/* Original Structure */
* {
margin: 0;
padding: 0;
}
#wrapper {
width: 960px;
border-left: .5px solid #F1810B;
border-right: .5px solid #F1810B;
margin: 0 auto;
background-color: #11222A;
/* opacity: 0.5; */
}
#header {
/* height: 100px; */
/* border-style: solid;
border-color: #ffffff; */
}
#db_wrapper {
width: 900px;
margin: 0 auto;
border-left: .5px solid #FFFFFF;
border-right: .5px solid #FFFFFF;