API tools faq
paste
Guest User

Site.CSS John

a guest
Jun 17th, 2013
133
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 13.38 KB | None | 0 0
raw download clone embed print report
  1. html {
  2. background-color: #e2e2e2;
  3. margin: 0;
  4. padding: 0;
  5. }
  6.  
  7. body {
  8. background-color: #fff;
  9. border-top: solid 10px #000;
  10. color: #333;
  11. font-size: .85em;
  12. font-family: "Segoe UI", Verdana, Helvetica, Sans-Serif;
  13. margin: 0;
  14. padding: 0;
  15. }
  16.  
  17. a {
  18. color: #333;
  19. outline: none;
  20. padding-left: 3px;
  21. padding-right: 3px;
  22. text-decoration: underline;
  23. }
  24.  
  25. a:link, a:visited,
  26. a:active, a:hover {
  27. color: #333;
  28. }
  29.  
  30. a:hover {
  31. background-color: #c7d1d6;
  32. }
  33.  
  34. header, footer, hgroup,
  35. nav, section {
  36. display: block;
  37. }
  38.  
  39. mark {
  40. background-color: #a6dbed;
  41. padding-left: 5px;
  42. padding-right: 5px;
  43. }
  44.  
  45. .float-left {
  46. float: left;
  47. }
  48.  
  49. .float-right {
  50. float: right;
  51. }
  52.  
  53. .clear-fix:after {
  54. content: ".";
  55. clear: both;
  56. display: block;
  57. height: 0;
  58. visibility: hidden;
  59. }
  60.  
  61. h1, h2, h3,
  62. h4, h5, h6 {
  63. color: #000;
  64. margin-bottom: 0;
  65. padding-bottom: 0;
  66. }
  67.  
  68. h1 {
  69. font-size: 2em;
  70. }
  71.  
  72. h2 {
  73. font-size: 1.75em;
  74. }
  75.  
  76. h3 {
  77. font-size: 1.2em;
  78. }
  79.  
  80. h4 {
  81. font-size: 1.1em;
  82. }
  83.  
  84. h5, h6 {
  85. font-size: 1em;
  86. }
  87.  
  88. h5 a:link, h5 a:visited, h5 a:active {
  89. padding: 0;
  90. text-decoration: none;
  91. }
  92.  
  93. /* main layout
  94. ----------------------------------------------------------*/
  95. .content-wrapper {
  96. margin: 0 auto;
  97. max-width: 960px;
  98. }
  99.  
  100. #body {
  101. background-color: #efeeef;
  102. clear: both;
  103. padding-bottom: 35px;
  104. }
  105.  
  106. .main-content {
  107. background: url("../Images/accent.png") no-repeat;
  108. padding-left: 10px;
  109. padding-top: 30px;
  110. }
  111.  
  112. .featured + .main-content {
  113. background: url("../Images/heroAccent.png") no-repeat;
  114. }
  115.  
  116. header .content-wrapper {
  117. padding-top: 20px;
  118. }
  119.  
  120. footer {
  121. clear: both;
  122. background-color: #e2e2e2;
  123. font-size: .8em;
  124. height: 100px;
  125. }
  126.  
  127.  
  128. /* site title
  129. ----------------------------------------------------------*/
  130. .site-title {
  131. color: #c8c8c8;
  132. font-family: Rockwell, Consolas, "Courier New", Courier, monospace;
  133. font-size: 2.3em;
  134. margin: 0;
  135. }
  136.  
  137. .site-title a, .site-title a:hover, .site-title a:active {
  138. background: none;
  139. color: #c8c8c8;
  140. outline: none;
  141. text-decoration: none;
  142. }
  143.  
  144.  
  145. /* login
  146. ----------------------------------------------------------*/
  147. #login {
  148. display: block;
  149. font-size: .85em;
  150. margin: 0 0 10px;
  151. text-align: right;
  152. }
  153.  
  154. #login a {
  155. background-color: #d3dce0;
  156. margin-left: 10px;
  157. margin-right: 3px;
  158. padding: 2px 3px;
  159. text-decoration: none;
  160. }
  161.  
  162. #login a.username {
  163. background: none;
  164. margin-left: 0px;
  165. text-decoration: underline;
  166. }
  167.  
  168. #login ul {
  169. margin: 0;
  170. }
  171.  
  172. #login li {
  173. display: inline;
  174. list-style: none;
  175. }
  176.  
  177.  
  178. /* menu
  179. ----------------------------------------------------------*/
  180. ul#menu {
  181. font-size: 1.3em;
  182. font-weight: 600;
  183. margin: 0 0 5px;
  184. padding: 0;
  185. text-align: right;
  186. }
  187.  
  188. ul#menu li {
  189. display: inline;
  190. list-style: none;
  191. padding-left: 15px;
  192. }
  193.  
  194. ul#menu li a {
  195. background: none;
  196. color: #999;
  197. text-decoration: none;
  198. }
  199.  
  200. ul#menu li a:hover {
  201. color: #333;
  202. text-decoration: none;
  203. }
  204.  
  205.  
  206. /* page elements
  207. ----------------------------------------------------------*/
  208. /* featured */
  209. .featured {
  210. background-color: #fff;
  211. }
  212.  
  213. .featured .content-wrapper {
  214. background-color: #7ac0da;
  215. background-image: -ms-linear-gradient(left, #7ac0da 0%, #a4d4e6 100%);
  216. background-image: -o-linear-gradient(left, #7ac0da 0%, #a4d4e6 100%);
  217. background-image: -webkit-gradient(linear, left top, right top, color-stop(0, #7ac0da), color-stop(1, #a4d4e6));
  218. background-image: -webkit-linear-gradient(left, #7ac0da 0%, #a4d4e6 100%);
  219. background-image: linear-gradient(left, #7ac0da 0%, #a4d4e6 100%);
  220. color: #3e5667;
  221. padding: 20px 40px 30px 40px;
  222. }
  223.  
  224. .featured hgroup.title h1, .featured hgroup.title h2 {
  225. color: #fff;
  226. }
  227.  
  228. .featured p {
  229. font-size: 1.1em;
  230. }
  231.  
  232. /* page titles */
  233. hgroup.title {
  234. margin-bottom: 10px;
  235. }
  236.  
  237. hgroup.title h1, hgroup.title h2 {
  238. display: inline;
  239. }
  240.  
  241. hgroup.title h2 {
  242. font-weight: normal;
  243. margin-left: 3px;
  244. }
  245.  
  246. /* features */
  247. section.feature {
  248. width: 300px;
  249. float: left;
  250. padding: 10px;
  251. }
  252.  
  253. /* ordered list */
  254. ol.round {
  255. list-style-type: none;
  256. padding-left: 0;
  257. }
  258.  
  259. ol.round li {
  260. margin: 25px 0;
  261. padding-left: 45px;
  262. }
  263.  
  264. ol.round li.zero {
  265. background: url("../Images/orderedList0.png") no-repeat;
  266. }
  267.  
  268. ol.round li.one {
  269. background: url("../Images/orderedList1.png") no-repeat;
  270. }
  271.  
  272. ol.round li.two {
  273. background: url("../Images/orderedList2.png") no-repeat;
  274. }
  275.  
  276. ol.round li.three {
  277. background: url("../Images/orderedList3.png") no-repeat;
  278. }
  279.  
  280. ol.round li.four {
  281. background: url("../Images/orderedList4.png") no-repeat;
  282. }
  283.  
  284. ol.round li.five {
  285. background: url("../Images/orderedList5.png") no-repeat;
  286. }
  287.  
  288. ol.round li.six {
  289. background: url("../Images/orderedList6.png") no-repeat;
  290. }
  291.  
  292. ol.round li.seven {
  293. background: url("../Images/orderedList7.png") no-repeat;
  294. }
  295.  
  296. ol.round li.eight {
  297. background: url("../Images/orderedList8.png") no-repeat;
  298. }
  299.  
  300. ol.round li.nine {
  301. background: url("../Images/orderedList9.png") no-repeat;
  302. }
  303.  
  304. /* content */
  305. article {
  306. float: left;
  307. width: 70%;
  308. }
  309.  
  310. aside {
  311. float: right;
  312. width: 25%;
  313. }
  314.  
  315. aside ul {
  316. list-style: none;
  317. padding: 0;
  318. }
  319.  
  320. aside ul li {
  321. background: url("../Images/bullet.png") no-repeat 0 50%;
  322. padding: 2px 0 2px 20px;
  323. }
  324.  
  325. .label {
  326. font-weight: 700;
  327. }
  328.  
  329. /* login page */
  330. #loginForm {
  331. border-right: solid 2px #c8c8c8;
  332. float: left;
  333. width: 55%;
  334. }
  335.  
  336. #loginForm .validation-error {
  337. display: block;
  338. margin-left: 15px;
  339. }
  340.  
  341. #socialLoginForm {
  342. margin-left: 40px;
  343. float: left;
  344. width: 40%;
  345. }
  346.  
  347. #socialLoginForm h2 {
  348. margin-bottom: 5px;
  349. }
  350.  
  351. fieldset.open-auth-providers {
  352. margin-top: 15px;
  353. }
  354.  
  355. fieldset.open-auth-providers button {
  356. margin-bottom: 12px;
  357. }
  358.  
  359. /* contact */
  360. .contact h3 {
  361. font-size: 1.2em;
  362. }
  363.  
  364. .contact p {
  365. margin: 5px 0 0 10px;
  366. }
  367.  
  368. .contact iframe {
  369. border: 1px solid #333;
  370. margin: 5px 0 0 10px;
  371. }
  372.  
  373. /* forms */
  374. fieldset {
  375. border: none;
  376. margin: 0;
  377. padding: 0;
  378. }
  379.  
  380. fieldset legend {
  381. display: none;
  382. }
  383.  
  384. fieldset ol {
  385. padding: 0;
  386. list-style: none;
  387. }
  388.  
  389. fieldset ol li {
  390. padding-bottom: 5px;
  391. }
  392.  
  393. label {
  394. display: block;
  395. font-size: 1.2em;
  396. font-weight: 600;
  397. }
  398.  
  399. label.checkbox {
  400. display: inline;
  401. }
  402.  
  403. input, textarea {
  404. border: 1px solid #e2e2e2;
  405. background: #fff;
  406. color: #333;
  407. font-size: 1.2em;
  408. margin: 5px 0 6px 0;
  409. padding: 5px;
  410. width: 300px;
  411. }
  412.  
  413. textarea {
  414. font-family: inherit;
  415. width: 500px;
  416. }
  417.  
  418. input:focus, textarea:focus {
  419. border: 1px solid #7ac0da;
  420. }
  421.  
  422. input[type="checkbox"] {
  423. background: transparent;
  424. border: inherit;
  425. width: auto;
  426. }
  427.  
  428. input[type="submit"],
  429. input[type="button"],
  430. button {
  431. background-color: #d3dce0;
  432. border: 1px solid #787878;
  433. cursor: pointer;
  434. font-size: 1.2em;
  435. font-weight: 600;
  436. padding: 7px;
  437. margin-right: 8px;
  438. width: auto;
  439. }
  440.  
  441. td input[type="submit"],
  442. td input[type="button"],
  443. td button {
  444. font-size: 1em;
  445. padding: 4px;
  446. margin-right: 4px;
  447. }
  448.  
  449. /* info and errors */
  450. .message-info {
  451. border: 1px solid;
  452. clear: both;
  453. padding: 10px 20px;
  454. }
  455.  
  456. .message-error {
  457. clear: both;
  458. color: #e80c4d;
  459. font-size: 1.1em;
  460. font-weight: bold;
  461. margin: 20px 0 10px 0;
  462. }
  463.  
  464. .message-success {
  465. color: #7ac0da;
  466. font-size: 1.3em;
  467. font-weight: bold;
  468. margin: 20px 0 10px 0;
  469. }
  470.  
  471. .error {
  472. color: #e80c4d;
  473. }
  474.  
  475. /* styles for validation helpers */
  476. .field-validation-error {
  477. color: #e80c4d;
  478. font-weight: bold;
  479. }
  480.  
  481. .field-validation-valid {
  482. display: none;
  483. }
  484.  
  485. input.input-validation-error {
  486. border: 1px solid #e80c4d;
  487. }
  488.  
  489. input[type="checkbox"].input-validation-error {
  490. border: 0 none;
  491. }
  492.  
  493. .validation-summary-errors {
  494. color: #e80c4d;
  495. font-weight: bold;
  496. font-size: 1.1em;
  497. }
  498.  
  499. .validation-summary-valid {
  500. display: none;
  501. }
  502.  
  503. /* tables
  504. ----------------------------------------------------------*/
  505. table {
  506. border-style: none;
  507. border-color: inherit;
  508. border-width: 0;
  509. border-collapse: collapse;
  510. border-spacing: 0;
  511. margin-top: 0.75em;
  512. margin-right: 0px;
  513. }
  514.  
  515. th {
  516. font-size: 1.2em;
  517. text-align: left;
  518. border: none 0px;
  519. padding-left: 0;
  520. }
  521.  
  522. th a {
  523. display: block;
  524. position: relative;
  525.  
  526. }
  527.  
  528. th a:link, th a:visited, th a:active, th a:hover {
  529. color: #333;
  530. font-weight: 600;
  531. text-decoration: none;
  532. padding: 0;
  533. }
  534.  
  535. th a:hover {
  536. color: #000;
  537. }
  538.  
  539. th.asc a, th.desc a {
  540. margin-right: .75em;
  541. }
  542.  
  543. th.asc a:after, th.desc a:after {
  544. display: block;
  545. position: absolute;
  546. right: 0em;
  547. top: 0;
  548. font-size: 0.75em;
  549. }
  550.  
  551. th.asc a:after {
  552. content: '▲';
  553. }
  554.  
  555. th.desc a:after {
  556. content: '▼';
  557. }
  558.  
  559. td {
  560. padding: 0.25em 2em 0.25em 0em;
  561. border: 0 none;
  562. }
  563.  
  564. tr.pager td {
  565. padding: 0 0.25em 0 0;
  566. }
  567.  
  568.  
  569. /********************
  570. * Mobile Styles *
  571. ********************/
  572. @media only screen and (max-width: 850px) {
  573.  
  574. /* header
  575. ----------------------------------------------------------*/
  576. header .float-left,
  577. header .float-right {
  578. float: none;
  579. }
  580.  
  581. /* logo */
  582. header .site-title {
  583. margin: 10px;
  584. text-align: center;
  585. }
  586.  
  587. /* login */
  588. #login {
  589. font-size: .85em;
  590. margin: 0 0 12px;
  591. text-align: center;
  592. }
  593.  
  594. #login ul {
  595. margin: 5px 0;
  596. padding: 0;
  597. }
  598.  
  599. #login li {
  600. display: inline;
  601. list-style: none;
  602. margin: 0;
  603. padding: 0;
  604. }
  605.  
  606. #login a {
  607. background: none;
  608. color: #999;
  609. font-weight: 600;
  610. margin: 2px;
  611. padding: 0;
  612. }
  613.  
  614. #login a:hover {
  615. color: #333;
  616. }
  617.  
  618. /* menu */
  619. nav {
  620. margin-bottom: 5px;
  621. }
  622.  
  623. ul#menu {
  624. margin: 0;
  625. padding: 0;
  626. text-align: center;
  627. }
  628.  
  629. ul#menu li {
  630. margin: 0;
  631. padding: 0;
  632. }
  633.  
  634.  
  635. /* main layout
  636. ----------------------------------------------------------*/
  637. .main-content,
  638. .featured + .main-content {
  639. background-position: 10px 0;
  640. }
  641.  
  642. .content-wrapper {
  643. padding-right: 10px;
  644. padding-left: 10px;
  645. }
  646.  
  647. .featured .content-wrapper {
  648. padding: 10px;
  649. }
  650.  
  651. /* page content */
  652. article, aside {
  653. float: none;
  654. width: 100%;
  655. }
  656.  
  657. /* ordered list */
  658. ol.round {
  659. list-style-type: none;
  660. padding-left: 0;
  661. }
  662.  
  663. ol.round li {
  664. padding-left: 10px;
  665. margin: 25px 0;
  666. }
  667.  
  668. ol.round li.zero,
  669. ol.round li.one,
  670. ol.round li.two,
  671. ol.round li.three,
  672. ol.round li.four,
  673. ol.round li.five,
  674. ol.round li.six,
  675. ol.round li.seven,
  676. ol.round li.eight,
  677. ol.round li.nine {
  678. background: none;
  679. }
  680.  
  681. /* features */
  682. section.feature {
  683. float: none;
  684. padding: 10px;
  685. width: auto;
  686. }
  687.  
  688. section.feature img {
  689. color: #999;
  690. content: attr(alt);
  691. font-size: 1.5em;
  692. font-weight: 600;
  693. }
  694.  
  695. /* forms */
  696. input {
  697. width: 90%;
  698. }
  699.  
  700.  
  701.  
  702. /* login page */
  703. #loginForm {
  704. border-right: none;
  705. float: none;
  706. width: auto;
  707. }
  708.  
  709. #loginForm .validation-error {
  710. display: block;
  711. margin-left: 15px;
  712. }
  713.  
  714. #socialLoginForm {
  715. margin-left: 0;
  716. float: none;
  717. width: auto;
  718. }
  719.  
  720. /* footer
  721. ----------------------------------------------------------*/
  722. footer .float-left,
  723. footer .float-right {
  724. float: none;
  725. }
  726.  
  727. footer {
  728. text-align: center;
  729. height: auto;
  730. padding: 10px 0;
  731. }
  732.  
  733. footer p {
  734. margin: 0;
  735. }
  736. }
  737. /* END: Mobile Styles */
Advertisement
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!