/*
Theme Name: Business Card Child
Theme URI: 
Description: Child Theme for Business Card
Author: Paul Appleby
Author URI: http://www.paulappleby.com
Template: business-card
Version: 0.1
*/

@import url("../business-card/style.css");

html {
  height: 100%; /* Appleby Jan 3/17 added to help keep the footer at the bottom of the page. */
  /*background-color: #bbbbbb;*/  /* Appleby Dec 15/16 added to "remove" white below the footer if there isn't enough content to push the footer to the bottom of the browser. But on Jan 3/17 Appleby commented it out. No longer needed. */
}

body {
    font-family: arial, sans-serif;
    color:#9aa7af;
    font-weight:400;
    word-wrap:break-word;
    height: 100%;  /* Appleby Jan 3/17 added to help keep the footer at the bottom of the page. */
}

input {  /* Appleby Dec 19/16 added to remove all borders. */
    border: none;
}

input:focus {  /* Appleby Dec 19/16 added to remove all borders onfocus. */
    outline: none;
}

*{ 
    /*border: 1px solid red;*/   /* Appleby Dec 15/16 added to help debug the layout. */
}

.clear_all {
    clear: both;
}

#main_container {  /* Appleby Jan 3/17 added to help keep the footer at the bottom of the page. */
   min-height: 100%;
   position: relative;
}

#kt-logo-area{
    line-height:100px;
    font-weight:700;
    background-color: #bbbbbb; /* Appleby Dec 15/16 added give the area above the banner more interest and work with the logo. */
}

#kt-logo{
    line-height:80px;
    font-size:26px;
    padding: 10px 0 10px 0; /* Appleby Dec 15/16 added to give space between the logo and the nav bar above it and banner image below it. */
}

#kt-main-nav ul li a{
    padding:0 10px; /* Appleby Dec 19/16 changed padding from 15px to 10px. */
    color: black;
}

#kt-main-nav ul li a:hover {
    color: white;
}

.current_page_item {
    /*font-size: 50px;*/ /* Works */
    /*color: white;*/ /* Doesn't work */
    background-color: #dddddd; /* Appeby Dec 19/16 added to distinguish the nav item for the current page the visitor is on. */
}

.slicknav_nav .current_page_item {
    background-color: #999999;  /* Appeby Dec 19/16 added to distinguish the mobile nav item for the current page the visitor is on. */   
} 

.img-responsive { /* Appeby Jan 3/17 added this class here to override the "max-width" in "themes/business-card/css/bootstrap.min.css?ver=4.7" which prevented the banner image from expanding to fill the page width when the resolution width was over 1920px. Otherwise a white space was displayed to the right of the image. */
     width: 100%;
} 

a.kt-article-title {
    /*font-family: "Arial Narrow", Arial, sans-serif; */
    font-family: Arial, sans-serif;
    font-style: italic;
}

.kt-article-content {
    /*max-width: 1080px;*/ 
    width: 140%; /* Appleby Dec 15/16 added to widen the main content text to go over where the sidebar would be. */
}

#logos_container {  /* Appleby Jan 5/17 added. */
    background: #ffffff;
    width: 100%;
    /*display: flex;*/ /* works to vertically align in middle but not in mobile */
    /*align-items: center;*/ /* works to vertically align in middle but not in mobile */
    text-align: center;
    border-top: 1px solid #bbbbbb;
    padding:10px 0;
    /*border: 1px solid red;*/
}

.logos {  /* Appleby Jan 5/17 added. */
    max-width: 100px;
    height: auto;
    padding: 5px 10px;
    /*border: 1px solid green;*/
}

#kt-footer{
    position:absolute;
    bottom: 0;
    width: 100% 
    background: #bbbbbb; /* Appleby Dec 15/16 added to use a matching colour in the footer as in the top nav bar. */   
    /* Appleby Jan 3/17 commented out the above bg color. No longer needed. */
    padding:20px 0;
    color:#fcfcfc;
}

#kt-copyright{
    font-size:12px;
    color:#6d7a83;
    /*padding:15px 0;*/
    background:#bbbbbb;
    border-bottom:5px solid #bbbbbb; /* Appleby Dec 15/16 added to use a matching colour in the footer as in the top nav bar. */
}

#quote_form_container { /* Appeby Dec 19/16 added to reposition the quote form. */
    position: relative;
    left: 20px;
    top: -50px;;
    width: 90%
    text-align: left;
}

.quote_form_element_title { /* Appeby Dec 19/16 added to control the title of the quote form input fields. */
    /*font-family: arial;*/
    font-size:1.0em;
    /*float: left;
    width: 30%;*/
}

.quote_form_element_title::after { 
    content: " *";
    color: red;
    font-size: 18px;
    font-weight: bold;
    position: relative;
    top: 3px;
}

.required_fields_note {
    position: relative;
    top: -20px;
}

.quote_form_section_separator { /* Appeby Dec 19/16 added to control the section separators of the quote form input fields. */
    height: 50px;
    clear: both;
}

.quote_form_title_separator { /* Appeby Dec 19/16 added to control the separator of the title and the input fields of the quote form input fields. */
    display: block;    
    height: 1px;
}

.quote_form_input { /* Appleby Dec 19/16 added to display only the bottom border of input fields. */
    width: 300px;
    padding: 5px;
    font-size: 20px;
    border-bottom: solid 1px #aabbff;
} 

.quote_form_submit_reset {  /* Appeby Dec 19/16 added to position the quote form's submit, reset and clear buttons. */
    border:solid 1px #b1ab8d;
    color: #999999;
    font-weight: bold; 
    padding:5px 5px 5px 5px;
    margin-right: 10px; 
    margin-top: 10px;
    -moz-border-radius: 3px; 
    border-radius: 6px;
    border: 2px solid #999999; 
    background-color: #E4E7EE;
    width: 200px; 
    text-align: center;
    box-shadow:5px 5px 10px #999999;
    float: left;
}

.slicknav_menu  { position: absolute; right: 5px; top: 10px; z-index: 300; visibility: hidden; }
.slicknav_btn { position: relative; left: 0px; top: 0px; z-index: 200; width: 100px; height: 40px; vertical-align: middle; float: right; padding: 0.438em 0.625em 0.438em 0.625em; line-height: 1.125em; cursor: pointer; }
.slicknav_menutxt { visibility: visible; }

@media (min-device-width: 320px) and (max-device-width: 768px), (max-width: 900px) {
    
    .kt-article-content {
        width: 100%;  /* Appleby Dec 15/16 added so that in mobile the main content text would not run past the device width. */
    }
    
    .slicknav_menu  { visibility: visible; line-height: 1.188em; background: transparent; }
    
    .slicknav_nav ul,
    .slicknav_nav li { display: block; background-color: #bbbbbb; border: 1px solid black; }
    
    #kt-logo {
        margin-left: 10px; /* Appleby Dec 21/16 changed from my original 20px to 10px to work better with my adding slicknav above. */
    }
    
    #logo_image {
        width: 180px; height: auto;
    }
    
    #quote_form_container { /* Appeby Dec 19/16 added to position the quote form in mobile. */
        position: relative;
        left: 20px;
        top: -100px;
        width: 80%;
        text-align: left;
    }
    
    .quote_form_input { /* Appleby Dec 19/16 added to display only the bottom border of input fields. */
        width: 90%;
        padding: 5px;
        font-size: 12px;
        border-bottom: solid 1px #aabbff;
    }
    
    .logos {  /* Appleby Jan 5/17 added. */
        max-width: 100px; /* If a percentage, e.g. 20%, in mobile, all four logos will fit horizontally but will be smaller and together fill the width of the page. */
        /*border: 1px solid green;*/
    }
    
} 

@media (max-width: 1220px) {

    .kt-article-content {
        width: 100%; /* Appleby Dec 15/16 added so that in mobile the main content text would not run past the device width. */
    }    

} 

@media (min-width: 1000px) {
    
    .kt-article-content {
        width: 140%; /* Appleby Dec 15/16 added so that over this size device width the main content text would go over where the sidebar would be. */
    }    

}