@font-face {
    font-family: 'LaneNarrowRegular';
    src: url('/css/LaneNarrowRegular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
} 

/* basics */
 
body {
    background: #f9f9f9;
    background-attachment:fixed;
    background-repeat:repeat;
    color:#3D4351;
    font-family:'Karla', sans-serif;
    line-height:20px;
    font-size:13px;
    text-align:left;
}

/* scroll in a specific section */

.scrollable {
    height: 400px;
    overflow: scroll;
}

/* content */

#container {
    top:0;
    left:0;
    margin-top:20px;
    margin-left:280px;
    margin-bottom:20px;
    position:absolute;
    z-index:99;
}
     
.posts {
    overflow:hidden;
    margin-bottom:20px;
    width:980px;
    padding:30px;
    background-color:#fff;;
    border:1px solid #f5f5f5;
}

.cat {
	margin: 30px 0px 30px 0px;
	padding: 5px 15px;
	background-color: #c9b7ff2a;
	font-family: 'LaneNarrowRegular', sans-serif;
	font-size: 20px;
	text-transform: uppercase;
	color: #fba0e3;
}

	.cat span {
		padding: 5px 15px;
		background-color: #FFF;
	}

/* font style */

b, strong {
    font-weight:bold;
    color: #9457eb;
}

i, em, .em {
    font-style:italic;
    color: #9457eb;
}

status {
    color: #01aa06;
}

u {
    text-decoration: none;
	border-bottom: 1px dashed #fba0e3;
}

.fa, .far, .fas, .fab, .fa-brands, .fa-solid {
    color: #c9b7ff;
    font-size: 10px;
}

/* titles */
    
h1 {
    font-family: 'LaneNarrowRegular';
    font-size: 20px;
    text-transform: uppercase;
    color: #99ccff;
    padding:20px 0px 13px 5px;
}

h1:before { content:url("");
    padding:0px 4px 0px 4px;
    margin-right: 3px;

}

h2 {
    font-family:'Karla', sans-serif;
    font-size: 14px;
    text-transform: uppercase;
    color: #53b6f3;
    padding: 0px 0px 0px 0px;
    border-bottom: 1px dashed #fba0e3;
}

h2:before { content:url("");
    padding:0px 4px 0px 4px;
    margin-right: 3px;
}

h3 {
    font-size: 22px;
    padding:5px 0px 5px 0px;
    text-align: center;
    font-style:italic;
    font-family:'Karla', sans-serif;
    text-transform: uppercase;
    background-color: #fff; /* For browsers that do not support gradients */
    color: #9457eb;
    margin-bottom: 20px;
    border-bottom: 3px solid;
    border-image: linear-gradient(to right, rgba(153, 204, 255, 0.67), rgb(201, 183, 255, 0.67), rgb(251, 160, 227, 0.67)) 1;
}

h5 {
    font-size: 18px;
    padding:5px 0px 5px 0px;
    text-align: left;
    font-style:italic;
    font-family:'Karla', sans-serif;
    text-transform: lowercase;
    background-color: #fff; /* For browsers that do not support gradients */
    color: #9457eb;
    margin-bottom: 10px;
}
    
/* divider */

hr.dotted {
    width:70%;
    border-width:0px;
    border-top: 1px dotted #fba0e3;
  }

/* links */

a {
    color: #f25bae;
    font-weight: bold;
    padding:0px;
    text-decoration:none;
    -webkit-transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out;
    noFocusLine: expression(this.onFocus=this.blur())
    outline: none;
}
     
a:hover {
    text-decoration:none;
    color:#fba0e3;
    padding:0px;
    font-weight:normal;
    noFocusLine: expression(this.onFocus=this.blur())
    outline: none;
}
 
/* bullets & blockquote */

ul {
    margin: 0;
    padding: 1;
  }

blockquote {
    padding-left:10px;
    margin-left:5px;
    border-left:3px solid;
    border-image: linear-gradient(to top, rgba(153, 204, 255, 0.67), rgb(201, 183, 255, 0.67), rgb(251, 160, 227, 0.67)) 1;
    margin:10px;
    font-size:13px;
}

/* sidebar */
 
#sidebar {
    position:fixed;
    top:0;margin-top:0px;
    left:0;margin-left:0px;
    width:250px;
    height:100%;
    background-color:#fff;;
    display:table;
}
 
.mid {display:table-cell;vertical-align:middle;}
 
.basic {
    text-align:center;
    color:#777777;
    border-radius:5px;
    padding:5px 10px;
    text-transform:uppercase;
    background: #fff;
}

.basic a {
    display:inline-block;
    font-size:10px;
    text-transform:uppercase;
    letter-spacing:0.5px;
    padding:0px 6px 0px 0px;
    margin:0px;
    color:#777777;
    background:#fff;
}
 
.basic a:hover {
    color:#c9b7ff;
}
 
.basic .fa {
    padding:6px 6px 9px 6px;
    font-size:10px;
    color:#c9b7ff;
}

/* sidebar photo */

.photo {
    width:200px;
    margin-top:10px;
    margin-left:18px;
    padding:7px;
    height:auto;
    background-color:#fff;
    color:#3D4351;
    font-family:'Karla', sans-serif;
    line-height:15px;
    font-size:11px;
    text-align:justify;
}

.idol {
    border-radius:0px;
}

/*------------------------------TCG specific------------------------------*/

/* TCG Navigation Links */

.tcgnav {
    margin-top:10px;
    text-align:center;
}
 
.tcgnav a {
    display:inline-block;
    width:91.5px;
    font-size:11px;
    text-transform:uppercase;
    letter-spacing:0.5px;
    padding:2px 6px;
    margin-left:2px;
    margin-right:2px;
    margin-bottom:6.5px;
    color:#ab91fa;
    background:#fff;
    border-radius:5px;
    border:1px solid #b59efc2c;
}
 
.tcgnav a:hover {
    color:#b69efc;
    background:#b59efc2c;
}

/* collecting decks */

.collecting-decks .collecting-decks {
    
    margin-right: 15px;
    margin-left: 15px;
    display: inline-block;
    vertical-align: top;
    width: 45%;
    line-height: 0; }
  
.collecting-decks img {
      max-width: 20%;
}
  
.mastered-deck {
      text-align: center;
}
  
.mastered-deck_cards {
      line-height: 0;
}
  
h4 {
    font-size: 16px;
    padding:5px 0px 5px 0px;
    text-align: center;
    font-style:normal;
	font-family: 'LaneNarrowRegular', sans-serif;
    text-transform: lowercase;
    background-color: #fff; /* For browsers that do not support gradients */
    color: #9457eb;
    margin-bottom: 20px;
    border-bottom: 3px solid;
    border-image: linear-gradient(to right, rgba(153, 204, 255, 0.499), rgb(201, 183, 255, 0.499), rgb(251, 160, 227, 0.499)) 1;
}

/* needed mod by kriss */

#needed-deck {
    font-weight: normal;
    font-family:'Karla', sans-serif;
    font-size: 15px;
    color: #9457eb;
    text-align: left;
    display: inline-block;
    width: 31%;
    margin: 0;
    border-top: 1px solid #eeeeee;
    vertical-align: top;
}
#needed-cards {
    font-weight: normal;
    font-family:'Karla', sans-serif;
    font-size: 15px;
    color: #aeaeae;
    text-align: left;
    display: inline-block;
    width: 68%;
    margin: 0;
    border-top: 1px solid #eeeeee;
    vertical-align: top;
}
#needed-trading #needed-cards {
    color: white !important;
}
#needed-pending {
    font-weight: normal;
    font-family:'Karla', sans-serif;
    color: #9457eb;
	text-shadow: 1px 1px 2px rgba(157, 60, 255, 0.326);
}
#needed {
    text-align: left;
    font-family:'Karla', sans-serif;
    font-size: 14px;
}
#needed b, #needed strong {
    text-align: left;
    font-family:'Karla', sans-serif;
    font-size: 16px;
    font-weight: normal;
    letter-spacing: 1px;
}

/* show card names under cards */

.list-inline {
    display: inline-block;
}
    .cardname {
        line-height: 20px;
        width: 125px;
        display: inline-block;
        font-size: 11px;
        background-image: linear-gradient(to right, rgba(153, 204, 255, 0.23), rgb(201, 183, 255, 0.23), rgb(251, 160, 227, 0.23));
        margin: 4px;
        color: #000;
}

    li {
        line-height: 20px;
        width: 135px;
        display: inline-block;
        font-size: 11px;
        margin: 4px;
    }
    
/*--------------------textarea--------------------*/

/* logs */

textarea[name="shinylog"] {
	width: 900px;
    height: 150px;
    padding: 4px;
    color: #888888;
    border: 2px solid #c9b7ff;
    border-radius: 6px;
    border-image: linear-gradient(to bottom, rgba(153, 204, 255, 0.67), rgb(201, 183, 255, 0.67), rgb(251, 160, 227, 0.67)) 1;
    font-family:'Karla', sans-serif;
    margin: 4px;
}

/* personal box */

textarea[name="shinybox"] {
	width: 700px;
    height: 90px;
    padding: 4px;
    color: #888888;
    border: 2px solid #c9b7ff;
    border-radius: 6px;
    border-image: linear-gradient(to bottom, rgba(153, 204, 255, 0.67), rgb(201, 183, 255, 0.67), rgb(251, 160, 227, 0.67)) 1;
    font-family:'Karla', sans-serif;
    margin: 4px;
}

/* logbox for sort */

textarea[name="hahaveryfunny"] {
	margin: 4px;
    padding: 5px;
    width: 320px;
    height: 100px;
    color: #888888;
    border: 2px solid #c9b7ff;
    border-image: linear-gradient(to bottom, rgba(153, 204, 255, 0.67), rgb(201, 183, 255, 0.67), rgb(251, 160, 227, 0.67)) 1;
    border-radius: 6px;
}

/*--------------------count cards by amber--------------------*/

textarea[name="cardlisttocount"] {
	margin: 4px;
    padding: 5px;
    width: 700px;
    height: 200px;
    font-family:'Karla', sans-serif;
    color: #888888;
    border: 2px solid #c9b7ff;
    border-radius: 6px;
    border-image: linear-gradient(to top, rgba(153, 204, 255, 0.67), rgb(201, 183, 255, 0.67), rgb(251, 160, 227, 0.67)) 1;
}

/* count cards button */

.countcards {
    width:100px;
    height:40px;
    margin-left:5px;
    margin-top:5px;
    border-image: linear-gradient(to bottom, rgba(153, 204, 255, 0.67), rgb(201, 183, 255, 0.67), rgb(251, 160, 227, 0.67)) 1;
}

.bg-success {
    background-color: #fba0e32a; /* For browsers that do not support gradients */
    background-image: linear-gradient(to right, rgba(153, 204, 255, 0.23), rgb(201, 183, 255, 0.23), rgb(251, 160, 227, 0.23));
    font-family:'Karla', sans-serif;
    width: 700px;
}

 /*--------------------tradeform--------------------*/

 * {
    box-sizing: border-box;
    border-width: 2px;
  }

.tradeform {
    background-color: #FFF;
    padding: 40px;
    color: #888888;
}

.col-75 {
    float: left;
    width: 80%;
    margin-top: 6px;
}

input[type=text], select[name="tcg"], textarea[name="wants"], textarea[name="offer"], textarea[name="comments"] {
    width: 100%;
    text-align: left;
    color: #888888;
    padding: 12px;
    border-image: linear-gradient(to bottom, rgba(153, 204, 255, 0.67), rgb(201, 183, 255, 0.67), rgb(251, 160, 227, 0.67)) 1;
    resize: vertical;
}

button[type=submit] {
    background-color: #fff;
    color: #888888;
    padding: 6px 15px;
    margin-top: 5px;
    width: 100px;
    border-image: linear-gradient(to bottom, rgba(153, 204, 255, 0.67), rgb(201, 183, 255, 0.67), rgb(251, 160, 227, 0.67)) 1;
    float: left;
}

/* Clear floats after the columns */

.row::after {
    content: "";
    display: table;
    clear: both;
    border-color: #fff
}

/* select */

select, option {
	margin: 4px;
    padding: 5px;
    width: 200px;
    height:30px;
    text-align: center;
    color: #888888;
    background-color: #fff;
    border: 2px solid #c9b7ff;
    border-radius: 6px;
}

/* cardsearch */

input {
    font-family:'Karla', sans-serif;
    border: 2px solid #c9b7ff;
    border-image: linear-gradient(to bottom, rgba(153, 204, 255, 0.67), rgb(201, 183, 255, 0.67), rgb(251, 160, 227, 0.67)) 1;
    border-radius: 6px;
    background: #ffffff;
    font-size: 11px;
    line-height: 10px;
    padding: 5px;
    text-align: center;
    color: #888888;
    width: 100px;
    height:40px;
}

.highlightCard {
    border: 4px solid #c9b7ff;
    border-image: linear-gradient(to bottom, rgba(153, 204, 255, 0.67), rgb(201, 183, 255, 0.67), rgb(251, 160, 227, 0.67)) 1;
    background: #fff0f5;
}
.dimmedCard {
    opacity:0.3;
    filter:alpha(opacity=30);
}

/* scrollbar */

::-webkit-scrollbar {
    width: 12px;
    background:#ffffff;
}
 
::-webkit-scrollbar-thumb {
    border:4px solid #ffffff;
    border-radius: 5px;
    background:#c9b7ff;
    background-image: linear-gradient(to bottom, rgba(153, 204, 255, 0.67), rgb(201, 183, 255, 0.67), rgb(251, 160, 227, 0.67));
}

 /*--------------------select text--------------------*/

::selection {
    color:#fff;
    background: #c9b7ff8c;
  }