body {
background-color: #bbd6fd;
font: 13px 'Inconsolata', monospace;
color: #000000;
padding: 0px;
margin: 0px;
}

#header {
background-image: url('http://diva.milkbaeri.net/headers/rotate.php');
background-repeat: no-repeat;
width: 500px;
height: 600px;
position: absolute;
top: 10px;
left: 25px;
}

#menu {
position: absolute;
width: 500px;
left: 25px;
top: 609px;
}

#main {
position: absolute;
width: 900px;
left: 575px;
top: 30px;
}
#area {
line-height: 21px;
text-align: justify;
}
#foot {
font-size: 10px;
border-top: 1px dashed #666666;
border-bottom: 1px dashed #666666;
padding: 7px 0px 6px 0px;
margin: 26px 0px 3px 0px;
}

h1 {
font-family: 'caesar_dressingregular', Arial, sans-serif;
color: #bbd6fd;
line-height: 30px;
background-color: #3d6eee;
border-bottom: 3px solid #fc36d1;
text-align: center;
text-transform: uppercase;
letter-spacing: 1px;
padding: 1px 0px 2px 0px;
margin: 15px 0px 14px 0px;
}

h2 {
font-family: 'Inconsolata', monospace;
font: 18px;
color: #bbd6fd;
line-height: 20px;
background: #2e52b3;
font-style: italic;
text-align: center;
letter-spacing: 0px;
padding: 0px 0px 2px 0px;
margin: 15px 0px 4px 0px;
}

#menu a:link, #menu a:visited, #menu a:active {
display: block;
font: 14px 'Inconsolata', monospace;
color: #bbd6fd;
line-height: 30px;
background-color: #3d6eee;
font-weight: normal;
text-align: center;
text-transform: uppercase;
text-decoration: none;
padding: 1px 0px 1px 0px;
margin: 0px 0px 1px 0px;
}
#menu a:hover {
color: #bbd6fd;
background-color: #2e52b3;
}

b, strong { color: #3d6eee; font-weight: 900; }
i, em { color: #303030; }
u { color: #3d6eee; text-decoration: underline; }


a:link, a:visited, a:active {
color: #fc36d1;
font-weight: 700;
text-transform: uppercase;
text-decoration: none;
}
a:hover {
color: #2e52b3;
}

blockquote {
background-color: #eaf3ff;
padding: 6px;
margin-top: 0px;
margin-bottom: 0px;
}

@font-face {
    font-family: 'caesar_dressingregular';
    src: url('http://diva.milkbaeri.net/fonts/caesardressing-webfont.woff2') format('woff2'),
         url('http://diva.milkbaeri.net/fonts/caesardressing-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}


/*---------- Added Mods ----------*/


.highlightCard {
	border: 2px solid #fc36d1;
	background: #fc36d1;
}
.dimmedCard {
	opacity:0.3;
	filter:alpha(opacity=30);
}

#cardlist a {
        text-transform:lowercase;
}
   
    
.collecting-deck {
    display: inline-block;
    vertical-align: top;
    width: 49%;
}

div.deck img {
vertical-align:top;
}



img.level {
  display: block;
}
.progress-bar {
  float: left;
  border-radius: 10px;
	height: 100%;
  width: 0%;
  font-size: 12px;
  color: #fff ;
  text-align: center;
  padding-right:2px;
  line-height: 100%;
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
  border-top-left-radius: 20px;
  border-bottom-left-radius: 20px;
  background-color: #3d6eee;
  background-image: linear-gradient(
    center bottom,
    rgb(230  81  103) 37%,
    rgb(255  183  205) 69%
  );
/*box-shadow: 
    inset 0 2px 9px  rgba(255,255,255,0.3),
    inset 0 -2px 6px rgba(0,0,0,0.4); */
  position: relative;
  overflow: hidden;
}

.progress {
	height: 12px;
  overflow: hidden;
  background: rgb(233, 233, 233);border-radius: 25px;
  margin-top:4px;
  top: 0; left: 0; bottom: 0; right: 0;
  background-image: linear-gradient(
    -45deg, 
    rgba(255, 255, 255, .2) 25%, 
    transparent 25%, 
    transparent 50%, 
    rgba(255, 255, 255, .2) 50%, 
    rgba(255, 255, 255, .2) 75%, 
    transparent 75%, 
    transparent
  );
  z-index: 0;
  background-size: 25px 25px;
  border-top-right-radius: 25px;
  border-bottom-right-radius: 25px;
  border-top-left-radius: 25px;
  border-bottom-left-radius: 25px;
  overflow: hidden;
}
.progress > div:after {
  content: "";
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
  background-image: linear-gradient(
    -45deg, 
    rgba(255, 255, 255, .2) 25%, 
    transparent 25%, 
    transparent 50%, 
    rgba(255, 255, 255, .2) 50%, 
    rgba(255, 255, 255, .2) 75%, 
    transparent 75%, 
    transparent
  );
  z-index: 1;
  background-size: 30px 30px;
  animation: move 2s linear infinite;
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
  border-top-left-radius: 25px;
  border-bottom-left-radius: 25px;
  overflow: hidden;
}


#cardlists li {
    display: inline-block;
}
    .cardname { 
	line-height: 25px;
    width: 170px;
    display: block;
    font-size: 10px;
	text-align: center;
	background: #eaf3ff;
	margin: 4px; }
	
li {
    margin: 0 10px;
    padding: 5px;
    display: inline-block;
}



::-webkit-scrollbar-thumb:vertical {
    background-color: #fc36d1;
    height: auto;}
 
::-webkit-scrollbar-thumb:horizontal {
    background-color: #fc36d1;
    height: auto;}
 
::-webkit-scrollbar {
    height: 7px;
    width: 8px;
    background-color: transparent;}


.button {
  background-color: #3d6eee;
  border: none;
  color: white;
  padding: 8px 20px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-family: 'Arial';
  font-size: 16px;
  text-transform: lowercase;
  transition-duration: 0.4s;
}

.button:hover {
  background-color: #2e52b3;
  color: white;
}


html{
    cursor: url(http://diva.milkbaeri.net/cursor.cur), url(http://diva.milkbaeri.net/cursor.cur), auto;
}

/* Start http://www.cursors-4u.com */ body, a:hover {cursor: url(http://diva.milkbaeri.net/cursor.cur), url(http://diva.milkbaeri.net/cursor.cur), progress !important;} /* End http://www.cursors-4u.com */



/*# sourceMappingURL=style.css.map */



/******************************************************************************************
N E E D  E D
******************************************************************************************/

#needed-deck {
    font-weight: normal;
    color: #f36db4;
    text-align: left;
    display: inline-block;
    width: 31%;
    margin: 0;
    border-top: 1px solid #eeeeee;
    vertical-align: top;
}
#needed-cards {
    font-weight: normal;
    color: #000;
    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;
    color: #000000;
	    text-shadow: 1px 1px 2px rgb(252, 54, 209);
}
#needed {
    text-align: left;
    font-family: calibri;
    font-size: 11px;
}

#needed b, #needed strong {
    text-align: left;
    font-family: calibri;
    font-size: 12px;
    font-weight: normal;
    letter-spacing: 1px;
}



select, textarea {
  padding: 10px;
  width: 450px;
  background-color: #fff;
  border: none;
  border: 1px dashed #3d6eee;
  font-family: 'Trebuchet Ms';
  font-size: inherit; }

input[type=submit] {
  padding: 5px;
  border: none; /*rewriting standard style, it is necessary to be able to change the size*/
  width: 115px;
  background-color: #fff;
  border: 1px dashed #3d6eee;
  font-family: 'Trebuchet Ms';
  font-size: inherit;
}

input[type=text] {
  width: 450px;
  padding: 10px;
  border: none;
  background-color: #fff;
  border: 1px dashed #3d6eee;
  font-family: 'Trebuchet Ms';
  font-size: inherit;
}

#search {
  width: 250px;
  padding: 5px;
  border: 1px dashed #3d6eee;
  background-color: #fff;
  font-family: 'Trebuchet Ms';
  font-size: inherit;
}




#s-m-t-tooltip{
  /* basic */
  max-width:300px;
  z-index:10;
  margin:36px -14px 7px 12px;
  /* style and design */
  padding:8px;
  background:#eaf3ff; /* fallback if rgba not supported */
  -moz-border-radius:0px;
  -webkit-border-radius:0px;
  border-radius:0px;
  -moz-box-shadow:2px 2px 0 rgba(0,0,0,0.15),-1px -1px 0 rgba(255,255,255,0.3);
  -webkit-box-shadow:2px 2px 0 rgba(0,0,0,0.15),-1px -1px 0 rgba(255,255,255,0.3);
  box-shadow:2px 2px 0 rgba(0,0,0,0.15),-1px -1px 0 rgba(255,255,255,0.3);
  /* font */
  font-family:Verdana,Geneva,sans-serif;
  font-size:11px;
  line-height:16px;
  color:#000;
}





/*-- CARD COUNT MOD --*/

/* background overlay */
.cIOverlay {
    position: fixed;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    background: #fff;
    background: rgba(255,255,255,0.9);
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    
}

/* instruction text */
.cIOverlay span {
    display: block;
    color: #000;
    text-align: center;
    width: 35%;
    font-weight: bold;
    cursor: default;
    font-size: 16px;
    padding: 15px;
}

/* textarea to input cards */
.cIOverlay textarea {
    width: 30vw;
    padding: 2px;
    height: 100px;
    background: #bbd6fd;
    border: 1px solid #000;
    outline: none;
}

/* button to count cards */
.cIOverlay input {
    margin: 5px 0;
    width: 30.5vw;
    cursor: pointer;
    background: #3d6eee; 
    color: #000;
    border: 1px dotted #333;
    font-size: 20px;
    outline: none;
}
/* close button */
.cIOverlay input[value=X] {
    font-size: 15px;
    width: 28px;
    height: 28px;
    border-radius: 50px;
    position: fixed;
    right: 30%;
    top: 30%;
}
/* hover effect over buttons */
.cIOverlay input:hover {
    background: #2e52b3; 
    color: #fff;
}

/* text displaying card amount */
.cIOverlay #countText {
    text-align: center;
    font-size: 25px;
    padding: 15px;
}

/* button added into your html */
.cardCountButton {
display: block;
font: 14px 'Inconsolata', monospace;
color: #bbd6fd;
line-height: 30px;
background-color: #3d6eee;
font-weight: normal;
text-align: center;
text-transform: uppercase;
text-decoration: none;
padding: 1px 0px 1px 0px;
margin: 0px 0px 1px 0px;
width: 100%;
outline: 0px;
border: 0px;
}

.cardCountButton:hover {
  background-color: #2e52b3;
  color: #bbd6fd;
}

/* html button after it's been clicked/while in use */
.cardCountButton:focus {
   box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}

.collecttable {
    display: inline-block;
    vertical-align: top;
    width: 49%;
}