/* ---------------------------------------------------------- * * Filename: global.css * Description: Global CSS * Version: 1.2.1 (06-2009) MM-YYYY * Website: http://www.clear-living.co.uk * Author: Jonny Wood * Company: J.Wood Creative ==STRUCTURE=============================================== * Page width 820px * No. of columns 2 * Additional info Highslide image portfolio Fixed width & height, centered in screen $ __global Global Parameters $ __layout Page Layout $ __footer Footer $ __menu Main Navigation $ __highslide Highslide image portfolio $ __forms Forms * ------------------------------------------------------- */ /* __global Global Parameters * ------------------------------------------------------- */ * {margin:0;padding:0;font-family:Helvetica, Arial, Tahoma, sans-serif} /* mac hide \*/ html, body {height:100%;width:100%} /* end hide */ body {min-height:620px;min-width:820px;text-align:center;color:#FFF;background:#1E638E} #outer {display:table;vertical-align:middle;height:100%;width:100%} #container {position:relative;display:table-cell;vertical-align:middle;margin:0 auto;width:820px;height:650px;text-align:center} #inner {margin:0 auto;width:820px;height:650px;text-align:center} a:link, a:visited {color:#FFF;text-decoration:none;background:#31779F;outline:none;border:none;cursor:pointer} a:hover {background:#FF9900} a:active {color:#FFF;text-decoration:none;background:#31779F;outline:none;cursor:pointer} img, a img {border:none} #fl-home a {display:block;text-indent:-999em;width:820px;height:240px;background:url(../resources/holder-flash.jpg) no-repeat 0 0;border:none} .small {font-size:10px} #preload {position:absolute;left:-999em;top:-999em;width:0;height:0;background:url(../resources/nav.gif);background:url(../resources/subnav.png);background:url(../resources/subnav-hover.png)} h1, h2, h3, h4 {font-weight:100} h1 {font-size:24px;line-height:28px;margin-bottom:6px} h2 {font-size:20px;line-height:24px;margin:3px 0 12px 0} h3 {font-size:17px;line-height: 21px;margin:12px 0 8px 0} h4 {font-size:14px;line-height:18px;padding-bottom:4px;font-weight:bold} /* __layout Page Layout * ------------------------------------------------------- */ #header {display:block;float:left;width:820px;height:120px;padding-bottom:4px} #header h1 {display:block;margin:0 auto;width:800px;height:120px;background:url(../resources/CLEAR_LIVING.gif) no-repeat 0 0;text-indent:-999em} #content {display:block;float:left;width:820px;height:432px;z-index:2} #cl-legal #content { overflow:auto;width:800px;height:412px;padding:10px;text-align:left;background:#448CB1} #cl-legal #content a {padding:2px 4px} #content ul {margin:10px 0;list-style:square;padding:0 20px} #content ul a, #content ul a:hover {line-height:20px} #middle {display:block;float:left;width:820px;height:240px} body#cl-about #middle {background:url(../resources/holder-about.jpg)} .error {background:url(../resources/bg-error.jpg) no-repeat;width:820px;height:140px;padding-top:100px;text-align:center} .left, .right {float:left;width:382px;height:164px;padding:14px;overflow:hidden;text-align:left} .left {background:#6CA6C7;font-size:18px;line-height:24px;font-weight:100} .left a, .right a {padding:2px 4px} .right {font-size:12px;line-height:16px;background:#448CB1;overflow:auto} .right p {margin-bottom:8px} #bottom {display:block;float:left;width:820px;height:192px} #bottom-left, #bottom-right {float:left;width:382px;height:164px;padding:14px;overflow:hidden;text-align:left} #bottom-left a, #bottom-right a {padding:2px 4px} #bottom-left {background:#6CA6C7;font-size:18px;line-height:24px;font-weight:100} body#cl-contact #bottom-left {padding-right:0;width:396px} body#cl-credits #bottom-left{font-size:12px;line-height:16px} #bottom-right {font-size:12px;line-height:16px;background:#448CB1;overflow:auto} #bottom-right p, #bottom-right ul {padding-bottom:12px} #bottom-right ul {margin-top:-6px} #bottom-right ul li {padding-bottom:4px} body#cl-contact #bottom-right {overflow:auto} .credit-holdens {float:left;display:block;margin:0 22px 18px 0} .credit-holdens a, .credit-holdens a:hover {display:block;width:150px;height:52px;background:url(../resources/Holden_logo.gif);text-indent:-999em;outline:none} .credit-holdens a:hover {background-position:0 -56px} .contact-email {display:block;width:820px;height:120px;text-indent:-999em;background:url(../resources/contact-email.gif) no-repeat} .map {font-size:12px;line-height:16px} /* __footer Footer * ------------------------------------------------------- */ .footer {display:block;float:left;padding:8px 10px 6px 55px;height:42px;width:755px;background:url(../resources/CL.gif) no-repeat 10px 0} #f-contacts {display:block;float:left;width:755px;height:42px;list-style:none} #fc-tel, #fc-form, #fc-email {display:block;float:left;margin-left:59px;background:url(../resources/nav-footer.gif) no-repeat;text-indent:-999em} #fc-tel {width:194px;height:42px;margin-left:0} #fc-form {width:204px;height:18px;background:none} #fc-form a {display:block;width:204px;height:18px;background:url(../resources/nav-footer.gif) no-repeat -196px 0} #fc-form a:hover {background-position:-196px -19px} #fc-email {width:238px;height:18px;background-position:-400px 0} #f-links {display:block;margin-top:-11px;float:right;clear:none;width:auto;font-size:11px;list-style:none} #f-links li {display:block;float:left;margin-left:28px} #f-links li a {color:#6BA6C6;background:none!important} #f-links li a:hover {color:#FFF} /* __menu Main Navigation * ------------------------------------------------------- */ #main_menu ul {margin:auto;margin-top:0;display:block;width:820px;list-style:none;font-size:12px;line-height:16px;text-transform:uppercase;z-index:99;cursor:pointer} #main_menu li {float:left;width:164px;line-height:14px} #main_menu ul li, #main_menu ul a {display:block;height:42px;cursor:pointer} /*Menu items*/ #menu_home {left:0} #menu_about {left:164px} #menu_products {left:328px} #menu_study {left:492px} #menu_contact {left:656px} #menu_home a, #menu_about a, #menu_products a, #menu_study a, #menu_contact a {display:block;text-indent:-999em;background:url(../resources/nav.gif);cursor:pointer} #menu_home a {background-position:0 0} #menu_about a {background-position:-164px 0} #menu_products a {background-position:-328px 0} #menu_study a {background-position:-492px 0} #menu_contact a {background-position:-656px 0} /*Menu pages*/ body#cl-home #menu_home a, body#cl-home #menu_home a:hover, body#cl-home #main_menu ul li:hover a#home, body#cl-home #main_menu ul li.over a#home {background-position:0 -84px} body#cl-about #menu_about a, body#cl-about #menu_about a:hover, body#cl-about #main_menu ul li:hover a#about, body#cl-about #main_menu ul li.over a#about {background-position:-164px -84px} body#cl-products #menu_products a, body#cl-products #menu_products a:hover, body#cl-products #main_menu ul li:hover a#products, body#cl-products #main_menu ul li.over a#products, body#cl-prod01 #menu_products a, body#cl-prod01 #menu_products a:hover, body#cl-prod01 #main_menu ul li:hover a#products, body#cl-prod01 #main_menu ul li.over a#products, body#cl-prod02 #menu_products a, body#cl-prod02 #menu_products a:hover, body#cl-prod02 #main_menu ul li:hover a#products, body#cl-prod02 #main_menu ul li.over a#products, body#cl-prod03 #menu_products a, body#cl-prod03 #menu_products a:hover, body#cl-prod03 #main_menu ul li:hover a#products, body#cl-prod03 #main_menu ul li.over a#products, body#cl-prod04 #menu_products a, body#cl-prod04 #menu_products a:hover, body#cl-prod04 #main_menu ul li:hover a#products, body#cl-prod04 #main_menu ul li.over a#products, body#cl-prod05 #menu_products a, body#cl-prod05 #menu_products a:hover, body#cl-prod05 #main_menu ul li:hover a#products, body#cl-prod05 #main_menu ul li.over a#products, body#cl-prod06 #menu_products a, body#cl-prod06 #menu_products a:hover, body#cl-prod06 #main_menu ul li:hover a#products, body#cl-prod06 #main_menu ul li.over a#products {background-position:-328px -84px} body.cases #menu_study a, body.cases #menu_study a:hover, body.cases #main_menu ul li:hover a#study, body.cases #main_menu ul li.over a#study {background-position:-492px -84px} body#cl-contactpage #menu_contact a, body#cl-contact #menu_contact a:hover, body#cl-contactpage #main_menu ul li:hover a#contact, body#cl-contactpage #main_menu ul li.over a#contact {background-position:-656px -84px} #menu_home a:hover, #main_menu ul li:hover a#home, #main_menu ul li.over a#home {background-position:0 -42px} #menu_about a:hover, #main_menu ul li:hover a#about, #main_menu ul li.over a#about {background-position:-164px -42px} #menu_products a:hover, #main_menu ul li:hover a#products, #main_menu ul li.over a#products {background-position:-328px -42px} #menu_study a:hover, #main_menu ul li:hover a#study, #main_menu ul li.over a#study {background-position:-492px -42px} #menu_contact a:hover, #main_menu ul li:hover a#contact, #main_menu ul li.over a#contact {background-position:-656px -42px} /*Menu 2nd level*/ #main_menu ul li ul {display:none} #main_menu ul li:hover ul {width:164px;height:auto;display:block;position:absolute} #main_menu ul li ul li {display:block;width:164px;height:auto;position:relative;background:url(../resources/subnav.png);text-indent:0;border-top:1px solid #6CA6C7} #main_menu ul li ul li a {display:block;width:154px;height:auto;text-indent:0;padding:9px 5px;background:none;cursor:pointer} #main_menu ul li ul li a:hover {width:154px;height:auto;background:url(../resources/subnav-hover.png)} /*2nd level pages - site map menus*/ body#cl-map #main_menu ul li ul#submenu_products, body#cl-map #main_menu ul li ul#submenu_study, body#cl-map #main_menu ul li ul#submenu_contact {width:164px;height:auto;display:block;position:absolute} /* __highslide Highslide styling * ------------------------------------------------------- */ #middle-gallery, .mg-left, .mg-right {display:block;float:left;width:820px;height:240px} .mg-left {width:492px} .mg-right {width:328px} #middle-gallery a, #middle-gallery a img {float:left;border:none;overflow:hidden} #middle-gallery a:hover {border:2px solid #FF9900} #middle-gallery a:hover img {margin:-2px} a.highslide-active-anchor img {visibility:hidden} #middle-gallery a.highslide-active-anchor {border:2px solid #FF9900} #middle-gallery a.highslide-active-anchor img {margin:-2px;visibility: visible;cursor:default} .highslide-wrapper-2 {background:#448CB1} .highslide-image {border:none} .highslide-caption, .highslide-heading {display:none} .highslide-dimming {position:absolute;background:#1E638D} a.highslide-full-expand {background:url(../scripts/highslide/graphics/fullexpand.gif) no-repeat;display:block;margin:0 10px 10px 0;width:34px;height:34px} .highslide-loading {display:block;padding:0 4px 0 36px;height:32px;line-height:32px;font-size:10px;background:url(http://www.clear-living.co.uk/scripts/highslide/graphics/loader.gif) no-repeat 4px 4px} .highslide-move, .highslide-move * {cursor:move} .highslide-viewport {display:none;visibility:hidden;position:fixed;width:100%;height:100%;z-index:1;background:none;left:0;top:0} .highslide-overlay, .hidden-container {display:none} .controls-in-heading .highslide-heading {width:100%;height:42px;line-height:42px;color:#FFF;text-align:left;text-indent:16px;overflow:hidden;background:#448CB1;cursor:default} .controls-in-heading .highslide-heading a {padding-left:10px;font-size:12px;background:none} .controls-in-heading .highslide-heading a:hover {color:#FF9900} .controls-in-heading .highslide-controls {margin-top:-42px;width:328px;height:42px;background:#6CA6C7} .controls-in-heading .highslide-controls ul {position:relative;width:328px;height:42px;list-style:none} .controls-in-heading .highslide-controls li {float:left;height:42px} .controls-in-heading .highslide-controls a {display:block;float:left;width:66px;height:42px;background-image:url(../resources/nav.gif);outline:none} .controls-in-heading .highslide-controls a.disabled, .controls-in-heading .highslide-controls a.disabled span {cursor:default} .controls-in-heading .highslide-controls a span {display:none;cursor:pointer} .controls-in-heading .highslide-controls .highslide-move {display:none} .controls-in-heading .highslide-controls .highslide-previous a {background-position:0 -126px} .controls-in-heading .highslide-controls .highslide-previous a:hover {background-position:0 -168px} .controls-in-heading .highslide-controls .highslide-previous a.disabled {background-position:0 -210px!important} .controls-in-heading .highslide-controls .highslide-play a {background-position:-66px -126px} .controls-in-heading .highslide-controls .highslide-play a:hover {background-position:-66px -168px} .controls-in-heading .highslide-controls .highslide-play a.disabled {background-position:-66px -210px!important} .controls-in-heading .highslide-controls .highslide-pause a {background-position:-132px -126px} .controls-in-heading .highslide-controls .highslide-pause a:hover {background-position:-132px -168px} .controls-in-heading .highslide-controls .highslide-next a {background-position:-198px -126px} .controls-in-heading .highslide-controls .highslide-next a:hover {background-position:-198px -168px} .controls-in-heading .highslide-controls .highslide-next a.disabled {background-position:-198px -210px!important} .controls-in-heading .highslide-controls .highslide-full-expand a {background-position:-264px -126px} .controls-in-heading .highslide-controls .highslide-full-expand a:hover {background-position:-264px -168px} .controls-in-heading .highslide-controls .highslide-full-expand a.disabled {background-position:-264px -210px!important} .controls-in-heading .highslide-controls .highslide-close a {width:64px!important;background-position:-330px -126px} .controls-in-heading .highslide-controls .highslide-close a:hover {background-position:-330px -168px} /* __forms Forms * ------------------------------------------------------- */ #form {display:block;float:left;width:820px;height:240px;text-align:left} #form-left, #form-right {display:block;float:left} #form-left {width:492px;height:240px} #form-left h1, #form-right h1 {display:block;margin:0;width:164px;height:42px;text-indent:-999em;background:url(../resources/bg-form-sprite.gif) no-repeat} #form-left h1 {background-position:0 0} #form-right {padding:26px;width:276px;height:188px;color:#1E638D;background:#6CA6C7} #form-right h1 {background-position:0 -42px;margin:0 0 26px 138px} #form-right p {font-size:14px;line-height:20px} #form-right p.fr-tel {display:block;margin-bottom:20px;width:276px;height:62px;background:url(../resources/bg-form-sprite.gif) no-repeat 0 -164px;text-indent:-999em} #form-right span.fr-company {font-size:18px} #form-right p.fr-links {margin-top:8px;font-size:12px} #form-right p.fr-links a {margin-right:2px;padding:2px 4px} #form-div {position:relative;display:block;float:left;width:492px;height:240px;font-size:11px;text-transform:uppercase;background:url(../resources/bg-form.png) no-repeat 0 0} /* ----- success and error message/results box ----- */ #results {display:block;position:absolute;top:240px;left:0;width:820px!important;height:42px!important;color:#FFF;font-size:11px;text-align:left} #results a {color:#FFF;background:none} #results a:hover {text-decoration:underline} #results p {padding:10px;width:800px!important;height:22px!important;line-height:22px;text-align:left!important} #results p.error {background:#7D3A49} #results p.success {background:#7AC18B} #form-div fieldset.main-set {position:absolute;width:492px;height:240px!important;overflow:hidden} #form-div fieldset#form-first, #form-div fieldset#form-second {position:absolute;margin:0;padding:0!important;top:0;left:0;width:328px;height:160px;overflow:hidden} #form-div fieldset#form-second {top:160px;height:80px} #form-div fieldset#form-message {position:absolute;top:0;right:0;width:164px;height:200px} .explain {float:left;width:100px!important;height:40px;text-align:center;font-size:10px;line-height:40px} label#cc-opt-error {display:block;position:absolute;bottom:0;left:0;width:328px;height:40px;line-height:40px;font-size:11px;cursor:pointer} .explain:hover, label#cc-opt-error:hover {color:#FF9900} legend.req-legend, legend.opt-legend {display:none} .main-label {display:none} .req-label, .opt-label {float:left;width:118px;height:40px;line-height:40px;text-indent:12px} label.req-label#name-error, label.req-label#email-error, label.opt-label#phone-error, label.req-label#subject-error, label.req-label#message-error, label.opt-label#message-error, label.req-label#antispam-error {float:left;clear:left;width:110px!important;overflow:hidden} input.text-med, select.select, textarea.textarea, label.req-label, label.opt-label {font-size:11px;line-height:40px} input.text-med, textarea.textarea {background:none} select.select {background:#468BB5} input.text-med, select.select, textarea.textarea, input.text-med:focus, input.text-med.focus, select.select:focus, input.select.focus, textarea.textarea:focus, textarea.textarea.focus {color:#FFF;font-size:12px;border:none;outline:none;outline-style:none} input.text-med, select.select, textarea.textarea, label.req-label.explain {float:left} input.checkbox {margin-right:2px;cursor:pointer} input.text-med, textarea.textarea {padding:0 2px} input.text-med {width:210px;height:40px;line-height:40px} input.text-med#antispam {width:110px} select.select {margin-top:12px;padding:0;width:218px;height:20px;color:#FFF} textarea.textarea {height:160px;width:148px;padding-left:12px;line-height:16px!important} select.select, select.select option {cursor:pointer} input.button {position:absolute;bottom:0;right:0;width:164px;height:40px;line-height:40px;color:#1E638D;font-size:1px;text-indent:-999em;border:none;background:url(../resources/bg-form-sprite.gif) no-repeat 0 -84px;cursor:pointer;outline-style:none;outline:none} input.button:hover, input.button.hover, input.button:focus, input.button.focus {background-position:0 -124px;color:#FF9900}