/*
  Theme Name: Kart Kingdom
  Version: 1.0
  Author: Renzo Olguin
  Author URI: mailto:rmolguin@pbs.org;
  Tags: Responsive, HTML5, CSS3, PBS KIDS, PBS

  !!!! Important !!!!
  Dependencies: /kartkingdom/assets/styles/style.css;
*/



/*=====================
 SINGLE POST STYLES
=====================*/
.main-content article.post{
  color: #10BAB9;
  position: relative;
  overflow: hidden;
}
    .main-content article.post header{
      margin-bottom: 32px;
    }

        .main-content article.post header ul{
          list-style: none;
          margin: 0 0 0 10px;
          padding: 0;
        }

            .main-content article.post header ul li{
              font-size: 14px;
              line-height: 14px;
              margin-right: 30px;
              float: left;
            }

                .main-content article.post header ul li:before{
                  content: "";
                  background-color: #10BAB9;
                  width: 10px;
                  height: 10px;
                  margin: 0 3px 0 0;
                  display: inline-block;
                }

                .main-content article.post header ul li a{
                  color:inherit;
                  text-decoration: none;
                }


        .main-content article.post h1{
          margin-bottom: 0px;
        }

        .main-content article.results-not-found h1{
          text-transform: none;
        }

            .main-content article.post h1 a{
              color: inherit;
              text-decoration: none;
            }


        .main-content article.post .post-edit-link {
          position: absolute;
          right: 0px;
          top: 5px;
          background-color: #10bab9;
          color: #FFFFFF;
          padding: 6px 10px 4px;
          text-decoration: none;
        }

        .main-content article.post p{
          color: #404041;
        }

            .main-content article.post p .read-more{
              color: #10BAB9;
            }


        .main-content article.post .tags-list {
          margin: 0;
          padding: 0;
          list-style: none;
        }

            .main-content article.post .tags-list .tag {
              float: left;
              margin-right: 14px;
            }

                .main-content article.post .tags-list .tag a{
                  color: inherit;
                }

                    .main-content article.post .tags-list .tag a:before{
                      content: "#";
                    }


@media( max-width: 599px){
  .main-content article.post h1 {
    margin-bottom: 4px;
  }
}



/*=========================
 ARCHIVE / LIST STYLTES
=========================*/
.video-graphic-header{
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 56.25%;
}

    .video-graphic-header:after{
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      background-image: url("../images/button_overlay_play.png");
      background-repeat: no-repeat;
      background-position: center center;
    }

    @media (max-width: 425px){
      .video-graphic-header:after{
        background-size: contain
      }
    }

.archive .main-content > h1,
.search .main-content > h1{
  font-family: "Colfax-Bold", Arial, sans-serif;
  background: #2DC0F0;
  color: #FFFFFF;
  font-size: 24px;
  text-transform: uppercase;
  height: 75px;
  line-height: 75px;
  margin: 10px auto -10px;
  padding: 0px 40px;
}

    .archive .main-content > h1 .results-count,
    .search .main-content > h1 .results-count{
      color: #207996;
    }


.pagination{
  margin: 25px auto 25px;
  text-align: center;
}


    .pagination .page-numbers{
      width: 50px;
      height: 50px;
      line-height: 50px;
      font-size: 36px;
      font-family: "PBS_KIDS_Headline", "Arial", sans-serif;
      color: #FFFFFF;
      background: #20C0F1;
      border: 4px solid #FFFFFF;
      display: inline-block;
      text-decoration: none;
      vertical-align: middle;
    }

    .comments-section .pagination .page-numbers{
    	border: none;
    	margin: 0 2px;
    }

    .pagination .page-numbers.current{
      background: #802A84;
    }

    .pagination .page-numbers.prev,
    .pagination .page-numbers.next{
      width: auto;
      height: 70px;
      line-height: 76px;
      position: relative;
      margin: 15px;
      font-family: "Colfax-Bold", "Arial", sans-serif;
      text-transform: uppercase;
    }

    .pagination .page-numbers.prev{
      margin-left: 0px !important;
      padding-right: 15px;
      border-radius: 16px 20px 20px 16px;
    }

    .pagination .page-numbers.next{
      margin-right: 0px !important;
      padding-left: 15px;
      border-radius: 20px 16px 16px 20px;
    }

    .comments-section .pagination .page-numbers.prev,
    .comments-section .pagination .page-numbers.next{
      border-radius: 16px;
    }

    .pagination .page-numbers.prev .arrow,
    .pagination .page-numbers.next .arrow{
      font-family: "Colfax-Medium", "Arial", sans-serif;
      font-size: 3em;
      vertical-align: middle;
      margin-top: -10px;
      display: inline-block;
      position: relative;
      z-index: 10;
    }

    .pagination .page-numbers.prev .arrow{
      left:-4px;
    }

    .pagination .page-numbers.next .arrow{
      right:-4px;
    }

    .pagination .page-numbers.prev:before,
    .pagination .page-numbers.next:before,
    .pagination .page-numbers.prev:after,
    .pagination .page-numbers.next:after {
      content: "";
      display: block;
      width: 0;
      position: absolute;
    }

    .pagination .page-numbers.prev:before,
    .pagination .page-numbers.next:before{
      height: 8px;
      top: 1px;
      border-top: 30px solid #FFDF00;
      border-bottom: 30px solid #FFDF00;
    }


    .pagination .page-numbers.prev:before {
      border-right: 22px solid #FFFFFF;
      left: -22px;
    }

    .pagination .page-numbers.next:before {
      border-left: 22px solid #FFFFFF;
      right: -22px;
    }

    .comments-section .pagination .page-numbers.prev:before,
    .comments-section .pagination .page-numbers.next:before{
      content: none;
    }

    .pagination .page-numbers.prev:after,
    .pagination .page-numbers.next:after {
      height: 4px;
      top: 3px;
      border-top: 30px solid transparent;
      border-bottom: 30px solid transparent;
    }

    .pagination .page-numbers.prev:after {
      border-right: 22px solid #20C0F1;
      left: -18px;
    }

    .pagination .page-numbers.next:after {
      border-left: 22px solid #20C0F1;
      right: -18px;
    }

    .comments-section .pagination .page-numbers.prev:after {
      left: -16px;
    }

    .comments-section .pagination .page-numbers.next:after {
      right: -16px;
    }

    .pagination .page-numbers.dots{
      background: none;
      border: none;
      color: #20C0F1;
      font-size: 52px;
      margin: 0 8px;
      line-height: 0.5em;
    }

    .ie8 .pagination .page-numbers.prev,
    .ie8 .pagination .page-numbers.next{
    	padding-right: 15px;
    	padding-left: 15px;
    }

    .ie8 .pagination .page-numbers.prev:before,
    .ie8 .pagination .page-numbers.next:before,
    .ie8 .pagination .page-numbers.prev:after,
    .ie8 .pagination .page-numbers.next:after{
    	content: none;
    }


@media (max-width: 900px){
  .pagination .page-numbers{
    width: 45px;
    font-size: 30px;
  }

  .pagination .page-numbers.dots{
    margin: 0;
  }
}


@media (max-width: 800px){
	.pagination .page-numbers.prev,
  .pagination .page-numbers.next{
    margin: 8px;
    padding: 0 10px;
    border-radius: 0;
    height: 60px;
    line-height: 66px;
  }

  .comments-section .pagination .page-numbers.prev,
  .comments-section .pagination .page-numbers.next{
    border-radius: 0;
  }

  .pagination .page-numbers.prev:before,
  .pagination .page-numbers.next:before,
  .pagination .page-numbers.prev:after,
  .pagination .page-numbers.next:after{
    content: none;
  }

  .pagination .page-numbers.dots{
    width: 26px;
    overflow: hidden;
  }

  .pagination .page-numbers.prev .arrow,
  .pagination .page-numbers.next .arrow{
    font-size: 2.5em;
  }

  .pagination .page-numbers.prev .arrow,
  .pagination .page-numbers.next .arrow{
    right: 0;
    left: 0;
  }
}


@media (max-width: 700px){
  .pagination .page-numbers.prev .copy,
  .pagination .page-numbers.next .copy{
    display:none;
  }
}


@media (max-width: 550px){
  .pagination .page-numbers{
    width: 36px;
    font-size: 24px;
  }

  .pagination .page-numbers.prev,
  .pagination .page-numbers.next{
    height: 50px;
    line-height: 56px;
    margin: 4px;
  }
}


@media (max-width: 450px){
	.comments-section .pagination {
		margin-left: -10px;
  	margin-right: -10px;
  }

  .pagination .page-numbers{
    /*background: none;*/
    border: none;
  }

  .comments-section .pagination .page-numbers{
  	margin: 0;
  }

  .pagination .page-numbers.dots{
    width: 13px;
  }
}


@media (max-width: 380px){
  .pagination .page-numbers.dots{
    display:none;
  }

  .pagination .page-numbers.prev,
  .pagination .page-numbers.next {
    padding: 0 6px;
    margin: 0;
  }

  .comments-section .pagination .page-numbers {
	  width: 32px;
	  font-size: 18px;
	}

	.comments-section .pagination .page-numbers.prev,
  .comments-section .pagination .page-numbers.next {
    padding: 0;
    margin: 0;
  }
}



/*=================
 COMMENT STYLES
=================*/
.comments-section{

}

    .comments-section .comment-respond {
      margin: 60px 0;
    }

        .comments-section .comment-respond .must-log-in{
          background: #4F1F59;
          color: #FFFFFF;
          font-size: 20px;
          font-family: "PBS_KIDS_Headline_Bold", "Arial", sans-serif;
          text-align: center;
          height: 75px;
          line-height: 75px;
          margin: 0;
          position: relative;
          left:-10%;
          width: 120%;
        }

            .comments-section .comment-respond .must-log-in .btn-square{
              font-size: 1em;
              margin-right: 1em;
              position: relative;
              margin-bottom: 0.6em;
            }


        .comments-section .comment-respond .comment-form{
          border: solid 1px #CCC;
          border-radius: 0 0 16px 16px;
          padding: 10px 16px 12px;
          margin-left: 84px;
          position: relative;
          background: #FFFFFF;
        }

            .comments-section .comment-respond .comment-form .commentform-cancel-comment-reply-link{
              display: none;
            }

            .comments-section .comment-respond .comment-form .comment-image-upload{
              position: relative;
              padding: 0;
              height: 0;
            }

            .no-fileinput .comments-section .comment-respond .comment-form .comment-image-upload{
            	display: none;
            	visibility: hidden;
            	overflow: hidden;
            }

                .comments-section .comment-respond .comment-form .comment-image-upload label{
                  position: absolute;
                  overflow: hidden;
                  font-size: 16px;
                  padding: 0;
                  height: 42px;
                  width: 46px;
                  background-image: url("../images/icon-camera.png");
                  background-repeat: no-repeat;
                  background-position: center center;
                }

                    .comments-section .comment-respond .comment-form .comment-image-upload label input[type="file"]{
                      position: absolute;
                      left: -1000px;
                    }

                .comments-section .comment-respond .comment-form .comment-image-upload .comment-image-upload-preview-wrapper{
                  position: absolute;
                  left: 54px;
                  top: -50px;
                  height: 46px;
                  overflow: hidden;
                  padding: 4px 10px 0 0;
                }

                    .comments-section .comment-respond .comment-form .comment-image-upload #comment-image-upload-preview{
                      min-height: 46px;
                      width: 70px;
                      float:left;
                    }

                    .comments-section .comment-respond .comment-form .comment-image-upload #comment-image-upload-preview-text{
                    	width: 60px;
                    	height: 42px;
										  line-height: 44px;
										  padding: 0 5px;
										  margin: 0 8px 0 0;
											float: left;
										  overflow: hidden;
										  text-overflow: ellipsis;
										  color: #10BAB9;
										  border: 2px #802B83 solid;
										  background: #FFF;
										  font-size: 0.8em;
										}


                    .comments-section .comment-respond .comment-form .comment-image-upload #remove-image{
                      position: absolute;
                      right: 4px;
                      top: 8px;
                      height: 22px;
                      width: 22px;
                      overflow: hidden;
                      background-color: #802B83;
                      color: #FFFFFF;
                      text-decoration: none;
                      text-align: center;
                      font-size: 24px;
                      line-height: 20px;
                      font-weight: bold;
                      float: left;
                      cursor: pointer;
                    }


            .comments-section .comment-respond .comment-form:before {
              content: "";
              width: 0;
              height: 0;
              border-left: solid rgba(0, 0, 0, 0) 20px;
              border-top: solid #CCC 20px;
              position: absolute;
              left: -20px;
              top: -1px;
            }

            .comments-section .comment-respond .comment-form:after {
              content: "";
              width: 0;
              height: 0;
              border-left: solid rgba(0, 0, 0, 0) 20px;
              border-top: solid #FFF 20px;
              position: absolute;
              left: -17px;
              top: 0px;
            }

                .comments-section .comment-respond .comment-form p{
                  margin: 0;
                }

                .comments-section .comment-respond .comment-form .avatar{
                  width: 54px;
                  border: solid #000 3px;
                  background: #FFFFFF;
                  position: absolute;
                  left: -84px;
                  top: -1px;
                }

                .comments-section .comment-respond .comment-form #comment{
                  width: 100%;
                  box-sizing: border-box;
                  padding: 0.7em;
                  border: #999999 solid 1px;
                }

                .comments-section .comment-respond .comment-form .form-submit{
                  text-align: right;
                  padding: 0;
                  height: 54px;
                  position: relative;
                }

                    .comments-section .comment-respond .comment-form .form-submit .submit{
                      font-family: "Colfax-Bold", "Arial", sans-serif;
                      font-size: 16px;
                      padding: 13px 12px 10px;
                      position: absolute;
                      right: 0;
                    }


    .comments-section .comments-list.loading:after{
      content: "";
      height: 70px;
      position: relative;
      display: block;
      text-align: center;
      background-image: url("./img/arrowspin.gif");
      background-repeat: no-repeat;
      background-position: center center;
      margin: 30px 0 0;
      background-size: contain;
    }

    .comments-section .comments-list,
    .comments-section .comments-list .children{
      list-style: none;
      margin:0;
      padding: 0;
    }

    .comments-section .comments-list .children{
      position: relative;
      margin-left: -64px;
      left: 8.25%;
    }

    		.comments-section .comments-list .comment{
    			padding: 0 0 0 64px;
    			margin: 40px 0 0;
    			min-height: 50px;
    		}

		        .comments-section .comments-list .comment .comment-body{
		          font-family: "Colfax-Regular", "Arial", sans-serif;
		          font-size: 14px;
		          padding: 0;
		          margin: 0;
		        }

		            .comments-section .comments-list .comment .comment-body .comment-details{
		              position: relative;
		              margin: 0;
		            }

		                .comments-section .comments-list .comment .comment-body .comment-details .avatar{
		                  position: absolute;
		                  left: -64px;
		                  border: solid #000000 2px;
		                  background: #FFFFFF;
		                  width: 46px;
		                  height: auto;
		                }

		                .comments-section .comments-list .comment .comment-body .comment-details .author{
		                  font-family: "Colfax-Bold", "Arial", sans-serif;
		                  font-size: 16px;
		                  font-style: normal;
		                  color: #802A84;
		                }

		                .comments-section .comments-list .comment .comment-body .comment-details .time-posted{
		                  text-decoration: none;
		                  font-size: 12px;
		                  font-style: normal;
		                  color: #999999;
		                  margin-left: 1em;
		                }

		            .comments-section .comments-list .comment .comment-body .comment-awaiting-moderation{
		              color:#FF0000;
		            }

		            .comments-section .comments-list .comment .comment-body p{
		              word-wrap: break-word;
		              font-size: 14px;
		              color: #000000;
		              margin: 0;
		            }

                    .comments-section .comments-list .children .comment .comment-body p {
                      margin-right: 8%;
                    }

		            		.comments-section .comments-list .comment .comment-body .reply .comment-reply-link,
                    .comments-section .comments-list .comment .comment-body .reply .comment-reply-login{
				            	color: #10BAB9;
				            	text-decoration: none;
                      cursor: pointer;
		            		}

        		.comments-section .comments-list .comment .comment-respond {
				      background: #986699;
						  margin: 14px -6.55% 0;
						  padding: 32px 6.55% 24px 64px;
						  position: relative;
						  left: -64px;
						  width: 106.55%;
				    }

				    		.comments-section .comments-list .comment .comment-respond .comment-form{
				    			left: 3%;
				    		}

                .comments-section .comments-list .comment .comment-respond .comment-reply-title{
				    			position: relative;
                  left: 3%;
                  padding: 0 16px;
                  margin: 0 0 0 84px;
                  z-index: 1;
								}

                    .comments-section .comments-list .comment .comment-respond .comment-reply-title small{
                      position: relative;
                      display: block;
                    }

      					    		.comments-section .comments-list .comment .comment-respond .comment-reply-title small a{
      					    			position: absolute;
                          right: 4px;
                          bottom: -38px;
                          height: 24px;
                          width: 24px;
                          overflow: hidden;
                          background-color: #802B83;
                          color: #FFFFFF;
                          text-decoration: none;
                          text-align: center;
                          font-size: 26px;
                          line-height: 24px;
                          font-weight: bold;
      					    		}


@media (max-width: 749px){
	.comments-section .comments-list .comment .comment-respond .comment-form{
		left: 0;
	  margin-left: 10%;
	}

  .comments-section .comments-list .comment .comment-respond .comment-reply-title{
    left: 0;
    margin-left: 10%;
  }
}

@media (max-width: 550px){
	.comments-section .comment-respond .must-log-in{
	  font-size: 18px;
	  height: 65px;
	  line-height: 65px;
	}
}

@media (max-width: 499px){
	.comments-section .comment-respond .must-log-in{
	  font-size: 16px;
	  height: 60px;
	  line-height: 60px;
	}

	.comments-section .comment-respond .must-log-in .btn-square {
	  margin-right: 0.5em;
	}

  .comments-section .comment-respond .comment-form{
    margin-left: 0;
    padding: 10px;
  }

      .comments-section .comment-respond .comment-form:before,
      .comments-section .comment-respond .comment-form:after{
        content:none;
      }

      .comments-section .comment-respond .comment-form .avatar{
        width: 46px;
        border: solid #000 0px;
        left: 14px;
        bottom: 6px;
        top: auto;
        display: inline-block;
        background: none;
      }

      .comments-section .comment-respond .comment-form .comment-image-upload {
        height: 54px;
      }

        .comments-section .comment-respond .comment-form .comment-image-upload label{
          right: 0;
        }

        .comments-section .comment-respond .comment-form .comment-image-upload .comment-image-upload-preview-wrapper{
          left: auto;
          right: 60px;
          top: 4px;
        }


	.comments-section .comments-list .comment{
		padding: 0 0 0 50px;
	  margin: 30px 0 0;
	  min-height: 40px;
	}

      .comments-section .comments-list .comment .comment-body .comment-details .avatar {
			  left: -46px;
			  border: solid #000000 1px;
			  width: 36px;
			}

      .comments-section .comments-list .comment .comment-respond{
        padding-top: 24px;
      }

          .comments-section .comments-list .comment .comment-respond .comment-form{
            margin-left: -38px;
          }

          .comments-section .comments-list .comment .comment-respond .comment-reply-title{
            margin-left: -38px;
            padding: 0 10px;
          }


	.comments-section .comments-list .children {
	  margin-left: -50px;
	  left: 10%;
	}

			.comments-section .comments-list .children .comment{
				margin: 20px 0;
			}

          .comments-section .comments-list .children .comment .comment-body p {
            margin-right: 10%;
          }

}

@media (max-width: 420px){
  .comments-section .comment-respond .must-log-in > span{
    display: none;
  }

  .comments-section .comment-respond .must-log-in .btn-square {
    margin-right: 2px;
  }
}



/*================
 SEARCH STYLES
================*/
form.search {
  display: block;
  margin: 14px 0;
  text-align: right;
}

    form.search .search-input{
      box-sizing: border-box;
      width: 250px;
      height: 40px;
      padding: 7px;
      font-size: 24px;
      color: #10BAB9;
      font-family: "Colfax-Bold", "Arial", sans-serif;
      text-transform: uppercase;
    }