@charset "utf-8"; /* CSS Document */ /* STRUCTURE */ #page-wrap { width: 936px; margin: 0 auto; } #page-wrap-clean { width: 630px; margin: 0 auto; } #header { padding: 20px 0; overflow: hidden; } h1#logo { width: 171px; height: 27px; float: left; margin: 0; } h1#logo a { text-indent: -9999px; display: block; height: 27px; background: url(images/logo.png) no-repeat; } #header ul { list-style: none; float: right; width: 400px; text-align: right; padding: 10px 0 0 0; } #header ul li { display: inline; } #header ul li a { background: #7e7e7e; text-transform: uppercase; color: white; padding: 3px 10px; letter-spacing: 2px; margin: 0 0 0 10px; } #header ul li a:hover, #portfolio ul li.portfolio a, #about ul li.about a, #resume ul li.resume a { background: #222; } #main-block { background: url(images/content-bg.png) repeat-y; position: relative; margin: 0 0 25px 0; width: 100%; } /* BLOG AREA */ #blog-col { width: 334px; float: left; padding: 10px 16px; } .post { position: relative; } .post a, .commentlist a { color: #900; border-bottom: 1px dotted white; } .post a:hover, .commentlist a:hover { color: black; border-color: black; } .post ul, .post ol { margin: 0 0 12px 20px; } .post img { max-width: 100%; } h2 a { color: #4b4b4b; } h2 a:hover { color: #900; } .datebox { width: 50px; background: #222; position: absolute; top: 0; left: -76px; padding: 5px; color: #eee; } #older-newer { margin: 10px 0; overflow: auto; padding: 10px 0; } #older-posts-link { width: 40%; float: left; } #newer-posts-link { width: 40%; float: right; text-align: right; } /* SIDEBAR SOCIAL AREA */ #social-col { width: 329px; float: left; padding: 10px 16px; } .social-box { margin: 0 0 22px 0; } h3.title { text-indent: -9999px; width: 220px; height: 25px; margin: 0 0 6px 0; } h3#projects { background: url(images/title-projects.png) no-repeat; } h3#flickr { background: url(images/title-flickr.png) no-repeat; } h3#scrnshots { background: url(images/title-scrnshots.png) no-repeat; } h3#fwend { background: url(images/title-fwend.png) no-repeat; } .scrnshot { width: 47px; } .flickr { overflow: hidden; } .thumb { width: 54px; } .flickr-thumb { height: 36px; overflow: hidden; float: left; } #fwend-list { list-style: none; line-height: 28px; } #fwend-list li { display: inline; } #fwend-list li a { background: #a3d8d8; text-transform: uppercase; color: white; padding: 3px 10px; letter-spacing: 2px; margin: 0 6px 0 0; } #fwend-list li a:hover { background: #77b8b8; } /* SIDEBAR PERSONAL AREA */ #me-col { width: 209px; position: absolute; right: 0; bottom: 0; top: 0; padding: 0 0 78px 0; } #contact-link { display: block; background: #ffd6a0; position: relative; top: -3px; padding: 8px; text-align: center; color: #222; margin: 0 0 15px 0; } #contact-link:hover { background: #ecb267; } h3#twitter { width: 224px; position: absolute; bottom: 0; left: 0; text-indent: -9999px; height: 78px; background: url(images/twitter-bird.png); margin: 0; } .tweet { margin: 0 0 15px 0; } .tweet p { font-size: 14px; text-align: center; padding: 0 10px; color: #986523; } .tweet p em { color: #cfa46b; } .tweet a { color: #fd9206; } /* COMMENTS */ #commentform textarea, #commentform input[type=text] { border: 5px solid #ddd; padding: 4px; font: 12px Georgia, Serif; } #commentform textarea:focus, #commentform input[type=text]:focus { border-color: #999; } #commentform textarea { width: 313px; } #commentform input[type=text] { width: 150px; } ol.commentlist { list-style:none; margin:0; padding:0; text-indent:0; } ol.commentlist li { border: 5px solid #ddd; height: 1%; margin: 0 0 10px; padding: 5px 7px 5px 57px; position: relative; } ol.commentlist li div.vcard cite.fn { font-style: normal; } ol.commentlist li div.vcard cite.fn a.url { color:#c00; text-decoration:none; font-weight: bold; } ol.commentlist li div.vcard cite.fn a.url:hover { color:#000; } ol.commentlist li div.vcard img.avatar { border:5px solid #ddd; left:7px; position:absolute; top:7px; } ol.commentlist li div.comment-meta { display: none; } ol.commentlist li div.comment-meta a { color:#333; text-decoration:none; } ol.commentlist li div.comment-meta a:hover { color:#000; } ol.commentlist li p { margin:0 0 1em; } ol.commentlist li ul { list-style:square; margin:0 0 1em; padding:0; text-indent:0; } ol.commentlist li div.reply { display: none; } ol.commentlist li div.reply:hover { background:#c30; border:2px solid #c00; } ol.commentlist li div.reply a { color:#fff; text-decoration:none; text-transform:uppercase; } ol.commentlist li ul.children { list-style:none; margin:1em 0 0; text-indent:0; } ol.commentlist li ul.children li.depth-2 { margin:0 0 .25em; } ol.commentlist li ul.children li.depth-3 { margin:0 0 .25em; } ol.commentlist li ul.children li.depth-4 { margin:0 0 .25em; } ol.commentlist li.even { background:#f7f7f7; } ol.commentlist li.odd { background:#fff; } /* PORTFOLIO */ #portfolio #main-block { background: white; } #main-block-clean { background: white; } #slider { width: 800px; margin: 0 auto; position: relative; border: 10px solid #ccc; } .scroll { overflow: hidden; width: 800px; margin: 0 auto; position: relative; } .scrollContainer { position: relative; } .scrollContainer div.panel { padding: 10px; width: 500px; height: 515px; } #left-shadow { position: absolute; top: 0; left: 0; width: 12px; bottom: 0; background: url(images/leftshadow.png) repeat-y; } #right-shadow { position: absolute; top: 0; right: 0; width: 12px; bottom: 0; background: url(images/rightshadow.png) repeat-y; } .inside { padding: 10px; border: 1px solid #999; } .inside img { display: block; border: 1px solid #666; margin: 0 0 10px 0; width: 480px; } .inside h2 { font-weight: normal; color: #111; font-size: 36px; margin: 0 0 8px 0; } .inside p { font-size: 12px; color: #999; } .scrollButtons { position: absolute; top: 127px; cursor: pointer; } .scrollButtons.left { left: -45px; } .scrollButtons.right { right: