/* iPAD CSS */


/* --------------------------- */


/*
TOC
1. block level elements
2. global elements
3. link styles
4. page templates
5. misc.
*/


html, body {height: 100%;}
body {background-color: #fff; font-size: 16px; color: #000; font-family: georgia, times, serif; line-height: 10px;}

h1 {font-family: helvetica, arial, sans-serif; font-size: 48px; padding: 0 0 0 0; text-transform: uppercase; line-height: 50px; margin: 0;}
h2 {text-transform: uppercase; font-size: 14px;padding: 10px 0; line-height: 10px; color: #ff0000;}
h3 {font-size:12px; color: #666; text-transform: uppercase;}
h4 {font-size:10px; color: #999; text-transform: uppercase;}
h5 {text-transform: uppercase; font-size: 14px;padding: 0; line-height: 10px; color: #ff0000;}
h6 {font-size: 12px; text-transform: uppercase;}


hr {height:13px; border:none; background-color: #fff; width:465px; background: url(../assets/img/hr_01.gif) no-repeat 0 0; margin:0; margin:10px 0 15px 0;}

p {font-size: 12px; line-height: 20px; font-family: georgia, times, serif; color:#000; margin: 0 0 20px 0;}

p img { }

span {color:inherit;}

object {margin: 20px 0;}

embed {margin:0;}

ul {font-variant: normal; color:inherit;}

li {margin:0 0 0 0; color: #000; font-size: 12px; line-height: 20px; list-style: decimal; list-style-position: inside;}

/* blockquote */
blockquote {padding: 0 0 0 10px; margin:20px 0 20px 0px; border-left: 1px solid #999;}
blockquote p {font-size: 12px; color: #555; margin:0; padding:0; line-height: 20px;}

.reading-list blockquote {margin: 0 0 10px 0px; border-left:2px solid #ccc; text-align: justify; padding: 0 0 0 10px;}
.reading-list blockquote p {color: #666; font-size: 12px;}

.masthead blockquote {font-size: 12px; line-height: 20px; border-left:2px solid #ddd; margin: 10px 0; color:#333;}

/* columns */
.c1 {left:0px; top:0;} /* a */
.c2 {left:69px;}
.c3 {left:138px;}
.c4 {left:207px;}
.c5 {left:276px;} /* a */
.c6 {left:345px;}
.c7 {left:414px; top:0;}
.c8 {left:483px; top:0;}
.c9 {left:552px; top:0;} /* a */
.c10 {left:621px; top:0;}
.c11 {left:690px;}
.c12 {left:769px;}
.c13 {left:828px;} /* a */
.c14 {left:897px;}
.c15 {left:966px;}
.c16 {left:1035px;}
.c17 {left:1166px;} /* a */
.c18 {left:1297px;}
.c19 {left:1428px;}
.c20 {left:1559px;}
.c21 {left:1690px;} /* a */
.c22 {left:1821px;}
.c23 {left:1952px;}
.c24 {left:2083px;}

.text {position: relative; width:252px; text-align: justify; margin: 0 20px 0 0; float:left;}
.hyphenate {}

/* global elements */


#background {background-color: #fff; position:fixed; top: 0; left:0; height:100%; width:100%; z-index: -9;}
#background.home {background-color: #333;}
#background.featured {background-color: #6dcff6;}
#background.single {background-color: #eee;}
#background.archive {background-color: #ebf3f6;}
#background.letter {background-color:#faf1e1;}
#background.search-results {background-color:#ebf3f6;}
#background.default-feature{background: url(../assets/img/basline.png) repeat 0 5px;}



#wrapper {position:relative; height: 100%; width:100%; padding: 0; margin: 0; z-index: 9;}

/* iPad - important */
#page {position:absolute; top: 0; left: 0; overflow: visible; width:640px;}
#page-right {position:absolute; left: 621px; top: 0; width: 640px; padding:100px 81px 0 81px; margin:0;}
#page-home {position:absolute; left: 540px; top:0; width: 640px; padding:2px 0 0 81px; margin:0;}
#page-feature {position:absolute; left: 621px; top: 0; width: 640px; padding:100px 0 0 81px; margin:0;}
#page-archive {position:absolute; left: 621px; top: 0; width: 640px; padding:100px 0 0 81px; margin:0;}

.the-content { padding: 100px 81px 0 81px; margin: 0;height: 100%;z-index: 999;position:absolute; width:640px;}
.the-feature { padding: 100px 81px 0 81px; margin: 0;height: 100%;z-index: 999;position:absolute; width:1000px;}
.the-page { padding: 100px 0px 0 81px; margin: 0;height: 100%;z-index: 999;position:absolute; width:459px;} /* archives, etc. */

.featured span, .pagetitle span {color: #666;}



#column {position:absolute;}


#pagination {font-size: 13px; border-top:1px solid #999; margin:50px 0 0 0; padding: 10px 0;}


.author {text-transform: uppercase; padding: 0 0 5px 0; border-bottom: 1px dotted #666; color: #000; font-size: 10px;}
.author span {text-transform: none; color:#666;}

/* nav frame */
#navigation-frame {height: 50px; background-color: transparent; width:100%; position: fixed; top: 0; left:298px; z-index: 999; opacity:1.0; background: url(../assets/img/nav_bg.png) repeat-x 0 -19px;}

.home-link { background: url(../assets/img/home.png) no-repeat 0 0; height: 50px; width:315px; position: fixed; top: 0px; left:0;z-index: 999;}
/* .home-link:hover { background: url(../assets/img/home.png) no-repeat 0 -33px;} */

#spine {background: url(../assets/img/spine.gif) no-repeat 0 0; position: fixed; top:0; left: 621px; height:41px; width:24px;}

#icon-stack {position:fixed; top: 0; left:0; height: 100%; width:37px; z-index: 9999; background-color:#fff; padding:87px 0 0 5px;}

.top {background: url(../assets/img/icons.png) no-repeat 0 0; height: 32px; width: 32px; margin-bottom: 5px;text-indent: -999px;}
.top:hover {background: url(../assets/img/icons.png) no-repeat -37px 0; background-color: #fff;}

.subscribe-twitter {background: url(../assets/img/icons.png) no-repeat 0 -74px; height: 32px; width: 32px; margin-bottom: 5px;}
.subscribe-twitter:hover { background: url(../assets/img/icons.png) no-repeat -37px -74px;}

.subscribe-rss {background: url(../assets/img/icons.png) no-repeat 0 -111px; height: 32px; width: 32px; margin-bottom: 5px;}
.subscribe-rss:hover {background: url(../assets/img/icons.png) no-repeat -37px -111px;}

/* iPad - important */
/*
.slide {background: url(../assets/img/icons.png) no-repeat 0 -37px; height: 32px; width: 32px; margin-bottom: 5px; position:fixed; top:50px; left:5px; z-index: 9999;}
.slide:hover {background: url(../assets/img/icons.png) no-repeat -37px -37px; cursor: pointer;}
*/

/* search */
#search {position: fixed; left:1047px;top:0;border-left:1px solid #ccc;height:41px; width:293px;}

.field {border:none; height:41px; width:212px; margin:0; padding:0 10px 0 10px; background-color: #fff; }

.field:hover {background-color: #fff200;-webkit-transition: background-color 0.4s ease-in;}
.field:focus {background-color: #f2f2f2;-webkit-transition: background-color 0.4s ease-in;}

.srch_btn {margin:0;padding:0;height:41px;width:71px;border:none;cursor: pointer;backgroundcolor: #fff;background: url(../assets/img/search_btn.png) no-repeat 0 0px;position:absolute;top:0;right:0;}
.srch_btn:hover {background: url(../assets/img/search_btn.png) no-repeat 0 -44px;}
.srch_btn:active {background: url(../assets/img/search_btn.png) no-repeat 0 0;}

/* toc styles */
#toc {position:absolute; top:0; left:0; width:459px; margin: 0px 0 0 0; padding: 65px 81px 0 81px;background-color: #fff;z-index: 9;}
#toc-header {background-color: transparent; height:193px; width:525px; margin: 0 0 0 0; background: url(../assets/img/toc_header_02.png) no-repeat 0 0;}
.date {text-align: left; color:#999; text-transform: uppercase; font-size: 10px; margin: 0 0 0px 0;}

.in-this-issue {margin:0 0 10px 0; padding:0;}
.in-this-issue li {margin: 0 0 0 0; font-size: 10px; color:#333; border-bottom: 1px dotted #ccc; background-color: #fff; padding: 0 0 2px 0px; text-transform: uppercase; list-style: none;}
.in-this-issue li a {display:block;}
.indent {margin: 0 0 0 15px;}


.feature {overflow: hidden; border-bottom: none; padding:4px 0 0 0;}
.feature img {float:left; padding: 0 24px 15px 0; border:none; display: inline; float: left;}
.feature h1 {float:right; width: 252px; margin: -9px 0 3px 0; padding:0;color: #6dcff6; line-height: 55px;}
.feature h2 {margin:-5px 0 10px 0;}
.feature p {margin: 0 0 0 0; padding: 0; font-weight: normal; text-align: justify;}

.featured-stories, .archives {background-color: #fff; -webkit-transition: background-color 0.4s ease-in; border-bottom:none; padding:5px 0;}
.featured-stories h2, .archives h2 {margin:0; padding:0;}
.featured-stories:hover {background-color: #f2f2f2;}
.featured-stories h1, .archives h1 {padding:0 0 0 0; margin:0 0 0 0;}
.featured-stories h4, .archives h4 {padding: 0 0 5px 0;}
.archives:hover {background-color: #eee;}
.article-thumbnail img {float:left; padding: 5px 10px 10px 0;}
.supers {font-size:14px; padding:0 5px 0 0; color:#ccc;}

.music, .around-the-web, .letters {border-top: 1px solid #eee;}

h1.reading-list {margin: 10px 0 0px 0; color: #333; border:none;}
h1.around-the-web, h1.music {margin: 20px 0 0px 0; color: #333; border:none;}
.around-the-web h3, .letters h3 {padding:10px 0 11px 0; margin:0; display: block; background-color: #fff; -webkit-transition: background-color 0.4s ease-in;}
.music h3:hover, .around-the-web h3:hover, .reading-list h3:hover, .letters h3:hover  {background-color: #fffce0;}

.onebit_mp3 {margin-right: 10px;} /* vendor specific */
.music p {margin:0; padding:0; display:inline;}
.music h3 {padding:5px 0; margin:0 0 0 0; display: block; -webkit-transition: background-color 0.4s ease-in; background-color: #fff; font-size: 12px;}
.music h4 {text-align: right; margin: 0; padding:0;}
.music-permalink {float:left; margin: -22px 0 0 24px; font-size: 15px; padding: 0;}
#columns h2 {margin-bottom:-10px;}

.reading-list {padding:0;border-top: 1px solid #eee;}
.reading-list h3 {padding:15px 0 11px 0; margin:0; display: block; background-color: #fff; -webkit-transition: background-color 0.4s ease-in;}
.reading-list p {color: #333; font-size: 12px; margin: 0 0 10px 0px;}
.reading-list img, .reading-list embed, .reading-list object {display: none;}
.reading-list li {font-size: 10px; margin: 0 0 0 0; padding:2px 0 2px 0; list-style-position: inside; list-style:none; text-transform: uppercase;}
.reading-list ol {margin:0; padding:0 0 0 0; border-top:none;}
.reading-list .arrow {float: right; color: #ff0000; display:block;}
.reading-list h3 a {display:block;}

.back-issues {padding:0 0 20px 0;}
h2.back-issues {padding:7px 0;}
.back-issues img {padding:0 0 5px 0;}

h2.letters {border:none;padding:7px 0;}

.archive-list {float:left; width: 115px; padding: 0 0 24px 0; margin: -10px 0 20px 0;}
.archive-list h2 {padding: 10px 0 11px 0;}
.archive-list h5 {line-height: 10px; font-size: 12px;padding:5px 0;}
.archive-list li {list-style: none; line-height: 20px; font-size: 10px;}

.circulation {margin: 20px 0 0 0;}


.masthead {width:321px; position:relative; float:left; text-align: justify; margin: 0 23px 20px 0;}
.masthead p {margin: 0 0 10px 0;}

.masthead h2 {margin: 0 0 3px 0;}

.footer {margin:30px 0 0px 0; padding: 0 0 0 0; border-top:1px solid #666;}
.footer p {font-size: 12px; color: #666; padding:15px 0 0 0;}

/* home */
.featured-excerpt {background-color:#fff200; padding: 106px 81px 60px 81px; width:100%;}
.featured-excerpt h1 {color:#666; white-space: nowrap; margin: 0 0 15px 0; padding:0 0 12px 0; width:640px; border-bottom: 1px solid #333;}
.featured-excerpt p {width:540px;}

.reading-list-excerpt {background-color:#eee; padding: 81px; width:100%;}
.reading-list-excerpt h1 {color:#ff0000; white-space: normal; margin: 0 0 15px 0; padding:0 0 12px 0; width:640px; border-bottom: 1px solid #333;}
.reading-list-excerpt p {width:540px; color: #333;}
.reading-list-excerpt blockquote {padding: 0; margin: 0 0 15px 0; border-left: 1px solid #999;}
.reading-list-excerpt blockquote p {width:520px; font-size: 14px; color: #000; padding: 0 0 3px 20px; margin: 0; line-height: 20px; text-align: justify;}
.reading-list-excerpt .attribution {margin: 0; padding: 0; border-top:none;}
.reading-list-excerpt .attribution li {list-style-type: none;}


.front-page {background-color:transparent; padding: 81px; margin: 0 0 0 0; width: 100%; height:100%;}
.front-page h1  {color:#ff0000; white-space: normal; margin: 0 0 15px 0; padding:0 0 12px 0; width:640px; border-bottom: 1px solid #ccc;}
.front-page p {width:540px; color: #fff;}
.front-page img {margin:20px 0;}
.front-page .post-metadata li, #front-page .attribution li {color:#666;}


/* page templates */
.featured p {color:#000; margin: 0 0 10px 0;}
.featured p img {margin: 20px 0;}
.featured h2 {color: #000; margin: 0 0 6px 0;}
.featured h1 {font-size: 60px; margin: 0 0 20px 0;}

#the-page-header { border-bottom: 1px solid #999; margin: 0 0 20px 0; padding:0 0 5px 0;}
#the-page-header h2 {margin:0; padding:0;}

.archive-results {margin: 0 0 10px 0;}

/* features */
#page-feature .post p {width:100%; margin:0 0 20px 0;}
#page-feature #post-metadata, #page-feature #postnav {float:left;}

#page-feature.default p {width:540px; text-align:justify;}



/* posts */
.post {margin:0 0 0 0;}
/* .post .body:first-letter {font-size: 18px; padding: 0 2px 0 0; text-transform: capitalize;} */
.post p { font-size: 12px; line-height: 20px;margin: 0 0 10px 0;}
.post p img {margin: 20px 0;}
.post h1 {font-size: 48px; margin:3px 0 15px 0; border-bottom:1px solid #333; padding: 0 0 2px 0; width:640px; color:#333;}

.attribution {margin:100px 0 0 0; border-top:1px solid #666; padding:5px 0; width: 640px;}
.attribution li {font-size: 10px; margin:0px 0 0 0; padding: 0 0; list-style: decimal; list-style-position: inside; color: #666;}

#post-metadata {border-top:1px solid #666; margin:0 0 0 0; padding:0; width: 640px;}
#post-metadata ol {margin: 0;padding:5px;}
#post-metadata li {list-style: lower-roman; list-style-position: inside; margin: 0 0 0 -5px; padding:0; line-height: 20px; text-transform: uppercase; color: #666; font-size: 10px;}


#post-nav {width:640px; margin:0 0 0 0;}
#post-nav h2 {padding:0 0 2px 0; margin:0; line-height: 20px;}
#post-nav h4 {padding:9px 0 4px 0; color: #666;}
#post-nav hr {width:100%; border:0; height:1px; background-color: #ccc; background-image: none; margin:0;}
#post-nav.left {float:left; width:321px; border-top: 1px solid #666; padding:0; margin: 0 24px 0 0;}
#post-nav.right {float:left; width:294px; border-top: 1px solid #666; padding:0; margin:0;}
#post-nav.right li {list-style: none; margin:0; padding:0; display: block;}
#post-nav.right h2 {border-bottom:1px #ccc solid; padding: 0 0 2px 0;}
/*
.prev, .next {display:block; background-color: transparent; -webkit-transition: background-color 0.4s ease-in;}
.prev:hover, .next:hover {background-color:#e2e2e2;}
*/

.keyboard-icon {background: url(../assets/img/keyboard.png) no-repeat 22px 15px; height: 100px; padding: 30px 0 0 0; margin: 0 0 0 0; width: 321px; border-top: 1px solid #ccc;}


/* archives */
#page-archive h2 {border-bottom: 1px solid #ccc; padding:7px 0;}
.archive-results {padding:10px 0; border-bottom: 1px solid #eee;}


/* contact */
#letter {}
#letter.editor {width:540px; text-indent: 20px;}
#letter.editor p {margin: 20px 0 0 0;}
.first-line {padding-left: 20px;}
#letter.editor input {text-align: center; background-color:#faf1e1; border-bottom: 1px solid #000;}
.name {margin: 0 5px; width:200px;}
.subject {width:160px; margin: 0 2px 0 0;}
.email {width:220px;}
.quiz {width:50px;}
.message {background: url(../assets/img/letter_bg.gif) no-repeat 0 15px; width:100%; height:390px; text-indent: 25px;}
.submit {}
.submit:hover {color: #ff0000; cursor: pointer;}

/* sponsorship units */
#sponsor {padding: 15px 0; display:block;}
#sponsor img {margin: 5px 0;}
.wide {background: #999; width:100%; height:50px; margin: 5px 0;}
#sponsor a, #sponsor a:visited, #sponsor a:active {color:#ccc; float:right; font-size:11px;}
#sponsor a:hover {color: #999;}

/* misc. */
.big {font-size: 60px; padding: 10px 0 10px 0;}
.more {font-size: 11px; text-transform: uppercase; color: #000; float:right; line-height: 0; margin: -12px 0 0 0; padding:0;}
#the-page-header .more { margin: -4px 0 0px 0;}
.link-arrow {color:#ff0000; text-transform: none; font-size:12px; margin-left: 5px;}
.arrow {float: right; color: #ff0000; display:block;}
.onebit_mp3 a { display: none; }
.audio-player {margin: 0 20px 0 0;}

.tnm {text-transform: uppercase; font-size: inherit; color: #000;}
.front-page .tnm {color:#fff200;}

/* anchors */
#go-to-featured-story {height:40px; width:40px;padding-top: 50px; border:1px solid #ff0000; visibility:hidden;}
#go-to-features {height:40px; width:40px;padding-top: 50px; border:1px solid #ff0000; visibility:hidden;}
#go-to-columns {height:40px; width:40px;padding-top: 50px; border:1px solid #ff0000; visibility:hidden;}
#go-to-music {height:40px; width:40px;padding-top: 0px; border:1px solid #ff0000; visibility:hidden;}
#go-to-around-the-web {height:40px; width:40px;padding-top: 50px; border:1px solid #ff0000; visibility:hidden;}
#go-to-reading-list {height:40px; width:40px;padding-top: 50px; border:1px solid #ff0000; visibility:hidden;}
#go-to-more-features {height:40px; width:40px;padding-top: 50px; border:1px solid #ff0000; visibility:hidden;}
#go-to-archives {height:40px; width:40px;padding-top: 50px; border:1px solid #ff0000; visibility:hidden;}
#go-to-letters {height:40px; width:40px;padding-top: 50px; border:1px solid #ff0000; visibility:hidden;}
#go-to-back-issues {height:40px; width:40px;padding-top: 50px; border:1px solid #ff0000; visibility:hidden;}
#go-to-masthead {height:40px; width:40px;padding-top: 50px; border:1px solid #ff0000; visibility:hidden;}


/* iPad - important */ /* grid */
/*
#grid {background: url(../assets/img/grid.png) repeat-x 0 0; height: 1000px; width:1080px; top:45px;left:81px; position:fixed; overflow: hidden; z-index:9999999; visibility: block;}
.grid-toggle {background: url(../assets/img/grid_icon.png) no-repeat 0 0; height:10px; width:11px; position:fixed; bottom:10px; right:10px; color:#ffffff; font-size: 10px; opacity:.8; z-index:9999;}
*/

/* link styles */
a {color: #333; text-decoration: none;padding:0; margin:0;-webkit-transition: color 0.2s linear;}
a:hover {color:#666;}
a:active {color:#666;}
a:visited {color:#999;}

h1 a {color:#666;}
h1 a:hover {color:#666;}
h1 a:active {color:#666;}
/* h1 a:visited {color:#333;} */

p a {color:#df0000; font-weight: normal; text-decoration: underline;}
p a:hover {color:#ff0000;}
p a:active {color:#999;}
/* p a:visited{color:#999;} */

#toc-content p a {color:#6dcff6;}

h1 a {display:block;}

h4 a {color:#000;}
h4 a:hover {color:#ff0000;}
h4 a:active {color: inherit;}
h4 a:visited {color: inherit;}

#toc-content .music-permalink a {color:#ccc;font-size: 12px; margin: 0 0 0 15px; text-decoration: none;}
#toc-content .music-permalink a:hover {color:#ff0000;}
#toc-content .music-permalink a:active {color:#000;}

.masthead a {color: #333;}
.masthead a:hover {color:#ff0000;}
.masthead a:active {color:#666;}
.masthead a:visited {color:#999;}

.more a {color:#000;}
.more a:hover {color:#ff0000;}

.attribution a {color:#999;}
.attribution a:hover {color:#fff;}
.attribution a:active {color:#000;}
/* .attribution a:visited {color:#999;} */

#post-metadata a {color:#999;}
#post-metadata a:hover {color:#fff;}
#post-metadata a:active {color:#000;}
/* #post-metadata a:visited {color:#666;} */

.reading-list .attribution a {color: #999;}
.reading-list .attribution a:hover {color: #ff0000;}
.reading-list .attribution a:active {color: #000;}
.reading-list .attribution a:visited {color: #999;}

#post-nav a {text-decoration: none;}
#post-nav a:hover {color:#000;}
#post-nav a:visited {}

.featured p a {text-decoration: none}
.featured p a:hover {}
.featured p a:active {}
.featured p a:visited {}

.in-this-issue li a {color:#333;}
.in-this-issue li a:hover {color:#6dcff6;}
.in-this-issue li:hover {background-color: #f9f9f9;}

.featured-article h1 a {color:#6dcff6;}
.featured-article h1 a:hover {color:#666;}


.featured-excerpt h1 a {color:#333;}
.featured-excerpt h1 a:hover {color:#ccc;}
.featured-excerpt h1 a:active {color:#fff200;}
/* .featured-excerpt h1 a:visited {color:#333;} */

.reading-list-excerpt h1 a {color:#333;}
.reading-list-excerpt h1 a:hover {color:#fff200;}
.reading-list-excerpt h1 a:active {color:#666;}
/* .reading-list-excerpt h1 a:visited {color:#333;} */

.reading-list-excerpt .attribution a {color: #333;}
.reading-list-excerpt .attribution a:hover {color: #fff200;}
.reading-list-excerpt .attribution a:active {color: #000;}
.reading-list-excerpt .attribution a:visited {color: #333;}

.front-page h1 a {color: #eee;}
.front-page h1 a:visited {color:#eee;}
.front-page h1 a:hover {color:#fff200;}
.front-page h1 a:active {color:#666;}

.front-page p a {color: #fff200;}
.front-page p a:visited {color:#eee;}
.front-page p a:hover {color:#fff200;}
.front-page p a:active {color:#666;}

#navigation a:visited {color:#000;}

.front-page #post-nav li a, #front-page .attribution li a {color: #666;}
.front-page #post-nav li a:hover, #front-page .attribution li a:hover {color:#fff200;}
.front-page #post-nav li a:visited, #front-page .attribution li a:visited {color:#000;}