/*
This is the CSS file for NCAWEB WovenPatchStore.com.
By Nick Arellano
Last edited December 10, 2019
*/
/* 
    Created on : Nov 18, 2019, 2:38:16 PM
    Author     : Nick Arellano
*/
html{font-size:100%;}
@media(min-width:60em){html{font-size: 100%}}

body {
    background-color:#ffffff;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1em;
}           

/*h settings*/
h1 {color:#ffffff; font-size: 130%}
h2 {color:#ffffff; font-size: 125%}
h3 {color:#484848; font-size: 115%}
h4 {color:#ffffff; font-size: 100%}
h5 {color:#484848; font-size: 80%}

p {font-size: 110%;
}

a:link {
text-decoration: none;
}

b {
    font-weight: bold;
}

img {
    height: 100%;
    width: 100%;
}

.item1 { grid-area: header; }
.item2 { grid-area: nav1; }
.item3 { grid-area: nav2; }
.item4 { grid-area: nav3; }
.item5 { grid-area: nav4; }
.item6 {grid-area: intro;}
.item7 {grid-area: process;}
.item8 {grid-area: process_image;}
.item9 {grid-area: contact;}
.item10 {grid-area: footer1;}
.item11 {grid-area: footer2;}
.item12 {grid-area: sample1;}
.item13 {grid-area: sample2;}
.item14 {grid-area: sample3;}
.item15 {grid-area: sample4;}
.item16 {grid-area: services;}
.item17 {grid-area: sample5;}
.item18 {grid-area: sample6;}
.item19 {grid-area: sample7;}
.item20 {grid-area: sample8;}
.item21 {grid-area: sample9;}
.item22 {grid-area: sample10;}
.item23 {grid-area: sample11;}
.item24 {grid-area: sample12;}

.grid-container {
    display: grid;
    grid-template-columns: 25% 25% 25% 25%;
    grid-template-areas: 
        'header header header header'
        'nav1 nav2 nav3 nav4'
        'intro intro intro intro'
        'services services services services'
        'process process process process'
        'process_image process_image process_image process_image'
        'contact contact contact contact'
        'sample1 sample2 sample3 sample4'
        'sample5 sample6 sample7 sample8'
        'sample9 sample10 sample11 sample12'
        'footer1 footer1 footer2 footer2';
    grid-gap: 0px;
    background-color: #cccccc;
    padding: 5px;
    margin-bottom: 25px;
}

.grid-container > div {
    background-color: #ffffff;
    text-align: center;
    padding: 0px;
    font-size: 100%;
    color: #484848;
    border-style: solid;
    border-color: #484848;
    border-width: 1px;
}

/*header*/
div.item1 {
    background-color: #000000;
    text-align: center;
    padding: 0px;
    font-size: 20px;
    color: #ffffff;
}

/*nav bar */
div.item2, div.item3, div.item4, div.item5, a {
    background-color: #000000;
    text-align: center;
    padding: 5px 5px 5px 5px;
    font-size: 16px;
    color: #ffffff;
}

/* content */
div.item6, div.item7, div.item8, div.item9, div.item16, p {
    background-color: #ffffff;
    text-align: left;
    padding: 0px 5px 0px 5px;
    font-size: 14px;
    color: #484848;
}

/* footer */
div.item10, div.item11 {
    background-color: #ffffff;
    text-align: left;
    padding: 5px 5px 5px 5px;
    font-size: 12px;
    color: #484848;
    font-size: 12px;
}

.item10 a {
    background-color: #ffffff;
    text-align: left;
    padding: 0px 5px 5px 0px;
    font-size: 12px;
    color: blue;
    text-decoration: underline;
}
.item11 a {
    background-color: #ffffff;
    text-align: left;
    padding: 0px 5px 5px 0px;
    font-size: 12px;
    color: blue;
    text-decoration: underline;
}