/*
 Theme Name:	Storefront Child
 Description:	Child theme of Storefront theme
 Theme URI:	https://woocommerce.com/storefront
 Author:	Melanie Felton
 Author URI:	melsramblings.com/CSciWordPress/
 Template:	storefront
 Version: 1.1
*/

/* colors to be used
 * Deep Green: #054d39, rgba(5,77,57,1)
 * Rich Red Brown: #rgba(77,18,5,1) #4d1205
 * Yellow Brown:rgba(), #4d3605
 * Dark Cobalt Blue-Purple: #1f054d
 *
 * */
/*@import "../storefront/style.css";*/
body, #masthead, .storefront-primary-navigation {
    background:#054d39;

}
#main h2 {
    color: #1f054d;
}
/* Comments */
#comments.comments-title {
    margin-top: 0.5em;
    color:#1f054d;
    size: 0.75em;
}
#comments.comments-area {
    width: 75%;
    float:left;
    
    margin-left: -2em;
}
#comments .form-submit #submit{
    background: #4d3605;
}

/* Woo Commerce related changes */
.site-search .widget_product_search input[type="search"] {
    
    background-image: linear-gradient(to bottom right, rgba(255,255,255,0.95), rgba(77,18,5,0.25));
    margin-right: 5%;
}
/* Site Search - woo-commerce */
#site-header-cart li a.cart-contents:link {
    padding: 0.5em;
    margin-right: 5%;
    width: auto;
}

/*Secondary Woo-commerce menu */
#menu-secondary-menu{
    width: 100%;
    background: rgba(255,255,255,0);
}

/*#menu-secondary-menu ul li a{
    width: 100%;
}

/*Choice 1: Set background image with overlay*/
#content {
       background-image: linear-gradient(to bottom right, rgba(255,255,255,0.95), rgba(77,18,5,0.25)),url("http://melsramblings.com/CSciWordPress/wp-content/uploads/2017/04/IMG_4576-1024x768.jpg");
       background-repeat: no-repeat;
       background-size: 100%;
       color: rgba(77,18,5,1);
}

/*Choice 2: Change generic link colors. */
#content a {
    color: #1f054d;
}
/*Header - width change
*/
/*.col-full {
width: 100vw;
}
*/
.site-header {
    width: 100%;
}

.site-branding {
    width: 75% !important;
}

.site-header .site-branding {
    margin-right: 0;
}

/*Header - Site title change
*/
.site-branding .site-title {
    font-weight: 700;
    font-size: 4em;
    font-style: italic;
    font-family: Times, fantasy, serif;
    width: 55%;
}
/*Header - Site Description
*/
.site-branding .site-description {
    font-size: 2em;
    width: 75%;
}

/*Main navigation menu
*/
.menu {
    height: 100%;
    background: rgba(0,0,0,0);
}

.main-navigation ul.menu > li:first-child, .main-navigation ul.nav-menu > li:first-child {
    margin-left: 0;
}

/*.main-navigation ul li {
    width: 20%;
}
*/
.menu a:link {
    background: #054d39;
    background-image: linear-gradient(to bottom, rgba(77,18,5,0.5), rgba(77,18,5,1));
    color: gray;
    height: 100%;
    border:solid;
    border-color: rgba(77,18,5,0.5);
}

.menu a:hover {
    background: #4d1205;
    color: #111111;
}

.menu a:active {
    background: #1f054d;
    color: #222222;
}

/*Choice 3: Style sub-menu*/
ul.sub-menu li.menu-item a:link {
    background: #054d39;
    background-image: linear-gradient(to bottom, rgba(77,18,5,0.5), rgba(77,18,5,1));
    color: gray;
}

ul.sub-menu li.menu-item a:hover {
    background: #4d1205;
    color: #111111;
}

ul.sub-menu li.menu-item a:active {
    background: #1f054d;
    color: #222222;
}

/*Choice 4: Give footer some character*/
footer.site-footer {
    background: rgba(77,18,5,0.5);
    background-image: linear-gradient(to bottom, rgba(77,18,5,0.5), rgba(77,18,5,1));
}

/*Footer - Making the WooCommerce part invisible while keeping the first line - my copyright visible
*/
footer.site-footer div.col-full div.site-info:first-line {
    color: rgba(255,255,255,0.5) !important;
}
footer.site-footer div.col-full div.site-info {
    color: rgba(5,77,57,0) !important;
}
footer.site-footer div.col-full div.site-info a{
    color: rgba(5,77,57,0) !important;
}

div.site, div.col-full {
    padding-right: 0;
}

/*Pages/Posts - heading
*/
.entry-header .entry-title {
    color: #4d1205; 
}

.entry-header .entry-title a {
    color: #4d1205; 
}

.page-title {
    color: #054d39;
}
/*Sidebar: Background Color
*/
.widget-area {
    background-color: rgba(5,77,57,0.5);
    background-image: linear-gradient(to bottom, rgba(5,77,57,0.5), rgba(255,255,255,0.75));
    padding: 0.5em;
    margin: 0;

}
/*Sidebar: Solid Border
 *Choice 5: Narrow padding between widgets.
*/
.widget-area .widget {
    border:solid;
    border-width: thin;
    border-color: #4d1205;
    padding: 0.5em;
    margin-bottom: 1em;
}

/*Secondary_Widget_Photo: Make photo look like other widgets. */
#secondary_widget_photo {
    border:solid;
    border-width: thin;
    border-color: #4d1205;
    padding: 0.5em;
    margin-bottom: 1em;
}

/*Choice 6: Add gradient background and image to aside. */
.entry-meta {
    background-color: rgba(31,5,77,0.5);
    background-repeat: no-repeat;
    background-position: center bottom;
    background-image: linear-gradient(to bottom, rgba(31,5,77,0.5), rgba(255,255,255,0.95)),url("http://melsramblings.com/CSciWordPress/wp-content/uploads/2017/04/IMG_0333-e1492392087395-225x300.jpg");
    padding: 0.5em;
}

.entry-meta a {
    color: #054d39;
}