You are here

Home » API reference » qTip (Stylish jQuery Tooltips) 6.2

jquery.qtip.css in qTip (Stylish jQuery Tooltips) 6.2

Same filename and directory in other branches
  1. 6 library/jquery.qtip.css
  2. 7 library/jquery.qtip.css
/*
* qTip2 - Pretty pwoerful tooltips
* http://craigsworks.com/projects/qtip2/
*
* Version: 2.0.0pre
* Copyright 2009-2010 Craig Michael Thompson - http://craigsworks.com
*
* Dual licensed under MIT or GPLv2 licenses
* http://en.wikipedia.org/wiki/MIT_License
* http://en.wikipedia.org/wiki/GNU_General_Public_License
*
* Date: Mon Dec 13 21:52:07 2010 +0000
*/

.ui-tooltip-accessible{
left: -31000px;
display: block;
visibility: hidden;
}

/* IE6 ONLY - Width detection fix */
* html .ui-tooltip-accessible{
position: static !important;
float: left !important;
}

/* Accessible fluid class for determining actual width */
.ui-tooltip-accessible-fluid{
max-width: none !important;
min-width: 0px !important;
max-height: none !important;
min-height: 0px !important;
}

.ui-tooltip, .qtip{
position: absolute;
display: none;

max-width: 280px;
min-width: 50px;
}

.ui-tooltip .ui-tooltip-wrapper{
position: relative;
overflow: hidden;

border-width: 3px;
border-style: solid;
}

.ui-tooltip .ui-tooltip-content{
position: relative;
padding: 5px 9px;

text-align: left;
word-wrap: break-word;
overflow: hidden;
}

.ui-tooltip .ui-tooltip-titlebar{
position: relative;
min-height: 19px;
padding: 6px 35px 6px 10px;

font-weight: bold;
}

/*! Default close button class */
.ui-tooltip .ui-tooltip-close{
position: absolute;
height: 16px;
width: 16px;
padding: 1px;
right: 5px;
top: 5px;

cursor: pointer;
line-height: 0px;
font-size: 0px;
}

.ui-tooltip-close .ui-tooltip-icon{
height: 16px;
width: 16px;
display: block;

opacity: 0.8;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
filter: alpha(opacity=80);
}
.ui-tooltip-close:hover .ui-tooltip-icon{
opacity: 1;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
}

/* Applied to 'focused' tooltips e.g. most recently displayed/interacted with */
.ui-tooltip-focus{

}


/*! ThemeRoller compatibility classes */
.ui-widget .ui-tooltip-wrapper{
border-width: 0;
}

.ui-widget .ui-tooltip-close .ui-icon{
float: right;
}


/*! Default tooltip style */
.ui-tooltip-wrapper{
border-color: #F9E98E;
background-color: #FBF7AA;
color: #A27D35;
}

.ui-tooltip .ui-tooltip-titlebar{
background-color: #F0DE7D;
}

.ui-tooltip .ui-tooltip-icon{
background: #A27D35 url('images/close.png') no-repeat 50% 50%;
}

/*! Plain tooltip style */
.ui-tooltip-plain .ui-tooltip-wrapper{
border-color: black;
border-width: 1px;

background-color: white;
color: black;
}

.ui-tooltip-plain .ui-tooltip-titlebar{
background-color: white;
}

.ui-tooltip-plain .ui-tooltip-icon{
background: black;
}

/*! Light tooltip style */
.ui-tooltip-light .ui-tooltip-wrapper{
border-color: #E2E2E2;
background-color: white;
color: #454545;
}

.ui-tooltip-light .ui-tooltip-titlebar{
background-color: #f1f1f1;
}

.ui-tooltip-light .ui-tooltip-icon{
background: #454545 url('images/close-light.png') no-repeat 50% 50%;
}


/*! Dark tooltip style */
.ui-tooltip-dark .ui-tooltip-wrapper{
border-color: #303030;
background-color: #505050;
color: #f3f3f3;
}

.ui-tooltip-dark .ui-tooltip-titlebar{
background-color: #404040;
}

.ui-tooltip-dark .ui-tooltip-icon{
background: #f3f3f3 url('images/close-dark.png') no-repeat 50% 50%;
}


/*! Red tooltip style */
.ui-tooltip-red .ui-tooltip-wrapper{
border-color: #D95252;
background-color: #F78B83;
color: #912323;
}

.ui-tooltip-red .ui-tooltip-titlebar{
background-color: #F06D65;
}

.ui-tooltip-red .ui-tooltip-icon{
background: #9C2F2F url('images/close-red.png') no-repeat 50% 50%;
}


/*! Green tooltip style */
.ui-tooltip-green .ui-tooltip-wrapper{
border-color: #90D93F;
background-color: #CAED9E;
color: #3F6219;
}

.ui-tooltip-green .ui-tooltip-titlebar{
background-color: #B0DE78;
}

.ui-tooltip-green .ui-tooltip-icon{
background: #58792E url('images/close-green.png') no-repeat 50% 50%;
}


/*! Blue tooltip style */
.ui-tooltip-blue .ui-tooltip-wrapper{
border-color: #ADD9ED;
background-color: #E5F6FE;
color: #5E99BD;
}

.ui-tooltip-blue .ui-tooltip-titlebar{
background-color: #D0E9F5;
}

.ui-tooltip-blue .ui-tooltip-icon{
background: #4D9FBF url('images/close-blue.png') no-repeat 50% 50%;
}


/*! Add shadows to your tooltips in: FF3+, Chrome 2+, Opera 10.6+, IE6+, Safari 2+ */
.ui-tooltip-shadow .ui-tooltip-wrapper{
-webkit-box-shadow: 1px 1px 3px 1px rgba(0, 0, 0, 0.15);
  -moz-box-shadow: 1px 1px 3px 1px rgba(0, 0, 0, 0.15);
  box-shadow: 1px 1px 3px 1px rgba(0, 0, 0, 0.15);

  filter: Shadow(Color='gray', Direction=135, Strength=3);
  -ms-filter:"progid:DXImageTransform.Microsoft.shadow(Color='gray', Direction=135, Strength=3)";
}

/*! Add rounded corners to your tooltips in: FF3+, Chrome 2+, Opera 10.6+, IE9+, Safari 2+ */
.ui-tooltip-rounded .ui-tooltip-wrapper{
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
}

div.ui-tooltip-tip{
position: absolute;
margin: 0 auto;
overflow: hidden;

line-height: 0.1px;
font-size: 1px;

background: transparent !important;
border: 0px !important;
z-index: 10;
}

div.ui-tooltip-tip *{
line-height: 0.1px;
font-size: 0.1px;
}

div.ui-tooltip-tip div{
background: transparent !important;
border: 0px dashed transparent;
}

#qtip-overlay{
position: absolute;
left: -10000em;
top: -10000em;

background-color: black;
cursor: pointer;

opacity: 0.7;
filter:alpha(opacity=70);
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";

/* Set this to any below 15000 (default starting z-index for qTips) */
z-index: 14999;
}

/*! Youtube tooltip style */
.ui-tooltip-youtube .ui-tooltip-wrapper{
background-color: rgba(0, 0, 0, 0.85);
color: white;

-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;

border-color: #CCCCCC;
border-width: 1px;

-webkit-box-shadow: 0 0 3px #333;
-moz-box-shadow: 0 0 3px #333;
box-shadow: 0 0 3px #333;
}

div.ui-tooltip-youtube .ui-tooltip-icon{
background: black url('images/close-dark.png') no-repeat 50% 50%;
}

.ui-tooltip-youtube .ui-tooltip-titlebar,
.ui-tooltip-youtube .ui-tooltip-content{
background: transparent;
margin: 0;
}

/* IE6 Fallback */
* html div.ui-tooltip-youtube-wrapper{
background-color: black;
}


/* jQuery TOOLS Tooltip style */
.ui-tooltip-jtools .ui-tooltip-wrapper{
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2px;

border-color: white;
border-width: 2px;

-webkit-box-shadow: 0 0 12px #333;
-moz-box-shadow: 0 0 12px #333;
box-shadow: 0 0 12px #333;

background-color: rgba(0, 0, 0, 0.7);
background-image: -moz-linear-gradient(top, #717171, #232323);
background-image: -webkit-gradient(linear, left top, left bottom, from(#717171), to(#232323));
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#717171,endColorstr=#232323);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#717171,endColorstr=#232323)";

color: white;
}

.ui-tooltip-jtools .ui-tooltip-titlebar,
.ui-tooltip-jtools .ui-tooltip-content{
background: transparent;
}

.ui-tooltip-jtools .ui-tooltip-icon{
background: black url('images/close-dark.png') no-repeat 50% 50%;
}


/* Cluetip style */
.ui-tooltip-cluetip .ui-tooltip-wrapper{
background-color: #D9D9C2;
border: 0px solid #D9D9C2;

-webkit-box-shadow: 4px 4px 5px rgba(0, 0, 0, 0.4);
-moz-box-shadow: 4px 4px 5px rgba(0, 0, 0, 0.4);
box-shadow: 4px 4px 5px rgba(0, 0, 0, 0.4);
}

.ui-tooltip-cluetip .ui-tooltip-titlebar{
background-color: #87876A;
color: white;
border: 0;
}
.ui-tooltip-cluetip .ui-tooltip-content{
color: #111;
}


/* Tipsy style */
.ui-tooltip-tipsy .ui-tooltip-wrapper{
border: 0px solid black;
border: 0px solid rgba(0,0,0,.9);

background: black;
background: rgba(0,0,0,.9);
filter: alpha(opacity=90);

-moz-border-radius: 4px;
-webkit-border-radius: 4px;
-o-border-radius: 4px;
border-radius: 4px;
}

.ui-tooltip-tipsy .ui-tooltip-titlebar,
.ui-tooltip-tipsy .ui-tooltip-content{
background: transparent;
color: white;
font-size: 11px;
font-family: 'Lucida Grande', sans-serif;
font-weight: bold;
line-height: 16px;
text-shadow: 0 1px black;
}

.ui-tooltip-tipsy .ui-tooltip-titlebar{
padding: 6px 35px 0 10px;
}

.ui-tooltip-tipsy .ui-tooltip-content{
padding: 6px 10px;
}

.ui-tooltip-tipsy .ui-tooltip-icon{
background: black url('images/close-dark.png') no-repeat 50% 50%;
}

File

library/jquery.qtip.css
View source 
  1. /*

  2. * qTip2 - Pretty pwoerful tooltips

  3. * http://craigsworks.com/projects/qtip2/

  4. *

  5. * Version: 2.0.0pre

  6. * Copyright 2009-2010 Craig Michael Thompson - http://craigsworks.com

  7. *

  8. * Dual licensed under MIT or GPLv2 licenses

  9. * http://en.wikipedia.org/wiki/MIT_License

  10. * http://en.wikipedia.org/wiki/GNU_General_Public_License

  11. *

  12. * Date: Mon Dec 13 21:52:07 2010 +0000

  13. */

  14. 

  15. .ui-tooltip-accessible{

  16. left: -31000px;

  17. display: block;

  18. visibility: hidden;

  19. }

  20. 

  21. /* IE6 ONLY - Width detection fix */

  22. * html .ui-tooltip-accessible{

  23. position: static !important;

  24. float: left !important;

  25. }

  26. 

  27. /* Accessible fluid class for determining actual width */

  28. .ui-tooltip-accessible-fluid{

  29. max-width: none !important;

  30. min-width: 0px !important;

  31. max-height: none !important;

  32. min-height: 0px !important;

  33. }

  34. 

  35. .ui-tooltip, .qtip{

  36. position: absolute;

  37. display: none;

  38. 

  39. max-width: 280px;

  40. min-width: 50px;

  41. }

  42. 

  43. .ui-tooltip .ui-tooltip-wrapper{

  44. position: relative;

  45. overflow: hidden;

  46. 

  47. border-width: 3px;

  48. border-style: solid;

  49. }

  50. 

  51. .ui-tooltip .ui-tooltip-content{

  52. position: relative;

  53. padding: 5px 9px;

  54. 

  55. text-align: left;

  56. word-wrap: break-word;

  57. overflow: hidden;

  58. }

  59. 

  60. .ui-tooltip .ui-tooltip-titlebar{

  61. position: relative;

  62. min-height: 19px;

  63. padding: 6px 35px 6px 10px;

  64. 

  65. font-weight: bold;

  66. }

  67. 

  68. /*! Default close button class */

  69. .ui-tooltip .ui-tooltip-close{

  70. position: absolute;

  71. height: 16px;

  72. width: 16px;

  73. padding: 1px;

  74. right: 5px;

  75. top: 5px;

  76. 

  77. cursor: pointer;

  78. line-height: 0px;

  79. font-size: 0px;

  80. }

  81. 

  82. .ui-tooltip-close .ui-tooltip-icon{

  83. height: 16px;

  84. width: 16px;

  85. display: block;

  86. 

  87. opacity: 0.8;

  88. -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";

  89. filter: alpha(opacity=80);

  90. }

  91. .ui-tooltip-close:hover .ui-tooltip-icon{

  92. opacity: 1;

  93. -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";

  94. filter: alpha(opacity=100);

  95. }

  96. 

  97. /* Applied to 'focused' tooltips e.g. most recently displayed/interacted with */

  98. .ui-tooltip-focus{

  99. 

  100. }

  101. 

  102. 

  103. /*! ThemeRoller compatibility classes */

  104. .ui-widget .ui-tooltip-wrapper{

  105. border-width: 0;

  106. }

  107. 

  108. .ui-widget .ui-tooltip-close .ui-icon{

  109. float: right;

  110. }

  111. 

  112. 

  113. /*! Default tooltip style */

  114. .ui-tooltip-wrapper{

  115. border-color: #F9E98E;

  116. background-color: #FBF7AA;

  117. color: #A27D35;

  118. }

  119. 

  120. .ui-tooltip .ui-tooltip-titlebar{

  121. background-color: #F0DE7D;

  122. }

  123. 

  124. .ui-tooltip .ui-tooltip-icon{

  125. background: #A27D35 url('images/close.png') no-repeat 50% 50%;

  126. }

  127. 

  128. /*! Plain tooltip style */

  129. .ui-tooltip-plain .ui-tooltip-wrapper{

  130. border-color: black;

  131. border-width: 1px;

  132. 

  133. background-color: white;

  134. color: black;

  135. }

  136. 

  137. .ui-tooltip-plain .ui-tooltip-titlebar{

  138. background-color: white;

  139. }

  140. 

  141. .ui-tooltip-plain .ui-tooltip-icon{

  142. background: black;

  143. }

  144. 

  145. /*! Light tooltip style */

  146. .ui-tooltip-light .ui-tooltip-wrapper{

  147. border-color: #E2E2E2;

  148. background-color: white;

  149. color: #454545;

  150. }

  151. 

  152. .ui-tooltip-light .ui-tooltip-titlebar{

  153. background-color: #f1f1f1;

  154. }

  155. 

  156. .ui-tooltip-light .ui-tooltip-icon{

  157. background: #454545 url('images/close-light.png') no-repeat 50% 50%;

  158. }

  159. 

  160. 

  161. /*! Dark tooltip style */

  162. .ui-tooltip-dark .ui-tooltip-wrapper{

  163. border-color: #303030;

  164. background-color: #505050;

  165. color: #f3f3f3;

  166. }

  167. 

  168. .ui-tooltip-dark .ui-tooltip-titlebar{

  169. background-color: #404040;

  170. }

  171. 

  172. .ui-tooltip-dark .ui-tooltip-icon{

  173. background: #f3f3f3 url('images/close-dark.png') no-repeat 50% 50%;

  174. }

  175. 

  176. 

  177. /*! Red tooltip style */

  178. .ui-tooltip-red .ui-tooltip-wrapper{

  179. border-color: #D95252;

  180. background-color: #F78B83;

  181. color: #912323;

  182. }

  183. 

  184. .ui-tooltip-red .ui-tooltip-titlebar{

  185. background-color: #F06D65;

  186. }

  187. 

  188. .ui-tooltip-red .ui-tooltip-icon{

  189. background: #9C2F2F url('images/close-red.png') no-repeat 50% 50%;

  190. }

  191. 

  192. 

  193. /*! Green tooltip style */

  194. .ui-tooltip-green .ui-tooltip-wrapper{

  195. border-color: #90D93F;

  196. background-color: #CAED9E;

  197. color: #3F6219;

  198. }

  199. 

  200. .ui-tooltip-green .ui-tooltip-titlebar{

  201. background-color: #B0DE78;

  202. }

  203. 

  204. .ui-tooltip-green .ui-tooltip-icon{

  205. background: #58792E url('images/close-green.png') no-repeat 50% 50%;

  206. }

  207. 

  208. 

  209. /*! Blue tooltip style */

  210. .ui-tooltip-blue .ui-tooltip-wrapper{

  211. border-color: #ADD9ED;

  212. background-color: #E5F6FE;

  213. color: #5E99BD;

  214. }

  215. 

  216. .ui-tooltip-blue .ui-tooltip-titlebar{

  217. background-color: #D0E9F5;

  218. }

  219. 

  220. .ui-tooltip-blue .ui-tooltip-icon{

  221. background: #4D9FBF url('images/close-blue.png') no-repeat 50% 50%;

  222. }

  223. 

  224. 

  225. /*! Add shadows to your tooltips in: FF3+, Chrome 2+, Opera 10.6+, IE6+, Safari 2+ */

  226. .ui-tooltip-shadow .ui-tooltip-wrapper{

  227. -webkit-box-shadow: 1px 1px 3px 1px rgba(0, 0, 0, 0.15);

  228.   -moz-box-shadow: 1px 1px 3px 1px rgba(0, 0, 0, 0.15);

  229.   box-shadow: 1px 1px 3px 1px rgba(0, 0, 0, 0.15);

  230. 

  231.   filter: Shadow(Color='gray', Direction=135, Strength=3);

  232.   -ms-filter:"progid:DXImageTransform.Microsoft.shadow(Color='gray', Direction=135, Strength=3)";

  233. }

  234. 

  235. /*! Add rounded corners to your tooltips in: FF3+, Chrome 2+, Opera 10.6+, IE9+, Safari 2+ */

  236. .ui-tooltip-rounded .ui-tooltip-wrapper{

  237. -moz-border-radius: 5px;

  238. -webkit-border-radius: 5px;

  239. -o-border-radius: 5px;

  240. border-radius: 5px;

  241. }

  242. 

  243. div.ui-tooltip-tip{

  244. position: absolute;

  245. margin: 0 auto;

  246. overflow: hidden;

  247. 

  248. line-height: 0.1px;

  249. font-size: 1px;

  250. 

  251. background: transparent !important;

  252. border: 0px !important;

  253. z-index: 10;

  254. }

  255. 

  256. div.ui-tooltip-tip *{

  257. line-height: 0.1px;

  258. font-size: 0.1px;

  259. }

  260. 

  261. div.ui-tooltip-tip div{

  262. background: transparent !important;

  263. border: 0px dashed transparent;

  264. }

  265. 

  266. #qtip-overlay{

  267. position: absolute;

  268. left: -10000em;

  269. top: -10000em;

  270. 

  271. background-color: black;

  272. cursor: pointer;

  273. 

  274. opacity: 0.7;

  275. filter:alpha(opacity=70);

  276. -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";

  277. 

  278. /* Set this to any below 15000 (default starting z-index for qTips) */

  279. z-index: 14999;

  280. }

  281. 

  282. /*! Youtube tooltip style */

  283. .ui-tooltip-youtube .ui-tooltip-wrapper{

  284. background-color: rgba(0, 0, 0, 0.85);

  285. color: white;

  286. 

  287. -moz-border-radius: 5px;

  288. -webkit-border-radius: 5px;

  289. border-radius: 5px;

  290. 

  291. border-color: #CCCCCC;

  292. border-width: 1px;

  293. 

  294. -webkit-box-shadow: 0 0 3px #333;

  295. -moz-box-shadow: 0 0 3px #333;

  296. box-shadow: 0 0 3px #333;

  297. }

  298. 

  299. div.ui-tooltip-youtube .ui-tooltip-icon{

  300. background: black url('images/close-dark.png') no-repeat 50% 50%;

  301. }

  302. 

  303. .ui-tooltip-youtube .ui-tooltip-titlebar,

  304. .ui-tooltip-youtube .ui-tooltip-content{

  305. background: transparent;

  306. margin: 0;

  307. }

  308. 

  309. /* IE6 Fallback */

  310. * html div.ui-tooltip-youtube-wrapper{

  311. background-color: black;

  312. }

  313. 

  314. 

  315. /* jQuery TOOLS Tooltip style */

  316. .ui-tooltip-jtools .ui-tooltip-wrapper{

  317. -moz-border-radius: 2px;

  318. -webkit-border-radius: 2px;

  319. border-radius: 2px;

  320. 

  321. border-color: white;

  322. border-width: 2px;

  323. 

  324. -webkit-box-shadow: 0 0 12px #333;

  325. -moz-box-shadow: 0 0 12px #333;

  326. box-shadow: 0 0 12px #333;

  327. 

  328. background-color: rgba(0, 0, 0, 0.7);

  329. background-image: -moz-linear-gradient(top, #717171, #232323);

  330. background-image: -webkit-gradient(linear, left top, left bottom, from(#717171), to(#232323));

  331. filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#717171,endColorstr=#232323);

  332. -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#717171,endColorstr=#232323)";

  333. 

  334. color: white;

  335. }

  336. 

  337. .ui-tooltip-jtools .ui-tooltip-titlebar,

  338. .ui-tooltip-jtools .ui-tooltip-content{

  339. background: transparent;

  340. }

  341. 

  342. .ui-tooltip-jtools .ui-tooltip-icon{

  343. background: black url('images/close-dark.png') no-repeat 50% 50%;

  344. }

  345. 

  346. 

  347. /* Cluetip style */

  348. .ui-tooltip-cluetip .ui-tooltip-wrapper{

  349. background-color: #D9D9C2;

  350. border: 0px solid #D9D9C2;

  351. 

  352. -webkit-box-shadow: 4px 4px 5px rgba(0, 0, 0, 0.4);

  353. -moz-box-shadow: 4px 4px 5px rgba(0, 0, 0, 0.4);

  354. box-shadow: 4px 4px 5px rgba(0, 0, 0, 0.4);

  355. }

  356. 

  357. .ui-tooltip-cluetip .ui-tooltip-titlebar{

  358. background-color: #87876A;

  359. color: white;

  360. border: 0;

  361. }

  362. .ui-tooltip-cluetip .ui-tooltip-content{

  363. color: #111;

  364. }

  365. 

  366. 

  367. /* Tipsy style */

  368. .ui-tooltip-tipsy .ui-tooltip-wrapper{

  369. border: 0px solid black;

  370. border: 0px solid rgba(0,0,0,.9);

  371. 

  372. background: black;

  373. background: rgba(0,0,0,.9);

  374. filter: alpha(opacity=90);

  375. 

  376. -moz-border-radius: 4px;

  377. -webkit-border-radius: 4px;

  378. -o-border-radius: 4px;

  379. border-radius: 4px;

  380. }

  381. 

  382. .ui-tooltip-tipsy .ui-tooltip-titlebar,

  383. .ui-tooltip-tipsy .ui-tooltip-content{

  384. background: transparent;

  385. color: white;

  386. font-size: 11px;

  387. font-family: 'Lucida Grande', sans-serif;

  388. font-weight: bold;

  389. line-height: 16px;

  390. text-shadow: 0 1px black;

  391. }

  392. 

  393. .ui-tooltip-tipsy .ui-tooltip-titlebar{

  394. padding: 6px 35px 0 10px;

  395. }

  396. 

  397. .ui-tooltip-tipsy .ui-tooltip-content{

  398. padding: 6px 10px;

  399. }

  400. 

  401. .ui-tooltip-tipsy .ui-tooltip-icon{

  402. background: black url('images/close-dark.png') no-repeat 50% 50%;

  403. }