/* Copyright (c) 2009, Yahoo! Inc. All rights reserved. Code licensed under the BSD License: http://developer.yahoo.net/yui/license.txt version: 2.8.0r4 */ body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,p,blockquote,th,td{margin:0;padding:0;}table{border-collapse:collapse;border-spacing:0;}fieldset,img{border:0;}address,caption,cite,code,dfn,em,strong,th,var,optgroup{font-style:inherit;font-weight:inherit;}del,ins{text-decoration:none;}li{list-style:none;}caption,th{text-align:left;}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}q:before,q:after{content:'';}abbr,acronym{border:0;font-variant:normal;}sup{vertical-align:baseline;}sub{vertical-align:baseline;}legend{color:#000;}input,button,textarea,select,optgroup,option{font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;}input,button,textarea,select{*font-size:100%;}body{font:13px/1.231 arial,helvetica,clean,sans-serif;*font-size:small;*font:x-small;}select,input,button,textarea,button{font:99% arial,helvetica,clean,sans-serif;}table{font-size:inherit;font:100%;}pre,code,kbd,samp,tt{font-family:monospace;*font-size:108%;line-height:100%;}body{margin:0;}h1{font-size:138.5%;}h2{font-size:123.1%;}h3{font-size:108%;}h1,h2,h3{margin:1em 0;}h1,h2,h3,h4,h5,h6,strong,dt{font-weight:bold;}optgroup{font-weight:normal;}abbr,acronym{border-bottom:1px dotted #000;cursor:help;}em{font-style:italic;}del{text-decoration:line-through;}blockquote,ul,ol,dl{margin:1em;}ol,ul,dl{margin-left:2em;}ol li{list-style:decimal outside;}ul li{list-style:disc outside;}dl dd{margin-left:1em;}th,td{border:1px solid #000;padding:.5em;}th{font-weight:bold;text-align:center;}caption{margin-bottom:.5em;text-align:center;}sup{vertical-align:super;}sub{vertical-align:sub;}p,fieldset,table,pre{margin-bottom:1em;}button,input[type="checkbox"],input[type="radio"],input[type="reset"],input[type="submit"]{padding:1px;} /* NOTES # 1 - Draggable windows get new IDs on-the-fly to prevent the browser from hopping to the anchor when the #url changes. If ID attribute in the HTML is "something" it will be changed to "something_FLOATER", which is what you should use for styling purposes. 1a- Draggables are also given automatic classnames, starting with the first and moving down in the source order. "win_0", "win_1", etc. # 2 - Font sizes are set with %. See http://developer.yahoo.com/yui/fonts/#using PX %% 10 77 11 85 12 93 13 100 14 108 15 116 16 123.1 17 131 18 138.5 19 146.5 20 153.9 21 161.6 22 167 23 174 24 182 */ /* layout */ #content { margin:1.5em auto; } #top, #foot { position:absolute; left:-999em; top:0; } /* content: base */ html, body { color:#333; height:100%; } h2, h3, p, li { margin-top:0; } h2 { font-size:138.5%; } h3, h4 { font-size:100%; margin-bottom:0; } p, li { font-size:100%; line-height:1.25em; } h2 span, h3 span { font-weight:normal; } blockquote { margin:0; padding:0; font-weight:bold; } img { display:block; margin-bottom:1.25em; } a:link, a:visited { text-decoration:none; color:#0066CC; } a:hover, a:active, a:focus { text-decoration:underline; } label { display:block; cursor:pointer; } hr { background-color:#333; color:#333; border:0; border-collapse:collapse; clear:both; float:left; height:1px; margin:1.25em 0; width:100%; } form label { color:#333; text-transform:uppercase; font-size:93%; } form p { position:relative; } form p input, form p textarea { background:#EDE9E0; width:100%; padding:5px 0; border:none; margin:5px 0; } form p button { background:transparent no-repeat top; border:0; padding:0; border-collapse:collapse; outline:none; width:80px; height:26px; display:block; text-indent:-999em; } form p button:hover { background-position: bottom; } form p em { position:absolute; bottom:0; right:0; text-transform:uppercase; font-size:85%; } form p span.ValidationErrors { position:absolute; top:0; right:0; font-weight:bold; color:#CC0000; font-size:93%; } form p .ErrorField { outline:1px solid #CC0000; } /* content: icons & links */ a.arrow, a.arrow:link, a.arrow:visited { padding-left:12px; background: url(../images/bullet_arrow.gif) no-repeat left center; display:inline-block; } /* body */ body#home { background:#09c url(../images/bg_test1.png) repeat-x left top; } body#about { background:#9c3 url(../images/bg_about.png) repeat-x left top; } body#portfolio { background:#e95016 url(../images/bg_portfolio2.png) repeat-x left top; } body#portfolio-clients { background:#e95016 url(../images/bg_portfolio2.png) repeat-x left top; } body#kablog { background:#cff url(../images/bg_kablog.png) repeat-x left top; } body#contact { background:#d9ffb2 url(../images/bg_contact.png) repeat-x left top; } /* nav:links */ ul#subnav a, #head a { background:url(nav.png) no-repeat; text-indent:-999em; overflow:hidden; } /* header */ #head { width:930px; height:23px; padding:13px 0; margin:0 auto; } #head h1 { float:left; height:24px; overflow:hidden;margin:0; } #head ul { margin:0; padding:0; float:right; } #head li { list-style-type:none; float:left; } #head a { height:23px; margin:0 0 0 45px; overflow:hidden; display:block; } #head h1 a { margin:0; } /* header:links */ #head a.home:link, #head a.home:visited { background-position: 0 -112px; width:71px; } #head a.about:link, #head a.about:visited { background-position: 0 0; width:61px; } #head a.contact:link, #head a.contact:visited { background-position: 0 -56px; width: 78px; } #head a.kablog:link, #head a.kablog:visited { background-position: 0 -168px; width: 72px; } #head a.portfolio:link, #head a.portfolio:visited { background-position: 0 -224px; width: 95px; } /* header:hover/selected */ #head a.home:hover, #head a.home:active, #home #head a.home { background-position: 0 -135px; } #head a.about:hover, #head a.about:active, #about #head a.about { background-position: 0 -23px; } #head a.contact:hover, #head a.contact:active, #contact #head a.contact { background-position: 0 -79px; } #head a.kablog:hover, #head a.kablog:active, #kablog #head a.kablog { background-position: 0 -191px; } #head a.portfolio:hover, #head a.portfolio:active, #portfolio #head a.portfolio { background-position: 0 -247px; } /* subnav */ ul#subnav { margin:1em auto; padding:0; text-align:center; height:16px; } ul#subnav li { list-style-type:none; display:inline-block; height:16px; } ul#subnav li a { height:16px; margin:0 12px; overflow:hidden; display:inline-block; } #subnav a.bios:link, #subnav a.bios:visited { background-position: 0 -280px; width: 29px; } #subnav a.boutique:link, #subnav a.boutique:visited { background-position: 0 -322px; width: 196px; } #subnav a.services:link, #subnav a.services:visited { background-position: 0 -364px; width: 61px; } #subnav a.la:link, #subnav a.la:visited { background-position: 0 -406px; width: 81px; } #subnav a.milwaukee:link, #subnav a.milwaukee:visited { background-position: 0 -448px; width: 78px; } #subnav a.form:link, #subnav a.form:visited { background-position: 0 -490px; width: 137px; } #subnav a.all:link, #subnav a.all:visited { background-position: 0 -532px; width: 82px; } #subnav a.arts:link, #subnav a.arts:visited { background-position: 0 -574px; width: 92px; } #subnav a.corp:link, #subnav a.corp:visited { background-position: 0 -658px; width: 154px; } #subnav a.education:link, #subnav a.education:visited { background-position: 0 -700px; width: 70px; } #subnav a.nonprofit:link, #subnav a.nonprofit:visited { background-position: 0 -826px; width: 73px; } #subnav a.clients:link, #subnav a.clients:visited { background-position: 0 -616px; width: 67px; } #subnav a.bios:hover, #subnav a.bios:active, #subnav .selected a.bios { background-position: 0 -296px; } #subnav a.boutique:hover, #subnav a.boutique:active, #subnav .selected a.boutique { background-position: 0 -338px; } #subnav a.services:hover, #subnav a.services:active, #subnav .selected a.services { background-position: 0 -380px; } #subnav a.la:hover, #subnav a.la:active, #subnav .selected a.la { background-position: 0 -422px; } #subnav a.milwaukee:hover, #subnav a.milwaukee:active, #subnav .selected a.milwaukee { background-position: 0 -464px; } #subnav a.form:hover, #subnav a.form:active, #subnav .selected a.form { background-position: 0 -506px; } #subnav a.all:hover, #subnav a.all:active, #subnav .selected a.all { background-position: 0 -548px; } #subnav a.arts:hover, #subnav a.arts:active, #subnav .selected a.arts { background-position: 0 -590px; } #subnav a.corp:hover, #subnav a.corp:active, #subnav .selected a.corp { background-position: 0 -674px; } #subnav a.education:hover, #subnav a.education:active, #subnav .selected a.education { background-position: 0 -716px; } #subnav a.nonprofit:hover, #subnav a.nonprofit:active, #subnav .selected a.nonprofit { background-position: 0 -842px;} #subnav a.clients:hover, #subnav a.clients:active, #subnav .selected a.clients { background-position: 0 -632px; } /* footnotes */ span.linknumber { display:none; } /* draggables */ .draggable-group { position:relative; z-index:1; } .draggable { background: rgba(255,255,255,.3); padding:20px; width:500px; margin:1.25em auto; } .draggable div { background-color:#ffffff; padding:20px;} .top { background: rgba(255,255,255,.6); z-index:9999!important; } .top, .top div { opacity:1!important; } /* draggables: setup */ div.draggable { position:absolute; opacity:.30; margin:0; } div.win_0 { z-index:100; } div.win_1 { z-index:99; } div.win_2 { z-index:98; } div.win_3 { z-index:97; } div.win_4 { z-index:96; } div.win_5 { z-index:95; } div.win_6 { z-index:94; } div.win_7 { z-index:93; } div.win_8 { z-index:92; } div.win_9 { z-index:91; } /* kapopup: basics */ #kapopup { position:absolute; z-index:99999; width:640px; padding:20px; margin:0 0 20px 0; background:#FFFFFF none no-repeat center center; text-align:left; -moz-box-shadow: 5px 5px 10px rgba(0, 0, 0, .5); -webkit-box-shadow: 5px 5px 10px rgba(0, 0, 0, .5); box-shadow: 5px 5px 10px rgba(0, 0, 0, .5); } #kapopup-overlay { background:#000; } #kapopup a.print, #kapopup a.close { position:absolute; display:block; width:20px; height:16px; overflow:hidden; z-index:9999; text-indent:-999em; } #kapopup a.print { top:20px; right:50px; } #kapopup a.close { top:20px; right:20px; } #kapopup a.print:hover, #kapopup a.close:hover { } #kapopup div.content { background:#FFF; min-height:200px; position:relative; } #kapopup.loaded { background-image:none!important; } /* home:theming */ body#home h1 { display:none; } body#home h2, body#home h3, body#home blockquote p { color:#CC3399; } body#home h3.kablog { color:#825528; } body#home h2.news, body#home h3.news { color:#009999; } /* home: windows */ body#home #flash_logo { margin:20px 0 0 20px; } body#home div.top { -moz-box-shadow: 1px 1px 3px rgba(0, 0, 0, .3); -webkit-box-shadow: 1px 1px 3px rgba(0, 0, 0, .3); box-shadow: 1px 1px 3px rgba(0, 0, 0, .3); } body#home #content { padding:0; width:930px; margin:0 auto; position:relative; } body#home #items { position:absolute; top:200px; left:0; width:400px; } body#home #items div.draggable { background: rgba(255,255,255,.6); padding:10px; width:200px; position:absolute; opacity:.30; } body#home #items div.draggable div { background:#ffffff; padding:15px; padding-bottom:5px; } body#home #items div.draggable h3 { margin-bottom:10px; } body#home #sites { position:absolute; top:20px; width:500px; left:430px; } body#home #sites div.draggable { width:280px; padding:10px; background:rgba(255,255,255,.8); opacity:.30; } body#home #sites div.draggable h3 { color:#333; } body#home #sites div.draggable img { margin:10px 0; } body#home #sites div.draggable p { margin:0; font-weight:bold; color:#333; font-size:85%; } body#home #sites div.draggable p a { float:right; } /* home: positioning */ body#home #items div.win_0 { top:5px; right:50px; } body#home #items div.win_1 { top:50px; left:0; } body#home #items div.win_3 { top:300px; right:0; } body#home #items div.win_2 { top:350px; left:30px; } body#home #sites #autry_FLOATER { top:200px; left:215px; } body#home #sites #nationalparks_FLOATER { top:0; left:75px; } body#home #sites #jcfla_FLOATER { top:135px; left:135px; } body#home #sites #randcompare_FLOATER { top:70px; left:245px; } body#home #sites #stanford_FLOATER { top:260px; left:0; } /* about: theming */ body#about h2, body#about h3, body#about blockquote p { color:#009999; } body#about div.draggable ul li { list-style-type:none; background:transparent url(../images/about_bullet.gif) no-repeat 0 5px; padding-left:12px; } /* about: windows & positions */ body#about #content { width:930px; } body#about div.draggable { -moz-box-shadow:5px 5px 10px rgba(0, 0, 0, 0.6); -webkit-box-shadow:5px 5px 10px rgba(0, 0, 0, 0.6); box-shadow:5px 5px 10px rgba(0, 0, 0, 0.6); } body#about #boutique_FLOATER { top:0; left:50%; margin-left:-250px; } body#about #services_FLOATER { top:50px; left:0; } body#about #bios_FLOATER { top:100px; right:0; } /* contact:theming */ body#contact h2, body#contact h3, body#contact blockquote p, body#contact form label, body#contact form p em { color:#FF6600; } body#contact form p input, body#contact form p textarea { background:#EDE9E0; } body#contact form p button { background-image: url(../images/contact_send.png); } body#contact form p { width:460px; } /* contact: windows & positions */ body#contact #content { width:930px; } body#contact div.draggable { -moz-box-shadow:5px 5px 10px rgba(0, 0, 0, 0.6); -webkit-box-shadow:5px 5px 10px rgba(0, 0, 0, 0.6); box-shadow:5px 5px 10px rgba(0, 0, 0, 0.6); } body#contact .la div { background:#fff url(../images/contact_bg_la.gif) no-repeat top right; } body#contact .milwaukee div { background:#fff url(../images/contact_bg_mil.gif) no-repeat top right; } body#contact #la_FLOATER { top:0; left:50%; margin-left:-250px; } body#contact #milwaukee_FLOATER { top:50px; left:0; } body#contact #form_FLOATER { top:100px; right:0; } /* portfolio:columns */ body#portfolio div#content { } body#portfolio div#content div:after { content:"."; display:block; height:0; clear:both; visibility:hidden; } body#portfolio div#content div img { margin-bottom:8px; } body#portfolio div#content div h3 { color:#FFFFFF; margin-bottom:8px; font-weight:normal; font-size:11px; width:100%; } body#portfolio div#content div { width:210px; padding:10px; margin:0 0 21px 0; background:rgba(255,255,255,.3); } body#portfolio div#content div p { color:#906; font-weight:normal; font-size:11px; line-height:16px; margin:0; } body#portfolio div#content div p a { color: #906; float:right; margin-left:10px; background:transparent url(icons.png) no-repeat; } body#portfolio div#content div p a.weblink { background-position:left -755px; padding-left: 20px; } body#portfolio div#content div p a.study { background-position:left -811px; padding-left:18px; } body#portfolio div#content div:hover { background:rgba(255,255,255,.6); } body#portfolio div#content div:hover p a { color: #06c; } body#portfolio div#content div:hover p a.weblink { background-position:0 -783px; } body#portfolio div#content div:hover p a.study { background-position:0 -839px; } /* portfolio:popups */ body#portfolio #kapopup-overlay { background:#990066; } body#portfolio #kapopup { width:855px; padding:20px; background-color:rgba(255,255,255,.9); background-image:url(portfolio-loader.gif) } body#portfolio #kapopup div { background:none; } body#portfolio #kapopup a.print { background:url(icons.png) no-repeat left -1160px; } body#portfolio #kapopup a.print:hover, body#portfolio #kapopup a.print:active { background-position:left -1176px; } body#portfolio #kapopup a.close { background:url(icons.png) no-repeat left -592px; } body#portfolio #kapopup a.close:hover, body#portfolio #kapopup a.close:active { background-position:left -608px; } body#portfolio #kapopup a.website { position:absolute; top:4px; left:525px; height:16px; overflow:hidden; line-height:16px; font-weight:bold; text-decoration:underline; background:url(icons.png) no-repeat left -1242px; padding-left:28px; } body#portfolio #kapopup a.website:hover, body#portfolio #kapopup a.website:active { background-position:left -1258px; color:#FF6600; } body#portfolio #kapopup h2 { color:#990066; font-size:138.5%; } body#portfolio #kapopup h3 { color:#990066; font-size:116%; } body#portfolio #kapopup #casestudy { } body#portfolio #kapopup #casestudy:after { content:"."; display:block; height:0; clear:both; visibility:hidden; } body#portfolio #kapopup #casestudy-left { float:left; width:500px; } body#portfolio #kapopup #casestudy-right { float:right; width:330px; } body#portfolio #kapopup #casestudy-nav { margin-bottom:1.2em; zoom:1; } body#portfolio #kapopup #casestudy-nav:after { content:"."; display:block; height:0; clear:both; visibility:hidden; } body#portfolio #kapopup #casestudy-nav img { float:left; margin:0 9px 9px 0; } body#portfolio #kapopup #casestudy-nav img.th_2, body#portfolio #kapopup #casestudy-nav img.th_5, body#portfolio #kapopup #casestudy-nav img.th_8, body#portfolio #kapopup #casestudy-nav img.th_11 { margin-right:0; } body#portfolio #kapopup #casestudy-nav a:hover img { /*outline:1px dotted #FF6600;*/ } body#portfolio #kapopup #casestudy-nav a.activeSlide img { outline:2px solid #990066; } body#portfolio #kapopup #casestudy-right h3{ padding-top:.2em} body#portfolio #kapopup #casestudy-right ul{ margin-left:0} body#portfolio #kapopup #casestudy-right ul li{ margin-bottom:.5em; list-style-type:none; background:transparent url(../images/case_bullet.gif) no-repeat 0 4px; padding-left:1em} body#portfolio blockquote {color: #906; margin-top:15px; padding-top:15px; font-weight:normal; border-top:1px dotted #906;} cite {display:block; font-weight:normal; color:#7a7a7a; font-size:85%; margin-top:.5em;} /* portfolio-clients */ body#portfolio.clients {} body#portfolio.clients #content { zoom:1; width:930px; margin:0 auto; color:#fff; } body#portfolio.clients #content:after { content:"."; display:block; height:0; clear:both; visibility:hidden; } body#portfolio.clients #content p#key { font-size:85%; display:none; } body#portfolio.clients #content p img { width:15px; height:15px; background:url(icons.png) no-repeat; display:inline; margin:0; vertical-align:middle; } body#portfolio.clients #content p img.tri { background-position:0 -66px; } body#portfolio.clients #content p img.cs { background-position: 0 -811px; } body#portfolio.clients #content p img.ln { background-position: 0 -755px; } body#portfolio.clients #content ul { width:300px; margin: 0 15px 0 0; float:left; padding:0; } body#portfolio.clients #content ul.last { margin-right:0; } body#portfolio.clients #content ul li { list-style-type:none; margin:0 0 1px 0; padding:7px 0; background:rgba(255,255,255,.25); } body#portfolio.clients #content ul li:hover { background:rgba(255,255,255,.5); } body#portfolio.clients #content ul li h3 { font-weight:normal; padding-left:20px; margin-right:7px; } body#portfolio.clients #content a.cs, body#portfolio.clients #content a.ln { background:url(icons.png) no-repeat; width:15px; height:15px; margin-left:6px; display:inline-block; text-indent:-999em; } body#portfolio.clients #content a.cs:link, body#portfolio.clients #content a.cs:visited { background-position:left -811px; } body#portfolio.clients #content a.ln:link, body#portfolio.clients #content a.ln:visited { background-position:left -755px; } body#portfolio.clients #content li:hover a.cs { background-position:left -839px!important; } body#portfolio.clients #content li:hover a.ln { background-position:left -783px!important; } body#portfolio.clients #content ul li ul { width:auto; float:none; margin:0 7px 0 20px; } body#portfolio.clients #content ul li ul li { padding:0; margin:5px 0 0 0; background:none!important; } body#portfolio.clients #content ul li.haschild h3 { cursor:pointer; background:url(icons.png) no-repeat 2px -66px; } body#portfolio.clients #content ul li.open h3 { background-position: 2px -128px; } /* temporarily disable "key" */ body#portfolio.clients #content p#key { display:none; } /* kablog: theming */ body#kablog h2, body#kablog h2 a, body#kablog h3, body#kablog blockquote, body#kablog form label, body#kablog form p em { color:#825528; } body#kablog hr { background-color:#825528; color:#825528; } body#kablog p.date { margin:0; color:#7A7A7A; text-transform:uppercase; font-size:85%; } body#kablog h3 { font-size:108%; margin-bottom:1.25em; } body#kablog blockquote { padding:0 2em; font-weight:normal; border:0; } body#kablog form p { width:500px; } body#kablog form p button { background-image:url(../images/kablog_send.gif); } /* kablog: subnav */ body#kablog { } body#kablog #content { width:930px; position:relative; } body#kablog ol#subnav { position:absolute; top: 0; right:0; width:250px; margin:0; } body#kablog ol#subnav li { list-style-type:none; margin:0 0 1px 0; font-size:85%; } body#kablog ol#subnav li a { display:block; padding:6px; background:rgba(255,255,255,.3); font-weight:bold; color:#fff; text-decoration:none; } body#kablog ol#subnav li a:hover { background:rgba(255,255,255,.6); } body#kablog ol#subnav li a em { display:block; font-weight:normal; font-style:normal; } body#kablog ol#subnav li.selected a { background:rgba(255,255,255,.6); } /* kablog: windows & positions */ body#kablog .draggable-group { margin-right:300px; } body#kablog .draggable { background: rgba(255,255,255,.6); padding:15px; width:280px; position:absolute; opacity:.30; } body#kablog .top { background: rgba(255,255,255,.8); -moz-box-shadow: 1px 1px 3px rgba(0, 0, 0, .3); -webkit-box-shadow: 1px 1px 3px rgba(0, 0, 0, .3); box-shadow: 1px 1px 3px rgba(0, 0, 0, .3); } body#kablog div.win_7 { left:250px; top:25px; } body#kablog div.win_6 { left:125px; top:55px; } body#kablog div.win_5 { left:-10px; top:350px; } body#kablog div.win_4 { left:340px; top:450px; } body#kablog div.win_3 { left:50px; top:100px; } body#kablog div.win_2 { left:100px; top:300px; } body#kablog div.win_1 { left:300px; top:250px; } body#kablog div.win_0 { left:200px; top:175px; } /* kablog: popups */ body#kablog #kapopup-overlay { background:#825528; } body#kablog #kapopup { background-color:rgba(255,255,255,.9); background-image:url(kablog-loader.gif); width:500px; } body#kablog #kapopup div { background:none; } body#kablog #kapopup a.print { background:url(icons.png) no-repeat left -1078px; } body#kablog #kapopup a.print:hover, body#portfolio #kapopup a.print:active { background-position:left -1094px; } body#kablog #kapopup a.close { background:url(icons.png) no-repeat left -910px; } body#kablog #kapopup a.close:hover, body#portfolio #kapopup a.close:active { background-position:left -926px; }