{"__browser":{"device":"unknown_device","mobile":false,"name":"unknown browser","platform":"unknown_platform","version":"0"},"__constants":{},"__CPDATA":{"domain_iframe":"https://cdpn.io","environment":"production","host":"codepen.io","iframe_allow":"accelerometer; ambient-light-sensor; camera; display-capture; encrypted-media; geolocation; gyroscope; microphone; midi; payment; web-share; vr","iframe_sandbox":"allow-forms allow-modals allow-pointer-lock allow-popups allow-same-origin allow-scripts allow-top-navigation-by-user-activation allow-downloads allow-presentation"},"__user":{"anon":true,"base_url":"/anon/","current_team_id":0,"current_team_hashid":null,"hashid":"VoDkNZ","id":1,"itemType":"user","name":"Captain Anonymous","paid":false,"tier":0,"username":"anon","created_at":null,"email_verified":null,"collections_count":0,"collections_private_count":0,"followers_count":0,"followings_count":0,"pens_count":0,"pens_private_count":0,"projects_count":0,"projects_private_count":0},"__firebase":{"config":{"apiKey":"AIzaSyBgLAe7N_MdFpuVofMkcQLGwwhUu5tuxls","authDomain":"codepen-store-production.firebaseapp.com","databaseURL":"https://codepen-store-production.firebaseio.com","disabled":false,"projectId":"codepen-store-production"},"token":"eyJhbGciOiJSUzI1NiJ9.eyJhdWQiOiJodHRwczovL2lkZW50aXR5dG9vbGtpdC5nb29nbGVhcGlzLmNvbS9nb29nbGUuaWRlbnRpdHkuaWRlbnRpdHl0b29sa2l0LnYxLklkZW50aXR5VG9vbGtpdCIsImNsYWltcyI6eyJvd25lcklkIjoiVm9Ea05aIiwiYWRtaW4iOmZhbHNlfSwiZXhwIjoxNjUzNjU3Njc4LCJpYXQiOjE2NTM2NTQwNzgsImlzcyI6ImZpcmViYXNlLWFkbWluc2RrLThva3lsQGNvZGVwZW4tc3RvcmUtcHJvZHVjdGlvbi5pYW0uZ3NlcnZpY2VhY2NvdW50LmNvbSIsInN1YiI6ImZpcmViYXNlLWFkbWluc2RrLThva3lsQGNvZGVwZW4tc3RvcmUtcHJvZHVjdGlvbi5pYW0uZ3NlcnZpY2VhY2NvdW50LmNvbSIsInVpZCI6IlZvRGtOWiJ9.p8UkcZEPx7vjpBr2wGPOfqBDVwovi-lqD3fESGcHho9K554gVsl_lXEgdF8skayIpoOJDoINA-sOtWkSz6bR-WOmCRKXiknrdZdRDrTRQLWCdwKaCfl8K7biJOjKvpL2kDuJ3SnW4UOBOhXj1xsVdwcEGPv7QMuLcLbL3HiuAPK78tkOsgFwz6lWHi_GbROwQ9kpps6NaUGpF6dvfmd-WgLusocLj8OibpJCfIjsf2T7Gx2GPXJL9mICU95dxR42nGx4FKMpTxpUGNhPBHTl30bv-StkBmBciQf82rJMiJ7OvVdG97GzDSaS9wYQrswEutpyrDG0vFsOOCUGyQMvvg"},"__graphql":{"data":{"sessionUser":{"id":"VoDkNZ","name":"Captain Anonymous","title":"Captain Anonymous","avatar80":"https://assets.codepen.io/t-1/user-default-avatar.jpg?fit=crop&format=auto&height=80&version=0&width=80","avatar512":"https://assets.codepen.io/t-1/user-default-avatar.jpg?fit=crop&format=auto&height=512&version=0&width=512","currentContext":{"id":"VoDkNZ","baseUrl":"/anon","title":"Captain Anonymous","name":"Captain Anonymous","avatar80":"https://assets.codepen.io/t-1/user-default-avatar.jpg?fit=crop&format=auto&height=80&version=0&width=80","avatar512":"https://assets.codepen.io/t-1/user-default-avatar.jpg?fit=crop&format=auto&height=512&version=0&width=512","username":"anon","contextType":"User","__typename":"User"},"currentTeamId":null,"baseUrl":"/anon","username":"anon","admin":false,"anon":true,"pro":false,"verified":false,"teams":[],"__typename":"User"}}},"__pay_stripe_public_key":"pk_live_2GndomDfiklqpSNQn8FrGuwZSMIMzha7DkLJqlYe7IR0ihKAlKdiHg68JJc5eVPt68rzAjzAAVXcUwjySHRCsgjQQ00gtRBUFNH","__pay_braintree_env":"production","__item":"{\"id\":11422569,\"user_id\":927610,\"html\":\"<section class=\\\"posts-wrapper grid-4\\\">\\n\\t<article class=\\\"post\\\">\\n <h3>Title<\\/h3>\\n\\t\\tThis is a post\\n\\t<\\/article>\\n\\t<article class=\\\"post\\\">\\n <h3>Title<\\/h3>\\n\\t\\tThis is a post\\n\\t<\\/article>\\n\\t<article class=\\\"post\\\">\\n <h3>Title<\\/h3>\\n\\t\\tThis is a post\\n\\t<\\/article>\\n\\t<article class=\\\"post\\\">\\n <h3>Title<\\/h3>\\n\\t\\tThis is a post\\n\\t<\\/article>\\n\\t<article class=\\\"post\\\">\\n <h3>Title<\\/h3>\\n\\t\\tThis is a post\\n\\t<\\/article>\\n\\t<article class=\\\"post\\\">\\n <h3>Title<\\/h3>\\n\\t\\tThis is a post\\n\\t<\\/article>\\n\\t<article class=\\\"post\\\">\\n <h3>Title<\\/h3>\\n\\t\\tThis is a post\\n\\t<\\/article>\\n\\t<article class=\\\"post\\\">\\n <h3>Title<\\/h3>\\n\\t\\tThis is a post\\n\\t<\\/article>\\n<\\/section>\\n<section class=\\\"posts-wrapper grid-3\\\">\\n\\t<article class=\\\"post\\\">\\n <h3>Title<\\/h3>\\n\\t\\tThis is a post\\n\\t<\\/article>\\n\\t<article class=\\\"post\\\">\\n <h3>Title<\\/h3>\\n\\t\\tThis is a post\\n\\t<\\/article>\\n\\t<article class=\\\"post\\\">\\n <h3>Title<\\/h3>\\n\\t\\tThis is a post\\n\\t<\\/article>\\n\\t<article class=\\\"post\\\">\\n <h3>Title<\\/h3>\\n\\t\\tThis is a post\\n\\t<\\/article>\\n\\t<article class=\\\"post\\\">\\n <h3>Title<\\/h3>\\n\\t\\tThis is a post\\n\\t<\\/article>\\n\\t<article class=\\\"post\\\">\\n <h3>Title<\\/h3>\\n\\t\\tThis is a post\\n\\t<\\/article>\\n<\\/section>\\n<section class=\\\"posts-wrapper grid-2\\\">\\n\\t<article class=\\\"post\\\">\\n <h3>Title<\\/h3>\\n\\t\\tThis is a post\\n\\t<\\/article>\\n\\t<article class=\\\"post\\\">\\n <h3>Title<\\/h3>\\n\\t\\tThis is a post\\n\\t<\\/article>\\n\\t<article class=\\\"post\\\">\\n <h3>Title<\\/h3>\\n\\t\\tThis is a post\\n\\t<\\/article>\\n\\t<article class=\\\"post\\\">\\n <h3>Title<\\/h3>\\n\\t\\tThis is a post\\n\\t<\\/article>\\n<\\/section>\\n\\n <a href=\\\"http:\\/\\/www.webdesignerwall.com\\/tutorials\\/the-power-of-css-selectors-and-how-to-use-them\\\" class=\\\"tutorial\\\">View Tutorial at Web Designer Wall<\\/a>\\n\",\"css\":\".posts-wrapper {\\n\\tmargin: 4% 0;\\n}\\n.posts-wrapper:after {\\n\\tcontent: \\\"\\\";\\n\\tdisplay: table;\\n\\tclear: both;\\n}\\n.post {\\n\\tbackground: #e7e7e7;\\n color: #eee;\\n font-family: 'georgia', serif;\\n\\tpadding: 2% 4%;\\n\\tmargin-bottom: 2%;\\n\\tbox-sizing: border-box;\\n}\\n.post h3{\\n font-style: italic;\\n color: #FFF;\\n}\\n.posts-wrapper.grid-4 .post,\\n.posts-wrapper.grid-3 .post,\\n.posts-wrapper.grid-2 .post {\\n\\tmargin-left: 3.2%;\\n\\tfloat: left;\\n}\\n.posts-wrapper.grid-4 .post {\\n\\twidth: 22.6%;\\n}\\n.posts-wrapper.grid-3 .post {\\n\\twidth: 31.2%;\\n}\\n.posts-wrapper.grid-2 .post {\\n\\twidth: 48.4%;\\n}\\n.posts-wrapper.grid-4 .post:nth-of-type(4n+1),\\n.posts-wrapper.grid-3 .post:nth-of-type(3n+1),\\n.posts-wrapper.grid-2 .post:nth-of-type(2n+1) {\\n\\tmargin-left: 0;\\n\\tclear: left;\\n}\\n\\n\\/* Level Up: Color each one with nth-child *\\/\\n.posts-wrapper.grid-4 .post:nth-child(1){\\n background-color: #d5b59e;\\n}\\n.posts-wrapper.grid-4 .post:nth-child(2){\\n background-color: #96a9b3;\\n}\\n.posts-wrapper.grid-4 .post:nth-child(3){\\n background-color: #a9c9be;\\n}\\n.posts-wrapper.grid-4 .post:nth-child(4){\\n background-color: #5a3930;\\n}\\n.posts-wrapper.grid-4 .post:nth-child(5){\\n background-color: #797072;\\n}\\n.posts-wrapper.grid-4 .post:nth-child(6){\\n background-color: #cfb384;\\n}\\n.posts-wrapper.grid-4 .post:nth-child(7){\\n background-color: #cd9d97;\\n}\\n.posts-wrapper.grid-4 .post:nth-child(8){\\n background-color: #6a6b6d;\\n}\\n\\/* Combine them *\\/\\n.posts-wrapper.grid-3 .post:nth-child(2),\\n.posts-wrapper.grid-3 .post:nth-child(5){\\n background-color: #cd9d97;\\n}\\n.posts-wrapper.grid-3 .post:first-child,\\n.posts-wrapper.grid-3 .post:last-child{\\n background-color: #cfb384;\\n}\\n.posts-wrapper.grid-3 .post:nth-child(3){\\n background-color: #96a9b3;\\n}\\n.posts-wrapper.grid-3 .post:nth-child(4){\\n background-color: #a9c9be;\\n}\\n\\/* or use the original selector nth-of-type *\\/\\n.posts-wrapper.grid-2 .post:nth-of-type(2n+1) {\\n\\tbackground-color: #a9c9be;\\n}\\n.posts-wrapper.grid-2 .post:nth-of-type(2n+2) {\\n\\tbackground-color: #96a9b3;\\n}\\n\\n.tutorial{\\n background: #eee;\\n color: #96a9b3;\\n display: block;\\n font-size: .7rem;\\n font-weight: bold;\\n font-family: sans-serif;\\n padding: 2%;\\n margin: 0 auto;\\n letter-spacing: .3em;\\n text-align: center;\\n text-transform: uppercase;\\n text-decoration: none;\\n \\n transition: all ease-in-out .3s;\\n}\\n.tutorial:hover{\\n opacity: .8;\\n}\",\"parent\":0,\"js\":\"\",\"html_pre_processor\":\"none\",\"css_pre_processor\":\"none\",\"js_pre_processor\":\"none\",\"html_classes\":\"\",\"css_starter\":\"neither\",\"css_prefix_free\":null,\"css_external\":null,\"js_library\":null,\"js_modernizr\":null,\"js_external\":null,\"created_at\":\"2016-12-07T16:36:53.000Z\",\"updated_at\":\"2016-12-07T19:55:12.000Z\",\"session_hash\":\"04fd69b41046dbb420571dc59bf5f5c5\",\"title\":\"CSS: Using positional pseudo-classes\",\"description\":\"\",\"slug_hash\":\"rWvRNG\",\"head\":\"\",\"private\":false,\"slug_hash_private\":\"659538f628f29e466f5a50532b766f24\",\"has_animation\":false,\"css_pre_processor_lib\":\"\",\"checksum\":0,\"screenshot_uuid\":\"815fa9dc-9355-4cb1-82ee-3318239ade82\",\"team_id\":0,\"css_prefix\":\"neither\",\"template\":false,\"js_module\":null,\"deleted_at\":null,\"deleted_by_user_id\":null,\"hard_delete_at\":null,\"pen_hash\":null,\"hashid\":\"rWvRNG\"}"}