/* ELEMENT STYLES ------------------------------------------------------------------------------------------------------*/
body { margin: 5px 0; text-align: center; min-width: 1000px; background: url(images/bg-fade.jpg) repeat-x top center #AEB0D7; font-family: Arial, Helvetica, sans-serif; font-size: 11px; color: #000; }
h1, h2, h3 { font-family: Georgia, Times, serif; text-transform: uppercase; font-weight: normal; font-style: italic; margin: 0; }
h1 { font-size: 1.36em; color: #F57F20; }
h1 a { color: #F57F20; text-decoration: none; }
h1 a:hover { text-decoration: underline; }
h2 { font-size: 1.18em; }
h3 { font-size: 1.18em; width: 100%; text-align: left; }
h3 strong { font-weight: bold; }
h4 { color: #F57F20; font-size: 3.27em; text-transform: uppercase; margin: 0px 20px 0px 0px; font-weight: normal; text-align: right; }
h4 a { color: #F57F20; text-decoration: none; }
h4 a:hover { color: #191919; }
h5 { color: #191919; font-size: 1.7em; margin: 15px 20px -10px 0px; font-weight: normal; text-align: right; }
h5 a { color: #F57F20; text-decoration: none; }
h5 a:hover { color: #191919; }
a { color: #000; text-decoration: underline; }
a:hover { text-decoration: none; }
/*a:hover img { opacity: 0.5; filter: alpha(opacity=50); } -- THIS DOESN"T WORK GLOBALLY AS IT CLASHES WITH THE SLIDESHOW MASK*/
img { border: 0px; }
* { behavior: url(scripts/iepngfix.htc); }
hr { background: url(images/hr-grey.gif) repeat-x; border: 0; height: 1px; }

/* PAGE STYLES ------------------------------------------------------------------------------------------------------*/
#outer { margin: auto; width: 1000px; height: 100%; text-align: left; position: relative; }

/* HEADER STYLES ------------------------------------------------------------------------------------------------------*/
#header { width: 1000px; height: 140px; background: url(images/header-bg.png) center top no-repeat; position: relative; float: left; }
#logo { position: relative; float: left; left: -25px; top: -80px; z-index: 9999 !important; }

/* MENU STYLES ------------------------------------------------------------------------------------------------------*/
#menucontainer { height: 30px; width: 790px; position: relative; float: left; z-index: 9995; overflow: hidden; background: #F57F20 url(images/menu.jpg); margin: 0 5px 0 205px; top: 90px; }
#menucontainer #menu  { margin: 0px; padding: 0px; }
#menucontainer .menu ul { margin: 0; padding: 0; list-style: none; background: url(images/sub-menu-bg.gif) repeat-x top #FF7F00; font-size: 1.1em; font-weight: normal; }
#menucontainer #menu li { display: inline; font-size: 0px; }
#menucontainer #menu li a { float: left; height: 30px; padding-top: 30px; background: url(images/menu.jpg) no-repeat; }
#menucontainer #menu li#nav_home a { width: 68px; background-position: 0px 0px; }
#menucontainer #menu li#nav_scre a { width: 156px; background-position: -68px 0px; }
#menucontainer #menu li#nav_embr a { width: 121px; background-position: -224px 0px; }
#menucontainer #menu li#nav_pric a { width: 82px; background-position: -345px 0px; }
#menucontainer #menu li#nav_gall a { width: 89px; background-position: -427px 0px; }
#menucontainer #menu li#nav_down a { width: 117px; background-position: -516px 0px; }
#menucontainer #menu li#nav_cont a { width: 90px; background-position: -633px 0px; }

#menucontainer #menu li#nav_home a:hover { background-position: 0px -30px; }
#menucontainer #menu li#nav_scre a:hover { background-position: -68px -30px; }
#menucontainer #menu li#nav_embr a:hover { background-position: -224px -30px; }
#menucontainer #menu li#nav_pric a:hover { background-position: -345px -30px; }
#menucontainer #menu li#nav_gall a:hover { background-position: -427px -30px; }
#menucontainer #menu li#nav_down a:hover { background-position: -516px -30px; }
#menucontainer #menu li#nav_cont a:hover { background-position: -633px -30px; }

#menucontainer #menu li#nav_home a:active { background-position: 0px -60px; }
#menucontainer #menu li#nav_scre a:active { background-position: -68px -60px; }
#menucontainer #menu li#nav_embr a:active { background-position: -224px -60px; }
#menucontainer #menu li#nav_pric a:active { background-position: -345px -60px; }
#menucontainer #menu li#nav_gall a:active { background-position: -427px -60px; }
#menucontainer #menu li#nav_down a:active { background-position: -516px -60px; }
#menucontainer #menu li#nav_cont a:active { background-position: -633px -60px; }

#menucontainer.home #menu li#nav_home a { background-position: 0px -60px !important; cursor: default; }
#menucontainer.scre #menu li#nav_scre a { background-position: -68px -60px !important; cursor: default; }
#menucontainer.embr #menu li#nav_embr a { background-position: -224px -60px !important; cursor: default; }
#menucontainer.pric #menu li#nav_pric a { background-position: -345px -60px !important; cursor: default; }
#menucontainer.gall #menu li#nav_gall a { background-position: -427px -60px !important; cursor: default; }
#menucontainer.down #menu li#nav_down a { background-position: -516px -60px !important; cursor: default; }
#menucontainer.cont #menu li#nav_cont a { background-position: -633px -60px !important; cursor: default; }

/* STEP STYLES ------------------------------------------------------------------------------------------------------*/
#stepcontainer { height: 50px; width: 550px; position: relative; float: left; z-index: 9995; overflow: hidden; margin: 0 0 -5px 0; top: -5px; }
#stepcontainer #steps  { margin: 0; padding: 0; }
#stepcontainer #steps li { list-style: none; font-size: 0; float: left; height: 50px; padding-top: 50px; background: url(images/steps-top.jpg) no-repeat; display: inline; }
#stepcontainer #steps li#step_one { width: 190px; background-position: 0 0; }
#stepcontainer #steps li#step_two { width: 180px; background-position: -190px 0; }
#stepcontainer #steps li#step_thr { width: 180px; background-position: -370px 0; }

#stepcontainer.one #steps li#step_one { background-position: 0 -50px !important; cursor: default; }
#stepcontainer.two #steps li#step_two { background-position: -190px -50px !important; cursor: default; }
#stepcontainer.thr #steps li#step_thr { background-position: -370px -50px !important; cursor: default; }

/* CATALOGUE NAV STYLES ------------------------------------------------------------------------------------------------------*/
.arrowlistmenu { width: 140px; margin-bottom: 1em; }
.arrowlistmenu a { text-decoration: none; }
.arrowlistmenu h3 { font-size: 1em; color: white; background: #444; margin: 1px 0; padding: 5px; cursor: pointer; }
.arrowlistmenu h3:hover { background: #7A3F10; }
.arrowlistmenu h3.open { background: #F57F20; }

.arrowlistmenu ul { list-style: none; margin: 0; padding: 0; width: 150px; }
.arrowlistmenu ul li { padding: 0; margin: 0; position: relative; }
.arrowlistmenu ul li.selected { background: #FFF; }
.arrowlistmenu ul li a { color: #000; display: block; padding: 3px 5px; text-decoration: none; }
.arrowlistmenu ul li a:hover { color: #000; background-color: #FFF; }

#search { margin-bottom: 1em; }

/* CONTENT STYLES ------------------------------------------------------------------------------------------------------*/
#content { width: 970px; min-height: 300px; background: url(images/content-bg.png) center top repeat-y; position: relative; float: left; padding: 0 15px; }

#leftcol { width: 140px; padding: 40px 10px 10px 10px; position: relative; float: left; background: url(images/logo-bottom-fill.gif) no-repeat; }

/*#leftcol ul { padding: 0; list-style: none; position: relative; left: 10px; }
#leftcol li { padding: 2px; list-style: none; }
#leftcol ul a { text-decoration: none; }
#leftcol li:hover { background: #FFF; }
#leftcol li.selected { background: #FFF; }*/

#centrecol { width: 550px; padding: 10px; position: relative; float: left; }
#centrecol.cat { width: 560px; padding: 5px; }
#centrecol.home img { margin: 1px; }
#centrecol.home a:hover img { opacity: 0.5; filter: alpha(opacity=50); }
#info1, #info2, #info3, #info4, #info5, #info6, #info7, #info8 { min-height: 100px; }

#centrecol #form { margin: 1em 0 0 0; }
#centrecol #form table { border: 0; width: 100%; margin: 1em 0 0 0; }
#centrecol #form th { text-align: right; vertical-align: top; padding-top: 5px; }
#centrecol #form td { }
#centrecol #form input, #centrecol #form textarea { background: #E5E5E5; border: 1px solid #444; }
#centrecol #form input.none { background: none; border: none; }
#centrecol #form input.butt { background: #F57F20; border: 0; padding: 3px; width: 80px; margin: 5px 0; font-family: Georgia, Times, serif; text-transform: uppercase; font-size: 1em; font-weight: normal; font-style: italic; cursor: pointer; float: right; } 
#centrecol #form input.butt:hover { background: #7A3F10; }
#centrecol #form input.fielderror { background-color: #FF9999; }

a.general div { position: relative; float: left; background: url(images/general-button-bg.jpg) no-repeat; width: 183px; height: 31px; overflow: hidden; font-size: 1.36em; text-transform: uppercase; font-family: Georgia, Times, serif; font-style:italic; text-align: center; padding-top: 4px; }
a.general:hover div { background-position: 0 -35px; height: 28px; padding-top: 7px; }
a.general { text-decoration: none; }

#toplinks { position: relative; float: left; text-align: center; width: 550px; height: 75px; background: url(images/hr-grey.gif) repeat-x bottom; margin: 5px 0 0.5em 0; }

#bottomcopy { position: relative; float: left; width: 550px; background: url(images/hr-grey.gif) repeat-x; margin-top: 1em; padding-top: 1em; }

/* CATALOGUE STYLES ------------------------------------------------------------------------------------------------------*/
#othersubs { margin: 1em 0; text-align: center; }
#othersubs li { background: #F57F20; color: #FFF; padding: 5px; text-transform: uppercase; display: inline; list-style: none; }
#subdepts { position: relative; float: left; width: 560px; left: -5px; }
#subdepts a { text-decoration: none; }
.subdept { position: relative; float: left; width: 180px; height: 170px; background: #444; color: #FFF; margin: 5px 0 0 5px; padding: 5px 0; text-align: center; overflow: hidden; }
.overlay { position: relative; top: -185px; }
.overlay h2 { position: relative; float: left; width: 170px; top: -90px; margin-left: 5px; }
.from { position: relative; float: left; top: -180px; padding: 4px 0 0 6px; text-align: left; color: #000; }
.from span { color: #FFF; font-size: 1.55em; }
.subdept h2 { color: #FFF; }
.subdept:hover h2 { color: #F00; }
.subdept hr { background: url(images/hr-white.gif) repeat-x; }
.imgholder { position: relative; float: left; height: 180px; width: 180px; text-align: center; }
.imgholder img { margin: 0; border: 1px solid #FFF; }
 a:hover .imgholder img { opacity: 0.5; filter: alpha(opacity=50); }
/* DETAIL STYLES */
#detailscont { position: relative; float: left; overflow: hidden; width: 100%; }
#detailsimg { position: relative; float: left; padding-bottom: 2000px; margin-bottom: -2000px; margin-right: 10px; }
#detailsimg p { text-align: center; font-weight: bold; font-size: 1.18em; }
#detailsinfo { position: relative; float: left; padding-bottom: 2000px; margin-bottom: -2000px; }
#detailsinfo ul { padding-left: 1.3em; margin: 1em 0 0 0; }

#detailsinfo table { width: 100%; border: 1px solid #000; vertical-align: top; margin: 1em 0 0 0; }
#detailsinfo th { background: #444; color: #FFF; text-align: right; padding: 3px; width: 10px; white-space: nowrap; }
#detailsinfo td { background: #E5E5E5; padding: 3px; }

#colourscont form { width: 100%; vertical-align: middle; margin: 1em 0 0 0; }
#colourscont img { position: relative; top: 5px; }
#colourscont input.add { background: #F57F20; border: 0; padding-right: 10px; padding-right: 10px; margin: 0; font-family: Georgia, Times, serif; text-transform: uppercase; font-size: 1em; font-weight: normal; font-style: italic; cursor: pointer; }
#colourscont input.add:hover { background: #7A3F10; }

#detailsimgcont { border: 1px solid #000; padding: 1px; }
#detailsimgcont a:hover img { opacity: 0.5; filter: alpha(opacity=50); }
#colourscont { position: relative; float: left; text-align: center; width: 100%; background: #E5E5E5; padding: 0 0 1em 0; margin: 1em 0 0 0; }
#colourscont p { font-size: 1.18em; background: #444; color: #FFF; padding: 3px 1em; margin: 1em 0 0.5em 0; text-align: left; }
#colourscont p.first { margin-top: 0; }
#colourscont p strong { color: #F57F20; }
#colourscont img { margin: 1; }
#colourscont a:hover img { opacity: 0.5; filter: alpha(opacity=50); }
#colourscont textarea { width: 90%; background: #FFF; border: 1px solid #444; }

/* EXAMPLE STYLES */
.example { position: relative; float: left; }
.example.right { float: right; }
.example.centre { margin-left: 175px; }
.example a:hover img { opacity: 0.5; filter: alpha(opacity=50); }
p.desc { margin-top: 0; text-align: center; color: #444; font-size: 0.91em; }

table.pricing { width: 100%; margin: 1em 0; background: #FFF; border-spacing: 1px; padding: 0; }
table.pricing th { background: #444; color: #FFF; text-align: center; padding: 3px; white-space: nowrap; }
table.pricing th.blank { background: #FFF; }
table.pricing th.label { color: #F57F20; }
table.pricing td { background: #E5E5E5; text-align: center; padding: 3px; }
table.pricing.transfer { width: 275px; }
table.pricing .left { text-align: left; }
table.pricing .right { text-align: right; }

table.quoting { width: 100%; margin: 1em 0 0 0; }
table.quoting th { background: #444; color: #FFF; text-align: center; padding: 3px; }
table.quoting td { background: #E5E5E5; text-align: left; padding: 3px; vertical-align: top; white-space: nowrap; min-width: 50px; }
table.quoting .left { text-align: left; white-space: normal; }
table.quoting .right { text-align: right; }
table.quoting .centre { text-align: center; }
table.quoting input.default-value { width: 300px; }
#updatequote { font-size: 0.82em; background: #F57F20; width: 120px; position: relative; float: right; margin: 0; font-family: Georgia, Times, serif; text-transform: uppercase; font-size: 1em; font-weight: normal; font-style: italic; cursor: pointer; text-align: center; padding: 3px; border: 0; }
#updatequote:hover { background: #7A3F10; }
#note { float: left; position: relative; width: 550px; margin: 1em 0; }

.quotethumb { float: left; margin-right: 5px; border: 1px solid #FFF; }
a:hover img.quotethumb { opacity: 0.5; filter: alpha(opacity=50); }

table.printdetails { width: 100%; margin: 0.5em 0; }
table.printdetails th { background: #E5E5E5; color: #000; text-align: right; vertical-align: top; padding: 8px 3px 3px 3px; }
table.printdetails td { background: #E5E5E5; text-align: left; vertical-align: top; white-space: nowrap; min-width: 50px; }

.dlcont { width: 100%; position: relative; float: left; padding: 5px 0; background: url(images/hr-grey.gif) repeat-x; }
.dlcont img { float: left; margin: 0 10px 0 0; }
.dlcont a:hover img { opacity: 0.5; filter: alpha(opacity=50); }

#rightcol { width: 220px; padding: 10px; position: relative; float: left; }
#rightcol a:hover img { opacity: 0.8; filter: alpha(opacity=80); }
#rightcol h2 { text-align: right; }
#quickquote { margin: -3px 0 3px 0; }
#quotebox { background: #FFF; width: 216px; position: relative; float: left; padding: 2px; }
#quotebox.full { background: #F57F20; color: #FFF; }
#quotebox a { color: #FFF; }
#quotebox p { padding: 0 8px; }
#quotebox table { width: 216px; }
#quotebox tr.alt { background: #7A3F10; }
#quotebox th { background: #444; color: #FFF; text-align: left; padding: 3px; width: 10px; white-space: nowrap; }
#quotebox td { padding: 3px 2px; vertical-align: top; }
#quotebox .centre { text-align: center; }
#quotebox .right { text-align: right; padding-right: 6px; }

#quotebits { width: 220px; position: relative; float: left; margin-bottom: 10px; }
#quotebits a { text-decoration: none; }
#quotebits a.copy { position: relative; float: left; margin: 3px; }
#getquote { font-size: 0.82em; background: #F57F20; width: 80px; position: relative; float: right; margin: 0; font-family: Georgia, Times, serif; text-transform: uppercase; font-size: 1em; font-weight: normal; font-style: italic; cursor: pointer; text-align: center; padding: 3px; }
a #getquote:hover { background: #7A3F10; }

.instructions a { text-decoration: none; }

#button { font-size: 0.82em; background: #F57F20; position: relative; float: left; margin: 5px 0; font-family: Georgia, Times, serif; text-transform: uppercase; font-size: 1em; font-weight: normal; font-style: italic; cursor: pointer; text-align: center; padding: 3px 9px; }
a #button:hover { background: #7A3F10; }

#quotebuttons a { text-decoration: none; }

#postadd { width: 550px; padding: 0 10px; }
#postadd a { text-decoration: none; }
#postadd a.copy { position: relative; float: left; margin: 3px 10px; }
#postadd #getquote { float: none; display: inline; }

.defaultText { width: 300px; }
.defaultTextActive { color: #a1a1a1; font-style: italic; }

/* SHOWCASE STYLES ------------------------------------------------------------------------------------------------------*/
#showcase { width: 975px; height: 180px; position: relative; float: left; overflow: hidden; padding: 40px 0 0 25px; }
#mask { position: relative; top: -200px; left: -25px; }
#fadeshowcont { position: relative; float: right; top: -400px; left: -45px; width: 280px; height: 170px; }
.fadeshow { position: relative; float: left; width: 140px; height: 85px; }

/* FOOTER STYLES ------------------------------------------------------------------------------------------------------*/
#footer { width: 700px; min-height: 160px; background: url(images/footer-bg.png) center top repeat-y; position: relative; float: left; color: #FFF; padding: 0 150px 10px; text-align: justify; }
#footer hr { background: url(images/hr-white.gif) repeat-x; }
#footer a { color: #FFF; }
#footer a:hover img { opacity: 0.5; filter: alpha(opacity=50); }
#brandlogos { text-align: center; }
#brandlogos img { margin-left: 4px; }
#brandlogos img.first { margin: 0; }
#mailinglist { width: 220px; height: 100px; position: relative; float: left; }
#mailinglist input { background: #FFF; border: 0; font-size: 0.82em; width: 214px; padding: 3px; }
#mailinglist input.signup { background: #F57F20; border: 0; width: 80px; position: relative; float: right; margin: 0; font-family: Georgia, Times, serif; text-transform: uppercase; font-size: 1em; font-weight: normal; font-style: italic; cursor: pointer; }
#mailinglist input.signup:hover { background: #7A3F10; }
#footerlinks { width: 220px; height: 100px; position: relative; float: left; margin-left: 20px; text-align: right; }
#copyright { width: 220px; height: 100px; position: relative; float: left; margin-left: 20px; }
#copyright a.credit { position: relative; float: right; margin-top: 4px; }
#footercap { width: 1000px; height: 60px; background: url(images/footer-cap-bg.png) center top no-repeat; position: relative; float: left; }

/* FACEBOX STYLES ------------------------------------------------------------------------------------------------------*/
#facebox .b { background:url(images/b.png); }
#facebox .tl { background:url(images/tl.png); }
#facebox .tr { background:url(images/tr.png); }
#facebox .bl { background:url(images/bl.png); }
#facebox .br { background:url(images/br.png); }
#facebox { position: absolute; width: 100%; top: 0; left: 0; z-index: 9999; text-align: left; }
#facebox .popup { position: relative; }
#facebox table { margin: auto; border-collapse: collapse; border-spacing: 1px; }
#facebox .body { padding: 10px; background: #fff; width: 370px; }
#facebox .loading { text-align: center; }
#facebox .image { text-align: center; }
#facebox img { border: 0; }
#facebox .footer { text-align: right; }
#facebox .tl, #facebox .tr, #facebox .bl, #facebox .br { height: 10px; width: 10px; overflow: hidden; padding: 0; }