/*================================================== R E M K A . N E T - M A I N S T Y L E S crafted with love in Shibuya, Tokyo. * Last Updated : 2008/08/27 * Author : Jerome Senaillat aka. Remka * Color Key : * Bright green : #59bd00 ==================================================*/ @import 'lib/reset.css'; @import 'lib/utilities.css'; @import 'lib/forms.css'; /*================================================== L A Y O U T Basic page layout ==================================================*/ body { background: #fff url(../../img/head-stripes.gif) repeat-x 0 0; font: 10px/160% "Century Gothic", Arial, Helvetica, sans-serif; text-align: center; border-top:5px solid #59bd00; padding-top:40px; } #head {width:900px; margin:0 auto; clear:both; } #main {width:900px; margin:0 auto; clear:both; } /*================================================== C O M M O N E L E M E N T S Main HTML elements ==================================================*/ #main {color:#666;} #main h1 {} #main h2 {} #main h3 {} #main li, p, td, th, dd, dt, label, legend { } #main p { margin-bottom: 1em; line-height:1.6em; text-align:left; font-size:1.3em;} #main a:link, #main a:visited, #main a:active {color:#59bd00; text-decoration:none; font-weight:bold;} #main a:hover { text-decoration: underline; } #main blockquote {margin:0 0 10px 0; padding:0 0 0 10px; border-left:5px solid #E8E8E8; text-align:left; font-size:1.3em; font-style:italic;} #main blockquote cite{display:block;color:#999;} /*================================================== H E A D ==================================================*/ /* logo */ #head h1 {margin:20px 0 40px 0} #head h1#logo a {display:block; text-indent:-999em; width:317px; height:70px; background: url(../../img/head-logo.gif) no-repeat 0 0;} /* navigation */ ul#navigation {margin:20px 0 40px 0;} ul#navigation li{display:inline;} ul#navigation li a{display:inline; float:left; margin:0 20px 0 0; text-indent: -999em; height:9px;} /* navigation items */ ul#navigation li.home a{width:36px; background: url(../img/btn-home.gif) no-repeat;} ul#navigation li.home a:hover{background: url(../img/btn-home.gif) no-repeat left -9px;} ul#navigation li.illustrations a{width:82px; background: url(../img/btn-illus.gif) no-repeat;} ul#navigation li.illustrations a:hover{background: url(../img/btn-illus.gif) no-repeat left -9px;} ul#navigation li.webdesign a{width:71px; background: url(../img/btn-web.gif) no-repeat;} ul#navigation li.webdesign a:hover{background: url(../img/btn-web.gif) no-repeat left -9px;} ul#navigation li.misc a{width:28px; background: url(../img/btn-misc.gif) no-repeat;} ul#navigation li.misc a:hover{background: url(../img/btn-misc.gif) no-repeat left -9px;} ul#navigation li.about a{width:42px; background: url(../img/btn-about.gif) no-repeat;} ul#navigation li.about a:hover{background: url(../img/btn-about.gif) no-repeat left -9px;} ul#navigation li.contact a{width:59px; background: url(../img/btn-contact.gif) no-repeat;} ul#navigation li.contact a:hover{background: url(../img/btn-contact.gif) no-repeat left -9px;} ul#navigation li.links a{width:33px; background: url(../img/btn-links.gif) no-repeat;} ul#navigation li.links a:hover{background: url(../img/btn-links.gif) no-repeat left -9px;} ul#navigation li.rss a{width:21px; background: url(../img/btn-rss.gif) no-repeat;} ul#navigation li.rss a:hover{background: url(../img/btn-rss.gif) no-repeat left -9px;} /* buttons here */ .home ul#navigation li.home a, .home ul#navigation li.home a:hover{cursor:default;background: url(../img/btn-home.gif) no-repeat left -18px;} .illustrations ul#navigation li.illustrations a, .illustrations ul#navigation li.illustrations a:hover{cursor:default;background: url(../img/btn-illus.gif) no-repeat left -18px;} .webdesign ul#navigation li.webdesign a, .webdesign ul#navigation li.webdesign a:hover{cursor:default;background: url(../img/btn-web.gif) no-repeat left -18px;} .misc ul#navigation li.misc a, .misc ul#navigation li.misc a:hover{cursor:default;background: url(../img/btn-misc.gif) no-repeat left -18px;} .about ul#navigation li.about a, .about ul#navigation li.about a:hover{cursor:default;background: url(../img/btn-about.gif) no-repeat left -18px;} .contact ul#navigation li.contact a, .contact ul#navigation li.contact a:hover{cursor:default;background: url(../img/btn-contact.gif) no-repeat left -18px;} .links ul#navigation li.links a, .links ul#navigation li.links a:hover{cursor:default;background: url(../img/btn-links.gif) no-repeat left -18px;} .rss ul#navigation li.rss a, .rss ul#navigation li.rss a:hover{cursor:default;background: url(../img/btn-rss.gif) no-repeat left -18px;} /*================================================== M A I N ==================================================*/ /* index page */ #intro h2 {text-indent:-999em; background: url(../img/home-big.gif) no-repeat; height:63px; margin-bottom:15px;} #intro p {text-transform:uppercase; color:#666; font-weight:bold; font-size:1.4em; line-height:0.9em;} /* Portfolio lists */ #main ul#portfolio {clear:both;} #main ul#portfolio li {display:inline;} #main ul#portfolio li a{margin:0;padding:0;float:left;margin:0 10px 10px 0;display:block;} /* big portfolio */ ul#bigFolio {margin:0;padding:0;list-style:none;} ul#bigFolio li {display:inline;} ul#bigFolio li a{margin:0;padding:0;float:left;margin:0 10px 10px 0;display:block;} h2.subTitle {margin:0 0 20px 0;letter-spacing:-0.1em;color:#666;} img.imgMed {margin:10px 0 20px 0;} img.theImg {margin:0 0 20px 0;display:block;min-height:0;} #itemDescri {margin:20px 0 40px 0;} #itemClient {margin:0;padding:0;color:#999;line-height:0.1em;} #itemTags {margin:0;padding:0;line-height:0.1em;} #itemTags a.tag {font-size:0.8em;padding:0 2px 0 2px;background:#FFF774;color:#000;text-decoration:none;text-transform:uppercase;} #itemDate {font-size:0.9em;margin:0 0 5px 0;padding:0;line-height:0.1em;} span.clientName {color:#666;margin:0 5px 0 5px;} a.linkFolio {margin:0 5px 0 5px;} .tagColor {padding:0 2px 0 2px;background:#FFF774;color:#000;text-transform:uppercase;} /* back link */ a.backLink {display:block;float:left;width:38px;height:14px;background: url(../img/btn-bak.gif) no-repeat left top;} a.backLink:hover {background: url(../img/btn-bak.gif) no-repeat left -14px;} /* special */ p.readThis {padding:3px 7px 3px 7px;background:#FFF774;color:#262407;} /* delicious links */ ul#deliciousLinks {margin:0;padding:0;list-style:none;} #main p.upper{margin: 10px 0 0 0;padding:0;} #main p.upper a{padding:0 0 0 16px;background: url(../img/heart.gif) no-repeat left 50%} #main p.descri{margin: 0;padding:0;} #main ul#deliciousLinks {margin:0 170px 0 0;padding:0;list-style:none;clear:left;} #main img.skully {margin:0 0 20px 0;padding:0;border:} #main span.adress {display:block;width:298px;height:95px;background: url(../img/adress.gif) no-repeat;} /* friends links */ #main #rightCol {float:right;margin:0 0 20px 20px;width:150px;} #main h2.friends {background: url(../img/friends.gif) no-repeat;width:135px;height:18px;} #main h2 span.delicious {background: url(../img/delicious.gif) no-repeat;width:107px;height:18px;display:block;float:left;margin:0 0 10px 0;} #main h2 a.moreLinks {background: url(../img/more.gif) no-repeat;width:44px;height:18px;display:block;float:left;margin:0 0 10px 0;} #main ul#friendList {margin:10px 0 0 0;padding:0;list-style:none;} #main ul#friendList li{margin:0;padding:0;} #main ul#friendList li a{background: url(../img/heart.gif) no-repeat left 50%;margin: 10px 0 0 0;padding:0 0 0 16px;} /* feedlist */ ul.feedList {margin:0;padding:0;list-style:none;} ul.feedList li{margin:2px 0 2px 0;} a.aFeed{padding:4px 0 4px 21px;background: url(../img/icon-feed.gif) no-repeat left 50%;} /*================================================== F O O T E R ==================================================*/ #foot {clear:both;padding:20px 0 50px 0;margin:30px 50px 10px 50px;width:600px;font-size:0.8em;line-height:1.6em;color:#999;border-top: 5px solid #F0F0F0;} #foot span.copyrightInfos {display:block;width:316px;height:24px;background: url(../img/copyright.gif) no-repeat;}