/*  GLOBAL STYLE RESET */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,select,p,blockquote,th,td{padding:0; margin:0; font-size:100%; line-height:1.6em}
body{font:62.5% Arial, Helvetica, sans-serif; height:100%}
/*  The 62.5% body text here makes 1em = 10px, therefore 1.2em = 12px and so on.*/

table{border-collapse:collapse; border-spacing:0}
fieldset,img{border:0}
address,caption,cite,code,dfn,em,th,var{font-weight:normal; font-style:normal}
ol,ul{list-style:none}
caption,th{text-align:left}
h1,h2,h3,h4,h5,h6{font-weight:bold; font-size:100%; color:#F7D631}
q:before,q:after{content:''}
abbr,acronym{border:0}

/* removes dotted border from all focused links */
:-moz-any-link:focus, a, input{outline:none!important}

/*  Just a few styles I add to most sites   */
.fr{float:right}
.fl{float:left}
.bold{font-weight:bold}
.clear{clear:both}
a{text-decoration:none}
p{font-size:1.2em; color:#666}

/* IE PNG FIX */

/* ///////////////// Kidyos Specific Styles //////////////////////////   */
hr{color:#eee}
#header{background: url('/images/headerBg_daytime.png') repeat-x; width:100%; height:301px;}
#header .centerContent{background: url('/images/clouds.png') no-repeat -1px 75px;  height:301px;}
#logo{background: url('/images/kidyos_logo.png') no-repeat; height:107px; width:285px; float:left; margin-bottom:30px}
#logo:hover {cursor:pointer}
#NavSearch{float:left; margin:20px 0 0 170px}
#NavSearch form{float:left}
#altNav, #mainNav{float:left; margin-right:20px}
#altNav li, #mainNav li{display:inline; padding:0 5px}
#altNav li a, #mainNav li a{font-size:1.4em; color:white; font-weight:bold}
#altNav li a {color:black}
#kidInput{font-size:1.2em; padding:2px 5px; margin-right:10px}
#kidyosSubmit{background:#F7D631; padding:2px 5px; border:none; font-size:1.2em}
#content{background:#CAD34F; min-height:300px}
#footer{background:#281C0B; height:40px; padding:10px;font-size:1.8em}
.centerContent{width:950px; margin:0 auto}
.centerContent h1{font-size:1.8em; color:#7CCBF7; font-family:Helvetica, Arial, Sans-Serif; font-weight:normal}
.centerContent h2{font-size:1.4em}
.familyInfo{float:left; margin-left:20px; width:345px}
.familyInfo a{float:right; margin-top:-50px}
.familyInfo a+a{float:right; margin-top:-35px}
#kidyosBulletsOn, #kidyosBullets{list-style-type:disc; max-width:340px; font-size:1.4em; float:none; padding-left:20px}
#alertMessage{background:#F7D631; border:1px solid yellow; padding:10px; margin-top:20px; width:90%}
#alertMessage p{color:#fff}
#rightCol{}

.boxTop, #signUpPage .fr .mainContentBox .boxTop{background: url('/images/mainContent_top2.png') no-repeat; height:40px; width:453px}
.boxMid, #signUpPage .fr .mainContentBox .boxMid{background: url('/images/mainContent_mid2.png') repeat-y; width:453px}
.boxBottom, #signUpPage .fr .mainContentBox .boxBottom{background: url('/images/mainContent_bottom2.png') no-repeat; height:53px; width:453px}

.miniField {width:25%; padding-right:5px}

#main .fr .IEFix, .IEFix{margin-left:35px; width:440px; display:block}
.fr .mainContentBox{padding:0 0 0 0; }

.signup{width:350px; margin:20px auto 0}
.signup li{display:block; height:40px}
.signup label{width:100px; text-align:right; font-size:1.2em; margin-right:20px; margin-top:20px}
.signup .tip { text-align:left; font-size:1em;  color:#7CCBF7}
.signup input{float:left; font-size:1.4em; padding:2px 5px}
.signup select{float:left;font-size:1.4em; padding:2px 5px}
.signup .submitBtn{background:#7CCBF7; border-style:ridge; font-size:1.4em; padding:2px 10px; margin-top:10px; width:248px}
.signup .profilePic {width:64px; height:64px; margin-right:23px; }

.settings{width:100%; margin:20px auto 0}
.settings label {width:100px; text-align:right; margin-right:20px; margin-top:10px; font-size:1.2em;float:left; display:block;line-height:1.4em;}
.settings .label2 {width:auto; text-align:left; margin-left:5px; margin-top:10px; font-size:1.2em;float:left; display:block;line-height:1.4em;}
.settings .tip {width:450px; text-align:right; margin-right:20px; margin-top:10px; font-size:1.2em;float:right; display:block;line-height:1.4em;color:#7CCBF7}
.settings input{font-size:1.4em;margin-top:10px; width: 300px;float:left; display:block;line-height:1.4em;}
.settings select{float:left;font-size:1.4em; padding:2px 5px;margin-top:10px}
.settings .submitBtn{background:#7CCBF7; border-style:ridge; font-size:1.4em; padding:2px 10px; margin-top:10px; width:248px}
.settings .profilePic {width:32px; height:32px; margin-right:10px;float:left }

.selected {border: 4px solid #7CCBF7}
.unselected {border:1px solid black}
.suggestedContent{display:block}
.suggestedContent li{display:inline; float:left; width:100px}
.suggestedContent li img{background:#ffffff; width:62px; height:62px; display:block}
.suggestedContent li p{width:62px; line-height:1.2em}
.suggestedContent a span{font-size:1.2em; margin-top:5px; display:block;color:black}
#main .boxTop, #home .boxTop{background: url('/images/mainContent_top.png') no-repeat; width:519px; height:41px}
#main .boxMid, #home .boxMid{background: url('/images/mainContent_mid.png') repeat-y; width:519px; display:block}
#main .boxBottom, #home .boxBottom{background: url('/images/mainContent_bottom.png') no-repeat; width:519px; height:61px}
#signUpPage .fr .mainContentBox{margin-left:20px}
#signUpPage .fl .IEFix{width:300px;}
#signUpPage .fr .IEFix{width:400px; margin:0 auto; padding-left:20px}
#content .centerContent .fl{width:400px}
#content .centerContent .fr{width:520px; margin-top:-190px}
#signUpPage .centerContent .fl{margin-top:-190px}
#signupBullets {list-style-type:disc; max-width:340px; font-size:1.4em; float:none; padding-left:20px; color:lime}

#contentPage .centerContent .fl{margin-top:-150px}/*886*/
#contentPage .boxTop {background: url('/images/mainContent_top3.png') no-repeat; width:906px; height:30px}
#contentPage .boxMid {background: url('/images/mainContent_mid3.png') repeat-y; width:846px; display:block; padding-left:30px; padding-right: 30px; margin:0px}
#contentPage .boxBottom {background: url('/images/mainContent_bottom3.png') no-repeat; width:906px; height:40px}


#main #kidyosBullets{visibility:hidden}
#signUpPage #kidyosBullets{visibility:hidden}
#contentPage #kidyosBullets{visibility:hidden}
.sortLanguage li{display:inline; padding:0 10px}
.sortChannel li {display:inline; padding:0 10px; width:60%; font-size:1.4em; margin-right:10px}
.startAccount{width:231px; margin:0px auto 0px; display:block}
#contentPage .startAccount {width:115px; display:inline;}
#contentPage .startAcount p {line-height: 32px; height:32px; font-size:1.8em}

.grass{background: url('/images/grass.png') no-repeat; height:40px; width:36px; margin:5px 0 0 20px; position:absolute; top:271px}
a{color:#0000dd;text-decoration:underline}

#kidyosCalendar{position:absolute; top:110px; left: 665px; width:455px; height:47px}
#kidyosClock{background:transparent url(../images/timeBg.png) no-repeat scroll 0 0; float:right; height:47px; margin:-47px 84px 0 0; padding-left:25px; width:146px; line-height:47px;}
#kidyosDate {background:transparent url(../images/dateBg.png) no-repeat scroll 0 0; float:right; height:47px; margin:-40px 321px 0 0; padding-left:25px; width:146px; line-height:47px;}
#kidyosCalendar, #kidyosClock{font-family:"lucida Grande"; font-size:1.4em; color:#fff;  font-weight:bold; padding-left:0px;text-align:center}
#kidyosCalendar, #kidyosDate{font-family:"lucida Grande"; font-size:1.4em; color:#fff;  font-weight:bold; padding-left:0px;text-align:center}

#kidyosProfile{margin-left: 470px; margin-top:-90px;  width:400px;  height:47px;}
#kidyosProfile .boxTop{background: url('/images/mainContent_top4.png') no-repeat; height:32px; width:453px}
#kidyosProfile .boxMid{background: url('/images/mainContent_mid4.png') repeat-y; width:453px;}
#kidyosProfile .boxBottom{background: url('/images/mainContent_bottom4.png') no-repeat; height:43px; width:453px}
#kidyosProfile .familyInfo {width: 300px; margin-top:0px}
#kidyosProfile .familyInfo a{float:right; margin-top:-45px}
#kidyosProfile .familyInfo a+a{float:right; margin-top:-30px}
#kidyosProfile img {width:48px; height:48px}


#videoPlayer{width:90%; margin-top:-10px; height:300px; background:#000; color:white }

#loginPanel {background-color:white; border:4px ridge #46bbff ; padding: 5px; display:none; font-size:1.4em}
#loginPanel #info {font-size: x-small}
#loginPanel #info li {display:block; padding-right: 10px}
#signUpPage #loginPanel {width: 350px; font-size:1.2em}
#signUpPage #loginPanel #kidyosSubmit{margin-top:10px}

#contentPage #loginPanel {border:0px;}
#contentPage #loginPanel {width: 370px}
#contentPage #loginPanel #kidyosSubmit{margin-top:10px}
#contentPage #loginPanel #info li {display:inline; padding-right: 10px}

#landingPage #loginPanel {border:0px;}
#landingPage #loginPanel {width: 370px}
#landingPage #loginPanel #kidyosSubmit{margin-top:10px}
#landingPage #loginPanel #info li {display:inline; padding-right: 10px}


#error { background-color: #cc0000; color:white; font-size:1.2em; padding:5px; margin:10px}


.loadingAnim {background: url('/images/loader.gif') no-repeat; background-position:center; width:100%; height:32px; padding: 5px; }
.floatingLoadingAnim {background: url('/images/loader.gif') no-repeat; background-position:center; width:16px; height:16px; padding: 5px; float:left}
.floatingLoadingAnimRight {background: url('/images/loader.gif') no-repeat; background-position:center; width:16px; height:16px; padding: 5px; float:right}
#benefits {height:260px }
#benefits p {height:260px;  font-size: 2em; padding-top:30px; margin-left:5px; margin-right:5px; text-align:center}
#benefits strong { color: #7CCBF7}
#benefits-next { width:90%; text-align:right; font-size: 1.5em}
#benefits-next a {color: #7CCBF7}

#suggestSites {width:300px; height:300px;}
#suggestNext { background: url('/images/next.png') no-repeat;width:64px; height:64px;position:relative;top:-182px;left:268px;z-index:99;cursor:pointer}


.setList li {display:inline; width: 262px; height:auto; float:left; margin: 10px}
.setList li img {background:#ffffff; float:left; width:120px; height:90px; display:block}
.setList li #meta { display:block; float:left;  margin-left: 5px}
.setList li #meta img { width:16px; height:16px; float:none; display:inline}
.setList a {color:#000; text-decoration:none}
.tooltip {display:none; position:absolute;padding:10px;border:1px solid black;background-color:#7CCBF7; width:200px}

#verbose {font-size:1.8em}
#verbose a {text-decoration:none}
#verbose .submitBtn{background:#7CCBF7; border-style:ridge;  padding:2px 10px; margin-top:10px; margin-left:0px}
.lists li {display:inline; float:left; width:100px;}
.lists li a{font-size:1em; text-decoration:none}
.lists li img{background:#ffffff; width:62px; height:62px; display:block}

.lists2 {font-size:0.8em}
.lists2 li {display:inline;  margin-left:10px; }
.lists2 li a{font-size:0.5em; text-decoration:none}
#verbose .tip {margin-right:10px; font-size:0.75em;}
#verbose #caption {font-size:1em; font-style:italic}

.vidEmb {width:450px; margin-left:-5px; height:364px; background:#000; color:white}

#notice {float:left; margin-top:30px}
#notice p {padding:10px}
#notice .noticeTop{background: url('/images/notice_top.png') no-repeat; height:10px; width:300px}
#notice .noticeMid{background: url('/images/notice_mid.png') repeat-y; width:300px}
#notice .noticeBottom{background: url('/images/notice_bottom.png') no-repeat; height:10px; width:300px}
#notice li {display:inline; padding: 10px}
.lnk {cursor:pointer}

.highlightTop {background: url('/images/mainContent_top280.png') no-repeat; width:280px; height:32px}
.highlightMid {background: url('/images/mainContent_mid280.png') repeat-y; width:280px; display:block; padding-left:30px; padding-right: 30px; margin:0px}
.highlightBottom {background: url('/images/mainContent_bottom280.png') no-repeat; width:280px; height:40px}

.highlighter {margin-top:-190px; width:960px; float:left}
#contentPage .highlighter {margin-top:-100px}
.hlContainer {width:316px;display:inline; float:left; font-size:1em}
.hlContainer #sample {width:225px; margin-left:-5px; height:182px; background:#000; color:white }
.landing { width: 600px; }
.landing #kidyosBulletsOn li { width:600px;}
.landing #kidyosBulletsOn  strong { background-color:#281C0B;color:#46bbff }
/** #46bbff(l.blue) #7CCBF7(2.blue)
F7D631(yellow)*/

.heading { margin-right: 20px; margin-top: 10px; padding-left: 10px; padding-right: 10px; }
.heading h1 { color: #F7D631; display:inline}
.heading h2 { padding-left: 20px; color:black; display:inline;font-weight:normal}

.callout { font-size:150%;}
.callout li {  display:inline; padding-right:20px}

.footnote {margin:10px; font-size:1em}

#tinybox {position:absolute; display:none; padding:10px; background:#fff url(images/preload.gif) no-repeat 50% 50%; border:10px solid #e3e3e3; z-index:2000}
#tinymask {position:absolute; display:none; top:0; left:0; height:100%; width:100%; background:#000; z-index:1500}
#tinycontent {background:#fff}