/* [PROJECT] by FOURDESIGN DESIGN VERSION 1.0 CONTENTS ---------- 1.BODY 2.DEFAULT STYLING 3.HEADINGS 4.LINKS 5.IMAGES 6.LAYOUT 7.BRANDING/MASTHEAD 8.NAVIGATION 9.SITEINFO/FOOTER 10.HOME 11.PORTFOLIO 12.PORTFOLIO DETAIL 13.TEAM 14.CONTACT 15.CLIENTS 16.404 ERROR PAGE 17.ABOUT 18.NEWS ------------------- COLORS ------------ green #75C025 light green #D0EAB4 dark gray #4D4D4D light gray #F5F5F5 red #ff3a1a body text #4D4D4D link hover #75C025 link visited #558C1B ------------------- */ @import url(reset.css); /* RESET CSS */ @import url(forms.css); /* FORMS CSS */ @import url(scratch.css); /* SCRATCH */ /* 1.BODY ---------------------------------------------------------------------- */ body { text-shadow:rgba(0,0,0,0.01) 0 0 1px; font-size: 62.5%; line-height: 1.8em; font-family: Arial, Helvetica Neue, Helvetica, san-serif; color: #4D4D4D; background-color: #75C025;} a.access { position:absolute; top:-9999px; left:-9999px; font-family:Verdana,sans-serif; font-size:10px; font-weight:bold; background:#eee; border:2px solid #ddd; padding:10px; } a.access:focus { display:block; top:0; left:0; color:#333; } /* 2.DEFULT STYLING ---------------------------------------------------------------------- */ .clear{clear: both;} strong { font-weight:bold; } em { font-style:italic; } .green{ color: #75C025;} .light-green{color: #D0EAB4;} .gray{color: #999;} .top-border{ border-top: 1px solid #F5F5F5;} .push20{padding-left: 20px;} .whiteBG{background-color: #fff;} .temp-push{width: 100%; height: 800px;} .hiddenFields{display: none;} .hidden{display: none;} /* 3.HEADING ---------------------------------------------------------------------- */ p {font-size: 1.2em;} h1 {font-size: 2em; line-height: 1.5em;} h2 {font-size: 1.8em; line-height: 1.5em;} h3 {font-size: 1.6em;} h4 {font-size: 1.4em; line-height: 1.5em;} h5 {font-size: 1.2em; line-height: 1.5em;} h6 {font-size: 1em; line-height: 1.5em;} h1.page-title{color: #75C025; padding-bottom: 6px;} h1.page-title-gray{color: #999; float: left; width: 700px;} h2.page-caption{color: #999; line-height: 1.3em;} body.portfolio blockquote{font: italic 1.8em "Times New Roman", serif; color: #75C025; line-height: 1.3em; padding: 25px 100px 25px 25px; background: url(/assets/images/site/4d_quote.gif) no-repeat scroll left top;} body.portfolio blockquote p{ font-size: 0.8em; color: #b2b2b2; line-height: 1em; margin-top: 10px; padding-left: 10px;border-left: 4px solid #75C025;} /* 4.LINKS ---------------------------------------------------------------------- */ a:link, a:visited{color: #75C025; text-decoration: none;} a:hover, a:active{text-decoration: underline;} a:focus { color:#4D4D4D;} /* 5.IMAGES ---------------------------------------------------------------------- */ img{position: relative;} /* 6.LAYOUT ---------------------------------------------------------------------- */ div#super-wrapper{width: 100%; height: 100%; background: url(/assets/images/site/mainSite_bg.gif) repeat-x scroll left top;} div#top-corner{background: transparent url(/assets/images/site/mainSite_top.png) no-repeat scroll center 120px;} div#wrapper{margin: 0 auto; width: 960px; position: relative;} div#page{background: #FFF; margin: 17px 10px 0 10px;} div#page-bottom{width: 960px; height: 5px; background: url(/assets/images/site/mainSite_bottom.gif) no-repeat scroll left top;} div#page-header-left{float: left; width: 320px; margin-right: 20px;} div#page-header-right{float: left; width: 580px; height: 210px; position: relative;} div#page-header-right img{width: 580px; height: 210px;} .col-620{width: 620px; float: left;} .col-520{width: 520px; float: left;} .col-320{width: 320px; float: left;} .col-240{width: 240px; float: left;} .col-200{width: 200px; float: left;} .row-20{padding: 10px 0; width: 100%; height: 1px;} .marginR-300{margin-right: 300px;} .marginR-180{margin-right: 180px;} .marginR-140{margin-right: 140px;} .marginR-60{margin-right: 60px;} .marginR-40{margin-right: 40px;} .marginR-20{margin-right: 20px;} /* 7.BRANDING/MASTHEAD ---------------------------------------------------------------------- */ div#branding{width: 100%; height: 120px; margin: 0 0 7px 0;} div#branding div.logo{width: 200px; height: 80px; position: absolute; top: 30px;} div#branding div.logo a{width: 200px; height: 80px; text-indent: -9999em; display: block; background: url(/assets/images/site/4d_logo.gif) no-repeat scroll 0 0;} div#branding div#client-login a{position: absolute; right: 0; z-index: 100; display: block; width: 110px; height: 30px; background: url(/assets/images/site/client_loginBTN.gif) no-repeat scroll 0 0; text-indent: -9999em;} div#branding div#client-login a:hover{ background: url(/assets/images/site/client_loginBTN.gif) no-repeat scroll 0 -30px;} /* 8.NAVIGATION ---------------------------------------------------------------------- */ ul#nav{margin: 0; padding: 0; width: 465px; right: 0; top: 52px; z-index: 99; position: absolute;} ul#nav li{display: inline; margin: 0; float: left; border-right: 1px solid #f5f5f5;} ul#nav li.last{ border-right-style: none;} ul#nav li.current{color: #75C025; text-decoration: none;} ul#nav li.current a{color: #75C025; background-color: #f5f5f5;} ul#nav li.current a span{color: #999999} ul#nav li a{display: block; width: 90px; margin: 0 5px 0 5px; padding: 5px 5px 5px 10px; font-size: 1.2em; color: #999999; font-weight: bold; letter-spacing: 0.1ex;} ul#nav li a span{font-family: "Times New Roman", serif; font-style: italic; font-weight: normal; word-spacing: 2px;} ul#nav li a:hover{background-color: #f5f5f5; color: #75C025; text-decoration: none;} ul#nav li a:hover span{color: #999999;} ul#sub-nav{margin: 10px 0; padding: 0 0 10px 20px; width: 900px; height: 50px; background: url(/assets/images/site/page-subnav.gif) no-repeat scroll 0 0;} ul#sub-nav li{float: left; margin-right: 5px;} ul#sub-nav li a{display: block; font-size: 1.6em; line-height: 2.5em; padding: 0 10px; color: #999; height: 50px;} ul#sub-nav li a:hover{color: #4D4D4D; text-decoration: none; background: url(/assets/images/site/page-subnav-select.gif) no-repeat scroll center top;} ul#sub-nav li.current{background: url(/assets/images/site/page-subnav-select.gif) no-repeat scroll center top;} ul#sub-nav li.current a{color: #4D4D4D;} /* 9.SITEINFO/FOOTER ---------------------------------------------------------------------- */ #footer{height: 20px; margin: 10px 0; padding: 0 10px; color: #D0EAB4;} #footer p.footer-nav a{color: #D0EAB4; text-decoration: none;} #footer p.footer-nav a:hover{color: #FFF; text-decoration: underline;} #footer p{font-size: 1em;} #footer p.footer-nav{float: left;} #footer p.copyright{text-align: right;} /* 10.HOME ---------------------------------------------------------------------- */ div#feature, div#feature-image img{width: 940px; height: 350px; position: relative;} div#feature div#feature-control{width: 130px; height: 33px; position: absolute; top: 300px; left: 795px; z-index: 99; background: url(/assets/images/site/4d-feature-rotator-bg.png) no-repeat scroll center top;} div#feature div#feature-control div{padding-left: 18px;} div#feature div#feature-control div a{display: block; float: left; width: 15px; height: 16px; text-indent: -9999em; margin: 9px 11px 0 0; background: url(/assets/images/site/4d-radioBTN.png) no-repeat scroll center top;} div#feature div#feature-control div a:hover, div#feature div#feature-control div a.activeSlide{background: url(/assets/images/site/4d-radioBTN.png) no-repeat scroll center bottom;} h1.home-banner{padding: 20px 10px 10px 20px; margin-bottom: 10px; font-size: 2.5em; color: #4D4D4D; border-bottom: 1px solid #F5F5F5;} h1.home-banner a{color: #b2b2b2;} h1.home-banner a:hover{color: #75C025; text-decoration: none;} div#content{margin: 0 0 0 10px;} div#content div.home-col-L h2, div#content div.home-col-M h2, div#content div.home-col-R h2{margin: 0 0 10px 0;} div#content div.home-col-L{float: left; width: 260px; padding: 0 10px;} div#content div.home-col-L ul.home-services li{padding-left: 5px; list-style-type: disc; list-style-position: inside; font-size: 1.3em; line-height: 2em;} div#content div.home-col-M{float: left; width: 260px; padding: 0 10px;} div#content div.home-col-M ul.home-links li a{display: block; padding: 15px 10px 15px 55px; font-size: 1.4em; border-bottom: 1px solid #F5F5F5; color: #b2b2b2;} div#content div.home-col-M ul.home-links li a:hover{color: #75C025; text-decoration: none;} div#content div.home-col-M ul.home-links li.link-sova{ background: url(/assets/images/site/social-icon-sova.gif) no-repeat scroll 13px 11px;} div#content div.home-col-M ul.home-links li.link-vt{ background: url(/assets/images/site/social-icon-vt.gif) no-repeat scroll 13px 11px;} div#content div.home-col-M ul.home-links li.link-facebook{ background: url(/assets/images/site/social-icon-facebook.gif) no-repeat scroll 13px 11px;} div#content div.home-col-M ul.home-links li.link-twitter{ background: url(/assets/images/site/social-icon-twitter.gif) no-repeat scroll 13px 11px;} div#content div.home-col-R{float: left; width: 340px; padding: 0 10px;} div#content div.home-col-R p{font-size: 1.3em; line-height: 2em;} div#content div.home-col-R p.home-contact-label{width: 70px; float: left; font-weight: bold;} div#content div.home-col-R p.home-contact-value{width: 270px; float: left;} div#content div.home-col-R img{margin: 10px 0;} /* 11.PORTFOLIO ---------------------------------------------------------------------- */ div#page-portfolio-left{width: 200px; float: left; margin-right: 20px;} div#page-portfolio-left ul#filter-nav{margin: 20px 0 10px 0; border-top: 1px solid #f5f5f5; padding: 10px 0;} div#page-portfolio-left ul#filter-nav li{font-size: 1.2em;} div#page-portfolio-left ul#filter-nav li a.current{color: #75C025;} div#page-portfolio-left ul#filter-nav li.sort-label{ text-transform: uppercase; font-weight: bold; margin: 8px 0 5px 0;} div#page-portfolio-left ul#filter-nav li a{color: #999;} div#page-portfolio-left ul#filter-nav li a:hover{color: #75C025; text-decoration: underline;} ul#page-portfolio-right, div#page-portfolio-right{width: 700px; float: left;} ul#page-portfolio-right li.page-portfolio-item{float: left; margin: 0 20px 10px 0;} ul#page-portfolio-right li.page-portfolio-item a{width: 220px; height: 230px; display: block;} ul#page-portfolio-right li.page-portfolio-item a:hover{color: #000; text-decoration: none;} ul#page-portfolio-right li.page-portfolio-item a p{color: #808080; margin: 10px 0 0 0;} ul#page-portfolio-right li.page-portfolio-item a img{margin-bottom: 10px;} ul#page-portfolio-right li.last{margin-right: 0;} /* 12.PORTFOLIO DETAIL ---------------------------------------------------------------------- */ h2.back-to-overview{float: left; width: 220px; text-align: right;} h2.back-to-overview a{color: #999;} h2.back-to-overview a:hover{color: #75C025; text-decoration: none;} div#page-portfolio-detail-header{padding-bottom: 5px; margin-bottom: 10px; border-bottom: 1px solid #f5f5f5;} div#project-gallery{width: 700px;} div#project-gallery div#project-images{width: 700px; height: 433px; overflow: hidden; position: relative;} div#project-gallery div#project-gallery-tools{margin: 10px 0; padding: 0 0 10px 0; font-size: 1.1em; font-weight: bold; border-bottom: 1px solid #f5f5f5;} div#project-gallery div#project-gallery-tools a.next8{float: right; text-transform: uppercase; background: transparent url(/assets/images/site/right.gif) no-repeat scroll right center; padding: 1px 11px 0 0; line-height: 12px;} div#project-gallery div#project-gallery-tools a.prev8{float: right; text-transform: uppercase; background: transparent url(/assets/images/site/left.gif) no-repeat scroll left center; padding: 1px 0 0 11px; line-height: 12px;} div#project-gallery div#project-gallery-tools div.divider{float: right; padding: 0 10px; color: #999; line-height: 12px;} div#project-gallery div#project-gallery-tools div#project-gallery-counter{float: left; padding: 0 20px 0 0; position: relative;} /*div#project-gallery div#project-gallery-tools div#project-gallery-counter li{float: left; margin: 0 1px 0 0;}*/ div#project-gallery div#project-gallery-tools div#project-gallery-counter a{float: left; width: 15px; height: 15px; display: block; text-align: center; overflow: hidden; line-height: 15px; margin-right: 1px;} div#project-gallery div#project-gallery-tools div#project-gallery-counter a:hover, div#project-gallery div#project-gallery-tools div#project-gallery-counter a.activeSlide{background-color: #75C025; color: #fff; text-decoration: none;} #page-portfolio-left p.project-title{font-size: 2.3em; line-height: 1.2em; margin-bottom: 20px;} #page-portfolio-left p.project-client{font-size: 1.5em; line-height: 1.3em; color: #999; margin-bottom: 20px;} #page-portfolio-left p.project-label{text-transform: uppercase; color: #b2b2b2; font-weight: bold; letter-spacing: 0.2px; margin: 2px 0 5px 0;} #page-portfolio-left p.project-award img{float: left;} #page-portfolio-left div.project-description{color: #999;} /* 13.TEAM ---------------------------------------------------------------------- */ div.team-title{border-bottom: 1px solid #f5f5f5; margin-bottom: 20px; padding-bottom: 5px;} div.team-title h3{width: 500px; float: left;} div.team-title a{float: right; display: block; padding-bottom: 2px; color: #999;} div.team-title a:hover{color: #75C025; text-decoration: none;} div#team-student div.team-motto, div#team-faculty div.team-motto{width: 380px; float: left; margin-right: 20px; font-size: 2.5em; line-height: 1.4em; color: #b2b2b2;} div#team-student ul.team-grid, div#team-faculty ul.team-grid{width: 480px; float: left; margin: 0 40px 40px 0;} ul.team-grid li{width: 100px; height: 200px; margin: 0 20px 5px 0; float: left;} ul.team-grid li p.member-photo{width: 100px; height: 125px; margin-bottom: 5px; text-indent: -9999em; background-color: #f0f0f0; overflow: hidden;} ul.team-grid li p.member-photo img:hover{top: -125px;} ul.team-grid li a.member-name{color: #75C025; font-size: 1.4em; line-height: 1.2em; padding-bottom: 3px; display: block;} ul.team-grid li a.member-name:hover{text-decoration: none; color: #000;} ul.team-grid li p.member-title{font-size: 0.9em; line-height: 1.5em; text-transform: uppercase; color: #999; font-weight: bold;} /* 13.1 PERSON ----------------------- */ div#team-person h3.back-to-team{border-bottom: 1px solid #f5f5f5; margin-bottom: 20px; padding-bottom: 10px;} div#team-person h3.back-to-team a{color: #999;} div#team-person h3.back-to-team a:hover{color: #75C025; text-decoration: none;} img.favicon{display: block; width: 16px; float: left; margin-right: 5px;} div.contentrow-content-with-divider{border-top: 1px solid #EBEBEB; padding: 15px 0;} div#team-person div.contentRow{width: 700px; position: relative; font-size: 1.2em;} div#team-person div.contentRow-label{width: 80px; float: left; text-align: right;padding: 0 10px 0 0; font-weight: bold;} div#team-person div.contentRow-content{width: 500px; position: relative; margin-left: 100px; padding-right: 50px;} div#team-person div.person-summary{margin-bottom: 15px;} div#team-person div.contentRow-item-left{float: left; position: relative;} div#team-person div.contentRow-item-left div.person-photo {float: left; position: relative; width: 100px; height: 125px; overflow: hidden;} div#team-person div.contentRow-item-left div.person-photo img:hover{top: -125px;} div#team-person div.contentRow-item-right{float: left; overflow: hidden; position: relative; padding-left: 20px; width: 250px;} div#team-person div.contentRow-item-right div.person-name{color: #75C025; font-size: 1.4em; margin: 20px 0 4px;} div#team-person div.contentRow-item-right div.person-title{font-size: 0.9em; line-height: 1.5em; text-transform: uppercase; color: #999; font-weight: bold;} div#team-person div.contentRow-workitem-right-136{height: 136px;} div#team-person div.contentRow-item-right div.item-header{font-size: 1.4em; margin: 10px 0;} div#team-person div.contentRow-item-right div.item-header a:hover{text-decoration: none; color: #000;} div#team-person div.contentRow-item-right div.item-date{color: #999;} div#team-person div.sub-contentrow{margin-bottom: 15px; color: #999;} div#team-person div.sub-contentrow-label{width: 70px; float: left; padding: 0 15px; } div#team-person div.sub-contentrow-content{margin: 0 0 10px 115px;} div#team-person div.content-links{margin-top: 15px;} div#team-person div.personal-link{margin-bottom: 15px;} div#team-person div.personal-link a{color: #999; text-decoration: underline;} div#team-person div.personal-link a:hover{color: #000;} /* 13.2 ARCHIVE LIST ----------------------- */ div#team-people-container{position: relative;} div#team-people-list{margin: 0 0 0 100px;} h3.team-people-category{margin: 10px 0 10px 0; padding: 0 0 5px 0; border-bottom: 1px solid #f5f5f5;} div#team-people-list a.team-people-item{display: block; width: 700px; border-bottom: 1px solid #F5F5F5; border-top: 1px solid #F5F5F5; margin: 0 0 10px 0;} div#team-people-list a.team-people-item:hover{text-decoration: none; background-color: #F5F5F5;} div#team-people-list div.team-people-photo{width: 50px; height: 63px; overflow: hidden; float: left;} div#team-people-list div.team-people-photo img{left: 0; top: -250px;} div#team-people-list div.team-people-name{color: #75C025; font-size: 1.4em; line-height: 63px; float: left; padding: 0 20px 0 30px; width: 150px;} div#team-people-list div.team-people-title{float: left;font-size: 0.9em; line-height: 63px; text-transform: uppercase; color: #999; font-weight: bold; padding: 0 30px 0 0; width: 200px;} div#team-people-list div.team-people-email{font-size: 1.2em; color: #999; float: left; line-height: 63px;} /* 14.CONTACT ---------------------------------------------------------------------- */ div#page-contact-info{width: 180px; margin-right: 140px; padding: 0 20px 0 0; border-right: 1px solid #f5f5f5; float: left;} div#page-contact-info p.label{ text-transform: uppercase; font-weight: bold; margin: 15px 0 5px 0; padding: 0 0 5px 0; border-bottom: 1px solid #f5f5f5;} div#page-contact-info ul{font-size: 1.2em;} div#page-contact-info ul li{padding: 8px 0 8px 40px;} div#page-contact-info ul li a{color: #4D4D4D;} div#page-contact-info ul li a:hover{color: #75C025; text-decoration: none;} div#page-contact-info ul li.link-sova{ background: url(/assets/images/site/social-icon-sova-s.gif) no-repeat scroll 5px 5px;} div#page-contact-info ul li.link-vt{ background: url(/assets/images/site/social-icon-vt-s.gif) no-repeat scroll 5px 5px;} div#page-contact-info ul li.link-facebook{ background: url(/assets/images/site/social-icon-facebook-s.gif) no-repeat scroll 5px 5px;} div#page-contact-info ul li.link-twitter{ background: url(/assets/images/site/social-icon-twitter-s.gif) no-repeat scroll 5px 5px;} .contact h3{border-bottom: 1px solid #f5f5f5; margin-bottom: 10px;} div#google-map{width: 520px; height: 321px; margin: 10px 0;} /* 14.1 CONTACT FORM ----------------------- */ .contact form{position: relative; width: 460px;} .contact form label{display:block; margin-bottom:15px; } .contact form label span{margin-right:5px; font-weight:bold; font-size: 1.3em;} .contact form label span.required{font-style: italic; font-weight: normal; color: #ff3a1a; font-size: 1em;} /* 14.1.1 DEFAULT FORM STUFF ----------------------- */ .contact form input[type="text"] { width:284px; } .contact form textarea {width:444px; height:223px; } .contact form input[type="text"], .contact form textarea {background-color: #ededed; padding:8px; margin-top: 3px; font-size:1.2em; line-height: 1.4em; font-family:Arial,Helvetica,sans-serif; color:#4D4D4D; border-style: none;} .contact form input[type="text"]:focus, .contact form textarea:focus {background-color: #f5f5f5;} /* 14.1.2 SIMPLE FORM ----------------------- */ fieldset#contact-simple label[for="contact-name"], fieldset#contact-simple label[for="contact-email"], fieldset#contact-simple label[for="contact-company"] { width:300px; } /* 14.1.3 SUBMIT ----------------------- */ fieldset#contact-action label {display:none;} fieldset#contact-action input {display:block; width:112px; height: 35px; border:none; background: #75C025 url(/assets/images/site/4d_submitBTN.gif) no-repeat left top; font-size:1em; text-transform:uppercase; text-decoration:none; color:#fff; text-align:center; font-weight:bold; cursor:pointer; text-indent: -9999em; margin-bottom: 30px; outline: none;} fieldset#contact-action input:hover {background-color:#D0EAB4; background-position: left bottom; outline: none;} /* 14.1.4 VALIDATE FORM AND THANK YOU ----------------------- */ .contact form#contact-form input.invalid, .contact form#contact-form textarea.invalid{border-right: 2px solid #ff3a1a;} .contact div#thank_you{margin: 30px; font-size: 3em; line-height: 1.2em; display: none;} /* 15.CLIENTS ---------------------------------------------------------------------- */ body.clients blockquote{font: italic 1.8em "Times New Roman", serif; color: #75C025; line-height: 1.3em; padding: 10px; background: url(/assets/images/site/4d_quote.gif) no-repeat scroll left top;} body.clients blockquote p{ font-size: 0.8em; color: #b2b2b2; line-height: 1em; margin-top: 10px; padding-left: 10px;border-left: 4px solid #75C025;} .client_quotes {} body.clients h3{margin: 10px 0 10px 0; padding-bottom: 5px; border-bottom: 1px solid #f5f5f5;} body.clients div.col-320 ul{font-size: 1.2em; line-height: 1.8em; } body.clients div.col-320 ul li{margin: 0 0 0 25px; list-style-type: disc; list-style-position: outside;} /* 16.404 ERROR PAGE ---------------------------------------------------------------------- */ div#error {width: 640px; margin: 0 0 20px 115px;} div#error img{width: 640px;} div#error h1{border-top: 1px solid #f5f5f5; padding: 20px 0 0 0;} /* 17.ABOUT ---------------------------------------------------------------------- */ body.narrative div.col-620 ul{font-size: 1.2em; line-height: 1.8em; list-style-type: disc; list-style-position: inside; margin: 10px 0 10px 20px;} body.narrative h3{margin: 10px 0;} /* 18.NEWS ---------------------------------------------------------------------- */ body.news h2{margin: 10px 0 0 0;} body.news div.news_entry_date{font-size: 1.1em; font-style: italic; color: #999; margin-bottom: 10px;}