/* this code gets the background centered column possible */ #nav , #pink_nav_wrap , #home_page { margin: 0 auto; width: 995px; } .container , #nav { width: 100%; } #nav .container { width: 995px; margin: 0 auto; } #home_page { padding-bottom: 1px; margin-top: 17px; width: 1173px; } div#footer, #wrap div#footer, #wrapper div#footer, #container div#footer { width: 995px !important; margin: 0 auto !important; position: relative !important; border-top: none; } #page_inner_wrapper { margin-left: 122px; width: 995px; position: relative; } /* Page Layout */ #pink_hearts_wrapper { overflow: visible; background: #F2F2F2; } #pink_hearts { width: 960px; margin: 0 auto; padding:20px 0;} #pink_hearts .inner { overflow: auto; } div#footer { border-top: none; } /* Common Header - Grid and Detail pages */ #pink_hearts .top { width: 706px; position: relative; margin-top: 20px; } #title { margin-top: 20px; margin-left: 20px; overflow: auto; } #title img { display: inline; float: left; } #title .cat_image img { position: absolute; left: 275px; top: 0px; z-index: 100; } #title .cat_image img.cell { width: auto !important; border: none !important; margin: 0px !important; top: -2px; } /* css collision :( */ #title .cat_image img.active { opacity: 1; } #hair_line { background: #E6E6E6; height: 140px; width: 1px; position: absolute; right: 0px; top: 10px; } #pink_hearts .nav { } #pink_hearts .nav ul { width: 100%; text-align: center; font-size: 12px; font-weight: bold; padding-top: 20px; margin-top: 10px; margin-bottom: 20px; } #pink_hearts .nav ul li { display: inline; padding: 10px 7px; margin-bottom: 10px; } #pink_hearts .nav ul li a { color: #000000; } #pink_hearts .nav ul li a:hover , #pink_hearts .nav ul li a.active { color: #FF359A; text-decoration: none; } /* hide / show for the archive piece */ #pink_hearts .nav ul li.view_all { border: 1px solid #F2F2F2; padding-right: 2px; display: inline; overflow: auto; } #pink_hearts .nav ul li.view_all:hover { border: 1px solid #CCCCCC; border-bottom: 1px solid #FFFFFF; background: #FFFFFF; } #pink_hearts .nav ul li.view_all ul { float: left; display: none; margin-top: 10px; padding: 2em; background: #FFFFFF; border: 1px solid #CCCCCC; margin-left: 15px; width: 620px; } #pink_hearts #image_view .nav ul li.view_all ul { width: 548px; margin-left: 0px; } #pink_hearts .nav ul li.view_all ul li { display: inline-block; margin: 5px; padding: 2px; } #pink_hearts .nav ul li.view_all a { color: #CCCCCC; } #pink_hearts .nav ul li.view_all:hover a { color: #FF359A; , text-decoration: none; background: #FFFFFF; } #pink_hearts .nav ul li.view_all:hover ul , #pink_hearts .nav ul li.view_all.active ul { display: block; } #pink_hearts .nav ul li.view_all:hover ul li { display: inline-block; } #pink_hearts .nav ul li.view_all:hover ul li a { color: #000000; } #pink_hearts .nav ul li.view_all:hover ul li a:hover , #pink_hearts .nav ul li.view_all:hover ul li a.active { color: #FF359A; , text-decoration: none; } #pink_hearts .sort { clear: left; margin: 20px auto 10px; border: 1px solid #C2C2C2; border-radius: 4px; width: 182px; background: #FFFFFF; position: relative; margin-bottom: 20px; } #pink_hearts .sort .line { height: 100%; width: 1px; display: block; position: absolute; left: 51%; top: 0px; background: #F2F2F2; } #pink_hearts .sort a { font-size: 12px; color: #999999; margin: 8px 12px 10px; display: inline-block; } #pink_hearts .sort a:hover { text-decoration: none; color: #666666; } #pink_hearts .sort a.active { color: #333333 !important; cursor: default; } #pink_hearts .category_insert_mask { display: block; width: 945px; overflow: hidden; } #pink_hearts .insert { width: 875px; background: #FFFFFF; padding: 5px 20px; margin-left: 10px; text-align: center; padding-bottom: 20px; display: block; margin-top:10px;} #pink_hearts .insert.hidden { } /* animation holder */ #pink_hearts .insert h4 { font-family: 'Glypha LT W01 65 Bold'; font-weight: bold; margin-top: 20px; margin-bottom: 15px; font-size: 22px; color: #666666; } #pink_hearts .insert p { font-size: 12px; line-height: 18px; } #pink_hearts .insert a { color: #000000; } #pink_hearts .insert a:hover { text-decoration: none; } /* Common Elements */ .right { float: right; width: 225px; margin: 10px 0px; } .board { overflow: auto; width: 720px; margin-top: 15px; min-height: 1000px; margin-bottom: 30px; } .cell { float: left; margin: 10px; display: inline; width: 209px !important; border: 2px solid #FFFFFF; position: relative; } .cell .category_overlay { position: absolute; display: none; text-align: center; color: #FF359A; font-size: 14px; font-weight: bold; bottom: 10px; width: 100%; } .love_it { position: absolute; top: 4px; right: 2px; overflow: auto; } .love_it .count , .love_it .love { float: right; display: block; color: #999999; line-height: 1.75em; } .love_it:hover .count { color: #000000; text-align: right; } .love_it .love { background: url('../img/pink_hearts/common/cornerHearts_sprite.png') no-repeat center -17px; width: 24px; height: 19px; } .love_it .love:hover { background-position: center -35px; cursor: pointer; } /* once the image has been loved */ .love_it.loved .count { color: #FF359A; } .love_it.loved .love { background-position: center 1px; } .love_it .count .simple_text { display: none; } .heart { background: url('../img/pink_hearts/index/whiteHeart_background.png') no-repeat center center; height: 211px; width: 220px; margin: 18px 20px 18px 0px; text-align: center; overflow: auto; position: relative; float: left; } .heart .first_name { font-family: 'Glypha LT W01 65 Bold'; font-weight: bold; margin-top: 45px; font-size: 18px; } .heart .text { text-align: center; height: 70px; width: 130px; margin: 10px auto 0px; font-size: 12px; word-break: normal; } .heart .flag { background: url('../img/pink_hearts/you_heart/flag_sprite_2.png') no-repeat center -21px; height: 14px; width: 19px; display: block; position: absolute; top: 179px; left: 102px; } .heart .flag:hover { background-position: center 0px; cursor: pointer; } .heart .flag.flagged { background-position: center 0px; cursor: auto; } a.opposite { font-weight: bold; color: #FF359A; margin: 20px auto; display: block; text-align: center; font-size: 12px; } a.opposite:hover { color: #000000; text-decoration: none; } .load_more { background: url('../img/pink_hearts/index/load_more.jpg') no-repeat center center; display: block; height: 34px; width: 680px; text-indent: -1000em; margin: 20px 0px 20px 10px; } .heartify_wrapper .cta { background: url('../img/pink_hearts/index/cta_whatDoYouHeart_sprite.png') no-repeat center bottom; height: 34px; width: 221px; } .heartify_wrapper .cta:hover { background-position: center top; } .heartify_wrapper .initial { color: #AAAAAA; } /* Grid Viewer Page */ #grid_view .right { } #grid_view .you_heart_img img { display: block; margin: 35px auto 28px } #grid_view .heartify_wrapper { margin-top: 15px; } #grid_view .heartify_wrapper textarea { width: 95%; height: 70px; font-size: 12px; } #grid_view .heartify_wrapper input[type="submit"] { background: url('../img/pink_hearts/index/cta_submit_sprite.png') no-repeat center center !important; height: 25px; width: 84px; text-indent: -1000em; } #grid_view .heartify_wrapper input[type="submit"].enabled:hover { background-position: center bottom !important; } #grid_view .heartify_wrapper input[type="submit"].disabled { background-position: center top !important; } #grid_view .hearts { overflow: auto; } .load_more { background: url('../img/pink_hearts/index/load_more.jpg') no-repeat center center; display: block; height: 34px; width: 680px; text-indent: -1000em; margin: 20px 0px 20px 10px; } #grid_view .links a { font-weight: bold; } #grid_view .links a:hover { text-decoration: none; color: #FF359A; } /* Image Detail */ #image_view { padding-bottom: 40px; } #image_view .right { width: 345px; margin-top: 0px; } .detail , .info { border: 2px solid #EEEEEE; background: #FFFFFF; padding: 20px; margin-bottom: 20px; } .detail { width: 550px; float: left; } .browse { text-align: right; margin-top: 8px; font-weight: bold; font-size: 12px; } .browse span { color: #AAAAAA; } .browse a:hover { color: #FF359A; text-decoration: none; cursor: pointer; } .logged_out { display: block; margin: 30px 0px 30px; } .logged_out span { font-size: 20px; font-family: 'Glypha LT W01 65 Bold' !important; font-weight: bold; display: inline-block; margin-left: 30px; margin-top: 10px; } .logged_out .sign_in_or_join { background: url('../img/pink_hearts/detail/cta_signInorJoin.png') no-repeat center bottom; height: 35px; width: 159px; display: block; float: right; margin-right: 35px; } .logged_out .sign_in_or_join:hover { background-position: center -35px; cursor: pointer; } .comments { margin-top: 20px; display: none; } .info { } .info p { font-size: 12px; color: #666; margin-bottom: 6px; } #image_view .love_it { position: relative; margin-top: 15px; } #image_view .love_it .count , #image_view .love_it .love { float: left } #image_view .love_it .count { margin-left: 5px; } #image_view .count .simple_text { display: inline; } /* different backgrounds on this piece */ #image_view .love_it .love { background: url('../img/pink_hearts/detail/cta_greyAndBlackHeart_sprite.png') no-repeat center 0px; width: 22px; height: 21px; } #image_view .love_it .love:hover { background-position: center -22px; cursor: pointer; } /* once the image has been loved */ #image_view .love_it.loved .love { background-position: center -44px; } #image_view .social_plugins { margin-top: 20px; } #image_view .social_plugins div { margin-top: 10px; } #image_view .social_plugins ._tumblr a { display:inline-block; text-indent:-9999px; overflow:hidden; width:81px; height:20px; background:url('../../../platform.tumblr.com/v1/share_1.png') top left no-repeat transparent; } #image_view .other { margin-top: 20px; } #image_view .other a { color: #FF359A; font-weight: bold; font-size: 14px; border-radius: 3px; border: 1px solid #CCCCCC; display: block; width: 95%; padding: 8px 0px 10px; text-align: center; } #image_view .other a:hover { color: #000000; text-decoration: none; } #image_view .other h3 { color: #666666; font-size: 14px; font-weight: bold; text-align: center; margin-top: 18px; } #image_view .other p { text-align: center; color: #666666; margin-top: 6px; } .inspire { display: block; } .inspire h2 { font-family: 'Glypha LT W01 65 Bold' !important; font-weight: bold; font-size: 22px; color: #999999; text-align: center; line-height: 1em; line-height: 1.25em; } .inspire p { text-align: center; color: black; font-size: 12px; margin: 10px auto; width: 75%; line-height: 1.25em; } .inspire .links { width: 235px; margin: 0 auto; overflow: auto; } .inspire .links a { background: url('../img/pink_hearts/detail/icons_sprite.gif') no-repeat left top; display: block; height: 28px; width: 23px; float: left; margin-left: 18px; } /* always get your designer to help you out when making sprites, or you have to do this */ .links a.twitter { background-position: 0px 0px; } .links a.pinterest { background-position: -22px 0px; width: 30px; } .links a.instagram { background-position: -50px 0px; width: 30px; } .links a.weheartit { background-position: -78px 0px; width: 80px; } .big_you_heart { background: url('../img/pink_hearts/detail/cta_blackHeart_tellUsWhatYouLove_sprite.png') no-repeat center top; height: 180px; width: 188px; display: block; text-indent: -1000em; margin: 36px auto 0px; } .big_you_heart:hover { background-position: center bottom; } /* You Heart */ #you_heart #title img { margin: 0 auto; display: block; float: none; } #you_heart .heartify_wrapper { width: 360px; margin: 20px auto; } #you_heart .right { } #you_heart .pink_hearts_img img { margin: 34px auto 26px; display: block; } #you_heart .cell { margin: 20px 0px; float: none; display: block; } /* Isotope stuff - NO ANIMATIONS - In js we set animationEngine to css, then comment out the css = no animations*/ /**** Isotope Filtering ***/ .isotope-item { z-index: 2; } .isotope-hidden.isotope-item { pointer-events: none; z-index: 1; } /**** Isotope CSS3 transitions ***/ .isotope, .isotope .isotope-item { -webkit-transition-duration: 0.8s; -moz-transition-duration: 0.8s; transition-duration: 0.8s; } .isotope { -webkit-transition-property: height, width; -moz-transition-property: height, width; transition-property: height, width; } .isotope .isotope-item { -webkit-transition-property: -webkit-transform, opacity; -moz-transition-property: -moz-transform, opacity; transition-property: transform, opacity; } /**** disabling Isotope CSS3 transitions ****/ .isotope.no-transition, .isotope.no-transition .isotope-item, .isotope .isotope-item.no-transition { -webkit-transition-duration: 0s; -moz-transition-duration: 0s; transition-duration: 0s; } /**/ /* infinite scroll */ #page-nav{ text-align: center; } @media only screen and (-webkit-min-device-pixel-ratio:1) { /* iOS tablet font-scaling issue */ #pink_hearts .sort a { margin-right: 9px; } }