qhdcontent.css 25 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941
  1. /****************************************************************
  2. * *
  3. * 代码库 *
  4. * www.dmaku.com *
  5. * 努力创建完善、持续更新插件以及模板 *
  6. * *
  7. ****************************************************************/
  8. /* ------------------------------------------------------------------------------------------------
  9. *
  10. * 1、update:增加了模块的多列布局 qhd-module - 2013-02-28
  11. *
  12. * 2、update:增加了button对IE6的支持(gif) 2013-03-04
  13. *
  14. ------------------------------------------------------------------------------------------------*/
  15. /*-------------------------------------
  16. Content typography
  17. -------------------------------------*/
  18. .qhd-content h1, .qhd-content h2, .qhd-content h3, .qhd-content h4, .qhd-content h5, .qhd-content h6 {
  19. font-weight: bold;
  20. }
  21. .qhd-content h1 {
  22. font-size: 34px;
  23. line-height: 1.3em;
  24. margin-bottom: 5px;
  25. }
  26. .qhd-content h2 {
  27. font-size: 30px;
  28. line-height: 1.2em;
  29. margin-bottom: 10px;
  30. }
  31. .qhd-content h3 {
  32. font-size: 26px;
  33. line-height: 1.6em;
  34. margin-bottom: 10px;
  35. }
  36. .qhd-content h4 {
  37. font-size: 22px;
  38. line-height: 1.25em;
  39. margin-bottom: 15px;
  40. }
  41. .qhd-content h5 {
  42. font-size: 18px;
  43. line-height: 1.6em;
  44. margin-bottom: 10px;
  45. }
  46. .qhd-content h6 {
  47. font-size: 14px;
  48. line-height: 1.5em;
  49. margin-bottom: 10px;
  50. }
  51. .qhd-content p {
  52. line-height: 160%;
  53. margin-bottom: 15px;
  54. }
  55. .qhd-content blockquote {
  56. background: url("../images/quote.png") no-repeat 0 top;
  57. display: block;
  58. font-family: Georgia, "Times New Roman", Times, serif;
  59. padding: 10px 20px 10px 45px;
  60. color: #666;
  61. line-height: 160%;
  62. margin-bottom: 15px;
  63. } /* 引用 */
  64. .qhd-content blockquote em {
  65. color: #999;
  66. text-align: right;
  67. display: block;
  68. }
  69. .dropcap {
  70. float: left;
  71. padding: 10px 10px 5px 0;
  72. font-weight: bold;
  73. } /* 首字下沉 */
  74. .qhd-content hr {
  75. border: 1px solid #ddd;
  76. border-width: 0 0 1px 0;
  77. height: 1px;
  78. font-size: 0;
  79. margin: 25px 0;
  80. *margin:18px 0;
  81. clear: both;
  82. }
  83. .qhd-content .br {
  84. font-size: 0;
  85. }
  86. /* typo */
  87. .qhd-content .typo:before, .qhd-content .typo:after {
  88. content: ".";
  89. display: block;
  90. height: 0;
  91. visibility: hidden;
  92. }
  93. .qhd-content .typo:after {
  94. clear: both;
  95. }
  96. .qhd-content .typo {
  97. #zoom:1;
  98. }
  99. .qhd-content .typo .typo_text {
  100. overflow: hidden;
  101. #zoom:1;
  102. }
  103. .qhd-content .typo .typo_img {
  104. float: left;
  105. margin-right: 20px;
  106. margin-bottom: 12px;
  107. }
  108. .qhd-content .typo .typo_img img {
  109. display: block;
  110. }
  111. .qhd-content .typo .imgtoright {
  112. float: right;
  113. margin-left: 20px;
  114. margin-right: 0;
  115. }
  116. /*-------------------------------------
  117. List
  118. -------------------------------------*/
  119. .qhd-content li ul, .qhd-content li ol {
  120. margin: 0;
  121. }
  122. .qhd-content ul, .qhd-content ol {
  123. margin: 0 0 15px 0;
  124. padding-left: 1.5em;
  125. line-height: 180%;
  126. }
  127. .qhd-content ul {
  128. list-style-type: disc;
  129. }
  130. .qhd-content ul.square {
  131. list-style: square;
  132. }
  133. .qhd-content ul.circle {
  134. list-style: circle;
  135. }
  136. .qhd-content ol {
  137. list-style-type: decimal;
  138. padding-left: 2.2em;
  139. }
  140. .qhd-content dl {
  141. margin: 0 0 1.5em 0;
  142. }
  143. .qhd-content dl dt {
  144. font-weight: bold;
  145. }
  146. .qhd-content dd {
  147. margin-left: 1.5em;
  148. }
  149. /*------------No Icon List --------------*/
  150. .qhd-content ul.noicon {
  151. padding: 0;
  152. margin: 0;
  153. line-height: 180%;
  154. }
  155. .qhd-content ul.noicon li {
  156. list-style: none;
  157. padding: 2px 0 2px;
  158. _height: 100%;
  159. }
  160. /*------------Icon List--------------*/
  161. .qhd-content ul.iconlist {
  162. padding-left: 0;
  163. line-height: 180%;
  164. }
  165. .qhd-content ul.iconlist li {
  166. list-style: none;
  167. background-repeat: no-repeat;
  168. background-position: 0 3px;
  169. padding: 2px 0 2px 20px;
  170. _height: 100%;
  171. }
  172. .qhd-content ul.iconlist-download li, .qhd-content ul.iconlist li.iconlist-download {
  173. background-image: url(../images/download.gif);
  174. }
  175. .qhd-content ul.iconlist-arrow li, .qhd-content ul.iconlist li.iconlist-arrow {
  176. background-image: url(../images/arrow.gif);
  177. }
  178. .qhd-content ul.iconlist-check li, .qhd-content ul.iconlist li.iconlist-check {
  179. background-image: url(../images/check.gif);
  180. }
  181. .qhd-content ul.iconlist-favicon li, .qhd-content ul.iconlist li.iconlist-favicon {
  182. background-image: url(../images/favicon.gif);
  183. }
  184. .qhd-content ul.iconlist-del li, .qhd-content ul.iconlist li.iconlist-del {
  185. background-image: url(../images/del.gif);
  186. }
  187. .qhd-content ul.iconlist-light li, .qhd-content ul.iconlist li.iconlist-light {
  188. background-image: url(../images/light.gif);
  189. }
  190. .qhd-content ul.iconlist-pen li, .qhd-content ul.iconlist li.iconlist-pen {
  191. background-image: url(../images/pen.gif);
  192. }
  193. .qhd-content ul.iconlist-dot li, .qhd-content ul.iconlist li.iconlist-dot {
  194. background-image: url(../images/dot.gif);
  195. }
  196. .qhd-content ul.iconlist-delta li, .qhd-content ul.iconlist li.iconlist-delta {
  197. background-image: url(../images/delta.gif);
  198. }
  199. .qhd-content ul.iconlist-time li, .qhd-content ul.iconlist li.iconlist-time {
  200. background-image: url(../images/time.png);
  201. }
  202. /*-------------------------------------
  203. Columns - qhd-content & qhd-module
  204. -------------------------------------*/
  205. .qhd-content .column:after, .qhd-module .column:after {
  206. clear: both;
  207. content: ".";
  208. display: block;
  209. font-size: 0;
  210. height: 0;
  211. line-height: 0;
  212. min-height: 0;
  213. visibility: hidden;
  214. *zoom:1;
  215. }
  216. .qhd-content .column, .qhd-module .column {
  217. width: 100%;
  218. }
  219. .qhd-content .column .col-2-1, .qhd-content .column .col-3-1, .qhd-content .column .col-4-1, .qhd-content .column .col-4-2, .qhd-content .column .col-5-1, .qhd-content .column .col-3-2, .qhd-content .column .col-4-3, .qhd-content .column .col-5-2, .qhd-content .column .col-5-3, .qhd-content .column .col-5-4, .qhd-module .column .col-2-1, .qhd-module .column .col-3-1, .qhd-module .column .col-4-1, .qhd-module .column .col-4-2, .qhd-module .column .col-5-1, .qhd-module .column .col-3-2, .qhd-module .column .col-4-3, .qhd-module .column .col-5-2, .qhd-module .column .col-5-3, .qhd-module .column .col-5-4 {
  220. float: left;
  221. min-height: 1px;
  222. height: auto !important;
  223. _height: 1px;
  224. }
  225. /* default marg-per3 margin right 3% */
  226. .qhd-content .column .col-2-1, .qhd-module .column .col-2-1 {
  227. width: 48.5%;
  228. margin-right: 3%;
  229. }
  230. .qhd-content .column .col-3-1, .qhd-module .column .col-3-1 {
  231. width: 31.3333%;
  232. margin-right: 3%;
  233. }
  234. .qhd-content .column .col-4-1, .qhd-module .column .col-4-1 {
  235. width: 22.75%;
  236. margin-right: 3%;
  237. }
  238. .qhd-content .column .col-5-1, .qhd-module .column .col-5-1 {
  239. width: 17.6%;
  240. margin-right: 3%;
  241. }
  242. .qhd-content .column .col-3-2, .qhd-module .column .col-3-2 {
  243. width: 65.6666%;
  244. margin-right: 3%;
  245. }
  246. .qhd-content .column .col-4-2, .qhd-module .column .col-4-2 {
  247. width: 48.5%;
  248. margin-right: 3%;
  249. }
  250. .qhd-content .column .col-4-3, .qhd-module .column .col-4-3 {
  251. width: 74.25%;
  252. margin-right: 3%;
  253. }
  254. .qhd-content .column .col-5-2, .qhd-module .column .col-5-2 {
  255. width: 38.2%;
  256. margin-right: 3%;
  257. }
  258. .qhd-content .column .col-5-3, .qhd-module .column .col-5-3 {
  259. width: 58.8%;
  260. margin-right: 3%;
  261. }
  262. .qhd-content .column .col-5-4, .qhd-module .column .col-5-4 {
  263. width: 79.4%;
  264. margin-right: 3%;
  265. }
  266. /*margin right 0%*/
  267. .qhd-content .marg-per0 > .col-2-1, .qhd-module .marg-per0 > .col-2-1 {
  268. width: 50%;
  269. margin-right: 0;
  270. }
  271. .qhd-content .marg-per0 > .col-3-1, .qhd-module .marg-per0 > .col-3-1 {
  272. width: 33.3333%;
  273. margin-right: 0;
  274. }
  275. .qhd-content .marg-per0 > .col-4-1, .qhd-module .marg-per0 > .col-4-1 {
  276. width: 25%;
  277. margin-right: 0;
  278. }
  279. .qhd-content .marg-per0 > .col-5-1, .qhd-module .marg-per0 > .col-5-1 {
  280. width: 20%;
  281. margin-right: 0;
  282. }
  283. .qhd-content .marg-per0 > .col-3-2, .qhd-module .marg-per0 > .col-3-2 {
  284. width: 66.6666%;
  285. margin-right: 0;
  286. }
  287. .qhd-content .marg-per0 > .col-4-2, .qhd-module .marg-per0 > .col-4-2 {
  288. width: 50%;
  289. margin-right: 0;
  290. }
  291. .qhd-content .marg-per0 > .col-4-3, .qhd-module .marg-per0 > .col-4-3 {
  292. width: 75%;
  293. margin-right: 0;
  294. }
  295. .qhd-content .marg-per0 > .col-5-2, .qhd-module .marg-per0 > .col-5-2 {
  296. width: 40%;
  297. margin-right: 0;
  298. }
  299. .qhd-content .marg-per0 > .col-5-3, .qhd-module .marg-per0 > .col-5-3 {
  300. width: 60%;
  301. margin-right: 0;
  302. }
  303. .qhd-content .marg-per0 > .col-5-4, .qhd-module .marg-per0 > .col-5-4 {
  304. width: 80%;
  305. margin-right: 0;
  306. }
  307. /*margin right 2%*/
  308. .qhd-content .marg-per2 > .col-2-1, .qhd-module .marg-per2 > .col-2-1 {
  309. width: 49%;
  310. margin-right: 2%;
  311. }
  312. .qhd-content .marg-per2 > .col-3-1, .qhd-module .marg-per2 > .col-3-1 {
  313. width: 32%;
  314. margin-right: 2%;
  315. }
  316. .qhd-content .marg-per2 > .col-4-1, .qhd-module .marg-per2 > .col-4-1 {
  317. width: 23.5%;
  318. margin-right: 2%;
  319. }
  320. .qhd-content .marg-per2 > .col-5-1, .qhd-module .marg-per2 > .col-5-1 {
  321. width: 18.4%;
  322. margin-right: 2%;
  323. }
  324. .qhd-content .marg-per2 > .col-3-2, .qhd-module .marg-per2 > .col-3-2 {
  325. width: 66%;
  326. margin-right: 2%;
  327. }
  328. .qhd-content .marg-per2 > .col-4-2, .qhd-module .marg-per2 > .col-4-2 {
  329. width: 49%;
  330. margin-right: 2%;
  331. }
  332. .qhd-content .marg-per2 > .col-4-3, .qhd-module .marg-per2 > .col-4-3 {
  333. width: 74.5%;
  334. margin-right: 2%;
  335. }
  336. .qhd-content .marg-per2 > .col-5-2, .qhd-module .marg-per2 > .col-5-2 {
  337. width: 38.8%;
  338. margin-right: 2%;
  339. }
  340. .qhd-content .marg-per2 > .col-5-3, .qhd-module .marg-per2 > .col-5-3 {
  341. width: 59.2%;
  342. margin-right: 2%;
  343. }
  344. .qhd-content .marg-per2 > .col-5-4, .qhd-module .marg-per2 > .col-5-4 {
  345. width: 79.6%;
  346. margin-right: 2%;
  347. }
  348. /*margin right 4%*/
  349. .qhd-content .marg-per4 > .col-2-1, .qhd-module .marg-per4 > .col-2-1 {
  350. width: 48%;
  351. margin-right: 4%;
  352. }
  353. .qhd-content .marg-per4 > .col-3-1, .qhd-module .marg-per4 > .col-3-1 {
  354. width: 30.6667%;
  355. margin-right: 4%;
  356. }
  357. .qhd-content .marg-per4 > .col-4-1, .qhd-module .marg-per4 > .col-4-1 {
  358. width: 22%;
  359. margin-right: 4%;
  360. }
  361. .qhd-content .marg-per4 > .col-5-1, .qhd-module .marg-per4 > .col-5-1 {
  362. width: 16.8%;
  363. margin-right: 4%;
  364. }
  365. .qhd-content .marg-per4 > .col-3-2, .qhd-module .marg-per4 > .col-3-2 {
  366. width: 65.3333%;
  367. margin-right: 4%;
  368. }
  369. .qhd-content .marg-per4 > .col-4-2, .qhd-module .marg-per4 > .col-4-2 {
  370. width: 48%;
  371. margin-right: 4%;
  372. }
  373. .qhd-content .marg-per4 > .col-4-3, .qhd-module .marg-per4 > .col-4-3 {
  374. width: 74%;
  375. margin-right: 4%;
  376. }
  377. .qhd-content .marg-per4 > .col-5-2, .qhd-module .marg-per4 > .col-5-2 {
  378. width: 37.6%;
  379. margin-right: 4%;
  380. }
  381. .qhd-content .marg-per4 > .col-5-3, .qhd-module .marg-per4 > .col-5-3 {
  382. width: 58.4%;
  383. margin-right: 4%;
  384. }
  385. .qhd-content .marg-per4 > .col-5-4, .qhd-module .marg-per4 > .col-5-4 {
  386. width: 79.2%;
  387. margin-right: 4%;
  388. }
  389. /*margin right 5%*/
  390. .qhd-content .marg-per5 > .col-2-1, .qhd-module .marg-per5 > .col-2-1 {
  391. width: 47.5%;
  392. margin-right: 5%;
  393. }
  394. .qhd-content .marg-per5 > .col-3-1, .qhd-module .marg-per5 > .col-3-1 {
  395. width: 30%;
  396. margin-right: 5%;
  397. }
  398. .qhd-content .marg-per5 > .col-4-1, .qhd-module .marg-per5 > .col-4-1 {
  399. width: 21.25%;
  400. margin-right: 5%;
  401. }
  402. .qhd-content .marg-per5 > .col-5-1, .qhd-module .marg-per5 > .col-5-1 {
  403. width: 16%;
  404. margin-right: 5%;
  405. }
  406. .qhd-content .marg-per5 > .col-3-2, .qhd-module .marg-per5 > .col-3-2 {
  407. width: 65%;
  408. margin-right: 5%;
  409. }
  410. .qhd-content .marg-per5 > .col-4-2, .qhd-module .marg-per5 > .col-4-2 {
  411. width: 47.5%;
  412. margin-right: 5%;
  413. }
  414. .qhd-content .marg-per5 > .col-4-3, .qhd-module .marg-per5 > .col-4-3 {
  415. width: 73.75%;
  416. margin-right: 5%;
  417. }
  418. .qhd-content .marg-per5 > .col-5-2, .qhd-module .marg-per5 > .col-5-2 {
  419. width: 37%;
  420. margin-right: 5%;
  421. }
  422. .qhd-content .marg-per5 > .col-5-3, .qhd-module .marg-per5 > .col-5-3 {
  423. width: 58%;
  424. margin-right: 5%;
  425. }
  426. .qhd-content .marg-per5 > .col-5-4, .qhd-module .marg-per5 > .col-5-4 {
  427. width: 79%;
  428. margin-right: 5%;
  429. }
  430. .qhd-content .column .last, .qhd-module .column .last {
  431. margin-right: 0;
  432. *float:right;
  433. *clear:right;
  434. }
  435. /*-------------------------------------
  436. 2. table
  437. -------------------------------------*/
  438. .table {
  439. border-collapse: collapse;
  440. border-spacing: 0;
  441. overflow: hidden;
  442. width: 100%;
  443. margin-bottom: 15px;
  444. }
  445. .table th {
  446. font-weight: bold;
  447. }
  448. .table th, .table td {
  449. border-top: 1px solid #DDDDDD;
  450. line-height: 18px;
  451. padding: 8px;
  452. /*text-align: left;*/
  453. vertical-align: top;
  454. }
  455. .table colgroup + thead tr:first-child th, .table colgroup + thead tr:first-child td, .table thead:first-child tr:first-child th, .table thead:first-child tr:first-child td {
  456. border-top: 0 none;
  457. }
  458. .table thead tr th, .table thead tr td {
  459. *border-top: 0 none;
  460. }
  461. .table-striped tbody tr:nth-child(2n+1) td, .table-striped tbody tr:nth-child(2n+1) th {
  462. background-color: #F9F9F9;
  463. }
  464. .table th {
  465. background: #EBEBEB;
  466. }
  467. .table-bordered {
  468. -moz-border-colors: none;
  469. border-collapse: separate;
  470. border-color: #DDDDDD #DDDDDD #DDDDDD;
  471. border-style: solid solid solid none;
  472. border-width: 1px 1px 1px 0;
  473. }
  474. .table-bordered th, .table-bordered td {
  475. border-left: 1px solid #DDDDDD;
  476. }
  477. .table-row thead th {
  478. background: #ebebeb;
  479. }
  480. .table-row tbody th {
  481. background: #f5f5f5;
  482. }
  483. .table-col {
  484. border-top-width: 0;
  485. }
  486. .table-col tbody th {
  487. background: #ebebeb;
  488. }
  489. /*-------------------------------------
  490. 3. style box
  491. -------------------------------------*/
  492. .qhd-content .box_gray, .qhd-content .box_yellow, .box_green, .qhd-content .box_blue, .box_red, .qhd-content .box_purple {
  493. border-radius: 4px;
  494. margin: 0 0 30px;
  495. padding-top: 1px;
  496. background: #F7F7F7;
  497. }
  498. .qhd-content .box_content {
  499. padding: 10px 15px;
  500. border-radius: 4px;
  501. _height: 100%;
  502. }
  503. .qhd-content .box_gray {
  504. border: 1px solid #D4D4D4;
  505. }
  506. .qhd-content .box_gray .box_content {
  507. background-color: #F8F8F8;
  508. }
  509. .qhd-content .box_yellow {
  510. border: 1px solid #FFE778;
  511. }
  512. .qhd-content .box_yellow .box_content {
  513. background-color: #FFF4C0;
  514. }
  515. .qhd-content .box_green {
  516. border: 1px solid #bbe7a0;
  517. }
  518. .qhd-content .box_green .box_content {
  519. background-color: #e0ffcd;
  520. }
  521. .qhd-content .box_blue {
  522. border: 1px solid #c7e2ff;
  523. }
  524. .qhd-content .box_blue .box_content {
  525. background-color: #dfeeff;
  526. }
  527. .qhd-content .box_red {
  528. border: 1px solid #fea7a7;
  529. }
  530. .qhd-content .box_red .box_content {
  531. background-color: #ffcfcf;
  532. }
  533. .qhd-content .box_purple {
  534. border: 1px solid #c8c3f2;
  535. }
  536. .qhd-content .box_purple .box_content {
  537. background-color: #e5e2ff;
  538. }
  539. .qhd-content .box_yellow .warningbox, .qhd-content .box_green .successbox, .qhd-content .box_blue .infobox, .qhd-content .box_red .errorbox, .qhd-content .box_purple .helpbox {
  540. padding: 10px 10px 10px 45px;
  541. line-height: 140%;
  542. }
  543. .qhd-content .box_yellow .warningbox {
  544. background: #FFF4C0 url(../images/warning_icon.gif) no-repeat 5px 3px;
  545. color: #716113;
  546. }
  547. .qhd-content .box_green .successbox {
  548. background: #e0ffcd url(../images/success_icon.gif) no-repeat 5px 3px;
  549. color: #3a6e1a;
  550. }
  551. .qhd-content .box_blue .infobox {
  552. background: #dfeeff url(../images/info_icon.gif) no-repeat 5px 3px;
  553. color: #2273cb;
  554. }
  555. .qhd-content .box_red .errorbox {
  556. background: #ffcfcf url(../images/error_icon.gif) no-repeat 5px 3px;
  557. color: #771f1f;
  558. }
  559. .qhd-content .box_purple .helpbox {
  560. background: #e5e2ff url(../images/help_icon.gif) no-repeat 5px 3px;
  561. color: #3b337f;
  562. }
  563. /*-------------------------------------
  564. buttons
  565. -------------------------------------*/
  566. .btn-medium, button.btn-medium em, .btn-small, button.btn-small em, .btn-large, button.btn-large em {
  567. border: 0 none;
  568. cursor: pointer;
  569. text-align: center;
  570. text-decoration: none;
  571. display: inline-block;
  572. }
  573. .btn-medium span, .btn-small span, .btn-large span {
  574. display: inline-block;
  575. white-space: nowrap;
  576. }
  577. .btn-medium, button.btn-medium em {
  578. font-size: 14px;
  579. padding: 0 20px 0 0;
  580. }
  581. .btn-medium span {
  582. height: 34px;
  583. line-height: 34px;
  584. padding: 0 0 0 20px;
  585. }
  586. .btn-small, button.btn-small em {
  587. font-size: 12px;
  588. padding: 0 15px 0 0;
  589. }
  590. .btn-small span {
  591. height: 25px;
  592. line-height: 23px;
  593. padding: 0 0 0 15px;
  594. }
  595. .btn-large, button.btn-large em {
  596. font-size: 18px;
  597. padding: 0 25px 0 0;
  598. }
  599. .btn-large span {
  600. font-weight: bold;
  601. height: 44px;
  602. line-height: 44px;
  603. padding: 0 0 0 25px;
  604. }
  605. .btn-medium-norm span, .btn-small-norm span, .btn-large-norm span {
  606. color: #666 !important;
  607. text-shadow: 0 1px 0 #fff;
  608. }
  609. .btn-medium-main span, .btn-small-main span, .btn-large-main span {
  610. color: #FFFFFF !important;
  611. text-shadow: 0 1px 0 #AF3131;
  612. }
  613. .btn-medium-assist span, .btn-small-assist span, .btn-large-assist span {
  614. color: #A03A17 !important;
  615. text-shadow: 0 1px 0 #FFFFFF;
  616. }
  617. .btn-medium-match span, .btn-small-match span, .btn-large-match span {
  618. color: #FFFFFF !important;
  619. text-shadow: 0 1px 0 #000;
  620. }
  621. .btn-medium:link, .btn-medium:hover, .btn-small:link, .btn-small:hover, .btn-large:link, .btn-large:hover {
  622. text-decoration: none;
  623. }
  624. /* 标准 */
  625. .btn-medium-norm, button.btn-medium-norm em {
  626. background: url("../images/btn-medium-norm.png") no-repeat right -35px;
  627. _background: url("../images/btn-medium-norm.gif") no-repeat right -35px;
  628. }
  629. .btn-medium-norm span {
  630. background: url("../images/btn-medium-norm.png") no-repeat left 0;
  631. _background: url("../images/btn-medium-norm.gif") no-repeat left 0;
  632. }
  633. .btn-small-norm, button.btn-small-norm em {
  634. background: url("../images/btn-small-norm.png") no-repeat right -25px;
  635. _background: url("../images/btn-small-norm.gif") no-repeat right -25px;
  636. }
  637. .btn-small-norm span {
  638. background: url("../images/btn-small-norm.png") no-repeat left 0;
  639. _background: url("../images/btn-small-norm.gif") no-repeat left 0;
  640. }
  641. .btn-large-norm, button.btn-large-norm em {
  642. background: url("../images/btn-large-norm.png") no-repeat right -44px;
  643. _background: url("../images/btn-large-norm.gif") no-repeat right -44px;
  644. }
  645. .btn-large-norm span {
  646. background: url("../images/btn-large-norm.png") no-repeat left 0;
  647. _background: url("../images/btn-large-norm.gif") no-repeat left 0;
  648. }
  649. /* 主要 */
  650. .btn-medium-main, button.btn-medium-main em {
  651. background: url("../images/btn-medium-main.png") no-repeat right -35px;
  652. _background: url("../images/btn-medium-main.gif") no-repeat right -35px;
  653. }
  654. .btn-medium-main span {
  655. background: url("../images/btn-medium-main.png") no-repeat left 0;
  656. _background: url("../images/btn-medium-main.gif") no-repeat left 0;
  657. }
  658. .btn-small-main, button.btn-small-main em {
  659. background: url("../images/btn-small-main.png") no-repeat right -25px;
  660. _background: url("../images/btn-small-main.gif") no-repeat right -25px;
  661. }
  662. .btn-small-main span {
  663. background: url("../images/btn-small-main.png") no-repeat left 0;
  664. _background: url("../images/btn-small-main.gif") no-repeat left 0;
  665. }
  666. .btn-large-main, button.btn-large-main em {
  667. background: url("../images/btn-large-main.png") no-repeat right -44px;
  668. _background: url("../images/btn-large-main.gif") no-repeat right -44px;
  669. }
  670. .btn-large-main span {
  671. background: url("../images/btn-large-main.png") no-repeat left 0;
  672. _background: url("../images/btn-large-main.gif") no-repeat left 0;
  673. }
  674. /* 辅助 */
  675. .btn-medium-assist, button.btn-medium-assist em {
  676. background: url("../images/btn-medium-assist.png") no-repeat right -35px;
  677. _background: url("../images/btn-medium-assist.gif") no-repeat right -35px;
  678. }
  679. .btn-medium-assist span {
  680. background: url("../images/btn-medium-assist.png") no-repeat left 0;
  681. _background: url("../images/btn-medium-assist.gif") no-repeat left 0;
  682. }
  683. .btn-small-assist, button.btn-small-assist em {
  684. background: url("../images/btn-small-assist.png") no-repeat right -25px;
  685. _background: url("../images/btn-small-assist.gif") no-repeat right -25px;
  686. }
  687. .btn-small-assist span {
  688. background: url("../images/btn-small-assist.png") no-repeat left 0;
  689. _background: url("../images/btn-small-assist.gif") no-repeat left 0;
  690. }
  691. .btn-large-assist, button.btn-large-assist em {
  692. background: url("../images/btn-large-assist.png") no-repeat right -44px;
  693. _background: url("../images/btn-large-assist.gif") no-repeat right -44px;
  694. }
  695. .btn-large-assist span {
  696. background: url("../images/btn-large-assist.png") no-repeat left 0;
  697. _background: url("../images/btn-large-assist.gif") no-repeat left 0;
  698. }
  699. /* 搭配 */
  700. .btn-medium-match, button.btn-medium-match em {
  701. background: url("../images/btn-medium-match.png") no-repeat right -35px;
  702. _background: url("../images/btn-medium-match.gif") no-repeat right -35px;
  703. }
  704. .btn-medium-match span {
  705. background: url("../images/btn-medium-match.png") no-repeat left 0;
  706. _background: url("../images/btn-medium-match.gif") no-repeat left 0;
  707. }
  708. .btn-small-match, button.btn-small-match em {
  709. background: url("../images/btn-small-match.png") no-repeat right -25px;
  710. _background: url("../images/btn-small-match.gif") no-repeat right -25px;
  711. }
  712. .btn-small-match span {
  713. background: url("../images/btn-small-match.png") no-repeat left 0;
  714. _background: url("../images/btn-small-match.gif") no-repeat left 0;
  715. }
  716. .btn-large-match, button.btn-large-match em {
  717. background: url("../images/btn-large-match.png") no-repeat right -44px;
  718. _background: url("../images/btn-large-match.gif") no-repeat right -44px;
  719. }
  720. .btn-large-match span {
  721. background: url("../images/btn-large-match.png") no-repeat left 0;
  722. _background: url("../images/btn-large-match.gif") no-repeat left 0;
  723. }
  724. /* btn hover */
  725. .btn-medium:hover, button.btn-medium:hover em {
  726. background-position: right -105px;
  727. }
  728. .btn-medium:hover span {
  729. background-position: left -70px;
  730. }
  731. .btn-small:hover, button.btn-small:hover em {
  732. background-position: right -75px;
  733. }
  734. .btn-small:hover span {
  735. background-position: left -50px;
  736. }
  737. .btn-large:hover, button.btn-large:hover em {
  738. background-position: right -132px;
  739. }
  740. .btn-large:hover span {
  741. background-position: left -88px;
  742. }
  743. /* btn active */
  744. .btn-medium:active, button.btn-medium:active em {
  745. background-position: right -175px;
  746. }
  747. .btn-medium:active span {
  748. background-position: left -140px;
  749. }
  750. .btn-small:active, button.btn-small:active em {
  751. background-position: right -125px;
  752. }
  753. .btn-small:active span {
  754. background-position: left -100px;
  755. }
  756. .btn-large:active, button.btn-large:active em {
  757. background-position: right -220px;
  758. }
  759. .btn-large:active span {
  760. background-position: left -176px;
  761. }
  762. /* ============ submit button=============== */
  763. /*html:not([lang*=""]) button.submit-btn {margin: 0 -3px;}*/
  764. button.btn-medium, button.btn-small, button.btn-large {
  765. border: none;
  766. background: none;
  767. padding: 0;
  768. margin: 0;
  769. width: auto;
  770. overflow: visible;
  771. text-align: center;
  772. white-space: nowrap;
  773. }
  774. button.btn-medium span, button.btn-small span, button.btn-large span, button.btn-medium em, button.btn-small em, button.btn-large em {
  775. display: inline-block;
  776. margin: 0;
  777. font-style: normal;
  778. }
  779. /*button.submit-btn em{font-style:normal;}*/
  780. /* ============ icon button=============== */
  781. .btn-medium i, .btn-small i, .btn-large i {
  782. display: inline-block;
  783. *display:inline;
  784. zoom: 1;
  785. float: left;
  786. margin-left: -2px;
  787. background-repeat: no-repeat;
  788. background-position: left center;
  789. }
  790. .btn-medium i {
  791. width: 20px;
  792. height: 34px;
  793. }
  794. .btn-small i {
  795. width: 20px;
  796. height: 22px;
  797. }
  798. .btn-large i {
  799. width: 22px;
  800. height: 42px;
  801. }
  802. /*-------------------------------------
  803. clearfix
  804. -------------------------------------*/
  805. .clear {
  806. clear: both;
  807. visibility: hidden;
  808. display: block;
  809. font-size: 0;
  810. line-height: 0;
  811. }
  812. .clearfix:after {
  813. visibility: hidden;
  814. display: block;
  815. font-size: 0;
  816. content: " ";
  817. clear: both;
  818. height: 0;
  819. }
  820. .clearfix {
  821. *zoom:1;
  822. }
  823. @media screen and (max-width:768px) {
  824. /* 多列 测试*/
  825. .qhd-module .column .md-col-2-1, .qhd-module .column .md-col-3-1, .qhd-module .column .md-col-4-1, .qhd-module .column .md-col-4-2, .qhd-module .column .md-col-5-1, .qhd-module .column .md-col-3-2, .qhd-module .column .md-col-4-3, .qhd-module .column .md-col-5-2, .qhd-module .column .md-col-5-3, .qhd-module .column .md-col-5-4 {
  826. float: left;
  827. min-height: 1px;
  828. height: auto !important;
  829. _height: 1px;
  830. }
  831. /* default marg-per3 margin right 3% */
  832. .qhd-module .column .md-col-1-1 {
  833. width: 100% !important;
  834. }
  835. .qhd-module .column .md-col-2-1 {
  836. width: 48.5% !important;
  837. margin-right: 3% !important;
  838. }
  839. .qhd-module .column .md-col-3-1 {
  840. width: 31.3333% !important;
  841. margin-right: 3% !important;
  842. }
  843. .qhd-module .column .md-col-4-1 {
  844. width: 22.75% !important;
  845. margin-right: 3% !important;
  846. }
  847. .qhd-module .column .md-col-5-1 {
  848. width: 17.6% !important;
  849. margin-right: 3% !important;
  850. }
  851. .qhd-module .column .md-col-3-2 {
  852. width: 65.6666% !important;
  853. margin-right: 3% !important;
  854. }
  855. .qhd-module .column .md-col-4-2 {
  856. width: 48.5% !important;
  857. margin-right: 3% !important;
  858. }
  859. .qhd-module .column .md-col-4-3 {
  860. width: 74.25% !important;
  861. margin-right: 3% !important;
  862. }
  863. .qhd-module .column .md-col-5-2 {
  864. width: 38.2% !important;
  865. margin-right: 3% !important;
  866. }
  867. .qhd-module .column .md-col-5-3 {
  868. width: 58.8% !important;
  869. margin-right: 3% !important;
  870. }
  871. .qhd-module .column .md-col-5-4 {
  872. width: 79.4% !important;
  873. margin-right: 3% !important;
  874. }
  875. .qhd-module .column .md-last {
  876. margin-right: 0 !important;
  877. *float:right;
  878. *clear:right;
  879. }
  880. }
  881. @media screen and (max-width:640px) {
  882. /* 多列 测试*/
  883. .qhd-module .column .sm-col-2-1, .qhd-module .column .sm-col-3-1, .qhd-module .column .sm-col-4-1, .qhd-module .column .sm-col-4-2, .qhd-module .column .sm-col-5-1, .qhd-module .column .sm-col-3-2, .qhd-module .column .sm-col-4-3, .qhd-module .column .sm-col-5-2, .qhd-module .column .sm-col-5-3, .qhd-module .column .sm-col-5-4 {
  884. float: left;
  885. min-height: 1px;
  886. height: auto !important;
  887. _height: 1px;
  888. }
  889. /* default marg-per3 margin right 3% */
  890. .qhd-module .column .sm-col-1-1 {
  891. width: 100% !important;
  892. }
  893. .qhd-module .column .sm-col-2-1 {
  894. width: 48.5% !important;
  895. margin-right: 3% !important;
  896. }
  897. .qhd-module .column .sm-col-3-1 {
  898. width: 31.3333% !important;
  899. margin-right: 3% !important;
  900. }
  901. .qhd-module .column .sm-col-4-1 {
  902. width: 22.75% !important;
  903. margin-right: 3% !important;
  904. }
  905. .qhd-module .column .sm-col-5-1 {
  906. width: 17.6% !important;
  907. margin-right: 3% !important;
  908. }
  909. .qhd-module .column .sm-col-3-2 {
  910. width: 65.6666% !important;
  911. margin-right: 3% !important;
  912. }
  913. .qhd-module .column .sm-col-4-2 {
  914. width: 48.5% !important;
  915. margin-right: 3% !important;
  916. }
  917. .qhd-module .column .sm-col-4-3 {
  918. width: 74.25% !important;
  919. margin-right: 3% !important;
  920. }
  921. .qhd-module .column .sm-col-5-2 {
  922. width: 38.2% !important;
  923. margin-right: 3% !important;
  924. }
  925. .qhd-module .column .sm-col-5-3 {
  926. width: 58.8% !important;
  927. margin-right: 3% !important;
  928. }
  929. .qhd-module .column .sm-col-5-4 {
  930. width: 79.4% !important;
  931. margin-right: 3% !important;
  932. }
  933. .qhd-module .column .sm-last {
  934. margin-right: 0 !important;
  935. *float:right;
  936. *clear:right;
  937. }
  938. }