body, html {
	background-color: #E1E1E1;
	font-family: Arial, sans-serif;
}

#page-wrap {
	background-color: #d5d5d5;
	margin: 0 auto 0 auto;
	width: 980px;
	padding-bottom: 10px;
}

#search-bar {
	text-align: right;
	margin: 10px;
}

#search-bar .input-field {
	float: right;	
}

#search-bar input {
	border: 1px solid gray;
	height: 18px;
}

#header {
	background-color: #ffffff;
	background: #ffffff url('../images/header.jpg') top right no-repeat;
	/*height: 160px;*/
	margin: 0 10px 0 10px;
	border-bottom: 10px solid #276e35;
}

#header h1 {
	font-family: "Lucida Grande", Arial, Geneva, Helvetica, sans-serif;
	font-size: 20px;
	padding: 10px;
}

#nav ul {
	
}

#nav li {
	float: right;
	background-color: #308841;
	padding: 8px 0px 8px 0px;
}

#nav li a {
	text-decoration: none;
	font-size: 15px;
	font-weight: bold;
	color: white;
	padding: 8px 20px 8px 20px;
}
#nav li a:hover {
	color: black;
	background-color: #E1E1E1;
}

#nav .roundcorner {
	-webkit-border-top-left-radius: 10px;
	-moz-border-radius-topleft: 10px;
	border-top-left-radius: 10px;
}

#contenuto {
	margin: 0 10px 0px 10px;
	background-color: white;
}

#player-box {
	height: 400px;
	background-color: #308841;
}

#player-video {
	float: left;
}

#player-palinsesto {
	color: white;
	overflow: auto;
	height: 400px;
}

#player-palinsesto h2 {
	font-family: "Lucida Grande", Arial, Geneva, Helvetica, sans-serif;

	background-color: #276e35;
	padding: 4px 8px 4px 8px;
	font-weight: bold;
}

#player-palinsesto ul {
	padding: 0 0 0 0;
}

#player-palinsesto ul li {
	padding: 4px 0 4px 0;
	width: 100%;
}

#player-palinsesto .pal-orario {
	padding: 0 8px 0 8px;
	font-size: 12px;
}

#player-palinsesto .pal-titolo {	
	padding: 0 8px 0 8px;

	font-size: 14px;
	font-weight: bold;
}

#player-palinsesto .pal-sottotitolo {
	padding: 0 8px 0 8px;

	font-size: 14px;
}

#player-palinsesto .pal-header {
	background-color: #276e35;
}

#player-palinsesto .pal-giorno {
	padding: 0 8px 0 8px;
	font-size: 14px;
}

#player-palinsesto a {
	color: white;
}

#inner-content {
	padding: 20px 20px 20px 20px;
}

#inner-content h2 {
	font-size: 26px;
	font-family: "Lucida Grande", Arial, Geneva, Helvetica, sans-serif;
	padding: 0 0 2px 0;

	color: black;
	text-decoration: none;
	line-height: 110%;
	color: #276e35;
}

#footer {
	background-color: #252525;
	color: white;
	clear: both;
	
	font-family: "Lucida Grande", Arial, Geneva, Helvetica, sans-serif;
	font-size: 12px;
}

#footer p {
	margin: 6px 0 6px 0;
}

#footer a {
	color: white;
	text-decoration: none;
}
/* News e info */
#news-column {
	padding-right: 20px;
	width: 730px;
	float: left;
}

.news-item h3 {
	font-size: 24px;
	font-family: "Lucida Grande", Arial, Geneva, Helvetica, sans-serif;
	padding: 0 0 2px 0;

	color: black;
	text-decoration: none;
	line-height: 110%;
}

.news-item h3 a {
	text-decoration: none;
}

.news-time {
	font-size: 12px;
	font-family: "Lucida Grande", Arial, Geneva, Helvetica, sans-serif;
	color: #666666;
	padding: 2px 0 8px 0;
}

.news-item p {
	padding: 2px 0 2px 0;
	font-size: 14px;
	line-height: 130%;
}

.news-image {
	float: left;
	width: 100px;
	padding: 0 8px 8px 0;
}

.news-category {
	clear: left;
	padding: 2px 0 20px 0;

	font-size: 12px;
	font-family: "Lucida Grande", Arial, Geneva, Helvetica, sans-serif;
	color: #666666;
}

.news-more {
	padding: 2px 0 20px 0;
	font-size: 14px;
	line-height: 130%;
}

.read-more {
	text-align: right;
}

#news-column a {
	color: #276e35;
	font-weight: bold;
}

#news-column a:hover {
	color: black;
}

/* Info boxes */

#info-column {
	width: 160px;
	float: left;
}

.info-box {
	margin: 0 0 6px 6px;
	padding: 10px;
	background-color: #E1E1E1;
	width: 154px;
	height: 154px;
	float: left;
}

.info-box img {
	margin: auto;
	text-align: center;
}

.info-box h3 {
	font-family: "Lucida Grande", Arial, Geneva, Helvetica, sans-serif;
	font-size: 16px;
	margin-bottom: 6px;
}

.info-box p {
	font-size: 14px;
}

/* Latest news */

.latest-news  {
	margin: 0 0 6px 6px;
}

.latest-news h3 {
	font-size: 18px;
	font-family: "Lucida Grande", Arial, Geneva, Helvetica, sans-serif;
	padding: 0 0 2px 0;
	margin-top: 16px;

	line-height: 110%;
}

.latest-news li {
	padding: 6px 0 6px 0;
}

.latest-news a {
	color: #276e35;
	font-weight: bold;
	text-decoration: none;
}

.latest-news a:hover {
	color: black;
}

#colonna-singola {
	padding: 20px;
}

#colonna-singola h3 {
	font-size: 18px;
	margin: 2px 0 6px 0;
}

#colonna-singola p {
	font-size: 14px;
	margin: 2px 0 6px 0;
}

#colonna-singola a {
	color: #276e35;
	font-weight: bold;
	text-decoration: none;
}

#colonna-singola ul {
	list-style: none;
}

/* Pop up wrapper */
#pop-wrap {
	width: 640px;
	margin: 20px auto 10px auto;
	padding: 20px 10px 20px 10px;
	background-color: white;
}

/* Utility */
.main-clearfix {
	width: 980px;
	margin: 0 auto 0 auto;
	padding: 10px;
}

.fb-like {
	float: right;
}

b, strong {
	font-weight: bold;
}

i, em {
	font-style: italic;
}
/*
* You probably want to set the same width and height
* that you have set to your <video> elements.
*/

.single_video_wrap {
  margin-bottom:20px;
  width: 640px;
}

.video_wrap {
  margin-bottom:10px;
}
.interactive .video_wrap {
  width:640px;
  height:480px;
  display:none;
}
.interactive .video_wrap.active {
  display:block;
}

.interactive ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.interactive p {
	color: white;
	margin: 0 0 4px 0;
}

.interactive li {
  float:left;
  display:block;
  width:110px;
  height:76px;
  margin-right:16px;
  margin-bottom:16px;
  padding:5px;
  background:#fff;
  -moz-border-radius:4px;
  -webkit-border-radius:4px;
  border-radius:4px;
}

/* This will make distinguishable the currently selected thumbnail */
.interactive li.active {
  background:#000;
}

/* This will create a simple hover effect */
.interactive li img {
  opacity:.7;
}
.interactive li a:hover img, .interactive li.active img {
  opacity:1;
}

a.zoomable {
  display:block;
  width:500px;
  height:375px;
  margin-bottom:10px;
  background:#000;
  position:relative;
  -webkit-box-shadow:rgba(0,0,0,0.4) 0 4px 10px;
  -moz-box-shadow:rgba(0,0,0,0.4) 0 4px 10px;
  box-shadow:rgba(0,0,0,0.4) 0 4px 10px;
}

a.zoomable span.zoom_icon {
  display:block;
  width:100%;
  height:100%;
  position:absolute;
  top:0;
  left:0;
  background:url(../images/sv_zoom_icon.png) no-repeat bottom right;
  opacity:0.3;
  -o-transition:opacity 0.25s;
  -moz-transition:opacity 0.25s;
  -webkit-transition:opacity 0.25s;
  transition:opacity 0.25s;
}

a.zoomable:hover span.zoom_icon {
	opacity:1
}

strong {
	font-weight: bold;
}
