@charset "utf-8";
/* The kick-ass CSS by http://www.focus97.com */

/* CSS reset.  Why?  Because browser makers make the www difficult to style. Enough with that. */
/* Reset by: http://meyerweb.com/eric/tools/css/reset/ */
/* v1.0 | 20080212 */

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, b, u, i, center, 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-size: 100%; vertical-align: baseline; background: transparent; }
body { line-height: 1; }
ol, ul { list-style: none; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
/* remember to define focus styles! */
:focus { outline: 0; }
/* remember to highlight inserts somehow! */
ins { text-decoration: none; }
del { text-decoration: line-through; }
/* tables still need 'cellspacing="0"' in the markup */
table { border-collapse: collapse; border-spacing: 0; }
/* End the Reset.  Now let the games begin. */

body { text-align:center; background-color:#478e94; height: 100%; width: 100%; margin: 0px; background-image: url(siteimages/body-bg-II.jpg); background-repeat: repeat-x; font-family: Helvetica, Arial, sans-serif; }
#header { position:relative; width:100%; height:52px; margin-top: 0px; z-index: 5; top: 0px; text-align: left; left: 0px; overflow: visible; }
#headercontent { width: 950px; margin-top: 0px; margin-right: auto; margin-bottom: 0px; margin-left: auto; position: relative; top: 0px; overflow: visible; }
#pngfunnards { position: absolute; text-align: left; right: 0px; top: -106px; }
#homecontent { width:100%; z-index: 2; margin: 0px; position: relative; height: 529px; text-align: center; top: 0px; }
.monthly-homepage { position: absolute; top: 28px; left: 0px; height: 501px; width: 888px; background-image: url(siteimages/focus97_web-design_homepage-II.jpg); background-repeat: no-repeat; }
.monthly-homepage .cycleslides { overflow: hidden; position: absolute; height: 264px; width: 490px; left: 315px; top: 131px; }
.monthly-homepage .cycleslides img { height: 264px; width: 490px; }
.errorpage { position: absolute; top: 73px; left: 0px; width: 900px; text-align: center; }
#photocontent { width:100%; z-index: 6; margin: 0px; position: relative; height: 529px; text-align: center; top: 0px; }
.iphone { margin-left: 0px; }
#content { width:100%; z-index: 4; margin: 0px; position: relative; height: 529px; text-align: center; top: 0px; }
#contentinside { width:950px; position: relative; top: 0px; margin-top: 0px; margin-right: auto; margin-bottom: 0px; margin-left: auto; text-align: left; }
#logo { position: absolute; left: 0px; top: 5px; background-image: url(siteimages/focus97_logo.jpg); height: 47px; width: 215px; background-repeat: no-repeat; background-position: left top; }
#logo:hover { background-position: left bottom; }
#logo h1 { text-indent: -9999px; height: 100%; }
#logo a { display: block; height: 100%; width: 100%; }
#footer { z-index: 3; padding-top: 25px; padding-right: 20px; text-align: right; position: relative; float: right; }
.footerboxes { float: left; margin-bottom: 25px; padding-right: 15px; padding-left: 15px; }
.footerboxes ul { margin-top: 8px; }
.thefooter li { color: #5EC3B3; padding-top: 1px; padding-bottom: 2px; padding-right: 5px; padding-left: 30px; }
.thefooter li a { color: #8FBAA7; font-size: 14px; display: block; height: 100%; }
.thefooter li li { border-bottom-style: none; font-size: 10px; }
.thefooter li ul { margin-top: 4px; }
.thefooter li li a { font-size: 11px; color: #CCCCCC; border-bottom-style: none; }
.thefooter a:hover { color: #FFFFFF; }
.footercontent { width: 970px; margin-top: 0px; margin-right: auto; margin-bottom: 0px; margin-left: auto; padding-top: 30px; font-size: 12px; color: #666666; height: 70px; padding-right: 30px; }
.footercontent a { color: #CC9999; }
.footercontent a:hover { color: #FFFFFF; }
#menu { position:absolute; width:668px; height: 52px; right: 0px; bottom: 11px; }
.home-nav { background-image:url(siteimages/menuhome-bg.jpg); background-repeat: no-repeat; width: 601px; height: 47px; list-style-type: none; padding: 0px; background-position: left top; position: absolute; left: 250px; top: 5px; }
.home-nav li { display: inline; height:47px; margin: 0px; padding: 0px; }
.home-nav li a { position: absolute; height: 47px; text-indent: -9000px; margin: 0px; overflow: hidden; z-index: 10; padding: 0px; }
.home-nav .panel1a a { left: 94px; top: 0px; width: 193px; }
.home-nav .panel1a a:hover { background: url(siteimages/menuhome-bg.jpg) no-repeat -94px -47px; }
.home-nav .panel1a a:active { background: url(siteimages/menuhome-bg.jpg) no-repeat -94px -47px; }
.current-panel1a .panel1a a { background: url(siteimages/menuhome-bg.jpg) no-repeat -94px -47px; cursor: default; }
.home-nav-panel1a { position:absolute; top: 0px; left:94px; width: 193px; height:47px; background: url(siteimages/menuhome-bg.jpg) no-repeat -94px -47px; }
.home-nav .panel2a a { left: 287px; top: 0px; width: 106px; }
.home-nav .panel2a a:hover { background: url(siteimages/menuhome-bg.jpg) no-repeat -287px -47px; }
.home-nav .panel2a a:active { background: url(siteimages/menuhome-bg.jpg) no-repeat -287px -47px; }
.current-panel2a .panel2a a { background: url(siteimages/menuhome-bg.jpg) no-repeat -287px -47px; cursor: default; }
.home-nav-panel2a { position:absolute; top: 0px; left:287px; width: 106px; height:47px; background: url(siteimages/menuhome-bg.jpg) no-repeat -287px -47px; }
.home-nav .panel3a a { left: 393px; top: 0px; width: 84px; }
.home-nav .panel3a a:hover { background: url(siteimages/menuhome-bg.jpg) no-repeat -393px -47px; }
.home-nav .panel3a a:active { background: url(siteimages/menuhome-bg.jpg) no-repeat -393px -47px; }
.current-panel3a .panel3a a { background: url(siteimages/menuhome-bg.jpg) no-repeat -393px -47px; cursor: default; }
.home-nav-panel3a { position:absolute; top: 0px; left:393px; width: 84px; height:47px; background: url(siteimages/menuhome-bg.jpg) no-repeat -393px -47px; }
.home-nav .panel4a a { left: 0px; top: 0px; width: 94px; }
.home-nav .panel4a a:hover { background: url(siteimages/menuhome-bg.jpg) no-repeat 0px -47px; }
.home-nav .panel4a a:active { background: url(siteimages/menuhome-bg.jpg) no-repeat 0px -47px; }
.current-panel4a .panel4a a { background: url(siteimages/menuhome-bg.jpg) no-repeat 0px -47px; cursor: default; }
.home-nav-panel4a { position:absolute; top: 0px; left:0px; width: 94px; height:47px; background: url(siteimages/menuhome-bg.jpg) no-repeat 0px -47px; }
.home-nav .panel5a a { left: 477px; top: 0px; width: 124px; }
.home-nav .panel5a a:hover { background: url(siteimages/menuhome-bg.jpg) no-repeat -477px -47px; }
.home-nav .panel5a a:active { background: url(siteimages/menuhome-bg.jpg) no-repeat -477px -47px; }
.current-panel5a .panel5a a { background: url(siteimages/menuhome-bg.jpg) no-repeat -477px -47px; cursor: default; }
.home-nav-panel5a { position:absolute; top: 0px; left:477px; width: 124px; height:47px; background: url(siteimages/menuhome-bg.jpg) no-repeat -477px -47px; }
#homeboxes { position: absolute; height: 343px; width: 700px; top: 116px; left: 125px; }
.index-nav { background-image: url(siteimages/home-boxes-bg.jpg); background-repeat: no-repeat; position: absolute; width: 700px; height: 343px; list-style-type: none; left: 0px; margin-top: 0px; padding: 0px; top: 0px; }
.index-nav li { display: inline; height:343px; margin: 0px; padding: 0px; }
.index-nav li a { position: absolute; height: 343px; text-indent: -9000px; margin: 0px; overflow: hidden; z-index: 10; padding: 0px; }
.index-nav .pane1 a { left: 35px; top: 0px; width: 230px; height: 220px; }
.index-nav .pane1 a:hover { background: url(siteimages/home-boxes-bg.jpg) no-repeat -35px -343px; }
.index-nav .pane1 a:active { background: url(siteimages/home-boxes-bg.jpg) no-repeat -35px -343px; }
.current-pane1 .pane1 a { background: url(siteimages/home-boxes-bg.jpg) no-repeat -35px -343px; cursor: default; }
.index-nav-pane1 { position:absolute; top: 0px; left:35px; width: 230px; height:220px; background: url(siteimages/home-boxes-bg.jpg) no-repeat -35px -343px; }
.index-nav .pane2 a { left: 440px; top: 0px; width: 230px; height: 220px; }
.index-nav .pane2 a:hover { background: url(siteimages/home-boxes-bg.jpg) no-repeat -440px -343px; }
.index-nav .pane2 a:active { background: url(siteimages/home-boxes-bg.jpg) no-repeat -440px -343px; }
.current-pane2a .pane2 a { background: url(siteimages/home-boxes-bg.jpg) no-repeat -440px -343px; cursor: default; }
.index-nav-pane2 { position:absolute; top: 0px; left:440px; width: 230px; height:220px; background: url(siteimages/home-boxes-bg.jpg) no-repeat -440px -343px; }
a:hover { color: #000000; }
.titlefont { font-family: Helvetica, Arial, sans-serif; font-size: 12px; color: #009966; line-height: normal; border-bottom-width: 1px; border-bottom-style: dotted; border-bottom-color: #00CC66; width: 100%; font-weight: bold; }
.thumbtag { font-family: Arial, Helvetica, sans-serif; font-size: 11px; color: #ffffff; height: 0px; padding-right: 5px; padding-left: 5px; padding-bottom: 5px; width: auto; margin: 5px; }
.style7 { font-size: 11px; text-transform: uppercase; color: #73ECBF; font-weight: bold; background-color: #384347; }
.bodycopyBIG { font-size: 42px; color: #384146; margin: 0px; padding: 0px; }
.pageheader { font-family: Helvetica, Arial, sans-serif; font-size: 30px; color: #222; margin-bottom: 0px; line-height: 36px; }
.project_title { font-family: Helvetica, Arial, sans-serif; font-size: 18px; color: #71ECBE; background-color: #394448; padding-right: 5px; padding-left: 5px; padding-bottom: 2px; }
.project_title-web { font-size: 18px; color: #1F1B18; }
.project_title_wh { color: #498D90; font-size: 22px; }
.number { color: #FFFFFF; font-size: 24px; }
.titleheading { font-size: 16px; color: #FFFFFF; line-height: normal; }
.clearfloat { /* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain a float */ clear:both; height:0; font-size: 1px; line-height: 0px; }
.printbox { height: 400px; width: auto; float: left; white-space: normal; color: #999999; padding-right: 20px; padding-left: 20px; background-color: #13181B; margin-right: 0px; margin-left: 0px; padding-top: 10px; font-size: 14px; }
.emailcampaignbox { height: 400px; width: 300px; float: left; white-space: normal; color: #333333; padding-right: 20px; padding-left: 20px; margin-right: 0px; margin-left: 0px; padding-top: 10px; font-size: 14px; }
.published { height: 45px; width: 260px; }
.printboxodd .style7 { color: #42545E; }
.printbox img { float: left; padding-bottom: 20px; }
.printboxodd { height: 400px; width: auto; float: left; white-space: normal; color: #555555; padding-right: 20px; padding-left: 20px; background-color: #C7C0C0; margin-right: 0px; margin-left: 0px; padding-top: 10px; font-size: 14px; }
.printbox .project_title { color: #FFFFFF; }
.printboxodd img { float: left; padding-bottom: 20px; }
.graphicsbox { background-image: url(siteimages/web-bg.png); background-repeat: no-repeat; background-position: left bottom; width: 260px; float: left; white-space: normal; color: #334247; padding-right: 30px; padding-left: 15px; font-size: 12px; height: 400px; text-align: right; }
.graphicsbox ul { margin-top: 7px; margin-bottom: 7px; list-style-type: none; }
.graphicsbox li { list-style-type: none; border-top-width: 1px; border-top-style: none; border-top-color: #435561; padding-top: 2px; padding-bottom: 1px; border-bottom-width: 1px; border-bottom-style: dotted; border-bottom-color: #435561; }
.headingtitle { font-size: 18px; color: #666666; }
#projects-scroll { position: absolute; left: 20px; top: 0px; background-color: #394448; padding-right: 10px; padding-left: 10px; font-size: 18px; padding-top: 3px; padding-bottom: 3px; }
a { outline: none; font-family: Helvetica, Arial, sans-serif; text-decoration: none; color: #47656A; }
.clear:after { content:"."; display:block; height:0; clear:both; visibility:hidden; }
* html .clear { height: 1%; }
.clear { display: block; }
#work { top:0px; float: left; height: 529px; overflow: visible; }
.majorcontain { z-index: 20; width: 950px; overflow: auto; text-align: left; }
.important { z-index:90 !important; }
.content { width:800px; position:relative; height:479px; margin:0px; float:left; overflow: hidden; }
.subnav { float:left; clear:both; width:150px; list-style:none; height: 479px; overflow: hidden; margin-top: 30px; background-image: url(siteimages/photos-menu-bg.jpg); background-repeat: no-repeat; background-position: left 90px; }
.subnav li,  .subnav a { float:left; display: block; clear: both; text-shadow: 0 1px 1px #fff}
.subnav a { width:142px; font-size:18px; text-decoration:none; color: #000000; margin-top: 2px; margin-bottom: 3px; text-align: right; padding-right: 3px; text-shadow: 0 1px 0 #fff}
.subnav a:hover { color: #FFFFFF; }
.subnav .aboutscrolling,  .subnav .workscrolling { opacity:1; color: #72EDBF; text-shadow:none; background-image: url(siteimages/menu-select-bg.png); background-repeat: no-repeat; background-position: left bottom; }
.subnav ul { float:left; list-style:none; clear: both; text-align: right; }
.subnav ul a { font-size:14px; margin:0px; color: #374248; line-height: 1em; padding-top: 4px; padding-right: 3px; padding-bottom: 2px; padding-left: 0px; }
.section { width:13000px; position:relative; float:left; clear:both; }
.section ul { list-style:none; }
.section .sub { float:left; width:800px; height:479px; overflow: visible; position: relative; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; }
.section .sub p { font-family: Helvetica, Arial, sans-serif; font-size: 14px; margin-left: 20px; margin-top: 20px; }
.section li { }
.f97mark { margin-left: 7px; width: 313px; float: right; padding-top: 116px; margin-right: 6px; }
img.thumbnail { background-color: #000000; padding: 3px; margin: 5px; height: 45px; width: 45px; }
img.thumbnail:hover { background-color: #FFFFFF; }
img.webthumbnail { background-image: url(siteimages/web-bg.jpg); background-repeat: no-repeat; background-position: right 1px; padding-top: 5px; padding-right: 17px; padding-bottom: 22px; padding-left: 3px; width: 250px; display: block; margin-top: 0px; margin-right: 20px; margin-bottom: 0px; margin-left: 0px; }
img.webthumbnail:hover { filter:alpha(opacity=60); -moz-opacity:0.6; opacity:0.6; -khtml-opacity:0.6; }
h2 { font-size: 27px; font-weight: normal; margin-top: 25px; color: #4A8E8F; display: block; text-align: right; position: absolute; top: 0px; right: 0px; margin-right: 6px; text-shadow: #fff 0px 1px 0px; }
.h2-black { color: #363F44; }
h3 { font-size: 27px; font-weight: normal; margin-top: 25px; color: #4A8E8F; display: block; text-align: left; margin-right: 6px; text-shadow: #fff 0px 1px 0px; }
.h3-black { color: #363F44; }
h4 { font-size: 24px; font-weight: normal; margin-top: 25px; color: #999999; display: block; text-align: left; margin-right: 6px; text-shadow: #fff 0px 1px 0px; margin-bottom: 15px; }
.h4-black { color: #000000; }
.leftfloatborder { float: left; margin-right: 15px; margin-bottom: 12px; padding: 2px; }
.leftfloat { float: left; margin-right: 15px; margin-bottom: 12px; padding: 2px; border: 1px solid #666666; }
.couriertext { font-family: "Courier New", Courier, monospace; color: #000000; }
.redtext { color: #810F0F; }
.floatright { padding: 2px; border: 1px solid #666666; margin-bottom: 12px; margin-left: 15px; float: right; }
.subtitle { font-size: 16px; color: #333333; }
.footerdate { font-size: 16px; color: #60C1AE; margin-top: 12px; }
.datemonth { color: #77EABF; }
.dateyear { color: #55A6A8; }