html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {margin:0; padding:0; border:0; font-size:100%; font:inherit;}
html, body {height:100%;}
body {line-height:1; background:#000 url('bg.jpg') fixed;background-size:100% 100%;}
table {border-collapse:collapse; border-spacing:0;}
body {-webkit-text-size-adjust:none;}
b {font-weight:bold;}
p, div, span, li, td, th, h1, h2, h3, h4, h5, h6 {font:normal 16px 'Microsoft YaHei'; color:#ddd;text-shadow:1px 1px #000;}
h1, h2, h3, h4, h5, h6{font-weight:bold;padding-top:1rem;padding-bottom:.5rem;}
a{text-decoration:none;color:#ff0;transition:all 0.3s ease-in-out;}
a:hover{text-decoration:underline;color:#0ff;cursor:pointer;transition:all 0.3s ease-in-out;}
a:active{color:#f0f;}
label:hover {cursor:pointer; color:blue;}
h1 {font-size:42px;text-align:center;line-height:42px;color:#fff;}
h2 {font-size:32px;text-align:center;line-height:32px;color:#fff;}
h3 {font-size:24px;line-height:2rem;color:#eee;}
h4 {font-size:22px;line-height:22px;color:#eee;}
h5 {font-size:20px;line-height:20px;color:#eee;}
h6 {font-size:18px;line-height:18px;color:#eee;}
::selection { background:#35a; color:#fff; text-shadow:1px 1px #000;}
ol, ul {margin-left:28px;} ol li, ul li {padding-top:5px;padding-bottom:5px;}

#Logo {top:5px; right:20px; width:114px; height:60px; position:absolute; margin-top:5px; margin-left:20px; background:url(../images/ASRock.cn.png) no-repeat; background-size:114px 60px; z-index:10; transition:all 0.3s ease-in-out;}
#Logo:hover {background:url(../images/ASRockOn.cn.png) no-repeat; background-size:114px 60px; transition:all 0.3s ease-in-out;}
#Demon {top:5px; left:20px; width:150px; height:60px; position:absolute; background:url(../images/demon-logo.png) no-repeat; background-size:150px 60px; z-index:10; transition:all 0.3s ease-in-out;}
#Demon:hover {background:url(../images/demon-logoOn.png) no-repeat; background-size:150px 60px;transition:all 0.3s ease-in-out;}

.NewWin {padding-right:16px;background:url(newwin.png) no-repeat right center; transition:all 0.3s ease-in-out;}
.NewWin:hover {background:url(newwinon.png) no-repeat right center;transition:all 0.3s ease-in-out;}

.DescPic {border:1px solid #000;position:absolute;display:none;box-shadow:0 0 5px 2px rgba(0,0,0,0.5);z-index:999;}

.DispArea {width:55%;margin:20px auto;padding:20px;border:1px solid #333; border-radius:10px; background:#eee; background:rgba(0,0,0,0.8);box-shadow:0 0 5px 2px rgba(0,0,0,0.5);}
.DispAlert {width:600px; margin:20% auto 0; padding:20px; color:#fff; font-weight:bold; font-size:24px;text-shadow:1px 1px #000, 1px 1px 5px #000; border:1px solid #000; border-radius:10px; box-shadow:0 0 5px 2px rgba(0,0,0,0.5);text-align:center;background: linear-gradient(to bottom, rgba(235,241,246,1) 0%,rgba(171,211,238,1) 50%,rgba(137,195,235,1) 51%,rgba(213,235,251,1) 100%);}
@media screen and (max-width:1280px) { .DispArea {width:80%;margin-top:80px;} }
@media screen and (max-width:480px) { .DispArea {padding:10px;width:90%;} }

#Teams + label {color:#ff0;transition:all 0.3s ease-in-out;}
#Teams + label:hover {color:#0ff;transition:all 0.3s ease-in-out;}

.TableList {width:99.6%; margin:2px auto; background:rgb(0, 0, 0, 0.8); border:1px solid #aaa;}
.TableList th, .TableList td {border:1px solid #666; color:#ddd; padding:4px 5px; font:normal 14px 'Microsoft YaHei UI'; text-shadow:1px 1px #222;}
.TableList th {text-align:center;background:#333;padding:1px 2px;}
.TableList tr {transition: all .2s linear;}
.TableList tr:nth-child(odd){background:rgb(10, 10, 10);}
.TableList tr:hover {background:rgb(30, 30, 30); transition: all .01s linear;}
.TableList tr:nth-child(odd):hover {background:rgb(40, 40, 40); transition: all .01s linear;}
.TableList th a, .TableList td a{color:#ff0;}
.TableList th a:hover, .TableList td a:hover{color:#0ff;}

.AlertMsg {display:none;color:#ff0; text-shadow:1px 1px 2px #f00; font-weight:bold; font-size:16px; line-height:26px;}

input[type="button"], input[type="submit"] {font:normal 13px 'Microsoft YaHei UI'; border-radius:15px; padding:5px; text-align:center; text-shadow:1px 0 #fff, 0 1px #fff, 0 -1px #fff, -1px 0 #fff; border:1px solid #666; color:#000; background: linear-gradient(to bottom, #bde 0%,#7cf 50%,#2be 51%,#bde 100%);transition: all .1s ease-in-out;}
input[type="button"]:hover, input[type="submit"]:hover {cursor:pointer; border:1px solid #555; color:#00f; background: linear-gradient(to bottom, #b7deed 0%,#71ceef 50%,#21b4e2 51%,#b7deed 100%);filter:drop-shadow(0 0 8px #fff);transition: all .3s ease-in-out;}
input[type="button"]:active, input[type="submit"]:active {background:#fff; color:#00f; text-shadow:1px 1px #eef; transition: all 0.1s ease-in-out;}
input[type="button"]:disabled {cursor:default; background: linear-gradient(to bottom, rgba(238,238,238,1) 0%,rgba(204,204,204,1) 100%); color:#888;}
input[type="text"], input[type="number"], input[type="tel"], input[type="password"], textarea, select {font:normal 14px 'Microsoft YaHei UI'; border-radius:6px; padding:4px 8px; text-align:left; text-shadow:1px 1px #fff; border:1px solid #888; color:#00c; background:#fff; outline: none;}
input[type="text"]:hover, input[type="number"]:hover, input[type="tel"]:hover, input[type="password"]:hover, textarea:hover, select:hover {background:#eff; border:1px solid #333; outline: none;}
input::selection { background:#35a; color:#fff; text-shadow:1px 1px #000;}

.clear {clear:both;}

.transhover {filter:alpha(opacity=50);-moz-opacity:0.5;opacity: 0.5;}

.inputGroup{position:relative;}
.inputGroup input[type="radio"] {display:none;}
.inputGroup input[type="radio"] + label {display: inline-block; font:normal 13px 'Microsoft YaHei UI'; border-radius:15px; padding:2px 10px 2px 25px; text-align:center; text-shadow:1px 1px #fff; border:1px solid #666; background:#fff; color:#000; transition: all .3s ease-in-out; box-shadow:1px 1px 1px rgba(0, 0, 0, 0.3);}
.inputGroup input[type="radio"] + label:hover {color:#f00;}
.inputGroup input[type="radio"]:checked + label {color:#00f;background:linear-gradient(to bottom, rgba(246,248,249,1) 0%,rgba(229,235,238,1) 50%,rgba(215,222,227,1) 51%,rgba(245,247,249,1) 100%);}
.inputGroup input[type="radio"]:checked + label .checkmark {border:6px solid #29f;}
.inputGroup .checkmark {position: absolute; top:3px;left:3px; height:6px; width:6px; background:#eee; border:6px solid #ccc; border-radius: 50%;}

.ok {margin:0 auto;width:16px;height:16px;background:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAACXBIWXMAAAsSAAALEgHS3X78AAADK0lEQVR4nGWTf0jUBxiH3/s2f9xdxCrPH9cttXVXl8KUIncN9MpJJmzOXHBDBgOXO4RqC9sV02xLtLY62+V5+StoY2hnNzFnSxluNucc05vO8/QQ+mONDYZiwhph6bM/ysPqhQ+88L7P8/71CiDLUcXIKsUsOfEl633plSm3rU7Lwq4zO+ZMZUlDmuzICsUsG1buA7IS1uvtui5bewFVo+U4AzU0TtVRF3Ry9vePOXqrFMvZ7TPRWRH2ZwSqGNFvO2GcdAy+z6XJz2kJeVaknubH/flANW9+9dqSJjPqVFigipFVeruuyzF45CnQEwZbQh7cY7V80l+OK3iOvMZXHypbpBAQUcySY2svCF9uDnloDtVzadKFO1hLXdCJO1DLyF+/cO/Bv3Tf6eT0bx+R9K5hWkSiJb5kve/0aHkYbpy6yIWJT6kZq6TSf5wK/4e0Bb5kub75o4OGqYvkf5GLKk4OSHplyu3z49W0hDw0TdXhDNRw0u/gyNB7lPz0NseHPuC/B/cAGJ0dwR2spSXk4XBfCUqyuMTqtCwU9u3DM3mBc79Wc3m4kfKBY9h+yKegJ5fA3+MAhO5OcmL4KJ+NV3HS78D2/esoW+Wm7DqzY+4F71rSOo00hdwsLi1y9/4cZbcO4RlxATB7f4ai/kKK+veT0/MKBu/z5N2wohilT0xlSUMvdW5G16rG5NMz+M8AAH/O32FxaRGAov79bPSuI7ZNg65Vja5VTe5VKyq9NIkmO7JiX1dWeJB8TcfPjyUAl6cbwrPlbPYlkFGVviBRUiyKWTbsrEmbMXdsRNeqJrbtkWRs1s/43Cibvo4h3qsh7qqG2LZHgrzrVrQvqydExCCARGdF2HOv7F560RdHgldLYscatnbHkNajJ/XbODZdX4vh2moS2rVkd1sw2pPnJUoOPvELmsyoUzkNmQ/39Owk5UYclr5E9g6msvtHE2m9CWT0buGt3ny2HTbOq1ZLtYionxAAopil0FiaOG1rf4NDA8U4xuwcGy7F/t075NXvWVi3d82ESisHl+FnBICISLRikAPPpYorMkNuRmyXPsUkTSqtFIuI4en9/wHohk+i8uoGjgAAAABJRU5ErkJggg==');}
.no {margin:0 auto;width:16px;height:16px;background:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAACXBIWXMAAAsSAAALEgHS3X78AAADLElEQVR4nGWTf0jcdRjHn3G79Hs6cvPm0JljoMuziMKb6QzvnImiNJ1rFLnCYbrjIOtgJS2HVqa3CXdLxcP9oDpxp3eaONmaErdcJkZ66dQ7D8E/GiwYDhP6Mdz01R/ipe0Db/jA836/ng8fnkcA2ZCotSrR6HJ3JVf2pmTXLmQU21b0BdalfWmnx9QxOWdFo9u72Q/I5nCcNsU0cNTsoaZ1ksYrM7S65rA5/Xzafgfz57dJLTi3uD3aYHoCIGptXOKhjwMfWEf58moAhzsYUps7iKN7/f7F5Rleq+hcC9udVRcCiFqr0qaYBt63jm4JOjYFHe4gducUNfZhmr7282rpxceiPHtsHaDR5R41e/7r3B2krTtIc2cAe4cfm9OP3TnDz3fu8effj+i/dZdPWn4l/oV350UkXHYlV/bWtEyGwi2uOc5/NUutY4rqCz4+svno6J9h4/R5f6Pl6hz5J52Ies9xScmuXWi4PI3DHaS1a47GKzNU232c+myME2d+wnJujL/+eQTAhP8B9g4/DneQylovEr6/WTKKbSv5Zi8XOgM0tP9Cu2ucD5tGKKr6gbxTg0zP/Q5AYOEPLOfHqb84TbXdx5GqW4gm+aboC6xLOzPdJBb209oVZHV1jaXlh7xXf5tm5wQAi0sPKbEMU2IZJvOdQaIOuTGevIEoSV7Zl3Z6LLGwH0XvIi6nl5GJ+wDcvbfM6uoaACWWYXa+4kY52IWid6HoXRjf7kaeirsk6pics4aygVBBa+hhxHc/9GntnvlQbUOx2b28lFe/ItvCykU0ur0v5jUuJuT2rRsOdqE19OALPGAyuITW+C1KuhslrTv0AmPZNRRt+qyIxAsg26MNpuzSb9b2GHuJSHezw9BHdP51YosGiSn8jqjD14jM7EGT4SGj9Dr7U03Lsi2sYssuhO3Oqst6o/1x2olBYgpukPCml+cqRkkq+5HY4iEOvD7EkaohktKrlkUV2SAiyhYAIKLRHUvQm+eLzB7K60YwNU1hto5TduZ7Dr/VtrLjmbxZUUVUbISfAKzPtoRLWPxxiXy+WaJevilPp3pFOXBJVBHlIhL/f/+/5Ahc2j2dNvoAAAAASUVORK5CYII=');}

.producttype {width:26%;float:left;margin-left:5%;padding-bottom:2rem;}
.producttype img {width:100%;border:5px solid transparent;opacity:0.85;transition: all .1s ease-in-out;border-radius:10px;}
.producttype img:hover {opacity:1;transition: all .3s ease-in-out;}
.producttype input[type="radio"] {display: none;}
.producttype input[type="radio"]:checked + label img {margin-top:0px;border:5px solid #ff0;opacity:1;transition: all .3s ease-in-out;}

input[type="button"].previous {width:80px;border-radius:10px;color:#fff;text-shadow:1px 1px #000;background: linear-gradient(to bottom, #4c4c4c 0%,#595959 12%,#666666 25%,#474747 39%,#2c2c2c 50%,#000000 51%,#111111 60%,#2b2b2b 76%,#1c1c1c 91%,#131313 100%);}
input[type="button"].previous:hover {color:#ff0;border-color:#ff0;filter:drop-shadow(0 0 3px #fff);}