/** CSS by Steve Smith (steve@orderedlist.com) Feel free to browse this, but don't copy it completely. That's uncool. */ /** * __Colors__ * Body Background: 171B20 * Body Top Stripe: 0D0F10 * Dark Grey Section: 121519 * Body Font: CCC * Blue Links: 09F * Link Hover: 3CF * Headline Green: 96BF55 * Background Green: 83A94A * Section Grey: 1D2128 * Light Yellow: FF9 * Dark Green Links: 33421D * Dark Green Hover: 1A210E */ @media screen, projection { /** * Copyright (c) 2006, Yahoo! Inc. All rights reserved. * Code licensed under the BSD License: * http://developer.yahoo.net/yui/license.txt * read more here: http://developer.yahoo.com/yui/fonts/ * version: 0.11.0 */ body {font:13px arial,helvetica,clean,sans-serif;*font-size:72%;*font:x-small;} table {font-size:inherit;font:100%;} select, input, textarea {font:99% arial,helvetica,clean,sans-serif;} pre, code {font:115% monospace;*font-size:100%;} /** end Yahoo Fonts */ /** * Redeclarations */ :link,:visited {text-decoration:none;} ul,ol,li,h1,h2,h3,h4,h5,h6,pre, form,body,html,p,blockquote, fieldset,input {margin:0; padding:0} body {font-family:"Lucida Grande",Tahoma,"Lucida Sans Unicode",Verdana,sans-serif; line-height:1.6; background:#171B20; border-top:20px solid #0D0F10; padding:0 20px; text-shadow:black 0 0 0; color:#AAA;} a {color:#09F;} a:hover {color:#3CF;} a img {border:none;} h1,h2,h3,h4,h5,h6 {text-transform:uppercase;} h1 a, h3 a {color:#96BF55;} h1 a:hover, h3 a:hover {color:#CCC} h1 {font-size:222%; color:#96BF55; margin:0 0 15px;} h2 {font-size:152%; padding:0 0 10px; background:#1D2128; font-weight:normal; color:#FFF;} h3 {font-size:122%; color:#96BF55;} h4 {font-size:100%; color:#FFF;} ul, ol {margin:0 0 1.6em 8px;} ol {margin-left:35px;} ul ul, ol ol {margin:0 0 5px 8px;} ul {list-style-type:none;} ul li {margin:0 0 0 5px; padding:0 0 0 20px; background:url(../images/bullet.gif) no-repeat 3px 9px;} strong {font-weight:bold; color:#FF9;} img {background:#FFF; padding:5px;} code {background:#171B20; padding:1px 2px; font-size:92%; color:#EEE; font-family:Monaco, "Courier New", Courier, mono;} blockquote {background:#171B20; padding:20px; margin:0 0 1.6em; font-style:italic;} pre {font-size:86%; width:100%; overflow:auto;} /** * Layout */ #wrapper {width:800px; margin:0 auto;} #header {height:100px; position:relative;} #feature .post {width:490px; float:left;} #feature .link {width:195px; display:inline; margin:0 10px 0 0; float:right;} #footer {clear:both; font-size:93%; float:none;} #footer .wrapper {float:none;} /** * Header Styles */ #header h1 {width:300px; height:100px; text-indent:-9999px; position:relative; background:url(../images/logo.gif) no-repeat;} #header h1 a {display:block; position:absolute; top:0; left:0; height:100px; width:300px; overflow:hidden;} #header ul {width:544px; height:30px; top:35px; right:0; list-style-type:none; background:url(../images/nav.gif) no-repeat; position:absolute;} #header li {float:left;} #header ul a {position:absolute; height:30px; top:0; text-indent:-9999px; overflow:hidden; background:url(../images/nav.gif) no-repeat top left;} #header #hom a {width:53px; left:0; background-position:0 0;} #header #art a {width:73px; left:53px; background-position:-53px 0;} #header #por a {width:87px; left:126px; background-position:-126px 0;} #header #ser a {width:75px; left:213px; background-position:-213px 0;} #header #dow a {width:96px; left:288px; background-position:-288px 0;} #header #abo a {width:83px; left:384px; background-position:-384px 0;} #header #con a {width:77px; left:467px; background-position:-467px 0;} #header #hom a:hover {background-position:0 -30px;} #header #art a:hover {background-position:-53px -30px;} #header #por a:hover {background-position:-126px -30px;} #header #ser a:hover {background-position:-213px -30px;} #header #dow a:hover {background-position:-288px -30px;} #header #abo a:hover {background-position:-384px -30px;} #header #con a:hover {background-position:-467px -30px;} #body_hom #header #hom a {background-position:0 -60px;} #body_art #header #art a {background-position:-53px -60px;} #body_por #header #por a {background-position:-126px -60px;} #body_ser #header #ser a {background-position:-213px -60px;} #body_dow #header #dow a {background-position:-288px -60px;} #body_abo #header #abo a {background-position:-384px -60px;} #body_con #header #con a {background-position:-467px -60px;} /** * Sections */ .notice {margin:0 0 35px; background:#FF9 url(../images/notice_top.gif) no-repeat; float:left; width:800px;} .notice div {background:url(../images/notice_bottom.gif) no-repeat bottom left; float:left; padding:5px 10px; color:#171B20; width:780px;} .notice div strong {color:#171B20;} .notice a {color:#06C;} .notice a:hover {color:#39F;} .section {margin:0 0 35px; background:#1D2128 url(../images/section_top.gif) no-repeat; float:left; clear:both; width:800px;} .section .wrapper {padding:20px 30px; width:740px; background:url(../images/section_bottom.gif) no-repeat bottom left; float:left; clear:left;} .nugget {background:#121519 url(../images/section_nugget_top.gif) no-repeat;} .nugget .wrapper {padding:5px 10px; width:780px; background-image:url(../images/section_nugget_bottom.gif);} /** * Portfolio Preview Area */ #portfolio_preview {height:110px; margin:0 0 35px; padding:0 0 0 20px; position:relative; clear:both;} #portfolio_preview h2, #portfolio_preview h2 a {position:absolute; top:0; left:0; width:20px; height:110px; text-indent:-9999px; overflow:hidden; background:url(../images/sidebar_portfolio.gif) no-repeat;} #portfolio_preview h2 a:hover {background-position:-20px 0;} #portfolio_preview ul {list-style-type:none; margin:0; padding:0;} #portfolio_preview li {float:left; margin:0 0 0 20px; display:inline; padding:0;} #portfolio_preview img {padding:0;} /** * Plug Area */ #plug {height:45px; margin:0 0 35px; padding:0 0 0 20px; position:relative; clear:both; background:url(../images/sidebar_plug.gif) no-repeat;} #plug ul {list-style-type:none; margin:0; padding:0;} #plug li {float:left; margin:0 0 0 20px; display:inline; padding:0;} #plug img {padding:0;} #plug img.sidebar {margin:-5px 0;} /** * Posts */ body .post h2 {font-size:165%; font-weight:normal; text-transform:uppercase; margin:0 0 20px; line-height:1em;} .post {font-size:120%; margin:0 0 -1.6em;} .post h2 a {color:#FFF; text-shadow: #000 0 0 3px;} .post h2 a:hover {color:#FF9;} .post p {margin:0 0 1.6em;} .post .meta a {padding:3px 0 3px 20px; margin:0 20px 0 0;} .post .date {font-size:70%; color:#999; margin:-30px 0 20px;} .post .meta {font-size:82%; margin:20px 0 1.6em;} .post .permalink {background:url(../images/icon_book.gif) no-repeat 0 50%;} .post .comments {background:url(../images/icon_comments.gif) no-repeat 0 50%;} .post .subscribe {background:url(../images/icon_subscribe.gif) no-repeat 0 50%;} .post img {float:right; margin:0 0 15px 20px; border:5px solid #121519;} .post img.button {padding:0; border:none; background:none;} .post h3 {font-weight:normal;} .post p.photo {background:#121519; text-align:center; padding:20px;} .post p.photo img {float:none; margin:0;} .post p.advertisement {text-align:center;} /** * Homepage Feature Section */ #feature {background:#1D2128 url(../images/feature_bg.gif) repeat-y; float:left; margin:0 0 35px;} #feature .section {background-color:transparent; background-image:url(../images/feature_top.gif); margin:0;} #feature .wrapper {background-image:url(../images/feature_bottom.gif);} #feature .link {color:#FFF;} #feature .link a {color:#33421D;} #feature .link a:hover {color:#1A210E;} #feature .link p {margin:0 0 5px;} #feature .link h3 {color:#171B20; font-size:150%; margin:0 0 5px;} #feature .link img {margin:0 0 5px;} #feature .link .download {padding:3px 0 3px 20px; background:url(../images/feature_download.gif) no-repeat 0 50%;} /** * Extras Section, with Archives also */ #extras, #archives {clear:both; font-size:93%; background:#1D2128 url(../images/section_top.gif) no-repeat; float:left; margin:0 0 35px;} #extras h3, #archives h3 {font-size:160%; margin:0 0 10px; font-weight:normal;} #extras .section, #archives .section {background:transparent url(../images/section_bottom.gif) no-repeat bottom left; margin:0; padding:20px 0;} #extras .wrapper, #archives .wrapper {background:url(../images/extras_bg.gif) repeat-y; padding:0 30px;} #extras .wrapper div, #archives .wrapper div {float:left; display:inline; margin:0 60px 0 0;} #extras .wrapper div#photos {width:210px; margin:0 40px 0 0;} #photos p {padding:0 20px 0 0;} #by_date {width:190px;} #recent {width:240px;} #extras #links, #archives #tags {width:190px; margin:0;} #extras ul, #archives ul {list-style-type:none; margin:0; padding:0;} #extras li, #archives li {margin:0 0 8px 5px; padding:0 0 0 20px; background-position:0 1px; background-repeat:no-repeat;} #extras span, #archives span {display:block;} #by_date li {background-image:url(../images/icon_pages.gif);} #tags li {background-image:url(../images/icon_tag.gif);} #recent li {background-image:url(../images/icon_post.gif);} #recent li {background-image:url(../images/icon_post.gif);} #recent form {margin:5px 0 10px;} #recent form input {vertical-align:middle;} #recent #q {width:175px;} #recent p, #photos p {margin:10px 0 0; clear:both;} #extras #photos ul {margin:0 -20px 0 0;} #photos li {margin:0 20px 20px 0; padding:0; float:left;} #photos a.photo {padding:3px 0 3px 20px; background:url(../images/icon_photo.gif) no-repeat 0 50%;} #links li {background-image:url(../images/icon_link.gif);} #links li.more {background-image:url(../images/icon_add.gif); background-position:0 2px;} /** * Portfolio */ img.screenshot {float:left; padding:0; margin:-20px 30px 0 -30px; height:300px;} #body_por h3 {color:#96BF55; margin:0 0 10px;} #body_por h4, #body_por p {margin:0 0 10px;} .portfolio_entry .wrapper {padding-bottom:0;} /** * Downloads Section */ #plugins {background:#1D2128 url(../images/section_top.gif) no-repeat; float:left; margin:0 0 35px;} #plugins .section {background:transparent url(../images/section_bottom.gif) no-repeat bottom left; margin:0; padding:20px 0;} #plugins .wrapper {background:url(../images/extras_bg.gif) repeat-y; padding:0 30px;} #plugins .wrapper div {float:left; display:inline; margin:0 60px 0 0;} #download1 {width:190px;} #download2 {width:240px;} #plugins .wrapper #download3 {width:190px; margin:0;} #plugins p {margin:0 0 1em;} #plugins p.download {margin-bottom:0;} #plugins p.download a, a.download {padding:1px 0 1px 20px; background:url(../images/icon_download.gif) no-repeat 0 50%;} .backgrounds .wrapper {padding-right:5px; padding-left:35px; padding-bottom:1px; width:770px;} .backgrounds h2 {width:700px;} .background {float:left; margin:0 30px 20px 0; width:160px; text-align:center;} .background span {float:left; vertical-align:middle; line-height:23px; margin-right:5px; display:inline; font-size:86%;} .background a {vertical-align:middle; display:inline; float:left; text-decoration:none; text-indent:-9000px; overflow:hidden; margin:0 5px 0 0;} .background a.large {width:26px; height:23px; background:url(../images/bg_16x12.gif) no-repeat;} .background a.large:hover {background-position:0 -23px;} .background a.wide {width:26px; height:19px; background:url(../images/bg_12x8.gif) no-repeat;} .background a.wide:hover {background-position:0 -19px;} .background a.small {width:19px; height:17px; background:url(../images/bg_10x7.gif) no-repeat; margin:0;} .background a.small:hover {background-position:0 -17px;} #text-link-ads {padding:10px 3%; background:#171B20; list-style-type:none; margin:0 0 15px; width:94%; float:left;} #text-link-ads li {float:left; width:23%; margin:0 2% 0 0; background:none; padding:0;} /** * External Links */ #externals {background:#1D2128 url(../images/section_top.gif) no-repeat; float:left; margin:0 0 35px;} #externals .section {background:transparent url(../images/section_bottom.gif) no-repeat bottom left; margin:0; padding:20px 0;} #externals .wrapper {background:url(../images/extras_bg.gif) repeat-y; padding:0 30px;} #externals .wrapper div {float:left; display:inline; margin:0 60px 0 0;} #friends1 {width:190px;} #friends2 {width:240px;} #externals .wrapper #friends3 {width:190px; margin:0;} #extras ul, #externals ul {list-style-type:none; margin:0; padding:0;} #externals li {margin:0 0 8px 5px; padding:0 0 0 20px; background:url(../images/icon_link.gif) no-repeat 0 1px;} /** * Comments */ #commentlist {float:left; width:100%; margin:-35px 0 0; padding:0 0 35px; list-style-type:none;} #commentlist li {float:left; width:100%; clear:left; background:#1D2128 url(../images/section_bottom.gif) no-repeat bottom left; margin:35px 0 0; padding:0;} #commentlist li.untouched {display:none;} #commentlist .meta {width:200px; font-size:86%; float:left; padding:25px 30px 20px; background:url(../images/section_top.gif) no-repeat; margin:0 0 1em;} #commentlist .meta a {color:#FFF;} #commentlist .meta a:hover {color:#FF9;} #commentlist .meta cite {text-transform:uppercase; font-size:110%; font-style:normal; font-weight:bold;} #commentlist .date {position:relative;} #commentlist .comment {width:490px; overflow:hidden; padding:20px 30px 20px 0; float:right; font-size:110%; background:url(../images/section_top.gif) no-repeat top right; margin:0 0 -1em;} #commentlist .meta img {float:left; margin:-5px 10px 0 0; border:5px solid #171B20; width:30px; height:30px; overflow:hidden;} #commentlist .comment p {margin:0 0 1em;} #commentlist li.author {background:#83A94A url(../images/section_author_bottom.gif) no-repeat bottom left; color:#171B20;} #commentlist li.author .meta, #commentlist li.author .comment {background-image:url(../images/section_author_top.gif);} #commentlist li.author strong {color:#FFF;} #commentlist li.author blockquote {background:#799D43;} #commentlist li.author .comment a {color:#FF9;} #commentlist li.author .comment a:hover {color:#FFF;} #commentlist ul, #commentlist ol {margin:0 0 1.6em 8px;} #commentlist ol {margin-left:35px;} #commentlist ul {list-style-type:none;} #commentlist ul li {margin:0 0 0 5px; float:none; padding:0 0 0 20px; background:url(../images/bullet.gif) no-repeat 3px 9px;} #make_a_comment {width:800px; overflow:hidden;} #make_a_comment p {width:232px; float:left; margin:0 20px 10px 0; display:inline; } #make_a_comment p.website {margin:0 0 10px;} #maka_a_comment p.commentbox {width:738px;} #make_a_comment p.submit {width:99%;} #make_a_comment label {display:block;} #make_a_comment p.commentbox label {width:738px;} #make_a_comment input, #make_a_comment textarea {font-family:"Lucida Grande",Tahoma,"Lucida Sans Unicode",Verdana,sans-serif; width:100%;} #make_a_comment textarea {width:738px; font-size:115%;} #make_a_comment p.submit input {width:auto;} #make_a_comment span {color:#999; font-size:86%;} }