/*
Theme Name:     xchem
Description:    This is a child theme of Canvas
Author:         Golin Web Design
Template:       canvas

*/

@import url("../canvas/style.css");

/******************* general setting ************************/
body {
    background-color:#000000;
}
#inner-wrapper {
    padding:0;
}
#wrapper {
    padding-left:0;
    padding-right:0;
}

h1 {
    color:#0d566a !important;
    font-size:20px !important;
    font-family:"Open Sans", arial, sans-serif !important;
    font-weight:400 !important;
}

h2 {
     color:#000000 !important;
    font-size:14px !important;
    font-family:"Open Sans", arial, sans-serif !important;
    font-weight:bold !important;
    
}
a:hover {
    text-decoration:underline;
    color:#428bca
}

p {
   color:#000000 !important;
    font-size:14px !important;
    font-family:"Open Sans", arial, sans-serif !important;
    font-weight:normal;  
}

/* remove borders from images */
img {
    border:none !important;
}

/* set background color to white */
#inner-wrapper, #main {
background-color: #ffffff;
}
/********* beauty bars *******************/

/* position beauty */
.beautybar img {
    margin-top:-45px;
}

/************** subpage *******************************/
/* set header background image */
#header {
    background-image:url("/wordpress/wp-content/uploads/subpage-header-background-short.jpg");
    background-repeat:no-repeat;
    background-position:top left;
    background-size:cover;
    padding-top:10px !important;
}

/* move navagation below logo */
#navigation {
    margin-top:-20%;
}
/* put a little space between logo and nav */
#logo {
    margin-bottom:15px;
}

/* width of main contents area and sidebar for subpages */
body:not(.home) #main {
    width:60% !important;
    border-left:2px dotted #b8bf0d;
    padding-right:6%;
    padding-left:20px;   
}
body:not(.home) #sidebar {
    width:15% !important;
    padding-left:15%;
}
/* set footer background to green */
#footer, #footer-widgets {
    background-color: #b8bf0d;
}


/******************** sidebars ******************************/
/* style sidebar menus */
#sidebar .widget_nav_menu ul {
     list-style-type: none;
     color:#0d566a !important;
     font-size:18px !important;
    font-family:"Open Sans", arial, sans-serif !important;
    font-weight:400 !important;   
    line-height:2em;
}
#sidebar .widget_nav_menu ul a {
    color:#0d566a;
}

#sidebar .widget_nav_menu ul li.current_page_item a {
     color:#b8bf0d;
}

/******************* homepage *******************************/
/* set header background image */
.home #header {
    background-image:url("/wordpress/wp-content/uploads/home-background-with-circle.jpg");
    background-repeat:no-repeat;
    background-position:top left;
    background-size:cover;
    padding-top:10px !important;
    z-index:5000 !important;
}

/* don't display page title or date on pages */
#main article.page  .title, #main article.page abbr {
    display:none;
} 

/* set background color to green */
.home #inner-wrapper, .home #main {
background-color: #b8bf0d;
}

/* adjust position of logo */
#logo {
    margin-left:14%;
    width:20%;
}
/* top menu box */
.headerbox {
    float:left; 
    color:#ffffff; 
    margin-left:35%; 
    margin-top:1%;
    width:200px;
}
.headerbox a {
    color:#ffffff;
    font-family:"Open Sans", arial, sans-serif;
    font-size:15px;
    font-weight:400;
}
.headerbox a:hover {
    color:#b8bf0d;
}
.headerbox img {
    margin:3px 8px 0 5px;
}

#social-links img {
    padding:0 !important;
    margin:2px 0 !important;
}
#social-links {
    margin-left:-5px;
}

/* move navagation below logo */
.home #navigation {
    margin-top:-76%;
}

/* move content below large image */
.home #content {
    margin-top:73%;
}

/* remove image and slider from all secondary pages */
body:not(.home) #globe-text, body:not(.home) #home-slider {
    display:none;
}

#content {
    padding-right:10%;
}

/********************* navigation **********************************/
#navigation {
    background-color:#015570;
    font-family:"Open Sans", arial, sans-serif;
    font-weight:400;
}
#navigation ul {
    margin-left:13%;
}
#navigation ul li a {
    color:#ffffff;
    font-size:17px;
    font-family:"Open Sans", arial, sans-serif;
    font-weight:400;
}

/* set hover to green */
#navigation ul li a:hover {
    color:#b8bf0d;
    background-color:#015570 !important;
}

/* set background for sub-menus */
#navigation ul.sub-menu {
    background-image:url('/wordpress/wp-content/uploads/dropdown-background.png') !important;
    color:#52362e !important;
    font-weight:bold;
    max-width:230px; 
    background-color:transparent !important;
}

/* set font for submenus */
#navigation ul.sub-menu li a {
    color:#52362e !important;
    font-weight:bold;
    font-size:14px;
}

/* set hover for submenus */
#navigation ul.sub-menu li a:hover {
    background-color:transparent !important;
}

/* when hovering on submenu set parent menu item background to transparent */
.parent {
   background-color:transparent !important;
   }  

/* set border for dropdown menus */
#navigation ul.nav li ul, #navigation ul.cart > li > ul > div {
    margin-top:0px;
    border-top:5px solid !important;
    border-top-color:#b8bf0d !important;
    background-color:transparent !important;
} 

/* set color of top menu currently selected page */
ul.nav li.current_page_item a, ul.nav li.current_page_parent a, ul.nav li.current-menu-ancestor a, ul.nav li.current-cat a, ul.nav li.current-menu-item a {
    background: none repeat scroll 0 0 transparent;
    color: #b8bf0d !important;
}
/* add green slash divider on  main menu except on careers */
#navigation ul  li:not(#menu-item-25) a, #navigation ul li:not(#menu-item-25) a:hover {
    background-image:url("/wordpress/wp-content/uploads/menu-slash.png");
    background-repeat:no-repeat;
    background-position:right center;
    padding-right:20px;
    width:81%;
}
/* adjust width of our science */
/* add green slash divider on  main menu */
#navigation ul  li:nth-child(2), #navigation ul  li:nth-child(4) {
    padding-right:9px;
}
/* don't display the contact menu item in main nav, only in mobile toggle */
#navigation #menu-item-122 {
    display:none;
}

/***************** slider ***********************************/
.wooslider {
    background-image:url('/wordpress/wp-content/uploads/slider-background.jpg');
    opacity:.8;
}

.wooslider .slides img {
    width:72%;
    margin-left:13% !important;
}

/************* home news section ********************/
#home-news-heading {
   float:left; 
   width:32%;
   padding:15px 2% 2% 14%;
   color:#ffffff;
   }
   
#home-news-heading p {
   font-size:70px;
   color:#ffffff;
   line-height:1em;
   text-align:right;
   font-family:"Open Sans", arial, sans-serif;
   }
   
#home-news-loop {
   width:46%; 
   float:left;
   padding:2% 0 2% 2%;
   }
   
/* format post title  */
#home-news-loop .post .title, #home-news-loop .post .title a {
   font-size:14px;
   font-weight:bold;
   font-family:'Open Sans', arial, sans-serif;
   color:#000000 !important;
   } 
/* add a dotted border to the top */
#home-news-loop .post {
   border-top:2px dotted #ffffff;
   padding-top:15px;
   margin-bottom:0px;
   }
/* style the meta data */
#home-news-loop .post-meta {
   display:none;
   }
/* style date above post title */
#home-news-loop  abbr {
   display:block !important;
   border:none;
   margin-bottom:5px;
   font-size:14px;
   font-weight:bold;
   font-family:'Open Sans', arial, sans-serif;
   color:#ffffff;
   }
/* remove continue reading link */
.home .post-more {
    display:none;
}
.home #readmoretext {
    padding-bottom:0;
}
/* don't display readmore text at top of page content */
.home #main #readmoretext {
    display:none;
}
.home #home-news-loop #readmoretext {
    display:block;
}

   
/******* management page and board page ***************/
/* anchor links at top of page are in black */
.page-id-63 p a, .page-id-65 p a {
    color:#000000;
}
/************** our science page *******************/
/* style infographic */
#infographic img {
    margin:0;
    padding:0;
    width:16.5%
}
/********press release page **********************/  
/* align data and title */
.page-id-21 abbr {
    float:left;
    color:#000000;
    font-family:"Open Sans", arial, sans-serif;
    font-size:14px;
    font-weight:bold;
    border:none;
}
.page-id-21 abbr::after {
    content:" |";
    margin-right:3px;
}
/* set date and title to same line height */
.page-id-21 h2.title {
    line-height:1.5em
}
/* don't display meta data or post readmore*/
.page-id-21 .post-meta, .page-id-21 .post-more {
    display:none;
}
/* reduce margin after post text */
.page-id-21 .post {
    margin-bottom:0;
}
/* format custom readmoretext */
#readmoretext {
    margin-bottom:1em;
    padding-bottom:1em;
    font-weight:bold;
}
/* add dotted line border */
.page-id-21 #readmoretext {
    border-bottom:2px dotted #015570;
}
#readmoretext a {
        color:#015570 !important;
}

/* add brackets to readmoretext */
#readmoretext:before {
    content:"[";
    color:#015570;
    margin-right:2px;
}
/* add brackets to readmoretext */
#readmoretext:after {
    content:"]";
    color:#015570;
    margin-left:-3px;
}
.page-id-21 #readmoretext:first-of-type  {
    display:none !important;
}
/* only display readmore text on home, pressrelease and pubs page */
body:not(.page-id-21):not(.home) #readmoretext {
    display:none;
}

/************* publications page *******************/
/* don't display title or meta data */
.page-id-105 .post-meta, .page-id-105 .title, .page-id-105 abbr {
    display:none;
}
/* make paragraph margin smaller */
.page-id-105 p {
    margin-bottom:10px;
}
.page-id-105 #main .post  {
    border-bottom:2px dotted #000000;
    margin-bottom:10px;
}
.page-id-105 p a, .page-id-105 p a:hover {
    color:#015570;
    font-weight:bold;
}

/****************** single post *********************/
/* only display the arrow on single-post pages */
body:not(.single-post) #post-arrow {
    display:none;
}
.single-post #post-arrow {
    float:left;
    margin-right:15px;
    margin-top:-20px;
}
.single-post #main header {
    margin-top:20px;
}
/* don't display date or post meta on single post pages */
.single-post abbr, .single-post .post-meta {
    display:none;
}
.post-entries {
    display:none;
}


/**************** footer ***********************************/
/* set font styles and spacing of footer widgets */
#footer-widgets .widget_nav_menu h3, #footer-widgets .widget_nav_menu a {
    color:#ffffff;
    font-family:"Open Sans", arial, sans-serif;
    font-weight:400;
    font-size:14px;
    border:none;
    margin-bottom:0;
    padding-bottom:0;
    line-height:2em;
}
/* remove bullet from bulleted menu */
#footer-widgets .widget_nav_menu ul {
 list-style-type: none;
}

/* set widths for the footer widgets */
#footer-widgets {
    padding-left:13%;
}
#footer-widgets .footer-widget-1 {
    min-width: 250px !important;
    width: 250px !important;
}
#footer-widgets .footer-widget-2 {
    min-width: 150px !important;
    width: 150px !important;
}
#footer-widgets .footer-widget-3 {
    min-width: 120px !important;
    width: 120px !important;
}

#footer-widgets .footer-widget-4 {
    min-width: 130px !important;
    width: 130px !important;
}
/* align the two menus in widget 1 next to each other */
#nav_menu-2, #nav_menu-3 {
    float:left;
}
#nav_menu-2 {
    margin-right:50px;
}
#nav_menu-2, #nav_menu-3, #nav_menu-4, #nav_menu-5, #nav_menu-6 {
        margin-bottom:0;
}

#footer {
    padding-left:13%;
    padding-right:10%;
}
#footer p {
   color:#ffffff !important;
}
#footer p a, #footer p a:hover {
   color:#ffffff !important;
}
  
    
/***************** responsive adjustments ***************************/
@media only screen and (max-width:1170px)  {
     /* width of main contents area and sidebar for subpages */
    body:not(.home) #main {
       padding-right:4%;  
    }
    body:not(.home) #sidebar {
    width:18% !important;
}
}
    
@media only screen and (max-width:1000px)  {
/* increase width of home news section which cause it to stack */
#home-news-loop {
    clear: both;
    float: left;
    padding: 2% 0 2% 16%;
    width: 75%;
}
 /* width of main contents area and sidebar for subpages */
    body:not(.home) #main {
       width:80% !important;
       border-left:2px dotted #b8bf0d;
       padding-right:2%;  
       margin-left:16%;
    }
    body:not(.home) #sidebar {
    width:30% !important;
    padding-left:15%;
    clear:both !important;
    margin-top:3em !important;
}
}

@media only screen and (max-width:960px) {
/* change font size of menu */
#navigation ul li a {
    font-size:13px;
}

/* shift footer widget 4 down */
#footer-widgets .footer-widget-3 {
    clear:both;
} 
}
    
/* smaller than ipad portrait */
@media only screen and (max-width:767px)  {
    /* adjust position of content on homepage when toggle nav comes on */
    #content {
        margin-top:0 !important;
    }
    /* shift logo over yellow circle */
    #logo {
        margin-left:13%;
    }
    /* adjust navigation when toggle nav comes on */
    #navigation, .home #navigation {
       margin-top:0 !important;   
    }
    .nav-toggle {
       padding-left:5% !important;
    }
    /* shift content of toggle nav over to the left */
    #navigation ul {
        margin-left:0;
    }
    /* set style for toggle nav heading */
    #navigation h3 {
        color:#ffffff;
        font-size:16px;
        font-weight:bold;
    }
    /* move contact from headerbox to toggle nav */
    #navigation #menu-item-122 {
        display:block;
    }
    /* reposition linkin icon */
    #top-menu {
        display:none;
    }
    .headerbox {
        margin-left:0;
        margin-right:10%;
        margin-top:-15%;
        width:50px;
        float:right !important;
    }
    /* remove green slash dividers from mobile menu */
    #navigation ul li a, #navigation ul li a:hover {
        background-image:none !important;
    }
    /* position beauty */
    .beautybar img {
         margin-top:0;
    }

    /* stack footer widget 2  */
    #footer-widgets .footer-widget-2 {
        clear:both !important;
    }
    /* make infographic on science page bigger */
    #infographic img {
       width:32%
}
     
}
@media only screen and (max-width:600px)  {
    /* remove big globe and text */
    #globe-text {
        display:none;
    }
    /* display globe and text stacked images */
    .home #globe-text-stack {
        display:block !important;
    }   
    /* adjust background so yellow circle is aligned with logo */
    .home #header {
        background-position:17% top;
    }
    /* stack latest news heading and news loop */
    #home-news-loop {
    padding: 2% 0 2% 7%;
    width: 94%;
    }
    #home-news-heading {
    padding: 2% 0 2% 3%;
    width: 50%;
    }
    /* shift footer widgets to the left */
    #footer-widgets, #footer {
        padding-left:6%;
    }
    /* make slider img bigger */
    .wooslider .slides img {
    width:93%;
    margin-left:4% !important;
}   
    #logo {
        margin-left:6%;
    }
    /* width of main contents area and sidebar for subpages */
body:not(.home) #main {
    width:90% !important;
    border-left:2px dotted #b8bf0d;
    padding-right:6%;
    padding-left:20px;  
    margin-left:6%
}
body:not(.home) #sidebar {
    width:50% !important;
    padding-left:6%;
}
/* let page-intro text wrap around arrow */
#page-intro {
    margin-left:0px;
}

}
@media only screen and (max-width:500px)  {
    .headerbox {
        margin-top:-20%;
    }
        /* make infographic on science page bigger */
    #infographic img {
       width:50%
}
}