/* Theme Name: Darkin Ensemble Theme URI: http://www.darkinensemble.com Description: Default theme for Darkin Ensemble's website Version: 1.0 Author: Mike Hatcher (Based on them by MTS von webdesign-in.de und texto.de) Author URI: http://www.bulletcreative.com */ /* ****************************************************************** GLOBAL RESET - ALL MEDIA TYPES Removes default styling on all elements in all browsers, thus making initial layout and styling consistent across all browsers ****************************************************************** */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, sub, sup, samp, small, strike, strong, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } address, cite { font-style: normal; } /* remember to define focus styles! */ :focus { outline: 0; } /* remember to highlight inserts somehow! */ ins { text-decoration: none; } del { text-decoration: line-through; } /* tables still need 'cellspacing="0"' in the markup */ table { border-collapse: collapse; border-spacing: 0; } a { text-decoration: none; } @media screen, projection, tv { /* ****************************************************************** MAIN STRUCTURE & STYLING - screen, projection, tv CSS below creates structure & styling of entire website ****************************************************************** */ /* ~~~~~~~~~~~~ BODY ~~~~~~~~~~~~ */ html, body, #background, #noflashback { height: 100%; } body { background: #fff; font: 62.5%/1.25 Arial, Helvetica, sans-serif; color: #808285; } /* ~~~~~~~~~~~~ IE 6 WARNING MESSAGE ~~~~~~~~~~~~ */ #ie6-msg { background: #000; color: #fff; font-size: 1.1em; padding: 5px; position: relative; z-index: 2; } /* ~~~~~~~~~~~~ HIDDEN ELEMENTS ~~~~~~~~~~~~ */ #skip-links, /* Skip Links (Accessibility) */ #logo span, /* Logo link text */ #nav h21, /* Nav level 1 link */ #nav h31, /* Nav level 2 link */ #nav h41 /* Nav level 3 link */ { position: absolute; margin-left: -9000em; top: -9000em; } /* ~~~~~~~~~~~~ WRAPPERS ~~~~~~~~~~~~ */ #wrapper { position: absolute; top: 0; left: 0; z-index: 2; width: 100%; } /* ~~~~~~~~~~~~ PARAGRAPHS, ADDRESSES & LISTS ~~~~~~~~~~~~ */ p, address, ol, ul { font-size: 1.3em; margin: 0 0 1.5em; } ol ol, ul ul, ol ul, ul ol, ol p, ul p { font-size: 1em; } /* ~~~~~~~~~~~~ HEADER ~~~~~~~~~~~~ */ #header { background: #fff; float: left; width: 100%; min-height: 12.2em; } /* ~~~~~~~~~~~~ LOGO ~~~~~~~~~~~~ */ /* plain ol' html version */ div#logo { float: right; width: 610px; min-height: 12.2em; background: #fff; } div#logo a { display: block; float: left; width: 578px; height: 12.2em; background: #fff url(images/logo.jpg) no-repeat left bottom; } /* flash logo */ object#logo { float: right; width: 610px; margin: 5em 0 0; background: #fff; } /* ~~~~~~~~~~~~ NAVIGATION ~~~~~~~~~~~~ */ #nav { background: #fff; float: left; margin: 1.3em 0 0 48px; } #nav div { float: left; } /* Level 1 */ #nav ul { width: 95px; margin: 0; } #nav a { color: #808285; } #nav .current_page_item a, #nav .current_page_parent a, #nav a:hover { background: #eb0088; color: #fff; } /* Level 2 */ /* hide children by default */ #nav li ul { position: absolute; left: -9000em; top: -9000em; } /* make children visible when their parent is "on" */ #nav .current_page_item ul, /* make children visible when one of them is "on" */ #nav .current_page_ancestor ul { position: absolute; left: 165px; top: 1em; font-size: 1em; } /* make chidren not appear selected when parent is "on" */ #nav .current_page_item ul a, /* make children not appear selected when one of them is "on" */ #nav .current_page_ancestor ul a { background: none; color: #808285; } /* make children of "on" parent have a link hover state */ #nav .current_page_item ul a:hover, /* make selected child link "on" */ #nav .current_page_ancestor .current_page_item a, /* make children links have hover state */ #nav .current_page_ancestor ul a:hover { background: #eb0088; color: #fff; } /* Level 3 */ /* hide children by default */ #nav .current_page_ancestor ul ul, #nav .current_page_item ul ul { position: absolute; left: -9000em; top: -9000em; } /* show "on" parent's children */ #nav .current_page_ancestor .current_page_item ul, /* make children visible when one of them is "on" */ #nav .current_page_ancestor .current_page_ancestor ul { position: absolute; left: 117px; top: 0; font-size: 1em; } /* make children not appear selected */ #nav .current_page_ancestor .current_page_item ul a, /* make 3rd level not appear "on" */ #nav .current_page_ancestor .current_page_ancestor ul a { background: none; color: #808285; } /* make children links have hover state */ #nav .current_page_ancestor .current_page_item ul a:hover, /* make level 1 parent "on" */ #nav .current_page_ancestor a, /* make 2nd level parent "on" */ #nav .current_page_ancestor .current_page_ancestor a, /* make 3rd level link "on" */ #nav .current_page_ancestor .current_page_ancestor .current_page_item a, #nav .current_page_ancestor .current_page_ancestor ul a:hover { background: #eb0088; color: #fff; } /* ~~~~~~~~~~~~ WRAPPER CONTENT ~~~~~~~~~~~~ */ #content-wrapper { clear: left; float: left; width: 100%; } /* ~~~~~~~~~~~~ CONTENT MAIN ~~~~~~~~~~~~ */ #content-main { background: #fff; margin: 16px 0 0 32px; width: 338px; padding: 16px; position: relative; } /* ~~~~~~~~~~~~ CLOSE BUTTON ~~~~~~~~~~~~ */ /* added using javascript */ #close { position: absolute; right: 10px; top: 10px; cursor: pointer; } /* ~~~~~~~~~~~~ HEADINGS ~~~~~~~~~~~~ */ #content-main h2 { color: #eb0088; margin: 0 0 2em; font-size: 1.3em; } #content-main h3 { font-size: 1.3em; } /* ~~~~~~~~~~~~ LINKS ~~~~~~~~~~~~ */ #content-main a { color: #808285; } #content-main a:hover { color: #000; } /* ~~~~~~~~~~~~ PAGES ~~~~~~~~~~~~ */ .page { } /* ~~~~~~~~~~~~ POSTS ~~~~~~~~~~~~ */ .post { } /* Post Metadata */ #content-main .post-meta { font-size: 1em; color: #888; } /* Comments */ #comments { } /* Comment List */ #content-main .commentlist { float: left; width: 100%; } #content-main .commentlist li { } #content-main .comment-body { } .comment-author { width: 50px; float: left; } .comment-author img { } .comment-author cite { display: block; } .comment-copy { float: left; } .commentmetadata { font-size: 0.8em; color: #888; } #content-main .commentlist ul { font-size: 1em; } /* Comments Form */ #respond textarea { font: 1em Arial, Helvetica, sans-serif; width: 320px; color: #808285; } /* Pagination */ .pagination { } .pagination li { } /* ~~~~~~~~~~~~ FOOTER ~~~~~~~~~~~~ */ #footer { } /* ~~~~~~~~~~~~ BACKGROUNDS ~~~~~~~~~~~~ */ #background { position: absolute; top: 0; left: 0; z-index: 1; width: 100%; background: #f4f4f4; } /* ****************************************************************** TEMPLATES - screen, projection, tv CSS below creates structure & styling of entire website ****************************************************************** */ /* ~~~~~~~~~~~~ HOME ~~~~~~~~~~~~ */ .home #content-main { display: none; } /* end of styles for screen, projection & tv media types */ }