/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : Mar 2, 2015, 5:44:08 PM
    Author     : andykillen
*/
@font-face {
    font-family: 'DroidArabicKufiBold';
        src: url('fonts/DroidKufi-Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
      }
@font-face {
    font-family: 'DroidArabicKufiRegular';
        src: url('fonts/DroidKufi-Regular.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
      }     
      
@font-face {
  font-family: 'azraq';
  src: url('fonts/azraq.eot?52903426');
  src: url('fonts/azraq.eot?52903426#iefix') format('embedded-opentype'),
       url('fonts/azraq.woff?52903426') format('woff'),
       url('fonts/azraq.ttf?52903426') format('truetype'),
       url('fonts/azraq.svg?52903426#azraq') format('svg');
  font-weight: normal;
  font-style: normal;
}
/* Chrome hack: SVG is rendered more smooth in Windozze. 100% magic, uncomment if you need it. */
/* Note, that will break hinting! In other OS-es font will be not as sharp as it could be */
/*
@media screen and (-webkit-min-device-pixel-ratio:0) {
  @font-face {
    font-family: 'azraq';
    src: url('fonts/azraq.svg?52903426#azraq') format('svg');
  }
}
*/
 
 [class^="icon-"]:before, [class*=" icon-"]:before {
  font-family: "azraq";
  font-style: normal;
  font-weight: normal;
  speak: none;
 
  display: inline-block;
  text-decoration: inherit;
  width: 1em;
  margin-right: .2em;
  text-align: center;
  /* opacity: .8; */
 
  /* For safety - reset parent styles, that can break glyph codes*/
  font-variant: normal;
  text-transform: none;
 
  /* fix buttons height, for twitter bootstrap */
  line-height: 1em;
 
  /* Animation center compensation - margins should be symmetric */
  /* remove if not needed */
  margin-left: .2em;
 
  /* you can be more comfortable with increased icons size */
  /* font-size: 120%; */
 
  /* Font smoothing. That was taken from TWBS */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
 
  /* Uncomment for 3D effect */
  /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
}
 
.icon-economic:before { content: '\e800'; } /* '' */
.icon-commercial:before { content: '\e801'; } /* '' */
.icon-food:before { content: '\e802'; } /* '' */
.icon-healthcare:before { content: '\e803'; } /* '' */
.icon-children:before { content: '\e804'; } /* '' */
.icon-medical:before { content: '\e805'; } /* '' */
.icon-news:before { content: '\e806'; } /* '' */
.icon-police:before { content: '\e807'; } /* '' */
.icon-social:before { content: '\e808'; } /* '' */
.icon-education:before { content: '\e809'; } /* '' */
.icon-ngonews:before { content: '\e80a'; } /* '' */
.icon-hospital:before { content: '\e80b'; } /* '' */
.icon-exclamation:before { content: '\e80c'; } /* '' */
.icon-plus-squared:before { content: '\e80d'; } /* '' */
.icon-attention:before { content: '\e80e'; } /* '' */
.icon-clock:before { content: '\e80f'; } /* '' */
.icon-biohazard:before { content: '\e810'; } /* '' */
.icon-azraqnews:before { content: '\e811'; } /* '' */


html, body {font-size:10px; 
            font-family: 'DroidArabicKufiBold',Tahoma, helvetica, arial, sans-serif; 
            color:#111; 
            padding: 0; 
            margin: 0;
            position: relative;
            text-align: right;
            line-height: 1.4rem;
  height:100%   ;
      overflow:hidden;
}
body {
  height:100%;
  background: #304c60;  
  overflow:hidden;
}

.gradient {
position:static;
top:0;
left:0;
width:100%;
height:100%;
background: #304c60;
z-index:1;
}

.shadow{/* -webkit-box-shadow: 1px 2px 10px 1px rgba(50, 50, 50, 0.6);
-moz-box-shadow:    1px 2px 10px 1px rgba(50, 50, 50, 0.6);
box-shadow:         1px 2px 10px 1px rgba(50, 50, 50, 0.6); */}
ol, ul {margin: 0; padding: 0; list-style-type: none}
div{margin: 0; padding: 0; vertical-align: baseline}
h1,h2,h3,h4{margin: 0; padding: 0; line-height: 1.2rem;vertical-align: baseline} 
li {margin: 0; padding: 0; font-family: 'DroidArabicKufiRegular',helvetica, arial, sans-serif;}

#left-side {
  width: 387px;
  top:25px;
  left:25px;
  position: absolute;
  height: 1040px;  
  z-index:1;
}

#right-side {
  width:1468px;
  top: 25px;
  right:25px;
  position:absolute;  
  height: 840px;  
  z-index:1;
  
}

#rss {
  width: 1468px;
  bottom: 34px;
  height:109px;
  right: 25px;
  position:absolute;
  background: #49687D;
  z-index:1;
}
/*  tools */
.clean {clear: both}
#time {}
#header {padding-bottom: 15px}
#header span{display:inline-block; float:right; margin-left: 20px; font-size:5.4rem; color: white;}
#header h1{display:inline-block; font-size: 5rem; color: #fff; line-height: 54px}

#main-content { clear:both; font-size:4rem; background-color: #EDF9FE; line-height: 1.3em; height:826px; width:1468px; overflow:hidden}

#clock {height:54px;font-family: arial, sans-serif; padding-bottom:15px }
#clock span {font-family: "Lucida Console", Monaco, monospace;font-size:80%; position:relative; top:-8px}
#clock h1 {font-size:5.4rem; color: #fff; text-align: left; padding-left:16px; padding-top:20px ; letter-spacing: .012em }
#clock.speaker {background: url(../images/speaker.png) top right no-repeat; }

#playlist {margin-bottom: 17px; height:406px; background-color: #D5E6EC;}
#playlist h2 {  font-size: 3.5rem;
  padding-right: 17px;  
  line-height: 54px;
  padding-top: 8px;
  position: absolute;
  right: 0;
}
#playlist-header {position: relative;  height: 61px;
  border-bottom: solid 7px #B0C2C9;}
#playlist-timer {position: absolute; left:17px; top:40%; font-family:arial, helvetica,sans-serif; font-size: 3.4rem; }
#playlist-holder {overflow:hidden}
.playlist-image {float:right; margin:7px 0 7px 20px}
.playlist-item {font-size:2.1rem}
.playlist-item h4  {padding-top: 7px; padding-bottom: 7px; font-family: arial, helvetica, sans-serif; font-size: 2.6rem; line-height: 1em}
.playlist-item p {padding: 0; margin: 0; line-height: 1.3em; font-size: 2.1rem} 
.even {background: #EBF9FF}
.odd {background: #D7E5EB}

#agenda {height:527px; background-color: #D5E6EC; position: relative;overflow:hidden;}

#agenda p {padding:7px; font-size:2.45rem; margin: 0; line-height: 1.1em}
#agenda h3 {font-size:2.7rem; font-weight: bold; margin-top: 5px; padding-right: 7px; padding-bottom: 10px}
.day {width: 387px;height:527px;}
h2.date {font-size:4.3rem; position: absolute; top:26px; left:7px }
h2.dayofweek{font-size:3.5rem;text-align: right;padding:0 7px 5px 0; line-height:53px}
.agenda-holder-item {overflow:hidden; position:relative}
.agenda-holder-item li {position:absolute; top:0; left:0; width:100%}

.relative {position:relative}
.content-holder {padding:0 20px 20px 20px}

.video-holder {text-align: center}

.image-top-holder {text-align: center}
.image-right-holder {float:right; width:827px; margin-left: 20px; height:826px}

#ngos {  position: absolute;
  left: 25px;
  bottom: 25px;
  height:110px; 
  width:387px;  
  display:none;
}
#ngos-holder {  
  overflow:hidden;
  height:110px;
  position:relative;
  
}
#ngos-holder li {
  position: absolute;
  top:0;
  left:0;
  text-align: center;
  height:110px; 
  width:387px;  
}

#fullscreen-splash {
    top:0;
    left:0;
    right:0;
    bottom:0;
    z-index: 10000;
    position: absolute;
    background-color: #C03C31;
    display:none;
    text-align: center;
    color:#111
}

#fullscreen-splash h1 {font-size: 18rem; line-height: 1em; padding-top: .5em; padding-bottom: .5em; color:white; font-weight: bold}
#fullscreen-splash h2 {font-size: 8rem; padding: 0 1em 0.5em 1em; line-height: 1.25em; color:white;font-weight: bold}
#fullscreen-splash h3 {font-size: 8rem; padding: 0 1em 0.5em 1em; line-height: 1.25em; color:white;font-weight: normal}

#marquee-holder {  
	width:1468px;  
	height: 109px;	
	overflow: hidden;
	position: relative;		  
  
}
.marquee {
  width: 1468px;
  overflow: hidden;
  font-size:5rem;
  line-height:109px; 
  color:#fff;
 
}

#video {height:100%}