/*
    STYLE TEMPLATE 1
*/

/*top bar links*/
.font1 {
	font-family: 'Open Sans', sans-serif;
    font-size: 1em;
}
/*category links*/
.font2 {
	font-family: 'Open Sans', sans-serif;
    font-size: 1em;
}
/*footer links*/
.font3 {
	font-family: 'Open Sans', sans-serif;
    font-size: 0.85em;
}
/*product names on category page*/
.font4{
	font-family: 'Open Sans', sans-serif;
    font-size: 1em;
}
/*product info on category page*/
.font5 {
	font-family: 'Open Sans', sans-serif;
    font-size: 1em;
}
/*title on product page*/
.font6 {
	font-family: 'Open Sans', sans-serif;
    font-size: 1em;
}
/*standard body text*/
.font7 {
	font-family: 'Verdana', sans-serif;
    font-size: 1em;
}

@media(min-width: 0px)
{
	/* CONTENT */
    .container {
        max-width: 100% !important;
		padding: 0;
		margin: 0;
    }
	
    body {
        padding-top: 50px;
        padding-bottom: 0px;
    }
	
	#body-content-row {
		margin: 0;
		padding: 0;
    }
	
	
    /* HOME PAGE ANNOUNCEMENT */
    .announcement1 {
        position: relative;
		padding-bottom: 30px;
        background: rgba(%ANNOUNCEMENTRGBA%);
    }
    .announcement1 > .announcementText {
        padding: 30px;
        color: #%ANNOUNCEMENTCOLOR%;
    }
    .announcement1 > .announcementToggle {
        position:absolute;
		bottom: 0;
		display:block;
		width: 100%;
		padding: 5px 30px;
        text-align: right;
        background-color: #%ANNOUNCEMENTTOGGLEBG%;
        color: #%ANNOUNCEMENTTOGGLECOLOR%;
        cursor: pointer;
    }

    .announcement2 {
        background: rgba(%ANNOUNCEMENTRGBA%);
    }
    .announcement2 > .announcementText {
        color: #%ANNOUNCEMENTCOLOR%;
    }

    /* TOP BAR */
    .fixed-top {
        max-height: 50px;
        background-color: #4b4f54;
    }

    #btnGlobalSearch{
        color:#%TOPBARSEARCHICONCOLOR%;
    }

    .navbar-user > #navbar-user-content > .navbar-nav > .nav-item a {
        color: #ffffff;
    }
    #navbar-user-content {
        background-color: #4b4f54;
        padding: 3px;
    }
    .navbar-user > #navbar-customlink-content > .navbar-nav > .nav-item a {
        color: #ffffff;
    }
    #navbar-customlink-content {
        background-color: #4b4f54;
        padding: 3px;
    }
	/* admin control panel dropdown */
	.navbar-user > #navbar-customlink-content > .navbar-nav > .dropdown > .dropdown-menu a {
		color: #ffffff;
	}

    /* CATEGORY BAR */

    #navbar-categories {
        padding: 0px 16px !important;
        background-color: #c1c6c8;
    }
    #navbar-categories > .navbar-toggler {
        color: #ffffff;
    }
    #navbar-categories .nav-item a {
        display:block;
        height:100%;
        padding: 10px 15px;
        color: #ffffff;
    }
    #navbar-categories .nav-item a:hover {
        background-color: #c1c6c8;
        color: #4b4f54;
    }
    #navbar-categories .dropdown-menu {
        background-color: #c1c6c8;
    }

    #navbar-categories-content {
        min-height: 42px;
    }
    #navbar-categories-content > ul {
        min-height: 42px;
    }

    .active-category {
        background-color: #00677f !important;
        color: #ffffff !important;
    }
    .active-category:hover {
        background-color: #%ACTIVECATHOVERBG% !important;
        color: #%ACTIVECATHOVERCOLOR% !important;
    }

    /* RIGHT SIDE CATEGORY BAR */
    #categoryListContainer {
        margin-top: 15px;
        border: solid 1px %CATLISTHEADERBG%;
    }
    #categoryListHeader {
        padding: 10px 5px 10px 15px;
        background-color: #%CATLISTHEADERBG%;
    }
    #categoryListHeader h5 {
        color: #%CATLISTHEADERCOLOR%;
    }
    #categoryListBody {
        background-color: #%CATLISTBODYBG%;
    }
    .categoryListParent span {
        font-weight: 600;
        color: #%CATLISTPARENTCOLOR% !important;
    }
    .categoryListItem a {
        color: #%CATLISTITEMCOLOR% !important;
    }
    .categoryListItem a:hover {
        color: #%CATLISTITEMHOVERCOLOR% !important;
    }

    /* CONTENT SECTION */
    #pageTitle {
        background-color: #4b4f54;
        color: #ffffff;
        margin-bottom: 15px;
    }

    /* FOOTER */
    footer {
        position:relative;
        background-color: #c1c6c8;
        color: #00677f;
        padding: 15px;
    }

    footer h6 {
        font-size: 1.05em;
        color: #%FOOTERHEADERCOLOR%;
    }
    footer p {

    }
    footer a {
        color: #00677f;
    }
    footer a:hover {
        text-decoration: none;
        color: #ffffff;
    }
	
	/* category page */
	.storeGridCol {
		margin: 15px auto;
	}
	
	.productDisplay {
		border: solid 1px c1c6c8;
	}
	.productLink {
		display:block;
		color: #4b4f54;
	}
	.productLink:hover {
		text-decoration: none;
		color: #ffffff;
	}
	.productNameContainer {
		background-color: #c1c6c8;
		min-height: 50px;
	}
	.productInfo {
		padding: 5px 10px;
		min-height: 30px;
		background-color: #4b4f54;
		color: #ffffff !important;
	}

	/* product page */
	#productTitle {
		margin-top: 15px;
	}

    .productInfoDisplayTable th {
        background-color: #4b4f54;
		color: #ffffff;
        border: none !important;
    }
    .productInfoDisplayTable tbody {
        border: none !important;
    }

    /* CART DISPLAY */

    /*striped list table*/
    .itemListTable {
        padding: 0px 15px;
    }
    .itemListTitleRow {
        font-weight: 600;
    }
    .itemListRow {
        border-top: solid 1px #e0e0e0;
    }
    .itemListRow:nth-child(odd) {
        background-color: #f4f4f4;
    }
    .itemListCol {

    }
    .itemListAlignMiddle {
        position:relative;
        top: 20%;
    }

    /*order confirmation*/
    .orderConfirmation {
        border: solid 1px #ddd;
        border-radius: 4px;
        margin-bottom: 20px;
    }

    /* INVENTORY OVERVIEW */

    .invTableProductHeader {
        background-color: #c1c6c8;
        color: #4b4f54;
    }
    .invTableProductHeader > a {
        color: #4b4f54;
    }
    .invTableProductRow {
        background-color: #4b4f54;
        color: #ffffff;
    }
    .invTableProductRow > a {
        color: #ffffff;
    }

}

@media (min-width: 576px) {

    /* CONTENT */
    .container {
        max-width: 100% !important;
    }

}

@media(min-width: 768px) {

	/* CONTENT */
    .container {
        max-width: 100% !important;
		margin: auto !important;
    }
	
    body {
        padding-top: 50px;
        padding-bottom: 0px;
        font-size: 1em;
    }
	
	#body-content-row {
		position: relative;

    }

	/* HOME PAGE ANNOUNCEMENT */
    .announcement1 {
        position: absolute;
		top: 0;
		left: 15%;
		right: 15%;
		z-index: 101;
		padding-bottom: 30px;
        background: rgba(%ANNOUNCEMENTRGBA%);
    }
    .announcement1 > .announcementText {
        padding: 30px;
        color: #%ANNOUNCEMENTCOLOR%;
    }
    .announcement1 > .announcementToggle {
        position:absolute;
		bottom: 0;
		display:block;
		width: 100%;
		padding: 5px 15px;
        text-align: right;
        background-color: #%ANNOUNCEMENTTOGGLEBG%;
        color: #%ANNOUNCEMENTTOGGLECOLOR%;
        cursor: pointer;
    }

    .announcement2 {
        background: rgba(%ANNOUNCEMENTRGBA%);
    }
    .announcement2 > .announcementText {
        color: #%ANNOUNCEMENTCOLOR%;
    }
	
	/* TOP BAR */
    .fixed-top {
        min-height: 50px;
    }

    #navbar-user-content {
        padding: 0;
    }
    #navbar-customlink-content {
        padding: 0;
    }
	
	/* FOOTER */
    footer {
		min-height: 50px;
    }

}

@media(min-width: 992px) {

    /* CONTENT */
    .container {
        max-width: 960px !important;
    }

    /* CATEGORY BAR */
    #navbar-categories .nav-item a:active {

    }

    #navbar-categories .active-category a:active {

    }

}

@media(min-width: 1200px) {

    /* CONTENT */
    .container {
        max-width: 1140px !important;
    }

}