style.css 16 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556
  1. /******************************************************************
  2. Theme Name: Bones
  3. Theme URI: http://www.themble.com/bones
  4. Description: An incredibly simple starter theme for developers.
  5. Author: Eddie Machado
  6. Author URI: http://www.themble.com/bones/
  7. Version: 1.06
  8. Tags: html5, framework, css3, development
  9. License: GPL or whatever
  10. License URI: ?
  11. All Default Styles are in library/css/default.css
  12. I reccommend not editing those files and making all
  13. changes here. That way if something goes awry, you
  14. can easily revert back to the original, but that's
  15. totally up to you. Happy Developing!
  16. ******************************************************************/
  17. /******************************************************************
  18. GENERAL LAYOUT STYLES
  19. ******************************************************************/
  20. body { }
  21. #container, .wrap {
  22. width: 92%;
  23. margin: 0 auto;
  24. padding: 0 4%;
  25. max-width: 1044px; /* remove or edit to adjust width */
  26. min-width: 1044px; /* remove or edit to adjust width */
  27. }
  28. /* layout options ( all have margins right & left of 1%) */
  29. .col60 { width: 6.333%; } /* width 60px / grid_1 */
  30. .col140 { width: 14.667%; } /* width 140px / grid_2 */
  31. .col220 { width: 23.0%; } /* width 220px / grid_3 */
  32. .col300 { width: 31.333%; } /* width 300px / grid_4 */
  33. .col380 { width: 39.667%; } /* width 380px / grid_5 */
  34. .col480 { width: 48.0%; } /* width 480px / grid_6 */
  35. .col540 { width: 56.333%; } /* width 540px / grid_7 */
  36. .col620 { width: 64.667%; } /* width 620px / grid_8 */
  37. .col700 { width: 73.0%; } /* width 700px / grid_9 */
  38. .col780 { width: 81.333%; } /* width 780px / grid_10 */
  39. .col860 { width: 89.667%; } /* width 860px / grid_11 */
  40. .col940 { width: 98.0%; } /* width 940px / grid_12 */
  41. /* layout & column defaults */
  42. .col60, .col140, .col220, .col300, .col380, .col480, .col540, .col620, .col700, .col780, .col860, .col940 { display: inline; float: left; margin-left: 1%; margin-right: 1%; position: relative; }
  43. /* default styles & fixes */
  44. #main { margin-left: 0; } /* fixes alignment (defaulted at col620) */
  45. #sidebar1 { margin-right: 0; } /* fixes alignment (defaulted at col300) */
  46. /******************************************************************
  47. LINK STYLES
  48. ******************************************************************/
  49. a, a:visited {}
  50. a:hover, a:link {}
  51. a:active {} /* on click */
  52. a:link {
  53. -webkit-tap-highlight-color : rgba(0,0,0,0); /* this highlights links on Iphones / iPads */
  54. }
  55. /******************************************************************
  56. TEXT SELECTION STYLES
  57. ******************************************************************/
  58. /* Safari, Chrome, iPhones, iPads */
  59. ::-webkit-selection {
  60. background: #6fc2f6;
  61. color:#fff;
  62. text-shadow : none;
  63. }
  64. /* Firefox */
  65. ::-moz-selection {
  66. background: #6fc2f6;
  67. color:#fff;
  68. text-shadow : none;
  69. }
  70. /* The Rest of em */
  71. ::selection {
  72. background: #6fc2f6;
  73. color:#fff;
  74. text-shadow : none;
  75. }
  76. /******************************************************************
  77. WORDPRESS BODY CLASSES
  78. want to style a page via body class? go ahead
  79. ******************************************************************/
  80. body.rtl {}
  81. body.home {} /* home page */
  82. body.blog {}
  83. body.archive {} /* archive page */
  84. body.date {} /* date archive page */
  85. body.date-paged-(page number) {}
  86. body.search {} /* search page */
  87. body.search-results {} /* search result page */
  88. body.search-no-results {} /* no results search page */
  89. body.search-paged-(page number) {} /* individual paged search (i.e. body.search-paged-3) */
  90. body.error404 {} /* 404 page */
  91. body.single {} /* single post page */
  92. body.postid-(id) {} /* individual post page by id (i.e. body.postid-73) */
  93. body.single-paged-(page number) {} /* individual paged single (i.e. body.single-paged-3) */
  94. body.attachment {} /* attatchment page */
  95. body.attachmentid-(id) {} /* individual attatchment page (i.e. body.attachmentid-763) */
  96. body.attachment-(mime-type) {}
  97. body.author {} /* author page */
  98. body.author-(user_nicename) {}
  99. body.author-paged-(page number) {}
  100. body.category {} /* category page */
  101. body.category-(slug) {} /* individual category page (i.e. body.category-6) */
  102. body.category-paged-(page number) {}
  103. body.tag {} /* tag page */
  104. body.tag-(slug) {} /* individual tag page (i.e. body.tag-news) */
  105. body.tag-paged-(page number) {}
  106. body.page-template {} /* custom page template page */
  107. body.page-template-(template file name) {} /* individual page template (i.e. body.page-template-contact-php */
  108. body.page-paged-(page number) {}
  109. body.page-parent {}
  110. body.page-child {}
  111. body.parent-pageid-(id) {}
  112. body.logged-in {} /* if user is logged in */
  113. body.paged {} /* paged items like search results or archives */
  114. body.paged-(page number) {} /* individual paged (i.e. body.paged-3) */
  115. /* new browser classes */
  116. body.browser-lynx {} /* lynx browsers */
  117. body.browser-gecko {} /* firefox browsers */
  118. body.browser-opera {} /* opera browsers */
  119. body.browser-ns4 {} /* ns4 browsers */
  120. body.browser-safari {} /* safari browsers */
  121. body.browser-chrome {} /* chrome browsers */
  122. body.browser-ie {} /* ie browsers ( aka dinosaurs) */
  123. body.browser-iphone {} /* iphones (expirimental, best to use Media Queries) */
  124. /******************************************************************
  125. HEADLINES & TITLES
  126. ******************************************************************/
  127. h1, .h1 {}
  128. h2, .h2 {}
  129. h3, .h3 {}
  130. h4, .h4 {}
  131. h5, .h5 {}
  132. h1 a, h2 a, h3 a, h4 a, h5 a {}
  133. /******************************************************************
  134. HEADER SYTLES
  135. ******************************************************************/
  136. header[role=banner] {}
  137. #logo {}
  138. /******************************************************************
  139. NAVIGATION STYLES
  140. (Main Navigation)
  141. ******************************************************************/
  142. nav[role=navigation] {}
  143. nav[role=navigation] .menu ul {
  144. background: #215ea3;
  145. -moz-border-radius: 3px;
  146. -webkit-border-radius: 3px;
  147. border-radius: 3px;
  148. }
  149. nav[role=navigation] .menu ul li {}
  150. nav[role=navigation] .menu ul li a {
  151. padding: 10px 20px;
  152. text-shadow: 0 -1px 1px rgba(0,0,0,0.33);
  153. }
  154. nav[role=navigation] .menu ul li a:hover {
  155. background: #036;
  156. color: #fff;
  157. }
  158. nav[role=navigation] .menu ul li:first-child a {
  159. -moz-border-radius-topleft: 4px;
  160. -webkit-border-top-left-radius: 4px;
  161. border-top-left-radius: 4px;
  162. -moz-border-radius-bottomright: 4px;
  163. -webkit-border-bottom-right-radius: 4px;
  164. border-bottom-left-radius: 4px;
  165. }
  166. nav[role=navigation] .menu ul li.current-menu-item a, .nav ul li.current_page_item a {}
  167. nav[role=navigation] .menu ul li ul.sub-menu {}
  168. nav[role=navigation] .menu ul li ul li a {}
  169. nav[role=navigation] .menu ul li ul li a:hover {}
  170. nav[role=navigation] .menu ul li ul li:last-child a {}
  171. nav[role=navigation] .menu ul li:hover ul { }
  172. nav[role=navigation] .menu ul li ul li ul.sub-menu { }
  173. nav[role=navigation] .menu ul li ul li:hover ul.sub-menu { }
  174. /******************************************************************
  175. POSTS & CONTENT STYLES
  176. ******************************************************************/
  177. #content {}
  178. #main {
  179. background: #fafafa; /* adds bg to post area */
  180. -moz-border-radius: 1px;
  181. -webkit-border-radius: 1px;
  182. border-radius: 1px;
  183. }
  184. article[id*=post-] {}
  185. /* want to style individual post classes? Booya! */
  186. .post-id {} /* post by id (i.e. post-3) */
  187. .post {} /* general post style */
  188. .page {} /* general article on a page style */
  189. .attachment {} /* general style on an attatchment */
  190. .sticky {} /* sticky post style */
  191. .hentry {} /* hentry class */
  192. .category-(slug) {} /* style by category (i.e. category-videos) */
  193. .tag-(slug) {} /* style by tag (i.e. tag-news) */
  194. /* post meta */
  195. .meta {}
  196. .meta time {}
  197. /* post content */
  198. .post_content {}
  199. .post_content p {}
  200. .post_content ul, .post_content ol, .post_content table, .post_content dl {}
  201. .post_content ul, .post_content ol {}
  202. .post_content li {}
  203. .post_content ul li {}
  204. .post_content ol li {}
  205. .post_content blockquote {}
  206. .post_content blockquote:before {} /* this adds the quote before the blockquote */
  207. .post_content dl {}
  208. .post_content dt {}
  209. .post_content dd {}
  210. .post_content img {}
  211. .post_content video {}
  212. .post_content object {}
  213. .wp-caption {}
  214. .wp-caption img {}
  215. .wp-caption p.wp-caption-text {}
  216. /* image gallery styles */
  217. .gallery dl {}
  218. .gallery dt {}
  219. .gallery dd {}
  220. .gallery dl a {}
  221. .gallery dl img {}
  222. .gallery-caption {}
  223. .size-full {}
  224. .size-large {}
  225. .size-medium {}
  226. .size-thumbnail {}
  227. article[id*=post-] footer {}
  228. /******************************************************************
  229. PAGE NAVI STYLES
  230. (Special Feature)
  231. ******************************************************************/
  232. /* page navigation */
  233. .page-navigation {}
  234. .bones_page_navi {}
  235. .bones_page_navi li.bpn-prev-link {} /* previous link */
  236. .bones_page_navi li.bpn-prev-link a {}
  237. .bones_page_navi li.bpn-prev-link a:hover {}
  238. .bones_page_navi li {} /* regular links */
  239. .bones_page_navi li a {}
  240. .bones_page_navi li a:hover {}
  241. .bones_page_navi li.bpn-current {} /* current page link */
  242. .bones_page_navi li.bpn-current:hover {}
  243. .bones_page_navi li.bpn-next-link {} /* next page link */
  244. .bones_page_navi li.bpn-next-link a {}
  245. .bones_page_navi li.bpn-next-link a:hover {}
  246. .bones_page_navi li.bpn-last-page-link {} /* last page link */
  247. .bones_page_navi li.bpn-last-page-link a {}
  248. .bones_page_navi li.bpn-last-page-link a:hover {}
  249. .bones_page_navi li.bpn-first-page-link {} /* first page link */
  250. .bones_page_navi li.bpn-first-page-link a {}
  251. .bones_page_navi li.bpn-first-page-link a:hover {}
  252. /* fallback previous & next links */
  253. .wp-prev-next {}
  254. .wp-prev-next ul {}
  255. .wp-prev-next .prev-link {}
  256. .wp-prev-next .next-link {}
  257. /******************************************************************
  258. COMMENT STYLES
  259. ******************************************************************/
  260. #comments /* h3 comment title */
  261. #comments span {} /* number of comments span */
  262. .comment-nav {}
  263. .comment-nav ul {}
  264. .comment-nav ul li {}
  265. .commentlist {}
  266. .commentlist li {}
  267. .commentlist li[class*=depth-] {}
  268. .commentlist li.depth-1 {}
  269. .commentlist li.depth-2 {}
  270. .commentlist li.depth-3 {}
  271. .commentlist li.depth-4 {}
  272. .commentlist li.depth-5 {}
  273. .commentlist li ul.children li {}
  274. .commentlist li ul.children li.alt {}
  275. .commentlist li ul.children li.byuser {}
  276. .commentlist li ul.children li.comment {}
  277. .commentlist li ul.children li.depth-{id} {}
  278. .commentlist li ul.children li.bypostauthor {}
  279. .commentlist li ul.children li.comment-author-admin {}
  280. .commentlist li ul.children .alt {}
  281. .commentlist li ul.children .odd {}
  282. .commentlist li ul.children .even {}
  283. .commentlist .alt {}
  284. .commentlist .odd {}
  285. .commentlist .even {}
  286. .commentlist .parent {}
  287. .commentlist .comment {}
  288. .commentlist .children {}
  289. .commentlist .pingback {}
  290. .commentlist .bypostauthor {}
  291. .commentlist .comment-author {}
  292. .commentlist .comment-author-admin {}
  293. .commentlist .thread-alt {}
  294. .commentlist .thread-odd {}
  295. .commentlist .thread-even {}
  296. .commentlist .vcard {}
  297. .commentlist .vcard cite.fn {}
  298. .commentlist .vcard time {}
  299. .commentlist .vcard time a {}
  300. .commentlist .vcard time a:hover {}
  301. .commentlist .vcard img.photo {}
  302. .commentlist .vcard img.avatar {}
  303. .commentlist .vcard cite.fn a.url {}
  304. .commentlist .comment-meta {}
  305. .commentlist .comment-meta a {}
  306. .commentlist .commentmetadata {}
  307. .commentlist .commentmetadata a {}
  308. .commentlist li .comment_content {}
  309. .commentlist li .comment_content p {}
  310. .commentlist li ul {}
  311. .commentlist .comment-reply-link {}
  312. .commentlist a.comment-reply-link:hover {}
  313. /******************************************************************
  314. COMMENT FORM STYLES
  315. ******************************************************************/
  316. #respond {}
  317. #comment-form-title {}
  318. #cancel-comment-reply {}
  319. #cancel-comment-reply a {}
  320. #commentform {}
  321. .comments-logged-in-as {}
  322. #comment-form-elements {}
  323. #comment-form-elements li {}
  324. #comment-form-elements label {}
  325. #author, #email, #url, #comment {}
  326. #author:focus, #email:focus, #url:focus, #comment:focus {}
  327. #author, #email, #url {}
  328. #allowed_tags {}
  329. #comment {}
  330. #submit {}
  331. /******************************************************************
  332. SIDEBARS & ASIDES
  333. ******************************************************************/
  334. #sidebar1 {}
  335. .widget {}
  336. .widget li {}
  337. .widgettitle {}
  338. /* links widget */
  339. .widget_links {}
  340. .widget_links ul {}
  341. .widget_links ul li {}
  342. .widget_links ul li a {}
  343. /* meta widget */
  344. .widget_meta {}
  345. .widget_meta ul {}
  346. .widget_meta ul li {}
  347. .widget_meta ul li a {}
  348. /* pages widget */
  349. .widget_pages {}
  350. .widget_pages ul {}
  351. .widget_pages ul li {}
  352. .widget_pages ul li a {}
  353. /* recent-posts widget */
  354. .widget_recent_entries {}
  355. .widget_recent_entries ul {}
  356. .widget_recent_entries ul li {}
  357. .widget_recent_entries ul li a {}
  358. /* archives widget */
  359. .widget_archive {}
  360. .widget_archive ul {}
  361. .widget_archive ul li {}
  362. .widget_archive ul li a {}
  363. .widget_archive select {}
  364. .widget_archive option {}
  365. /* tag-cloud widget */
  366. .widget_links {}
  367. .widget_links li:after {}
  368. .widget_links li:before {}
  369. .widget_tag_cloud {}
  370. .widget_tag_cloud a {}
  371. .widget_tag_cloud a:after {}
  372. .widget_tag_cloud a:before {}
  373. /* calendar widget */
  374. .widget_calendar {}
  375. #calendar_wrap {}
  376. #calendar_wrap th {}
  377. #calendar_wrap td {}
  378. #wp-calendar tr td {}
  379. #wp-calendar caption {}
  380. #wp-calendar a {}
  381. #wp-calendar #today {}
  382. #wp-calendar #prev {}
  383. #wp-calendar #next {}
  384. #wp-calendar #next a {}
  385. #wp-calendar #prev a {}
  386. /* category widget */
  387. .widget_categories {}
  388. .widget_categories ul {}
  389. .widget_categories ul li {}
  390. .widget_categories ul ul.children {}
  391. .widget_categories a {}
  392. .widget_categories select{}
  393. .widget_categories select#cat {}
  394. .widget_categories select.postform {}
  395. .widget_categories option {}
  396. .widget_categories .level-0 {}
  397. .widget_categories .level-1 {}
  398. .widget_categories .level-2 {}
  399. .widget_categories .level-3 {}
  400. /* recent-comments widget */
  401. .recentcomments {}
  402. #recentcomments {}
  403. #recentcomments li {}
  404. #recentcomments li a {}
  405. .widget_recent_comments {}
  406. /* search widget */
  407. #searchform {}
  408. .widget_search {}
  409. .screen-reader-text {}
  410. /* text widget */
  411. .textwidget {}
  412. .widget_text {}
  413. .textwidget p {}
  414. /******************************************************************
  415. FOOTER STYLES
  416. ******************************************************************/
  417. footer[role=contentinfo] {}
  418. /* footer menu */
  419. .footer-links {}
  420. .footer-links ul {}
  421. .footer-links ul li {}
  422. .footer-links ul li a {}
  423. .footer-links ul li:last-child a {}
  424. .footer-links ul li a:hover, .nav ul li.current-menu-item a, .nav ul li.current_page_item a {}
  425. .footer-links ul li ul.sub-menu {} /* you shouldn't have that many links in the footer anyway so it's set to display none ;P */
  426. .attribution {}
  427. /******************************************************************
  428. MEDIA QUERIES & DEVICE STYLES
  429. Developed by: Andy Clarke & the 320 & Up Extension
  430. URL: http://stuffandnonsense.co.uk/projects/320andup/
  431. ******************************************************************/
  432. @media only screen and (min-width: 480px) {
  433. /* insert styles here */
  434. }
  435. @media only screen and (min-width: 768px) {
  436. /* insert styles here */
  437. }
  438. @media only screen and (min-width: 992px) {
  439. /* insert styles here */
  440. }
  441. @media only screen and (min-width: 1382px) {
  442. /* insert styles here */
  443. }
  444. @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) {
  445. /* insert styles here */
  446. }
  447. /******************************************************************
  448. PRINT STYLES
  449. (Handled by default, but if you want to edit it, feel free)
  450. ******************************************************************/
  451. @media print { }
  452. /******************************************************************
  453. IE SPECIFIC FIXES
  454. ******************************************************************/
  455. /*
  456. Thanks to the HTML5 Boilerplate there's an easier way
  457. to target IE specific bugs. Simply use the html class
  458. to target the specific version of IE.
  459. To target the .post_content area in IE6, use:
  460. html.ie6 .post_content { ... }
  461. To target the .post_content area in IE7, use:
  462. html.ie7 .post_content { ... }
  463. To target the .post_content area in IE8, use:
  464. html.ie8 .post_content { ... }
  465. Much easier right? This way, you don't have to call
  466. any more stylesheets, you can leave it at the bottom
  467. and it will overwrite depending on the html class.
  468. */