/*--------------------------------------------------
Author: Andrea Ravizzola

[Layout]

* body
	+ Main / #main
		- Container / #container
			- Content / #content
	+ Sidebar / #sidebar
		- Navigation / .navigation
	+ Bgwide / #bgwide

* Colors:
	- giallo / #FFDC00 (255,220,0)
	- marrone / #35201D (53,32,29)
	- bistre / #3D2B1F (61,43,31)

* Fonts:
	- body: Arial, sans-serif;
	- navigation: Arimo, Arial, sans-serif
--------------------------------------------------*/

/******************** basic elements ********************/
body{font-family: Arial, sans-serif;font-size: 12px;line-height: 16px;color: #FFF;background: #3D2B1F url(../images/body_bg.png) repeat-x center center;}
h1,h2,h3,h4,h5,h6,p{font-weight: normal;}
a{text-decoration: none;color: #FFF;}
/******************** basic elements ********************/

/******************** basic layout ********************/
html,body,#bgwide,#main{height: 100%;width: 100%;overflow: hidden;}
#main{position: absolute;top: 0;left: 0;overflow: auto;z-index: 5;}
#container{width: 500px;position: absolute;top: 0;right: 200px;color: #000;}
@media only screen and (max-width: 1260px){#container{right: 68px !important;}}
#sidebar{width: 100%;position: fixed;height: 72px;bottom: 10px;z-index: 10;}
#bgwide{position: absolute;top: 0;left: 0;overflow: hidden;z-index: 1;}
/******************** basic layout ********************/

/******************** container ********************/
#container{}
#container #content{width: 420px;padding: 80px 40px;background: url(../images/container_bg.png) repeat-y 0 0;margin: 40px 0;}
#container h3{font-size: 12px;line-height: 16px;text-transform: uppercase;font-weight: bold;margin: 0 0 10px;}
#container p{font-size: 12px;line-height: 16px;text-align: justify;}
#container .line{background-color: #FFF;display: block;clear: both;height: 1px;width: 420px;margin: 40px 0 30px;}
#container .text{margin: 20px 0;}
#container .gallery{height: 255px;}
#container .gallery a img{display: block;}
#container .gallery .left{float: left;}
#container .gallery .right{float: right;}
#container .mb{margin-bottom: 5px;}
#container .mr{margin-right: 5px;}
/******************** container ********************/

/******************** sidebar ********************/
#sidebar{background: url(../images/sidebar_bg.png) repeat-x 0 0;}
#sidebar h1{width: 103px;height: 16px;text-indent: -99999px;background: url(../images/knindustrie.png) no-repeat 0 0;position: absolute;bottom: 9px;left: 20px;}
#sidebar h1 a{width: 182px;height: 28px;display: block;}

.navigation{position: absolute;top: 0;left: 143px;font-family: 'Arimo', Arial, sans-serif;}
.navigation ul{width: 128px;height: 67px;border-left: 1px solid #333;border-right: 1px solid #333;padding: 5px 0 0 10px;position: absolute;top: 0;left: 0;}
.navigation ul.sub{width: 109px;border-left: none;left: 140px;}
.navigation li{font-size: 10px;line-height: 14px;text-transform: uppercase;margin: 0 0 2px;}

.navigation ul.products{width: 300px;}
.navigation li.first{}
.navigation li.second{margin-left: 100px;}
.navigation li.third{margin-left: 200px;}
.navigation li.reset{margin-top: -64px;}

.navigation li a{color: #FFF;}
.navigation li a:hover{color: #FFDC00;}
.navigation li.current_page a,.navigation li.current_page_parent a{color: #FFDC00;}
.navigation li.current_page ul.sub a,.navigation li.current_page_parent ul.sub a{color: #FFF;}
.navigation ul.sub li.current_page a,.navigation li ul.sub a:hover{color: #FFDC00;}
/*.webshop{position: absolute;top: 5px;left: -70px;}*/

/*#floor{position: absolute;width: 114px;top: 0;right: 100px;}
#floor a{width: 114px;height: 60px;display: block;background: url(../images/the-floor.png) no-repeat center center;text-indent: -99999px;position: absolute;top: 6px;}*/
#floor{position: absolute;width: 109px;top: 0;right: 100px;}
#floor a{width: 109px;height: 70px;display: block;background: url(../images/the-floor.png) no-repeat center center;text-indent: -99999px;position: absolute;}
#italiancousine{width: 265px;height: 156px;display: block;position: fixed;left: 20px;top: 40px;}
#italiancousine h1{width: 265px;height: 156px;display: block;background-image: url(../images/italian-cousine.png);text-indent: -99999px;}

.language{position: absolute;width: 80px;top: 0;right: 10px;font-family: 'Arimo', Arial, sans-serif;}
.language ul{width: 80px;height: 28px;border-left: 1px solid #333;border-right: 1px solid #333;padding: 5px 0 0 10px;position: relative;top: 0;left: 0;}
.language li{font-size: 10px;line-height: 14px;text-transform: uppercase;margin: 0 0 2px;}
.language li a{color: #FFF;}
.language li a:hover{color: #FFDC00;}
.language li.current_page a{color: #FFDC00;}
/******************** sidebar ********************/

/******************** home ********************/
.home{}
.home #container{width: 710px;position: absolute;top: 0;right: 200px;color: #000;}
.home #container #content{width: 630px;padding: 40px;background: none !important;color: #FFF;margin: 40px 0;}
.home #archive{}
.home #archive li a{width: 100%;height: auto;display: block;}
.home #archive li img{width: 100%;height: auto;display: block;}
/******************** home ********************/

/******************** products ********************/
.products{}
.products #container #content{background: url(../images/container_bg_dark.png) repeat-y 0 0;color: #FFF;padding: 40px 40px;margin: 40px 0 80px;}
.products #container ul{}
.products #container li{width: 420px;height: 160px;text-indent: -99999px;}
.products #container li a{width: 420px;height: 160px;display: block;background-position: 0 0;background-repeat: no-repeat;}
.products #container li a:hover{background-position: 0 -160px;}

.products #container li.foodwear a{background-image: url(../images/foodwear.jpg);}
.products #container li.inossidabile a{background-image: url(../images/inossidabile.jpg);}
.products #container li.abct a{background-image: url(../images/abct.jpg);}
.products #container li.glocal a{background-image: url(../images/glocal.jpg);}
.products #container li.whitepot a{background-image: url(../images/whitepot.jpg);}
.products #container li.silicone a{background-image: url(../images/silicone.jpg);}
.products #container li.beyond-basic a{background-image: url(../images/beyond-basic.jpg);}
.products #container li.eat-big a{background-image: url(../images/eat-big.jpg);}
.products #container li.zest a{background-image: url(../images/zest.jpg);}
.products #container li.art-collection a{background-image: url(../images/art-collection.jpg);}
.products #container li.kn-pro a{background-image: url(../images/kn-pro.jpg);}
.products #container li.same-same-but-different a{background-image: url(../images/same-same-but-different.jpg);}

.products #container li.foodwear_en a{background-image: url(../images/foodwear_en.jpg);}
.products #container li.inossidabile_en a{background-image: url(../images/inossidabile_en.jpg);}
.products #container li.abct_en a{background-image: url(../images/abct_en.jpg);}
.products #container li.glocal_en a{background-image: url(../images/glocal_en.jpg);}
.products #container li.whitepot_en a{background-image: url(../images/whitepot_en.jpg);}
.products #container li.silicone_en a{background-image: url(../images/silicone_en.jpg);}
.products #container li.beyond-basic_en a{background-image: url(../images/beyond-basic_en.jpg);}
.products #container li.eat-big_en a{background-image: url(../images/eat-big_en.jpg);}
.products #container li.zest_en a{background-image: url(../images/zest_en.jpg);}
.products #container li.art-collection_en a{background-image: url(../images/art-collection_en.jpg);}
.products #container li.kn-pro_en a{background-image: url(../images/kn-pro_en.jpg);}
.products #container li.same-same-but-different_en a{background-image: url(../images/same-same-but-different_en.jpg);}

.products #sidebar{background: url(../images/sidebar_bg_80.png) repeat-x 0 0;}

#menu{clear: both;border-bottom: 1px solid #FFF;margin: -80px -40px 80px;display: block;width: 500px;height: 30px;text-align: center;}
#menu li{display: inline;font-family: 'Arimo', Arial, sans-serif;font-size: 10px;line-height: 32px;text-transform: uppercase;margin: 0 20px 0 0;}
#menu li a{color: #999;}
#menu li a:hover{color: #FFDC00;}
/******************** products ********************/

/******************** foodwear ********************/
.foodwear{}
.foodwear #menu{border-color: #8B6244;}
.foodwear #menu li a{color: #8B6244;}
.foodwear #menu li a:hover{color: #333;}
.foodwear #container{color: #8B6244;}
.foodwear #container .line{margin: 20px 0;}
.foodwear #content #archive{clear: both;}
.foodwear #archive li{margin: 0 0 10px;}
.foodwear #archive li a{width: 100%;height: auto;display: block;}
.foodwear #archive li img{width: 100%;height: auto;display: block;}
/******************** foodwear ********************/

/******************** inossidabile ********************/
.inossidabile{}
.inossidabile #menu{border-color: #0F1D64;}
.inossidabile #menu li a{color: #0F1D64;}
.inossidabile #menu li a:hover{color: #333;}
.inossidabile #container{color: #0F1D64;}
.inossidabile #content #archive{clear: both;}
.inossidabile #archive li{margin: 0 0 10px;}
.inossidabile #archive li a{width: 100%;height: auto;display: block;}
.inossidabile #archive li img{width: 100%;height: auto;display: block;}
/******************** inossidabile ********************/

/******************** abct ********************/
.abct{}
.abct #menu{border-color: #999;}
.abct #menu li a{color: #999;}
.abct #menu li a:hover{color: #333;}
.abct #container{color: #666;}
.abct #container p{margin: 20px 0;}
.abct #container .line{margin: 20px 0;}
.abct #content #archive{clear: both;}
.abct #archive li{margin: 0 0 10px;}
.abct #archive li a{width: 100%;height: auto;display: block;}
.abct #archive li img{width: 100%;height: auto;display: block;}
/******************** abct ********************/

/******************** glocal ********************/
.glocal{}
.glocal #menu{border-color: #73311F;}
.glocal #menu li a{color: #73311F;}
.glocal #menu li a:hover{color: #333;}
.glocal #container{color: #73311F;}
.glocal #content #archive{clear: both;}
.glocal #archive li{margin: 0 0 10px;}
.glocal #archive li a{width: 100%;height: auto;display: block;}
.glocal #archive li img{width: 100%;height: auto;display: block;}
/******************** glocal ********************/

/******************** whitepot ********************/
.whitepot{}
.whitepot #menu{border-color: #868789;}
.whitepot #menu li a{color: #868789;}
.whitepot #menu li a:hover{color: #333;}
.whitepot #container{color: #868789;}
.whitepot #content #archive{clear: both;}
.whitepot #archive li{margin: 0 0 10px;}
.whitepot #archive li a{width: 100%;height: auto;display: block;}
.whitepot #archive li img{width: 100%;height: auto;display: block;}
/******************** whitepot ********************/

/******************** silicone ********************/
.silicone{}
.silicone #menu{border-color: #A0A0A0;}
.silicone #menu li a{color: #A0A0A0;}
.silicone #menu li a:hover{color: #333;}
.silicone #container{color: #A0A0A0;}
.silicone #content #archive{clear: both;}
.silicone #archive li{margin: 0 0 10px;}
.silicone #archive li a{width: 100%;height: auto;display: block;}
.silicone #archive li img{width: 100%;height: auto;display: block;}
/******************** silicone ********************/

/******************** beyond-basic ********************/
.beyond-basic{}
.beyond-basic #menu{border-color: #646464;}
.beyond-basic #menu li a{color: #646464;}
.beyond-basic #menu li a:hover{color: #333;}
.beyond-basic #container{color: #646464;}
.beyond-basic #content #archive{clear: both;}
.beyond-basic #archive li{margin: 0 0 10px;}
.beyond-basic #archive li a{width: 100%;height: auto;display: block;}
.beyond-basic #archive li img{width: 100%;height: auto;display: block;}
/******************** beyond-basic ********************/

/******************** eat-big ********************/
.eat-big{}
.eat-big #menu{border-color: #0C104B;}
.eat-big #menu li a{color: #0C104B;}
.eat-big #menu li a:hover{color: #000;}
.eat-big #container{color: #0C104B;}
.eat-big #content #archive{clear: both;}
.eat-big #archive li{margin: 0 0 10px;}
.eat-big #archive li a{width: 100%;height: auto;display: block;}
.eat-big #archive li img{width: 100%;height: auto;display: block;}
/******************** eat-big ********************/

/******************** kn-pro ********************/
.kn-pro{}
.kn-pro #menu{border-color: #868789;}
.kn-pro #menu li a{color: #868789;}
.kn-pro #menu li a:hover{color: #333;}
.kn-pro #container{color: #868789;}
.kn-pro #content #archive{clear: both;}
.kn-pro #archive li{margin: 0 0 10px;}
.kn-pro #archive li a{width: 100%;height: auto;display: block;}
.kn-pro #archive li img{width: 100%;height: auto;display: block;}
/******************** kn-pro ********************/

/******************** zest ********************/
.zest{}
.zest #menu{border-color: #3C3C3E;}
.zest #menu li a{color: #3C3C3E;}
.zest #menu li a:hover{color: #000;}
.zest #container{color: #3C3C3E;}
.zest #content #archive{clear: both;}
.zest #archive li{margin: 0 0 10px;}
.zest #archive li a{width: 100%;height: auto;display: block;}
.zest #archive li img{width: 100%;height: auto;display: block;}
/******************** zest ********************/

/******************** art-collection ********************/
.art-collection{}
.art-collection #menu{border-color: #3C281D;}
.art-collection #menu li a{color: #3C281D;}
.art-collection #menu li a:hover{color: #000;}
.art-collection #container{color: #3C281D;}
.art-collection #content #archive{clear: both;}
.art-collection #archive li{margin: 0 0 10px;}
.art-collection #archive li a{width: 100%;height: auto;display: block;}
.art-collection #archive li img{width: 100%;height: auto;display: block;}
/******************** art-collection ********************/

/******************** same-same-but-different ********************/
.same-same-but-different{}
.same-same-but-different #menu{border-color: #868789;}
.same-same-but-different #menu li a{color: #868789;}
.same-same-but-different #menu li a:hover{color: #333;}
.same-same-but-different #container{color: #868789;}
.same-same-but-different #content #archive{clear: both;}
.same-same-but-different #archive li{margin: 0 0 10px;}
.same-same-but-different #archive li a{width: 100%;height: auto;display: block;}
.same-same-but-different #archive li img{width: 100%;height: auto;display: block;}
/******************** same-same-but-different ********************/

/******************** network ********************/
.network{}
.network #sidebar{background: url(../images/sidebar_bg_80.png) repeat-x 0 0;}
.network #sidebar .navigation ul.sub{width: 129px;}

.network #container #content{background: url(../images/sidebar_bg_80.png) repeat scroll 0 0 transparent;}
.network #content h1{color: #FFF;font-size: 60px;font-weight: bold;text-transform: uppercase;}
.network #archive li{margin: 0 0 10px;}
.network #archive li a{width: 100%;height: auto;display: block;}
.network #archive li img{width: 100%;height: auto;display: block;}
/******************** network ********************/

/******************** made-in-kni ********************/
.made-in-kni{}
.made-in-kni #container #content{padding: 40px;margin: 40px 0;background: url(../images/container_bg_yellow.png) repeat 0 0;color: #000;}
.made-in-kni #content h1{width: 420px;height: 38px;text-indent: -99999px;background: url(../images/made-in-kni/made-in-kni.png) no-repeat 0 0;margin: 0 0 16px;}
.made-in-kni #content p{margin: 0 0 20px;}
.made-in-kni #container ul{}
.made-in-kni #container li{width: 420px;text-indent: -99999px;}
.made-in-kni #container li a{width: 420px;display: block;background-position: 0 0;background-repeat: no-repeat;}

.made-in-kni #container li.storia{height: 200px;}
.made-in-kni #container li.storia a{height: 200px;background-image: url(../images/storia.jpg);}
.made-in-kni #container li.storia_en a{height: 200px;background-image: url(../images/storia_en.jpg);}
.made-in-kni #container li.storia a:hover{background-position: 0 -200px;}
.made-in-kni #container li.storia_en a:hover{background-position: 0 -200px;}

.made-in-kni #container li.dordoni{height: 200px;}
.made-in-kni #container li.dordoni a{height: 200px;background-image: url(../images/kncollaborazioni.jpg);}
.made-in-kni #container li.dordoni a:hover{background-position: 0 -200px;}
.made-in-kni #container li.dordoni_en{height: 200px;}
.made-in-kni #container li.dordoni_en a{height: 200px;background-image: url(../images/kncollaborazioni_en.jpg);}
.made-in-kni #container li.dordoni_en a:hover{background-position: 0 -200px;}
/******************** made-in-kni ********************/

/******************** contacts ********************/
.contacts{}
.contacts #container #content{padding: 40px;margin: 40px 0;background: url(../images/sidebar_bg_80.png) repeat 0 0;color: #CCC;}
.contacts #content h1{width: 215px;height: 44px;text-indent: -99999px;background: url(../images/kni-contacts.png) no-repeat 0 0;margin: 0 0 16px;}
.contacts #sidebar{background: url(../images/sidebar_bg_80.png) repeat-x 0 0;}

.contacts #container{right: 80px;top: 50%;margin-top: -240px;}
.contacts #container #content{width: 310px;height: 310px;text-align: center;padding: 0;margin: 0;background: url(../images/container_bg_circle.png) repeat 0 0;position: absolute;right: 0;top: 40px;}
.contacts #container #content h1{padding: 80px 0 0;margin: 0;width: 310px;background-position: 20px 80px;margin: 0 0 10px;}
.contacts #container #content p{font-size: 13px;line-height: 16px;text-align: center;}
.contacts #container #content p span{font-size: 11px;}
/******************** contacts ********************/

/******************** history ********************/
.history{}
.history #container #content{padding: 40px;margin: 40px 0;background: url(../images/container_bg_dark.png) repeat-y 0 0;color: #CCC;}
.history #content h1{width: 170px;height: 44px;text-indent: -99999px;background: url(../images/kni-storia.png) no-repeat 0 0;margin: 0 0 16px;}
.history #content h1.en{width: 185px;height: 50px;background: url(../images/kni-storia_en.png) no-repeat 0 0;margin: 0 0 10px;}
.history #content h3{color: #FFDC00;}
.history #content p{margin: 0 0 20px;}
.history #archive li{margin: 0 0 10px;}
.history #archive li a{width: 100%;height: auto;display: block;}
.history #archive li img{width: 100%;height: auto;display: block;}
/******************** history ********************/

/******************** collaboration ********************/
.collaboration{}
.collaboration #container #content{padding: 40px;margin: 40px 0;background: url(../images/container_bg_dark.png) repeat-y 0 0;color: #CCC;}
.collaboration #content h1{width: 310px;height: 44px;text-indent: -99999px;background: url(../images/kni-collaborazioni.png) no-repeat 0 0;margin: 0 0 16px;}
.collaboration #content p{margin: 0 0 20px;}
/******************** collaboration ********************/

/******************** dordoni ********************/
.dordoni{}
.dordoni #container #content{padding: 40px;margin: 40px 0;/*background: url(../images/container_bg_yellow.png) repeat 0 0;*/border: 1px solid #EEE;color: #000;}
.dordoni #content h1{/*width: 420px;height: 175px;text-indent: -99999px;background: url(../images/made-in-kni/rodolfo-dordoni/rodolfo-dordoni.png) no-repeat 0 0;margin: 0 0 10px;*/font-size: 45px;text-transform: uppercase;font-weight: bold;color: #000;line-height: 50px;}
.dordoni #content p{margin: 0 0 20px;}
.dordoni #content p.link{font-size: 40px;text-align: center;font-weight: bold;}
.dordoni #content p.link a{color: #000;}
.dordoni #archive li{margin: 0 0 10px;}
.dordoni #archive li a{width: 100%;height: auto;display: block;}
.dordoni #archive li img{width: 100%;height: auto;display: block;}
/******************** dordoni ********************/

/******************** blog ********************/
.blog .navigation ul{border-left: 1px solid #999;border-right: 1px solid #999;}
.blog .comingsoon{width: 240px;height: 72px;text-indent: -99999px;background-image: url(../images/coming-soon.png);position: absolute;right: 120px;}
/******************** blog ********************/

 
/******************** MOBILE & TABLET ********************/
@media screen and (max-width: 768px) {
	#container {margin-top:230px;}
	.home #container {margin-top:60px;}
	#bgwide, #kni {display:none;}
	#container, .home #container { width:100%; position:relative; padding:0; right:auto !important;}
	#container #content, .home #container #content {width:95%; margin:0 auto; padding:0; background-repeat:repeat;}
	#sidebar {top:0;}
	
	#container .gallery a img {margin: 0 auto;}
	.navigation ul.products {
		display: block;
		left: 0;
		position: absolute;
		top: 70px;
		width: 300px;
	}
}