interface upgrade

style/style.css

@@ -7,28 +7,22 @@ body {
 	padding:1em;
 	font-family: 'Open Sans', sans-serif;
 	font-size: 1em;
-}
-
-header {
-	margin:1em 0;
-	font-size: 2em;
-}
-
-footer {
-	clear:both;
-	font-size: 0.8em;
-	margin: 1em 0px;
-	display: none;
+	color:#333;
+	background:#DDD;
 }
 
 a {
 	text-decoration: none;
-	color:black;
+	color:#333;
 }
 a:hover {
 	color:#08288B;
 }
 
+h1 {
+	margin:0 0 1em 0; 
+}
+
 /* Common Classes */
 
 .fa-icon {
@@ -47,7 +41,7 @@ a:hover {
 	content: "\f110";	
 }
 .fa-cinema:before {
-	content: "\f145";
+	content: "\f017";
 }
 .fa-date:before {
 	content: "\f133";
@@ -55,11 +49,31 @@ a:hover {
 .fa-power:before {
 	content: "\f1b0";
 }
+.fa-edito:before {
+	content: "\f0e7";
+}
+.fa-feedback:before {
+	content: "\f0b0";	
+}
 
 /* Sections */
 
+/* Section - Header */
+
+header {
+	padding:1em 0 1em calc(113px + 0.5em);
+	background:url(../images/logo_ugc.png) 0 50% no-repeat;
+	margin:0 0 0 0.5em;
+	font-size: 2em;
+	color:#08288B;
+}
+
 /* Section - Main */
 
+main {
+	margin-top:1em;
+}
+
 #buffer {
 	font-size:2em;
 }
@@ -67,19 +81,27 @@ a:hover {
 /* Section - Film */
 
 .film {
-	clear:both;
+	position:relative;
 	background:white;
-	float:left;
 	margin-bottom:1em;
-	width:100%;
 }
 
 .film:nth-child(even) {
 
 }
 
+.film .bg {
+	position:absolute;
+	width:1000%;
+	opacity:0.3;
+	z-index: -1;
+	display:none;
+}
+
 .film .info {
-	margin-left:152px;
+	position:absolute;
+	top:0;
+	left:152px;
 	padding-left:1em;
 	width: calc(100% - 1em - 152px);
 }
@@ -94,11 +116,13 @@ a:hover {
 
 .film .title .edito {
 	font-style: italic;
+	margin-left:1em;
+	color:#999;
 }
 
 .film img.poster {
-	vertical-align: middle;
-	float:left;
+	width:152px;
+	display: block;
 }
 
 .film .trailer {
@@ -110,8 +134,33 @@ a:hover {
 	font-size: 0.8em;
 }
 
+.film .timetable p {
+	line-height: 2.0;
+	margin: 0;
+}
+
+.film .timetable .cinema {
+	margin-right:0.5em;
+}
+
+.film .timetable .cinema .fa {
+	font-size: 1.25em;
+	line-height: 0.7656249414em;
+	vertical-align: -14.06250352%;
+}
+
+.film .timetable .lang {
+	margin-right:0.5em;
+}
+
 .film .timetable .time {
-	
+	background:#666;
+	color:white;
+	padding:0.1em 0.4em;
+	border-radius:3px;
+}
+.film .timetable .time:hover {
+	background:#08288B;
 }
 
 /* Section - Feeback */
@@ -119,11 +168,10 @@ a:hover {
 #feedback {
 	background:#EEE;
 	padding:1em;
-	float:left;
-	clear:both;
 	font-size:0.6em;
 	margin-bottom: 1em;
 	display:none;
+	color:#999;
 }
 
 #feedback p:FIRST-CHILD {
@@ -131,4 +179,13 @@ a:hover {
 }
 #feedback p:LAST-CHILD {
 	margin-bottom:0;
+}
+
+/* Section - Footer */
+
+footer {
+	font-size: 0.8em;
+	margin: 1em 0px;
+	display: none;
+	color:#08288B;
 }