base.css 26 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145114611471148114911501151115211531154115511561157115811591160116111621163116411651166116711681169117011711172117311741175117611771178117911801181118211831184118511861187118811891190119111921193119411951196119711981199120012011202120312041205120612071208120912101211121212131214121512161217121812191220122112221223122412251226122712281229123012311232123312341235123612371238123912401241124212431244124512461247124812491250125112521253125412551256125712581259126012611262126312641265126612671268126912701271127212731274127512761277127812791280128112821283128412851286128712881289129012911292129312941295129612971298129913001301130213031304130513061307130813091310131113121313131413151316131713181319132013211322132313241325132613271328132913301331133213331334133513361337133813391340134113421343134413451346134713481349135013511352135313541355135613571358135913601361136213631364136513661367136813691370137113721373137413751376137713781379138013811382
  1. /*
  2. Kameleon Template
  3. Author: Chris Mooney (http://themeforest.net/user/ChrisMooney)
  4. */
  5. /*//// - Body Styles - ////*/
  6. #wrapper {
  7. width:980px;
  8. margin:0 auto;
  9. }
  10. a:hover {
  11. text-decoration:none;
  12. }
  13. /*//// - Headings - ////*/
  14. h1 {
  15. font-weight:bold;
  16. font-size:220%;
  17. float:left;
  18. margin-top:5px;
  19. }
  20. h1#logo {
  21. display:inline;
  22. height:38px;
  23. text-indent:-4000px;
  24. width:231px;
  25. }
  26. h1#logo a {
  27. display:block;
  28. height:38px;
  29. }
  30. h2 {
  31. font-size:200%;
  32. margin-bottom:10px;
  33. letter-spacing:-1px;
  34. }
  35. h2.ribbon {
  36. padding:15px 30px;
  37. position:relative;
  38. left:-55px;
  39. float:left;
  40. margin-bottom:20px;
  41. border-radius:3px 3px 3px 0px;
  42. -moz-border-radius:3px 3px 3px 0px;
  43. -webkit-border-radius:3px 3px 3px 0px;
  44. }
  45. .triangle-ribbon {
  46. border-style:solid;
  47. border-width:13px;
  48. height:0;
  49. position:relative;
  50. width:0;
  51. float:left;
  52. clear:left;
  53. left:-67px;
  54. top:-33px;
  55. z-index:-1;
  56. }
  57. h2.full {
  58. width:890px;
  59. }
  60. h2 span {
  61. position:absolute;
  62. right:25px;
  63. font-size:80%;
  64. margin:3px 0 0;
  65. }
  66. h3 {
  67. font-size:180%;
  68. font-weight: bold;
  69. margin-bottom:15px;
  70. }
  71. aside h3 {
  72. font-size:138.5%;
  73. font-weight:bold;
  74. margin-bottom:15px;
  75. color:#333333;
  76. padding-bottom:10px;
  77. border-bottom:1px solid #D9D9D9;
  78. }
  79. h4 {
  80. font-size:128%;
  81. font-weight: bold;
  82. margin-bottom:20px;
  83. color:#333333;
  84. }
  85. h5 {
  86. font-size:100%;
  87. }
  88. h5.inline {
  89. float:left;
  90. margin-right:10px;
  91. }
  92. h6 {
  93. font-size:93%;
  94. }
  95. h1 img, h2 img, h3 img, h4 img, h5 img, h6 img {
  96. margin-right:5px;
  97. vertical-align:-2px;
  98. }
  99. /*//// - Misc - ////*/
  100. .fl {
  101. float:left;
  102. }
  103. img.fl {
  104. margin:0 25px 25px 0;
  105. }
  106. .fr {
  107. float:right;
  108. }
  109. img.fr {
  110. margin:0 0 25px 25px;
  111. }
  112. .fn {
  113. float:none!important;
  114. }
  115. .cl {
  116. background: none;
  117. border: 0;
  118. clear: both;
  119. display: block;
  120. float: none;
  121. font-size: 0;
  122. list-style: none;
  123. margin: 0;
  124. padding: 0;
  125. overflow: hidden;
  126. visibility: hidden;
  127. width: 0;
  128. height: 0;
  129. }
  130. .tl {
  131. text-align:left;
  132. }
  133. .tr {
  134. text-align:right;
  135. }
  136. .tc {
  137. text-align:center;
  138. }
  139. .hd {
  140. display: none;
  141. }
  142. .strong {
  143. font-weight: 700!important;
  144. }
  145. .no-margin {
  146. margin:0!important;
  147. }
  148. .no-padding {
  149. padding:0!important;
  150. }
  151. .margin-left {
  152. margin-left:20px;
  153. }
  154. .margin-right {
  155. margin-right:20px;
  156. }
  157. .margin-top {
  158. margin-top:20px;
  159. }
  160. .margin-bottom {
  161. margin-bottom:20px;
  162. }
  163. .border-top {
  164. border-top:1px solid #D9D9D9;
  165. padding-top:10px;
  166. margin-top:20px;
  167. }
  168. .border-left {
  169. border-left:1px solid #D9D9D9;
  170. padding-left:10px;
  171. margin-left:20px;
  172. }
  173. .border-bottom {
  174. border-bottom:1px solid #D9D9D9;
  175. padding-bottom:10px;
  176. margin-bottom:20px;
  177. }
  178. .border-right {
  179. border-top:1px solid #D9D9D9;
  180. padding-top:10px;
  181. margin-top:20px;
  182. }
  183. .txt-smaller {
  184. font-size:85%
  185. }
  186. .txt-small {
  187. font-size:93%
  188. }
  189. .txt-light {
  190. color:#4d4d4d;
  191. }
  192. .txt-lighter {
  193. color:#666;
  194. }
  195. /*//// - Nav - ////*/
  196. #nav {
  197. float:right;
  198. line-height:100%;
  199. margin:0;
  200. padding:10px;
  201. }
  202. #nav li {
  203. float: left;
  204. position: relative;
  205. list-style: none;
  206. z-index:100;
  207. margin-left:15px;
  208. padding-bottom:5px;
  209. }
  210. /* main level link */
  211. #nav a {
  212. font-weight: bold;
  213. text-decoration: none;
  214. display: block;
  215. padding: 8px 12px;
  216. font-size:113%;
  217. -webkit-border-radius: 3px;
  218. -moz-border-radius: 3px;
  219. }
  220. #nav a:hover {
  221. background: #000;
  222. color: #000;
  223. }
  224. /* main level link hover */
  225. #nav .current a, #nav li:hover > a {
  226. background: #e5e5e5;
  227. color: #444;
  228. border-top: solid 1px #cccccc;
  229. border-left: solid 1px #cccccc;
  230. border-right:1px solid #e0e0e0;
  231. border-bottom:1px solid #e0e0e0;
  232. padding:7px 11px 8px;
  233. text-shadow:0 1px 0 #FFFFFF;
  234. }
  235. /* sub levels link hover */
  236. #nav ul li:hover a, #nav li:hover li a {
  237. background: none;
  238. border: none;
  239. color: #666;
  240. -webkit-box-shadow: none;
  241. -moz-box-shadow: none;
  242. }
  243. #nav ul a:hover {
  244. background: #f2f2f2 !important;
  245. color: #1A1A1A !important;
  246. padding:10px;
  247. -webkit-border-radius: 0;
  248. -moz-border-radius: 0;
  249. }
  250. /* dropdown */
  251. #nav li:hover > ul {
  252. display: block;
  253. }
  254. /* level 2 list */
  255. #nav ul {
  256. display: none;
  257. margin: 0;
  258. padding: 0;
  259. width: 185px;
  260. position: absolute;
  261. top: 35px;
  262. left: 0;
  263. background: #fafafa;
  264. border: solid 1px #d9d9d9;
  265. z-index:100;
  266. font-size:100%;
  267. -webkit-border-radius: 3px;
  268. -moz-border-radius: 3px;
  269. border-radius: 3px;
  270. }
  271. #nav ul li {
  272. float: none;
  273. margin: 0;
  274. padding: 0;
  275. }
  276. #nav ul a {
  277. font-size:100%;
  278. font-weight:normal;
  279. padding:10px !important;
  280. }
  281. #nav ul a:hover {
  282. font-size:100%;
  283. font-weight:normal;
  284. padding:10px;
  285. }
  286. /* level 3+ list */
  287. #nav ul ul {
  288. left: 185px;
  289. top: 1px;
  290. }
  291. /* rounded corners of first and last link */
  292. #nav ul li:first-child > a {
  293. -webkit-border-top-left-radius: 3px;
  294. -moz-border-radius-topleft: 3px;
  295. -webkit-border-top-right-radius: 3px;
  296. -moz-border-radius-topright: 3px;
  297. }
  298. #nav ul li:last-child > a {
  299. -webkit-border-bottom-left-radius: 3px;
  300. -moz-border-radius-bottomleft: 3px;
  301. -webkit-border-bottom-right-radius: 3px;
  302. -moz-border-radius-bottomright: 3px;
  303. }
  304. /* clearfix */
  305. #nav:after {
  306. content: ".";
  307. display: block;
  308. clear: both;
  309. visibility: hidden;
  310. line-height: 0;
  311. height: 0;
  312. }
  313. #nav {
  314. display: inline-block;
  315. }
  316. html[xmlns] #nav {
  317. display: block;
  318. }
  319. * html #nav {
  320. height: 1%;
  321. }
  322. /*//// - Page - ////*/
  323. header {
  324. margin:25px 0 20px;
  325. }
  326. footer {
  327. padding:10px 0;
  328. }
  329. .footer-nav {
  330. float:right;
  331. }
  332. .footer-nav li {
  333. display:inline;
  334. }
  335. .footer-nav a, .footer-nav a:visited {
  336. text-decoration:none;
  337. margin:0 10px;
  338. }
  339. footer li a:hover {
  340. color:#666666;
  341. text-decoration:none;
  342. }
  343. #page {
  344. background: #fff;
  345. color:#191919;
  346. border:1px solid #d9d9d9;
  347. padding:40px;
  348. position:relative;
  349. width:898px;
  350. z-index:1;
  351. border-radius:3px;
  352. -moz-border-radius:3px;
  353. -webkit-border-radius:3px;
  354. }
  355. #page-content.two-col {
  356. float:left;
  357. padding-right:35px;
  358. width:600px;
  359. display:inline;
  360. }
  361. .breadcrumbs {
  362. margin:0 0 20px;
  363. list-style:none;
  364. padding:10px 15px;
  365. background:#f2f2f2;
  366. border:1px solid #D9D9D9;
  367. font-size:93%;
  368. color:#333333;
  369. border-radius:3px;
  370. -moz-border-radius:3px;
  371. -webkit-border-radius:3px;
  372. }
  373. .breadcrumbs li {
  374. display:inline;
  375. }
  376. aside {
  377. float:left;
  378. width:260px;
  379. color:#333333;
  380. display:inline;
  381. }
  382. section {
  383. margin-bottom:20px;
  384. padding-bottom:20px;
  385. border-bottom:1px solid #d9d9d9;
  386. }
  387. .inlinepic {
  388. background:#fafafa;
  389. border:1px solid #ccc;
  390. padding:5px;
  391. box-shadow:0 0 5px #D9D9D9;
  392. -moz-box-shadow:0 0 5px #D9D9D9;
  393. -webkit-box-shadow:0 0 5px #D9D9D9;
  394. }
  395. blockquote {
  396. background:url("../img/quote.gif") no-repeat 0 5px;
  397. color:#444444;
  398. line-height:1.6;
  399. padding:5px 20px 10px 45px;
  400. margin-bottom:20px;
  401. }
  402. blockquote cite {
  403. color:#666666;
  404. font-size:12px;
  405. font-style:italic;
  406. }
  407. /*// About Page //*/
  408. #teamlist {
  409. margin:0;
  410. list-style:none;
  411. }
  412. #teamlist li {
  413. margin-bottom:20px;
  414. padding-bottom:10px;
  415. border-bottom:1px solid #D9D9D9;
  416. }
  417. #teamlist li.last {
  418. border-bottom:0;
  419. margin-bottom:0;
  420. padding-bottom:0;
  421. }
  422. /*// Services Page //*/
  423. .services-list {
  424. margin:0;
  425. list-style:none;
  426. }
  427. .services-list li {
  428. float:left;
  429. width:270px;
  430. margin-right:30px;
  431. margin-bottom:20px;
  432. font-size:93%;
  433. }
  434. .services-list li p {
  435. margin-bottom:5px;
  436. }
  437. .services-list li a {
  438. float:right;
  439. }
  440. .services-list li img {
  441. float:left;
  442. margin:5px 20px 30px 0;
  443. }
  444. .services-list li.last {
  445. margin-right:0;
  446. }
  447. .process {
  448. height:31px;
  449. width:31px;
  450. background: url(../img/process.gif);
  451. color:#fff;
  452. display:block;
  453. font-size:138%;
  454. font-weight:bold;
  455. line-height:28px;
  456. text-align:center;
  457. margin:5px 20px 30px 0;
  458. float:left;
  459. }
  460. /*// Portfolio Page //*/
  461. .portfolio-small {
  462. list-style:none outside none;
  463. margin:0 -35px 0;
  464. }
  465. .portfolio-small li a {
  466. display:block;
  467. }
  468. .portfolio-small li {
  469. float:left;
  470. margin-bottom:20px;
  471. margin-left:35px;
  472. width:275px;
  473. }
  474. .portfolio-small li img {
  475. margin-bottom:10px;
  476. }
  477. .portfolio-small li h4 {
  478. margin-bottom:10px;
  479. }
  480. .portfolio-small li p {
  481. margin-bottom:10px;
  482. }
  483. .portfolio-list {
  484. list-style:none outside none;
  485. margin:0;
  486. }
  487. .portfolio-list li {
  488. margin-bottom:20px;
  489. padding-bottom:20px;
  490. }
  491. .portfolio-list li img {
  492. float:left;
  493. }
  494. .portfolio-list li.last {
  495. padding-bottom:0;
  496. }
  497. .portfolio-list li div {
  498. margin-left: 390px;
  499. }
  500. .portfolio-list li p {
  501. margin-bottom:15px;
  502. }
  503. /*// Sidebar //*/
  504. .social-list {
  505. margin:0 0 20px;
  506. list-style:none;
  507. }
  508. .social-list li {
  509. display:inline;
  510. margin:0 15px 10px 0;
  511. width:100%;
  512. }
  513. #twitter_update_list {
  514. margin:0 0 40px;
  515. list-style:none;
  516. }
  517. #twitter_update_list li {
  518. margin-bottom:10px;
  519. padding-bottom:10px;
  520. line-height:1.6;
  521. border-bottom:1px solid #d9d9d9;
  522. }
  523. /*//// - General Styling - ////*/
  524. p {
  525. line-height:1.6;
  526. margin-bottom:20px;
  527. }
  528. .list {
  529. margin-bottom:15px;
  530. }
  531. .list li {
  532. margin-bottom:5px;
  533. padding:0;
  534. }
  535. .list ul {
  536. margin-bottom:15px;
  537. }
  538. dl.definition {
  539. margin-bottom:20px;
  540. }
  541. dl.definition dt {
  542. font-weight:bold;
  543. margin-bottom:5px;
  544. padding-left:20px;
  545. }
  546. dl.definition dd {
  547. color:#666666;
  548. margin-bottom:15px;
  549. padding-left:20px;
  550. }
  551. .tags {
  552. margin:0 0 15px;
  553. list-style:none;
  554. }
  555. .tags li {
  556. display:inline;
  557. background:#D9D9D9;
  558. margin-right:10px;
  559. font-size:85%;
  560. padding:3px 6px;
  561. border-radius:20px;
  562. -moz-border-radius:20px;
  563. -webkit-border-radius:20px;
  564. }
  565. .social {
  566. margin:0 0 15px;
  567. list-style:none;
  568. }
  569. .social li {
  570. display:inline;
  571. margin-right:10px;
  572. }
  573. #feature {
  574. margin-bottom:20px;
  575. }
  576. .feature-img {
  577. float:left;
  578. margin-top:10px;
  579. }
  580. .feature-text {
  581. margin-left:545px;
  582. }
  583. h2#tagline {
  584. font-size:240%;
  585. }
  586. h3#tagline-mini {
  587. font-weight:normal;
  588. font-size:100%;
  589. color:#4d4d4d;
  590. line-height:1.6;
  591. margin-bottom:25px;
  592. }
  593. .feature-screenshots {
  594. margin:0;
  595. list-style:none;
  596. }
  597. .feature-screenshots li {
  598. float:left;
  599. margin: 0 20px 10px 0;
  600. }
  601. /* Homepage */
  602. .feature img {
  603. float:left;
  604. }
  605. .feature p {
  606. margin-left:70px;
  607. }
  608. .scrollable {
  609. height:110px;
  610. overflow:hidden;
  611. position:relative;
  612. width:100%;
  613. }
  614. .scrollable .items {
  615. clear:both;
  616. position:absolute;
  617. width:20000em;
  618. }
  619. .items div {
  620. float:left;
  621. width:740pxpx;
  622. }
  623. .scrollable img {
  624. -moz-border-radius:4px 4px 4px 4px;
  625. background-color:#FFFFFF;
  626. border:1px solid #CCCCCC;
  627. float:left;
  628. height:100px;
  629. margin:0 4px 0 35px;
  630. padding:2px;
  631. width:100px;
  632. }
  633. .scrollable .active {
  634. border:2px solid #000000;
  635. cursor:default;
  636. position:relative;
  637. }
  638. /* this makes it possible to add next button beside scrollable */
  639. .scrollable {
  640. float:left;
  641. }
  642. /* prev, next, prevPage and nextPage buttons */
  643. a.browse {
  644. background:url(../img/scrollable.png) no-repeat;
  645. display:block;
  646. width:30px;
  647. height:30px;
  648. margin:40px 10px;
  649. cursor:pointer;
  650. font-size:1px;
  651. position:absolute;
  652. }
  653. /* right */
  654. a.right {
  655. background-position: 0 -30px;
  656. clear:right;
  657. margin-right: 0px;
  658. right:25px;
  659. }
  660. a.right:hover {
  661. background-position:-30px -30px;
  662. }
  663. a.right:active {
  664. background-position:-60px -30px;
  665. }
  666. /* left */
  667. a.left {
  668. margin-left: 0px;
  669. left:25px;
  670. }
  671. a.left:hover {
  672. background-position:-30px 0;
  673. }
  674. a.left:active {
  675. background-position:-60px 0;
  676. }
  677. /* up and down */
  678. a.up, a.down {
  679. background:url(../img/scrollable/arrow/vert_large.png) no-repeat;
  680. float: none;
  681. margin: 10px 50px;
  682. }
  683. /* up */
  684. a.up:hover {
  685. background-position:-30px 0;
  686. }
  687. a.up:active {
  688. background-position:-60px 0;
  689. }
  690. /* down */
  691. a.down {
  692. background-position: 0 -30px;
  693. }
  694. a.down:hover {
  695. background-position:-30px -30px;
  696. }
  697. a.down:active {
  698. background-position:-60px -30px;
  699. }
  700. /* disabled navigational button */
  701. a.disabled {
  702. visibility:hidden !important;
  703. }
  704. /* Sidebar Elements */
  705. .sidebar-nav {
  706. margin:0 0 40px;
  707. list-style:none;
  708. }
  709. .sidebar-nav li {
  710. border:1px solid #d9d9d9;
  711. border-top:0;
  712. background:#f2f2f2;
  713. border-radius:3px 0 0 3px;
  714. -moz-border-radius:3px 0 0 3px;
  715. -webkit-border-radius:3px 0 0 3px;
  716. }
  717. .sidebar-nav li.first {
  718. border-top:1px solid #d9d9d9;
  719. }
  720. .sidebar-nav li a {
  721. background:url("../img/arrow.png") no-repeat 10px 50%;
  722. color:#1A1A1A;
  723. display:block;
  724. width:100%;
  725. padding:10px 27px;
  726. text-decoration:none;
  727. }
  728. .sidebar-nav li:hover {
  729. background:#bebebe;
  730. border-color:#969696;
  731. }
  732. .sidebar-nav li.current {
  733. left:-10px;
  734. position:relative;
  735. width:268px;
  736. background:url("../img/grad-grey.gif") repeat-x scroll center top #166890;
  737. border:1px solid #11506F;
  738. }
  739. .sidebar-nav li a:hover, .sidebar-nav li.current a {
  740. color:#fff;
  741. background:url("../img/arrow-active.png") no-repeat 10px 50%;
  742. }
  743. .sidebar-search {
  744. margin:0 0 40px;
  745. width:100%;
  746. }
  747. .sidebar-latestblog {
  748. margin:-10px 0 40px;
  749. list-style:none;
  750. }
  751. .sidebar-latestblog li {
  752. border-bottom:1px solid #d9d9d9;
  753. padding:10px 0;
  754. width:100%;
  755. }
  756. .sidebar-latestblog img {
  757. float:left;
  758. }
  759. .sidebar-latestblog a {
  760. display:block;
  761. margin-bottom:10px;
  762. margin-left:75px;
  763. }
  764. .sidebar-latestblog time {
  765. display:block;
  766. font-style:italic;
  767. font-size:93%;
  768. color:#666666;
  769. margin-left:75px;
  770. }
  771. .sidebar-latestblog p {
  772. margin-bottom:10px;
  773. margin-left:75px;
  774. }
  775. .sidebar-sponsors {
  776. margin:0;
  777. list-style:none;
  778. }
  779. .sidebar-sponsors li {
  780. margin:0 0 10px;
  781. }
  782. #search {
  783. padding:10px 5px;
  784. background:#fff url(../img/bg-input.gif) repeat-x top;
  785. border:1px solid #D9D9D9;
  786. float:left;
  787. width:168px;
  788. margin-right:5px;
  789. border-radius:3px;
  790. -moz-border-radius:3px;
  791. -webkit-border-radius:3px;
  792. }
  793. button.search {
  794. background:#fff url(../img/grad-grey.gif) repeat-x top;
  795. border:1px solid #d9d9d9;
  796. color:#404040;
  797. float:left;
  798. height:38px;
  799. line-height:12px;
  800. font-size:108%;
  801. font-weight:bold;
  802. padding:8px 8px 10px;
  803. text-shadow:0 1px 0 #FFFFFF;
  804. border-radius:5px;
  805. -moz-border-radius:5px;
  806. -webkit-border-radius:5px;
  807. }
  808. .pricing-table h4 {
  809. color:#FFFFFF;
  810. font-size:240%;
  811. margin-bottom:5px;
  812. }
  813. .pricing-table h5 {
  814. color:#FFFFFF;
  815. font-size:140%;
  816. margin-bottom:5px;
  817. }
  818. .pricing-table .header {
  819. background:url(../img/grad-blue.gif) repeat-x scroll center top #166890;
  820. border:1px solid #11506F;
  821. color:#FFFFFF;
  822. text-align:center;
  823. width:28%;
  824. padding:5px;
  825. }
  826. .pricing-table .blank {
  827. background:#fff;
  828. border:none;
  829. }
  830. .pricing-table .feature {
  831. border-left:1px solid #58bbec;
  832. }
  833. .pricing-table .feature.first {
  834. border-top:1px solid #58bbec;
  835. }
  836. .pricing-table {
  837. border-right:1px solid #58bbec;
  838. border-bottom:1px solid #58bbec;
  839. width:100%;
  840. margin-bottom:20px;
  841. }
  842. .pricing-table thead th, .pricing-table thead td {
  843. padding:6px 10px;
  844. font-weight: 700;
  845. color: #333;
  846. background: #EAEBFA;
  847. border-bottom: 1px solid #D9D9D9;
  848. border-right:1px solid #D9D9D9;
  849. }
  850. .pricing-table thead th.last, .pricing-table thead td.last {
  851. border-right:0;
  852. }
  853. .pricing-table tbody th, .pricing-table tbody td {
  854. background:#EAEBFA;
  855. border-right:1px dotted #D9D9D9;
  856. vertical-align:middle;
  857. padding:12px;
  858. font-size:93%;
  859. text-align:center;
  860. }
  861. .pricing-table tbody tr.alt td {
  862. background:#e4e6fa;
  863. }
  864. .pricing-table tbody th.last, .pricing-table tbody td.last {
  865. border-right:0 none;
  866. }
  867. .pricing-table tbody tr.last td {
  868. border-bottom:0 none;
  869. }
  870. /*//// - Forms - ////*/
  871. form {
  872. margin-bottom:20px;
  873. }
  874. body.ie7 form, body.ie8 {
  875. margin-bottom:40px;
  876. }
  877. form p {
  878. margin-bottom:15px;
  879. }
  880. form label {
  881. float:left;
  882. width:140px;
  883. margin-top:5px;
  884. }
  885. form input, form textarea {
  886. padding:10px 5px;
  887. background:#fff url(../img/bg-input.gif) repeat-x top;
  888. border:1px solid #D9D9D9;
  889. width:448px;
  890. border-radius:3px;
  891. -moz-border-radius:3px;
  892. -webkit-border-radius:3px;
  893. }
  894. form input.small {
  895. width:35px;
  896. }
  897. #message {
  898. margin-bottom:20px;
  899. }
  900. .error-message {
  901. background:url("../img/error.png") no-repeat 10px center #FECDC6;
  902. padding:10px 35px;
  903. border-radius:3px;
  904. -moz-border-radius:3px;
  905. -webkit-border-radius:3px;
  906. }
  907. .success-message {
  908. background:url(../img/success.png) no-repeat 10px center #F1FFBF;
  909. padding:10px 35px;
  910. border-radius:3px;
  911. -moz-border-radius:3px;
  912. -webkit-border-radius:3px;
  913. }
  914. /* Buttons */
  915. button, .button {
  916. cursor:pointer;
  917. display:inline-block;
  918. font-size:108%;
  919. font-weight:700;
  920. margin:0 5px 15px 0;
  921. outline:none;
  922. padding:10px 15px;
  923. width:auto;
  924. text-align:center;
  925. text-decoration:none !important;
  926. vertical-align:middle;
  927. background:url('../img/grad-grey.gif') repeat-x center top #c3c3c3;
  928. color:#444444;
  929. border:1px solid #c3c3c3;
  930. text-shadow:0 -1px 0 #FFFFFF;
  931. border-radius:3px;
  932. -moz-border-radius:3px;
  933. -webkit-border-radius:3px;
  934. }
  935. body.ie7 button, body.ie8 button, body.ie7 .button, body.ie8 .button {
  936. zoom:1;
  937. display:inline;
  938. }
  939. button:hover, .button:hover {
  940. background:url('../img/grad-grey-hover.gif') repeat-x center top #c3c3c3;
  941. text-decoration:none;
  942. outline:none;
  943. }
  944. button:active, .button:active {
  945. position:relative;
  946. top:1px;
  947. outline:none;
  948. background:url('../img/grad-grey-rev.gif') repeat-x center top #c3c3c3;
  949. }
  950. /* Blue Button */
  951. button.blue, .button.blue {
  952. background:url("../img/grad-blue.gif") repeat-x center top #166890;
  953. border:1px solid #11506F;
  954. color:#FFFFFF;
  955. text-shadow:0 -1px 0 #11506F;
  956. }
  957. button.blue:hover, .button.blue:hover {
  958. background:url("../img/grad-blue-hover.gif") repeat-x center top #166890;
  959. }
  960. button.blue:active, .button.blue:active {
  961. background:url("../img/grad-blue-rev.gif") repeat-x center top #166890;
  962. }
  963. /* Green Button */
  964. button.green, .button.green {
  965. background:url("../img/grad-green.gif") repeat-x center top #518f14;
  966. border:1px solid #406f11;
  967. color:#FFFFFF;
  968. text-shadow:0 -1px 0 #406f11;
  969. }
  970. button.green:hover, .button.green:hover {
  971. background:url("../img/grad-green-hover.gif") repeat-x center top #166890;
  972. }
  973. button.green:active, .button.green:active {
  974. background:url("../img/grad-green-rev.gif") repeat-x center top #166890;
  975. }
  976. /* Red Button */
  977. button.red, .button.red {
  978. background:url("../img/grad-red.gif") repeat-x center top #8f1e14;
  979. border:1px solid #6f1811;
  980. color:#FFFFFF;
  981. text-shadow:0 -1px 0 #6f1811;
  982. }
  983. button.red:hover, .button.red:hover {
  984. background:url("../img/grad-red-hover.gif") repeat-x center top #166890;
  985. }
  986. button.red:active, .button.red:active {
  987. background:url("../img/grad-red-rev.gif") repeat-x center top #166890;
  988. }
  989. /* Purple Button */
  990. button.purple, .button.purple {
  991. background:url("../img/grad-purple.gif") repeat-x center top #8f146e;
  992. border:1px solid #6f1156;
  993. color:#FFFFFF;
  994. text-shadow:0 -1px 0 #6f1156;
  995. }
  996. button.purple:hover, .button.purple:hover {
  997. background:url("../img/grad-purple-hover.gif") repeat-x center top #166890;
  998. }
  999. button.purple:active, .button.blue:active {
  1000. background:url("../img/grad-purple-rev.gif") repeat-x center top #166890;
  1001. }
  1002. /* Black Button */
  1003. button.black, .button.black {
  1004. background:url("../img/grad-black.gif") repeat-x center top #3b3b3b;
  1005. border:1px solid #3b3b3b;
  1006. color:#FFFFFF;
  1007. text-shadow:0 -1px 0 #3b3b3b;
  1008. }
  1009. button.black:hover, .button.black:hover {
  1010. background:url("../img/grad-black-hover.gif") repeat-x center top #3b3b3b;
  1011. }
  1012. button.black:active, .button.black:active {
  1013. background:url("../img/grad-black-rev.gif") repeat-x center top #3b3b3b;
  1014. }
  1015. button.large, .button.large {
  1016. font-size:138.5%;
  1017. padding:10px 30px;
  1018. }
  1019. button.small, .button.small {
  1020. font-size:93%;
  1021. padding:4px 10px 5px;
  1022. }
  1023. button.disabled, button.disabled:hover, .button.disabled, .button.disabled:hover {
  1024. background-color:#ccc !important;
  1025. color:#666 !important;
  1026. text-shadow:0 1px 0 #CCCCCC;
  1027. cursor:default;
  1028. }
  1029. body.ie7 button.disabled, body.ie8 button.disabled {
  1030. border-color:#a3a3a3;
  1031. }
  1032. button.disabled:active, .button.disabled:active {
  1033. position:relative;
  1034. top:0;
  1035. background-image: url('../img/grad.png');
  1036. }
  1037. fieldset button, .button {
  1038. margin:0 5px 10px 0;
  1039. }
  1040. button img, .button img {
  1041. display:inline;
  1042. height:16px;
  1043. margin-right:10px;
  1044. vertical-align:-3px;
  1045. width:16px;
  1046. }
  1047. /* notifications */
  1048. .notification.success {
  1049. background:#f1ffbf url('../img/icons/success.png') no-repeat 10px 10px;
  1050. border-color:#a6d50f;
  1051. }
  1052. .notification.success span.strong {
  1053. color:#283304;
  1054. }
  1055. .notification.error {
  1056. background:#fecdc6 url('../img/icons/error.png') no-repeat 10px 10px;
  1057. border-color:#f45d43;
  1058. }
  1059. .notification.error span.strong {
  1060. color:#33130e;
  1061. }
  1062. .notification.warning {
  1063. background:#ffecb0 url('../img/icons/warning.png') no-repeat 10px 10px;
  1064. border-color:#ffbc2a;
  1065. }
  1066. .notification.warning span.strong {
  1067. color:#332508;
  1068. }
  1069. .notification.info {
  1070. background:#d4e7f5 url('../img/icons/information.png') no-repeat 10px 10px;
  1071. border-color:#589ad7;
  1072. }
  1073. .notification.info span.strong {
  1074. color:#152433;
  1075. }
  1076. .notification.tip {
  1077. background:#ffeccd url('../img/icons/tip.png') no-repeat 10px 10px;
  1078. border-color:#dd9854;
  1079. }
  1080. .notification.tip span.strong {
  1081. color:#332313;
  1082. }
  1083. .notification {
  1084. padding:10px 10px 10px 35px;
  1085. border:1px solid #fff;
  1086. margin-bottom:10px;
  1087. position:relative;
  1088. font-size:100%;
  1089. border-radius:3px;
  1090. -moz-border-radius:3px;
  1091. -webkit-border-radius:3px;
  1092. }
  1093. .notification p {
  1094. margin-bottom:0;
  1095. }
  1096. .notification .close {
  1097. background:url("../img/icons/close.png") no-repeat scroll 0 0 transparent;
  1098. cursor:pointer;
  1099. display:block;
  1100. height:16px;
  1101. position:absolute;
  1102. right:10px;
  1103. top:10px;
  1104. width:16px;
  1105. }
  1106. .notification .close:hover {
  1107. opacity:1;
  1108. }
  1109. .notification.nopic {
  1110. background-image:none;
  1111. padding:10px;
  1112. }
  1113. .notification span.strong {
  1114. margin-right:10px;
  1115. }
  1116. /* Bullet List */
  1117. .bullet-list {
  1118. list-style:none;
  1119. margin-bottom:15px;
  1120. margin-left:0;
  1121. }
  1122. .bullet-list li {
  1123. background:url("../img/bullet_arrow_right.png") no-repeat left center transparent;
  1124. margin-bottom:5px;
  1125. padding:6px 6px 6px 20px;
  1126. }
  1127. .bullet-list li a {
  1128. -webkit-border-radius:3px;
  1129. -moz-border-radius:3px;
  1130. border-radius:3px;
  1131. color:#181818;
  1132. display:block;
  1133. margin:-6px;
  1134. padding:6px;
  1135. text-decoration:none;
  1136. }
  1137. .bullet-list li a:hover {
  1138. background-color:#E2E2E2;
  1139. margin:-6px -6px -6px -20px;
  1140. padding:6px 6px 6px 20px;
  1141. }
  1142. .bullet-list.grey li {
  1143. -webkit-border-radius:3px;
  1144. -moz-border-radius:3px;
  1145. border-radius:3px;
  1146. background-color:#f2f2f2;
  1147. width:50%;
  1148. }
  1149. /* Definition List */
  1150. dl.definition {
  1151. margin-bottom:20px;
  1152. }
  1153. dl.definition dt {
  1154. background:url("../img/icons/16/bullet_arrow_right.png") no-repeat left center;
  1155. font-weight: 700;
  1156. margin-bottom:5px;
  1157. padding-left:20px;
  1158. }
  1159. dl.definition dd {
  1160. color:#666666;
  1161. margin-bottom:15px;
  1162. padding-left:20px;
  1163. }
  1164. /* Pagination */
  1165. .pagination {
  1166. display: inline-block;
  1167. font-size: 77%;
  1168. text-decoration: none;
  1169. }
  1170. .pagination a, .pagination .dots {
  1171. background:url("../img/grad-grey.gif") repeat-x scroll center top #C3C3C3;
  1172. border:1px solid #C3C3C3;
  1173. display: inline-block;
  1174. color:#444444 !important;
  1175. margin-right: 2px;
  1176. padding: 6px 8px;
  1177. text-decoration:none;
  1178. -moz-border-radius: 3px;
  1179. -webkit-border-radius: 3px;
  1180. border-radius: 3px;
  1181. }
  1182. .pagination a:hover {
  1183. background: url("../img/grad-grey-hover.gif") repeat-x scroll center top #C3C3C3;
  1184. color: #444444;
  1185. }
  1186. .pagination a.current {
  1187. background: url("../img/grad-grey-rev.gif") repeat-x scroll center top #C3C3C3;
  1188. color: #444444;
  1189. }
  1190. .pagination a.number.current {
  1191. color: #444;
  1192. }
  1193. /* Small Pagination */
  1194. .pagination.small a, .pagination.small .dots {
  1195. margin-right: 1px;
  1196. padding: 1px 4px;
  1197. -moz-border-radius: 6px;
  1198. -webkit-border-radius: 6px;
  1199. border-radius: 6px;
  1200. }
  1201. /* Table Styles */
  1202. .table {
  1203. border:1px solid #CCCCCC;
  1204. width:100%;
  1205. margin-bottom:20px;
  1206. }
  1207. .table.no-border {
  1208. border:none
  1209. }
  1210. .table thead th, .table thead td {
  1211. padding:6px 10px;
  1212. font-weight: 700;
  1213. color: #333;
  1214. background: #E2E2E2;
  1215. border-bottom: 1px solid #cccccc;
  1216. border-right:1px solid #CCCCCC;
  1217. }
  1218. .table thead th.last, .table thead td.last {
  1219. border-right:0;
  1220. }
  1221. .table thead th.checkbox, .table thead td.checkbox {
  1222. width:25px;
  1223. }
  1224. .table tbody th, .table tbody td {
  1225. background:#fff;
  1226. border-right:1px dotted #CCCCCC;
  1227. vertical-align:middle;
  1228. padding:10px;
  1229. font-size:93%;
  1230. }
  1231. .table tbody tr.alt td {
  1232. background:#F2F2F2;
  1233. }
  1234. .table tbody th.last, .table tbody td.last {
  1235. border-right:0 none;
  1236. }
  1237. .table tbody tr.last td {
  1238. border-bottom:0 none;
  1239. }
  1240. .table tbody tr:hover th, .table tbody tr:hover td {
  1241. background:#d3ecf9;
  1242. }
  1243. /* Tispy Tooltips */
  1244. .tipsy {
  1245. padding: 5px;
  1246. font-size: 93%;
  1247. opacity: 0.8;
  1248. filter: alpha(opacity=80);
  1249. background-repeat: no-repeat;
  1250. background-image: url(../img/tipsy.gif);
  1251. }
  1252. .tipsy-inner {
  1253. padding: 5px 8px 4px 8px;
  1254. background-color: black;
  1255. color: white;
  1256. max-width: 200px;
  1257. text-align: center;
  1258. }
  1259. .tipsy-inner {
  1260. border-radius:3px;
  1261. -moz-border-radius:3px;
  1262. -webkit-border-radius:3px;
  1263. }
  1264. .tipsy-north {
  1265. background-position: top center;
  1266. }
  1267. .tipsy-south {
  1268. background-position: bottom center;
  1269. }
  1270. .tipsy-east {
  1271. background-position: right center;
  1272. }
  1273. .tipsy-west {
  1274. background-position: left center;
  1275. }
  1276. /*//// - jQuery Lightbox - ////*/
  1277. #jquery-overlay {
  1278. position: absolute;
  1279. top: 0;
  1280. left: 0;
  1281. z-index: 1000;
  1282. width: 100%;
  1283. height: 500px;
  1284. }
  1285. #jquery-lightbox {
  1286. position: absolute;
  1287. top: 0;
  1288. left: 0;
  1289. width: 100%;
  1290. z-index: 9999;
  1291. text-align: center;
  1292. line-height: 0;
  1293. }
  1294. #jquery-lightbox a img {
  1295. border: none;
  1296. }
  1297. #lightbox-container-image-box {
  1298. position: relative;
  1299. background-color: #fff;
  1300. width: 250px;
  1301. height: 250px;
  1302. margin: 0 auto;
  1303. }
  1304. #lightbox-container-image {
  1305. padding: 10px;
  1306. }
  1307. #lightbox-loading {
  1308. position: absolute;
  1309. top: 40%;
  1310. left: 0%;
  1311. height: 25%;
  1312. width: 100%;
  1313. text-align: center;
  1314. line-height: 0;
  1315. }
  1316. #lightbox-nav {
  1317. position: absolute;
  1318. top: 0;
  1319. left: 0;
  1320. height: 100%;
  1321. width: 100%;
  1322. z-index: 10;
  1323. }
  1324. #lightbox-container-image-box > #lightbox-nav {
  1325. left: 0;
  1326. }
  1327. #lightbox-nav a {
  1328. outline: none;
  1329. }
  1330. #lightbox-nav-btnPrev, #lightbox-nav-btnNext {
  1331. width: 49%;
  1332. height: 100%;
  1333. zoom: 1;
  1334. display: block;
  1335. }
  1336. #lightbox-nav-btnPrev {
  1337. left: 0;
  1338. float: left;
  1339. }
  1340. #lightbox-nav-btnNext {
  1341. right: 0;
  1342. float: right;
  1343. }
  1344. #lightbox-container-image-data-box {
  1345. font: 10px Verdana, Helvetica, sans-serif;
  1346. background-color: #fff;
  1347. margin: 0 auto;
  1348. line-height: 1.4em;
  1349. overflow: auto;
  1350. width: 100%;
  1351. padding: 0 10px 0;
  1352. }
  1353. #lightbox-container-image-data {
  1354. padding: 0 10px;
  1355. color: #666;
  1356. }
  1357. #lightbox-container-image-data #lightbox-image-details {
  1358. width: 70%;
  1359. float: left;
  1360. text-align: left;
  1361. }
  1362. #lightbox-image-details-caption {
  1363. font-weight: bold;
  1364. }
  1365. #lightbox-image-details-currentNumber {
  1366. display: block;
  1367. clear: left;
  1368. padding-bottom: 1.0em;
  1369. }
  1370. #lightbox-secNav-btnClose {
  1371. width: 66px;
  1372. float: right;
  1373. padding-bottom: 0.7em;
  1374. }