/*---------------------------------------------------- SCREEN.CSS SITE: www.keanrichmond.com CREATED: Sun 16.08.09 @ 14:15 p.m. AUTHOR: Kean Richmond ----------------------------------------------------*/ @import url("reset.css"); @import url("code.css"); /*--- 00. Common Elements ---------------------------------------------------------------------------*/ html {background:url(http://img.keanrichmond.com/_bkg.jpg) #F2EFE8;} body {background:url(http://img.keanrichmond.com/_bkg_header.jpg) repeat-x; color:#312D3A; font-family:Arial, Helvetica, sans-serif; font-size:62.5%; padding:0;} body#index {background:url(http://img.keanrichmond.com/_bkg_header_index.jpg) repeat-x;} /*--- 01. Headings ---------------------------------------------------------------------------*/ h1 {margin:39px 0 8px 0;} h2 {margin:0 0 16px 0;} h6 {background:url(http://img.keanrichmond.com/_bkg_h6.gif) 0 8px repeat-x; color:#B4B1A4; font-family:Vegur, Tahoma, Helvetica, sans-serif; font-size:1.8em; font-weight:bold; margin:12px auto; padding:0 100px; text-align:center; text-transform:uppercase;} h6 span {background:url(http://img.keanrichmond.com/_bkg.jpg); padding:0 10px;} /*--- 02. Global Container Elements ---------------------------------------------------------------------------*/ #main_container {margin:0px auto; position:relative; width:990px;} #content_container {padding:100px 0 0 0;} #content {padding:0 20px; position:relative;} #content p {font-size:1.2em; line-height:1.5em; padding:9px 0;} /*--- 03. Header Elements ---------------------------------------------------------------------------*/ #header {left:0; position:absolute; top:0; width:990px;} #logo {background:url(http://img.keanrichmond.com/_logo_tag.png) no-repeat; display:block; float:left; margin:8px 0 8px 20px; padding:20px 0 1px 49px;} #logo:hover {background-position:0 -55px;} #main_navigation {float:right; margin:19px 10px 0 0;} #main_navigation li {float:left; margin:0 0 0 20px;} #main_navigation li a {background:url(http://img.keanrichmond.com/_navigation.png) no-repeat; color:#99979E; display:block; padding:10px; text-indent:-9999px; text-decoration:none;} #main_navigation li a strong {color:#FFFFFF; display:block; font-size:1.9em;} #main_navigation li a:hover strong {color:#D7799C;} #main_navigation li a span {display:block!important;} #main_navigation li.nav_current {background:url(http://img.keanrichmond.com/_navigation_current.png) bottom center no-repeat;} #main_navigation li a#mainnav_home {width:46px;} #main_navigation li a#mainnav_home:hover {background-position:0 -47px;} #main_navigation li a#mainnav_about {background-position:-86px 0; width:49px;} #main_navigation li a#mainnav_about:hover {background-position:-86px -47px;} #main_navigation li a#mainnav_journal {background-position:-174px 0; width:57px;} #main_navigation li a#mainnav_journal:hover {background-position:-174px -47px;} #main_navigation li a#mainnav_portfolio {background-position:-271px 0; width:67px;} #main_navigation li a#mainnav_portfolio:hover {background-position:-271px -47px;} #main_navigation li a#mainnav_contact {background-position:-378px 0; width:61px;} #main_navigation li a#mainnav_contact:hover {background-position:-378px -47px;} #icon_navigation {clear:both; float:right; margin:3px 15px 0 0;} #icon_navigation li {float:left; margin:0 0 0 3px;} #icon_navigation li a {background:url(http://img.keanrichmond.com/_icon_navigation.png) no-repeat; display:block; padding:5px; text-indent:-9999px; width:17px;} #icon_navigation li a#iconnav_home {} #icon_navigation li a#iconnav_home:hover {background-position:0 -25px;} #icon_navigation li a#iconnav_rss {background-position:-30px 0;} #icon_navigation li a#iconnav_rss:hover {background-position:-30px -25px;} #icon_navigation li a#iconnav_twitter {background-position:-59px 0;} #icon_navigation li a#iconnav_twitter:hover {background-position:-59px -25px;} #icon_navigation li a#iconnav_bookmark {background-position:-87px 0;} #icon_navigation li a#iconnav_bookmark:hover {background-position:-87px -25px;} #icon_navigation li a#iconnav_contact {background-position:-119px 0;} #icon_navigation li a#iconnav_contact:hover {background-position:-119px -25px;} /*--- 04. Index Page Elements ---------------------------------------------------------------------------*/ #index #content {padding:0;} #intro_container {background:url(http://img.keanrichmond.com/_intro.png) no-repeat; height:162px; margin:40px auto; text-indent:-9999px; width:638px;} #text_welcome {color:#999586; left:0; padding:0 90px; position:absolute; text-align:center; top:1071px; width:810px;} #text_welcome p {font-size:1.1em; line-height:1.3em; padding:6px 0 7px 0;} #journal_container {height:1%; padding:287px 0 0 0; overflow:hidden;} #featured_work {position:absolute; top:202px; width:100%;} #featured_work h6 {/*width:155px;*/ width:180px;} #twitter {background:url(http://img.keanrichmond.com/_bkg_twitter.png) 910px top no-repeat; color:#8B8A7D; padding:47px 10px 0 10px; position:absolute; top:417px; width:970px;} #twitter p {font-style:italic; padding:0; text-align:right;} #twitter span {color:#B5B4AA; font-size:0.9em;} #twitter #link_followme {font-style:normal; margin:0 0 0 7px;} #latest_article {float:left; margin:25px 0 0 20px; width:550px;} #latest_article h6 {/*width:146px;*/ width:170px;} #latest_article h3 {margin:3px 0 24px 0;} #latest_article h3 a {color:#312D3A; font-family:Vegur, Arial, Helvetica, sans-serif; font-size:3.6em; font-weight:bold; text-decoration:none;} #latest_article h3 a:hover {color:#D7799C;} #latest_article h4 {color:#D7799C; font-family:Vegur, Arial, Helvetica, sans-serif; font-size:2em; padding:14px 0 0 0; margin:0;} #more_articles {float:right; margin:25px 20px 40px 0; width:300px;} #more_articles h6 {padding:0 50px; width:170px;} #more_articles ul {clear:both; padding:10px 0 25px 0;} #more_articles li {padding:10px 0;} #more_articles li a {font-family:Vegur, Arial, Helvetica, sans-serif; font-size:1.4em; font-weight:bold; text-decoration:none;} #more_articles li span {color:#8B8778; display:block; font-family:Tahoma, Arial, Helvetica, sans-serif; margin:-1px 0 0 0;} #more_articles .link_button {float:left; font-size:1.2em;} #more_articles #link_rss {display:block; float:left; margin:4px 0 0 8px;} p.img_meta {font-size:1em!important; margin:-5px 0 0 0; padding:0!important;} /*--- 05. About Page Elements ---------------------------------------------------------------------------*/ #about h1 {background:url(http://img.keanrichmond.com/_h1_ibuiltthiswebsite.png) no-repeat; height:53px; text-indent:-9999px; width:592px;} #about h2 {background:url(http://img.keanrichmond.com/_h2_hopeyoulikeit.png) no-repeat; height:19px; text-indent:-9999px; width:134px;} #about h3 {color:#D7799C; font-family:England Hand DB, Baskerville, Times New Roman, serif; font-size:2.4em; padding:41px 0 8px 0;} #polaroid {position:absolute; right:11px; top:-20px;} #about #section_one {float:left; position:relative; width:660px; z-index:5;} #about #section_one .p_one {padding-left:40px; padding-right:30px;} #about #section_one .p_two {padding-left:105px; padding-right:15px;} #about #section_two {clear:both; float:right; width:596px;} #about #section_two .p_one {padding-left:80px; text-align:right;} #about #section_two .p_two {padding-left:105px; text-align:right;} #about #section_three {float:left; margin:-222px 0 0 0; width:573px;} #about #section_three p {padding-left:15px;} #about #section_three .p_one {padding-right:155px;} #about #section_four {clear:both; float:right; margin:-39px 0 65px 0; padding-right:120px; text-align:right;} /*--- 06. Portfolio Page Elements ---------------------------------------------------------------------------*/ #portfolio #content {height:1%; overflow:hidden;} #portfolio h1 {background:url(http://img.keanrichmond.com/_h1_mywork.png) no-repeat; height:68px; text-indent:-9999px; width:283px;} #portfolio h2 {background:url(http://img.keanrichmond.com/_h2_aselectionofthewebsites.png) no-repeat; height:19px; margin-left:95px; margin-top:-12px; text-indent:-9999px; width:432px;} #portfolio_item_content {clear:both; float:right; padding:40px 0 30px 0; width:374px;} #portfolio h3 {color:#D7799C; font-family:Vegur, Arial, Helvetica, sans-serif; font-size:1.8em; font-weight:bold; margin:10px 0;} #portfolio_item_content p {color:#777182; font-size:1.1em; line-height:1.2em; padding:8px 0 9px 0;} #portfolio_item_content p strong {color:#312D3A;} #portfolio_image {border:5px solid #DAD8D1; border:5px solid rgba(0,0,0,.1); float:left; margin:40px 0 30px 0; padding:5px; width:545px;} #ul_portfolio {height:1%; margin:0 -5px 30px -5px; overflow:hidden;} #index #ul_portfolio {margin:0 15px;} /*#ul_portfolio li {float:left; margin:7px 10px;} #ul_portfolio li .thumbnail {border:5px solid #DAD8D1; display:block; margin:0 0 9px 0;} #ul_portfolio li .thumbnail span {display:block; height:100px; margin:5px; overflow:hidden; width:200px;} #ul_portfolio li .thumbnail:hover span img {float:right; text-align:right;}*/ #ul_portfolio li {float:left; margin:7px 10px; position:relative;} #ul_portfolio .thumbnail {display:block; height:120px; margin:0 0 9px 0; overflow:hidden; width:220px;} #ul_portfolio li:hover .thumbnail img {float:right; text-align:right;} #ul_portfolio .thumb_overlay {left:0; position:absolute; top:0;} #ul_portfolio li a {display:block; font-family:Vegur, Arial, Helvetica, sans-serif; font-size:1.4em; font-weight:bold; text-align:center; text-decoration:none;} #ul_portfolio li span {color:#AAA698; display:block; line-height:1em; text-align:center;} #ul_portfolio li a.link_visitwebsite {font-family:Arial, Helvetica, sans-serif; font-size:1.1em!important; font-weight:normal; margin:8px auto 13px auto; width:68px;} #portfolio_list h6 {margin-top:50px; width:217px!important;} /*--- 07. Contact Page Elements ---------------------------------------------------------------------------*/ #contact h1 {background:url(http://img.keanrichmond.com/_h1_getintouch.png) no-repeat; height:53px; text-indent:-9999px; width:407px;} #contact h2 {background:url(http://img.keanrichmond.com/_h2_gotaquestion.png) no-repeat; height:19px; text-indent:-9999px; width:603px;} #contact h3 {color:#726C80; font-family:England Hand DB, Baskerville, Times New Roman, serif; font-size:3.6em; margin:16px 0 0 0;} #contact h6 {margin-top:65px; width:593px;} #contact form {height:1%; overflow:hidden;} #contact fieldset {float:left; margin:0 50px 0 0; width:300px;} #contact #content p {height:1%; margin:26px 0 0 0; overflow:hidden; padding:0;} #contact label {color:#726C80; display:block; font-size:1.2em; font-weight:bold; margin:0 0 4px 0;} #contact .input_box {background:0; border:0; color:#7A7871; font-family:Arial, Helvetica, sans-serif; font-size:12px; padding:5px 8px; width:284px} #contact #p_name, #contact #p_website {background:url(http://img.keanrichmond.com/_input_300.png) bottom left no-repeat;} #contact #p_email {background:url(http://img.keanrichmond.com/_input_250.png) 0px 22px no-repeat;} #contact #p_email .input_box {float:left; width:234px!important;} #contact #p_message {background:url(http://img.keanrichmond.com/_textarea_600.png) bottom left no-repeat; float:left; width:600px;} #contact #p_message textarea {height:164px; width:584px;} .optional {background:url(http://img.keanrichmond.com/_optional.gif) 258px 9px no-repeat!important; padding-right:45px!important; width:239px!important;} #avatar {float:left; height:36px; margin:-5px 0 0 14px; position:relative; width:36px;} #avatar span {display:block; padding:2px;} #avatar #mask {left:0; position:absolute; top:0;} #p_submit {clear:both; float:right; margin:10px 0 0 0!important;} #tweetme {clear:both; margin:0 0 30px 0;} #tweetme h6 {margin-top:49px; /*width:182px;*/ width:210px;} #tweetme a {background:url(http://img.keanrichmond.com/_tweetme.png) no-repeat; display:block; height:134px; margin:9px auto; text-indent:-9999px; width:281px;} #tweetme a:hover {background-position:-281px 0;} /*--- 49. Semi Footer Elements ---------------------------------------------------------------------------*/ #semi_footer {background:url(http://img.keanrichmond.com/_bkg_semifooter.png) center top no-repeat; clear:both; margin:67px 0 13px 0; padding:32px 0 0 0;} #semi_footer h6 {font-size:1.5em; padding:0 50px; width:63px;} #friends h6 {margin-top:99px; padding:0 50px; width:72px;} #friends ul {padding:11px 115px; text-align:center;} #friends li {display:inline; margin:3px;} #friends a {background:#A09E99; background:rgba(0,0,0,.3); color:#EFECE5; font-size:1.1em; line-height:2.4em; padding:2px 5px; text-decoration:none; -moz-border-radius:3px; -webkit-border-radius:3px; border-radius:3px;} #friends a:hover {background:#D7799C;} #lastfm h6 {color:#D10D03; width:74px} #lastfm ul {height:1%; margin:0px auto; padding:8px 0 16px; 0; overflow:hidden; width:679px;} #lastfm li {float:left; margin:0 8px; position:relative;} #lastfm ul li a {left:0; position:absolute; top:0;} #flickr h6 {color:#0063DC; width:65px;} #flickr h6 span strong {color:#FF0084;} #flickr ul {height:1%; margin:0px auto; padding:4px 0 23px; 0; overflow:hidden; width:505px;} #flickr li {float:left; margin:0 3px; padding:8px 7px; position:relative;} #flickr ul li a {left:0; position:absolute; top:0;} /*--- 50. Footer Elements ---------------------------------------------------------------------------*/ #footer_container {background:url(http://img.keanrichmond.com/_bkg_footer.jpg) 0 98px repeat-x;} #footer {background:url(http://img.keanrichmond.com/_footer_floral.png) center top no-repeat; margin:0px auto; padding:98px 0 20px 0; width:990px;} #footer p {color:#9C9A97; font-size:1.1em; padding:3px 0; text-align:center;} #footer p#ftr_copyright {color:#8C8A88; padding-top:28px;} #footer p#ftr_copyright a {color:#8C8A88; font-weight:bold; text-decoration:none;} #footer p#ftr_copyright a:hover {text-decoration:underline;} p#thanks {color:#434343; font-family:England Hand DB, Baskerville, Times New Roman, serif; font-size:3em; margin:36px 0 0 0;} #top_link {background:url(http://img.keanrichmond.com/_toplink.png) no-repeat; bottom:22px; color:#EFECE5; height:22px; font-size:1.1em; padding:5px 0 0 31px; position:fixed; right:-72px; text-decoration:none; width:69px;} /*--- 98. Response Elements ---------------------------------------------------------------------------*/ #msg_response {background:url(http://img.keanrichmond.com/response_bkg.jpg) #FFFFFF repeat-x; border:1px solid #CCCCCC; clear:both; cursor:pointer; font-family:Arial, Helvetica, sans-serif; font-size:11px!important; font-weight:bold; line-height:1.3em; margin:20px 0; padding:1px; position:relative; zoom:1; -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px;} #msg_response a {color:#333333;} #msg_response a:hover {text-decoration:none;} #msg_response span {background:url(http://img.keanrichmond.com/response_close.gif) no-repeat; height:11px; position:absolute; right:10px; top:8px; width:10px;} #msg_response div {padding:6px 46px; -moz-border-radius:3px; -webkit-border-radius:3px; border-radius:3px;} .msg_error {background:url(http://img.keanrichmond.com/response_error.jpg) left center no-repeat; color:#B7220A;} .msg_success {background:url(http://img.keanrichmond.com/response_success.jpg) left center no-repeat; color:#0F8915;} /*--- ??. Form Elements ---------------------------------------------------------------------------*/ #p_security {clear:both; display:none; height:0px; visibility:hidden;} #p_security label {float:none; padding:0 0 4px 0; text-align:left; width:auto;} #p_security .input_box {display:block; float:none;} /*--- ??. Search Form Elements ---------------------------------------------------------------------------*/ #search_form {background:url(http://img.keanrichmond.com/_input_300.png) no-repeat; float:left; height:25px; margin:7px 0; overflow:hidden; width:300px;} #search_form #s {background:0; border:0; color:#767572; float:left; font-family:Arial, Helvetica, sans-serif; font-size:11px; padding:6px 9px; width:252px;} #search_form #searchsubmit {background:url(http://img.keanrichmond.com/_icon_spyglass.png) no-repeat; border:0; cursor:pointer; float:left; height:14px; margin:6px 8px; padding:0 0 0 14px; text-indent:-9999px; width:14px;} #search_form #searchsubmit:hover {background-position:-14px 0;} /*--- ??. Post Elements ---------------------------------------------------------------------------*/ #index p.post_meta_date {color:#AAA698; font-size:1.1em; line-height:1em; padding:5px 0 0 0;} blockquote {background:url(http://img.keanrichmond.com/_bkg_blockquote.png) no-repeat; font-style:italic; margin:20px 0 10px 0; padding:0 0 0 55px;} blockquote p {border:0!important; font-weight:normal!important; margin:0!important; padding:9px 0!important;} /*--- 99. Button Elements ---------------------------------------------------------------------------*/ .btn_75 {background:#A09E99; background:rgba(0,0,0,.3); border:0; color:#EFECE5; cursor:pointer; font-family:Georgia, "Times New Roman", Times, serif; padding:2px 0; text-decoration:none; width:75px; -moz-border-radius:12px; -webkit-border-radius:12px; border-radius:12px;} .btn_75:hover {background:#D7799C; color:#EFECE5;} /*--- 100. Link Elements ---------------------------------------------------------------------------*/ a {color:#D7799C;} a:hover {color:#AA566F;} .link_button {background:#A09E99; background:rgba(0,0,0,.3); color:#EFECE5; cursor:pointer; font-family:Georgia, "Times New Roman", Times, serif; padding:4px 12px; text-decoration:none; -moz-border-radius:12px; -webkit-border-radius:12px; border-radius:12px;} .link_button:hover {background:#D7799C; color:#EFECE5;} .link_visitwebsite {background:#A09E99; background:rgba(0,0,0,.3); color:#EFECE5; padding:4px 12px; text-decoration:none; -moz-border-radius:3px; -webkit-border-radius:3px; border-radius:3px;} .link_visitwebsite:hover {background:#D7799C; color:#EFECE5;} /*---------------------------------------------------- FONTS.CSS ----------------------------------------------------*/ /*--- 01. Vegur ---------------------------------------------------------------------------*/ /* * This CSS file has been generated by fontsquirrel.com * The fonts included are copyrighted. * @vendor: dot colon * @vendorurl: http://www.dotcolon.net * The license for this font family can be found on the fontsquirrel.com website. * @licenseurl:http://www.fontsquirrel.com/license/Vegur */ @font-face {font-family:'Vegur'; src:url('http://www.keanrichmond.com/font/Vegur-R_0500.eot');} @font-face {font-family:'Vegur'; src:url('http://www.keanrichmond.com/font/Vegur-B_0500.eot'); font-weight:bold;} @font-face {font-family:'Vegur'; src:local('Vegur Regular'), local('Vegur-Regular'), url('http://www.keanrichmond.com/font/Vegur-R_0500.otf') format('opentype');} @font-face {font-family:'Vegur'; src:local('Vegur Bold'), local('Vegur-Bold'), url('http://www.keanrichmond.com/font/Vegur-B_0500.otf') format('opentype'); font-weight:bold;} /*--- 02. England ---------------------------------------------------------------------------*/ @font-face {font-family:'England Hand DB'; src:url('http://www.keanrichmond.com/font/england.eot');} @font-face {font-family:'England Hand DB'; src:local('England Hand DB Regular'), local('EnglandHandDB-Regular'), url('http://www.keanrichmond.com/font/england.ttf') format('truetype');}