html{background-color:#010101;}
body {margin:45px;padding:0;top:45px;text-align:center;background-color:#010101;}
div, ul, ol, form, table, tr, td {margin:0;padding:0;border:0;}
div, a, p, td, input, textarea, label {font-family: Arial, Helvetica, sans-serif;}
img {border:none;margin:2px;padding:2px;}
fieldset{border:0px;}
fieldset p {margin-bottom:0px;}
input, textarea {border:1px solid #999;padding:1px 4px;color:#000;}
input {width:300px;font-size:11px;}
input.medium {width:120px;}
input.medium_right {width:120px;text-align:right;}
input.xxs {width:13px;border:none;}
input.small {width:60px;}
input.small_right {width:60px;text-align:right;}
input.check {width:15px;vertical-align:text-bottom;border:0px;color:#ffffff}
input.check1 {border:0px;color:#ffffff}
select {border:1px solid #000;padding:1px 0 0 4px;font-size:11px;}
textarea {width:90%;padding:4px;font-size:11px;}
button {border:none;cursor:pointer;background:#fff;color:#000;font-size:11px;width:90px;height:20px;padding:2px;}
img.button1 {border:none;cursor:pointer;background:#000;color:#000;font-size:11px;height:18px;padding:2px;position:relative;margin-left:370px;margin-bottom:-15px}
label{display:block;margin-top:3px;color:#fff}
label.search{float:left;width:120px;margin-top:3px;color:#fff}
/* classes */
div.clear {clear:both;height:0;}
div.line {clear:both;height:1px;border-bottom:1px solid #b2b2b2;margin:10px;}

h1 {color:#4b1813;text-transform:uppercase;font-weight:bold;font-size:15px;}
h2 {color:#7f7f7f;font-size:10px;margin:0;text-transform:uppercase;font-weight:bold;}
h3{color:#ffffff;font-size:25px;margin:0px;font-weight:normal;}

p, label {color:#fff;font-size:10px;line-height:15px;}
a {color:#100402;text-decoration:none;font-size:10px;line-height:15px;}
ul, ol {margin-left:15px;}
ul {list-style:square;}

#page {width:900px;margin:0 auto;text-align:left}
#head {width:900px;height:121px;text-align:left;margin-left:35px}

#dir_name{float:left;width:333px;margin:0 auto;text-align:left;padding-left:176px;}
#mosca{width:800px;height:49px;text-align:center;}
#video{float:right;width:340px;margin:0 auto;text-align:center}
#video p{text-align:left;color:#fff;font-size:9px;width:100%}
#result_reel{float:left;color:#fff;width:300px;margin-bottom:20px;margin-top:20px;margin-left:10px}
#search_field{float:left;color:#fff;width:770px;height:140px;padding:10px}
#selected_reel{position:absolute;top:60px;width:128px;border:1px dashed #fff;left:0px;background-color:#000;padding-left:4px;text-align:center}
#box_reel{float:left;width:128px;padding-top:10px;margin-bottom:10px;margin-top:0px}

#link_home {position:absolute;top:0px;padding-top:10px;margin-left:85px;padding-bottom:20px;text-align:left;height:12px;font-weight:bold;background-color:#000000;width:900px}
#link_home p {color:#000;font-size:11px;}
#link_home a, #link_home a:visited {color:#fff;font-size:11px;text-decoration:none;text-transform:uppercase;}
#link_home a:hover {color:#fff;font-size:11px;text-decoration:underline;text-transform:uppercase;}
#link_home a.lang, #link_home a.lang:visited{color:#fff;font-size:9px;text-decoration:none;text-transform:none;margin-left:220px}

#menu {float:left;width:700px;color:#100402;padding-left:3px;}
#menu ul {display:inline;}
#menu ul li{list-style:none;display:inline;margin-left:5px;}
#menu ul li.special{list-style:none;display:inline;margin-left:0px;}
#menu a, #menu a:visited {color:#fff;text-decoration:none;text-transform:uppercase;font-size:11px;}
#menu a:hover {color:#fff;font-size:11px;text-decoration:underline;text-transform:uppercase;}
#menu p {color:#fff;}

#submenu {float:left;width:420px;color:#fff;margin-top:5px}
#submenu ul {display:inline;margin-left:0px}
#submenu ul li{list-style:none;display:inline;margin-left:5px;}
#submenu ul li.special{list-style:none;display:inline;margin-left:0px;}
#submenu a, #menu a:visited {color:#fff;text-decoration:none;text-transform:uppercase;font-size:11px;}
#submenu a:hover {color:#fff;font-size:11px;text-decoration:underline;text-transform:uppercase;}
#submenu p {color:#fff;}


#menu_company{float:left;width:350px;margin:0 auto;text-align:left;padding-left:182px;}
/*
#menu_company {float:left;width:290px;color:#100402;font-size:13px;padding-left:40px;}
#menu_company ul li{list-style:none;margin-bottom:2px;font-weight:normal}
#menu_company a, #menu_company a:visited {color:#fff;font-size:13px;text-decoration:none;text-transform:uppercase;}
#menu_company a:hover {color:#fff;font-size:13px;text-decoration:underline;text-transform:uppercase}
#menu_company p {color:#fff;}
*/

#down {clear:both;width: 900px;}

#didascalia{float:left;margin-top:0px;padding-left:17px;width:700px;}
#didascalia p{font-size:11px;color:#fff;}
#didascalia img{border:0;}

#topic {float:left;width:700px;font-size:11px;color:#fff;margin-top:20px;padding-left:50px;}

#prenotazioni{float:left;padding-left:190px;width:500px;color:#fff;text-align:left;}

#search{float:left;padding-left:3px;width:500px;color:#fff;text-align:left;}

#news {float:left;font-size:10px;width:700px;margin:20px 0 0 50px;}
.boxed {width:690px;clear:right;margin-top:5px;}
.boxed div {float:left;}
.boxed img {float:left;margin:4px;}
.boxed p {margin-bottom:15px;}
.boxed a, .boxed a:visited {color:#fff;font-size:11px;text-decoration:none;text-transform:uppercase;font-weight:bold;}
.boxed a:hover {color:#fff;font-size:11px;text-decoration:underline;text-transform:uppercase;font-weight:bold;}

#production {float:left;font-size:10px;width:500px;margin:20px 0 0 190px;}
.box {width:490px;clear:right;margin-top:5px;}
.box div {float:left;}
.box img {float:left;margin:4px;}
.box p {margin-bottom:15px;}
.box a, .box a:visited {color:#fff;font-size:10px;text-decoration:none;text-transform:uppercase;font-weight:bold;}
.box a:hover {color:#fff;font-size:10px;text-decoration:underline;text-transform:uppercase;font-weight:bold;}
.special a, .special a:visited {color:#fff;font-size:10px;text-decoration:none;}
.special a:hover {color:#fff;font-size:10px;text-decoration:underline;}
#production p {color:#fff;font-size:11px;}
#production a, #production a:visited {color:#fff;font-size:11px;text-decoration:none;text-transform:uppercase;}
#production a:hover {color:#fff;font-size:11px;text-decoration:underline;text-transform:uppercase;}

div.modal {position:absolute; width:100%; height:100%; z-index:1; background:#000000; left: 0px; top: 0px; }
#ModalBox {position:absolute;width:678px; height:459px;z-index:2;left: 50%;margin-left:-339px;top: 15%;background-color: #FFFFFF;padding:10px;
-moz-border-radius:10px; -webkit-border-radius:10px;
}
#ModalContent {position:absolute; width:673px; height:456px; z-index:30000; left: 13px; top: 11px;text-align:justify;}

div.preview{width:70px;margin-right:20px;margin-bottom:50px;height:50px;display:inline;float:left;text-align:center;padding:0px;cursor:pointer}
div.preview p{text-align:center;font-size:9px}
div.preview img.film{height:100%;width:100%;float:left;margin:0px;border:0px;}
div.preview img.button{width:10px;vertical-align:text-bottom}

img.button{width:10px;vertical-align:text-bottom;cursor:pointer}

li.previewreel{width:120px;margin-right:20px;margin-bottom:50px;height:80px;display:inline;float:left;text-align:center;padding:0px;cursor:pointer;}
li.previewreel p{text-align:center; font-size:9px}
li.previewreel img.film{height:100%;width:100%;float:left;margin:0px;border:0px;}
li.previewreel img.button{width:10px;vertical-align:text-bottom}


a.previous, a.next{position:absolute;cursor:pointer;top:430px;}
a.previous{left:2%;}
a.next{left:96%}

img.awards{width:20px;vertical-align:middle}



/*
	root element for the scrollable.
	when scrolling occurs this element stays still.
*/
.scrollable {

	/* required settings */
	position:relative;
	overflow:hidden;
	width: 180px;
	height:300px;
}

/*
	root element for scrollable items. Must be absolutely positioned
	and it should have a extremely large width to accommodate scrollable items.
	it's enough that you set width and height for the root element and
	not for this element.
*/
.scrollable .items {
	/* this cannot be too large */
	width:20000em;
	position:absolute;
}

/*
	a single item. must be floated in horizontal scrolling.
	typically, this element is the one that *you* will style
	the most.
*/
.items div.block {
	float:left;
        width: 180px;
}
/* position and dimensions of the navigator */
.navi {
	margin-left:62px;
	width:200px;
	height:20px;
}


/* items inside navigator */
.navi a {
	width:8px;
	height:8px;
	float:left;
	margin:3px;
	background:url(../img/scrollable/arrow/navigator.png) 0 0 no-repeat;
	display:block;
	font-size:1px;
}

/* mouseover state */
.navi a:hover {
	background-position:0 -8px;
}

/* active state (current page state) */
.navi a.active {
	background-position:0 -16px;
}