/**
 * @file
 * Page Styling
 *
 * Style the markup found in page.tpl.php. Also includes some styling of
 * miscellaneous Drupal elements that appear in the $content variable, such as
 * ul.links, .pager, .more-link, etc.
*/


/*
 * Body
*/

body {
    margin: 0;
    padding: 0;
    color: white;
    background-color: #B3CCCC;
    width: 100%;
}

#page {
    width: 90%;
    margin: 0.5em auto;
    color: black;
    background-color: white;
    border-radius: 2em;
    box-shadow: 2px 2px 6px #333333;
}

/*
 * The skip-link link will be completely hidden until a user tabs to the link.
 * See the element-focusable rule in system.base.css.
*/

#skip-link {
    margin: 0;
}
#skip-link a,
#skip-link a:visited {
    display: block;
    width: 100%;
    padding: 2px 0 3px 0;
    text-align: center;
    background-color: #666;
    color: #fff;
}

/*
 * Header
*/

#header {
    border-radius: 2em 2em 0 0;
    background-image: url('../images/hdr_bg.png');
    background-repeat: repeat-x;
    position: relative;
    width: 100%;
    color: black;
    height: 150px;
}

#logo { /* Wrapping link for logo */
    float: left; /* LTR */
    margin: 40px 20px 20px;
    padding: 0;
}
#logo img {
    vertical-align: bottom;
}

#name-and-slogan { /* Wrapper for website name and slogan */
    float: left;
}

#site-name { /* The name of the website */
    margin: 0.25em;
    padding: 0;
    font-size: 5em;
    
    /*text-indent: -100000px; */
}
#header hgroup, #header h1 {
/*   width: 100%; */
}
#site-name a {
    /* display: block;
     background-image: url(../images/hzn_logo.png);
     background-repeat: no-repeat;
     height: 150px;
     max-width: 561px; 
     min-width: 100px; 
     width: 90%;
     background-size: contain;
     background-position: left bottom; */
}
#site-name a:link,
#site-name a:visited {
    color: #FFF;
    text-decoration: none;
    font-family: "Exo", Arial, sans-serif;
    font-weight: 900;
    text-shadow: 1px 1px 1px #000;
    /*text-shadow: 1px 1px 1px #D1D3D4;*/
}
/*#site-name a:hover,
#site-name a:focus {
    text-shadow: 1px 1px 1px #000;
}*/

#site-slogan { /* The slogan (or tagline) of a website */
    margin: 0;
    font-size: 1em;
}

.region-header { /* Wrapper for any blocks placed in the header region */
    clear: both; /* Clear the logo */
}

/*
 * Main (container for everything else)
*/

#main {
}

/*
 * Content
*/

#content {
    padding-left: 30px;
    padding-right: 30px;
}
#content, .sidebar {
    padding-top: 1em;
    padding-bottom: 1em;
}

h1#page-title, h2.pane-title {
    background-color: white;
    border-radius: 0 0.5em 0 0;
    margin: 0 0 0.5em;
}
h2.pane-title {
    border-left: 0.6666667em solid #B22225; 
    color: #B22225
}

.node-page-wrapper h1#page-title, .pane-node h2.pane-title {
    padding-top: 0;
    background-color: white;
    border-radius: 0 1em 0 0;
}
.pane-node h2.pane-title  {
    margin: 0;
    border-left: 0.6666667em solid #B22225;
}

.view-id-faqs {
    margin: -1em 0 2em;
}

.view-horizon-team img {
    float: left;
    padding: 0px 1em 0px 0px;
}
.view-horizon-team .field-name-body p {
    margin: 0px 0px 1em;
}
.pane-node article.view-mode-full {
    margin: 0 0 1em;
}
#graph-wrapper, #contact-site-form, #no-messages, #cds-messaging-reply-form {
    border-left: 1em solid #B22225;
    padding: 1em;
    background-color: white;
    margin: -1em 0 2em 0;
    border-radius: 0 0 1em 0;
}

.region-highlighted {
}

.breadcrumb { /* The path to the current page in the form of a list of links */
}
.breadcrumb ol {
    margin: 0;
    padding: 0;
}
.breadcrumb li {
    display: inline;
    list-style-type: none;
    margin: 0;
    padding: 0;
}

h1.title, /* The title of the page */
h2.node-title, /* Title of a piece of content when it is given in a list of content */
h2.block-title, /* Block title */
h2.title, /* Comment section heading */
h2.comment-form, /* Comment form heading */
h3.title { /* Comment title */
    margin: 0;
    color: #6D6F71;
    font-family: 'Exo', Arial, sans-serif;
    font-weight: 900;
}



tr.even { /* Some tables have rows marked even or odd. */
    /* background-color: #eee; */ /* Drupal core uses a #eee background */
}

tr.odd {
    /* background-color: #eee; */ /* Drupal core uses a #eee background */
}

div.messages { /* Important messages (status, warning, and error) for the user. See also the declarations in messages.css. */
    margin: 1.5em 0; /* Drupal core uses "6px 0" margin */
}
div.messages ul {
    margin-top: 0;
    margin-bottom: 0;
}

div.status { /* Normal priority messages */
}

div.warning,
tr.warning { /* Medium priority messages */
    /* border: 1px solid #f0c020; */ /* Drupal core uses: 1px solid #f0c020 */
}

div.error,
tr.error { /* High priority messages. See also the .error declaration below. */
}

.error { /* Errors that are separate from div.messages status messages. */
    /* color: #e55; */ /* Drupal core uses a #e55 background */
}

.warning { /* Warnings that are separate from div.messages status messages. */
    /* color: #e09010; */ /* Drupal core uses a #e09010 background */
}

.tabs { /* See also the tabs.css file. */
}

.region-help { /* Help text on a page */
}

.more-help-link { /* Link to more help */
}

.region-content { /* Wrapper for the actual page content */
}

ul.inline { /* List of links generated by theme_links() */
    display: inline;
    padding: 0;
}
ul.inline li {
    display: inline;
    list-style-type: none;
    padding: 0 1em 0 0; /* LTR */
}

span.field-label { /* The inline field label used by the Fences module */
    padding: 0 1em 0 0; /* LTR */
}

.item-list .pager { /* A list of page numbers when more than 1 page of content is available */
    padding: 0;
}
.item-list .pager li { /* Each page number in the pager list */
    padding: 0 0.5em;
}

.feed-icon { /* The link to the RSS or Atom feed for the current list of content */
}

.more-link { /* Aggregator, blog, and forum more link */
}

/*
 * First sidebar (on left in LTR languages, on right in RTL)
 *
 * Remember to NOT add padding or margin to your .region-sidebar-first
 * (see the layout.css file.)
*/

.region-sidebar-first {
}

/*
 * Second sidebar (on right in LTR languages, on left in RTL)
 *
 * Remember to NOT add padding or margin to your .region-sidebar-second
 * (see the layout.css file.)
*/

.region-sidebar-second {
}
    background-color: #EAEAEF; 


/*
 * Footer
*/

#footer {
}

/*
 * Page bottom
*/

.region-bottom { /* Wrapper for any blocks placed in the page bottom region */
}

.tickLabel {
    width: 40px;
}
.getGraphDataGroupWeeklyTask .tickLabel {
    width: 100px;
}
.getGraphDataWeeklyTask .tickLabel {
    width: 100px;
}

/* Participants view */
.stop-messages.request-stop-1 {
    display: none;
}
.start-messages.request-stop-0 {
    display: none;
}


th, td {
    padding: 5px;
    text-align: left;
}
/*
 * Additional for mobile
*/
@media all and (max-width: 800px) {
    #site-name { 
        font-size: 3em;
    }
}
@media all and (max-width: 600px) {
    #page {
        width: 100%;
        margin: 0;
    }
    h1#site-name {
       display: none
    }
    #site-name a { 
        font-size: 0.8em;
        line-height: 1.2em;
        /*display: block;*/
        margin: 1em;
        padding: 0;
    }
    #toolbar {
        position: absolute;
        max-width: 100%;
    }
    .page-node- #content {
       
    }
    #graph-wrapper {
        
    }
    #content {
        width: 100%;
        padding-left: 0;
        padding-right: 0;
    }
    .page-weekly-group-counts, .page-weekly-counts {
        min-width: 600px;
    }
}
@media all and (max-width: 300px) {
    #header {
        
    }
    #site-name a { 
        font-size: 0.5em;
        margin: 0.5em;
    }
}