/*
Theme Name: TheNewBasics v3
Author: WebWerk
*/

/** font **/
@font-face {font-family:benton;src: url(fonts/BentonGothicCond-Regular.ttf);}
@font-face {font-family:bentonmedium;src: url(fonts/BentonGothicCond-Medium.ttf);}

/** date picker **/
.ui-datepicker-month{color:#1c94c4;}
.ui-datepicker-year{color:#1c94c4;}

/** remove cursor **/
.checkbox label.nopointer{cursor:auto;}

/** splash screen **/
#splash_screen{overflow-y:hidden;max-height:520px}
#splash_screen div:nth-child(1){background:#c4d9f3;height:300px;}
#splash_screen div:nth-child(2){float:left;margin-top:-239px;text-align:center;width:100%;}
#splash_screen div img{width:300px;cursor:pointer;}

/** navbar toggle **/
.navbar .container-fluid{padding:5px;margin:0;}
.navbar-toggle{float:left;border:none;margin:0;padding:5px;}
.navbar{position:fixed;top:0;left:0;margin:0 0 -50px 0;background:#6196d0;border:none;z-index:3;min-height:10px;padding: 0 0 0 0;cursor:pointer;}
.navbar-inverse .navbar-toggle:focus, .navbar-inverse .navbar-toggle:hover{background:none;}

/** youtube **/
#youtube{text-align:center;width:100%;}
#youtube .row{text-align:center;padding:10px 10px;}
#youtube #box{margin-top:-70px;}
#youtube-container{}
#youtube .row-centered {text-align:center;max-width:400px;margin:0 auto;}
.col-centered {display:inline-block;float:none;text-align:left;margin-right:-4px;}
.col-centered p{font:bold 7px benton;padding: 5px 0 0;}
.col-centered img{cursor:pointer;}
#ydesc{text-align:left;}
#ycontainer{max-width:500px;text-align:center;margin:0 auto;}
#youtube #box{margin: 50px 30px 0 0;}
#youtube #mainlogo{margin: 30px auto 0;}
#youtube #youtubefooter img.logo{float:left;width:110px;margin-left:40px;}


/** modal **/
.text-color{color:#fff;}
.under{text-decoration:underline}
.pull-15{padding-left:15px;}
.control-label{color:#888;font-weight:200}
.modal-header{border:none;}
.modal-header .close{margin: -28px -31px 0 0;opacity:1;}
.close:focus, .close:hover{opacity:1;}
.modal-content{border-radius:0;}
#basics-modal-title{color:#6196d0;font-style:benton;}
.sqbtn{background:#6196d0;display:table;color:#fff;padding:6px 15px 4px;font-size:10px;border:solid 2px #fff;}
.sqbtn.highlight{background-color: #92C7FF}
.sqbtn.center{margin:0 auto;}
.sqbtn:hover{text-decoration:none;color:#fff;}
.sqbtn:focus{text-decoration:none;color:#fff;}
.modal-header h4{font-size:16px;}
.modal-content, .modal-content a{background-color: #69C2FB; color: #fff;}
.cursor-pointer{cursor: pointer}

/*---- loading ----*/
.loadingmodal{color:#6196d0;max-width:200px !important;text-align:center;margin:100px auto !important;}
#h1loading{text-align:center;color:#6196d0;}

/*---- login modal ----*/
.loginmodal{max-width:420px;margin:13px auto;}
.loginmodal .modal-header .close{margin:-28px -31px 0 0;}
.loginmodal .modal-content{padding:0 10px;}
.right{float:right;}
.guest{background:#888;}

/*---- reset password ----*/
.resetpassword{max-width:470px;margin:13px auto;}
.resetpassword .modal-header .close{margin:-30px -21px 0 0;}

/*---- sign up ----*/
.registermodal{max-width:400px;}
.registermodal h4{text-align:center;}
.registermodal label{font-weight:200;text-align:left;}
.signup-spacer{margin:0 0 15px;}
.registermodal .sqbtn{padding:8px 15px 5px;}
.registermodal .modal-header .close{margin:-28px -30px 0 0;}


/*---- child list ----*/
.child-list{max-width:300px;margin:10px auto;}
.child-list h4{text-align:center;}

/*---- add child ----*/
.addchild{max-width:500px;margin:10px auto;}
.addchildform .modal-header .close{margin:-28px -30px 0 0;}

/** book title menu */
#booktitle{border:none;height:100%;position:fixed;top:0;left:0;z-index:2;width:216px;background:#6196d0;box-shadow:10px 3px 5px -2px #888;padding:45px 10px 10px;}
#booktitle > div{overflow-y:auto;height:100%;}
#booktitle a{color:#fff;text-decoration:none;font:10px bentonmedium;}
.hidebookmark{display:none;}

/** book toggle **/
#booktoggle #childname{text-align:center;color:#fff;font:bold 15px benton;padding:15px 0;}
#childname > div > a{font:bold 10px benton;color:#d8460d}
#readwhole, #readchild{cursor:pointer;font:bold 11px benton;background:#86bcf7;margin:0 -10px;padding:10px 0 10px;color:#fff;text-align:center;}
#readchild{margin: 0 -10px 15px;}
#booktoggle  #childname, #childname div{background:#6196d0;}
#booktoggle div img{margin:0 10px 0 0;}

/** search result **/
#searchresult a{text-decoration:none;font-family:benton;}
#searchresult a div{color:#888;}


/** main **/
main{width:100%;}
main h1{font-family:bentonmedium;}
main p strong span{font-size:19px;}
#age {float:right;margin: 0.4em 0 1.4em .4em;}

/** social **/
#youtube #social img{float:none;margin-left:0;}
#youtube #social {text-align:center;margin:15px 0 10px;}
#youtube #social a{display:inline;}
#youtube #social a:nth-child(2){margin-left:13px;}

/** solid box **/
.solidbox{background:#d7eaf9;margin:20px 0 20px;}
/** blue head **/
#boxheader{color:#fff;font:bold 13px benton;line-height:2.6;}
#boxheader span{color:#fff;font:bold 13px bentonmedium;background:#6196d0;padding:11px 15px 7px;text-transform:uppercase;}
#boxheader span .normal {font-weight:normal;}
.boxbody{color:#000;font:14px benton;padding:5px 15px;line-height:1.3;}
/** black head **/
#blackboxheader{background:#000;color:#fff;font:bold 13px benton;padding:5px 15px;}
.boxbody ul{padding-left:0;margin:1em 2em;}
.boxbody ul li{list-style:disc;}
.boxbody em strong{color:#000;font:normal bold 14px bentonmedium;}
.boxbody strong em{color:#000;font:normal bold 14px bentonmedium;}
.boxbody em{line-height:1.5;}

/** list box **/
.listbox{font-family:benton;}
.listbox .listheader{font-weight:bold;background:#FB8536;color:#fff;display:table;text-align:center;padding:5px 5px 0;text-transform:uppercase;font-size:12px;line-height:1;}
/*.listbox .listheader span{color:#3493c1}*/
/*.listbox .listbody{margin-left:15px;}*/
.listbox .listbody .arrow-right{width:0;height:0;border-top:5px solid transparent;border-bottom:5px solid transparent;border-left:5px solid black;float:left;margin-right:3px;margin-top:4px;}
.arrow-right{width:0;height:0;border-top:5px solid transparent;border-bottom:5px solid transparent;border-left:5px solid black;float:left;margin-right:3px;margin-top:4px;}

/*********** circle alphabet ************/
.circle{width:55px;height:55px;display:block;font-size:1px;color:#6196d0;margin:0px 0 5px;}
.a{background:url("img/az.png") repeat scroll -6px -2px}
.b{background:url("img/az.png") repeat scroll -72px -2px}
.c{background:url("img/az.png") repeat scroll -139px -2px}
.d{background:url("img/az.png") repeat scroll -207px -2px}
.e{background:url("img/az.png") repeat scroll -274px -2px}
.f{background:url("img/az.png") repeat scroll -337px -2px}
.g{background:url("img/az.png") repeat scroll -407px -2px}
.h{background:url("img/az.png") repeat scroll -466px -2px}
.i{background:url("img/az.png") repeat scroll -6px -67px}
.j{background:url("img/az.png") repeat scroll -72px -67px}
.k{background:url("img/az.png") repeat scroll -139px -67px}
.l{background:url("img/az.png") repeat scroll -207px -67px}
.m{background:url("img/az.png") repeat scroll -274px -67px}
.n{background:url("img/az.png") repeat scroll -337px -67px}
.o{background:url("img/az.png") repeat scroll -407px -67px}
.p{background:url("img/az.png") repeat scroll -466px -67px}
.q{background:url("img/az.png") repeat scroll -6px -129px}
.r{background:url("img/az.png") repeat scroll -72px -129px}
.s{background:url("img/az.png") repeat scroll -139px -129px}
.t{background:url("img/az.png") repeat scroll -207px -129px}
.u{background:url("img/az.png") repeat scroll -274px -129px}
.v{background:url("img/az.png") repeat scroll -337px -129px}
.w{background:url("img/az.png") repeat scroll -407px -129px}
.x{background:url("img/az.png") repeat scroll -466px -129px}
.y{background:url("img/az.png") repeat scroll -6px -285px}
.z{background:url("img/az.png") repeat scroll -72px -285px}

/** main top logo **/
#mainlogo{text-align:center;padding: 10px 0;margin:0px auto 0;}
@media screen and (min-width: 990px){
    #mainlogo img{width:290px;}
}
#mainlogo p{color:#e17449;font:12px benton;font-weight:900;letter-spacing:2px}
.content-wrapper{padding-left: 0;}

/** grid **/
html, body{height:100%;}
.container-fluid{height:auto;}
/*#main-container{height:100%;}*/
/*#main-container div{height:100%;display:block;}*/
.left-column{background:#c4d9f3;width:216px;}
/*.center-column{min-height:1600px;padding-left:20px;padding-right:25px;}*/
.center-column{min-height:800px;padding-left:20px;padding-right:25px;}
.right-column{background:#c4d9f3}

/** box **/
#box div{float:left;}
#box a{text-decoration:none;}
#wov a img{padding: 0 0 10px;}
#md a img{padding: 0 0 7px;}
#tribecalogo{width:110px;}

/** login logout **/
#booktitle nav{margin-bottom:10px;color:#fff;}
#booktitle nav a{font:bold 14px benton;}
#booktitle nav a.activelog{color:#d8460d;}

/** search **/
#search-container{border:solid 1px #fff;margin:0 0 15px;}
#search-container input{border:none;background:none;}
#search-container img{cursor:pointer;position: absolute;top:0;right:5px;cursor: pointer;margin:5px 0 0;}
/*#search-container input[type="search"]{border:none;background:none;max-width:85%;}
#search-container input[type="image"]{cursor:pointer;float:right;margin: 2px 0 0;}*/


/* Small devices (tablets, 768 and up) */
@media (min-width: 768px) {
	#splash_screen div img{width:450px;}
	#splash_screen div:nth-child(2){margin-top:-358px;}
	#splash_screen div:nth-child(1){background:#c4d9f3;height:400px;}

    .navbar-header {float: none;}
    .navbar-toggle {display: block;border-radius:0}
    .navbar-collapse {border-top: 1px solid transparent;box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);}
    .navbar-collapse.collapse {display: none!important;}
	.navbar{border-radius:0}

    #youtube .row-centered {max-width:550px;text-align:center;padding-right:30px;}
    .loginmodal{margin:30px auto;}
    .loginmodal .modal-header .close{margin:-31px -42px 0 0;}
    .registermodal{margin:30px auto;}
    .child-list{margin:30px auto;}
    .resetpassword{margin:30px auto;}
    .resetpassword .modal-header .close{margin:-31px -32px 0 0;}

    .pull-15{padding-left:0;}

    .modal-header h4{font-size:18px;}
    #youtube #box{margin: 50px 90px 0 0;}
    #youtube #youtubefooter img.logo{float:left;margin-left:105px;}
    .registermodal .width-50{width:50%;}
    #mainlogo img{width:510px;}
    #mainlogo p{color:#e17449;font: 16px benton;font-weight:900;letter-spacing:3px}
    #social img{margin-left:15px;width:34px;}
    #youtube #social a:nth-child(2){margin-left:15px;}
    #tribecalogo{width:142px;}
    #splash_screen{max-height:none;}
}

/* Medium devices (desktops, 992px and up) */
@media (min-width: 992px) {
    .navbar-toggle {display: none;}
	.navbar{display:none;}
    /*#booktitle{width:16.6667%;}*/
    #booktitle{width:216px;}
    .equal, .equal > div[class*='col-'] {
        display: -webkit-box;
        display: -moz-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        flex:1 1 auto;
    }
    .hidebookmark{display:block;}
    #youtube .row-centered {padding:0;width:100%;max-width:none;text-align:center;}
    .loginmodal{margin:30px auto;}
    .loginmodal .modal-header .close{margin:-31px -42px 0 0;}
    .registermodal{margin:30px auto;}
    .resetpassword{margin:30px auto;}
    .resetpassword .modal-header .close{margin:-31px -32px 0 0;}
    .child-list{margin:30px auto;}
    .modal-header h4{font-size:18px;}
    #youtube #box{margin: 50px 60px 0 0;}
    #youtube #youtubefooter img.logo{float:left;margin-left:80px;}
    .registermodal .width-50{width:50%;}
    #mainlogo img{width:510px;}
    #mainlogo p{color:#e17449;font: 16px benton;font-weight:900;letter-spacing:3px}
    #social img{margin-left:15px;width:34px;}
    #youtube #social a:nth-child(2){margin-left:15px;}
    #tribecalogo{width:142px;}
    #splash_screen{max-height:none;}
}

/* Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
    .hidebookmark{display:block;}
    /*#youtube .row-centered {padding: 0 200px 0 184px;}*/
    #youtube .row-centered {max-width: 610px;margin: 0;}
    /*#youtube .row-centered {text-align:center;max-width:400px;margin:0 auto;}*/
    #ydesc div{font-size:13px;}
    .loginmodal{margin:40px auto;}
    .loginmodal .modal-header .close{margin:-31px -42px 0 0;}
    .resetpassword{margin:40px auto;}
    .resetpassword .modal-header .close{margin:-31px -32px 0 0;}
    .child-list{margin:40px auto;}
    .modal-header h4{font-size:18px;}
    #youtube #box{margin: -100px -20px 0 0;}
    #youtube #youtubefooter img.logo{margin:0;float:none;}
    /*.registermodal*/
    .registermodal .width-50{width:50%;}
    #mainlogo img{width:520px;}
    #mainlogo p{color:#e17449;font:17px benton;font-weight:900;letter-spacing:3px}
    #social img{margin-left:15px;width:34px;}
    #youtube #social a:nth-child(2){margin-left:15px;}
    #tribecalogo{width:142px;}
    #splash_screen{max-height:none;}
    #age {float:right;margin: 0.4em 0 1.4em .4em;}
}
.email {
    height: 31px;
    width: 31px;
}

.logo-wrapper-mobile {
    padding: 0 35px;
    margin-top: 0;
}
.logo-wrapper-mobile img{
    padding-top: 2px;
}
.related_article_link {
    color: #6196d0;
    text-decoration: underline !important;
}