@font-face {
	/* see the head tag in the html; generated by google fonts */
	/*font-family: 'PT Sans', sans-serif;*/
	font-family: sans-serif;
}

/* Responsiveness , https://www.w3schools.com/css/css_rwd_grid.asp */
* {
	box-sizing: border-box;
}

.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}

[class*="col-"] {
	float: left;
	padding: 5px;
	border: 0px solid gray;
}

.row::after {
	content: "";
	clear: both;
	display: table;
}

.loginForm1 {
	float: right;
}

.responsiveMenuShortcut {
	background-color: white;
	display: inline-block;
	border: 1px solid green;
	margin: 5px 0 5px 0;
	padding: 2px;
	width:100%;
	display:none;
}

.commonbg {
	background-color: #7A9900;
}

.darkerbg {
	background-color: #2C3E0C;
}

/* end of responsiveness */
a {
	color: #375C00;
	text-decoration: none;
	word-wrap:break-word;
}
a:hover {
	color: #786900;
}

button {
	cursor: pointer;
}

html {
	height: 100%;
	font-size: 16px;
}
body {
	height: 100%;
	margin: 0px;
	padding: 0px;
	background-color: #E1E1E1;
	font-family: sans-serif;
	font-size: 1rem;
}

table.common_table {
	border-collapse: collapse;
}

table {
	background-color: white;
	border-collapse: collapse;
}

table.common_table td {
	border: 1px solid #DDF2BA;
	background: white;
	text-align: center;
}

.post_1 td {
	background-color: blue;
}

td {
	border-collapse: collapse;
	border: 1px solid #DDF2BA;
	text-align: center;
}

.login {
	display: inline-block;
	border: 1px solid rgb(176,176,176);
	background: white;
	margin: 0 auto 0 auto;
	padding: 4px;
	width: auto;
	text-align: right;
}

#loginBoxMainPage {

}

#passwordBoxMainPage {

}

.loginBoxesStandard {
	border: 1px solid black;
	color: grey;
}

.container {
	min-width: 350px;
	max-width: 80%;
	margin-left: auto;
	margin-right: auto;
	margin-top: 0px;
	height: auto;
}

.head {
	position: relative;
	height: auto;
	background-color: #7a9900;
	margin: 0px;
}

.head-wide {
	position: absolute;
	z-index: -1;
	height: 100px;
	width: 110%;
	background-color: #7a9900;
	margin: 0px;
}

.smallheader {
	width: 100%;
	height: 30px;
	margin-left: auto;
	margin-right: auto;
	background-color: #385D00;
}

.search {
margin-left: auto;
margin-right: 0;
margin-top: 0;
float:right;
}

.menudiv {
	position: relative;
	height: auto;
	padding-top: 0;
	padding-bottom: 0;
	padding-left: 0;
	bottom: 0;
}

.menubutton {
	float: left;
	height: 30px;
	/*width: 80px;*/
	padding-left: 5px;
	padding-right: 5px;
	color: white;
	background-image: url('/themes/verbena/img/bnative.png');
}

.menubutton:hover {
	color: gray;
}

#buttonselected {
	background-image: url('/themes/verbena/img/bsel.png');
	color: #2C3E0C;
}

.menutxt {
	text-align: center;
	vertical-align: middle;
	line-height: 30px;
}

.bsep {
	float: left;
	width: 1px;
	height: 30px;
	background-image: url('/themes/verbena/img/bsep.png');
}

.separatorline {
	clear: both;
	position: relative;
	height: 5px;
	background-color: #c6c6c4;
}
	
.content {
	padding-top: 15px;
	padding-bottom: 5px;
	height: auto;
	width: 100%;
	/* display: table; */
/*	background-color: #f6f6f6; */
}

.glavna_products {
	position: relative;
	float: left;
	/* min-width: 350px; */
	width: 100%;
	border: 1px solid rgb(176,176,176);
	background-color: white;
	padding: 5px;
	
}

.glavna_blog {
	position: relative;
	float: left;
	/* min-width: 350px; */
	width: 100%;
	border: 1px solid rgb(176,176,176);
	background-color: white;
	padding: 5px;
	height: auto;
}

.rightmenu {
	position: relative;
	float: left;
	margin-top: 0px;
}

.rightmenu_cnt {
	margin-bottom: 5px;
	padding: 4px;
	border: 1px solid rgb(176,176,176);
	background-color: white;
	text-align: left;
	overflow-y: hidden;
}

.blog_index {
	position: relative;
	width: 100%;
	border: 1px solid black;
	background-color: white;
	margin: 0 0 5px 0;
	padding: 3px;
}

.blog_main {
	position: relative;
	float: left;
	margin-left: auto;
	margin-right: auto;
	width: 40%;
	border: 1px solid black;
	background-color: white;
}

.blog_content {
	/* top right bottom left */
	padding: 5px 5px 5px 5px;
	text-align: justify;
	height: auto;
/*	background-color: #f6f6f6; */
}

.products_index {
	position: relative;
	float: left;
	width: 20%;
	border: 1px solid #E8E8E8;
	background-color: white;
}

.products_main {
	position: relative;
	float: left;
	margin-left: 3%;
	margin-right: auto;
	width: 63%;
	border: 1px solid black;
	background-color: white;
}

.prodTitle {
	font-size: 1.1em;
}

.prodSubtitle {
	color: #515151;
	font-style: italic;
}

.prim_item {
	height: auto;
}

.prim_title {
	color: #3C6006;
	font-size: 1.8rem;
	font-family: "Verdana";
	font-style: serif;
	font-weight: normal;
	font-stretch: extended;
	line-height: 150%;
	border: 0px solid black;
}

.prod_item {
	clear: both;
	height: auto;
}

.prod_title {
	color: #3C6006;
	font-size: 1.8rem;
	font-family: "Verdana";
	font-style: serif;
	font-weight: normal;
	line-height: 100%;
	border: 0px solid black;
}

.prod_pic {
	float: left;
	width: 200px;
	height: 200px;
	border: 1px solid #DDF2BA;
	margin: 0 10px 10px 0;

	background-repeat: no-repeat;
	background-position: center center;
	overflow: hidden;
	text-align: center;
	/* background-attachment: fixed;*/
}

.prod_pic img {
	/*
	min-width: 200px;
	min-height: 200px;
	*/
}

.prod_descr {
	border: 0px solid black;
	text-align: justify;
}

.blog_item {
	height: auto;
	min-height: 80px;
	padding-bottom: 20px;
}

.blog_title {
	color: #3C6006;
	font-size: 1.8rem;
	font-family: "Verdana";
	font-style: serif;
	font-weight: normal;
	border: 0px solid black;
	line-height: 100%;
	margin-bottom: 10px;
}

.blog_thumb {
	float: left;
	width: 15em;
	height: auto;
	border: 1px solid #DDF2BA;
	margin: 0px 5px 0px 0px;

	background-repeat: no-repeat;
	background-position: center center;
	overflow: hidden;
	/* background-attachment: fixed;*/
}

.blog_thumb img {
	width: inherit;
}

.blog_thumb_big {
	width: 20em;
	height: auto;
}

.blog_thumb_big img { 
	width: inherit;
	/* min-height */
}

.blog_descr {
	border: 0px solid black;
}

.blog_post {
	overflow:hidden; /* credit: https://stackoverflow.com/questions/9463069/grow-height-of-parent-div-that-contains-floating-nested-divs#9463198 */
	position: relative;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 5px;
	width: 100%; /* see dummy width */
	height: auto;
	min-height: 200px;
	border: 1px solid black;
	background-color: white;
	padding: 5px 0px 0px 5px;
	word-wrap: break-word;
}

.blog_post_content {
	min-height: 220px;
}

.item_separator {
	clear: both;
	margin: 20px 10px 20px 10px;
	height: 0px;
	border-top: 1px solid #BCBCBC;
}

.store_menu {
	margin-bottom: 5px;
	margin-right: 5px;
	width: auto;
	padding: 3px;
	height: auto;
	border: 1px solid grey;
	background: white;
}

.store_item_pic {
	margin-left: auto;
	margin-right: auto;
	margin-top: 0px;
	width: 200px;
	height: 200px;
	border: 1px solid #DDF2BA;
	
	background-repeat: no-repeat;
	background-position: center center;
	overflow: hidden;
	text-align: center;
	vertical-align: middle;
	/* background-attachment: fixed;*/
}

.store_item_pic img{
	/*
	min-width: 200px;
	min-height: 200px;
	*/
}

/* https://stackoverflow.com/questions/17455811/swap-div-position-with-css-only */
.storeProductsTable {

}

.storeProduct {
	width: 230px;
	height: 320px; 
	border: 1px solid gray;
	background-color: white;
	float: left;
	text-align: center;
	padding: 5px;
	margin: 0 5px 5px 0;
	overflow: auto;
}

.storeProduct:hover{
	background-color: #CED59C;
}

.debug {
	position: relative;
	border: 1px solid red;
}

.message {
	border: 1px solid black;
	color: red;
	font-weight: bold;
}

.company_messages {
	border: 0px solid green;
	color: green;
	margin: 10px 0 0 50px;
}

.pr_details {
 border: 1px solid gray;
 background: white;
 padding: 10px;
	margin-bottom: 10px;
}

.pr_details_pic {
	float: left;
	width: 200px;
	height: 200px;
	border: 1px solid #DDF2BA;
	margin: 0 15px	15px 0;

	background-repeat: no-repeat;
	background-position: center center;
	overflow: hidden;
	text-align: center;
	/* background-attachment: fixed;*/
}
.pr_details_title {
	color: #3C6006;
	font-size: 1.9em;
	font-family: "Verdana";
	font-style: serif;
	font-weight: normal;
	border: 0px solid black;
}

.pr_details_descr {
	color: #333333;
	text-align: justify;
}

.headerFooter {
	width: 100%;
	height: auto;
}

.footercontainer {
	height: auto;
}

.footercol {
	position: relative;
	float: left;
	padding: 10px;
	min-width: 100px;
	color: white;
}

.footercol a {
	color: gray;
}


.footercol a:active {
	color: yellow;
}

.topic {
	background-color: white;
	border: 1px solid #7A9900;
	padding: 5px;
}

.footerseparator {
	clear: both;
	height: 10px;
	border-bottom: 3px solid #C6C6C4;
}

.pagerbox {
	margin-right: 5px;
	float: left;
	min-width: 2em;
	min-height: 1.5em;
	border: 1px solid black;
	background-color: white;
	text-align: center;
	vertical-align: middle;
	line-height: 1.5em;
}
.pagerbox:hover {
	background-color: #E5FC8C;
}

ul {
  display: block;
  list-style-type: disc;
  margin-top: 1em;
  margin-bottom: 1 em;
  margin-left: 0;
  margin-right: 0;
  padding-left: 40px;
}

.copyright {
 clear: both;
 color: white;
 margin: 5px;
 padding: 5px;
 text-align: center;
}

#citiesTable td {
	text-align: left;
	background: none;
}

#citiesTable tr:hover {
	background-color: #EAF4E8;
}

.citiesRow {
	font-weight: bold;
}

.ordersTable td {
	text-align: left;
}

.tableTemplate1 td {
	text-align: left;
	background: none;
}

.tableTemplate1 tr:hover {
	background-color: #EAF4E8;
	cursor: pointer;
}

.box {
	background-color: white;
	display: inline-block;
	border: 1px solid green;
	margin: 5px 0 5px 0;
	padding: 2px;
}

.box:hover {
	color: white;
	background-color: green;
}

input[type=submit] {
	background-color: white;
	display: inline-block;
	border: 1px solid green;
	padding: 2px;
}

input[type=submit]:hover {
	color: white;
	background-color: green;
}

.basketplusminuscontainer {
	text-align: center;
	vertical-align: middle;
	line-height: 20px;
}

.basketplusminus {
	display: inline-block;
	margin: 10px;
	background: green;
	color: white;
	cursor: pointer;
	width: 20px;
	height: 20px;
	border-radius: 10px;

}

.basketplusminusqty {
	margin: 10px;
	float: left;
}

.filesBox { border: 1px solid green; cursor: pointer; vertical-align: middle; }
.filesBox:hover { background-color: #D4FFD4; }

#footerLinks a , #footerLinks a:visited {
	color: white;
}

.searchResult {
	width: 100%;
	border: 1px solid black;
	background-color: white;
	margin: 0 0 5px 0;
	padding: 0.5em;
}

.searchResult:hover {
	background-color: #E6FFE6;
}

.discontinuedProduct {
	border: 1px solid #cccccc;
	background-color: #ffcccc;
	color: #800000;
	padding: 0.5em;
	display:inline-block;
	margin: 0.5em auto;
}

.h1style {
	background-color: white;
	border: 1px solid green;
	margin: 5px 0 5px 0;
	padding: 10px;
	width: auto;
}

/* @media only screen and (max-width: 700px) { */
@media screen and (max-width: 700px) {
    /* For mobile phones: */
    [class*="col-"] {
		float: none;
        width: 100%;
    }
    
	.loginForm1 {float:none;}
	.leftMenu {display:table-footer-group;}
	.storeProductsTable {display:table-row-group;}
	.pr_details_pic {float: none; margin-left: auto; margin-right: auto;}
	#pr-details-flex { flex-direction: column; }
	.responsiveMenuShortcut {order: 0; display:block;}
	.product_details { order: 1; }
	.leftMenu { order: 2; }
}