body { padding-top: 50px; padding-bottom: 20px; font-family: 'Roboto', sans-serif;}

/* Wrapping element */
/* Set some basic padding to keep content from hitting the edges */
.body-content { padding-left: 15px; padding-right: 15px;  min-height: 700px;}
input {max-width: 250px}
textarea { width: 800px; height: 500px }

/* Common */
.fl {float:left}
.fr {float:right}
.clear {clear:both}
.orange { color:orange }
.mghdr { margin-top: 20px; margin-bottom: 20px; }

.mt15 {margin-top: 15px;}
.mt20 {margin-top: 20px;}
.mt45 {margin-top: 45px;}
.mb20 {margin-bottom: 20px;}
.mp0 {margin:0px; padding:0px}
.mr30 {margin-right: 30px;}
.ml30 {margin-left: 30px;}

.w1 {width:100px}
.w2 {width:200px}
.w3 {width:300px}
.w4 {width:400px}

.active {color:orange}

/* article */
.toc { padding: 15px }
.article .title { font-size:large; color:#00BCD4; margin-top: 20px; margin-bottom:10px; text-align:center }
.article .content { font-size:medium; padding: 5px 15px 15px 15px; color: #333; line-height: 1.8em}
.article .content h4 { padding:15px 0px 15px 0px; color: black; font-weight:600; font-size:large }
.article .content h5 { color: blue; font-weight:600; font-size:medium; }
.article .content ol {list-style: decimal-leading-zero;}
.article .content img { width: auto; margin-top: 15px; margin-bottom: 15px; }
.article .content img.org { width:auto; height:auto; margin-top: 15px; margin-bottom: 15px; }
.article .articleTopAd {text-align:center; margin: 5px 0px 0px 0px}

/* quiz */
.tests {margin-top:20px; font-size:15px}
.tests .header {font-size:x-large; color:#00BCD4; margin-top: 20px; margin-bottom:20px; margin-left:20px }
.test {margin-top:20px; font-size:15px}
.test .header {font-size:x-large; color:#00BCD4; margin-top: 20px; margin-bottom:30px; margin-left:20px }
.testres {margin-top:20px; font-size:15px}
.testres .header {font-size:large; color:#00BCD4; margin-top: 20px; margin-bottom:30px; margin-left:20px }
.test #btnSubmit {margin-left:15px}
.qz { margin-bottom:30px;}
.qz .qzq {color:#333; margin-bottom: 15px;font-weight:700}
.qz .qzline span { margin-left: 12px; }
.qzcode {background-color: lightgray}

.qzcard {width:300px; height:275px}
.qzcard img {width:300px; height:150px}
.qzcard .qzpadding {background-color:aquamarine; padding:10px;}

.testanswer { margin: 0px 0px 30px 10px; }
.testanswer label.correct {color:green}
.testanswer span.correct { margin-left: 10px;color:green }
.testanswer label.wrong {color:red}
.testanswer span.wrong { margin-left: 5px;color:red }
#scoreLabel {padding:30px 8px 0px 0px;height: 120px;}
#scoreGauge {width:280px; height: 140px;}

/* footer */
#footerDiv {margin-top:30px}
footer {margin-top:10px;margin-bottom:20px}

/* Index */
.indx-top {margin-top: 60px; margin-bottom: 50px}
.indx-top #topDiv #logo {padding-left:50px}
.indx-top #topDiv img {width:500px}
.indx-top #topDiv #desc {font-size:medium; font-weight:bold; color:darkolivegreen}
.indx-top #topDiv #quote {padding-left: 50px}
.indx-top #topDiv blockquote {color:#444; font-size:small;line-height:2em; width:400px;}
.indx-top #subtitle {margin-top:-20px; margin-left:60px; color:#0B7E45}
.indx-top img {border:0px}
.indx-top img#prg {border:10px solid #444; border-radius:10px}
.indx-top img#sep {width:100%; margin-top:15px; margin-bottom:10px;width:500px}
.indx-top h3 {font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; color:#4800ff; }
.indx-top h4 {color:#444;font-family:Lucida Grande, 맑은고딕, Arial, sans-serif}
.indx-top #rightArea {margin:0px; padding:0px}
.indx-top #midArea { margin:0px 0px 0px -20px; padding:0px}
.indx-top #midArea h5 {color:darkslategray}
.indx-top #midArea p {margin-top:45px}
.menuImgSection img {width:200px;height:200px;padding-top:5px}
.menuImgSection img.ebookImg {
    max-width: 200px !important;
    max-height: 200px !important;
    width: auto !important;
    height: auto !important;
}

@media screen and (max-width: 1200px) {
    .indx-top #topDiv blockquote { color: #444; font-size: small; line-height: 2em; width: 300px; }
    .menuImgSection img {width:150px;height:150px;padding-top:5px}
    .menuImgSection img.ebookImg {
        max-width: 150px !important;
        max-height: 150px !important;
        width: auto !important;
        height: auto !important;
    }
}

@media screen and (max-width: 990px) {
    .indx-top #topDiv blockquote { color: #444; font-size: small; line-height: 2em; width: 100%; }    
}

@media screen and (max-width: 768px) {
    .indx-top #rightArea {margin-top: 10px}
}

/* Contact */
.contact {margin-top: 200px}
.contact #alex {width:120%}
.contact ul {list-style: none}
.contact ul li {font-size: 13px}
.contact ul li a:hover {text-decoration:none}
.contact #sites {color:darkgreen}

/* Basics */
ul.picList { list-style: none }
ul.picList li div {position:relative;}
ul.picList li .comment { vertical-align: top; margin-top: 15px; margin-left: 12px; width: 70%}

/* Ads */
#PsAxiLlNfvd {
width:100%;
display: none;
margin-top:15px;
margin-bottom: 15px;
padding: 20px 10px;
color: darkgreen;
text-align: center;
font-weight: bold;
background: #fff;
border: solid 1px red;
border-radius:5px;
}