@import "./variable.scss";
@import "./common.scss";

@import "./disqus.scss";
@import "./footer.scss";



.article {
    position: relative;
    z-index: 10;
    display: block;
    min-width: 320px;
    max-width: 400px;
    background-color: white;
    box-sizing: border-box;
    padding: 1.5rem 1rem 2rem;
    //border: 1px solid $article-border-color;
    border-radius: 3px;
    margin: {
        top: 50px;
        left: auto;
        right: auto;
        bottom: 4rem;
    }

    box-shadow: 0px 0px 60px #bebebe;

    .img-wrapper {
        position: relative;
        z-index: 1;
        
        span.line {
            position: absolute;
            top: 50%;
            height: 0px;
            width: 100%;
            //background-color: #999;
            display: block;
            border-bottom: 1px dashed $img-circle-bg;

            &:before, &:after {
                content: '';
                display: block;
                position: absolute;                
                height: 10px;
                width: 10px;
                //border: 1px solid #999;
                border-radius: 50%;
                top: -5px;
                background-color: $img-circle-bg;
            } 

            &:before {
                left: -20px;
            }

            &:after {
                right: -20px;
            }
        }

        img {
            position: relative;
            z-index: 1;
            max-width: 80%;
            display: block;
            margin: 15px auto 0;
            border: {
                radius: 2px;
            }
            
            
        }
    }
    
    
    
    ul {
        li {
            list-style: none;
            vertical-align: middle;
        }
        
        li:before{
            content: '';
            display: inline-block;
            height: $section-ul-height;
            width: $section-ul-height;
            background-size: contain;
            background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEgAAABICAQAAAD/5HvMAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAAmJLR0QA/4ePzL8AAAU4SURBVGje7dh/kNR1Hcfxx+4Bl3eCnF4ERn5tRqtxCkIdatTvZEqkQlNgJc7RxY9JNJlRU0E7SAcuDwg06ogfZpSRTR36hyM0ZOMwrKLQpFhMp39QdjPGASkHx91xt8ttf5iyt7e7t/uF/9rX35/Pa57vH5+flFVWWWWVVVZZZ1Wxs2kWEjder0MkInrEz3KAV9lus49FN6gYGGFwTjAsSAXaIpkFTFHvk0gEqWgeGRkKGWWl9cadQYbS0mJuM1dFeKZAqHWdb7tLZTQz0O8Vxz3s62JRXAb3UMzt6sQjI8U8b7lKj7ghClJ8kF2PEZa5kYhIMac8bqnzbXBr6YUbDPSGNUZ7zNQzQtrgISOttcA5pbkMBkraaI2LNJt2BoXrs95iSas85CNhCaHl2oe6rbTSWJvMidreCZI2u80/3GeTycV3Uy6gmG5Nlhrhxx5QU0p8A5BSnlNvh2m2mKe6OJ98O/VJ69zpkAYbfTraAk5IsM98TUZpttEVxbRAPJ+ZlBazvWCm36tTHbl07ZaZ7WW32Gqx8UPlKV7AKm2PedYYZ4NmE8JILZ4g6U/q/NBwyz1tduEmyDjLAmrU6fUbPW1o0ybotMt+l5puqrh/Bl2FzrmASaZ70c7MMW3aBCe86CVVQl91hQ7/DpK5nYY47RP0edYsK5xrlRa3GhWxn1JetkC93a7zlCfdpCpXpgpkKCO+Y3bZbbRrzDRRZ9Ae9OWKL2CSaV4amKEMp2Twhm1aXeR6XzNJyqGgZ6DTkED/s+oP2my33xjXm2mCbu1BbzZUwOWm5wN6zyno8VfbHXCBa80wWbWDQedpp6IvaAm6POMWt/ub6Z6yxSznh9kbQgdqhige7R43wz3e9SXr3JdJMSxrfDr/pTaB8Khf2eEms3zZFHv8zh/Cf2VcWDukjSwivrhPuUqNpL126s8H1KXTWCMK5ikdHvSEZ0xxh2td43V13vxgQGyoW3oIF5tvrrH+7Oe2ac+8gQ8E6nVS5dArL6THEX04pVuqiIycxqn0FYtc6S1L/Nrb2c+B7JIN+QoJiZvgDt8w0m6/9KzDuUYlcs3k4+42R4Un/dRr+gePGqYEhVCr3p0u1mqDFoelB5gel3Ku4ZI5Awktd7VWq211IvdDqQSgkLirPWiKDo/a6EAWDHRIqVaZDRRSZY7vG2OrRvtzzMwJ1K3TCB/2dk6c0eb4nnF2WmGXZN6nYDpHXsdoMF+PH/iZ44WekRlACWGfkyp8KGepLrXUNx2zzKZSXqYhfEKjm7Vq8JxThWcWUbKQuC9a4XJ7NdohVcAyjfjppRHClX7kC3a636v5S/W+4nlMM3FG+JYnTLRFvW0FcejzrtGqMnA+b71Qi+/4y9A4uTIUM3wATrW73C+m0VrHhixVSpfK9xxCuMFjLrFZg8PFFTkb6IgKtRnx1VpigXc0+K2+oixj0tIf4KxzobWavFNsz2UDdZER3wUeMc+b7rWjmHRnaapmH7XKSl3Fz83T1CFc6GHz7LPQKxH+ez5ntfFWl4ZTaJWNtdbNXvVde0vG6TdRs8s0ayoNJz9QreVmeN4ir5dk2C9pmMs8YJJfaCwVJ/fh2q9Gk7n2uFtriYa9jphstc942hL/Kf1jL3sfOipmvAZzveYerSX7paWc57NesDjXLaD0DHWosNA4rRZG6J33tc8ib0WbPXinrnCJw+61J5JhyhEHLLYvajCDeyjmkAf9MaJhl2Wq/D36t3A20AlH/URLNMMEaQcikuQB2uagvbmulmWVVVZZZZVVVlll/Z/qv0PlsaOMsQlsAAAAJXRFWHRkYXRlOmNyZWF0ZQAyMDE1LTA3LTI1VDIxOjQ5OjMzKzA4OjAw30weZAAAACV0RVh0ZGF0ZTptb2RpZnkAMjAxMC0wNC0yNlQwMDowMDowMCswODowMKBVO10AAABOdEVYdHNvZnR3YXJlAEltYWdlTWFnaWNrIDYuOC44LTEwIFExNiB4ODZfNjQgMjAxNS0wNy0xOSBodHRwOi8vd3d3LmltYWdlbWFnaWNrLm9yZwUMnDUAAAAYdEVYdFRodW1iOjpEb2N1bWVudDo6UGFnZXMAMaf/uy8AAAAYdEVYdFRodW1iOjpJbWFnZTo6SGVpZ2h0ADEyOEN8QYAAAAAXdEVYdFRodW1iOjpJbWFnZTo6V2lkdGgAMTI40I0R3QAAABl0RVh0VGh1bWI6Ok1pbWV0eXBlAGltYWdlL3BuZz+yVk4AAAAXdEVYdFRodW1iOjpNVGltZQAxMjcyMjExMjAwCSkN7wAAABN0RVh0VGh1bWI6OlNpemUAMS42M0tCQumU2v8AAABWdEVYdFRodW1iOjpVUkkAZmlsZTovLy9ob21lL3d3d3Jvb3Qvd3d3LmVhc3lpY29uLm5ldC9jZG4taW1nLmVhc3lpY29uLmNuL3NyYy8yMTcvMjE3NDMucG5na2M4XQAAAABJRU5ErkJggg==');
            vertical-align: middle;
        }
        
        ul {
            font-size: 90%;

            li:before{
                height: $section-ul-height * 0.9;
                width: $section-ul-height * 0.9;
            }
        }
    }
    
    &.org {
        .section-number {
            margin-right: 10px;
            
        }

        
    }

    &.markdown {
        
    }
       
}

#disqus_thread {
    min-width: 320px;
    max-width: 400px;
    margin: 2rem auto;
}

@media (min-width: 768px) {
    .article { 
        max-width: 80%;
    }
    
    #disqus_thread {
        max-width: 85%;
    }
}


@media (min-width: 1080px) {
    .article { 
        max-width: 1080px;        
    }
    
    #disqus_thread {
        max-width: 1020px;
    }
}