/*@import url(https://fonts.googleapis.com/earlyaccess/cwtexyen.css);*/
@import url(//fonts.googleapis.com/earlyaccess/notosanstc.css);

/*media queries http://bootstrap.hexschool.com/docs/4.2/layout/overview/ */

body { 
        font-family: 'Noto Sans TC', sans-serif;
        background-color :#FFFFFF ;
    }

@media screen and (max-width: 990px) {
    body { padding-top: 0px;
    background-color: #FFFFFF   !important;
    }
}

@media  screen and (min-width: 991px) {
    body { padding-top: 0px;
    background-color:#FFFFFF  !important;
    }
}

img {
    border-radius: 10px;
}

.tank-essaylogo {
    width: 70%;
    display: block;
    margin: auto;
    border-style: solid;
    border-color:green;
}

/* ----- same as custom ---- */
.cus-link-underline-large:link {
    text-decoration: underline;
}
.cus-link-underline-large:hover {
    font-size:101%;
    color :orange ;
}

/* ----- End - same as custom ---- */

/*  Head Bar   */
    .cus-headbar-link:link {
    text-decoration: underline;
    color :white  ;
    }
    .cus-headbar-link:visited {
    color :lightgreen ;
    }
    .cus-headbar-link:hover {
    font-size:101%;
    color :lightgreen ;
   }

.popover-header {
    background-color: blue;
    color: white;
}

.popover-body {
    background-color: white;
    color: blue;
    font-size: 150%;
}

/* ----- elements ------ */
    img.displayed {                /* img 自動調整寬度大小,但不超過原尺寸   */
        display: block;
        margin-left: auto;
        margin-right: auto }

    input[type=checkbox] {
        height: 22px;
        width: 22px;
        vertical-align: middle;
        -ms-transform: scale(1.5);  IE 9 
        -webkit-transform: scale(1.5);  Chrome, Safari, Opera 
        transform: scale(1.5);            
    }

    input[type=radio] {
        height: 22px;
        width: 22px;
        vertical-align: middle;
        -ms-transform: scale(1.5);  IE 9 
        -webkit-transform: scale(1.5);  Chrome, Safari, Opera 
        transform: scale(1.5);            
    }
/* ----- End - elements ---- */

/* Position */
.tank-content {
    margin-top:20px;
    margin-left:30px;
    margin-right:30px;
}

.tank-fiexd-header{
  background:#996600; /*背景顏色*/
  color:#FFFFFF; /*文字顏色*/
  font-size :120%;
  text-align: center;
  border-top:2px solid #fff; /*上方邊框*/
  border-bottom:5px solid #fff; /*下方邊框*/
  width:100%; /*寬度*/
  position:fixed; /*固定位置定位*/
  top:0; /*距離上方 0 像素*/
  z-index:1; /*重疊時會在其他元素之上*/
}

.tank-box {
    margin: 20px;
    padding: 20px;
    border-style: solid;
    border-color: green;
    /*border-width: 2px;*/
    border-width: 2px 3px 2px 5px;
    border-radius: 10% 6% 10% 5% / 5% 20% 7% 10%;
    /*  border-radius: 90% 6% 93% 5% / 5% 94% 7% 95%;
    transform: rotate(2deg);*/
    font-size :22px;
}

.tank-ink-box {
    color: black;
    background: #eee;
    border: solid black 1px;
    margin-left: 30px;
    margin-right: 30px;
    padding: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    /* 紙風格 */
    border-width: 2px 3px 2px 5px;
    border-radius: 90% 6% 93% 5% / 5% 94% 7% 95%;
    /*font-family: 'Caveat';*/
    transform: rotate(2deg);
}

.tank-ink-box-double {
    border: dashed black 2px;
}

.tank-box-inner {
    /* 將傾斜的部分修正 */
    transform: rotate(-2deg);
}

.tank-source {
    font-size :90% ;
    color:green;
    text-align :center;
}
/* ----學習任務---- */
.tank-task-label {                  
    border:none; font-size: 120% ;background-color:#ffe6b3 ;
}
.tank-task-img {                    /* 老師和學生的圖形 */
    width:60px; height:60px;
}

.tank-table-img {                    /* 老師和學生的圖形 */
    width:80px; height:80px;
}
/* ----End 學習任務---- */


/* ----參考答案---- */
    #tankAnswer {
        border:solid; width :100% ;margin-left: auto; margin-right: auto;
    }
    #tankAnswer thead {
        border:solid;border-width:thin ; background-color :azure ;color:gray ;
    }
    #tankAnswer th, #tankAnswer td {
         border:solid;border-width:thin ; color:gray ;
    }
/* ----End 參考答案---- */

.tank-center {
    position: relative;          /* where the next element will be automatically positioned */
    display: inline-block;       /* causes element width to shrink to fit content */
    left: 50%;                   /* moves left side of image/element to center of parent element */
    transform: translate(-50%);  /* centers image/element on "left: 50%" position */
}
.tank-right {
    position: relative;          /* where the next element will be automatically positioned */
    display: inline-block;       /* causes element width to shrink to fit content */
    left: 100%;                   /* moves left side of image/element to center of parent element */
    transform: translate(-50%);  /* centers image/element on "left: 50%" position */
}     
.tank-center-orange {
    text-align: center;
    color : orange;
}

.tank-title {
    /*border:solid  ;
    border-color :gray ;*/
    background-color :#996600  ;
    border-width :0px;
    text-align: center;
    font-size :120%;
    color : white;
}
.tank-block{
    margin: auto;
    width: 90%;
    padding:20px;
    border-style: solid;
    border-color: green; 
    border-width: 2px;
}
.tank-question {
    margin:40px ;
    padding:20px;
    background-color :lightblue ;
}
.tank-answer {
    color :white;
    background-color :blue ;
    font-size :xx-large ;
}