@font-face {
    font-family: Adorable Doll;
    src: url(https://dl.dropbox.com/s/plehp3a9xbtct7n/AdorableDoll.ttf);
}

@font-face {
    font-family:funkhouse;
    src: url(https://dl.dropbox.com/s/2bxao21r582gf5d/FUNKHOUS.ttf);
}

@font-face {
    src: url(https://dl.dropbox.com/s/53rwduk24jn09xg/Candy_Pop%21-demo-font.ttf);
    font-family: candypop;
}

.funkhouse { color:#FF5555; font-family:funkhouse; display:inline; }

body {
    color:#333;
    font-family:meiryo ui;
    background: #F6EAE1;
}

a {
    color:#555BFF;
    text-transform:uppercase;
    text-decoration:none;
}

a:hover {
    color:#FFD913;
}

.bg, .list  {
    background: #F6EAE1;
    border-radius:10px;
    border:1px dotted #999; 
}

#leftcol {
    background:url('https://lied.neocities.org/img/doll/aside1-1.png');
    position:fixed;
    left:115px;
    top:65;
    height:769px;
    width:344px;
}

#leftcol:hover {
    background:url('https://lied.neocities.org/img/doll/aside1-2.png');
}

#mainbox {
    background:#F3B2D0;
    padding:25px;
    width:800px;
    height:auto;
    margin:0 auto;
    box-shadow: rgb(85, 91, 255) 0px 0px 0px 3px, 
    rgb(31, 193, 27) 0px 0px 0px 6px, 
    rgb(255, 217, 19) 0px 0px 0px 9px, 
    rgb(255, 156, 85) 0px 0px 0px 12px, 
    rgb(255, 85, 85) 0px 0px 0px 15px;
}


.bullet {
    display:flex;
    flex-flow:column wrap;
    max-height:90px;
    margin-left:20px;
}

.b-border {
    border-bottom:1px dotted #999;
}

.cimg img {
    height:150px;
    width:150px;
    margin:0px 10px 0px 10px;
}


h1 {
    color:#F6EAE1;
    font: 36pt funkhouse;
    padding:15px;
    margin: 0px 0px 20px 0px;
    text-shadow: 
        1px 0 0 #3D3D3D, 
        0 -1px 0 #3D3D3D, 
        0 1px 0 #3D3D3D, 
       -1px 0 0 #3D3D3D;
    margin-bottom:1px;
}

h2 {
    color:#333;
    font: 16pt funkhouse;
    font-weight:lighter;
    margin: 10px 0px 20px 0px;
}

h3 {
    color:#FF9C55;
    font-size:10pt;
    margin:2px;
    display:inline-block;
}

smaller {
    font-size:7pt;
    margin-left:15px;
    margin-bottom:3px;
}

.break-s {
    display:block;
    height:25px;
}

.break-l {
    display:block;
    height:50px;
}

.list {
    position:relative;
    max-height:470px;
    padding:20px; 
    overflow:hidden;
}

.list h2 {
    color:#F6EAE1;
    background:#DE5192;
    top:0;
    width:100%;
    padding:5px;
    position:absolute;
    margin-top:-7px;
    margin-left:-20px;
    border-bottom:3px solid #FFD913;
}

.listcontent {
    max-height:465px;
    max-width:650px;
    margin-top:20px;
    display:flex; 
    flex-flow: row wrap; 
    justify-content:center;
    overflow-y:scroll;
    overflow-x:hidden;
}

.doll {
    display: inline-block;
    position:relative;
    width: 150px;
    height: 170px;
    border: 1px solid #666;
    background-position: center center;
    background-repeat: no-repeat;
    border-radius:1px;
    font:12px arial;
    color:#fff;
    text-shadow: 
        1px 0 0 #3D3D3D, 
        0 -1px 0 #3D3D3D, 
        0 1px 0 #3D3D3D, 
       -1px 0 0 #3D3D3D;
    overflow:hidden;
    text-align:center;
}

.dline, .dname {
    display:flex;
    justify-content:center;
    align-items:center;
    position:absolute;  
    height:15px;
    width:100%;
    padding:2px;  
}

.dname {
    bottom:0;
    background:#333;
    font-size:6pt;
}

.dline {
    bottom:17px;
    background:#DE5192;
}

.hv {
    background:#E4AF6A;
}

/*-- scrollbar --*/
::-webkit-scrollbar-thumb {
	background-color: #339999;
	height: 8px; width: 8px;
}

::-webkit-scrollbar {
	height: 8px; width: 5px;
	background-color: {color:scrollbar};
}

::-webkit-scrollbar-track {
		-webkit-box-shadow: inset 0 0 1px rgba(192,192,192,0.7);
		border-radius: 10px;
}

::-webkit-scrollbar-thumb {
	background: #000;
	border: 3px double #fff;
	-webkit-border-radius:5px;
	border-radius:5px;
	-moz-border-radius:5px;
}

@media only screen and (max-width: 1400px) {
  .hidden {
    visibility:hidden;
  }
}