/*START OF THE MAIN CSS*/ * {margin:0px; padding:0px;} p {font-family:Arial, Helvetica, sans-serif;} ul {font-family:Arial, Helvetica, sans-serif;} img {text-decoration:none; border:none;} body {background:#FFF8A7;} .notice {color:#FF0000; font-size:16px;} #container {width: 980px; height:660px; position: relative; margin:30px auto; border:solid 1px #E977AF; background:#FFF;} #container-storytime {width: 980px; position: relative; margin:30px auto; border:solid 1px #E977AF; background:#FFF;} #container-signup2 {width: 980px; height:700px; position: relative; margin:30px auto; border:solid 1px #E977AF; background:#FFF;} #container-user-information {width: 1180px; position: relative; margin:30px auto; border:solid 1px #E977AF; background:#FFF;} #container-users {width: 1680px; position: relative; margin:30px auto; border:solid 1px #E977AF; background:#FFF;} #container-big {width: 1780px; position: relative; margin:30px auto; border:solid 1px #E977AF; background:#FFF;} #errorlist {width:350px; color:#F00; font-family:Arial, Helvetica, sans-serif; font-size:12px; margin:10px 0px;} #container2 {width: 980px; position:relative; margin:30px auto;} #container2 p {margin:0px 50px 5px 50px; font-family:Arial, Helvetica, sans-serif; font-size:13px;} #header {padding:5px 0px 0px 0px;} #login {float: right; list-style:none; color:#CCC; position:absolute; top:10px; left:840px;} #login ul {list-style:none;} #login ul li {list-style:none; float:left; padding:0px 5px 0px 5px;} #magazine-free {float: left; position:absolute; top:0px; left:390px;} #nav {position:absolute; top:100px; left:0px; width:980px; height:25px; background:#E977AF; color:#FFF; font-family:Arial, Helvetica, sans-serif; font-size:13px;} #nav ul {list-style:none; position:absolute; top:5px; left:85px;} #nav ul li {list-style:none; float:left; padding:0px 10px 0px 10px;} #nav a {color:#FFF; text-decoration:none} #nav a:hover {color:#FFF; text-decoration:none;} #nav a:visited {color:#FFF; text-decoration:none} #body {background: #D3EDF1; width:875px; height:480px; position: relative; border:#47C3D3 solid 1px;} #body-header {position: absolute; top:12px;} #body-left {width:232px; position:absolute; top:125px; left:25px;} #body-left2 {width:253px; position:absolute; top:140px; left:285px; font-family:Arial, Helvetica, sans-serif;} #body-left2 p {color:#00AEEF; margin:5px 0px 40px 20px; font-size:13px;} #body-right {width:253px; position:absolute; top:140px; right:35px; font-family:Arial, Helvetica, sans-serif;} #body-right p {color:#00AEEF; margin:5px 0px 40px 20px; font-size:13px;} #winmoney {list-style:none; float:right; font-family:Arial, Helvetica, sans-serif; font-size:13px;} #winmoney ul {list-style:none; position:absolute; top:90px; left:60px;} #winmoney ul li {list-style:none; float:left; margin:0px 3px; } #winmoney a {text-decoration:none; color:#00AEEF;} #winmoney a:hover {text-decoration:underline; color:#00AEEF} #winmoney a:visited {text-decoration:none; color:#00AEEF;} #winmoney2 {list-style:none; float:right; font-family:Arial, Helvetica, sans-serif; font-size:13px;} #winmoney2 ul {list-style:none; position:absolute; top:210px; left:60px;} #winmoney2 ul li {list-style:none; float:left; margin:0px 3px;} #winmoney2 a {text-decoration:none; color:#00AEEF;} #winmoney2 a:hover {text-decoration:underline; color:#00AEEF} #winmoney2 a:visited {text-decoration:none; color:#00AEEF;} #winmoney3 {list-style:none; float:right; font-family:Arial, Helvetica, sans-serif; font-size:13px;} #winmoney3 ul {list-style:none; position:absolute; top:90px; left:60px;} #winmoney3 ul li {list-style:none; float:left; margin:0px 3px;} #winmoney3 a {text-decoration:none; color:#00AEEF;} #winmoney3 a:hover {text-decoration:underline; color:#00AEEF} #winmoney3 a:visited {text-decoration:none; color:#00AEEF;} #left {width:468px; border:#E977AF solid 1px; background:#FFF; position:relative; margin:0px 0px 30px 0px;} #empty-box-left {float:left; width:100px; display:block; content:" "; height:107px; visibility:hidden;} #empty-box-left2 {float:left; width:400px; display:block; content:" "; height:107px; visibility:hidden;} #left-text {float:left; margin:3px 0px 17px 0px;} #right {width:468px; height:426px; border:#E977AF solid 1px; background:#FFF; position:relative; margin:0px 0px 30px 0px;} #right-nav {position:absolute; top:380px; left:175px; list-style:none;} #empty-box-right {float:right; width:100px; display:block; content:" "; height:107px; visibility:hidden;} #right-nav ul {list-style:none;} #right-nav ul li {list-style:none; float:left; margin:0px 10px;} #body2 {background:#FFF; width:900px; position:relative; margin:0px 0px 0px 0px;} #body2-test {background:#FFF; width:930px; position:relative; margin:42px 0px 0px 20px;} #left-pics {width:160px; position:absolute; top:160px; left:30px;} #right-pics {width:160px; position:absolute; top:160px; right:-60px;} #left-pics-test {width:160px; float:left; margin:11px 10px 10px;} #right-pics-test {width:160px; float:right; margin:11px -10px 10px 0px;} #main-no-pics {width:512px; position:absolute; top:160px; left:230px; font-family:Arial, Helvetica, sans-serif; font-size:14px;color:#666} #main-no-pics a{color:#666; text-decoration:none;} #main-no-pics a:hover{text-decoration:underline;} #main-about {width:512px; position:absolute; top:160px; left:230px; font-family:Arial, Helvetica, sans-serif; font-size:14px; color:#666;} #main-about-test {width:512px; float:left; font-family:Arial, Helvetica, sans-serif; font-size:14px; color:#666; margin:11px 0px 30px 30px;} #main-about-test a{text-decoration:none; color:#999} #main-about-test a:hover {text-decoration:underline; color:#333;} #main-about2-test {margin:-24px 0px 10px 0px; float:left } #main-about2-test a{text-decoration:none; color:#666} #main-about-test3 {width:840px; float:left; font-family:Arial, Helvetica, sans-serif; font-size:14px; color:#666; margin:11px 0px 30px 30px;} #main-about-test3 a{text-decoration:none; color:#999} #main-about-test3 a:hover {text-decoration:underline; color:#333;} #main-about-test3 tr {text-align:center;} #main-about-test4 {width:930px; float:left; font-family:Arial, Helvetica, sans-serif; font-size:14px; color:#666; margin:11px 0px 30px 0px;} #main-about-test4 a{text-decoration:none; color:#47c3d3} #main-about-test4 a:hover {text-decoration:underline; color:#47c3d3;} #main-about-test4 tr {text-align:center;} #main-about-test-big {width:100%; float:left; font-family:Arial, Helvetica, sans-serif; font-size:14px; color:#666; margin:11px 0px 30px 0px;} #main-about-test-big a {text-decoration:none; color:#999} #main-about-test-big a:hover {text-decoration:underline; color:#333;} #main-about-test-big tr {text-align:center;} #main-about-test-account {width:700px; float:left; font-family:Arial, Helvetica, sans-serif; font-size:14px; color:#666; margin:11px 0px 30px 30px;} #main-about-test-account a{text-decoration:none; color:#999} #main-about-test-account a:hover {text-decoration:underline; color:#333;} #main-about-test-magazine {width:900px; font-family:Arial, Helvetica, sans-serif; font-size:14px; color:#666; margin:11px 0px 30px 30px;} #main-about-test-magazine a{text-decoration:none; color:#999} #main-about-test-magazine a:hover {text-decoration:underline; color:#333;} #main-signup-test {margin:0px 0px 10px 0px; float:left } #main-signup-test a{text-decoration:none; color:#666} #main-signup-test input{margin:5px auto;} #main-signup-test2 {margin:0px 0px 10px 0px; float:left } #main-signup-test2 a{text-decoration:none; color:#666} #main-signup-test2 input{margin:5px auto;} #main-signup-test2 p{font-family:Arial, Helvetica, sans-serif;font-size:14px; margin:10px 0px;} #main-about2 {margin:10px 0px; position:absolute; top:30px; left:0px;} #main-about2 a{text-decoration:none; color:#666} #main-no-pics-l {float:left;} #main-no-pics-l input{margin:5px auto;} /*THIS IS THE CSS FOR THE FORM STUFF OF THE WEBSITE*/ input.required {width: 200px;font-family:Arial, Helvetica, sans-serif; font-size:12px;border: solid 1px #000;} select.required {width: 200px;font-family:Arial, Helvetica, sans-serif; font-size:12px;border: solid 1px #000;} td.required {font-family:Arial, Helvetica, sans-serif; font-size:12px; } input.optional {width: 200px;font-family:Arial, Helvetica, sans-serif; font-size:12px;border: solid 1px #999;} select.optional {width: 200px;font-family:Arial, Helvetica, sans-serif; font-size:12px;border: solid 1px #666;} td.optional {font-family:Arial, Helvetica, sans-serif; font-size:12px; } input.submit {border: solid 2px #000;font-family:Arial, Helvetica, sans-serif; font-size:14px;} /*THE END OF THE FORM CSS*/ #art {width:875px; margin:30px auto; padding:0px 0px 20px 0px;} #art-pic { width:244px; position:absolute; top:160px; left:30px;} #art-main { width:545px; position:absolute; top:160px; left:230px;} #art-main p {font-family:Arial, Helvetica, sans-serif; font-size:13px; margin:14px 0px 0px 0px;} #art-dizzle {float:right; width:39px; margin:45px 6px 30px 0px;} #art-dizzle2 {float:right; width:39px; margin:87px 6px 30px 0px;} #art-dizzle3 {float:right; width:39px; margin:3px 6px 30px 0px;} #art-main2 {width:545px; float:right; margin:160px 0px 30px 0px;} #art-main2 p {font-family:Arial, Helvetica, sans-serif; font-size:13px; margin:14px 0px 0px 0px;} #empty-container {float:right; width:100px; display:block; content:" "; height:660px; visibility:hidden;} #crafts-main {width:545px;float:right; margin: 160px 0px 30px 0px;} #crafts-main p {font-family:Arial, Helvetica, sans-serif; font-size:13px; margin:14px 0px 0px 0px;} .crafts-indent {font-family:Arial, Helvetica, sans-serif; font-size:13px; margin:0px 0px 0px 20px;} #art-dizzle-page-orange{width:16px; height:40px; position:absolute; top:127px; right:0px; background:url(../images/yellow_slice.png) no-repeat} #art-dizzle-page-orange:hover {background:url(../images/orange.png) no-repeat; height:40px; width:45px;} #art-dizzle-page-orange a {display:block; width:100%; height:100%;} #art-dizzle-page-green {float:right; width:16px; height:40px; position:absolute; top:169px; right:0px; background:url(../images/green_slice.png) no-repeat} #art-dizzle-page-green:hover {background:url(../images/green.png) no-repeat; height:40px; width:45px;} #art-dizzle-page-green a{display:block; width:100%; height:100%;} #art-dizzle-page-pink {float:right; width:16px; height:40px; position:absolute; top:212px; right:0px; background:url(../images/pink_slice.png) no-repeat} #art-dizzle-page-pink:hover {background:url(../images/pink.png) no-repeat; height:40px; width:45px;} #art-dizzle-page-pink a{display:block; width:100%; height:100%;} #art-buttons {position:relative; top:20px; left:0px;} #art-buttons ul {list-style:none;} #art-buttons ul li {list-style:none; float:left;} #art-buttons-test {position:relative; margin:0px 0px 30px 0px;} #art-buttons-test ul {list-style:none;} #art-buttons-test ul li {list-style:none; float:left;} #art-buttons2 {position:absolute; top:345px; left:0px;} #art-buttons2 ul {list-style:none;} #art-buttons2 ul li {list-style:none; float:left;} #art-buttons3 {position:relative; top:20px; left:0px;} #art-buttons3 ul {list-style:none;} #art-buttons3 ul li {list-style:none; float:left;} #craft-buttons {position:relative; top:20px; left:0px;} #craft-buttons ul {list-style:none;} #craft-buttons ul li {list-style:none; float:left;} #list-l {float:left; margin:0px 0px 0px 30px;} #list-r {float:right; margin:0px 0px 0px 50px;} /*#art-main2 {width:545px; position:absolute; top:150px; left:320px;} #art-main2 p{font-family:Arial, Helvetica, sans-serif; font-size:12px; margin:15px 0px 0px 0px;}*/ #art-nav-buttons{position:absolute; top:370px; left:-5px;} #art-nav-buttons ul {list-style:none} #art-nav-buttons ul li {list-style:none; margin: 10px 0px;} #distributors {display:block; width:235px; border:solid 1px #333; position:absolute; top:125px; right:208px;} #distributors p {margin:10px; font-size:12px;} #distributors a {color:#0000FF; text-decoration:none;} #distributors a:hover {color:#0000FF; text-decoration:underline;} #distributors a:visited {color:#0000FF;} /*HERE ARE WHERE THE CLASSES START*/ .clear {clear:both;} .stories {color:#FF9933; font-size:22px;} .art {color:#A0CF67; font-size:22px;} .crafts {color:#F173AC; font-size:22px;} .more {color:#5F4B9F; font-size:22px;} .indent {margin:10px 0px 10px 50px;} .indent-p {float:left; position:relative; left:120;} .slideshow {position:relative; bottom:20px; left:20px;} .left {float:left; margin:10px;} .left p {margin:0px 30px;} a.submission {color:#47C3D3; text-decoration: none;} .submission a:hover {text-decoration:underline;} p.title-of-most-pages {font-family:Arial, Helvetica, sans-serif; font-size:20px;} .left-bold {float:left; margin:6px 5px 6px 0px;} /*BOX STUFF*/ .inside {width: 980px; position:relative; margin:30px auto;} .inside .tl { position: absolute; width: 12px; height: 12px; background: url(../images/images/tl2_03.png); top: -1px; left: -1px; } .inside .tr { width: 12px; height: 12px; background: url(../images/images/tr2_03.png); position: absolute; top: -1px; right: -1px; } .inside .bl { width: 12px; height: 12px; background: url(../images/images/bl2_03.png); position: absolute; bottom: -1px; left: -1px; } .inside .br { width: 12px; height: 12px; background: url(../images/images/br2_03.png); position: absolute; bottom: -1px; right: -1px; } /*INNER BLUE BOX ROUNDED CORNERS*/ .box2 {width: 875px; position:absolute; top:120px; left:50px; margin:30px auto;} .box2 .tl2 { position: absolute; width: 12px; height: 12px; background: url(../images/corners/images/tl.png); top: -1px; left: -1px; } .box2 .tr2 { width: 12px; height: 12px; background: url(../images/corners/images/tr.png); position: absolute; top: -1px; right: -1px; } .box2 .bl2 { width: 12px; height: 12px; background: url(../images/corners/images/bl.png); position: absolute; bottom: -1px; left: -1px; } .box2 .br2 { width: 12px; height: 12px; background: url(../images/corners/images/br.png); position: absolute; bottom: -1px; right: -1px; } /*BOTTOM BOX ROUNDED CORNERS*/ .box3 {width: 468px; position:absolute; top:0px; left:0px;} .box3 .tl3 { position: absolute; width: 12px; height: 12px; background: url(../images/images/tl2_03.png); top: -1px; left: -1px; } .box3 .tr3 { width: 12px; height: 12px; background: url(../images/images/tr2_03.png); position: absolute; top: -1px; right: -1px; } .box3 .bl3 { width: 12px; height: 12px; background: url(../images/images/bl2_03.png); position: absolute; bottom: -1px; left: -1px; } .box3 .br3 { width: 12px; height: 12px; background: url(../images/images/br2_03.png); position: absolute; bottom: -1px; right: -1px; } .box4 {width: 468px; position:absolute; top:0px; right:0px; float:right;} .box4 .tl4 { position: absolute; width: 12px; height: 12px; background: url(../images/images/tl2_03.png); top: -1px; left: -1px; } .box4 .tr4 { width: 12px; height: 12px; background: url(../images/images/tr2_03.png); position: absolute; top: -1px; right: -1px; } .box4 .bl4 { width: 12px; height: 12px; background: url(../images/images/bl2_03.png); position: absolute; bottom: -1px; left: -1px; } .box4 .br4 { width: 12px; height: 12px; background: url(../images/images/br2_03.png); position: absolute; bottom: -1px; right: -1px; } /*CLEARFIX STUFF*/ /* slightly enhanced, universal clearfix hack */ .clearfix:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; } .clearfix { display: inline-block; } /* start commented backslash hack \*/ * html .clearfix { height: 1%; } .clearfix { display: block; } /* close commented backslash hack */ /*Sprites*/ .button_container {display:block; height:170px; width:45px; position:absolute; top:128px; right:0px;} .button_container a{margin:0px 0px 3px;} a.button_storytime, a.button_art, a.button_crafts {width:45px; height:40px; background:transparent url(http://www.knowonder.com/images/real-sprites.gif) no-repeat; overflow:hidden; display:block;} a.button_storytime { background-position: 29px 0px; } a.button_art { background-position: 29px -44px; } a.button_crafts { background-position: 29px -87px; } a.button_storytime:hover { background-position: -55px 0px; } a.button_art:hover { background-position: -55px -44px; } a.button_crafts:hover { background-position: -55px -87px; } /*THIS IS FOR THE USER-INFORMATION TABLE - SO IT'S GOING TO JUST BE A WIDER BOX*/ /*BOX STUFF*/ .inside-user-information {width: 1280px; position:relative; margin:30px auto;} .inside-user-information .tl { position: absolute; width: 12px; height: 12px; background: url(../images/images/tl2_03.png); top: -1px; left: -1px; } .inside-user-information .tr { width: 12px; height: 12px; background: url(../images/images/tr2_03.png); position: absolute; top: -1px; right: -1px; } .inside-user-information .bl { width: 12px; height: 12px; background: url(../images/images/bl2_03.png); position: absolute; bottom: -1px; left: -1px; } .inside-user-information .br { width: 12px; height: 12px; background: url(../images/images/br2_03.png); position: absolute; bottom: -1px; right: -1px; } td.user-information { padding:0px 5px;} .header-user-information { position: relative; top:0px; left:100px;} /*THIS IS FOR THE USERS TABLE - SO IT'S GOING TO JUST BE A REALLY MUCH WIDER BOX*/ /*BOX STUFF*/ .inside-users {width: 1680px; position:relative; margin:30px auto;} .inside-users .tl { position: absolute; width: 12px; height: 12px; background: url(../images/images/tl2_03.png); top: -1px; left: -1px; } .inside-users .tr { width: 12px; height: 12px; background: url(../images/images/tr2_03.png); position: absolute; top: -1px; right: -1px; } .inside-users .bl { width: 12px; height: 12px; background: url(../images/images/bl2_03.png); position: absolute; bottom: -1px; left: -1px; } .inside-users .br { width: 12px; height: 12px; background: url(../images/images/br2_03.png); position: absolute; bottom: -1px; right: -1px; } td.users { padding:0px 5px;} .header-users { position: relative; top:0px; left:400px;} /*ADMIN CLASSES*/ p.admin {position:absolute; top:12px; right:70px;} tr.admin_used {color:#CCC;} tr.admin_not_used {color:#47C3D3;} /*DEEPFROG DESIGN STUFF*/ .deepfrog_info {position:absolute; left:400px; top:450px; font-size:12px;} .deepfrog_info a {color:#999; text-decoration:none;} .deepfrog_info a:hover {color:#000; text-decoration:underline;}