/* Sections:
 * 
 *  1. Header bar 1
 *  2. Header bar 2
 *  3. Services section in home
 *  4. About section in Home
 *  5. Image slider
 */
 
 /* *******************************************************
  * Common
  ********************************************************** */
 body{
	background: #fff;
	color: #696969;
	font: 16px/24px 'ProximaNova-Light', sans-serif;
	position:relative;
	-webkit-text-size-adjust: none;
    min-width:550px;                                    /* Header bar 1 Min-width*/
 }
 
div.view-id-comics_{
	padding:0 20px;
}

div.view-display-id-page_1{
	padding:0 !important;
}


 div#page-content-panel p,
 div#page-content-panel  li{
	font-size: 19px;
	line-height: 26px;
 }
 
 @media screen and (max-width: 900px) {
	h1, h2, h3, h4, 
	div#page-content-panel p,
	div#page-content-panel  li{
		font-size: 120%;
		line-height: 120%;
	}
 }
 
 a{
	color: #03b8fe;
 }
 
 a:hover{	
    text-decoration:none; 
	color: #212121;
} 

a.external{
	background: url('../images/icons/extlink.png') right center no-repeat;
	padding-right: 14px;
}

h1, h2, h3, h4{
    color: #009245;
	font-family: 'Open Sans', sans-serif;
}

label{
	display:block;
}
input{
	max-width:100%;
}
h4.menu-header,
h4.menu-header-title{
	text-transform: uppercase;
	font-weight: bold;
	font-size: 13px;
    color: #666;
	margin-top: 5px;
	margin-bottom: 5px;
}
h4.menu-header{
	font-weight: bold;
	margin-bottom: 15px;
}
#textG{
    color: #1E90FF;
    font-weight: 500;
}

.container{max-width:100%;}

 .nopadding{
	padding:0 !important; /* For bootstrap section when padding is not required*/
 }
 .not-linked{	
    color: #428bca;	
    margin-bottom:0px; 
}
 
 div#scroll2top{
	background-image: url("../images/icons/up.png");
	background-position: 50% 50%;
	background-repeat: no-repeat;
	z-index: 999;
	width: 50px;
	height: 40px;
	text-indent: -9999px;
	position: fixed;
	bottom: -100px;
	right: 25px;
	cursor: pointer;
	transition: all 0.7s ease-in-out 0s;
	overflow: auto;
	background-color:#222;
}

img#green-planet-top-logo{
	max-width:100%;
}
 

/* *****************************************************************************
 * 1. Header bar 1
 ******************************************************************************* */
div#header-bar-1 {
	height: 90px;
	border-bottom:1px solid #eee;
	z-index: 999;
	position: fixed;
	/*cursor: pointer;*/
	transition: all 0.7s ease-in-out 0s;
	/*overflow: auto; */
	background-color: rgba(255,255,255,.98);
	min-width:550px;
	
	/*background-image:url('../images/menu.png');
	background-position: top right;
	 background-repeat: no-repeat;*/
	 
	box-shadow: 0 1px 5px rgba(0,0,0,.1);
    -khtml-box-shadow: 0 1px 5px rgba(0,0,0,.1);
    -webkit-box-shadow: 0 1px 5px rgba(0,0,0,.1);
    -moz-box-shadow: 0 1px 5px rgba(0,0,0,.1);
    -ms-box-shadow: 0 1px 5px rgba(0,0,0,.1);
    -o-box-shadow: 0 1px 5px rgba(0,0,0,.1);
	
	-webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -ms-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;
}
@media (min-width: 550px) {
	div#header-bar-1 {
		width:100%;
	}
}
div#header-bar-1-col-1 img, 
div#header-bar-1-col-2{
/*	-webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -ms-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s; */
}

div#header-bar-1-col-2{
	margin-top:17px;
}

/* *****************************************************************************
 * 2. Header Bar 1 ( Mega Menu)
 ******************************************************************************* */

/* 2.1 Mega Menu (Main Links) */

.tb-megamenu{
	background-color:transparent;
	clear:both;
}

.tb-megamenu ul.nav{
	float: right !important;
}

.tb-megamenu .nav > li > a{
	border-right: 0;
	color: #0d4272;
	padding: 16px 10px;
	/* font-family: 'Open Sans', sans-serif; */
	text-transform: uppercase; 
}


.nav .open > a, 
.nav .open > a:hover, 
.nav .open > a:focus{
	background-color:transparent;
}

.tb-megamenu .nav > .active > a, 
.tb-megamenu .nav > .active > a:hover, 
.tb-megamenu .nav > .active > a:focus{
	color: #000;
	background-color:transparent;
}

.tb-megamenu .nav > li > a:focus, 
.tb-megamenu .nav > li > a:hover{
	color:#000;
}

@media (max-width: 1000px) {
	.tb-megamenu .nav > li > a{
		padding: 10px 6px;
		font-size:13px;
	}
}
@media (max-width: 700px) {
	.tb-megamenu .nav > li > a{
		padding: 10px 4px;
		font-size:12px;
	}
}

@media (max-width: 600px) {
	.tb-megamenu .nav > li > a{
		font-size:11px;
	}
}

/* 2.2 Drop Down Menu */
div#comics-menu,
div#colouring-menu{
	overflow-y: scroll;
    max-height: 90vh;          /*100vh: to avoid bottom lines cutting off */
}

	
	
.tb-megamenu .dropdown-menu, 
.tb-megamenu .mega-align-justify > .dropdown-menu{
	background-color: #f4f4f4;
	border: none !important;
/*	margin-top:5px; */
	position: fixed !important;
    top: 83px ;                             /* 33 + 54 - 4 */
    left: 0 !important;
    width: 100% !important;
	
}
.tb-megamenu .dropdown-menu li {
	background: url(../images/icons/menuitem_footer.png) left bottom no-repeat !important;
	padding: 3px 0 6px !important;
}

.tb-megamenu .dropdown-menu li > a{
	font-size: 12px !important;
	color: #0d4272;
	text-transform: uppercase !important;
	font-family: 'Open Sans', sans-serif !important;
	/*padding-left:12px !important;*/
}

.tb-megamenu .dropdown-menu li > a:hover, 
.tb-megamenu .dropdown-menu li > a:focus, 
.tb-megamenu .dropdown-submenu:hover > a{
	color:#000;
	font-weight:bold !important;
}

.tb-megamenu .nav li.dropdown.open > .dropdown-toggle,
.tb-megamenu .nav li.dropdown.active > .dropdown-toggle, 
.tb-megamenu .nav li.dropdown.open.active > .dropdown-toggle, 
.tb-megamenu .nav > li.dropdown.open.active > a:hover{
	color: #000;
	background-color:transparent;
}

.tb-megamenu .nav li.dropdown.open > .dropdown-toggle, 
.tb-megamenu .nav li.open{
	background-color: #f4f4f4 !important;
}

.tb-megamenu .nav li.dropdown .caret
{
	color: #ccc !important;
	border-top-color: #ccc !important; 
    border-bottom-color: #ccc !important; 
}
.tb-megamenu .nav li.dropdown.open .caret, 
.tb-megamenu .nav li.dropdown.open.active .caret, 
.tb-megamenu .nav li.dropdown.open a:hover .caret, 
.tb-megamenu .nav li.dropdown.open a:focus .caret{
	color: #0d4272 !important;
	border-top-color: #0d4272 !important; 
    border-bottom-color: #0d4272 !important; 
}


.tb-megamenu .dropdown-menu .active > a,
.tb-megamenu .dropdown-menu .active > a:hover {
	color: #000;
	background-color: transparent;
	background-image:none;
}

.nav .open>a, 
.nav .open>a:hover, 
.nav .open>a:focus,
.nav .animating>a:hover{
	background-color: transparent !important;
	border-color: #fff !important;
}
	
.responsive-img{
	display: block;
    max-width: 100%;
    height: auto;
}

/* **************************************************************
* 3. Comic Section
****************************************************************** */
div#comic-section-links-bar{
	width: 100%;
    text-align: right;
	margin-top:2px;
	font-size: .75em;
    font-weight: bold;
	
	background: #009245; /* Old browsers */
	background: -moz-linear-gradient(top, #59bf24 0%,#2ea519 51%,#008a0e 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top, #59bf24 0%,#2ea519 51%,#008a0e 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, #59bf24 0%,#2ea519 51%,#008a0e 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#59bf24', endColorstr='#008a0e',GradientType=0 ); /* IE6-9 */
}

span#next-back{
	padding: 0 10px;
	border-left: 2px #333 solid;
    margin-left: 10px;
}

span#next-back a{
	font-size:150%;
}

/*
 * Right Section
*/

div#block-block-9{
	position: static; /* To move RCMPF image to the bottom of the right panel */
}


/* **************************************************************
* 4. About section in home
****************************************************************** */

.home-h3{
	font-size: 30px;
    line-height: 36px;
	margin-top:0;
    font-weight: 700;
    letter-spacing: -1px;
    color: #fff;
    text-transform: uppercase;
	border-bottom: 1px solid #8c8c8c;
	padding-bottom: 17px;
	margin-bottom: 25px;
}

.menu-h4{
	font-size: 26px;
    line-height: 30px;
	margin-top:0;
    font-weight: 700;
    letter-spacing: -1px;
    color: #fff;
    text-transform: uppercase;
	border-bottom: 1px solid #8c8c8c;
	padding-bottom: 17px;
	margin-bottom: 25px;
}


div.about_box p{
	color:#b6b6b6;
}

span#about-more{
	float:right;
}

span#about-more a{
	text-decoration: none;
	font-weight:bold;
}

/* ************************************************************
* blog_home
******************************************************************** */
div.blog_home img{
	width:100%;
}

/* **************************************************************
* 5. Image slideshow 
****************************************************************** */

#wcslideshow {
	position: relative;
	overflow: hidden;
		}
.slider-img, #wcslideshow{
	padding-left:0 !important;
	padding-right: 0 !important;	
}
#wcslideshow > div {
	position: absolute;
}

#wcslideshow > div{
	display:hidden;
}

#slider_nav{
	position:absolute;
}
/* **************************************************************
* 6. Testimonials
****************************************************************** */
#qt-header{
	padding-left: 5%;
    color: #000;
    font-size: 20px;
	margin: 7px 0 2px 0;
}
#wctestimonials {
	position: relative;
	overflow: hidden;
	text-align: center;
    margin-top: 2px;
    margin-bottom: 4px;

		}
.wc-testimonial, #wctestimonials{
	padding-left:0 !important;
	padding-right: 0 !important;	
}
#wctestimonials > div {
	position: absolute;
}

#wctestimonials > div{
	display:hidden;
}

.wc-testimonial{
	width:100%;
	font-weight: bold;
}

.wc-testimonial p{
	width: 100%;
    padding-left: 5%;
    padding-right: 5%;
    opacity: 0;
    font-size: 16px;
    line-height: 120%;
    text-align: left;
}
.wc-testimonial p .qt-name{
	display: block;
	color: #424242;
	margin-top:10px;
}

@media (max-width: 850px) {
	.wc-testimonial p{
		font-size: 80%;
	}
	div#testimonials_nav{
		display:none;
	}
	
}

div#testimonials_nav{
	float:right;
}
div#testimonials_nav img{
	width: 27%;
    height: auto;
}

/* ************************************************************************
* 7. Page Section
*************************************************************************** */

div.node-page,
div.node-blog,
div.node-forum,
div.view-blog,
div.node-webform,
div#block-system-main div form, 
div.node-comic-strip, 
div.node-e-postcards,
div#aggregator,
div.view-epostcards,
div.view-vids4kids
{
	padding: 0 20px !important;
}

div.view-blog ul{
	list-style: none;
}

div.view-blog img,
div.node-teaser img{
	max-width: 100px;
    height: auto;
}

div#page-content-inner{
	margin-top:90px;
}

div#page-content-panel{
	width: calc(100% - 280px);
	float:left;
}

@media (max-width: 1000px) {
	div#page-content-panel{
		width: 72%;                                        /* At 1000px total width, ads are 280px wide => content width = 72% Keeping the same ratio when things go smaller */
	}
}

div#right-panel{
	width: 280px;
	float:left;
}

@media (max-width: 1000px) {
	div#right-panel{
		width: 28%;                                        /* At 1000px total width, ads are 280px wide => content width = 72% Keeping the same ratio when things go smaller */
	}
}


div#image-box img,
div#image-box object{
	width:100%;
}
div#image-box object{
	display: block;
}

/*
 * Footer
*/

h5.footer-header{
	font-family: 'esFont';
    font-weight: bold;
	color: #03b8fe;
	margin: 4px 0;
	text-transform: uppercase;
	font-size:100%;
}

h5.second-header{
	margin-top: 24px;
}

div#footer-bar-1-inner ul{
	padding-left: 0px;
}

div#footer-bar-1-inner li{
	list-style-type: none;
	line-height: 20px;
}

div#footer-bar-1-inner a{
	color: #00a2e8;
	font-size: 15px;
	font-weight: normal;
	height: auto;
	line-height: 26px;
	list-style-image: none;
}

div#footer-bar-1-inner > div > div.content{
	display: table;
	width: 100%;
}

div#footer-bar-2 a{
	font-weight: bold;
	color: #00a2e8;
}

div#footer-bar-2 {
	text-align: center;
	font-size: 12px;
	line-height:150%;
}
/* *****************************************************************************
* A. Header Section
****************************************************************************** */
div#header-bar-2-inner{
    padding: 12px 0 0;
}

di#header-bar-2-col-2{
	float:right; 
	padding-right:0px;
	padding-top:30px;
}

/* *****************************************************************************
* B. Content Section
****************************************************************************** */
div#page{
    background-color: #ededed;
}

div#rmc-page-inner{
	background-color:#fff;
	padding:0;
	min-width:85%;
	max-width:95%;
	
	-webkit-box-shadow: 5px 5px 19px 1px rgba(68,68,68,0.55); 
    -moz-box-shadow: 5px 5px 19px 1px rgba(68,68,68,0.55);
     box-shadow: 5px 5px 19px 1px rgba(68,68,68,0.55);
}
div#page-below-content{
	background-color: #f5f5f5;
   /* padding: 60px 0 !important; */
	
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset;
    -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset;
    -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset;
}

/* *****************************************************************************
* C. Footer Bars
****************************************************************************** */

div#footer-bar-1-inner{
	background-color: #000;
	padding: 40px 0 !important;
	margin-top: 2px;
}

div.footer-bars{
	padding-left:40px;
	display: inline-block;
    float: none;
    vertical-align: top;
}
div#footer-bar-2{
	padding: 20px 0 !important;
	font-family: 'esFont';
}

/* *************************************************************************
* Temp
*************************************************************************** */


/************* Comics Menu *****************/

.view-links{
	display: none;
}
div.comics_menu_container div a{
	margin: 0;
	padding: 0 !important;
}

div#comics-inner{
	display: table;
}

div.image-box > a > img{
	max-width: 100%;
	margin-top: 20px;
    border-radius: 10%;
}
/* ************ Coloring Pages ************** */

div#comic-section-links-bar a{
	color: #000;
	padding: 3px 1px 2px 2px;
}

div#comic-section-links-bar a:active, 
div#comic-section-links-bar a:hover,
div#comic-section-links-bar a.active{
	background-color: #aaa;
    border-radius: 50%;
}

div.div-table{
	display: table;
	text-align:center;
	width: 100%;
}

div.table-row-even, 
div.table-row-odd{
	display: table-row;
}

div.table-row-odd{
	background-color: #ffed93;
}

div.table-row-even{
	background-color: #8ad1ef;
}
div.cell-four{
	font-weight: bold;
}
div.table-row-even div.cell-four a{
	color: #428bca;
}

div.cell-four a{
    margin-bottom: 11px;
    line-height: 95%;
    display: inline-block;
}

div.cell-one, 
div.cell-two, 
div.cell-three, 
div.cell-four{
	display: table-cell;
	padding: 7px;
	border: 1px white solid;
	vertical-align: middle;
}
div.header-cell{
	font-weight: bold;
	border-bottom: 2px #aaa solid;
	padding-bottom: 4px;
	margin-bottom: 3px;
}

div.cell-two h4{
	text-transform: uppercase;
    font-weight: bold;
    color: #000;
    font-size: 90%;
}
@media screen and (max-width: 700px) {
	div.cell-two h4{
		font-size: 70%;
	}
	div.cell-four a{
		font-size: 80%;
	}
}

div.coloring-page-container{
	width:100%;
	text-align: center;
}
button.top-print-button{
	margin-bottom: 15px;
}
button.bottom-print-button{
	margin-top: 15px;
}
div#image-box h1{
	text-transform: capitalize;
}

img.related-coloring-page{
	margin: 10px auto;
    border: 2px #bcbcbc solid;
}

img.other-coloring-images-0,
img.other-coloring-images-1,
img.other-coloring-images-2,
img.other-coloring-images-3{
	padding: 0 4px;
}

@media screen and (max-width: 1300px){
	img.other-coloring-images-3{
		display: none;
	}
}
@media screen and (max-width: 1000px){
	img.other-coloring-images-2{
		display: none;
	}
}
@media screen and (max-width: 790px){
	img.other-coloring-images-1{
		display: none;
	}
}

img.coloring-listing-icon{
	width: 129px;
	height: 100px;
}

div.comic-title-column{
	max-width: 150px;
}

/************* Video ********************** */

iframe{ /*For Video*/
    border:0;
}

div.video_home{
	text-align: center;
	padding-bottom: 20px;
	display: inline-block;
	float: none;
	vertical-align: top;
}
div.video_home iframe{
	padding-bottom: 10px;
}
div.video-full{
	width: 100%;
}
div.video-single h4{
	font-size: 25px;
    font-weight: 600;
    color: #232323;
    text-transform: uppercase;
}

div.video-list{
	display: table;
	text-align: center;
}


div.video-list h4{
	font-size: 90%;
    font-weight: 600;
    color: #232323;
    text-transform: uppercase;
}

/* ************* Links Page ********************* */
.safety-link-for, .safety-link{
	font-family: esFont;
}

.safety-link-for{
	margin-bottom: -5px;
}

.safety-link{
	font-size: 90%;
}

/* **************** FAQ Page ********************** */
a.faq-qlist {
    display: block;
    position: relative;
    top: -120px;
    visibility: hidden;
}


/* ******************* Client Pages ************************** */

tbody{
	border:0;
}
#pay-sqr-mid-right td{
	padding: 5px;
}
#pay-rounded-corners{
	margin-left:auto;
	margin-right:auto;
	width:80%;
	background-color: #fff;
	color: #000;
}

#pay-rounded-top-left{
	background: #63ca51 url('../images/ws/login/tl.png') no-repeat top left;	 /* #63ca51*/
}

#pay-rounded-top-right{
	background: #b1ef95 url('../images/ws/login/login-tr.png') no-repeat top right;	
}

#pay-rounded-bottom-left{
	background: #63ca51 url('../images/ws/login/bl.png') no-repeat bottom left;	
}

#pay-rounded-bottom-right{
	background: #b1ef95 url('../images/ws/login/login-br.png') no-repeat bottom right;	
}

img.pay-corner-left-top{
	width: 40px;
	height:40px;
	bottom:0px;
	left:0px;
	border:none;
	display: block !important;
}

img.pay-corner-left-bottom{
	width: 40px;
	height:40px;
	bottom:0px;
	left:0px;
	border:none;
	display: block !important;
}
.pay-left{
	position: relative;
	float:left;
}

.pay-right{
	position: relative;
	float:right;
}

#pay-sqr-mid-left{
	background: #63ca51;
}

#pay-sqr-mid-right{
	background: #b1ef95;
}

.pay-bg{
	background: #63ca51;
}
.clear{
	clear:both;
}

/* ******************* Article pages ***************** */
img.sidebyside,
img.full-width-img{
	max-width: 100%;
}

/* ***************** Aggregator Feed **************************** */

#aggregator .feed-item{
	margin: 1.5em 0;
	border: 1px solid #ccc;
    border-radius: 15px;
	padding:20px;
}

div.feed-item-body a,
div.feed-item-body br{
	display:none;
}

/* *************** Comic Strip ********************************** */
div.view-comic-strip ul.views-fluid-grid-items-width-150{
	text-align: center;
}

div.view-comic-strip table.views-table{
	margin: 0 auto 10px;
    border: 1px solid #bebfb9;
	border-collapse: initial;
	max-width: 95%;
}

td.views-field-field-big-image-1 a.colorbox img{
	max-width: 100%;
	height: auto;
}

div.view-comic-strip table tr.even{
    background: #fff;
}

div.view-comic-strip table td{
	border: 2px white solid;
}

div.view-comic-strip table th{
	border-bottom: 3px solid #ccc;
}

div.view-comic-strip table td.views-field-field-published-on{
	padding: 0 20px;
}

div.similar-comic-strips{
	margin-top: 30px;
}

div#page-content-panel li.views-fluid-grid-inline{
	margin-bottom: 20px;
	text-align: center;
	margin: 0 10px 10px 0;
}

div#page-content-panel li.views-fluid-grid-inline a{
	color: #168a2f;
    text-decoration: none;
    font-weight: bold;
    font-size: 16px;
}

/* **************** Forum ******************* */
div#forum table{
	margin: 0 auto;
    width: 95%;
    padding: 20px;
	border-collapse: separate;
	border-spacing: 2px;
}

div#forum table thead tr{
	background: url(/sites/all/themes/gp_2016/images/menu_bg.jpg) repeat-x top right #168a2f;
    height: 50px;
    color: #fff;
}
div#forum table thead tr th a{
	color: #fff;
}
div#forum table  tr.odd{
	background: #b4fb95;
    
}
div#forum table tr.even{
	background: #e0feba;
    
}

td.forum div.name a{
	font-weight:bold;
	font-size: 110%
}
div#forum table tr th{
	text-align: left;
    border: 0;
    padding-left: 10px;
}
div#forum table td{
	padding: 10px;
}

/* ***************** Custom Pages ***************** */
div.right-panel{
	min-height: 425px;
}

td.last-reply > span.submitted > span.username {
	display: block;
    font-weight: bold;
}

div.e-postcard-img object{
	width: 100%;
}