/* Theme Name: 3in1 Description: An exclusive, innovative, user-friendly theme for mrportman.co.uk Version: 0.5 Author: Clive Portman Author URI: http://webandpen.co.uk Tags: even better than the mutt's nuts... */ html, body {margin: 20px; padding: 0; text-align: center; height: 100%; text-rendering: optimizeLegibility;} h1, h2, h3, h4, h5, h6, p, ol, ul, li {margin: 0; padding: 0; font-size: 14px; text-align: left;} img {border: none;} p a:link, p a:visited {text-decoration: underline; } p a:hover {text-decoration: none;} html {overflow-y: scroll;} a {outline: none;} .clearing {clear: both;} .noshow {display: none;} body {background: #333; text-align: center;} body.art {background: #C7BEAD;} body.cod {background: #384144;} body.contact {background: #CDD9D9;} body.the404 {background: #fff;} body.games {background: #fff;} body.web {background: #fde336 url(images/yellow_gradient.png) 0 -20px repeat-x;} .pageBG {width: 874px; padding: 43px; margin: 0 auto 43px; position: relative;} #homePageBG {background: #000;} #codPageBG {background: #f2a555;} #contactPageBG {background: #e2013d;} #artPageBG {background: #5B5548;} #policyPageBG {background: #9a549c;} #the404PageBG {background: #000;} #gamesPageBG {background: #ff4a35;} #webPageBG {background: #384144;} /* COMMON */ header {width: 880px; height: 45px; padding: 0 45px;} header h1 {} header h1 a {display: block;} header h2 {display: none;} header nav ul li a {display: block; padding: 28px 5px 0; margin: 0 0 6px 10px; font: bold 12px Arial, Helvetica, sans-serif; text-decoration: none;} body.home {background: #000;} .home > header {} .home > header h1 {} .home > header h1 a {} .home > header nav {} .home > header nav ul {} .home > header nav ul li {} .home > header nav ul li a {display: block; padding: 28px 5px 0; margin: 0 0 6px 10px; font: bold 12px Arial, Helvetica, sans-serif; text-decoration: none;} .headerBG {position: fixed; top: 0; left: 0;} .header {position: absolute; top: 0; left: 0; width: 874px; padding: 0 43px;} .header h1 {position: absolute; top: 21px; left: 67px; text-indent: -9999px;} .header h1 a {display: block; width: 167px; height: 22px;} .header h2 {display: none;} /*#homePageBG .header h2 {display: block; width: 250px; height: 65px; position: absolute; top: 80px; left: 62px; background: url(images/h2_school-web-superhero.png) no-repeat; z-index: 99; text-indent: -9999px;}*/ .header ul {position: absolute; top: 0; right: 43px;} .header li {display: inline; float: left; } .header li a {display: block; padding: 28px 5px 0; margin: 0 0 6px 10px; font: bold 12px Arial, Helvetica, sans-serif; text-decoration: none;} .footer {clear: both; position: relative; width: 874px; padding: 0 43px;} .footer ul {position: absolute; top: 0; left: 0;} .footer li {display: inline; float: left; } .footer li a {display: block; padding: 0 5px 28px; margin: 0 10px 6px 0; font: bold 12px Arial, Helvetica, sans-serif; text-decoration: none;} #websiteSpark {display: none; position: absolute; bottom: -50px; right: 0; width: 206px; height: 34px;} #websiteSpark a {display: block; width: 206px; height: 34px; background: url(images/websitespark.png) no-repeat; _display: none; no-repeat; text-indent: -9999px; _background: none; _text-indent: 0;} /************************************ HOME HEADER ***************************************/ #homeHeader {} #homeHeader h1 { } #homeHeader h1 a {background: url(images/home_logo.gif) no-repeat;} #homeHeader li a {background: #000000; color: #fdf2a8;} #homeHeader li a:hover {background: #384144; color: #f2a555;} #homeHeader li.active a {background: #384144; color: #f2a555;} /************************************* HOME CONTENT ****************************************/ #morselSWG {width: 291px; float: left; height: 660px; position: relative; background: #fde336 url(images/yellow_gradient.png) repeat-x;} #morselSWG h1 {margin: 250px 0 0 22px;} #morselSWG h1 a {display: block; width: 246px; height: 44px; background: url(images/h1_websites.png) no-repeat; text-indent: -9999px;} #morselSWG h2 {margin: 5px 0 0 22px;} #morselSWG h2 a {display: block; width: 244px; height: 17px; background: url(images/h2_primary-school-site-critiques.png) no-repeat; text-indent: -9999px;} #morselSWG h3 {margin: 30px 0 0 30px; width: 220px; font: bold 16px Helvetica, Arial, sans-serif; color: #384144; line-height: 20px;} #morselSWG h3 a:link, #morselSWG h3 a:visited { font: bold 16px Helvetica, Arial, sans-serif; color: #384144; text-decoration: none;} #morselSWG h3 a:hover, #morselSWG h3 a:active { text-decoration: underline;} #morselArt {width: 292px; float: left; height: 660px; background: #C7BEAD;} #morselArt h1 {margin: 250px 0 0 13px; } #morselArt h1 a {display: block; width: 265px; height: 60px; background: url(images/h1_articles.gif) no-repeat; text-indent: -9999px;} #morselArt h4 {margin: 30px 20px 5px; font: normal 24px Georgia, "Times New Roman", Times, serif; color: #5d5c5c;} #blooms {display: none; margin: 50px 0 5px;} #morselArt h2 {margin: 0 20px 0; padding-top: 5px; border-top: 2px solid #C22208; font: normal 24px Georgia, "Times New Roman", Times, serif; color: #333;} #morselArt h2 a { color: #333; text-decoration: none;} #morselArt a:hover { text-decoration: underline;} #morselCod {width: 291px; float: left; height: 660px; background: #384144;} #morselCod h1 {margin: 157px 0 0 35px; } #morselCod h1 a {display: block; width: 221px; height: 200px; background: url(images/h1_cod.gif) no-repeat; text-indent: -9999px;} #morselCod h2 {margin: 40px 30px 0; font: normal 14px "Courier New", Courier, monospace; color: #f2a555;} #morselCod h2 a { color: #f2a555; text-decoration: none;} #morselCod a:hover { text-decoration: underline;} /************************************ HOME FOOTER ***************************************/ #homeFooter li a {background: #000; color: #FDE336;} #homeFooter li a:hover {background: #FDE336; color: #000;} #homeFooter li.active a {background: #FDE336; color: #000;} /********************************** WEBSITES HEADER ************************************/ #webHeader {} #webHeader h1 {} #webHeader h1 a {background: url(images/web_logo.gif) no-repeat;} #webHeader li a {background: #384144; color: #FEEA67;} #webHeader li a:hover {background: #FEEA67; color: #384144;} #webHeader li.active a {background: #FEEA67; color: #384144;} /********************************** WEBSITES CONTENT ************************************/ #webContent {position: relative; min-height: 500px; padding: 109px 45px 0; background: #fde336 url(images/yellow_gradient_light.png) repeat-x;} #webContent > section > header {display: block; height: auto; margin: 0 0 50px;} #webContent nav {position: absolute; top: 110px; right: 110px;} #webContent nav h2 {margin: 0 0 15px; padding: 0; width: 156px; height: 27px; background: url(images/h2_contents.png) no-repeat; text-indent: -9999px;} #webContent nav ul {list-style-type: none;} #webContent h1 {display: none;} #webContent h1.critique {display: block; font: 24px "Lucida Console", "Courier New", Courier, monospace; color: #384144;} #webContent h2 {margin: 0 0 32px; display: block; font: 24px "Lucida Console", "Courier New", Courier, monospace; color: #384144;} #webContent h2 a {color: #384144; padding: 5px;} #webContent h2 a:hover, #webContent h2 a:active, #webContent h2 a:focus {background: #384144; color: #FDE43F;} #webContent h6 {position: absolute; top: 30px; left: 20px; font: 16px "Lucida Console", "Courier New", Courier, monospace; color: #384144;} #webContent h6 a {padding: 5px; text-decoration: underline; color: #384144} #webContent h6 a:hover, #webContent h6 a:active, #webContent h6 a:focus {background: #384144; color: #FDE43F;} #webContent a.post-edit-link {display: block; position: absolute; top: 30px; right: 20px; padding: 5px; font: 16px "Lucida Console", "Courier New", Courier, monospace; color: #384144;} #webContent a.post-edit-link:hover, #webContent a.post-edit-link:active, #webContent a.post-edit-link:focus {background: #384144; color: #FDE43F;} h2#hespeaks {width: 332px; height: 93px; margin: 0 0 100px; display: block; background: url(images/h2_hespeaks.png) no-repeat; text-indent: -9999px; } #explanation h2 {width: 280px; height: 34px; background: url(images/h2_anexplanation.png) no-repeat; text-indent: -9999px; } #criteria h2 {width: 214px; height: 27px; background: url(images/h2_thecriteria.png) no-repeat; text-indent: -9999px; } #scores h2 {width: 304px; height: 32px; background: url(images/h2_theleaguetable.png) no-repeat; text-indent: -9999px; } #webContent article h3 {display: none;} #webContent h3 {margin: 0 0 5px; font: 20px "Lucida Console", "Courier New", Courier, monospace; color: #384144;} #webContent h4 {padding: 0 35px 5px; font: 18px "Lucida Console", "Courier New", Courier, monospace; color: #384144;} #webContent h4#notes {margin: 0px 0 5px;} #webContent div#ss {position: absolute; top: 182px; left: 640px; width: 121px; text-align: center; background: url(images/cachedscreenshot.gif) no-repeat;} #ss a {display: block; padding: 100px 20px 0; font: 14px "Lucida Console", "Courier New", Courier, monospace; } #ss a:link, #ss a:visited { color: #384144; text-decoration: underline;} #ss a:hover, #ss a:active, #ss a:focus { color: #384144; text-decoration: none;} #webContent p {padding: 0 35px 25px; width: 550px; font: 18px "Lucida Console", "Courier New", Courier, monospace; color: #384144; line-height: 22px;} #webContent p a {padding: 2px; color: #384144;} #webContent p a:hover, #webContent p a:active, #webContent p a:focus {background: #384144; color: #FDE43F;} #webContent p.small {padding: 0 35px 10px; font-size: 14px; line-height: 16px;} #webContent p.last {padding: 0 35px 70px;} #webContent table {margin: 0 70px 30px;} #webContent table.critique {margin: 0 70px 70px;} #webContent td, #webContent th { font: 16px "Lucida Console", "Courier New", Courier, monospace; color: #384144; line-height: 34px; text-align: left; border-bottom: 1px solid #384144; padding: 0; margin: 0;} #webContent table.critique td, #webContent table.critique th {font-size: 14px; line-height: 26px;} #webContent table.criteria th {display: none;} #webContent td a {padding: 2px; color: #384144; text-decoration: underline;} #webContent td a:hover, #webContent td a:active, #webContent td a:focus {background: #384144; color: #FDE43F;} #webContent td.left {width: 300px;} #webContent th.actual, #webContent td.actual {font-weight: bold;} #webContent th.left {width: 230px;} #webContent th.midleft {width: 110px;} #webContent th.midright {width: 90px;} #webContent th.right {width: 250px;} #webContent th.last, #webContent td.last {border: none;} article#scores {clear: both; display: blocl;} #scores ol {list-style-type: none; margin: 0 70px 50px;} #scores ol li {margin: 0; padding: 0 15px; width: auto; display: inline-block; font: 18px "Lucida Console", "Courier New", Courier, monospace; color: #384144; line-height: 30px; border-bottom: 1px solid #9bb1b9; } #scores ol li a {color: #384144; text-decoration: none;} #scores ol li a:hover, #scores ol li a:active { text-decoration: underline;} #scores ol li.c10 {background: #95ff74; border-bottom: 1px solid #74fa4b; } #scores ol li.c9 {background: #b9ff74; border-bottom: 1px solid #9cfb3f; } #scores ol li.c8 {background: #d0ff74; border-bottom: 1px solid #bafb3c; } #scores ol li.c7 {background: #eaff74; border-bottom: 1px solid #dbf935; } #scores ol li.c6 {background: #faff74; border-bottom: 1px solid #f4fb31; } #scores ol li.c5 {background: #ffe674; border-bottom: 1px solid #fcd72c; } #scores ol li.c4 {background: #ffbf74; border-bottom: 1px solid #fca034; } #scores ol li.c3 {background: #ffa874; border-bottom: 1px solid #fc8d4a; } #scores ol li.c2 {background: #ff8b74; border-bottom: 1px solid #fb5c3c; } #scores ol li.c1 {background: #ff7b74; border-bottom: 1px solid #ff7b49; } p#mysite {margin: 0 35px 15px;} h3#critiquescore {margin: 0 0 10px; padding: 0; font-size: 14px; text-transform: uppercase;} p#critiquedate {margin: 0 0 10px; padding: 0; font-size: 14px;} p#critiqueurl {margin: 0 0 10px; padding: 0; font-size: 14px;} p#critiquedesigner {margin: 0 0 10px; padding: 0; font-size: 14px;} p#critiquenote {margin: 0 0 10px; padding: 0; font-size: 14px;} p#critiquepros {margin: 0 0 10px; padding: 0; font-size: 14px;} p#critiquecons {margin: 0 0 70px; padding: 0; font-size: 14px;} .web #respond {display: block; padding: 90px 0;} .web #respond h4 {} .web #respond ul { list-style-type: none;} .web #respond ul li {} .web #respond ul li:first-child {margin: 50px 0 0;} .web section#respond label {margin: 20px 70px 0; display: block; font: 18px "Lucida Console", "Courier New", Courier, monospace; color: #384144;} .web section#respond input {margin: 0 70px; width: 450px; padding: 5px; height: auto; border: 1px solid #5d5c5c; background: none; font: 16px "Lucida Console", "Courier New", Courier, monospace; color: #384144;} .web section#respond textarea {margin: 0 70px; width: 450px; padding: 5px; height: 100px; border: 1px solid #5d5c5c; background: none; font: font: 16px "Lucida Console", "Courier New", Courier, monospace; color: #384144;} .web section#respond li#submitbutton input {width: auto; height: 47px; margin: 20px 0 0; padding: 6px 6px 12px; position: relative; left: 445px; top: 0; background: url(images/button_criteeks.gif) repeat-x; border: none; color: #FDE336; font: 18px Helvetica, Arial, sans-serif; text-transform: uppercase; cursor: pointer; border-bottom: 5px solid #FDE336;} .web section#respond li#submitbutton input:hover, .web section#respond li#submitbutton input:active, .web section#respond li#submitbutton input:focus {border-bottom: 5px solid #384144;} .web section#respond ol#comments {margin: 0 70px; padding: 0; list-style-type: none;} .web #respond ol#comments li.comment { font: font: 16px "Lucida Console", "Courier New", Courier, monospace; color: #384144;} .web #respond p.comment_date, .web #respond p.comment_moderation {font-size: 14px;} .web #respond p.comment_date cite.fn {font-style: normal;} .web #respond a.comment-edit-link {display: block; margin: 0 35px; text-transform: lowercase; color: #384144; text-decoration: underline;} .web #respond a.comment-edit-link p.comment_edit {display: inline; padding: 5px 2px; margin: 0; font-size: 14px; } .web #respond a.comment-edit-link p.comment_edit:hover, .web #respond a.comment-edit-link p.comment_edit:active, .web #respond a.comment-edit-link p.comment_edit:focus { background: #384144; color: #FDE43F} /********************************** WEBSITES FOOTER ************************************/ #webFooter li a {background: #384144; color: #FDE336;} #webFooter li a:hover {background: #FDE336; color: #384144;} #webFooter li.active a {background: #FDE336; color: #384144;} /************************************ COD HEADER ***************************************/ #codHeader {} #codHeader h1 {} #codHeader h1 a {background: url(images/cod_logo.gif) no-repeat;} #codHeader li a {background: #F2A555; color: #384144;} #codHeader li a:hover {background: #384144; color: #F2A555;} #codHeader li.active a {background: #384144; color: #F2A555;} /************************************* COD CONTENT ****************************************/ #codContent {position: relative; min-height: 500px; padding: 70px 0 0; background: #384144;} #contentFrame {position: relative; width: 500px; height: auto; margin: 0 0 0 40px; padding: 0; overflow: hidden; border-right: 1px solid #F2A555;} #allContent {display: block; width: 2150px; position: relative; top: 0; right: 0; overflow: hidden;} .content {width: 500px; float: left;} ul.squares {list-style-type: none; position: absolute; top: 120px; right: 40px; _right: 160px;} ul.squares li {text-indent: -9999px; margin: 0 0 20px 20px;} ul.squares li a {display: block; width: 120px; height: 90px;} li.bytags {} li.bytags a {background: url(images/bytags.gif) 0 0 no-repeat;} li.bytags a:hover {background-position: 0 -90px;} li.bydate {} li.bydate a {background: url(images/bydate.gif) 0 0 no-repeat;} li.bydate a:hover {background-position: 0 -90px;} li.search {} li.search a {background: url(images/search.gif) 0 0 no-repeat;} li.search a:hover {background-position: 0 -90px;} li.hide {} li.hide a {background: url(images/showposts.gif) 0 0 no-repeat;} li.hide a:hover {background-position: 0 -90px;} /************* POSTS ********************/ #postContent {height: auto; padding: 50px 0 0; margin: 0;} .post {text-align: center; padding: 0 40px 0 0; margin: 0;} .tagspost {margin-bottom: 30px;} .post h2, .post h2 a {font: 100 24px "Trebuchet MS", Arial, Helvetica, sans-serif; text-align: left; color: #727A7D; text-decoration: none; margin: 0 0 15px;} .post h2 a:hover { text-decoration: underline;} .tagspost h2 {margin-bottom: 5px;} .post h3, .post h3 a, .post p.readcomments a {font: 100 12px "Trebuchet MS", Arial, Helvetica, sans-serif; text-align: left; color: #727A7D; text-decoration: none;} .post h3 a:hover, p.readcomments a:hover {text-decoration: underline;} .tagspost h3 {margin-left: 20px;} .post p {text-align: left; margin: 15px 0; font: 100 16px "Trebuchet MS", Arial, Helvetica, sans-serif;} .post p, .post p a {font-size: 16px; color: #727A7D;} .post blockquote p {font: 14px "Courier New", Courier, monospace; color: #727A7D;} .post img {margin: 0 auto; border: 2px solid #C76E53;} .post p.readcomments {margin: 30px 0 75px; color: #727a7d; font-style: italic;} .post p.readcomments a { font: normal 16px "Trebuchet MS", Arial, Helvetica, sans-serif; font-style: italic; color: #727a7d; text-decoration: underline;} .post p.readcomments a:hover {text-decoration: none;} .post ul.numbered {padding: 30px 0 0 30px; list-style-type: decimal;} .post ul.numbered li {font: 100 16px "Trebuchet MS", Arial, Helvetica, sans-serif; color: #727A7D;} /************* TAGS ********************/ #tagsContent {height: auto; padding: 50px 0 0 50px; font: 100 14px "Trebuchet MS", Arial, Helvetica, sans-serif;} #tagsContent h3 {margin: 0 0 10px;} #tagsContent h3, #tagsContent h3 a {font-weight: 100; text-align: left; color: #727a7d; text-decoration: none;} #tagsContent h3 a {display: block;} #tagsContent h3 a:hover {text-decoration: underline;} /************* DATES ********************/ #dateContent {height: auto; padding: 50px 0 0 50px; font: 100 14px "Trebuchet MS", Arial, Helvetica, sans-serif; text-align: left;} #dateContent h2 a {font-weight: 400; font-size: 20px; color: #727a7d; text-decoration: none; margin-bottom: 10px;} #dateContent ul {position: relative; margin: 0 0 20px; font-size: 16px; line-height: 24px; list-style-type: none; padding: 0 40px 0 30px;} #dateContent ul li {text-indent: -20px; padding-left: 20px;} #dateContent li a {font-weight: 100; font-size: 16px; text-align: center; color: #727a7d; text-decoration: none;} #dateContent li a:hover {text-decoration: underline;} /************* SEARCH ********************/ #searchContent {height: 300px; padding: 50px 0 0 50px; font: 100 14px "Trebuchet MS", Arial, Helvetica, sans-serif; text-align: left;} #searchContent label {display: none;} #searchContent input {font: 400 24px "Trebuchet MS", Arial, Helvetica, sans-serif;} input#s {display: block; width: 448px; margin: 0; padding: 5px; border: 1px solid #727a7d; background: none; color: #727a7d} input#searchsubmit {display: block; float: right; margin-right: 40px; border: none; background: #727a7d; color: #384144;} /************* SEARCH RESULTS ********************/ #searchResults {font: 100 14px "Trebuchet MS", Arial, Helvetica, sans-serif; text-align: left;} #searchResults h2 {font-weight: 400; font-size: 30px; color: #727A7D; text-decoration: none; margin-bottom: 10px;} #searchResults ul li {text-indent: -20px; padding-left: 20px;} #searchResults ul {position: relative; margin: 0 0 20px; font-size: 20px; line-height: 24px; list-style-type: none; padding: 0 0 0 30px;} #searchResults li a, #searchResults p a {font-weight: 100; font-size: 20px; text-align: center; color: #727A7D; text-decoration: none;} #searchResults li a:hover {text-decoration: underline;} #searchResults p {color: #727A7D;} #searchResults p a {text-decoration: underline; color: #727A7D;} #searchResults p a:hover {text-decoration: none;} /************* TAGS RESULTS ********************/ #tagsResult {font: 100 14px "Trebuchet MS", Arial, Helvetica, sans-serif; text-align: left;} #tagsResult h2 {font-weight: 400; font-size: 24px; color: #727A7D; text-decoration: none; margin-bottom: 10px;} #tagsResult ul {position: relative; margin: 0 0 20px; font-size: 18px; line-height: 24px; list-style-type: none; padding: 0 0 0 30px;} #tagsResult li {text-indent: -20px; color: #727A7D; margin: 0 0 10px; padding: 0 40px 0 20px;} #tagsResult li a {font-weight: 100; font-size: 20px; text-align: center; color: #727A7D; text-decoration: none;} #tagsResult li a:hover {text-decoration: underline;} /************* DATES RESULTS ********************/ #dateResult {font: 100 14px "Trebuchet MS", Arial, Helvetica, sans-serif; text-align: left;} #dateResult h2 {font-weight: 400; font-size: 24px; color: #727A7D; text-decoration: none; margin-bottom: 10px;} #dateResult ul {position: relative; margin: 0 0 20px; font-size: 18px; line-height: 24px; list-style-type: none; padding: 0 0 0 30px;} #dateResult li {margin-bottom: 15px; color: #727A7D;} #dateResult li a {font-weight: 100; font-size: 20px; text-align: center; color: #727A7D; text-decoration: none;} #dateResult li a:hover {text-decoration: underline;} .feedback h2 {font-weight: 400; font-size: 30px; color: #F5C973; text-decoration: none; margin-bottom: 10px;} #searchResults .feedback h2 {color: #C76E53; padding: 0 40px 0 0;} .feedback p { padding: 0 40px 0 0; font: 100 20px "Trebuchet MS", Arial, Helvetica, sans-serif; color: #C76E53;} /************* COMMENTS ********************/ #codContent ol#comments {margin: 90px 0 0;} #codContent ol#comments li.comment, #codContent ol#comments li.comment p {font: 100 12px "Trebuchet MS", Arial, Helvetica, sans-serif; color: #727A7D;} #codContent ol#comments li.comment {padding: 10px 30px 0; border-top: 1px solid #727A7D;} #codContent ol#comments li.comment a, #codContent ol#comments li.comment p a {font: 100 12px "Trebuchet MS", Arial, Helvetica, sans-serif; color: #727A7D;} #codContent ol#comments li.comment p.comment_date, #codContent ol#comments li.comment p.comment_date cite a {font-weight: bold;} /************* COMMENT FORM ********************/ #codRespond {} #codRespond ul {margin: 40px 0 40px; list-style-type: none;} #codRespond li, #codRespond a {font: 100 16px "Trebuchet MS", Arial, Helvetica, sans-serif; font-style: italic; color: #727a7d; text-decoration: none;} #codRespond label {display: block; margin: 20px 0 2px; font: 100 12px "Trebuchet MS", Arial, Helvetica, sans-serif; font-style: italic; color: #727A7D;} #codRespond input {width: 448px; padding: 5px; border: 1px solid #727a7d; background: none; font: 100 12px "Trebuchet MS", Arial, Helvetica, sans-serif; color: #384144;} li#submitbutton input {width: auto; position: relative; left: 380px; border: none; background: #727a7d; cursor: pointer; color: #384144;} li#submitbutton input:hover {background: #F2A555;} #codRespond textarea {width: 448px; height: 200px; padding: 5px; border: 1px solid #727a7d; background: none; font: 100 12px "Trebuchet MS", Arial, Helvetica, sans-serif; color: #727a7d;} /************************************ COD FOOTER ***************************************/ #codFooter li a {background: #F2A555; color: #384144;} #codFooter li a:hover {background: #384144; color: #F2A555;} #codFooter li.active a {background: #384144; color: #F2A555;} /************************************ SAY HELLO HEADER ***************************************/ #contactHeader {} #contactHeader h1 {} #contactHeader h1 a {background: url(images/sayhello_logo.gif) no-repeat;} #contactHeader li a {background: #e2013d; color: #cdd9d9;} #contactHeader li a:hover {background: #cdd9d9; color: #e2013d;} #contactHeader li.active a {background: #cdd9d9; color: #e2013d;} /************************************* SAY HELLO CONTENT ****************************************/ #contactContent {padding: 98px 40px 75px; background: #cdd9d9;} #contactContent h1 {width: 424px; height: 55px; background: url(images/h1_contact.gif) no-repeat; text-indent: -9999px;} #contactBlurb {float: left; width: 444px; margin-right: 60px;} #contactBlurb h2 {width: 234px; height: 29px; margin: 68px 0 30px; background: url(images/h2_contactblurb.gif) no-repeat; text-indent: -9999px;} #contactBlurb p {clear: both; margin: 0 0 25px; font: 16px Helvetica, Arial, sans-serif; color: #393939;} #contactBlurb p a {color: #393939; text-decoration: underline;} #contactBlurb p a.email {font-weight: bold; text-decoration: none;} #contactBlurb ul {list-style-type: none;} #contactBlurb li {float: left;} #contactBlurb li a {display: block; height: 38px; width: 38px; padding: 0; margin: 7px 30px 25px 0; text-indent: -9999px;} #contactBlurb li a:hover {text-decoration: underline;} #contactBlurb a#twitter {background: url(images/contact_twittericon.gif) no-repeat;} #contactBlurb a#linkedin {background: url(images/contact_linkedinicon.gif) no-repeat;} #contactBlurb a#rss {background: url(images/contact_rssicon.gif) no-repeat;} #contactForm {float: left; width: 290px;} #contactForm h2 {width: 187px; height: 23px; margin: 69px 0 30px; background: url(images/h2_contactform.gif) no-repeat; text-indent: -9999px;} #contactForm ol {list-style-type: none;} div.failure, div.success {margin: 0 0 30px;} div.failure, div.success p {display: block !important; font: 16px Helvetica, Arial, sans-serif; color: #e2013d; text-align: left;} #contactForm label { font: 16px Helvetica, Arial, sans-serif; color: #393939; text-transform: uppercase;} #contactForm input {width: 274px; height: 23px; margin: 0 0 25px; padding: 6px; border: 1px solid #c7c7c7; background: #e8eae9; font: 16px Helvetica, Arial, sans-serif; color: #e2013d;} #contactForm textarea {width: 273px; height: 158px; margin: 0; padding: 6px; border: 1px solid #c7c7c7; background: #e8eae9; font: 16px Helvetica, Arial, sans-serif; color: #e2013d;} fieldset.cf_hidden {display: none;} #contactForm p {display: inline;} #contactForm input.sendbutton {width: auto !important; height: auto; position: relative; top: -2px; left: 76px; padding: 6px; background: #e2013d !important; border: none; color: #e8eae9; font: 18px Helvetica, Arial, sans-serif; text-transform: uppercase; cursor: pointer;} #ll2 a {display: none;} /************************************ COD FOOTER ***************************************/ #contactFooter li a {background: #E2013D; color: #CDD9D9;} #contactFooter li a:hover {background: #CDD9D9; color: #E2013D;} #contactFooter li.active a {background: #CDD9D9; color: #E2013D;} /************************************ ARTICLES HEADER ***************************************/ #artHeader {} #artHeader h1 {} #artHeader h1 a {background: url(images/articles_logo.gif) no-repeat;} #artHeader li a {background: #5B5548; color: #C7BEAD;} #artHeader li a:hover {background: #C7BEAD; color: #5B5548;} #artHeader li.active a {background: #C7BEAD; color: #5B5548;} /************************************* ARTICLES CONTENT ****************************************/ #artHome {padding: 90px 0 90px; background: #C7BEAD;} #artHome h1 {margin: 0 0 90px; width: 100%; height: 60px; background: #C22208 url(images/h1_articles.gif) 50% no-repeat; text-indent: -9999px;} #artHome ul {clear: both; list-style-type: none;} #artHome ul li {} #artHome ul li h4 {float: left; width: 260px; margin: 0 0 10px; font: 24px Georgia, "Times New Roman", Times, serif; text-align: right;} #artHome ul li h4 a {position: relative; left: 3px; color: #C22208; text-decoration: none; padding-right: 9px; border-right: 3px solid transparent;} #artHome ul li h4 a:hover {border-right: 3px solid #C22208;} #artHome ul li h2 {float: left; width: 560px; margin: 0 0 10px; font: 24px Georgia, "Times New Roman", Times, serif; text-align: left;} #artHome ul li h2 a {color: #333; text-decoration: none; padding-left: 9px; border-left: 3px solid #C7BEAD;} #artHome ul li h2 a:hover {text-decoration: none; border-left: 3px solid #C22208;} #artContent {padding: 90px 0 90px; background: #C7BEAD;} #artContent h1 {margin: 0 0 90px; padding: 13px 0; width: 100%; height: 41px; background: #C22208; font: bold 30px Verdana, Geneva, sans-serif; color: #C7BEAD; text-align: center;} #artContent p {margin:0 90px 30px; font: 20px Georgia, "Times New Roman", Times, serif; color: #333;} #artContent p a {color: #333; text-decoration: underline;} #artContent p.q {margin:0 90px 10px;} #artContent p.a {margin:0 90px 10px;} #artContent p.c {margin:0 90px 60px; font: 20px Georgia, "Times New Roman", Times, serif; color: #C22208; font-style: italic;} #artContent p.c a {color: #C22208;} #artContent ol {margin: 0 90px; padding: 0 90px 30px;} #artContent ol li {margin: 0 0 10px; font: 20px Georgia, "Times New Roman", Times, serif; color: #333;} #artContent ul {margin: 0 90px; padding: 0 0 30px 15px; list-style-type: circle;} #artContent ul.sub {margin: 0; padding: 0 0 0 50px;} #artContent ul li {margin: 0 0 5px; font: 20px Georgia, "Times New Roman", Times, serif; color: #333;} #artContent h2 {margin: 30px 90px 10px; font: 24px Georgia, "Times New Roman", Times, serif; color: #5d5c5c;} #artContent h3 {margin: 0 90px 5px; font: bold 20px Georgia, "Times New Roman", Times, serif; color: #333;} #artContent h6 {margin:30px 90px 30px; font: 20px Georgia, "Times New Roman", Times, serif; color: #C22208;} #artContent h6 a {color:#c22208;} #artContent .last {border-bottom: 1px solid #333; padding-bottom: 30px !important; margin-bottom: 60px !important;} #artContent img {margin: 0 0 20px;} #artContent table {margin: 0 0 30px 120px; padding: 0;} #artContent th {padding: 0 30px 0 0; font: bold 20px Georgia, "Times New Roman", Times, serif; color: #333; text-align: left; border: none;} #artContent td {padding: 0 30px 0 0; font: 20px Georgia, "Times New Roman", Times, serif; color: #333; text-align: left; border: none;} #followMe {float: left;} #followMe p {margin: 60px 90px 0; width: 200px; padding: 10px; background: #C22208; color: #C7BEAD;} #followMe p a { color: #C7BEAD; text-decoration: underline;} #followMe p a:hover {text-decoration: none;} #artRespond ol#comments {margin: 0 0 90px 20px; padding: 0;} #artRespond ol#comments li.comment, #artRespond ol#comments li.comment p {margin: 0 0 10px; padding: 0; font: 100 16px Georgia, "Times New Roman", Times, serif; color: #5d5c5c;} #artRespond ol#comments li.comment {padding: 10px 0 0;} #artRespond ol#comments li.comment a, #codContent ol#comments li.comment p a {font: 100 16px Georgia, "Times New Roman", Times, serif; color: #5d5c5c;} #artRespond ol#comments li.comment p.comment_date, #codContent ol#comments li.comment p.comment_date cite a {font-weight: bold;} #artRespond {float: left; width: 380px; margin: 60px 0 0;} #artRespond ul {margin: 0; padding: 0; list-style-type: none;} #artRespond li, #artRespond a {font: 100 20px Georgia, "Times New Roman", Times, serif; font-style: italic; color: #5d5c5c; text-decoration: none;} #artRespond label {display: block; margin: 0 0 2px; font: 100 20px Georgia, "Times New Roman", Times, serif; font-style: italic; color: #5d5c5c;} #artRespond input {width: 368px; padding: 5px; margin: 0 0 20px; border: 1px solid #5d5c5c; background: none; font: 100 16px Georgia, "Times New Roman", Times, serif; color: #384144;} #artRespond li#submitbutton input {width: auto; position: relative; left: 300px; top: -21px; margin: 0; background: #5B5548; cursor: pointer; border: none; color: #C7BEAD;} #artRespond li#submitbutton input:hover {background: #C22208;} #artRespond textarea {width: 368px; height: 200px; padding: 5px; margin: 0 0 20px; border: 1px solid #5d5c5c; background: none; font: 100 16px Georgia, "Times New Roman", Times, serif; color: #5d5c5c;} /************************************ ART FOOTER ***************************************/ #artFooter li a {background: #5B5548; color: #C7BEAD;} #artFooter li a:hover {background: #C7BEAD; color: #5B5548;} #artFooter li.active a {background: #C7BEAD; color: #5B5548;} /************************************ POLICY HEADER ***************************************/ #policyHeader {} #policyHeader h1 {} #policyHeader h1 a {background: url(images/policy_logo.gif) no-repeat;} #policyHeader li a {background: #9A549C; color: #f0f0f0;} #policyHeader li a:hover {background: #f0f0f0; color: #9A549C;} #policyHeader li.active a {background: #f0f0f0; color: #9A549C;} /************************************* POLICY CONTENT ****************************************/ #policyContent {padding: 90px; background: #f0f0f0;} #policyContent h2 {text-indent: -9999px; margin: 0 0 30px; cursor: pointer;} div.esafety { margin: 0 0 90px;} div.esafety h2 {width: 471px; height: 55px; background: url(images/h2_esafetypolicy.gif) no-repeat;} div.esafety h3 {cursor: pointer;} div.esafety h3:hover {text-decoration: underline;} div.privacy { margin: 0 0 90px;} div.privacy h2 {width: 442px; height: 55px; background: url(images/h2_privacypolicy.gif) no-repeat;} div.env { margin: 0 0 90px;} div.env h2 {width: 646px; height: 55px; background: url(images/h2_envpolicy.gif) no-repeat;} div.terms {} div.terms h2 {width: 409px; height: 44px; background: url(images/h2_termsofuse.gif) no-repeat;} #policyContent h3 {margin: 0 60px 0px; font: bold 24px Georgia, "Times New Roman", Times, serif; color: #6F6F6F;} #policyContent h4 {margin: 0 60px 5px; font: bold 20px Georgia, "Times New Roman", Times, serif; color: #6F6F6F;} #policyContent p {margin: 0 60px 30px; font: normal 16px Arial, Helvetica, sans-serif; color: #6F6F6F;} #policyContent a {text-decoration: underline; color: #6F6F6F;} #policyContent a:hover {text-decoration: none;} /************************************ COD FOOTER ***************************************/ #policyFooter li a {background: #9A549C; color: #F0F0F0;} #policyFooter li a:hover {background: #F0F0F0; color: #9A549C;} #policyFooter li.active a {background: #F0F0F0; color: #9A549C;} /************************************ 404 HEADER ***************************************/ #the404Header {} #the404Header h1 { } #the404Header h1 a {background: url(images/404_logo.gif) no-repeat;} #the404Header li a {background: #000; color: #fff;} #the404Header li a:hover {background: #fff; color: #000;} #the404Header li.active a {background: #fff; color: #000;} /************************************* 404 CONTENT ****************************************/ #the404Content {padding: 45px 0 52px; background: #ffffff;} #the404Content h3 {width: 608px; height: 123px; margin: 0 52px 0; background: url(images/whoops.gif) no-repeat; text-indent: -9999px;} #the404Content h4 {width: 763px; height: 417px; margin: 0 52px; background: url(images/big404.gif) no-repeat; text-indent: -9999px;} #the404Content h5 {width: 716px; height: 144px; margin: 0 52px 0; background: url(images/sorry.gif) no-repeat; text-indent: -9999px;} /********************************** 404 FOOTER ***************************************/ #the404Footer li a {background: #000; color: #fff;} #the404Footer li a:hover {background: #fff; color: #000;} #the404Footer li.active a {background: #fff; color: #000;} /************************************ GAMES HEADER ***************************************/ #gamesHeader {} #gamesHeader h1 { } #gamesHeader h1 a {background: url(images/games_logo.gif) no-repeat;} #gamesHeader li a {background: #ff4a35; color: #fff;} #gamesHeader li a:hover {background: #fff; color: #ff4a35;} #gamesHeader li.active a {background: #fff; color: #ff4a35;} /************************************* GAMES CONTENT ****************************************/ #gamesContent {padding: 45px 0 10px; background: #ffffff; text-align: center;} #gamesContent h1 {width: 775px; height: 233px; margin: 0 auto; background: url(images/h1_games.gif) no-repeat; text-indent: -9999px;} #gamesContent h2 {font: bold 30px Helvetica, Arial, sans-serif; color: #ff4a35; text-align: center;} #gamesContent ul {list-style-type: none; margin: 50px 50px 0; } #gamesContent li {clear: both; height: 30px; padding: 4px 0; border-bottom: 1px solid #ff4a35} #gamesContent li.last {border: none;} #gamesContent li h2 {float: left; width: 270px; margin: 0; font-size: 24px; text-align: right; font-weight: normal;} #gamesContent li h6 {float: left; margin: 0 0 0 20px; font: 24px Helvetica, Arial, sans-serif; color: #e8a30b; text-align: left;} #gamesContent li h6 a {color: #e8a30b; text-decoration: none;} #gamesContent li h6 a:hover {text-decoration: underline;} #gamesContent p {margin: 50px 50px 0; font-size: 10px; color: #666; text-align: center;} #gamesContent object {margin-top: 50px; border: 1px solid #ff4a35;} /********************************** GAMES FOOTER ***************************************/ #gamesFooter li a {background: #ff4a35; color: #fff;} #gamesFooter li a:hover {background: #fff; color: #ff4a35;} #gamesFooter li.active a {background: #fff; color: #ff4a35;} /************************************************************************************************ LIGHTBOX *********/ #lightbox{ position: absolute; left: 0; width: 100%; z-index: 100; text-align: center; line-height: 0;} #lightbox img{ width: auto; height: auto;} #lightbox a img{ border: none; } #outerImageContainer{ position: relative; background-color: #fff; width: 250px; height: 250px; margin: 0 auto; } #imageContainer{ padding: 15px 15px 5px; } #loading{ position: absolute; top: 40%; left: 0%; height: 25%; width: 100%; text-align: center; line-height: 0; } #hoverNav{ position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10; } #imageContainer>#hoverNav{ left: 0;} #hoverNav a{ outline: none;} #prevLink, #nextLink{ width: 49%; height: 100%; background-image: url(data:image/gif;base64,AAAA); /* Trick IE into showing hover */ display: block; } #prevLink { left: 0; float: left;} #nextLink { right: 0; float: right;} #prevLink:hover, #prevLink:visited:hover { background: url(images/prevlabel.gif) left 15% no-repeat; } #nextLink:hover, #nextLink:visited:hover { background: url(images/nextlabel.gif) right 15% no-repeat; } #imageDataContainer{ font: 10px Verdana, Helvetica, sans-serif; background-color: #fff; margin: 0 auto; line-height: 1.4em; overflow: auto; width: 100% ; } #imageData{ padding:0 10px; color: #666; } #imageData #imageDetails{ width: 70%; float: left; text-align: left; } #imageData #caption{ font-weight: bold; } #imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em; } #imageData #bottomNavClose{ width: 74px; float: right; margin: 0 5px 0 0; padding-bottom: 0.7em; outline: none;} #overlay{ position: absolute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; background-color: #000; }