/* THEME NAME: CHED09 THEME URI: http://www.plaintxt.org/themes/sandbox/ DESCRIPTION: My new website. VERSION: 9 AUTHOR: Ched. WHo else? AUTHOR URI: */ /* Get busy y'all */ @import url('styles/reset.css'); @import url('styles/960.css'); @import url('styles/typography.css'); @import url('styles/miscellaneous.css'); @import url('styles/slider.css'); @import url('styles/colorbox.css'); /*@import url('styles/thickbox.css');*/ body {background:url('images/bodyBG.jpg') repeat-y center top; color:#EEE;} a {color:#FFF} a:hover {color:#0FF} h1, h2, h3 {font-weight:bold;} h2.section-title {width:940px; margin:0 10px; padding-bottom:20px; color:#EEEEEE; font-size:24px;} h4.section-title {font-size:11px; width:930px; font-weight:bold} p.subtext {font-size:11px} /*===================================================================================================================================== HEADER =====================================================================================================================================*/ #header {width:940px; height:70px; position:relative; margin:0 auto} #header a#home-btn {position:absolute; top:20px} #header ul#navigation {position:absolute; top:20px; right:0; margin:0; padding:0; list-style-type:none} #header ul#navigation li {float:left; padding-left:20px; font-size:11px} #header ul#navigation li a {text-decoration:none} #header ul#navigation li a span {font-size:18px; font-weight:bold; text-transform:uppercase; text-decoration:none} /*===================================================================================================================================== HOME =====================================================================================================================================*/ #welcome {position:relative; width:940px; height:320px; margin:0 auto;} #welcome a {color:#FFFFCC;} #welcome a:hover {color:#FF0;} #welcome #welcome-text {position:absolute; top:26px; width:640px;} #welcome #welcome-text p {color:#EEE; margin-bottom:0px;} #welcome #welcome-text p.hello {font-size:36px; line-height:45px; font-weight:bold} #welcome #welcome-text p.i-am {font-size:33px; line-height:36px; font-weight:normal} #welcome p.call-to-action {position:absolute; bottom:25px; font-weight:normal} #welcome p.call-to-action span {margin:0 10px; font-size:12px; } #welcome img.gorilla {position:absolute; top:20px; left:600px} #portfolio-front-page {} #portfolio-front-page p {font-size:14px} #portfolio-front-page .image-container {position:relative} #portfolio-front-page .image-container a {display:block} #portfolio-front-page .image-container h3 {position:absolute;bottom:20px; font-size:14px; color:#0FF; background-color:#000} #portfolio-front-page .image-container h3 a {padding:10px} #blog-front-page {} #blog-front-page p {font-size:14px} #blog-front-page .image-container {position:relative} #blog-front-page .image-container a {display:block} #blog-front-page .image-container h3 {position:absolute;bottom:20px; font-size:14px; color:#0FF; background-color:#000} #blog-front-page .image-container h3 a {padding:10px} #crooked-pixels-front-page {} #crooked-pixels-front-page p {font-size:14px} #crooked-pixels-front-page .image-container {position:relative; margin-bottom:5px} #crooked-pixels-front-page .image-container a {display:block} #crooked-pixels-front-page .image-container h3 {position:absolute;bottom:20px; font-size:14px; color:#0FF; background-color:#000} #crooked-pixels-front-page .image-container h3 a {padding:10px} /*===================================================================================================================================== PORTFOLIO =====================================================================================================================================*/ #portfolio-intro {position:relative; width:940px; height:290px; margin:0 auto;} #portfolio-intro #portfolio-intro-text {position:absolute; top:26px; width:640px;} #portfolio-intro #portfolio-intro-text h1 {font-size:36px; line-height:40px; font-weight:bold; margin-bottom:5px} #portfolio-intro #portfolio-intro-text p {font-size:33px; line-height:36px; font-weight:normal} #portfolio-intro #shoebox {position:absolute; width:540px; height:310px; top:20px; right:-30px;} #schoolwork ul li img {padding:7px; background:#000;} /*===================================================================================================================================== ABOUT =====================================================================================================================================*/ #about-intro {position:relative; width:940px; height:290px; margin:0 auto;} #about-intro #about-intro-text {position:absolute; top:26px; width:640px;} #about-intro #about-intro-text h1 {font-size:36px; line-height:40px; font-weight:bold; color:#FFF; margin-bottom:10px} #about-intro #about-intro-text p {font-size:33px; line-height:36px; font-weight:normal} #about-intro #paperdoll {position:absolute; width:245px; height:300px; top:0px; right:80px;} #schoolwork ul li img {padding:7px; background:#000;} /*SERVICES*/ #services h3 {font-size:18px; margin:12px 0; color:#FFF} #services p {font-size:16px; line-height:22px; margin:0} /*APPROACH*/ #approach h4 {font-size:28px; margin:0 0 16px 0; color:#FFF; font-weight:normal} .testimonial {position:relative; background:url(images/testimonial-maggie.jpg) no-repeat top center; width:300px; height:230px} .testimonial p.text {position:absolute; top:20px; left:20px; width:150px; font-size:16px; line-height:21px; font-family:Georgia, "Times New Roman", Times, serif; font-style:italic; color:#333} .testimonial p.client {position:absolute; margin:0; bottom:15px; left:20px; font-size:10px; line-height:11px} .testimonial p.client span {font-size:18px; line-height:18px; font-weight:bold; margin-bottom:3px} #approach #what-do-you-think {background-color:#000; color:#FFF; padding:20px 0; margin-top:10px} #approach #what-do-you-think h3 {font-size:32px; line-height:40px; padding:0 0 0 20px} #approach #what-do-you-think .grid_3 span.number {display:block; float:left; width:28px; height:28px; margin:20px 10px 0 0; line-height:28px; text-align:center; background:url(images/small-circle.gif) top center} * html #approach #what-do-you-think .grid_3 span.number {margin:10px 5px 0 0} #approach #what-do-you-think .grid_3 p {float:left; width:170px; margin:20px 0 0 0;font-size:14px} #approach #what-do-you-think .grid_3 p a {color:#F0F; text-decoration:none} #approach #what-do-you-think .grid_3 p a:hover {text-decoration:underline} /*===================================================================================================================================== BLOG =====================================================================================================================================*/ h1#blog-title {} /*Box*/ .content-matrix .box {float:left; position:relative; overflow:hidden; width:138px; height:160px; margin:10px 5px 0 5px; padding:5px;} * html .content-matrix .box {width:141px; height:232px; margin:4px; padding:4px} /*#sidebar .content-matrix .box {margin:10px 10px 0 0px}*/ /*Picture*/ .content-matrix .post-thumb_container {overflow:hidden; height:78px; border:1px solid #666666; background:url('images/nopicture.jpg') no-repeat 50% 50%} .content-matrix .post-thumb_container .post-thumb {overflow:hidden; width:138px; border:none;} * html .content-matrix .post-thumb_container .post-thumb {height:93px;} .content-matrix .post-thumb_text {font-size:9px; border-top:1px dotted #CCC} /*Box Meta*/ .content-matrix h3.entry-title {font-size:13px; color:#CCCCCC} .content-matrix .rating-stars {width:75%; font-size:0; color:#333333; margin-top:3px} .content-matrix .post-meta {position:absolute; height:16px; font-size:9px; bottom:5px;} /*.content-matrix .comments-link {font-size:10px} .content-matrix .entry-time {font-size:10px; margin:0 0 10px 0}*/ /*content-matrix flags*/ .content-matrix .design {background:url('images/flag-sprite.png') no-repeat 100% -330px} .content-matrix .funny {background:url('images/flag-sprite.png') no-repeat 100% -830px} .content-matrix .music {background:url('images/flag-sprite.png') no-repeat 100% -1330px} .content-matrix .misc {background:url('images/flag-sprite.png') no-repeat 100% -1830px} .content-matrix .style {background:url('images/flag-sprite.png') no-repeat 100% -2330px} .content-matrix .tech {background:url('images/flag-sprite.png') no-repeat right bottom} /*FEATURED VIDEO*/ #featured-video .box {height:350px} #featured-video .design {background:url('images/flag-sprite.png') no-repeat 100% -150px} #featured-video .funny {background:url('images/flag-sprite.png') no-repeat 100% -650px} #featured-video .music {background:url('images/flag-sprite.png') no-repeat 100% -1150px} #featured-video .misc {background:url('images/flag-sprite.png') no-repeat 100% -1650px} #featured-video .style {background:url('images/flag-sprite.png') no-repeat 100% -2150px} #featured-video .tech {background:url('images/flag-sprite.png') no-repeat right bottom} #featured-video a.post-thumb-link {display:block; height:220px} #featured-video a.post-thumb-link img.post-thumb {margin:5px;padding:4px; border:1px solid #CCC; background-color:#999} #featured-video .post-title {margin:20px 0 0 5px;} #featured-video .post-title a {font-size:28px; color: #FFF; text-shadow: -1px -1px 0px #FFFFFF, 1px 1px #333333;} /*SECONDARY*/ #blog-secondary {background-color:#000000; height:350px} #blog-secondary h3 {font-size:16px;} #blog-secondary .subscribe-by-email {padding:10px; margin-bottom:20px} #blog-secondary .subscribe-by-email p {font-size:11px} #blog-secondary .subscribe-by-rss {padding:10px} #blog-secondary .tag-list {padding:10px} /*POPULAR VIDEO*/ .popular-video {margin-bottom:20px} .popular-video .box {height:250px} .popular-video .design {background:url('images/flag-sprite.png') no-repeat 100% -250px} .popular-video .funny {background:url('images/flag-sprite.png') no-repeat 100% -750px} .popular-video .music {background:url('images/flag-sprite.png') no-repeat 100% -1250px} .popular-video .misc {background:url('images/flag-sprite.png') no-repeat 100% -1750px} .popular-video .style {background:url('images/flag-sprite.png') no-repeat 100% -2250px} .popular-video .tech {background:url('images/flag-sprite.png') no-repeat right bottom} .popular-video a.post-thumb-link {display:block; height:120px} .popular-video a.post-thumb-link img.post-thumb {margin:5px;padding:4px; border:1px solid #CCC; background-color:#999} .popular-video .post-title {margin:20px 5px 5px 5px;} .popular-video .post-title a {font-size:16px; line-height:20px} .popular-video .post-content-rss {margin:0 5px;} /*ARTICLE LIST*/ ul.article-list {list-style-type:none; margin:0 auto} * html ul.article-list {padding:0} ul.article-list li.box {position:relative; width:100px; height:160px; margin-bottom:20px} * html ul.article-list li.box {} ul.article-list li.box h3.post-title {margin:0 5px} ul.article-list li.box h3.post-title a {display:block; font-size:11px; line-height:13px; font-weight:normal; color:#EEE; text-decoration:none} ul.article-list li.box h3.post-title a:hover {color:#FFF;} ul.article-list li.box a.post-thumb-link {display:block; height:70px} ul.article-list li.box a.post-thumb-link img.post-thumb {margin:4px; border:1px solid #CCC} ul.article-list li.box .comments {} .futura a {text-decoration:none} /*article-list box flags*/ ul.article-list li.design {background:url('images/flag-sprite.png') no-repeat 100% -340px} ul.article-list li.funny {background:url('images/flag-sprite.png') no-repeat 100% -840px} ul.article-list li.music {background:url('images/flag-sprite.png') no-repeat 100% -1340px} ul.article-list li.misc {background:url('images/flag-sprite.png') no-repeat 100% -1840px} ul.article-list li.style {background:url('images/flag-sprite.png') no-repeat 100% -2340px} ul.article-list li.tech {background:url('images/flag-sprite.png') no-repeat right bottom} * html ul.article-list li.design, * html ul.article-list li.funny, * html ul.article-list li.music, * html ul.article-list li.misc, * html ul.article-list li.style, * html ul.article-list li.tech {background:none; background-color:#000} /*ICONS (sprites!) ====================================================================================================================================================================*/ .icon {overflow:hidden; display:inline-block; height:16px; padding-left:18px; font-size:9px; line-height:16px; margin-right:5px; color:#CCCCCC} .article {background:url('images/icon-sprite.png') no-repeat 0 0} div.blog {background:url('images/icon-sprite.png') no-repeat 0 -16px} .images {background:url('images/icon-sprite.png') no-repeat 0 -32px} .link {background:url('images/icon-sprite.png') no-repeat 0 -48px} .video {background:url('images/icon-sprite.png') no-repeat 0 -64px} .date {background:url('images/icon-sprite.png') no-repeat 0 -80px} .comments {background:url('images/icon-sprite.png') no-repeat 0 -96px;} .comments a {text-decoration:none} .views {background:url('images/icon-sprite.png') no-repeat 0 -112px} .tags {background:url('images/icon-sprite.png') no-repeat 0 -128px} /*===================================================================================================================================== SINGLE =====================================================================================================================================*/ .single #primary img.alignright {float:right; padding:0 0 10px 10px} .single #secondary h1 {font-size:21px; line-height:28px; color:#0FF} .single #secondary .post-content {margin-bottom:20px} .single #secondary .post-content p {font-size:12px; line-height:16px; color:#EEE} .single #secondary .post-content li {margin-bottom:10px} /* RATINGS */ .single #secondary .ratings {position:relative; height:30px; font-size:10px; line-height:11px} .single #secondary .ratings .post-ratings {position:absolute} .single #secondary .ratings .post-ratings-loading {position:absolute;right:0} /* PREV&NEXT POSTS */ #previous-next-post {overflow:hidden; padding:10px; background:url('images/trans50black.png');} #previous-next-post h4 {font-size:11px; margin-bottom:10px; font-weight:bold} #previous-next-post .previous-post {float:left; width:290px; padding-right:5px; border-right:1px dotted #CCC} #previous-next-post .previous-post a.post-thumb-link {float:left; display:block; width:100px; height:60px; } #previous-next-post .previous-post div.post-link {float:right; width:180px; height:60px} #previous-next-post .previous-post div.post-link a {display:table-cell; height:60px; vertical-align:middle; text-decoration:none} #previous-next-post .next-post {float:right; width:290px;} #previous-next-post .next-post a.post-thumb-link {float:left; display:block; width:100px; height:60px; } #previous-next-post .next-post div.post-link {float:right; width:180px; height:60px} #previous-next-post .next-post div.post-link a {display:table-cell; height:60px; vertical-align:middle; text-decoration:none} /*COMMENTS*/ #comments {} #comments #comments-list h3 {margin:0 0 20px 0; font-size:11px; font-weight:bold} #comments p {margin-bottom:8px} .subscribe-to-comments {float:right !important; width:470px; margin:8px 0; font-size:11px} /*comments*/ .gravatar {float:left; width:60px; height:50px} .comment-author {float:left; position:relative; padding-top:8px; } .comment-bubble { padding:10px; font-size:11px} li.comment {margin-bottom:20px;background:url('images/trans50black.png')} li.comment .comment-author h6 {margin:0; font-weight:bold; font-size:13px} li.comment .comment-author .comment-meta {font-size:9px; color:#666 } .comments-list h3 {font-size:11px} ol.comments-list {margin:0 0 20px 0} ol.comments-list li {padding:10px} /*trackbacks*/ #trackbacks-list {margin:0 0 20px 0} #trackbacks-list p {font-size:12px; color:#666666} #trackbacks-list ul {list-style-type:none; list-style-position:inside; margin-bottom:20px;} #trackbacks-list ul li {border-bottom:1px dotted #666666} /*COMMENT FORM*/ p#comment-notes {font-size:11px; line-height:1.2em} #commentform .form-label {font-size:11px} #commentform .form-input input {width:290px; height:20px; margin:0 0 10px 0; padding:5px; font-size:18px; border:1px solid #999999; background-color:#EEE} #commentform .form-textarea textarea {width:610px; height:200px; padding:5px; font-size:18px; border:1px solid #999999; background-color:#EEE; font-family:Arial, Helvetica, sans-serif;} /*MAIN*/ .single #container #content #main {float:right; width:480px;} .single #container #content #main #player1 { background-color:#666666; margin-top:-8px; padding:0} .single #container #content #main img.post-topimage {margin:0 0 10px 0} /*text*/ .single #container #content #main {font-family:Georgia, serif; font-size:13px; line-height:19px; color:#333333} .single #container #content #main p a {color:#FF00FF; background-color:#FFFFCC} .single #container #content #main p a:hover {color:#FF00FF; background-color:#FFFFCC; text-decoration:underline} .single #container #content #main ul {list-style-type:disc; list-style-position:inside; margin-bottom:1em;} /*===================================================================================================================================== BLOG PAGE =====================================================================================================================================*/ .page-template-_blog-php h1 {font-size:24px; margin-bottom:20px; color:#0FF} /*===================================================================================================================================== ABOUT PAGE =====================================================================================================================================*/ .page-template-_about-php h1 {font-size:24px; margin-bottom:20px; color:#0FF} .page-template-_about-php ul.blog-iterations {list-style-type:none; margin:0;} .page-template-_about-php ul.blog-iterations li {float:left; margin:0 20px 20px 0} .page-template-_about-php #bio p {font-size:24px; line-height:36x; font-family:Georgia, "Times New Roman", Times, serif} .page-template-_about-php #about-the-blog {background-color:#000; color:#EEE} .page-template-_about-php #about-the-blog h2 {font-size:24px; margin:20px 0;padding:0 10px} .page-template-_about-php #about-the-blog p {padding:0 10px} .page-template-_about-php #about-the-blog ul {padding:0 10px} /*===================================================================================================================================== CONTACT FORM =====================================================================================================================================*/ #contact h1 {font-size:24px; margin-bottom:20px; color:#0FF} .wpcf7-form {background-color:#000; padding:20px} .wpcf7-form p {font-size:11px} .wpcf7-form .wpcf7-form-control-wrap input {font-size:16px; padding:5px; border:1px solid #CCC; width:400px} * html .wpcf7-form .wpcf7-form-control-wrap input {padding:2px} .wpcf7-form textarea {font-size:16px; padding:5px; border:1px solid #CCC; width:570px} * html .wpcf7-form textarea {padding:2px} div.wpcf7-response-output {margin:0 !important} /*===================================================================================================================================== FOOTER =====================================================================================================================================*/ #footer {clear:both; width:100%; height:400px; /*background:url('images/footerBG.jpg') repeat-y top center*/} #footer .footer-box {overflow:visible; width:275px; padding:10px;} #footer .footer-box h4 {margin:0 0 1em 0; color:#66CCCC} #footer .footer-box p {font-size:11px; color:#999999} #footer .footer-box a {color:#FF66CC} #footer .footer-box a:hover {color:#66CCFF} #latest-tweet {position:absolute; left:50%; margin-left:-470px; top:20px; width:600px; line-height:16px; font-size:14px; } #latest-tweet img.twitter-egg {float:left; margin:0 10px 0 0} #latest-tweet ul#twitter_update_list {float:right; width:540px; margin:0; list-style-type:none} #latest-tweet ul#twitter_update_list li {margin-bottom:5px} #latest-tweet ul#twitter_update_list li span {font-size:12px; line-height:14px} #latest-tweet p.latest-tweet-links {float:right; width:540px; font-style:normal; font-size:9px; line-height:16px;font-family:Arial, Helvetica, sans-serif; } #latest-tweet p.latest-tweet-links a {color:#FFFFCC;} #social-links {position:absolute; right:0; top:20px;right:50%; margin-right:-470px; width:300px} #social-links a {float:right; margin-left:10px; } #social-links a:hover {} #social-links a.facebook {display:block; width:40px; height:40px; text-indent:-9999px; background:url('images/social-sprite.png') no-repeat top left} #social-links a.twitter {display:block; width:40px; height:40px; text-indent:-9999px; background:url('images/social-sprite.png') no-repeat 0 -50px} #social-links a.linkedin {display:block; width:40px; height:40px; text-indent:-9999px; background:url('images/social-sprite.png') no-repeat 0 -100px} #social-links a.rss {display:block; width:40px; height:40px; text-indent:-9999px; background:url('images/social-sprite.png') no-repeat 0 -150px} /*===================================================================================================================================== PORTFOLIO =====================================================================================================================================*/ ul.gallery {} ul.gallery li {margin-bottom:20px;} .boxgrid{ width: 300px; height: 200px; float:left; background:#CCC; overflow: hidden; position: relative; } .boxgrid img{ position: absolute; top: 0px; left: 0px; border: 0; } .boxgrid p{ padding: 0 10px; color:#FFF; font-weight:bold; font:10pt "Lucida Grande", Arial, sans-serif; } .boxcaption{ float: left; position: absolute; background:#000000; height: 170px; width: 100%; opacity: .9; /* For IE 5-7 */ filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80); /* For IE 8 */ -MS-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"; } .captionfull .boxcaption { top: 170px; left: 0; } .boxcaption .post-title a {display:block; font-size:13px; line-height:14px; color:#FFF; padding:6px; text-decoration:none} .boxcaption a.post-caption {display:block; font-size:11px; line-height:14px; color:#FFF; padding:6px; text-decoration:none} /*===================================================================================================================================== WP-PORTFOLIO PIECE PAGE =====================================================================================================================================*/ #copy {font-size:11px; margin-top:20px} #copy h2 {padding:0 0 8px 0; font-size:12px; } #copy p {padding:0 0 8px 0; margin:0} #copy .button {margin-top:20px} #copy ol {padding-left:20px} #copy ol li {margin:0 0 10px 0} #portfolio-images img {margin-top:20px; -moz-box-shadow: 2px 0 10px #000; -webkit-box-shadow: 2px 0 10px #000;} /*===================================================================================================================================== WP-RATINGS =====================================================================================================================================*/ .rating-stars {font-size:0px; height:15px; width: 60px; overflow:hidden; margin-left:5px} /*===================================================================================================================================== BUTTONS =====================================================================================================================================*/ .button, .button:visited { background: #222 url(images/button-overlay.png) repeat-x; display: inline-block; padding: 5px 10px 6px; color: #fff; text-decoration: none; -moz-border-radius: 5px; -webkit-border-radius: 5px; -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5); -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5); text-shadow: 0 -1px 1px rgba(0,0,0,0.25); border-bottom: 1px solid rgba(0,0,0,0.25); position: relative; cursor: pointer; border:none; } .button:hover { background-color: #111; color: #fff; } .button:active { top: 1px; } .small.button, .small.button:visited { font-size: 11px; padding: ; } .button, .button:visited, .medium.button, .medium.button:visited { font-size: 13px; font-weight: bold; line-height: 1; text-shadow: 0 -1px 1px rgba(0,0,0,0.25); } .large.button, .large.button:visited { font-size: 14px; padding: 8px 14px 9px; } .green.button, .green.button:visited { background-color: #91bd09; } .green.button:hover { background-color: #749a02; } .blue.button, .blue.button:visited { background-color: #2daebf; } .blue.button:hover { background-color: #007d9a; } .red.button, .red.awesome:visited { background-color: #e33100; } .red.button:hover { background-color: #872300; } .magenta.button, .magenta.button:visited { background-color: #a9014b; } .magenta.button:hover { background-color: #630030; } .orange.button, .orange.button:visited { background-color: #ff5c00; } .orange.button:hover { background-color: #d45500; } .yellow.button, .yellow.button:visited { background-color: #ffb515; } .yellow.button:hover { background-color: #fc9200; } /*===================================================================================================================================== MISCELLANEOUS DECORATIONS =====================================================================================================================================*/ #banner-strip {width:940px; margin:20px auto 0; background-color:#000} #banner-strip .banner-left {float:left} #banner-strip .banner-right {float:right} .shadow-980-top {padding:20px 0 0 0; background:url('images/980shadow.png') repeat-y center top; margin-top:10px} .shadow-980-bottom {height:20px; background:url('images/980shadow.png') no-repeat center bottom; margin-bottom:10px} * html .shadow-980-top, * html .shadow-980-bottom {background:none;} .slash5 {margin-top:10px; margin-bottom:10px; height:3px; background:url('images/slash5.gif') repeat} .backslash5 {margin:10px auto; height:8px; background:url('images/backslash5.gif') repeat} .slash8 {width:980px; margin:0 auto; height:8px; background:url('images/slash.gif') repeat} .diamond10 {width:980px; margin:0 auto; height:10px; background:url('images/diamond10.gif') repeat} .diamond5 {width:980px; margin:0 auto; height:5px; background:url('images/diamond5.gif') repeat} .x5 {width:980px; margin:0 auto; height:5px; background:url('images/x5.gif') repeat} .x10 {width:980px; margin:0 auto; height:10px; background:url('images/x10.gif') repeat} * html .diamond5, * html .x5 {display:none}