API tools faq
paste
alchymyth

yoko full top post styles

alchymyth
Sep 27th, 2011
272
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 9.84 KB | None | 0 0
raw download clone embed print report
  1. /*YOKO THEME; TOP FULL WIDTH POST STYLES - to be added to the bottom of style.css*/
  2.  
  3. .content address {
  4.     padding: 0 0 20px 0;
  5. }
  6. .content abbr, acronym {
  7.     border-bottom: .1em dotted;
  8. }
  9. .content pre, code, tt {
  10.     font-size: 1.1em;
  11. }
  12. /* Headlines
  13. --------------------------------------------- */
  14. .content h1 {
  15.     margin:26px 0 12px;
  16.     font: bold 1.4em/1.4 'Droid Sans', arial, sans-serif;
  17. }
  18. .content h2 {
  19.     margin:26px 0 12px;
  20.     font: bold 1.3em/1.4 'Droid Sans', arial, sans-serif;
  21. }
  22. .content h3 {
  23.     margin: 26px 0 12px;
  24.     font: bold 1.2em/ 1.4 'Droid Sans', arial, sans-serif;
  25. }
  26. .content h4 {
  27.     margin: 22px 0 12px;
  28.     font: bold 1.1em/1.4 'Droid Sans', arial, sans-serif;
  29. }
  30. .content h5 {
  31.     margin: 22px 0 10px;
  32.     font: bold 1em/1.3 'Droid Sans', arial, sans-serif;
  33. }
  34. .content h6 {
  35.     margin: 20px 0 10px;
  36.     font: bold .9em/1.3 'Droid Sans', arial, sans-serif;
  37. }
  38. /* Lists
  39. --------------------------------------------- */
  40. .content .post ul, .content .page ul, .commentlist ul  {
  41.     padding:7px 0 7px 30px;
  42.     line-height: 1.3;
  43. }
  44. .content .post ul li, .content .page ul li, .commentlist ul li {
  45.     padding:0 0 12px;
  46.     list-style: square;
  47. }
  48. .content .post ol, .content .page ol, .commentlist ol  {
  49.     padding:7px 0 7px 30px !important;
  50.     line-height: 1.3;
  51. }
  52. .content .post ol li, .content .page ol li, .commentlist ol li {
  53.     padding:0 0 12px;
  54.     list-style: decimal;
  55. }
  56. .content .post ol ol li, .content .page ol ol li,  .commentlist ol ol li {
  57.     list-style: upper-alpha;
  58. }
  59. .content .post ol ol ol li, .content .page ol ol ol li, .commentlist ol ol ol li {
  60.     list-style: lower-roman;
  61. }
  62. .content dl {
  63.     margin:0 ;
  64.     padding: 0;
  65. }
  66. .content dt {
  67.     font-weight: bold;
  68.     margin: 0;
  69.     padding: 10px 5px 5px;
  70. }
  71. .content dd {
  72.     margin: 0;
  73.     padding: 0 0 10px 15px;
  74. }
  75. /* Posts
  76. --------------------------------------------- */
  77. .content .post {
  78.     margin: 0 0 40px;
  79.     padding: 0 0 40px;
  80.     overflow: hidden;
  81.     border-bottom: 1px solid #ddd;
  82.     clear: both;
  83.     font-size: .95em;
  84.     line-height: 1.6;
  85. }
  86. .content .entry-header h2.entry-title {
  87.     margin: 0 0 12px;
  88.     font: bold 1.8em/1.9 'Droid Sans', arial, sans-serif;
  89. }
  90. .content .entry-header h2.entry-title a:hover {
  91.     color: #777;
  92.     text-decoration: none;
  93. }
  94. .content .post p {
  95.     padding: 0 0 20px;
  96. }
  97. .content .entry-details {
  98.     width: 15.507%;
  99.     padding: 2px 18px 0 0;
  100.     float: left;
  101.  
  102.     font: italic .8em/1.6 'Droid Serif',  Times, serif;
  103. }
  104. .content .entry-details p span.entry-date, .content .entry-details p a {
  105.     width: 100%;
  106.     font-family: 'Droid Sans', arial, sans-serif;
  107.     font-style: normal;
  108. }
  109. .content .entry-content {
  110.     width: 82.5%;
  111.     margin: 0;
  112.     float: right;
  113. }
  114. .content .post img.wp-post-image {
  115.     width: 140px;
  116.     height: auto;
  117.     margin: 5px 0 8px;
  118.     padding: 0;
  119. }
  120. .content .entry-meta p {
  121.     padding: 15px 0 0;
  122.     font: italic .8em/1.5 'Droid Serif', Times, serif;
  123. }
  124. .content .entry-meta a {
  125.     padding: 15px 0 0;
  126.     font-family: 'Droid Sans', arial, sans-serif;
  127.     font-style: normal;
  128. }
  129. .page-link {
  130.     background-color: #f0f0f0;
  131.     border-top: 1px solid #ddd;
  132.     padding: 5px 20px;
  133.     overflow: hidden;
  134.     font-size: .9em;
  135. }
  136. .page-link a {
  137.     font-weight: bold;
  138.     margin: 0 1px;
  139. }
  140. .page-link a:hover {
  141.     text-decoration: none;
  142. }
  143. /* --- Sticky Post --- */
  144. .content .sticky {
  145.     border-top: 1px solid #ddd;
  146.     background-color: #F0F0F0;
  147.     padding: 15px 10px;
  148.     overflow: hidden;
  149. }
  150. /* --- Post Typography --- */
  151. .content strong {
  152.     font-weight: bold;
  153. }
  154. .content p em {
  155.     font-family:'Droid Serif',  Times, serif;
  156.     font-style: italic;
  157. }
  158. .content em {
  159.     font-family:'Droid Serif',  Times, serif;
  160.     font-style: italic;
  161.     font-size: .9em;
  162. }
  163. .content p small {
  164.     font-size: .8em;
  165. }
  166. .content .post blockquote, .content .page blockquote {
  167.     margin: 0 20px 10px 0;
  168.     overflow: hidden;
  169.     font: italic 1.1em/1.6 'Droid Serif', Times, serif;
  170. }
  171. .content .single-entry-content blockquote {
  172.     margin: 20px 20px 10px 20px;
  173.     background: none;
  174. }
  175. .content blockquote cite {
  176.     margin: 10px 0 0 0;
  177.     padding: 0 25px 15px 0;
  178.     float: right;
  179.     font: normal .8em 'Droid Sans', arial, sans-serif;
  180.     text-transform: uppercase;
  181.     letter-spacing: .1em;
  182. }
  183. .content pre {
  184.     background-color: #f0f0f0;
  185.     font-family: monospace;
  186.     font-size: 1.2em;
  187.     line-height: 1.3;
  188.     margin: 0 0 20px 0;
  189.     padding: 10px;
  190. }
  191. .content p.nocomments {
  192.     font-size: .8em;
  193.     text-transform: uppercase;
  194.     letter-spacing: 0.1em;
  195. }
  196. /* --- Post Images and Video --- */
  197. .content img {
  198.     max-width:100%;
  199.     height: auto;
  200.     margin: 0;
  201.     padding: 0;
  202. }
  203. .content img.aligncenter {
  204.     margin: 20px auto;
  205. }
  206. .content img.alignleft ,.content .wp-caption.alignleft {
  207.     margin: 10px 20px 0 0;
  208. }
  209. .content img.alignright,.content .wp-caption.alignright {
  210.     margin: 10px 0 0 20px;
  211. }
  212. .content img.alignnone {
  213.     margin: 20px 0;
  214. }
  215. .content .wp-caption.alignnone {
  216.     margin: 0 0 20px 0;
  217. }
  218. .content .wp-caption.aligncenter{
  219.     margin-bottom: 10px;
  220. }
  221. .content .post .wp-caption {
  222.     max-width: 100%;
  223.     text-align: center;
  224. }
  225. .content .single-entry-content .wp-caption {
  226.     max-width: 100%;
  227.     text-align: center;
  228. }
  229. .content .post p.wp-caption-text {
  230.     font: normal .8em/1.4 'Droid Sans', arial, sans-serif;
  231.     margin: 0;
  232.     padding: 7px 0 10px 0;
  233.     color: #999;
  234. }
  235. .content object,
  236. .content embed,
  237. .content iframe {
  238.     max-width: 100%;
  239.     margin: 3px 0 10px;
  240.     display: block;
  241. }
  242. /* --- Post Columns Shortcodes --- */
  243. .two-columns-one{
  244.     width:48%;
  245. }
  246. .three-columns-one{
  247.     width:30.66%;
  248. }
  249. .three-columns-two{
  250.     width:65.33%;
  251. }
  252. .four-columns-one {
  253.     width: 22%;
  254. }
  255. .four-columns-two {
  256.     width:48%;
  257. }
  258. .four-columns-three {
  259.     width:74%;
  260. }
  261. .two-columns-one,.three-columns-one,.three-columns-two, .four-columns-one, .four-columns-two, .four-columns-three {
  262.     float:left;
  263.     margin-right:4%;
  264.     position:relative;
  265. }
  266. .last{
  267.     clear:right;
  268.     margin-right:0 !important;
  269. }
  270. .divider {
  271.     clear:both;
  272.     display:block;
  273.     margin-bottom:20px;
  274.     width:100%;
  275. }
  276. .content span.highlight {
  277.     padding: 2px;
  278.     background-color: #FFFBCC;
  279. }
  280. /* --- Post Tables --- */
  281. .content table {
  282.     margin:10px 0px 30px 0px;
  283. }
  284. .content table thead {
  285.     border-top:1px solid #ddd;
  286. }
  287. .content table tr {
  288.     border-bottom:1px solid #ddd;
  289. }
  290. .content table tr th {
  291.     padding: 10px 20px 10px 20px;
  292.     border-top:1px solid #ddd;
  293.     border-left:1px solid #ddd;
  294.     border-right:1px solid #ddd;
  295. }
  296. .content table tr td {
  297.     padding: 10px 20px 10px 20px;
  298.     border-left:1px solid #ddd;
  299.     border-right:1px solid #ddd;
  300. }
  301.  
  302. /* --- Comment Reply --- */
  303. .content #comments #respond {
  304.     margin:30px 0 0;
  305.     padding:20px;
  306.     background-color: #F0F0F0;
  307. }
  308. /* Post Formats
  309. --------------------------------------------- */
  310. .content .entry-link, .content .entry-gallery, .content .entry-video {
  311.     width: 100%;
  312.     margin: 0;
  313.     float: left;
  314. }
  315. /* --- Link Post Format --- */
  316. .content .entry-link a {
  317.     font-size: 1.1em;
  318.     color: #009BC2;
  319.     font-weight: bold;
  320. }
  321. .content .entry-link .entry-meta a {
  322.     font-size: 1em;
  323.     font-weight: normal;
  324. }
  325. /* --- Image Post Format --- */
  326. .content .entry-header h2.entry-title-image {
  327.     margin-top: 0;
  328.     font-size: 1.1em;
  329. }
  330. /* --- Video, Image and Gallery Post Format --- */
  331. .content .entry-post-format .entry-header h2.entry-title {
  332.     margin: 0 0 5px;
  333. }
  334. .content .entry-post-format .entry-header p {
  335.     font: italic .8em/1.5 'Droid Serif', Times, serif;
  336. }
  337. .content .entry-post-format .entry-header p a {
  338.     font-family: 'Droid Sans', arial, sans-serif;
  339.     font-style: normal;
  340. }
  341. .content .entry-post-format .entry-content-gallery {
  342.     width: 54%;
  343.     float: left;
  344. }
  345. .content .entry-post-format .gallery-thumb {
  346.     width: 42.258%;
  347.     float: left;
  348.     margin: 5px 15px 0 0;
  349. }
  350. .content .post img.attachment-medium {
  351.     max-width: 100%;
  352.     height: auto;
  353.     padding: 0;
  354. }
  355.  
  356. /* WordPress Image Gallery
  357. --------------------------------------------- */
  358. .content .gallery {
  359.     margin: auto;
  360.     padding:0;
  361.     clear: both;
  362. }
  363. .content .gallery-item {
  364.     width:19%;
  365.     float: left;
  366.     margin-top: 10px;
  367.     margin-right: 3px;
  368.     text-align: center;
  369.     vertical-align: top;
  370.     overflow: hidden;
  371. }
  372. .content .gallery-icon {
  373.     width: 100%;
  374. }
  375. .content .gallery-caption {
  376.     margin-left: 0;
  377.     padding: 0;
  378.     font-size: .8em;
  379.     line-height: 1.25;
  380.     color: #999;
  381.     display: block;
  382. }
  383.  
  384. /* Pages
  385. --------------------------------------------- */
  386. .content .page {
  387.     margin: 0 0 40px;
  388.     padding: 0 0 30px;
  389.     overflow: hidden;
  390.     clear: both;
  391.     font-size: .95em;
  392.     line-height: 1.6;
  393.     border-bottom: 1px solid #ddd;
  394. }
  395. .content .page-entry-header {
  396.     margin: 0;
  397. }
  398. .content .page-entry-header h1.entry-title {
  399.     margin: 0;
  400.     font: bold 1.5em/1.5 'Droid Sans', arial, sans-serif;
  401.     color: #009BC2;
  402. }
  403. .content .page p {
  404.     padding: 0 0 20px 0;
  405. }
  406. /* --- Fullwidth Page --- */
  407. .content.full-width {
  408.     width:100% !important;
  409. }
  410. .content.full-width .page {
  411.     margin: 0;
  412.     padding: 0 0 20px;
  413.     border-bottom: none;
  414. }
  415.  
  416. /* Media queries for responsive design
  417. --------------------------------------------- */
  418. /* --- iPad Landscape --- */
  419. @media screen and (max-width: 1024px) {
  420. /* --- General --- */
  421. .content {
  422.     width:92.2%;
  423.     float: left;
  424. }
  425. .content .entry-content {
  426.     width: 76.5%;
  427. }
  428. .content .entry-details {
  429.     width: 20%;
  430. }
  431. }
  432.  
  433. /* --- iPad Portrait --- */
  434. @media screen and (max-width: 880px) {
  435. .content {
  436.     width: 100%;
  437.     float: none;
  438. }
  439.  
  440. /* --- Post Content --- */
  441. .content .entry-content {
  442.     float: left;
  443. }
  444. .content .entry-details {
  445.     width: 20%;
  446. }
  447. }
  448. /* --- Smartphones and small Tablet PCs --- */
  449. @media screen and (max-width : 620px) {
  450.  
  451. /* --- Post Content --- */
  452. .content .post {
  453.     margin: 0 0 30px;
  454.     padding: 0 0 30px;
  455. }
  456. .content .post .entry-header h2.entry-title {
  457.     font-size: 1.2em;
  458. }
  459. .content .entry-content {
  460.     width: 100%;
  461. }
  462. .content .entry-details {
  463.     display: none;
  464. }
  465. .content .post img.wp-post-image {
  466.     display: none;
  467. }
  468. .content .sticky {
  469.     padding: 10px;
  470. }
  471.  
  472. /* --- Post Formats ---- */
  473. .content .entry-post-format .entry-content-gallery {
  474.     width: 100%;
  475.     float: none;
  476. }
  477. .content .entry-post-format .gallery-thumb {
  478.     width: 100%;
  479.     float: none;
  480.     margin: 5px 15px 15px 0;
  481. }
  482. }
  483.  
  484.  
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!