/* v3.css @author Stephen Chai on 2010-06-14. @copyright http://stephen.chai.name. All Rights Reserved. @created 2010-06-14. */ /* reset eric meyers style */ a, abbr, acronym, address, applet, b, big, blockquote, body, caption, center, cite, code, dd, del, dfn, div, dl, dt, em, fieldset, font, form, h1, h2, h3, h4, h5, h6, html, i, iframe, img, ins, kbd, label, legend, li, object, ol, p, pre, q, s, samp, small, span, strike, strong, sub, sup, table, tbody, td, tfoot, th, thead, tr, tt, u, ul, var { background: transparent; border: 0; font-size: 100%; margin: 0; outline: 0; padding: 0; vertical-align: baseline; } blockquote, q { quotes: none; } body { line-height: 1; } del { text-decoration: line-through; } ins { text-decoration: none; } /* remember to highlight inserts somehow! */ ol, ul { list-style: none; } q { quotes: none; } table { border-collapse: collapse; border-spacing: 0; } /* tables still need 'cellspacing="0"' in the markup */ :focus { outline: 0; } /* remember to define focus styles! */ /* aligners */ .align_center { text-align: center; } .align_justify { text-align: justify; } .align_left { text-align: left; } .align_right { text-align: right; } /* clearing */ .clear { clear: both; display: block; overflow: hidden; visibility: hidden; width: 0; height: 0; } /* typography */ em, .em { font-style: italic; } strong, .strong { font-weight: bold; } .type_sans { font-family: Helvetica, Arial, sans-serif; } .type_script { font-family: ; } .type_serif { font-family: 'Times New Roman', Times, serif; } /* screen styles */ @media screen { body { background: #EAEAEA; color: #999999; font-size: 76%; } /* contact form */ #contact_form { height: 220px; overflow: hidden; position: relative; width: 100%; } #contact_form label { color: #82AEC7; display: block; font-size: 1.16667em; font-weight: bold; } #contact_form label.error { color: #FF3333; } #contact_form p { margin-bottom: 2em; } #contact_form .form_a { height: 180px; left: 25px; position: absolute; top: 20px; width: 350px; } #contact_form .form_b { height: 180px; left: 390px; position: absolute; top: 20px; width: 350px; } #contact_form .form_content { position: relative; } #contact_form .form_controls { background: url(/img/form_controls.png) top center no-repeat; height: 35px; position: absolute; text-align: center; top: 185px; width: 100%; } #contact_form .input_text { background: #EAEAEA; color: #666666; border: 0; display: block; font-size: 1.16667em; line-height: 1em; margin-top: .5em; padding: 5px; width: 340px; } #contact_form .input_text { background: -moz-linear-gradient(top, #EAEAEA, #F2EFE3); background: -webkit-gradient(linear, left top, left bottom, from(#EAEAEA), to(#F2EFE3)); } #contact_form .loading { background: url(/img/form_loading.gif) center center no-repeat; display: none; height: 35px; left: 0; position: absolute; top: 0; width: 100%; } #contact_form textarea.input_text { height: 87px; line-height: 1.2em; } /* content */ #content { padding-top: 6em; } #content .section { padding-bottom: 6em; position: relative; } #content .section .content { background: url(/img/section_content.png) 0 0 no-repeat; height: 220px; margin-top: 2em; position: relative; } /* ie6 sez no */ * html #content { display: none; } /* ie6 content */ #content_unsupported { color: #333333; padding: 6em 0; } #content_unsupported p { font-size: 2em; line-height: 1.6em; text-align: center; } /* footer */ #footer { background: url(/img/footer.png) bottom left repeat-x; height: 160px; position: relative; } #footer address { color: #777777; font-style: normal; padding-top: 2em; text-align: center; } #footer_mark { background: url(/img/footer_mark.png) center center no-repeat; bottom: 0; height: 100px; position: absolute; width: 100%; } /* ie6 sez no */ * html #footer { display: none; } /* header */ #header { background: #111111 url(/img/header.png) 0 0 repeat-x; color: white; height: 360px; } #header_mark { background: url(/img/header_mark.png) center top no-repeat; height: 175px; } #header_title { background-image: url(/img/header_title.png); background-position: center top; height: 150px; } /* header nav */ #header_nav { background: url(/img/header.png) left bottom repeat-x; height: 35px; padding-bottom: 72px; padding-top: 36px; top: 293px; position: absolute; width: 100%; z-index: 100; } #header_nav li { display: block; height: 35px; } #header_nav li a { background: url(/img/tab.png) no-repeat; display: block; font-size: 1.16667em; font-weight: bold; height: 35px; line-height: 35px; text-align: center; text-decoration: none !important; } #header_nav li a:link, #header_nav li a:visited { background-position: 0 0; } #header_nav li a:hover, #header_nav li a:active { background-position: 0 -35px; color: white; } .header_nav_fixed { position: fixed !important; top: 0 !important; } /* ie6 sez nope */ * html #header_nav { display: none; } /* portfolio */ #portfolio_pieces { height: 180px; left: 0; overflow: hidden; padding: 20px 25px; position: relative; top: 0; width: 708px; } #portfolio_pieces ul { display: none; height: 180px; position: absolute; width: 710px; } #portfolio_pieces ul li { display: block; float: left; height: 180px; margin-right: 10px; position: relative; width: 170px; } #portfolio_pieces ul li.last { margin-right: 0; } #portfolio_pieces ul li a.fancybox { display: block; height: 180px; width: 170px; } #portfolio_pieces .tir_ext_link { bottom: 6px; position: absolute; left: 6px; } #portfolio_pieces .selected { display: block; } #portfolio_pieces .wrapper { position: relative; } /* portfolio gallery images */ #portfolio_gallery_images { display: none; } /* recognition badges */ #recognition_badges { margin-left: 25px; margin-top: 20px; width: 350px; } #recognition_badges li { display: block; float: left; height: 55px; margin-bottom: 15px; margin-right: 15px; width: 55px; } /* recognition quotes */ #recognition_quotes { height: 180px; left: 390px; overflow: hidden; position: absolute; width: 350px; } *:first-child+html #recognition_quotes { top: 16px; } /* ie7 hack */ #recognition_quotes li { display: none; height: 180px; position: absolute; width: 350px; } #recognition_quotes li.selected { display: block; } #recognition_quotes .quote { font-size: 1.16667em; line-height: 1.6em; } #recognition_quotes .by_line { bottom: 5px; color: #82AEC7; font-size: 1.16667em; position: absolute; text-align: right; width: 100%; } /* skills list */ #skills { height: 180px; padding: 20px 0 0 25px; } /* skills container */ #skills li { color: #EAEAEA; display: block; float: left; font-size: 1.16667em; font-weight: bold; height: 180px; line-height: 30px; margin-right: 10px; position: relative; text-shadow: -2px 2px 2px #000000; text-transform: uppercase; width: 30px; } *:first-child+html #skills li { margin-right: 5px; } /* ie8 hack */ #skills li:hover { top: -6px; height: 192px; box-shadow: 2px 2px 5px #000000; -moz-box-shadow: 0 0 5px #000000; -webkit-box-shadow: 0 0 20px #000000; } #skills li:hover span.skill_name { text-indent: 6px; } /* skills text */ #skills li span.skill_name { bottom: -150px; display: block; position: relative; text-indent: 12px; white-space: pre; -moz-transform: rotate(-90deg) translateY(2px); -o-transform: rotate(-90deg); -webkit-transform: rotate(-90deg); filter: progid:DXImageTransform.Microsoft.Matrix(M11=-0.00000000, M12=1.00000000, M21=-1.00000000, M22=-0.00000000,sizingMethod='auto expand'); -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=3)"; } #skills li span.skill_name { width: 180px\9; bottom: 0\9; } /*ie hacks*/ #skills li span.skill_desc { display: none; } /* specific styles */ #skills li.skills_18 { margin-right: 0; } #skills li.skills_01, #skills li.skills_18 { background: #AC6928; } #skills li.skills_02, #skills li.skills_17 { background: #A36E3B; } #skills li.skills_03, #skills li.skills_16 { background: #987151; } #skills li.skills_04, #skills li.skills_15 { background: #8D7563; } #skills li.skills_05, #skills li.skills_14 { background: #7F7976; } #skills li.skills_06, #skills li.skills_13 { background: #6C7E90; } #skills li.skills_07, #skills li.skills_12 { background: #61809C; } #skills li.skills_08, #skills li.skills_11 { background: #4984B0; } #skills li.skills_09, #skills li.skills_10 { background: #1488CA; } /* tiptip */ #tiptip_holder { display: none; position: absolute; top: 0; left: 0; z-index: 1000; } #tiptip_holder.tip_top { padding-bottom: 5px; } #tiptip_holder.tip_bottom { padding-top: 5px; } #tiptip_holder.tip_right { padding-left: 5px; } #tiptip_holder.tip_left { padding-right: 5px; } #tiptip_content { background: #C1D7E3; background: -moz-linear-gradient(-90deg, #82AEC7, #FFFFFF); background: -webkit-gradient(linear, left top, left bottom, from(#82AEC7), to(#FFFFFF)); border: 1px solid white; color: #444444; font-family: 'Times New Roman', Times, serif; font-style: italic; line-height: 1.4em; padding: 1em; text-align: center; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; box-shadow: 0px 2px 5px #000000; -moz-box-shadow: 0px 2px 5px #000000; -webkit-box-shadow: 0px 2px 5px #000000; filter: progid:DXImageTransform.Microsoft.Shadow(Strength=2, Direction=135, Color='#000000'); -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=5, Direction=135, Color='#000000')"; } #tiptip_content img { display: block; height: 30px; margin: 0 auto .5em; width: 30px; } #tiptip_content strong { color: #222222; display: block; font-family: Helvetica, Arial, sans-serif; font-style: normal; } #tiptip_arrow, #tiptip_arrow_inner { position: absolute; border-color: transparent; border-style: solid; border-width: 6px; height: 0; width: 0; filter: alpha(opacity = 0); -ms-filter: "alpha(opacity = 0)";} #tiptip_holder.tip_top #tiptip_arrow { border-top-color: #82AEC7; border-top-color: white; } /* Variable Grid System. Learn more ~ http://www.spry-soft.com/grids/ Based on 960 Grid System - http://960.gs/ Licensed under GPL and MIT. */ .grid_container_12 { margin-left: auto; margin-right: auto; width: 768px; } .grid_1, .grid_2, .grid_3, .grid_4, .grid_5, .grid_6, .grid_7, .grid_8, .grid_9, .grid_10, .grid_11, .grid_12 { display: inline; float: left; position: relative; margin-left: 5px; margin-right: 5px; } .grid_alpha { margin-left: 0; } .grid_omega { margin-right: 0; } .grid_container_12 .grid_1 { width: 54px; } .grid_container_12 .grid_2 { width: 118px; } .grid_container_12 .grid_3 { width: 182px; } .grid_container_12 .grid_4 { width: 246px; } .grid_container_12 .grid_5 { width: 310px; } .grid_container_12 .grid_6 { width: 374px; } .grid_container_12 .grid_7 { width: 438px; } .grid_container_12 .grid_8 { width: 502px; } .grid_container_12 .grid_9 { width: 566px; } .grid_container_12 .grid_10 { width: 630px; } .grid_container_12 .grid_11 { width: 694px; } .grid_container_12 .grid_12 { width: 758px; } .grid_container_12 .grid_prefix_1 { padding-left: 64px; } .grid_container_12 .grid_prefix_2 { padding-left: 128px; } .grid_container_12 .grid_prefix_3 { padding-left: 192px; } .grid_container_12 .grid_prefix_4 { padding-left: 256px; } .grid_container_12 .grid_prefix_5 { padding-left: 320px; } .grid_container_12 .grid_prefix_6 { padding-left: 384px; } .grid_container_12 .grid_prefix_7 { padding-left: 448px; } .grid_container_12 .grid_prefix_8 { padding-left: 512px; } .grid_container_12 .grid_prefix_9 { padding-left: 576px; } .grid_container_12 .grid_prefix_10 { padding-left: 640px; } .grid_container_12 .grid_prefix_11 { padding-left: 704px; } .grid_container_12 .grid_suffix_1 { padding-right: 64px; } .grid_container_12 .grid_suffix_2 { padding-right: 128px; } .grid_container_12 .grid_suffix_3 { padding-right: 192px; } .grid_container_12 .grid_suffix_4 { padding-right: 256px; } .grid_container_12 .grid_suffix_5 { padding-right: 320px; } .grid_container_12 .grid_suffix_6 { padding-right: 384px; } .grid_container_12 .grid_suffix_7 { padding-right: 448px; } .grid_container_12 .grid_suffix_8 { padding-right: 512px; } .grid_container_12 .grid_suffix_9 { padding-right: 576px; } .grid_container_12 .grid_suffix_10 { padding-right: 640px; } .grid_container_12 .grid_suffix_11 { padding-right: 704px; } .grid_container_12 .grid_push_1 { left: 64px; } .grid_container_12 .grid_push_2 { left: 128px; } .grid_container_12 .grid_push_3 { left: 192px; } .grid_container_12 .grid_push_4 { left: 256px; } .grid_container_12 .grid_push_5 { left: 320px; } .grid_container_12 .grid_push_6 { left: 384px; } .grid_container_12 .grid_push_7 { left: 448px; } .grid_container_12 .grid_push_8 { left: 512px; } .grid_container_12 .grid_push_9 { left: 576px; } .grid_container_12 .grid_push_10 { left: 640px; } .grid_container_12 .grid_push_11 { left: 704px; } .grid_container_12 .grid_pull_1 { left: -64px; } .grid_container_12 .grid_pull_2 { left: -128px; } .grid_container_12 .grid_pull_3 { left: -192px; } .grid_container_12 .grid_pull_4 { left: -256px; } .grid_container_12 .grid_pull_5 { left: -320px; } .grid_container_12 .grid_pull_6 { left: -384px; } .grid_container_12 .grid_pull_7 { left: -448px; } .grid_container_12 .grid_pull_8 { left: -512px; } .grid_container_12 .grid_pull_9 { left: -576px; } .grid_container_12 .grid_pull_10 { left: -640px; } .grid_container_12 .grid_pull_11 { left: -704px; } /* headers */ .h2 { background: url(/img/h2.png) 0 0 no-repeat; font-size: 1.16667em; font-weight: bold; height: 30px; line-height: 30px; text-align: center; width: 118px; } /* reverse text header */ .reverse { color: #EAEAEA; text-shadow: 2px 2px 2px #000000; } h2.reverse { color: #EAE0CC; } /* scroll controls */ ul.scroll_controls { margin: 0 5px; position: absolute; text-align: right; top: 285px; width: 758px; } ul.scroll_controls li { display: inline-block; height: 10px; margin-right: 5px; width: 10px; } *:first-child+html ul.scroll_controls li { display: inline; } /* ie7 hack */ ul.scroll_controls a { background: url(/img/scrolly_dots.png); display: block; height: 100%; width: 100%; text-indent: 9999px; } ul.scroll_controls a:link, ul.scroll_controls a:visited { background-position: 0 0; } ul.scroll_controls a.selected, ul.scroll_controls a:hover, ul.scroll_controls a:active { background-position: 0 -20px; } /* box shadow */ .shadow { box-shadow: 0 0 5px #000000; -moz-box-shadow: 0 0 5px #000000; -webkit-box-shadow: 0 0 5px #000000; filter: progid:DXImageTransform.Microsoft.Shadow(Strength=5, Direction=135, Color='#000000') -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=5, Direction=135, Color='#000000')"; } a.shadow:hover, a.shadow:active { box-shadow: 0 0 20px #1488CA; -moz-box-shadow: 0 0 20px #1488CA; -webkit-box-shadow: 0 0 20px #1488CA; } /* text-image replacement */ .tir { background-repeat: no-repeat; display: block; line-height: 0; margin: 0; padding: 0; text-indent: -9999px; } .tir_blurb { background-image: url(/img/blurbs.png); height: 30px; } .tir_blurb_about { background-position: right 0; } .tir_blurb_portfolio { background-position: left -30px; } .tir_blurb_recognition { background-position: right -60px; } .tir_blurb_contact { background-position: left -90px; } .tir_error { background: url(/img/error.png) center center no-repeat; height: 220px; } .tir_ext_link { background: url(/img/ext_link.png) 0 0; height: 32px; width: 158px; } .tir_ext_link:hover, .tir_ext_link:active { background-position: 0 -32px; } .tir_recognition { background-image: url(/img/recognition_badges.png); height: 55px; width: 55px; } .tir_recognition_icatching { background-position: 0 -0; } .tir_recognition_design_snips { background-position: 0 -55px; } .tir_recognition_design_fridge { background-position: 0 -110px; } .tir_recognition_smashing { background-position: 0 -165px; } .tir_recognition_cart_frenzy { background-position: 0 -220px; } .tir_recognition_css_nature { background-position: 0 -275px; } .tir_recognition_pattern_tap { background-position: 0 -330px; } .tir_recognition_css_breeze { background-position: 0 -385px; } .tir_recognition_foxycart { background-position: 0 -440px; } .tir_recognition_best_web_gallery { background-position: 0 -495px; } .tir_thanks { background: url(/img/thanks.png) center center no-repeat; height: 220px; } /* fancy box styles */ #fancybox-loading{position:fixed;top:50%;left:50%;height:40px;width:40px;margin-top:-20px;margin-left:-20px;cursor:pointer;overflow:hidden;z-index:1104;display:none;} * html #fancybox-loading{/* IE6 */position:absolute;margin-top:0;} #fancybox-loading div{position:absolute;top:0;left:0;width:40px;height:480px;background-image:url('/img/fancybox/fancybox.png');} #fancybox-overlay{position:fixed;top:0;left:0;bottom:0;right:0;background:#000;z-index:1100;display:none;} * html #fancybox-overlay{/* IE6 */position:absolute;width:100%;} #fancybox-tmp{padding:0;margin:0;border:0;overflow:auto;display:none;} #fancybox-wrap{position:absolute;top:0;left:0;margin:0;padding:20px;z-index:1101;display:none;} #fancybox-outer{position:relative;width:100%;height:100%;background:#FFF;} #fancybox-inner{position:absolute;top:0;left:0;width:1px;height:1px;padding:0;margin:0;outline:none;overflow:hidden;} #fancybox-hide-sel-frame{position:absolute;top:0;left:0;width:100%;height:100%;background:transparent;} #fancybox-close{position:absolute;top:-15px;right:-15px;width:30px;height:30px;background-image:url('/img/fancybox/fancybox.png');background-position:-40px 0px;cursor:pointer;z-index:1103;display:none;} #fancybox_error{color:#444;padding:7px;margin:0;} #fancybox-content{height:auto;width:auto;padding:0;margin:0;} #fancybox-img{width:100%;height:100%;padding:0;margin:0;border:none;outline:none;line-height:0;vertical-align:top;-ms-interpolation-mode:bicubic;} #fancybox-frame{position:relative;width:100%;height:100%;border:none;display:block;} #fancybox-title{position:absolute;bottom:0;left:0;font-size:12px;z-index:1102;} #fancybox-title .left { display: block; float: left; padding-left: 10px; } #fancybox-title .right { display: block; float: right; padding-right: 10px; } .fancybox-title-inside{padding:10px 0;text-align:center;color:#333;} .fancybox-title-outside{padding-top:5px;color:#FFF;text-align:center;font-weight:bold;} .fancybox-title-over{color:#FFF;text-align:left;} #fancybox-title-over{padding:10px;background-image:url('/img/fancybox/fancy_title_over.png');display:block;} #fancybox-title-wrap{display:inline-block;} #fancybox-title-wrap span{height:32px;float:left;} #fancybox-title-left{padding-left:15px;background-image:url('/img/fancybox/fancybox.png');background-position:-40px -90px;background-repeat:no-repeat;} #fancybox-title-main{font-weight:bold;line-height:29px;background-image:url('/img/fancybox/fancybox-x.png');background-position:0px -40px;color:#FFF;} #fancybox-title-right{padding-left:15px;background-image:url('/img/fancybox/fancybox.png');background-position:-55px -90px;background-repeat:no-repeat;} #fancybox-left,#fancybox-right{position:absolute;bottom:0px;height:100%;width:35%;cursor:pointer;outline:none;background-image:url('/img/fancybox/blank.gif');z-index:1102;display:none;} #fancybox-left{left:0px;} #fancybox-right{right:0px;} #fancybox-left-ico,#fancybox-right-ico{position:absolute;top:50%;left:-9999px;width:30px;height:30px;margin-top:-15px;cursor:pointer;z-index:1102;display:block;} #fancybox-left-ico{background-image:url('/img/fancybox/fancybox.png');background-position:-40px -30px;} #fancybox-right-ico{background-image:url('/img/fancybox/fancybox.png');background-position:-40px -60px;} #fancybox-left:hover,#fancybox-right:hover{visibility:visible;/* IE6 */} #fancybox-left:hover span{left:20px;} #fancybox-right:hover span{left:auto;right:20px;} .fancy-bg{position:absolute;padding:0;margin:0;border:0;width:20px;height:20px;z-index:1001;} #fancy-bg-n{top:-20px;left:0;width:100%;background-image:url('/img/fancybox/fancybox-x.png');} #fancy-bg-ne{top:-20px;right:-20px;background-image:url('/img/fancybox/fancybox.png');background-position:-40px -162px;} #fancy-bg-e{top:0;right:-20px;height:100%;background-image:url('/img/fancybox/fancybox-y.png');background-position:-20px 0px;} #fancy-bg-se{bottom:-20px;right:-20px;background-image:url('/img/fancybox/fancybox.png');background-position:-40px -182px;} #fancy-bg-s{bottom:-20px;left:0;width:100%;background-image:url('/img/fancybox/fancybox-x.png');background-position:0px -20px;} #fancy-bg-sw{bottom:-20px;left:-20px;background-image:url('/img/fancybox/fancybox.png');background-position:-40px -142px;} #fancy-bg-w{top:0;left:-20px;height:100%;background-image:url('/img/fancybox/fancybox-y.png');} #fancy-bg-nw{top:-20px;left:-20px;background-image:url('/img/fancybox/fancybox.png');background-position:-40px -122px;} }