/* ---------------------------------------------------------- *

	* Filename:				style.css
	* Description:			Global CSS
	* Version:				1.2 (07-2009) MM-YYYY
	* Website:				http://www.absolutesignage.co.uk
	* Author:				Jonny Wood
	* Company:				J.Wood Creative
	
	==STRUCTURE===============================================
	
	* Page width			762px
	* No. of columns		3
	* Additional info		Highslide image portfolio
	
	$ __global				Global Parameters
	$ __layout				Page Layout
	$ __rhs					Right of page
	$ __lhs					Left of page
	$ __footer				Footer
	$ __nav					Navigation
	$ __sub-nav				Sub nav - Signs
	$ __sub-nav				Sub nav - Services
	$ __sub-nav				Sub nav - Case Studies
	$ __forms				Forms
	$ __highslide			Highslide image portfolio

 * ------------------------------------------------------- */
 
 
/* __global					Global Parameters
 * ------------------------------------------------------- */
body {font:12px helvetica, arial, sans-serif;line-height:18px;color:#002545;margin:0;padding:0 0 10px 0;text-align:center}
* {margin:0;padding:0;list-style:none}
p {clear:both;margin:8px 0 0 0}
a {color:#002545;text-decoration:none;border-bottom:1px #002545 dotted}
.highslide-caption a {color:#3399FF}
a:hover {color:#3399FF;border-bottom:1px #3399FF solid}
img, img a, img a:hover {border:none}
.small {font-size:10px;line-height:14px}
.tel {padding-bottom:2px;margin:12px 0;font-size:36px;font-weight:bolder;color:#3399FF}
.clearfloat {clear:both;height:0;font-size:1px;line-height:0}

/* __layout					Site Layout
 * ------------------------------------------------------- */
#container {width:762px;margin:0 auto;text-align:left}
#header, #top, #middle, #base, #footer {display:block;float:left;padding:0 12px;width:738px} 
#header {height:200px;background:url(../images/bg-header.jpg) no-repeat center}
#top {height:50px;background:url(../images/bg-top.gif) no-repeat top}
#top h1, #top h2 {display:block;float:left;margin-left:9px;height:50px;line-height:50px;text-indent:-999em;background:url(../images/logo-tag.gif) no-repeat}
#top h1 {width:160px;background-position:0 0}
#top h2 {width:550px;background-position:-160px 0}
#middle {display:block;padding:0 11px;margin-bottom:10px;width:740px}

/* __rhs						Right of page
 * ------------------------------------------------------- */ 
#rhs {float:right;margin:4px 0;padding:0 0 10px 10px;width:430px}
#rhs h2 {padding-right:2px;margin-top:8px;font-size:18px;font-weight:bold;color:#3399FF}
#rhs h3 {margin-top:6px;font-size:14px;font-weight:bold}
.titles, .middle-block, .middle-text, .call-to {display:block;float:left;width:430px}

.middle-block, .call-to {margin-top:10px}
.call-to {background:url(../images/bg-form.gif) no-repeat 1px 8px}
#call-tel {padding:0 0 10px 40px;border-left:1px solid #7F92A2}
#call-tel h4 {padding-bottom:0;margin-top:8px;font-size:30px;line-height:26px;font-weight:bold;color:#3399FF}
#call-tel h5 {border-left:2px #FFF solid;font-size:11px;font-weight:bold}

.page-image {float:left;padding:4px;margin:5px 5px 0 0;width:200px;height:142px;background:url(../images/bg-image.gif) no-repeat}
.page-image a, .page-image a:hover {border:none;background-color:#FFF;background-image:none}

ul.nav-images li {display:block;float:left;padding:4px;margin:5px 5px 0 0;width:200px;height:142px;background:url(../images/bg-image.gif) no-repeat}
ul.nav-images li a {display:block;width:202px;height:144px;text-indent:-999em;outline:none;outline-style:none;border:none;cursor:pointer}

/* ------ all nav images ------ */
li#hn-1 a, li#hn-2 a, li#hn-3 a, li#hn-4 a, li#hn-5 a, li#hn-6 a,
li#hn-7 a, li#hn-8 a, li#hn-9 a, li#hn-10 a, li#hn-11 a, li#hn-12 a {background:url(../images/nav-images.jpg) no-repeat}
li#hn-1 a {background-position:0 0}
li#hn-1 a:hover {background-position:-202px 0}
li#hn-2 a {background-position:0 -144px}
li#hn-2 a:hover {background-position:-202px -144px}
li#hn-3 a {background-position:0 -288px}
li#hn-3 a:hover {background-position:-202px -288px}
li#hn-4 a {background-position:0 -432px}
li#hn-4 a:hover {background-position:-202px -432px}
li#hn-5 a {background-position:0 -576px}
li#hn-5 a:hover {background-position:-202px -576px}
li#hn-6 a {background-position:0 -720px}
li#hn-6 a:hover {background-position:-202px -720px}
li#hn-7 a {background-position:0 -864px}
li#hn-7 a:hover {background-position:-202px -864px}
li#hn-8 a {background-position:0 -1008px}
li#hn-8 a:hover {background-position:-202px -1008px}
li#hn-9 a {background-position:0 -1152px}
li#hn-9 a:hover {background-position:-202px -1152px}
li#hn-10 a {background-position:0 -1296px}
li#hn-10 a:hover {background-position:-202px -1296px}
li#hn-11 a {background-position:0 -1440px}
li#hn-11 a:hover {background-position:-202px -1440px}
li#hn-12 a {background-position:0 -1584px}
li#hn-12 a:hover {background-position:-202px -1584px}
/* ------ case study images ------ */
li#case01 a {background:url(../images/cases-Ashton.jpg) no-repeat 0 0;border-bottom:none}
li#case02 a {background:url(../images/cases-Jem.jpg) no-repeat 0 0;border-bottom:none}
li#case03 a {background:url(../images/cases-LondonRd.jpg) no-repeat 0 0;border-bottom:none}
li#case04 a {background:url(../images/cases-Olive.jpg) no-repeat 0 0;border-bottom:none}
/* ------ service images ------ */
li#survey a {background: url(../images/services-survey.jpg) no-repeat 0 0;border-bottom:none}
li#absdesign a {background: url(../images/services-design.jpg) no-repeat 0 0;border-bottom:none}
li#manufacture a {background:url(../images/services-manufacture.jpg) no-repeat 0 0;border-bottom:none}
li#install a {background: url(../images/services-install.jpg) no-repeat 0 0;border-bottom:none}
/* ------ rollover images ------ */
li#case01 a:hover, li#case02 a:hover, li#case03 a:hover, li#case04 a:hover,
li#install a:hover, li#manufacture a:hover, li#absdesign a:hover, li#survey a:hover {background-position:-202px 0}

/* __lhs						Left of page
 * ------------------------------------------------------- */ 
#lhs {position:relative;display:block;float:left;margin-bottom:10px;width:290px}

#boxesLeft {float:left;clear:none;width:170px}
#boxesLeft ul li {display:block;float:left;padding:5px 5px 7px 5px;width:160px;height:128px;background:url(../images/bg-small.gif) no-repeat center}
#boxesLeft ul li a {display:block;width:160px;height:128px;text-indent:-999em;outline:none;outline-style:none;border:none;cursor:pointer}

#base ul {display:block;width:738px;height:140px}
#base li {position:relative;display:block;float:left;margin-right:19px;padding:5px 5px 7px 5px;width:160px;height:128px;background:url(../images/bg-small.gif) no-repeat center}
#base li#boxRight {margin-right:1px}
#base li a {display:block;position:absolute;width:160px;height:128px;text-indent:-999em;border-bottom:none;outline:none;outline-style:none;border:none;cursor:pointer}

a#baseLeft1 {background:url(../images/baseBox-l1.jpg) no-repeat 0 0}
a#baseLeft2 {background:url(../images/baseBox-l2.jpg) no-repeat 0 0}
a#baseRight1 {background:url(../images/baseBox-r1.jpg) no-repeat 0 0}
a#baseRight2 {background:url(../images/baseBox-r2.jpg) no-repeat 0 0}
a#baseLeft1:hover, a#baseLeft2:hover, a#baseRight2:hover, a#baseRight1:hover {background-position:-160px 0}

/* __footer					Footer
 * ------------------------------------------------------- */ 
#footer {clear:both;padding:0 11px;margin-top:20px;font-size:11px}
#footer ul {display:block;width:738px}
#footer li {display:block;float:left;width:auto;padding-right:10px}
#footer li a {color:#002545;border:none}
#footer li a:hover {color:#3399FF}
#footer li#design {float:right;padding:0}
#footer li#design a {display:block;width:14px;height:12px;text-indent:-999em;background:url(../images/jwood.gif) no-repeat 0 0;outline:none;outline-style:none;border:none}

/* __nav						Navigation
 * ------------------------------------------------------- */ 
.nav-main {float:left;margin:0 10px 10px 10px;width:160px;height:294px;background:url(../images/bg-nav.gif) repeat-y}
ul#nav {position:relative;width:160px;height:200px}
ul#nav li a {display:block;position:absolute;width:160px;height:40px;text-indent:-999em;outline:none;outline-style:none;border:none}
li#navHome a, li#navSigns a, li#navServices a, li#navStudies a, li#navContact a, li#navTel a {background: url(../images/nav-main.gif)}

li#navHome a {background-position:0 0;top:0}
li#navHome a:hover {background-position:-160px 0}
body#pageHome li#navHome a {background-position:-320px 0}

li#navSigns a {background-position:0 -40px;top:40px}
li#navSigns a:hover {background-position:-160px -40px}
body#pageSigns li#navSigns a {background-position:-320px -40px}

li#navServices a {background-position:0 -80px;top:80px}
li#navServices a:hover {background-position:-160px -80px}
body#pageServices li#navServices a {background-position:-320px -80px}

li#navStudies a {background-position:0 -120px;top:120px}
li#navStudies a:hover {background-position:-160px -120px}
body#pageStudies li#navStudies a {background-position:-320px -120px}

li#navContact a {background-position:0 -160px;top:160px}
li#navContact a:hover {background-position:-160px -160px}
body#pageContact li#navContact a {background-position:-320px -160px}

li#navTel a {background-position:0 -200px;top:254px}

.nav-sub {float:left;margin-top:11px;width:110px;height:288px}

/* __sub-nav				Sub nav - Signs
 * ------------------------------------------------------- */ 
#nav2, #nav3, #nav4 {position:relative;width:110px}
#nav2 {height:288px}
	
ul#nav2 li a, ul#nav3 li a, ul#nav4 li a {display:block;position:absolute;width:110px;height:24px;text-indent:-999em;outline:none;outline-style:none;border:none}
li#nav2Shop a,
li#nav2Steel a,
li#nav2Bespoke a,
li#nav2Neon a,
li#nav2LED a,
li#nav2Lightbox a,
li#nav2Windows a,
li#nav2Vehicle a,
li#nav2Aboards a,
li#nav2Awnings a,
li#nav2Banners a,
li#nav2Enviro a {background: url(../images/nav-sub_signs.gif)}

li#nav2Shop a {background-position:0 0;top:0}
li#nav2Shop a:hover {background-position:-110px 0}
body#pageShop li#navSigns a {background-position:-320px -40px}
body#pageShop li#nav2Shop a {background-position:-220px 0}

li#nav2Steel a {background-position:0 -24px;top:24px}
li#nav2Steel a:hover {background-position:-110px -24px}
body#pageSteel li#navSigns a {background-position:-320px -40px}
body#pageSteel li#nav2Steel a {background-position:-220px -24px}

li#nav2Bespoke a {background-position:0 -48px;top:48px}
li#nav2Bespoke a:hover {background-position:-110px -48px}
body#pageBespoke li#navSigns a {background-position:-320px -40px}
body#pageBespoke li#nav2Bespoke a {background-position:-220px -48px}

li#nav2Neon a {background-position:0 -72px;top:72px}
li#nav2Neon a:hover {background-position:-110px -72px}
body#pageNeon li#navSigns a {background-position:-320px -40px}
body#pageNeon li#nav2Neon a {background-position:-220px -72px}

li#nav2LED a {background-position:0 -96px;top:96px}
li#nav2LED a:hover {background-position:-110px -96px}
body#pageLED li#navSigns a {background-position:-320px -40px}
body#pageLED li#nav2LED a {background-position:-220px -96px}

li#nav2Lightbox a {background-position:0 -120px;top:120px}
li#nav2Lightbox a:hover {background-position:-110px -120px}
body#pageLightbox li#navSigns a {background-position:-320px -40px}
body#pageLightbox li#nav2Lightbox a {background-position:-220px -120px}

li#nav2Windows a {background-position:0 -144px;top:144px}
li#nav2Windows a:hover {background-position:-110px -144px}
body#pageWindows li#navSigns a {background-position:-320px -40px}
body#pageWindows li#nav2Windows a {background-position:-220px -144px}

li#nav2Vehicle a {background-position:0 -168px;top:168px}
li#nav2Vehicle a:hover {background-position:-110px -168px}
body#pageVehicle li#navSigns a {background-position:-320px -40px}
body#pageVehicle li#nav2Vehicle a {background-position:-220px -168px}

li#nav2Aboards a {background-position:0 -192px;top:192px}
li#nav2Aboards a:hover {background-position:-110px -192px}
body#pageAboards li#navSigns a {background-position:-320px -40px}
body#pageAboards li#nav2Aboards a {background-position:-220px -192px}

li#nav2Awnings a {background-position:0 -216px;top:216px}
li#nav2Awnings a:hover {background-position:-110px -216px}
body#pageAwnings li#navSigns a {background-position:-320px -40px}
body#pageAwnings li#nav2Awnings a {background-position:-220px -216px}

li#nav2Banners a {background-position:0 -240px;top:240px}
li#nav2Banners a:hover {background-position:-110px -240px}
body#pageBanners li#navSigns a {background-position:-320px -40px}
body#pageBanners li#nav2Banners a {background-position:-220px -240px}

li#nav2Enviro a {background-position:0 -264px;top:264px}
li#nav2Enviro a:hover {background-position:-110px -264px}
body#pageEnviro li#navSigns a {background-position:-320px -40px}
body#pageEnviro li#nav2Enviro a {background-position:-220px -264px}

/* __sub-nav				Sub nav - Services
 * ------------------------------------------------------- */ 
#nav3 {margin-top:80px;height:96px}
li#nav3Survey a, li#nav3Design a, li#nav3Manufacture a, li#nav3Installation a {background: url(../images/nav-sub_services.gif)}

li#nav3Survey a {background-position:0 0;top:0}
li#nav3Survey a:hover {background-position:-110px 0}
body#pageSurvey li#navServices a {background-position:-320px -80px}
body#pageSurvey li#nav3Survey a {background-position:-220px 0}

li#nav3Design a {background-position:0 -24px;top: 24px}
li#nav3Design a:hover {background-position:-110px -24px}
body#pageDesign li#navServices a {background-position:-320px -80px}
body#pageDesign li#nav3Design a {background-position:-220px -24px}

li#nav3Manufacture a {background-position:0 -48px;top:48px}
li#nav3Manufacture a:hover {background-position:-110px -48px}
body#pageManufacture li#navServices a {background-position:-320px -80px}
body#pageManufacture li#nav3Manufacture a {background-position:-220px -48px}

li#nav3Installation a {background-position:0 -72px;top:72px}
li#nav3Installation a:hover {background-position:-110px -72px}
body#pageInstallation li#navServices a {background-position:-320px -80px}
body#pageInstallation li#nav3Installation a {background-position:-220px -72px}

/* __sub-nav				Sub nav - Case Studies
 * ------------------------------------------------------- */ 
#nav4 {margin-top:120px;height:96px}
li#nav4Study1 a, li#nav4Study2 a, li#nav4Study3 a, li#nav4Study4 a {background: url(../images/nav-sub_cases.gif)}

li#nav4Study1 a {background-position:0 0;top:0}
li#nav4Study1 a:hover {background-position:-110px 0}
body#pageStudy1 li#navStudies a {background-position:-320px -120px}
body#pageStudy1 li#nav4Study1 a {background-position:-220px 0}

li#nav4Study2 a {background-position:0 -24px;top:24px}
li#nav4Study2 a:hover {background-position:-110px -24px}
body#pageStudy2 li#navStudies a {background-position:-320px -120px}
body#pageStudy2 li#nav4Study2 a {background-position:-220px -24px}

li#nav4Study3 a {background-position:0 -48px;top:48px}
li#nav4Study3 a:hover {background-position:-110px -48px}
body#pageStudy3 li#navStudies a {background-position:-320px -120px}
body#pageStudy3 li#nav4Study3 a {background-position:-220px -48px}

li#nav4Study4 a {background-position:0 -72px;top:72px}
li#nav4Study4 a:hover {background-position:-110px -72px}
body#pageStudy4 li#navStudies a {background-position:-320px -120px}
body#pageStudy4 li#nav4Study4 a {background-position:-220px -72px}

/* __forms				Forms
 * ------------------------------------------------------- */ 
#form-div {position:relative;display:block;float:left;padding:16px 0 0 20px;width:390px;border:1px solid #7F92A2;border-right:none;font:11px helvetica, arial, sans-serif}

#form-div fieldset {width:390px;padding:0}
#form-div fieldset.mainset {border:none}
.main-legend {display:none}

label {float:left;clear:left;padding:1px 0;width:110px;overflow:hidden}
.main-label {display:block;margin-bottom:10px;font-weight:bold;width:390px!important}
.main-label span#req-main {padding-left:20px;font-size:11px;font-weight:normal!important}
.req-label, .opt-label {float:left;margin-top:2px;width:110px}
.req {color:#CC0000;font-weight:bold}

input.text, select.select, textarea.textarea {float:left;margin:4px 0;font:11px helvetica, arial, sans-serif}
input.text, select.select, textarea.textarea {border:1px solid #7F92A2;padding:1px}
select.select {padding:1px 0}

input.text:focus, input.text.focus, select.select:focus, input.select.focus,
textarea.textarea:focus, textarea.textarea.focus {border:1px solid #022646;outline:none;outline-style:none}

input.text, textarea.textarea {width:276px}
textarea.textarea {height:60px}
select.select {width:280px;cursor:pointer}

input.button {float:left;margin-top:26px;width:145px;height:33px;line-height:33px;color:#FFF;font-size:12px;font-weight:bold;border:none;background:#022646 url(../images/bg-form.jpg) repeat-x top;cursor:pointer;outline-style:none;outline:none}
input.button:hover, input.button.hover, input.button:focus, input.button.focus {background:#3399FF}

.validation-advice, .custom-advice {display:block;float:left;margin:-4px 0 4px 110px;padding:2px;width:276px;color:#FFF;font-weight:bold;background:#CC0000}
.custom-advice {background: #C8AA00}

.form-row {clear:both}

#capcha {display:block;float:left;margin:0 0 16px 0;padding:0;width:245px}
#capcha p {display:block;margin-top:6px;width:245px;height:16px;line-height:16px}
#capcha div.img {display:block;float:left;width:33px;height:33px;margin:4px 16px 0 0}


/* __highslide					Highslide image portfolio
 * ------------------------------------------------------- */
.highslide {cursor:url(../images/imageZoom/zoomin.cur), pointer;outline:none}
.highslide img {border:1px solid #FFF}
.highslide:hover img {border:1px solid #3399FF}
.highslide-image {border:1px solid #051827}
.highslide-caption {display:none;border-top:none;padding:5px;text-align:left;background:#002545 url(../images/imageZoom/caption-bg.jpg) repeat-x top;font-size:11px;line-height:14px;color:#FFF}
.highslide-loading {display:block;width:19px;height:19px;border:1px solid #3399FF;text-decoration:none;padding:5px;background:#FFF url(../images/imageZoom/loader.white.gif)  no-repeat 6px 6px}
.highslide-move {cursor:move}
.highslide-overlay {display:none}

.controlbar {margin:10px;width:73px;height:19px;background:url(../images/imageZoom/controlbar.gif)}
.controlbar a {display:block;float:left;height:19px;border:none}
.controlbar a:hover {background-image:url(../images/imageZoom/controlbar-hover.gif);border:none}
.controlbar .previous {width:18px}
.controlbar .next {width:18px;background-position:-18px 0}
.controlbar .highslide-move {width:18px;background-position:-36px 0}
.controlbar .close {width:19px;background-position:-54px 0}

/* These MUST be last - Necessary for functionality */
.highslide-display-block {display:block}
.highslide-display-none {display:none}