/*============================================================================== DENTONS CREATIVE - GLOBAL STYLE SHEET Copyright 2008 Dentons Create - A trading style of Dentons Directories ltd. Written by dentonscreative.com, Author: Neil Thorne ================================================================================*/ /* Global Styles */ * {margin: 0; padding: 0; border: 0; font-family: "Lucida Sans", Arial, Helvetica, sans-serif;} body {background: #f8f6f3 url(../images/base/body_bg.gif) repeat-x top; text-align: left; font-size: 62.5%; } .clear {clear: both;} /*==================================================================== TEXT STYLES, A STYLES, LIST STYLES & VARIATIONS ======================================================================*/ /* Default Header Styles */ h1 {text-indent: -9999px; background: url(../images/base/logo.gif) left top no-repeat; line-height: 94px;} h1.alt {text-indent: -9999px; background: url(../images/base/logo_intranet.gif) left top no-repeat; line-height: 94px;} h2, h3, h4 {font-weight: normal;} h2, h3 {font-size: 1.8em; line-height: 1.8em; padding: 0; letter-spacing: -.05em; color: #333; text-indent: -9999px;} h4 { font-size: 2em; line-height: 1.8em; padding: 4px 20px 5px 0; letter-spacing: -0.05em; color: #666; font-weight: bold; text-align: left; } h5 {font-size: 1.4em; line-height: 1.6em; padding: 4px 0 5px 0; margin: 0 8px 6px 0; letter-spacing: -.05em; color: #333; border-bottom: 1px dotted #ccc;} /* Main Page Headers */ h2.intro {padding: 0; margin: 0; height: 110px; margin-bottom: 5px;} h2.ind {background: url(../images/headings/h2ind_welcome.gif) no-repeat center; } h2.about {background: url(../images/headings/h2_about.gif) no-repeat center; } h2.portfolio {background: url(../images/headings/h2_port.gif) no-repeat center; } h2.services {background: url(../images/headings/h2_services.gif) no-repeat center; } h2.hosting {background: url(../images/headings/h2_hosting.gif) no-repeat center; } h2.contact {background: url(../images/headings/h2_contact.gif) no-repeat center; } h2.outsource {background: url(../images/headings/h2_outsource.gif) no-repeat center; } h4.title {text-align:center;} #main h3.welcome {background: url(../images/headings/h3ind_welcome.gif) no-repeat left; height: 83px; margin-bottom: 30px;} #content h3.main {margin-bottom: 15px;} #content h3.hello {background: url(../images/headings/conth3_hello.gif) no-repeat left; height: 55px; } #content h3.webdesign {background: url(../images/headings/conth3_webdesign.gif) no-repeat left; height: 55px; } #content h3.webdev {background: url(../images/headings/conth3_webdev.gif) no-repeat left; height: 55px; margin-top: 25px;} #content h3.jobs {background: url(../images/headings/conth3_jobs.gif) no-repeat left; height: 55px; } #content h3.print {background: url(../images/headings/conth3_print.gif) no-repeat left; height: 55px; margin-top: 25px;} #content h3.contact {background: url(../images/headings/conth3_getintouch.gif) no-repeat left; height: 55px; } #content h3.hosting {background: url(../images/headings/conth3_hosting.gif) no-repeat left; height: 55px; } #content h3.featured {background: url(../images/headings/conth3_featuredprojects.gif) no-repeat top center; height: 45px; } #content h3.outsource {background: url(../images/headings/conth3_outsource.gif) no-repeat top left; height: 55px; } #content h3.sub {margin: 25px 0 10px 0; height: 30px; background-position: left bottom;} #content h3.meet {background: url(../images/headings/conth3_meettheteam.gif) no-repeat; } #content h3.where {background: url(../images/headings/conth3_where.gif) no-repeat; } #content h3.enquiry {background: url(../images/headings/conth3_enquiry.gif) no-repeat; } #content h3.thanks {background: url(../images/headings/conth3_thanks.gif) no-repeat; } #content h3.emails {background: url(../images/headings/conth3_emails.gif) no-repeat; } #content h3.domains {background: url(../images/headings/conth3_domains.gif) no-repeat; } #content h3.portfolio {background: url(../images/headings/conth3_portfolio.gif) no-repeat bottom center; } #content h3.interested {background: url(../images/headings/conth3_interested.gif) no-repeat; } /* Side Headers */ #side h3 {background: no-repeat left; display: block; width: 270px; height: 40px; margin: 10px 0;} #side h3.first {margin-top: 0;} #side h3.clients {background: url(../images/headings/sideh3_clients.gif);} #side h3.proposal {background: url(../images/headings/sideh3_proposal.gif);} #side h3.jobs {background: url(../images/headings/sideh3_jobs.gif);} #side h3.psd {background: url(../images/headings/sideh3_psd.gif);} #content #side h3.clients {background: url(../images/headings/sideh3_clients2.gif);} #content #side h3.proposal {background: url(../images/headings/sideh3_proposal2.gif);} /* Default / Alternative P Styles */ p {padding: 0 40px 14px 0; color: #444; font-size: 1.4em; line-height: 1.4em;} p.highlight {text-align:center;} .small {font-size: 12px;} .discreet {font-size: 9px; color: #666; line-height: 15px;} /* Link Styles */ a {color: #ff6600; font-weight: bold; text-decoration: none;} a:hover {color: #d8ff00; } a.skip {display: none; text-indent: -9999px;} p a, .stripinfo a {text-decoration: none; border-bottom: 1px dotted #ccc;} p a:hover, .stripinfo a:hover {color: #666; text-decoration: none;} /* List Styles */ ul {margin: 0 50px 25px 30px;} ul li {font-size: 1.4em; line-height: 1.4em; color: #555;} /*==================================================================== BASIC PAGE LAYOUT ======================================================================*/ /* Basic */ #header {width: 920px; height: 94px; background: url(../images/base/header_tel.gif) no-repeat right 27px; margin: 0 auto; position: relative; } #wrapper {border-top: 5px solid #c5e708; margin-top: 9px; padding-bottom: 30px;} #inner {width: 980px; margin: 0 auto; background: url(../images/base/nav_shade.gif) no-repeat top; padding-top: 15px;} /* 2 Col Layout */ #main {width: 595px; float: left; display: inline; padding: 10px 25px 20px 30px; margin-bottom: 30px; background: url(../images/base/mainborder.gif) repeat-y right; border-right: 1px solid #fff;} #mainFull {width: 930px; float: left; padding: 10px 0 20px 0; margin: 0 30px 30px 30px; background: url(../images/base/mainborder.gif) repeat-x top; border-top: 1px solid #fff;} #mainThanks {width: 930px; float: left; padding: 10px 0 20px 0; margin: 0 30px 30px 30px; background: url(../images/base/mainborder.gif) repeat-x bottom; border-bottom: 1px solid #fff;} #mainFull.alt {border-top: none; padding-top: 0; background: none;} #mainPort {width: 980px; display: inline; margin: 0 auto 40px auto; } #main img.float {float: left; margin-right: 20px;} #side {width: 270px; float: left; display: inline; padding: 5px 0 5px 28px; } #side p {font-size: 1.4em; line-height: 1.3em; padding: 0 0 16px 0; color: #666;} #side p.small {font-size: 1.2em; line-height: 1.2em;} #content {width: 980px; padding-top: 25px; margin: 0 auto 30px auto; position: relative; background: #efeeeb url(../images/portfolio/indport_bg.gif) repeat-x bottom; border-top: 1px solid #cbcac9; } #content p {color: #555;} /* Marketing Page */ img.cheatIMG {border: 5px solid #44464b; margin: 0 15px 15px 0;} img.cheatIMG:hover {border: 5px solid #CEEC2C; margin: 0 15px 15px 0;} img.cheatIMGlast {border: 5px solid #44464b; margin: 0 0 15px 0;} ul#cheatDL {list-style: none; margin: 0 0 15px 0; padding: 0;} ul#cheatDL li {display: block; float: left; width: 215px; text-align: center; margin-right: 18px; padding: 0;} ul#cheatDL li.last {margin: 0;} ul#cheatDL a:hover {color: #666; text-decoration: none;} ul.phase2 {list-style: none; margin: 0 0 0 35px; padding: 0 0 50px 0;} ul.phase2 li {display: block; float: left; width: 270px; text-align: center; margin-right: 50px; padding: 0;} ul.phase2 li.last {margin: 0;} ul.phase2 a:hover {color: #666; text-decoration: none;} /*==================================================================== FOOTER ======================================================================*/ #footerFull {height: 259px; background: url(../images/base/footer_bg.jpg) repeat-x bottom; border-top: 5px solid #2d2f35; border-bottom: 5px solid #d8ff00;} #footer {width: 980px; height: 259px; margin: 0 auto; background: url(../images/base/footer_leaf.jpg) no-repeat bottom right;} /* H2 Image Replacements */ h3.foot_what, h3.foot_contact {margin: 10px 0 10px 0;} h3.foot_what {background: url(../images/headings/h2_footwhatwedo.gif) no-repeat; } h3.foot_contact {background: url(../images/headings/h2_footcontact.gif) no-repeat;} #footer div {width: 300px; height: 195px; float: left; padding-left: 30px; margin: 14px 0 16px 0;} #footer div ul {margin: 0; padding: 0; list-style-type: none; } #footer div ul li {font-size: 1.2em; color: #ccc; line-height: 1.2em;} #footer div ul li.last {margin-top: 14px;} #footer div a {color: #d8ff00; border-bottom: 1px dotted #666;} #footer div a:hover {color: #ff6600; text-decoration: none;} #footer div p {color: #ccc; font-size: 1.2em; line-height: 1.2em;} .footlast {border-left: 1px solid #44464b; width: 290px;} #footer .logolast {padding: 10px 0 0 10px; width: 290px; background: url(../images/modules/ftlogobg.gif) no-repeat top left; height: 144px; margin-top: 25px;} #footer .logolast a {border: none;} ul#footNav {height: 39px; margin: 0; clear: left; margin-left: 30px; } ul#footNav li {margin: 0; padding: 0 10px 0 0; list-style: none; font-size: 1.1em; color: #666; line-height: 39px; background: none;} ul#footNav li, ul#footNav a {height: 39px; display: inline; margin: 0;} ul#footNav li a {text-decoration: none; color: #ccc; font-weight: normal; border: none;} ul#footNav li a:hover {color: #fff; border: none;} ul#footNav li a.current {color: #d8ff00; font-weight: bold;} ul#footNav li.last {margin-left: 35px;} /*==================================================================== MAIN SITE NAVIGATION ======================================================================*/ ul#livemenu { list-style-type: none; text-align: center; display: block; margin-top: 0px; margin-right: auto; margin-bottom: 0px; margin-left: auto; } ul#livemenu a {font-size: 1.2em; color: #CCC; display: block; height: 50px; text-decoration: none; padding: 0 25px;} ul#livemenu a:hover, ul#livemenu a.current{ color: #60BDE6; background: #000; -moz-border-radius: 10px; border-radius: 10px; } ul#livemenu li{ font-size: 1.2em; color: #CCC; background: #000; float: left; line-height: 50px; -moz-border-radius: 10px; border-radius: 10px; text-align: center; margin-right: 12px;} div#navCont {height: 42px; width: 980px; margin: 0 auto; position: relative;} div#navCont img.sticker {position: absolute; top: 12px; left: 868px; width: 88px; height: 85px;} ul#mainNav {height: 42px; width: 980px; position: relative; background: url(../images/base/nav.gif) no-repeat top; margin: 0; } ul#mainNav li {margin: 0; padding: 0; list-style: none; position: absolute; top: 0;} ul#mainNav li, ul#mainNav a {height: 42px; display: block;} ul#mainNav li a {text-indent: -9999px; text-decoration: none;} #opt1 {left: 30px; width: 42px;} #opt2 {left: 100px; width: 65px;} #opt3 {left: 190px; width: 57px;} #opt4 {left: 271px; width: 84px;} #opt5 {left: 380px; width: 96px;} #opt6 {left: 501px; width: 117px;} #opt7 {left: 645px; width: 83px;} #opt8 {left: 754px; width: 74px;} #opt1 a:hover {background: transparent url(../images/base/nav.gif) -30px -42px no-repeat;} #opt2 a:hover {background: transparent url(../images/base/nav.gif) -100px -42px no-repeat;} #opt3 a:hover {background: transparent url(../images/base/nav.gif) -190px -42px no-repeat;} #opt4 a:hover {background: transparent url(../images/base/nav.gif) -271px -42px no-repeat;} #opt5 a:hover {background: transparent url(../images/base/nav.gif) -380px -42px no-repeat;} #opt6 a:hover {background: transparent url(../images/base/nav.gif) -501px -42px no-repeat;} #opt7 a:hover {background: transparent url(../images/base/nav.gif) -645px -42px no-repeat;} #opt8 a:hover {background: transparent url(../images/base/nav.gif) -754px -42px no-repeat;} #opt1 a.current {background: transparent url(../images/base/nav.gif) -30px -84px no-repeat;} #opt2 a.current {background: transparent url(../images/base/nav.gif) -100px -84px no-repeat;} #opt3 a.current {background: transparent url(../images/base/nav.gif) -190px -84px no-repeat;} #opt4 a.current {background: transparent url(../images/base/nav.gif) -271px -84px no-repeat;} #opt5 a.current {background: transparent url(../images/base/nav.gif) -380px -84px no-repeat;} #opt6 a.current {background: transparent url(../images/base/nav.gif) -501px -84px no-repeat;} #opt7 a.current {background: transparent url(../images/base/nav.gif) -645px -84px no-repeat;} #opt8 a.current {background: transparent url(../images/base/nav.gif) -754px -84px no-repeat;} /* Pop Up Nav */ #mainNav table {border-collapse:collapse; width:0; height:0; position:absolute; top:0; left:0;} /* Style the list OR link hover. Depends on which browser is used */ #mainNav a:hover {visibility:visible; position:relative; z-index:200;} #mainNav li:hover {position:relative; z-index:200;} /* keep the 'next' level invisible by placing it off screen. */ #mainNav ul, #mainNav iframe {position:absolute; left:-9999px; top:-9999px; width:0; height:0; margin:0; padding:0; list-style:none; z-index:300;} #mainNav ul.sub1 {width:160px; z-index: 300;} #mainNav :hover iframe.one {left: 0; top: 36px; width:160px; height:100px;} #mainNav :hover ul {left: 0; top:36px; background: #242021; padding:3px; border: 2px solid #c2cb20; border-width:0 2px 2px; white-space:nowrap; height:auto; z-index:300;} #mainNav :hover ul li {display:block; height:32px; position:relative; font-weight:normal; width:auto; text-align: left;} #mainNav :hover ul li a {display:block; font-size:12px; height: 32px; line-height: 32px; width:auto; padding:0 10px; color:#fff; text-decoration:none; text-indent: 0;} #mainNav :hover ul li a:hover {background: #474747; color:#fff;} /*==================================================================== BASIC ENQUIRY FORM ======================================================================*/ form {padding: 0; border: 0; font-size: 1.4em; padding: 0; margin-bottom: 0;} form fieldset {padding: 12px 0; border: 0; float: left; margin: 0 30px 15px 0;} form label, textarea, select {display: block; padding-top: 3px; color: #555;} form label {margin: 0 5px 5px 0; text-align: left; width: 300px; padding-right: 5px;} form input {display: block; height: 24px; width: 410px; border: 1px solid #ccc; font-size: 1.2em; padding: 5px; margin-bottom: 5px;} form textarea {width: 860px; height: 200px; border: 1px solid #ccc; padding: 5px; font-size: 1.2em; margin-bottom: 7px; color: #555} form input:hover, form textarea:hover {border: 1px solid #333333;} form input:focus, form textarea:focus {border: 1px solid #e9872d;} form p.disclaimer {font-size: .8em; color: #555; padding: 15px 30px 15px 0; line-height: 1.2em; border-top: 1px solid #ccc; } form .submit {float: none; height: 30px; width: 171px; padding: 0; color: #fff; margin: 6px 0 10px 0; text-indent: -9999px; background: url(../images/buttons/submitenquiry.gif) no-repeat top; border: none;} form .submit:hover {background-position: 0 -30px; cursor: pointer; border: none;} form br {clear: left;} /*==================================================================== MAP HOLDER ======================================================================*/ #mapCont {border: 1px solid #d9d9d9; margin: 0; background: #fff; padding: 3px;} #map {height: 400px; font-size: 12px; margin: 4px;} p.marginleft { margin-left: 30px; } hr { width: 800px; } .border {border-top-width: 1px; border-top-style: solid; border-top-color: #CCC; margin-top: 20px; padding-top: 20px;} ul#team li {display: block; height: 145px; width: 378px; text-align: center; list-style-type: none; margin: 0; border: 1px solid #666; padding: 0;} ul#team h5 .name {font-size: 24px!important; color: #000!important;} ul#team p {margin-top: 40px;font-size: 12px; margin:50px 0 0 0!important; padding:0!important;} ul#team h5 {font-size: 12px!important;letter-spacing: normal!important; margin:40px 0 -25px 0; line-height:20px; display:block;color: #333!important; border:none!important;} ul#team a:hover h5, ul#team a:hover p, ul#team a:hover h5 .name {color: #333!important;} ul#team a{display: block; height: 146px; width: 379px; text-decoration: none; float: left; margin: 0 15px 15px 0} ul#team a:hover{ color: #333!important; background-color: #C2CB24; } ul#team {padding: 0; margin: 20px auto;width: 800px;} #content .x2client {width: 217px; margin: 0 -15px 20px 30px; float:left;} #content .x2client p {padding: 10px 0 0 0; text-align:center;} #content .img_tag { width: 215px; height:150px; border: 1px solid #CCC; background-color:#FFF; overflow: hidden; position: relative; text-align: center; } .x2client .img_tag img { width: 200px; margin-top: 0; margin-right: auto; margin-bottom: 0px; margin-left: auto; text-align: center; } /*==================================================================== PORTFOLIO DROPDOWN MENU ======================================================================*/ #portnav { margin: 0; padding: 7px 6px 0; background: none; line-height: 100%; } #portnav li { margin: 0 5px; padding: 0 0 8px; float: left; position: relative; list-style: none; } /* main level link */ #portnav a { font-weight: bold; color: #e7e5e5; text-decoration: none; display: block; padding: 0; margin: 0; } #portnav a:hover { background: #000; color: #fff; } /* main level link hover */ #portnav .current a, #portnav li:hover > a { } /* sub levels link hover */ #portnav ul li:hover a, #portnav li:hover li a { background: none; border: none; color: #666; -webkit-box-shadow: none; -moz-box-shadow: none; font-size:12px; height: 32px; line-height: 32px; width:auto; padding:0 10px; color:#fff; text-decoration:none; text-indent: 0; } #portnav ul a:hover { background: #474747 !important; color: #fff !important; } /* dropdown */ #portnav li:hover > ul { display: block; } /* level 2 list */ #portnav ul { display: none; margin: 0; padding: 0; width: 140px; position: absolute; top: 27px; left: 420px; background: #474747; border-left: solid 2px #c2cb20; border-right: solid 2px #c2cb20; border-bottom: solid 2px #c2cb20; border-top: solid 4px #000; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; -webkit-box-shadow: 0 1px 3px rgba(0,0,0, .3); -moz-box-shadow: 0 1px 3px rgba(0,0,0, .3); box-shadow: 0 1px 3px rgba(0,0,0, .3); } #portnav ul li { float: none; margin: 0; padding: 0; font-weight: normal; font-size:12px; height: 32px; line-height: 32px; width:auto; padding:2px; text-decoration:none; text-indent: 0; background: #242021; color:#fff; } #portnav ul a { } /* level 3+ list */ #portnav ul ul { left: 181px; top: -3px; } /* clearfix */ #portnav:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; } #portnav { display: inline-block; } html[xmlns] #portnav { display: block; } * html #portnav { height: 1%; }