/* main.css Global Stylesheet Created: Nov. 5, 2008 Creator: Matt Kircher Pixels to Ems ----------------------------------- PX EM PX EM 10 0.625 21 1.313 11 0.689 22 1.375 12 0.750 23 1.438 14 0.875 24 1.500 15 0.938 25 1.563 16 1.000 26 1.625 17 1.064 27 1.688 18 1.125 28 1.750 19 1.188 29 1.813 20 1.250 30 1.875 */ /*--Imports --------------------------------------------------------*/ @import url("css_reset.css"); @import url("clearing.css"); @import url("forms.css"); @import url("thickbox.css"); /*--General --------------------------------------------------------*/ body{ font-family:Arial, Helvetica, sans-serif; font-size:1em; text-align:center; background:url(../images/body_bg.jpg) top left repeat-x #1F5D5D; } a{ color:#F1680A; font-weight:bold; text-decoration:none; } a:hover{} h1{ font-size:1.75em; } h2{ font-size:1.625em; } h3{ font-size:1.5em; letter-spacing:-0.050em; } h4{ font-size:1.064em; } h5{ font-size:0.75em; } h6{ font-size:0.689em; } h1, h2, h3, h4, h5, h6{ font-weight:bold; } h1, h2, h3, h4, h5, h6, p, ul, ol{ margin:8px 0px; } ol{ list-style:decimal !important; padding-left:18px !important; } hr{ color:#E7D7AB; background-color:#E7D7AB; border:none; height:1px; margin:20px 0px; } /* (IE6 PNG Fix) */ * html #portfolio-preview-tray, * html #more_thumbnails_button{ behavior:url(iepngfix.htc); } /*--Classes --------------------------------------------------------*/ /*colors*/ .color_teal{ color:#399; } .color_tan{ color:#FBEDC4; } .color_orange{ color:#F1680A; } .color_brown{ color:#251C0A; } /*general elements*/ p.important{ font-size:12px !important; font-weight:bold; } .checklist{ list-style-image:url(../images/checkmark_large.jpg); padding-left:18px; } .bulleted { padding-left:18px !important; } .bulleted li{ list-style:disc !important; } .blocklist > li{ list-style:none; background:url(../images/block_bullet.jpg) top left no-repeat; padding-left:25px; } .inline_list li{ display:inline; } .double_list li{ width:43%; float:left; } .fancy_button{ display:block; float:left; background:url(../images/fancy_bttn_bg.jpg) top left repeat-x #F1680A; color:#642300 !important; padding:3px 10px; text-transform:capitalize; } .fancy_button:hover{ color:#913300; } /*grids*/ ._2column{} ._2column .left{ float:left; width:45%; margin-right:6%; } ._2column .right{ float:right; width:45%; } /*--Wrap --------------------------------------------------------*/ #wrap{ margin:auto; text-align:left; width:1000px; } /*--Header --------------------------------------------------------*/ #header{ background:url(../images/header_bg.jpg) top left repeat-x #399; position:relative; top:-8px !important; margin-bottom:-8px !important; } /*(logo)*/ #logo{ position:relative; top:56px; left:56px; } #logo h1 a{ display:block; width:232px; height:72px; margin-right:-232px; margin-bottom:-72px; background:url(../images/logo.jpg) top left no-repeat; overflow:hidden; text-indent:-10000px; } /*(all navigations)*/ #functional-nav ul, #main-nav ul, #gutter-nav ul{ position:relative; clear:both; margin:0px 0px !important; } #functional-nav li, #main-nav li, #gutter-nav li{ float:left; } #navigation{ width:675px; padding-left:325px; height:50px; } /*(functional-nav)*/ #functional-nav{} #functional-nav ul{ float:left; top:-90px; margin-bottom:-90px !important; } #functional-nav ul li{ margin-right:24px; } #functional-nav ul li.end_nav{} #functional-nav ul li a{ color:#FBEDC4; font-weight:bold; font-size:0.625em; text-transform:uppercase; } #functional-nav ul li a:hover, #functional-nav ul li.selected a{ color:#FFF; } #functional-nav ul li#sharethis{ position:relative; left:375px; padding:3px 5px; background-color:#FBEDC4; } #functional-nav ul li#sharethis .stbutton{ position:relative; top:-2px; left:2px; } #functional-nav ul li#sharethis .stbuttontext{ color:#F1680A; } /*(main-nav)*/ #main-nav{} #main-nav ul{ float:left; } #main-nav ul li{ margin-right:12px; padding-right:12px; border-right:1px solid #F5A34D; padding-top:15px; height:35px; } #main-nav ul li.end_nav{ border-right:0px; margin-right:0px; padding-right:0px; } #main-nav ul li a{ color:#FFF; text-transform:uppercase; } #main-nav ul li a:hover, #main-nav ul li.selected a{ color:#F5DC8C; } /*(sub-nav)*/ #sub-nav{} #sub-nav ul{ margin-left:43px; } #sub-nav ul li{ margin-bottom:10px; } #sub-nav ul li.end_nav{} #sub-nav ul li a{ font-size:1.167em; } #sub-nav ul li a:hover, #sub-nav ul li.selected a{ color:#F5DC8C; } /*(masthead)*/ #masthead{ height:242px; background:url(../images/mastheads/masthead_home.jpg) top left no-repeat; } /*--Content --------------------------------------------------------*/ #content{ clear:both; } #content h1, #content h2, #content h3, #content h4, #content h5, #content h6{ text-transform:capitalize; } /*(level 1)*/ #level-1{ background-color:#251C0A; padding:40px 0px 20px; color:#FFC; } #level-1 h1, #level-1 h2, #level-1 h3, #level-1 h4, #level-1 h5, #level-1 h6{ color:#FFF; } #level-1 p, #level-1 ul, #level-1 ol{ font-size:0.75em; } #level-1 ul p, #level-1 ol p{ font-size:1em; } #level-1 ul h1, #level-1 ol h1{ font-size:2.33em; } #level-1 ul h2, #level-1 ol h2{ font-size:2.16em; } #level-1 ul h3, #level-1 ol h3{ font-size:1.9em; } #level-1 ul h4, #level-1 ol h4{ font-size:1.416em; } #level-1 ul h5, #level-1 ol h5{ font-size:1em; } #level-1 ul h6, #level-1 ol h6{ font-size:0.916em; } #level-1 .subhead{ margin-bottom:0px; color:#F3D166; font-size:0.875em; letter-spacing:-0.030em; } /*(main-content)*/ #level-1 div.main-content{ float:right; width:585px; padding-right:90px; } #level-1 div.main-content p{ font-size:0.8125em; line-height:1.5em; /* 13px font */ } #level-1 .checklist{ list-style-image:url(../images/checkmark_large_on_brown.jpg); } /*(sub-content)*/ #level-1 div.sub-content{ float:left; width:275px; padding-left:25px; } /*(level 2)*/ #level-2{ padding:20px 0px 100px; background:url(../images/level2_bg.jpg) bottom left no-repeat #FBEDC4; } #level-2 a{ color:#F1680A; } #level-2 p, #level-2 ul, #level-2 ol{ font-size:0.75em; line-height:1.5em; } #level-2 p *, #level-2 ul *, #level-2 ol *{ font-size:inherit; } #level-2 ul h1, #level-2 ol h1{ font-size:2.33em; } #level-2 ul h2, #level-2 ol h2{ font-size:2.16em; } #level-2 ul h3, #level-2 ol h3{ font-size:1.9em; } #level-2 ul h4, #level-2 ol h4{ font-size:1.416em; } #level-2 ul h5, #level-2 ol h5{ font-size:1em; } #level-2 ul h6, #level-2 ol h6{ font-size:0.916em; } #level-2 .subhead{ margin-bottom:0px; font-size:0.875em; letter-spacing:-0.030em; } /*(main-content)*/ #level-2 div.main-content{ float:right; width:585px; padding-right:90px; } /*(sub-content)*/ #level-2 div.sub-content{ float:left; width:235px; padding-left:65px; } #level-2 div.sub-content p, #level-2 div.sub-content ul, #level-2 div.sub-content ol{ font-size:0.689em; color:#72571F; } #level-2 div.sub-content ul.checklist{ list-style-image:url(../images/checkmark_small.jpg); } /*(specific elements)*/ #home_portfolio_viewer{ display:none; width:275px; height:185px; overflow:hidden; background:url(../images/home_portfolio_viewer_loading.gif) center center no-repeat #251C0A; } #home_portfolio_viewer h3, #home_portfolio_viewer p{ position:relative; top:140px; } #home_portfolio_viewer h3{ font-size:0.689em; color:#FBEDC4; background-color:#251C0A; padding:8px 15px 2px 40px; letter-spacing:0em; float:left; width:185px; height:20px; margin-right:-275px; } #home_portfolio_viewer p{ display:none; } #home_portfolio_viewer h3, #home_portfolio_viewer p, #home_portfolio_viewer img{ filter:alpha(opacity=0); -moz-opacity: 0.0; opacity: 0.0; } #home_roots_diagram_target{} #home_roots_diagram_target span{ display:none; } #home_roots_diagram{ position:relative; float:left; top:-28px; left:0px; margin-bottom:-28px; padding-top:30px; width:232px; height:180px; background:url(../images/home_roots_bg.jpg) top right no-repeat; } #home_roots_diagram li{ padding-top:35px; background:url(../images/home_roots_diagram_pod.jpg) top center no-repeat; position:relative; float:left; width:70px; height:25px; } #home_roots_diagram li.root1{ left:4px; top:0px; } #home_roots_diagram li.root2{ left:-44px; top:67px; } #home_roots_diagram li.root3{ left:31px; top:80px; } #home_roots_diagram li.root4{ left:182px; top:-50px; } #home_roots_diagram h4{ text-align:center; margin-top:0px !important; } #home_roots_diagram p{ display:none; } /*(portfolio)*/ #portfolio{} #portfolio-wrap{ padding-right:30px !important; width:645px !important; } #portfolio-wrap .filter_header{ text-transform:capitalize; } #portfolio-content .project{ width:195px; padding:10px; float:left; margin-right:0px; cursor:pointer; } #portfolio-content .project h4{ font-size:0.875em !important; margin-top:7px !important; } #portfolio-content .project p.project_desc{ font-size:0.625em !important; line-height:1.3em !important; color:#72571F; } #portfolio-content .project ul.screenshots{ display:none; } #portfolio-content .project div.screen_img{ height:190px; background-color:#FFF; padding:5px; width:181px; overflow:hidden; border:2px solid #F3D166; margin:10px 0px; } #portfolio-content .project div.screen_img a{ display:block; height:190px; position:relative; overflow:hidden; } #portfolio-content .project div.screen_img img{ width:250px; } .interactive-portfolio #portfolio-content .project div.screen_img img{ width:auto !important; } .pager{ padding:5px 10px; height:20px; background:#FDF4D9; border:1px solid #F3D166; } .pager b, .pager a{ display:block; float:left; border-top:1px solid #FDF4D9; } .pager b{ width:40px; height:19px; } .pager a{ width:20px; height:19px; text-align:center; } .pager a:hover{ color:#251C0A !important; } .pager a.active, pager a.active:hover{ color:#F1680A !important; width:18px; height:18px; background-color:#FBEDC4; border:1px solid #F3D166; } #project-filters{ border-top:1px solid #E7D7AB; border-bottom:1px solid #E7D7AB; margin:9px 0px !important; } #project-filters li a{ text-transform:capitalize; } /* branding */ #portfolio .branding .project h4, #portfolio .branding .project h5{ display:none; } #portfolio .branding .project div.screen_img img{ width:100%; margin-top:00px; } /* templates */ .samples_list li{ padding-left:140px; } .samples_list li .sample_thumb{ display:block; position:relative; float:left; left:-140px; margin-right:-140px; } /*(bios)*/ #bios{} #bios li{ margin-bottom:20px; } #bios img{ float:left; margin:0px 10px 5px 0px; position:relative; top:5px; } #bios h3{ font-size:1.16em !important; color:#72571F; } #bios h3 b{ color:#251C0A; } /*(testimonial-listing)*/ #testimonial-listing h4{ color:#72571F; } #testimonial-listing blockquote{ font-size:0.689em; } #testimonial-listing cite{ display:block; margin:10px 0px; } /*(site-map)*/ #site-map div{ float:left; width:45%; margin-right:2%; margin-bottom:15px; } #site-map h3{ margin-top:0px !important; } /*(site-glossary)*/ #site-glossary h4{ color:#E7D7AB; text-align:right; } #site-glossary p{ text-align:right; font-size:0.689em; } #site-glossary p#letter_jumper{ text-align:left; font-size:0.75em; } #site-glossary dl{ margin-bottom:40px; } #site-glossary dl dd, #site-glossary dl dt{ float:left; font-size:0.689em; border-top:1px solid #E7D7AB; padding-top:5px; margin-top:5px; } #site-glossary dl dt{ width:30%; font-weight:bold; color:#72571F; } #site-glossary dl dd{ width:69%; } /*--Footer --------------------------------------------------------*/ #footer{ padding:80px 90px 50px 65px; background:url(../images/footer_bg.jpg) top left no-repeat #399; } #footer a{ color:#F0CD56; } #footer h1, #footer h2, #footer h3, #footer h4, #footer h5, #footer h6{ margin-top:20px; color:#FFF; } #footer p, #footer ul, #footer ol, #footer blockquote{ color:#FFF; line-height:1.5em; font-size:0.689em; } #footer .subhead{ margin-bottom:0px; color:#251C0A; font-size:0.75em; } /*--Gutter --------------------------------------------------------*/ #gutter{ padding:15px 90px 20px 325px; background:url(../images/gutter_bg.jpg) 45px 0px no-repeat #251C0A; } #gutter p{ font-size:0.75em; } #contact-info{ width:290px; color:#FBEDC4; font-size:0.625em; line-height:1.3em; margin-bottom:15px; margin-left:55px; } #contact-info ._2column div.left, #contact-info ._2column div.right{ width:50%; margin-right:0px !important; } #contact-info .org, #contact-info div.tel b, #contact-info div.fax b, #contact-info div.email_address b{ color:#399; } /*(gutter-nav)*/ #gutter-nav{ margin-left:35px; } #gutter-nav ul{} #gutter-nav ul li{} #gutter-nav ul li.end_nav{} #gutter-nav ul li a{ color:#F1680A; text-transform:uppercase; font-size:0.625em; margin-right:15px; } #gutter-nav ul li a:hover, #gutter-nav ul li.selected a{} #copyright{ clear:both; padding-top:15px; font-size:0.5625em; color:#FBEDC4; } #designed-by{}