/* 
    CALYPSO South Style Sheet
    author: Audrey Zammit
            Physical Oceanography Research Group
*/
/*** BACKGROUNDS ***/
#background-container
{
    background-image: url("/assets/img/background.jpg");
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-position: center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

/*** COLOURS ***/
a:hover, a:focus
{
    color: #FF0000;
}

a
{
    color: #3977B0;
}

.alt-a
{
    color: #90EE90;
}

.even > a
{
    background-color: #afc3e9 !important;
}

#top-menubar > ul > li > a:hover, #main-menu > li > a:hover, 
#partners-items > li > a:hover, #wps-items > li > a:hover, 
#archive-items > li > a:hover, #prof-items > li > a:hover,
#sicily-items > li > a:hover, #malta-items > li > a:hover,
.menu-level-3>a:hover, .even>a:hover
{
    background-color: #1B325F !important;
    color: #E9F2F9 !important;
}

navbar-nav, .navbar-nav > li, #top-navbar, #top-menubar > ul > li > a,
#PORG, .credits, #links-items > li > a:hover
{
    background-color: #1B325F;
    color: #E9F2F9;
}

.file-preview
{
    background-color: #F5F5F5;
}

#main-menu > li.active > a
{
    background-color: #E9F2F9;
    color: #1B325F;
}

.title-banner
{
    background-color: #1B325F;
    color: #FFFFFF;
}

.disclaimer-banner
{
    background-color: #4c77cd;
    color: #FFFFFF;
}

#news-text, #side-menu, #left-menu
{
    background-color: rgba(255,255,255,0.8);
}

#main-title, #main-subtitle, #alt-page-title, .info-column > a, 
.small-title > a
{
    color: #FFFFFF;
}

.seminar-third-title
{
    color: #FBFF20;
}

.carousel-caption-top, .carousel-caption-bottom
{
    background-color: rgba(27,50,95,0.8);
    color: #FFFFFF;
}

.error-msg
{
    color: #3A89C9;
}

figcaption
{
    color: #666666;
}

.news-hyperlink
{
    /*color:#FDCD1A;*/
}

.navbar-inverse, .nav-pills > li > a, #about, #seminars, #news, 
#resources, #about-heading, #about-heading > a, #seminars-heading, 
#seminars-heading > a, #news-heading, #news-heading > a, #home-btn, #home-btn > a,
.title-row, #title-canvas, .canvas, .about-title-row, #restricted-btn, 
#restricted-btn > a, .file-drop-zone
{
    background-color: #FFFFFF;
    color: #1B325F;
}

.nav-pills > li > a:hover, .nav-pills > li > a:focus, #home-btn:hover, 
#about-heading:hover, #seminars-heading:hover, #news-heading:hover, 
#restricted-btn:hover
{
    background-color: #E9F2F9;
    color: #3A89C9;
}

.toggle-on
{
    background-color: #3A89C9;
    color: #FFFFFF;
}

.nav-side-menu, .calypso-south-title, .text-block, .page-title, .calypso-south-subtitle, 
.news-caption, .data-row, .data-row-header, #dashboard, .well, #navigation-bar,
#logo-row, #main-menu > li, #main-menu > li > a, .event-link > a, #about-items > li > a,
#seminars-items > li > a, #news-items > li > a, #services-items > li > a, 
#partners-tab > li > a, #wps-tab > li > a
{
    background-color: #FFFFFF;
    color: #1B325F;
}

.text-block
{
    background-color: rgba(0,0,0,0);
}

.home-page-title, .event-link > a:hover, .event-link > a:focus
{
    color: #3A89C9;
}

#title-bar
{
    background-color: #1B325F;
    color: #FFFFFF;
}

.download-type > a, .download-type > a:hover, .download-type > a:link, 
.text-block > h4, #nowcast-title
{
    color: #1B325F;
}

.nav .caret
{
    border-top-color: #FFFFFF;
    border-bottom-color: #FFFFFF;
}

#title-grad, .figure-caption.seminar-title 
{
    z-index: 100;
    color: #FFFFFF;
    background: #3A89C9; /* For browsers that do not support gradients */
    background: -webkit-linear-gradient(left, #1B325F , #3A89C9); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(right, #1B325F, #3A89C9); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(right, #1B325F, #3A89C9); /* For Firefox 3.6 to 15 */
    background: linear-gradient(to right, #1B325F , #3A89C9);  /* Standard syntax */ 
}

#title-canvas > .row > .col-sm-9 > a
{
    color: #AFCFE9;
}

.col-link:hover
{
    background-color: #ffffff;
}

.sidebar-menu-item > a
{
    background-color: rgba(255, 255, 255, 1.0) !important;
}

/*** FONT & TEXT ***/
figcaption, #main-subtitle, .carousel-caption
{
    font-family: 'Times New Roman', serif;
    font-weight: normal;
    font-style: italic;
}

h2
{
    font-size: 34px; 
    height: 49px; 
    margin-top: 60px
}


#PORG, .capemalta-nav, .navbar-nav > li, .page-title, .alt-page-title,
#font-date, #font-time, #clock, #links-items > li > a, .gliders.title,
#top-menubar > .navbar-nav > li > a
{
    font-family: 'Open Sans', sans-serif;
    font-size: 16px;
    font-weight: normal;
    line-height: 16px;
    padding: 3px 6px 3px 6px;
}

#home-tab > a
{
    font-size: 12px;
}

.news-hyperlink
{
    font-weight:bold; 
    text-decoration:none;
}

.event-link > a:hover, .event-link > a:focus, #partners-items > li > a:hover,
#partners-items > li > a:focus, #wprs-items > li > a:hover, #wps-items > li > a:focus,
#archive-items > li > a:focus, #prof-items > li > a:focus, #sicily-items > li > a:focus,
#malta-items > li > a:focus
{
    text-decoration: none;
}

.event-link
{
    line-height: 1.165;
}

.calypso-south-title
{
    font-family: 'Open Sans', sans-serif;
    font-size: 72px;
    font-weight: bold;
}

#title-bar
{
    font-size: 36px;
    text-align: left;
    line-height: 100%;
}

.home-page-title
{
    font-size: 60px;
    text-align: center;
}

.event-link > a
{
    font-size: 20px;
}

.title-banner, .seminar-title, .text-block > h4, #nowcast-title
{
    font-size: 36px;
    text-align: center;
    font-weight: bold;
}

.text-block > h4, #nowcast-title
{
    font-size: 24px;
}

#nowcast-title
{
    position:absolute;
    z-index:100;
}

#partners-items, #wps-items, #archive-items, #prof-items
{
    margin-left: 6px;
    margin-right: 6px;
    padding-left: 6px;
}

#sicily-items, #malta-items
{
    margin-left: 9px;
    margin-right: 9px;
    padding-left: 9px;
}

.seminar-subtitle, .seminar-third-title
{
    font-size: 18px;
    font-weight: normal;
    padding-top: 6px;
}

#subtitle, #main-title, .footer-title
{
    font-family: 'Times New Roman', serif;
    font-size: 24px;
}

.error-msg
{
    font-weight: normal;
}

.info-column > a, .small-title > a
{
    font-family: 'Times New Roman', serif;
    font-size: 24px;
    font-style: italic;
    font-weight: bold;
}

.page-title, .alt-page-title, .small-title, .title-row, .alt-page-subtitle,
about-title-row, .menu-level-1, .menu-level-2
{
    font-family: 'Open Sans', sans-serif;
    font-size: 18px;
    font-weight: bold;
}

.text-block, .details > tbody > tr > td, .download-type > a
{
    text-align: justify;
    font-family: "Times New Roman", serif;
    line-height: 1.0;
    font-weight: normal;
    font-size: 14pt;
}

.event-location, .event-time
{
    text-align: left;
    font-family: "Calibri", sans-serif;
    line-height: 1.2;
    font-weight: normal;
    font-size: 14pt;
}

.event-location
{
    /*font-style: italic;*/
    font-family: 'Times New Roman', serif;
}

.event-time
{
    font-style: italic;
    font-family: 'Times New Roman', serif;
}

.alt-page-title, .menu-level-1, .download-type > a
{
    font-size: 24px;
}

.menu-level-3
{
    font-size: 15px;
    line-height: 1.0;
}

.first-col
{
    text-align: center;
    vertical-align: middle;
    line-height: 100%;
    padding-right: 5px;
}

#left-title
{
    text-align: right;
    padding-right: 8px;
    width: 40%;
}

#right-title
{
    text-align: left;
    padding-left: 8px;
    width: 60%;
    border-left: solid #FFFFFF 1px;
}

#subtitle-note, #main-subtitle
{
    font-size: 18px;
    font-weight: normal;
}

.title-row, .content-row
{
    font-size: 14px;
    text-align: center;
}

.data-row, .data-row-header
{
    font-size: 10px;
}

.data-row-header
{
    text-align: center;
}

.details-value
{
    font-style: italic;
    font-weight: bold;
    padding-left: 13px;
}

.details-value-2
{
    padding-left: 13px;
}

.col-1
{
    text-align: right;
    line-height: 120%;
}

.col-2
{
    text-align: left;
    line-height: 120%;
}

.title-row, .data-row-header
{
    font-weight: bold;
}

#dashboard-title
{
    font-family: 'Open Sans', sans-serif;
    font-size: 28px;
    font-weight: bold;
    text-align: left;
    color: #FFFFFF;
   -webkit-text-fill-color: #FFFFFF; /* Will override color (regardless of order) */
   -webkit-text-stroke-width: 1px;
   -webkit-text-stroke-color: #F3F3F3;
}

#disclaimer, #dashboard-subtitle, #title-canvas
{
    text-align: justify;
    font-family: "Calibri", sans-serif;
    line-height: 1.0;
    font-weight: normal;
    font-size: 12pt;
}

.sidebar-dropdown > ul, .panel-body > ul
{
    list-style-type: none;
}

#accordion > a:hover, .panel-default > a:hover, .panel-default > a:focus
{
    text-decoration: none;
}

#about-items > li
{
    list-style: none;
}

/*** SIZE & LAYOUT ***/
#news-content
{
    margin: 0;
}

#video-button-2018, #download-leaflet, #disclaim-button, #ebrochure-button,
#video-button-2021, #video-button-2022
{
    padding: 4px;
}

#reserved-frame
{
    padding: 10px 15px 10px 15px;
}

#left-menu
{
    position: fixed; 
    width: 13%;
    top: 50%; 
    left: 0;
    z-index: 20;
    -webkit-transform:translateY(-50%);
    -ms-transform:translateY(-50%); 
    transform:translateY(-50%)
}

#partners
{
    position: fixed;
    bottom: 0;
    z-index: 20;
}

.anchor-point
{
    display: block;
}

#main-menu > li > a
{
    line-height: 1.0;
    text-align: center;
}

.input-form
{
    width: 640px;
    height: 520px;
    margin: 30px;
    padding: 0 15px 15px 15px;
    border: 1px #1B325F solid;
    border-radius: 8px;
    margin-left: auto;
    margin-right: auto;
    box-shadow: 0 8px 10px 1px rgba(0,0,0,0.14), 
                0 3px 14px 2px rgba(0,0,0,0.12), 
                0 5px 5px -3px rgba(0,0,0,0.2);
}

.event-link
{
    margin: 25px;
    border: #1B325F solid 1px;
    border-radius: 8px;
    padding: 25px;
    box-shadow: 0 8px 10px 1px rgba(0,0,0,0.14), 
                0 3px 14px 2px rgba(0,0,0,0.12), 
                0 5px 5px -3px rgba(0,0,0,0.2);
}

.left-menu-button
{
    border: #1B325F solid 1px;
    box-shadow: 0 8px 10px 1px rgba(0,0,0,0.14), 
                0 3px 14px 2px rgba(0,0,0,0.12), 
                0 5px 5px -3px rgba(0,0,0,0.2);
}

.partner-link-selected
{
    border: 1px #1B325F solid;
    border-radius: 8px;
    box-shadow: 0 8px 10px 1px rgba(0,0,0,0.14), 
                0 3px 14px 2px rgba(0,0,0,0.12), 
                0 5px 5px -3px rgba(0,0,0,0.2);
}

#upload-area
{
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}

.partner-link
{
    border-style: none;
    box-shadow: none;
}

.event-link-container
{
    padding: 0;
}

#fb-container
{
    width: 500px;
    margin: auto;
}

.carousel-caption-top, .carousel-caption-bottom
{
    border-radius: 10%;
}

#kaptan-page, #weather-page, #carousel-container > .item
{
    width: 100%;
    height: 100%;
}

#left-col
{
    padding: 100px;
}

.carousel-control
{
    width: 8%;
}

#side-menu
{
    border-left: #1B325F solid 1px;
}

#top-navbar
{
    height: 34px;
    width: 100%;
}

#logo-row
{
    position: fixed;
    bottom: 0;
    right: 0;
    z-index: 100;
}

#disclaimer
{
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 100;
    width: 50%;
    border: 1px solid #ffffff;
}

#video-panel-2018, #video-panel-2020, #video-panel-2021, #video-panel-2022
{
    width: 0; /* 560px when open */
    position: fixed;
    z-index: 25;
    height: 0; /* 315px when open */
    left: 0;
    bottom: 0;
    transition: 0.5s;
}

#video-panel-2018 .btn-close, #video-panel-2020 .btn-close, #video-panel-2021 .btn-close, 
#video-panel-2022 .btn-close
{
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  color: black;
  z-index: 30;
  text-decoration: none;
}

#navigation-bar
{
    height: 86px;
    width: 100%;
}

#home-tab > a
{
    padding-top: 10px;
    padding-bottom: 10px;
}

#main-menu > li
{
    padding: 0;
}

#top-menubar
{
    height: 100%;
    float: right;
    padding-right: 48px;
}

#top-menubar > ul
{
    height: 100%;
}

.navbar-nav > li, li > a
{
    height: 100%;
}

.carousel-caption-top
{
    top: 0;
    bottom: auto;
}

.carousel-caption-bottom
{
    top: auto;
    bottom: 0;
}

img.nav-image, .page-title, .alt-page-title, .capemalta-nav, .gliders-title
{
    margin: 0;
}

#english-flag
{
    height: 24px;
    padding-top: 2px;
    margin: 0 6px 0 12px;
}

#news-text, #side-menu, #left-menu
{
    padding: 15px;
}

#italian-flag
{
    height: 24px;
    padding-top: 2px;
    margin: 0 24px 0 6px;
}

#subtitle, #subtitle-note, figcaption, #main-title, #main-subtitle, .page-title,
.footer-row
{
    line-height: 150%;
}

#subtitle-note, .well, figcaption, #main-title, #main-subtitle,
.footer-row, .footer-title
{
    text-align: center;
}

.centre-table
{
    margin: 25px auto;
    float: none;
}

#dashboard-title, .content-row
{
    padding: 0;
    line-height: 100%;
}

.text-block > ol > li
{
    padding-bottom: 13px;
}

table > tbody > tr > td.title-row, table > tbody > tr.title-row,
/*table > tbody > tr > td.data-row, table > tbody > tr.data-row,*/
table > tbody > tr > td.data-row-header, table > tbody > tr.data-row-header
{
    margin: 0;
    padding: 0;
    line-height: 120%;
}

#dashboard
{
    padding: 10px;
    max-width: 800px; 
}

#areas
{
    max-height: 360px;
}

table > tbody > tr > td.data-row-header, table > tbody > tr.data-row-header
{
    padding-right: 10px;
    padding-left: 10px;
}

#cofinancing-banner
{
    position: fixed;
    bottom: 0;    
}

.details
{
    margin: 0px auto;
    float: none;
}

.col-1
{
    padding: 0 5px 0 0;
    border-right-style: none;
    margin: 0;
}

.col-2
{
    padding: 0 0 0 5px;
    border-left-style: none;
    margin: 0;
}

#main-content, #main-text, #title-bar
{
    margin: 10px;
    padding: 16px;
}

.title-banner, .disclaimer-banner
{
    padding: 20px;
    margin-bottom: 24px;
}

#main-image
{
    margin: 10px;
}

#nav-logo, .capemalta-button, .title-image, #upload-area-container
{
    width: 100%;
}

#erdf-logo, #calypso-south-logo, #malta-eu-logo
{
    max-height: 80px;
}

.nav > li > a > img
{
    max-width: 225px;
    max-height: 80px;
}

#alt-nav-logo
{
    width: 75%;
    margin-top: 5px;
    margin-left: 20px;
}

.right-photo
{
    max-width: 600px;
    float: right;
    margin-left: 16px;
    margin-bottom: 8px;
}

#about, #seminars, #news, #resources
{
    padding-left: 15px;
    margin-left: 15px;
}

.well
{
    margin: 10px 0 10px 0;
}

li .sidebar-dropdown .sidebar-menu-item > a, .calypso-south-subtitle
{
    padding-top: 5px;
    padding-bottom: 5px;
    line-height: 110%;
}

.sidebar-menu-item, #about, #seminars, #news
{
    border-radius: 3px;
}

.text-block, .image-block, ul.list-inline, .calypso-south-subtitle
{
    margin-top: 0;
    margin-bottom: 0;
}

.pull-left, .pull-right
{
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 0px;
    margin-bottom: 0px;
}

#seaviewer
{
    padding-left: 15px;
}

#seaviewer-viewport, #title-grad 
{
    border-style: none;
    margin: 0;
}

.about-row, .about-title-row
{
    border: 2px solid #1B325F;
}

#disclaimer
{
    border-radius: 3px;
    padding: 3px;
}

img.map, map area
{
    outline: none;
}

.canvas, .downloads
{
    width: 100%;
}

video
{
    display: block;
}

.details > tbody > tr
{
    border-top: 1px #1B325F solid;
}

/*** TOOLTIPS ***/
.tooltip > .tooltip-inner 
{
      background-color: #3977B0; 
      color: #FFFFFF; 
      border: 1px solid #1B325F; 
      padding: 15px;
      font-family: serif;
      font-size: 16px;
}

.tooltip.left > .tooltip-arrow 
{
    border-left: 5px solid #1B325F;
}

/*** OTHER ***/
.bar-icon:hover
{
    cursor: pointer;
}

#progress-wrp {
  border: 1px solid #0099CC;
  padding: 1px;
  position: relative;
  height: 30px;
  border-radius: 3px;
  margin: 10px;
  text-align: left;
  background: #fff;
  box-shadow: inset 1px 3px 6px rgba(0, 0, 0, 0.12);
}

#progress-wrp .progress-bar {
  height: 100%;
  border-radius: 3px;
  background-color: #2196F3;
  width: 0;
  box-shadow: inset 1px 1px 10px rgba(0, 0, 0, 0.11);
}

#progress-wrp .status {
  top: 3px;
  left: 50%;
  position: absolute;
  display: inline-block;
  color: #000000;
}

/* On small screens, set height to 'auto' for the grid */
@media screen and (max-width: 767px) 
{
    .row.content {height: auto;};
    .navbar-toggle 
    {
        display: block !important;
    }
}

@media (max-width: 991px) 
{
    .navbar-header {
        float: none;
    }
    .navbar-toggle {
        display: block;
    }
    .navbar-collapse {
        border-top: 1px solid transparent;
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
    }
    .navbar-collapse.collapse {
        display: none!important;
    }
    .navbar-nav {
        float: none!important;
        margin: 7.5px -15px;
    }
    .navbar-nav>li {
        float: none;
    }
    .navbar-nav>li>a {
        padding-top: 10px;
        padding-bottom: 10px;
    }
    .navbar-text {
        float: none;
        margin: 15px 0;
    }
    /* since 3.1.0 */
    .navbar-collapse.collapse.in { 
        display: block!important;
    }
    .collapsing {
        overflow: hidden!important;
    }
}