@import "styles/reset.css";
@import "styles/fancybox.css";


@spacing: 30px;
@percentSpacing: 2.6%;
@page-width: 1200px;

@link: #607890;
@link-hover: #036;

@light: #f7f8fa;
@orange: #ffb000;
@darkBlue: #025779;
@blue: #0088c3;
@lightBlue: #5bb3ef;
@blueGrey: #eaeff2;

@overlayBlue: rgba(45,77,94,0.8);
@overlayBlueHover: rgba(45,77,94,1);

body { background-color: #f9f9f9; }

#page-wrap { padding: 5px 0 265px 0; }

h1, h2, h3, h4, h5, h6, p, li, td {
    line-height: 1.5em;
}

p, ol, ul { margin-bottom: .8em; }

p, li, td { font-size: 108%; }

sup, sub { 
  line-height: 1em; 
  font-size: 7pt;
  padding: 0 1px;
}

/* Normal is 108%. */
.small { font-size: 100%; }
.x-small { font-size: 93%; }
.xx-small { font-size: 85%; }
.large { font-size: 116%; }
.x-large { font-size: 123.1%; }

th, td { vertical-align: middle; }

h1, .h1,
h2, .h2,
h3, .h3 {
	text-transform: uppercase;
	font-weight: bold;
	margin-bottom: 1em;
}

h1, .h1 { font-size: 200%; }

h2, .h2 { font-size: 167%; }

h2.section-heading{
  font-size: 130%; font-weight: 300; margin-bottom: 6px; text-transform: none; color: @darkBlue; line-height: @spacing - 5px;
}

h3, .h3 { font-size: 116%; }

h4, .h4 { font-size: 116%; font-weight: bold; margin-bottom: .4em; text-transform: none; }

h5, .h5 { font-size: 108%; font-weight: normal; margin-bottom: .8em; text-transform: none; }

a:hover{ 
  color: @darkBlue;
}

.transition_bgColor_height {
    -webkit-transition: background-color 300ms ease-out, height 300ms ease-out ;
    -moz-transition: background-color 300ms ease-out, height 300ms ease-out ;
    -o-transition: background-color 300ms ease-out, height 300ms ease-out ;
    transition: background-color 300ms ease-out, height 300ms ease-out ;
}

.transition_bgColor_height_slow {
    -webkit-transition: background-color 300ms ease-out, height 300ms ease-in ;
    -moz-transition: background-color 300ms ease-out, height 300ms ease-in ;
    -o-transition: background-color 300ms ease-out, height 300ms ease-in ;
    transition: background-color 300ms ease-out, height 300ms ease-in ;
}

.transition_bgColor_height_margin {
    -webkit-transition: background-color 300ms ease-out, height 300ms ease-out, margin 300ms ease-out ;
    -moz-transition: background-color 300ms ease-out, height 300ms ease-out, margin 300ms ease-out ;
    -o-transition: background-color 300ms ease-out, height 300ms ease-out, margin 300ms ease-out ;
    transition: background-color 300ms ease-out, height 300ms ease-out, margin 300ms ease-out ;
}

.transition_visibility {
    -webkit-transition: visibility 300ms ease-out ;
    -moz-transition: visibility 300ms ease-out ;
    -o-transition: visibility 300ms ease-out ;
    transition: visibility 300ms ease-out ;
}

input[type=submit], button[type=submit] {
	font: 9pt 'Open Sans', sans-serif bold;
	color: #050505;
	padding: 4px 12px;
	background: -webkit-gradient(
		linear, left top, left bottom, 
		from(#fff),
		to(#ddd));
	border-radius: 4px;
	border: 1px solid #ccc;
	text-shadow: 0px -1px 1px rgba(255,255,255,0);
}


input[type="text"], input[type="password"], input[type="email"], textarea {
  padding: 5px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font: 10pt 'Open Sans', sans-serif;
}

.page-center {
    position: relative;
    display: block;
    margin: 0 auto;
    max-width: @page-width;
    min-width: 960px;
}

#page-wrap .page-center{
  background: white;
  /*padding: 50px 40px;*/
  padding: 50px @percentSpacing;
  margin-bottom: 50px;
}

.col-container-1{
  position: relative;
  display: block;
  width: 100% + @percentSpacing;
  height: auto;
  padding: @spacing 0 0 0;
  margin: 0 0 0 -@percentSpacing;
}


.col-container-4-3{
  width: (75% );
  height: auto;
  margin: 0 0 0 (25% );
}

.col{
  float: left;
  display: inline-block;
  position: relative;
  margin-left: @percentSpacing;
  margin-bottom: @spacing;
  overflow: hidden;
  
  img{
    padding: 0;
    margin: 0;
    vertical-align: middle;    
  }
  
  .image-holder{
    position: relative;
  }
  
  a{}}

.col-1{
  .col;
  width: 100% - @percentSpacing;
}

.col-2{
  .col;
  width: 50% - @percentSpacing;
}

.col-3{
  .col;
  width: 33.33334 - @percentSpacing;
}

.col-3-2{
  .col;
  width: 66.66667 - @percentSpacing;
}

.col-4{
  .col;
  width: 25% - @percentSpacing;
}

.col-4-3{
  .col;
  width: 75% - @percentSpacing;
}

.col-6{
  .col;
  width: 16.66667 - @percentSpacing;
}

article, .article {
  header { margin-bottom: @spacing / 2; }
  ul, ol {
    margin-left: 1.5 * @spacing;
  }
}

.section-heading{
  width: auto;
}

.col-container-1 >.section-heading, .col-container-4-3 >.section-heading{
  margin-left: @percentSpacing;
}

a.readmore { 
  position: relative;
  width: auto;
  height: 50px;
  z-index: 1;
  padding-left: 40px;
  top: 20px;
  color: #ffb000;
  font-weight: 400;
  font-size: 100%;
  text-transform: uppercase;
  border-top-style: solid;
  border-top-color: #59a6ce;
  border-top-width:3px;
  padding-top: 3px;
  
  &:hover{
    color: #143e6a;
  }
}       	


aside {

  nav { 
    margin-bottom: @spacing;
    width: 280px;
  
  	.submenu {
      margin: 0;
	
      li {
        margin: 5px 0;
		
        &:first-child { margin-top: 0; }
        &:last-child { margin-bottom: 0; }
		
        a {
          display: block;
          padding: 8px @spacing / 2;
          background-color: #f7f8fa;
          font-weight: bold;
          color: #444;
          border-radius: 4px;

          &:hover { 
            color: #ef2839; 
            &.here span { border-bottom: 2px solid #ef2839; }
          }
          
          &.here span { border-bottom: 2px solid #444; }
        }
        
        ul { 
          margin: 5px 0 @spacing / 2 0; 
          
          li {
            padding: 2px @spacing;
          
            a {
              display: inline;
              padding: 0;
              color: #607890;
              font-weight: normal;
              background-color: transparent;
              font-size: 93%;
            
              &:hover { 
                color: #036; 
                &.here span { border-bottom: 2px solid @link-hover; }
              } 	
              
              &.here span { border-bottom: 2px solid @link; }
            }
          }
        }
      }
    } 
  }
}

#header {
  background: url('img/pleat/header-top-repeat-x.jpg') top repeat-x;
  .page-center { 
    margin: 0 auto;
  }
  .header-top{
    height: 159px; 
    width: 100%;
    background: url('img/pleat/header-top-bg.jpg') center top no-repeat;
    overflow: visible;

    .page-center { 
      height: inherit;

      #logo { 
        position: absolute;
        left: 0px; top: 30px;
        width: 120px; height: 112px;
        background: url('img/pleat/pleat_logo.png') center center no-repeat;
      }
      .slogan{
        position: absolute;
        left: 140px; top: 95px;
        width: 340px; height: 112px;
        
        p{
          color: @blue;
          text-transform: uppercase;
          font-weight: 700;
        }
        b{
          font-weight: 400;
          font-size: 130%;
        }
      }
    }
  }  
  .L1-container{

    height: 60px; 
    background: url('img/pleat/header-l1-repeat-x.jpg') top repeat-x;
    -webkit-box-shadow: 0 8px 6px -6px #ccc;
	  -moz-box-shadow: 0 8px 6px -6px #ccc;
	  box-shadow: 0 8px 6px -6px #ccc;

    .L1-menu{
      height: inherit;
      background: url('img/pleat/header-l1-bg.jpg') center top no-repeat;

      .page-center{
    
    	  #menu { 
    	    position: relative;
          border-right: 1px solid #fff;
  	      border-left: 1px solid #bebebe; 
   	      height: 60px;
   	      width: auto;
   	      float: left;
   	      margin-left: 0;

    	    li {
    	      float: left; display: inline-block;
    	      height: inherit;
            border-right: 1px solid #bebebe;
    	      border-left: 1px solid #fff; 
    	      margin: 0;
    	      padding: 0;
            .transition_bgColor_height_slow;
    	      
    	      &:hover{
              background-color: @lightBlue;
              border-left: 1px solid #bebebe;
              .transition_bgColor_height;
 
              a{
        	      color: #fff !important;              

              }
    	      }
    	    }
    	    
    	    a {
    	      display: block;
    	      padding: 0 20px;
    	      font-weight: bold;
    	      color: #6c787e !important;
    	      font-size: 93%;
    	      height: 60px; line-height: 60px;
    	      text-transform: uppercase;
    	      
    	    }
    	    
    	    .here {
            background-color: @blue;
            border-left: 1px solid #bebebe;

            a{
      	      color: #fff !important;              
            }
    	    }
    	  }
    	  
    	  #submenu {
    	    position: absolute;
    	    left: 0; right: 0; bottom: -36px;
    	    height: 35px;
    	    background: rgba(255,255,255,0.75);
    	    border-radius: 0 0 4px 4px;
    	    text-align: center;
    	    
    	    li { 
    	      display: inline-block; 
    	      height: 35px; 
    	    }
    	    
    	    a { 
    	      display: block;
    	      padding: 0 10px;
    	      color: #444657 !important;
    	      font-size: 93%;
    	      height: 35px; line-height: 35px;
    	      text-transform: uppercase;
    	      text-shadow: 0 1px 0 white;
    	      
    	      &:hover { background-color: white; }
    	       
    	    }
        }
      }
    }
  }
}

#footer {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 265px;
  padding: 0;
  background: url('img/pleat/footer-repeat-x.jpg') center top repeat;

  .logo img{ margin-top: @spacing - 5; }

  p { 
    &:first-child { padding: @spacing*1.3 0 10px 0; }
    font-size: 93%;
    margin: 0;
    padding: 0 0 10px 0;
    color: white !important;
    
    a { color: white; }
  }
}

.documents {
  list-style-type: none;
  margin: 0 0 (-@spacing / 2) 0 !important;
    
  li {
    border-radius: 4px;
    padding: 15px;
    margin: 0 0 (@spacing / 2) 0;
    background: #f7f8fa url("../img/icons/icon-unknown.png") no-repeat (@spacing / 2) (@spacing / 2);
    min-height: 64px;
    
    &.pdf { background-image: url("../img/icons/icon-pdf.png"); }
    &.pages { background-image: url("../img/icons/icon-pages.png"); }
    &.doc { background-image: url("../img/icons/icon-doc.png"); }
    &.docx { background-image: url("../img/icons/icon-docx.png"); }
    &.odt { background-image: url("../img/icons/icon-odt.png"); }
    
    h4 { font-size: 100%; margin-left: 64 + @spacing / 2; }
    p { font-size: 85%; margin-left: 64 + @spacing / 2; }
  }
}

.text-overlay{
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 20%;
  color: #fff;
  background-color: @overlayBlue; 
  .transition_bgColor_height;

  p, h1, h2, h3{
    padding: 0 20px;
    margin: 0;
    &:first-child{ padding-top: 10px; }
  }
}

a:hover {
 .text-overlay-1, .text-overlay-3{
    background-color: @overlayBlueHover; 
  }
}

.text-overlay-1{
  .text-overlay;
  height: 100%;
}

.text-overlay-3{
  .text-overlay;
  height: 40%;
}

#canvas{
  position: absolute;
  right: 0;
  top: @spacing;
}
/**
 * Template specific styles
 */
 
.front-page {

  #banner {
  	height: 530px;
  	position: relative;
  	margin: 0 0 0 0;
    pointer-events:none;

    .container{
      width: inherit;
      height: inherit;
      z-index: 1;
      pointer-events:all;

      .slide-title{
        position: absolute;
        left:0;
        top: 100px;
        width: auto;
        z-index: 1;
        margin: 0;
        padding: 20px 20px 5px 40px;
        background-color: rgba(45,77,94,0.8); 
        color: #ffb000;
        font-weight: 800;
        font-size: 330%;
        color: #fff;
        font-weight: 400;
        font-size: 210%;
        text-transform: uppercase;
        text-align: right;
        
        p{
          margin: -10px 0 0 0;
        
          strong{
          white-space: nowrap;
          color: #ffb000;
          font-weight: 800;
          font-size: 180%;
          }
        }
      }
       
      .slide-content{
        position: absolute;
        left:0;
        top: 230px;         
        width: 800px;
        height: 50px;
        z-index: 1;
        
        p{
          color: #fff;
          text-transform: uppercase;
          margin: 0 0 0 30px;
          font-size: 150%;
          text-shadow: 2px 2px 3px #333;

          &:before {
          content: url('img/pleat/triangle.png');
          width: 10px;
          height: 13px;
          margin-left: -30px;
          margin-right: 40px;
          background:  left center no-repeat;
          }         
        }
      }

      a { 
        position: relative;
        width: auto;
        height: 50px;
        padding-left: 40px;
        top: 20px;
        color: #ffb000;
        font-weight: 400;
        font-size: 120%;
        text-transform: uppercase;
        border-top-style: solid;
        border-top-color: #59a6ce;
        border-top-width:3px;
        padding-top: 3px;
        text-shadow: 2px 2px 3px #333;

        &:hover{
          color: #fff;
        }
      }

      img{
        position: absolute;
        height: 530px; width: @page-width;
        background-color: #999;
        pointer-events:all;
      }
    }
  }
  
  .bullets {
    position: relative;
    width: 100%;
    height: 120px;
    margin-top: -120px;
    margin-bottom: 20px;
    z-index: 1000;
    pointer-events:none;
    overflow: hidden;
    
    .bullet{
      position: relative;
      float: left;
      display: block;
      bottom: 0;
      width: 25%;
	  height: inherit;
      
      .wrapper {
      	padding: 10px 10px 20px 20px;
      	background-color: rgba(45,77,94,0.9);
      	margin-left: 1px;
        pointer-events:all;
        margin-top: 10px;
        height: 100%;
        .transition_bgColor_height_margin;
      	
      	a {
        position: relative;
        width: inherit;
        height: inherit;
        pointer-events: all;
        color: #fff;
        font-size: 90%;

        p{
          strong{
            text-transform: uppercase;
            font-weight: 700;
            font-size: 120%;
          }
          margin: 3px;          
        }
      }
      	
      }
      
      &:first-child .wrapper { 
        margin-left: 0;
      }
      
      
      
      &.current .wrapper, &.current:hover .wrapper { 
        background-color: rgba(66,155,215,0.9); 
        margin-top: 0px;
        .transition_bgColor_height_margin;
        
        a {
          pointer-events: all;
          color: #002331;
        }
      }
      
      &:hover .wrapper { 
        .transition_bgColor_height;
        background-color: rgba(45,77,94,1); 
      
        a {
          pointer-events: all;
          color: #fff;
        }
      }
    }
  }
  
  .interactivePresentation{
  
    .presentationInteractive, .presentationContent{
      height: 400px;      
      margin-bottom: 5px;
    }
	.presentationInteractive.loading {
		background-image: url('../img/loader.gif');
		background-repeat: no-repeat;
		background-position: center center;
	}
    .presentationInteractive{
    	overflow: visible;
    
      .wrapper {
      	display: none;
      	position: relative;
      	border: 1px solid @blueGrey;
      	height: 400px;
      	overflow: hidden;
      	
      	video {
	    	position: relative;
	    	z-index: 1;
	    	left: 50%; top: 50%;
	    	margin: -164px 0 0 -171px;  	
      	}
      	
      	.slides-wrapper {
	      	position: absolute;
	      	top:0; left:0; bottom:0; right:0;
	      	z-index: 2;
		  	
		  	ul {
			  	list-style-type: none;
			  	
			  	li {
				  	width: 100%; height: 100%;
				  	
				  	div {display: none;position: absolute;
  				  	&.learnmore{
    				  	font-weight: 800;
    				  	font-size: 150%;
    				  	color: #025779;
    				  	background-color: rgba(255,255,255,.8);
    				  	padding: 5px;
  				  	}  				  	
				  	}
			  	}
		  	}
		  	
      	}
      		
      }
      
      
      #interSlides{
       
        .slides{
          img{
            width: 400px;
            height: 400px;
            margin: 0 0 0 100px;

          }  
        }
        
        .keyLink{
          position: absolute;
          top: 60px;
          left: 70px;
        }
      }
      .ppNav{
        width: 100%;
        height: 60px;
        position: absolute;
        bottom: 0px;
        z-index: 5;
      
      a{
        width: 10%;
        height: 60px;
        opacity: .5;
        pointer-events: all;

        &:hover{
            opacity: 1; 
        }
      }
      .ppNavLeft{
        float: left;         

        text-align: right;
        background: url(../img/pleat/interactive_pp_nav_left.png) right top no-repeat;
      }
      
      .ppNavRight{
        float: right;         

        text-align: left;
        background: url(../img/pleat/interactive_pp_nav_right.png) left top no-repeat;
      }
      
      }
    }

        
    .presentationContent{
      position: relative;
      background: #5e757e; /* Old browsers */
      background: -moz-linear-gradient(top,  #5e757e 0%, #3b515a 100%); /* FF3.6+ */
      background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#5e757e), color-stop(100%,#3b515a)); /* Chrome,Safari4+ */
      background: -webkit-linear-gradient(top,  #5e757e 0%,#3b515a 100%); /* Chrome10+,Safari5.1+ */
      background: -o-linear-gradient(top,  #5e757e 0%,#3b515a 100%); /* Opera 11.10+ */
      background: -ms-linear-gradient(top,  #5e757e 0%,#3b515a 100%); /* IE10+ */
      background: linear-gradient(to bottom,  #5e757e 0%,#3b515a 100%); /* W3C */
      filter: ~`"progid:DXImageTransform.Microsoft.gradient( startColorstr='#5e757e', endColorstr='#3b515a',GradientType=0 )"`; /* IE6-9 */
      
      .content-wrapper {
	      position: absolute;
	      top: 0; right:0; bottom: 0; left: 0;
	      overflow: hidden;
	      
	      .slideContent {
		    
		      .slideContentItem {
			      position: absolute;
			      top:0; right:0; bottom:0; left:0;
			      padding: 35px 27px;
				  display: none;
				  
				  .imageBox{
				    .imageText{
    				  position: absolute;
    				  top:330px;
    				  left:0;
    				  right: 0;
    				  bottom: 0;
  				    background-color: @overlayBlue;
              padding: 8px 20px 6px 30px;
              z-index: 10;
              font-size: 110%;
              /*
              &.entry_1{top:330px;}
              &.entry_2{top:330px;}
              &.entry_3{top:0px;}
              &.entry_4{top:330px;}
              &.entry_5{top:100px;}
              */
				    }
  				  img{
    				  position: absolute;
    				  top:0;
    				  left:0;
  				  }
				  }
				  
				  .infoBox {
					  float:left;
					  width: 45%;
					  color: #fff;
					  font-size: 12px;
					  
					  
					  h4 {
						  font-size: 16px;
						  font-weight: 500;
						  margin-bottom: 12px;
						  letter-spacing: 1.1px;
					  }
					  
					  p {padding: 6px 0;}
					  
					  a {
						  display: inline-block;
						  margin-left: -27px;
						  margin-top: 12px;
						  padding-left: 27px;
						  padding-top: 4px;
						  font-size: 16px;
						  text-transform: uppercase;
						  border-top: 3px solid #5496b8;
					  }
				  }
				  
				  .canvasHolder {
					  float: right;
					  width: 38%;
					  
					  .caption {
						  color: #ffb001;
						  font-size: 100px;
						  font-weight: 600;
						  text-shadow: 0 0 15px rgba(30,30,30,0.6);
						  text-align: right;
						  margin-top: -90px;
						  
						  span {
							  font-size: 50px;
						  }
					  }
					  p {
						  color: #fff;
						  text-transform: uppercase;
						  text-align: right;
					  }
				  }
		      }
		      
		      
	      }

      }
      
      div{
        &.sectionSlide{
          display: none;
        
          .infoBox{
            position: absolute;
            top: 0;
            left: 0;
            width: 250px;
            height: 100%;
            padding: 40px;
            color: #fff;
          }
          .canvasHolder{
            .text{
              position: absolute;
              top: 50px;
              right: 0;
              width: 250px;
              height: 100%;
              color: #fff;
            }
            .graphCanvas{
              padding: 40px; 
            }
          }
        }
        &.current{display:block;}
      }
    }
    
    .link{
      height: 40px;
      background-color: none;

      p{
        text-align: right !important;
        a{
          text-decoration: underline;
        }
      }
    }
  }
  
  .col-3{
  
    a{
  
      .text-overlay-3{
        height: 20%;
        .transition_bgColor_height;

        p{
          display: none;
          &:first-child{
            display: block;
          }
        }
      }
    }

    &:hover{

      a{
        .text-overlay-3{
          height: 40%;
          .transition_bgColor_height;
          
          p{
            display: block;
          }
        }
      }
    }
  }

  .aboutbox { 
  
      img{
        margin: auto;
        min-width: 380px;
        min-height: 320px;
        width: auto;
        height: auto;
      }

    a {
      .text-overlay-1 {
        p{
          margin-top: @spacing/2;
        }
      }
    }
  }  
  
  .newsbox{
    height: 352px;
    overflow: hidden;
    
    li{
      margin: 0;
      list-style: none;
    }

    .news-item{
        width: (@page-width/3);
        height: 40%;
        float: left;

      &:hover {
 
        .text{
          background-color: @blueGrey;
          .transition_bgColor_height;

        }
        .image{
          visibility: visible;
        }        
      }
      
      &.first .image{
        visibility: visible; 
      }
      
      .text{
        width: (@page-width/3);
        height: auto;
        float: left;
          .transition_bgColor_height;        
        h3{
          margin-bottom: 0px;
          margin-top: 20px;
          color: @darkBlue;
          font-size: 100%;
        }
        
        h3, p{
          padding: 0 20px;
        }
      }
      
      .image{
        position: absolute;
        width: (@page-width/3) - @spacing/1.5;      
        right: 0;
        top: 31px;
        visibility: hidden;

        img{
          margin: auto;
          min-width: 100%;
          min-height: 320px;
          width: auto;
          height: auto;
        }

      }
    }
    .archive{
      width: (@page-width/3);
      height: 20%;
      text-align: right;
      
      a{
        margin-right: @spacing/2;        
      }
    }

    .text-overlay-1 p{
      margin-top: @spacing/2;
    }  
  }
} 

.category_pages{
  
  .col-3{
    min-height: 260px;
    max-height: 260px;
    overflow: hidden;
    
    .text-overlay-1{
      h2{
        margin-top: 30px;        
      }
    }
    
      img{
        margin: auto;
        min-width: 380px;
        min-height: 260px;
        width: auto;
        height: auto;
      }

    a{
      width: 100%;
      display: block;
      
      .text-overlay-3{
        height: 20%;
        .transition_bgColor_height;

        p{
          display: none;
          &:first-child{
            display: block;
          }
        }
      }
    }

    &:hover{

      a{
        .text-overlay-3{
          height: 64%;
          .transition_bgColor_height;
          
          p{
            display: block;
          }
        }
      }
    }
  } 
}

.multimedia{

  .sidemenu{
    background-color: #e9e9e9;
    padding-bottom: @spacing*2;
    min-height: 320px;

    &.fixed { /*percentages not 100% sorted*/
      position: fixed;
      top: 0;
      width: 20%;
      margin-left: 1.75%;
      max-width: 276px;
    }    
    
    #nav-sub{
      list-style: none;
      margin: 0;
      width: 100%;
       
     li{
	      float: left; 
	      display: inline-block;
	      height: inherit;
        width: 100%;
	      border-top: 1px solid #fff; 
        border-bottom: 1px solid #bebebe;
        margin: 0;
        padding: 0;

        &:hover, &.parent-here {
          .transition_bgColor_height;
          border-top: 1px solid #bebebe;
          background-color: @lightBlue;

          a{
            color: #fff;
          }

        }

        &.here{
          .transition_bgColor_height;
          background-color: @blue;
          border-top: 1px solid #bebebe;        

          a{
            color: #fff;
          }
        
          &:before {
            position: absolute;
            left: 0;
            margin-top: 16px;
            content: url('img/pleat/triangle.png');
            width: 10px;
            height: 13px;
            background:  left center no-repeat;
          }         
        }
        
       a{
         display: block;
         font-weight: 600;
         text-transform: uppercase;
         font-size: 105%;
         color: #0088c3;
         /*line-height: @spacing*2;*/
         padding: 15px 0 15px 25px;

         
        }
        li{
          border: none;
          margin-left: -25px;
          width: 100% + 25px;      

          &:hover {
            .transition_bgColor_height;
            background-color: @darkBlue;
            border: none;
  
            a{
              color: #fff;
            }
  
          }
  
          &.here{
            .transition_bgColor_height;
            background-color: @blue;
            border: none;

            a{
              color: #fff;
            }
          
            &:before {
              position: absolute;
              left: 0;
              margin-top: 12px;
              content: url('img/pleat/triangle.png');
              width: 10px;
              height: 13px;
              background:  left center no-repeat;
            }         
          }
          a{
            padding: 10px 0 10px 35px;
            font-size: 95%;
            font-weight: 400;    
          }
        }
      }
    }
  }
  #article{

    .image{
    	background-color: #f9f9f9;
      height: 380px;
      width: 100%;
      min-height: 380px;
      max-height: 380px;
      position: relative;
      overflow: hidden;

      img{
        display: block;
        margin: auto;
        min-width: 100%;
        height: auto;
      }    	
      
    	.image-title{
           position: absolute;
           left:0;
           top: 100px;
           width: auto;
           z-index: 1;
           margin: 0;
           padding: 20px 20px 5px 40px;
           background-color: rgba(45,77,94,0.8); 
           color: #ffb000;
           font-weight: 800;
           font-size: 330%;
           color: #fff;
           font-weight: 400;
           font-size: 210%;
           text-transform: uppercase;
           text-align: right;
           
           p{
             margin: -10px 0 5px 0;
             
             strong{
               white-space: nowrap;
               color: #ffb000;
               font-weight: 800;
               font-size: 180%;
            }
          }
        }
        .noCrop{
          position: relative;
          margin: auto;
          min-width: inherit;
          min-height: 380px;
          max-height: 380px;
        }   
      }
      
      .story{
      
        .video{
          margin: 20px auto;
        }

      img{
        margin: 0 0px 20px 0px;
        
        .fullsize{
          width: 100%;
          height: auto;
        }
      }
      
      a:hover{ 
        color: @darkBlue;
        text-decoration: underline;
      }
      
      p{
        clear: both;
        height: auto;
      }
    
      .documents {
        padding: 20px 0;
      }
      
      #gallery {
      	list-style-type: none;
      	margin: 5px 0 -5px -5px;
        padding: 20px 0;
      	  
      	li {
      	  float: left;
      	  margin: 0 0 5px 5px;
      	  height: 106px;
      	  
      	  a{
        	  img{
          	  margin: 0;
        	  }
      	  }
      	}
      }
    }
    
  	.sidebar{
    	float: right;
    	
    	.chart{
    	  position: relative;
        .chartTitle{}

        .chartDesc{
          position: absolute;
          top: 100px; 
          bottom: 0;
          left: 0;
          right: 0;
          z-index: 10;
          text-align: center;
                    
          b, strong{
            font-size: 500%;
            font-weight: 900;
            color: #666;
          }
          p{
            position: absolute;
            bottom: 10px;
          }          
        }

      	#canvas{
        	position: relative;
        	margin-top: -20px;
        	margin-bottom: 90px;
      	}
    	}
    	
      img{
      
        margin: 10px 0;  
        min-height: 0;
        max-width: 100%;

      }
      
    	.image-caption{
    	margin-bottom: 20px;
    	}
    	.sidebarLink{}}
  }
  .col-container-4-3{

    .col-3{
      margin-top: 20px;      

      img{
        margin: auto;
        min-width: 285px;
        min-height: 220px;
        width: auto;
        height: auto;
      }
      
      a{

        .text-overlay{
          .transition_bgColor_height;
          z-index: 1;
          p{}}

        .readMoreImage{
          position: relative;
          z-index: 0;
          opacity: .7;
        }

        &:hover{

          .text-overlay{
            .transition_bgColor_height;
            background-color: @overlayBlueHover;

            p{}}
         .readMoreImage{opacity: 1;}
          
        }          
      }
    }
  }
}

.article-listing {
  .lesmer{padding-top: 20px;}
}


.article {

  .archive{
    position: absolute;
    top: -@spacing;
  }

	.image-title{
       position: absolute;
       left:0;
       bottom: 0px;
       width: auto;
       z-index: 1;
       margin: 0;
       padding: 20px 20px 5px 40px;
       background-color: rgba(45,77,94,0.8); 
       color: #ffb000;
       font-weight: 800;
       font-size: 330%;
       color: #fff;
       font-weight: 400;
       font-size: 150%;
       text-transform: uppercase;
       text-align: left;
       
       p{
         margin: 10px 0 0 0;
         line-height: 130%;
         padding-bottom: 10px;
         
         strong{
           white-space: nowrap;
           color: #ffb000;
           font-weight: 800;
           font-size: 120%;
         }
      }
	}

  figure {
    position: relative;
    margin-bottom: @spacing - 5;

    background-color: #f9f9f9;
    height: 380px;
    width: 100%;
    min-height: 380px;
    max-height: 380px;
    position: relative;
    overflow: hidden;    
  	  
	&.image { 
	  max-height: 380px; 
    }
  	  
  	
	figcaption {
  	  position: absolute;
  	  bottom: 0; left: 0; right: 0;
  	  background-color: rgba(255,255,255,0.8);
  	  padding: @spacing / 2;
  	}
  	  
  	img { 
  	  height: 380px; 
      display: block;
      margin: auto;
      min-width: 100%;
      height: auto;    
  	  
  	}
  }
  
  aside #articles article{
    padding-bottom: @spacing;
    
    a{
      img{
    	  height: 140px; 
        display: block;
        margin: auto;
        min-width: 100%;
        height: auto;     
        margin-bottom: 20px;       
      }
    }
    
  }
    
  aside #gallery {
  	list-style-type: none;
  	margin: 5px 0 -5px -5px;
  	  
  	li {
  	  float: left;
  	  margin: 0 0 5px 5px;
  	  height: 90px;
  	}
  }

  #article {
  	float: left;
  	
  	h1 { margin-bottom: 0.5em; }
  	
    div img, p img { margin-left: 15px; }
  	
  	
  	#gallery {
  	  list-style-type: none;
  	  margin: @spacing 0 (-@spacing / 2) (-@spacing / 2);
  	  
  	  li {
  	    float: left;
  	    margin: 0 0 (@spacing / 2) (@spacing / 2);
  	    height: 106px;
  	  }
  	}
  }
} 

 
 
.people {

  .people-list { margin-bottom: -@spacing; }

  .person {
    float: left;
    width: (@page-width - @spacing * 3) / 2 - @spacing * 2 - 135px; height: 105px;
    padding: @spacing @spacing @spacing (135 + @spacing);
    background-color: #f7f8fa;
    border-radius: 4px;
    margin-bottom: @spacing;
    box-shadow: 0px 0px 1px #ccc;
    
    img { 
      float: left;
      margin: -@spacing 0 0 -(135px + @spacing);
      border-radius: 4px 0 0 4px;
    }
  }
  .person:nth-child(odd) { margin-right: @spacing; }
}



.multiple-maps {

  #map_canvas { 
    float: left; 
    position: relative;
    height: 400px; width: 280px; 
    z-index: 30 !important; 
  }

  #locations {
    list-style: none; 
    width: 280px;
    float: left;
    margin: 0 @spacing 0 0;
    
    li {  
      width: 960px - 3 * @spacing;
      padding: @spacing / 2; 
      float: left; 
      position: relative; 
      z-index: 20; 
      
      h3, p { width: 265px; }
      p { font-size: 10pt; margin: 0; }
    }
  }

h1 { margin: 0 0 15px 0; }
h2 { margin: 0 0 15px 0; }
h3 { margin: 0 0  1px 0; }


#locations li:hover, #locations li.hover { background: @light url(../img/multiple-maps-background.png) center top repeat-y; }
#locations li:hover h3, #locations li.hover h3 { color: #ef2839; text-shadow: 0 1px 0px rgba(255,255,255,0.3); }



#more-info { width: 250px; float: right; background: @light; padding: @spacing / 2; height: 370px; }
#more-info * { position: relative; z-index: 40; }
.longdesc { display: none; }

  .information {
    margin-bottom: @spacing; 
    
    img { 
      float: right; 
      margin-left: @spacing; 
    }
  }

}




.contact {
    
    #contact-form {

        input[type="text"], input[type="email"], textarea {
            display: block;
            width: 250px;
            margin-bottom: @spacing / 2;
        }
    
        textarea {
            min-width: 423px;
            max-width: 423px;
            min-height: 150px;
        }
    
    }
    
    .left {
        float: left;
        width: 435px;
        
        .information {
            margin-bottom: @spacing;
            
            img { display: block; margin-bottom: @spacing; }
        }
    }
    
    .right {
        float: right;
        width: 435px;
        
        #map-canvas {
            width: 435px;
            height: 510px;
            margin-bottom: @spacing;
        }
    }

}


.product-listing {

    aside { float: left; }

    div.product-thumb {
        display: -webkit-box;
        width: 135px;
        height: 135px;
        -webkit-box-orient: horizontal;
        -webkit-box-pack: center;
        -webkit-box-align: center;
    }

    #products.icons {
    
        div.product-thumb {
            width: 135px;
            height: 135px;
        }
    
        ul { list-style: none; margin: 0 0 -15px 0; }
        
        li { float: left; width: 135px; margin-right: 15px; }
    
    	h3 { text-align: center; }
    }
    
    
    #page-wrap header { margin-bottom: @spacing; }

    
    #products.list {    
    
        div.product-thumb {
            width: 60px;
            height: 60px;
        }
    
        ul { list-style: none; margin: 0 0 -15px 0; 
            
            li {
                padding: 10px 0 10px 0;
                border-top: 2px solid #f2f2f2;
                min-height: 60px;
            
                &:first-child { border: none; }
            
                .product-thumb {
                    float: left;
                    padding-right: 10px;
                }            
            
                h3 {
                    margin: 0;
                    text-transform: none;
                    font-size: 11pt;
                }
            
                p.meta { 
                    font-size: 8pt;
                    
                    .categories {
                        font-weight: bold;
                    
                        span { font-weight: normal; }
                        span:before { content: ','; }
                        span:first-child:before { content: ''; }
                    }
                     
                }
            
            }
        
        }   

    }
    
    #products.categories, #products.menu { margin-left: 280px + @spacing; }
    

}


.product {

	.gallery { float: left; width: 280px; }
	
	#product-image {
    	display: -webkit-box;
    	margin-bottom: 15px;
    	width: 280px;
   		height: 400px;
		-webkit-box-orient: horizontal;
		-webkit-box-pack: center;
		-webkit-box-align: center;	
	}
	.product-thumb {
		float: left;
		margin-right: 16px;
    	display: -webkit-box;
    	width: 58px;
   		height: 58px;
		-webkit-box-orient: horizontal;
		-webkit-box-pack: center;
		-webkit-box-align: center;	
	}
	
	#price { font-weight: bold; font-size: 125%; }

    table {
        width: 590px;
    
        th { text-align: left; }
        
        th, td {
            width: 50%;
            padding: 5px;
            border: 1px solid #eee;
        }
        
        tr.odd th, tr.odd td { background-color: #f8f8f8; }
    
    }
    
    .info { margin: 0 0 0 310px; }
    .description, .parameters, .documents { margin-bottom: @spacing; }
    h1 { margin: 0; }
                        
    .categories {
        font-weight: bold;
        font-size: 8pt;
        margin-bottom: @spacing;
            
        span { font-weight: normal; }
        span:before { content: ','; }
        span:first-child:before { content: ''; }
    }

}





.search {

    #page-wrap {
        .search-box {
            text-align: center; 
            margin-bottom: @spacing;
            input[name=keywords] { width: 450px; }
        }
    }

    #search-results {
        list-style-type: none;
        margin: 0 0 -@spacing 0;

        h3 { 
            /* reset */
            text-transform: none; 
            margin-bottom: 0;
            
            
        }
        
        li { 
            margin-bottom: @spacing; 
        
            a.display-url { display: block; }    
        }
            
    }
    
    .pagination { 
        padding-top: @spacing;
        text-align: center; 
    }

}


.reference-listing {
    
    ul#references.list {
        list-style: none;
        margin: 0 0 -@spacing 0;
        
        li { margin-bottom: @spacing; }
        
        ul.gallery {
            list-style: none;
            margin: 0 -5px -5px 0;
            width: 285px;
            float: left;
            
            li {
                float: left;
                margin: 0 5px 5px 0;
                
                img { display: block; border-radius: 4px; }
            }
        }
        
        article { margin-left: 310px; }
        
    }
    
    ul#references.skim {
        list-style: none;
        margin: 0 -@spacing -@spacing 0;
        
        li { 
            float: left;
            width: 280px;
            margin: 0 @spacing @spacing 0; 
        }
        
        ul.gallery {
            list-style: none;
            margin: 0;
            height: 210px;
                            
            img { display: block; border-radius: 4px; }
        }
                
    }
    
}

#signature{
    position: relative;
    
    bottom: -18px;
    text-align: right;

    a{
        color:#666;
	&:hover{color:#999;}
    }
}