/*Numiko Additions CSS*/
/*Authors
- Neil Muralee - NM - neil@numiko.com
- Ryan Gibson - RG - ryan@numiko.com
*/

/*See also numiko-additions-ie6.css & numiko-additions.js*/

/*RG*/

.video .copy ul.links { list-style-type: none; padding-left: 0px; margin-top: 10px;}
.video .transcript { padding: 0px;}
.video .video-carousel { height: 200px; overflow:hidden}
.video .description { clear: both; padding-top: 10px;}
.video .transcript { padding-top: 20px;}

/* NUMIKO - Poll */
.poll .icon dl.results { margin-bottom: 5px;}
.poll .icon dl.results dl { margin: 0px;}
.poll .icon dl.results dl dd {padding:0; background:none;;}
.poll .icon dl.results dl dt {width: 30%; color:#000; font-size:1em; letter-spacing:normal; margin:0; float:left;}
.poll .icon dl.results dd.bargraph {background:#fff;}
	.poll .icon dl.results dd.bargraph {float:left; width:40%; margin-right: 5px; margin-top: 0px;}
	.poll .icon dl.results dd.bargraph div {height:16px; background:#9ff;}


/*NM*/

/*If you ever lose the rounded corners, its probably text align*/
/*Small object can colapse into gaps*/
.leftcol .promo {text-align:left;}
/*speech bubble cta*/
.speech_cta {width:auto!important;}

/*Home Page switscher paragraph*/
.home-content h3 {margin-bottom:0px; margin-top:5px;}
.home-content p {margin-top:5px; margin-bottom:0px; font-size:90%;}

/*title / center aligned content*/
.center-main {margin:0px auto;} 

/*Carousel copy min-height*/
.carousel-good-stuff-copy {min-height:50px; height:auto !important; height:50px; padding:5px 0px; font-size:90%;}
/*Tabs copy min-height*/
.tabbed-content .tab {min-height:50px; width:auto !important; height:130px;}

/*.breadcrumb - width dependant on breadcrumb*/

 
/*Page title*/
.center-main {float:none!important; margin-left:auto!important; margin-right:auto!important;}
.center-main .cf {}
/*h1 title icons*/
.play-red .hero-h1 {}
.play-prp .hero-h1 {background:transparent url(../img/bgs/panel-play-prp.gif) no-repeat right top;}

#frame {clear:both;}
/*Resize the columns to match the misleading widths of the header... which are not full widths - but can't be changed*/

/*Row of left and right col content*/
.row {clear:both; width:100%;}

/*Content layout*/
#content {margin:0px!important;}
#content .leftcol {width:710px; float:left; margin-right:10px; display:inline;}
#content .leftcol .grid-09 {width:710px;}
#content .rightcol {width:230px!important; float:left; margin-top:0px;display:inline;}
#content .rightcol .module {width:230px!important;}
#content .rightcol .grid-04 {width:230px;}

/*Remove margin from the rounded boxes - now on the modules */
#content .rounded {margin:0px 0px 10px 0px!important;}

/*Content rows*/
#content .row {clear:both;}

/*Content wrappers in leftcol in a row*/
#content .wrapper {clear:both;}
#content .wrapper .module {margin-left:10px;}
#content .wrapper .module.lastchild, #content .wrapper .module:last-child {margin-left:0px;}

/* Grid specific widths when in a row */
#content .wrapper .grid-02 {width:152px;}
#content .wrapper .grid-03 {width:230px;}
#content .wrapper .grid-04 {width:315px;}
#content .wrapper .grid-07 {width:550px;}
#content .wrapper .speech_cta {width:auto;}

/*Width of module titles so the wrap a bit better.*/
.wrapper .module h2, .rightcol h2 {padding-right:50px!important;}
.wrapper .module .video-promo h2, .rightcol .video-promo h2 {padding-right:80px!important;}

.wrapper .module,
.wrapper .module.lastchild,
.wrapper .module:last-child {margin-left:0px;}

/*For columns of modules*/
.col.right {margin-left:10px;}
.col .module {clear:both; margin-left:0px!important;}
/*Column widths (numbers represent grids)*/
.col-03 {width:230px;float:right;}
.col-04 {width:315px;float:right;}
.col-06 { width:470px;float:right; margin-right:10px;}
.col-06 .grid-06 {width:470px!important;}
.col.right .lastchild.grid-03  {margin-right:84px; display:inline;}

/*for modules that MUST appear in a rwo at fixed matched height  (homepage - row 2) - class should be added to .row or .wrapper div */
.fixedheight .rounded .rccontent {height:240px;}


/*Module specific css*/

/*Need to talk - homepage*/
.call-childline p {margin-top:0px; margin-bottom:10px;}
html body .call-childline .rccontent {padding-bottom:10px;}
.call-childline ul {margin-top:0px;}
/*Inner module css amends*/
.promo .icon img { margin:0px 5px 0px 0px; }
.snippet {padding:3px; margin-bottom:10px; min-height:90px; height:auto!important;height:90px;}
.snippet p {margin:0px;}
.service .snippet h3 {margin-bottom:5px;}
.rounded .icon dl {clear:both;}

/* ========== */
/* = TITLES = */
/* ========== */
.page-title div.rounded.highlight .rccontent { padding: 0px; }
.page-title div.rounded.highlight h1 { margin: 0px; padding: 14px 14px 16px; }

.page-title div.rounded.offsite .rccontent { padding: 0px; }
.page-title div.rounded.offsite h1 { margin: 0px !important; padding: 14px 14px 16px; }

.page-title div.rounded.white .rccontent { padding: 0px; }
.page-title div.rounded.white h1 { margin: 0px !important; padding: 14px 14px 16px; }

.page-title div.rounded.poll .hero-h1 { background-image: none !important;}
.page-title div.rounded.play-prp .hero-h1 { background-image: none !important;}

/* ========== */
/* = PROMOS = */
/* ========== */
.module-grid-07 { width: 572px !important;}
.promo .icon h2 { min-height: 46px; }
/*.promo-poll .icon h2 { font-size: 1.4em; }*/
.promo .icon { font-size: 0.8em;}
.promo .icon p { font-size: 1em; }
.rounded-promo .rccontent { padding: 0px !important;}

.promo-poll .icon p img { border: 1px solid #18dee5; }
.promo-service .icon p img { border: 1px solid #95e41f; }
.promo-offsite .icon p img { border: 1px solid #e8e8e8; }
.promo-white .icon p img { border: 1px solid #fff; }
.promo-highlight .icon p img { border: 1px solid #ff3; }

.promo-offsite a, .promo-offsite .icon dd a, .promo-white a, .promo-white .icon dd a, .promo-highlight a,.promo-highlight .icon dd a, .promo-poll a, .promo-poll .icon dd a { color: #000; }

.video-promo .icon p img { border: 1px solid #888; }
.video-promo a, .video-promo .icon dd a, .video-promo a { color: #fff; }

.locker-promo .icon p img { border: 1px solid #00b; }
.locker-promo a, .locker-promo .icon dd a, .locker-promo a { color: #fff; }