/******************************************************************************/ /* CUSTOM CSS STYLESHEET - DocBox Public Website /* /* AUTHOR: Jared Williams (BlakeMedia) /* VERSION: mark 1.0 /* CREATED: 11 July 2013 /* MODIFIED: 11 January 2016 /* (c) Copyright 2002-2016 BlakeMedia & MediaIQ Group /******************************************************************************/ /******************************************************************************/ /* TEMPLATE */ /******************************************************************************/ /****************************** TEMPLATE MASTER *******************************/ #tplMaster {height:auto !important;height:100%;min-height:100%;margin-bottom:-155px} #tplMaster .bg {width:100%;height:95px;position:absolute;top:0;left:0;z-index:-100;background:url(/_images/master/grad-sprite.png)} #tplHeader > .inner, #tplFooter > .inner, #tplHeader .submenu > .inner {width:980px;height:100%;position:relative;margin:0 auto} /****************************** TEMPLATE HEADER *******************************/ #tplHeader {width:100%;height:193px;position:relative} /*** LOGO ***/ #tplHeader .logo {width:240px;height:132px;position:absolute;top:11px;left:-61px;z-index:10} #tplHeader .logo A {width:100%;height:100%;display:block} /*** QUICK LOGIN ***/ #tplHeader .login {position:absolute;top:0;right:0} #tplHeader .login {width:140px;height:54px;text-align:center;line-height:2.4;font-size:80%;color:#FFF;background:url(/_images/master/master-sprite.png) -0px -75px} #tplHeader .login A {width:120px;height:51px;padding-left:20px;display:block;padding-top:3px;color:#FFF} #tplHeader .login .icon {width:15px;height:15px;position:absolute;top:8px;left:15px;background:url(/_images/master/master-sprite.png) -102px -35px} /*** NAVIGATION MENU ***/ #tplHeader .menu {position:absolute;top:70px;right:0;font-size:80%} #tplHeader .menu UL, #tplHeader .menu UL LI {margin:0;padding:0;list-style:none} #tplHeader .menu UL {} #tplHeader .menu UL LI {height:100%;float:left;margin-right:5px;padding-left:10px;background:url(/_images/master/master-sprite.png) 0px -282px} #tplHeader .menu UL LI:first-child {padding-left:0;background:none} /** OFF **/ #tplHeader .menu UL LI A {height:100%;padding:10px;display:block;text-align:center;text-decoration:none;color:#a1a1a1} /** ON **/ #tplHeader .menu UL LI:hover A {color:#626262} #tplHeader .menu UL LI.on A {color:#454545} /*** SUB-NAVIGATION MENU ***/ #tplHeader .submenu {width:100%;height:98px;position:absolute;bottom:0;left:0;background:url(/_images/master/grad-sprite.png) -0px -135px} /* 110px */ #tplHeader .submenu UL, #tplHeader .submenu UL LI {height:100%;margin:0;padding:0;list-style:none} #tplHeader .submenu UL {margin:0} #tplHeader .submenu UL LI {width:224px;float:left;margin-left:-28px;background-image:url(/_images/master/nav-sprite.png?w=224)} #tplHeader .submenu UL LI A {height:52px;padding:10px 15px 20px;display:block;text-align:center;text-decoration:none;color:#FFF} #tplHeader .submenu UL LI .inner {position:relative;z-index:15;margin:8px} /** STATES **/ #tplHeader .submenu UL LI {background-position:-0px -0px} #tplHeader .submenu UL LI:hover {background-position:-0px -196px} #tplHeader .submenu UL LI.on {background-position:-0px -98px} /** ICON **/ #tplHeader .submenu UL LI .icon {width:35px;height:35px;margin:0 auto;background-image:url(/_images/master/master-sprite.png)} /* #tplHeader .submenu LI.clerking .icon {background-position:-0px -0px} #tplHeader .submenu LI.settlements .icon {background-position:-50px -0px} #tplHeader .submenu LI.paralegal .icon {background-position:-100px -0px} #tplHeader .submenu LI.searching .icon {background-position:-150px -0px} #tplHeader .submenu LI.corporate .icon {background-position:-200px -0px} #tplHeader .submenu LI.secretarial .icon {background-position:-250px -0px} #tplHeader .submenu LI.messaging .icon {background-position:-300px -0px} */ #tplHeader .submenu UL LI.clerking .icon {background-position:4px 5px} #tplHeader .submenu UL LI.settlements .icon {background-position:-50px 8px} #tplHeader .submenu UL LI.paralegal .icon {background-position:-97px 5px} #tplHeader .submenu UL LI.searching .icon {background-position:-145px 5px} #tplHeader .submenu UL LI.corporate .icon {background-position:-249px 5px} #tplHeader .submenu UL LI.secretarial .icon {background-position:-197px 5px} #tplHeader .submenu UL LI.messaging .icon {background-position:-300px 8px} /** LABEL **/ #tplHeader .submenu UL LI .label {margin-top:10px;text-align:center;text-transform:uppercase;font-size:85%;font-weight:300} #tplHeader .submenu UL LI.on .label {font-weight:500} /****************************** TEMPLATE CONTENT ******************************/ #tplContent {width:980px;margin:0 auto;padding-bottom:180px} /* 155px footer height */ #tplContent UL LI {font-size:13px} /* 90% - nested LI will be even smaller :( */ /*** BANNER ***/ .gBanner {width:996px;height:204px;position:relative;margin:20px -8px 25px} .gBanner .caption {height:32px;position:absolute;top:103px;left:170px;z-index:15;padding:16px;font-size:180%;font-weight:300;color:#FFF} .gNoBanner {width:100%;height:32px} .gBanner.home {background:url(/_images/banners/home.jpg);height:380px} .gBanner.about {background:url(/_images/banners/about.jpg)} .gBanner.contact {background:url(/_images/banners/contact.jpg)} .gBanner.clerking {background:url(/_images/banners/clerking.jpg)} .gBanner.settlements {background:url(/_images/banners/settlements.jpg)} .gBanner.paralegal {background:url(/_images/banners/paralegal.jpg)} .gBanner.corporate {background:url(/_images/banners/corporate.jpg)} .gBanner.secretarial {background:url(/_images/banners/secretarial.jpg)} .gBanner.searching {background:url(/_images/banners/searching.jpg)} .gBanner.messaging {background:url(/_images/banners/messaging.jpg)} .gBanner.join {background:url(/_images/banners/join.jpg)} .gBanner.agents {background:url(/_images/banners/agents.jpg)} /* Shards */ .gBanner.home.temp {background:none} .gBanner.home .caption {height:22px;top:278px;left:545px;padding:15px;font-size:115%} .gBanner.home .shards {height:100%;position:absolute;top:0} .gBanner.home .shards.left {width:358px;left:0;z-index:5} .gBanner.home .shards.mid {width:838px;left:0;z-index:1} .gBanner.home .shards.right {width:520px;right:0;z-index:5} .gBanner.home .shards .shard {width:100%;height:100%;position:absolute;top:0;left:0} .gBanner.home .shards.left .shard-1 {background:url(/_images/shards/left-1.png)} .gBanner.home .shards.left .shard-2 {background:url(/_images/shards/left-2.png)} .gBanner.home .shards.left .shard-3 {background:url(/_images/shards/left-3.png)} .gBanner.home .shards.left .shard-4 {background:url(/_images/shards/left-4.png)} .gBanner.home .shards.left .shard-5 {background:url(/_images/shards/left-5.png)} .gBanner.home .shards.mid .shard-1 {background:url(/_images/shards/mid-1.jpg)} .gBanner.home .shards.mid .shard-2 {background:url(/_images/shards/mid-2.jpg)} .gBanner.home .shards.mid .shard-3 {background:url(/_images/shards/mid-3.jpg)} .gBanner.home .shards.mid .shard-4 {background:url(/_images/shards/mid-4.jpg)} .gBanner.home .shards.mid .shard-5 {background:url(/_images/shards/mid-5.jpg)} .gBanner.home .shards.right .shard-1 {background:url(/_images/shards/right-1.png)} .gBanner.home .shards.right .shard-2 {background:url(/_images/shards/right-2.png)} .gBanner.home .shards.right .shard-3 {background:url(/_images/shards/right-3.png)} .gBanner.home .shards.right .shard-4 {background:url(/_images/shards/right-4.png)} .gBanner.home .overlay {width:100%;height:100%;position:absolute;top:0;left:0;z-index:10;background:url(/_images/shards/overlay.png)} /*** MAIN CONTENT ***/ .gContent {width:780px;float:left} /*** FLOATING ***/ .floatleft {float:left} .floatright {float:right} .clear, .clearblock {clear:both} /* Use .clearfix */ .result {padding:30px;text-align:center;font-weight:bold} /* TODO: Move to page specific container! */ /*** LAYOUT ***/ .col {} .col.left {width:70%} .col.right {width:30%} .subcol {} .subcol.left {width:50%;float:left} .subcol.right {width:50%;float:right} .subcol > .inner {} .subcol.left > .inner {padding-right:5px} .subcol.right > .inner {padding-left:5px} .row {width:100%;margin-top:7px;clear:both} .row > .inner {padding:20px} .subrow {width:100%} .subrow > .inner {} /****************************** TEMPLATE SIDEBAR *******************************/ #tplSidebar {width:198px;float:right;font-size:90%;background:url(/_images/master/grad-sprite-y.png)} #tplSidebar .title {height:42px;padding:12px 0 0 25px;text-transform:uppercase;font-weight:bold;color:#FFF;background:url(/_images/master/side-nav-sprite.png) -0px -0px} #tplSidebar UL, #tplSidebar UL LI {margin:0;padding:0;list-style:none} #tplSidebar UL {margin:-14px 0 0} #tplSidebar UL LI {margin:0 17px 0 22px;border-top:1px solid #ececec} #tplSidebar UL LI:first-child {border-top:none} #tplSidebar UL LI A {padding:10px;display:block;font-weight:300;color:#53a9d7; white-space: nowrap;} #tplSidebar UL LI A:hover {text-decoration:none} #tplSidebar UL LI {} #tplSidebar UL LI:hover {text-indent:5px} #tplSidebar UL LI.on {text-indent:5px;font-weight:bold} #tplSidebar UL LI.on A {font-weight:bold} #tplSidebar .end {height:20px;background:url(/_images/master/side-nav-sprite.png) -200px -0px}} /****************************** TEMPLATE FOOTER *******************************/ #tplFooter {height:155px} #tplFooter > .inner {height:0} #tplFooter .cols > .inner {width:980px;height:100%;margin:0 auto} /*** COLUMNS ***/ #tplFooter .cols {width:100%;height:132px;color:#FFF;background:url(/_images/master/grad-sprite.png) 0 -270px} /* -210px, -10 */ #tplFooter .cols .col {width:300px;height:100%;float:left} #tplFooter .cols .col .inner {padding:31px} #tplFooter .cols .col .title {position:relative;margin-bottom:5px;padding:1px 0 0 17px;display:block;text-transform:uppercase;font-size:125%} #tplFooter .cols .col .title .icon {width:24px;height:24px;position:absolute;top:0;left:-16px} #tplFooter .cols .col UL, #tplFooter .cols .col UL LI {margin:0;padding:0;list-style:none} #tplFooter .cols .col UL LI {width:33.3%;margin:7px 0 0 -16px;padding-left:16px;float:left;font-size:80%;background:url(/_images/master/master-sprite.png) -0px -313px} #tplFooter .cols .col A {font-weight:300;color:#FFF} #tplFooter .cols .col.middle {width:380px;background:url(/_images/master/master-sprite.png) -0px -140px} #tplFooter .cols .col.middle .inner {padding:20px 0 0 70px} #tplFooter .cols .col.middle UL LI.messaging {margin-left:87px} #tplFooter .cols .col .title .icon {background-image:url(/_images/master/master-sprite.png)} #tplFooter .cols .col.left .title .icon {background-position:-0px -35px} #tplFooter .cols .col.middle .title .icon {background-position:-35px -35px} #tplFooter .cols .col.right .title .icon {background-position:-70px -35px} #tplFooter .cols .col.right .contact {margin:11px 0 0 -16px} #tplFooter .cols .col.right .label {text-transform:uppercase;font-size:85%;font-weight:bold;color:#055B88} #tplFooter .cols .col.right .phone {font-size:110%} /*** COPYRIGHT ***/ #tplFooter .copyright {float:left;font-size:9px;text-align:center} /*** SPECIAL ***/ #tplFooter .bm-badge {margin-top:-5px;padding-bottom:10px;float:right} /******************************************************************************/ /* COMPONENTS */ /******************************************************************************/ /*** CAROUSEL ***/ .gCarousel {width:100%;height:300px;margin:0 auto;overflow:hidden} .gCarousel.slide {width:100%;height:100%} .gCarousel.slide.selected {} .gCarousel.slide.slide-1 {background:red} .gCarousel.slide.slide-2 {background:green} .gCarousel.slide.slide-3 {background:blue} .gCarouselNav {width:100%;height:30px;float:right} .gCarouselNav.button {width:30px;height:30px;margin-left:5px;float:left;opacity:0.8} .gCarouselNav.button.selected, .gCarouselNav.button:hover {opacity:1.0} .gCarouselNav.button.button-1 {background:red} .gCarouselNav.button.button-2 {background:green} .gCarouselNav.button.button-3 {background:blue} /*** SOCIAL MEDIA ***/ .gSocial {position:absolute;top:5px;right:5px} .gSocial DIV {width:30px;height:30px;float:left;margin-right:5px;background-image:url(/_images/master/social-100.png)} .gSocial DIV A {width:100%;height:100%;display:block} /* NORMAL */ .gSocial .facebook {background-position:-90px -0px} .gSocial .twitter {background-position:-90px -30px} .gSocial .googleplus {background-position:-90px -60px} /* WHITE */ .gSocial.white .facebook {background-position:-0px -0px} .gSocial.white .twitter {background-position:-0px -30px} .gSocial.white .googleplus {background-position:-0px -60px} /* BLACK */ .gSocial.black .facebook {background-position:-0px -0px} .gSocial.black .twitter {background-position:-0px -30px} .gSocial.black .googleplus {background-position:-0px -60px} /* HOVER */ .gSocial .facebook:hover {background-position:-60px -0px} .gSocial .twitter:hover {background-position:-60px -30px} .gSocial .googleplus:hover {background-position:-60px -60px} /******************************************************************************/ /* CONTENT - GLOBAL */ /******************************************************************************/ /******************************************************************************/ /* CONTENT - SPECIFIC */ /******************************************************************************/ /*** PAGE: Home ***/ .pgHome {} .pgHome .col {width:310px;margin-left:16.66px;float:left} .pgHome .col:first-child {margin-left:0} .pgHome .col .title {position:relative} .pgHome .col .title .icon {width:35px;height:35px;position:absolute;top:0;left:0;background:url(/_images/home-icons.png)} .pgHome .col.left .title .icon {background-position:-0px -0px} .pgHome .col.middle .title .icon {background-position:-35px -0px} .pgHome .col.right .title .icon {background-position:-70px -0px} /*** PAGE: Contact ***/ .pgContact {} .pgContact FORM {} /* Layout */ .pgContact FORM .col {width:300px} .pgContact FORM .col.left {float:left} .pgContact FORM .col.right {float:right} .pgContact FORM .row {width:100%;margin-bottom:10px;float:left} .pgContact FORM .fake-input {display:inline-block} /* Messages */ .pgContact FORM .result {width:100%;text-align:center;font-size:14px;color:#000} /* Errors */ .pgContact FORM INPUT.error, .pgContact FORM TEXTAREA.error, .pgContact FORM INPUT.error:hover, .pgContact FORM TEXTAREA.error:hover {border-color:#FF0000} .pgContact FORM DIV.error {text-align:right;font-size:12px;color:#FF0000} /*** PAGE: Sitemap ***/ .pgSitemap {} .pgSitemap UL {margin-left:16px} .pgSitemap UL LI {margin-bottom:5px;list-style:disc outside none} .pgSitemap UL LI A {color:#222} .pgSitemap .viewxml {margin-top:30px;display:inline-block} /*** PAGE: Error Page ***/ .pgError {} .pgError .controls {float:right} /******************************************************************************/ /* RESPONSIVITY */ /******************************************************************************/ /********************************** DESKTOP ***********************************/ @media only screen and (max-width: 1280px) and (max-height: 960px) { BODY {} } /*********************************** TABLET ***********************************/ /*** Landscape ***/ @media only screen and (max-device-width: 1024px) and (max-device-height: 768px) and (orientation: landscape) { BODY {} } /*** Portrait ***/ @media only screen and (max-device-width: 768px) and (max-device-height: 1024px) and (orientation: portrait) { BODY {} } /********************************* SMARTPHONE *********************************/ /*** Landscape ***/ @media only screen and (max-device-width: 640px) and (max-device-height: 480px) and (orientation: landscape) { BODY {} } /*** Portrait ***/ @media only screen and (max-device-width: 480px) and (max-device-height: 640px) and (orientation: portrait) { BODY {} } /******************************* END STYLESHEET *******************************/