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;}

.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 { font-style: italic}
.article .content ol {list-style: decimal-leading-zero;}
.article .content img { width: 100%; 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: 15px; margin-bottom: 30px}
.indx-top #subtitle {margin-top:-15px; 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 .gopherImg {width:110px; display: inline-block; margin-left: auto; margin-right: auto;}
.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}

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

ul.bk { list-style: none; margin-top: 15px; margin-bottom: 0 }
ul.bk li { font-size: 13px }
ul.bk li a:hover { text-decoration: none }

/* 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%}