
/* :: CSS Windows 
===================================================================================================== :: */

#window-info-box {
	position: fixed; z-index: 10000; width: 100%; height: 100%; background: rgba(0,0,0,.75);
}
#window-info-box .flex-wrapper {
	position: absolute; top: 0; right: 0; bottom: 0; left: 0; overflow: auto;
	display: flex; flex-direction: column; align-items: stretch;
}

	#window-info-box .inner-window {
		position: relative; min-width: 360px; max-width: 100%; 
		margin: auto; padding: 20px;
		box-shadow: 2px 2px 15px #000;
	}
	
		.inner-window-header {
			margin: -20px -20px 1.5em; padding: 2px 5px;
			border-bottom: 1px solid;
		}
		
			.inner-window-header h3 {padding: 12px; border: none;}
			
/* :: Special Classes and styling
===================================================================================================== :: */

li .special-link {display: block;}

.special-link {
	position: relative;
	display: inline-block;
	padding: .3em .5em;
	border: 1px solid;
}

	.special-link a {text-decoration: none;}

.separator {white-space: nowrap; margin: 0 .3em;}

.item-price {display: inline-block; position: relative;}
	.item-price span {white-space: nowrap;}
	.item-price strong {font-size: 1.3em; font-weight: bold;}

.delete-handle {
	position: absolute; top: 4px; right: 4px;
	display: inline-block;
	padding: .5em;
	font-weight: bold; font-size: .9em; line-height: 1em;
	cursor: pointer;
}

.delete-handle {
	box-shadow: 1px 1px 4px #666;
}

.item-gallery li img {
	box-shadow: 0 1px 2px rgba(0,0,0,.5);
}

.special-link,
.form-box-elements legend {
	border-radius: 5px;
}


.txt, .txt-small, input[type="password"], textarea, .btn,
.add-item,
.tab-content a, 
.delete-handle,
.item-box .list .btn, .btn-del, .shopping .form-elements .btn,
.txt, .txt-small, input[type="password"], textarea {
	border-radius: 3px;
}

.pagination strong {
	border-radius: 20px;
}

.no-bullet-list {list-style: none; padding-left: 0;}

.scr-bar {padding: 10px; overflow: auto;}

/* :: Responsive 
===================================================================================================== :: */

@media all 
and (max-width : 840px) {

.col-66, .col-33 {width: 100%;}

.search-bar .inner {border-width: 2px 0 0;}

#main-nav a {font-size: 1.1em;}

.item-filter {background-image: none;}

	.item-filter div {width: 59%; padding-left: 10px; border-left: 3px solid white;}
	
		#site .item-filter li, #site .item-filter-search li {margin: 0 3px 3px 0;}

	.item-filter p {top: 0; min-height: 95px; margin: 0; padding: 20px 0 160px 20px; background-position: 100% 100%;}

#footer {font-size: 1em;}

}

@media all 
and (max-width : 640px) {

#header .social {text-align: center;}
	.social .icon {display: inline-block;}
	.social .icon .fb {margin-bottom: 0;}

#header .fR {width: 100%; margin-top: 12px; border-top: 1px solid #ccc;}	
	#header .fR p {text-align: center;}

.search-bar h4 {
	text-indent: 100%; white-space: nowrap; overflow: hidden;
	width: 32px; margin: 0 3px 0 0; padding: 0;
	background: transparent url(icon_search.png) no-repeat 50% 50%;
}

.search-bar label {font-size: .9em;}

.item-filter div {width: 100%; border-left: none; padding-left: 3px;}
.item-filter p {width: 100%; padding: 20px 120px 30px 20px; position: static; background-image: url(item_filter_bgr_2_sm.png);}

.img-th {width: 90%;}

.item-box .list h6 .item-price {float: none; display: block;}

}

