﻿/* = Main Structure
----------------------------------------------------------------------------------------------------------------- */
#wrap #head { width: 995px; margin: 0 auto; height: 150px; }
#wrap #head .inset { float: left; width: 995px; }
#wrap #mainContent .inset { width: 995px; margin: 0 auto; position: relative; height: 560px; }
#wrap #foot { width: 995px; margin: 0 auto; }
#wrap #foot .inset { float: left; width: 995px; padding: 10px 0; }

/* = Homepage & Main Template
----------------------------------------------------------------------------------------------------------------- */
#wrap .templateOne .inset,
#wrap .templateHome .inset,
#wrap .templateProjects .inset { margin-top: -560px !important; }

/* = Blank Template
----------------------------------------------------------------------------------------------------------------- */
#wrap .templateTwo { background: url(/_img/belvoir-terrace.jpg) no-repeat center top; }
#const #wrap .templateTwo { background: url(/_img/construction.jpg) no-repeat center top; }
#services #wrap .templateTwo { background: url(/ugc-1/projects/2/1_grey.jpg) no-repeat center top; }

/* = Navigation
----------------------------------------------------------------------------------------------------------------- */
#wrap #head #nav ul { margin: 106px 20px 0; float: left; text-transform: uppercase; font-family: 'Open Sans', Arial, Helvetica, Sans-Serif; }
#wrap #head #nav ul li { display: inline; list-style: none; margin: 0 10px 0 0; }
#wrap #head #nav ul li a { color: #fff; font-weight: 600; }
#wrap #head #nav ul li a.on, #wrap #head #nav ul li a:hover { color: #d56a03; text-decoration: none; }
#wrap #head #nav ul li a.on { font-weight: 800; }
#wrap #head #nav ul li.construction a { color: #904685; }
#wrap #head #nav ul li.constructio a.on, #wrap #head #nav ul li.constructio a:hover { font-weight: 800; }

/* = Header
----------------------------------------------------------------------------------------------------------------- */
#wrap #head .logo { float: left; margin-top: 20px; }
#wrap #head .caption { float: right; text-align: right; margin-top: 32px; }
#wrap #head .caption h1 { font-size: 300%; color: #fff; font-weight: 400; text-transform: lowercase; margin-bottom: 5px; }
#wrap #head .caption p { color: #fff; }

/* = Footer
----------------------------------------------------------------------------------------------------------------- */
#wrap #foot p { color: #fff; }
#wrap #foot p a { color: #fff; font-weight: normal; }
#wrap #foot span { color: #d56a03; }
#wrap #foot .ribalogo { margin-left: 50px; }
#wrap #foot .labclogo { margin-left: 50px; }

/* = Content Zones
----------------------------------------------------------------------------------------------------------------- */
#wrap .templateHome .zoneOne { position: absolute; bottom: 10px; left: -96px; width: 515px; z-index: 500; }
#wrap .templateHome .zoneTwo { position: absolute; bottom: 10px; right: 0; width: 200px; margin-right: 30px; z-index: 500; }
#wrap .templateHome .showproject { color: #fff; font-weight: normal; padding: 20px 20px 20px 55px; display: inline-block; position: absolute; top: 450px; right: 400px; z-index: 9999; background: rgba(0, 0, 0, 0.7) url(/_img/maximize.png) no-repeat 15px center; background-size: auto 15px; }
#wrap .templateHome .showproject:hover { text-decoration: none; }

#wrap .templateOne .zoneOne { position: absolute; bottom: 10px; left: -96px; width: 1097px; z-index: 500; }
#wrap .templateOne .zoneTwo { position: absolute; top: 30px; right: 0; width: 200px; margin-right: 30px; z-index: 500; }

#wrap .templateTwo .zoneOne { display: none; }
#wrap .templateTwo .zoneTwo { position: absolute; top: 30px; right: 0; width: 40%; z-index: 10; }

#wrap .templateProjects .zoneOne { position: absolute; bottom: 10px; left: -96px; width: 1097px; z-index: 500; }
#wrap .templateProjects .zoneOne .minimize { color: #fff; font-weight: normal; position: absolute; top: 90px; right: 30px; z-index: 500; padding: 20px 0 20px 40px; background: url(/_img/minimize.png) no-repeat left center; background-size: auto 15px; }
#wrap .templateProjects .zoneOne .minimize:hover { text-decoration: none; }
#wrap .templateProjects .zoneTwo { position: absolute; top: 30px; right: 0; width: 200px; margin-right: 30px; z-index: 500; }
#wrap .templateProjects .zoneExpand { position: absolute; top: 497px; right: 24px; z-index: 500; }
#wrap .templateProjects .zoneExpand a { color: #fff; font-weight: normal; padding: 20px 20px 20px 55px; display: inline-block; background: rgba(0, 0, 0, 0.7) url(/_img/maximize.png) no-repeat 15px center; background-size: auto 15px; }
#wrap .templateProjects .zoneExpand a:hover { text-decoration: none; }
#wrap .templateProjects .showproject { display: none; }

/* = Modules
----------------------------------------------------------------------------------------------------------------- */
.zoneOne .module {; background: url(/_img/bg-projects.png); color: #fff; }
.zoneOne .module h2 { font-size: 130%; margin-bottom: 0; color: #fff; }
.zoneOne .module ul { margin: 0; padding: 15px; }
.zoneOne .module ul li h2 { cursor: pointer; clear: both; }
.zoneOne .module ul li h2 a { display: block; font-weight: 600; }
.zoneOne .module ul li.on h2 { color: #d56a03; font-weight: 800; }
.zoneOne .projectScrollerView { width: 278px !important; height: 143px; overflow: hidden; }

.zoneOne .module ul a { display: none; color: #fff; }
.zoneOne .module ul a span { color: #d56a03; }
.zoneOne .module h2.heading { background: url(/_img/bg-headings.png); width: 64%; padding: 3px 0 3px 95px; margin-top: 10px; }

.zoneOne .module ul.smallNav { padding: 5px 15px 5px 95px; }
.zoneOne .module ul.smallNav li { margin: 0 0 5px; list-style: none; padding: 0; }
.zoneOne .module ul.smallNav li a { font-weight: 600; display: block; font-size: 115%; text-transform: uppercase; font-family: 'Open Sans', Arial, Helvetica, Sans-Serif; }
.zoneOne .module ul.smallNav li.on a { font-weight: 800; color: #d56a03; }

.zoneOne .module ul.scrollNav { padding-left: 95px; float: left; width: 405px; height: 170px; overflow: auto; }
.zoneOne .module ul.scrollNav li { margin: 0 0 10px -15px; padding: 0 0 0 20px; list-style: none; background: url(/_img/bullet-square-white.gif) no-repeat left 5px; }
.zoneOne .module ul.scrollNav li.on { background-image: url(/_img/bullet-square-orange.gif); }
.zoneOne .module ul.scrollNav li p { margin: 0; }
.zoneOne .module ul.scrollNav li p br { display: none; }
.zoneOne .module ul.scrollNav li p a { display: inline-block; }

.zoneOne .module ul.thumbs { width: 100000px; padding: 0; }
.zoneOne .module ul.thumbs { list-style: none; }
.zoneOne .module ul.thumbs li { display: inline; margin: 10px 15px; }
.zoneOne .module ul.thumbs li img { border: 1px solid #e2e2e2; cursor: pointer; }
.zoneOne .module .carousel { width: 750px; overflow: hidden; margin: 22px 15px 15px; position: relative; }
.zoneOne .module .carousel p { margin: 10px; }
.zoneOne .module .carousel .scrollLeft, .zoneOne .module .carousel .scrollRight { cursor: pointer; display: block; height: 67px; position: absolute; top: 0; width: 10px; text-indent: -20000px; display: block; }
.zoneOne .module .carousel .scrollLeft { left: 0; background: url(/_img/arrow-left.gif) no-repeat center center; }
.zoneOne .module .carousel .scrollRight { right: 0; background: url(/_img/arrow-right.gif) no-repeat center center; }
.zoneOne .module .carousel .hide { display: none; }

.zoneTwo .module { padding: 15px; background: url(/_img/bg-module.gif) repeat 8px 25px; box-shadow: 0 5px 5px 0 #333; }
.zoneTwo .module h2 { background: url(/_img/bg-headings.png); width: 100%; margin-left: -25px; padding: 3px 25px; font-weight: bold; }
.zoneTwo .module { min-height: 170px; width: 100%; margin-top: 20px; }
.zoneTwo .module ul { list-style: none; margin: 0; }
.zoneTwo .module ul li { margin: 0 0 10px; }
.zoneTwo .module span.date { color: #474747; }
.zoneTwo .module p a { color: #747474; }

.zoneTwo .module .tabContent { height: 220px; }

/* = Image Scroll
----------------------------------------------------------------------------------------------------------------- */
.scroller { overflow: hidden; text-align: center; position: relative; height: 560px; }
.scroller ul.scroll { margin: 0 auto; list-style: none; }
.scroller ul.scroll li { margin: 0; }
.scroller .controls { left: 50%; margin-left: -600px; position: absolute; top: 230px; width: 1200px; z-index: 500; }
.scroller #prev { float: left; cursor: pointer; padding: 15px; background: rgba(0, 0, 0, 0.7); }
.scroller #next { float: right; cursor: pointer; padding: 15px; background: rgba(0, 0, 0, 0.7); }
.scroller .bullets { float: left; margin: 35px; }
.scroller .bullets a { float: left; border: 1px solid #CCC; box-shadow: 1px 1px 2px 0 #333; width: 9px; height: 9px; background: #fff; text-indent: 1000px; overflow: hidden; margin-right: 10px; }
.scroller .bullets a.on { background: #d56a03; border: 1px solid #d56a03; }

/* = Tabs
----------------------------------------------------------------------------------------------------------------- */
ul.tabs { margin: 0 0 10px 0 !important; color: #474747; }
ul.tabs li { display: inline; }
ul.tabs li a { color: #474747; }
ul.tabs li.on a { color: #d56a03; }

/* = Paging
----------------------------------------------------------------------------------------------------------------- */
.pg ul li { display: inline; margin: 0 10px; }
.pg ul li.det { margin-right: 20px; }

/* = News
----------------------------------------------------------------------------------------------------------------- */
ul.newsListing { margin: 10px 0 0 !important; }

/* = jScrollpane
----------------------------------------------------------------------------------------------------------------- */
.jspContainer { overflow: hidden; position: relative; }
.jspPane { position: absolute; }
.jspVerticalBar { position: absolute; top: 0; right: 0; width: 5px; height: 100%; }
.jspHorizontalBar { position: absolute; bottom: 0; left: 0; width: 100%; height: 5px; }
.jspVerticalBar *, .jspHorizontalBar * { margin: 0; padding: 0; }
.jspCap { display: none; }
.jspHorizontalBar .jspCap { float: left; }
.jspTrack { background: #a2a2a2; position: relative; }
.jspDrag { background: #d56a02; position: relative; top: 0; left: 0; cursor: pointer; }
.jspHorizontalBar .jspTrack, .jspHorizontalBar .jspDrag { float: left; height: 100%; }
.jspArrow { background: #50506d; text-indent: -20000px; display: block; cursor: pointer; }
.jspArrow.jspDisabled { cursor: default; background: #80808d; }
.jspVerticalBar .jspArrow { height: 16px; }
.jspHorizontalBar .jspArrow { width: 16px; float: left; height: 100%; }
.jspVerticalBar .jspArrow:focus { outline: none; }
.jspCorner { background: #eeeef4; float: left; height: 100%; }
.zoneTwo .module .jspContainer h2 { margin: 0; padding: 3px 0; }

/*Height restrictions*/
#wrap .templateTwo .zoneTwo .paneHolder, #wrap .templateTwo .zoneTwo .newsListing { height: 350px; }
#wrap .templateHome .zoneTwo .paneHolder { height: 230px; }
#wrap .templateHome .zoneTwo .newsListing { height: 100px; }

/* = Construction
----------------------------------------------------------------------------------------------------------------- */
.constCompNo { display: none; }
.logoHdrConst { display: none; }

#const h2 { color: #904685; }
#const .zoneTwo a { color: #904685; }
#const .jspDrag { background: #904685; }
#const #wrap #foot span { color: #904685; }
#const .ribalogo { display: none; }
#const .constCompNo { display: block; }
#const .constlogo { display: block; }
#const .logo { display: none; }
#const .logoHdrConst { display: block; }