/*滑鼠游標挪動到聯結上方，自動出現彈跳視窗.用我   99999999999999999999999999999999999999999999999999999999999*/
#pup {
    position: absolute;
    z-index: 200; /* aaaalways on top*/
/* nhpup_1.1.js中，調整x_y = this.nudge(甲, 乙);中的甲、乙數值，可調整彈跳視窗的水平or垂直位置。例如：改成 甲 = x + 160，可調整彈跳視窗的水平位置 */
/* 或藉由調整auth.css中 margin-left: 丙; 的數值，例如：將 丙=-40px 或 33px 或26px等，也可調整彈跳視窗的水平位置 */
/*同理：nhpup_1.1.js中，調整x_y = this.nudge(甲, 乙);中的甲、乙數值，可調整彈跳視窗的水平or垂直位置。例如：改成 乙 = y+22，可調整彈跳視窗的垂直位置*/
/*同理：或藉由調整auth.css中 margin-top: 丁; 的數值，例如：將 丁=16px 或 20px 或14px等，也可調整彈跳視窗的垂直位置*/
    margin-left: -40px;
    margin-top: 38px;
    width: 250px; /*改此數值不會造成網頁影像產生變化*/
    background-color: #00F; /*倘若啟動此行，則彈跳視窗之背景則會啟動本行的顏色，而不會採用background-image的bg-pup.png*/
    text-align: left; /*文字靠左對齊，若right則靠右對齊*/
    font-size: 11pt !important; /*呈現於彈跳視窗方框中字體的大小*/
    line-height: 150%; /*彈跳視窗中，文字之列與列之間的距離*/
    padding: 14px !important; /*(見下D)彈跳視窗中，文字與邊框間距。若將此值提升，則文字狀態固定，邊框會往外推，而提升文字與邊框之間的距離*/
    color: #eeeeee !important; /*彈跳視窗中，文字的顏色*/
    font-family: tahoma, verdana, arial, sans-serif !important; /*彈跳視窗中的文字字型，例如可改成Times New Roman可見變化*/
    font-weight: normal !important; /*彈跳視窗中，文字字體的粗細，例如粗體為bold*/
    border: 8px solid #333333 !important; /*(聯繫G)彈跳視窗外框的邊框粗細，以及邊框的樣式，例如：groove=呈現兩色澤的框限、dashed=虛線、solid=實線*/
    /*  https://www.w3schools.com/css/css_border.asp  */
    /*background-image: url(./bg-pup.png) !important;*/ /*彈跳視窗背景所使用的圖片，bg-pup.png為一個半透明背景的圖片，將本處開啟時若background-color也有開啟，bg-pup.png會影響background-color的色澤*/
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 22px; /*彈跳視窗四個角的圓滑度，此數值越大則四個角越圓*/
}

.pup:before{ /*底層的三角形-被遮擋後變成外框造型*/
    position: absolute;
    content: ""; /*僅留存雙引號*/
    width: 0px;
    height: 0px; /*將此值提升，三角形會變成梯形*/
    left: 77px; /*與彈跳視窗左邊的距離，必須大到不會觸碰到滑鼠游標以避免無法呈現彈跳視窗(聯繫A)*/
    /*top: 0px; 垂直位置，將此值提升會讓三角形往下掉*/
margin: -74px 0px 0px 0px; /*#pup中padding的值(見上D)+border-top(見下E)+border-bottom(見下F)*/
    border-left: 30px solid transparent; /*willy左邊的邊框線被呈現為紅色border-top: 100px solid transparent搭配border-left呈現左側平底&右側為尖之三角形、搭配border-right呈現右側平底&左側為尖之三角形*/
    border-right: 30px solid transparent; 
    border-top: 30px solid transparent; /*可將本處顏色改成#f00呈現(見上E)*/
    border-bottom: 30px solid #333333; /*(見上F)*/
/*border-left、border-right、border-top、border-bottom*/
/*(見下B)willy border-top: 30px solid transparent=上邊的邊框線存在，但設定為透明，此時下邊框線(border-bottom)也是存在並為透明、border-bottom=無上邊的邊框線(border-top)，僅呈現下邊框線(border-bottom)*/
/*border-right: 30px solid #0f0;*/ /*willy右邊的邊框線被呈現為綠色(可練習將此部分開啟)*/
}


.pup:after{ /*頂層的三角形-拿來遮擋底層三角形*/
    position: absolute;
    content: "";
    width: 0px;
    height: 0px;
    left: 85px; /*77(聯繫A)+8(聯繫G)*/
    /*top: 50px;*/ /*註銷此處，改成margin*/
margin: -166px 0px 0px 0px; 
/*  border-radius: 70px 0 0 0;*/ /*將此打開可讓上邊變弧形*/
    border-left: 22px solid transparent; /*willy左邊的邊框線被呈現為紅色border-top: 100px solid transparent搭配border-left呈現左側平底&右側為尖之三角形、搭配border-right呈現右側平底&左側為尖之三角形*/
    border-right: 22px solid transparent; 
    border-top: 22px solid transparent; /*可將本處顏色改成#f00呈現(見上E)*/
    border-bottom: 22px solid #00F; /*(見上F)*/
/*    border-image: url(./bg-pup.png) !important;*/
}


#jump_out_pup_willy:hover {
    text-decoration: underline;
}

/*滑鼠游標挪動到聯結上方，自動出現彈跳視窗.用我   666666666666666666666666666666666666666666666666666666666666*/




/*滑鼠游標挪動到聯結上方，自動出現彈跳視窗.用我   99999999999999999999999999999999999999999999999999999999999*/
#pup_willyup {
    position: absolute;
    z-index: 200; /* aaaalways on top*/
    margin-left: -280px;
    margin-top: -210px;
    width: 250px;
    /*background-color: #777;*/
    text-align: left;
    font-size: 11pt !important;
    line-height: 150%;
    padding: 14px !important;
    color: #eeeeee !important;
    font-family: tahoma, verdana, arial, sans-serif !important;
    font-weight: normal !important;
    border: 11px groove #333333 !important;
    /*  https://www.w3schools.com/css/css_border.asp  */
    background-image: url(./bg-pup.png) !important;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 22px;
}

#jump_out_pup_willy_willyup:hover {
    text-decoration: underline;
}

/*滑鼠游標挪動到聯結上方，自動出現彈跳視窗.用我   666666666666666666666666666666666666666666666666666666666666*/