/* # # # # # # # B a s e E l e m e n t s # # # # # # # */

html, body { height: 100%; }

body { font: 11px/180% Arial, Tahoma, Sans-Serif; background: #efece7 url(../graphics/bg-body.png) repeat-x 0 0; }

h1, h2, h3, h4, p { margin: 0 0 2em; }

h1 { font-size: 18px; }
h2 { font-size: 16px; }
h3 { font-size: 14px; text-transform: uppercase; }
h4 { font-size: 12px; }

p { text-align: justify; }

.clear { clear: both; }

a { color: #000; text-decoration: none; font-weight: bold; }
a:hover { color: #f79321; }

em { font-style: normal; }
em.italic { font-style: italic; }

ul.standard-list { list-style-type: disc; padding-left: 20px; }
ul.standard-list li { padding-bottom: 1em; }

blockquote { font-style: italic; text-align: justify; }
cite { text-align: right; display: block; padding-bottom: 1em; font-weight: bold; font-style: normal; }

/* # # # # # # # S t r u c t u r a l # # # # # # # */

#container { width: 950px; margin: 0 auto; min-height: 100%; position: relative; }

#header { position: relative; height: 120px; background: url(../graphics/bg-header.png) no-repeat 0 0; }

#header h1 { position: absolute; margin: 0; width: 164px; height: 50px; bottom: 10px; left: 11px; background: url(../graphics/xtrend-logo-header.png) no-repeat 0 0; }

#main { padding-bottom: 60px; }

#footer { height: 47px; background: url(../graphics/bg-footer.png) no-repeat 0 0; padding-top: 13px; position:absolute; bottom:0; width: 100%; }
#footer p { text-align: center; color: #fff; margin: 0; }
#footer a { color: #fff; }
#footer a:hover { color: #f79321; }

/* # # # # # # # N a v i g a t i o n # # # # # # # */

ul#nav { position: absolute; bottom: 0px; left: 265px; }
ul#nav li { float: left; margin-right: 10px; }
ul#nav li a { display: block; text-indent: -9999px; height: 45px; background: url(../graphics/nav.png) no-repeat 0 0; }
ul#nav li a#home-button { background-position: 0 0; width: 72px; }
ul#nav li a#home-button:hover { background-position: 0 -45px; }
ul#nav li a#poss-button { background-position: -72px 0; width: 120px; }
ul#nav li a#poss-button:hover { background-position: -72px -45px; }
ul#nav li a#faq-button { background-position: -192px 0; width: 60px; }
ul#nav li a#faq-button:hover { background-position: -192px -45px; }
ul#nav li a#case-button { background-position: -252px 0; width: 120px; }
ul#nav li a#case-button:hover { background-position: -252px -45px; }
ul#nav li a#git-button { background-position: -372px 0; width: 120px; }
ul#nav li a#git-button:hover { background-position: -372px -45px; }

ul#pillars { position: absolute; bottom: 0; right: 0; }
ul#pillars li { float: left; }
ul#pillars li a { position: absolute; bottom: 0; display: block; text-indent: -9999px; width: 15px; background: url(../graphics/pillars.png) no-repeat 0 0; }
ul#pillars li a#relax-pillar { background-position: 0 0; height: 50px; right: 60px; }
ul#pillars li a#play-pillar { background-position: -15px 0; height: 65px; right: 40px; }
ul#pillars li a#dine-pillar { background-position: -30px 0; height: 80px; right: 20px; }
ul#pillars li a#work-pillar { background-position: -45px 0; height: 95px; right: 0px; }

/* # # # # # # # H o m e P a g e # # # # # # # */

body#home h1#xtrend { text-indent: -9999px; width: 245px; height: 73px; background: url(../graphics/xtrend-logo-main.png) no-repeat 0 0; }
body#home h2#didnt-you-know { text-indent: -9999px; width: 300px; height: 45px; background: url(../graphics/didnt-you-know.png) no-repeat 0 0; }

body#home #column-one { position: relative; }
body#home #column-one { width: 625px; height: 600px; padding-top: 50px; float: left; }
body#home #column-one #cross-fade { position: relative; top: 108px; }
body#home #column-one #cross-fade li { height: 465px; left: 0; position: absolute; top: 0; width: 625px; z-index: 0; }
body#home #column-one #cross-fade li.cross-fade-active { z-index: 1; }
body#home #column-one #window-overlay { z-index: 2; position: absolute; top: 50px; left: 0; background-image: url(../graphics/window-overlay.png); width: 625px; height: 600px; }

body#home #column-two { width: 300px; padding-top: 70px; float: right; }

/* # # # # # # # P o s s i b i l i t i e s # # # # # # # */

body#possibilities #column-one { width: 190px; float: left; }
body#possibilities #column-two { width: 728px; float: right; padding-top: 30px; }

body#possibilities h2 { margin: 0 0 1em; }

body#possibilities ul#poss-nav li a { width: 174px; height: 28px; display: block; color: #fff; text-transform: uppercase; letter-spacing: 3px; line-height: 28px; padding-left: 12px; margin-top: 5px; }
body#possibilities ul#poss-nav li a:hover { color: #ccc; }
body#possibilities ul#poss-nav li a.button-relax { background-color: #e43348; }
body#possibilities ul#poss-nav li a.button-play { background-color: #3989e0; }
body#possibilities ul#poss-nav li a.button-dine { background-color: #f69023; }
body#possibilities ul#poss-nav li a.button-work { background-color: #84ca34; }

body#possibilities img { border: 4px solid #fff; margin-bottom: 20px; }
body#possibilities #column-two h1 { margin: 0 0 1em; background: url(../graphics/poss-headings.png) no-repeat 0 0; height: 42px; width: 300px; text-indent: -9999px; }
body#possibilities #column-two h1#poss-living-room { background-position: 0 0; }
body#possibilities #column-two h1#poss-bedroom { background-position: 0 -42px; }
body#possibilities #column-two h1#poss-home-cinema { background-position: 0 -84px; }
body#possibilities #column-two h1#poss-games-room { background-position: 0 -126px; }
body#possibilities #column-two h1#poss-playroom { background-position: 0 -168px; }
body#possibilities #column-two h1#poss-dining-room { background-position: 0 -210px; }
body#possibilities #column-two h1#poss-home-office { background-position: 0 -252px; }
body#possibilities #column-two h1#poss-home-gym { background-position: 0 -294px; }

body#possibilities table { margin: 0 auto 2em; }

body#possibilities img.inserted-image { border: none; margin: 0 auto; display: block; }

/* # # # # # # # Case Studies # # # # # # # */

body#case #column-one { width: 190px; float: left; }
body#case #column-two { width: 728px; float: right; padding-top: 30px; position: relative; }

body#case #case-study-image-list { background-color: #fff; border-color: #fff; border-style: solid; border-width: 0 4px 0 0; height: 288px; list-style-type: none; margin: 0 0 20px 0; overflow: hidden; position: relative; width: 724px; }
body#case #case-study-image-list li { border-color: #fff; border-style: solid; border-width: 4px 0 4px 4px; float: left; height: 280px; margin: 0; overflow: hidden; padding: 0; position: relative; width: 177px; }
body#case #case-study-image-list li.relax { background-color: #e43348; }
body#case #case-study-image-list li.play { background-color: #3989e0; }
body#case #case-study-image-list li.dine { background-color: #f69023; }
body#case #case-study-image-list li.work { background-color: #84ca34; }
body#case #case-study-image-list li img { height: 280px; left: -90px; position: absolute; width: 358px; }

body#case #column-two h1 { margin: 0 0 1em; }
body#case h2 { margin: 0 0 1em; }

body#case ul#case-nav li a { width: 174px; height: 28px; display: block; color: #fff; text-transform: uppercase; letter-spacing: 3px; line-height: 28px; padding-left: 12px; margin-top: 5px; }
body#case ul#case-nav li a:hover { color: #ccc; }
body#case ul#case-nav li a.button-relax { background-color: #e43348; }
body#case ul#case-nav li a.button-play { background-color: #3989e0; }
body#case ul#case-nav li a.button-dine { background-color: #f69023; }
body#case ul#case-nav li a.button-work { background-color: #84ca34; }

body#case ol { list-style-type: lower-roman; margin: 0 0 2em; padding-left: 30px; }
body#case ol li { padding: 0 0 10px 10px; }

body#case #time-taken { position: absolute; top: 28px; right: 15px; width: 99px; height: 23px; background: url(../graphics/time-taken.png) no-repeat 0 0; line-height: 23px; font-size: 16px; text-transform: uppercase; text-align: right; padding-right: 20px; }

/* # # # # # # # FAQ # # # # # # # */

body#faq h2#faq-heading { text-indent: -9999px; width: 170px; height: 87px; background: url(../graphics/faq.png) no-repeat 0 0; }

body#faq #column-one { width: 230px; padding-top: 40px; float: left; }

body#faq #faq-links li { padding: 6px 0; border-bottom: 1px solid #ccc; }
body#faq #faq-links li:first-child { border-top: 1px solid #ccc; }
body#faq #faq-links li a { font-weight: normal; }

body#faq #column-two { width: 670px; padding-top: 40px; float: right; }

body#faq #faqs { color: #fff; }
body#faq .q-a-block { position: relative; }
body#faq .faq-question, body#faq .faq-answer { width: 530px; }
body#faq .faq-question { float: left; padding-left: 28px; padding-bottom: 40px; background: url(../graphics/faq-q-dude.png) no-repeat bottom left; }
body#faq .faq-answer { float: right; padding-right: 20px; margin-top: -40px; margin-bottom: 60px; background: url(../graphics/faq-a-xtrend.png) no-repeat bottom right; }
body#faq .faq-q-bubble-middle, body#faq .faq-a-bubble-middle { width: 470px; padding: 0 30px; } /* ie7 background fix */
body#faq .faq-q-bubble-middle h2, body#faq .faq-a-bubble-middle p { margin: 0; }
body#faq .faq-q-bubble-middle h2 { font-size: 12px; font-weight: normal; }
body#faq .faq-q-bubble-top { height: 30px; background: url(../graphics/faq-q-bubble-top.png) no-repeat 0 0; }
body#faq .faq-q-bubble-middle { background: url(../graphics/faq-q-bubble-middle.png) repeat-y 0 0; }
body#faq .faq-q-bubble-bottom { height: 25px; background: url(../graphics/faq-q-bubble-bottom.png) no-repeat 0 0; }
body#faq .faq-a-bubble-top { height: 30px; background: url(../graphics/faq-a-bubble-top.png) no-repeat 0 0; }
body#faq .faq-a-bubble-middle { background: url(../graphics/faq-a-bubble-middle.png) repeat-y 0 0; }
body#faq .faq-a-bubble-bottom { height: 22px; background: url(../graphics/faq-a-bubble-bottom.png) no-repeat 0 0; }

body#faq .extra { display: none; }
body#faq .q-a-block em { font-style: italic; }
body#faq .q-a-block strong { font-weight: bold; }
body#faq .q-a-block p.more { margin-top: 1em; }
body#faq .q-a-block a { color: #fff; }
body#faq .q-a-block a:hover { color: #f69023; }

#fancy_div { background-color: transparent !important; color: #000 !important; overflow: auto !important; padding-right: 10px !important; text-align: justify !important; width: auto !important; }
#fancy_div h3, body#faq #fancy_div p, body#faq #fancy_div ul { margin: 0 0 1em; }
#fancy_div h3 { color: #e43348; margin-top: 2em; }
#fancy_div h3:first-child { margin-top: 0; }
#fancy_div ul { list-style-type: disc; padding-left: 20px; }
#fancy_div ul li { padding-top: 15px; }
#fancy_div ul li:first-child { padding-top: 0; }
#fancy_close {	top: -15px; left: -15px; }

body#faq a.back-to-top { position: absolute; top: 23px; right: 52px; width: 54px; height: 35px; text-indent: -9999px; display: block; background: url(../graphics/back-to-top.png) no-repeat 0 0; }

/* # # # # # # # G e t I n T o u c h # # # # # # # */

body#contact h2#get-in-touch { text-indent: -9999px; width: 212px; height: 58px; background: url(../graphics/get-in-touch.png) no-repeat 0 0; }

body#contact #column-one { padding-top: 33px; float: left; }

body#contact #column-two { padding-top: 40px; width: 300px; float: right; }

body#contact #map-wrapper { width: 575px; height: 450px; background: url(../graphics/bg-map.png) no-repeat 0 0; padding: 25px; margin-bottom: 30px; }
body#contact #map { width: 575px; height: 450px; }
body#contact #map .bubble h1 { text-indent: -9999px; width: 140px; height: 42px; background: url(../graphics/xtrend-logo-map.png) no-repeat 0 0; margin-bottom: 20px; }

body#contact ul#contact-details h3 { margin-bottom: 10px; }
body#contact ul#contact-details li { margin-bottom: 20px; }
body#contact ul#contact-details li ul li { margin: 0 0 3px 10px; }

.valid { border-color: #8ad33c !important; }
.invalid { border-color: #c74343 !important; }
#contact #fancy_div { padding: 10px; }
#contact-form-container { display: none; }
#contact-form ul { list-style: none; margin: 0 auto; padding: 0; width: 400px; }
#contact-form li { clear: both; padding: 0.75em 0 !important; }
#contact-form label { line-height: 1em; display: block; float: left; width: 200px; }
#contact-form .required { opacity: 0.3; float: left; font-style: normal; clear: left; }
#contact-form li input, #contact-form li textarea, #contact-form li select { border: 2px solid #bbb; padding: 2px; width: 192px; -moz-border-radius-bottomleft: 4px; -moz-border-radius-bottomright: 4px; -moz-border-radius-topleft: 4px; -moz-border-radius-topright: 4px; }
#contact-form li textarea { clear: both; height: 100px; margin-top: 0.5em; width: 392px; }
#contact-form input#send_contact { display: block; float: right; }
#contact-form p#call-back { float: left; width: 200px; }
#contact-form p#call-back input { display: block; float: left; width: auto; }
#contact-form p#call-back label { display: block; float: left; width: auto; margin-top: 6px; }
a#contact-form-link { text-indent: -9999px; display: block; width: 212px; height: 70px; background: url(../graphics/call-back.png) no-repeat 0 0; }

/* # # # # # # # M i s c # # # # # # # */

.relax { color: #e43348; }
.play { color: #3989e0;  }
.dine { color: #f69023;  }
.work { color: #84ca34;  }