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, samp,
small, strike, strong, sub, sup, tt, var,
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-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
vertical-align: baseline;
}
/* remember to define focus styles! */
:focus {
outline: 0;
}
body {
line-height: 1;
color: black;
background: white;
}
ol, ul {
list-style: none;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
border-collapse: separate;
border-spacing: 0;
}
caption, th, td {
text-align: left;
font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: "";
}
blockquote, q {
quotes: "" "";
}
/* ////////// CSS Document //////////
fabio-carneiro.com Default Style Sheet
Author: Fabio L. Carneiro
www.fabio-carneiro.com
Colors:
////////////////////////////////// */
/* ///// General Element Selectors ///// */
body{background:#1e2327 url(../img/bg-body.png) repeat; color:#eeeeee; font:12px "Trebuchet MS", Arial, Helvetica, sans-serif;}
h1{font-size:48px;}
h2{font-size:30px;}
h3{}
h4{}
h5{}
h6{}
/* ///// ID Selectors ///// */
#container{}
#header{width:924px; height:125px; margin:0 auto;}
#logo{font-size:48px; margin-top:25px;}
#logo a:link, #logo a:visited{text-decoration:none; color:#cccccc;}
#logo a:hover, #logo a:active{text-decoration:none; color:#cccccc;}
#mainNavigation{font-size:15px; font-weight:bold; margin-top:34px;}
#mainNavigation li{display:inline; margin-left:10px;}
#mainNavigation a:link, #mainNavigation a:visited{text-decoration:none; color:#3d454b;}
#mainNavigation a:hover, #mainNavigation a:active{text-decoration:none; color:#cccccc;}
.active{color:#cccccc !important; padding-bottom:18px; border-bottom:2px solid #c7dd07;}
#contentWrapper{background:url(../img/bg-content.png) repeat;}
#content{background:url(../img/bg-contentglare.png) no-repeat top right; min-height:500px; width:924px; margin:0 auto; padding-top:25px;}
#contentLeft{width:290px;}
#tagline{height:100px; margin-bottom:-20px;}
#taglineHi{font-size:95px; width:120px; margin:-22px 0 0 -6px;}
#taglineName{font-size:40px; width:160px; margin-top:-4px; line-height:40px;}
#taglineProfession{font-size:19px; margin-top:-20px;}
#contentLeft p{margin-top:25px;}
#contentLeft a:link, #contentLeft a:visited{text-decoration:none; color:#c7dd07;}
#contentLeft a:hover, #contentLeft a:active{text-decoration:none; color:#fafafa; border-bottom:1px solid #fafafa;}
#contentRight{width:610px;}
#contentRight p{color:#bbbbbb;}
#contentRight a:link, #contentRight a:visited{text-decoration:none; color:#c7dd07;}
#contentRight a:hover, #contentRight a:active{text-decoration:none; color:#fafafa; border-bottom:1px solid #fafafa;}
#featuredWork{background:url(../img/bg-featuredwork.png) no-repeat; height:500px; margin-bottom:25px;}
#featuredWork a{margin-right:25px;}
#featuredScroll{overflow:hidden; height:400px; margin:30px 0 10px 25px; position:relative;}
#footer{height:275px; width:924px; margin:50px auto 0 auto; color:#cccccc;}
#footerCallouts{width:824px; height:200px; padding:10px 50px; background:url(../img/bg-footercallouts.png) no-repeat;}
#footerCallouts h4{font-size:20px; margin-bottom:10px;}
#hireMe{width:275px; margin:0 25px 0 80px; }
#hireStatus{margin-top:2px; line-height:14px;}
#serviceList{border-top:1px solid #3d4245; padding-top:10px;}
#serviceList li{width:100px; margin-bottom:15px;}
#contactMeLink{margin-top:0px; text-decoration:none; color:#f58320;}
#contactMeLink:hover{text-decoration:none; color:#f99d20;}
#stalkMe{width:275px; margin-right:80px; position:relative;}
#socialList{border-top:1px solid #3d4245; padding-top:8px;}
#stalkMe li{margin-bottom:10px;}
#stalkMe a:link, #stalkMe a:visited{text-decoration:none; color:#cccccc;}
#stalkMe a:hover, #stalkMe a:active{text-decoration:none; color:#ffffff;}
#stalkFacebook{background:url(../img/icon-facebook.png) no-repeat; padding:2px 0 2px 30px; width:60px; margin-right:10px; height:20px;}
#stalkNetvibes{background:url(../img/icon-netvibes.png) no-repeat; padding:2px 0 2px 30px; width:60px; height:20px;}
#stalkLinkedin{background:url(../img/icon-linkedin.png) no-repeat; padding:2px 0 2px 30px; width:60px; margin-right:10px; height:20px;}
#stalkFlickr{background:url(../img/icon-flickr.png) no-repeat; padding:2px 0 2px 30px; width:60px; height:20px;}
#stalkTwitter{background:url(../img/icon-twitter.png) no-repeat; padding:2px 0 2px 30px; width:60px; height:20px;}
#twitter_div{width:190px; padding-top:5px; position:absolute; top:90px; left:150px; background:url(../img/bg-twitterstatus-top.png) top left no-repeat;}
#twitter_update_list{width:160px; background:url(../img/bg-twitterstatus-bottom.png) bottom left no-repeat; margin:3px 0 0 20px; padding:1px 5px 8px 5px; font-size:11px;}
#twitter_update_list span{display:block;}
#twitter_update_list span a:link, #twitter_update_list a:visited{display:inline; float:none; text-decoration:none; color:#f58320;}
#twitter_update_list span a:hover, #twitter_update_list a:active{text-decoration:none; color:#f99d20;}
#twitter_update_list a:link, #twitter_update_list a:visited{display:block; float:right; text-decoration:none; color:#f58320;}
#twitter_update_list a:hover, #twitter_update_list a:active{text-decoration:none; color:#f99d20;}
#readMe{width:245px; display:none;}
#readMeHeadlines{border-top:1px solid #3d4245; padding-top:10px; height:99px;}
#readMeRSS{background:url(../img/icon-rss.png) 0 7px no-repeat; font-size:18px; padding-left:15px; text-decoration:none; color:#cccccc;}
#readMeRSS:hover{text-decoration:none; color:#ffffff;}
#readMe li{clear:both; margin-bottom:15px;}
#readMeHeadlines a:link, #readMe a:visited{text-decoration:none; color:#cccccc;}
#readMeHeadlines a:hover, #readMe a:visited{text-decoration:none; color:#ffffff;}
#readMe .postDate{text-transform:uppercase; font-size:9px; color:#505050; float:right; margin-top:-5px;}
#viewBlogLink{margin-top:15px; text-decoration:none; color:#f58320;}
#viewBlogLink:hover{text-decoration:none; color:#f99d20;}
#repeatNavigationContainer{width:924px; height:25px; margin:0 auto;}
#repeatNavigation{}
#repeatNavigation a{color:#3d454b;}
#repeatNavigation li{display:inline; margin-left:5px;}
#repeatNavigation a:link, #repeatNavigation a:visited{text-decoration:none;}
#repeatNavigation a:hover,#repeatNavigation a:active{text-decoration:none; color:#bbbbbb; border-bottom:1px solid #bbbbbb;}
.activeRepeat{color:#bbbbbb !important;}
#disclaimerBar{height:25px; background-color:#0f1317; border-top:1px solid #1e282f}
#disclaimerBar p{display:block; width:924px; margin:5px auto 0 auto; color:#3c464c; font-size:10px;}
#disclaimerBar a:link, #disclaimerBar a:visited{text-decoration:none; color:#3c464c;}
#disclaimerBar a:hover, #disclaimerBar a:active{text-decoration:none; color:#646b6f; border-bottom:1px solid #646b6f;}
/* ///// About Page ID Selectors ///// */
#aboutPhoto{margin:25px 15px 0 -30px;}
#skillsOverview{background:url(../img/bg-skillsoverview.png) no-repeat; height:500px; padding:25px 25px 0 25px;}
#skillsOverview p{margin-bottom:25px;}
#techList{width:180px; margin-left:35px;}
#techList li{margin-bottom:10px;}
#techAdd{margin-right:25px; font-size:70px;}
#softList{width:180px;}
#softList li{margin-bottom:10px;}
#softEquals{margin-right:25px; font-size:70px;}
#resumeList{width:150px;}
#resumeList li{margin-bottom:10px;}
/* ///// Work Page ID Selectors ///// */
#projectView{background:url(../img/bg-projectview.png) no-repeat; height:500px; padding:25px 25px 0 25px;}
#projectAccordion{margin:25px 0;}
#projectAccordion h3{background:url(../img/bg-25percent.png) repeat; width:280px; padding:5px 0 5px 10px; border-bottom:1px solid #3c464c;}
#projectAccordion li a:link, #projectAccordion a:visited{color:#cccccc;}
#projectAccordion li a:hover, #projectAccordion a:active{color:#ffffff; border-bottom:none;}
#websiteDesign{background:url(../img/bg-50percent.png) repeat; width:280px; padding:10px 0 0 10px; border-bottom:1px solid #3c464c;}
#websiteDesignList{}
#identityDesign{background:url(../img/bg-50percent.png) repeat; width:280px; padding:10px 0 0 10px; border-bottom:1px solid #3c464c;}
#identityDesignList{}
#graphicDesign{background:url(../img/bg-50percent.png) repeat; width:280px; padding:10px 0 0 10px; border-bottom:1px solid #3c464c;}
#graphicDesignList{}
#printDesign{background:url(../img/bg-50percent.png) repeat; width:280px; padding:10px 0 0 10px; border-bottom:1px solid #3c464c;}
#printDesignList{}
#externalContent{height:435px; overflow:hidden;}
#externalContent img{border:6px solid #0f1317;}
#externalContent ul{height:15px; display:block; margin-top:-17px; font-size:11px;}
#externalContent li{display:inline; margin-left:5px;}
#externalContent p{margin-top:5px;}
#externalContent a:hover{border-bottom:none !important;}
#externalBackLink{position:relative; top:100px;}
/* ///// Contact Page ID Selectors ///// */
#contactFormContainer{background:url(../img/bg-contactform.png) no-repeat; height:500px; padding:25px 25px 0 25px;}
#contactFormContainer label{display:block; margin:5px 0;}
#formLeft{margin-right:25px;}
#formLeft input{display:block; width:200px; border:1px solid #1e2327; background-color:#eeeeee; color:#909090;}
#formLeft input:focus{display:block; width:200px; border:1px solid #3c464c; background-color:#ffffff; color:#303030;}
#formRight{}
#formRight textarea{display:block; border:1px solid #1e2327; background-color:#eeeeee; color:#909090; width:300px; height:114px;}
#formRight textarea:focus{display:block; border:1px solid #3c464c; background-color:#ffffff; color:#303030;}
#formRight input{display:block; margin-top:10px; background-color:#1e2327; color:#cccccc; border:1px solid #3c464c; padding:5px;}
#contactOptions{}
#contactOptions li{margin-bottom:10px;}
/* ///// Class Selectors ///// */
.listHead{font-size:14px; font-weight:bold;}
.workHighlight{height:400px; margin-bottom:10px; position:absolute; top:410px;}
.workHighlight img{border:6px solid #0f1317;}
.workHighlight p{color:#a9a9a9; width:550px;}
/* ///// About Page Class Selectors ///// */
.htmlItem{background:url(../img/icon-xhtml.png) no-repeat; height:24px; padding-left:30px;}
.phpItem{background:url(../img/icon-php.png) no-repeat; height:24px; padding-left:30px;}
.jsItem{background:url(../img/icon-js.png) no-repeat; height:24px; padding-left:30px;}
.asItem{background:url(../img/icon-as.png) no-repeat; height:24px; padding-left:30px;}
.aiItem{background:url(../img/icon-illustrator.png) no-repeat; height:22px; padding:2px 0 0 30px;}
.dwItem{background:url(../img/icon-dreamweaver.png) no-repeat; height:22px; padding:2px 0 0 30px;}
.flItem{background:url(../img/icon-flash.png) no-repeat; height:22px; padding:2px 0 0 30px;}
.psItem{background:url(../img/icon-photoshop.png) no-repeat; height:22px; padding:2px 0 0 30px;}
.pdfItem{background:url(../img/icon-pdf.png) no-repeat; height:24px; padding-left:30px; margin-top:30px;}
.docItem{background:url(../img/icon-doc.png) no-repeat; height:24px; padding-left:30px;}
.txtItem{background:url(../img/icon-txt.png) no-repeat; height:24px; padding-left:30px;}
/* ///// Work Page Class Selectors ///// */
/*.ui-accordion{position:absolute;}*/
.projectLink{}
.projectLink:hover{border:none;}
.projectItem{position:relative; margin:0 0 10px 15px;}
.projectThumbnail{border:6px solid #1e2327;}
.projectName{font-size:10px; position:absolute; right:6px; bottom:9px; text-align:right;}
/* ///// Contact Page Class Selectors ///// */
.sendSuccess{position:absolute;}
.sendError{position:absolute;}
.error{}
/* Common Class Selectors */
.floatLeft{float:left;}
.floatRight{float:right;}
.clear{clear:both;}
.vanish{display:none !important;}
.hide{visibility:hidden !important;}
.show{display:block !important;}
/* Color Class Selectors */
.orange{color:#f58320;}
.lime{color:#c7dd07;}
.cranberry{color:#a61a45;}
.lightGrey{color:#eeeeee;}
/* ///// sIFR Styles Begin Here - See and ///// */
@media screen {
.sIFR-flash{visibility: visible !important;margin: 0;padding: 0;}
.sIFR-replaced, .sIFR-ignore{visibility:visible !important;}
.sIFR-alternate{position:absolute; left:0; top:0; width:0; height:0; display:block; overflow:hidden;}
.sIFR-replaced div.sIFR-fixfocus{margin:0pt; padding:0pt; overflow:auto; letter-spacing:0px; float:none;}
/*Hide Adblock Object tab: the text should show up just fine, not poorly with a tab laid over it.*/
.sIFR-flash + div[adblocktab=true]{display: none !important;}
}
@media print {
.sIFR-flash{display:none !important; height:0; width:0; position:absolute; overflow:hidden;}
.sIFR-alternate {visibility:visible !important; display:block !important; position:static !important; left:auto !important; top:auto !important; width:auto !important; height:auto !important;}
}
/*
Place CSS rules for to-be-replaced elements here. Prefix by .sIFR-active
so they only apply if sIFR is active. Make sure to limit the CSS to the screen
media type, in order not to have the printed text come out weird.
*/
@media screen {
.sIFR-active #mainNavigation li {visibility:hidden; font-family:Verdana; line-height:1em; font-size:14px; position:relative; top:2px;}
.sIFR-active #logo {visibility:hidden; font-family:Verdana; line-height:1em; font-size:48px; position:relative; top:10px;}
.sIFR-active #taglineHi {visibility:hidden; font-family:Verdana; line-height:1em; position:relative; font-size:95px; top:25px; right:3px;}
.sIFR-active #taglineName {visibility:hidden; font-family:Verdana; line-height:1em; font-size:35px; position:relative; top:16px; right:4px;}
.sIFR-active #taglineProfession {visibility:hidden; font-family:Verdana; line-height:1em; font-size:17px; position:relative; top:16px; right:1px;}
.sIFR-active #footerCallouts h4 {visibility:hidden; font-family:Verdana; line-height:1em; position:relative; top:8px; width:100px;}
.sIFR-active #aboutHead, .sIFR-active #workHead, .sIFR-active #contactHead, .sIFR-active #sitemapHead{visibility:hidden; font-family:Verdana; line-height:1em;}
}