@charset "UTF-8";

body{
	    margin:0;
	    padding:0;
	    text-align:center;
	    background: #3CF;
}
a img {border:none;}
a {
	    color: black;
	    font-weight: bold;
	    text-decoration: none;
}
a:hover {
	    text-decoration: underline;
}

#loadingMsg { display: none }
#noFlashMsg { display: display } /* what is this value for? there is compatibily problems whith this value */

embed, object { outline: none }

.page {
	/*width: 750px;*/
	margin: 0px auto;
	text-align: left;
	position: relative;
}
.page .content,
.page .header,
.page .topNav,
.page .topNavSN,
.page .topNavParents,
.page .topNavESOL {
	width: 750px;
	box-sizing: border-box;
	margin: 0 auto;
}
.comix .page,
.parentsSection .page,
.howToPlaySection .page,
.esol-section .page,
.specialNeedsSection .page,
.storyIdeas .page,
.technicalSupport .page,
.termsOfUse .page,
.tellAFriendSection .page,
.advertise .page,
.aboutUs .page,
.dailyComixDiary .page,
.feedback .page {
	width: 1060px;
}
.comix embed,
.comix object {
	display: block;
	margin: 0 auto;	
}
.page > * {
	position: relative;
	z-index: 9;
}
.topNav,
.topNavParents,
.topNavSN,
.topNavESOL {
	position: relative;
	z-index: 10;	
}

/********************/
/*                  */
/*      Header      */
/*                  */
/********************/
.header h1 {
	    margin: 0;
}
.header h1.howToPlay {
	    text-indent: -9000px;
	    background: url(/_images/titleHowToPlay.png) center no-repeat;
	    margin: 0;
	    height: 64px;
	    text-indent: -9000px;
}
.header h1.parents {
	    text-indent: -9000px;
	    background: url(/_images/titleForParents.png) center no-repeat;
	    margin: 0;
	    height: 64px;
	    text-indent: -9000px;
}

.header h1.esl {
	    text-indent: -9000px;
	    background: url(/_images/titleESL.png) center no-repeat;
	    margin: 0;
	    height: 64px;
	    text-indent: -9000px;
}
.header h1.dailyComixDiary {
	    text-indent: -9000px;
	    background: url(/_images/Daily-Comix-Diary/titleChallenge.png) center no-repeat;
	    margin: 0;
	    height: 64px;
	    text-indent: -9000px;
}


/********************/
/*                  */
/*      topNav      */
/*                  */
/********************/
.topNav ul {
	    margin: 0;
	    padding: 0 0 0 17px;
}
.topNav ul li {
	    list-style-type: none;
	    float: left;
	    margin: 0 0 0 1px;
	    padding: 0;
	    height: 33px;
	    width: 92px;
	    position: relative;
}

.topNav ul li a {
	display: block;
	padding-top: 6px;
	font: bold 10px/12px "Comic Sans MS", "Comic Sans", Verdana, Arial, Helvetica, sans-serif;
	color: black;
	text-align: center;
	text-transform: uppercase;
	text-decoration: none;
	background: url(/_images/nav/tab_off.png) center top no-repeat;
	width: 92px;
	height: 35px;
	position: absolute;
	top: 0px;
	left: 0px;
}

/* page specific styles to "turn on" the nav buttons */
body.educators .topNav ul li a.educators,
body.language .topNav ul li a.language,
body.saving .topNav ul li a.saving,
body.lessonplans .topNav ul li a.lessonplans,
body.writers .topNav ul li a.writers,
body.comix .topNav ul li a.comix,
body.autism .topNav ul li a.autism,
body.hearing .topNav ul li a.hearing,
body.headinjuries .topNav ul li a.headinjuries,
body.stuttering .topNav ul li a.stuttering,
body.strugglingwriters .topNav ul li a.strugglingwriters,
body.physicaldisabilities .topNav ul li a.physicaldisabilities,
body.learningdisabilities .topNav ul li a.learningdisabilities {
	    background: url(/_images/nav/tab.png) center top no-repeat;
}

/* special styles for the oversized button */
.topNav ul li.largerBtn,
.topNav ul li.largerBtn a {
	    width: 114px;
	    background: url(/_images/nav/tabMedium_off.gif) center top no-repeat;
}
body.agencies .topNav ul li.largerBtn,
body.agencies .topNav ul li.largerBtn a.agencies {
	    background: url(/_images/nav/tabMedium.gif) center top no-repeat;
}

.topNav ul li.mediumBtn,
.topNav ul li.mediumBtn a {
	    width: 114px;
	    background: url(/_images/nav/tabMedium_off.gif) center top no-repeat;
}
body.family.topNav ul li.mediumBtn,
body.family .topNav ul li.mediumBtn a.family {
	    background: url(/_images/nav/tabMedium.gif) center top no-repeat;
}

body .page .contribute {
	    position:absolute;
	    top: 255px;
	    right: 23px;
}

/********************/
/*                  */
/*      topNavSN    */
/*                  */
/********************/
.topNavSN ul {
	    margin: 0;
	    padding: 0 0 0 17px;
}
.topNavSN ul li {
	    list-style-type: none;
	    float: left;
	    margin: 0 0 0 1px;
	    padding: 0;
	    height: 33px;
	    width: 85px;
	    position: relative;
}

.topNavSN ul li a {
	display: block;
	padding-top: 6px;
	font: bold 10px/12px "Comic Sans MS", "Comic Sans", Verdana, Arial, Helvetica, sans-serif;
	color: black;
	text-align: center;
	text-transform: uppercase;
	text-decoration: none;
	background: url(/_images/nav/tab_off.png) center top no-repeat;
	width: 85px;
	height: 35px;
	position: absolute;
	top: 0px;
	left: 0px;
}

/* page specific styles to "turn on" the nav buttons */
body.educators .topNavSN ul li a.educators,
body.language .topNavSN ul li a.language,
body.saving .topNavSN ul li a.saving,
body.lessonplans .topNavSN ul li a.lessonplans,
body.writers .topNavSN ul li a.writers,
body.comix .topNavSN ul li a.comix,
body.specialNeedsHome .topNavSN ul li a.specialNeedsHome,
body.autism .topNavSN ul li a.autism,
body.hearing .topNavSN ul li a.hearing,
body.headinjuries .topNavSN ul li a.headinjuries,
body.stuttering .topNavSN ul li a.stuttering,
body.strugglingwriters .topNavSN ul li a.strugglingwriters,
body.physicaldisabilities .topNavSN ul li a.physicaldisabilities,
body.learningdisabilities .topNavSN ul li a.learningdisabilities {
	    background: url(/_images/nav/tab.png) center top no-repeat;
}

/* special styles for the oversized button */
.topNavSN ul li.largerBtn,
.topNavSN ul li.largerBtn a {
	    width: 92px;
	    background: url(/_images/nav/tab_off.png) center top no-repeat;
}
body.hearing .topNavSN ul li.largerBtn,
body.hearing .topNavSN ul li.largerBtn a.hearing {
	    background: url(/_images/nav/tab.png) center top no-repeat;
}
body.headinjuries .topNavSN ul li.largerBtn,
body.headinjuries .topNavSN ul li.largerBtn a.headinjuries {
	    background: url(/_images/nav/tab.png) center top no-repeat;
}

/***************************/
/*                  	   */
/*      topNavParents      */
/*                  	   */
/***************************/
.topNavParents ul {
	    margin: 0;
	    padding: 0 0 0 17px;
}
.topNavParents ul li {
	    list-style-type: none;
	    float: left;
	    margin: 0 0 0 1px;
	    padding: 0;
	    height: 33px;
	    width: 85px;
	    position: relative;
}

.topNavParents ul li a {
	display: block;
	padding-top: 6px;
	font: bold 10px/12px "Comic Sans MS", "Comic Sans", Verdana, Arial, Helvetica, sans-serif;
	color: black;
	text-align: center;
	text-transform: uppercase;
	text-decoration: none;
	background: url(/_images/nav/tab_off.png) center top no-repeat;
	width: 85px;
	height: 35px;
	position: absolute;
	top: 0px;
	left: 0px;
}

/* page specific styles to "turn on" the nav buttons */
body.parents .topNavParents ul li a.parents,
body.question .topNavParents ul li a.question,
body.writing .topNavParents ul li a.writing,
body.family .topNavParents ul li a.family,
body.reading .topNavParents ul li a.reading,
body.sons .topNavParents ul li a.sons,
body.loving .topNavParents ul li a.loving,
body.letters .topNavParents ul li a.letters {
	    background: url(/_images/nav/tab.png) center top no-repeat;
}

/* special styles for the oversized button */
.topNavParents ul li.largerBtn,
.topNavParents ul li.largerBtn a {
	    width: 92px;
	    background: url(/_images/nav/tab_off.png) center top no-repeat;
}
body.parents .topNavParents ul li.largerBtn,
body.parents .topNavParents ul li.largerBtn a.parents
body.question .topNavParents ul li.largerBtn,
body.question .topNavParents ul li.largerBtn a.question
body.writing .topNavParents ul li.largerBtn,
body.writing .topNavParents ul li.largerBtn a.writing
body.reading .topNavParents ul li.largerBtn,
body.reading .topNavParents ul li.largerBtn a.reading {
	    background: url(/_images/nav/tab.png) center top no-repeat;
}

/***************************/
/*                  	   */
/*      topNavESOL         */
/*                  	   */
/***************************/
.topNavESOL ul {
	    margin: 0;
	    padding: 0 0 0 17px;
}
.topNavESOL ul li {
	    list-style-type: none;
	    float: left;
	    margin: 0 0 0 1px;
	    padding: 0;
	    height: 33px;
	    width: 85px;
	    position: relative;
}

.topNavESOL ul li a {
	display: block;
	padding-top: 6px;
	font: bold 10px/12px "Comic Sans MS", "Comic Sans", Verdana, Arial, Helvetica, sans-serif;
	color: black;
	text-align: center;
	text-transform: uppercase;
	text-decoration: none;
	background: url(/_images/nav/tab_off.png) center top no-repeat;
	width: 85px;
	height: 35px;
	position: absolute;
	top: 0px;
	left: 0px;
}


/* page specific styles to "turn on" the nav buttons */
body.writing-prompts .topNavESOL ul li a.writing-prompts,
body.fill-ins .topNavESOL ul li a.fill-ins,
body.comix-strip-starters .topNavESOL ul li a.comix-strip-starters,
body.class-activities .topNavESOL ul li a.class-activities,
body.printables .topNavESOL ul li a.printables,
body.videos .topNavESOL ul li a.videos,
body.reviews .topNavESOL ul li a.reviews,
body.overview .topNavESOL ul li a.overview {
	    background: url(/_images/nav/tab.png) center top no-repeat;
}

/* special styles for the oversized button */
.topNavESOL ul li.largerBtn,
.topNavESOL ul li.largerBtn a {
	    width: 92px;
	    background: url(/_images/nav/tab_off.png) center top no-repeat;
}

/********************/
/*                  */
/*     Content      */
/*                  */
/********************/
.content {
	    /* width: 705px;
	    width: 915px; */
	    margin: 0 auto;
	    text-align: left;
	    background:#fc3 url(/_images/panelTop.png) no-repeat top center;
	    border-top: solid 1px #3cf;
	    border-bottom: solid 1px #fc3;
	    clear: both;
	    padding: 10px 22px 10px 22px;
			position: relative;
			z-index: 9;
}
.content h2 {
	    font: bold 14px/16px "Comic Sans MS", "Comic Sans", Verdana, Arial, Helvetica, sans-serif;
	    color: #09c;
	    margin: 1.5em 0 .5em 0;
	    text-transform: uppercase;
}
.content h3-ulc {
	    font: bold 16px/18px "Comic Sans MS", "Comic Sans", Verdana, Arial, Helvetica, sans-serif;
	    color: #09c;
	    margin: 1.5em 0 .5em 0;
}
.content h3 {
	    font: bold 14px/16px "Comic Sans MS", "Comic Sans", Verdana, Arial, Helvetica, sans-serif;
	    color: #09c;
	    margin: 1.5em 0 .5em 0;
	    text-transform: uppercase;
}
.home .content {
	    background:none;
	    border-top: none;
	    border-bottom: none;
	    clear: both;
	    padding: 0px 0px 0px 0px;
}



/********************/
/*                  */
/*    howToPlay     */
/*                  */
/********************/
.content .scrollPanel {
	font: normal 11px/16px Verdana, Arial, Helvetica, sans-serif;
	color: black;
	margin: 0px;
	overflow: auto;
	height: 350px; /*534px*/
	border: 1px inset;
	padding: 25px 6px 10px 15px;
	background-color: white;
}
.content .scrollPanelFull {
	font: normal 11px/16px Verdana, Arial, Helvetica, sans-serif;
	color: black;
	margin: 0px;
	overflow: auto;
	height: 350px; /*534px*/
	border: 1px inset;
	padding: 25px 6px 10px 15px;
	background-color: white;
}
.content .scrollPanel2 {
	font: normal 11px/16px Verdana, Arial, Helvetica, sans-serif;
	color: black;
	margin: 0px;
	border: 1px solid #666666;
	padding: 25px 6px 10px 15px;
	background-color: white;
}
.content div.tighterPanel {
	    height: 200px; /*534px*/
	    padding: 25px 56px 10px 15px;
}
.content .scrollPanel .imgFloat {
	    margin: 0px 0px 25px -15px;
	    float: left;
}
.content .scrollPanel2 .imgFloat {
	    margin: 0px 0px 25px -15px;
	    float: left;
}
.content p {
	    margin: 0 0 1em 0;
	    font: normal 11px/16px Verdana, Arial, Helvetica, sans-serif;
	    color: black;
}
body.howToPlaySection .content {
	    padding: 10px 49px 10px 44px;
}
body.writers .content .scrollPanel .redNew {
	    color: #fe2525;
	    font-size: 18px;
}

/*************************/
/*                       */
/*    parentsSection     */
/*                       */
/*************************/
body.parentsSection .content,
body.esol-section .content {
	    padding: 10px 49px 10px 44px;
}

body.parentsSection .content .scrollPanel2,
body.esol-section .content .scrollPanel2 {
	font: normal 11px/16px Verdana, Arial, Helvetica, sans-serif;
	color: black;
	margin: 0px;
	border: 1px inset;
	padding: 25px 40px 10px 15px;
	background-color: white;
}
body.parentsSection .content .scrollPanel2 .imgFloat
body.esol-section .content .scrollPanel2 .imgFloat {
	    margin: 0px 0px 25px -15px;
	    float: left;
}

body.parentsSection .rightAd,
body.howToPlaySection .rightAd,
body.esol-section .rightAd {
    position: absolute;
	z-index: 5;
	top: auto;
	right: -20px;
    margin: 120px auto 0px auto;
    text-align: right;
}

/********************/
/*                  */
/*   tellAFriend    */
/*                  */
/********************/
body.tellAFriendSection .content {
	    background: #fc3 url(/_images/tellaFriendBG.png) no-repeat center top;
	    min-height: 562px;
	    _height: 562px;
	    position: relative;
}
body.tellAFriendSection .content form {
	    position: absolute;
	    top: 257px;
	    left: 0px;
}
body.tellAFriendSection .content form p {
	    margin-bottom: 7px;
}
body.tellAFriendSection .content form label.textLabel {
	    display: block;
	    width: 173px;
	    padding-right: 6px;
	    text-align: right;
	    float: left;
	    font: bold 11px/16px Verdana, Arial, Helvetica, sans-serif;
}
body.tellAFriendSection .content form input.textField {
	    border: 1px solid black;
	    height: 16px;
	    width: 261px;
	    font-size: 11px;
	    font-family: Arial, Helvetica, sans-serif;
}
body.tellAFriendSection .content form textarea.textField {
	    border: 1px solid black;
	    width: 261px;
	    height: 49px;
	    font-size: 11px;
	    font-family: Arial, Helvetica, sans-serif;
}
body.tellAFriendSection .content form input#button {
	    background: url(/_images/sendBtn.png);
	    height: 28px;
	    width: 100px;
	    position: absolute;
	    top: 116px;
	    left: 470px;
	    border: none;
}


.contributeDisclaimer {
	    margin: 5px 90px;
	    border:1px solid black;
	    width:797px;
}

/********************/
/*                  */
/*    storyIdeas    */
/*                  */
/********************/
body.storyIdeas div.scrollPanel {
    padding: 0px 0;
    margin:0;
}
body.storyIdeas .scrollPanel div {
    padding: 6px 15px 6px 15px;
    margin:0px;
}
body.storyIdeas .scrollPanel div.blue {
    background-color: #6ff;
}
body.storyIdeas .scrollPanel div.green {
    background-color: #cf9;
}
/*body.storyIdeas h2 {
	    color: #black;
	    font-size: 12px;
	    text-transform: none;
	    font-weight: normal;
}
*/
/********************/
/*                  */
/*     feedback     */
/*                  */
/********************/
body.feedback .content {
    padding-left: 35px;
}
body.feedback .content h2 {
    font-size: 12px
}
body.tellAFriendSection .content h2 {
    font-size: 12px
}
body.feedback .content form {
    background: #fc3 url(/_images/feedbackBG.png) no-repeat right center;
    margin-top: 18px
}
body.feedback .content form p {
    margin-bottom: 7px;
}
body.feedback .content form label.textLabel {
    display: block;
    width: 82px;
    padding-right: 6px;
    float: left;
    font: bold 11px/16px Verdana, Arial, Helvetica, sans-serif;
}
body.feedback .content form input.textField {
    border: 1px solid black;
    height: 16px;
    width: 261px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
}

body.feedback .content form textarea.textField {
	border: 1px solid black;
	width: 261px;
	height: 49px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
}

body.feedback .content form input#button {
	background: url(/_images/sendBtn.png);
	height: 28px;
	width: 100px;
	border: none;
}

/********************/
/*                  */
/*     aboutUs      */
/*                  */
/********************/
body.aboutUs .tomImage {
	float: right;
	margin: 20px 46px 0 29px;
}
body.aboutUs .scrollPanel {
	overflow: auto;
	height: auto;
/*	_zoom:1*/
}

/********************/
/*                  */
/*     termsOfUse   */
/*                  */
/********************/
body.termsOfUse .tomImage {
	float: right;
	margin: 20px 46px 0 29px;
}
body.termsOfUse .scrollPanel {
	overflow: auto;
	height: auto;
/*	_zoom:1*/
}

body.termsOfUse .usageTable td.headerRow{
	border-color: #ECE9D8;
	background-color:#F0F0F0;
}

body.termsOfUse .usageTable td.contentRow{
	background-color:#FFFFFF;
}

/********************/
/*                  */
/*      Footer      */
/*   & bottomNav    */
/*                  */
/********************/
.footer {
	background: url(/_images/nav/panelBtm.png) no-repeat top center;
	margin: 0 auto;
	/*width:900px;*/
	padding-top: 1.5em;
}
.footer:emtpy {
	display: none;
}

.footer_content{
	color: white;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	text-align: center;
	margin: 0 auto;
	position: relative;
	z-index: 10;
}
/*---- CROSS BROWSER DROPDOWN MENU ----*/
.nav {
	min-width: 961px;
}
div.nav ul {
	padding: 0;
	margin:0px;
	list-style-type: none;
}

div.nav ul li {
	color: #333;
	margin: 0; 
	padding: 5px 9px; 
	border: 1px solid #333; 
	color: #333;
	font-family: "Comic Sans MS", sans-serif; 
	font-size: 12px; 
	font-weight:bold; 
	text-decoration: none; 
	text-transform:uppercase;
	text-align:left;
	float:left;
	background-color:#fff;
	line-height: 18px;
}

div.nav ul li a {
    	color: #333;
 	font-family:"Comic Sans MS", sans-serif; 
    text-decoration: none;
	text-transform:uppercase;
}
 
div.nav li:hover {
	background-color: #ffcc33; 
}
	
div.nav ul li ul { 
    display:none; 
}

.sub-menu-radio,
.rest-sub-menu-radio {
	display: none;
	position: absolute;
}

div.nav ul li:hover ul,
.sub-menu-radio:checked ~ ul  {
    display: block;
    position: absolute;
    margin-top: 6px;
    margin-left: -11px;
	width: 195px; 
	background: #555; 
	border: 1px solid #333; 
	z-index: 599;
}
 
div.nav ul li:hover ul li,
.sub-menu-radio:checked ~ ul li {
    float:none;
}

div.nav label + label {
	display: none;
}
.sub-menu-radio:checked + label {
	display: none;
}
.sub-menu-radio:checked + label + label {
	display: inline;
}

div.nav ul li ul li:hover {
    float:none;
    background-color: #ffcc33; 
}

li.more:after {
    content: "\00BB";
    float: right;
    margin-right: 7px;
}


/********************/
/*                  */
/*     IN THE NEWS  */
/*                  */
/********************/
.scrollPanel img.news {
	float:right;
	margin:0 0 15px 20px;
}
.scrollPanel img.news2 {
	float:left;
	margin:0 20px 15px 20px;
	border:1px solid #333;
}

/********************/
/*                  */
/*      Other CSS   */
/*                  */
/********************/
.tellCaptcha #recaptcha_area {
    margin-left: 127px;
}

.the_real_fields {
    display: none;
}

.error {
    color: #F00;
}

.leftAd{
    position:absolute;
    top:253px;
    left:95px;
    margin:0px auto 0px auto;
    text-align:center;
}

.rightAd{
    position:absolute; 
    top:253px; 
    right:95px; 
		z-index: 5;
    margin:0px auto 0px auto; 
    text-align:center;
}

body.home .rightAd,
body.dailyComixDiary .rightAd,
body.storyIdeas .rightAd,
body.aboutUs .rightAd,
body.termsOfUse .rightAd,
body.technicalSupport .rightAd,
body.feedback .rightAd,
body.storyIdeas .rightAd,
body.tellAFriendSection .rightAd,
body.aboutUs .rightAd,
body.specialNeedsSection .rightAd,
body.eBooks .rightAd,
body.technicalSupport .rightAd,
body.termsOfUse .rightAd,
body.tellAFriendSection .rightAd,
body.advertise .rightAd,
body.aboutUs .rightAd,
body.dailyComixDiary .rightAd,
body.feedback .rightAd {
	position: absolute;
	top: 160px;
	left: 50%;
	text-align: right;
	width: 580px;
	/*right: 0px;
	margin: 0 auto;*/
}
body.laptopLetters .rightAd {
	position: absolute;
	top: 160px;
	left: 50%;
	text-align: right;
	width: 670px;
}

.left-icons {
	position: absolute;
    margin-top: 55px;
    left: 34px;
}
body.technicalSupport .left-icons,
body.termsOfUse .left-icons,
body.tellAFriendSection .left-icons,
body.advertise .left-icons,
body.aboutUs .left-icons,
body.dailyComixDiary .left-icons,
body.feedback .left-icons {
	margin-top: 85px;
}
.left-icons img {
	display: block;	
}

body.advertise .rightAd,
body.feedback .rightAd {
	top: 80px;
}
body.advertise .content .scrollPanel {
	min-height: 420px;
}