@import "elements.less";

@width: 960px;
@height: 100px;
.font {font: 15px "HelveticaNeue",Helvetica,Arial,sans-serif; color: #fff;}
.width (@width: 960px) {width: @width;}
.height (@height: 100px) {height: @height;}
h1,h2,h3,h4,h5,h6 {font-weight:normal;}

html, body {
  height: 100%;
}

body {
	margin: 0 auto; 
	padding: 0; 
	.font;
	-webkit-font-smoothing: antialiased;
	font-smoothing: antialiased;
    background: url('../../images/bg-content.jpg') no-repeat center center #040404;
	
	a {
		text-decoration: none;
		img {border:none;}
	}
}

.page-wrap {
  min-height: 100%;
  /* equal to footer height */
  // margin: 0 auto;
  margin-bottom: -166px; 
  // width: 960px;
}
.page-wrap:after {
  content: "";
  display: block;
  /* .push must be the same height as footer */
  height: 166px; 
}


#header {
    height: 75px;
    background: url('../../images/bg-header.jpg') #000;

    .content {
    	.width;
        margin: 0 auto;
        padding: 0;
        
        #logo {
            position: relative;
            top: 5px;
            float: left;
			display:block;
			width:278px;
			height:61px;
			text-indent:-9999px;
			background:url('../../images/logo.png')no-repeat;
        }
		
		#nav {
		    font: 14px "G-Light",Helvetica,Arial,sans-serif;
		    height:75px;
			float: left;
			width:678px;
		    position: relative;
			left: 40px;
			margin: 0;
			padding:0;
    
		    #main_menu {
		        list-style: none;
		        line-height: 50px;
				margin: 0;
				width:100%;
				display:block;
				padding: 15px 0 0 0;
				text-align:right;		
		        .active_select {
		        }
    
		        li {
		            display:inline-block;
		            padding: 0 15px;
		            text-transform: uppercase;
		            position: relative;
			
					&:hover {
						> ul {
							display: block;
						}
					}
			
					&.active a {
		                color: #f36922;
					}
			
					ul {
						display: none;
						background: #000;
						border: 1px solid #333;
						position: absolute;
						z-index: 50;
						top: 40px;
						left: 0;
						list-style: none;
						padding:0;
						margin-left: 15px;
				
						li {
							padding: 0;
					
							a {
								padding: 0 10px;
								width: 150px;
								display: block;
							}
						}
					}
			
		            a {
		                color: #fff;
				
		                &:hover {
		                    color: #f36922;
		                }
		            }
		        }
		    }
		}
    }
}



#main {
	padding: 0; 
	margin: 0 auto;
	
    #breadcrumbs {
		.width;
		margin: 0 auto 15px auto;
		
        ul {
			list-style: none;
	        margin: 15px 15px 15px 0;
	        padding: 0;
        
	        li {
	            float: left;
	            padding: 0 10px 0 15px;
	            background:url('../../images/arrow.jpg') no-repeat center left;
	            font: 10px "G-Book","HelveticaNeue",Helvetica,Arial,sans-serif;
	            text-transform: uppercase;
            
	            &:first-child {
		            padding: 0 10px 0 0!important;
		            background: none;
	            }
            
	            &:last-child a {
	                color: #f36922;
	            }
            
	            a {
	                color: #a6a6a6;
                
	                &:hover {
	                    color: #f36922;
	                }
	            }
	        }
    	}
    }
	
	#page {
		clear: both;
		
		.three-col {
			overflow:hidden;
            
			a {
				color: #f36922;
				
				&:hover {
					text-decoration: underline;
				}
			}
			
			.one-col {
				width: 300px!important;
				margin-left: 30px;
				float: left;
			
				&:first-child {
					margin-left: 0;
				}
			}

	        ul {
	        	width: auto;
				list-style-type: default;
				list-style-image: url(../../images/bullet-orange.png);
				margin: 0;
				padding: 0 0 0 15px;

				li {
			        font: 14px "G-Book","HelveticaNeue",Helvetica,Arial,sans-serif;
					float: none!important;
					margin: 0 0 18px 0;
					padding: 0;
					line-height: 16px;
				}
	        }
		}
		
		
	}
	
	.content {
    	.width;
        margin: 0 auto 40px auto;
        padding: 0;
	}
    
    h1 {
        font: 24px "G-Book","HelveticaNeue",Helvetica,Arial,sans-serif;
        color: #fff;
        text-transform: uppercase;
    }
    
    h2 {
        font: 14px "HelveticaNeue",Helvetica,Arial,sans-serif;
		line-height: 16px;
		font-family: "G-Book","Helvetica Neue",Helvetica,sans-serif;
		font-weight: normal;
		text-transform: uppercase;
    }
    
    p {
        font: 14px "HelveticaNeue",Helvetica,Arial,sans-serif;
		line-height: 16px;
		font-family: "G-Book","Helvetica Neue",Helvetica,sans-serif;
    }
}

#slides {
    margin: 60px 0 0 0;
    position: relative;
    .height(460px);
    
    .slide {
        position: absolute;
        display: none;
		.height(520px);
        
        .text {
            .dim(410px,400px);
            margin-right: 30px;
            float: left;

            h1 {
                font: 45px "G-Bold",Helvetica,Arial,sans-serif;
                color: #fff;
                text-transform: uppercase;
                padding: 0;
                margin: 0;
                .text-shadow(3px,3px,3px,0.5);
            }
            h2 {
                font: 15px "G-Bold",Helvetica,Arial,sans-serif;
                color: #f36922;
                text-transform: uppercase;
                padding: 0;
                margin: 0 0 30px 0;
            }
            p {
                font: 14px "HelveticaNeue",Helvetica,Arial,sans-serif;
                line-height: 15px;
                .width(360px);
            }
        }
        .image {
            .dim(513px,452px);
            float: left;
            position: relative;
            
            .slide_image {
                position: absolute;
                bottom: 50px;
            }
            
            .submit {
                position: absolute;
                bottom: 0;
                right: 0;
            }
        }
    }
    
    #slide_nav {
        .width;
        margin: 0 auto;
        list-style: none;
        overflow: hidden;
        text-align: center;
        position: absolute;
        bottom: 0;
        
        li {
            display: inline-block;
            background: url('../../images/slide-nav.png');
            
            &.active {
                background: url('../../images/slide-nav.png') bottom;
            }
            
            a {
                .dim(12px,12px);
                display: block;

                span {
                    display: none;
                }
            }
        }
    }
}

#accordion {
    .width(961px);
    .height(408px);
	margin: 0;
	padding: 0;

	#accordionWrapper {
	    .width;
	    .height(408px);
	    background: url('../../images/bg-slide.jpg') no-repeat right #868688;
	    float: left;
	    position: relative;

		.accordionLink {
		    .width(49px);
		    .height(408px);
		    float: left;
		    cursor: pointer;
		    background-position: bottom!important;
		    color: #fff;
		    border: 1px solid #333;

		    &#slider-bricks {
		        background: url('../../images/bg-slide-bricks.jpg') no-repeat;
		    }

		    &#slider-monolithics {
		        background: url('../../images/bg-slide-monolithics.jpg') no-repeat;
		    }
    
		    &#slider-ceramic-fiber {
		        background: url('../../images/bg-slide-ceramic-fiber.jpg') no-repeat;
		    }
    
		    &#slider-anchors {
		        background: url('../../images/bg-slide-anchors.jpg') no-repeat;
		    }

		    span {
		        display: none;
		    }
    
		    &:hover,&.active {
		        background-position: top!important;
		    }
		}
		.accordionFrame {
		    display: block;
		    width: 0;
		    height: 408px;
		    float: left;
		    overflow: hidden;
		    border-right: 1px solid #666;
		    background: url('../../images/bg-slide.jpg') no-repeat left #868688;
			
			.content {
				width: 805px;
				padding: 60px 20px;
				position:relative;
				
	            h1 {
	                .text-shadow(3px,3px,3px,0.4);
	                font: 30px "G-Medium",Helvetica,Arial,sans-serif;
	                padding: 0;
	                margin: 0 0 5px 0;
					position: relative;
					z-index: 3;
	            }
			
	            p {
	                .width(300px);
	                color: #000;
					position: relative;
					z-index: 5;
	            }
            
				.dots {
	                margin: 0 0 0 15px;
	            }
				
				.cat-image {
					position: absolute;
					top: 15px;
					right: 20px;
				}
				
			}
		}
	}
}

#modules {
    .width;
    min-height: 260px;
    margin: 0 auto;
	overflow: hidden;
    
    h3 {
        font: 14px "G-Book","HelveticaNeue",Helvetica,Arial,sans-serif;
        text-transform: uppercase;
    }
    
    .module {
        float: left;
	    font: 14px "G-Book",Helvetica,Arial,sans-serif;
        margin: 0 10px;
        position: relative;
        
	    &.two {
            .width(640px);
		}
        
		&.center {
            .width(440px);
        }
        
        &.feed {
			width: 190px;
            
            a {
                color: #f36922;
            }
            
            p {
                text-transform: none;
                font-size: 15px;
            }
            
            ul {
                list-style: none;
                padding-left: 0;
            }
            
            li {
                border-top: 1px solid #333;
            }
        }
        
        &#affiliations {
            .width(210px);
            height: 200px;
			
            .module_tile {
                position: absolute;
				display: none;
				
				.overlay {
		            .width(175px);
					height: 25px;
					position: absolute;
					top: 134px;
					background: #000;
					.opacity(0.7);
			        font: 12px "G-Book","HelveticaNeue",Helvetica,Arial,sans-serif;
					padding: 15px;
					color: #fff!important;
					text-transform: uppercase;
				}
            }
        }
        
        &#company_diary {
            .width(190px);
            
			a {
				color: #fff;
				
				&:hover {
					text-decoration: underline;
				}
			}
			
            ul {
            	width: auto;
				list-style-type: default;
				list-style-image: url(../../images/bullet-orange.png);
				margin: 0;
				padding: 0 0 0 15px;

				&#company_diary_list {
					list-style-type: default;
					list-style-image: url(../../images/bullet-orange.png);
				}

				li {
					float: none!important;
					margin: 0 0 15px 0;
					padding: 0;
					font-size: 12px;
				}
            }
        }
        
        &.bordered {
            border: 1px solid transparent;
            -webkit-border-image:url('../../images/module-vr.png') 1 1 stretch;
            border-image:url('../../images/module-vr.png') 1 1 stretch;
            border-top: 0;
            border-bottom: 0;
            padding: 0 20px;
            text-transform: none;
        }
        
        &.bordered-left {
            border: 1px solid transparent;
            -webkit-border-image:url('../../images/module-vr.png') 1 1 stretch;
            border-image:url('../../images/module-vr.png') 1 1 stretch;
            border-right: 0;
            border-top: 0;
            border-bottom: 0;
            padding: 0 20px;
            text-transform: none;
        }
        
        .module_tile {
            border: 1px solid #494a4b;
        }
        
        .module_nav {
            list-style: none;
            overflow: hidden;
            text-align: center;
            position: absolute;
            top: 0;
            right: 5px;
            
            li {
                display: inline-block;
                background: url('../../images/module-nav.jpg');
            
                &.active {
                    background: url('../../images/module-nav.jpg') bottom;
                }
                
                a {
                    .dim(9px,9px);
                    display: block;
                    
                    span {
                        display: none;
                    }
                }
            }
        }
    }
    
    form {
        .form_col {
            float: left;
            margin-left: 20px;
            
            &:first-child {
                margin-left: 0;
            }
        }
        
        input[type="text"],textarea {
            border: 0;
            background: url(../../images/bg-inputs.png) transparent;
            font-size: 10px;
            color: #9c9c9c;
            .width(200px);
            padding: 4px;
			margin: 0 0 20px 0;
			font-style: italic;
			
        }
        
        textarea {
            .width(220px);
            .height(132px);
        }
		
        input[type="image"] {
            float: right;
        }
    }
}

.products {
    overflow: hidden;
    
    .products_aside {
        .width(205px);
        float: left;
        
        h2,h3 {
            font: 14px "G-Bold","HelveticaNeue",Helvetica,Arial,sans-serif;
            text-transform: uppercase;
            margin: 40px 0 0 0;
            
            &:first-child {
                margin-top: 20px;
                background:url('../../images/hr-dotted.jpg') no-repeat bottom;
                padding: 0 0 10px 0;
            }
        }
        
        img {
            border: 1px solid #656567;
        }
        
		#form_info_request {
			margin-top: 30px;
			
	        input[type="text"],textarea {
	            border: 0;
	            background: url(../../images/bg-inputs.png) transparent;
	            font-size: 10px;
	            color: #9c9c9c;
	            .width(195px);
	            margin-bottom: 20px;
	            padding: 5px;
	        }
        
	        textarea {
	            .height(140px);
	        }
	        input[type="image"] {
	            float: right;
	        }
		}
		
        ul {
            list-style: none!important;
            padding: 0;
			margin: 0;
			
			&#company_diary_list {
				list-style-type: default;
				list-style-image: url(../../images/bullet-orange.png);
				
				li a {
                    background:url('../../images/arrow.jpg') no-repeat center left;
				}
			}
            
			li {
				font-family: Helvetica!important;
                font-size: 12px!important;
                padding: 10px 0;
                background:url('../../images/hr-dotted.jpg') no-repeat bottom;
                
                a {
                    color: #fff;
                    padding-left: 15px;

                    &:hover {
                        color: #f36922;
                        background:url('../../images/arrow.jpg') no-repeat center left;
                    }
                }
            }
        }
    }
    
    .products_list {
        .width(690px);
        float: left;
        padding-left: 15px;
        margin-left: 15px;
        margin-bottom: 25px;
        border-left: 1px solid #684721;
        
        h1,p {
            margin-left: 15px;
        }
        
        .product {
            .dim(200px,260px);
            float: left;
            margin: 30px 15px 0 15px;
    
            h1 {
                text-transform: uppercase;
                font-size: 14px!important;
                margin: 10px 0;
            }
    
            p {
                color: #b3aeae;
                margin: 10px 0;
            }
        
            .product_image {
                border: 1px solid #222;
                width: 200px;
				.rounded(15px);
            }
			
			.product_viewmore {
				// float: right;
			}
        }
    }
    
    .products_view {
        .width(690px);
        float: left;
        padding-left: 15px;
        margin-left: 15px;
        margin-bottom: 25px;
        border-left: 1px solid #684721;
        
        .product_images {
            border: 5px solid #333;
            .width(300px);
            background: #111;
            float: left;
            margin-right: 15px;
            
            .product_image {
                .width(300px);
            }
        
            .thumbs {
                .width(400px);
                list-style: none;
                overflow: hidden;
                
                img {
                    float:left;
                    border: 3px solid #111;
                    
                    &.active {
                        border: 3px solid #333;
                    }
                }
            }
        }
        
        table {
            .width(690px);
            background: #111;
            font-size: 12px;
            
            td {
                padding:5px;
            }
        }
        
        a {
            color: #f36922;
        }
    }
    
    .product_tabs {
        .width(690px);
        padding-top: 40px;
        clear: both;
        
        .tab_titles {
            .height(35px);
            .width(690px);
            
            .tab_title {
                .border-radius(5px,0px,0px,5px);
                background: #333;
                float: left;
                margin: 0 2px;
                
                a {
                    color: #fff;
                    display: block;
                    padding:10px;
                    font-weight: bold;
                }
                
                &.active {
                    background: #111!important;
                }
                
                &:hover {
                    background: #212121;
                }
            }
        }
        
        .tab_contents {
            background: #111;
            height: auto;
            min-height: 300px;
            .width(690px);
            clear:both;
            overflow: hidden;
            
            .tab_content {
                float:left;
                display: none;
                padding: 20px;
                
                &:first-child {
                    display: block;
                }
                
                .drawing {
                    margin:3px;
                }
                
                ul {
                    list-style:none;
                    padding: 0;
                    margin: 0;
                    
                    li {
                        line-height:50px;
                        background: #000;
                        padding: 0 15px;
                        margin-bottom: 15px;
                        .border-radius(5px);
                        font-weight: bold;
                        
                        a {
                            .width(200px);
                            .height(50px);
                            display: block;
                        }
                    }
                }
            }
        }
    }
}

#footer {
    .dim(100%,166px);
    min-width: 960px;
    background:url('../../images/bg-footer.jpg') top center #fff;
    
    .content {
        .width;
        line-height: 16px;
        margin: 0 auto;
        padding-top: 15px;
        position: relative;
        
        #footer-contact {
            .width(390px);
		    font: 10px "G-Book",Helvetica,Arial,sans-serif;
            float: left;
        }
        
        #footer_nav {
            margin-top: 15px;
            float: right;
            position: relative;
			z-index: 5;
			
            ul {
                list-style: none;
                margin: 0 auto;
                padding: 0;
                float: left;
        
                li {
                    float: left;
                    margin: 0 10px;
                    font-size: 10px;
                    padding-bottom: 5px;
                    
                    &.active a {
                        color: #f36922;
                    }
                    
                    &.icon {
                        margin: 0 3px;
                    }
                    
                    a {
                        color: #fff;
                        
                        &:hover {
                            color: #f36922;
                        }
                    }
					
					ul {
						display: none;
					}
                }
            }
        }
        
        #footer_logo {
            .width;
            position: absolute;
            top: 80px;
            text-align: center;
            font-size: 11px;
            color: #4f4e4e;
            
			img {
				margin-right: 10px;
			}
			
            p {
                margin: 0;
            }
            
            a {
                color: #ccc;
            }
        }
    }
}
	
/* clearfix */
.clearfix:after {visibility:hidden; display:block; font-size:0; content: " "; clear:both; height:0;}
* html .clearfix {zoom:1;}
*:first-child+html .clearfix {zoom:1;}

/* font face here */
@font-face {
	font-family: 'G-Light';
	src: url('../fonts/Gotham-Light.eot?') format('eot'), 
	     url('../fonts/Gotham-Light.woff') format('woff'), 
	     url('../fonts/Gotham-Light.ttf')  format('truetype'),
	     url('../fonts/Gotham-Light.svg#svgFontName') format('svg');
}
@font-face {
	font-family: 'G-Book';
	src: url('../fonts/Gotham-Book.eot?') format('eot'), 
	     url('../fonts/Gotham-Book.woff') format('woff'), 
	     url('../fonts/Gotham-Book.ttf')  format('truetype'),
	     url('../fonts/Gotham-Book.svg#svgFontName') format('svg');
}
@font-face {
	font-family: 'G-Medium';
	src: url('../fonts/Gotham-Medium.eot?') format('eot'), 
	     url('../fonts/Gotham-Medium.woff') format('woff'), 
	     url('../fonts/Gotham-Medium.ttf')  format('truetype'),
	     url('../fonts/Gotham-Medium.svg#svgFontName') format('svg');
}
@font-face {
	font-family: 'G-Bold';
	src: url('../fonts/Gotham-Bold.eot?') format('eot'), 
	     url('../fonts/Gotham-Bold.woff') format('woff'), 
	     url('../fonts/Gotham-Bold.ttf')  format('truetype'),
	     url('../fonts/Gotham-Bold.svg#svgFontName') format('svg');
}