@import url("reset.css");
/*
azienda		blu chiaro		d8e7f2
azienda		blu				97c2dd
azienda		blu scuro		76afd2

crudo		verde chiaro	e2edd7
crudo		verde			71b75d
crudo		verde scuro		45a12a

cotto		rosso chiaro	f5d3d4
cotto		rosso			d8595d
cotto		rosso scuro		cc252a

mosaico		arancione chi	fee8d2
mosaico		arancione		f29e4e
mosaico		arancione scuro	ee8016

vetro		acqua chiaro	e2f3ec
vetro		acqua			91d3b7
vetro		acqua scuro		6fc5a1

extra		grigio chiaro	e5e9ec
extra		grigio			a1adb4
extra		grigio scuro	83939c

news		indaco chiaro	caceda
news		indaco			606c86
news		indaco scuro	868fa3
*/

body {
	padding: 30px 0;
	font-family: Lucida Grande, Verdana, Arial, sans-serif;
    font-size: 15px;
	
}
.clear {
	clear: both;
}
p {
	color: #666;
	padding: 10px 20px 0 0;
}
a {
	color: #97c2dd;
	text-decoration: none;
}
a:hover, #menu .sel {
	color: #76afd2;
}
strong {
	font-weight: bold;
}
body {
	background: #d8e7f2;
}
body.crudo {
	background: #e2edd7;
}
body.cotto {
	background: #f5d3d4;
}
body.mosaico {
	background: #fee8d2;
}
body.vetro {
	background: #e2f3ec;
}
body.extra {
	background: #e5e9ec;
}
body.news {
	background: #caceda;
}

#container {
	background-color: #fff;
	background-position: 0 0;
	background-repeat: repeat-y;
	height: 565px;
	width: 850px;
	margin: 0 auto;
	padding: 22px 22px 22px 0;
	overflow: hidden;
	position: relative;
}
.line {
	position: absolute;  
	top: 0;
	left: 0;
	width: 25px;
	height: 100%;
	background: #76afd2;
	z-index: 0;
}
	
#automation {
	position: absolute;
	top: 55px;
	left: 15px;
	display: block;
	text-indent: -9999px;
	width: 10px;
	height: 107px;
	background: url(img/automation.png) 0 0 no-repeat;
	z-index: 10;
}
#languages {
	position: absolute;
	top: 5px;
	right: 5px;
}
#languages li {
	float: left;
	padding-left: 5px;
}
#header {
	height: 50px;
	position: relative;
}
#header #logo_unitec {
	height: 35px;
	width: 155px;
	display: block;
	position: absolute;
	top: 0;
	left: 37px;
}
#header h1, #header h2 {
	color: #76afd2;
	text-transform: uppercase;
	font-size: 14px;
	text-align: right;
	display: block;
	width: 300px;
	height: 20px;
	position: absolute;
	top: 0;
	right: 20px;
}

#menu {
	width: 180px;
	height: 100%;
	position: absolute;
	z-index: 10;
}
#content {
	float: right;
	width: 630px;
}
#menu a:hover {
	text-decoration: underline;
}
#menu ul.level1 {
	padding-top: 160px;
	z-index: 10;
}
#menu ul.level1 li {
	padding: 0 0 17px 37px;
	background: url(img/arrow.png) 0 0 no-repeat;
	line-height: 25px;
	text-transform: uppercase;
}
#menu ul.level1 li.expanded {
	background: url(img/arrow_expanded.png) 0 0 no-repeat;
}
#menu ul.level2 {
	margin-left: 0px;
	padding: 8px ;
}
#menu ul.level2 li {
	padding: 0 0 7px 0;
	background: none;
	text-transform: lowercase;
	height: 17px;
}
#menu ul.level2 li a {
	background-image: url(img/arrow.png);
	background-repeat: no-repeat;
	background-position: 0 center;
	padding-left: 21px;
	height: 17px;
	line-height: 15px;
	display: block;
	opacity: 0.5;
}

#menu ul.level2 li a:hover,#menu ul.level2 li a.sel {
	opacity: 1;
}

.iconl2 {
	width: 17px;
	height: 17px;
	padding-right: 3px;
}

#menu ul.level2 ul.level3 {
 padding-left: 21px;
 padding-top: 5px;	
}

#content .top_text {
	height: 170px;
	width: 100%;
	position: relative;
}
.dove_siamo #content .top_text {
	height: 40px;
}
#content .top_text h1 {
	position: absolute;
	top: 40px;
	left: 0;
	padding-left: 450px;
	height: 35px;
	line-height: 30px;
	background-color: #fff;
	background-image: url(img/titoli.gif);
	background-repeat: no-repeat;
	font-size: 20px;
	text-transform: lowercase;
}
#content .top_text h1 {
	color: #76afd2;
	background-position: 405px 35px;
}
.crudo #content .top_text h1 {
	color: #45a12a;
	background-position: 405px 0px;
}
.cotto #content .top_text h1 {
	color: #cc252a;
	background-position: 405px -35px;
}
.mosaico #content .top_text h1 {
	color: #ee8016;
	background-position: 405px -70px;
}
.vetro #content .top_text h1 {
	color: #6fc5a1;
	background-position: 405px -105px;
}
.extra #content .top_text h1 {
	color: #83939c;
	background-position: 405px -140px;
}
#content .top_text p {
	position: absolute;
	bottom: 10px;
	left: 0;
}

#gallery {
	padding: 0 20px;
}
/*
#gallery p {
	text-transform: uppercase;
	color: #fff;
	position: absolute;
	bottom: 9px;
	left: 10px;
	font-weight: bold;
}
*/
#gallery {
	background: #97c2dd;
}
.crudo #gallery {
	background: #71b75d;
}
.cotto #gallery {
	background: #d8595d;
}
.mosaico #gallery {
	background: #f29e4e;
}
.vetro #gallery {
	background: #91d3b7;
}
.extra #gallery {
	background: #a1adb4;
}
.news #gallery {
	background: #606c86;
}

#gallery a {
	width: 130px;
	height: 130px;
	display: block;
	position: relative;
	border: 6px solid #fff;
	margin: 0 auto;
}
.where #gallery a {
	width: 505px;
	height: 130px;
	display: block;
	position: relative;
	border: 6px solid #fff;
	margin: 0 auto;
}
#gallery a span.plus {
	position: absolute;
	display: block;
	height: 20px;
	width: 20px;
	background: url(img/plus.png) 0 0 no-repeat;
	bottom: 5px;
	right: 5px;
}
#gallery a span.overlay {
	display: block;
	height: 130px;
	width: 130px;
	position: absolute;
	left: 0;
	right: 0;
}
html>body #gallery a span.overlay {
	background-image: url(img/overlay_company.png);
}
html>body.crudo #gallery a span.overlay {
	background-image: url(img/overlay_crudo.png);
}
html>body.cotto #gallery a span.overlay {
	background-image: url(img/overlay_cotto.png);
}
html>body.mosaico #gallery a span.overlay {
	background-image: url(img/overlay_mosaico.png);
}
html>body.vetro #gallery a span.overlay {
	background-image: url(img/overlay_vetro.png);
}
html>body.extra #gallery a span.overlay {
	background-image: url(img/overlay_extra.png);
}
html>body.news #gallery a span.overlay {
	background-image: url(img/overlay_news.png);
}
html>body #gallery a:hover span.overlay {
	background-image: none;
}
#footer {
	padding: 15px 0;
	text-align: center;
	font-size: 10px;
	color: #76AFD2;
}
#footer a:hover {
	text-decoration: underline;
}

/**
 * This <div> element is wrapped by jCarousel around the list
 * and has the classname "jcarousel-container".
 */
.jcarousel-container {
    position: relative;
    padding: 17px 0;
}
#container .jcarousel-container {
	background: #76afd2;
}
.crudo #container .jcarousel-container {
	background: #45a12a;
}
.cotto #container .jcarousel-container {
	background: #cc252a;
}
.mosaico #container .jcarousel-container {
	background: #ee8016;
}
.vetro #container .jcarousel-container {
	background: #6fc5a1;
}
.extra #container .jcarousel-container {
	background: #83939c;
}
.news #container .jcarousel-container {
	background: #868fa3;
}

.jcarousel-clip {
    z-index: 2;
    padding: 0;
    margin: 0;
    overflow: hidden;
    position: relative;
    width: 495px;
    height: 142px;
    margin: 0 auto;
}

.jcarousel-list {
    z-index: 1;
    overflow: hidden;
    position: relative;
    top: 0;
    left: 0;
    margin: 0;
    padding: 0;
}

.jcarousel-list li,
.jcarousel-item {
    float: left;
    list-style: none;
    /* We set the width/height explicitly. No width/height causes infinite loops. */
    width: 165px;
    height: 142px;
}

/**
 * The buttons are added dynamically by jCarousel before
 * the <ul> list (inside the <div> described above) and
 * have the classnames "jcarousel-next" and "jcarousel-prev".
 */
.jcarousel-next, .jcarousel-prev {
    z-index: 3;
    width: 48px;
    height: 40px;
    position: absolute;
    top: 64px;
    cursor: pointer;
    background-repeat: no-repeat;
}
.jcarousel-next, .jcarousel-prev {
	background-image: url(img/nav.png);
}
.jcarousel-next {
	right: -10px;
	background-position: 0 0;
}
.jcarousel-prev {
    left: -10px;
    background-position: 0 -40px;
}
#container .jcarousel-prev-disabled, #container .jcarousel-next-disabled {
	cursor: auto;
	background: none;
	display: none;
}

.dove_siamo .jcarousel-container {
	height: 400px;
	padding-left: 47px;
}

/*
	News scrollabili
*/
.carousel_news .jcarousel-list li,
.carousel_news .jcarousel-item {
	width: 495px;
    height: 142px;
}
.carousel_news, .carousel_news p {
	color: #fff;
}
#gallery .carousel_news .img_float {
	display: auto;
	margin: 0;
	float: right;
	margin-left: 20px;
}
.carousel_news h3 {
	font-size: 14px;
	font-weight: bold;
	padding-bottom: 10px;
}
.carousel_news h3 span {
	font-size: 11px;
	font-weight: normal;
	font-style: italic;
}
.carousel_news p {
	font-size: 11px;
	padding-bottom: 5px;
}

#gallery .carousel_news p a {
	display: inline;
	border: none;
	margin: 0;
	height: auto;
	width: auto;
	color: #fff;
	text-decoration: underline;
}
#gallery .carousel_news p a:hover {
	color: #d8e7f2;
}


/*
    ColorBox Core Style
    The following rules are the styles that are consistant between themes.
    Avoid changing this area to maintain compatability with future versions of ColorBox.
*/
#colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden;}
#cboxOverlay{position:fixed; width:100%; height:100%;}
#cboxMiddleLeft, #cboxBottomLeft{clear:left;}
#cboxContent{position:relative;}
#cboxLoadedContent{overflow:auto;}
#cboxLoadedContent iframe{display:block; width:100%; height:100%; border:0;}
#cboxTitle{margin:0;}
#cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%;}
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;}

/* 
    ColorBox example user style
    The following rules are ordered and tabbed in a way that represents the
    order/nesting of the generated HTML, so that the structure easier to understand.
*/
#cboxOverlay{background:#fff;}

#colorbox{}
#cboxLoadedContent{padding:35px;}
#cboxTitle{position:absolute; bottom:5px; left:0; color:#333; padding: 0 35px; font-size:12px;}
#cboxCurrent{position:absolute; bottom:10px; right:10px; color:#333; font-size:12px;}
#cboxSlideshow{position:absolute; top:-20px; right:90px; color:#fff;}
#cboxPrevious{position:absolute; top:50%; left:5px; margin-top:-32px; background:url(img/controls.png) top left no-repeat; width:28px; height:60px; text-indent:-9999px;}
#cboxPrevious.hover{background-position:bottom left;}
#cboxNext{position:absolute; top:50%; right:5px; margin-top:-32px; background:url(img/controls.png) top right no-repeat; width:28px; height:60px; text-indent:-9999px;}
#cboxNext.hover{background-position:bottom right;}
#cboxLoadingOverlay{background:#000;}
#cboxLoadingGraphic{background:url(img/loading.gif) center center no-repeat;}
#cboxClose{position:absolute; top:5px; right:5px; display:block; background:url(img/controls.png) top center no-repeat; width:15px; height:15px; text-indent:-9999px;}
#cboxClose.hover{background-position:bottom center;}

#cboxLoadedContent{background: #97c2dd;}
.crudo #cboxLoadedContent{background: #71b75d;}
.cotto #cboxLoadedContent{background: #d8595d;}
.mosaico #cboxLoadedContent{background: #f29e4e;}
.vetro #cboxLoadedContent{background: #91d3b7;}
.extra #cboxLoadedContent{background: #a1adb4;}
.news #cboxLoadedContent{background: #606c86;}