/* COS/ChildLine
*  play.css
*  Author: AvenueA|Razorfish, London
*  Date: 15-10-2008 */

.topics #tabhdrs {margin:0;}

/* PLAY POPUP WINDOW */
#play-pop {text-align:left;}
#play-pop .hero-h1 {margin:0 7px;}
	#play-pop .hero-h1 a img {margin:0 38px 0 0;}

#play-pop #content {margin:20px auto; text-align:center;}
.game-launcher img {border:none; margin:0; padding:0; position:relative; z-index:0;}



/* global overwrites */
h1.hero-h1 img {margin-left:6px; vertical-align:middle;}
.play-prp.rounded .icon-spacer, .play-prp h1.hero-h1 {background:url(../img/bgs/panel-play-prp.gif) top right no-repeat;}
.play-red .icon-spacer, .play-red h1.hero-h1 {background:url(../img/bgs/panel-play-red.gif) top right no-repeat;}
.play-org .icon-spacer, .play-org h1.hero-h1 {background:url(../img/bgs/panel-play-org.gif) top right no-repeat;}
.create-red .icon-spacer, .create-red h1.hero-h1 {background:url(../img/bgs/panel-create-red04.gif) top right no-repeat;}
.create-red .icon-spacer, .create-red h1.hero-h1 {background:url(../img/bgs/panel-play-red.gif) top right no-repeat;}

/* game-popup-placeholder */
.game-popup-placeholder .rccontent {padding:10px 0 7px 14px;}
.game-popup-placeholder .game-launcher {margin:0; padding:0; position:relative;}
.game-popup-placeholder .game-launcher img {border:solid 1px #999;}
.game-launcher .button {color:#FFF; font-size:1.25em;margin:273px 0 0; width:97%; text-align:center; padding:0px; position:absolute; top:0; left:0; z-index:1;}
.game-popup-placeholder .game-launcher .button img { margin-bottom:12px;}


/* games */
.games .icon {background-image:none;}
	.games .icon h2 {min-height:0;}

.games-container {margin:8px 37px 0;}
.carousel-games {}
	.carousel-games .item {display:block; width:132px; margin-bottom:10px; float:left;}
		.carousel-games .item a {color:#fff;}
		.carousel-games .item a:hover, .carousel-games .item a:active, .carousel-games .item a:focus {text-decoration:none;}
			.carousel-games .item a span {font-weight:bold;}
			.carousel-games .item a:hover span, .carousel-games .item a:active span, .carousel-games .item a:focus span {text-decoration:underline;}


/* good-stuff */


/* BEGIN RAZORFISH STYLES FOR 5C PLAY CAROUSEL */



.good-stuff .rccontent {padding:16px 13px 7px;}

.good-stuff .cover1, .good-stuff .cover-centre,
.good-stuff .cover2 {position:absolute; width:99px; height:94px; margin-top:12px; background:#fff; opacity:0.5; filter:alpha(opacity=50); z-index:500;}
.good-stuff .cover2 {margin-left:261px;}

.good-stuff .cover-centre {width:162px; margin-left:99px;}















.good-stuff .container {margin:14px 0 0; background:#f1f1f1; border:solid 1px #ccc;}
.carousel-good-stuff {padding:15px 10px 12px;}
	.carousel-good-stuff .thumb {width:152px; float:left;}
		.carousel-good-stuff .thumb img {display:block; overflow:hidden;}
	.carousel-good-stuff .copy {width:180px; margin:7px 0 0 0; float:right;} 
		.carousel-good-stuff .copy h2 {position:static; margin:0;}

	.carousel-good-stuff .items {margin-top:-12px;}
	.carousel-good-stuff .item {margin-top:12px;}
	
.carousel-good-stuff-header h2 {margin:13px 0 0; font-size:.9em; font-weight:normal;}
.carousel-good-stuff-copy .copy {width:338px; margin:0 11px 11px; float:none;}

/* END RAZORFISH STYLES FOR 5C PLAY CAROUSEL */


/* BEGIN NUMIKO STYLES FOR 8C PLAY CAROUSEL (uses class .new)  */

.good-stuff.new .rccontent {padding:16px 13px 7px;}
.good-stuff.new .cover1,
.good-stuff.new .cover-centre,
.good-stuff.new .cover2 {position:absolute; height:90px; margin-top:15px; background:#FFF; opacity:0.5; filter:alpha(opacity=50); z-index:500;}
.good-stuff.new .cover1 {width:229px;}
.good-stuff.new .cover-centre {width:99px;}
.good-stuff.new .cover2 {width:199px;}
.good-stuff.new .cover2 {margin-left:413px;}
.good-stuff.new .cover-centre {width:184px; margin-left:229px;}
.good-stuff.new .container {margin:14px 0 0; background:#f1f1f1; border:solid 1px #ccc;}

.new .carousel-good-stuff {padding:15px 10px 12px;}
.new .carousel-good-stuff .thumb {width:152px; float:left;}
.new .carousel-good-stuff .thumb img {display:block; overflow:hidden;}
.new .carousel-good-stuff .copy {width:180px; margin:7px 0 0 0; float:right;} 
.new .carousel-good-stuff .copy h2 {position:static; margin:0;}
.new .carousel-good-stuff .items {margin-top:-12px;}
.new .carousel-good-stuff .item {margin-top:12px;}
.new .carousel-good-stuff-header h2 {margin:13px 0 0; font-size:.9em; font-weight:normal;}
.new .carousel-good-stuff-copy .copy {width:550px; margin:0 11px 11px; float:none;}

/* END NUMIKO STYLES FOR 8C PLAY CAROUSEL */

/* grings promo */
.grings, .grings .rccontent, .grings .rctop,
.grings .rcbtm .rcfill div.colour {color:#000; background:#fff;}
.grings .rccontent {padding-bottom:18px;}
.grings img.tones {margin:17px 0 1px;}


/* instructions */
.instructions ol {margin:18px 0 0; padding:0; list-style-position:inside;}
.grid-03 .instructions .icon {background-image:none;}
.instructions .icon h2 {min-height:0; padding-right:0;}
.instructions .snippet {color:#000; font-size:1.1em; padding-top:0; margin-bottom:0;}
	.instructions .snippet p {margin:0; padding:12px 0 0;}

.instructions .creatures p {width:115px; margin-bottom:12px; float:left;}
.instructions .creatures img {margin:10px 17px 0 0; float:left;} 


/* topscores */
.topscores ol {margin:13px 10px 0 0px; padding:0px; list-style-position:inside;}
.topscores li {margin:1px 0 0; padding:0px; list-style-position:inside;}
.topscores li.top-score { font-weight:bold;}
/* hidden */
.childline-email legend,
.childline-email caption,
.things-created legend,
.my-profile legend,
.what-think legend {display:none;}



/* FORM ELEMENTS */