@charset "utf-8";
/* 
FUNCTION: Provide layout and function for screen version of visualwild.com
SCOPE: All pages on visualwild.com	
*/

/* GENERAL */
* {margin:0; padding:0;}

/* PAGE LAYOUT */
body {background:#080401 url(../../img/lyt/cathback.jpg)repeat-x; text-align:center; color:#928979; font:normal .8em/normal Georgia, "Times New Roman", Times, serif;}
.pgPaint {margin:0; width:100%; text-align:center; background:url(../../images/bg-pgPaint.jpg) no-repeat 50% 90%;}
.pgWrap {text-align:left; width:860px; margin:20px auto 100px; background:url(../../img/lyt/bg-pgrap.png) repeat-x 0 0;}
.pgWrapCont {background:#fff url(../../img/lyt/bg-pgContWrap.jpg) repeat-x 0 0; clear:both;}
.pgCont {background:transparent url(../../img/lyt/bg-pgCont.gif) repeat-x 0 100%; padding:0;}
.pgBtmPaint {background:url(../../img/lyt/ferns.png) no-repeat 60px 100%; padding:0 0 60px 60px; display:inline-block;}
.pgGen {float:left; width:192px; margin:25px 15px 30px 0; text-align:right;} 
.pgPanel {margin:0; background:#fff url(../../img/lyt/bg-pgPanel.jpg) no-repeat 0 0; border-left:1px dashed #dedbd7;}
.pgClear {visibility:hidden; height:1%; clear:both;}
.pgFoot {padding:0; background:#000 url(../../img/lyt/ferns2.png) no-repeat 60px 0;}
.clearBoth {display:block; visibility:hidden; height:0; clear:both;}
.lytCont {float:left;}

/* TEXT ELEMENTS */
.tagLine {display:block; padding:71px 50px 10px; background:url(../../img/lyt/bg-h1span.gif) no-repeat 50px 38px; text-transform:uppercase; letter-spacing:.1em; font:normal .7em/normal; color:#AA9F8E;} /* single image used for ie6 */
h2, h3, .pgSummaryCont dt {line-height:120%; font-weight:normal;}
h2 {font-size:200%; margin-bottom:5px; letter-spacing:.1em;}
h3 {display:inline; font-size:150%; letter-spacing:.1em; padding:0 18px 7px 0; color:#94372D; background:url(../../img/lyt/bg-h3.gif) no-repeat 100% .4em;}
h4.section, .pgSummaryCont dt {color:#7C7262; line-height:120%; letter-spacing:.1em; padding:15px 0 7px; text-transform:uppercase; font-size:.9em;}
.pgSummaryCont dt {font-size:1.2em; padding:7px 0; border:dotted #e3dacb; border-width:1px 0;}
.pgSummaryCont dt:first-child {border-top:none; padding-top:0;}
h5 {line-height:170%; font-style:italic;}
a:link, a:visited {color:#4E6686; text-decoration:none; outline:none;}
a:active, li:active {outline:none;}
a:hover {text-decoration:underline; color:#908e8e;}
p {padding:0 0 .8em 0; line-height:170%;}
a.lnkPanelHide {text-transform:uppercase; float:right; display:inline; width:3em; padding-right: 15px; text-align:right; background:url(../../img/lyt/icon-close.gif) no-repeat 100% .3em; color:#779745; font-size:.85em;}
.siteTitle a img {border:0;}
.siteTitle span {display:none;}
.siteTitle {padding:10px 0 5px 60px;}
em.note {color:#672e29;}
p.intro:first-letter {float:left; font-size:3em; color:#3A5272; margin:0 3px 3px 0; vertical-align:top; line-height:90%;}
.caseDetailWrap h3 {font-size:170%; background-position:100% .3em;}

/* CONTACT INFO */
.contactHdr {float:right; padding: 15px 15px 0 0; text-align:right; font-size:.85em;}
.contactHdr li {padding-right:20px; margin:0; background-repeat:no-repeat; background-position: 100% 0; list-style-type:none; line-height:1.5em;}
.cPhone {background-image:url(../../img/lyt/icon-phoneHdr.gif);}
.cEmail {background-image:url(../../img/lyt/icon-emailHdr.gif);}
.cLinkedIn {background-image:url(../../img/lyt/icon-linkedIn.gif);}

/* TABBED MENU */
.topNav {width:100%; text-align:right; background:url(../../img/lyt/bg-topNav.gif) repeat-x bottom; overflow:auto;}
.topNav li {float:right; margin:3px 2px 0 0; border:1px solid #efeae3; list-style-type:none;}
.topNav li a {background:#aba59b url(../../img/lyt/bg-topNavLi.gif) repeat-x 0 0; border:1px solid #a1998d; float:left; line-height:20px; padding:2px 20px; color:#cbbfab;}
.topNav li a:hover {background:#7C7262; text-decoration:none;}
.portfolio li#portfolio, .process li#process, .bio li#bio, .home li#home, .schedule li#schedule, .RelEd li#RelEd, .Staff li#Staff, .content li#content,.bulletin li#bulletin,{margin-top:0; border-bottom: 1px solid #d5c8b4;}
.portfolio li#portfolio a, .portfolio li#portfolio a:hover, .schedule li#schedule a, .schedule li#schedule a:hover, .content li#content a, .content li#content a:hover, .home li#home a, .home li#home a:hover {border-bottom:1px solid #d5c8b4; padding:4px 15px 3px; background:#d5c8b4; color:#3f3c38; text-decoration:none;}
li#bio {margin-right:15px;}

/* SUBMENU */
.subNav {overflow:auto; padding-left:75px;}
.subNav li {display:inline; margin:0 8px 0 0; padding:0 12px 0 0;}
.subNav li a {padding:7px 0 0; display:inline-block; border-top:3px solid #fff; color:#4a74ad; font-size:120%;}
.subNav li a:hover {border-top-color:#e3dacb; text-decoration:none;}
#subWork { background:url(../../img/lyt/bg-subNav.gif) no-repeat 100% 90%;}
.work #subWork a, .process #subProcess a {color:#672e29; border-top-color:#672e29;}

/* WORKMENU */
.workMenu {width:510px; margin-left:75px; overflow:auto; padding:15px 0; padding-bottom:21px; background:url(../../img/lyt/bg-workMenu.gif) repeat-x 0 100%;}
.workMenu li {display:block; float:left; width:60px; height:60px; margin:0 15px 0 0;}
.workMenu li.lastItem {margin:0;}
.workMenu li img, .gallerySmall img {width:42px; height:42px; border:1px solid #7c7262;}
.workMenu li a {padding:7px; display:block; border:1px solid #dcd6cc; background:#f7f4ef;}
.workMenu li a:hover {background:#f3f5e0; border:1px solid #C4C88A;}
.workMenu li a span {display:none;}

/* QUOTE */
.pgQuote {width:150px; text-align:center; padding-bottom:150px;}
.pgQuote div {background:url(../../img/lyt/bg-pgQuote.gif) no-repeat 0 40px; padding-top:80px;}
.pgQuote img {margin-top:38px;}
.pgQuote p {padding-bottom:40px; background:url(../../img/lyt/bg-pgQuote.gif) no-repeat 100% 100%;}
.pgQuote q {display:block; font-size:130%; margin: 0 0 15px; padding:0 0 15px; line-height:normal; font-weight:normal; font-style:italic; letter-spacing:.1em; color:#672e29; border-bottom:1px dotted #e3dacb;}
.pgQuote q:after, .pgQuote q:before {content:"";}/* Disable for IE compatablity */

/* CONTENT */
.pgContent {width:650px; padding: 30px 0 60px; background:url(../../img/lyt/bg-pgTabID.gif) no-repeat;}
.home .pgContent {background-position:458px 0; width:740px; float:none;}
.Directions .pgContent {background-position:458px 0; width:740px; float:none;}
.RelEd .pgContent {background-position:458px 0; width:740px; float:none;}
.schedule .pgContent {background-position: 400px 0;}
.process .pgContent {background-position: 498px 0;}
.bio .pgContent {background-position:577px 0;}
.pgContent h1 {margin-left:55px; background:url(../../img/lyt/bg-h1.gif) no-repeat 0 .2em; font-size:300%; font-weight:400; letter-spacing:.25em; padding:0 0 12px 20px; color:#3A5272;}

/* WORK DETAILS */
.detailsGroup {padding:20px 65px 0 0; position:relative;}
.detailWrap h2, .bio h2 {margin:15px 0 15px 0; border-bottom:1px dotted #e3dacb; padding-bottom:8px;}
.detailWrap h2 span, .bio h2 span {font:normal .4em/normal Arial, Helvetica, sans-serif; color:#000; display:block; line-height:200%; text-transform:uppercase; letter-spacing:.2em;}
.detailWrap h2 em, .bio h2 em {display:block; font-size:.7em; border-bottom:1px dotted #e3dacb; padding-bottom:2px; margin-bottom:8px;}
.detailWrap {padding:0 150px 0 75px; min-height:300px;}
.caseDetails {display:inline; font-weight:bold; padding:0 0 0 15px; background:url(../../img/lyt/icon-expand.gif) no-repeat 0 50%; width:12em;}
.collapse {background-image:url(../../img/lyt/icon-collapse.gif);}

/* GALLERY */
.galleryWrap {width:135px; background:url(../../img/lyt/bg-gallery.gif) no-repeat -215px 100%; float:right; position:absolute; top:45px; right:65px;}
.galleryCont {background:url(../../img/lyt/bg-gallery.gif) no-repeat 0 0; padding:40px 0; overflow:auto;}
.galleryCont img {border:1px solid #7c7262; margin:7px;}
.galleryLrg {display:block; height:133px; border:1px solid #dcd6cc; background:#f7f4ef;}
.galleryLrg img {width:116px; height:116px;}
.gallerySmall {display:block; width:58px; height:58px; border:1px solid #dcd6cc; background:#f7f4ef; float:left;}
.g1 {margin:15px 15px 0 0;}
.g2 {margin:15px 0 0;}

/* ICON LINKS */
.deliverable {border:dotted #e3dacb; border-width:1px 0 0; display:block; background-repeat:no-repeat; background-position: 0 5px; padding:5px 0 5px 40px;}
.deliverable:hover {background-color:#F5F6E9;}
.deliverable:hover strong {background:url(../../img/lyt/icon-h4.gif) no-repeat 100% .3em;}
.persona {background-image:url(../../img/lyt/icon-persona.gif);}
.workflow {background-image:url(../../img/lyt/icon-workflow.gif);}
.wireframe {background-image:url(../../img/lyt/icon-wireframe.gif);}
.deliverable:hover {text-decoration:none;}
.deliverable strong {font:italic 1.5em/normal Georgia, "Times New Roman", Times, serif; display:inline; padding-right:15px;} /* font-style,variant, weight */
.deliverable span {display:block; clear:left; line-height:170%;}

/* CONTENT PAGE */
.pageContent {padding:30px 60px 0 75px;}
.pageContent h2 {border-bottom:1px dotted #e3dacb; margin-right:230px;}
.pgSummary {float:right; width:215px; border:1px solid #e3dacb; margin:0 0 20px 20px;}
.pgSummaryCont {margin:3px; padding:10px; border:1px dotted #e3dacb;}
.pageContent ul, .ul-default {padding-left:5px;}
.pageContent ul li, .ul-default li {list-style-type:square; margin:0 0 10px 12px; padding:0;}
.pageContent ul ul {padding-top:10px;}
.pageContent ul ul li {list-style-type:circle;}
.ul-default li {line-height:170%;}
.caseDetailWrap {padding-top:20px;}

/* COLOR PALATE */
.colorPalate {overflow:auto; margin-bottom:15px;}
.colorPalate li {float:left; width:58px; height:80px; margin:0 15px 0 0; border:1px solid; border-color:#E0DCD5 #C9C2B8 #A3998A; text-align:center; list-style-type:none;}
.colorPalate li.lastItem {margin:0;}
.colorPalate li div {display:block; margin:4px; width:50px; height:50px;}

/* TRADELIST */
dl.tradelist {margin-top:0; padding-top:0;}
dl.tradelist dd {padding-bottom:15px;}
dl.tradelist dd ul li {margin-bottom:2px;}
dl.tradelist dt {font-weight:600; padding:0 0 5px;}
dl.tradelist dt span {display:block; font-size:.85em; font-style:italic; font-weight:normal; padding-top:3px;}

/* CONTACT LIST */
.pgSummaryCont dd {padding:10px 0 15px 16px;}
.pgSummaryCont dd span {display:block;}
span.phoneNum, span.emailAdd {padding-left:18px; margin-left:-18px; background-repeat: no-repeat; background-position: 0 .3em;}
span.phoneNum {background-image:url(../../img/lyt/icon-phone.gif);}
span.emailAdd {background-image:url(../../img/lyt/icon-email.gif); margin-top:5px;}
span.comments {font-size:.85em; padding-top:3px;}
.pgSummaryCont dd ul {padding-left:0; margin-left:-10px;}
.pgSummaryCont dd ul li em {font-size:.8em; font-style:normal;}

/* SPECTRUM */
.spectrum {border-left:30px solid; padding:15px; background-color:#ECEDDC; border-bottom:1px dotted; overflow:auto;}
.sp1 {border-color:#8D9254;}
.sp2 {border-color:#B3B683;}
.sp3 {border-color:#CFD1AC; border-bottom:0;}
.spectrum ul {float:right; width:50%; margin:0 0 15px 15px;}
.spectrum ul li {list-style-type:none; padding-left:15px; background:url(../../img/lyt/bulletL1.gif) no-repeat 0 .4em;}

/* PROCESS TABLE */
.processWorkflowWrap {width:510px; background:#fcfbf8 url(../../img/lyt/bg-processTableWrap.gif) repeat-x 0 45px;}
.processWorkflow {background:url(../../img/lyt/bg-processTable.gif) repeat-y; border:1px solid #EFE4D3;}
.processWorkflow td {background:transparent; border:0;}
.processWorkflow td, .processWorkflow th {padding:3px; vertical-align:top;}
.processWorkflow span {display:block; margin:3px; border:1px solid; border-color:#e5e2dd #c2bbb0 #a69b8b; padding:5px; background:#fff; background-position: 100% 100%; background-repeat:no-repeat;}
.processWorkflow thead th {background-color:#8B504B; color:#fff; text-align:center; border-collapse:collapse;}
.processWorkflow thead tr.trFirst th {background:#672E29; border:dotted #703631; border-width:0 0 1px;}
.processWorkflow caption {text-align:left;}
.processWorkflow caption span {display:block; padding:7px; font-size:1.4em; border:solid #C29692; border-width: 1px 1px 0; margin:0 1px;}
.processWorkflow caption span ul {float:right;}
.processWorkflow caption span ul li {list-style-type:none; padding:0; margin:0; font-size:.8em; line-height:normal; clear:both;}
.processWorkflow caption span ul li img {float:left; margin:6px 3px 0 0;}
.processWorkflow td.timeLineStage {font:italic normal 1.3em/normal Georgia, "Times New Roman", Times, serif; padding:6px 3px; border-top:1px dotted #A6706B; border-bottom: 1px dotted #DABDBA; margin-top:5px; background:url(../../img/lyt/bg-timelineSection.png) repeat-y;}
.processWorkflow td.timeLineStage div {background:url(../../img/lyt/bg-timelineSectionDiv.gif) no-repeat 5px 50%; display:block; padding:0 0 0 30px; color:#824741;}
.processWorkflow span.spanHover {border:1px solid; border-color:#a69b8b #c2bbb0 #fff; background-color:#ECF0F5; cursor:pointer;}
.processWorkflow td span.deliver {background-image:url(../../img/lyt/icon-deliverable.gif);}
.processWorkflow td span.research {background-image:url(../../img/lyt/icon-research.gif);}
.processWorkflow tfoot td {background:#F3F0EB; border-top:1px dotted #A6706B;}
.processWorkflow tfoot td span {border:0; background:#F3F0EB;}

/* TOOLTIP */
#tooltip {position: absolute;	z-index: 3000; background:#fff; border:1px solid #B4837E; width:250px; text-align:left;}
#tooltip .tipWrap h3, #tooltip .tipWrap div { margin:5px; font-size:.9em; line-height:170%;}
#tooltip .tipWrap h3 {padding:0 0 5px 17px; background:url(../../img/lyt/bg-toolTip.gif) no-repeat 0 .3em; display:block;}
#tooltip .tipWrap div {padding-left:17px;}
#tooltip h3 {letter-spacing:normal; font-weight:bold; text-transform:none;}
#tooltip .tipWrap {margin:3px; padding:3px 3px 10px; background:#f7f4ef; border:1px dotted #B4837E;}

/* WORK MENU TIP */
#workMenuTip {display:block; width:508px; margin:0 0 0 75px; position:absolute; border:solid #e3dacb; border-width:0 1px 1px;}
#workMenuTip span {display:block; margin:2px; border:1px dotted #e3dacb; padding:5px 5px 5px 24px; background:#f7f4ef url(../../img/lyt/bg-workMenuTipSpan.gif) no-repeat 7px 50%;}

/* HOMEPAGE BANNER */
.homeBanner {background: url(../../img/lyt/bg-homeBanner.gif) no-repeat 0 0; overflow:hidden; width:100%; position:relative;}
.homeBanner ul {width:100%; height:360px; overflow:hidden;}
.homeBanner ul li {float:right; margin:0; padding:0; list-style-type:none; background-repeat:no-repeat; background-position:0 0; position:relative;}
.homeBanner ul li a {display:block; overflow:hidden; width:150px; height:360px; text-align:left; text-decoration:none; color:#fff; }
.homeBanner ul li#bannerPortfolio {background-image:url(../../img/lyt/bannerPort.jpg);}
.homeBanner ul li#bannerProcess {background-image:url(../../img/lyt/bannerProcess.jpg);}
.homeBanner ul li#bannerBio {background-image:url(../../img/lyt/bannerBio.jpg);}
.homeBanner ul li span {margin:60px 0 0 180px; background:url(../../img/lyt/bg-bannerSpan.gif) no-repeat 0 -237px; display:block; width:233px; padding:0;}
.homeBanner ul li span b {display:block; padding:50px 40px; background:url(../../img/lyt/bg-bannerSpan.gif) no-repeat 100% 2px; text-align:center; font-weight:normal; font-size:1.2em; line-height:170%;}
.homeBanner ul li span b:first-letter {float:left; font-size:3em; color:#b09c87; margin:0; vertical-align:top; line-height:90%;}
.homeBanner ul li#bannerBio span b {padding-top:30px;}
.homeBanner ul li#bannerPortfolio span b {padding-top:30px;}
.homeBanner ul li#bannerProcess span b:first-letter {margin-right:-27px;}
.homeBanner ul li strong {position:absolute; bottom:15px; left:10px; font-weight:normal; font-size:30px;}
.homeBanner ul li#bannerPortfolio strong em {color:#b09c87;}
.homeBanner ul li#bannerProcess strong em, .homeBanner ul li#bannerProcess span b:first-letter {color:#8A922D;}
.homeBanner i {display:none;}

/* FOOTER */
.pgFoot .ftrAwards {padding:0 15px 15px; text-align:right; display:block; width:99%;}
.pgFoot .ftrAwards dt {color:#585045; padding:0 0 10px; font-weight:bold;}
.pgFoot span {clear:both; display:block; padding-top:15px; width:auto;}
.pgFoot .ftrAwards dd ul li {float:right; width:75px; list-style-type:none; margin-left:5px; border:0;}
.pgFoot .ftrAwards dd ul li a img {border:1px solid #3F3C38;}
.pgFoot .ftrAwards dd ul li a i {display:none;}
.pgFoot div {border:1px solid #3F3C38; padding:30px 15px; text-align:right;}
.pgFoot div span.copyright {color:#585045;}	

/* TRANSITION CLASSES */
.pgNone {display:none;}
.pgHidden {visibility:hidden;}
.imgHidden {display:none;}
*:active, *:focus {outline:none !important;}