/* Theme Name: ComicPress Theme URI: http://comicpress.org Description: Publish a comic with WordPress. Visit the ComicPress Website. Author: Tyler Martin, John Bintz, Philip M. Hofer Author URI: http://mindfaucet.com/ Version: 2.8 . The CSS, XHTML and design is released under GPL v3: http://www.opensource.org/licenses/gpl-3.0.html . */ /* STANDARD TAGS */ body { margin: 0; font-family: 'Arial', sans-serif; font-size: 13px; font-style: normal; font-weight: normal; text-transform: none; letter-spacing: normal; color: #333; background: #fff url('images/bgs/background.png') top repeat-x; z-index: 0; } a { color: #800; text-decoration: none; } a:hover { color: #f00; } a:focus { outline: none; } a img { border: none; } p { margin: 12px 0; } img { max-width: 100%; padding: 0; } small { font-size: 11px; } hr { height: 1px; color: #000; border: 0px; } blockquote { margin: 10px; padding: 5px 10px 5px 20px; border-width: 1px 1px 1px 5px; border-style: solid; border-color: #000; } blockquote cite { margin: 5px 0 0; display: block; } cite { font-size: 13px; font-weight: bold; font-style: normal; } code { padding: 10px; display: block; font-family: 'Courier New' , monospace; border: 1px dotted #000; overflow: scroll; } acronym, abbr, span.caps { cursor: help; } acronym, abbr { border-bottom: 1px dashed #000; } form { margin: 0; } .button { height: 25px; padding: 0 5px; background: #aaa url('images/menu.png'); color: #000; font-family: 'Arial', sans-serif; font-size: 13px; line-height: 13px; border: 1px solid #999; cursor: pointer; } .button:hover { color: #fff; background: #f00 url('images/menu.png') 0 -75px; } .sfhover { padding: 0; margin: 0; } /* HEADINGS */ h1, h1 a { padding: 10px 0 0 0; margin: 0; color: #fff; font-size: 56px; font-family: 'georgia' , serif; font-weight: normal; line-height: 46px; text-decoration: none; letter-spacing: -5px; font-variant: small-caps; } h2, h2 a { margin: 0; color: #333; font-weight: normal; letter-spacing: -1px; font-size: 24px; line-height: 24px; padding-bottom: 2px; font-family: 'trebuchet ms'; } h2.pagetitle, h2.pagetitle a { padding: 0 0 5px 0; margin: 0 0 20px 0; font-family: 'Georgia' , serif; font-size: 32px; font-weight: normal; letter-spacing: -2px; clear: both; } h3, h3 a { padding: 0; margin: 0; font-size: 20px; font-weight: normal; text-align: left; color: #333; text-decoration: none; clear: both; letter-spacing: -1px; font-family: 'verdana'; } /* THE PAGE WRAPPER */ /* Change this width to set the entire site's width - increase/reduce #content width by the same amount */ #page { width: 780px; margin: 0px auto; } #page-wide { width: 980px; margin: 0px auto; } /* THE HEADER */ #header { text-align: center; } #header a { color: #fff; } #header .description { color: #ddd; padding: 0 0 10px 0; font-size: 14px; font-style: italic; letter-spacing: 2px; } /* THE MENU */ #menubar { background: url('images/menu.png'); text-align: left; border-width: 1px 1px 1px 0; border-style: solid; border-color: #999; list-style: none; } #menunav { float: right; text-align: center; } .menunav-search { padding: 1px 1px 0 0; float: left; } .menunav-rss { width: 25px; height: 25px; margin: 0 0 0 4px; display: block; float: left; text-indent: -9999px; overflow: hidden; background: url('images/menu-nav.png') no-repeat; } .menunav-rss:hover { background-position: 0 -25px; } .menunav-prev, .menunav-next { display: block; float: left; } .menunav-prev { margin: 0 0 0 5px; } .menunav-prev a, .menunav-next a { width: 25px; height: 25px; display: block; text-indent: -9999px; overflow: hidden; } .menunav-prev a { background: url('images/menu-nav.png') -25px 0 no-repeat; } .menunav-prev a:hover { background-position: -25px -25px; } .menunav-next a { background: url('images/menu-nav.png') -50px 0 no-repeat; } .menunav-next a:hover { background-position: -50px -25px; } #menu { padding: 0; margin: 0; list-style: none; float: left; line-height: 25px; font-size: 13px; border-right: 1px solid #aaa; } #menu a { padding: 0px 10px 0 10px; display: block; color: #000; text-decoration: none; } #menu li .rss { padding: 5px 0 5px 0; } #menu li { float: left; cursor:pointer; } #menu li a { border-left: 1px solid #aaa; border-right: 1px solid #fff; } #menu li:hover a, #menu li.sfhover a { border-left: 1px solid #8b160f; border-right: 1px solid #c28380; color: #fff; /* Main menu highlighted text color */ background: url('images/menu.png') 0 -75px; } #menu li:hover, #menu li.sfhover { /* Main menu highlighted background color */ } /* For submenu dropdowns - this order must be maintained */ #menu ul { padding: 0; margin: 0; list-style: none; position: absolute; left: -9999px; width: 175px; line-height: 1; } #menu li li { width: 165px; padding: 4px 5px; color: #fff; } #menu li li a { width: 174px; padding: 0; color: #fff; border: none; } #menu li ul ul { margin: -17px 0 0 170px; } #menu li ul li:hover a, #menu li ul li li:hover a, #menu li ul li li li:hover a, #menu li ul li li li:hover a { color: #fff; /*Submenu highlighted text color */ } #menu li:hover li a, #menu li li:hover li a, #menu li li li:hover li a, #menu li li li li:hover li a { color: #fff; /*Submenu text color */ border: none; background: none; } #menu li li:hover { background: #f00; /*Submenu highlighted background color */ } #menu li:hover ul ul, #menu li:hover ul ul ul, #menu li:hover ul ul ul ul, #menu li.sfhover ul ul, #menu li.sfhover ul ul ul, #menu li.sfhover ul ul ul ul { left: -9999px; } #menu li:hover ul, #menu li li:hover ul, #menu li li li:hover ul, #menu li li li li:hover ul, #menu li.sfhover ul, #menu li li.sfhover ul, #menu li li li.sfhover ul, #menu li li li li.sfhover ul { left: auto; background: #000; /* Submenu background color */ text-transform: none; } #menu .current_page_item a { color: #fff; border-left: 1px solid #555; border-right: 1px solid #555; background: url('images/menu.png') 0 -50px; } /* THE COMIC */ #comic-head { padding-top: 5px; } #comic { background: #fff; border: 1px solid #999; text-align: center; z-index: 100; padding: 5px; } #comic-foot { padding-bottom: 5px; } /* THE FOOTER */ #footer { padding: 5px 0; text-align: center; } /* NAVIGATION */ a.navi-comments:hover span { color:#860b04; } .nav { float: right; font-size: 12px; font-weight: bold; margin-right: 10px; padding: 8px 5px 5px 5px; } .nav-first { padding: 0 5px 0 0; float: left; } .nav-previous { padding: 0 5px; float: left; } .nav-next { padding: 0 5px; float: left; } .nav-last { padding: 0 0 0 5px; float: left; } .pagenav, .commentnav { height: 25px; color: #000; font-size: 12px; font-weight: bold; line-height: 25px; padding: 0 5px 0 5px; margin-top: 5px; clear: both; } .pagenav-left, .commentnav-left { float: left; } .pagenav-right, .commentnav-right { float: right; } .nav a, .pagenav a, .nav-blog a { display: block; float: left; color: #000; } .nav a:hover, .pagenav a:hover, .nav-blog a:hover { color: #800; } /* POSTS - PAGES */ #pagewrap-right { width: 770px; float: left; overflow: hidden; padding: 0; margin: 0; } /* Wraps the content area */ #content-wrapper { margin: 0; padding: 0; } #content { float: left; overflow: hidden; } .narrowcolumn { width: 560px; margin: 0 auto; float: left; } .widecolumn { margin: 0 auto; } .column { margin: 0 5px 0 5px; padding: 5px 0; } .post, .post-comic, .post-page { clear: both; text-align: left; padding: 0 5px; } .post-head, .post-page-head, .post-comic-head { } .post-head, .post-page-head { padding:10px 0 0 0; } .post-foot, .post-comic-foot, .post-page-foot { } .post-foot { margin-bottom: 20px; } .post-info { margin-bottom: 5px; } .post-text { overflow: hidden; display: block; } .post-author-gravatar { float: right; margin-left: 2px; } .post-mood { float: left; margin-right: 2px; } .post-date { color: #777; font-family: 'Georgia' , serif; font-size: 15px; font-weight: bold; float: left; margin-right: 3px; } .post-date .date { height: 50px; width: 45px; background: url(images/calendar.png) center no-repeat; font: normal 22px Georgia; color: #000; text-align: center; line-height: 100%; padding: 0 2px 0 0; } .post-date .date span { height: 16px; display: block; font: normal 11px Verdana, Arial, Helvetica, sans-serif; color: #ffffff; text-align: center; padding-top: 5px; } .comicdate { font-size: 14px; } .postdate { font-size: 11px; } .entry { line-height: 1.45em; font-size: 13px; } .more-link { border-top: 1px dashed #000; font-style: italic; display: block; clear: both; } .tags { font-size: 11px; } .related_posts { margin-top: 10px; font-weight: 700; } .related_posts ul { list-style: none; font-weight: normal; font-size: 12px; } .members-only { border: solid 1px #000; background: #eee; padding: 3px; } /* COMMENT LINK */ .comment-link { height: 25px; line-height: 20px; font-family: 'Arial', sans-serif; font-weight: bold; text-align: right; } .comment-link a { color: #333; } .comment-link a:hover { color: #800; } .comment-balloon { width: 30px; height: 25px; display: block; margin: 0 0 0 5px; float: right; overflow: hidden; text-align: center; line-height: 16px; font-family: 'Georgia', serif; font-size: 16px; font-weight: normal; background: url('images/comment-balloon.png') no-repeat; } .comment-link a:hover .comment-balloon { color: #fff; background-position: 0 -25px; } .comment-balloon-empty { font-size: 20px; line-height: 30px; } /* THE BLOG HEADER */ #blogheader { font-family: 'Georgia' , serif; padding: 5px 0 5px 0; font-size: 32px; letter-spacing: -2px; border-top: 1px solid #999; margin-top: 10px; } /* COMMENTS */ .comment-wrap { padding: 0 20px; } .comment-wrap h3 { margin: 0; padding: 20px 0 0 0; font-weight: normal; font-size: 20px; clear: both; font-family: 'Georgia' , serif; } .commentlist { } .comment { padding: 2px; margin: 10px 0 0 0; clear: both; min-height: 64px; } .comment .comment { margin-left: 10px; padding-bottom: 10px; } .comment .comment .comment { margin-left: 30px; padding: 5px; margin-top: 2px; border: 1px dotted #ccc; } .comment .comment .comment .comment { background: transparent; border: none; } .comment .avatar { margin: 0 10px 5px 0; float: left; } .comment .trackping { float: left; } .comment #respond { padding: 5px; } .comment .comment .bypostauthor, .comment .comment .comment .bypostauthor { background: #efefef; } .comment-author { display: inline; } .comment-meta { display: inline; padding: 0 0 0 5px; margin: 0 0 0 2px; border-left: 1px solid #000; } .says { display: none; } .commentsrsslink { float: right; font-size: 11px; } #comment { width: 99%; font-size: 12px; font-family: 'Arial' , sans-serif; } #author, #email, #url { font-size: 12px; font-family: 'Arial' , sans-serif; } .commentlist ul { list-style: none; margin-bottom: 30px; } ol.commentlist { margin: 0; padding: 0; font-size: 11px; list-style: none; } ol.commentlist p { margin: 10px 0 0 74px; } ul.children { margin: 0; padding: 0; list-style: none; } .reply { padding: 10px 0 0 0; text-align: right; } /* ARCHIVE */ /* For the built-in WordPress archive pages (by month or category) as well as search result pages */ .comicarchiveframe { padding: 5px; border: 1px solid #000; background: #fff; margin-bottom: 20px; } .comicarchiveframe:hover { } .comicarchiveframe h3 { margin: 0; } .comicarchiveframe a small { display: block; color: #000; } .archive-year { font-size: 48px; } .archive-yearlist { padding: 0 0 10px 0; font-size: 14px; } /* SIDEBAR */ /* Left Sidebar Themes */ #sidebar-left { float: left; width: 210px; } /* Right Sidebar Themes */ #sidebar-right { float: right; width: 210px; } #sidebar-overcomic { padding: 20px 0 0 0; } .customsidebar ul, .customsidebar li { margin: 0; padding: 0; list-style: none; } /* Sidebar Class */ .sidebar { font-size: 11px; margin: 0 5px 0 5px; overflow: hidden; padding: 0 0 5px 0; } .sidebar h2, .sidebar h2 a { font-family:arial; font-size: 16px; } .sidebar .widget { margin-bottom: 10px; } .sidebar ul { margin: 0; padding: 0; list-style: none; } .sidebar ul li { margin: 0; padding: 0; text-align: left; list-style: none; } .sidebar ul li ul li { margin: 0 0 0 13px; padding: 0; text-align: left; } .sidebar li h2 { margin-top: 15px; } /* WIDGETS */ .widget { margin: 0 auto; } .widget_comicpress_comictitle { font-size: 36px; font-family: georgia; letter-spacing: -2px; text-align: center; } .random-comic-icon { padding: 0 5px; color: #fff; background: #000; } .comic-bookmark { width: 185px; margin: 0 auto; margin-bottom: 10px; } .archive-dropdown-wrap { background: url('images/browse-search.png') no-repeat; } .archive-dropdown-wrap:hover { background-position: 0 -23px; } .archive-dropdown { margin: 0; padding: 0; width: 166px; height: 23px; font-size: 12px; font-family: 'Arial' , sans-serif; border: none; opacity: 0; filter: alpha(opacity=0); cursor: pointer; } /* CALENDAR */ #wp-calendar-wrap { background:#fff; padding:10px; border:1px solid #999; margin:10px 0; } #wp-calendar { border: solid 1px #000; background: #efefef; width: 165px; margin: 0 auto; } .wp-calendar-thumb { width: 178px; height: 130px; margin: 0 auto; } #wp-calendar th { font-size: 10px; font-weight: normal; text-align: center; } #wp-calendar caption { font-family: 'Georgia' , sans-serif; font-size: 18px; letter-spacing: -1px; font-variant: small-caps; } #wp-calendar td { min-width: 20px; padding: 0; text-align: center; border: 1px solid #000; } #wp-calendar a { display: block; text-decoration: none; font-weight: bold; } #wp-calendar a:hover { color: #fff; background: #000; } table#wp-calendar { border:none; background: transparent; } table#wp-calendar td { border-color: #999; } .wp-calendar-download { width: 166px; margin: 0 auto; overflow: hidden; font-size: 10px; text-align: right; color: #777; background: #222; } .wp-calendar-download a { padding: 0 3px; font-weight: bold; color: #fff; background: #000; border-left: 1px solid #777; } .wp-calendar-download a:hover { background: #800; } /* SEARCH */ #s-search, #s-transcript { width: 138px; padding: 4px 0 0 5px; font-size: 12px; height: 19px; font-family: 'Arial' , sans-serif; color: #000; border: none; float: left; background: url('images/browse-search.png') 0 -46px no-repeat; } #s-search:hover, #s-search:focus, #s-transcript:hover, #s-transcript:focus { color: #550000; background-position: 0 -69px; } #searchform button, #searchform-transcript button { padding: 0; margin: 0; border: none; height: 23px; width: 23px; line-height: 0; font-size: 0; cursor: pointer; text-indent: -9999px; background: url('images/browse-search.png') -143px -46px no-repeat; } #searchform button:hover, #searchform-transcript button:hover { background-position: -143px -69px; } #searchform button:hover, #searchform-transcript button:-moz-focus-inner { border: 0; } .searchresults { float: right; padding: 5px; } /* GALLERY */ .gallery-image { width: 518px; border: 1px solid #000; overflow: hidden; background: #000; text-align: center; } .gallery-caption { font-size: 11px; } .gallery-caption p { width: 510px; padding: 5px; margin: 0; text-align: center; color: #fff; background: #000; } .imagenav-wrap { margin: 5px 0 0 0; } .imagenav { width: 77px; height: 77px; float: left; overflow: hidden; } .imagenav-center { width: 344px; height: 65px; margin: 0 5px; padding: 10px 5px 0 5px; float: left; color: #000; text-align: center; border: 1px solid #000; overflow: hidden; } .imagetitle { color: #000; font-size: 18px; } .imagenav-bg { width: 75px; height: 75px; position: absolute; z-index: 0; background: #ddd; border: 1px solid #000; overflow: hidden; } .imagenav-bg img { width: 75px; height: 75px; } .imagenav-arrow { width: 75px; height: 75px; position: absolute; z-index: 1; color: #fff; font-size: 80px; font-weight: bold; line-height: 75px; text-align: center; border: 1px solid #000; float: left; } .imagenav-link { width: 75px; height: 75px; position: absolute; z-index: 2; border: 1px solid #000; float: left; overflow: hidden; } .imagenav-link img { width: 75px; height: 75px; /* opacity: 0.50; filter: alpha(opacity=50); */ } .imagenav-link img:hover { /* opacity: 0.00; filter: alpha(opacity=0); */ } /* POSTED IMAGES */ .wp-caption p { margin: 5px 0; line-height: 11px; font-size: 11px; } .aligncenter { margin: 0 auto; display: block; } .alignright { margin: 10px 0 10px 10px; display: inline; float: right; } .alignleft { margin: 10px 10px 10px 0; display: inline; float: left; } /* TRANSCRIPT */ #transcript { padding: 0 10px; font-size: 11px; border-left: 4px dotted #333; border-right: 4px dotted #333; } .transcript-border { padding: 0 5px; margin: 15px 0; border: 1px solid #555; background: #fff; clear: both; } a.transcript-title { padding: 0 0 5px 0; margin: 0 0 5px 0; display: block; font-family: 'Georgia' , serif; font-style: italic; font-size: 12px; font-style: normal; font-weight: normal; text-transform: uppercase; letter-spacing: 1px; line-height: 2em; border-bottom: 1px dashed #777; } #transcript-content { font-family: 'Courier New' , monospace; overflow: hidden; } /* Pingbacks and Trackbacks */ li.pingback div p, li.trackback div p { margin-left: 0; } /* STORYLINES */ .storyline-cats { padding: 0; margin: 0; list-style: none; } .storyline-cats li { display: inline; } li.storyline-root { display: none; } /* CLEAR FLOATS */ .clear { clear: both; } /* CLEAR MARGINS */ /* Used with BR for clearing paragraph margins for Safari, Chrome - avoid background gaps */ .clear-margins { clear: both; height: 0; line-height: 0; font-size: 0; } /** BUY THIS **/ .buythis { padding: 0 5px 0 5px; } .buythisbutton { height: 27px; width: 240px; margin: 5px 0 5px 0; background: url('images/buythis.png') no-repeat; } /** Project Wonderful CSS Embedded areas **/ .blogpwad { text-align: center; width: 100%; } .headerpwad { float: right; margin: 5px 5px 0 0; } .footerpwad { display: block; width: 100%; text-align: center; } /* Archive Calendar Template */ .cpcal-image { height: 120px; width: 152px; } .cpcal-month { width: 157px; padding: 5px 0 5px 5px; margin: 0 8px 8px 0; float: left; border: 1px solid #999; background:#fff; } .cpcal-monthtitle { width: 154px; height: 16px; padding: 0 0 5px 0; text-align: center; font-family: 'Georgia' , serif; font-variant: small-caps; font-size: 16px; line-height: 16px; letter-spacing: -1px; } .cpcal-dayletter { width: 20px; height: 15px; margin: 0 2px 2px 0; display: block; float: left; text-align: center; font-size: 10px; line-height: 13px; } .cpcal-day { width: 18px; height: 13px; margin: 0 2px 2px 0; display: block; float: left; text-align: center; font-size: 10px; line-height: 13px; border: 1px solid #999; } .cpcal-day a { width: 18px; height: 13px; line-height: 13px; display: block; font-size: 12px; font-weight: bold; } .cpcal-day a:hover { color: #fff; background: #000; } /* Storyline Template */ #storyline, #storyline ul { padding: 0; margin: 0; list-style: none; } #storyline li { padding: 0; margin: 0; } #storyline li img { height: 50px; display: none; } #storyline li li img { display: block; float: right; padding: 0 0 0 10px; } #storyline ul ul { margin: 0 0 0 20px; } #storyline li li .storyline-title { font-size: 24px; font-weight: bold; display: block; color: #000; } #storyline li li .storyline-title:hover { color: #900; } #storyline li li li a.storyline-title { font-size: 18px; } #storyline li li li li a.storyline-title { font-size: 14px; } .storyline-description { font-size: 11px; } .storyline-foot { clear: both; margin: 0 0 10px 0; height: 10px; border-bottom: 4px solid #000; } #storyline li li .storyline-foot { border-bottom: 2px solid #000; } #storyline li li li .storyline-foot { border-bottom: 1px solid #000; } /* Archive Year Template */ .archive-date { padding: 0 5px 0 0; font-size: 11px; white-space: nowrap; } .archive-title { padding: 2px 5px; line-height: 11px; border-left: 1px solid #000; } .month-table { border-collapse: collapse; margin: 0 0 20px 0; } #linkspage, #linkspage ul, #linkspage li { list-style: none; } #linkspage h2 { margin-top: 20px; } /* Pagination */ #wp-paginav { background: url('images/menu.png'); text-align: left; border: 1px solid #999; } #paginav { padding: 0; margin: 0; list-style: none; float: left; line-height: 25px; font-size: 13px; border-right: 1px solid #aaa; } #paginav .paginav-pages, #paginav .paginav-extend { padding: 0 15px 0 15px; } #paginav a { padding: 0px 10px 0 10px; display: block; color: #000; text-decoration: none; } #paginav ul { margin: 0; padding: 0; list-style: none; } #paginav li { float: left; } #paginav li a { border-left: 1px solid #aaa; border-right: 1px solid #ccc; } #paginav .paginav-next, #paginav .paginav-previous { font-size: 20px; } #paginav .paginav-current, #paginav .current { padding: 0px 10px 0 10px; color: #fff; border-left: 1px solid #aaa; background: url('images/menu.png') 0 -150px; } #paginav li:hover a { border-left: 1px solid #8b160f; border-right: 1px solid #c28380; color: #fff; background: url('images/menu.png') 0 -75px; } /* Tool Tips */ .tt a { position: relative; z-index: 1000; color: #3CA3FF; font-weight: bold; text-decoration: none; margin-bottom: -110px; } a.tt span { display: none; } a.tt:hover span.tooltip { position: absolute; display: block; width: 200px; color: #000; margin: 0 auto; text-align: center; height: 164px; background: url('images/comicpress-rascal.png') no-repeat; z-index: 1000; } a.tt:hover span.top { display: block; width: 200px; height: 35px; padding-top: 10px 10px 0 10px; margin-top: 59px; margin-left: 25px; background: url('images/bubble.png') 0 0 no-repeat; z-index: 1000; } a.tt:hover span.middle { /* different middle bg for stretch */ display: block; width: 180px; margin-left: 25px; padding: 0 10px; background: url('images/bubble.png') -200px 0 repeat-y; z-index: 1000; } a.tt:hover span.bottom { display: block; width: 200px; height: 15px; background-position: -100px; color: #548912; margin-left: 25px; background: url('images/bubble.png') 0 -35px no-repeat; z-index: 1000; } /* User Pages */ #userpage { width: 100%; padding: 5px; } .userpage-avatar { float: left; width: 64px; height: 64px; } .userpage-info { margin-left: 10px; float: left; } .userpage-desc { width: 400px; padding: 5px; margin-top: 30px; border: 1px dotted #efefef; } .userpage-posts { margin-top: 20px; } .userpage-posts ol { margin: 10px 0 0 30px; padding: 0; } .userpage-posts li { list-style: none; margin: 0; padding: 0; }