NRPC/nrpc_site/style.css

body {
    background: url('images/bg.jpg') repeat-x #fff;
    color: #000;
    font-family: Arial, Helvetica, sans-serif;
    margin-bottom: 200px;
}

#wrapper {
    width: 100%;
    margin: 0 auto;
}

#header {
    height: 89px;
}

#logo {
    width: 40%;
    margin-top: 23px;
    margin-left: 30%;
}

#nav {
    float: right; margin-top: 30px;
    font-size: 12px; font-weight: bold; text-transform: uppercase; text-shadow: #ebebeb 1px 1px 0px;
}

#nav li {
    float: left; display: inline;
}

#notif {
    width: 25px;
    height: 20px;
    background-color: firebrick;
    color: white;
    border-radius: 20px;
    text-align: center;
    font-size: 16px;
    grid-area: notif;
    float: right;
    margin-top: -15px;
    text-shadow: none;
    visibility: hidden;
}

#nav a {
    display: inline-block; padding: 9px 13px; border: 1px solid transparent;
    color: #383838; text-decoration: none;
}

#nav input {
    display: inline-block; padding: 9px 13px; border: 1px solid transparent;
    color: #383838; text-decoration: none;
}

#nav li.active a {
    background: #d2d2d2; border: 1px solid #e4e3e4; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px;
}

#nav a:hover { color: #000; }

#loginpane {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-right: -50%;
    padding: 50px;
    transform: translate(-50%, -50%);
    background: url('images/masthead-bg.gif') #fff repeat-x;
    border: 1px solid #8d8d8d;
    background-position: 1px;
    -webkit-box-shadow: 0 4px 2px 2px #b0b2b4;
}

#loginpane h4 {
    font-weight: normal; color: #FF0000;
}

#masthead {
    position: relative;
    padding-bottom: 30px;
    border: 1px solid #8d8d8d;
    height: auto; padding-left: 28px; margin: 0 10px -2px;
    background-position: 1px;
    -webkit-box-shadow: 0 4px 2px 2px #b0b2b4;
    width: 96%;
    background: rgb(226,226,226);
    background: linear-gradient(180deg, rgba(226,226,226,1) 0%, rgba(208,244,252,1) 91%, rgba(135,206,235,1) 100%);
}

#masthead h2 {
    width: 50%; padding-top: 20px;
    font-size: 48px; line-height: 50px; letter-spacing: -2px;
    font-weight: bold; color: #383838; text-shadow: 1px 1px 0px #fff;
    margin-left: 50px;
}

#masthead h3 {
    width: 50%;
    font-size: 24px; line-height: 50px; letter-spacing: -2px;
    font-weight: bold; color: #383838; text-shadow: 1px 1px 0px #fff;
    margin-left: 50px;
}

#masthead p {
    width: 50%; padding: 21px 0 30px;
    font-family: Georgia, serif; font-size: 13px; line-height: 20px; color: #4f4f4f;
}

#masthead li {
    list-style-type: none;
    float: left; display: inline;
    margin: 0 11px 27px 0;
}

#blue-bar {
    position: relative; z-index: 10;
    background: #87ceeb repeat-x;
    width: 100%; height: 60px;
    color: #fff; text-shadow: 1px 1px 0 #2e5668;
    -webkit-box-shadow: 0 8px 4px 4px #b0b2b4;
    border: 2px solid #8d8d8d;
}

#blue-bar ul {
    font-family: Georgia, serif; font-style: italic;
    float: right;
    list-style: none;
    padding: 15px 30px 0 0;
}

#blue-bar li {
    float: left;
    border-left: 1px solid #fff;
    padding: 0 15px;
}

#blue-bar li:first-child {
    border-left: 0;
    padding: 0 15px 0 0;
}

#blue-bar li a {
    color: #fff;
    text-decoration: none;
}

#main {
    display: grid;
    grid-template-columns: auto 1fr 100px;
    background: #FFFFFF repeat-y;
    padding: 50px;
    margin-left: 10px;
    width: 92%;
    border: 2px solid #8d8d8d;
}

#content {
    float: left;
    width: 100%;
}

#content h2 {
    font-size: 43px; font-weight: normal; text-shadow: 1px 1px 0 #fff;
    padding-bottom: 20px;
}

#sidebar {
    float: right;
    width: 120%; padding: 36px 18px 0 21px;
    padding: 20px;
    margin-left: auto;
    background: #d3d3d3 bottom left repeat-x;
    -webkit-box-shadow: 0 8px 4px 4px #b0b2b4;
}
#sidebar h3 {
    font-size: 18px; font-weight: normal; text-shadow: 1px 1px 0px #e9e9e9;
    padding-bottom: 25px;
}

#footer {
    font-size: 11px; font-style: italic; font-family: Georgia, serif; color: #4f4f4f;
    background: #C0C0C0 top center no-repeat;
    padding: 29px 8px 30px 3px;
    -webkit-box-shadow: 0 8px 4px 4px #b0b2b4;
    width: 99%; 
    text-align: right; float: right;
}

#masthead ul:after, #main:after, .post:after, #footer:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

#part {
    display: grid;
    border: 2px solid #8d8d8d;
    border-radius: 10px;
    padding: 20px;
    margin: 30px;
    width: 90%;
    grid-template-columns: 1fr 1.6fr 0.6fr;
    grid-template-rows: 2fr 0.1fr 0.1fr;
    gap: 10px 10px;
    grid-template-areas:
        "image name name"
        "image price buy"
        ". stock .";
    -webkit-box-shadow: 0 2px 4px 4px #b0b2b4;
}
#part img { grid-area: image; width: 75%; height: auto; }
#part_price { grid-area: price; font-size: 40px; font-weight: bold; margin-left: auto; margin-right: 20px; margin-top: 10px;}
#part_stock { grid-area: stock; margin-left: 0}
#part_name { grid-area: name; }
#part input { grid-area: buy;}
#part a { font-size: 24px; font-weight: bold; }
#part a:link { text-decoration: none; color: #000; }
#part a:visited { color: #000; }
#part a:hover { color: #0000CD; }

#description {
    font-size: 24px;
    white-space: pre-line;
    line-height: 32px;
}

.buy {
    background-color: #4CAF50;
    border: 2px solid #8d8d8d;
    border-radius: 30px;
    color: white;   
    padding: 12px 24px 12px 24px;
    text-align: center;
    text-decoration: none;
    font-size: 18px;
    font-weight: bold;
    float: right;
    width: 175px;
    height: 60px;
    -webkit-box-shadow: 0 2px 2px 2px #b0b2b4;
    outline: none;
}

.buy:hover {
    background-color: #006400;
}

.incart {
    background-color: white;
    border: 2px solid #4CAF50;
    border-radius: 30px;
    color: #4CAF50;   
    padding: 12px 24px 12px 24px;
    text-align: center;
    text-decoration: none;
    font-size: 18px;
    font-weight: bold;
    float: right;
    width: 175px;
    height: 60px;
    outline: none;
    -webkit-box-shadow: 0 2px 2px 2px #b0b2b4;
}

.incart:hover {
    background-color: #F5F5F5;
}

.out {
    background-color: #8B0000;
    border: 2px solid #8d8d8d;
    border-radius: 30px;
    color: white;   
    padding: 12px 24px 12px 24px;
    text-align: center;
    text-decoration: none;
    font-size: 18px;
    font-weight: bold;
    float: right;
    width: 175px;
    height: 60px;
    -webkit-box-shadow: 0 2px 2px 2px #b0b2b4;
}

#part_display {
    display: grid;
    border: 2px solid #8d8d8d;
    border-radius: 10px;
    padding: 20px;
    width: 100%;
    grid-template-columns: 1fr 1.6fr 0.6fr;
    grid-template-rows: 2.4fr 0.4fr;
    gap: 10px 10px;
    grid-template-areas:
        "image name name"
        "image price buy";
    -webkit-box-shadow: 0 8px 4px 4px #b0b2b4;
}
#part_display img { grid-area: image; width: 100%; }
#display_price { grid-area: price; font-size: 48px; font-weight: bold; margin-left: auto; margin-right: 40px; }
#part_display input { grid-area: buy;}
#display_name { grid-area: name; font-size: 36px; font-weight: bold; }
#display_stock { grid-area: stock; }

.green-button {
    display: block; clear: left;
    width: 230px; height: 52px; line-height: 52px; padding-left: 50px;
    background: url('images/green-button.png') top left no-repeat;
    color: #fff; font-size: 26px; font-weight: bold; text-transform: uppercase; text-shadow: 1px 1px 3px #475d05; text-decoration: none; text-align: left;
}

.input_value {
    width: 50px;
    text-align: center;
    height: 30px;
    border: 0.1px solid #8d8d8d;
    background: #FFFFFF;
    border-radius: 15px;
    font-size: 20px;
    outline: none;
    -webkit-box-shadow: 0.1px 0.1px 25px #b0b2b4;
}

.input_btn {
    width: 30px;
    height: 30px;
    border-radius: 15px;
    border: 0.1px solid #8d8d8d;
    cursor: pointer;
    outline: none;
    background: #add8e6;
    font-size: 24px;
    box-shadow: 0.1px 0.1px 25px #8d8d8d;
}

.partcart {
    display: grid;
    border: 2px solid #8d8d8d;
    border-radius: 10px;
    padding: 20px;
    margin: 30px;
    width: 60%;
    height: 20%;
    grid-template-columns: 0.8fr 1.6fr 0.6fr;
    grid-template-rows: 2.4fr 0.4fr 0.1fr;
    gap: 10px 10px;
    grid-template-areas:
        "image name name"
        "image price price"
        ". stock count";
    -webkit-box-shadow: 0 2px 4px 4px #b0b2b4;
}
.count { grid-area: count; margin-left: auto; }
.partcart img { grid-area: image; width: 80%; height: auto;}
.cart_price { grid-area: price; font-size: 32px; font-weight: bold; margin-left: auto; margin-top: 10px;}
.cart_stock { grid-area: stock; margin-left: 0}
.partcart input { grid-area: buy;}
.partcart a { font-size: 18px; font-weight: bold; }
.partcart a:link { text-decoration: none; color: #000; }
.partcart a:visited { color: #000; }
.partcart a:hover { color: #0000CD; }

#stock_table {
    font-size: 24px;
}

.btn {
    background-color: #59bfff;
    border: 2px solid #8d8d8d;
    border-radius: 30px;
    color: white;   
    padding: 12px 24px 12px 24px;
    text-align: center;
    text-decoration: none;
    font-size: 18px;
    font-weight: bold;
    height: 60px;
    -webkit-box-shadow: 0 2px 2px 2px #b0b2b4;
    outline: none;
}

.btn:hover {
    background-color: #3792CB;
}

.fld {
    height: 30px;
    border: 0.1px solid #8d8d8d;
    margin-top: 15px;
    padding-left: 10px;
    background: #FFFFFF;
    border-radius: 15px;
    font-size: 20px;
    outline: none;
    width: 150%;
}

.filter {
    height: 30px;
    border: 0.1px solid #8d8d8d;
    margin-top: 15px;
    padding-left: 10px;
    background: #FFFFFF;
    border-radius: 15px;
    font-size: 20px;
    outline: none;

}

.txt {
    font-size: 24px;
    font-weight: bold;
    margin-top: 15px;
}