html, body { height: 100%; }
body { font-family: 'Bookman Old Style', Georgia, serif; color: #404041; margin: 0; overflow-x: hidden; }
#adaptable { width: 1280px; height: 720px; font-size: 100px; }
.clear { clear: both; height: 0; }

*:active, *:focus { outline: none; -moz-outline-style: none; }
img { border: 0; }

@font-face {
    font-family: 'WebCentury';
    src: url('webcenturym-webfont.eot');
    src: url('webcenturym-webfont.eot?#iefix') format('embedded-opentype'),
         url('webcenturym-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'WebCentury';
    src: url('webcenturyb-webfont.eot');
    src: url('webcenturyb-webfont.eot?#iefix') format('embedded-opentype'),
         url('webcenturyb-webfont.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}

.scrollBar { position: absolute; top: 0; left: 0; width: 0px; height: 42px; border-left: solid 1px #404041; }
.scrollBarSlider { position: absolute; top: 0; left: 0; width: 27px; background: url('scroller.gif') 50% 0% repeat-y; height: 100px; cursor: pointer; }

.menu { font-size: 65%; font-family: WebCentury, sans-serif; font-weight: bold; text-transform: uppercase; line-height: 1em; letter-spacing: -0.03em;
	padding: 0.5em 0 0.5em 0.5em;
}
.menu.autoHide { margin-top: -2em; position: relative; top: 0; left: 0; background: #fff; z-index: 2; padding-bottom: 0.001em; margin-bottom: 0.4em;
	transition: top 0.5s ease 0.3s; -o-transition: top 0.5s ease 0.3s; -webkit-transition: top 0.5s ease 0.3s; -moz-transition: top 0.5s ease 0.3s; -ms-transition: top 0.5s ease 0.3s;
}
.menu.autoHide:hover { margin-top: -2em; position:relative; left:0; top: 2em; }

.menu a { text-decoration: none; color: #404041; }
.menu a.active, .menu a:hover { color: #39C0CF; }

.content { margin: 0 0.34em; height: 60%; }

.tab { position: absolute !important; top: -9999px; left: -9999px; height: 100%; }
.tab.active { position: relative !important; top: 0; left: 0; }

.tab .textBlockSmall { font-size: 14%; line-height: 1.5em; float: right; width: 29%; height: 100%; margin-right: 4%; overflow: hidden; }
.tab .textBlockSmall a { color: #39C0CF; text-decoration: none; }
.tab .textBlockSmall a:hover { text-decoration: underline; }
.tab .textBlockSmall a.read { color: #404041; font-style: italic; }
.tab .textBlockSmall a.read:hover { color: #000; }

.tab .videoBlockBig { width: 64%; height: 100%; float: left; }

.tab .skip { font-size: 66%; position: absolute; margin-top: 1em; top: 50%; right: 0.34em; line-height: 50%; }
.tab .skip a { font-size: 25%; font-family: WebCentury, sans-serif; font-weight: bold; text-decoration: none; color: #404041; }
.tab .skip a:hover { color: #39C0CF; }

.imgAboutMe { width: 60%; height: 100%; }
.imgScrapbook { position: absolute; bottom: 0; left: 0; width: 2%; height: 50%; cursor: pointer; }
.imgScrapbook .hover { display: none; }
.imgScrapbook:hover .hover { display: inline; }
.imgScrapbook:hover .normal { display: none; }
.imgTalkin { margin-left: -0.34em; width: 30%; height: 100%; float: left; }

.illustratedInfo { position: absolute; font-size: 15%; top: 1.2em; left: 19%; color: #BF0014; display: none; }
.illustratedInfo.children { color: #E0A205; }
.illustratedInfo.visual { color: #7AC943; }
.illustratedInfo.children { color: #E0A205; }
.illustratedInfo.misc { color: #7145ab; }
.illustratedInfo.advertising { color: #8199df; }

.categories { float: left; width: 71%; height: 100%; overflow: hidden; }
.storyList { float: left; width: 1.6em; margin-right: 0.1em; margin-bottom: 0.5em; }
.storyList.children { margin-bottom: 0.2em; }
.storyList.visual, .storyList.poetry { margin-bottom: 0; }
.storyList.misc { width: 3.3em; }

.storyList h2 { position: relative; font-family: WebCentury, sans-serif; font-weight: bold; text-transform: uppercase; font-size: 21%; padding-left: 0.5em; border-left: solid 1px #9f9fa0; line-height: 1em; height: 2em; color: #39C0CF; }
.storyList h2.link a { line-height: 1em; color: #39C0CF; text-decoration: none; }
.storyList h2.link a:after { content: ''; position: absolute; top: 0; left: -1px; bottom: 0; border-left: solid 2px #39C0CF; display: none; }
/*.storyList h2.link a:hover { text-decoration: underline; }*/
.storyList h2.link a:hover:after { display: block; }
/*.storyList.children h2 { color: #E0A205; }
.storyList.poetry h2 { color: #bf0014; }
.storyList.visual h2 { color: #7AC943; }
.storyList.advertising h2 { color: #8199df; }
.storyList.misc h2 { margin-top: 0; height: 1.2em; }
.storyList.misc h2 { color: #7145ab; font-size: 20%; width: 20em; }*/
.storyList > a { display: block; font-size: 14%; color: #404041; padding-left: 0.5em; border-left: solid 1px #fff; text-decoration: none; }
.storyList > a:hover { color: #39C0CF; text-decoration: underline; }

/*.storyList .illustratedInfo { color: #E0A205; padding: 1.5em 0 0 0.5em; font-size: 15%; }*/
/*.storyList.children a.illustrated:hover { color: #E0A205; }
.storyList.misc a.illustrated:hover { color: #7145ab; }
.storyList.advertising a.illustrated:hover { color: #8199df; }
.storyList a.illustrated:hover { color: #BF0014; }
.storyList.visual a:hover { color: #7AC943; }*/

a.illustrated .asterisk { display: none; font-weight: bold; color: #555; }/*color: #BF0014; }
.storyList.visual a.illustrated .asterisk { color: #7AC943; }
.storyList.children a.illustrated .asterisk { color: #E0A205; }
.storyList.misc a.illustrated .asterisk { color: #7145ab; }*/
a.illustrated:hover .asterisk { color: inherit; }

.floatyBinder { float: left; }
.floatyBinder.twoColumns { width: 3.4em; }
.floatyBinderVertical { float: left; width: 1.7em; overflow: hidden; }

.floatyBinder .storyList { margin-bottom: 0.3em; }



/* contact form & related stuff*/
.social { font-size: 12px; padding-bottom: 2%; line-height: 21px; }
.social a { color: #404041; }
.social a:hover { color: #39C0CF; }
form { margin: 0; }
.contactForm { font-size: 33%; position: relative; }
.contactForm label { width: 17%; font-weight: normal; display: block; float: left; line-height: 1.4em; padding: 0; margin: 0; }
.contactForm input[type=text] { display: block; float: left; width: 80%; font-size: inherit; font-weight: normal;
	color: #39C0CF; border: 0; background: url('line.gif') repeat-x 0% 100%;
	line-height: 1.4em; height: 1.4em; font-family: 'Bookman Old Style', Georgia, serif; font-style: italic; 
}
.contactForm .msgWrapper { position: relative; width: 80%; float: left; height: 4.3em; overflow: hidden; margin-bottom: 2.8em; }
.contactForm .msgWrapper .lines { position: absolute; top: 0; left:0; width: 100%; height: 4.2em; }
.contactForm .msgWrapper .lines .line { height: 1.4em; background: url('line.gif') repeat-x 0% 100%; }

.contactForm .msgWrapper textarea { border: 0; color: #39C0CF; line-height: 1.4em; font-size: 100%; font-family: 'Bookman Old Style', Georgia, serif; font-style: italic; overflow: auto; /* hides scrollbar in IE */
	width: 100%; display: block; position: absolute; top: 0; left: 0; z-index: 2; background: transparent;
}

.contactForm textarea, input { outline:none; }

.contactForm input.submit { background: #4d4d4d; color: #fff; font-size: 100%;
	display: block; position: absolute; top: 8.4em; right: 3%;
	line-height: 1.4em; height: 1.4em; border: 0; padding: 0 0.5em;
	font-family: 'Bookman Old Style', Georgia, serif; font-weight: normal;
}



/* interactive stories */
.contentTall { height: 70%; padding: 1em 0.5em 0 0.5em; }

.contentTall #interactiveBox { width: 48%; height: 100%; float: left; /*background: #404041;*/ margin-right: 4%; overflow: hidden; color: #404041; font-size: 20%; }

.contentTall.story .heading { width: 45%; height: 18%; float: left; }
.contentTall.story .heading h1 { font-size: 33%; margin: 0; font-family: WebCentury, sans-serif; text-transform: uppercase; }
.contentTall.story .heading .author { font-size: 17%; font-style: italic; }

.contentTall .text { width: 45%; height: 82%; float: left; overflow: hidden; padding-right: 2%; }
.contentTall .text h3 { font-size: 17%; font-weight: bold; line-height: 160%; margin: 0; }
.contentTall .text p { font-size: 17%; line-height: 160%; margin: 0  0 1.5em 0; }
.contentTall .text p a.interactive { font-style: normal; color: #39C0CF; text-decoration: none; border-bottom: solid 3px #fff; }
.contentTall .text p a.interactive:hover { text-decoration: none; }
/*.contentTall .text p em:hover { border-bottom: solid 3px #39C0CF;
	text-shadow: 0px 0px 8px #39C0CF, 0px 0px 8px #39C0CF, 0px 0px 8px #39C0CF, 0px 0px 8px #39C0CF;
	-webkit-text-shadow: 0px 0px 8px #39C0CF, 0px 0px 8px #39C0CF, 0px 0px 8px #39C0CF, 0px 0px 8px #39C0CF;
	-moz-text-shadow: 0px 0px 8px #39C0CF, 0px 0px 8px #39C0CF, 0px 0px 8px #39C0CF, 0px 0px 8px #39C0CF;
}*/

.contentTall .text a { text-decoration: none; color: #39C0CF; }
.contentTall .text a:hover { text-decoration: underline;}


/* static stories */
.contentMax .storyBlock { font-size: 17%; line-height: 1.5em; float: left; height: 100%; padding-left: 4%; margin-right: 5%; width: 50%; max-width: 60%; overflow: hidden; }
.contentMax .storyBlock.poems-illustrations { padding-left: 6%; margin-right: 8%; }
.contentMax .storyBlock.illustrated { /*overflow: visible;*/ text-align: center; }
.contentMax .storyBlock.centered { text-align: center; }
.contentMax .storyBlock h1 { font-size: 150%; margin-top: 0; }
.contentMax .storyBlock p { margin: 0  0 1.5em 0; }
.contentMax .storyBlock a { color: #39C0CF; text-decoration: none;  }
.contentMax .storyBlock.short-shorts p { margin: 0  0 1em 0; text-indent: 3em; }
.contentMax .related { font-size: 15%; float: left; width: 25%; height: 100%; overflow: hidden; }
.contentMax .related a { display: block; color: #404041; text-decoration: none; }
.contentMax .related a:hover { display: block; color: #39C0CF; text-decoration: underline; }
.contentMax .related a.illustrated:hover { display: block; color: #BF0014; text-decoration: underline; }
.contentMax .related a.back { font-size: 120%; font-weight: bold; color: #39C0CF; font-family: WebCentury, sans-serif; text-transform: uppercase; }
.contentMax .related a.active { color: #000; text-decoration: underline; }
.illustrated.storyBlock img { max-width: 100%; }
.noheading.storyBlock h1 { display: none; }



/* thumbnail view */
.contentMax .thumbnails { padding-left: 4%; margin-right: 5%; height: 100%; overflow: hidden; }
.contentMax .thumbnails .entry { width: 30%; height: 3em; margin-bottom: 0.6em; overflow: hidden; position: relative; float: left; text-decoration: none; color: #666; }
.contentMax .thumbnails .entry .c { text-align: center; font-size: 20%; padding: 2.5em 1em 1em 1em; }
.contentMax .thumbnails .entry .c img { max-width: 100%; max-height: 75%; }
.contentMax .thumbnails .entry .c p { text-align: left; max-width: 100%; height: 11.5em; overflow: hidden; margin: 0; }
.contentMax .thumbnails .entry h3 {
	font-family: WebCentury, sans-serif; font-size: 20%; text-align: center;
	position: absolute; top: 0.7em; left: 0; right: 0; margin: 0;
}

.lboxPoemFrame { width: 600px; overflow: hidden; padding: 0 12px; }
.lboxPoemFrame h1 { margin: 0.2em 0; }
.lboxPoemFrame p { line-height: 120%; }



/* portfolio */
.contentMax .portfolio { padding-left: 4%; margin-right: 5%; height: 100%; overflow: hidden; }
.contentMax .portfolio .entry { margin-bottom: 0.3em; position: relative; color: #666; }

.contentMax .portfolio .entry h3 { font-size: 20%; margin: 1em 0 0.4em; }
.contentMax .portfolio .entry h3 .client { margin-left: 3em; font-style: italic; }
.contentMax .portfolio .entry .gallery { font-size: 16%; }
.contentMax .portfolio .entry .gallery a { display: block; float: left; width: 20%; margin-right: 5%; }
.contentMax .portfolio .entry .gallery a:hover { outline: solid 6px #555; }
.contentMax .portfolio .entry .gallery a.hidden img { display: none; }
.contentMax .portfolio .entry .gallery img { width: 100%; vertical-align: top; }



/* miscellaneous */
a.backToMenu { position: absolute; top: 1.834em; right: 2.778em; font-size: 18%; line-height: 100%; color: #39C0CF; font-family: WebCentury, sans-serif; text-decoration: none; font-weight: bold; }
a.backToMenu:hover { color: #404041; }
h1.errorCode { font-size: 300%; line-height: 120%; margin: 0; padding-top: 0.2em; text-align: center; font-weight: bold; font-family: WebCentury, sans-serif; color: #39C0CF;  }
.errorDesc { font-size: 30%; text-align: center; }

.adjustableImageContainter { position:relative; }


/* scrapbook & penelope */
.scrapbook { margin: 0 0.34em; position: relative; top: 0.34em; left: 0; overflow: hidden; }
.scrapbookNav { position: absolute; bottom: 1.7em; left: 0; width: 96%; margin: 0 2%; cursor: pointer; font-size: 10%; line-height: 10px; }
.scrapbookNav .indicator { position: absolute; top: -1px; left: 0%; width: 1.298%; height: 2px; background: #404041;
	transition: left 0.4s ease; -o-transition: left 0.4s ease; -webkit-transition: left 0.4s ease; -moz-transition: left 0.4s ease;
}
.scrapbookNav img { vertical-align: bottom; }

.penelope { margin: 0 2% 0 4%; position: relative; top: 0.80em; left: 0; overflow: hidden; width: 60%; float: left; }
.penelopeText { position: relative; top: 5.3em; left: 0; overflow: hidden; width: 28%; float: left; font-size: 16%; }
.penelopeText p { margin-top: 0; text-indent: 2em; }

.navArrow { cursor: pointer; opacity: 0.8; }
.navArrow:hover { cursor: pointer; opacity: 1; }
.navArrow.left { position: absolute; z-index: 2; left: 0.17em; top: 35%; height: 30%; width: 2%; }
.navArrow.right { position: absolute; z-index: 2; right: 0.17em; top: 35%; height: 30%; width: 2%; }
.navArrow img { width: 100%; height: 100%; }

h1.scrapbookTitle { position: absolute; top: 1.834em; left: 2.778em; font-size: 18%; line-height: 100%; color: #404041; font-family: WebCentury, sans-serif; text-transform: uppercase; margin: 0; }
h1.penelopeTitle { position: absolute; top: 1.834em; left: 2.778em; font-size: 18%; line-height: 100%; color: #404041; font-family: WebCentury, sans-serif; text-transform: uppercase; margin: 0; }