baseStyles.css 20 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156
  1. @charset "UTF-8";
  2. /* CSS Document */
  3. /*
  4. * DEFAULT STYLES
  5. *
  6. */
  7. body {
  8. font-size: 100%;
  9. color: #333333;
  10. font-weight: normal;
  11. font-family: sans-serif;
  12. }
  13. /*
  14. * PAGE CONTAINERS
  15. * See documentation for details regarding use of #wrap and #content
  16. */
  17. #header {
  18. }
  19. #wrap {
  20. width: 100%;
  21. overflow: hidden;
  22. position: absolute;
  23. left: 0;
  24. padding: 0;
  25. }
  26. #content {
  27. margin-left: 10px;
  28. margin-right: 10px;
  29. }
  30. #footer {
  31. background: #434343 url(../images/sprite-footer.png) repeat-x top;
  32. padding: .7em 0em;
  33. clear: both;
  34. height: 3em;
  35. }
  36. /*
  37. * BASIC ELEMENTS
  38. * Basic styling of common elements.
  39. */
  40. p {
  41. line-height: 125%;
  42. margin-top: .7em;
  43. margin-bottom: 1em;
  44. clear: both;
  45. }
  46. #footer p {
  47. color: #FFF;
  48. font-size: .8em;
  49. margin-left: 10px;
  50. margin-top: 0em;
  51. margin-bottom: 0em;
  52. padding: 0em;
  53. }
  54. strong {
  55. font-weight: bolder;
  56. }
  57. em {
  58. font-style: italic;
  59. }
  60. /*
  61. * LINK STATES
  62. *
  63. */
  64. a:link {
  65. color:#003399
  66. }
  67. a:visited {
  68. color:#006600
  69. }
  70. a:hover {
  71. color:#FF9900
  72. }
  73. a:active {
  74. color:#990000
  75. }
  76. /*
  77. * NATIVE LISTS
  78. *
  79. */
  80. ul.bullet {
  81. list-style: disc;
  82. margin-left: 10px;
  83. margin-top: 1em;
  84. margin-bottom: 1em;
  85. padding-left: 10px;
  86. }
  87. ul.bullet ul {
  88. margin-top: 0.3em;
  89. margin-bottom: 0.3em;
  90. }
  91. ol {
  92. list-style: decimal;
  93. margin-left: 10px;
  94. margin-top: 1em;
  95. padding-left: 10px;
  96. }
  97. ol ol {
  98. margin-top: 0.3em;
  99. margin-bottom: 0.3em;
  100. }
  101. /*
  102. * CLEAR
  103. *
  104. */
  105. .stack {
  106. clear:both;
  107. }
  108. /*
  109. * HEADERS
  110. *
  111. */
  112. /*designed to be used at the very top of a page*/
  113. h1.top-aligned {
  114. font-size: 1.7em;
  115. padding-top: .3em;
  116. padding-bottom: .5em;
  117. padding-left: 10px;
  118. padding-right: 10px;
  119. font-weight: bold;
  120. background: #F6F6F6 url(../images/img-h1-shadow.png) repeat-x bottom;
  121. margin-top: 0em;
  122. margin-bottom: .5em;
  123. margin-left: -10px;
  124. margin-right: -10px;
  125. }
  126. /*alternate H1*/
  127. h1 {
  128. font-size: 1.7em;
  129. padding-top: .3em;
  130. padding-bottom: .3em;
  131. padding-left: 10px;
  132. padding-right: 10px;
  133. font-weight: bold;
  134. background: #FFF url(../images/img-h1-gradient.png) repeat-x bottom;
  135. border-top: 1px solid #D8D8D8;
  136. margin-top: .5em;
  137. margin-bottom: .3em;
  138. margin-left: -10px;
  139. margin-right: -10px;
  140. }
  141. h2 {
  142. font-size: 1.5em;
  143. margin-top: 0.5em;
  144. margin-bottom: 0.3em;
  145. clear: both;
  146. border-bottom: 1px solid #D8D8D8;
  147. }
  148. h3 {
  149. font-size: 1.3em;
  150. color: #000077;
  151. margin-top: 0.5em;
  152. margin-bottom: 0.3em;
  153. clear: both;
  154. }
  155. h4 {
  156. font-size: 1.3em;
  157. color: #219B00;
  158. margin-bottom: 0.3em;
  159. margin-top: 0.3em;
  160. clear: both;
  161. }
  162. h5 {
  163. font-size: 1.2em;
  164. background-color: #F6F6F6;
  165. border-bottom: 1px solid #D8D8D8;
  166. border-top: 1px solid #D8D8D8;
  167. padding-left: 10px;
  168. padding-top: .3em;
  169. padding-bottom: .3em;
  170. margin-top: 0.4em;
  171. margin-bottom: 0.2em;
  172. margin-left: -10px;
  173. margin-right: -10px;
  174. clear: both;
  175. }
  176. h6 {
  177. font-size: 1.0em;
  178. color: #333333;
  179. margin-bottom: 0.2em;
  180. margin-top: 0.1em;
  181. border-bottom: 1px solid #D8D8D8;
  182. clear: both;
  183. }
  184. /*
  185. * BLOCKQUOTE
  186. *
  187. */
  188. blockquote {
  189. margin-right: 10px;
  190. margin-bottom: 0.6em;
  191. margin-top: 0.3em;
  192. padding: 1em .5em 1em 2em;
  193. background: url(../images/img-quote.png) no-repeat 0em .5em;
  194. font-style: italic;
  195. }
  196. /*
  197. * END DEFAULT STYLES
  198. *
  199. */
  200. /*
  201. * 1. BRANDING AND MARKETING
  202. *
  203. */
  204. /*
  205. * BRANDING AREA
  206. * logo, tagline, background and hyperlink
  207. */
  208. #header div.branding {
  209. height: 68px;
  210. background: url(../images/img-branding-background.png) repeat-x top;
  211. display: block;
  212. width: 100%;
  213. overflow: hidden;
  214. }
  215. #header div.branding img {
  216. padding-top: 20px;
  217. padding-left: 10px;
  218. }
  219. #header div.branding a {
  220. width: 100%;
  221. height: 68px;
  222. display: block;
  223. background-image: none;
  224. padding-right: none;
  225. }
  226. #header div.branding p {
  227. text-indent: -5000px;
  228. }
  229. /*
  230. * ADVERTISMENT CONTAINER
  231. *
  232. */
  233. .advertisement {
  234. padding:0;
  235. margin: 0;
  236. width: 100%;
  237. }
  238. .advertisement p {
  239. border: 1px solid #D8D8D8;
  240. padding: 0.4em 0.4em;
  241. background-color: #F6F6F6;
  242. }
  243. .advertisement span {
  244. text-transform: uppercase;
  245. padding: 0;
  246. float: right;
  247. font-size: 0.7em;
  248. color: #B0B0B0;
  249. padding-bottom: 0.3em;
  250. }
  251. /*
  252. * 2. LISTS
  253. *
  254. */
  255. /*
  256. * LIST WITH ICON
  257. * 30 x 30 graphic
  258. */
  259. ul.list-graphical {
  260. list-style-type: none;
  261. padding: 0;
  262. margin-top: 0;
  263. margin-bottom: 0;
  264. margin-left: -10px;
  265. margin-right: -10px;
  266. border-bottom: 1px solid #D5D8D8;
  267. color: #333333;
  268. }
  269. ul.list-graphical li {
  270. background: #F6F6F6 url(../images/sprite-list.png) repeat-x top;
  271. display: block;
  272. line-height: 40px;
  273. }
  274. ul.list-graphical a {
  275. display: block;
  276. padding-left: 50px;
  277. background: transparent url(../images/img-30x30-icon.png) no-repeat 7px top;
  278. height: 40px;
  279. text-decoration: none;
  280. }
  281. ul.list-graphical a:hover {
  282. background: transparent url(../images/img-30x30-icon.png) no-repeat 7px bottom;
  283. color: #FFFFFF;
  284. outline: none;
  285. }
  286. ul.list-graphical li:hover {
  287. background: #82CB20 url(../images/sprite-list.png) repeat-x 0px -50px;
  288. }
  289. /*
  290. * ALTERNATE GRAPHIC
  291. * 40 x 40 graphic
  292. */
  293. /*---add this class if using a 40x40 graphic---*/
  294. ul.list-graphical a.photo {
  295. display: block;
  296. padding-left: 50px;
  297. background: transparent url(../images/img-40x40.png) no-repeat 0px 0px;
  298. height: 40px;
  299. }
  300. /*
  301. * SIMPLE STYLED LIST BOX
  302. *
  303. */
  304. /*note: line height adjusts height*/
  305. ul.list {
  306. list-style-type: none;
  307. padding: 0;
  308. margin-top: 0;
  309. margin-bottom: 0;
  310. margin-left: -10px;
  311. margin-right: -10px;
  312. border-bottom: 1px solid #D5D8D8;
  313. color: #333333;
  314. }
  315. ul.list li {
  316. background: #F6F6F6 url(../images/sprite-list.png) repeat-x top;
  317. line-height: 40px;
  318. display: block;
  319. }
  320. ul.list a {
  321. padding-left: 10px;
  322. display: block;
  323. height: 40px;
  324. background: url(../images/sprite-open.png) no-repeat right top;
  325. text-decoration: none;
  326. }
  327. ul.list li:hover {
  328. background: #82CB20 url(../images/sprite-list.png) repeat-x 0px -50px;
  329. color: #FFFFFF;
  330. }
  331. ul.list a:link, ul.list a:visited {
  332. color: #333333;
  333. }
  334. ul.list a:hover {
  335. color: #FFFFFF;
  336. background: url(../images/sprite-open.png) no-repeat right bottom;
  337. outline: none;
  338. }
  339. ul.list a:active {
  340. color: #990000;
  341. }
  342. /*
  343. * ACCORDION DEFINITION LIST
  344. *
  345. */
  346. dl.list-accordion {
  347. margin-left: -10px;
  348. margin-right: -10px;
  349. border-bottom: 1px solid #D5D8D8;
  350. }
  351. dl.list-accordion dt{
  352. padding-left: 10px;
  353. line-height: 40px;
  354. height: 40px;
  355. }
  356. dl.list-accordion dd {
  357. padding-left: 10px;
  358. padding-right: 10px;
  359. padding-top: 0.5em;
  360. padding-bottom: 0.4em;
  361. line-height: normal;
  362. }
  363. /*definition term*/
  364. dl.list-accordion dt {
  365. background: #F6F6F6 url(../images/sprite-list.png) repeat-x top;
  366. }
  367. dl.list-accordion dt.expanded {
  368. border-bottom: 1px solid #D5D8D8;
  369. }
  370. dl.list-accordion dt.collapsed {
  371. border-bottom: none;
  372. }
  373. /*container for expand/collapse icon*/
  374. dl.list-accordion dt span {
  375. width: 14px;
  376. height: 14px;
  377. margin-top: 12px;
  378. margin-right: 0.5em;
  379. display: block;
  380. float: left;
  381. }
  382. /*switches icon when expanded*/
  383. dl.list-accordion dt.expanded span{
  384. background: url(../images/sprite-expand-collapse.png) no-repeat left bottom;
  385. }
  386. /*switches icon when collapsed*/
  387. dl.list-accordion dt.collapsed span{
  388. background: url(../images/sprite-expand-collapse.png) no-repeat left top;
  389. }
  390. dl.list-accordion dt:hover {
  391. background: #82CB20 url(../images/sprite-list.png) repeat-x 0px -50px;
  392. color: #FFFFFF;
  393. cursor: pointer;
  394. }
  395. /*definition container*/
  396. dl.list-accordion dd {
  397. background-color: #FFFFF;
  398. padding-left: 2em;
  399. }
  400. /*
  401. * IMAGE GRID
  402. *
  403. */
  404. ul.grid {
  405. width: 100%;
  406. margin: 0 auto;
  407. }
  408. ul.grid li {
  409. display: inline;
  410. }
  411. ul.grid li img{
  412. border: 1px solid #D8D8D8;
  413. padding: .2em .2em;
  414. margin-right: .4em;
  415. margin-bottom: .4em;
  416. }
  417. /*
  418. * 3. NAVIGATION COMPONENTS
  419. *
  420. */
  421. /*
  422. * BACK TO TOP
  423. *
  424. */
  425. div.top {
  426. font-size: .9em;
  427. background: #F6F6F6 url(../images/img-top.png) no-repeat 10px center;
  428. border-bottom: 1px solid #D8D8D8;
  429. border-top: 1px solid #D8D8D8;
  430. padding-left: 2.2em;
  431. padding-top: .3em;
  432. padding-bottom: .3em;
  433. margin-top: 0.5em;
  434. margin-bottom: 0.5em;
  435. margin-left: -10px;
  436. margin-right: -10px;
  437. clear: both;
  438. }
  439. div.top a {
  440. color: #535353;
  441. text-decoration: none;
  442. width: 100%;
  443. display: block;
  444. }
  445. /*
  446. * HOME
  447. *
  448. */
  449. div.home {
  450. font-size: .9em;
  451. background: #F6F6F6 url(../images/img-home.png) no-repeat 10px center;
  452. border-top: 1px solid #D8D8D8;
  453. padding-left: 1.5em;
  454. padding-top: .3em;
  455. padding-bottom: .3em;
  456. margin-top: 0.5em;
  457. margin-bottom: 0em;
  458. margin-left: -10px;
  459. margin-right: -10px;
  460. clear: both;
  461. }
  462. div.home a {
  463. color: #535353;
  464. text-decoration: none;
  465. width: 100%;
  466. display: block;
  467. }
  468. /*
  469. * BREADCRUMBS
  470. *
  471. */
  472. ul.breadcrumbs {
  473. margin-left: -10px;
  474. margin-right: -10px;
  475. padding-top: .5em;
  476. padding-bottom: .5em;
  477. padding-left: 10px;
  478. padding-right: .5em;
  479. font-size: 80%;
  480. list-style-type: none;
  481. }
  482. ul.breadcrumbs li {
  483. display: inline;
  484. line-height: 1.5em;
  485. }
  486. /*
  487. * FOOTER OR ADMIN NAV
  488. *
  489. */
  490. ul.nav-footer {
  491. display: block;
  492. color: #FFF;
  493. padding-top: 0em;
  494. padding-bottom: .5em;
  495. padding-left: 10px;
  496. padding-right: .5em;
  497. font-size: .85em;
  498. height: 2em;
  499. }
  500. ul.nav-footer li {
  501. display: inline;
  502. line-height: 1.5em;
  503. float: left;
  504. }
  505. ul.nav-footer li a {
  506. padding-right: 0.5em;
  507. padding-left: 0.5em;
  508. border-right: 1px solid #FFF;
  509. text-decoration: none;
  510. }
  511. ul.nav-footer li.last a {
  512. border-right: none;
  513. padding-right: 0;
  514. }
  515. ul.nav-footer li.first a {
  516. padding-left: 0;
  517. }
  518. ul.nav-footer a {
  519. color: #FFF;
  520. }
  521. /*
  522. * NAVIGATION BAR (ROUNDED CORNERS)
  523. *
  524. */
  525. ul.nav-horizontal-rounded {
  526. padding:0;
  527. margin: 0 0 10px 0;
  528. list-style-type: none;
  529. width: 100%;
  530. height: 40px;
  531. float: left;
  532. }
  533. /*line height determines vertical text positioning*/
  534. ul.nav-horizontal-rounded li {
  535. float: left;
  536. display: block;
  537. padding: 0;
  538. margin-bottom: 0;
  539. line-height: 40px;
  540. text-align: center;
  541. text-decoration: none;
  542. background: #FFF url(../images/sprite-nav-rounded.png) no-repeat -20px 0px;
  543. }
  544. ul.nav-horizontal-rounded li:hover {
  545. background: url(../images/sprite-nav-rounded.png) repeat-x -20px -50px;
  546. color: #FFF;
  547. }
  548. /*height centers text vertically*/
  549. ul.nav-horizontal-rounded li a {
  550. display: block;
  551. background: url(../images/vertical-divider.png) repeat-y left center;
  552. height: 40px;
  553. padding-right: 0px;
  554. text-decoration: none;
  555. }
  556. ul.nav-horizontal-rounded .first a {
  557. background-image: none;
  558. }
  559. ul.nav-horizontal-rounded li a:hover {
  560. color: #FFF;
  561. background-image: none;
  562. cursor: pointer;
  563. outline: none;
  564. }
  565. /*left rounded corner*/
  566. ul.nav-horizontal-rounded li.first {
  567. background: #FFF url(../images/sprite-nav-rounded.png) no-repeat 0px 0px;
  568. }
  569. ul.nav-horizontal-rounded li.first :hover {
  570. background: #92CF1A url(../images/sprite-nav-rounded.png) repeat-x 0px -50px;
  571. color: #FFF;
  572. }
  573. /*right rounded corner*/
  574. ul.nav-horizontal-rounded li.last :hover {
  575. background: #92CF1A url(../images/sprite-nav-rounded.png) repeat-x right -50px;
  576. color: #FFF;
  577. }
  578. ul.nav-horizontal-rounded li.last {
  579. background: #FFF url(../images/sprite-nav-rounded.png) no-repeat right 0px;
  580. }
  581. /*
  582. * SIMPLE NAVIGATION BAR
  583. *
  584. */
  585. ul.nav-horizontal-flat {
  586. padding: 0;
  587. margin: 0 0 10px 0;
  588. list-style-type: none;
  589. width: 100%;
  590. height: 40px;
  591. float: left;
  592. border-top: 1px solid #D8D8D8;
  593. border-bottom: 2px solid #D8D8D8;
  594. border-left: 1px solid #D8D8D8;
  595. border-right: 1px solid #D8D8D8;
  596. background: #F6F6F6 url(../images/sprite-list.png) repeat-x 0px 0px;
  597. }
  598. ul.nav-horizontal-flat li {
  599. float: left;
  600. display: block;
  601. padding: 0;
  602. margin: 0;
  603. line-height: 40px;
  604. text-align: center;
  605. background: #F6F6F6 url(../images/sprite-list.png) repeat-x 0px 0px;
  606. }
  607. ul.nav-horizontal-flat li a {
  608. text-decoration: none;
  609. }
  610. ul.nav-horizontal-flat li.last {
  611. background-image: none;
  612. background-color: transparent;
  613. }
  614. ul.nav-horizontal-flat li:hover {
  615. background: #92CF1A url(../images/sprite-list.png) repeat-x 0px -50px;
  616. color: #FFF;
  617. }
  618. /*divider*/
  619. /*removed on first item and on hover*/
  620. ul.nav-horizontal-flat li a {
  621. display: block;
  622. background: url(../images/vertical-divider.png) repeat-y left center;
  623. height: 40px;
  624. padding-right: 0px;
  625. cursor: pointer;
  626. }
  627. ul.nav-horizontal-flat .first a {
  628. background-image: none;
  629. }
  630. ul.nav-horizontal-flat li a:hover {
  631. color: #FFF;
  632. background-image: none;
  633. outline: none;
  634. }
  635. /*sets number of navigation bar items*/
  636. /*add class to li*/
  637. .four-piece {
  638. width: 25%;
  639. }
  640. .three-piece {
  641. width: 33.3%;
  642. }
  643. .two-piece {
  644. width: 50%;
  645. }
  646. /*
  647. * 4. STYLIZED LINKS
  648. * includes icon to represent the type of link
  649. */
  650. /*external link*/
  651. a.external {
  652. background: url(../images/img-link-external.png) no-repeat right top;
  653. padding-right: 1em;
  654. }
  655. /*links to ical data*/
  656. /*see 'data-ical' in resources*/
  657. a.ical {
  658. background: url(../images/img-link-ical.png) no-repeat right top;
  659. padding-right: 1em;
  660. }
  661. a[href^="mailto:"] {
  662. background: url(../images/img-link-email.png) no-repeat right top;
  663. padding-right: 1em;
  664. }
  665. a[href^="tel:"] {
  666. background: url(../images/img-link-tel.png) no-repeat right top;
  667. padding-right: 1em;
  668. }
  669. a[href^="sms:"] {
  670. background: url(../images/img-link-sms.png) no-repeat right top;
  671. padding-right: 1em;
  672. }
  673. /*
  674. * 5. BUTTONS
  675. *
  676. */
  677. /*
  678. * STYLED BUTTON
  679. *
  680. */
  681. a.button-flat {
  682. display: block;
  683. line-height: 40px;
  684. height: 40px;
  685. width: 100px;
  686. background: #F6F6F6 url(../images/sprite-flat-button.png) repeat-x 0px 0px;
  687. text-align: center;
  688. border-bottom: 2px solid #D8D8D8;
  689. border-left: 1px solid #D8D8D8;
  690. border-right: 1px solid #D8D8D8;
  691. text-decoration: none;
  692. color: #333333;
  693. padding: 0;
  694. }
  695. a.button-flat:hover {
  696. background: #92CF1A url(../images/sprite-flat-button.png) repeat-x 0px -50px;
  697. color: #FFF;
  698. outline: none;
  699. }
  700. /*
  701. * STYLED BUTTON (ROUNDED CORNERS)
  702. *
  703. */
  704. ul.button-rounded{
  705. margin: 0;
  706. padding: 0;
  707. list-style: none;
  708. float: left;
  709. }
  710. ul.button-rounded li {
  711. float: left;
  712. margin-right: 10px;
  713. margin-bottom: 10px;
  714. margin-top: 10px;
  715. line-height: 40px;
  716. background: url(../images/sprite-button-rounded-right.png) no-repeat right top;
  717. text-align: center;
  718. }
  719. ul.button-rounded li:hover {
  720. background: url(../images/sprite-button-rounded-right.png) no-repeat right bottom;
  721. }
  722. ul.button-rounded li a {
  723. display: block;
  724. padding: 0 1em;
  725. height: 40px;
  726. background: url(../images/sprite-button-rounded-left.png) no-repeat left top;
  727. text-decoration: none;
  728. float: left;
  729. color: #333333;
  730. }
  731. ul.button-rounded li a:hover {
  732. background: url(../images/sprite-button-rounded-left.png) no-repeat left bottom;
  733. color: #FFF;
  734. outline: none;
  735. }
  736. /*
  737. * FORM BUTTON (ROUNDED CORNERS)
  738. *
  739. */
  740. button.button-submit {
  741. border:0;
  742. cursor:pointer;
  743. font-weight:bold;
  744. font-size: .95em;
  745. color: #333333;
  746. padding:0 1.5em 0 0;
  747. text-align:center;
  748. margin: 0.4em 0;
  749. }
  750. button.button-submit span {
  751. position:relative;
  752. display:block;
  753. white-space:nowrap;
  754. padding:0 0 0 1.5em;
  755. }
  756. button.button-submit {
  757. background:url(../images/sprite-button-rounded-right.png) no-repeat right top;
  758. height:40px;
  759. line-height:40px;
  760. }
  761. button.button-submit span {
  762. height:40px;
  763. line-height:40px;
  764. background:url(../images/sprite-button-rounded-left.png) no-repeat left top;
  765. }
  766. button.button-submit:hover {
  767. background:url(../images/sprite-button-rounded-right.png) no-repeat right bottom;
  768. color:#fff;
  769. }
  770. button.button-submit:hover span {
  771. background:url(../images/sprite-button-rounded-left.png) no-repeat left bottom;
  772. color:#fff;
  773. }
  774. /*
  775. * 6. FORMS
  776. *
  777. */
  778. fieldset {
  779. }
  780. legend {
  781. font-size: 110%;
  782. font-weight: bold;
  783. padding-bottom: .5em;
  784. color: #000077;
  785. }
  786. form {
  787. color: #333333;
  788. }
  789. form ul {
  790. list-style-type: none;
  791. margin-bottom: .5em;
  792. margin-top: .5em;
  793. padding: 0;
  794. }
  795. form ul li {
  796. margin: 0;
  797. padding: 0;
  798. }
  799. form label {
  800. font-size: .9em;
  801. margin-bottom: .5em;
  802. margin-top: .5em;
  803. }
  804. input[type='text'] {
  805. border: 1px solid #D8D8D8;
  806. background: #FFF url(../images/img-form-input-shadow.png) repeat-x top;
  807. display: block;
  808. padding: 0.2em;
  809. width: 98%;
  810. color: #333333;
  811. margin-bottom: 1em;
  812. }
  813. textarea {
  814. border: 1px solid #D8D8D8;
  815. background: #FFF url(../images/img-form-input-shadow.png) repeat-x top;
  816. display: block;
  817. padding: 0.2em;
  818. color: #333333;
  819. width: 98%;
  820. line-height: normal;
  821. margin-bottom: .7em;
  822. }
  823. form ul li input[type='radio'], form ul li input[type='checkbox'] {
  824. margin:0.1em 0em;
  825. padding: 0;
  826. }
  827. select {
  828. border: 1px solid #D8D8D8;
  829. background: #fff;
  830. color: #666666;
  831. padding-top: 0.3em;
  832. padding-bottom: 0.3em;
  833. padding-left: 0.5em;
  834. margin: 0.2em 0;
  835. display: block;
  836. width: 98%;
  837. }
  838. input[type='button'] {
  839. border: 1px solid #D8D8D8;
  840. background-color: white;
  841. padding: 1em 1.3em;
  842. color: #666666;
  843. margin: 1em 0em;
  844. }
  845. /*
  846. * 7. TABLES
  847. *
  848. */
  849. table {
  850. border: 1px solid #D8D8D8;
  851. margin: 0;
  852. width: 100%;
  853. color: #333333;
  854. }
  855. td {
  856. border-bottom: 1px solid #D8D8D8;
  857. border-right: 1px solid #D8D8D8;
  858. padding-left: .3em;
  859. padding-right: .3em;
  860. padding-top: .2em;
  861. padding-bottom: .2em;
  862. line-height: 1.5em;
  863. }
  864. tr {
  865. height: 1.5em;
  866. }
  867. th, tfoot {
  868. border-top: 1px solid #FFF;
  869. border-left: 1px solid #FFF;
  870. background-color: #434343;
  871. text-align: left;
  872. padding-left: .3em;
  873. padding-right: .2em;
  874. padding-top: .2em;
  875. padding-bottom: .2em;
  876. line-height: 1.5em;
  877. font-weight: bold;
  878. color: #FFF;
  879. }
  880. caption {
  881. font-style: italic;
  882. caption-side: bottom;
  883. text-align: left;
  884. padding-top: 0.3em;
  885. padding-bottom: 0.3em;
  886. }
  887. .odd {
  888. background: #F6F6F6;
  889. }
  890. tr:hover {
  891. background: #82CB20 url(../images/sprite-table-hover.png) repeat-x top;
  892. color: #FFF;
  893. }
  894. /*
  895. * 8. FLEXIBLE CONTAINERS
  896. *
  897. */
  898. /*
  899. * SIMPLE FLEXIBLE BOX
  900. *
  901. */
  902. .box-flat {
  903. background: #FBFBFB url(../images/img-box-flat.png) repeat-x left bottom;
  904. margin: 1em 0em;
  905. padding: 1em 1em;
  906. border-top: 1px solid #D8D8D8;
  907. border-bottom: 2px solid #D8D8D8;
  908. border-left: 1px solid #D8D8D8;
  909. border-right: 1px solid #D8D8D8;
  910. }
  911. /*
  912. * FLEXIBLE BOX (ROUNDED CORNERS)
  913. *
  914. */
  915. .box-rounded {
  916. background: url(../images/img-box-bottom-left.png) no-repeat left bottom;
  917. margin-top: 1em;
  918. margin-bottom: 1em;
  919. }
  920. .box-rounded-outer {
  921. background: url(../images/img-box-bottom-right.png) no-repeat right bottom;
  922. padding-bottom: 10px;
  923. }
  924. .box-rounded-inner {
  925. background: url(../images/img-box-top-left.png) no-repeat left top;
  926. }
  927. .box-rounded h2 {
  928. background: url(../images/img-box-top-right.png) no-repeat right top;
  929. padding-top: 10px;
  930. padding-bottom:5px;
  931. margin: 0;
  932. font-size: 110%;
  933. color: #219B00;
  934. }
  935. .box-rounded p {
  936. padding:0;
  937. margin: 0;
  938. }
  939. .box-rounded h2, .box-rounded p {
  940. padding-left: 15px;
  941. padding-right: 15px;
  942. border: none;
  943. }
  944. /*
  945. * 9. UTILITY COMPONENTS
  946. * see documentation for details
  947. */
  948. /*
  949. * 5-STAR RATING
  950. * static only
  951. */
  952. div.rating span{
  953. float: right;
  954. padding-top: 0.4em;
  955. }
  956. div.rating {
  957. width: 150px;
  958. height: 24px;
  959. background: url(../images/sprite-rating.png) no-repeat 0px 0px;
  960. margin-bottom: 1em;
  961. }
  962. div.stars-0 {
  963. background-position: left 0px;
  964. }
  965. div.stars-1 {
  966. background-position: left -25px;
  967. }
  968. div.stars-2 {
  969. background-position: left -50px;
  970. }
  971. div.stars-3 {
  972. background-position: left -75px;
  973. }
  974. div.stars-4 {
  975. background-position: left -100px;
  976. }
  977. div.stars-5 {
  978. background-position-y: left -125px;
  979. }
  980. /*
  981. * \ SWITCH
  982. *
  983. */
  984. ol.toggle-switch {
  985. background: url(../images/sprite-toggle-switch.png) no-repeat left top;
  986. height: 35px;
  987. width: 100px;
  988. padding: 10px 0 0 0;
  989. margin: 0;
  990. }
  991. ol.toggle-switch li {
  992. display: block;
  993. float: left;
  994. text-align: center;
  995. width: 50%;
  996. color: #FFFFFF;
  997. }
  998. ol.toggle-switch li a {
  999. color: #FFFFFF;
  1000. text-transform: uppercase;
  1001. font-weight: bold;
  1002. text-decoration: none;
  1003. cursor: pointer;
  1004. }
  1005. ol.toggle-switch li a:hover {
  1006. outline: none;
  1007. }
  1008. ol.toggle-switch.on {
  1009. background-position: left top;
  1010. }
  1011. ol.toggle-switch.off {
  1012. background-position: left -50px;
  1013. }
  1014. .off li.label-on {
  1015. visibility: hidden;
  1016. }
  1017. .on li.label-off {
  1018. visibility: hidden;
  1019. }
  1020. ul.toggle label {
  1021. font-weight: bold;
  1022. }
  1023. /*
  1024. * LIST CONTAINER FOR TOGGLE SWITCH
  1025. * includes label
  1026. */
  1027. /*line-height adjusts container height*/
  1028. ul.list-toggle {
  1029. list-style-type: none;
  1030. padding: 0;
  1031. margin-top: 0;
  1032. margin-bottom: 0;
  1033. margin-left: -10px;
  1034. margin-right: -10px;
  1035. border-bottom: 1px solid #D5D8D8;
  1036. color: #333333;
  1037. height: 45px;
  1038. background: #F6F6F6 url(../images/sprite-list.png) repeat-x top;
  1039. display: block;
  1040. }
  1041. ul.list-toggle label {
  1042. padding-left: 10px;
  1043. margin: 15px 0px 0px 0px;
  1044. float: left;
  1045. display: block;
  1046. }
  1047. ul.list-toggle ol.toggle-switch {
  1048. margin:5px 10px 0px 0px;
  1049. float: right;
  1050. height: 30px;
  1051. }
  1052. /*
  1053. * SLIDESHOW
  1054. *
  1055. */
  1056. .slideshow {
  1057. width: 100%;
  1058. text-align: center;
  1059. margin: 0 auto;
  1060. }
  1061. .slideshow img {
  1062. border: 1px solid #D8D8D8;
  1063. padding: .3em .3em;
  1064. margin-top: 1em;
  1065. margin-bottom:0;
  1066. }
  1067. .slideshow span {
  1068. clear: both;
  1069. width: 190px;
  1070. display: block;
  1071. margin-left: auto;
  1072. margin-right: auto;
  1073. margin-bottom:0.5em;
  1074. font-size: 0.9em;
  1075. padding: .3em 5px;
  1076. }
  1077. .slideshow a {
  1078. text-decoration: none;
  1079. }
  1080. .slideshow ul.controls {
  1081. width: 200px;
  1082. float:none;
  1083. margin: 0 auto 1em auto;
  1084. }
  1085. ol.data {
  1086. display: none;
  1087. }