/*
	Site:		Space Matrix
	File:		/css/spacematrix.css
	Author:		vinay@artminister.com
	Version:  21-12-2010
	Usage : With Less.js : https://github.com/cloudhead/less.js

*/

/* @group Variables */

@site-width:896px;
@gutter: 20px;
@font-heading:'Vollkorn', serif;
@font-alternate:'Helvetica', Arial, Verdana;
@font-family: Arial, Helvetica, Verdana;
@font-size:11px;
@line-height:1.4;
@base-color:#919296;
@link-color:#F49F20;

  /* Navigation Color Variables */
  
  @color-about-us:#F49F20;
  @color-services:#AD7B84;
  @color-projects:#B0BB21;
  @color-media:#7E5275;
  @color-careers:#38B5E5;
  @color-contact-us:#515151;

  /* Mixins */  
  
  .last-child{
    margin-bottom:0; border-bottom:0;
  }
    
/* @end */

/* @group Site Skeleton */

#Wrapper{width:@site-width; margin:@gutter auto; font-size:@font-size; font-family:@font-family; line-height:@line-height; color:@base-color;}

/* @end */

/* @group Links */

a, a:active, a:visited {color:@link-color; text-decoration:none;}
a:hover{color:@link-color;}

/* @end */

/* @group Hgroup  */

h1, h2, h3, h4, h5, h6, p, pre, dl, ul, ol, legend, address, table, blockquote, section{margin:0 0 @gutter/1.33 0;}

	h1{font-size:18px; font-family: @font-alternate; color:#A8A8A8; text-transform:uppercase;}
	h2{font-size:16px; font-family: @font-alternate; font-weight:normal; margin-bottom:@gutter; color:#e72a10; border-bottom:1px #ddd solid; text-transform:uppercase;}
	h3{font-size:12px; font-family: @font-family; font-weight:bold; margin-bottom:@gutter/2; color:#e72a10; text-transform:capitalize;}
	h4{font-size:14px; font-weight:normal; margin-bottom:@gutter/3;}
	h5{font-size:14px;}
	h6{font-size:12px;}

/* @end */

/* @group Lists */

ul, ol{
  li{margin:0 0 5px 15px;}
}

/* @end */

/* @group Navigation */

nav{
  padding:16px 0 0 0;
  font:bold 10px/1 @font-alternate;
  margin:0;
  overflow:hidden;
  ul{float:right;}
  li{ 
    float:left;
    margin:0 0 0 1px;
    display:inline-block;
    vertical-align:top;
    text-align:left;
    }    
    a, a:visited, a:hover{ text-decoration:none; padding:5px 10px 4px 10px; text-transform:uppercase; width:100px; background:#919296; color:#fff; display:inline-block;}  
  
  .nav-about-us a:hover, .nav-about-us a.active{background:@color-about-us;}
  .nav-services a:hover, .nav-services a.active{background:@color-services;}
  .nav-projects a:hover, .nav-projects a.active{background:@color-projects;}
  .nav-media a:hover, .nav-media a.active{background:@color-media;}
  .nav-careers a:hover, .nav-careers a.active{background:@color-careers;}
  .nav-contact-us a:hover, .nav-contact-us a.active{background:@color-contact-us;}
  
}

.about-us{
  .nav-about-us{
    a,a:hover{background:@color-about-us;}
  } 
}

.services{
  .nav-services{
    a,a:hover{background:@color-services;}
  } 
}

.projects{
  .nav-projects{
    a,a:hover{background:@color-projects;}
  } 
}

.media{
  .nav-media{
    a,a:hover{background:@color-media;}
  } 
}

.careers{
  .nav-careers{
    a,a:hover{background:@color-careers;}
  } 
}

.contact-us{
  .nav-contact-us{
    a,a:hover{background:@color-contact-us;}
  } 
}

/* @end */

/* @group Logo */

a#Logo{ float:left;}

/* @end */

/* @group Aside */

#Content {
  padding:40px 0 20px 0;
  clear:both;
  > aside{float:right; width:430px; height:430px; margin:0; position:relative;
    li{list-style:none;}
  }
  > section{
    border:5px @color-about-us solid;
    padding:55px 20px 20px;
    margin:0 435px 0 0;
    height:345px;
    position:relative;  
  }
  .accordionList{
    width:200px;
    float:left;
    margin:0 @gutter @gutter 0;
    text-transform:uppercase;
    li{margin:0 0 1px 0; list-style:none; display:block;}
    >li>a{background:#919296 url(../images/down-arrow.png) 6px 8px no-repeat; padding:3px 10px 3px 25px; display:block; color:#fff; font-weight:bold;}
    >li>ul{margin:10px 0 10px 25px;}
    >li>ul>li{margin:0 0 3px 0;}
    >li li>a{
      color:@base-color;
      &:hover{color:@base-color;}
      }
  }
  
  #SearchResult{list-style:none; padding:20px 10px; font-weight:bold; text-transform:capitalize; margin-left:200px;
      a,a:hover,a:visited{color:@base-color;}
  }
  
  .searchForm{float:right;
    input{width:140px; border:1px #A8A8A8 solid;}
    label{text-align:right; font-weight:normal; text-transform:uppercase;}
  }
    
}

/* Accordion active HighLight */

#Content .accordionList > .active > a{background:@color-about-us url(../images/up-arrow.png) 6px 8px no-repeat;}
.about-us #Content .accordionList > .active > a{background-color:@color-about-us;}
.projects #Content .accordionList > .active > a{background-color:@color-projects;}
.services #Content .accordionList > .active > a{background-color:@color-services;}
.media #Content .accordionList > .active > a{background-color:@color-media;}
.contact-us #Content .accordionList > .active > a{background-color:@color-contact-us;}
.careers #Content .accordionList > .active > a{background-color:@color-careers;}

#Content .accordionList>.nochild>a{background-image:none !important; padding-left:10px !important;}

/* Section Styles Based on Page */

.about-us #Content > section{border-color:@color-about-us;}
.services #Content > section{border-color:@color-services;}
.projects #Content > section{border-color:@color-projects;}
.contact-us #Content > section{border-color:@color-contact-us;}
.media #Content > section{border-color:@color-media;}
.careers #Content > section{border-color:@color-careers;}

.about-us .accordionList > li li > .active{color:@color-about-us !important;}
.services .accordionList > li li > .active{color:@color-services !important;}
.projects .accordionList > li li > .active{color:@color-projects !important;}
.contact-us .accordionList > li li > .active{color:@color-contact-us !important;}
.media .accordionList > li li > .active{color:@color-media !important;}
.careers .accordionList > li li > .active{color:@color-careers !important;}

/* @end */

/* @group Popups */
  
  #DetailPopup{height:380px; width:390px; color:#fff; padding:30px 20px 20px 20px; position:absolute; left:0; top:0; z-index: 1;
    >.innerPadding{width:390px; height:390px; overflow:auto;}
  }
  
  #FullPopup{
    position:absolute; left:-5px; top:-5px; width:884px; height:418px; border:1px #444 solid; background:#fff; padding:5px; z-index: 2;
    > img{position:absolute; left:5px; top:5px;}
    .content{margin-left:431px;}
    h2{color:#fff; font:bold 12px/1 Helvetica, Arial; background:@color-about-us; padding:5px 4px 5px 20px; margin:0 0 10px 0;}
    .scrollpane{height:350px; overflow:auto; margin:0 0 0 20px;}
    .actions{
      background:#919296; text-align:right; height:24px; text-align:right; text-transform:uppercase; position:absolute; right:5px; bottom:5px; width:453px; margin:0; font-size:12px;
      li{list-style:none; display:inline; margin:0; float:right;}
      a{display:inline-block; height:24px; background:@color-about-us; color:#fff; font-weight:bold; line-height:24px; padding:0 10px; margin-left:2px;}
    }
  }
    
    /* Actions */
    
    #CloseButton{background:url(../images/close-btn.png) 100% 1px no-repeat; padding-right:15px; text-transform:uppercase; color:#fff; position:absolute; right:10px; top:10px;}
    #DetailPopup #CloseButton{right:7px; top:7px;}

  /* Popup Style Based on Page */

  .about-us #DetailPopup, .about-us #FullPopup h2, .about-us #FullPopup .actions a{background:@color-about-us;}
  .services #DetailPopup, .services #FullPopup h2, .services #FullPopup .actions a{background:@color-services;}
  .projects #DetailPopup, .projects #FullPopup h2, .projects #FullPopup .actions a{background:@color-projects;}
  .media #DetailPopup, .media #FullPopup h2, .media #FullPopup .actions a{background:@color-media;}
  .careers #DetailPopup, .careers #FullPopup h2, .careers #FullPopup .actions a{background:@color-careers;}
  .contact-us #DetailPopup, .contact-us #FullPopup h2, .contact-us #FullPopup .actions a{background:@color-contact-us;}

/* @end */

/* @group Image Gallery */
#ProjectGallery{width:425px; height:425px; overflow:hidden; position:absolute; left:5px; top:5px;
  #gallery{width:425px; height:367px;}
}

.thumbs li{ margin:0; list-style:none;float:left; margin:0 0px 0 0; }

/* @end */

/* @group Forms */

form {
  input[type="text"], textarea{border:1px inset #999999; padding:4px; width:280px;}
  textarea{height:65px; overflow:auto;}
  input[type="submit"]{margin-left:92px; background:#333; padding:3px 10px; color:#fff; text-transform:uppercase; border:none;}
  label{display:inline-block; width:90px; vertical-align:top; font-weight:bold; padding-top:3px;}
  fieldset p{margin-bottom:8px;}
  .hint, .captchafield{margin-left:92px;}
  .hint{font-weight:bold;}
}

/* @end */

/* @group Grids */

#Grids{margin:0 -5px 0 0;
  li{list-style:none; width:140px; height:140px; margin:0 5px 5px 0; float:left; position:relative; overflow:hidden;}
  img{float:left;}
  span{width:140px*2; display:block; position:relative; left:0;}
}

.about-us #Grids li{background:@color-about-us;}
.services #Grids li{background:@color-services;}
.projects #Grids li{background:@color-projects;}
.media #Grids li{background:@color-media;}
.careers #Grids li{background:@color-careers;}
.contact-us #Grids li{background:@color-contact-us;}

  /* Page Links */
  
  .pageLink{background:#515151 url(../images/slideshow-arrow-left.jpg) top left no-repeat; width:10px; height:50px; float:left; text-indent:-5000em;}
  .pageLink.next{background:#515151 url(../images/slideshow-arrow-right.jpg) top left no-repeat; }

/* @end */

/* @group Footer */

footer{clear:both; padding:@gutter/2 0; text-align:right; text-transform:uppercase; border-top:1px #919296 solid; color:#A8A8A8;
  p{margin:0;}
}

/* @end */

/* @group ScrollPane */

/*
 * CSS Styles that are needed by jScrollPane for it to operate correctly.
 *
 * Include this stylesheet in your site or copy and paste the styles below into your stylesheet - jScrollPane
 * may not operate correctly without them.
 */

.jspContainer{	overflow: hidden;	position: relative;}
.jspPane{	position: absolute;}
.jspVerticalBar{	position: absolute; top: 0;	right: 0;	width: 10px;	height: 100%;	background: red;}
.jspHorizontalBar{	position: absolute;	bottom: 0;	left: 0;	width: 100%;	height: 16px;	background: red;}
/*.jspVerticalBar *,.jspHorizontalBar *{	margin: 0;	padding: 0;}*/
.jspCap{	display: none;}
.jspHorizontalBar .jspCap{	float: left;}
.jspTrack{	background: #ccc;	position: relative;}
.jspDrag{	background: #919296;	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: 10px;	float: left;	height: 100%;}
.jspVerticalBar .jspArrow:focus{	outline: none;}
.jspCorner{	background: #eeeef4;	float: left;	height: 100%;}
/* Yuk! CSS Hack for IE6 3 pixel bug :( */
* html .jspCorner{	margin: 0 -3px 0 0;}

/* @end */



/* @group Slide Show */

div.controls {margin-top: 5px;height: 23px;}
div.controls a {padding: 5px;}
div.ss-controls {float: left;}
div.slideshow-container {	position: relative; clear: both;	min-height: 298px; /* This should be set to be at least the height of the largest image in the slideshow */}
*html div.slideshow-container{height:298px;}
div.loader {position: absolute;	top: 0;	left: 0;	background-image: url('../images/ajax-loader_white.gif');	background-repeat: no-repeat;	background-position: center;	width: 425px;	height: 365px; /* This should be set to be at least the height of the largest image in the slideshow */}
div.slideshow {	*background:#fff;*overflow:hidden;*width:425px;}
div.slideshow span.image-wrapper {	display: block;	position: relative;	top: 0;	left: 0;}
div.slideshow a.advance-link {	display: block;	width: 425px;	min-height: 367px; /* This should be set to be at least the height of the largest image in the slideshow */	line-height: 0; /* This should be set to be at least the height of the largest image in the slideshow */	text-align: center;	outline:none;}
*html div.slideshow a.advance-link{height:298px;}
div.slideshow a.advance-link:hover, div.slideshow a.advance-link:active, div.slideshow a.advance-link:visited {	text-decoration: none;}
div.slideshow img {	vertical-align: top;}
div.download {	float: right;}
div.caption-container {}
#captions{clear:both; padding:0px 0;}
	#captions div.image-title{padding-top:20px;}
	#caption div.image-desc{padding-bottom:20px;}
div.image-title {	font-size: 11px;	border-bottom:1px #d9d9d9 solid;	padding-bottom:10px;	margin-bottom:10px;	text-transform:uppercase;}
#thumbs{position:relative;}
ul.thumbs {	margin: 0px 1px;	padding: 0;	float:left;	width:403px;}
.pageLink{float:left;}
a.thumb {	padding: 0;	display: inline;	border: none;}
ul.thumbs .selected a.thumb {	color: #000;	font-weight: bold;}
a.thumb:focus {	outline: none;}
ul.thumbs img {	border: none;	display: block;	opacity:0.8;	vertical-align:top;}
.thumbs .selected img, .thumbs a:hover img{opacity:1; }

/* @end */