em {font-style:italic;} #oh_snap{width:991px; margin:0 auto; height:3550px; position:relative;} #contentOuter{background:url("../../img/oh_snap/header-images.jpg") no-repeat 7% 135px;} #right_col{position:absolute; right:-25px; top:64px; width:225px; text-align:center;background:/*#fe40a3*/#F2F2F2;height:3400px;padding:0 20px;} .vd{font-family:Verdana, Arial, Helvetica, sans-serif; color:#ff3399;} #heart_box{border-top:6px #ff2f99 solid; border-bottom:6px #ff2f99 solid; background-color:#ffebf5; padding:20px 0; margin-bottom:42px;} #heart_box > p{font-family:Helvetica, Arial, Verdana, sans-serif; font-weight:bold; font-size:13px; line-height:15px; color:#4c4c4c; margin-bottom:9px;} #heart_box > p > a{color:#4c4c4c;} #heart_box > a:hover{color:#ff3399;} #heart_box > a{font-family:"PinkSans100"; font-size:18px; line-height:22px; color:#000; text-decoration:none; text-transform:uppercase;} #heart_box.over > a{color:#ff3399 !important;} #detail_view .fb_block{margin-bottom:11px;} #detail_view .twitter_block{margin-bottom:9px;} #detail_view .tumblr_block{margin-bottom:10px; height:20px;} #detail_view .pin_block{clear:both;} #detail_view .social_wrapper{margin-bottom:17px;} p.legal{margin-top:30px; color:#747577; font-size:11px; font-family:Arial, Helvetica, Verdana, sans-serif;} .hide{display:none !important;} #game a, #game a:hover, #game a:active, #game a:visited, #detail_view a, #detail_view a:hover, #detail_view a:active, #detail_view a:visited, #hider a, #hider a:hover, #hider a:active, #hider a:visited, #oh_snap_images a, #oh_snap_images a:hover, #oh_snap_images a:active, #oh_snap_images a:visited, #oh_snap a, #oh_snap a:hover, #oh_snap a:active, #oh_snap a:visited{text-decoration:none;} #right_col h3{font-family:"PinkSans70"; font-size:26px; margin-bottom:4px; line-height:26px;} #right_col > p{font-family:Helvetica, Arial, Verdana, sans-serif; font-size:12px; line-height:17px; color:#616161;} /* JSpad ADDITION (Ticket PINKXI-#3058)*/ #sort_buttons .active { cursor:default; } /* /JSpad ADDITION */ #top_center{top:332px; left:-66px; position:absolute; margin-left:80px; margin-bottom:10px;} #top_center > div{float:left; } #top_center .left{/*width:331px;*/ position:relative;left:60px;text-align:center; text-transform:uppercase; font-family:"PinkSans100"; } .left .line1{font-size:118px; color:#000; line-height:90px;} .left .line2{font-size:49px; /*color:#ff309a;*/ line-height:64px;} .left .line2 .red{color:#ff309a;} #top_center .right{width:350px; margin-left:24px; font-family:Helvetica, Arial, Verdana, sans-serif; font-size:13px; line-height:16px; color:#666;} #top_center .right p{margin-bottom:17px;} #top_center #loveconsent_text {width:720px;font-size:14px;line-height:1.4em;margin-top:20px;} #oh_snap_images{padding:44px 5px; background:#eeedee; position:relative; text-align:center;} #sort_buttons{text-align:center; font-family:Helvetica, Arial, Verdana, sans-serif; font-size:16px; color:#000; margin-bottom:23px;} #sort_buttons p{margin-top:10px;} #sort_buttons > a.first{margin-right:10px;} #sort_buttons > a{background-color:#747577; text-transform:uppercase; font-size:20px; font-family:"PinkSans130"; color:#fff; line-height:34px; padding:6px 15px; -webkit-border-radius: 4px; /* Saf3-4, iOS 1-3.2, Android ²1.6 */ border-radius: 4px; /* Opera 10.5, IE9, Saf5, Chrome, FF4+, iOS 4, Android 2.1+ */ /* useful if you don't want a bg color from leaking outside the border: */ -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box;} #sort_buttons > a:hover, #sort_buttons > a.active{background-color:#ff2f99} #lower_sign_in{text-align:center; font-family:Helvetica, Arial, Verdana, sans-serif; line-height:14px; line-height:14px; color:#000; position:absolute; left:181px; top:57px;} #lower_sign_in a{color:#ff2f99;} a.load_more{padding-top:82px; text-transform:uppercase; font-size:20px; font-family:"PinkSans130"; color:#fff; display:block; width:95px; margin:0 auto;} a.load_more span{background-color:#747577; -webkit-border-radius: 4px; /* Saf3-4, iOS 1-3.2, Android ²1.6 */ border-radius: 4px; /* Opera 10.5, IE9, Saf5, Chrome, FF4+, iOS 4, Android 2.1+ */ padding:6px 10px; line-height: 34px; /* useful if you don't want a bg color from leaking outside the border: */ -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box;} .loading{background:url("../../img/oh_snap/scroll-wheel.png") center 0 no-repeat;} #detail_view{width:961px; background:#fff; height:613px; position:relative;} a.arrow{width:59px; height:97px; position:absolute; top:247px; background-color:#ffd3e9;} a.arrow span{background-image:url("../../img/oh_snap/arrows-sprite.png"); background-repeat:no-repeat; display:block; width:30px; height:57px; margin-top:20px;} a:hover.arrow{background-color:#ff91c8;} a.right{right:0px;} a.left{left:0px;} a.right span{background-position:right 0; margin-right:13px; float:right;} a.left span{background-position:left 0; margin-left:13px; float:left;} #hider{width:0px; height:0px; overflow:hidden;} .back{font-family:"PinkSans100"; font-size:18px; color:#000; text-transform:uppercase;} #detail_view .image_info{margin-left:104px; float:left; clear:left; margin-top:104px; font-family:Helvetica, Arial, sans-serif; width:157px; } #detail_view .image_block{width:548px; height:548px; background-color:#ccc; position:absolute; top:28px; right:85px;} #detail_view .back{margin-left:18px; margin-top:27px; float:left;} #detail_view .heart{ font-size:14px; color:#170a23; padding-left:23px; background:no-repeat url("../../img/oh_snap/hearts.png"); line-height:19px; display:block; float:left; margin-bottom:7px;} #detail_view .name_locale{font-size:22px; line-height:26px; color:#000; clear:both; margin-bottom:7px;} #detail_view .description{font-size:14px; line-height:21px; margin-bottom:8px;} #detail_view .source{font-size:12px; color:#999; margin-bottom:16px;} #detail_view .flag{clear:both; font-size:9px; color:#999; line-height:13px; background:url("../../img/oh_snap/report-icon.png") no-repeat; padding-left:16px;} #fancybox-content, #fancybox-content > div{overflow:visible !important;} #game{width:962px; background:#fff; height:683px; position:relative; border-top:7px solid #ff2f99; border-bottom:7px solid #ff2f99; overflow:visible;} #game .pad{ padding:34px 52px;} #game .title span{color:#f22d91;} #game > p{text-align:center; margin-bottom:23px; text-align:center;} #game > p.title{font-family:"PinkSans70"; font-size:59px; text-transform:uppercase; line-height:44px; margin-bottom:14px; margin-top:34px;} #game .line1{ font-family:'Glypha LT W01 65 Bold'; font-size:16px;} #game .line2{ font-family:Helvetica, Arial, sans-serif; font-size:13px;} #game > div{width:420px; height:495px; font-family:Helvetica, Arial, sans-serif; min-height:495px;} #game .img{ background:#ccc; margin-bottom:10px; overflow:hidden;} #left_pic{float:left; margin-left:52px;} #right_pic{float:right; margin-right:52px;} #game .name_locale{font-weight:bold; font-size:20px; line-height:19px; margin-bottom:4px;} #game .name_locale span{font-size:14px;} #game .description{font-size:14px;} #game .back{position:absolute; right:10px; bottom:10px;} #detail_view a.back:hover, #game a.back:hover {color:#ff3399;} .cell{margin:6px; border:10px solid #fff;} .fake_placer{top:0px; left:0px; width:420px; height:253px;} #game .img .love_it .love, #game .img .love_it{zoom:1; min-height:0; cursor:pointer; background-position:6px -49px;} #game .img a:hover .love_it .love, #game .img a:hover .love_it{background-position:6px -22px;} #game .img a.chosen .love_it .love, #game .img a.chosen .love_it, #game .img a.chosen:hover .love_it .love, #game .img a.chosen:hover .love_it{background-position:6px 5px;} .img .love_it, .cell .love_it { position: absolute; bottom: 11px; height:29px; background-color:#000; right: 10px; color:#fff; line-height:29px; overflow: auto; background-color: rgb(0, 0, 0); /* RGBa with 0.6 opacity */ background-color: rgba(0, 0, 0, 0.4); /* For IE 5.5 - 7*/ /*filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);*/ /* For IE 8*/ -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)"; color:#fff; -webkit-border-radius: 2px; /* Saf3-4, iOS 1-3.2, Android ²1.6 */ border-radius: 2px; /* Opera 10.5, IE9, Saf5, Chrome, FF4+, iOS 4, Android 2.1+ */ /* useful if you don't want a bg color from leaking outside the border: */ -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box; font-size:14px; font-family:Helvetica, Arial, sans-serif; z-index:500; } .cell > a{position:relative; z-index:0; display:block;} .cell > a .hover_block{display:none; position:absolute; left:0%; height:100%; top:0; background:#000; width:100%; font-family:Helvetica, Arial, Verdana, sans-serif; background-color: #000; background-color: rgba(0, 0, 0, 0.4); /* FF3+, Saf3+, Opera 10.10+, Chrome, IE9 */ /*filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#000000,endColorstr=#000000); /* IE6ĐIE9 */*/ zoom: 1; color:#fff; text-align:left;} .cell > a:hover .hover_block{display:block;} .img .love, .cell a.love{color:#fff; display:block; padding-left:37px; position:relative; z-index:500; background-image:url("../../img/oh_snap/hearts.png"); background-repeat:no-repeat; padding-right:8px; background-position:12px 6px;} .cell a.love{background-position:12px -48px; min-height:1%;} .cell a.love:hover{background-position:12px -21px;} .cell a.love.i_love{background-position:12px 6px;} .cell a.love.i_love:hover{background-position:12px 6px;} .cell a.i_love{background-position:12px 6px !important;} .cell a.i_love:hover{background-position:12px 6px !important;} .cell .name_locale{font-weight:bold; font-size:20px; line-height:24px; margin-top:12px; margin-bottom:12px; } .hover_block p{margin-left:12px; margin-right:12px; width:190px; text-overflow:ellipsis; overflow:hidden;} .cell .source{font-style:italic; font-size:14px;} .cell .description{font-size:14px; line-height:17px; } .img{position:relative;} .img > a.chosen{color:#000 !important; cursor:default; } .img > a.chosen .love_hover{display:block !important; } .img > a{display:block; text-align:center; font-family:"PinkSans130"; font-size:54px; line-height:41px; text-transform:uppercase; color:#fff; zoom: 1; height:420px; position:relative; z-index:501;} .fake_placer, .love_hover{margin:0 auto; position:relative; z-index:2; cursor:pointer;} .circle_close{display:block; position:absolute; background:url("../../img/oh_snap/close.png") no-repeat 0 0; width:46px; height:46px; right:15px; top:12px;} a.circle_close:hover{background-position:0 -50px;} .i_love a, .i_love{cursor:default;} .img, .img .imgHolder{position:relative; z-index:1;} .img > a{position:relative; z-index:50000;} .img > a.chosen, .img > a:hover{ width:420px; zoom:1; min-height:0; } .img > a .love_hover, .img > a .love_hover{ background-color: #000; width:420px; height:420px; background-color: rgba(0, 0, 0, 0.4); /* FF3+, Saf3+, Opera 10.10+, Chrome, IE9 */ /*filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#000000,endColorstr=#000000); BREAKS IE9, doesn't work in anything anyway*/ } .img > a.chosen .fake_placer, .img > a:hover .fake_placer, .img > a .fake_placer{ background-image:url("../../img/oh_snap/h2h_big.png"); background-repeat:no-repeat; position:relative; z-index:499; background-position:center center; padding-top:167px; } #right_col > p{margin-bottom: 3px;} .img > a:hover .fake_placer{ background-image:url("../../img/oh_snap/h2h_big.png"); } .fake_placer, .love_hover{display:none; position:absolute; left:0; top:0;} .img > a.chosen > div, .img > a:hover > div, .img > a:hover .fake_placer, .img > a:hover .love_hover{display:block !important;} .img > a.chosen > div, .img > a.chosen{ cursor:default !important; } .ie7 .img > a.chosen, .ie7 .img > a:hover{ filter:none !important; } .ie7 .love_hover{ background-color:transparent !important; filter:none !important; background-image:url("../../img/oh_snap/ie7_h2h_big.png"); } .img > a.chosen.animating, .img > a.animating{background-image:none !important; cursor:default;} .img > a.animating:hover .fake_placer, .img > a.animating .fake_placer, .img > a.animating .love_hover{display:none !important;} /* css animtation for heart to heart */ .img{ -webkit-transition-property: opacity, -webkit-transform; -moz-transition-property: opacity, -moz-transform; transition-property: opacity, transform; -webkit-transition-duration: 0.4s; -moz-transition-duration: 0.4s; transition-duration: 0.4s; /* -webkit-transition-property: opacity; -moz-transition-property: opacity; transition-property: opacity; */ } .img{ opacity: 0.0; /* Chrome 4+, FF2+, Saf3.1+, Opera 9+, IE9, iOS 3.2+, Android 2.1+ */ filter: alpha(opacity=0); /* IE6-IE8 */ } .img.full{width:420px; height:420px; opacity: 1; /* Chrome 4+, FF2+, Saf3.1+, Opera 9+, IE9, iOS 3.2+, Android 2.1+ */ filter: alpha(opacity=100); /* IE6-IE8 */ } #game .img img{position:absolute; z-index:2; zoom:1;} /* 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; } /**/ .img .imgHolder, .img .imgHolder img{position:absolute; z-index:1; zoom:1;} .img .imgHolder{left:0; top:0;}